/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 3/4 — KOMPONENTEN
   Wiederverwendbare Bausteine. NUR Tokens — kein einziger hell/dunkel-
   spezifischer Selektor (§8). Diese Datei ist in ALLEN Prototypen
   byte-identisch.
   Seit E6 (2026-07-29): am DATEIENDE ein markierter OP-ERGÄNZUNGSBLOCK
   (Rest-Strecken-Bausteine ohne Abgabe-Prototyp) — die Byte-Identität zur
   Abgabe gilt für den Teil DARÜBER (CHANGELOG «FEATURE(E6)»).
   =========================================================================== */

@layer komponenten {

  /* === Kopfzeile ========================================================= */

  .kopf {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: color-mix(in oklab, var(--flaeche) 88%, transparent);
    backdrop-filter: blur(10px);
    border-block-end: var(--linie-breit) solid var(--linie);
    padding-block-start: env(safe-area-inset-top);
  }

  .kopf__innen {
    display: flex;
    align-items: center;
    gap: var(--raum-5);
    min-block-size: 4.5rem;
  }

  .kopf__marke { flex: none; display: block; }
  .kopf__marke img { block-size: 2.5rem; inline-size: auto; }
  .logo--hell { display: var(--logo-hell); }
  .logo--dunkel { display: var(--logo-dunkel); }

  /* Menü für enge Viewports — funktioniert ohne JavaScript */
  .menue { display: none; position: relative; }
  .menue > summary {
    display: grid;
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border-radius: var(--radius-voll);
    background: var(--flaeche-3);
    list-style: none;
    cursor: pointer;
  }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
  .menue__tafel {
    position: absolute;
    inset-block-start: calc(100% + var(--raum-2));
    inset-inline-start: 0;
    z-index: 50;
    inline-size: 15rem;
    padding: var(--raum-3);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-2);
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-1);
  }
  .menue__tafel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  .menue__tafel a:hover { background: var(--flaeche-3); }
  .menue__tafel a[aria-current="page"] { background: var(--flaeche-4); }

  .kopf__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2);
    margin-inline-end: auto;
  }

  .kopf__nav a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border-radius: var(--radius-s);
    color: var(--text-2);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  .kopf__nav a:hover { background: var(--flaeche-3); color: var(--text); }
  .kopf__nav a[aria-current="page"] {
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--marke);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
  }

  .kopf__aktionen { flex: none; display: flex; align-items: center; gap: var(--raum-2); }
  .kopf__spenden { white-space: nowrap; }

  /* === Knöpfe ============================================================ */

  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-4);
    border: var(--linie-breit) solid transparent;
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-fett);
    text-decoration: none;
    transition: background var(--dauer-schnell) var(--kurve);
  }
  .knopf svg { inline-size: 1.15em; block-size: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.75; }

  .knopf--marke { background: var(--marke); color: var(--marke-auf); }
  .knopf--marke:hover { background: var(--flaeche-4); color: var(--marke-auf); }

  .knopf--rand { border-color: var(--linie-stark); }
  .knopf--rand:hover { background: var(--flaeche-3); }

  .knopf--still { background: var(--flaeche-3); }
  .knopf--still:hover { background: var(--flaeche-4); }

  .knopf--ikon { inline-size: var(--tastfeld); padding-inline: 0; }
  .knopf--breit { inline-size: 100%; }

  /* Deaktiviert. Gilt für JEDEN Knopf im Paket, weil .knopf die Basisklasse
     ist — sonst sieht ein toter Knopf aus wie ein lebender (der Fall trat auf
     der Beitragsseite auf: «Vorschlagen» in voller Markenfarbe direkt neben
     «Melde dich an, um vorzuschlagen»).
     Keine opacity: die dämpft Fläche, Rahmen und Text unterschiedlich stark
     und ist auf Verläufen unberechenbar. Stattdessen feste Werte.
     3,21:1 in hell und 3,75:1 in dunkel — bewusst unter dem Textmass von
     4,5:1 (WCAG nimmt inaktive Bedienelemente davon aus), aber deutlich über
     der Wahrnehmungsschwelle. */
  .knopf:disabled,
  .knopf[aria-disabled="true"] {
    background: var(--flaeche-3);
    border-color: var(--linie);
    color: var(--linie-stark);
    cursor: not-allowed;
    box-shadow: none;
  }
  .knopf:disabled:hover,
  .knopf[aria-disabled="true"]:hover {
    background: var(--flaeche-3);
    border-color: var(--linie);
    color: var(--linie-stark);
  }
  .knopf:disabled svg,
  .knopf[aria-disabled="true"] svg { opacity: 0.7; }

  /* Chips und Felder folgen derselben Logik */
  .chip:disabled { background: var(--flaeche-3); border-color: var(--linie); color: var(--linie-stark); cursor: not-allowed; }
  .chip:disabled:hover { background: var(--flaeche-3); border-color: var(--linie); }
  .feld:disabled { background: var(--flaeche-3); border-color: var(--linie); color: var(--linie-stark); cursor: not-allowed; }

  /* === Pulldown (führender Ort für die Themenwahl, §3) =================== */

  .pulldown { position: relative; }
  .pulldown > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2);
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border-radius: var(--radius-voll);
    background: var(--flaeche-3);
    list-style: none;
    cursor: pointer;
  }
  .pulldown > summary::-webkit-details-marker { display: none; }
  .pulldown > summary:hover { background: var(--flaeche-4); }
  .pulldown > summary svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; }

  .pulldown__tafel {
    position: absolute;
    inset-block-start: calc(100% + var(--raum-2));
    inset-inline-end: 0;
    z-index: 50;
    inline-size: 17rem;
    padding: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-2);
  }
  .pulldown__titel { display: block; margin-block-end: var(--raum-3); }
  .pulldown__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); margin-block-end: var(--raum-4); }
  .pulldown__liste a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  .pulldown__liste a:hover { background: var(--flaeche-3); }
  .pulldown__trenner { block-size: var(--linie-breit); background: var(--linie); margin-block: var(--raum-3); border: 0; }

  /* === Segment-Umschalter (Hell/Dunkel, Video/Ton, Raster/Liste) ========= */

  .segment {
    display: inline-flex;
    gap: var(--raum-1);
    padding: var(--raum-1);
    background: var(--flaeche-3);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-voll);
  }
  .segment__wahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-4);
    border: 0;
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text-3);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-fett);
    text-decoration: none;
  }
  .segment__wahl svg { inline-size: 1.1em; block-size: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.75; }
  .segment__wahl:hover { color: var(--text); }
  .segment__wahl[aria-pressed="true"],
  .segment__wahl[aria-current="true"] {
    background: var(--marke);
    color: var(--marke-auf);
  }
  .segment--gross .segment__wahl { font-size: var(--txt-text); }

  .thema-schnell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border: 0;
    border-radius: var(--radius-voll);
    background: var(--flaeche-3);
    color: var(--text);
  }
  .thema-schnell:hover { background: var(--flaeche-4); }
  .thema-schnell svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; }
  .thema-schnell .ikon-mond { display: none; }
  .thema-schnell[data-ist-dunkel="true"] .ikon-mond { display: block; }
  .thema-schnell[data-ist-dunkel="true"] .ikon-sonne { display: none; }

  /* === Felder ============================================================ */

  .feld {
    inline-size: 100%;
    min-block-size: var(--tastfeld);
    padding: var(--raum-2) var(--raum-3);
    background: var(--flaeche-2);
    color: var(--text);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-s);
    font-size: var(--txt-klein);
  }
  .feld::placeholder { color: var(--text-3); }

  .suche {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    padding: var(--raum-2) var(--raum-2) var(--raum-2) var(--raum-5);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    box-shadow: var(--schatten-1);
  }
  .suche__ikon { flex: none; inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: var(--text-3); stroke-width: 1.75; }
  .suche__feld {
    flex: 1;
    min-inline-size: 0;
    min-block-size: var(--tastfeld);
    border: 0;
    background: none;
    font-size: var(--txt-gross);
  }
  .suche__feld:focus { outline: 0; }
  .suche:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }
  .suche--klein { padding-inline-start: var(--raum-4); }
  .suche--klein .suche__feld { font-size: var(--txt-klein); }

  /* === Chips ============================================================= */

  /* row-gap ≥ 14 px, damit die unsichtbaren Tastflächen der Chips einander
     nicht überlappen (siehe .chip::before). */
  .chip-reihe { display: flex; flex-wrap: wrap; gap: 1rem var(--raum-2); }

  /* Leichter statt kleiner: Ein Block aus 14 Themen wirkte als Wand, weil jeder
     Chip eine gefüllte Fläche trug. Jetzt durchsichtig mit Rand — die Reihe
     tritt zurück, die Tastfläche bleibt bei 44 px (§4.6). Kleinerer Schriftgrad
     und knapperes Polster machen sie zusätzlich schmaler.
     Der Rand bleibt --linie-stark: 3,54:1 in hell, 4,55:1 in dunkel gegen den
     Seitenhintergrund — WCAG 1.4.11. Nebeneffekt: .chip--aktiv sticht als
     einziger gefüllter Chip deutlicher heraus. */
  .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    /* Gezeichnet nur 30 px hoch, Polster knapp — die Pille umschliesst das
       Wort statt es zu umrahmen. */
    min-block-size: 1.875rem;
    padding-inline: var(--raum-2);
    background: none;
    color: var(--text-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  /* Die Tastfläche bleibt 44 px: ein unsichtbares Feld ragt oben und unten
     7 px hinaus. 44 px sind eine Anforderung an die Klickfläche (WCAG 2.5.8),
     nicht an das gezeichnete Kästchen — genau deshalb darf die Pille kleiner
     werden, ohne die Regel aus §4.6 zu brechen.
     Die Zeilen brauchen dafür 14 px Abstand, sonst überlappen sich die
     Flächen: .chip-reihe und .schlagworte__gruppe setzen row-gap entsprechend. */
  .chip::before {
    content: "";
    position: absolute;
    inset-block: -7px;
    inset-inline: 0;
  }
  .chip:hover { background: var(--flaeche-3); border-color: var(--marke); color: var(--text); }
  .chip__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .chip--aktiv { background: var(--flaeche-4); border-color: var(--marke); color: var(--text); }

  /* Bibelstelle als Pille: gleiche Form wie .chip, aber Monoschrift in
     Markenfarbe. Die Schrift trägt die Unterscheidung — «2. Timotheus 4» ist
     damit ohne Beschriftung als Stelle erkennbar und führt in die Bibel, nicht
     in den Katalog. Steht hier und nicht in seite-fragen.css, weil es die
     Fragen-Seiten UND die Beitragsseiten nutzen. */
  .stelle {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: 1.875rem;
    padding-inline: var(--raum-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    color: var(--marke);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  .stelle::before { content: ""; position: absolute; inset-block: -7px; inset-inline: 0; }
  .stelle:hover { background: var(--flaeche-3); border-color: var(--marke); color: var(--marke); text-decoration: underline; }
  .chip--aktiv .chip__zahl { color: var(--text-2); }
  .chip--aktiv svg { inline-size: 0.9em; block-size: 0.9em; fill: none; stroke: currentColor; stroke-width: 2.25; }

  /* === Format-Symbole (Verfügbarkeit, farblos in Textfarbe, §4.2) ======== */

  .formate { display: flex; align-items: center; gap: var(--raum-2); color: var(--text-3); }
  .formate svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .formate--auf-bild { color: var(--auf-tief); }

  /* === Formular-Bausteine ================================================
     Label über Eingabe, und die Knopfzeile darunter. Auf Fragen-, Gemeinde-,
     Spenden-, Newsletter- und Beitragsseiten in Gebrauch — deshalb hier und
     nicht in einer Seiten-Schicht. */

  .feld-gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); }
  .feld-gruppe label { font-size: var(--txt-klein); font-weight: var(--gewicht-halb); }

  .form-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-4);
  }

  /* === Aufklapper mit Frage ==============================================
     Auf den Fragen-Seiten und auf der Spendenseite in Gebrauch. */

  .frage { border-block-start: var(--linie-breit) solid var(--linie); }
  .frage:last-of-type { border-block-end: var(--linie-breit) solid var(--linie); }

  .frage > summary {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-3);
    min-block-size: var(--tastfeld);
    padding: var(--raum-3);
    margin-inline: calc(var(--raum-3) * -1);
    border-radius: var(--radius-s);
    cursor: pointer;
    list-style: none;
  }
  .frage > summary::-webkit-details-marker { display: none; }
  .frage > summary:hover { background: var(--flaeche-3); }
  .frage__pfeil {
    inline-size: 1rem;
    block-size: 1rem;
    fill: none;
    stroke: var(--text-3);
    stroke-width: 2;
    transition: transform var(--dauer-schnell) var(--kurve);
  }
  .frage[open] .frage__pfeil { transform: rotate(90deg); }
  .frage__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .frage__inhalt {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-4);
    padding-block: var(--raum-2) var(--raum-5);
    padding-inline-start: calc(1.25rem + var(--raum-3));
    max-inline-size: var(--lese-max);
  }

  /* === Anteilsbalken ======================================================
     Die Füllbreite kommt als Custom Property aus dem Markup:
     style="--wert: 34%". Keine Zahl-Klassen mehr. */
  .anteil { display: block; inline-size: var(--wert, 0%); block-size: 100%; background: var(--marke); border-radius: var(--radius-voll); }


  /* === Zustandswort ======================================================
     Art einer Änderung, Stand einer Frage. Immer ein Wort, nie eine Farbe —
     Formate und Zustände sollen nicht farbcodiert werden. Der Akzent hebt
     genau einen Zustand hervor. */

  .stand {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding-inline: var(--raum-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    color: var(--text-2);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .stand--marke { border-color: var(--marke); color: var(--marke); }
  .stand--offen { border-style: dashed; }

  /* === Karte in der Seitenspalte =========================================
     Auf Beitrags-, Sprecher-Detail- und Bibel-Leseseite in Gebrauch. */

  .rand-karte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .rand-karte__titel { display: block; }

  /* === Initialen-Kreis ===================================================
     Platzhalter für ein Porträt, solange keine Fotos vorliegen. --marke auf
     --flaeche-4: 4,60:1 in hell, 5,59:1 in dunkel. */

  .initialen {
    flex: none;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: var(--radius-voll);
    background: var(--flaeche-4);
    color: var(--marke);
    font-weight: var(--gewicht-fett);
  }
  .initialen--klein { inline-size: 2.5rem; block-size: 2.5rem; font-size: var(--txt-etikett); }
  .initialen--gross { inline-size: 3.5rem; block-size: 3.5rem; }
  /* PO-Befund 2026-09-05: ein <img class="initialen"> (S09-Karte, S06-Kachel, A21-Miniatur) wurde ohne
     object-fit in den Kreis GESTAUCHT (119×160 ⇒ 56×56). cover = mittiger Ausschnitt, nie verzerrt. */
  img.initialen { object-fit: cover; }

  /* === Karten & Abschnitte =============================================== */

  .karte {
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    padding: var(--raum-5);
  }
  .karte--marke { background: var(--flaeche-4); border-color: var(--marke); }
  /* Auf --flaeche-4 reicht --linie-stark nicht (2,97:1 hell / 2,90:1 dunkel).
     --marke erfüllt dort 4,60:1 bzw. 5,59:1 und bindet den zweiten Knopf
     zugleich an die Akzentkarte. */
  .karte--marke .knopf--rand { border-color: var(--marke); }
  .karte--marke .knopf--rand:hover { background: var(--flaeche-2); }

  /* Abschnitts-Etikett statt Überschrift zweiter Ebene: die Trennung leistet
     der Abstand, nicht eine Linie. Ohne Linie muss der Abstand oben wachsen —
     sonst verschwimmen die Regale. */
  .abschnitt { margin-block-start: var(--raum-8); }
  .abschnitt__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-block-end: var(--raum-4);
  }
  .abschnitt__kopf > :is(h2, h3) {
    font-size: var(--txt-t4);
    letter-spacing: -0.01em;
  }
  .abschnitt__mehr {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-fett);
    text-decoration: none;
  }
  .abschnitt__mehr:hover { text-decoration: underline; }
  .abschnitt__mehr svg {
    inline-size: 1.15em;
    block-size: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  /* === Werk als Kachel =================================================== */

  .kachel-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--raum-5) var(--raum-4);
  }

  .werkkachel { display: flex; flex-direction: column; gap: var(--raum-3); }
  .werkkachel > a { color: inherit; text-decoration: none; }

  .werkkachel__bild {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-m);
    background: var(--flaeche-3);
    border: var(--linie-breit) solid var(--linie);
    overflow: hidden;
  }
  .werkkachel__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .werkkachel__platz {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    background: var(--verlauf-bild);
  }
  .werkkachel__platz svg { inline-size: 2.25rem; block-size: 2.25rem; fill: none; stroke: var(--auf-tief); stroke-width: 1.5; opacity: 0.8; }
  /* ⚠ Die Zeile darüber ist der byte-identische Abgabe-Stand (V6-Prototyp gleichlautend) —
     der PO-Umentscheid 2026-07-31 «zu dezent» steht als Override im OP-Ergänzungsblock
     am Dateiende («Leinwand-Symbol»); hier wird NICHT editiert. */

  .werkkachel__fuss {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-2);
    padding: var(--raum-2) var(--raum-3);
    background: linear-gradient(transparent, rgb(17 24 20 / 0.85));
  }
  .werkkachel__dauer { color: var(--auf-tief); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  .werkkachel__titel { font-size: var(--txt-gross); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .werkkachel__meta { color: var(--text-3); font-size: var(--txt-klein); line-height: 1.5; }

  /* === Werk als Listenzeile ============================================== */

  .werkliste { border-block-start: var(--linie-breit) solid var(--linie); }
  .werkzeile {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
    gap: var(--raum-4);
    padding-block: var(--raum-4);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .werkzeile__bild {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-s);
    background: var(--verlauf-bild);
    overflow: hidden;
  }
  .werkzeile__bild svg { inline-size: 1.4rem; block-size: 1.4rem; fill: none; stroke: var(--auf-tief); stroke-width: 1.5; opacity: 0.7; }
  .werkzeile__haupt { min-inline-size: 0; }
  .werkzeile__titel { font-size: var(--txt-gross); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .werkzeile__titel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  .werkzeile__titel a:hover { text-decoration: underline; }
  .werkzeile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-1) var(--raum-3);
    margin-block-start: var(--raum-2);
    color: var(--text-3);
    font-size: var(--txt-klein);
  }
  .werkzeile__rand {
    display: flex;
    align-items: center;
    gap: var(--raum-4);
    justify-content: flex-end;
  }
  .werkzeile__datum { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  /* === Filter ============================================================ */

  .filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); }
  /* Rahmen, Margin und Polsterung setzt der fieldset-Reset in basis.css. */
  .filter__legende {
    display: block;
    inline-size: 100%;
    padding-block-end: var(--raum-2);
    margin-block-end: var(--raum-3);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .filter__wahlen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .filter__wahl {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-2);
    border-radius: var(--radius-s);
    font-size: var(--txt-klein);
    cursor: pointer;
  }
  .filter__wahl:hover { background: var(--flaeche-3); }
  .filter__wahl input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--marke); flex: none; }
  .filter__wahl span:first-of-type { flex: 1; }
  .filter__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .filter__paar { display: grid; grid-template-columns: 1fr 7rem; gap: var(--raum-2); }
  .filter__hinweis { color: var(--text-3); font-size: var(--txt-etikett); margin-block-start: var(--raum-2); }
  .filter__mehr {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-fett);
  }

  /* === Blättern (Nummern-Pagination, §4.2) =============================== */

  .blaettern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2);
    margin-block-start: var(--raum-6);
  }
  .blaettern a, .blaettern span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tastfeld);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-s);
    color: var(--text);
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    text-decoration: none;
  }
  .blaettern a:hover { background: var(--flaeche-3); }
  .blaettern svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
  .blaettern [aria-current="page"] { background: var(--marke); border-color: var(--marke); color: var(--marke-auf); font-weight: var(--gewicht-halb); }
  .blaettern__luecke { border-color: transparent; color: var(--text-3); }

  /* === Player-Bühne ====================================================== */

  .buehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .buehne__bild {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    aspect-ratio: 16 / 9;
    background: var(--verlauf-buehne);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    overflow: hidden;
  }
  /* wie .empfehlung__spielen: bildfestes Paar, nicht --marke (§2.3) */
  .buehne__start {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 5.5rem;
    block-size: 5.5rem;
    border: 0;
    border-radius: var(--radius-voll);
    background: var(--auf-tief);
    color: var(--flaeche-tief);
  }
  .buehne__start:hover { background: #ffffff; }
  .buehne__start svg { inline-size: 2rem; block-size: 2rem; fill: currentColor; stroke: none; }
  .buehne__platzmarke {
    position: absolute;
    inset-block-start: var(--raum-4);
    inset-inline-start: var(--raum-4);
    color: color-mix(in oklab, var(--auf-tief) 65%, transparent);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
  }

  /* Untertitel-Bühne: steht, solange CC an ist — auch in Cue-Lücken (leer),
     damit nichts springt. Warm-Schwarz in BEIDEN Themes. */
  .untertitel-buehne {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-block-size: 4.75rem;
    padding: var(--raum-3) var(--raum-5);
    background: var(--flaeche-tief);
    color: var(--auf-tief);
    text-align: center;
    font-size: var(--txt-gross);
    line-height: 1.4;
  }
  .untertitel-buehne[hidden] { display: none; }
  .untertitel-buehne--karte { border-radius: var(--radius-s); min-block-size: 4.25rem; }
  .untertitel-buehne__cue { animation: cue-ein var(--dauer-normal) var(--kurve); }
  @keyframes cue-ein { from { opacity: 0; } to { opacity: 1; } }

  /* Der E2-Audio-«spieler» (.spieler/.spieler--allein/.spieler__* · .schiene/.schiene__zeit ·
     .steuerung/.steuerung__rand) ist mit der TONBÜHNE entfallen (PO 2026-07-31) — Grep über
     templates/ + module/ = 0 Nutzer, die Regeln waren Waisen. .balken bleibt (Fortschritts-
     Balken app-weit), .tempo-knopf/.cc-knopf/.ikon-knopf bleiben (Playlist-/Embed-Karten). */
  /* display: block ist nötig — als <span> wäre .balken inline und würde
     block-size ignorieren. In .schiene blockifiziert es der Flex-Kontext,
     ausserhalb (z. B. in .fortsetzen__haupt) nicht. */
  .balken {
    position: relative;
    display: block;
    flex: 1;
    block-size: 4px;
    border-radius: var(--radius-voll);
    background: var(--linie);
    overflow: hidden;
  }
  /* Der Wert kommt als Custom Property aus dem Markup: style="--wert: 58%".
     Vom Neubau bestätigt — ersetzt die früheren Zahl-Klassen .ist-NN. */
  .balken__wert {
    display: block;
    inline-size: var(--wert, 0%);
    block-size: 100%;
    background: var(--marke);
    border-radius: var(--radius-voll);
  }
  .balken__wert.ist-17 { inline-size: 17%; }
  .balken__wert.ist-32 { inline-size: 32%; }
  .balken__wert.ist-58 { inline-size: 58%; }
  .balken__wert.ist-81 { inline-size: 81%; }


  /* Formwechsel in der Steuerleiste: Video ⟷ nur Audio. Steht dort und nicht
     als eigener Block über dem Spieler, weil es eine Wiedergabe-Einstellung
     ist wie Tempo oder Untertitel — nicht eine Eigenschaft des Beitrags. */
  .formwahl { flex: none; }
  .formwahl .segment__wahl {
    gap: var(--raum-2);
    min-block-size: 2.25rem;
    padding-inline: var(--raum-3);
    font-size: var(--txt-etikett);
  }
  .formwahl svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

  /* In der Fusszeilen-Leiste noch knapper; unter 48 rem bleibt nur das Symbol */
  .spielleiste__formwahl { margin-inline-end: var(--raum-2); }
  @media (max-width: 48rem) {
    .spielleiste__formwahl .segment__wahl span { display: none; }
    .spielleiste__formwahl .segment__wahl { padding-inline: var(--raum-2); }
  }

  .tempo-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--tastfeld);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-2);
    border: 0;
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text-2);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    font-variant-numeric: tabular-nums;
  }
  .tempo-knopf:hover { background: var(--flaeche-3); color: var(--text); }

  .cc-knopf {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    letter-spacing: 0.04em;
  }
  .cc-knopf:hover { color: var(--text); background: var(--flaeche-3); }
  .cc-knopf[aria-pressed="true"] {
    background: var(--marke);
    border-color: var(--marke);
    color: var(--marke-auf);
  }

  /* === Aufklapper: Mitlesen · Transkript ================================= */

  .aufklapper {
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    margin-block-start: var(--raum-3);
  }
  .aufklapper > summary {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    min-block-size: var(--tastfeld);
    padding: var(--raum-3) var(--raum-4);
    font-weight: var(--gewicht-fett);
    font-size: var(--txt-klein);
    cursor: pointer;
    list-style: none;
  }
  .aufklapper > summary::-webkit-details-marker { display: none; }
  .aufklapper__pfeil { flex: none; inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dauer-schnell) var(--kurve); }
  .aufklapper[open] .aufklapper__pfeil { transform: rotate(90deg); }
  .aufklapper__inhalt { padding: 0 var(--raum-4) var(--raum-4); }

  .mitlesen { max-block-size: 17rem; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .mitlesen__zeile {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--raum-3);
    align-items: baseline;
    min-block-size: var(--tastfeld);
    padding: var(--raum-2) var(--raum-3);
    border: 0;
    border-radius: var(--radius-s);
    background: none;
    text-align: start;
    font-size: var(--txt-klein);
    color: var(--text-2);
  }
  .mitlesen__zeile:hover { background: var(--flaeche-3); color: var(--text); }
  .mitlesen__zeile[aria-current="true"] { background: var(--flaeche-4); color: var(--text); font-weight: var(--gewicht-fett); }
  .mitlesen__marke { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  .transkript { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); max-inline-size: var(--lese-max); color: var(--text-2); }

  /* === Teile eines mehrteiligen Werks ==================================== */

  .teilliste { border-block-start: var(--linie-breit) solid var(--linie); }
  /* Teileliste: Zustand links, Titel mittig, Dauer und drei Aktionen rechts.
     Feste Breiten in den Randspalten, damit alle Zeilen fluchten — jedes <li>
     ist ein eigenes Grid und rechnete sonst seine Spalten selbst. */
  .teilzeile {
    display: grid;
    grid-template-columns: var(--tastfeld) minmax(0, 1fr) 4.5rem auto;
    align-items: center;
    gap: var(--raum-3);
    padding: var(--raum-2) var(--raum-3);
    margin-inline: calc(var(--raum-3) * -1);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .teilzeile:last-child { border-block-end: 0; }

  /* Die laufende Datei ist farbig hinterlegt — der einzige Ort im Paket, an
     dem eine Zeile Fläche bekommt. Deshalb reicht die stille Akzentfläche. */
  .teilzeile--laeuft { background: var(--flaeche-4); border-radius: var(--radius-s); }

  .teilzeile__start {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border: 0;
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text-2);
  }
  .teilzeile__start:hover { background: var(--flaeche-2); color: var(--marke); }
  .teilzeile__start svg { inline-size: 1.05rem; block-size: 1.05rem; }
  .teilzeile--laeuft .teilzeile__start { color: var(--marke); }
  .teilzeile--laeuft .teilzeile__start svg { fill: none; stroke: currentColor; }

  .teilzeile__haupt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .teilzeile__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-halb); line-height: var(--zeile-titel); }
  .teilzeile__nr { color: var(--text-3); font-weight: var(--gewicht-normal); }
  .teilzeile__nr::after { content: " — "; }
  .teilzeile__unter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-1) var(--raum-3);
    color: var(--text-3);
    font-size: var(--txt-etikett);
  }
  .teilzeile__jetzt { color: var(--marke); font-weight: var(--gewicht-halb); }
  .teilzeile__dauer {
    justify-self: end;
    color: var(--text-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-variant-numeric: tabular-nums;
  }

  /* Drei runde Aktionsknöpfe, gleich gross und immer an derselben Stelle */
  .teilzeile__werkzeug { display: flex; gap: var(--raum-1); }

  /* === Material und Anhänge ==============================================
     Dateien, die zum ganzen Beitrag gehören — Folien, Arbeitsblätter,
     Literaturlisten. Nicht im teilbezogenen Download-Dialog, sondern als
     eigener Abschnitt: sie brauchen Namen in Lesebreite, und ein Handout zur
     Reihe gehört nicht siebenmal in sieben Teil-Dialoge. */
  .anhangliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); }
  .anhangzeile {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--raum-3);
    padding: var(--raum-3);
    background: var(--flaeche-3);
    border-radius: var(--radius-s);
  }
  .anhangzeile__art {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-s);
    background: var(--flaeche-2);
    color: var(--text-2);
  }
  .anhangzeile__art svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .anhangzeile__name { display: block; font-size: var(--txt-klein); font-weight: var(--gewicht-halb); line-height: var(--zeile-titel); }
  .anhangzeile__was { display: block; color: var(--text-3); font-size: var(--txt-etikett); margin-block-start: var(--raum-1); }
  .anhangzeile__laden {
    display: flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--txt-etikett);
    font-family: var(--schrift-mono);
    text-decoration: none;
    white-space: nowrap;
  }
  .anhangzeile__laden:hover { background: var(--marke); border-color: var(--marke); color: var(--marke-auf); }
  .anhangzeile__laden svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }

  @media (max-width: 40rem) {
    .anhangzeile { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--raum-3); }
    .anhangzeile__laden { grid-column: 2 / -1; justify-self: start; }
  }
  /* Einteilige Beiträge: dieselben drei Knöpfe, neben der Aktionszeile */
  .beitrag__werkzeug { margin-inline-start: auto; }
  .teilwerk__knopf {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text-2);
    cursor: pointer;
    list-style: none;
  }

  /* Auf der laufenden Zeile liegt --flaeche-4; dort reicht --linie-stark nicht
     (2,90:1). Dieselbe Ausnahme wie in .karte--marke: --marke als Rahmen. */
  .teilzeile--laeuft .teilzeile--laeuft .teilwerk__knopf { border-color: var(--marke); }
  .teilwerk__knopf:hover { background: var(--flaeche-2); border-color: var(--marke); color: var(--marke); }
  .teilwerk__knopf svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

  /* === Dialog für die Dateiwahl ==========================================
     Abdunkelnder Dialog statt Aufklapper: die Wahl bekommt Gewicht, und auf
     schmalen Geräten fährt dieselbe Tafel von unten ein. Ohne JavaScript
     bleibt der Knopf sichtbar, öffnet aber nichts — deshalb führt er als
     Rückfall auf den Beitrag selbst. */
  .dialog {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: var(--raum-5);
    background: rgb(12 13 10 / 0.72);
  }
  .dialog[hidden] { display: none; }

  .dialog__tafel {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-4);
    inline-size: min(26rem, 100%);
    max-block-size: 100%;
    overflow-y: auto;
    padding: var(--raum-6);
    background: var(--flaeche-2);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-2);
  }
  .dialog__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .dialog__titel { font-size: var(--txt-t4); letter-spacing: var(--sperrung-titel); }
  .dialog__unter { color: var(--text-3); font-size: var(--txt-klein); }
  .dialog__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); }

  /* Zwei Zeilen je Datei: WAS sie ist, darunter Format und Grösse. «Video»,
     «Tonspur aus dem Video» und «getrennt gemischte Aufnahme» sind drei
     verschiedene Dinge — das Format allein sagt das nicht. */
  .dialog__datei {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    /* Ohne explizite Zeilen löst «grid-row: 1 / -1» am Symbol auf EINE Zeile
       auf, und die Grössenangabe landete in der Symbolspalte. */
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 var(--raum-3);
    min-block-size: var(--tastfeld);
    padding: var(--raum-3);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-s);
    color: var(--text);
    text-decoration: none;
  }
  .dialog__datei:hover { background: var(--flaeche-3); border-color: var(--marke); color: var(--marke); }
  .dialog__datei svg { grid-row: 1 / -1; inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .dialog__was { font-size: var(--txt-klein); font-weight: var(--gewicht-halb); }
  .dialog__gr { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .dialog__datei:hover .dialog__gr { color: inherit; }
  .dialog__zu { justify-self: start; }

  /* Schmale Geräte: von unten einfahrende Leiste statt mittiger Tafel */
  @media (max-width: 40rem) {
    .dialog { place-items: end center; padding: 0; }
    .dialog__tafel { inline-size: 100%; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  }


  .teilzeile[aria-current="true"] .teilzeile__titel { color: var(--marke); }

  /* === Downloads je Form (§4.3) ========================================== */

  /* display: block ist zwingend — als <span> wären beide inline und würden
     margin-block-start verwerfen; Titel und Dauer stünden auf einer Zeile.
     Vierter Fall dieser Bauart im Projekt (nach .balken, .hinweis, .gemzeile). */

  /* Ein Ladeknopf je Datei: Format oben, Grösse darunter */

  /* Die Dateigrösse steht auf der Typo-Skala wie alles andere: 13 px, keine
     gedämpfte Deckkraft. Sie ist die Angabe, wegen der man vor einem 182-MB-
     Download hinschaut — Zielgruppe schliesst ältere Nutzer ein (§4.6).
     Statt kleinerer Schrift trägt der Knopf mehr Breite. */

  /* Unter 40rem passen vier 84-px-Knöpfe nicht neben einen Titel. Die Zeile
     stapelt: Nummer und Titel oben, Ladeknöpfe darunter über die volle Breite.
     Ohne das kollabiert die Titelspalte auf 0 px — «minmax(0, 1fr)» gibt
     unbegrenzt nach, «auto» in der dritten Spalte nicht. */
  /* Gehört zur .frage-Regel oben: das Zustandswort rutscht unter den Titel,
     statt ihm die Breite zu nehmen. Steht hier und nicht in einer
     Seiten-Schicht, weil der Aufklapper selbst hier steht. */
  @media (max-width: 34rem) {
    .frage > summary { grid-template-columns: 1.25rem minmax(0, 1fr); row-gap: var(--raum-2); }
    .frage__stand { grid-column: 2 / -1; }
  }

  @media (max-width: 40rem) {
  }

  /* === Klebende Wiedergabe-Leiste ======================================== */

  .spielleiste {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 45;
  }
  .spielleiste__cue {
    display: flex;
    justify-content: center;
    padding-inline: var(--raum-4);
    margin-block-end: calc(var(--raum-2) * -1);
    pointer-events: none;
  }
  .spielleiste__cue span {
    max-inline-size: min(46rem, 100%);
    padding: var(--raum-2) var(--raum-5) calc(var(--raum-2) + var(--raum-2));
    background: var(--flaeche-tief);
    color: var(--auf-tief);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    font-size: var(--txt-klein);
    text-align: center;
  }
  .spielleiste__leiste {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--raum-4);
    min-block-size: var(--leiste-hoehe);
    padding: var(--raum-2) var(--raum-4);
    padding-block-end: max(var(--raum-2), env(safe-area-inset-bottom));
    background: var(--flaeche-2);
    border-block-start: var(--linie-breit) solid var(--linie);
    box-shadow: var(--schatten-leiste);
  }
  .spielleiste__schiene {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--linie);
  }
  .spielleiste__schiene span { display: block; block-size: 100%; background: var(--marke); }
  .spielleiste__start {
    flex: none;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border: 0;
    border-radius: var(--radius-voll);
    background: var(--marke);
    color: var(--marke-auf);
  }
  .spielleiste__start svg { inline-size: 1.1rem; block-size: 1.1rem; fill: currentColor; stroke: none; }
  .spielleiste__text { flex: 1; min-inline-size: 0; }
  .spielleiste__titel {
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-fett);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .spielleiste__titel a { color: inherit; text-decoration: none; }
  .spielleiste__zeit { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }
  .spielleiste__steuerung { flex: none; display: flex; align-items: center; gap: var(--raum-1); }

  .ikon-knopf {
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border: 0;
    border-radius: var(--radius-voll);
    background: none;
    color: var(--text-2);
  }
  .ikon-knopf:hover { background: var(--flaeche-3); color: var(--text); }
  .ikon-knopf svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; }

  /* === Weiterhören ======================================================= */

  .fortsetzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--raum-4); }
  .fortsetzen__karte {
    display: flex;
    align-items: center;
    gap: var(--raum-4);
    padding: var(--raum-3);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
  }
  .fortsetzen__bild {
    flex: none;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 4.75rem;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-s);
    background: var(--verlauf-bild);
  }
  .fortsetzen__bild svg { inline-size: 1.15rem; block-size: 1.15rem; fill: var(--auf-tief); stroke: none; opacity: 0.8; }
  .fortsetzen__haupt { min-inline-size: 0; flex: 1; }
  .fortsetzen__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Block statt Flex: dieser Titel kürzt mit Ellipse, und ein Flex-Container
     wendet text-overflow nicht auf seinen Textinhalt an. line-height liefert
     die senkrechte Mitte. */
  .fortsetzen__titel a {
    display: block;
    min-block-size: var(--tastfeld);
    line-height: var(--tastfeld);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
  }
  .fortsetzen__rest { color: var(--text-3); font-size: var(--txt-etikett); margin-block: var(--raum-1) var(--raum-2); }

  /* === Rangliste ========================================================= */

  .rangliste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rangzeile {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: var(--raum-4);
    padding-block: var(--raum-3);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .rangzeile__nr { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-klein); }
  .rangzeile__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .rangzeile__titel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  .rangzeile__unter { color: var(--text-3); font-size: var(--txt-etikett); }
  .rangzeile__zahl { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  /* === Fusszeile ========================================================= */

  .fuss {
    margin-block-start: var(--raum-8);
    padding-block: var(--raum-7) var(--raum-7);
    border-block-start: var(--linie-breit) solid var(--linie);
  }
  .fuss__gitter {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) repeat(3, minmax(9rem, 1fr));
    gap: var(--raum-7) var(--raum-6);
  }
  .fuss__marke img { block-size: 2.75rem; inline-size: auto; margin-block-end: var(--raum-5); }
  .fuss__text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: 26ch; }
  .fuss__recht { color: var(--text-3); font-size: var(--txt-etikett); margin-block-start: var(--raum-5); }
  .fuss__titel { display: block; margin-block-end: var(--raum-4); }
  .fuss__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .fuss__liste a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: var(--text-2);
    font-size: var(--txt-klein);
    text-decoration: none;
  }
  .fuss__liste a:hover { color: var(--text); text-decoration: underline; }

  /* === Spenden-Block ===================================================== */

  .spende { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }
  .spende__text { color: var(--text-2); font-size: var(--txt-klein); }
  .spende__unter { color: var(--text-3); font-size: var(--txt-etikett); text-align: center; }

  /* === Hinweis-Zeile ===================================================== */

  /* Block, nicht Flex: als Flex-Container würde jeder Textabschnitt zu einem
     eigenen anonymen Flex-Element, und ein <a> oder <strong> mitten im Satz
     bekäme eine eigene Spalte. Das Symbol läuft deshalb inline mit. */
  .hinweis {
    display: block;
    color: var(--text-3);
    font-size: var(--txt-klein);
  }

  /* Mehrere Hinweise nacheinander brauchen einen Träger mit gap. Kein
     margin auf .hinweis selbst: sie steht projektweit auch in Grid-Containern,
     dort würde der Abstand doppelt zählen. */
  .hinweise { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); margin-block-start: var(--raum-4); }
  .hinweis svg {
    display: inline-block;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    vertical-align: -0.2em;
    margin-inline-end: var(--raum-2);
  }

  /* === Werte-Paare (Details-Tabelle) ==================================== */

  .paare { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .paare div { display: flex; justify-content: space-between; gap: var(--raum-4); font-size: var(--txt-klein); }
  .paare dt { color: var(--text-3); }
  .paare dd { margin: 0; text-align: end; }

  /* === Enge Viewports =================================================== */

  /* Die klebende Leiste mit allen neun Bedienelementen braucht mindestens
     557 px (der Knopf-Block ist flex:none und schrumpft nie). Der Umbruch
     liegt deshalb bei 36 rem = 576 px, nicht beim allgemeinen 34-rem-Umbruch —
     sonst entstünde zwischen 545 und 556 px ein Überlauf-Band.
     Übrig bleiben Wiedergabe, Untertitel und Schliessen (213 px).
     Sprung, Tempo, Playlist, Bild-in-Bild und Ton bleiben im vollen Spieler
     auf der Beitragsseite erreichbar. */
  @media (max-width: 36rem) {
    .spielleiste .ikon-knopf--sekundaer { display: none; }
    .spielleiste__leiste { gap: var(--raum-3); padding-inline: var(--raum-3); }
  }

  @media (max-width: 60rem) {
    .kopf__nav { display: none; }
    .menue { display: block; }
    .kopf__innen { gap: var(--raum-3); }
    .kopf__marke { margin-inline-end: auto; }
    .fuss__gitter { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 34rem) {
    :root { --behaelter-rand: var(--raum-4); }
    /* Spenden bleibt erreichbar — im Menü und in der Fusszeile */
    .kopf__spenden { display: none; }
    .werkzeile { grid-template-columns: 4.25rem 1fr; }
    .werkzeile__rand { grid-column: 1 / -1; justify-content: flex-start; }
    .teilzeile { grid-template-columns: var(--tastfeld) minmax(0, 1fr); row-gap: var(--raum-2); }
    .teilzeile__dauer { grid-column: 2; justify-self: start; }
    .teilzeile__werkzeug { grid-column: 2; }
    .fuss__gitter { grid-template-columns: 1fr; }
    .spielleiste__zeit { display: none; }
    .paare div { flex-direction: column; gap: 0; }
    .paare dd { text-align: start; }
  }

  /* =======================================================================
     ### NACHLIEFERUNG 1 · Mitmach-Block in der eingeloggten Fassung
     Alles unterhalb dieser Marke ist nach der Abgabe «Ein Katalog +
     Hell/Dunkel» entstanden. Als eigener Block am Dateiende, damit die
     Übernahme per Diff sauber bleibt — oberhalb hat sich nichts geändert.
     Enthält: Sterne-Bewertung · Kommentar-Schreibformular · Karten-Schranke.
     ======================================================================= */

  /* --- Sterne-Bewertung ---------------------------------------------------
     Echte Radios, rückwärts im Markup und über «direction: rtl» gedreht:
     nur so kann «~» die Sterne LINKS des gewählten füllen — der
     Geschwister-Selektor greift ausschliesslich nach vorne. Ohne JavaScript
     voll bedienbar; die Wahl wird mit dem Formular abgeschickt. */
  .sterne {
    display: inline-flex;
    direction: rtl;
    gap: var(--raum-1);
  }
  .sterne input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .sterne label {
    display: grid;
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border-radius: var(--radius-s);
    color: var(--linie-stark);
    cursor: pointer;
  }
  .sterne svg { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  /* Gewählter Stern und alle davor: gefüllt in der Markenfarbe */
  .sterne input:checked + label,
  .sterne input:checked + label ~ label { color: var(--marke); }
  .sterne input:checked + label svg,
  .sterne input:checked + label ~ label svg { fill: currentColor; }
  /* Zeigen, was ein Klick bewirken würde */
  .sterne label:hover,
  .sterne label:hover ~ label { color: var(--marke); }
  .sterne label:hover svg,
  .sterne label:hover ~ label svg { fill: currentColor; }
  .sterne input:focus-visible + label { outline: 3px solid var(--fokus); outline-offset: 2px; }

  /* Mittelwert und Anzahl — bleiben sichtbar, auch während man wählt */
  .bewertung { display: grid; gap: var(--raum-3); }
  .bewertung__stand { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-3); }
  .bewertung__note {
    font-size: var(--txt-t4);
    font-weight: var(--gewicht-schwer);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--sperrung-titel);
  }
  .bewertung__von { color: var(--text-3); font-size: var(--txt-etikett); }
  .bewertung__eigen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-3);
  }
  .bewertung__frage { color: var(--text-2); font-size: var(--txt-klein); }
  /* Nach dem Abschicken: die eigene Wertung steht als Wort da */
  .bewertung__meine {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    color: var(--marke);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
  }
  .bewertung__meine svg { inline-size: 1rem; block-size: 1rem; fill: currentColor; stroke: none; }

  /* --- Kommentar-Schreibformular -----------------------------------------
     Steht in der Hauptspalte bei den Kommentaren, nicht in der Randspalte:
     ein Kommentar ist Fliesstext und braucht Lesebreite. Als Aufklapper,
     konsistent mit den Mitmach-Zeilen. */
  .komm-form__regeln {
    display: grid;
    gap: var(--raum-1);
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche-3);
    border-radius: var(--radius-s);
    color: var(--text-3);
    font-size: var(--txt-etikett);
  }
  .komm-form__regeln strong { color: var(--text-2); font-weight: var(--gewicht-halb); }
  .komm-form__zaehler { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  /* --- Karten-Schranke ----------------------------------------------------
     Die Karte lädt erst auf Klick. Bis dahin liegt diese Fläche im
     Kartenrahmen — kein zweiter Kasten, keine Verschiebung beim Laden. */
  .schranke {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--raum-4);
    block-size: 100%;
    padding: var(--raum-6);
    background: var(--flaeche-3);
    text-align: center;
  }
  .schranke__ikon { inline-size: 2.5rem; block-size: 2.5rem; fill: none; stroke: var(--linie-stark); stroke-width: 1.4; }
  .schranke__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .schranke__text { color: var(--text-2); font-size: var(--txt-etikett); max-inline-size: min(52ch, 100%); }
  .schranke__text a { color: var(--marke); }
  .schranke__reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--raum-2); }
  .schranke__merken { display: flex; align-items: center; gap: var(--raum-2); color: var(--text-3); font-size: var(--txt-etikett); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OP-ERGÄNZUNG E6 (2026-07-29) — AB HIER endet die Byte-Identität zur Abgabe
   (Kopf-Vermerk oben gilt für den Block DARÜBER). Bausteine der Rest-Strecken
   ohne Abgabe-Prototyp (NACHTRAG-EIN-KATALOG §9 «Rest-Strecken»), je ≥2 Seiten-
   Nutzer — Regel «komponenten ab dem ZWEITEN Nutzer»: Meldung · Leerzustand ·
   Formular-Bühne (Auth + Listen-Passwort) · Passwortfeld-Auge · Ankreuz ·
   Hinweis-Kasten · Honigtopf. NUR Tokens. --fehler/--fehler-tint sind seit E7
   in die Kern-Farbsätze PROMOTET (tokens.css OP-Ergänzungs-Token, Vier-Orte-
   Regel — Nutzer: .meldung--fehler, .knopf--gefahr, konto-karte--gefahr).
   ═══════════════════════════════════════════════════════════════════════════ */
@layer komponenten {

  /* --- Meldung (PRG-Rückmeldung der Formular-Seiten) --------------------- */
  .meldung {
    display: block;
    margin-block: var(--raum-3);
    padding: var(--raum-3) var(--raum-4);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-s);
    background: var(--flaeche-3);
    color: var(--text);
    font-size: var(--txt-klein);
  }
  .meldung--ok {
    background: var(--flaeche-4);
    border-color: color-mix(in oklab, var(--marke) 32%, transparent);
  }
  .meldung--fehler {
    background: var(--fehler-tint);
    border-color: color-mix(in oklab, var(--fehler) 38%, transparent);
  }

  /* --- Leerzustand (Karte) ----------------------------------------------- */
  .leer-karte {
    display: grid;
    justify-items: center;
    gap: var(--raum-3);
    padding: var(--raum-8) var(--raum-6);
    text-align: center;
  }
  .leer-titel { font-size: var(--txt-t4); font-weight: var(--gewicht-fett); }
  .leer-text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: min(52ch, 100%); }
  .leer-aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--raum-2);
    margin-block-start: var(--raum-2);
  }

  /* --- Formular-Bühne (5 Konto-Auth-Seiten + Listen-Passwort-Gate) ------- */
  .formular-buehne {
    display: flex;
    justify-content: center;
    padding-block: var(--raum-8) calc(var(--raum-8) + var(--raum-6));
  }
  .formular-karte {
    inline-size: min(28rem, 100%);
    display: grid;
    gap: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    padding: var(--raum-6);
  }
  .formular-karte h1 { font-size: var(--txt-t3); line-height: var(--zeile-titel); }
  .formular-unter { color: var(--text-2); font-size: var(--txt-klein); }
  .formular-fuss {
    border-block-start: var(--linie-breit) solid var(--linie);
    padding-block-start: var(--raum-4);
    color: var(--text-2);
    font-size: var(--txt-etikett);
  }
  .formular-fuss a { color: var(--marke); font-weight: var(--gewicht-halb); }
  .klein-text { color: var(--text-3); font-size: var(--txt-etikett); }
  .zurueck-link { color: var(--text-2); font-size: var(--txt-etikett); }

  /* --- Passwortfeld mit Auge (partials/passwortfeld.php) ------------------ */
  .passwort-feld { position: relative; }
  .passwort-feld .feld { padding-inline-end: 3rem; }
  .auge {
    position: absolute;
    inset-inline-end: var(--raum-1);
    inset-block-start: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
  }
  .auge:hover { color: var(--text); }

  /* --- Ankreuz-Zeile + Hinweis-Kasten ------------------------------------ */
  /* ⚠ Bis 2026-08-01 war das ein Grid `1.25rem minmax(0,1fr)` — also Platz für GENAU ZWEI
     Items. Ein Label mit <input> + <strong>Titel</strong> + freiem Erklärungstext hat aber
     DREI, und das dritte fiel per Auto-Placement in die 1,25-rem-Spalte des Radios: jedes
     Wort eine eigene Zeile (PO-Fund auf /admin/einwaende; dieselbe Struktur nutzt
     /admin/einreichungen). Ein `grid-column: 2` ist KEIN Ausweg — anonyme Textknoten sind
     nicht selektierbar, und die Falle kehrt beim nächsten dreiteiligen Label zurück.
     Deshalb hängende Einrückung: die Beschriftung bleibt EIN Textfluss, erste Zeile neben
     dem Radio, Folgezeilen bündig darunter — unabhängig von der Zahl der Kinder. */
  .ankreuz {
    display: block;
    color: var(--text-2);
    font-size: var(--txt-etikett);
  }
  /* Nur Labels MIT eigenem Steuerelement rücken hängend ein. Ein reines `for=`-Label ohne
     inneres <input> würde sonst mit der negativen Einrückung links aus seinem Kasten ragen. */
  .ankreuz:has(> input) {
    padding-inline-start: calc(1.15rem + var(--raum-3));
    text-indent: calc(-1.15rem - var(--raum-3));
  }
  .ankreuz input {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-inline-end: var(--raum-3);
    vertical-align: -0.15em;   /* trug im Grid `margin-block-start: 2px` (align-items: start) */
    accent-color: var(--marke);
  }
  .hinweis-kasten {
    display: flex;
    gap: var(--raum-2);
    padding: var(--raum-3) var(--raum-4);
    border-radius: var(--radius-s);
    background: var(--flaeche-4);
    color: var(--text-2);
    font-size: var(--txt-etikett);
  }
  .hinweis-kasten svg { flex: none; margin-block-start: 2px; }

  /* --- Honigtopf (Bot-Falle, partials/honigtopf.php) ----------------------
     BEWUSST offscreen statt display:none/visibility:hidden: naive Bots
     überspringen Unsichtbares — das Feld muss im Renderfluss «existieren». */
  .honigtopf {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
  }
}

/* OP-ERGÄNZUNG E6 (Fortsetzung): geteilte Brücken-Angleichungen — der alte
   Seitenkopf (viele Bestands-Templates bis E7) + der Gefahr-Knopf (Konto-
   Löschung + Playlist-Löschen). NUR Tokens; --fehler s. Vermerk oben. */
@layer komponenten {
  .seiten-kopf { padding-block: var(--raum-6) var(--raum-5); }
  .seiten-titel { font-size: var(--txt-t2); line-height: var(--zeile-titel); font-weight: var(--gewicht-fett); }
  .seiten-untertitel { color: var(--text-2); font-size: var(--txt-gross); margin-block-start: var(--raum-2); max-inline-size: min(64ch, 100%); }
  .ueberzeile { color: var(--text-3); font-size: var(--txt-etikett); }
  .abschnitt-kopf { padding-block: var(--raum-5) var(--raum-3); }
  .abschnitt-titel { font-size: var(--txt-t4); font-weight: var(--gewicht-fett); }
  .klein-titel {
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    letter-spacing: var(--sperrung-etikett);
    text-transform: uppercase;
    color: var(--text-3);
  }
  /* ⚠ `#fff` wäre hier eine Wette auf das Theme: --fehler ist in HELL ein Dunkelrot und in
     DUNKEL ein heller Lachston (2,0:1 mit Weiss — genau der PO-Fund «helle Pillen» vom
     2026-08-01). --fehler-auf kippt mit, wie --marke-auf bei der Marke. Der Hover mischt
     Schwarz zu und bleibt damit in beiden Themes auf der richtigen Seite. */
  .knopf--gefahr { background: var(--fehler); color: var(--fehler-auf); }
  .knopf--gefahr:hover { background: color-mix(in oklab, var(--fehler) 82%, black); color: var(--fehler-auf); }

  /* ⚠ BEIFANG-BUGFIX 2026-08-02 (gefunden von messung-dunkel-aa, Hover-Pass): der Hover JEDES
     Marken-Knopfs war in BEIDEN Themes unlesbar. Die Abgabe-Regel (Zeile 129, byte-identischer
     Teil — deshalb hier der Override) tauscht beim Zeigen die Fläche gegen --flaeche-4, BEHÄLT
     aber --marke-auf als Schrift: hell weiss auf #e4e7d4 = 1,4:1, dunkel #12130f auf #333a22
     = 1,6:1. Der Ruhe-Zustand ist tadellos, deshalb ist es nie jemandem aufgefallen —
     Hover-Zustände standen in keiner Messung.
     Fix = der Hover, den die OPv5-Abgabe ohnehin vorsieht: --marke-still. Das ist genau das
     in HANDOVER GF53 (a) als «bewusst offenes Delta» notierte Stück; es wird hiermit
     eingelöst. In HELL wird der Knopf beim Zeigen dunkler, in DUNKEL heller — die Schrift
     bleibt in beiden Fällen --marke-auf und liest sich (gemessen hell 7,88:1 · dunkel 11,40:1). */
  .knopf--marke:hover { background: var(--marke-still); color: var(--marke-auf); }
}

/* OP-ERGÄNZUNG E6 (Fortsetzung): Fehlerseiten-Bühne (404/410 laden KEIN
   seiten-CSS — Byte-Identitäts-Invariante, layout.php op_fehlerseite) +
   der Mehr-Link vieler Karten. Statisch, ohne jede Request-Varianz. */
@layer komponenten {
  .fehler-buehne { display: flex; justify-content: center; padding-block: var(--raum-8); }
  .fehler-karte { inline-size: min(38rem, 100%); }
  .fehler-code {
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    letter-spacing: var(--sperrung-etikett);
    text-transform: uppercase;
    color: var(--text-3);
  }
  .leer-seite { display: grid; justify-items: center; gap: var(--raum-3); text-align: center; }
  .leer-seite .piktogramm {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: var(--radius-voll);
    background: var(--flaeche-3);
    color: var(--text-2);
  }
  .fehler-suche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2);
    inline-size: 100%;
    margin-block: var(--raum-2);
  }
  .fehler-suche svg { color: var(--text-3); }
  .fehler-suche input {
    flex: 1 1 12rem;
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-s);
    color: var(--text);
    font: inherit;
    font-size: var(--txt-klein);
  }
  .mehr-link { color: var(--marke); font-size: var(--txt-etikett); font-weight: var(--gewicht-halb); }
  .mehr-link svg { vertical-align: -2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OP-ERGÄNZUNGSBLOCK TEIL E7 — aus der E1-Brücken-Schicht übernommene LEBENDE
   Alt-Bausteine (Brücken-Abbau, Migration 073-Etappe). Wert-identisch
   übersetzt: jedes var(--alt) trägt die rechte Seite seiner früheren
   Alt-Block-Definition (tokens.css-ALT-Block, mit E7 gelöscht) — die in E7
   PROMOTETEN Token (--fehler, --fehler-tint, --marker-Familie, --kopf-hoehe)
   bleiben var(). ⚠ In CSS-Kommentaren NIE einen Glob-Stern DIREKT vor einem
   Slash schreiben (Wildcard-Token plus Pfad-Trenner): das Paar Stern+Slash
   BEENDET den Kommentar, der Rest wird Parse-Müll und die Error-Recovery
   frisst den NÄCHSTEN @layer-Block — genau das legte von E7 bis E8 den
   kompletten @layer-basis-Block still (E8-Gegenproben-Fund 2026-07-29:
   .nur-vorlese sichtbar, Sticky-Footer + :target-Margin tot).
   Konsumenten je Gruppe benannt. Diese Bausteine wandern beim Redesign
   ihrer Seite in die v5-Sprache.
   ⚠ KASKADEN-LAGE (Warum einzelne Selektoren NICHT verbatim sind): die Brücke
   lud VOR komponenten.css und VERLOR Kollisionen an die v5-Abgabe — dieser
   Block steht DAHINTER und würde sie GEWINNEN. Alt-Klassen, die auf DEMSELBEN
   Element mit v5-Klassen liegen (alter Abspieler-Bausatz in der neuen
   .spielleiste: abspieler-knopf, fortschritt, steuer-knopf; .eingabe neben
   v5-.feld), sind deshalb auf ihren Alt-Kontext GESCOPET (.abspieler …,
   :not(.feld)) — sonst kippte der Umzug die bisherige Kaskade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Basis-Helfer der Bestands-Templates (aus dem Brücken-@layer-basis) ────── */
@layer basis {
/* Sticky-Footer (PO 2026-07-23): Fusszeile bleibt auf inhaltsarmen Seiten unten. */
body{min-height:100dvh;display:flex;flex-direction:column}
body > main,body > .admin-rumpf{flex:1 0 auto}
/* Anker-Sprünge unter der klebenden Kopfzeile (V1 A8) — rechnet mit dem in E7
   promoteten --kopf-hoehe (73px, Browser-nachgemessen messung-theme t9). */
:target{scroll-margin-top:calc(var(--kopf-hoehe) + 12px)}
/* Alt-Name des Vorlese-Helfers — steht noch in ~26 Bestands-Templates im Markup
   (v5-basis führt nur .nur-vorlesen; der Namens-Umzug ist Template-Handarbeit
   der jeweiligen Etappe). */
.nur-vorlese{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nur-mobil{display:none}
@media(max-width:760px){
  .nur-desktop{display:none!important}
  .nur-mobil{display:initial}
}
/* Admin-Grundtöne (Farbinsel Schritt 2: --link war ein Admin-Alias der Marke). */
.admin-modus a:hover{color:var(--text)}
.admin-modus :focus-visible{outline-color:var(--marke)}
}

/* ── Kopfzeilen-Rest: Embed-Logo-Plakette + Admin-Pille (layout.php-Kopf,
      op-pjax spiegelt sie je Swap — GF37 Hüllen-Spiegel) ───────────────────── */
@layer komponenten {
/* [R14] Logo auf dunklen Flächen: helle Plakette statt brightness-Filter (B9).
   Nutzer: embed-player.php + liste-embed.php. */
.logo-plakette{display:inline-flex;align-items:center;background:#FDFDFB;border-radius:10px;padding:6px 11px}
/* Admin-Pille im Kopf (nur Rolle admin; Design §Navbar): dunkle Pille mit grünem
   Schild-Haken. Literale = frühere --fuss-ikon-*-Werte (Admin-Palette, bewusst
   palette-entkoppelt). */
.admin-pille{display:inline-flex;align-items:center;gap:7px;background:#1A231D;color:#FFFFFF;border:1px solid #2A352E;border-radius:9px;padding:8px 15px;font:600 13px "Instrument Sans",sans-serif;cursor:pointer;list-style:none}
.admin-pille svg{color:#7CD3A0}
.admin-pille:hover{background:#243029}
/* Pillen-DROPDOWN (Beitrags-Aktionen): natives <details>, klappt nach unten. */
/* Schmale Geräte: die Pille wird zum reinen Symbol-Knopf (44 px wie ihre Nachbarn). Ohne das
   summierten Marke (113) + Aktionen (250) + Behälter-Polster (32) auf 439 px — bei 360 px
   Viewport also 87 px Überlauf auf JEDER Admin-Maske (PO-Fund 2026-08-01). Den Namen trägt
   dort das aria-label am Element; der Chevron des Menüs entfällt mit (er zeigt nur an, dass
   es aufklappt — das Antippen tut es ohnehin). */
/* 36 rem, nicht 30: bei 560 px fehlte sonst exakt 1 px (gemessen) — die volle Pille kostet
   54 px mehr als das Symbol. Ab 600 px trägt die Zeile sie wieder. */
@media(max-width:36rem){
  .admin-pille__wort{display:none}
  .admin-pille{padding-inline:12px}
  .admin-pille-menue > summary::after{display:none}
}
/* Selbst als Symbol bleibt die Pille ein ZUSÄTZLICHES Element: ☰ 44 + Marke 113 + vier
   Knöpfe + Abstände ergeben @360 rund 397 px. Öffentlich passt die Zeile (ohne Pille),
   im Admin nicht — EIN Knopf muss weichen. ⚠ UMENTSCHEID PO 2026-08-11 (Mobil-Such-Runde,
   kippt die Wahl vom 2026-08-01): es weicht der THEME-SCHNELLZUGRIFF, nicht mehr die
   Lupe. Die fehlende Lupe war Teil des Befunds «mobil suchen ist zu umständlich» — der
   Admin testet sonst eine Sicht ohne den schnellsten Such-Einstieg, den jeder Besucher
   hat. Der Schnellzugriff ist verzichtbar, weil die Pille NUR bei Eingeloggten steht und
   deren echte Theme-Wahl im Konto-Pulldown wohnt (POST /konto/theme); breiten-neutral,
   beide sind gleich grosse Rundknöpfe. Der a9-Vertrag «Lupe dauerhaft sichtbar» gilt
   damit wieder JEDER Kopfzeile (messung-kopfzeile misst beide Rollen). */
/* ⚠ SUBSUMIERT (PO 2026-08-24): der Theme-Schnellzugriff verschwindet jetzt GENERELL unter
   60 rem — Regel im Block «THEME-SCHNELLZUGRIFF NUR DESKTOP» am Dateiende. Die frühere
   34-rem-Sonderregel `.kopf__aktionen:has(.admin-pille) .thema-schnell{display:none}`
   entfiel damit (ihr Fall ist enthalten); die Platz-Begründung im Kommentar darüber bleibt
   als Historie — und als Warnung, falls die Kopfzeile je wieder ein Element dazubekommt. */
.admin-pille-menue{position:relative}
.admin-pille-menue > summary{list-style:none}
.admin-pille-menue > summary::-webkit-details-marker{display:none}
.admin-pille-menue > summary::after{content:"";width:7px;height:7px;border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);transform:rotate(45deg) translate(-1px,-1px);margin-left:3px;transition:transform .15s ease}
.admin-pille-menue[open] > summary::after{transform:rotate(-135deg)}
.admin-pille-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:224px;background:var(--flaeche-2);border:var(--linie-breit) solid var(--linie);border-radius:var(--radius-m);box-shadow:var(--schatten-2);padding:8px;display:flex;flex-direction:column;gap:2px}
.admin-menue-eintrag{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font:500 14px/1.2 "Instrument Sans",sans-serif;color:var(--text)}
/* Menü-AKTIONEN als button (Anpinnen-Toggle, PO 2026-07-24): Button-Reset auf die Eintrags-Optik. */
.admin-menue-form{margin:0;display:flex}
button.admin-menue-eintrag{width:100%;background:none;border:0;cursor:pointer;text-align:left}
.admin-menue-eintrag svg{color:var(--text-3)}
.admin-menue-eintrag:hover{background:var(--flaeche-4);color:var(--marke-still)}
.admin-menue-eintrag:hover svg{color:var(--marke-still)}
.admin-menue-eintrag--gefahr{color:var(--fehler)}
.admin-menue-eintrag--gefahr:hover{background:var(--fehler-tint);color:var(--fehler)}
.admin-menue-trenn{border-top:1px solid var(--linie);margin-top:4px;padding-top:11px}
}

/* ── Fusszeilen-Rest: die v5-.fuss rendert weiterhin .fussnav-link + .fuss-kanal
      (layout.php OP_FUSSNAV + op_kanaele_fuer_fusszeile). ────────────────────── */
@layer komponenten {
/* ⚠ `.fussnav-link` trägt KEINE Optik mehr (2026-08-01): die früheren Farb-/Schrift-
   Literale waren nachweislich wirkungslos (`.fuss__liste a` (0-1-1) sticht
   `.fussnav-link` (0-1-0) in derselben Layer aus), und die von links wachsende
   background-size-Linie ist mit der einheitlich dunklen Fusszeile in die
   `::after`-Linie des Fusszeilen-Blocks am Dateiende gewandert. Die Klasse bleibt im
   Markup als Anker; wer die Fusszeilen-Links gestalten will, fasst `.fuss__liste a`
   an — die Regeln stehen gebündelt im Block «FUSSZEILE dunkel in beiden Themes». */
/* Kanal-Icons: Grund/Kante/Schrift kommen aus den --fuss-*-Werten, die `.fuss` selbst
   setzt (2026-08-01). Vorher standen hier die Farb-Literale der ALTEN dunklen
   Smaragd-Fusszeile — auf der neuen Fläche wären das zwei verschiedene Schwarztöne
   nebeneinander. Sichtbar wird die Zeile erst mit konfigurierten A26-Kanälen. */
/* padding-BLOCK (s. .admin-seite) — trägt ebenfalls `.behaelter`. Latent, weil die Zeile
   ohne konfigurierte A26-Kanäle gar nicht rendert; mit Kanälen klebten die Icons @360 an
   der Kante. */
.fuss-kanaele{display:flex;justify-content:center;gap:14px;padding-block:22px 0;margin-top:26px;border-top:var(--linie-breit) solid var(--fuss-linie)}
.fuss-kanal{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgb(238 240 230 / 0.06);border:1px solid var(--fuss-linie);color:var(--fuss-link)}
.fuss-kanal:hover{background:var(--fuss-marke);border-color:var(--fuss-marke);color:var(--flaeche-tief)}
}

/* ── Foto-Drop-Zone (PO 2026-07-20; R3-Editor + S22 — op-fotodrop.js setzt hat-js) ── */
@layer komponenten {
.foto-drop.hat-js{border:1.5px dashed var(--linie);border-radius:var(--radius-m);padding:14px;display:flex;flex-direction:column;gap:8px;transition:border-color .16s ease,background-color .16s ease}
.foto-drop.hat-js.foto-drop--aktiv{border-color:var(--marke);background:var(--flaeche-4)}
/* Ausschnitt-Wahl vor dem Foto-Upload (PO 2026-09-05, op-fotodrop.js): Bühne = das Bild in Vorschaugrösse,
   der Rahmen ist ein absolut liegendes Quadrat, das Aussen-Dunkel kommt aus dem box-shadow (kein zweites
   Element, kein Canvas); overflow:hidden klemmt den Schatten aufs Bild. ::after = die Kreis-Rundung der
   Übersichts-Kacheln als Orientierung. touch-action:none = der Rahmen zieht auch am Finger. */
.foto-zuschnitt{margin-block:var(--raum-2) var(--raum-3);display:flex;flex-direction:column;gap:var(--raum-2)}
.foto-zuschnitt__buehne{position:relative;display:inline-block;overflow:hidden;line-height:0;max-inline-size:100%;user-select:none;border-radius:var(--radius-m);background:var(--flaeche-4)}
.foto-zuschnitt__buehne img{display:block;max-inline-size:min(28rem,100%);max-block-size:24rem;inline-size:auto;block-size:auto}
.foto-zuschnitt__rahmen{position:absolute;box-sizing:border-box;border:2px solid var(--marke);box-shadow:0 0 0 200vmax rgba(0,0,0,.45);cursor:move;touch-action:none}
.foto-zuschnitt__rahmen:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.foto-zuschnitt__rahmen::after{content:"";position:absolute;inset:0;border:1px dashed rgba(255,255,255,.75);border-radius:50%;pointer-events:none}
.foto-zuschnitt__groesse{display:flex;align-items:center;gap:var(--raum-2);font-size:var(--txt-klein)}
.foto-zuschnitt__groesse input{flex:1 1 12rem;max-inline-size:20rem}
}

/* ── Admin-Kennzahlen + Filterzeile (nv-* = Markup-Vertrag A20-Nutzer + A21-Sprecher) ── */
@layer komponenten {
.nv-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.nv-kachel{display:flex;flex-direction:column;gap:2px;padding:14px 16px;align-items:flex-start}
.nv-zahl{font:600 24px "Vollkorn",serif;color:var(--text)}
.nv-label{font:500 12.5px "Instrument Sans",sans-serif;color:var(--text-3)}
.nv-filterform{margin-bottom:0}
.nv-filterzeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nv-filterzeile label{display:inline-flex;align-items:center;gap:7px;font:500 14px "Instrument Sans",sans-serif;color:var(--text-2)}
}

/* ── Pillen/Tags der Bestands-Listen: rubrik-pille (dynamisch rubrik-pille--<code>,
      partials/listenzeile.php) · sprach-tag (S06 + Listenzeile) · Spender-Badges
      (I9; badge--<stufe> dynamisch, konto-profil + Kommentar-Köpfe) ─────────── */
@layer komponenten {
.rubrik-pille{display:inline-flex;align-items:center;flex:none;white-space:nowrap;padding:4px 10px;
  border-radius:6px;font:700 11px/1 "Instrument Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase}
.rubrik-pille--audio{background:var(--flaeche-4);color:var(--text-2)}
.rubrik-pille--video{background:var(--flaeche-4);color:var(--text-2)}
.rubrik-pille--dokument{background:var(--flaeche-4);color:var(--text-2)}
/* 13px statt 12px seit E8 (Fehlerbauarten-Regel der Abgabe: kein Text unter 13px). */
.sprach-tag{display:inline-flex;border:1px solid var(--linie-stark);border-radius:6px;padding:3px 8px;font:600 13px/1 "Instrument Sans",sans-serif;letter-spacing:.04em;color:var(--text-3);white-space:nowrap}
.badge-reihe{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-s);
  font:600 11.5px/1.7 "Instrument Sans",sans-serif;letter-spacing:.02em;vertical-align:middle;
  background:var(--flaeche-4);color:var(--marke-still)}
.badge--bronze{background:#F0DEC8;color:#6E4218}
.badge--silber{background:#E4E7EC;color:#414A52}
.badge--gold{background:#F3E8BE;color:#6E5208}
.badge--jahr{background:var(--flaeche);color:var(--text-2);border:1px solid var(--linie-stark)}
}

/* ── Liste + Listenzeile (Bestands-Listen: S21/S23, Playlists-Übersicht,
      Gemeinde-/Einwand-Detail, partials/listenzeile.php — E7-Rest, Umzug mit
      der jeweiligen Seiten-Etappe) ──────────────────────────────────────────── */
@layer komponenten {
.liste{display:flex;flex-direction:column;background:var(--flaeche-2);border:var(--linie-breit) solid var(--linie);border-radius:var(--radius-l);overflow:hidden;box-shadow:none}
.listenzeile{display:flex;align-items:center;gap:20px;padding:16px 26px;border-bottom:1px solid var(--linie)}
.listenzeile:last-child{border-bottom:0}
.listenzeile:hover{background:var(--flaeche-3)}
/* position:relative seit R01: die Marker-Plakette dockt unten rechts am Symbol an. */
.zeile-symbol{position:relative;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--linie-stark);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--text)}
/* Rubrik-Varianten (dynamisch zeile-symbol--<code>, listenzeile.php) — seit v5
   FARBLOS auf die neutralen Ableitungen gemappt (Formate farblos, E1). */
.zeile-symbol--audio{background:var(--flaeche-4);color:var(--text-2);border-color:transparent}
.zeile-symbol--video{background:var(--flaeche-4);color:var(--text-2);border-color:transparent}
.zeile-symbol--dokument{background:var(--flaeche-4);color:var(--text-2);border-color:transparent}
.zeile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.zeile-titel{font:600 17px/1.35 "Vollkorn",serif;color:var(--text);display:block}
a.zeile-titel:hover{color:var(--marke-still)}
.zeile-meta{font:400 13px/1.45 "Instrument Sans",sans-serif;color:var(--text-3)}
/* V1 A3: zweizeilig — kleines Erklärungs-Wort («gehalten am»/«vom») ÜBER dem Datum. */
.zeile-datum{flex:none;width:92px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:400 13.5px/1 "Instrument Sans",sans-serif;color:var(--text-3)}
.datum-label{font:400 10.5px/1 "Instrument Sans",sans-serif;letter-spacing:.04em;color:var(--text-3);opacity:.75}
@media(max-width:760px){
  .listenzeile{gap:13px;padding:13px 16px}
  .zeile-symbol{width:36px;height:36px}
  .zeile-titel{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .zeile-meta{font-size:12px}
}

/* [R01] Marker-System (B5): EIN Formprinzip — Ring (angefangen) · Haken-Plakette
   (fertig). Stufen dynamisch (marker-ring--<n>, op_player_marker_html =
   der EINE Erzeuger, module/player.php). Nutzt die E7-promoteten
   --marker-*-Token (Admin-Werte hält der .admin-modus-Block). */
.marker-ring{--anteil:0;width:18px;height:18px;border-radius:50%;flex:none;display:inline-block;
  background:conic-gradient(var(--marker-lauf) calc(var(--anteil)*1%),var(--marker-track) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 3.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 3.5px))}
.marker-ring--10{--anteil:10}.marker-ring--20{--anteil:20}.marker-ring--30{--anteil:30}
.marker-ring--40{--anteil:40}.marker-ring--50{--anteil:50}.marker-ring--60{--anteil:60}
.marker-ring--70{--anteil:70}.marker-ring--80{--anteil:80}.marker-ring--90{--anteil:90}
.marker-haken{width:18px;height:18px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--marker-fertig);color:var(--marke-auf)}
.marker-haken svg{width:10px;height:10px}
/* Plakette am Listen-Symbol: weisser Rand trennt vom getönten Kreis; der Ring braucht dort
   eine gefüllte Mitte (radial statt mask), sonst schiene die Symbol-Tönung durch. */
.zeile-symbol .marker-ring,.zeile-symbol .marker-haken{position:absolute;right:-4px;bottom:-4px;box-shadow:0 0 0 2.5px var(--flaeche-2)}
.zeile-symbol .marker-ring{background:
  radial-gradient(circle,var(--flaeche-2) 0 62%,transparent 63%),
  conic-gradient(var(--marker-lauf) calc(var(--anteil)*1%),var(--marker-track) 0);
  -webkit-mask:none;mask:none}

/* [R10] Empfehlungs-Pin (P3): Tint-Zeile + Pin (listenzeile.php + admin-beitraege). */
.listenzeile--empfehlung{background:var(--flaeche-4)}
.listenzeile--empfehlung:has(.zeile-symbol--audio){background:var(--flaeche-3)}
.listenzeile--empfehlung:has(.zeile-symbol--video){background:var(--flaeche-3)}
.listenzeile--empfehlung:has(.zeile-symbol--dokument){background:var(--flaeche-3)}
.zeile-pin{display:inline-flex;margin-right:6px;color:var(--marke-still);vertical-align:-2px}
.pin-label{font:600 11px "Instrument Sans",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--marke-still)}
.listenzeile--empfehlung:has(.zeile-symbol--audio) .zeile-pin,.listenzeile--empfehlung:has(.zeile-symbol--audio) .pin-label{color:var(--text-2)}
.listenzeile--empfehlung:has(.zeile-symbol--video) .zeile-pin,.listenzeile--empfehlung:has(.zeile-symbol--video) .pin-label{color:var(--text-2)}
.listenzeile--empfehlung:has(.zeile-symbol--dokument) .zeile-pin,.listenzeile--empfehlung:has(.zeile-symbol--dokument) .pin-label{color:var(--text-2)}

/* Unsichtbare Beiträge in der Admin-Sicht (R1) + Admin-Zähler-Rot (op_aufrufe_html). */
.listenzeile--hidden{background:var(--fehler-tint);border-left:3px solid var(--fehler)}
.zeile-hidden-marke{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:var(--radius-s);
  background:var(--fehler);color:var(--fehler-auf);font:600 11px/1.6 "Instrument Sans",sans-serif;
  letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
.zaehler-admin{color:var(--fehler)}
/* «nur für Admins» (PO-Regel 2026-08-01; NEU GEFASST PO 2026-08-10): ein Einstieg/Block,
   den AUSSCHLIESSLICH Admins sehen, ist ROT GEFÄRBT — die Färbung ist der einzige SICHTBARE
   Träger («die rote Färbung ist ausreichend»); der Text-Badge .nur-admin-marke ist ENTFALLEN
   (der Klartext lebt als .nur-vorlesen-Span im Erzeuger op_nur_admin_marke, layout.php —
   für Screenreader existiert Farbe nicht, WCAG 1.4.1).
   .nur-admin gilt für LINKS (Fussnav — dort mit eigenem Ton, s. Fusszeilen-Block —
   und Bibel-Register) UND TITEL (/statistik-Blockköpfe · S06-Einwände-Kopf);
   .zaehler-admin (oben) färbt die Einzelwerte. ⚠ a.nur-admin steht BEWUSST zusätzlich:
   der Klassen-Selektor allein (0,1,0) verlöre bei gleicher Spezifität gegen spätere
   Link-Farbregeln (.abschnitt__mehr-Klasse) — der a-Anker (0,1,1) hält die Links rot.
   ⚠ var(--fehler) kippt seit GF64 mit dem Theme (Dunkel-Satz = heller Lachston) —
   die frühere Eigen-Fläche des Badges ist damit entbehrlich; gemessen 2026-08-10:
   hell 6,2:1 (--flaeche) / 6,6:1 (--flaeche-2) · dunkel 9,1:1 / 8,3:1 — alle AA. */
.nur-admin,
a.nur-admin{color:var(--fehler)}
/* Der rote Admin-DOWNLOAD-Knopf (teilwerk__knopf.nur-admin) hat seinen Spezifitäts-Anker
   BEWUSST am DATEIENDE — die Werkzeug-Kreise tragen kontextspezifische Farbregeln
   (.medienleiste__werkzeuge .teilwerk__knopf, 0-3-0 + :hover), die jeden früheren
   gleich-spezifischen Anker ausstechen (zweimal von der Browser-Probe gefangen). */
}

/* ── Formular-/Seiten-Diverse der Bestands-Strecken ────────────────────────── */
@layer komponenten {
/* Nur-JS-Knöpfe (teilen/kopieren/Zeitmarke) werden `hidden` gerendert — das
   Attribut muss gegen v5-.knopf{display:inline-flex} gewinnen (die dokumentierte
   hidden-vs-display-Kaskaden-Falle; die v5-Abgabe führt keinen Zwilling). */
.knopf[hidden]{display:none}
/* Edge/IE blenden beim Tippen ein EIGENES Passwort-Auge ins Feld (::-ms-reveal) —
   neben unserem Toggle stünden ZWEI Augen (PO-Befund 2026-07-18). Der T20-Toggle
   ist der EINE Weg; die v5-Abgabe kennt die Unterdrückung nicht. */
.passwort-feld input::-ms-reveal,.passwort-feld input::-ms-clear{display:none}
/* .eingabe = das Alt-Eingabefeld (Admin-Masken, Leisten-Playlist-Formular,
   Kommentar-Partial). :not(.feld): auf Elementen mit BEIDEN Klassen
   («feld eingabe») gewann bisher die v5-.feld-Optik — das bleibt so
   (Kaskaden-Flip-Schutz, s. Block-Kopf). */
.eingabe:not(.feld){width:100%;background:var(--flaeche-2);border:var(--linie-breit) solid var(--linie);border-radius:var(--radius-m);padding:12px 16px;font:400 15px/1.4 "Instrument Sans",sans-serif;color:var(--text)}
.eingabe::placeholder{color:#8a8b80}
.eingabe--schmal{max-width:120px}
.eingabe:focus{outline:2px solid var(--marke);outline-offset:1px}
textarea.eingabe:not(.feld){min-height:130px;resize:vertical}
select.eingabe{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="%236D6E64" stroke-width="2.4"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
/* Datums-Inputs der A27-Zeitraum-Felder (admin-empfehlungen.php). */
.mini-datum{font:400 13px "Instrument Sans",sans-serif;color:var(--text-3);white-space:nowrap}
/* Leise Hinweis-Zeile (Admin-Masken + Kontakt + email-schutz-Partial). */
.hinweis-leise{font:400 13px/1.55 "Instrument Sans",sans-serif;color:var(--text-3)}
/* konto-leer: Leerzustands-Zeile (S21/S23/Playlists-Übersicht). */
.konto-leer{font:400 15px/1.6 "Instrument Sans",sans-serif;color:var(--text-3);padding:8px 0 24px}
.brotkruemel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:400 13px/1.4 "Instrument Sans",sans-serif;color:var(--text-3);padding:24px 0 0}
.brotkruemel a{color:var(--text-3)}
.brotkruemel a:hover{color:var(--text)}
.brotkruemel [aria-current="page"]{color:var(--text)}
/* Paginierung der Bestands-Masken (admin-nutzer + admin-sprecher; v5-Seiten
   blättern über .blaettern). */
.paginierung{display:flex;align-items:center;justify-content:center;gap:8px;padding:28px 0 60px;flex-wrap:wrap}
.paginierung a,.paginierung .punkte{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-m);font:500 14px/1 "Instrument Sans",sans-serif;padding:0 6px}
.paginierung a{border:1px solid var(--linie-stark);color:var(--text)}
.paginierung a:hover{border-color:var(--marke);color:var(--marke-still)}
.paginierung a[aria-current="page"]{background:var(--marke);border-color:var(--marke);color:var(--marke-auf);font-weight:600}
.paginierung .punkte{color:var(--text-3)}
/* Knopf, der im Flex-Container nicht auf volle Breite zieht (konto-profil). */
.knopf--selbst-links{align-self:flex-start}
.klein-text--links{text-align:left}
.zeile-zwischen{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Kontakt-Seitenspalte (statik/kontakt.php teilt die alten Spalten-Klassen). */
.seitenspalte{display:flex;flex-direction:column;gap:22px}
.spalten-karte{padding:26px;display:flex;flex-direction:column;gap:12px}
.spalten-karte--tint{background:var(--flaeche-4);border:0}
.spalten-karte--tint h2{font-size:20px}
.kontakt-form{display:flex;flex-direction:column;gap:8px}
/* [R08] Teil-Anker + Aufklappen langer Beschreibungen (beitrag-detail + op-text.js-
   Enhancer; <details> = natives Fundament, kein JS nötig). */
.teil-anker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.beschreibung-mehr>summary{cursor:pointer;list-style:none;font:600 13.5px "Instrument Sans",sans-serif;color:var(--marke-still);margin-top:10px}
.beschreibung-mehr>summary::-webkit-details-marker{display:none}
.beschreibung-mehr>summary::after{content:" ▾"}
.beschreibung-mehr[open]>summary::after{content:" ▴"}
/* Notiz-Baustein (S06 + Playlist-Detail). */
.notiz-form{display:flex;flex-direction:column;gap:10px}
.notiz-form textarea{min-height:84px}
.notiz-aktionen{display:flex;gap:10px}
.notiz-form--entfernen{align-items:flex-start}
/* Bild-Vorschau in Admin-/Konto-Formularen (Dateipflege-Cover + Fotos/Logos, T25). */
.datei-cover{max-width:200px;height:auto;border-radius:8px;display:block;margin:6px 0}
/* A11 Freigaben: Aktions-Knöpfe nebeneinander (T25; auch Meldungen/Moderation/Newsletter). */
.freigabe-aktionen{display:inline-flex;gap:8px;align-items:center;flex:none}
/* Ordnen-Griffe (T22; admin-liste-editor + admin-startseite + playlist-detail). */
.ordnen-gruppe{display:flex;gap:6px;align-items:center;margin-left:auto}
.ordnen-form{display:inline-flex}
/* PO 2026-08-06: die Ordnen-Knöpfe verschieben VERTIKAL (Position in der Liste) — die
   horizontalen zurueck/vor-Chevrons waren unlesbar (PO-Fund «wofür die Doppelpfeile?»).
   rotate(90deg) macht aus ◄ ein ∧ (hoch) und aus ► ein ∨ (runter); aria-labels trugen
   die Wahrheit schon immer. */
.ordnen-knopf--hoch svg,.ordnen-knopf--runter svg{transform:rotate(90deg)}
@media(max-width:560px){.ordnen-gruppe{gap:4px}}
/* 404/410-Karten-Innenabstand: die v5-E6-Fehlerbühne setzt selbst kein Padding —
   diese Zeile trug ihn schon über die Brücke (Byte-Identität der Fehlerseiten
   bleibt CSS-unabhängig, op_fehlerseite lädt kein seiten-CSS). */
.fehler-karte .leer-seite{padding:56px 32px 60px}
}

/* ── Interaktion: Kommentar-Baustein V1 «Gespräch unter dem Beitrag» (PO 2026-08-22;
      partials/interaktion-kommentare.php auf S06/S13/S14) + Hilf-mit-Aufklapper (beitrag-detail).
      App-weit (komponenten), weil S13/S14 kein beitrag-detail.css laden. ────────────────────── */
@layer komponenten {
.kommentare{display:flex;flex-direction:column;gap:12px;padding:22px 26px}
.kommentare--v1{gap:0}
@media(max-width:760px){.kommentare{padding:18px 16px}}
.kommentar-text{font:400 15px/1.6 "Instrument Sans",sans-serif;color:var(--text-2);overflow-wrap:anywhere;margin:0}
/* Aufräum-Etappe 2026-09-12 (Gegenproben g3a): stand als LITERAL `12.5px` hier — zu klein für die
   13-px-Grenze des a-Checks UND ein Größen-Literal, das die Token-Skala umgeht (CLAUDE.md §Aussehen).
   `--txt-etikett` ist der kleinste Token des Systems (0.8125rem = 13 px) und damit der richtige Wert. */
.melden-knopf{background:none;border:0;padding:0;color:var(--text-3);font:400 var(--txt-etikett)/1.4 "Instrument Sans",sans-serif;cursor:pointer;text-decoration:underline}
.melden-knopf:hover{color:var(--marke)}
.kommentar-hinweis-text{color:var(--text-3);font-size:var(--txt-etikett)}
.kommentar-hinweis-text a{color:var(--marke)}
.kommentar-leer{padding-block:var(--raum-3)}

/* Liste: je Kommentar eine Zeile mit Avatar-Initiale, Kopf (Name/Datum/Aktion), Text. */
.kommentar-liste{list-style:none;margin:0;padding:0;display:grid}
.kommentar-karte{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:var(--raum-3);row-gap:var(--raum-1);padding-block:var(--raum-4);border-block-start:1px solid var(--linie)}
.kommentar-karte:first-child{border-block-start:0;padding-block-start:var(--raum-2)}
.kommentar-avatar{grid-row:span 2;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;display:inline-grid;place-items:center;background:var(--flaeche-4);color:var(--marke);font:700 var(--txt-klein)/1 "Manrope",sans-serif}
.kommentar-karte--eigen .kommentar-avatar{background:var(--marke);color:var(--marke-auf)}
.kommentar-karte__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--raum-1) var(--raum-3);font-size:var(--txt-etikett);color:var(--text-3)}
.kommentar-karte__kopf strong{color:var(--text);font-size:var(--txt-klein)}
.kommentar-karte__kopf .kommentar-melden{margin-inline-start:auto}
.pille-wartet{display:inline-flex;align-items:center;gap:.35em;padding:.1em .6em;border-radius:999px;background:color-mix(in srgb, var(--fokus-halo) 35%, var(--flaeche-2));color:var(--text-2);font-size:var(--txt-etikett);font-weight:var(--gewicht-halb)}
.pille-wartet::before{content:"";inline-size:.5em;block-size:.5em;border-radius:50%;background:var(--marke)}

/* Schreibfeld: OFFEN unter der Liste (kein Aufklapper), Avatar + Feld. */
.kommentar-schreiben-v1{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:var(--raum-3);row-gap:var(--raum-2);margin-block-start:var(--raum-4);padding-block-start:var(--raum-4);border-block-start:1px solid var(--linie)}
.kommentar-feld{display:grid;gap:var(--raum-2)}
.kommentar-feld textarea.eingabe{min-block-size:5.5rem;resize:vertical}
.kommentar-feld__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--raum-3)}
.kommentar-feld__fuss .komm-form__zaehler{margin-inline-end:auto}
.kommentar-feld__fuss .knopf{margin-inline-start:auto}
.kommentar-regeln>summary{cursor:pointer;list-style:none;color:var(--text-3);font-size:var(--txt-etikett);display:inline-flex;align-items:center;gap:var(--raum-2);min-block-size:var(--tastfeld)}
.kommentar-regeln>summary::-webkit-details-marker{display:none}
.kommentar-regeln>summary::before{content:"i";inline-size:1.1rem;block-size:1.1rem;border-radius:50%;border:1px solid currentColor;display:inline-grid;place-items:center;font:var(--gewicht-halb) .7rem/1 "Manrope",sans-serif}
.kommentar-regeln[open]>summary{color:var(--text-2)}
.kommentar-regeln .komm-form__regeln{margin-block-start:var(--raum-2)}
.kommentar-gast{align-items:center}
.kommentar-gast .kommentar-hinweis-text{font-size:var(--txt-klein)}
@media(max-width:40rem){
  .kommentar-karte,.kommentar-schreiben-v1{grid-template-columns:1.9rem minmax(0,1fr);column-gap:var(--raum-2)}
  .kommentar-avatar{inline-size:1.9rem;block-size:1.9rem;font-size:var(--txt-etikett)}
}

.hilf-mit{margin-top:6px}
.hilf-mit summary{cursor:pointer;color:var(--text-3);font:400 14px "Instrument Sans",sans-serif}
.hilf-mit form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
}

/* ── Player-Bausatz der KETTEN-Seiten (module/player.php op_player_playlist_html:
      Playlists S12/S13, kuratierte Listen S14, Embeds S15, A12-Vorschau). Die
      Audio-Bühne ist seit PO 2026-08-06 die TONKARTE (Block weiter unten) — hier
      leben die Ketten-Bausteine (Eintragsliste, PDF-Station, Lautstärke-/CC-/
      Mitlesen-Verträge, die auch Leiste + Tonbühne mitnutzen). ──────────────── */
@layer komponenten {
.player-anker{display:contents}
/* Ohne JS führt das native <audio controls>; erst op-player.js setzt «abspieler--bereit»
   und übergibt an die Design-Oberfläche. NIE umdrehen (DESIGN-BRIEFING §5.3). Generisch am
   [data-abspieler]-Container — seit PO 2026-08-06 ist das app-weit die TONKARTE (S06 +
   Ketten-Bühne der Playlists/Listen/Embeds); die alte helle .abspieler-Karte ist ABGELÖST,
   ihre .abspieler-gescopeten Regeln fielen mit ihr (Grep 0 Nutzer, CHANGELOG 2026-08-06). */
.abspieler--bereit .op-media{display:none}
/* Dezenter Puls-Ring am Haupt-Play (reduced-motion aus) — lebt an der Tonbühne
   (abspieler--bereit sitzt an der tonkarte, der Start-Knopf trägt .abspieler-knopf). */
@media(prefers-reduced-motion:no-preference){
  .abspieler--bereit .abspieler-knopf:not(.abspieler-knopf--pause){animation:pulsRing 2.8s ease-out infinite}
}
@keyframes pulsRing{0%{box-shadow:0 0 0 0 rgba(12,107,87,.28)}70%{box-shadow:0 0 0 14px rgba(12,107,87,0)}100%{box-shadow:0 0 0 0 rgba(12,107,87,0)}}
/* Play/Pause-Symbolpaar — gilt AUCH für den Leisten-Startknopf (spielleiste__start
   trägt .abspieler-knopf; op-player.js toggelt --pause). */
.abspieler-knopf .symbol-play,.abspieler-knopf .symbol-pause{display:inline-flex}
.abspieler-knopf .symbol-pause,.abspieler-knopf--pause .symbol-play{display:none}
.abspieler-knopf--pause .symbol-pause{display:inline-flex}
/* Echter Startwert 0 — JS malt ab loadedmetadata. */
.fortschritt-balken{width:0}
.fortschritt-griff{left:0}
.fortschritt-balken{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--marke)}
.fortschritt-griff{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--marke-still);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* Die v5-Leisten-Schiene trägt die Alt-Klasse .fortschritt mit — nur die zwei
   Alt-Beiträge, die dort schon über die Brücke wirksam waren: */
.spielleiste__schiene.fortschritt{border-radius:999px;cursor:pointer}
.rund-knopf{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--linie-stark);background:none;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}
.rund-knopf:hover{border-color:var(--marke);color:var(--marke-still)}
.rund-knopf--klein{width:34px;height:34px}
.dateien-kopf{padding:20px 26px 14px;font:600 15px "Instrument Sans",sans-serif}
.dateien-kopf span{color:var(--text-3);font-weight:500}
.datei-zeile{display:flex;align-items:center;gap:14px;padding:15px 26px;border-top:1px solid var(--linie)}
/* Einteiler-Aktionszeile (PO 2026-07-25). */
.datei-zeile--solo{justify-content:flex-end;padding:10px 26px}
/* Aktiv-Zeile = Marken-Tint (PO 2026-07-25). */
.datei-zeile--aktiv{background:var(--flaeche-4)}
.datei-titel{flex:1;min-width:0;font:500 14.5px "Instrument Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
/* Eintrags-Text-Spalte (PO 2026-08-06): Titel + Sprecher-Zeile darunter — die Spalte
   übernimmt das flex:1 des Titels, der behält sein Ellipsis-Verhalten. Der «Zum
   Beitrag»-Weg ist der Pfeil-Kreis rechts in der Werkzeug-Spalte (rund-knopf--klein). */
.eintrag-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.eintrag-meta{font:400 12.5px "Instrument Sans",sans-serif;color:var(--text-3);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.datei-zeile--aktiv .datei-titel{font-weight:600}
.datei-zeile a.datei-titel{color:var(--text)}
.datei-zeile a.datei-titel:hover{color:var(--marke-still)}
.datei-zeile--gesperrt{opacity:.55}
.datei-dauer{font:500 12.5px ui-monospace,Menlo,monospace;color:var(--text-3)}
.balken-gruppe{display:inline-flex;align-items:flex-end;gap:2.5px;height:16px;width:20px;flex:none}
.balken-gruppe i{width:3.5px;background:var(--marke);border-radius:2px}
.balken-gruppe i:nth-child(1){height:8px}
.balken-gruppe i:nth-child(2){height:15px}
.balken-gruppe i:nth-child(3){height:5px}
.balken-gruppe i:nth-child(4){height:11px}
.spielt-symbol{width:20px;display:inline-flex;justify-content:center;flex:none;color:var(--text-3)}
/* Ketten-Zeilen (PO 2026-08-07): BEIDE Marker stehen im DOM, die Zeilen-Klasse schaltet —
   so wandert die «liegt im Player»-Balken-Gruppe beim Ketten-Weiterschalten mit
   (eintragAktivieren toggelt nur .datei-zeile--aktiv; S06-Teilzeilen-Muster).
   Gesperrt-Zeilen rendern keine Balken-Gruppe, ihr Info-Symbol bleibt unberührt. */
.datei-zeile .balken-gruppe{display:none}
.datei-zeile--aktiv .balken-gruppe{display:inline-flex}
.datei-zeile--aktiv .spielt-symbol{display:none}
/* PO 2026-08-07: Der Marker TANZT nur bei LAUFENDER Wiedergabe — pausiert/startbereit
   stehen die Balken (eine Dauer-Animation behauptete «läuft», während nichts läuft).
   Die Container-Klasse pflegt op-player.js (symbolSetzen fürs Audio + Video-Listener
   in ketteBinden); reduced-motion bleibt komplett statisch (pulsRing-Muster). */
@media(prefers-reduced-motion:no-preference){
  .playlist-player--spielt ~ .dateien .datei-zeile--aktiv .balken-gruppe i{animation:balkenTanz 1s ease-in-out infinite;transform-origin:50% 100%}
  .playlist-player--spielt ~ .dateien .datei-zeile--aktiv .balken-gruppe i:nth-child(2){animation-delay:.25s}
  .playlist-player--spielt ~ .dateien .datei-zeile--aktiv .balken-gruppe i:nth-child(3){animation-delay:.5s}
  .playlist-player--spielt ~ .dateien .datei-zeile--aktiv .balken-gruppe i:nth-child(4){animation-delay:.12s}
}
@keyframes balkenTanz{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.pdf-karte{padding:20px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pdf-symbol{width:52px;height:52px;border-radius:var(--radius-m);background:var(--flaeche-4);display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);flex:none}
.pdf-text{flex:1;min-width:180px;display:flex;flex-direction:column;gap:3px}
.pdf-name{font:600 15px "Instrument Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-meta{font:400 12.5px "Instrument Sans",sans-serif;color:var(--text-3)}
/* Lautstärke: Mute-Knopf mit ZWEI Symbolen + Regler — Symbolpaar gilt auch im
   Leisten-Panel (dortiger Knopf trägt .steuer-knopf mit). */
.lautstaerke-gruppe{display:inline-flex;align-items:center;gap:8px}
.steuer-knopf .symbol-laut{display:inline-flex}
.steuer-knopf .symbol-stumm,.steuer-knopf--stumm .symbol-laut{display:none}
.steuer-knopf--stumm .symbol-stumm{display:inline-flex}
.lautstaerke{-webkit-appearance:none;appearance:none;width:84px;height:6px;border-radius:999px;background:var(--marker-track);outline-offset:3px;cursor:pointer}
.lautstaerke::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--marke-still);border:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.lautstaerke::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--marke-still);border:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
@media(max-width:560px){.lautstaerke{width:64px}}
/* CC-An-Zustand: op-player.js toggelt `steuer-knopf--cc-an` an JEDEM CC-Knopf
   (ccKnopfMalen — Leiste, Tonbühne, Ketten-Bühne); der Klassen-NAME ist Historie. */
.steuer-knopf--cc-an{background:var(--marke);color:var(--marke-auf)}
/* Mitlesen (PO 2026-07-26): zeitgekoppelte Cue-Liste — op-player.js baut sie aus der
   geladenen VTT-Spur; NUR-JS (ohne JS bleibt der Aufklapper hidden). Die Liste lebt in
   BEIDEN Klappern (S06-mitlesen-klapper + Ketten-Bühne seit PO 2026-08-06). */
.mitlesen-klapper .aufklapper__inhalt{max-block-size:17rem;overflow-y:auto} /* Umzug aus beitrag-detail.css — zweiter Nutzer */
.mitlesen-liste{list-style:none;margin:8px 0 0;padding:0;max-height:340px;overflow-y:auto;position:relative;display:flex;flex-direction:column;gap:2px}
.mitlesen-liste button{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:var(--radius-m);padding:7px 12px;font:400 14.5px/1.55 "Instrument Sans",sans-serif;color:var(--text);cursor:pointer}
.mitlesen-liste button:hover{background:var(--flaeche-4)}
.mitlesen-liste button.mitlesen-aktiv{background:var(--flaeche-4);color:var(--marke-still);font-weight:600}
.mitlesen-zeit{flex:none;font:500 12px ui-monospace,Menlo,monospace;color:var(--text-3);padding-top:3px}
.mitlesen-liste button.mitlesen-aktiv .mitlesen-zeit{color:var(--marke-still)}
/* I1 «Weiterhören»-Angebot (Nur-JS-Knopf). */
.weiterhoeren{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:1px solid var(--marke);border-radius:var(--radius-voll);padding:7px 16px;background:var(--flaeche-4);color:var(--marke-still);font:600 13px "Instrument Sans",sans-serif;cursor:pointer}
.weiterhoeren:hover{background:var(--marke);color:var(--marke-auf)}
.weiterhoeren[hidden]{display:none}
/* [R05] Video: Poster-Bühne + Variante-A-Spätladen (video-spaet-start) + Mini-Mechanik
   (op-player.js: video-karte--mini/mini-knoepfe). Eigene [hidden]-Zwillinge —
   display:flex schlüge sonst das UA-Default (dokumentierte Falle). */
.video-karte{overflow:hidden;padding:0}
.video-buehne{aspect-ratio:16/9;background:var(--flaeche-4);position:relative;display:flex;align-items:center;justify-content:center}
.video-buehne[hidden]{display:none}
.video-spaet-start[hidden]{display:none}
.video-buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Quellenlose Karten: Abspiel-Link GESTRECKT (PO 2026-07-18) — seit PO 2026-08-08 MIT sichtbarem
   Play-Kreis. Vorher trug das Standard-Poster das Play-Symbol als Teil der Grafik; mit echten
   Titelbildern (T-4) fiel es weg und die Karte wirkte statisch. Der Kreis ist DIESELBE Komponente
   wie auf der Tonbühne (.buehne__start), nur kleiner — bildfestes Paar, nie var(--marke) (§2.3). */
.video-buehne-link{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.video-buehne-link .buehne__start{inline-size:3.75rem;block-size:3.75rem;
  box-shadow:0 2px 14px rgba(38,38,32,.34);transition:transform 140ms ease,background 140ms ease}
.video-buehne-link:hover .buehne__start,
.video-buehne-link:focus-visible .buehne__start{background:#ffffff;transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){
  .video-buehne-link .buehne__start{transition:none}
  .video-buehne-link:hover .buehne__start{transform:none}
}
.video-fuss{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.video-fuss strong{font:600 14.5px "Instrument Sans",sans-serif}
/* [R03] Mini-Video: das LAUFENDE Video klebt klein bündig ÜBER der Leiste — DASSELBE
   Element per CSS fixiert, kein zweiter Player. */
/* PO 2026-08-07: Mini-Leinwand 320 → 400 px («bei Videos die Leinwand im Footer etwas
   grösser»); unter 36 rem bleibt sie vollbreit (Regel unten). Messverträge nachgezogen:
   messung-leiste-mobil e3 · messung-i0-advance c-mini-an. */
.video-karte--mini{position:fixed;right:16px;bottom:var(--leiste-hoehe);width:min(400px,calc(100vw - 32px));z-index:69;margin:0;box-shadow:0 14px 36px rgba(38,38,32,.28);border-radius:12px 12px 0 0}
.video-karte--mini .video-fuss{display:none}
/* Dubletten-Regel (PO 2026-08-04, F2): im Mini-Zustand ist die LEISTE die einzige
   Bedienfläche — die MediaElement-Steuerleiste (zweite Suchleiste + zweite Zeitanzeige
   IM Bild) verschwindet auf ALLEN Breiten, Desktop wie mobil. Dasselbe Prinzip wie beim
   Cue (GF58): sobald die Leiste trägt, verlässt die Bedienung das Daumennagel-Bild.
   Klick aufs Bild bleibt Play/Pause (mejs clickToPlayPause), die Overlay-Knöpfe
   Zurück/PiP bleiben. Vollbild aus dem Mini entfällt BEWUSST (PO-Entscheid F3) — der
   Weg dorthin ist der Zurück-Knopf zur grossen Karte. Der Guard folgt dem CC-Knopf-
   Muster (Block «DER UNTERTITEL-SCHALTER WOHNT IN DER LEISTE»): am DOKUMENT gebunden,
   weil das Vollbild-Element engine-abhängig ist (Chromium: Container · WebKit: <video>)
   — ein unbekannter Vollbild-Zustand lässt die Steuerung SICHTBAR, nie umgekehrt.
   ⚠ Das !important ist hier PFLICHT, nicht Schicht-Verwechslung: das gepinnte Vendor-CSS
   (mediaelementplayer.min.css) deklariert `display:flex` UNLAYERED, und unlayered schlägt
   jede @layer-Regel — gemessen 2026-08-04 (vendorSichtbar=true trotz Regel). Ein layered
   !important gewinnt standardgemäss gegen unlayered Normal-Deklarationen; derselbe
   Ausnahmefall wie .nur-desktop/.nur-mobil. Der Captions-Knopf darunter braucht es NICHT
   (Vendor setzt dort nur position, kein display). */
body:not(:has(:fullscreen)) .video-karte--mini .mejs__controls{display:none!important}
/* Vollbreit-Mini (PO 2026-08-04, F1): unter 36 rem randlos angedockt — Mini + Leiste
   werden EIN Block (360 px ⇒ 202 statt 180 px Bildhöhe; Preis benannt und entschieden).
   36 rem ist die BESTEHENDE Sekundär-Knopf-Grenze der Leiste — bewusst keine neue,
   ungetestete Zwischenstufe; darüber bleibt die schwebende 320er-Karte.
   inset-inline:0 + width:auto statt width:100vw — 100vw zählt eine Scrollleiste mit. */
@media (max-width:36rem){
  .video-karte--mini{inset-inline:0;width:auto;border-radius:0}
}
/* Nur-Audio-Untertitel-Bühne der Video-Karte (PO 2026-07-30): bündig unter der Bild-Bühne.
   Im Mini-/Hüllen-Zustand nur noch VORLESE-Fläche (nur-vorlese-Muster statt display:none —
   die aria-live-Ansage bleibt): sichtbar ist dort die Leisten-Cue-Zeile, sonst stünde der
   Text doppelt übereinander. */
.video-karte .untertitel-buehne--karte{border-radius:0;margin:0}
.video-karte--mini .untertitel-buehne--karte,.medien-huelle .untertitel-buehne--karte{position:absolute;inline-size:1px;block-size:1px;min-block-size:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0}
/* Leisten-Cue-Zeile GRÖSSER (PO 2026-07-30, zwei Stufen): der Abgabe-Wert --txt-klein (15px)
   war dem PO zu klein; --txt-gross (19px, Bühnen-Grösse) auf Zuruf nochmals angehoben auf
   --txt-t4 (22px) — die Zeile ist die entfernteste Lesefläche der App. Override HIER statt
   im Abgabe-Teil oben (Byte-Identität); gleiche Spezifität, spätere Regel gewinnt im Layer. */
.spielleiste__cue span{font-size:var(--txt-t4);line-height:1.4}
.mini-knoepfe{display:none} /* existiert nur per JS; sichtbar NUR im Mini-Zustand + in der Hülle */
.video-karte--mini .mini-knoepfe,.medien-huelle .mini-knoepfe{position:absolute;top:6px;right:6px;z-index:2;display:flex;gap:6px}
.mini-knopf{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(20,22,18,.65);color:#fff;cursor:pointer}
.mini-knopf:hover{background:rgba(20,22,18,.85)}
/* Medien-Hülle (I0 Phase 2): das pjax-gehoistete Medium lebt hier weiter — Audio
   UNSICHTBAR (die Leiste ist seine Fernbedienung); der Zurück-Knopf bleibt in der
   Hülle SICHTBAR (P2 Variante B) — hier darf KEINE neue Verbergen-Regel entstehen. */
.medien-huelle .abspieler{display:none}
/* pjax-Ladefeedback (Audit 2b): BEWUSST ohne pointer-events:none — Folgeklick =
   legitimes Überhol-Muster (laufNr); Formulare schützt der In-Flight-Guard. */
body[aria-busy="true"] #inhalt{opacity:.6;transition:opacity .15s ease .1s}
/* Der Inhalt darf nicht unter der Leiste verschwinden — Höhe als Token, keine
   JS-Messung (op-player.js setzt body.leiste-an bei sichtbarer Leiste). */
body.leiste-an{padding-bottom:var(--leiste-hoehe)}
/* Leisten-Reste, die die v5-.spielleiste (partials/player-leiste.php) weiter nutzt: */
.leiste-weiter{flex:none;max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px "Instrument Sans",sans-serif;color:var(--marke-still)}
.leiste-weiter[hidden]{display:none}
.leiste-meldung{font:500 12.5px/1.3 "Instrument Sans",sans-serif;color:var(--text-2);max-width:180px}
.leiste-meldung:empty{display:none}
/* Aufklapper Lautstärke/Tempo (Bau-Spec §14.3): Panel klappt ÜBER der Leiste auf. */
.leiste-mehr{position:relative;display:flex}
.leiste-mehr-panel{position:absolute;bottom:calc(100% + 14px);right:0;z-index:71;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--flaeche-2);border:1px solid var(--linie-stark);border-radius:var(--radius-m);box-shadow:0 10px 30px rgba(38,38,32,.16)}
.leiste-mehr-panel[hidden]{display:none} /* eigene Regel: display:flex schlüge sonst das UA-Default */
@media(max-width:760px){
  .leiste-nur-breit{display:none} /* mobil bleiben Play/Pause + Titel + Position + Schliessen */
}
/* «Zur Playlist»-Aufklapper (P6): S06-Dateizeilen + Player-Leiste. */
.zur-playlist{position:relative}
/* ⚠ Diese Regel (0-1-1) sticht die Knopf-Klassen der Summaries aus (.teilwerk__knopf /
   .ikon-knopf, je 0-1-0 mit display:grid+place-items) — OHNE eigene Zentrierung sass das
   Icon oben links im 44-px-Knopf (PO-Fund 2026-07-30, alle vier zur-playlist-Nutzer). */
.zur-playlist summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.zur-playlist summary::-webkit-details-marker{display:none}
.zur-playlist-menue{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:220px;
  background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--radius-m);
  box-shadow:var(--schatten-2);padding:8px;display:flex;flex-direction:column;gap:2px}
.zur-playlist-menue form{display:flex;flex-direction:column;gap:2px}
.zur-playlist-wahl{background:none;border:0;text-align:left;cursor:pointer;padding:8px 10px;
  border-radius:var(--radius-m);font:500 14px/1.3 "Instrument Sans",sans-serif;color:var(--text)}
.zur-playlist-wahl:hover{background:var(--flaeche-4)}
/* Leisten-Variante (P6): die Leiste klebt UNTEN — das Menü klappt nach OBEN. */
.zur-playlist--leiste .zur-playlist-menue{top:auto;bottom:calc(100% + 10px);max-height:50vh;overflow-y:auto}
.zur-playlist--leiste summary{font:600 19px/1 "Instrument Sans",sans-serif}
/* Playlist-Bühne (S12/S13, module/player.php). */
.playlist-player{display:flex;flex-direction:column;gap:14px}
.playlist-stand{font:600 14px "Instrument Sans",sans-serif;color:var(--text-2)}
.eintrag-nr{font:600 13px "Instrument Sans",sans-serif;color:var(--text-3);min-width:22px;text-align:right}
}

/* ── Interaktion & Bewegung der Bestands-Bausteine (auf lebende Selektoren
      beschnitten; die v5-Komponenten regeln ihre Übergänge selbst) ──────────── */
@layer komponenten {
a,button{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .2s ease,transform .16s ease}
.eingabe,.gross-suche{transition:border-color .16s ease,box-shadow .2s ease}
/* ⚠ `.fussnav-link` ist hier AUSGETRAGEN (2026-08-01). Diese Regel malte auf den
   Fusszeilen-Links eine von links wachsende background-size-Linie in currentColor —
   sie lief zusätzlich zur `::after`-Linie der neuen dunklen Fusszeile und ergab beim
   Maus-Over ZWEI Striche übereinander. Die Fusszeile bringt ihren Hover jetzt
   vollständig selbst mit (Block «FUSSZEILE dunkel in beiden Themes» am Dateiende);
   die Brotkrümel behalten den Effekt unverändert. */
.brotkruemel a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left bottom;background-size:0% 1px;transition:background-size .22s ease,color .16s ease}
.brotkruemel a:hover{background-size:100% 1px}
.listenzeile,.datei-zeile{transition:background-color .15s ease,box-shadow .15s ease}
.listenzeile:hover{box-shadow:inset 3px 0 0 var(--marke)}
.abspieler-knopf{transition:transform .16s ease,background-color .16s ease,box-shadow .2s ease}
.abspieler-knopf:hover{transform:scale(1.05)}
.rund-knopf:hover{transform:scale(1.06)}
/* OHNE transform (PO-Befund 2026-07-25): das frühere translateY(6px) machte <main> WÄHREND der
   0,4 s zum Containing Block für alles position:fixed darin (schon eine LAUFENDE Transform-
   Animation reicht — nicht erst fill-mode:both). Der Cookie-Banner (wohnt bewusst IN <main>,
   pjax-Server-Wahrheit) klebte dadurch beim Aufbau am unteren main-Rand («am Footer») und
   schwebte unsichtbar DORT ein statt vom Viewport-Rand. Opacity-only behält die weiche
   Einblendung und lässt <main> nie mehr zum fixed-Anker werden. */
@keyframes sanft-einblenden{from{opacity:0}to{opacity:1}}
/* fill-mode BACKWARDS, nie both: `both` hielte die Animation dauerhaft im Effekt-Stack — bei
   Transform-Keyframes stünde dann eine Identitäts-Matrix auf <main> (Mini-Video-Drift,
   gemessen 2026-07-13: 149 px statt Leisten-Andockung; seit 2026-07-25 sind die Keyframes
   transform-frei, die Regel bleibt als Wächter). */
main{animation:sanft-einblenden .4s ease backwards}
}

/* ── [R17] Einbett-Projektionen S07/S15 (embed-player.php + liste-embed.php) ── */
@layer komponenten {
.einbett{background:var(--flaeche-2)}
.einbett main{padding:0;animation:none}
.einbett-rahmen{padding:14px;display:flex;flex-direction:column;gap:12px;border:var(--linie-breit) solid var(--linie);border-radius:var(--radius-l);margin:10px;background:var(--flaeche-2)}
.einbett .abspieler{box-shadow:none;border:var(--linie-breit) solid var(--linie)}
.einbett-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.einbett-marke{display:inline-flex;align-items:center;gap:9px}
.einbett-marke img{height:20px}
.einbett-titel{font:600 16px/1.3 "Vollkorn",Georgia,serif;color:var(--text)}
.einbett-quelle{font:600 12.5px "Instrument Sans",sans-serif;white-space:nowrap}
.einbett-fuss{display:flex;justify-content:space-between;gap:10px;font:400 12px "Instrument Sans",sans-serif;color:var(--text-3)}
.einbett-feld{width:100%;font:500 12.5px/1.5 ui-monospace,Menlo,monospace;color:var(--text-2);resize:vertical}
}

/* ── Profilseiten-Bausteine (I4): Denominations-Seiten + der Roh-HTML-Block
      (profil-inhalt auch auf S06-Text + sprecher-profil — E7-Rest) ──────────── */
@layer komponenten {
.profil-kopf{display:flex;align-items:flex-start;gap:32px;padding:30px 0}
.profil-avatar{width:120px;height:120px;border-radius:50%;background:var(--flaeche-4);display:inline-flex;align-items:center;justify-content:center;font:600 34px "Vollkorn",Georgia,serif;color:var(--marke-still);flex:none}
.profil-avatar--bild{object-fit:cover} /* T25: echtes Foto/Logo füllt den Kreis, nie verzerrt */
.profil-text{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.profil-titelblock{display:flex;flex-direction:column;gap:6px}
.profil-text h1{font-size:clamp(26px,3.4vw,46px)}
.profil-meta{font:400 15px "Instrument Sans",sans-serif;color:var(--text-3)}
.profil-bio{font:400 15.5px/1.7 "Instrument Sans",sans-serif;color:var(--text-2);max-width:760px;display:flex;flex-direction:column;gap:10px}
.profil-aktionen{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.weblinks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.weblinks .chip{gap:8px;padding:8px 16px;font-size:13px;color:var(--text)}
.profil-leer{padding:24px 26px;margin-bottom:60px}
.profil-leer p{font:400 15px/1.6 "Instrument Sans",sans-serif;color:var(--text-2)}
@media(max-width:760px){
  .profil-kopf{gap:16px;flex-direction:column}
  .profil-avatar{width:64px;height:64px;font-size:20px}
}
/* Der frei gestaltete Admin-HTML-Block (R3/I4). Bewusst KEINE Typo-/Farb-Vorgaben — der Admin
   bestimmt das Aussehen über sein eigenes Markup. Nur eine Bilder-/Überlauf-Bremse. */
.profil-inhalt{margin:24px 0}
.profil-inhalt img{max-width:100%;height:auto}
.profil-inhalt :is(table,pre){max-width:100%;overflow-x:auto;display:block}
/* Entitäts-Listen (I3): Denominationen-Verzeichnis + -Seite. */
.denom-baum{list-style:none;margin:0 0 60px;padding:0}
.denom-zeile{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--linie)}
.denom-zeile a{font:500 16px "Instrument Sans",sans-serif;color:var(--text);text-decoration:none}
.denom-zeile a:hover{color:var(--marke-still);text-decoration:underline}
.denom-meta{font:400 13.5px "Instrument Sans",sans-serif;color:var(--text-3)}
.denom-block{margin:0 0 36px}
.denom-block .klein-titel{margin-bottom:12px}
.denom-block .denom-baum{margin-bottom:0}
}

/* ── Bibelstellen-Picker (I5: A04 + Einwand-Editor + Notiz-Einfügung) +
      Bibeltext-Ausgabe (Leseansicht, Chips-Aufklapper, Vermerk) ─────────────── */
@layer komponenten {
.bibel-picker{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bibel-picker .bibel-buch{flex:1 1 180px;min-width:150px}
.bibel-picker .bibel-kapitel,.bibel-picker .bibel-vers-von,.bibel-picker .bibel-vers-bis{flex:0 1 84px;min-width:70px}
.bibel-einfuegen{margin:4px 0 10px}
.bibel-einfuegen>summary{cursor:pointer;list-style:none}
.bibel-einfuegen>summary::-webkit-details-marker{display:none}
.bibel-einfuegen[open]>summary{margin-bottom:8px}
/* Bibeltext (Abkommen §7): Verstext IMMER escaped; Kurzvermerk an JEDER Text-Ausgabe. */
.bibel-vers{margin:0;font:400 16px/1.7 "Vollkorn",Georgia,serif;color:var(--text)}
.vers-nr{font:700 11px "Instrument Sans",sans-serif;color:var(--marke);vertical-align:super;margin-right:2px}
.bibel-vers:target{background:var(--flaeche-4);border-radius:6px;box-shadow:0 0 0 6px var(--flaeche-4)}
/* 13px statt 12px seit E8 (Fehlerbauarten-Regel der Abgabe: kein Text unter 13px). */
.bibel-vermerk{margin:0;font:400 13px "Instrument Sans",sans-serif;color:var(--text-3)}
.bibel-vermerk a{color:inherit;text-decoration:underline}
/* Chip-Aufklapper: der summary-Chip behält die Chip-Optik; das offene Panel spannt die
   volle Reihe (flex-basis) und steht als Karte unter den Chips. */
.bibel-stelle summary{list-style:none;cursor:pointer}
.bibel-stelle summary::-webkit-details-marker{display:none}
.bibel-stelle[open]{flex-basis:100%}
.bibel-stelle[open]>summary{margin-bottom:10px}
.bibel-stelle-text{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--flaeche);border:var(--linie-breit) solid var(--linie);border-radius:10px}
.bibel-stelle-text .bibel-vers{font-size:15px}
.bibel-stelle-fuss{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between;border-top:1px solid var(--linie);padding-top:10px}
.bibel-stelle-links{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;font:600 13px "Instrument Sans",sans-serif}
}

/* ── Themen-Farb-Slots (Whitelist OP_THEMA_SLOTS; dynamisch thema-slot--<slot>,
      module/themen.php — op_thema_eigen_stil ist die EINE Inline-Style-Ausnahme) ── */
@layer komponenten {
.thema-slot--violett{--ts-bg:#ECE7F4;--ts-fg:#6A4A8A;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--petrol{--ts-bg:#DCEDEE;--ts-fg:#1F6470;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--rost{--ts-bg:#F5E7DD;--ts-fg:#95573A;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--graugruen{--ts-bg:#E9ECEA;--ts-fg:#47524C;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--weinrot{--ts-bg:#F4E3E5;--ts-fg:#97404B;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--blau{--ts-bg:#E4EAF5;--ts-fg:#3A5691;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--beere{--ts-bg:#F5E4EC;--ts-fg:#96476E;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--gold{--ts-bg:#F3EBD6;--ts-fg:#7A5E26;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--tanne{--ts-bg:#E1EFE7;--ts-fg:#1F5A47;background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
.thema-slot--eigen{--ts-bg:var(--flaeche-4);--ts-fg:var(--text);background:var(--ts-bg);color:var(--ts-fg);border-color:transparent}
}

/* ── Admin-Gerüst (alle Verwaltungs-Masken — F21: Admin bleibt fest dunkel;
      die Töne halten der .admin-modus-Token-Block + die Korrekturen unten) ──── */
@layer komponenten {
/* ⚠ padding-BLOCK, nie die Kurzform: `.admin-seite` sitzt auf DEMSELBEN Element wie
   `.behaelter` (`<div class="behaelter admin-seite">`, alle 42 Masken). Die Kurzform
   `padding: 26px 0 48px` setzt auch padding-inline — und weil komponenten über basis
   liegt, löschte sie das seitliche Behälter-Polster: der Inhalt klebte im GANZEN
   Adminbereich an der Nav-Kante, unter 1000 px sogar an der Fensterkante (0 px, PO-Fund
   2026-08-01). Dieselbe Falle steckte in .admin-nav-innen und .fuss-kanaele. */
.admin-seite{display:flex;flex-direction:column;gap:20px;padding-block:26px 48px}
.admin-titel{font-size:clamp(24px,2.6vw,34px)}
.admin-unter{font:400 13.5px/1.6 "Instrument Sans",sans-serif;color:var(--text-3);max-width:720px}
/* Masken-Einleitung unter dem H1 (PO-Test 2026-07-18): JEDE Menüseite beschreibt
   Funktion + Funktionsweise. */
.admin-intro{font:400 15px/1.6 "Instrument Sans",sans-serif;color:var(--text-2);max-width:780px}
.admin-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.admin-kachel{background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--radius-l);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
a.admin-kachel:hover{border-color:var(--marke)}
.kachel-zahl{font:600 26px "Instrument Sans",sans-serif;color:var(--text)}
.kachel-text{font:400 13px/1.4 "Instrument Sans",sans-serif;color:var(--text-3)}
.admin-tabelle{width:100%;border-collapse:collapse;background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--radius-l);overflow:hidden}
.admin-tabelle th{text-align:left;padding:12px 16px;font:600 12.5px/1.4 "Instrument Sans",sans-serif;color:var(--text-3);border-bottom:1px solid var(--linie)}
.admin-tabelle td{padding:14px 16px;vertical-align:top;border-top:1px solid var(--linie);font:400 14px/1.55 "Instrument Sans",sans-serif}
.admin-teil{display:block;font:400 12px/1.5 ui-monospace,Menlo,monospace;color:var(--text-3)}
/* Aufklapper der Admin-Masken (Vorschau · zweistufige Löschung · Anlege-Formulare) — seit
   R-1 hier statt in seiten/admin-listen.css: neun Template-Nutzer, und die Beitrags-Liste
   lädt seither eine eigene Seiten-CSS. Werte unverändert übernommen. */
.admin-vorschau summary,.admin-loeschen summary{cursor:pointer;font:500 14px "Instrument Sans",sans-serif;
  color:var(--text-2);padding:8px 0}
.admin-vorschau[open]{padding-bottom:16px}
.admin-loeschen{margin-top:4px;margin-bottom:32px}
.status{display:inline-block;padding:3px 9px;border-radius:var(--radius-voll);font:600 11.5px "Instrument Sans",sans-serif}
.status--da{background:var(--flaeche-4);color:var(--marke-still)}
.status--fehlt{background:var(--flaeche-3);color:var(--text-3)}
/* Abschnitts-Karte `.karte.admin-block` der Admin-Masken — 35+ Nutzer. */
.admin-block{padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px}
.admin-block .klein-titel{margin-bottom:4px}
.admin-block .admin-form{margin-bottom:0}
@media(max-width:560px){.admin-block{padding:16px 16px 18px}}
/* [R19] Abschnitts-Gruppen + Gefahren-Zone — die Gefahr-Gruppe steht IMMER als
   LETZTE Gruppe der Maske (DESIGN-SYSTEM §6). */
.admin-gruppe{background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--radius-l);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.admin-gruppe>h2{font:600 12px "Instrument Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.admin-gruppe--gefahr{border-color:var(--fehler);background:var(--fehler-tint)}
.admin-gruppe--gefahr>h2{color:var(--fehler)}
.admin-zeilen{display:flex;flex-direction:column}
.admin-zeilen>*{border-top:1px solid var(--linie);padding:12px 0}
.admin-zeilen>*:first-child{border-top:0;padding-top:0}
.admin-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.admin-form--block{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.admin-form textarea{width:100%;border:1px solid var(--linie-stark);border-radius:var(--radius-m);padding:10px 12px;font:400 13px/1.6 "Instrument Sans",sans-serif;resize:vertical}
.admin-form select,.admin-form input[type=file]{font:400 12.5px "Instrument Sans",sans-serif}
.admin-check{display:inline-flex;align-items:center;gap:5px;font:500 12.5px "Instrument Sans",sans-serif;color:var(--text-2)}
.admin-blaettern{display:flex;align-items:center;justify-content:center;gap:18px;font:400 13.5px "Instrument Sans",sans-serif;color:var(--text-3)}
/* [R20] Tabellen unter 900px: beschriftete Karten-Stapel statt Quetsch-Spalten
   (Labels aus data-spalte am <td>); nie horizontales Scrollen als einziger Weg. */
@media(max-width:900px){
  .admin-tabelle,.admin-tabelle tbody,.admin-tabelle tr,.admin-tabelle td{display:block;width:100%}
  .admin-tabelle thead{display:none}
  .admin-tabelle td{border:0;padding:4px 16px}
  .admin-tabelle tr{border-top:1px solid var(--linie);padding:10px 0}
  .admin-tabelle td[data-spalte]::before{content:attr(data-spalte) ": ";font:600 11px "Instrument Sans",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
  .admin-zeile{border-top:1px solid var(--linie);padding:6px 0}
}
}

/* ── Admin-Navigation (R0 · V1-A7-Split · Klapp-Gruppen PO 2026-07-25) —
      partials/admin-nav.php auf allen Masken ──────────────────────────────── */
@layer komponenten {
.admin-nav{background:var(--flaeche-2);border-bottom:1px solid var(--linie)}
/* padding-BLOCK (s. .admin-seite): auch dieses Element trägt `.behaelter` — mit der
   Kurzform klebte die Navigation unter 1000 px an der Fensterkante. Der Desktop-Zweig
   unten setzt bewusst eigene 18 px seitlich und überschreibt damit weiterhin. */
.admin-nav-innen{display:flex;flex-wrap:wrap;gap:22px;padding-block:12px}
/* Gruppen einklappbar: <details>/<summary> — bewusst display:BLOCK (flex auf
   details ist auf älterem WebKit fragil). */
.admin-nav-gruppe{display:block}
.admin-nav-titel{font:600 11px/1 "Instrument Sans",sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;
  justify-content:space-between;gap:8px;cursor:pointer;list-style:none;
  -webkit-user-select:none;user-select:none}
.admin-nav-titel::-webkit-details-marker{display:none}
/* margin-right 2px: die ROTIERTE Box ragt sonst ~1px über die Containerkante hinaus —
   Transforms zählen in die Scroll-Overflow-Fläche (1px-Überlauf @375). */
.admin-nav-titel::after{content:"";width:6px;height:6px;flex:none;opacity:.65;margin-right:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .15s ease}
.admin-nav-gruppe:not([open]) .admin-nav-titel::after{transform:rotate(-45deg)}
.admin-nav-liste{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:4px 0 0;padding:0}
.admin-nav-icon{display:inline-flex;flex:none;color:var(--text-3)}
.admin-nav-link{display:inline-flex;align-items:center;gap:9px;padding:5px 10px;border-radius:var(--radius-voll);
  font:500 14px "Instrument Sans",sans-serif;color:var(--text-2);text-decoration:none}
.admin-nav-link:hover{background:var(--flaeche);color:var(--text)}
/* ⚠ --marke-auf statt #fff: die aktive Pille liegt auf der Markenfläche, und die ist in
   DUNKEL ein helles Lime — weisse Schrift ergäbe dort 2,0:1. Bis zur Farbinsel-Auflösung
   war das verdeckt, weil der Admin die Fläche mit einem eigenen dunklen Grün überschrieb. */
.admin-nav-link--aktiv{background:var(--marke);color:var(--marke-auf)}
.admin-nav-link--aktiv .admin-nav-icon{color:var(--marke-auf)}
.admin-nav-link:hover .admin-nav-icon{color:var(--text)}
.admin-nav-link--aktiv:hover{background:var(--marke);color:var(--marke-auf)}
/* ≤640: Titel BLEIBEN sichtbar — sie sind das Klapp-Bedienelement. */
@media(max-width:640px){.admin-nav-innen{gap:14px}}
@media(min-width:1000px){
  .admin-rumpf{display:flex;align-items:flex-start}
  /* top/max-height rechnen mit der klebenden Kopfzeile (--kopf-hoehe, E7 promotet). */
  .admin-rumpf .admin-nav{flex:none;width:232px;position:sticky;top:var(--kopf-hoehe);
    max-height:calc(100vh - var(--kopf-hoehe));overflow-y:auto;
    border-bottom:0;border-right:1px solid var(--linie)}
  .admin-rumpf .admin-nav-innen{flex-direction:column;flex-wrap:nowrap;gap:26px;
    padding:20px 18px 28px;max-width:none}
  .admin-rumpf .admin-nav-gruppe + .admin-nav-gruppe{border-top:1px solid var(--linie);padding-top:18px}
  .admin-rumpf .admin-nav-titel{font:600 12.5px/1 "Instrument Sans",sans-serif;letter-spacing:.08em;color:var(--marke)}
  .admin-rumpf .admin-nav-liste{flex-direction:column;gap:2px;padding-left:8px;margin-top:7px}
  .admin-rumpf .admin-nav-link{display:flex;border-radius:9px;padding:8px 12px}
  .admin-rumpf main{flex:1;min-width:0}
}
}

/* ── Admin-Akzente — Rest des früheren «Admin-Dunkel-Korrekturen»-Blocks.
      ⚑ FARBINSEL SCHRITT 2 (2026-08-02): von 17 Regeln sind DREI übrig. Die
      übrigen 14 waren keine Korrekturen, sondern Übersetzungen zwischen zwei
      Farbwelten — sie setzten exakt das, was die Basisregeln ohnehin sagen,
      nur in Alt-Vokabular:
        .admin-nav / .admin-kachel / .admin-tabelle / .admin-gruppe → --karte,
        die Basis sagt --flaeche-2 · .status--da/-fehlt → --gruen-tint/--grau-tint,
        die Basis sagt --flaeche-4/--flaeche-3 · .paginierung → --gruen, die Basis
        sagt --marke · .eingabe → --feld/--rahmen, die Basis sagt --flaeche-2 +
        --linie · .listenzeile:hover → #2A2F34, die Basis sagt --flaeche-3.
      Die zwei knopf--gefahr-Zeilen und die zeile-hidden-marke sind entfallen,
      weil --fehler-auf das Problem jetzt an der Wurzel löst (tokens.css) statt
      es je Baustein im Admin nachzubessern.
      Was bleibt, ist bewusste ADMIN-OPTIK: markenfarbene Akzente dort, wo das
      Publikum stilles Grau sieht. ──────────────────────────────────────────── */
@layer komponenten {
@media(min-width:1000px){.admin-modus .admin-rumpf .admin-nav-titel{color:var(--marke)}}
.admin-modus a.admin-kachel:hover{border-color:var(--marke)}
.admin-modus .ueberzeile{color:var(--marke)}
}

/* ── Cookie-Banner (P1; Prominenz-Ausbau PO 2026-07-25) — z-Stapel: Kopfzeile <
      SCHLEIER 66 < Banner 67 < Mini-Video 69 < Leiste 70. Der Schleier ist rein
      OPTISCH (pointer-events:none, PO «nur optisch», kein Cookie-Wall); er hängt
      an derselben Render-Bedingung wie der Banner (Partial) und verschwindet mit
      ihm über den pjax-Swap bzw. die Voll-Navigation. ───────────────────────── */
@layer komponenten {
.cookie-schleier{position:fixed;inset:0;z-index:66;background:rgba(20,26,23,.45);
  pointer-events:none;animation:schleier-ein .45s ease-out}
/* Schwebende KARTE statt randbündigem Balken: zentriert über margin-inline:auto
   (BEWUSST kein translateX-Zentrieren — das Einschweben animiert transform). */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:96px;margin-inline:auto;max-width:1140px;
  z-index:67;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:18px clamp(18px,3vw,28px);background:var(--flaeche-2);border:var(--linie-breit) solid var(--linie);
  border-radius:var(--radius-l);box-shadow:var(--schatten-2);
  animation:banner-hoch .45s cubic-bezier(.22,.61,.36,1)}
/* KEIN fill-mode both (LESSONS: hält sonst dauerhaft eine Transform im Effekt-Stack). */
@keyframes schleier-ein{from{opacity:0}to{opacity:1}}
/* Start VOLLSTÄNDIG unter der Viewport-Kante (100% + bottom-Abstand + Schatten-Luft) —
   der Wert MUSS dem bottom oben folgen, sonst lugt die Karte beim Start herein. */
@keyframes banner-hoch{from{transform:translateY(calc(100% + 112px))}to{transform:none}}
@media(prefers-reduced-motion:reduce){.cookie-schleier,.cookie-banner{animation:none}}
/* flex-basis 100% = der Textblock belegt eine EIGENE Zeile: die Knöpfe bleiben (wie vor
   dem Links-Umbau) darunter zentriert, und die Links zentrieren sich über die volle
   Kartenbreite statt nur über einen schmalen Absatz. */
.cookie-banner-text{margin:0;flex:1 1 100%;font:400 14px/1.5 var(--schrift-text);color:var(--text-2);text-align:center}
.cookie-banner-text a{color:var(--marke-still)}
/* Die zwei Rechts-Links stehen auf EIGENER, mittiger Zeile (PO 2026-07-29) — als
   span-Block IM Absatz, damit der Satz-Zusammenhang für Screenreader erhalten bleibt. */
.cookie-banner-links{display:block;margin-top:8px}
.cookie-banner-form{margin:0;display:flex;gap:10px;flex-wrap:wrap;flex:none}
/* Leisten-Rücksicht: die gerenderte Leiste heisst seit E2 .spielleiste
   (partials/player-leiste.php) — der frühere .player-leiste-Selektor zielte ins Leere. */
body:has(.spielleiste:not([hidden])) .cookie-banner{bottom:calc(var(--leiste-hoehe) + 72px)}
}

/* ── Upload-Overlay (op-upload.js) — z 80: ÜBER allem inkl. Leiste (70); der
      Schleier BLOCKIERT bewusst, solange der Upload läuft. ──────────────────── */
@layer komponenten {
.upload-schleier{position:fixed;inset:0;z-index:80;background:rgba(20,26,23,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:schleier-ein .2s ease-out}
.upload-karte{background:var(--flaeche-2);border:var(--linie-breit) solid var(--linie);border-radius:var(--radius-l);
  box-shadow:var(--schatten-2);padding:26px 30px;width:min(440px,100%);
  display:flex;flex-direction:column;gap:14px;text-align:center}
.upload-titel{margin:0;font:600 17px "Instrument Sans",sans-serif;color:var(--text)}
.upload-balken{height:8px;border-radius:999px;background:var(--flaeche);overflow:hidden}
.upload-balken-lauf{display:block;height:100%;width:0;border-radius:999px;background:var(--marke);
  transition:width .15s linear}
.upload-schleier--ok .upload-balken-lauf{width:100%}
.upload-schleier--ok .upload-titel{color:var(--marke-still)}
.upload-schleier--fehler .upload-balken{display:none}
.upload-schleier--fehler .upload-titel{color:var(--fehler)}
.upload-text{margin:0;font:400 14px/1.5 "Instrument Sans",sans-serif;color:var(--text-2);overflow-wrap:anywhere}
.upload-schliessen{align-self:center}
@media(prefers-reduced-motion:reduce){.upload-schleier{animation:none}}
}

/* ── E8-NACHZUG (Gegenproben-Funde 2026-07-29): chip--klein war ein LEBENDER
      Alt-Baustein (bibel-stelle.php auf S06/Suche/Bibel + listenzeile), dessen
      Regel der E7-Brücken-Abbau fälschlich als tot klassifizierte — hier die
      wert-übersetzte Fassung (Alt: 6/14px · 12.5px · --text-mittel; 13px wegen
      der Fehlerbauarten-Mindestgrenze). ─────────────────────────────────────── */
@layer komponenten {
.chip--klein{padding:6px 14px;font-size:13px;color:var(--text-2)}
/* ⚠ Nachzug 2026-08-01: `.chip--klein` und die `.thema-slot--*`-Regeln (~200 Zeilen weiter
   oben) sind BEIDE 0-1-0 — die spätere gewinnt, und das ist diese hier. Damit verlor JEDER
   Themen-Chip seine mitgelieferte Textfarbe und erbte die Chip-Grundfarbe: im dunklen Admin
   hellgrauer Text auf heller Themenfläche, gemessen 1,5:1 (PO-Fund «helle Pillen»). Die
   Themenfarbe muss gewinnen — `--ts-fg` liefert jede Slot-Regel bzw. der Inline-Stil der
   Eigen-Farbe (op_thema_eigen_stil), und beide sind als AA-Paar konstruiert. */
[class*="thema-slot--"]{color:var(--ts-fg)}
}

/* ── z-Stapel-Vertrag der Leiste (aus dem E2-Nachtrag der Brücke): Kopf 65 <
      Schleier 66 < Banner 67 < Mini 69 < LEISTE 70 — «hell bleiben nur Banner +
      laufende Fernbedienung». Die byte-identische Abgabe oben sagt 45 und kennt
      den Schleier nicht; die Korrektur wohnt als SEITE-Schicht ganz am Ende. ── */
@layer seite {
  .spielleiste { z-index: 70; }
}

/* ── Abschnitts-Rhythmus MITWACHSEND (PO-Entscheid 2026-07-29) ────────────────
      Die Abgabe oben (Zeile ~505) setzt `.abschnitt { margin-block-start: var(--raum-8) }`
      = FESTE 64 px — auf JEDER Breite gleich. Gemessen war das der eigentliche
      Schwachpunkt: 64 px bei 360 px Bildschirmbreite sind anteilig etwas ganz
      anderes als bei 1280 px (mobile Startseite 6.347 px ≈ 8 Bildschirmhöhen).
      Deshalb wächst der Abstand jetzt mit der Breite: ~40 px auf dem Handy,
      ~51 px bei 1280, volle 64 px erst ab ~1600 px — die Design-Absicht bleibt
      dort erhalten, wo sie gedacht war.
      ⚠ Der Wert steht HIER und nicht oben: der Abgabe-Teil der Datei (Zeilen
      1–1484) ist BYTE-IDENTISCH zur Design-Rückgabe und wird nie editiert;
      Abweichungen wohnen ausschliesslich in diesem Ergänzungsblock. Gleiche
      Spezifität, gleiche Layer, später in der Datei ⇒ diese Regel gewinnt.
      ⚠ Reichweite: `.abschnitt` nutzen 15 Templates (Beitragsseite, Suche,
      Statistik, Sprecher-Profil, Playlists, Spenden, Bibel …) — der Rhythmus
      ist bewusst app-weit EINER, nicht je Seite verschieden. ──────────────── */
@layer komponenten {
.abschnitt { margin-block-start: clamp(2.5rem, 4vw, 4rem); }
}

/* ── Werk-Kacheln: Meta-Zeile an die UNTERKANTE (PO 2026-07-29) ───────────────
      Die Kachel-BOXEN sind längst gleich hoch (Grid streckt sie; gemessen 4×292 px,
      Unterkanten-Spannweite 0). Ragged war der SICHTBARE Text: je nach Titellänge
      (1–3 Zeilen) endete die Meta-Zeile bis zu 45 px höher, und unter der kürzesten
      Karte wirkte die Lücke zum nächsten Abschnitt entsprechend grösser.
      `margin-block-start: auto` schiebt die Meta-Zeile ans Kachel-Ende ⇒ alle vier
      Meta-Blöcke stehen auf EINER Linie (Spannweite 0), Titel bleiben VOLLSTÄNDIG.
      Bewusst NICHT per `-webkit-line-clamp` gelöst: das hätte lange Titel
      abgeschnitten («… wahre Sci-Fi…») — Inhaltsverlust für etwas Bauhöhe.
      ⚠ Wirkt auf BEIDE Nutzer der Kachel: Startseite «Neu in den Predigten» und
      das /predigten-Raster (partials/werkkachel.php).
      ⚠ Steht hier statt bei der Abgabe-Regel (~Zeile 581): der Teil 1–1484 ist
      byte-identisch zur Design-Rückgabe und wird nie editiert. ──────────────── */
@layer komponenten {
.werkkachel__meta { margin-block-start: auto; }
}

/* ── Teil-Navigation der Wiedergabe-Leiste (E8, PO 2026-07-29) ────────────────
      Am ersten bzw. letzten Teil bleiben die beiden Knöpfe STEHEN und werden
      ausgegraut (PO-Entscheid F2) — sie auszublenden liesse die Leistenbreite
      bei jedem Teil-Wechsel springen und nähme den Hinweis «hier ist die Grenze».
      `disabled` ist dabei der echte Zustand, nicht nur die Optik: Tastatur und
      Screenreader übernehmen ihn, und teilSprung() läuft am Rand ohnehin leer.
      ⚠ Die SICHTBARKEIT (gibt es überhaupt etwas zu schalten?) steuert
      op-player.js übers `hidden`-Attribut — dafür zieht das Netz am Dateiende;
      hier steht NUR der Rand-Zustand. ──────────────────────────────────────── */
@layer komponenten {
.spielleiste .ikon-knopf[disabled] { opacity: .38; cursor: default; }
.spielleiste .ikon-knopf[disabled]:hover { background: none; color: var(--text-2); }
}

/* ── [hidden]-Zwilling für den Medien-Reset (BUGFIX 2026-07-29) ───────────────
      `basis.css` setzt seit E1 (Abgabe-Fassung) `img, svg, video {display:block}`.
      Diese AUTOREN-Regel sticht die UA-Regel `[hidden]{display:none}` aus — ein
      `<video hidden>` blieb dadurch SICHTBAR. Folge auf Mehrteiler-Videoseiten:
      unter jeder Karte ab Teil 2 stand ein leeres, quellenloses Abspielfenster
      ÜBER der Poster-Bühne (Variante A lädt die Quelle erst beim Abspiel-Wunsch,
      NACHTRAG-SAFARI-VIDEO-LAST) — drei gestapelte 485-px-Blöcke je Karte.
      Der Zwilling spiegelt die Reset-Selektoren EXAKT; @layer komponenten liegt
      nach @layer basis und gewinnt damit ohne !important.
      ⚠ LESSONS-Klasse «hidden-vs-display»: sie schlug hier NICHT über eine neue
      Klasse zu, sondern über einen RESET, der nachträglich Elemente erfasste,
      deren Sichtbarkeit am `hidden`-Attribut hängt. Wer den Reset erweitert,
      erweitert diese Zeile mit. ─────────────────────────────────────────────── */
/* ── OPv5-Wiedergabeleiste (PO 2026-07-30): Kurzhinweis am Symbol — VERBATIM aus der
      OPv5-Abgabe (docs/konzept/OPv5/prototyp/css/komponenten.css §Kurzhinweis). Der Block
      steht dort IN der Abgabe-Datei; unser Abgabe-Teil oben ist die ÄLTERE eingefrorene
      Generation (uebergabe-claude-design-4/EXTRAS) und bleibt byte-identisch — deshalb
      wohnt er HIER. Nur Erklärung für die Maus, die verbindliche Beschriftung bleibt das
      aria-label; reines CSS, kein Skript, kein title-Attribut. ───────────────────────── */
@layer komponenten {
  [data-tipp] { position: relative; }
  [data-tipp]::after {
    content: attr(data-tipp);
    position: absolute;
    inset-block-end: calc(100% + var(--raum-2));
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 60;
    inline-size: max-content;
    max-inline-size: 15rem;
    padding: var(--raum-2) var(--raum-3);
    border-radius: var(--radius-s);
    background: var(--flaeche-tief);
    color: var(--auf-tief);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    line-height: 1.35;
    text-align: center;
    text-wrap: pretty;
    box-shadow: var(--schatten-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 110ms ease, visibility 110ms;
  }
  [data-tipp]:hover::after,
  [data-tipp]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 320ms;
  }
  /* Am rechten Rand der Leiste würde die Blase hinausragen */
  [data-tipp-lage="rechts"]::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
    translate: none;
    text-align: start;
  }
  /* Touch kennt kein Hover — dort bleibt es beim aria-label */
  @media (hover: none) {
    [data-tipp]::after { content: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-tipp]::after { transition: none; }
  }
}

/* ═══ OP-ERGÄNZUNG (2026-07-30): VIDEO-BÜHNE VARIANTE 2a ═══════════════════════════════
   Quelle: docs/konzept/PROMPT-Wiedergabebühne_Videos.md + Bildvorlage 2a-bedienleiste.png
   (neue Design-Iteration NACH der eingefrorenen OPv5-Abgabe — es existiert KEIN
   byte-identischer Abgabe-Teil zum Diffen). Drei Bänder je S06-Video-Karte:
   Kopf (Titel voll + Sprecher) · Bühne (unverändert) · Medienleiste (Pille · Formwahl ·
   Dauer · Kreis-Werkzeuge). Abweichungen vom Prompt, je am Ort begründet:
   .weiterhoeren-pille statt .weiterhoeren (die Alt-Pille hat Bestands-Nutzer: Audio-Karte
   + Playlist-Bühne — deren Optik bleibt) · Kopf/Leiste wohnen IN der .video-karte (die
   Karte liefert Rahmen/Radius/overflow — keine eigenen Borders/End-Radien) · Leisten-Grund
   --flaeche statt --flaeche-2 (die Bildvorlage zeigt das EINGESENKTE Band; 7. Nutzer der
   Eingesenkt-Rolle, GF50-Liste) · Kopf-Titel --txt-t4 statt --txt-t3 (die Prompt-Masse
   galten dem Seiten-h1 des Ein-Bühnen-Prototyps; die Bildvorlage zeigt je KARTE ~21 px).
   ⚠ MUSS VOR dem [hidden]-Netz am Dateiende stehen (gleiche Spezifität — sonst stäche
   display:inline-flex der Pille das Netz aus). */
@layer komponenten {
  /* Kopf über der Bühne — Titel bricht um, wird NIE gekürzt (Abnahme-Punkt 1). */
  .video-karte .beitragskopf { display: grid; gap: var(--raum-1); padding: var(--raum-3) var(--raum-4); }
  .beitragskopf__titel {
    font-size: var(--txt-t4);
    font-weight: var(--gewicht-fett);
    line-height: var(--zeile-titel);
    letter-spacing: var(--sperrung-titel);
    text-wrap: pretty;
  }
  .beitragskopf__sprecher { color: var(--text-3); font-size: var(--txt-klein); }

  /* Medienleiste unter der Bühne. */
  .medienleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--raum-3);
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche);
  }

  /* 1 · Weiterhören/Abspielen — die EINZIGE gefüllte Fläche der Zeile (Abnahme-Punkt 3).
     46 px == Formwahl-Kante: Pille und Segment bilden EINE Unterkante (der Kern von 2a). */
  .weiterhoeren-pille {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--raum-3);
    block-size: 2.875rem;              /* 46 px */
    padding-inline: var(--raum-3) var(--raum-5);
    border: 0;
    border-radius: var(--radius-voll);
    background: var(--marke);
    color: var(--marke-auf);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .weiterhoeren-pille:hover { background: var(--marke-still); color: var(--marke-auf); }
  /* Zwilling trotz Netz: die Weiterhören-Form STARTET hidden (JS enthüllt) — Gürtel + Hose. */
  .weiterhoeren-pille[hidden] { display: none; }
  /* PO 2026-08-07 (Option A): die KONSUMIERTE Pille geht WEICH — Breite/Deckkraft auf 0,
     hidden folgt erst nach dem Übergang (weiterhoerenBinden). Zusammen mit der neuen
     Reihenfolge (Formwahl VOR der Pille, player.php) rückt nichts Bleibendes nach — es
     schliesst sich nur die Lücke. max-inline-size deckt die längste Fassung (Ring +
     «Weiterhören ab h:mm:ss» + «noch N Min») mit Reserve. */
  .weiterhoeren-pille { max-inline-size: 30rem; overflow: hidden; transition: max-inline-size 0.22s ease, opacity 0.22s ease, padding 0.22s ease, gap 0.22s ease; }
  .weiterhoeren-pille--geht { max-inline-size: 0; opacity: 0; padding-inline: 0; gap: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .weiterhoeren-pille { transition: none; } }
  .weiterhoeren-pille--start { padding-inline: var(--raum-4) var(--raum-5); }
  .weiterhoeren-pille--start svg { fill: currentColor; stroke: none; inline-size: 1rem; block-size: 1rem; flex: none; }
  .weiterhoeren__ring { inline-size: 1.625rem; block-size: 1.625rem; flex: none; }
  .weiterhoeren__bahn { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 2.6; }
  .weiterhoeren__anteil {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    /* Umfang bei r=11 → 69.115. --anteil ist eine ZAHL ohne Einheit (0–100), gesetzt als
       Inline-Custom-Property am Erzeuger (das autorisierte --wert-Muster der v5-Abgabe) —
       CSS kann nicht durch eine Prozentzahl teilen, deshalb NICHT --wert: 41%. */
    stroke-dasharray: calc(69.115 * var(--anteil, 0) / 100) 69.115;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
  .weiterhoeren__pfeil { fill: currentColor; stroke: none; }
  .weiterhoeren__text { display: grid; }
  .weiterhoeren__zeile { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); line-height: 1.15; }
  .weiterhoeren__rest { font-size: 0.75rem; font-weight: var(--gewicht-mittel); line-height: 1.15; opacity: 0.85; }

  /* 2 · Formwahl — bestehendes Segment, auf die 46-px-Kante gebracht. Feste block-size
     statt der Prompt-Rechnung «3+40+3»: das Bestands-Segment trägt einen 1-px-Rahmen,
     der die Addition auf 48 px höbe (Erstlauf-Fund der Abnahme-Messung v2). */
  .medienleiste__formwahl { flex: none; block-size: 2.875rem; padding-block: 0; padding-inline: 0.1875rem; align-items: center; }
  .medienleiste__formwahl .segment__wahl { min-block-size: 2.5rem; }
  /* Abnahme-Punkt 3 + Bildvorlage: die PILLE ist die EINZIGE gefüllte Fläche der Zeile —
     der aktive Segment-Chip ist hier HELL (Bestands-Segment füllt aria-pressed mit --marke;
     das wäre die zweite laute Fläche). Nur in der Medienleiste übersteuert. */
  .medienleiste__formwahl .segment__wahl[aria-pressed="true"] {
    background: var(--flaeche-2);
    color: var(--text);
  }

  /* 4 · Dauer — Mono, still, hinter der Dehnfuge; «Gesamt» nur beim Einteiler (F4). */
  .medienleiste__dauer {
    margin-inline-start: auto;
    flex: none;
    color: var(--text-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    white-space: nowrap;
  }

  /* 5 · Werkzeuge — die drei 44-px-Kreise (Bestands-Klasse teilwerk__knopf) hinter der
     Haarlinie; weisse Fläche + stille Kontur nach Bildvorlage (der Bestands-Kreis ist
     grundlos mit --linie-stark). */
  .medienleiste__werkzeuge {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--raum-2);
    padding-inline-start: var(--raum-4);
    border-inline-start: var(--linie-breit) solid var(--linie);
  }
  .medienleiste__werkzeuge .teilwerk__knopf {
    background: var(--flaeche-2);
    border-color: var(--linie);
    color: var(--text-2);
  }
  .medienleiste__werkzeuge .teilwerk__knopf:hover {
    background: var(--flaeche-2);
    border-color: var(--linie-stark);
    color: var(--text);
  }
  /* CC-Kreis der Video-Medienleiste (PO-Fund 2026-09-04: kein Untertitel-Schalter am sichtbaren
     Video — der Leisten-CC erscheint erst nach dem Wegscrollen). Text-Kreis im Monospace-Duktus
     des Tonbühnen-CC; der AN-Zustand kommt als `steuer-knopf--cc-an` aus ccKnopfMalen und muss
     die 0-2-0-Grundregel + die :hover-Regel darüber schlagen (deshalb 0-3-0 / 0-4-0). Steht der
     Kreis ALLEIN in der Gruppe (Rückfall ohne Voll-Leiste), fällt die Gruppe samt Haarlinie weg,
     solange der Server-hidden-Knopf noch nicht vom JS enthüllt ist (kein JS ⇒ nie). */
  .medienleiste__werkzeuge .teilwerk__knopf--cc {
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    letter-spacing: 0.04em;
  }
  .medienleiste__werkzeuge .teilwerk__knopf--cc.steuer-knopf--cc-an,
  .medienleiste__werkzeuge .teilwerk__knopf--cc.steuer-knopf--cc-an:hover {
    background: var(--marke);
    border-color: var(--marke);
    color: var(--marke-auf);
  }
  .medienleiste__werkzeuge--nur-cc:not(:has([data-cc]:not([hidden]))) { display: none; }
  /* Aufklapper-Tafeln (Einbetten · Zur Playlist) klappen nach OBEN — die Karte hat
     overflow:hidden, unter der Leiste ist kein Raum (GF52-Muster video-fuss__meta). */
  .medienleiste__werkzeuge .einbett-menue,
  .medienleiste__werkzeuge .zur-playlist-menue {
    inset-block-start: auto; inset-block-end: calc(100% + 6px); top: auto;
  }

  /* Schmale Fenster (Prompt §4): Dauer + Haken + Werkzeuge rutschen GEMEINSAM in die
     zweite Zeile — nichts überlappt (Abnahme-Punkt 5). Der ::after-Umbruch ERZWINGT die
     Zeile: mit blossem order+wrap bliebe die Gast-Leiste («Abspielen» ist schmal) auch
     bei 960 px einzeilig und die Abnahme-Zusage «rutschen gemeinsam» wäre leer. */
  @media (max-width: 60rem) {
    .medienleiste::after { content: ""; order: 2; flex-basis: 100%; }
    .medienleiste__dauer { margin-inline-start: 0; order: 3; }
    .medienleiste .marker-haken, .medienleiste .datei-gehoert { order: 3; }
    .medienleiste__werkzeuge { order: 4; margin-inline-start: auto; border-inline-start: 0; padding-inline-start: 0; }
  }
  @media (max-width: 34rem) {
    .weiterhoeren-pille { inline-size: 100%; justify-content: center; }
    .medienleiste__formwahl { inline-size: 100%; display: inline-flex; }
    .medienleiste__formwahl .segment__wahl { flex: 1; }
  }

  /* Mini-Modus (Hoist an die klebende Leiste): Kopf + Medienleiste verschwinden —
     exakt die Rolle, die zuvor `.video-karte--mini .video-fuss` trug. */
  .video-karte--mini .beitragskopf,
  .video-karte--mini .medienleiste { display: none; }
}

/* ── OP-ERGÄNZUNG (2026-07-30): Menü-Effekt KOPF-NAV — ITERATION 2 (E8).
   Runde 1 tauschte die Abgabe-Effekte (Kopf Fläche ⇄ Fuss Unterstrich); die PO-Sicht
   verfeinerte den Kopf zur stillen Unterlinie (--linie-stark) in der GEOMETRIE der
   aria-current-Markierung — der Hover deutet an, was der Aktiv-Zustand mit der satten
   Marken-Linie voll zeigt. PO-Sichtprüfung 2026-08-01: «C ist super. So lassen.»
   ⚠ Der FUSSZEILEN-Teil dieses Blocks (13px / 1.625rem / Hover nur Farbwechsel) ist am
   2026-08-01 in den Block «FUSSZEILE dunkel in beiden Themes» am Dateiende gewandert
   und dort durch die Übergabe Uebergabe-Footer_v3 ERSETZT worden — Fusszeilen-Regeln
   wohnen ab jetzt an GENAU EINEM Ort, sonst überschreibt sich das Paar gegenseitig.
   Die Abgabe-Regeln (~98/~1288) bleiben unangetastet (Byte-Identität). */
@layer komponenten {
  .kopf__nav a:hover {
    background: none;
    color: var(--text);
    box-shadow: inset 0 -2px 0 var(--linie-stark);
    border-radius: var(--radius-s) var(--radius-s) 0 0;
  }
  /* Der aktive Eintrag behält auch unterm Hover die satte Marken-Linie. */
  .kopf__nav a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--marke); }
}

/* ── OP-ERGÄNZUNG (2026-07-31): LEINWAND-SYMBOL kräftiger — PO-Umentscheid gegen die Abgabe
   («das bisherige scheint mir doch etwas zu dezent», Bildvorlage aus dem V6-Prototyp).
   Ist war 36 px / Kontur 1,5 / opacity 0.8 ⇒ auf dem dunklen Verlauf ein blasser Grauton.
   Neu: 44 px · Kontur 1,9 · VOLLE Deckkraft — das Symbol benennt die Leitform des Werks und
   ist auf der bildlosen Kachel die einzige Auskunft darüber. Gilt SYSTEMWEIT (die Regel
   wohnt in komponenten: /predigten-Raster + Startseiten-Kacheln + jeder künftige Nutzer);
   die Listen-ZEILE zieht proportional mit (kleinere Fläche, gleiches Verhältnis).
   ⚠ Die Abgabe-Regeln (~565/~602) bleiben unangetastet — Byte-Identität. */
@layer komponenten {
  /* `color` MUSS die Stroke-Farbe spiegeln (PO 2026-08-06): das Play-Dreieck des
     Video-Symbols ist fill=currentColor — die Abgabe-Regel (~565) setzt nur `stroke`
     hell, color blieb geerbt-dunkel ⇒ heller TV-Rahmen mit DUNKLEM Dreieck
     (GF68-Klasse «stroke am SVG, fill folgt currentColor»). */
  .werkkachel__platz svg { inline-size: 2.75rem; block-size: 2.75rem; stroke-width: 1.9; opacity: 1; color: var(--auf-tief); }
  .werkzeile__bild svg { inline-size: 1.6rem; block-size: 1.6rem; stroke-width: 1.9; opacity: 0.95; color: var(--auf-tief); }
}

/* ── OP-ERGÄNZUNG (2026-07-31): PREDIGTEN ENTWURF D — geteilte Bausteine ─────────────────
   Quelle: docs/konzept/OP_predigten_V6 (PROMPT-Predigten-Seite §7-Verteil-Tabelle:
   Mehrfachwahl · Hörring · Merk-Stern · Zeilen-Punkte gehören nach komponenten — Suche
   und Themen brauchen das Steuerelement, Kachel/Zeile erscheinen auch auf Start/Konto/
   Sprecher-Detail). Navileiste/Suchtafel = seiten/predigten.css.
   ⚠ Ring + Stern sitzen auf der IMMER dunklen Bildfläche und tragen deshalb in BEIDEN
   Themes die festen Werte #abbb36/#12130f (Prompt §7: dieselbe Entscheidung wie die
   Cue-Pille des Spielers — var(--marke) wäre im Hell-Theme auf dem Verlauf zu kontrastarm;
   dokumentierte FRONTEND-DESIGN-Ausnahme, NICHT auf Tokens umstellen). */
@layer komponenten {
  /* Mehrfachwahl: <details>-Aufklapper mit Kästchen — öffnet IM Fluss, nicht schwebend
     (die Suchtafel klappt über overflow:hidden; Absolutes würde dort abgeschnitten). */
  .mehrfachwahl > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    background: var(--flaeche-3);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-s);
    color: var(--text); font-size: var(--txt-klein);
    list-style: none; cursor: pointer;
  }
  .mehrfachwahl > summary::-webkit-details-marker { display: none; }
  .mehrfachwahl > summary:hover { border-color: var(--linie-stark); }
  .mehrfachwahl__stand { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mehrfachwahl__stand[data-gewaehlt] { font-weight: var(--gewicht-fett); }
  .mehrfachwahl__pfeil {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-3);
    transition: transform 0.2s ease;
  }
  .mehrfachwahl[open] > summary .mehrfachwahl__pfeil { transform: rotate(90deg); color: var(--text); }
  .mehrfachwahl__tafel {
    margin-block-start: var(--raum-2);
    padding: var(--raum-3);
    max-block-size: 17rem; overflow-y: auto;
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-s);
  }
  .mehrfachwahl__suche { margin-block-end: var(--raum-3); }
  @media (prefers-reduced-motion: reduce) {
    .mehrfachwahl__pfeil { transition: none; }
  }

  /* Hörring (§5b) + Merk-Stern (§5c) auf der Kachel-Bildfläche; die Kachel ist der Anker.
     Der Wert kommt als style="--wert: 58%" (das autorisierte Balken-Muster). */
  .werkkachel { position: relative; }
  /* Masse seit PO 2026-08-07 ~15 % kleiner (Scheiben 36→30,4 px, Donut 24→20 px) —
     NUR die Optik: die 44-px-Tastfläche des Sterns kompensiert unten (::before). */
  .hoerring, .werkkachel .merk-form--kachel .stern-knopf {
    position: absolute;
    inset-block-start: var(--raum-3);
    z-index: 1;
    display: grid; place-items: center;
    inline-size: 1.9rem; block-size: 1.9rem;
    border-radius: 50%;
    background: rgb(17 24 20 / 0.62);
  }
  /* Ring RECHTS, links neben dem Stern (PO 2026-08-07): die linke Bild-Ecke gehört dem
     Empfehlungs-Band — es verdeckt den Ring damit nie mehr. Versatz = Rand + Sternbreite
     + Abstand; ohne Fortschritt (oder als Gast) steht der Stern allein an seiner
     Position — er springt nie. */
  .hoerring { inset-inline-end: calc(var(--raum-3) + 1.9rem + var(--raum-2)); }
  .hoerring__wert {
    inline-size: 1.25rem; block-size: 1.25rem;
    border-radius: 50%;
    background: conic-gradient(#abbb36 var(--wert, 0%), rgb(238 240 230 / 0.32) 0);
    /* Band seit PO 2026-08-07 FILIGRANER: ~30 % des Radius statt 40 % (Maske 67/70 statt
       57/60). Das Innenloch bleibt dadurch ≈ 14 px — der 12-px-Haken des Fertig-Zustands
       passt UNVERÄNDERT (layout.php op_hoerring_html, 12/9 je Fassung). */
    -webkit-mask: radial-gradient(closest-side, transparent 67%, #000 70%);
    mask: radial-gradient(closest-side, transparent 67%, #000 70%);
  }
  /* Fertig = voller Ring + Haken mittig (PO 2026-08-06; vorher voll eingefärbte Scheibe —
     das las sich als ZWEITES Objekt statt als Vollendung des Rings). Donut + Haken teilen
     die Grid-Zelle der Hülle (place-items zentriert beide); Farben == die des laufenden
     Rings — dieselben, bereits vermessenen Paare auf der dunklen Bildflächen-Scheibe. */
  .hoerring--fertig { --wert: 100%; }
  .hoerring--fertig > * { grid-area: 1 / 1; }
  .hoerring--fertig svg { fill: none; stroke: #abbb36; stroke-width: 2.5; }

  .werkkachel .merk-form--kachel { display: contents; } /* die Form ist unsichtbar, der KNOPF ankert */
  .werkkachel .merk-form--kachel .stern-knopf {
    inset-inline-end: var(--raum-3);
    appearance: none; border: 0; padding: 0;
    color: var(--auf-tief);
    cursor: pointer;
  }
  /* Unsichtbare 44-px-Tastfläche um den (seit PO 2026-08-07) 30-px-Knopf — die Rechnung
     statt eines Literals, damit sie jede Optik-Grösse überlebt (Abnahme §11 Punkt 10). */
  .stern-knopf::before { content: ""; position: absolute; inset: calc((1.9rem - var(--tastfeld)) / 2); border-radius: 50%; }
  .werkkachel .merk-form--kachel .stern-knopf:hover { background: rgb(17 24 20 / 0.82); }
  .stern-knopf svg { fill: none; stroke: currentColor; stroke-width: 1.75; }
  /* pressed im KACHEL-Scope (0-3-0 + Attribut) — die generische 0-2-0-Fassung verlöre
     gegen die Scope-Basisregel oben (Erstlauf-Fund d10: die Scheibe blieb dunkel). */
  .stern-knopf[aria-pressed="true"],
  .werkkachel .merk-form--kachel .stern-knopf[aria-pressed="true"] { background: #abbb36; color: #12130f; }
  .werkkachel .merk-form--kachel .stern-knopf[aria-pressed="true"]:hover { background: #c3d44a; }
  .stern-knopf[aria-pressed="true"] svg { fill: currentColor; }

  /* Der Ring in der Listenzeile — kleinere Fassung, gleiche Werte (§5b); Masse seit
     PO 2026-08-07 (28→24 px, Donut 18→16 px). inset-inline-end:auto neutralisiert die
     neue end-Position der Basis fuer den BILD-Kontext (Konto-Merkliste, s. u.). */
  .werkzeile__bild { position: relative; }
  /* T-1/T-2 Werk-Titelbild (PO 2026-08-07): das Zeilen-Bildfeld trägt jetzt auch ein echtes
     Bild. Die Kachel-Fassung (.werkkachel__bild img) steht seit der Abgabe weiter oben —
     das Gegenstück fehlte hier, weil die Zeile bis dahin nur ein Symbol kannte.
     object-fit: cover, weil das Feld 16:10 ist und das Bild 16:9 (kein Verzerren). */
  .werkzeile__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .hoerring--klein {
    inline-size: 1.5rem; block-size: 1.5rem;
    inset-block-start: 0.25rem; inset-inline-start: 0.25rem; inset-inline-end: auto;
  }
  .hoerring--klein .hoerring__wert { inline-size: 1rem; block-size: 1rem; }
  /* /predigten-Liste (PO 2026-08-07): der Ring wohnt im Aktionsbereich RECHTS — im Fluss
     links neben dem Merk-Stern (Markup templates/predigten.php); die Trägerscheibe reist
     MIT (dieselben vermessenen Farbpaare, PO: «sehr sinnvoll»). Die Konto-Merkliste
     behält die Bild-Fassung (kein Stern, kein Band ⇒ .werkzeile__bild-Kontext oben). */
  /* relative statt static (2026-08-10): im Fluss verhält sich beides identisch, aber der
     Ring ist seither Positions-Anker seiner data-tipp-Blase — mit static dockte die Blase
     am nächsten positionierten VORFAHREN an und stünde irgendwo in der Zeile. */
  .werkzeile__rand .hoerring--klein { position: relative; inset: auto; }

  /* ── Empfehlungs-Band (PO 2026-08-07 — kippt den E3-Entscheid «kein sichtbares
        Kennzeichen»): Schrägband über der linken oberen Ecke gepinnter Werke auf
        /predigten. Raster MIT Text «Empfehlung», Liste als kleines textloses Band auf
        dem Vorschaubild (Bedeutung dort: data-tipp + .nur-vorlesen). FARBE: das Band
        liegt auf der Cover-Fläche, die in BEIDEN Themes dunkel ist — dort gilt der helle
        Marken-Ton --fokus-halo mit dunkler Schrift (das Tonbühnen-Start-Muster, s. dessen
        ⚠-Kommentar; var(--marke) stünde im Hell-Theme dunkel-auf-dunkel — im Erstlauf-
        Screenshot gemessen, GF55-Klasse). KEINE neue Farbfamilie. Der WRAPPER bleibt
        UNGEDREHT (die data-tipp-Blase erbte sonst die Rotation) und clippt den gedrehten
        Streifen selbst — gedrehte Kästen zählen sonst in die Scroll-Überlauf-Fläche
        (GF33-Klasse «rotiertes Pseudo = Überlauf»). */
  /* ⚠ Der WRAPPER clippt seit PO 2026-08-23 NICHT mehr selbst: er ist der data-tipp-
     Träger, und overflow:hidden am Träger schnitt die EIGENE Blase ab (PO-Bug
     «Mouse-Over-Feld verschwindet hinter der Leinwand» — die Blase öffnet oberhalb der
     Band-Box). Das Streifen-Clipping übernimmt das Kind .empfehlungs-band__clip
     (Markup: partials/werkkachel.php + templates/predigten.php) — die GF33-Klasse
     «rotierter Kasten zählt in die Scroll-Überlauf-Fläche» bleibt gebannt, nur der
     Clipper wechselt das Element. Blasen-Lage: Block «TIPP-BLASEN» am Dateiende. */
  .empfehlungs-band {
    position: absolute;
    inset-block-start: 0; inset-inline-start: 0;
    inline-size: 5.25rem; block-size: 5.25rem;
    z-index: 2;
  }
  .empfehlungs-band__clip {
    position: absolute; inset: 0;
    overflow: hidden;
    /* Die obere linke Ecke folgt dem Bild-Radius: seit die Bild-Plätze nicht mehr
       clippen (Block «TIPP-BLASEN» unten), rundet der Streifen-Clipper selbst —
       sonst ragte er 1–2 px in die Radius-Aussparung der Ecke. */
    border-radius: calc(var(--radius-m) - var(--linie-breit)) 0 0 0;
  }
  .empfehlungs-band--klein .empfehlungs-band__clip { border-radius: var(--radius-s) 0 0 0; }
  .empfehlungs-band i {
    position: absolute;
    inset-block-start: 1.1rem; inset-inline-start: -2.2rem;
    inline-size: 8.75rem;
    transform: rotate(-45deg);
    text-align: center;
    font: 600 0.65rem/1.7 "Instrument Sans", sans-serif;
    font-style: normal;
    letter-spacing: 0.02em;
    /* Transparenz-Historie: die 80 % waren der Kompromiss, solange das Band ÜBER dem
       Hörring lag (PO-Korrektur 2026-08-07 früh). Seit der Ring rechts neben dem Stern
       wohnt (PO 2026-08-07 spät), verdeckt das Band nichts mehr — die weiche Optik
       bleibt als BEWUSSTER PO-Entscheid derselben Runde («mir gefällt die weiche Optik»).
       color-mix = das Bestandsmuster der AT-Karten-Tönung. */
    background: color-mix(in srgb, var(--fokus-halo) 80%, transparent);
    color: #12130f;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  }
  .empfehlungs-band--klein { inline-size: 1.9rem; block-size: 1.9rem; }
  .empfehlungs-band--klein i {
    inset-block-start: 0.55rem; inset-inline-start: -0.95rem;
    inline-size: 3.5rem; block-size: 0.5rem;
  }

  /* Punkte zwischen den Angaben der Listenzeile (§5a) — ::after am VORANGEHENDEN span,
     nie ::before: sonst beginnt eine umbrechende Zeile mit einem Punkt. */
  .werkzeile__meta { gap: var(--raum-1) var(--raum-2); }
  .werkzeile__meta span:not(:last-child)::after {
    content: "·";
    margin-inline-start: var(--raum-2);
    color: var(--text-3);
  }
}

/* ── OP-ERGÄNZUNG (2026-07-30): Pulldown-Theme-Segment KOMPAKT — PO-Umentscheid gegen
   die Abgabe (Prototyp trägt an dieser Stelle segment--gross: 44-px-Chips + 17-px-Schrift;
   die drei Chips sprengten die 17rem-Tafel und wirkten überdimensioniert — PO-Screenshot
   2026-07-30). Masse = das etablierte Kompakt-Muster der .formwahl (36-px-Chips,
   Etikett-Schrift); das Segment füllt die Tafel, die Chips dritteln sie gleichmässig.
   `segment--gross` ist damit app-weit markup-verwaist — die Definition bleibt im
   byte-identischen Abgabe-Teil liegen (dort wird NIE gelöscht). */
@layer komponenten {
  .pulldown__tafel .segment { inline-size: 100%; }
  .pulldown__tafel .segment__wahl {
    flex: 1 1 0;
    min-block-size: 2.25rem;
    padding-inline: var(--raum-2);
    font-size: var(--txt-etikett);
    gap: var(--raum-1);
  }
  .pulldown__tafel .segment__wahl svg { inline-size: 1rem; block-size: 1rem; }
}

@layer komponenten {
  /* === TONBÜHNE (PROMPT-Wiedergabebühne_Audio, PO 2026-07-31) =========================
     Beim Video liegt die Bedienung als dunkler Streifen über dem Bild — beim Ton gibt es
     kein Bild, also wird der Streifen zur ganzen Fläche. Gleiche Breite, gleiche Stimmung,
     etwa halbe Höhe; der gesprochene Satz steht mittig und gross.
     Die Bühne ist in BEIDEN Themes dunkel (Absicht, wie --flaeche-tief bei der
     Untertitel-Bühne) — deshalb feste rgb()-Werte auf --auf-tief statt Flächen-Tokens. */

  /* Bühne + Leiste sind EINE Karte: als lose Geschwister trennte sie der `gap` des
     Seiten-Rasters (24 px im Erstlauf gemessen) — die Leiste soll direkt anschliessen. */
  .tonkarte { display: grid; }
  /* hidden-Zwilling (LESSONS-Falle): im KETTEN-Modus (Playlists/Listen/Embeds, PO 2026-08-06)
     schaltet eintragAktivieren die Karte per hidden — diese Regel steht NACH dem
     [hidden]-Netz, ohne Zwilling gewönne das display:grid. */
  .tonkarte[hidden] { display: none; }

  .tonbuehne {
    display: grid;
    gap: var(--raum-4);
    padding: var(--raum-5) var(--raum-5) var(--raum-4);
    background: var(--verlauf-buehne);
    color: var(--auf-tief);
    border-radius: var(--radius-m);
  }
  /* Trägt die Seite die helle Leiste darunter, schliesst sie ohne doppelte Kante an. */
  .tonbuehne:has(+ .medienleiste) { border-end-start-radius: 0; border-end-end-radius: 0; }
  .tonbuehne + .medienleiste { border-start-start-radius: 0; border-start-end-radius: 0; }

  /* Ohne JS führt das native <audio controls>; op-player.js setzt `abspieler--bereit` und
     versteckt es dann (Regel im Bestandsblock oben) — die Bühne bedient ab da selbst. */
  .tonbuehne .op-media { inline-size: 100%; }

  /* Teil-Titel des Mehrteilers (op-player.js führt ihn beim Teil-Wechsel nach) — beim
     Einteiler steht er nicht hier, sondern im Beitragskopf. */
  .tonbuehne__teil {
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    color: rgb(238 240 230 / 0.85);
  }

  .tonbuehne__cue {
    min-block-size: 3.25rem;      /* Platz für zwei Zeilen — die Zeile hält ihre Höhe, sonst
                                     springt die Seite bei jeder Sprechpause */
    display: grid;
    place-items: center;
    text-align: center;
    font-size: var(--txt-gross);
    line-height: 1.35;
    text-wrap: pretty;
  }
  .tonbuehne__cue[hidden] { display: none; }   /* hidden-Zwilling (LESSONS-Falle) */
  .tonbuehne__cue > span { animation: cue-ein var(--dauer-normal) var(--kurve); }

  .tonbuehne__spur { display: flex; align-items: center; gap: var(--raum-5); }

  .tonbuehne__start {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border: 0;
    border-radius: var(--radius-voll);
    /* ⚠ NICHT var(--marke): die Bühne ist in BEIDEN Themes dunkel, --marke folgt aber dem
       Kontext — im Hell-Theme wäre das #5c6b3c auf #333c26, also fast unsichtbar (im
       Erstlauf-Screenshot gemessen). Auf dunkler Fläche gilt der helle Marken-Ton, den
       --fokus-halo in ALLEN Farbsätzen identisch trägt (#abbb36) — dieselbe Wahl wie beim
       CC-Knopf hier und beim Merk-Stern der Kacheln. */
    background: var(--fokus-halo);
    color: #12130f;
    cursor: pointer;
  }
  .tonbuehne__start:hover { background: #c3d44a; }
  .tonbuehne__start svg { inline-size: 1.5rem; block-size: 1.5rem; fill: currentColor; stroke: none; }
  /* Play/Pause: op-player.js toggelt `abspieler-knopf--pause` (Bestands-Vertrag). */
  .tonbuehne__start .symbol-play, .tonbuehne__start .symbol-pause { display: grid; place-items: center; }
  .tonbuehne__start .symbol-pause, .tonbuehne__start.abspieler-knopf--pause .symbol-play { display: none; }
  .tonbuehne__start.abspieler-knopf--pause .symbol-pause { display: grid; }

  .tonbuehne__weg { flex: 1; min-inline-size: 0; display: grid; gap: var(--raum-2); }

  .tonbuehne__zeiten {
    display: flex;
    justify-content: space-between;
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    color: rgb(238 240 230 / 0.8);
  }

  /* 3a · derselbe Balken wie überall, nur höher und auf dunklem Grund (PO-Entscheid F1:
     3a jetzt, die Wellenform-Fassung 3b folgt als eigener Schritt nach T31 — sie belegt
     dieselbe Stelle und dieselbe Höhe, der Wechsel ist eine Server-Weiche). */
  .balken--spur { block-size: 8px; background: rgb(238 240 230 / 0.25); cursor: pointer; }
  .balken--spur .balken__wert { background: var(--auf-tief); }
  .tonbuehne .fortschritt-griff { display: none; } /* v5: die Linie trägt den Zustand, kein Punkt */

  .tonbuehne__transport { display: flex; align-items: center; flex-wrap: wrap; gap: var(--raum-2); }

  .ton-knopf {
    display: grid;
    place-items: center;
    inline-size: var(--tastfeld);
    block-size: var(--tastfeld);
    border: var(--linie-breit) solid rgb(238 240 230 / 0.35);
    border-radius: var(--radius-voll);
    background: none;
    color: var(--auf-tief);
    cursor: pointer;
  }
  .ton-knopf:hover { background: rgb(238 240 230 / 0.14); }
  .ton-knopf[hidden] { display: none; }        /* hidden-Zwilling (LESSONS-Falle) */
  /* Der Download-Kreis der Ketten-Bühne (PO 2026-08-06) ist ein LINK — ohne die zwei Zeilen
     trüge er Unterstreichung und Link-Farbe statt der Knopf-Optik. */
  a.ton-knopf { text-decoration: none; color: var(--auf-tief); }
  /* Ausgegraut statt verschwunden: die Teil-Knöpfe der Bühne stehen dauerhaft (PO 2026-07-31)
     — wer am ersten Teil ist, soll sehen, dass es ein «zurück» GIBT. Kein :hover-Aufleuchten. */
  .ton-knopf:disabled { opacity: 0.38; cursor: default; }
  .ton-knopf:disabled:hover { background: none; }
  .ton-knopf svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; }

  .ton-knopf--text {
    inline-size: auto;
    min-inline-size: 3.5rem;
    padding-inline: var(--raum-3);
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    font-variant-numeric: tabular-nums;
  }

  /* Laut/Stumm: op-player.js toggelt `steuer-knopf--stumm` (Bestands-Vertrag); der Regler
     bleibt sichtbar daneben (PO-Entscheid F3 — der Prototyp kannte ihn nicht). */
  .tonbuehne .lautstaerke-gruppe { display: flex; align-items: center; gap: var(--raum-2); }
  .tonbuehne .steuer-knopf .symbol-laut, .tonbuehne .steuer-knopf .symbol-stumm { display: grid; place-items: center; }
  .tonbuehne .steuer-knopf .symbol-stumm, .tonbuehne .steuer-knopf--stumm .symbol-laut { display: none; }
  .tonbuehne .steuer-knopf--stumm .symbol-stumm { display: grid; }
  .tonbuehne .lautstaerke { inline-size: 5.5rem; accent-color: var(--auf-tief); }

  /* ⚠ Der Prompt drückt den CC-Knopf nach rechts. Auf der TONBÜHNE gilt der PO-Entscheid
     2026-07-31: rechts steht ALLEIN das Weiterhören-Angebot, alle Schaltflächen bleiben
     links — sonst konkurrieren zwei auto-Ränder um dieselbe Kante. */
  .tonbuehne .ton-knopf--cc { margin-inline-start: 0; }

  .ton-knopf--cc {
    margin-inline-start: auto;
    inline-size: auto;
    padding-inline: var(--raum-4);
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    letter-spacing: 0.04em;
  }
  .ton-knopf--cc[aria-pressed="true"] {
    background: var(--fokus-halo);
    border-color: var(--fokus-halo);
    color: #12130f;
  }

  /* Weiterhören-Angebot der MEHRTEILER-Bühne (op_player_weiterhoeren_html — der Knopf, den
     `weiterhoerenZeigen()` beim Teil-Wechsel nachführt). Beim Einteiler sitzt stattdessen
     die Pille mit Fortschrittsring in der hellen Leiste.
     ⚠ Es steht IN der Transport-Zeile (PO 2026-07-31: «auf dieselbe Höhe wie die anderen
     Schaltflächen») — `block-size` fix statt `min-block-size`, sonst wächst die Pille durch
     ihren Text über die 44-px-Kante der Nachbarknöpfe hinaus. */
  .tonbuehne .weiterhoeren {
    margin-inline-start: auto;   /* rechts bündig (PO 2026-07-31) — der Rest bleibt links */
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    block-size: var(--tastfeld);
    padding-inline: var(--raum-4);
    border: var(--linie-breit) solid rgb(238 240 230 / 0.35);
    border-radius: var(--radius-voll);
    background: none;
    color: var(--auf-tief);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    cursor: pointer;
  }
  .tonbuehne .weiterhoeren:hover { background: rgb(238 240 230 / 0.14); }
  .tonbuehne .weiterhoeren svg { inline-size: 0.85rem; block-size: 0.85rem; fill: currentColor; stroke: none; }
  .tonbuehne .weiterhoeren[hidden] { display: none; }  /* hidden-Zwilling (LESSONS-Falle) */

  @media (max-width: 48rem) {
    .tonbuehne { padding: var(--raum-4) var(--raum-4) var(--raum-3); }
    .tonbuehne__spur { gap: var(--raum-4); }
    .tonbuehne__start { inline-size: 3.5rem; block-size: 3.5rem; }
    .ton-knopf--cc { margin-inline-start: 0; }
  }
}

/* ═══ OP-ERGÄNZUNG (PO 2026-07-31): DER UNTERTITEL-SCHALTER WOHNT IN DER LEISTE ═══════════════
   Auch beim VIDEO. Vorher lag die Bedienung dort beim MediaElement-Knopf IM BILD — zwei Orte
   für dieselbe Funktion (beim Formwechsel Video⟷Nur-Audio sprang der Schalter sichtbar vom
   Bild in die Leiste), 32×40 px statt der 44er-Tastfläche, und im weggescrollten Mini-Video
   auf 320×180 px kaum zu treffen.
   ⚠ AUSSER IM VOLLBILD: dort ist das Vollbild-Element der `.mejs__container`, und die
   `position: fixed`-Leiste liegt NICHT darin (gemessen 2026-07-31: `fs.contains(leiste)` ist
   false) — sie wird also gar nicht gezeichnet. Ohne diese Ausnahme gäbe es im Vollbild keinen
   Untertitel-Schalter mehr.
   ⚠ Die Bedingung hängt am DOKUMENT, nicht am Container — die Engines wählen unterschiedliche
   Vollbild-Elemente (gemessen 2026-07-31): Chromium schaltet den `.mejs__container` in den
   Vollbild-Modus, **WebKit das `<video>` selbst** (natives Safari-Vollbild mit eigener
   Steuerung). Ein containerbezogenes `:not(:fullscreen)` liess den Knopf auf WebKit deshalb
   auch im Vollbild verschwinden.
   ⚠ Die Richtung des Selektors ist ebenfalls Absicht: ausgeblendet wird NUR über die
   `:not(:has(…))`-Bedingung. Kennt eine Engine `:has()` oder `:fullscreen` nicht, ist die
   Regel ungültig und der Vendor-Knopf bleibt sichtbar — der Fehler fällt damit auf die
   harmlose Seite (ein Knopf zu viel statt gar keiner). */
@layer komponenten {
  body:not(:has(:fullscreen)) .mejs__captions-button { display: none; }
}

/* ═══ OP-ERGÄNZUNG (PO 2026-07-31): ZWEIZEILIGE WIEDERGABE-LEISTE MOBIL ═══════════════════════
   Messbefund, der den Umbau trug: bei 360 px waren von 10 Bedienelementen nur DREI sichtbar
   (Pause · Titel-Link · Schliessen). Sieben gingen allein wegen der Breite verloren —
   Zeit-Zeile (die auch den SPRECHER trägt), Teil zurück/vor, ±10 s, Tempo, Lautstärke.
   Der Titel war dabei NIE gekappt (176 px von 328 px); «abgeschnitten» war die FUNKTION.

   Zeile 1: Play · Titel/Sprecher/Zeit · Schliessen — Zeile 2: der Transport.
   ⚠ Die Höhe kommt über das TOKEN `--leiste-hoehe`, nicht über eine feste Regel: daran hängen
   `body.leiste-an{padding-bottom}` UND der Cookie-Banner-Abstand. Ein Token, alles zieht mit —
   eine hart gesetzte min-block-size hier hätte den Seiten-Bodenabstand still falsch gelassen.

   PO-Entscheide 2026-07-31: Zeit mobil MIT REIN · **F3 vom 2026-07-29 GEKIPPT** (Teil-Navigation
   war mobil aus, «dort führt die Teilliste» — mit Zeile 2 ist der Platzgrund weg, und gerade
   beim Hören liegt die Teilliste weit oben) · EINE Umbruchgrenze für alles (zwei dicht
   beieinander liegende Grenzen erzeugen ein Zwischenstadium, das niemand testet — die
   34-rem-Regel `.spielleiste__zeit{display:none}` des Abgabe-Teils wird hier mit übersteuert).

   ⚠ GRENZE 62 rem, nicht 36 rem (PO-Entscheid «A» nach Nachmessung). Zuerst stand 36 rem, dann
   zeigte die Messung: die EINzeilige Leiste passt gar nicht bis dorthin. Sie bricht um und wird
   auf einem Video-Beitrag @600 px 171 px hoch, @700/@800 je 128 px, @900 px 85 px — erst ab
   ~1000 px sind es wieder 72 px (Audio ab 800 px). Zwei Ursachen: Video hat ACHT Steuerelemente
   statt sechs, und ab 48 rem kehrt im Formwahl-Segment die Beschriftung «Video»/«Audio» zurück
   und macht es breiter. Eine geordnete zweizeilige Leiste ist besser als eine, deren Höhe je
   nach Gerätebreite zwischen 72 und 171 px springt. */
@layer komponenten {
  @media (max-width: 62rem) {
    /* 7.5rem = 120 px gegen gemessene 115 px Ist-Höhe (Zeile 1 Titel+Zeit · Zeile 2 Knöpfe ·
       row-gap · Polster · safe-area). Der Puffer ist Absicht: das Token reserviert den
       Bodenabstand, und ein zu KNAPPER Wert verdeckt Seiteninhalt, ein zu grosser kostet nur
       unsichtbaren Scroll-Weg. Wer die Leistenhöhe ändert, misst sie nach — 7rem waren 3 px
       zu wenig (Erstmessung dieses Umbaus). */
    :root { --leiste-hoehe: 7.5rem; }

    .spielleiste__leiste {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas: "start text schliessen" "steuerung steuerung steuerung";
      align-items: center;
      row-gap: var(--raum-2);
      column-gap: var(--raum-3);
    }
    .spielleiste__start { grid-area: start; }
    .spielleiste__text { grid-area: text; }
    .spielleiste__schliessen { grid-area: schliessen; }
    .spielleiste__steuerung { grid-area: steuerung; justify-content: center; gap: var(--raum-2); }

    /* Zeit + Sprecher zurück (Abgabe blendet sie unter 34 rem aus — hier steht der Grund
       dagegen: sie ist mobil der EINZIGE Ort, an dem der Sprecher überhaupt erscheint).
       ⚠ EINZEILIG erzwungen: «0:00 / 1:39:42 · Henkel, Hartwig» brach bei 360 px auf zwei
       Zeilen um und machte die Leiste 137 statt 112 px hoch — das Token `--leiste-hoehe`
       hätte den Bodenabstand dann um 25 px zu knapp reserviert und die Leiste läge über dem
       Seitenende. Lieber der Name gekappt als eine Höhe, die niemand vorhersagen kann. */
    .spielleiste__zeit {
      display: block;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      /* 12 px statt --txt-etikett/13 px (PO 2026-08-04, F4): Plex Mono ist breit —
         «0:00 / 1:39:42 · » frisst bei 13 px ~130 px, und der Sprecher-Name fiel auf
         schmalen Handys der Ellipsis zum Opfer. 12 px geben ihm ~15 Zeichen Raum;
         Reserve-Stufe 11 px, falls die PO-Sicht lange Namen weiter gekappt zeigt. */
      font-size: 12px;
    }

    /* ⚠ HIER STAND «Variante B» (PO 2026-07-31): beim Runterscrollen glitt die ganze Leiste
       weg. ZURÜCKGENOMMEN nach dem PO-Sichttest (2026-08-01): «Sie sollte fixiert und
       sichtbar sein. Auch mobil. Es wirkt sonst irgendwie zu nervös.» Die Leiste steht jetzt
       auf JEDER Breite — kein transform, keine Zustandsklasse. Begründung + Wiederbelebungs-
       Warnung stehen bei der Fundstelle in op-player.js. */
  }

  /* Die zurückgeholten Knöpfe brauchen NUR die 36-rem-Grenze: erst dort blendet der
     Abgabe-Teil `.spielleiste .ikon-knopf--sekundaer` aus. Zwischen 36 und 62 rem sind sie
     ohnehin sichtbar — und in Zeile 2 ist dort Platz für den vollen Satz inklusive Tempo,
     Playlist und Bild-in-Bild. Die Regel hier deshalb bewusst NICHT auf 62 rem mitgezogen:
     ein `display`-Zwang auf breiteren Schirmen würde nur Bestandsverhalten übersteuern.
     Zurückgeholt wird NUR Transport, CC und Lautstärke — Tempo, Playlist-Aufklapper und PiP
     bleiben unter 36 rem weg (Einstellungen bzw. Nebenwege, kein Transport; jeder weitere
     Knopf drückt die Reihe bei 320 px über die Kante — nachgemessen). */
  @media (max-width: 36rem) {
    .spielleiste [data-teil-schritt].ikon-knopf--sekundaer,
    .spielleiste [data-springen].ikon-knopf--sekundaer,
    .spielleiste .leiste-mehr.ikon-knopf--sekundaer { display: inline-flex; }
    .spielleiste .leiste-mehr.ikon-knopf--sekundaer { position: relative; }
  }
  @media (prefers-reduced-motion: reduce) {
    .spielleiste { transition: none; }
  }
}

/* ═══ OP-ERGÄNZUNG (PO 2026-07-31): Details-Kachel — der Wert bleibt mobil NEBEN seinem Label ═══
   Die Abgabe stellt `.paare div` unter 34rem auf `column` (Zeile ~1355, byte-identischer
   Abgabe-Teil ⇒ ÜBERSTEUERN statt ändern; gleiche Spezifität, spätere Regel gewinnt im Layer).
   PO-Fund am Handy: Label und Wert standen dadurch untereinander — «Gesamtdauer» in einer,
   «6 Std 40 Min» in der nächsten Zeile. Gemessen war die Kachel bei 360 px aber **278 px**
   breit, das Paar passt bequem nebeneinander; der Umbruch kostete je Zeile eine Zeilenhöhe
   und riss zusammengehörige Angaben optisch auseinander.
   ⚠ Lange Werte (Serientitel, «Video · Audio · Dokument») dürfen weiter umbrechen — aber
   INNERHALB ihrer Spalte, nicht unter das Label: `dt` schrumpft nie (`flex: none`), `dd`
   darf (`min-inline-size: 0`, sonst verhindert die flex-Mindestbreite jeden Umbruch und die
   Zeile liefe über die Kachel hinaus). */
@layer komponenten {
  @media (max-width: 34rem) {
    .paare div { flex-direction: row; gap: var(--raum-4); }
    .paare dt { flex: none; }
    .paare dd { text-align: end; min-inline-size: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OP-ERGÄNZUNG (2026-08-01): FUSSZEILE — dunkel in BEIDEN Themes
   Quelle: docs/konzept/Uebergabe-Footer_v3/ (Claude-Design, PO-Auftrag). Der Block
   ist die VOLLSTÄNDIGE Fusszeile, damit er sich 1:1 gegen `fusszeile.css` der
   Übergabe diffen lässt — und damit Fusszeilen-Regeln an GENAU EINEM Ort wohnen.

   ⚠ ABWEICHUNG VOM ÜBERNAHMEWEG: Die Übergabe verlangt, den Abschnitt «=== Fusszeile»
   im Abgabe-Teil (~1256) zu ERSETZEN. Der ist byte-identisch zur Design-v5-Abgabe und
   wird seit E6 nicht mehr beschrieben — deshalb steht hier ein vollständiger Override
   am Dateiende (gleiche Spezifität, spätere Position gewinnt). Preis: jede
   Abgabe-Deklaration muss explizit überschrieben werden. Zwei Fallen daraus:
   (a) `.fuss__liste a:hover` MUSS `text-decoration: none` setzen — die Abgabe-Regel
       schaltet dort `underline` ein, und `::after` würde sie nicht ersetzen, sondern
       einen ZWEITEN Strich danebenlegen;
   (b) `.fuss__gitter` setzt hier bewusst KEIN unbedingtes `grid-template-columns` — die
       Spalten-Umbrüche bei 60rem/34rem stehen weiter oben in der Datei und würden von
       einer späteren Wiederholung ausgehebelt (vier Spalten bis hinunter auf 360 px).
       Die EINZIGE erlaubte Form ist media-gescoped: die Mobil-Zweispaltigkeit
       (PO 2026-08-04, am Block-Ende) übersteuert gezielt NUR den 34rem-Fall.

   Zwei PO-Entscheide weichen bewusst von der Übergabe ab (2026-08-01):
   · Zeilenhöhe **1.5rem == 24px** statt der vorgeschlagenen 1.375rem/22px. Mit `gap: 0`
     stehen die Links exakt eine Zeilenhöhe auseinander, also greift auch die
     Abstands-Ausnahme von WCAG 2.5.8 nicht — 22px wäre eine echte Unterschreitung der
     24-px-Mindestzielgrösse. Optisch sind die 2px nicht zu sehen.
   · Die Touch-Rückgabe bleibt die ODER-Liste aus GF53 statt `(pointer: coarse)` allein:
     fail-safe Richtung GRÖSSERE Fläche.

   Diese Fassung LÖST AB: GF53 (2rem-Zeilen) und den Fusszeilen-Teil von GF54
   (13px / 1.625rem / Hover nur Farbwechsel). Beide Entscheide sind vom PO über diese
   Übergabe zurückgenommen — die 13px waren `--txt-etikett`, eine Stufe, die nach §4.6
   den Versalien-Etiketten vorbehalten ist, und die Zielgruppe schliesst ältere Nutzer
   ein. Wächter: tools/messung-fusszeile.mjs.
   ═══════════════════════════════════════════════════════════════════════════════ */
@layer komponenten {

  /* Grundlage ist das themefeste Paar --flaeche-tief / --auf-tief (§3), das schon
     Untertitel-Bühne und Cue-Pille in BEIDEN Themes auf derselben Warm-Schwarz-Fläche
     hält — kein neuer Farbwert. Die Textstufen sind hier LOKAL fixiert: --text-2 und
     --text-3 kippen mit dem Theme und wären in HELL dunkelgrau auf Schwarz. Gleiches
     gilt für --fokus: in HELL ist der Ring #1a1813 und auf dieser Fläche unsichtbar.
     Kontraste in Klammern, gemessen gegen --fuss-grund (#111814). */
  .fuss {
    --fuss-grund: var(--flaeche-tief);
    --fuss-text: var(--auf-tief);   /* 16,0:1 */
    --fuss-link: #b9bdaf;           /*  9,0:1 */
    --fuss-still: #9a9e90;          /*  6,4:1 */
    --fuss-marke: #abbb36;          /*  9,8:1 */
    /* Rot der Admin-Marke: --fehler (#a03d2e) läge hier bei 2,8:1 — auf dieser Fläche
       unlesbar. Derselbe Ton, den der Admin-Anthrazit-Satz für Rot-auf-Dunkel führt. */
    --fuss-admin: #f0a292;          /*  8,8:1 */
    --fuss-linie: rgb(238 240 230 / 0.13);
    /* Eigener Grad: kleiner als --txt-klein (15px), aber NICHT --txt-etikett (13px). */
    --fuss-txt: 0.875rem;

    --fokus: #f0efe8;

    margin-block-start: var(--raum-7);
    padding-block: var(--raum-6);
    /* Oberkante: in HELL trennt schon der Helligkeitssprung, in DUNKEL liegt --flaeche
       fast auf --flaeche-tief (1,03:1) — ohne Kante gäbe es dort keine sichtbare Naht.
       --fuss-linie ist themefest und trägt sie. Nicht als überflüssig entfernen. */
    border-block-start: var(--linie-breit) solid var(--fuss-linie);
    background: var(--fuss-grund);
    color: var(--fuss-text);
    color-scheme: dark;
  }
  .fuss__gitter { gap: var(--raum-6) var(--raum-6); }
  /* PO 2026-08-07 (F1–F3): die Vierergruppe (Marke · Entdecken · Service · Rechtliches)
     steht als KOMPAKTER Block in der Seitenmitte — vorher klebte der Markenblock links
     und die 1fr-Spalten dehnten sich über die volle Breite. NUR die breite Lage (> 60rem
     = das Vier-Spalten-Raster des Abgabe-Teils); die 60rem-/34rem-Umbrüche und die mobile
     Variante A unten bleiben unberührt (F3). Innen bleibt alles linksbündig (F2).
     auto statt 1fr: 1fr-Spalten verteilen den Freiraum — zentrieren liesse sich da nichts. */
  @media (min-width: 60.0625rem) {
    .fuss__gitter {
      grid-template-columns: minmax(15rem, 22rem) repeat(3, minmax(9rem, auto));
      justify-content: center;
    }
  }
  .fuss__marke img { block-size: 2.25rem; inline-size: auto; margin-block-end: var(--raum-4); }
  /* Bildmarke MITTIG über dem Claim (PO 2026-09-06): der Innenblock schrumpft auf die Claim-Breite
     (.fuss__text 26ch), das Bild zentriert sich darin, die Texte bleiben linksbündig — .fuss__marke
     selbst behält die Spaltenbreite (der 360er-Wächter misst sie gegen das Gitter). */
  .fuss__marke-inhalt { inline-size: fit-content; }            /* BLOCK, kein Grid: die p-Ränder kollabieren weiter (f9-Höhe) */
  .fuss__marke-inhalt img { margin-inline: auto; }              /* das Bild ist display:block (basis.css) — auto-Ränder zentrieren */
  .fuss__text { color: var(--fuss-still); }
  .fuss__recht {
    margin-block-start: var(--raum-5);
    /* PO 2026-08-07: die Trennlinie über der ©-Zeile ist WEG (border + padding entfielen) —
       die Naht-OBERKANTE der Fusszeile (.fuss, border-block-start) ist eine andere Regel
       und bleibt. Messvertrag: messung-fusszeile f14 («eine Haarlinie»). */
    color: var(--fuss-still);
  }
  .fuss__titel { margin-block-end: var(--raum-3); color: var(--fuss-text); }

  /* Enger gesetzt: Zeilenabstand aus dem Raster genommen (gap 0), die Zeilenhöhe trägt
     den Rhythmus. `inline-flex` + `justify-self: start` schneiden das Element auf die
     Textbreite zu — sonst liefe die wachsende Linie über die ganze Spalte. */
  .fuss__liste { gap: 0; }
  .fuss__liste a {
    position: relative;
    display: inline-flex;
    justify-self: start;
    align-items: center;
    min-block-size: 1.5rem;
    color: var(--fuss-link);
    font-size: var(--fuss-txt);
    line-height: 1.25;
    text-decoration: none;
    transition:
      color var(--dauer-schnell) var(--kurve),
      transform var(--dauer-normal) var(--kurve);
  }
  /* Unterstreichung wächst von links — ersetzt das harte text-decoration der Abgabe.
     Liegt UNTER der Grundlinie, nicht auf ihr. */
  .fuss__liste a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0.2rem;
    block-size: 1px;
    background: var(--fuss-marke);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dauer-normal) var(--kurve);
  }
  .fuss__liste a:hover,
  .fuss__liste a:focus-visible {
    color: var(--fuss-text);
    text-decoration: none; /* Pflicht-Override, s. Falle (a) im Kopf */
    transform: translateX(3px);
  }
  .fuss__liste a:hover::after,
  .fuss__liste a:focus-visible::after { transform: scaleX(1); }

  /* Admin-only-Einstieg (PO-Regel 2026-08-01): erscheint hier NUR, wenn die Rubrik für die
     Öffentlichkeit abgeschaltet ist. Die allgemeine Regel `a.nur-admin{color:var(--fehler)}`
     hat dieselbe Spezifität wie `.fuss__liste a` und stünde FRÜHER in dieser Layer — sie
     verlöre. Deshalb der Ton hier explizit, mit dem fusszeilen-tauglichen Rot. */
  .fuss__liste a.nur-admin { color: var(--fuss-admin); }
  .fuss__liste a.nur-admin:hover,
  .fuss__liste a.nur-admin:focus-visible { color: var(--fuss-admin); }
  .fuss__liste a.nur-admin::after { background: var(--fuss-admin); }
  /* Der Text-Badge (.nur-admin-marke) ist seit PO 2026-08-10 entfallen — die Link-Färbung
     oben ist die Kennzeichnung; der Klartext lebt unsichtbar im Erzeuger (layout.php). */

  /* Touch-Lagen holen das volle Tastfeld zurück: kein Hover-Zeiger ODER grober Zeiger
     ODER schmales Gitter (<34rem, dieselbe Grenze wie .fuss__gitter). */
  @media (hover: none), (pointer: coarse), (max-width: 34rem) {
    .fuss__liste a { min-block-size: var(--tastfeld); }
  }
  /* Mobil ZWEISPALTIG (PO 2026-08-04, «Variante A»): einspaltig stapelten Markenblock +
     drei Link-Gruppen auf 1068 px Fusszeilen-Höhe (@360 gemessen) — zwei Gruppen
     nebeneinander holen ~300 px zurück, OHNE die 44-px-Tastflächen anzutasten (die
     Touch-Regel darüber bleibt der bewusste Entscheid vom 2026-08-01). Übersteuert NUR
     die 34rem-Einspaltigkeit des Abgabe-Teils (media-gescoped + später in der Datei =
     Kaskaden-Ordnung; ein UNbedingtes grid-template-columns hier wäre die im Block-Kopf
     dokumentierte Falle (b) — vier Spalten bis 360 px).
     ⚠ Der Markenblock spannt beide Spalten: als halbe Spalte bräche sein Fliesstext. */
  @media (max-width: 34rem) {
    .fuss__gitter { grid-template-columns: 1fr 1fr; gap: var(--raum-6) var(--raum-5); }
    .fuss__marke { grid-column: 1 / -1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fuss__liste a,
    .fuss__liste a::after { transition: none; }
    .fuss__liste a:hover,
    .fuss__liste a:focus-visible { transform: none; }
  }
}

/* ── OP-ERGÄNZUNG (2026-08-02): der Hörring AUF EINER FLÄCHE (S21 «Meine Statistik»,
   NACHTRAG-MEINE-STATISTIK §3 c). Der Bestands-Ring ist für die Lage ÜBER EINEM COVERBILD
   gebaut: absolut positioniert, dunkle Halbtransparenz als Scheibe, und die feste Lime-
   Literale #abbb36/#12130f. Auf der weissen Karte der Konto-Seite ergäbe das gerechnet
   2,1:1 und unterschritte die 3:1 für grafische Objekte (WCAG 1.4.11).
   Der Modifier stellt den Ring in den Fluss und zieht Bogen/Haken auf die THEME-Tokens —
   die Bildvariante bleibt unangetastet (zweiter Nutzer ⇒ komponenten, E6-Regel). */
@layer komponenten {
  .hoerring--auf-flaeche {
    position: static;
    background: var(--flaeche-3);
  }
  .hoerring--auf-flaeche .hoerring__wert {
    background: conic-gradient(var(--marke) var(--wert, 0%), var(--marker-track) 0);
  }
  /* Fertig auf der Karte (PO 2026-08-06, voller Ring + Haken): Grundfläche bleibt
     --flaeche-3, Ring-Donut (erbt oben) + Haken in var(--marke) — dasselbe Farbpaar
     wie der laufende Ring dieser Fassung, keine neue Kombination. */
  .hoerring--auf-flaeche.hoerring--fertig svg { stroke: var(--marke); }
}

@layer komponenten {
img[hidden], svg[hidden], video[hidden] { display: none; }

/* ── SCHIENE ZIEHBAR (PO 2026-08-03) — Trefferzone + Zug-Zustand der Abspiel-Schienen.
   Gemessen vor dem Bau: die Leisten-Schiene war 3 px Optik UND 3 px TREFFERFLÄCHE (WCAG
   2.5.8 verlangt 24), direkt darüber liegt SEITENINHALT (Fussnav) — ein verfehlter Tipp
   klickte einen Link. Die Optik bleibt die schlanke v5-Oberkante; die ZONE ist ein
   unsichtbares ::before, asymmetrisch: wenig nach oben (Seiteninhalt!), mehr nach unten
   in die Leisten-Polsterung. ⚠ Nach unten begrenzt die KNOPFZEILE der Leiste — vor jedem
   Vergrössern das Trefferband UND die Knopf-Integrität messen (messung-leiste-v5 v13).
   `data-zieht` setzt op-player.js (schienenZiehen) während des Zugs; touch-action:none
   setzt DERSELBE Code am Element (Verhalten, kein Aussehen — sonst scrollt der Finger-Zug). */
.spielleiste__schiene.fortschritt { transition: block-size .12s ease; }
.spielleiste__schiene.fortschritt::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -8px;
  inset-block-end: -13px;   /* 8 + 3 + 13 = 24 px Trefferband */
}
@media (pointer: coarse) {
  /* ⚠ Mobil (zweizeilige Leiste) liegen nur 7,3 px zwischen Spur-Unterkante und dem
     Play-Knopf (gemessen @390) — eine tiefere Zone STIEHLT dem Knopf die Oberkante
     (real passiert im Erstlauf dieser Regel: -19px ⇒ Tipp auf den Knopfrand suchte).
     Deshalb weicht die Finger-Zone nach OBEN aus: dort liegt nur die Cue-Zeile bzw.
     der Seitenrand — nichts Bedienbares der Leiste. */
  .spielleiste__schiene.fortschritt::before {
    inset-block-start: -15px;
    inset-block-end: -6px;  /* 15 + 3 + 6 = 24 px; unter der Spur bleibt 1,3 px Luft zum Knopf */
  }
}
/* Beim Zeigen, Fokussieren und Ziehen wächst die Linie nach unten (Oberkante fix) und der
   Griff erscheint — er existiert seit dem OPv5-Bau, wurde aber nie enthüllt (das `hidden`
   im Partial ist mit diesem Block gefallen). ⚠ NUR die Leiste: die Tonbühne bleibt per
   v5-Entscheid grifflos («die Linie trägt den Zustand, kein Punkt», Regel weiter oben). */
.spielleiste__schiene.fortschritt:hover,
.spielleiste__schiene.fortschritt:focus-visible,
.spielleiste__schiene.fortschritt[data-zieht] { block-size: 6px; }
.spielleiste__schiene .fortschritt-griff {
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;     /* der Zug gehört der Schiene — der Punkt ist reine Anzeige */
}
.spielleiste__schiene:hover .fortschritt-griff,
.spielleiste__schiene:focus-visible .fortschritt-griff,
.spielleiste__schiene[data-zieht] .fortschritt-griff { opacity: 1; }
/* Tonbühnen-Spur (8 px): dieselbe Trefferzonen-Kur, aber NICHT per ::before — die Spur
   trägt `overflow: hidden` (runde Wert-Ecken), und das clippt das eigene Pseudo-Element
   auch fürs HIT-TESTING (gemessen: Band blieb 9 px trotz korrekt gerechnetem ::before).
   Stattdessen TRANSPARENTE BORDER: die Border-Box zählt zur Trefferfläche und wird von
   overflow nie geclippt; margin-block kompensiert die Höhe (kein Layout-Sprung),
   background-clip hält die Optik bei 8 px. Nachbarn sind unkritisch (oben Bühnenfläche,
   unten Zeitlabels) — die Zone darf symmetrisch sein. */
.balken--spur {
  position: relative;
  /* ⚠ box-sizing ist app-weit border-box: die Border zählt IN die block-size. Ohne die
     mitgerechnete Höhe frässe die 22-px-Border die 8-px-Spur auf NULL sichtbare Höhe
     (gemessen: padding-box 0, die Spur war weg). */
  block-size: 30px;                      /* 11 + 8 + 11 = 30 px Trefferband */
  border-block: 11px solid transparent;
  margin-block: -11px;
  background-clip: padding-box;
}
@media (pointer: coarse) {
  .balken--spur {
    block-size: 32px;                    /* 12 + 8 + 12 = 32 px für Finger */
    border-block-width: 12px;
    margin-block: -12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spielleiste__schiene.fortschritt,
  .spielleiste__schiene .fortschritt-griff { transition: none; }
}

/* Icon-Chip (PO 2026-08-05): 44-px-Quadrat mit getöntem Grund — Komponente seit dem ZWEITEN
   Nutzer (Vision-Kacheln + Kontakt-Seitenkarten; die Vision-Klassen sind REDAKTIONS-Vertrag
   im Seed-HTML von rechtstext 'vision' und bleiben deshalb als Gruppen-Selektor hier — EIN
   Regel-Ort, kein Duplikat). Tönungen: Grün fürs Anliegen, Neutral fürs Sachliche, der warme
   Ton fürs Zugewandte; color-mix statt Literal ⇒ kippt mit dem Theme (beide Farbsätze). */
.ikon-chip, .vision-chip {
  display: inline-grid; place-items: center;
  inline-size: var(--tastfeld); block-size: var(--tastfeld);
  border-radius: var(--radius-m);
  background: var(--flaeche-4);
  color: var(--text-2);
}
.ikon-chip--gruen, .vision-chip--gruen {
  background: color-mix(in oklab, var(--marke) 14%, var(--flaeche-2));
  color: var(--marke);
}
.ikon-chip--gold, .vision-chip--gold {
  background: color-mix(in oklab, var(--akzent-warm) 18%, var(--flaeche-2));
  color: var(--akzent-warm);
}

/* WebKit/Safari-Doppelrahmen (PO 2026-08-07, iPad-Befund): Safari malt auf Text-
   Eingabefeldern seine NATIVE Umrandung/Innenschatten-Deko ZUSAETZLICH zum CSS-Rahmen —
   am auffaelligsten bei type=search (dort erzwingt Safari eine Eigen-Optik, die border/
   radius des Autors teils ueberstimmt). appearance:none uebergibt die Darstellung
   vollstaendig ans CSS; Chromium rendert unveraendert (Optik kam dort schon immer aus
   unseren Regeln). ⚠ Selects tragen den Reset BEWUSST NICHT pauschal — appearance:none
   naehme ihnen den nativen Aufklapp-Pfeil (select.eingabe im Abgabe-Teil bringt einen
   eigenen als background-image mit, .feld-Selects nicht). Checkboxen/Radios/Range
   bleiben ebenfalls nativ (der .lautstaerke-Slider setzt seinen Reset selbst). */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="url"], input[type="number"], textarea {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* NETZ gegen die ganze Fehlerklasse: `hidden` bedeutet IMMER unsichtbar. Die Falle
   schlug am 2026-07-29 gleich DREIMAL zu (quellenloses <video> über der Poster-Bühne ·
   `.spielleiste__formwahl` als sichtbarer Video/Audio-Umschalter OHNE gekoppelte
   Tonspur), und im Bestand stehen bereits ZEHN einzeln nachgezogene Zwillinge —
   das ist der Beleg, dass Einzelpflaster die Klasse nicht schliessen.
   Steht bewusst am DATEIENDE: gleiche Spezifität wie eine Klassen-Regel, also
   gewinnt sie über alle früheren komponenten-Regeln. ⚠ Grenze: `@layer seiten` liegt
   danach — eine Seiten-Regel mit `display` auf einem hidden-Element sticht sie weiter
   aus; dort gilt der Zwillings-Reflex unverändert. */
[hidden] { display: none; }

  /* ── WERK-VORSCHAUBILD in Listen, Zeilen und Karten (PO 2026-08-08) ──────────────────
     Die fuenf Plaetze waren als BILD-Flaechen gebaut, lange bevor es ein Bild gab:
     aspect-ratio, Radius und getoenter Grund stehen je Ort schon - nur der Inhalt war
     immer ein Symbol. Deshalb genuegt EINE gemeinsame Fuell-Regel; die Groesse bleibt
     dort, wo sie hingehoert (je Ort bzw. Seiten-Schicht).
     ⚠ `object-fit: cover` ist Pflicht: die Ablage ist 16:9, die Plaetze sind 16:10 -
       ohne cover verzerrt das Bild statt minimal zu beschneiden.
     ⚠ `overflow: hidden` gehoert an den PLATZ, sonst ragt das Bild ueber dessen Radien
       hinaus (`.werkzeile__bild` hatte es schon, die anderen nicht).
     ⚠ AUSNAHME seit PO 2026-08-23: `.werkzeile__bild` clippt NICHT mehr — es traegt das
       Empfehlungs-Band mit data-tipp-Blase, und der Container-Schnitt frass die Blase
       (Block «TIPP-BLASEN» am Dateiende; das img rundet dort selbst). */
  .fortsetzen__bild, .neuigkeit__bild, .aehnlich__bild { overflow: hidden; }
  .werkzeile__bild > img, .fortsetzen__bild > img, .neuigkeit__bild > img,
  .aehnlich__bild > img, .zeile-symbol > img {
    inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
  }
  /* Die Widerspruch-/Gemeinde-Zeile traegt sonst einen KREIS mit Rahmen - mit Bild wird
     daraus dieselbe 16:10-Flaeche wie in den uebrigen Listen (der Fortschritts-Marker
     liegt weiterhin darueber und behaelt seine Ecke). */
  .zeile-symbol:has(> img) {
    inline-size: 3.75rem; block-size: auto; aspect-ratio: 16 / 10;
    border-radius: var(--radius-s); border-color: transparent; overflow: hidden;
    background: var(--verlauf-bild);
  }
}

/* Die Kopf-Pille «Geben» (vormals «Spenden») ist ENTFERNT (PO 2026-08-11, Stunden nach
   ihrer Umbenennung/Verkleinerung — Historie im CHANGELOG). Ihr Klapp-CSS-Block ist mit
   ihr gefallen; die zwei .kopf__spenden-Regeln im BYTE-IDENTISCHEN Abgabe-Teil oben
   (white-space · 34rem-display:none) bleiben bewusst als inerte Waisen stehen. */

/* ── OP-ERGÄNZUNG (PO 2026-08-13): ☰-MENÜ DEZENTER — Zeilen-Optik 36 px ──────────────────
   Der Abgabe-Teil oben (~Z. 65) setzt je Menü-Link min-block-size: var(--tastfeld); der
   gap ist bereits minimal (raum-1) — kompakter wird die Tafel nur über die Zeilenhöhe.
   Hausregel (GF69/GF77): komprimiert wird die OPTIK, nie die Zielgrösse — die unsichtbare
   44-px-Tastzone liefert das ::before als RECHNUNG (Muster .stern-knopf oben), damit sie
   jede künftige Optik-Grösse überlebt. ⚠ Benachbarte Zonen kacheln den 4-px-gap lückenlos;
   im Überlapp gewinnt der SPÄTERE Link (Zeichenreihenfolge) — zwischen gleichartigen
   Menü-Links unkritisch. Betrifft NUR das ☰-Menü; die Pulldown-Liste bleibt bei 44. */
@layer komponenten {
  .menue__tafel a {
    position: relative;
    min-block-size: 2.25rem; /* Optik 36 px — die Tastzone bleibt var(--tastfeld) */
  }
  .menue__tafel a::before {
    content: "";
    position: absolute;
    inset-block: calc((2.25rem - var(--tastfeld)) / 2);
    inset-inline: 0;
    border-radius: var(--radius-s);
  }
}

/* ── OP-ERGÄNZUNG (PO 2026-08-17): BAUSTEIN-LEISTE — kompakte Werkzeug-Knöpfe über
   Admin-Textfeldern (HTML-Editor + FAQ-Marker-Knopf = zweiter Nutzer ⇒ Umzug aus
   seiten/admin-inhalt.css). Bewusst unter der 44er-Tastzone — der Adminbereich ist
   Desktop (F5-Entscheid der Redaktions-Konzeptrunde), die Leiste ist eine
   Werkzeugzeile, kein Navigationsziel. */
@layer komponenten {
  .baustein-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); margin-block-end: var(--raum-2); }
  .baustein-leiste .knopf { min-block-size: 2rem; padding-block: 0.25rem; padding-inline: var(--raum-2); font-size: 0.8rem; }
}

/* ── OP-ERGÄNZUNG (PO 2026-08-19): THEMEN-MARKER — Themenfarben-Raute + Text ─────────────
   PO-Entscheid V3 (Entscheidungsvorlage «Themen-Marker»), Zeichen-UMENTSCHEID noch am
   selben Tag: statt des 8-px-Farbpunkts trägt der Marker das RAUTE-Zeichen «#» in der
   Themenfarbe («das passt besser») — Tag-typisch eng vorm Wort. Themen stehen an
   Beiträgen als METAINFORMATION statt als gefüllte radius-voll-Pille. Reichweite:
   S06-Randkachel «Themen» + partials/listenzeile (Gemeinde-/Fragen-Listen). BEWUSST
   NICHT: die Admin-Farbvorschau (A25/Detail — dort IST die Fläche der Inhalt, bleibt
   .chip-Pille) und die Bibelstellen-.stelle («nicht anfassen», PO). Farbquelle bleibt
   der EINE Erzeuger op_thema_farb_deko (module/themen.php): die Eigen-Farbe trägt
   --ts-fuss im style-Attribut (dunkler Familienton, AA gegen helle Flächen — GF38),
   Slot-Klassen liefern --ts-fg; farblose Themen fallen auf --marke. Die Raute kommt als
   ::before-CONTENT des <i>-Trägers (Templates unangetastet; ohne CSS degradiert der
   Marker zum blossen Wort) — ⚠ font-style:normal ist PFLICHT, das UA-Stylesheet setzt
   <i> kursiv (beim flächigen Punkt war das unsichtbar). Schriftgrad --txt-etikett
   (13 px = Fehlerbauarten-Mindestgrenze, s. chip--klein-Nachzug oben) — bewusst KEINE
   Klein-Variante.
   ⚠ Die thema-slot--*-Klassen setzen background/color für die ADMIN-Pille — am Marker
   neutralisiert das die [class*=]-Regel unten per HÖHERER Spezifität (0,2,0 schlägt
   0,1,0), nie über die Positions-Wette (LESSONS «gleiche Spezifität + später»).
   ⚠ Dunkel-Zweig: der Redaktionston ist theme-fest (GF38 «Farbe wirkt 1:1») und wäre
   als Akzent auf dunklem Grund unsichtbar (#225b87 auf #1b1d17 ≈ 1,8:1) — color-mix
   hellt ihn dort mit --text auf (Tonbühnen-Klasse: theme-feste Werte brauchen je Fläche
   ihre Ableitung); die Selektoren spiegeln die tokens.css-Farbsatz-Weiche
   (data-theme="dunkel" + system×prefers). */
@layer komponenten {
  .thema-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-block-size: 1.25rem;
    color: var(--text-2);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    text-decoration: none;
  }
  /* 44er-Tastzone als RECHNUNG (Muster .stern-knopf/☰-Menü oben); benachbarte Zonen
     kacheln den Zeilenabstand — im Überlapp gewinnt der spätere Link, zwischen
     gleichartigen Themen-Links unkritisch (GF88-Regel). */
  .thema-marker::before {
    content: "";
    position: absolute;
    inset-block: calc((1.25rem - var(--tastfeld)) / 2);
    inset-inline: -4px;
  }
  .thema-marker > i {
    flex: none;
    font-style: normal;
    color: var(--ts-fuss, var(--ts-fg, var(--marke)));
  }
  .thema-marker > i::before { content: "#"; }
  .thema-marker:hover { color: var(--text); }
  .thema-marker[class*="thema-slot--"] { background: none; color: var(--text-2); }
  .thema-marker[class*="thema-slot--"]:hover { color: var(--text); }
  /* Träger-Zeile der Marker in Randkacheln (S06 «Themen» + seit PO 2026-09-05 die Sprecher-Seite —
     zweiter Nutzer ⇒ aus seiten/beitrag-detail.css hierher): horizontal 18px Wort-Trennung
     (Textlinks ohne eigene Kante brauchen mehr Luft als Flächen), vertikal 10px — die 44er-
     Tastzonen kacheln den Abstand (GF88-Regel oben). ⚠ flex-wrap ist Vertrag des
     bibel-stelle-Partials (.bibel-stelle[open] nimmt flex-basis:100%, E7-Block). */
  .rand-chips { display: flex; flex-wrap: wrap; gap: 10px 18px; }
  [data-theme="dunkel"] .thema-marker > i {
    color: color-mix(in oklab, var(--ts-fuss, var(--ts-fg, var(--marke))) 55%, var(--text));
  }
  @media (prefers-color-scheme: dark) {
    [data-theme="system"] .thema-marker > i {
      color: color-mix(in oklab, var(--ts-fuss, var(--ts-fg, var(--marke))) 55%, var(--text));
    }
  }
}

/* ═══ OP-ERGÄNZUNG (2026-08-23): ZITAT-BEREICH auf den Abspiel-Schienen (NACHTRAG-ZITATE §8) ═══
   Das helle Band zeigt den Ausschnitt «von–bis» auf der Tonbühnen-Spur UND der Leisten-Schiene.
   Die Prozentwerte setzt op-player.js (bereichBandSetzen) als Custom Properties AM ELEMENT —
   das darf ein Skript, ein Template nicht (FRONTEND-DESIGN: kein Inline-Style aus PHP). Ohne JS
   kein Band (reines Enhancement; Anfang/Ende stehen in der Seite als Text).
   ⚠ Kind-Pseudo ::after, NICHT ::before: das ::before der Leisten-Schiene IST die Trefferzone
   (Block «Schiene ziehbar») — ein zweites Pseudo dort zerstörte sie. Auf der Tonbühne liegt das
   Band in der padding-box (die transparente Trefferzonen-Border bleibt frei). Beide Schienen
   sind position:relative (Griff/Trefferzone). Theme-fest: die Tonbühne ist in beiden Themes
   dunkel (--fokus-halo-Ton), die Leiste nimmt die Marke.
   Muss VOR den Rot-Blöcken stehen — der Rot-Anker bleibt letzter Block (GF86 c). */
@layer komponenten {
  .fortschritt.hat-bereich::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--bereich-von, 0%);
    inline-size: calc(var(--bereich-bis, 0%) - var(--bereich-von, 0%));
    background: rgb(171 187 54 / 0.38);
    border-radius: inherit;
    pointer-events: none;
  }
  .spielleiste__schiene.fortschritt.hat-bereich::after {
    background: color-mix(in srgb, var(--marke) 35%, transparent);
  }
}

/* ═══ OP-ERGÄNZUNG (2026-08-23): ZITAT-KACHEL + ZITATE-STREIFEN (NACHTRAG-ZITATE Z-2/Z-3) ═══
   Die Zitat-Kachel ist eine werkkachel mit Modifier --zitat: Play-Kreis mittig über dem Bild
   (der Klick spielt den Bereich auf der Zitat-Seite) + Dauer-Pille = LÄNGE des Ausschnitts (Q8).
   Drei Nutzer (Rubrik /zitate · S06-Block · Startseiten-Streifen) ⇒ komponenten-Schicht.
   Der Streifen (§9): horizontal scrollbarer Streifen mit scroll-snap — ohne JS per Finger/
   Trackpad, mit JS zwei Pfeil-Knöpfe (op-ui «zitatstreifen», scrollBy um eine Kachelbreite).
   Kein Auto-Scroll, kein Inline-Player (Startseite bleibt player- und cookie-frei, Q3).
   Muss VOR den Rot-Blöcken stehen — der Rot-Anker bleibt letzter Block (GF86 c). */
@layer komponenten {
  .werkkachel--zitat .werkkachel__bild { position: relative; }
  .zitatkachel__play {
    position: absolute; inset: 0; margin: auto;
    inline-size: 2.75rem; block-size: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-voll);
    background: color-mix(in srgb, var(--flaeche-tief) 72%, transparent);
    color: var(--auf-tief);
    transition: transform var(--dauer-schnell) var(--kurve), background var(--dauer-schnell) var(--kurve);
  }
  .zitatkachel__play svg { inline-size: 1.1rem; block-size: 1.1rem; margin-inline-start: 2px; }
  .werkkachel--zitat > a:hover .zitatkachel__play,
  .werkkachel--zitat > a:focus-visible .zitatkachel__play { transform: scale(1.08); background: var(--marke); color: var(--marke-auf); }
  .zitatkachel__form { display: inline-flex; color: var(--auf-tief); }
  .zitatkachel__form svg { inline-size: .9rem; block-size: .9rem; }
  .werkkachel--zitat .werkkachel__dauer {
    padding: .05em .5em; border-radius: var(--radius-voll);
    background: color-mix(in srgb, var(--flaeche-tief) 72%, transparent);
  }
  .werkkachel--zitat .zeile-hidden-marke { align-self: flex-start; }

  /* Streifen */
  .zitatstreifen { position: relative; }
  .zitatstreifen__spur {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 17rem);
    gap: var(--raum-4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--raum-2);
    padding-block: var(--raum-2) var(--raum-3); padding-inline: var(--raum-1);
    scrollbar-width: thin;
  }
  .zitatstreifen__spur > .werkkachel { scroll-snap-align: start; }
  .zitatstreifen__pfeil {
    position: absolute; inset-block-start: 30%; z-index: 2;
    inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-voll);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text);
    box-shadow: var(--schatten-2);
    cursor: pointer;
  }
  .zitatstreifen__pfeil svg { inline-size: 1rem; block-size: 1rem; }
  .zitatstreifen__pfeil--zurueck { inset-inline-start: -0.75rem; }
  .zitatstreifen__pfeil--vor { inset-inline-end: -0.75rem; }
  .zitatstreifen__pfeil[disabled] { opacity: .35; cursor: default; }
  /* Die Pfeile sind Enhancement (hat-js); ohne JS trägt die Scroll-Geste, und mit Touch-
     Zeiger (hover:none) sind sie entbehrlich — der Finger wischt ohnehin. */
  .zitatstreifen__pfeil { display: none; }
  .hat-js .zitatstreifen__pfeil { display: inline-flex; }
  @media (hover: none) { .hat-js .zitatstreifen__pfeil { display: none; } }
}

/* ═══ OP-ERGÄNZUNG (2026-08-23): TIPP-BLASEN ÜBER DEN LEINWÄNDEN ════════════════════════
   PO-Bug: «Das Mouse-Over-Feld verschwindet hinter der Leinwand» — die data-tipp-Blase
   öffnet als ::after OBERHALB ihres Trägers, und drei /predigten-Träger sassen in
   overflow:hidden-Containern: der Kachel-Hörring im .werkkachel__bild (Blase zu 85 %
   geschnitten, gemessen), beide Empfehlungs-Bänder doppelt (eigenes overflow + Bildfeld,
   0 % sichtbar). Der Bestands-Wächter r8 mass nur ::after-opacity — Zustand, nicht
   Sichtbarkeit (LESSONS-Klasse «Zustands-Beweis ≠ Sichtbarkeits-Beweis»).
   DER FIX: die zwei Bild-Plätze geben ihr Clipping ab; jede Zuschnitt-Aufgabe wandert an
   das Element, das sie braucht (img/Platz/Fuss runden selbst; der Band-Streifen clippt im
   neuen .empfehlungs-band__clip — s. Band-Block oben).
   ⚠ .werkkachel__bild { overflow:hidden } steht im BYTE-IDENTISCHEN Abgabe-Teil (~555,
     dort wird nie editiert) — dieser Block ist der bewusste spätere Override (Muster
     Fusszeile/Leinwand-Symbol). .werkzeile__bild stand ZWEIMAL (Abgabe ~603 + der
     editierbare Vorschaubild-Block, dort bereits entfernt) — hier fällt der Abgabe-Rest.
   ⚠ Blasen-LAGEN gegen die Überlauf-Verträge (messung-predigten-d d12 / startseite:
     scrollWidth-Überlauf 0; die Blase existiert als visibility:hidden-Box DAUERHAFT und
     zählte zentriert am rechten Kachel-Rand in die Scroll-Fläche): der Kachel-Ring endet
     an seiner End-Kante und wächst nach innen (das Stern-Muster data-tipp-lage="rechts",
     hier als Kontext-Regel — der Erzeuger op_hoerring_html bedient vier Orte und bleibt
     unberührt); die Bänder beginnen an ihrer Start-Kante und wachsen nach innen.
   ⚠ Hover-Stapel: die Blase ragt in die Kachel-Reihe DARÜBER; deren Empfehlungs-Band
     (z-index 2) läge sonst über der Blase des z-index-1-Trägers ⇒ der gehoverte Träger
     hebt sich deterministisch an (6 < jeder Leisten-/Kopf-Ebene 60+). */
@layer komponenten {
  .werkkachel__bild { overflow: visible; }
  .werkzeile__bild { overflow: visible; }
  /* Zuschnitt-Ersatz: was vorher der Container schnitt, rundet jetzt selbst. Der
     Kachel-Radius liegt INNERHALB der 1-px-Kontur (calc), das Zeilen-Feld hat keine. */
  .werkkachel__bild > img, .werkkachel__platz { border-radius: calc(var(--radius-m) - var(--linie-breit)); }
  .werkkachel__fuss { border-radius: 0 0 calc(var(--radius-m) - var(--linie-breit)) calc(var(--radius-m) - var(--linie-breit)); }
  .werkzeile__bild > img { border-radius: var(--radius-s); }
  /* Blasen-Lagen (s. Kopf-Kommentar): Ring end-bündig, Bänder start-bündig. */
  .werkkachel__bild .hoerring[data-tipp]::after {
    inset-inline-start: auto; inset-inline-end: 0;
    translate: none; text-align: end;
  }
  .empfehlungs-band[data-tipp]::after {
    inset-inline-start: 0; inset-inline-end: auto;
    translate: none; text-align: start;
  }
  /* Hover-/Fokus-Anhebung der drei Kachel-Träger (Ring · Stern · Band) */
  .werkkachel__bild .hoerring:hover,
  .werkkachel .merk-form--kachel .stern-knopf:hover,
  .werkkachel .merk-form--kachel .stern-knopf:focus-visible,
  .empfehlungs-band:hover { z-index: 6; }
}

/* ═══ OP-ERGÄNZUNG (2026-08-23): WARTUNGS-BAND ══════════════════════════════════════════
   PO-Auftrag F4/F5: Schrägband «WARTUNGSMODUS» über der linken oberen Ecke — fest im Bild,
   für jeden Durchgelassenen (Admin + Code-Freigeschaltete), öffentliche + Admin-Seiten
   (Markup: layout.php direkt nach dem Sprunglink). Warn-Rot der Admin-Kennzeichnung
   (--fehler/--fehler-auf — beide Farbsätze AA-gepflegt seit GF64).
   ⚠ Bauform = das Empfehlungs-Band-Muster: UNGEDREHTER Wrapper clippt den gedrehten
     Streifen (GF33-Klasse «rotierter Kasten zählt in die Scroll-Überlauf-Fläche»); der
     Wrapper ist KEIN data-tipp-Träger, darf also selbst clippen (Lektion 2026-08-23).
     position:fixed nimmt ihn zusätzlich aus jedem Scroll-Mass.
   ⚠ pointer-events:none ist Pflicht — das Band liegt über der Ecke der Kopfzeile (z 80 >
     Kopf 65 · Cookie 67 · Mini 69 · Leiste 70) und darf ☰-Menü/Logo nie blockieren. */
@layer komponenten {
  .wartungs-band {
    position: fixed;
    inset-block-start: 0; inset-inline-start: 0;
    inline-size: 7.5rem; block-size: 7.5rem;
    overflow: hidden;
    z-index: 80;
    pointer-events: none;
  }
  .wartungs-band span {
    position: absolute;
    /* Mitte des Streifens = (3rem, 3rem) auf der Diagonale des 7.5rem-Wrappers: nur dann liegt die
       Textmitte in der Mitte des SICHTBAREN Bandsegments (Wrapper clippt an Ober- und Linkskante).
       Rechnung: Mitte − halbe Zeilenhoehe (0.66rem × line-height 2 / 2) bzw. − halbe Breite (13rem / 2).
       PO-Fund 2026-09-02: mit 1.7rem stand die Textmitte 6 px schraeg nach oben rechts versetzt, das
       letzte «S» ragte ueber die Oberkante (gemessen: Text-Box top −6.8 px, Text-Pixel bis y=0). */
    inset-block-start: calc(3rem - 0.66rem); inset-inline-start: calc(3rem - 6.5rem);
    inline-size: 13rem;
    transform: rotate(-45deg);
    text-align: center;
    font: 700 0.66rem/2 "Instrument Sans", sans-serif;
    letter-spacing: 0.08em;
    background: var(--fehler);
    color: var(--fehler-auf);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  }
}

/* ═══ OP-ERGÄNZUNG (PO 2026-08-30): KOMMENTAR-PFLEGE DURCH DIE REDAKTION ═══════════════════════
   Nutzer: partials/interaktion-kommentare.php (S06/S13/S14/Zitat — der Block .kommentar-admin wird NUR
   für Admins gerendert; Gäste/Registrierte bekommen kein Markup) · der Vermerk .kommentar-bearbeitet ist
   für ALLE sichtbar. Rot = «nur für Admins» (PO-Regel 2026-08-01: Klasse nur-admin + Vorlese-Span).
   <details>-Aufklapper — ohne JS voll bedienbar; die Formulare laufen unter pjax als fetch-Submit.
   Das Grid der Karte (Avatar spannt 2 Zeilen) bekommt den Block als DRITTE Zeile in Spalte 2.
   Muss VOR den Rot-Blöcken stehen — der Rot-Anker bleibt letzter Block (GF86 c). */
@layer komponenten {
.kommentar-bearbeitet{white-space:nowrap}
.kommentar-admin{grid-column:2;display:flex;flex-wrap:wrap;gap:0 var(--raum-4);align-items:flex-start;font-size:var(--txt-etikett)}
.kommentar-admin__punkt[open]{flex-basis:100%}
.kommentar-admin__punkt>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-block-size:var(--tastfeld);color:var(--fehler);font:400 12.5px "Instrument Sans",sans-serif;text-decoration:underline}
.kommentar-admin__punkt>summary::-webkit-details-marker{display:none}
.kommentar-admin__form{display:grid;gap:var(--raum-2);margin-block:0 var(--raum-2)}
.kommentar-admin__form textarea.eingabe{min-block-size:5.5rem;resize:vertical}
.kommentar-admin__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--raum-2) var(--raum-3)}
.kommentar-admin__fuss .kommentar-hinweis-text{margin-inline-end:auto}
.kommentar-admin__fuss .knopf{padding-block:.4rem;font-size:var(--txt-klein)}
}

/* ═══ OP-ERGÄNZUNG (2026-08-31): BIBELSTELLEN-VORSCHLAG UX (PO F1–F4 2026-08-30) ═════════
   Freitext-Feld + Live-Echo + Picker-Alternative (partials/bibel-picker.php), die
   Zeitmarken-Zeile des S06-Vorschlags ([data-bibelzeit], op-player.js) und die rote
   Admin-Chip-Aktion (.bibel-zeit-admin, partials/bibel-stelle.php — Rot = admin-only,
   Kommentar-Pflege-Optik). Muss VOR den Rot-Blöcken stehen — der Rot-Anker bleibt
   letzter Block (GF86 c). */
@layer komponenten {
.bibel-picker--freitext{display:block}
.bibel-freitext{display:grid;gap:4px;margin:0}
.bibel-freitext input{max-inline-size:22rem}
.bibel-freitext__echo{font-size:var(--txt-etikett);color:var(--marke)}
.bibel-freitext__echo--warn{color:var(--fehler)}
.bibel-picker-alt{margin-block-start:6px}
.bibel-picker-alt>summary{cursor:pointer;list-style:none}
.bibel-picker-alt>summary::-webkit-details-marker{display:none}
.bibel-picker-alt[open]>summary{margin-block-end:8px}
.bibel-picker-alt .bibel-picker__felder{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bibel-picker-alt .bibel-freitext__hinweis{display:block;margin-block-start:6px;font-size:var(--txt-etikett);color:var(--text-3)}
.bibelzeit-zeile{display:flex;gap:var(--raum-2);align-items:center;flex-wrap:wrap}
.bibelzeit-stand{font-size:var(--txt-etikett);color:var(--text-2);display:inline-flex;gap:6px;align-items:baseline}
.bibel-zeit-admin{display:block;margin-block-start:2px}
.bibel-zeit-admin .melden-knopf{color:var(--fehler)}
}

/* ═══ OP-ERGÄNZUNG (2026-09-03): ADMIN-WERKZEUGLEISTE (R-1-Muster, 2. Nutzer A08) ══════════
   Aus seiten/admin-beitraege.css gezogen, als die Podcast-Feed-Maske dieselbe Leiste bekam
   (PO 2026-09-03 «Suche in A08 nicht praktikabel»). Werte 1:1. Muss VOR den Rot-Blöcken
   stehen — der Rot-Anker bleibt letzter Block (GF86 c). */
@layer komponenten {
.werk-werkzeuge{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding-block:16px}
/* ⚠ `min-inline-size:0` ist der Kern: ein <select> wird sonst so breit wie seine LÄNGSTE
   Option (die Sprecher-Liste trägt lange Namen) und drückt den Knopf in eine zweite Zeile. */
.werk-werkzeuge__feld{display:flex;flex:0 1 11rem;min-inline-size:0}
.werk-werkzeuge__feld--weit{flex:1 1 16rem}
.werk-werkzeuge__feld .eingabe{inline-size:100%;max-inline-size:100%}
.werk-werkzeuge__reset{margin-inline-start:2px}

}

/* ═══ OP-ERGÄNZUNG (2026-09-06): OFFENES KOPF-MENÜ ÜBER DEM MINI-VIDEO ═══════════════════════════
   PO-Fund: läuft ein Video im Footer-Player (Mini-Leinwand unten rechts = .video-karte--mini, fixed,
   z 69) und öffnet man das Konto-Pulldown, liegen die Menüpunkte HINTER dem Video und sind nicht
   klickbar. Ursache: .kopf ist sticky mit z-index 40 und damit ein eigener Stapel-Kontext — das z 50
   der .pulldown__tafel zählt nur INNERHALB des Kopfes, nach aussen gilt 40 < 69.
   Die Regel hebt den Kopf NUR, solange eines seiner drei Menüs offen ist (Konto-Pulldown · ☰ ·
   Admin-Pille): 72 = über Mini (69), Leiste (70) und Leisten-Panel (71), unter dem Upload-Schleier
   (80). Dauerhaft 72 wäre falsch — auf kleinen Fenstern läge der Kopf dann über der Leiste, sobald
   beide sich berühren. Muss VOR den Rot-Blöcken stehen (der Rot-Anker bleibt letzter Block).
   Wächter: tools/messung-kopf-menue-ueber-mini.mjs (×2 Engines, mit Diskriminator). */
@layer komponenten {
  .kopf:has(.pulldown[open], .menue[open], .admin-pille-menue[open]) { z-index: 72; }
}

/* ═══ OP-ERGÄNZUNG (2026-08-12): ROTE ADMIN-SICHT — DIE EINE ZEILEN-REGEL ═══════════════
   Ausrollung PO 2026-08-12: versteckte Beiträge erscheinen dem Admin ÜBERALL rot, wo
   Werk-Zeilen/-Kacheln stehen — /predigten (Bestand seit R1), Startseiten-«Neu»,
   /neu-Chronik, Widerspruch-/Gemeinde-Listen (via listenzeile--hidden, s. Brücken-Block),
   S06-«Mehr zum Thema»/Querverweise, Bibel-Kapitel-Randspalte. Umzug aus
   seiten/predigten.css beim ZWEITEN Nutzer (Startseiten-Kachel) — eine Regel, alle Orte;
   die Text-Marke daneben ist .zeile-hidden-marke (Brücken-Block oben). */
@layer komponenten {
  .werkzeile--hidden, .werkkachel--hidden, .neuigkeit--hidden,
  .aehnlich__zeile--hidden, .stellenbeitrag--hidden {
    outline: 1px solid var(--fehler); outline-offset: -1px; border-radius: 10px;
  }
}

/* ═══ OP-ERGÄNZUNG (2026-08-24): THEME-SCHNELLZUGRIFF NUR DESKTOP ═══════════════════════
   PO-Entscheid: unter 60 rem (= die ☰-Grenze der Kopfzeile) verschwindet der Sonne/Mond-
   Knopf ganz — die Darstellung wählt man dort im Konto-Pulldown («Darstellung»
   Hell/Dunkel/System, Gäste wie Eingeloggte); der Knopf war die zweite Bedien-Stelle
   derselben Wahl. Subsumiert die frühere 34-rem-:has(.admin-pille)-Sonderregel (GF87,
   Kommentar-Historie am alten Ort). Schlägt das basis.css-`.hat-js .thema-schnell
   {display:inline-flex}` über die LAYER-Ordnung (komponenten > basis), nicht über
   Spezifität — wer die Regel verschiebt, prüft das Paar erneut. */
@layer komponenten {
  @media (max-width: 60rem) {
    .thema-schnell { display: none; }
  }
}

/* ═══ OP-ERGÄNZUNG (2026-08-24): LAUFSCHRIFT DER WIEDERGABE-LEISTE ══════════════════════
   PO-Auftrag: mobil waren Titel bzw. Sprecher-Name gelegentlich nicht lesbar (Ellipsis).
   Bei ÜBERLAUF läuft der Text jetzt langsam durch — Autoradio-Muster: Standzeit, hin,
   Standzeit, zurück (animation-direction: alternate; die Halte-Phasen stecken in den
   Keyframe-Prozenten 0–15/85–100). Die Klassen setzt op-player.js (laufPruefen) NUR bei
   echtem Überlauf und liefert --lauf-weite/--lauf-dauer mit; ohne Klasse gilt die
   Bestands-Ellipsis. Die UHR läuft nie mit (Zeit-Zeilen-Split, partials/player-leiste.php).
   ⚠ Sichtfenster und Läufer sind ZWEI Elemente — ein Element kann nie sein eigener
     Clipper sein (GF97-Tipp-Blasen-Lektion, dieselbe Klasse).
   ⚠ `prefers-reduced-motion: reduce` stellt still UND gibt die Ellipsis zurück — die
     Lauf-Klasse allein schaltete sonst auf `clip` und schnitte OHNE Ersatzanzeige. */
@layer komponenten {
  /* Zeit-Zeile = Uhr (fest) + Sprecher-Sichtfenster (schrumpft): der column-gap ersetzt
     den Leerschlag des alten Ein-Element-Formats «… · Name». Gilt auf ALLEN Breiten —
     die display:block/none-Regeln der Abgabe-/62-rem-Blöcke oben verlieren über die
     Reihenfolge (gleiche Layer, späterer Block). */
  .spielleiste__zeit { display: flex; align-items: baseline; column-gap: 0.45em; min-inline-size: 0; }
  .spielleiste__zeit [data-zeit] { flex: none; }
  .leiste-sprecher {
    flex: 0 1 auto; min-inline-size: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .spielleiste__titel--lauf, .leiste-sprecher--lauf { text-overflow: clip; }
  .spielleiste__titel--lauf a,
  .leiste-sprecher--lauf .leiste-sprecher__text {
    display: inline-block; /* transform wirkt nicht auf non-replaced inline */
    will-change: transform;
    animation: leiste-lauf var(--lauf-dauer, 8s) linear infinite alternate;
  }
  /* Zeigen/Fokus hält an — ein laufender Titel ist ein schlechtes Klick-Ziel. */
  .spielleiste__titel--lauf:hover a,
  .spielleiste__titel--lauf:focus-within a,
  .leiste-sprecher--lauf:hover .leiste-sprecher__text { animation-play-state: paused; }
  @keyframes leiste-lauf {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-1 * var(--lauf-weite, 0px))); }
  }
  @media (prefers-reduced-motion: reduce) {
    .spielleiste__titel--lauf, .leiste-sprecher--lauf { text-overflow: ellipsis; }
    .spielleiste__titel--lauf a,
    .leiste-sprecher--lauf .leiste-sprecher__text { animation: none; }
  }
}

/* ═══ OP-ERGÄNZUNG (2026-09-05): A–Z-BAND — zweiter Nutzer, aus seiten/sprecher.css hierher ═══════════
   Das Band (PO 2026-08-31 für /sprecher) steht seit PO 2026-09-05 AUCH in der Admin-Sprecher-Liste
   (/admin/sprecher, lädt admin-listen.css) ⇒ Komponente. Vertrag unverändert: GENAU 26 gleiche Zellen
   in EINER Reihe (mobil 13+13 — das Template garantiert die Zellen-Zahl), verlinkte Buchstaben = zarte
   Zellen im Kontur-Vokabular (Hover = Kontur-Verstärkung + Markenfarbe), der aktive = Marken-Füllung,
   LEERE Buchstaben = zellenlos ausgegraut und nie verlinkt. Zell-OPTIK 36 px, die 44er-Tastzone liefert
   das unsichtbare ::before (GF88-calc-Muster). ⚠ --linie/--linie-stark, NICHT --kontur* (Tokens seit E1
   tot — undefiniertes var() fällt STILL weg). ⚠ Dieser Block bleibt VOR dem ROTEN-ADMIN-DOWNLOAD-Block
   (der ist bewusst der letzte der Datei, s. dessen Kopf). */
@layer komponenten {
  .alphabet { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; padding-block: var(--raum-5) var(--raum-2); }
  .alphabet a, .alphabet__leer {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    min-block-size: 2.25rem;
    border-radius: var(--radius-s);
    font-family: var(--schrift-mono);
    font-size: var(--txt-klein);
    text-decoration: none;
  }
  .alphabet a { position: relative; color: var(--text); background: var(--flaeche-2); border: 1px solid var(--linie); }
  .alphabet a::before { content: ""; position: absolute; inset: calc((100% - var(--tastfeld)) / 2) 0; }
  .alphabet a:hover { border-color: var(--linie-stark); color: var(--marke); }
  .alphabet [aria-current="true"] { background: var(--marke); border-color: var(--marke); color: var(--marke-auf); font-weight: var(--gewicht-halb); }
  .alphabet__leer { color: var(--text-3); opacity: 0.45; cursor: default; }
  .alphabet__reset { margin: 0 0 var(--raum-3); }
  .alphabet__reset a { font-size: var(--txt-klein); }
  /* Admin-Variante: das Band steht IN der Filter-Karte unter dem Formular — weniger Luft nach oben. */
  .alphabet--admin { padding-block: var(--raum-3) 0; }
  .alphabet--admin + .alphabet__reset { margin: var(--raum-2) 0 0; }
  @media (max-width: 48rem) {
    .alphabet { grid-template-columns: repeat(13, minmax(0, 1fr)); }
  }
}

/* ═══ OP-ERGÄNZUNG (2026-08-10): ROTER ADMIN-DOWNLOAD ═══════════════════════════════════
   PO-Entscheid «Download deaktiviert»: NUR der Admin sieht die Download-Objekte — rot
   (Klasse nur-admin am Knopf/der Dialog-Zeile, Erzeuger module/player.php) und funktional
   (Gate-Durchgriff). ⚠ BEWUSST der LETZTE Block der Datei: die Werkzeug-Kreise tragen
   kontextspezifische Farbregeln ((.medienleiste__werkzeuge) .teilwerk__knopf + :hover,
   bis 0-3-1), die zwei frühere Anker-Versuche bei gleicher Spezifität über die
   REIHENFOLGE ausgestochen haben — per Browser-Farbprobe gefangen, nicht geraten.
   Wer NACH diesem Block Regeln anhängt, prüft den Rot-Knopf erneut (probe-rotknopf-
   Muster: computed color == var(--fehler)). */
@layer komponenten {
  .teilwerk__knopf.nur-admin,
  .medienleiste__werkzeuge .teilwerk__knopf.nur-admin,
  .teilwerk__knopf.nur-admin:hover,
  .medienleiste__werkzeuge .teilwerk__knopf.nur-admin:hover,
  .dialog__datei.nur-admin,
  .dialog__datei.nur-admin:hover,
  .dialog__datei.nur-admin .dialog__was { color: var(--fehler); }
  .teilwerk__knopf.nur-admin,
  .teilwerk__knopf.nur-admin:hover { border-color: var(--fehler); }
}