/* ============================================================
   Forderly – Stylesheet
   Keine externen Ressourcen, keine Inline-Styles (CSP-konform).
   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; }

/* ============================================================
   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; }