/* Arbeitsproben: zwei wischbare Reihen, Hochformat und Quadrat getrennt.
   Ohne JavaScript stehen normale Player in einer Reihe mit Scroll-Einrasten.
   arbeitsproben.js ergaenzt die Bedienung im Video (kv-proben--js): die
   Flaeche spielt ab oder haelt an, ein runder Knopf unten rechts schaltet
   den Ton. Unter dem Video steht nur der Titel (Phil, 24.10.2026).
   Breiten: Desktop vier Reels oder drei Quadrate, Tablet zwei, Handy eines
   mit angeschnittenem Nachbarn als Hinweis zum Wischen. Die Hoehe folgt der
   Fensterhoehe, damit Kopf und Video auch auf flachen Laptops ganz im Bild sind. */
.kv-proben {
    --kv-proben-abstand: var(--space-4);
    --kv-proben-hoehe: max(calc(var(--space-24) * 3), calc(100svh - var(--space-24) * 2 - var(--space-12)));
    --kv-proben-ton: calc(var(--space-8) + var(--space-2));
    scroll-margin-top: var(--space-24);
}
.kv-proben__gruppe { margin-top: var(--space-12); }
.kv-proben__cta { display: flex; justify-content: center; margin-top: var(--space-8); }
.kv-proben__kopf { position: relative; display: grid; gap: var(--space-2); margin-bottom: var(--space-4); text-align: center; }
.lp .kv-proben__kopf p { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.kv-proben__kopf .kv-proben__nav { position: absolute; inset-inline-end: 0; inset-block-end: 0; }
@media (max-width: 900px) {
    .kv-proben__kopf .kv-proben__nav { position: static; justify-self: center; }
}

.kv-proben__liste {
    display: flex;
    gap: var(--kv-proben-abstand);
    margin: 0;
    padding: 0 0 var(--space-3);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}
.kv-proben__liste--hoch { --kv-probe-breite: min(calc((100% - var(--kv-proben-abstand) * 3) / 4), calc(var(--kv-proben-hoehe) * 9 / 16)); }
.kv-proben__liste--quadrat { --kv-probe-breite: min(calc((100% - var(--kv-proben-abstand) * 2) / 3), var(--kv-proben-hoehe)); }
.kv-probe { flex: 0 0 var(--kv-probe-breite); min-width: 0; scroll-snap-align: start; }
.kv-probe figure { margin: 0; }
.kv-probe__media {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: thin solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
    box-shadow: var(--shadow-md);
}
.kv-proben__liste--quadrat .kv-probe__media { aspect-ratio: 1; }
.kv-probe__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface-sunken); }
.kv-probe__media:focus-within { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }
.kv-probe figcaption { margin-top: var(--space-2); }
.kv-probe figcaption strong { color: var(--text-strong); font-size: var(--text-base); }
.lp .kv-proben__hinweis { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--text-sm); }

/* ── Mit JavaScript ─────────────────────────────────────────────────────── */
.kv-proben--js .kv-probe__media:focus-within { outline: none; }
.kv-probe__spiel { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: transparent; color: var(--text-strong); cursor: pointer; }
.kv-probe__spiel:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: calc(var(--space-1) * -1); border-radius: var(--radius-lg); }
.kv-probe__start { display: grid; place-items: center; width: var(--space-16); height: var(--space-16); border-radius: var(--radius-pill); background: var(--surface-overlay); font-size: var(--text-xl); box-shadow: var(--shadow-sm); transition: opacity var(--duration-fast) var(--ease-out); }
.kv-probe[data-spielt] .kv-probe__start { opacity: 0; }
.kv-probe__ton, .kv-proben__pfeil {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: thin solid var(--text-muted);
    border-radius: var(--radius-pill);
    background: var(--surface-overlay);
    color: var(--text-strong);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.kv-probe__ton { position: absolute; inset-inline-end: var(--space-2); inset-block-end: var(--space-2); width: var(--kv-proben-ton); height: var(--kv-proben-ton); font-size: var(--text-base); box-shadow: var(--shadow-sm); }
/* Stumm: Tonknopf hell, damit er sofort gefunden wird. */
.kv-probe__ton[data-stumm] { border-color: var(--text-strong); background: var(--text-strong); color: var(--surface-sunken); }
.kv-probe__ton[data-stumm]:hover { background: var(--text-body); }
.kv-probe__ton:hover, .kv-proben__pfeil:hover { border-color: var(--text-strong); }
.kv-probe__ton:focus-visible, .kv-proben__pfeil:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }
.kv-proben__nav { display: flex; flex-shrink: 0; gap: var(--space-2); }
.kv-proben__pfeil { width: var(--space-12); height: var(--space-12); background: transparent; font-size: var(--text-sm); }
.kv-proben__zurueck .icon { rotate: 180deg; }

@media (max-width: 899px) {
    .kv-proben__liste--hoch { --kv-probe-breite: min(calc((100% - var(--kv-proben-abstand)) / 2), calc(var(--kv-proben-hoehe) * 9 / 16)); }
    .kv-proben__liste--quadrat { --kv-probe-breite: min(calc((100% - var(--kv-proben-abstand)) / 2), var(--kv-proben-hoehe)); }
}
@media (max-width: 600px) {
    .kv-proben__liste--hoch { --kv-probe-breite: min(calc(100% - var(--space-16)), calc(var(--kv-proben-hoehe) * 9 / 16)); }
    .kv-proben__liste--quadrat { --kv-probe-breite: min(calc(100% - var(--space-12)), var(--kv-proben-hoehe)); }
}
@media (prefers-reduced-motion: reduce) {
    .kv-probe__start, .kv-probe__ton, .kv-proben__pfeil { transition: none; }
}