/* ===========================================================================
   Erhebungsbogen Regionalverbandsbeitrag — Stilvorlage
   ---------------------------------------------------------------------------
   Nüchtern und ruhig. Der Weißraum entsteht durch Weglassen, nicht durch
   größere Abstände: keine Karten, keine Schatten, keine Badges. Wo früher ein
   Kasten stand, steht jetzt eine Überschrift und darunter Inhalt. Das ist
   zugleich der Hebel gegen das Scrollen — die Seiten werden kürzer, obwohl die
   Schrift größer wird.

   Vom Corporate Design bleibt das Verbandsblau #1c388f, und zwar nur an drei
   Stellen: Kopfzeile, Verweise, Absendeknopf. Lila trägt den Fehlerkanal,
   Grün-Gelb die Warnung — beide nur dort, wo sie Bedeutung tragen.

   Aufbau
     1  Farben und Maße
     2  Grundlagen, Fokus, Hilfsklassen
     3  Seitengerüst: Kopf, Bahn, Fuß
     4  Text und Überschriften
     5  Meldungen
     6  Ablaufanzeige
     7  Formular: Felder und Knöpfe
     8  Block A: Positionsraster
     9  Leseansicht: Prüfen und Quittung
    10  Rücklaufliste
    11  Fehlerseite
    12  Schmale Fenster
    13  Druck
    14  Kontrastmodus
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1  Farben und Maße

   Es gibt eine helle und eine dunkle Palette, keine dritte Fassung für einen
   Umschalter: die Anwendung hat keinen. Deshalb steht die dunkle Palette
   genau einmal da, in der Medienabfrage.
   --------------------------------------------------------------------------- */

:root {
  /* Flächen und Linien */
  --grund: #ffffff;
  --flaeche-leise: #f6f7f9;
  --linie: #e3e5ea;
  /* Begrenzung von Eingabefeldern und Nebenschaltflaechen. Sie ist deren
     einzige Kontur -- das Feld hat denselben Hintergrund wie die Seite --
     und faellt damit unter WCAG 1.4.11 (Nicht-Text-Kontrast, 3:1).
     Nachgerechnet gegen --grund: 3,50:1. Der zuvor hier stehende Wert
     #b9bdc9 kam auf 1,88:1; an einem aelteren Bildschirm war das Feld
     nicht als Feld zu erkennen. */
  --linie-stark: #82899b;

  /* Text */
  --text: #14161c;
  --text-leise: #5a6070;

  /* Akzent — Verbandsblau */
  --akzent: #1c388f;
  --akzent-dunkel: #142a6d;
  --akzent-flaeche: #eef1f8;
  --auf-akzent: #ffffff;

  /* Bedeutungsträger. Fläche nur dort, wo eine Meldung sich abheben muss. */
  --fehler: #5d2082;
  --fehler-flaeche: #f5eff8;
  --warn: #5c6200;
  --warn-flaeche: #f8f9e8;
  --gut: #2f6b1f;

  /* Fokus. Dunkles Blau statt des früheren Türkis — das lag bei 3,0:1 auf
     der Kante von WCAG 1.4.11. Nachgerechnet gegen --grund: 10,44:1.
     (Hier stand zuvor 8,6:1; der Wert liess sich gegen keines der Token
     dieser Datei reproduzieren.)

     Achtung: Diese Farbe ist im Hellmodus dieselbe wie --akzent. Auf den
     gefuellten Schaltflaechen laege der Fokusrahmen damit blau auf blau --
     dort gilt deshalb eine eigene Regel mit zwei Ringen, siehe
     .knopf-haupt:focus-visible. */
  --fokus: #1c388f;

  /* Schrift */
  --schrift: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --schrift-fest: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* Abstandsskala. Sieben Werte für die ganze Datei — früher waren es rund
     zweihundert einzeln gewählte Literale. */
  --ab-1: 0.25rem;
  --ab-2: 0.5rem;
  --ab-3: 0.75rem;
  --ab-4: 1.25rem;
  --ab-5: 2rem;
  --ab-6: 3rem;
  --ab-7: 4.5rem;

  --bahn: 68rem;
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12141a;
    --flaeche-leise: #1a1d25;
    --linie: #2b2f3a;
    /* Nachgerechnet gegen --grund #12141a: 3,46:1. Zuvor #464c5c mit
       2,15:1. */
    --linie-stark: #646b7e;

    --text: #eceef3;
    --text-leise: #a8aebd;

    --akzent: #a8b8e8;
    --akzent-dunkel: #c3cef0;
    --akzent-flaeche: #1b2136;
    --auf-akzent: #0b1024;

    --fehler: #d4a8ee;
    --fehler-flaeche: #241a2c;
    --warn: #c7d300;
    --warn-flaeche: #23260d;
    --gut: #8fd07a;

    --fokus: #c7d300;
  }
}

/* ---------------------------------------------------------------------------
   2  Grundlagen, Fokus, Hilfsklassen
   --------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-underline-offset: 0.15em;
}

/* Beträge und Kennziffern stehen untereinander und müssen sich vergleichen
   lassen — dafür Ziffern gleicher Laufweite. */
.zahl,
.betrag-feld,
.posten-wert,
.summe-wert,
.liste .zahl,
.hexwert {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a {
  color: var(--akzent);
}

a:hover {
  color: var(--akzent-dunkel);
}

/* Das Fokusmuster aus dem Bestand — es war dort schon richtig gebaut: erst
   der Rückfall für Browser ohne :focus-visible, dann die Rücknahme, dann die
   eigentliche Regel. */
:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

::selection {
  background: var(--akzent-flaeche);
}

.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: var(--ab-3);
  top: -4rem;
  z-index: 10;
  padding: var(--ab-2) var(--ab-4);
  background: var(--grund);
  color: var(--akzent);
  border: 2px solid var(--akzent);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.sprungmarke:focus {
  top: var(--ab-3);
}

.nur-mit-js {
  display: none;
}

.mit-js .nur-mit-js {
  display: block;
}

/* .mit-js .nur-mit-js (0,2,0) schlägt .knopfreihe (0,1,0) — ohne diese Zeile
   verlöre die Druckknopf-Reihe ihr Flex-Layout. */
.mit-js .knopfreihe.nur-mit-js {
  display: flex;
}

.klein {
  font-size: 0.875rem;
  color: var(--text-leise);
}

.leerwert {
  color: var(--text-leise);
  font-style: italic;
}

.hexwert {
  font-family: var(--schrift-fest);
  font-size: 0.8125rem;
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
   3  Seitengerüst

   Die Kopfzeile ist die einzige durchgefärbte Fläche der Anwendung. Sie trägt
   den Absender; alles darunter steht auf Weiß.
   --------------------------------------------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--ab-4);
}

.kopf {
  background: var(--akzent);
  color: var(--auf-akzent);
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2) var(--ab-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--ab-3);
}

.kopf-marke {
  margin: 0;
  display: flex;
  align-items: center;
}

/* Der Kopfbalken ist im hellen Modus #1c388f, im dunklen #a8b8e8 und im Druck
   weiß. Auf Blau trägt nur die Negativfassung, auf hellem Grund nur die
   farbige — gemessen: Schwarz auf Blau 2,0:1, Weiß auf Hellblau 1,9:1. Beide
   Dateien sind die offiziellen des Corporate Design; ein Umfärben im Browser
   wäre nach den Markenregeln unzulässig. */
.kopf-logo {
  display: block;
  height: 2.25rem;
  width: auto;
  max-width: 100%;
}

.kopf-logo-farbig,
.kopf-marke-text {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .kopf-logo-negativ {
    display: none;
  }

  .kopf-logo-farbig {
    display: block;
  }
}

.kopf-sache {
  margin: 0;
  text-align: right;
}

.kopf-titel {
  margin: 0;
  font-size: 0.875rem;
}

.kopf-zusatz {
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0.82;
}

.inhalt {
  flex: 1 0 auto;
  padding-block: var(--ab-5) var(--ab-7);
}

/* Der Inhaltsbereich traegt tabindex="-1", damit die Sprungmarke ihn
   anspringen kann. Ein Fokusrahmen um den halben Bildschirm waere sinnlos --
   ein ersatzloses outline:none aber auch: Nach "Zum Inhalt springen" aenderte
   sich sichtbar nur die Bildlaufposition, und wer mit der Tastatur arbeitet,
   verlor die Spur des Fokus vollstaendig.

   Deshalb keine Unterdrueckung, sondern eine eigene, ruhige Markierung: ein
   Streifen in der Akzentfarbe am Anfang des Inhalts. Sie erscheint nur bei
   Tastaturbedienung (:focus-visible) und verschwindet nach dem naechsten
   Tastendruck mit dem Fokus. */
.inhalt:focus,
.inhalt:focus-visible {
  outline: none;
  box-shadow: inset 0 3px 0 0 var(--fokus);
}

.fuss {
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: 0.875rem;
}

/* auto-fit statt drei fester Spalten: ohne hinterlegte Frist entfällt ein
   Block, und die verbleibenden zwei sollen nicht auseinandergezogen werden. */
.fuss-innen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--ab-4);
  padding-block: var(--ab-4);
}

/* Anbieterangabe und Rechtsverweise, abgesetzt unter den Rückfrageblöcken. */
.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2) var(--ab-5);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--ab-3) var(--ab-5);
  border-top: 1px solid var(--linie);
}

.fuss-anbieter {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.fuss-recht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-4);
  margin: 0;
  font-size: 0.8125rem;
}

.fuss-titel {
  margin: 0 0 var(--ab-1);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
}

.fuss p {
  margin: 0;
}

.fuss-block p + p {
  margin-top: var(--ab-2);
}

/* ---------------------------------------------------------------------------
   4  Text und Überschriften

   Große, ruhige Überschriften in Textfarbe. Blau wäre hier Dekoration — es
   trägt in dieser Anwendung Bedeutung (anklickbar) und wird deshalb nicht
   für Überschriften verbraucht.
   --------------------------------------------------------------------------- */

h1 {
  margin: 0 0 var(--ab-2);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  margin: var(--ab-6) 0 var(--ab-3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

h2:first-child {
  margin-top: 0;
}

p {
  margin: 0 0 var(--ab-3);
}

.vorspann {
  margin: 0 0 var(--ab-5);
  color: var(--text-leise);
  max-width: 78ch;
}

.vorspann strong {
  color: var(--text);
  font-weight: 600;
}

/* Ein Abschnitt ist eine Überschrift mit Inhalt darunter, keine Karte. Die
   Linie darüber ersetzt den Rahmen, den er früher rundum hatte. */
.abschnitt {
  margin-top: var(--ab-5);
  padding-top: var(--ab-3);
  border-top: 1px solid var(--linie);
}

.abschnitt:first-of-type {
  margin-top: var(--ab-5);
}

.abschnitt > h2 {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   5  Meldungen

   Eine linke Kante, sonst nichts. Die Art steht zusätzlich als Wort davor
   (::before) — Farbe allein trägt hier keine Bedeutung.
   --------------------------------------------------------------------------- */

.meldung {
  margin: 0 0 var(--ab-4);
  padding: var(--ab-3) var(--ab-4);
  border-left: 3px solid var(--linie-stark);
  background: var(--flaeche-leise);
}

.meldung:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.meldung-titel {
  margin: 0 0 var(--ab-1);
  font-weight: 600;
}

.meldung p:last-child,
.meldung ul:last-child {
  margin-bottom: 0;
}

.meldung-liste {
  margin: var(--ab-2) 0 0;
  padding-left: 1.2em;
}

.meldung-liste li + li {
  margin-top: var(--ab-1);
}

.meldung-fehler {
  border-left-color: var(--fehler);
  background: var(--fehler-flaeche);
}

.meldung-fehler .meldung-titel::before {
  content: "Fehler: ";
  color: var(--fehler);
  font-weight: 700;
}

.meldung-warnung {
  border-left-color: var(--warn);
  background: var(--warn-flaeche);
}

.meldung-warnung .meldung-titel::before {
  content: "Bitte prüfen: ";
  color: var(--warn);
  font-weight: 700;
}

.meldung-hinweis {
  border-left-color: var(--akzent);
  background: var(--akzent-flaeche);
}

/* Der schlichte Hinweis ohne Titelzeile — ein Absatz mit Kante. */
.hinweis {
  margin: 0 0 var(--ab-3);
  padding-left: var(--ab-3);
  border-left: 3px solid var(--linie-stark);
  color: var(--text-leise);
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
   6  Ablaufanzeige

   Früher vier Pillen mit Nummernkreisen. Jetzt eine Textzeile: sie sagt
   dasselbe, kostet ein Achtel der Höhe und braucht keine Erklärung.
   --------------------------------------------------------------------------- */

.ablauf {
  margin-bottom: var(--ab-4);
}

.ablauf-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-1) var(--ab-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.ablauf-schritt {
  display: flex;
  align-items: baseline;
  gap: var(--ab-2);
}

.ablauf-schritt + .ablauf-schritt::before {
  content: "›";
  color: var(--linie-stark);
}

/* Erledigte Schritte.
   Zuvor stand hier allein color: var(--text-leise) -- also genau die Farbe,
   die .ablauf-liste ohnehin vererbt. Die Regel war damit wirkungslos:
   "Zugang" (erledigt) und "Absenden" (offen) sahen identisch aus, und die
   Ablaufanzeige zeigte keinen Ablauf.

   Das Haekchen traegt die Unterscheidung nicht allein ueber Farbe -- das
   waere nach WCAG 1.4.1 zu wenig -- sondern ueber ein zusaetzliches Zeichen.
   Im Markup steht daneben ein nur-sr-Text, damit sie auch angesagt wird. */
.ablauf-erledigt {
  color: var(--text-leise);
}

.ablauf-erledigt::after {
  content: "✓";
  margin-inline-start: 0.3em;
  color: var(--gut);
  font-weight: 700;
}

.ablauf-aktiv {
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   7  Formular: Felder und Knöpfe
   --------------------------------------------------------------------------- */

.feld {
  margin-bottom: var(--ab-3);
}

.feld-label {
  display: block;
  margin-bottom: var(--ab-1);
  font-size: 0.9375rem;
  font-weight: 600;
}

.feld-hilfe {
  margin: 0 0 var(--ab-2);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.feld-eingabe,
.betrag-feld {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--ab-2) var(--ab-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.feld-eingabe:hover,
.betrag-feld:hover {
  border-color: var(--text-leise);
}

/* Beträge stehen untereinander und werden verglichen — rechtsbündig, damit
   die Tausenderstellen fluchten. */
.betrag-feld {
  text-align: right;
}

.feld-eingabe-kurz {
  max-width: 12rem;
}

.feld-eingabe-mittel {
  max-width: 22rem;
}

.feld-eingabe-code {
  max-width: 12rem;
  font-family: var(--schrift-fest);
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Der Fehler steht unter dem Feld und über die volle Breite. Im Bestand saß
   er neben dem Betrag in einer 9rem schmalen Spalte und lief dort zehnzeilig
   um, mit Trennung mitten im Wort. */
.feldfehler,
.posten-fehler {
  margin: var(--ab-2) 0 0;
  color: var(--fehler);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Wie bei den Sammelmeldungen sagt ein Wort, worum es geht — die Farbe allein
   trägt die Bedeutung nicht. */
.feldfehler::before,
.posten-fehler::before {
  content: "Fehler: ";
}

.feld-fehler .feld-eingabe,
.feld-fehler .betrag-feld,
.posten-fehlerhaft .betrag-feld {
  border-color: var(--fehler);
  border-width: 2px;
}

/* Der bisher hinterlegte Wert, wenn das Unternehmen ihn geändert hat. */
.feld-alt {
  margin: var(--ab-1) 0 0;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.feld-alt-marke {
  font-weight: 600;
}

.pflicht-stern {
  color: var(--fehler);
}

.pflicht-legende {
  margin: var(--ab-3) 0 0;
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-3);
  align-items: center;
  margin-top: var(--ab-4);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: var(--ab-2) var(--ab-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf-haupt,
.knopf-verbindlich {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}

.knopf-haupt:hover,
.knopf-verbindlich:hover {
  background: var(--akzent-dunkel);
  border-color: var(--akzent-dunkel);
  color: var(--auf-akzent);
}

/* Fokus auf den gefuellten Schaltflaechen.
   Im Hellmodus ist --fokus dieselbe Farbe wie --akzent, also wie die Flaeche
   des Knopfes selbst. Der allgemeine Fokusrahmen legte damit einen blauen Ring
   um einen blauen Knopf, getrennt nur durch zwei Pixel Seitenhintergrund: Wer
   mit der Tastatur ankam, sah keinen Ring, sondern einen etwas groesser
   gewordenen Knopf -- und beim Absenden ist das die Stelle, an der Gewissheit
   noetig ist.

   Zwei Ringe statt einem: innen die Grundfarbe der Seite, aussen die
   Fokusfarbe. Das traegt auf jedem Untergrund, auch wenn eine der beiden
   Farben einmal der Flaeche gleicht. */
.knopf-haupt:focus-visible,
.knopf-verbindlich:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--grund),
    0 0 0 5px var(--fokus);
}

.knopf-neben {
  border-color: var(--linie-stark);
  color: var(--text);
}

.knopf-neben:hover {
  border-color: var(--text-leise);
  color: var(--text);
}

/* Der Ändern-Verweis der Prüfseite. Er sieht aus wie ein Verweis, ist aber
   ein Knopf — mindestens 44 px hoch, damit er auf dem Tablett zu treffen ist. */
.knopf-text {
  min-height: 2.75rem;
  padding: var(--ab-1) var(--ab-2);
  border: none;
  background: none;
  color: var(--akzent);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.knopf-text:hover {
  color: var(--akzent-dunkel);
}

/* ---------------------------------------------------------------------------
   8  Block A: Positionsraster

   Eine Zeile ist: Nummer, Bezeichnung, Betragsfeld. Ein Raster, keine
   Tabelle — die Zeilen sollen im schmalen Fenster umbrechen dürfen.
   --------------------------------------------------------------------------- */

.block {
  margin: 0;
  padding: 0;
  border: none;
}

.block + .block {
  margin-top: var(--ab-6);
  padding-top: var(--ab-4);
  border-top: 1px solid var(--linie);
}

.block-titel {
  padding: 0;
  margin: 0 0 var(--ab-1);
  font-size: 1.125rem;
  font-weight: 600;
}

.block-erklaerung {
  margin: 0 0 var(--ab-4);
  font-size: 0.9375rem;
  color: var(--text-leise);
  max-width: 62ch;
}

/* Der Währungshinweis stand früher in einem gelben Kasten über der Tabelle.
   Jetzt ist er die Zeile unter der Überschrift, wo er ohnehin gelesen wird. */
.waehrungshinweis {
  margin: 0 0 var(--ab-4);
  font-size: 0.9375rem;
  color: var(--text-leise);
}

.raster-kopf {
  display: grid;
  grid-template-columns: 2rem 1fr 11rem;
  gap: var(--ab-3);
  padding-bottom: var(--ab-1);
  border-bottom: 1px solid var(--linie-stark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.raster-kopf-betrag,
.raster-kopf-aktion {
  text-align: right;
}

/* Die Prüfseite trägt eine vierte Spalte für den Ändern-Verweis. Ohne eigene
   Kopfzeile fluchtet „Betrag in Euro" nicht mit den Zeilen darunter. */
.raster-kopf-mit-aktion {
  grid-template-columns: 2rem 1fr 11rem 6rem;
}

.posten {
  display: grid;
  grid-template-columns: 2rem 1fr 11rem;
  gap: var(--ab-3);
  align-items: center;
  padding-block: var(--ab-1);
  border-bottom: 1px solid var(--linie);
}

.posten-nr,
.summe-nr,
.lese-nr {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Bezeichnung und Aufklapper stehen nebeneinander. Stünde „Wortlaut" in einer
   eigenen Zeile, kostete das über sieben Positionen rund 170 Pixel. */
.posten-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--ab-2);
  margin: 0;
  min-width: 0;
}

.posten-name {
  font-weight: 600;
}

.posten-guv {
  color: var(--text-leise);
  font-weight: 400;
}

.posten-eingabe {
  margin: 0;
}

/* Die Fehlermeldung nimmt die ganze Zeilenbreite ein — Aussehen und Präfix
   stehen bei den übrigen Feldfehlern, hier nur die Rasterlage. */
.posten-fehler {
  grid-column: 2 / -1;
}

.posten-fehlerhaft {
  background: var(--fehler-flaeche);
}

/* Aufklapper für den Wortlaut der Beitragsordnung. Trefferfläche mindestens
   44 px — der Schalter im Bestand kam auf rund 22. */
.posten-mehr {
  margin: 0;
}

/* Aufgeklappt nimmt der Wortlaut die ganze Zeilenbreite ein, statt sich neben
   die Bezeichnung zu quetschen. */
.posten-mehr[open] {
  flex: 1 0 100%;
  margin-top: var(--ab-1);
}

.posten-mehr-schalter {
  display: inline-block;
  padding: var(--ab-1) 0;
  min-height: 1.5rem;
  color: var(--akzent);
  font-size: 0.8125rem;
  cursor: pointer;
}

.posten-mehr-schalter:hover {
  color: var(--akzent-dunkel);
}

.posten-lang,
.posten-herkunft {
  margin: var(--ab-1) 0 0;
  font-size: 0.875rem;
  color: var(--text-leise);
  max-width: 62ch;
}

/* Die drei berechneten Zeilen. Sie stehen unter einer stärkeren Linie und
   tragen keinen Kasten — das Gewicht kommt aus der Schrift. */
.summen {
  margin-top: var(--ab-4);
  padding-top: var(--ab-2);
  border-top: 2px solid var(--linie-stark);
}

.summen-erklaerung {
  margin: 0 0 var(--ab-2);
  font-size: 0.875rem;
  color: var(--text-leise);
}

.summe {
  display: grid;
  grid-template-columns: 2rem 1fr 11rem;
  gap: var(--ab-3);
  align-items: baseline;
  padding-block: var(--ab-2);
}

.summe + .summe {
  border-top: 1px solid var(--linie);
}

.summe-gesamt {
  border-top: 1px solid var(--linie-stark) !important;
  font-size: 1.0625rem;
}

.summe-name {
  font-weight: 600;
}

.summe-formel {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-leise);
}

.summe-wert {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-size: 1.0625rem;
}

.summe-gesamt .summe-wert {
  font-size: 1.25rem;
}

/* Der Vermerk „Vorläufig berechnet" — einmal je Zeile, klein und leise.
   Das Skript schreibt seinen Text hier hinein. */
.summe-vermerk {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-leise);
}

/* Blockraster des Bogens: Block A links, B und C rechts. Das war im Bestand
   ein Nachtrag; hier gehört es ins Gerüst. */
@media (min-width: 62em) {
  /* Die erste Zeile ist so hoch wie Block B, nicht halb so hoch wie Block A —
     sonst klafft zwischen B und C eine Lücke von mehreren hundert Pixeln. */
  .bogen {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: min-content 1fr;
    gap: 0 var(--ab-6);
    align-items: start;
  }

  .bogen > .block[data-block="a"] {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .bogen > .block[data-block="b"] {
    grid-column: 2;
    grid-row: 1;
  }

  .bogen > .block[data-block="c"] {
    grid-column: 2;
    grid-row: 2;
  }

  /* In der rechten Spalte steht B über C — die Trennlinie zwischen ihnen
     bleibt, die zwischen A und B ergäbe keinen Sinn. */
  .bogen > .block[data-block="b"] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .bogen > .abschluss {
    grid-column: 1 / -1;
  }
}

/* Postleitzahl und Ort nebeneinander, Name der meldenden Person und
   Telefonnummer ebenso — sonst stünden fünf einzeilige Felder untereinander. */
.feldraster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--ab-3);
}

/* Zwei Felder nebeneinander haben selten gleich lange Beschriftungen und
   Hilfetexte — „Vor- und Nachname der Person, die diese Meldung abgibt" bricht
   dreizeilig um, „Durchwahl für Rückfragen" zweizeilig. Ohne die Flexspalte
   säße das linke Eingabefeld eine Zeile tiefer als das rechte. Die Rasterzellen
   sind ohnehin gleich hoch; der automatische Außenabstand am Feld schiebt es an
   deren Unterkante, sodass Beschriftungen oben und Felder unten fluchten. */
.feldraster > .feld {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.feldraster > .feld > .feld-eingabe {
  margin-top: auto;
}

.feldraster > .feld[data-feld="unternehmen_plz"],
.feldraster > .feld[data-feld="melder_name"] {
  grid-column: 1;
}

.feldraster > .feld[data-feld="unternehmen_ort"],
.feldraster > .feld[data-feld="melder_telefon"] {
  grid-column: 2;
}

.abschluss {
  margin-top: var(--ab-6);
  padding-top: var(--ab-4);
  border-top: 1px solid var(--linie);
}

.abschluss-text {
  margin: var(--ab-3) 0 0;
  font-size: 0.875rem;
  color: var(--text-leise);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   9  Leseansicht: Prüfen und Quittung

   Dieselben Zeilen wie im Bogen, nur ohne Eingabefelder. Die Prüfseite trägt
   zusätzlich je Zeile einen Ändern-Knopf.
   --------------------------------------------------------------------------- */

.lese {
  display: grid;
  grid-template-columns: 2rem 1fr 11rem;
  gap: var(--ab-3);
  align-items: baseline;
  padding-block: var(--ab-1);
  border-bottom: 1px solid var(--linie);
}

.lese-mit-aktion {
  grid-template-columns: 2rem 1fr 11rem 6rem;
}

.lese-wert {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.lese-aktion {
  margin: 0;
  text-align: right;
}

/* Zeilen aus Block B und C: Beschriftung links, Wert rechts. */
.zeile {
  display: grid;
  grid-template-columns: 14rem 1fr auto;
  gap: var(--ab-3);
  align-items: baseline;
  padding-block: var(--ab-1);
  border-bottom: 1px solid var(--linie);
}

.zeile-label {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.9375rem;
}

.zeile-wert {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.zeile-neu {
  font-weight: 600;
}

.zeile-alt {
  display: block;
  margin-top: var(--ab-1);
  font-size: 0.8125rem;
  color: var(--text-leise);
}

.zeile-geaendert {
  background: var(--akzent-flaeche);
}

/* Der Rechenweg unter einer berechneten Zeile: 1.240.000,00 − 310.000,00 = … */
.rechenweg {
  margin: var(--ab-1) 0 0;
  font-size: 0.875rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.rechenweg-summe {
  color: var(--text);
  font-weight: 600;
}

/* Quittung: Kopf und Eckdaten */
.quittung-kopf {
  margin-bottom: var(--ab-5);
  padding-bottom: var(--ab-4);
  border-bottom: 2px solid var(--linie-stark);
}

.quittung-siegel {
  margin: 0 0 var(--ab-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gut);
}

.quittung-zeitpunkt {
  margin: 0;
  color: var(--text-leise);
}

.quittung-eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--ab-4);
  margin-bottom: var(--ab-5);
}

.eckdatum {
  margin: 0;
}

.eckdatum-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.eckdatum-wert {
  display: block;
  font-weight: 600;
}

.eckdatum-zusatz {
  font-weight: 400;
  color: var(--text-leise);
}

/* ---------------------------------------------------------------------------
   10  Rücklaufliste

   172 Zeilen. Alles, was je Zeile an Höhe gespart wird, zählt hundertfach —
   deshalb keine Badges, keine doppelte Zeilenhöhe, kein Zebra.
   --------------------------------------------------------------------------- */

.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2) var(--ab-5);
  margin-bottom: var(--ab-4);
  padding-bottom: var(--ab-3);
  border-bottom: 1px solid var(--linie);
}

.kennzahl {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--ab-2);
}

.kennzahl-wert {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kennzahl-label {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-leise);
}

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ab-3);
}

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-1) var(--ab-4);
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-1);
  min-height: 2.75rem;
  color: var(--akzent);
  font-size: 0.9375rem;
  text-decoration: none;
}

.filter:hover {
  text-decoration: underline;
}

.filter-aktiv {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.filter-anzahl {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.werkzeug-export {
  margin: 0;
}

.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.liste caption {
  text-align: left;
}

.liste th,
.liste td {
  padding: var(--ab-2) var(--ab-3) var(--ab-2) 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--linie);
}

.liste thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--grund);
  border-bottom: 2px solid var(--linie-stark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.liste thead th a {
  color: inherit;
  text-decoration: none;
}

.liste thead th a:hover {
  text-decoration: underline;
}

.liste .rechts,
.liste .zahl {
  text-align: right;
  padding-right: 0;
  padding-left: var(--ab-3);
}

.tabellen-ukz {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Vierte Spalte ist der Eingangszeitpunkt. Ohne dies bricht er zwischen Datum
   und Uhrzeit um und macht die Zeile doppelt hoch — bei 172 Unternehmen ist
   das der teuerste Umbruch der ganzen Anwendung. Die Spaltenfolge steht in
   ansicht.go fest (Spaltenkoepfe), deshalb ist der Zugriff über die Position
   hier tragfähig. */
.liste td:nth-child(4) {
  white-space: nowrap;
}

/* Der Stand steht als Wort in der Zeile, nicht als farbige Pille. Offen wird
   hervorgehoben — das ist der Zustand, der Arbeit macht. */
.marke {
  font-size: 0.875rem;
  white-space: nowrap;
}

.marke-offen {
  font-weight: 700;
}

.marke-eingegangen,
.marke-korrigiert {
  color: var(--text-leise);
}

.marke-warn {
  display: inline-block;
  margin-left: var(--ab-2);
  color: var(--warn);
  font-weight: 700;
  font-size: 0.8125rem;
}

.zeile-auffaellig td {
  background: var(--warn-flaeche);
}

/* ---------------------------------------------------------------------------
   11  Fehlerseite
   --------------------------------------------------------------------------- */

.fehlerseite {
  max-width: 46rem;
}

.schritte {
  margin: 0 0 var(--ab-4);
  padding-left: 1.3em;
}

.schritte li + li {
  margin-top: var(--ab-2);
}

.fehler-hilfe {
  margin-top: var(--ab-6);
  padding-top: var(--ab-4);
  border-top: 1px solid var(--linie);
}

/* Die Briefabbildung auf der Zugangsseite. Sie zeigt, wo Kennziffer und Code
   im Anschreiben stehen — das ist der häufigste Anruf bei der Geschäftsstelle. */
.brief {
  margin: 0 0 var(--ab-4);
  padding: var(--ab-3) var(--ab-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-leise);
  font-size: 0.875rem;
}

.brief-zeile {
  margin: 0 0 var(--ab-1);
}

.brief-zeile-leise {
  color: var(--text-leise);
}

.brief-hervor {
  font-weight: 700;
}

.code-beispiel {
  font-family: var(--schrift-fest);
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------
   12  Schmale Fenster

   Alle Grenzen in em, damit sie der Schriftgröße folgen.
   --------------------------------------------------------------------------- */

@media (min-width: 46em) {
  .doppelspalte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ab-6);
    align-items: start;
  }
}

@media (max-width: 52em) {
  .zeile {
    grid-template-columns: 1fr auto;
  }

  .zeile-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40em) {
  .raster-kopf {
    display: none;
  }

  .posten,
  .summe,
  .lese,
  .lese-mit-aktion {
    grid-template-columns: 1fr auto;
    gap: var(--ab-1) var(--ab-3);
    align-items: baseline;
  }

  /* Die Nummer wandert über die Bezeichnung und wird zur Kopfzeile der
     Zeile. Der Vorlesetext „Zeile" wird dabei sichtbar — sonst stünde dort
     eine nackte Ziffer ohne Bezug. */
  .posten-nr,
  .summe-nr,
  .lese-nr {
    grid-column: 1 / -1;
    order: -1;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .posten-nr .nur-sr,
  .summe-nr .nur-sr,
  .lese-nr .nur-sr {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  .posten-text,
  .summe-text,
  .lese-text {
    grid-column: 1 / -1;
  }

  .posten-eingabe,
  .lese-wert,
  .summe-wert {
    grid-column: 1 / -1;
    text-align: left;
  }

  .posten-fehler {
    grid-column: 1 / -1;
  }

  .betrag-feld {
    max-width: 14rem;
  }

  .feldraster {
    grid-template-columns: 1fr;
  }

  .feldraster > .feld[data-feld="unternehmen_plz"],
  .feldraster > .feld[data-feld="unternehmen_ort"],
  .feldraster > .feld[data-feld="melder_name"],
  .feldraster > .feld[data-feld="melder_telefon"] {
    grid-column: 1;
  }

  /* Erst hier darf die Liste waagerecht scrollen. Der Tabellenkopf verliert
     dabei seine Haftung — das ist der Preis und er fällt nur auf schmalen
     Geräten an, wo die Verwaltungsansicht ohnehin selten geöffnet wird. */
  .tabellenrahmen {
    overflow-x: auto;
  }

  .liste {
    min-width: 44rem;
  }

  .liste thead th {
    position: static;
  }

  .kopf-innen {
    flex-direction: column;
    align-items: flex-start;
  }

  .kopf-sache {
    text-align: left;
  }
}

@media (max-width: 34em) {
  .bahn {
    padding-inline: var(--ab-3);
  }

  .kopf-logo {
    height: 1.875rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  .knopfreihe .knopf {
    width: 100%;
  }
}

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

/* ---------------------------------------------------------------------------
   13  Druck

   Die Quittung ersetzt das frühere PDF; sie muss auf Papier vollständig und
   lesbar sein.

   Die Farbtokens werden hier hart auf Schwarzweiß gesetzt. Ohne das druckt
   ein Browser im Dunkelmodus die hellen Textfarben mit — weiß auf weiß.
   --------------------------------------------------------------------------- */

@media print {
  :root {
    --grund: #ffffff;
    --flaeche-leise: #ffffff;
    --linie: #999999;
    --linie-stark: #333333;
    --text: #000000;
    --text-leise: #333333;
    --akzent: #000000;
    --akzent-dunkel: #000000;
    --akzent-flaeche: #ffffff;
    --auf-akzent: #000000;
    --fehler: #000000;
    --fehler-flaeche: #ffffff;
    --warn: #000000;
    --warn-flaeche: #ffffff;
    --gut: #000000;
  }

  html {
    font-size: 11pt;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .sprungmarke,
  .ablauf,
  .nichtdrucken,
  .knopfreihe-nichtdrucken,
  .nur-mit-js,
  .fuss,
  .knopf-text {
    display: none !important;
  }

  .kopf {
    background: none;
    color: #000000;
    border-bottom: 1pt solid #000000;
  }

  .kopf-logo-negativ {
    display: none;
  }

  .kopf-logo-farbig {
    display: block;
  }

  .inhalt {
    padding-block: 0;
  }

  /* Der Wortlaut gehört auf den Ausdruck, auch wenn er am Schirm zugeklappt
     war. */
  details {
    display: block;
  }

  details > summary {
    display: none;
  }

  .posten,
  .summe,
  .lese,
  .zeile,
  .abschnitt {
    break-inside: avoid;
  }

  a {
    text-decoration: none;
  }

  /* Die Zeilennummer trägt im Ausdruck ihren Vorlesetext, damit die Quittung
     ohne Bildschirm verständlich bleibt. */
  .posten-nr .nur-sr,
  .summe-nr .nur-sr,
  .lese-nr .nur-sr {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
}

/* ---------------------------------------------------------------------------
   14  Kontrastmodus

   Im Windows-Kontrastmodus ersetzt das Betriebssystem alle Farben. Was allein
   über eine Hintergrundfarbe unterschieden wird, verschwindet dann — deshalb
   bekommen diese Zustände hier eine Kante.
   --------------------------------------------------------------------------- */

@media (forced-colors: active) {
  /* Windows ersetzt Flächenfarben, Bilder aber nicht — dann trägt keine der
     beiden Logofassungen sicher. Der Schriftzug wird korrekt eingefärbt. */
  .kopf-logo {
    display: none;
  }

  .kopf-marke-text {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .meldung,
  .hinweis {
    border-left-width: 4px;
  }

  .zeile-geaendert,
  .zeile-auffaellig td,
  .posten-fehlerhaft {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .knopf-haupt,
  .knopf-verbindlich,
  .knopf-neben {
    border: 2px solid ButtonText;
  }

  .filter-aktiv {
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }

  /* Im erzwungenen Farbmodus wird box-shadow unterdrueckt. Die Regeln, die
     den Fokus dort ueber Schatten zeichnen (.knopf-haupt, .inhalt), haben
     hoehere Spezifitaet als ein blosses :focus-visible und wuerden mit ihrem
     outline:none gewinnen -- der Fokus verschwaende genau an der Schaltflaeche
     zum verbindlichen Absenden. Deshalb hier ausdruecklich dieselben Selektoren
     mit gleicher oder hoeherer Spezifitaet. */
  :focus-visible,
  .knopf-haupt:focus-visible,
  .knopf-verbindlich:focus-visible,
  .inhalt:focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
    box-shadow: none;
  }
}