/* ════════════════════════════════════════════════════════════════════
   ERKLÄRVIDEOS UND WEBINARE
   Designsprache „Hauptbuch & Beleg".

   DAS PROBLEM, DAS DIESE SEITE LÖSEN MUSS: Ein Videostandbild ist ein
   Foto — dunkel, randlos, mit eigener Bildsprache. Auf warmem Papier
   liegt es da wie etwas Hineingeklebtes. Dasselbe Problem hatte das
   Expert-Wappen, und die Antwort ist dieselbe: eine harte Tintenkante.
   Damit wird aus dem Fremdkörper ein Gegenstand AUF dem Papier.

   Zweitens: Videos bringen eine Zeitachse mit, und Zeit ist in diesem
   Haus Mono. Dauer, Kapitelnummern und Zeitmarken stehen deshalb
   durchgehend in der Schreibmaschinenschrift, die Titel in der Serife.
   Das ist keine Spielerei — es ist dieselbe Trennung wie zwischen Betrag
   und Kontobezeichnung im T-Konto.
   ════════════════════════════════════════════════════════════════════ */

.kurse-body {
    --ku-papier:      var(--hb-paper, #F4F1E8);
    --ku-flaeche:     var(--hb-card, #FCFAF4);
    --ku-tinte:       var(--hb-ink, #23201B);
    --ku-tinte-mitte: var(--hb-ink-mid, #6E6757);
    /* Eigener Wert, nicht --hb-ink-muted: Das Haus-Token #8A8273 kommt auf
       der Kartenfläche nur auf 3.64 und fällt damit für die kleinen
       Mono-Beschriftungen durch. Dieser Ton schafft 5.05. */
    --ku-grau:        #736B5B;
    --ku-linie:       var(--hb-border, #DAD3C2);
    --ku-rot:         var(--hb-terra, #B0492C);
    --ku-oliv:        var(--hb-oliv, #5E7A4F);
    --ku-serif:       var(--hb-serif, 'Lora', Georgia, serif);
    --ku-mono:        var(--hb-mono, 'JetBrains Mono', monospace);
}

/* ── Kopf ────────────────────────────────────────────────────────── */

.ku-seite { max-width: 1040px; margin: 0 auto; padding: 34px 24px 80px; }

.ku-marke {
    margin: 0 0 8px;
    font-family: var(--ku-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--ku-rot);
}
.ku-titel {
    margin: 0;
    font-family: var(--ku-serif);
    font-size: clamp(28px, 4.2vw, 42px);
    font-weight: 600;
    line-height: 1.16;
    color: var(--ku-tinte);
}
.ku-linie { margin: 18px 0 22px; border: 0; border-top: 2px solid var(--ku-tinte); }
.ku-vorspann {
    max-width: 64ch;
    margin: 0 0 32px;
    font-family: var(--ku-serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ku-tinte-mitte);
}

/* ── Die Kursliste ───────────────────────────────────────────────── */

.ku-liste {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ku-karte {
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--ku-tinte);
    background: var(--ku-flaeche);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.14s;
}
/* Der harte Druckschatten erst beim Darüberfahren — Karten, die von sich
   aus aus der Seite springen, ergeben ein unruhiges Raster. */
.ku-karte:hover { box-shadow: 6px 6px 0 var(--ku-tinte); }

/* ── Das Standbild ───────────────────────────────────────────────── */

.ku-bild {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--ku-tinte);
    /* Solange kein Bild da ist, steht hier kein Loch, sondern Papier mit
       dem Raster der Seite. Ein leerer grauer Kasten sieht nach Fehler
       aus, eine gerasterte Fläche nach Platzhalter. */
    background-color: var(--ku-papier);
    background-image:
        repeating-linear-gradient(0deg,  rgba(120,110,85,0.08) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(120,110,85,0.08) 0 1px, transparent 1px 14px);
}
.ku-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Die Dauer sitzt im Bild, unten rechts — wie auf jedem Videostandbild
   der Welt. Das ist eine Gewohnheit, gegen die anzugehen nichts brächte. */
.ku-dauer {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    background: rgba(26, 26, 23, 0.88);
    color: #FFF;
    font-family: var(--ku-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Das Schloss oben links: klein, aber unübersehbar. Es sagt nicht „du
   darfst nicht", sondern „das gehört zu Expert" — deshalb kein Rot. */
.ku-schild {
    position: absolute;
    left: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    /* Deckend, nicht durchscheinend: Das Schild liegt auf einem Foto, dessen
       Helligkeit niemand kennt. Bei 94 % würde der Olivton auf einem dunklen
       Standbild unter die Lesbarkeitsgrenze rutschen. */
    background: var(--ku-flaeche);
    border: 1px solid var(--ku-tinte);
    font-family: var(--ku-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ku-tinte);
}
.ku-schild img { height: 14px; width: auto; }
.ku-schild.ist-frei { color: var(--ku-oliv); }

/* ── Kartentext ──────────────────────────────────────────────────── */

.ku-karte-text {
    display: grid;
    gap: 7px;
    align-content: start;
    padding: 16px 18px 18px;
}
.ku-karte-marke {
    font-family: var(--ku-mono);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ku-grau);
}
.ku-karte-titel {
    margin: 0;
    font-family: var(--ku-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ku-tinte);
}
.ku-karte-satz {
    font-family: var(--ku-serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ku-tinte-mitte);
}

/* Die Fusszeile trägt die Zahlen. Eine dünne Linie darüber, weil hier
   etwas anderes beginnt — Auskunft statt Beschreibung. */
.ku-karte-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: baseline;
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid var(--ku-linie);
    font-family: var(--ku-mono);
    font-size: 10.5px;
    letter-spacing: 0.3px;
    color: var(--ku-grau);
}
.ku-karte-preis { color: var(--ku-rot); }

/* ── Die Kapitelliste ────────────────────────────────────────────── */

/* Wie ein Kontoblatt: Nummer, Bezeichnung, Zeit — und der Betrag rechts.
   Die Zeitmarke IST hier der Betrag.

   Das Raster sitzt NICHT am <li>, sondern an dessen einzigem Kind. Offene
   Einheiten sind ein <button>, gesperrte ein <span>, und beide müssen
   dasselbe Raster tragen — sonst stehen die Zeitspalten der anklickbaren
   und der gesperrten Zeilen verschieden weit rechts, und die Liste liest
   sich nicht mehr als Spalte. */
.ku-kapitel { display: grid; margin: 0; padding: 0; list-style: none; }

.ku-kapitel li { border-bottom: 1px solid var(--ku-linie); }
.ku-kapitel li:first-child { border-top: 1px solid var(--ku-linie); }

.ku-kapitel li > button,
.ku-kapitel-reihe {
    display: grid;
    width: 100%;
    /* Die vierte Spalte bleibt bei offenen Einheiten leer. Sie ist da, damit
       die Zeitspalte über alle Zeilen an derselben Stelle steht. */
    grid-template-columns: 30px minmax(0, 1fr) auto 18px;
    gap: 6px 14px;
    align-items: center;
    padding: 13px 4px;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: inherit;
}
.ku-kapitel li > button { cursor: pointer; }
.ku-kapitel li > button:hover { background: var(--ku-papier); }
.ku-kapitel li > button:focus-visible {
    outline: 2px solid var(--ku-tinte);
    outline-offset: -2px;
}

/* Die laufende Einheit. Ein 3px-Balken links, wie die aktive Station in der
   Lernwegliste — dasselbe Signal an derselben Stelle, nur hier. */
.ku-kapitel li.ist-dran > button {
    box-shadow: inset 3px 0 0 var(--ku-rot);
    background: var(--ku-papier);
}
.ku-kapitel li.ist-dran .ku-kapitel-titel { font-weight: 600; }

.ku-kapitel-nr {
    font-family: var(--ku-mono);
    font-size: 11px;
    color: var(--ku-grau);
}
.ku-kapitel-titel {
    font-family: var(--ku-serif);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ku-tinte);
}
.ku-kapitel-zeit {
    font-family: var(--ku-mono);
    font-size: 11px;
    /* Tabellenziffern: Ohne sie stehen 9:20 und 11:45 verschieden breit,
       und eine Spalte untereinander liest sich nicht mehr als Spalte. */
    font-variant-numeric: tabular-nums;
    color: var(--ku-grau);
}

/* Gesperrt heisst hier: sichtbar, aber grau. Zu verstecken, was es gibt,
   wäre der Fehler des alten Kontenplan-Fensters in neuer Form — man kann
   nur wollen, was man kennt. */
.ku-kapitel li.ist-zu .ku-kapitel-titel { color: var(--ku-grau); }
.ku-kapitel-schloss { display: inline-flex; color: var(--ku-grau); }

.ku-kapitel-marke {
    grid-column: 2;
    font-family: var(--ku-mono);
    font-size: 9.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ku-oliv);
}

/* Was gerade auf der Bühne liegt. Steht unter dem Spieler, weil ein Video
   ohne Beschriftung nicht sagt, welche der fünf Einheiten man sieht. */
.ku-laeuft {
    margin: 10px 0 0;
    font-family: var(--ku-mono);
    font-size: 11px;
    letter-spacing: 0.3px;
    color: var(--ku-grau);
}
.ku-laeuft:empty { display: none; }

/* ── Der Spieler ─────────────────────────────────────────────────── */

.ku-buehne {
    aspect-ratio: 16 / 9;
    border: 2px solid var(--ku-tinte);
    background: #17150F;
    display: grid;
    place-items: center;
}
.ku-buehne iframe, .ku-buehne video { width: 100%; height: 100%; border: 0; display: block; }

/* Solange keine Quelle hinterlegt ist. Kein Fehler, sondern ein Zustand —
   im Prototypen ist das der Normalfall. */
.ku-buehne-leer {
    padding: 24px;
    text-align: center;
    font-family: var(--ku-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #B4AC9B;
}

/* ── Zwei Wege hinein ────────────────────────────────────────────── */

.ku-wege {
    display: grid;
    gap: 16px;
    margin: 26px 0 0;
}
@media (min-width: 700px) { .ku-wege { grid-template-columns: 1fr 1fr; } }

.ku-weg {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--ku-linie);
    background: var(--ku-flaeche);
}
/* Der Pass ist der empfohlene Weg und sieht auch so aus: kräftige Kante
   und Druckschatten, wie der Preiskasten auf der Expert-Seite. Eine
   Empfehlung, die man erraten muss, ist keine. */
.ku-weg.ist-empfohlen {
    border: 2px solid var(--ku-tinte);
    box-shadow: 6px 6px 0 var(--ku-tinte);
}
.ku-weg-marke {
    font-family: var(--ku-mono);
    font-size: 9.5px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ku-grau);
}
.ku-weg-preis {
    font-family: var(--ku-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--ku-tinte);
}
.ku-weg-satz {
    font-family: var(--ku-serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ku-tinte-mitte);
}
.ku-knopf {
    justify-self: start;
    margin-top: 6px;
    padding: 11px 18px;
    border: 1px solid var(--ku-tinte);
    background: var(--ku-rot);
    color: #FFF;
    font-family: var(--ku-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.ku-knopf.ist-leise {
    background: transparent;
    color: var(--ku-tinte);
}
.ku-knopf:disabled { opacity: 0.5; cursor: not-allowed; }

.ku-leer {
    padding: 40px 0;
    font-family: var(--ku-serif);
    font-size: 15px;
    color: var(--ku-tinte-mitte);
}

@media (max-width: 560px) {
    .ku-seite { padding: 24px 16px 60px; }
    .ku-liste { grid-template-columns: minmax(0, 1fr); }
    .ku-weg.ist-empfohlen { box-shadow: 4px 4px 0 var(--ku-tinte); }
}

/* Die Zahlenzeile unter dem Spieler: dieselbe Zeile wie auf der Karte, nur
   an anderer Stelle — deshalb dieselbe Klasse plus Abstand, keine zweite
   Beschreibung desselben Aussehens. */
.ku-kurs-zahlen { margin-top: 14px; }

/* Der Rücklink steht in der Markenzeile. Er soll wie eine Beschriftung
   aussehen und nicht wie ein Link mitten im Text. */
.ku-marke a { color: inherit; text-decoration: none; }
.ku-marke a:hover { text-decoration: underline; }

/* ── Einzelkauf und Streichpreis ──────────────────────────────────── */

/* Ein Einzelkauf ist keine Expert-Leistung, also trägt sein Schild kein
   Wappen und nicht die Tintenfarbe des Passes, sondern Terrakotta — dieselbe
   Farbe, in der auf dieser Website alles steht, was Geld kostet. */
.ku-schild.ist-kauf { color: var(--ku-rot); }

/* Der Streichpreis. Nicht nur durchgestrichen, sondern auch kleiner und
   grauer: Er ist eine Nebenangabe, und zwei Preise in gleicher Grösse
   nebeneinander sind eine Frage statt einer Antwort. */
.ku-karte-preis s,
.ku-weg-preis s {
    margin-left: 4px;
    color: var(--ku-grau);
    font-weight: 400;
    text-decoration-thickness: 1px;
}
.ku-weg-preis s { font-size: 16px; }