/* Nelten Website-Scan: Gestaltung nach docs/design/scan-neu.html (01.11.2026). Kein Framework, keine Drittanfragen, hell und dunkel, ab 320 px. */
:root {
  color-scheme: light dark;
  --bg: #fbfbfc; --bg-2: #f3f5f9; --surface: #ffffff; --surface-2: #f6f7fb;
  --text: #0b1020; --text-2: #3b4254; --muted: #5f687c;
  --line: #e6e8ef; --line-2: #d4d8e3;
  --brand: #087653; --brand-2: #087653; --brand-soft: #dff7ef; --on-brand: #ffffff;
  --accent: #2ee6a6;
  --schwer: #c81e1e; --mittel: #b8400a; --leicht: #087653; --hinweis: #5f687c; --ok: #126b36; --historisch: #6b5b95;
  --schwer-bg: #fdecec; --mittel-bg: #fff1e7; --leicht-bg: #dff7ef; --hinweis-bg: #eef0f5; --ok-bg: #e6f6ec; --historisch-bg: #efeaf8;
  --radius-xl: 28px; --radius-l: 20px; --radius-m: 14px; --radius-s: 10px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(11 16 32 / 5%), 0 2px 12px rgb(11 16 32 / 6%);
  --shadow-2: 0 2px 6px rgb(11 16 32 / 6%), 0 24px 60px -20px rgb(11 16 32 / 25%);
  --font: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "JetBrains Mono", monospace;
  --ease: cubic-bezier(.2,.7,.2,1); --t: 180ms;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 72px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0d16; --bg-2: #0f1320; --surface: #121728; --surface-2: #171d31;
    --text: #f2f4f9; --text-2: #c3c9d8; --muted: #98a1b5;
    --line: #222a40; --line-2: #2f3853;
    --brand: #2ee6a6; --brand-2: #56efb7; --brand-soft: #12392f; --on-brand: #0b1020;
    --accent: #2ee6a6;
    --schwer: #ff8a80; --mittel: #ffb074; --leicht: #9ab3ff; --hinweis: #a3abbe; --ok: #6ee7a0; --historisch: #c3b1ff;
    --schwer-bg: #3a1618; --mittel-bg: #3a2415; --leicht-bg: #182452; --hinweis-bg: #1d2338; --ok-bg: #13302a; --historisch-bg: #261f3d;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 12px rgb(0 0 0 / 35%);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 40%), 0 24px 60px -20px rgb(0 0 0 / 70%);
  }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-padding-top: 92px; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); font-weight: 760; }
h1 small { display: block; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: .5rem; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 740; }
h2.kleiner, h3 { font-size: 1.2rem; font-weight: 680; letter-spacing: -0.012em; line-height: 1.3; }
h3 small, h2 small { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.oben { margin-top: 0; }
p, ul, ol, dl { margin: 0 0 var(--space-3); }
ul, ol { padding-left: 1.25rem; }
a { color: var(--brand); text-underline-offset: 0.18em; }
:is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; max-width: 100%; }
code { font-family: var(--mono); font-size: 0.9em; }
strong { font-weight: 700; }
html body [hidden] { display: none; }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--text-2); line-height: 1.55; max-width: 44em; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; border-radius: 2px; }
.shell { width: min(100% - 2rem, 76rem); margin-inline: auto; min-width: 0; }
.skip { position: fixed; top: -200px; left: 1rem; padding: 1rem; background: var(--surface); color: var(--brand); z-index: 50; border-radius: var(--radius-s); box-shadow: var(--shadow-1); }
.skip:focus { top: 1rem; }
.grad-text { background: linear-gradient(92deg, var(--brand) 0%, var(--accent) 55%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; min-width: 44px; padding: .7rem 1.35rem; border-radius: var(--radius-pill); font: inherit; font-weight: 640; text-decoration: none; border: 1px solid transparent; cursor: pointer; background: var(--text); color: var(--bg); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgb(11 16 32 / 45%); }
.button.brand { background: var(--brand); color: var(--on-brand); }
.button.brand:hover { background: var(--brand-2); }
.button.sekundaer { background: transparent; color: var(--text); border-color: var(--line-2); }
.button.sekundaer:hover { background: var(--surface-2); box-shadow: none; }
.button.klein { min-height: 40px; padding: .4rem .9rem; font-size: .9rem; }
.button.gross { width: 100%; min-height: 52px; font-size: 1.05rem; }
.button[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.button svg { width: 18px; height: 18px; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aktionen form { margin: 0; }
form.inline { display: inline; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.kopf .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.marke { display: inline-flex; align-items: center; gap: .6rem; font-weight: 720; letter-spacing: -0.02em; color: var(--text); text-decoration: none; font-size: 1.05rem; white-space: nowrap; min-height: 44px; }
.marke svg { width: 30px; height: 30px; flex: none; }
.kopf nav > ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.kopf nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; color: var(--text-2); text-decoration: none; font-weight: 520; font-size: .95rem; border-radius: var(--radius-pill); }
.kopf nav a:hover { background: var(--surface-2); color: var(--text); }
.kopf nav a.hervor { background: var(--text); color: var(--bg); font-weight: 640; margin-left: .5rem; padding: 0 1.1rem; min-height: 40px; white-space: nowrap; }
.kopf nav a.hervor:hover { background: var(--brand); color: var(--on-brand); }
@media (max-width: 52rem) { .kopf nav > ul > li:not(.immer) { display: none; } }
@media (max-width: 30rem) { .marke { font-size: .95rem; } .marke svg { width: 26px; height: 26px; } .kopf nav a.hervor { padding-inline: .9rem; font-size: .9rem; } }
@media (max-width: 22rem) { .marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kopf .shell { gap: .5rem; } }

/* ---------- Hauptbereich und Seiten mit Karten ---------- */
main > .shell { padding-block: var(--space-5) var(--space-7); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0 0 var(--space-3); font-size: .9rem; color: var(--muted); }
.brotkrumen li + li::before { content: "/"; margin-right: .35rem; color: var(--line-2); }
.brotkrumen a { color: var(--muted); text-decoration: none; }
.brotkrumen a:hover { color: var(--text); text-decoration: underline; }
.karte { background: var(--surface); border-radius: var(--radius-l); padding: clamp(1.25rem, 1rem + 1vw, 2rem); margin-bottom: var(--space-4); }
.karte > :last-child { margin-bottom: 0; }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.karten .karte { margin: 0; }
.zahl-klein { font-size: 2rem; font-weight: 760; letter-spacing: -0.04em; line-height: 1; margin: 0 0 .5rem; }
.hinweiszeile { color: var(--muted); font-size: .9rem; max-width: 64rem; }
.stapel { overflow-x: auto; }
.status-ok { color: var(--ok); font-weight: 650; }
.status-aus { color: var(--schwer); }

/* Formulare */
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
legend { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: var(--space-3); padding: 0; }
.feld { display: grid; gap: .4rem; margin-bottom: .9rem; }
.feld label { font-size: .875rem; font-weight: 600; color: var(--text-2); }
.feld input:not([type=checkbox]), .feld select { width: 100%; min-height: 50px; padding: 0 1rem; border-radius: var(--radius-m); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; font-size: 1rem; transition: border-color var(--t), box-shadow var(--t); }
.feld input:focus, .feld select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.feld input[aria-invalid=true] { border-color: var(--schwer); }
.feld.kontrolle { grid-template-columns: 24px 1fr; gap: .7rem; align-items: start; font-size: .9rem; color: var(--text-2); }
.feld.kontrolle input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand); }
.feld.kontrolle label { font-weight: 500; font-size: .9rem; }
.feld.kontrolle .feldfehler { grid-column: 2; }
.feldfehler { color: var(--schwer); font-size: .875rem; margin: 0; }
.formzeile { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.nachsatz { font-size: .825rem; margin: .75rem 0 0; }
.fehlerliste, .erfolg { border-radius: var(--radius-m); padding: 1rem 1.25rem; margin-bottom: var(--space-4); border: 1px solid; }
.fehlerliste { background: var(--schwer-bg); border-color: color-mix(in srgb, var(--schwer) 35%, transparent); color: var(--text); }
.fehlerliste h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.fehlerliste ul { margin: 0; }
.fehlerliste a { color: var(--schwer); }
.erfolg { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.erfolg p, .fehlerliste p:last-child { margin: 0; }

/* Tabellen */
.tabelle-wrap, .stapel { overflow-x: auto; border-radius: var(--radius-l); background: var(--surface); margin-bottom: var(--space-4); }
table.tabelle { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tabelle caption { text-align: left; padding: .9rem 1rem .25rem; color: var(--muted); font-size: .85rem; caption-side: top; }
.tabelle th, .tabelle td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabelle thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 650; background: var(--surface-2); white-space: nowrap; }
.tabelle tbody th { font-weight: 560; }
.tabelle tbody tr:last-child :is(th, td) { border-bottom: 0; }
.tabelle td.wir { background: color-mix(in srgb, var(--brand) 6%, transparent); font-weight: 600; }
.tabelle thead th.wir { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tabelle .ja { color: var(--ok); font-weight: 650; } .tabelle .nein { color: var(--muted); font-weight: 450; }
.tabelle td.wir.nein { font-weight: 450; }
.tabelle.vergleich { min-width: 56rem; }

/* Schwere-Marken */
.marke-schwer, .marke-mittel, .marke-leicht, .marke-Hinweis, .marke-historisch, .tag { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.marke-schwer { background: var(--schwer-bg); color: var(--schwer); }
.marke-mittel { background: var(--mittel-bg); color: var(--mittel); }
.marke-leicht { background: var(--leicht-bg); color: var(--leicht); }
.marke-Hinweis { background: var(--hinweis-bg); color: var(--hinweis); }
.marke-historisch { background: var(--historisch-bg); color: var(--historisch); }

/* Kacheln (Zähler) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; margin-bottom: var(--space-4); }
.kachel { border-radius: var(--radius-m); padding: .9rem 1rem; display: grid; gap: .1rem; background: var(--hinweis-bg); color: var(--hinweis); }
.kachel .zahl { font-size: 1.8rem; font-weight: 760; letter-spacing: -0.04em; line-height: 1; }
.kachel span:last-child { font-size: .75rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.kachel.schwer { background: var(--schwer-bg); color: var(--schwer); }
.kachel.mittel { background: var(--mittel-bg); color: var(--mittel); }
.kachel.leicht { background: var(--leicht-bg); color: var(--leicht); }
.kachel.ok { background: var(--ok-bg); color: var(--ok); }
.kachel.historisch { background: var(--historisch-bg); color: var(--historisch); }
a.kachel { text-decoration: none; }
a.kachel:hover { box-shadow: var(--shadow-1); }

/* ---------- Startseite ---------- */
.abschnitt { padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.abschnitt.getoent { background: var(--bg-2); }
.abschnitt-kopf { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.abschnitt-kopf h2 { margin-bottom: 1rem; }
.abschnitt-kopf p:last-child { margin-bottom: 0; }
.zweispaltig { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: start; }
.zweispaltig .karte { margin: 0; }
@media (max-width: 54rem) { .zweispaltig { grid-template-columns: 1fr; } }

.held { position: relative; overflow: clip; padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.held::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; filter: blur(10px);
  background: radial-gradient(42rem 26rem at 18% 10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%), radial-gradient(38rem 24rem at 82% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(30rem 20rem at 60% 80%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.held::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 100%); }
.held .shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.held h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.6rem); margin-bottom: 1.4rem; }
.held .lead { margin-bottom: 1.75rem; }
.held-pille { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem .35rem .45rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: .85rem; font-weight: 560; color: var(--text-2); box-shadow: var(--shadow-1); margin-bottom: 1.5rem; }
.held-pille b { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--ok-bg); color: var(--ok); font-weight: 680; font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
.scan-karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.25rem; box-shadow: var(--shadow-1); max-width: 40rem; margin: 0; }
.scan-karte legend { font-size: 1.15rem; }
.punkte { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; color: var(--text-2); font-size: .95rem; font-weight: 520; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.punkte li { display: inline-flex; align-items: center; gap: .45rem; }
.punkte li::before { content: ""; width: 7px; height: 12px; flex: none; margin: 0 .35rem .2rem .3rem; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mock { position: relative; }
.mock-glanz { position: absolute; inset: 8% 0 -8%; z-index: -1; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 35%, transparent), color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); filter: blur(42px); opacity: .7; border-radius: 40px; }
.fenster { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-2); overflow: hidden; }
.fenster-kopf { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .8rem; color: var(--muted); }
.fenster-kopf i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.fenster-kopf .url { margin-left: .5rem; padding: .25rem .7rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); color: var(--text-2); }
.fenster-inhalt { padding: 1.1rem; display: grid; gap: 1rem; }
.fenster-inhalt .kacheln { margin: 0; grid-template-columns: repeat(4, 1fr); }
.fenster-inhalt .kachel { padding: .6rem .7rem; }
.fenster-inhalt .kachel .zahl { font-size: 1.35rem; }
.fenster .fund { margin: 0; padding: .9rem; font-size: .875rem; }
.fenster .fund .fund-titel { font-size: .95rem; font-weight: 680; margin: 0 0 .5rem; color: var(--text); }
.fenster .fund p { font-size: .875rem; }
.mock figcaption { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 1rem; }
.wertung { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.wertung .wertung-titel { font-size: 1.05rem; font-weight: 680; letter-spacing: -0.012em; margin: 0 0 .25rem; color: var(--text); }
.wertung p { margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 60rem) { .held .shell { grid-template-columns: 1fr; } .mock { max-width: 34rem; margin-inline: auto; } }
@media (max-width: 30rem) { .formzeile { grid-template-columns: 1fr; } .fenster-inhalt .kacheln { grid-template-columns: 1fr 1fr; } }

.statistik { border-block: 1px solid var(--line); background: var(--surface); }
.statistik .shell { display: grid; grid-template-columns: repeat(4, 1fr); }
.statistik > .shell > div { padding: 1.6rem 1rem; display: grid; gap: .2rem; border-left: 1px solid var(--line); }
.statistik > .shell > div:first-child { border-left: 0; padding-left: 0; }
.statistik strong { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 760; letter-spacing: -0.035em; line-height: 1; }
.statistik span { color: var(--muted); font-size: .9rem; }
@media (max-width: 48rem) { .statistik .shell { grid-template-columns: 1fr 1fr; } .statistik > .shell > div:nth-child(3) { border-left: 0; padding-left: 0; } .statistik > .shell > div { padding: 1.2rem .8rem; } }

.stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.stufen .karte { margin: 0; }

.stufen ul { color: var(--text-2); font-size: .95rem; margin: 0; }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.schritte li { position: relative; padding: 1.75rem; border-radius: var(--radius-l); background: var(--surface); }
.schritte li::before { content: ""; display: block; width: 3rem; height: 4px; background: #2ee6a6; margin-bottom: 1.2rem; }
.schritte h3 { margin-bottom: .5rem; }
.schritte p { margin: 0; color: var(--text-2); font-size: .97rem; }
@media (max-width: 54rem) { .schritte, .stufen { grid-template-columns: 1fr; } }

.bereiche { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: var(--space-4); }
.bereiche .karte { margin: 0; display: grid; gap: .9rem; align-content: start; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.bereiche .karte:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.icon svg { width: 24px; height: 24px; }
.karte-kopf .zahl-klein { text-align: right; margin: 0; }
.karte-kopf .zahl-klein small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.bereiche ul { display: grid; gap: .45rem; color: var(--text-2); font-size: .95rem; margin: 0; padding: 0; list-style: none; }
.bereiche li { padding-left: 1.3rem; position: relative; }
.bereiche li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); opacity: .55; }
.bereiche .t2 .icon, .bereiche .t3 .icon, .bereiche .t4 .icon { background: #0b1020; color: #2ee6a6; } .bereiche .t2 li::before, .bereiche .t3 li::before, .bereiche .t4 li::before { background: #2ee6a6; }
@media (max-width: 54rem) { .bereiche { grid-template-columns: 1fr; } }

.band { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem); color: #fff; background: #0b1020; isolation: isolate; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 24rem at 15% 0%, rgb(46 230 166 / 24%), transparent 70%), radial-gradient(34rem 22rem at 90% 100%, rgb(109 77 232 / 55%), transparent 70%), radial-gradient(26rem 18rem at 70% 10%, rgb(15 163 138 / 45%), transparent 70%); }
.band-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.band h2 { color: #fff; }
.band .eyebrow { color: #9ab3ff; }
.band p { color: rgb(255 255 255 / 82%); font-size: 1.05rem; }
.band p:last-child { margin: 0; }
.band a:not(.button) { color: #fff; }
.band .button { background: #fff; color: #0b1020; }
.band .button.sekundaer { background: transparent; color: #fff; border-color: rgb(255 255 255 / 35%); }
.band .button.sekundaer:hover { background: rgb(255 255 255 / 10%); }
.band .aktionen { justify-content: flex-end; gap: .75rem; }
.preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-bottom: var(--space-4); }
.preis .betrag { font-size: 2.2rem; font-weight: 760; letter-spacing: -0.04em; line-height: 1; margin: .5rem 0 .25rem; }
.preis .betrag small { font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.preis ul { color: var(--text-2); font-size: .95rem; }
@media (max-width: 54rem) { .band-grid { grid-template-columns: 1fr; } .band .aktionen { justify-content: flex-start; } }

.fragen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; }
.fragen details, details.frage { background: var(--surface); border-radius: var(--radius-m); padding: 0 1.25rem; align-self: start; }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 60px; padding-block: 1rem; font-weight: 620; letter-spacing: -0.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(var(--text), var(--text)) center/10px 1.5px no-repeat, linear-gradient(var(--text), var(--text)) center/1.5px 10px no-repeat; transition: transform var(--t) var(--ease); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { color: var(--text-2); padding-bottom: 1.2rem; margin: 0; }
@media (max-width: 54rem) { .fragen { grid-template-columns: 1fr; } }
.kontakt-mail { font-size: 1.2rem; font-weight: 640; letter-spacing: -0.01em; }

/* ---------- Fuß ---------- */
.fuss { background: #0b1020; color: rgb(255 255 255 / 72%); padding-block: 3.5rem 2.5rem; }
@media (prefers-color-scheme: dark) { .fuss { background: #06080f; border-top: 1px solid var(--line); } }
.fuss a { color: #fff; }
.fuss-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.fuss .marke { color: #fff; margin-bottom: .9rem; }
.fuss h2 { color: #fff; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .9rem; font-weight: 700; }
.fuss ul { display: grid; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.fuss ul a { text-decoration: none; color: rgb(255 255 255 / 78%); display: inline-flex; min-height: 32px; align-items: center; }
.fuss ul a:hover { color: #fff; text-decoration: underline; }
.fuss p { font-size: .95rem; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: .85rem; }
@media (max-width: 54rem) { .fuss-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .fuss-grid { grid-template-columns: 1fr; } }

/* ---------- Bericht ---------- */
.bericht-kopf { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: end; margin-bottom: var(--space-4); }
.bericht-kopf .aktionen { justify-content: flex-end; }
.bericht-meta { color: var(--muted); font-size: .95rem; margin: 0; padding: 0; list-style: none; line-height: 1.7; }
.bericht-meta li { display: inline; margin-right: 1.1rem; }
.bericht-meta b { color: var(--text); font-weight: 650; }
@media (max-width: 54rem) { .bericht-kopf { grid-template-columns: 1fr; align-items: start; } .bericht-kopf .aktionen { justify-content: flex-start; } }

.bericht-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.bericht-inhalt { min-width: 0; }
.seitenleiste { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; font-size: .9rem; }
.seitenleiste h2 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-bottom: .6rem; }
.seitenleiste ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .15rem; }
.seitenleiste a { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .45rem .7rem; min-height: 40px; border-radius: var(--radius-s); color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; }
.seitenleiste a:hover { background: var(--surface-2); color: var(--text); }
.seitenleiste a.aktiv { color: var(--brand); border-left-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.seitenleiste .n { font-size: .75rem; font-weight: 650; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-pill); padding: .1rem .5rem; min-width: 1.6rem; text-align: center; }
@media (max-width: 64rem) { .bericht-layout { grid-template-columns: minmax(0, 1fr); } .seitenleiste { position: static; max-height: none; } .seitenleiste ol { display: flex; flex-wrap: wrap; gap: .4rem; } .seitenleiste a { border: 1px solid var(--line); border-radius: var(--radius-pill); min-height: 40px; } .seitenleiste a.aktiv { border-color: var(--brand); } }

/* Übersicht: Note, Donut, Bereichsbalken */
.uebersicht { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.25rem; margin-bottom: var(--space-4); }
.uebersicht .karte { margin: 0; }
@media (max-width: 60rem) { .uebersicht { grid-template-columns: 1fr; } }
.note { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin-bottom: var(--space-4); }
.note-ring { width: 128px; height: 128px; position: relative; display: grid; place-items: center; }
.note-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.note-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.note-ring .spur { stroke: var(--line); }
.note-ring .wert { stroke: var(--note-farbe, var(--brand)); transition: stroke-dashoffset 900ms var(--ease); }
.note-wert { font-size: 2.6rem; font-weight: 780; letter-spacing: -0.05em; line-height: 1; color: var(--note-farbe, var(--text)); position: relative; }
.note-wert small { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 650; margin-top: .25rem; text-align: center; }
.note-text strong { display: block; font-size: 1.25rem; letter-spacing: -0.015em; margin-bottom: .25rem; }
.note-text p { margin: 0 0 .35rem; color: var(--text-2); }
.note.ok { --note-farbe: var(--ok); } .note.leicht { --note-farbe: var(--leicht); } .note.mittel { --note-farbe: var(--mittel); } .note.schwer { --note-farbe: var(--schwer); }
.quote { display: grid; gap: .35rem; margin-top: .75rem; }
svg.quote-balken { width: 100%; height: 10px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; display: block; }
svg.quote-balken rect.b-ok { fill: var(--ok); }
.quote span { font-size: .85rem; color: var(--muted); }
.note.klein { margin: 0; }
.note.klein .note-ring { width: 92px; height: 92px; }
.note.klein .note-wert { font-size: 2rem; }

.donut-karte { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.donut { width: 150px; height: 150px; }
.donut circle { fill: none; stroke-width: 22; }
.donut .spur { stroke: var(--line); }
.donut text { font: 700 1.8rem var(--font); letter-spacing: -0.04em; fill: var(--text); }
.donut text.sub { font: 600 .7rem var(--font); letter-spacing: .06em; fill: var(--muted); }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.legende li { display: grid; grid-template-columns: 12px 1fr auto; gap: .6rem; align-items: center; font-size: .95rem; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.legende b { font-variant-numeric: tabular-nums; }
.legende a { color: inherit; text-decoration: none; }
.legende a:hover { text-decoration: underline; }
.f-schwer { background: var(--schwer); color: var(--schwer); } .f-mittel { background: var(--mittel); color: var(--mittel); } .f-leicht { background: var(--leicht); color: var(--leicht); } .f-Hinweis { background: var(--hinweis); color: var(--hinweis); } .f-historisch { background: var(--historisch); color: var(--historisch); } .f-ok { background: var(--ok); color: var(--ok); }
.donut .s-schwer { stroke: var(--schwer); } .donut .s-mittel { stroke: var(--mittel); } .donut .s-leicht { stroke: var(--leicht); } .donut .s-Hinweis { stroke: var(--hinweis); } .donut .s-historisch { stroke: var(--historisch); } .donut .s-ok { stroke: var(--ok); }
@media (max-width: 30rem) { .donut-karte, .note { grid-template-columns: 1fr; justify-items: center; text-align: center; } .note-text strong { text-align: center; } }

.balken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.balken-liste li { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr auto; gap: .75rem; align-items: center; font-size: .95rem; }
.balken-liste a { color: var(--text); text-decoration: none; font-weight: 560; }
.balken-liste a:hover { color: var(--brand); text-decoration: underline; }
svg.balken { width: 100%; height: 14px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; display: block; }
.balken .b-schwer { fill: var(--schwer); } .balken .b-mittel { fill: var(--mittel); } .balken .b-leicht { fill: var(--leicht); } .balken .b-Hinweis { fill: var(--hinweis); } .balken .b-ok { fill: var(--ok); opacity: .55; }
.balken .b-alt { fill: var(--line-2); } .balken .b-neu { fill: var(--brand); }
.balken-liste b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: .85rem; white-space: nowrap; }
@media (max-width: 30rem) { .balken-liste li { grid-template-columns: 1fr auto; } .balken-liste .balken { grid-column: 1 / -1; } }

/* Bereichskacheln */
.bereich-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .9rem; margin-bottom: var(--space-4); }
.bereich-kachel { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: var(--radius-m); background: var(--surface); color: var(--text); text-decoration: none; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.bereich-kachel:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.bereich-kachel .titel { font-weight: 650; font-size: .95rem; letter-spacing: -0.01em; }
.bereich-kachel .zahl { font-size: 1.9rem; font-weight: 760; letter-spacing: -0.04em; line-height: 1; }
.bereich-kachel .zahl small { font-size: .8rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: .25rem; }
.bereich-kachel .mini { display: flex; flex-wrap: wrap; gap: .35rem; }
.bereich-kachel .mini span { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: var(--radius-pill); }
.bereich-kachel.ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.bereich-kachel.ok .zahl { color: var(--ok); }

/* Vergleich Vorher/Nachher */
.vergleich-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: var(--space-3); }
.vergleich-grid .kachel { margin: 0; padding: 1rem 1.1rem; }
.vergleich-grid .kachel .zahl { font-size: 2rem; }
.balken-paar { display: grid; gap: .6rem; }
.balken-paar li { display: grid; grid-template-columns: 7rem 1fr 3rem; gap: .6rem; align-items: center; font-size: .9rem; }
.balken-paar .balken { height: 10px; }
.balken-paar b { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); font-weight: 600; }
.vergleich-zahlen { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vergleich-zahlen li { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; align-items: center; font-size: .9rem; }
.vergleich-zahlen .paar { display: grid; gap: .25rem; }
.vergleich-zahlen .paar div { display: grid; grid-template-columns: 3.2rem 1fr 2.4rem; gap: .5rem; align-items: center; font-size: .78rem; color: var(--muted); }
.vergleich-zahlen .paar b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.vergleich-zahlen .balken { height: 8px; }
@media (max-width: 40rem) { .vergleich-grid { grid-template-columns: 1fr; } }

/* Filterleiste */
.filter { position: sticky; top: 68px; z-index: 10; display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; padding: .75rem 1rem; margin-bottom: var(--space-4); border-radius: var(--radius-m); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.filter[hidden] { display: none; }
.filter .gruppe { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.filter label.titel { font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: .25rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .25rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.chip[aria-pressed=true] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip.schwer[aria-pressed=true] { background: var(--schwer); border-color: var(--schwer); color: var(--on-brand); }
.chip.mittel[aria-pressed=true] { background: var(--mittel); border-color: var(--mittel); color: var(--on-brand); }
.chip.leicht[aria-pressed=true] { background: var(--leicht); border-color: var(--leicht); color: var(--on-brand); }
.chip.Hinweis[aria-pressed=true] { background: var(--hinweis); border-color: var(--hinweis); color: var(--on-brand); }
.chip .n { font-size: .75rem; opacity: .8; }
.filter select, .filter input[type=search] { min-height: 36px; padding: 0 .75rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; max-width: 16rem; }
.filter .treffer { margin-left: auto; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .filter { position: static; } .filter .treffer { margin-left: 0; width: 100%; } }

/* Bereichsabschnitte mit Fundtabellen */
.bereich { margin-bottom: var(--space-6); scroll-margin-top: 140px; }
.bereich-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1rem; }
.bereich-kopf h2 { margin: 0; }
.bereich-kopf .zusammen { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.bereich-kopf .zusammen span { font-size: .78rem; }
.bereich-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1rem; font-size: .9rem; }
.bereich-nav a { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .4rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line); text-decoration: none; color: var(--text-2); background: var(--surface); }
.bereich-nav a:hover { color: var(--text); border-color: var(--line-2); }
.bereich .tabelle-wrap { margin-bottom: 0; }
table.funde { width: 100%; border-collapse: collapse; font-size: .92rem; }
.funde th, .funde td { padding: .75rem .9rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.funde thead th { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 650; background: var(--surface-2); white-space: nowrap; }
.funde thead th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; padding: .2rem .25rem; border-radius: 6px; }
.funde thead th button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.funde thead th button::after { content: "↕"; opacity: .4; font-size: .8rem; }
.funde thead th[aria-sort=ascending] button::after { content: "↑"; opacity: 1; }
.funde thead th[aria-sort=descending] button::after { content: "↓"; opacity: 1; }
.funde tbody tr.zeile:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.funde tbody th { font-weight: 600; letter-spacing: -0.01em; }
.funde tbody th code { display: block; font-size: .75rem; color: var(--muted); font-weight: 500; margin-top: .15rem; }
.funde .zahl-zelle { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.funde .aufklappen { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 44px; min-height: 40px; padding: 0 .75rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.funde .aufklappen:hover { background: var(--surface-2); color: var(--text); }
.funde .aufklappen:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.funde .aufklappen::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.funde .aufklappen[aria-expanded=true]::before { content: "–"; }
.funde tr.detail td { background: var(--surface-2); padding: 1.1rem 1.25rem 1.25rem; }
.funde tr.detail[hidden] { display: none; }
.funde tr.verborgen { display: none; }
.fund-detail { display: grid; gap: .9rem; max-width: 70rem; }
.fund-detail p { margin: 0; }
.fund-detail .problem { color: var(--text-2); }
.anweisung { background: var(--surface); border-radius: var(--radius-s); padding: .8rem 1rem; border-left: 3px solid var(--brand); margin: 0; }
.anweisung strong, .anweisung > span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); margin-bottom: .25rem; }
.adressen { font-size: .875rem; }
.adressen summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.adressen ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.adressen code { word-break: break-all; }
.fund-nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.fund-nav button, .fund-nav a { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .8rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); font-size: .85rem; font-weight: 600; color: var(--text-2); }
.fund-nav button:hover, .fund-nav a:hover { color: var(--text); background: var(--surface); }
.fund-nav button:focus-visible, .fund-nav a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.leer { padding: 1.25rem; color: var(--muted); text-align: center; }
@media (max-width: 48rem) {
  .funde thead { display: none; }
  .funde tbody tr.zeile { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; padding: .9rem; border-bottom: 1px solid var(--line); }
  .funde tbody tr.zeile :is(th, td) { padding: 0; border: 0; }
  .funde tbody tr.zeile th { grid-column: 1 / -1; }
  .funde tbody tr.zeile .zahl-zelle { text-align: left; font-size: .85rem; color: var(--muted); }
  .funde tbody tr.zeile .zahl-zelle::before { content: attr(data-label) ": "; }
  .funde tbody tr.zeile td:last-child { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .funde tr.detail td { padding: 1rem; }
}

/* Alte Fund-Darstellung (Verlaufsseite, Fenster-Mockup) */
.fund { background: var(--surface); border-radius: var(--radius-m); padding: 1.25rem; margin-bottom: var(--space-3); border-left-width: 4px; }
.fund.schwer { border-left-color: var(--schwer); } .fund.mittel { border-left-color: var(--mittel); } .fund.leicht { border-left-color: var(--leicht); } .fund.Hinweis { border-left-color: var(--hinweis); }
.fund h2, .fund h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.fund details { font-size: .9rem; }
.fund summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.inhaltsliste { columns: 2; column-gap: 2rem; font-size: .95rem; }
@media (max-width: 40rem) { .inhaltsliste { columns: 1; } }

/* Nach-oben */
.nach-oben { position: fixed; right: 1rem; bottom: 1rem; z-index: 15; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--text); color: var(--bg); border: 0; cursor: pointer; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity var(--t); }
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; }
.nach-oben svg { width: 20px; height: 20px; }

/* ---------- Druck ---------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f4f4f4; --text: #000; --text-2: #222; --muted: #555; --line: #ccc; --line-2: #999; }
  .kopf, .fuss, .filter, .nach-oben, .skip, .fund-nav, .bereich-nav, .aufklappen, .seitenleiste, .button, .hinweisfrei { display: none; }
  main > .shell { padding: 0; width: 100%; }
  .bericht-layout { display: block; }
  html body .funde tr.detail[hidden], html body .funde tr.verborgen { display: table-row; }
  .funde tr.detail td { background: #fff; padding: .25rem .9rem 1rem; }
  .bereich, .karte, tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .note-ring .wert { transition: none; }
  body { font-size: 10.5pt; }
  h1 { font-size: 22pt; } h2 { font-size: 15pt; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Runde F: dunkle Köpfe, schwebende Navigation und kräftige Akzentfarbe. */
:root {
  --bg: #f4f5f7;
  --bg-2: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --accent: #2ee6a6;
  --accent-ink: #0b1020;
  --ink-dark: #0b1020;
  --shadow-2: 0 40px 80px -30px rgb(0 0 0 / 60%);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0a0d16; --bg-2: #0f1320; --surface: #121728; --surface-2: #171d31; }
}
h1, h2, h3, h4 { letter-spacing: -.035em; }
h1 { font-size: clamp(2.3rem, 1.5rem + 4vw, 4.4rem); font-weight: 700; }
.kopf { position: sticky; top: 12px; width: min(calc(100% - 2rem), 76rem); margin: 12px auto -80px; border: 1px solid rgb(11 16 32 / 9%); border-radius: 999px; background: #fff; box-shadow: 0 12px 38px -20px rgb(0 0 0 / 45%); }
.kopf .shell { min-height: 64px; }
.kopf .marke, .kopf nav a:not(.hervor) { color: #0b1020; }
.kopf nav a.preise-knopf { background: #fff; color: #087653; box-shadow: inset 0 0 0 1.5px #087653; }
.kopf nav a.hervor, .kopf nav a.hervor:hover { background: var(--accent); color: var(--accent-ink); }
.kopf nav a.preise-knopf:hover { background: #e5f7f0; color: #0b1020; }
.kopf .menue summary { background: #fff; color: #0b1020; }
.held { isolation: isolate; color: #f4f5f7; background: #0b1020; padding-top: clamp(7rem, 9vw, 10rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.held::before { z-index: -1; inset: -15% -5% auto 30%; height: 95%; opacity: .75; filter: blur(55px); background: radial-gradient(ellipse at 70% 25%, rgb(46 230 166 / 24%), transparent 38%), radial-gradient(ellipse at 45% 60%, rgb(46 230 166 / 16%), transparent 42%); }
.held::after { z-index: -1; opacity: .12; background: radial-gradient(ellipse at 82% 10%, #087653, transparent 45%); }
.held h1 { max-width: 13ch; }
.held .lead { color: #d7dceb; }
.held .grad-text { background-image: linear-gradient(95deg, #2ee6a6, #2ee6a6 58%, #2ee6a6); }
.held-pille { background: rgb(255 255 255 / 9%); border-color: rgb(255 255 255 / 20%); color: #f4f5f7; box-shadow: none; }
.held-pille b { background: var(--accent); color: var(--accent-ink); }
.held .button.brand, .held .button.brand:hover, .kopf nav a.hervor, .kopf nav a.hervor:hover { background: var(--accent); color: var(--accent-ink); }
.scan-karte { background: #fff; color: #0b1020; border: 0; border-radius: 20px; box-shadow: 0 24px 60px -24px rgb(0 0 0 / 55%); }
.scan-karte .muted { color: #4d5669; }
.held .punkte { color: #eef1f8; }
.held .lauflicht li { background: rgb(255 255 255 / 9%); color: #e5eaf4; border-color: rgb(255 255 255 / 18%); }
.held .mock .fenster { box-shadow: 0 40px 80px -30px rgb(0 0 0 / 70%); }
.seitenkopf { position: relative; isolation: isolate; max-width: none; margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2.5rem, 4vw, 4rem); color: #f4f5f7; }
main:not(.mit-kopf) .seitenkopf { padding-inline: clamp(1.25rem, 3vw, 2.5rem); border-radius: 20px; overflow: hidden; }
main.mit-kopf { overflow-x: clip; background: linear-gradient(to bottom, #0b1020 0, #0b1020 var(--kopf-hoehe, 0px), transparent var(--kopf-hoehe, 0px)); }
main.mit-kopf .seitenkopf::before { inset: -40% -30vw auto; height: 180%; background: radial-gradient(ellipse at 78% 20%, rgb(46 230 166 / 16%), transparent 48%), radial-gradient(ellipse at 40% 100%, rgb(46 230 166 / 18%), transparent 45%); filter: blur(10px); pointer-events: none; }
.seitenkopf::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 78% 0%, rgb(46 230 166 / 16%), transparent 48%), radial-gradient(ellipse at 50% 105%, rgb(46 230 166 / 16%), transparent 45%); }
main:not(.mit-kopf) .seitenkopf::before { background-color: #0b1020; }
.seitenkopf h1 { max-width: 17ch; color: #fff; }
.seitenkopf .lead { color: #e0e5ef; max-width: 68ch; }
.seitenkopf .eyebrow, .abschnitt-kopf .eyebrow { padding: .35rem .8rem; border: 1px solid currentColor; border-radius: 999px; background: rgb(255 255 255 / 7%); }
.seitenkopf .eyebrow::before, .abschnitt-kopf .eyebrow::before { width: .45rem; height: .45rem; border-radius: 50%; }
.seitenkopf .brotkrumen ol { color: #d7dceb; }
.seitenkopf .brotkrumen a { color: #d7dceb; }
.seitenkopf .brotkrumen li + li::before { color: #8993aa; }
.grad-text { background-image: linear-gradient(95deg, #087653, #2ee6a6 55%, #2ee6a6); }
.seitenkopf .grad-text, .bericht-kopf .grad-text { background-image: linear-gradient(95deg, #2ee6a6, #2ee6a6 58%, #2ee6a6); }
.karte, .preis, .bereich-kachel, .band { border-radius: 20px; box-shadow: var(--shadow-2); border-color: transparent; }
.karte { background: var(--surface); }
.icon { width: 56px; height: 56px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #087653, #2ee6a6); box-shadow: 0 10px 24px -14px rgb(11 16 32 / 55%); }
.bereiche .t1 .icon { background: linear-gradient(145deg, #087653, #2ee6a6); }
.bereiche .t2 .icon, .bereiche .t3 .icon, .bereiche .t4 .icon { background: #0b1020; color: #2ee6a6; } .bereiche .t2 li::before, .bereiche .t3 li::before, .bereiche .t4 li::before { background: #2ee6a6; }
.preise { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.preis.hervorgehoben { background: #0b1020; color: #f4f5f7; border-color: #0b1020; box-shadow: 0 32px 64px -24px rgb(11 16 32 / 60%); }
.preis.hervorgehoben p, .preis.hervorgehoben ul, .preis.hervorgehoben .betrag small { color: #d7dceb; }
.preis.hervorgehoben .preis-marke { background: var(--accent); color: #0b1020; }
.preis.hervorgehoben .button.brand { background: var(--accent); color: #0b1020; }
.preis-marke { background: var(--accent); color: #0b1020; }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.schritte li { position: relative; padding: 1.75rem; border-radius: var(--radius-l); background: var(--surface); }
.schritte li > .icon { grid-column: 1; grid-row: 2; width: 56px; height: 56px; }
.schritte li h3, .schritte li p { grid-column: 1 / -1; }
.schritt-marke { justify-self: end; align-self: center; padding: .25rem .65rem; border-radius: 999px; background: #e6f6ec; color: #075b2c; font-size: .78rem; font-weight: 700; }
.tabelle-wrap, .stapel { border-radius: 18px; box-shadow: var(--shadow-1); }
.tabelle thead th { background: #0b1020; color: #f4f5f7; padding-block: 1rem; }
.tabelle tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 82%, var(--brand) 4%); }
.tabelle tbody th { font-weight: 700; }
.ja .zell-icon { width: 1.5rem; height: 1.5rem; border-radius: 7px; padding: .18rem; background: #d8f6e6; color: #075b2c; }
.bericht-kopf { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 var(--space-4); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: 20px; color: #f4f5f7; }
.bericht-kopf::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 20px; background: radial-gradient(ellipse at 80% 0%, rgb(46 230 166 / 16%), transparent 48%), radial-gradient(ellipse at 10% 100%, rgb(46 230 166 / 25%), transparent 40%), #0b1020; }
.bericht-kopf h1, .bericht-kopf .wie-h1 { color: #fff; }
.bericht-kopf .eyebrow, .bericht-kopf .bericht-meta, .bericht-kopf .bericht-meta .muted { color: #e0e5ef; }
.bericht-kopf .aktionen .button { background: #fff; color: #0b1020; }
.bericht-kopf .aktionen .button.brand, .bericht-kopf .aktionen .button:not(.sekundaer) { background: var(--accent); color: #0b1020; }
.bereich { position: relative; overflow: hidden; padding: 1.5rem; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-2); }



.bereich-kachel[href] { position: relative; padding-right: 3.5rem; }
.bereich-kachel[href]::after { content: "↗"; position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); color: var(--brand); font-size: 1.1rem; font-weight: 750; }
.donut-karte .legende li, .legende.waagerecht li { padding: .3rem .7rem; border-radius: 999px; background: var(--surface-2); }
.balken-liste li > b { padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
@media (max-width: 54rem) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .kopf { width: calc(100% - 1rem); top: 8px; margin-top: 8px; } .kopf .shell { gap: .35rem; padding-inline: .65rem; } .kopf nav a.hervor { margin-left: 0; padding-inline: .75rem; } .seitenkopf { padding-top: 2rem; } .bericht-kopf { padding-top: 7rem; } .schritte { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .held::before, .held::after { transform: none !important; } }

/* ---------- Unterseiten (01.11.2026): Navigation, Seitenkopf, Vorteile, Pakete, Buchung ---------- */
.kopf nav { display: flex; align-items: center; gap: .25rem; }
.kopf nav a.preise-knopf { background: var(--brand-soft); color: var(--brand); font-weight: 650; margin-left: .35rem; padding: 0 1rem; min-height: 40px; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.kopf nav a.preise-knopf:hover, .kopf nav a.preise-knopf[aria-current] { background: var(--brand); color: var(--on-brand); }
.kopf nav a[aria-current="page"]:not(.preise-knopf) { color: var(--text); font-weight: 640; }
.menue { display: none; position: relative; }
.menue summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border-radius: var(--radius-pill); border: 1px solid var(--line-2); }
.menue summary::-webkit-details-marker { display: none; }
.menue summary span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t); }
.menue[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue[open] summary span:nth-child(2) { opacity: 0; }
.menue[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menue ul { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 14rem; display: grid; gap: .15rem; padding: .5rem; margin: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); z-index: 30; }
.menue ul a { display: flex; min-height: 44px; align-items: center; padding: 0 .9rem; border-radius: var(--radius-s); color: var(--text); text-decoration: none; font-weight: 520; }
.menue ul a:hover { background: var(--surface-2); }
@media (max-width: 52rem) { .menue { display: block; } .kopf nav li.immer a.preise-knopf { display: none; } }

.seitenkopf > * { max-width: 52rem; }
.seitenkopf h1 { margin-bottom: 1rem; }
.seitenkopf .lead { margin: 0; }
.vorteile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: var(--space-5); }
.vorteile-grid.drei { grid-template-columns: repeat(3, 1fr); }
.vorteile-grid .karte { margin: 0; }
.vorteil { display: grid; gap: .6rem; align-content: start; }
.vorteil .icon { margin-bottom: .25rem; }
.vorteil h3, .vorteil h2.kleiner { margin: 0; }
.vorteil p { margin: 0; color: var(--text-2); }
@media (max-width: 54rem) { .vorteile-grid.drei { grid-template-columns: 1fr; } }
.knopf-icon { display: inline-flex; width: 18px; height: 18px; }
.knopf-icon svg { width: 18px; height: 18px; }
.zell-icon { display: inline-flex; width: 20px; height: 20px; vertical-align: middle; }
.zell-icon svg { width: 20px; height: 20px; stroke-width: 2.6; }
.haken-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; color: var(--text-2); }
.haken-liste li { padding-left: 1.6rem; position: relative; }
.haken-liste li::before { content: ""; position: absolute; left: .35rem; top: .3em; width: 6px; height: 11px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.preise { align-items: stretch; }
.preis { position: relative; display: grid; align-content: start; }
.preis.hervorgehoben { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.preis-marke { position: absolute; top: -12px; right: 1.25rem; margin: 0; padding: .2rem .7rem; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.preis > p:last-child { margin: auto 0 0; padding-top: .5rem; }
.preis .button { width: 100%; }
.buchung { scroll-margin-top: 100px; }
.buchung-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: center; }
.buchung-grid .aktionen { display: grid; gap: .6rem; }
.buchung-grid .aktionen .button { justify-content: center; }
@media (max-width: 48rem) { .buchung-grid { grid-template-columns: 1fr; } }
.stufen-tabelle td, .stufen-tabelle thead th { text-align: center; }
.stufen-tabelle thead th:first-child, .stufen-tabelle th[scope="row"] { text-align: left; }
.legende.waagerecht { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; font-size: .85rem; color: var(--muted); }
.legende.waagerecht li { display: inline-flex; align-items: center; gap: .4rem; }
.vorschau-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 4rem); align-items: center; }
.vorschau-grid .karte { margin: 0; }
.vorschau-karte .balken-liste li { grid-template-columns: minmax(7rem, 10rem) 1fr auto; }
@media (max-width: 54rem) { .vorschau-grid { grid-template-columns: 1fr; } }
.themen-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.themen-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border-radius: var(--radius-pill); border: 1px solid var(--line-2); color: var(--text-2); text-decoration: none; font-weight: 560; font-size: .9rem; }
.themen-nav a:hover { color: var(--text); background: var(--surface-2); }
.fragen-thema { margin-bottom: var(--space-5); scroll-margin-top: 100px; }
.statistik.eingebettet { border-radius: var(--radius-l); margin-bottom: var(--space-5); }
.statistik.eingebettet .shell { width: auto; padding-inline: 1rem; }
main > .shell > .band { margin-top: var(--space-4); }
main > .shell > section { margin-bottom: var(--space-5); }
@media (max-width: 36rem) { .marke span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kopf .shell { gap: .5rem; } .kopf nav { gap: .35rem; } .kopf nav a.hervor { margin-left: 0; } }
.stufen-tabelle { min-width: 36rem; }
.wie-h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); font-weight: 760; letter-spacing: -0.025em; }

/* Sichtbarkeit: Autorität, Rankings, Links */
.sicht-karte h3 { margin-top: 0; }
.sicht-karte h4 { margin: var(--space-3) 0 .5rem; }
.autoritaet { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.autoritaet .note { grid-template-columns: auto; }
.autoritaet .kacheln { margin-bottom: .75rem; }
.linien { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.linie-karte { margin: 0 0 var(--space-3); padding: .9rem 1rem; border-radius: var(--radius-m); background: var(--surface-2); }
.linie-karte figcaption { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.linie-karte figcaption b { color: var(--text); font-size: 1.1rem; }
.linie { width: 100%; height: auto; max-height: 8.5rem; display: block; }
.linie polyline { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.linie .flaeche { fill: color-mix(in srgb, var(--brand) 14%, transparent); }
.linie circle { fill: var(--brand); }
.linie-achse { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.marke-ok { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--ok-bg); color: var(--ok); }
.einladung { background: var(--brand-soft); border-color: transparent; }
@media (max-width: 40rem) { .autoritaet { grid-template-columns: 1fr; } }

/* Kundenstimmen */
.sterne { display: inline-flex; gap: .1rem; vertical-align: middle; }
.sterne svg { width: 1.05rem; height: 1.05rem; }
.sterne .voll { fill: #e8a317; } .sterne .leer { fill: var(--line-2); }
.stimmen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.stimme { margin: 0; background: var(--surface); border-radius: var(--radius-l); padding: 1.4rem; display: grid; gap: .9rem; }
.stimme blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.stimme blockquote p { margin: 0; }
.stimme figcaption { display: grid; gap: .15rem; font-size: .9rem; }
.sterne-wahl { border: 0; padding: 0; margin: 0 0 1rem; }
.sterne-eingabe { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.sterne-eingabe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterne-eingabe label { cursor: pointer; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 1px solid var(--line-2); background: var(--surface-2); }
.sterne-eingabe input:checked ~ label, .sterne-eingabe label:hover, .sterne-eingabe label:hover ~ label { background: #fde8b3; border-color: #e8a317; color: #7a4d00; }
.sterne-eingabe input:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }

.sprachen a[aria-current] { font-weight: 700; text-decoration: none; }

/* Abschnittstrenner, Aufgabenbereiche und lokale Arbeitsbilder */
.abschnitt { border-top: 1px solid var(--line); }
.abschnitt.getoent { border-top: 0; box-shadow: inset 0 1px var(--line); }
.handarbeit-karte { display: grid; grid-template-columns: auto 1fr; align-content: start; align-items: center; gap: .8rem 1rem; }
.handarbeit-karte > .icon { grid-row: span 2; }
.handarbeit-karte > strong { margin: 0; }
.handarbeit-karte > strong small { font-size: .65em; }
.handarbeit-karte h3, .handarbeit-karte p, .handarbeit-karte small { grid-column: 1 / -1; margin: 0; }
.handarbeit-karte > small { color: var(--muted); font-size: .8rem; }
.arbeitsfotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.arbeitsfoto { margin: 0; min-width: 0; }
.arbeitsfoto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); }
.arbeitsfoto figcaption { color: var(--muted); font-size: .82rem; margin-top: .45rem; }
.kopf nav a[aria-current="page"]:not(.hervor):not(.preise-knopf) { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: .35em; }
@media (max-width: 40rem) { .arbeitsfotos { grid-template-columns: 1fr; } }

/* Tabellen der Sichtbarkeit: Kopfzellen dürfen umbrechen, damit die Berichtsspalte bei 320 px nicht überläuft (UX-02) */
.sicht-karte .tabelle thead th { white-space: normal; }
.sicht-karte .tabelle td, .sicht-karte .tabelle th { overflow-wrap: anywhere; }

/* Korrekturen Runde F: aktiver Menüpunkt in der hellen Pille auch im Dunkelmodus dunkel */
.kopf nav a[aria-current="page"]:not(.preise-knopf):not(.hervor) { color: #0b1020; }

/* ---------- Runde G: Akzent, Helligkeitsrhythmus und Karten mit Tiefe ---------- */
:root {
  --brand: #087653; --brand-2: #087653; --brand-soft: #dff7ef; --on-brand: #0b1020;
  --accent: #2ee6a6; --accent: #2ee6a6; --accent: #2ee6a6;
  --accent: #2ee6a6; --accent-ink: #0b1020;
  --bg: #f1f3f7; --bg-2: #f1f3f7; --surface: #fff; --surface-2: #f6f8fb;
  --text: #0b1020; --text-2: #3b4254; --muted: #5f687c;
  --line: #e6e8ef; --line-2: #d4d8e3;
  --shadow-1: 0 2px 6px rgb(11 16 32 / 6%), 0 30px 60px -28px rgb(11 16 32 / 35%);
  --shadow-2: 0 2px 6px rgb(11 16 32 / 8%), 0 36px 68px -26px rgb(11 16 32 / 38%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #2ee6a6; --brand-2: #56efb7; --brand-soft: #12392f; --on-brand: #0b1020;
    --bg: #0f1424; --bg-2: #0f1424; --surface: #121a33; --surface-2: #17203b;
    --text: #f4f6fb; --text-2: #c9d0e3; --muted: #a5aec4;
    --line: #27314c; --line-2: #34405d;
    --shadow-1: 0 2px 6px rgb(0 0 0 / 24%), 0 30px 60px -28px rgb(0 0 0 / 65%);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 30%), 0 36px 68px -26px rgb(0 0 0 / 72%);
  }
}
.grad-text, .held .grad-text, .seitenkopf .grad-text, .bericht-kopf .grad-text { background-image: linear-gradient(95deg, #fff, #2ee6a6); }
.button, .btn, .button.brand, .button.brand:hover, .kopf nav a.hervor, .kopf nav a.hervor:hover,
.band .button:not(.sekundaer), .bericht-kopf .aktionen .button.brand, .bericht-kopf .aktionen .button:not(.sekundaer) {
  background: #2ee6a6; color: #0b1020; border-color: transparent;
}
.button.sekundaer { background: #fff; color: #0b1020; border-color: transparent; }
.button.sekundaer:hover { background: #e3e8ef; }
.kopf nav a.preise-knopf, .kopf nav a.preise-knopf:hover, .kopf nav a.preise-knopf[aria-current] { color: #087653; background: #e5f7f0; border-color: transparent; }
.held, .statistik { color: #f4f6fb; background: #0b1020; }
.held .lead, .held .punkte { color: #c9d0e3; }
.held::before { background: radial-gradient(42rem 26rem at 18% 10%, rgb(46 230 166 / 24%), transparent 70%), radial-gradient(38rem 24rem at 82% 0%, rgb(11 16 32 / 85%), transparent 70%); }
.held::after { background-image: linear-gradient(to right, rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / 5%) 1px, transparent 1px); }
.held .mock-glanz, .band::before { background: radial-gradient(ellipse at 75% 10%, rgb(46 230 166 / 24%), transparent 55%), #0b1020; }
.statistik { border: 0; }
.statistik strong { color: #fff; }
.statistik span { color: #c9d0e3; }
.abschnitt { border: 0; }
.abschnitt-kopf .eyebrow { color: #087653; }
.held .eyebrow, .seitenkopf .eyebrow { color: #2ee6a6; }
.band { color: #0b1020; background: #2ee6a6; border-radius: 24px; box-shadow: none; }
.band::before { display: none; }
.band .eyebrow, .band h2, .band p { color: #0b1020; }
.fuss { background: #0b1020; }
.seitenkopf, .bericht-kopf { color: #f4f6fb; }
.seitenkopf::before, main.mit-kopf, .bericht-kopf::before {
  background: radial-gradient(ellipse at 78% 12%, rgb(46 230 166 / 16%), transparent 48%), #0b1020;
}
main.mit-kopf { background-repeat: no-repeat; }
.seitenkopf .lead, .bericht-kopf .bericht-meta, .bericht-kopf .bericht-meta .muted { color: #c9d0e3; }
main > .shell > .abschnitt { position: relative; width: 100vw; margin-left: calc(50% - 50vw); padding-inline: max(1rem, calc((100vw - 76rem) / 2)); }
.karte, .preis, .bereich-kachel, .bereich, .tabelle-wrap, .stapel, .schritte li,
.fragen details, details.frage, .stimme, .team-figur, .linie-karte {
  border: 0; border-radius: 22px; box-shadow: var(--shadow-1); overflow: hidden;
}
.karte, .preis, .bereich-kachel, .stimme, .team-figur, .linie-karte { position: relative; }
.karte::before, .preis::before, .bereich-kachel::before, .bereich::before, .schritte li::before,
.fragen details::before, details.frage::before, .stimme::before, .team-figur::before, .linie-karte::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 3rem; height: 4px; background: #2ee6a6; transition: width .35s ease;
}
.karte:hover::before, .preis:hover::before, .bereich-kachel:hover::before, .bereich:hover::before,
.schritte li:hover::before, .fragen details:hover::before, .stimme:hover::before, .team-figur:hover::before { width: 100%; }
.karte, .preis, .bereich-kachel, .stimme, .team-figur, .linie-karte { padding: clamp(1.75rem, 1.3rem + 1vw, 2.5rem); }
.karte:hover, .preis:hover, .bereich-kachel:hover, .schritte li:hover, .vorteil:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.held .fenster, .bericht-inhalt .karte, .bericht-inhalt .bereich-kachel, .bericht-inhalt .bereich { background: #121a33; color: #f4f6fb; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.icon, .bereiche .t1 .icon, .bereiche .t2 .icon, .bereiche .t3 .icon, .bereiche .t4 .icon,
.vorteile-grid .icon, .handarbeit-grid .icon { background: #0b1020; color: #2ee6a6; box-shadow: none; }
.band-dunkel .icon, .held .icon { background: #2ee6a6; color: #0b1020; }
.bereiche .t1 li::before, .bereiche .t2 li::before, .bereiche .t3 li::before, .bereiche .t4 li::before { background: #2ee6a6; }
.preis.hervorgehoben { background: #0b1020; color: #f4f6fb; box-shadow: 0 0 0 2px rgb(46 230 166 / 45%), 0 30px 60px -24px rgb(11 16 32 / 60%); }
.preis.hervorgehoben p, .preis.hervorgehoben ul, .preis.hervorgehoben .betrag small { color: #c9d0e3; }
.preis-marke { background: #2ee6a6; color: #0b1020; }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.schritte li { position: relative; padding: 1.75rem; border-radius: var(--radius-l); background: var(--surface); }
.schritte li::before { content: ""; display: block; width: 3rem; height: 4px; background: #2ee6a6; margin-bottom: 1.2rem; }
.schritte li > .icon { grid-column: 1; grid-row: 2; background: #0b1020; color: #2ee6a6; }
.schritte li::marker { content: none; }
.schritt-marke { background: #e1f7ef; color: #087653; }
.tabelle-wrap, .stapel { background: #fff; }
.tabelle thead th, .funde thead th { background: #0b1020; color: #fff; border-bottom: 2px solid #2ee6a6; }
.tabelle tbody tr:nth-child(even) { background: #f6f8fb; }
.tabelle tbody th { font-weight: 700; }
.tabelle .ja, .haken-liste li::before { color: #087653; }
.ja .zell-icon { background: #2ee6a6; color: #0b1020; }
.fragen details, details.frage { background: #fff; }
.fragen details[open] { box-shadow: inset 4px 0 #2ee6a6, var(--shadow-1); }
.bericht-inhalt .bereich::before, .bericht-inhalt .bereich:nth-of-type(n)::before { background: #2ee6a6; }
.bericht-kopf .grad-text { background-image: linear-gradient(95deg, #fff, #2ee6a6); }
.einladung, .marke-ok { background: #dff7ef; color: #087653; }
@media (prefers-color-scheme: dark) {
  .karte, .preis, .bereich-kachel, .schritte li, .fragen details, details.frage,
  .stimme, .team-figur, .linie-karte, .tabelle-wrap, .stapel { background: #121a33; color: #f4f6fb; }
  .karte p, .preis p, .preis ul, .fragen details p { color: #c9d0e3; }
  .schritt-marke { background: #12392f; color: #2ee6a6; }
  .tabelle tbody tr:nth-child(even) { background: #17203b; }
  .tabelle thead th, .funde thead th { background: #0b1020; }
  .fragen details[open] { box-shadow: inset 4px 0 #2ee6a6, var(--shadow-1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* Runde H: warme Baender, ein Akzent und konsistente Karten */
:root {
  --bg: #f4f1ea; --bg-2: #ebe7de; --surface: #fff; --surface-2: #ebe7de;
  --text: #0b1426; --text-2: #30394a; --muted: #5b6275;
  --brand: #087653; --brand-2: #087653; --brand-soft: #e5f5ef;
  --accent: #2ee6a6; --accent-ink: #0b1426; --on-brand: #0b1426;
  --radius-xl: 28px; --radius-l: 28px; --radius-m: 16px; --radius-s: 16px;
}
.grad-text { background: none; color: #087653; -webkit-text-fill-color: #087653; }
.held .grad-text, .seitenkopf .grad-text, .bericht-kopf .grad-text { background: linear-gradient(95deg, #2ee6a6, #8af5cf); color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; }
.abschnitt { padding-block: clamp(3rem, 2rem + 4vw, 6rem); margin-top: -3rem; border-radius: 48px 48px 0 0; z-index: 1; }
.abschnitt-kopf { margin-bottom: 2.5rem; }
.held { background: #0b1426; padding-bottom: clamp(5rem, 7vw, 7rem); }
.held::before { background: radial-gradient(ellipse at 18% 12%, rgb(46 230 166 / 18%), transparent 48%); }
.band-dunkel { background: #0b1426; color: #f4f1ea; }
.band-hell { background: #f4f1ea; color: #0b1426; }
.abschnitt.band-dunkel, .abschnitt.band-hell { position: relative; }
.band-dunkel h2, .band-dunkel h3, .band-dunkel .abschnitt-kopf h2 { color: #fff; }
.band-dunkel p, .band-dunkel li { color: #d5dbea; }
.band-dunkel .eyebrow, .held .eyebrow { color: #2ee6a6; border-color: rgb(46 230 166 / 35%); }
.band-hell .eyebrow { color: #087653; }
#schluss-h { color: #0b1426; }
main > section[aria-labelledby="schluss-h"] { background: #2ee6a6; color: #0b1426; border-radius: 48px 48px 0 0; }
.fuss { background: #0b1426; border-radius: 48px 48px 0 0; border: 0; }
.karte, .preis, .bereich-kachel, .bereich, .tabelle-wrap, .stapel, .schritte li,
.fragen details, details.frage, .stimme, .team-figur, .linie-karte {
  border: 0; border-radius: 28px; box-shadow: 0 28px 56px -28px rgb(11 20 38 / 32%), 0 2px 6px rgb(11 20 38 / 6%);
}
.karte, .preis, .bereich-kachel, .stimme, .team-figur, .linie-karte { padding: clamp(1.75rem, 1.5rem + .75vw, 2.25rem); }
.karte h2, .karte h3, .preis h2, .preis h3, .bereich-kachel h3 { font-size: 1.2rem; }
.abschnitt .karte, .abschnitt .preis, .abschnitt .bereich-kachel, .abschnitt .stimme { margin-bottom: 0; }
.abschnitt.band-dunkel .karte, .abschnitt.band-dunkel .preis, .abschnitt.band-dunkel .bereich-kachel,
.abschnitt.band-dunkel .stimme, .band-dunkel .fragen details, .band-dunkel details.frage,
.bericht-inhalt .karte, .bericht-inhalt .bereich-kachel, .bericht-inhalt .bereich {
 background: #12203d; color: #f4f1ea; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.abschnitt.band-dunkel .karte p, .abschnitt.band-dunkel .karte li, .abschnitt.band-dunkel .stimme blockquote { color: #d5dbea; }
.icon, .bereiche .icon, .vorteile-grid .icon, .handarbeit-grid .icon { width: 56px; height: 56px; border-radius: 50%; }
.schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.schritte li { display: flex; flex-direction: column; min-height: 100%; padding: clamp(1.75rem, 1.5rem + .75vw, 2.25rem); background: #fff; }
.schritte li > .icon { flex: 0 0 56px; }
.schritte li p { margin-bottom: 1.25rem; }
.schritt-marke { margin-top: auto; align-self: flex-start; border-radius: 999px; background: #2ee6a6; color: #0b1426; }
@media (min-width: 40rem) and (max-width: 64rem) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .schritte { grid-template-columns: 1fr; } }
.tabelle-wrap, .stapel { box-shadow: 0 28px 56px -28px rgb(11 20 38 / 32%), 0 2px 6px rgb(11 20 38 / 6%); }
.band-dunkel .tabelle-wrap, .bericht-inhalt .tabelle-wrap { background: #12203d; }
.tabelle thead th, .funde thead th { background: #0b1426; }
.tabelle tbody tr:nth-child(even) { background: #ebe7de; }
.karte::before, .preis::before, .bereich-kachel::before, .bereich::before, .schritte li::before,
.fragen details::before, details.frage::before, .stimme::before, .team-figur::before, .linie-karte::before {
  width: 3rem; height: 6px; border-radius: 999px; background: #087653; inset: 1.25rem auto auto 1.25rem;
}
.abschnitt.band-dunkel .karte::before, .abschnitt.band-dunkel .schritte li::before { background: #2ee6a6; }
.karte:hover::before, .preis:hover::before, .bereich-kachel:hover::before, .bereich:hover::before,
.schritte li:hover::before, .fragen details:hover::before, .stimme:hover::before, .team-figur:hover::before, .linie-karte:hover::before { width: 5rem; }
.seitenkopf, .bericht-kopf { color: #f4f1ea; background: radial-gradient(ellipse at 78% 12%, rgb(46 230 166 / 18%), transparent 48%), #0b1426; border-radius: 0 0 48px 48px; }
main.mit-kopf { background: #f4f1ea; }
main.mit-kopf > .shell > section, main.mit-kopf > section { position: relative; }
main.mit-kopf > .shell > section:nth-of-type(odd) { background: #f4f1ea; color: #0b1426; }
main.mit-kopf > .shell > section:nth-of-type(even) { background: #0b1426; color: #f4f1ea; }
main.mit-kopf > .shell > section:nth-of-type(even) h2 { color: #fff; }
.bericht-inhalt > section, .bericht-inhalt > .bereich { background: #f4f1ea; color: #0b1426; }
.bericht-inhalt > .bereich .tabelle-wrap, .bericht-inhalt > .karte .tabelle-wrap { background: #12203d; }
@media (prefers-color-scheme: dark) {
 :root { --bg: #0b1426; --bg-2: #0f1a30; --surface: #12203d; --surface-2: #172642; --text: #f4f1ea; --text-2: #d5dbea; --muted: #b4bdce; --line: #263651; --line-2: #344762; }
 .band-hell, .abschnitt.band-hell, main.mit-kopf > .shell > section:nth-of-type(odd) { background: #0f1a30; color: #f4f1ea; }
 .band-dunkel, .abschnitt.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even) { background: #0b1426; color: #f4f1ea; }
 .karte, .preis, .bereich-kachel, .schritte li, .fragen details, details.frage, .stimme, .team-figur, .linie-karte,
 .abschnitt.band-hell .karte, .abschnitt.band-hell .preis, .abschnitt.band-hell .bereich-kachel { background: #12203d; color: #f4f1ea; box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
 .karte p, .preis p, .preis ul, .fragen details p { color: #d5dbea; }
 .band-hell .eyebrow { color: #2ee6a6; }
 .grad-text { color: #2ee6a6; -webkit-text-fill-color: #2ee6a6; }
 .fuss { background: #0b1426; }
}
@media (max-width: 48rem) { .abschnitt, main > section[aria-labelledby="schluss-h"] { border-radius: 28px 28px 0 0; } .seitenkopf, .bericht-kopf, .fuss { border-radius: 0 0 28px 28px; } }

/* Bandfarben und passende Textfarben */
.band-hell, main.mit-kopf > .shell > section:nth-of-type(odd) { --band-flaeche: #f4f1ea; --band-text: #0b1426; --band-text-2: #30394a; --band-akzent: #06563c; }
.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even) { --band-flaeche: #0b1426; --band-text: #f4f1ea; --band-text-2: #c9d0e3; --band-akzent: #2ee6a6; }
.band-hell.ton-mint { --band-flaeche: #e6f5ee; }
.band-hell.ton-pfirsich { --band-flaeche: #fbece3; }
.band-hell.ton-himmel { --band-flaeche: #e8f0fb; }
main.mit-kopf > .shell > section:nth-of-type(8n+3) { --band-flaeche: #e6f5ee; }
main.mit-kopf > .shell > section:nth-of-type(8n+5) { --band-flaeche: #fbece3; }
main.mit-kopf > .shell > section:nth-of-type(8n+7) { --band-flaeche: #e8f0fb; }
main > section.band-hell, main > section.band-dunkel, main > section.band-hell.getoent, main > section.band-dunkel.getoent, main.mit-kopf > .shell > section, #pruefungen.band-hell { background: var(--band-flaeche); color: var(--band-text); }
.abschnitt, main.mit-kopf > .shell > section { padding-bottom: calc(clamp(3rem, 2rem + 4vw, 6rem) + 3rem); }
main.mit-kopf > .shell > section { position: relative; margin-top: -3rem; padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-inline: max(1rem, calc((100vw - 76rem) / 2)); border-radius: 48px 48px 0 0; }
:is(.band-hell, .band-dunkel, main.mit-kopf > .shell > section) :is(h2, h3, .abschnitt-kopf h2) { color: var(--band-text); }
:is(.band-hell, .band-dunkel, main.mit-kopf > .shell > section) :is(p, li, .lead) { color: var(--band-text-2); }
:is(.band-hell, .band-dunkel, main.mit-kopf > .shell > section) :is(.eyebrow, a:not(.button)) { color: var(--band-akzent); }
.band-hell .schritt-marke { background: color-mix(in srgb, var(--band-flaeche) 85%, #087653); color: #075c42; }
:is(.band-hell, main.mit-kopf > .shell > section:nth-of-type(odd)) :is(.karte, .preis, .bereich-kachel, .schritte li, .fragen details) { background: #fff; color: #0b1426; }
:is(.band-hell, main.mit-kopf > .shell > section:nth-of-type(odd)) :is(.karte, .preis, .bereich-kachel, .schritte li, .fragen details) :is(h2, h3, p, li, summary) { color: #30394a; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even)) :is(.karte, .preis, .fragen details) { background: #12203d; color: #e8ecf7; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even)) .fragen summary { color: #e8ecf7; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even)) .fragen details p { color: #c9d0e3; }
.fragen summary::after { border: 0; background: linear-gradient(#0b1426, #0b1426) center/10px 1.5px no-repeat, linear-gradient(#0b1426, #0b1426) center/1.5px 10px no-repeat, #2ee6a6; }
.fragen details[open] summary::after { transform: none; background: linear-gradient(#0b1426, #0b1426) center/10px 1.5px no-repeat, #2ee6a6; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even), .bericht-inhalt .bereich, .bericht-inhalt .karte) :is(.tabelle-wrap, .stapel) { background: #12203d; color: #e8ecf7; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even), .bericht-inhalt .bereich, .bericht-inhalt .karte) :is(.tabelle, .funde) { color: #e8ecf7; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even), .bericht-inhalt .bereich, .bericht-inhalt .karte) :is(.tabelle, .funde) tbody tr:nth-child(odd) { background: #12203d; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even), .bericht-inhalt .bereich, .bericht-inhalt .karte) :is(.tabelle, .funde) tbody tr:nth-child(even) { background: #0f1a30; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even)) .tabelle .wir { background: rgb(46 230 166 / 12%); color: #e8ecf7; }
:is(.band-dunkel, main.mit-kopf > .shell > section:nth-of-type(even)) .tabelle .muted { color: #c9d0e3; }
@media (prefers-color-scheme: dark) {
 .band-hell, main.mit-kopf > .shell > section:nth-of-type(odd) { --band-flaeche: #0f1a30; --band-text: #f4f1ea; --band-text-2: #c9d0e3; --band-akzent: #2ee6a6; }
 .band-hell.ton-mint, main.mit-kopf > .shell > section:nth-of-type(8n+3) { --band-flaeche: #101c33; }
 .band-hell.ton-pfirsich, main.mit-kopf > .shell > section:nth-of-type(8n+5) { --band-flaeche: #12203d; }
 .band-hell.ton-himmel, main.mit-kopf > .shell > section:nth-of-type(8n+7) { --band-flaeche: #101c33; }
 :is(.band-hell, main.mit-kopf > .shell > section:nth-of-type(odd)) :is(.karte, .preis, .bereich-kachel, .schritte li, .fragen details) { background: #12203d; color: #f4f1ea; }
 :is(.band-hell, main.mit-kopf > .shell > section:nth-of-type(odd)) :is(.karte, .preis, .bereich-kachel, .schritte li, .fragen details) :is(h2, h3, p, li, summary) { color: #e8ecf7; }
 .band-hell .schritt-marke { background: #12392f; color: #2ee6a6; }
}

.held .fenster { background: #fff; color: #0b1426; }
.held .fenster-inhalt { background: #f4f1ea; color: #0b1426; }
.held .fenster-inhalt :is(p, strong, h3) { color: #0b1426; }
.held .fenster-inhalt .fund { background: #fff; color: #0b1426; }
.held .grad-text, .seitenkopf .grad-text, .bericht-kopf .grad-text { background: linear-gradient(95deg, #2ee6a6, #8af5cf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
section.band-dunkel .grad-text { background: none; color: #2ee6a6; -webkit-text-fill-color: #2ee6a6; }
section#pruefungen.band-hell .abschnitt-kopf h2 { color: var(--band-text); }
section#pruefungen.band-hell .abschnitt-kopf p { color: var(--band-text-2); }
section#pruefungen.band-hell .eyebrow { color: var(--band-akzent); }
main > section.band-hell .band :is(h2, p, .eyebrow) { color: #0b1426; }
@media (prefers-color-scheme: dark) {
 main.mit-kopf { background: #0b1426; }
 .bericht-inhalt > section, .bericht-inhalt > .bereich { background: #12203d; color: #f4f1ea; }
 .stapel, .tabelle-wrap { background: #12203d; color: #e8ecf7; }
 .stapel .tabelle tbody tr:nth-child(even) { background: #0f1a30; }
}
@media (max-width: 48rem) { main.mit-kopf > .shell > section { border-radius: 28px 28px 0 0; } }

.held .fenster-inhalt .fund :is(p, strong) { color: #0b1426; }
.statistik.eingebettet { background: var(--surface); color: var(--text); }
.statistik.eingebettet strong { color: var(--text); }
.statistik.eingebettet span { color: var(--muted); }
.chip.schwer[aria-pressed=true], .chip.mittel[aria-pressed=true], .chip.leicht[aria-pressed=true], .chip.Hinweis[aria-pressed=true] { color: #fff; }
@media (prefers-color-scheme: dark) {
  .chip.schwer[aria-pressed=true], .chip.mittel[aria-pressed=true], .chip.leicht[aria-pressed=true], .chip.Hinweis[aria-pressed=true] { color: #0b1020; }
  main.mit-kopf a:not(.button), .seitenkopf a:not(.button), .bericht-kopf a:not(.button), .band-dunkel a:not(.button), .kontakt-mail { color: #2ee6a6; }
}
section.band-hell .band p.eyebrow, section.band-hell .band p { color: #0b1426; }
.bericht-inhalt .karte :is(p, .muted) { color: #c9d0e3; }

/* Dunkelmodus: Linkfarbe nach Runde H wieder hell (Kontrast auf dunklen Bändern) */
@media (prefers-color-scheme: dark) { :root { --brand: #2ee6a6; --brand-2: #2ee6a6; --brand-soft: #0f2a24; } }

/* FAQ: kein Reiter über dem Fragetext (Plus-Kreis ist der Akzent), Abstand zum Folgeknopf */
.fragen details::before, details.frage::before { display: none; }
.fragen + * { margin-top: 1.75rem; }
.fragen details { padding-inline: 1.5rem; }

/* Grafikdurchgang 02.11.2026: Kennzahlenband, Kartenreiter, Schlussband, Haken, Eyebrows */
.statistik { padding-bottom: 3.5rem; }
.karte, .preis, .bereich-kachel, .stimme, .team-figur, .linie-karte, .schritte li { padding-top: calc(clamp(1.75rem, 1.5rem + .75vw, 2.25rem) + .9rem); }
.held figcaption { color: #c9d0e3; }
.held figcaption a { color: #2ee6a6; }
.band { background: #2ee6a6; color: #0b1426; }
.band h2, .band p, .band .eyebrow { color: #0b1426; }
.band .grad-text { color: #0b1426 !important; -webkit-text-fill-color: #0b1426 !important; background: none !important; }
.band .button { background: #0b1426; color: #2ee6a6; }
.band .button.sekundaer { background: transparent; color: #0b1426; border: 2px solid #0b1426; }
.band .button.sekundaer:hover { background: rgb(11 20 38 / 10%); }
.band a:not(.button) { color: #0b1426; }
.abschnitt .eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border: 1px solid currentColor; border-radius: 999px; background: rgb(8 118 83 / 8%); }
.abschnitt .eyebrow::before { width: .45rem; height: .45rem; border-radius: 50%; }
.band-dunkel .eyebrow { color: #2ee6a6; background: rgb(46 230 166 / 8%); }
.band .eyebrow { background: rgb(11 20 38 / 8%); }
.band-dunkel .haken-liste li::before, .band-dunkel .punkte li::before { border-color: #2ee6a6; }
.band-dunkel .betrag small, .band-dunkel .preis .betrag small { color: #9aa5c4; }
.band-dunkel .preis .betrag { margin-bottom: .75rem; }
.handarbeit .zahl-klein small { display: inline; margin: 0 0 0 .4rem; }
.abschnitt .band .button:not(.sekundaer) { background: #0b1426; color: #2ee6a6; }
.abschnitt .band .button:not(.sekundaer):hover { background: #12203d; }

/* Unterseiten: überlappende Bänder dürfen Text nicht abschneiden, Karten-Abschnitte bleiben weiße Karten */
main.mit-kopf > .shell > section { padding-bottom: calc(clamp(3rem, 2rem + 4vw, 6rem) + 3rem); }
main.mit-kopf > .shell > section.karte:nth-of-type(odd) { background: #fff; }
main.mit-kopf > .shell > section.karte:nth-of-type(even)::before { background: #2ee6a6; }
.preis .betrag { margin-bottom: .75rem; }
main .preis .button:not(.brand) { background: #0b1426; color: #2ee6a6; }
main .band-dunkel .preis .button:not(.brand) { background: #2ee6a6; color: #0b1426; }
@media (prefers-color-scheme: dark) {
  main.mit-kopf > .shell > section.karte:nth-of-type(odd) { background: #12203d; }
  main .preis .button:not(.brand) { background: #2ee6a6; color: #0b1426; }
}
main.mit-kopf > .shell > :not(section):has(+ section) { padding-bottom: 3.5rem; }
main.mit-kopf > .shell > section:last-child { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
main .buchung .button:not(.brand):not(:first-child), main .buchung-grid .button.sekundaer { background: transparent; color: #0b1426; border: 2px solid #0b1426; }
@media (prefers-color-scheme: dark) { main .buchung .button:not(.brand):not(:first-child), main .buchung-grid .button.sekundaer { color: #f4f1ea; border-color: #f4f1ea; } }
html body main .band .button:not(.sekundaer) { background: #0b1426; color: #2ee6a6; }
html body main .band .eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border: 1px solid #0b1426; border-radius: 999px; background: rgb(11 20 38 / 8%); }
html body main .band .eyebrow::before { width: .45rem; height: .45rem; border-radius: 50%; background: #0b1426; }
html body main .abschnitt.handarbeit .karte-kopf .zahl-klein small { display: inline; margin: 0 0 0 .4rem; }
html body main .abschnitt.handarbeit .karte-kopf .zahl-klein { text-align: left; }
html body main .handarbeit-karte > .icon + strong + small { grid-column: 2; grid-row: 2; align-self: start; margin-top: -.9rem; }

/* Bericht: dunkle Karten tragen ihre eigenen hellen Textfarben (Variablen), damit Text, Linien und Diagramme lesbar bleiben */
.bericht-layout .karte, .bericht-layout .bereich-kachel, .bericht-layout .tabelle-wrap, .bericht-layout .stapel, .bericht-kopf {
  --text: #e8ecf7; --text-2: #c9d0e3; --muted: #aab4cf; --line: rgb(255 255 255 / 16%); --line-2: rgb(255 255 255 / 28%);
  --brand: #2ee6a6; --brand-2: #2ee6a6; color: #e8ecf7;
}
.bericht-layout .karte .kachel, .bericht-layout .bereich-kachel .badge { --text: initial; }
.bericht-layout .karte, .bericht-layout .bereich-kachel, .bericht-layout .tabelle-wrap, .bericht-layout .stapel { --surface-2: #1a294b; --bg-2: #1a294b; --bg: #12203d; }
.legende li, .legende li span { white-space: nowrap; }
.bericht-layout .legende { min-width: 8.5rem; }
@media (prefers-color-scheme: dark) {
  html body main .abschnitt .eyebrow, html body main section .abschnitt-kopf .eyebrow { color: #2ee6a6; }
  html body main :is(.karte, .preis, .bereich-kachel, .stimme, .schritte li, .team-figur, .linie-karte)::before { background: #2ee6a6; }
  html body main .band .eyebrow { color: #0b1426; }
}

/* Handy: Held-Spalten dürfen nicht breiter als der Bildschirm werden (Laufband, Formularfelder) */
.held .shell > *, .held .shell > * > * { min-width: 0; max-width: 100%; }
.held fieldset, .scan-karte fieldset { min-inline-size: 0; }
.scan-karte input:not([type=checkbox]) { min-width: 0; max-width: 100%; }
.lauflicht { max-width: 100%; }