/* Verwalterradar – Fachpublikation: Serifen, Linien, eine Akzentfarbe. Keine externen Ressourcen, keine Skripte.
   Designsystem: docs/design.md. Schriften: site/fonts/ (SIL OFL, selbst gehostet, woff2-Subsets). */

@font-face { font-family: "VR Serif"; src: url("/assets/fonts/source-serif-4-regular.58b1565e.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VR Serif"; src: url("/assets/fonts/source-serif-4-semibold.b40818c8.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "VR Sans"; src: url("/assets/fonts/source-sans-3-regular.445e1588.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "VR Sans"; src: url("/assets/fonts/source-sans-3-semibold.c882962e.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
/* Ersatzschriften mit angepasster Zeichenbreite (size-adjust: mittlere Zeichenbreite der VR-Schrift gegenüber der lokalen Systemschrift, gemessen am echten Seitentext),
   damit der Wechsel zur selbst gehosteten Schrift den Text nicht umbricht (kein Layout-Sprung). Fehlt die lokale Schrift, greift der übrige Schriftstapel. */
@font-face { font-family: "VR Serif Fallback"; src: local("Georgia"); font-weight: 400; size-adjust: 100.24%; }
@font-face { font-family: "VR Serif Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600; size-adjust: 87.84%; }
@font-face { font-family: "VR Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 91.65%; }
@font-face { font-family: "VR Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 88.86%; }

:root {
  color-scheme: light;
  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --paper: #ffffff;
  --paper-2: #f5f2ec;
  --rule: #d6d2ca;
  --rule-strong: #8c877d;
  --accent: #7a1f2b;
  --accent-hover: #4f1019;
  --warn-bg: #fbf1d6;
  --warn-ink: #4a3300;
  --focus: #ffbf47;
  --serif: "VR Serif", "VR Serif Fallback", Georgia, "Times New Roman", Times, serif;
  --sans: "VR Sans", "VR Sans Fallback", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 38rem; /* Lesebreite: 60–75 Zeichen Lauftext (gemessen in Chrome, siehe docs/design.md) */
  --frame: 68rem;
  --marginal: 19rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  border-top: 3px solid var(--accent);
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 0.06em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.12em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 5px var(--ink); }
a:focus-visible { background: var(--focus); color: var(--ink); box-shadow: 0 -2px var(--focus), 0 4px var(--ink); outline: none; text-decoration: none; }

svg.icon { width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: 0.35em; flex: none; }

.skip { position: absolute; left: -999px; top: 0; z-index: 10; background: var(--focus); color: var(--ink); padding: 0.6rem 1rem; font-family: var(--sans); }
.skip:focus { left: 0; }

.rahmen { max-width: var(--frame); margin: 0 auto; padding: 0 1.25rem; }
.text { max-width: var(--measure); min-width: 0; overflow-wrap: break-word; hyphens: manual; }  /* Silbentrennung nur im Fließtext schmaler Spalten: Abschnitt „Schleife 8“ */

/* Zweispaltig ab 1100 px: Lesetext links in Lesebreite, Marginalspalte rechts (Springmarken, Stand und Quelle, nächste Fristen).
   Mobile first: darunter steht die Marginalspalte nach dem Text; die Springmarken sind dort ausgeblendet. */
.marginal { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); margin-top: 3rem; max-width: var(--measure); }
.marginal__block { border-top: 1px solid var(--rule); padding: 0.8rem 0 0.9rem; }
.marginal__block:first-child { border-top: 2px solid var(--ink); }
.marginal__block--marken { display: none; }
.marginal h2 { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 0.5rem; padding: 0; border: 0; line-height: 1.3; }
.marginal p { margin: 0.5rem 0 0; }
.marginal__liste { list-style: none; margin: 0; padding: 0; }
.marginal__liste li { margin: 0 0 0.4rem; line-height: 1.45; }
.marginal__fristen .datum { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.marginal__fakten, .marginal__legende { display: grid; grid-template-columns: 7rem 1fr; gap: 0.3rem 0.75rem; margin: 0; }
.marginal__fakten dt { font-weight: 600; color: var(--ink); }
.marginal__fakten dd, .marginal__legende dd { margin: 0; overflow-wrap: anywhere; }
.marginal__legende { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.marginal .badge { color: var(--ink); }
@media (min-width: 1100px) {
  .rahmen--spalten { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--marginal)); column-gap: 4rem; justify-content: space-between; align-items: start; }
  .rahmen--spalten > .text { grid-column: 1; min-width: 0; }
  .marginal { grid-column: 2; margin-top: 0.6rem; max-width: none; }
  .marginal__block--marken { display: block; }
}

/* Kopfzeile: Wortmarke und Navigation, eine Linie, kein Hintergrund */
.kopf { border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; padding-top: 0.9rem; padding-bottom: 0; }
.marke { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; padding-bottom: 0.9rem; }
.marke:hover { color: var(--ink); }
.marke__zeichen { width: 1.75rem; height: 1.75rem; flex: none; color: var(--ink); }
.marke__zeichen .punkt { fill: var(--accent); }
.marke__name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em; line-height: 1; }
.hauptnav ul { display: flex; flex-wrap: wrap; gap: 0 0.25rem; list-style: none; margin: 0; padding: 0; }
.hauptnav a { display: inline-block; color: var(--ink); text-decoration: none; padding: 0.75rem 0.65rem; border-bottom: 3px solid transparent; margin-bottom: -1px; min-height: 2.75rem; }
.hauptnav a:hover { border-bottom-color: var(--rule-strong); }
.hauptnav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--accent); }

main { padding-top: 2.25rem; padding-bottom: 4rem; }

/* Typografie */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--ink); overflow-wrap: break-word; hyphens: manual; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; line-height: 1.25; margin: 2.5rem 0 0.75rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
h1 + h2, h2:first-child, .box + h2, .banner + h2 { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
h3 { font-family: var(--sans); font-size: 1.05rem; line-height: 1.35; margin: 1.5rem 0 0.4rem; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.15rem; line-height: 1.5; color: var(--ink); margin-bottom: 1.5rem; }
small, .klein { font-size: 0.9rem; }
.meta, .meta-text, .norm, .hinweis, .hinweis-recht, .leer, .stand, #treffer { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.leer { font-style: normal; }
strong { font-weight: 600; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
pre { background: var(--paper-2); border: 1px solid var(--rule); padding: 0.75rem 1rem; overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.25rem; }
  .lead { font-size: 1.05rem; }
  .rahmen { padding: 0 1rem; }
  main { padding-top: 1.25rem; padding-bottom: 3rem; }
  .kopf .rahmen { gap: 0 1rem; }
  .marke__name { font-size: 1.25rem; }
  .hauptnav a { padding: 0.65rem 0.5rem; }
}

/* Banner (Entwurf, Hinweis): Fläche mit Linie oben und unten, Warnzeichen, kein Seitenbalken */
.banner { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--warn-bg); color: var(--warn-ink); border-top: 1px solid var(--warn-ink); border-bottom: 1px solid var(--warn-ink); padding: 0.85rem 1rem; margin: 1.25rem 0; font-family: var(--sans); font-size: 0.95rem; }
.banner svg.icon { width: 1.4em; height: 1.4em; margin: 0.1em 0 0; }
.banner > div { flex: 1; }
.banner strong { display: block; }
.banner p { margin: 0.25rem 0 0; }
.banner a { color: inherit; }
.box { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.9rem 0; margin: 1.5rem 0; }
.box p:last-child { margin-bottom: 0; }
.box h2 { margin: 0 0 0.4rem; padding: 0; border: 0; font-size: 1.15rem; }

/* Labels: Wort in Kapitälchen-Optik, Erklärung im Titel und in der Legende auf /methodik/. Nie Pille, nie nur Farbe. */
.badge { font-family: var(--sans); font-weight: 600; font-size: 0.82em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.badge--entwurf, .badge--abgelaufen { color: var(--ink-2); font-weight: 400; }
.pruefhinweis { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 0.6rem; margin: 1rem 0 0; }
.pruefhinweis .badge { color: var(--ink); }
.labels-legende { display: grid; gap: 0.9rem; margin: 1rem 0; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.labels-legende > div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.25rem 1rem; align-items: start; }
.labels-legende p { margin: 0; }
@media (max-width: 40rem) { .labels-legende > div { grid-template-columns: 1fr; } }

/* Fristenliste und Startliste: Linien, Datumsspalte, keine Kästen */
.liste { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.liste > li { border-bottom: 1px solid var(--rule); padding: 1rem 0 0.9rem; }
.liste > li.abgelaufen { color: var(--ink-2); }
.liste li h2, .liste li h3 { margin: 0 0 0.3rem; padding: 0; border: 0; font-size: 1.15rem; line-height: 1.3; }
.liste li p { margin-bottom: 0.4rem; }
.liste li p:last-child { margin-bottom: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; align-items: baseline; margin: 0 0 0.4rem; }
.meta .stichtag { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.liste > li.abgelaufen .meta .stichtag { color: var(--ink-2); }

.filter { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: end; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.9rem 0; margin: 1rem 0 0; font-family: var(--sans); }
.filter label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }
.filter select, .attrappe select, .attrappe input { font: inherit; font-family: var(--sans); padding: 0.45rem 0.6rem; min-width: 12rem; max-width: 100%; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); min-height: 2.5rem; }
#treffer { margin: 0.5rem 0 0; }

/* Startseite */
.start-angebot { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin: 2rem 0; }
.start-angebot h2 { margin: 0 0 0.5rem; padding: 0; border: 0; }
.downloads { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; font-family: var(--sans); }
.downloads a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.downloads a:hover { background: var(--paper-2); color: var(--ink); }
.downloads a:focus-visible { background: var(--focus); box-shadow: none; outline: 3px solid var(--ink); }
.downloads svg.icon { width: 1.25em; height: 1.25em; }
/* Schleife 1 (Conversion): erster Schritt als gefüllter Knopf in der Akzentfarbe (Weiß auf --accent 10,2:1); nächste Schritte auf Handy untereinander */
.downloads a.primaer { background: var(--accent); border-color: var(--accent); color: var(--paper); font-weight: 600; }
.downloads a.primaer:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); }
.downloads a.primaer:focus-visible { background: var(--focus); color: var(--ink); }
.start-aktionen { margin: 0 0 1.5rem; }
.angebot-zeile p { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.6rem 0; margin: 1.25rem 0; font-size: 1rem; color: var(--ink); }
.angebot-zeile a { font-weight: 600; }
.lead .sprung { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: 1rem; }
.angebot-kasten { border-top: 2px solid var(--ink); padding-top: 0.25rem; margin: 2rem 0; }
.angebot-kasten h2 { border-top: 0; padding-top: 0.5rem; margin-top: 0.5rem; }
.angebot-kasten .angebot-zeile p { border: 0; padding: 0; margin: 0 0 0.5rem; }
@media (max-width: 40rem) {
  .start-aktionen li, .planer-downloads li { flex: 1 1 100%; }
  .start-aktionen a, .planer-downloads a { width: 100%; }
}
.rubriken { margin: 1.25rem 0 1.25rem; font-family: var(--sans); }
.rubriken h2 { margin: 0 0 0.25rem; padding: 0; border: 0; font-size: 1.05rem; font-family: var(--sans); }
.rubriken ul { list-style: none; margin: 0; padding: 0; }
.rubriken li { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; border-top: 1px solid var(--rule); }
.rubriken li:last-child { border-bottom: 1px solid var(--rule); }
.rubriken .zaehler { color: var(--ink-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.rubrik { margin-top: 2.5rem; }
.fristenbox { margin: 2rem 0; }
.fristenbox h2 { margin: 0 0 0.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.fristenbox .hinweis { margin-bottom: 0.5rem; }
.fristenbox ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.fristenbox li { display: grid; grid-template-columns: 7rem 1fr; gap: 0.1rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.fristenbox .datum { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }
.fristenbox .norm { grid-column: 2; }
@media (max-width: 40rem) {
  .fristenbox li { grid-template-columns: 1fr; }
  .fristenbox .norm { grid-column: 1; }
}
.fristenbox--leer p:last-child { margin-bottom: 0; }
.start-links { font-family: var(--sans); }

/* Fristenseite: Klartext-Box mit drei Fragen, danach aufklappbare Details */
.klartext { background: var(--paper-2); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 1rem 1.25rem 1.1rem; margin: 1.5rem 0 2rem; }
.klartext h2 { margin: 0 0 0.75rem; padding: 0; border: 0; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.klartext h3 { margin: 1.1rem 0 0.35rem; font-family: var(--serif); font-size: 1.1rem; }
.klartext h3:first-of-type { margin-top: 0; }
.klartext ul, .klartext ol { margin: 0 0 0.5rem; padding-left: 1.3rem; }
.klartext li { margin-bottom: 0.35rem; }
.klartext p { margin-bottom: 0.5rem; }
dl.kern { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1.25rem; margin: 0 0 0.5rem; }
dl.kern dt { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.5rem; }
dl.kern dd { margin: 0; }
.stichtag-gross { font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.stichtag-rhythmus { font-weight: 600; font-size: 1.05rem; }
.stichtag-typ { color: var(--ink-2); font-family: var(--sans); font-size: 0.9rem; }
/* Schleife 8: Reihenfolge Bis wann, Was, Wer, Norm steht im Quelltext; keine Umordnung per CSS mehr (Desktop und Handy gleich) */
@media (min-width: 40rem) {
  dl.kern { grid-template-columns: 7rem 1fr; }
  dl.kern dt { margin-top: 0; padding-top: 0.2rem; }
  .klartext { padding: 1.25rem 1.5rem 1.25rem; }
}
.klartext .pruefhinweis { border-top-color: var(--rule-strong); }
.schritte-mehr { margin: 0 0 0.5rem; }
.schritte-mehr > summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-family: var(--sans); font-weight: 600; color: var(--accent); text-decoration: underline; }
.schritte-mehr > summary:hover { color: var(--accent-hover); }
.schritte-mehr[open] > summary { margin-bottom: 0.25rem; }

details.abschnitt { border-top: 1px solid var(--rule); margin: 0; }
details.abschnitt:last-of-type { border-bottom: 1px solid var(--rule); }
details.abschnitt > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 0.9rem 0; list-style: none; min-height: 2.75rem; }
details.abschnitt > summary::-webkit-details-marker { display: none; }
details.abschnitt > summary h2 { margin: 0; padding: 0; border: 0; font-size: 1.2rem; flex: 0 0 auto; overflow-wrap: normal; }
details.abschnitt > summary .zaehler { flex: 1 1 auto; text-align: right; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); font-weight: 400; }
details.abschnitt > summary svg.icon { width: 1.3rem; height: 1.3rem; margin: 0; color: var(--ink-2); transition: none; }
details.abschnitt[open] > summary svg.icon { transform: rotate(180deg); }
details.abschnitt > summary:hover h2 { color: var(--accent-hover); }
details.abschnitt > .inhalt { padding: 0 0 1.25rem; }
details.abschnitt .inhalt > :first-child { margin-top: 0; }
details.abschnitt .inhalt h3:first-child { margin-top: 0; }

/* Definitionslisten, Zitate, Listen */
dl.fakten { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1.5rem; margin: 1rem 0; }
dl.fakten dt { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; margin-top: 0.6rem; }
dl.fakten dd { margin: 0; }
@media (min-width: 40rem) {
  dl.fakten { grid-template-columns: 12rem 1fr; }
  dl.fakten dt { margin-top: 0; padding-top: 0.1rem; }
}
blockquote.zitat { margin: 1rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--ink); }
blockquote.zitat p { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.5; }
blockquote.zitat footer { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
ul.punkte, ol.schritte, ol.punkte { padding-left: 1.4rem; margin: 0 0 1rem; }
ul.punkte li, ol.schritte li, ol.punkte li { margin-bottom: 0.45rem; padding-left: 0.15rem; }
ol.schritte li::marker { font-weight: 600; }
.quelle-zeile { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
ul.punkte .stichtag { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Planer-Seite: Terminliste mit Datumsspalte, Ableitungshinweis beim Datum, Fassungswechsel als eigene Zeile */
ul.termine { list-style: none; margin: 0.5rem 0 1.5rem; padding: 0; border-top: 1px solid var(--rule); }
ul.termine > li { display: grid; grid-template-columns: 11rem 1fr; gap: 0.1rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.termin-datum { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.termin-datum .stichtag { display: block; font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.termin-text .meta-text { display: block; margin-top: 0.1rem; }
.fassung { display: block; margin-top: 0.35rem; padding-left: 0.75rem; border-left: 2px solid var(--rule-strong); font-family: var(--sans); font-size: 0.9rem; }
.fassung a { display: inline-block; margin-left: 0.35rem; }
@media (max-width: 40rem) {
  ul.termine > li { grid-template-columns: 1fr; }
}

/* Tabellen */
.tabelle-wrap { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-family: var(--sans); font-size: 0.95rem; }
caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
th { background: var(--paper-2); font-weight: 600; border-bottom-color: var(--rule-strong); padding-left: 0.5rem; }
thead th { border-top: 1px solid var(--rule-strong); }
tbody th { background: transparent; border-bottom-color: var(--rule); padding-left: 0; }
td.zahl { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
td.leer { color: var(--ink-2); }

/* Fußzeile */
.fuss { border-top: 1px solid var(--rule); background: var(--paper-2); font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); margin-top: 2rem; }
.fuss .rahmen { padding-top: 1.5rem; padding-bottom: 2rem; }
.fuss p { margin: 0 0 0.5rem; max-width: var(--measure); }
.fuss .disclaimer { color: var(--ink); }
.fuss ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; }
.fuss li a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0; color: var(--ink); }
.fuss .marke { padding: 0 0 0.75rem; }
.fuss .marke__name { font-size: 1.1rem; }

/* Köder-Seite, Mediadaten: Checkliste, Textbaustein, Formular-Attrappe */
ul.checkliste { list-style: none; padding-left: 0; margin: 0 0 1.25rem; }
ul.checkliste li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 0.4rem; margin-bottom: 0.6rem; }
.checkliste .kasten { font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.checkliste .text { display: block; }
.checkliste .norm { display: block; }
blockquote.beschluss { margin: 1rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid var(--rule-strong); }
blockquote.beschluss p { margin: 0 0 0.5rem; }
.attrappe { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1rem 0; margin: 1rem 0; font-family: var(--sans); }
.attrappe fieldset { border: 0; margin: 0; padding: 0; }
.attrappe button { font: inherit; font-family: var(--sans); font-weight: 600; padding: 0.55rem 1.25rem; min-height: 2.75rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 0; }
.attrappe button:disabled { cursor: not-allowed; background: var(--paper-2); border-color: var(--rule-strong); color: var(--ink-2); }
.attrappe label { font-weight: 600; }
.attrappe .klein { color: var(--ink-2); margin: 0.5rem 0 0; }
.attrappe .hinweis { margin: 0.5rem 0 0; }
.newsletter-hinweis { font-family: var(--sans); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.8rem 0; margin: 1rem 0; }
.attrappe input[type="checkbox"] { min-width: 0; min-height: 0; width: 1.25rem; height: 1.25rem; margin: 0.1rem 0.4rem 0 0; vertical-align: text-top; }
.attrappe p.klein label { font-weight: 400; }
.nur-lesen { position: absolute; left: -999px; }
.brotkrumen { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); margin: 0 0 0.9rem; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.brotkrumen li + li::before { content: "\203A"; margin-right: 0.5rem; }

@media print {
  .kopf .hauptnav, .fuss ul, .filter, .skip, #treffer, .marginal { display: none; }
  :root { --ink: #000; --ink-2: #333; --paper: #fff; --paper-2: #fff; --rule: #999; --accent: #000; --accent-hover: #000; }
  body { font-size: 11pt; border-top: 0; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .klartext { border: 1px solid #000; }
  details.abschnitt > summary svg.icon { display: none; }
  details.abschnitt > *:not(summary) { display: block !important; }
  details.abschnitt::details-content { content-visibility: visible; display: block; }
  .schritte-mehr > summary { display: none; }
  .schritte-mehr > *:not(summary) { display: block !important; }
  .schritte-mehr::details-content { content-visibility: visible; display: block; }
  .liste > li, .fristenbox li, details.abschnitt, blockquote { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

/* Schleife 4: Fristenseiten vertiefen (Rollen-Hinweis, Rechenbeispiel, Nächster Schritt, Verwandte Fristen mit Grund) */
.wer-hinweis { display: block; margin-top: 0.2rem; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.beispiel { display: block; margin-top: 0.4rem; padding-left: 0.75rem; border-left: 2px solid var(--rule-strong); font-weight: 400; font-size: 1rem; }
.naechster-schritt { margin: 0.5rem 0 0.75rem; font-family: var(--sans); font-size: 0.95rem; }
#verwandt + ul li, #fristen + ul li { margin-bottom: 0.7rem; }
.verwandt-meta { display: block; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.rhythmus-text { display: block; margin-top: 0.2rem; font-weight: 400; font-size: 1.05rem; }

/* Schleife 2: Tippziele. WCAG 2.2 AA (2.5.8) verlangt 24 px; alleinstehende Links und Steuerelemente haben hier mindestens 28 px (Desktop)
   und 44 px (Handy, grober Zeiger). Links mitten im Satz sind ausgenommen. Messung: docs/design.md, Abschnitt Barrierefreiheit. */
.marke { min-height: 2.75rem; }
.rubriken a, .marginal__liste a, .start-links a, .marginal p a, .fassung a { display: inline-flex; align-items: center; min-height: 1.75rem; }
.filter select, .attrappe select, .attrappe input:not([type="checkbox"]) { min-height: 2.75rem; min-width: min(12rem, 100%); }
.filter > div { min-width: 0; max-width: 100%; }  /* bei 400 % Zoom (≈ 320 px und weniger) kein Überlauf */
details.abschnitt > summary { flex-wrap: wrap; }
td a { display: inline-flex; align-items: center; min-height: 1.75rem; }
thead th { padding-left: 0; }  /* Kopfzelle und Zelle beginnen an derselben Kante */
@media (max-width: 40rem), (pointer: coarse) {
  .rubriken a, .marginal__liste a, .start-links a, .marginal p a, .fassung a, td a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  td a { min-width: 2.75rem; }
  .liste h3 a { display: inline-block; padding: 0.65rem 0; margin: -0.65rem 0; }
  .fristenbox li a, .marginal__fristen a { display: inline-block; padding: 0.55rem 0; margin: -0.55rem 0; }
  .marginal__liste li { margin-bottom: 0; }
}
@media (max-width: 40rem) {
  /* Tabellen auf dem Handy: Spalten dürfen umbrechen, damit nichts abgeschnitten wird; breite Tabellen scrollen im Rahmen */
  table { min-width: 0; font-size: 0.9rem; }
  th, td { padding-right: 0.5rem; overflow-wrap: break-word; hyphens: manual; }
  caption { padding-right: 0.5rem; }
}
.tabelle-wrap:focus-visible { outline-offset: 2px; }

/* Schleife 2: Bewegung. Die Seite hat keine Übergänge; die Regel hält das auch für künftige Änderungen fest. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Schleife 8: Politur nach den Nutzertests (Runde 3).
   Silbentrennung: nur im Fließtext schmaler Spalten (Handy), nie in Überschriften, Tabellen, Links und Fristentiteln; Mindestlänge 10 Zeichen,
   mindestens 5 Zeichen vor und nach der Trennstelle (kein „Anfechtungskla-ge“, „Nachrüs-tung“, „Um-satzsteuer“). */
@media (max-width: 40rem) {
  .text p, .text li, .text dd, .text blockquote p {
    hyphens: auto; -webkit-hyphens: auto;
    hyphenate-limit-chars: 10 5 5;
    -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
  }
  .text a, .text strong, .text th, .text td, .text .norm, .text .datum { hyphens: manual; -webkit-hyphens: manual; }
}
/* Aufklappzeile (details.abschnitt): drei feste Spalten (Titel, Zusatzangabe, Pfeil) in einer Zeile. Ist die Zusatzangabe lang, bricht sie in ihrer
   Spalte um; der Pfeil bleibt rechts und rutscht nicht in eine eigene Zeile (vorher: flex-wrap). */
details.abschnitt > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; flex-wrap: nowrap; }
details.abschnitt > summary h2 { min-width: 0; }
details.abschnitt > summary .zaehler { min-width: 0; }
details.abschnitt > summary svg.icon { justify-self: end; }
/* „Weitere Schritte (n)“: sieht wie ein Aufklappelement aus (Pfeil, wie die Abschnitte) */
.schritte-mehr > summary { justify-content: space-between; gap: 1rem; list-style: none; text-decoration: none; }
.schritte-mehr > summary::-webkit-details-marker { display: none; }
.schritte-mehr > summary > span { text-decoration: underline; }
.schritte-mehr > summary svg.icon { width: 1.3rem; height: 1.3rem; margin: 0; color: var(--ink-2); }
.schritte-mehr[open] > summary svg.icon { transform: rotate(180deg); }
.schritte-mehr { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.schritte-mehr[open] > summary { margin-bottom: 0.25rem; }

/* Schleife 2: Druck. Navigation, Filter, Formular-Attrappen und Sprungmarken fallen weg; Schwarzweiß-tauglich (Hinweisflächen ohne Farbe,
   Unterstreichung bleibt); Tabellen vollständig und mit wiederholtem Kopf; keine Umbrüche in Terminzeilen, Tabellenzeilen, Zitaten. */
.druck-quelle { display: none; }
@page { margin: 16mm 15mm; }
@media print {
  :root { --warn-bg: #fff; --warn-ink: #000; --rule-strong: #666; }
  body { font-size: 11pt; line-height: 1.5; }
  p, li, dd { orphans: 3; widows: 3; }
  h1, h2, h3, h4, caption, summary { break-after: avoid; }
  .rahmen { max-width: none; padding: 0; }
  main { padding-top: 1rem; padding-bottom: 0; }
  .kopf { border-bottom: 1px solid #000; }
  .kopf .rahmen { padding-top: 0; }
  .marke { min-height: 0; padding-bottom: 0.4rem; }
  .rubriken, .attrappe, .newsletter-hinweis, .filter, .skip, .marginal, [hidden] { display: none !important; }
  .banner { background: #fff; border: 1px solid #000; }
  .banner svg.icon { display: none; }
  .badge { text-decoration: underline; }  /* Label auch ohne Farbe erkennbar */
  .tabelle-wrap { overflow: visible; }
  table { min-width: 0; width: 100%; font-size: 9.5pt; }
  thead { display: table-header-group; }
  tr, ul.termine > li, .fassung, blockquote.zitat, blockquote.beschluss, .pruefhinweis, .box, .start-angebot { break-inside: avoid; }
  th { background: #fff; border-bottom: 1px solid #000; }
  /* Adressen: externe vollständig (siehe oben), interne mit Pfad; die Adresse der Seite steht in der Fußzeile (.druck-quelle) */
  main .text p a[href^="/"]::after, .downloads a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: normal; overflow-wrap: anywhere; }
  a[href^="#"]::after, a.url::after { content: none !important; }
  .downloads { display: block; }
  .downloads a, .start-links a, .fassung a, .marginal p a, td a { display: inline; border: 0; padding: 0; margin: 0; min-height: 0; }  /* Adresse in Klammern bleibt mit dem Leerzeichen am Linktext */
  .liste h3 a, .fristenbox li a { padding: 0; margin: 0; }
  .downloads li { margin-bottom: 0.3rem; }
  .fuss { background: #fff; border-top: 1px solid #000; margin-top: 1.5rem; }
  .fuss .rahmen { padding-top: 0.6rem; padding-bottom: 0; }
  .fuss .disclaimer { color: #000; }
  .druck-quelle { display: block; font-size: 9pt; color: #333; margin: 0.3rem 0 0; overflow-wrap: anywhere; }
}

/* Landing-Kandidat v2 (VR Board #4, 02.11.2026) – Startseite: Kopf mit einer Hauptaktion, Dateien als Textlinks, ein echter Beispiel-Eintrag.
   Ergänzt site/style.css (wird bei Integration ans Ende angehängt). Nur bestehende Tokens, keine externen Ressourcen, keine Bewegung. */

/* Kopf: H1 als eine Aussage, Lead ein Satz, darunter genau eine gefüllte Fläche */
.start-kopf { margin: 0 0 2.5rem; }
.start-kopf h1 { font-size: 2.5rem; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.6rem; max-width: 16em; }
.start-kopf .lead { margin: 0 0 1.5rem; max-width: 32em; }

.hauptaktion { margin: 0 0 0.9rem; font-family: var(--sans); }
.hauptaktion__link { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.65rem 1.4rem; background: var(--accent); border: 1px solid var(--accent); color: var(--paper); font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.hauptaktion__link:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); text-decoration: none; }
.hauptaktion .hauptaktion__link:focus-visible { background: var(--focus); border-color: var(--ink); color: var(--ink); outline: 3px solid var(--ink); outline-offset: 0; box-shadow: none; }

/* Dateien nachgeordnet: Fließtext mit normalen Links, keine Schaltflächen */
.nebenaktion { margin: 0; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-2); }

/* Beispiel-Eintrag: das große Stichtagsdatum ist das eine prägende Element; Linien statt Karte */
.start-beispiel { margin: 0 0 2.5rem; }
.start-beispiel h2 { margin: 0 0 1rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.start-beispiel__eintrag { display: grid; grid-template-columns: 1fr; gap: 0.25rem 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.start-beispiel__datum { margin: 0; font-weight: 600; line-height: 1.1; }
.start-beispiel__datum time { display: block; white-space: nowrap; font-size: 2.25rem; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; color: var(--ink); }
.start-beispiel__typ { font-family: var(--sans); font-size: 0.9rem; font-weight: 400; color: var(--ink-2); }
.start-beispiel__inhalt { min-width: 0; }
.start-beispiel h3 { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; margin: 0.5rem 0 0.75rem; }
.start-beispiel__fakten { display: grid; grid-template-columns: 1fr; gap: 0.1rem 1rem; margin: 0 0 0.75rem; }
.start-beispiel__fakten dt { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--ink-2); margin-top: 0.5rem; }
.start-beispiel__fakten dd { margin: 0; }
.start-beispiel__fakten .wer-hinweis { display: block; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.start-beispiel .url { overflow-wrap: anywhere; }
.start-beispiel .pruefhinweis { margin-top: 0.5rem; }

/* Ab 40rem: Merkmale zweispaltig. Das Datum bleibt über dem Eintrag: Die Lesespalte ist auch am Desktop zu schmal für
   Datum links + Merkmal-Spalte + Wert (Sichtprüfung 03.11.2026: Wert nur ~250 px, „Wohnungseigentümergemeinschaft“ brach mitten im Wort). */
@media (min-width: 40rem) {
  .start-beispiel__fakten { grid-template-columns: 8rem minmax(0, 1fr); }
  .start-beispiel__fakten dt { margin-top: 0; padding-top: 0.1rem; }
}

@media (max-width: 40rem) {
  .start-kopf h1 { font-size: 1.85rem; }
  .hauptaktion__link { display: flex; justify-content: center; width: 100%; text-align: center; }
  .nebenaktion a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .start-beispiel__datum time { font-size: 1.9rem; }
}

@media print {
  .hauptaktion__link { background: none; color: var(--ink); border: 1px solid var(--ink); }
}

/* V6 „Folgen zuerst“ (Board, 03.11.2026): Folgen und „Was ist zu tun?“ vor Norm und Details; nur bestehende Tokens, keine Randbalken */
.unklar-klartext { margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-strong); font-family: var(--sans); font-size: 0.95rem; }
.nutzen { display: block; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.9rem; color: var(--ink); }
.nutzen__zeile { display: block; margin-top: 0.15rem; }
.fristenbox .nutzen { grid-column: 2; }
.termin-text .nutzen { margin-bottom: 0.1rem; }
.pruefhinweis > a:first-child { font-weight: 600; }
@media (max-width: 40rem) {
  .fristenbox .nutzen { grid-column: 1; }
}
@media print {
  .nutzen { break-inside: avoid; }
}