/* ============================================================
   Forderly – Stylesheet
   Keine externen Ressourcen, keine Inline-Styles (CSP-konform).
   v23 (17.10.2026): Schrittkopf in zwei Zeilen — Leiste und „Weiter“ mit
   fester Breite (.schritt-weiter), darunter die Werkzeuge des Schritts
   (.schritt-werkzeuge, linksbündig); Schrittnamen behalten ihre Breite,
   auch wenn der aktive fett steht (.schritt-name); Fehler unter der
   Leiste (.schritt-fehler).
   v22 (16.10.2026): Packliste mit Ampel im Schritt „Paket und Versand“
   (.ampel-liste, .ampel-zeile, .ampel-rot/-gelb/-gruen/-grau, .ampel-punkt,
   .ampel-aktionen, .ampel-hoch mit unsichtbarer Dateiwahl .ampel-datei,
   .ampel-haken-feld, .ampel-summe, .ampel-offen).
   v21 (16.10.2026): Tabellen mit Zebrastreifen und Abstand nach
   rechtsbündigen Spalten (vorher klebten „Stand heute“ und „Status“
   aneinander), Aktionsspalte linksbündig im rechten Block, Fristen als
   kompakte Zeile mit aufklappbaren Einzelheiten (.frist-mehr),
   Schrittkopf einer Maßnahme mit fester Höhe (.schritt-kopf),
   aufklappbare Abschnitte im Fragebogen (.aufklapp), kompaktes
   Forderungskonto (.konto-mehr), Titelliste (.tabelle-titel).
   v20: Schritte einer Maßnahme (.schritte), Paket und Versand
   (.paket-liste, .paket-dateien, .schritt-liste), Angaben eines
   Dokuments ändern (.dok-aendern), „Weiter“ unter der Aufstellung
   (.fa-weiter); der Anlagendruck über body.druck-anlagen ist weg —
   die Anlagen kommen als PDF (paket.v1.js).
   v19: „Anlagen und Belege drucken“ (body.druck-anlagen: im Druck nur
   .fa-anlagen mit eigenem Kopf .nur-anlagen), ausgegraute Knöpfe
   (.knopf:disabled, z. B. das amtliche Formular ohne Freischaltung).
   v18: Maßnahmen im Titel mit Aktionsspalte und Symbolen (.massnahmen-liste,
   .aktion, .symbol), Maßnahmen-Tabelle (.tabelle-massnahmen), Titelkopf
   (.titel-aktionen), freiwillige Fundstelle (.fa-freiwillig).
   v17: Kosten und Belege je Maßnahme (.kp-*), Fundstelle in der
   Forderungsaufstellung nachtragen (.fa-fs-eingabe), Belege zu Anlage A
   mit Kopien im Druck (.belegkopien, .beleg-seite: jede Seite eine
   Druckseite), .nur-druck.
   v16: Feldfehler am Feld (.feld-fehler, aria-invalid) und Raster der
   Rechnungsanschrift (.feld-anschrift: Straße breit, PLZ schmal).
   v15: Forderungsaufstellung in der Gliederung des amtlichen Formulars
   (.fa-*): Positionsgruppen mit Fundstelle und Zinszeilen, Blocküber-
   schriften der Kostenarten, Anlagen im Druck auf neuer Seite.
   v13: Preiskarte-Abstände, Marke auf der Anmeldeseite verlinkt (auch mobil).
   v12: Startseite als Landingpage (.lp-*).
   v10: Knopf im Seitenkopf bricht nicht mehr um; eigene Vorschlags-
   liste für Gerichte (statt <datalist>); Fallmappe in drei Schritten
   mit Anschreiben-Vorschau.
   ============================================================ */

:root {
  /* Palette */
  --tinte:        #0B1F3F;   /* Sidebar, Überschriften */
  --amtsblau:     #14346B;   /* Primär, Aktionen */
  --amtsblau-h:   #1B4489;   /* Primär Hover */
  --papier:       #F4F6FA;   /* Seitenhintergrund */
  --karte:        #FFFFFF;
  --linie:        #DDE3ED;
  --linie-stark:  #C3CCDC;
  --text:         #1C2735;
  --text-leise:   #5B6879;
  --frist:        #A3261E;   /* Fristen, Rückstand */
  --frist-bg:     #FBEEED;
  --eingang:      #16624A;   /* Zahlungseingang */
  --eingang-bg:   #EAF3EF;
  --zins:         #8A5A00;   /* laufende Zinsen */
  --zins-bg:      #FBF3E4;

  /* Typografie */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --sidebar: 232px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--tinte);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Marke ------------------------------------------------ */

.marke {
  font-family: var(--serif);
  letter-spacing: 0.01em;
}

.marke-akt { color: #8FA9D4; }

/* ============================================================
   Anmeldeseite
   ============================================================ */

.anmelde-seite {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.anmelde-bild {
  background: var(--tinte);
  color: #E7EDF7;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.anmelde-bild .marke {
  font-size: 22px;
  color: #fff;
}

.anmelde-bild a.marke { text-decoration: none; display: inline-block; }

/* Marke oberhalb des Formulars — nur auf schmalen Fenstern, wo die
   linke Spalte samt Marke ausgeblendet ist. */
.anmelde-marke-mobil { display: none; }

.anmelde-these {
  max-width: 420px;
}

.anmelde-these h2 {
  color: #fff;
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 16px;
}

.anmelde-these p {
  color: #B6C4DC;
  margin: 0 0 12px;
}

.anmelde-fuss {
  font-size: 13px;
  color: #8399BC;
}

.anmelde-fuss a { color: #B6C4DC; }

.anmelde-formular {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

.anmelde-box {
  width: 100%;
  max-width: 380px;
}

.reiter {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 28px;
}

.reiter button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 10px;
  margin-bottom: -1px;
  font: inherit;
  color: var(--text-leise);
  cursor: pointer;
}

.reiter button.aktiv {
  color: var(--tinte);
  border-bottom-color: var(--amtsblau);
}

/* ============================================================
   Formularelemente
   ============================================================ */

.feld { margin-bottom: 16px; }

.feld label {
  display: block;
  font-size: 13px;
  color: var(--text-leise);
  margin-bottom: 5px;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--text);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--amtsblau);
  outline-offset: 1px;
  border-color: var(--amtsblau);
}

.feld-hinweis {
  font-size: 12px;
  color: var(--text-leise);
  margin-top: 5px;
}

/* Fehler direkt am Feld: Meldung darunter, Rahmen in Fristrot; leere Meldung nimmt keinen Platz. */
.feld-fehler {
  color: var(--frist);
  font-size: 12px;
  margin: 5px 0 0;
}

.feld-fehler:empty { display: none; }

.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: var(--frist); }

.feld input[aria-invalid="true"]:focus { outline-color: var(--frist); }

/* Rechnungsanschrift (Flat-Seite, Konto → Team): Straße breit, PLZ schmal, Ort mittel. */
.feld-anschrift {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px;
}

.feld-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.knopf {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--amtsblau);
  border-radius: var(--radius);
  background: var(--amtsblau);
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.knopf:hover { background: var(--amtsblau-h); border-color: var(--amtsblau-h); }
.knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }

.knopf-breit { width: 100%; text-align: center; }

.knopf-leise {
  background: #fff;
  color: var(--amtsblau);
}

.knopf-leise:hover { background: #EEF2F9; }

/* v19: ausgegraut — gesperrt (amtliches Formular ohne Freischaltung) oder
   während der Knopf arbeitet. */
.knopf:disabled { opacity: 0.45; cursor: default; }
.knopf:disabled:hover { background: var(--amtsblau); border-color: var(--amtsblau); }
.knopf-leise:disabled:hover { background: #fff; }

/* ============================================================
   Portal-Gerüst
   ============================================================ */

.portal {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

.seitenleiste {
  background: var(--tinte);
  padding: 22px 0 16px;
  display: flex;
  flex-direction: column;
  /* Bleibt beim Scrollen langer Seiten stehen; der Fuß mit Konto und
     Abmelden ist damit immer erreichbar, bei wenig Höhe scrollt die
     Leiste für sich. */
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
}

.seitenleiste-kopf {
  padding: 0 22px 24px;
  color: #fff;
  font-size: 19px;
}

.nav { flex: 1; }

.nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 22px;
  color: #A9BBD8;
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}

.nav a:hover { color: #fff; background: rgba(255,255,255,0.05); }

.nav a.aktiv {
  color: #fff;
  border-left-color: #6F92CC;
  background: rgba(255,255,255,0.07);
}

.nav svg { flex: none; }

.nav-gruppe {
  padding: 18px 22px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6F82A3;
}

.seitenleiste-fuss {
  padding: 14px 22px 0;
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 12px;
  font-size: 13px;
  color: #A9BBD8;
}

.seitenleiste-fuss button {
  background: none;
  border: 0;
  color: #A9BBD8;
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.inhalt {
  padding: 30px 34px 64px;
  max-width: 1180px;
}

.seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.seitenkopf p {
  margin: 5px 0 0;
  color: var(--text-leise);
  font-size: 14px;
}
.seitenkopf > .knopf { flex-shrink: 0; }
.seitenkopf .knopf { white-space: nowrap; }

/* ============================================================
   Karten und Raster
   ============================================================ */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.karte-abstand { margin-top: 18px; }

.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.raster-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.raster-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.raster-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
}

.kennzahl-schild {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 8px;
}

.kennzahl-wert {
  font-family: var(--serif);
  font-size: 27px;
  color: var(--tinte);
  line-height: 1.1;
}

.kennzahl-fuss {
  font-size: 12.5px;
  color: var(--text-leise);
  margin-top: 6px;
}

/* ============================================================
   Signatur: die Zinsuhr
   ============================================================ */

.zinsuhr {
  background: var(--tinte);
  border-radius: var(--radius);
  padding: 22px 24px;
  color: #fff;
  margin-bottom: 20px;
}

.zinsuhr-schild {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8FA9D4;
  margin-bottom: 6px;
}

.zinsuhr-wert {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.05;
}

.zinsuhr-zeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.zinsuhr-lauf {
  text-align: right;
  font-size: 13px;
  color: #B6C4DC;
}

.zinsuhr-lauf strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: #FFD9A0;
}

.tagesbalken {
  margin-top: 16px;
  height: 3px;
  background: rgba(255,255,255,0.14);
  border-radius: 2px;
  overflow: hidden;
}

.tagesbalken span {
  display: block;
  height: 100%;
  background: #E0A94A;
}

.zinsuhr-fuss {
  margin-top: 8px;
  font-size: 12px;
  color: #8399BC;
}

/* ============================================================
   Tabellen
   ============================================================ */

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabelle th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--linie);
}

.tabelle td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.tabelle tr:last-child td { border-bottom: 0; }

.tabelle .r { text-align: right; padding-right: 0; }
.tabelle th.r { padding-right: 0; }

.tabelle-klick tbody tr { cursor: pointer; }
.tabelle-klick tbody tr:hover { background: #F7F9FC; }

.zeile-haupt { color: var(--tinte); font-weight: 600; }
.zeile-neben { color: var(--text-leise); font-size: 12.5px; }

.summenzeile td {
  border-top: 2px solid var(--linie-stark);
  border-bottom: 0;
  font-weight: 600;
  color: var(--tinte);
  padding-top: 12px;
}

/* ============================================================
   Marken, Hinweise, Status
   ============================================================ */

.marke-status {
  display: inline-block;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 11px;
  border: 1px solid var(--linie-stark);
  color: var(--text-leise);
  background: #F7F9FC;
  white-space: nowrap;
}

.marke-status.frist { color: var(--frist); background: var(--frist-bg); border-color: #E8C9C6; }
.marke-status.laeuft { color: var(--amtsblau); background: #EDF2FA; border-color: #C7D6EE; }
.marke-status.ruht { color: var(--text-leise); }
.marke-status.erledigt { color: var(--eingang); background: var(--eingang-bg); border-color: #C2DDD1; }

.banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  background: var(--frist-bg);
  border: 1px solid #E8C9C6;
}

.banner-kopf { color: var(--frist); font-weight: 600; }
.banner p { margin: 3px 0 0; font-size: 13.5px; color: #6B3B37; }

.liste-schlicht { list-style: none; margin: 0; padding: 0; }

.liste-schlicht li {
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
}

.liste-schlicht li:last-child { border-bottom: 0; }

.aktionsliste a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}

.aktionsliste a:last-child { border-bottom: 0; }
.aktionsliste a:hover { color: var(--amtsblau); }

.leerzustand {
  padding: 34px 20px;
  text-align: center;
  color: var(--text-leise);
}

.leerzustand h3 { margin-bottom: 6px; }
.leerzustand p { margin: 0 0 16px; font-size: 14px; }

/* Datenpaare im Detail */

.paar-liste { margin: 0; }

.paar-liste div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
}

.paar-liste div:last-child { border-bottom: 0; }
.paar-liste dt { color: var(--text-leise); margin: 0; }
.paar-liste dd { margin: 0; text-align: right; color: var(--tinte); }

.zurueck {
  display: inline-block;
  font-size: 13px;
  color: var(--text-leise);
  text-decoration: none;
  margin-bottom: 10px;
}

.zurueck:hover { color: var(--amtsblau); }

/* Hilfeseite */

.hilfe-eintrag {
  border-bottom: 1px solid var(--linie);
  padding: 16px 0;
}

.hilfe-eintrag:last-child { border-bottom: 0; }
.hilfe-eintrag h3 { margin-bottom: 5px; }
.hilfe-eintrag p { margin: 0; color: var(--text-leise); font-size: 14px; }
.hilfe-eintrag p + p, .hilfe-eintrag p + h3 { margin-top: 10px; }
.hilfe-eintrag ol, .hilfe-eintrag ul { margin: 6px 0 10px; padding-left: 22px; }
.hilfe-eintrag li { color: var(--text-leise); font-size: 14px; line-height: 1.55; margin: 4px 0; }
.hilfe-eintrag .liste-schlicht { padding-left: 0; }

.rechtshinweis {
  margin-top: 26px;
  padding: 14px 18px;
  background: #EEF2F9;
  border-left: 3px solid var(--amtsblau);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  color: var(--text-leise);
}

/* ============================================================
   Reduzierte Bewegung & schmale Fenster
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
  .anmelde-seite { grid-template-columns: 1fr; }
  .anmelde-bild { display: none; }
  .anmelde-marke-mobil { display: block; font-size: 22px; color: var(--tinte); text-decoration: none; margin-bottom: 22px; }
  .portal { grid-template-columns: 1fr; }
  .seitenleiste { flex-direction: row; flex-wrap: wrap; padding: 12px; align-items: center; position: static; height: auto; overflow: visible; }
  .seitenleiste-kopf { padding: 0 12px 0 10px; }
  .nav { display: flex; flex-wrap: wrap; flex: 1 1 100%; }
  .nav-gruppe { display: none; }
  .nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .nav a.aktiv { border-left: 0; border-bottom-color: #6F92CC; }
  .seitenleiste-fuss { border-top: 0; margin: 0; padding: 0 12px; }
  .inhalt { padding: 20px 16px 48px; }
  .raster-4, .raster-2, .raster-detail { grid-template-columns: 1fr; }
  .feld-paar { grid-template-columns: 1fr; }
}

/* ============================================================
   Fragebogen: Titel anlegen
   ============================================================ */

.schritte {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}

.schritte button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0 18px 11px 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-leise);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}

.schritte button.aktiv { color: var(--tinte); border-bottom-color: var(--amtsblau); }
.schritte button.fertig { color: var(--eingang); }
.schritte button:disabled { cursor: default; opacity: 0.55; }

.schritt-nr {
  display: inline-block;
  width: 19px; height: 19px;
  line-height: 19px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  font-size: 11.5px;
  margin-right: 7px;
}

.schritte button.aktiv .schritt-nr { border-color: var(--amtsblau); background: var(--amtsblau); color: #fff; }
.schritte button.fertig .schritt-nr { border-color: var(--eingang); background: var(--eingang); color: #fff; }

.wahl { display: grid; gap: 10px; margin-bottom: 8px; }

.wahl label {
  display: block;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: 13px 16px;
  cursor: pointer;
  background: #fff;
}

.wahl label:hover { border-color: var(--amtsblau); }
.wahl input { margin-right: 9px; }

.wahl label.gewaehlt {
  border-color: var(--amtsblau);
  background: #F3F7FD;
  box-shadow: inset 3px 0 0 var(--amtsblau);
}

.wahl-titel { color: var(--tinte); font-weight: 600; }
.wahl-text { display: block; margin: 4px 0 0 25px; font-size: 13px; color: var(--text-leise); }

.merksatz {
  background: var(--zins-bg);
  border-left: 3px solid #D2A24C;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 11px 15px;
  margin: 14px 0;
  font-size: 13.5px;
  color: #6B5220;
}

.position-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-bottom: 12px;
  background: #FCFDFE;
}

.position-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.position-kopf h3 { font-size: 15px; }

.entfernen {
  background: none;
  border: 0;
  color: var(--frist);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.schritt-fuss {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

.fehlerfeld { border-color: var(--frist) !important; }

.fehlermeldung {
  color: var(--frist);
  font-size: 13px;
  margin: 10px 0 0;
}

.vorschau-block {
  background: #F3F7FD;
  border: 1px solid #C7D6EE;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 16px;
}

.vorschau-block h3 { margin-bottom: 10px; }

.feld-drei { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

@media (max-width: 900px) {
  .feld-drei { grid-template-columns: 1fr; }
  .feld-anschrift { grid-template-columns: 1fr; }
  .schritte button { padding-right: 12px; font-size: 12.5px; }
}

/* ============================================================
   v2-Ergänzungen
   ============================================================ */

/* Das Logo in der Seitenleiste führt zur Übersicht. */
a.seitenleiste-kopf {
  display: block;
  text-decoration: none;
}

/* ============================================================
   v3-Ergänzungen: Fuß der Seitenleiste — Rechtliches, Abmelden
   ============================================================ */

.fuss-rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.fuss-rechtliches a {
  color: #6F82A3;
  font-size: 12px;
  text-decoration: none;
}

.fuss-rechtliches a:hover { color: #fff; }

.seitenleiste-fuss .abmelden {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  padding: 2px 0 0;
}

.seitenleiste-fuss .abmelden:hover { color: #fff; }
.seitenleiste-fuss .abmelden strong { font-weight: 600; color: #E8EEF9; display: block; }
.seitenleiste-fuss .abmelden svg { flex: none; }

.abmelden-mail {
  font-size: 12px;
  color: #6F82A3;
  word-break: break-all;
}

.seitenleiste-fuss .abmelden:hover .abmelden-mail { color: #A9BBD8; }

.seitenleiste-fuss a.abmelden { color: #A9BBD8; margin-bottom: 10px; }
.seitenleiste-fuss a.abmelden.aktiv strong { color: #fff; }

/* Fallmappe: Vorschau des Markdown-Textes als lesbare Seite */
.akte-vorschau h1 { font-size: 22px; margin: 0 0 6px; }
.akte-vorschau h2 { font-size: 17px; margin: 22px 0 8px; }
.akte-vorschau h3 { font-size: 14.5px; margin: 16px 0 6px; }
.akte-vorschau p, .akte-vorschau li { font-size: 13.5px; line-height: 1.5; }
.akte-vorschau ul { padding-left: 20px; margin: 4px 0 10px; }
.akte-vorschau table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
.akte-vorschau th, .akte-vorschau td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.akte-vorschau th { color: var(--text-leise); font-weight: 600; font-size: 12px; }
.akte-vorschau td.num { text-align: right; white-space: nowrap; }
.dokument-vorschau { font-size: 12.5px; }

/* Diagramme auf den Wissensseiten: responsiv, aber nicht riesig. */
.diagramm {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 10px 0;
}

/* Unterpunkte in der Seitenleiste (Nachschlagewerk-Navigation). */
.nav a.unterpunkt {
  padding-left: 49px;
  font-size: 13px;
}

@media (max-width: 900px) {
  .nav a.unterpunkt { padding: 8px 12px; }
}

/* Häkchen und Radios: nicht auf Feldbreite ziehen (Korrektur —
   die .feld-input-Regel oben gilt sonst auch für sie). */
.feld input[type="checkbox"],
.feld input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  margin-right: 8px;
  vertical-align: -1px;
}

/* ============================================================
   Druckansicht: Forderungsaufstellung und Ausfüllhilfe.
   Die Seitenleiste und alle Bedienelemente verschwinden.
   ============================================================ */

@media print {
  .seitenleiste,
  .zurueck,
  .knopf,
  .entfernen,
  .banner {
    display: none !important;
  }
  .portal { display: block; }
  .inhalt { max-width: none; padding: 0; }
  body { background: #fff; }
  .karte {
    border: 0;
    box-shadow: none;
    padding: 0 0 14px;
    break-inside: avoid;
  }
  .merksatz { border: 1px solid #D2A24C; }
  .nicht-drucken { display: none !important; }
}

/* ============================================================
   v15: Forderungsaufstellung in der Gliederung des amtlichen
   Formulars. Jede Position ist ein <tbody class="fa-gruppe"> aus
   Hauptzeile (.fa-pos), Fundstelle und Zinszeilen (.fa-unter);
   Kostenblöcke tragen eine Überschrift (.fa-block). Amounts stehen
   rechts wie in der Spalte „Euro“ des Formulars.
   ============================================================ */

.fa-tabelle tbody td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
.fa-tabelle tbody.fa-gruppe { border-bottom: 1px solid var(--linie); }
.fa-tabelle tbody.fa-gruppe:last-child { border-bottom: 0; }
.fa-tabelle .fa-pos td { padding-top: 10px; }
.fa-tabelle td.r { white-space: nowrap; padding-left: 16px; }
.fa-tabelle .fa-unter td:first-child { padding-left: 22px; }
.fa-tabelle .fa-unter td { padding-top: 3px; padding-bottom: 3px; }
.fa-tabelle .fa-gruppe tr:last-child td { padding-bottom: 10px; }
.fa-tabelle .fa-block td { padding: 12px 0 4px; font-weight: 600; color: var(--tinte); }
.fa-tabelle .summenzeile td { padding-bottom: 0; border-top: 0; font-size: 15px; }
.fa-fundstelle { color: var(--text-leise); font-size: 12.5px; }
.fa-fehlt { color: var(--frist); font-size: 12.5px; }
.fa-fehlt a { color: inherit; }
.fa-laufend { color: var(--text-leise); font-size: 12.5px; white-space: nowrap; }
.fa-entfaellt { margin: 0; color: var(--text-leise); }
.fa-kopf .feld-hinweis { margin-top: 12px; }

@media print {
  .fa-anlagen { break-before: page; }
  .fa-tabelle tbody.fa-gruppe { break-inside: avoid; }
}

/* ============================================================
   Vorschlagsliste (Gerichte): eigene Liste unter dem Eingabefeld,
   höchstens acht Treffer — ein <datalist> mit 654 Einträgen
   bremst den Browser bei jedem Tastendruck.
   ============================================================ */

.vorschlag-feld { position: relative; }

.vorschlaege {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 20;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(11, 31, 63, 0.12);
  max-height: 300px;
  overflow-y: auto;
}

.vorschlaege li { margin: 0; }

.vorschlaege button {
  display: block;
  width: 100%;
  padding: 7px 11px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.vorschlaege button:hover,
.vorschlaege button.aktiv { background: #EEF2F9; }

.vorschlaege .zeile-neben { display: block; }

/* ============================================================
   Fallmappe: drei Schritte, Vorschau als Fallübersicht oder
   Anschreiben
   ============================================================ */

.akte-schritt .karte-kopf h2 .schritt-nr { margin-right: 9px; }

.akte-vorschau .anschreiben-kopf { font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; white-space: pre-line; }
.akte-vorschau .anschreiben-datum { text-align: right; margin: 0 0 18px; font-size: 13.5px; }
.akte-vorschau .anschreiben-betreff { font-weight: 600; margin: 0 0 14px; }

/* ============================================================
   Bezahlte Freischaltung je Titel (v11)
   ============================================================ */

.freischaltung-preis {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  color: var(--tinte);
  margin: 4px 0 8px;
}

.zustimmung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: #fff;
  line-height: 1.45;
  cursor: pointer;
}
.zustimmung input { margin-top: 4px; flex: none; }

/* Druckansicht eines nicht freigeschalteten Titels: statt der Seite
   nur ein Hinweis. Die Bildschirmansicht bleibt davon unberührt. */
@media print {
  body.ausgabe-gesperrt .inhalt > * { display: none !important; }
  body.ausgabe-gesperrt .inhalt::before {
    content: "Dieser Ausdruck ist erst nach Freischaltung des Titels verfügbar. forderly.de";
    display: block;
    font: 15px/1.5 Georgia, "Times New Roman", serif;
    color: #000;
  }
}

/* ============================================================
   v12: Startseite als lange Scrollseite (Landingpage).
   Jeder Abschnitt beantwortet eine Frage; Grafiken als Inline-SVG.
   Präfix .lp- (Landingpage), damit nichts ins Portal durchschlägt.
   ============================================================ */

.lp { font-size: 16px; }

.lp-kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--linie);
}

.lp-kopf-innen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-kopf .marke {
  font-size: 24px;
  color: var(--tinte);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-kopf .marke svg { display: block; }

.lp-kopf-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14.5px;
}

.lp-kopf-nav a { color: var(--text-leise); text-decoration: none; }
.lp-kopf-nav a:hover { color: var(--amtsblau); }
.lp-kopf-nav a.knopf { color: #fff; padding: 8px 16px; }
.lp-kopf-nav a.knopf:hover { color: #fff; }

.lp-abschnitt { padding: 72px 24px; }
.lp-abschnitt-innen { max-width: 1080px; margin: 0 auto; }
.lp-abschnitt-schmal { max-width: 760px; margin: 0 auto; }
.lp-abschnitt-schmal-links { max-width: 760px; }
.lp-hell { background: var(--karte); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.lp-dunkel { background: var(--tinte); color: #E7EDF7; }
.lp-dunkel h2, .lp-dunkel h3 { color: #fff; }
.lp-dunkel p { color: #B6C4DC; }
.lp-dunkel a { color: #D6E2F5; }

.lp-abschnitt h2 {
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 14px;
}

.lp-abschnitt h3 { font-size: 19px; margin-bottom: 6px; }

.lp-frage {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amtsblau);
  margin-bottom: 10px;
}

.lp-dunkel .lp-frage { color: #8FA9D4; }

.lp-abschnitt p { margin: 0 0 14px; line-height: 1.6; }
.lp-abschnitt p:last-child { margin-bottom: 0; }
.lp-leise { color: var(--text-leise); font-size: 14px; }
.lp-dunkel .lp-leise { color: #8399BC; }

/* --- Hero ---------------------------------------------------- */

.lp-hero { padding: 88px 24px 80px; }

.lp-hero-innen {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: center;
}

.lp-hero h1 {
  color: #fff;
  font-size: 50px;
  line-height: 1.1;
  margin-bottom: 22px;
}

.lp-hero-text { font-size: 18px; color: #B6C4DC; max-width: 560px; }

.lp-hero-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.lp-hero-knoepfe .knopf { padding: 12px 22px; font-size: 16px; }
.lp-hero .knopf-leise { background: transparent; color: #fff; border-color: #6F92CC; }
.lp-hero .knopf-leise:hover { background: rgba(255,255,255,0.08); }

.lp-hero-bild { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }

/* --- Kostenvergleich ---------------------------------------- */

.lp-vergleich {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.lp-balken { display: block; width: 100%; height: auto; }

.lp-rechnung {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 8px 0 18px;
}

.lp-rechnung td { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.lp-rechnung td:last-child { text-align: right; white-space: nowrap; }
.lp-rechnung tr.summe td { border-bottom: 0; border-top: 2px solid var(--linie-stark); font-weight: 600; color: var(--tinte); }

/* --- Drei Schritte ------------------------------------------ */

.lp-schritte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.lp-schritt {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 24px 22px;
}

.lp-schritt-nr {
  display: inline-block;
  width: 34px; height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: var(--amtsblau);
  color: #fff;
  font-family: var(--serif);
  font-size: 18px;
  margin-bottom: 14px;
}

.lp-schritt p { font-size: 15px; color: var(--text-leise); }

/* --- Preis --------------------------------------------------- */

.lp-preis-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.lp-preis-karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
}

.lp-preis-karte .lp-preis {
  font-family: var(--serif);
  font-size: 52px;
  color: var(--tinte);
  line-height: 1;
  margin: 6px 0 4px;
}

.lp-preis-karte .lp-preis small { font-size: 18px; color: var(--text-leise); font-family: var(--sans); }
.lp-preis-karte h3 { margin: 26px 0 2px; }
.lp-preis-karte .lp-liste { margin-top: 6px; }

.lp-liste { list-style: none; margin: 16px 0 0; padding: 0; }

.lp-liste li {
  position: relative;
  padding: 7px 0 7px 28px;
  font-size: 15px;
  border-bottom: 1px solid var(--linie);
}

.lp-liste li:last-child { border-bottom: 0; }

.lp-liste li::before {
  content: "";
  position: absolute;
  left: 2px; top: 13px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--eingang);
  border-bottom: 2px solid var(--eingang);
  transform: rotate(-45deg);
}

.lp-liste.lp-liste-nein li::before {
  border: 0;
  width: 12px; height: 2px;
  top: 17px; left: 3px;
  background: var(--text-leise);
  transform: none;
}

.lp-dunkel .lp-liste li { border-color: rgba(255,255,255,0.1); color: #E7EDF7; }
.lp-dunkel .lp-liste li::before { border-color: #8FD4B4; }

/* --- Business ------------------------------------------------ */

.lp-business {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: center;
}

.lp-business-preis {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  text-align: center;
}

.lp-business-preis .lp-preis {
  font-family: var(--serif);
  font-size: 46px;
  color: #fff;
  line-height: 1;
  margin: 4px 0;
}

.lp-business-preis .lp-preis small { font-size: 17px; color: #B6C4DC; font-family: var(--sans); }

.lp-zielgruppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }

.lp-zielgruppen span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.22);
  color: #E7EDF7;
  font-size: 13.5px;
}

/* --- Fallmappe, Reihenfolge, Mahnbescheid ------------------- */

.lp-zweispaltig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.lp-grafik { display: block; width: 100%; height: auto; }

.lp-gegenueber {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}

.lp-gegenueber > div {
  border-radius: var(--radius);
  padding: 18px 20px;
  border: 1px solid var(--linie);
  background: var(--karte);
}

.lp-gegenueber h3 { font-size: 16px; }
.lp-gegenueber ul { margin: 8px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--text-leise); }
.lp-gegenueber li { margin: 4px 0; }
.lp-gegenueber .lp-wir { border-color: #C7D6EE; background: #F3F7FD; }

.lp-fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.lp-fakt {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.lp-fakt-wert { font-family: var(--serif); font-size: 30px; color: var(--tinte); line-height: 1.1; }
.lp-fakt-text { font-size: 13.5px; color: var(--text-leise); margin-top: 6px; }

/* --- Sicherheit ---------------------------------------------- */

.lp-sicherheit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}

.lp-sicherheit > div {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
}

.lp-sicherheit svg { display: block; margin-bottom: 12px; }
.lp-sicherheit h3 { font-size: 16.5px; }
.lp-sicherheit p { font-size: 14.5px; color: var(--text-leise); }

.lp-siegel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
}

.lp-siegel > span,
.lp-siegel > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 20px;
  background: var(--karte);
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
}

.lp-siegel svg { display: block; }

/* --- Häufige Fragen ------------------------------------------ */

.lp-faq details {
  border-bottom: 1px solid var(--linie);
  padding: 4px 0;
}

.lp-faq details:first-of-type { border-top: 1px solid var(--linie); }

.lp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 36px 14px 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--tinte);
  position: relative;
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 20px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--amtsblau);
  border-bottom: 2px solid var(--amtsblau);
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.lp-faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }

.lp-faq details p { padding: 0 0 14px; color: var(--text-leise); font-size: 15px; }

/* --- Schluss und Fuß ----------------------------------------- */

.lp-schluss { text-align: center; }
.lp-schluss h2 { font-size: 34px; }
.lp-schluss .knopf { padding: 12px 24px; font-size: 16px; margin-top: 10px; }

.lp-fuss {
  padding: 28px 24px 36px;
  font-size: 13px;
  color: var(--text-leise);
  border-top: 1px solid var(--linie);
}

.lp-fuss-innen {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
}

.lp-fuss a { color: var(--text-leise); text-decoration: none; margin-right: 16px; }
.lp-fuss a:hover { color: var(--amtsblau); }

.lp-rdg {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 13.5px;
  color: var(--text-leise);
  text-align: center;
}

@media (max-width: 900px) {
  .lp-abschnitt { padding: 52px 18px; }
  .lp-abschnitt h2 { font-size: 27px; }
  .lp-hero { padding: 56px 18px 52px; }
  .lp-hero-innen { grid-template-columns: 1fr; gap: 28px; }
  .lp-hero h1 { font-size: 36px; }
  .lp-hero-bild { max-width: 240px; }
  .lp-vergleich, .lp-preis-raster, .lp-business, .lp-zweispaltig, .lp-gegenueber { grid-template-columns: 1fr; gap: 24px; }
  .lp-schritte, .lp-fakten, .lp-sicherheit { grid-template-columns: 1fr; }
  .lp-kopf-nav a.lp-nur-breit { display: none; }
}

/* --- v14 (07.09.2026): Team und Business-Flat auf der Konto-Seite,
   Kündigungsseite (§ 312k BGB) --- */
.k-unter { font-size: 15px; margin: 22px 0 8px; }
.k-unter:first-child { margin-top: 0; }
.tabelle td .entfernen { font-size: 12.5px; }
.lp-business-preis .lp-preis-neben { color: #B6C4DC; font-size: 14px; margin: 4px 0 0; }
.lp-business-preis .lp-preis-neben strong { color: #fff; font-weight: 600; }
.kuendigung-art { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 6px; }
.kuendigung-art label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.kuendigung-art input { margin: 0; }

/* ============================================================
   v17 (15.10.2026): Kosten und Belege je Maßnahme; Belege zu
   Anlage A der Forderungsaufstellung, Kopien im Druck. Belegseiten
   stehen nicht in einer .karte (die bricht im Druck nicht um).
   ============================================================ */

.feld-titel { display: block; font-size: 13px; color: var(--text-leise); margin: 0 0 5px; }
.kp-posten .feld-paar .feld,
.kp-belege .feld-paar .feld { margin-bottom: 0; }
.kp-belege .liste-schlicht { margin-bottom: 10px; }
.kp-platz { margin-top: 10px; }
.fa-nachtragen { margin-top: 16px; }
.fa-nachtragen .kp-platz { margin-bottom: 6px; }

.fa-fs-eingabe {
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  width: 16em;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid var(--linie-stark);
  border-radius: 4px;
}

.fa-kopien-wahl label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 14px;
  font-size: 13.5px;
  cursor: pointer;
}

.beleg-seite { margin: 22px 0; }
.beleg-seite figcaption { font-size: 12.5px; color: var(--text-leise); margin: 0 0 6px; }
.beleg-seite img {
  display: block;
  max-width: min(100%, 760px);
  height: auto;
  border: 1px solid var(--linie);
  background: #fff;
}
.beleg-text {
  white-space: pre-wrap;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  max-width: 760px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  background: #fff;
}
.beleg-meldung { font-size: 13px; color: var(--frist); }
.nur-druck { display: none; }

/* Belegseiten im Querformat drucken auf einer Querformatseite (benannte
   Seite; Browser ohne Unterstützung passen sie in die Breite ein). */
@page beleg-quer { size: A4 landscape; }

@media print {
  .nur-druck:not([hidden]) { display: block; }
  .belegkopien .beleg-seite.beleg-quer { page: beleg-quer; }
  .beleg-seite.beleg-quer img { max-height: 165mm; }
  .belegkopien .beleg-seite { break-before: page; break-inside: avoid; margin: 0; }
  .belegkopien:not(:empty) { break-after: page; }
  .beleg-seite figcaption { color: #000; font-size: 10pt; margin: 0 0 4mm; }
  .beleg-seite img {
    border: 0;
    width: auto;
    max-width: 100%;
    max-height: 245mm;
    margin: 0 auto;
  }
  .beleg-text { border: 0; padding: 0; max-width: none; }
  .beleg-meldung { color: #000; }
}

/* ============================================================
   v18 (15.10.2026): Maßnahmen im Titel mit Aktionsspalte und
   Symbolen (.massnahmen-liste, .aktion, .symbol), Abstand zwischen
   Kosten und Status in der Maßnahmen-Tabelle, Kopf des Titels
   (.titel-aktionen), Fundstelle als freiwillige Angabe
   (.fa-freiwillig).
   ============================================================ */
.massnahmen-liste .massnahme-zeile {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}
.massnahme-info { flex: 1 1 auto; min-width: 0; }
.massnahme-aktionen {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* v21: Block rechts, Einträge linksbündig — die Symbole stehen in einer Spalte */
  gap: 3px;
  padding-top: 1px;
}
.aktion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--amtsblau);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.aktion:hover, .aktion:focus-visible { text-decoration: underline; }
.aktion-entfernen { color: var(--frist); }
.symbol { flex: 0 0 auto; }

.tabelle-massnahmen td.r, .tabelle-massnahmen th.r { padding-right: 24px; white-space: nowrap; }
/* Großbuchstaben machten aus „Maßnahme“ „MASSNAHME“ — hier in normaler Schreibung */
.tabelle-massnahmen th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.tabelle-massnahmen td .marke-status + .zeile-neben { display: block; margin-top: 4px; }

.titel-aktionen { display: flex; flex-shrink: 0; justify-content: flex-end; align-items: center; gap: 8px; }
.titel-aktionen .marke-status { margin-right: 4px; }
.titel-aktionen-trenner { width: 1px; align-self: stretch; background: var(--linie-stark); margin: 2px 4px; }

.fa-freiwillig { color: var(--text-leise); font-size: 12.5px; }

/* v20: Schritte einer Maßnahme — Angaben, Prüfen, Forderungsaufstellung,
   Paket und Versand. Der aktuelle Schritt in Amtsblau, erledigte mit
   blauem Ring. */
.schritte { margin: -6px 0 18px; }
.schritte ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.schritte li { display: flex; align-items: center; }
.schritte li + li::before { content: ''; width: 26px; height: 1px; background: var(--linie-stark); margin: 0 10px; }
.schritte a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-leise); text-decoration: none; font-size: 14px; }
.schritte a:hover { color: var(--amtsblau); }
.schritt-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--linie-stark); background: var(--karte);
  font-size: 12.5px; font-weight: 600;
}
.schritte li.erledigt .schritt-nr { border-color: var(--amtsblau); color: var(--amtsblau); }
.schritte li.aktiv a { color: var(--tinte); font-weight: 600; }
.schritte li.aktiv .schritt-nr { background: var(--amtsblau); border-color: var(--amtsblau); color: #fff; }

/* Paket und Versand */
.paket-liste li { position: relative; padding-left: 18px; }
.paket-liste li::before {
  content: ''; position: absolute; left: 3px; top: 16px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amtsblau);
}
.paket-dateien { margin-bottom: 12px; }
.paket-dateien .knopf { margin-top: 6px; }
.schritt-liste { margin: 0 0 12px; padding-left: 22px; font-size: 14px; }
.schritt-liste li { margin: 5px 0; }
.fa-weiter { margin-top: 18px; text-align: right; }

/* Angaben eines abgelegten Dokuments ändern */
.dok-aendern { margin: 10px 0 2px; padding: 14px 14px 4px; background: var(--papier); border-radius: var(--radius); }

/* ============================================================
   v21 (16.10.2026)
   ============================================================ */

/* Tabellen: rechtsbündige Zahlenspalten brauchen Abstand zur nächsten
   Spalte; Zebrastreifen am Bildschirm, damit sich Zeilen unterscheiden.
   Die Forderungsaufstellung (.fa-tabelle) gliedert mit eigenen Linien. */
.tabelle .r:not(:last-child) { padding-right: 22px; }
/* Spaltenköpfe in normaler Schreibung: Großbuchstaben machten aus „Maßnahme“ „MASSNAHME“ */
.tabelle th { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
@media screen {
  .tabelle:not(.fa-tabelle) th:first-child,
  .tabelle:not(.fa-tabelle) td:first-child { padding-left: 10px; }
  .tabelle:not(.fa-tabelle) th:last-child,
  .tabelle:not(.fa-tabelle) td:last-child { padding-right: 10px; }
  .tabelle:not(.fa-tabelle) > tbody > tr:nth-child(even):not(.summenzeile) > td { background: #F6F8FC; }
  .tabelle-klick > tbody > tr:hover > td { background: #ECF1F9; }
}
.tabelle td.num, .tabelle th.r { white-space: nowrap; }

/* Fristen: eine Zeile, Einzelheiten und Handgriffe aufklappbar */
.frist-zeile .zeile-neben { font-size: 12.5px; }
details.frist-mehr, details.mehr { margin-top: 4px; }
details.frist-mehr > summary, details.mehr > summary {
  cursor: pointer; font-size: 12.5px; color: var(--amtsblau);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
details.frist-mehr > summary::-webkit-details-marker, details.mehr > summary::-webkit-details-marker { display: none; }
details.frist-mehr > summary::before, details.mehr > summary::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); margin-right: 2px;
}
details.frist-mehr[open] > summary::before, details.mehr[open] > summary::before { transform: rotate(45deg); }
details.frist-mehr > div, details.mehr > div { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--linie); }
details.frist-mehr > div .zeile-neben, details.mehr > div .zeile-neben { display: block; margin-bottom: 3px; }
.frist-knoepfe { margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Schrittkopf einer Maßnahme: Schrittleiste links, „Weiter“ rechts —
   in jedem Schritt gleich hoch, nichts springt. */
.schritt-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; margin: -6px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--linie);
}
.schritt-kopf .schritte { margin: 0; }
.schritt-kopf .schritte ol { flex-wrap: nowrap; }
.schritt-kopf .knopf { white-space: nowrap; flex-shrink: 0; }
.schritte li.gesperrt a, .schritte li.gesperrt span.schritt-text { color: var(--linie-stark); }
.schritte li.gesperrt .schritt-nr { color: var(--linie-stark); }
.schritte span.schritt-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
/* v23: Zwei Zeilen in jedem Schritt — oben die Leiste, darunter links die
   Werkzeuge des Schritts (auch leer vorhanden), rechts „Weiter“ mit fester
   Breite. So stehen Leiste, Werkzeuge und „Weiter“ in jedem Schritt auf
   denselben Pixeln, und der Inhalt beginnt auf derselben Höhe. Der
   Schrittname reserviert die Breite seiner fetten Form (unsichtbare Kopie),
   sonst rücken die folgenden Schritte um ein paar Pixel, je nachdem, welcher
   aktiv ist. */
.schritt-kopf { flex-wrap: wrap; row-gap: 12px; }
.schritt-kopf .schritte { flex: 0 0 100%; }
.schritt-kopf .schritt-weiter { width: 300px; margin-left: auto; text-align: center; }
.schritt-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 43px; }
.schritt-name { display: inline-flex; flex-direction: column; }
.schritt-name::after { content: attr(data-name); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }
.schritt-fehler { margin: -6px 0 16px; }

/* Aufklappbare Abschnitte im Fragebogen (Anlagen und Versicherungen,
   Einzelheiten der Kostenvorschau) */
details.aufklapp { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 10px; }
details.aufklapp > summary {
  cursor: pointer; color: var(--amtsblau); font-size: 14px; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary::before {
  content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); flex: 0 0 auto;
}
details.aufklapp[open] > summary::before { transform: rotate(45deg); }
details.aufklapp > summary .zeile-neben { margin-left: 4px; }
details.aufklapp > .aufklapp-inhalt { margin-top: 10px; }

/* Forderungskonto im Titel: ältere Posten zusammengefasst */
.konto-mehr td { color: var(--text-leise); font-size: 13px; }
.konto-mehr a { font-size: 13px; }

/* Schlusskarte: kurze Liste statt Textblock */
.schluss-liste { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.schluss-liste li { margin: 4px 0; }
.merksatz details.mehr > div { border-left-color: #E5CF9F; color: #6B5220; }
.merksatz details.mehr > div p { margin: 0 0 6px; }

/* ---------- v22: Packliste mit Ampel (Paket und Versand) ----------
   Je Bestandteil eine Zeile: Punkt und Wort links, Text in der Mitte,
   Handgriffe rechts als Block mit linksbündigen Einträgen. */
.ampel-summe {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 6px; font-size: 13.5px; color: var(--text);
}
.ampel-liste { margin-bottom: 6px; }
.ampel-liste li.ampel-zeile {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 8px 10px 10px;
  border-left: 3px solid transparent;
}
.ampel-liste li.ampel-rot { border-left-color: var(--frist); background: #FDF7F6; }
.ampel-liste li.ampel-gelb { border-left-color: #C9932B; background: #FFFBF2; }
.ampel-liste li.ampel-gruen { border-left-color: #2E8B63; }
.ampel-status {
  flex: 0 0 132px;
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; padding-top: 2px;
}
.ampel-punkt {
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  background: var(--linie-stark); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ampel-rot .ampel-punkt { background: #C8372D; }
.ampel-gelb .ampel-punkt { background: #E3A936; }
.ampel-gruen .ampel-punkt, .ampel-punkt-gruen { background: #2E8B63; }
.ampel-rot .ampel-wort { color: var(--frist); }
.ampel-gelb .ampel-wort { color: var(--zins); }
.ampel-gruen .ampel-wort { color: var(--eingang); }
.ampel-grau .ampel-wort { color: var(--text-leise); font-weight: 400; }   /* abgeschickt, nicht in Forderly erfasst */
.ampel-text { flex: 1 1 auto; min-width: 0; }
.ampel-text .zeile-neben { display: block; margin-top: 2px; }
.ampel-text details.mehr { font-size: 12.5px; }
.ampel-aktionen {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;   /* Block rechts, Einträge linksbündig */
  gap: 5px; min-width: 116px; padding-top: 1px;
}
.ampel-hoch { position: relative; }
.ampel-hoch.laeuft { opacity: 0.55; pointer-events: none; }
.ampel-hoch.laeuft::after { content: ' …'; }
/* Dateiwahl unsichtbar, aber über das Label erreichbar */
.ampel-datei {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.ampel-hoch:focus-within { text-decoration: underline; }
.ampel-haken-feld { color: var(--text); gap: 6px; }
.ampel-haken-feld input { margin: 0; }
.ampel-offen { color: var(--frist); }
@media (max-width: 700px) {
  .ampel-liste li.ampel-zeile { flex-wrap: wrap; }
  .ampel-status { flex-basis: 100%; }
  .ampel-aktionen { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
@media print {
  .ampel-liste li.ampel-rot, .ampel-liste li.ampel-gelb { background: none; }
  .ampel-aktionen { display: none; }
}