/* PraxisOS – Gestaltung

   Hell:   ruhiges Tiefgrün-Türkis als Leitfarbe, warm abgetönte
           Neutraltöne, Sandton als zweiter Akzent.
   Dunkel: Schwarz und Türkis. Neutraler Grundton ohne Grünstich,
           Türkis als einzige Leitfarbe.

   In beiden Fällen behalten Rot, Gelb und Grün ihre Bedeutung – die
   Rezeptprüfung und die Fristenampel hängen daran. --sand ist die
   Warnfarbe, nicht ein Schmuckton; für den Markenverlauf gibt es
   --marke-2. Schrift auf eingefärbten Flächen nimmt --auf-farbe,
   nicht Weiß: Im Dunkeln sind diese Flächen hell.

   Typografie: Outfit für Überschriften, IBM Plex Sans für Fließtext
   und Daten. Layout: ruhige Flächen, viel Weißraum, Karten nur dort,
   wo etwas wirklich eine eigene Einheit ist.

   Die Kontraste prüft tools/pruefen.mjs nach WCAG 2.1 bei jedem
   Testlauf – auch, dass die beiden dunklen Paletten gleich bleiben. */

:root {
  --bg: #eef3f1;
  --flaeche: #ffffff;
  --flaeche-2: #f5f8f7;
  --rand: #e1e9e6;
  --rand-stark: #c8d6d2;
  --text: #0f1f1c;
  /* Etwas dunkler als rein optisch nötig: Auf dem Grundton ergab
     #5f7571 nur 4,4:1, und Nebentext trägt hier Datum, Kürzel und
     Einheiten – nichts davon ist Zierde. */
  --text-2: #596e6a;
  --akzent: #0f7a6c;
  --akzent-stark: #0b5e53;
  --akzent-hell: #dcf2ed;
  /* Dunkler als der Markenton: Auf dieser Fläche steht weiße Schrift
     (Warnknopf, Postausgangsstreifen), und die war bei #c2763a mit
     3,5:1 zu blass – als Chipschrift auf --sand-hell ebenso. */
  --sand: #9e5a22;
  --sand-hell: #fbeee2;
  /* Zweite Farbe des Markenverlaufs. Im Hellen der Sandton, im
     Dunkeln ein tiefes Türkis – --sand selbst bleibt die Warnfarbe
     und darf dafür nicht herhalten. */
  --marke-2: #c2763a;
  /* Schrift auf gefüllten Farbflächen (Knöpfe, Chips, Streifen).
     Im Hellen ist das Weiß, im Dunkeln nicht: Dort sind Türkis, Rot
     und Gelb helle Töne – Weiß darauf wäre kaum zu lesen. */
  --auf-farbe: #ffffff;
  --rot: #c2362b;
  --rot-hell: #fdeae8;
  /* 4,0:1 auf der zugehörigen hellen Fläche war zu blass für einen
     Chip, der "offen" bedeutet. */
  --gelb: #9c6210;
  --gelb-hell: #fdf1dc;
  --gruen: #18795a;
  --gruen-hell: #dcf3e8;
  --blau: #255fa6;
  --blau-hell: #e3eefb;

  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(15, 31, 28, .05), 0 8px 24px -12px rgba(15, 31, 28, .18);
  --schatten-hoch: 0 24px 60px -20px rgba(15, 31, 28, .45);

  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", var(--font);
  color-scheme: light;
}

/* ------------------------------------------------------------------
   Dunkles Erscheinungsbild: Schwarz und Türkis.

   Dieselben Werte stehen zweimal – einmal für Geräte, die von sich aus
   dunkel anzeigen, einmal für die Umschaltung von Hand. CSS kann einen
   Wertesatz nicht an zwei Stellen gleichzeitig vergeben, wenn eine
   davon in einer Media-Query liegt. Damit die beiden nicht
   auseinanderlaufen, vergleicht tools/pruefen.mjs sie bei jedem
   Testlauf Zeile für Zeile.
-------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Grundton: neutrales Schwarz, kein Grünstich. Auf OLED-Geräten
       bleibt #000 wirklich aus.

       Die Stufen darüber sind bewusst kräftiger, als es auf einem
       hellen Bildschirm nötig schiene: Auf Schwarz verschluckt das
       Auge kleine Unterschiede. Bei 1,09:1 zwischen Karte und Grund
       war nicht mehr zu sehen, wo eine Karte anfängt, und das
       Rasternetz des Terminplans war praktisch weg. Jetzt 1,18:1
       für die Fläche und 1,37:1 für die Linie darauf – immer noch
       ruhig, aber ablesbar. tools/pruefen.mjs hält die Abstände. */
    --bg: #000000;
    --flaeche: #17171d;
    --flaeche-2: #212128;
    --rand: #30303a;
    --rand-stark: #45454f;
    --text: #eef0f3;
    --text-2: #a7a9b2;

    /* Türkis ist im Dunkeln die einzige Leitfarbe */
    --akzent: #2fe0c4;
    --akzent-stark: #5cf0d8;
    --akzent-hell: #0d332e;
    --marke-2: #0e8f9c;
    --auf-farbe: #04100e;

    /* Ampel und Hinweise behalten ihre Bedeutung: Die Rezeptprüfung
       unterscheidet rot, gelb und grün, und --sand ist die Warnfarbe,
       nicht ein zweiter Schmuckton. Grün ist bewusst weiter vom Türkis
       weggerückt, damit "in Ordnung" nicht wie die Leitfarbe aussieht. */
    --sand: #f0a95c;
    --sand-hell: #2b1d0c;
    --rot: #ff8578;
    --rot-hell: #2d100d;
    --gelb: #ffc14d;
    --gelb-hell: #2b1f08;
    --gruen: #5ddf7f;
    --gruen-hell: #0d2614;
    --blau: #7cb6ff;
    --blau-hell: #0d1b2e;

    --schatten: 0 1px 2px rgba(0, 0, 0, .6), 0 10px 30px -16px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* Grundton: neutrales Schwarz, kein Grünstich. Auf OLED-Geräten
     bleibt #000 wirklich aus.

     Die Stufen darüber sind bewusst kräftiger, als es auf einem
     hellen Bildschirm nötig schiene: Auf Schwarz verschluckt das
     Auge kleine Unterschiede. Bei 1,09:1 zwischen Karte und Grund
     war nicht mehr zu sehen, wo eine Karte anfängt, und das
     Rasternetz des Terminplans war praktisch weg. Jetzt 1,18:1 für
     die Fläche und 1,37:1 für die Linie darauf – immer noch ruhig,
     aber ablesbar. tools/pruefen.mjs hält die Abstände. */
  --bg: #000000;
  --flaeche: #17171d;
  --flaeche-2: #212128;
  --rand: #30303a;
  --rand-stark: #45454f;
  --text: #eef0f3;
  --text-2: #a7a9b2;

  /* Türkis ist im Dunkeln die einzige Leitfarbe */
  --akzent: #2fe0c4;
  --akzent-stark: #5cf0d8;
  --akzent-hell: #0d332e;
  --marke-2: #0e8f9c;
  --auf-farbe: #04100e;

  /* Ampel und Hinweise behalten ihre Bedeutung: Die Rezeptprüfung
     unterscheidet rot, gelb und grün, und --sand ist die Warnfarbe,
     nicht ein zweiter Schmuckton. Grün ist bewusst weiter vom Türkis
     weggerückt, damit "in Ordnung" nicht wie die Leitfarbe aussieht. */
  --sand: #f0a95c;
  --sand-hell: #2b1d0c;
  --rot: #ff8578;
  --rot-hell: #2d100d;
  --gelb: #ffc14d;
  --gelb-hell: #2b1f08;
  --gruen: #5ddf7f;
  --gruen-hell: #0d2614;
  --blau: #7cb6ff;
  --blau-hell: #0d1b2e;

  --schatten: 0 1px 2px rgba(0, 0, 0, .6), 0 10px 30px -16px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  /* Häkchen und Auswahlpunkte zeichnet der Browser selbst – ohne das
     hier blieben sie in seinem Blau, mitten im türkisen Bild. */
  accent-color: var(--akzent);
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
a { color: var(--akzent); }
::selection { background: var(--akzent-hell); }

/* ---------- Anmeldung ---------- */
/* Die Anmeldung ist in beiden Erscheinungsbildern dunkel – sie ist das
   erste, was morgens auf dem Bildschirm steht, und soll ruhig
   wirken. Schwarz mit zwei türkisfarbenen Lichtern. */
.login-screen {
  min-height: 100%; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(90rem 50rem at 15% -10%, rgba(47, 224, 196, .20), transparent 60%),
    radial-gradient(70rem 40rem at 110% 110%, rgba(14, 143, 156, .22), transparent 55%),
    #000000;
}
.login-box {
  background: var(--flaeche); padding: 34px; border-radius: 18px; width: min(380px, 100%);
  box-shadow: var(--schatten-hoch); display: grid; gap: 13px;
}
.login-logo { font-family: var(--font-display); font-size: 27px; font-weight: 700; color: var(--akzent); letter-spacing: -.02em; }
.login-sub { margin: -10px 0 10px; color: var(--text-2); font-size: 13px; }
/* hidden muss überall wirken, auch bei Elementen, die wir auf grid stellen */
[hidden] { display: none !important; }

.login-box label { display: grid; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .07em; }
.login-fehler { color: var(--rot); font-size: 13px; min-height: 18px; }
.login-hint { color: var(--text-2); font-size: 12px; margin: 0; }

/* ---------- Grundgerüst ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; height: 100%; min-height: 0; }
/* min-height: 0 ist hier nicht kosmetisch: Ohne es weigert sich ein
   Flex-Element, kleiner als sein Inhalt zu werden. Die Navigation
   würde dann wachsen statt zu scrollen und die Fußzeile mit "Mein
   Konto" und "Abmelden" aus dem Fenster schieben. */
.sidebar { background: var(--flaeche); border-right: 1px solid var(--rand); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.brand {
  padding: 20px 20px 16px; font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--akzent); letter-spacing: -.02em; display: flex; align-items: center; gap: 9px;
}
.brand::before {
  content: ""; width: 10px; height: 20px; border-radius: 5px;
  background: linear-gradient(180deg, var(--akzent), var(--marke-2));
}
#nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 10px; }
.nav-gruppe { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); padding: 16px 10px 6px; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: var(--radius-klein);
  cursor: pointer; color: var(--text); text-decoration: none; font-size: 13.5px; transition: background .12s ease;
}
.nav-item:hover { background: var(--flaeche-2); }
.nav-item.aktiv { background: var(--akzent-hell); color: var(--akzent-stark); font-weight: 600; }
.nav-item .ico { width: 18px; text-align: center; opacity: .85; }
.nav-badge { margin-left: auto; background: var(--rot); color: var(--auf-farbe); font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 700; }
.sidebar-foot { flex: none; border-top: 1px solid var(--rand); padding: 14px; display: grid; gap: 9px; font-size: 12px; color: var(--text-2); }

.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 24px; border-bottom: 1px solid var(--rand); background: var(--flaeche);
}
.topbar h1 { font-size: 18px; }
.topbar-tools { display: flex; align-items: center; gap: 8px; position: relative; }
.suche {
  width: 290px; padding: 8px 12px; border: 1px solid var(--rand-stark); border-radius: 999px;
  background: var(--flaeche-2); color: var(--text); font-size: 13px;
}
.suchpopup {
  position: absolute; top: 40px; right: 40px; width: 340px; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten-hoch);
  z-index: 50; max-height: 400px; overflow: auto;
}
.suchpopup .treffer { padding: 9px 13px; cursor: pointer; border-bottom: 1px solid var(--rand); }
.suchpopup .treffer:last-child { border-bottom: 0; }
.suchpopup .treffer:hover { background: var(--flaeche-2); }
.view { flex: 1; overflow: auto; padding: 24px; min-width: 0; }

/* ---------- Bausteine ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; }
.karte-kopf { padding: 14px 18px; border-bottom: 1px solid var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.karte-kopf h3 { font-size: 14.5px; }
.karte-body { padding: 18px; }
.raster { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .r3, .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kennzahl {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 15px 17px; min-width: 0;
}
.kennzahl .wert { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kennzahl .label { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.kennzahl.warn { border-color: color-mix(in srgb, var(--rot) 40%, var(--rand)); background: var(--rot-hell); }
.kennzahl.warn .wert { color: var(--rot); }

.btn {
  border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text);
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  font-family: inherit; font-weight: 500; transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--flaeche-2); border-color: var(--akzent); }
.btn-primary { background: var(--akzent); border-color: var(--akzent); color: var(--auf-farbe); }
.btn-primary:hover { background: var(--akzent-stark); border-color: var(--akzent-stark); }
.btn-danger { background: var(--rot); border-color: var(--rot); color: var(--auf-farbe); }
.btn-danger:hover { background: var(--rot); filter: brightness(.92); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--flaeche-2); border-color: transparent; }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-block { width: 100%; border-radius: var(--radius-klein); }
.btn-leiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-2); padding: 10px 14px; border-bottom: 1px solid var(--rand);
  font-weight: 600; white-space: nowrap; background: var(--flaeche-2);
}
td { padding: 10px 14px; border-bottom: 1px solid var(--rand); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--flaeche-2); }
tbody tr.klickbar { cursor: pointer; }
.rechts { text-align: right; font-variant-numeric: tabular-nums; }
.leer { padding: 36px; text-align: center; color: var(--text-2); }

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 600; background: var(--flaeche-2); border: 1px solid var(--rand); color: var(--text-2);
}
.chip.rot { background: var(--rot-hell); color: var(--rot); border-color: color-mix(in srgb, var(--rot) 30%, transparent); }
.chip.gelb { background: var(--gelb-hell); color: var(--gelb); border-color: color-mix(in srgb, var(--gelb) 30%, transparent); }
.chip.gruen { background: var(--gruen-hell); color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 30%, transparent); }
.chip.blau { background: var(--blau-hell); color: var(--blau); border-color: color-mix(in srgb, var(--blau) 30%, transparent); }
.chip.sand { background: var(--sand-hell); color: var(--sand); border-color: color-mix(in srgb, var(--sand) 30%, transparent); }
.chip.grau { background: var(--flaeche-2); color: var(--text-2); }

label.feld { display: grid; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-2); }
input, select, textarea {
  padding: 8px 11px; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  font-size: 13px; font-family: inherit; background: var(--flaeche); color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
textarea { min-height: 76px; resize: vertical; line-height: 1.55; }
.feld-reihe { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feld-reihe-3 { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.checkbox input { width: auto; }

/* ---------- Dialog ---------- */
.modal-hg { position: fixed; inset: 0; background: rgba(0, 0, 0, .58); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: var(--flaeche); border-radius: 16px; width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--schatten-hoch); }
.modal.breit { max-width: 1000px; }
.modal-kopf { padding: 17px 22px; border-bottom: 1px solid var(--rand); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-body { padding: 22px; overflow: auto; display: grid; gap: 15px; }
.modal-fuss { padding: 15px 22px; border-top: 1px solid var(--rand); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- Hinweise ---------- */
.toast-root { position: fixed; bottom: 22px; right: 22px; display: grid; gap: 8px; z-index: 200; }
.toast { background: var(--text); color: var(--bg); padding: 12px 17px; border-radius: var(--radius-klein); font-size: 13px; box-shadow: var(--schatten-hoch); max-width: 360px; }
.toast.fehler { background: var(--rot); color: var(--auf-farbe); }
.toast.ok { background: var(--akzent); color: var(--auf-farbe); }

/* ---------- Terminplan ---------- */
.plan-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.plan-nav { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.plan-datum { font-family: var(--font-display); font-weight: 600; min-width: 210px; text-align: center; }
.kalender { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow: auto; box-shadow: var(--schatten); }
.kal-grid { display: grid; min-width: max-content; }
.kal-spaltenkopf {
  position: sticky; top: 0; background: var(--flaeche); z-index: 3; border-bottom: 1px solid var(--rand-stark);
  padding: 9px 6px; text-align: center; font-size: 12px; font-weight: 600;
}
.kal-spaltenkopf .mini { font-size: 11px; color: var(--text-2); font-weight: 400; }
.kal-zeit { position: sticky; left: 0; background: var(--flaeche); z-index: 2; border-right: 1px solid var(--rand); font-size: 11px; color: var(--text-2); padding: 2px 9px; text-align: right; font-variant-numeric: tabular-nums; }
.kal-spalte { position: relative; border-right: 1px solid var(--rand); }
.kal-zelle { border-bottom: 1px dotted var(--rand); cursor: pointer; }
.kal-zelle.voll { border-bottom: 1px solid var(--rand); }
.kal-zelle:hover { background: var(--akzent-hell); }
.termin {
  position: absolute; left: 2px; right: 2px; border-radius: 7px; padding: 4px 7px; font-size: 11.5px;
  overflow: hidden; cursor: grab; color: #fff; z-index: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.termin:active { cursor: grabbing; }
.termin .t-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin .t-info { opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin.abgesagt { opacity: .4; text-decoration: line-through; }
.termin.erschienen::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.termin.nicht_erschienen { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .2) 0 6px, transparent 6px 12px); }
.termin.drag { opacity: .4; }
.kal-spalte.dropziel { background: var(--akzent-hell); }

/* ---------- Diverses ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); margin-bottom: 18px; flex-wrap: wrap; }
.tab { padding: 9px 15px; cursor: pointer; border-bottom: 2px solid transparent; font-size: 13px; color: var(--text-2); font-weight: 500; }
.tab:hover { color: var(--text); }
.tab.aktiv { border-color: var(--akzent); color: var(--akzent-stark); font-weight: 600; }
.hinweis { padding: 10px 13px; border-radius: var(--radius-klein); font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.hinweis.rot { background: var(--rot-hell); color: var(--rot); }
.hinweis.gelb { background: var(--gelb-hell); color: var(--gelb); }
.hinweis.gruen { background: var(--gruen-hell); color: var(--gruen); }
.hinweis.blau { background: var(--blau-hell); color: var(--blau); }
.balken { height: 7px; background: var(--rand); border-radius: 999px; overflow: hidden; }
.balken > i { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.muted { color: var(--text-2); }
.klein { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.warnbox { background: var(--rot-hell); border: 1px solid color-mix(in srgb, var(--rot) 30%, transparent); color: var(--rot); padding: 11px 13px; border-radius: var(--radius-klein); font-size: 13px; }
.saeulen { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
.saeule { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; min-width: 0; }
.saeule > i { width: 100%; background: linear-gradient(180deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, transparent)); border-radius: 5px 5px 0 0; min-height: 2px; }
.saeule span { font-size: 10px; color: var(--text-2); }

/* ---------- Homepage-Editor ---------- */
.web-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .web-layout { grid-template-columns: 1fr; } }
.web-abschnitt {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--rand); cursor: pointer;
}
.web-abschnitt:last-child { border-bottom: 0; }
.web-abschnitt:hover { background: var(--flaeche-2); }
.web-abschnitt.aus { opacity: .5; }
.web-abschnitt .griff { color: var(--text-2); font-size: 15px; cursor: grab; }
.web-abschnitt .titel { flex: 1; min-width: 0; }
.web-abschnitt .titel b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web-vorschau {
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
  background: #fff; box-shadow: var(--schatten); height: 76vh; min-height: 480px;
}
.web-vorschau iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.web-geraet { display: flex; gap: 6px; }
.web-vorschau.mobil { max-width: 420px; margin: 0 auto; }

/* Wochenansicht: Tag oben, darunter je Therapeut eine Spalte */
.kal-tagkopf { border-right: 1px solid var(--rand-stark); }
.kal-tagkopf.heute { background: var(--akzent-hell); color: var(--akzent-stark); }
.kal-kopf2 { top: 46px; padding: 5px 4px; border-bottom: 1px solid var(--rand-stark); }
.kal-person {
  display: inline-block; color: #fff; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px; letter-spacing: .02em;
}

.diktat { justify-self: start; margin-top: 4px; }

/* Auslastungsraster */
.heat { display: grid; gap: 3px; min-width: max-content; }
.heat-ecke { }
.heat-kopf { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-2); padding-bottom: 2px; }
.heat-zeit { font-size: 11px; color: var(--text-2); text-align: right; padding-right: 8px; align-self: center; font-variant-numeric: tabular-nums; }
.heat-feld { height: 34px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.heat-feld.leer-feld { background: transparent; }

/* ---------- Konto, Anmeldung, Sicherheit ---------- */
.sidebar-knoepfe { display: flex; gap: 6px; }
.sidebar-knoepfe .btn { flex: 1; }

.karte-kopf h4 { font-size: 13.5px; }
/* Im Kontodialog hängt der Inhalt direkt in der Karte */
.konto .karte > *:not(.karte-kopf) { padding: 16px 18px; }
.konto .karte > *:not(.karte-kopf) + *:not(.karte-kopf) { padding-top: 0; }

.zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

table.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mini td { padding: 5px 0; border-bottom: 1px solid var(--rand); }
table.mini tr:last-child td { border-bottom: 0; }

.rot { color: var(--rot); }
.gruen { color: var(--gruen); }
.gelb { color: var(--sand); }

.schluessel {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 17px; letter-spacing: .08em; font-weight: 600;
  background: var(--flaeche-2); border: 1px dashed var(--rand-stark);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0; user-select: all;
  word-break: break-all;
}

.schritte { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.schritte li { line-height: 1.5; }

#login-code-feld input {
  font-family: ui-monospace, Menlo, monospace; font-size: 18px;
  letter-spacing: .25em; text-align: center;
}

/* ---------- Rezeptprüfung (Absetzungsschutz) ---------- */
.pruefliste { display: grid; gap: 2px; }
.pruefpunkt {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 8px; background: var(--flaeche-2);
}
.pruefpunkt + .pruefpunkt { margin-top: 4px; }
.pruefpunkt .pz {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--auf-farbe);
}
.pruefpunkt.gruen .pz { background: var(--gruen); }
.pruefpunkt.gelb  .pz { background: var(--sand); }
.pruefpunkt.rot   .pz { background: var(--rot); }
.pruefpunkt.gruen { background: var(--gruen-hell); }
.pruefpunkt.gelb  { background: color-mix(in srgb, var(--sand) 12%, transparent); }
.pruefpunkt.rot   { background: var(--rot-hell); }
.pruefpunkt .tat { margin-top: 3px; font-weight: 500; }

/* ---------- Sprachwahl für den Anmeldebogen ---------- */
.sprach-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sprach-kachel {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text); cursor: pointer; font-size: 14px;
}
.sprach-kachel:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.sprach-kachel .fl { font-size: 26px; line-height: 1; }
.sprach-kachel span span { display: block; }

/* ==================================================================
   Handy und Tablet

   Ab hier wird aus der Arbeitsfläche für den Praxisrechner eine
   Oberfläche für den Daumen: Die Seitenleiste wird zur Schublade,
   Tabellen werden zu Karten, Dialoge füllen den Bildschirm.
   Alles, was man antippt, ist mindestens 44 px hoch.
   ================================================================== */

/* Der Menüknopf erscheint erst, wenn die Seitenleiste zur Schublade wird */
.menue-knopf { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* ---------- Seitenleiste als Schublade ---------- */
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(82vw, 300px); z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px -10px rgba(0,0,0,.4);
  }
  .sidebar.offen { transform: translateX(0); }
  .schublade-hg { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
  .nav-item { padding: 12px 12px; font-size: 15px; }
  .nav-gruppe { padding-top: 14px; }
  .sidebar-foot .btn { min-height: 44px; }

  .menue-knopf {
    display: grid; gap: 4px; align-content: center; justify-items: start;
    width: 44px; height: 44px; padding: 10px; flex: none;
    background: none; border: 0; cursor: pointer; border-radius: var(--radius-klein);
  }
  .menue-knopf span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); }
  .menue-knopf:hover { background: var(--flaeche-2); }

  /* ---------- Kopfzeile ---------- */
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar h1 { font-size: 16px; flex: 1; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
  .suche { width: 42px; padding: 10px; transition: width .2s ease; }
  .suche:focus { width: min(60vw, 240px); }
  .suchpopup { right: 8px; left: 8px; width: auto; top: 52px; }

  .view { padding: 14px 12px 28px; }

  /* ---------- Inhalte einspaltig ---------- */
  .raster.r2, .raster.r3, .raster.r4 { grid-template-columns: 1fr; }
  .raster.r2.eng, .raster.r4.eng { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl .wert { font-size: 22px; }
  .plan-kopf { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-leiste { flex-wrap: wrap; }
  .btn-leiste .btn { min-height: 42px; }
  .feld-reihe { grid-template-columns: 1fr; }

  /* Kennzahlen bleiben zu zweit – einspaltig wird die Seite sonst endlos */
  .raster.r3 > .kennzahl, .raster.r4 > .kennzahl { }
  .raster.r3:has(> .kennzahl), .raster.r4:has(> .kennzahl) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ---------- Tabellen werden Karten ---------- */
  /* Die Spaltenüberschriften wandern in td::before, der Kopf kann weg */
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: auto; }
  table tr {
    border: 1px solid var(--rand); border-radius: var(--radius); margin: 0 0 8px;
    padding: 9px 12px; background: var(--flaeche);
  }
  table tr.klickbar { cursor: pointer; }
  table tr.klickbar:active { background: var(--flaeche-2); }
  table td {
    border: 0; padding: 2px 0; display: flex; gap: 12px; line-height: 1.45;
    align-items: baseline; justify-content: space-between; text-align: right;
  }
  table td::before {
    content: attr(data-label); flex: none; font-size: 10.5px; font-weight: 600;
    color: var(--text-2); text-transform: uppercase; letter-spacing: .04em;
    text-align: left; padding-top: 1px;
  }
  /* Leere Zellen würden nur ihre Beschriftung zeigen – die fallen weg */
  table td:empty { display: none; }
  table td[data-label=""] { justify-content: flex-start; }
  table td[data-label=""]::before { display: none; }
  table td.rechts { text-align: right; }

  /* ---------- Dialoge füllen den Bildschirm ---------- */
  .modal-hg { padding: 0; align-items: stretch; }
  .modal, .modal.breit {
    width: 100%; max-width: none; max-height: none; height: 100dvh;
    border-radius: 0; display: flex; flex-direction: column;
  }
  .modal-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
  .modal-fuss { position: sticky; bottom: 0; background: var(--flaeche);
                border-top: 1px solid var(--rand); flex-wrap: wrap; }
  .modal-fuss .btn { flex: 1; min-height: 46px; }

  /* ---------- Terminplan ---------- */
  .kal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kal-woche { min-width: 760px; }

  /* ---------- Sonstiges ---------- */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tabs .tab { white-space: nowrap; padding: 11px 13px; }
  .heat { overflow-x: auto; }
  .web-vorschau { display: none; }
  input, select, textarea { font-size: 16px; }   /* unter 16px zoomt iOS beim Tippen */
}

@media (max-width: 420px) {
  .raster.r3:has(> .kennzahl), .raster.r4:has(> .kennzahl) { grid-template-columns: 1fr; }
  .sprach-kacheln { grid-template-columns: 1fr; }
}

/* ---------- Verbindungsstreifen (offline / Postausgang) ---------- */
.netzstreifen {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 9px; justify-content: center;
  padding: 7px 14px; font-size: 12.5px; font-weight: 500; text-align: center;
  color: var(--auf-farbe); box-shadow: 0 2px 10px -4px rgba(0,0,0,.4);
}
.netzstreifen.offline { background: var(--rot); }
.netzstreifen.wartend { background: var(--sand); }
.netzstreifen .punkt {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none;
}
.netzstreifen.wartend .punkt { animation: pulsen 1.4s ease-in-out infinite; }
@keyframes pulsen { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
body.hat-streifen .app { padding-top: 30px; }
body.hat-streifen .sidebar { top: 30px; }

@media (max-width: 860px) {
  .netzstreifen { font-size: 12px; padding: 6px 10px; }
  .sidebar-knoepfe { flex-wrap: wrap; }
  .sidebar-knoepfe .btn { flex: 1 1 45%; }
}

/* ---------- Hausbesuchs-Modus ---------- */
.hb-karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 14px 16px; display: grid; gap: 11px;
}
.hb-karte.fertig { opacity: .62; }
.hb-karte.abgesagt { opacity: .55; }
.hb-kopf { display: flex; align-items: flex-start; gap: 13px; }
.hb-zeit { display: flex; align-items: baseline; gap: 7px; flex: none; font-variant-numeric: tabular-nums; }
.hb-zeit b { font-size: 17px; }
.hb-zeit .nr {
  width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: var(--auf-farbe);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; align-self: center;
}
.hb-karte.fertig .hb-zeit .nr { background: var(--gruen); }
.hb-wer { flex: 1; min-width: 0; }
.hb-wer b { font-size: 15.5px; }
.hb-warnung {
  background: var(--rot-hell); color: var(--rot); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; font-weight: 600;
}
.hb-adresse { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hb-aktionen { display: flex; gap: 7px; flex: none; }
.hb-aktionen .btn { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.hb-letztes { font-size: 13px; }
.hb-letztes summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.hb-letztes p { margin: 7px 0 0; }
.hb-fuss { display: flex; gap: 8px; border-top: 1px solid var(--rand); padding-top: 11px; }
.hb-fuss .btn { flex: 1; min-height: 42px; }
.btn.btn-warn { background: var(--sand); border-color: var(--sand); color: var(--auf-farbe); }

@media (max-width: 860px) {
  .hb-adresse { flex-direction: column; align-items: stretch; }
  .hb-aktionen .btn { flex: 1; justify-content: center; }
}

.hb-stand {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 11px 14px; display: grid; gap: 8px;
}
.hb-balken { height: 6px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; }
.hb-balken span { display: block; height: 100%; background: var(--gruen); border-radius: 3px; transition: width .3s ease; }
.hb-zahlen { font-size: 13.5px; }

/* Prüfkorb auf der Übersicht – gelb umrandet, damit er auffällt */
.karte.korb { border-color: color-mix(in srgb, var(--sand) 45%, var(--rand)); }
.karte.korb .karte-kopf { background: color-mix(in srgb, var(--sand) 10%, transparent); }

/* ---------- QR-Code für den Tablet-Zugang ---------- */
.qr-feld { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.qr-bild {
  width: 184px; height: 184px; flex: none;
  display: grid; place-items: center;
  /* Immer weißer Grund mit hellem Rahmen, auch im dunklen Erscheinungsbild:
     Ein QR-Code mit umgekehrten Farben wird von vielen Kameras nicht
     erkannt, und die Ruhezone muss hell sein. */
  background: #fff; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  padding: 6px;
}
.qr-bild svg { width: 100%; height: 100%; display: block; }
.qr-adresse {
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: 7px 9px; font-size: 12.5px; user-select: all;
}

@media (max-width: 860px) {
  .qr-feld { grid-template-columns: 1fr; justify-items: center; }
  .qr-feld > .raster { justify-items: start; width: 100%; }
}

/* Hinweisstreifen über der Seite – bleibt stehen, blockiert aber nicht.
   Früher sprang dafür bei jedem Laden ein Dialog auf. */
.hinweisleiste { padding: 14px 22px 0; }
.hinweisleiste:empty { display: none; }
@media (max-width: 760px) { .hinweisleiste { padding: 12px 14px 0; } }