:root {
  /* Eine Farbe je Aufgabe, nicht je Farbton. `--petrol` trug frueher drei
     Aufgaben zugleich: Grund der Seitenspalte, Fuellung des Hauptknopfes und
     Schriftfarbe auf hellem Grund. Im Dunkeln muessen die drei
     auseinanderlaufen — ein Grund wird dunkler, eine Schrift heller —, darum
     heissen sie jetzt nach ihrer Aufgabe. */
  --papier: #faf7f2;        /* Grund der Seite */
  --flaeche: #ffffff;       /* Karten, Felder, Tabelle, fremde Blase */
  --sand: #f1e9dc;          /* Pillen, Etikett, stiller Schwebezustand */
  --linie: #e4ddd2;
  --text: #1f2a2b;
  --ton: #3c4849;           /* Fliesstext in der Karte */
  --grau: #676f70;           /* war #6b7576: 4,4 gegen das Papier, also knapp unter AA */
  --grau-dunkel: #4f585a;
  --ton-leise: #6b6b6b;     /* Quellenzeile, Wartehinweis */

  --aktion: #234a4e;        /* Verweise, stille Knoepfe, Quellen, Vorschlaege */
  --haupt: #234a4e;         /* gefuellter Knopf, eigene Blase */
  --haupt-hell: #2f5d62;
  --auf-haupt: #ffffff;
  --fokus: #234a4e;

  --seite: #234a4e;         /* Grund der Seitenspalte */
  --seite-hover: #2f5d62;
  --auf-seite: #ffffff;
  --auf-seite-leise: #c7d6d7;
  --auf-seite-stumpf: #a9c0c1;
  --seite-kante: transparent;

  --gold: #c9a35b;
  --auf-gold: #1f4245;       /* war #234a4e: 4,1 auf dem Gold, also knapp unter AA */
  --petrol-blass: #e7efee;  /* Grund des Standes „Erteilt" */

  --rot: #b3261e;           /* rote Schrift */
  --rot-blass: #fdecea;     /* Grund der Systemblase */
  --gefahr: #b3261e;        /* Grund des roten Knopfes */
  --gefahr-hover: #8d1e17;
  --still-rand-hover: #d9cfbe;

  --rund: 12px;
  --spalte: 960px;
  --blatt: 40rem;
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--papier);
}

/* Dunkel. Die Werte stehen zwei Mal, weil der Wunsch aus zwei Quellen kommen
   kann: aus dem Betriebssystem (Medienabfrage) oder aus der Wahl in den
   Einstellungen (data-thema). `light-dark()` haette das in einem Durchgang
   erledigt, braucht aber Safari 17.5; auf einem aelteren iPad im Salon faellt
   damit die ganze Eigenschaft aus, und dann stimmt keine Farbe mehr. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --papier: #111b1b;
    --flaeche: #1a2525;
    --sand: #24312f;
    --linie: #2e3d3c;
    --text: #e8efed;
    --ton: #c4d1cf;
    --grau: #9aa8a7;
    --grau-dunkel: #aebbba;
    --ton-leise: #93a2a0;

    --aktion: #7fcac7;
    --haupt: #2d6a6d;
    --haupt-hell: #3a8183;
    --auf-haupt: #f2faf8;
    --fokus: #7fcac7;

    --seite: #0a1313;
    --seite-hover: #1c2d2c;
    --auf-seite: #dde8e6;
    --auf-seite-leise: #93a7a5;
    --auf-seite-stumpf: #7b908e;
  --seite-kante: #22302f;

    --gold: #d6b069;
    --auf-gold: #13201f;
    --petrol-blass: #1d3836;

    --rot: #ff9c92;
    --rot-blass: #2f201e;
    --gefahr: #a33227;
    --gefahr-hover: #bb4437;
    --still-rand-hover: #3c4b4a;
  }
}

:root[data-thema="dunkel"] {
  color-scheme: dark;
  --papier: #111b1b;
  --flaeche: #1a2525;
  --sand: #24312f;
  --linie: #2e3d3c;
  --text: #e8efed;
  --ton: #c4d1cf;
  --grau: #9aa8a7;
  --grau-dunkel: #aebbba;
  --ton-leise: #93a2a0;

  --aktion: #7fcac7;
  --haupt: #2d6a6d;
  --haupt-hell: #3a8183;
  --auf-haupt: #f2faf8;
  --fokus: #7fcac7;

  --seite: #0a1313;
  --seite-hover: #1c2d2c;
  --auf-seite: #dde8e6;
  --auf-seite-leise: #93a7a5;
  --auf-seite-stumpf: #7b908e;
  --seite-kante: #22302f;

  --gold: #d6b069;
  --auf-gold: #13201f;
  --petrol-blass: #1d3836;

  --rot: #ff9c92;
  --rot-blass: #2f201e;
  --gefahr: #a33227;
  --gefahr-hover: #bb4437;
  --still-rand-hover: #3c4b4a;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
[hidden] { display: none !important; }
/* Drei Knopf-Arten, mehr nicht: gefuellt (Vorgabe, `.haupt` nur fuer den
   Schwebezustand), still (`.still`) fuer die ruhige Handlung, rot (`.gefahr`)
   allein fuer den bestaetigten Widerruf. Der durchsichtige Rahmen an der
   Vorgabe ist Absicht: So ist ein stiller Knopf neben einem gefuellten gleich
   hoch. Eckenmass bleibt ueberall 8 px, Karten 12 px, Pillen 99 px. */
button { font: inherit; cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: .6rem 1rem; background: var(--haupt); color: var(--auf-haupt); transition: background-color .15s ease, border-color .15s ease, transform .08s ease; }
button:disabled { opacity: .5; cursor: default; }
button:active:not(:disabled) { transform: translateY(1px); }
button.haupt:hover:not(:disabled) { background: var(--haupt-hell); }
button.still { background: var(--flaeche); color: var(--aktion); border-color: var(--linie); }
button.still:hover:not(:disabled) { background: var(--sand); border-color: var(--still-rand-hover); }
button.gefahr { background: var(--gefahr); color: #fff; }
button.gefahr:hover:not(:disabled) { background: var(--gefahr-hover); }
input, textarea, select { font: inherit; border: 1px solid var(--linie); border-radius: 8px; padding: .6rem .7rem; background: var(--flaeche); color: var(--text); width: 100%; }
a { color: var(--aktion); }
/* Sichtbarer Tastaturfokus. Petrol auf Papier, Gold auf der dunklen Spalte:
   Beides traegt die 3:1 gegen seinen Untergrund, Gold auf Weiss nicht. */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.seite :focus-visible { outline-color: var(--gold); }

.mitte { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 2rem; width: min(440px, 100%); display: grid; gap: 1rem; }
.karte h1 { margin: 0; font-size: 1.3rem; }
.karte form { display: grid; gap: .6rem; }
.marke { display: flex; gap: .7rem; align-items: center; }
.marke small { display: block; color: var(--grau); }
.marke.hell small { color: var(--auf-seite-leise); }
.zeichen { width: 40px; height: 40px; border-radius: 50%; background: var(--haupt); color: var(--auf-haupt); display: grid; place-items: center; font-weight: 700; }
.marke.hell .zeichen { background: var(--gold); color: var(--auf-gold); }
.hinweis { color: var(--grau); font-size: .9rem; margin: 0; }
.fehler { color: var(--rot); margin: 0; }
.haken { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.55; }
.haken input { width: auto; margin-top: .25rem; }
.haken-titel { display: block; margin-bottom: .2rem; }
.haken-titel .pflicht { font-weight: 400; }
/* Zwei lange Einwilligungstexte brauchen mehr Mass als ein Anmeldefeld. */
#ansicht-einwilligung .karte { width: min(560px, 100%); }

.app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.seite { background: var(--seite); color: var(--auf-seite); border-right: 1px solid var(--seite-kante); padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.seite .neu { background: var(--gold); color: var(--auf-gold); font-weight: 600; margin: .5rem 0; }
.abschnitt { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; color: var(--auf-seite-stumpf); margin-top: .8rem; }
/* min-width: 0 an Liste und Eintrag — sonst greift die Ellipse unten nie.
   Raster- und Flex-Kinder stehen auf min-width: auto, und das ist ihre
   min-content-Breite. Beim Knopf mit white-space: nowrap ist die der ganze
   Titel: Das li wuchs auf 609 px in einer 248 px breiten Liste, schob sich aus
   der 280-px-Spalte heraus und legte sich ueber das Gespraech. Der Knopf war
   damit nie schmaler als sein Text, also kuerzte text-overflow nichts.
   Gemessen am 03.11.2026, mit diesen zwei Zeilen: li 248 px, Text 514 px,
   Ellipse greift, kein Ueberlauf.
   Kein overflow: hidden auf .seite — das wuerde bei vielen Gespraechen die
   Liste unten abschneiden statt sie rollen zu lassen. */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.liste > li { min-width: 0; }
.liste button { width: 100%; text-align: left; background: transparent; padding: .45rem .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste button:hover, .unten button:hover { background: var(--seite-hover); }
/* Der offene Eintrag. Die Regel stand schon hier, nur gesetzt hat die Klasse
   nie jemand — ohne Marke sieht man der Spalte nicht an, wo man gerade ist. */
.liste button.aktiv, .unten button.aktiv { background: var(--seite-hover); box-shadow: inset 3px 0 0 var(--gold); }
.unten { margin-top: auto; display: grid; gap: .4rem; }
.unten button { background: transparent; text-align: left; padding: .45rem .6rem; }
.wer { font-size: .8rem; color: var(--auf-seite-leise); padding: 0 .6rem; word-break: break-all; }

.bereich { display: flex; flex-direction: column; min-height: 100vh; }

/* Das Gespraech steht in einer mittigen Spalte von hoechstens --spalte.
   Ohne sie klebte es am Rand der Seitenspalte und liess auf einem breiten
   Schirm mehrere hundert Pixel leer; die Blase deckelt zwar bei 720 px, aber
   sie sass links statt in der Mitte.

   Als Innenabstand und nicht als max-width + margin: So bleiben Trennlinie
   und Hintergrund von Kopf und Eingabe ueber die volle Breite, waehrend nur
   der Inhalt mittig steht — ein Strich, der auf halber Strecke aufhoert, sieht
   aus wie ein Fehler. Unter --spalte liefert max() den alten Wert, am Telefon
   aendert sich damit nichts. */
.kopf, .verlauf, .eingabe { padding-inline: max(1.5rem, (100% - var(--spalte)) / 2); }

.kopf { padding-block: 1rem; border-bottom: 1px solid var(--linie); display: flex; gap: .8rem; align-items: center; }
.etikett { font-size: .75rem; background: var(--sand); padding: .15rem .5rem; border-radius: 99px; }
.verlauf { flex: 1; overflow-y: auto; padding-block: 1.5rem; display: flex; flex-direction: column; gap: .8rem; }
.blase { max-width: min(720px, 85%); padding: .8rem 1rem; border-radius: var(--rund); white-space: pre-wrap; line-height: 1.45; }
.blase.user { align-self: flex-end; background: var(--haupt); color: var(--auf-haupt); }
.blase.assistant { align-self: flex-start; background: var(--flaeche); border: 1px solid var(--linie); }
.blase .quellen { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--ton-leise); white-space: normal; }
.blase .quellen .quelle { color: var(--aktion); }
.blase.warten { align-self: flex-start; background: transparent; border: 1px dashed var(--linie); color: var(--ton-leise); font-style: italic; animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .blase.warten { animation: none; } }
.blase.system { align-self: center; background: var(--rot-blass); color: var(--rot); }
.vorschlaege { display: flex; gap: .4rem; flex-wrap: wrap; align-self: flex-start; }
.vorschlaege button { background: var(--sand); color: var(--aktion); padding: .35rem .8rem; border-radius: 99px; font-size: .9rem; }
.leer { color: var(--grau); text-align: center; margin: auto; }
.eingabe { display: flex; gap: .6rem; padding-block: 1rem; border-top: 1px solid var(--linie); }
.eingabe textarea { resize: none; }
.fuss { text-align: center; color: var(--grau); font-size: .75rem; margin: 0 0 .8rem; }
.inhalt { padding: 1.75rem 1.5rem 3rem; display: grid; gap: 1.5rem; align-content: start; overflow-x: auto; }
.tabelle { border-collapse: collapse; width: 100%; background: var(--flaeche); font-size: .9rem; }
.tabelle th, .tabelle td { border-bottom: 1px solid var(--linie); padding: .5rem; text-align: left; vertical-align: top; }
.tabelle select { width: auto; padding: .3rem; }
.zuweisung { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.chip { background: var(--sand); border-radius: 99px; padding: .1rem .5rem; font-size: .8rem; display: inline-flex; gap: .3rem; align-items: center; }
.chip button { background: transparent; color: var(--rot); padding: 0 .2rem; }


/* --- Einstellungen ------------------------------------------------------
   Eine Spalte, mittig, hoechstens --blatt breit. Der Einwilligungstext ist
   der laengste Fliesstext der Oberflaeche und ausgerechnet der, den man
   wirklich lesen soll; ueber die volle Fensterbreite stand er bei 250 Zeichen
   je Zeile. 40 rem abzueglich Kartenpolster sind rund 80 Zeichen, und damit
   faellt das Auge am Zeilenende wieder auf den richtigen Anfang.
   Die Tabelle der Verwaltung teilt sich .inhalt und bleibt deshalb aussen
   vor: Sie braucht Breite, kein Mass. */
.blatt { width: min(100%, var(--blatt)); margin-inline: auto; display: grid; gap: 2.25rem; }
.gruppe { display: grid; gap: .9rem; }
.gruppe h2 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
.gruppe > .hinweis { margin-top: -.5rem; }
.karten { display: grid; gap: 1rem; }

.ew-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.3rem 1.4rem; display: grid; gap: .55rem; }
.ew-karte h3 { margin: 0; font-size: 1.02rem; }
.ew-meta { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.pflicht { font-size: .78rem; color: var(--grau-dunkel); }

/* Der Stand steht als Wort da, nicht nur als Punkt: Eine Farbe allein sagt
   niemandem, ob eine Einwilligung erteilt ist. */
.stand { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; }
.stand::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.stand.an { background: var(--petrol-blass); color: var(--aktion); }
.stand.aus { background: var(--sand); color: var(--grau-dunkel); }

.ew-text { margin: .15rem 0 0; font-size: .93rem; line-height: 1.65; color: var(--ton); text-wrap: pretty; }
.ew-text a { overflow-wrap: break-word; }

.ew-fuss { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: center; justify-content: flex-end; border-top: 1px solid var(--linie); padding-top: .95rem; margin-top: .4rem; }
.ew-fuss .warnung { flex: 1 1 13rem; margin: 0; font-size: .85rem; line-height: 1.5; color: var(--rot); }
/* Abbrechen und Widerrufen gehoeren zusammen. Ohne die Klammer bricht in der
   schmalen Karte der eine Knopf um und der andere bleibt oben stehen. */
.ew-tasten { display: flex; gap: .6rem; margin-left: auto; }
/* Eine Beschriftung, die auf zwei Zeilen faellt, sieht aus wie ein Fehler. */
.ew-fuss button, .reihe button { white-space: nowrap; }

.reihe { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.1rem 1.4rem; }
.reihe-text { display: grid; gap: .1rem; min-width: 0; }
.reihe strong { word-break: break-word; }

/* Dreiteilige Wahl. Kein Schatten als Marke fuer das Gewaehlte: Auf dunklem
   Grund waere er unsichtbar. Der Rand traegt in beiden Richtungen. */
.wahl { display: inline-flex; gap: .25rem; background: var(--sand); border-radius: 10px; padding: .25rem; }
.wahl button { background: transparent; color: var(--aktion); border-color: transparent; padding: .45rem .85rem; border-radius: 8px; font-size: .9rem; }
.wahl button:hover:not([aria-pressed="true"]):not(:disabled) { color: var(--text); }
.wahl button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); border-color: var(--linie); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .seite { min-height: auto; }
  .bereich { min-height: 70vh; }
  .inhalt { padding: 1.25rem 1rem 2.5rem; }
  .ew-karte, .reihe { padding: 1.1rem; }
  /* Am Telefon zaehlt die Flaeche unter dem Daumen, nicht die Zeilenhoehe. */
  .liste button, .unten button { padding: .7rem .6rem; }
  /* Am Telefon bekommt jede Zeile die volle Breite; die beiden Knoepfe der
     Rueckfrage teilen sie sich, statt dass einer umbricht. */
  .ew-fuss .warnung, .ew-tasten { flex: 1 1 100%; }
  .ew-tasten { margin-left: 0; }
  .ew-tasten button, .ew-fuss > button, .reihe > button { flex: 1 1 0; padding-block: .75rem; }
  .wahl { flex: 1 1 100%; }
  .wahl button { flex: 1 1 0; padding-block: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active:not(:disabled) { transform: none; }
}