/* blutwertetabelle.de — Gestaltung „Befundkarte“: ruhige Karten auf hellem Grund, Inter, ein Akzentblau
   nur für Interaktives und den Wert in der H1. Statusfarben ausschließlich semantisch (immer mit Text). */
@font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f3f3ef; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --hair: #e1e0d9; --border: rgba(11, 11, 11, .10); --accent: #256abf; --accent-ink: #1d5aa6; --accent-t: rgba(37, 106, 191, .07);
  --sev0: #0ca30c; --sev1: #fab219; --sev2: #ec835a; --sev3: #d03b3b; --sev4: #8c1238; --sevn: #a9a7a0;
  --sev4-t: rgba(140, 18, 56, .11); --sev4-i: #7c0f31;
  --sev0-t: rgba(12, 163, 12, .11); --sev1-t: rgba(250, 178, 25, .16); --sev2-t: rgba(236, 131, 90, .15); --sev3-t: rgba(208, 59, 59, .11); --sevn-t: rgba(11, 11, 11, .06);
  --sev0-i: #0b6b12; --sev1-i: #7d5300; --sev2-i: #9c3f17; --sev3-i: #a12424; --sevn-i: #52514e;
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 4px 14px rgba(11, 11, 11, .05);
  --r: 14px; --r-s: 8px; --max: 880px; --rand: 1.15rem;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #121211; --surface: #1a1a18; --surface-2: #222220; --ink: #f2f1ec; --ink-2: #bdbbb3; --muted: #8f8d85;
    --hair: #2e2d2a; --border: rgba(255, 255, 255, .11); --accent: #6aa8f0; --accent-ink: #8dbcf4; --accent-t: rgba(106, 168, 240, .10);
    --sev0: #34c034; --sev1: #f6c048; --sev2: #f0956f; --sev3: #ec6262; --sev4: #ff6b93; --sevn: #75736c;
    --sev4-t: rgba(255, 107, 147, .17); --sev4-i: #ffa3bc;
    --sev0-t: rgba(52, 192, 52, .15); --sev1-t: rgba(246, 192, 72, .15); --sev2-t: rgba(240, 149, 111, .15); --sev3-t: rgba(236, 98, 98, .16); --sevn-t: rgba(255, 255, 255, .07);
    --sev0-i: #7fdc7f; --sev1-i: #f6cf73; --sev2-i: #f5ad8f; --sev3-i: #f59a9a; --sevn-i: #bdbbb3;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.65 var(--font); font-feature-settings: "cv11", "ss03"; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(1.65rem, 4vw, 2.3rem); font-weight: 800; margin: 0 0 .5rem; }
h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .5rem; letter-spacing: -.01em; }
p, ul, ol { margin: 0 0 1rem; }
small { color: var(--ink-2); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); padding: .5rem 1rem; border-radius: var(--r-s); }
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Kopf */
.kopf { background: var(--surface); border-bottom: 1px solid var(--hair); }
.kopf-innen { max-width: 1080px; margin: 0 auto; padding: .8rem var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex: none; }
.logo img { width: 34px; height: 34px; display: block; }
.logo-name { font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.logo-name span { color: var(--ink-2); font-weight: 600; }
.hauptnav .nav-innen { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.hauptnav .nav-innen::-webkit-scrollbar { display: none; }
.hauptnav a { flex: none; text-decoration: none; color: var(--ink-2); font-weight: 550; font-size: .93rem; padding: .4rem .7rem; border-radius: 999px; }
.hauptnav a:hover { color: var(--ink); background: var(--surface-2); }
.hauptnav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-t); }
@media (max-width: 760px) {
  .kopf-innen { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .7rem var(--rand) .45rem; }
  .hauptnav { width: calc(100% + 2 * var(--rand)); margin: 0 calc(-1 * var(--rand)); }
  .hauptnav .nav-innen { padding: 0 calc(var(--rand) - .7rem); flex-wrap: wrap; row-gap: .1rem; overflow: visible; }
  .hauptnav a { padding: .35rem .6rem; }
}

/* Rahmen: eine Spalte, max. 880 px */
.rahmen { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 1.2rem var(--rand) 3.5rem; }
main { min-width: 0; }
main > section:first-of-type h2:first-child { margin-top: 0; }
.krumen { font-size: .84rem; color: var(--ink-2); margin: 0 0 .9rem; }
.krumen a { color: var(--ink-2); text-decoration: none; }
.krumen a:hover { color: var(--ink); text-decoration: underline; }
.krumen [aria-hidden] { color: var(--muted); margin: 0 .2rem; }
.kleingedruckt { font-size: .84rem; color: var(--ink-2); margin-top: 2rem; }

/* Karten */
.karte, .hero, .kasten { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.karte, .kasten { padding: 1.15rem 1.3rem; margin: 1.2rem 0; }
.karte-titel, .kasten-titel { font-size: .98rem; font-weight: 700; letter-spacing: -.005em; margin: 0 0 .7rem; }

/* Hero */
.hero { position: relative; padding: 1.4rem 1.5rem 1.3rem 1.6rem; margin: 0 0 1.2rem; border-left: 5px solid var(--hair); }
.hero.sev-0 { border-left-color: var(--sev0); } .hero.sev-1 { border-left-color: var(--sev1); }
.hero.sev-2 { border-left-color: var(--sev2); } .hero.sev-3 { border-left-color: var(--sev3); } .hero.sev-n { border-left-color: var(--sevn); }
.hero.sev-4 { border-left-color: var(--sev4); }
.hero-param, .hero-start { border-left-color: var(--accent); }
.kicker { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin: 0 0 .35rem; letter-spacing: .01em; }
.h1-wert { color: var(--accent); font-variant-numeric: tabular-nums; }
.h1-einheit { font-size: .58em; font-weight: 650; color: var(--ink-2); letter-spacing: 0; }
.h1-frage { display: block; font-size: clamp(1rem, 2.3vw, 1.15rem); font-weight: 600; color: var(--ink-2); letter-spacing: -.005em; margin-top: .3rem; }
.hero-si { margin: -.1rem 0 .7rem; color: var(--ink-2); font-size: .95rem; font-variant-numeric: tabular-nums; }
.hero-lead { margin: .85rem 0 0; font-size: 1.04rem; max-width: 62ch; }
.hero-mehr:empty { display: none; }
.hero-mehr { margin: .6rem 0 0; }
.hero-form { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
.pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 0; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .55rem; border-radius: 999px; font-size: .9rem; font-weight: 650; line-height: 1.3;
  border: 1px solid transparent; background: var(--sevn-t); color: var(--sevn-i); }
.pill-icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pill-gruppe { font-weight: 500; }
.pill.sev-0 { background: var(--sev0-t); color: var(--sev0-i); border-color: color-mix(in srgb, var(--sev0) 30%, transparent); }
.pill.sev-1 { background: var(--sev1-t); color: var(--sev1-i); border-color: color-mix(in srgb, var(--sev1) 45%, transparent); }
.pill.sev-2 { background: var(--sev2-t); color: var(--sev2-i); border-color: color-mix(in srgb, var(--sev2) 40%, transparent); }
.pill.sev-3 { background: var(--sev3-t); color: var(--sev3-i); border-color: color-mix(in srgb, var(--sev3) 35%, transparent); }
.pill.sev-4 { background: var(--sev4); color: #fff; border-color: var(--sev4); }
@media (prefers-color-scheme: dark) { .pill.sev-4 { color: #1a0a0f; } }
.banner-notfall { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--r-s); background: var(--sev3-t); border: 1px solid color-mix(in srgb, var(--sev3) 45%, transparent); color: var(--ink); font-size: .95rem; }
a[href^="tel:"] { white-space: nowrap; }
.banner-notfall strong { color: var(--sev3-i); }
.dringlich { margin: .9rem 0 0; font-size: .93rem; color: var(--ink-2); display: flex; gap: .5rem; align-items: baseline; }
.dringlich::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink-2); transform: translateY(-.05rem); }
.hero .hinweis-box { margin: .9rem 0 0; max-width: 62ch; }
.banner-notfall { border-width: 2px; border-color: color-mix(in srgb, var(--sev4) 55%, transparent); background: var(--sev4-t); }
.banner-notfall strong { color: var(--sev4-i); }
.hinweis-box { background: var(--accent-t); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r-s); padding: .75rem 1rem; font-size: .95rem; }

/* Skala */
.gauge-karte { padding-bottom: 1rem; }
.gauge { width: 100%; height: auto; display: block; overflow: visible; margin: .2rem 0 .4rem; }
.gauge.schmal { display: none; }
@media (max-width: 559px) { .gauge.breit { display: none; } .gauge.schmal { display: block; } }
.gauge .band { fill: var(--sevn); }
.gauge .band.sev-0 { fill: var(--sev0); } .gauge .band.sev-1 { fill: var(--sev1); } .gauge .band.sev-2 { fill: var(--sev2); } .gauge .band.sev-3 { fill: var(--sev3); } .gauge .band.sev-4 { fill: var(--sev4); }
.gauge .band.blass { opacity: .32; }
.gauge .band-kontur { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.gauge .tick { stroke: var(--muted); stroke-width: 1; }
.gauge .tick-text { font: 500 12px var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.gauge .gruppe-text { font: 650 12.5px var(--font); fill: var(--ink); }
.gauge .bubble { fill: var(--ink); }
.gauge .bubble-text { font: 700 12.5px var(--font); fill: var(--page); font-variant-numeric: tabular-nums; }
.gauge.schmal .tick-text { font-size: 13.5px; } .gauge.schmal .gruppe-text, .gauge.schmal .bubble-text { font-size: 13.5px; }
.gauge .stiel { stroke: var(--ink); stroke-width: 2; fill: var(--ink); }
.legende { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .45rem; }
.legende li { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-2); padding: .15rem .6rem .15rem .5rem; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); }
.legende li.ist-aktiv { color: var(--ink); font-weight: 650; border-color: var(--ink); }
.punkt { width: .62rem; height: .62rem; border-radius: 50%; background: var(--sevn); flex: none; }
.sev-0 > .punkt { background: var(--sev0); } .sev-1 > .punkt { background: var(--sev1); } .sev-2 > .punkt { background: var(--sev2); } .sev-3 > .punkt { background: var(--sev3); } .sev-4 > .punkt { background: var(--sev4); }
.gauge-karte .tabelle-scroll { margin-top: 1rem; }

/* Auf einen Blick */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; margin: 1.2rem 0; }
.kachel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s); padding: .75rem .95rem; }
.kachel dt { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.kachel dd { margin: 0; font-variant-numeric: tabular-nums; }
.kachel-zeile { display: block; font-size: .98rem; line-height: 1.4; }
.kachel-zeile + .kachel-zeile { margin-top: .45rem; }
.kachel-gruppe { display: block; font-size: .76rem; color: var(--ink-2); }
.kachel-sub { display: block; font-size: .84rem; }

/* Gut zu wissen */
.gut-zu-wissen { margin: 1.2rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); background: var(--accent-t); border-radius: 0 var(--r-s) var(--r-s) 0; }
.gut-zu-wissen p:last-child { margin-bottom: 0; }

/* Texte je Band */
.band-text { margin-top: 2.4rem; }
.band-text .lead { font-size: 1.06rem; }
.ref-note { font-size: .85rem; color: var(--ink-2); }
.liste-2sp, .liste, .verwandt, .quellen { padding-left: 1.15rem; }
.liste-2sp { columns: 2 260px; column-gap: 2rem; }
.liste-2sp li, .liste li { margin-bottom: .4rem; break-inside: avoid; }
li::marker { color: var(--muted); }
.schritte { list-style: none; padding: 0; counter-reset: s; }
.schritte li { counter-increment: s; position: relative; padding-left: 2.2rem; margin-bottom: .6rem; min-height: 1.6rem; }
.schritte li::before { content: counter(s); position: absolute; left: 0; top: .05rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--accent-t); color: var(--accent-ink);
  font-weight: 700; font-size: .82rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.arzt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s); padding: .8rem 1rem; font-size: .95rem; }

/* Werte kommen selten allein */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .8rem; }
.partner-karte { margin: 0; display: flex; flex-direction: column; }
.partner-karte h3 { margin: 0 0 .35rem; font-size: 1rem; }
.partner-karte h3 a { color: var(--ink); text-decoration: none; }
.partner-karte h3 a:hover { text-decoration: underline; }
.partner-karte p { font-size: .9rem; color: var(--ink-2); }
.partner-karte .wertform { margin-top: auto; }

/* Chips (Nachbarwerte, Wertauswahl) */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 550; font-variant-numeric: tabular-nums; }
a.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip.ist-aktiv { background: var(--ink); color: var(--page); border-color: var(--ink); font-weight: 700; }

/* Bereiche im Überblick (Parameterseite) */
.band-liste { display: grid; gap: .7rem; }
.band-zeile { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--sevn); border-radius: var(--r-s); padding: .8rem 1rem; }
.band-zeile.sev-0 { border-left-color: var(--sev0); } .band-zeile.sev-1 { border-left-color: var(--sev1); } .band-zeile.sev-2 { border-left-color: var(--sev2); } .band-zeile.sev-4 { border-left-color: var(--sev4); } .band-zeile.sev-3 { border-left-color: var(--sev3); }
.band-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .45rem; }
.band-spanne { font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.band-zeile p { margin: 0 0 .3rem; font-size: .95rem; }
.band-link { font-size: .88rem; }

/* FAQ */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { cursor: pointer; list-style: none; padding: .85rem 2rem .85rem 0; font-weight: 650; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.15rem; width: .5rem; height: .5rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.35rem; }
.faq-a { padding: 0 0 .6rem; color: var(--ink-2); }

/* Zwei Spalten unten */
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 2rem; }
.verwandt li, .quellen li { margin-bottom: .3rem; }
.quellen { font-size: .92rem; }

/* Formulare */
.wertform label { display: block; font-weight: 600; margin: 0 0 .3rem; font-size: .9rem; }
.wertform label span { font-weight: 400; color: var(--ink-2); }
.wertform select, .wertform input[type=text] { font: inherit; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: var(--r-s); background: var(--page); color: var(--ink); }
.wertform select { width: 100%; padding: .55rem .6rem; }
.wertform input[type=text] { width: 8em; min-width: 0; flex: 1 1 auto; padding: .55rem .75rem; font-variant-numeric: tabular-nums; }
.wertform input:focus, .wertform select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.wertform input[aria-invalid="true"] { border-color: var(--sev3); }
.wf-felder { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .8rem; }
@media (max-width: 559px) { .wf-felder { grid-template-columns: minmax(0, 1fr); } }
.qc-zeile { display: flex; gap: .5rem; }
button { font: inherit; font-weight: 650; cursor: pointer; border: 0; border-radius: var(--r-s); padding: .55rem 1.05rem; background: var(--accent); color: #fff; }
button:hover { background: var(--accent-ink); }
@media (prefers-color-scheme: dark) { button { color: #0b1a2c; } }
.qc-fehler { color: var(--sev3-i); font-size: .88rem; margin: .4rem 0 0; }
.kompakt input[type=text] { width: 5em; }
.zeilenform .qc-zeile input { width: 6.5em; flex: 0 1 auto; padding: .4rem .6rem; font-size: .95rem; }
.zeilenform button { padding: .4rem .8rem; font-size: .9rem; }

/* /eval/ */
.eval-liste { display: grid; }
.eval-zeile { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .6rem 0; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.eval-zeile:first-child { border-top: 0; padding-top: 0; }
.eval-name { display: flex; flex-direction: column; min-width: 0; }
.eval-name a { font-weight: 650; }
.eval-name .leise { font-size: .84rem; font-variant-numeric: tabular-nums; }
.eval-zeile .wertform { margin: 0; }

/* Tabellen */
.tabelle-scroll { overflow-x: auto; margin: 0 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .7rem; text-align: left; vertical-align: top; }
thead th { font-size: .78rem; color: var(--ink-2); font-weight: 650; border-bottom: 1px solid var(--ink); }
tbody td { border-bottom: 1px solid var(--hair); }
tbody tr:last-child td { border-bottom: 0; }
td small { color: var(--ink-2); font-size: .78rem; margin-left: .2rem; }
.bw-tabelle td:nth-child(2), .bw-tabelle td:nth-child(3) { white-space: nowrap; }
.tabelle-karte { padding-bottom: .5rem; }

/* Start */
.ratgeber { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .8rem; }
.ratgeber-karte { margin: 0; display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--ink); }
.ratgeber-karte span { color: var(--ink-2); font-size: .92rem; }
.ratgeber-karte:hover { border-color: var(--accent); }

/* Artikel (übernommene Ratgebertexte) */
.artikel h2 { margin-top: 2.2rem; }
.artikel table { margin: 0 0 1rem; }
.artikel img { border-radius: var(--r-s); }
.bild-rechts { float: right; margin: 0 0 1rem 1.5rem; max-width: 44%; }
@media (max-width: 640px) { .bild-rechts { float: none; margin: 0 0 1rem; max-width: 100%; } }
article::after { content: ""; display: table; clear: both; }
.teaser { list-style: none; padding: 0; }
.teaser li { border-bottom: 1px solid var(--hair); }
.teaser a { display: block; padding: .7rem .2rem; text-decoration: none; color: var(--ink); }
.teaser a:hover { color: var(--accent-ink); }

/* Fuß */
.fuss { background: var(--surface-2); color: var(--ink-2); font-size: .88rem; border-top: 1px solid var(--hair); }
.fuss-innen { max-width: 1080px; margin: 0 auto; padding: 2rem var(--rand) 2.2rem; }
.fuss a { color: var(--ink-2); }
.fuss a:hover { color: var(--ink); }
.fuss-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 1.5rem; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair); }
.fuss-werte ul { list-style: none; padding: 0; margin: 0; }
.fuss-werte li { margin: .15rem 0; }
.fuss-werte a { text-decoration: none; }
.fuss-titel { font-weight: 700; color: var(--ink); margin: 0 0 .3rem; font-size: .86rem; }
.fuss-notfall { font-weight: 600; color: var(--ink); }
.fuss-notfall a { color: var(--ink); }
.fuss nav[aria-label="Rechtliches"] { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin-top: 1rem; }

/* Consent-Leiste */
#consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: .75rem; }
#consent-banner[hidden] { display: none; }
.consent-box { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 12px 40px rgba(11, 11, 11, .18);
  padding: .9rem 1.1rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.consent-box p { margin: 0; flex: 1 1 260px; font-size: .93rem; }
.consent-actions { display: flex; gap: .5rem; }
#consent-refuse { background: transparent; color: var(--accent-ink); border: 1px solid var(--accent); }

@media (max-width: 559px) {
  :root { --rand: 1rem; }
  body { font-size: 15.5px; }
  .hero { padding: 1.1rem 1rem 1.05rem 1.1rem; }
  .karte, .kasten { padding: 1rem; }
  .liste-2sp { columns: 1; }
  .kacheln { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
  .kachel { padding: .65rem .75rem; }
  .bw-tabelle td:nth-child(2), .bw-tabelle td:nth-child(3) { white-space: normal; }
  th, td { padding: .45rem .45rem; }
}
@media (max-width: 329px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }

@media print {
  .hauptnav, .fuss-werte, .fuss nav, #consent-banner, form, .wertform, .pruefen, .hero-form, .chips, .partner .wertform { display: none !important; }
  body { background: #fff; color: #000; }
  .karte, .hero, .kachel { box-shadow: none; }
  .faq details { display: block; } .faq-a { display: block; }
}