/* ==========================================================================
   STROMAI — LEITWARTE UND KUNDENTISCH

   Ein Werkzeug, das taeglich stundenlang offen ist, und dessen Gegenstand
   Geld, Fristen und Belege sind. Die Gestaltung folgt daraus, nicht aus einer
   Mode.

   Seit 2026-09-19 hat es zwei Benutzungslagen statt einer, und das ist der
   Grund fuer den hellen Vorgabesatz: allein am Schreibtisch werden Belege
   geprueft, und neben einem Kunden wird eine Zahl gezeigt. Die zweite Lage
   findet in hellen Raeumen statt.

   ZWEI ACHSEN, DIE SICH NIE VERMISCHEN. Das ist die tragende Regel dieser
   Datei, und sie loest das Problem, das bis 2026-08-30 gegen einen zweiten
   Farbsatz sprach (frueherer Kopf dieser Datei, ADR-0002):

     WISSENSSTAND  -> Textur + Wort.  Ob eine Angabe bestaetigt, nur
                      vorgeschlagen, unbekannt oder nachweislich leer ist,
                      haengt an der Schiene links am Wert und am ausge-
                      schriebenen Wort. NIE an einer Farbe.

     DRINGLICHKEIT -> Farbe + Wort.  Ob etwas in Ordnung ist, eine Frist
                      laeuft oder etwas gesperrt ist, haengt an der Farbe -
                      und immer zusaetzlich am Wort.

   Weil kein Zustand allein an einer Farbe haengt, kann ein zweiter Farbsatz
   keinen Zustand verschlucken. Genau das war das Argument gegen die Themes;
   die Trennung raeumt es aus, statt es zu uebergehen.

   WAS DIE MASCHINE WOERTLICH GELESEN HAT, STEHT IN MONOSPACE. Zitat,
   Fundstelle, Pruefsumme, Partitionsversion, Adresse. Was ein Mensch
   behauptet oder benennt, steht in Plex Sans. Das ist keine Zierde: die
   Unterscheidung zwischen "belegt" und "behauptet" ist der Gegenstand dieser
   Anwendung.

   SCHRIFTEN LIEGEN IM REPOSITORY, wie ECharts und HTMX (ADR-0003). Kein
   fremder Host, auch nicht fuer Schriften. Die Version steht im Dateinamen,
   damit ein stillschweigender Austausch im Diff sichtbar wird.

   DICHTE: ruhig statt gedraengt (Nutzerentscheidung 2026-08-30). 15px
   Grundschrift, Zeilenhoehe 1.6, grosszuegige Innenabstaende. Die erste Fassung
   war auf 14px und enge Zeilen gesetzt, weil in diesem Werkzeug gescannt wird -
   die Kandidatenliste hat hunderte Zeilen und das Cockpit siebzehn Abschnitte.
   Der Einwand dagegen wiegt schwerer: was man den ganzen Tag liest, muss man
   ohne Anstrengung lesen koennen. Die Tabellen bleiben dabei die dichteste
   Stelle der Oberflaeche - dort zaehlt der Vergleich untereinander.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCHRIFTEN

   EINE Familie: Plex Sans traegt Fliesstext und Auszeichnung, Plex Mono das
   woertlich Gelesene. Space Grotesk ist am 2026-09-19 entfallen (Begruendung
   am Token `--schrift-display`); die beiden Dateien sind mit geloescht,
   damit kein unbenutztes Gewicht im Repository liegenbleibt.

   Plex Sans ist eine variable Schrift: EINE Datei je Zeichensatz deckt den
   ganzen Gewichtsbereich ab, deshalb die Spanne in `font-weight`. Plex Mono
   liefert je Schnitt eine eigene Datei.
   Nur `latin` und `latin-ext` - Kyrillisch, Griechisch und Vietnamesisch
   waeren 340 KB fuer Zeichen, die in dieser Anwendung nicht vorkommen.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-sans-v23-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-sans-v23-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-v20-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-v20-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-v20-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   TOKENS — HELL (Vorgabe)

   Der Farbsatz wurde am 2026-09-19 gewechselt. Vorher: warmes Graphit als
   Vorgabe, kuehles Zink als Signal. Der Grund fuer den Wechsel steht nicht in
   einer Mode, sondern in der Arbeit, die dazugekommen ist: die Anwendung war
   eine Leitwarte, an der ein Mensch stundenlang Belege prueft. Sie wird eine
   Kundenverwaltung, an der derselbe Mensch mit einem Kunden am Tisch sitzt und
   ihm eine Zahl zeigt. Das passiert in einem hellen Raum, auf einem geteilten
   Bildschirm, und eine dunkle Oberflaeche ist dort die Ausnahme. Der dunkle
   Satz bleibt vollstaendig und gleichwertig - er ist jetzt die Wahl und nicht
   die Vorgabe.

   DIE NEUTRALEN TRAGEN EINEN BLAUSTICH. Ein reines Grau sieht aus wie das,
   was der Browser mitbringt. Der Grund ist um wenige Prozent in Richtung des
   Signalblaus gedreht; das faellt nicht als Farbe auf, sondern als Absicht.

   ZWEI BLAUS MIT ZWEI BEDEUTUNGEN, DIE NICHT DASSELBE SIND: `--signal` fuehrt
   irgendwohin (Verweis, Knopf, aktiver Menuepunkt), `--akzent` sagt "hier bist
   du gerade" (Tastaturfokus, aktives Feld, der Schritt, der dran ist). Der
   Akzent ist deshalb ein Blauviolett: er muss von den vier vergebenen
   Bedeutungen unterscheidbar bleiben - dem Signalblau, dem Gruen
   "vollstaendig", dem Bernstein der Frist und dem Rot "Angaben fehlen".

   JEDE FARBKOMBINATION IST GEMESSEN. Text auf seiner Flaeche erreicht
   mindestens 4,5:1, gedaempfte Nebenangaben mindestens 3:1. Der alte
   Bernsteinton #8a5a00 faellt damit nicht weg, weil er schlecht waere,
   sondern weil er in der warmen Familie stand; #9a4c07 erreicht auf der neuen
   Warnflaeche 5,4:1.
   -------------------------------------------------------------------------- */

:root {
  /* Schrift. EINE Familie in zwei Rollen und keine zweite Sippe: Space
     Grotesk ist am 2026-09-19 entfallen. Ein Auszeichnungsschnitt, der sich
     von der Textschrift unterscheidet, traegt eine Vertriebsseite - hier
     stehen Ueberschriften direkt ueber Tabellen mit sechsstelligen Betraegen,
     und zwei Buchstabenformen nebeneinander machen die Seite unruhig, ohne
     etwas zu sagen. Plex Sans hat den Auszeichnungsrang in Gewicht und
     Laufweite; `--schrift-display` bleibt als ROLLE bestehen, damit die Naht
     da ist, falls je wieder eine zweite Familie einzieht. */
  --schrift-display: 'IBM Plex Sans', system-ui, sans-serif;
  --schrift-text: 'IBM Plex Sans', system-ui, sans-serif;
  --schrift-fest: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Flaechen */
  --grund: #f4f6f8;
  --flaeche: #ffffff;
  --flaeche-2: #f7f9fb;
  --vertiefung: #ebeef1;
  --feld: #ffffff;

  /* Text */
  --schrift-1: #0b1f33;
  --schrift-2: #3c4f63;
  /* #8494a6 bis 2026-10-04: 2,9:1 auf --grund und damit als Text unter AA.
     #5f6e82 haelt 4,5:1 auch auf --vertiefung (Tabellenkoepfe). */
  --schrift-3: #4a5b6d;

  /* Linien */
  --linie: #dce3ea;
  --linie-stark: #b9c7d6;

  /* Signal (Verweise, Handlung) */
  --signal: #0e4a7b;
  --signal-tief: #08304f;
  --signal-flaeche: #e6eef6;
  --auf-signal: #ffffff;

  /* Akzent ("hier bist du gerade") */
  --akzent: #6742cf;
  --akzent-flaeche: #efecfa;
  --fokus: rgba(103, 66, 207, 0.65);

  /* Dringlichkeit — immer zusammen mit einem Wort */
  --ok: #17643f;
  --ok-flaeche: #e5f2ec;
  --warn: #9a3e05;
  --warn-flaeche: #fef0e1;
  --gefahr: #b42318;
  --gefahr-flaeche: #fdecea;

  /* DIE SEITENLEISTE (2026-10-18). Tiefes Marineblau in beiden Modi: sie ist
     der feste Rahmen, an dem man sich orientiert, und der Inhalt daneben
     wechselt. Ihre Texte stehen deshalb auf eigenen Tokens. */
  --leiste: #0b1f33;
  --leiste-schrift: #ffffff;
  --leiste-schrift-2: #c9d4e0;
  --leiste-schrift-3: #8fa3b8;
  --leiste-linie: #22384f;
  --leiste-flaeche: rgba(255, 255, 255, 0.1);

  /* DIE HERVORHEBUNG: die eine Zahl, auf die es ankommt - die Jahresspitze im
     Lastgang, die Marktreferenz neben den Angeboten. Orange und damit weder
     Signal noch Dringlichkeit; sie steht immer zusammen mit dem Wert. */
  --hervorhebung: #e07b39;
  --hervorhebung-schrift: #9a3e05;
  --hervorhebung-flaeche: #fff8f2;

  /* DIE LUECKE. Ein eigener Ton, und ausdruecklich KEINE Dringlichkeitsfarbe:
     eine nicht erhobene Angabe ist kein Fehler und kein Verzug, sondern ein
     offener Punkt. Rot hiesse "hier ist etwas kaputt", und das waere die
     falsche Auskunft ueber einen Wert, nach dem schlicht noch niemand gefragt
     hat. Das Wort und die gestrichelte Umrandung tragen die Aussage; die
     Farbe haelt sich heraus. (Die Achse WISSENSSTAND -> Textur + Wort.) */
  --luecke: #7c8da3;
  --luecke-flaeche: #eff3f7;

  /* Diagrammreihen (ADR-0003). Sie stehen hier und nicht in charts.js, damit
     der Hell/Dunkel-Wechsel sie mitnimmt - charts.js liest sie aus dem
     berechneten Stil. Die Reihenfolge ist die Vergabereihenfolge; die ersten
     beiden muessen sich am staerksten unterscheiden, weil die haeufigste
     Darstellung des Projekts genau zwei Reihen zeigt (Settlement gegen Proxy). */
  --diagramm-1: var(--signal);
  --diagramm-2: #e07b39;
  --diagramm-3: #0c7a44;
  --diagramm-4: #b52f0c;
  --diagramm-5: #a23b86;
  --diagramm-6: #0f7b7b;

  /* Die Flaechenskala der Lastgang-Heatmap. EINE Farbe, von hell nach dunkel:
     die Last geht von wenig nach viel und nirgends ueber eine Mitte hinweg. Die
     ECharts-Voreinstellung ist blau-gelb-rot - eine DIVERGIERENDE Skala, die
     eine Mitte behauptet, die es hier nicht gibt, und die zwei Zellen mit
     aehnlicher Last in zwei voellig verschiedene Farben setzt. */
  --verlauf-1: #eef4fa;
  --verlauf-2: #c5dcf1;
  --verlauf-3: #8dbce6;
  --verlauf-4: #3f8ed4;
  --verlauf-5: #12558f;

  /* Form. 6px statt 3px und 10px statt 5px: die Kanten waren auf einen
     Messgeraetecharakter gesetzt. Eine Oberflaeche, die einem Kunden gezeigt
     wird, darf runder sein, ohne weich zu werden - darueber hinaus faengt die
     Kachel an, nach Werbung auszusehen. */
  --rund: 6px;
  --rund-gross: 10px;
  --schatten: 0 1px 2px rgba(13, 23, 38, 0.05);
  --schatten-hoch: 0 1px 2px rgba(13, 23, 38, 0.05), 0 8px 24px -12px rgba(13, 23, 38, 0.18);

  /* Bestandsnamen aus der alten Datei — die Vorlagen kennen sie. */
  --ink: var(--schrift-1);
  --muted: var(--schrift-2);
  --line: var(--linie);
  --bg: var(--flaeche);
  --bg-soft: var(--flaeche-2);
  --warn-bg: var(--warn-flaeche);
  --link: var(--signal);
}

/* --------------------------------------------------------------------------
   TOKENS — DUNKEL

   Dieselben Rollen, andere Werte. Nicht das Graphit von frueher, sondern die
   dunkle Seite derselben Familie: der Grund ist der Blauton des hellen Satzes
   bis fast auf Schwarz heruntergezogen. Der Satz ist nicht mehr die Vorgabe,
   aber er ist nicht weniger fertig - wer nachts Preisblaetter prueft, bekommt
   dieselbe Oberflaeche und nicht eine Notfassung.
   -------------------------------------------------------------------------- */

html[data-modus="dunkel"] {
  --grund: #070c16;
  --flaeche: #0f1a2c;
  --flaeche-2: #152438;
  --vertiefung: #050a12;
  --feld: #050a12;

  --schrift-1: #e8eef6;
  --schrift-2: #93a3b8;
  --schrift-3: #7d8fa5;

  --linie: #1d2b41;
  --linie-stark: #2b3d57;

  --signal: #3b92e8;
  --signal-tief: #69aef2;
  --signal-flaeche: #122744;
  --auf-signal: #06101c;

  --akzent: #a78bfa;
  --akzent-flaeche: rgba(167, 139, 250, 0.14);
  --fokus: rgba(167, 139, 250, 0.7);

  --ok: #34c27e;
  --ok-flaeche: rgba(52, 194, 126, 0.13);
  --warn: #e0a93c;
  --warn-flaeche: rgba(224, 169, 60, 0.13);
  --gefahr: #f06a4d;
  --gefahr-flaeche: rgba(240, 106, 77, 0.13);

  --leiste: #050a12;
  --leiste-linie: #1d2b41;
  --hervorhebung: #f0954f;
  --hervorhebung-schrift: #f5b88a;
  --hervorhebung-flaeche: rgba(240, 149, 79, 0.12);

  --luecke: #8fa0b5;
  --luecke-flaeche: #16233a;

  --diagramm-2: #e0a93c;
  --diagramm-3: #34c27e;
  --diagramm-4: #f06a4d;
  --diagramm-5: #d68fc4;
  --diagramm-6: #56c2c2;

  --verlauf-1: #0d1c2b;
  --verlauf-2: #1a3d5c;
  --verlauf-3: #2f6a9b;
  --verlauf-4: #5b9dd4;
  --verlauf-5: #b9d6f4;

  --schatten: 0 1px 2px rgba(0, 0, 0, 0.45);
  --schatten-hoch: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(0, 0, 0, 0.75);
}

/* --------------------------------------------------------------------------
   AKZENTFARBEN (2026-10-18)

   Vier Akzentfarben: Petrol, Blau, Indigo, Schiefer. Gewaehlt im Profil
   (Mein Zugang), gemerkt im Cookie,
   vom Server als `data-akzent` an das `<html>` geschrieben (templating.py).

   Ein Akzent setzt NUR die Handlungsfarbe (`--signal*`), die Leiste und das
   Logo. Dringlichkeit, Wissensstand und Hervorhebung bleiben gleich: sie sind
   Bedeutungen und keine Gestaltung, und eine Frist darf nicht anders aussehen,
   weil jemand eine andere Farbe mag.

   DAS LOGO IST FEST (src/stromai/assets/kivolt-logo_v1.png, Petrol) und
   wechselt mit dem Akzent nicht: es ist exakt aus dem Blatt geschnitten
   (static/marke/, Skript scripts/marke_schneiden.py), einmal fuer hellen und
   einmal fuer dunklen Grund, immer mit Unterzeile - ohne sie stuende das
   Signet gegen einen zu kleinen Schriftzug. Die Leiste ist in beiden Modi
   dunkel und traegt das dunkle; die Anmeldeseite traegt das des Modus. Petrol
   ist deshalb die Vorgabe, und seine Leiste hat exakt den Grund, auf dem das
   dunkle Logo entworfen ist (#063d47).

   Jede Kombination ist gemessen: `--signal` auf Weiss mindestens 4,5:1, im
   dunklen Satz auf `--flaeche` ebenso. Die Handlungsfarben von Blau stehen in
   den Grundsaetzen oben.
   -------------------------------------------------------------------------- */

html[data-akzent="petrol"] {
  --leiste: #063d47;
  --leiste-linie: #145360;
  --marke: #13a893;
}

html[data-akzent="blau"] {
  --leiste: #07213a;
  --leiste-linie: #17344f;
  --marke: #2a72e8;
}

html[data-akzent="indigo"] {
  --leiste: #18193e;
  --leiste-linie: #2a2b5a;
  --marke: #5551ea;
}

html[data-akzent="schiefer"] {
  --leiste: #202f3d;
  --leiste-linie: #334454;
  --marke: #6488b8;
}

html[data-modus="hell"][data-akzent="petrol"] {
  --signal: #0b6b63;
  --signal-tief: #074a45;
  --signal-flaeche: #e2f2ef;
}

html[data-modus="hell"][data-akzent="indigo"] {
  --signal: #3d3aa8;
  --signal-tief: #2a277c;
  --signal-flaeche: #ecebfa;
}

html[data-modus="hell"][data-akzent="schiefer"] {
  --signal: #3e5266;
  --signal-tief: #2a3847;
  --signal-flaeche: #eceff3;
}

html[data-modus="dunkel"][data-akzent="petrol"] {
  --signal: #3cc4ad;
  --signal-tief: #7fdcc9;
  --signal-flaeche: #0e2e2c;
}

html[data-modus="dunkel"][data-akzent="indigo"] {
  --signal: #8f90f7;
  --signal-tief: #b9baff;
  --signal-flaeche: #1c1b45;
}

html[data-modus="dunkel"][data-akzent="schiefer"] {
  --signal: #8fb0d8;
  --signal-tief: #b8cfeb;
  --signal-flaeche: #1b2633;
}

/* Das Logo. Das Seitenverhaeltnis ist das der geschnittenen Dateien. */
.logo { display: block; width: 100%; aspect-ratio: 537 / 112; background: no-repeat left center / contain; }
.logo--leiste, html[data-modus="dunkel"] .logo--gross { background-image: url("marke/kivolt-dunkel.png"); }
.logo--gross { background-image: url("marke/kivolt-hell.png"); }

/* --------------------------------------------------------------------------
   GRUNDLAGEN
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  color-scheme: light;
}

html[data-modus="dunkel"] { color-scheme: dark; }

body {
  margin: 0;
  color: var(--schrift-1);
  background: var(--grund);
  font: 400 0.9375rem/1.6 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
}

/* Zahlen stehen in Kolonnen untereinander und muessen vergleichbar sein.
   Tabellenziffern sind hier kein Feinschliff, sondern die Voraussetzung
   dafuer, dass eine laengere Zahl auch laenger aussieht. */
table, .zahl, [data-betrag], [data-kennzahl] { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--schrift-1);
}

h1 { font-size: 1.875rem; margin: 0 0 1.25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.5rem; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--signal-tief); }

p { margin: 0 0 1rem; }

code, kbd, samp, pre { font-family: var(--schrift-fest); font-size: 0.9em; }

hr { border: 0; border-top: 1px solid var(--linie); margin: 1.5rem 0; }

::selection { background: var(--signal); color: var(--auf-signal); }

/* Sichtbarer Tastaturfokus. Er gilt fuer alles Bedienbare und wird nirgends
   entfernt - ohne ihn ist die Anwendung mit der Tastatur nicht bedienbar. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--rund);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   RAHMEN UND SEITENLEISTE (seit 2026-10-18)

   Bis dahin eine Leiste oben mit vier Eintraegen und einem Fach. Sie trug den
   Arbeitsweg, aber keine Handlung: "Neuer Vorgang", "Schnellstart" und der
   Weg zur Ausschreibung lagen im Fach "Verwaltung" - die drei Dinge, mit
   denen jede Arbeit anfaengt, hinter einem Klick, den man kennen musste.

   Jetzt steht links eine feste Leiste in Marineblau: oben die drei
   Schnellaktionen als Knoepfe, darunter der Arbeitsweg, darunter das Fach,
   unten Marktstand, Modus und Konto. Sie ist der Rahmen, an dem man sich
   orientiert; der Inhalt daneben wechselt.

   Auf schmalen Bildschirmen (unter 64rem) wird sie zur Kopfzeile, die
   umbricht - eine Leiste von 16rem neben 22rem Inhalt waere keine Navigation,
   sondern ein Hindernis.
   -------------------------------------------------------------------------- */

.rahmen {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.rahmen__haupt { min-width: 0; }

/* Ohne Leiste (Anmeldeseiten) bleibt eine Spalte. */
.rahmen:not(:has(> .nav)) { grid-template-columns: minmax(0, 1fr); }

.nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1rem;
  background: var(--leiste);
  color: var(--leiste-schrift);
}

.nav__brand {
  display: block;
  width: 100%;
  max-width: 15rem;
  padding: 0.25rem 0 0;
}

/* DIE SCHNELLAKTIONEN. Der erste Knopf ist weiss und damit der hellste Punkt
   der Leiste: "Neuer Vorgang" ist der Anfang jeder Arbeit. Die beiden
   anderen stehen als Umriss daneben - gleich gross, aber nachrangig. */
.nav__aktionen { display: flex; flex-direction: column; gap: 0.5rem; }

.nav__aktion {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid #3a5068;
  border-radius: 8px;
  background: var(--leiste-flaeche);
  color: var(--leiste-schrift);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.nav__aktion:hover { color: var(--leiste-schrift); background: rgba(255, 255, 255, 0.18); }
.nav__aktion svg { flex: none; width: 1.125rem; height: 1.125rem; }

.nav__aktion--haupt {
  min-height: 3rem;
  border-color: #ffffff;
  background: #ffffff;
  color: #0b1f33;
  font-weight: 700;
}

.nav__aktion--haupt:hover { color: #0b1f33; background: #e6eef6; }

.nav__aktion[aria-current="page"] { box-shadow: inset 3px 0 0 #f0954f; }

/* DER ARBEITSWEG: untereinander, eine Zeile je Eintrag. */
.nav__weg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1rem;
  border-top: 1px solid var(--leiste-linie);
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--rund);
  text-decoration: none;
  color: var(--leiste-schrift-2);
}

.nav__link:hover { color: var(--leiste-schrift); background: var(--leiste-flaeche); }

.nav__link[aria-current="page"] {
  color: var(--leiste-schrift);
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
}

/* DAS FACH klappt in der Leiste nach unten auf und schwebt nicht mehr: in
   einer Spalte ist Platz, und ein Blatt ueber dem Inhalt verdeckte genau das,
   was man gerade ansah. */
.nav__fach { display: block; }

.nav__link--fach {
  cursor: pointer;
  list-style: none;
}

.nav__link--fach::-webkit-details-marker { display: none; }

.nav__link--fach::after {
  content: "";
  margin-left: auto;
  width: 0.35rem;
  height: 0.35rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nav__fach[open] > .nav__link--fach::after { transform: rotate(-135deg); margin-top: 0.15rem; }

/* Liegt die aufgerufene Seite im Fach, traegt der Griff die Marke - sonst
   faende man im zugeklappten Zustand nicht wieder, wo man ist. */
.nav__link--fach[data-offen="ja"] { color: var(--leiste-schrift); font-weight: 600; }

.nav__fachinhalt {
  display: flex;
  flex-direction: column;
  padding: 0.15rem 0 0.35rem 0.5rem;
}

.nav__eintrag {
  padding: 0.4rem 0.75rem;
  border-radius: var(--rund);
  text-decoration: none;
  color: var(--leiste-schrift-2);
  font-size: 0.875rem;
}

.nav__eintrag:hover { color: var(--leiste-schrift); background: var(--leiste-flaeche); }

.nav__eintrag[aria-current="page"] {
  color: var(--leiste-schrift);
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
}

.nav__gruppe {
  color: var(--leiste-schrift-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav__fachinhalt > .nav__gruppe { padding: 0.6rem 0.75rem 0.2rem; }

/* DIE ZAHL AM MENUEPUNKT. Wie viele Faelle dort warten. Sie steht nur, wenn
   sie groesser als null ist: eine Null daneben ist keine Auskunft. */
.nav__zahl {
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--gefahr);
  color: #fff;
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.55;
}

/* DER FUSS: Marktstand, Modus, Konto. Der Marktstand steht in der Leiste,
   weil er die einzige Zahl der Anwendung ist, die sich von selbst aendert. */
.nav__fuss {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--leiste-linie);
}

.nav__stand {
  display: block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--rund);
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--leiste-schrift-2);
}

.nav__stand:hover { color: var(--leiste-schrift); background: var(--leiste-flaeche); }
.nav__stand[data-alt="ja"] { color: #f5b88a; }

.nav__modus {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--leiste-linie);
  border-radius: var(--rund);
  background: transparent;
  color: var(--leiste-schrift-2);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.nav__modus:hover { color: var(--leiste-schrift); border-color: #3a5068; }
.nav__modus svg { display: block; }

/* Nur eines der beiden Sinnbilder ist sichtbar - das des Zustands, in den
   der Schalter fuehrt. */
.nav__modus .modus--zu-hell { display: none; }
html[data-modus="hell"] .nav__modus .modus--zu-hell { display: block; }
html[data-modus="hell"] .nav__modus .modus--zu-dunkel { display: none; }

.nav__kuerzel {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--marke);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.nav__fachinhalt form { margin: 0; }

.nav__abmelden {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: #f5a5a0;
  cursor: pointer;
}

.nav__abmelden:hover { background: rgba(240, 106, 77, 0.16); color: #ffc9c2; }

@media (max-width: 64rem) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .nav {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
  }
  .nav__aktionen, .nav__weg, .nav__fuss { flex-direction: row; flex-wrap: wrap; }
  .nav__weg, .nav__fuss { margin: 0; padding: 0; border: 0; }
  .nav__fachinhalt { padding-left: 0; }
}

.container {
  max-width: 86rem;
  margin: 0 auto;
  padding: 2rem 1.75rem 5rem;
}

/* --------------------------------------------------------------------------
   WISSENSSTAND — die Signatur dieser Oberflaeche

   Vier Zustaende, die nie ineinander laufen duerfen. Sie haengen an der
   Schiene und am Wort, NICHT an einer Farbe.

   Das Attribut heisst `data-wissen` und NICHT `data-stand`: `data-stand` traegt
   in dieser Anwendung bereits acht andere Bedeutungen - den Angebotsstand, den
   Bilanzposten der Uebersicht, die drei Stufen der Vollstaendigkeit. Ein
   gemeinsamer Name haette all diese Elemente stillschweigend mit einer Schiene
   versehen.

   Die Zuordnung: `bestaetigt` ist eine
   durchgezogene Linie, `vorgeschlagen` eine gestrichelte, `unbekannt` gar
   keine, `nachweislich keine` eine doppelte. Das ueberlebt jeden Farbsatz
   und jede Farbfehlsichtigkeit.
   -------------------------------------------------------------------------- */

[data-wissen] { padding-left: 0.5rem; border-left: 2px solid transparent; }
[data-wissen="bestaetigt"] { border-left-color: var(--schrift-2); }
[data-wissen="vorschlag"] { border-left-style: dashed; border-left-color: var(--schrift-3); }
[data-wissen="unbekannt"] { border-left-color: transparent; }
[data-wissen="keine"] { border-left-style: double; border-left-width: 3px; border-left-color: var(--schrift-3); }

/* Ein unbekannter Wert wird als unbekannt gezeigt, nicht als leere Zelle:
   "nicht erhoben" ist ein eigener Zustand (03-01), kein fehlender Text. */
/* Nicht mehr kursiv (2026-10-04): `.muted` traegt ganze Hilfeabsaetze, und
   lange kursive Absaetze lesen sich schlecht. Die Luecke hat ihre eigene
   Marke (`.fehlt`) und braucht die Kursive nicht. */
.muted { color: var(--schrift-2); }

/* DIE LUECKE (2026-09-19). Eine nicht erhobene Angabe steht an genau der
   Stelle, an der spaeter ihr Wert steht, nennt sich beim Namen und traegt
   eine gestrichelte Umrandung.

   Gestrichelt und nicht farbig: das ist die Achse WISSENSSTAND, und die
   haengt in dieser Datei an Textur und Wort, nie an einer Farbe. Rot hiesse
   "hier ist etwas kaputt" - eine Angabe, nach der noch niemand gefragt hat,
   ist aber nicht kaputt. Vergeben wird die Marke in `_macros.angabe()`, also
   an einer Stelle fuer die ganze Anwendung. */
.fehlt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.05rem 0.45rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rund);
  color: var(--luecke);
  font-size: 0.8125rem;
  font-style: normal;
  white-space: nowrap;
}

/* Das Fragezeichen ist `::before` und kein Zeichen im Text: eine Vorlesehilfe
   liest sonst "Fragezeichen unbekannt". */
.fehlt::before {
  content: "?";
  font-family: var(--schrift-fest);
  font-size: 0.75rem;
  opacity: 0.7;
}

/* DER HOVERTEXT. `data-tipp` erklaert eine Zahl oder ein Bild in einem Satz,
   beim Zeigen mit der Maus und beim Fokus mit der Tastatur. Er ergaenzt nur:
   was man wissen MUSS, steht im Text daneben. Begriffe mit Tipp tragen eine
   gepunktete Unterstreichung, Balken und Marken zeigen ihn ohne. */
[data-tipp] { position: relative; cursor: help; }
.mehr {
  display: inline-grid; place-items: center;
  width: 1.25rem; height: 1.25rem; min-height: 0; padding: 0;
  border-radius: 50%; font-size: 0.75rem; line-height: 1; vertical-align: 0.1em;
}
.mehr::before { content: "?"; }
.begriff[data-tipp] { text-decoration: underline dotted var(--schrift-3); text-underline-offset: 3px; }
[data-tipp]:hover::after,
[data-tipp]:focus-visible::after {
  content: attr(data-tipp);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: 18rem;
  padding: 0.375rem 0.5rem;
  transform: translateX(-50%);
  border-radius: var(--rund);
  background: var(--schrift-1);
  box-shadow: var(--schatten-hoch);
  color: var(--flaeche);
  font: 400 0.75rem/1.45 var(--schrift-text);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  pointer-events: none;
}
/* Im Tabellenkopf haengt der Text darunter: ueber dem Kopf schneidet ihn ein
   Behaelter mit Rollbalken ab. */
th [data-tipp]::after { bottom: auto; top: calc(100% + 6px); }

/* Mit Skript zeigt `bedienung.js` den Text als festes Element ueber allem
   (2026-11-02) - kein Behaelter schneidet ihn mehr ab. Gleiche Gestalt wie
   der Rueckfall darueber. */
.tipp-js [data-tipp]:hover::after,
.tipp-js [data-tipp]:focus-visible::after { content: none; }
.tipp {
  position: fixed;
  z-index: 1000;
  max-width: 18rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--rund);
  background: var(--schrift-1);
  box-shadow: var(--schatten-hoch);
  color: var(--flaeche);
  font: 400 0.75rem/1.45 var(--schrift-text);
  pointer-events: none;
}
.tipp[hidden] { display: none; }

/* Der bestaetigte Wert fuehrt, der unbestaetigte Vorschlag steht daneben und
   sieht anders aus: die beiden zu verwechseln hiesse, eine Behauptung eines
   Modells fuer eine geprueffte Angabe zu halten (15-08). Die Unterscheidung
   haengt an Schiene, Schriftschnitt UND Wort - drei Traeger, damit keiner
   von ihnen sie allein tragen muss. */
.feld__wert {
  font-weight: 600;
  padding-left: 0.5rem;
  border-left: 2px solid var(--schrift-2);
}

.feld__vorschlag {
  font-style: italic;
  color: var(--schrift-2);
  padding-left: 0.5rem;
  border-left: 2px dashed var(--schrift-3);
}

/* DER BELEG AM FELD (13-04, 15-06). Das Zitat steht im Klartext neben dem
   Feld und nicht in einem Tooltip: eine Auskunft, die man mit der Maus
   suchen muss, ist im Ausdruck weg und mit der Tastatur schwer erreichbar.

   Monospace, weil es woertlich gelesener Maschinentext ist - dieselbe Regel
   wie bei Pruefsummen und Partitionsversionen. Kleiner als das Feld und doch
   nicht `.muted`: das Zitat ist eine Tatsache aus der Quelle und keine
   Ersatzauskunft. */
.beleg {
  display: block;
  margin-top: 0.25rem;
  padding: 0.45rem 0.6rem 0.45rem 0.7rem;
  border-left: 2px solid var(--linie-stark);
  background: var(--vertiefung);
  font-family: var(--schrift-fest);
  font-size: 0.8125rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.beleg__seite { color: var(--schrift-3); }

/* Die Grundlage einer leeren Zelle steht unter dem Strich und nicht statt
   seiner: der Strich sagt "keine Zahl", die Grundlage sagt, warum. */
.grundlage {
  display: block;
  color: var(--schrift-2);
  font-size: 0.8125rem;
  white-space: normal;
  max-width: 18rem;
}

/* --------------------------------------------------------------------------
   DRINGLICHKEIT — Farbe, immer mit Wort
   -------------------------------------------------------------------------- */

.warn {
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--rund) var(--rund) 0;
  background: var(--warn-flaeche);
  color: var(--warn);
}

/* Ein gelungener Vorgang sieht anders aus als ein gescheiterter, bevor man
   den Satz liest. `.warn` ist die Gegenseite. */
.hinweis {
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--ok);
  border-radius: 0 var(--rund) var(--rund) 0;
  background: var(--ok-flaeche);
}

/* Die Markierungen der Uebersichtszeile stehen untereinander, damit
   "nicht versandfaehig" und "Termin verstrichen" zwei Aussagen bleiben und
   nicht zu einer Zeile verschmelzen. */
.marker { display: block; }
.marker + .marker { margin-top: 0.25rem; }

/* In einer Tabellenzelle ist eine Marke keine Meldung: `.warn` bringt dort
   Innenabstand und Flaeche mit und macht aus zwei Woertern einen Block, der
   die Zeilenhoehe bestimmt. Das Wort bleibt, der Kasten schrumpft. */
td .marker.warn,
td .marker.muted {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 0;
  border-radius: var(--rund);
  font-size: 0.8125rem;
  font-style: normal;
}

/* Ohne Flaeche traegt die gedaempfte Marke in der Zelle nichts - sie bekommt
   die ruhige Flaeche und bleibt damit als Marke erkennbar. */
td .marker.muted { background: var(--flaeche-2); color: var(--schrift-2); }

/* DIE PUNKTE.

   Ein farbiger Punkt als Aufzaehlungszeichen - rot fuer offen, gruen fuer
   erledigt, gedaempft fuer wartend. Er ersetzt NICHT das Wort: jede Zeile
   traegt ihren Satz weiter, und der Punkt ist die schnellere, nicht die
   einzige Auskunft. Ein Punkt allein waere genau die Farbabhaengigkeit, die
   der Kopf dieser Datei ausschliesst.

   Die Mangelliste ist der haeufigste Fall und traegt den roten Punkt ohne
   weiteres Zutun: was darin steht, ist per Definition offen. */
.mangel,
.punkte {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
}

.mangel > li,
.punkte > li {
  position: relative;
  padding-left: 1.35rem;
  margin: 0 0 0.4rem;
}

.mangel > li::before,
.punkte > li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.52em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gefahr);
}

/* Dieselbe Liste traegt im Vorgang zweierlei: Hindernisse, die den Schritt
   aufhalten, und Hinweise, die es ausdruecklich nicht tun ("Zur Kenntnis -
   haelt den Schritt nicht auf"). Ein roter Punkt an einem Hinweis machte aus
   der Standardlastprofil-Anmerkung einen Mangel, und genau das ist sie nicht
   (LAST-06). */
.mangel > li.hinweis::before { background: var(--schrift-3); }
/* Offen fuer einen spaeteren Schritt, hier zu bearbeiten (Vorgang, Schritt 1):
   kein Mangel dieses Schritts, aber auch keine blosse Kenntnisnahme. */
.mangel > li.versand::before { background: var(--warn); }
/* Der Knopf zur Behebung steht unter seinem Satz (Vorgang, 2026-11-02). */
.mangel > li > .knopf { display: flex; width: fit-content; margin-top: 0.35rem; }

.punkte > li[data-punkt="fertig"]::before { background: var(--ok); }
.punkte > li[data-punkt="wartet"]::before { background: var(--schrift-3); }
.punkte > li[data-punkt="dran"]::before { background: var(--akzent); }
.punkte > li[data-punkt="frist"]::before { background: var(--warn); }

.links { padding-left: 1.2rem; }

/* Der Punkt als eigenstaendige Marke - im `summary` eines Abschnitts, in einer
   Tabellenzelle, neben einer Ueberschrift. Er ist `aria-hidden`, weil das Wort
   daneben dieselbe Auskunft traegt; zweimal vorgelesen waere es Laerm. */
.punkt {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--schrift-3);
  flex: none;
}

.punkt--offen { background: var(--gefahr); }
.punkt--fertig { background: var(--ok); }
.punkt--dran { background: var(--akzent); }

/* Der Ablehnungsbericht einer Lieferung: mehrzeilig, unveraendert, ungekuerzt.
   `pre-wrap` statt `pre`, damit eine lange Zeile umbricht statt die Tabelle
   aufzuziehen - gekuerzt wird nichts. */
.bericht {
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--warn);
  background: var(--warn-flaeche);
  font-family: var(--schrift-fest);
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Ein negativer Ersparnisbetrag - das Angebot ist teurer als der Bestand. Er
   steht als solcher da und wird nie zu einer Null; die Auszeichnung hebt ihn
   hervor, die Aussage traegt das Vorzeichen selbst. */
[data-betrag="negativ"] { color: var(--gefahr); font-weight: 600; }

/* Die Bindefrist. Keine Farbe als alleiniger Traeger einer Aussage: in der
   Zelle steht der Satz ("laeuft in 3 Stunden ab", "abgelaufen seit 2
   Stunden", "keine Bindefrist erfasst"), die Auszeichnung hebt ihn nur
   hervor. */
/* DIE FRIST. Farbe UND Wort - das ist die Achse DRINGLICHKEIT. Seit
   2026-09-19 als Plakette mit Punkt: in einer Liste mit dreissig Zeilen
   findet das Auge die eine abgelaufene Frist an der Form, bevor es die
   Spalte gelesen hat. Der Punkt ist `::before` und traegt keine eigene
   Aussage; das Wort in der Zelle traegt sie. */

.frist--abgelaufen,
.frist--knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.frist--abgelaufen::before,
.frist--knapp::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.frist--abgelaufen { color: var(--gefahr); background: var(--gefahr-flaeche); font-weight: 600; }
.frist--knapp { color: var(--warn); background: var(--warn-flaeche); }
.frist--nicht_erfasst { color: var(--schrift-2); font-style: italic; }

/* --------------------------------------------------------------------------
   BEDIENELEMENTE

   Bis hierher waren Knoepfe unformatiert und sahen aus wie das, was der
   Browser mitbringt. Seit 2026-10-04 gibt es EIN System: `.knopf` mit `--haupt`, `--gross`,
   `--klein`, `--breit` und `--gefahr` (Abschnitt KNOEPFE weiter unten).
   -------------------------------------------------------------------------- */

button {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  background: var(--flaeche-2);
  color: var(--schrift-1);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
}

/* `:where` haelt die Spezifitaet bei 0,1,0. Vorher schlug
   `button:hover:not(:disabled)` (0,2,1) jedes `.knopf--haupt:hover` - ein
   Hauptknopf wurde beim Ueberfahren hell statt dunkler. */
:where(button:not(:disabled)):hover { background: var(--flaeche); border-color: var(--signal); }
button:disabled { color: var(--schrift-3); cursor: not-allowed; opacity: 0.65; }

input, select, textarea {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  background: var(--feld);
  color: var(--schrift-1);
  font: inherit;
  font-size: 0.9375rem;
}

/* Das Feld, in dem der Cursor steht. Rahmen UND Flaeche, damit es auch dann
   auffaellt, wenn mehrere Felder nebeneinanderstehen. */
input:focus, select:focus, textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-flaeche);
  outline: none;
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--vertiefung);
  color: var(--schrift-3);
  cursor: not-allowed;
}

input[type="file"] { border: 0; padding-left: 0; background: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--signal); }

label { color: var(--schrift-1); }

/* Die Sortierkoepfe sind Schaltflaechen und sehen wie Ueberschriften aus:
   eine Schaltflaechen-Optik in jeder vierten Spaltenueberschrift zoege den
   Blick auf die Bedienung statt auf die Zahlen. */
.sortierung {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
}

.sortierung:hover { color: var(--schrift-1); background: none; text-decoration: underline; }
.sortierung[aria-pressed="true"] { color: var(--schrift-1); font-weight: 600; }
.sortierung__marke { font-weight: 400; color: var(--signal); }

/* Die Umschaltleiste der Lieferstellen (12-05). Die gewaehlte traegt
   aria-pressed - die Auszeichnung hebt sie hervor, sie traegt die Aussage
   nicht allein. */
.lieferstellen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.lieferstellen__wahl { font-size: 0.8125rem; }

.lieferstellen__wahl[aria-pressed="true"] {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--auf-signal);
  font-weight: 600;
}

/* Die Jahreswahl ist Werkzeug und nicht Inhalt: eine Zeile, rechtsbuendig,
   mit der Haarlinie der Abschnittsmarke darunter. */
.filter {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0;
  padding-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   LOESCHEN

   Der einzige Knopf der Oberflaeche, der etwas unwiederbringlich entfernt. Er
   sieht deshalb anders aus als jeder andere - rot umrandet, nicht rot gefuellt:
   eine gefuellte rote Flaeche im Seitenkopf zoege den Blick staendig auf die
   gefaehrlichste Handlung der Seite. Gefuellt ist erst der Knopf IM Dialog,
   der es dann wirklich tut.
   -------------------------------------------------------------------------- */

.loeschen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-color: var(--gefahr);
  background: transparent;
  color: var(--gefahr);
}

.loeschen:hover:not(:disabled) {
  background: var(--gefahr-flaeche);
  border-color: var(--gefahr);
}

.loeschen svg { display: block; }

/* Der Knopf, der es tut. Gefuellt, und er sagt "endgueltig". */
.loeschen--bestaetigt {
  background: var(--gefahr);
  border-color: var(--gefahr);
  color: var(--grund);
  font-weight: 600;
}

.loeschen--bestaetigt:hover:not(:disabled) {
  background: var(--gefahr);
  filter: brightness(1.1);
}

/* Die Breite haelt 1rem Rand je Seite: `max-width` allein ersetzte die
   Grenze des Browsers, und auf 390px lief der Dialog rechts aus dem Bild. Eine
   lange Liste offener Punkte rollt im Dialog statt ueber den Bildschirm hinaus. */
.dialog {
  box-sizing: border-box;
  max-width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  color: var(--schrift-1);
  box-shadow: var(--schatten-hoch);
}

.dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialog h2 { margin: 0 0 0.75rem; font-size: 1.125rem; }

.dialog__marke,
.feldgruppe > legend {
  margin: 1.25rem 0 0.4rem;
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--schrift-3);
}

.dialog .punkte { font-size: 0.875rem; }

.dialog__wahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.dialog__wahl form { margin: 0; }

/* Der Seitenkopf: Titel links, der Loeschknopf rechts. */
.seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.seitenkopf h1 { margin-bottom: 0.5rem; }

/* Der Weg zurueck steht UEBER dem Kopf und nicht darin: im Aktenkopf waere er
   eine dritte Handlung neben zwei echten. */
.zurueck { margin: 0 0 0.75rem; font-size: 0.8125rem; }
/* Der Schritt, der dran ist, oben im Cockpit: Satz links, ein Knopf rechts. */
.jetzt-dran { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0 0 1rem; }
.jetzt-dran p { margin: 0; }

/* --------------------------------------------------------------------------
   TABELLEN

   Der Kopf steht in der Vertiefung und klebt beim Scrollen: bei hunderten
   Kandidatenzeilen ist eine Spaltenueberschrift, die oben verschwindet, eine
   Tabelle ohne Beschriftung.
   -------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

thead th {
  position: sticky;
  /* Die Hoehe der Leiste misst bedienung.js - bricht sie um, rutscht der
     Tabellenkopf sonst darunter. */
  top: 0;
  z-index: 10;
  background: var(--vertiefung);
  border-bottom: 1px solid var(--linie-stark);
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--schrift-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* SORTIERBARE SPALTENKOEPFE (sortierung.js).

   Der Pfeil steht nur an der Spalte, nach der gerade sortiert ist. Ein
   blasser Pfeil an jeder Spalte waere ein Muster aus Zeichen, durch das man
   die Ueberschriften nicht mehr liest - und die Ueberschrift ist die
   Auskunft, die Sortierbarkeit nur eine Moeglichkeit. Sie zeigt sich beim
   Ueberfahren und beim Tastaturfokus. */
th.sortkopf {
  cursor: pointer;
  user-select: none;
}

th.sortkopf:hover { color: var(--schrift-1); }
th.sortkopf[aria-sort="ascending"],
th.sortkopf[aria-sort="descending"] { color: var(--akzent); }

th.sortkopf::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  color: var(--akzent);
}

th.sortkopf:hover::after { content: "\2195"; color: var(--schrift-3); }
th.sortkopf[aria-sort="ascending"]::after { content: "\2191"; color: var(--akzent); }
th.sortkopf[aria-sort="descending"]::after { content: "\2193"; color: var(--akzent); }

tbody tr:hover { background: var(--flaeche-2); }
tbody tr:last-child td { border-bottom: 0; }

/* Der Preisspiegel: eine dichte Tabelle, breiter als der Container. Sie
   scrollt in ihrem eigenen Kasten, statt die Seite waagerecht aufzuziehen.
   Gekuerzt wird nichts: eine weggelassene Spalte waere eine Auskunft, die
   niemand vermisst, weil er sie nicht sieht. */
.spiegel {
  overflow-x: auto;
  margin: 0 0 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
}

.spiegel table { min-width: 100%; width: max-content; }
.spiegel td, .spiegel th { white-space: nowrap; }
.spiegel thead th { position: static; }

/* --------------------------------------------------------------------------
   ABSCHNITTE UND MARKEN
   -------------------------------------------------------------------------- */

/* Die Abschnittsmarke. Sie benennt einen ZUSTAND ("Stand 2026", "Zu
   pruefen") und nicht ein Bauteil - die Linie dahinter traegt das Auge zur
   naechsten Marke, ohne einen Rahmen zu ziehen, den es nicht gibt. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2.5rem 0 1rem;
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-3);
}

.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--linie);
}

/* Der Abschnittsrahmen des Cockpits. `details/summary` und kein eigenes
   Aufklappen in JavaScript: der Zustand liegt im Browser, und der Inhalt
   bleibt im DOM. */
.abschnitt {
  margin: 0 0 0.75rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  overflow: hidden;
}

/* Punkt, Titel, und rechts das Wort. Der Punkt sagt es schneller, das Wort
   sagt es verlaesslich. */
.abschnitt > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  background: var(--flaeche-2);
  font-family: var(--schrift-display);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

/* Der Aufklapppfeil steht sonst vor dem Punkt und zieht die Zeile ein. */
.abschnitt > summary::marker,
.abschnitt > summary::-webkit-details-marker,
.stelle > summary::marker,
.stelle > summary::-webkit-details-marker { content: ""; display: none; }

/* Ein eigener Pfeil, der sich mitdreht - der Zustand des Fachs muss sichtbar
   bleiben, wenn der Standardpfeil weg ist. */
.abschnitt > summary::after,
.stelle > summary::after {
  content: "";
  margin-left: 0.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--schrift-3);
  border-bottom: 2px solid var(--schrift-3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.abschnitt[open] > summary::after,
.stelle[open] > summary::after { transform: rotate(45deg); }

.abschnitt__titel { flex: 1 1 auto; }

.abschnitt__stand {
  font-family: var(--schrift-text);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--schrift-3);
  letter-spacing: 0.02em;
}

.abschnitt__stand[data-fehlt="ja"] { color: var(--gefahr); }

.abschnitt > summary:hover { color: var(--signal); }
.abschnitt[open] > summary { border-bottom: 1px solid var(--linie); }
.abschnitt > *:not(summary) { padding: 1.25rem 1.25rem 1.5rem; }

/* Die eingebundenen Fragmente tragen ihre eigene Ueberschrift, weil sie auch
   allein ausgeliefert werden. Im Cockpit steht dieselbe Zeile schon im
   `summary` - zweimal dasselbe waere Laerm. */
.abschnitt > section > h2 { display: none; }

/* Das Klappfach. Seine Marke ist dieselbe wie `.eyebrow` - ein zweites
   Auszeichnungssystem fuer denselben Rang waere Laerm. */
.klappe {
  margin: 0;
  border-top: 1px solid var(--linie);
}

.klappe > summary {
  padding: 0.9rem 0;
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-3);
  cursor: pointer;
}

.klappe > summary:hover,
.klappe[open] > summary { color: var(--schrift-1); }
.klappe > *:not(summary) { margin-bottom: 1rem; }
.klappe h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.klappe h3 { font-size: 0.9375rem; margin: 1.25rem 0 0.4rem; }

/* Der Verweis auf eine eigene Seite - der Preisspiegel ist keiner der
   aufklappbaren Abschnitte, sondern verlaesst die Seite. */
.verweis { margin: 0 0 0.75rem; }

/* --------------------------------------------------------------------------
   DAS COCKPIT (12-07)

   Kopfzeile, Kennzahlenleiste, Ankernavigation und der Abschnittsrahmen -
   mehr braucht die Verdichtung nicht. Kein mehrspaltiges Raster: die
   Abschnitte tragen Tabellen mit bis zu zwanzig Spalten, und nebeneinander-
   gestellt werden sie unlesbar (Begruendung in tender_detail.html).
   -------------------------------------------------------------------------- */

/* Die Bindefrist ganz oben (DASH-03). Sie steht als Satz da und nicht als
   Zeitstempel. Die Signalkante links macht sie zum Kopf der Seite, ohne eine
   Farbe zu vergeben, die eine Dringlichkeit behaupten wuerde. */
.kopf {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--signal);
  border-radius: var(--rund);
  background: var(--flaeche);
}

.kopf__frist { margin: 0; font-size: 1rem; }
.kopf__frist[data-frist="keine"] { color: var(--schrift-2); }

/* Die Kennzahlenleiste: vier Auskuenfte, jede ein Verweis in ihren
   Abschnitt. Ein Raster mit fester Mindestbreite statt fester Spaltenzahl -
   bei 1280 Pixeln stehen sie nebeneinander, darunter umbrechen sie, ohne
   dass eine Zahl abgeschnitten wird.

   KEINE ZAHL OHNE IHRE GRUNDLAGE: die Kachel traegt Name, Wert und die
   Einordnung darunter. Eine grosse Zahl ohne Herkunft ist genau die Anzeige,
   die diese Anwendung sonst ueberall vermeidet. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.kennzahl {
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
}

.kennzahl:hover { border-color: var(--linie-stark); }

/* Die ganze Kachel ist der Verweis und nicht nur ihre Zahl: ein Ziel von
   zwei Zeichen Breite trifft niemand. */
.kennzahl a {
  display: block;
  padding: 0.9rem 1.1rem;
  color: inherit;
  text-decoration: none;
}

.kennzahl a:hover .kennzahl__wert { color: var(--signal); }

.kennzahl__name {
  display: block;
  font-family: var(--schrift-display);
  color: var(--schrift-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* DIE GROSSE ZAHL STEHT IN MONO (2026-09-19). Sie stand vorher in der
   Auszeichnungsschrift, weil es eine zweite Familie gab und die Kachel sich
   vom Fliesstext absetzen sollte. Die zweite Familie ist entfallen, und der
   Absatz kommt jetzt von dort, wo er hingehoert: eine Zahl, die aus den Daten
   gelesen ist, steht in derselben Schrift wie jedes andere woertlich gelesene
   Stueck dieser Anwendung. Nebenbei stehen zwei Kacheln nebeneinander damit
   auf derselben Ziffernbreite. */
.kennzahl__wert {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--schrift-fest);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* EINE KENNZAHL, DEREN WERT EIN SATZ IST. Nicht jede Kachel traegt eine Zahl:
   die Angebotsbilanz ist ein Satz aus vier Staenden ("1 angefragt, 0 Angebot
   liegt vor, ..."), die Versandfaehigkeit ist "ja", "nein" oder "unbekannt",
   der spaeteste Ausschreibungsstart kann "nicht beurteilbar" sein. In
   Kennzahlgroesse laufen sie ueber mehrere Zeilen und reissen die Leiste auf,
   und seit die Zahl in Mono steht (2026-09-19), saehe ein Wort darin auch noch
   falsch aus - Monospace ist die Schrift des woertlich Gelesenen, nicht die
   eines Satzes.

   Die Vorlage sagt es an: `data-art="satz"`. Bis 2026-09-19 stand hier
   stattdessen `[data-kennzahl="angebote"]` - eine Ausnahme fuer genau eine
   Kachel, an der die drei anderen mit demselben Problem vorbeiliefen. */
.kennzahl__wert[data-art="satz"] {
  font-family: var(--schrift-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

/* BESCHREIBUNGSLISTEN IN DEN ABSCHNITTEN. Kerndaten, Vollstaendigkeitsstufen,
   Bewertungskopf und All-in-Kopf sind alle dasselbe: Beschriftung und Wert.
   Als gewoehnliche `dl` standen sie untereinander mit eingerueckter Zweitzeile -
   zwei Zeilen je Angabe und keine Spalte, in der man die Werte untereinander
   vergleichen kann.

   `.felder` ist ausgenommen: es traegt `<div>`-Huellen statt
   direkter `dt`/`dd`, und ein Raster griffe dort auf die Huellen. */
.abschnitt dl:not(.felder) {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  margin: 0 0 1rem;
}

.abschnitt dl:not(.felder) > dt { color: var(--schrift-2); }
.abschnitt dl:not(.felder) > dd { margin: 0; }

/* Die Grundlage unter der Zahl. KEINE ZAHL OHNE IHRE GRUNDLAGE - eine grosse
   Zahl ohne Einordnung ist genau die Anzeige, die diese Anwendung sonst
   ueberall vermeidet: "677" beantwortet nichts, "677 von 2.334 im Register"
   beantwortet die Frage, wegen der man hinsieht. */
.kennzahl__grund {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--schrift-3);
}

/* Kennzahlen ohne Verweis tragen ihre Innenabstaende selbst - `.kennzahl a`
   greift nur, wo die Kachel irgendwohin fuehrt. */
.kennzahl > .kennzahl__name { padding: 0.9rem 1.1rem 0; }
.kennzahl > .kennzahl__wert,
.kennzahl > .kennzahl__grund { padding: 0 1.1rem; }
.kennzahl > .kennzahl__grund { padding-bottom: 0.9rem; }

/* Traegt eine Kachel keine Grundlagenzeile, sitzt der untere Abstand am Wert -
   sonst klebte die Zahl am Rahmen. */
.kennzahl > .kennzahl__wert:last-child { padding-bottom: 0.9rem; }

/* --------------------------------------------------------------------------
   DIE WERKZEUGLEISTE

   Suchfeld und Laufknopf standen untereinander und sahen aus wie zwei
   unabhaengige Formulare. Sie gehoeren in eine Zeile: beide arbeiten auf
   derselben Liste, und was darunter steht, ist das Ergebnis.
   -------------------------------------------------------------------------- */

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 0 0 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
}

.werkzeugleiste form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.werkzeugleiste .suche { flex: 1 1 22rem; }
.werkzeugleiste .suche input { flex: 1 1 auto; min-width: 0; }
.werkzeugleiste label { font-size: 0.8125rem; color: var(--schrift-2); white-space: nowrap; }
.werkzeugleiste__satz { max-width: 58rem; font-size: 0.8125rem; margin: 0 0 1.5rem; }

/* Die Ankernavigation. Sie ist die zweite Haelfte der Verdichtung: ohne sie
   waeren zugeklappte Abschnitte nur beim Scrollen zu finden. */
.anker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.15rem;
  margin: 0 0 1.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-size: 0.8125rem;
}

.anker a { color: var(--schrift-2); text-decoration: none; }
.anker a:hover { color: var(--signal); text-decoration: underline; }

/* --------------------------------------------------------------------------
   DIE UEBERSICHT (DASH-01, 12-08)

   Sie fuehrt mit dem Geld: die Ersparnis ist die groesste Zahl der Zeile,
   Stand und Bilanz stehen kleiner daneben. Was die Seite zuerst zeigt,
   entscheidet, wofuer sie taeglich benutzt wird - und "zuerst" ist auf einer
   Tabelle eine Frage der Schriftgroesse, nicht der Spaltenreihenfolge.
   -------------------------------------------------------------------------- */

/* KOMPAKT, und zwar genau hier. Der Rest der Anwendung hat 2026-08-30 mehr
   Luft bekommen; diese Tabelle nicht: sie traegt acht Spalten, von denen drei
   ganze Saetze fuehren (die Fehlstelle des Schritts, die offene Entscheidung,
   die Bindefrist). Mit den allgemeinen Abstaenden wird jede Zeile zu einem
   Absatz, und die Uebersicht verliert genau das, was sie ist: eine Uebersicht.

   Die Saetze werden NICHT gekuerzt. Sie werden schmaler gesetzt und umbrechen -
   was wegfaellt, ist Weissraum, nicht Auskunft. Das ist dieselbe Linie, aus der
   die Belegzitate nicht in einem Tooltip stehen. */
/* FESTES SPALTENRASTER. Ohne `table-layout: fixed` verteilt der Browser die
   acht Spalten nach ihrem laengsten Wort - und weil "Vermittlungsgebuehr" ein
   langes Wort ist und "Jetzt dran" ein kurzes, bekam ausgerechnet die Spalte
   mit den Saetzen die geringste Breite und wurde zehn Zeilen hoch. Die
   Prozentwerte geben den drei satztragenden Spalten den Platz, den sie
   brauchen. */
.uebersicht { table-layout: fixed; }

.uebersicht th,
.uebersicht td { padding: 0.45rem 0.6rem; }

.uebersicht td { vertical-align: top; line-height: 1.4; }

.uebersicht th:nth-child(1) { width: 12%; }  /* Ausschreibung */
.uebersicht th:nth-child(2) { width: 17%; }  /* Jetzt dran     */
.uebersicht th:nth-child(3) { width: 15%; }  /* Ersparnis      */
.uebersicht th:nth-child(4) { width: 14%; }  /* Entscheidung   */
.uebersicht th:nth-child(5) { width: 10%; }  /* Bindefrist     */
.uebersicht th:nth-child(6) { width: 10%; }  /* Stand          */
.uebersicht th:nth-child(7) { width: 14%; }  /* Angebote       */
.uebersicht th:nth-child(8) { width: 8%; }   /* Gebuehr        */

/* Die Namen brechen um statt die Spalte aufzuziehen. */
.uebersicht td { overflow-wrap: anywhere; }

/* Die Spaltenueberschriften umbrechen. `thead th` steht sonst auf `nowrap` -
   das ist fuer die meisten Tabellen richtig, hier aber nicht: bei festem
   Raster schiebt "Vermittlungsgebuehr" die letzte Spalte ueber den Rand.
   Die Trennstelle steht als `&shy;` in der Vorlage und nicht als
   `hyphens: auto` hier: die automatische Trennung greift bei Versalien nicht
   verlaesslich, und eine Regel, die manchmal wirkt, ist keine. */
.uebersicht thead th { white-space: normal; }

/* Und die Bilanz bleibt in ihrer Spalte. `max-content` bemisst sich an
   "0 Angebot liegt vor" und zog die Tabelle breiter als die Seite; zwei
   gleiche Spalten passen sich der zugeteilten Breite an. */
/* Die vier Bilanzzahlen standen untereinander und machten die Zeile vier
   Zeilen hoch. Zwei Spalten halbieren das, ohne dass eine Zahl wegfaellt -
   auch die mit null bleiben stehen (DASH-01).

   `minmax(0, 1fr)` und nicht `max-content`: an `max-content` bemisst sich die
   Spalte am laengsten Posten ("0 Angebot liegt vor") und zog die Tabelle ueber
   den rechten Rand. Und `white-space: normal`, weil die Basisregel `.bilanz`
   auf `nowrap` steht - richtig fuer eine freistehende Bilanz, falsch in einer
   Spalte mit zugeteilter Breite. */
.uebersicht .bilanz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem 0.7rem;
  white-space: normal;
}

/* Die Spalte "Jetzt dran" ist ein `<td>` mit der Klasse der Netzkostenliste.
   Die Rasterregel dort greift nicht mehr (siehe `.stand .stand__zeile`); was
   hier bleibt, ist ein Stapel aus Name, Grund und Zaehlstand. */
.uebersicht .stand__zeile > * { display: block; }
.uebersicht .stand__name { font-weight: 600; }

/* Der Satz der Fehlstelle ist der laengste Text der Tabelle. Schmal gesetzt
   braucht er drei kurze Zeilen statt einer breiten - und die Zeilenhoehe der
   Zeile richtet sich nach der hoechsten Zelle. */
/* DIE BEGRUENDUNGSSAETZE AUF DREI ZEILEN.

   Sie erklaeren, warum ein Wert fehlt, und sie sind lang: der Satz zur
   fehlenden Vollmacht hat 120 Zeichen, der zum fehlenden Marktstand 230. Drei
   davon nebeneinander machten aus jeder Tabellenzeile einen Absatz.

   Gekuerzt wird nichts am Text - er steht vollstaendig im Dokument und wird
   von Vorlesehilfen und der Seitensuche gefunden; sichtbar sind drei Zeilen.
   Das ist die Ausnahme von der Linie "keine Auskunft, die man suchen muss",
   und sie traegt, weil beide Saetze an ihrem Zielort ungekuerzt stehen: der
   Schrittsatz auf der Schrittseite, auf die der Name daneben verweist, der
   Ersparnissatz im Abschnitt der Ausschreibung. Die Tabelle ist die Auswahl,
   nicht die Begruendung. */
.uebersicht .stand__grund,
.uebersicht td[data-entscheidung] > span,
.uebersicht td.geld > .muted {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uebersicht .stand__grund {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.uebersicht .stand__zeile .muted { font-size: 0.8125rem; }

/* Die Fristspalte traegt einen Satz und keinen Zeitstempel - sie bricht um. */
.uebersicht .frist { white-space: normal; }

/* Die Zelle traegt zwei Zeilen: den Betrag und seine Einordnung. */
.geld > * { display: block; }

/* Dieselbe Regel wie bei `.kennzahl__wert`: die gelesene Zahl steht in Mono. */
.geld__wert {
  font-family: var(--schrift-fest);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Die vier Bilanzzahlen. Sie gehoeren dazu, aber sie fuehren nicht
   (DASH-01) - kleiner als der Rest der Zeile und untereinander, damit
   "0 abgesagt" nicht mit "0 keine Reaktion" zu einer Zeile verschmilzt. */
.bilanz { font-size: 0.8125rem; color: var(--schrift-2); white-space: nowrap; }
.bilanz > span { display: block; }

/* --------------------------------------------------------------------------
   DER GEFUEHRTE VORGANG (14-04)

   Die Schrittleiste ist eine Reihe gleich breiter Karten, kein Fortschritts-
   balken: sechs Schritte ergeben krumme Prozente, und ein Balken macht aus
   zwei offenen Schritten ein "fast fertig" - dieselbe Ablehnung wie beim
   Vollstaendigkeitsgrad (03.1-03) und bei der Lueckenbilanz (LAST-04).

   Der Stand haengt an Farbe UND Wort. Der Wortlaut steht im
   `<span class="schritt__stand">` und verschwindet nie.
   -------------------------------------------------------------------------- */

.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0;
}

.schritt {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--linie-stark);
  border-radius: 0 0 var(--rund) var(--rund);
  text-decoration: none;
  color: var(--schrift-1);
  background: var(--flaeche);
}

.schritt:hover { background: var(--flaeche-2); }

.schritt__nummer {
  font-family: var(--schrift-fest);
  font-size: 0.75rem;
  color: var(--schrift-3);
}

.schritt__name { font-weight: 600; line-height: 1.25; }
.schritt__stand { font-size: 0.75rem; color: var(--schrift-2); }
/* Was ein fertiger Schritt fuer einen spaeteren noch schuldet. Farbe UND Wort:
   die Achse DRINGLICHKEIT - die Farbe allein sagte nichts. */
.schritt__zusatz { font-size: 0.75rem; color: var(--warn); }

.schritt--fertig { border-top-color: var(--ok); }
.schritt--dran { border-top-color: var(--akzent); background: var(--akzent-flaeche); }
.schritt--wartet { border-top-color: var(--linie); }

/* Der gewaehlte Schritt ist der, den man ansieht - nicht der, der dran ist.
   Beides faellt meistens zusammen und muss trotzdem unterscheidbar bleiben:
   ein spaeterer Schritt bleibt aufrufbar (domain/vorgang), und wer ihn
   ansieht, soll nicht glauben, er sei jetzt an der Reihe. */
.schritt--gewaehlt { outline: 2px solid var(--akzent); outline-offset: -2px; }

.frage { font-size: 1.0625rem; color: var(--schrift-2); margin-top: -0.5rem; }

/* DIE LIEFERSTELLE ALS ZEILE (2026-10-13). Keine Karte mehr: Haarlinien
   trennen die Stellen, und die Teile darin (Angaben, Fragen, Vertrag) trennt
   Abstand statt eines zweiten Rahmens. Karten in Karten waren drei Ebenen
   Rand fuer eine Ebene Inhalt. */
.stelle { border-top: 1px solid var(--linie); }
.stelle:last-of-type { border-bottom: 1px solid var(--linie); }

.stelle > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.9rem 0;
  cursor: pointer;
}

.stelle > summary:hover .stelle__name { color: var(--signal); }
.stelle > summary::after { align-self: center; }

.stelle__name { font-family: var(--schrift-display); font-size: 1rem; font-weight: 600; }
.stelle__netz { font-size: 0.875rem; color: var(--schrift-2); }

/* Das Wort traegt den Stand, die Farbe kuerzt ab: Bernstein fuer "fehlt noch
   etwas", gruen fuer "alles erhoben" (Achse DRINGLICHKEIT). */
.stelle__stand { margin-left: auto; font-size: 0.8125rem; color: var(--warn); }
.stelle__stand[data-offen="nein"] { color: var(--ok); }

.stelle[open] { padding-bottom: 1.75rem; }

/* DIE LASTGANGLISTE (2026-11-02). Je Lieferstelle eine Zeile mit sechs Werten
   und dem Aufklapppfeil, der Kopf darueber im selben Raster. Keine Tabelle in
   einer Rollhuelle mehr: zwanzig Spalten waren breiter als jede Seite. */
.lgzeile {
  display: grid;
  grid-template-columns: minmax(10rem, 2.2fr) minmax(9rem, 1.7fr) 6rem 8rem 9rem 8.5rem 0.75rem;
  align-items: center;
  gap: 0.25rem 1rem;
}
.stelle > summary.lgzeile { display: grid; }
.lgzeile--kopf { padding: 0.5rem 0; border-bottom: 1px solid var(--linie); color: var(--schrift-3); font-size: 0.75rem; }
.lgzeile--kopf::after { content: ""; }
.lgzeile__name { display: flex; flex-direction: column; min-width: 0; }
.lgzeile__wert { font-size: 0.875rem; }
.lgzeile__marke { margin-right: 0.35rem; }
.lgzeile .stelle__stand { margin-left: 0; }
.lgliste > .stelle:last-of-type { border-bottom: 1px solid var(--linie); }

.lgwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem 2rem;
  margin: 0.25rem 0 1.25rem;
}
.lgwahl__datei { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lgwahl__datei > label { flex-basis: 100%; font-weight: 600; }
.lgwerte { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1.25rem; margin: 0 0 1rem; font-size: 0.875rem; }
.lgwerte > dd { margin: 0; }

/* Schmal: Name und Stand in der Zeile, die Werte darunter. */
@media (max-width: 52rem) {
  .lgzeile { grid-template-columns: minmax(0, 1fr) auto auto; }
  .lgzeile--kopf { display: none; }
  .lgzeile__name { grid-row: 1; grid-column: 1; }
  .lgzeile .stelle__stand { grid-row: 1; grid-column: 2; }
  .lgzeile::after { grid-row: 1; grid-column: 3; }
  .lgzeile__wert { grid-column: 1 / -1; }
  .lgzeile__wert:empty { display: none; }
}
.stelle__teil { margin: 0.5rem 0 0; }
.stelle__teil + .stelle__teil { margin-top: 2rem; }

.feldgruppe { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.feldgruppe > legend { padding: 0; margin: 0 0 0.25rem; }

/* Das Raster der Felder: so viele Spalten, wie bei 15rem Mindestbreite
   passen. Auf dem Telefon ist das eine, am Arbeitsplatz drei bis vier. */
/* Jedes Feld belegt drei Zeilen des Rasters (Beschriftung, Eingabe, Hinweis)
   und erbt sie per Subgrid. So stehen die Eingaben einer Reihe auf einer
   Linie, auch wenn eine Beschriftung zweizeilig umbricht. */
.feldraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 1.25rem;
}

.feldraster .feld {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0.5rem 0;
  min-width: 0;
}

.feldraster .feld label { align-self: end; }
.feldraster .feld input,
.feldraster .feld select { width: 100%; min-width: 0; box-sizing: border-box; }

/* Je Frage ein eigenes Formular mit drei Knoepfen - kein Sammelbestaetigen.
   Was hier beantwortet wird, aendert die Menge und damit den Preis
   (VORL-04). Die Zeilen sind dicht und durch Haarlinien getrennt: fuenf
   Fragen sind eine Liste, keine fuenf Abschnitte. */
.frage-formular {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linie);
}

.frage-formular:first-of-type { border-top: 1px solid var(--linie); }

/* Drei Antworten als ein Bedienelement: die Knoepfe stossen aneinander. */
.wahl { display: inline-flex; }
.wahl > button { min-height: 2rem; padding: 0.25rem 0.75rem; border-radius: 0; font-size: 0.8125rem; }
.wahl > button + button { margin-left: -1px; }
.wahl > button:first-child { border-radius: var(--rund) 0 0 var(--rund); }
.wahl > button:last-child { border-radius: 0 var(--rund) var(--rund) 0; }
.wahl > button:hover { position: relative; }

/* Besonderheiten: erst die eine Frage, die acht erst auf "Ja". Aufgeklappt
   nehmen die Fragen die ganze Breite unter den beiden Knoepfen ein. */
.besonderheiten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.besonderheiten__frage { flex-basis: 100%; margin: 0; }
.besonderheiten__fragen > summary { display: inline-flex; list-style: none; cursor: pointer; }
.besonderheiten__fragen > summary::-webkit-details-marker { display: none; }
.besonderheiten__fragen[open] { flex-basis: 100%; }
.besonderheiten__fragen[open] > summary { margin-bottom: 0.5rem; }
.besonderheiten__alle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 1rem; }

@media (max-width: 30rem) {
  .frage-formular { grid-template-columns: 1fr; }
  .stelle__stand { margin-left: 0; }
}

/* Das Anschreiben in der Vorschau: umgebrochen wie im Postfach, nicht
   horizontal scrollend. Es geht an 30 bis 50 Marktteilnehmer, und was man
   nicht lesen kann, prueft man nicht. */
.anschreiben {
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--vertiefung);
  padding: 1.25rem;
  font: 400 0.875rem/1.6 var(--schrift-fest);
  max-height: 32rem;
  overflow-y: auto;
}

/* Ein Nebenweg unter einem eingebundenen Abschnitt: leiser als der Abschnitt,
   weil er auf eine andere Seite fuehrt und nicht zur Arbeit dieses Schritts
   gehoert. */
.nebenweg { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--schrift-2); }

/* DER FUSS DES SCHRITTS (2026-10-13). Links die eine Handlung nach vorn,
   rechts die beiden Nachschlagewege. Die Haarlinie trennt ihn von der Arbeit
   darueber: er gehoert zur Fuehrung und nicht zum letzten Abschnitt. */
.schrittfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

.schrittfuss__neben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-left: auto;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   FORMULARE
   -------------------------------------------------------------------------- */

.feld { margin: 0.85rem 0; }
.feld label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.feld input, .feld select { min-width: 18rem; max-width: 100%; }

/* --------------------------------------------------------------------------
   DER RAHMEN (2026-09-20)

   Der Entwurf fasst Kennzahlen, Werkzeugleiste und Tabelle in EINE umrandete
   Flaeche. Das ist keine Zierde: die drei gehoeren zusammen - die Zahlen sagen,
   woran man ist, die Leiste schraenkt ein, die Tabelle zeigt das Ergebnis. Drei
   Bloecke ohne Fassung lesen sich als drei Gegenstaende.

   Ueberschrift und erklaerender Satz stehen DAVOR und nicht darin: sie sagen,
   was die Flaeche ist, und gehoeren deshalb nicht hinein.
   -------------------------------------------------------------------------- */

.rahmen {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  overflow: hidden;
  margin: 0 0 1.75rem;
}

/* Die Abschnitte im Rahmen trennt eine Linie, kein Abstand - sonst stuenden sie
   wieder als eigene Gegenstaende da, nur mit einer Fassung darum. */
.rahmen > * + * { border-top: 1px solid var(--linie); }
.rahmen > .band,
.rahmen > .leiste { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
.rahmen > .band { border-top: 0; }
.rahmen > table { border-top: 0; }

/* Eine Tabelle im Rahmen darf seitlich rollen, ohne die Seite mitzunehmen. */
.rollhuelle { overflow-x: auto; }
.rollhuelle > table { min-width: 48rem; }

/* DER KOPF KLEBT HIER NICHT, und das ist kein Versehen. `overflow-x: auto`
   macht die Huelle zum Rollbehaelter, und ein `position: sticky` darin bezieht
   sich auf SIE und nicht mehr auf das Fenster: der Kopf setzte sich dann mit
   seinem `top: 3rem` genau auf die erste Zeile. Entweder klebender Kopf oder
   seitlich rollbare Tabelle - beides zugleich gibt es in CSS nicht. Die
   Rollbarkeit gewinnt, weil eine Tabelle, deren letzte Spalte auf einem
   schmalen Bildschirm unerreichbar ist, mehr kostet als ein Kopf, der
   wegscrollt. */
.rollhuelle thead th { position: static; }

/* Der Kopf steht im Rahmen auf der erhobenen Flaeche und nicht in der
   Vertiefung: die Vertiefung ist dort die Farbe des Grundes, und ein
   Tabellenkopf in der Grundfarbe sieht aus wie ein Loch in der Karte. */
.rahmen thead th { background: var(--flaeche-2); }

/* --------------------------------------------------------------------------
   DIE WERKZEUGLEISTE DES ENTWURFS

   Suchfeld links (es nimmt den Platz), danach die Filterchips, rechts die eine
   Handlung. Eine Leiste, in der die Handlung zwischen den Filtern steht, laesst
   sie wie einen weiteren Filter aussehen.
   -------------------------------------------------------------------------- */

.leiste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
}

.leiste__suche {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--grund);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  padding: 0.4rem 0.6rem;
  color: var(--schrift-3);
}

.leiste__suche:focus-within { border-color: var(--signal); }
.leiste__suche svg { width: 0.875rem; height: 0.875rem; flex: none; }

/* Das Eingabefeld selbst traegt keinen eigenen Rahmen mehr - der Rahmen ist die
   Huelle darum. Zwei Raender ineinander sehen aus wie ein Fehler. */
.leiste__suche input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--schrift-1);
  font: inherit;
  font-size: 0.875rem;
}

.leiste__suche input:focus { outline: none; }

/* Die Beschriftung traegt eine Vorlesehilfe, nicht das Auge: neben dem Feld
   steht der Platzhalter, und zwei Beschriftungen waeren eine zu viel. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.leiste__rechts { margin-left: auto; display: flex; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   DER CHIP

   Ein Filter, kein Knopf: er schraenkt ein, er tut nichts. Die Zahl steht in
   der festen Schrift, weil acht Chips nebeneinander eine Kolonne sind - und in
   einer Kolonne muss eine laengere Zahl auch laenger aussehen.

   Der Ton kommt aus `domain.customer.STAND_TON` als `data-ton` und faerbt den
   Chip NUR, wenn er etwas verlangt. Sieben eingefaerbte Chips waeren sieben
   Meldungen, und dann ist keine eine.
   -------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--schrift-2);
  font-size: 0.78125rem;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { border-color: var(--luecke); color: var(--schrift-1); }

.chip b {
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--schrift-1);
}

.chip--an {
  background: var(--signal-flaeche);
  border-color: transparent;
  color: var(--signal-tief);
  font-weight: 500;
}

.chip--an b { color: var(--signal-tief); }

.chip[data-ton="warn"] { border-color: transparent; background: var(--warn-flaeche); color: var(--warn); }
.chip[data-ton="warn"] b { color: var(--warn); }
.chip[data-ton="gefahr"] { border-color: transparent; background: var(--gefahr-flaeche); color: var(--gefahr); }
.chip[data-ton="gefahr"] b { color: var(--gefahr); }
.chip[data-ton="ok"] { border-color: transparent; background: var(--ok-flaeche); color: var(--ok); }
.chip[data-ton="ok"] b { color: var(--ok); }

/* Der aufgerufene Filter gewinnt gegen seinen Ton: welcher gerade greift, ist
   die wichtigere Auskunft als welcher Zustand er zeigt. */
.chip--an[data-ton] { background: var(--signal-flaeche); color: var(--signal-tief); }
.chip--an[data-ton] b { color: var(--signal-tief); }

/* --------------------------------------------------------------------------
   KNOEPFE

   Ein System fuer alles, was man drueckt: `.knopf` als Grundform, dazu
   `--haupt` (die hervorgehobene Handlung, hoechstens eine je Abschnitt),
   `--gross` (dieselbe ueber die volle Breite eines Abschnitts), `--klein`
   (in Tabellenzeilen), `--breit` und `--gefahr` (umrandet, nie gefuellt).
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  background: var(--flaeche);
  color: var(--schrift-1);
  font: inherit;
  font-size: 0.84375rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.knopf:hover { border-color: var(--luecke); }
.knopf svg { width: 0.875rem; height: 0.875rem; flex: none; }

.knopf--haupt {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--auf-signal);
  font-weight: 500;
}

.knopf--haupt:hover { background: var(--signal-tief); border-color: var(--signal-tief); }

.knopf--haupt:disabled {
  border-color: var(--linie);
  background: transparent;
  color: var(--schrift-3);
  cursor: not-allowed;
}

/* Die EINE Handlung eines Abschnitts (bis 2026-10-04 `.aktion`): volle
   Breite, mehr Hoehe. Immer zusammen mit `.knopf--haupt`. */
.knopf--gross {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--schrift-display);
  font-size: 0.9375rem;
  font-weight: 600;
}

.knopf, button { min-height: 2.25rem; }
.knopf--klein { min-height: 2rem; padding: 0.25rem 0.6rem; font-size: 0.8125rem; }
.knopf--breit { display: flex; justify-content: center; width: 100%; }
.knopf--gefahr { color: var(--gefahr); border-color: var(--gefahr); background: transparent; }
.knopf--gefahr:hover { background: var(--gefahr-flaeche); border-color: var(--gefahr); }

/* Der erklaerende Satz neben der Ueberschrift. Er sagt, wozu die Seite da ist,
   und steht deshalb im Kopf und nicht als erster Absatz darunter. */
.seitenkopf__satz {
  margin: 0;
  color: var(--schrift-2);
  font-size: 0.9375rem;
  flex: 1 1 20rem;
  align-self: center;
}

/* --------------------------------------------------------------------------
   DIE BAUSTEINE DES ENTWURFS (2026-09-20)

   Der Farbsatz war am 2026-09-19 umgestellt, die Bauteile aber nicht gebaut -
   die Oberflaeche trug die neuen Farben und die alten Formen. Was hier folgt,
   ist der Rest: Zustandsplakette, Kennzahlenband, zweispaltige Akte, die grosse
   Zahl mit ihrem Vorbehalt und die Angebotszeile.

   Die Tokennamen sind die dieses Projekts und nicht die des Entwurfs: `--ok`
   statt `gut`, `--warn` statt `acht`, `--gefahr` statt `krit`. Zwei Namen fuer
   dieselbe Farbe waeren zwei Orte, an denen sie sich aendern muesste.
   -------------------------------------------------------------------------- */

/* DIE ZUSTANDSPLAKETTE. Farbe UND Wort - die Achse DRINGLICHKEIT. Der Punkt
   davor traegt keine eigene Aussage; er ist `::before` und damit fuer eine
   Vorlesehilfe nicht da, weil das Wort daneben dieselbe Auskunft gibt.

   `--ruhe` ist die vierte und wichtigste: ein Zustand, der weder gut noch
   schlecht ist, bekommt keine Farbe. Ohne sie faerbt man alles ein, und dann
   faerbt man nichts. */
.pl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pl::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.pl--ok { background: var(--ok-flaeche); color: var(--ok); }
.pl--warn { background: var(--warn-flaeche); color: var(--warn); }
.pl--gefahr { background: var(--gefahr-flaeche); color: var(--gefahr); }
.pl--ruhe { background: var(--luecke-flaeche); color: var(--schrift-2); }

/* --------------------------------------------------------------------------
   DER POSTEINGANG: LISTE LINKS, ENTSCHEIDUNG RECHTS (2026-09-20)

   Vorher waren es zwei Seiten. Wer eine Mail entschieden hat, will die
   naechste - und ein Weg zurueck zur Liste dazwischen ist ein Klick, der
   nichts beitraegt.
   -------------------------------------------------------------------------- */

.postspalt { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }

@media (max-width: 55rem) {
  .postspalt { grid-template-columns: 1fr; }
  .postliste { border-right: 0; border-bottom: 1px solid var(--linie); max-height: 20rem; }
}

.postliste {
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 44rem;
}

.post {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
}

.post:last-child { border-bottom: 0; }
.post:hover { background: var(--flaeche-2); }

/* Die geoeffnete Mail. Kante UND Flaeche - und `aria-current` in der Vorlage,
   weil eine Farbe allein einer Vorlesehilfe nichts sagt. */
.post[data-offen="ja"] { background: var(--signal-flaeche); border-left-color: var(--signal); }

.post__von { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.post__von b {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post__von time {
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--schrift-3);
  flex: none;
}

.post__betreff {
  font-size: 0.78125rem;
  color: var(--schrift-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post__marken { display: flex; gap: 0.3rem; margin-top: 0.2rem; flex-wrap: wrap; align-items: center; }
.post__kunde { font-size: 0.75rem; color: var(--schrift-3); }
.post__leer { padding: 1rem; margin: 0; }

.postinhalt {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

.postinhalt--leer { justify-content: center; }
.postinhalt > section { margin: 0; }
.postinhalt > section > .spaltenmarke { margin-bottom: 0.6rem; }

.postkopf h2 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.postkopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--schrift-2);
}

/* Der Mailtext als Zitat: er ist fremder Text, und er sieht danach aus. */
.zitat {
  margin: 0;
  border-left: 2px solid var(--linie-stark);
  padding-left: 0.9rem;
  color: var(--schrift-2);
  font-size: 0.84375rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Der Abgleich gegen den Bestand. Kopfzeile sagt, wogegen geprueft wurde, und
   das Urteil steht rechts - keine Prozentzahl: diese Anwendung rechnet keine
   Aehnlichkeit, sie vergleicht normalisierte Merkmale auf Gleichheit. */
.abgleich { border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }

.abgleich__kopf {
  padding: 0.6rem 0.8rem;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  font-size: 0.78125rem;
  color: var(--schrift-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.abgleich__urteil { margin-left: auto; }
.abgleich__koerper { padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.abgleich__koerper > p { margin: 0; }

.treffer { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; flex-wrap: wrap; }
.treffer__wer { display: flex; flex-direction: column; gap: 0.1rem; }
.treffer__wer small { color: var(--schrift-3); font-size: 0.75rem; }
.treffer__beleg { color: var(--schrift-2); flex: 1 1 10rem; }
.treffer form { margin: 0; margin-left: auto; }

.entscheidungen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* Die Anhaenge einer Mail und die daraus gelesene Rechnung (POST-03).

   Ein Anhang, den diese Anwendung nicht lesen kann, steht trotzdem da - mit
   seinem Medientyp als benannte Luecke. Verschwiegen waere er eine Datei, von
   der niemand weiss, dass es sie gibt. */
.anhangliste { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.anhangliste li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; }
.anhangliste__name { font-family: var(--schrift-fest); font-size: 0.78125rem; }

.rechnung {
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: 0.9rem 1rem;
  margin: 0 0 0.75rem;
  background: var(--flaeche-2);
}

.rechnung__kopf { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem; font-size: 0.875rem; }
.rechnung .angabenliste dd { flex-wrap: wrap; }
.rechnung .angabenliste input { width: 100%; max-width: 22rem; }
.rechnung .feld__hinweis { flex-basis: 100%; }

/* --------------------------------------------------------------------------
   DER STREIFEN AM ZEILENANFANG

   Drei Pixel Farbe an der linken Kante der ersten Zelle. Er traegt dieselbe
   Aussage wie die Plakette in derselben Zeile und ist damit REDUNDANT - genau
   das ist sein Zweck: er wirkt im Ueberflug, wo man die Plakette noch nicht
   liest. Eine Zeile ohne Dringlichkeit bekommt keinen; nur der, der etwas
   verlangt, faellt auf.
   -------------------------------------------------------------------------- */

.streifen { border-left: 3px solid transparent; padding-left: calc(1rem - 3px); }
.streifen[data-ton="warn"] { border-left-color: var(--warn); }
.streifen[data-ton="gefahr"] { border-left-color: var(--gefahr); }

/* Name oben, Einordnung darunter - der Firmenblock der Liste. Zwei Zeilen in
   einer Zelle statt zwei Spalten: Ort und Wirtschaftszweig beantworten keine
   eigene Frage, sie sagen, welche Firma gemeint ist. */
.firma { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.firma > b, .firma > a { font-weight: 500; font-size: 0.875rem; }
.firma > a { text-decoration: none; color: var(--schrift-1); }
.firma > a:hover { color: var(--signal); text-decoration: underline; }
/* Die Standzelle: Plakette oben, naechster Schritt darunter (KUND-04). Der
   Satz ist leiser als die Plakette - er ist die Erlaeuterung, nicht der
   Befund. */
.standzelle { min-width: 9rem; }
.standzelle small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--schrift-3);
  line-height: 1.35;
}

.firma small {
  color: var(--schrift-3);
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   DIE FRIST UND IHRE UHR

   Das Charakteristische dieser Domaene: ein Angebot gilt unter einer Stunde,
   der Versand hat dreissig Minuten. Der Ring leert sich mit der Frist, die
   Farbe wechselt bei einer Stunde und bei fuenfzehn Minuten.

   Der Ring ist ein `conic-gradient` mit einer Maske - kein Bild, kein Skript
   und kein SVG je Zeile. Er traegt KEINE eigene Aussage: die Zeit steht als
   Zahl daneben, und die Farbe steht zusaetzlich am Wort in der Plakette
   derselben Zeile. Faellt `mask` aus, steht ein gefuellter Punkt da - und die
   Auskunft ist unveraendert vollstaendig.
   -------------------------------------------------------------------------- */

.frist {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.uhr {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--anteil, 60%), transparent 0);
  mask: radial-gradient(circle, transparent 46%, #000 48%);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 48%);
}

.frist[data-ton="ok"] { color: var(--ok); }
.frist[data-ton="warn"] { color: var(--warn); }
.frist[data-ton="gefahr"] { color: var(--gefahr); }

/* Kein laufender Countdown: ein Datum, ein Strich, ein Wort. Leiser und ohne
   Uhr - eine Uhr an einer Kuendigungsfrist in achtzehn Monaten waere eine
   Dringlichkeit, die es nicht gibt. */
.frist[data-ton="aus"] { color: var(--schrift-3); font-weight: 400; }

/* DIE ZELLE MIT WAPPEN. Zwei Buchstaben als Ankerpunkt fuer das Auge - eine
   Namensspalte aus reinem Fliesstext hat keinen. Das Wappen traegt keine eigene
   Auskunft und ist in der Vorlage `aria-hidden`. */
.zelle { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

.wappen {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--rund);
  background: var(--signal-flaeche);
  color: var(--signal-tief);
  display: grid;
  place-items: center;
  font-family: var(--schrift-fest);
  font-size: 0.6875rem;
  font-weight: 500;
}

.zelle__text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.zelle__text small { font-size: 0.75rem; }

/* DAS KENNZAHLENBAND. Ein Raster mit Trennlinien statt einzelner Kacheln: vier
   Zahlen nebeneinander sind EINE Auskunft ueber den Stand und nicht vier
   Kaestchen. Die Kachelform bleibt fuer `.kennzahlen` mit Verweisen - dort
   ist jede ein eigenes Ziel. */
.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 0 0 1.75rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  overflow: hidden;
}

.band__feld {
  padding: 1rem;
  border-right: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.band__feld:last-child { border-right: 0; }

.band__titel {
  font-size: 0.71875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--schrift-3);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

/* DER STRICH UNTER DER ZAHL trennt sie von ihrer Fussnote. Ohne ihn liest sich
   die Fussnote als zweite Zeile derselben Angabe; mit ihm ist sie, was sie ist:
   die Erlaeuterung darunter. Er sitzt am Wert und nicht am Feld, damit er auch
   dort steht, wo statt einer Zahl ein Strich oder ein Satz steht. */
.band__wert {
  display: block;
  font-family: var(--schrift-fest);
  font-size: 1.5625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 0.7rem;
}

/* Ein Paar wie "2 von 12" ist breiter als eine Zahl und braucht deshalb einen
   Grad weniger. Die Ausnahme haengt am Inhalt und nicht an einer zweiten Klasse:
   `data-kennzahl` steht ohnehin da, weil die Tests daran greifen. */
.band__wert[data-kennzahl="vollstaendigkeit"] { font-size: 1.125rem; }

.band__wert[data-ton="warn"] { color: var(--warn); }
.band__wert[data-ton="ok"] { color: var(--ok); }
.band__fuss { font-size: 0.78125rem; color: var(--schrift-2); line-height: 1.4; }

/* Ein Feld, dessen Auskunft ein Satz ist und keine Zahl - "Naechster
   Schritt". Der Strich bleibt, die Schriftgroesse wird die des Fliesstexts. */
.band__feld[data-art="satz"] .band__wert {
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
  letter-spacing: 0;
}

/* DER AKTENKOPF. Wappen, Titelblock, Handlungen - in einer Zeile, und die
   Handlungen rechts. Ein Kopf, der die naechsten Schritte unter den Namen
   schiebt, macht aus zwei Entscheidungen eine Liste. */
.aktenkopf {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 1rem;
  margin: 0;
}

.aktenkopf__wappen {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--rund);
  background: var(--signal-flaeche);
  color: var(--signal-tief);
  display: grid;
  place-items: center;
  font-family: var(--schrift-fest);
  font-weight: 500;
  font-size: 0.9375rem;
}

.aktenkopf__titel { flex: 1 1 22rem; min-width: 0; }
.aktenkopf__titel h1 { margin: 0 0 0.25rem; }

.aktenkopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--schrift-2);
}

.aktenkopf__tasten { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ZWEI SPALTEN. Links, was erhoben ist; rechts, was daraus folgt. Unter 62rem
   untereinander - zwei Spalten auf einem schmalen Bildschirm sind zwei zu
   schmale Spalten. */
.zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
}

.spalte { padding: 1.5rem 1rem; min-width: 0; }

/* Die Linie zwischen den Spalten IST die Aussage: links, was erhoben ist,
   rechts, was daraus folgt. Ein Abstand allein sagt das nicht. */
.spalte + .spalte { border-left: 1px solid var(--linie); }

@media (max-width: 62rem) {
  .zweispalt { grid-template-columns: 1fr; }
  .spalte + .spalte { border-left: 0; border-top: 1px solid var(--linie); }
}

/* --------------------------------------------------------------------------
   DIE ABSCHNITTSMARKE UND DIE BESCHREIBUNGSLISTE
   -------------------------------------------------------------------------- */

/* Die Stammdaten als zweispaltige Beschreibungsliste. Label und Wert an einer
   Kante - eine Tabelle waere dasselbe mit mehr Markup und einem Rahmen, den
   diese Angaben nicht brauchen. */
/* Sie heisst `angabenliste` und nicht `felder`: `.felder` ist seit der
   Haendler-Qualifizierung vergeben - dort steht ein Feld je Block mit dem
   Namen darueber, weil ein woertliches Belegzitat neben seinem Label zwei
   Spalten braeuchte, von denen eine leer bleibt. Zwei Bauteile unter einem
   Namen sind ein Bauteil, das je nach Seite anders aussieht; beim ersten
   Versuch trug die Akte deshalb Grossbuchstaben, die niemand bestellt hatte. */
.angabenliste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 1rem;
  margin: 0;
  align-items: baseline;
}

.angabenliste dt { color: var(--schrift-2); font-size: 0.8125rem; }
.angabenliste dd {
  margin: 0;
  font-size: 0.84375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.angabenliste__zu { font-size: 0.75rem; }

/* --------------------------------------------------------------------------
   DAS FELD, DAS SICH ANKLICKEN LAESST

   "Eine fehlende Angabe ist kein Fehler. Sie steht als gestricheltes Feld an
   genau der Stelle, wo der Wert stehen wird, nennt sich beim Namen und laesst
   sich anklicken." - genau das ist dieser Baustein.

   `<details>` und kein Skript: der Zustand liegt im Browser, und ohne
   JavaScript bleibt das Feld bedienbar. Dieselbe Bauform wie das
   Verwaltungsfach der Navigation und die Herleitung.
   -------------------------------------------------------------------------- */

.feldedit { min-width: 0; }

.feldedit > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--rund);
}

.feldedit > summary::-webkit-details-marker { display: none; }
.feldedit > summary:hover .fehlt { border-color: var(--signal); color: var(--signal); }
.feldedit > summary:hover .feldedit__wert { color: var(--signal); }

.feldedit__wert {
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
}

.feldedit > summary:hover .feldedit__wert { border-bottom-color: var(--signal); }

.feldedit > form {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
  align-items: center;
}

.feldedit input, .feldedit select { padding: 0.3rem 0.5rem; font-size: 0.8125rem; }
.feldedit button { padding: 0.3rem 0.6rem; font-size: 0.8125rem; }

/* Eine Tabelle in der Spalte traegt weniger Polsterung: eine halbe
   Seitenbreite ist kein Platz fuer die Abstaende der vollen. */
table.schlank th, table.schlank td { padding: 0.45rem 0.5rem; font-size: 0.8125rem; }
table.schlank th:first-child, table.schlank td:first-child { padding-left: 0; }
table.schlank th:last-child, table.schlank td:last-child { padding-right: 0; }

/* DIE GROSSE ZAHL MIT IHREM VORBEHALT. Der Vorbehalt steht AN der Zahl und
   nicht in einer Fussnote: wer die Zahl liest, liest ihn mit. Dieselbe Regel
   wie die Proxy-Kennzeichnung aus MARKT-05. */
.ergebnis {
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche-2);
  overflow: hidden;
}

.ergebnis__oben {
  padding: 1rem 1.1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ergebnis__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--schrift-3);
  font-weight: 600;
}

.ergebnis__betrag {
  font-family: var(--schrift-fest);
  font-size: 2.125rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.ergebnis__betrag small {
  font-size: 1rem;
  color: var(--schrift-2);
  font-weight: 400;
  margin-left: 0.35rem;
}

.ergebnis__grund { font-size: 0.8125rem; color: var(--schrift-2); }

.vorbehalt {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--linie);
  background: var(--warn-flaeche);
  color: var(--warn);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.vorbehalt a { color: inherit; text-underline-offset: 2px; }
.vorbehalt svg { width: 0.9375rem; height: 0.9375rem; flex: none; margin-top: 0.15rem; }
.vorbehalt + .vorbehalt { border-top-color: var(--linie); }

/* Der Abstand zum guenstigsten Angebot. Gruen heisst guenstiger, rot teurer -
   und das Vorzeichen steht davor, damit die Farbe nicht die einzige Auskunft
   ist. */
.diff { font-family: var(--schrift-fest); color: var(--schrift-2); }
.diff--hoch { color: var(--gefahr); }
.eintrag--empfohlen .diff { color: var(--ok); }

/* DIE POSTENLISTE. Bezeichnung links, Betrag rechts, die Summe abgesetzt. */
.posten { display: flex; flex-direction: column; margin: 1rem 0 0; }

.posten__zeile {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.8125rem;
}

.posten__zeile:last-child { border-bottom: 0; }
.posten__zeile > span:first-child { color: var(--schrift-2); min-width: 0; }
.posten__zeile .zahl { white-space: nowrap; }

.posten__summe {
  font-weight: 500;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie-stark);
  border-bottom: 0;
  margin-top: 0.25rem;
}

.posten__summe > span:first-child { color: var(--schrift-1); }

/* DIE ANGEBOTSZEILE. Rang, wer, Preis - und die empfohlene hebt sich ab.
   Kein Balken und kein Stern: der Rang steht als Ziffer da, und die Empfehlung
   traegt denselben Gruenton wie jede andere gute Nachricht. */
.eintraege { display: flex; flex-direction: column; gap: 0.5rem; }

.eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
}

.eintrag--empfohlen { border-color: var(--ok); background: var(--ok-flaeche); }

/* Ein Termin, der in weniger als einer Woche faellig ist. Die Kante links und
   nicht die ganze Flaeche: zehn eingefaerbte Zeilen untereinander sind wieder
   keine Hervorhebung. */
.eintrag--dringend { border-left: 3px solid var(--warn); }

/* Das Datum traegt die Terminzeile. Feste Schrift und feste Breite, damit
   untereinander stehende Daten an derselben Stelle stehen - eine Liste aus
   proportional gesetzten Daten liest sich nicht als Kalender. */
.eintrag__tag {
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  width: 3.5rem;
  flex: none;
  line-height: 1.15;
}

.eintrag__tag b { display: block; font-size: 0.9375rem; font-weight: 500; }
.eintrag__tag small { font-size: 0.6875rem; color: var(--schrift-3); }

.eintrag__rang {
  font-family: var(--schrift-fest);
  font-size: 0.75rem;
  color: var(--schrift-3);
  width: 1.1rem;
}

.eintrag--empfohlen .eintrag__rang { color: var(--ok); }

.eintrag__wer { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.eintrag__wer b { font-weight: 500; font-size: 0.875rem; }
.eintrag__wer small { font-size: 0.75rem; color: var(--schrift-2); }

.eintrag__rechts { text-align: right; display: flex; flex-direction: column; gap: 0.1rem; }
.eintrag__rechts b {
  font-family: var(--schrift-fest);
  font-weight: 500;
  font-size: 0.9375rem;
}
.eintrag__rechts small { font-size: 0.75rem; color: var(--schrift-2); }

/* Eine Zeile unter dem Eintrag - fuer eine Angabe, die zur Lieferstelle
   gehoert, aber nicht in die drei Spalten passt. Sie spannt sich ueber die
   volle Breite, damit das aufgeklappte Eingabefeld Platz hat. */
.eintrag__unten {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding-top: 0.5rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--linie);
}

.eintrag__unten small { font-size: 0.75rem; }

/* Die Anrede, wie sie hinausgeht. In fester Schrift, weil sie woertlich so in
   der Mail steht - dieselbe Kennzeichnung wie beim Belegzitat: was hier steht,
   ist nicht beschrieben, sondern zitiert. */
.anrede {
  font-family: var(--schrift-fest);
  font-size: 0.78125rem;
  display: block;
}

/* Die Abschnittsmarke der Akte - kleiner als `.eyebrow` und ohne Linie, weil
   in einer Spalte kein Platz fuer sie ist. */
h2.spaltenmarke, .spaltenmarke {
  display: flex;
  font-family: var(--schrift-display);
  font-size: 0.71875rem;
  line-height: 1.4;
  border: 0;
  background: none;
  padding: 0;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--schrift-3);
  font-weight: 600;
}

.spaltenmarke__zaehler {
  font-family: var(--schrift-fest);
  letter-spacing: 0;
  color: var(--schrift-2);
  font-weight: 400;
}

.spaltenmarke__rechts { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Eine zweite Marke in derselben Spalte braucht Luft nach oben - sonst klebt
   "Ausschreibungen" an der letzten Lieferstelle und liest sich als deren
   Fussnote. Nur die zweite und folgende: die erste steht schon am Spaltenkopf. */
.spalte > * + .spaltenmarke { margin-top: 2rem; }


/* Der Hinweis unter einem Feld steht UNTER ihm und nicht daneben: neben
   einem Eingabefeld von 18rem bleibt auf breiten Bildschirmen Platz, und
   der Satz rutscht dann in dieselbe Zeile wie das Feld, auf das er sich
   bezieht. */
.feld__hinweis { display: block; margin-top: 0.25rem; font-size: 0.8125rem; }

/* Auf `#netzkosten` begrenzt: `.feld` und `.marker` tragen auch die
   Angebots- und Merkmalsformulare, und die sind hier nicht gemeint. */
#netzkosten .feld {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie);
}

#netzkosten .feld > label { display: block; margin-bottom: 0.25rem; font-weight: 600; }

.feld label .marker {
  display: inline;
  margin-left: 0.5rem;
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-3);
}

#netzkosten .feld input,
#netzkosten .feld select { min-width: min(20rem, 100%); }

/* Elf Zahlen, die gemeinsam fuer ein Lieferjahr gelten - nebeneinander
   gelesen sind sie eine Tabelle, untereinander sind sie ein Fragebogen. */
.jahreswerte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0 1.5rem;
}

.jahreswerte > p,
.jahreswerte > button { grid-column: 1 / -1; }
.jahreswerte > button { justify-self: start; margin-top: 0.75rem; }

/* Die Annahmen unter der Ersparnis (12-06, DASH-06). Sie stehen als
   gewoehnliche Liste und NICHT gedaempft: sie sind nicht die Fussnote unter
   der Zahl, sondern das, was die Zahl vor einem Kunden traegt. Gedaempfter
   Text wird ueberlesen, und genau diese beiden Saetze duerfen nicht
   ueberlesen werden. */
.annahmen { padding-left: 1.2rem; margin: 0.25rem 0 1rem; }

/* --------------------------------------------------------------------------
   DER STAND (Netzkosten) als Kontobuch
   -------------------------------------------------------------------------- */

.stand {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--linie);
}

/* Auf die Liste begrenzt. `.stand__zeile` traegt auch die Spalte "Jetzt dran"
   der Uebersicht, und dort ist es ein `<td>`: eine Tabellenzelle mit
   `display: grid` ist keine Tabellenzelle mehr, faellt aus dem Spaltenraster
   und bringt ihre eigenen Innenabstaende mit. Das war die Haelfte der
   Zeilenhoehe, ueber die sich die Uebersicht aufgeblaeht hat. */
.stand .stand__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid transparent;
}

/* Der Warnton faerbt die Zeile, nicht den Namen: der Name ist die Auskunft
   und soll so lesbar bleiben wie jeder andere Text. */
.stand .stand__zeile.warn {
  padding: 0.85rem 1rem;
  border-radius: 0;
  color: inherit;
}

.stand .stand__name { font-weight: 600; overflow-wrap: anywhere; }

.stand .stand__wert {
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--warn);
}

/* Der Grund traegt seinen eigenen Farbwert statt `.muted`: ein ganzer Absatz
   in Kursivsatz ist schwerer zu lesen als der Satz, den er traegt - und
   dieser Satz traegt die Frist und ihre Rechtsgrundlage. */
.stand .stand__grund {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--schrift-2);
}

/* Ohne Namensspalte - die Zeitbefunde tragen ihren Satz allein. */
.stand--knapp .stand__grund { margin-top: 0; }
.stand__name { font-weight: 600; }
.stand__grund { color: var(--schrift-2); }

/* --------------------------------------------------------------------------
   DER LAUF: ein Knopf und was er kostet
   -------------------------------------------------------------------------- */

.lauf {
  margin: 0 0 1.75rem;
  padding: 1.35rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
}

.lauf form { margin: 0; }
.lauf__satz { margin: 0.9rem 0 0; max-width: 46rem; font-size: 0.875rem; color: var(--schrift-2); }

.lauf__stand {
  margin: 1rem 0 0;
  font-family: var(--schrift-fest);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Der Fortschritt eines Laufs: dieselbe schmale Spur wie der Trichter. */
.fortschritt {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: 0.5rem;
  margin: 0.4rem 0;
  border: 0;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
  appearance: none;
}
.fortschritt::-webkit-progress-bar { background: var(--linie); border-radius: 999px; }
.fortschritt::-webkit-progress-value { background: var(--signal); border-radius: 999px; transition: width 0.4s ease; }
.fortschritt::-moz-progress-bar { background: var(--signal); border-radius: 999px; }

/* --------------------------------------------------------------------------
   DIE PRUEFLISTE UND DIE KANDIDATENLISTE
   -------------------------------------------------------------------------- */

.pruefliste td { vertical-align: top; }

/* Die EINE Auswahlmaske des Cockpits (15-08). Sie traegt je Zeile vier
   Felder mit Wert, Beleg und Fundstelle - das ist mehr Text, als eine
   Tabellenzelle in einer Zeile fassen kann, und deshalb steht die
   Qualifizierung als Beschreibungsliste in ihrer Zelle und nicht als vier
   weitere Spalten. Vier Spalten mehr machten die Tabelle breiter als den
   Bildschirm; eine Liste in der Zelle waechst nach unten, und nach unten ist
   Platz. */
.kandidaten td { vertical-align: top; }

/* Name, Ort, Adresse und Webauftritt stehen untereinander: nebeneinander
   verschmelzen sie zu einer Zeile, in der man die Adresse nicht mehr
   findet. */
.kandidaten td > * { display: block; }

.kandidat__adresse,
.kandidat__seite { font-size: 0.8125rem; color: var(--schrift-2); }

/* Die Webadresse ist Maschinentext - sie wurde geholt, nicht behauptet. */
.kandidat__seite { font-family: var(--schrift-fest); overflow-wrap: anywhere; }

/* Ein Feld je Block, der Name darueber. `dt` und `dd` nebeneinander waeren
   bei einem woertlichen Belegzitat zwei Spalten, von denen eine leer
   bleibt. */
.felder > div { margin: 0 0 0.9rem; }

.felder dt {
  font-family: var(--schrift-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--schrift-3);
}

.felder dd { margin: 0.15rem 0 0; }
.felder dd > * { display: block; }

/* --------------------------------------------------------------------------
   DIAGRAMME (ADR-0003)

   Die Hoehe steht hier und nicht im Diagramm selbst: ECharts misst den
   Behaelter beim init und rendert null Pixel hoch, wenn der keine gemessene
   Hoehe hat - ein figure ohne Inhalt ist genau so einer. Aus demselben Grund
   ist die Hoehe fest und nicht prozentual: eine Prozentangabe loest gegen
   einen Elternknoten auf, der selbst keine Hoehe hat, und das Ergebnis ist
   wieder null.
   -------------------------------------------------------------------------- */

.chart {
  height: 22rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
}

/* Die Heatmap braucht die Hoehe fuer ihre Zeilen, nicht fuer die Kurve. */
.chart--hoch { height: 34rem; }

/* Die Meldung liegt im figure und traegt dessen Rahmen bereits; sie braucht
   nur Abstand und die Warnfarbe. */
.chart__fehler { margin: 0; padding: 0.6rem 0.8rem; color: var(--warn); }

/* --------------------------------------------------------------------------
   RUECKFRAGEN (ANFR-04)

   Gelesen, aber zweifelhaft - die dritte Lage zwischen "belegt" und "nichts
   gefunden". Der Block steht ueber den Feldern und nicht am Feld, weil er das
   Speichern ANHAELT: was aufhaelt, gehoert dorthin, wo man es vor dem Knopf
   sieht.

   Die Farbe kommt aus `rueckfrage.ANLASS_TON` als `data-ton` und liegt an der
   linken Kante - dieselbe Bauform wie `.streifen` in der Liste. Sie traegt die
   Dringlichkeit und nicht den Wissensstand: nur der unbelegte Wert bekommt die
   schwere Farbe, denn bei ihm steht die Frage im Raum, ob er ueberhaupt im
   Dokument stand.
   -------------------------------------------------------------------------- */

.rueckfragen { border-color: var(--warn); }
.rueckfragen .feld {
  border-left: 3px solid var(--warn);
  padding-left: 0.8rem;
  margin-bottom: 1rem;
}
.rueckfragen .feld[data-ton="gefahr"] { border-left-color: var(--gefahr); }
.rueckfragen .frage { margin: 0 0 0.3rem; }
.rueckfragen p { margin: 0 0 0.3rem; }

/* Die beiden Schaltknoepfe nebeneinander und nicht untereinander: sie sind
   EINE Entscheidung mit zwei Ausgaengen, und untereinander saehen sie aus wie
   zwei getrennte Haekchen. */
.rueckfragen label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 1rem;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   DRUCK

   Der Vergabebericht bringt sein eigenes Stylesheet mit (11-09) und ist von
   hier nicht betroffen. Was hier steht, gilt fuer das Ausdrucken einer
   gewoehnlichen Seite: heller Grund, keine Navigation, alle Faecher offen -
   ein zugeklapptes `details` druckt sonst als leere Zeile.
   -------------------------------------------------------------------------- */

@media print {
  .nav, .anker, .knopf--gross, .filter, .meldungen, .sprung { display: none; }
  body { background: #fff; color: #000; }
  .rahmen { display: block; }
  details { display: block; }
  details > *:not(summary) { display: block !important; }
  .abschnitt, .kennzahl, .chart { break-inside: avoid; }
}


/* ==========================================================================
   ANMELDUNG, MELDUNGEN, BEDIENUNG (2026-10-04)

   Nach dem Vergleich mit AI Voice: eine Meldung mit vier Toenen statt
   `.warn` fuer alles, sichtbare Ladezustaende, die Anmeldeseiten als Karte.
   ========================================================================== */

/* Nur fuer Vorlesehilfen. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Sprung zum Inhalt erscheint nur beim Tabulator. */
.sprung {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 60;
  padding: 0.5rem 0.9rem;
  border-radius: var(--rund);
  background: var(--signal);
  color: var(--auf-signal);
  text-decoration: none;
}
.sprung:focus { top: 0.5rem; color: var(--auf-signal); }
main:focus { outline: none; }

/* --- Meldung --- */
.meldung {
  margin: 0 0 1rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--rund) var(--rund) 0;
  background: var(--signal-flaeche);
  color: var(--schrift-1);
}
.meldung p:last-child { margin-bottom: 0; }
/* Eine Meldung mit mehreren Wegen: der Satz, darunter je Weg eine Zeile. */
.meldung p:has(+ ul) { margin-bottom: 0.4rem; }
/* Das Band mit seiner Liste (Vorgang): der Satz im Ton des Bandes, die Punkte
   in Textfarbe - lange Saetze in Bernstein liest niemand gern. */
.warn > p { margin: 0 0 0.4rem; }
.warn > .mangel { margin: 0; color: var(--schrift-1); }
.meldung ul { margin: 0; padding-left: 1.2rem; }
.meldung--fehler { border-left-color: var(--gefahr); background: var(--gefahr-flaeche); color: var(--gefahr); }
.meldung--warn { border-left-color: var(--warn); background: var(--warn-flaeche); color: var(--warn); }
.meldung--ok { border-left-color: var(--ok); background: var(--ok-flaeche); color: var(--ok); }

.meldungen {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(28rem, calc(100vw - 2rem));
}
.meldungen .meldung { margin: 0; box-shadow: var(--schatten-hoch); background: var(--flaeche); }

/* --- Ladezustand (gesetzt von bedienung.js) --- */

[aria-busy="true"] { cursor: progress; }
[aria-busy="true"]::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.45rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -0.1em;
  animation: drehen 0.7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* --- Felder --- */
.feld__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}
.feld__kopf label { margin: 0; white-space: nowrap; }
.feld__nebenlink { font-size: 0.8125rem; }
.feld__hinweis { color: var(--schrift-2); }

.karte {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.karte > h2:first-child { margin-top: 0; }
.formular { max-width: 40rem; }
.formular .feld input { width: 100%; max-width: 28rem; }

/* --- Passwort --- */
.passwortfeld__eingabe { position: relative; max-width: 28rem; }
.passwortfeld__eingabe input { width: 100%; min-width: 0; padding-right: 2.75rem; box-sizing: border-box; }
.passwortfeld__zeigen {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--schrift-2);
}
.passwortfeld__zeigen:hover:not(:disabled) { background: transparent; color: var(--schrift-1); }
.passwortfeld__zeigen[aria-pressed="true"] { color: var(--signal); }
.passwortfeld .feld__kopf { max-width: 28rem; margin-top: 0.85rem; }
.passwortfeld label { font-weight: 600; }

.staerke { max-width: 28rem; margin: 0.5rem 0 1rem; font-size: 0.8125rem; }
.staerke__balken { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; margin-bottom: 0.35rem; }
.staerke__balken span { height: 0.3rem; border-radius: 999px; background: var(--linie-stark); }
.staerke__balken[data-ok="nein"] span[data-an] { background: var(--warn); }
.staerke__balken[data-wert="0"] span[data-an],
.staerke__balken[data-wert="1"] span[data-an] { background: var(--gefahr); }
.staerke__balken[data-ok="ja"] span[data-an] { background: var(--ok); }
.staerke__stufe { margin: 0; color: var(--schrift-2); }
.staerke__hinweise { margin: 0.25rem 0 0; padding-left: 1.1rem; color: var(--schrift-2); }

/* --- Die Anmeldeseiten --- */
.auth { max-width: 26rem; margin: 6vh auto 0; }
.auth__kopf { text-align: center; margin-bottom: 1.5rem; }
.auth__logo { width: 18rem; max-width: 100%; margin: 0 auto 1.5rem; }
.auth__kopf h1 { font-size: 1.5rem; margin: 0 0 0.35rem; }
.auth__satz { margin: 0; color: var(--schrift-2); }
.auth__karte {
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-hoch);
}
.auth__formular .feld { margin: 0 0 1rem; }
.auth__formular .feld input, .auth__formular .passwortfeld__eingabe { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; }
.auth__formular .passwortfeld .feld__kopf, .auth__formular .staerke { max-width: none; }
.auth__formular .knopf--breit { margin-top: 0.5rem; }
.auth__text { color: var(--schrift-2); }
.auth__fuss { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; color: var(--schrift-2); }

/* --- Akzentfarbe im Profil ---
   Der Kreis ist ein eigenes Element mit fester Breite UND Hoehe, `flex: none`
   und `aspect-ratio`: als Knopf selbst wurde er in der Leiste gestaucht und
   oval. Die Benennung steht darunter - die Farbe allein sagt nichts. */
.akzentwahl__felder { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }

.akzentwahl__knopf {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 4.5rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--rund-gross);
  background: none;
  color: var(--schrift-2);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.akzentwahl__knopf:hover { background: var(--flaeche-2); color: var(--schrift-1); }
.akzentwahl__knopf[aria-pressed="true"] { border-color: var(--linie-stark); color: var(--schrift-1); font-weight: 600; }

.akzentwahl__kreis {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a1), var(--a2));
}

.akzentwahl__knopf[aria-pressed="true"] .akzentwahl__kreis {
  box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 5px var(--schrift-1);
}

.akzentwahl__knopf[data-wert="petrol"] { --a1: #2fd8b8; --a2: #13a893; }
.akzentwahl__knopf[data-wert="blau"] { --a1: #4aa3ff; --a2: #2a72e8; }
.akzentwahl__knopf[data-wert="indigo"] { --a1: #8486ff; --a2: #5551ea; }
.akzentwahl__knopf[data-wert="schiefer"] { --a1: #9dbbe0; --a2: #6488b8; }

/* --- Nutzerverwaltung --- */
.einladung__felder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1rem; }
.einladung__felder .feld input, .einladung__felder .feld select { min-width: 14rem; }
.einladung__felder .knopf { margin-bottom: 0.85rem; }
.tasten form { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.linkfeld { width: 100%; box-sizing: border-box; font-family: var(--schrift-fest); font-size: 0.8125rem; }

@media (max-width: 40rem) {
  .container { padding: 1.25rem 1rem 4rem; }
  .auth { margin-top: 2rem; }
  .feld input, .feld select { min-width: 0; width: 100%; }
}

/* --- Feld mit Fehler (Makro `feld`) --- */
.feld__fehler {
  display: block;
  margin-top: 0.3rem;
  color: var(--gefahr);
  font-size: 0.8125rem;
  font-weight: 500;
}
.feld__fehler::before { content: "! "; font-weight: 700; }
.feld--fehler input, .feld--fehler select, .feld--fehler textarea { border-color: var(--gefahr); }

/* Die gedeckten Lieferstellen der Vollmacht: Haekchen nebeneinander, mit
   Luft dazwischen, statt im Standardrahmen des Browsers. */
.feldgruppe.lieferstellen__wahl label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 1.5rem 0.35rem 0;
  font-size: 0.875rem;
}

/* --- Termin zu dritt (TERM-04) --- */
.karte > h3:first-child { margin-top: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.zeilenform { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }
.termin__aktionen { display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap; }

/* ==========================================================================
   HEUTE UND VORGAENGE (Startseite, Board)
   ========================================================================== */

/* Die Dringlichkeit einer Aufgabe: vier Stufen, je Farbe UND Wort (die Achse
   DRINGLICHKEIT). Das Attribut setzt nur zwei Variablen; wer sie liest -
   Plakette, Punkt, Lineal -, nimmt die Farbe von dort. `niedrig` ist der
   Ruhezustand und bekommt keine Signalfarbe. */
[data-dringlichkeit="kritisch"] { --d: var(--gefahr); --d-flaeche: var(--gefahr-flaeche); }
[data-dringlichkeit="hoch"] { --d: var(--warn); --d-flaeche: var(--warn-flaeche); }
[data-dringlichkeit="mittel"] { --d: var(--signal); --d-flaeche: var(--signal-flaeche); }
[data-dringlichkeit="niedrig"] { --d: var(--schrift-2); --d-flaeche: var(--luecke-flaeche); }

.dringlich { background: var(--d-flaeche); color: var(--d); font-weight: 600; }

/* Die eine Handlung je Aufgabe: 44px hoch, damit sie auch am Tablet beim
   Kunden sicher getroffen wird. */
.knopf--tat {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  justify-content: center;
  font-weight: 500;
}

.leer { color: var(--schrift-2); margin: 0 0 1rem; }

/* "x von y" und der Weg zu den uebrigen - unter jeder gekuerzten Liste gleich. */
.weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.875rem; }

/* Die Legende: dieselben vier Woerter wie an den Plaketten. */
.legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; font-size: 0.75rem; color: var(--schrift-2); }
.legende__eintrag { display: inline-flex; align-items: center; gap: 0.4rem; }
.legende__eintrag::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--d); }

/* --- Der Kopf --- */
.heute-kopf { margin: 0 0 1.75rem; }
.heute-kopf__datum { margin: 0 0 0.15rem; color: var(--schrift-2); font-size: 0.875rem; }
.heute-kopf h1 { margin: 0 0 0.35rem; }
.heute-kopf__satz { margin: 0; color: var(--schrift-2); font-size: 1rem; }
.heute-kopf__satz b { color: var(--gefahr); font-weight: 600; }

/* --- Als Naechstes ---
   Die eine Karte, an der man anfaengt. Links was und warum, rechts wann. Die
   Kante links traegt die Dringlichkeit, das Wort steht in der Plakette. */
.naechstes {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 2.25rem;
  border: 1px solid var(--linie);
  border-left: 4px solid var(--d, var(--linie-stark));
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}

.naechstes__haupt {
  flex: 999 1 26rem;
  min-width: 0;
  padding: 1.75rem 1.75rem 1.5rem;
}

.naechstes__marke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  color: var(--schrift-2);
}
.naechstes__marke b { color: var(--schrift-1); font-weight: 600; }

.naechstes h2 { margin: 0 0 0.5rem; font-size: 1.5rem; letter-spacing: -0.01em; max-width: 34ch; }
.naechstes__grund { margin: 0 0 1.25rem; color: var(--schrift-2); max-width: 62ch; }

.naechstes__schritt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--schrift-2);
}
.naechstes__schritt b { color: var(--schrift-1); font-weight: 600; }

.naechstes__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.naechstes__seite {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--flaeche-2);
  border-left: 1px solid var(--linie);
}

.naechstes__seitentitel {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-3);
}

.naechstes__frist { margin: 0 0 1rem; font-size: 0.9375rem; }
.naechstes__frist .faellig { font-size: inherit; }
.naechstes__markt {
  flex: 1 1 100%;
  min-width: 0;
  padding: 1.25rem 1.75rem 1.5rem;
  border-top: 1px solid var(--linie);
}

.naechstes--leer { border-left-color: var(--linie-stark); }
.naechstes--leer h2 { max-width: none; }

/* Das Lineal: die naechsten vierzehn Tage, die Marke an der Frist. Getoent
   ist die Strecke von heute bis zur Frist - die Zeit, die bleibt. */
.lineal {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--d-flaeche) var(--lage), transparent var(--lage)),
    var(--vertiefung);
}
.lineal__marke {
  position: absolute;
  top: 50%;
  left: var(--lage);
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--d);
  box-shadow: 0 0 0 3px var(--flaeche-2);
  transform: translate(-50%, -50%);
}
.lineal__achse {
  display: flex;
  justify-content: space-between;
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--schrift-3);
}

/* --- Die Schrittmarken: sechs kurze Striche, nicht ein Balken --- */
.marken { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.marken__schritt {
  width: 1.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--linie-stark);
}
.marken__schritt[data-stand="erledigt"] { background: var(--ok); }
.marken__schritt[data-stand="jetzt dran"] { background: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-flaeche); }

/* --- Die Frist als Satz --- */
.faellig { font-size: 0.8125rem; color: var(--schrift-2); }
.faellig b { color: var(--d, var(--schrift-1)); font-weight: 600; }
.faellig time { font-family: var(--schrift-fest); font-size: 0.75rem; color: var(--schrift-3); white-space: nowrap; }
.faellig--ohne { color: var(--schrift-3); }

/* --- Die weiteren Aufgaben --- */
.aufgabenliste { margin: 0 0 2.25rem; }
.aufgabenliste .eyebrow { margin-top: 0; }

.aufgabenliste__gruppe {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.5rem 0 0.6rem;
  font-size: 0.9375rem;
}
.aufgabenliste__gruppe span { font-family: var(--schrift-fest); font-size: 0.8125rem; font-weight: 400; color: var(--schrift-3); }

.aufgaben {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.aufgabe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, auto) 12.5rem;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linie);
}
.aufgabe:last-child { border-bottom: 0; }

.aufgabe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.3rem;
}
.aufgabe__kopf b { font-weight: 600; }
.aufgabe__kopf span:last-child { color: var(--schrift-2); font-size: 0.875rem; }
.aufgabe__grund { margin: 0; font-size: 0.875rem; color: var(--schrift-2); }
.aufgabe__grund b { color: var(--schrift-1); font-weight: 500; }
.aufgabe__stand { display: flex; flex-direction: column; gap: 0.5rem; }

/* --- Die Fristleiste: zwei Wochen als zwei Reihen zu sieben Tagen --- */
.fristleiste {
  margin: 0 0 2.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.fristleiste__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}
.fristleiste__kopf h2 { margin: 0; font-size: 1.0625rem; }
.fristleiste .leer { margin: 0; }

.fristleiste__tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}
.fristleiste__tag {
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.5rem 0.6rem 0.6rem;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.fristleiste__tag[data-leer] { background: var(--flaeche-2); }
.fristleiste__datum { display: block; margin-bottom: 0.35rem; font-size: 0.75rem; color: var(--schrift-3); }
.fristleiste__tag[data-heute] .fristleiste__datum { color: var(--signal); font-weight: 600; }
.fristleiste__tag ul { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.fristleiste__tag a {
  display: block;
  padding: 0.3rem 0.45rem 0.3rem 0.6rem;
  border-left: 3px solid var(--d);
  border-radius: 0 var(--rund) var(--rund) 0;
  background: var(--d-flaeche);
  color: var(--schrift-1);
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.fristleiste__tag a:hover { box-shadow: inset 0 0 0 1px var(--d); }
.fristleiste__tag a b { display: block; font-weight: 600; }
.fristleiste__tag a span:not(.nur-vorlesen) {
  display: -webkit-box;
  overflow: hidden;
  color: var(--schrift-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* --- Der Terminmarkt --- */
.markttafel { margin: 0 0 1rem; }
.markttafel__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.marktkachel {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.marktkachel__name { font-size: 0.8125rem; color: var(--schrift-2); }
.marktkachel__wert { font-size: 0.8125rem; color: var(--schrift-2); }
.marktkachel__wert b { font-family: var(--schrift-fest); font-size: 1.5rem; font-weight: 500; color: var(--schrift-1); }
.marktkachel__fuss { font-size: 0.75rem; color: var(--schrift-2); }
.marktkachel__fuss[data-alt] { color: var(--warn); }
.marktkachel__kurve { display: block; width: 100%; height: 3rem; margin-top: 0.5rem; overflow: visible; }
.marktkachel__kurve path { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; }
.marktkachel .leer { margin: 0.25rem 0 0; font-size: 0.875rem; }

/* --- Das Board --- */
.board-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 1.25rem;
}
.board-kopf h1 { margin-bottom: 0.25rem; }
.board-kopf__werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.board-suche { display: flex; gap: 0.5rem; margin: 0; }
.board-suche input {
  min-height: 2.75rem;
  width: 16rem;
  max-width: 100%;
  padding: 0 0.85rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  background: var(--feld);
  color: var(--schrift-1);
  font: inherit;
  font-size: 0.875rem;
}

.segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: calc(var(--rund) + 3px);
  background: var(--vertiefung);
}
.segment a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border-radius: var(--rund);
  color: var(--schrift-2);
  font-size: 0.84375rem;
  text-decoration: none;
}
.segment a:hover { color: var(--schrift-1); }
.segment a[aria-current="page"] {
  background: var(--flaeche);
  color: var(--schrift-1);
  font-weight: 600;
  box-shadow: var(--schatten);
}

.legende + .board { margin-top: 0.75rem; }

/* Sechs Spalten in einem eigenen Rollkasten: passt es nicht, rollt das
   Board, nicht die Seite. */
.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(10.25rem, 1fr));
  align-items: start;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin: 0 0 2rem;
  scroll-snap-type: x proximity;
}
.board:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.board__spalte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: var(--rund-gross);
  background: var(--vertiefung);
  scroll-snap-align: start;
  scroll-margin-top: 1rem;
}
.board__spalte:target { box-shadow: 0 0 0 2px var(--akzent); }
.lgstelle { scroll-margin-top: 1rem; }
.lgstelle:target { box-shadow: 0 0 0 2px var(--akzent); }

.board__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.5rem;
  padding: 0.15rem 0.2rem 0.35rem;
}
.board__nummer {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--signal);
  color: var(--auf-signal);
  font-size: 0.75rem;
  font-weight: 600;
}
.board__kopf h2 { margin: 0; font-size: 0.875rem; }
.board__anzahl { font-family: var(--schrift-fest); font-size: 0.8125rem; color: var(--schrift-2); }
.board__ziel { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--schrift-2); }
.board__leer { margin: 0; padding: 0.75rem 0.25rem; font-size: 0.8125rem; color: var(--schrift-3); }

.vkarte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--d);
  border-radius: var(--rund);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.vkarte__kunde { margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.vkarte__kunde a { color: var(--schrift-1); text-decoration: none; }
.vkarte__kunde a:hover { color: var(--signal); text-decoration: underline; }
.vkarte__name { margin: 0; font-size: 0.8125rem; color: var(--schrift-2); }
.vkarte__stand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0.2rem 0 0; }
.vkarte__stand .faellig { font-size: 0.75rem; }
.vkarte__grund {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--schrift-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.vkarte .knopf { margin-top: 0.4rem; white-space: normal; text-align: center; }

.board-fertig h2 { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1.0625rem; }
.board-fertig h2 span { font-family: var(--schrift-fest); font-size: 0.875rem; font-weight: 400; color: var(--schrift-3); }
.board-fertig ul { margin: 0; padding: 0; list-style: none; }
.board-fertig li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.board-fertig li:last-child { border-bottom: 0; }
.board-fertig li a { font-weight: 600; }
.board-fertig li span { color: var(--schrift-2); font-size: 0.875rem; }

.leer-karte { max-width: 40rem; }
.leer-karte h2 { margin-top: 0; }

/* --- Schmal ---
   Die Aufgabe stapelt sich, die Fristleiste wird zur Liste der Tage, an
   denen etwas ansteht. */
@media (max-width: 62rem) {
  .aufgabe { grid-template-columns: minmax(0, 1fr); }
  .aufgabe .knopf { justify-self: start; }
  .naechstes__seite { border-left: 0; border-top: 1px solid var(--linie); }
}

@media (max-width: 48rem) {
  .fristleiste__tage { grid-template-columns: minmax(0, 1fr); }
  .fristleiste__tag { min-height: 0; }
  .fristleiste__tag[data-leer] { display: none; }
  .naechstes__haupt, .naechstes__seite { padding: 1.25rem; }
  .naechstes h2 { font-size: 1.25rem; }
  .board-suche { flex: 1 1 100%; }
  .board-suche input { flex: 1 1 auto; width: auto; }
  .aufgabe .knopf, .naechstes__knoepfe .knopf { flex: 1 1 100%; justify-self: stretch; }
}

/* ENDE HEUTE UND VORGAENGE */

/* ==========================================================================
   LASTGANG: SPITZEN
   ========================================================================== */

/* Die Zahlen, die ins Angebot gehen. Die Jahresspitze ist DIE hervorgehobene
   Zahl der Seite (--hervorhebung) - als Kachel, als Balken und als Zeile 1 der
   Rangfolge. Sie traegt dabei immer auch ihr Wort: "Jahreshoechstleistung",
   die beschriftete Linie "Jahresspitze", der vorgelesene Zusatz am Balken.
   Zahlen stehen in Plex Mono, damit 114,3 und 111,8 untereinander fluchten. */
.spitzen { margin: 0 0 2rem; }
.spitzen__titel { margin-top: 0.5rem; }

.spitzen__kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.spitzen__kachel {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
}
.spitzen__kachel--jahr {
  border: 2px solid var(--hervorhebung);
  background: var(--hervorhebung-flaeche);
}
.spitzen__name { font-size: 0.75rem; font-weight: 600; color: var(--schrift-2); }
.spitzen__wert {
  font-family: var(--schrift-fest);
  font-size: 1.4rem;
  white-space: nowrap;
  line-height: 1.2;
  color: var(--schrift-1);
  font-variant-numeric: tabular-nums;
}
.spitzen__wert small { font-size: 0.85rem; }
.spitzen__kachel--jahr .spitzen__wert { font-size: 1.6rem; font-weight: 500; }
.spitzen__hinweis { font-size: 0.75rem; color: var(--schrift-2); }
.spitzen__kachel--jahr .spitzen__hinweis { color: var(--schrift-1); font-weight: 600; }

.spitzen__abgleich {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
}
.spitzen__abgleich .zahl { font-family: var(--schrift-fest); font-weight: 500; }

.spitzen__raster { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-bottom: 1rem; }
.spitzen__monate { flex: 999 1 30rem; min-width: 0; margin: 0; }
.spitzen__rang { flex: 1 1 20rem; min-width: 0; }
.spitzen__monate figcaption, .spitzen__rang > strong { display: block; margin-bottom: 0.25rem; }
.spitzen__monate figcaption .muted { display: block; font-size: 0.75rem; }
.spitzen__rang .muted { margin: 0 0 0.4rem; font-size: 0.75rem; }

/* Die Flaeche: oben Platz fuer die Zahl ueber dem hoechsten Balken, die
   gestrichelte Linie liegt genau auf 100 % - der Hoehe der Jahresspitze. */
.spitzen__flaeche {
  position: relative;
  height: 15rem;
  margin-top: 0.75rem;
  padding-top: 1.6rem;
}
.spitzen__linie {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.6rem;
  border-top: 1.5px dashed var(--hervorhebung);
}
/* Die Linie traegt ihr Wort in der Legende und nicht auf der Flaeche: dort
   laege es ueber der Zahl des Monats, der die Spitze hat. */
.spitzen__legende {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hervorhebung-schrift);
}
.spitzen__legende::before {
  content: "";
  width: 1.5rem;
  border-top: 1.5px dashed var(--hervorhebung);
}
.spitzen__balken {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.25rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
  border-bottom: 1px solid var(--linie-stark);
}
.spitzen__balken li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.spitzen__zahl {
  margin-bottom: 0.2rem;
  font-family: var(--schrift-fest);
  /* "1.207,0" muss ueber einen Balken von 1/12 der Breite passen. */
  font-size: clamp(0.5625rem, 1.5cqi, 0.6875rem);
  white-space: nowrap;
  color: var(--schrift-2);
}
.spitzen__saeule {
  width: 100%;
  min-height: 1px;
  border-radius: 3px 3px 0 0;
  background: var(--signal);
}
.spitzen__monat {
  position: absolute;
  bottom: -1.4rem;
  font-size: 0.6875rem;
  color: var(--schrift-2);
}
.spitzen__monat--hoechste .spitzen__saeule { background: var(--hervorhebung); }
.spitzen__monat--hoechste .spitzen__zahl { font-weight: 600; color: var(--hervorhebung-schrift); }
.spitzen__monat--hoechste .spitzen__monat { font-weight: 600; color: var(--schrift-1); }
.spitzen__monate { padding-bottom: 1.4rem; }

.spitzen__rang td.zahl { font-family: var(--schrift-fest); }
.spitzen__erste td { background: var(--hervorhebung-flaeche); font-weight: 600; }
.spitzen__erste td.zahl { color: var(--hervorhebung-schrift); }

@media (max-width: 40rem) {
  .spitzen__zahl { font-size: 0.5625rem; writing-mode: vertical-rl; transform: rotate(180deg); }
  .spitzen__flaeche { padding-top: 2.6rem; }
  .spitzen__linie { top: 2.6rem; }
}

/* ENDE LASTGANG: SPITZEN */

/* ==========================================================================
   ANGEBOTE GEGEN DEN MARKT
   ========================================================================== */

/* Der Baustein steht als Karte, wo er allein steht (Vorgang, Startseite), und
   ohne eigenen Rahmen im Cockpitfach, das schon einen hat. Die Balken beginnen
   bei null (Begruendung in routers/marktvergleich.py); die Zahl daneben ist die
   Auskunft, der Balken die Groessenordnung. */
.marktvergleich {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
}
.abschnitt > .marktvergleich,
.naechstes__markt > .marktvergleich { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.marktvergleich > h2 { margin: 0; font-size: 1rem; }
.marktvergleich__einheit { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--schrift-3); }
.marktvergleich__liste {
  display: grid;
  gap: 0.625rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}
.marktvergleich__zeile {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(6rem, 1fr) 8.5rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--schrift-2);
}
.marktvergleich__zeile--bester { font-weight: 700; color: var(--schrift-1); }
.marktvergleich__name { overflow-wrap: anywhere; }
.marktvergleich__marke {
  margin-left: 0.25rem;
  padding: 0 0.375rem;
  border: 1px solid var(--signal);
  border-radius: var(--rund);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--signal);
}
.marktvergleich__marke--proxy { border-color: var(--warn); color: var(--warn); }
.marktvergleich__spur {
  position: relative;
  height: 1.375rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--flaeche);
}
.marktvergleich__balken {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--linie-stark);
}
.marktvergleich__zeile--bester .marktvergleich__balken { background: var(--signal); }
.marktvergleich__strich {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  background: var(--hervorhebung);
}
.marktvergleich__wert,
.marktvergleich__zahl {
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
}
.marktvergleich__wert { text-align: right; white-space: nowrap; }
.marktvergleich__grund { grid-column: 2 / -1; font-size: 0.8125rem; }
/* Der Wert steht am rechten Rand: sein Hovertext haengt rechtsbuendig, sonst
   ragt er aus dem Fenster. */
.marktvergleich__wert[data-tipp]::after { left: auto; right: 0; transform: none; }
.marktvergleich__abstand { margin-left: 0.5rem; font-size: 0.8125rem; color: var(--schrift-3); }
.marktvergleich__legende { margin: 0.875rem 0 0; font-size: 0.8125rem; color: var(--schrift-2); }
.marktvergleich__legende .marktvergleich__zahl { color: var(--hervorhebung-schrift); }
.marktvergleich__legendenstrich {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  vertical-align: middle;
  background: var(--hervorhebung);
}

@media (max-width: 40rem) {
  .marktvergleich { padding: 1rem; }
  .marktvergleich__zeile { grid-template-columns: 1fr auto; }
  .marktvergleich__spur,
  .marktvergleich__grund { grid-column: 1 / -1; grid-row: 2; }
}

@media print {
  .marktvergleich__balken,
  .marktvergleich__strich,
  .marktvergleich__legendenstrich {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ENDE ANGEBOTE GEGEN DEN MARKT */

/* ==========================================================================
   SCHNELLSTART (2026-10-18)

   Nutzerentscheidung: "A als Standard, C ab drei Lieferstellen". A ist ein
   Blatt aus Karten mit einer Prueffliste daneben, C dieselben Bloecke als
   Tabellenzeilen. Beides ist EIN Lieferstellenblock
   (`_fragments/schnellstelle.html`) - die Werte werden ueber ihre Reihenfolge
   zusammengefuehrt, und zwei Fassungen eines Blocks waeren zwei Reihenfolgen.
   Die Tabelle schaltet die Klasse `schnellstart--tabelle` am Formular.

   Die Knoepfe, die nur ein Feld setzen (Umschalter, Schnellwahl, Karten),
   brauchen Skript und sind ohne `[data-js]` verborgen; die Felder dahinter
   stehen dann offen da. Was fehlt, markiert Orange (`--hervorhebung`), nicht
   Rot: eine noch nicht eingetragene Angabe ist ein offener Punkt und kein
   Fehler. Rot bleibt der Meldung des Servers am Feld.
   ========================================================================== */

.schnellstart__kopf { margin-bottom: 1.75rem; }
.schnellstart__kopf h1 { margin: 0 0 0.4rem; }
.schnellstart__marke {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}
.schnellstart__satz { margin: 0; max-width: 70ch; color: var(--schrift-2); }

.schnellstart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.75rem;
  align-items: start;
}
.schnellstart__blatt { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* Die Karte: Kunde oben, je Lieferstelle eine darunter. */
.schnellkarte,
.schnellstelle,
.pruefung {
  padding: 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.schnellkarte__titel { margin: 0 0 1rem; font-size: 1.0625rem; }
.schnellkarte__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.25rem;
}

/* --- Felder ------------------------------------------------------------- */

.schnellstelle__feld { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; margin: 0; }
.schnellstelle__feld label { margin: 0; font-size: 0.875rem; }
.schnellstelle__feld input,
.schnellstelle__feld select { width: 100%; min-width: 0; min-height: 2.75rem; }
.schnellstelle__feld .meldung { margin: 0.25rem 0 0; font-size: 0.875rem; }
.schnellstelle__hilfe { display: block; margin: 0; font-size: 0.8125rem; color: var(--schrift-2); }
.schnellstelle__fest { font-family: var(--schrift-fest); letter-spacing: 0.02em; }

/* Die vier Angaben der Rechnung stehen groesser als alles andere. */
.schnellstelle__feld--gross input { min-height: 3rem; font-family: var(--schrift-fest); font-size: 1.0625rem; }

/* Die Einheit haengt am Feld und nicht in der Beschriftung: wer "1200" tippt,
   sieht im selben Blick, ob kWh oder kW gemeint ist. */
.einheit {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  background: var(--feld);
  overflow: hidden;
}
.einheit:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-flaeche); }
.einheit input,
.einheit input:focus { flex: 1 1 auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.einheit__wort {
  display: grid;
  place-items: center;
  padding: 0 0.85rem;
  border-left: 1px solid var(--linie);
  background: var(--flaeche-2);
  color: var(--schrift-2);
  font-size: 0.875rem;
}

/* Was fehlt - erst nachdem das Feld einmal verlassen wurde (schnellstart.js). */
.schnellstart [data-fehlt],
.einheit:has(> [data-fehlt]) {
  border-color: var(--hervorhebung);
  box-shadow: 0 0 0 1px var(--hervorhebung);
  background: var(--hervorhebung-flaeche);
}
.einheit > [data-fehlt] { border: 0; box-shadow: none; background: transparent; }

/* --- Knoepfe, die ein Feld setzen -------------------------------------- */

.schnellstart:not([data-js]) :is(.umschalter, .termine, .ebenenwahl, .betriebsarten) { display: none; }
.schnellstart[data-js] .schnellstelle__artwahl { display: none; }

/* Ein verborgenes Fach schickt seine Felder weiter mit; `display: flex` am
   Feld schlaegt sonst das `hidden` des Browsers. */
.schnellstart [hidden] { display: none; }

.termine,
.ebenenwahl { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.termine button { min-height: 2.75rem; padding: 0 0.65rem; border-radius: 999px; font-size: 0.8125rem; }
.ebenenwahl button { flex: 1 1 8rem; min-height: 2.75rem; }
.termine button[aria-pressed="true"],
.ebenenwahl button[aria-pressed="true"] {
  border-color: var(--signal);
  background: var(--signal-flaeche);
  color: var(--signal-tief);
  font-weight: 600;
}

/* Der Umschalter zwischen zwei Wegen zu derselben Angabe. */
.umschalter { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rund); background: var(--vertiefung); }
.umschalter button {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: calc(var(--rund) - 2px);
  background: transparent;
  color: var(--schrift-2);
  font-size: 0.84375rem;
}
.umschalter button[aria-pressed="true"] {
  background: var(--flaeche);
  color: var(--schrift-1);
  font-weight: 600;
  box-shadow: var(--schatten-hoch);
}

/* Die Betriebsarten als Karten - mit der Spitze, die aus ihnen folgt. */
.betriebsarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.betriebsart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.75rem;
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  text-align: left;
}
.betriebsart[aria-pressed="true"] {
  border-color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--signal);
  background: var(--signal-flaeche);
}
.betriebsart__name { font-weight: 600; color: var(--schrift-1); }
.betriebsart__satz { font-size: 0.78125rem; line-height: 1.35; color: var(--schrift-2); }
.betriebsart__kw { margin-top: 0.35rem; font-family: var(--schrift-fest); font-size: 0.8125rem; color: var(--signal-tief); }
.schnellstelle__vorbehalt { margin: 0.25rem 0 0; font-size: 0.8125rem; }

/* --- Der Lieferstellenblock als Karte --------------------------------- */

.schnellstart__stellen { display: flex; flex-direction: column; gap: 1.25rem; counter-reset: stelle; }
.schnellstelle {
  counter-increment: stelle;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.schnellstelle > :not(.schnellstelle__feld) { grid-column: 1 / -1; }
.schnellstelle > [data-feld="supply_voltage"] { grid-column: 1 / -1; }

.schnellstelle__kopf { display: flex; align-items: center; gap: 0.75rem; }
.schnellstelle__nr {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--signal);
  color: var(--auf-signal);
  font-size: 0.8125rem;
  font-weight: 600;
}
.schnellstelle__nr::before { content: counter(stelle); }
.schnellstelle__titel { margin: 0; font-size: 1.0625rem; }
.schnellstelle__titel [data-titel]:not(:empty)::before { content: "· "; color: var(--schrift-3); }
.schnellstelle__bereit {
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--ok-flaeche);
  color: var(--ok);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.schnellstelle__bereit[data-offen="ja"] { background: var(--warn-flaeche); color: var(--warn); }

.schnellstelle__weg { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.schnellstelle__wegkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.schnellstelle__wegname { font-weight: 600; }
.schnellstelle__weg [data-feld="peak_power_kw"] { max-width: 20rem; }
.schnellstelle__merken { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.schnellstelle__artwahl { display: flex; flex-direction: column; gap: 0.35rem; }

/* Die vier Zustimmungen: eine Zeile zum Abnicken, die Felder dahinter. */
.schnellstelle__vorbelegt { padding-top: 1rem; border-top: 1px solid var(--linie); }
.schnellstelle__vorbelegt > summary {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-height: 2.75rem;
  padding-right: 2rem;
  list-style: none;
  cursor: pointer;
}
.schnellstelle__vorbelegt > summary::-webkit-details-marker { display: none; }
.schnellstelle__vorbelegt > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.3rem;
  border-right: 2px solid var(--schrift-3);
  border-bottom: 2px solid var(--schrift-3);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.schnellstelle__vorbelegt[open] > summary::after { transform: rotate(-135deg); }
.schnellstelle__vorbelegt > summary:hover .schnellstelle__vorbelegt-titel { color: var(--signal); }
.schnellstelle__vorbelegt-titel { font-weight: 600; }
.schnellstelle__vorbelegt-zeile { font-size: 0.8125rem; color: var(--schrift-2); }
.schnellstelle__vorbelegt-zeile b { font-weight: 600; color: var(--schrift-1); }
.schnellstelle__zustimmungen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}

.schnellstart__weitere {
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px dashed var(--signal);
  background: var(--flaeche);
  color: var(--signal);
  font-weight: 600;
}

/* --- Die Prueffliste ---------------------------------------------------- */

.pruefung { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; }
.pruefung__kopf { display: flex; justify-content: space-between; align-items: baseline; }
.pruefung__titel { margin: 0; font-size: 1rem; }
.pruefung__zahl { font-family: var(--schrift-fest); font-weight: 500; }
.pruefung__balken { display: flex; gap: 4px; }
.pruefung__balken:empty { display: none; }
.pruefung__balken span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--linie); }
.pruefung__balken span[data-ok="ja"] { background: var(--signal); }
.pruefung__liste ul { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.pruefung__gruppe + .pruefung__gruppe { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.pruefung__stelle { margin: 0 0 0.6rem; font-size: 0.875rem; }
.pruefung__liste li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; line-height: 1.4; }
.pruefung__liste li b { display: block; font-weight: 600; }
.pruefung__wert { display: block; font-size: 0.8125rem; color: var(--schrift-2); overflow-wrap: anywhere; }
.pruefung__liste li[data-ok="nein"] .pruefung__wert { color: var(--warn); }

/* Haken und Ausrufezeichen gezeichnet, nicht als Zeichen: der Haken liegt
   ausserhalb des Zeichenvorrats der Hausschrift. */
.pruefung__zeichen {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--ok-flaeche);
  color: var(--ok);
  font-size: 0.75rem;
  font-weight: 700;
}
.pruefung__zeichen::before {
  content: "";
  width: 0.3rem;
  height: 0.55rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
li[data-ok="nein"] > .pruefung__zeichen { background: var(--warn-flaeche); color: var(--warn); }
li[data-ok="nein"] > .pruefung__zeichen::before { content: "!"; width: auto; height: auto; border: 0; transform: none; }

.pruefung__summe { margin: 0; font-size: 0.9375rem; }
.pruefung__summe:empty { display: none; }
.pruefung__knopf { justify-content: center; width: 100%; min-height: 3.25rem; font-size: 1rem; font-weight: 600; }
/* Nicht rechenbereit heisst nicht gesperrt: der Server sagt am Feld, was
   fehlt. Der Knopf tritt nur zurueck. */
.pruefung__knopf[data-bereit="nein"] { border-color: var(--signal); background: var(--flaeche); color: var(--signal); }
.pruefung__knopf[data-bereit="nein"]:hover { background: var(--signal-flaeche); }
.pruefung__danach { margin: 0; font-size: 0.8125rem; color: var(--schrift-2); }

/* Nur in der Tabelle. */
.schnellstart__gemeinsam,
.schnellstart__spalten { display: none; }

/* --- Ab drei Lieferstellen: die Tabelle --------------------------------- */

.schnellstart--tabelle { grid-template-columns: minmax(0, 1fr); }
.schnellstart--tabelle .schnellstart__gemeinsam {
  display: block;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche-2);
  font-size: 0.875rem;
  color: var(--schrift-2);
}
.schnellstart--tabelle .schnellstart__gemeinsam strong { color: var(--schrift-1); }

.schnellstart--tabelle .schnellstart__tabelle {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.schnellstart--tabelle .schnellstart__spalten,
.schnellstart--tabelle .schnellstelle {
  display: grid;
  grid-template-columns: 2rem minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(15rem, 1.6fr) minmax(11rem, 1.2fr) minmax(10rem, 1fr) 6.5rem;
  gap: 0.4rem 0.75rem;
  min-width: 68rem;
  padding: 0.65rem 1rem;
}
.schnellstart--tabelle .schnellstart__spalten {
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--schrift-2);
}

.schnellstart--tabelle .schnellstart__stellen { gap: 0; }
.schnellstart--tabelle .schnellstelle {
  align-items: start;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.schnellstart--tabelle .schnellstelle + .schnellstelle { border-top: 1px solid var(--linie); }
.schnellstart--tabelle .schnellstelle > * { grid-row: 1; }
.schnellstart--tabelle .schnellstelle__kopf { display: contents; }
.schnellstart--tabelle .schnellstelle__nr {
  grid-column: 1;
  width: auto;
  height: 2.5rem;
  background: none;
  color: var(--schrift-3);
  font-family: var(--schrift-fest);
}
.schnellstart--tabelle .schnellstelle__titel { display: none; }
.schnellstart--tabelle [data-feld="site_name"] { grid-column: 2; }
.schnellstart--tabelle [data-feld="annual_energy_kwh"] { grid-column: 3; }
.schnellstart--tabelle .schnellstelle__weg--netz { grid-column: 4; }
.schnellstart--tabelle .schnellstelle__weg--spitze { grid-column: 5; }
.schnellstart--tabelle .schnellstelle > [data-feld="supply_voltage"] { grid-column: 6; }
.schnellstart--tabelle .schnellstelle__bereit { grid-column: 7; justify-self: start; margin: 0.5rem 0 0; }

/* Je Zelle nur das Feld: Beschriftung steht im Kopf, die Hilfe einmal oben. */
.schnellstart--tabelle .schnellstelle__weg { gap: 0.4rem; padding: 0; border: 0; }
.schnellstart--tabelle :is(.schnellstelle__wegkopf, .einheit__wort, .betriebsarten, .ebenenwahl, .schnellstelle__vorbehalt, .schnellstelle__merken) { display: none; }
.schnellstart--tabelle .schnellstelle [data-fach][hidden],
.schnellstart--tabelle[data-js] .schnellstelle__artwahl { display: flex; }
/* Ein Platzhalter in Festschrift liest sich in einer Zeile wie ein Wert. */
.schnellstart--tabelle .schnellstelle > .schnellstelle__feld:not([data-feld="site_name"]) ::placeholder,
.schnellstart--tabelle .schnellstelle__weg ::placeholder { color: transparent; }
.schnellstart--tabelle .schnellstelle .schnellstelle__hilfe:not(.schnellstelle__vorbelegt *, [data-netzgebiet]) { display: none; }
.schnellstart--tabelle .schnellstelle label:not(.schnellstelle__vorbelegt label) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.schnellstart--tabelle .schnellstelle__feld input,
.schnellstart--tabelle .schnellstelle__feld select { min-height: 2.5rem; font-size: 0.875rem; }
.schnellstart--tabelle .schnellstelle__feld--gross input { font-size: 0.875rem; }
.schnellstart--tabelle .schnellstelle__feld .meldung { padding: 0.4rem 0.6rem; font-size: 0.78125rem; }
.schnellstart--tabelle .schnellstelle__weg [data-feld="peak_power_kw"] { max-width: none; }

/* Die Zustimmungen gelten oben fuer alle; nur ein Fach mit Fehler (der Server
   oeffnet es) steht in seiner Zeile. */
.schnellstart--tabelle .schnellstelle__vorbelegt:not([open]) { display: none; }
.schnellstart--tabelle .schnellstelle__vorbelegt { grid-column: 1 / -1; grid-row: 2; }

/* Die Prueffliste wird zur Leiste am unteren Rand. */
.schnellstart--tabelle .pruefung {
  position: sticky;
  top: auto;
  bottom: 0;
  z-index: 2;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  box-shadow: var(--schatten-hoch);
}
.schnellstart--tabelle :is(.pruefung__kopf, .pruefung__balken, .pruefung__liste, .pruefung__danach) { display: none; }
.schnellstart--tabelle .pruefung__knopf { width: auto; padding: 0 2rem; }

/* --- Schmal ------------------------------------------------------------- */

@media (max-width: 80rem) {
  .schnellstart { grid-template-columns: minmax(0, 1fr); }
  .pruefung { position: static; }
}

@media (max-width: 40rem) {
  .schnellkarte,
  .schnellstelle:not(.schnellstart--tabelle *) { padding: 1rem; }
  .schnellstelle { grid-template-columns: minmax(0, 1fr); }
  .umschalter { display: flex; width: 100%; }
  .umschalter button { flex: 1 1 0; padding: 0 0.5rem; }
}

/* ENDE SCHNELLSTART */

/* --------------------------------------------------------------------------
   DER DATENSTAND EINES LIEFERJAHRES (Netzkosten, 2026-10-22)

   Der Trichter ist eine Reihe von Kacheln mit Balken: jede Zahl zaehlt, wer
   MINDESTENS so weit ist, der Balken zeigt den Anteil an allen
   Netzbetreibern. Jede Kachel ist zugleich der Filter der Tabelle darunter.
   -------------------------------------------------------------------------- */

.datenstand { margin: 0 0 2rem; }

.trichter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.trichter__stufe {
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
}

.trichter__stufe:hover { border-color: var(--linie-stark); }
.trichter__stufe--an { border-color: var(--signal); }

.trichter__stufe a {
  display: block;
  padding: 0.7rem 0.9rem;
  color: inherit;
  text-decoration: none;
}

.trichter__name {
  display: block;
  color: var(--schrift-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.trichter__wert {
  display: block;
  font-family: var(--schrift-fest);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  line-height: 1.3;
}

.trichter__balken {
  display: block;
  height: 0.3rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}

.trichter__balken > span { display: block; height: 100%; background: var(--signal); }

.datenstand__satz { margin: 0 0 1rem; font-size: 0.875rem; color: var(--schrift-2); }

.datenstand__lauf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
}

.datenstand__lauf input[type="number"] { width: 5.5rem; }
.datenstand__einordnung { margin: 0.4rem 0 1rem; max-width: 46rem; font-size: 0.8125rem; }

.datenstand__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.8125rem;
}

.datenstand__filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0.75rem; }
.datenstand__tabelle { width: 100%; }
.datenstand__tabelle td { vertical-align: top; }
.datenstand__tabelle form { margin: 0; }
.datenstand__grund { display: block; color: var(--schrift-2); }
.datenstand__url { display: block; font-size: 0.75rem; word-break: break-all; }

.stufe { white-space: nowrap; font-size: 0.8125rem; }
.stufe--in_db { color: var(--ok); }
.stufe--zweifel, .stufe--vorschlag, .stufe--abruf_gescheitert { color: var(--warn); }
.stufe--offen, .stufe--nicht_gefunden { color: var(--schrift-3); }

@media (max-width: 40rem) {
  .datenstand__tabelle thead { display: none; }
  .datenstand__tabelle tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--linie); }
  .datenstand__tabelle td { display: block; padding: 0.1rem 0; }
}