/* =====================================================================
   PrepP — Podcasts (Plan 14, Paket 14-2, 08.10.2026)
   ---------------------------------------------------------------------
   Dialog „Podcast erstellen", der Unterreiter „Podcasts" (Serienliste,
   Serienseite), der Einstieg an der Datei und die EINE Player-Leiste.
   Zwei Welten: nur Portal-Tokens (--pp-*), nie css/exam.css — der Player
   verschwindet in der Prüfungsansicht (js/podcast.js, inPruefung).
   Bewegung nur unter .pp-anim; Touch-Flächen mindestens 44 px — auf dem
   Finger, mit Maus die Höhe des Portals (Abschnitt am Ende der Datei).
   ===================================================================== */

/* ---------- Einstieg an der Datei ---------- */
.pc-datei-knopf { display: inline-flex; align-items: center; gap: 6px; }
.pc-datei-knopf.pc-gesperrt { color: var(--pp-text-3); border-style: dashed; }
.pc-schloss { flex: none; color: var(--pp-text-3); }
/* Im Rechtsklick-Menü wird das Innere des Knopfs zur Beschriftung — ohne
   den gap des Knopfs klebte das Schloss am Wort („Podcast daraus🔒",
   wa1009-p3, 09.10.2026). */
.pp-ctx-lbl .pc-schloss { margin-left: 6px; vertical-align: -1px; }
.pc-datei-marke:empty { display: none; }
.pc-marke {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
  border: 1px solid var(--pp-line); border-radius: 999px; background: var(--pp-surface-2);
  color: var(--pp-text-2); font-size: var(--pp-fs-mini); padding: 2px 10px; cursor: pointer;
}
.pc-marke:hover { border-color: var(--pp-accent-line); color: var(--pp-text); }

/* ---------- Dialog ---------- */
.pc-dlg { padding: 0 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.pc-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-zeile > span:first-child { min-width: 92px; color: var(--pp-text-2); font-size: var(--pp-fs-klein); font-weight: 600; }
.pc-zeile-oben { align-items: flex-start; }
.pc-zeile .mt-select { flex: 1 1 200px; min-width: 0; }
.pc-formate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 360px; min-width: 0; }
.pc-format {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-surface);
  color: var(--pp-text); padding: 10px 12px; cursor: pointer; font: inherit;
}
.pc-format:hover { border-color: var(--pp-line-2); background: var(--pp-surface-2); }
.pc-format.on { border-color: var(--pp-accent); box-shadow: inset 0 0 0 1px var(--pp-accent); background: var(--pp-accent-tint); }
.pc-format:focus-visible, .pc-niveau:focus-visible, .pc-pl-k:focus-visible, .pc-pl-tempo:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
/* Niveau und Tempo stehen in Leisten mit overflow: hidden (die runden
   Ecken) — der Ring mit Luft nach außen wurde dort abgeschnitten: WebKit
   maß bei „Einführung", „Experte" und dem gewählten Tempo 0 Ringpixel,
   sonst 88 von ~300 (wa1009-p5). Wie die Behälterliste in css/prepp.css
   (ns0929-p5): der Ring liegt innen. Die gewählte Niveau-Stufe ist eine
   volle Akzentfläche — ein Akzentring darauf trüge nichts, dort steht er
   in der Schriftfarbe der Fläche und mit 1 px Luft zum Rand. */
.pc-niveau:focus-visible { outline-offset: -2px; }
.pc-niveau.on:focus-visible { outline-color: var(--pp-accent-contrast); outline-offset: -4px; }
.pc-format-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-format-z { color: var(--pp-text-2); font-size: var(--pp-fs-mini); line-height: 1.35; }
/* text-2, nicht text-3: auf dem Akzentgrund der gewählten Karte maß WebKit
   mit text-3 nur 4,28 : 1 (dunkel, 08.10.). */
.pc-format-meta { color: var(--pp-text-2); font-size: var(--pp-fs-mini); margin-top: 2px; }
.pc-zuletzt {
  font-size: var(--pp-fs-mini); color: var(--pp-accent-2); border: 1px solid var(--pp-accent-line);
  border-radius: 999px; padding: 0 8px; font-weight: 600;
}
.pc-laenge input[type="range"] { flex: 1 1 200px; min-width: 0; min-height: 30px; accent-color: var(--pp-accent); }
.pc-laenge output { min-width: 56px; text-align: right; font-weight: 600; color: var(--pp-text); }
.pc-niveaus { display: inline-flex; border: 1px solid var(--pp-line); border-radius: 8px; overflow: hidden; flex-wrap: wrap; }
.pc-niveau {
  border: 0; border-right: 1px solid var(--pp-line); background: var(--pp-surface); color: var(--pp-text-2);
  padding: 0 14px; min-height: 30px; font: inherit; font-size: var(--pp-fs-klein); cursor: pointer;
}
.pc-niveau:last-child { border-right: 0; }
.pc-niveau.on { background: var(--pp-accent); color: var(--pp-accent-contrast); font-weight: 600; }
.pc-niveau-satz { margin: -4px 0 0; color: var(--pp-text-2); font-size: var(--pp-fs-klein); }
.pc-anw-auf { align-self: flex-start; }
.pc-anw input { flex: 1 1 220px; min-width: 0; }
.pc-anw-zahl { color: var(--pp-text-3); font-size: var(--pp-fs-mini); }
.pc-kosten {
  margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--pp-line);
  background: var(--pp-surface-2); color: var(--pp-text); font-size: var(--pp-fs-klein);
}
.pc-kosten.pc-kosten-nein { border-color: var(--pp-warn); }
.pc-kosten-warn { color: var(--pp-warn); font-weight: 600; }
.pc-hint { margin: 0; }

/* ---------- Quellen (09.10.2026, docs/PODCAST-QUELLEN-2026-10-09.md) ----------
   Liste der gewählten Quellen (Art-Marke, Name, ✕) und die Auswahl als
   Feld IM Dialog — kein zweiter Portal-Dialog („Ein Portal-Dialog zur Zeit"). */
.pc-quellen { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-q-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.pc-q-titel { color: var(--pp-text-2); font-size: var(--pp-fs-klein); font-weight: 600; }
.pc-q-umfang { color: var(--pp-text-2); font-size: var(--pp-fs-mini); min-width: 0; overflow-wrap: anywhere; }
.pc-q-warn { color: var(--pp-warn); font-weight: 600; }
.pc-q-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-q-zeile {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 0 0 0 10px; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--pp-surface);
}
.pc-q-art {
  flex: none; font-size: var(--pp-fs-mini); font-weight: 600; color: var(--pp-text-2); white-space: nowrap;
  border: 1px solid var(--pp-line); background: var(--pp-surface-2); border-radius: 999px; padding: 1px 8px;
}
.pc-q-zeile .pc-q-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pp-text); font-size: var(--pp-fs-text); }
.pc-q-weg {
  flex: none; min-width: 30px; min-height: 30px; border: 0; border-radius: 6px; background: transparent;
  color: var(--pp-text-2); font: inherit; cursor: pointer;
}
.pc-q-weg:hover { background: var(--pp-surface-2); color: var(--pp-text); }
.pc-q-weg:focus-visible, .pc-q-opt input:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pc-q-leer { color: var(--pp-text-2); font-size: var(--pp-fs-klein); padding: 10px 12px; border: 1px dashed var(--pp-line-2); border-radius: 8px; }
.pc-q-auf { align-self: flex-start; }
.pc-q-auf[hidden] { display: none; }
.pc-q-wahl {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: min(52vh, 380px); overflow: auto;
  border: 1px solid var(--pp-line-2); border-radius: 10px; background: var(--pp-surface-2); padding: 10px 10px 0;
}
.pc-q-wahl[hidden] { display: none; }
.pc-q-suche { width: 100%; box-sizing: border-box; }
.pc-q-gruppen { display: flex; flex-direction: column; gap: 12px; }
.pc-q-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-q-gruppe[hidden] { display: none; }
.pc-q-gruppe > legend {
  padding: 0 0 4px; font-size: var(--pp-fs-mini); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pp-text-2);
}
.pc-q-opt { display: flex; align-items: center; gap: 10px; min-height: 30px; min-width: 0; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.pc-q-opt[hidden] { display: none; }
.pc-q-opt:hover { background: var(--pp-surface); }
.pc-q-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--pp-accent); }
.pc-q-opt-text { display: flex; flex-direction: column; min-width: 0; }
.pc-q-opt .pc-q-name { color: var(--pp-text); font-size: var(--pp-fs-klein); overflow-wrap: anywhere; }
.pc-q-unter { color: var(--pp-text-2); font-size: var(--pp-fs-mini); overflow-wrap: anywhere; }
.pc-q-nichts, .pc-q-ohne { margin: 0; padding: 2px 6px; color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.pc-q-ohne { margin-top: 4px; font-style: italic; }
/* Der Fuß klebt unten in der scrollenden Auswahl — „Fertig" bleibt
   erreichbar, auch wenn die Liste lang ist. */
.pc-q-wahl-fuss {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -10px; padding: 8px 10px; background: var(--pp-surface-2); border-top: 1px solid var(--pp-line);
}
.pc-q-satz { margin: 0; color: var(--pp-text); font-size: var(--pp-fs-klein); padding-left: 10px; border-left: 3px solid var(--pp-warn); }
.pc-q-satz[hidden] { display: none; }
/* „Gerade läuft schon ein KI-Auftrag" (10.10.2026, wa1009 Runde 3 E): der
   sichtbare Grund der gesperrten Bezahl-Knöpfe — im Dialog über dem Fuß,
   auf der Serienseite über der Liste. Gleiche Gestalt wie der Quellen-Satz. */
.pc-belegt-satz { margin: 0 0 10px; color: var(--pp-text); font-size: var(--pp-fs-klein); padding-left: 10px; border-left: 3px solid var(--pp-warn); }
.pc-belegt-satz[hidden] { display: none; }
.pc-neu { display: inline-flex; align-items: center; gap: 6px; }
.pc-serie-quellen > summary { cursor: pointer; list-style-position: inside; }
.pc-serie-quellen ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.pc-serie-quellen li { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.pc-gesperrt-dlg { padding-bottom: 12px; }
.pc-gesperrt-text { color: var(--pp-text); font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); }
.pc-gesperrt-weg { margin-top: 10px; }

/* ---------- Die Hörprobe (Runde 2, 10.10.2026) ----------
   Knopf und eine Zeile daneben: in Ruhe, was gespielt würde („Zwei
   Stimmen: A erklärt, B fragt nach — auf Deutsch"), während der Probe,
   welche Stimme spricht. Im Dialog steht sie in der Zeile „Stimmen", im
   Hinweis der gesperrten Knöpfe unter dem Preis. */
.pc-probe { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; flex: 1 1 360px; min-width: 0; }
.pc-probe-knopf { flex: none; white-space: nowrap; }
.pc-probe-stand { color: var(--pp-text-2); font-size: var(--pp-fs-klein); min-width: 0; overflow-wrap: anywhere; }
.pc-probe-fehler { color: var(--pp-err); }
/* Raster, nicht Flex-Spalte: In einer Spalte würde die flex-basis der
   Probe (360 px, für die Zeile im Dialog gedacht) zur HÖHE — WebKit maß am
   Telefon 360 px Leere um den Knopf. */
.pc-gesperrt-probe { margin-top: 12px; display: grid; gap: 6px; }
.pc-gesperrt-frage { color: var(--pp-text); font-size: var(--pp-fs-klein); font-weight: 600; }

/* ---------- Lauf-Chat: die fertige Folge ---------- */
.pc-lauf-fertig { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--pp-ok); flex: none; }

/* ---------- Unterreiter: Serien ---------- */
.pc-reiter { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.pc-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pc-h2 { margin: 0; font-size: var(--pp-fs-gross); font-weight: 600; color: var(--pp-text); }
.pc-serien { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pc-serie-karte {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-height: 44px;
  border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface);
  color: var(--pp-text); text-decoration: none;
}
.pc-serie-karte:hover { border-color: var(--pp-accent-line); }
.pc-serie-titel { font-weight: 600; font-size: var(--pp-fs-text); overflow-wrap: anywhere; }
.pc-serie-marken { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-badge {
  font-size: var(--pp-fs-mini); font-weight: 600; color: var(--pp-accent-2); border: 1px solid var(--pp-accent-line);
  background: var(--pp-accent-tint); border-radius: 999px; padding: 1px 9px;
}
.pc-badge-2 { color: var(--pp-text-2); border-color: var(--pp-line); background: var(--pp-surface-2); }
.pc-serie-quelle { color: var(--pp-text-2); font-size: var(--pp-fs-mini); overflow-wrap: anywhere; }
.pc-serie-zahl { color: var(--pp-text-3); font-size: var(--pp-fs-mini); }
/* Der erklärende Leerzustand (09.10.2026) ist zwei Absätze lang — auf dem
   Laptop liefen sie sonst über die ganze Kartenbreite (≈ 970 px Zeile). */
.pc-leer .mt-hint { max-width: 64ch; margin-left: auto; margin-right: auto; }

/* ---------- Serienseite ---------- */
.pc-serie { display: flex; flex-direction: column; gap: 12px; }
.pc-serie-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pc-serie-kopf-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-serie-kopf-text .pc-h2 { overflow-wrap: anywhere; }
/* „‹ Zurück" ist ein Textverweis wie der Rückweg des Trainings (.tr-back)
   und die Brotkrume „Alle Kurse ›" — kein Rahmenknopf (Runde 2, Empfehlung
   zu Frage F1 von wa1009-p5); als a.pp-btn stand er mit 33 px neben 30 px
   hohen Knöpfen. Auf dem Finger 44 px hoch (Abschnitt am Ende). `a.`
   davor: .pp-root a (Linkfarbe, Spezifität 0,1,1) schlug die bloße Klasse
   (WebKit: blau); bei gleicher Spezifität entscheidet die Reihenfolge, und
   podcast.css lädt später. Die Höhe steht an der bloßen Klasse, damit die
   44 px des Fingers (gleiche Spezifität, weiter unten) sie ablösen. */
a.pc-zurueck {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  color: var(--pp-text-2); font-size: var(--pp-fs-klein); font-weight: 500;
}
.pc-zurueck { min-height: 30px; }
a.pc-zurueck:hover { color: var(--pp-accent-2); }
.pc-serie-weg { display: inline-flex; align-items: center; gap: 4px; }
.pc-eps { display: flex; flex-direction: column; gap: 10px; }
.pc-ep {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px;
  border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface);
}
.pc-ep-laeuft { border-color: var(--pp-accent-line); }
.pc-ep-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-ep-nr { font-size: var(--pp-fs-mini); letter-spacing: .06em; color: var(--pp-text-3); font-weight: 600; }
.pc-gehoert { color: var(--pp-ok); letter-spacing: 0; }
.pc-ep-titel { font-weight: 600; color: var(--pp-text); overflow-wrap: anywhere; }
.pc-ep-meta { color: var(--pp-text-2); font-size: var(--pp-fs-mini); }
.pc-ep-beschr { color: var(--pp-text-2); font-size: var(--pp-fs-klein); line-height: 1.4; }
.pc-ep-akt { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
/* Der Inhalt steckt in EINEM Span: Als Flex-Kinder fielen die reinen
   Leerzeichen zwischen den t()-Spans weg („Fortfahren0:48", WebKit 08.10.). */
.pc-zustand { display: inline-flex; align-items: center; white-space: nowrap; }
.pc-zustand.pc-gesperrt { color: var(--pp-text-3); border-style: dashed; }
/* „Fehler — erneut" startet wie „Generieren" einen bezahlten Lauf und
   trägt dann .ki-direkt (Runde 2, „Ein Stil für Bezahl-Knöpfe") — die
   Fehlerfarbe gilt nur für den gesperrten Knopf, sonst stünde rote Schrift
   auf dem dunkelroten Grund. */
.pc-zustand.pc-fehler:not(.ki-direkt) { border-color: var(--pp-err); color: var(--pp-err); }
/* „spielt" (Runde 2, Befund 17 der Web-App-Abnahme): die Folge, die gerade
   in der Leiste läuft — ein Zustand, kein Angebot, deshalb ohne Akzentgrund;
   der grüne Punkt ist derselbe wie an der fertigen Folge im Lauf-Chat. */
.pc-zustand.pc-spielt { color: var(--pp-text); border-color: var(--pp-ok); }
.pc-spielt-punkt { display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-ok); margin-right: 7px; }
@keyframes pc-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pp-anim .pc-spielt-punkt { animation: pc-puls 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pp-anim .pc-spielt-punkt { animation: none; } }
.pc-laeuft { color: var(--pp-accent-2); }
.pc-mehr {
  min-width: 30px; min-height: 30px; border: 1px solid var(--pp-line); border-radius: 6px;
  background: var(--pp-surface); color: var(--pp-text-2); font-size: 18px; cursor: pointer;
}
.pc-mehr:hover { background: var(--pp-surface-2); color: var(--pp-text); }

/* ---------- Die Player-Leiste ---------- */
/* Platz unter der Seite, solange die Leiste steht — EINE Größe,
   --pc-polster. Seit dem 10.10.2026 (docs/PODCAST-LEISTE-2026-10-10.md)
   misst js/podcast.js (polsterMessen) die Leiste und trägt ihre Höhe
   + 4 px am body ein; die Stufen hier gelten bis dahin (erstes Bild,
   Browser ohne ResizeObserver) und stehen je auf der in WebKit
   gemessenen Höhe + 4 px, in der Reihenfolge, in der sie einander
   schlagen:
     Laptop (Maus, ab 861 px)       eine Zeile, Leiste 49 px  → 53 px
                                    (bis Runde 3: zwei Zeilen, 91 → 100)
     schmales Fenster mit Maus und  eine Zeile mit 44er Knöpfen,
     jeder Finger über 640 px       Leiste 61 px → 65 px
     Telefon (mit Maus und Finger)  zwei Zeilen, Leiste 109 px → 113 px
                                    (bis Runde 3: drei Zeilen, 205 → 220)
   Wer eine Knopfhöhe der Leiste ändert, misst sie neu und zieht hier
   nach (test/verify-podcast-leiste-1010.js, verify-wa1009-gesamt.js E). */
body.pc-player-an { --pc-polster: 53px; padding-bottom: var(--pc-polster); }
@media (pointer: coarse), (max-width: 860px) { body.pc-player-an { --pc-polster: 65px; } }
@media (max-width: 640px) { body.pc-player-an { --pc-polster: 113px; } }

.pc-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--pp-bg-2); border-top: 1px solid var(--pp-line-2);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .14); color: var(--pp-text);
  /* Die Leiste hängt am body, nicht in .pp-root — die Schrift des Portals
     erbt sie dort nicht (WebKit-Abnahme 08.10.: sie stand in Times). */
  font-family: var(--pp-sans); font-size: var(--pp-fs-klein);
  /* Innen die Spalte von .pp-page (.pc-pl-inhalt): höchstens 1120 px samt
     Rand, und der Rand ist der der Seite — 20 px, wo die Seitenleiste ein
     Menü ist, 30 px neben der Leiste (unten), 12 px am Telefon (unten). */
  --pc-rand: 20px;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.pc-player[hidden] { display: none; }
/* Der Behälter ist das INNERE, nicht die Leiste selbst: An der angekerten
   Leiste wertet WebKit 26 eine Container-Abfrage mit der Breite VOR dem
   Anker aus (Runde 3, gemessen), an ihrem Kind mit der richtigen. Das
   Raster sitzt deshalb eine Ebene tiefer (.pc-pl-reihe). */
.pc-pl-inhalt {
  box-sizing: border-box; max-width: 1120px; padding: 0 var(--pc-rand); margin: 0 auto;
  container: pc-leiste / inline-size;
}
/* EINE Zeile (Jonas, 10.10.2026: „kompakter … damit es nicht so viel
   Platz in einer Reihe mit den Fortschrittsbalken einnimmt"):
     Titel · ⏮ −10 ▶ +10 ⏭ · 0:12 ——— −4:48 · 1× · ✕
   Die Knöpfe sind Geschwister im Raster, damit die zweizeilige Fassung
   (unten) dieselben Knöpfe nur umstellt. Der Titel bekommt ein Drittel
   des freien Platzes, der Regler zwei. */
.pc-pl-reihe {
  display: grid; align-items: center; gap: 4px;
  grid-template-columns: minmax(7rem, 1fr) repeat(5, auto) minmax(9rem, 2fr) auto auto;
  grid-template-areas: "titel vor zur spiel vorw nach zeit tempo zu";
}
.pc-pl-titel {
  grid-area: titel; display: flex; align-items: baseline; gap: 8px; min-width: 0;
  white-space: nowrap; margin-right: 8px;
}
.pc-pl-nr { flex: none; font-size: var(--pp-fs-mini); color: var(--pp-text-3); letter-spacing: .06em; font-weight: 600; }
.pc-pl-name { min-width: 0; font-weight: 600; color: var(--pp-text); overflow: hidden; text-overflow: ellipsis; }
.pc-pl-vor { grid-area: vor; }
.pc-pl-zur { grid-area: zur; }
.pc-pl-spiel { grid-area: spiel; }
.pc-pl-vorw { grid-area: vorw; }
.pc-pl-nach { grid-area: nach; }
.pc-pl-zeit { grid-area: zeit; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 8px; }
.pc-pl-tempo { grid-area: tempo; }
.pc-pl-zu { grid-area: zu; }
.pc-pl-regler { flex: 1 1 auto; min-width: 0; min-height: 30px; margin: 0; accent-color: var(--pp-accent); }
.pc-pl-jetzt, .pc-pl-rest { flex: none; font-size: var(--pp-fs-mini); color: var(--pp-text-2); min-width: 34px; font-variant-numeric: tabular-nums; }
.pc-pl-rest { text-align: right; min-width: 40px; }
/* Mit Maus die Höhe des Portals (30 px wie .pp-btn.slim und die
   Segmente), randlos — Symbolknöpfe, die erst beim Überfahren eine Fläche
   zeigen. ▶ ist der eine gefüllte Knopf. Die 44 px stehen im Block „Auf
   dem Finger" gleich darunter. */
.pc-pl-k, .pc-pl-tempo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 30px; padding: 0 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--pp-text-2); font: inherit; font-weight: 600; cursor: pointer;
}
.pc-pl-k:hover:not([disabled]) { background: var(--pp-surface-2); color: var(--pp-text); }
.pc-pl-k[disabled] { opacity: .4; cursor: default; }
.pc-pl-spiel {
  min-width: 32px; min-height: 32px; border-radius: 50%; padding: 0;
  background: var(--pp-accent); color: var(--pp-accent-contrast); margin: 0 2px;
}
.pc-pl-spiel:hover:not([disabled]) { background: var(--pp-accent-2); color: var(--pp-accent-contrast); }
/* Das Tempo: EIN Umschalter, der Wert als kleine Pille im Knopf (die
   Fläche des Knopfs bleibt die Trefferfläche). */
.pc-pl-tempo { padding: 0 2px; }
.pc-pl-tempo-wert {
  display: inline-block; min-width: 38px; padding: 2px 6px; box-sizing: border-box; text-align: center;
  border: 1px solid var(--pp-line); border-radius: 999px; background: var(--pp-surface);
  font-size: var(--pp-fs-mini); color: var(--pp-text); font-variant-numeric: tabular-nums;
}
.pc-pl-tempo:hover .pc-pl-tempo-wert { border-color: var(--pp-accent-line); }
.pc-pl-meldung { margin-top: 4px; color: var(--pp-err); font-size: var(--pp-fs-mini); text-align: center; }
.pc-audio { display: none; }
/* ZWEI Zeilen, wo eine nicht passt — am Telefon und in einer schmalen
   Inhaltsspalte (Seitenleiste in einem engen Fenster weit aufgezogen):
     Titel ………………… ⏮ ⏭ 1× ✕
     −10 ▶ +10  0:12 ——— −4:48
   Die Grenze ist die kleinste Breite, in der die Zeile oben samt 7rem
   Titel und 9rem Regler noch steht (mit Maus 30er Knöpfe: rund 520 px;
   auf dem Finger und im schmalen Fenster 44er: rund 632 px). Das Polster
   folgt der gemessenen Höhe (js/podcast.js polsterMessen). */
@container pc-leiste (max-width: 540px) {
  .pc-pl-reihe {
    grid-template-columns: repeat(3, auto) minmax(0, 1fr) repeat(4, auto);
    grid-template-areas: "titel titel titel titel vor nach tempo zu" "zur spiel vorw zeit zeit zeit zeit zeit";
  }
  .pc-pl-zeit { margin: 0 0 0 6px; }
}
@media (pointer: coarse), (max-width: 860px) {
  @container pc-leiste (max-width: 640px) {
    .pc-pl-reihe {
      grid-template-columns: repeat(3, auto) minmax(0, 1fr) repeat(4, auto);
      grid-template-areas: "titel titel titel titel vor nach tempo zu" "zur spiel vorw zeit zeit zeit zeit zeit";
    }
    .pc-pl-zeit { margin: 0 0 0 6px; }
  }
}
/* Auf dem Finger und, wie R3, im schmalen Fenster: 44 px Trefferfläche.
   Sichtbar bleibt es kompakt: Die Knöpfe sind randlos, nur ▶ ist eine
   gefüllte Fläche, und die Tempo-Pille bleibt klein im 44er Knopf. VOR dem
   Telefon-Block. */
@media (pointer: coarse), (max-width: 860px) {
  .pc-pl-k, .pc-pl-tempo { min-width: 44px; min-height: 44px; }
  .pc-pl-spiel { min-width: 44px; min-height: 44px; }
  .pc-pl-tempo { min-width: 52px; }
}
/* Die Leiste steht an der INHALTSSPALTE, nicht im ganzen Fenster
   (Runde 3, 10.10.2026; Befund 25 von wa1009-p5; Jonas am 10.10.: „nicht
   über die linke Seite hinaus … bündig"). Sie hängt am body und läge mit
   left: 0; right: 0 links unter der Seitenleiste. Wo die Seitenleiste eine
   LEISTE ist (sticky, 100vh — mit Maus ab 861 px, auf Touch ab 1201 px;
   sonst ist sie ein Menü im Fluss, css/prepp.css), folgen ihre Kanten
   `.pp-main` — über einen CSS-Anker statt über eine gerechnete Breite:
   Die Seitenleiste ist ziehbar (--pp-side-w, 90–420 px), einklappbar (die
   58-px-Schmalspur .pp-rail) und fährt weg, wenn sie nicht fixiert ist
   (.pp-side-weg, mit Übergang) — der Anker folgt allen dreien ohne eine
   Zeile Skript, auch WÄHREND des Ziehens. Ohne .pp-main (eine Seite ohne
   Portalrahmen) greift der Rückfallwert 0: die volle Breite. Der Rand ist
   hier der der Seite neben der Leiste (.pp-page: 30 px). */
.pp-root > .pp-main { anchor-name: --pp-inhalt; }
@media (min-width: 861px) and (pointer: fine), (min-width: 1201px) {
  .pc-player { left: anchor(--pp-inhalt left, 0px); right: anchor(--pp-inhalt right, 0px); --pc-rand: 30px; }
}
/* Der Feedback-Knopf (css/feedback.css: unten rechts, z 90, sichtbar
   genau dort, wo die Seitenleiste eine Leiste ist) rückt über die Leiste,
   solange sie steht — dasselbe, was er über der unteren Leiste der
   Prüfungsansicht tut. An der Inhaltsspalte reicht die Leiste bis an den
   rechten Fensterrand, und der Knopf lag auf ihr: gemessen (WebKit) über
   der Laufzeit „2:02" auf MBP 1280, 1024 und 861 px, bei 861 px mit
   aufgezogener Seitenleiste mitten auf ✕ (vorher, mittig im ganzen
   Fenster, endete die Leiste 30–90 px vor ihm). 6 px über dem Polster
   sind 15 px über der Leiste, fast die 16 px, die er sonst zum Rand hält;
   das Panel steht wie sonst 54 px über dem Knopf. */
body.pp-mode.pc-player-an .pp-fb-btn { bottom: calc(var(--pc-polster) + 6px); }
body.pp-mode.pc-player-an .pp-fb-panel { bottom: calc(var(--pc-polster) + 60px); }
/* Rückfall für Browser ohne CSS-Anker (Safari vor 26, Chrome vor 125):
   Dort liegt die Leiste weiter über die volle Breite, und der Fuß der
   Seitenleiste — Konto, „Feedback geben", die Rechtslinks und „Verträge
   hier kündigen", der ständig erreichbar sein muss — läge unter ihr. Nur
   dort bekommt sie unten ihr eigenes Polster (18 px, css/prepp.css) plus
   das der Seite; reicht die Höhe nicht, rollt sie in sich. Mit Anker
   liegt die Leiste nicht mehr unter ihr, und das Polster entfällt. */
@supports not (anchor-name: --pp-inhalt) {
  @media (min-width: 861px) and (pointer: fine), (min-width: 1201px) {
    body.pc-player-an .pp-side { padding-bottom: calc(18px + var(--pc-polster)); }
  }
}
/* Mit Anker wandert das Polster vom body in die Inhaltsspalte. Am body
   endete .pp-root 112 px über dem Seitenende, und die sticky Seitenleiste
   (an .pp-root gebunden) wurde beim Rollen bis ganz unten um genau so
   viel hochgeschoben — links neben der Leiste klaffte ein leeres
   236 × 112-px-Loch, das die alte, volle Leiste noch verdeckt hatte
   (WebKit, Mac 1440, ganz unten gerollt: Seitenleiste bis y = 788, Leiste
   ab 796). In .pp-main gestreckt, reicht .pp-root bis ans Seitenende, und
   die Seitenleiste bleibt bis zum unteren Fensterrand stehen. Seiten ohne
   Portalrahmen behalten das Polster am body (:has). */
@supports (anchor-name: --pp-inhalt) {
  @media (min-width: 861px) and (pointer: fine), (min-width: 1201px) {
    body.pc-player-an:has(.pp-root > .pp-main) { padding-bottom: 0; }
    body.pc-player-an .pp-root > .pp-main { padding-bottom: var(--pc-polster); }
  }
}
.pc-platz { white-space: nowrap; }

/* Einblenden der Leiste nur unter dem Animationsschalter. */
@keyframes pc-auf { from { transform: translateY(100%); } to { transform: none; } }
.pp-anim .pc-player:not([hidden]) { animation: pc-auf .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .pp-anim .pc-player:not([hidden]) { animation: none; } }

/* ---------- Telefon ---------- */
@media (max-width: 640px) {
  .pc-zeile > span:first-child { min-width: 0; width: 100%; }
  .pc-formate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex-basis: 100%; }
  .pc-format { padding: 8px 10px; }
  .pc-niveaus { width: 100%; }
  .pc-niveau { flex: 1 1 0; padding: 0 6px; }
  /* Die Leiste: zwei Zeilen (Container-Abfrage oben); 12 px Rand und
     2 px Lücke, damit die sieben 44er Knöpfe auch bei 360 px nebeneinander
     passen (7 × 44 + 7 × 2 = 322 ≤ 360 − 2 × 12). */
  .pc-player { --pc-rand: 12px; }
  .pc-pl-reihe { column-gap: 2px; }
  .pc-pl-tempo { min-width: 44px; }
  .pc-pl-spiel { margin: 0; }
  .pc-ep-akt { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ---------- Auf dem Finger (wa1009-p5) ----------
   Gemessen per Tipp-Probe in WebKit (Telefon 390 px): der Regler der
   Leiste 32 px hoch, die 🎧-Marke an der Datei 28 px. Der Regler bekommt
   die volle Höhe (sein Griff bleibt, wie er ist); die Marke einen
   unsichtbaren Vorsatz nach oben und unten — Muster der Knopfreihe des
   KI-Chats (css/prepp.css): mit Maus pixelgleich, und die Zeile wird
   nicht höher. Seit der kompakten Leiste (10.10.2026) stehen neben dem
   Regler 44er Knöpfe in derselben Zeile — sie wird durch ihn nicht mehr
   höher (docs/PODCAST-LEISTE-2026-10-10.md). */
@media (pointer: coarse) {
  /* Der Griff wird mit dem Daumen gezogen: wirksam 32 → 44 px. */
  .pc-pl-regler { min-height: 44px; }
  .pc-marke { position: relative; }
  /* Nach oben mehr als nach unten: Auf dem Telefon stehen die Hauptknöpfe
     der Zeile 6 px darunter — ein gleichmäßiger Vorsatz (−8 px) lag auf
     ihnen und blieb bei 42 px wirksam. Darüber steht nur Text (Name,
     Seitenzahl). 46 statt 44 px: Die Zeile liegt auf halben Pixeln, und
     die Tipp-Probe traf mit genau 44 px nur 42–43. */
  .pc-marke::after { content: ""; position: absolute; inset: -12px 0 -6px; }
}

/* ---------- 44 px nur auf dem Finger (Runde 2, 10.10.2026) ----------
   Jonas' Entscheidung „Knopfhöhe" (Frage F1 von wa1009-p5): Serienseite
   und Dialog trugen 44 px hohe Knöpfe auch mit Maus — überall sonst im
   Portal sind es 30–36 px (.pp-btn 36, .pp-btn.slim 30, Segmente und das
   ⋯ 30; WebKit gemessen), und 44 px gibt es nur auf dem Finger (R3). Mit
   Maus gilt hier jetzt die Höhe des Portals; die 44 px stehen in EINER
   Abfrage: auf jedem Finger (auch über 1200 px, wo der R3-Block in
   css/prepp.css nicht mehr greift) und, wie R3, im schmalen Fenster. Die
   vier Stellen mit eigener 40-px-Höhe (Abspielen im Lauf-Chat, ＋ Neuer
   Podcast, Sprache, Anweisung — Nachlese der Hauptsitzung vom 10.10.)
   tragen mit Maus keine eigene Höhe mehr und stehen ebenfalls hier. Die
   Player-Leiste folgt seit Runde 3 derselben Regel (Jonas: „Player-Leiste
   am Laptop schlanker"); ihre Knöpfe stehen in einem eigenen Block mit
   dieser Abfrage direkt bei der Leiste — vor dem Telefon-Block, dessen
   Breiten dort gewinnen müssen —, und ihre Höhe trägt das Polster unter
   der Seite (--pc-polster). */
@media (pointer: coarse), (max-width: 860px) {
  .pc-format { min-height: 44px; }
  .pc-niveau { min-height: 44px; }
  .pc-laenge input[type="range"] { min-height: 44px; }
  .pc-q-zeile { min-height: 44px; }
  .pc-q-weg { min-width: 44px; min-height: 44px; }
  .pc-q-opt { min-height: 44px; }
  .pc-q-suche { min-height: 44px; }
  .pc-mehr { min-width: 44px; min-height: 44px; }
  /* „‹ Zurück" ist kurz (38 px am Telefon, englisch „‹ Back") — die Breite dazu. */
  .pc-zurueck { min-width: 44px; }
  .pc-anw-auf, .pc-q-auf, .pc-q-wahl-fuss .pp-btn, .pc-dlg .mt-form-fuss .pp-btn, .pc-probe-knopf,
  .pc-zurueck, .pc-serie-weg, .pc-zustand, .pc-leer .pp-btn,
  .pc-lauf-fertig .pp-btn, .pc-neu, .pc-zeile .mt-select, .pc-anw input { min-height: 44px; }
}