:root {
  --grund: #f4f6f3; --flaeche: #ffffff; --text: #1d241f; --leise: #5c665f; --linie: #d9ded8;
  --gruen: #2f7a4f; --gruen-hell: #e3f1e8; --frage: #eef3fb; --gelb: #f3e7b8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #141814; --flaeche: #1d231e; --text: #e8ece8; --leise: #a3aca5; --linie: #333b35;
          --gruen: #5fbf86; --gruen-hell: #20382a; --frage: #1c2533; --gelb: #4a4222; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text);
       font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.rahmen { max-width: 1040px; margin: 0 auto; padding: 14px 16px 24px; }
.kopf { display: grid; gap: 6px; margin-bottom: 12px; }
.marke { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); font-weight: 700; }
h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.klein { font-size: 14px; color: var(--leise); margin: 0; }
.balken { height: 6px; background: var(--linie); border-radius: 3px; overflow: hidden; }
#balken-fuellung { height: 100%; width: 0; background: var(--gruen); transition: width .3s; }
.spalten { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.chat { display: grid; gap: 10px; min-width: 0; }
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verlauf li { max-width: 88%; padding: 10px 14px; border-radius: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.verlauf .bot { background: var(--flaeche); border: 1px solid var(--linie); border-bottom-left-radius: 4px; justify-self: start; }
.verlauf .bot.frage { background: var(--frage); font-weight: 600; display: grid; gap: 4px; }
.verlauf .beispiel { font-weight: 400; color: var(--leise); font-size: 15px; }
.verlauf .bot.ende { background: var(--gruen-hell); }
.verlauf .kunde { background: var(--gruen); color: #fff; border-bottom-right-radius: 4px; justify-self: end; }
.verlauf .tippt { color: var(--leise); font-style: italic; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.knoepfe.liste { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.knoepfe button { text-align: left; }
.knoepfe small { display: block; font-weight: 400; color: var(--leise); font-size: 13px; }
.knoepfe button[aria-pressed="true"] { background: var(--gruen-hell); border-color: var(--gruen); }
/* Stand 70: Die neueste Nachricht rutscht nicht unter das Eingabefeld (es klebt unten) – auch wenn sie von selbst kommt */
.verlauf li { scroll-margin-bottom: 12rem; }
.eingabe { display: grid; gap: 8px; position: sticky; bottom: 0; background: var(--grund); padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
.eingabe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
textarea, input[type=text], select { width: 100%; font: inherit; color: inherit; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; padding: 10px; }
button { font: inherit; font-weight: 600; border-radius: 10px; padding: 10px 16px; border: 1px solid var(--linie);
         background: var(--flaeche); color: var(--text); cursor: pointer; min-height: 44px; }
button.haupt { background: var(--gruen); border-color: var(--gruen); color: #fff; }
button.leise-knopf { background: transparent; }
button:disabled { opacity: .5; cursor: wait; }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.notiert { position: sticky; top: 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; }
.notiert summary { font-weight: 700; cursor: pointer; }
.notiert ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; max-height: 70vh; overflow-y: auto; }
.notiert li { display: grid; gap: 4px; border-top: 1px solid var(--linie); padding-top: 8px; }
.notiert .f { font-size: 13px; color: var(--leise); }
.notiert .w { overflow-wrap: anywhere; }
.notiert button { min-height: 32px; padding: 4px 10px; font-size: 14px; justify-self: start; }
.meldung { position: fixed; left: 16px; right: 16px; bottom: 90px; max-width: 600px; margin: 0 auto; background: var(--text);
           color: var(--grund); padding: 10px 14px; border-radius: 10px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) {
  .spalten { grid-template-columns: 1fr; }
  .notiert { position: static; order: -1; }
  .verlauf li { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) { #balken-fuellung { transition: none; } }

/* Stand 50: nach dem letzten Wort zurück zur Kanalstrategie der Agentur */
.rueckweg { margin: 12px 0; padding: 14px 16px; border: 2px solid var(--gruen); display: grid; gap: 10px; }
.rueckweg p { margin: 0; font-weight: 600; }
.rueckweg a.haupt { display: inline-block; justify-self: start; padding: 10px 16px; background: var(--gruen); color: #fff; text-decoration: none; font-weight: 700; }

/* Stand 57: Am Ende eines Teils wartet das Gespräch, bis der Betreuer den nächsten Teil startet */
.verlauf .bot.pause { background: var(--gelb); }
.wartehinweis { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--gelb); font-weight: 600; }

/* Stand 58: Weg zurück, Sprechen, Nachreichen, „Gehört das noch zu …?“ */
.zurueck-link { justify-self: start; font-size: 15px; font-weight: 600; color: var(--gruen); text-decoration: none; padding: 4px 0; }
.zurueck-link:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.sprech-knopf.laeuft { background: #b3261e; border-color: #b3261e; color: #fff; }
.sprech-stand { margin: 0; }
.verlauf .kunde.nachtrag::before { content: "Nachtrag · "; font-size: 13px; opacity: .85; }
.verlauf .bot.nachtrag { background: var(--gruen-hell); }
.verlauf .bot.zuordnen { background: var(--frage); font-weight: 600; }
.notiert .knopfreihe { display: flex; gap: 6px; flex-wrap: wrap; }
.notiert .nachreichen textarea { min-height: 64px; }
@media (max-width: 760px) {             /* am Handy nur das Mikrofon – so passt alles in eine Zeile */
  .eingabe .sprech-knopf .sprech-wort { display: none; }
  .eingabe .sprech-knopf.laeuft .sprech-wort { display: inline; }
}