/* ===========================================================================
   SEITE: BEITRAG (S06) — Design-v5-Fassung (E2, NACHTRAG-EIN-KATALOG §9).
   Destilliert aus uebergabe-claude-design-4/EXTRAS/prototyp/css/seite-beitrag.css
   (Abgabe-Stand 2026-07-28); am Ende der OP-ERGÄNZUNGS-Block für die
   Bestands-Mechanik (op-player-Zustandsklassen · No-JS-Dialog · Mitlesen-Liste).
   Gilt für alle drei Ausprägungen (Video+Ton · nur Ton · Dokument/Text).
   =========================================================================== */

@layer seite {

  .beitrag__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); padding-block: var(--raum-6) var(--raum-5); }
  .beitrag__pfad { color: var(--text-3); font-size: var(--txt-etikett); }
  .beitrag__pfad a { color: inherit; }
  .beitrag__titel { max-inline-size: 32ch; }

  .beitrag__urheber {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-4);
    color: var(--text-2);
    font-size: var(--txt-klein);
  }

  /* nowrap ist zwingend: mit «wrap» verteilt Flex die Elemente nach ihrer
     max-content-Breite auf Zeilen, BEVOR geschrumpft wird — die Pillengruppe
     bräche um, und «min-inline-size: 0» am Textteil käme nie zum Zug. Unter
     48 rem ist kein Platz mehr dafür; dort darf umbrochen werden (Media-Query). */
  .beitrag__angaben {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-4);
  }

  /* Gruppiert ALLE Sprecher-Links + « · »-Trenner als EIN Flex-Kind der angaben-
     Zeile (sonst zerfiele die Folge in einzelne Items und die Trenner stünden
     frei); min-inline-size erlaubt der Namensliste — «kein Deckel», GF52 — das
     Schrumpfen unter ihre max-content-Breite, dasselbe Idiom wie an .beitrag__angaben.
     ⚠ Messvertrag: messung-beitrag-detail greift `.beitrag__sprecher a`. */
  .beitrag__sprecher { min-inline-size: 0; }

  .beitrag__kopfaktionen { flex: none; display: flex; gap: var(--raum-2); margin-inline-start: auto; }
  /* Deutlich andere Form als die Themen-Chips: Chips sind runde Pillen mit Rand
     (Navigation), diese Knöpfe sind Befehle auf der Seite — eckig, gefüllt. */
  .beitrag__kopfaktionen .knopf {
    white-space: nowrap;
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-3);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-s);
    background: var(--flaeche-3);
    color: var(--text-2);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
  }
  .beitrag__kopfaktionen .knopf:hover { background: var(--flaeche-4); color: var(--text); }
  .beitrag__kopfaktionen .knopf[aria-pressed="true"] { background: var(--marke); color: var(--marke-auf); }
  .beitrag__kopfaktionen .knopf svg { inline-size: 0.95rem; block-size: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .beitrag__urheber a { font-weight: var(--gewicht-fett); }

  .beitrag__spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    gap: var(--raum-7);
    align-items: start;
    padding-block-end: var(--raum-6);
  }

  /* (Die Kopfzeile des E2-Ton-Spielers ist mit der TONBÜHNE entfallen — PO 2026-07-31.) */

  /* Nur auf der Dokument-/Textseite: die Wahl zwischen Lesen im Browser und PDF. */
  .formwechsel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); margin-block-start: var(--raum-5); }
  .formwechsel__text { color: var(--text-2); font-size: var(--txt-klein); max-inline-size: min(62ch, 100%); }

  .beitrag__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2);
    margin-block-start: var(--raum-5);
  }
  .hinweis.beitrag__aktionen { display: block; }

  /* Themen/Stellen wohnen seit PO 2026-07-30 als Rand-Kacheln in der Seitenspalte —
     die .schlagworte-Klassen sind mit dem Umzug GESTORBEN (Klassen-Waisen-Regel).
     Seit PO 2026-08-19 trägt die Themen-Kachel .thema-marker (Farbpunkt + Text) statt
     Pillen: horizontal 18px Wort-Trennung (Textlinks ohne eigene Kante brauchen mehr
     Luft als Flächen), vertikal 10px — die 44er-Tastzonen kacheln den Abstand
     (gleichartige Themen-Links, GF88-Regel am komponenten-Block). */
  /* .rand-chips wohnt seit PO 2026-09-05 in komponenten.css (zweiter Nutzer: die Themen-Karte
     der Sprecher-Seite) — Werte unverändert, flex-wrap bleibt Vertrag des bibel-stelle-Partials. */
  .rand-stellen { display: flex; flex-wrap: wrap; gap: var(--raum-2); }

  .beitrag__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); max-inline-size: min(82ch, 100%); color: var(--text-2); }
  /* Beschreibungs-Umschalter (op-text.js): 160-ms-Blende beim Teil-Wechsel; bei
     reduzierter Bewegung wirkt der Tausch sofort (die Wartezeit im JS bleibt unmerklich). */
  .beitrag__text { transition: opacity 160ms ease; }
  /* F5 (PO 2026-07-31): der Kasten hält die Höhe des längsten EINZELNEN Teils, damit ein
     Teil-Wechsel den Text darunter nicht hochreissen kann — besonders beim Auto-Advance, den
     der Nutzer nicht ausgelöst hat. Den Messwert setzt op-text.js (hoeheMessen) als Variable;
     die REGEL steht hier, nicht im Skript. Ohne JS und bei nur einem Teil fehlt die Variable
     ⇒ Fallback 0 = Bestandsverhalten. */
  .beitrag__text { min-block-size: var(--teil-hoehe, 0); }
  .beitrag__text.blendet { opacity: 0; }
  @media (prefers-reduced-motion: reduce) { .beitrag__text { transition: none; } }
  /* «Teil N»-Titelzeilen fett (PO 2026-07-30) — Klasse setzt der Server ($beschreibungP). */
  .beschreibung-teiltitel { font-weight: var(--gewicht-fett); color: var(--text); }

  .beitrag__abschnitt { margin-block-start: var(--raum-7); }
  /* Zitate-Block (Z-2, F5): das Kachel-Gitter der Rubrik in der Hauptspalte — schmaler als der
     Katalog, deshalb zwei Spalten ab 48rem (das komponenten-Gitter rechnet auto-fill). */
  .beitrag__zitate .kachel-gitter--zitate { margin-block-start: var(--raum-3); }
  .beitrag__abschnitt h2 { font-size: var(--txt-t4); letter-spacing: -0.01em; }
  .beitrag__abschnitt-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-3);
    margin-block-end: var(--raum-4);
  }

  /* --- Vorschlagen: Aufklapper der Mitmach-Randspalte ------------------- */
  .vorschlag { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .rand-karte .vorschlag__feld { padding: var(--raum-3); margin-inline: 0; }
  .rand-karte .vorschlag__stand { font-size: var(--txt-etikett); gap: var(--raum-1) var(--raum-3); }
  .rand-karte .stellen-waehler__buch { inline-size: 100%; }
  .rand-karte .stellen-waehler__zahl { inline-size: 3.75rem; }
  .rand-karte .form-fuss { gap: var(--raum-2); }

  /* Notiz in der Hauptspalte: echte Schreibfläche statt Randstreifen */
  .notizfeld { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .notizfeld textarea {
    inline-size: 100%;
    min-block-size: 9rem;
    padding: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-m);
    color: var(--text);
    font: inherit;
    line-height: var(--zeile-text);
    resize: vertical;
  }
  .notizfeld__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-3);
  }
  .notizfeld__hilfe { color: var(--text-3); font-size: var(--txt-etikett); }
  .notizfeld__werkzeug { display: flex; flex-wrap: wrap; gap: var(--raum-2); }

  .vorschlag__stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raum-2) var(--raum-4);
    color: var(--text-2);
    font-size: var(--txt-klein);
  }
  .vorschlag__stand svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: var(--text-3); stroke-width: 1.6; }
  .vorschlag__stand b { color: var(--text); font-weight: var(--gewicht-halb); }

  .vorschlag > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2);
    min-block-size: var(--tastfeld);
    color: var(--marke);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    cursor: pointer;
    list-style: none;
  }
  .vorschlag > summary::-webkit-details-marker { display: none; }
  .vorschlag > summary:hover { text-decoration: underline; }
  .vorschlag > summary::before { content: "›"; transition: transform var(--dauer-schnell) var(--kurve); }
  .vorschlag[open] > summary::before { transform: rotate(90deg); }

  .vorschlag__feld {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-3);
    padding: var(--raum-4);
    margin-block-start: var(--raum-2);
    background: var(--flaeche-3);
    border-radius: var(--radius-m);
  }
  .vorschlag__hilfe { color: var(--text-3); font-size: var(--txt-etikett); }
  .vorschlag__hilfe a { color: var(--marke); }
  .vorschlag__oder {
    padding-block-start: var(--raum-3);
    border-block-start: var(--linie-breit) solid var(--linie);
  }

  /* Eingereicht, wartet auf Freigabe */
  .eingereicht {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--raum-2) var(--raum-3);
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche-4);
    border-radius: var(--radius-s);
    color: var(--text-2);
    font-size: var(--txt-klein);
  }
  .eingereicht svg { flex: none; inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: var(--marke); stroke-width: 1.7; margin-block-start: 0.15em; }
  .eingereicht b { color: var(--text); font-weight: var(--gewicht-halb); }
  .eingereicht span { flex: 1; min-inline-size: 12ch; }

  /* Aufruf, wenn einem Beitrag Themen UND Stellen fehlen */
  .luecke {
    display: flex;
    align-items: flex-start;
    gap: var(--raum-3);
    padding: var(--raum-4);
    background: var(--flaeche-4);
    border-radius: var(--radius-m);
    color: var(--text-2);
    font-size: var(--txt-klein);
  }
  .luecke svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: var(--marke); stroke-width: 1.7; margin-block-start: 0.1em; }
  .luecke strong { color: var(--text); }

  /* Seitenspalte */
  .beitrag__rand { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }

  .sprecher-zeile { display: flex; align-items: center; gap: var(--raum-4); }
  .sprecher-zeile__name { font-weight: var(--gewicht-fett); }
  .sprecher-zeile__zahl { color: var(--text-3); font-size: var(--txt-etikett); }
  /* Mehr-Sprecher-Kachel (PO 2026-07-30): eine Zeile je Sprecher, Luft dazwischen. */
  .rand-karte .sprecher-zeile + .sprecher-zeile { margin-block-start: var(--raum-3); }

  .aehnlich { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .aehnlich__zeile { display: flex; align-items: center; gap: var(--raum-3); }
  .aehnlich__bild {
    flex: none;
    display: grid; grid-template-columns: minmax(0, 1fr);
    place-items: center;
    inline-size: 3.5rem;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-s);
    background: var(--verlauf-bild);
  }
  .aehnlich__bild svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: var(--auf-tief); stroke-width: 1.6; opacity: 0.75; }
  .aehnlich__titel { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); line-height: var(--zeile-titel); }
  .aehnlich__titel a {
    display: flex;
    align-items: center;
    min-block-size: var(--tastfeld);
    color: inherit;
    text-decoration: none;
  }
  .aehnlich__meta { color: var(--text-3); font-size: var(--txt-etikett); }

  /* Dokument-/Text-Variante */
  .lesebuehne {
    padding: var(--raum-6);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
  }
  .lesebuehne__blatt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); max-inline-size: var(--lese-max); }
  .lesebuehne__blatt h3 { font-size: var(--txt-t4); }

  @media (max-width: 60rem) {
    /* minmax(0,…) wie im Desktop-Template — nacktes 1fr ist minmax(auto,1fr): der Track
       wächst dann mit dem min-content der Video-Karte über den Behälter hinaus (+2 px
       Seiten-Überlauf @360, sichtbar seit der 1669-Tonspur-Kopplung die Formwahl-Segmente
       rendert; messung-beitrag-detail b12 wacht). */
    .beitrag__spalten { grid-template-columns: minmax(0, 1fr); gap: var(--raum-6); }
  }
  @media (max-width: 34rem) {
    .lesebuehne { padding: var(--raum-4); }
  }
}

@layer seite {
  @media (max-width: 48rem) {
    .beitrag__urheber { flex-wrap: wrap; }
    .beitrag__kopfaktionen { margin-inline-start: 0; }
  }
}

/* ===========================================================================
   OP-ERGÄNZUNGEN (E2): Bestands-Mechanik im v5-Kleid — Zustandsklassen von
   op-player.js, No-JS-Dialog, Mitlesen-Liste, Formular-Stapel. Nicht Teil der
   Abgabe-Datei; jede Regel hier hat einen Mechanik-Grund.
   =========================================================================== */
@layer seite {

  /* (Play/Pause-Zustand, Slider-Höhe und das Weiterhören-Angebot des E2-Spielers sind mit
     der TONBÜHNE nach komponenten.css gewandert — PO 2026-07-31. Die Klassen .spieler*,
     .schiene* und .steuerung* haben seither 0 Nutzer und sind entfernt.) */

  /* Teilzeilen-Zustände: der Startknopf trägt Play UND die Balken-Gruppe —
     `teilzeile--laeuft` (JS-getoggelt) blendet um; gesperrte Zeilen (Rückzug)
     bleiben sichtbar, aber still. */
  .teilzeile__start .symbol-play { display: grid; place-items: center; }
  .teilzeile__start .balken-gruppe { display: none; }
  .teilzeile--laeuft .teilzeile__start .symbol-play { display: none; }
  .teilzeile--laeuft .teilzeile__start .balken-gruppe { display: inline-flex; align-items: flex-end; gap: 2px; }
  .teilzeile__start svg { fill: none; stroke: currentColor; }
  .teilzeile--gesperrt { opacity: 0.6; }
  .teilzeile--gesperrt .teilzeile__titel { color: var(--text-3); font-weight: var(--gewicht-normal); }

  /* No-JS-Weg des Download-Dialogs: der Knopf ist ein Anker, :target zeigt die
     Tafel. NUR ohne hat-js — mit JS öffnet der op-ui-Enhancer (hidden-Toggle);
     die :target-Regel dürfte sonst nach dem JS-Schliessen wieder greifen,
     solange der Hash in der URL steht. */
  html:not(.hat-js) .dialog[hidden]:target { display: grid; }

  /* Formular-Stapel im Vorschlags-Feld (Formulare sind Grid-Kinder der Tafel) */
  .feld-stapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .inline-form { display: inline-flex; }

  /* Mitlesen-Liste: die Zeilen baut op-player.js (li > button + .mitlesen-zeit,
     aktive Zeile .mitlesen-aktiv) — v5-Optik der .mitlesen__zeile-Blaupause.
     Der Scroll-Deckel (.mitlesen-klapper .aufklapper__inhalt) wohnt seit PO 2026-08-06
     in komponenten.css — zweiter Nutzer ist die Ketten-Bühne der Playlists/Listen. */
  .mitlesen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
  .mitlesen-liste button {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--raum-3);
    align-items: baseline;
    inline-size: 100%;
    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);
    cursor: pointer;
  }
  .mitlesen-liste button:hover { background: var(--flaeche-3); color: var(--text); }
  .mitlesen-liste button.mitlesen-aktiv { background: var(--flaeche-4); color: var(--text); font-weight: var(--gewicht-fett); }
  .mitlesen-zeit { color: var(--text-3); font-family: var(--schrift-mono); font-size: var(--txt-etikett); }

  /* Kommentare (Partial): die Optik wohnt seit der V1-Fassung app-weit in komponenten.css
     (S13/S14 laden kein beitrag-detail.css); hier nur der Melden-Knopf als inline-flex. */
  .kommentar-melden { display: inline-flex; }

  /* Beschreibungs-Aufklapper (R08-Bestand) + Teil-Anker-Chips */
  .teil-anker { display: flex; flex-wrap: wrap; gap: 1rem var(--raum-2); margin-block-end: var(--raum-4); }
  /* Aktive Teil-Pille (op-text.js setzt aria-current) — dieselbe Optik wie .chip--aktiv
     (komponenten-Abgabe-Teil; dort nicht erweiterbar, Byte-Identität). */
  .teil-anker .chip[aria-current="true"] { background: var(--flaeche-4); border-color: var(--marke); color: var(--text); }
  .beschreibung-mehr summary {
    min-block-size: var(--tastfeld);
    display: inline-flex; align-items: center;
    color: var(--marke); font-size: var(--txt-klein); font-weight: var(--gewicht-halb);
    cursor: pointer; list-style: none;
  }
  .beschreibung-mehr summary::-webkit-details-marker { display: none; }
  .beschreibung-mehr[open] summary { display: none; } /* aufgeklappt ersetzt der Rest den Link */
  .beschreibung-rest { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); }

  /* Sprecher-Foto im Initialen-Kreis */
  .sprecher-foto { object-fit: cover; }

  /* Gast-Promo-Karte */
  .rand-karte--tint { background: var(--flaeche-4); }

  /* Embed-/Zur-Playlist-Aufklapper in der Teilzeile: die Tafeln (Bestand,
     komponenten-E7-Block) brauchen einen Positions-Anker an der neuen Zeile. */
  .teilzeile__werkzeug .zur-playlist, .teilzeile__werkzeug .einbett-aufklapper { position: relative; }
  .teilzeile__werkzeug summary { list-style: none; }
  .teilzeile__werkzeug summary::-webkit-details-marker { display: none; }
}

@layer seite {
  /* Abstand zwischen den Karten IM Player-Anker (PO 2026-07-30): der Anker ist
     display:contents (komponenten), der Seiten-Rhythmus wirkt nur ZWISCHEN Abschnitten —
     ohne diese Regel kleben die Video-/PDF-Karten eines Mehrteilers aneinander
     (sichtbar seit dem [hidden]-Fix 2026-07-29; vorher füllten Phantom-Blöcke den Raum). */
  .player-anker > * + * { margin-block-start: var(--raum-5); }

  /* Variante 2a (PO 2026-07-30): der S06-video-fuss ist ABGELÖST — Titel/Sprecher wohnen im
     Karten-KOPF, Dauer/Marker/Werkzeuge in der MEDIENLEISTE (beides komponenten.css,
     OP-Ergänzungsblock «Video-Bühne Variante 2a»). Die video-fuss-Basisklasse lebt weiter
     für die PLAYLIST-Video-Bühne (module/player.php, data-playlist-video). */
  .pdf-karte__meta { display: flex; align-items: center; gap: var(--raum-2); }

  /* E4 Formwechsel (NACHTRAG-EIN-KATALOG §4): Nur-Audio-Form auf der Video-Karte — das
     Element spielt die gekoppelte Tonspur, die Bildfläche bleibt schwarz. Der Schleier
     benennt den Zustand, ohne die Vendor-Bedienleiste zu verdecken (pointer-events: none;
     unten Platz für die MediaElement-Controls). Zustands-Klasse setzt op-player.js. */
  .video-karte--nuraudio { position: relative; }
  .video-karte--nuraudio::after {
    content: "Nur Audio — die Tonspur läuft, das Bild pausiert";
    position: absolute; inset-inline: var(--raum-4); top: 34%;
    text-align: center; pointer-events: none;
    color: var(--flaeche-2); background: color-mix(in srgb, var(--text) 62%, transparent);
    margin-inline: auto; max-inline-size: 34ch;
    padding: var(--raum-2) var(--raum-3); border-radius: var(--radius-s);
    font-size: var(--txt-klein); font-weight: var(--gewicht-halb);
  }
  /* Teil-Zeilen der A04-Maske teilen die Seite nicht — die Tonspur-Zeile styled admin-listen.css. */

  /* E6 Merkliste (N1): der Kopf-Umschalter — das Formular fügt sich als contents
     in die kopfaktionen-Reihe; der Aktiv-Zustand trägt den Marken-Tint. */
  .merk-form { display: contents; }
  .beitrag__kopfaktionen .merk-knopf--aktiv { background: var(--flaeche-4); color: var(--text); }
  /* Stern-Tausch (PO 2026-07-30): der Gemerkt-Zustand füllt den Stern — wie der
     /predigten-Zeilen-Knopf (EINE Merkliste-Formensprache). */
  .beitrag__kopfaktionen .merk-knopf--aktiv svg { fill: currentColor; }
  /* PO 2026-09-05 (Fund «Zitat-Knopf müsste rot sein»): der Zitat-Knopf trägt die rote Admin-Marke, wenn
     ihn nur der Admin sieht (Schalter «komplett aus» ODER Modus «nur Redaktion» — Erzeuger
     op_ausschnitt_formular_daten, Klasse nur-admin). ⚠ Die allgemeine Regel a.nur-admin{color:var(--fehler)}
     lebt in @layer komponenten — die Kopfaktions-Farbregel oben (@layer seite) schlägt sie per
     SCHICHT-Reihenfolge, nicht per Spezifität; deshalb der eigene Anker HIER (dieselbe Klasse wie der
     rote Download-Knopf, GF86). Hover bleibt rot — der Zustand ist Information, kein Zier-Effekt.
     Wächter: messung-zitat-bereich b10 (computed color == --fehler). */
  .beitrag__kopfaktionen .knopf.nur-admin,
  .beitrag__kopfaktionen .knopf.nur-admin:hover { color: var(--fehler); border-color: var(--fehler); }
}

/* ==== OP-ERGÄNZUNG (E8, Gegenproben-Fund 2026-07-29) ==================================== */
@layer seite {
  /* Der Embed-Aufklapper verlor seine Panel-Regel mit dem E2-Neuschnitt (die Alt-Regel
     wohnte im ALTEN seiten/beitrag-detail.css und fiel dort ersatzlos) — hier die
     wert-übersetzte v5-Fassung (Alt: karte/schatten-schwebend/radius-eingabe). */
  .einbett-menue {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 6px);
    z-index: 5;
    min-inline-size: 300px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--flaeche);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    box-shadow: 0 8px 24px rgb(17 24 20 / 0.18);
  }
  @media (max-width: 560px) { .einbett-menue { min-inline-size: 230px; } }
}

/* --- «Ausschnitt als Zitat festhalten» (NACHTRAG-ZITATE §7, Z-1 2026-08-23) ---
   Aufklapper direkt unter dem Player; die Zeit-Felder mit «Position übernehmen»
   (Knöpfe server-seitig hidden, op-player.js enthüllt sie). Ein Nutzer dieser
   Klassen — bleibt Seiten-Schicht. */
@layer seite {
  .ausschnitt-erstellen { margin-block: var(--raum-4); padding: var(--raum-4); }
  .ausschnitt-erstellen__kopf {
    display: flex; align-items: center; gap: var(--raum-2); cursor: pointer;
    font-weight: var(--gewicht-halb); list-style: none;
  }
  .ausschnitt-erstellen__kopf::-webkit-details-marker { display: none; }
  .ausschnitt-erstellen__kopf::after { content: "+"; margin-inline-start: auto; color: var(--text-3); }
  .ausschnitt-erstellen[open] .ausschnitt-erstellen__kopf::after { content: "–"; }
  .ausschnitt-form { display: grid; gap: var(--raum-3); padding-block-start: var(--raum-3); }
  .ausschnitt-form .feld { display: grid; gap: var(--raum-1); }
  .ausschnitt-form .feld > span { font-size: var(--txt-klein); font-weight: var(--gewicht-halb); }
  .ausschnitt-form .feld-gruppe--zeiten {
    grid-template-columns: repeat(auto-fit, minmax(14rem, max-content)); align-items: end; gap: var(--raum-3);
  }
  .ausschnitt-zeit { display: flex; gap: var(--raum-2); align-items: center; }
  .ausschnitt-zeit .knopf, .ausschnitt-form [data-ausschnitt-vorhoeren] { font-size: var(--txt-klein); white-space: nowrap; }
  .ausschnitt-form__fuss { margin: 0; }
}