*, *::before, *::after { box-sizing: border-box; }

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--schrift);
  color-scheme: light dark;
  accent-color: var(--farbe-knopf);
  scrollbar-color: var(--farbe-gestrichelt) var(--farbe-grund);
  scroll-padding-top: calc(var(--hoehe-kopf) + var(--abstand-3));
}

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-size: var(--text-1);
  line-height: var(--zeile);
  text-rendering: optimizeLegibility;
  overflow-x: clip;

  display: flex; flex-direction: column; min-height: 100svh;
}
main { flex: 1 0 auto; }

::selection { background: var(--farbe-linie); color: var(--farbe-text); }

a { color: var(--farbe-text); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dauer-1) var(--ease), text-decoration-color var(--dauer-1) var(--ease); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--farbe-text); outline-offset: 3px; border-radius: var(--radius-1); }
html { scroll-padding-top: var(--hoehe-kopf); }

h1, h2, h3 {
  margin: 0 0 var(--abstand-3);
  font-family: var(--schrift-anzeige); font-weight: 500;
  line-height: var(--zeile-eng); letter-spacing: -0.02em; text-wrap: balance;
}
h1 { font-size: var(--text-5-innen); letter-spacing: -0.025em; }
h2 { font-size: var(--text-4); }
h3 { font-size: var(--text-3); letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0 0 var(--abstand-3); max-width: var(--breite-text); text-wrap: pretty; }
.lead { font-family: var(--schrift-anzeige); font-size: var(--text-3); line-height: 1.38; color: var(--farbe-text-leise); max-width: var(--breite-lead); }
.leise { color: var(--farbe-text-leise); }

.skip {
  position: absolute; left: var(--abstand-3); top: calc(-1 * var(--abstand-7));
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-knopf); color: var(--farbe-knopf-text);
  border-radius: var(--radius-2); z-index: 40;
}
.skip:focus { top: var(--abstand-2); }

.seite {
  max-width: var(--breite-seite);
  margin: 0 auto;
  padding-left: var(--abstand-4);
  padding-right: var(--abstand-4);
}

.kopf {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "mitte links . rechts";
  align-items: center;
  width: 100%; max-width: var(--breite-seite); margin: 0 auto;
  padding: var(--abstand-4) var(--abstand-4) 0;
  pointer-events: none;
}
.glas {
  display: flex; align-items: center; gap: var(--abstand-1);
  min-height: 46px; padding: 0 var(--abstand-1);
  border: 1px solid var(--farbe-glas-linie); border-radius: var(--radius-2);
  background: var(--farbe-glas); box-shadow: var(--schatten-glas);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  pointer-events: auto;
}
.glas-mitte { grid-area: mitte; justify-self: start; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.glas-links { grid-area: links; justify-self: start; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.glas-rechts { grid-area: rechts; justify-self: end; }
.glas ul { display: flex; align-items: center; gap: var(--abstand-1); list-style: none; margin: 0; padding: 0; }
.glas a:not(.knopf) {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--abstand-3);
  border-radius: var(--radius-2);
  color: var(--farbe-text-leise); text-decoration: none; font-size: var(--text-0); font-weight: 500; white-space: nowrap;
  transition: color var(--dauer-1) var(--ease), background-color var(--dauer-1) var(--ease);
}
.glas a:not(.knopf):hover { color: var(--farbe-text); background: var(--farbe-glas-dicht); }
.glas a[aria-current="page"] { color: var(--farbe-text); background: var(--farbe-glas-dicht); }
.glas .knopf { min-height: 38px; padding: 0 var(--abstand-3); font-size: var(--text-0); }
.glas-mitte { padding: var(--abstand-2) var(--abstand-4) var(--abstand-2) var(--abstand-4); }
.glas-mitte a.wortmarke { min-height: 0; padding: 0; font-size: var(--text-1); font-weight: 600; letter-spacing: -0.01em; color: var(--farbe-text); }
.glas-mitte a.wortmarke:hover { background: none; }

.knopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--abstand-4);
  border: 1px solid var(--farbe-knopf); border-radius: var(--radius-2);
  background: var(--farbe-knopf); color: var(--farbe-knopf-text);
  font-weight: 500; text-decoration: none;
  transition: transform var(--dauer-1) var(--ease), background-color var(--dauer-1) var(--ease), border-color var(--dauer-1) var(--ease);
}
.knopf:hover { background: color-mix(in srgb, var(--farbe-knopf) 84%, var(--farbe-blatt)); text-decoration: none; transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(0.985); }
.knopf-klammer { background: transparent; color: var(--farbe-text); border: 1px dashed var(--farbe-gestrichelt); padding: 0 var(--abstand-4); }
.knopf-klammer:hover { background: var(--farbe-flaeche); border-color: var(--farbe-text); }
.knopf-klammer::before, .knopf-klammer::after {
  content: ""; position: absolute; width: 7px; height: 7px; border: 1.5px solid var(--farbe-text);
  transition: transform var(--dauer-2) var(--ease);
}
.knopf-klammer::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.knopf-klammer::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.knopf-klammer:hover::before { transform: translate(-3px, -3px); }
.knopf-klammer:hover::after { transform: translate(3px, 3px); }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin-top: var(--abstand-5); }

.einstieg { padding-top: var(--abstand-6); padding-bottom: var(--abstand-6); }
.einstieg h1 { max-width: 14ch; }
.einstieg-text p:last-child { margin-bottom: 0; }

.einstieg-kompass {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--abstand-5); align-items: center;
  min-height: clamp(560px, calc(100svh - 116px), 760px);
  padding-top: var(--abstand-4); padding-bottom: var(--abstand-6);
}
.einstieg-kompass h1 { font-size: var(--text-5-innen); line-height: 1; max-width: 12ch; margin-bottom: var(--abstand-5); text-wrap: balance; }
.einstieg-kompass .aktionen { margin-top: var(--abstand-5); }

.stand { margin: var(--abstand-4) 0 0; max-width: none; font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.02em; text-wrap: balance; color: var(--farbe-text-leise); }
.klein { font-size: var(--text-0); color: var(--farbe-text-leise); }

.kunst { margin: 0; justify-self: end; width: 100%; max-width: 600px; }
.netz-box { position: relative; }
.netz-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.strahlen, .strahlen-fest { fill: none; stroke-linecap: round; }
.strahlen { stroke: var(--farbe-leise); stroke-width: 0.6; opacity: 0.55; }
.strahlen-fest { stroke: var(--farbe-text-leise); stroke-width: 1; opacity: 0.75; }
.welle, .funken, .druckwelle, .kern { transform-box: view-box; transform-origin: 50% 50%; }
.p-stark { fill: var(--farbe-text); }
.p-mittel { fill: var(--farbe-text-leise); }
.p-leise { fill: var(--farbe-leise); }
.p-blau { fill: var(--farbe-signal-blau); }
.p-violett { fill: var(--farbe-signal-violett); }
.p-magenta { fill: var(--farbe-signal-magenta); }
.p-tuerkis { fill: var(--farbe-signal-tuerkis); }
.p-befund { fill: var(--farbe-warn); }
.druckwelle { fill: none; stroke: var(--farbe-text-leise); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.kern { fill: var(--farbe-text); opacity: 0; }
.funken { opacity: 0; }
.ring-weich { fill: none; stroke: var(--farbe-warn); stroke-opacity: 0.25; stroke-width: 12; transform-box: fill-box; transform-origin: center; }
.ring-fein { fill: none; stroke: var(--farbe-warn); stroke-width: 1.5; }
.verbinder { fill: none; stroke: var(--farbe-warn); stroke-width: 1.2; stroke-dasharray: 3 4; }

.zufluss { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; }
.zf { transform-box: fill-box; transform-origin: center; }
.zf-chip { fill: var(--farbe-blatt); stroke: var(--farbe-linie); stroke-width: 1.2; }
.zf-logo { fill: var(--farbe-text); }

.lg-fg { fill: var(--farbe-text); }
.lg-bg { fill: var(--farbe-blatt); }

.logo-chip { display: inline-grid; place-items: center; width: 100px; height: 36px; margin-right: var(--abstand-3); vertical-align: middle;
  border: 1px solid var(--farbe-linie-blatt); border-radius: var(--radius-2); background: var(--farbe-blatt); }
.logo-chip svg { display: block; width: 76px; height: 20px; }
.logo-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.logo-reihe .logo-chip { width: 92px; margin-right: 0; }
.chip {
  position: absolute; right: 0; top: 2%; margin: 0; white-space: nowrap;
  display: flex; align-items: center; gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-2);
  background: var(--farbe-blatt); color: var(--farbe-text);
  font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--schatten-glas);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-2); background: var(--farbe-warn); }
.kunst figcaption {
  margin: var(--abstand-3) 0 0; max-width: none;
  font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--farbe-text-leise);
}

.formular { display: grid; gap: var(--abstand-4); }
.feld { display: grid; gap: var(--abstand-2); }
.feld label, .wahl legend { font-weight: 600; }
.zusatz { font-weight: 400; color: var(--farbe-text-leise); }
td .zusatz { display: block; font-size: var(--text-0); }
.formular input[type="email"], .formular input[type="text"], .formular select {
  width: 100%; min-height: 48px; padding: 0 var(--abstand-3);
  border: 1px solid var(--farbe-gestrichelt); border-radius: var(--radius-1);
  background: var(--farbe-blatt); color: var(--farbe-text); font: inherit;
  transition: border-color var(--dauer-1) var(--ease);
}
.formular input[type="email"]:hover, .formular input[type="text"]:hover, .formular select:hover { border-color: var(--farbe-text); }
.wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.wahl legend { padding: 0; margin-bottom: var(--abstand-2); }
.wahl-liste { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.chip-wahl, .feld-einwilligung { cursor: pointer; }
.chip-wahl {
  display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; padding: 0 var(--abstand-3);
  border: 1px solid var(--farbe-gestrichelt); border-radius: var(--radius-2);
  transition: border-color var(--dauer-1) var(--ease), background-color var(--dauer-1) var(--ease);
}
.chip-wahl:hover { border-color: var(--farbe-text); }
.chip-wahl:has(input:checked) { border-color: var(--farbe-text); background: var(--farbe-flaeche); }

.chip-wahl input, .feld-einwilligung input { flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--farbe-knopf); }
.feld-einwilligung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--abstand-3); align-items: start; }
.feld-einwilligung input { margin-top: 1px; }
.feld-einwilligung label { font-size: var(--text-0); color: var(--farbe-text-leise); cursor: pointer; }
.feld-einwilligung label a { color: var(--farbe-text); }
.formular button.knopf { justify-self: start; font: inherit; font-weight: 500; cursor: pointer; }
.formular .klein { margin: 0; }

.koeder { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular-bereich .formular { position: relative; }

.blatt {
  background: var(--farbe-blatt); border: 1px solid var(--farbe-linie-blatt);
  border-radius: var(--radius-1); padding: var(--abstand-4);
  box-shadow: var(--schatten-blatt);
}
.blatt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-2); }
.blatt-kopf p { margin: 0; }
.blatt h2 { font-size: var(--text-4-schmal); letter-spacing: -0.015em; line-height: 1.12; margin: 0; }
.blatt > p { color: var(--farbe-text-leise); }
.marke {
  display: inline-block; padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-2); background: var(--farbe-flaeche);
  color: var(--farbe-text-leise); font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.urteil {
  display: grid; gap: var(--abstand-2);
  margin: var(--abstand-3) 0 var(--abstand-2); padding: var(--abstand-3) 0;
  border-top: 1px solid var(--farbe-linie-blatt); border-bottom: 1px solid var(--farbe-linie-blatt);
}
.urteil p { margin: 0; }
.blatt > .urteil:last-child { margin-bottom: 0; border-bottom: 0; }
.urteil p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); }
.urteil-wert {
  display: inline-block; padding: var(--abstand-1) var(--abstand-3);
  border-radius: var(--radius-2); background: var(--farbe-gut-hinter);
  color: var(--farbe-gut); font-weight: 600;
}
.urteil-befund { background: var(--farbe-warn-hinter); color: var(--farbe-warn); }
.urteil-leise { background: var(--farbe-flaeche); color: var(--farbe-text-leise); }

.abschnitt { position: relative; padding-top: var(--abstand-7); padding-bottom: var(--abstand-7); }

.abschnitt + .abschnitt::before, .einstieg + .abschnitt::before, .einstieg-kompass + .abschnitt::before {
  content: ""; position: absolute; top: 0; left: var(--abstand-4); right: var(--abstand-4);
  height: 1px; background: var(--farbe-linie);
}
.einstieg + .abschnitt { padding-top: var(--abstand-6); }
.abschnitt > h2 { margin-bottom: var(--abstand-5); }

.spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abstand-5) var(--abstand-6); }
.spalten > div { border-top: 1px solid var(--farbe-text); padding-top: var(--abstand-3); }
.spalten p { margin-bottom: var(--abstand-3); }

.fluss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-5) var(--abstand-4); counter-reset: schritt; }
.fluss > li { counter-increment: schritt; border-top: 1px solid var(--farbe-text); padding-top: var(--abstand-3); }
.fluss > li::before { content: counter(schritt); display: block; margin-bottom: var(--abstand-2); font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.06em; color: var(--farbe-text-leise); }
.fluss h3 { margin: 0 0 var(--abstand-2); }
.fluss p { margin-bottom: var(--abstand-3); }
.fluss > li > p:last-child { margin-bottom: 0; }

.stand-liste { list-style: none; margin: 0 0 var(--abstand-3); padding: 0; display: grid; gap: var(--abstand-3); }
.stand-liste li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--abstand-3); align-items: baseline; }
.stand-liste .status { justify-self: start; }
.mehr { font-weight: 500; text-decoration: none; }
.mehr::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: var(--abstand-3); position: relative; top: -1px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform var(--dauer-2) var(--ease);
}
.mehr:hover { text-decoration: none; }
.mehr:hover::after { transform: translateX(4px) rotate(45deg); }

.raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--abstand-6); }
.raster > div { border-top: 1px solid var(--farbe-text); padding-top: var(--abstand-3); }
.raster h2, .raster h3 { font-size: var(--text-3); letter-spacing: -0.01em; line-height: 1.2; margin-bottom: var(--abstand-2); }
.raster p:last-child { margin-bottom: 0; }

.zweispaltig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--abstand-6); align-items: start; }
.zweispaltig > h2 { margin-bottom: 0; }
.abschnitt > .zweispaltig { margin-top: var(--abstand-5); }
.abschnitt > .meldung { margin-top: 0; }
.zweispaltig p:last-child { margin-bottom: 0; }
.meldung { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.meldung > div > h2 { margin-bottom: var(--abstand-3); }
.notiz { margin: var(--abstand-5) 0 0; padding-top: var(--abstand-3); border-top: 1px solid var(--farbe-linie); color: var(--farbe-text-leise); }

.schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
.schritte > li {
  counter-increment: schritt; position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--abstand-4);
  padding-bottom: var(--abstand-6);
}
.schritte > li:last-child { padding-bottom: 0; }
.schritte > li::before {
  content: counter(schritt); grid-column: 1; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--farbe-gestrichelt); border-radius: var(--radius-2);
  background: var(--farbe-blatt); font-family: var(--schrift-mono); font-size: var(--text-0);
}
.schritte > li:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 54px; bottom: var(--abstand-2);
  width: 1px; background: var(--farbe-linie);
}
.schritte > li > * { grid-column: 2; }
.schritte > li > h2, .schritte > li > h3 { margin-top: 0; }
.schritte > li > p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: var(--abstand-4) 0; }
th, td { text-align: left; vertical-align: top; padding: var(--abstand-3) var(--abstand-4) var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-linie); }
th { font-family: var(--schrift-mono); font-size: var(--text-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); border-bottom-color: var(--farbe-text); }
td:first-child { font-weight: 600; }
td { text-wrap: pretty; }

.blatt table { margin: var(--abstand-2) 0 0; font-variant-numeric: tabular-nums; }
.blatt th, .blatt td { padding: var(--abstand-2) var(--abstand-3) var(--abstand-2) 0; border-bottom-color: var(--farbe-linie-blatt); }
.blatt th { white-space: nowrap; border-bottom-color: var(--farbe-linie); }
.blatt tr:last-child td { border-bottom: 0; }
.blatt td:first-child { font-weight: 500; }

.status {
  display: inline-block; padding: calc(var(--abstand-1) - 1px) calc(var(--abstand-3) - 1px);
  border: 1px solid transparent; border-radius: var(--radius-2);
  font-size: var(--text-0); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.status-einsatz { background: var(--farbe-gut-hinter); color: var(--farbe-gut); }
.status-pilot { color: var(--farbe-gut); border-color: var(--farbe-gut); }
.status-januar { background: var(--farbe-flaeche); color: var(--farbe-text-leise); }
.status-entwicklung { color: var(--farbe-text-leise); border-color: var(--farbe-gestrichelt); border-style: dashed; }
.status-legende { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-4); margin: var(--abstand-4) 0 0; }
.status-legende > div { border-top: 1px solid var(--farbe-linie); padding-top: var(--abstand-3); }
.status-legende dt { margin: 0 0 var(--abstand-2); }
.status-legende dd { margin: 0; color: var(--farbe-text-leise); font-size: var(--text-0); }
td .status { margin-bottom: var(--abstand-1); }

.nutzen { margin: var(--abstand-4) 0 0; max-width: var(--breite-lead); font-weight: 500; line-height: 1.5; color: var(--farbe-text); }
.nutzen span { display: block; }

.vergleich { margin-top: var(--abstand-5); }
.vergleich td:first-child { color: var(--farbe-text-leise); }
.vergleich td:last-child { font-weight: 500; }
.fragen { margin-top: var(--abstand-5); }
.fragen > p { margin: 0 0 var(--abstand-3); }
.fragen .raster p { margin: 0; font-family: var(--schrift-anzeige); font-size: var(--text-3); line-height: 1.3; }

.module { list-style: none; margin: var(--abstand-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abstand-5) var(--abstand-4); }
.module > li { border-top: 1px solid var(--farbe-text); padding-top: var(--abstand-3); }
.module > li.modul-kern { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--abstand-2) var(--abstand-5); border-top-width: 2px; }
.module > li.modul-kern > :nth-child(1), .module > li.modul-kern > :nth-child(2) { grid-column: 1; }
.module > li.modul-kern > :nth-child(n+3) { grid-column: 2; }
.module h3 { margin: 0; }
.module .rolle { margin: 0 0 var(--abstand-3); font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); }
.module p { margin: 0 0 var(--abstand-3); }
.module .status { display: block; width: fit-content; margin-bottom: var(--abstand-1); }
.module p:last-child { margin-bottom: 0; }
.zusammen { margin-top: var(--abstand-5); max-width: var(--breite-text); }

.demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-5); margin-top: var(--abstand-5); }
.demo > .marke { grid-column: 1 / -1; justify-self: start; margin: 0; }
.demo > .demo-fuss { grid-column: 1 / -1; max-width: none; margin: 0; padding-top: var(--abstand-3); border-top: 1px solid var(--farbe-linie-blatt); }
.demo > div > h3 { font-size: var(--text-3); margin: 0 0 var(--abstand-3); }
.demo > div > h3 span { display: block; margin-bottom: var(--abstand-1); font-family: var(--schrift-mono); font-size: var(--text-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); }
.demo p { color: var(--farbe-text-leise); }
.kennzahlen { margin: 0; display: grid; gap: var(--abstand-3); }
.kennzahlen > div { border-bottom: 1px solid var(--farbe-linie-blatt); padding-bottom: var(--abstand-2); }
.kennzahlen dt { margin: 0; font-size: var(--text-0); color: var(--farbe-text-leise); }
.kennzahlen dd { margin: 0; font-weight: 600; }
.kennzahlen .auffaellig dd { color: var(--farbe-warn); }
.horizonte { margin: 0; display: grid; gap: var(--abstand-3); }
.horizonte > div { border-top: 1px solid var(--farbe-linie-blatt); padding-top: var(--abstand-2); }
.horizonte dt { margin: 0 0 var(--abstand-1); font-family: var(--schrift-mono); font-size: var(--text-mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); }
.horizonte dd { margin: 0; }
.horizonte dd span { display: block; color: var(--farbe-text-leise); font-size: var(--text-0); }
.demo + p, .notiz + p { margin-top: var(--abstand-4); }
.offen-punkt { border-left: 2px solid var(--farbe-warn); padding-left: var(--abstand-3); }

.datenlage { margin-top: var(--abstand-4); }
.datenlage h3 { margin-bottom: var(--abstand-2); }
.datenlage p:last-child { margin-bottom: 0; }

.rechtlich h2 { font-size: var(--text-3); margin: var(--abstand-5) 0 var(--abstand-2); }
.rechtlich h2:first-child { margin-top: 0; }
.rechtlich h3 { font-family: var(--schrift); font-size: var(--text-1); font-weight: 600; letter-spacing: 0; margin: var(--abstand-4) 0 var(--abstand-2); }
.rechtlich p, .rechtlich li { overflow-wrap: anywhere; }
.rechtlich .offen { padding: var(--abstand-3); border: 1px dashed var(--farbe-gestrichelt); border-radius: var(--radius-1); background: var(--farbe-flaeche); }
.rechtlich ul { max-width: var(--breite-text); margin: 0 0 var(--abstand-3); padding-left: var(--abstand-4); }
.rechtlich li { margin-bottom: var(--abstand-2); }

.band { background: var(--farbe-dunkel); color: var(--farbe-dunkel-text); }
.band .seite {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--abstand-5) var(--abstand-6);
  padding-top: var(--abstand-7); padding-bottom: var(--abstand-7);
}
.band h2 { font-size: var(--text-5-innen); margin-bottom: var(--abstand-3); }
.band p { margin: 0; color: var(--farbe-dunkel-leise); font-family: var(--schrift-anzeige); font-size: var(--text-3); line-height: 1.38; max-width: 34ch; }
.band .aktionen { margin-top: 0; }
.band .knopf { background: var(--farbe-dunkel-text); border-color: var(--farbe-dunkel-text); color: var(--farbe-dunkel); }
.band .knopf:hover { background: color-mix(in srgb, var(--farbe-dunkel-text) 86%, var(--farbe-dunkel)); }
.band .knopf-klammer { background: transparent; border-color: var(--farbe-dunkel-leise); color: var(--farbe-dunkel-text); }
.band .knopf-klammer:hover { background: var(--farbe-linie-dunkel); border-color: var(--farbe-dunkel-text); }
.band .knopf-klammer::before, .band .knopf-klammer::after { border-color: var(--farbe-dunkel-text); }

.fuss { background: var(--farbe-dunkel); color: var(--farbe-dunkel-leise); border-top: 1px solid var(--farbe-linie-dunkel); }
.fuss .seite {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: var(--abstand-5) var(--abstand-6);
  padding-top: var(--abstand-6); padding-bottom: var(--abstand-6);
}
.fuss p { margin: 0; color: var(--farbe-dunkel-leise); }
.fuss-titel { margin-bottom: var(--abstand-2); color: var(--farbe-dunkel-text); font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss a { display: inline-block; padding: var(--abstand-1) 0; color: var(--farbe-dunkel-leise); text-decoration: none; }
.fuss a:hover { color: var(--farbe-dunkel-text); text-decoration: underline; }

@keyframes erscheint { from { opacity: 0; transform: translateY(14px); } }

@keyframes birst-leicht { 0% { opacity: 0; transform: scale(0.02); animation-timing-function: var(--ease-knall); } 7% { opacity: 1; } 50% { transform: scale(1.12); animation-timing-function: var(--ease); } 100% { opacity: 1; transform: scale(1); } }
@keyframes birst-mittel { 0% { opacity: 0; transform: scale(0.02); animation-timing-function: var(--ease-knall); } 7% { opacity: 1; } 48% { transform: scale(1.07); animation-timing-function: var(--ease); } 100% { opacity: 1; transform: scale(1); } }
@keyframes birst-schwer { 0% { opacity: 0; transform: scale(0.02); animation-timing-function: var(--ease-knall); } 7% { opacity: 1; } 46% { transform: scale(1.04); animation-timing-function: var(--ease); } 100% { opacity: 1; transform: scale(1); } }
@keyframes druck { 0% { opacity: 0.6; transform: scale(0.04); } 100% { opacity: 0; transform: scale(1); } }
@keyframes blitz { 0% { opacity: 0.55; transform: scale(0.25); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes fliegt { 0% { opacity: 0; transform: scale(0.1); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes atmet { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes ausblenden { to { opacity: 0; } }

@keyframes zf-fall { 0% { opacity: 0; filter: blur(9px); transform: translateY(var(--zf-fall)) scale(var(--zf-gross)) rotate(var(--zf-dreh)); } 14% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
@keyframes zf-ring { 0% { opacity: 1; transform: rotate(0) scale(1); } 66% { opacity: 1; transform: rotate(16deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.45); } 96% { opacity: 1; } 100% { opacity: 0; transform: rotate(72deg) scale(0.03); } }
@keyframes einblenden { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @view-transition { navigation: auto; }
  .kopf { view-transition-name: kopf; }
  ::view-transition-old(root) { animation: ausblenden var(--dauer-2) var(--ease) both; }
  ::view-transition-new(root) { animation: einblenden var(--dauer-2) var(--ease) both; }

  .einstieg > *, .einstieg-text > * { animation: erscheint var(--dauer-3) var(--ease) both; }
  .einstieg-text > :nth-child(2) { animation-delay: 80ms; }
  .einstieg-text > :nth-child(3) { animation-delay: 160ms; }
  .einstieg-kompass .einstieg-text > * { animation-delay: 140ms; }
  .einstieg-kompass .einstieg-text > :nth-child(2) { animation-delay: 220ms; }
  .einstieg-kompass .einstieg-text > :nth-child(3) { animation-delay: 300ms; }
  .einstieg-kompass .einstieg-text > :nth-child(4) { animation-delay: 380ms; }
  .zufluss { animation: zf-ring var(--dauer-zufluss) linear both; }
  .zf { animation: zf-fall var(--dauer-fall) var(--ease-knall) both; }
  .zf-1 { animation-delay: 53ms; --zf-dreh: 23deg; --zf-gross: 3.2; --zf-fall: -459px; }
  .zf-2 { animation-delay: 106ms; --zf-dreh: 24deg; --zf-gross: 3.2; --zf-fall: -488px; }
  .zf-3 { animation-delay: 159ms; --zf-dreh: -40deg; --zf-gross: 3.2; --zf-fall: -517px; }
  .zf-4 { animation-delay: 212ms; --zf-dreh: 33deg; --zf-gross: 3.2; --zf-fall: -546px; }
  .zf-5 { animation-delay: 265ms; --zf-dreh: 34deg; --zf-gross: 3.2; --zf-fall: -455px; }
  .zf-6 { animation-delay: 318ms; --zf-dreh: -30deg; --zf-gross: 3.2; --zf-fall: -484px; }
  .zf-7 { animation-delay: 371ms; --zf-dreh: 43deg; --zf-gross: 3.2; --zf-fall: -513px; }
  .zf-8 { animation-delay: 424ms; --zf-dreh: 44deg; --zf-gross: 3.2; --zf-fall: -542px; }
  .zf-9 { animation-delay: 477ms; --zf-dreh: -20deg; --zf-gross: 3.2; --zf-fall: -451px; }
  .zf-10 { animation-delay: 530ms; --zf-dreh: 53deg; --zf-gross: 3.2; --zf-fall: -480px; }
  .zf-11 { animation-delay: 583ms; --zf-dreh: -47deg; --zf-gross: 3.2; --zf-fall: -509px; }
  .zf-12 { animation-delay: 636ms; --zf-dreh: 26deg; --zf-gross: 3.2; --zf-fall: -538px; }
  .zf-13 { animation-delay: 689ms; --zf-dreh: 27deg; --zf-gross: 3.2; --zf-fall: -447px; }
  .zf-14 { animation-delay: 42ms; --zf-dreh: -37deg; --zf-gross: 3.2; --zf-fall: -476px; }
  .zf-15 { animation-delay: 95ms; --zf-dreh: 36deg; --zf-gross: 3.2; --zf-fall: -505px; }
  .zf-16 { animation-delay: 148ms; --zf-dreh: 37deg; --zf-gross: 3.2; --zf-fall: -534px; }
  .zf-17 { animation-delay: 201ms; --zf-dreh: -27deg; --zf-gross: 3.2; --zf-fall: -443px; }
  .zf-18 { animation-delay: 254ms; --zf-dreh: 46deg; --zf-gross: 3.2; --zf-fall: -472px; }
  .zf-19 { animation-delay: 307ms; --zf-dreh: 47deg; --zf-gross: 3.2; --zf-fall: -501px; }
  .zf-20 { animation-delay: 360ms; --zf-dreh: 19deg; --zf-gross: 3.2; --zf-fall: -530px; }
  .zf-21 { animation-delay: 337ms; --zf-dreh: 73deg; --zf-gross: 2.2; --zf-fall: -491px; }
  .zf-22 { animation-delay: 434ms; --zf-dreh: -34deg; --zf-gross: 2.2; --zf-fall: -382px; }
  .zf-23 { animation-delay: 531ms; --zf-dreh: 19deg; --zf-gross: 2.2; --zf-fall: -423px; }
  .zf-24 { animation-delay: 628ms; --zf-dreh: 72deg; --zf-gross: 2.2; --zf-fall: -464px; }
  .zf-25 { animation-delay: 725ms; --zf-dreh: -35deg; --zf-gross: 2.2; --zf-fall: -505px; }
  .zf-26 { animation-delay: 202ms; --zf-dreh: 18deg; --zf-gross: 2.2; --zf-fall: -396px; }
  .zf-27 { animation-delay: 299ms; --zf-dreh: 71deg; --zf-gross: 2.2; --zf-fall: -437px; }
  .zf-28 { animation-delay: 396ms; --zf-dreh: -36deg; --zf-gross: 2.2; --zf-fall: -478px; }
  .zf-29 { animation-delay: 493ms; --zf-dreh: 17deg; --zf-gross: 2.2; --zf-fall: -519px; }
  .zf-30 { animation-delay: 590ms; --zf-dreh: 70deg; --zf-gross: 2.2; --zf-fall: -410px; }
  .zf-31 { animation-delay: 687ms; --zf-dreh: -37deg; --zf-gross: 2.2; --zf-fall: -451px; }
  .zf-32 { animation-delay: 164ms; --zf-dreh: 16deg; --zf-gross: 2.2; --zf-fall: -492px; }
  .welle-leicht { animation: birst-leicht var(--dauer-3) linear var(--dauer-zufluss) both; }
  .welle-mittel { animation: birst-mittel calc(var(--dauer-3) * 1.25) linear calc(var(--dauer-zufluss) + 30ms) both; }
  .welle-schwer { animation: birst-schwer calc(var(--dauer-3) * 1.5) linear calc(var(--dauer-zufluss) + 60ms) both; }

  .druckwelle-1 { animation: druck calc(var(--dauer-3) * 1.2) var(--ease-knall) var(--dauer-zufluss) forwards; }
  .druckwelle-2 { animation: druck calc(var(--dauer-3) * 1.2) var(--ease-knall) calc(var(--dauer-zufluss) + 140ms) forwards; }
  .kern { animation: blitz var(--dauer-2) var(--ease-knall) calc(var(--dauer-zufluss) - 40ms) forwards; }
  .funken-1 { animation: fliegt var(--dauer-3) var(--ease-knall) var(--dauer-zufluss) forwards; }
  .funken-2 { animation: fliegt calc(var(--dauer-3) * 1.3) var(--ease-knall) calc(var(--dauer-zufluss) + 40ms) forwards; }
  .funken-3 { animation: fliegt calc(var(--dauer-3) * 1.6) var(--ease-knall) calc(var(--dauer-zufluss) + 90ms) forwards; }
  .ring-weich { animation: atmet var(--dauer-atem) ease-in-out calc(var(--dauer-zufluss) + 1500ms) infinite; }
  .chip, .kunst figcaption { animation: erscheint var(--dauer-3) var(--ease) calc(var(--dauer-zufluss) + 1000ms) both; }
  .verbinder { animation: einblenden var(--dauer-3) var(--ease) calc(var(--dauer-zufluss) + 900ms) both; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes taucht-auf { from { opacity: 0; transform: translateY(28px); } }
    @keyframes treibt { to { transform: translateY(-56px); } }
    @keyframes verdichtet { to { background: var(--farbe-glas-dicht); box-shadow: var(--schatten-glas-dicht); } }
    .abschnitt > h2, .spalten > div, .raster > div, .meldung > *, .schritte > li, .fluss > li, .abschnitt > table, .zweispaltig > * {
      animation: taucht-auf linear both; animation-timeline: view(); animation-range: entry 0% entry 32%;
    }
    .kunst { animation: treibt linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .glas { animation: verdichtet linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
    .band .seite > * { animation: taucht-auf linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .spalten > div:nth-child(2), .fluss > li:nth-child(2) { animation-range: entry 14% entry 46%; }
    .spalten > div:nth-child(3), .fluss > li:nth-child(3) { animation-range: entry 28% entry 60%; }
    .fluss > li:nth-child(4) { animation-range: entry 42% entry 74%; }

    .blatt tbody tr { animation: einblenden linear both; animation-timeline: view(); animation-range: entry 6% entry 40%; }
    .blatt tbody tr:nth-child(2) { animation-range: entry 16% entry 50%; }
    .blatt tbody tr:nth-child(3) { animation-range: entry 26% entry 60%; }
    .urteil-wert { animation: einblenden linear both; animation-timeline: view(); animation-range: entry 40% entry 90%; }
  }
}

.abschnitt.rechtlich > * { animation: none; }

@media (prefers-reduced-motion: reduce), print {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .kopf { position: static; }
  .band, .fuss { background: none; color: var(--farbe-text); border-top: 1px solid var(--farbe-linie); }
  .band p, .fuss p, .fuss a, .fuss-titel { color: var(--farbe-text); }
  .band .knopf, .band .knopf-klammer { background: none; color: var(--farbe-text); border-color: var(--farbe-text); }
}

@media (max-width: 960px) {
  .einstieg-kompass { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-6); min-height: 0; }
  .kunst { justify-self: center; max-width: 520px; }
  .zweispaltig, .meldung { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-4); }
  .fuss .seite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1100px) {

  .kopf { position: static; max-width: none; grid-template-columns: auto 1fr; grid-template-areas: "mitte rechts" "links links"; gap: var(--abstand-2) var(--abstand-3); padding: var(--abstand-3) var(--abstand-4) 0; }
  .glas-mitte, .glas-links { border-radius: var(--radius-2); margin-left: 0; }
  .glas-mitte { justify-self: start; }
  .glas-links { justify-self: stretch; justify-content: center; }
  .glas-links ul { flex-wrap: wrap; justify-content: center; row-gap: 0; }
  .glas-links a:not(.knopf) { padding: 0 var(--abstand-2); font-size: var(--text-0); white-space: nowrap; }
}

@media (max-width: 820px) {
  .glas-rechts .knopf { display: none; }
  html { scroll-padding-top: var(--abstand-5); }
}

@media (max-width: 960px) {
  .fluss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module > li.modul-kern { grid-template-columns: minmax(0, 1fr); }
  .module > li.modul-kern > :nth-child(n) { grid-column: 1; }
  .demo { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-5); }
  .status-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .spalten, .raster { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-5); }
  .fuss .seite { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-4); }
}

@media (max-width: 360px) {
  .glas-links ul { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .seite, .kopf { padding-left: var(--abstand-3); padding-right: var(--abstand-3); }
  .abschnitt + .abschnitt::before, .einstieg + .abschnitt::before, .einstieg-kompass + .abschnitt::before { left: var(--abstand-3); right: var(--abstand-3); }
  h1, .einstieg-kompass h1 { font-size: var(--text-5-schmal); }
  h2, .band h2 { font-size: var(--text-4-schmal); }
  .einstieg { padding-top: var(--abstand-5); padding-bottom: var(--abstand-5); }
  .einstieg-kompass { padding-top: var(--abstand-3); padding-bottom: var(--abstand-5); }
  .einstieg-kompass .aktionen { margin-top: var(--abstand-5); }
  .einstieg + .abschnitt { padding-top: var(--abstand-5); }
  .abschnitt { padding-top: var(--abstand-6); padding-bottom: var(--abstand-6); }
  .band .seite { padding-top: var(--abstand-6); padding-bottom: var(--abstand-6); }
  .lead, .band p { font-size: var(--text-2); }
  .chip { top: -9%; }
  .fluss { grid-template-columns: minmax(0, 1fr); }
  .module { grid-template-columns: minmax(0, 1fr); }
  .status-legende { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-3); }
  .stand-liste li { grid-template-columns: minmax(0, 1fr); gap: var(--abstand-2); }
  .schritte > li { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--abstand-3); }
  .schritte > li::before { width: 36px; height: 36px; }
  .schritte > li:not(:last-child)::after { left: 18px; top: 46px; }
  .blatt { padding: var(--abstand-3); }

  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { display: block; padding: var(--abstand-3) 0; border-bottom: 1px solid var(--farbe-linie); }
  .blatt tr:last-child { border-bottom: 0; }

  .blatt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--abstand-3); }
  .blatt td:first-child { grid-column: 1 / -1; }
  .blatt td[data-spalte]::before { display: none; }
  td { display: block; padding: var(--abstand-1) 0; border-bottom: 0; }
  td[data-spalte]:not(:first-child)::before {
    content: attr(data-spalte); display: block;
    font-family: var(--schrift-mono); font-size: var(--text-mono); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--farbe-text-leise);
  }
}