/* ============================================================
   BAUKASTEN — Design an EINER Stelle (Runde 5b Task 4a, 02.09.2026).
   Herkunft: docs/entwuerfe/2026-09-02-betreuerraum-entwurf.html, von
   Benjamin freigegeben ("hat er gut gemacht, wird so übernommen"). Wer
   Farbe, Schrift, Abstand oder Rundung ändert, ändert NUR diesen Block.
   Keine externe Schriftladung (EU-Regel) — Systemrückfall wie im Entwurf.
   ============================================================ */
:root {
  --schrift-anzeige: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift-bedienung: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --hintergrund: #F3F0E8;
  --karte: #FAF8F1;
  --text: #242424;
  --text-titel: #111111;
  --text-leise: #7E7466;
  --rand: #DCDAD2;

  /* Grün bleibt IMMER Markenfarbe der Oberfläche (Vorgabe Betreiber) und
     wird nie vom Kunden-Markenprofil überschrieben. Zitronengelb ist das
     Handlungssignal — die eine Hauptknopffarbe je Karte. */
  --marke: #178F26;
  --marke-dunkel: #0D701B;
  --marke-text: #FFFFFF;
  --primaer: #FFF34F;
  --primaer-text: #111111;
  --sekundaer: #178F26;
  --sekundaer-text: #178F26;

  --erfolg: #178F26;
  --erfolg-text: #FFFFFF;
  --gefahr: #E8AAA7;
  --gefahr-text: #6E2A26;
  --hinweis: #FFF34F;
  --hinweis-text: #111111;
  --ausgegraut: #DEDBD1;
  --ausgegraut-text: #8A8574;

  --abstand-xs: 4px;
  --abstand-s: 8px;
  --abstand-m: 16px;
  --abstand-l: 26px;
  --abstand-xl: 44px;

  /* Kantig statt rund, quer durch Karten, Knöpfe, Chips, Etiketten. */
  --rundung-karte: 3px;
  --rundung-knopf: 3px;
  --rundung-chip: 3px;
  --rundung-badge: 3px;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--hintergrund); color: var(--text);
       font-family: var(--schrift-bedienung); min-height: 100vh; }
.kopf { background: var(--marke); color: var(--marke-text); padding: 14px 20px;
        font-weight: 700; letter-spacing: 0.12em; }
.inhalt { max-width: 720px; margin: 0 auto; padding: 24px 16px; }
h1 { font-family: var(--schrift-anzeige); font-weight: 900;
     letter-spacing: -0.02em; font-size: clamp(1.8rem, 4vw, 2.4rem);
     line-height: 1.05; color: var(--text-titel);
     margin-bottom: var(--abstand-m); }
h2 { font-family: var(--schrift-anzeige); font-weight: 700;
     letter-spacing: -0.01em; font-size: 1.3rem; color: var(--text-titel);
     margin: var(--abstand-l) 0 var(--abstand-s); }
.knopf { display: inline-block; background: var(--primaer);
         color: var(--primaer-text); border: none; font-size: 1.1rem;
         font-weight: 700; padding: 16px 28px; border-radius: var(--rundung-knopf);
         cursor: pointer; }
.knopf-gross { width: 100%; padding: 22px; font-size: 1.3rem; }
input, select { font-size: 1.1rem; padding: 12px; width: 100%;
                margin-bottom: 12px; border: 1px solid #bbb; border-radius: 8px; }
/* Verfeinerung für die neu gebauten Betreuerformulare (Baukasten-Werte) —
   überschreibt die generische Regel oben nur für diese Eingabetypen. */
input[type="text"], input[type="date"], input[type="number"], select, textarea {
  border: 1px solid var(--rand); border-radius: 8px; background: #fff;
  color: var(--text); padding: 11px 12px;
}
label.feld-label { display: block; font-size: 0.82rem; font-weight: 700;
  color: var(--text-leise); margin-bottom: 4px; }
.karte { background: var(--karte); border-radius: var(--rundung-karte);
         padding: var(--abstand-m); margin-bottom: var(--abstand-m);
         border: 1px solid var(--rand); }
.karte.karte-klein { padding: var(--abstand-m); }
.hinweis { background: var(--hinweis); color: var(--hinweis-text);
           padding: var(--abstand-m); border-radius: var(--rundung-karte); }
/* Die Statuszeile meldet Dateinamen wie
   1111__2026-08__clip01__t213455__a1b2c3d4.mp4 — ein einziges "Wort" ohne
   Leerzeichen, breiter als jeder Handy-Bildschirm. Ohne Umbruch schiebt es das
   Layout über den Rand. word-break zusätzlich für ältere iOS-Safari, die
   overflow-wrap: anywhere noch nicht kennen. */
#stand { overflow-wrap: anywhere; word-break: break-word; }
/* Zwei Urteile, zwei Farben, kein Nachdenken: Grün heißt weiter,
   Rosé heißt zurück in den Stapel. */
.urteil-ja { background: var(--marke); color: #fff; margin-bottom: 10px; }
.urteil-nein { background: #E8AAA7; color: var(--text); }
.fortschritt { font-weight: 700; margin-bottom: 12px; }
.mikro { display: block; font-size: 0.75rem; font-weight: 700;
         letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.monatswahl { display: inline-block; padding: 8px 14px; margin-right: 8px;
              border: 1px solid #bbb; border-radius: 8px;
              text-decoration: none; color: var(--text); }
.monatswahl.aktiv { background: var(--marke); color: #fff; border-color: var(--marke); }
.kennzahl { font-size: 0.88rem; color: var(--text-leise); margin-top: 8px; }
/* Der Rückweg oben auf beiden Beraterseiten (Fixrunde 1, Controller-Ruling):
   ein Textlink, kein Knopf — sonst kostete er allein 40-66 px vom knappen
   Höhenbudget des Sichtkastens (pruefstand-beraterseite.mjs, POSTEN). */
.rueckweg { display: block; margin-bottom: 12px; font-size: 0.95rem; }
/* ZUGEKLAPPT HEISST WIRKLICH ZUGEKLAPPT. Weiter unten in dieser Datei steht
   `.knopf { display: inline-block; … }` — eine Autorenregel, und die schlägt
   die eingebaute Browserregel `[hidden] { display: none }`. Ohne die nächste
   Zeile stünden „Weiter" und „Zurück" OHNE JavaScript sichtbar da, der große
   grüne „Weiter" ganz oben; und weil er dort weder `name` noch `value` trägt,
   endete ein Druck als 422-JSON im Kundenfenster — genau die Sackgasse, die
   Runde 3 für /kunde/wisch beseitigt hat. Die Zeile deckt in einem Zug auch
   `mikro.hidden` aus sprachnotiz.js ab (verweigertes Mikrofon). Im echten
   Browser gemessen (Pruefbefund 02.09.): ohne diese Zeile meldet der Knopf
   `display: inline-block`, ein `<div hidden>` ohne `.knopf` dagegen `none`. */
[hidden] { display: none !important; }

/* Der Clipstapel: EIN Schirm je Blick. touch-action: none, weil ab Runde 5
   BEIDE Richtungen uns gehören — senkrecht wechselt den Clip, waagrecht
   entscheidet. Ließe man pan-y stehen, scrollte das Handy die Seite und der
   senkrechte Wisch käme nie an. Ohne JavaScript ist hidden nie gesetzt, dann
   stehen alle Schirme untereinander und die Seite bleibt bedienbar. */
.clipstapel { margin-bottom: 14px; }
.clipschirm { background: #fff; border-radius: 12px; padding: 18px;
              margin-bottom: 14px; touch-action: none;
              transition: transform 0.15s ease, opacity 0.15s ease; }
.clipbuehne { position: relative; }
.clipvideo { width: 100%; border-radius: 10px; background: #000;
             aspect-ratio: 9/16; display: block; }
.clipzaehler { position: absolute; top: 8px; right: 10px; color: #fff;
               background: rgba(0,0,0,0.45); border-radius: 999px;
               padding: 2px 10px; font-size: 0.8rem; font-weight: 700; }
.clipsatz { margin: 10px 0 12px 0; }
/* Das Begründungsblatt: Chips zum Antippen, darunter Mikrofon und Textfeld.
   Mehrere Chips gleichzeitig — Benjamin: "man sollte das schon echt
   bewerten können". */
.blattkopf { font-weight: 700; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--abstand-s);
         margin-bottom: var(--abstand-m); }
.chip { display: inline-block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 11px 16px;
             border-radius: var(--rundung-chip); border: 1px solid var(--rand);
             font-size: 1rem; background: #fff; cursor: pointer; }
.chip input:checked + span { background: var(--marke); color: var(--marke-text);
                             border-color: var(--marke); }
.sprachnotiz { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
               margin-bottom: 12px; }
.mikroknopf { padding: 18px 24px; font-size: 1.15rem; }
.mikrostand { font-size: 0.95rem; flex: 1 1 8rem; }
textarea { font-size: 1.1rem; padding: 12px; width: 100%; margin-bottom: 12px;
           border: 1px solid #bbb; border-radius: 8px;
           font-family: inherit; }
/* Die Freigabe-Übersicht: zwei Gruppen, je Clip ein großer Tippbereich. */
.gruppenkopf { font-family: Georgia, serif; font-size: 1.3rem;
               margin: 18px 0 8px 0; }
.uebersichtliste { list-style: none; padding: 0; margin: 0 0 8px 0; }
.uebersichtzeile { border-top: 1px solid #ddd; }
.tauschform { margin: 0; }
.tauschknopf { display: flex; gap: 12px; align-items: center; width: 100%;
               background: none; border: none; padding: 12px 0;
               text-align: left; cursor: pointer; font: inherit;
               color: var(--text); }
.tauschtext { display: flex; flex-direction: column; gap: 2px; }
.gruendezeile { font-size: 0.85rem; font-weight: 700; color: var(--marke); }
.notizzeile { font-size: 0.9rem; font-style: italic; }
.tauschhinweis { font-size: 0.75rem; letter-spacing: 0.1em;
                 text-transform: uppercase; color: #5a5a5a; }
.loeschen { display: inline; }
.knopf.klein { padding: 4px 10px; font-size: 0.8rem; background: #DCDAD2; }
/* Die Ordner-Anleitung: kurze Schritte, keine Wand aus Text. */
.anleitung { margin: 0 0 0 1.2rem; font-size: 0.95rem; }
.anleitung li { margin-bottom: 6px; }
/* Die Sendeliste: eine Zeile je Take — Standbild, Name, Dauer, ein Weg zum
   Verwerfen und darunter, quer über die volle Breite, das Urteil des
   Servers. Die Meldung bekommt eine eigene Zeile, weil sie ganze Sätze
   trägt („Angenommen mit Warnung: 56 s, hochkant, …"). */
.sendeliste { list-style: none; padding: 0; margin: 0 0 14px 0; }
.sendeliste li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                 border-top: 1px solid #ddd; padding: 12px 0; }
.vorschaubild { width: 66px; height: 88px; object-fit: cover; border-radius: 8px;
                background: #000; flex: 0 0 auto; }
.sendezeile { flex: 1 1 6rem; font-size: 0.9rem;
              overflow-wrap: anywhere; word-break: break-word; }
.sendedauer { font-weight: 700; }
.sendemeldung { flex: 1 0 100%; font-size: 0.95rem; }
.sendemeldung.abgelehnt { color: #A5322C; font-weight: 700; }
/* „Diesen Monat angekommen": eine ruhige Liste, bewusst ohne Knopf. Sie
   beantwortet nach einem Neuladen die eine Frage „ist mein Take da?" — und
   sie kommt vom Server, damit sie den Seitenverwurf übersteht. */
.angekommenliste { list-style: none; padding: 0; margin: 0; }
.angekommenliste li { border-top: 1px solid #ddd; padding: 8px 0;
                      font-size: 0.95rem; }
.leise { font-size: 0.9rem; color: var(--text-leise); }
/* Der Einmal-Link im Betreuerraum: rund 70 Zeichen am Stück. Ohne Umbruch
   schiebt er die Karte aus dem Schirm. Markierbar muss er bleiben — er wird
   genau einmal gezeigt und dann kopiert. */
.link-einmalig { margin-top: 8px; font-family: monospace; font-size: 0.95rem;
                 overflow-wrap: anywhere; word-break: break-all;
                 user-select: all; }

/* Die Beraterseite: EIN Clip = EIN Schirm, alles Bedienbare im Blick.
   Daran ist die Wischseite am 02.09. gescheitert — bei 375x812 standen die
   Entscheidungsknöpfe ab 839 px, die Kante liegt bei 812. Deshalb ist die
   Videohöhe gedeckelt statt frei. Fixrunde 1 (Controller-Ruling): dieselbe
   Schraube muss NEBEN dem Urteilszustand auch den Fensterzustand (Video +
   Chips + Textarea + Zurück/Weiter) unter die Kante zwingen — genau der
   Bug, der hier behoben wird (Weiter stand 364 px unter der Kante). 32svh
   ist die Zahl, die BEIDE Zustände im Schlimmstfall noch schaffen —
   pruefstand-beraterseite.mjs rechnet beide nach.
   KEIN touch-action: hier wird gedrückt, nicht gewischt. */
.beraterschirm { background: #fff; border-radius: 12px; padding: 14px;
                 margin-bottom: 12px; display: flex; flex-direction: column;
                 gap: 10px; }
.beraterschirm video { width: 100%; background: #000; border-radius: 10px;
                       max-height: 32vh; max-height: 32svh; }
.blaettern { display: flex; gap: 10px; }
.blaettern .knopf { flex: 1 1 0; text-align: center; }
/* RULING R8: die Reihe "Sichten / Jetzt schneiden / Vorlage" in der
   Kundenliste -- anders als .blaettern muss hier auch ein <form> um einen
   Knopf gleich breit werden wie ein nackter <a>. Die Klassennamen SICHTEN
   und JETZT-SCHNEIDEN tragen (test_schnittlauf.py, test_vorlage.py) bleiben
   .knopfreihe/.knopf-umriss/.knopf-haupt -- Task 4a hat die Knopfformen
   umgestellt, den Reihen-Klassennamen selbst aber unverändert gelassen. */
.knopfreihe { display: flex; gap: var(--abstand-s); flex-wrap: wrap; }
.knopfreihe > * { flex: 1 1 150px; }
.knopfreihe .knopf { width: 100%; text-align: center; }

/* ============================================================
   Entwurfs-Klassen (Task 4a, 02.09.2026) — Knopf-Hierarchie:
   Hauptknopf EINER je Karte (gefüllt), Umriss ist Zweitaktion (Rand statt
   Fläche), Text ist Drittaktion (reiner Link). Erfolg/Gefahr sind die
   Urteilsknöpfe im Sichtraum.
   ============================================================ */
.knopf-haupt, .knopf-umriss, .knopf-erfolg, .knopf-gefahr, .knopf-text {
  letter-spacing: 0.01em;
}
.knopf-haupt {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--primaer); color: var(--primaer-text);
  border: none; font-size: 1.1rem; font-weight: 700;
  padding: 18px 22px; border-radius: var(--rundung-knopf); cursor: pointer;
}
.knopf-haupt:hover { background: var(--marke); color: var(--marke-text); }
.knopf-haupt.gesperrt {
  background: var(--ausgegraut); color: var(--ausgegraut-text); cursor: not-allowed;
}
.knopf-umriss {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: transparent; color: var(--sekundaer-text);
  border: 2px solid var(--sekundaer); font-size: 1rem; font-weight: 700;
  padding: 16px 20px; border-radius: var(--rundung-knopf); cursor: pointer;
}
.knopf-umriss.klein { padding: 9px 14px; font-size: 0.85rem; width: auto;
  display: inline-block; }
/* Der Überschreib-Knopf (RULING R3): Warnfarbe statt Markenfarbe. */
.knopf-umriss.warnung { border-color: var(--gefahr); color: var(--gefahr-text); }
.knopf-text {
  display: inline-block; background: none; border: none; text-decoration: underline;
  color: var(--sekundaer-text); font-size: 0.95rem; font-weight: 600; cursor: pointer;
  padding: 4px 0;
}
.knopf-erfolg {
  display: block; width: 100%; text-align: center;
  background: var(--erfolg); color: var(--erfolg-text); border: none;
  font-size: 1.15rem; font-weight: 700; padding: 20px; border-radius: var(--rundung-knopf);
  cursor: pointer;
}
.knopf-gefahr {
  display: block; width: 100%; text-align: center;
  background: var(--gefahr); color: var(--gefahr-text); border: none;
  font-size: 1.15rem; font-weight: 700; padding: 20px; border-radius: var(--rundung-knopf);
  cursor: pointer;
}
.reihe { display: flex; gap: var(--abstand-s); }
.reihe > * { flex: 1 1 0; }
.reihe-3 { display: flex; gap: var(--abstand-s); flex-wrap: wrap; }
.reihe-3 > * { flex: 1 1 150px; }

/* Kundenliste: Kennung neben dem Namen, aufklappbarer Zugangsbereich. */
.badge {
  display: inline-block; background: var(--hinweis); color: var(--hinweis-text);
  font-weight: 700; padding: 3px 10px; border-radius: var(--rundung-badge);
  font-size: 0.88rem; margin-right: 4px;
}
.standzeile { margin: var(--abstand-xs) 0 var(--abstand-m); font-size: 0.95rem;
              color: var(--text-leise); }
.schluessel { color: var(--text-leise); font-size: 0.9rem; font-family: monospace; }
details.aufklappbar { margin-top: var(--abstand-m); border-top: 1px solid var(--rand);
                       padding-top: var(--abstand-s); }
details.aufklappbar summary {
  cursor: pointer; font-weight: 700; color: var(--sekundaer-text); font-size: 0.95rem;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
details.aufklappbar summary::-webkit-details-marker { display: none; }
details.aufklappbar summary::after { content: "▾"; margin-left: auto; }
details.aufklappbar[open] summary::after { content: "▴"; }
.aufklappbar-inhalt { padding-top: var(--abstand-m); }
.aufklappbar-inhalt .zeile-form { margin-bottom: var(--abstand-m); }
.aufklappbar-inhalt .zeile-form:last-child { margin-bottom: 0; }
.mengen-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-s);
                align-items: flex-end; }
.mengen-reihe > div { flex: 1 1 90px; }

/* Auswahlseite: zwei Spalten, je Clip eine Zeile mit Etikett und Tauschen. */
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
           gap: var(--abstand-m); margin-bottom: var(--abstand-m); }
.spalte h2 { margin-top: 0; }
.zeile { border-top: 1px solid var(--rand); padding: var(--abstand-s) 0; }
.zeile:first-of-type { border-top: none; }
.zeile strong { display: block; }
.etikett { display: inline-block; background: var(--hinweis); color: var(--hinweis-text);
  font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: var(--rundung-badge);
  margin-top: 4px; }
.etikett.gruen { background: var(--erfolg); color: #fff; }
.freitext { display: block; color: var(--text-leise); font-size: 0.85rem;
            font-style: italic; margin-top: 2px; }
.zeile .knopf-umriss.klein { margin-top: var(--abstand-xs); }
.feld-hinweis { font-size: 0.85rem; color: var(--text-leise); text-align: center;
                margin-top: var(--abstand-s); }
.feld-hinweis-klein { font-size: 0.8rem; color: var(--text-leise); margin: -6px 0 12px; }

/* Vorlagenseite: Farbfeld, Länge von/bis. */
.farbfeld-reihe { display: flex; gap: var(--abstand-s); align-items: center; }
.farbfeld-reihe input[type="color"] { width: 54px; height: 44px; padding: 2px;
  margin-bottom: var(--abstand-s); border: 1px solid var(--rand); border-radius: 8px; }
.laenge-reihe { display: flex; gap: var(--abstand-s); }
.laenge-reihe > div { flex: 1 1 0; }

/* ============================================================
   Phase 3 Stufe 1 Task 3: Tagebuch-Chat und Drehplan-Blatt — wörtlich aus
   docs/entwuerfe/2026-09-02-phase3-kundenchat-entwurf.html (Commit 40e50b0,
   von Benjamin freigegeben) übernommen, .chat-verlauf bis .clipidee-stand.
   ============================================================ */
/* ---------- Chat (neu für diesen Entwurf) ----------
   Sprechblasen folgen der Kantig-statt-rund-Regel (--rundung-karte) und
   unterscheiden sich über Fläche und Ausrichtung, nicht über Form. */
.chat-verlauf { display: flex; flex-direction: column; gap: var(--abstand-m); margin-bottom: var(--abstand-l); }
.blase-zeile { display: flex; flex-direction: column; }
.blase-zeile.vom-kunden { align-items: flex-end; }
.blase-zeile.vom-system { align-items: flex-start; }
.blase {
  max-width: 84%; padding: 13px 16px; border-radius: var(--rundung-karte);
  font-size: 1rem; line-height: 1.4;
}
.blase-system { background: var(--karte); border: 1px solid var(--rand); color: var(--text); }
.blase-kunde { background: var(--marke); color: var(--marke-text); }
.blase-marke { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-leise); margin-bottom: 4px; padding-left: 2px; }
.blase-hinweis { font-size: 0.75rem; color: var(--text-leise); margin-top: 4px; padding-right: 2px; }
.blase-hinweis.gesprochen::before { content: "● "; }
/* Der Link zur Studie unter einer Systemblase (08.09.): eine Zeile, Markenfarbe, umbrechend. */
.blase-quelle { color: var(--marke-dunkel); text-decoration: underline; padding-left: 2px; overflow-wrap: anywhere; }
/* Dieselbe Zeile für die Herkunft aus dem Fragebogen — kein Link, nur die Auskunft, woher es kommt. */
.blase-herkunft { display: block; padding-left: 2px; }

/* Drehplan-Chip — erscheint erst, sobald sich eine Clipidee abzeichnet
   (Ergänzung 02.09., korrigiert 02.09.: in derselben Zeile wie das
   Absender-Label, nicht mehr neben der Blase). Nicht in Bildschirm 1: da
   gibt es noch keine Idee. */
.blase-gruppe { max-width: 84%; display: flex; flex-direction: column; }
.blase-gruppe .blase { max-width: 100%; }
.blase-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-s); margin-bottom: 4px; }
.blase-kopf .blase-marke { margin-bottom: 0; }
.chip-drehplan {
  flex: 0 0 auto; padding: 7px 12px; font-size: 0.78rem; font-weight: 700;
  border-radius: var(--rundung-chip); border: 2px solid var(--sekundaer);
  background: transparent; color: var(--sekundaer-text); cursor: pointer; white-space: nowrap;
}

/* Rückweg-Link — Konvention aus Entwurf 1/2 ("Zurück zur Kundenliste"),
   hier für "Zurück zum Chat" auf dem Drehplan-Blatt.
   Prüfbefund Fixrunde 1, Punkt 1: Der Selektor hieß hier zuerst wörtlich
   .rueckweg wie im Entwurf — das kollidierte per Kaskade mit der schon
   bestehenden .rueckweg-Regel oben (stil.css:106, Beraterseiten) und
   veränderte deren Aussehen mit (margin 12->16px, Farbe, fett, keine
   Unterstreichung). Ruling des Controllers: eigener Selektor
   .rueckweg-chat NUR für den Chat/Drehplan-Rückweg; die Deklarationen
   selbst bleiben wörtlich wie im Entwurf, die bestehende .rueckweg-Regel
   und die Beraterseiten bleiben unangetastet. */
.rueckweg-chat { display: block; margin-bottom: var(--abstand-m); font-size: 0.95rem;
  color: var(--sekundaer-text); text-decoration: none; font-weight: 600; }

/* Chat-Bildschirm als feste Spalte: Verlauf füllt den Raum, die
   Eingabeleiste bleibt unten — wie in jeder Chat-App (Korrektur 02.09.,
   Benjamin: kein großer runder Aufnahmeknopf, das Rad nicht neu erfinden). */
.chat-bildschirm { display: flex; flex-direction: column; min-height: 560px; }
.chat-bildschirm > .chat-verlauf { flex: 1 1 auto; }

/* Eingabeleiste: Textfeld über die volle Breite, rechts ein runder
   Mikrofon-/Senden-Knopf — bewusste Ausnahme von "kantig statt rund", weil
   das die eine Stelle ist, an der jede Chat-App rund ist (WhatsApp, Signal,
   Telegram). Tippt man Text, wird aus dem Mikrofon ein Senden-Knopf. */
.eingabeleiste {
  display: flex; align-items: center; gap: var(--abstand-s);
  border-top: 1px solid var(--rand); padding-top: var(--abstand-m);
  margin-top: var(--abstand-m);
}
.eingabeleiste-feld {
  flex: 1 1 auto; margin-bottom: 0; border-radius: 22px;
  padding: 12px 18px; background: #fff; border: 1px solid var(--rand);
  font-size: 1rem; color: var(--text);
}
.eingabeleiste-mikrofon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--marke); color: #fff; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* Aufnahme-Zustand: das Textfeld wird zur Zeile mit rotem Punkt und
   Sekundenzähler, links Abbrechen, rechts Senden — kein Kreis in der Mitte. */
.eingabeleiste-abbrechen {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-leise); font-size: 0.95rem; font-weight: 600;
}
.eingabeleiste-aufnahme {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--text-titel);
}
.punkt-rot { width: 10px; height: 10px; border-radius: 50%; background: var(--gefahr-text); flex: 0 0 auto; }

/* Schnellantworten: kleine Knopfreihe direkt unter einer Systemblase —
   Chat-Konvention (wie Schnellantworten in Chat-Apps) statt einer
   Vollbild-Entscheidung (Korrektur 02.09.). */
.schnellantworten { display: flex; gap: var(--abstand-s); flex-wrap: wrap; margin: 4px 0 var(--abstand-l); }
.schnellantwort {
  padding: 10px 18px; font-size: 0.92rem; font-weight: 700; cursor: pointer;
  border-radius: var(--rundung-knopf); border: 2px solid transparent;
}
.schnellantwort.ja { background: var(--erfolg); color: var(--erfolg-text); border-color: var(--erfolg); }
.schnellantwort.nein { background: var(--gefahr); color: var(--gefahr-text); border-color: var(--gefahr); }
.schnellantwort.neutral { background: transparent; color: var(--sekundaer-text); border-color: var(--sekundaer); }

/* Idee-Karte im Chat ("Das wird ein Video") und Clipidee-Karte beim Filmen —
   dieselbe Struktur wie die echte Vorlage kunde_filmen.html: erstes Bild,
   Frage, Muss-Punkte. */
.idee-karte p { margin-bottom: 8px; }
.idee-karte ul { margin: 0 0 4px 1.2rem; }
.idee-karte li { margin-bottom: 4px; }

/* Filmen-Seite: Navigation über der Clipidee, aus der echten Vorlage
   unverändert übernommen (.mikro, .leise, .sendeliste, .angekommenliste). */
.clipidee-nav { display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-s); margin-bottom: var(--abstand-m); }
.clipidee-stand { font-weight: 700; font-size: 0.95rem; color: var(--text-titel); }

/* Der Chip ist im Entwurf ein <button>; in kunde_tagebuch.html ist es ein
   <a> (Link auf /kunde/drehplan) — ohne diese Zeile stünde er unterstrichen
   und als Blockelement da. Und: die generische [hidden]-Regel oben trägt
   !important und deckt beide Elemente eigentlich schon ab; diese zweite,
   engere Regel steht zusätzlich da, wie vom Brief verlangt. */
a.chip-drehplan { text-decoration: none; display: inline-block; }
.eingabeleiste [hidden], .eingabeleiste-feld[hidden] { display: none; }

/* Phase 3 Stufe 2 — der Fragebogen als Formular (Entwurf 2026-09-05-fragebogen-kunde-entwurf.html).
   Farben und Abstände aus dem Baukasten-Kopf; hier nur die Formen. */
.fb-balken { height: 6px; background: var(--rand); border-radius: 3px; margin: 0 0 var(--abstand-l); overflow: hidden; }
.fb-balken span { display: block; height: 100%; background: var(--marke); }
.fb-balken.voll span { width: 100%; }        /* „Teil geschafft" — voll, ohne style-Attribut in der Vorlage */
.fb-frage { font-size: 1.35rem; line-height: 1.3; }
.fb-teile { list-style: none; margin: var(--abstand-m) 0 var(--abstand-l); }
.fb-teil { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.fb-teil.offen { color: var(--text-leise); }
.fb-zeichen { width: 22px; font-weight: 900; color: var(--marke); flex: none; }
.fb-titel { font-weight: 700; }
.fb-stand { margin-left: auto; font-size: 0.85rem; color: var(--text-leise); white-space: nowrap; }
.fb-fragen { padding: 4px 0 8px 34px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fb-sprung { display: inline; }
.fb-unten { margin-top: var(--abstand-m); display: flex; gap: var(--abstand-m); justify-content: center; }
/* Nur die Schriftart — Knöpfe erben sie nicht von selbst. Alles andere (Größe, Gewicht,
   Polster, Farbe) steht in .knopf-text; `font: inherit` und `padding: 0` haben es
   überschrieben und Schriftgröße wie Tippfläche verkleinert (Korrektur 1). */
button.knopf-text { font-family: inherit; }

/* Phase 3 Stufe 2 — der Fragebogen-Abschnitt im Betreuerraum. Der Kasten heißt
   `fb-dokument` statt `fb-stand`: die Klasse ist oben schon die kleine Zahl in der
   Teileliste des Kunden vergeben. */
.fb-abschnitt { margin-top: var(--abstand-m); }
.badge.fb-gruen { background: var(--marke); color: var(--marke-text); }
/* Gelb ist schon die Grundfarbe von .badge — die Regel benennt den Zustand „angefangen",
   damit er nicht am Fehlen einer Klasse hängt (Korrektur 1). */
.badge.fb-gelb { background: var(--hinweis); color: var(--hinweis-text); }
.fb-dokument { white-space: pre-wrap; font-family: var(--schrift-bedienung); font-size: 0.88rem; line-height: 1.5;
               background: #fff; border: 1px solid var(--rand); padding: 12px; border-radius: var(--rundung-karte); }

/* Gesperrte Knöpfe sehen gesperrt aus (Korrektur 1, Ruling A-3). Der Autorenstil setzt Rand
   und Text in Markenfarbe und überschreibt damit die Ausgrauung des Browsers — der gesperrte
   Umriss-Knopf war vom drückbaren nicht zu unterscheiden. Eine Stelle für beide Knopfarten,
   und sie steht bewusst am Ende: so gewinnt sie gegen .knopf-haupt.gesperrt und .knopf-umriss. */
.knopf-haupt[disabled], .knopf-umriss[disabled] {
  background: var(--ausgegraut); color: var(--ausgegraut-text);
  border-color: var(--ausgegraut); cursor: not-allowed;
}

/* Phase 3 Stufe 2 — die Themenwahl im Betreuerraum. */
.fb-thema { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rand); cursor: pointer; }
.fb-thema input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.fb-thema-titel, .fb-thema-zitat, .fb-thema-idee { display: block; }
.fb-thema-titel { font-weight: 700; }
.fb-thema-zitat { color: var(--text-leise); font-size: 0.9rem; margin-top: 2px; }
.fb-thema-idee { font-size: 0.92rem; margin-top: 6px; }
.fb-thema-aus { opacity: 0.6; cursor: default; }