/* ============================================================================
   Nebenkosten-Cockpit – Design-System
   ============================================================================

   Ruhig, wenige Akzentfarben, Karten-Layout. Desktop-first für die
   Rechnungsprüfung (breite Tabellen), mobil optimiert für den Blick aufs
   Dashboard.

   WICHTIG – Inhaltssicherheitsrichtlinie (server.js):
     style-src 'self'  → keine <style>-Blöcke, keine style="..."-Attribute
     script-src 'self' → keine Inline-Skripte, kein onclick="..."
     font-src 'self'   → Schriften ausschließlich aus public/fonts/
   Alles Dynamische läuft über Klassen oder über CSS-Variablen, die das
   Skript per element.style.setProperty setzt (das ist kein Inline-Style im
   Sinne der Richtlinie).
   ========================================================================= */

/* ── Schriften ─────────────────────────────────────────────────────────────
   IBM Plex wie in der Kyberion-Familie, selbst ausgeliefert (OFL-1.1, siehe
   fonts/LICENSE-IBM-Plex.txt). Die Latin1-Schnitte decken Umlaute und ß ab.
   font-display: swap – lieber sofort Text in der Ersatzschrift als eine
   leere Seite.                                                              */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Farben und Maße ──────────────────────────────────────────────────────
   Ein Akzent (gedecktes Blau) und die drei Ampelfarben. Mehr nicht – die
   Farbe soll etwas bedeuten, nicht schmücken.                              */

:root {
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --flaeche:        #f6f7f9;
  --karte:          #ffffff;
  --rand:           #e2e5ea;
  --rand-stark:     #c9ced7;
  --text:           #1b1f24;
  --text-leise:     #5b6472;
  --text-still:     #8b93a1;

  --akzent:         #2b5a8f;
  --akzent-hell:    #eaf1f8;
  --akzent-dunkel:  #1d3e63;

  --gruen:          #2f7d4f;
  --gruen-hell:     #e8f3ec;
  --gelb:           #9a6a06;
  --gelb-hell:      #fbf2df;
  --rot:            #a32c2c;
  --rot-hell:       #fbebeb;

  --radius:   10px;
  --radius-s: 6px;
  --lueck-1: 4px;
  --lueck-2: 8px;
  --lueck-3: 12px;
  --lueck-4: 16px;
  --lueck-5: 24px;
  --lueck-6: 32px;
  --schatten: 0 1px 2px rgba(16, 22, 30, 0.05), 0 1px 8px rgba(16, 22, 30, 0.04);
  --kopfhoehe: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --flaeche:       #14171c;
    --karte:         #1b1f26;
    --rand:          #2c323c;
    --rand-stark:    #3d4552;
    --text:          #e8eaee;
    --text-leise:    #a3abb9;
    --text-still:    #79818f;
    --akzent:        #7aa9dc;
    --akzent-hell:   #1d2a38;
    --akzent-dunkel: #a8c6e6;
    --gruen:         #79c495;
    --gruen-hell:    #1a2a20;
    --gelb:          #dfb055;
    --gelb-hell:     #2b2317;
    --rot:           #e08b8b;
    --rot-hell:      #2e1c1c;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */

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

/* Das hidden-Attribut muss gegen jede display-Regel gewinnen. Ohne diese
   Zeile überstimmt z. B. `.feld { display: grid }` das Attribut, und ein
   verborgen geschalteter Block bleibt sichtbar – im DOM-Ersatz der Tests
   unbemerkt, im Browser nicht (gefunden im Scheiben-Dialog, Migration 017). */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 var(--lueck-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono, .zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.versteckt { display: none !important; }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Kopfzeile und Navigation ─────────────────────────────────────────── */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--lueck-4);
  height: var(--kopfhoehe);
  padding: 0 var(--lueck-4);
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
}

.kopf__marke {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.kopf__marke:hover { text-decoration: none; }
.kopf__marke span { color: var(--akzent); }

.kopf__nav {
  display: flex;
  gap: var(--lueck-1);
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.kopf__nav::-webkit-scrollbar { display: none; }

.navlink {
  padding: 6px 10px;
  border-radius: var(--radius-s);
  color: var(--text-leise);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.navlink:hover { background: var(--flaeche); text-decoration: none; color: var(--text); }
.navlink[aria-current='page'] { background: var(--akzent-hell); color: var(--akzent-dunkel); }

.kopf__benutzer {
  display: flex;
  align-items: center;
  gap: var(--lueck-3);
  font-size: 13px;
  color: var(--text-leise);
  white-space: nowrap;
}

/* ── Seitengerüst ─────────────────────────────────────────────────────── */

.inhalt {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--lueck-5) var(--lueck-4) var(--lueck-6);
}

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lueck-3);
  margin-bottom: var(--lueck-5);
}
.seitenkopf__text { min-width: 0; }
.seitenkopf__hinweis {
  margin: var(--lueck-1) 0 0;
  color: var(--text-leise);
  font-size: 14px;
}
.seitenkopf__aktionen { display: flex; flex-wrap: wrap; gap: var(--lueck-2); }

.zurueck {
  display: inline-block;
  margin-bottom: var(--lueck-3);
  font-size: 14px;
  color: var(--text-leise);
}

/* ── Karten ───────────────────────────────────────────────────────────── */

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
/* Gestapelte Karten brauchen Abstand – im Raster nicht: dort macht das
   'gap' die Arbeit, und ein margin-top würde die zweite bis vierte Karte
   nach unten schieben, sodass die erste aus der Reihe fällt. */
.karte + .karte { margin-top: var(--lueck-4); }
.raster > .karte + .karte { margin-top: 0; }
/* Derselbe Abstand zwischen Raster und Karte. Ohne diese Zeile klebten die
   Kennzahlen der Vertragsansicht ohne Lücke am Filter (Migration 019). */
.raster + .karte, .karte + .raster, .raster + .raster { margin-top: var(--lueck-4); }

.karte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lueck-3);
  padding: var(--lueck-4);
  border-bottom: 1px solid var(--rand);
}
.karte__kopf h2 { min-width: 0; }
.karte__kopf-aktionen { display: flex; flex-wrap: wrap; gap: var(--lueck-2); }
.karte__rumpf { padding: var(--lueck-4); }
.karte__rumpf--eng { padding: 0; }

.raster {
  display: grid;
  gap: var(--lueck-4);
  /* min(...) ist Pflicht: eine feste Mindestbreite in minmax() kann NICHT
     schrumpfen, die Spur bleibt 240 bzw. 320 px breit und schiebt die Seite
     auf schmalen Telefonen (320 px) seitlich hinaus. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* Karten einer Rasterreihe auf gleiche Höhe: sonst wirkt die Reihe schief,
   weil ein längerer Zusatztext eine Karte höher macht. */
.raster > .karte { display: flex; flex-direction: column; }
.raster > .karte > .karte__rumpf,
.raster > .karte > .kennzahl { flex: 1; }

/* ── Kennzahlen ───────────────────────────────────────────────────────── */

.kennzahl { padding: var(--lueck-4); }
.kennzahl__bezeichnung {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-still);
}
.kennzahl__wert {
  margin-top: var(--lueck-2);
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kennzahl__zusatz {
  margin-top: var(--lueck-2);
  font-size: 13px;
  color: var(--text-leise);
}
.kennzahl__wert--gruen { color: var(--gruen); }
.kennzahl__wert--rot   { color: var(--rot); }

/* ── Ampel ────────────────────────────────────────────────────────────── */

.ampel {
  display: flex;
  align-items: center;
  gap: var(--lueck-4);
  padding: var(--lueck-4);
  border-radius: var(--radius);
  border: 1px solid;
}
.ampel__symbol { font-size: 30px; line-height: 1; }
.ampel__text { min-width: 0; }
.ampel__stufe { font-size: 17px; font-weight: 600; }
.ampel__zusatz { margin-top: 2px; font-size: 14px; }

.ampel--vollstaendig { background: var(--gruen-hell); border-color: var(--gruen); }
.ampel--vollstaendig .ampel__stufe { color: var(--gruen); }
.ampel--zu_pruefen   { background: var(--gelb-hell);  border-color: var(--gelb); }
.ampel--zu_pruefen .ampel__stufe   { color: var(--gelb); }
.ampel--kritisch     { background: var(--rot-hell);   border-color: var(--rot); }
.ampel--kritisch .ampel__stufe     { color: var(--rot); }

/* Kennzeichnung – dieselben drei Stufen, überall gleich verwendet. */
.kennzeichen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.kennzeichen--vollstaendig { background: var(--gruen-hell); color: var(--gruen); border-color: var(--gruen); }
.kennzeichen--zu_pruefen   { background: var(--gelb-hell);  color: var(--gelb);  border-color: var(--gelb); }
.kennzeichen--kritisch     { background: var(--rot-hell);   color: var(--rot);   border-color: var(--rot); }
.kennzeichen--neutral      { background: var(--flaeche);    color: var(--text-leise); border-color: var(--rand); }
.kennzeichen--akzent       { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: var(--akzent); }

/* Befundliste */
.befunde { list-style: none; margin: 0; padding: 0; }
.befunde li {
  display: flex;
  gap: var(--lueck-3);
  padding: var(--lueck-3) 0;
  border-top: 1px solid var(--rand);
  font-size: 14px;
}
.befunde li:first-child { border-top: 0; }
.befund__inhalt { min-width: 0; flex: 1; }
.befund__titel { font-weight: 500; }
.befund__text { margin-top: 2px; color: var(--text-leise); }
.befund__grund {
  margin-top: var(--lueck-2);
  padding-left: var(--lueck-3);
  border-left: 2px solid var(--rand);
  color: var(--text-leise);
  font-size: 13px;
}
.befund__belege {
  margin: var(--lueck-2) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-leise);
}
.befund__belege li { display: block; border: 0; padding: 1px 0; }

/* ── Tabellen ─────────────────────────────────────────────────────────── */

.tabelle-huelle { overflow-x: auto; }

table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tabelle th,
table.tabelle td {
  padding: 10px var(--lueck-4);
  text-align: left;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
table.tabelle th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-still);
  background: var(--flaeche);
  white-space: nowrap;
}
table.tabelle tbody tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover { background: var(--flaeche); }
table.tabelle .rechts { text-align: right; }
table.tabelle .zahl { white-space: nowrap; }
table.tabelle .ganz { white-space: nowrap; }
table.tabelle .aktionen { text-align: right; white-space: nowrap; }
/* Die Knopfreihe ist ein Flex-Element; text-align der Zelle wirkt darauf
   nicht. Ohne diese Zeile kleben die Knöpfe links. */
table.tabelle td.aktionen .knopfreihe {
  justify-content: flex-end;
  /* Nicht umbrechen: umgebrochene Knopfreihen machen die Zeilen ungleich
     hoch und die Tabelle unruhig. Die Spalte bekommt durch nowrap ihre
     Mindestbreite, notfalls scrollt die Tabellenhülle. */
  flex-wrap: nowrap;
}

.leer {
  padding: var(--lueck-6) var(--lueck-4);
  text-align: center;
  color: var(--text-leise);
}
.leer__titel { font-weight: 500; color: var(--text); }
.leer p { margin-top: var(--lueck-2); font-size: 14px; }

/* ── Bedienelemente ───────────────────────────────────────────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-s);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.knopf:hover { background: var(--flaeche); }
.knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.knopf--haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
.knopf--haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf--gefahr { color: var(--rot); border-color: var(--rot); }
.knopf--gefahr:hover { background: var(--rot-hell); }
.knopf--klein { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.knopf--schlicht { border-color: transparent; background: none; color: var(--akzent); }
.knopf--schlicht:hover { background: var(--akzent-hell); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--lueck-2); }

/* ── Briefkopf (Punkt 7) ──────────────────────────────────────────────────
   Die Vorschau zeigt das Logo auf WEISS, unabhängig von der
   Systemeinstellung. Auf dunklem Grund sähe ein dunkles Logo unsichtbar aus
   und ein freigestelltes falsch – die Abrechnung ist weißes Papier, und die
   Vorschau soll das Papier zeigen und nicht den Bildschirm.                */

.briefkopf {
  display: grid;
  gap: var(--lueck-4);
  justify-items: start;
}

.briefkopf__bild {
  max-width: 100%;
  /* Derselbe Kasten wie im PDF (170 × 40 Punkte), verdoppelt für den
     Bildschirm. So sieht man hier, wie viel Platz das Logo dort bekommt. */
  max-height: 80px;
  background: #ffffff;
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  padding: var(--lueck-3);
}

.briefkopf__angaben {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--lueck-1) var(--lueck-4);
  margin: 0;
  font-size: 13px;
}
.briefkopf__angaben dt { color: var(--text-leise); }
.briefkopf__angaben dd { margin: 0; }

/* Das Formular ist der ZWEITE Teil der Karte: oben steht, was gilt, unten,
   wie man es ändert. Ohne diese Trennlinie klebte der Knopf 'Logo entfernen'
   direkt am Dateifeld, und beides sah nach einem Vorgang aus. */
.briefkopf__formular {
  display: grid;
  gap: var(--lueck-4);
  margin-top: var(--lueck-5);
  padding-top: var(--lueck-5);
  border-top: 1px solid var(--rand);
}

/* Der Name der Organisation in der Kopfzeile führt zu den Einstellungen. */
.kopf__organisation {
  color: var(--text-leise);
  border-bottom: 1px dotted var(--rand-stark);
}
.kopf__organisation:hover { color: var(--text); text-decoration: none; }

/* ── Formulare ────────────────────────────────────────────────────────── */

.formular { display: grid; gap: var(--lueck-4); }
.formular__reihe {
  display: grid;
  gap: var(--lueck-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* align-content: start – sonst dehnt das Raster seine Zeilen, sobald das
   Nachbarfeld derselben Reihe einen Hinweis trägt, und die Eingabe steht
   gestreckt und tiefer als ihre Nachbarin (gesehen im Vertragsdialog). */
.feld { display: grid; gap: 5px; min-width: 0; align-content: start; }
.feld__beschriftung { font-size: 13px; font-weight: 500; color: var(--text-leise); }
.feld__pflicht { color: var(--rot); }
.feld__hinweis { font-size: 12px; color: var(--text-still); }
.feld__fehler { font-size: 13px; color: var(--rot); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-s);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.feld textarea { min-height: 80px; resize: vertical; }
.feld input[type='number'],
.feld input[type='date'] { font-family: var(--mono); }
.feld input:invalid { border-color: var(--rand-stark); }
.feld--fehlerhaft input,
.feld--fehlerhaft select { border-color: var(--rot); }

/* Ankreuzfelder (Teilnehmerkreis einer Zeitscheibe): nicht die Breite und
   Polsterung der Texteingaben erben – sonst steht ein 36 px hohes Kästchen
   über der Mitte, die Beschriftung darunter. */
.feld .ankreuzen {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--text); cursor: pointer;
}
.feld .ankreuzen input[type='checkbox'] {
  width: 18px; min-height: 0; height: 18px; padding: 0; margin: 0; flex: none;
}

/* ── Meldungen ────────────────────────────────────────────────────────── */

.meldung {
  padding: var(--lueck-3) var(--lueck-4);
  border: 1px solid;
  border-radius: var(--radius-s);
  font-size: 14px;
}
.meldung + .meldung { margin-top: var(--lueck-3); }
.meldung--fehler   { background: var(--rot-hell);   border-color: var(--rot);   color: var(--rot); }
.meldung--warnung  { background: var(--gelb-hell);  border-color: var(--gelb);  color: var(--gelb); }
.meldung--erfolg   { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.meldung--hinweis  { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel); }
.meldung ul { margin: var(--lueck-2) 0 0; padding-left: var(--lueck-4); }

.hinweisliste { margin: 0; padding-left: var(--lueck-4); font-size: 14px; color: var(--text-leise); }

/* Dokumente eines Vertrags (Migration 019): Angaben und Knöpfe in einer Zeile. */
.dokumentliste { list-style: none; margin: 0 0 var(--lueck-3); padding: 0; display: grid; gap: var(--lueck-2); }
.dokumentliste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--lueck-2);
  padding-bottom: var(--lueck-2); border-bottom: 1px solid var(--rand); font-size: 14px;
}
.dokumentliste li > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }

/* Kurzmeldungen unten rechts */
.toasts {
  position: fixed;
  bottom: var(--lueck-4);
  right: var(--lueck-4);
  left: var(--lueck-4);
  z-index: 60;
  display: grid;
  gap: var(--lueck-2);
  justify-items: end;
  pointer-events: none;
}
.toast {
  max-width: 420px;
  padding: 10px var(--lueck-4);
  border-radius: var(--radius-s);
  border: 1px solid;
  background: var(--karte);
  box-shadow: var(--schatten);
  font-size: 14px;
  pointer-events: auto;
}
.toast--erfolg { border-color: var(--gruen); color: var(--gruen); }
.toast--fehler { border-color: var(--rot);   color: var(--rot); }
.toast--hinweis { border-color: var(--rand-stark); color: var(--text); }

/* ── Dialog ───────────────────────────────────────────────────────────── */

.dialog-huelle {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--lueck-4);
  overflow-y: auto;
  background: rgba(16, 22, 30, 0.45);
}
.dialog {
  width: 100%;
  max-width: 560px;
  margin: auto;
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(16, 22, 30, 0.25);
}
.dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lueck-3);
  padding: var(--lueck-4);
  border-bottom: 1px solid var(--rand);
}
.dialog__rumpf { padding: var(--lueck-4); }
.dialog__fuss {
  display: flex;
  justify-content: flex-end;
  gap: var(--lueck-2);
  padding: var(--lueck-4);
  border-top: 1px solid var(--rand);
}

/* ── Anmeldung ────────────────────────────────────────────────────────── */

.anmeldung {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--lueck-4);
}
.anmeldung__karte { width: 100%; max-width: 420px; }
.anmeldung__marke {
  margin-bottom: var(--lueck-5);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.anmeldung__marke span { color: var(--akzent); }
.anmeldung__wechsel {
  margin-top: var(--lueck-4);
  text-align: center;
  font-size: 14px;
  color: var(--text-leise);
}

/* ── Assistent ────────────────────────────────────────────────────────── */

.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lueck-2);
  margin-bottom: var(--lueck-4);
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.schritt {
  display: flex;
  align-items: center;
  gap: var(--lueck-2);
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--karte);
  font-size: 13px;
  color: var(--text-leise);
}
.schritt__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--flaeche);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.schritt--erledigt { border-color: var(--gruen); color: var(--gruen); background: var(--gruen-hell); }
.schritt--erledigt .schritt__nummer { background: var(--gruen); color: var(--karte); }
.schritt--aktiv { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-hell); }
.schritt--aktiv .schritt__nummer { background: var(--akzent); color: #fff; }
/* Übersprungen: unerledigt, obwohl ein späterer Schritt erledigt ist.
   Nicht als "aktuell" markieren – der Vorgang ist dort nicht stehengeblieben. */
.schritt--uebersprungen { border-style: dashed; color: var(--text-still); }

/* Summenblock unter einer Tabelle: gleiche Einrückung wie die Zellen. */
.summenblock { padding: var(--lueck-2) var(--lueck-4) 0; }
.summenblock .feld__hinweis { padding-top: var(--lueck-2); }

.summenzeile {
  display: flex;
  justify-content: space-between;
  gap: var(--lueck-4);
  padding: 8px 0;
  font-size: 14px;
}
.summenzeile + .summenzeile { border-top: 1px solid var(--rand); }
.summenzeile--stark {
  border-top: 2px solid var(--rand-stark);
  font-size: 16px;
  font-weight: 600;
}
/* nowrap: sonst bricht auf dem Telefon das Währungszeichen in die
   nächste Zeile und der Betrag sieht wie zwei Zahlen aus. */
.summenzeile__wert { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Ladeanzeige ──────────────────────────────────────────────────────── */

.laedt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lueck-3);
  padding: var(--lueck-6);
  color: var(--text-leise);
  font-size: 14px;
}
.laedt::before {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid var(--rand-stark);
  border-top-color: var(--akzent);
  border-radius: 999px;
  animation: dreh 0.7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .laedt::before { animation: none; }
}

/* ── Mobil ────────────────────────────────────────────────────────────────
   Das Dashboard wird unterwegs gelesen, die Rechnungsprüfung am Rechner.
   Tabellen brechen deshalb auf Karten um, statt zu schrumpfen: eine
   Zahlenspalte mit 3 mm Breite ist unlesbar.                               */

/* Mittlere Breiten: die Navigation bekommt eine eigene Zeile, sobald sie
   neben Marke und Benutzerbereich nicht mehr vollständig hineinpasst.

   Die Grundregel gibt .kopf__nav ein overflow-x: auto MIT ausgeblendetem
   Rollbalken. Das ist auf dem Telefon richtig (dort bricht die Navigation
   ohnehin um), auf einem 1000-Pixel-Fenster aber eine Falle: die hinteren
   Einträge sind weggerollt, und weil der Rollbalken unsichtbar ist, sieht man
   nicht einmal, dass da noch etwas ist. Mit sieben Einträgen (seit Phase 8)
   beginnt das deutlich vor der Mobilgrenze von 720px.

   Derselbe Grund wie im Mobilblock: ein weggerollter Reiter ist praktisch
   unerreichbar. Also umbrechen statt rollen. */
/* Seit Migration 018 (Belege) und 019 (Verträge): neun Einträge. Gemessen im
   Browser: Navigation 831 px + Marke, Benutzerbereich und Abstände 407 px =
   ~1240 px. 1340 lässt Luft für einen längeren Organisationsnamen. Je
   weiterem Eintrag ~80 px mehr (tests/frontend.test.js rechnet nach). */
@media (max-width: 1340px) {
  .kopf {
    height: auto;
    flex-wrap: wrap;
    padding-top: var(--lueck-2);
    padding-bottom: var(--lueck-2);
  }
  .kopf__nav {
    order: 3;
    /* flex-basis MUSS gesetzt werden: das flex:1 der Grundregel legt die
       Basis auf 0, und width:100% überschreibt eine Basis nicht. */
    flex: 0 0 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: var(--lueck-1);
  }
  .kopf__benutzer { margin-left: auto; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }

  .kopf {
    height: auto;
    flex-wrap: wrap;
    padding: var(--lueck-2) var(--lueck-3);
    gap: var(--lueck-2);
  }
  /* flex-basis MUSS hier stehen: das flex:1 der Grundregel setzt die Basis
     auf 0, und width:100% überschreibt die Basis nicht – die Navigation
     blieb dadurch in der ersten Zeile und war auf wenige Pixel gequetscht. */
  .kopf__nav {
    order: 3;
    flex: 0 0 100%;
    /* Umbrechen statt seitlich scrollen: ein weggescrollter Reiter ist auf
       dem Telefon praktisch unerreichbar. */
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: var(--lueck-1);
    padding-bottom: var(--lueck-1);
  }
  .kopf__benutzer { margin-left: auto; }

  .inhalt { padding: var(--lueck-4) var(--lueck-3) var(--lueck-6); }

  .karte__kopf, .karte__rumpf, .kennzahl { padding: var(--lueck-3); }

  .seitenkopf { margin-bottom: var(--lueck-4); }
  .seitenkopf__aktionen { width: 100%; }
  .seitenkopf__aktionen .knopf { flex: 1; }

  .ampel { flex-direction: row; padding: var(--lueck-3); }
  .ampel__symbol { font-size: 26px; }

  /* Tabelle → Karten. Die Spaltenbeschriftung kommt aus data-spalte. */
  table.tabelle thead { display: none; }
  table.tabelle, table.tabelle tbody, table.tabelle tr, table.tabelle td { display: block; }
  table.tabelle tr {
    padding: var(--lueck-3);
    border-bottom: 1px solid var(--rand);
  }
  table.tabelle tr:last-child { border-bottom: 0; }
  table.tabelle td {
    display: flex;
    justify-content: space-between;
    gap: var(--lueck-4);
    padding: 3px 0;
    border: 0;
    text-align: right;
  }
  table.tabelle td::before {
    content: attr(data-spalte);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-still);
    text-align: left;
  }
  table.tabelle .ganz { white-space: normal; }
  table.tabelle td:empty { display: none; }
  /* Mehrzeilige Inhalte (Begründungslisten) rechtsbündig neben der
     Beschriftung zu quetschen ist unlesbar – sie stapeln sich darunter. */
  table.tabelle td:has(ul), table.tabelle td:has(.befundliste) {
    display: block;
    text-align: left;
  }
  table.tabelle td:has(ul)::before { display: block; margin-bottom: 3px; }
  table.tabelle td .hinweisliste { font-size: 15px; }
  table.tabelle td.aktionen {
    justify-content: flex-end;
    /* Mobil doch umbrechen: senkrechter Platz ist billiger als seitliches
       Scrollen nach einem Knopf. Auf dem Schreibtisch gilt das Gegenteil. */
    flex-wrap: wrap;
    row-gap: var(--lueck-2);
    padding-top: var(--lueck-2);
  }
  table.tabelle td.aktionen::before { content: ''; }

  .formular__reihe { grid-template-columns: 1fr; }
  .dialog__fuss { flex-direction: column-reverse; }
  .dialog__fuss .knopf { width: 100%; }
  .toasts { justify-items: stretch; }
  .toast { max-width: none; }
}

/* Sehr breite Bildschirme: die Rechnungsprüfung darf Platz haben. */
@media (min-width: 1400px) {
  .inhalt { max-width: 1320px; }
}

@media print {
  .kopf, .seitenkopf__aktionen, .karte__kopf-aktionen, .aktionen, .toasts { display: none !important; }
  body { background: #fff; }
  .karte { border-color: #999; box-shadow: none; break-inside: avoid; }
}