/* Living Society · Relaunch v0.3 · Stilvorlage
   Saubere Fassung 08.10.2026: Die Korrekturrunden vom 06. bis 08.10. sind in die jeweiligen Regeln eingearbeitet,
   keine nachträglichen Überschreibungen mehr. Aufbau: Grundlagen → Kopfleiste → Startseite (in Seitenfolge) → Fuß →
   Unterseiten (Population, Methodik, Über uns, Wissen, Blog) → Hilfsklassen → reduzierte Bewegung.
   Farben nur aus den Tokens (tokens.css, LS-0065). Schriften: Inter für Text, Meta und Beschriftungen;
   IBM Plex Mono nur für Zahlen, Kennungen, Zeitstempel, Achsen und Steckbrieffelder; Source Serif 4 kursiv für Persona-Zitate.
   Ocker ist Signal- und Datenfarbe, als Textfarbe nur in Großschrift (Ausnahme „Ihre Zielgruppe“, Entscheidung Marius 08.10.2026).
   Seite auf Weiß (Version 2, 12.10.2026): kein Farbwechsel beim Scrollen mehr. Der Startbereich ist durchgehend Petrol,
   ab dem Grundsätze-Band ist die Seite weiß. Die Kopfleiste liegt hell auf dunkel über dem Startbereich und wechselt per
   Klasse .hell (relaunch.js, eine Schwelle), sobald der Startbereich verlassen ist. */

/* =================== Grundlagen =================== */
:root {
  --bg: var(--ls-bg); --ink: var(--ls-ink); --muted: var(--ls-ink-muted); --faint: var(--ls-ink-faint);
  --mark: var(--ls-amtlich); --dot: var(--ls-ocker); --linie: var(--ls-linie);
  --kopf-bg: rgba(255,255,255,0.94); --kopf-linie: transparent;
  --hell-bg: var(--ls-bg); --hell-ink: var(--ls-ink); --hell-muted: var(--ls-ink-muted); --hell-faint: var(--ls-ink-faint);
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ls-font-text); font-size: 17px; line-height: 1.55;
  font-feature-settings: 'tnum' 1; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ls-ocker); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font-family: var(--ls-font-text); font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-oxid); margin: 0 0 14px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--hell-muted); max-width: 58ch; margin: 22px 0 0; }
.tertiaer { display: inline-flex; gap: 6px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 500; font-size: 16px; padding: 12px 20px; border-radius: 8px;
  background: var(--ls-petrol); color: var(--ls-bg); border: 1px solid var(--ls-petrol); text-decoration: none; cursor: pointer; transition: background 200ms var(--kurve); }
.btn:hover { background: var(--ls-petrol-tief); }
.aktionen { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 34px; }
.aktionen .tertiaer { color: var(--hell-ink); }
.aktionen .ort { flex-basis: 100%; margin: 6px 0 0; color: var(--hell-muted); }

/* Sprunglink „Zum Inhalt“: erstes Tastaturziel jeder Seite, sichtbar nur mit Fokus */
.sprunglink { position: absolute; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 8px;
  background: var(--ls-bg); color: var(--ls-petrol); font-weight: 500; font-size: 15px; text-decoration: none; transform: translateY(-160%); }
.sprunglink:focus, .sprunglink:focus-visible { transform: none; }

/* =================== Kopfleiste und Menü =================== */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px);
  background: var(--kopf-bg); border-bottom: 1px solid var(--kopf-linie, transparent); transition: background-color 300ms, border-color 300ms; }
/* Startseite: über dem Petrol-Startbereich hell auf dunkel, bis relaunch.js .hell setzt; Unterseiten sind von Anfang an hell */
body:not(.unterseite) .kopf:not(.hell) { --ink: var(--ls-flaeche); --mark: var(--ls-bg); --dot: var(--ls-ocker-hell);
  --btn-bg: var(--ls-bg); --btn-ink: var(--ls-petrol); --kopf-bg: transparent; --kopf-linie: transparent; }
.kopf.hell { --kopf-linie: var(--ls-linie); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.marke { display: block; height: 30px; color: var(--ink); text-decoration: none; transition: color 300ms; }
.marke svg { height: 30px; width: auto; display: block; overflow: visible; }
.marke .wm { opacity: 0; transition: opacity 700ms var(--kurve); }
.marke .kz { opacity: 0; }
.marke.da .wm, .marke.da .kz { opacity: 1; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; transition: opacity 700ms var(--kurve); }
.nav a { text-decoration: none; color: var(--ink); opacity: .86; transition: color 300ms; }
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom: 2px solid var(--ls-ocker); padding-bottom: 3px; }
.nav .nav-login { opacity: .86; font-size: 14px; }
.nav .btn { opacity: 1; background: var(--btn-bg, var(--ls-petrol)); color: var(--btn-ink, var(--ls-bg)); border-color: var(--btn-bg, var(--ls-petrol)); padding: 9px 16px; font-size: 15px; transition: background 300ms, color 300ms, border-color 300ms; }
/* Tastatur: Fokus in der Navigation zeigt sie sofort, auch während der Auftakt-Animation */
.nav:focus-within { opacity: 1 !important; transition: none; }

.menue-knopf { display: none; align-items: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); background: none; border: 0; padding: 10px 4px; cursor: pointer; }
.menue-striche { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: background 200ms var(--kurve); }
.menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 240ms var(--kurve); }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue-tafel { position: fixed; left: 0; right: 0; top: calc(72px + env(safe-area-inset-top, 0px)); bottom: 0; background: var(--ls-bg); color: var(--ls-ink); border-top: 1px solid var(--ls-linie); overflow-y: auto; z-index: 49; }
.menue-tafel[hidden] { display: none; }
.menue-tafel nav { display: flex; flex-direction: column; padding: 12px var(--gutter) 40px; }
.menue-tafel a { color: var(--ls-ink); text-decoration: none; font-size: 24px; font-weight: 600; letter-spacing: -.01em; padding: 14px 0; border-bottom: 1px solid var(--ls-linie); }
.menue-tafel a.nav-login { font-size: 16px; font-weight: 500; color: var(--ls-ink-muted); border-bottom: 0; padding-top: 22px; }
.menue-tafel a.btn { color: var(--ls-bg); font-size: 17px; font-weight: 500; justify-content: center; margin-top: 18px; padding: 15px 20px; border-bottom: 1px solid var(--ls-petrol); }
body.menue-offen { overflow: hidden; }
body.menue-offen .menue-striche { background: transparent; }
body.menue-offen .menue-striche::before { transform: translateY(6px) rotate(45deg); }
body.menue-offen .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }
/* !important: gilt auch über dem dunklen Startbereich */
body.menue-offen .kopf { --kopf-bg: var(--ls-bg) !important; --ink: var(--ls-ink) !important; --mark: var(--ls-amtlich) !important; --dot: var(--ls-ocker) !important;
  --btn-bg: var(--ls-petrol) !important; --btn-ink: var(--ls-bg) !important; background: var(--ls-bg); color: var(--ls-ink); border-bottom-color: var(--ls-linie); }
@media (max-width: 860px) { .nav a:not(.btn) { display: none; } .menue-knopf { display: inline-flex; } .kopf .nav { gap: 14px; } }
@media (max-width: 440px) { .menue-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .menue-knopf { padding: 10px 8px; } }
@media (max-width: 360px) { .kopf .wrap { gap: 10px; } .kopf .nav { gap: 6px; } .kopf .nav .btn { padding: 8px 12px; font-size: 14px; } }

/* =================== Startseite: Auftakt (dunkel) =================== */
/* Startbereich (Version 2, N-18): dunkel, Karte und Schlagzeile, nichts hängt am Scrollen.
   Volle Höhe, durchgehend Petrol bis zum Grundsätze-Band; ab dort ist die Seite weiß, ohne Verlauf (Marius, 12.10.2026, 08:52). */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--ls-petrol); color: var(--ls-flaeche); }
.hero .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding-top: 72px; }
.hero h1 { font-size: clamp(40px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -.03em; color: var(--ls-flaeche); }
.hero .lead { color: var(--ls-auf-dunkel); }
.hero .btn { background: var(--ls-bg); color: var(--ls-petrol); border-color: var(--ls-bg); }
.hero .btn:hover { background: var(--ls-flaeche); }
.hero .aktionen .tertiaer { color: var(--ls-auf-dunkel); }
.hero-meta { font-size: 13.5px; color: var(--ls-auf-dunkel-leise); margin: 26px 0 0; }
.wort { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; height: 1.12em; line-height: 1.04; padding-bottom: .08em; margin-bottom: -.08em; color: var(--ls-petrol-hell); }
.wort span { display: block; white-space: nowrap; transition: transform var(--wort-dauer, 320ms) var(--kurve), opacity var(--wort-dauer, 320ms) var(--kurve); }
.wort span.raus { position: absolute; left: 0; top: 0; transform: translateY(-105%); opacity: 0; }
.wort span.rein { position: absolute; left: 0; top: 0; transform: translateY(105%); opacity: 0; }
/* „Ihre Zielgruppe“ in der Zweitfarbe (Entscheidung Marius 08.10.2026); Großschrift, Kontrast 4,27:1 über der Grenze 3:1 */
.wort.ende span { color: var(--ls-ocker-hell); } /* Ocker-hell auf Petrol (N-12 für den dunklen Grund): 5,3:1 */
.schritte { display: flex; gap: 6px; margin-top: 40px; }
.schritte i { width: 18px; height: 2px; background: var(--ls-auf-dunkel-leise); opacity: .45; transition: background 300ms, opacity 300ms; }
.schritte i.an { background: var(--ls-auf-dunkel); opacity: 1; }
.schritte i.ende.an { background: var(--ls-ocker-hell); }
.hero-karte { position: relative; display: grid; place-items: center; }
.karte { width: 100%; height: auto; max-height: calc(100vh - 150px); display: block; overflow: visible; }
/* Karte auf Petrol: Grundpunkte Petrol-hell, Land im Fokus Auf-Dunkel, Orte und Zielgruppe Ocker-hell */
.karte g { opacity: .62; transition: opacity 500ms var(--kurve); }
.karte circle { fill: var(--ls-petrol-hell); }
/* Übergänge nur auf den 16 Gruppen und den wenigen markierten Kreisen, nie auf allen 2.167 (Befund 24.09.) */
.karte circle[data-c], .karte circle[data-z] { transition: fill 500ms var(--kurve), r 500ms var(--kurve); }
.karte.eng g { opacity: .28; }
/* Zielgruppe: Gruppen voll sichtbar, Grundpunkte über die Füllfarbe gedämpft (Petrol-hell zu 35 % auf Petrol),
   damit die Ocker-Punkte nicht die Gruppen-Transparenz erben (Befund 12.10.) */
.karte.zg g { opacity: 1; }
.karte.zg circle { fill: #226B7F; }
.karte g.an { opacity: 1; }
.karte g.an circle { fill: var(--ls-auf-dunkel); }
.karte circle.an { fill: var(--ls-ocker-hell); r: 2.9; }
.karte.zg circle[data-z] { fill: var(--ls-ocker-hell); r: 3; }
.karte .ring { fill: none; stroke: var(--ls-ocker-hell); stroke-width: 1.4; opacity: 0;
  transition: transform 700ms var(--kurve), opacity 400ms var(--kurve), r 700ms var(--kurve); }
.karte .ring.sichtbar { opacity: .9; }
.karte-quelle { position: absolute; right: 0; bottom: -18px; font-family: var(--ls-font-text); font-size: 12px; color: var(--ls-auf-dunkel-leise); }
.karte-quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 900px) {
  .hero { min-height: 0; padding-bottom: 36px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 18px; padding-top: 96px; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 54px); }
  .hero .lead, .hero .schritte { display: none; }
  .hero .aktionen { margin-top: 18px; }
  /* Mobil: Karte direkt unter der Überschrift, Knöpfe unter der Karte (Marius Huinink, 21.10.2026) */
  .hero .wrap > div:first-child { display: contents; }
  .hero h1 { order: 1; }
  .hero-karte { order: 2; }
  .hero .aktionen { order: 3; margin-top: 14px; }
  .hero-meta { margin-top: 18px; }
  .karte { max-height: 42vh; }
}

/* =================== Abschnitte auf Weiß =================== */
.abschnitt { padding-block: clamp(96px, 12vw, 160px); color: var(--hell-ink); position: relative; }
.abschnitt + .abschnitt { border-top: 1px solid var(--ls-linie); }
.flaeche { background: var(--ls-flaeche); }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
@media (max-width: 900px) { .zwei { grid-template-columns: 1fr; } }

/* Grundsätze unter der Karte */
.belege-band { border-top: 0; border-bottom: 1px solid var(--ls-linie); background: var(--hell-bg); }
.belege-band ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.belege-band li { padding: 22px 20px 22px 0; display: grid; gap: 4px; min-width: 0; }
.belege-band li + li { padding-left: 20px; border-left: 1px solid var(--ls-linie); }
.belege-band b { font-size: 15px; font-weight: 600; color: var(--hell-ink); }
.belege-band b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ls-ocker); margin-right: 9px; vertical-align: 2px; }
.belege-band span { font-family: var(--ls-font-text); font-size: 13px; color: var(--hell-muted); }
@media (max-width: 860px) {
  .belege-band ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belege-band li:nth-child(3) { padding-left: 0; border-left: 0; }
  .belege-band li:nth-child(n+3) { border-top: 1px solid var(--ls-linie); }
}

/* Population: Zähler und Persona-Reihe */
.pop-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 64px; }
.zaehler { text-align: right; }
.zaehler .zahl { display: block; font-size: clamp(44px, 6vw, 76px); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.zaehler .label { display: block; font-family: var(--ls-font-text); font-size: 12px; color: var(--hell-muted); margin-top: 10px; }
@media (max-width: 700px) { .pop-kopf { grid-template-columns: 1fr; } .zaehler { text-align: left; } }
.reihe { position: relative; user-select: none; margin-top: 56px; }
.band { position: relative; height: 250px; overflow: hidden; touch-action: pan-y; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.kachel { position: absolute; left: 50%; bottom: 30px; width: 160px; margin-left: -80px; display: grid; justify-items: center; gap: 10px;
  transition: transform 460ms var(--kurve), opacity 460ms var(--kurve); transform-origin: 50% 100%; cursor: pointer; }
.kachel .bild { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: var(--ls-bg); display: grid; place-items: center; }
.kachel .bild img, .kachel .bild svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.kachel .bild img { transition: opacity 320ms var(--kurve); }
/* Punktraster: vorab berechnet (personas/punkt/); wartet nur auf dem Ersatzweg im Browser */
.kachel .bild img.punkt-wartet { opacity: 0; }
.kachel .bild img.punkt-ersatz { filter: saturate(.55) brightness(1.06); }
.kachel .id { font-family: var(--ls-font-daten); font-size: 11px; color: var(--hell-muted); white-space: nowrap; }
.kachel.fokus .id { color: var(--hell-ink); }
.spurlinie { position: absolute; left: 0; right: 0; bottom: 8px; height: 6px; opacity: .5;
  background-image: radial-gradient(circle, var(--ls-amtlich) 1px, transparent 1.4px); background-size: 10px 6px; background-repeat: repeat-x;
  transition: background-position 460ms var(--kurve); }
.marker { position: absolute; left: 50%; bottom: 5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ls-ocker); }
.pfeil { position: absolute; top: 78px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ls-linie); background: var(--ls-bg); color: var(--hell-ink);
  font-size: 20px; display: grid; place-items: center; cursor: pointer; z-index: 3; transition: border-color 200ms; }
.pfeil:hover { border-color: var(--ls-amtlich); }
.pfeil.links { left: 0; }
.pfeil.rechts { right: 0; }
.steck { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 56px; border-top: 1px solid var(--ls-linie); padding-top: 28px; margin-top: 8px; min-height: 210px; }
.steck dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; font-size: 15px; align-content: start; }
.steck dt { color: var(--hell-muted); }
.steck dd { margin: 0; }
.zitat { font-family: var(--ls-font-zitat); font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.4; margin: 0; border-left: 2px solid var(--ls-oxid); padding-left: 18px; }
.zitat .ph { color: var(--hell-faint); }
.zeile { font-family: var(--ls-font-daten); font-size: 12px; color: var(--hell-muted); margin: 12px 0 0 20px; }
.chip { display: inline-block; font-family: var(--ls-font-daten); font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--ls-ocker-tint); color: var(--ls-oxid); }
.pop-fuss { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 36px; font-size: 15px; }
.pop-fuss .klein { font-size: 13px; color: var(--hell-muted); max-width: 70ch; margin: 0; }
@media (max-width: 760px) { .steck { grid-template-columns: 1fr; } .pfeil { top: 64px; } }

/* Fragestellungen mit Punktraster */
.fragen-hinweis { font-family: var(--ls-font-text); font-size: 14px; font-weight: 500; color: var(--hell-muted); margin: 36px 0 0; }
.fragen { display: grid; gap: 28px; margin-top: 14px; }
.frage { position: relative; border-top: 1px solid var(--ls-linie); padding: 20px 0 0 34px; cursor: pointer; }
.frage.an { border-top-color: var(--ls-amtlich); }
.frage::before { content: ''; position: absolute; left: 2px; top: 25px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--hell-faint); background: var(--hell-bg); transition: border-color 200ms var(--kurve), box-shadow 200ms var(--kurve); }
.frage.an::before { border-color: var(--ls-amtlich); box-shadow: inset 0 0 0 3.5px var(--hell-bg), inset 0 0 0 8px var(--ls-amtlich); }
.frage:not(.an):hover::before { border-color: var(--hell-ink); }
.frage .q { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.35; margin: 0; color: var(--hell-ink); transition: color 300ms; }
.frage:not(.an) .q { color: var(--hell-muted); }
.frage:not(.an):hover .q { color: var(--hell-ink); }
.frage .a { font-size: 14px; color: var(--hell-muted); margin: 8px 0 0; }
.raster-wrap { position: sticky; top: 110px; }
.raster-frage { font-family: var(--ls-font-text); font-weight: 500; font-size: 18px; line-height: 1.4; margin: 0 0 18px; min-height: 2.8em; }
.raster { width: 100%; height: auto; display: block; }
.raster circle { transition: fill 360ms var(--kurve); }
.verteilung { display: grid; gap: 8px; margin-top: 20px; }
.verteilung .z { display: grid; grid-template-columns: 172px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; }
.verteilung .b { height: 8px; background: var(--ls-flaeche); border-radius: 2px; overflow: hidden; }
.verteilung .b i { display: block; height: 100%; width: 0; transition: width 900ms var(--kurve); border-radius: 2px; }
.verteilung .w { font-variant-numeric: tabular-nums; text-align: right; color: var(--hell-muted); }
@media (max-width: 380px) { .verteilung .z { grid-template-columns: 128px minmax(0, 1fr) 40px; } }

/* Validierung: Kurve der mittleren Abweichung */
.sig { width: 100%; height: auto; display: block; overflow: visible; }
.sig .ref { fill: none; stroke: var(--ls-amtlich); stroke-width: 2.4; }
.sig .mod { fill: none; stroke: var(--ls-ocker); stroke-width: 2.4; stroke-dasharray: 7 6; }
.sig .band { fill: var(--ls-ocker-tint); }
.sig .achse { stroke: var(--ls-linie); stroke-width: 1; }
.sig text { font-family: var(--ls-font-daten); font-size: 12px; fill: var(--hell-muted); }
.legende { display: flex; gap: 22px; font-family: var(--ls-font-daten); font-size: 12px; color: var(--hell-muted); margin-top: 14px; flex-wrap: wrap; }
.legende span::before { content: ''; display: inline-block; width: 22px; height: 0; border-top: 2.4px solid var(--ls-amtlich); vertical-align: middle; margin-right: 8px; }
.legende span.m::before { border-top: 2.4px dashed var(--ls-ocker); }
.drei-schritte { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.drei-schritte li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; font-size: 15px; border-top: 1px solid var(--ls-linie); padding-top: 12px; }
.drei-schritte b { font-weight: 500; }
@media (max-width: 560px) { .drei-schritte li { grid-template-columns: 1fr; gap: 2px; } }
/* Mobil: Grafik direkt unter dem Einleitungstext, vor den drei Schritten (Marius Huinink, 21.10.2026) */
@media (max-width: 900px) {
  #validierung .zwei { display: flex; flex-direction: column; gap: 0; }
  #validierung .zwei > div:last-child { display: contents; }
  #validierung .zwei .eyebrow { order: 1; }
  #validierung .zwei h2 { order: 2; }
  #validierung .zwei .lead { order: 3; }
  #validierung .zwei > div:first-child { order: 4; margin-top: 30px; }
  #validierung .zwei .drei-schritte { order: 5; }
  #validierung .zwei > div:last-child > p:last-child { order: 6; }
}

/* So arbeiten wir */
.ablauf { list-style: none; padding: 0; margin: 48px 0 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ablauf li { border-top: 2px solid var(--ls-amtlich); padding-top: 18px; min-width: 0; }
.ablauf .nr { font-family: var(--ls-font-daten); font-size: 12px; color: var(--hell-muted); }
.ablauf h3 { font-size: 22px; margin: 8px 0 10px; }
.ablauf p { margin: 0; color: var(--hell-muted); }
@media (max-width: 760px) { .ablauf { grid-template-columns: 1fr; gap: 24px; } }

/* Antworttext (wirkt auch in den FAQ-Antworten) */
.antwort { margin-top: 36px; font-size: 18px; max-width: 60ch; }

/* Team: Porträtreihe */
.team-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; align-self: center; }
.team-reihe li { min-width: 0; }
.team-reihe img, .team-reihe .ohne-foto { aspect-ratio: 4 / 5; border-radius: var(--ls-radius-card); background-color: var(--ls-flaeche);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1.3' fill='%23D6D6D6'/%3E%3C/svg%3E"); }
.flaeche .team-reihe img { background: none; }
.team-reihe img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center bottom; }
.team-reihe .ohne-foto { display: flex; align-items: center; justify-content: center; }
.team-reihe .ohne-foto .ph { font-size: 10px; }
.team-reihe span { display: block; font-family: var(--ls-font-text); font-size: 13px; color: var(--hell-muted); margin-top: 8px; }

/* Wissen (Kurzfassung) */
.wissen-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.wissen-karte { display: block; border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-card); padding: 24px; text-decoration: none; color: var(--hell-ink); transition: border-color 200ms var(--kurve); min-width: 0; }
.wissen-karte:hover { border-color: var(--ls-amtlich); }
.wissen-karte .daten { font-family: var(--ls-font-text); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-oxid); }
.wissen-karte h3 { font-size: 19px; margin: 12px 0 0; }
.wissen-karte p { color: var(--hell-muted); margin: 10px 0 0; font-size: 15px; }
@media (max-width: 860px) { .wissen-karten { grid-template-columns: 1fr; } }

/* Einsatz (passt / Erhebung) */
.einsatz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; }
.einsatz-karte { border-radius: var(--ls-radius-panel); padding: clamp(24px, 3.4vw, 40px); min-width: 0; }
.einsatz-karte.passt { background: var(--ls-flaeche); }
.einsatz-karte.erhebung { background: var(--ls-ocker-tint); }
.einsatz-karte h3 { font-size: 22px; margin: 0; }
.einsatz-karte p { margin: 18px 0 0; color: var(--hell-muted); }
.einsatz-karte .tertiaer { color: var(--hell-ink); }
@media (max-width: 860px) { .einsatz { grid-template-columns: 1fr; } }

/* Erstgespräch: Formular */
.formular { display: grid; gap: 16px; }
.formular .zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formular label { display: block; font-size: 13px; color: var(--hell-muted); margin-bottom: 6px; }
.formular .optional { color: var(--hell-muted); }
.formular input, .formular textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--ls-rahmen); border-radius: 8px; background: var(--ls-bg); color: var(--hell-ink); }
.formular textarea { min-height: 120px; resize: vertical; }
.formular .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--hell-muted); }
.formular .check input { width: auto; margin-top: 4px; }
.formular [aria-invalid="true"] { border-color: var(--ls-fehler); }
.feld-fehler { margin: 6px 0 0; font-size: 14px; color: var(--ls-fehler); }
@media (max-width: 560px) { .formular .zeile2 { grid-template-columns: 1fr; } }
/* Lightbox Erstgespräch (Version 2, Auftrag G): nativer Dialog, Fokus bleibt im Dialog, Esc und Klick auf den Hintergrund schließen */
.lightbox { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--ls-radius-card); background: var(--ls-bg); color: var(--hell-ink); box-shadow: 0 24px 64px rgba(7, 55, 68, .28); overflow: auto; }
.lightbox::backdrop { background: rgba(10, 74, 90, .55); }
.lightbox .lb-inhalt { padding: clamp(24px, 4vw, 40px); }
.lightbox .lb-schliessen-form { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 10px 10px 0; margin-bottom: -44px; z-index: 1; }
.lightbox .lb-schliessen { font: inherit; font-size: 26px; line-height: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ls-flaeche); color: var(--hell-ink); cursor: pointer; }
.lightbox .lb-schliessen:hover { background: var(--ls-flaeche-tief); }
.lightbox h2 { font-size: clamp(24px, 2.6vw, 32px); margin-top: 4px; padding-right: 36px; }
.lightbox .lb-lead { color: var(--hell-muted); margin: 12px 0 22px; }
.lightbox .lb-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lightbox .lb-telefon { font-size: 14px; color: var(--hell-muted); }
.lightbox .ph { font-family: var(--ls-font-daten); font-size: 13px; color: var(--ls-oxid); }
.lightbox .lb-platzhalter { margin-top: 22px; padding: 14px 16px; border: 1px dashed var(--ls-ocker); border-radius: var(--ls-radius-chip); font-size: 13.5px; color: var(--hell-muted); }
.lightbox .lb-platzhalter .chip { margin-right: 6px; }
@media (max-width: 560px) { .lightbox { width: calc(100vw - 16px); } }

/* =================== Fuß =================== */
.fuss { background: var(--ls-petrol); color: var(--ls-auf-dunkel); padding-block: 56px 40px; font-size: 14px; }
.fuss .wrap { display: grid; gap: 28px; }
.fuss .reihe1 { display: flex; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; align-items: center; }
.fuss .wm { height: 24px; width: auto; color: var(--ls-bg); }
.fuss nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fuss nav[aria-label="Seiten"] { margin-left: auto; }
.fuss a { text-decoration: none; color: var(--ls-auf-dunkel); }
.fuss nav[aria-label="Seiten"] a { color: var(--ls-bg); }
/* KI-Kennzeichnung direkt an den Persona-Inhalten (Marius Huinink, 22.10.2026; vorher in der Fußzeile) */
.ki-hinweis { font-family: var(--ls-font-text); font-size: 12.5px; line-height: 1.45; color: var(--hell-muted); margin: 14px 0 0; }
.fuss .kennz { font-family: var(--ls-font-text); font-size: 11px; color: var(--ls-auf-dunkel-leise); }
@media (max-width: 700px) { .fuss nav[aria-label="Seiten"] { margin-left: 0; flex-basis: 100%; } }

/* =================== Unterseiten: gemeinsam =================== */
body.unterseite { --bg: var(--ls-bg); --ink: var(--ls-ink); --muted: var(--ls-ink-muted); --faint: var(--ls-ink-faint); --mark: var(--ls-amtlich); --dot: var(--ls-ocker); --linie: var(--ls-linie); }
.seitenkopf { padding-top: calc(72px + clamp(64px, 9vw, 120px)); padding-bottom: clamp(48px, 6vw, 80px); color: var(--hell-ink); }
.seitenkopf h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.04; letter-spacing: -.03em; max-width: 16ch; }
.sprung { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; font-size: 15px; }
.sprung a { text-decoration: none; color: var(--hell-muted); border-bottom: 1px solid var(--ls-linie); padding-bottom: 2px; }
.sprung a:hover { color: var(--hell-ink); border-color: var(--ls-amtlich); }
.text-spalte { display: grid; gap: 16px; max-width: 62ch; font-size: 18px; }
.text-spalte p { margin: 0; }
.begriffe { margin: 0; display: grid; gap: 0; align-content: start; }
.begriffe div { border-top: 1px solid var(--ls-linie); padding: 16px 0; }
.begriffe dt { font-weight: 600; }
.begriffe dd { margin: 4px 0 0; color: var(--hell-muted); }
.gruppe-titel { font-family: var(--ls-font-text); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-muted); border-bottom: 1px solid var(--ls-linie); padding-bottom: 10px; margin: 0; }
.rahmen-cta { margin: 28px 0 0; padding: 18px 20px; border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-card); background: var(--ls-bg); max-width: 58ch; }
/* Hinweis auf die Forschung (Population): abgesetzt und größer, Marius 13.10. */
.forschung-kasten { margin: 88px 0 0; padding: clamp(28px, 4vw, 44px); background: var(--ls-flaeche); border-left: 4px solid var(--ls-ocker); border-radius: var(--ls-radius-card); max-width: 900px; }
.forschung-kasten h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 0; }
.forschung-kasten p { font-size: clamp(17px, 1.5vw, 19px); color: var(--hell-muted); margin: 14px 0 0; max-width: 60ch; }
.forschung-kasten .btn { margin-top: 10px; }
/* Fester Rahmen: Stichworte im Prompt gegenüber einer Persona aus der Personamatrix (Version 2, Marius 12.10.: Grafik, Teile tauchen beim ersten Sichtkontakt auf) */
.rahmen-grafik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 0 0 28px; }
/* Version 2, Marius 13.10.: Grafik über die volle Breite, Kopfband bündig an der Kante der Tafel */
.rahmen-grafik.breit { gap: 24px; margin: 44px 0 40px; }
.begriffe.drei-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
@media (max-width: 900px) { .begriffe.drei-spalten { grid-template-columns: 1fr; } }
.rahmen-grafik .schema { grid-column: 1 / -1; margin: 2px 0 0; }
.rahmen-tafel { position: relative; overflow: hidden; border: 1px dashed var(--ls-linie); border-radius: var(--ls-radius-card); padding: 0 20px 18px; background: var(--ls-bg); }
.rahmen-tafel.fest { border: 1.5px solid var(--ls-petrol); }
.rahmen-tafel .rahmen-wer { margin: 0 -20px 16px; padding: 10px 20px; font-family: var(--ls-font-text); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hell-muted); background: var(--ls-flaeche); border-bottom: 1px solid var(--ls-linie); display: flex; align-items: center; gap: 8px; }
.rahmen-tafel .rahmen-wer.ls { background: var(--ls-petrol); color: var(--ls-bg); border-bottom-color: var(--ls-petrol); }
.rahmen-wer img { width: 18px; height: 18px; display: block; filter: brightness(0) invert(1); }
.rahmen-tafel h4 { margin: 0 0 12px; font-family: var(--ls-font-text); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--hell-ink); }
.rahmen-tafel.fest h4 { color: var(--ls-petrol); }
.rahmen-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.rahmen-chips li { overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-chip); padding: 4px 10px; background: var(--ls-bg); color: var(--hell-ink); }
.rahmen-chips li.leer { width: 64px; height: 26px; border-style: dashed; background: transparent; opacity: .7; }
.rahmen-tafel.fest .rahmen-chips li { border-color: var(--ls-petrol-hell); color: var(--ls-petrol); }
.rahmen-tafel.fest .rahmen-chips li.dim { background: var(--ls-flaeche); border-color: var(--ls-flaeche-tief); color: var(--hell-muted); }
.rahmen-tafel.fest .rahmen-chips li.dim::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-petrol); margin-right: 7px; vertical-align: 1px; }
.rahmen-tafel p { margin: 12px 0 0; font-size: 13px; color: var(--hell-muted); }
/* Auftauchen einzelner Teile: nur mit Skript (.bereit), einmalig beim ersten Sichtkontakt (.da); bei reduzierter Bewegung sofort sichtbar.
   Allgemein: .auftauch-teil mit --i (Methodik: sechs Schritte, vier Ziehungen, vier Skalen). */
.auftauchen.bereit .auftauch-teil { opacity: 0; transform: translateY(10px); transition: opacity 480ms var(--kurve), transform 480ms var(--kurve); transition-delay: calc(var(--i, 0) * 110ms); }
.auftauchen.bereit.da .auftauch-teil { opacity: 1; transform: none; }
.auftauchen.bereit .rahmen-tafel.fest { border-color: var(--ls-linie); transition: border-color 600ms var(--kurve) 1000ms; }
.auftauchen.bereit .rahmen-tafel.fest .rahmen-chips li { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--kurve), transform 420ms var(--kurve); transition-delay: calc(var(--i, 0) * 90ms); }
.auftauchen.bereit .rahmen-tafel.lose .rahmen-chips li.leer { opacity: 0; transition: opacity 400ms var(--kurve); transition-delay: calc(400ms + var(--i, 0) * 70ms); }
.auftauchen.bereit.da .rahmen-tafel.fest { border-color: var(--ls-petrol); }
.auftauchen.bereit.da .rahmen-tafel.fest .rahmen-chips li { opacity: 1; transform: none; }
.auftauchen.bereit.da .rahmen-tafel.lose .rahmen-chips li.leer { opacity: .7; }
@media (max-width: 560px) { .rahmen-grafik { grid-template-columns: 1fr; } }
.rahmen-cta b { display: block; font-weight: 600; margin-bottom: 4px; }
.rahmen-cta .tertiaer { margin-top: 12px; }

/* =================== Population =================== */
.aufbau-fakten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; margin-top: 56px; border-top: 1px solid var(--ls-linie); padding-top: 40px; }
.aufbau-fakten > div > p:not(.eyebrow):not(.quellzeile) { color: var(--hell-muted); margin: 0; max-width: 52ch; }
.aufbau-fakten .quellzeile { font-family: var(--ls-font-text); font-size: 13.5px; color: var(--hell-muted); margin: 12px 0 0; }
.ebenen { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.ebenen li { border-top: 2px solid var(--ls-amtlich); padding-top: 12px; min-width: 0; }
.ebenen b { display: block; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ebenen span { display: block; font-size: 14px; color: var(--hell-muted); margin-top: 4px; }
.bereiche { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bereiche li { font-size: 14px; border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-chip); padding: 5px 12px; background: var(--ls-bg); }
/* Dimensionen laufen nach hinten grau aus, ohne Zahl (Auftrag B.2, Entscheidung Marius 12.10.: alle Namen, die letzten fünf auslaufend) */
.bereiche li.aus { color: var(--hell-muted); }
.bereiche li.aus:nth-child(9) { opacity: .78; }
.bereiche li.aus:nth-child(10) { opacity: .6; }
.bereiche li.aus:nth-child(11) { opacity: .44; }
.bereiche li.aus:nth-child(12) { opacity: .3; }
.bereiche li.aus:nth-child(13) { opacity: .2; }
.bereiche li.weiter { opacity: .35; border-style: dashed; background: transparent; }
@media (max-width: 900px) { .aufbau-fakten { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ebenen { grid-template-columns: 1fr; gap: 12px; } .ebenen li { display: flex; align-items: baseline; gap: 12px; } .ebenen span { margin-top: 0; } }

/* Schema Randverteilungen → Personamatrix → Persona */
.matrix-fig { margin: 56px 0 0; overflow-x: auto; }
.matrix { width: 100%; min-width: 720px; height: auto; display: block; }
.mx-titel { font-family: var(--ls-font-text); font-weight: 600; font-size: 11px; letter-spacing: .1em; fill: var(--ls-oxid); }
.mx-label { font-size: 13px; fill: var(--hell-muted); }
.mx-balken, .mx-zelle { fill: var(--ls-amtlich); }
.mx-gezogen { fill: var(--ls-ocker); }
.mx-pfeil { fill: none; stroke: var(--ls-rahmen); stroke-width: 1.4; }
.mx-spaet, .mx-karte { opacity: 0; transition: opacity 500ms var(--kurve); }
.matrix.fertig .mx-spaet, .matrix.fertig .mx-karte { opacity: 1; }
.mx-kartenrand { fill: var(--ls-bg); stroke: var(--ls-linie); }
.mx-kopf { font-family: var(--ls-font-daten); font-size: 13px; fill: var(--hell-ink); }
.mx-kennz { font-family: var(--ls-font-daten); font-size: 10px; fill: var(--ls-oxid); }
.mx-dt { font-size: 13px; fill: var(--hell-muted); }
.mx-dd { font-size: 13px; fill: var(--hell-ink); }

/* Statistik mit Gesicht */
.fakten { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.fakten li { border-top: 2px solid var(--ls-amtlich); padding-top: 14px; min-width: 0; }
.fakten b { display: block; font-size: clamp(26px, 2.8vw, 38px); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fakten span { display: block; color: var(--hell-muted); font-size: 15px; margin-top: 6px; }
@media (max-width: 900px) { .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fakten { grid-template-columns: 1fr; } }

/* Wo es scheitert, was wir tun */
.fehler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin-top: 44px; }
.fehler article { border-top: 2px solid var(--ls-ocker); padding-top: 20px; min-width: 0; }
.fehler h3 { font-family: var(--ls-font-text); font-weight: 600; font-size: clamp(21px, 2vw, 26px); }
.fehler p { color: var(--hell-muted); margin: 14px 0 0; }
.tun { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.tun li { padding-left: 18px; position: relative; }
.tun li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--ls-amtlich); }
.tun.aus li::before { background: var(--ls-oxid); }
@media (max-width: 820px) { .fehler { grid-template-columns: 1fr; } }

/* Stimmen aus der Wissenschaft (seit Version 2 nicht mehr auf Population; Stile für Blogbeiträge, Beschluss 3) */
.stimmen-gruppe { margin-top: 56px; }
.stimmen-gruppe > h3 { font-family: var(--ls-font-text); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-muted); border-bottom: 1px solid var(--ls-linie); padding-bottom: 10px; }
.stimme-k { margin: 0; padding: 26px 0; border-bottom: 1px solid var(--ls-linie); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px 48px; }
.stimme-k blockquote { margin: 0; font-family: var(--ls-font-text); font-weight: 500; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.42; grid-row: span 2; }
.stimme-k figcaption { font-size: 14px; }
.stimme-k figcaption b { font-weight: 500; display: block; }
.stimme-k .quelle { display: block; font-family: var(--ls-font-text); font-size: 13.5px; color: var(--hell-muted); margin-top: 6px; }
.stimme-k details { font-size: 13px; color: var(--hell-muted); }
.stimme-k summary { cursor: pointer; font-family: var(--ls-font-text); font-size: 11px; }
.stimme-k details p { margin: 8px 0 0; }
@media (max-width: 760px) { .stimme-k { grid-template-columns: 1fr; } .stimme-k blockquote { grid-row: auto; } }
.unsere-antwort { margin-top: 56px; background: var(--ls-flaeche); border-radius: 10px; padding: clamp(24px, 4vw, 44px); }
.unsere-antwort h3 { font-size: 24px; }
.unsere-antwort ol { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 12px; max-width: 70ch; }

/* Über uns: Vision auf Petrol (Version 2, Auftrag D.1) */
.abschnitt.vision { background: var(--ls-petrol); color: var(--ls-flaeche); }
.abschnitt.vision .eyebrow { color: var(--ls-ocker-hell); }
.abschnitt.vision h2 { color: var(--ls-flaeche); }
.abschnitt.vision .lead { color: var(--ls-auf-dunkel); margin-top: 0; }
.abschnitt.vision + .abschnitt { border-top: 0; }
/* Über uns: Kodex der Wissenschaft (Platzhalter R-254, Entwurf) */
.kodex { margin: 40px 0 0; padding: 0; list-style: none; counter-reset: kodex; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 56px; max-width: 1100px; }
.kodex li { counter-increment: kodex; position: relative; padding: 16px 0 0 44px; border-top: 1px solid var(--ls-linie); color: var(--hell-muted); font-size: 16px; }
.kodex li::before { content: counter(kodex, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--ls-font-daten); font-size: 12px; letter-spacing: .08em; color: var(--ls-oxid); }
.kodex li b { display: block; color: var(--hell-ink); font-weight: 600; margin-bottom: 4px; }
.chip.entwurf { margin-left: 10px; vertical-align: 2px; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) { .kodex { grid-template-columns: 1fr; } }

/* =================== Methodik =================== */
/* Zusammenarbeit in drei Phasen */
.phasen { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.phasen li { border-top: 1px solid var(--ls-linie); padding-top: 18px; min-width: 0; display: flex; flex-direction: column; }
.phasen .nr { font-family: var(--ls-font-text); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-oxid); }
.phasen h3 { font-size: 19px; margin: 10px 0 0; }
.phasen li > p { color: var(--hell-muted); margin: 8px 0 0; font-size: 15px; }
.phasen h3 + p { margin-bottom: 20px; }
.phasen .anteil { margin-top: auto; height: 8px; border-radius: 2px; overflow: hidden; background: var(--ls-ocker); }
.phasen .anteil i { display: block; height: 100%; width: var(--ls); background: var(--ls-amtlich); }
.phasen .wer { display: flex; justify-content: space-between; font-family: var(--ls-font-text); font-size: 13px; color: var(--hell-muted); margin: 6px 0 0; }
@media (max-width: 900px) { .phasen { grid-template-columns: 1fr; } }

/* Studienaufbau in sechs Schritten */
.sechs { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.sechs li { border-top: 1px solid var(--ls-linie); padding-top: 18px; min-width: 0; }
.sechs .nr { font-family: var(--ls-font-daten); font-size: 12px; letter-spacing: .08em; color: var(--ls-oxid); }
.sechs h3 { font-size: 19px; margin: 10px 0 0; }
.sechs p { color: var(--hell-muted); margin: 8px 0 0; font-size: 15px; }
@media (max-width: 900px) { .sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sechs { grid-template-columns: 1fr; gap: 28px; } }

/* Vier Arten der Ziehung */
.ziehung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 40px 0 0; }
/* Regeln der Ziehung als kompakte Zeile (Version 2, Beschluss 5) */
.merkmal-chips { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.merkmal-chips li { font-size: 14px; border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-chip); padding: 6px 12px; color: var(--hell-muted); background: var(--ls-bg); }
.merkmal-chips b { color: var(--hell-ink); font-weight: 600; }
/* Fragebogen: Antwortformen als kleine Grafiken ohne Messwerte (Version 2, Beschluss 5) */
.skalen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 40px 0 0; }
.skalen figure { margin: 0; border-top: 1px solid var(--ls-linie); padding-top: 16px; min-width: 0; }
.skalen svg { width: 100%; height: auto; display: block; }
.skalen .sk { font-family: var(--ls-font-daten); font-size: 9.5px; fill: var(--hell-muted); }
.skalen .sk.fett { font-size: 11px; fill: var(--hell-ink); font-weight: 600; }
.skalen .sk.zitat { font-family: var(--ls-font-zitat, serif); font-size: 26px; fill: var(--ls-ocker); }
.skalen figcaption { font-size: 14px; color: var(--hell-muted); margin-top: 10px; }
.skalen figcaption b { display: block; color: var(--hell-ink); font-weight: 600; }
/* Ergebnis-Teaser Methodik (13.10.): Muster eines Berichts nach dem Aufbau der Befundberichte */
.ergebnis-zwei { align-items: start; }
.bericht-muster { border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-card); background: var(--ls-bg); overflow: hidden; box-shadow: 0 14px 40px rgba(7, 55, 68, .09); }
.bm-kopf { background: var(--ls-petrol); color: var(--ls-flaeche); padding: 18px 22px; }
.bm-kopf h3 { font-size: 19px; margin: 8px 0 0; color: var(--ls-bg); }
.bm-kopf p { margin: 6px 0 0; font-family: var(--ls-font-daten); font-size: 12px; color: var(--ls-auf-dunkel); }
.bm-tag { display: inline-block; font-family: var(--ls-font-text); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-petrol); background: var(--ls-ocker-hell); border-radius: 4px; padding: 3px 8px; }
.bm-teil { padding: 16px 22px; border-top: 1px solid var(--ls-linie); }
.bm-teil:first-of-type { border-top: 0; }
.bm-teil p { margin: 4px 0 0; font-size: 15px; color: var(--hell-ink); }
.bm-titel { font-family: var(--ls-font-text); font-size: 11.5px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-amtlich) !important; margin: 0 !important; }
.bm-titel.aus { color: var(--ls-oxid) !important; }
.bm-klein { font-size: 12.5px !important; color: var(--hell-muted) !important; }
.bericht-muster blockquote { margin: 8px 0 0; font-family: var(--ls-font-zitat); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--hell-ink); }
.bm-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bm-balken { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bm-balken li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: 13.5px; }
.bm-balken span { color: var(--hell-ink); }
.bm-balken i { display: block; height: 10px; border-radius: 3px; background: var(--ls-amtlich); width: calc(var(--w) * 2.2); max-width: 100%; transition: width 900ms var(--kurve) 400ms; }
.bm-balken li:first-child i { background: var(--ls-ocker); }
.bm-balken b { font-family: var(--ls-font-daten); font-weight: 500; font-size: 12.5px; text-align: right; }
.auftauchen.bereit .bm-balken i { width: 0; }
.auftauchen.bereit.da .bm-balken i { width: calc(var(--w) * 2.2); }
/* Beispielbericht abstrakt (Marius 13.10., 10:52): Platzhalter statt Thema und Zahlen, Balken mit Fehlermarge */
.bericht-muster.abstrakt .bm-balken li { grid-template-columns: 5.5em minmax(0, 1fr); }
.bericht-muster.abstrakt .bm-balken span { color: var(--hell-muted); font-family: var(--ls-font-daten); font-size: 12.5px; }
.bericht-muster.abstrakt .bm-balken i { position: relative; overflow: visible; }
.bericht-muster.abstrakt .bm-balken i::after { content: ""; position: absolute; right: -9px; top: -3px; width: 18px; height: 16px; box-sizing: border-box; border-left: 1.5px solid var(--hell-ink); border-right: 1.5px solid var(--hell-ink); background: linear-gradient(var(--hell-ink), var(--hell-ink)) center / 100% 1.5px no-repeat; opacity: .55; transition: opacity 400ms ease 1300ms; }
.auftauchen.bereit .bericht-muster.abstrakt .bm-balken i::after, .bericht-muster.abstrakt.auftauchen.bereit .bm-balken i::after { opacity: 0; }
.bericht-muster.abstrakt.auftauchen.bereit.da .bm-balken i::after { opacity: .55; }
.bm-zitat { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--ls-linie); display: grid; gap: 7px; }
.bm-zitat span { display: block; height: 9px; width: var(--l); border-radius: 3px; background: var(--ls-flaeche-tief); }
/* Empfehlung im Berichtsmuster hervorgehoben (Marius Huinink, 20.10.2026) */
.bm-teil.bm-empfehlung { background: var(--ls-petrol); border-top: 0; padding: 20px 22px 22px; }
.bm-empfehlung .bm-titel { color: var(--ls-ocker-tint) !important; font-size: 12.5px !important; }
.bm-empfehlung p { color: var(--ls-bg); font-size: 15.5px; }
.bm-empf-liste { list-style: none; counter-reset: empf; margin: 14px 0 12px; padding: 0; display: grid; gap: 12px; }
.bm-empf-liste li { counter-increment: empf; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 5px; align-items: center; }
.bm-empf-liste li::before { content: counter(empf); grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--ls-ocker-hell); color: var(--ls-petrol-tief); font-family: var(--ls-font-daten); font-size: 13px; font-weight: 500; display: grid; place-items: center; }
.bm-empf-liste span { display: block; height: 9px; width: var(--l); border-radius: 3px; background: rgba(255, 255, 255, .5); }
.bm-empf-liste em { font-style: normal; font-family: var(--ls-font-daten); font-size: 12px; color: var(--ls-auf-dunkel); }
.schritt-marke { display: inline-block; margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-petrol); background: var(--ls-ocker-hell); border-radius: var(--ls-radius-chip); padding: 3px 8px; }
/* Hinweise im Studienaufbau (Marius Huinink, 20.10.2026): Stoerer in Ocker, Kaesten in Hellblau und Oxid */
.schritt-marke.marke-stoerer, .schritt-marke.marke-blau, .schritt-marke.marke-rot { display: table; margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.35; }
.schritt-marke.marke-stoerer { background: var(--ls-ocker-hell); color: var(--ls-petrol-tief); border-radius: 999px; padding: 4px 11px; }
.schritt-marke.marke-blau { background: #D6ECF3; color: var(--ls-petrol-tief); border-radius: 4px; padding: 6px 10px; }
.schritt-marke.marke-rot { background: var(--ls-oxid); color: #fff; border-radius: 4px; padding: 6px 10px; }
@media (max-width: 480px) { .bm-balken li { grid-template-columns: 1fr 3.2em; } .bm-balken i { grid-column: 1 / -1; grid-row: 2; } .bm-zwei { grid-template-columns: 1fr; } }

/* Piktogramme (Version 2, Marius 12.10., 16:02): Linien Petrol, Akzent Ocker; Pfade mit Klasse z zeichnen sich beim Auftauchen */
.pikto { width: 56px; height: 56px; display: block; }
.sechs.mit-pikto li { padding-top: 0; border-top: 0; }
.sechs.mit-pikto .pikto { width: 64px; height: 64px; margin: 0 0 14px -4px; }
.sechs.mit-pikto .nr { display: inline-block; border-top: 2px solid var(--ls-amtlich); padding-top: 8px; }
.sechs.mit-pikto li:hover .pikto { transform: translateY(-2px); transition: transform 300ms var(--kurve); }
.merkmal-karten { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; }
.merkmal-karten li { border-top: 1px solid var(--ls-linie); padding-top: 16px; min-width: 0; }
.merkmal-karten .pikto { margin: 0 0 12px -2px; }
.merkmal-karten b { display: block; font-weight: 600; font-size: 16px; }
.merkmal-karten span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--hell-muted); }
.auftauchen.bereit .pikto .z { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 900ms var(--kurve); transition-delay: calc(var(--i, 0) * 110ms + 240ms); }
.auftauchen.bereit.da .pikto .z { stroke-dashoffset: 0; }
@media (max-width: 900px) { .merkmal-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .merkmal-karten { grid-template-columns: 1fr; } }
.formen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 900px) { .skalen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .formen.drei { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .begriffe.knapp { grid-template-columns: 1fr; } }
.ziehung figure { margin: 0; border-top: 1px solid var(--ls-linie); padding-top: 14px; min-width: 0; }
.ziehung svg { width: 100%; height: auto; display: block; }
.ziehung figcaption { font-size: 14px; color: var(--hell-muted); margin-top: 8px; }
.ziehung figcaption b { display: block; color: var(--hell-ink); font-weight: 600; }
.ziehung .zp { fill: var(--ls-flaeche-tief); transition: fill 380ms var(--kurve); }
.ziehung .zp.gz { fill: var(--ls-amtlich); }
.ziehung .zp.klein { fill: var(--ls-ocker); }
.ziehung .zn { font-family: var(--ls-font-daten); font-size: 10px; fill: var(--hell-muted); }
@media (max-width: 900px) { .ziehung { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Studienformen */
.formen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 40px; }
.formen article { border-top: 1px solid var(--ls-linie); padding: 22px 0 26px; min-width: 0; }
.formen h3 { font-size: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.formen p { color: var(--hell-muted); margin: 10px 0 0; }
.formen .bald h3 { color: var(--hell-muted); }
.formen .bald .chip { font-size: 10px; }
@media (max-width: 760px) { .formen { grid-template-columns: 1fr; } }

/* Nachweis: gemessen, modelliert, geschätzt. Die Wörter in Tinte, die Farbe trägt die Unterstreichung
   (Ocker als Fließtext erreicht nur 4,27:1). */
.drei-woerter dt { font-family: var(--ls-font-text); font-weight: 600; font-size: 21px; }
.drei-woerter div:nth-child(-n+3) dt { color: var(--hell-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.drei-woerter div:nth-child(1) dt { text-decoration-color: var(--ls-amtlich); }
.drei-woerter div:nth-child(2) dt { text-decoration-color: var(--ls-ocker); }
.drei-woerter div:nth-child(3) dt { text-decoration-color: var(--ls-oxid); }
.drei-woerter div:nth-child(4) dt { font-size: inherit; }

/* Kennzahlen und Wahlvergleiche (auch im Blog) */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.kennzahlen > div { border-top: 2px solid var(--ls-ocker); padding-top: 16px; min-width: 0; }
.k-zahl { display: block; font-size: clamp(34px, 4vw, 48px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.k-label { display: block; font-size: 14px; margin-top: 8px; }
.k-vgl { display: block; font-family: var(--ls-font-daten); font-size: 11px; color: var(--hell-muted); margin-top: 6px; }
@media (max-width: 900px) { .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.wahl { margin: 0; min-width: 0; }
.wahl figcaption { font-size: 14px; color: var(--hell-muted); margin-bottom: 12px; }
.wahl figcaption b { display: block; color: var(--hell-ink); font-size: 18px; font-weight: 600; }
.balken3 { width: 100%; height: auto; display: block; overflow: visible; }
.b3-gitter { stroke: var(--ls-flaeche-tief); stroke-width: 1; }
.b3-achse { stroke: var(--ls-rahmen); stroke-width: 1; }
.b3-skala { font-family: var(--ls-font-daten); font-size: 12px; fill: var(--hell-muted); }
.b3-partei { font-size: 14px; fill: var(--hell-ink); }
.b3-huerde { stroke: var(--ls-oxid); stroke-width: 1; stroke-dasharray: 4 4; }
.b3-huerde-t { font-family: var(--ls-font-daten); font-size: 11px; fill: var(--ls-oxid); }
.b3-amt { fill: var(--ls-amtlich); }
.b3-inst { fill: var(--ls-rahmen); }
.b3-ls { fill: var(--ls-ocker); }
.legende.balken span::before { width: 12px; height: 12px; border: 0; border-radius: 2px; background: var(--ls-amtlich); }
.legende.balken .l-inst::before { background: var(--ls-rahmen); }
.legende.balken .l-ls::before { background-color: var(--ls-ocker); background-image: repeating-linear-gradient(45deg, var(--ls-ocker) 0 2.2px, var(--ls-bg) 2.2px 3.2px); }
.werte { margin-top: 14px; font-size: 13px; }
.werte summary { cursor: pointer; font-family: var(--ls-font-daten); font-size: 11px; color: var(--hell-muted); }
.tab-wrap { overflow-x: auto; margin-top: 10px; }
.werte table { border-collapse: collapse; width: 100%; min-width: 420px; font-variant-numeric: tabular-nums; }
.werte th, .werte td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--ls-linie); }
.werte thead th { font-family: var(--ls-font-daten); font-size: 10px; font-weight: 500; color: var(--hell-muted); vertical-align: bottom; }
.werte th[scope="row"], .werte thead th:first-child { text-align: left; }
.bilanz { margin-top: 48px; }
.bilanz h3 { font-size: 20px; }
@media (max-width: 900px) { .wahlen { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .b3-partei { font-size: 17px; } .b3-skala { font-size: 15px; } .b3-huerde-t { font-size: 14px; } }

/* =================== Über uns =================== */
.personen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin-top: 44px; }
.personen.zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.personen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.person { min-width: 0; }
.person-bild { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--ls-radius-card); overflow: hidden; background-color: var(--ls-flaeche);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1.3' fill='%23D6D6D6'/%3E%3C/svg%3E"); }
.person-bild.ohne-foto { display: flex; align-items: center; justify-content: center; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.person h3 { font-size: 19px; margin: 16px 0 0; }
.person .rolle { margin: 4px 0 0; font-size: 15px; }
.person .fachgebiet { margin: 4px 0 0; font-family: var(--ls-font-text); font-size: 14px; color: var(--hell-muted); }
[data-reihe] > .person { transition: opacity 560ms var(--kurve), transform 560ms var(--kurve); }
[data-reihe].warten > .person { opacity: 0; transform: translateY(14px); }
.beirat-gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; margin-top: 44px; }
.bildnachweis { padding-bottom: 40px; }
@media (max-width: 1000px) { .personen.vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beirat-gruppen { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .personen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .personen, .personen.zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .person h3 { font-size: 16px; } .person .rolle { font-size: 14px; } }

/* Unser Weg bis hier: Zeitleiste */
.weg { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; position: relative; }
.weg::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ls-rahmen); transform-origin: 0 50%; transition: transform 1400ms var(--kurve); }
.weg li { position: relative; padding-top: 34px; min-width: 0; transition: opacity 560ms var(--kurve), transform 560ms var(--kurve); }
.weg li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--ls-bg); border: 1.5px solid var(--ls-amtlich); box-sizing: border-box; }
.weg li.jetzt::before { background: var(--ls-ocker); border-color: var(--ls-ocker); }
.weg .zeit { display: block; font-family: var(--ls-font-daten); font-size: 12px; letter-spacing: .06em; color: var(--hell-muted); margin-bottom: 8px; }
.weg h3 { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.weg p { font-size: 15px; color: var(--hell-muted); margin: 0; }
.weg p a { color: var(--hell-ink); }
.weg.sieben { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.weg.sieben h3 { font-size: 17px; }
.weg.warten::before { transform: scaleX(0); }
.weg.warten li { opacity: 0; transform: translateY(12px); }
@media (max-width: 1100px) {
  .weg, .weg.sieben { grid-template-columns: 1fr; gap: 28px; }
  .weg::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; transform-origin: 50% 0; }
  .weg.warten::before { transform: scaleY(0); }
  .weg li { padding: 0 0 0 36px; }
  .weg li::before { top: 3px; }
}

/* =================== Wissen (FAQ und Glossar) =================== */
.suche { margin-top: 36px; max-width: 640px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.suche label { grid-column: 1 / -1; font-family: var(--ls-font-text); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--hell-muted); }
.suche input { font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-control); background: var(--ls-bg); color: var(--hell-ink); min-width: 0; }
.suche input:focus { outline: 2px solid var(--ls-amtlich); outline-offset: 1px; border-color: var(--ls-amtlich); }
.treffer { font-family: var(--ls-font-daten); font-size: 12px; color: var(--hell-muted); white-space: nowrap; }
.themen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.themen button { font: inherit; font-size: 14px; padding: 6px 12px; border-radius: var(--ls-radius-chip); border: 1px solid var(--ls-linie); background: var(--ls-bg); color: var(--hell-ink); cursor: pointer; }
.themen button[aria-pressed="true"] { background: var(--ls-petrol); border-color: var(--ls-petrol); color: var(--ls-bg); }
.faq { margin-top: 28px; max-width: 920px; }
.faq .gruppe-titel { margin-top: 40px; }
.faq .gruppe-titel:first-child { margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--ls-linie); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--ls-font-daten); color: var(--ls-oxid); grid-column: 2; grid-row: 1; }
.faq details[open] summary::after { content: '−'; }
.faq summary .thema { display: none; }
.faq summary:hover .f { color: var(--ls-amtlich); }
.faq .antwort { padding: 0 0 22px; max-width: 72ch; color: var(--hell-ink); }
.faq .antwort p { margin: 0 0 12px; }
.faq .antwort ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; }
.faq .antwort a { color: var(--ls-amtlich); }
.faq .quellzeile { font-family: var(--ls-font-text); font-size: 13.5px; color: var(--hell-muted); border-top: 1px dashed var(--ls-linie); padding-top: 10px; margin-top: 4px; }
.glossar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 32px; }
.glossar div { border-top: 1px solid var(--ls-linie); padding: 14px 0; }
.glossar dt { font-weight: 600; }
.glossar dd { margin: 4px 0 0; color: var(--hell-muted); }
.glossar dd a { font-family: var(--ls-font-text); font-size: 13px; color: var(--ls-amtlich); white-space: nowrap; }
/* Sprungziele unter der festen Kopfleiste */
.faq details, .glossar > div { scroll-margin-top: 96px; }
:target > summary .f, details:target summary .f { color: var(--ls-amtlich); }
@media (max-width: 760px) { .glossar { grid-template-columns: 1fr; } .faq summary { font-size: 17px; } .suche { grid-template-columns: 1fr; } }

/* =================== Blog und Rechtstexte =================== */
.rechtstext { padding-top: 0; }
.rechtstext .recht-h { font-size: 21px; margin: 18px 0 -6px; }
.rechtstext .text-spalte a { color: inherit; }
.beitraege { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.beitraege li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; border-top: 1px solid var(--ls-linie); padding: 24px 0; }
.beitraege .daten { font-family: var(--ls-font-daten); font-size: 12px; color: var(--hell-muted); padding-top: 4px; }
.beitraege h3 { font-size: 21px; margin: 0; }
.beitraege h3 a { color: inherit; text-decoration: none; }
.beitraege h3 a:hover { color: var(--ls-amtlich); }
.beitraege p { margin: 8px 0 0; color: var(--hell-muted); }
@media (max-width: 640px) { .beitraege li { grid-template-columns: 1fr; } }

/* Blogartikel (Standard v0.1: eine Spalte, höchstens zwei Kästen) */
.artikel { --spalte: 720px; padding: calc(72px + clamp(48px, 7vw, 96px)) var(--gutter) clamp(72px, 9vw, 120px); color: var(--hell-ink); }
.artikel-kopf, .artikel-text { max-width: var(--spalte); margin-inline: auto; }
.zurueck { display: inline-block; font-family: var(--ls-font-text); font-weight: 500; font-size: 14px; color: var(--hell-muted); text-decoration: none; margin-bottom: 28px; }
.zurueck:hover { color: var(--ls-amtlich); }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--ls-font-text); font-size: 12px; color: var(--hell-muted); margin: 0; }
.artikel-meta .kategorie { background: var(--ls-petrol); color: var(--ls-bg); border-radius: var(--ls-radius-chip); padding: 4px 10px; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.artikel-kopf h1 { hyphens: auto; overflow-wrap: anywhere; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.025em; margin: 20px 0 0; }
.autor { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; font-size: 14px; }
.autor .avatar { width: 40px; height: 40px; display: block; }
.autor .initialen { width: 40px; height: 40px; border-radius: 50%; background: var(--ls-ocker-tint); color: var(--ls-oxid); display: grid; place-items: center; font-family: var(--ls-font-daten); font-size: 12px; font-weight: 500; }
.autor b { display: block; font-weight: 600; }
.autor span:last-child { color: var(--hell-muted); }
.artikel-text { margin-top: 48px; border-top: 1px solid var(--ls-linie); padding-top: 40px; font-size: 17px; line-height: 1.65; }
.artikel-text p { margin: 0 0 18px; }
.artikel-lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; color: var(--hell-ink); font-weight: 500; }
.artikel-text h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 56px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ls-linie); }
.artikel-text h3 { font-size: 19px; margin: 32px 0 10px; }
.artikel-text a { color: var(--ls-amtlich); }
.artikel-text sup a { text-decoration: none; font-family: var(--ls-font-daten); font-size: 11px; padding-left: 1px; }
.kasten { border-radius: var(--ls-radius-card); padding: 24px 28px; margin: 36px 0; }
.kasten-titel { font-family: var(--ls-font-text); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px !important; }
.kasten-blick { background: var(--ls-flaeche); }
.kasten-blick .kasten-titel { color: var(--ls-amtlich); }
.kasten-blick ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 16px; }
.kasten-methode { background: var(--ls-ocker-tint); }
.kasten-methode .kasten-titel { color: var(--ls-oxid); }
.kasten-methode dl { margin: 0; display: grid; gap: 12px; font-size: 15px; }
.kasten-methode dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.kasten-methode dt { font-weight: 600; }
.kasten-methode dd { margin: 0; }
.artikel .wahlen { grid-template-columns: 1fr; gap: 40px; margin-top: 28px; }
.artikel .bilanz { margin-top: 8px; gap: 24px 40px; font-size: 16px; }
.artikel .bilanz h3 { margin-top: 0; }
.artikel-cta { margin-top: 28px !important; font-weight: 500; }
.quellen { margin-top: 56px; }
.quellen ol { padding-left: 22px; display: grid; gap: 10px; font-size: 14px; color: var(--hell-muted); }
.quellen li:target { color: var(--hell-ink); background: var(--ls-ocker-tint); }
@media (max-width: 600px) { .kasten { padding: 20px; } .kasten-methode dl div { grid-template-columns: 1fr; gap: 2px; } .artikel-text { font-size: 16px; } }

/* =================== Hilfsklassen =================== */
.klein { font-size: 14px; color: var(--hell-muted); }
.hinweis-klein { font-family: var(--ls-font-text); font-size: 13.5px; color: var(--hell-muted); margin-top: 14px; }
.schema { font-family: var(--ls-font-text); font-size: 13.5px; color: var(--hell-muted); margin-top: 8px; }
.quellzeile-frei { font-family: var(--ls-font-text); font-size: 13.5px; color: var(--hell-muted); margin: 28px 0 0; }
/* Platzhalter für Zulieferungen (nie erfinden, Loop-Auftrag Abschnitt 6) */
.ph { color: var(--ls-oxid); font-family: var(--ls-font-daten); font-size: 13px; }
.versteckt { display: none !important; }

/* =================== Reduzierte Bewegung: jeder Effekt sofort im Endzustand =================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Methodik: Entscheidungszeilen und Vergleichstabelle (08.10.2026, Entscheidung Marius) */
.formen .entscheidung { font-family: var(--ls-font-text); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-oxid, #8A3B1F); margin: 0 0 8px; }
.formen .bald .entscheidung { color: var(--hell-muted); }
.vergleich-titel { font-size: clamp(22px, 2.2vw, 28px); margin: 0; }
/* Vergleichstabelle abgesetzt (Marius 13.10.): eigene Karte, Spalte Living Society hervorgehoben */
.vergleich-karte { margin-top: 72px; background: var(--ls-bg); border: 1px solid var(--ls-linie); border-radius: var(--ls-radius-card); padding: clamp(24px, 3.5vw, 40px); box-shadow: 0 10px 30px rgba(7, 55, 68, .07); }
.vergleich-karte .eyebrow { margin-bottom: 8px; }
.vergleich-karte .vergleich thead th:last-child { color: var(--ls-bg); background: var(--ls-petrol); padding-left: 14px; border-radius: 6px 6px 0 0; }
.vergleich-karte .vergleich td:last-child { background: rgba(10, 74, 90, .05); padding-left: 14px; color: var(--hell-ink); font-weight: 500; }
@media (max-width: 760px) { .vergleich-karte .vergleich td:last-child { background: none; padding-left: 0; } }
.vergleich-rahmen { margin-top: 18px; }
.vergleich { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ls-linie); }
.vergleich thead th { font-weight: 600; font-size: 13px; color: var(--hell-muted); border-bottom-color: currentColor; }
.vergleich tbody th { font-weight: 600; width: 22%; }
.vergleich td { color: var(--hell-muted); width: 39%; }
.vergleich td:last-child { color: inherit; }
.vergleich .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; width: auto; }
  .vergleich tr { border-bottom: 1px solid var(--ls-linie); padding: 12px 0; }
  .vergleich th, .vergleich td { border: 0; padding: 2px 0; }
  .vergleich td::before { content: attr(data-k) ": "; font-weight: 600; color: var(--hell-muted); }
}

/* Startseite „Eine Frage. Tausend Antworten.“ mobil: Grafik zuerst, Fragen darunter (08.10.2026, Rückmeldung Marius; Desktop unverändert) */
@media (max-width: 900px) {
  #fragen .zwei { row-gap: 0; }
  #fragen .zwei > div:first-child { display: contents; }
  #fragen .eyebrow { order: 1; } #fragen h2 { order: 2; } #fragen .lead { order: 3; }
  #fragen .raster-wrap { order: 4; position: static; margin-top: 32px; padding: 20px 0 0; border-top: 2px solid var(--ls-amtlich); }
  #fragen .raster-frage { font-size: 17px; margin-bottom: 14px; min-height: 0; }
  #fragen .fragen-hinweis { order: 5; margin-top: 36px; }
  #fragen .fragen { order: 6; gap: 0; margin-top: 8px; }
  #fragen .frage { padding: 14px 0 14px 30px; }
  #fragen .frage::before { top: 17px; }
  #fragen .frage .q { font-size: 16px; line-height: 1.4; }
  #fragen .frage .a { display: none; }
  #fragen .zwei > div:first-child > p:last-child { order: 7; margin-top: 24px !important; }
}
/* Kontrast Chips auf Ocker-Tint: Oxid minimal dunkler, damit 4,5:1 erreicht wird (08.10.2026, Entscheidung Marius) */
.chip, .autor .initialen, .kasten-methode, .einsatz-karte.erhebung { --ls-oxid: #B24921; } /* 4,55:1 statt 4,49:1 auf #F6E9DC */

/* Lightbox Anmelden / Registrieren (27.10.2026): gleiche Hülle wie das Erstgespräch */
.zugang { width: min(520px, calc(100vw - 32px)); }
.zugang .zg-zeichen { color: var(--hell-ink); margin: 0 0 22px; }
.zugang .zg-zeichen svg { display: block; height: 40px; width: auto; overflow: visible; }
.zugang .zg-zeichen .wm, .zugang .zg-zeichen .kz { opacity: 1; }
.zugang .zg-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 40px 24px 0; background: var(--ls-flaeche); border-radius: var(--ls-radius-control); }
.zugang .zg-reiter button { font: inherit; font-size: 15px; font-weight: 500; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--hell-muted); cursor: pointer; }
.zugang .zg-reiter button[aria-selected="true"] { background: var(--ls-bg); color: var(--hell-ink); box-shadow: 0 1px 3px rgba(10, 74, 90, .12); }
.zugang .zg-reiter button:focus-visible, .zugang .zg-weg:focus-visible, .zugang .zg-gruppe input:focus-visible + span { outline: 2px solid var(--ls-amtlich); outline-offset: 2px; }
.zugang .zg-wege { display: grid; gap: 12px; }
.zugang .zg-weg { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 16px; padding: 12px 20px; border: 1px solid var(--ls-rahmen); border-radius: 8px; background: var(--ls-bg); color: var(--hell-ink); text-decoration: none; transition: background 200ms var(--kurve); }
.zugang .zg-weg:hover { background: var(--ls-flaeche); }
.zugang .zg-g { width: 18px; height: 18px; flex: none; }
.zugang .zg-voll { justify-content: center; width: 100%; text-align: center; }
.zugang .zg-oder { display: flex; align-items: center; gap: 12px; margin: 2px 0; font-size: 13px; color: var(--hell-faint); }
.zugang .zg-oder::before, .zugang .zg-oder::after { content: ""; flex: 1; height: 1px; background: var(--ls-linie); }
.zugang .zg-hinweis { margin: 18px 0 0; color: var(--hell-muted); }
.zugang .zg-hinweis a { color: var(--ls-amtlich); }
.zugang .zg-gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zugang .zg-gruppe { position: relative; display: block; cursor: pointer; }
.zugang .zg-gruppe input { position: absolute; opacity: 0; }
.zugang .zg-gruppe span { display: block; padding: 11px 14px; border: 1px solid var(--ls-linie); border-radius: 8px; font-size: 15px; color: var(--hell-ink); transition: border-color 200ms var(--kurve), background 200ms var(--kurve); }
.zugang .zg-gruppe:hover span { border-color: var(--ls-rahmen); }
.zugang .zg-gruppe input:checked + span { border-color: var(--ls-petrol); background: var(--ls-flaeche); box-shadow: inset 0 0 0 1px var(--ls-petrol); }
.zugang .zg-folge { margin-top: 20px; }
.zugang .zg-folge > p { color: var(--hell-muted); margin: 0 0 16px; }
.zugang .zg-folge:empty { display: none; }
@media (max-width: 560px) { .zugang { width: calc(100vw - 16px); } .zugang .zg-gruppen { grid-template-columns: 1fr; } }