/* ClipDesk-Oberfläche (Host clipdesk, Plan Phase 5 P5.0): violetter Akzent und Ergänzungen zum Gerüst aus app.css.
   Wird nach app.css geladen. Jede Regel hängt an .clipdesk-seite (html und body der ClipDesk-Seiten), nichts wirkt
   auf FlexAI. Kein Skript, keine Schrift, keine Bilder von Dritten.

   Akzent hell:   #6D3FD9, Hover #5A2FC0, Text darauf #FFFFFF
   Akzent dunkel: #B49CFF, Hover #C8B6FF, Text darauf #0B0D12
   Gemessen mit einem Skript (WCAG 2.2 SC 1.4.3 und 1.4.11, relative Luminanz), Flächen --bg und --surface von app.css:
   hell:   Akzent gegen --bg 6.24, gegen --surface 5.77, gegen --akzent-weich (#F3F0FC) 5.55; Text auf Akzent 6.24
           (Hover 8.07); Fokusring (2 px Akzent) gegen --bg 6.24 und --surface 5.77.
   dunkel: Akzent gegen --bg 8.46, gegen --surface 7.73, gegen --akzent-weich (#191825) 7.62; Text auf Akzent 8.46
           (Hover 10.73); Fokusring gegen --bg 8.46 und --surface 7.73. */
.clipdesk-seite {
  --accent: #6D3FD9;
  --accent-hover: #5A2FC0;
  --on-accent: #FFFFFF;
  --akzent-weich: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --akzent-mittel: color-mix(in srgb, var(--accent) 18%, var(--bg));
  --schatten-hoch: 0 2px 4px rgb(17 19 24 / .06), 0 16px 40px rgb(109 63 217 / .14);
  --vorrat-gruen: #067647;
  --vorrat-orange: #B54708;
  --vorrat-rot: var(--danger);
}
@media (prefers-color-scheme: dark) {
  .clipdesk-seite {
    --accent: #B49CFF;
    --accent-hover: #C8B6FF;
    --on-accent: #0B0D12;
    --schatten-hoch: 0 0 0 1px var(--accent);
    --vorrat-gruen: #6CE9A6;
    --vorrat-orange: #FDB022;
  }
}
/* Farbmodus (farbmodus.py): data-theme am <html> übersteuert das Gerät, auch für body.clipdesk-seite (0,2,0 schlägt 0,1,0).
   Werte wortgleich wie oben, geprüft in tests/test_farbmodus.py. */
[data-theme="hell"].clipdesk-seite, [data-theme="hell"] .clipdesk-seite {
  --accent: #6D3FD9;
  --accent-hover: #5A2FC0;
  --on-accent: #FFFFFF;
  --schatten-hoch: 0 2px 4px rgb(17 19 24 / .06), 0 16px 40px rgb(109 63 217 / .14);
  --vorrat-gruen: #067647;
  --vorrat-orange: #B54708;
}
[data-theme="dunkel"].clipdesk-seite, [data-theme="dunkel"] .clipdesk-seite {
  --accent: #B49CFF;
  --accent-hover: #C8B6FF;
  --on-accent: #0B0D12;
  --schatten-hoch: 0 0 0 1px var(--accent);
  --vorrat-gruen: #6CE9A6;
  --vorrat-orange: #FDB022;
}

/* Tab-Leiste: 4 statt 5 Tabs */
.clipdesk-seite .tabs-liste { grid-template-columns: repeat(4, 1fr); }
.clipdesk-seite .tab span { text-wrap: balance; overflow-wrap: anywhere; }

/* Guthabenzahl: Pille in der Kopfzeile (Handy), Kasten im Fuss der Seitenleiste (ab 900 px). Mindestens 44 px hoch. */
.clipdesk-seite .guthaben-kopf,
.clipdesk-seite .guthaben-fuss {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-12);
  border: 1px solid var(--line); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums;
  text-decoration: none; white-space: nowrap; transition: border-color 120ms ease-out;
}
.clipdesk-seite .guthaben-kopf { border-radius: 999px; background: var(--surface); padding: 0 var(--sp-16); }
.clipdesk-seite .guthaben-fuss { border-radius: var(--r-ctl); background: var(--bg); }
.clipdesk-seite .guthaben-kopf:hover,
.clipdesk-seite .guthaben-fuss:hover { border-color: var(--field); }
.clipdesk-seite .guthaben-kopf[aria-current="page"],
.clipdesk-seite .guthaben-fuss[aria-current="page"] { border-color: var(--accent); color: var(--accent); }

/* Rechtliches im Fuss der Seitenleiste: umbrechende Links, nicht in einer Zeile gequetscht */
.clipdesk-seite .rechtslinks { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); padding: 0 var(--sp-12); }
.clipdesk-seite .rechtslinks .link { display: inline-flex; align-items: center; min-height: 32px; }

/* Fokus und Sprungziele nie unter der Tab-Leiste verstecken (WCAG 2.2 SC 2.4.11). app.css rechnet mit einer Leiste von 56 px;
   sobald ein Tab-Text auf zwei Zeilen umbricht (schmal, fr/it), ist die Leiste 68 px hoch:
   12 px Innenabstand + 24 px Symbol + 2 px Abstand + 2 Zeilen x (12 px x 1.2) + 1 px Rand = 67.8 px, gemessen 68 px. */
@media (max-width: 899px) {
  .clipdesk-seite.portal-html { scroll-padding-bottom: calc(68px + env(safe-area-inset-bottom) + var(--sp-8)); }
}

/* Meine Videos (P5.3): Liste als Karten, Statusabzeichen, Detail mit Player und Fortschritt.
   Farben nur aus den Variablen von app.css und oben (--accent, --ok, --danger, --surface, --field, --line);
   das Abzeichen trägt immer Text, die Farbe ist nur zusätzlich. */
.clipdesk-seite .video-liste { margin-top: 0; }
.clipdesk-seite .video-karte { gap: var(--sp-8); padding: var(--sp-16) var(--sp-24); }
.clipdesk-seite .video-karte .chip { align-self: flex-start; }
.clipdesk-seite .video-link { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clipdesk-seite .video-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.clipdesk-seite .video-link:focus-visible { outline: 0; }
.clipdesk-seite .video-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.clipdesk-seite .video-seiten { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-32); }
.clipdesk-seite .video-leer { display: grid; gap: var(--sp-16); justify-items: start; }

.clipdesk-seite .status-chip { font-weight: 600; }
.clipdesk-seite .status-laeuft { border-color: var(--accent); background: var(--akzent-weich); color: var(--text); }
.clipdesk-seite .status-fertig { border-color: transparent; background: var(--ok-weich); color: var(--ok); }
.clipdesk-seite .status-fehler { border-color: transparent; background: color-mix(in srgb, var(--danger) 10%, var(--bg)); color: var(--danger); }
.clipdesk-seite .status-wartet { background: transparent; color: var(--text); }
/* «Nicht mehr gespeichert» (fertig, Datei weg): neutral, kein Erfolgsgrün. Text gegen --surface gemessen (WCAG 2.2 SC 1.4.3, Skript p5/kontrast.py): hell 17.18, dunkel 15.30. */
.clipdesk-seite .status-weg { border-color: var(--line); background: var(--surface); color: var(--text); }

.clipdesk-seite .zurueck-link { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 44px; }
.clipdesk-seite .zurueck-link .icon { width: 18px; height: 18px; }
.clipdesk-seite .video-titel { overflow-wrap: anywhere; }
.clipdesk-seite .video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }
.clipdesk-seite .video-abschnitt { margin-top: var(--sp-32); }
.clipdesk-seite .video-abschnitt > .h3 { margin-bottom: var(--sp-16); }
.clipdesk-seite .video-meldung { margin-bottom: var(--sp-24); }
.clipdesk-seite .video-meldung p + p { margin-top: var(--sp-8); }
.clipdesk-seite .neu-ohne-preis p + p { margin-top: var(--sp-8); }
.clipdesk-seite .video-abschnitt.hinweis p + p { margin-top: var(--sp-8); }
.clipdesk-seite .video-idee { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 680px; }

/* Player: Hochformat 9:16, nie breiter als die Spalte und höchstens 60 % der Bildschirmhöhe, damit «Herunterladen» darunter sichtbar bleibt */
.clipdesk-seite .video-player { display: block; height: min(60vh, 640px); height: min(60dvh, 640px); max-width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-card); background: #000; object-fit: contain; }
.clipdesk-seite .video-aktionen { margin-top: var(--sp-16); }
.clipdesk-seite .video-aktionen .icon { width: 18px; height: 18px; }

/* Fortschritt: <progress> mit Rand (Kontrast der Leiste gegen den Grund mindestens 3:1, WCAG 2.2 SC 1.4.11) */
.clipdesk-seite .video-stand { display: grid; gap: var(--sp-12); max-width: 680px; }
.clipdesk-seite .video-schritt { font-weight: 600; }
.clipdesk-seite .video-fortschritt { display: flex; align-items: center; gap: var(--sp-12); }
.clipdesk-seite .video-prozent { min-width: 4ch; font-variant-numeric: tabular-nums; }
.clipdesk-seite .video-balken { -webkit-appearance: none; appearance: none; display: block; flex: 1 1 auto; width: 100%; height: 12px; border: 1px solid var(--field); border-radius: 999px; background: var(--surface); color: var(--accent); overflow: hidden; }
.clipdesk-seite .video-balken::-webkit-progress-bar { background: var(--surface); }
.clipdesk-seite .video-balken::-webkit-progress-value { background: var(--accent); }
.clipdesk-seite .video-balken::-moz-progress-bar { background: var(--accent); }
.clipdesk-seite .video-balken:not([value]) { background: var(--akzent-mittel); animation: puls 1.2s ease-in-out infinite; }
.clipdesk-seite .video-balken:not([value])::-webkit-progress-bar { background: var(--akzent-mittel); }

.clipdesk-seite .video-aktualisieren { margin-top: var(--sp-12); }
.clipdesk-seite .video-aktualisieren .link { display: inline-flex; align-items: center; min-height: 44px; }

/* Aktionen (P5.3b): «Fortsetzen», «Neu machen» (Rückfrage als <details>, ohne Skript) und «Jetzt starten».
   Knopf und Preis in einer Zeile (bricht bei schmaler Breite um), Hinweis darunter. Alle Knöpfe, die summary und Links mindestens 44 px hoch
   (.btn: min-height 44 px aus app.css; Links hier ausdrücklich). Fokus: der allgemeine :focus-visible-Ring (2 px Akzent) aus app.css gilt auch für summary. */
.clipdesk-seite .aktionen { display: grid; gap: var(--sp-24); }
.clipdesk-seite .aktion-block { display: grid; gap: var(--sp-12); justify-items: start; }
.clipdesk-seite .aktion-block > .small { max-width: 680px; }
.clipdesk-seite .neu-form,
.clipdesk-seite .fortsetzen-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.clipdesk-seite .neu-rueckfrage > summary { list-style: none; cursor: pointer; }
.clipdesk-seite .neu-rueckfrage > summary::-webkit-details-marker { display: none; }
.clipdesk-seite .neu-rueckfrage > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clipdesk-seite .neu-rueckfrage[open] > summary { border-color: var(--text); }
.clipdesk-seite .neu-rueckfrage-inhalt { display: grid; gap: var(--sp-12); max-width: 680px; margin-top: var(--sp-12); padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.clipdesk-seite .neu-rueckfrage-inhalt .neu-form { margin-top: var(--sp-4); }
.clipdesk-seite .aktion-hinweis p + p { margin-top: var(--sp-8); }
.clipdesk-seite .aktion-hinweis .link,
.clipdesk-seite .aktion-bedingungen .link { display: inline-flex; align-items: center; min-height: 44px; }

/* Fussnoten (DESIGN.md «Weniger ist mehr»): rechtlich nötiger Volltext klein und gedämpft ganz unten, durch eine Linie abgesetzt.
   Nur Tokens: --sp-*, --line; Schrift und Farbe kommen von den Klassen small und muted. */
.clipdesk-seite .fussnoten { display: grid; gap: var(--sp-8); max-width: 680px; margin-top: var(--sp-48); padding-top: var(--sp-16); border-top: 1px solid var(--line); }
.clipdesk-seite .web-aktion + .web-aktion { border-top: 1px solid var(--line); padding-top: var(--sp-24); }

/* Video erstellen (P5.1 Start, P5.4 Schritte 1 bis 4): Bereichskacheln, Ideen-Chips, Pillen, Vorschläge, Stilkarten, Stimmen.
   Alles funktioniert ohne Skript (Links, Radios in fieldset). Farben und Abstände nur aus den Variablen (--accent, --akzent-weich, --surface,
   --line, --field, --muted, --sp-*, --r-*). Alle Ziele mindestens 44 px, Felder 48 px (.input). Auswahl nie nur über die Farbe: ein Häkchen
   steht zusätzlich an der gewählten Kachel und Pille (Karten der Schritte: Radio und Rahmen). */
.clipdesk-seite .start-seite > * + * { margin-top: var(--sp-32); }
.clipdesk-seite .start-meldung p + p { margin-top: var(--sp-8); }
/* Karte «Du hast ein Video angefangen»: so breit wie das Raster der Bereiche, Abstand nach unten wie zwischen allen Blöcken, rotes X oben
   rechts (44 px Ziel). */
.clipdesk-seite .weitermachen { position: relative; display: grid; gap: var(--sp-8); justify-items: start; padding-right: 56px; margin-bottom: var(--sp-32); background: var(--akzent-weich); border-color: var(--akzent-mittel); }
.clipdesk-seite .weitermachen-weg { position: absolute; top: var(--sp-4); right: var(--sp-4); margin: 0; }
.clipdesk-seite .weg-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--danger); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.clipdesk-seite .weg-knopf:hover { background: var(--surface); }
.clipdesk-seite .weg-knopf:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.clipdesk-seite .weitermachen-idee { overflow-wrap: anywhere; white-space: pre-wrap; }

/* Bereichskacheln: zwei Spalten auf dem Handy, drei ab 640 px (6 Kacheln, zwei volle Reihen). «bald» ist ein Link ohne href: nicht fokussierbar. */
.clipdesk-seite .bereiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); }
.clipdesk-seite .bereich-kachel { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); height: 100%; min-height: 64px; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); font-weight: 600; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; transition: border-color 120ms ease-out; }
.clipdesk-seite a.bereich-kachel[href]:hover { border-color: var(--field); }
.clipdesk-seite .bereich-kachel[aria-current="true"] { border-color: var(--accent); background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--accent); }
.clipdesk-seite .bereich-haken { flex: none; color: var(--accent); font-weight: 700; }
.clipdesk-seite .bereich-bald { border-style: dashed; background: transparent; color: var(--muted); font-weight: 500; cursor: default; }
.clipdesk-seite .bereich-bald .chip { flex: none; }
@media (min-width: 640px) {
  .clipdesk-seite .bereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ideen-Chips: Links, die das Textfeld vorfüllen. Mehrzeilig erlaubt, Ziel mindestens 44 px. */
.clipdesk-seite .ideen-block > .h4 { font-size: 14px; font-weight: 500; margin-bottom: var(--sp-8); }
.clipdesk-seite .ideen-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.clipdesk-seite .idee-chip { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; padding: var(--sp-8) var(--sp-16); border: 1px solid var(--field); border-radius: var(--r-ctl); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; transition: border-color 120ms ease-out; }
.clipdesk-seite .idee-chip:hover { border-color: var(--text); }
.clipdesk-seite .idee-chip[aria-current="true"] { border-color: var(--accent); background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--accent); }

/* Formular der Startseite */
.clipdesk-seite .start-formular { max-width: 680px; gap: var(--sp-24); }
.clipdesk-seite .idee-feld { resize: vertical; min-height: 112px; }
.clipdesk-seite .pillen-gruppen { display: grid; gap: var(--sp-24); }
.clipdesk-seite .pillen-gruppe { min-width: 0; margin: 0; padding: 0; border: 0; }
.clipdesk-seite .pillen-gruppe > legend { padding: 0; margin-bottom: var(--sp-8); font-weight: 500; }
.clipdesk-seite .pillen { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
/* Pille (wahl-pille, nicht «pille»: app.css hat schon .pille mit Innenabstand): das Radio liegt unsichtbar über der ganzen Pille (Tippfläche = Pille, Pfeiltasten wechseln die Auswahl); Fokusring und Auswahl an der Pille. */
.clipdesk-seite .wahl-pille { position: relative; display: inline-flex; max-width: 100%; }
.clipdesk-seite .wahl-pille-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.clipdesk-seite .wahl-pille > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-16); border: 1px solid var(--field); border-radius: 999px; background: var(--bg); color: var(--text); font-weight: 500; line-height: 1.3; transition: border-color 120ms ease-out; }
.clipdesk-seite .wahl-pille:hover > span { border-color: var(--text); }
.clipdesk-seite .wahl-pille-eingabe:checked + span { border-color: var(--accent); background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--accent); }
.clipdesk-seite .wahl-haken { display: none; margin-right: var(--sp-8); color: var(--accent); font-weight: 700; }
.clipdesk-seite .wahl-pille-eingabe:checked + span > .wahl-haken { display: inline; }
.clipdesk-seite .wahl-pille-eingabe:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hauptknopf mit Verbrauchs-Chip, Hinweis darunter; Rechtslinks unten (auf dem Handy gibt es keine Seitenleiste) */
.clipdesk-seite .los-bereich { display: grid; gap: var(--sp-12); justify-items: start; }
.clipdesk-seite .los-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-16); }
.clipdesk-seite .los-bereich .hinweis { max-width: 680px; }
.clipdesk-seite .fuss-links { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); }
.clipdesk-seite .fuss-links .link { display: inline-flex; align-items: center; min-height: 44px; }

/* Schritte 1 bis 4 (P5.4): Kopf (.schritt-kopf und .schritt-nr gibt es schon in app.css für den Portal-Assistenten; hier .schritt-zaehler und Raster statt Flex), Vorschläge, Stilkarten, Stimmen, Knöpfe. Der Hauptknopf («Weiter» bzw. «Video erstellen») steht im DOM zuerst,
   «Zurück» danach (die gehaltene Enter-Taste löst den ersten Absendeknopf aus). */
.clipdesk-seite .schritt-kopf { display: grid; gap: var(--sp-8); justify-content: start; justify-items: start; align-items: start; margin-bottom: var(--sp-24); }
.clipdesk-seite .schritt-kopf .schritt-zaehler { font-size: 14px; font-weight: 500; color: var(--muted); }
.clipdesk-seite .vorschlag-liste { display: grid; gap: var(--sp-12); max-width: 680px; margin: 0; padding: 0; border: 0; min-width: 0; }
.clipdesk-seite .vorschlag-liste > legend { padding: 0; margin-bottom: var(--sp-8); font-weight: 600; }
.clipdesk-seite .vorschlag,
.clipdesk-seite .stimme { display: flex; align-items: flex-start; gap: var(--sp-12); min-height: 44px; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); cursor: pointer; overflow-wrap: anywhere; transition: border-color 120ms ease-out; }
.clipdesk-seite .vorschlag:hover,
.clipdesk-seite .stimme:hover,
.clipdesk-seite .stil-karte:hover { border-color: var(--field); }
.clipdesk-seite .vorschlag input[type="radio"],
.clipdesk-seite .stimme input[type="radio"],
.clipdesk-seite .stil-karte input[type="radio"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.clipdesk-seite .stimme .vorschlag-text { flex: 1 1 auto; min-width: 0; }
.clipdesk-seite .stimme .hoerprobe { display: block; width: 100%; max-width: 320px; height: 40px; margin-top: var(--sp-8); }
.clipdesk-seite .vorschlag:has(input:checked),
.clipdesk-seite .stimme:has(input:checked),
.clipdesk-seite .stil-karte:has(input:checked) { border-color: var(--accent); background: var(--akzent-weich); box-shadow: inset 0 0 0 1px var(--accent); }
.clipdesk-seite .vorschlag:has(input:focus-visible),
.clipdesk-seite .stimme:has(input:focus-visible),
.clipdesk-seite .stil-karte:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.clipdesk-seite .vorschlag-empfohlen .chip { color: var(--accent); border-color: var(--accent); background: transparent; }
.clipdesk-seite .vorschlag-text { display: grid; gap: var(--sp-4); min-width: 0; white-space: pre-wrap; }
.clipdesk-seite .stil-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); max-width: 680px; margin: 0; padding: 0; border: 0; min-width: 0; }
.clipdesk-seite .stil-karte { display: grid; gap: var(--sp-8); justify-items: center; align-content: start; padding: var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--text); text-align: center; cursor: pointer; transition: border-color 120ms ease-out; }
.clipdesk-seite .stil-karte img { display: block; height: 200px; width: auto; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-ctl); background: var(--bg); }
.clipdesk-seite .stil-name { display: flex; align-items: center; gap: var(--sp-8); font-weight: 600; }
.clipdesk-seite .stimmen { display: grid; gap: var(--sp-12); max-width: 680px; margin: 0; padding: 0; border: 0; min-width: 0; }
.clipdesk-seite .schritt-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); margin-top: var(--sp-32); }
@media (min-width: 640px) {
  .clipdesk-seite .stil-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clipdesk-seite .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

/* Schritte 1 bis 4, Ergänzungen (P5.4-T2): Hülle der Seiten, Option «Eigener Text», Prüfen-Seite, «Alle Stimmen». Nur Tokens (--sp-*, --line, --surface, --muted). */
.clipdesk-seite .erstellen-seite > * + * { margin-top: var(--sp-32); }
.clipdesk-seite .erstellen-seite .formular { max-width: 680px; }
.clipdesk-seite .geschichte-titel { overflow-wrap: anywhere; margin-top: var(--sp-4); }
.clipdesk-seite .vorschlag-eigen { cursor: default; }
.clipdesk-seite .vorschlag-eigen > div { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-8); }
.clipdesk-seite .vorschlag-eigen > div > label { cursor: pointer; font-weight: 500; }
.clipdesk-seite .stimmen-gruppe { display: grid; gap: var(--sp-12); min-width: 0; margin: 0; padding: 0; border: 0; }
.clipdesk-seite .stimmen-gruppe > legend { padding: 0; margin-bottom: var(--sp-8); font-weight: 500; }
.clipdesk-seite .stimmen-alle > summary { display: inline-flex; list-style: none; cursor: pointer; }
.clipdesk-seite .stimmen-alle > summary::-webkit-details-marker { display: none; }
.clipdesk-seite .stimmen-alle[open] > summary { border-color: var(--text); }
.clipdesk-seite .stimmen-alle > .stimmen { margin-top: var(--sp-12); }
.clipdesk-seite .pruef-block { display: grid; gap: var(--sp-12); max-width: 680px; }
.clipdesk-seite .pruef-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-8) var(--sp-16); }
.clipdesk-seite .pruef-kopf .link { display: inline-flex; align-items: center; min-height: 44px; }
.clipdesk-seite .pruef-titel { font-weight: 600; overflow-wrap: anywhere; }
.clipdesk-seite .pruef-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0; }
.clipdesk-seite .pruef-liste dt { color: var(--muted); font-size: 14px; font-weight: 500; }
.clipdesk-seite .pruef-liste dd { margin: 0 0 var(--sp-8); white-space: pre-wrap; overflow-wrap: anywhere; }

/* P5.8 Mediathek: Vorschaubilder im Raster, Löschen darunter. */
.clipdesk-seite .mediathek-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--sp-12); }
.clipdesk-seite .mediathek-eintrag { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.clipdesk-seite .mediathek-eintrag img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-ctl); background: var(--surface); }

/* Inhaltsvorrat-Regler (KMU, 07.11.2026): Balken grün über 14 Tage, orange 5 bis 14, rot unter 5. Die Zahl steht immer als Text daneben
   (Farbe nie allein). Eigene Stufenfarben oben bei den Farbwerten (AA gegen --bg; grün = --ok des Portals, rot = --danger). */
.clipdesk-seite .vorrat { display: grid; gap: var(--sp-8); max-width: 680px; }
.clipdesk-seite .vorrat-text { font-weight: 600; }
.clipdesk-seite .vorrat-balken { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.clipdesk-seite .vorrat-fuellung { display: block; height: 100%; border-radius: inherit; background: var(--vorrat-gruen); }
.clipdesk-seite .vorrat-orange .vorrat-fuellung { background: var(--vorrat-orange); }
.clipdesk-seite .vorrat-rot .vorrat-fuellung { background: var(--vorrat-rot); }
.clipdesk-seite .vorrat-orange .vorrat-text { color: var(--vorrat-orange); }
.clipdesk-seite .vorrat-rot .vorrat-text { color: var(--vorrat-rot); }
.clipdesk-seite .vorrat-w-1 { width: 10%; } .clipdesk-seite .vorrat-w-2 { width: 20%; } .clipdesk-seite .vorrat-w-3 { width: 30%; }
.clipdesk-seite .vorrat-w-4 { width: 40%; } .clipdesk-seite .vorrat-w-5 { width: 50%; } .clipdesk-seite .vorrat-w-6 { width: 60%; }
.clipdesk-seite .vorrat-w-7 { width: 70%; } .clipdesk-seite .vorrat-w-8 { width: 80%; } .clipdesk-seite .vorrat-w-9 { width: 90%; }
.clipdesk-seite .vorrat-w-10 { width: 100%; }
.clipdesk-seite .vorrat-links { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); }
.clipdesk-seite .vorrat-links .link { display: inline-flex; align-items: center; min-height: 44px; }
.clipdesk-seite header + .vorrat { margin-bottom: var(--sp-24); }

/* Videos pro Woche (Schieberegler 1 bis 7): Tippfläche 44 px, Akzentfarbe, Text und Preis darunter (clipdesk.js tauscht sie). */
.clipdesk-seite .videos-wahl { max-width: 480px; }
.clipdesk-seite .videos-regler { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.clipdesk-seite .videos-regler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clipdesk-seite .videos-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }

/* Serien-Kalender (Nutzertest 07.11.2026): Titel, Art, Stand und «Ändern»; auf dem Handy bricht der Stand unter den Titel. */
.clipdesk-seite .kalender-eintrag { flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); padding-block: var(--sp-12); }
.clipdesk-seite .kalender-titel { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.clipdesk-seite .kalender-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-12); }

/* 0075: Meldung «Video fertig» per Mail oder Push (Schritt 4), zwei Kästchen nebeneinander, auf dem Handy umbrechend. */
.clipdesk-seite .melden-zeile { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.clipdesk-seite .melden-zeile .kaestchen { flex: 0 1 auto; }
.clipdesk-seite .melden-zeile .kaestchen[hidden] { display: none; }