/* ============================================================================
   KI-ERKLAERVIDEO: Landingpage zum Produkt Erklaervideo (99 EUR)

   Baut auf sections/ki-sichtbarkeit.css auf (lp-* Bausteine, Kopf, Hero-
   Hintergrund .av-hero, Preis, Formular, Ablauf, Person, Fragen). Hier nur,
   was diese Seite zusaetzlich braucht: Einstieg in zwei Spalten mit Video,
   Beispielvideos. Klassen kv-*.
   Gold (--accent) nur an Handlungsaufforderungen und Kickern wie auf der
   Report-Seite. Die interaktive Galerie liegt separat in video-galerie.css.
   ============================================================================ */

/* ── Abstaende: kompakter als die Report-Seite (Phil, 20.10.2026) ─────── */
.kv-page .lp-section { padding-block: clamp(32px, 4vw, 48px); }
.kv-page .lp-section--deep .lp-lead { margin-bottom: 0; }
.kv-page .lp-cols, .kv-page .lp-steps { margin-top: var(--space-8); }

/* Eine Hierarchie fuer die gesamte Videoseite: Abschnitt, Unterabschnitt, Karte. */
.lp.kv-page .kv-section-heading {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-align: center;
    text-wrap: balance;
}
.kv-page .kv-proben__gruppe:first-of-type { margin-top: 0; }
.kv-page .lp-faq { margin: var(--space-4) auto 0; }


/* ── 1. Einstieg: Text links, Video rechts ───────────────────────────── */
.kv-hero { padding-block: var(--space-6) clamp(32px, 5vw, 56px); }
.kv-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, calc(var(--space-24) * 6 + var(--space-16))) auto;
    justify-content: center;
    gap: var(--space-8);
    align-items: center;
}
.lp .kv-hero h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.1rem, 1.2rem + 3vw, 3.4rem);
    font-weight: var(--weight-black);
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.kv-hero .lp-lead { margin-bottom: var(--space-6); max-width: 44rem; }

.kv-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-6);
}
.kv-price__text { font-size: var(--text-sm); color: var(--text-body); }

.kv-price__num {
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    font-weight: var(--weight-black);
    white-space: nowrap;
    line-height: 1;
    color: var(--text-strong);
    letter-spacing: -0.02em;
}

/* Text und Video bilden eine kompakte, gemeinsam zentrierte Gruppe. */
/* Bildhoehe = Fenster minus Kopfzeile, Abstaende und Leiste "Beispielvideos
   entdecken", damit das Startbild auch auf Laptops ganz im Bild ist. */
.kv-hero__media { margin: 0; justify-self: end; width: min(360px, max(240px, calc((100svh - var(--space-24) * 2) * 9 / 16))); }

/* ── Videorahmen (quadratisch, im Einstieg hoch) ─────────────────────── */
/* Feste Seitenverhaeltnis-Box, damit beim Laden nichts springt. Dunkler
   Videogrund #0B0F18 aus den Videos selbst. */
.kv-frame {
    width: 100%;
    background: #0B0F18;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.kv-frame video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #0B0F18;
}
/* Anzeige im Einstieg (9:16). Breite folgt der Fensterhoehe, damit das
   Video auf Laptops (etwa 1366 x 650) samt Kopfleiste ganz sichtbar ist. */
.kv-frame--hoch { width: min(100%, 360px, max(240px, calc((100svh - 200px) * 9 / 16))); margin-inline: auto; }
.kv-frame--hoch video { aspect-ratio: 9 / 16; }
.kv-frame:focus-within { outline: 2px solid var(--accent); outline-offset: var(--space-1); }

/* ── 2. Beispiele ────────────────────────────────────────────────────── */
.kv-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}
.kv-example { display: flex; flex-direction: column; }
.lp .kv-example h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.kv-example > p { margin: 0; }

.kv-transkript {
    margin-top: var(--space-4);
    border-top: 1px solid var(--lp-line);
    padding-top: var(--space-3);
}
.kv-transkript summary {
    cursor: pointer;
    color: var(--text-strong);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
}
.kv-transkript summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: var(--space-1);
    border-radius: var(--radius-md);
}
.kv-transkript--hero { max-width: 52rem; margin-top: var(--space-8); }
.lp .kv-transkript p {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* ── 2. Videoarten: Überschrift links, Zeilenliste rechts ────────────── */
.lp .kv-note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.kv-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-12);
    align-items: start;
}
.lp .kv-split .kv-note { max-width: 26rem; }
.kv-arten {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
}
.kv-arten > div {
    padding: var(--space-6);
    background: var(--surface-card);
    border: thin solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.kv-arten dt { color: var(--text-strong); font-weight: var(--weight-bold); font-size: var(--text-lg); margin-bottom: var(--space-3); }
.kv-arten__vorschau {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    background: var(--surface-sunken);
}
.kv-arten dd { margin: 0; color: var(--text-body); }
.kv-arten__bild {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    cursor: pointer;
}
.kv-arten__bild .kv-arten__vorschau { margin-bottom: 0; }
.kv-arten__bild:focus-visible { outline: var(--space-1) solid var(--accent); outline-offset: var(--space-1); }

/* Kleiner persoenlicher Kontakt direkt unter der Bestellung. */
.kv-kontakt {
    display: grid;
    grid-template-columns: var(--space-24) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    max-width: calc(var(--space-24) * 8);
    margin-inline: auto;
    padding: var(--space-6);
    border: thin solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}
.kv-kontakt img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-pill); }
.lp .kv-kontakt h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.lp .kv-kontakt p { margin: 0 0 var(--space-3); }
.lp .kv-kontakt__name { font-size: var(--text-sm); color: var(--text-muted); }
.kv-kontakt__name strong { color: var(--text-strong); }
.kv-kontakt__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); }
@media (max-width: 600px) {
    .kv-kontakt { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .kv-kontakt img { width: var(--space-16); }
    .kv-kontakt__links a { overflow-wrap: anywhere; }
}

/* ── 3. Leistung: Häkchenliste und Formate ───────────────────────────── */
.kv-paket {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-8);
    margin-top: var(--space-4);
    align-items: stretch;
}
.kv-leistung {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
    align-content: center;
}
.kv-leistung li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.kv-leistung .icon {
    width: var(--space-6);
    height: var(--space-6);
    padding: var(--space-1);
    border-radius: 50%;
    background-color: var(--lp-good);
    -webkit-mask: none;
            mask: none;
    position: relative;
}
.kv-leistung .icon::after {
    content: "";
    position: absolute;
    inset: var(--space-1);
    background: var(--lp-deep);
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}
.lp .kv-leistung p { margin: 0; color: var(--text-body); }
.kv-leistung strong { display: block; color: var(--text-strong); }

.kv-formate {
    padding: var(--space-6);
    background: var(--lp-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
}
.lp .kv-formate__titel { margin: 0 0 var(--space-4); color: var(--text-strong); font-weight: var(--weight-bold); }
.kv-formate ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
/* Erste Zeile so hoch wie das höchste Symbol, damit die Beschriftungen auf einer Linie stehen. */
.kv-formate li { display: grid; grid-template-rows: calc(var(--space-8) * 16 / 9 + var(--space-2)) auto auto; align-content: start; justify-items: center; gap: var(--space-1); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.kv-formate li strong { color: var(--text-strong); }
.kv-formate__form { display: block; align-self: end; margin-bottom: var(--space-2); border: 2px solid var(--text-muted); border-radius: var(--space-1); }
.kv-formate__form--hoch { width: var(--space-8); height: calc(var(--space-8) * 16 / 9); }
.kv-formate__form--quadrat { width: var(--space-12); height: var(--space-12); }
.kv-formate__form--quer { width: calc(var(--space-12) * 16 / 9); height: var(--space-12); }

/* Ablaufvideo: kompaktes Querformat, zentriert und ohne Beschnitt. */
.kv-page .kv-ablauf-section { padding-block: var(--space-6); }
.kv-bestellablauf__video {
    display: block;
    width: 100%;
    max-width: calc(var(--space-24) * 6 + var(--space-16));
    margin-inline: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    margin-top: var(--space-4);
    border: thin solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: #0B0F18;
}
.kv-bestellablauf__video:focus-visible {
    outline: var(--space-1) solid var(--accent);
    outline-offset: var(--space-1);
}
/* Auch der Uebergang in die folgende Videoreihe bleibt knapp. */
.kv-page #videoreihe { padding-block: var(--space-6); }
#videoreihe.kv-gallery--ready .kv-examples {
    height: calc(var(--kv-media-width) / var(--kv-tallest-ratio, 1) + var(--space-16) + var(--space-4));
    margin-top: var(--space-4);
}
#videoreihe .kv-gallery__controls { margin-top: 0; align-items: center; }
.lp #videoreihe .kv-gallery__count { font-size: var(--text-xs); margin-bottom: var(--space-1); }
.lp #videoreihe .kv-gallery__title { font-size: var(--text-base); }
/* ── 6. Bestellung ───────────────────────────────────────────────────── */
.lp-form .lp-row .lp-field { min-width: 0; }
.lp .kv-hint { display: block; margin-top: 0; }
.lp-form fieldset + fieldset { border-top: 1px solid var(--lp-line); padding-top: var(--space-2); margin-top: var(--space-4); }
.lp .kv-legend-hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }

/* Stimmen: vier Karten, je Auswahlknopf, Name und Hoerprobe. Die ganze
   Kopfzeile ist das Label, der Player liegt ausserhalb (kein interaktives
   Element im Label). Gewaehlte Karte mit Goldrand, weil sie die Bestellung
   bestimmt. */
.kv-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kv-voice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--c-navy-900);
    border: 1px solid rgba(159, 179, 217, .3);
    border-radius: 10px;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.kv-voice:has(input:checked) { border-color: var(--accent); }
.kv-voice input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.kv-voice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kv-voice label { display: grid; gap: 2px; cursor: pointer; font-size: var(--text-sm); color: var(--text-muted); }
.kv-voice label strong { color: var(--text-strong); font-size: var(--text-base); }
.kv-voice audio { grid-column: 1 / -1; width: 100%; height: 36px; }
.lp .kv-transcript-note { margin-top: var(--space-2); }

.kv-choice { display: grid; gap: 0; margin-bottom: var(--space-2); }
.kv-choice .lp-check { margin: 0 0 var(--space-3); }
.kv-choice strong { color: var(--text-strong); }
/* Auswahlgruppen in Schritt 1: Videoart, Format, Länge. Karten wie die
   Längenstufen, gewählte mit Goldrand, weil sie die Bestellung bestimmt. */
.kv-gruppe { margin: 0 0 var(--space-6); }
.lp .kv-gruppe__label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-strong); }
.kv-karten { display: grid; gap: var(--space-2); }
.kv-karten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv-karte {
    position: relative;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: var(--space-3);
    background: var(--c-navy-900);
    border: 1px solid rgba(159, 179, 217, .3);
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-muted);
    transition: border-color var(--duration-fast) var(--ease-out);
}
.kv-karte input { position: absolute; opacity: 0; pointer-events: none; }
.kv-karte strong { font-size: var(--text-sm); color: var(--text-strong); }
.kv-karte:has(input:checked) { border-color: var(--accent); background: rgba(255, 201, 71, .08); }
.kv-karte:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Format: kleines Seitenverhältnis-Symbol, Unterkante auf einer Linie */
.kv-karte--format { justify-items: center; text-align: center; grid-template-rows: calc(var(--space-6) * 16 / 9 + var(--space-2)) auto auto; }
.kv-karte .kv-formate__form { align-self: end; margin-bottom: var(--space-2); border-radius: 3px; }
.kv-karte .kv-formate__form--hoch { width: var(--space-6); height: calc(var(--space-6) * 16 / 9); }
.kv-karte .kv-formate__form--quadrat { width: var(--space-8); height: var(--space-8); }
.kv-karte .kv-formate__form--quer { width: calc(var(--space-8) * 16 / 9); height: var(--space-8); }
.kv-karte:has(input:checked) .kv-formate__form { border-color: var(--text-strong); }

/* Laenge und Preis: kleine Karten mit Wortzahl. */
.kv-laenge { margin-bottom: var(--space-4); }
.kv-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.kv-tier {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: var(--space-3) var(--space-1);
    background: var(--c-navy-900);
    border: 1px solid rgba(159, 179, 217, .3);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color var(--duration-fast) var(--ease-out);
}
.kv-tier input { position: absolute; opacity: 0; pointer-events: none; }
.kv-tier:has(input:checked) { border-color: var(--accent); background: rgba(255, 201, 71, .08); }
.kv-tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kv-tier__len { font-size: var(--text-sm); color: var(--text-body); }
.kv-tier__woerter { font-size: var(--text-xs); color: var(--text-muted); }
.kv-tier__price { font-weight: var(--weight-black); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kv-tier__rabatt { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--accent); }
.kv-tier[hidden] { display: none; }
.kv-tier--individuell { border-style: dashed; }
.kv-woerter { display: inline-block; margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.kv-rabatt { display: inline-block; margin-left: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--accent); }
.lp .kv-schaetzung { margin: 0 0 var(--space-4); }
.lp .kv-schaetzung[data-state="warnung"] { color: var(--accent); }

.kv-preisliste { width: 100%; margin: var(--space-3) 0 0; border-collapse: collapse; font-size: var(--text-sm); }
.kv-preisliste th, .kv-preisliste td { padding: var(--space-1) 0; border-bottom: 1px solid var(--lp-line); }
.kv-preisliste th { text-align: left; font-weight: var(--weight-regular); color: var(--text-body); }
.kv-preisliste td { text-align: right; font-weight: var(--weight-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* Links: Zusammenfassung "Ihre Bestellung", läuft beim Scrollen mit. */
.kv-summary__liste { margin: var(--space-4) 0; }
.kv-summary__liste[hidden] { display: none; }
.kv-summary__liste > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--lp-line);
    font-size: var(--text-sm);
}
.kv-summary__liste dt { color: var(--text-muted); }
.kv-summary__liste dd { margin: 0; color: var(--text-strong); font-weight: var(--weight-bold); text-align: right; }
.lp .kv-summary .lp-price__num { margin: var(--space-4) 0 var(--space-2); font-variant-numeric: tabular-nums; }
.lp .kv-summary .lp-price__num small { display: block; margin: var(--space-2) 0 0; }
.lp .kv-summary__inkl { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-body); }
.kv-alle-preise { margin-bottom: var(--space-4); font-size: var(--text-sm); }
.kv-alle-preise summary { cursor: pointer; color: var(--text-strong); font-weight: var(--weight-bold); }

.lp .kv-kurz { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); color: var(--text-strong); }
.kv-bedingungen .lp-terms { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .kv-voice, .kv-tier, .kv-karte { transition: none; }
}

/* ── Breakpoints ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .kv-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kv-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .kv-hero__media { max-width: 560px; width: 100%; margin-inline: auto; justify-self: stretch; }
    .kv-examples { gap: var(--space-8); }
}
@media (max-width: 960px) {
    /* Gestapelt steht die Zusammenfassung vor dem Formular, die Auswahl
       wäre dort noch offen. Preis und Knopf zeigen die Auswahl trotzdem. */
    .kv-summary__liste { display: none; }
    .kv-split, .kv-paket { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 760px) {
    .kv-examples { grid-template-columns: minmax(0, 1fr); }
    .kv-leistung { grid-template-columns: minmax(0, 1fr); }
    .kv-arten > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}
@media (max-width: 600px) {
    .kv-arten { grid-template-columns: minmax(0, 1fr); }
    .kv-voices { grid-template-columns: minmax(0, 1fr); }
    .kv-karten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kv-hero .lp-actions .cta-button { width: 100%; text-align: center; }
}

/* Lieferzusage und Einsatzbereiche verwenden die bestehenden Designtokens. */
.lp .kv-delivery { margin: 0 0 var(--space-6); color: var(--text-strong); }
.kv-delivery strong, .kv-delivery span { display: block; }
.kv-delivery span { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-body); }