/* ═══════════════════════════════════════════════════════════════════════════
   Curalia — Gestaltung
   ═══════════════════════════════════════════════════════════════════════════

   ZIELGRUPPE. Betreute Personen sind häufig älter; Angehörige bedienen die
   Anwendung unterwegs am Telefon, oft erschöpft. Daraus folgen drei Regeln,
   die über Geschmack stehen:

     1. Keine Schrift unter 12 px. Nirgends, auch nicht auf dem Telefon.
     2. Textfarben tragen mindestens 4,5:1 gegen ihren Hintergrund.
        Gemessen, nicht geschätzt — die hellen Grundtöne unten reichen dafür
        NICHT, dafür gibt es jeweils eine `-dark`-Variante.
     3. Was man antippt, ist mindestens 44 px hoch. Auf dem Telefon ohne
        Ausnahme, sonst mindestens 24 px.

   FARBEN. Die hellen Töne (--primary, --red, --amber) sind für Flächen,
   Ränder und Hintergründe da, wo 3:1 genügt. Sobald Text darauf oder darin
   steht, gilt die dunkle Variante. Alle Werte gegen WEISS, nachgemessen am
   2026-08-10 (Kontrast ist symmetrisch — «weiss darauf» und «auf weiss»
   ergeben dieselbe Zahl):

     --primary      #3B82F6   Flächen, Ränder       3,68 ✗
     --primary-dark #2563EB   Knöpfe, Links         5,17 ✓
     --red          #EF4444   Ränder, Markierung    3,76 ✗
     --red-dark     #B91C1C   Text, Löschknöpfe     6,47 ✓
     --amber        #F59E0B   Flächen               2,15 ✗
     --amber-dark   #B45309   Text                  5,02 ✓
     --text         #1E293B   Fliesstext           14,63 ✓
     --text-muted   #475569   Untertitel, Hinweise  7,58 ✓
     --text-light   #64748B   Leerzustände          4,76 ✓

   DREI EBENEN, UND DAS IST DIE FALLE. Ein Text sitzt nie im Nichts, sondern
   auf einer von dreien — und dieselbe Farbe trägt auf jeder anders:

                      Karte    Grund   stille
                     (weiss)   (Sand)  Fläche
     --primary-dark    5,17     4,90     4,55
     --red-dark        6,47     6,13     5,69
     --amber-dark      5,02     4,76   ✗ 4,42
     --text           14,63    13,86    12,87
     --text-muted      7,58     7,18     6,67
     --text-light      4,76     4,51   ✗ 4,19

   **Die beiden mit ✗ liegen unter dem Mindestmass von 4,5** — nicht
   überall, sondern nur auf der stillen Fläche. Wer dort Text setzt, nimmt
   --text oder --text-muted. `.blatt-aus` in der Blätterleiste ist die
   einzige Ausnahme und darf es sein: Sie trägt `aria-disabled`, und
   abgeschaltete Bedienelemente sind von der Regel ausgenommen.

   Die Spalte «Grund» hat sich am 2026-08-11 verschoben, als der Sandton die
   ganze Anwendung übernahm. Alle Werte sind dabei um rund 5 % gefallen und
   trotzdem besser als vorher gedacht — was diese Zahlen wirklich trägt, ist
   nicht die Fläche, sondern der Rand und der Text darauf.

   **Zahlen in Kommentaren altern.** Fünf der neun Werte oben waren am
   2026-08-10 gerundete Erinnerungen statt Messungen, und eine Notiz verglich
   einen Wert gegen den Seitengrund mit einem gegen Weiss, ohne das zu sagen.
   `py tools/check_kontraste.py` rechnet sie seither nach; wer eine ändert,
   misst sie.

   ABSTÄNDE. Bewusst eine kleine Auswahl: 8, 12, 16, 20, 28 px, als Klassen
   `.mt-8` bis `.mt-28`. Wer einen anderen Wert braucht, braucht meist eine
   eigene Klasse.

   SCHRIFTGRÖSSEN. 26 px Seitentitel · 17 px Abschnitt · 16 px Kartentitel ·
   15 px Fliesstext und Eingaben · 14 px Nebentext · 13 px Kleingedrucktes ·
   12 px Untergrenze (Abzeichen, Wochentage).

   SCHRIFT. Zwei Familien, und die Grenze verläuft bei 20 px:

     --serif   nur Überschriften ab 20 px (Seitentitel, Startseiten-Titel,
               Abschnitte der Startseite, h1 der Rechtstexte)
     --font    alles andere — Fliesstext, Eingaben, Abzeichen, Zahlen

   Das ist keine Marotte, sondern die Entscheidung aus dem Gestaltungsblatt:
   Serifen geben oben Charakter und kosten unten Lesbarkeit. Bei 15 px, auf
   einem Telefon, von jemandem mit müden Augen gelesen, sind die feinen
   Strichstärken ein Verlust. **Zahlen bleiben serifenlos**, auch grosse
   (`.kennzahl-wert`, `.preis-zahl`, `.cov-day`): Sie werden verglichen, nicht
   gelesen, und `font-variant-numeric: tabular-nums` gehört zur Textschrift.

   Noto Serif wird **mitgeliefert** (`public/fonts/`, erzeugt von
   `tools/schrift_bauen.py`) — Curalia lädt keine Schriften von fremden
   Servern, und `ui-serif, Georgia` allein hiess: auf Windows Georgia, auf
   Android oft gar keine Serifenschrift. Die Lizenz liegt daneben.

   HALTEPUNKTE.
     ≤ 1280 px  Klappmenü statt waagerechter Navigation. Die volle Leiste
                braucht rund 1350 px; darunter wurde am rechten Rand
                abgeschnitten, zuerst der Sprachumschalter.
     ≤ 1500 px  Rollenabzeichen weicht aus der Leiste.
     ≤  900 px  Zweispaltige Raster werden einspaltig.
     ≤  480 px  Bereitschaft dreispaltig, Hauptknöpfe über die volle Breite.

   INLINE-STYLES. Wiederkehrende Muster gehören als Klasse hierher, nicht in
   die Ansicht. Ein Rest bleibt unvermeidlich: Der Balken einer Umfrage trägt
   seine Breite als Prozentwert und kann keine feste Klasse haben. Solange
   das so ist, braucht eine Content-Security-Policy einen Nonce; mit
   `style-src 'self'` allein ist es nicht zu haben.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Noto Serif, zugeschnitten auf 334 Zeichen (22 kB statt 730). Erzeugt von
   `tools/schrift_bauen.py`; wer den Zeichenvorrat ändert, ändert ihn dort und
   lässt das Skript neu laufen — die Datei hier ist ein Erzeugnis.

   `font-display: swap` ist keine Feinheit: Ohne sie bliebe die Überschrift
   unsichtbar, bis die Schrift geladen ist. Auf einem langsamen Mobilfunknetz
   sähe jemand eine halbe Sekunde lang eine Seite ohne Titel. Lieber erst
   Georgia und dann der Wechsel als erst nichts. */
@font-face {
  font-family: 'Noto Serif';
  src: url('../fonts/noto-serif-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter, eine VARIABLE Datei für den ganzen Gewichtsbereich. Die Oberfläche
   benutzt 400, 500, 600 und 700; als vier einzelne Schnitte wären das vier
   Ladevorgänge und rund die dreifache Menge. 35 kB für alles.

   `font-weight: 100 900` ist kein Wunsch, sondern die Ansage an den Browser,
   dass diese Datei den ganzen Bereich abdeckt — ohne sie nimmt er an, es sei
   ein einzelner Schnitt, und rechnet die übrigen Gewichte künstlich aus. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variabel.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary:       #3B82F6;
  --primary-dark:  #2563EB;
  --primary-light: #EFF6FF;
  --green:         #10B981;
  --green-light:   #ECFDF5;
  --amber:         #F59E0B;
  /* Für Text und Symbole: das helle Amber trägt auf Weiss nur 2,15. */
  --amber-dark:    #B45309;
  --amber-light:   #FFFBEB;
  --red:           #EF4444;
  /* Fuer Text: das helle Rot traegt auf Weiss nur 3,76:1. */
  --red-dark:      #B91C1C;
  --red-light:     #FEF2F2;
  --purple:        #8B5CF6;
  --purple-light:  #F5F3FF;
  --teal:          #14B8A6;
  --teal-light:    #F0FDFA;

  /* ── Die drei Ebenen ───────────────────────────────────────────────────
     Bis zum 2026-08-11 hiess das alles `--bg` — EIN Name für ZWEI Rollen.
     Von vierzehn Verwendungen war genau eine der Seitengrund; die übrigen
     dreizehn waren stille Flächen AUF weissen Karten (Hover, geschlossene
     Diskussionen, das Abzeichen «ohne Anmeldung», Kästen in Karten). Wer
     den Grund umfärbte, färbte die Flächen mit — und die wurden dabei
     schlechter sichtbar, nicht besser. Zwei Rollen, zwei Namen.

     Die Sandfamilie darunter ist die Farbtafel, diese drei sind die
     Aufgaben. Wer eine neue Fläche baut, greift zur Aufgabe. */
  --grund:         var(--sand-50);    /* der Seitengrund, hinter allem      */
  --card:          #FFFFFF;           /* die Karte darauf                   */
  --flaeche:       var(--sand-100);   /* stille Fläche auf einer Karte      */
  --border:        var(--sand-200);   /* jede Linie und jeder Rand          */
  --text:          #1E293B;
  /* Slate-600 statt -500: 7,58 auf Weiss, 6,92 auf --bg. Der Vorgänger
     Slate-500 (#64748B) trug auf --bg nur 4,34 und lag damit knapp unter dem
     Mindestmass — auf Weiss wäre er mit 4,76 durchgegangen. Beide Zahlen
     stehen hier, weil der Kommentar sie vorher vermengt hat. */
  --text-muted:    #475569;
  --text-light:    #64748B;

  /* Die Sandfamilie — seit dem 2026-08-11 der Grund der GANZEN Anwendung,
     nicht mehr nur der Startseite. Vorher sprang man von der warmen
     Startseite in ein kühles Blaugrau, und das war bei jedem Anmelden ein
     kleiner Schreck. Begründung und Messungen im Gestaltungsblatt.
     Gemessen gegen --text: 13,86, gegen --text-muted: 7,18, und
     --primary-dark steht mit 4,90 darauf. */
  --sand-50:       #FDF8F3;
  --sand-100:      #F8EFE6;
  --sand-200:      #EFE0D1;

  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.05);
  --shadow-md:     0 4px 8px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.08);
  --font:          'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Die Ersatzkette bleibt hinter Noto Serif stehen: Solange die Datei lädt,
     und falls sie einmal nicht kommt, steht dort Georgia statt gar nichts. */
  --serif:         'Noto Serif', ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

/* ── Tastaturbedienung ─────────────────────────────────────────────────────
   Vorher gab es genau eine Fokusregel, für Eingabefelder — und die schaltete
   die Umrandung ab und ersetzte sie durch einen Schatten mit 12 % Deckkraft.
   Wer mit der Tastatur bedient, sah kaum, wo er steht.

   `:focus-visible` statt `:focus`: Die Markierung erscheint bei Tastatur- und
   Sprachsteuerung, nicht nach einem Mausklick. */
:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
}

/* Sprunglink: unsichtbar, bis er den Fokus bekommt. Ohne ihn muss man sich
   auf jeder Seite erst durch die gesamte Navigation tasten. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 400;
  background: var(--primary-dark); color: white;
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

body {
  font-family: var(--font);
  background: var(--grund);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Die Serifenschrift, an genau einer Stelle vergeben.
   Sie steht hier gesammelt und nicht in jeder einzelnen Regel: Wer wissen
   will, was Serifen trägt, liest eine Liste statt das ganze Stylesheet.
   **Wer eine Überschrift ergänzt, trägt sie hier ein** — sonst driftet es,
   wie es dieses Projekt schon bei Rollennamen und Kalenderzuständen erlebt
   hat. Die Grenze ist 20 px; alles darunter bleibt bei --font. */
.page-title,
.login-title,
.landing-titel,
.landing-abschnitt h2,
.fliesstext h1 {
  font-family: var(--serif);
  letter-spacing: -.01em;   /* Noto Serif setzt bei diesen Graden etwas weit */
}

/* ── Top nav ───────────────────────────────────────────────────────────────── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 64px;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 28px; gap: 28px;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; text-decoration: none; color: inherit;
}
/* Das Zeichen in der Leiste. `display:block` nimmt den Zeilenabstand weg, den
   ein Bild als Zeilenelement sonst unter sich lässt — sonst sitzt die Marke
   ein bis zwei Pixel zu hoch neben dem Namen. */
.nav-icon { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.nav-title { display: flex; flex-direction: column; line-height: 1.2; }
.nav-main { font-weight: 700; font-size: 15px; color: var(--text); }
.nav-sub  { font-size: 13px; color: var(--text-muted); }

.nav-links { display: flex; list-style: none; gap: 2px; flex: 1; }
.nav-links a {
  display: block; padding: 7px 14px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-muted); font-size: 14px; font-weight: 500;
  transition: all .15s;
}
.nav-links a:hover { background: var(--flaeche); color: var(--text); }
.nav-links a.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }

.nav-user {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; flex-shrink: 0;
}

/* Sprachumschalter und Abmelden liegen zweimal im Baum: in der Leiste für
   breite Fenster, im Klappmenü für schmale. Welcher Zweig gilt, entscheiden
   die Regeln für schmale Fenster weiter unten — deshalb steht die
   Grundeinstellung hier oben und nicht am Dateiende. */
.nav-lang-mobile, .nav-logout-mobile { display: none; }

.nav-name {
  font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none;
  padding: 8px 4px;
}
.nav-super { color: var(--amber-dark); }
.inline-form { display: inline; }

main.with-nav { padding-top: 64px; }
.page { max-width: 1200px; margin: 0 auto; padding: 32px 28px; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card-sm { padding: 16px; }
.card-title {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}

/* ── Grid helpers ──────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.role-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
.role-k1 { background: var(--primary-light); color: var(--primary-dark); }
.role-k2 { background: #EDE9FE; color: #5B21B6; }
/* K3 — Nachbarn und Freunde. Eigener Farbton (Teal, 5,25 auf --teal-light), damit
   die Marke nicht mit K1 verwechselt wird: Der Unterschied zwischen «Familie»
   und «hilft mit» ist genau der, an dem Familienentscheide haengen. */
.role-k3 { background: var(--teal-light); color: #0F766E; }
.role-b  { background: var(--green-light); color: #065F46; }
.role-bp { background: var(--amber-light); color: #92400E; }
/* Admin- und Superadmin-Abzeichen. Stand dreimal als Inline-Style da. */
.role-admin { background: var(--amber-light); color: #92400E; }

.event-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.tag-absence    { background: var(--amber-light);  color: #92400E; }
.tag-activity   { background: var(--green-light);  color: #065F46; }
.tag-appointment{ background: var(--primary-light);color: var(--primary-dark); }
.tag-coverage   { background: var(--purple-light); color: #5B21B6; }
.tag-incident   { background: var(--red-light);    color: #991B1B; }
.tag-discussion { background: var(--teal-light);   color: #0F766E; }
.tag-poll       { background: var(--purple-light); color: #5B21B6; }
.tag-agreement  { background: var(--amber-light);  color: #92400E; }
.tag-consensus  { background: var(--green-light);  color: #065F46; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none; transition: all .15s;
}
/* Weiss auf --primary traegt nur 3,68:1. --primary-dark bringt 5,17:1.
   --primary bleibt fuer Raender, Fokus und Flaechen, wo 3:1 genuegt. */
.btn-primary   { background: var(--primary-dark); color: white; }
.btn-primary:hover   { background: #1D4ED8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,.35); }
.btn-secondary { background: white; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--flaeche); }
/* Der Knopf, der etwas wegnimmt. Weiss auf --red-dark traegt 6,47:1.
   Gebraucht auf der Seite, auf der ein Kunde seinen Kalender aufgibt —
   dort steht er allein, ohne rotes Band ringsum: Wer dort ankommt, hat
   meistens einen Menschen verloren und schliesst etwas ab, statt etwas
   Gefaehrliches zu tun. */
.btn-danger    { background: var(--red-dark); color: white; }
.btn-danger:hover    { background: #991B1B; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(185,28,28,.3); }
.btn-sm {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--border); background: white;
  text-decoration: none; color: var(--text); transition: all .15s;
}
.btn-sm:hover { background: var(--flaeche); }
/* Loeschen und Entfernen. Vorher stand die Farbe als Inline-Style an jedem
   einzelnen Knopf — und zwar im hellen Rot, das nur 3,76:1 traegt. */
.btn-sm-danger { color: var(--red-dark); }

/* Sternchen an Pflichtfeldern. */
.req { color: var(--red-dark); }

/* Kleingedruckter Hinweis unter einem Eingabefeld. */
.field-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
label { display: block; font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.label-hint { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }

input[type="text"], input[type="date"], input[type="email"], input[type="tel"],
input[type="password"],
select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 15px; color: var(--text);
  background: white; transition: border-color .15s, box-shadow .15s; outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.radio-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.radio-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; font-weight: 500; transition: all .15s;
}
.radio-card input[type="radio"] { accent-color: var(--primary); }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }

.checkbox-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; margin-bottom: 8px; transition: all .15s;
}
.checkbox-row:hover { border-color: var(--primary); background: var(--primary-light); }
.checkbox-row input { accent-color: var(--primary); }

/* ── Flash messages ────────────────────────────────────────────────────────── */
.flash-wrap { max-width: 1200px; margin: 76px auto 0; padding: 0 28px; }
.flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; margin-bottom: 8px;
}
.flash > span { flex: 1; }

/* Die Meldung verschwand bisher nach vier Sekunden von selbst. Wer langsamer
   liest, hatte sie nicht erfasst — und wer den Bildschirm nicht sieht,
   bekam sie gar nicht mit. Jetzt bleibt sie stehen, mit einem Knopf zum
   Wegklicken. */
.flash-close {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .65; transition: opacity .15s, background .15s;
}
.flash-close:hover { opacity: 1; background: rgba(0,0,0,.07); }

.nav-spacer { flex: 1; }
.flash-success { background: var(--green-light); color: #065F46; border: 1px solid #A7F3D0; }
.flash-error   { background: var(--red-light);   color: #991B1B; border: 1px solid #FCA5A5; }

/* ── Page header ───────────────────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
}
/* Knopfreihe rechts im Seitenkopf. Sie stand als `style=` in der Ansicht und
   ohne Umbruch: Auf dem Telefon lief der dritte Knopf aus dem Bild — im
   Superadmin-Panel war das „E-Mail-Einstellungen". */
.kopf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

.page-title    { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; }
.page-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 4px; }

/* ── Coverage widget ───────────────────────────────────────────────────────── */
.coverage-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.coverage-day {
  padding: 12px 8px; border-radius: var(--radius-sm);
  border: 2px solid transparent; text-align: center; font-size: 13px;
  background: var(--flaeche); transition: all .15s;
}
.coverage-day.today {
  border-color: var(--primary); background: var(--primary-light);
}
.coverage-day.warn {
  border-color: var(--red); background: var(--red-light);
}
.cov-wd   { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.cov-day  { font-size: 20px; font-weight: 700; line-height: 1; margin-bottom: 6px; }
.cov-name {
  font-size: 13px; font-weight: 600; padding: 3px 6px; border-radius: 4px;
  margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* K1 und K2 waren beide blau gefuellt und dadurch nicht zu unterscheiden —
   dabei ist der Unterschied der, auf den es ankommt: K1 betreut aktiv und
   kann kommen, K2 ist erreichbar, aber vielleicht zu weit weg oder nicht in
   der Lage, aktiv zu helfen. Wer im Notfall zuerst anruft, muss das auf einen
   Blick sehen.

   Gemessen, bevor gebaut: Die Flaechen der bestehenden Rollenmarken K1 und K2
   unterscheiden sich nur um 1,09:1, die Textfarben um 1,74:1 — nebeneinander
   auf einem 40 px breiten Telefonstreifen praktisch dasselbe. Farbe allein
   traegt es also nicht. Deshalb ist der Unterschied einer der FORM: K1 gefuellt,
   K2 offen mit Rahmen. Das bleibt erkennbar bei Farbenblindheit, im Ausdruck
   und bei Sonnenlicht auf dem Display.

   Kontraste: K1 4,75:1 · K2 8,98:1 · B 7,29:1 — alle ueber dem AA-Minimum. */
.cov-k1 { background: var(--primary-light); color: var(--primary-dark); }
.cov-k2 {
  background: white; color: #5B21B6;
  box-shadow: inset 0 0 0 1.5px #C4B5FD;
  font-weight: 500;
}
.cov-k3 { background: var(--teal-light);    color: #0F766E; }
.cov-b  { background: var(--green-light);   color: #065F46; }
.cov-warn { font-size: 12px; color: #B91C1C; font-weight: 700; }

/* Die Ansprechperson fuer Medizinisches — oder, wenn sie abwesend ist, wer
   sie an diesem Tag vertritt. Sie steht oben und traegt ein 🩺 im Namen;
   der Rahmen ist die zweite, farbunabhaengige Auszeichnung. */
.cov-kontakt { box-shadow: inset 0 0 0 2px var(--text-muted); font-weight: 700; }

/* Mehr als vier Namen passen auf einem Telefon nicht in eine Tagesspalte.
   „+n" ist ein natives <details>-Element: ein Klick zeigt die restlichen
   Namen an Ort und Stelle. Vorher fuehrte derselbe Klick in die Monatsansicht
   — eine Seite ohne die fehlenden Namen, die Frage blieb unbeantwortet. */
.cov-mehr-details { margin-top: 2px; }
.cov-mehr {
  display: block; list-style: none; cursor: pointer;
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  text-decoration: underline dotted;
}
.cov-mehr::-webkit-details-marker { display: none; }
.cov-mehr-details[open] .cov-mehr { margin-bottom: 2px; }

/* Datum und Wochentag fuehren in die Monatsansicht — zu dem, was an diesem
   Tag geplant ist. Eigener, kleiner Link statt der ganzen Zelle: „+n" braucht
   ein eigenes <details> und darf nicht in einem Link verschachtelt sein. */
.cov-daylink { display: block; text-decoration: none; color: inherit; padding: 2px 0; }
.cov-daylink:hover .cov-day { text-decoration: underline; }

/* Legende der Bereitschaft. Sie stand als style= in der Ansicht und musste
   dreimal wiederholt werden; die Markenfarben kommen jetzt aus denselben
   Klassen wie die Namen darueber — eine Aenderung wirkt an beiden Stellen. */
.cov-legende {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}
.cov-legende-marke {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
}

/* Erklaerender Satz unter einem Formularfeld. Stand an sechs Stellen als
   style= in der Ansicht — jedes Mal mit denselben drei Angaben. */
.feld-hinweis { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

/* ── Verlauf zu einem Antrag ──────────────────────────────────────────────── */
/* Beide Seiten schreiben hier. Der Unterschied ist die Einrueckung und der
   Grundton — Farbe allein traegt ihn nicht, deshalb steht ueber jeder Zeile
   auch der Absender. */
.abschnitt-titel { font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.verlauf-zeile {
  background: var(--flaeche); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 8px; font-size: 14px;
}
.verlauf-support {
  background: var(--primary-light); color: var(--primary-dark);
  margin-left: 24px;
}

/* ── Calendar ──────────────────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-hd   {
  text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px; padding: 8px 4px;
}
/* Die Tageszelle ist ein <button>, damit sie mit der Tastatur erreichbar ist.
   Die folgenden Zeilen nehmen die Voreinstellungen des Browsers für Knöpfe
   zurück — Aussehen und Verhalten bleiben wie vorher. */
.cal-cell {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  min-height: 104px; padding: 8px 6px; background: white;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.cal-cell.empty   { background: #F8FAFC; }
.cal-cell.today   { background: var(--primary-light); border-color: var(--primary); }
.cal-day-num      { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.cal-cell.today .cal-day-num { color: var(--primary-dark); }
/* 10 px waren fuer die Zielgruppe unlesbar. 12 px ist die Untergrenze,
   die Zelle waechst dafuer von 88 auf 104 px. */
.cal-ev {
  display: block;
  font-size: 12px; padding: 3px 5px; border-radius: 3px;
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default; line-height: 1.4;
}

/* ── Event list ────────────────────────────────────────────────────────────── */
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-item {
  display: flex; gap: 16px; padding: 16px 18px;
  background: white; border-radius: var(--radius); box-shadow: var(--shadow);
  align-items: flex-start; transition: box-shadow .15s;
}
.event-item:hover { box-shadow: var(--shadow-md); }
.ev-date { min-width: 52px; text-align: center; flex-shrink: 0; padding-top: 2px; }
.ev-date-d { font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); }
.ev-date-m { font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
.ev-body   { flex: 1; min-width: 0; }
.ev-title  { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ev-desc   { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.ev-meta   { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-range  { font-size: 12px; color: var(--text-muted); }
/* Uhrzeit eines Termins oder einer Aktivitaet. Dunkler als .ev-range: Sie ist
   eine Aussage, kein Zusatz — «14:00–18:00» sagt, wann die betreute Person
   ausser Haus ist. */
.ev-zeit   { font-size: 12px; font-weight: 600; color: var(--text); }
.ev-actions{ flex-shrink: 0; }

/* ── Discussions ───────────────────────────────────────────────────────────── */
.disc-item {
  padding: 20px; background: white; border-radius: var(--radius);
  box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block;
  transition: box-shadow .15s;
}
.disc-item:hover { box-shadow: var(--shadow-md); }
/* Abgeschlossen sieht anders aus als offen — nicht nur am Häkchen im Text,
   das man in einer langen Liste leicht überliest, sondern auf einen Blick. */
.disc-item.closed { background: var(--flaeche); }
.disc-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
/* Persoenlich einstellbar (0-3 Zeilen, users.discussion_excerpt_lines).
   line-clamp statt Zeichenzaehlung: Wie viele Zeichen in eine Zeile passen,
   haengt von der Fensterbreite ab, die Zeilenzahl nicht. */
.disc-excerpt {
  font-size: 14px; color: var(--text-muted); margin: 6px 0 10px;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.disc-excerpt-1 { -webkit-line-clamp: 1; }
.disc-excerpt-2 { -webkit-line-clamp: 2; }
.disc-excerpt-3 { -webkit-line-clamp: 3; }
.disc-meta  { font-size: 13px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; }

.poll-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; transition: all .15s; background: white;
  font-family: var(--font); font-size: 14px; font-weight: 500; width: 100%; text-align: left;
}
.poll-option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-light); }
.poll-option.voted { border-color: var(--primary); background: var(--primary-light); }

.poll-bar-bg  { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.poll-bar-fill{ height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }
.poll-pct     { font-size: 13px; font-weight: 600; color: var(--primary-dark); min-width: 40px; text-align: right; }

.comment {
  padding: 12px 16px; background: var(--flaeche); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.comment-hd   { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.comment-name { font-size: 13px; font-weight: 600; }
.comment-time { font-size: 13px; color: var(--text-muted); }
.comment-body { font-size: 14px; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
/* Karte und Fusszeile untereinander, als Gruppe mittig.
   Vorher stand hier nur die Karte, waagerecht und senkrecht zentriert. Der
   Fuss kam dazu und braucht eine Spalte — er hängt aber NICHT am unteren
   Rand: Auf einem hohen Bildschirm stünde er dann einsam weit unter der
   Karte, als gehörte er zu einer anderen Seite. */
.login-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 24px 16px;
  background: var(--grund);
}
/* Der Fuss bleibt so breit wie die Karte: Eine Trennlinie über die ganze
   Fensterbreite zöge das Auge vom Formular weg. */
.login-page .landing-fuss { width: 100%; max-width: 440px; margin-top: 20px; }

/* Lange Formulare beginnen oben statt in der Mitte — Registrierung und
   Ersteinrichtung sind zu hoch, um sinnvoll zentriert zu werden.

   **Diese Klasse ist die Lehre aus einem selbstgemachten Fehler.** Beide
   Seiten schrieben `style="align-items:flex-start"` in die Ansicht. Solange
   `.login-page` eine Zeile war, hiess das «oben». Am 2026-08-11 wurde daraus
   eine Spalte, damit die Fusszeile darunter passt — und dieselbe Zeile hiess
   plötzlich «links»: Die Karte klebte am linken Rand, 16 px Abstand links
   gegen 864 rechts. **`align-items` und `justify-content` tauschen ihre
   Bedeutung, wenn sich die Richtung ändert**, und eine Ansicht, die eine
   Achse direkt anspricht, weiss nichts von der Richtung im Stylesheet.
   Darum steht die Absicht jetzt hier als Name und nicht dort als Achse. */
.login-page-oben { justify-content: flex-start; padding-top: 40px; padding-bottom: 40px; }
.login-card {
  background: white; border-radius: 20px; box-shadow: var(--shadow-md);
  padding: 44px; width: 100%; max-width: 440px;
}
.login-icon     { text-align: center; margin-bottom: 12px; }
.login-icon img { width: 52px; height: 52px; display: block; }
/* **Der Link muss das Bild wirklich umschliessen.** Als reines Inline-Element
   bekam er seine Höhe aus der Zeilenhöhe und war 40 × 21 px gross — das Bild
   ragte oben und unten heraus, und wer daneben tippte, traf nichts. Die
   Regel im Kopf dieser Datei nennt 44 px auf dem Telefon ohne Ausnahme; mit
   `inline-flex` plus Polsterung sind es dort 48 und hier 60. */
.login-icon a {
  display: inline-flex; padding: 4px; border-radius: 14px;
}
.login-title    { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.login-sub      { font-size: 15px; color: var(--text-muted); text-align: center; margin-bottom: 32px; }
.login-prompt   { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }

.user-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; margin-bottom: 8px;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: white; cursor: pointer; font-family: var(--font);
  text-align: left; transition: all .15s;
}
.user-btn:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-1px); box-shadow: var(--shadow); }
.user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.av-k  { background: var(--primary-light); color: var(--primary-dark); }
.av-b  { background: var(--green-light); color: #065F46; }
.user-name  { font-size: 15px; font-weight: 600; color: var(--text); }
.user-info  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 10px;
}
.alert-warn { background: var(--amber-light); color: #92400E; border: 1px solid #FDE68A; }
.alert-red  { background: var(--red-light);   color: #991B1B; border: 1px solid #FCA5A5; }
.alert-info { background: var(--primary-light);color: #1E40AF; border: 1px solid #BFDBFE; }
.alert-success { background: var(--green-light); color: #065F46; border: 1px solid #A7F3D0; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
hr  { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-icon  { font-size: 40px; margin-bottom: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 8px 12px; border-bottom: 2px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFBFC; }

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-size: 17px; font-weight: 600; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border); background: white; color: var(--text-muted);
  text-decoration: none; transition: all .15s; cursor: pointer;
}
.filter-btn:hover, .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ── Calendar clickable cells ──────────────────────────────────────────────── */
.cal-cell:not(.empty):hover { background: #F8FAFC; box-shadow: inset 0 0 0 2px var(--primary-light); }
.cal-cell.today:hover        { background: #DBEAFE; }
.cal-cell.has-entries        { border-left: 3px solid var(--primary-light); }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.modal {
  background: white; border-radius: var(--radius);
  width: 100%; max-width: 580px; max-height: 85vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  display: flex; flex-direction: column;
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateY(16px); opacity:.5 } to { transform: translateY(0); opacity:1 } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Überschrift des Tagesfensters. Sieht aus wie das <strong>, das hier vorher
   stand — ist aber eine echte Überschrift und benennt den Dialog. */
.modal-title { font-size: 1rem; font-weight: 700; }

/* Das Fenster bekommt beim Öffnen den Fokus. Es ist aber kein Bedienelement,
   deshalb hier keine Fokusmarkierung — die gehört an die Knöpfe darin. */
.modal:focus, .modal:focus-visible { outline: none; }

.modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--flaeche); color: var(--text-muted); font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.modal-close:hover { background: var(--border); color: var(--text); }

#modal-body { padding: 8px 24px; overflow-y: auto; flex: 1; }

.modal-footer {
  padding: 16px 24px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-shrink: 0;
}

.modal-event {
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.modal-event:last-child { border-bottom: none; }
.modal-event-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.modal-event-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.modal-event-followup {
  font-size: 13px; background: var(--amber-light); padding: 6px 10px;
  border-radius: 6px; margin-top: 6px; color: #92400E;
}
.modal-empty { text-align: center; padding: 32px 0; color: var(--text-light); font-size: 14px; }

/* ── Comment edit ──────────────────────────────────────────────────────────── */
.comment { transition: background .15s; }
.comment:hover { background: #F0F4F8; }

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  .topnav, .nav-user, .btn, .btn-sm, form button,
  .ev-actions, .no-print { display: none !important; }
  body { background: white; font-size: 12pt; }
  .card { box-shadow: none !important; border: 1px solid #ccc; page-break-inside: avoid; }
  main.with-nav { padding-top: 0; }
  .page { padding: 0; max-width: 100%; }
  .coverage-day { border: 1px solid #ccc !important; }
}

/* ── Mobile nav toggle button ──────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none; border: none;
  font-size: 22px; line-height: 1;
  cursor: pointer; padding: 8px; margin-left: auto;
  color: var(--text); border-radius: 8px;
  transition: background .15s;
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--flaeche); }

.nav-overlay {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 198;
}
.nav-overlay.open { display: block; }

/* Calendar horizontal scroll wrapper */
.cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

/* Die volle Leiste — Marke, sieben Navigationspunkte, Rollenabzeichen, Name,
   Sprachumschalter, Abmelden — braucht rund 1350 px. Darunter wurde am rechten
   Rand abgeschnitten, zuerst der Sprachumschalter: Eine Spitex-Kraft, die auf
   Französisch arbeitet, kam nicht an ihre Sprache. Deshalb greift das
   Klappmenü jetzt bis 1280 px, und im Bereich darüber weicht das
   Rollenabzeichen — es ist das Entbehrlichste, die eigene Rolle steht auch in
   den Einstellungen und auf der Hilfeseite. */
@media (max-width: 1500px) {
  .nav-user .role-badge { display: none; }
  .nav-links a { padding: 7px 11px; }
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .coverage-grid { grid-template-columns: repeat(4, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
  /* Nav: hamburger mode */
  .nav-toggle { display: flex; align-items: center; }
  .nav-sub { display: none; }

  .nav-links {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    background: white;
    border-bottom: 2px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 8px 14px 16px;
    z-index: 199;
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 13px 16px;
    font-size: 15px;
    border-radius: 8px;
  }

  /* Nav user: compact. Sprachumschalter und Rollenabzeichen wandern weg —
     zusammen mit Name und Abmelden-Knopf passte das nie in 360 px, der
     Umschalter wurde am rechten Rand abgeschnitten. */
  .nav-user { gap: 6px; }
  .nav-user .role-badge { display: none; }
  .nav-lang-desktop { display: none; }

  .nav-lang-mobile { display: block; padding: 6px 4px; }
  /* Im Klappmenü ist Platz für richtige Trefferflächen. */
  .nav-lang-mobile .lang-switcher { gap: 6px; }
  .nav-lang-mobile .lang-btn {
    min-width: 52px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    border: 1px solid var(--border);
  }
  .nav-lang-mobile .lang-btn-active { border-color: var(--primary-dark); }

  .nav-logout-desktop { display: none; }
  .nav-logout-mobile { display: block; padding: 6px 4px 2px; }
  .nav-logout-mobile .btn-sm { width: 100%; }

  /* Topnav layout */
  .topnav { padding: 0 14px; gap: 8px; }

  /* Main layout */
  main.with-nav { padding-top: 64px; }
  .page { padding: 16px 14px; }
  .page-title { font-size: 21px; }
  .page-header { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Flash */
  .flash-wrap { margin-top: 72px; padding: 0 14px; }

  /* Cards */
  .card { padding: 16px 14px; }

  /* Trefferflächen: 44 px ist das Mass, das eine Fingerkuppe zuverlässig
     trifft — auch die einer Hand, die zittert oder in Eile ist. */
  .btn { min-height: 44px; }
  .btn-sm {
    min-height: 44px; min-width: 44px; padding: 10px 14px; font-size: 14px;
    justify-content: center;
  }
  .nav-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
  .nav-name { padding: 12px 8px; }
  .flash-close { width: 44px; height: 44px; }
  .modal-close { width: 44px; height: 44px; }

  /* Coverage */
  .coverage-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .coverage-day { padding: 8px 4px; }
  .cov-day { font-size: 16px; }
  .cov-name { font-size: 12px; padding: 3px 4px; }

  /* Calendar: scroll instead of squeeze */
  .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-grid { min-width: 520px; font-size: 12px; }
  .cal-cell { min-height: 84px; }

  /* Events list — Bearbeiten/Löschen stehen ab hier neben dem Titel und
     nehmen ihm die Breite: 44-px-Trefferflächen (Regel weiter oben) sind
     auf dem Telefon so breit, dass ein Titel wie «Im Wohnzimmer gestürzt»
     auf drei Zeilen umbrach, obwohl die Karte selbst genug Platz hätte.
     Die Knöpfe rücken auf eine eigene Zeile unter den Inhalt — flex-basis
     100% erzwingt den Umbruch unabhängig davon, ob "eigentlich" noch Platz
     wäre. */
  .event-item { padding: 12px 12px; gap: 10px; flex-wrap: wrap; }
  .ev-date-d { font-size: 20px; }
  .ev-date-m { font-size: 12px; }
  .ev-actions {
    flex: 1 1 100%; flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border);
  }

  /* Discussions */
  .disc-meta { flex-direction: column; gap: 4px; }

  /* Login */
  .login-card { padding: 28px 20px; border-radius: 14px; margin: 0 8px; }
  .login-icon img { width: 40px; height: 40px; }
  .login-title { font-size: 20px; }

  /* Tables: allow horizontal scroll */
  .card > table, .page > table { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
  /* Even smaller phones */
  .topnav { height: 56px; }
  main.with-nav { padding-top: 56px; }
  .flash-wrap { margin-top: 64px; }
  .nav-overlay { top: 56px; }
  .nav-links { top: 56px; }

  .coverage-grid { grid-template-columns: repeat(3, 1fr); }

  /* Full-width primary action buttons inside cards */
  .card .btn-primary { width: 100%; justify-content: center; }

  /* Compact tables */
  td, th { padding: 8px 6px; }

  /* Page header button full-width */
  .page-header > .btn,
  .page-header > a.btn { width: 100%; text-align: center; justify-content: center; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Language switcher ──────────────────────────────────────────────────────── */
.lang-switcher {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin: 0 4px;
}
.lang-btn {
  /* Mindestens 24 × 24 px, sonst ist das Ziel auch mit der Maus zu klein. */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; min-height: 26px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  background: transparent;
  transition: background .15s, color .15s;
}
a.lang-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.lang-btn-active {
  background: var(--primary-dark);
  color: #fff;
  cursor: default;
}

/* Auf dem Telefon steht der Sprachumschalter im Klappmenü, nicht in der
   Leiste — dort wurde er am rechten Rand abgeschnitten. Umschaltung in den
   Regeln für schmale Fenster weiter unten. */

/* ── Ergaenzung Curalia ─────────────────────────────────────────────────────
   Die Tagesfenster werden serverseitig gerendert und ueber das
   hidden-Attribut ein- und ausgeblendet. Ohne diese Regel wuerde
   display:flex aus .modal-overlay das Attribut aussstechen und alle
   Fenster gleichzeitig anzeigen. */
.modal-overlay[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Wiederkehrende Muster
   ══════════════════════════════════════════════════════════════════════════
   Diese Klassen ersetzen Inline-Styles, die vielfach gleich lauteten. Sie
   stehen hier, damit eine Änderung an einer Stelle wirkt statt an zwanzig.
   ────────────────────────────────────────────────────────────────────────── */

/* Aufklappbare Frage auf der Hilfeseite (19×) und ihre Antwort (18×). */
.faq-frage {
  cursor: pointer; font-weight: 600; padding: 12px 0; font-size: 15px;
}
.faq-antwort {
  padding: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--text-muted);
}
.faq-antwort p + p { margin-top: 8px; }
.faq-antwort ul { padding-left: 20px; margin-top: 8px; }

/* Gedämpfter Fliesstext in verschiedenen Grössen. */
.muted      { color: var(--text-muted); }
.muted-sm   { color: var(--text-muted); font-size: 13px; }
.muted-line { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* Tabellen im Superadmin-Panel. */
.tabelle { width: 100%; font-size: 14px; border-collapse: collapse; }
.tabelle th {
  text-align: left; border-bottom: 2px solid var(--border);
  padding: 8px 12px; font-size: 13px; color: var(--text-muted);
}
.tabelle td { padding: 10px 12px; }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Trennlinie zwischen Abschnitten. */
.trenner { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* Leerzustand in einer Liste. */
.leer-hinweis {
  text-align: center; color: var(--text-light); font-size: 15px; padding: 16px 0;
}

/* Abstände. Bewusst eine kleine, feste Auswahl statt einer Skala für jeden
   denkbaren Wert — die Ansichten sollen sich an wenige Stufen halten. */
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; }
.mb-8  { margin-bottom: 8px; }
.mb-20 { margin-bottom: 20px; }

/* Volle Breite für den Hauptknopf in einer Karte. */
.btn-block { width: 100%; justify-content: center; }

/* Schmale, zentrierte Spalte für Formularseiten. */
.spalte-schmal { max-width: 720px; }

/* Zellen der Superadmin-Tabellen und Listenzeilen der Hilfeseite. */
.zelle      { padding: 8px 12px; }
.zelle-weit { padding: 10px 12px; }
.zelle-mitte{ padding: 8px; text-align: center; }
.zeile-muted{ padding: 5px 0; color: var(--text-muted); }
.liste-ein  { padding-left: 20px; }
.reihe      { display: flex; gap: 10px; }
.mt-10      { margin-top: 10px; }
.mt-24      { margin-top: 24px; }
.zentriert  { text-align: center; }
.erfolg     { color: #15803D; }   /* Green-700, 4,8:1 auf Weiss */
.plain-link { text-decoration: none; }

/* Betonter Nebenknopf und betonter Textlink. --primary traegt als Text nur
   3,68:1, deshalb hier die dunkle Variante. */
.btn-sm-primary { color: var(--primary-dark); }
.link-primary   { font-size: 14px; color: var(--primary-dark); text-decoration: none; font-weight: 600; }

/* ── Abo-Übersicht (Systemverwaltung) ────────────────────────────────────────
   Abo → Kalender → Mitglieder als Hierarchie. Die Einrückung trägt die
   Aussage: Ein Kalender gehört zu genau einem Abo, ein Mitglied zu genau
   einem Kalender — dieselbe Person kann in mehreren stehen. */
.filterzeile { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }

.abo-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.abo-name { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.abo-name a { color: inherit; text-decoration: none; }
.abo-name a:hover { text-decoration: underline; }

/* Ein gelöschtes Abo bleibt sichtbar, tritt aber zurück. */
.karte-still { opacity: .62; }

.kalender-block {
  border-left: 3px solid var(--primary-light);
  padding: 10px 0 10px 14px;
  margin-top: 12px;
}
.kalender-kopf {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.mitglieder > summary {
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  padding: 6px 0; list-style-position: inside;
}

/* Der Lebenslauf eines Kalenders: ruhen, übertragen, löschen. Eingeklappt und
   je Schritt eine Zeile mit Knopf und Begründung — wer eine Pflegeakte
   stilllegt oder vernichtet, soll dabei lesen, was das bedeutet. */
.verwalten-zeile {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--border);
}
.verwalten-hinweis { font-size: 13px; color: var(--text-muted); margin: 0; flex: 1; min-width: 220px; }
.verwalten-gefahr { border-top: 2px solid var(--red-light); }

/* In einer Filterzeile stehen die Felder nebeneinander; der Abstand nach unten
   ist dort nur eine Lücke. Stand vorher dreimal als style= in der Ansicht. */
.filterzeile .form-group { margin-bottom: 0; }

/* Zustand eines Kontos in einem Wort — dieselben Farben überall, damit
   „gelöscht" nicht an einer Stelle rot und an der anderen grau erscheint. */
.konto-status {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.status-aktiv    { background: var(--green-light);   color: #065F46; }
.status-wartend  { background: var(--amber-light);   color: var(--amber-dark); }
.status-ruhend   { background: var(--flaeche);            color: var(--text-muted); }
.status-geloescht{ background: var(--red-light);     color: var(--red-dark); }
/* «anonymisiert» — umgekehrt statt eingefärbt.
   Es stand als --text-light auf --bg und trug damit 4,34, unter dem
   Mindestmass von 4,5. Eine eigene Signalfarbe kam nicht in Frage: In
   derselben Tabellenzeile stehen Rollenabzeichen, und Blau, Purpur, Teal,
   Grün und Amber sind dort schon vergeben, Rot ist «gelöscht».
   Bleibt die Umkehrung — helle Schrift auf gefüllter Fläche, 7,58. Sie
   nimmt keiner Bedeutung ihre Farbe weg und ist vom grauen Nachbarn
   «ohne Anmeldung» eindeutig zu unterscheiden: Deren Flächen liegen 6,92
   auseinander, während ein nur etwas dunkleres Grau bloss 1,13 gebracht
   hätte — dasselbe Abzeichen mit einem Druckfehler.
   Dass es das schwerste Abzeichen der Reihe ist, passt: Anonymisieren ist
   endgültig, und es kommt selten vor. */
.status-weg      { background: var(--text-muted);    color: #FFFFFF; }

@media (max-width: 640px) {
  .kalender-block { padding-left: 10px; }
}

/* ── Konsensieren: eine Zeile je Lösungsvorschlag ────────────────────────────
   Links der Vorschlag mit seinem Auswahlfeld, rechts der bisherige Widerstand.
   Der Umbruch ist der Kern: Seit die elf Stufen Worte tragen («5 — nur wenn es
   nicht anders geht»), braucht das Feld Breite. In einer starren Reihe blieben
   ihm auf einem 320-px-Telefon 64 px, und die Beschriftung war abgeschnitten —
   ausgerechnet die, derentwegen es sie gibt. */
.konsens-zeile {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 16px; margin-bottom: 8px;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card);
}
/* `min-width: 0` erlaubt dem Feld zu schrumpfen statt die Zeile aufzuspannen;
   die Grundbreite von 220 px schiebt die Auszählung darunter, sobald es eng
   wird. */
.konsens-wahl { flex: 1 1 220px; min-width: 0; }
.konsens-wahl select { width: 100%; }

/* ── Sandbox ─────────────────────────────────────────────────────────────────
   Das Band steht auf jeder Seite und muss auffallen, ohne die Anwendung
   darunter zu übertönen — wer die Demo ansieht, soll Curalia sehen und nicht
   einen Hinweis. Deshalb der gedämpfte Bernsteinton der übrigen Hinweise und
   keine eigene Signalfarbe. */
.demo-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  margin: 0 auto 16px; max-width: 1180px; padding: 12px 16px;
  background: var(--amber-light); color: var(--amber-dark);
  border-radius: 8px; font-size: 14px; line-height: 1.5;
}
.demo-band-text { flex: 1; min-width: 240px; }
.demo-band-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demo-wechsel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.demo-wechsel label { font-size: 13px; font-weight: 600; }
.demo-wechsel select { min-height: 44px; }

/* Die Personenwahl vor dem Eintritt. Karten statt einer Auswahlliste: Die
   Rolle ist hier die eigentliche Aussage, und sie braucht Platz für ihre
   Erklärung. */
.personenwahl { display: grid; gap: 10px; }
.person-karte {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; background: var(--card);
}
.person-karte:hover { border-color: var(--primary); }
.person-karte:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.person-karte:has(input:focus-visible) { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.person-karte input { margin-top: 3px; min-width: 20px; min-height: 20px; }
.person-erklaerung { display: block; margin-top: 2px; }

/* Der Honigtopf. `display:none` wäre bequemer, wird aber von manchen
   Maschinen ausdrücklich übersprungen — aus dem Weg geschoben ist wirksamer. */
.honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Vorname und Nachname stehen nebeneinander, solange Platz ist, und
   untereinander, sobald es eng wird. Zwei Namensfelder in voller Breite
   untereinander lassen ein kurzes Formular doppelt so lang wirken. */
.namensfelder { display: flex; gap: 12px; flex-wrap: wrap; }
.namensfelder .form-group { flex: 1; min-width: 160px; }

/* Überschrift über einem Feldpaar — dort, wo ein einzelnes `label` nicht
   mehr passt, weil es zwei Felder beschreibt. */
.feld-gruppe-titel {
  font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text);
}

/* Die Menschprüfung (Turnstile). Anders als der Honigtopf ist sie sichtbar:
   Wer eine Hürde nimmt, soll sie auch sehen — und wenn sie hakt, wissen,
   woran es lag. Der Abstand ist derselbe wie zwischen zwei Formularfeldern,
   damit sie zum Formular gehört und nicht zum Knopf. */
.menschpruefung { margin: 20px 0; }

.postfach-kopf { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; margin-bottom: 8px; }
.postfach-text {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: inherit; font-size: 14px; color: var(--text-muted);
  background: var(--flaeche); border-radius: 6px; padding: 12px 14px;
}

.page-schmal { max-width: 640px; }

/* Sortierbarer Spaltenkopf. Als Link und nicht als Knopf mit Skript: Die
   Sortierung steht in der Adresse, ist damit teilbar und überlebt das
   Neuladen. Der Pfeil sagt, welche Spalte gerade ordnet. */
.spalten-kopf {
  color: inherit; text-decoration: none; white-space: nowrap;
  display: inline-block; padding: 2px 0;
}
.spalten-kopf:hover { text-decoration: underline; }

/* ── Seitenblätter ───────────────────────────────────────────────────────────
   Laravels Vorgabeansicht ist Tailwind-Markup; dieses Projekt hat kein
   Tailwind. Eigene Ansicht unter resources/views/vendor/pagination/. */
.blaetter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 16px;
}
.blatt {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.blatt:hover { border-color: var(--primary); color: var(--primary-dark); }
.blatt-hier {
  background: var(--primary-dark); border-color: var(--primary-dark); color: white;
}
.blatt-aus { color: var(--text-light); background: var(--flaeche); cursor: default; }
.blatt-zahl { font-size: 13px; color: var(--text-muted); margin-left: 6px; }

/* ── Export: Druckansicht ────────────────────────────────────────────────────
   Ein Dokument, kein Bildschirm. Karten und Schatten weichen einer schlichten
   Gliederung, die auf Papier trägt und im Browser-PDF sauber umbricht. */
.export-kopf {
  border-bottom: 2px solid var(--text);
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.export-abschnitt {
  font-size: 17px; font-weight: 700;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  /* Eine Überschrift allein am Seitenfuss ist eine verlorene Zeile. */
  page-break-after: avoid;
}
.export-eintrag {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  /* Ein Eintrag, der über den Seitenrand bricht, ist in einer
     Pflegedokumentation schwer zu lesen — und beim Vorlegen peinlich. */
  page-break-inside: avoid;
}
.export-zeile {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; align-items: baseline;
}
.export-text { margin: 4px 0; white-space: pre-wrap; }
.export-kommentar {
  margin: 6px 0 6px 16px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.export-fuss { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); }

@media print {
  .export-kopf { border-bottom-color: #000; }
  .export-eintrag { border-bottom-color: #ccc; }
}

/* ── Fliesstext aus Markdown (Änderungsverzeichnis) ──────────────────────────
   Das übrige Stylesheet setzt Überschriften und Listen über eigene Klassen.
   Hier kommt der Aufbau aus einer Datei, es gibt also keine Klassen zum
   Anhängen — deshalb ausnahmsweise Elementregeln, eingegrenzt auf .fliesstext. */
.fliesstext h1 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.fliesstext h2 {
  font-size: 17px; font-weight: 700;
  margin: 28px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fliesstext h3 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
.fliesstext p { margin-bottom: 12px; }
.fliesstext ul { padding-left: 22px; margin-bottom: 12px; }
.fliesstext li { margin-bottom: 6px; }
.fliesstext hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.fliesstext code {
  font-size: 13px; background: var(--flaeche);
  padding: 1px 5px; border-radius: 4px;
}
.fliesstext a { color: var(--primary-dark); }

/* ── Nutzungszahlen (Systemverwaltung) ───────────────────────────────────────
   Bewusst nüchtern: Kacheln mit einer Zahl, Balken für Verhältnisse. Keine
   Ranglisten, keine Serien, keine Auszeichnungen — der Portierungsplan hält
   fest, warum eine spielerische Aufbereitung hier nicht in Frage kommt. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.kennzahl {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
}
.kennzahl-wert {
  font-size: 26px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.kennzahl-titel { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.raster-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.karten-titel-klein { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.anteil-zeile {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 14px; margin-bottom: 3px;
}
.anteil-name { color: var(--text); }
.anteil-zahl { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Zahlenspalten in Tabellen: gleiche Ziffernbreite, damit Spalten fluchten. */
.zahl { font-variant-numeric: tabular-nums; }

/* ── Export: Filtern und Sortieren je Bereich ────────────────────────────────
   Angekreuzt genügt für den vollständigen Auszug; die Feineinstellung liegt
   hinter einem Aufklapper, damit das Formular beim ersten Blick einfach
   bleibt. */
.bereich-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.bereich-optionen > summary {
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  padding: 6px 0 2px; list-style-position: inside;
}
.bereich-optionen[open] > summary { margin-bottom: 4px; }

/* Mehrere Arten nebeneinander, solange Platz ist — untereinander wären
   fünf Ankreuzfelder eine Kolonne, die den Aufklapper unnötig lang macht. */
.arten-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px;
}

/* ── Öffentliche Seiten: Startseite und Rechtstexte ─────────────────────────
   Sie sind die einzigen Seiten, die ein fremder Mensch ohne Anmeldung sieht —
   und seit dem 2026-08-07 auch die, an denen die Freischaltung des
   Zahlungswegs hängt. Deshalb grosszügiger gesetzt als die Arbeitsansichten:
   Dort zählt Dichte, hier Lesbarkeit. */
/* Der warme Grund gilt nur, wo keine Meldung erscheinen kann. Auf der
   Startseite gibt es keine — in der Anwendung schon, und dort bliebe eine
   rote Warnung auf Sand kaum unterscheidbar (1,04:1 gegen --red-light). */

.landing { max-width: 880px; margin: 0 auto; padding: 24px 16px 40px; }

/* Die Schritte am Anfang sind wirklich eine Reihenfolge — darum gezählt und
   nicht bepunktet. Die Zahl steht als Marke links, damit sie beim Überfliegen
   trägt. */
.schritte { list-style: none; display: grid; gap: 14px; margin-top: 16px; padding: 0; counter-reset: schritt; }
.schritte li {
  counter-increment: schritt;
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
}
.schritte li::before {
  content: counter(schritt);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
}

/* Fragen und Antworten. `details` statt aufgeklappter Blöcke: Wer eine
   bestimmte Frage sucht, findet sie in einer Liste schneller als in einer
   Textwand — und wer alles lesen will, klappt auf. */
.frage { border-bottom: 1px solid var(--border); padding: 4px 0; }
.frage summary {
  cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 16px;
  list-style: none; display: flex; gap: 10px; align-items: baseline;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before { content: '+'; color: var(--primary-dark); font-weight: 700; }
.frage[open] summary::before { content: '–'; }
.frage-antwort { padding: 0 0 14px 22px; color: var(--text-muted); max-width: 62ch; }

/* Die Rollenliste. Das Kürzel trägt die Farbe der Bereitschaftsübersicht —
   wer beides sieht, erkennt dieselbe Sache wieder. */
.rollenliste { list-style: none; display: grid; gap: 10px; margin-top: 16px; padding: 0; }
.rollenliste li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; }
.rollenliste .kuerzel {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.landing-kopf { text-align: center; padding: 24px 0 8px; }
.landing-icon { line-height: 1; }
.landing-icon img { width: 48px; height: 48px; }
.landing-titel { font-size: 32px; line-height: 1.2; margin: 12px 0 0; }
.landing-lead { font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 16px auto 0; }
.landing-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.landing-abschnitt { margin-top: 48px; }
.landing-abschnitt h2 { font-size: 22px; margin-bottom: 12px; }
.landing-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Die Säule ist mittig gesetzt, ihre Aufzählung nicht: Zentrierte Listen
   zwingen das Auge, jede Zeile neu zu suchen. Die Säulen sind zudem
   unterschiedlich lang — `flex` mit `margin-top:auto` heftet den Knopf
   unten fest, damit die drei Knöpfe auf einer Linie stehen. */
.preis-saeule { text-align: center; display: flex; flex-direction: column; }
.preis-saeule .btn { margin-top: auto; align-self: center; }
.preis-zahl { font-size: 28px; font-weight: 600; margin: 8px 0 0; }
.preis-punkte {
  text-align: left; margin: 16px 0 0; padding-left: 20px;
  font-size: 14px; line-height: 1.55; color: var(--text-muted);
}
.preis-punkte li + li { margin-top: 7px; }
.landing-fuss { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; }
.landing-fuss p { margin: 4px 0; }

/* Die Rechtslinks in der angemeldeten Anwendung — bewusst leiser als die
   Fusszeile der Startseite.

   Sie sind eine Auskunft für den, der sie sucht, und keine Einladung: 12 px
   ist die untere Grenze aus den Gestaltungsregeln, `--text-muted` hat gegen
   den Sandton die geprüften 4,5:1. Kein Rahmen oben — die Seite endet ohnehin,
   und eine zweite Trennlinie unter dem letzten Kasten wäre eine Linie zu
   viel. */
.app-fuss {
  margin: 32px 16px 24px; text-align: center;
  font-size: 12px; color: var(--text-muted);
}
.app-fuss a { color: var(--text-muted); text-decoration: underline; }

/* Nur für Vorleseprogramme — optisch weg, im Textfluss vorhanden.

   Nicht `display:none` und nicht `visibility:hidden`: Beide nehmen den Text
   auch dem Vorleseprogramm weg, und dann wäre der Hinweis auf den neuen Tab
   für genau die Menschen verschwunden, für die er gedacht ist. */
/* Die Geschwisterzeile der Systemverwaltung — die Seiten einer Menügruppe.

   Sie steht **statt** eines Klappmenüs in der Kopfleiste: flach, ohne Maus
   bedienbar, auf 320 px kein Sonderfall. `flex-wrap` statt seitlichem Schieben,
   damit auf dem Telefon nichts abgeschnitten wird — genau daran ist die
   Kopfleiste ohne gewählten Kalender schon einmal gescheitert.

   Die aktuelle Seite ist keine Verknüpfung, sondern ein `span`: Ein Link auf
   die Seite, auf der man steht, ist ein Versprechen ohne Wirkung. */
.geschwister {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 10px 16px; margin: 0 0 4px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.geschwister a { color: var(--text-muted); text-decoration: none; padding: 6px 0; }
.geschwister a:hover, .geschwister a:focus-visible { color: var(--primary-dark); text-decoration: underline; }
.geschwister-hier { color: var(--text); font-weight: 600; padding: 6px 0; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.app-fuss a:hover, .app-fuss a:focus-visible { color: var(--text); }

@media (max-width: 480px) {
  .landing-titel { font-size: 26px; }
  .landing-knoepfe .btn { width: 100%; }
}

/* Der Anmeldeweg auf der Startseite: rechts oben, wo ihn Wiederkehrende
   suchen. Auf dem Telefon über die volle Breite, damit er nicht neben dem
   Titel klemmt. */
.landing-anmelden { display: flex; justify-content: flex-end; padding-bottom: 8px; }
@media (max-width: 480px) {
  .landing-anmelden { justify-content: stretch; }
  .landing-anmelden .btn { width: 100%; }
}

/* Wichtige Hinweise auf der Übersicht: Medikamente, Allergien,
   Notfallkontakte.

   Eingeklappt und unter der Bereitschaft. Die erste Fassung stand zuoberst
   und ausgeklappt da — bei einem Kalender, dessen Feld noch die leere
   Vorlage enthält («Allergien: -»), nahm sie den halben Bildschirm für
   nichts. Was bei jedem Aufruf gross und leer dasteht, wird nach drei Tagen
   übersehen, und dann ist nichts gewonnen.

   Der bernsteinfarbene Streifen links genügt zur Unterscheidung; ein
   Dauerwarnton stumpft ab. `pre-wrap`, weil der Text zeilenweise erfasst
   wird (ein Medikament je Zeile) und ohne das zu einem Absatz verklumpt. */
.hinweise-karte { border-left: 4px solid var(--amber); }
.hinweise-kopf {
  cursor: pointer; font-weight: 600; font-size: 15px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  /* Die native Dreiecksmarke bleibt: Sie sagt ohne Worte, dass hier etwas
     aufgeht — eine eigene Nachbildung wäre eine Zeile Text mehr und eine
     Tastaturbedienung weniger. */
  list-style-position: inside;
}
.hinweise-kopf .muted-sm { font-weight: 400; }
.hinweise-text {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  line-height: 1.6;
}

/* ── Wegleitungszeichen in Verwaltungslisten ────────────────────────────────
   Ein ⓘ neben einer Schaltfläche, das sagt, worauf hier zu achten ist —
   heute bei Konten, an denen noch eigene Kalender hängen.

   `tabindex="0"` und `aria-label`, weil ein `title` allein zweimal nichts
   nützt: Auf dem Telefon erscheint er gar nicht, und mit der Tastatur ist er
   mühsam. Die Auskunft steht darum zusätzlich in der Legende und in der
   Rückfrage vor der Handlung — das Zeichen ist die Abkürzung, nicht der
   einzige Weg.

   Bernstein statt Rot: Es ist ein Hinweis auf eine Reihenfolge, keine
   Warnung vor einem Schaden. `--amber-dark` trägt 5,30:1. */
.hinweis-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px;
  font-size: 15px; color: var(--amber-dark); cursor: help;
  border-radius: 6px;
}
.hinweis-zeichen:focus-visible {
  outline: 2px solid var(--primary-dark); outline-offset: 2px;
}