/* Gemeinsame Gestaltung. Alle Farb- und Maßwerte stehen hier. */
:root {
  color-scheme: dark;
  --schrift-text: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-titel: var(--schrift-text);
  --schrift-zahl: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --groesse-text: 1rem; --groesse-klein: .875rem; --groesse-winzig: .8125rem;
  --groesse-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --groesse-titel: clamp(3.35rem, 5.6vw, 6.5rem);
  --groesse-abschnitt: clamp(1.75rem, 2.6vw, 2.75rem);
  --groesse-zahl: clamp(1.8rem, 2.6vw, 2.8rem);
  --gewicht-titel: 500; --zeilenhoehe: 1.6;
  --abstand-1: .375rem; --abstand-2: .75rem; --abstand-3: 1.25rem;
  --abstand-4: 2rem; --abstand-5: 3.5rem; --abstand-6: 5.5rem;
  --rand-seite: clamp(1.25rem, 4.7vw, 5.5rem); --breite-max: 112rem;
  --radius: 1.25rem; --radius-klein: .5rem; --radius-rund: 999px;
  --kante: 1px; --fokus: 3px; --knopfhoehe: 2.75rem;
  --knopf-polster: .6rem 1.1rem; --icon: 1.1rem; --marke-icon: 2rem;
  --hero-spalten: .82fr 1.18fr; --hero-hoehe: 42rem;
  --textbreite: 29rem; --lesebreite: 48rem; --kartenbreite: 21rem;
  --tabellenspalte-text: 12rem;
  --tabellenspalte-lang: min(28rem, calc(100vw - 2 * var(--rand-seite) - 2 * var(--abstand-3) - 2 * var(--kante)));
  --modell-hoehe: clamp(23rem, 38vw, 43rem); --modell-mobil: 23rem;
  --schatten: 0 1rem 3rem #00000016;
  --grund: #101915; --flaeche: #18231d; --flaeche-2: #213028;
  --linie: #34443a; --text: #c3cec5; --text-stark: #f1f3e9; --text-leise: #a0b4a6;
  --akzent: #d6ed9c; --akzent-schwach: #d6ed9c12; --akzent-text: #162219;
  --gut: #a1ddb1; --warn: #f0c082; --schlecht: #ffa39e; --info: #a6cce4;
  --warn-grund: #f0c08212; --modell-grund: #26372d; --modell-schein: #475841;
  --lage-1: #d6ed9c; --lage-2: #7ccbd6; --lage-3: #f2ad78; --lage-4: #b7a4eb; --lage-5: #e39fc2; --lage-6: #99b9fb;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --grund: #f4f5ee; --flaeche: #fcfcf7; --flaeche-2: #e8ece2;
    --linie: #cdd6c8; --text: #435246; --text-stark: #1c3025; --text-leise: #586b5c;
    --akzent: #315638; --akzent-schwach: #3156380c; --akzent-text: #ffffff;
    --gut: #286239; --warn: #805013; --schlecht: #a13936; --info: #325f7e;
    --warn-grund: #a7691110; --modell-grund: #e2e8d8; --modell-schein: #c9d8bf;
    --lage-1: #315638; --lage-2: #217580; --lage-3: #a6571c; --lage-4: #7759b4; --lage-5: #9b4879; --lage-6: #3c67a8;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --grund: #f4f5ee; --flaeche: #fcfcf7; --flaeche-2: #e8ece2;
  --linie: #cdd6c8; --text: #435246; --text-stark: #1c3025; --text-leise: #586b5c;
  --akzent: #315638; --akzent-schwach: #3156380c; --akzent-text: #ffffff;
  --gut: #286239; --warn: #805013; --schlecht: #a13936; --info: #325f7e;
  --warn-grund: #a7691110; --modell-grund: #e2e8d8; --modell-schein: #c9d8bf;
  --lage-1: #315638; --lage-2: #217580; --lage-3: #a6571c; --lage-4: #7759b4; --lage-5: #9b4879; --lage-6: #3c67a8;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font: var(--groesse-text)/var(--zeilenhoehe) var(--schrift-text); }
a { color: var(--text-stark); text-underline-offset: .22em; }
a:hover { color: var(--akzent); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: var(--fokus) solid var(--akzent); outline-offset: var(--abstand-1); }
.rahmen { width: 100%; max-width: var(--breite-max); margin-inline: auto; padding-inline: var(--rand-seite); }
.kicker { margin: 0; display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--groesse-winzig); font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-leise); }
.knopf { display: inline-flex; justify-content: center; align-items: center; gap: var(--abstand-2); min-height: var(--knopfhoehe); padding: var(--knopf-polster); border: var(--kante) solid transparent; border-radius: var(--radius-klein); background: var(--akzent); color: var(--akzent-text); font-size: var(--groesse-klein); font-weight: 600; text-decoration: none; }
.knopf:hover { filter: brightness(1.08); color: var(--akzent-text); }
.knopf.leise { border-color: var(--linie); color: var(--text-stark); background: transparent; }
.knopf.leise:hover, .knopf[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-schwach); color: var(--text-stark); }
.knopf svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.5; }
.textknopf, .thema-knopf { padding: var(--abstand-1); min-height: var(--knopfhoehe); border: 0; background: transparent; color: var(--text-stark); font-size: var(--groesse-klein); }
.thema-knopf { min-width: var(--knopfhoehe); font-size: var(--groesse-lead); }
.klein { color: var(--text-leise); font-size: var(--groesse-klein); }
.knopfgruppe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.sprung { position: absolute; top: var(--abstand-2); left: var(--rand-seite); transform: translateY(-200%); z-index: 20; padding: var(--abstand-2); background: var(--flaeche); }
.sprung:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }