/* Podcast-Studio
   Flächen und Töne statt Umrisse (Florian, 21.10.2026). Bewegung nur dort, wo sie
   Rückmeldung gibt: Druck auf Knöpfe und Karten, Fortschritt im Player. Reiter,
   Filter und Listen wechseln ohne Animation, weil sie oft benutzt werden. */

:root {
  /* Eisblau, Marine, Pink (Florian, 01.11.2026, drittes Beispiel aus dem zweiten Video): zwei Farben setzen
     die Stimmung, Pink ist der eine Akzent für den nächsten Schritt */
  --bg: #eff2f6;
  --flaeche: #ffffff;
  --flaeche-2: #eaeef3;
  --flaeche-3: #dee3ea;
  --text: #1a2233;
  --leise: #576072;
  --sehr-leise: #6a7385;
  /* Ruhiges Marine (Florian, 01.11.2026: „das Blau könnte ruhiger sein“): Schieferblau statt Königsblau */
  --akzent: #34446b;
  --akzent-verlauf: linear-gradient(135deg, #4a5a82, #3a4a72 55%, #2f3d61);
  --auf-akzent: #ffffff;
  --erhaben: #ffffff;
  --akzent-flaeche: #e6e9f0;
  --akzent-text: #33436a;
  --pink: #ec5c96;
  --pink-verlauf: linear-gradient(135deg, #ff86b6, #ef5f99 55%, #d8447f);
  --pink-flaeche: #fde6ef;
  --pink-text: #b5265e;
  --schatten: 0 1px 2px rgba(26, 34, 51, .04), 0 4px 16px rgba(26, 34, 51, .06);
  --schatten-hoch: 0 2px 4px rgba(26, 34, 51, .06), 0 12px 32px rgba(26, 34, 51, .11);
  --schatten-dialog: 0 4px 12px rgba(26, 34, 51, .08), 0 28px 64px rgba(26, 34, 51, .22);
  --abdunkeln: rgba(14, 20, 34, .32);

  --ph-idee: #eceaf0;       --ph-idee-t: #5f5b6c;
  --ph-text: #e3ecfb;       --ph-text-t: #2f5aa8;
  --ph-text-g: #c9dbfa;     --ph-text-g-t: #1d4690;
  --ph-audio: #fbefd9;      --ph-audio-t: #8a5a0b;
  --ph-audio-g: #f6dcab;    --ph-audio-g-t: #6e4304;
  --ph-entwurf: #efe6f7;    --ph-entwurf-t: #7240a0;
  --ph-geplant: #d9eef7;    --ph-geplant-t: #155e7d;   /* cyan statt Grün, damit Eingeplant nicht wie Veröffentlicht aussieht (03.11.2026) */
  --ph-veroeffentlicht: #e2f3e4; --ph-veroeffentlicht-t: #2c6b35;
  --warn: #fde8e4;          --warn-t: #a3361f;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 14px;
  --radius-klein: 9px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

/* Dunkel: nach System, außer jemand hat Hell gewählt; oder ausdrücklich Dunkel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1016;
    --flaeche: #151a23;
    --flaeche-2: #1c222d;
    --flaeche-3: #262d3a;
    --text: #e9ecf2;
    --leise: #a5acba;
    --sehr-leise: #8a91a0;
    --akzent: #a7b2cc;
    --akzent-verlauf: linear-gradient(135deg, #4d5b7c, #414f6f 55%, #374462);
    --auf-akzent: #ffffff;
    --erhaben: #212836;
    --akzent-flaeche: #222a3a;
    --akzent-text: #c3cbdd;
    --pink: #ff7aae;
    --pink-verlauf: linear-gradient(135deg, #ff93c0, #f56ba3 55%, #e04f8a);
    --pink-flaeche: #3c1a2c;
    --pink-text: #ffa3c8;
    /* Im Dunkeln trägt der Schatten kaum: eine feine helle Oberkante gibt den Karten Tiefe (keine Umrisse) */
    --schatten: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
    --schatten-hoch: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
    --schatten-dialog: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 12px rgba(0, 0, 0, .5), 0 32px 72px rgba(0, 0, 0, .6);
    --abdunkeln: rgba(0, 0, 0, .5);

    --ph-idee: #2a2834;       --ph-idee-t: #c2bed0;
    --ph-text: #1d2a44;       --ph-text-t: #9dbdf5;
    --ph-text-g: #233862;     --ph-text-g-t: #c0d5fa;
    --ph-audio: #3a2c14;      --ph-audio-t: #f2c67e;
    --ph-audio-g: #4b3815;    --ph-audio-g-t: #f8d9a0;
    --ph-entwurf: #33243f;    --ph-entwurf-t: #d6b0f3;
    --ph-geplant: #122e3a;    --ph-geplant-t: #8fd3ef;
    --ph-veroeffentlicht: #183421; --ph-veroeffentlicht-t: #93daa0;
    --warn: #3e1e19;          --warn-t: #f5a896;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0d1016;
    --flaeche: #151a23;
    --flaeche-2: #1c222d;
    --flaeche-3: #262d3a;
    --text: #e9ecf2;
    --leise: #a5acba;
    --sehr-leise: #8a91a0;
    --akzent: #a7b2cc;
    --akzent-verlauf: linear-gradient(135deg, #4d5b7c, #414f6f 55%, #374462);
    --auf-akzent: #ffffff;
    --erhaben: #212836;
    --akzent-flaeche: #222a3a;
    --akzent-text: #c3cbdd;
    --pink: #ff7aae;
    --pink-verlauf: linear-gradient(135deg, #ff93c0, #f56ba3 55%, #e04f8a);
    --pink-flaeche: #3c1a2c;
    --pink-text: #ffa3c8;
    /* Im Dunkeln trägt der Schatten kaum: eine feine helle Oberkante gibt den Karten Tiefe (keine Umrisse) */
    --schatten: inset 0 1px 0 rgba(255, 255, 255, .045), 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
    --schatten-hoch: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
    --schatten-dialog: inset 0 1px 0 rgba(255, 255, 255, .07), 0 4px 12px rgba(0, 0, 0, .5), 0 32px 72px rgba(0, 0, 0, .6);
    --abdunkeln: rgba(0, 0, 0, .5);

    --ph-idee: #2a2834;       --ph-idee-t: #c2bed0;
    --ph-text: #1d2a44;       --ph-text-t: #9dbdf5;
    --ph-text-g: #233862;     --ph-text-g-t: #c0d5fa;
    --ph-audio: #3a2c14;      --ph-audio-t: #f2c67e;
    --ph-audio-g: #4b3815;    --ph-audio-g-t: #f8d9a0;
    --ph-entwurf: #33243f;    --ph-entwurf-t: #d6b0f3;
    --ph-geplant: #122e3a;    --ph-geplant-t: #8fd3ef;
    --ph-veroeffentlicht: #183421; --ph-veroeffentlicht-t: #93daa0;
    --warn: #3e1e19;          --warn-t: #f5a896;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }
.zahl, td.zahl, .tabellarisch { font-variant-numeric: tabular-nums; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
}
.kopf-innen {
  max-width: 1200px; margin: 0 auto; padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 28px;
}
.marke { font-weight: 700; letter-spacing: -0.02em; font-size: 15px; display: flex; align-items: center; gap: 9px; }
.marke-punkt {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(140deg, #ff86b6 0%, #ef5f99 35%, #34446b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.navi { display: flex; gap: 4px; }
.navi a {
  padding: 6px 12px; border-radius: 999px; color: var(--leise); font-weight: 520;
  transition: background-color 150ms ease, color 150ms ease;
}
.navi a[aria-current="page"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
@media (hover: hover) and (pointer: fine) {
  .navi a:hover { color: var(--text); }
}
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--leise); font-size: 13px; }
/* das Auge ersetzt den Punkt */
.leiser-knopf { color: var(--leise); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }

.seite { max-width: 1200px; margin: 0 auto; padding: 20px 24px 120px; }

/* Abschnitte */
.abschnitt { margin-top: 36px; }
.abschnitt:first-child { margin-top: 8px; }
.abschnitt-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.abschnitt-kopf h2 { font-size: 15px; }
.abschnitt-kopf .leise { font-size: 13px; }
.leise { color: var(--leise); }
.sehr-leise { color: var(--sehr-leise); }

/* Druckbares: Rückmeldung beim Drücken (Emil: scale 0.97, 160ms ease-out) */
/* Der Druck selbst kommt aus belohnung.js (.gedrueckt, läuft immer ganz durch). Kein zweiter :active-Effekt mehr,
   sonst tauchte ein gehaltener Knopf erst ein, federte zurück und tauchte wieder ein (Emil-Prüfung 04.11.2026). */
.drueckbar { transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 150ms ease, filter 150ms ease; }

/* Podcast-Karten */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.karte {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--flaeche); border-radius: var(--radius); padding: 18px 18px 16px;
  box-shadow: var(--schatten);
}
@media (hover: hover) and (pointer: fine) {
  a.karte:hover { box-shadow: var(--schatten-hoch); }
}
.karte-vor { font-size: 12px; color: var(--sehr-leise); font-weight: 520; }
.karte-name { font-size: 18px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.2; }
.karte-werte { display: flex; gap: 18px; }
.wert.leise b { color: var(--leise); }
.wert b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.wert span { font-size: 12px; color: var(--leise); }
.karte-fuss { margin-top: auto; font-size: 12.5px; color: var(--leise); display: flex; gap: 8px; align-items: center; min-height: 22px; }
.karte-fuss .titel { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Plaketten */
.plakette {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.ph-idee { background: var(--ph-idee); color: var(--ph-idee-t); }
.ph-text { background: var(--ph-text); color: var(--ph-text-t); }
.ph-text_geprueft { background: var(--ph-text-g); color: var(--ph-text-g-t); }
.ph-audio { background: var(--ph-audio); color: var(--ph-audio-t); }
.ph-audio_geprueft { background: var(--ph-audio-g); color: var(--ph-audio-g-t); }
.ph-entwurf { background: var(--ph-entwurf); color: var(--ph-entwurf-t); }
.ph-geplant { background: var(--ph-geplant); color: var(--ph-geplant-t); }
.ph-veroeffentlicht { background: var(--ph-veroeffentlicht); color: var(--ph-veroeffentlicht-t); }
.warn { background: var(--warn); color: var(--warn-t); }
.neutral { background: var(--flaeche-2); color: var(--leise); }

/* Listen */
.liste { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px 92px 64px 64px;
  align-items: center; gap: 16px; padding: 12px 18px;
  transition: background-color 120ms ease;
}
.zeile + .zeile { box-shadow: inset 0 1px 0 var(--flaeche-2); }
@media (hover: hover) and (pointer: fine) {
  a.zeile:hover { background: var(--flaeche-2); }
}
a.zeile:active { background: var(--flaeche-3); }
.zeile-titel { min-width: 0; }
.zeile-titel b { font-weight: 580; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile-titel span { display: block; font-size: 12.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .rechts { text-align: right; font-variant-numeric: tabular-nums; color: var(--leise); font-size: 13px; }
.zeile-kopf { font-size: 12px; color: var(--sehr-leise); font-weight: 560; padding-top: 10px; padding-bottom: 8px; }
.zeile.bewegt { grid-template-columns: minmax(0, 1fr) 150px 128px 110px; }
.zeile.quellen { grid-template-columns: minmax(0, 1fr) 190px 150px 190px; }
.hinweis { background: var(--warn); color: var(--warn-t); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 520; margin: -6px 0 18px; }
.leer { padding: 40px 18px; text-align: center; color: var(--leise); }

/* Werkzeugleiste: Reiter und Suche */
.werkzeuge { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.reiter { display: inline-flex; gap: 2px; padding: 3px; background: var(--flaeche-2); border-radius: 11px; overflow-x: auto; max-width: 100%; }
.reiter a {
  padding: 5px 11px; border-radius: 8px; font-size: 13px; font-weight: 540; color: var(--leise);
  white-space: nowrap; display: inline-flex; gap: 6px; align-items: baseline;
}
.reiter a small { font-size: 11.5px; color: var(--sehr-leise); font-variant-numeric: tabular-nums; }
.reiter a[aria-current="true"] { background: var(--erhaben); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); }
.suche {
  margin-left: auto; height: 34px; width: 240px; max-width: 100%;
  border: 0; border-radius: 10px; padding: 0 12px;
  background: var(--flaeche-2); color: var(--text); font: inherit; outline: none;

}
.suche:focus { background: var(--flaeche); box-shadow: var(--schatten); }
.suche::placeholder { color: var(--sehr-leise); }

/* Seitenkopf */
.pfad { font-size: 13px; color: var(--leise); margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.pfad a { color: var(--leise); }
@media (hover: hover) and (pointer: fine) { .pfad a:hover { color: var(--text); } }
.seitenkopf { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.seitenkopf h1 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.15; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 999px; background: var(--flaeche); box-shadow: var(--schatten);
  font-size: 12.5px; font-weight: 540; color: var(--leise);
}
a.chip { color: var(--text); }
@media (hover: hover) and (pointer: fine) { a.chip:hover { box-shadow: var(--schatten-hoch); } }
.chip.warn { box-shadow: none; background: var(--warn); color: var(--warn-t); }

/* Folge */
.folge-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.teaser { font-size: 16px; line-height: 1.5; color: var(--leise); max-width: 70ch; margin: 6px 0 0; }
.blatt { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 28px 34px 34px; }
.blatt-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.blatt-kopf h2 { font-size: 15px; }
.lesetext { font-size: 16px; line-height: 1.72; max-width: 68ch; }
.lesetext p { margin: 0 0 1em; }
.lesetext p.ueberschrift { font-weight: 650; font-size: 15px; margin-top: 1.6em; letter-spacing: -0.01em; }
.tag {
  display: inline-block; padding: 0 7px; margin: 0 1px; border-radius: 6px;
  background: var(--akzent-flaeche); color: var(--akzent-text);
  font-size: 12px; font-weight: 600; line-height: 20px; vertical-align: 1px;
}
/* Rechte Spalte scrollt für sich (Florian, 30.10.2026): sie bleibt stehen,
   der Text scrollt mit der Seite. Unten Platz für den Player. */
.seitenleiste {
  display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; align-self: start;
  max-height: calc(100vh - 76px - 16px); max-height: calc(100dvh - 76px - 16px); overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 96px; margin-bottom: -96px; scrollbar-width: thin; scrollbar-color: var(--flaeche-3) transparent;
  /* Platz für die Schatten der Kästen: der Scrollbereich schneidet sonst links und rechts ab (Florian, 04.11.2026) */
  padding-left: 20px; padding-right: 20px; margin-left: -20px; margin-right: -20px; padding-top: 4px; margin-top: -4px;
}
.seitenleiste > * { flex-shrink: 0; }
.kasten { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 18px; }
.kasten h3 { font-size: 13px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.kasten h3 .leise { font-weight: 500; }
.urteil { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.befund { font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: var(--radius-klein); background: var(--flaeche-2); margin-top: 6px; }
.befund small { display: block; color: var(--leise); margin-top: 3px; }
.protokoll { font-size: 12.5px; line-height: 1.55; color: var(--leise); }
.protokoll div { padding-left: calc(var(--ebene, 0) * 12px); }
.protokoll .kopfzeile { color: var(--text); font-weight: 650; margin-top: 10px; font-size: 12px; letter-spacing: .02em; }
.protokoll .leerzeile { height: 4px; }
.zeitmarke {
  display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 6px;
  background: var(--akzent-flaeche); color: var(--akzent-text); font: 600 11.5px/1 var(--schrift);
  font-variant-numeric: tabular-nums; border: 0; cursor: pointer; vertical-align: 1px;
}
.kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.kennzahl.rechte-spalte { grid-column: 2; }
.kennzahl b { display: block; font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: 11.5px; color: var(--leise); }
.stufen { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.stufe { display: flex; gap: 10px; align-items: center; }
.stufe i { width: 8px; height: 8px; border-radius: 50%; background: var(--flaeche-3); flex-shrink: 0; }
.stufe.da i { background: var(--ph-veroeffentlicht-t); }
.stufe .wann { margin-left: auto; color: var(--sehr-leise); font-variant-numeric: tabular-nums; font-size: 12px; }
details.aufklapp summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--leise); }
details.aufklapp summary::-webkit-details-marker { display: none; }

/* Player: fest am unteren Rand über die ganze Breite (Florian, 01.11.2026), mit Wellenform als Spur */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
}
.player-transport { display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 14px; }
body:has(#player) { padding-bottom: var(--player-hoehe, 84px); }
.spielen {
  width: 40px; height: 40px; border-radius: 50%; border: 0; flex-shrink: 0; cursor: pointer;
  background: var(--akzent-verlauf); color: var(--auf-akzent); display: grid; place-items: center;
}
.spielen svg { width: 16px; height: 16px; }
.spielen .pause-icon { display: none; }
.player[data-laeuft="1"] .spielen .play-icon { display: none; }
.player[data-laeuft="1"] .spielen .pause-icon { display: block; }
.zeit { font-size: 12.5px; color: var(--leise); font-variant-numeric: tabular-nums; min-width: 42px; }
.zeit.ende { text-align: right; }
.spur {
  position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none;
  display: flex; align-items: center;
}
.spur-bahn { position: relative; width: 100%; height: 5px; border-radius: 999px; background: var(--flaeche-3); overflow: hidden; }
.spur-fuellung {
  position: absolute; inset: 0; background: var(--akzent); border-radius: inherit;
  transform-origin: left center; transform: scaleX(0);
}
.spur-knopf {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--flaeche); box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transform: translateX(0); scale: 0.6; opacity: 0;
  transition: opacity 150ms ease, scale 150ms var(--ease-out);
}
.spur[data-zieht="1"] .spur-knopf, .spur:focus-visible .spur-knopf { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) { .spur:hover .spur-knopf { opacity: 1; scale: 1; } }
.spur { outline: none; }
.spur:focus-visible .spur-bahn { background: var(--akzent-flaeche); }
.tempo {
  border: 0; background: var(--flaeche-2); color: var(--text); border-radius: 8px;
  height: 28px; min-width: 44px; padding: 0 8px; font: 600 12px/1 var(--schrift);
  font-variant-numeric: tabular-nums; cursor: pointer;
}

/* Abgleich */
.meldungen { font-size: 13px; color: var(--leise); margin: 8px 0 0; padding-left: 18px; }

/* Anmelden */
.anmelden-seite { min-height: 100svh; display: grid; place-items: center; padding: 16px; }
.anmelden-karte { width: min(360px, 100%); background: var(--flaeche); border-radius: 18px; box-shadow: var(--schatten-hoch); padding: 28px; }
.anmelden-karte h1 { font-size: 20px; margin: 18px 0 18px; }
.feld { display: block; margin-bottom: 12px; }
.feld span { display: block; font-size: 12.5px; color: var(--leise); margin-bottom: 5px; }
.feld input {
  width: 100%; height: 40px; border: 0; border-radius: 10px; padding: 0 12px;
  background: var(--flaeche-2); color: var(--text); font: inherit; outline: none;
}
.feld input:focus { background: var(--flaeche-3); }
.knopf {
  width: 100%; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--akzent-verlauf); color: var(--auf-akzent); font: 600 14px/1 var(--schrift); margin-top: 6px;
}
.fehler { background: var(--warn); color: var(--warn-t); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }

/* Tastaturfokus: Fläche statt Rahmen */
/* Tastaturfokus als Fläche, nie als Ring (keine Umrisse). Die Fläche liegt über
   dem eigenen Hintergrund, deshalb ist sie auf jedem Knopf sichtbar. */
/* Emil-Kowalski-Prüfung (04.11.2026): Die Fläche kam als background-image und wurde von jedem späteren
   background-Kurzwert gelöscht (Fokus unsichtbar) oder ersetzte den Verlauf des Hauptknopfs (weiße Schrift auf
   leerem Grund). Jetzt eine innere Schattenfläche: kein Rand, und kein background überschreibt sie. */
:root { --fokus-flaeche: color-mix(in srgb, var(--akzent) 22%, transparent); }
html :is(a, button, summary, [tabindex], input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: none; background-image: none; box-shadow: inset 0 0 0 100vmax var(--fokus-flaeche);
}
a:focus-visible { border-radius: 8px; }
/* Auf dunkel gefüllten Knöpfen hellt der Fokus auf, statt einzufärben */
html :is(.knopf:not(.zweitrangig), .spielen, .assistent-knopf, .assistent-senden):focus-visible { --fokus-flaeche: rgba(255, 255, 255, .18); }

@media (max-width: 900px) {
  .folge-raster { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: static; }
  .blatt { padding: 22px 20px 26px; }
}
@media (max-width: 680px) {
  .kopf-innen { padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); gap: 14px; }
  .seite { padding: 14px 16px 120px; }
  .navi a { padding: 6px 9px; }
  .kopf-rechts .wer, .marke-name { display: none; }
  .kopf-rechts { gap: 10px; }
  .marke, .verbindung-pille, .navi a, .leiser-knopf { white-space: nowrap; }
  .verbindung-pille [data-v-text] { display: none; }
  .verbindung-pille { padding: 0 9px; }
  .zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .zeile > :nth-child(n+3) { display: none; }
  .zeile.bewegt, .zeile.quellen { grid-template-columns: minmax(0, 1fr) auto; }
  .suche { margin-left: 0; width: 100%; }
  .player { gap: 10px; padding-right: 12px; }
  .player .spur { height: 36px; }
  .zeit.ende { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drueckbar, .drueckbar:active, .karten .karte.drueckbar:active { transform: none; }
  .spur-knopf { transition: opacity 150ms ease; }
}

/* Stufe 2: Strecke */
.seiten-reiter { margin: -6px 0 22px; }
.seiten-reiter a { padding: 6px 14px; }
.meldung { border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 520; margin: -8px 0 18px; background: var(--ph-veroeffentlicht); color: var(--ph-veroeffentlicht-t); }
.meldung.error { background: var(--warn); color: var(--warn-t); }
.meldung.warning { background: var(--audio-flaeche, var(--flaeche-2)); color: var(--audio-text, var(--text)); }   /* Hinweis, kein Fehler (02.11.2026) */
.hinweis.leise-hinweis { background: var(--flaeche-2); color: var(--leise); font-weight: 500; }
.strecke-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.strecke-haupt .abschnitt:first-of-type { margin-top: 28px; }
.kasten.gross { padding: 20px 22px; }
.kasten.gross h3 { font-size: 15px; margin-bottom: 14px; flex-wrap: wrap; row-gap: 2px; }
.schreiben { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.schreiben .feld { margin: 0; flex: 1 1 220px; min-width: 0; }
.schreiben .knopf { width: auto; padding: 0 20px; margin: 0; }
.feld select {
  width: 100%; height: 40px; border: 0; border-radius: 10px; padding: 0 10px;
  background: var(--flaeche-2); color: var(--text); font: inherit; outline: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 28px;
}
.feld select:focus { background-color: var(--flaeche-3); }
.zeile.schattenzeile { grid-template-columns: minmax(0, 1fr) 130px 110px; }
.einstellungen .feld { margin-bottom: 10px; }
.einstellungen .feld input, .einstellungen .feld select { height: 36px; font-size: 13px; }
.schalter { display: flex; gap: 10px; align-items: center; font-size: 13px; margin: 4px 0 12px; cursor: pointer; }
.schalter input { width: 16px; height: 16px; accent-color: var(--akzent); margin: 0; }
.prompt-feld {
  width: 100%; min-height: 420px; border: 0; border-radius: 10px; padding: 14px 16px; resize: vertical;
  background: var(--flaeche-2); color: var(--text); outline: none;
  font: 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
}
.prompt-feld:focus { background: var(--flaeche-3); }
.formfuss { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.knopf.zweitrangig { background: var(--flaeche-2); color: var(--text); }
.unterschied { font: 12px/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 60svh; overflow: auto; overscroll-behavior: contain; }
.unterschied .gleich { color: var(--sehr-leise); }
.unterschied .weg { background: var(--warn); color: var(--warn-t); border-radius: 4px; padding: 0 4px; text-decoration: line-through; text-decoration-thickness: 1px; }
.unterschied .neu { background: var(--ph-veroeffentlicht); color: var(--ph-veroeffentlicht-t); border-radius: 4px; padding: 0 4px; }
.protokoll-liste { font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--leise); max-height: 60svh; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; word-break: break-word; }
/* Zeilen im Protokoll abgesetzt (Florian, 04.11.2026): jede zweite Zeile leicht getönt, Fläche statt Linie,
   umbrochene Zeilen rücken ein, damit man sieht, wo eine neue anfängt */
.protokoll-liste > div { padding: 3px 8px 3px 20px; text-indent: -12px; border-radius: 6px; }
.protokoll-liste > div:nth-child(odd) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.laeuft-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ph-audio-t); animation: pulsieren 1.2s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .laeuft-punkt { animation: none; } }
@media (max-width: 900px) {
  .strecke-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .zeile.schattenzeile { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Themenschalter */
.thema-knopf {
  width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: transparent; color: var(--leise); display: grid; place-items: center;
  transition: background-color 150ms ease, color 150ms ease;
}
@media (hover: hover) and (pointer: fine) { .thema-knopf:hover { background: var(--flaeche); color: var(--text); } }
.thema-knopf svg { width: 16px; height: 16px; display: none; }
:root:not([data-theme]) .thema-knopf .i-system,
:root[data-theme="light"] .thema-knopf .i-hell,
:root[data-theme="dark"] .thema-knopf .i-dunkel { display: block; }

/* Übersicht als Liste mit Cover */
.pzeile {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) repeat(7, 70px) 84px;
  align-items: center; gap: 12px; padding: 12px 18px; transition: background-color 120ms ease;
}
.pzeile + .pzeile { box-shadow: inset 0 1px 0 var(--flaeche-2); }
.pzeile.zeile-kopf { padding-top: 10px; padding-bottom: 8px; align-items: end; line-height: 1.25; }
@media (hover: hover) and (pointer: fine) { a.pzeile:hover { background: var(--flaeche-2); } }
a.pzeile:active { background: var(--flaeche-3); }
/* Ein Block je Podcast (Florian, 01.11.2026), Spalten wie eine Tabelle: gleiches Raster in jedem Block */
.podcastliste.bloecke { background: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
.podcastliste.bloecke .pzeile { border-radius: var(--radius); }
.podcastliste.bloecke a.pzeile { background: var(--flaeche); box-shadow: var(--schatten); padding-top: 14px; padding-bottom: 14px; }
.podcastliste.bloecke .pzeile + .pzeile { box-shadow: var(--schatten); }
.podcastliste.bloecke .zeile-kopf { background: none; box-shadow: none; padding-top: 0; padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .podcastliste.bloecke a.pzeile:hover { background: var(--flaeche-2); } }
.podcastliste.bloecke a.pzeile:active { background: var(--flaeche-3); }
.podcastliste.bloecke .leer { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }
.cover { width: 52px; height: 52px; border-radius: 11px; overflow: hidden; background: var(--flaeche-2); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pname { min-width: 0; }
.pname b { display: block; font-weight: 620; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname span { display: block; font-size: 12.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pname .mobil-zahlen { display: none; }
.pname .name-kurz { display: none; }
.warn-text { font-style: normal; color: var(--warn-t); font-weight: 560; }
.zahlspalte { text-align: right; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.zahlspalte.haupt { font-size: 15px; font-weight: 640; }
.zahlspalte.null { color: var(--sehr-leise); font-weight: 400; }
.zahlspalte.leise { color: var(--leise); font-weight: 500; }
@media (max-width: 900px) {
  .pzeile { grid-template-columns: 44px minmax(0, 1fr) repeat(7, 60px) 76px; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .pzeile .cover { width: 44px; height: 44px; }
  .pzeile.zeile-kopf { font-size: 10.5px; letter-spacing: -0.01em; }
  .pname .name-lang { display: none; }
  .pname .name-kurz { display: inline; }
  .zahlspalte { font-size: 13px; }
}
@media (max-width: 680px) {
  .pzeile { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
  .pzeile .zahlspalte, .pzeile.zeile-kopf { display: none; }
  .pzeile .cover { width: 48px; height: 48px; }
  .pname .name-lang { display: inline; }
  .pname .name-kurz { display: none; }
  .pname .mobil-zahlen { display: block; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
}

.ohne-uebergang, .ohne-uebergang *:not(.thema-knopf) { transition: none !important; }

/* Stufe 3: Editor */
.editor .feld textarea, .editor .feld input { width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--flaeche-2); color: var(--text); font: inherit; outline: none; resize: none; }
.editor .feld input { height: 40px; padding: 0 12px; }
.editor .feld textarea:focus, .editor .feld input:focus { background: var(--flaeche-3); }
.ed-abschnitt { margin-top: 22px; }
.ed-titel { width: 100%; border: 0; background: transparent; color: var(--text); font: 650 15px/1.4 var(--schrift); padding: 6px 0; outline: none; letter-spacing: -0.01em; }
.ed-titel::placeholder { color: var(--sehr-leise); font-weight: 500; }
.ed-text { width: 100%; border: 0; border-radius: 10px; padding: 12px 14px; background: transparent; color: var(--text); font: 16px/1.72 var(--schrift); outline: none; resize: none; }
@media (hover: hover) and (pointer: fine) { .ed-text:hover { background: color-mix(in srgb, var(--flaeche-2) 50%, transparent); } }
.ed-text:focus { background: var(--flaeche-2); }

/* Stufe 3: Schnitt */
.knopf:disabled { opacity: 1; background: var(--flaeche-2); color: var(--sehr-leise); cursor: default; transform: none; }
/* Knopf, dessen Arbeit gerade läuft (Florian, 04.11.2026): bleibt in seiner Farbe, mit Eieruhr statt Icon */
.knopf.arbeitet, .knopf.arbeitet:disabled { background: var(--akzent-verlauf); color: var(--auf-akzent); opacity: .8; cursor: progress; }
.stufe.fassung { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 4px 0; }

[hidden] { display: none !important; }

/* Stufe 4: Freigaben, Anmerkungen, Team */
.klein { font-size: 12.5px; }
.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
.ohne-rahmen:disabled input, .ohne-rahmen:disabled select { opacity: .7; }
.schritte { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.schritt { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 5px 0; font-size: 13px; }
.schritt i { width: 10px; height: 10px; border-radius: 50%; background: var(--flaeche-3); margin: 4px 0 0 3px; }
.schritt.fertig i { background: var(--ph-veroeffentlicht-t); }
.schritt.jetzt i { background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-flaeche); }
.schritt b { font-weight: 600; display: block; }
.schritt span { color: var(--leise); font-size: 12.5px; }
.schritt:not(.fertig):not(.jetzt) b { color: var(--leise); }
.entscheiden { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.entscheiden input, .anmerken input { height: 36px; border: 0; border-radius: 9px; padding: 0 10px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.entscheiden input:focus, .anmerken input:focus { background: var(--flaeche-3); }
.entscheiden div { display: flex; gap: 8px; }
.entscheiden .knopf, .anmerken .knopf { width: auto; padding: 0 14px; margin: 0; height: 34px; font-size: 13px; }
.anmerkung { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 8px 0; font-size: 13px; }
.anmerkung + .anmerkung { box-shadow: inset 0 1px 0 var(--flaeche-2); }
.anmerkung .anm-text small { display: block; color: var(--sehr-leise); font-size: 11.5px; margin-top: 2px; }
.anmerkung.erledigt .anm-text { color: var(--sehr-leise); text-decoration: line-through; }
.anmerkung form { margin: 0; }
.haken { border: 0; background: var(--flaeche-2); color: var(--leise); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.anmerken { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.schalter-knopf { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.schalter-bahn { width: 34px; height: 20px; border-radius: 999px; background: var(--flaeche-3); position: relative; flex-shrink: 0; transition: background-color 160ms ease; }
.schalter-bahn span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 160ms var(--ease-out); }
.schalter-bahn.an { background: var(--akzent); }
.schalter-bahn.an span { transform: translateX(14px); }
.zeile.teamzeile { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.4fr); align-items: start; }
.rollen-wahl select, .einzel-form select { height: 32px; border: 0; border-radius: 8px; padding: 0 8px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13px; }
.einzelrollen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.einzel-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.einzel-form .knopf { width: auto; padding: 0 12px; height: 32px; margin: 0; font-size: 13px; }
.zeile.verlaufzeile { grid-template-columns: minmax(0, 1fr) 110px; }
.zeile-titel span a { color: var(--akzent-text); }
@media (max-width: 680px) {
  .zeile.teamzeile { grid-template-columns: minmax(0, 1fr); }
  .zeile.teamzeile > :nth-child(n+3) { display: flex; }
}

/* Mitlesen */
/* Nur das gesprochene Wort; es wechselt mehrmals pro Sekunde, deshalb ohne Übergang */
.lesetext .w[data-t] { cursor: pointer; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .lesetext .w[data-t]:hover { background: var(--flaeche-2); } }
.lesetext .w.jetzt { background: var(--akzent-flaeche); color: var(--akzent-text); box-shadow: 0 0 0 2px var(--akzent-flaeche); }
.lesetext .w.treffer { background: var(--ph-audio-g); color: var(--ph-audio-g-t); box-shadow: 0 0 0 2px var(--ph-audio-g); }
.lesetext .w.treffer.jetzt { background: var(--akzent-flaeche); color: var(--akzent-text); }

/* Prüfung */
.pruefung h3 { margin-bottom: 6px; }
.urteil-gross { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 2px; }
.urteil-gross.offen { color: var(--ph-audio-t); }
.urteil-gross.sauber { color: var(--ph-veroeffentlicht-t); }
.urteil-gross.nicht { color: var(--warn-t); }
.urteil-grund { font-size: 13px; line-height: 1.45; color: var(--text); background: var(--warn); border-radius: 10px; padding: 9px 11px; margin: 8px 0 4px; }
.pgruppe { margin-top: 16px; }
/* Alle Gruppen gleich: Überschrift mit Zahl und Pfeil, klappbar */
details.pgruppe > summary {
  list-style: none; cursor: pointer; display: flex; gap: 6px; align-items: baseline;
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--leise);
  padding: 4px 0;
}
details.pgruppe > summary::-webkit-details-marker { display: none; }
details.pgruppe > summary .zahl { color: var(--sehr-leise); font-weight: 600; }
details.pgruppe > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: auto; align-self: center;
  border: solid var(--sehr-leise); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg);
  transition: transform 160ms var(--ease-out);
}
details.pgruppe[open] > summary::after { transform: rotate(45deg); }
details.pgruppe[open] > summary { margin-bottom: 6px; }
@media (hover: hover) and (pointer: fine) { details.pgruppe > summary:hover { color: var(--text); } }
.tbefund { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: var(--flaeche-2); color: var(--text); border-radius: 10px; padding: 9px 11px; margin-top: 6px; font: inherit; font-size: 13px; line-height: 1.45; }
@media (hover: hover) and (pointer: fine) { .tbefund:hover { background: var(--flaeche-3); } }
.tbefund.gewaehlt { background: var(--flaeche-3); box-shadow: none; }
.tbefund.gewaehlt .tbefund-grund { color: var(--akzent-text); }
.tbefund-art { font-size: 11.5px; font-weight: 600; color: var(--leise); }
.tbefund-art.widerspruch { color: var(--warn-t); }
.tbefund-zitat { font-weight: 560; }
.tbefund-grund { color: var(--leise); font-size: 12.5px; }
.filter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.filter button { border: 0; border-radius: 999px; padding: 4px 10px; font: 600 12px/1.3 var(--schrift); cursor: pointer;
  background: var(--flaeche-2); color: var(--leise); }
.filter button[aria-current="true"] { background: var(--akzent-flaeche); color: var(--akzent-text); }
.filter button small { font-weight: 500; opacity: .75; }
.hstellen { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
.hstelle { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px;
  border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; padding: 7px 8px; border-radius: 9px; font: inherit; font-size: 13px; }
.hstelle[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .hstelle:hover { background: var(--flaeche-2); } }
.hstelle.gewaehlt { background: var(--flaeche-3); }
.hstelle .zeitmarke { grid-row: span 2; align-self: start; margin-top: 1px; }
.hwort b { font-weight: 600; }
.hgrund { font-size: 11.5px; color: var(--sehr-leise); }
.wortliste { display: flex; flex-wrap: wrap; gap: 4px; }
.hinweisliste { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--leise); }
.beschreibung { font-size: 13px; line-height: 1.55; white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.mehr-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--akzent-text); font-weight: 560; }

/* Angaben bearbeiten */
.angaben { width: 100%; }
.angaben-zeigen { position: relative; }
.bearbeiten-knopf { margin-top: 8px; font-size: 13px; font-weight: 560; color: var(--akzent-text); }
.angaben-form { max-width: 760px; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px 20px; }
.angaben-form .feld input, .angaben-form .feld textarea { width: 100%; border: 0; border-radius: 10px; padding: 10px 12px;
  background: var(--flaeche-2); color: var(--text); font: inherit; outline: none; resize: vertical; }
.angaben-form .feld input { height: 40px; }
.angaben-form .feld input:focus, .angaben-form .feld textarea:focus { background: var(--flaeche-3); }

/* Verlauf */
.verlauf { max-width: 820px; display: flex; flex-direction: column; }
.vpunkt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 18px; }
.vpunkt::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--flaeche-3); }
.vpunkt:last-child::before { display: none; }
.vpunkt i { width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); margin-top: 4px; position: relative; }
.vinhalt { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 12px 16px; min-width: 0; }
.vkopf { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.vkopf .leise { font-size: 12.5px; }
.vdiff { margin-top: 8px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.vdiff .gleich { color: var(--leise); }
.vdiff .weg { background: var(--warn); color: var(--warn-t); text-decoration: line-through; text-decoration-thickness: 1px; border-radius: 3px; }
.vdiff .neu { background: var(--ph-veroeffentlicht); color: var(--ph-veroeffentlicht-t); border-radius: 3px; }
.vdiff .luecke { color: var(--sehr-leise); padding: 0 4px; }
.vdiff .weg + .neu, .vdiff .neu + .weg { margin-left: 3px; }
/* Kurzfassung in der Seitenleiste (Florian, 02.11.2026): höchstens vier Zeilen, der ganze Verlauf zeigt alles */
.vdiff.kurz, .vzitat { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  margin: 3px 0 2px; font-size: 12.5px; line-height: 1.5; font-weight: 400; }
.vzitat { color: var(--leise); }

/* Verbrauch */
.zeile.vzeile { grid-template-columns: minmax(0, 1fr) 60px 120px 120px 150px 110px 90px; }
.zeile.vzeile .rechts { color: var(--text); }
.zeile.vzeile.zeile-kopf .rechts { color: var(--sehr-leise); }
.zeile.vzeile.summe { background: var(--flaeche-2); }
.monatswahl { height: 34px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--flaeche); box-shadow: var(--schatten); color: var(--text); font: inherit; font-size: 13px; }
@media (max-width: 680px) { .zeile.vzeile { grid-template-columns: minmax(0, 1fr) auto; } .zeile.vzeile > :nth-child(n+3) { display: none; } }
.zeile.szeile { grid-template-columns: minmax(0, 1fr) 130px 150px 110px 100px; }
.zeile.szeile .rechts { color: var(--text); }
.zeile.szeile.zeile-kopf .rechts { color: var(--sehr-leise); }
.zeile.szeile.summe { background: var(--flaeche-2); }
@media (max-width: 680px) { .zeile.szeile { grid-template-columns: minmax(0, 1fr) auto; } .zeile.szeile > :nth-child(n+4) { display: none; } }

/* Prüfstellen abhaken */
.pstelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: start; margin-top: 6px; }
.pstelle .tbefund { margin-top: 0; }
.hzeile { margin-top: 0; }
.hzeile[hidden] { display: none; }
.haken-knopf {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; margin-top: 6px; flex-shrink: 0;
  background: var(--flaeche-2); position: relative; transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.haken-knopf::after {
  content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px;
  border: solid var(--sehr-leise); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .55;
}
@media (hover: hover) and (pointer: fine) { .haken-knopf:hover { background: var(--flaeche-3); } }
.haken-knopf[aria-pressed="true"] { background: var(--ph-veroeffentlicht-t); }
.haken-knopf[aria-pressed="true"]::after { border-color: var(--flaeche); opacity: 1; }
.pstelle.geprueft .tbefund, .pstelle.geprueft .hstelle { opacity: .5; }
.pstelle.geprueft .tbefund-zitat, .pstelle.geprueft .hwort b { text-decoration: line-through; text-decoration-thickness: 1px; }
.hinweisliste li { overflow-wrap: anywhere; }

/* ════════════════════════════════════════════════════════════════════════
   Durchsicht mit allen Emil-Kowalski-Skills (31.10.2026)
   ════════════════════════════════════════════════════════════════════════ */

/* Knöpfe: eine Grundform statt 43 Inline-Stile. Breit nur, wo es gewollt ist. */
.knopf.schmal { width: auto; padding: 0 18px; margin: 0; }
.knopf.schmal.klein { height: 34px; padding: 0 14px; }
.knopf.ohne-rand { margin: 0; }

/* Infos sind flach, nur Links heben sich ab: so sieht man, was klickbar ist */
.chip { background: var(--flaeche-2); box-shadow: none; max-width: 100%; }
a.chip { background: var(--flaeche); box-shadow: var(--schatten); }
.chips .plakette { height: 28px; padding: 0 12px; }
.chip.warn { display: inline-block; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Auswahllisten: überall dieselbe Form mit eigenem Pfeil */
select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 28px !important; }

/* Prüfungsgruppen lesen sich wie die übrigen Kastenüberschriften */
details.pgruppe > summary { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--leise); }   /* unter „Prüfung Text“ zurückgenommen */
[data-zaehler] { font-variant-numeric: tabular-nums; }
/* Geprüft: einmal blasser reicht, der grüne Haken sagt den Rest */
.pstelle.geprueft .tbefund, .pstelle.geprueft .hstelle { opacity: .6; }
.pstelle.geprueft .tbefund-zitat, .pstelle.geprueft .hwort b { text-decoration: none; }
.pstelle .tbefund, .pstelle .hstelle { transition: opacity 150ms ease; }

/* Drücken: große Flächen ohne Schrumpfen, nur Ton; kleine runde Knöpfe deutlicher */
.tbefund:active, .hstelle:active, .filter button:active, .stufe.fassung:active { background: var(--flaeche-3); }


/* Lange Wörter, URLs und Fehlertexte bleiben in ihren Kästen (break-ui) */
.kasten, .befund, .fehler { overflow-wrap: anywhere; }
.anmerkung { grid-template-columns: auto minmax(0, 1fr) auto; }
.anmerkung .anm-text { grid-column: 2; }
.anmerkung form { grid-column: 3; }
.stufe .wann { flex-shrink: 0; white-space: nowrap; }
.stufe > span:first-of-type { min-width: 0; }
.pfad { min-width: 0; flex-wrap: nowrap; }
.pfad a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfad span { flex-shrink: 0; }
.einzelrollen .plakette { white-space: normal; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.3; flex-shrink: 1; }
.pname .mobil-zahlen { white-space: normal; }
.zeile { grid-template-columns: minmax(0, 1fr) 140px 92px 64px 64px; }
.entscheiden div { flex-wrap: wrap; }
.entscheiden .knopf { max-width: 100%; white-space: normal; height: auto; min-height: 34px; }
@media (max-width: 900px) { .zeile.vzeile { grid-template-columns: minmax(0, 1fr) 48px repeat(5, 92px); gap: 10px; } }

/* Fokus sichtbar, wo es bisher nichts zeigte */

/* Innere Scrollkästen geben den Schwung nicht an die Seite weiter */
.reiter { overscroll-behavior-x: contain; }

/* Handy (mobile-native) */
button, a, summary, [role="slider"], .lesetext .w[data-t] { touch-action: manipulation; }
button, summary, .chip, .plakette, .zeitmarke { -webkit-user-select: none; user-select: none; }
@media (max-width: 900px) {
  /* Unter 900 px ist die Spalte Teil der Seite, kein eigener Scrollkasten */
  .seitenleiste { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  /* Status und nächster Schritt oben, nicht nach dem ganzen Text (Durchsicht 03.11.2026); die übrigen Kästen
     bleiben unter dem Text */
  .folge-raster > .seitenleiste { display: contents; }
  .folge-raster > .seitenleiste > * { order: 2; }
  .folge-raster > .seitenleiste > .kette, .folge-raster > .seitenleiste > .protokoll-kasten { order: -1; }
  .folge-raster > .folge-links { display: contents; }
  .folge-raster > .folge-links > * { order: 1; }
  .folge-raster > .folge-links > :is(.pfad, .seitenkopf, .chips) { order: -2; }
  .folge-raster { row-gap: 14px; }
}
@media (max-width: 680px) {
  .navi { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .navi::-webkit-scrollbar { display: none; }
}
@media (pointer: coarse) {
  /* Unter 16 px zoomt iOS beim Antippen hinein */
  input, textarea, select { font-size: 16px !important; }
  /* Tippflächen ab 40 px, ohne die Optik zu ändern */
  .spur { height: 44px; }
  .tempo { height: 36px; }
  .zeitmarke { height: 28px; padding: 0 9px; }
  .filter button { padding: 8px 12px; }
  .leiser-knopf { padding: 10px 6px; }
  .haken-knopf, .thema-knopf { position: relative; }
  .haken-knopf::before, .thema-knopf::before { content: ""; position: absolute; inset: -9px; }
  .griff { width: 32px; height: 40px; margin: -6px -6px -6px 0; }   /* auf dem Handy größer statt kleiner (Emil-Prüfung 04.11.2026) */
  [contenteditable]:not([contenteditable="false"]) { font-size: max(16px, 1em); }   /* auch hier zoomt iOS sonst hinein */
  /* Offene Tastatur: der Player tritt zur Seite */
  body:has(:is(input:not([type=hidden]), textarea, select):focus) .player { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .spielen.drueckbar:active, .haken-knopf:active, .zeitmarke:active, .tempo:active, .thema-knopf:active { transform: none; }
}

/* ── Spaltenköpfe: rechtsbündig über Zahlen, sortierbar per Klick ─────────── */
.rechts { text-align: right; }
.sortkopf {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none; position: relative; display: inline-block;
  -webkit-user-select: none; user-select: none;
}
.zeile-kopf [aria-sort] .sortkopf { color: var(--text); }
/* Pfeil steht neben dem Wort, ohne es zu verschieben: links bei Zahlen, rechts bei Text */
.sortkopf .pfeil { position: absolute; top: 50%; left: calc(100% + 4px); width: 10px; margin-top: -0.5em; line-height: 1; font-size: 11px; opacity: 0; }
.rechts .sortkopf .pfeil { left: auto; right: calc(100% + 4px); text-align: right; }
.sortkopf .pfeil::before { content: "↓"; }
[aria-sort="ascending"] .sortkopf .pfeil::before { content: "↑"; }
[aria-sort] .sortkopf .pfeil { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sortkopf:hover { color: var(--text); }
  .zeile-kopf :not([aria-sort]) > .sortkopf:hover .pfeil { opacity: .4; }
}
.sortkopf:focus-visible { border-radius: 4px; }

/* ── Einstellungen je Podcast ──────────────────────────────────────────────── */
.feld-reihe { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.feld-reihe .feld { flex: 1 1 220px; min-width: 0; }
.feld-reihe .feld.schmal { flex: 0 0 130px; }
.feld-reihe.unten { margin-top: 4px; }
.feld-reihe.unten .knopf { margin-bottom: 12px; }
.feld input[type="time"] { width: 100%; height: 36px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--flaeche-2); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.stimme-wahl { display: flex; gap: 8px; align-items: center; }
.stimme-wahl select { flex: 1 1 auto; min-width: 0; }
.stimme-wahl .spielen.klein , .trailer-zeile .spielen.klein  { width: 36px; height: 36px; flex-shrink: 0; }
.stimme-wahl .spielen.klein::before , .trailer-zeile .spielen.klein::before  { content: ""; width: 0; height: 0; border-left: 10px solid var(--auf-akzent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.stimme-wahl .spielen.klein[data-laeuft="1"]::before , .trailer-zeile .spielen.klein[data-laeuft="1"]::before  { width: 10px; height: 12px; border: 0; margin: 0; background: linear-gradient(to right, var(--auf-akzent) 0 35%, transparent 35% 65%, var(--auf-akzent) 65%); }
.abschnitte { background: var(--flaeche-2); border-radius: 10px; padding: 8px 10px; }
.abschnitt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.achip { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 10px; border-radius: 8px; background: var(--flaeche); box-shadow: var(--schatten); font-size: 13px; }
.achip button { border: 0; background: none; color: var(--leise); width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.achip button:active { background: var(--flaeche-2); }
@media (hover: hover) and (pointer: fine) { .achip button:hover { color: var(--text); background: var(--flaeche-2); } }
.achip-neu { width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; padding: 8px 2px 2px; outline: none; }
.achip-neu::placeholder { color: var(--sehr-leise); }
fieldset:disabled .achip { padding-right: 10px; }
.schreiben.kasten { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.schreiben.kasten .knopf { margin: 0; }
/* Werkzeugzeile: Reiter, Suche und Knopf auf einer Höhe */
.werkzeuge .suche { height: 36px; }
.werkzeuge .knopf { height: 36px; }

/* Einstellungen je Podcast */
.tafel { margin: 0 0 18px; }
.einstellungen-seite { max-width: 820px; }
.tafel-raster { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; }
.einstellungen select { height: 38px; }
.zeit-wahl { font-variant-numeric: tabular-nums; }
.tafel-fuss { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; margin-top: -2px; }
.gespeichert { font-size: 12.5px; color: var(--leise); font-variant-numeric: tabular-nums; flex-shrink: 0; }
button.chip { border: 0; font: inherit; cursor: pointer; }
button.chip[aria-current] { background: var(--akzent-flaeche); color: var(--akzent-text); box-shadow: none; }
/* Erscheinungstage: sieben Schalter, an = Akzentfläche, aus = grau (keine Umrisse) */
.tage-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-knopf { position: relative; cursor: pointer; }
.tag-knopf input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tag-knopf span { display: grid; place-items: center; width: 42px; height: 38px; border-radius: 10px; background: var(--flaeche-2);
  color: var(--sehr-leise); font-weight: 600; font-size: 13px; transition: background-color 120ms ease, color 120ms ease; }
.tag-knopf input:checked + span { background: var(--akzent-verlauf); color: var(--auf-akzent); }
.tag-knopf input:focus-visible + span { box-shadow: inset 0 0 0 100vmax var(--fokus-flaeche); }
@media (hover: hover) and (pointer: fine) { .tag-knopf:hover input:not(:checked) + span { background: var(--flaeche-3); color: var(--leise); } }
@media (max-width: 560px) { .tafel-raster { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.thema-stand { flex: 1 0 100%; margin: -4px 0 0; min-height: 18px; overflow-wrap: anywhere; }

/* Themensuche in den Einstellungen */
.themen-wahl .feld { flex: 1 1 160px; }
.themen-wahl .feld.zahl { flex: 0 0 120px; }

/* Wochenliste */
.werkzeuge .vorschlag-stand { margin-left: auto; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lauf-kopf { font-size: 13px; font-weight: 600; color: var(--leise); margin: 22px 0 10px; }
.vorschlaege .lauf-kopf:first-child { margin-top: 4px; }
.vorschlag { margin-bottom: 12px; transition: opacity 150ms ease; }
.vorschlag[data-entschieden="nein"], .vorschlag[data-verschoben] { opacity: .55; }
.vorschlag-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vorschlag-kopf .plakette { align-self: center; }
.vorschlag-kopf h3 { margin: 0; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.vorschlag-kopf h3 a { color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .vorschlag-kopf h3 a:hover { color: var(--akzent-text); } }
.vorschlag-text { margin: 10px 0 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.vorschlag-hinweis { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--warn); color: var(--warn-t); font-size: 13px; line-height: 1.45; }
.vorschlag-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.vorschlag-fuss a { color: var(--akzent-text); }
.vorschlag-wahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.vorschlag-wahl select.verschieben { height: 32px; border: 0; border-radius: 9px; background-color: var(--flaeche-2); color: var(--leise); font: inherit; font-size: 13px; padding: 0 12px; }
.segment { display: inline-flex; background: var(--flaeche-2); border-radius: 10px; padding: 3px; gap: 2px; }
.segment button { border: 0; background: none; color: var(--leise); font: inherit; font-size: 13px; font-weight: 560; height: 28px; padding: 0 12px; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.segment button[aria-pressed="true"] { background: var(--erhaben); color: var(--text); box-shadow: var(--schatten); }
.segment button[data-wert="ja"][aria-pressed="true"] { background: var(--ph-veroeffentlicht); color: var(--ph-veroeffentlicht-t); box-shadow: none; }
.segment button[data-wert="nein"][aria-pressed="true"] { background: var(--warn); color: var(--warn-t); box-shadow: none; }
.segment button:active { background: var(--flaeche-3); }
@media (hover: hover) and (pointer: fine) { .segment button:not([aria-pressed="true"]):hover { color: var(--text); } }
@media (pointer: coarse) { .segment button { height: 36px; } }
@media (prefers-reduced-motion: reduce) { .vorschlag { transition: none; } }

/* ── Direkt bearbeiten ─────────────────────────────────────────────────────── */
/* Keine Umrisse: beim Zeigen ein Hauch Fläche, beim Schreiben eine ruhige Fläche */
.editierbar { outline: none; border-radius: 8px; margin-left: -6px; margin-right: -6px; padding-left: 6px; padding-right: 6px; cursor: text; }
.editierbar:empty::before { content: attr(data-leer); color: var(--sehr-leise); }
p.teaser.editierbar:empty { display: block; }
/* Leeres Textblatt zum Selbstschreiben (Florian, 04.11.2026): Fläche statt Rahmen, wächst mit */
.eigener-text { min-height: 220px; padding-top: 10px; padding-bottom: 10px; white-space: pre-wrap; line-height: 1.65; }
.lesetext p.editierbar { padding-top: 2px; padding-bottom: 2px; margin-left: -6px; margin-right: -6px; }
@media (prefers-reduced-motion: reduce) { .editierbar { transition: none; } }

/* Schwebt über der Seite wie der Player: erscheint, ohne etwas zu verschieben */
/* Auffällig (Florian, 31.10.2026): volle Akzentfläche, größer, deutlicher Schatten */
.speichern-leiste {
  position: fixed; top: 74px; left: 50%; z-index: 40; display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%);
  padding: 10px 10px 10px 20px; border-radius: 16px;
  /* in hell und dunkel derselbe kräftige Ton: weiße Schrift bleibt bei 6 : 1 */
  background: #34446b; color: #fff; font-size: 14.5px; font-weight: 560;
  box-shadow: 0 12px 34px rgba(40,52,82,.35), 0 2px 6px rgba(0,0,0,.18);
  animation: leiste-ein 220ms var(--ease-out);
}
@keyframes leiste-ein { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .speichern-leiste { animation: none; } }
.speichern-leiste [data-speichern-text] { min-width: 0; color: #fff; margin-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speichern-leiste .knopf { height: 38px; padding: 0 18px; font-size: 14px; }
.speichern-leiste [data-speichern] { background: #fff; color: #33436a; }
.speichern-leiste [data-verwerfen] { background: rgba(255,255,255,.18); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .speichern-leiste [data-verwerfen]:hover { background: rgba(255,255,255,.28); }
}

.pstelle .verbessern { grid-column: 1 / -1; margin: 2px 0 6px; }
.verbessern .leiser-knopf { font-size: 12.5px; font-weight: 560; color: var(--akzent-text); padding: 2px 0; }
.vorschlag-satz { display: grid; gap: 6px; font-size: 13px; line-height: 1.45; background: var(--flaeche-2); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.vorschlag-satz del { color: var(--leise); text-decoration-thickness: 1px; }
.vorschlag-satz ins { text-decoration: none; color: var(--text); }
.vorschlag-knoepfe { display: flex; gap: 8px; margin-top: 8px; }
/* Vorschlag gehört zur Prüfstelle darüber: eingerückt, mit Pfeil darauf */
.verbessern.mit-vorschlag { margin: 0 0 10px 18px; }
.vorschlag-marke { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; font-weight: 560; color: var(--akzent-text); }
.vorschlag-marke::before { content: "↳"; font-size: 15px; line-height: 1; margin-left: -16px; width: 10px; }
.tbefund .vorschlag-satz { margin: 4px 0; background: var(--flaeche); }
.tbefund-einwand { display: block; margin-top: 4px; font-size: 12.5px; color: var(--leise); font-style: italic; }

/* Verlauf der Folge wie eine Sendungsverfolgung: Punkte mit Linie verbunden */
.sendung { list-style: none; margin: 4px 0 6px; padding: 0; }
.sendung-punkt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; font-size: 13px; }
.sendung-punkt:last-child { padding-bottom: 0; }
.sendung-punkt i { position: relative; z-index: 1; width: 12px; height: 12px; margin: 3px 0 0 5px; border-radius: 50%; background: var(--flaeche-3); }
/* Linie zum nächsten Punkt; erledigte Strecke in Grün */
.sendung-punkt:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 15px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--flaeche-3); }
.sendung-punkt.fertig:not(:last-child)::before { background: var(--ph-veroeffentlicht-t); }
.sendung-punkt.fertig i { background: var(--ph-veroeffentlicht-t); }
/* Der aktuelle Punkt ist noch nicht grün: der Strich davor fadet ins Grau, der Punkt bleibt grau mit Hof */
.sendung-punkt.jetzt i { background: var(--flaeche-3); box-shadow: 0 0 0 4px var(--flaeche-2); }
.sendung-punkt.jetzt b { color: var(--text); }
.sendung-punkt.fertig:has(+ .sendung-punkt.jetzt)::before { background: linear-gradient(var(--ph-veroeffentlicht-t), var(--flaeche-3)); }
.sendung-inhalt { min-width: 0; }
.sendung-inhalt b { display: block; font-weight: 600; }
.sendung-inhalt > span { display: block; color: var(--leise); font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sendung-punkt.offen b { color: var(--leise); font-weight: 560; }
.sendung-punkt.offen .sendung-inhalt > span { color: var(--sehr-leise); }
.sendung .entscheiden { margin-top: 8px; }
.sendung .entscheiden input { width: 100%; }
.sendung .entscheiden p { margin: 6px 0 0; }
.sendung .zuruecknehmen { margin-top: 6px; }
/* Florian, 02.11.2026: als Knopf erkennbar, kleine Fläche statt nur Text */
.sendung .zuruecknehmen .leiser-knopf { font-size: 12px; font-weight: 560; color: var(--akzent-text); background: var(--akzent-flaeche);
  padding: 4px 10px 4px 8px; border-radius: 8px; transition: background-color 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sendung .zuruecknehmen .leiser-knopf:hover { background: color-mix(in srgb, var(--akzent-flaeche) 80%, var(--akzent-text)); }
}
.termin-knoepfe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.termin-knoepfe .entscheiden, .termin-knoepfe .termin { margin-top: 0; }
.sendung .leiser-link { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--akzent-text); }   /* Entwurf öffnen (02.11.2026) */
/* Übersprungen: Strecke läuft durch, der Punkt bleibt hohl */
.sendung-punkt.uebersprungen i { background: var(--flaeche); box-shadow: inset 0 0 0 2px var(--ph-veroeffentlicht-t); }
.sendung-punkt.uebersprungen:not(:last-child)::before { background: var(--ph-veroeffentlicht-t); }
.sendung-punkt.uebersprungen b { color: var(--leise); }

/* Kosten klein unter den Mengen */
.zeile .rechts small, .kennzahl small { display: block; font-size: 11.5px; color: var(--sehr-leise); font-weight: 450; margin-top: 2px; white-space: nowrap; }
.zeile .rechts.kosten { color: var(--text); font-weight: 600; }
.zeile-kopf .rechts.kosten { font-weight: 560; }
.kosten-hinweis { margin: 12px 0 0; font-size: 11.5px; color: var(--sehr-leise); }

/* ElevenLabs-Kontingent */
.kontingent { margin-bottom: 18px; }
.kontingent-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.kontingent-kopf span { font-variant-numeric: tabular-nums; font-size: 13px; }
.kontingent-balken { height: 8px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; margin: 10px 0 8px; }
.kontingent-balken span { display: block; height: 100%; background: var(--akzent); transform-origin: left; }
.kontingent p { margin: 0; }

/* Rechte Spalte beginnt oben neben Titel und Teaser, nicht erst beim Text */
.folge-links { min-width: 0; }
.folge-raster > .seitenleiste { top: 76px; }
.sendung-kommentar { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text); quotes: "„" "“"; overflow-wrap: anywhere; }

/* Folgenbeschreibung über dem Text, in voller Breite der linken Spalte */
/* Folgenbeschreibung und Text stehen auf einer Linie: gleicher Innenabstand wie das Blatt */
.folgenbeschreibung { margin-bottom: 18px; padding: 22px 34px 24px; }
.blatt-titel { font-size: 13px; margin: 0 0 10px; }
@media (max-width: 900px) { .folgenbeschreibung { padding: 22px 20px 24px; } }
.folgenbeschreibung .beschreibung { font-size: 14px; line-height: 1.6; max-width: 75ch; }
textarea.langtext { width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical; outline: none; }
textarea.langtext:focus { background: var(--flaeche-3); }
.folgenbeschreibung .fusstext { margin-top: 12px; color: var(--leise); font-size: 13px; }
.folgenbeschreibung .fusstext a { color: var(--leise); text-decoration-color: var(--flaeche-3); }
.folgenbeschreibung .mehr-link { display: inline-block; margin-top: 10px; font-size: 12.5px; }
.thema-stand .thema-grund { display: block; margin-top: 4px; color: var(--leise); line-height: 1.45; }

/* Popup „Themen vorschlagen“ */
.themen-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: min(86svh, 900px); padding: 0; border: 0; border-radius: 18px;
  background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-dialog);
  display: none; flex-direction: column; overflow: hidden;
}
.themen-dialog[open] { display: flex; animation: dialog-ein 180ms var(--ease-out); }
.themen-dialog::backdrop { animation: hintergrund-ein 180ms ease-out; }
@keyframes dialog-ein { from { opacity: 0; transform: scale(.97); } }
@keyframes hintergrund-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .themen-dialog[open], .themen-dialog::backdrop { animation: none; } }
.themen-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px 22px; }
.themen-kopf h2 { font-size: 17px; margin: 0; }
.themen-zu { border: 0; background: var(--flaeche-2); color: var(--leise); width: 32px; height: 32px; border-radius: 10px; font-size: 18px; cursor: pointer; }
.themen-zu:active { background: var(--flaeche-3); }
.themen-liste { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 8px; }
.themen-leer { padding: 28px 8px; text-align: center; }
.themen-zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 10px; border-radius: 12px; cursor: pointer; }
.themen-zeile + .themen-zeile { box-shadow: inset 0 1px 0 var(--flaeche-2); }
@media (hover: hover) and (pointer: fine) { .themen-zeile:hover { background: var(--flaeche-2); } }
.themen-zeile:has(input:checked) { background: var(--flaeche-3); }
.themen-zeile input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--akzent); }
.themen-zeile-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.themen-zeile-kopf .plakette { align-self: center; }
.themen-titel { font-weight: 620; font-size: 15px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .themen-titel:hover { color: var(--akzent-text); } }
.themen-grund { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--leise); overflow-wrap: anywhere; }
.themen-frist, .themen-zahlen, .themen-anderswo { margin: 4px 0 0; }
.themen-fuss { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px 22px; box-shadow: inset 0 1px 0 var(--flaeche-2); }
.themen-fuss [data-themen-stand] { flex: 1; min-width: 0; line-height: 1.45; }   /* ganz lesbar, darf umbrechen (Florian, 02.11.2026) */
@media (max-width: 560px) { .themen-fuss { flex-wrap: wrap; } .themen-fuss [data-themen-stand] { flex-basis: 100%; } }

/* Einstellungen in Blöcken */
.einstellungen .tafel { margin: 0 0 14px; }
.einstellungen .tafel[hidden] { display: none; }
.tafel-hinweis { margin: 8px 0 0; }
/* Schalter statt Häkchen: das Kästchen bleibt für Formular und Tastatur, sichtbar ist die Bahn */
.umschalter { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 16px; cursor: pointer; font-size: 14px; }
.umschalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.umschalter input:checked + .schalter-bahn { background: var(--akzent); }
.umschalter input:checked + .schalter-bahn span { transform: translateX(14px); }
.umschalter input:focus-visible { box-shadow: none; }
.umschalter input:focus-visible + .schalter-bahn { background: color-mix(in srgb, var(--akzent) 35%, var(--flaeche-3)); }
.umschalter input:checked:focus-visible + .schalter-bahn { background: var(--akzent); filter: brightness(1.15); }
.umschalter-text small { display: block; font-size: 12.5px; color: var(--leise); margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .schalter-bahn, .schalter-bahn span { transition: none; } }
/* „Gespeichert“ schwebt unten, damit man es in jedem Block sieht */
.einstellungen .gespeichert:not(:empty) {
  position: fixed; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 40;
  padding: 8px 14px; border-radius: 12px; background: var(--erhaben); box-shadow: var(--schatten), 0 8px 24px rgba(0,0,0,.14);
  color: var(--text); font-size: 13px;
}

/* Wartekreis: überall, wo etwas generiert wird (Florian, 31.10.2026). Ein Ring aus
   einem Verlauf, kein Rahmen; bei reduzierter Bewegung pulsiert er nur. */
.wartekreis {
  display: inline-block; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px;
  background: conic-gradient(from 0deg, transparent 0 15%, currentColor 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: wartekreis 800ms linear infinite;
}
.wartekreis.gross { width: 28px; height: 28px; }
@keyframes wartekreis { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .wartekreis { animation: pulsieren 1.6s ease-in-out infinite; } }
.wartend { display: inline-flex; align-items: center; gap: 8px; }
.themen-warten { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 8px; color: var(--akzent-text); }
.themen-warten p { margin: 0; color: var(--leise); text-align: center; }
/* Werkzeugzeile: Reiter links, Suche und Knöpfe rechts in einer Zeile */
.werkzeuge .reiter { flex: 0 1 auto; min-width: 0; }
.werkzeuge .suche { margin-left: auto; flex: 1 1 auto; min-width: 120px; width: auto; }   /* reicht bis zum Filter (Florian, 04.11.2026) */
.werkzeuge .knopf { flex-shrink: 0; }
.werkzeuge .stand-wahl { height: 36px; border: 0; border-radius: 10px; padding: 0 12px; background-color: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer; flex: 0 0 auto; }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
/* Eigene Idee: ein Feld mit angedocktem Knopf, sofort sichtbar */
.eigene-idee { display: flex; flex: 1 1 360px; min-width: 0; }   /* bis an die rechte Kante (Florian, 02.11.2026) */
.eigene-idee input { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: 10px 0 0 10px; padding: 0 14px;
  background: var(--flaeche-2); color: var(--text); font: inherit; outline: none; }
.eigene-idee input:focus { background: var(--flaeche-3); }
.eigene-idee .knopf { border-radius: 0 10px 10px 0; height: 40px; flex-shrink: 0; }   /* Feld und Knopf gleich hoch, ohne Versatz */

/* Assistent: runder Knopf unten rechts auf jeder Seite, darüber ein kleines
   Chatfenster (Florian, 31.10.2026). Wo der Player die Breite füllt, rückt
   beides über den Player. */
/* Unten rechts mit Abstand über dem Player (Florian, 01.11.2026); --player-hoehe setzt player.js,
   ohne Player sitzt er unten in der Ecke */
/* Abstand zum Player so groß wie der des Players nach unten, 14px (Florian, 03.11.2026). --player-hoehe ist
   Höhe des Players + 36px, der Player sitzt 14px über dem Rand: Oberkante = Höhe + 14, darüber 14 Abstand. */
.assistent { --a-unten: calc(22px + env(safe-area-inset-bottom, 0px)); }
body:has(#player) .assistent { --a-unten: calc(var(--player-hoehe, 84px) - 8px); }
.assistent-knopf {
  position: fixed; right: 22px; bottom: var(--a-unten); z-index: 45;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--akzent-verlauf); color: var(--auf-akzent); box-shadow: var(--schatten-hoch);
}
.assistent-knopf svg { width: 26px; height: 26px; }
/* KI-Icon (Florian, 02.11.2026): Logo-Verlauf, Welle; beim Schreiben drei tippende Punkte */
.assistent-knopf { background: linear-gradient(140deg, #ff86b6 0%, #ef5f99 35%, #34446b 100%); color: #fff; }
.assistent-knopf .ki-welle { width: 34px; height: 34px; overflow: visible; }
.ki-welle circle { fill: currentColor; r: .575px; opacity: 0; transition: r 250ms var(--ease-out); }
.ki-welle.tippt path { opacity: 0; }
.ki-welle.tippt circle { opacity: 1; r: .9px; animation: ki-tippen 1.1s ease-in-out infinite; }
.ki-welle.tippt circle:nth-of-type(2) { animation-delay: .16s; }
.ki-welle.tippt circle:nth-of-type(3) { animation-delay: .32s; }
@keyframes ki-tippen { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-1.7px); } }
@media (prefers-reduced-motion: reduce) { .ki-welle.tippt circle { animation: none; } }
.assistent-knopf[aria-expanded="true"] { background: var(--erhaben); color: var(--akzent-text); }
.assistent-fenster {
  position: fixed; right: 22px; bottom: calc(var(--a-unten) + 64px); z-index: 46;
  width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100svh - var(--a-unten) - 64px - 72px));
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--erhaben); box-shadow: var(--schatten-hoch), 0 18px 48px rgba(0,0,0,.16);
  transform-origin: bottom right; animation: assistent-ein 180ms var(--ease-out);
}
.assistent-fenster[hidden] { display: none; }
@keyframes assistent-ein { from { opacity: 0; transform: scale(.96) translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .assistent-fenster { animation: none; } }
.assistent-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px 16px; background: var(--flaeche-2); }
.assistent-kopf b { font-size: 14.5px; margin-right: auto; }
.assistent-kopf .leiser-knopf { font-size: 12.5px; }
.assistent-zu { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: transparent; color: var(--leise); }
@media (hover: hover) and (pointer: fine) { .assistent-zu:hover { background: var(--flaeche-3); } }
.assistent-zu svg { width: 14px; height: 14px; }
.assistent-verlauf { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.assistent-leer { margin: auto 8px; color: var(--leise); font-size: 13px; text-align: center; line-height: 1.5; }
.assistent-nachricht { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistent-nachricht.ich { align-self: flex-end; background: var(--akzent-verlauf); color: var(--auf-akzent); border-bottom-right-radius: 5px; }
.assistent-nachricht.assistent-antwort { align-self: flex-start; background: var(--flaeche-2); color: var(--text); border-bottom-left-radius: 5px; }
.assistent-nachricht.warten { color: var(--akzent-text); }
.assistent-nachricht.fehlschlag { background: var(--warn); color: var(--warn-t); }
.assistent-nachricht a { color: var(--akzent-text); font-weight: 560; }
.assistent-nachricht.ich a { color: inherit; }
.assistent-eingabe { display: flex; align-items: flex-end; gap: 8px; padding: 10px; background: var(--flaeche-2); }
.assistent-eingabe textarea {
  flex: 1; resize: none; border: 0; border-radius: 12px; padding: 9px 12px; max-height: 120px;
  background: var(--flaeche); color: var(--text); font: 13.5px/1.4 var(--schrift);
}
.assistent-eingabe textarea:focus { outline: none; box-shadow: inset 0 0 0 100vmax var(--fokus-flaeche); }
.assistent-senden { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--akzent-verlauf); color: var(--auf-akzent); }
.assistent-senden:disabled { opacity: .5; cursor: default; }
.assistent-senden svg { width: 15px; height: 15px; }
.assistent-knopf:focus-visible, .assistent-senden:focus-visible { box-shadow: inset 0 0 0 100vmax var(--fokus-flaeche), var(--schatten-hoch); }
/* Player füllt die Breite: Knopf und Fenster über den Player */

@media (max-width: 560px) {
  .assistent-knopf { right: 16px; }
  .assistent-fenster { right: 16px; }
}

/* Für Tilman: PDF ansehen und verschicken (Einschlafen mit Wikipedia) */
.tilman .tilman-knopf { width: 100%; height: 40px; font-size: 14px; }
.tilman .tilman-knopf:disabled { opacity: .5; cursor: default; }

/* ── Bearbeitbar (Florian, 31.10.2026) ──────────────────────────────────────
   Alles, wo man Text schreiben oder ändern kann, hat im ganzen Studio dieselbe
   leichte Fläche im Akzentton: Felder, Textfelder und direkt bearbeitbare Texte.
   Lila heißt damit nur noch „hier kannst du schreiben“; Auswahllisten bleiben grau.
   Abstand zum Grund rund 1,15 : 1, Text darauf über 14 : 1 (hell) und 12 : 1 (dunkel). */
:root {
  --bearbeitbar: color-mix(in srgb, var(--akzent) 10%, var(--flaeche));
  --bearbeitbar-hover: color-mix(in srgb, var(--akzent) 14%, var(--flaeche));
  --bearbeitbar-fokus: color-mix(in srgb, var(--akzent) 18%, var(--flaeche));
}
/* Im Dark Mode reichen 10 % Akzent nicht, das Feld verschwimmt mit der Karte (Florian, 02.11.2026) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bearbeitbar: color-mix(in srgb, var(--akzent) 19%, var(--flaeche));
    --bearbeitbar-hover: color-mix(in srgb, var(--akzent) 24%, var(--flaeche));
    --bearbeitbar-fokus: color-mix(in srgb, var(--akzent) 28%, var(--flaeche));
  }
}
:root[data-theme="dark"] {
  --bearbeitbar: color-mix(in srgb, var(--akzent) 19%, var(--flaeche));
  --bearbeitbar-hover: color-mix(in srgb, var(--akzent) 24%, var(--flaeche));
  --bearbeitbar-fokus: color-mix(in srgb, var(--akzent) 28%, var(--flaeche));
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
    textarea, .editierbar, .ed-text, .ed-titel, .achip-neu) {
  background-color: var(--bearbeitbar);
  transition: background-color 120ms ease;
}
.ed-titel, .achip-neu { border-radius: 8px; padding-left: 10px; padding-right: 10px; }
@media (hover: hover) and (pointer: fine) {
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
      textarea, .editierbar, .ed-text, .ed-titel, .achip-neu):hover { background-color: var(--bearbeitbar-hover); }
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="file"]),
    textarea, .editierbar, .ed-text, .ed-titel, .achip-neu):focus { background-color: var(--bearbeitbar-fokus); }
@media (prefers-reduced-motion: reduce) {
  :is(input, textarea, .editierbar, .ed-text, .ed-titel, .achip-neu) { transition: none; }
}

/* Markieren (Florian, 31.10.2026): Text in klickbaren Zeilen und Karten ist markierbar.
   Kleine Knöpfe, Chips und Plaketten bleiben unmarkierbar, damit Tippen nichts markiert. */
:is(a.zeile, .tbefund, .hstelle, .themen-zeile, .stufe, .befund, .vorschlag-satz) {
  -webkit-user-select: text; user-select: text; -webkit-user-drag: none;
}
:is(a.zeile, .tbefund, .hstelle, .themen-zeile, .stufe) * { -webkit-user-select: text; user-select: text; }

/* Zeitstempel als Satz unter dem Eintrag: „von Florian, am 31.10.2026 um 20:47 Uhr.“ */
.stufe span small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; }


/* ── Schneiden am Text (Florian, 31.10.2026) ──────────────────────────────── */
.blatt-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.blatt-kopfzeile .blatt-titel { margin: 0; }
.modus { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--flaeche-2); }
.modus button { border: 0; background: none; color: var(--leise); font: 560 12.5px/1 var(--schrift); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.modus button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
.lesetext[data-modus="audio"] .satz { border-radius: 6px; cursor: pointer; padding: 1px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lesetext[data-modus="audio"] .satz.gewaehlt { background: var(--akzent-flaeche); color: var(--akzent-text); }
.lesetext[data-modus="audio"] .satz.gewaehlt .w { color: inherit; }
/* Das gerade gesprochene Wort bleibt lila wie der Player, auch in einem markierten Satz */
.lesetext[data-modus="audio"] .satz.gewaehlt .w.jetzt { background: var(--akzent-flaeche); color: var(--akzent-text); }
.lesetext .satz.entfernt { display: none; }
.lesetext[data-modus="audio"] .satz.entfernt { display: inline; color: var(--sehr-leise); text-decoration: line-through; }
.lesetext .alt { display: none; }
.lesetext[data-modus="audio"] .alt { display: inline; color: var(--sehr-leise); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.lesetext[data-modus="audio"] .satz.neu { background: color-mix(in srgb, var(--ph-text) 55%, transparent); }
.lesetext[data-modus="audio"] .satz[data-zustand="laeuft"] { background: var(--ph-audio); }
/* Nach neuer Textfreigabe: Wortlaut passt nicht mehr zum Audio, bitte prüfen */
.lesetext[data-modus="audio"] .satz.geaendert { background: repeating-linear-gradient(135deg, var(--warn) 0 6px, transparent 6px 12px); }
.lesetext[data-modus="audio"] .satz.geaendert.gewaehlt { background: var(--audio-flaeche); }
/* Vorschlag: neu vertont, aber noch nicht eingebaut */
.lesetext[data-modus="audio"] .satz[data-zustand="vorschlag"] { background: color-mix(in srgb, var(--audio) 30%, transparent); }
.lesetext[data-modus="audio"] .satz[data-zustand="vorgemerkt"], .lesetext[data-modus="audio"] .satz[data-zustand="angefragt"] { background: var(--ph-geplant); }
/* Pause hinter einer Stelle (Florian, 01.11.2026): eigene Pille außerhalb der Markierung,
   so hoch wie ein Großbuchstabe und auf der Grundlinie wie das F */
.pause-marke { display: none; }
/* inline-block mit overflow: die Grundlinie ist die Unterkante, so steht die Pille auf der Zeile wie das F */
.lesetext[data-modus="audio"] .pause-marke {
  display: inline-block; overflow: hidden; height: .72em; padding: 0 .34em; margin: 0 0 0 .22em;
  vertical-align: baseline; border-radius: .2em; background: var(--audio-flaeche); color: var(--audio-text);
  white-space: nowrap; -webkit-user-select: none; user-select: none; }
/* innen mittig per Flex; außen bleibt inline-block, damit die Pille auf der Grundlinie steht */
.pause-marke span { display: flex; align-items: center; gap: .1em; height: 100%; }
.pause-marke i { display: block; width: .09em; height: .36em; border-radius: 1px; background: currentColor; }
.pause-marke b { display: block; font-size: .52em; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; margin-left: .3em; transform: translateY(.04em); }
.audio-kasten .stelle-text { font-size: 13.5px; min-height: 60px; margin-bottom: 10px; }
.audio-kasten .stelle-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.audio-kasten .stelle-reihe { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.audio-kasten .stelle-reihe .zahl { min-width: 40px; text-align: center; }
.audio-kasten .stelle-aussprache { margin-top: 4px; }
.audio-kasten .stelle-aussprache .feld { margin: 8px 0; }
.audio-kasten .stelle-aussprache .feld input { height: 34px; font-size: 13px; }
.audio-kasten .stelle-fuss { margin-top: 14px; padding-top: 12px; border-top: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; }
.audio-kasten .stelle-fuss p { margin: 0; }
.audio-kasten .stufe.fassung { border: 0; background: none; padding: 0; width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.audio-kasten .stufe .leiser-knopf { margin-left: auto; font-size: 12px; color: var(--leise); }

/* Aussprache in den Einstellungen */
.aussprache-liste { margin-bottom: 14px; }
.aussprache-liste .stufe form { margin-left: auto; }
.aussprache-liste .leiser-knopf { font-size: 12px; color: var(--leise); }
.aussprache-neu .knopf { margin-top: 10px; }
.kandidaten .plakette { cursor: pointer; }
.kandidaten .plakette small { opacity: .7; margin-left: 2px; }

/* ── Audiomodus in Bernstein (Florian, 01.11.2026): Text und Audio unterscheiden sich sichtbar ── */
:root {
  --audio: #b8731a; --audio-text: #8a5a0b; --audio-flaeche: #fbefd9; --audio-auf: #fff; --audio-markierung: 18%;
}
/* Im Dunkeln braucht die Markierung mehr Bernstein, sonst verschwindet sie (Florian, 01.11.2026) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --audio: #e6b866; --audio-text: #f8d99e; --audio-flaeche: #4a3714; --audio-auf: #1b1a24; --audio-markierung: 30%; } }
:root[data-theme="dark"] { --audio: #e6b866; --audio-text: #f8d99e; --audio-flaeche: #4a3714; --audio-auf: #1b1a24; --audio-markierung: 30%; }

/* Im Audiomodus leuchtet der Textblock lila wie der Player (Florian, 01.11.2026) */
/* Audiomodus ohne Umriss (Florian: keine Umrisse): das Blatt ist leicht in den Akzent getönt */
body[data-modus="audio"] .blatt { background: color-mix(in srgb, var(--akzent) 5%, var(--flaeche)); }
body[data-modus="audio"] .blatt-titel { color: var(--akzent-text); }
.modus button[aria-pressed="true"][data-modus="audio"] { background: var(--audio); color: var(--audio-auf); box-shadow: none; }
.lesetext[data-modus="audio"] .satz.gewaehlt { background: var(--audio-flaeche); color: var(--audio-text); box-shadow: 0 0 0 2px var(--audio-flaeche); }
.lesetext[data-modus="audio"] .satz.neu { background: color-mix(in srgb, var(--audio) 22%, transparent); }
.lesetext[data-modus="audio"] .satz.gewaehlt.neu { background: var(--audio-flaeche); }
.audio-kasten h3 { color: var(--audio-text); }
.audio-kasten .knopf:not(.zweitrangig) { background: var(--audio); color: var(--audio-auf); }
.audio-kasten .knopf:not(.zweitrangig):disabled { background: var(--flaeche-2); color: var(--sehr-leise); }
.audio-kasten .knopf.zweitrangig, .audio-kasten .tempo { background: color-mix(in srgb, var(--audio) 16%, var(--flaeche)); color: var(--text); }
/* Eingabefelder im Kasten übernehmen den Bernsteinton (die Regel für Bearbeitbares liest diese Variablen) */
.audio-kasten { --bearbeitbar: color-mix(in srgb, var(--audio) 14%, var(--flaeche)); --bearbeitbar-hover: color-mix(in srgb, var(--audio) 20%, var(--flaeche)); --bearbeitbar-fokus: color-mix(in srgb, var(--audio) 26%, var(--flaeche)); }
.audio-kasten .stufe.fassung.da i { background: var(--audio); }

/* Tempo-Menü bei langem Drücken: alle Stufen zur direkten Wahl */
.player .tempo { position: relative; }
.tempo-menue { position: absolute; right: 20px; bottom: calc(100% + 8px); display: grid; gap: 4px; padding: 6px; border-radius: 12px;
  background: var(--erhaben); box-shadow: var(--schatten-hoch); z-index: 2; }
.tempo-menue button { border: 0; background: transparent; color: var(--text); font: 600 13px/1 var(--schrift); font-variant-numeric: tabular-nums;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; text-align: center; }
.tempo-menue button[aria-pressed="true"] { background: var(--akzent-flaeche); color: var(--akzent-text); }
@media (hover: hover) and (pointer: fine) { .tempo-menue button:hover { background: var(--flaeche-2); } }
/* Überschriften auf der Spur */
.spur-marken { position: absolute; inset: 0; pointer-events: none; }
.spur-marke { position: absolute; top: 0; bottom: 0; width: 10px; margin-left: -5px; pointer-events: auto; cursor: pointer; }
.audio-kasten .stelle-warnung { margin: -4px 0 12px; padding: 8px 10px; border-radius: 10px; background: var(--warn); color: var(--warn-t); }
.audio-kasten .stelle-warnung .leiser-knopf { color: var(--warn-t); font-weight: 600; padding: 0; margin-left: 4px; }

/* ── Audiobearbeitung im Text (Florian, 01.11.2026) ───────────────────────── */

/* Markierte Wörter und bearbeitete Stellen */
.lesetext[data-modus="audio"] .w.markiert { background: var(--audio-flaeche); color: var(--audio-text); box-shadow: 0 0 0 2px var(--audio-flaeche); border-radius: 3px; }
.lesetext[data-modus="audio"] .satz.neu, .lesetext[data-modus="audio"] .satz[data-zustand="vorschlag"] { background: color-mix(in srgb, var(--audio) var(--audio-markierung), transparent); border-radius: 4px; }
.lesetext[data-modus="audio"] .satz[data-zustand="laeuft"] { background: var(--ph-audio); border-radius: 4px; }
.lesetext[data-modus="audio"] .satz.geaendert { background: repeating-linear-gradient(135deg, var(--warn) 0 6px, transparent 6px 12px); border-radius: 4px; }
.stelle-marke { border: 0; background: var(--audio-flaeche); color: var(--audio-text); font: 600 11px/1 var(--schrift);
  height: 18px; padding: 0 6px; border-radius: 9px; margin-left: 4px; cursor: pointer; vertical-align: middle; white-space: nowrap; }
.stelle-marke.wartend { padding-left: 4px; }

/* Sprechblase über der Stelle, Pfeil zeigt nach unten auf sie */
.sprechblase { position: absolute; z-index: 44; width: max-content; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px; border-radius: 14px; background: var(--erhaben); color: var(--text); box-shadow: var(--schatten-hoch), 0 12px 32px rgba(0,0,0,.18); }
.sprechblase[hidden] { display: none; }
.sprechblase-pfeil { position: absolute; left: 22px; bottom: -8px; width: 16px; height: 16px; transform: rotate(45deg); background: var(--erhaben); border-radius: 2px; box-shadow: 4px 4px 8px rgba(0,0,0,.08); }
.sprechblase-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sprechblase-zeile .zahl { min-width: 36px; text-align: center; font-size: 13px; }
.sprechblase .leiser-knopf { font-size: 12.5px; color: var(--leise); }
.sprechblase .leiser-knopf[aria-pressed="true"] { color: var(--audio-text); }
.sprechblase-original { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--flaeche-2); font-size: 13.5px; line-height: 1.5; color: var(--text); max-width: 56ch; }
.sprechblase-original::before { content: "Original: "; font-weight: 600; color: var(--leise); }
.sprechblase-meldung { margin: 8px 0 0; }
.sprechblase-text { width: 100%; min-height: 0; margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.sprechblase { width: min(640px, calc(100vw - 32px)); max-width: none; }
.sprechblase-pause { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }

/* ── Player (Florian, 01.11.2026): schwebende Leiste mit Verlauf, Wellenform als Spur ── */
.player {
  left: 16px; right: 16px; bottom: 14px; border-radius: 22px; overflow: visible; color: #fff;
  /* minimal durchscheinend wie die Kopfleiste (Florian, 02.11.2026) */
  background: linear-gradient(118deg, rgba(74, 90, 128, .66) 0%, rgba(60, 75, 111, .66) 40%, rgba(48, 61, 93, .7) 72%, rgba(38, 49, 76, .7) 100%);
  box-shadow: 0 22px 54px rgba(26, 34, 51, .32), 0 6px 16px rgba(10, 14, 24, .22);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
}
.player::before { /* weicher Lichtschein oben links */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.18), transparent 55%);
}
.player-transport { position: relative; gap: 16px; padding: 12px 18px 12px 12px; }
.player .spielen {
  width: 48px; height: 48px; background: #fff; color: #33436a;
  box-shadow: 0 8px 20px rgba(10, 20, 50, .28);
}
.player .spielen svg { width: 18px; height: 18px; }
.player .zeit { color: #fff; font-size: 12.5px; font-weight: 560; min-width: 40px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }   /* lesbar auch im hellen Modus (Durchsicht 03.11.2026) */
.player .zeit.ende { color: rgba(255,255,255,.82); }
.player .spur { height: 44px; }
.player .spur-bahn { background: rgba(255,255,255,.26); height: 4px; }
.player .spur-fuellung { background: #fff; }
.player .spur-knopf { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.player .spur-welle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.player .spur-welle.hell { clip-path: inset(0 100% 0 0); }
.player .spur.mit-welle .spur-bahn { display: none; }
.player .spur.mit-welle .spur-knopf { width: 2px; height: 100%; margin: 0 0 0 -1px; top: 0; border-radius: 1px; opacity: 1; scale: 1; box-shadow: 0 0 10px rgba(255,255,255,.7); }
.player .tempo { background: rgba(255,255,255,.16); color: #fff; height: 32px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .player .tempo:hover { background: rgba(255,255,255,.26); } }
/* Aktionen der Audiobearbeitung in derselben Zeile */
.player-aktionen { display: flex; align-items: center; gap: 8px; }
.player-stand { font-size: 12px; color: rgba(255,255,255,.85); white-space: nowrap; }
.player-stand:empty { display: none; }
.player-uebernehmen, .player-pille { border: 0; cursor: pointer; height: 32px; padding: 0 12px; border-radius: 10px; font: 600 12.5px/1 var(--schrift); white-space: nowrap; }
.player-uebernehmen { background: #fff; color: #33436a; box-shadow: 0 6px 16px rgba(10, 20, 50, .22); }
.player-uebernehmen b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: #33436a; color: #fff; font-size: 11px; }
.player-pille { background: rgba(255,255,255,.16); color: #fff; }
.player-pille.warn { background: rgba(255, 196, 120, .22); color: #ffe2b8; }
.player-fassungen { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.12); }
.player-fassungen button { border: 0; background: none; color: rgba(255,255,255,.75); font: 600 12px/1 var(--schrift); padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.player-fassungen button.da { background: #fff; color: #33436a; }
@media (max-width: 680px) {
  .player { left: 8px; right: 8px; bottom: 8px; border-radius: 18px; }
  body:has(#player) .assistent { --a-unten: calc(var(--player-hoehe, 84px) - 20px); }   /* 8px über dem Player */
  .player-transport { gap: 10px; padding: 10px 12px 10px 10px; flex-wrap: wrap; }
  .player-aktionen { order: 5; width: 100%; justify-content: flex-end; }
}

/* ── Feinschliff (Florian, 01.11.2026): Icons, Tiefe, Ruhe ────────────────── */
.ic { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; }
.knopf, .chip, .leiser-knopf, .navi a, .plakette, .stelle-marke, .player-pille, .player-uebernehmen { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.knopf:not(.schmal) { display: flex; }
.plakette, .chip { justify-content: flex-start; }
.knopf .ic { width: 15px; height: 15px; margin-left: -2px; }
.knopf.klein .ic { width: 14px; height: 14px; }
.chip .ic { width: 13px; height: 13px; margin-left: -1px; opacity: .8; }
.leiser-knopf .ic { width: 13px; height: 13px; }
.navi a .ic { width: 14px; height: 14px; opacity: .75; }
.navi a[aria-current="page"] .ic { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .navi a:hover .ic { opacity: 1; } }
.marke-punkt { display: grid; place-items: center; color: #fff; }
.marke-punkt .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.kopf-rechts .leiser-knopf { height: 28px; padding: 0 4px; display: inline-flex; align-items: center; }
.kopf-rechts .leiser-knopf .ic { width: 16px; height: 16px; }
.kopf-rechts .wer { line-height: 1; }
/* Zeilen in Listen: beim Darüberfahren nur ein Ton (Regel bei a.zeile oben), kein Anheben mehr. Listen überfährt
   man dutzendfach am Tag (Emil-Prüfung 04.11.2026). */
a.zeile { transition: background-color 120ms ease; }
/* Kästen: Schatten aus --schatten, im Dark Mode mit Lichtkante (fester Hellwert entfernt, 02.11.2026) */
.kasten h3 { letter-spacing: -0.01em; }
.seitenkopf h1 { font-size: 28px; letter-spacing: -0.03em; min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
/* Spaltenköpfe ruhiger, in Kapitälchen-Optik */
.zeile-kopf { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
/* Zustandspillen mit kleinem Punkt */
.plakette::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.plakette.neutral::before, .themen-zeile .plakette::before, .stelle-marke::before, .kandidaten .plakette::before { display: none; }
/* Suchfeld mit Lupe */
.suche { padding-left: 32px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238c8899' stroke-width='1.7' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.5 10.5L14 14'/></svg>"); background-repeat: no-repeat; background-position: 10px center; background-size: 14px; }
/* Sprechblase: Knöpfe mit Icons */
.sprechblase .knopf .ic { margin-left: -1px; }

/* ── Druck läuft immer ganz durch (Florian, 01.11.2026) ────────────────────── */
/* Über die Eigenschaft scale statt transform: sonst löschte der Druck jede Verschiebung des Elements (der
   Kopierknopf im Passwortfenster rutschte nach unten, Zeilen zuckten). Kein Überfedern mehr, auch nicht beim
   Play-Knopf: der wird dutzendfach am Tag gedrückt (Emil-Prüfung 04.11.2026). */
.gedrueckt { animation: druck 260ms var(--ease-out); }
.spielen.gedrueckt, .assistent-knopf.gedrueckt, .thema-knopf.gedrueckt, .haken-knopf.gedrueckt { animation-name: druck-rund; }
a.zeile.gedrueckt, .karte.gedrueckt, .podcastkarte.gedrueckt { animation-name: druck-leicht; }
@keyframes druck { 0% { scale: 1; } 35% { scale: 0.95; } 100% { scale: 1; } }
@keyframes druck-rund { 0% { scale: 1; } 35% { scale: 0.92; } 100% { scale: 1; } }
@keyframes druck-leicht { 0% { scale: 1; } 35% { scale: 0.985; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .gedrueckt { animation: none; } }

/* ── Belohnung beim Abschließen (Florian, 01.11.2026) ─────────────────────── */
.funken { position: fixed; z-index: 90; pointer-events: none; width: 0; height: 0; }
.funken i { position: absolute; left: 0; top: 0; border-radius: 50%; display: block; }
/* Text ist ein Textknoten, kein Element: ausgeblendet über die Farbe, der Haken bleibt weiß (Florian, 01.11.2026) */
.knopf.belohnt { position: relative; animation: knopf-hops 560ms var(--ease-out);
  background: var(--ph-veroeffentlicht-t); color: transparent; }
/* Leuchten als Ring, der wächst und verblasst (scale und opacity statt box-shadow, Emil-Prüfung 04.11.2026) */
.knopf.belohnt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ph-veroeffentlicht-t);
  pointer-events: none; z-index: -1; animation: knopf-leuchten 600ms ease-out forwards; }
.knopf.belohnt > :not(.haken-blitz) { opacity: 0; }
.haken-blitz { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.haken-blitz svg { width: 18px; height: 18px; stroke-dasharray: 20; stroke-dashoffset: 20; animation: haken-zeichnen 320ms 120ms var(--ease-out) forwards; }
@keyframes knopf-hops { 0% { transform: scale(1); } 22% { transform: scale(0.92); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 58% { transform: scale(1.1) rotate(-1.5deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 80% { transform: scale(0.98) rotate(0.5deg); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 100% { transform: scale(1); } }
@keyframes knopf-leuchten { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.25, 1.6); } }
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }

.sendung-punkt.wird-fertig i { background: var(--ph-veroeffentlicht-t); box-shadow: 0 0 0 4px var(--ph-veroeffentlicht); transition: background-color 200ms ease, box-shadow 200ms ease; }
.sendung-punkt.gerade-fertig i { animation: punkt-plopp 600ms var(--ease-out); }
.sendung-punkt.gerade-fertig i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ph-veroeffentlicht-t); animation: punkt-ring 700ms 80ms ease-out forwards; }
/* Der verblasste Strich zum Punkt füllt sich beim Klick (Florian, 02.11.2026) */
.sendung-punkt.fuellt:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 15px; bottom: -3px; width: 2px;
  border-radius: 1px; background: var(--ph-veroeffentlicht-t); transform-origin: top; animation: linie-wachsen 300ms var(--ease-out) both; }
.sendung-punkt.gerade-weiter:not(:last-child)::before { transform-origin: top; animation: linie-wachsen 520ms 120ms var(--ease-out) backwards; }
.sendung-punkt.gerade-dran .sendung-inhalt { animation: dran-rutschen 280ms 160ms var(--ease-out) backwards; }   /* kürzer, der nächste Schritt ist schneller lesbar (04.11.2026) */
.sendung-punkt.gerade-dran i { animation: punkt-plopp 500ms 200ms var(--ease-out) backwards; }
@keyframes punkt-plopp { 0% { transform: scale(0.4); } 50% { transform: scale(1.6); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 75% { transform: scale(0.9); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } 100% { transform: scale(1); } }
@keyframes punkt-ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes linie-wachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dran-rutschen { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Protokoll in der Seitenleiste: zu nur die letzte Zeile (Florian, 01.11.2026) */
.protokoll-kasten summary { display: flex; flex-direction: column; gap: 4px; padding-right: 40px; }
.protokoll-kasten { position: relative; }
/* Kopieren (Florian, 02.11.2026): ein Klick, kurz ein Haken */
.kopier-knopf { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--leise); cursor: pointer; z-index: 1; }
.kopier-knopf .ic { width: 15px; height: 15px; grid-area: 1 / 1; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
.kopier-knopf .ic-kopiert { opacity: 0; transform: scale(.6); color: var(--ph-veroeffentlicht-t, var(--akzent)); }
.kopier-knopf.kopiert .ic-kopieren { opacity: 0; transform: scale(.6); }
.kopier-knopf.kopiert .ic-kopiert { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .kopier-knopf:hover { background: var(--flaeche-2); color: var(--text); } }
.protokoll-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.protokoll-titel .ic { width: 14px; height: 14px; color: var(--leise); }
.protokoll-letzte { font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.protokoll-kasten details[open] .protokoll-letzte { display: none; }

/* Pillen im Text erstmal aus (Florian, 01.11.2026) */
.lesetext .stelle-marke { display: none !important; }

/* Sprechblase klar gegliedert (Florian, 01.11.2026) */
.sprechblase-kopf { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 8px; }
.sprechblase-kopf b { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.blase-zu { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--leise); display: grid; place-items: center; cursor: pointer; margin-right: -6px; }
.blase-zu .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .blase-zu:hover { background: var(--flaeche-2); color: var(--text); } }
.sprechblase-werkzeuge { display: flex; width: fit-content; max-width: 100%; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding: 7px 10px 7px 12px; border-radius: 12px; background: var(--flaeche-2); }
.sprechblase-werkzeuge[hidden] { display: none; }
.sprechblase-werkzeuge .sprechblase-pause { margin-left: 0; }
.werkzeug-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--leise); margin-right: 2px; }
.werkzeug-name .ic, .sprechblase-werkzeuge .leiser-knopf .ic { width: 14px; height: 14px; }
.sprechblase-werkzeuge .leiser-knopf { display: inline-flex; align-items: center; gap: 6px; }
.sprechblase-zeile.vorschlag { flex-wrap: nowrap; }
/* Nur Aussprache für ein Wort der markierten Stelle */
/* Prüfung Text und Prüfung Audio als aufklappbare Blöcke */
details.pblock > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
details.pblock > summary::-webkit-details-marker { display: none; }
details.pblock > summary h3 { margin: 0; }
details.pblock > summary [data-zaehler] { font-size: 12.5px; }
details.pblock > summary::after { content: ""; margin-left: auto; align-self: center; width: 7px; height: 7px; border-right: 1.6px solid var(--leise); border-bottom: 1.6px solid var(--leise); transform: rotate(45deg) translateY(-2px); transition: transform 160ms var(--ease-out); }
details.pblock[open] > summary::after { transform: rotate(-135deg); }
details.pblock[open] > summary { margin-bottom: 8px; }

/* ── Termin wählen (Florian, 01.11.2026) ── Flächen statt Umrisse; gesperrte Tage nur blass */
.termin { position: relative; margin-top: 8px; }
.kalender { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 272px; padding: 12px;
  background: var(--erhaben); border-radius: var(--radius); box-shadow: var(--schatten-hoch); }
.kalender.oben { top: auto; bottom: calc(100% + 8px); }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kalender-kopf b { font-size: 13.5px; font-weight: 640; }
.kalender-blaettern { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--flaeche-2); color: var(--text);
  font: 600 16px/1 var(--schrift); cursor: pointer; }
.kalender-blaettern:disabled { opacity: .35; cursor: default; }
.kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kalender-wt { text-align: center; font-size: 11px; font-weight: 600; color: var(--sehr-leise); padding: 2px 0 4px; }
.kalender-tag { height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 13px/1 var(--schrift);
  font-variant-numeric: tabular-nums; cursor: pointer; }
.kalender-tag:disabled { color: var(--sehr-leise); opacity: .38; cursor: default; }
.kalender-tag.heute { background: var(--flaeche-2); font-weight: 700; }
.kalender-tag.gewaehlt { background: var(--akzent-verlauf); color: var(--auf-akzent); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .kalender-tag:not(:disabled):not(.gewaehlt):hover { background: var(--akzent-flaeche); color: var(--akzent-text); } }

.kalender-fuss { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kalender-bonus { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.kalender-bonus input { margin: 0; accent-color: var(--akzent); width: 16px; height: 16px; }
.kalender-bonus small { grid-column: 2; font-weight: 400; font-size: 11.5px; color: var(--leise); }
.kalender-meldung { margin: 0; font-size: 12px; color: var(--warn-t); }

/* ── Sendeplan (Florian, 01.11.2026) ── ein Platz je Erscheinungstag; freie Plätze leise, keine Umrisse */
.planzeile { position: relative; display: grid; grid-template-columns: 26px 104px minmax(0, 1fr); align-items: center; gap: 8px; padding: 3px 14px 3px 6px; min-height: 36px; }
.planzeile + .planzeile { box-shadow: inset 0 1px 0 var(--flaeche-2); }
.planzeile.zeile-kopf { min-height: 0; padding-top: 8px; padding-bottom: 8px; grid-template-columns: 26px 104px minmax(0, 1fr) auto 92px; }
.pdatum { font-variant-numeric: tabular-nums; color: var(--leise); font-size: 13px; white-space: nowrap; }
.pdatum b { color: var(--text); font-weight: 500; display: inline-block; min-width: 24px; }
.planzeile.frei .pdatum b { color: var(--leise); }
.planzeile.ausser .pdatum, .planzeile.bonus .pdatum { color: var(--sehr-leise); }
.pfolgen { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pfolge { display: flex; align-items: center; gap: 8px; min-width: 0; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
.pfolge .ptitel { flex: 1; min-width: 0; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfolge.fest .ptitel { font-weight: 400; color: var(--leise); }
.pfolge.ziehbar { cursor: grab; }
/* Griff zum Verschieben (Florian, 01.11.2026): links am Rand, sechs Punkte, eigene Fläche beim Drüberfahren */
.pgriff { display: flex; align-items: center; justify-content: center; }
.griff { display: grid; place-items: center; width: 26px; height: 28px; border-radius: 7px; color: var(--leise); cursor: grab; }
.griff svg { width: 11px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  a.pfolge:hover { background: var(--flaeche-2); }
  .griff:hover { color: var(--text); background: var(--flaeche-3); }
}
.griff:active { cursor: grabbing; }
.planzeile.gezogen { opacity: .45; }
.pfrei { color: var(--sehr-leise); font-size: 13px; }
.planzeile.bonus { background: color-mix(in srgb, var(--akzent) 4%, var(--flaeche)); }
.plakette.bonus { background: var(--akzent-flaeche); color: var(--akzent-text); }
.planliste.ziehen .planzeile[data-platz] .pfrei { color: var(--leise); }
.planzeile.ueber { background: var(--akzent-flaeche); }
.planzeile.ueber .pdatum b, .planzeile.ueber .pfrei { color: var(--akzent-text); }
.plan-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--flaeche-2); border-radius: 10px; }
.segment a { padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 560; color: var(--leise); font-variant-numeric: tabular-nums; }
.segment a[aria-current="true"] { background: var(--erhaben); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
@media (max-width: 680px) { .planzeile { grid-template-columns: 26px 96px minmax(0, 1fr); padding: 3px 10px 3px 4px; } .pfolge .pquelle { display: none; }
  /* Auf dem Handy bricht der Titel über die Pillen, statt zu „…“ zu schrumpfen (Emil-Prüfung 04.11.2026) */
  .pfolge { flex-wrap: wrap; row-gap: 2px; } .pfolge .ptitel { flex: 1 1 calc(100% - 18px); white-space: normal; overflow-wrap: anywhere; } }   /* Punkt bleibt vor dem Titel */

/* Als Nächstes (Florian, 01.11.2026): auf den ersten Blick, Fläche im Akzent statt Rahmen */
/* Nächste Folge (Florian, 04.11.2026): gleiche Größe wie die anderen, darunter die blaue Linie; die Linie über
   dem Erschienenen fällt dann weg, sonst wären es zwei */
.planzeile.naechste + .planzeile { box-shadow: inset 0 2px 0 var(--akzent); }
.planliste:has(.naechste) .planzeile:not(.vergangen):not(.naechste) + .planzeile.vergangen { box-shadow: inset 0 1px 0 var(--flaeche-2); }
/* Statt „Als Nächstes“ trennt eine blaue Linie Zukunft und Vergangenheit (Florian, 02.11.2026) */
.planzeile:not(.vergangen) + .planzeile.vergangen { box-shadow: inset 0 2px 0 var(--akzent); }
.planzeile.vergangen .pdatum b { color: var(--leise); font-weight: 400; }
.planzeile.vergangen .ptitel { font-weight: 400; color: var(--leise); }


/* ── Verbindungen (Florian, 01.11.2026): grün = alles erreichbar, rot = mindestens eine fehlt ── */
/* Verbindungen (Florian, 02.11.2026): alles in Ordnung heißt nur ein Punkt in einer runden Pille. Beim Drüberfahren
   oder Klicken wächst die Fläche der Pille zur Tafel, beides ist eine Fläche (clip-path von der Pille aus). */
.verbindung { position: relative; --pw: 28px; }
.verbindung-pille { position: relative; z-index: 41; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 28px; min-width: 28px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  font: 600 12px/1 var(--schrift); cursor: pointer; background: var(--flaeche-2); color: var(--leise);
  transition: background-color 200ms ease, color 200ms ease; }
.verbindung-pille[data-zustand="ok"]:not([data-aktiv]) { padding: 0; width: 28px; }
.verbindung-pille[data-zustand="ok"]:not([data-aktiv]) [data-v-text] { display: none; }
.verbindung-pille[data-zustand="ok"] { background: var(--ph-veroeffentlicht); color: var(--ph-veroeffentlicht-t); }
.verbindung-pille[data-zustand="fehler"] { background: var(--warn); color: var(--warn-t); }
.v-punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.verbindung-pille[data-aktiv] .v-punkt { animation: v-puls 1.1s ease-in-out infinite; }
@keyframes v-puls { 50% { transform: scale(.55); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .verbindung-pille[data-aktiv] .v-punkt { animation: none; opacity: .6; } }
/* Offen: die Pille wird zum Reiter, die Tafel hängt rechtsbündig darunter, links neben der Pille bleibt frei
   (Florian, 02.11.2026). Eine Kehle verbindet Pille und Tafel, der Schatten liegt um die ganze Form. */
.verbindung { --v-flaeche: var(--flaeche-2); }
.verbindung:has([data-zustand="ok"]) { --v-flaeche: var(--ph-veroeffentlicht); }
.verbindung:has([data-zustand="fehler"]) { --v-flaeche: var(--warn); }
.verbindung-tafel { position: absolute; right: 0; top: 28px; z-index: 40; width: 300px; padding: 10px; border-radius: 18px 0 18px 18px;
  background: var(--v-flaeche); color: var(--text);
  clip-path: inset(0 0 100% calc(100% - var(--pw))); visibility: hidden;
  transition: clip-path 180ms var(--ease-out), visibility 0s linear 180ms; }
.verbindung.offen .verbindung-tafel { clip-path: inset(0); visibility: visible; transition: clip-path 280ms var(--ease-out), visibility 0s; }
.verbindung-pille { transition: background-color 200ms ease, color 200ms ease, border-radius 120ms ease; }
.verbindung.offen .verbindung-pille { border-radius: 14px 14px 0 0; transition: background-color 200ms ease, color 200ms ease, border-radius 0s; }
.verbindung::before { content: ""; position: absolute; z-index: 41; top: 14px; right: var(--pw); width: 14px; height: 14px; opacity: 0;
  background: radial-gradient(circle at 0 0, transparent 13.5px, var(--v-flaeche) 14px); pointer-events: none; transition: opacity 120ms ease; }
.verbindung.offen::before { opacity: 1; transition: opacity 0s; }
/* Schatten wächst im selben Takt wie die Fläche, statt hinterher zu erscheinen (Florian, 02.11.2026) */
.verbindung { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transition: filter 180ms var(--ease-out); }
.verbindung.offen { filter: drop-shadow(0 10px 24px rgba(0,0,0,.14)); transition: filter 280ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .verbindung, .verbindung.offen, .verbindung-tafel, .verbindung.offen .verbindung-tafel { transition: none; } }
.v-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v-liste li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 9px; }
.v-liste .v-punkt { width: 9px; height: 9px; }
.v-liste li[data-ok="1"] .v-punkt { background: var(--ph-veroeffentlicht-t); }
.v-liste li[data-ok="0"] .v-punkt { background: var(--warn-t); }
.v-liste b { font-size: 13px; font-weight: 620; display: block; }
.v-liste small { display: block; font-size: 11.5px; color: var(--leise); }
.v-liste .v-wert { font-size: 12px; font-weight: 600; text-align: right; }
.v-liste li[data-ok="1"] .v-wert { color: var(--ph-veroeffentlicht-t); }
.v-liste li[data-ok="0"] .v-wert { color: var(--warn-t); }
.v-vorgaenge { margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: var(--akzent-flaeche); color: var(--akzent-text); font-size: 12.5px; }
.v-vorgaenge div + div { margin-top: 4px; }
.v-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 0 4px; }
.v-fuss .klein { font-size: 11.5px; }

/* Plan-Seite aufgeräumt (Florian, 02.11.2026): ein Raster mit zwei Spalten und gemeinsamen Kanten.
   Oben die Ideen über die ganze Breite, darunter links die Reiter und rechts die Pool-Suche,
   dann die Karten „Plan“ und „Pool“ auf gleicher Höhe. Alle Bedienelemente 36 px hoch. */
.plan-raster { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; row-gap: 14px; align-items: start;
  grid-template-areas: "aktionen aktionen" "reiter suche" "plan pool"; }
.plan-raster > .plan-spalte { grid-area: plan; min-width: 0; display: flex; flex-direction: column; }
.plan-raster > .aktionen { grid-area: aktionen; margin: 0; flex-wrap: nowrap; }
.plan-raster .eigene-idee { max-width: none; flex: 1 1 auto; }
.plan-raster .aktionen .knopf, .plan-raster .eigene-idee input, .plan-raster .eigene-idee .knopf { height: 36px; }
.plan-raster > .werkzeuge { grid-area: reiter; margin: 0; }
.plan-raster > .pool-werkzeuge { grid-area: suche; display: flex; gap: 10px; align-items: center; min-width: 0; }
.pool-werkzeuge .pool-suche { flex: 1 1 auto; min-width: 0; width: auto; height: 36px; margin: 0; }
.plan-karte { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.plan-spalte > .plan-fuss { margin: 12px 0 0; }
.karten-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-height: 48px; padding: 10px 16px; flex-shrink: 0; }   /* viele Kategorien brechen um statt die Zeilen zu überdecken */
.karten-kopf h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.karten-kopf h3 .zahl { color: var(--sehr-leise); font-weight: 560; margin-left: 6px; font-variant-numeric: tabular-nums; }
.karten-link { font-size: 12.5px; font-weight: 560; color: var(--leise); padding: 5px 10px; border-radius: 8px; background: var(--flaeche-2); }
.karten-link::before { content: "↑ "; }
@media (hover: hover) and (pointer: fine) { .karten-link:hover { color: var(--text); background: var(--flaeche-3); } }
.ideenpool { grid-area: pool; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 0 0 6px;
  position: sticky; top: 76px; max-height: calc(100vh - 196px); max-height: calc(100dvh - 196px);   /* ganz unten bündig mit der Seitenauswahl (Florian, 02.11.2026) */
  display: flex; flex-direction: column; min-height: 0; transition: background-color 120ms ease; }
.pool-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Pool-Zeilen wie Plan-Zeilen: gleiche Höhe, gleicher Griff, gleicher Einzug */
.pool-folge { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 36px; padding: 3px 14px 3px 6px; }
.pool-folge + .pool-folge { box-shadow: inset 0 1px 0 var(--flaeche-2); }
.pool-folge.gezogen { opacity: .45; }
.pool-leer { margin: 0 16px 10px; color: var(--sehr-leise); font-size: 13px; }
.ideenpool.ueber { background: var(--akzent-flaeche); }
.ideenpool.ueber .pool-leer, .ideenpool.ueber h3 { color: var(--akzent-text); }
@media (max-width: 900px) {
  /* Auf dem Handy erst der Plan, dann der Pool mit seiner Suche direkt darüber; kein Scrollkasten im Scrollen
     (Durchsicht 03.11.2026) */
  .plan-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aktionen" "reiter" "plan" "suche" "pool"; }
  .plan-raster > .aktionen { flex-wrap: wrap; }
  .ideenpool { position: static; max-height: none; }
  .pool-liste { max-height: none; overflow: visible; }
}
.pquelle { font-size: 11px; font-weight: 600; color: var(--sehr-leise); flex-shrink: 0; }


/* Pink nur für den nächsten Schritt (Florian, 01.11.2026): der Hauptknopf im Status und der Spielknopf */
.sendung-punkt.jetzt .entscheiden .knopf:not(.zweitrangig):not(.belohnt) { background: var(--pink-verlauf); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--pink) 35%, transparent); }
.player .spielen { background: var(--pink-verlauf); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--pink) 40%, transparent); }

/* Läuft der Schritt gerade (vertont, geschrieben), ist sein Punkt schon grün (Florian, 01.11.2026) */
.sendung-punkt.laeuft i { background: var(--ph-veroeffentlicht-t); box-shadow: 0 0 0 4px var(--ph-veroeffentlicht); }
.sendung-punkt.fertig:has(+ .sendung-punkt.laeuft)::before { background: var(--ph-veroeffentlicht-t); }

/* Ziehen im Sendeplan (Florian, 01.11.2026): die ganze Zeile hebt sich ab, ihr Platz bleibt als Lücke */
.griff { touch-action: none; user-select: none; -webkit-user-select: none; }
.plan-geist { position: fixed; z-index: 60; margin: 0; pointer-events: none; list-style: none;
  background: var(--erhaben); border-radius: 12px; box-shadow: var(--schatten-hoch), 0 18px 40px rgba(0,0,0,.14); }
.plan-geist .griff { color: var(--text); cursor: grabbing; }
.planzeile.platzhalter, .pool-folge.platzhalter, .pfolge.platzhalter-folge { opacity: .3; }
html.plan-zieht, html.plan-zieht * { cursor: grabbing !important; user-select: none; }
.planzeile.ueber, .ideenpool.ueber { background: var(--akzent-flaeche); transition: background-color 120ms ease; }
.planzeile.angekommen { animation: angekommen 900ms var(--ease-out); }
@keyframes angekommen { 0% { background: color-mix(in srgb, var(--pink, var(--akzent)) 22%, var(--flaeche)); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .planzeile.angekommen { animation: none; } }



/* Zeilen-Knöpfe im Plan (Florian, 01.11.2026): erscheinen beim Drüberfahren, auf dem Handy immer */
.paktionen { display: flex; justify-content: flex-end; gap: 2px; }
/* Ohne Maus stehen die Knöpfe unter der Zeile über Datum und Titel, nicht abgeschnitten in der Griffspalte */
@media not ((hover: hover) and (pointer: fine)) { .planzeile > .paktionen { grid-column: 2 / -1; } .paktionen:empty { display: none; } }
/* Knöpfe liegen beim Drüberfahren über dem Zeilenende (Florian, 02.11.2026): so enden die Status-Plaketten
   bündig wie im Pool, ohne leere Spalte rechts */
@media (hover: hover) and (pointer: fine) {
  .paktionen { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding-left: 24px; pointer-events: none; opacity: 0;
    background: linear-gradient(to right, transparent, var(--flaeche) 24px); transition: opacity 120ms ease; }
  .planzeile:hover .paktionen:has(button), .planzeile:focus-within .paktionen:has(button) { opacity: 1; pointer-events: auto; }
  .planzeile.ueber .paktionen { display: none; }
}
.pknopf { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--leise); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transition: opacity 120ms ease, background-color 120ms ease; }
.pknopf svg { width: 15px; height: 15px; }
.planzeile:hover .pknopf, .planzeile:focus-within .pknopf { opacity: 1; }
@media (hover: none) { .pknopf { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .pknopf:hover { background: var(--flaeche-3); color: var(--text); } }
.pknopf:focus-visible { opacity: 1; }
html.plan-zieht .pknopf { opacity: 0 !important; }

/* Nachfrage, wenn andere Folgen betroffen sind */
.plan-frage { border: 0; padding: 24px 24px 20px; border-radius: 20px; width: min(500px, calc(100vw - 32px)); background: var(--erhaben); outline: none;
  color: var(--text); box-shadow: var(--schatten-hoch); }

.plan-frage h3 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 10px; }
.plan-frage p { margin: 0 0 22px; color: var(--leise); font-size: 14px; line-height: 1.55; }
.plan-frage .knoepfe { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-frage .knopf { width: auto; margin: 0; outline: none; }

.plan-frage .plan-abbrechen { margin-right: auto; padding: 8px 4px; font-size: 13.5px; font-weight: 560; outline: none; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .plan-frage .plan-abbrechen:hover { color: var(--text); } }
.plan-frage[open] { animation: dialog-ein 180ms var(--ease-out); }
.plan-frage::backdrop { animation: hintergrund-ein 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .plan-frage[open], .plan-frage::backdrop { animation: none; } }

/* Rückgängig mit ablaufendem Balken, 5 Sekunden */
.rueckgaengig { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 12px 12px 14px 18px; border-radius: 14px;
  background: #1f2433; color: #fff; box-shadow: var(--schatten-hoch); font-size: 13.5px; }
.rueckgaengig button { border: 0; border-radius: 9px; padding: 7px 12px; background: rgba(255,255,255,.16); color: #fff;
  font: 600 13px/1 var(--schrift); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rueckgaengig button:hover { background: rgba(255,255,255,.26); } }
.rueckgaengig i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pink, #ef5f99);
  transform-origin: left; animation: ablaufen 5s linear forwards; }
@keyframes ablaufen { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Ein- und Ausgleiten (Emil-Prüfung 04.11.2026); translate statt transform, das hält schon die Mitte. Die Zeit hält
   an, solange die Maus darauf ist oder der Tab im Hintergrund liegt. */
.rueckgaengig { transition: opacity 200ms var(--ease-out), translate 240ms var(--ease-out); }
@starting-style { .rueckgaengig { opacity: 0; translate: 0 calc(100% + 24px); } }
.rueckgaengig.weg { opacity: 0; translate: 0 12px; transition-duration: 150ms; pointer-events: none; }
.rueckgaengig.pause i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rueckgaengig { transition: opacity 150ms ease; } @starting-style { .rueckgaengig { translate: none; } } .rueckgaengig.weg { translate: none; } }

/* Seiten im Sendeplan (Florian, 01.11.2026) */
.seiten { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--flaeche-2); border-radius: 10px; flex-wrap: wrap; }
.seiten a, .seiten-jetzt { min-width: 32px; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 560; color: var(--leise);
  text-align: center; font-variant-numeric: tabular-nums; transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out); }
/* Aktuelle Seite in Blau (Zustand), Pink bleibt dem nächsten Schritt; Pfeile mit Abstand (Florian, 02.11.2026) */
.seiten a[aria-current="page"], .seiten-jetzt { background: var(--akzent-verlauf); color: var(--auf-akzent); box-shadow: 0 3px 10px color-mix(in srgb, var(--akzent) 30%, transparent); }
@media (hover: hover) and (pointer: fine) { .seiten a:not([aria-current]):hover { color: var(--text); background: var(--flaeche-3); } }
.seiten-luecke { padding: 0 4px; color: var(--sehr-leise); }
.seiten .seiten-pfeil { font-weight: 600; color: var(--text); background: var(--erhaben); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.seiten .seiten-pfeil:first-child { margin-right: 10px; }
.seiten .seiten-pfeil:last-child { margin-left: 10px; }


/* ── UI-Durchgang (Florian, 02.11.2026) ────────────────────────────────────────
   Alle Dialoge: gleiche Abdunklung mit leichtem Blur dahinter, gleicher Schatten. */
dialog::backdrop { background: var(--abdunkeln); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); }
.plan-frage { box-shadow: var(--schatten-dialog); }
.modal { border: 0; padding: 20px 22px; border-radius: 18px; width: min(440px, calc(100vw - 32px)); background: var(--erhaben);
  color: var(--text); box-shadow: var(--schatten-dialog); }
.modal[open] { animation: dialog-ein 180ms var(--ease-out); }
.modal::backdrop { animation: hintergrund-ein 180ms ease-out; }
.modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-kopf h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; min-width: 0; }
.modal { overflow-wrap: anywhere; }
.modal-kopf .blase-zu { flex-shrink: 0; }
.modal-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-fuss .knopf { width: auto; margin-top: 0; }
.modal .feld + .feld { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .modal[open], .modal::backdrop { animation: none; } }

/* Kacheln: das Wichtigste auf einen Blick (Auswertung) */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kacheln.klein { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.kachel { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border-radius: var(--radius);
  background: var(--flaeche); box-shadow: var(--schatten); }
.kachel > span { font-size: 12.5px; font-weight: 560; color: var(--leise); }
.kachel > b { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kacheln.klein .kachel > b { font-size: 21px; }
.kachel > small { font-size: 12px; color: var(--sehr-leise); font-variant-numeric: tabular-nums; }
.kachel .kontingent-balken { margin: 6px 0 2px; }
@media (max-width: 900px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.auswertung-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 900px) { .auswertung-raster { grid-template-columns: minmax(0, 1fr); } }
.zeile.ezeile { grid-template-columns: minmax(0, 1fr) 64px 80px 80px; }
.zeile.izeile { grid-template-columns: minmax(0, 1fr) 120px 96px 110px; }
.auswertung-raster > .abschnitt { margin-top: 32px; }   /* beide Überschriften auf einer Höhe */
.kacheln + .auswertung-raster > .abschnitt { margin-top: 32px; }
.zeile.kzeile { grid-template-columns: minmax(0, 1fr) 64px 150px 210px 90px; }
.zeile.kzeile .rechts, .zeile.ezeile .rechts, .zeile.izeile .rechts { color: var(--text); font-variant-numeric: tabular-nums; }
.zeile.kzeile.zeile-kopf .rechts, .zeile.ezeile.zeile-kopf .rechts, .zeile.izeile.zeile-kopf .rechts { color: var(--sehr-leise); }
.zeile.kzeile.summe { background: var(--flaeche-2); }
@media (max-width: 680px) {
  .zeile.kzeile { grid-template-columns: minmax(0, 1fr) auto; } .zeile.kzeile > :nth-child(2), .zeile.kzeile > :nth-child(3), .zeile.kzeile > :nth-child(4) { display: none; }
  .zeile.izeile { grid-template-columns: minmax(0, 1fr) 70px 90px; } .zeile.izeile > :nth-child(2) { display: none; }
}
.quote { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.quote i { width: 44px; height: 6px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; }
.quote i span { display: block; height: 100%; border-radius: 3px; background: var(--ph-veroeffentlicht-t); }

/* Auf Abruf: aufklappbare Blöcke unter Listen */
.aufklapp-block { margin-top: 14px; }
.aufklapp-block > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 6px 10px;
  margin-left: -10px; border-radius: 8px; font-size: 13px; font-weight: 560; color: var(--leise); }
.aufklapp-block > summary::-webkit-details-marker { display: none; }
.aufklapp-block > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms var(--ease-out); margin-right: 2px; }
.aufklapp-block[open] > summary::before { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .aufklapp-block > summary:hover { color: var(--text); background: var(--flaeche-2); } }
.aufklapp-block > .liste, .aufklapp-block > .kasten { margin-top: 8px; }
.erklaerung p { margin: 0; font-size: 13px; color: var(--leise); line-height: 1.55; }
.erklaerung p + p { margin-top: 6px; }
.erklaerung b { color: var(--text); font-weight: 620; }

/* Status mit Punkt statt großer Plakette (Quellen) */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.status-punkt { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--flaeche-3); display: inline-block; }
.status-punkt.ok { background: var(--ph-veroeffentlicht-t); }
.status-punkt.warn { background: var(--warn-t); }
.status-punkt.laeuft { background: var(--akzent); }
.letzter-lauf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.letzter-lauf .status-punkt { width: 10px; height: 10px; }
.letzter-lauf b { font-weight: 600; margin-right: 6px; }
.zeile.lauf { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.zeile.lauf b { font-weight: 580; }

/* Startseite: eine Karte je Podcast (Florian, 02.11.2026) */
.podcastkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.podcastkarte { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px;
  border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); color: var(--text);
  transition: box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) { .podcastkarte:hover { box-shadow: var(--schatten-hoch); } }
.pk-cover { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--flaeche-2); }
.pk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-text b { font-size: 15px; font-weight: 640; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-online { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.pk-plan { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; color: var(--leise); font-variant-numeric: tabular-nums; }
.pk-hinweis { font-size: 12px; color: var(--pink-text, var(--warn-t)); }
@media (prefers-reduced-motion: reduce) { .podcastkarte { transition: none; } }
/* Podcast importieren (Florian, 02.11.2026): Kachel wie die anderen, gestrichelt, Plus im Cover */
.pk-neu { border: 1.5px dashed color-mix(in srgb, var(--leise) 45%, transparent); background: transparent; box-shadow: none;
  font: inherit; text-align: left; cursor: pointer; width: 100%; }
.pk-neu .pk-cover { display: grid; place-items: center; color: var(--leise); }
.pk-neu .pk-cover .ic { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .pk-neu:hover { background: var(--flaeche); border-color: transparent; } }
.import-liste { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; margin-top: 10px; }
.import-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0;
  border-radius: 10px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.import-zeile { justify-content: flex-start; }
.import-cover { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--flaeche-3); }
.import-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.import-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-text small { font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.import-zeile b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-reiter { margin: 4px 0 10px; }
@media (hover: hover) and (pointer: fine) { .import-zeile:not(:disabled):hover { background: var(--flaeche-3); } }
.import-zeile:disabled { cursor: default; opacity: .6; }
.import-zeile.laedt { opacity: 1; }

/* Löschen (Florian, 02.11.2026): leise am Ende der Seitenleiste, der Dialog fragt nach */
.loeschen-knopf { align-self: flex-start; margin-top: 4px; font-size: 13px; color: var(--leise); }
.loeschen-knopf.gesperrt { color: var(--sehr-leise); cursor: default; }
@media (hover: hover) and (pointer: fine) { .loeschen-knopf:hover { color: var(--warn-t); } }
.knopf.gefahr { background: #d6455d; color: #fff; }
@media (hover: hover) and (pointer: fine) { .knopf.gefahr:hover { background: #c23a51; } }
.modal p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }

/* Profil (Florian, 02.11.2026) */
.profil-kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.profil-kopf h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.profil-kopf p { margin: 4px 0 0; font-size: 14px; }
.avatar { flex-shrink: 0; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(140deg, #ff86b6 0%, #ef5f99 35%, #34446b 100%); color: #fff; font-size: 26px; font-weight: 680;
  letter-spacing: 0.02em; box-shadow: 0 8px 24px color-mix(in srgb, var(--pink) 30%, transparent); }
.profil-zaehler { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
/* groß, aber nicht pink: Pink heißt nächster Schritt (Durchsicht 03.11.2026) */
.kachel.haupt > b { font-size: 34px; color: var(--text); }
@media (max-width: 900px) { .profil-zaehler { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kachel.haupt { grid-column: 1 / -1; } }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feld-paar + .feld, .feld + .feld-paar { margin-top: 10px; }
.wer { color: var(--leise); border-radius: 8px; padding: 4px 8px; margin: 0 -4px; }
@media (hover: hover) and (pointer: fine) { a.wer:hover { color: var(--text); background: var(--flaeche-2); } }

/* Trailer in den Einstellungen (Florian, 02.11.2026) */
.trailer-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); margin-bottom: 8px; }
.trailer-zeile.neu { background: color-mix(in srgb, var(--pink) 10%, var(--flaeche-2)); }
.trailer-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trailer-text b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trailer-hoch { margin-top: 4px; }

/* Team in der Auswertung (Florian, 02.11.2026) */
.haenger h3 { margin: 0 0 10px; font-size: 14px; }
.balken-zeile { display: grid; grid-template-columns: 160px minmax(0, 1fr) 76px 34px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.balken-zeile i { height: 8px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; }
.balken-zeile i b { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--akzent), var(--pink)); }
.balken-zeile em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.balken-zeile small { color: var(--sehr-leise); text-align: right; font-variant-numeric: tabular-nums; }
.personen { display: grid; gap: 14px; margin-top: 14px; }
.person-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.person-kopf > b { font-size: 15px; }
.person-haenger { margin-left: auto; font-size: 12.5px; color: var(--leise); padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--pink) 12%, var(--flaeche-2)); }
.person-haenger b { color: var(--pink-text, var(--text)); font-weight: 620; }
.avatar.klein { width: 30px; height: 30px; font-size: 13px; box-shadow: none; }
.person-zahlen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.person-zahlen div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); min-width: 0; }
.person-zahlen b { font-size: 17px; font-weight: 660; font-variant-numeric: tabular-nums; white-space: nowrap; }
.person-zahlen span { font-size: 12px; color: var(--leise); }
.person-details { padding: 8px 4px 0; }
.person-details p { margin: 8px 0 0; }
@media (max-width: 900px) { .person-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .balken-zeile { grid-template-columns: 110px minmax(0, 1fr) 70px 30px; } }

/* Aussprache-Wörterbuch in den Einstellungen (Florian, 02.11.2026): je Eintrag eine Zeile mit Testen und Merken */
.woerterbuch-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.woerterbuch-kopf p { margin: 0; }
.aus-tabelle { display: flex; flex-direction: column; gap: 6px; }
.aus-zeile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) max-content; gap: 8px; align-items: center; }
/* Knöpfe brauchen ihre Breite, sonst ragt der Papierkorb über den Rand (Florian, 02.11.2026); die neue Zeile hält den Platz frei */
.aus-neu .aus-knoepfe::after { content: ""; width: 25px; }
.aus-kopf span { font-size: 12px; font-weight: 560; color: var(--leise); }
.aus-zeile input { height: 34px; border: 0; border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); outline: none; min-width: 0; width: 100%; }
.aus-wort { display: flex; flex-direction: column; min-width: 0; }
.aus-wort b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aus-wort small { font-size: 11.5px; }
.aus-knoepfe { display: flex; align-items: center; gap: 6px; }
.aus-knoepfe .knopf { width: auto; margin-top: 0; }
.aus-knoepfe .knopf.laedt { opacity: .6; cursor: progress; }
.aus-weg { padding: 6px; color: var(--sehr-leise); }
@media (hover: hover) and (pointer: fine) { .aus-weg:hover { color: var(--warn-t); } }
.aus-neu { padding-top: 8px; margin-top: 2px; box-shadow: inset 0 1px 0 var(--flaeche-2); }
.aus-meldung { margin: 8px 0 0; }
@media (max-width: 760px) {
  .aus-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aus-kopf { display: none; }
  .aus-knoepfe { grid-column: 1 / -1; }
}

/* Logo C „Welle“ (Florian, 02.11.2026): Linie mit Abstand zum Rand, wabert in ihrem Rahmen (SMIL im SVG) */
.logo-welle { width: 18px; height: 18px; display: block; }

/* Hörprobe der Stimme mit Ohr statt Play-Pfeil (Florian, 02.11.2026); spielt sie, stehen die Pause-Striche da */
.stimme-wahl .spielen.klein:not([data-laeuft="1"])::before { content: none; }
.stimme-wahl .spielen.klein .ic { width: 18px; height: 18px; color: var(--auf-akzent); stroke-width: 1.8; }
.stimme-wahl .spielen.klein[data-laeuft="1"] .ic { display: none; }

/* Stapel für den Hoster (Florian, 02.11.2026): eigene Änderungen, gesammelt bis „Senden“ */
#stapel:empty { display: none; }
.stapel-leiste { max-width: 1152px; margin: 14px auto 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 8px 8px 16px; border-radius: 14px; background: var(--erhaben); box-shadow: var(--schatten); font-size: 13.5px; }
@media (max-width: 1199px) { .stapel-leiste { margin-left: 24px; margin-right: 24px; } }
.stapel-text { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stapel-text b { font-weight: 640; }
.stapel-leiste form { margin: 0; }
.stapel-leiste .knopf { width: auto; margin: 0; }
.stapel-hinweis { color: var(--warn-t); font-weight: 560; }
.stapel-text .stapel-hinweis { background: var(--warn); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.stapel-modal { width: min(560px, calc(100vw - 32px)); }
.stapel-zeilen { display: flex; flex-direction: column; gap: 2px; margin: 12px 0; max-height: 50vh; overflow: auto; }
.stapel-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); }
.stapel-zeile form { margin: 0; }
.stapel-was { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.stapel-was b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stapel-was em { font-style: normal; font-weight: 560; color: var(--leise); margin-right: 4px; }
.stapel-was s { color: var(--leise); }
.stapel-was small { font-size: 12px; }
.stapel-modal .modal-fuss .stapel-links { margin-right: auto; }
.stapel-modal .modal-fuss form { margin: 0; }

/* Rückgängig je Eintrag im Verlauf (Florian, 02.11.2026): leise, erst beim Drüberfahren deutlich */
.zurueck-knopf { border: 0; background: none; padding: 2px 0; margin-left: 8px; font: 560 12px/1.4 var(--schrift); color: var(--leise);
  cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: color .15s, text-decoration-color .15s; }
@media (hover: hover) and (pointer: fine) { .zurueck-knopf:hover { color: var(--text); text-decoration-color: currentColor; } }
.zurueck-knopf:disabled { opacity: .5; cursor: default; }
.zurueck-erledigt { margin-left: 8px; font-size: 12px; }

/* Kategorien (Florian, 02.11.2026): Farben aus einer Palette, die Bedeutung legt der Podcast fest */
:root { --kat-rot: #c9553f; --kat-orange: #d9822b; --kat-gelb: #c9a227; --kat-gruen: #5f9a3e; --kat-tuerkis: #2f9a94;
  --kat-blau: #3f78b5; --kat-violett: #8a5fbf; --kat-grau: #8a8f99; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kat-rot: #ea8670; --kat-orange: #f0a65c; --kat-gelb: #e6c65a;
  --kat-gruen: #8fc46a; --kat-tuerkis: #5cc7c0; --kat-blau: #79abe0; --kat-violett: #b392e2; --kat-grau: #a3a8b3; } }
:root[data-theme="dark"] { --kat-rot: #ea8670; --kat-orange: #f0a65c; --kat-gelb: #e6c65a; --kat-gruen: #8fc46a;
  --kat-tuerkis: #5cc7c0; --kat-blau: #79abe0; --kat-violett: #b392e2; --kat-grau: #a3a8b3; }
.kat-rot { background: var(--kat-rot); } .kat-orange { background: var(--kat-orange); } .kat-gelb { background: var(--kat-gelb); }
.kat-gruen { background: var(--kat-gruen); } .kat-tuerkis { background: var(--kat-tuerkis); } .kat-blau { background: var(--kat-blau); }
.kat-violett { background: var(--kat-violett); } .kat-grau { background: var(--kat-grau); }
.kat-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kategorie-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.kategorie-knopf { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 450; cursor: pointer; }
.kategorie-knopf[aria-pressed="true"] { background: var(--kat, var(--akzent)); color: #fff; font-weight: 560; box-shadow: var(--schatten-hoch); }
.kategorie-knopf .kat-haken { width: 13px; height: 13px; }
.kategorie-knoepfe.hat-wahl .kategorie-knopf:not([aria-pressed="true"]) { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .kategorie-knopf:not([aria-pressed="true"]):hover { background: var(--flaeche-3); } }
.kategorie-kasten .leiser-link { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--akzent-text); }
.kategorien-liste { display: flex; flex-direction: column; gap: 8px; }
.kategorie-zeile { display: flex; align-items: center; gap: 12px; }
.kategorie-zeile input { flex: 1 1 auto; min-width: 0; height: 36px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.kategorie-zeile input:focus-visible { box-shadow: inset 0 0 0 100vmax var(--fokus-flaeche); }
.farb-wahl { display: flex; gap: 4px; flex-shrink: 0; }
.farb-feld { position: relative; width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; opacity: .45; transition: opacity 140ms ease, transform 140ms var(--ease-out); }
.farb-feld.gewaehlt { opacity: 1; transform: scale(1.12); }
.farb-feld.gewaehlt::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
@media (hover: hover) and (pointer: fine) { .farb-feld:not(.gewaehlt):hover { opacity: .8; } }
.kat-weg { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; flex-shrink: 0; }
.kat-weg .ic { width: 14px; height: 14px; }
.kat-neu { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--akzent-text); }
.kat-neu .ic { width: 14px; height: 14px; }
@media (max-width: 640px) { .kategorie-zeile { flex-wrap: wrap; } .farb-wahl { order: 2; } }
.kat-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--leise); min-width: 0; }
.kat-legende span { display: inline-flex; align-items: center; gap: 6px; }
#kategorien, .tafel[id] { scroll-margin-top: 80px; }


/* Filter über dem Plan (Florian, 02.11.2026): Knopf mit Trichter, Tafel klappt beim Drüberfahren oder Klick auf */
.stand-filter { position: relative; flex: 0 0 auto; display: flex; height: 36px; margin: 0; }   /* sonst wird die Zeile höher als die Pool-Suche */
.filter-knopf { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border: 0; border-radius: 10px; background: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer; outline: none; }
.filter-knopf .ic { width: 15px; height: 15px; color: var(--leise); }
.filter-knopf.aktiv { background: var(--akzent-flaeche); color: var(--akzent-text); }
.filter-knopf.aktiv .ic { color: currentColor; }

.filter-wert::before { content: "·"; margin: 0 6px 0 1px; opacity: .6; }
.filter-tafel { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 230px; padding: 6px; margin-top: 6px; border-radius: 12px;
  background: var(--erhaben); box-shadow: var(--schatten-hoch); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 140ms ease, transform 160ms var(--ease-out), visibility 0s linear 160ms; }
.filter-tafel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* Brücke für die Maus */
.stand-filter.offen .filter-tafel { opacity: 1; visibility: visible; transform: none; transition: opacity 140ms ease, transform 160ms var(--ease-out), visibility 0s; }
.filter-tafel a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 13.5px; text-decoration: none; }
.filter-tafel a small { color: var(--sehr-leise); font-variant-numeric: tabular-nums; }
.filter-tafel a[aria-current="true"] { background: var(--akzent-flaeche); color: var(--akzent-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .filter-tafel a:not([aria-current]):hover { background: var(--akzent-flaeche); } }   /* derselbe Ton wie die Auswahl, nicht ein fast gleiches Grau (Florian, 03.11.2026) */
@media (prefers-reduced-motion: reduce) { .filter-tafel { transition: none; } }
/* Kalender: Tage mit eingeplanten Folgen liegen auf einem Kreis in der Akzentfarbe (Florian, 02.11.2026) */
.kalender-tag { position: relative; isolation: isolate; }
.kalender-tag.belegt:not(.gewaehlt)::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; background: color-mix(in srgb, var(--akzent) 26%, transparent); z-index: -1; }
.kalender-tag.belegt:not(.gewaehlt) { color: var(--text); font-weight: 650; }
/* Aufnahme von Tilman: Knöpfe mit Abstand zum Text darüber, nebeneinander (Florian, 02.11.2026) */
.sendung .aufnahme-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sendung .aufnahme-knoepfe form { margin: 0; }
.sendung .aufnahme-laeuft { margin: 8px 0 0; }

/* Audio beim Hoster geprüft (Florian, 02.11.2026) */
.hp-stelle { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; margin-top: 6px; border-radius: 9px; background: var(--flaeche-2); font-size: 13px; }
.hp-stelle small { grid-column: 1 / -1; color: var(--leise); font-size: 12px; }
#hoerpruefung form { margin-top: 10px; }

/* Trailer und Kategorien tauschen die Plätze (Florian, 02.11.2026). Kategorien gehören zum Formular, das sofort
   speichert, der Trailer hat ein eigenes; deshalb nur die Anzeige umstellen. */
.einstellungen-seite { display: flex; flex-direction: column; }
.einstellungen-seite > form.einstellungen { display: contents; }
.einstellungen-seite .tafel-podcast { order: -2; }
.einstellungen-seite #trailer { order: -1; margin: 0 0 14px; }
.einstellungen-seite #kategorien { order: 1; }

/* Menü am eigenen Namen (Florian, 02.11.2026): ersetzt die Reiter oben */
.wer-menue { position: relative; }
.wer-menue .wer { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; color: var(--leise); cursor: pointer; }
.wer-pfeil { width: 12px; height: 12px; transition: transform 160ms var(--ease-out); }
.wer-menue.offen .wer-pfeil { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .wer-menue .wer:hover { color: var(--text); background: var(--flaeche-2); } }
.wer-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 200px; padding: 6px; border-radius: 14px;
  background: var(--erhaben); box-shadow: var(--schatten-hoch), 0 12px 32px rgba(0,0,0,.16); display: flex; flex-direction: column;
  transform-origin: top right; animation: wer-auf 160ms var(--ease-out); }
.wer-liste[hidden] { display: none; }
.wer-liste a, .wer-liste button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .wer-liste a:hover, .wer-liste button:hover { background: var(--flaeche-2); } }
.wer-liste form { margin: 4px 0 0; padding-top: 4px; box-shadow: inset 0 1px 0 var(--flaeche-2); }
@keyframes wer-auf { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wer-liste { animation: none; } .wer-pfeil { transition: none; } }
/* Darstellung im Namensmenü (Florian, 03.11.2026): drei Felder statt des Knopfs oben */
.wer-thema { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 4px 10px;
  font-size: 13.5px; color: var(--text); }
.thema-wahl { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--flaeche-2); }
.wer-liste .thema-wahl button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border-radius: 7px;
  color: var(--text-2, var(--text)); opacity: .7; }
.wer-liste .thema-wahl button svg { width: 15px; height: 15px; }
.wer-liste .thema-wahl button[aria-checked="true"] { background: var(--erhaben); opacity: 1; box-shadow: var(--schatten-hoch); }
@media (hover: hover) and (pointer: fine) { .wer-liste .thema-wahl button:hover { background: var(--erhaben); opacity: 1; } }

/* Mehrere Folgen an einem Tag: je Folge ein Griff auf Höhe ihrer Zeile (Florian, 03.11.2026) */
.pgriff.mehrere { flex-direction: column; gap: 4px; }
.pgriff.mehrere .griff, .pgriff.mehrere .griff-platz { height: var(--pfolge-hoehe, 22px); }
.griff-platz { display: block; width: 26px; }

/* Zwei kleine Spalten Text und Audio im Plan (Florian, 03.11.2026): blass vorhanden, kräftig mit Haken freigegeben */
.pta { display: inline-flex; gap: 2px; flex-shrink: 0; margin-left: 2px; }
.pta-i { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--sehr-leise); }
.pta-i .ic { width: 14px; height: 14px; }
.pta-i.da { color: var(--leise); opacity: .55; }
.pta-i.frei { color: var(--akzent-text); background: var(--akzent-flaeche); }

.kopf-zurueck { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .kopf-zurueck:hover { color: var(--akzent-text); } }
.angabe { display: inline-flex; align-items: center; height: 28px; padding: 0 4px; font-size: 13px; color: var(--leise); }
/* Backup (Florian, 03.11.2026): ein Knopf, darunter die Backups als Liste; ein Backup zeigt die geänderten Folgen */
.backup-oben { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.backup-titel { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.backup-titel small { font-size: 14px; font-weight: 450; margin-left: 4px; }
.backup-zustand { display: flex; align-items: center; gap: 8px; }
.backup-zustand.fehler { color: var(--warn-t); }
.punkt-laeuft { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulsieren 1.4s ease-in-out infinite; }
.backup-seite .kasten { padding: 6px; }
.backup-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-radius: 10px; font-size: 14px; color: var(--text); text-decoration: none; }
.backup-zeile > span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.backup-zeile a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.backup-zeile:hover, .backup-zeile a:hover { background: var(--akzent-flaeche); } .backup-zeile a:hover { background: none; color: var(--akzent-text); } }
.backup-seite .kasten > p { padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) { .punkt-laeuft { animation: none; } }
/* Backup-Knopf sieht aus wie ein Link (Florian, 04.11.2026): Akzentfarbe und Pfeil, sonst sieht man nicht, dass er klickbar ist */
.backup-knopf { display: flex; margin-top: 10px; font-size: 12.5px; font-weight: 560; color: var(--akzent-text); }
@media (hover: hover) and (pointer: fine) { .backup-knopf:hover { color: color-mix(in srgb, var(--akzent-text) 75%, var(--text)); } }
.backup-zeile > .ic { width: 14px; height: 14px; color: var(--sehr-leise); flex-shrink: 0; }

/* Reiter „Studio“ (Florian, 03.11.2026; zweite Fassung nach „Das sieht ja furchtbar aus“): ein Editor-Kasten,
   Spurköpfe ruhig, Schalter als Pillen, Clips als weiche Flächen. Sprache in Marine, Musik in Pink. */
.produktion { --zeile: 76px; --sound: linear-gradient(135deg, #45b0a8, #2b8580); --sprache: linear-gradient(135deg, #56669a, #3e4d78);
  --musik: linear-gradient(135deg, #f07aa8, #d4568b); }
.prod-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.prod-haupt { min-width: 0; display: grid; gap: 14px; }

/* Kopf: Titel mit Liste der Produktionen, Speicherhinweis, Export */
.prod-kopf { display: flex; align-items: center; gap: 12px; padding: 0 2px 0 0; }
.prod-name { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.produktion .prod-titel { font: inherit; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
  border: 0; border-radius: 8px; padding: 5px 8px; min-width: 120px; width: auto; field-sizing: content; max-width: 420px; outline: none; background-color: transparent; }
#produktion .prod-titel { background-color: transparent; }
@media (hover: hover) and (pointer: fine) { #produktion .prod-titel:hover { background-color: var(--flaeche-2); } }
#produktion .prod-titel:focus { background-color: var(--flaeche-2); }
.prod-liste { height: 30px; }
.prod-liste-knopf { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--leise); display: grid; place-items: center; cursor: pointer; }
.prod-liste-knopf .ic { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .prod-liste-knopf:hover { background: var(--flaeche-2); color: var(--text); } }
.prod-liste .filter-tafel { min-width: 260px; }
.prod-liste .filter-tafel form { margin-top: 4px; padding-top: 4px; }
.prod-neu-knopf { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--akzent-text); font: inherit; font-size: 13.5px; font-weight: 560; cursor: pointer; }
.prod-neu-knopf .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .prod-neu-knopf:hover { background: var(--akzent-flaeche); } }
.prod-gespeichert { font-size: 12px; color: var(--sehr-leise); white-space: nowrap; }

/* Abspielen und Zoom */
.prod-transport { display: flex; align-items: center; gap: 12px; padding: 0 16px 12px; }
.prod-transport .spielen { width: 36px; height: 36px; }
.prod-transport .spielen svg { width: 14px; height: 14px; }
.produktion.spielt .prod-transport .play-icon { display: none; }
.produktion.spielt .prod-transport .pause-icon { display: block; }
.spielen.laedt { opacity: .6; }
.prod-zoom { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--sehr-leise); }
.prod-zoom .ic { width: 14px; height: 14px; }
.prod-zoom input { width: 120px; }

/* Schieberegler (Zoom, Lautstärke): dünne Bahn, runder Knopf, gefüllt bis zum Wert */
.produktion input[type="range"] { -webkit-appearance: none; appearance: none; height: 18px; background: none; cursor: pointer; margin: 0; }
.produktion input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--akzent) var(--anteil, 50%), var(--flaeche-3) var(--anteil, 50%)); }
.produktion input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--flaeche-3); }
.produktion input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--akzent); }
.produktion input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--erhaben); box-shadow: 0 1px 3px rgba(20, 30, 50, .3), 0 0 0 .5px rgba(20, 30, 50, .08); }
.produktion input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--erhaben); box-shadow: 0 1px 3px rgba(20, 30, 50, .3); }
.prod-zoom input[type="range"]::-webkit-slider-runnable-track { background: var(--flaeche-3); }

/* Zeitleiste */
.prod-zeitleiste { position: relative; overflow-x: auto; overflow-y: hidden; user-select: none; -webkit-user-select: none; }
.prod-kopfzeiger { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--pink); pointer-events: none; z-index: 2; }


/* Fuß */


/* Seitenleiste */
.prod-seite { display: grid; gap: 14px; min-width: 0; position: sticky; top: 16px; }
.prod-kasten h3 { margin: 0 0 12px; }
.prod-kasten form { display: grid; gap: 10px; }
.prod-kasten textarea { min-height: 110px; }
.prod-feld { display: grid; gap: 4px; font-size: 12px; color: var(--leise); }
.prod-feld select { width: 100%; min-width: 0; height: 36px; border: 0; border-radius: 10px; padding: 0 12px; background-color: var(--flaeche-2); color: var(--text); font: inherit; font-size: 13px; outline: none; }
.prod-kasten .knopf { width: 100%; margin: 2px 0 0; }
.prod-ablage { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--flaeche-2); cursor: pointer;
  transition: background-color 120ms ease; }
.prod-ablage-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--erhaben); color: var(--akzent-text); box-shadow: var(--schatten); }
.prod-ablage-icon .ic { width: 15px; height: 15px; }
.prod-ablage b { display: block; font-size: 13px; font-weight: 600; }
.prod-ablage small { display: block; font-size: 12px; color: var(--sehr-leise); }
.prod-ablage.ziel { background: var(--akzent-flaeche); }
@media (hover: hover) and (pointer: fine) { .prod-ablage:hover { background: var(--akzent-flaeche); } }
.prod-ablage.laedt { opacity: .7; pointer-events: none; }
.prod-dateien { margin-top: 10px; max-height: 50vh; overflow-y: auto; user-select: none; }
.prod-gruppe { margin: 10px 0 4px; padding: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sehr-leise); }
.prod-datei { display: flex; align-items: center; gap: 4px; padding: 3px 0; }
.prod-mini { --ton: var(--sprache); position: relative; flex: 1; min-width: 0; height: 38px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 6px; border-radius: 9px; overflow: hidden; color: #fff; background: var(--ton); cursor: grab;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .12); }
.prod-datei.musik .prod-mini { --ton: var(--musik); }
.prod-datei.sound .prod-mini { --ton: var(--sound); }
.prod-mini:active { cursor: grabbing; }
.prod-mini canvas { position: absolute; left: 0; top: 3px; pointer-events: none; }
.prod-mini > :not(canvas) { position: relative; }
.prod-dname { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.prod-ddauer { font-size: 11.5px; color: rgba(255,255,255,.85); }
.prod-probe { flex: 0 0 24px; width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: #3e4d78; }
.prod-datei.musik .prod-probe { color: #c4477e; }
.prod-datei.sound .prod-probe { color: #2b8580; }
.prod-probe svg { width: 10px; height: 10px; }
.prod-probe .pause-icon, .prod-datei.spielt .prod-probe .play-icon { display: none; }
.prod-datei.spielt .prod-probe .pause-icon { display: block; }
.prod-leer { margin: 8px 6px 0; font-size: 13px; color: var(--sehr-leise); }
@media (max-width: 900px) { .prod-raster { grid-template-columns: minmax(0, 1fr); } .prod-seite { position: static; order: -1; } }

/* ── Player im Mischpult wie der Player der Folgen (Florian, 03.11.2026): leicht durchscheinender Verlauf statt
   des kräftigen Dunkelblaus, pinker Spielknopf, Zeit links, Gesamtlänge rechts, dazwischen die Welle. */
.prod-transport {
  position: relative; margin: 0; padding: 12px 18px 12px 12px; gap: 16px; border-radius: 22px; color: #fff;
  background: linear-gradient(118deg, rgba(74, 90, 128, .66) 0%, rgba(60, 75, 111, .66) 40%, rgba(48, 61, 93, .7) 72%, rgba(38, 49, 76, .7) 100%);
  box-shadow: 0 14px 34px rgba(26, 34, 51, .18), 0 4px 10px rgba(10, 14, 24, .1);
  -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px);
}
.prod-transport::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.18), transparent 55%);
}
.prod-transport > * { position: relative; }
.prod-transport .spielen { width: 48px; height: 48px; background: var(--pink-verlauf); color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pink) 40%, transparent); }
.prod-transport .spielen svg { width: 18px; height: 18px; }
.prod-zeit { min-width: 44px; color: #fff; font-size: 12.5px; font-weight: 560; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.prod-zeit.ende { text-align: right; color: rgba(255,255,255,.82); }



.prod-kopfzeiger { z-index: 6; }
.prod-dweg { width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: none; color: var(--sehr-leise);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 120ms ease; }
.prod-dweg .ic { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) { .prod-dweg:hover { background: var(--flaeche-3); color: var(--text); } }
@media (hover: none) { .prod-dweg { opacity: 1; } }

/* ── Mischpult wie ein Canvas (Florian, 03.11.2026, vierte Fassung): Clips frei in der Box, nie übereinander ──
   Jeder Clip steckt in einer blassen Hülle: oben Name und Ducken, links und rechts je ein Ohr mit Fade-Knopf und
   Griff zum Kürzen. Der farbige Ton in der Mitte trägt Welle, Lautstärke-Linie, Fades und den Ducken-Schleier.
   Maße wie in static/produktion.js: Ohr 20, Kopf 20, Ton 50, unten 6. */
.prod-box { position: relative; min-height: 246px; background-image: radial-gradient(color-mix(in srgb, var(--sehr-leise) 22%, transparent) 1px, transparent 1px);
  background-size: 16px 16px; transition: background-color 120ms ease; }
.prod-box.leer::before { content: "Dateien aus der Seitenleiste hierher ziehen"; position: sticky; left: 0; display: grid; place-items: center;
  width: min(100%, 720px); height: 246px; font-size: 13px; color: var(--sehr-leise); }
.produktion.zieht-datei .prod-box { background-color: color-mix(in srgb, var(--akzent-flaeche) 55%, transparent); }
.prod-box.ziel { background-color: var(--akzent-flaeche); }

.prod-clip { --ton: var(--sprache); --blass: color-mix(in srgb, #56669a 16%, var(--erhaben)); --tinte: var(--akzent-text);
  position: absolute; height: 61px; border-radius: 11px; cursor: grab; touch-action: none; user-select: none;
  background: var(--blass); box-shadow: 0 1px 2px rgba(20, 30, 50, .1); transition: box-shadow 140ms ease, opacity 140ms ease, scale 140ms var(--ease-out); }
.prod-clip.musik { --ton: var(--musik); --blass: color-mix(in srgb, #ec5c96 15%, var(--erhaben)); --tinte: var(--pink); }
.prod-clip.sound { --ton: var(--sound); --blass: color-mix(in srgb, #45b0a8 16%, var(--erhaben)); --tinte: #2b8580; }
.prod-clip.gewaehlt { box-shadow: 0 6px 18px rgba(20, 30, 50, .18); --blass: color-mix(in srgb, #56669a 26%, var(--erhaben)); }
.prod-clip.musik.gewaehlt { --blass: color-mix(in srgb, #ec5c96 25%, var(--erhaben)); }
.prod-clip.zieht { cursor: grabbing; z-index: 5; box-shadow: 0 12px 28px rgba(20, 30, 50, .24); }

.prod-clip-kopf { position: absolute; left: 20px; right: 38px; top: 0; height: 18px; padding: 0 6px; display: flex; align-items: center; gap: 6px; }   /* Name und Ducken; Abstand zu den Dreiecken setzt static/produktion.js */
.prod-cname { flex: 1; min-width: 0; height: 14px; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 14 px wie Dreiecke und Ducken */
/* Ducken nur als Zeichen (Florian, 03.11.2026), 14 px hoch wie die Fade-Dreiecke und mit ihnen auf einer Linie;
   an: gefüllte Fläche in derselben Größe, kein Rand, der die Höhe verändert */
.prod-ducken-knopf { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 14px; padding: 0; border: 0; border-radius: 4px;
  cursor: pointer; color: var(--tinte); background: transparent; opacity: .55; transition: opacity 120ms ease, background-color 120ms ease; }
.prod-ducken-knopf svg { width: 14px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prod-ducken-knopf span { display: none; }
@media (hover: hover) and (pointer: fine) { .prod-ducken-knopf:hover { opacity: .9; } }
/* Ducken in Blau: es bezieht sich auf den Text (Florian, 03.11.2026) */
.prod-ducken-knopf { color: #3e4d78; }
.prod-ducken-knopf[aria-pressed="true"] { opacity: 1; color: #fff; background: var(--sprache); }

.prod-ton { position: absolute; left: 20px; right: 38px; top: 18px; height: 38px; border-radius: 8px; overflow: hidden; background: var(--ton); }
.prod-ton canvas { position: absolute; left: 0; top: 3px; pointer-events: none; }
.prod-clip.gekuerzt .prod-ton { border-radius: 3px; }

/* Ohren: Fade-Knopf oben, Griff zum Kürzen darunter */
.prod-ohr { position: absolute; top: 18px; bottom: 5px; width: 20px; display: grid; justify-items: center; }   /* so hoch wie der Ton */
.prod-ohr.links { left: 0; }
.prod-ohr.rechts { right: 0; }
.prod-griff { width: 100%; cursor: ew-resize; touch-action: none; position: relative; }
.prod-griff::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; border-radius: 2px;
  background: var(--tinte); opacity: .35; transition: opacity 120ms ease; }   /* über die ganze Höhe des Tons */
.prod-clip.gewaehlt .prod-griff::after { opacity: .75; }
@media (hover: hover) and (pointer: fine) { .prod-clip:hover .prod-griff::after { opacity: .75; } }
.prod-clip.kuerzt { cursor: ew-resize; }

/* Fades: der Ton wird schräg abgeschnitten, im Winkel der Fade-Linie (clip-path, static/produktion.js); der runde
   Griff oben am Ende des Fades zieht die Länge. Die Griffe liegen darüber und werden nicht mit abgeschnitten. */
.prod-ton-griffe { position: absolute; left: 20px; right: 38px; top: 18px; height: 38px; pointer-events: none; }
.prod-fade { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.prod-fade.ein { left: 0; }
/* Fade als durchgezogene schräge Linie von Ecke zu Ecke (Florian, 03.11.2026) */
.prod-fade-linie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: none; }   /* die Kurve liegt ganz im Ton, nichts ragt über die Kante */
.prod-fade.an .prod-fade-linie { display: block; }
.prod-fade-linie path { fill: none; stroke: var(--blass); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; shape-rendering: geometricPrecision; }   /* S-Kurve in der Farbe der Hülle */
.prod-fade.aus { right: 0; }
.prod-fade-griff { position: absolute; top: -16px; width: 12px; height: 14px; margin-left: -6px; pointer-events: auto; cursor: ew-resize;
  touch-action: none; color: var(--tinte); opacity: .45; transition: opacity 120ms ease; }
.prod-fade-griff svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }
.prod-fade.ein .prod-fade-griff { margin-left: -12px; }   /* 12 px breit: die Spitze liegt auf der Außenkante des Kürzen-Griffs */   /* die senkrechte Kante des Dreiecks steht genau auf Clipanfang bzw. Fade-Ende */
.prod-fade.aus .prod-fade-griff { margin-left: 0; }
.prod-clip.gewaehlt .prod-fade-griff { opacity: .8; }
@media (hover: hover) and (pointer: fine) { .prod-clip:hover .prod-fade-griff { opacity: .8; } }
.prod-fade.an .prod-fade-griff { opacity: 1; }
.prod-fade.ein .prod-fade-griff { left: 100%; }
.prod-fade.aus .prod-fade-griff { left: 0; }

.prod-clip.schmal .prod-ducken-knopf { display: none; }

.prod-kopf .knopf .ic { width: 14px; height: 14px; }

/* Rechtes Ohr: Fade-Knopf und Griff zum Kürzen am Ton, daneben der Lautstärke-Regler (Florian, 03.11.2026:
   „rechts neben dem Clip-Griff die Lautstärke einfach hoch und runter verstellen“). Die Welle zeigt das Ergebnis. */
.prod-ohr.rechts { width: 38px; grid-template-columns: 20px 18px; justify-items: center; }   /* Griff wie links 8 bis 12 px von der Kante */
.prod-ohr.rechts .prod-griff { grid-column: 1; }
/* Oben so weit vom Clip-Rand wie unten (Florian, 04.11.2026): das Ohr beginnt 18 px unter der Kante (Platz für den
   Namen), der Regler ragt 13 px darüber hinaus und endet so wie unten 5 px vor dem Rand */
.prod-laut { grid-column: 2; position: relative; width: 20px; height: calc(100% + 13px); margin-top: -13px; cursor: ns-resize; touch-action: none; outline: none; }
.prod-laut::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; border-radius: 2px;
  background: linear-gradient(to top, var(--tinte) var(--anteil, 71%), color-mix(in srgb, var(--tinte) 18%, transparent) var(--anteil, 71%)); opacity: .8; }
.prod-laut i { position: absolute; left: 50%; bottom: calc(2px + (100% - 4px) * var(--a, .714)); width: 12px; height: 12px; margin: 0 0 -6px -6px;
  border-radius: 50%; background: var(--erhaben); box-shadow: 0 1px 3px rgba(20, 30, 50, .35); }
.prod-laut b { position: absolute; right: calc(100% + 2px); top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(15, 20, 35, .7); opacity: 0; transition: opacity 120ms ease; pointer-events: none;
  font-variant-numeric: tabular-nums; z-index: 4; }
.prod-clip.pegelt .prod-laut b, .prod-laut:focus-visible b { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .prod-laut:hover b { opacity: 1; } }
.prod-laut:focus-visible { box-shadow: none; }
.prod-laut:focus-visible i { background: color-mix(in srgb, var(--tinte) 30%, var(--erhaben)); }

/* Player: Welle der ganzen Produktion, hell bis zur Abspielstelle; Klick springt */
.prod-mix { position: relative; flex: 1; min-width: 0; height: 40px; cursor: pointer; touch-action: none; user-select: none; }
.prod-mix.spult { cursor: ew-resize; }
.prod-mix canvas { position: absolute; left: 0; top: 0; }

/* Zoom unten rechts im Fuß */
.prod-einpassen { height: 26px; padding: 0 11px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 560; cursor: pointer;
  color: var(--akzent-text); background: var(--akzent-flaeche); }

/* Leinwand ohne weißen Kasten drumherum (Florian, 03.11.2026): eine saubere Fläche mit runden Ecken,
   der Zoom als Pille unten rechts darauf */
.prod-leinwand { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--erhaben); box-shadow: var(--schatten); }
.prod-box { min-height: 300px; }
.prod-zoom-pille { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--erhaben) 88%, transparent); box-shadow: 0 4px 14px rgba(20, 30, 50, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.prod-zoom-pille .prod-zoom { margin: 0; color: var(--sehr-leise); }
.prod-zoom-pille .prod-zoom input { width: 96px; }
.prod-zoom-pille .prod-einpassen { height: 24px; font-size: 11.5px; }
.prod-pool { display: grid; gap: 10px; }
.prod-pool-ok { margin: 0; font-size: 13px; }
.prod-pool-ok a { color: var(--akzent-text); font-weight: 600; }

/* Griff mit sechs Punkten: am Clip oben links in der Ecke der Hülle, auf einer Linie mit Dreiecken und Ducken;
   in der Seitenleiste links vor jeder Datei */
.prod-greif { display: grid; place-items: center; width: 12px; height: 14px; color: var(--tinte, var(--sehr-leise)); opacity: .5; cursor: grab;
  pointer-events: none; transition: opacity 120ms ease; }
.prod-greif svg { width: 8px; height: 14px; fill: currentColor; }
.prod-clip.gewaehlt .prod-greif { opacity: .85; }
@media (hover: hover) and (pointer: fine) { .prod-clip:hover .prod-greif { opacity: .85; } }
.prod-datei > .prod-greif { flex: 0 0 12px; color: var(--sehr-leise); }
@media (hover: hover) and (pointer: fine) { .prod-datei:hover > .prod-greif { opacity: .9; } }
.prod-quelle { display: inline-flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 12.5px; font-weight: 560; color: var(--akzent-text); text-decoration: none; }
.prod-quelle .ic { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .prod-quelle:hover { text-decoration: underline; } }
/* Die Pille sitzt oben rechts (Florian, 03.11.2026); die Clips beginnen darunter */
.prod-box { margin-top: 52px; }
/* Papierkorb in der Pille: beim Ziehen eines Clips hebt er sich hervor, darüber öffnet er sich und färbt sich rot */
.prod-oben-rechts { position: absolute; right: 12px; top: 12px; z-index: 7; display: flex; align-items: center; gap: 10px; }
.prod-werkzeug { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--sehr-leise); cursor: grab; touch-action: none;
  background: color-mix(in srgb, var(--erhaben) 88%, transparent); box-shadow: 0 4px 14px rgba(20, 30, 50, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 160ms var(--ease-out, ease-out), background-color 160ms ease, color 160ms ease; }
.prod-werkzeug .ic { width: 15px; height: 15px; transition: transform 200ms var(--ease-out, ease-out); }
.prod-muell.sichtbar { color: var(--warn-t); background: var(--warn); transform: scale(1.12); }
.prod-muell.bereit { color: #fff; background: var(--warn-t); transform: scale(1.35); box-shadow: 0 6px 18px color-mix(in srgb, var(--warn-t) 40%, transparent); }
.prod-muell.bereit .ic { transform: rotate(-12deg) translateY(-1px); }
.prod-clip.faellt { opacity: .45; scale: .96; }   /* Übergang am Clip selbst, so gleitet er auch zurück (04.11.2026) */
@media (prefers-reduced-motion: reduce) { .prod-muell, .prod-muell .ic, .prod-clip { transition: none; } .prod-muell, .prod-muell .ic { transform: none; } .prod-clip.faellt { scale: none; } }

/* Werkzeuge zum Draufziehen: Schere und Papierkorb (Florian, 03.11.2026: „das muss alles ganz klar angezeigt sein“) */
.prod-oben-rechts { gap: 8px; }
.prod-oben-rechts .prod-zoom-pille { margin-left: 2px; }
.prod-werkzeug.benutzt { opacity: .35; }
@media (hover: hover) and (pointer: fine) { .prod-werkzeug:hover { color: var(--text); } .prod-schere:hover { color: var(--akzent-text); } .prod-muell:hover { color: var(--warn-t); } }
/* Das Werkzeug an der Maus */
.prod-geist { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; cursor: grabbing; color: var(--text);
  box-shadow: 0 10px 26px rgba(20, 30, 50, .28); transition: background-color 120ms ease, color 120ms ease, scale 140ms var(--ease-out, ease-out); }
.prod-geist.prod-schere.trifft { color: #fff; background: var(--akzent); scale: 1.15; }
.prod-geist.prod-muell.trifft { color: #fff; background: var(--warn-t); scale: 1.15; }
.produktion[class*="werkzeug-"], .produktion[class*="werkzeug-"] * { cursor: grabbing !important; }
/* Schere über einem Clip: eine Schnittlinie mit der Zeit darüber */
.prod-schnitt { position: absolute; top: -20px; bottom: -6px; width: 0; z-index: 4; pointer-events: none;
  border-left: 2px dashed #fff; filter: drop-shadow(0 0 2px rgba(10, 15, 30, .6)); }
.prod-schnitt::before { content: attr(data-zeit); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--akzent); }
.prod-clip.ziel-schere { --blass: color-mix(in srgb, #56669a 32%, var(--erhaben)); box-shadow: 0 10px 24px rgba(20, 30, 50, .22); }   /* Fläche statt Rand */
.prod-clip.musik.ziel-schere { --blass: color-mix(in srgb, #ec5c96 30%, var(--erhaben)); }   /* jede Art in ihrem eigenen Ton */
.prod-clip.sound.ziel-schere { --blass: color-mix(in srgb, #45b0a8 30%, var(--erhaben)); }
/* Papierkorb über einem Clip: der Clip wird rot und zeigt den Papierkorb */
.prod-clip.ziel-muell { box-shadow: 0 10px 24px rgba(20, 30, 50, .22); }
.prod-clip.ziel-muell .prod-ton { filter: saturate(.2) brightness(.9); }
.prod-clip.ziel-muell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 5; pointer-events: none;
  background: color-mix(in srgb, var(--warn-t) 28%, transparent); }
@media (prefers-reduced-motion: reduce) { .prod-geist { transition: none; } }

/* Platzhalter beim Ziehen: Umriss und sehr blasse Farbe, wo der Clip landet (Florian, 03.11.2026, ausdrücklich mit Umriss) */
.prod-platz { position: absolute; z-index: 1; border-radius: 12px; pointer-events: none; border: 1.5px dashed color-mix(in srgb, #56669a 70%, transparent);
  background: color-mix(in srgb, #56669a 12%, transparent); }
.prod-platz.musik { border-color: color-mix(in srgb, #ec5c96 70%, transparent); background: color-mix(in srgb, #ec5c96 12%, transparent); }
.prod-platz.sound { border-color: color-mix(in srgb, #45b0a8 70%, transparent); background: color-mix(in srgb, #45b0a8 12%, transparent); }
.prod-platz[hidden] { display: none; }
.prod-clip.zieht { opacity: .85; }

/* Platzhalter gleitet statt zu springen */
.prod-platz { left: 0; top: 0; transition: transform 120ms var(--ease-out); }
.prod-platz:not([data-da]) { transition: none; }   /* Lage per transform, nicht top/left (04.11.2026) */
/* Leiste über den Clips: Abspielstelle setzen und ziehen */
.prod-kopf-band { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 1; cursor: ew-resize; }
@media (prefers-reduced-motion: reduce) { .prod-platz { transition: none; } }

/* Einpassen klappt weich auf und zu; die Lücke der Pille schließt sich mit, Schere und Papierkorb gleiten nach */
.prod-zoom-pille .prod-einpassen { max-width: 90px; overflow: hidden; white-space: nowrap;
  transition: max-width 220ms var(--ease-out, ease-out), padding 220ms var(--ease-out, ease-out), margin 220ms var(--ease-out, ease-out), opacity 160ms ease; }
.prod-zoom-pille .prod-einpassen.zu { max-width: 0; padding: 0; margin-right: -8px; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .prod-zoom-pille .prod-einpassen { transition: none; } }
/* Wo man den Abspielkopf greift (die Leiste über den Clips), ist die Linie dicker: ein Griff (Florian, 03.11.2026) */
.prod-kopfzeiger::before { content: ""; position: absolute; top: 8px; left: 50%; width: 6px; height: 32px; margin-left: -3px; border-radius: 3px;
  background: var(--pink); box-shadow: 0 1px 4px color-mix(in srgb, var(--pink) 45%, transparent); transition: transform 140ms var(--ease-out); }
.produktion.kopf-zieht .prod-kopfzeiger::before { transform: scaleX(1.333); }
.prod-loeschen { justify-self: start; margin: 2px 0 0 4px; font-size: 12.5px; }

/* Auswahl mit Rahmen (Florian, 03.11.2026) */
.prod-rahmen { position: absolute; z-index: 4; pointer-events: none; border-radius: 6px;
  background: color-mix(in srgb, var(--akzent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent); }
.prod-clip.markiert { --blass: color-mix(in srgb, #56669a 30%, var(--erhaben)); box-shadow: 0 6px 16px rgba(20, 30, 50, .18); }
.prod-clip.musik.markiert { --blass: color-mix(in srgb, #ec5c96 28%, var(--erhaben)); }
.prod-clip.sound.markiert { --blass: color-mix(in srgb, #45b0a8 28%, var(--erhaben)); }

/* Der Block an der Maus beim Ziehen aus der Seitenleiste: runde Ecken, Schatten, leicht angehoben */
.prod-mini-geist { position: fixed; z-index: 1000; pointer-events: none; cursor: grabbing; margin: 0;
  box-shadow: 0 14px 32px rgba(20, 30, 50, .3), 0 3px 8px rgba(20, 30, 50, .18); transform: rotate(-1.5deg) scale(1.02); opacity: .96; }
.produktion.zieht-datei, .produktion.zieht-datei * { cursor: grabbing !important; }
.prod-mini { touch-action: none; }
/* Ducken sitzt am rechten Fade-Dreieck, immer 6 px links davon, und wandert mit ihm (Florian, 04.11.2026) */
.prod-fade.aus .prod-ducken-knopf { position: absolute; top: -16px; right: calc(100% + 6px); pointer-events: auto; }
/* Datei löschen: Papierkorb neben jeder Datei, leise sichtbar, beim Drüberfahren in der Warnfarbe */
.prod-datei .prod-dweg { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; opacity: .45; }
.prod-datei .prod-dweg .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .prod-datei:hover .prod-dweg { opacity: .8; } .prod-datei .prod-dweg:hover { opacity: 1; color: var(--warn-t); background: var(--warn); } }

/* Passwort anzeigen (Florian, 04.11.2026): Auge rechts im Feld, Fläche statt Rand */
.passwort-feld { position: relative; display: block; }
.passwort-feld input { width: 100%; padding-right: 44px; }
.passwort-zeigen { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--leise); display: grid; place-items: center; cursor: pointer; padding: 0; }
.passwort-zeigen svg { width: 17px; height: 17px; }
.passwort-zeigen .auge-zu, .passwort-zeigen[aria-pressed="true"] .auge-auf { display: none; }
.passwort-zeigen[aria-pressed="true"] .auge-zu { display: block; }
.passwort-zeigen:active { background: var(--flaeche-3); }
@media (hover: hover) and (pointer: fine) { .passwort-zeigen:hover { color: var(--text); background: var(--flaeche-2); } }

/* Passwort neu setzen im Team (Florian, 04.11.2026) */
.passwort-neu-form { margin-top: 6px; }
.passwort-neu-knopf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 560; padding: 4px 8px; margin-left: -8px; border-radius: 8px; }
.passwort-neu-knopf .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .passwort-neu-knopf:hover { color: var(--text); background: var(--flaeche-2); } }
.passwort-anzeige { position: relative; background: var(--flaeche-2); border-radius: 12px; padding: 16px 52px 16px 16px; margin: 14px 0 6px; }
.passwort-anzeige code { font: 600 19px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; user-select: all; }
.passwort-anzeige .kopier-knopf { top: 50%; transform: translateY(-50%); right: 10px; }

/* Abweichungen erklärt (Florian, 04.11.2026): Hinweis auf der Karte öffnet ein Info-Fenster mit den Folgen */
.pk-info { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; cursor: pointer; }
.pk-info .ic { width: 13px; height: 13px; opacity: .8; }
@media (hover: hover) and (pointer: fine) { .pk-info:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }

.abw-dialog { width: min(560px, calc(100vw - 32px)); }
.abw-dialog p { margin: 0 0 10px; line-height: 1.5; }
.abw-liste { max-height: min(50vh, 420px); overflow-y: auto; margin: 14px -8px 0; display: flex; flex-direction: column; gap: 2px; }
.abw-zeile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
.abw-zeile:nth-child(odd) { background: color-mix(in srgb, var(--flaeche-2) 60%, transparent); }
.abw-zeile span { font-size: 12.5px; color: var(--leise); }
@media (hover: hover) and (pointer: fine) { .abw-zeile:hover { background: var(--flaeche-2); } }

/* Grenzfälle (Emil-Prüfung 04.11.2026): lange Namen im Kopf und im Team */
.wer-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) { .wer-name { max-width: 9ch; } }
.teamzeile .zeile-titel b, .teamzeile .zeile-titel span { white-space: normal; overflow-wrap: anywhere; }
/* Pool: erst 60 Ideen, der Rest auf Klick; die Suche sucht immer in allen */
.pool-liste:not(.alle) .pool-folge:nth-child(n+61) { display: none; }
.pool-mehr { display: block; width: calc(100% - 24px); margin: 6px 12px 4px; height: 34px; border: 0; border-radius: 10px; background: var(--flaeche-2);
  color: var(--leise); font: inherit; font-size: 13px; font-weight: 560; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pool-mehr:hover { color: var(--text); background: var(--flaeche-3); } }
.pool-liste.alle + .pool-mehr { display: none; }

/* Popover öffnen aus Richtung ihres Knopfes, wie das Namensmenü (Emil-Prüfung 04.11.2026). Nur mit opacity und
   scale, die stören keine Verschiebung; Schließen bleibt sofort. */
@keyframes pop-auf { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
.kalender { transform-origin: top left; animation: pop-auf 150ms var(--ease-out); }
.kalender.oben { transform-origin: bottom left; }
.tempo-menue:not([hidden]) { transform-origin: bottom right; animation: pop-auf 150ms var(--ease-out); }
.sprechblase:not([hidden]) { transform-origin: 30px 100%; animation: pop-auf 160ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .kalender, .tempo-menue:not([hidden]), .sprechblase:not([hidden]) { animation: none; } }

/* Dialoge schließen kurz weich statt schlagartig, schneller als sie aufgehen (Emil-Prüfung 04.11.2026).
   Browser ohne overlay/allow-discrete schließen wie bisher sofort. */
:is(.modal, .plan-frage, .themen-dialog) { transition: opacity 140ms ease-out, scale 140ms var(--ease-out), overlay 140ms allow-discrete, display 140ms allow-discrete; }
:is(.modal, .plan-frage, .themen-dialog):not([open]) { opacity: 0; scale: .97; }
dialog::backdrop { transition: opacity 140ms ease-out, overlay 140ms allow-discrete, display 140ms allow-discrete; }
dialog:not([open])::backdrop { opacity: 0; }
@media (prefers-reduced-motion: reduce) { :is(.modal, .plan-frage, .themen-dialog), dialog::backdrop { transition: none; } }

/* DAW auf Touch: waagerecht ziehen geht, senkrecht scrollt wieder die Seite (nach .prod-clip, sonst gewinnt touch-action: none) */
@media (pointer: coarse) { .prod-clip { touch-action: pan-y; } }

/* Hover für Knöpfe und Reiter, bisher hatte ihn nur „Löschen“ (Emil-Prüfung 04.11.2026) */
@media (hover: hover) and (pointer: fine) {
  .knopf:not(:disabled):not(.zweitrangig):not(.gefahr):not(.arbeitet):hover { filter: brightness(1.08); }
  .knopf.zweitrangig:not(:disabled):hover { background: var(--flaeche-3); }
  .reiter a:not([aria-current="true"]):not([aria-current="page"]):hover,
  .segment a:not([aria-current="true"]):hover,
  .modus button:not([aria-pressed="true"]):hover,
  .filter button:not([aria-current="true"]):not([aria-pressed="true"]):hover { color: var(--text); }
}

/* Kleine Einblendungen (Emil-Prüfung 04.11.2026): neue Assistenten-Nachrichten, die Ideenliste nacheinander,
   aufklappende Prüfgruppen im Takt mit ihrem Pfeil. Klicks werden nie blockiert. */
.assistent-nachricht.neu { animation: dran-rutschen 180ms var(--ease-out) backwards; }
.themen-zeile { animation: dran-rutschen 200ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
details.pblock { interpolate-size: allow-keywords; }
details.pblock::details-content { block-size: 0; overflow: clip; opacity: 0;
  transition: block-size 200ms var(--ease-out), opacity 150ms ease, content-visibility 200ms allow-discrete; }
details.pblock[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .assistent-nachricht.neu, .themen-zeile { animation: none; }
  details.pblock::details-content { transition: none; }
}

/* Für dich, Team-Ziel, Meilensteine und 3-Monats-Ring (Florian, 04.11.2026) */
.start-oben { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
@media (max-width: 760px) { .start-oben { grid-template-columns: minmax(0, 1fr); } }
.start-oben .kasten { margin: 0; }
.start-oben h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 10px; }
.todo-liste { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.todo { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .todo:hover { background: var(--flaeche-2); } }
.todo span { min-width: 0; overflow-wrap: anywhere; }
.todo small { color: var(--sehr-leise); font-size: 12px; white-space: nowrap; }
.todo-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.todo-fehler .todo-punkt { background: var(--warn-t); }
.todo-audio .todo-punkt { background: var(--ph-audio-t, var(--akzent)); }
.todo-luecke .todo-punkt { background: var(--pink, #ef5f99); }
.ziel-balken { height: 8px; border-radius: 4px; background: var(--flaeche-2); overflow: hidden; margin: 10px 0 8px; }
.ziel-balken i { display: block; height: 100%; border-radius: 4px; background: var(--akzent-verlauf); }
.team-ziel-satz { margin: 0; font-weight: 560; }
.team-ziel.erreicht .ziel-balken i { background: var(--ph-veroeffentlicht-t); }
.team-ziel.erreicht .team-ziel-satz { color: var(--ph-veroeffentlicht-t); }
.meilensteine { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.meilenstein { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--flaeche); box-shadow: var(--schatten);
  color: var(--text); font-size: 13px; text-decoration: none; max-width: 100%; }
.meilenstein .ic { width: 15px; height: 15px; color: #e3a63a; flex-shrink: 0; }
.meilenstein span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meilenstein small { color: var(--sehr-leise); }
.pk-ziel { font-size: 12px; color: var(--leise); }
.ziel-ring { --anteil: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: radial-gradient(closest-side, var(--flaeche) 76%, transparent 78%), conic-gradient(var(--akzent) calc(var(--anteil) * 1%), var(--flaeche-2) 0); }
.ziel-ring span { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ziel-ring small { font-size: 9px; font-weight: 600; color: var(--leise); margin-left: 1px; }
.ziel-ring.voll { background: radial-gradient(closest-side, var(--flaeche) 76%, transparent 78%), conic-gradient(var(--ph-veroeffentlicht-t) 100%, var(--flaeche-2) 0); }
/* Podcast-Seite: Balken über dem Plan */
.plan-ziel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.plan-ziel .ziel-balken { flex: 1 1 200px; margin: 0; }
.plan-ziel b { font-weight: 600; }
.plan-ziel .leise { font-size: 13px; }
.betreut-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.betreut-form .knopf { width: auto; }
.betreut-wahl .tag-knopf span { width: auto; height: 32px; padding: 0 12px; font-size: 13px; }
.profil-podcasts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.profil-podcast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--flaeche); box-shadow: var(--schatten); color: var(--text); text-decoration: none; }
.profil-podcast > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profil-podcast small { color: var(--leise); font-size: 12.5px; }
/* Schein im Team-Ziel-Balken (Florian, 04.11.2026): ein heller Streifen läuft langsam von links nach rechts durch
   den gefüllten Teil, dann eine Pause. Nur transform, daher billig; bei reduzierter Bewegung aus. */
.team-ziel .ziel-balken i { position: relative; overflow: hidden; }
.team-ziel .ziel-balken i::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);   /* kaum sichtbar (Florian, 04.11.2026) */
  transform: translateX(-100%); animation: balken-schein 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes balken-schein { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .team-ziel .ziel-balken i::after { animation: none; display: none; } }
.fuer-dich-unter { font-size: 12.5px; font-weight: 600; color: var(--leise); margin: 14px 0 6px; }
.todo-bald .todo-punkt { background: var(--ph-veroeffentlicht-t); }
/* Folgen eingeplant wieder eingefärbt, sobald eine Zahl steht (Florian, 04.11.2026); grün statt pink, Pink heißt nächster Schritt */
.kachel.haupt.gefuellt { background: linear-gradient(140deg, color-mix(in srgb, var(--ph-veroeffentlicht-t) 16%, var(--flaeche)), var(--flaeche) 70%); }
.kachel.haupt.gefuellt > b { color: var(--ph-veroeffentlicht-t); }

/* Was Hörer sagen (Florian, 04.11.2026) */
.stimmen { position: relative; margin: 0 0 14px; padding: 14px 18px; border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.stimme { margin: 0; animation: stimme-ein 400ms ease-out; }
@keyframes stimme-ein { from { opacity: 0; } }
.stimme-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; padding-right: 48px; }
.stimme blockquote { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.stimme blockquote b { font-weight: 600; }
.sterne { display: inline-flex; gap: 2px; }
.sterne i { width: 11px; height: 11px; background: var(--flaeche-3);
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.sterne i.an { background: #e3a63a; }
.stimmen-zaehler { position: absolute; top: 14px; right: 18px; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .stimme { animation: none; } }