/* Tresen · Gestaltung des Büros, des Zugangs und der Fehlerseiten: Bento-Grün (Paket N-60, Florian 26.10.2026).
   Vorlage ist das Artefakt „Tresen Dashboard Grün“: schwarze Bühne, links die dunkle Seitenleiste, rechts das helle
   Panel mit Kacheln; Grün nur als Akzent. Farben stehen nur als Tokens oben, je hell und dunkel. Regeln aus dem Soll
   gelten weiter: keine Symbole in Kacheln (SOLL-REGEL-GESTALT-01), große Kacheln bei wenigen Optionen (-02), Weiter-Leiste
   als Knopfzeile am Ende der Hauptkachel und weiße Kästen mit Linie (-03), Kreise mit fester gleicher Breite und Höhe (-04), Raster mittig
   (-06), 390 px ohne seitliches Scrollen (-08), hell und dunkel lesbar (-09), Geldfelder mit Abstand zum „€“ und
   Kalender in voller Breite (-10). Kurzfassung des Systems: docs/neubau/buero-design.md. */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schriften/instrument-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schriften/instrument-sans-500.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(schriften/instrument-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schriften/instrument-sans-700.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schriften/schibsted-grotesk-700.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(schriften/schibsted-grotesk-800.woff2) format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schriften/martian-mono-400.woff2) format("woff2"); }
/* Symbole nur in Navigation, Seitenkopf und Links (SOLL-BER-21), nie in Kacheln. */
@font-face { font-family: "Phosphor"; font-style: normal; font-weight: 400; font-display: block;
  src: url(schriften/phosphor.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
/* Bühne, Seitenleiste und dunkle Kacheln sehen hell wie dunkel gleich aus; sie stehen trotzdem in beiden Blöcken,
   damit jede Farbe beide Fassungen hat. Das Grün (#5DD62C) ist auf Weiß nicht lesbar (1,9:1); als Text, Link und
   Auswahl dient deshalb hell das Waldgrün, dunkel das helle Grün. */
:root {
  color-scheme: light;
  --buehne: #0F0F0F; --kohle: #202020; --kohle-2: #2A2A2A; --kohle-linie: #2C2C2C; --kohle-kante: #6F6F6F;
  --kohle-text: #F8F8F8; --kohle-leise: #A9B5A3; --kohle-zart: #2A3A22; --leiste-text: #B4B4B4; --leiste-leise: #8C8C8C;
  --gruen: #5DD62C; --gruen-hell: #7FE356; --gruen-auf: #0F0F0F; --wald: #337418;
  --grund: #F8F8F8; --flaeche: #FFFFFF; --flaeche-2: #ECEEEA; --tinte: #0F0F0F; --leise: #4A5246; --linie: #E8EBE5;
  --kante-feld: #8C9487;
  --aktion: #337418; --aktion-auf: #FFFFFF; --aktion-zart: #E6F3DE;
  --knopf: #0F0F0F; --knopf-auf: #F8F8F8; --knopf-hover: #24540F; --fokus: #337418;
  --frei: #24540F; --frei-zart: #E6F3DE; --gehalten: #775000; --gehalten-zart: #FFF1C7;
  --fehler: #B42318; --fehler-zart: #FDECEA; --fehler-auf: #FFFFFF;
  --chip-gelb: #775000; --chip-gelb-grund: #FFF1C7; --chip-gruen: #24540F; --chip-gruen-grund: #E6F3DE;
  --chip-blau: #1F48B8; --chip-blau-grund: #E1E9FD; --chip-lila: #5B2BA8; --chip-lila-grund: #EEE5FB;
  --linie-gruen: #337418; --linie-gelb: #E0A100; --linie-rot: #D64545; --linie-blau: #3B6CF0; --linie-lila: #8A4BE0;
  --schatten-klein: 0 1px 2px rgba(15, 30, 10, .04);
  --schatten-leiste: 0 18px 40px rgba(15, 30, 10, .14);
  --schatten-hoch: 0 10px 26px rgba(36, 84, 15, .08);
  --schrift: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --anzeige: "Schibsted Grotesk", "Instrument Sans", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --t-1: 12px; --t-2: 13px; --t-3: 14px; --t-4: 16px; --t-5: 20px; --t-6: 26px; --t-7: clamp(30px, 4vw, 40px);
  --s7: 48px;
  --bewegung: 160ms cubic-bezier(.2, .7, .2, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-s: 6px; --r: var(--r-feld); --r-feld: 12px; --r-kachel: 16px; --r-karte: 24px; --r-kopf: var(--r-karte);
  --r-panel: 28px; --r-pille: 999px;
  --breite: 1240px; --leiste-breite: 248px;
  /* Farbe des Stripe-Knopfs wie in der Vorlage (`zverb__stripe`), hell und dunkel gleich. */
  --stripe: #635BFF; --stripe-auf: #FFFFFF;
  --kit-gruen: #1F7A4A; --kit-blau: #2F45D8; --kit-petrol: #0F6B6B; --kit-anthrazit: #2B2F36; --kit-rot: #B4232A;
}
/* Dunkle Tokens: eigene Werte statt Umkehrung, Text auf Flächen mindestens 4,5:1 (SOLL-REGEL-GESTALT-09). Das Panel
   wird grünlich dunkel, die Seitenleiste bleibt schwarz; der Hauptknopf wird grün, weil Schwarz auf dunklem Panel
   verschwände. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --buehne: #0F0F0F; --kohle: #202020; --kohle-2: #2A2A2A; --kohle-linie: #2C2C2C; --kohle-kante: #6F6F6F;
  --kohle-text: #F8F8F8; --kohle-leise: #A9B5A3; --kohle-zart: #2A3A22; --leiste-text: #B4B4B4; --leiste-leise: #8C8C8C;
  --gruen: #5DD62C; --gruen-hell: #7FE356; --gruen-auf: #0F0F0F; --wald: #337418;
  --grund: #171A17; --flaeche: #1F231F; --flaeche-2: #2A2F29; --tinte: #ECEFEA; --leise: #A9B5A3; --linie: #313730;
  --kante-feld: #7A8476;
  --aktion: #5DD62C; --aktion-auf: #0F0F0F; --aktion-zart: #22361A;
  --knopf: #5DD62C; --knopf-auf: #0F0F0F; --knopf-hover: #7FE356; --fokus: #5DD62C;
  --frei: #7FD957; --frei-zart: #22361A; --gehalten: #F2B82E; --gehalten-zart: #3A2E0E;
  --fehler: #FF8A73; --fehler-zart: #3E1D17; --fehler-auf: #0F0F0F;
  --chip-gelb: #F2B82E; --chip-gelb-grund: #3A2E0E; --chip-gruen: #7FD957; --chip-gruen-grund: #22361A;
  --chip-blau: #9DB4FF; --chip-blau-grund: #1C2647; --chip-lila: #C3A6FF; --chip-lila-grund: #2C1F47;
  --linie-gruen: #5DD62C; --linie-gelb: #F2B82E; --linie-rot: #FF8A73; --linie-blau: #7FA0FF; --linie-lila: #B48CFF;
  --stripe: #635BFF; --stripe-auf: #FFFFFF;
  --kit-gruen: #1F7A4A; --kit-blau: #2F45D8; --kit-petrol: #0F6B6B; --kit-anthrazit: #2B2F36; --kit-rot: #B4232A;
  --schatten-klein: 0 1px 2px rgba(0, 0, 0, .3);
  --schatten-leiste: 0 18px 40px rgba(0, 0, 0, .45);
  --schatten-hoch: 0 10px 26px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --buehne: #0F0F0F; --kohle: #202020; --kohle-2: #2A2A2A; --kohle-linie: #2C2C2C; --kohle-kante: #6F6F6F;
    --kohle-text: #F8F8F8; --kohle-leise: #A9B5A3; --kohle-zart: #2A3A22; --leiste-text: #B4B4B4; --leiste-leise: #8C8C8C;
    --gruen: #5DD62C; --gruen-hell: #7FE356; --gruen-auf: #0F0F0F; --wald: #337418;
    --grund: #171A17; --flaeche: #1F231F; --flaeche-2: #2A2F29; --tinte: #ECEFEA; --leise: #A9B5A3; --linie: #313730;
    --kante-feld: #7A8476;
    --aktion: #5DD62C; --aktion-auf: #0F0F0F; --aktion-zart: #22361A;
    --knopf: #5DD62C; --knopf-auf: #0F0F0F; --knopf-hover: #7FE356; --fokus: #5DD62C;
    --frei: #7FD957; --frei-zart: #22361A; --gehalten: #F2B82E; --gehalten-zart: #3A2E0E;
    --fehler: #FF8A73; --fehler-zart: #3E1D17; --fehler-auf: #0F0F0F;
    --chip-gelb: #F2B82E; --chip-gelb-grund: #3A2E0E; --chip-gruen: #7FD957; --chip-gruen-grund: #22361A;
    --chip-blau: #9DB4FF; --chip-blau-grund: #1C2647; --chip-lila: #C3A6FF; --chip-lila-grund: #2C1F47;
    --linie-gruen: #5DD62C; --linie-gelb: #F2B82E; --linie-rot: #FF8A73; --linie-blau: #7FA0FF; --linie-lila: #B48CFF;
    --stripe: #635BFF; --stripe-auf: #FFFFFF;
    --kit-gruen: #1F7A4A; --kit-blau: #2F45D8; --kit-petrol: #0F6B6B; --kit-anthrazit: #2B2F36; --kit-rot: #B4232A;
    --schatten-klein: 0 1px 2px rgba(0, 0, 0, .3);
    --schatten-leiste: 0 18px 40px rgba(0, 0, 0, .45);
    --schatten-hoch: 0 10px 26px rgba(0, 0, 0, .35);
  }
}
/* Dunkle Kacheln (Schrittkachel, „Als Nächstes“, Belegung heute) setzen die Tokens für sich neu; so sieht alles darin,
   auch Chips, Knöpfe und Raster, auf Kohle richtig aus, ohne eigene Regeln je Baustein. */
.flaeche-dunkel {
  color-scheme: dark;
  --flaeche: var(--kohle); --flaeche-2: var(--kohle-2); --tinte: var(--kohle-text); --leise: var(--kohle-leise);
  --linie: var(--kohle-linie); --kante-feld: var(--kohle-kante);
  --aktion: var(--gruen); --aktion-auf: var(--gruen-auf); --aktion-zart: var(--kohle-zart);
  --knopf: var(--gruen); --knopf-auf: var(--gruen-auf); --knopf-hover: var(--gruen-hell); --fokus: var(--gruen);
  --frei-zart: var(--wald);
  background: var(--kohle); color: var(--tinte);
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Keine automatische Silbentrennung (N-183): Sie trennte am Handy Kachelnamen, Knöpfe und Adressen („Ballmaschi-ne“,
   „Kün-digung“, „tre-sen.test“); Florian: Überschriften und Knöpfe nie trennen. Weiche Trennstriche (­) im Text
   gelten weiter. `anywhere` brach „Jahresmitgliedschaft“ mitten im Wort (Gesamtprüfung P22); `break-word` bricht nur,
   was allein nicht in die Zeile passt. */
html { overflow-wrap: break-word; hyphens: manual; -webkit-text-size-adjust: 100%; background: var(--buehne); }
/* Die Bühne (`html`, `.rahmen`, `.zugang`) ist schwarz; der Körper trägt die Farbe des Panels, damit Text, der
   direkt darin steht (Ausdruck, Dialoge), lesbar bleibt. */
body { margin: 0; min-width: 0; background: var(--grund); color: var(--tinte); font-family: var(--schrift); font-size: var(--t-4);
  line-height: 1.5; font-variant-numeric: tabular-nums; }
/* Bedienelemente erben die Schrift des Systems; sonst zeichnet der Browser Knöpfe in Arial 13,3 px (Stilinventur
   BV-17: der (+)-Knopf der Chips), Code-Blöcke in der Systemschrift statt Martian Mono. */
button, input, select, textarea { font: inherit; }
pre, code, kbd, samp { font-family: var(--mono); }
/* Überschriften mit normalen Satzzeichen: Die tabellarischen Ziffern des body machen in der Anzeigeschrift auch Komma
   und Punkt ziffernbreit („Guten Abend , Lena“, Browserlauf 28.10.2026). */
h1, h2, h3, h4 { font-family: var(--anzeige); line-height: 1.15; text-wrap: balance; margin: 0; hyphens: manual;
  font-variant-numeric: normal; }
/* Titel und Kurztexte in Kacheln brechen nur an Wortgrenzen („än-dern“, „zu-sammen“ las sich wie ein Fehler;
   Florian: Überschriften nie trennen). Lange Einzelwörter dürfen notfalls umbrechen statt überzulaufen. */
.kachel b, .kachel small, .kennzahl, .db__zahl b, .db__zahl small, .db__zahl span { hyphens: manual; overflow-wrap: break-word; }
h1 { font-size: var(--t-7); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--t-4); font-weight: 700; }
/* Kleingedrucktes eine Stufe, nicht die 83 % des Browsers (13,3 px neben 13 px, Stilinventur V09). */
small { font-size: var(--t-2); }
/* „bolder“ des Browsers machte aus 700 ein 900 (Stilinventur V09); fett ist im Büro immer 700. */
b, strong { font-weight: 700; }
h3 { font-size: var(--t-4); font-weight: 700; }
p { margin: 0; max-width: 68ch; }
a { color: var(--aktion); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Die Überschrift bekommt den Fokus nur für Screenreader (Seitenwechsel); ein Rahmen darum wäre bloß Lärm. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
  .knopf, .eingabe, .chip, .karte, .hinweis, .kachel, .wahlgross__k { border: 1px solid CanvasText; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Ein Feld, das wie sein Bereich heißt, nennt den Namen nur fürs Vorlesen (Vorlage ablauf/felder.html, feldliste). */
.wie-bereich .feld > :is(.feld__titel, legend, label):first-child { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zum-inhalt { position: absolute; left: var(--s2); top: var(--s2); z-index: 30; padding: var(--s2) var(--s3);
  background: var(--flaeche); border-radius: var(--r-s); transform: translateY(-200%); }
.zum-inhalt:focus { transform: none; }
.ph { font-family: "Phosphor"; font-style: normal; font-weight: 400; line-height: 1; speak: never; display: inline-block;
  font-size: 1.15em; inline-size: 1em; flex: none; -webkit-font-smoothing: antialiased; }
.ph-house::before { content: "\e2c2"; }
.ph-plus-circle::before { content: "\e3d6"; }
.ph-list-bullets::before { content: "\e2f2"; }
.ph-gear-six::before { content: "\e272"; }
.ph-chart-line-up::before { content: "\e156"; }
.ph-arrow-left::before { content: "\e058"; }
.ph-arrow-right::before { content: "\e06c"; }

/* ---------- Rahmen: schwarze Bühne, Seitenleiste links, helles Panel rechts (SOLL-BER-01, Paket N-60) ---------- */
/* Seiten ohne Leiste (Fehler ohne Anmeldung) zeigen dasselbe Panel auf der Bühne. */
.rahmen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding: var(--s5);
  background: var(--buehne); }
.rahmen--leiste { grid-template-columns: var(--leiste-breite) minmax(0, 1fr); padding: var(--s5) var(--s5) var(--s5) 0; }
.handykopf { display: none; }
.leiste { position: sticky; top: var(--s5); align-self: start; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 2 * var(--s5)); color: var(--leiste-text); }
.leiste__zeile { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s5) 0 var(--s2) var(--s5); }
.leiste__zeile > * { min-width: 0; }
.leiste__marke { display: flex; gap: var(--s3); align-items: center; padding: 0 var(--s4) var(--s6); color: var(--kohle-text); }
.leiste__marke b { display: block; font-size: var(--t-4); font-weight: 600; line-height: 1.25;
  hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
.leiste__marke small { display: block; color: var(--leiste-leise); font-size: var(--t-1); }
/* Logo: erster Buchstabe des Betriebs im runden Feld, grün auf Kohle wie die Vorlage. */
.leiste__logo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--kohle); border: 1px solid var(--kohle-linie); color: var(--gruen); font: 700 var(--t-5)/1 var(--anzeige); }
/* Die Polster oben und unten halten die runden Kerben des ersten und letzten Punkts im Bildlaufbereich. */
.reiter { display: flex; flex-direction: column; gap: var(--s1); overflow-x: auto; scrollbar-width: none;
  padding-block: var(--s5); margin-block: calc(-1 * var(--s5)) 0; }
.reiter__punkt { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s4);
  border-radius: var(--r-pille) 0 0 var(--r-pille); color: var(--leiste-text); font-size: var(--t-4); font-weight: 400;
  white-space: nowrap; text-decoration: none; transition: background var(--bewegung), color var(--bewegung); }
.reiter__punkt .ph { font-size: var(--t-5); }
.reiter__punkt:hover { color: var(--kohle-text); background: var(--kohle); }
.reiter__punkt:focus-visible { outline-color: var(--gruen); outline-offset: -2px; }
/* Der aktive Punkt hat die Farbe des Panels und geht über zwei runde Kerben in es über. */
.reiter__punkt--an, .reiter__punkt--an:hover { background: var(--grund); color: var(--tinte); font-weight: 600; }
.reiter__punkt--an::before, .reiter__punkt--an::after { content: ""; position: absolute; right: 0; width: var(--s5); height: var(--s5);
  pointer-events: none; }
.reiter__punkt--an::before { top: calc(-1 * var(--s5)); background: radial-gradient(circle at 0 0, transparent 23.5px, var(--grund) 24px); }
.reiter__punkt--an::after { bottom: calc(-1 * var(--s5)); background: radial-gradient(circle at 0 100%, transparent 23.5px, var(--grund) 24px); }
/* Die Leiste ist genau so hoch wie das Fenster; wird es eng, scrollt nur die Liste der Einträge. Marke oben und
   Einklappen, Website und Konto unten bleiben immer sichtbar (Florian 29.10.2026). Einträge 44 px. */
@media (min-width: 761px) {
  .leiste { height: calc(100dvh - 2 * var(--s5) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 0; }
  .leiste__zeile { height: 100%; min-height: 0; }
  .leiste__marke, .leiste__unten { flex: none; }
  .reiter { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .reiter__punkt { min-height: 44px; flex: none; }
}
/* Kalender, Belegung und Auswertung stehen unter Betrieb als gewöhnliche Einträge, gleich groß und ohne Einzug
   (Florian 29.10.2026: „nicht einrücken“); die Klasse braucht nur das Handy, dort stehen sie unter „Mehr“. */
.ph-calendar-blank::before { content: "\e10a"; }
.ph-grid-four::before { content: "\e296"; }
.ph-chart-bar::before { content: "\e150"; }
/* Einklappen (N49, Florian 29.10.2026): am Rechner eine schmale Symbolleiste; der Name steht als Tooltip und bleibt
   für Vorleseprogramme im Link. Der Inhalt bekommt die gewonnene Breite. Am Handy bleibt die untere Leiste. */
.leiste__name { min-width: 0; }
.leiste__klapp { justify-self: start; margin-left: var(--s2); display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%;
  border: 1px solid var(--kohle-linie); background: var(--kohle); color: var(--kohle-text); font: inherit; font-size: var(--t-4);
  cursor: pointer; }
.leiste__klapp:hover { border-color: var(--gruen); }
.leiste__klapp[hidden] { display: none; }
.ph-caret-left::before { content: "\e138"; }
.ph-globe::before { content: "\e288"; }
.leiste__pille .ph { display: none; }
@media (min-width: 761px) {
  .rahmen--schmal { --leiste-breite: 92px; --breite: 1560px; }
  .rahmen--schmal .leiste__marke { justify-content: center; padding-right: var(--s5); padding-left: 0; }
  .rahmen--schmal .leiste__klapp .ph { transform: rotate(180deg); }
  .rahmen--schmal .leiste__name, .rahmen--schmal .reiter__punkt > span, .rahmen--schmal .leiste__website > b,
  .rahmen--schmal .leiste__pille > span, .rahmen--schmal .leiste__konto > span:last-child {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rahmen--schmal .reiter__punkt { justify-content: center; padding: 0; }
  .rahmen--schmal .reiter__zahl { position: absolute; top: 4px; right: 10px; margin: 0; min-width: 18px; height: 18px; padding: 0 4px;
    font-size: var(--t-1); }
  /* Einklappen, Website und Konto unten sehen eingeklappt aus wie die Navigationssymbole darüber (Florian 29.10.2026). */
  .rahmen--schmal .leiste__unten { padding-right: 0; gap: var(--s1); }
  .rahmen--schmal .leiste__website { padding: 0; background: none; border: 0; }
  .rahmen--schmal .leiste__klapp, .rahmen--schmal .leiste__pille, .rahmen--schmal .leiste__konto {
    justify-self: stretch; display: flex; align-items: center; justify-content: center; width: auto; height: 48px; min-height: 48px;
    margin: 0; padding: 0; border: 0; border-radius: var(--r-pille) 0 0 var(--r-pille); background: none; color: var(--leiste-text);
    font-size: var(--t-5); }
  .rahmen--schmal .leiste__klapp:hover, .rahmen--schmal .leiste__pille:hover, .rahmen--schmal .leiste__konto:hover {
    background: var(--kohle); color: var(--kohle-text); }
  .rahmen--schmal .leiste__pille .ph { display: inline-block; }
  .rahmen--schmal .leiste__unten .ph { font-size: var(--t-5); }
  .rahmen--schmal .leiste__avatar { width: auto; height: auto; background: none; border: 0; color: inherit; font-size: var(--t-5); }
}
@media (max-width: 760px) { .leiste__klapp { display: none; } }
.leiste__unten { margin-top: auto; display: grid; gap: var(--s4); padding: var(--s5) var(--s4) 0 0; }
.leiste__website { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-kachel); background: var(--kohle);
  border: 1px solid var(--kohle-linie); color: var(--kohle-text); }
.leiste__website b { font-size: var(--t-3); font-weight: 600; }
.leiste__pille { justify-self: start; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4);
  border-radius: var(--r-pille); background: var(--gruen); color: var(--gruen-auf); font-size: var(--t-2); font-weight: 600;
  text-decoration: none; }
.leiste__pille:hover { background: var(--gruen-hell); }
.leiste__konto { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding-left: var(--s4); color: var(--kohle-text);
  text-decoration: none; }
.leiste__konto b { display: block; font-size: var(--t-3); font-weight: 600; }
.leiste__konto small { display: block; color: var(--leiste-leise); font-size: var(--t-1); }
.leiste__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--kohle);
  border: 1px solid var(--kohle-linie); color: var(--gruen); font-size: var(--t-5); }
.leiste__konto:hover .leiste__avatar { border-color: var(--gruen); }
.spalte { min-width: 0; padding: var(--s6) clamp(16px, 3vw, 40px) var(--s7); background: var(--grund); border-radius: var(--r-panel); }
.spalte > .inhalt { max-width: var(--breite); margin-left: auto; margin-right: auto; display: grid; gap: var(--s5); min-width: 0; }
@media (max-width: 900px) {
  .spalte { padding: var(--s5) var(--s4) var(--s6); }
}
/* Handy: keine Seitenleiste; oben der Handykopf, unten eine feste Leiste mit den Reitern, der aktive grün. */
@media (max-width: 760px) {
  .rahmen { padding: 0; }
  .rahmen--leiste { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .handykopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s4) max(var(--s4), env(safe-area-inset-right, 0px)) var(--s4) max(var(--s4), env(safe-area-inset-left, 0px));
    color: var(--kohle-text); }
  .handykopf__marke { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
  .handykopf__marke b { display: block; font-size: var(--t-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .handykopf__marke small { display: block; color: var(--leiste-leise); font-size: var(--t-1); }
  .handykopf__marke > span:last-child { min-width: 0; }
  .handykopf__konto { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--kohle); border: 1px solid var(--kohle-linie); color: var(--kohle-text); font-size: var(--t-5); text-decoration: none; }
  .leiste { position: fixed; inset: auto 0 0 0; top: auto; min-height: 0; z-index: 30; background: var(--buehne);
    border-top: 1px solid var(--kohle-linie);
    padding: var(--s2) max(var(--s1), env(safe-area-inset-right, 0px)) max(var(--s3), env(safe-area-inset-bottom, 0px)) max(var(--s1), env(safe-area-inset-left, 0px)); }
  .leiste__zeile { padding: 0; }
  .leiste__marke, .leiste__unten { display: none; }
  .reiter { flex-direction: row; justify-content: space-around; gap: 0; padding: 0; margin: 0; overflow: visible; }
  /* Fünf gleich breite Punkte; ein Wort wird nie getrennt („Einstellun-gen“), lieber kleiner (VL-198). */
  .reiter__punkt { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px;
    padding: var(--s1) 1px; border-radius: var(--r-kachel); font-size: var(--t-1); text-align: center; white-space: normal;
    hyphens: manual; overflow-wrap: normal; line-height: 1.15; letter-spacing: -.02em; }
  .reiter__punkt span { font-size: clamp(9px, 2.55vw, var(--t-1)); max-width: 100%; white-space: nowrap; }
  .reiter__punkt--an, .reiter__punkt--an:hover { background: var(--gruen); color: var(--gruen-auf); }
  .reiter__punkt--an::before, .reiter__punkt--an::after { display: none; }
  .spalte { border-radius: var(--r-panel) var(--r-panel) 0 0; min-height: calc(100vh - 76px);
    padding: var(--s5) var(--s4) calc(var(--s7) + 80px); }
  .rahmen:not(.rahmen--leiste) > .spalte { border-radius: 0; min-height: 100vh; padding-bottom: var(--s7); }
}

/* ---------- Kopfleiste (N49, Florian 29.10.2026) ---------- */
/* Auf jeder Büroseite oben im Panel: Suche, Glocke, Hell/Dunkel. Sie bleibt beim Scrollen oben; was sonst oben klebt
   (Schrittkachel, Aktionsleiste) rückt um ihre Höhe nach unten, damit nichts verdeckt wird. */
.rahmen--leiste { --kopfleiste: 56px; }
.kopfleiste { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 12; display: flex; justify-content: flex-end;
  align-items: center; gap: var(--s2); min-height: var(--kopfleiste); margin: calc(-1 * var(--s6)) calc(-1 * clamp(16px, 3vw, 40px)) var(--s1);
  padding: var(--s2) max(clamp(16px, 3vw, 40px), calc((100% - var(--breite)) / 2)); background: var(--grund);
  border-radius: var(--r-panel) var(--r-panel) 0 0; }
/* Am Rechner kompakt (Florian 29.10.2026: „schmaler“): 40 px hohe Knöpfe; am Handy unten wieder 44 px. */
.kopfleiste__suche { display: flex; align-items: center; gap: var(--s2); min-width: 240px; min-height: 40px; padding: 0 var(--s3);
  border: 1px solid var(--linie); border-radius: var(--r-pille); background: var(--flaeche); color: var(--leise); font-size: var(--t-2);
  text-decoration: none; }
.kopfleiste__suche:hover, .kopfleiste__rund:hover { border-color: var(--aktion); }
.kopfleiste__suche span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopfleiste__suche kbd { margin-left: auto; font: var(--t-1) var(--mono); padding: 1px var(--s2); border: 1px solid var(--linie);
  border-radius: var(--r-s); background: var(--flaeche-2); }
.kopfleiste__rund { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); font: inherit;
  font-size: var(--t-4); text-decoration: none; cursor: pointer; }
.kopfleiste__rund[hidden] { display: none; }
.kopfleiste__glocke em { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; display: grid; place-items: center;
  font-style: normal; font-size: var(--t-1); font-weight: 700; background: var(--gruen); color: var(--gruen-auf);
  border-radius: var(--r-pille); padding: 0 var(--s1); }
/* Der Mond schaltet auf Dunkel, die Sonne zurück auf Hell; gezeigt wird, wohin der Knopf wechselt. */
.ph-moon::before { content: "\e330"; }
.ph-sun::before { content: "\e472"; }
.kopfleiste__modus .ph-sun, .kopfleiste__modus[aria-pressed="true"] .ph-moon { display: none; }
.kopfleiste__modus[aria-pressed="true"] .ph-sun { display: inline-block; }
.rahmen--leiste .ablauf__seite, .rahmen--leiste .detail__aktionen { top: calc(var(--kopfleiste) + var(--s4)); }
html:has(.kopfleiste) { scroll-padding-top: 80px; }
@media (max-width: 900px) {
  .kopfleiste { margin: calc(-1 * var(--s5)) calc(-1 * var(--s4)) var(--s1); padding: var(--s2) var(--s4); }
}
@media (max-width: 760px) {
  .rahmen--leiste { --kopfleiste: 60px; }
  .kopfleiste { gap: var(--s2); }
  /* Am Handy nur das Symbol; es öffnet die Suche. */
  .kopfleiste__suche { min-width: 0; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%;
    color: var(--tinte); font-size: var(--t-5); }
  .kopfleiste__rund { width: 44px; height: 44px; font-size: var(--t-5); }
  .kopfleiste__suche span, .kopfleiste__suche kbd { display: none; }
}

/* Walk-in auf „Mein Tag“ (N50): Knopf und kurzer Satz in einer Zeile, am Handy darunter. */
.walkin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0; color: var(--leise); }

/* ---------- Seitenkopf ---------- */
/* Ohne Fläche dahinter: Titel groß in Schibsted, darunter ein Satz; das Symbol im runden Kohlefeld. */
.seitenkopf { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.seitenkopf > div { flex: 1 1 240px; min-width: 0; }
.seitenkopf h1 { margin: 0; font-size: var(--t-7); letter-spacing: -.025em; line-height: 1.05; }
.seitenkopf p { margin: var(--s2) 0 0; color: var(--leise); font-size: var(--t-3); }
.seitenkopf__sym { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-5); flex: 0 0 auto;
  background: var(--kohle); color: var(--gruen); }
.seitenkopf__zahl { display: grid; text-align: right; }
.seitenkopf__zahl b { font: 700 var(--t-6)/1 var(--anzeige); }
.seitenkopf__zahl small { color: var(--leise); }
/* Kopf eines Ablaufschritts: große Frage, Hilfetext */
.schrittkopf { display: grid; gap: var(--s3); max-width: 62ch; }
.schrittkopf h1 { font: 700 var(--t-7)/1.05 var(--anzeige); letter-spacing: -.025em; }
.schrittkopf p { font-size: var(--t-4); line-height: 1.5; color: var(--leise); }

/* ---------- Karten und Kacheln ---------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--s5); display: grid;
  gap: var(--s4); min-width: 0; }
/* Titel und Knopf rücken untereinander, wenn beide nicht in eine Zeile passen (am Handy rutschte der Knopf aus der
   Karte, N-183). */
.karte__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s3); }
.karte__kopf h2 { margin: 0; font-size: var(--t-5); letter-spacing: -.015em; }
.karte__link { border: 0; background: none; font: inherit; font-size: var(--t-2); color: var(--aktion); font-weight: 600; cursor: pointer;
  display: inline-flex; gap: var(--s1); align-items: center; text-decoration: none; }
/* Kacheln wie `.ziel` der Vorlage: Titel, Unterzeile, unten rechts der runde Pfeil. Der Pfeil ist kein Symbol der
   Kachel, sondern zeigt, dass sie öffnet (Bento-Grün); er hängt deshalb als ::after an und trägt keinen Text fürs
   Vorlesen. Sonst nur Text (SOLL-REGEL-GESTALT-01, -06). */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--s3); }
/* „Mehr anzeigen“ unter den ersten Kacheln einer Gruppe (Übersichten, N-183): klappt an Ort und Stelle auf. */
.kacheln__mehr > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--kante-feld);
  border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-size: var(--t-3); font-weight: 600; cursor: pointer;
  list-style: none; white-space: nowrap; }
.kacheln__mehr > summary::-webkit-details-marker { display: none; }
.kacheln__mehr > summary:hover { border-color: var(--aktion); }
.kacheln__mehr > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.kacheln__mehr[open] > summary { margin-bottom: var(--s3); }
.kacheln__mehr .kacheln__zu, .kacheln__mehr[open] .kacheln__auf { display: none; }
.kacheln__mehr[open] .kacheln__zu { display: inline; }
@media (max-width: 760px) { .kacheln__mehr > summary { min-height: 44px; } }
.kachel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--s4);
  align-items: start; min-height: 132px; padding: var(--s5); border: 1px solid var(--linie); border-radius: var(--r-karte);
  background: var(--flaeche); font: inherit; text-align: left; cursor: pointer; color: var(--tinte); text-decoration: none;
  transition: border-color var(--bewegung); }
.kachel > span { display: grid; gap: var(--s1); }
.kachel b { font-size: var(--t-4); font-weight: 600; }
.kachel small { color: var(--leise); font-size: var(--t-2); line-height: 1.4; }
.kachel::after { content: "\2192"; justify-self: end; align-self: end; width: 36px; height: 36px; border-radius: 50%; display: grid;
  place-items: center; background: var(--flaeche-2); color: var(--tinte); font-size: var(--t-4); line-height: 1;
  transition: background var(--bewegung), color var(--bewegung); }
.kachel:hover, .kachel:focus-visible { border-color: color-mix(in srgb, var(--aktion) 45%, var(--linie)); }
.kachel:hover::after, .kachel:focus-visible::after { background: var(--gruen); color: var(--gruen-auf); }
.kachel--naechste { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.kachel--naechste::after { background: var(--knopf); color: var(--knopf-auf); }
.kachel--aus { color: var(--leise); background: var(--flaeche-2); cursor: default; }
.kachel--aus::after { content: none; }
.kachel__zahl { position: absolute; top: var(--s4); right: var(--s5); font-style: normal; font: 700 var(--t-5)/1 var(--anzeige); color: var(--aktion); }
.kachel:has(.kachel__zahl) > span { padding-right: var(--s7); }
@media (max-width: 760px) {
  /* Am Handy liegt der Pfeil rechts neben dem Text, die Kachel wird eine Zeile. */
  .kachel { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; padding: var(--s4); }
  .kachel::after { align-self: center; }
  .kachel__zahl { position: static; grid-column: 2; grid-row: 1; }
  .kachel:has(.kachel__zahl) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .kachel:has(.kachel__zahl) > span { padding-right: 0; }
}

/* ---------- Kennzahlen (ohne Symbol) ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.kennzahl { display: grid; gap: var(--s2); align-content: start; padding: var(--s5); border-radius: var(--r-karte); background: var(--flaeche);
  border: 1px solid var(--linie); min-width: 0; color: var(--tinte); text-decoration: none; }
.kennzahl small { color: var(--leise); font-size: var(--t-2); }
/* Ein Betrag bricht nur, wenn er allein nicht passt; `anywhere` teilte „1.234,00 €“ mitten in der Zahl (N-183). */
.kennzahl b { font: 700 var(--t-6)/1.1 var(--anzeige); letter-spacing: -.02em; overflow-wrap: break-word; }
.kennzahl span { color: var(--leise); font-size: var(--t-2); }
@media (max-width: 560px) { .kennzahlen { grid-template-columns: 1fr 1fr; } .kennzahl { padding: var(--s4); } .kennzahl b { font-size: var(--t-5); } }

/* ---------- Chips: Stand und Auswahl ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--t-1); font-weight: 600; padding: 2px var(--s3);
.chip__unter { display: block; margin-top: 2px; color: var(--leise); font-size: var(--t-1); white-space: normal; }
  border-radius: var(--r-pille); white-space: nowrap; background: var(--flaeche-2); color: var(--leise); }
.chip--gelb { background: var(--chip-gelb-grund); color: var(--chip-gelb); }
.chip--gruen { background: var(--chip-gruen-grund); color: var(--chip-gruen); }
.chip--blau { background: var(--chip-blau-grund); color: var(--chip-blau); }
.chip--lila { background: var(--chip-lila-grund); color: var(--chip-lila); }
/* Konflikt und Ablehnung: dieselben Farben wie Fehlermeldungen. */
.chip--rot { background: var(--fehler-zart); color: var(--fehler); }
.chip--aktion { background: var(--aktion); color: var(--aktion-auf); }
/* Auswahlchips bei vielen Optionen (mehr als 5 bzw. 6) */
.wahlchip { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--kante-feld);
  border-radius: var(--r-pille); background: var(--flaeche); cursor: pointer; font-size: var(--t-3); font-weight: 600; }
.wahlchip:hover { border-color: var(--aktion); }
.wahlchip input { position: absolute; opacity: 0; width: 0; }
/* „+“ als letzte Kachel bzw. letzter Chip der Reihe: gleiche Form, gestrichelt, mit Eingabe und rundem Knopf. */
.wahlplus { display: flex; align-items: center; gap: var(--s2); cursor: text; background: var(--flaeche); }
.wahlgross__k.wahlplus, .wahlchip.wahlplus, .wahlliste__z.wahlplus { border-style: dashed; border-color: var(--kante-feld); }
.wahlgross__k.wahlplus:focus-within, .wahlchip.wahlplus:focus-within, .wahlliste__z.wahlplus:focus-within { border-style: solid; border-color: var(--aktion); }
.wahlchip.wahlplus { padding-block: 3px; padding-right: 4px; }
.chipfilter { max-width: 320px; margin-bottom: var(--s3); }
.wahlplus .wahlplus__ein { position: static; opacity: 1; pointer-events: auto; flex: 1 1 auto; width: 100%; min-width: 0;
  border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--tinte); background: transparent; }
.wahlplus .wahlplus__ein::placeholder { color: var(--leise); font-weight: 500; }
.wahlplus .wahlplus__ein:focus-visible { outline: none; }
.chips .wahlplus .wahlplus__ein { width: 12ch; }
.wahlplus__knopf { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--knopf); color: var(--knopf-auf); font: 600 18px/1 inherit; cursor: pointer; }
/* „ד an einem eigenen Wert (WB156): klein in der Ecke, damit es nicht wie eine Wahl aussieht. */
.wahlweg { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 20px; height: 20px;
  padding: 0; border: 1px solid var(--linie); border-radius: 50%; background: var(--flaeche); color: var(--leise);
  font: 600 13px/1 inherit; cursor: pointer; }
.wahlweg:hover, .wahlweg:focus-visible { color: var(--tinte); border-color: var(--aktion); }
.wahlgross__k:has(.wahlweg), .wahlliste__z:has(.wahlweg) { position: relative; }
.wahlchip:has(input:checked) { background: var(--knopf); color: var(--knopf-auf); border-color: var(--knopf); }
/* Farbmuster am Farbkit-Chip (Onboarding, Schlussprüfung Befund 9); das Kit der Branche zeigt ihre Akzentfarbe. */
.wahlchip:has(input[name="ob_farbe"]) span::before { content: ""; display: inline-block; width: 14px; height: 14px;
  margin-right: var(--s2); vertical-align: -2px; border-radius: 50%; background: var(--aktion); box-shadow: 0 0 0 1px var(--linie); }
.wahlchip:has(input[name="ob_farbe"]:checked) span::before { box-shadow: 0 0 0 2px var(--knopf-auf); }
.wahlchip:has(input[name="ob_farbe"][value="gruen_weiss"]) span::before { background: var(--kit-gruen); }
.wahlchip:has(input[name="ob_farbe"][value="blau_weiss"]) span::before { background: var(--kit-blau); }
.wahlchip:has(input[name="ob_farbe"][value="petrol_sand"]) span::before { background: var(--kit-petrol); }
.wahlchip:has(input[name="ob_farbe"][value="anthrazit_gelb"]) span::before { background: var(--kit-anthrazit); }
.wahlchip:has(input[name="ob_farbe"][value="rot_weiss"]) span::before { background: var(--kit-rot); }
/* Lange Punkte (Checklisten) eine Zeile je Punkt statt schmaler Kacheln (Schlussprüfung, Befund 26). */
.wahlliste { display: grid; gap: var(--s2); }
.wahlliste__z { display: flex; gap: var(--s3); align-items: center; min-height: 48px; padding: var(--s2) var(--s4); border: 1px solid var(--linie);
  border-radius: var(--r-feld); background: var(--flaeche); cursor: pointer; }
.wahlliste__z input { width: 20px; height: 20px; }
.wahlliste__z input { flex: none; margin: 0; accent-color: var(--aktion); }
.wahlliste__z:has(input:checked) { border-color: var(--aktion); background: var(--aktion-zart); }
.wahlliste__z:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
/* Klappliste mit Haken (Sprachen der Website): zu wie ein Auswahlfeld, offen eine schlichte Liste. */
.klappwahl { position: relative; max-width: 28rem; }
.klappwahl > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.klappwahl > summary::-webkit-details-marker { display: none; }
.klappwahl > summary::after { content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px); margin-left: var(--s3); }
.klappwahl[open] > summary::after { transform: rotate(-135deg); }
.klappwahl__liste { display: grid; margin-top: var(--s2); padding: var(--s2) 0; border: 1px solid var(--linie);
  border-radius: var(--r-feld); background: var(--flaeche); }
.klappwahl__z { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); cursor: pointer; }
.klappwahl__z input { flex: none; margin: 0; accent-color: var(--aktion); }
.klappwahl__z.ist-gesperrt { cursor: default; color: var(--leise); }
.klappwahl__z small { color: var(--leise); }
/* In der Editor-Leiste: der Knopf wie seine Nachbarn, die Liste schwebt darunter über der Vorschau. */
.wed__sprachen { max-width: none; }
.wed__leiste .wed__sprachen form.klappwahl__liste { display: grid; }
.wed__sprachen > summary.knopf::after { width: .4rem; height: .4rem; margin-left: var(--s2); }
.wed__sprachen .klappwahl__liste { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 15rem; gap: 0;
  box-shadow: var(--schatten-leiste); }
.wed__sprachen .klappwahl__hinweis { padding: var(--s2) var(--s4) 0; color: var(--leise); max-width: 15rem; }
.wed__sprachen .klappwahl__liste .knopf { margin: var(--s3) var(--s4) var(--s2); justify-self: start; }
@media (max-width: 640px) { .wed__sprachen .klappwahl__liste { position: static; box-shadow: none; } }
.feld__gruppe { margin: var(--s4) 0 var(--s2); font-size: var(--t-2); font-weight: 600;
  color: var(--leise); }
.feld__gruppe:first-of-type { margin-top: var(--s1); }
.wahlchip:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }

/* ---------- Große Auswahlkacheln (SOLL-REGEL-GESTALT-02): Auswahlpunkt mittig ---------- */
.wahlgross { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); border: 0; padding: 0; margin: 0; }
/* Keine einzelne Kachel allein in der letzten Reihe: sechs als 3 × 2, sieben und acht als zwei Reihen zu vier. */
@media (min-width: 561px) {
  .wahlgross:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wahlgross:has(> :nth-child(7):last-child), .wahlgross:has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wahlgross__k { position: relative; display: flex; align-items: center; min-height: 64px; padding: var(--s3) var(--s4); border: 1px solid var(--linie);
  border-radius: var(--r-kachel); background: var(--flaeche); cursor: pointer; font-weight: 600; line-height: 1.3;
  transition: border-color var(--bewegung), background var(--bewegung); }
.wahlgross__k:hover { border-color: color-mix(in srgb, var(--aktion) 45%, var(--linie)); }
/* Ganze Wörter, lieber kleiner (Florian 22.10.2026): keine Silbentrennung; in einer schmalen Kachel wird die Schrift
   mit der Kachel kleiner („eingesamme|lt“ brach im WebKit bei 1440 px mitten im Wort). Nur ein Wort, das auch dann in
   keine Zeile passt (lange Adresse, Link, eingefügter Text), bricht zuletzt, statt über den Rand der Kachel zu laufen
   (Gesamtprüfung P20, 22.10.2026). */
.wahlgross__k { container-type: inline-size; }
/* Eine Schriftgröße für alle Gruppen eines Schritts: 9cqi ergab 16 px bei zwei breiten und 12 px bei sechs schmalen
   Kacheln („Art“ groß, „Wert“ klein, N-183 B020). Jetzt 14 px, nur in sehr schmalen Kacheln 13 px. */
.wahlgross__k > span { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; hyphens: manual; overflow-wrap: break-word;
  font-size: clamp(var(--t-2), 12cqi, var(--t-3)); }
/* Schmale Bildschirme: Kacheln mit Häkchen (Schalter der Weiteren Regeln) einspaltig, nie mitten im Wort umbrochen. */
@media (max-width: 560px) { .wahlgross:has(.wahlgross__k--mehr) { grid-template-columns: minmax(0, 1fr); } }
/* Die „+“-Kachel trägt Feld und runden Knopf (am Handy 44 px); in einer halben Reihe blieb für „Weitere …“ kaum Platz
   und der Platzhalter war abgeschnitten (N-187, NB13). Am Handy nimmt sie darum die ganze Reihe. */
@media (max-width: 560px) { .wahlgross > .wahlgross__k.wahlplus { grid-column: 1 / -1; } }
.wahlgross__k small { font-weight: 400; color: var(--leise); font-size: var(--t-1); }
.wahlgross__k input { position: absolute; opacity: 0; pointer-events: none; }
.wahlgross__k--mehr { padding-left: var(--s7); }
.wahlgross__k--mehr::before { content: ''; position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px;
  border: 1.5px solid var(--leise); border-radius: var(--r-s); }
.wahlgross__k--mehr:has(input:checked)::before { content: '✓'; color: var(--aktion-auf); background: var(--aktion);
  border-color: var(--aktion); font-size: var(--t-2); line-height: 15px; text-align: center; }
.wahlgross__k:has(input:checked) { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion);
  background: var(--aktion-zart); color: var(--tinte); }
.wahlgross__k:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.wahlgross__k.ist-gesperrt, .wahlchip.ist-gesperrt { opacity: .55; cursor: not-allowed; background: var(--flaeche-2); }
/* Ein fester Wert ist ein Feld, kein Absatz: Die Lesebreite der Absätze (68ch) machte „Anmelden mit“ am Rechner
   schmaler als die Felder darüber und darunter (N-187, NB55). */
.feld__fest { margin: 0; max-width: none; padding: var(--s3) var(--s4); border: 1px dashed var(--linie); border-radius: var(--r-feld);
  color: var(--leise); }

/* ---------- Tabellen (höchstens vier Spalten, darunter scrollt nur die Tabelle) ---------- */
.tabelle-rahmen { position: relative; overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-3); font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle;
  /* Nur an Wortgrenzen: `anywhere` machte die kleinste Breite jeder Spalte zu einem Buchstaben, und schmale Tabellen
     brachen Buchstabe für Buchstabe („VE R- FÜ G- BAR“, N-183 B012/B032). Am Handy sind Zeilen Karten (unten). */
  overflow-wrap: break-word; }
/* Die Kopfzeile in Mono-Großschrift ist die eine Ausnahme von „keine gesperrten Großbuchstaben“: Sie steht über
   Spalten, nicht über einem Wert (Bento-Grün). */
.tabelle thead th { height: 44px; padding-block: var(--s2); background: var(--flaeche);
  font: 400 var(--t-1)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.tabelle tbody tr { height: 60px; }
/* Nur die letzte Zeile der ganzen Tabelle ohne Linie: Hinter „Mehr anzeigen“ steht ein zweiter Abschnitt, vor dem die
   Linie unter Zeile 20 bleiben muss (Review N-188, N1); zugeklappt endet die Tabelle mit Zeile 20. */
.tabelle tbody:last-of-type > tr:last-child > * { border-bottom: 0; }
.uebersicht__liste:has(.liste__mehr:not([open])) tbody:has(+ .ue__weitere) > tr:last-child > * { border-bottom: 0; }
.tabelle tbody th { font-weight: 600; }
.tabelle__knoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.tabelle-leer { color: var(--leise); margin: 0; padding: var(--s2) 0; }
@media (max-width: 560px) { .oeffnung th, .oeffnung td { padding: var(--s3) var(--s3); } }
/* Am Handy (bis 700 px) ist jede Tabellenzeile eine eigene Kachel (N-188, Florian 03.11.2026: „mit Kacheln sauber
   gestalten, dass man nicht diese hässlichen Brüche in der Tabelle hat“; ersetzt die Regel aus N-183, B056–B075):
   oben fett der Zeilenkopf, rechts der Pfeil; darunter je Spalte eine Zeile mit dem Spaltennamen links und dem Wert
   rechts; leere Zellen entfallen; Knöpfe klein unten rechts. Am Rechner bleibt die Tabelle, wie sie ist. Die
   Öffnungszeiten haben ihre eigene Regel. */
@media (max-width: 700px) {
  .tabelle-rahmen:has(> .tabelle:not(.oeffnung)) { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tabelle:not(.oeffnung) { display: block; width: 100%; }
  .tabelle:not(.oeffnung) > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabelle:not(.oeffnung) > tbody { display: flex; flex-direction: column; gap: 12px; }
  .tabelle:not(.oeffnung) > tbody + tbody { margin-top: 12px; }
  .tabelle:not(.oeffnung) > tbody > tr { display: flex; flex-direction: column; align-items: stretch; gap: 8px; position: relative;
    height: auto; min-height: 0; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche); }
  .tabelle:not(.oeffnung) > tbody > tr > th, .tabelle:not(.oeffnung) > tbody > tr > td { display: block; width: 100%; min-width: 0;
    padding: 0; border: 0; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
    background: none; font-size: var(--t-3); }
  .tabelle:not(.oeffnung) > tbody > tr > :first-child { font-size: 16px; font-weight: 700; padding-right: 28px; }
  /* Steht der Zeilenkopf nicht vorn (Knöpfe der Eigenen Website), ist er trotzdem der Titel der Kachel. */
  .tabelle:not(.oeffnung) > tbody > tr > th[scope="row"] { order: -1; font-size: 16px; font-weight: 700; padding-right: 28px; }
  .tabelle:not(.oeffnung) > tbody > tr > td:empty { display: none; }
  .tabelle:not(.oeffnung) td[data-titel]:not([data-titel=""]) { display: grid; grid-template-columns: 92px minmax(0, 1fr);
    align-items: center; column-gap: var(--s3); }
  /* Der Spaltenname klein und leise in normaler Schrift, keine Großbuchstaben, keine Festbreitenschrift. */
  .tabelle:not(.oeffnung) td[data-titel]:not([data-titel=""])::before { content: attr(data-titel); font-family: inherit; font-size: 13px;
    font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--leise); }
  /* Abzeichen (Stand) linksbündig, nicht über die ganze Spalte gezogen. */
  .tabelle:not(.oeffnung) td .chip { justify-self: start; }
  .tabelle:not(.oeffnung) td.tabelle__zahl { text-align: left; }
  /* Knöpfe klein unten rechts, nicht über die volle Breite. */
  .tabelle:not(.oeffnung) .tabelle__knoepfe, .tabelle:not(.oeffnung) .uebersicht__knoepfe { display: flex; flex-wrap: wrap;
    justify-content: flex-end; gap: var(--s2); }
  .tabelle:not(.oeffnung) .tabelle__knoepfe .knopf, .tabelle:not(.oeffnung) .uebersicht__knoepfe .knopf { min-height: 44px;
    padding: var(--s1) var(--s4); font-size: var(--t-2); flex: 0 0 auto; }
  /* Der Pfeil zur Detailseite sitzt oben rechts in der Kachel, statt eine eigene Zeile zu belegen. */
  .tabelle:not(.oeffnung) .ue__pfeil { position: absolute; top: 18px; right: 18px; }
  /* Eine Zelle, die nur den Pfeil trägt, nimmt keinen Platz im Fluss ein (sonst 8 px Abstand mehr, Review N-188 N2). */
  .tabelle:not(.oeffnung) > tbody > tr > td.tabelle__pfeil,
  .tabelle:not(.oeffnung) > tbody > tr > td:has(> .uebersicht__knoepfe > .ue__pfeil:only-child) { position: absolute; top: 0; right: 0;
    width: auto; height: 0; overflow: visible; }
}

/* Lange Listen der Übersichten (N-188, NB107): erst 20 Einträge, der Rest hinter „Mehr anzeigen (n)“, das an Ort und
   Stelle aufklappt wie bei den Kacheln (N-183); ohne Skript über `details`. */
.uebersicht__liste:has(.liste__mehr:not([open])) .ue__weitere { display: none; }
.liste__mehr { margin-top: var(--s3); }
.liste__mehr > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--kante-feld);
  border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-size: var(--t-3); font-weight: 600; cursor: pointer;
  list-style: none; white-space: nowrap; }
.liste__mehr > summary::-webkit-details-marker { display: none; }
.liste__mehr > summary:hover { border-color: var(--aktion); }
.liste__mehr > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.liste__mehr .liste__zu, .liste__mehr[open] .liste__auf { display: none; }
.liste__mehr[open] .liste__zu { display: inline; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) var(--s5); min-height: 44px; hyphens: manual;
  border-radius: var(--r-pille); border: 1px solid var(--knopf); background: var(--knopf); color: var(--knopf-auf); font: inherit;
  font-size: var(--t-3); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: transform var(--bewegung), background var(--bewegung), border-color var(--bewegung); }
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf:active { transform: translateY(1px); }
.knopf--zweit { background: var(--flaeche); color: var(--tinte); border-color: var(--kante-feld); }
.knopf--zweit:hover { background: var(--flaeche); border-color: var(--aktion); }
.knopf--klein { min-height: 36px; padding: var(--s1) var(--s4); font-size: var(--t-2); }
.knopf:disabled, .knopf[aria-disabled="true"] { background: var(--flaeche-2); color: var(--leise); border-color: var(--linie);
  cursor: not-allowed; filter: none; transform: none; }

/* ---------- Weiter-Leiste (SOLL-REGEL-GESTALT-03): Knopfzeile am Ende der Hauptkachel ----------
   Keine eigene schwebende Kachel: Die schwebende Fläche legte sich in vielen Abläufen über Felder (Florian 03.11.:
   „diese Buttons können direkt auf der Hauptkachel sitzen“). Zurück links, der Hauptknopf rechts. */
.weiter-leiste { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border-top: 1px solid var(--linie); padding-top: var(--s4); margin-top: var(--s5); }
.weiter-leiste__rechts { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
@media (max-width: 900px) {
  .weiter-leiste { gap: var(--s2); }
  .weiter-leiste .knopf { min-inline-size: 0; padding-inline: var(--s4); }
  .weiter-leiste__rechts { flex-wrap: nowrap; gap: var(--s1); }
}
/* Schmal (Telefon) mit mehreren Endknöpfen bricht die Leiste um, statt seitlich zu scrollen: Zurück und Nebenknöpfe
   oben, der Endknopf in voller Breite darunter wie in der Vorlage (Review N-19, Nr. 7). */
@media (max-width: 560px) {
  .weiter-leiste:has(.weiter-leiste__rechts > .knopf + .knopf) { flex-wrap: wrap; }
  .weiter-leiste__rechts:has(> .knopf + .knopf) { display: contents; }
  .weiter-leiste__rechts > .knopf + .knopf:last-child { order: 2; flex: 1 0 100%; }
  .weiter-leiste__rechts:has(> .knopf + .knopf) > .knopf:first-child { margin-left: auto; }
}

/* ---------- Felder ---------- */
.felder { display: grid; gap: var(--s5); }
/* Formulare außerhalb der Abläufe (Mein Konto, Sprache, Mail nach dem Kauf): Felder mit Abstand untereinander. Ohne
   Raster klebte jeder Feldname am Feld darüber (N-187, NB55). */
.formular { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
/* Den Abstand gibt das Raster; ein Absatz darin (Hinweis, Knopfzeile) bringt keinen eigenen Rand mit. */
.formular > p { margin: 0; }
.feld { display: grid; gap: var(--s2); min-width: 0; align-content: start; border: 0; padding: 0; margin: 0; }
.feld > label, .feld > legend, .feld__titel { font-size: var(--t-3); font-weight: 600; color: var(--tinte); padding: 0; margin-bottom: var(--s1); }
.feld__hilfe { font-size: var(--t-2); color: var(--leise); }
/* Postleitzahl und Ort (N-222): PLZ schmal, Ort breit, nebeneinander wie an der Kasse; in den USA Ort, Bundesstaat,
   ZIP-Code. Am Handy untereinander. */
.plz-ort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s4); align-items: start; }
.plz-ort--us { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.plz-ort__staat[hidden] { display: none; }
/* Die Beschriftung der Postleitzahl je Land; die Seite wechselt sie mit dem Land (plz-ort.js). */
.plz-ort--us .plz-ort__sonst, .plz-ort:not(.plz-ort--us) .plz-ort__us { display: none; }
@media (max-width: 560px) { .plz-ort, .plz-ort--us { grid-template-columns: minmax(0, 1fr); } }
form.hochladen > .feld__hilfe > a { display: inline-flex; align-items: center; min-height: 44px; }
.feld__fehler { font-size: var(--t-2); color: var(--fehler); font-weight: 600; margin: var(--s1) 0 0; }
.eingabe { font: inherit; min-height: 48px; padding: var(--s2) var(--s4); border: 1px solid var(--kante-feld); border-radius: var(--r-feld);
  background: var(--flaeche); color: var(--tinte); width: 100%; min-width: 0; }
textarea.eingabe { min-height: 110px; padding-block: var(--s3); line-height: 1.45; resize: vertical; }
.eingabe:hover { border-color: var(--tinte); }
.eingabe:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--aktion); }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); background: var(--fehler-zart); }
.eingabe:disabled { background: var(--flaeche-2); color: var(--leise); cursor: not-allowed; }
/* Geldfelder: sichtbarer Abstand zwischen Feld und „€“ (SOLL-REGEL-GESTALT-10) */
.einheitfeld { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; }
.einheitfeld > .eingabe { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.einheitfeld > span { color: var(--leise); }

/* ---------- Hinweise und Kästen (SOLL-REGEL-GESTALT-03): weiße Fläche mit Linie, nicht Grau auf Grau ---------- */
/* Ohne Symbol: Symbole stehen nur in Navigation, Seitenkopf und Links (SOLL-BER-21). Die Art zeigt der getönte Rand und
   die Farbe der Überschrift; der dicke Streifen links wirkte wie ein Baukasten-Hinweis und lag neben Kacheln, Karten und
   Tabellen als einzige Form mit ungleichen Kanten (N-173). */
.hinweis { display: grid; gap: var(--s1); padding: var(--s4); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie);
  min-width: 0; }
.hinweis b { font-weight: 700; }
.hinweis--klapp summary { cursor: pointer; font-weight: 700; }
.hinweis--klapp ul { margin: var(--s2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
/* Mehrzeilige Texte (eine Nachricht von der Website) behalten ihre Zeilen (Nachprüfung P12). */
.hinweis > p { white-space: pre-line; }
.hinweis--warnung { border-color: color-mix(in srgb, var(--gehalten) 45%, var(--linie)); }
.hinweis--warnung > b { color: var(--gehalten); }
/* Eine Fehlermeldung darf nicht wie ein Eingabefeld aussehen (N-183, B165): roter Balken links, zart getönt, fett. */
.hinweis--fehler { border-color: color-mix(in srgb, var(--fehler) 55%, var(--linie)); border-left: 4px solid var(--fehler);
  background: color-mix(in srgb, var(--fehler) 7%, var(--flaeche)); }
.hinweis--fehler > p { font-weight: 600; }
.hinweis--fehler > b { color: var(--fehler); }

/* ---------- Datum und Uhrzeit nur per Widget (SOLL-REGEL-GESTALT-10) ---------- */
/* Der Kalender nimmt im Büro die volle Breite ein und zeigt den Monat des gewählten „von“-Datums. */
.kalender { display: grid; gap: var(--s2); width: 100%; margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); }
.kalender__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.kalender__kopf b { text-transform: capitalize; }
/* Wochenknöpfe im Kalender: am Handy kurz („‹“, „Heute“, „›“) in einer Reihe; die langen Namen brachen die drei
   Knöpfe auf zwei Reihen (N-187, NB11). Der lange Name ist dann nur verborgen, nicht entfernt: Er bleibt der Name
   zum Vorlesen, und „Heute“ steht als sichtbares Wort mit im Namen. */
.kalender__kurz { display: none; }
@media (max-width: 560px) {
  .uebersicht__kopf.kalender__wochen { flex-wrap: nowrap; }
  .kalender__wochen .kalender__lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; }
  .kalender__wochen .kalender__kurz { display: inline; }
  .kalender__wochen .knopf { min-width: 44px; }
}
.kalender__nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche); color: inherit;
  cursor: pointer; display: grid; place-items: center; padding: 0; text-decoration: none; }
.kalender__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); text-align: center; }
.kalender__raster small { color: var(--leise); font-size: var(--t-1); white-space: nowrap; hyphens: none; }
.kalender__tag { position: relative; display: grid; place-items: center; height: 46px; border: 1px solid transparent; border-radius: var(--r-feld);
  background: var(--flaeche-2); font: inherit; font-size: var(--t-2); cursor: pointer; padding: 0; color: inherit; }
.kalender__tag input { position: absolute; opacity: 0; width: 0; }
.kalender__tag--leer { background: transparent; cursor: default; }
.kalender__tag--bereich { outline: 2px solid var(--aktion); outline-offset: -2px; }
.kalender__tag:has(input:checked) { background: var(--aktion); color: var(--aktion-auf); font-weight: 700; }
.kalender__tag:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: var(--s2); }
.zeit { display: block; position: relative; font: inherit; font-weight: 600; text-align: center; padding: var(--s3) 0;
  border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); cursor: pointer; font-variant-numeric: tabular-nums; }
.zeit input { position: absolute; opacity: 0; width: 0; }
.zeit--belegt { opacity: .4; text-decoration: line-through; cursor: default; }
.zeit:has(input:checked) { background: var(--aktion); color: var(--aktion-auf); border-color: transparent; }
.zeit:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }

/* ---------- Runde Kreise: feste, gleiche Breite und Höhe (SOLL-REGEL-GESTALT-04) ---------- */
.kreis { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--flaeche-2);
  font-weight: 700; }
.punkt { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; background: var(--leise); }

/* ---------- Fehlerseiten ---------- */
.fehlerseite { display: grid; place-items: center; min-height: 70vh; padding: var(--s6) var(--s4); }
.fehlerseite .karte { max-width: 560px; width: 100%; gap: var(--s4); }
.fehlerseite h1 { font-size: var(--t-7); letter-spacing: -.02em; }
.fehlerseite p { color: var(--leise); }
.fehlerseite__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Seitenbausteine (Paket N-10): Übersicht, Detailseite, Auswertungsgrafiken ----------
   Wie die Vorlage (`uebersichtSeite`, `detailSeite`, `vKz` … `vBalken`). Längen der Grafiken stehen als SVG-Geometrie
   im HTML, weil die Inhaltsrichtlinie keine Inline-Stile erlaubt; hier stehen nur Farben und Maße der Rahmen. */
.ph-caret-right::before { content: "\e13a"; }
.ph-file-text::before { content: "\e23a"; }
.ph-users::before { content: "\e4d6"; }
.ph-envelope-simple::before { content: "\e218"; }
.ph-calendar-check::before { content: "\e712"; }
.ph-package::before { content: "\e390"; }
.ph-wrench::before { content: "\e5d4"; }
.ph-seal-check::before { content: "\e606"; }
.ph-puzzle-piece::before { content: "\e596"; }
.ph-copy::before { content: "\e1ca"; }
.ph-ticket::before { content: "\e490"; }
.ph-gift::before { content: "\e276"; }
.ph-tag::before { content: "\e478"; }
.ph-list-checks::before { content: "\eadc"; }
.ph-archive::before { content: "\e00c"; }
.ph-warning::before { content: "\e4e0"; }
.ph-question::before { content: "\e3e8"; }
.ph-user-circle::before { content: "\e4c4"; }
/* Kopf von „Rechnungen und Belege“ und „Preisregeln und Aktionen“: Ohne eigene Zeichenregel blieb dort ein leerer
   Kreis bzw. gar kein Symbol (N-183, B150/B201). Codepunkte aus Phosphor 2 wie die übrigen. */
.ph-receipt::before { content: "\e3ec"; }
.ph-percent::before { content: "\e3b6"; }

.leer { color: var(--leise); margin: 0; }

/* Werkzeugzeile: Suche, Ausgabe-Knopf, „+ Neu“; Filter als Chips */
.uebersicht__kopf { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.uebersicht__suche { flex: 1 1 220px; max-width: 320px; min-width: 0; }
.uebersicht__suche .eingabe { min-height: 44px; border-radius: var(--r-pille); border-color: var(--linie); }
.uebersicht__filter { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.uebersicht__filter > span { font-size: var(--t-2); font-weight: 600; color: var(--leise); margin-right: var(--s1); }
.filterchip { display: inline-flex; align-items: center; min-height: 36px; padding: var(--s1) var(--s4); border: 1px solid var(--kante-feld);
  border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); font-size: var(--t-3); font-weight: 600;
  text-decoration: none; }
.filterchip:hover { border-color: var(--aktion); }
.filterchip--an { background: var(--knopf); color: var(--knopf-auf); border-color: transparent; }

/* Tabelle der Übersicht: die ganze Zeile öffnet die Detailseite, Knöpfe und Haken liegen darüber */
/* Die Liste darf schmaler werden als die Tabelle; dann scrollt nur die Tabelle, nie die Seite (SOLL-REGEL-GESTALT-08).
   Wörter brechen in der Tabelle nur an Wortgrenzen, sonst würde sie bei 390 px Buchstabe für Buchstabe umbrechen. */
.uebersicht__liste, .uebersicht__auswahl { min-width: 0; }
/* Ohne positionierten Rahmen läge die nur vorgelesene Spaltenüberschrift außerhalb des Scrollbereichs. */
.uebersicht__liste .tabelle-rahmen { position: relative; }
.uetab { overflow-wrap: normal; }
.uetab th, .uetab td { padding: var(--s2) var(--s4); }
.uetab thead th { font-size: var(--t-1); }
.uetab tbody th { font-size: var(--t-3); font-weight: 600; }
.ue__zeile { position: relative; cursor: pointer; }
.ue__zeile:hover > th, .ue__zeile:hover > td { background: var(--flaeche-2); }
.ue__link { color: inherit; text-decoration: none; }
.ue__link::after { content: ""; position: absolute; inset: 0; }
.ue__link:focus-visible { outline: none; }
.ue__zeile:has(.ue__link:focus-visible) { outline: 2px solid var(--aktion); outline-offset: -2px; }
/* Betreiber-Bereich (N-63): Adresse und Branche unter dem Namen eines Betriebs, Formular „Sperren“ in der Karte. */
.plattform__adresse { display: block; font-size: var(--t-2); font-weight: 400; color: var(--leise); }
.detail .feldblock { display: grid; gap: var(--s4); }
.uebersicht__knoepfe { display: flex; gap: var(--s2); flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.uebersicht__knoepfe .knopf, .ue__haken { position: relative; z-index: 1; }
.ue__haken { width: 18px; height: 18px; margin: 0 var(--s3) 0 0; vertical-align: middle; accent-color: var(--aktion); }
.ue__pfeil { color: var(--leise); }
/* Unterzeile unter dem Namen einer Zeile (Paket N-233: E-Mail oder „über … von …“). */
.ue__unter { display: block; margin-top: 2px; color: var(--leise); font-size: var(--t-1); font-weight: 400; }
.uebersicht__mehrfach { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
/* Knopfreihen über einer Seite brechen bis Tabletbreite um: drei Knöpfe nebeneinander schoben die Seite bei 390 px
   seitlich aus dem Bildschirm (N-183, B053/B081/B093–B096). */
@media (max-width: 760px) { .uebersicht__knoepfe { justify-content: flex-start; flex-wrap: wrap; } }

/* Detailseite: Rücklink, Kopf, Aktionen oben (sticky), Kette, Bereiche */
/* Jede Büroseite steht mittig (Leitung zum Review N-10); die Detailseite ist schmaler als die Spalte. */
.detail { display: grid; gap: var(--s4); max-width: 1100px; width: 100%; margin-inline: auto; min-width: 0; }
.detail__zurueck { justify-self: start; font-size: var(--t-3); }
.detail__kopf { display: flex; justify-content: space-between; align-items: start; gap: var(--s3); flex-wrap: wrap; }
.detail__mailtext { white-space: pre-line; overflow-wrap: anywhere; }
.detail__kopf > div { min-width: 0; }
.detail__kopf h1 { margin: 0; font-size: var(--t-7); letter-spacing: -.02em; }
.detail__kopf p { margin: var(--s2) 0 0; color: var(--leise); font-size: var(--t-3); }
.detail__aktionen { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) 0; background: var(--grund);
  position: sticky; top: var(--s4); z-index: 5; }
.detail__mehr { position: relative; }
.detail__mehr > summary { list-style: none; cursor: pointer; }
.detail__mehr > summary::-webkit-details-marker { display: none; }
.detail__mehr-liste { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; display: grid; gap: var(--s2); min-width: 220px;
  padding: var(--s3); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); }
.detail__mehr-liste .knopf { justify-content: flex-start; width: 100%; }
/* Auf dem Handy klappt „Weitere“ unter dem Knopf auf, nicht schwebend (Befund 42). */
@media (max-width: 560px) {
  .detail__mehr { flex-basis: 100%; }
  .detail__mehr-liste { position: static; margin-top: var(--s2); min-width: 0; box-shadow: none; }
}
.detail__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s4); align-items: start; }
.dliste { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.dliste dt { color: var(--leise); }
.dliste dd { margin: 0; font-weight: 600; }
/* Ein langes Wort bricht nur, wenn es allein nicht in die Zeile passt (nicht „Jahresmitgliedschaf-t“, Review N-18). */
.dliste dt, .dliste dd { overflow-wrap: break-word; }
/* Erklärlisten („Wo der Gutschein erscheint“): rechts stehen Sätze, keine Werte; fett und in zwei schmalen Spalten
   waren sie am Handy kaum zu lesen (N-187, NB15). Am Handy steht der Satz unter seinem Namen. */
.dliste--erklaerung dd { font-weight: 400; }
@media (max-width: 560px) {
  .dliste--erklaerung { grid-template-columns: minmax(0, 1fr); gap: var(--s1) 0; }
  .dliste--erklaerung dd { margin-bottom: var(--s2); }
}
/* Funde im Prüfbericht der eigenen Website (Bilderlauf B12): eine Spalte in Lesebreite statt der Zweierliste der
   Angaben mit ihrer 140-px-Spalte, in der Hostnamen mitten im Wort brachen. Ein Wort bricht nur noch, wenn es allein
   nicht in die Zeile passt; das ist praktisch nur eine lange Adresse. */
.befunde { margin: var(--s2) 0 var(--s4); padding-left: 1.25em; display: grid; gap: var(--s2); max-width: 75ch; }
.befunde li { overflow-wrap: break-word; }
.dzeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
/* Zeilen mit sauberer Kachellinie statt grau gefüllter Fläche (Florian 03.11.2026, N-183: „keine grauen
   Kachelhintergründe“, Vorgang-Detail und Angemeldete Geräte). Wird es eng, rutschen Chip und Knopf unter den Text. */
.dzeilen li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3);
  border-radius: var(--r-feld); background: var(--flaeche); border: 1px solid var(--linie); }
.dzeilen li > span:first-child { flex: 1 1 200px; }
.dzeilen span { display: grid; min-width: 0; }
.dzeilen small { color: var(--leise); }
/* Mein Konto › Angemeldete Geräte (Paket N-176, Florian 03.11.2026): keine graue Kachel, nur der schwarze Rahmen. Ein
   langer Gerätename ohne Leerzeichen bricht in der Zeile statt über den Rand zu ragen (N-183, B027). */
.geraete li { background: none; border: 1px solid var(--tinte); }
.geraete b { overflow-wrap: anywhere; }
/* Was die Kundschaft selbst schrieb (Nachricht aus der Kasse, Paket N-130): Zeilen wie getippt, lange Wörter und Links
   brechen um statt die Karte zu sprengen. */
.fremdtext { white-space: pre-line; overflow-wrap: anywhere; }
/* Domain (N34): Domain mit Chip, DNS-Einträge und Buchungslink zum Kopieren. */
.domain { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-5); margin: 0 0 var(--s2); }
.domain small { display: block; color: var(--leise); font-size: var(--t-3); }
/* Die feste Adresse ist ein langes Wort ohne Leerzeichen: Am Handy bricht sie in der Kachel um, statt über ihren Rand
   zu ragen (K7, Paket N-234); ohne min-width: 0 hielte das Flex-Element sie in voller Breite fest. */
.domain > b { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.dns li { flex-wrap: wrap; }
.dns__wert { word-break: break-all; font-size: var(--t-2); }
.dkette { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.dkette li { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) var(--s2) var(--s2); border-radius: var(--r-pille);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--leise); font-weight: 600; font-size: var(--t-3); }
.dkette li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--flaeche);
  border: 1px solid var(--linie); font-size: var(--t-1); }
.dkette .dkette--fertig { color: var(--tinte); }
.dkette .dkette--fertig span { background: var(--chip-gruen-grund); color: var(--chip-gruen); border-color: transparent; }
/* Text in Tinte: Aktionsfarbe auf zartem Grund erreicht hell nur 4,4:1 (Review N-10). */
.dkette .dkette--jetzt { background: var(--aktion-zart); color: var(--tinte); }
.dkette .dkette--jetzt span { background: var(--aktion); color: var(--aktion-auf); border-color: transparent; }

/* Auswertung: Kennzahlen und Grafikkarten im Raster */
.viz__block { display: grid; gap: var(--s4); }
.viz__raster { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: stretch; }
.viz__raster > * { flex: 1 1 280px; min-width: 0; }
.viz__raster > .viz__karte--breit { flex-basis: 100%; }
.viz__raster > .viz__karte--halb { flex-basis: 420px; }
.viz__karte { align-content: start; }
.viz__karte:has(.viz__ringwrap) { grid-template-rows: auto 1fr; }
.viz__rechts { font-size: var(--t-2); font-weight: 600; color: var(--leise); }
.viz__unter { margin: 0; color: var(--leise); font-size: var(--t-2); text-align: center; }
.viz__f--aktion { background: var(--aktion); fill: var(--aktion); }
.viz__f--gruen { background: var(--linie-gruen); fill: var(--linie-gruen); }
.viz__f--gelb { background: var(--linie-gelb); fill: var(--linie-gelb); }
.viz__f--rot { background: var(--linie-rot); fill: var(--linie-rot); }
.viz__f--blau { background: var(--linie-blau); fill: var(--linie-blau); }
.viz__f--lila { background: var(--linie-lila); fill: var(--linie-lila); }
.viz__f--grau { background: color-mix(in srgb, var(--leise) 35%, var(--flaeche)); fill: color-mix(in srgb, var(--leise) 35%, var(--flaeche)); }
/* Ring: feste, gleiche Breite und Höhe (SOLL-REGEL-GESTALT-04) */
.viz__ringwrap { display: grid; justify-items: center; align-self: center; gap: var(--s2); }
.viz__ring { position: relative; width: 132px; height: 132px; border-radius: 50%; flex: none; }
.viz__ring svg { position: absolute; inset: 0; display: block; }
.viz__ring-grund, .viz__ring-wert { fill: none; stroke-width: 17px; }
.viz__ring-grund { stroke: var(--flaeche-2); }
.viz__ring-wert { stroke: var(--aktion); }
.viz__ring--gruen .viz__ring-wert { stroke: var(--linie-gruen); }
.viz__ring--blau .viz__ring-wert { stroke: var(--linie-blau); }
.viz__ring--gelb .viz__ring-wert { stroke: var(--linie-gelb); }
.viz__ring--rot .viz__ring-wert { stroke: var(--linie-rot); }
.viz__ring--lila .viz__ring-wert { stroke: var(--linie-lila); }
.viz__ring span { position: absolute; top: 17px; left: 17px; width: 98px; height: 98px; border-radius: 50%; display: grid;
  place-items: center; align-content: center; text-align: center; background: var(--flaeche); }
.viz__ring b { font-size: var(--t-6); line-height: 1.1; }
/* Kacheln mittig statt links, wenn eine Gruppe nur wenige hat (Florian: Kacheln zentriert, nicht volle Breite). */
.kachelseite { display: grid; gap: var(--s6); min-width: 0; }
/* Auf den Kachelseiten steht jede Gruppe ohne Kasten: Überschrift, darunter das Kachelraster (Vorlage `.gruppenblock`).
   Wenige Kacheln stehen mittig (Florian: Kacheln zentriert, nicht volle Breite). */
.kachelseite > .karte { background: none; border: 0; padding: 0; gap: var(--s4); }
/* Bento: Kacheln füllen die Breite unter ihrer Überschrift; ein schmales, mittiges Raster stand eingerückt neben der
   linksbündigen Überschrift. */
.kachelseite .kacheln { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--s3); }
@media (max-width: 760px) { .kachelseite .kacheln { grid-template-columns: minmax(0, 1fr); } }
.viz__ring small { color: var(--leise); font-size: var(--t-1); }
/* Anteile: ein Band, die Fugen sind ein Strich in Flächenfarbe */
.viz__anteile { height: 14px; border-radius: var(--r-pille); overflow: hidden; }
.viz__anteile svg { display: block; }
.viz__anteile rect { stroke: var(--flaeche); stroke-width: 3px; }
.viz__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-2); }
.viz__legende li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; }
.viz__legende li:has(> span:only-child) { grid-template-columns: minmax(0, 1fr); color: var(--leise); }
.viz__legende--zeile { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.viz__legende--zeile li { grid-template-columns: 10px auto; }
.viz__legende i { width: 10px; height: 10px; border-radius: var(--r-s); }
/* Säulen: gleich breite Spalten, Wert darüber, Beschriftung darunter */
.viz__saeulen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); align-items: end; height: 150px; }
.viz__saeulen > span { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; min-height: 0; gap: var(--s1);
  text-align: center; min-width: 0; }
.viz__saeulen em { font-style: normal; font-size: var(--t-1); color: var(--leise); white-space: nowrap; }
/* Ohne Mindesthöhe 0 setzte die eingebaute SVG-Höhe von 150 px die Zeile auf und schöbe die Beschriftung hinaus. */
.viz__bahn { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
.viz__saeulen rect { opacity: .45; }
.viz__saeulen--doppel rect { opacity: .55; }
.viz__saeulen .viz__s--hervor rect { opacity: 1; }
.viz__saeulen .viz__s--hervor em { color: var(--tinte); font-weight: 700; }
/* Beschriftungen nie abschneiden (Leitung zum Review N-10): bei vielen Säulen kleiner und zweizeilig („KW“/„42“). */
.viz__saeulen small { color: var(--leise); font-size: var(--t-1); white-space: nowrap; line-height: 1.15; }
.viz__saeulen--viele em, .viz__saeulen--viele small { font-size: var(--t-1); }
.viz__saeulen--viele small { white-space: normal; overflow-wrap: normal; }
/* Fortschritt und Balken: Spur in Fläche 2, Füllung in der Farbe */
.viz__fort { display: grid; gap: var(--s2); }
.viz__fort + .viz__fort { margin-top: var(--s2); }
.viz__fort-kopf { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-3); }
.viz__fort-kopf span { color: var(--leise); }
.viz__fort-balken { display: block; width: 100%; height: 12px; border-radius: var(--r-pille); background: var(--flaeche-2); }
.viz__balken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.viz__balken li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: center; font-size: var(--t-2); }
.viz__balken span { overflow-wrap: anywhere; }
.viz__balken b { font-variant-numeric: tabular-nums; }
.viz__balken-bahn { grid-column: 1 / -1; display: block; width: 100%; height: 10px; border-radius: var(--r-pille); background: var(--flaeche-2); }
/* Lange Balkenlisten: die ersten offen, der Rest hinter „Alle anzeigen (n)“ (NB50). */
.viz__mehr { margin-top: var(--s2); }
.viz__mehr > summary { cursor: pointer; color: var(--aktion); font-weight: 600; font-size: var(--t-2); }
.viz__mehr[open] > summary { margin-bottom: var(--s2); }
@media (max-width: 560px) {
  .viz__saeulen small { white-space: normal; overflow-wrap: normal; }
  .viz__saeulen { gap: var(--s1); }
  .viz__saeulen em { visibility: hidden; }
  .viz__saeulen .viz__s--hervor em { visibility: visible; font-size: var(--t-1); overflow: visible; }
  .viz__saeulen small { font-size: var(--t-1); }
}
/* ---------- Zugang: Anmelden, Registrieren, Passwort (Paket N-03, Bento-Grün N-60) ----------
   Oben auf der schwarzen Bühne die Marke, darunter das helle Panel; links die große Kachel (912 px wie die Abläufe im
   Büro, Florian 17.10.), rechts die dunkle Schrittkachel. Am Handy stehen beide untereinander. */
.zugang { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: 0 var(--s5) var(--s5); background: var(--buehne); }
.zugang__kopf { display: flex; gap: var(--s3); align-items: center; padding: var(--s4) var(--s1); color: var(--kohle-text); }
.zugang__kopf b { display: block; font-size: var(--t-4); font-weight: 600; }
.zugang__kopf small { display: block; color: var(--leiste-leise); font-size: var(--t-1); }
.zugang__haupt { min-width: 0; display: grid; grid-template-columns: minmax(0, 912px) minmax(260px, 300px); gap: var(--s5);
  justify-content: center; align-items: start; padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 40px) var(--s6);
  background: var(--grund); border-radius: var(--r-panel); }
.zugang__breite { box-sizing: border-box; display: grid; gap: var(--s6); padding: clamp(18px, 3vw, 32px);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.zugang__breite .feldblock { display: grid; gap: var(--s5); }
/* Die Spalte schrumpft mit dem Bildschirm; ohne das schob die Sprachzeile die Kachel bei 320 px breiter (N-42). */
.zugang__breite, .zugang__breite .feldblock { grid-template-columns: minmax(0, 1fr); }
.zugang__breite > *, .zugang__breite .feldblock > *, .zugang__breite .feld { min-width: 0; }
.zugang__breite .knopf { white-space: normal; }
.zugang__seite { position: sticky; top: var(--s5); min-width: 0; padding: var(--s5); border-radius: var(--r-karte); }
.zugang__innen { display: grid; gap: var(--s4); }
.zugang__seite a { color: var(--aktion); font-weight: 600; }
.zugang__kopfzeile { display: grid; gap: var(--s3); }
.zugang__name { display: flex; align-items: center; gap: var(--s3); font-weight: 600; font-size: var(--t-3); color: var(--leise); }
.zugang__name i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--gruen); }
.zugang__rest { display: flex; align-items: baseline; gap: var(--s2); }
.zugang__rest b { font: 700 var(--t-6)/1 var(--anzeige); letter-spacing: -.02em; }
.zugang__rest span { font: 700 var(--t-5)/1.2 var(--anzeige); letter-spacing: -.015em; white-space: nowrap; }
.zugang__jetzt { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--linie); }
.zugang__jetzt span { font-size: var(--t-2); color: var(--leise); }
.zugang__jetzt b { font: 700 var(--t-4)/1.25 var(--anzeige); }
.zugang__schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.zugang__schritte li { display: flex; gap: var(--s3); align-items: center; min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-feld);
  font-size: var(--t-3); color: var(--leise); }
.zugang__schritte li.zugang__schritt--jetzt { background: var(--flaeche-2); color: var(--tinte); font-weight: 600; }
.zugang__schritte .kreis { width: 26px; height: 26px; font: 400 var(--t-1)/1 var(--mono); background: transparent;
  border: 1.5px solid var(--kante-feld); }
.zugang__schritt--jetzt .kreis { border-color: var(--gruen); color: var(--gruen); }
.zugang__schritt--fertig .kreis { background: var(--gruen); border-color: var(--gruen); color: var(--gruen-auf); }
/* Anmelden: eine große Kachel, in der Mitte geteilt (Florian 26.10.2026) – links hell zum Anmelden, rechts direkt
   angrenzend dunkel zum Registrieren; außen rund, innen ohne Fuge. Am Handy untereinander. */
.zugang__haupt--geteilt { grid-template-columns: minmax(0, 560px) minmax(0, 480px); gap: 0; align-items: stretch;
  align-content: center; }
/* Links grün, rechts immer das Dunkelgrau der Schrittkachel (Florian 26.10.2026): eigene Tokens für die grüne Fläche, Felder bleiben weiß, Schrift und Knopf schwarz –
   in hell und dunkel gleich, Kontrast Schwarz auf Grün rund 11:1. */
.zugang__haupt--geteilt .zugang__breite { border-radius: var(--r-karte) 0 0 var(--r-karte); border: 0;
  padding: clamp(24px, 4vw, 48px); align-content: start; color-scheme: light;
  --flaeche: #FFFFFF; --flaeche-2: #F1F6EC; --tinte: #0F0F0F; --leise: #183A0C; --linie: rgba(15, 15, 15, .18);
  --kante-feld: rgba(15, 15, 15, .55); --aktion: #0F0F0F; --fokus: #0F0F0F; --knopf: #0F0F0F; --knopf-auf: #F8F8F8;
  --knopf-hover: #24540F; background: var(--gruen); color: var(--tinte); }
.zugang__haupt--geteilt .zugang__seite { position: static; display: grid; align-content: center;
  border-radius: 0 var(--r-karte) var(--r-karte) 0; padding: clamp(24px, 4vw, 48px); }
.zugang__neu { display: grid; gap: var(--s4); justify-items: start; }
.zugang__neu h2 { font-size: var(--t-7); letter-spacing: -.02em; color: var(--tinte); }
.zugang__neu p { color: var(--leise); font-size: var(--t-4); }
.zugang__los { justify-self: start; min-height: 48px; padding-inline: var(--s6); }
.zugang__seite a.zugang__los, .zugang__breite .zugang__los { color: var(--knopf-auf); }
@media (max-width: 900px) {
  .zugang__haupt.zugang__haupt--geteilt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zugang__haupt--geteilt .zugang__breite { border-radius: var(--r-karte) var(--r-karte) 0 0; }
  .zugang__haupt--geteilt .zugang__seite { border-radius: 0 0 var(--r-karte) var(--r-karte); }
}
/* Anmelden (Paket N-228, G8): Die Sprachen stehen im Quelltext nach „Kostenlos registrieren“ (letzte in der
   Tab-Reihenfolge), zu sehen sind sie wie vorher unten in der grünen Hälfte, mit demselben Abstand zum Formular. */
.zugang__haupt--geteilt { grid-template-rows: auto 1fr; }
.zugang__haupt--geteilt > .zugang__breite { grid-column: 1; grid-row: 1; padding-bottom: 0;
  border-radius: var(--r-karte) 0 0 0; }
.zugang__haupt--geteilt > .zugang__seite { grid-column: 2; grid-row: 1 / span 2; }
.zugang__haupt--geteilt > .zugang__sprachen { grid-column: 1; grid-row: 2; align-content: flex-start; margin: 0;
  padding: calc(2 * var(--s6)) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); border-radius: 0 0 0 var(--r-karte);
  color-scheme: light; --tinte: #0F0F0F; --fokus: #0F0F0F; --aktion: #0F0F0F; background: var(--gruen); color: var(--tinte); }
@media (max-width: 900px) {
  .zugang__haupt--geteilt { grid-template-rows: none; }
  .zugang__haupt--geteilt > .zugang__breite { border-radius: var(--r-karte) var(--r-karte) 0 0; }
  .zugang__haupt--geteilt > .zugang__sprachen { grid-row: 2; border-radius: 0; }
  .zugang__haupt--geteilt > .zugang__seite { grid-column: 1; grid-row: 3; }
}
.zugang__hilfe { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--linie); font-size: var(--t-3); }
.zugang__hilfe p { color: var(--leise); }
.zugang__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.zugang__mail { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); border: 1px solid var(--linie); border-radius: var(--r-kachel); background: var(--flaeche); }
.zugang__mail-kopf { color: var(--leise); font-size: var(--t-3); }
.zugang__mail-knopf { justify-self: start; pointer-events: none; }
/* Passwort verdeckt mit Knopf „Anzeigen“ rechts daneben */
.passwortfeld { display: flex; gap: var(--s2); align-items: center; min-width: 0; }
.passwortfeld > .eingabe { flex: 1 1 auto; }
/* Der Hilfetext unter der Frage gilt nur, solange die Schrittkachel oben steht (N-183). */
.zugang__unten { display: none; }
@media (max-width: 900px) {
  .zugang__haupt { grid-template-columns: minmax(0, 912px); }
  .zugang__seite { position: static; }
  /* Mit Restschritten steht die Schrittkachel als schmale Leiste über dem Formular („N Schritte übrig“ und der
     aktuelle Schritt), ihr Hilfetext unter dem Formular (N-183, B017/B164); sonst steht sie ganz darunter. */
  .zugang__seite:has(.zugang__rest) { order: -1; padding: var(--s3) var(--s4); border-radius: var(--r-kachel); }
  .zugang__seite:has(.zugang__rest) .zugang__innen { gap: var(--s2); }
  .zugang__seite:has(.zugang__rest) :is(.zugang__name, .zugang__hilfe) { display: none; }
  .zugang__seite:has(.zugang__rest) .zugang__rest b { font-size: var(--t-5); }
  .zugang__seite:has(.zugang__rest) .zugang__rest span { font-size: var(--t-3); }
  .zugang__seite:has(.zugang__rest) .zugang__jetzt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2);
    padding-top: 0; border-top: 0; }
  .zugang__seite:has(.zugang__rest) .zugang__jetzt b { font: 600 var(--t-3)/1.3 var(--schrift); }
  .zugang__haupt:has(.zugang__rest) > .zugang__unten { display: grid; }
  .zugang__unten .zugang__hilfe { padding: var(--s4) var(--s5); border: 1px solid var(--linie); border-radius: var(--r-karte);
    background: var(--flaeche); }
  .zugang__schritte { display: none; }
}
@media (max-width: 760px) {
  .zugang { padding: 0; }
  .zugang__kopf { padding: var(--s4); }
  .zugang__haupt { border-radius: var(--r-panel) var(--r-panel) 0 0; padding: var(--s4) var(--s4) var(--s6); gap: var(--s4); }
  .zugang__breite { padding: var(--s5) var(--s4); }
  .zugang__seite { padding: var(--s4) var(--s4); }
}

/* Fortschritt der Schrittkachel: `progress` statt einer Breite im Stil, weil die Inhaltsrichtlinie keine Inline-Stile
   erlaubt. */
.fortschritt { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: var(--r-pille);
  background: var(--flaeche-2); overflow: hidden; color: var(--gruen); }
.fortschritt::-webkit-progress-bar { background: var(--flaeche-2); border-radius: var(--r-pille); }
.fortschritt::-webkit-progress-value { background: var(--gruen); border-radius: var(--r-pille); }
.fortschritt::-moz-progress-bar { background: var(--gruen); border-radius: var(--r-pille); }

/* ---------- Ablauf: Schritt, Schrittkachel, Weiter-Leiste (Paket N-04, SOLL-ABL-GRUNDLAGE-*) ----------
   Links die große weiße Kachel (höchstens 912 px) mit Schrittkopf und Feldern, rechts die dunkle Schrittkachel mit
   „N Schritte übrig“, Fortschritt und nummerierten Schritten (Florian 17.10., Bento-Grün N-60). Bis 1240 px steht die
   Schrittkachel kompakt über dem Schritt. */
.ablauf { display: grid; grid-template-columns: minmax(0, 912px) minmax(260px, 300px); gap: var(--s5); justify-content: center;
  align-items: start; min-width: 0; }
.ablauf__haupt { display: grid; gap: var(--s5); min-width: 0; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-karte); padding: clamp(18px, 3vw, 32px); }
/* Kästen in der großen Kachel haben die kleinere Ecke: Eine innere Fläche mit derselben Rundung wie ihr Rahmen sah wie
   eine zweite, lose aufgelegte Karte aus (N-173). */
.ablauf__haupt .karte, .zugang__breite .karte { border-radius: var(--r-kachel); padding: var(--s4) var(--s5); }
.ablauf__seite { position: sticky; top: var(--s5); display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r-karte);
  min-width: 0; }
.ablauf__kopf { display: grid; gap: var(--s3); }
/* Ein langer Ablaufname bricht nur an Wortgrenzen, nie mitten im Wort (Review N-19, Nr. 13; N-183). */
.ablauf__was { font-weight: 600; font-size: var(--t-3); color: var(--leise); display: flex; gap: var(--s3); align-items: center;
  hyphens: manual; overflow-wrap: break-word; }
.ablauf__was::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--gruen); }
.ablauf__rest { display: flex; align-items: baseline; gap: var(--s2); }
.ablauf__rest b { font: 700 var(--t-6)/1 var(--anzeige); letter-spacing: -.02em; }
.ablauf__rest span { font: 700 var(--t-5)/1.2 var(--anzeige); letter-spacing: -.015em; }
.ablauf__jetzt { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--linie); }
.ablauf__jetzt span { font-size: var(--t-2); color: var(--leise); }
.ablauf__jetzt b { font: 700 var(--t-4)/1.25 var(--anzeige); }
.ablauf__schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.ablauf__schritte li { display: flex; gap: var(--s3); align-items: center; min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-feld);
  font-size: var(--t-3); color: var(--leise); }
.ablauf__schritte li > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--kante-feld); font: 400 var(--t-1)/1 var(--mono); }
.ablauf__schritte button, .ablauf__schritte a { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: var(--s2) 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.ablauf__schritte button:hover, .ablauf__schritte a:hover { color: var(--tinte); text-decoration: underline; }
.ablauf__schritt--fertig { color: var(--tinte) !important; }
.ablauf__schritt--fertig > span { background: var(--gruen); border-color: var(--gruen) !important; color: var(--gruen-auf); }
.ablauf__schritt--jetzt { background: var(--flaeche-2); color: var(--tinte) !important; font-weight: 600; }
.ablauf__schritt--jetzt > span { border-color: var(--gruen) !important; color: var(--gruen); }
.ablauf__hilfe { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--linie); font-size: var(--t-3); }
.ablauf__hilfe p { color: var(--leise); }
.ablauf__neu { justify-self: start; font-size: var(--t-3); color: var(--aktion); font-weight: 600; }
.ablauf__hinweis { margin: 0; font-size: var(--t-2); color: var(--leise); }
/* Den Abstand zur Knopfzeile gibt schon der Spaltenabstand der großen Kachel. */
.ablauf .weiter-leiste, .zugang__breite > .weiter-leiste, .feldblock > .weiter-leiste, .formular > .weiter-leiste { margin-top: 0; }
/* Ohne schwebende Leiste fehlt sonst jeder Abstand unten: angesprungene Felder dürfen nicht unter der
   festen Reiterleiste am Handy landen (WCAG 2.4.11). */
html { scroll-padding-bottom: var(--s7); }
@media (max-width: 760px) { html:has(.rahmen--leiste) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* Der Hilfetext unter der Hauptkachel gilt nur, solange die Schrittkachel oben steht (N-183). */
.ablauf__hilfe--unten { display: none; }
@media (max-width: 1240px) {
  .ablauf { grid-template-columns: minmax(0, 912px); }
  .ablauf__seite { position: static; order: -1; gap: var(--s3); padding: var(--s4) var(--s5); }
  .ablauf__schritte, .ablauf__hilfe { display: none; }
  .ablauf__hilfe.ablauf__hilfe--unten { display: grid; padding: var(--s4) var(--s5); border: 1px solid var(--linie);
    border-radius: var(--r-karte); background: var(--flaeche); }
}
/* Am Handy ist die Schrittkachel eine schmale Leiste: „N Schritte übrig“ und der aktuelle Schritt, sonst nichts; die
   Frage darunter ist sofort im Bild (N-183, B017). */
@media (max-width: 760px) {
  .ablauf__seite { padding: var(--s3) var(--s4); gap: var(--s2); border-radius: var(--r-kachel); }
  .ablauf__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
  .ablauf__was, .ablauf__neu { display: none; }
  .ablauf__rest b { font-size: var(--t-5); }
  .ablauf__rest span { font-size: var(--t-3); }
  .ablauf__jetzt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); padding-top: 0; border-top: 0; }
  .ablauf__jetzt b { font: 600 var(--t-3)/1.3 var(--schrift); }
}
.zustimmung { display: grid; gap: var(--s3); border: 0; padding: 0; margin: 0 0 var(--s2); }
.ankreuzen { display: flex; gap: var(--s3); align-items: flex-start; min-height: 44px; }
/* Ein langer Satz neben dem Haken (Rechte an der Website) bleibt in der Spalte lesbar (N-183). */
.ankreuzen > span { min-width: 0; line-height: 1.45; overflow-wrap: break-word; }
.ankreuzen input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--aktion); flex: none; }
/* Felder eines Schritts */
.feldblock { display: grid; gap: var(--s5); }
.feldhuelle { display: grid; gap: var(--s4); min-width: 0; }
.feldhuelle > :is(fieldset, .feld) { margin: 0; }
.feldhuelle--fehler .eingabe { border-color: var(--fehler); }
.feld__titel { margin: 0; }
.eingabe--kurz { max-width: 160px; }
.eingabe--abstand { margin-top: var(--s2); }
.felder--zwei { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.artmarke { font: 600 var(--t-2) var(--schrift); color: var(--aktion); }

/* Auswahlkacheln mit Titel und Untertitel; Auswahlpunkt mittig (SOLL-BER-21 Nr. 2) */
.wahlkarten { display: grid; gap: var(--s3); border: 0; padding: 0; margin: 0; min-width: 0; }
.wahlkarten label { display: flex; gap: var(--s3); align-items: center; padding: var(--s4) var(--s4); border: 1px solid var(--linie);
  border-radius: var(--r-kachel); background: var(--flaeche); cursor: pointer; min-width: 0; }
.wahlkarten input { flex: none; margin: 0; accent-color: var(--aktion); }
.wahlkarten label > span { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; hyphens: manual; overflow-wrap: break-word; }
.wahlkarten small { color: var(--leise); font-size: var(--t-2); }
.wahlkarten label:has(input:checked) { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); background: var(--aktion-zart); }
.wahlkarten label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Der Weg zu einer ausgegrauten Wahl („E-Mail ergänzen“, NB51) bleibt anklickbar. */
.wahlkarten__weg { cursor: pointer; font-weight: 600; }
.wahlkarten--zwei { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wahlkarten--drei { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.einrichten__andere { margin-top: var(--s4); }
.einrichten__andere > summary { cursor: pointer; color: var(--aktion); font-weight: 600; min-height: 44px;
  padding-block: var(--s2); margin-bottom: var(--s3); }
/* Anlegen: „Individuell anlegen“ als große Kachel über den Vorlagen des Pakets. */
.vorlagen { display: grid; gap: var(--s3); }
.vorlagen .vorlage-eigen { display: flex; gap: var(--s4); align-items: center; min-height: 92px; padding: var(--s5) var(--s5);
  border: 1px solid var(--aktion); border-radius: var(--r-kachel); background: var(--aktion-zart); cursor: pointer; font-size: inherit;
  font-weight: 400; }
.vorlage-eigen input { position: absolute; opacity: 0; pointer-events: none; }
.vorlage-eigen > span:last-child { display: grid; gap: 2px; min-width: 0; }
.vorlagen .vorlage-eigen b { font-size: var(--t-4); font-weight: 700; }
.vorlagen .vorlage-eigen small { color: var(--leise); font-size: var(--t-2); font-weight: 400; }
.vorlage-eigen__plus { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--aktion); color: var(--aktion-auf); font-size: 24px; font-weight: 600; }
.vorlagen .vorlage-eigen:has(input:checked) { box-shadow: inset 0 0 0 1px var(--aktion); }
.vorlage-eigen:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.vorlagen__titel { display: grid; gap: 2px; margin: var(--s4) 0 0; }
.vorlagen__titel small { color: var(--leise); font-size: var(--t-1); }
.vorlagen__mehr > summary { cursor: pointer; color: var(--aktion); text-decoration: underline; padding: var(--s2) 0; }
.vorlagen__mehr > .wahlkarten { margin-top: var(--s2); }
.kontakt__schnell { margin-bottom: var(--s1); }
.kontakt__neu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); padding: var(--s4);
  border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); }
.treffer { display: grid; gap: var(--s2); }
.kontakt__doch { margin-top: var(--s3); }
.kontakt__doch > summary { cursor: pointer; font-weight: 600; color: var(--aktion); }
.kontakt__doch[open] > summary { margin-bottom: var(--s3); }
.wahlgross__k--eigen span { font-style: italic; }
.eigen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.eigen__ein { width: auto; min-width: 140px; }
.eigen__zahl { width: 120px; min-width: 0; }
.eigen span { color: var(--leise); }

/* Angebotskacheln: je Art eine Gruppe, mehrere wählbar */
.kachelgruppe { margin: var(--s2) 0 0; font-size: var(--t-2); color: var(--leise); }
.angebotskacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s3); border: 0; padding: 0;
  margin: 0; }
.akachel { position: relative; display: grid; align-content: start; gap: var(--s1); padding: var(--s4); border: 1px solid var(--linie);
  border-radius: var(--r-kachel); background: var(--flaeche); cursor: pointer; min-width: 0; }
.akachel input { position: absolute; opacity: 0; width: 0; }
.akachel small { color: var(--leise); }
.akachel em { font-style: normal; font-size: var(--t-1); font-weight: 600; }
.akachel__frei { color: var(--frei); }
.akachel__spaeter { color: var(--gehalten); }
.akachel:has(input:checked) { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); background: var(--aktion-zart); }
.akachel:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }

/* Menge je Zubehör: −, Zahl, + (SOLL-ABL-GRUNDLAGE-MENGEN) */
.mengen { display: grid; gap: var(--s2); }
.mengen__zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); }
.mengen__zeile > span:first-child { display: grid; min-width: 0; }
.mengen__zeile small { color: var(--leise); }
.mengen__zeile--an { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.mengen__stepper { display: inline-flex; align-items: center; gap: var(--s3); }
.mengen__stepper output { min-width: 1.5em; text-align: center; font-weight: 700; font-size: var(--t-4); }
.mengen__einheit { color: var(--leise); font-size: var(--t-3); white-space: nowrap; }
.mengen__k { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche); color: inherit;
  font: 600 var(--t-5)/1 var(--schrift); cursor: pointer; flex: none; padding: 0; }
.mengen__k:hover { border-color: var(--aktion); }
.mengen__k:disabled { opacity: .4; cursor: default; }

/* Datum und Zeit: Schnellwahl, Kalendertage als Knöpfe mit Stand (SOLL-ABL-GRUNDLAGE-DATUM) */
.tagwahl { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tagwahl__chip { position: relative; padding: var(--s2) var(--s4); border: 1px solid var(--linie); border-radius: var(--r-pille);
  background: var(--flaeche); cursor: pointer; font-weight: 600; }
.tagwahl__chip input { position: absolute; opacity: 0; width: 0; }
.tagwahl__chip:has(input:checked) { background: var(--knopf); color: var(--knopf-auf); border-color: transparent; }
.tagwahl__chip:has(input:focus-visible) { outline: 2px solid var(--aktion); outline-offset: 2px; }
.tagwahl__chip--jetzt { font-weight: 700; }
button.kalender__tag:disabled { opacity: .35; cursor: default; }
.kalender__nav:disabled { opacity: .35; cursor: default; }
.kalender__tag--frei { background: var(--frei-zart); }
.kalender__tag--wenig { background: var(--gehalten-zart); }
.kalender__tag--voll { background: var(--fehler-zart); }
.kalender__tag--zu { background: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 4px, var(--flaeche) 4px,
  var(--flaeche) 8px); }
.kalender__tag--wahl { background: var(--aktion) !important; color: var(--aktion-auf); font-weight: 700; }
.kalender__legende { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; font-size: var(--t-1); color: var(--leise); align-items: center; }
.kalender__legende span[class^="kalender__tag"] { padding: var(--s1) var(--s2); border-radius: var(--r-s); color: var(--tinte); }
.zeit:has(input:disabled) { cursor: default; }
.blockzeile { margin: var(--s1) 0 0; font-weight: 600; }
.jetztkarte { display: grid; gap: var(--s1); padding: var(--s4) var(--s4); border-radius: var(--r-kachel); background: var(--aktion); color: var(--aktion-auf); }
.jetztkarte small { opacity: .9; }
.zeitspanne { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.zeitspanne .eingabe { width: auto; min-width: 110px; }
.aufklapp summary { cursor: pointer; font-weight: 600; color: var(--aktion); }
.aufklapp { display: grid; gap: var(--s2); }
/* Formulare in einer Aufklappzeile stehen im selben Raster wie die Felder eines Ablaufs (N-173). */
.aufklapp > form { display: grid; gap: var(--s3); min-width: 0; }
.aufklapp > form > .knopf { justify-self: start; }
/* Rechtstexte im Büro nutzen die Bausteine der Website (website.css); hier gelten Ecken und Gewichte des Büros. */
.rechtstexte { min-width: 0; width: 100%; max-width: 100%; }
.aufklapp.rechtstext { min-width: 0; max-width: 100%; border-radius: var(--r-feld); }
.aufklapp.rechtstext summary { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.aufklapp.rechtstext summary .chip { max-width: 100%; white-space: normal; }
.aufklapp.rechtstext b, .aufklapp.rechtstext strong { font-weight: 700; }
.terminvorschau { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2); }
.terminvorschau li { padding: var(--s3) var(--s3); border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); font-size: var(--t-3); }
.terminvorschau li small { display: block; color: var(--leise); }
.terminvorschau li.zu { opacity: .55; text-decoration: line-through; }
.belg { border-collapse: separate; border-spacing: 3px; font-size: var(--t-1); }
.belg th { font-weight: 600; color: var(--leise); text-align: left; white-space: nowrap; padding-right: var(--s2); }
/* Das Raster scrollt in sich, Kopf und Namen bleiben stehen: Die schwebende Weiter-Leiste lag sonst über den unteren
   Zeilen und der Bildlaufleiste (P12 Bestand). */
.tabelle-rahmen:has(> .belg) { max-height: min(56vh, 520px); overflow: auto; overscroll-behavior: contain; }
.belg thead th { position: sticky; top: 0; z-index: 1; background: var(--flaeche); }
.belg tbody th { position: sticky; left: 0; z-index: 1; background: var(--flaeche); }
.bel { display: block; width: 26px; height: 22px; border-radius: var(--r-s); border: 0; padding: 0; }
.bel--frei { background: var(--frei-zart); }
button.bel--frei { cursor: pointer; }
.bel--zu { background: var(--flaeche-2); }
.bel--belegt { background: var(--aktion); }
.bel--vorbei { background: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 3px, var(--flaeche) 3px,
  var(--flaeche) 6px); }
.bel--geschlossen { background: transparent; box-shadow: inset 0 0 0 1px var(--linie); }
.bel--wahl { background: var(--aktion) !important; }
span.bel { display: inline-block; vertical-align: middle; width: 16px; height: 12px; }
.belg span.bel { width: 26px; height: 22px; }

/* Kästen: Vorgabe aus der Kategorie, Zusammenfassung, Preis, Kette, Mail */
.vorgabe { display: grid; gap: var(--s2); padding: var(--s4) var(--s4); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); }
.vorgabe h3 { margin: 0; font-size: var(--t-3); }
.vorgabe dl, .zusammen { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0;
  font-size: var(--t-3); }
.vorgabe dt, .zusammen dt { color: var(--leise); }
.vorgabe dd, .zusammen dd { margin: 0; }
/* Mehrzeilige Angaben (Punkte, Beschreibung) behalten ihre Zeilen (Nachprüfung P12). */
.zusammen dd { white-space: pre-line; }
.vorgabe dd small { display: block; color: var(--leise); font-size: var(--t-1); }
.zusammen { font-size: var(--t-3); gap: var(--s2) var(--s4); }
@media (max-width: 560px) { .zusammen, .vorgabe dl { grid-template-columns: minmax(0, 1fr); gap: var(--s1) 0; } .zusammen dd { margin-bottom: var(--s2); } }
/* Kästen mit kurzen Beträgen (`vorgabe--werte`, Tagesübersicht): „5 · 172,96 €“ steht am Handy rechts neben seinem
   Namen, nicht darunter (N-187, NB14); der Name behält mindestens die Hälfte. Andere Kästen mit Sätzen als Werten
   bleiben untereinander. */
@media (max-width: 560px) {
  .vorgabe--werte dl { grid-template-columns: minmax(50%, 1fr) minmax(0, max-content); gap: var(--s2) var(--s3); }
  .vorgabe--werte dd { text-align: right; }
}
.preisliste { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: var(--s2) 0; margin: 0; font-size: var(--t-3); }
.preisliste dt small { display: block; color: var(--leise); font-size: var(--t-1); }
.preisliste dd { margin: 0; padding-left: var(--s4); text-align: right; font-variant-numeric: tabular-nums; }
.preisliste .minus { color: var(--frei); }
.preisliste .summe { font-weight: 700; border-top: 1px solid var(--linie); padding-top: var(--s2); }
.preisliste .leise { color: var(--leise); font-size: var(--t-2); }
.betroffen { margin: var(--s2) 0 0; padding-left: var(--s4); }
.differenz p + p { margin-top: var(--s1); }

/* Ausstattung, Tabellen, Dateien */
.aus { display: grid; gap: var(--s3); }
.aus__gruppe { border: 1px solid var(--linie); border-radius: var(--r-kachel); padding: var(--s1) var(--s4) var(--s3); margin: 0; display: grid; gap: var(--s3); min-width: 0; }
.aus__gruppe legend { font-weight: 600; padding: 0 var(--s2); }
.aus__neu { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.aus__neu .eingabe { width: auto; flex: 1 1 160px; }
.zeilen { display: grid; gap: var(--s2); }
.zeile { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)) auto; gap: var(--s2); align-items: center; }
.zeilen--1 .zeile { --spalten: 1; }
.zeilen--2 .zeile { --spalten: 2; }
.zeilen--3 .zeile { --spalten: 3; }
.zeilen--4 .zeile { --spalten: 4; }
.zeilen--5 .zeile { --spalten: 5; }
.zeile > * { min-width: 0; }
.zeile--kopf small { color: var(--leise); }
/* Feste Spalte (welche eigene Rubrik die Zeile ist, N-216): lesbar wie ein Feld, aber ohne Rahmen zum Tippen. */
.zeile__fest { display: flex; align-items: center; border-color: transparent; background: transparent; padding-left: 0; font-weight: 600; overflow-wrap: anywhere; }
.zeile--termin { grid-template-columns: minmax(150px, 1.4fr) minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.knopf--entfernen { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; color: var(--fehler);
  background: var(--fehler-zart); border-color: transparent; }
@media (max-width: 560px) {
  .zeile, .zeile--termin { grid-template-columns: 1fr 1fr auto; }
  .zeile > .breit { grid-column: 1 / -1; }
  .zeile > span[aria-hidden] { display: none; }
  .zeile--kopf { display: none; }
}
.ablage { border: 1px dashed var(--kante-feld); border-radius: var(--r-kachel); padding: var(--s5); text-align: center; color: var(--leise); display: grid;
  gap: var(--s2); justify-items: center; }
.ablage label { cursor: pointer; }
.ablage__handy { display: none; }
@media (max-width: 760px), (pointer: coarse) {
  .ablage__ziehen { display: none; }
  .ablage__handy { display: inline; }
  .ablage label > .ablage__handy { display: block; }
  .ablage label { display: grid; gap: var(--s3); justify-items: center; }
}
.ablage__datei { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ablage__liste { margin: 0; padding: 0; list-style: none; color: var(--tinte); }
/* Ziehen-oder-Auswählen-Feld (N-179, `bausteine/dateifeld.html`): beim Ziehen hervorgehoben, gewählte Dateien mit Namen. */
.ablage--ziehen { border-color: var(--aktion); background: var(--aktion-zart); }
.ablage--laedt { opacity: .6; pointer-events: none; }
.ablage__gewaehlt { color: var(--tinte); overflow-wrap: anywhere; }
.ablage__gewaehlt:empty { display: none; }
.bm { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.bm__bild { margin: 0; border: 1px solid var(--linie); border-radius: var(--r-kachel); overflow: hidden; background: var(--flaeche); display: grid; }
.bm__bild--titel { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.bm__vorschau { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--aktion-zart), var(--flaeche-2)); }
.bm__marke { position: absolute; top: 8px; left: 8px; padding: var(--s1) var(--s2); border-radius: var(--r-pille); background: var(--aktion);
  color: var(--aktion-auf); font-size: var(--t-1); font-weight: 700; }
.bm figcaption { display: grid; gap: var(--s2); padding: var(--s3); }
.bm figcaption small { color: var(--leise); }
.bm__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s1); }
.bm__neu { display: grid; place-items: center; align-content: center; gap: var(--s1); min-height: 200px; border: 1px dashed var(--kante-feld);
  border-radius: var(--r-kachel); background: var(--flaeche); cursor: pointer; text-align: center; padding: var(--s3); }
.bm__neu small { color: var(--leise); }

/* Öffnungszeiten bei 390 px gestapelt (SOLL-REGEL-GESTALT-08) */
@media (max-width: 560px) {
  table.oeffnung thead { display: none; }
  table.oeffnung, table.oeffnung tbody { display: block; }
  table.oeffnung tr { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s2); padding: var(--s3) var(--s3); border-bottom: 1px solid var(--linie); }
  table.oeffnung tbody tr { height: auto; }
  table.oeffnung th, table.oeffnung td { padding: 0; border: 0; }
  table.oeffnung th { grid-column: 1 / -1; }
}

/* Seite mit Speichern und Bearbeiten: Bereiche untereinander, beim Bearbeiten auf- und zuklappbar */
/* Derselbe Abstand zwischen Kacheln wie im übrigen Büro (24 px; Florian zur Eigenen Website: „Abstände zwischen
   Kacheln beachten“, N-183). */
.bereiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.eigene-pruefadresse { min-width: 0; overflow-wrap: anywhere; }
/* Formulare der Eigenen Website am Handy: Auswahl und Knöpfe über die volle Breite (Florian: „eine Katastrophe“). */
@media (max-width: 560px) {
  .hochladen .knopf, .hochladen select.eingabe { width: 100%; }
  .hochladen .tabelle__knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); }
  #eigene-stand .karte__kopf > .knopf { width: 100%; }
}
.bereich { gap: var(--s3); }
.bereich h2 { font-size: var(--t-5); letter-spacing: -.015em; }
/* Einstellungen: jeder Bereich eine weiße Kachel, die Kopfzeile klappt auf und zu (Vorlage `.bereich`). */
details.bereich > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3); min-height: 40px; }
details.bereich > summary::-webkit-details-marker { display: none; }
details.bereich > summary::after { content: "–"; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--flaeche-2); font-size: var(--t-5); line-height: 1; color: var(--tinte); }
details.bereich:not([open]) > summary::after { content: "+"; }

/* Ergebnisseite */
.ergebnis__hinweis { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ergebnis__hinweis p { flex: 1 1 220px; min-width: 0; }
.ergebnis__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--linie); }
@media (max-width: 900px) { .ergebnis__knoepfe .knopf { flex: 1 1 100%; } }
.mail h2 { display: flex; gap: var(--s2); align-items: center; }
.feld > .knopf, .feldhuelle > .knopf { justify-self: start; }
table.oeffnung select.eingabe { padding-inline: var(--s2) var(--s1); }

/* Datumsknopf: Datum in Tabellen, Kursterminen und als eigener Wert öffnet den deutschen Monatskalender. */
.datumknopf { min-width: 0; }
.datumknopf__knopf { display: flex; align-items: center; cursor: pointer; list-style: none; white-space: nowrap; }
.datumknopf__knopf::-webkit-details-marker { display: none; }
.datumknopf[open] .kalender { margin-top: var(--s2); }
.zeile > .datumknopf[open], .eigen > .datumknopf[open] { grid-column: 1 / -1; flex-basis: 100%; }
/* Schrittliste: kein Umbruch im Wort. */
.ablauf__rest span { white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 560px) {
  table.oeffnung tr { grid-template-columns: 1fr 1fr; }
  table.oeffnung td:first-of-type { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .zeilen .zeile:not(.zeile--termin) { grid-template-columns: 1fr 1fr; }
  .zeilen .zeile > .datumknopf, .zeilen .zeile > input.eingabe:not([type]) { grid-column: 1 / -1; }
  .zeilen .zeile > .knopf--entfernen { justify-self: start; }
}
/* Stundenfelder „Heute“ an der Ressource (SOLL-SEITE-28, Befund 37: belegt in voller Aktionsfarbe, lesbar). */
.dslots { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dslots span { padding: var(--s2) var(--s3); border-radius: var(--r-s); font-size: var(--t-2); font-weight: 600; }
.dslot--frei { background: color-mix(in srgb, var(--linie-gruen) 20%, var(--flaeche)); }
.dslot--belegt { background: var(--aktion); color: var(--aktion-auf); }
.viz__slots { justify-content: center; }

/* Ausdruck von Gutschein und Mehrfachkarte (Paket N-08): eine Karte, mittig, im Druck ohne Knöpfe. */
.ausdruck { display: grid; justify-items: center; align-content: start; gap: var(--s4); padding: var(--s6) var(--s4); background: var(--grund); min-height: 100vh; }
.ausdruck__karte { width: min(100%, 420px); padding: var(--s6) var(--s5); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); text-align: center; }
.ausdruck__karte h1 { margin: var(--s1) 0; font-size: var(--t-6); }
.ausdruck__betrieb, .ausdruck__unter, .ausdruck__hinweis { margin: 0; color: var(--leise); }
.ausdruck__code { margin: var(--s5) 0; font: 600 var(--t-6)/1.2 var(--mono); overflow-wrap: anywhere; }
.ausdruck__angaben { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.ausdruck__angaben div { display: flex; justify-content: space-between; gap: var(--s3); }
.ausdruck__angaben dt { color: var(--leise); }
.ausdruck__angaben dd { margin: 0; font-weight: 600; min-width: 0; text-align: right; overflow-wrap: anywhere; }
/* Vertrag eines Abos (Ablaufprüfung FLO-ABO): ein Blatt A4 mit Angaben und drei Unterschriftslinien. */
.ausdruck__blatt { min-width: 0; width: min(100%, 760px); padding: var(--s7) var(--s7); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); display: grid; gap: var(--s5); }
.ausdruck__blattkopf { display: flex; justify-content: space-between; gap: var(--s5); align-items: start; }
.ausdruck__blattkopf h1 { margin: 0; font-size: var(--t-6); }
.ausdruck__rechts { text-align: right; }
.ausdruck__abschnitt h2 { margin: 0 0 var(--s2); font-size: var(--t-4); }
.ausdruck__abschnitt .ausdruck__angaben { margin: 0; }
.ausdruck__satz { margin: 0; color: var(--leise); font-size: var(--t-3); }
.ausdruck__unterschriften { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.ausdruck__unterschriften span { display: block; height: 40px; border-bottom: 1px solid var(--tinte); }
.ausdruck__unterschriften small { color: var(--leise); }
/* Teilnehmerliste eines Kurstermins (Paket N-149): Kopf mit Logo und Akzentlinie, Tabelle zum Abhaken, Fuß. */
.ausdruck__blatt--liste { border-top: 4px solid var(--aktion); }
.ausdruck__logo { display: block; max-width: 160px; max-height: 56px; object-fit: contain; margin-bottom: var(--s2); }
.ausdruck__tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-3); }
.ausdruck__tabelle th, .ausdruck__tabelle td { padding: var(--s2); border-bottom: 1px solid var(--linie); text-align: left;
  vertical-align: top; overflow-wrap: anywhere; }
.ausdruck__tabelle thead th { color: var(--leise); font-weight: 600; }
.ausdruck__haken { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--tinte); border-radius: 3px; }
.ausdruck__notiz { width: 30%; }
.ausdruck__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin: 0; padding-top: var(--s3);
  border-top: 1px solid var(--linie); color: var(--leise); font-size: var(--t-2); }
/* Am Handy: weniger Rand, damit lange Zeilen (Pseudosprache, lange Tarifnamen) im Blatt bleiben (Gesamtprüfung BV-12). */
@media (max-width: 560px) { .ausdruck { padding: var(--s4) var(--s2); } .ausdruck__blatt { padding: var(--s5) var(--s4); } }
@media print { .ausdruck { background: none; padding: 0; } .ausdruck__leiste { display: none; }
  .ausdruck__blatt { border: 0; padding: 0; width: 100%; } .ausdruck__blatt--liste { border-top: 0; } }

/* ---------- Anschlüsse (Zahlungen einrichten, Kalender verbinden; Vorlage `zverb`) ---------- */
.anschluesse { display: grid; gap: var(--s3); }
.zverb { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s4); border-radius: var(--r-kachel); border: 1px solid var(--linie); background: var(--flaeche); }
.zverb > span { display: grid; min-width: 0; }
.zverb small { color: var(--leise); overflow-wrap: anywhere; }
.zverb--an { border-color: var(--linie-gruen); }
.zverb--an > span b::before { content: "✓ "; color: var(--frei); }
.zverb--aus { opacity: .6; }
.zverb__stripe { background: var(--stripe); border-color: var(--stripe); color: var(--stripe-auf); }
.abo-adresse { font-family: var(--mono); font-size: var(--t-1); overflow-wrap: anywhere; user-select: all; }
/* ---------- Dashboard, Aufgabenlisten, Kalender, Belegung, Auswertung (Paket N-17) ----------
   Übertragen aus der Vorlage (Darstellung „Büro mit Dashboard“, zweite Fassung „visuell ansprechender“), Farben nur
   über Tokens, damit hell und dunkel lesbar bleiben. Keine Symbole in Kacheln und Kennzahlen (SOLL-BER-21). */
.ph-magnifying-glass::before { content: "\e30c"; }
.ph-bell::before { content: "\e0ce"; }
.ph-check::before { content: "\e182"; }
a.tagwahl__chip { color: var(--tinte); text-decoration: none; }
.tagwahl__chip--an, a.tagwahl__chip--an { background: var(--knopf); color: var(--knopf-auf); border-color: transparent; }
.ortswahl .tagwahl__chip { padding: var(--s2) var(--s4); font-size: var(--t-3); }

.db { display: grid; gap: var(--s5); min-width: 0; }
.db__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4); }
.db__kopf > div:first-child { min-width: 0; flex: 1 1 320px; }
.db__kopf h1 { margin: 0; font-size: var(--t-7); letter-spacing: -.025em; line-height: 1.05; }
.db__datum { margin: var(--s2) 0 0; color: var(--leise); font-size: var(--t-3); }
.db__satz { margin: var(--s1) 0 0; color: var(--leise); font-size: var(--t-3); }
/* Kennzahlen als erste Bento-Reihe: „Als Nächstes“ dunkel und breit, die übrigen hell; vier in einer Reihe, ab 1240 px
   abwärts zwei, auf dem Handy zwei mit „Als Nächstes“ über beiden (SOLL-BER-10, SOLL-BER-21 Nr. 6). */
.db__zahlen { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr 1fr; gap: var(--s4); }
/* Weniger Kacheln (Aushilfe sieht nur zwei): die Zeile bleibt gefüllt statt halb leer (Gesamtprüfung BV-13). */
@media (min-width: 1241px) {
  .db__zahlen:has(> :nth-child(3):last-child) { grid-template-columns: 1.6fr 1.1fr 1fr; }
  .db__zahlen:has(> :nth-child(2):last-child) { grid-template-columns: 1.6fr 1fr; }
}
.db__zahl { position: relative; display: grid; align-content: end; gap: var(--s1); min-height: 168px; padding: var(--s5); border-radius: var(--r-karte);
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none;
  transition: border-color var(--bewegung), box-shadow var(--bewegung); min-width: 0; }
a.db__zahl:hover { border-color: color-mix(in srgb, var(--aktion) 45%, var(--linie)); }
.db__zahl small { font-size: var(--t-2); color: var(--leise); font-weight: 600; }
.db__zahl b { font: 700 var(--t-6)/1.1 var(--anzeige); letter-spacing: -.02em; }
.db__zahl span { color: var(--leise); font-size: var(--t-3); }
/* Der einzige Verlauf im Büro: ein ruhiger grüner Schein auf der dunklen Kachel „Als Nächstes“. */
/* Die Kachel ist Bezugsgröße für ihren Titel: Er wird kleiner statt ein langes Wort zu zerschneiden (N-188, NB108:
   „Öffnungszeiten“ brach bei 1280 px mitten im Wort; Regel „Überschriften ganze Wörter“). */
.db__zahl--hervor { container-type: inline-size; border-color: var(--kohle); padding-right: 88px;
  background: radial-gradient(420px 260px at 85% 110%, color-mix(in srgb, var(--gruen) 28%, transparent), transparent 70%), var(--kohle); }
.db__zahl--hervor b { font-size: min(var(--hervor-t, var(--t-7)), 11cqi); letter-spacing: -.03em; line-height: 1.05;
  overflow-wrap: normal; }
a.db__zahl--hervor:hover { border-color: var(--kohle); }
.db__zahl--walkin { background: var(--aktion-zart); border-color: transparent; }
.db__zahl--walkin small, .db__zahl--walkin span { color: var(--tinte); }
.db__zahl--walkin b { color: var(--tinte); }
/* Kerbe: oben rechts aus der Kachel geschnitten, in Panelfarbe, mit rundem Pfeilknopf (Vorlage `.kerbe`). */
.kerbe { position: absolute; top: -1px; right: -1px; width: 68px; height: 68px; display: flex; align-items: flex-start; justify-content: flex-end;
  background: var(--grund); border-bottom-left-radius: var(--r-karte); }
.kerbe::before, .kerbe::after { content: ""; position: absolute; width: var(--s5); height: var(--s5); pointer-events: none;
  background: radial-gradient(circle at 0 100%, transparent 23.5px, var(--grund) 24px); }
.kerbe::before { top: 0; left: calc(-1 * var(--s5)); }
.kerbe::after { top: 68px; right: 0; }
.kerbe i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--buehne); color: var(--gruen);
  font-style: normal; font-size: var(--t-5); transition: background var(--bewegung), color var(--bewegung); }
.kerbe i::before { content: "\2197"; }
a:hover > .kerbe i { background: var(--gruen); color: var(--gruen-auf); }

.db__karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: var(--s5); display: grid;
  gap: var(--s4); min-width: 0; align-content: start; }
.db__karte--breit { grid-column: 1 / -1; }
.db__karte--zart { background: var(--aktion-zart); border-color: transparent; }
.db__karte.flaeche-dunkel { border-color: var(--kohle); }
.db__karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.db__karte-kopf h2 { margin: 0; font-size: var(--t-5); letter-spacing: -.015em; }
.db__karte, .db__karte > * { min-width: 0; }
.db .chip { max-width: 100%; white-space: normal; }
.db__links { display: flex; gap: var(--s4); flex-wrap: wrap; }
.db__link { font-size: var(--t-2); color: var(--aktion); font-weight: 600; display: inline-flex; gap: var(--s1); align-items: center;
  min-width: 44px;
  text-decoration: none; }
.db__link:hover { text-decoration: underline; }
/* „Am Tresen“ steht ohne Kasten als Gruppe mit Kacheln wie die Kachelseiten. */
.db__tresen { background: none; border: 0; padding: 0; }
.db__tresen .kacheln { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
/* Durchsicht 19.10.: höchstens vier je Reihe, damit „einlösen“ unter „ausgeben“ steht und keine Kachel allein
   in der zweiten Reihe hängt. */
@media (min-width: 1240px) { .db__tresen .kacheln { grid-template-columns: repeat(4, 1fr); } }
.db__leer { color: var(--leise); margin: 0; padding: var(--s2) 0; list-style: none; }

/* Tageslauf: Zeitleiste mit Punkt je Eintrag und der Markierung „jetzt“ (SOLL-BER-11), offen wie die Vorlage. */
.db__lauf { position: relative; list-style: none; margin: 0; padding: 0; display: grid; }
.db__lauf::before { content: ''; position: absolute; left: 70px; top: 14px; bottom: 14px; width: 2px; background: var(--flaeche-2);
  border-radius: var(--r-s); }
/* Ohne Einträge keine Zeitleiste; sie liefe sonst durch „Heute ist nichts gebucht.“ (Durchlauf 18.10.). */
.db__lauf:has(> .db__leer:only-child)::before { display: none; }
/* Erledigtes zugeklappt unter dem Offenen (N-184): ein Klick auf „N erledigt anzeigen“ öffnet es. */
.db__erledigt { margin-top: var(--s2); border-top: 1px solid var(--linie); padding-top: var(--s2); }
.db__erledigt > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--leise);
  font-size: var(--t-2); font-weight: 600; }
.db__erledigt > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.aufgaben__erledigt { margin-top: var(--s3); }
.aufgaben__erledigt > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--leise);
  font-size: var(--t-2); font-weight: 600; }
.aufgaben__erledigt > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.db__lauf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; }
.db__lauf-zeile { display: grid; grid-template-columns: 52px 14px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 64px;
  padding: var(--s1) 0; }
.db__lauf-zeile time { color: var(--leise); font: 400 var(--t-1) var(--mono); }
.db__lauf-zeile--fertig { opacity: .55; }
.db__lauf-mitte { display: grid; min-width: 0; padding: var(--s1) 0; }
.db__lauf-mitte a { color: inherit; text-decoration: none; }
.db__lauf-mitte a:hover b { text-decoration: underline; }
.db__lauf-mitte b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-weight: 600; }
.db__lauf-mitte small { color: var(--leise); }
.db__punkt { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--flaeche);
  box-shadow: 0 0 0 1px var(--linie); background: var(--leise); }
.db__punkt--gelb { background: var(--linie-gelb); } .db__punkt--blau { background: var(--linie-blau); }
.db__punkt--lila { background: var(--linie-lila); } .db__punkt--grau { background: var(--linie); }
.db__offen { color: var(--chip-gelb); font-weight: 600; }
.db__fertig { color: var(--frei); font-size: var(--t-2); font-weight: 600; display: inline-flex; gap: var(--s1); align-items: center; white-space: nowrap; }
.db__jetzt { display: grid; grid-template-columns: 52px 14px minmax(0, 1fr); gap: var(--s3); align-items: center; color: var(--aktion);
  font-size: var(--t-1); font-weight: 700; padding: var(--s1) 0; }
.db__jetzt span { font-family: var(--mono); font-weight: 400; }
.db__jetzt i { width: 14px; height: 14px; border-radius: 50%; background: var(--gruen); position: relative; z-index: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 25%, transparent); }
.db__jetzt b { display: flex; align-items: center; gap: var(--s2); }
.db__jetzt b::after { content: ''; flex: 1; height: 2px; background: var(--aktion); border-radius: var(--r-s); }

/* Braucht Sie und Team heute (N49): je über die volle Breite, Kacheln auf einem Zwölferraster, Braucht Sie in denselben
   vier Spalten wie „Am Tresen“, Team in drei. Eine kürzere letzte Reihe teilt sich die Breite gleich auf, damit alle
   Kanten bündig sind und keine Lücke bleibt. */
.db__braucht, .db__team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s3); }
@media (min-width: 1241px) {
  .db__braucht > li { grid-column: span 3; }
  .db__braucht > li:nth-child(4n + 1):nth-last-child(3), .db__braucht > li:nth-child(4n + 1):nth-last-child(3) ~ li { grid-column: span 4; }
  .db__braucht > li:nth-child(4n + 1):nth-last-child(2), .db__braucht > li:nth-child(4n + 1):nth-last-child(2) ~ li { grid-column: span 6; }
  .db__braucht > li:nth-child(4n + 1):last-child { grid-column: 1 / -1; }
  .db__team > li { grid-column: span 4; }
  .db__team > li:nth-child(3n + 1):nth-last-child(2), .db__team > li:nth-child(3n + 1):nth-last-child(2) ~ li { grid-column: span 6; }
  .db__team > li:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
}
.db__braucht a { container-type: inline-size; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: start; min-height: 64px;
  padding: var(--s3); border: 1px solid transparent; border-radius: var(--r-kachel); background: var(--flaeche); color: inherit; text-decoration: none; }
.db__braucht a:hover { border-color: var(--aktion); }
/* „Abwesenheitsanträge“ ragte 8 px aus der halben Kachel. Am Handy bekommt jede Kachel eine ganze Zeile, damit
   die Schrift auf einer vorgesehenen Stufe lesbar bleibt und der Titel nicht mitten im Wort bricht. */
.db__braucht span { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; hyphens: manual; overflow-wrap: normal;
  font-size: clamp(10px, 8cqi, var(--t-2)); font-weight: 600; }
.db__braucht small { color: var(--leise); font-size: var(--t-1); font-weight: 600; }
.db__braucht b { font: 700 var(--t-5)/1 var(--anzeige); }

/* Team heute: je Person eine Kachel, Name links, Dienst rechts. */
.db__team li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 64px;
  padding: var(--s3); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); }
.db__team b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db__team .chip { white-space: nowrap; }
.db__team li > span:nth-child(2) { display: grid; min-width: 0; }
.db__team small { color: var(--leise); font-size: var(--t-1); }
.db__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--aktion-zart);
  color: var(--tinte); font-weight: 700; }

/* Belegung: erste Spalte Name, dann je Stunde ein Feld; nur das Raster scrollt, nie die Seite. */
.db__beleg { position: relative; display: grid; gap: var(--s1); overflow-x: auto; padding-bottom: var(--s1); }
/* Hinweis aufs seitliche Wischen nur dort, wo das Raster breiter ist als der Bildschirm (Handy, N-183 B006/B126):
   ein Satz unter dem Raster und ein Schatten am rechten Rand. */
.db__beleg-huelle { position: relative; min-width: 0; }
.db__wischen { display: none; margin: var(--s1) 0 0; color: var(--leise); font-size: var(--t-2); font-weight: 600; }
@media (max-width: 560px) {
  .db__wischen { display: block; }
  .db__beleg-huelle::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
    background: linear-gradient(to left, color-mix(in srgb, var(--tinte) 16%, transparent), transparent); border-radius: 0 var(--r-s) var(--r-s) 0; }
}
.db__beleg-zeile { display: grid; grid-template-columns: 130px; grid-auto-flow: column; grid-auto-columns: minmax(26px, 1fr); gap: var(--s1);
  align-items: center; font-size: var(--t-2); }
.db__beleg-zeile > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db__beleg-zeile--kopf span { font: 400 var(--t-1) var(--mono); color: var(--leise); text-align: center; }
.db__beleg-zeile--kopf span:first-child { text-align: left; }
.db__b { display: inline-block; height: 22px; border-radius: var(--r-s); }
a.db__b { cursor: pointer; }
a.db__b:hover, a.db__b:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.db__b--frei { background: var(--frei-zart); }
.db__b--belegt { background: var(--aktion); }
.db__b--gesperrt { background: var(--leise); }
/* Vorbei schraffiert, damit es sich hell wie dunkel deutlich von frei abhebt (Review N-17, Nr. 15). */
.db__b--vorbei { background: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 3px, var(--flaeche) 3px,
  var(--flaeche) 6px); box-shadow: inset 0 0 0 1px var(--linie); }
.db__legende { margin: 0; font-size: var(--t-1); color: var(--leise); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.db__legende .db__b { width: 16px; height: 12px; border-radius: var(--r-s); }
/* Zeichen und Wort bleiben zusammen; der Hinweis steht darunter, damit kein Wort vom Zeichen wegbricht. */
.db__legende { column-gap: var(--s4); row-gap: var(--s1); }
.db__leg { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.db__leg-text { flex-basis: 100%; }

@media (max-width: 1240px) {
  .db__zahlen { grid-template-columns: 1fr 1fr; }
  .db__braucht > li, .db__team > li { grid-column: span 6; }
  .db__braucht > li:nth-child(odd):last-child, .db__team > li:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .db__lauf::before { left: 62px; }
  .db__lauf-zeile { grid-template-columns: 44px 14px minmax(0, 1fr); }
  .db__lauf-zeile > .db__lauf-rechts { grid-column: 3; justify-self: start; justify-content: flex-start; gap: var(--s2); }
  .db__lauf-zeile { row-gap: var(--s1); padding-block: var(--s2); }
  .db__jetzt { grid-template-columns: 44px 14px minmax(0, 1fr); }
  .db__lauf-mitte b { white-space: normal; }
  .db__beleg-zeile { grid-template-columns: 96px; }
}
@media (max-width: 760px) {
  .db__zahl--hervor { --hervor-t: var(--t-6); }
}
/* 390 px: Kennzahlen zweispaltig, „Als Nächstes“ über beide (SOLL-BER-21 Punkt 6); das Raster zeigt alle Stunden
   in schmalen Feldern (Review N-17, Nr. 6). */
@media (max-width: 560px) {
  .db__zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  /* „Als Nächstes“ steht über die volle Breite; bleibt danach eine Kachel allein, nimmt sie die Zeile ganz. */
  .db__zahlen > .db__zahl--hervor ~ :last-child:nth-child(even) { grid-column: 1 / -1; }
  .db__zahl { min-height: 0; padding: var(--s4); border-radius: var(--r-kachel); }
  .db__zahl--hervor { grid-column: 1 / -1; min-height: 132px; padding-right: 80px; border-radius: var(--r-karte); }
  .db__zahl b { font-size: var(--t-5); }
  .db__zahl--hervor b { font-size: min(var(--t-5), 11cqi); }
  .db__zahl span { font-size: var(--t-2); }
  .db__braucht { gap: var(--s2); }
  /* Der lange Titel „Abwesenheitsanträge“ braucht 13 px und eine ganze Zeile statt 10 px in halber Breite. */
  .db__braucht > li, .db__braucht > li:nth-child(odd):last-child { grid-column: 1 / -1; }
  .db__team > li, .db__team > li:nth-child(odd):last-child { grid-column: 1 / -1; }
  /* Der Name bekommt die ganze Zeile, der Dienst steht darunter (N-183, B116: Name abgeschnitten). */
  .db__team li { grid-template-columns: 36px minmax(0, 1fr); row-gap: var(--s1); }
  .db__team li > .chip { grid-column: 2; justify-self: start; }
  .db__team b { white-space: normal; overflow-wrap: break-word; }
  .db__beleg { overflow-x: visible; }
  .db__beleg-zeile { grid-template-columns: 64px; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); font-size: var(--t-1); }
  .db__beleg-zeile--kopf span { font-size: var(--t-1); letter-spacing: -.02em; }
  .db__b { height: 20px; border-radius: var(--r-s); }
  /* Die Seite Belegung bleibt am Handy bedienbar: seitlich scrollen statt stauchen, Namen stehen fest, jede Stunde
     mindestens 40 px breit und hoch; vorher 14 × 22 px und gebrochene Stundenköpfe („0/8“, VL-198). */
  .db__beleg:not(.db__beleg--heute) { overflow-x: auto; overscroll-behavior-x: contain; }
  .db__beleg:not(.db__beleg--heute) .db__beleg-zeile { grid-template-columns: 96px; grid-auto-columns: 40px; }
  .db__beleg:not(.db__beleg--heute) .db__b { height: 40px; }
  .db__beleg:not(.db__beleg--heute) .db__beleg-zeile > span:first-child { position: sticky; left: 0; z-index: 1;
    background: var(--flaeche); }
  .db__beleg:not(.db__beleg--heute) .db__beleg-zeile--kopf span { white-space: nowrap; }
}

/* Aufgabenlisten (SOLL-BER-13): Zeile mit Titel, Unterzeile und Knöpfen; ein Klick auf die Zeile öffnet die Detailseite. */
.aufgaben { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.aufgaben li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s4); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); }
.aufgaben__text { display: grid; min-width: 0; flex: 1 1 240px; }
.aufgaben small { color: var(--leise); }
.aufgaben__link { color: inherit; text-decoration: none; }
.aufgaben__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.aufgaben__knoepfe { position: relative; z-index: 1; display: flex; gap: var(--s2); flex-wrap: wrap; }
.aufgaben__wahl { position: relative; z-index: 1; display: grid; place-items: center; }
.aufgaben__wahl input { width: 20px; height: 20px; accent-color: var(--aktion); }
.aufgaben--klick:hover { border-color: var(--aktion); }
.aufgaben__aktion { margin-top: var(--s4); }
/* In einer Karte sind die Aufgaben Zeilen mit feiner Trennlinie, keine zweiten Kästen in der Karte (N-173). */
.karte > .aufgaben { gap: 0; }
.karte > .aufgaben > li { padding: var(--s3) 0; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; }
.karte > .aufgaben > li:last-child { border-bottom: 0; padding-bottom: 0; }
.karte > .aufgaben > li:first-child { padding-top: 0; }

/* Kalender: sieben Tagesspalten, bei 390 px untereinander (Befund 23) */
.kwo { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); width: 100%; }
.kwo__tag { display: grid; gap: var(--s2); align-content: start; padding: var(--s3); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); min-height: 160px; min-width: 0; }
.kwo__tag--heute { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.kwo__tag h2 { margin: 0; font-size: var(--t-3); }
/* Weiß mit Linie statt grau (SOLL-BER-21 Punkt 4, Review N-17); die Standfarbe steht nur an der linken Kante. */
.kwo__eintrag { display: block; font-size: var(--t-1); padding: var(--s2) var(--s2); border-radius: var(--r-s); background: var(--flaeche); color: inherit;
  text-decoration: none; border: 1px solid var(--linie); border-left: 3px solid var(--linie); }
a.kwo__eintrag:hover { background: color-mix(in srgb, var(--aktion) 10%, var(--flaeche)); }
.kwo__eintrag--gelb { border-left-color: var(--linie-gelb); } .kwo__eintrag--blau { border-left-color: var(--linie-blau); }
.kwo__eintrag--lila { border-left-color: var(--linie-lila); } .kwo__eintrag--fertig { opacity: .7; }
/* Vorgemerkt: der Platz ist gehalten, nicht gebucht; Konflikt: Stück gesperrt oder Person abwesend. */
.kwo__eintrag--vorgemerkt { border-left-style: dashed; background: color-mix(in srgb, var(--flaeche) 70%, transparent); }
.kwo__eintrag--konflikt { border-left-color: var(--linie-rot, var(--fehler)); }
/* Gleiche Einträge zur selben Zeit im Kalender gebündelt („Ballmaschine ×25“, N-184, B196). */
.kwo__buendel > summary { list-style: none; cursor: pointer; }
.kwo__buendel > summary::-webkit-details-marker { display: none; }
.kwo__buendel[open] > summary { margin-bottom: var(--s1); }
.kwo__buendel > .kwo__eintrag { margin-left: var(--s3); }
.kwo__eintrag--entwurf { border-left-style: dashed; opacity: .85; }
/* Privat belegt (N-199): grau wie eine Sperre in der Belegung, ohne Farbe einer Buchung. */
.kwo__eintrag--privat { background: var(--flaeche-2); color: var(--leise); border-left-color: var(--leise); }
.kwo__hinweis { color: var(--leise); font-size: var(--t-3); }
@media (max-width: 900px) { .kwo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 560px) { .kwo { grid-template-columns: minmax(0, 1fr); } .kwo__tag { min-height: 0; } }

/* Auswertung: Kennzahlen vier je Zeile, unter 760 px zwei (SOLL-BER-18). */
.auswertungsseite .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .auswertungsseite .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print {
  .nicht-drucken, .leiste, .handykopf { display: none !important; }
  html, body, .rahmen { background: none; }
  .rahmen, .rahmen--leiste { display: block; padding: 0; }
  .spalte { padding: 0; background: none; border-radius: 0; }
}

/* Finanzen-Überblick und CSV-Vorlagen (Paket N-11), wie die Vorlage (.viz__dl, .viz__posten, .csv). */
.viz__dl { grid-template-columns: minmax(0, 1fr) auto; }
.viz__dl dd { text-align: right; font-variant-numeric: tabular-nums; }
.viz__posten { list-style: none; margin: 0; padding: 0; display: grid; }
.viz__posten li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s2) 0;
  border-bottom: 1px solid var(--linie); align-items: center; }
.viz__posten li:last-child { border-bottom: 0; }
.viz__posten time { color: var(--leise); font-size: var(--t-2); }
.viz__posten span { min-width: 0; overflow-wrap: anywhere; }
.viz__posten b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz__plus { color: var(--frei); }
.viz__minus { color: var(--fehler); }
.dzeilen .knopf { white-space: nowrap; }
/* Finanz-Dashboard (N49, Florian 29.10.2026): dicht und ruhig. Kennzahlen und Kacheln ohne Leerraum, die Karten auf
   einem Zwölferraster mit bündigen Kanten; die Breite je Karte steht in `Grafikkarte.spalten`. */
.fin { display: grid; gap: var(--s5); min-width: 0; hyphens: manual; }
.fin .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fin .kennzahl { padding: var(--s4) var(--s5); gap: var(--s1); }
.fin .kachelseite { gap: var(--s5); }
.fin .kachelseite > .karte { gap: var(--s3); }
.fin .kachelseite .kacheln { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
/* Kacheln einzeilig: Text links, der runde Pfeil rechts daneben statt in einer eigenen Reihe darunter. */
.fin .kachel { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center;
  gap: var(--s3); padding: var(--s4); }
.fin .kachel::after { align-self: center; }
/* Leerer Zustand einer Karte: ein Satz und, wo es geht, der Knopf zum Erfassen; mittig statt einer leeren Fläche. */
.viz__leerzustand { display: grid; justify-items: center; align-content: center; gap: var(--s3); flex: 1; min-height: 120px;
  text-align: center; color: var(--leise); }
.viz__leerzustand p { margin: 0; font-size: var(--t-2); }
.fin .viz__karte:has(.viz__leerzustand) { grid-template-rows: auto 1fr; }
.fin__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.fin__raster > * { grid-column: span 12; }
.fin .viz__karte { padding: var(--s4) var(--s5); gap: var(--s3); }
.fin .viz__karte .karte__kopf h2 { font-size: var(--t-4); }
.fin .viz__karte > p.leer { margin: 0; color: var(--leise); font-size: var(--t-2); }
.fin .viz__dl { row-gap: var(--s1); }
/* Ohne graue Innenflächen (Florian 29.10.2026): Zeilen auf der Kartenfarbe, getrennt durch eine feine Linie. */
.fin .dzeilen { gap: 0; }
.fin .dzeilen li { padding: var(--s1) 0; background: none; border-radius: 0; border-bottom: 1px solid var(--linie); }
.fin .dzeilen li:last-child { border-bottom: 0; }
.fin .dzeilen small { font-size: var(--t-1); }
.fin .viz__posten li { padding: var(--s1) 0; min-height: 44px; }
.fin .viz__posten span { overflow-wrap: normal; hyphens: manual; }
/* Ring und Anteile nebeneinander statt untereinander: halb so hoch, gleiche Höhe wie die Nachbarkarte. */
@media (min-width: 561px) {
  .fin .viz__karte:has(> .viz__ringwrap) { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    column-gap: var(--s5); align-content: start; }
  .fin .viz__karte:has(> .viz__ringwrap) > .karte__kopf { grid-column: 1 / -1; }
  .fin .viz__karte:has(> .viz__ringwrap) > .viz__ringwrap { grid-row: 2 / 4; }
  .fin .viz__karte:has(> .viz__ringwrap) > .viz__anteile { align-self: end; }
}
@media (min-width: 1101px) {
  .fin__raster > .viz__karte--s4 { grid-column: span 4; }
  .fin__raster > .viz__karte--s5 { grid-column: span 5; }
  .fin__raster > .viz__karte--s6 { grid-column: span 6; }
  .fin__raster > .viz__karte--s7 { grid-column: span 7; }
  .fin__raster > .viz__karte--s8 { grid-column: span 8; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .fin__raster > .viz__karte--s6 { grid-column: span 6; }
}
@media (max-width: 560px) {
  /* Zwei Kennzahlen je Reihe; eine allein am Ende nimmt die ganze Reihe. */
  .fin .kennzahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.csv { display: grid; gap: var(--s4); min-width: 0; }
.csv__vorlage { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); min-width: 0; }
.csv__kopf { display: flex; justify-content: space-between; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.csv__kopf span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.csv__kopf small { color: var(--leise); }
.csv__tab { border-collapse: collapse; font-size: var(--t-1); white-space: nowrap; }
.csv__tab th, .csv__tab td { border: 1px solid var(--linie); padding: var(--s1) var(--s2); text-align: left; }
.csv__tab th { background: var(--flaeche-2); }
.csv__hilfe td { color: var(--leise); font-style: italic; }
.csv__hinweis { margin: 0; color: var(--leise); font-size: var(--t-2); }

/* Einstellungen › Website › Buchungslink (N23) */
.buchungslink__adresse { font-weight: 600; word-break: break-all; margin: 0; }
.buchungslink__text { color: var(--leise); font-size: var(--t-3); margin: 0; }

/* Mail an mehrere: Vorschau am Beispiel der ersten Person statt eines Textes mit Platzhaltern (N-20) */
.mail__vorschau { margin: 0; padding: var(--s3) var(--s3); border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); }
.mail__vorschau--text { white-space: pre-line; }
/* Newsletter-Vorschau (N-179): über die ganze Breite wie eine Mail, ohne Silbentrennung. */
.mail__ganz { display: grid; gap: var(--s2); }
.mail__betreff { margin: 0; }
.mail__ganz .mail__vorschau { hyphens: manual; overflow-wrap: break-word; }

/* ---------- Weitere Regeln: Erweiterungen zugeklappt im Schritt (Bauregel 10a, Vorlage `.weitere`) ---------- */
.weitere { margin-top: var(--s2); border: 1px solid var(--linie); border-radius: var(--r-kachel); background: var(--flaeche); }
.weitere > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  cursor: pointer; list-style: none; }
.weitere > summary::-webkit-details-marker { display: none; }
.weitere > summary b { flex: 1; text-align: left; }
.weitere[open] > summary { border-bottom: 1px solid var(--linie); margin-bottom: var(--s3); }
.weitere__inhalt { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s4); }

/* Belegung: anderer Tag per Datum (Durchsicht 19.10.2026). */
.db__tagform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: calc(-1 * var(--s1)) 0 var(--s4); font-size: var(--t-3); color: var(--leise); }
.db__tagform .eingabe--datum { width: 15ch; min-height: 40px; font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--kante-feld); border-radius: var(--r-pille); background: var(--flaeche); color: var(--tinte); }
.db__tagform .feld__fehler { flex-basis: 100%; }

/* Belegung: breitere Namensspalte, damit „Ersatzwagen Kleinwagen 1“ und „… 2“ unterscheidbar sind (Durchsicht
   19.10.2026). */
@media (min-width: 1241px) { .db__beleg:not(.db__beleg--heute) .db__beleg-zeile { grid-template-columns: 210px; } }

/* Belegung: die Nummer eines Stücks bleibt sichtbar, nur der Name wird gekürzt (Handy, Durchsicht 19.10.2026). */
.db__name { display: flex; gap: var(--s1); min-width: 0; align-items: baseline; }
.db__name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.db__name > b { flex-shrink: 0; font-weight: 600; }

/* Mein Konto (N-42 S7): wer angemeldet ist; die Sprachen als Chips. */
.konto__wer { margin: 0 0 var(--a-4, 16px); }
.sprachzeile { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-3); }
/* Tippfläche 44 px wie jeder Knopf; als bloßer Textlink war sie am Handy 18 px hoch (WebKit-Probe 28.10.2026). */
.sprachzeile a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.sprachzeile a[aria-current] { font-weight: 700; text-decoration: none; }
.zugang__sprachen { margin-top: var(--s6); }

/* ---------- Bedienflächen am Handy (V10: mindestens 44 × 44 px) ---------- */
/* Ab dem Handy-Rahmen (760 px), nicht erst unter 560 px: Dazwischen waren Filter, Chips und Kalenderknöpfe 32–40 px
   (ECC P2-23, Paket N-69). */
@media (max-width: 760px) {
  .knopf, .reiter__punkt, .filterchip, .ablauf__neu, .kalender__nav, .kalender__tag, .mengen__k, .kwo__eintrag,
  .wed__foto-knopf, .wahlchip { min-height: 44px; }
  /* Das kleine „ד bleibt klein zu sehen, tippen lässt es sich auf 44 × 44 px. */
  .wahlweg::before { content: ""; position: absolute; inset: -12px; }
  .ue__link, .detail__zurueck, .db__link, .wed__stand { display: inline-flex; align-items: center; min-height: 44px; }
  .tagwahl__chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* Das Feld der „+“-Kachel ist die Bedienfläche, nicht nur der Rahmen darum (Stilinventur 21.10.2026: 21 px hoch). */
  .wahlplus .wahlplus__ein { min-height: 44px; }
  .wahlchip.wahlplus { padding-block: 0; }
  .wahlplus__knopf { width: 44px; height: 44px; }
  /* Kopf eines Bereichs der Bearbeiten-Maske: die ganze Zeile klappt auf und zu. */
  details.bereich > summary { min-height: 44px; }
  .vorlagen__mehr > summary, .aufklapp summary, .kontakt__doch > summary { display: flex; align-items: center; min-height: 44px; }
  .zugang__links a, .zugang__hilfe a { display: inline-flex; align-items: center; min-height: 44px; }
  body .wed__rund { width: 44px; height: 44px; min-width: 44px; }
  .wed__sprung a { display: inline-flex; align-items: center; min-height: 44px; }
  .db__tagform .eingabe--datum { min-height: 44px; }
  /* Passen zwei Knöpfe nicht nebeneinander, rückt der rechte in eine eigene Reihe, statt dass beide zweizeilig werden
     („Zurück zu Mein Konto“, „Alle anderen abmelden“, N-187 NB12): Jeder Knopf ist so breit wie sein Text in einer
     Zeile. Nur ein Knopf, der allein breiter ist als die Leiste („Als kontrolliert speichern“), bricht um, statt die
     Leiste über 390 px zu schieben. */
  .weiter-leiste, .weiter-leiste__rechts { flex-wrap: wrap; }
  .weiter-leiste > *, .weiter-leiste__rechts { min-width: 0; max-width: 100%; }
  .weiter-leiste .knopf { white-space: normal; text-align: center; line-height: 1.2; width: max-content; max-width: 100%;
    flex-shrink: 0; }
  .kalender__tag, .kalender__nav, .mengen__k { min-width: 44px; justify-content: center; }
}

/* Am Handy liegt unten die feste Leiste mit den Reitern. */
@media (max-width: 760px) {
  /* Die untere Leiste des Website-Editors steht über den Reitern, nicht auf ihnen. */
  .rahmen--leiste .wed2__unten { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
}

/* Editor und Galerie stehen in website.css (sie teilen Bausteine mit der Website); im Büro gelten die Ecken des Büros. */
body .wed__leiste, body .galerie__bild, body .galerie__gross { border-radius: var(--r-kachel); }
/* ✕ zum Entfernen ist ein Kreis von 44 px, nicht 36 × 44 (Sichtprüfung 26.10.2026, Kreise gleich breit und hoch). */
.knopf.knopf--entfernen { min-width: 44px; min-height: 44px; padding-inline: 0; justify-content: center; }

/* Am Handy jede Tippfläche mindestens 44 px hoch: Wahlkacheln, kleine Knöpfe, „Trennen“ in Kästen (VL-198). */
@media (max-width: 600px) {
  .wahlchip, .knopf--klein { min-height: 44px; }
  .tagwahl__chip { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Ein Datum bricht nicht mitten durch („Di.,“ / „27.10.2026“ am Handy, VL-331). */
.ohne-umbruch { white-space: nowrap; }

/* Einstellungen › Sprache (27.10.2026): zehn Sprachen als große Kacheln, die gewählte grün umrandet. */
.sprachwahl { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sprachwahl__kachel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-height: 72px;
  padding: var(--s3) var(--s4); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); color: inherit; text-decoration: none; }
.sprachwahl__kachel:hover, .sprachwahl__kachel:focus-visible { border-color: var(--aktion); }
.sprachwahl__kachel--aktiv { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.sprachwahl__name { font-weight: 600; font-size: var(--t-5); }

/* Umschalter statt Kästchen (Einrichten, Schritt „Angebot“; Florian 27.10.2026): das Kästchen bleibt für Tastatur und
   Vorleser, sichtbar ist die Bahn mit dem Knopf. */
.kipp { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; position: relative; }
.kipp input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.kipp__bahn { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--r-pille); background: color-mix(in srgb, var(--leise) 45%, var(--flaeche));
  transition: background .15s; }
.kipp__bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--flaeche); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.kipp input:checked + .kipp__bahn { background: var(--linie-gruen); }
.kipp input:checked + .kipp__bahn::after { transform: translateX(18px); }
.kipp input:focus-visible + .kipp__bahn { outline: 2px solid var(--linie-gruen); outline-offset: 2px; }

/* ---------- Reiter Buchungen und Anfragen (Paket N-90, Florian 28.10.2026) ---------- */
/* Grüne Zahl am Reiter: wartende Anfragen bzw. neue Nachrichten. */
.reiter__zahl { margin-left: auto; margin-right: var(--s3); min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pille);
  display: inline-grid; place-items: center; background: var(--gruen); color: var(--gruen-auf); font: 700 var(--t-1)/1 var(--schrift);
  font-style: normal; }
/* „Mehr“ gibt es nur am Handy; am Rechner stehen alle Reiter in der Leiste. */
.reiter__mehr { display: none; }
.filterchip__zahl { margin-left: var(--s2); font-style: normal; font-weight: 500; opacity: .7; }
@media (max-width: 760px) {
  .reiter__punkt--mehr { display: none; }
  /* Kalender, Belegung und Auswertung stehen am Handy unter „Mehr“ (N49). */
  .reiter__punkt--unter { display: none; }
  .reiter__punkt { position: relative; }
  .reiter__zahl { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 18px; height: 18px; padding: 0 4px;
    font-size: var(--t-1); }
  .reiter__mehr { display: block; position: relative; flex: 1 1 0; min-width: 0; }
  .reiter__mehrknopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
    padding: var(--s1) 1px; border-radius: var(--r-kachel); color: var(--leiste-text); cursor: pointer; list-style: none;
    font-size: var(--t-1); line-height: 1.15; letter-spacing: -.02em; }
  .reiter__mehrknopf::-webkit-details-marker { display: none; }
  .reiter__mehrknopf span:last-child { font-size: clamp(9px, 2.55vw, var(--t-1)); white-space: nowrap; }
  .reiter__mehrknopf--an, .reiter__mehr[open] .reiter__mehrknopf { background: var(--gruen); color: var(--gruen-auf); }
  .reiter__mehrknopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: -2px; }
  /* Drei Punkte ohne Symbolschrift: ein Punkt in der Mitte, zwei als Schatten daneben. */
  .reiter__punkte { width: 4px; height: 4px; margin: 8px 0; border-radius: 50%; background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor; }
  .reiter__mehrliste { position: absolute; right: 0; bottom: calc(100% + var(--s2)); display: grid; gap: var(--s1); min-width: 200px;
    padding: var(--s2); border-radius: var(--r-kachel); background: var(--kohle); border: 1px solid var(--kohle-linie);
    box-shadow: var(--schatten-leiste); }
  .reiter__mehrpunkt { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s3);
    border-radius: var(--r-feld); color: var(--kohle-text); text-decoration: none; font-size: var(--t-3); }
  .reiter__mehrpunkt:hover { background: var(--kohle-2); }
  .reiter__mehrpunkt--an { background: var(--gruen); color: var(--gruen-auf); font-weight: 600; }
}

/* Buchungen: eine Liste nach Zeit, je Tag eine Überschrift; Spalten wie eine Tabelle, am Handy Karten. */
.bu { display: grid; gap: 0; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche); overflow: hidden; }
.bu__kopf, .bu__zeile { display: grid; grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) 6rem minmax(0, auto);
  gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); }
.bu__kopf { color: var(--leise); font-size: var(--t-1); font-weight: 600; border-bottom: 1px solid var(--linie); }
.bu__tagtitel { margin: 0; padding: var(--s3) var(--s4); font: 700 var(--t-3)/1.3 var(--schrift); background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie); }
.bu__zeilen { list-style: none; margin: 0; padding: 0; }
.bu__zeile { position: relative; min-height: 56px; border-bottom: 1px solid var(--linie); }
.bu__zeile:hover { background: var(--flaeche-2); }
/* Gebündelte gleiche Buchungen (NB52): die Kopfzeile klappt die einzelnen auf, diese stehen eingerückt darunter. */
.bu__buendel > details > summary { list-style: none; cursor: pointer; }
.bu__buendel > details > summary::-webkit-details-marker { display: none; }
/* Sichtbares Aufklapp-Zeichen: zeigt nach rechts, aufgeklappt nach unten (Review N-187 A, Nr. 6). */
.bu__auf { display: inline-block; color: var(--aktion); transition: transform .15s; }
.bu__buendel > details[open] > summary .bu__auf { transform: rotate(90deg); }
.bu__buendel > details > .bu__zeilen > .bu__zeile { padding-left: calc(var(--s4) + var(--s4)); background: var(--flaeche-2); }
/* Anfragen leicht hinterlegt, mit dem Strich links in der Farbe „wartet“. */
.bu__zeile--anfrage { background: var(--gehalten-zart); box-shadow: inset 3px 0 0 var(--linie-gelb); }
.bu__zeile--anfrage:hover { background: var(--gehalten-zart); }
.bu__zeit { font-weight: 600; font-size: var(--t-3); }
/* Der Link der Zeit spannt über die ganze Zeile: ein Klick irgendwo darauf öffnet das Fenster. */
.bu__link { color: inherit; text-decoration: none; }
.bu__link::after { content: ""; position: absolute; inset: 0; }
.bu__zeile:has(.bu__link:focus-visible) { outline: 2px solid var(--aktion); outline-offset: -2px; }
.bu__link:focus-visible { outline: none; }
.bu__angebot, .bu__wer { font-size: var(--t-3); min-width: 0; }
.bu__wer small, .bu__betrag small, .bu__balkentext { display: block; color: var(--leise); font-size: var(--t-1); }
.bu__stand { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.bu__betrag { text-align: right; font-size: var(--t-3); }
.bu__knoepfe { position: relative; z-index: 1; display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; }
.bu__knoepfe form { display: contents; }
.bu:not(.bu--betrag) .bu__kopf, .bu:not(.bu--betrag) .bu__zeile { grid-template-columns: 9rem minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) 0 minmax(0, auto); }
.bu__leer, .anf__leer { margin: 0; padding: var(--s5); color: var(--leise); }
/* Leer steht eine Liste als ruhige, gestrichelte Fläche an ihrem Platz, nicht als loser Satz auf dem Panel (N-173). */
.anf__leer, .uebersicht__liste > .leer { border: 1px dashed var(--kante-feld); border-radius: var(--r-karte); text-align: center; }
.uebersicht__liste > .leer { padding: var(--s5); }
.bu__mehr { display: flex; justify-content: center; padding: var(--s4); }
@media (max-width: 900px) {
  .bu__kopf { display: none; }
  .bu__zeile, .bu:not(.bu--betrag) .bu__zeile { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); }
  .bu__zeit { grid-column: 1; }
  .bu__angebot { grid-column: 2; grid-row: 1; text-align: right; }
  .bu__wer { grid-column: 1 / -1; }
  .bu__stand { grid-column: 1; }
  .bu__betrag { grid-column: 2; grid-row: 3; }
  .bu__knoepfe { grid-column: 1 / -1; justify-content: flex-start; }
  .bu__knoepfe:empty { display: none; }
}

/* Zeitbalken einer Anfrage: wie bald der Termin ist (rot unter einem Tag, gelb unter drei Tagen); keine Absagefrist. */
.zeitbalken { display: block; width: 100%; max-width: 160px; height: 6px; border-radius: var(--r-pille); background: var(--flaeche-2);
  overflow: hidden; }
.zeitbalken--gross { max-width: none; height: 8px; }
.zeitbalken__fuell { display: block; height: 100%; border-radius: inherit; background: var(--linie-gruen); }
.zeitbalken--rot .zeitbalken__fuell { background: var(--linie-rot); }
.zeitbalken--gelb .zeitbalken__fuell { background: var(--linie-gelb); }
.zeitbalken__fuell--10 { width: 10%; } .zeitbalken__fuell--20 { width: 20%; } .zeitbalken__fuell--30 { width: 30%; }
.zeitbalken__fuell--40 { width: 40%; } .zeitbalken__fuell--50 { width: 50%; } .zeitbalken__fuell--60 { width: 60%; }
.zeitbalken__fuell--70 { width: 70%; } .zeitbalken__fuell--80 { width: 80%; } .zeitbalken__fuell--90 { width: 90%; }
.zeitbalken__fuell--100 { width: 100%; }

/* Mittiges Fenster: abgedunkelter, leicht unscharfer Hintergrund; schließt mit ✕, Esc und Klick daneben. */
.fenster { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-karte);
  background: var(--flaeche); color: var(--tinte); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: auto; }
.fenster::backdrop { background: rgba(15, 15, 15, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.fenster--seite { width: auto; max-width: 560px; box-shadow: none; border: 1px solid var(--linie); }
.fenster--seite .fenster__zu { display: none; }
.fenster__karte { display: grid; gap: var(--s4); padding: var(--s5); }
.fenster__kopf { display: flex; align-items: center; gap: var(--s3); }
.fenster__kopf > div { flex: 1; min-width: 0; }
.fenster__kopf h2 { font: 700 var(--t-4)/1.25 var(--schrift); }
.fenster__kopf small, .anf__kopf small { display: block; color: var(--leise); font-size: var(--t-1); }
.fenster__logo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--kohle);
  color: var(--gruen); font: 700 var(--t-3)/1 var(--anzeige); }
.fenster__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--flaeche-2); color: var(--tinte);
  font-size: var(--t-5); line-height: 1; cursor: pointer; }
.fenster__x:hover { background: var(--linie); }
.fenster__angebot { display: grid; gap: 2px; padding: var(--s4); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); }
.fenster__angebot b { font: 700 var(--t-4)/1.3 var(--anzeige); }
.fenster__angebot small { color: var(--leise); font-size: var(--t-1); }
/* Angaben untereinander in einer Spalte, je Zeile Titel links und Wert rechts, nie umbrochen (N49: keine E-Mail mitten im
   Wort, kein „über die Website“ in zwei Zeilen); lieber wird das Fenster länger. Am Handy steht der Titel über dem Wert. */
.fenster__angaben { display: grid; margin: 0; border-top: 1px solid var(--linie); }
.fenster__angaben > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); align-items: baseline;
  min-height: 44px; padding: var(--s2) 0; border-bottom: 1px solid var(--linie); }
.fenster__angaben dt { color: var(--leise); font-size: var(--t-2); font-weight: 600; white-space: nowrap; }
.fenster__angaben dd { margin: 0; font-size: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster__angebot span, .fenster__angebot small, .fenster__kopf h2, .fenster__kopf small { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.fenster__balken { display: grid; gap: var(--s2); font-size: var(--t-3); }
.fenster__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.fenster__knoepfe form { display: contents; }
.fenster__vorgang { margin-left: auto; font-weight: 600; font-size: var(--t-3); text-decoration: none; }
.fenster__fuss { color: var(--leise); font-size: var(--t-1); }
.fenster__ablehnen { display: grid; gap: var(--s3); }
.fenster__gruende { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; border: 0; }
.fenster__gruende legend { margin-bottom: var(--s2); font-weight: 600; font-size: var(--t-2); }
@media (max-width: 420px) {
  .fenster__angaben > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fenster__karte { padding: var(--s4); }
}

/* Team & Rewards (N-175, Bildabnahme 03.11.2026): eine Leiste aus Auswahl und Knopf, Budgetkacheln in einer Reihe ohne
   Umbruch in Beschriftung und Betrag, Prämien und Anträge als Tabelle mit Fenster je Zeile. Abstände wie überall
   (--s3 zwischen Kacheln, --s5 zwischen Abschnitten). */
.team-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.team-budget { display: grid; gap: var(--s3); }
.team-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.team-kacheln .kennzahl { padding: var(--s4) var(--s5); }
/* Die Beschriftung bricht an Wortgrenzen statt mit „…“ abgeschnitten zu werden, der Betrag nie: Er bleibt ganz, wird mit
   der Breite kleiner und steht in jeder Kachel unten auf gleicher Höhe (Florian 03.11.: „saubere Kacheln ohne große
   Umbrüche“, N-183); fünf Spalten erst ab 1280 px. */
.team-kacheln .kennzahl { align-content: space-between; }
.team-kacheln .kennzahl small { overflow-wrap: normal; line-height: 1.3; }
.team-kacheln .kennzahl b { white-space: nowrap; overflow-wrap: normal; font-size: clamp(var(--t-4), 1.6vw, var(--t-5)); }
.team-budget__zusatz { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0;
  color: var(--leise); font-size: var(--t-2); }
.team-budget__zusatz b { color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Katalog einzeilig (Florian 03.11.: „lieber Fenster mit Details“); was nicht passt, steht im Fenster der Zeile. Die
   Anträge mit ihren Knöpfen dürfen umbrechen, sonst scrollte die Tabelle zwischen 561 und 1000 px seitlich. */
.team-tabelle th, .team-tabelle td { overflow-wrap: normal; }
.team-tabelle--katalog th, .team-tabelle--katalog td { white-space: nowrap; }
.team-tabelle__titel { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.team-tabelle__pfeil { width: 1%; text-align: right; }
.team-tabelle__zahl { text-align: right; white-space: nowrap; }
.team-tabelle .tabelle__knoepfe form { display: contents; }
.team-tabelle__zeile { cursor: pointer; }
.team-tabelle__zeile:hover > * { background: var(--flaeche-2); }
.team-tabelle__titel { color: var(--tinte); font-weight: 600; text-decoration: none; }
.team-tabelle__titel:hover, .team-tabelle__titel:focus-visible { text-decoration: underline; }
.team-tabelle__wer { color: var(--leise); }
.team-fenster__satz { margin: 0; padding: var(--s2) 0; border-bottom: 1px solid var(--linie); font-size: var(--t-3); }
/* Ohne Skript öffnet der Verweis das Fenster über :target als eigene Fläche in der Mitte. */
.team-fenster:target:not([open]) { display: block; position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 30; }
@media (max-width: 1280px) {
  .team-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .team-kacheln > * { grid-column: span 2; }
  .team-kacheln > :nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 640px) {
  .team-tabelle__neben { display: none; }
  .team-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-kacheln > *, .team-kacheln > :nth-child(n + 4) { grid-column: auto; }
  .team-kacheln > :last-child { grid-column: 1 / -1; }
}

/* Anfragen: links die Liste, rechts die gewählte; am Handy eins von beiden. */
.anf { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.anf__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.anf__eintrag { display: grid; gap: 4px; padding: var(--s3) var(--s4); border: 1px solid var(--linie); border-radius: var(--r-kachel);
  background: var(--flaeche); color: inherit; text-decoration: none; justify-items: start; }
.anf__eintrag:hover { border-color: var(--aktion); }
.anf__eintrag--an { border-color: var(--aktion); box-shadow: inset 0 0 0 1px var(--aktion); }
.anf__zeile { display: flex; justify-content: space-between; gap: var(--s2); width: 100%; }
.anf__zeile b { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-3); }
.anf__zeile small { color: var(--leise); font-size: var(--t-1); white-space: nowrap; }
.anf__neu { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: none; }
.anf__betreff { font-weight: 600; font-size: var(--t-3); }
.anf__vorschau { color: var(--leise); font-size: var(--t-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.anf__detail { display: grid; gap: var(--s4); padding: var(--s5); border: 1px solid var(--linie); border-radius: var(--r-karte);
  background: var(--flaeche); min-width: 0; }
.anf__zurueck { display: none; }
.anf__kopf { display: flex; align-items: center; gap: var(--s3); }
.anf__kopf > div { flex: 1; min-width: 0; }
.anf__kopf b { font-size: var(--t-4); }
.anf__kontakt { font-size: var(--t-3); font-weight: 600; }
.anf__detail h2 { font: 700 var(--t-5)/1.25 var(--anzeige); }
.anf__text { white-space: pre-line; padding: var(--s4); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); font-size: var(--t-3); }
/* Antworten aus einem Sales-Funnel (Paket N-98): Frage über Antwort, in derselben Fläche wie der Text. */
/* nb-115: je Zeile Titel links, Wert rechts, sauber untereinander; am Handy übereinander. */
.anf__abschnitt { display: grid; gap: var(--s2); }
.anf__abschnitt h3 { margin: 0; font-size: var(--t-4); }
.anf__antworten { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 0 var(--s4); margin: 0;
  padding: var(--s2) var(--s4); border-radius: var(--r-kachel); background: var(--flaeche); border: 1px solid var(--linie); }
.anf__antworten dt, .anf__antworten dd { padding: var(--s2) 0; border-bottom: 1px solid var(--linie); }
.anf__antworten dt:last-of-type, .anf__antworten dd:last-of-type { border-bottom: 0; }
.anf__antworten dt { color: var(--leise); font-size: var(--t-2); }
.anf__antworten dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--t-3); }
@media (max-width: 600px) {
  .anf__antworten { grid-template-columns: minmax(0, 1fr); }
  .anf__antworten dt { border-bottom: 0; padding-bottom: 0; }
}
.anf__anhaenge { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-3); }
.anf__anhaenge a { overflow-wrap: anywhere; }
.anf__antwort { display: grid; gap: var(--s3); }
.anf__feld { width: 100%; min-height: 160px; resize: vertical; }
.anf__an { color: var(--leise); font-size: var(--t-1); }
.anf__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); }
.anf__zuordnen > summary { list-style: none; display: inline-flex; }
.anf__zuordnen > summary::-webkit-details-marker { display: none; }
.anf__zuordnen-inhalt { display: grid; gap: var(--s3); margin-top: var(--s3); }
.anf__erledigt, .anf__bezug { color: var(--leise); font-size: var(--t-3); }
@media (max-width: 900px) {
  .anf { grid-template-columns: minmax(0, 1fr); }
  /* Ohne Wahl nur die Liste; nach dem Tippen nur die Anfrage mit „Alle Anfragen“ darüber. */
  .anf:not(.anf--gewaehlt) .anf__detail { display: none; }
  .anf--gewaehlt .anf__liste { display: none; }
  .anf--gewaehlt .anf__zurueck { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; font-size: var(--t-3); }
  .anf__detail { padding: var(--s4); }
}
/* Stil der eigenen Website (Paket N-169, W5): Vorschau der Buchungsseite mit den Werten aus /website/eigene/stil.css.
   Ohne Wert gelten die Farben des Büros; Fläche und Schrift aus den Tokens, damit hell und dunkel lesbar bleiben. */
.eigstil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.eigstil-probe { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--linie); border-radius: var(--r-gross, var(--r-kachel));
  background: var(--flaeche); color: var(--tinte); font-family: var(--schrift, inherit); }
.eigstil-probe__kopf { display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
.eigstil-probe__titel { margin: 0; font: 700 var(--t-4)/1.2 var(--anzeige, inherit); }
.eigstil-probe__text { margin: 0; }
.eigstil-probe__link { color: var(--ws-text, var(--aktion)); text-decoration: underline; }
.eigstil-probe__knopf { display: block; padding: var(--s3) var(--s4); border-radius: var(--r-knopf, var(--r-feld)); text-align: center; font-weight: 600;
  background: var(--ws-farbe, var(--aktion)); color: var(--ws-auf, var(--aktion-auf)); }
/* N-218: Rechte-Haken und Hochladen-Knopf nebeneinander, am Handy untereinander. */
.hochladen__senden { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.hochladen__senden .ankreuzen { flex: 1 1 320px; }
/* N-218: Farbfelder je Rolle und Logo-Kacheln; Farbe und gewähltes Logo der Vorschau setzt /website/eigene/stil.css. */
.eigstil__felder { display: flex; flex-wrap: wrap; gap: var(--s2); }
.eigstil__feld { position: relative; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.eigstil__feld input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.eigstil__farbe { display: block; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche-2, #eee); }
.eigstil__tresen { display: block; padding: var(--s2) var(--s3); border: 1px solid var(--linie); border-radius: 999px; font-size: var(--t-1, 14px); }
.eigstil__logo { display: block; max-height: 40px; max-width: 120px; object-fit: contain; padding: var(--s1); border: 1px solid var(--linie); border-radius: var(--r-feld); }
.eigstil__feld input:checked + :is(.eigstil__farbe, .eigstil__tresen, .eigstil__logo) { outline: 3px solid var(--aktion); outline-offset: 2px; }
.eigstil__feld input:focus-visible + * { outline: 3px solid var(--fokus, var(--aktion)); outline-offset: 2px; }
.eigstil-probe__logo { display: none; height: 40px; width: auto; max-width: 50%; object-fit: contain; }
.eigstil-probe__kopf, .eigstil-probe__fuss { padding: var(--s2) var(--s3); border-radius: var(--r-feld); background: var(--flaeche); color: var(--tinte); }
.eigstil-probe__fuss { font-size: var(--t-1, 14px); }
.eigstil-probe__zeiten { display: flex; flex-wrap: wrap; gap: var(--s2); }
.eigstil-probe__tag { padding: var(--s1) var(--s3); border: 1px solid var(--linie); border-radius: var(--r-knopf, var(--r-feld)); }
.eigstil-probe__tag--an { background: var(--ws-farbe, var(--aktion)); color: var(--ws-auf, var(--aktion-auf)); border-color: transparent; }
.eigstil__wahl, .eigstil__teile { display: grid; gap: var(--s3); }
.eigstil__teile { border: 0; margin: 0; padding: 0; min-width: 0; }
.eigstil__teile span { overflow-wrap: anywhere; }
@media (max-width: 760px) { .eigstil { grid-template-columns: minmax(0, 1fr); } }
/* Paket N-221: je Rolle ein rundes Feld mit der gewählten Farbe; die Palette klappt darunter auf (`details`). Ohne
   gewählte Farbe („wie Tresen“) zeigt das Feld die Fläche von Tresen; die Farben setzt /website/eigene/stil.css. */
.eigstil__rollen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s2); align-items: start; }
.eigstil__rolle { min-width: 0; border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--flaeche); }
.eigstil__gewaehlt { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) var(--s3); cursor: pointer; list-style: none; font-weight: 600; }
.eigstil__gewaehlt::-webkit-details-marker { display: none; }
.eigstil__gewaehlt::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.eigstil__rolle[open] > .eigstil__gewaehlt::after { transform: rotate(-135deg); }
.eigstil__gewaehlt:focus-visible { outline: 3px solid var(--fokus, var(--aktion)); outline-offset: 2px; border-radius: var(--r-feld); }
.eigstil__kreis { flex: none; display: block; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linie); background: linear-gradient(135deg, var(--flaeche) 0 50%, var(--aktion) 50% 100%); }
.eigstil__rollenname { min-width: 0; overflow-wrap: anywhere; }
.eigstil__palette { padding: var(--s2) var(--s3) var(--s3); border-top: 1px solid var(--linie); }
.eigstil__logowahl { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: start; }
.eigstil__logokachel { display: grid; gap: var(--s2); justify-items: start; padding: var(--s3); border: 1px solid var(--linie); border-radius: var(--r-feld); cursor: pointer; }
.eigstil__logokachel .eigstil__logo { max-height: 56px; max-width: 180px; }
.eigstil__hochladen { display: grid; gap: var(--s2); flex: 1 1 220px; min-width: 0; justify-items: start; }

/* ---------- Einrichtungsassistent (Paket N-182, SOLL-REGEL-ONBOARD-09) ----------
   Runder Knopf unten rechts mit Fortschrittsring, darüber das Fenster mit den Schritten (natives Popover). Am Handy
   steht der Knopf über der Reiterleiste, das Fenster kommt als Blatt von unten in voller Breite. Die Seite bekommt
   unten so viel Platz, dass der Knopf kein Feld und keinen Knopf verdeckt. */
.assistent__knopf { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 25; display: inline-flex; align-items: center;
  gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s5) var(--s2) var(--s2); border: 0; border-radius: var(--r-pille);
  background: var(--buehne); color: var(--kohle-text); font: 600 var(--t-4)/1 var(--schrift); box-shadow: var(--schatten-leiste);
  cursor: pointer; transition: transform var(--bewegung), translate var(--bewegung), opacity var(--bewegung); }
.assistent__knopf:hover { transform: translateY(-1px); }
.assistent__knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.assistent__ring { position: relative; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.assistent__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.assistent__ring circle { fill: none; stroke-width: 3.5; }
.assistent__bahn { stroke: var(--kohle-2); }
.assistent__voll { stroke: var(--gruen); stroke-linecap: round; }
.assistent__ring b { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; }
.assistent__fenster { position: fixed; inset: auto var(--s6) calc(var(--s6) + 72px) auto; margin: 0; width: min(400px, calc(100vw - 2 * var(--s6)));
  max-height: calc(100vh - 140px); overflow-y: auto; padding: var(--s5) var(--s5) var(--s4); border: 1px solid var(--linie);
  border-radius: var(--r-karte); background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-leiste); }
.assistent__fenster::backdrop { background: transparent; }
/* Kopf und Fuß bleiben stehen, nur die Schritte scrollen: Bei 900 px Höhe lag der Fuß („Probebuchung“, „Ausblenden“)
   unter dem Rand, ohne dass man es sah (N-183, B118/B195). */
.assistent__fenster:popover-open { display: flex; flex-direction: column; overflow: hidden; max-height: min(calc(100vh - 140px), calc(100dvh - 140px)); }
.assistent__fenster:popover-open > .assistent__schritte { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.assistent__fenster:popover-open > :not(.assistent__schritte) { flex: none; }
.assistent__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.assistent__kopf h2 { margin: 0; font: 700 var(--t-5)/1.2 var(--anzeige); }
.assistent__zu { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--tinte); display: grid; place-items: center; cursor: pointer; flex: none; }
.assistent__zu:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.assistent__stand { margin: var(--s1) 0 var(--s3); color: var(--leise); font-size: var(--t-2); }
.assistent__balken { display: block; width: 100%; height: 6px; margin-bottom: var(--s3); border: 0; border-radius: var(--r-pille);
  background: var(--flaeche-2); appearance: none; overflow: hidden; }
.assistent__balken::-webkit-progress-bar { background: var(--flaeche-2); }
.assistent__balken::-webkit-progress-value { background: var(--gruen); border-radius: var(--r-pille); }
.assistent__balken::-moz-progress-bar { background: var(--gruen); border-radius: var(--r-pille); }
.assistent__schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
/* „Freiwillig“ (N-184): unter den nummerierten Pflichtschritten, ohne Nummer und ohne Zählung. */
.assistent__abschnitt { margin: var(--s3) 0 var(--s1); padding-top: var(--s3); border-top: 1px solid var(--linie);
  color: var(--leise); font: 600 var(--t-2)/1.3 var(--schrift); }
.assistent__zeile { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s3);
  border-radius: var(--r-kachel); color: inherit; text-decoration: none; font-size: var(--t-3); }
a.assistent__zeile:hover { background: var(--flaeche-2); }
a.assistent__zeile:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.assistent__punkt { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--kante-feld); display: grid; place-items: center;
  flex: none; font-size: var(--t-1); font-weight: 600; }
.assistent__was { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.assistent__was b { font-weight: 600; }
.assistent__was small { color: var(--leise); font-size: var(--t-1); }
.assistent__pfeil { display: inline-flex; align-items: center; gap: var(--s1); color: var(--aktion); font-size: var(--t-2); font-weight: 600;
  white-space: nowrap; }
.assistent__schritt--ok .assistent__punkt { background: var(--gruen); border-color: var(--gruen); color: var(--gruen-auf); }
.assistent__schritt--ok .assistent__was b { color: var(--leise); font-weight: 500; text-decoration: line-through; }
.assistent__schritt--jetzt > .assistent__zeile { background: var(--aktion-zart); }
.assistent__wahl { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s1) 0 var(--s2) calc(26px + var(--s3) + var(--s3)); }
.assistent__pille { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: var(--s1) var(--s3); border-radius: var(--r-pille);
  border: 1px solid var(--kante-feld); color: var(--tinte); font-size: var(--t-2); font-weight: 600; text-decoration: none; }
.assistent__pille--an { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-auf); }
.assistent__pille:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
/* Fragen mit Antwort-Pillen (N-188): links die Frage, rechts die Antworten als Knöpfe; die Antwort ist hervorgehoben. */
button.assistent__pille { background: var(--flaeche); font-family: inherit; cursor: pointer; }
button.assistent__pille.assistent__pille--an { background: var(--knopf); }
.assistent__fragen { display: grid; gap: var(--s2); margin: var(--s1) 0 var(--s2) calc(26px + var(--s3) + var(--s3)); }
.assistent__frage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin: 0; }
.assistent__frage-titel { font-size: var(--t-2); font-weight: 600; }
.assistent__antworten { display: flex; flex-wrap: wrap; gap: var(--s2); }
.assistent__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--linie); font-size: var(--t-2); }
.assistent__fuss a { color: var(--leise); }
.assistent__fuss form { margin: 0; }
.assistent__aus { border: 0; background: none; padding: var(--s1) 0; min-height: 32px; color: var(--leise); font: inherit;
  text-decoration: underline; cursor: pointer; }
/* Im Website-Editor liegt unten die eigene Werkzeugleiste; dort bliebe der Knopf auf ihr liegen. */
.rahmen:has(.wed2) .assistent { display: none; }
/* Platz unter dem Inhalt: Weiter-Leiste, letzte Felder und Knöpfe bleiben über dem Knopf erreichbar (N-177). Nur
   die Differenz zum unteren Abstand, den Spalte und Rahmen schon haben (Review N-182). */
.rahmen--leiste:has(.assistent) .spalte > .inhalt { padding-bottom: 48px; }
html:has(.assistent) { scroll-padding-bottom: 96px; }
@media (max-width: 760px) {
  .assistent__knopf { right: max(var(--s4), env(safe-area-inset-right, 0px)); bottom: calc(84px + var(--s3) + env(safe-area-inset-bottom, 0px));
    min-height: 48px; padding-right: var(--s4); font-size: var(--t-3); }
  .assistent__ring { width: 34px; height: 34px; }
  /* Am Handy der runde Knopf ohne Wort (N-203, N06): halb so breit, verdeckt weniger. Liegt ein Knopf darunter, rückt
     er um `--assistent-ruecken` nach oben (buero-fenster.js). */
  .assistent__knopf { padding: var(--s2); border-radius: 50%; translate: 0 var(--assistent-ruecken, 0px); }
  .assistent__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Ist auch weiter oben keine Stelle frei, blendet er sich während des Scrollens aus; danach steht er wieder da
     (buero-fenster.js). Mit Fokus oder offenem Fenster bleibt er, damit Tastatur und Blatt ihn nicht verlieren. */
  .assistent--weicht .assistent__knopf:not(:focus-visible) { opacity: 0; transform: translateY(16px); pointer-events: none; }
  .assistent__fenster, .assistent__fenster:popover-open { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85vh;
    padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-karte) var(--r-karte) 0 0;
    border-bottom: 0; }
  .assistent__fenster::backdrop { background: rgba(15, 15, 15, .35); }
  .rahmen--leiste:has(.assistent) .spalte > .inhalt { padding-bottom: 28px; }
  html:has(.assistent) { scroll-padding-bottom: calc(84px + 72px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .assistent__knopf { transition: none; } }

/* Zwei-Faktor-Anmeldung (N-196): Schlüssel und Codes in fester Breite, damit man sie Zeichen für Zeichen abtippt. */
.zwei-faktor__schritte { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s5); }
.zwei-faktor__schritte > li > b { display: block; margin-bottom: var(--s2); }
.zwei-faktor__schluessel { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.zwei-faktor__code { font-family: var(--mono); letter-spacing: .12em; max-width: 16ch; }
.zwei-faktor__codes { list-style: none; margin: var(--s4) 0; padding: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(12ch, 1fr)); }
.zwei-faktor__codes code { font-family: var(--mono); font-size: 1rem; }