/* Lila Glas — der Grundstil aller Masken (DESIGN.md 1 bis 6), Runde 2, Schritt 6 (R2-8).
   Nach Daniels drei Vorlagen: milchige Glasflächen auf ruhigem, leicht lila Grund, große Rundungen, weiche
   Schatten, wenig Linien, eine Akzentfarbe (VALUNIQ-Lila). Dazu das Gerüst für alle drei Masken — Handy: Kopfleiste
   oben und schwebende Pillenleiste unten; ab 48 rem die schmale dunkle Symbolleiste links; ab 80 rem (Verwaltung ab 64 rem) daneben die
   helle Leiste mit Abschnitten und Zählern (DESIGN.md 5). Die neutralen Bausteine: Karte, Kachel mit großer
   Kennzahl, Pillen-Reiter, Knopf, Feld, ⓘ, Liste, Tabelle, Zähler, Abzeichen, Frist, Meldungen, Leer- und
   Ladezustand, Symbole — und der Stil der vier Skript-Bausteine (Fotos zu PDF, Sprachnachricht, Nachrichten mit
   Threads, Vorschau).
   Regeln, die pruefstaende/oberflaeche/stil.test.mjs misst: Farbwerte nur hier in :root, Text mindestens 4,5:1 —
   auch auf Glas, gerechnet über dem dunkelsten Grund —, Eingabefelder 16 px, Tippfläche 44 px, nur Systemschriften,
   keine fremde Adresse, kein url(), kein !important außer für [hidden], Druck und reduzierte Bewegung.
   Nur hell: `color-scheme: light` (DESIGN.md 1, warum kein dunkles Thema). */

:root {
  color-scheme: light;

  /* Tinte — Text mit einem Hauch Lila */
  --tinte: #1c1829;
  --tinte-leise: #5a5569;
  --tinte-still: #9a94aa;          /* nur Zierrat, nie für lesenswerten Text (2,9:1) */

  /* Flächen */
  --papier: #ffffff;
  --papier-leise: #f6f4fa;
  --grund: #ebe8f2;                /* Seitengrund */
  --grund-schein: #e0d6f3;         /* der lila Schein im Grund — der dunkelste Grund unter dem Glas */
  --linie: #e4e0ec;
  --linie-kraeftig: #c9c2d8;

  /* Glas: halbtransparent über dem Grund; ohne backdrop-filter die feste Fläche */
  --glas: rgba(255, 255, 255, 0.66);
  --glas-stark: rgba(255, 255, 255, 0.8);
  --glas-leicht: rgba(255, 255, 255, 0.38);
  --glas-rand: rgba(255, 255, 255, 0.72);
  --glas-fest: #f7f5fb;
  --glas-filter: blur(22px) saturate(160%);

  /* Lila — die Bedienung, die eine Akzentfarbe */
  --wolke: #7b3fd4;
  --wolke-tief: #5b28a8;
  --wolke-linie: #d9cbf5;
  --wolke-linie-leise: #ece5fb;
  --wolke-flaeche: #f3eefd;
  --feld-rand: #8a7cae;            /* Rand der Eingabefelder: 3,8:1 auf Weiß, 3,3:1 auf --wolke-flaeche (WCAG 1.4.11) */

  /* Nacht — die schmale Symbolleiste */
  --nacht: #1e1a2a;
  --nacht-hell: #3b3452;
  --auf-nacht: #f1eff7;
  --auf-nacht-leise: #aaa3bf;
  --glas-nacht: rgba(255, 255, 255, 0.07);      /* Glas auf Nacht und Lila (Anmeldung): --auf-nacht darauf ≥ 4,5:1 */
  --glas-nacht-rand: rgba(255, 255, 255, 0.16);

  /* Rot und Grün — nur die Aussage „heute" und „Ziel" (im Portal nur das Strukturbild) */
  --heute: #c0392b;
  --heute-flaeche: #fdf2f0;
  --heute-linie: #e8b5ae;
  --ziel: #1d7a3e;
  --ziel-flaeche: #f0f8f2;
  --ziel-linie: #a9d4b8;

  /* Hinweis und Tabellenkopf — ruhig lila statt Hellblau (eine Akzentfarbe) */
  --kapitel: #eee9f8;
  --kapitel-tief: #cfc2ee;
  --hinweis-flaeche: #f1ecfb;

  /* Orange — die Warnung: Frist steht an, Sperre, Fehler (Daniel, 01.10.2026: „#ff752d grundsätzlich für alle orangen
     Farben in dem Portal"). #ff752d trägt keinen Text (2,7:1 auf Weiß): es ist Fläche, Linie, Punkt, Rahmen, Zeichen ▲.
     Text in Orange steht in der dunklen Stufe desselben Tons (--achtung, 22° wie #ff752d bei 21°): 5,6:1 auf Weiß, 5,0:1
     auf --achtung-flaeche, Weiß darauf 5,6:1; auch das Zeichen ▲ (es ist Schrift). Auf der Orange-Fläche steht Tinte
     (6,5:1), nie Weiß. */
  --achtung-hell: #ff752d;
  --achtung: #b54300;
  --achtung-flaeche: #fff1e8;
  --achtung-linie: #ff752d;

  /* Ampel der Verträge (Runde 4, R4-5): satte Farben, damit Rot, Gelb und Grün mit dem Auge zu trennen sind — an
     .ampel-* (berater.css); Gelb auch am Hinweispunkt „bald" (R4-4). Zeichen und Zahl darauf: Weiß auf Rot 4,8:1, Tinte auf Gelb 8,0:1, Tinte auf Grün 5,3:1. */
  --ampel-rot: #dc2626;
  --ampel-gelb: #eaa300;
  /* R4 Rest 2: der gelbe Streifen der Spalte — kräftigerer Bernstein (gleicher Farbton 43°), 3,4:1 auf Weiß, 3,2:1 auf dem
     Glas (#eaa300 dort nur 2,2:1); Licht und Zähler bleiben im hellen Gelb mit Tinte. */
  --ampel-gelb-linie: #b58300;
  --ampel-gruen: #16a34a;
  /* Abgelaufen (01.10.2026): Rand, Punkt, Kante in --ampel-rot; Schrift in der dunkleren Stufe desselben Rots (0°) —
     5,7:1 auf Weiß, 5,3:1 auf --papier-leise (--ampel-rot dort nur 4,4:1). */
  --ampel-rot-text: #c81e1e;

  /* Schatten: weich, leicht lila */
  --schatten: 0 1px 2px rgba(35, 20, 70, 0.05), 0 10px 30px rgba(35, 20, 70, 0.07);
  --schatten-hoch: 0 2px 6px rgba(35, 20, 70, 0.08), 0 22px 56px rgba(35, 20, 70, 0.16);
  --schatten-pille: 0 1px 2px rgba(35, 20, 70, 0.08), 0 4px 14px rgba(35, 20, 70, 0.08);
  --schatten-lila: 0 1px 2px rgba(91, 40, 168, 0.25), 0 6px 18px rgba(123, 63, 212, 0.28);
  --fokus-ring: 0 0 0 4px rgba(123, 63, 212, 0.22);

  /* Rundungen */
  --rund-gross: 1.75rem;
  --rund: 1.375rem;
  --rund-mittel: 1rem;
  --rund-klein: 0.75rem;
  --rund-pille: 999px;

  /* Schrift: Systemschriften, keine Webschrift (Regel Null, CSP) */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --schrift-anzeige: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --schrift-fest: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stufe-klein: 0.8125rem;
  --stufe-mini: 0.6875rem;
  --stufe-titel: 1.75rem;
  --stufe-zahl: 2.75rem;

  /* Abstände und Maße */
  --rand: 1rem;
  --abstand: 1rem;
  --abstand-gross: 1.5rem;
  --tippflaeche: 44px;
  --navigation-hoehe: 3.5rem;
  --navigation-da: 1;              /* 0, solange am Handy ein Antwortfeld den Fokus hat (die Leiste tritt weg) */
  --schiene: 4.25rem;              /* Breite der Symbolleiste */
  --leiste: 18.5rem;               /* Breite der hellen Leiste */
  --raum-ueber: 14.875rem;         /* Nachrichten (Schritt 8): Platz über und unter den Spalten in Fensterhöhe … */
  --raum-zusatz: 8.5rem;           /* … und dazu am Handy quer die Kopfleiste und die untere Leiste (ab 48 rem: 0) */
  --faeden-ueber: 8.75rem;         /* Nachrichten der Kundin breit (Runde 3, S8): Rand, Überschrift und Rand unter den Spalten … */

  /* Die Willkommenstour (tour.js, DESIGN.md 9): der Schleier über der Seite, der lila Schein um das Ziel — und die Lage,
     die tour.js je Bild über style.setProperty setzt (hier nur der Ausgangswert). */
  --tour-schleier: rgba(30, 26, 42, 0.52);
  --tour-schein: rgba(123, 63, 212, 0.3);
  --tour-x: 0px;
  --tour-y: 0px;
  --tour-b: 0px;
  --tour-h: 0px;
  --tour-blase-x: 8px;
  --tour-blase-y: 8px;
  --punkt-links: 8px;              /* Lage des Kurztexts am Hinweispunkt (R4-4) — geruest.js setzt sie am Text */
  --punkt-oben: 8px;
  --tour-fortschritt: 0;
}

@media (min-width: 40rem) {
  :root { --rand: 1.5rem; --stufe-zahl: 3.25rem; }
}

/* --- Grund ----------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinte);
  background-color: var(--grund);
  background-image: radial-gradient(60rem 40rem at 8% -10%, var(--grund-schein), transparent 70%),
    radial-gradient(50rem 36rem at 105% 110%, var(--wolke-linie-leise), transparent 70%);
  background-attachment: fixed;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Silbentrennung in Titeln nur am Handy (unter 46 rem), dort frühestens ab Wörtern von 12 Zeichen und mit mindestens 5
   Zeichen vor und nach dem Strich; breit trennt kein Titel (Nachbesserung 2, N6). */
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
h1 { font-family: var(--schrift-anzeige); font-size: var(--stufe-titel); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 0.75rem; }

a { color: var(--wolke-tief); text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--wolke); outline-offset: 2px; }

input, select, textarea, button { font: inherit; font-size: 1rem; }

[hidden] { display: none !important; }

/* Nur für Bildschirmleser sichtbar. */
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.untertitel, .unterzeile { font-size: 0.875rem; color: var(--tinte-leise); }
.unterzeile { display: block; }
.betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeitpunkt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Linien-Symbole aus kern/vorlagen/_symbole.html (<symbol>/<use>, DESIGN.md 6). Die Farbe folgt dem Text. */
.symbol {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Wortmarke — die einzige gesperrte Stelle. */
.wortmarke {
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 1.5rem;
}

/* Wartungsseite und 404 (DESIGN.md 7.11): eine Glaskarte mittig. */
.wartung {
  width: calc(100% - 2 * var(--rand));
  max-width: 32rem;
  margin: 3rem auto;
  padding: 2rem var(--rand);
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
}
.wartung p:last-child { color: var(--tinte-leise); margin-bottom: 0; }

/* --- Gerüst: Handy (DESIGN.md 5) --------------------------------------------------------
   <div class="geruest" data-geruest> mit Kopfleiste, Navigation (Handy unten, breit die Symbolleiste), der hellen
   Leiste (breit fest, sonst eine Schublade) und dem Inhalt. geruest.js öffnet die Schublade und klappt die Leiste
   ein; ohne Skript ist alles über die Navigation erreichbar. */

.geruest { position: relative; }

.seite {
  container-type: inline-size;            /* Maßstab für Kacheln, Tabellen und Listen der Masken (@container) */
  container-name: seite;                  /* benannt für die Weichen der Nachrichten (@container seite …, Schritt 8) */
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--abstand) var(--rand) calc((var(--navigation-hoehe) + 1.25rem) * var(--navigation-da) + 1.25rem + env(safe-area-inset-bottom));
}

/* Kopfleiste (Handy): Glas, klebt oben — Wortmarke links, rechts die Person als Kürzel (öffnet die Leiste). */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-height: 3.5rem;
  padding: 0.4rem var(--rand);
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border-bottom: 1px solid var(--glas-rand);
  box-shadow: 0 1px 0 var(--linie);
}
.kopfleiste .wortmarke { display: inline-flex; align-items: center; min-height: var(--tippflaeche); margin: 0; white-space: nowrap; color: var(--tinte); text-decoration: none; }
.kopfleiste-wer {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--tinte-leise);
}
.kopf-rechts { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: var(--tippflaeche); }
/* Die Person oben rechts: Kürzel in einer Tippfläche von 44 px. */
.kopf-person {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  text-decoration: none;
}
.kopf-person[aria-current="page"] .kuerzel, .kopf-person[aria-expanded="true"] .kuerzel { box-shadow: 0 0 0 3px var(--wolke-linie); }
/* Der Tour-Knopf (Probe 06.10.2026, A2): in allen drei Masken an derselben Stelle — am Handy oben rechts neben dem Kürzel,
   ab 48 rem oben in der Symbolleiste unter der Welle. Ein Link auf die Tour der ersten Seite, geht ohne Skript. */
.kopf-tour, .nav-tour { text-decoration: none; }
.kopf-tour { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--tippflaeche); height: var(--tippflaeche); color: var(--wolke-tief); }
.tour-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 2px solid currentColor; border-radius: 50%; font-size: 0.95rem; font-weight: 800; line-height: 1; }

/* Kürzel-Bild: Initialen statt Foto. */
.kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--wolke-tief);
  background-image: linear-gradient(140deg, var(--wolke), var(--wolke-tief));
  color: var(--papier);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.kuerzel-gross { width: 2.75rem; height: 2.75rem; font-size: 0.9375rem; }

/* Zurück-Zeile über einer Unterseite: „← Nachrichten". */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tippflaeche);
  font-weight: 600;
  text-decoration: none;
}

/* Handy: die schwebende Pillenleiste unten, für den Daumen (Kunde am iPhone: „sehr angenehm" — das Prinzip bleibt).
   Jeder Punkt: oben die Zeichenzeile in der Höhe der Kapsel (Symbol und, bei Nachrichten, der Zähler im Fluss
   daneben), darunter das Wort — so überdeckt der Zähler nie ein Wort, und alle Wörter stehen auf einer Linie
   (Prüfung Schritt 9, Runde 2, K5; Abnahme-Fund B). Reicht die Breite nicht, bricht die Leiste um. */
.navigation {
  position: fixed;
  right: 0.375rem;
  bottom: calc(0.5rem + env(safe-area-inset-bottom));
  left: 0.375rem;
  z-index: 20;
  padding: 0.25rem;
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten-hoch);
}
.navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;                                  /* fünf Punkte mit je 44 px Mindestbreite passen bei 320 px in eine Zeile */
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation li { flex: 1 1 0; min-width: auto; }
.navigation a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: var(--tippflaeche);           /* auch „Start" bei 320 px (Nachbesserung Schritt 6: 41 px) */
  min-height: 3.25rem;
  padding: 0.3rem 0.125rem;               /* fünf Wörter passen bei 320 px in eine Zeile (gemessen, DESIGN.md 5) */
  border-radius: var(--rund-mittel);
  color: var(--tinte-leise);
  font-size: var(--stufe-mini);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.navigation a[aria-current="page"] { background: var(--wolke); color: var(--papier); box-shadow: var(--schatten-lila); }
.navigation .zaehler { position: static; }
.nav-zeichen { display: flex; align-items: center; justify-content: center; gap: 0.2rem; height: 1.4rem; }
.nav-zeichen .symbol { width: 1.3rem; height: 1.3rem; }
.navigation a[aria-current="page"] .zaehler { background: var(--papier); color: var(--wolke-tief); }
.navigation .nav-marke, .navigation .nav-unten, .navigation .nav-nur-breit { display: none; }

/* Die helle Leiste (Handy und Tablet): eine Schublade von links, geöffnet über das Kürzel bzw. den Knopf in der
   Symbolleiste (geruest.js). Ohne Skript bleibt sie zu — ihre Einträge erreicht man auch über die Navigation. */
.leiste {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: min(20rem, calc(100vw - 2.5rem));
  padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border-right: 1px solid var(--glas-rand);
  box-shadow: var(--schatten-hoch);
  visibility: hidden;
  transform: translateX(-105%);
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.geruest[data-leiste-offen] .leiste { visibility: visible; transform: none; transition: transform 0.22s ease; }
/* Der Schleier hinter der offenen Schublade: ein Tipp daneben schließt sie (geruest.js). */
.geruest[data-leiste-offen]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 35;
  background: var(--glas-leicht);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.leiste-kopf { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.5rem 0.75rem; }
.leiste-wer { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.leiste-name { font-size: 0.9375rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
/* Eine E-Mail-Adresse (kern/vorlagen/_adresse.html) bricht nur an den <wbr> nach „@" und vor jedem Punkt, nicht mitten
   im Wort — auch in einer Zeile, die sonst überall brechen darf (Demo-Posteingang bei 375 px). Nur ein Stück, das allein
   breiter ist als die Zeile, bricht noch (break-word). */
.adresse { overflow-wrap: break-word; hyphens: manual; }
.leiste-zusatz { color: var(--tinte-leise); font-size: var(--stufe-klein); line-height: 1.3; overflow-wrap: break-word; }
.leiste-abschnitt { padding: 0.5rem 0 0.25rem; border-top: 1px solid var(--linie); }
.leiste-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0.35rem 0.5rem 0.3rem;
  color: var(--tinte-leise);
  font-size: var(--stufe-klein);
  font-weight: 550;
  letter-spacing: 0;
}
.leiste-liste { margin: 0; padding: 0; list-style: none; }
.leiste-eintrag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tippflaeche);
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--rund-mittel);
  color: var(--tinte);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.leiste-eintrag .symbol { color: var(--tinte-leise); }
.leiste-eintrag:hover { background: var(--glas); }
.leiste-eintrag[aria-current="page"] { background: var(--papier); border-color: var(--glas-rand); box-shadow: var(--schatten-pille); color: var(--tinte); }
.leiste-eintrag[aria-current="page"] .symbol { color: var(--wolke-tief); }
.leiste-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.leiste-zahl {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.45rem;
  border-radius: var(--rund-pille);
  background: var(--papier-leise);
  color: var(--tinte-leise);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.leiste-zahl-neu { background: var(--wolke); color: var(--papier); }
.leiste-zahl-achtung { background: var(--achtung-flaeche); color: var(--achtung); }
/* Ein leises Wort statt eines Zählers (die gekündigten Mandate der Beraterleiste), abgesetzt durch eine Linie davor. */
.leiste-hinweis { flex: none; color: var(--tinte-leise); font-size: 0.75rem; font-weight: 600; }
.leiste-abgesetzt { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--linie); }
.leiste-eintrag:has(.leiste-hinweis) { color: var(--tinte-leise); }
.leiste-schalter-zu { margin-left: auto; }
/* „Abmelden" ganz unten in der Leiste (Kundenmaske, Runde 7, S8 — Felix P13): ein Knopf, der aussieht wie ein Eintrag. */
.leiste-abmelden { margin: auto 0 0; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
button.leiste-eintrag { width: 100%; background: none; font: inherit; font-size: 0.9375rem; font-weight: 500; text-align: left; cursor: pointer; }

/* Knopf nur mit Symbol (Leiste ein-/ausklappen, Schließen): 44 × 44 px. */
.knopf-symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  border: 0;
  border-radius: var(--rund-klein);
  background: none;
  color: var(--tinte-leise);
  cursor: pointer;
}
.knopf-symbol:hover { background: var(--glas); color: var(--tinte); }

/* --- Karte: Glas (DESIGN.md 4) ----------------------------------------------------------- */

.karte {
  margin: 0 0 var(--abstand);
  padding: 1.125rem var(--rand) 1.25rem;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
.karte > :last-child { margin-bottom: 0; }
/* Karte in der Karte: eine Stufe deckender, ohne eigenen Schatten. */
.karte .karte { background: var(--glas-stark); box-shadow: none; border-radius: var(--rund-mittel); }
.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}
.karte-kopf h2 { margin: 0; }

/* Zwei Spalten ab 46 rem, wo die Skizze sie zeichnet. */
.spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--abstand); }

/* Seitenkopf: groß der Titel, darunter grau ein Satz, rechts der eine starke Knopf. */
.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.25rem 0 var(--abstand-gross);
}
.seitenkopf h1 { margin: 0; }
.seitenkopf .untertitel { margin: 0.35rem 0 0; }
.seitenkopf > .knopf-stark { flex: 1 1 100%; }

/* --- Kacheln mit großer Kennzahl (Vorlagen 1 und 3) --------------------------------------
   <div class="kacheln"><a class="kachel" href=…><span class="kachel-titel">…</span><span class="kachel-zahl"><span class="kachel-wert">3</span></span>
   <span class="kachel-zusatz">…</span></a></div> — die Zahl rechnet der Server. */

.kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 var(--abstand-gross);
}
/* Zwei nebeneinander, bis die Inhaltsfläche 36 rem breit ist, dann alle in einer Reihe — gemessen an der Fläche,
   nicht am Bildschirm: Am Laptop mit heller Leiste (1024 px) ist sie schmaler als am Tablet, und vier Kacheln in drei
   Spalten ließen eine allein stehen. */
@container (min-width: 36rem) {
  .kacheln { grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.kachel {
  position: relative;
  /* Drei Zeilen (Titel, Zahl, Zusatz) im Raster der Reihe: Bricht ein Titel um, stehen die Zahlen aller Kacheln
     einer Reihe trotzdem auf einer Linie. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0.35rem;
  align-content: start;
  min-width: 0;
  padding: 1rem 1.125rem 1.05rem;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  color: var(--tinte);
  text-decoration: none;
}
a.kachel { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.kachel:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
/* Titel: das Symbol im lila Kreis darüber, der Wortlaut darf zweizeilig umbrechen — aber nie mitten im Wort und nie
   mit Trennstrich (Nachbesserung Schritt 6: „Kunden-konten" bei 768 und 320 px). */
.kachel-titel { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; color: var(--tinte-leise); font-size: 0.875rem; font-weight: 550; line-height: 1.3; hyphens: manual; overflow-wrap: normal; }
.kachel-titel .symbol { flex: none; width: 2rem; height: 2rem; padding: 0.4rem; border-radius: 50%; background: var(--wolke-flaeche); color: var(--wolke-tief); }
.kachel-zahl {
  align-self: end;
  padding-top: 0.6rem;
  font-family: var(--schrift-anzeige);
  container-type: inline-size;            /* Maß für die Zahl darin (die Kachel selbst bleibt im subgrid) */
  font-weight: 300;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--tinte);
}
/* Zahl und Einheit in einer Zeile, auch in schmalen Kacheln (Nachbesserung Schritt 6, Befund 4: „13,3 / MB" bei 768 px):
   die Größe folgt der Breite der Kachel, höchstens --stufe-zahl. */
.kachel-wert { font-size: min(var(--stufe-zahl), 30cqi); }
.kachel-einheit { margin-left: 0.1em; font-size: 0.45em; font-weight: 500; letter-spacing: 0; color: var(--tinte-leise); }
.kachel-zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-height: 1.5rem; color: var(--tinte-leise); font-size: var(--stufe-klein); }
.kachel-hervor { background: var(--glas-stark); border-color: var(--wolke-linie); }
.kachel-hervor .kachel-zahl { color: var(--wolke-tief); }

/* Abzeichen: kleine Pille neben einer Zahl oder einem Titel. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: var(--rund-pille);
  background: var(--wolke-flaeche);
  color: var(--wolke-tief);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.abzeichen-achtung { background: var(--achtung-flaeche); color: var(--achtung); }
.abzeichen-leise { background: var(--papier-leise); color: var(--tinte-leise); }

/* --- Knöpfe: Pillen, Tippfläche 44 × 44 px, je Seite höchstens einer stark -------------------
   stark = Lila gefüllt, gewöhnlich = Glas mit lila Text, leise = nur Text. */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  padding: 0.55rem 1.125rem;
  border: 1px solid var(--wolke-linie);
  border-radius: var(--rund-pille);
  background: var(--glas-stark);
  color: var(--wolke-tief);
  box-shadow: var(--schatten-pille);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.knopf:hover { background: var(--papier); border-color: var(--wolke); }
.knopf:active { transform: translateY(1px); }
.knopf-stark { border-color: var(--wolke); background: var(--wolke); color: var(--papier); box-shadow: var(--schatten-lila); }
.knopf-stark:hover { background: var(--wolke-tief); border-color: var(--wolke-tief); color: var(--papier); }
.knopf-leise { border-color: transparent; background: none; color: var(--wolke-tief); box-shadow: none; }
.knopf-leise:hover { border-color: transparent; background: var(--wolke-flaeche); color: var(--wolke-tief); }
/* Löschen und Entfernen: leise, in der Warnfarbe Orange — Rot bleibt der Aussage „heute" vorbehalten (DESIGN.md 2). */
.knopf-gefahr, .knopf-leise.knopf-gefahr { color: var(--achtung); }
.knopf-leise.knopf-gefahr:hover { background: var(--achtung-flaeche); color: var(--achtung); }
/* Die endgültige Bestätigung („Endgültig löschen", „Mandat kündigen" — alles, was sich nicht rückgängig machen lässt):
   stark in Orange, weiße Schrift, 6,3:1 (Nachbesserung 2, N4). Nicht Lila, denn Lila heißt „weiter", und nicht Rot. */
.knopf-stark.knopf-gefahr { border-color: var(--achtung); background: var(--achtung); color: var(--papier); box-shadow: var(--schatten-pille); }
.knopf-stark.knopf-gefahr:hover { border-color: var(--tinte); background: var(--achtung); color: var(--papier); box-shadow: none; text-decoration: underline; }
/* Einfache Löschknöpfe ohne Bestätigungsseite — sie löschen gleich beim Tippen (gesperrte Sprachnachricht löschen, Passkey
   entfernen): Orange gefüllt wie die endgültige Bestätigung, aber in gewöhnlicher Größe und ohne Schein — sie sind nicht die
   Hauptsache der Seite (Runde 3, A21). */
.knopf-gefahr-voll { border-color: var(--achtung); background: var(--achtung); color: var(--papier); box-shadow: none; }
.knopf-gefahr-voll:hover { border-color: var(--tinte); background: var(--achtung); color: var(--papier); text-decoration: underline; }
.knopf-breit { display: flex; width: 100%; }
/* Abmelden: in jeder Maske gleich — leise, auf dem Handy über die ganze Breite, mit Abstand zum Inhalt davor. */
.knopf-abmelden { display: flex; width: 100%; margin-top: 1rem; border-color: var(--linie); color: var(--tinte-leise); }
/* Ein Hinweis direkt unter einem Knopf klebt sonst an ihm (Absätze haben oben keinen Abstand; Rundgang 13c). */
.knopf + p { margin-top: 0.75rem; }
.knopf:disabled, .knopf[aria-disabled="true"] { border-color: var(--linie); background: var(--papier-leise); color: var(--tinte-leise); box-shadow: none; cursor: not-allowed; }
.knopfreihe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.knopfreihe .knopf { flex: 1 1 8rem; }
.verweis {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding: 0;
  border: 0;
  background: none;
  color: var(--wolke-tief);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: var(--wolke-linie);
  cursor: pointer;
}
.verweis:hover { text-decoration-color: var(--wolke-tief); }

/* --- Formularfelder (DESIGN.md 3, 4): 16 px gegen den Zoom von iOS-Safari ----------------- */

.feld { margin: 0 0 1rem; }
.beschriftung { display: block; min-height: 2rem; }
/* Eine Überschrift als Beschriftung bleibt in der Zeile, damit ⓘ direkt dahinter steht. */
.beschriftung > :is(h1, h2, h3) { display: inline; margin: 0; }
.beschriftung label, .beschriftung .titel { font-size: 0.875rem; font-weight: 600; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"], .feld input[type="tel"],
.feld input[type="search"], .feld input[type="date"], .feld input[type="number"], .feld input[type="time"], .feld select, .feld textarea {
  display: block;
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--feld-rand);
  border-radius: var(--rund-klein);
  background: var(--papier);
  color: var(--tinte);
  font-size: 1rem;
}
.feld textarea { min-height: 6rem; resize: vertical; }
.feld select { appearance: auto; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--wolke); outline-offset: 0; box-shadow: var(--fokus-ring); }
/* Tag und Uhrzeit (type=date, type=time): Der letzte Tabulatorhalt ist der Knopf des Browsers im Feld (Kalender, Uhr) —
   dort traf :focus das Feld nicht, der Rahmen fehlte (Nachbesserung Schritt 10, Befund 7, gemessen bei #datum, #uhrzeit,
   #bis). :focus-within trifft das Feld auch dann. */
.feld input:focus-within { outline: 2px solid var(--wolke); outline-offset: 0; box-shadow: var(--fokus-ring); }
.feld input::-webkit-calendar-picker-indicator:focus-visible { outline: 2px solid var(--wolke); outline-offset: 1px; border-radius: 0.25rem; }
.feld input[readonly] { background: var(--papier-leise); color: var(--tinte-leise); }
.feld ::placeholder { color: var(--tinte-leise); }
/* Fehler am Feld: Orange, mit Zeichen und Wortlaut (DESIGN.md 2). */
.feld [aria-invalid="true"] { border-color: var(--achtung); border-bottom-width: 2px; }
.feld-fehler { margin: 0.25rem 0 0; color: var(--achtung); font-size: 0.85rem; font-weight: 600; }
.feld-fehler::before { content: "! "; font-weight: 800; }
.haken { display: flex; gap: 0.6rem; align-items: flex-start; min-height: var(--tippflaeche); margin: 0.5rem 0; padding: 0.6rem 0; font-size: 0.9rem; cursor: pointer; }
.haken input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--wolke); }
fieldset { margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; font-size: 0.875rem; font-weight: 600; }

/* Suchfeld mit Lupe: <div class="feld feld-suche"><svg class="symbol">…</svg><input type="search"></div>. */
.feld-suche { position: relative; }
.feld-suche > .symbol { position: absolute; top: 50%; left: 0.85rem; width: 1.1rem; height: 1.1rem; color: var(--tinte-leise); transform: translateY(-50%); pointer-events: none; }
.feld-suche input[type="search"] { padding-left: 2.5rem; border-radius: var(--rund-pille); }

/* Datei wählen: das echte Feld liegt unsichtbar im Knopf, bleibt aber bedienbar. */
.dateiknopf { position: relative; overflow: hidden; }
.dateiknopf input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* Fokusrahmen wie :focus-visible — nur bei Tastatur, nicht nach dem Antippen. Ein Browser ohne :has
   (etwa ältere Safari) zeigt den Rahmen bei jedem Fokus — lieber einmal zu oft als nie. */
.dateiknopf:focus-within { outline: 2px solid var(--wolke); outline-offset: 2px; }
@supports selector(:has(*)) {
  .dateiknopf:focus-within { outline: 0; }
  .dateiknopf:has(input:focus-visible) { outline: 2px solid var(--wolke); outline-offset: 2px; }
  /* Ein Leerzustand ohne eigenes Symbol bekommt das allgemeine (die Welle der Wortmarke). */
  .leer:not(:has(.leer-symbol))::before { content: "≈"; }
}

/* --- ⓘ: Erklärung hinter dem Zeichen, ohne Skript (DESIGN.md 6) --------------------------
   <details class="erklaerung"> steht in der Beschriftung direkt hinter dem Text. Das Zeichen
   ist die <summary>; der aufgeklappte Text bricht als Block unter die Zeile um — kein
   Überlagerungsfenster. Der Browser meldet „aufgeklappt/zugeklappt" selbst. */
.erklaerung { display: inline; }
.erklaerung > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  margin: -0.6rem -0.4rem -0.6rem 0;
  vertical-align: middle;
  list-style: none;
  cursor: pointer;
}
.erklaerung > summary::-webkit-details-marker { display: none; }
.erklaerung > summary::marker { content: ""; }
.info-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--wolke-linie);
  border-radius: 50%;
  background: var(--wolke-flaeche);
  color: var(--wolke-tief);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
.erklaerung[open] .info-zeichen { border-color: var(--wolke); background: var(--wolke); color: var(--papier); }
.erklaerung > summary:focus-visible { outline: 2px solid var(--wolke); outline-offset: -4px; }
.erklaerung-text {
  display: block;
  margin: 0.3rem 0 0.6rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--wolke-linie-leise);
  border-radius: var(--rund-klein);
  background: var(--wolke-flaeche);
  color: var(--tinte);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
}
/* Erklärungen als Liste (Probe 06.10.2026, A6; seit A3 für alle Masken): Zeilen im ⓘ, ohne <ul> in der <span>. */
.erklaerung-text .erklaerung-absatz { display: block; margin-top: 0.35rem; }
.erklaerung-text .erklaerung-absatz:first-child { margin-top: 0; }
.erklaerung-text .erklaerung-punkt { display: block; padding-left: 1em; text-indent: -0.75em; }
.erklaerung-text .erklaerung-punkt::before { content: "• "; color: var(--wolke-tief); }

/* --- Listen: Zeilen als ruhige Flächen, kaum Linien ---------------------------------------- */

.liste { margin: 0 0 1rem; padding: 0; list-style: none; }
.liste > li { padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }
.liste > li:last-child { border-bottom: 0; }
/* Wird es eng, rutscht die Nebenangabe (Frist, Zähler) unter den Titel, statt ihn zu zerbrechen. */
.eintrag { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.3rem 0.75rem; }
.eintrag-haupt { flex: 1 1 9rem; min-width: 0; }
.eintrag-neben { flex: 0 0 auto; max-width: 100%; margin-left: auto; text-align: right; }
.eintrag-titel { font-weight: 600; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
@media (min-width: 46rem) {
  h1, h2, h3, .eintrag-titel { hyphens: manual; }
}
/* Der Titel als Link ist die Tippfläche der Zeile: mindestens 44 px hoch (DESIGN.md 5, Nachbesserung Schritt 6). */
a.eintrag-titel { display: inline-flex; align-items: center; min-height: var(--tippflaeche); text-decoration: none; }
a.eintrag-titel:hover { text-decoration: underline; }
.erledigt { color: var(--tinte); }
.erledigt::before { content: "✓ "; font-weight: 800; }

/* --- Pillen-Reiter (DESIGN.md 4): eine Kapsel aus Glas, der aktive lila gefüllt; wird es eng, wischt man
   waagerecht INNERHALB der Leiste (geruest.js holt den aktiven ins Bild), die Seite selbst rollt nie seitwärts. -- */

.reiter {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--abstand);
  padding: 0.3rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding: 0 1rem;
  scrollbar-width: none;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-pille);
  box-shadow: var(--schatten-pille);
  list-style: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter li { flex: none; }
.reiter a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tippflaeche);
  padding: 0 1rem;
  border-radius: var(--rund-pille);
  color: var(--tinte-leise);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.reiter a:hover { background: var(--glas-stark); color: var(--tinte); }
.reiter a[aria-current="page"] { background: var(--wolke); color: var(--papier); box-shadow: var(--schatten-lila); }
.reiter a[aria-current="page"] .zaehler { background: var(--papier); color: var(--wolke-tief); }

/* --- Filterpillen der Unterlagen (Runde 3, F1; DESIGN.md 7.4, 7.7): je Zeile eine Beschriftung und eine Reihe
   umrandeter Pillen wie die Ordner der Kundin — die gewählte lila gefüllt; wird es eng, wischt man INNERHALB der Reihe
   (die Seite rollt nie seitwärts). Ab 44 rem Fläche steht die Beschriftung links neben ihrer Reihe. ------------------------ */

/* 01.10.2026 (Daniel: deutlicher als Filter): ein eigener Kasten mit Kopf „Filtern" und Trichter, die Beschriftungen
   kräftig; ist ein Filter gewählt, trägt der Kasten eine lila Kante und im Kopf „Filter aktiv" und das Zurücksetzen. */
.filterpillen { display: grid; gap: 0.35rem; margin: 0 0 var(--abstand); min-width: 0; padding: 0.6rem 0.85rem 0.75rem; border: 1px solid var(--linie-kraeftig); border-radius: var(--rund-mittel); background: var(--glas-stark); }
.filterpillen.filter-gewaehlt { border-color: var(--wolke-linie); box-shadow: inset 4px 0 0 var(--wolke); }
.filter-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.filter-titel { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--tinte); font-size: 1rem; font-weight: 750; }
.filter-titel .symbol { width: 1.15rem; height: 1.15rem; color: var(--wolke-tief); }
.filter-aktiv { background: var(--wolke-flaeche); color: var(--wolke-tief); }
.filterzeile { display: grid; gap: 0.15rem; min-width: 0; }
.filterzeile-name { color: var(--tinte); font-size: 0.875rem; font-weight: 700; }
.filterzeile ul {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0.1rem 0 0.3rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  list-style: none;
}
.filterzeile ul::-webkit-scrollbar { display: none; }
.filterzeile li { flex: none; }
.filterzeile a {
  display: flex;
  align-items: center;
  min-height: var(--tippflaeche);
  padding: 0 0.95rem;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund-pille);
  background: var(--glas);
  color: var(--tinte);
  font-size: 0.9rem;
  font-weight: 550;
  white-space: nowrap;
  text-decoration: none;
}
.filterzeile a:hover { background: var(--glas-stark); }
.filterzeile a[aria-current="true"] { border-color: var(--wolke); background: var(--wolke); color: var(--papier); }
.filter-zuruecksetzen {
  margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tippflaeche);
  color: var(--wolke-tief); font-size: 0.85rem; font-weight: 600; text-underline-offset: 0.2em;
}
/* Gemessen wird die Fläche der Pillen, nicht der Bildschirm: Bei 768 px steht neben der Ordnerliste nur gut 22 rem —
   dort brächen neun Pillen neben der Beschriftung in sieben Zeilen um. Ab 30 rem Fläche brechen die Pillen um statt zu
   wischen, ab 44 rem steht die Beschriftung links daneben. */
.filterpillen { container: filter / inline-size; }
@container filter (min-width: 30rem) {
  .filterzeile ul { flex-wrap: wrap; overflow: visible; }
}
@container filter (min-width: 44rem) {
  .filterzeile { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; gap: 0.5rem; }
  .filterzeile-name { padding-top: 0.75rem; }             /* auf der Höhe der ersten Pillenreihe, auch wenn sie umbricht */
  .filterzeile ul { padding: 0.1rem 0; }
}

/* Zeitraum beim Hochladen: Jahr und „im Jahr" nebeneinander (Runde 3, F1). */
.zeitraum-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; margin-top: 0.35rem; }
.zeitraum-zeile select { width: 100%; }
.zeitraum { white-space: nowrap; }

/* --- Tabellen: Zeilen als ruhige Flächen, keine Gitterlinien; breit nur in ihrer Hülle verschiebbar ----------- */

/* position: relative — sonst entkommen absolut gesetzte Teile (.unsichtbar, versteckte Kopfzeile) dem eigenen Rollkasten und
   verbreitern auf dem Handy die ganze Seite (gemessen 27.09.2026: Kundenliste bei 844 × 390 innerWidth 988). */
.tabelle-huelle { position: relative; overflow-x: auto; margin: 0 0 1rem; }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0 0.3rem; font-size: 0.9rem; }
.tabelle th, .tabelle td { padding: 0.7rem 0.8rem; border: 0; text-align: left; vertical-align: top; }
.tabelle thead th { padding-top: 0.2rem; padding-bottom: 0.2rem; background: none; color: var(--tinte-leise); font-size: var(--stufe-klein); font-weight: 600; white-space: nowrap; }
.tabelle tbody td, .tabelle tbody th { background: var(--glas-stark); }
.tabelle tbody tr > :first-child { border-radius: var(--rund-klein) 0 0 var(--rund-klein); }
.tabelle tbody tr > :last-child { border-radius: 0 var(--rund-klein) var(--rund-klein) 0; }
.tabelle tbody tr > :only-child { border-radius: var(--rund-klein); }
.tabelle tbody tr:hover > td, .tabelle tbody tr:hover > th { background: var(--papier); }

/* --- Zähler „ungelesen" (DESIGN.md 4) ----------------------------------------------------- */

.zaehler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  min-width: 1.4rem;
  padding: 0 0.42rem;
  border-radius: var(--rund-pille);
  background: var(--wolke);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Mit Wort („1 ungelesen", „1 neue Antwort") — sichtbar und für Vorleser derselbe Text (Nachbesserung Schritt 8). */
.zaehler-wort { padding: 0 0.55rem; white-space: nowrap; }

/* --- Fristen in drei Stufen (DESIGN.md 2) — nie nur Farbe ------------------------------------
   Seit 01.10.2026 (Daniel): Orange, solange die Frist ansteht; Rot (--ampel-rot, das Rot des Überblicks) nur, wenn sie
   wirklich abgelaufen ist (.frist-abgelaufen u. a., rest < 0). Die alte Regel „Fristen werden nie rot" ist aufgehoben. */

/* Stufe 1, mehr als 7 Tage: nur das Datum, leise. */
.frist { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.frist .zeichen-frist { color: var(--achtung); }
/* Stufe 2, 7 bis 2 Tage: Text in dunklem Orange, fett, „noch 5 Tage". */
.frist-bald { color: var(--achtung); font-weight: 700; }
/* Stufe 3, 1 Tag, heute, abgelaufen: Orangefläche mit Rand und „!". */
.frist-dringend {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--achtung-hell);
  border-radius: var(--rund-pille);
  background: var(--achtung-flaeche);
  color: var(--achtung);
  font-weight: 700;
}
.frist-dringend::before { content: "! "; font-weight: 800; }
.frist-dringend { white-space: nowrap; }          /* die Pille bricht nicht in sich um (Spalte „Frist", 01.10.2026) */
/* Abgelaufen (rest < 0): Rot — Rand --ampel-rot, Schrift --ampel-rot-text (5,7:1 auf Weiß). */
.frist-abgelaufen, .frist-abgelaufen .zeichen-frist { color: var(--ampel-rot-text); }
.frist-dringend.frist-abgelaufen { border-color: var(--ampel-rot); background: var(--papier); }
.abzeichen-abgelaufen { background: var(--papier); color: var(--ampel-rot-text); box-shadow: inset 0 0 0 1px var(--ampel-rot); }

/* --- Hinweispunkt (Runde 4, R4-4; DESIGN.md 2) ---------------------------------------------
   Daniel, 30.09.2026: die vielen Warnpillen im Überblick „wirken sehr erschlagend". Statt der Pille ein kleiner Punkt in
   der Farbe der Dringlichkeit, mit Zahl, wenn es mehrere Hinweise sind; der Kurztext steht in einem `popover` (Maus drüber,
   Tastatur, Antippen — geruest.js). Farbe trägt nie allein: der Knopf hat den ganzen Text als Namen, der Punkt „!" bzw.
   die Zahl. Stufen: dringend (abgelaufen, heute, morgen) Orange gefüllt; abgelaufen (rest < 0) Rot gefüllt (.punkt-abgelaufen,
   01.10.2026). Seit Runde 7, S6 steht „Was zu tun ist" nicht mehr im Überblick des Beraters — die Stufen bald, Info und leise
   (nur dort benutzt) sind entfallen; der Punkt bleibt an der Frist der Kundin (Start). */
.punkt {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: var(--tippflaeche);
  min-height: var(--tippflaeche);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.punkt:focus-visible { outline: none; }
.punkt:focus-visible .punkt-licht { outline: 2px solid var(--wolke); outline-offset: 2px; }
.punkt-licht {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: var(--rund-pille);
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.punkt:hover .punkt-licht { box-shadow: var(--fokus-ring); }
/* Ein einzelner Hinweis ohne Zeichen (Ungelesenes, Angefordertes): nur ein kleiner Punkt. */
.punkt-licht:empty { min-width: 0.8rem; height: 0.8rem; padding: 0; }
.punkt-dringend .punkt-licht { background: var(--achtung-hell); color: var(--tinte); }
.punkt-abgelaufen .punkt-licht { background: var(--ampel-rot); color: var(--papier); }
.punkt-text {
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--rund-mittel);
  background: var(--papier);
  box-shadow: var(--schatten-hoch);
  color: var(--tinte);
  font-size: var(--stufe-klein);
  font-weight: 600;
  line-height: 1.4;
}
/* Mit Skript unter dem Punkt (Lage aus geruest.js), ohne Skript mittig wie jedes popover. */
.punkt-text[data-lage] { position: fixed; inset: auto; top: var(--punkt-oben); left: var(--punkt-links); margin: 0; }
/* Leise Stufe in einer Liste, die schon eine eigene Angabe hat (Tageskasten, Spalte „Nächste Frist"): statt der Pille ein
   kleiner Punkt vor dem Wort, ohne Fläche und Rand. */
.stufe-still .frist-dringend { padding: 0; border: 0; background: none; }
.stufe-still .frist-dringend::before { content: none; }        /* das ▲ davor sagt es schon (Kundenliste, Vertretung) */
.punkt-still {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--achtung-hell);
  vertical-align: 0.05rem;
}

/* Gesperrte Datei (U-05): Orange mit ⊘. */
.gesperrt { color: var(--achtung); font-weight: 600; }
.gesperrt::before { content: "⊘ "; }

/* --- Kalender (R2-7, Runde 2, Schritt 10; DESIGN.md 2 und 7.8) -------------------------------------------------
   Form UND Farbe (F10-1): Die Form vorn trägt die Aussage — Farbe trägt nie allein —, die Farbe trennt die Arten auf
   einen Blick: Frist Orange (die Warnung), Termin ruhiges Lila (`--kapitel`, nicht `--wolke`: Lila heißt Bedienung),
   Ereignis weiß mit gestricheltem Rand. Rot kommt nicht vor (Rot = „heute" im Strukturbild).
   Handy (Fläche unter 40 rem): Monatsübersicht und Tagesliste; ab 40 rem Fläche (@container, nicht der Bildschirm —
   am Laptop mit heller Leiste ist die Fläche schmaler als am Tablet) das Raster wie Google Kalender, von der
   Tagesliste nur der geöffnete Tag (:target). Die Weiche lag bis zur Nachbesserung bei 44 rem Inhalt: Das Tablet hochkant
   (768 px, Fläche 40,75 rem) bekam die Liste, und „Woche" stand dort doppelt zu „Als Nächstes" (Befund 3). */
.zeichen-frist { color: var(--achtung); }
.zeichen-frist::before { content: "▲"; }
/* Pfeil nach links = gespiegelter ▸: „◂“ ist in den Systemschriften kleiner als „▸“ (Kalender, Fotoleiste —
   Abnahme Schritt 9, Fund G). So sind beide Pfeile genau gleich groß. */
.pfeil-links { display: inline-block; transform: scaleX(-1); }
/* Ein Knopf, der nur einen Pfeil trägt (Monat, Seite der Vorschau): „▸" ist in den Systemschriften ein kleines Dreieck —
   hier knapp doppelt so groß, der linke gespiegelt. Tippfläche bleibt 44 × 44 px. */
.knopf-pfeil { min-width: var(--tippflaeche); padding-inline: 0; }
.knopf-pfeil > [aria-hidden="true"] { display: inline-block; transform: scale(1.8); }
.knopf-pfeil > .pfeil-links { transform: scale(-1.8, 1.8); }
/* An den Grenzen des Kalenders (vor 2000, nach 2100) steht statt des Pfeils ein leerer Platz — die Leiste springt nicht. */
.knopf-pfeil-platz { display: inline-block; width: var(--tippflaeche); }
.zeichen-termin { color: var(--tinte); }
.zeichen-termin::before { content: "■"; }
.zeichen-ereignis { color: var(--tinte); }
.zeichen-ereignis::before { content: "□"; }
/* Runde 5, R10b: belegt im eigenen Google- oder Apple-Kalender des Beraters — grau, ohne Kunde, ohne Link (keine neue Farbe). */
.zeichen-belegt { color: var(--tinte-leise); }
.zeichen-belegt::before { content: "▨"; }

/* Die Leiste über dem Kalender: Pillen Monat · Woche, Heute, ◂ ▸, der Zeitraum. Abstand zu „Als Nächstes" groß
   (Kleinpunkt 2 aus Schritt 5). */
.kalender-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin: 0 0 var(--abstand-gross); }
.kalender-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-width: 0; }
.kalender-leiste .reiter { margin: 0; }
.kalender-blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.kalender-zeitraum { margin: 0 0 0 0.35rem; font-family: var(--schrift-anzeige); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Die Legende zeigt Form und Farbe zusammen, wie die Chips. */
.kalender-legende { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 var(--abstand); }
.legende-frist, .legende-termin, .legende-ereignis, .legende-belegt {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.6rem; border: 1px solid transparent;
  border-left-width: 3px; border-radius: var(--rund-pille); color: var(--tinte); font-size: var(--stufe-klein);
}

/* Als Nächstes: je Zeile der Tag und der Eintrag, überfällige Fristen zuerst. Die Seite trägt es zweimal
   (_kalender_naechste.html): oben ganz, solange die Fläche unter 40 rem liegt; ab 40 rem gekürzt UNTER dem Raster —
   drei Einträge je eine Zeile, der Rest hinter „Alle … anzeigen" (Befund 2: vorher begann das Raster bei 1280 × 900
   unter dem Falz). Das verborgene mit display: none, also weder vorgelesen noch per Tab erreicht. */
.kalender-naechste .liste { margin: 0 0 0.5rem; }
.kalender-naechste-kurz { display: none; }
.kalender-naechste-kurz .liste { margin: 0; }
.kalender-naechste-kurz .naechster { flex-wrap: nowrap; align-items: center; min-width: 0; border-top: 1px solid var(--linie); }
.kalender-naechste-kurz .liste > .naechster:first-child { border-top: 0; }
.kalender-naechste-kurz .naechster-eintrag { flex: 1 1 0; overflow: hidden; }
.kalender-naechste-kurz .kalendereintrag { flex-wrap: nowrap; min-width: 0; padding: 0; white-space: nowrap; }
.kalender-naechste-kurz .kalendereintrag > * { flex: none; }
.kalender-naechste-kurz .kalendereintrag > .eintrag-text,
.kalender-naechste-kurz .kalendereintrag > .unterzeile { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kalender-naechste-kurz .kalendereintrag > a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; line-height: var(--tippflaeche); }
.kalender-naechste-kurz .kalendereintrag > .unterzeile { flex-basis: auto; padding-left: 0.5rem; }
.naechste-alle > summary {
  display: inline-flex; align-items: center; min-height: var(--tippflaeche); color: var(--wolke-tief); font-size: 0.875rem;
  font-weight: 650; cursor: pointer;
}
.naechste-alle > summary:focus-visible { outline: 2px solid var(--wolke); outline-offset: 2px; }
/* Der Sprunglink vor dem Raster (Befund 7): an ihm vorbei zum Formular (Berater) bzw. zu „Als Nächstes" (Kundin) —
   nur, wo es das Raster gibt, und erst sichtbar, wenn die Tastatur ihn erreicht (sonst nur für Vorleser). */
.kalender-sprung { display: none; }
.naechster { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; }
.naechster-tag { flex: 0 0 5.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Basis 14 rem: am Handy (375 px) steht der Eintrag unter dem Tag statt in einer schmalen Spalte daneben — dort brach
   ein Titel über vier Zeilen um (Abnahme Schritt 10); ab dem Tablet daneben. */
.naechster-eintrag { flex: 1 1 14rem; min-width: 0; margin: 0; padding: 0; list-style: none; }

/* Ein Eintrag als Zeile (Tagesliste, Als Nächstes). Der Titel nimmt den Platz bis zum ✕ und bricht in sich um — sonst
   rutschte das ✕ allein in eine Zeile (Rundgang 13c). Die Frist als Link ist 44 px hoch. */
.kalendereintrag { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; padding: 0.2rem 0; font-size: 0.9rem; }
.kalendereintrag > .unterzeile { flex-basis: 100%; padding-left: 1.2rem; }
.kalendereintrag > a { display: inline-flex; align-items: center; min-height: var(--tippflaeche); }
/* Basis 5 rem: bei 320 px passen Form, Uhrzeit, Titel und ✕ (44 px) in eine Zeile — mit 8 rem rutschte das ✕ darunter
   (Abnahme Schritt 10); der Titel wächst trotzdem in den ganzen freien Platz. */
.eintrag-text { flex: 1 1 5rem; min-width: 0; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
/* R4 B3: ein Termin öffnet seine Ansicht (Berater) — im Wochenraster liegt der Link über dem ganzen Block
   (`.termin-oeffnen`, der Block ist `position: relative`); der Videocall-Link steht bei Berater und Kundin hinter dem Titel. */
.termin-oeffnen { position: absolute; inset: 0; border-radius: inherit; }
.termin-oeffnen:focus-visible { outline: 2px solid var(--wolke); outline-offset: 1px; }
.termin-block:has(.termin-oeffnen:hover) .termin-titel { text-decoration: underline; }
.eintrag-video { flex: 0 0 auto; white-space: nowrap; }
.eintrag-weg { margin-left: auto; }
.eintrag-weg .knopf { padding: 0; }

/* Chip: ein Eintrag im Raster — vorn die Form, dann Uhrzeit und Titel in einer Zeile (abgeschnitten, ganz in der
   Tagesliste), darunter beim Berater der Kunde. Ein Link zum Tag: 44 px hoch. */
.chip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: var(--tippflaeche);
  padding: 0.2rem 0.35rem;
  border: 0 solid transparent;
  border-left-width: 3px;
  border-radius: 0.5rem;
  color: var(--tinte);
  font-size: 0.8rem;
  line-height: 1.3;
  text-decoration: none;
}
.chip:hover { box-shadow: var(--schatten-pille); }
.chip:focus-visible { outline: 2px solid var(--wolke); outline-offset: 1px; }
/* Block und Bezugsrahmen: sonst schnitte `overflow` nichts ab, und ein Wort für Vorleser (.unsichtbar, absolut) stünde
   am Ende des langen Titels rechts außerhalb des Bildschirms (Abnahme Schritt 10: 1024/1280, Sonntag, Frist-Chip). */
.chip-zeile, .chip-kunde { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Chipzeile (Nachbesserung, Befund 1): Form, „!", Titel, Uhrzeit — der Titel behält mindestens 2,5 rem und kürzt
   sich mit „…"; reicht die Zeile nicht für die Uhrzeit, bricht sie in eine zweite Zeile um, die max-height verbirgt
   (für Vorleser bleibt sie im Text, der volle Wortlaut steht in title). Vorher stand die Uhrzeit vorn — bei 82 px
   Spalte (Tablet) blieb vom Titel nichts: „■ 08:3…". */
.chip-zeile { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25rem; max-height: 1.3em; }
.chip-zeile > * { flex: none; }
.chip-zeile > .chip-titel { position: relative; flex: 1 1 0; min-width: min(2.5rem, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .zeitpunkt, .termin-block .zeitpunkt { font-weight: 650; }
.chip-kunde { display: block; color: var(--tinte-leise); font-size: 0.72rem; }
.chip-warnung { margin-left: 0.15rem; color: var(--achtung); font-weight: 800; }
.chip-frist, .legende-frist { background: var(--achtung-flaeche); border-color: var(--achtung-hell); }
.chip-termin, .legende-termin { background: var(--kapitel); border-color: var(--wolke-linie); }
.chip-ereignis, .legende-ereignis { background: var(--papier); border-color: var(--linie-kraeftig); border-style: dashed; }
.chip-ereignis { border-width: 1px 1px 1px 3px; }
.chip-belegt, .legende-belegt { background: var(--papier-leise); border-color: var(--linie-kraeftig); color: var(--tinte-leise); }
.kalendereintrag-belegt { color: var(--tinte-leise); }

/* Die Tagesliste (Handy; breit nur der geöffnete Tag). */
.kalender-tag {
  margin: 0 0 0.6rem;
  padding: 0.6rem var(--rand);
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund-mittel);
  scroll-margin-top: 5rem;                 /* unter der festen Kopfleiste */
}
.kalender-tag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
.kalender-datum { margin: 0 auto 0 0; font-size: 0.95rem; }
.kalender-heute-wort { margin-left: 0.3rem; color: var(--wolke-tief); font-size: var(--stufe-klein); font-weight: 650; }
.kalender-tag .liste { margin: 0; }
.kalender-frei { margin: 0; color: var(--tinte-leise); font-size: 0.9rem; }
.tag-neu { display: inline-flex; align-items: center; min-height: var(--tippflaeche); font-size: 0.85rem; font-weight: 600; }
.tag-schliessen { display: none; }
.kalender-monat, .kalender-woche { display: none; }

/* Die Monatsübersicht fürs Handy (R2-7, kern/vorlagen/_monatskarte.html): sieben gleich breite Spalten, jede Zelle eine
   Tippfläche von 44 px Höhe mit der Tageszahl und darunter den Formen der Einträge. Ab 40 rem Fläche entfällt sie —
   dort steht das Monatsraster. Bei 375 px bleiben je Tag (375 − 32) / 7 = 49 px Breite; bei 320 px sind es 39 px —
   die eine benannte Ausnahme der Tippflächen (DESIGN.md 5, WCAG 2.5.8: mindestens 24 px, sieben Tage in einer Reihe).
   Nur Tage mit Einträgen sind fett lila, vergangene leise; die Formen 13 px (Kleinpunkt 1 aus Schritt 5). */
.monatskarte {
  width: 100%;
  margin: 0 0 var(--abstand);
  padding: 0.35rem;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
.monatskarte th { padding: 0.3rem 0 0.1rem; color: var(--tinte-leise); font-size: 0.75rem; font-weight: 700; text-align: center; }
.monatskarte td { padding: 0; text-align: center; vertical-align: top; }
.monatskarte a, .monatskarte .karte-tag {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: var(--tippflaeche); padding: 0.2rem 0 0.25rem; border-radius: var(--rund-klein); color: var(--tinte); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.monatskarte a { color: var(--tinte); font-weight: 400; }
.monatskarte .karte-voll a { color: var(--wolke-tief); font-weight: 700; }
.monatskarte .karte-vergangen a, .monatskarte .karte-vergangen .karte-tag { color: var(--tinte-leise); font-weight: 400; }
.monatskarte a:focus-visible { outline: 2px solid var(--wolke); outline-offset: -2px; }
.monatskarte .karte-heute .karte-zahl { display: inline-block; min-width: 1.6rem; border-radius: var(--rund-pille); background: var(--wolke); color: var(--papier); }
.karte-formen { display: flex; gap: 0.15rem; min-height: 1.1rem; font-size: 0.8rem; line-height: 1.35; }

/* Das Raster, ab 40 rem Fläche. Die Container-Abfrage misst den Inhalt OHNE den Seitenrand (2 × 1,5 rem) — daher 37 rem:
   Das ist die Fläche 40 rem, wie DESIGN.md 7.8 sie misst (bei 768 px 40,75 rem Fläche, 37,75 rem Inhalt). Gemessen bei
   768 px: je Tag 82 px im Monat, 74 px in der Woche (Nachbesserung Schritt 10, Befund 3). */
@container (min-width: 37rem) {
  .monatskarte { display: none; }
  .kalender-monat, .kalender-woche { display: block; }
  .kalender-tag { display: none; }
  .kalender-tag:target { display: block; margin: 0 0 var(--abstand); background: var(--glas-stark); box-shadow: var(--schatten); }
  .tag-schliessen { display: inline-flex; }
  .kalender-naechste-oben { display: none; }
  .kalender-naechste-kurz { display: block; }
  .kalender-sprung {
    display: inline-flex; position: absolute; align-items: center; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .kalender-sprung:focus-visible {
    position: static; width: auto; height: auto; min-height: var(--tippflaeche); margin: 0 0 0.5rem; padding: 0 1rem;
    overflow: visible; clip-path: none; border-radius: var(--rund-pille); background: var(--papier); font-weight: 650;
  }
}

/* Schmale Monatsspalten (Seite unter 60 rem: Tablet, 1024 px, 1280 px mit fester Leiste — je Tag 82 bis 113 px): Die
   Uhrzeit neben dem Titel hatte keinen Platz und verschwand. Hier steht sie in der zweiten Zeile, und der Kundenname
   entfällt (Runde 3, A22 und Vorgemerkt S10) — für Vorleser bleibt er im Text, der volle Wortlaut in title. Ab 60 rem
   Seite (1680 px, 1280 px mit zugeklappter Leiste) wieder wie vorher: Uhrzeit hinter dem Titel, darunter der Kunde —
   die Weiche dazu steht am Ende der Datei (nach den Nachrichten). */
.monat-tag .chip-zeile { max-height: 2.6em; }
.monat-tag .chip-zeile > .zeitpunkt { flex-basis: 100%; }
.monat-tag .chip-kunde { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Monat: Tageszahl oben links, heute im lila Kreis (Weiß auf --wolke 6,0:1), vergangene Tage leise; die freie Fläche
   eines Tages ist beim Berater der Link „Eintrag an diesem Tag" (Chips und „+ n weitere" liegen darüber). */
.monat-wochentage, .monat-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.monat-wochentage { margin: 0 0 0.3rem; color: var(--tinte-leise); font-size: var(--stufe-klein); font-weight: 650; }
.monat-wochentage span { padding: 0 0.5rem; }
.monat-raster { margin: 0 0 var(--abstand); padding: 0; list-style: none; }
.monat-tag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.3rem 0.25rem;
  border-radius: var(--rund-klein);
  background: var(--glas-stark);
}
.monat-tag-fremd { background: var(--glas-leicht); }
/* Randtage der Nachbarmonate zeigen ihre Einträge leise (Befund 7): Text --tinte-leise (auf jeder Chip-Fläche ≥ 4,5:1). */
.monat-tag-fremd .chip { color: var(--tinte-leise); }
.tag-nummer {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-width: 1.75rem; height: 1.75rem; padding: 0 0.3rem; border-radius: var(--rund-pille);
  color: var(--tinte); font-size: 0.85rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.monat-tag-vergangen .tag-nummer, .monat-tag-fremd .tag-nummer { color: var(--tinte-leise); font-weight: 500; }
.monat-tag-heute .tag-nummer { background: var(--wolke); color: var(--papier); }
.tag-flaeche { position: absolute; inset: 0; min-height: var(--tippflaeche); border-radius: inherit; }
.tag-flaeche:hover { box-shadow: inset 0 0 0 1px var(--wolke-linie); }
.tag-flaeche:hover::after { content: "+"; position: absolute; top: 0.3rem; right: 0.55rem; color: var(--wolke-tief); font-weight: 700; }
.tag-flaeche:focus-visible { outline: 2px solid var(--wolke); outline-offset: -2px; }
.tag-weitere {
  position: relative; z-index: 1; display: flex; align-items: center; min-height: var(--tippflaeche); padding: 0 0.45rem;
  border-radius: 0.5rem; color: var(--wolke-tief); font-size: 0.8rem; font-weight: 650; text-decoration: none;
}
.tag-weitere:hover { background: var(--wolke-flaeche); }

/* Woche: Kopf je Tag, „ganztägig", darunter 07–21 Uhr in 28 halben Stunden zu 1,5 rem. Jede Stunde (zwei Zeilen, 48 px)
   ist beim Berater ein Link zum Formular; die Termine liegen darüber, nebeneinander in bis zu drei Spuren (sechs
   Spalten je Tag). Ein Termin vor 07:00 oder ab 21:00 gestrichelt, mit echter Uhrzeit. */
.woche-raster { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin: 0 0 var(--abstand); }
.woche-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; min-width: 0; min-height: var(--tippflaeche);
  padding: 0.25rem 0.5rem; border-radius: var(--rund-klein); color: var(--tinte); font-size: 0.85rem; font-weight: 650;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.woche-kopf:hover { background: var(--glas-stark); }
.woche-kopf-vergangen { color: var(--tinte-leise); }
.woche-kopf-tag { white-space: nowrap; }
.woche-kopf-heute .woche-kopf-tag { padding: 0.1rem 0.5rem; border-radius: var(--rund-pille); background: var(--wolke); color: var(--papier); }
.woche-mehr { color: var(--wolke-tief); font-size: 0.75rem; }
.woche-ganztag-name { align-self: start; padding-top: 0.5rem; color: var(--tinte-leise); font-size: var(--stufe-mini); text-align: right; }
.woche-ganztag { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; min-height: 2.75rem; padding: 0.2rem; border-radius: var(--rund-klein); background: var(--glas-leicht); }
.woche-achse, .woche-zeiten { display: grid; grid-template-rows: repeat(28, 1.5rem); }
/* Die Uhrzeit sitzt mittig AUF ihrer Stundenlinie: nur so hoch wie der Text (`align-self: start`), dann um die halbe
   Texthöhe nach oben — über zwei Zeilen gestreckt, stünde sie 24 px darüber, eine halbe Stunde zu früh (Abnahme
   Schritt 10). */
.woche-achse span { grid-column: 1; align-self: start; padding-right: 0.35rem; color: var(--tinte-leise); font-size: var(--stufe-mini); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.woche-zeiten { grid-template-columns: repeat(40, minmax(0, 1fr)); overflow: hidden; border-radius: var(--rund-klein); background: var(--glas-stark); container: tag / inline-size; }
.woche-zeiten-heute { background: var(--papier); }
.woche-stunde { grid-column: 1 / -1; border-top: 1px solid var(--linie); }
.woche-stunde:first-child { border-top: 0; }
a.woche-stunde:hover { background: var(--wolke-flaeche); }
/* Ein Termin wie bei Google (Nachbesserung Schritt 10, Befund 1): vorn der Titel, dahinter „■ Uhrzeit" als unteilbare
   Einheit, darunter der Kunde. Der Titel bricht in Wörtern um (Trennung nach Silben, lang="de") und endet mit „…",
   nie hart mitten im Wort. Was ein kurzer Block nicht zeigt, bleibt für Vorleser im Text (optisch versteckt wie
   .unsichtbar, nicht display: none); der volle Wortlaut steht zudem in title. */
.termin-block {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; margin: 1px 2px;
  padding: 0.05rem 0.25rem; overflow: hidden; border-left: 3px solid var(--wolke-linie); border-radius: 0.4rem;
  background: var(--kapitel); color: var(--tinte); font-size: 0.72rem; line-height: 1.25;
}
.termin-titel {
  display: -webkit-box; flex: none; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-weight: 650; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5;
}
/* Anderthalb Stunden (72 px, vier Zeilen Platz): Titel in einer Zeile — sonst schoben „–11:30" und die Kundenzeile über den
   Rand und standen angeschnitten da (Runde 3, Vorgemerkt S10). Titel, „■ Beginn", Ende, Kunde passen auch in einer
   schmalen Spur. */
.termin-block.dauer-3 .termin-titel { -webkit-line-clamp: 1; }
.termin-block.dauer-4 .termin-titel { -webkit-line-clamp: 3; }
.termin-block:not(.dauer-1):not(.dauer-2):not(.dauer-3):not(.dauer-4) .termin-titel { -webkit-line-clamp: 4; }
/* „■ Beginn" unteilbar; das Ende „–11:30" rückt in die nächste Zeile, wenn die Spur schmal ist (vorher abgeschnitten). */
.termin-zeit { display: flex; flex: none; flex-wrap: wrap; }
.termin-beginn, .termin-bis { white-space: nowrap; }
.termin-block .zeitpunkt { font-weight: 500; }
.termin-block .chip-kunde { flex: none; font-size: 0.68rem; }
.termin-block .zeichen-termin { font-size: 0.8rem; }        /* die Form mindestens 12,8 px, wie überall im Kalender */
/* Runde 5, R10b: belegt im eigenen Kalender — grau gestrichelt, hinter den Terminen des Portals. */
.termin-block.termin-belegt { z-index: 0; border-left: 3px dashed var(--linie-kraeftig); background: var(--papier-leise);
  color: var(--tinte-leise); }
.termin-block.termin-belegt .zeichen-termin { color: var(--tinte-leise); }
.termin-block.termin-belegt .zeichen-termin::before { content: "▨"; }
/* Kurze Blöcke (eine halbe und eine ganze Stunde, 24 bzw. 48 px): Titel und Beginn in EINER Zeile, wie bei Google — der
   Titel kürzt sich mit „…", der Beginn bleibt ganz; das Ende nur für Vorleser, in der halben Stunde auch der Kunde. Die
   Form ■ entfällt hier (bei 95 px Spalte blieben dem Titel sonst zwei Buchstaben): Im Stundenraster steht nur ein
   Termin, die Lage sagt es; im ganztägigen Streifen und überall sonst bleibt die Form vorn (DESIGN.md 2). */
.termin-block.dauer-1, .termin-block.dauer-2 { flex-flow: row wrap; align-content: flex-start; align-items: baseline; column-gap: 0.3rem; }
/* Der Titel behält mindestens 2,5 rem; reicht die Spur nicht für beide (überlappend, Tablet), rückt der Beginn in die
   zweite Zeile — in der halben Stunde ist er dann nur noch in title und für Vorleser da, der Titel bleibt lesbar. */
.termin-block.dauer-1 .termin-titel, .termin-block.dauer-2 .termin-titel {
  display: block; flex: 1 1 0; min-width: min(2.5rem, 100%); text-overflow: ellipsis; white-space: nowrap;
}
.termin-block.dauer-2 .chip-kunde { flex-basis: 100%; }
/* In der halben Stunde (eine Zeile) schiebt der große Zeilenabstand einen umgebrochenen Beginn ganz aus dem Block —
   sonst stand seine obere Hälfte angeschnitten unter dem Titel (Tablet, gemessen bei 768 px). */
.termin-block.dauer-1 { row-gap: 2rem; }
.termin-block.dauer-1 .zeichen-termin, .termin-block.dauer-2 .zeichen-termin { display: none; }
.termin-block.dauer-1 .termin-bis, .termin-block.dauer-2 .termin-bis, .termin-block.dauer-1 .chip-kunde {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.termin-ausserhalb { outline: 1px dashed var(--tinte-leise); outline-offset: -1px; }
/* Die Lage im Raster — nur über diese Klassen (die CSP erlaubt kein style=; kern/kalenderbild.py `klassen`). */
.platz-0 { grid-row-start: 1; } .platz-1 { grid-row-start: 2; } .platz-2 { grid-row-start: 3; } .platz-3 { grid-row-start: 4; }
.platz-4 { grid-row-start: 5; } .platz-5 { grid-row-start: 6; } .platz-6 { grid-row-start: 7; } .platz-7 { grid-row-start: 8; }
.platz-8 { grid-row-start: 9; } .platz-9 { grid-row-start: 10; } .platz-10 { grid-row-start: 11; } .platz-11 { grid-row-start: 12; }
.platz-12 { grid-row-start: 13; } .platz-13 { grid-row-start: 14; } .platz-14 { grid-row-start: 15; } .platz-15 { grid-row-start: 16; }
.platz-16 { grid-row-start: 17; } .platz-17 { grid-row-start: 18; } .platz-18 { grid-row-start: 19; } .platz-19 { grid-row-start: 20; }
.platz-20 { grid-row-start: 21; } .platz-21 { grid-row-start: 22; } .platz-22 { grid-row-start: 23; } .platz-23 { grid-row-start: 24; }
.platz-24 { grid-row-start: 25; } .platz-25 { grid-row-start: 26; } .platz-26 { grid-row-start: 27; } .platz-27 { grid-row-start: 28; }
.dauer-1 { grid-row-end: span 1; } .dauer-2 { grid-row-end: span 2; } .dauer-3 { grid-row-end: span 3; } .dauer-4 { grid-row-end: span 4; }
.dauer-5 { grid-row-end: span 5; } .dauer-6 { grid-row-end: span 6; } .dauer-7 { grid-row-end: span 7; } .dauer-8 { grid-row-end: span 8; }
.dauer-9 { grid-row-end: span 9; } .dauer-10 { grid-row-end: span 10; } .dauer-11 { grid-row-end: span 11; } .dauer-12 { grid-row-end: span 12; }
.dauer-13 { grid-row-end: span 13; } .dauer-14 { grid-row-end: span 14; } .dauer-15 { grid-row-end: span 15; } .dauer-16 { grid-row-end: span 16; }
.dauer-17 { grid-row-end: span 17; } .dauer-18 { grid-row-end: span 18; } .dauer-19 { grid-row-end: span 19; } .dauer-20 { grid-row-end: span 20; }
.dauer-21 { grid-row-end: span 21; } .dauer-22 { grid-row-end: span 22; } .dauer-23 { grid-row-end: span 23; } .dauer-24 { grid-row-end: span 24; }
.dauer-25 { grid-row-end: span 25; } .dauer-26 { grid-row-end: span 26; } .dauer-27 { grid-row-end: span 27; } .dauer-28 { grid-row-end: span 28; }
/* Überschneidungen wie bei Google überlappend (Befund 1): jede weitere Spur eingerückt und darübergelegt, mit einem
   hellen Rand zur Trennung, jeder Block mindestens 65 % breit. Der Tag hat 40 Spalten (2,5 %): zu zweit 30 % eingerückt
   (70 % breit), zu dritt 17,5 % und 35 % (82,5 % bzw. 65 % breit) — mehr Einzug ließe den dritten schmaler als 65 %. */
.spur-0-von-1 { grid-column: 1 / -1; } .spur-0-von-2 { grid-column: 1 / -1; } .spur-0-von-3 { grid-column: 1 / -1; }
.spur-1-von-2 { grid-column: 13 / -1; z-index: 2; } .spur-1-von-3 { grid-column: 8 / -1; z-index: 2; } .spur-2-von-3 { grid-column: 15 / -1; z-index: 3; }
.spur-1-von-2, .spur-1-von-3, .spur-2-von-3 { box-shadow: 0 0 0 1px var(--papier); }
/* Gleicher Beginn wie bei Google nebeneinander (Runde 3, A14; kern/kalenderbild.py `neben_klasse`): die Termine derselben
   halben Stunde teilen sich die Breite zu gleichen Teilen — ab dem linken Rand, oder eingerückt, wenn ein früherer, langer
   Termin darunter liegt: dann erst ab 35 % (der Lage von Spur 2 von 3), damit vom langen Termin links so viel frei bleibt wie
   ein Nachbar breit ist und sein Titel lesbar bleibt (vorher ab 17,5 % — zwei kurze Termine um 16 Uhr deckten ihn bis auf
   einen Streifen zu; Feinschliff Runde 3). Steht nach den Spuren und ersetzt deren Lage. */
.neben-0-von-2 { grid-column: 1 / span 20; } .neben-1-von-2 { grid-column: 21 / -1; z-index: 2; }
.neben-0-von-3 { grid-column: 1 / span 13; } .neben-1-von-3 { grid-column: 14 / span 13; z-index: 2; } .neben-2-von-3 { grid-column: 27 / -1; z-index: 3; }
.neben-0-von-2-eingerueckt { grid-column: 15 / span 13; z-index: 2; } .neben-1-von-2-eingerueckt { grid-column: 28 / -1; z-index: 3; }
/* Nebeneinander ist ein Block schmal (die Hälfte eines Tages: 32 px bei 768, 45 px bei 1280 px mit fester Leiste) — vorher
   stand „■ 15:(" angeschnitten da (Prüfung Runde 3, Schritt 1, SOLL 2). Darum hier ohne die Form ■ (die Lage im Raster sagt
   „Termin", wie in den kurzen Blöcken) und mit schmalerem Rand, und Beginn und Ende stehen **ganz oder gar nicht**: Der
   Block misst sich selbst (`container-type`); reicht seine Breite nicht für „15:00" (33,5 px) bzw. „–16:00" (40,5 px),
   tritt die Angabe zurück — in title und für Vorleser bleibt sie, der Titel bleibt sichtbar (wie in der halben Stunde).
   So zeigt 1024 und 1280 px den Beginn, 768 px nur die Titel. Gemessen im echten Chrome: tour-browser.mjs
   „kalender_nebeneinander_…". */
.termin-neben { container-type: inline-size; margin: 1px; padding: 0.05rem 0.15rem; border-left-width: 2px; }
.termin-neben .zeichen-termin { display: none; }
@container (width < 2.25rem) {
  .termin-neben .termin-beginn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (width < 2.75rem) {
  .termin-neben .termin-bis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Übereinander statt nebeneinander (Runde 3, R2; Daniel 29.09.2026: „zu schmal für nebeneinander — übereinander in der
   Reihenfolge des Beginns"): Ist der Tag schmal (`container: tag` — zu zweit unter 5,5 rem: gemessen 74 px bei 768 px, 97 bzw. 105 px
   bei 1280 und 1024 px bleiben nebeneinander; zu dritt unter 9 rem: nur 1680 px, 154 px, bleibt nebeneinander), stehen Termine gleichen Beginns in voller Breite untereinander, der früheste oben (kern/kalenderbild.py
   `_stapel`: Reihenfolge des Beginns); gemeinsam belegen sie die Zeilen der längsten, wenigstens eine je Termin
   (`stapel-dauer-D`). Übereinander steht nur der Titel (eine Zeile); Beginn, Ende und Kunde bleiben für Vorleser und in
   title — die Reihenfolge zeigt, was zuerst kommt. Breit bleibt es nebeneinander (A14). */
@container tag (width < 5.5rem) {
  .stapel-0-von-2 .termin-titel, .stapel-1-von-2 .termin-titel, .stapel-0-von-2-eingerueckt .termin-titel, .stapel-1-von-2-eingerueckt .termin-titel { -webkit-line-clamp: 1; }
  .stapel-0-von-2 .termin-beginn, .stapel-0-von-2 .termin-bis, .stapel-0-von-2 .chip-kunde, .stapel-1-von-2 .termin-beginn, .stapel-1-von-2 .termin-bis, .stapel-1-von-2 .chip-kunde, .stapel-0-von-2-eingerueckt .termin-beginn, .stapel-0-von-2-eingerueckt .termin-bis, .stapel-0-von-2-eingerueckt .chip-kunde, .stapel-1-von-2-eingerueckt .termin-beginn, .stapel-1-von-2-eingerueckt .termin-bis, .stapel-1-von-2-eingerueckt .chip-kunde { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stapel-0-von-2, .stapel-1-von-2 { grid-column: 1 / -1; height: calc(50% - 2px); }
  .stapel-0-von-2-eingerueckt, .stapel-1-von-2-eingerueckt { grid-column: 15 / -1; height: calc(50% - 2px); }
  .stapel-0-von-2, .stapel-0-von-2-eingerueckt { align-self: start; }
  .stapel-1-von-2, .stapel-1-von-2-eingerueckt { align-self: end; }
  .stapel-dauer-1 { grid-row-end: span 1; } .stapel-dauer-2 { grid-row-end: span 2; } .stapel-dauer-3 { grid-row-end: span 3; } .stapel-dauer-4 { grid-row-end: span 4; }
  .stapel-dauer-5 { grid-row-end: span 5; } .stapel-dauer-6 { grid-row-end: span 6; } .stapel-dauer-7 { grid-row-end: span 7; } .stapel-dauer-8 { grid-row-end: span 8; }
  .stapel-dauer-9 { grid-row-end: span 9; } .stapel-dauer-10 { grid-row-end: span 10; } .stapel-dauer-11 { grid-row-end: span 11; } .stapel-dauer-12 { grid-row-end: span 12; }
  .stapel-dauer-13 { grid-row-end: span 13; } .stapel-dauer-14 { grid-row-end: span 14; } .stapel-dauer-15 { grid-row-end: span 15; } .stapel-dauer-16 { grid-row-end: span 16; }
  .stapel-dauer-17 { grid-row-end: span 17; } .stapel-dauer-18 { grid-row-end: span 18; } .stapel-dauer-19 { grid-row-end: span 19; } .stapel-dauer-20 { grid-row-end: span 20; }
  .stapel-dauer-21 { grid-row-end: span 21; } .stapel-dauer-22 { grid-row-end: span 22; } .stapel-dauer-23 { grid-row-end: span 23; } .stapel-dauer-24 { grid-row-end: span 24; }
  .stapel-dauer-25 { grid-row-end: span 25; } .stapel-dauer-26 { grid-row-end: span 26; } .stapel-dauer-27 { grid-row-end: span 27; } .stapel-dauer-28 { grid-row-end: span 28; }
}
@container tag (width < 9rem) {
  .stapel-0-von-3 .termin-titel, .stapel-1-von-3 .termin-titel, .stapel-2-von-3 .termin-titel { -webkit-line-clamp: 1; }
  .stapel-0-von-3 .termin-beginn, .stapel-0-von-3 .termin-bis, .stapel-0-von-3 .chip-kunde, .stapel-1-von-3 .termin-beginn, .stapel-1-von-3 .termin-bis, .stapel-1-von-3 .chip-kunde, .stapel-2-von-3 .termin-beginn, .stapel-2-von-3 .termin-bis, .stapel-2-von-3 .chip-kunde { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stapel-0-von-3, .stapel-1-von-3, .stapel-2-von-3 { grid-column: 1 / -1; height: calc(33.333% - 2px); }
  .stapel-0-von-3 { align-self: start; }
  .stapel-1-von-3 { align-self: center; }
  .stapel-2-von-3 { align-self: end; }
  .stapel-dauer-1 { grid-row-end: span 1; } .stapel-dauer-2 { grid-row-end: span 2; } .stapel-dauer-3 { grid-row-end: span 3; } .stapel-dauer-4 { grid-row-end: span 4; }
  .stapel-dauer-5 { grid-row-end: span 5; } .stapel-dauer-6 { grid-row-end: span 6; } .stapel-dauer-7 { grid-row-end: span 7; } .stapel-dauer-8 { grid-row-end: span 8; }
  .stapel-dauer-9 { grid-row-end: span 9; } .stapel-dauer-10 { grid-row-end: span 10; } .stapel-dauer-11 { grid-row-end: span 11; } .stapel-dauer-12 { grid-row-end: span 12; }
  .stapel-dauer-13 { grid-row-end: span 13; } .stapel-dauer-14 { grid-row-end: span 14; } .stapel-dauer-15 { grid-row-end: span 15; } .stapel-dauer-16 { grid-row-end: span 16; }
  .stapel-dauer-17 { grid-row-end: span 17; } .stapel-dauer-18 { grid-row-end: span 18; } .stapel-dauer-19 { grid-row-end: span 19; } .stapel-dauer-20 { grid-row-end: span 20; }
  .stapel-dauer-21 { grid-row-end: span 21; } .stapel-dauer-22 { grid-row-end: span 22; } .stapel-dauer-23 { grid-row-end: span 23; } .stapel-dauer-24 { grid-row-end: span 24; }
  .stapel-dauer-25 { grid-row-end: span 25; } .stapel-dauer-26 { grid-row-end: span 26; } .stapel-dauer-27 { grid-row-end: span 27; } .stapel-dauer-28 { grid-row-end: span 28; }
}

/* --- Meldungen: Fehler Orange mit „!", Bestätigung und Hinweis ruhig lila mit „✓" (DESIGN.md 2) --------------- */

.meldung, .hinweis {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rund-mittel);
  font-size: 0.9rem;
  color: var(--tinte);
}
.meldung { border: 1px solid var(--achtung-linie); background: var(--achtung-flaeche); }
.meldung::before { content: "! "; font-weight: 800; color: var(--achtung); }
.hinweis { border: 1px solid var(--kapitel-tief); background: var(--hinweis-flaeche); }
.hinweis-erfolg::before { content: "✓ "; font-weight: 800; color: var(--wolke-tief); }

/* --- Leerzustand: freundlich, mit Symbol und einem Satz ------------------------------------
   <p class="leer"><svg class="symbol leer-symbol">…</svg>Satz</p> — ohne eigenes Symbol die Welle „≈". */

.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 1.5rem var(--rand) 1.35rem;
  border: 1px dashed var(--wolke-linie);
  border-radius: var(--rund-mittel);
  background: var(--glas-leicht);
  color: var(--tinte-leise);
  font-size: 0.925rem;
  text-align: center;
}
.leer::before, .leer-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border-radius: 50%;
  background: var(--wolke-flaeche);
  color: var(--wolke-tief);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.leer > :last-child { margin-bottom: 0; }
/* Der Link im Leerzustand („Alle anzeigen", „Zu den Listen") steht im Flex-Behälter als eigener Kasten, nicht im
   Fließtext: Tippfläche 44 px (Nachbesserung 2, N2 — vorher 23 px). */
.leer a { display: inline-flex; align-items: center; min-height: var(--tippflaeche); font-weight: 600; }
.leer p { margin: 0; }
li.leer { border-bottom: 1px dashed var(--wolke-linie); }

/* --- Ladezustand: ein Balken statt eines Kreisels, still bei reduzierter Bewegung ----------- */

.laedt { position: relative; }
.laedt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 3px;
  border-radius: var(--rund-pille);
  background: var(--wolke);
  animation: laufband 1.1s ease-in-out infinite;
}
[aria-busy="true"] { cursor: progress; }
@keyframes laufband {
  0% { transform: translateX(0); }
  50% { transform: translateX(233%); }
  100% { transform: translateX(0); }
}
.ladehinweis { color: var(--tinte-leise); font-size: 0.875rem; }

/* --- Fotos zu einem PDF (kamera-pdf.js, DESIGN.md 7.3) ------------------------------------ */

.kamera-pdf { margin: 0 0 1rem; }
.fotoleiste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}
/* Über dem Foto rollt die Seite wie überall; gezogen wird nur am Griff ⠿. */
.foto {
  position: relative;
  overflow: hidden;
  background: var(--papier);
  border: 1px solid var(--wolke-linie-leise);
  border-radius: var(--rund-mittel);
  -webkit-user-select: none;
  user-select: none;
}
.foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--papier-leise); }
.foto-nummer {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--rund-pille);
  background: var(--tinte);
  color: var(--papier);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.foto-griff, .foto-weg {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  border: 1px solid var(--wolke-linie);
  border-radius: 50%;
  background: var(--glas-stark);
  color: var(--tinte);
}
.foto-weg { top: 0.25rem; right: 0.25rem; }
.foto-griff { right: 0.25rem; bottom: calc(var(--tippflaeche) + 0.35rem); font-size: 1.2rem; cursor: grab; touch-action: none; }
.foto-knoepfe { display: flex; gap: 1px; }
.foto-knoepfe .knopf { flex: 1 1 0; min-width: var(--tippflaeche); padding: 0; border-radius: 0; box-shadow: none; }
/* ◂ beim ersten und ▸ beim letzten Foto sind abgeschaltet (disabled) und sehen so aus: blass auf grauer Fläche,
   ohne Rahmenfarbe (Abnahme Schritt 9, Fund F). Ein abgeschalteter Knopf braucht keinen Kontrast (WCAG 1.4.3). */
.foto-knoepfe .knopf:disabled { border-color: var(--linie); background: var(--papier-leise); opacity: 0.4; }
.kamera-rueckgaengig { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.foto-gezogen { opacity: 0.5; }
.foto-ziel { outline: 2px dashed var(--wolke); outline-offset: 2px; }
.kamera-pdf-zusammenfassung { font-size: 0.875rem; color: var(--tinte-leise); }

/* --- Sprachnachricht (sprache.js, DESIGN.md 7.5) ------------------------------------------ */

.sprachknopf {
  flex: none;
  width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sprachknopf[aria-pressed="true"] { background: var(--wolke); color: var(--papier); }
.aufnahme {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-height: var(--tippflaeche);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--wolke-linie);
  border-radius: var(--rund-pille);
  background: var(--wolke-flaeche);
  font-size: 0.9rem;
}
.aufnahme-punkt::before { content: "●"; color: var(--wolke-tief); }
.aufnahme-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.aufnahme-grenze { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.aufnahme-hilfe { flex: 1 1 8rem; color: var(--tinte-leise); }
.aufnahme-verwerfen .aufnahme-hilfe { color: var(--achtung); font-weight: 700; }

.sprachnachricht {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  margin: 0.35rem 0;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: var(--rund-pille);
  background: var(--wolke-flaeche);
}
.sprachnachricht audio { width: 100%; }
.sprachnachricht-spielen { border-radius: 50%; padding: 0; }
.sprachnachricht-lauf { flex: 1 1 auto; min-width: 4rem; accent-color: var(--wolke); }
.sprachnachricht-zeit { flex: none; min-width: 2.6rem; font-size: 0.85rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* --- Nachrichten wie Slack (faeden.js, DESIGN.md 7.5; Runde 2, Schritt 8) --------------------
   Jede Nachricht wie im Chat: Kürzel-Bild, darüber Name, Rolle und Uhrzeit in einer Blase. Fremde links auf Glas, eigene
   rechts auf Weiß mit lila Kante und „Sie" — die Farbe trägt die Unterscheidung nie allein. Der Berater hat ein Kürzel in
   Nacht (die Farbe der Symbolleiste), Kundenpersonen in Lila. „neu" ist ein lila Balken an der Blase und ein Abzeichen,
   nie die ganze Fläche (sonst sähe „neu" aus wie „eigen"). Tagestrenner als leise Pille zwischen zwei Linien.
   Die Spalten hängen an der Inhaltsfläche (@container der .seite), nicht am Bildschirm — siehe unten. */

.faeden { display: grid; gap: var(--abstand); }
.faeden > * { min-width: 0; }
/* Handy: der geöffnete Thread ist eine eigene Seite, der Hauptverlauf tritt zurück. */
.faeden[data-faden-offen] > .faeden-verlauf { display: none; }
.faeden-verlauf, .faeden-thread {
  padding: 0.5rem var(--rand) 0;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
.verlauf { margin: 0; padding: 0.25rem 0; list-style: none; }
.nachricht {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.35rem 0;
  /* Ein Sprung auf #n-… (nach dem Senden) landet unter der Kopfleiste und über Antwortfeld und unterer Leiste. */
  scroll-margin-top: 5rem;
  scroll-margin-bottom: calc(var(--navigation-hoehe) + 8rem);
}
.nachricht-kuerzel { width: 2rem; height: 2rem; margin-top: 0.15rem; font-size: 0.75rem; }
.kuerzel-berater { background-color: var(--nacht); background-image: linear-gradient(140deg, var(--nacht-hell), var(--nacht)); }
.nachricht-blase {
  min-width: 0;
  max-width: min(38rem, calc(100% - 2.55rem));
  padding: 0.45rem 0.8rem 0.55rem;
  border: 1px solid var(--glas-rand);
  border-radius: 0.3rem var(--rund-mittel) var(--rund-mittel) var(--rund-mittel);
  background: var(--glas-stark);
  box-shadow: var(--schatten-pille);
}
.nachricht-eigen { flex-direction: row-reverse; }
.nachricht-eigen .nachricht-blase {
  border-color: var(--wolke-linie);
  border-radius: var(--rund-mittel) 0.3rem var(--rund-mittel) var(--rund-mittel);
  background: var(--papier);
}
.nachricht-eigen .nachricht-kopf { justify-content: flex-end; }
.nachricht-eigen .nachricht-wer { color: var(--wolke-tief); }
.nachricht-neu .nachricht-blase { border-left: 3px solid var(--wolke); }
.nachricht-kopf { display: flex; align-items: baseline; gap: 0.2rem 0.45rem; flex-wrap: wrap; font-size: 0.8125rem; line-height: 1.35; }
.nachricht-wer { font-weight: 700; color: var(--tinte); }
.nachricht-rolle { color: var(--tinte-leise); font-weight: 600; }
.nachricht-rolle::before { content: "· "; font-weight: 400; }
.nachricht-wann { color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.nachricht-neu-marke { min-height: 1.25rem; }
.nachricht-text { margin: 0.2rem 0 0; white-space: pre-line; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.nachricht-blase .sprachnachricht { margin-top: 0.35rem; }
.nachricht-blase > form { margin: 0.25rem 0 0; }
.tagestrenner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.35rem;
  color: var(--tinte-leise);
  font-size: var(--stufe-klein);
  font-weight: 650;
}
.tagestrenner::before, .tagestrenner::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--linie-kraeftig); }
.tagestrenner span { padding: 0.15rem 0.7rem; border: 1px solid var(--linie); border-radius: var(--rund-pille); background: var(--glas-stark); }
/* In einer schmalen Spalte rückt „1 neue Antwort" in die nächste Zeile, statt aus der Blase zu ragen (Berater, 768 px mit
   offenem Thread; Runde 3, S8). */
.antworten-verweis {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  max-width: 100%;
  min-height: var(--tippflaeche);
  margin-bottom: -0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.antworten-verweis[aria-current="true"] { text-decoration: underline; }
.faden-kopf { padding-bottom: 0.5rem; border-bottom: 1px solid var(--linie); }
.faden-kopf h2 { margin: 0; }
.faden-kopf h2 .unterzeile { display: inline; font-weight: 400; }
/* „✕ Thread schließen“ (faeden.js) gilt nur für die rechte Spalte, also nebeneinander. Gestapelt ist der Thread eine
   eigene Seite mit „← Nachrichten“ bzw. „← Threads“ — ein zweiter Rückweg darüber wäre doppelt (Abnahme Schritt 9, D). */
.faeden-thread [data-faden-schliessen] { display: none; }

/* Der Raum der Beratermaske: Kunden · Threads · Verlauf. Gestapelt (Handy) steht je Stufe eine Spalte; von der Kundenspalte
   bleibt außerhalb der Stufe „kunden" nur die Überschrift. */
.raum-kunden {
  padding: 0.75rem;
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
.raum-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0 0.25rem 0.5rem; }
.raum-kopf h1 { margin: 0; }
.raum-suche { flex: 1 1 12rem; max-width: 22rem; }
.raum-suche .feld { margin: 0; }
.raum-kundenliste { margin: 0; padding: 0; list-style: none; }
.raum-kundenliste > .leer { margin: 0.25rem; }
.raum-kunde {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--rund-mittel);
  color: var(--tinte);
  text-decoration: none;
}
.raum-kunde:hover { background: var(--glas-stark); }
.raum-kunde[aria-current] { background: var(--papier); box-shadow: var(--schatten-pille); }
/* Die Vorschau auf /berater/nachrichten/ ist keine Wahl: hervorgehoben nur, wo ihre Threads daneben stehen (unten). */
.raum-kunde[aria-current="page"] .raum-kunde-name { color: var(--wolke-tief); }
.raum-kunde-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.raum-kunde-name { display: -webkit-box; overflow: hidden; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.raum-kunde-ungelesen .raum-kunde-name { font-weight: 750; }
.raum-kunde-zeit { overflow: hidden; color: var(--tinte-leise); font-size: var(--stufe-klein); text-overflow: ellipsis; white-space: nowrap; }
.raum-kunde .zaehler, .raum-kunde .abzeichen { flex: none; }
.kuerzel-leise { background: var(--papier-leise); background-image: none; color: var(--wolke-tief); }
.raum-abgesetzt { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--linie); }
.raum-spaltenkopf { margin-bottom: 0.25rem; padding: 0.25rem 0 0.6rem; border-bottom: 1px solid var(--linie); }
.raum-titel { display: flex; align-items: center; gap: 0.75rem; }
.raum-titel-text { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0 1rem; min-width: 0; }
.raum-titel h2 { flex: 1 1 12rem; min-width: 0; margin: 0; }
.raum-zum-kunden { display: inline-flex; flex: none; align-items: center; gap: 0.3rem; min-height: var(--tippflaeche); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.raum[data-raum-stufe="kunden"] > .raum-faeden, .raum[data-raum-stufe="kunden"] > .raum-verlauf { display: none; }
.raum:not([data-raum-stufe="kunden"]) > .raum-kunden { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
.raum:not([data-raum-stufe="kunden"]) .raum-kundenliste, .raum:not([data-raum-stufe="kunden"]) .raum-suche { display: none; }

/* Ein langer Titel („Körperschaftsteuerbescheid") bricht in der Pille um, statt über die Blase hinauszuragen — gemessen bei
   der Kundin mit offenem Thread bei 768 px (Runde 3, S8). */
.anhang a { display: inline-flex; align-items: center; min-width: 0; min-height: var(--tippflaeche); overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.anhaenge { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.anhang {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 0.3rem;
  min-height: var(--tippflaeche);
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--wolke-linie);
  border-radius: var(--rund-pille);
  background: var(--papier);
  font-size: 0.85rem;
}

.antwortfeld {
  position: sticky;
  bottom: calc((var(--navigation-hoehe) + 1.25rem) * var(--navigation-da) + env(safe-area-inset-bottom));
  margin: var(--abstand) calc(-1 * var(--rand)) 0;
  padding: 0.6rem var(--rand);
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border-top: 1px solid var(--linie);
  border-radius: 0 0 var(--rund) var(--rund);
}
.antwortfeld-zeile { display: flex; align-items: flex-end; gap: 0.5rem; }
.antwortfeld-zeile .feld { flex: 1 1 auto; margin: 0; }
.antwortfeld textarea { min-height: var(--tippflaeche); max-height: 12rem; resize: none; border-radius: 1.375rem; }
/* Wie WhatsApp: leeres Feld zeigt das Mikrofon, geschriebener Text den Sendeknopf. */
.antwortfeld[data-leer="ja"] [data-senden-text] { display: none; }
.antwortfeld[data-leer="nein"] .sprachknopf { display: none; }
/* Tastatur am Handy (Nachbesserung Schritt 8, Befund 4): Solange ein Antwortfeld den Fokus hat, tritt die untere
   Navigation weg — über der Bildschirmtastatur bliebe sonst kaum Verlauf. Das Feld rückt an den unteren Rand
   (`--navigation-da: 0`: `bottom` und der Innenabstand der Seite rechnen ohne die Leiste, ihre Höhe
   `--navigation-hoehe` bleibt unberührt). Ab 48 rem ist die
   Navigation die Symbolleiste und bleibt (unten). Nur Stil, kein Skript, kein Inline-Stil (CSP). Am echten iPhone
   nachsehen (DESIGN.md 7.5): Safari schiebt die Seite über die Tastatur, statt das Fenster zu verkleinern. */
@supports selector(:has(*)) {
  body:has(.antwortfeld:focus-within) .navigation { display: none; }
  body:has(.antwortfeld:focus-within) { --navigation-da: 0; }
}

.anhang-wahl { margin: 0.35rem 0 0; font-size: 0.9rem; }
.anhang-wahl > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippflaeche);
  color: var(--wolke-tief);
  font-weight: 600;
  cursor: pointer;
}
.anhang-wahl ul { max-height: 14rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.anhang-wahl label { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tippflaeche); }
.anhang-wahl input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--wolke); }

/* --- Vorschau (vorschau.js, DESIGN.md 7.4a): eine Unterlage groß im Tab ----------------------
   Als Überlagerung (<dialog>) füllt sie das ganze Fenster — auf dem Handy wie am Laptop; der Inhalt steht
   mittig, höchstens 72 rem breit. Glas über dem abgedunkelten Grund, die Seiten als weißes Blatt. */

/* Solange die Überlagerung offen ist, steht die Seite dahinter still (Nachbesserung 2 Schritt 4): kein Rollen, kein
   durchschimmernder Rollbalken. `position: fixed` am body hält auch Safari auf dem iPhone fest (overflow allein nicht);
   vorschau.js setzt `top` auf die alte Rollposition (kein Sprung) und gibt sie beim Schließen zurück. Die Rinne des
   Rollbalkens bleibt reserviert (`scrollbar-gutter: stable`), sonst rückte die Seite am Laptop beim Öffnen nach rechts. */
html { scrollbar-gutter: stable; }
.vorschau-offen, .vorschau-offen body { overflow: hidden; }
.vorschau-offen body { position: fixed; left: 0; right: 0; width: 100%; }
.vorschau-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  width: 100dvw;          /* das Fenster, nicht die Seite — auch wenn eine Seite einmal zu breit geriete */
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--glas-fest);
  color: var(--tinte);
  overflow: hidden;
}
.vorschau-dialog::backdrop { background: var(--nacht); opacity: 0.4; }
.vorschau-dialog[open] { display: flex; flex-direction: column; }
.vorschau-dialog > .vorschau-hinweis { margin: var(--rand); }
.vorschau-dialog > .vorschau {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem var(--rand) calc(0.5rem + env(safe-area-inset-bottom));
}
.vorschau-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; }
.vorschau-titelzeile { flex: 1 1 14rem; min-width: 0; }
.vorschau-titelzeile .beschriftung { min-height: 0; }
.vorschau-titel { display: inline; margin: 0; font-size: 1.2rem; }
.vorschau-titelzeile .unterzeile { margin: 0.15rem 0 0; color: var(--tinte-leise); font-size: 0.875rem; }
.vorschau-knoepfe { display: flex; flex: 0 0 auto; gap: 0.5rem; }
.vorschau-fassungen .reiter { margin: 0.5rem 0 0; }
.vorschau-flaeche { flex: 1 1 auto; min-height: 0; margin-top: 0.6rem; overflow: auto; border-radius: var(--rund); }
.vorschau-flaeche:focus-visible { outline: 3px solid var(--wolke); outline-offset: -3px; }
.vorschau-seiten { padding: 0.6rem; background: var(--linie-kraeftig); }
/* Auf der Seite „Ansehen“ rollt die Fläche selbst, sobald das Skript Seiten zeichnet — ohne Skript steht nur der Hinweis da. */
.seite .vorschau-seiten-bereit { height: 75vh; min-height: 20rem; }
.vorschau-seite {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto 0.6rem;
  background: var(--papier);
  border-radius: 0.25rem;
  box-shadow: var(--schatten);
}
.vorschau-seite:last-child { margin-bottom: 0; }
.vorschau-seite canvas { display: block; width: 100%; height: 100%; }
/* Bild, Hinweis (Word, Excel, HEIC), gesperrt: mittig im freien Raum statt oben mit Leere darunter. Mit `margin: auto`
   statt `align-items: center`, damit ein Bild, das größer ist als die Fläche, oben nicht unerreichbar abgeschnitten wird. */
.vorschau-flaeche:not(.vorschau-seiten) { display: flex; flex-direction: column; }
.vorschau-flaeche:not(.vorschau-seiten) > * { margin: auto; }
.vorschau-flaeche:not(.vorschau-seiten) > .vorschau-hinweis,
.vorschau-flaeche:not(.vorschau-seiten) > .meldung,
.vorschau-flaeche:not(.vorschau-seiten) > .hinweis { width: 100%; max-width: 40rem; }
.vorschau-bild { display: block; max-width: 100%; height: auto; background: var(--papier); border-radius: var(--rund-klein); }
.vorschau-dialog .vorschau-bild { max-height: 100%; object-fit: contain; }
.vorschau-blaettern { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-top: 0.5rem; }
.vorschau-seitenzahl { min-width: 8rem; color: var(--tinte-leise); font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: center; }
.vorschau-hinweis { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--kapitel-tief); border-radius: var(--rund-mittel); background: var(--papier); }

@media (min-width: 46rem) {
  .vorschau-titel { font-size: 1.35rem; }
  .vorschau-dialog > .vorschau { padding-top: 1rem; }
}

/* Handy quer (niedrig und breit): Kopf, Fassungen und Blättern flacher — ein Kopf in einer Zeile, die Reiter der
   Fassungen rechts daneben, damit die Seite den Platz bekommt (gemessen 27.09.2026 bei 844 × 390: vorher 202 px). */
@media (orientation: landscape) and (max-height: 32rem) {
  .vorschau-dialog > .vorschau {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding-top: 0.25rem;
    padding-left: max(var(--rand), env(safe-area-inset-left));
    padding-right: max(var(--rand), env(safe-area-inset-right));
  }
  .vorschau-dialog .vorschau-kopf { grid-column: 1; grid-row: 1; flex-wrap: nowrap; align-items: center; }
  .vorschau-dialog .vorschau-fassungen { grid-column: 2; grid-row: 1; align-self: center; }
  .vorschau-dialog .vorschau-fassungen .reiter { margin: 0; }
  .vorschau-dialog .vorschau-flaeche { grid-column: 1 / -1; grid-row: 2; margin-top: 0.25rem; }
  .vorschau-dialog .vorschau-blaettern { grid-column: 1 / -1; grid-row: 3; padding-top: 0.25rem; }
  .vorschau-dialog .vorschau-titel { font-size: 1rem; }
  .vorschau-dialog .vorschau-titelzeile .unterzeile { margin: 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Breiter Inhalt: ab 46 rem (Spalten) — die Nachrichten hängen an der Fläche, siehe unten ------------------ */

@media (min-width: 46rem) {
  .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .knopf-breit, .knopf-abmelden { display: inline-flex; width: auto; }
  .seitenkopf > .knopf-stark { flex: none; }
}

/* --- Nachrichten nebeneinander: an der Inhaltsfläche (@container der .seite), nicht am Bildschirm ------------------
   Ab 37 rem Inhalt (die Abfrage misst ohne den Seitenrand; das Tablet hochkant hat 37,6 rem) stehen Hauptverlauf und
   Thread nebeneinander — bei der Kundin wie bisher, in der Beratermaske die Threads und der Verlauf, darüber die Kunden als
   wischbare Pillenzeile (die Zwischenstufe, auch am Laptop mit fester Leiste: 1280 px = 48,6 rem). Ab 60 rem Inhalt stehen
   beim Berater alle drei Spalten nebeneinander (1680 px = 73,6 rem, 1280 px mit eingeklappter Leiste = 68 rem).
   faeden.js fragt die Eigenschaft `--faeden-nebeneinander` ab, nicht den Bildschirm — so passen Skript und Stil immer
   zusammen (vorher `(min-width: 46rem)`: bei 1280 px mit Leiste hätte das Skript die Spalte gefüllt, die zu schmal war).
   Die Spalten des Raums sind Scheiben in Fensterhöhe wie bei Slack: Kopf, der Verlauf rollt in sich, das Antwortfeld
   unten; `--raum-ueber` ist der Platz darüber und darunter (Seitenrand, Pillenzeile). */

@container seite (min-width: 37rem) {
  .faeden { --faeden-nebeneinander: 1; }
  /* Der Thread nimmt 26 rem, aber nie mehr als die Hälfte — bei 768 px blieben dem Verlauf sonst 170 px. */
  .faeden[data-faden-offen] { grid-template-columns: minmax(0, 1fr) min(26rem, 50%); align-items: start; }
  /* Beide Spalten sind Scheiben in Fensterhöhe wie im Raum des Beraters: Kopf, der Verlauf rollt in sich, das Antwortfeld
     unten — die Seite selbst rollt nicht mit (Runde 3, Vorgemerkt S8, „Doppel-Rollen der Kundin breit": vorher rollte die
     Seite mit dem Hauptverlauf und daneben die Thread-Spalte für sich, zwei Rollflächen nebeneinander). Der Raum des
     Beraters setzt seine Höhe unten selbst (`--raum-ueber`). */
  .faeden > .faeden-verlauf, .faeden > .faeden-thread:where(:not([hidden])) {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--faeden-ueber) - var(--raum-zusatz));
    min-height: 26rem;
    overflow: hidden;
  }
  .faeden[data-faden-offen] > .faeden-verlauf { display: flex; }
  .faeden .faden-kopf, .faeden .antwortfeld, .faeden > .faeden-verlauf > .leer { flex: none; }
  .faeden .verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: calc(-0.5 * var(--rand)); padding-right: calc(0.5 * var(--rand)); }
  .faeden .antwortfeld { position: static; margin-top: 0; }
  .faeden-thread [data-faden-schliessen] { display: inline-flex; }
  .faeden-thread .faden-kopf .zurueck { display: none; }

  .raum { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .raum > .raum-kunden, .raum:not([data-raum-stufe="kunden"]) > .raum-kunden {
    grid-column: 1 / -1;
    padding: 0.6rem 0.75rem;
    background: var(--glas);
    -webkit-backdrop-filter: var(--glas-filter);
    backdrop-filter: var(--glas-filter);
    border: 1px solid var(--glas-rand);
    box-shadow: var(--schatten);
  }
  .raum-kopf { padding-bottom: 0.4rem; }
  .raum .raum-suche, .raum:not([data-raum-stufe="kunden"]) .raum-suche { display: block; }
  .raum .raum-kundenliste, .raum:not([data-raum-stufe="kunden"]) .raum-kundenliste {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 0.15rem 0.1rem 0.35rem;
  }
  .raum-kundenliste > li { flex: none; }
  .raum-kundenliste .raum-kunde {
    min-height: var(--tippflaeche);
    padding: 0.2rem 0.75rem 0.2rem 0.25rem;
    border: 1px solid var(--glas-rand);
    border-radius: var(--rund-pille);
    background: var(--glas-stark);
  }
  .raum-kundenliste .raum-kunde .kuerzel { width: 2rem; height: 2rem; font-size: 0.75rem; }
  .raum-kundenliste .raum-kunde-name { display: block; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .raum-kundenliste .raum-kunde-zeit { display: none; }
  .raum-kundenliste .raum-kunde[aria-current], .raum-kundenliste .raum-kunde-vorschau { border-color: var(--wolke); background: var(--papier); }
  .raum-kundenliste .raum-abgesetzt { margin: 0 0 0 0.35rem; padding: 0 0 0 0.75rem; border-top: 0; border-left: 1px solid var(--linie-kraeftig); }
  .raum[data-raum-stufe] > .raum-faeden { display: flex; }
  .raum-zurueck { display: none; }
  .raum > .raum-faeden, .raum > .raum-verlauf {
    position: sticky;
    top: 1rem;
    flex-direction: column;
    height: calc(100dvh - var(--raum-ueber) - var(--raum-zusatz));
    min-height: 26rem;
    max-height: none;
    overflow: hidden;
  }
  .raum > .raum-verlauf:not([hidden]) { display: flex; }
  .raum-spaltenkopf, .raum > .raum-faeden > .leer { flex: none; }
}

@container seite (min-width: 60rem) {
  .raum { --raum-ueber: 7rem; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); }
  .raum.faeden[data-faden-offen] { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) minmax(20rem, 27rem); }
  .raum > .raum-kunden, .raum:not([data-raum-stufe="kunden"]) > .raum-kunden {
    grid-column: auto;
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--raum-ueber) - var(--raum-zusatz));
    min-height: 26rem;
    padding: 0.75rem 0.5rem;
  }
  .raum-kopf { flex-direction: column; align-items: stretch; padding: 0.25rem 0.35rem 0.6rem; }
  .raum .raum-suche { max-width: none; flex: none; }
  .raum .raum-kundenliste, .raum:not([data-raum-stufe="kunden"]) .raum-kundenliste {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
  }
  .raum-kundenliste .raum-kunde { min-height: 3.5rem; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--rund-mittel); background: none; }
  .raum-kundenliste .raum-kunde:hover { background: var(--glas-stark); }
  .raum-kundenliste .raum-kunde[aria-current], .raum-kundenliste .raum-kunde-vorschau { background: var(--papier); box-shadow: var(--schatten-pille); }
  .raum-kundenliste .raum-kunde .kuerzel { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
  .raum-kundenliste .raum-kunde-name { display: -webkit-box; max-width: none; white-space: normal; }
  .raum-kundenliste .raum-kunde-zeit { display: block; }
  .raum-kundenliste > li + li { margin-top: 0.15rem; }
  .raum-kundenliste .raum-abgesetzt { margin: 0.35rem 0 0; padding: 0.35rem 0 0; border-left: 0; border-top: 1px solid var(--linie); }
}


/* --- Gerüst: Tablet ab 48 rem — links die schmale dunkle Symbolleiste, die helle Leiste als Schublade ------------ */

@media (min-width: 48rem) {
  :root { --raum-zusatz: 0rem; }

  .geruest {
    display: grid;
    grid-template-columns: var(--schiene) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 1rem;
  }
  .kopfleiste { display: none; }

  /* Die Symbolleiste: eine dunkle Kapsel, oben die Welle als Zeichen, darunter die Bereiche, unten Leiste und Mehr. */
  .navigation {
    position: sticky;
    top: 1rem;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: var(--schiene);
    height: calc(100vh - 2rem);
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
    scrollbar-width: none;
    background: var(--nacht);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: var(--rund-gross);
    box-shadow: var(--schatten-hoch);
  }
  .navigation ul { flex-direction: column; flex-wrap: nowrap; gap: 0.4rem; width: 100%; }
  .navigation li { flex: none; }
  .navigation a, .nav-marke, .nav-unten a, .nav-unten button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    min-height: 3rem;
    height: 3rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--rund-mittel);
    background: var(--nacht);
    color: var(--auf-nacht-leise);
    box-shadow: none;
    cursor: pointer;
  }
  .navigation a:hover, .nav-unten button:hover { background: var(--nacht-hell); color: var(--auf-nacht); }
  .navigation a[aria-current="page"] { background: var(--wolke); color: var(--papier); box-shadow: var(--schatten-lila); }
  .navigation .nav-marke { display: flex; flex: none; margin-bottom: 0.4rem; background: var(--nacht-hell); color: var(--auf-nacht); font-size: 1.35rem; font-weight: 800; text-decoration: none; }
  .navigation .nav-unten { display: flex; flex: none; flex-direction: column; gap: 0.4rem; width: 100%; margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--nacht-hell); }
  .navigation .nav-nur-breit { display: block; }
  .navigation .nav-tour-huelle { flex: none; width: 100%; margin-bottom: 0.4rem; }
  .nav-zeichen { height: auto; }
  .nav-zeichen .symbol { width: 1.35rem; height: 1.35rem; }
  .nav-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Der Zähler sitzt als kleine Kapsel an der Ecke des Symbols — ein Wort gibt es hier nicht, das er verdecken könnte;
     sein Platz ist fest, die Leiste wandert nicht, wenn er geht. */
  .navigation .zaehler { position: absolute; top: 0.1rem; right: 0.05rem; height: 1.15rem; min-width: 1.15rem; padding: 0 0.3rem; font-size: 0.625rem; box-shadow: 0 0 0 2px var(--nacht); }
  .navigation a[aria-current="page"] .zaehler { background: var(--papier); color: var(--wolke-tief); box-shadow: 0 0 0 2px var(--wolke); }

  /* Die Schublade neben der Symbolleiste. */
  .leiste {
    top: 1rem;
    bottom: 1rem;
    left: calc(var(--schiene) + 1.5rem);
    width: var(--leiste);
    border: 1px solid var(--glas-rand);
    border-radius: var(--rund-gross);
    transform: translateX(-1rem);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .geruest[data-leiste-offen] .leiste { transform: none; opacity: 1; transition: transform 0.2s ease, opacity 0.2s ease; }

  /* Die feste Leiste der Verwaltung (ohne Skript, SICHERHEIT.md 6): Am Tablet gibt es keine Schublade — die Leiste steht
     als flache Glasfläche über dem Inhalt. So sind Meldungen und Posteingang ohne Skript erreichbar (Nachbesserung
     Schritt 6, Befund 2). Kompakt (Nachbesserung 2, N5): nur „Meldungen" und „Postfach" mit ihren Zählern, in zwei
     Spalten; der Kopf mit der Person und der Abschnitt „Verwaltung" entfallen hier — die Symbolleiste zeigt Protokoll und
     Mehr schon (vorher 367 px hoch über dem Inhalt). */
  .geruest-fest .navigation { grid-row: 1 / span 2; }
  .geruest-fest .leiste {
    position: static;
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    width: auto;
    padding: 0.5rem 0.75rem;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    background: var(--glas);
    box-shadow: var(--schatten);
  }
  .geruest-fest .leiste-kopf, .geruest-fest .leiste-abschnitt-schiene { display: none; }
  .geruest-fest .leiste-abschnitt { border-top: 0; padding-top: 0; }
  .geruest-fest .leiste-titel { margin-top: 0.25rem; }
  .geruest-fest .leiste-text { overflow-wrap: normal; white-space: nowrap; }
  .geruest-fest .seite { grid-column: 2; }

  .seite {
    min-width: 0;
    min-height: calc(100vh - 2rem);
    margin: 0;
    padding: 1.5rem 1.5rem 2.5rem;
    background: var(--glas-leicht);
    border: 1px solid var(--glas-rand);
    border-radius: var(--rund-gross);
  }
  .antwortfeld { margin-right: calc(-1 * var(--rand)); margin-left: calc(-1 * var(--rand)); }
  body:has(.antwortfeld:focus-within) .navigation { display: flex; }   /* die Symbolleiste bleibt (Befund 4 nur am Handy) */
}

/* --- Gerüst: Laptop — die helle Leiste steht fest daneben (Berater und Kunde ab 80 rem, Verwaltung ab 64 rem) ------- */
/* Berater und Kunde: Zwischen 64 und 80 rem (Laptop 1024 px) bleibt die helle Leiste eine Schublade wie am Tablet — auf
   jeder Seite gleich (Nachbesserung 2 Schritt 7, B-N1). Fest daneben nahm sie bei 1024 px 296 px der Breite: Die Fläche
   blieb 32 rem, das Dashboard wurde 7,9 Bildschirmhöhen hoch (zwei Spalten zu je 15 rem halfen nicht: 7,87), und die
   frühere Sonderregel (nur das Dashboard startete eingeklappt) ließ die Leiste zwischen Übersicht und Kalender springen.
   Die Verwaltung bleibt ohne Skript, also ohne Schublade: Ihre Leiste steht ab 64 rem fest (SICHERHEIT.md 6). */

@media (min-width: 64rem) {
  .geruest-fest { grid-template-columns: var(--schiene) var(--leiste) minmax(0, 1fr); max-width: calc(90rem + var(--schiene) + var(--leiste) + 4rem); margin: 0 auto; }
  .geruest-fest .navigation { grid-row: auto; }
  .geruest-fest .leiste {
    position: sticky; top: 1rem; bottom: auto; left: auto; z-index: 1; grid-column: auto;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0.25rem; height: calc(100vh - 2rem);
    padding: 1rem 0.75rem; overflow-y: auto;
  }
  .geruest-fest .leiste-kopf { display: flex; flex: none; padding-bottom: 0.75rem; }
  .geruest-fest .leiste-abschnitt, .geruest-fest .leiste-abschnitt-schiene { display: block; flex: none; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
  .geruest-fest .leiste-titel { margin-top: 0; }
  .geruest-fest .leiste-text { overflow-wrap: anywhere; white-space: normal; }
  .geruest-fest .seite { grid-column: auto; }
  /* Der breitere Rand der Seite nimmt den Spalten der Nachrichten 1 rem Höhe (Runde 3, S8 — gemessen: mit 13,5 rem rollte die
     Seite beim Berater bei 768 px 22 px, bei 1024 und 1280 px 38 px mit, neben seinen Spalten; tour-browser.mjs). */
  .seite { padding: 2rem 2.25rem 3rem; --faeden-ueber: 9.75rem; --raum-ueber: 15.875rem; }
  .reiter a { padding: 0 0.6rem; font-size: 0.85rem; }   /* die acht Reiter des Kundendetails passen ab 1280 px in eine Kapsel */
}

@media (min-width: 80rem) {
  /* Sehr breit steht das ganze Gerüst mittig — gleiche Ränder links und rechts (Nachbesserung Schritt 6, 1920 px). */
  .geruest { grid-template-columns: var(--schiene) var(--leiste) minmax(0, 1fr); max-width: calc(90rem + var(--schiene) + var(--leiste) + 4rem); margin: 0 auto; }
  .geruest[data-leiste-zu] { max-width: calc(90rem + var(--schiene) + 3rem); }
  .geruest[data-leiste-zu] { grid-template-columns: var(--schiene) minmax(0, 1fr); }
  .geruest[data-leiste-zu] .leiste { display: none; }
  .geruest[data-leiste-offen]::after { display: none; }
  .leiste {
    position: sticky;
    top: 1rem;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: auto;
    height: calc(100vh - 2rem);
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    background: var(--glas);
    box-shadow: var(--schatten);
  }
}

/* --- Die Willkommenstour (tour.js; DESIGN.md 9; doku/BAUSTEINE.md 9) --------------------------------------------
   Ein modales <dialog> über der ganzen Fläche (oberste Ebene, der Rest der Seite inert), selbst durchsichtig. Darin der
   Rahmen genau auf dem Rechteck des Ziels — tour.js misst es in jedem Bild und setzt nur --tour-x/-y/-b/-h — und die
   Blase. Der Schleier ist der Schatten des Rahmens (ein Loch über dem Ziel); ohne Ziel (mittig) trägt ihn ::backdrop.
   KEIN Übergang auf translate, width, height des Rahmens oder der Blase: Er liefe beim Rollen hinterher (Prüfstand). */
dialog.tour {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tinte);
  overflow: hidden;
}
dialog.tour::backdrop { background: transparent; }
dialog.tour[data-tour-mittig]::backdrop { background: var(--tour-schleier); }
.tour-rahmen {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--tour-b);
  height: var(--tour-h);
  translate: var(--tour-x) var(--tour-y);
  pointer-events: none;
}
/* Ring und Schleier sitzen am Schein um den Rahmen (6 px Luft ums Ziel): Der Rahmen selbst bleibt genau das Ziel. */
.tour-rahmen::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--rund-mittel);
  box-shadow: 0 0 0 3px var(--wolke), 0 0 0 9px var(--tour-schein), 0 0 0 100vmax var(--tour-schleier);
}
dialog.tour[data-tour-mittig] .tour-rahmen { display: none; }
/* Das gezeigte Ziel (tour.js setzt data-tour-aktiv): beim Hineinrollen Luft für Kopfleiste und Ring oben, für die Blase
   unten — eine lange Liste beginnt dann sichtbar unter der Kopfleiste. */
[data-tour-aktiv] { scroll-margin: 6rem 1rem 14rem; }
/* Die Blase: am Handy eine Leiste über die ganze Breite (unten oder oben, je nachdem, wo das Ziel nicht ist), ab 48 rem
   eine Karte neben dem Ziel. Nie höher als das Fenster — dann rollt sie in sich. */
.tour-blase {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  translate: var(--tour-blase-x) var(--tour-blase-y);
  /* Handy zuerst — kleine Handys (unter 24 rem, 320 und 375 px): kompakt, damit die Blase weniger vom Ziel verdeckt.
     Die Kopfzeile trägt nur den Zähler; „Tour beenden", Zurück und Weiter stehen unten in EINER Zeile; der Text eine
     Stufe kleiner. Jede Tippfläche bleibt 44 px (--tippflaeche; gemessen in tour-browser.mjs); passen die drei Knöpfe
     nicht in eine Zeile (große Schrift), brechen sie um, statt zu schrumpfen. Ab 24 rem wie vorher. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  padding: 0.6rem 0.75rem 0.7rem;
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-filter);
  backdrop-filter: var(--glas-filter);
  border: 1px solid var(--glas-rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten-hoch);
  animation: tour-ein 0.18s ease-out;
}
@keyframes tour-ein { from { opacity: 0; } to { opacity: 1; } }
.tour-kopf, .tour-knoepfe { display: contents; }
.tour-zaehler { flex: 0 0 100%; order: 1; margin: 0; color: var(--tinte-leise); font-size: var(--stufe-klein); font-weight: 600; font-variant-numeric: tabular-nums; }
.tour-ende { flex: 0 0 auto; order: 7; margin-top: 0.4rem; padding-inline: 0.6rem; font-size: var(--stufe-klein); }
/* Wie weit der Rundgang ist: eine feine lila Linie — die Länge setzt tour.js über --tour-fortschritt (0 bis 1). */
.tour-fortschritt { flex: 0 0 100%; order: 2; height: 3px; margin: 0.35rem 0 0.55rem; border-radius: var(--rund-pille); background: var(--wolke-linie-leise); overflow: hidden; }
.tour-fortschritt span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--wolke); transform-origin: left; transform: scaleX(var(--tour-fortschritt)); }
.tour-titel { flex: 0 0 100%; order: 3; margin: 0 0 0.2rem; font-family: var(--schrift-anzeige); font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.tour-titel:focus { outline: none; }
.tour-text, .tour-hinweis { flex: 0 0 100%; margin: 0 0 0.2rem; font-size: 0.9375rem; line-height: 1.4; }
.tour-text { order: 4; }
.tour-hinweis { order: 5; color: var(--tinte-leise); }
.tour-links { flex: 0 0 100%; order: 6; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.2rem; padding: 0; list-style: none; }
.tour-knoepfe .knopf { flex: 1 0 auto; margin-top: 0.4rem; padding-inline: 0.6rem; }
.tour-knoepfe [data-tour-zurueck] { order: 8; }
.tour-knoepfe [data-tour-weiter] { order: 9; }
/* Ab 24 rem (ab dem größeren Handy): die Kopfzeile mit Zähler und „Tour beenden", Zurück und Weiter unten, der Text in der
   Grundgröße. Diese Weiche trägt nur die Blase der Tour (Prüfstand stil.test.mjs, weiche24Befunde). */
@media (min-width: 24rem) {
  .tour-blase { display: block; padding: 0.85rem 1.1rem 1rem; }
  .tour-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: -0.25rem -0.6rem 0 0; }
  .tour-zaehler { flex: 0 1 auto; }
  .tour-ende { margin-top: 0; padding-inline: 0.75rem; }
  .tour-fortschritt { margin: 0.15rem 0 0.8rem; }
  .tour-titel { margin: 0 0 0.35rem; font-size: 1.2rem; }
  .tour-text, .tour-hinweis { margin: 0 0 0.75rem; font-size: inherit; line-height: inherit; }
  .tour-links { margin: 0 0 0.9rem; }
  .tour-knoepfe { display: flex; justify-content: space-between; gap: 0.5rem; }
  .tour-knoepfe .knopf { flex: 1 1 0; margin-top: 0; padding-inline: 1.125rem; }
}
@media (min-width: 48rem) {
  .tour-blase { width: min(24rem, calc(100vw - 16px)); }
  .tour-knoepfe .knopf { flex: 0 0 auto; min-width: 7rem; }
}

/* --- Ohne backdrop-filter: feste Flächen statt Glas, damit Text nie auf durchscheinendem Grund steht --------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .karte, .kachel, .kopfleiste, .navigation, .leiste, .reiter, .faeden-verlauf, .faeden-thread, .raum-kunden, .antwortfeld, .wartung, .tour-blase { background: var(--glas-fest); }
  .karte .karte, .tabelle tbody td, .tabelle tbody th { background: var(--papier); }
}

/* --- Bewegung und Druck ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  a.kachel:hover { transform: none; }
}

/* --- Der Vertrag als Blatt (Runde 4, R4-3; kern/vorlagen/_vertragstext.html, DESIGN.md 7.12) ----------------------------
   Briefkopf mit Logo, der Vorbehalt als leise lila Fläche, Titel mit kurzem Strich, die Vertragsparteien als eingerückter
   Block, je Paragraf Überschrift in Lila und die Sätze darunter — gleichmäßige Abstände, kein harter Umbruch im Satz. */
.vertragsblatt { max-width: 42rem; color: var(--tinte); font-size: 0.95rem; line-height: 1.6; overflow-wrap: break-word; }
.vertragsblatt p { margin: 0; }
.vertragsblatt-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem;
  margin-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.vertragsblatt-logo { display: block; width: 7.5rem; height: auto; }
.vertrag-vorbehalt { padding: 0.55rem 0.8rem; border-left: 3px solid var(--wolke); border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  background: var(--wolke-flaeche); color: var(--tinte-leise); font-size: var(--stufe-klein); line-height: 1.5; }
.vertragsblatt .vertrag-titel { margin: 1.5rem 0 1.25rem; font-family: var(--schrift-anzeige); font-size: 1.35rem; font-weight: 650;
  letter-spacing: -0.01em; line-height: 1.3; }
.vertrag-titel::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-top: 0.6rem; background: var(--wolke); }
.vertrag-parteien { display: grid; gap: 0.2rem; margin: 0 0 1.5rem; padding-left: 1rem; border-left: 2px solid var(--linie); }
.vertragsblatt .vertrag-bindewort { color: var(--tinte-leise); font-size: var(--stufe-klein); }
.vertrag-paragraf { margin: 0 0 1.1rem; }
.vertragsblatt .vertrag-paragraf-kopf { margin-bottom: 0.25rem; color: var(--wolke-tief); font-weight: 650; }
.vertrag-paragraf p + p { margin-top: 0.3rem; }
.vertragsblatt .vertrag-absatz { margin: 0 0 1.1rem; }

/* Druckkopf und -fuß (Runde 4, R4-2; kern/vorlagen/_druckkopf.html, _druckfuss.html) — nur auf Papier. */
.druckkopf, .druckfuss { display: none; }

@media print {
  /* Kein Seitenrand für den Browser: Chrome und Safari haben dann keinen Platz für ihre Kopf- und Fußzeile (Datum, Titel,
     Adresse, Seitenzahl). Den Rand macht der Innenabstand des Körpers — `box-decoration-break: clone` wiederholt ihn auf
     jedem Blatt, nicht nur oben auf dem ersten und unten auf dem letzten. Unten bleibt Platz für den Fuß. */
  @page { size: A4; margin: 0; }
  body { padding: 14mm 16mm 18mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--papier);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .navigation, .kopfleiste, .leiste, .knopf, .antwortfeld, .zurueck, .erklaerung, .tour, [data-tour-dialog],
  .nicht-drucken { display: none !important; }
  /* Runde 9 (Daniel, A15): eine Seite mit Druckkopf nennt den Kunden dort — der Kopf der Kundenakte (Name, Umfang, North Data)
     und der schwebende Knopf „Frage an Ihren Berater" stehen nicht auf dem Blatt (der Knopf kam als eigenes leeres Blatt). */
  body:has(.druckkopf) .kunde-kopf, body:has(.druckkopf) .reiter-huelle, .frage-knopf { display: none !important; }
  .geruest { display: block; padding: 0; }
  .seite { max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .karte { margin: 0 0 5mm; padding: 0; border: 0; background: none; box-shadow: none; }
  .druckkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; margin: 0 0 7mm; padding-bottom: 3mm;
    border-bottom: 0.3mm solid var(--linie-kraeftig); break-after: avoid; }
  .druckkopf-logo { display: block; width: 36mm; height: auto; }
  .druckkopf-text { display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; text-align: right; }
  .druckkopf-titel { font-family: var(--schrift-anzeige); font-size: 12pt; font-weight: 650; color: var(--tinte); }
  .druckkopf-zusatz { font-size: 8.5pt; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
  .druckfuss { display: block; position: fixed; left: 16mm; right: 16mm; bottom: 7mm; margin: 0; padding-top: 2mm;
    border-top: 0.3mm solid var(--linie); color: var(--tinte-leise); font-size: 7.5pt; }
  /* Kennzahlen: ein Raster in der Blattbreite, feste Größe, die sicher in den Kasten passt; gerade Rahmen (der Akzent der Rechner-
     Kacheln als Streifen innen links: beratung.css). */
  .kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row;
    grid-auto-columns: auto; gap: 3mm; margin: 0 0 5mm; }
  .kacheln:has(> .kachel:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* vier: eine Reihe */
  .kacheln:has(> .kachel:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel { position: relative; padding: 3mm 3.5mm 3mm 4.5mm; border: 0.3mm solid var(--linie-kraeftig); border-radius: 1.5mm;
    background: var(--papier); box-shadow: none; break-inside: avoid; }
  .kachel-titel { font-size: 8.5pt; }
  .kachel-zahl { container-type: normal; padding-top: 1mm; letter-spacing: 0; font-weight: 400; }
  .kachel-wert { font-size: 15pt; }
  .kachel-zusatz { min-height: 0; font-size: 7.5pt; }
  .kachel, .feld, figure, svg, tr, .kacheln, .druckkopf { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  /* Tabellen ohne Rollbalken, in der Blattbreite. */
  .tabelle-huelle { overflow: visible !important; margin: 0 0 4mm; }
  .tabelle { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 8.5pt; }
  .tabelle th, .tabelle td { padding: 1.4mm 1.8mm; border-bottom: 0.2mm solid var(--linie); background: none !important;
    border-radius: 0 !important; white-space: normal; }
  .tabelle thead th { white-space: normal; border-bottom: 0.3mm solid var(--linie-kraeftig); }
  /* Eingabefelder als reine Werte, keine Formularkästen und keine Schieberegler. */
  input[type="range"], select, textarea, input[type="text"], input[type="number"] { border: 0 !important; background: none !important;
    box-shadow: none !important; padding: 0 !important; min-height: 0 !important; appearance: none !important;
    -webkit-appearance: none !important; color: var(--tinte); font-size: inherit; }
  input[type="range"] { display: none !important; }
  .betrag, .kachel-zahl, .tabelle td { font-variant-numeric: tabular-nums; }
  .vertragstext, .signatur-dokument { max-height: none !important; overflow: visible !important; padding: 0 !important;
    border: 0 !important; }
  .vertrag-paragraf, .vertrag-parteien, .vertrag-vorbehalt { break-inside: avoid; }
}

/* Monat ab 60 rem Seite wieder mit Uhrzeit hinter dem Titel und dem Kunden darunter (Runde 3, A22 — siehe „Schmale
   Monatsspalten" beim Kalender). */
@container seite (min-width: 60rem) {
  .monat-tag .chip-zeile { max-height: 1.3em; }
  .monat-tag .chip-zeile > .zeitpunkt { flex-basis: auto; }
  .monat-tag .chip-kunde { position: relative; width: auto; height: auto; overflow: hidden; clip-path: none; }
}

/* --- Der Kundenfall (Runde 3, F3; DESIGN.md 7.16): Fahrplan der Beratung und Zeitleiste der Zusammenarbeit — Berater
   (Beratungsverlauf) und Kundin (Meine Beratung) mit denselben Bausteinen. Handy: alles untereinander; ab 60 rem Fläche
   Fahrplan links, Kundenzugang und „Als Nächstes" rechts, die Zeitleiste darunter über die ganze Breite. --- */
.karte-hervor { border-color: var(--wolke-linie); box-shadow: 0 0 0 2px var(--wolke-linie); }
.fahrplan { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.fahrplan-schritt { position: relative; display: flex; gap: 0.75rem; padding: 0 0 1rem; }
.fahrplan-schritt:last-child { padding-bottom: 0; }
.fahrplan-schritt:not(:last-child)::before { content: ""; position: absolute; left: 0.95rem; top: 2rem; bottom: 0.1rem;
  width: 2px; background: var(--linie-kraeftig); }
.fahrplan-erledigt:not(:last-child)::before { background: var(--wolke-linie); }
.fahrplan-marke { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; border: 2px solid var(--linie-kraeftig); background: var(--papier); color: var(--tinte-leise);
  font-weight: 600; font-size: 0.9rem; }
.fahrplan-marke .symbol { width: 1rem; height: 1rem; }
.fahrplan-erledigt .fahrplan-marke { border-color: var(--wolke); background: var(--wolke); color: var(--papier); }
.fahrplan-aktiv .fahrplan-marke, .fahrplan-kommt .fahrplan-marke { border-color: var(--wolke); background: var(--papier);
  color: var(--wolke-tief); }
.fahrplan-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding-top: 0.3rem; }
.fahrplan-titel { font-weight: 600; overflow-wrap: anywhere; }
.fahrplan-gesperrt .fahrplan-titel { color: var(--tinte-leise); }
.fahrplan-grund { color: var(--tinte-leise); }
.fahrplan-stufen { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0.35rem 0 0; padding: 0; }
.fahrplan-stufen li { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--papier-leise); color: var(--tinte-leise);
  font-size: 0.85rem; }
.fahrplan-stufen li.erreicht { background: var(--wolke-flaeche); color: var(--wolke-tief); }
.fahrplan-stufen .unterzeile { display: inline; font-size: 0.8rem; }
.zeitleiste { list-style: none; margin: 1rem 0 0; padding: 0; }
.zeitleiste-eintrag { padding: 0.75rem 0 0.75rem 0.9rem; border-left: 3px solid var(--linie-kraeftig); margin-bottom: 0.5rem; }
.zeitleiste-sichtbar { border-left-color: var(--wolke); }
/* Probe 06.10.2026, A3: „Ansehen" bei einer Aufgabe springt auf ihren Eintrag (#z-…) — er hebt sich ab. */
.zeitleiste-eintrag { scroll-margin-top: 5rem; }
.zeitleiste-eintrag:target { background: var(--wolke-flaeche); border-left-color: var(--wolke-tief); border-radius: 0 var(--rund-klein) var(--rund-klein) 0; padding-right: 0.75rem; }
.zeitleiste-eintrag .nachricht-kopf { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.zeitleiste-eintrag .nachricht-text { margin: 0.35rem 0; overflow-wrap: anywhere; }
.zeitleiste-wahl { display: grid; gap: 0 1rem; }
.zeitleiste-wahl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.zeitleiste-wahl legend { font-weight: 600; font-size: 0.9rem; padding: 0; }
/* N2: „Für wen" nur beim To-do für den Kunden, für ihn sichtbar — ohne Skript; der Server beachtet es sonst nicht. */
.zeitleiste-formular:has(#z-wahl option[value="todo_kunde"]:not(:checked)) .feld-fuer-wen,
.zeitleiste-formular:has(input[name="sichtbar"][value="intern"]:checked) .feld-fuer-wen { display: none; }
.kundenfall { display: grid; gap: 1rem; min-width: 0; }
.kundenfall > *, .kundenfall-seite > * { min-width: 0; }
.kundenfall-seite { display: grid; gap: 1rem; align-content: start; }
@container seite (min-width: 37rem) {
  .zeitleiste-wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}
@container seite (min-width: 60rem) {
  .kundenfall { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .kundenfall-zeitleiste { grid-column: 1 / -1; }
}
.da-liste { display: grid; gap: 0.2rem 1rem; margin: 0; }
.da-liste dt { font-weight: 600; font-size: 0.85rem; color: var(--tinte-leise); margin-top: 0.5rem; overflow-wrap: anywhere; }
.da-liste dd { margin: 0; overflow-wrap: anywhere; }
@container seite (min-width: 37rem) {
  .da-liste { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .da-liste dt { margin-top: 0; }
}
.mein-berater { display: flex; gap: 0.75rem; align-items: center; overflow-wrap: anywhere; }

/* Die Terminbuchung wie Calendly (Runde 3, A2; kern/vorlagen/_terminwahl.html; DESIGN.md 7.17). Handy zuerst: der Monat
   (sieben gleich breite Spalten, buchbare Tage fett lila mit Rand, der gewählte lila gefüllt, die übrigen leise), darunter
   die freien Uhrzeiten als Pillen im Raster (je mindestens 44 px hoch, 5,5 rem breit). Ab 46 rem Inhaltsfläche Monat und
   Uhrzeiten nebeneinander. Nichts ist breiter als seine Spalte — kein seitliches Rollen von 320 bis 1680 px. */
.terminwahl { display: grid; gap: var(--abstand); min-width: 0; }
.terminwahl > section {
  min-width: 0; padding: var(--abstand); background: var(--glas); border: 1px solid var(--glas-rand);
  border-radius: var(--rund); box-shadow: var(--schatten);
}
.terminwahl-kopf { display: grid; grid-template-columns: var(--tippflaeche) 1fr var(--tippflaeche); align-items: center; gap: 0.25rem; }
.terminwahl-kopf h2 { margin: 0; text-align: center; font-size: 1.05rem; }
.terminwahl-platz { display: block; width: var(--tippflaeche); height: var(--tippflaeche); }
.terminwahl-tage { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0.15rem; }
.terminwahl-tage th { padding: 0.3rem 0 0.1rem; color: var(--tinte-leise); font-size: 0.75rem; font-weight: 700; text-align: center; }
.terminwahl-tage td { padding: 0; text-align: center; }
.terminwahl-tag {
  display: flex; align-items: center; justify-content: center; min-height: var(--tippflaeche); border-radius: var(--rund-pille);
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.terminwahl-zu { color: var(--tinte-leise); }
a.terminwahl-tag { color: var(--wolke-tief); font-weight: 700; background: var(--wolke-flaeche); border: 1px solid var(--wolke-linie); }
a.terminwahl-tag:hover { background: var(--wolke-linie-leise); }
a.terminwahl-tag:focus-visible { outline: 2px solid var(--wolke); outline-offset: 1px; }
a.terminwahl-gewaehlt, a.terminwahl-gewaehlt:hover { background: var(--wolke); border-color: var(--wolke); color: var(--papier); }
.terminwahl-zeiten h2 { margin: 0; font-size: 1.05rem; }
.terminwahl-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.5rem; margin: var(--abstand) 0;
  padding: 0; border: 0; min-width: 0;
}
.terminwahl-zeit { position: relative; display: block; }
.terminwahl-zeit input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.terminwahl-zeit span {
  display: flex; align-items: center; justify-content: center; min-height: var(--tippflaeche); border-radius: var(--rund-pille);
  border: 1px solid var(--wolke-linie); background: var(--glas-stark); color: var(--wolke-tief); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.terminwahl-zeit input:checked + span { background: var(--wolke); border-color: var(--wolke); color: var(--papier); box-shadow: var(--schatten-lila); }
.terminwahl-zeit input:focus-visible + span { box-shadow: var(--fokus-ring); }
.terminwahl-zeiten textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
@container seite (min-width: 37rem) {
  .terminwahl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.terminarten { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.terminart { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; overflow-wrap: anywhere; }
.termin-zustand-abgesagt .eintrag-titel { text-decoration: line-through; }
.termin-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.termin-aktionen form { margin: 0; }
.formular-reihe { display: grid; gap: 0 var(--abstand); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); align-items: end; }
.formular-reihe > .knopf { justify-self: start; margin-bottom: var(--abstand); }
/* Der KI-Assistent (Runde 7, S10; Felix P15.2; kern/vorlagen/_ki-chat.html) — dieselben Blasen wie die Nachrichten, darunter die
   Quellen; am Handy die Chats unter dem Chat, ab 64 rem daneben. */
.ki-raster { display: grid; gap: var(--abstand); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ki-chat, .ki-chats { min-width: 0; }
.ki-hinweis { margin: 0 0 var(--abstand); }
.ki-verlauf { margin-bottom: var(--abstand); }
.ki-antwort .nachricht-blase { max-width: 100%; }
.ki-text { overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.ki-text p { margin: 0.35rem 0 0; white-space: pre-line; }
.ki-quellen { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--linie); font-size: var(--stufe-klein); }
.ki-quellen-titel { margin: 0.4rem 0 0.2rem; font-weight: 700; color: var(--tinte-leise); font-size: var(--stufe-klein); }
.ki-quellen ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.ki-quellen li { overflow-wrap: anywhere; }
.ki-q { display: inline-block; min-width: 1.9rem; font-weight: 700; color: var(--wolke-tief); font-variant-numeric: tabular-nums; }
.ki-q-art { color: var(--tinte-leise); }
.ki-q-art::before { content: "· "; }
.ki-eingabe textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.ki-kontingent { margin: 0.5rem 0 0; color: var(--tinte-leise); font-size: var(--stufe-klein); }
.ki-chats h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.ki-chat-liste a { font-weight: 600; overflow-wrap: anywhere; }
.ki-chat-liste a[aria-current="page"] { color: var(--wolke-tief); text-decoration: underline; }
.ki-wissen-text { white-space: pre-line; overflow-wrap: anywhere; }
@media (min-width: 64rem) {
  .ki-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
}