/* Rechtzeitig geregelt – Website-Stil (Look Version 2, seit 25.10.2026)
   Dunkle Petrol-Flächen für Köpfe, Teaser und Rechner · helle, warme Lesestrecken für lange Texte ·
   Gelb #FFD23F als einziger Akzent (auf Hell nur als Fläche, Markierung oder Strich, nie als Schrift) ·
   Grün nur für „gilt / ja“ · Archivo für alles, Anton nur für Kicker-Balken · keine Sticker, keine Schatten. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* dunkel (aus kanal/frame.md) */
  --dunkel: #0c2530;
  --dunkel-tief: #091c24;
  --dunkel-licht: #12404d;
  --flaeche: #123642;
  --flaeche-linie: #1d4552;
  --hell: #ffffff;
  --text-auf-dunkel: #e3ebee;
  --grau-auf-dunkel: #93a9b0;
  --petrol-hell: #9fc3cc;
  --gelb: #ffd23f;
  --gelb-sanft: #ffe27a;
  --gelb-tief: #e9b928;
  --gelb-hauch: #fff3c7;
  --gruen: #53c98d;
  --stufe-1: #1d4552; --stufe-2: #2c5f6e; --stufe-3: #4b8494; --stufe-4: #8fbfca; --stufe-5: #ffffff;
  --verlauf: radial-gradient(120% 90% at 85% 10%, #12404d 0%, #0c2530 55%, #091c24 100%);

  /* hell (Lesemodus, Kontraste geprüft: Titel 14,4:1 · Text 11,9:1 · leise 6,1:1 auf #F5F4F1) */
  --grund: #f5f4f1;
  --grund-tiefer: #ebeae5;
  --karte: #ffffff;
  --titel: #0c2530;
  --tinte: #1a3440;
  --leise: #4a5f66;
  --linie: #d5dbda;
  --linie-stark: #4a5f66;
  --link-linie: #2c5f6e;

  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --balken: "Anton", "Archivo", "Arial Narrow", sans-serif;
  --breite: 78rem;
  --lesebreite: 42rem;
  --rand: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 14px;
  --kopfhoehe: 4.6rem;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfhoehe) + 1rem); }
html[data-schrift="2"] { font-size: 112.5%; }
html[data-schrift="3"] { font-size: 125%; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--schrift); font-size: 1.25rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
@media (max-width: 40rem) { body { font-size: 1.1875rem; } }
img, picture, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { color: var(--titel); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; font-stretch: 108%; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); font-stretch: 104%; }
p, ul, ol, dl, table, figure { margin: 0 0 1.1em; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--gelb); color: var(--dunkel); }
html { accent-color: var(--titel); caret-color: var(--titel); }
@media (max-width: 40rem) { .artikel-text, .lese, .vorspann, .lagen__satz, .dok__text { hyphens: auto; -webkit-hyphens: auto; } }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--leise); }
strong { font-weight: 700; color: var(--titel); }
mark { background: var(--gelb); color: var(--dunkel); padding: 0 .15em; border-radius: 2px; }
a { color: var(--titel); text-decoration-line: underline; text-decoration-color: var(--link-linie); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { background: var(--gelb); color: var(--dunkel); text-decoration-color: var(--dunkel); }
a.extern::after { content: "↗"; font-size: .8em; margin-left: .15em; text-decoration: none; display: inline-block; }
:focus-visible { outline: 3px solid var(--titel); outline-offset: 3px; border-radius: 3px; }
.dunkel :focus-visible, .kopf :focus-visible, .fuss :focus-visible { outline-color: var(--gelb); }
hr { border: 0; border-top: 2px solid var(--linie); margin: 2.5rem 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gelb); color: var(--dunkel); padding: .7rem 1rem; font-weight: 800; border-radius: 4px; }
.springen:focus { top: 1rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.innen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.lese { max-width: var(--lesebreite); }

/* ---------- Dunkle Flächen ---------- */
.dunkel { background: var(--verlauf); color: var(--text-auf-dunkel); }
.dunkel--eben { background: var(--dunkel); }
.dunkel--flaeche { background: var(--flaeche); }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel strong { color: var(--hell); }
.dunkel a { color: var(--hell); text-decoration-color: var(--gelb); }
.dunkel a:hover { background: var(--gelb); color: var(--dunkel); }
.dunkel .leise, .dunkel .quelle { color: var(--grau-auf-dunkel); }

/* ---------- Typo-Bausteine ---------- */
.kicker {
  display: inline-block; font-family: var(--balken); font-weight: 400; text-transform: uppercase;
  letter-spacing: .03em; font-size: 1rem; line-height: 1; padding: .45em .65em .38em;
  background: var(--gelb); color: var(--dunkel); margin: 0 0 1.1rem;
}
.strich { display: block; width: 64px; height: 6px; background: var(--gelb); border: 0; margin: 0 0 1.2rem; }
.ueberschrift-strich::before { content: ""; display: block; width: 48px; height: 5px; background: var(--gelb); margin-bottom: .9rem; }
.seitentitel { font-size: clamp(2.3rem, 5vw, 4.1rem); line-height: 1.03; letter-spacing: -.025em; font-stretch: 112%; margin-bottom: .45em; }
.vorspann { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.45; max-width: 38em; }
.leise { color: var(--leise); }
.quelle { font-size: .95rem; color: var(--leise); line-height: 1.45; }
.label { font-size: 1rem; font-weight: 700; color: var(--leise); margin-bottom: .55rem; line-height: 1.35; }
.meta { display: block; font-size: .98rem; color: var(--leise); line-height: 1.4; font-variant-numeric: tabular-nums; }
.dunkel .meta { color: var(--grau-auf-dunkel); }
.dunkel .label { color: var(--grau-auf-dunkel); }
.zahl-gross { font-weight: 900; font-stretch: 85%; letter-spacing: -.035em; line-height: .9; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Knöpfe und Links ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: .8rem 1.35rem;
  background: var(--gelb); color: var(--dunkel); font: inherit; font-weight: 800; font-size: 1.1rem; line-height: 1.2;
  border: 2px solid var(--gelb); border-radius: 4px; text-decoration: none; cursor: pointer; text-wrap: balance;
  hyphens: manual; -webkit-hyphens: manual;
}
.knopf:hover { background: var(--gelb-sanft); border-color: var(--gelb-sanft); color: var(--dunkel); }
.knopf--dunkel { background: var(--dunkel); border-color: var(--dunkel); color: var(--hell); }
.knopf--dunkel:hover { background: var(--flaeche); border-color: var(--flaeche); color: var(--hell); }
.knopf--rahmen { background: transparent; color: inherit; border-color: currentColor; }
.knopf--rahmen:hover { background: var(--gelb); color: var(--dunkel); border-color: var(--gelb); }
.knopf[disabled] { opacity: .72; cursor: not-allowed; }
.band-gelb .knopf[disabled] { opacity: 1; }
.knopf:active:not([disabled]) { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) { .knopf { transition: background-color .15s ease, border-color .15s ease; } }
.pfeil { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; text-decoration: none; }
.pfeil::after { content: ""; width: 1.1em; height: .8em; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 7h18.2l-5.6-5.6L14 0l8 8-8 8-1.4-1.4L18.2 9H0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 7h18.2l-5.6-5.6L14 0l8 8-8 8-1.4-1.4L18.2 9H0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.pfeil:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) { .pfeil::after { transition: transform .15s ease; } }

/* ---------- Kopf ---------- */
.kopfleiste { background: var(--dunkel-tief); color: var(--text-auf-dunkel); font-size: .95rem; border-bottom: 1px solid #0f2a35; }
.kopfleiste__innen { display: flex; justify-content: flex-end; align-items: center; gap: 1.6rem; min-height: 2.9rem; }
.schriftgroesse__label { align-self: center; padding: 0 .55rem 0 .7rem; font-weight: 600; color: var(--grau-auf-dunkel); font-size: .9rem; }
.kopf { position: sticky; top: 0; z-index: 50; background: var(--dunkel); color: var(--hell); border-bottom: 1px solid var(--flaeche-linie); }
.kopf__innen { display: flex; align-items: center; gap: 1.5rem; min-height: var(--kopfhoehe); }
.marke { display: inline-flex; flex-direction: column; gap: .38rem; color: var(--hell); text-decoration: none; font-weight: 900; font-stretch: 112%; text-transform: uppercase; letter-spacing: .035em; font-size: 1.12rem; line-height: 1; white-space: nowrap; }
.marke::after { content: ""; width: 44px; height: 5px; background: var(--gelb); }
.marke:hover { background: none; color: var(--hell); }
@media (prefers-reduced-motion: no-preference) { .marke::after { transition: width .2s ease; } .marke:hover::after { width: 72px; } }
.hauptnav { margin-left: auto; }
.hauptnav ul { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.hauptnav li { margin: 0; }
.hauptnav a { display: block; padding: .9rem .75rem .75rem; color: var(--hell); text-decoration: none; font-weight: 700; font-size: 1.08rem; border-bottom: 4px solid transparent; white-space: nowrap; }
.hauptnav a:hover { background: none; color: var(--hell); border-bottom-color: var(--gelb); }
.hauptnav a[aria-current="page"], .hauptnav a.aktiv { border-bottom-color: var(--gelb); }
.kopf__werkzeuge { display: flex; align-items: center; gap: .9rem; }
.kopf__hilfe, .kopf__suche { color: var(--hell); font-weight: 700; font-size: .98rem; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; padding: .35rem 0; }
.kopf__hilfe svg, .kopf__suche svg { width: 1.15rem; height: 1.15rem; flex: none; }
.kopf__hilfe svg { color: var(--gelb); }
.kopf__hilfe:hover, .kopf__suche:hover { background: none; color: var(--hell); text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.schriftgroesse { display: inline-flex; align-items: stretch; border: 1px solid var(--flaeche-linie); border-radius: 6px; overflow: hidden; }
.schriftgroesse button { font: inherit; font-weight: 800; color: var(--text-auf-dunkel); background: transparent; border: 0; border-left: 1px solid var(--flaeche-linie); padding: .2rem .5rem; min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; line-height: 1; }
.schriftgroesse button:hover { background: var(--flaeche); color: var(--hell); }
.schriftgroesse button:nth-child(2) { font-size: .9rem; } .schriftgroesse button:nth-child(3) { font-size: 1.05rem; } .schriftgroesse button:nth-child(4) { font-size: 1.2rem; }
.schriftgroesse button[aria-pressed="true"] { background: var(--hell); color: var(--dunkel); }
.menue { display: none; margin-left: auto; }
.menue summary { list-style: none; cursor: pointer; font-weight: 800; padding: .55rem .9rem; border: 2px solid var(--flaeche-linie); border-radius: 4px; }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { background: var(--gelb); color: var(--dunkel); border-color: var(--gelb); }
.menue__liste { position: absolute; left: 0; right: 0; top: 100%; background: var(--dunkel); border-top: 1px solid var(--flaeche-linie); padding: 1rem var(--rand) 1.5rem; }
.menue__liste ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.menue__liste a { display: block; padding: .7rem 0; color: var(--hell); font-weight: 700; font-size: 1.2rem; text-decoration: none; border-bottom: 1px solid var(--flaeche-linie); }
@media (max-width: 64rem) {
  .hauptnav { display: none; }
  .menue { display: block; }
  .kopfleiste__innen { justify-content: space-between; gap: .8rem; }
}
@media (max-width: 34rem) { .kopfleiste .kopf__suche span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .schriftgroesse__label { display: none; } .marke { font-size: .98rem; } .kopf__hilfe { font-size: .92rem; } .kopf__hilfe svg { display: none; } }

/* ---------- Brotkrumen ---------- */
.krumen { font-size: .95rem; margin-bottom: 1.4rem; }
.krumen ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.krumen li { margin: 0; color: var(--grau-auf-dunkel); }
.krumen li + li::before { content: "/"; margin-right: .6rem; color: var(--grau-auf-dunkel); }
.krumen a { color: var(--text-auf-dunkel); text-decoration-color: var(--flaeche-linie); }

/* ---------- Bühne (Startseite) ---------- */
.buehne { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.buehne__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.buehne h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: .99; letter-spacing: -.03em; font-stretch: 112%; margin-bottom: .4em; }
.buehne h1 em { font-style: normal; color: var(--gelb); }
.buehne .vorspann { color: var(--text-auf-dunkel); margin-bottom: 2rem; }
.suchfeld { display: flex; max-width: 36rem; background: var(--hell); border-radius: 6px; padding: .35rem; gap: .35rem; }
.suchfeld label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.suchfeld input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 1.2rem; padding: .7rem .9rem; color: var(--titel); background: transparent; border-radius: 4px; }
.suchfeld input::placeholder { color: var(--leise); }
.suchfeld input:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 0; }
.suchfeld .knopf { min-height: 3.2rem; }
.haeufig { margin-top: 1.3rem; font-size: .98rem; color: var(--grau-auf-dunkel); display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; }
.haeufig span { flex-basis: 100%; }
.haeufig a { color: var(--text-auf-dunkel); }
.buehne__bild { position: relative; margin-bottom: 1.6rem; }
.buehne__bild picture, .buehne__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.buehne__bild picture { display: block; position: relative; }
.buehne__bild picture::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: linear-gradient(180deg, rgba(9,28,36,0) 55%, rgba(9,28,36,.7) 100%); pointer-events: none; }
.zahlkarte { position: absolute; z-index: 2; left: -2.4rem; bottom: -1.6rem; width: min(23rem, 92%); background: var(--dunkel); border: 1px solid var(--flaeche-linie); border-radius: 12px; padding: 1.35rem 1.5rem 1.2rem; }
.zahlkarte::before { content: ""; display: block; width: 44px; height: 5px; background: var(--gelb); margin-bottom: 1rem; }
.zahlkarte .zahl-gross { font-size: clamp(3rem, 5vw, 4.2rem); color: var(--gelb); margin-bottom: .4rem; }
.zahlkarte p { margin: 0 0 .6rem; color: var(--text-auf-dunkel); font-size: 1.05rem; line-height: 1.4; }
.zahlkarte .quelle { font-size: .85rem; margin: 0; }
.bildzeile { font-size: .8rem; color: var(--grau-auf-dunkel); margin-top: .5rem; text-align: right; }
.buehne__bild .bildzeile { position: absolute; z-index: 3; top: .8rem; right: .9rem; margin: 0; padding: .2rem .55rem; background: rgba(9,28,36,.6); color: var(--text-auf-dunkel); border-radius: 4px; font-size: .75rem; }
@media (max-width: 56rem) {
  .buehne__raster { grid-template-columns: minmax(0, 1fr); }
  .buehne__bild { max-width: 30rem; margin-bottom: 0; }
  .zahlkarte { position: relative; left: auto; bottom: auto; width: auto; margin: -5rem 1rem 0; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.abschnitt--eng { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.abschnitt__kopf { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.abschnitt__kopf h2 { margin: 0; }
.abschnitt__kopf p { margin: .6rem 0 0; max-width: 38em; }

/* Lebenslagen: redaktionelle Liste statt Kachel-Raster */
.lagen { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--titel); }
.lagen li { margin: 0; border-bottom: 1px solid var(--linie); }
.lagen a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; padding: 1.45rem 1rem; margin: 0 -1rem; text-decoration: none; color: var(--tinte); border-radius: 8px; }
.lagen a:hover { background: var(--karte); color: var(--tinte); }
.lagen a:hover .lagen__titel { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; text-underline-offset: .18em; }
.lagen a:hover .pfeil::after { transform: translateX(4px); }
.lagen__titel { display: block; font-weight: 800; font-stretch: 108%; font-size: clamp(1.4rem, 2.3vw, 1.8rem); color: var(--titel); line-height: 1.18; margin-bottom: .3rem; letter-spacing: -.012em; }
.lagen__satz { display: block; color: var(--leise); font-size: 1.1rem; line-height: 1.45; }
.lagen .pfeil { color: var(--titel); }
.lagen .pfeil::after { width: 1.5rem; height: 1.05rem; }
@media (max-width: 40rem) { .lagen a { gap: .8rem; padding: 1.2rem .9rem; margin: 0 -.9rem; } .lagen .pfeil::after { width: 1.2rem; } }

/* Aktuell: Zeitleiste der Gesetzgebung */
.zeitleiste { list-style: none; padding: 0; margin: 2rem 0 1.5rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 0; right: 0; top: .72rem; height: 3px; background: var(--flaeche-linie); }
.zeitleiste li { margin: 0; position: relative; padding: 2.2rem .8rem 0 0; }
.zeitleiste li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--dunkel); border: 3px solid var(--stufe-3); }
.zeitleiste li.erledigt::before { background: var(--gelb); border-color: var(--gelb); }
.zeitleiste li.erledigt::after { content: ""; position: absolute; left: 0; right: 0; top: .72rem; height: 3px; background: var(--gelb); }
.zeitleiste li.erledigt:has(+ li:not(.erledigt))::after, .zeitleiste li.erledigt:last-child::after { display: none; }
.zeitleiste__datum { display: block; font-weight: 800; color: var(--hell); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.zeitleiste__was { display: block; font-size: 1rem; color: var(--text-auf-dunkel); line-height: 1.35; }
.zeitleiste li:not(.erledigt) .zeitleiste__datum { color: var(--petrol-hell); }
@media (max-width: 56rem) {
  .zeitleiste { grid-template-columns: 1fr; gap: .2rem; }
  .zeitleiste::before { left: .45rem; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .zeitleiste li { padding: 0 0 1rem 2.2rem; }
  .zeitleiste li.erledigt::after { left: .45rem; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
}

/* Themen mit Foto (Startseite) */
.themen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8rem 2rem; }
.themen li { margin: 0; }
.thema { display: block; text-decoration: none; color: var(--tinte); }
.thema:hover { background: none; color: var(--tinte); }
.thema__bild { display: block; overflow: hidden; border-radius: 10px; background: var(--grund-tiefer); margin-bottom: 1.05rem; }
.thema__bild picture, .thema__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.thema__name { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-stretch: 108%; font-size: 1.55rem; line-height: 1.15; color: var(--titel); margin-bottom: .35rem; letter-spacing: -.012em; }
.thema__name::after { content: ""; width: 1.15rem; height: .85rem; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 7h18.2l-5.6-5.6L14 0l8 8-8 8-1.4-1.4L18.2 9H0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 7h18.2l-5.6-5.6L14 0l8 8-8 8-1.4-1.4L18.2 9H0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.thema__kurz { display: block; color: var(--leise); font-size: 1.05rem; line-height: 1.45; }
.thema:hover .thema__name { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; text-underline-offset: .18em; }
@media (prefers-reduced-motion: no-preference) {
  .thema__bild img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .thema:hover .thema__bild img { transform: scale(1.035); }
  .thema__name::after { transition: transform .15s ease; }
  .thema:hover .thema__name::after { transform: translateX(4px); }
}
@media (max-width: 64rem) { .themen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .themen { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--titel); }
  .themen li { border-bottom: 1px solid var(--linie); }
  .thema { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; padding: 1rem 0; }
  .thema__bild { grid-row: 1 / 3; margin: 0; border-radius: 6px; }
  .thema__bild picture, .thema__bild img { aspect-ratio: 1; }
  .thema__name { font-size: 1.3rem; margin: .1rem 0 .25rem; }
  .thema__kurz { font-size: 1rem; }
}

/* Vertrauen */
.prinzipien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.prinzipien > div { border-top: 2px solid var(--titel); padding-top: 1.3rem; }
.prinzipien h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.prinzipien p { color: var(--leise); font-size: 1.08rem; margin: 0; }
@media (max-width: 56rem) { .prinzipien { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }

/* Gelbes Band (Newsletter) */
.band-gelb { background: var(--gelb); color: var(--dunkel); }
.band-gelb h2, .band-gelb strong { color: var(--dunkel); }
.band-gelb a { color: var(--dunkel); text-decoration-color: var(--dunkel); }
.band-gelb a:hover { background: var(--dunkel); color: var(--gelb); }
.newsletter { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem; align-items: center; }
.newsletter h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: .4rem; }
.newsletter p { margin: 0; font-size: 1.15rem; }
.formular-zeile { display: flex; gap: .5rem; flex-wrap: wrap; }
.formular-zeile input { flex: 1 1 14rem; min-height: 3.2rem; padding: .7rem .9rem; font: inherit; font-size: 1.15rem; border: 2px solid var(--dunkel); border-radius: 4px; background: var(--hell); color: var(--titel); }
.formular-zeile input::placeholder { color: var(--leise); }
.formular-zeile input:disabled { cursor: not-allowed; }
.formular-zeile input:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 2px; }
.formular-hinweis { font-size: .95rem; margin-top: .7rem !important; line-height: 1.45; }
/* Einwilligungstext vor dem Newsletter-Knopf: gut lesbar, aber ruhiger als der Fließtext */
.einwilligung, .newsletter p.einwilligung { font-size: .95rem; line-height: 1.5; margin: .3rem 0 1rem; }
.anmeldung .einwilligung, .newsletter-form .einwilligung { color: var(--leise); }
.einwilligung a { color: inherit; }
.newsletter form > .knopf { margin-top: .2rem; }
@media (max-width: 56rem) { .newsletter { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

/* ---------- Karten ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; }
.dunkel .karte, .karte--dunkel { background: var(--flaeche); border-color: var(--flaeche-linie); color: var(--text-auf-dunkel); }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 56rem) { .raster-2, .raster-3 { grid-template-columns: minmax(0, 1fr); } }

/* Video-Karte mit Zwei-Klick: Vorschaubild frei, Bedienleiste darunter */
.video { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--dunkel-tief); padding-bottom: 3.3rem; }
.video picture, .video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video__start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; border: 0; cursor: pointer; font: inherit; color: var(--hell); background: transparent; padding: 0 0 3.3rem; }
.video__knopf { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--gelb); display: grid; place-items: center; }
.video__knopf::before { content: ""; width: 0; height: 0; border-left: 1.35rem solid var(--dunkel); border-top: .85rem solid transparent; border-bottom: .85rem solid transparent; margin-left: .3rem; }
.video__start:hover .video__knopf { background: var(--gelb-sanft); }
@media (prefers-reduced-motion: no-preference) { .video__knopf { transition: transform .2s cubic-bezier(.2, .7, .2, 1), background-color .15s ease; } .video__start:hover .video__knopf { transform: scale(1.07); } }
.video__leiste { position: absolute; left: 0; right: 0; bottom: 0; height: 3.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.1rem; background: var(--dunkel-tief); border-top: 1px solid var(--flaeche-linie); text-align: left; }
.video__text { font-weight: 800; font-size: 1.05rem; }
.video__dauer { font-size: .98rem; color: var(--grau-auf-dunkel); font-variant-numeric: tabular-nums; }
.video__start:hover .video__text { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.video--laeuft { padding-bottom: 0; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-hinweis { font-size: .9rem; line-height: 1.45; color: var(--leise); margin: .7rem 0 0; }
.dunkel .video-hinweis { color: var(--grau-auf-dunkel); }
.folge-teaser { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: start; }
.folge-teaser h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 56rem) { .folge-teaser { grid-template-columns: minmax(0, 1fr); } }

.kapitel { list-style: none; padding: 0; margin: 0; counter-reset: k; }
.kapitel li { margin: 0; border-top: 1px solid var(--flaeche-linie); }
.kapitel a, .kapitel > li > span { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .6rem; padding: .55rem 0; text-decoration: none; font-size: 1.05rem; line-height: 1.4; }
.kapitel__zeit { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--gelb); }
.hell .kapitel li { border-color: var(--linie); }
.hell .kapitel__zeit { color: var(--titel); }

/* Folgen-Liste */
.folgen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.folge-karte { text-decoration: none; display: block; color: inherit; }
.folge-karte:hover { background: none; color: inherit; }
.folge-karte picture, .folge-karte img { aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; width: 100%; }
.folge-karte__titel { display: block; font-weight: 800; font-stretch: 104%; font-size: 1.25rem; line-height: 1.25; color: var(--titel); margin-top: .9rem; }
.folge-karte .meta { margin-top: .35rem; }
.folge-karte:hover .folge-karte__titel { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; text-underline-offset: .15em; }
@media (max-width: 56rem) { .folgen { grid-template-columns: minmax(0, 1fr); } }

/* Dokument-Karte (Downloads): Vorschau wie das echte Blatt, Text daneben */
.dok { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; text-decoration: none; color: inherit; }
.dok:hover { background: none; color: inherit; }
.dok:hover .dok__titel { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; text-underline-offset: .15em; }
.dok__inhalt { display: block; padding-top: .15rem; }
.dok__titel { font-weight: 800; font-stretch: 104%; font-size: 1.3rem; line-height: 1.2; color: var(--titel); margin: 0 0 .4rem; display: block; }
.dok__text { display: block; font-size: 1.05rem; color: var(--tinte); margin: 0 0 .55rem; line-height: 1.45; }
.dok .meta { margin-bottom: .7rem; }
.dok .pfeil { color: var(--titel); font-size: 1.02rem; }
@media (prefers-reduced-motion: no-preference) { .dok .blatt, .dok .mappe { transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .dok:hover .blatt, .dok:hover .mappe { transform: translateY(-3px); } }
@media (max-width: 30rem) { .dok { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.1rem; } }

/* A4-Blatt im Druck-Look der PDFs (rein dekorativ) */
.blatt { display: flex; flex-direction: column; container-type: inline-size; aspect-ratio: 210 / 297; background: var(--hell); border: 1px solid var(--linie); border-radius: 2px; padding: 10% 10% 0; overflow: hidden; }
.blatt > span { display: block; }
.blatt__marke { font-size: 4.2cqi; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--titel); line-height: 1; }
.blatt__marke::after { content: ""; display: block; width: 16cqi; height: 1.6cqi; background: var(--gelb); margin-top: 2cqi; }
.blatt__art { font-size: 4.2cqi; font-weight: 700; color: var(--leise); margin-top: 9cqi; line-height: 1; }
.blatt__titel { font-size: 10cqi; font-weight: 800; font-stretch: 106%; line-height: 1.08; color: var(--titel); margin: 2.6cqi 0 3cqi; letter-spacing: -.01em; }
.blatt__abschnitt { display: flex !important; align-items: center; gap: 3cqi; margin-top: 6.5cqi; }
.blatt__abschnitt::before { content: ""; width: 6.5cqi; height: 6.5cqi; background: var(--titel); border-radius: .8cqi; flex: none; }
.blatt__abschnitt::after { content: ""; width: 48cqi; height: 2.6cqi; background: var(--titel); border-radius: .6cqi; }
.blatt__zeile { display: flex !important; align-items: center; gap: 3.5cqi; margin-top: 4.2cqi; }
.blatt__zeile::before { content: ""; width: 4.8cqi; height: 4.8cqi; border: .55cqi solid var(--titel); border-radius: .7cqi; flex: none; }
.blatt__zeile::after { content: ""; height: 1.3cqi; background: var(--linie); flex: 1; border-radius: 1cqi; }
.blatt__zeile:nth-of-type(3n)::after { flex: .55; }
.dunkel .blatt { border-color: transparent; }

/* Arbeitsmappe: gelbes Cover mit Blättern dahinter (rein dekorativ) */
.mappe { position: relative; display: block; container-type: inline-size; aspect-ratio: 210 / 297; }
.mappe > span { display: block; }
.mappe__blatt { position: absolute; inset: 0; background: var(--hell); border: 1px solid var(--linie); border-radius: 3px; }
.mappe__blatt:nth-child(1) { transform: rotate(6deg) translate(7%, 1.5%); background: #e9edec; }
.mappe__blatt:nth-child(2) { transform: rotate(2.6deg) translate(3.5%, .5%); }
.mappe__cover { position: absolute; inset: 0; background: var(--gelb); color: var(--dunkel); border-radius: 3px 7px 7px 3px; padding: 11cqi 10cqi 9cqi 15cqi; display: flex !important; flex-direction: column; overflow: hidden; }
.mappe__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6.5cqi; background: var(--gelb-tief); }
.mappe__cover > span { display: block; }
.mappe__marke { font-size: 4.4cqi; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.mappe__marke::after { content: ""; display: block; width: 16cqi; height: 1.8cqi; background: var(--dunkel); margin-top: 2.4cqi; }
.mappe__titel { margin-top: auto; font-size: 12.5cqi; font-weight: 900; font-stretch: 100%; line-height: .98; letter-spacing: -.025em; hyphens: manual; }
.mappe__unter { font-size: 5.2cqi; font-weight: 600; line-height: 1.3; margin-top: 4.5cqi; }
.mappe__fuss { margin-top: 9cqi; padding-top: 3cqi; border-top: .6cqi solid var(--dunkel); font-size: 4cqi; font-weight: 700; display: flex !important; justify-content: space-between; gap: 2cqi; }

.download-vorschau { max-width: 17rem; padding-right: 1.5rem; }

/* Produkt (Notfallordner) */
.produkt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.produkt__bild { width: 100%; max-width: 17.5rem; justify-self: center; padding: .5rem 1.5rem 0 0; }
.produkt ul { list-style: none; padding: 0; margin: 1.3rem 0 1.8rem; }
.produkt li { padding-left: 1.9rem; position: relative; margin-bottom: .6rem; }
.produkt li::before { content: ""; position: absolute; left: 0; top: .72em; width: 1rem; height: 4px; background: var(--gelb); }
.produkt__stand { margin: 0 0 1.1rem; }
.preiszeile { display: flex; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap; }
.preis { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .35rem; line-height: 1; }
.preis__betrag { font-weight: 900; font-stretch: 90%; font-size: 2.6rem; letter-spacing: -.01em; color: var(--titel); font-variant-numeric: tabular-nums; }
.preis__zusatz { font-size: .98rem; font-weight: 600; line-height: 1.3; color: var(--leise); }
.dunkel .preis__betrag { color: var(--hell); }
.dunkel .preis__zusatz { color: var(--grau-auf-dunkel); }
.preiszeile .preis { margin: 0; }
@media (max-width: 56rem) { .produkt { grid-template-columns: minmax(0, 1fr); } .produkt__bild { max-width: 13rem; justify-self: start; } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(2.4rem, 5vw, 3.8rem); position: relative; overflow: hidden; }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.seitenkopf--ohne-bild .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
.seitenkopf .vorspann { color: var(--text-auf-dunkel); }
.seitenkopf__bild { position: relative; }
.seitenkopf__bild picture, .seitenkopf__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.seitenkopf__bild .bildzeile { text-align: left; }
.metazeile { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.4rem; font-size: 1rem; color: var(--grau-auf-dunkel); }
.metazeile span { display: inline-flex; align-items: center; gap: .45rem; }
.metazeile span::before { content: ""; width: 6px; height: 6px; background: var(--gelb); border-radius: 50%; }
@media (max-width: 56rem) { .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); } .seitenkopf__bild { max-width: 34rem; } }

/* ---------- Artikel ---------- */
.artikel-raster { display: grid; grid-template-columns: minmax(0, var(--lesebreite)) minmax(0, 19rem); gap: clamp(2rem, 5vw, 4.5rem); justify-content: space-between; padding-top: clamp(2.2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.artikel-text h2 { margin-top: 2.6rem; padding-top: .2rem; }
.artikel-text h2::before { content: ""; display: block; width: 48px; height: 5px; background: var(--gelb); margin-bottom: .9rem; }
.artikel-text > h3 { margin-top: 1.9rem; }
.artikel-text > p:first-of-type { font-size: 1.32rem; line-height: 1.55; color: var(--titel); }
.seitenspalte { position: relative; }
.seitenspalte__klebend { position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); display: grid; gap: 1.4rem; }
.toc { border-top: 2px solid var(--titel); padding-top: .9rem; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.toc li { margin: 0; counter-increment: t; }
.toc a { display: grid; grid-template-columns: 1.7rem 1fr; padding: .42rem 0; text-decoration: none; font-size: 1.02rem; line-height: 1.35; font-weight: 600; }
.toc a::before { content: counter(t) "."; font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums; }
.toc a:hover { background: none; text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; }
.mini { border-radius: var(--radius); padding: 1.35rem 1.35rem 1.25rem; }
.mini .label { margin-bottom: .35rem; }
.mini--dunkel { background: var(--dunkel); color: var(--text-auf-dunkel); }
.mini--dunkel h3 { color: var(--hell); }
.mini h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.mini p { font-size: 1rem; line-height: 1.45; margin-bottom: .8rem; }
.mini--hell { background: var(--karte); border: 1px solid var(--linie); }
@media (max-width: 64rem) {
  .artikel-raster { grid-template-columns: minmax(0, 1fr); }
  .seitenspalte__klebend { position: static; }
  .seitenspalte { order: -1; }
  .seitenspalte .mini { display: none; }
}

/* Kurzantwort */
.kurzantwort { background: var(--dunkel); color: var(--text-auf-dunkel); border-radius: var(--radius); padding: 1.6rem 1.8rem 1.15rem; margin: 0 0 2.6rem; }
.kurzantwort::before { content: ""; display: block; width: 44px; height: 5px; background: var(--gelb); margin-bottom: 1rem; }
.kurzantwort__titel { font-size: 1.2rem !important; font-weight: 800; color: var(--hell) !important; margin: 0 0 1rem !important; font-stretch: 104%; letter-spacing: -.005em; }
.kurzantwort__titel::before { display: none !important; }
.kurzantwort ul { list-style: none; padding: 0; margin: 0; }
.kurzantwort li { position: relative; padding-left: 1.6rem; margin-bottom: .8rem; font-size: 1.15rem; line-height: 1.5; }
.kurzantwort li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 3px; background: var(--gelb); }
.kurzantwort strong { color: var(--hell); }
.kurzantwort a { color: var(--hell); text-decoration-color: var(--gelb); }

/* Hinweis */
.hinweis { background: var(--gelb-hauch); border-radius: var(--radius); padding: 1.25rem 1.5rem .35rem; margin: 1.9rem 0; }
.hinweis__label { font-weight: 800; color: var(--titel); margin: 0 0 .35rem !important; font-size: 1.08rem; }
.hinweis p { font-size: 1.18rem; }

/* Rechtsstand: Gliederung in Worten, keine Symbole */
.rechtsstand { margin: 2rem 0; padding: 1.35rem 1.55rem .4rem; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.rechtsstand__titel { font-size: 1.25rem !important; margin: 0 0 .7rem !important; }
.rechtsstand--geplant { background: transparent; border: 2px dashed var(--linie-stark); }

/* Schritte */
ol.schritte { list-style: none; padding: 0; counter-reset: s; margin: 1.6rem 0 2rem; }
ol.schritte > li { counter-increment: s; position: relative; padding: 0 0 1.2rem 3.8rem; margin: 0; min-height: 2.6rem; }
ol.schritte > li::before { content: counter(s); position: absolute; left: 0; top: -.15rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: var(--titel); color: var(--hell); font-weight: 900; font-size: 1.2rem; border-radius: 4px; }
ol.schritte > li::after { content: ""; position: absolute; left: 0; top: 2.65rem; width: 2.6rem; height: 4px; background: var(--gelb); }

/* Wegweiser (Lebenslagen) */
ol.wegweiser > li { padding-bottom: 1.9rem; }
.wegweiser__titel { font-size: 1.35rem !important; margin: .1rem 0 .4rem !important; }
.wegweiser p { margin-bottom: .55rem; }
.artikel-text .wegweiser__titel::before { display: none; }

/* Beispielrechnung */
.beispiel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem 1.5rem .6rem; margin: 2rem 0; }
.beispiel__titel { font-weight: 800; color: var(--titel); font-size: 1.15rem; margin-bottom: .8rem; }
.beispiel__zusatz { font-weight: 600; color: var(--leise); font-size: .9rem; margin-left: .4rem; }
.beispiel table { margin-bottom: .8rem; }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; margin: 1.6rem 0 2rem; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--karte); scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.tabelle-rahmen:focus-visible { outline: 3px solid var(--titel); }
.tabelle { width: 100%; border-collapse: collapse; margin: 0; font-size: 1.08rem; font-variant-numeric: tabular-nums lining-nums; }
.tabelle caption { text-align: left; font-weight: 800; color: var(--titel); padding: 1rem 1.2rem .6rem; font-size: 1.1rem; }
.tabelle th, .tabelle td { padding: .75rem 1.2rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tbody tr:last-child > * { border-bottom: 0; }
.tabelle thead th { background: var(--grund-tiefer); color: var(--titel); font-weight: 800; font-size: .98rem; line-height: 1.3; vertical-align: bottom; border-bottom: 2px solid var(--titel); }
.tabelle tbody th { font-weight: 600; color: var(--tinte); }
.tabelle .zahl-spalte, .tabelle td:last-child:not(:first-child), .tabelle thead th:last-child:not(:first-child) { text-align: right; white-space: nowrap; }
.tabelle tbody tr:last-child:has(strong) { background: var(--grund); }
.tabelle tbody tr:last-child:has(strong) > * { border-top: 2px solid var(--titel); }
@media (min-width: 40rem) { .tabelle:not(:has(thead th:nth-child(4))) tbody > tr > :first-child { min-width: 13rem; } }
/* breite Tabellen (ab 4 Spalten): kompakter, damit sie in die Lesespalte passen */
.tabelle:has(thead th:nth-child(4)) { font-size: .98rem; }
.tabelle:has(thead th:nth-child(4)) th, .tabelle:has(thead th:nth-child(4)) td { padding: .65rem .8rem; }
.tabelle:has(thead th:nth-child(4)) thead th { font-size: .9rem; }
.tabelle:has(thead th:nth-child(4)) thead th:last-child:not(:first-child) { white-space: normal; }
.tabelle tr.hervor { background: var(--gelb-hauch); }
.tabelle tfoot td { font-size: .92rem; color: var(--leise); border-bottom: 0; }

/* Wer hilft kostenlos */
.hilfe-liste { display: grid; gap: 1rem; margin: 1.4rem 0 2rem; }
.hilfe-eintrag { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.hilfe-eintrag h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.hilfe-eintrag p { font-size: 1.05rem; margin: 0; line-height: 1.5; }
.hilfe-eintrag__kosten { font-size: .95rem; font-weight: 700; color: var(--leise); margin-top: .5rem !important; }

/* Quellen */
.quellenblock { border-top: 2px solid var(--titel); margin-top: 3rem; padding-top: 1.4rem; }
.quellenblock h2 { font-size: 1.4rem; }
.quellenblock h2::before { display: none !important; }
.quellenblock ol { font-size: 1rem; line-height: 1.5; color: var(--leise); padding-left: 1.4rem; }
.quellenblock li { margin-bottom: .55rem; }
.pflicht { font-size: 1rem; color: var(--leise); background: var(--grund-tiefer); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-top: 2rem; line-height: 1.5; }
.pflicht strong { color: var(--titel); }

/* Teilen / Fehler melden */
.aktionen { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin: 2rem 0 0; font-size: 1.05rem; }

/* ---------- Rechner ---------- */
.rechner { background: var(--verlauf); color: var(--text-auf-dunkel); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); }
.rechner h2, .rechner h3 { color: var(--hell); }
.rechner__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.6rem, 4vw, 3rem); }
.rechner-teaser h3 { font-size: clamp(1.45rem, 2.2vw, 1.7rem); margin-bottom: .6rem; }
.rechner-teaser::before { content: ""; display: block; width: 44px; height: 5px; background: var(--gelb); margin-bottom: 1.1rem; }
.feld { margin-bottom: 1.4rem; border: 0; padding: 0; min-width: 0; }
.feld > label, .feld > legend { display: block; font-weight: 800; color: var(--hell); font-size: 1.1rem; margin-bottom: .45rem; padding: 0; }
.feld__hilfe { font-size: .95rem; color: var(--grau-auf-dunkel); margin: -.15rem 0 .55rem; line-height: 1.4; }
.feld select, .feld input[type="number"], .feld input[type="text"] {
  width: 100%; min-height: 3.1rem; padding: .6rem .8rem; font: inherit; font-size: 1.15rem; color: var(--hell);
  background: var(--dunkel-tief); border: 2px solid var(--grau-auf-dunkel); border-radius: 4px; font-variant-numeric: tabular-nums;
}
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23ffd23f' stroke-width='2.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem; padding-right: 2.6rem; }
.feld select:focus-visible, .feld input:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.feld--euro { position: relative; }
.feld--euro input { padding-right: 2.4rem; }
.feld--euro::after { content: "€"; position: absolute; right: .9rem; bottom: .8rem; color: var(--grau-auf-dunkel); font-weight: 700; }
.wahl { display: grid; gap: .5rem; }
.wahl label { display: flex; gap: .7rem; align-items: center; padding: .65rem .8rem; border: 2px solid var(--flaeche-linie); border-radius: 4px; cursor: pointer; font-weight: 600; color: var(--text-auf-dunkel); min-height: 3rem; }
.wahl input { width: 1.3rem; height: 1.3rem; accent-color: var(--gelb); flex: none; margin: 0; }
.wahl label:has(input:checked) { border-color: var(--gelb); color: var(--hell); }
.ergebnis { background: var(--dunkel-tief); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.3rem; }
.ergebnis__label { font-size: 1.02rem; font-weight: 700; color: var(--grau-auf-dunkel); margin: 0 0 .4rem; }
.ergebnis__zahl { font-size: clamp(3rem, 7vw, 4.6rem); color: var(--gelb); margin: 0 0 .2rem; }
.ergebnis__unter { color: var(--text-auf-dunkel); margin: 0 0 1.4rem; font-size: 1.08rem; }
.balken { display: flex; height: 2.4rem; border-radius: 4px; overflow: hidden; margin: 0 0 1rem; background: var(--flaeche); }
.balken span { display: block; height: 100%; min-width: 2px; }
.balken__teil--1 { background: var(--stufe-5); }
.balken__teil--2 { background: var(--stufe-4); }
.balken__teil--3 { background: var(--stufe-3); }
.balken__teil--zuschlag { background: repeating-linear-gradient(135deg, var(--gelb) 0 6px, #e6b92a 6px 12px); }
.legende { list-style: none; padding: 0; margin: 0; font-size: 1.02rem; }
.legende li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--flaeche-linie); margin: 0; }
.legende i { width: 1.1rem; height: 1.1rem; border-radius: 2px; display: block; }
.legende b { color: var(--hell); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner__pflicht { font-size: .95rem; color: var(--grau-auf-dunkel); margin: 1.3rem 0 0; line-height: 1.45; }
.rechner__pflicht strong { color: var(--text-auf-dunkel); }
@media (max-width: 56rem) { .rechner__raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formular-Platzhalter ---------- */
.anmeldung { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem; }
.anmeldung h2, .anmeldung h3 { margin-top: 0; }
/* Newsletter-Kasten am Ende von Artikeln und Videoseiten */
.newsletter-kasten { margin: 3rem 0 2.5rem; border-top: 6px solid var(--gelb); }
.newsletter-kasten h2 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); }
.newsletter-kasten .knopf { margin-top: .4rem; }
.anmeldung .feld label { color: var(--titel); }
.anmeldung input[type="email"], .anmeldung .feld input[type="text"] { width: 100%; min-height: 3.2rem; padding: .7rem .9rem; font: inherit; font-size: 1.15rem; border: 2px solid var(--linie-stark); border-radius: 4px; background: var(--hell); color: var(--titel); }
.anmeldung__status { background: var(--grund-tiefer); padding: .85rem 1.1rem; font-size: 1rem; border-radius: 8px; }
.anmeldung .knopf { margin-top: .2rem; }
.anmeldung input[type="email"]:disabled, .anmeldung .feld input[type="text"]:disabled { background: var(--grund); cursor: not-allowed; }

/* ---------- Fuß ---------- */
.fuss { background: var(--dunkel-tief); color: var(--text-auf-dunkel); padding: clamp(2.8rem, 6vw, 4.5rem) 0 2rem; font-size: 1.02rem; }
.fuss a { color: var(--text-auf-dunkel); text-decoration-color: var(--flaeche-linie); }
.fuss a:hover { color: var(--dunkel); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 2rem; margin-bottom: 2.5rem; }
.fuss h2 { font-size: 1.02rem; color: var(--hell); margin-bottom: 1rem; font-stretch: 104%; letter-spacing: 0; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss__marke p { color: var(--grau-auf-dunkel); margin-top: 1rem; max-width: 26rem; }
.fuss__pflicht { border-top: 1px solid var(--flaeche-linie); padding-top: 1.4rem; font-size: .95rem; color: var(--grau-auf-dunkel); line-height: 1.55; }
.fuss__pflicht p { margin-bottom: .6rem; max-width: 60rem; }
@media (max-width: 56rem) { .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fuss__marke { grid-column: 1 / -1; } }

/* ---------- Stilseite ---------- */
.farbfelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.farbfeld { border-radius: 10px; overflow: hidden; border: 1px solid var(--linie); background: var(--karte); }
.farbfeld div { height: 5rem; }
.farbfeld p { margin: 0; padding: .6rem .8rem; font-size: .95rem; line-height: 1.35; }

/* Artikel-Liste (Themenwelt) */
.artikel-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.4rem; }
.artikel-liste li { margin: 0; border-top: 2px solid var(--titel); }
.artikel-liste a { display: block; padding: 1.1rem 0 1.6rem; text-decoration: none; color: var(--tinte); }
.artikel-liste a:hover { background: none; color: var(--tinte); }
.artikel-liste a:hover .artikel-liste__titel { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; }
.artikel-liste__titel { display: block; font-weight: 800; font-stretch: 106%; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.2; color: var(--titel); margin-bottom: .5rem; }
.artikel-liste__text { display: block; font-size: 1.08rem; line-height: 1.5; color: var(--tinte); margin-bottom: .55rem; }
@media (max-width: 56rem) { .artikel-liste { grid-template-columns: minmax(0, 1fr); } }
.artikel-gruppe + .artikel-gruppe { margin-top: clamp(2rem, 4vw, 3rem); }
.artikel-gruppe__titel { font-size: 1.25rem; font-stretch: 104%; color: var(--leise); margin: 0 0 .9rem; letter-spacing: 0; }

/* Häufige Fragen */
.fragen { border-top: 2px solid var(--titel); margin-bottom: 2.4rem; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { cursor: pointer; list-style: none; font-weight: 800; color: var(--titel); font-size: 1.18rem; padding: 1rem 2.6rem 1rem 0; position: relative; line-height: 1.35; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; position: absolute; right: .4rem; top: 1.25rem; width: .75rem; height: .75rem; border-right: 3px solid var(--titel); border-bottom: 3px solid var(--titel); transform: rotate(45deg); }
.frage[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.frage summary:hover { color: var(--titel); text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; }
.frage > p, .frage > ul { margin: 0 0 1.1rem; }

.rechner strong, .mini--dunkel strong, .fuss strong, .zahlkarte strong { color: var(--hell); }

/* Inhaltsverzeichnis am Handy: eingeklappt über dem Text */
.toc-mobil { display: none; border-top: 2px solid var(--titel); border-bottom: 1px solid var(--linie); margin-bottom: 1.8rem; }
.toc-mobil summary { cursor: pointer; font-weight: 800; color: var(--titel); padding: .9rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.toc-mobil summary::-webkit-details-marker { display: none; }
.toc-mobil summary::after { content: ""; width: .7rem; height: .7rem; border-right: 3px solid var(--titel); border-bottom: 3px solid var(--titel); transform: rotate(45deg); margin-right: .4rem; }
.toc-mobil[open] summary::after { transform: rotate(-135deg); }
.toc-mobil ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.toc-mobil li { margin-bottom: .35rem; }
@media (max-width: 64rem) { .toc-mobil { display: block; } .seitenspalte .toc { display: none; } .seitenspalte:not(:has(.mini:not([hidden]))) { display: none; } }

.mini--dunkel .label, .rechner .label { color: var(--grau-auf-dunkel); }
.dunkel a.knopf, .dunkel .knopf { color: var(--dunkel); text-decoration: none; }
.dunkel a.knopf:hover { background: var(--gelb-sanft); color: var(--dunkel); }

/* Glossar */
.abc { position: sticky; top: var(--kopfhoehe); z-index: 5; background: var(--grund); padding: .6rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--linie); }
.abc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.abc li { margin: 0; }
.abc a, .abc span { display: grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; font-weight: 800; border-radius: 6px; text-decoration: none; }
.abc a { color: var(--titel); background: var(--karte); border: 1px solid var(--linie); }
.abc a:hover { background: var(--gelb); border-color: var(--gelb); color: var(--dunkel); }
.abc span { color: var(--linie-stark); opacity: .45; }
.glossar__gruppe { scroll-margin-top: calc(var(--kopfhoehe) + 4.5rem); }
.glossar__buchstabe { font-size: 2.2rem; border-bottom: 2px solid var(--titel); padding-bottom: .3rem; margin: 2.4rem 0 .4rem; }
.glossar dl { margin: 0; }
.glossar__eintrag { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); scroll-margin-top: calc(var(--kopfhoehe) + 4.5rem); }
.glossar__eintrag:target { background: var(--gelb-hauch); margin: 0 -1rem; padding: 1.1rem 1rem; border-radius: 8px; }
.glossar dt { font-weight: 800; font-stretch: 104%; font-size: 1.3rem; color: var(--titel); margin-bottom: .3rem; }
.glossar dd { margin: 0; }
.glossar dd p { margin-bottom: .4rem; }

/* Rentenbeginn-Rechner */
.datum { display: flex; gap: .8rem; flex-wrap: wrap; }
.datum__teil { display: flex; flex-direction: column; gap: .3rem; }
.datum__teil label { font-weight: 700; color: var(--text-auf-dunkel); font-size: 1rem; }
.datum__teil input { width: 4.6rem; min-height: 3.1rem; padding: .6rem .7rem; font: inherit; font-size: 1.2rem; color: var(--hell); background: var(--dunkel-tief); border: 2px solid var(--grau-auf-dunkel); border-radius: 4px; font-variant-numeric: tabular-nums; }
.datum__teil--jahr input { width: 6.4rem; }
.datum__teil input:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.datum__teil input[aria-invalid="true"] { border-color: var(--gelb); }
.feld__fehler { margin: .8rem 0 0; color: var(--gelb); font-weight: 700; font-size: 1.02rem; line-height: 1.4; }
.rentenarten { list-style: none; padding: 0; margin: .4rem 0 0; }
.rentenarten li { display: grid; gap: .15rem; padding: .95rem 0; border-top: 1px solid var(--flaeche-linie); margin: 0; }
.rentenarten__name { font-weight: 800; color: var(--hell); font-size: 1.08rem; }
.rentenarten__wann { font-weight: 900; font-stretch: 104%; color: var(--gelb); font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
.rentenarten__info { color: var(--text-auf-dunkel); font-size: 1rem; line-height: 1.45; }
.rentenarten__info a { color: var(--hell); }

/* Fristen-Rechner Todesfall */
.fristliste { list-style: none; padding: 0; margin: 1.6rem 0 1.8rem; border-top: 2px solid var(--titel); }
.fristliste__eintrag { padding: 1.15rem 0 .5rem; border-bottom: 1px solid var(--linie); margin: 0; }
.fristliste__datum { font-weight: 900; font-stretch: 104%; font-size: 1.3rem; color: var(--titel); margin: 0 0 .2rem !important; font-variant-numeric: tabular-nums; }
.fristliste__datum::before { content: ""; display: inline-block; width: .7rem; height: .7rem; background: var(--gelb); border-radius: 2px; margin-right: .6rem; vertical-align: .1em; }
.fristliste__titel { font-size: 1.15rem !important; margin: 0 0 .35rem !important; }
.fristliste__titel::before { display: none !important; }
#fristen-ergebnis:focus { outline: none; }
@media print { .kopfleiste, .kopf, .fuss, .rechner, [data-kalender], [data-drucken], #so-titel, #so-titel ~ * { display: none !important; } }

/* Produktvorschau: echte Seiten */
.blick { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.blick li { margin: 0; }
.blick img { width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 3px; background: var(--hell); }
@media (max-width: 56rem) { .blick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Vorsorge-Wegweiser ---------- */
.vh-namen { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .35rem; }
.vh-namen li { position: relative; padding-left: 1.4rem; font-weight: 700; color: var(--hell); }
.vh-namen li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8rem; height: 4px; background: var(--gelb); }
.vh-fragen { list-style: none; padding: 0; margin: 1.6rem 0 3.2rem; display: grid; gap: 1.1rem; }
.vh-frage { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.35rem 1.5rem 1.25rem; }
.vh-frage h3 { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.3; }
.vh-frage p { margin: 0 0 .7rem; }
.vh-geregelt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.vh-geregelt__label { font-weight: 700; color: var(--leise); font-size: .98rem; margin-right: .2rem; }
.vh-marke { display: inline-block; padding: .3rem .7rem; border-radius: 4px; background: var(--dunkel); color: var(--hell); font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.35; }
.vh-marke:hover { background: var(--flaeche); color: var(--hell); }
.vh-ohne { margin: .9rem 0 0 !important; padding: .8rem 1rem; background: var(--gelb-hauch); border-radius: 6px; font-size: 1.02rem; }
.vh-dokumente { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.4rem 0 0; }
.vh-dokument { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.3rem; scroll-margin-top: 6rem; }
.vh-dokument h3 { margin: 0 0 .9rem; font-size: 1.35rem; }
.vh-dokument h3::before { content: ""; display: block; width: 48px; height: 5px; background: var(--gelb); margin-bottom: .8rem; }
.vh-dokument dl { margin: 0 0 1rem; display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: .55rem 1rem; font-size: 1.02rem; }
.vh-dokument dt { font-weight: 700; color: var(--titel); }
.vh-dokument dd { margin: 0; }
.vh-frage[hidden], .vh-dokument[hidden] { display: none; }
@media (max-width: 56rem) { .vh-dokumente { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .vh-dokument dl { grid-template-columns: minmax(0, 1fr); gap: .15rem; } .vh-dokument dd { margin-bottom: .6rem; } }
@media print { #wegweiser-ergebnis .aktionen { display: none; } .vh-frage, .vh-dokument { break-inside: avoid; } }

/* Spam-Falle im Anmeldeformular: für Menschen unsichtbar, Bots füllen sie aus */
.honigtopf { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.anmeldung .feld input[type="email"] { width: 100%; }