/* Verlinktes Startbild, bevor die Beispiele direkt darunter folgen. */
.kv-hero__preview { position: relative; display: block; overflow: hidden; border: thin solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-sunken); box-shadow: var(--shadow-lg); color: var(--text-strong); }
.kv-hero__preview img { display: block; width: 100%; height: auto; }
.kv-hero__preview > span { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); background: var(--surface-card); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.kv-hero__preview:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }
.kv-gallery { --kv-proben-ton: calc(var(--space-8) + var(--space-2)); scroll-margin-top: var(--space-24); }
.kv-gallery .kv-frame video { aspect-ratio: auto; object-fit: contain; background: var(--surface-sunken); }
.kv-gallery .lp-kicker { color: var(--text-muted); }
.lp .kv-gallery__meta { margin: var(--space-4) 0 var(--space-2); color: var(--text-muted); font-size: var(--text-xs); }
.lp .kv-gallery .kv-example h3 { margin: 0 0 var(--space-2); }

/* Gleich breite, grosszuegige Karten: Reels bekommen ihre volle Hoehe,
   Quadrate bleiben quadratisch. Die Buehne reserviert die groesste Hoehe. */
.kv-gallery--ready {
    --kv-base: var(--media-gallery-desktop);
    --kv-media-width: min(calc(var(--kv-base) + var(--space-12)), var(--container-narrow), calc(100vw - var(--space-16)));
}
.kv-gallery--ready .kv-examples {
    position: relative;
    display: block;
    height: calc(var(--kv-media-width) / var(--kv-tallest-ratio, 1) + var(--space-16) + var(--space-8));
    overflow: clip;
    perspective: var(--media-gallery-perspective);
    margin-top: var(--space-4);
    touch-action: pan-y pinch-zoom;
    user-select: none;
    cursor: grab;
    isolation: isolate;
}
.kv-gallery--ready .kv-examples:active { cursor: grabbing; }
.kv-gallery--ready .kv-example {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: var(--kv-media-width);
    height: calc(var(--kv-media-width) / var(--kv-ratio, 1) + var(--space-16));
    min-width: 0;
    margin: 0;
    transform: translate(-50%, -50%);
    transition: transform var(--duration-base) var(--ease-in-out), opacity var(--duration-base) var(--ease-in-out);
}
.kv-gallery--ready .kv-example > :not(.kv-frame) { display: none; }
.kv-gallery--ready .kv-example[data-position="0"] { z-index: 4; opacity: 1; }
.kv-gallery--ready .kv-example[data-position="-1"] { z-index: 3; opacity: 1; transform: translateX(calc(-50% - var(--media-gallery-near-offset))) translateY(calc(-50% + var(--space-2))) rotateY(var(--media-gallery-tilt)) scale(var(--media-gallery-near-scale)); }
.kv-gallery--ready .kv-example[data-position="1"] { z-index: 3; opacity: 1; transform: translateX(calc(-50% + var(--media-gallery-near-offset))) translateY(calc(-50% + var(--space-2))) rotateY(calc(var(--media-gallery-tilt) * -1)) scale(var(--media-gallery-near-scale)); }
.kv-gallery--ready .kv-example[data-position="-2"] { z-index: 2; opacity: 1; transform: translateX(calc(-50% - var(--media-gallery-far-offset))) translateY(calc(-50% + var(--space-4))) rotateY(var(--media-gallery-tilt)) scale(var(--media-gallery-far-scale)); }
.kv-gallery--ready .kv-example[data-position="2"] { z-index: 2; opacity: 1; transform: translateX(calc(-50% + var(--media-gallery-far-offset))) translateY(calc(-50% + var(--space-4))) rotateY(calc(var(--media-gallery-tilt) * -1)) scale(var(--media-gallery-far-scale)); }
.kv-example[data-position="-1"] .kv-gallery__media, .kv-example[data-position="1"] .kv-gallery__media { opacity: var(--opacity-secondary-media); }
.kv-example[data-position="-2"] .kv-gallery__media, .kv-example[data-position="2"] .kv-gallery__media { opacity: var(--opacity-distant-media); }
.kv-gallery--ready .kv-example[data-position="away"] { z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(var(--media-gallery-far-scale)); }
.kv-gallery--ready .kv-frame {
    display: grid;
    grid-template-rows: var(--space-16) minmax(0, 1fr);
    width: 100%;
    height: 100%;
    border-radius: var(--space-6);
    border: thin solid var(--border-subtle);
    background: var(--surface-sunken);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.kv-gallery--ready .kv-example[data-active] .kv-frame { border-color: var(--text-muted); }
.kv-gallery__profile { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); min-width: 0; background: var(--surface-card); }
.kv-gallery__avatar { display: grid; place-items: center; flex: 0 0 var(--space-8); height: var(--space-8); border: thin solid var(--text-muted); border-radius: var(--radius-pill); color: var(--text-strong); font-family: var(--font-secondary); font-weight: var(--weight-bold); }
.kv-gallery__profile-text { min-width: 0; display: grid; color: var(--text-strong); font-size: var(--text-sm); line-height: var(--leading-snug); }
.kv-gallery__profile-text > span { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.kv-gallery__profile-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-example[data-format="portrait"] .kv-gallery__profile { padding-inline: var(--space-2); }
.kv-example[data-format="portrait"] .kv-gallery__avatar { flex-basis: var(--space-6); height: var(--space-6); font-size: var(--text-xs); }
.kv-gallery__media { position: relative; min-height: 0; overflow: hidden; background: var(--surface-sunken); }
.kv-gallery__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--surface-sunken); color: var(--text-strong); cursor: pointer; font: inherit; }
.kv-gallery__poster, .kv-gallery__autoplay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kv-gallery--ready .kv-gallery__media video { aspect-ratio: auto; width: 100%; height: 100%; object-fit: contain; }
.kv-gallery__autoplay { pointer-events: none; }
.kv-gallery__autoplay[hidden], .kv-gallery__sound[hidden] { display: none; }
.kv-gallery--ready .kv-gallery__original { display: none; }
.kv-gallery--ready .kv-example[data-inline] .kv-gallery__original { display: block; }
.kv-gallery--ready .kv-example[data-inline] .kv-gallery__open { display: none; }
.kv-gallery__watch { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-strong); }
.kv-example:not([data-active]) .kv-gallery__watch, .kv-example[data-previewing] .kv-gallery__watch { display: none; }
.kv-gallery__watch .icon { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); filter: drop-shadow(var(--shadow-sm)); }
.kv-gallery__open:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: calc(var(--space-1) * -1); }
/* Derselbe Tonknopf wie in den Branchenreihen, direkt auf dem Video.
   Beim nativen Player bleibt dessen Steuerleiste frei. */
.kv-example[data-inline] .kv-gallery__sound { inset-block-end: calc(var(--space-12) + var(--space-2)); }
.kv-gallery__button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-12); min-width: var(--space-12); padding: var(--space-3); border: thin solid var(--text-muted); border-radius: var(--radius-pill); background: var(--text-strong); color: var(--surface-sunken); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.kv-gallery__button:hover { background: var(--text-body); }
.kv-gallery__button:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }
.kv-gallery__previous .icon { rotate: 180deg; }
.kv-gallery__controls { display: grid; grid-template-columns: var(--space-12) minmax(0, 1fr) var(--space-12); align-items: start; gap: var(--space-6); width: min(100%, var(--container-narrow)); margin: var(--space-2) auto 0; }
.kv-gallery__caption { text-align: center; min-width: 0; }
.lp .kv-gallery__count { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.lp .kv-gallery__title { margin: 0; color: var(--text-strong); font-size: var(--text-lg); line-height: var(--leading-snug); text-align: center; }

/* Vollstaendige Wiedergabe auf Wunsch in einem nativen Dialog. */
.kv-gallery-dialog-open { overflow: hidden; }
.kv-gallery-dialog { box-sizing: border-box; width: min(var(--container-narrow), calc(100% - var(--space-8))); max-width: none; max-height: calc(100svh - var(--space-8)); margin: auto; padding: var(--space-4); border: thin solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--text-body); box-shadow: var(--shadow-lg); }
.kv-gallery-dialog::backdrop { background: var(--surface-overlay); }
.kv-gallery-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.kv-gallery-dialog__title { margin: 0; color: var(--text-strong); font-size: var(--text-lg); line-height: var(--leading-snug); }
.kv-gallery-dialog__video { display: block; width: 100%; max-height: var(--media-player-height); object-fit: contain; background: var(--surface-sunken); }
.kv-gallery-dialog__meta { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
@media (max-width: 899px) { .kv-gallery--ready { --kv-base: var(--media-gallery-tablet); } }
@media (max-width: 600px) {
    .kv-gallery--ready { --kv-base: var(--media-gallery-mobile); }
    .kv-gallery__controls { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .kv-gallery--ready .kv-example { transition: none !important; }
}