/* Dokufix – Gestaltung nach psido-scribe-web (frontend/assets/basis.css):
   grauer Grund, weiße Karten mit leichtem Schatten, Dunkelgrün als Akzent,
   Pillenknöpfe, Chips, helle Leiste links, Dunkelmodus mit Schalter.
   Variablen und Bausteine sind von dort übernommen (nur, was Dokufix
   braucht). Seitenstile verwenden nur diese Variablen, keine festen Farben.
   Thema: ohne data-theme folgt die Seite dem System; thema.js setzt
   data-theme="hell"/"dunkel", wenn am Gerät ausdrücklich gewählt. */

:root {
  /* Farben hell */
  --hintergrund: #f2f3f2;
  --flaeche: #ffffff;
  --text: #3c3f41;
  --gedaempft: #7a7f83;
  --rand: #e4e6e4;
  --linie: #a6aaad;
  --leise-flaeche: #eceeec;
  --akzent: #00704f;
  --akzent-text: #ffffff;
  --akzent-zart: #e5f3e1;
  --gruen: #52b848;
  --fehler: #c62828;
  --fehler-zart: #fde2e0;
  --warnung: #a8430f;
  --warnung-zart: #fde3d6;
  --info: #01579b;
  --info-zart: #d6eefb;
  --erfolg-zart: #cde8c2;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  --schatten-fenster: 0 8px 30px rgba(0, 0, 0, 0.18);
  --schleier: rgba(60, 63, 65, 0.35);

  /* Maße */
  --schrift: 15px;
  --schrift-klein: 13px;
  --schrift-titel: 22px;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 20px;
  --radius: 14px;
  --radius-klein: 9px;
  --knopf-hoehe: 36px;
  --nav-breite: 236px;

  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--hintergrund);
  color-scheme: light;
}

/* dieselben Werte zweimal: einmal für „System ist dunkel, nichts gewählt“,
   einmal für „am Gerät dunkel gewählt“ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --hintergrund: #161817;
    --flaeche: #202322;
    --text: #e3e6e4;
    --gedaempft: #9aa09c;
    --rand: #323734;
    --linie: #5b625e;
    --leise-flaeche: #2b302d;
    --akzent: #5cc48a;
    --akzent-text: #0e1a14;
    --akzent-zart: #1f3a2b;
    --gruen: #5cc48a;
    --fehler: #f28b82;
    --fehler-zart: #3d2321;
    --warnung: #f4a46f;
    --warnung-zart: #3d2a1d;
    --info: #7cc4f5;
    --info-zart: #1b2f3e;
    --erfolg-zart: #20382a;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schatten-fenster: 0 8px 30px rgba(0, 0, 0, 0.5);
    --schleier: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dunkel"] {
  --hintergrund: #161817;
  --flaeche: #202322;
  --text: #e3e6e4;
  --gedaempft: #9aa09c;
  --rand: #323734;
  --linie: #5b625e;
  --leise-flaeche: #2b302d;
  --akzent: #5cc48a;
  --akzent-text: #0e1a14;
  --akzent-zart: #1f3a2b;
  --gruen: #5cc48a;
  --fehler: #f28b82;
  --fehler-zart: #3d2321;
  --warnung: #f4a46f;
  --warnung-zart: #3d2a1d;
  --info: #7cc4f5;
  --info-zart: #1b2f3e;
  --erfolg-zart: #20382a;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4);
  --schatten-fenster: 0 8px 30px rgba(0, 0, 0, 0.5);
  --schleier: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--abstand-4);
  font-size: var(--schrift);
  line-height: 1.4;
  background: var(--hintergrund);
  -webkit-font-smoothing: antialiased;
}

h1 { margin: 0; font-size: var(--schrift-titel); font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0 0 var(--abstand-3); font-size: 17px; font-weight: 600; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
a { color: var(--akzent); }

/* ---------- Karte ---------- */
.karte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--abstand-4) 18px 18px;
  min-width: 0;
}
.karte.stapel { display: flex; flex-direction: column; gap: var(--abstand-3); }
.karte.stapel > h2, .karte.stapel > p { margin: 0; }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2); }
.karte-kopf > h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Anmeldung, Einrichtung: schmale Karte in der Mitte */
.karte.mittig { max-width: 26rem; margin: 12vh auto 0; padding: 24px; display: flex; flex-direction: column; gap: var(--abstand-4); }
.karte.mittig h1 { margin: 0; }
.karte.mittig > p { margin: 0; }

/* ---------- Formulare ---------- */
form { display: flex; flex-direction: column; gap: var(--abstand-4); margin: 0; }
label { display: flex; flex-direction: column; gap: var(--abstand-1); font-size: 14px; }
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); margin: 0; padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); display: flex; flex-direction: column; gap: var(--abstand-3); }
legend { font-size: 14px; font-weight: 600; padding: 0 var(--abstand-1); }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  font: inherit;
  padding: 7px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--hintergrund);
  color: var(--text);
}
textarea { resize: vertical; min-height: 5rem; }

/* ---------- Knöpfe (Pillen) ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.knoepfe form { display: contents; }

.knopf {
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--abstand-2);
  min-height: var(--knopf-hoehe);
  padding: 0 var(--abstand-4);
  border-radius: 18px;
  border: 1px solid var(--akzent);
  background: var(--akzent);
  color: var(--akzent-text);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.knopf.zweitrangig { background: var(--flaeche); border-color: var(--linie); color: var(--text); }
.knopf.leise { background: var(--leise-flaeche); border-color: transparent; color: var(--text); }
.knopf.gefahr { background: var(--fehler); border-color: var(--fehler); color: var(--akzent-text); }
.knopf.klein { min-height: 28px; padding: 0 var(--abstand-3); font-size: var(--schrift-klein); border-radius: 14px; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  .knopf { transition: transform 0.12s, background 0.2s; }
  .knopf:active:not(:disabled) { transform: scale(0.96); }
}

/* ---------- Texte ---------- */
.hinweis { color: var(--gedaempft); }
.fehler { color: var(--fehler); }
.klein { font-size: var(--schrift-klein); font-weight: normal; }
code { font-size: 0.92em; padding: 0 0.3em; border-radius: 5px; background: var(--leise-flaeche); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 var(--abstand-3);
  border-radius: 14px;
  background: var(--leise-flaeche);
  font-size: var(--schrift-klein);
  white-space: nowrap;
}
.chip.gruen { background: var(--erfolg-zart); color: var(--akzent); }
.chip.rot { background: var(--fehler-zart); color: var(--fehler); }
.chip.orange { background: var(--warnung-zart); color: var(--warnung); }
.chip.blau { background: var(--info-zart); color: var(--info); }

/* ---------- Meldungsband (dauerhafte Hinweise, Formularfehler) ---------- */
.band { margin: 0; padding: 10px 14px; border-radius: var(--radius-klein); background: var(--info-zart); color: var(--text); }
.band a { color: inherit; }
.band.warnung { background: var(--warnung-zart); }
.band.fehler { background: var(--fehler-zart); color: var(--text); }
.band.erfolg { background: var(--erfolg-zart); }

/* ---------- Meldesymbol rechts in der Titelleiste ----------
   Ergebnis einer Aktion: ✓ ok, ! Fehler. Text bei Mouseover, am Tablet beim
   Antippen (Fokus); bei einem Fehler von sich aus offen. */
.meldesymbol { position: relative; display: inline-flex; align-self: center; }
.meldesymbol button { appearance: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--info); color: var(--flaeche); font: inherit; font-weight: 700; cursor: pointer; }
.meldesymbol.erfolg button { background: var(--akzent); }
.meldesymbol.fehler button { background: var(--fehler); }
.meldesymbol.warnung button { background: var(--warnung); }
.meldesymbol.laeuft button { background: none; font-weight: normal; }
.meldesymbol.laeuft .dreht { animation: meldesymbol-dreht 2s linear infinite; }
@keyframes meldesymbol-dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .meldesymbol.laeuft .dreht { animation: none; } }
/* Pille, solange ein Lauf arbeitet: was läuft */
.meldesymbol.pille button { width: auto; max-width: min(360px, 60vw); height: 28px; gap: 6px; padding: 0 12px 0 8px; border-radius: 14px; background: var(--leise-flaeche); color: var(--text); font-size: 13px; }
.meldesymbol.pille .pillen-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.meldeplatz { display: inline-flex; align-self: center; min-height: 28px; }
.meldesymbol .blase { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: max-content; max-width: min(380px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--text); font-weight: normal; text-align: left; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; }
.meldesymbol .blase::before { content: ""; position: absolute; top: -7px; left: 0; right: 0; height: 7px; }
.meldesymbol.offen .blase, .meldesymbol button:focus + .blase { opacity: 1; pointer-events: auto; }
@media (hover: hover) { .meldesymbol:hover .blase { opacity: 1; pointer-events: auto; } }
@media (max-width: 640px) { .meldesymbol .blase { position: fixed; top: auto; left: 16px; right: 16px; width: auto; max-width: none; } }

/* ---------- Reiter (Segmente) ---------- */
.reiter { display: flex; gap: var(--abstand-1); width: fit-content; max-width: 100%; overflow-x: auto; padding: 3px; border-radius: 11px; background: var(--leise-flaeche); }
.reiter button { appearance: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; padding: 6px 16px; border-radius: var(--radius-klein); background: none; color: var(--text); cursor: pointer; }
.reiter button[aria-pressed="true"] { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 600; }

/* ---------- Seitenrahmen: Leiste links, Kopf, Inhalt ---------- */
body.mit-rahmen { padding: 0; }
.leiste {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nav-breite);
  padding: var(--abstand-4) var(--abstand-3);
  background: var(--flaeche);
  border-right: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  overflow-y: auto;
  z-index: 10;
}
.marke { display: flex; flex-direction: column; padding: var(--abstand-1) var(--abstand-2) 18px; color: var(--text); text-decoration: none; }
.marke b { font-size: 16px; line-height: 1.2; }
.marke small { color: var(--gedaempft); font-size: var(--schrift-klein); }
.eintraege { display: flex; flex-direction: column; gap: 2px; }
.eintraege.unten { margin-top: auto; padding-top: var(--abstand-3); }
.eintraege a, .eintraege button, .eintraege .eintrag-folgt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  width: 100%;
  padding: var(--abstand-2) var(--abstand-3);
  border: 0;
  border-radius: var(--radius-klein);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.eintraege form { display: block; }
.eintraege a:hover, .eintraege button:hover { background: var(--hintergrund); }
.eintraege a[aria-current="page"] { background: var(--akzent-zart); color: var(--akzent); font-weight: 600; }
.eintraege .eintrag-folgt { color: var(--gedaempft); cursor: default; }
.eintraege .symbol { width: 1.4em; text-align: center; flex: none; }
.leiste .thema { margin-top: var(--abstand-2); width: 100%; }
.leiste .thema button { flex: 1; padding: 6px var(--abstand-1); }

.rahmen { margin-left: var(--nav-breite); min-height: 100vh; }
.kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-4); padding: 18px var(--abstand-5) 6px; }
.kopf .unterzeile { margin: 2px 0 0; font-size: 14px; color: var(--gedaempft); }
.inhalt { display: flex; flex-direction: column; gap: var(--abstand-4); padding: var(--abstand-3) var(--abstand-5) 24px; min-width: 0; }

@media (max-width: 760px) {
  .leiste { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--rand); }
  .eintraege { flex-direction: row; flex-wrap: wrap; }
  .eintraege a, .eintraege button, .eintraege .eintrag-folgt { width: auto; }
  .eintraege.unten { margin-top: 0; padding-top: 0; }
  .rahmen { margin-left: 0; }
  .kopf, .inhalt { padding-left: var(--abstand-4); padding-right: var(--abstand-4); }
}

/* ---------- Übersicht der Arbeitsbereiche ---------- */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--abstand-4); }
.kacheln .karte { height: 100%; }
.kacheln h2 { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; }
.kacheln .chip { align-self: flex-start; }

/* ---------- Einstellungen: zwei Spalten, schmal untereinander ---------- */
.einstellungen-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-4); align-items: start; }
@media (max-width: 1000px) { .einstellungen-spalten { grid-template-columns: minmax(0, 1fr); } }
.einstellungen-paar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand-3); align-items: end; }
@media (max-width: 600px) { .einstellungen-paar { grid-template-columns: minmax(0, 1fr); } }

.leer { padding: 24px; text-align: center; color: var(--gedaempft); border: 1px dashed var(--linie); border-radius: var(--radius); }
.fuss { margin-top: var(--abstand-5); text-align: center; color: var(--gedaempft); font-size: var(--schrift-klein); }

/* ---------- Übersicht: Kachel als Verweis ---------- */
a.kachel-link { color: inherit; text-decoration: none; }
a.kachel-link:hover { box-shadow: 0 0 0 2px var(--akzent-zart), var(--schatten); }
a.kachel-link h2 { color: var(--akzent); }

/* ---------- Textbereiche (Stufe 3) ---------- */
.feldzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--abstand-4); }
.zahlfeld input { width: 7rem; }
.ziel-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr); gap: var(--abstand-3); }
@media (max-width: 600px) { .ziel-zeile { grid-template-columns: minmax(0, 1fr); } }

/* Segmentauswahl aus echten Radioknöpfen (wie .reiter) */
.segment-feld { border: 0; padding: 0; gap: var(--abstand-1); }
.segment-feld legend { padding: 0; margin-bottom: var(--abstand-1); font-weight: normal; }
.segment { display: flex; gap: var(--abstand-1); width: fit-content; padding: 3px; border-radius: 11px; background: var(--leise-flaeche); }
.segment label { position: relative; display: block; }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment span { display: block; padding: 6px 16px; border-radius: var(--radius-klein); font-size: 14px; font-weight: 500; white-space: nowrap; }
.segment input:checked + span { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 600; }
.segment input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Mehrfachauswahl mit Chips */
.wahl > p { margin: 0; }
.wahl-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.wahl-chip { appearance: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--abstand-3); border: 1px solid var(--rand); border-radius: 15px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.wahl-chip:hover { border-color: var(--linie); }
.wahl-chip[aria-pressed="true"] { background: var(--akzent-zart); border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.wahl-chip[aria-pressed="true"]::before { content: "✓ "; white-space: pre; }
.wahl-neu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--abstand-2); align-items: center; }

/* Ladeanzeige */
.laedt { display: flex; align-items: center; gap: var(--abstand-2); margin: 0; color: var(--gedaempft); }
.laedt[hidden] { display: none; }
.laedt::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--rand); border-top-color: var(--akzent); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .laedt::before { animation: drehen 0.8s linear infinite; } }
@keyframes drehen { to { transform: rotate(360deg); } }

[data-ergebnis] textarea { min-height: 16rem; }
.band[hidden], .karte[hidden] { display: none; }
.segment-feld > p { margin: var(--abstand-1) 0 0; }

/* ---------- Dokumentation aus Textbausteinen (Aufbau wie PSIDO) ---------- */
.doku-suche { flex: 1 1 16rem; max-width: 28rem; }
.doku-box { display: flex; flex-direction: column; gap: var(--abstand-3); padding-top: var(--abstand-3); border-top: 1px solid var(--rand); }
.doku-box h2 { margin: 0; }
.wahl-chip[hidden] { display: none; }
/* Textfeld mit Beschriftung im Rahmen („Text auf Befund“ in PSIDO) */
.textrahmen { gap: 0; padding: 0 var(--abstand-3) var(--abstand-1); border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); }
.textrahmen:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.textrahmen legend { padding: 0 var(--abstand-1); font-size: var(--schrift-klein); font-weight: normal; color: var(--gedaempft); }
.textrahmen textarea, .textrahmen textarea:focus-visible { width: 100%; min-height: 2.6rem; padding: 2px 0 var(--abstand-1); border: 0; outline: none; background: transparent; resize: vertical; overflow: hidden; }
.textrahmen textarea[data-text] { min-height: 10rem; }
.band .knopf { margin-left: var(--abstand-2); }

/* ---------- Einstellungen: Bausteine bearbeiten ---------- */
.stapel-seite { display: flex; flex-direction: column; gap: var(--abstand-4); }
.box-einstellung details { border-top: 1px solid var(--rand); padding-top: var(--abstand-2); }
.box-einstellung details > summary { cursor: pointer; padding: 2px 0; }
.box-einstellung details[open] > summary { font-weight: 600; margin-bottom: var(--abstand-2); }
.baustein-neu > summary, .box-verwalten > summary { color: var(--akzent); }
.box-verwalten form + form { margin-top: var(--abstand-3); }

.doku-box-kopf { display: flex; align-items: center; gap: var(--abstand-2); }
.knopf.rund { width: 30px; min-height: 30px; padding: 0; justify-content: center; border-radius: 50%; }
.band[data-dialog-meldung]:empty { display: none; }

/* ---------- Dialog (wie „Fenster“ in psido-scribe-web) ---------- */
dialog.fenster { border: 0; border-radius: 18px; padding: 20px; width: min(620px, calc(100vw - 24px)); background: var(--hintergrund); color: var(--text); box-shadow: var(--schatten-fenster); }
dialog.fenster::backdrop { background: var(--schleier); }
dialog.fenster h2 { margin: 0; font-size: 18px; }
dialog.fenster label { color: var(--text); }
dialog.fenster input:not([type="checkbox"]):not([type="radio"]), dialog.fenster textarea { background: var(--flaeche); }
.dialog-knoepfe { justify-content: flex-end; }
.dialog-loeschen { margin-right: auto; color: var(--fehler); }
.dialog-loeschen[hidden] { display: none; }

/* Reiter als Links (Einstellungen: Bausteinsammlungen) */
.reiter a { font-size: 14px; font-weight: 500; white-space: nowrap; padding: 6px 16px; border-radius: var(--radius-klein); color: var(--text); text-decoration: none; }
.reiter a[aria-current="page"] { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 600; }

/* Zwischenbericht: Herr | Frau und Name in einer Zeile, ohne Beschriftung */
.zb-kopf { align-items: center; }
.zb-kopf [data-name] { flex: 0 1 16rem; }