@charset "utf-8";
:root {

  --mid: #05164D;
  --mid-soft: #243F9B;
  --amb: #FFC247;
  --amb-active: #E5A62E;
  --amb-soft: #FFE9B8;
  --white: #FFFFFF;
  --surf: #EAF0FA;
  --surf-mid: #DCE7F9;
  --surf-dark: #C8DCF9;
  --ink: #0B1A44;
  --body: #25335C;
  --muted: #56658C;
  --kontext: #3D4E82;
  --border: #A9C0EA;
  --linie: #5F86C9;
  --linie-neben: #8FB0E6;
  --border-dark: #5F86C9;
  --silver: #D8E0F0;

  --r-gross: 8px;
  --r-karte: 6px;
  --r-klein: 4px;
  --head: "Inter Tight", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", "Helvetica Neue", Arial, sans-serif;

  --col-text: 620px;
  --col-gutter: 40px;
  --col-side: 380px;
  --col-content: 1040px;

  --s-xxs: 4px;  --s-xs: 8px;   --s-sm: 12px;  --s-md: 16px;
  --s-lg: 24px;  --s-xl: 32px;  --s-xxl: 48px; --s-xxxl: 64px;
  --s-section: 96px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.50;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

a.verweis { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.verweis:hover { text-decoration-color: var(--amb); }

:focus-visible { outline: 3px solid var(--mid); outline-offset: 2px; }
.flaeche--dunkel :focus-visible, .hero :focus-visible { outline-color: var(--amb); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amb); color: var(--mid); padding: var(--s-sm) var(--s-lg);
  font-weight: 700;
}
.sprungmarke:focus { left: 0; }

.kontext {
  font-family: var(--text);
  font-size: 12px; font-weight: 600; line-height: 1.40;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kontext);
  margin: 0 0 var(--s-sm);
}
.flaeche--dunkel .kontext, .hero .kontext { color: var(--silver); }

h1, .ebene-1 {
  font-family: var(--head);
  font-size: 68px; font-weight: 700; line-height: 1.02; letter-spacing: -1.2px;
  color: var(--ink);
  margin: 0 0 var(--s-lg);
  text-wrap: balance;
}
h2, .ebene-2 {
  font-family: var(--head);

  font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 var(--s-lg);
  text-wrap: balance;
}
h3, .ebene-3 {
  font-family: var(--text);
  font-size: 21px; font-weight: 700; line-height: 1.30;
  color: var(--ink);

  margin: var(--s-xxl) 0 var(--s-md);
}
.flaeche--dunkel h1, .flaeche--dunkel h2, .flaeche--dunkel h3,
.hero h1, .hero h2, .hero h3 { color: var(--white); }

.lead {
  font-family: var(--text);
  font-size: 22px; font-weight: 400; line-height: 1.45;
  margin: 0 0 var(--s-lg);
}

p, li {
  font-size: 18px; font-weight: 400; line-height: 1.50;
  margin: 0 0 var(--s-md);
}
.flaeche--dunkel p, .flaeche--dunkel li, .flaeche--dunkel .lead,
.hero p, .hero li, .hero .lead { color: var(--white); }

ul.liste { margin: 0 0 var(--s-md); padding-left: var(--s-lg); }
ul.liste li { margin-bottom: var(--s-xs); }

strong, b { font-weight: 700; color: inherit; }

.quelle {
  font-size: 13px; font-weight: 400; line-height: 1.45;
  color: var(--muted);
  margin: 0 0 var(--s-lg);
}
.flaeche--dunkel .quelle, .hero .quelle, .hero figcaption { color: var(--silver); }

.wrap {
  max-width: var(--col-content);
  margin: 0 auto;
  padding: 0 var(--s-lg);
}

.satz {
  display: grid;
  grid-template-columns: var(--col-text) var(--col-side);
  column-gap: var(--col-gutter);
  align-items: start;
}
.satz > * { grid-column: 1; min-width: 0; }

.satz > .neben { grid-column: 2; }

.satz > .voll { grid-column: 1 / -1; }

.signallinie {
  width: 48px; height: 4px; background: var(--amb);
  margin: 0 0 var(--s-lg); border: 0;
}

.plakette {
  display: inline-block;
  background: var(--amb); color: var(--mid);
  padding: 6px 12px; border-radius: var(--r-klein);
  font-family: var(--text);
  font-size: 12px; font-weight: 700; line-height: 1.40;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.plakettenzeile { display: flex; align-items: baseline; gap: var(--s-md); flex-wrap: wrap; margin: var(--s-lg) 0 0; }
.plakettenzeile p { margin: 0; flex: 1 1 340px; }

.kette { position: relative; }

.kette::after {
  content: ""; position: absolute; left: 50%; bottom: -38px;
  width: 2px; height: 28px; background: var(--mid);
  transform: translateX(-50%);
}
.kette::before {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--s-xxl));
  width: 0; height: 0; transform: translateX(-50%);
  border-top: 11px solid var(--mid);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
}

.kette--quer::after {
  content: ""; position: absolute; top: 50%; left: auto; bottom: auto;
  right: -22px; width: 14px; height: 2px; background: var(--mid);
  transform: translateY(-50%);
}
.kette--quer::before {
  content: ""; position: absolute; top: 50%; left: auto; bottom: auto;
  right: -24px; width: 0; height: 0; transform: translateY(-50%);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 10px solid var(--mid);
}

.kette--schwelle::after { background: var(--amb); width: 3px; }
.kette--quer.kette--schwelle::after { height: 3px; }
.kette--schwelle::before { border-top-color: var(--amb); }
.kette--quer.kette--schwelle::before { border-top-color: transparent; border-left-color: var(--amb); }
.flaeche--dunkel .kette::after { background: var(--silver); }
.flaeche--dunkel .kette::before { border-top-color: var(--silver); }
.flaeche--dunkel .kette--quer::before { border-top-color: transparent; border-left-color: var(--silver); }
.flaeche--dunkel .kette--schwelle::after { background: var(--amb); }
.flaeche--dunkel .kette--schwelle::before { border-top-color: var(--amb); }
.trennlinie {
  border: 0; border-top: 1px solid var(--border);
  margin: var(--s-xxl) 0;
}
.flaeche--dunkel .trennlinie { border-top-color: var(--border-dark); }

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.kopf__innen {
  max-width: var(--col-content); margin: 0 auto; padding: 0 var(--s-lg);
  height: 72px; display: flex; align-items: center; gap: var(--s-lg);
}
.wortmarke {
  font-family: var(--head); font-weight: 700; font-size: 21px;
  letter-spacing: 0.10em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.wortmarke span {
  display: block; font-family: var(--text); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-top: 2px;
}
.kopf nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-lg); }
.kopf nav a {
  font-size: 18px; font-weight: 400; color: var(--ink); text-decoration: none;
  padding: var(--s-xs) 0;
}
.kopf nav a:hover { color: var(--muted); }
.kopf nav a[aria-current="page"] { font-weight: 700; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 24px; border-radius: var(--r-karte);
  font-family: var(--text); font-size: 18px; font-weight: 700; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.knopf--primaer { background: var(--amb); color: var(--mid); }
.knopf--primaer:hover, .knopf--primaer:active { background: var(--amb-active); }
.knopf--sekundaer { background: transparent; color: var(--ink); border-color: var(--ink); }
.flaeche--dunkel .knopf--sekundaer, .hero .knopf--sekundaer { color: var(--white); border-color: var(--white); }
.knopf--klein { min-height: 40px; padding: 8px 16px; }

.zitat {
  border-left: 3px solid var(--amb);
  padding: var(--s-xs) 0 var(--s-xs) var(--s-lg);
  margin: 0 0 var(--s-xl);
}

.zitat p {
  font-family: var(--head);
  font-size: 26px; font-weight: 400; line-height: 1.30;
  color: var(--ink);
  margin: 0 0 var(--s-xs);
}
.flaeche--dunkel .zitat p, .hero .zitat p { color: var(--white); }

.zitat .quelle {
  font-family: var(--text);
  font-size: 13px; font-weight: 400; line-height: 1.45;
  color: var(--muted);
  margin: var(--s-md) 0 0;
}
.flaeche--dunkel .zitat .quelle, .hero .zitat .quelle { color: var(--verlauf-text-zweit); }

.erklaerung {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r-gross);
  padding: var(--s-lg);
  margin: 0 0 var(--s-lg);
}
.erklaerung p {
  font-size: 15px; font-weight: 400; line-height: 1.50;
  color: var(--body); margin: 0;
}

.erklaerung p + p { margin-top: var(--s-sm); }
.erklaerung .kontext { color: var(--kontext); }
.flaeche--dunkel .erklaerung, .hero .erklaerung {
  background: var(--mid-soft); border-color: var(--border-dark);
}
.flaeche--dunkel .erklaerung p, .hero .erklaerung p { color: var(--white); }
.flaeche--dunkel .erklaerung .kontext, .hero .erklaerung .kontext { color: var(--silver); }

.neben figure { margin: 0 0 var(--s-lg); }
figcaption { max-width: var(--col-text); }
.neben figcaption { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: var(--s-xs); }

.callout {
  background: var(--amb-soft);
  color: var(--ink);
  border-left: 4px solid var(--amb);
  border-radius: var(--r-gross);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}
.callout p { color: var(--ink); margin: 0; }
.callout p + p { margin-top: var(--s-sm); }
.callout .kontext { color: var(--kontext); }
.flaeche--dunkel .callout { background: var(--mid-soft); }
.flaeche--dunkel .callout p { color: var(--white); }
.flaeche--dunkel .callout .kontext { color: var(--silver); }

.kennzahlen { display: grid; grid-template-columns: 1fr; gap: var(--s-md); margin: 0 0 var(--s-lg); }
.kennzahl__kopf { display: flex; align-items: baseline; gap: var(--s-md); }
.kennzahl { background: var(--surf); border-radius: var(--r-gross); padding: var(--s-lg); border-top: 4px solid transparent; }

.kennzahl--markiert { border-top-color: var(--amb); }
.kennzahl__wert {
  font-family: var(--head); font-size: 52px; font-weight: 700; line-height: 1.08;
  letter-spacing: -0.8px;
  color: var(--ink); margin: 0 0 var(--s-xs);
}
.kennzahl p { margin: 0 0 var(--s-sm); }
.kennzahl .quelle { margin: 0; }
.flaeche--dunkel .kennzahl { background: var(--mid-soft); }
.flaeche--dunkel .kennzahl__wert { color: var(--white); }

.ctaband { text-align: left; }
.ctaband .knopfreihe { margin-top: var(--s-lg); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--s-md); align-items: center; }

.fuss {
  background: var(--surf);
  border-top: 1px solid var(--border);
  padding: var(--s-xxl) 0;
}
.fuss__gitter { display: grid; grid-template-columns: var(--col-text) var(--col-side); column-gap: var(--col-gutter); }

.fuss__rueckweg {
  display: flex; gap: var(--s-md); flex-wrap: wrap;
  margin-top: var(--s-xxl); padding-top: var(--s-lg);
  border-top: 1px solid var(--border);
}
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { font-size: 18px; margin: 0 0 var(--s-xs); }

.tabelle { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-lg); }
.tabelle th {
  font-family: var(--text); font-size: 12px; font-weight: 600; line-height: 1.40;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  text-align: left; vertical-align: bottom;
  padding: 0 var(--s-lg) var(--s-sm) 0;
  border-bottom: 1px solid var(--border);
}
.tabelle td {
  font-size: 18px; line-height: 1.50; vertical-align: top;
  padding: var(--s-lg) var(--s-lg) var(--s-lg) 0;
  border-bottom: 1px solid var(--border);
}
.tabelle tr > *:last-child { padding-right: 0; }
.tabelle td strong { display: block; margin-bottom: var(--s-xxs); }
.tabellenhuelle { overflow-x: auto; }

.faq { margin: 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--s-md);
  padding: var(--s-lg) 0; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; flex: 1; }
.faq summary:hover h3 { color: var(--mid-soft); }
.faq__zeichen {
  flex: 0 0 auto; width: 28px; height: 28px; margin-top: 2px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-klein);
  position: relative;
}
.faq__zeichen::before, .faq__zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--mid); transform: translate(-50%, -50%);
}
.faq__zeichen::before { width: 12px; height: 2px; }
.faq__zeichen::after  { width: 2px; height: 12px; }
.faq details[open] .faq__zeichen { background: var(--amb); border-color: var(--amb); }
.faq details[open] .faq__zeichen::after { display: none; }
.faq details > p { margin: 0 0 var(--s-lg); padding-right: 44px; }
.faq summary:focus-visible { outline: 3px solid var(--mid); outline-offset: 2px; }

.modul { margin: var(--s-xxl) 0 0; }

.modul__gitter { display: grid; gap: var(--s-lg); }
.modul__gitter--2 { grid-template-columns: repeat(2, minmax(300px, 1fr)); }

.modul__gitter--4 { grid-template-columns: repeat(4, 1fr); }

.modul__reihe { display: grid; gap: var(--s-md); }

.modul__reihe.modul__reihe--kette { gap: var(--s-xxl); }

.karte {
  background: var(--surf);
  border-top: 2px solid var(--border);
  border-radius: var(--r-karte);
  padding: var(--s-lg);
  display: flex; flex-direction: column;
}
.karte--markiert { border-top-color: var(--amb); }

.flaeche--ruhig .karte { background: var(--white); }
.karte--dunkel { background: var(--mid); border-top-color: var(--amb); color: var(--white); }

.flaeche--dunkel .karte { background: var(--mid-soft); border-top-color: var(--border-dark); }
.flaeche--dunkel .karte .karte__titel { color: var(--white); }
.flaeche--dunkel .karte .quelle { color: var(--silver); }
.flaeche--dunkel .karte .kontext { color: var(--silver); }
.flaeche--dunkel .karte--markiert { border-top-color: var(--amb); }
.flaeche--dunkel .karte--dunkel { background: var(--mid-soft); }
.flaeche--ruhig .karte--dunkel, .flaeche .karte--dunkel { background: var(--mid); }
.karte--dunkel .kontext { color: var(--silver); }
.karte__titel {
  font-family: var(--text); font-size: 21px; font-weight: 700; line-height: 1.30;
  color: var(--ink); margin: 0 0 var(--s-sm);
}
.karte--dunkel .karte__titel { color: var(--white); }
.karte p { font-size: 18px; margin: 0 0 var(--s-md); }
.karte--dunkel p { color: var(--white); }

.karte .quelle {
  margin: auto 0 0;
  padding-top: var(--s-md);
  border-top: 1px solid var(--border);
}
.karte--dunkel .quelle, .flaeche--dunkel .karte .quelle { border-top-color: var(--border-dark); }
.karte .plakettenzeile { margin-top: auto; }
.karte .plakettenzeile .quelle { border-top: 0; padding-top: 0; }
.karte--dunkel .quelle { color: var(--silver); }

.kanal { padding: var(--s-lg); }

.kanal--hell { background: var(--surf); color: var(--body); }
.flaeche--dunkel .kanal--hell p,
.flaeche--dunkel .kanal--hell strong,
.flaeche--dunkel .kanal--hell li { color: var(--body); }
.flaeche--dunkel .kanal--hell .kanal__titel { color: var(--ink); }
.flaeche--dunkel .kanal--hell .kontext { color: var(--kontext); }
.kanal--hell .kanal__punkt + .kanal__punkt { border-top-color: var(--border); }
.kanal--hell .kanal__ergebnis { border-top-color: var(--border); }
.kanal--dunkel { background: var(--mid); color: var(--white); }
.kanal__titel {
  font-family: var(--head); font-size: 26px; font-weight: 700; line-height: 1.22;
  color: var(--ink); margin: 0 0 var(--s-lg);
}
.kanal--dunkel .kanal__titel { color: var(--white); }
.kanal__punkt { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-md); padding: var(--s-md) 0; }
.kanal__punkt + .kanal__punkt { border-top: 1px solid var(--border); }
.kanal--dunkel .kanal__punkt + .kanal__punkt { border-top-color: var(--border-dark); }
.marke {
  width: 22px; height: 22px; border-radius: var(--r-klein); margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.marke--ja { background: var(--mid); color: var(--white); }

.marke--nein { background: var(--amb); position: relative; }
.marke--nein::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; background: var(--mid);
  transform: translate(-50%, -50%);
}
.kanal__punkt strong { display: block; margin-bottom: var(--s-xxs); }
.kanal__punkt p { font-size: 18px; margin: 0; }
.kanal--dunkel .kanal__punkt p { color: var(--white); }
.kanal__ergebnis { margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--border); }
.kanal--dunkel .kanal__ergebnis { border-top-color: var(--border-dark); }
.kanal__ergebnis p { font-size: 18px; margin: 0; }

.bildunterschrift { margin-top: var(--s-md); }

.flaeche { padding: var(--s-section) 0; }
.flaeche--dunkel { background: var(--mid); color: var(--white); }
.flaeche--ruhig { background: var(--surf); }
.flaeche--eng { padding: var(--s-xxl) 0; }

.hero {
  background: var(--mid); color: var(--white);
  padding: var(--s-section) 0;
  min-height: 680px;
  display: flex; align-items: center;
}

.hero__inhalt { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: 68px; }
.hero .lead { max-width: var(--col-text); }
.hero .knopfreihe { margin-top: var(--s-lg); }

.hero .hirn-partikel__controls { right: var(--s-lg); bottom: var(--s-lg); }

.hero--unterseite { min-height: 0; padding: var(--s-xxl) 0 var(--s-section); }

.gestaffelt { animation: auftritt 900ms cubic-bezier(0.2, 0, 0, 1) 300ms both; }
@keyframes auftritt {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gestaffelt { animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1103px) {

  .satz, .fuss__gitter {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  }
  .hero .lead { max-width: none; }
}

@media (max-width: 1023px) {
  .hero h1 { font-size: 52px; letter-spacing: -0.8px; }
}

@media (max-width: 767px) {

  .satz, .fuss__gitter { display: block; }
  .satz > .neben { margin-top: var(--s-lg); }
  .modul__gitter--2, .modul__gitter--4 { grid-template-columns: 1fr; }

  .modul__gitter--4 { gap: var(--s-xxl); }
  .kette--quer::after {
    top: auto; right: auto; left: 50%; bottom: -38px;
    width: 2px; height: 28px; transform: translateX(-50%);
  }
  .kette--quer::before {
    top: auto; right: auto; left: 50%; bottom: calc(-1 * var(--s-xxl));
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-top: 11px solid var(--mid); transform: translateX(-50%);
  }
  .kette--quer.kette--schwelle::before { border-top-color: var(--amb); border-left-color: transparent; }

  h1, .ebene-1, .hero h1 { font-size: 40px; letter-spacing: -0.6px; }
  h2, .ebene-2 { font-size: 26px; }
  h3, .ebene-3 { font-size: 20px; }
  .lead { font-size: 19px; }
  body, p, li, .kanal__punkt p, .karte p, .tabelle td, .kopf nav a, .fuss li { font-size: 17px; }
  .zitat p { font-size: 23px; }
  .kennzahl__wert { font-size: 36px; }
  .kanal__titel { font-size: 23px; }

  .flaeche { padding: var(--s-xxl) 0; }
  .hero { padding: var(--s-xxl) 0; min-height: 560px; }
  .hero .hirn-partikel__controls { right: var(--s-md); bottom: var(--s-md); }

  .kopf__innen { height: auto; padding: var(--s-sm) var(--s-md); flex-wrap: wrap; row-gap: var(--s-sm); }
  .kopf nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: var(--s-md); }
  .kopf { position: static; }

  .tabelle th { display: none; }
  .tabelle td { display: block; border-bottom: 0; padding: var(--s-xs) 0; }
  .tabelle td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    font-size: 12px; font-weight: 600; line-height: 1.40;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
    margin-bottom: var(--s-xxs);
  }
  .tabelle tr { display: block; border-bottom: 1px solid var(--border); padding: var(--s-md) 0; }
  .tabelle tr:first-child { padding-top: 0; }
}

@media (min-width: 1440px) {
  .wrap, .kopf__innen { max-width: var(--col-content); }
}

@media print {
  .kopf, .hirn-partikel, .knopf { display: none; }
  .flaeche--dunkel { background: var(--white); color: var(--body); }
  .flaeche--dunkel h1, .flaeche--dunkel h2, .flaeche--dunkel h3 { color: var(--ink); }
  .flaeche--dunkel p, .flaeche--dunkel li, .flaeche--dunkel .lead { color: var(--body); }
}

:root {
  --core-hell: #3257BC;
  --core-dunkel: #05164D;
  --blau-licht: #5291ED;
  --blau-mittel: #243F9B;

  --verlauf-flaeche: linear-gradient(135deg, #3257BC 0%, #05164D 100%);

  --verlauf-kasten: linear-gradient(rgba(5, 22, 77, 0.42), rgba(5, 22, 77, 0.42));

  --verlauf-linie: #6E8AD8;
  --verlauf-text-zweit: #D8E0F0;
}

.hero,
.flaeche--dunkel,
.kanal--dunkel,
.karte--dunkel,
.flaeche--ruhig .karte--dunkel,
.flaeche .karte--dunkel {
  background-color: var(--core-hell);
  background-image: var(--verlauf-flaeche);
}

.flaeche--dunkel .karte,
.flaeche--dunkel .karte--dunkel,
.flaeche--dunkel .callout,
.flaeche--dunkel .kennzahl,
.flaeche--dunkel .erklaerung,

.flaeche--dunkel .kanal--dunkel,
.hero .erklaerung {
  background-color: transparent;
  background-image: var(--verlauf-kasten);
}

.flaeche--dunkel .trennlinie,
.flaeche--dunkel .karte,
.flaeche--dunkel .erklaerung,
.hero .erklaerung { border-color: var(--verlauf-linie); }

.flaeche--dunkel .karte { border-top-color: var(--verlauf-linie); }
.karte--dunkel .quelle,
.flaeche--dunkel .karte .quelle,
.kanal--dunkel .kanal__punkt + .kanal__punkt,
.kanal--dunkel .kanal__ergebnis { border-top-color: var(--verlauf-linie); }

.karte--dunkel,
.flaeche--dunkel .karte--markiert { border-top-color: var(--amb); }

.flaeche--dunkel .kontext, .hero .kontext,
.flaeche--dunkel .quelle, .hero .quelle, .hero figcaption,
.flaeche--dunkel .erklaerung .kontext, .hero .erklaerung .kontext,
.flaeche--dunkel .callout .kontext,
.flaeche--dunkel .karte .quelle,
.flaeche--dunkel .karte .kontext,
.karte--dunkel .kontext,
.karte--dunkel .quelle { color: var(--verlauf-text-zweit); }

.flaeche--dunkel .kette::after { background: var(--verlauf-text-zweit); }
.flaeche--dunkel .kette::before { border-top-color: var(--verlauf-text-zweit); }
.flaeche--dunkel .kette--quer::before {
  border-top-color: transparent;
  border-left-color: var(--verlauf-text-zweit);
}
.flaeche--dunkel .kette--schwelle::after { background: var(--amb); }
.flaeche--dunkel .kette--schwelle::before { border-top-color: var(--amb); }

.hero .neben figcaption { color: var(--verlauf-text-zweit); }

.hirn-stage { --hirn-scrim-rgb: 28, 55, 133; }

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .hirn-stage::before {
    background: var(--verlauf-flaeche);
    -webkit-mask-image: linear-gradient(var(--hirn-scrim-dir),
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.808) 30%,
      rgba(0, 0, 0, 0.447) 46%,
      rgba(0, 0, 0, 0) var(--hirn-scrim-end));
    mask-image: linear-gradient(var(--hirn-scrim-dir),
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.808) 30%,
      rgba(0, 0, 0, 0.447) 46%,
      rgba(0, 0, 0, 0) var(--hirn-scrim-end));
  }
}

.hirn-partikel__btn { border-color: #A3B2DC; }
.hirn-partikel__btn:hover,
.hirn-partikel__btn:focus-visible { border-color: #FFFFFF; }

:root {
  --tint-hell: #C8DCF9;
  --tint-dunkel: #A7C7F6;
  --verlauf-tint: linear-gradient(135deg, #C8DCF9 0%, #A7C7F6 100%);
  --tint-kontext: #3D4E82;

  --tint-linie: #5F86C9;
}

.erklaerung,
.kennzahl {
  background-color: var(--tint-hell);
  background-image: var(--verlauf-tint);
}
.erklaerung { border-color: var(--tint-linie); }

.kennzahl { border-top-color: transparent; }

.kennzahl .quelle, .erklaerung .quelle { color: var(--kontext); }

.flaeche--dunkel .kennzahl .kontext,
.flaeche--dunkel .kennzahl .quelle,
.hero .kennzahl .kontext,
.hero .kennzahl .quelle { color: var(--verlauf-text-zweit); }
.flaeche--dunkel .kennzahl p,
.hero .kennzahl p { color: var(--white); }
.flaeche--dunkel .kennzahl .quelle,
.hero .kennzahl .quelle { color: var(--verlauf-text-zweit); }

.erklaerung .kontext,
.erklaerung .quelle,
.kennzahl .kontext,
.kennzahl .quelle { color: var(--tint-kontext); }

.flaeche:not(.flaeche--dunkel) .karte { border-top-color: #5291ED; }

.karte--markiert,
.flaeche:not(.flaeche--dunkel) .karte--markiert,
.karte--dunkel,
.kennzahl--markiert { border-top-color: var(--amb); }

.tafel {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  --tafel-pt: var(--s-xl);
  --tafel-px: var(--s-lg);
  margin: var(--s-xl) 0 var(--s-lg);
  background: var(--surf-mid);
  padding: var(--tafel-pt) var(--tafel-px) var(--s-lg);
}
.flaeche--ruhig .tafel { background: var(--white); }

.hero .protokoll__wer, .hero .protokoll__folge { color: var(--verlauf-text-zweit); }

.tafel__kopf { border-radius: var(--r-gross) var(--r-gross) 0 0;
  margin: calc(-1 * var(--tafel-pt)) calc(-1 * var(--tafel-px)) var(--s-lg);
  padding: var(--s-lg);
  background-color: #3257BC;
  background-image: linear-gradient(135deg, #3257BC 0%, #05164D 100%);
}
.tafel__marke {
  font-size: 12px; font-weight: 600; line-height: 1.40;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--white); margin: 0 0 var(--s-xs);
}
.tafel__text {
  font-size: 16px; font-weight: 400; line-height: 1.50;
  color: var(--white); margin: 0;
}
.flaeche--ruhig .tafel { background: var(--white); }

.flaeche--dunkel .tafel {
  background-color: transparent;
  background-image: var(--verlauf-kasten);
}
.tafel svg { width: 100%; height: auto; display: block; }

.tafel figcaption { margin: var(--s-md) 0 0; }
.tafel__aussage {
  font-size: 18px; line-height: 1.50; font-weight: 400; color: var(--body);
}
.tafel figcaption.quelle { font-size: 13px; line-height: 1.45; color: var(--muted); }

.tafel figcaption > p { margin: 0; }
.tafel figcaption > p + p { margin-top: var(--s-sm); }
.tafel__erlaeuterung { font-size: 16px; line-height: 1.55; color: var(--body); }
.flaeche--dunkel .tafel__aussage { color: var(--white); }
.flaeche--dunkel .tafel figcaption.quelle { color: var(--verlauf-text-zweit); }
.flaeche--dunkel .tafel__erlaeuterung { color: var(--verlauf-text-zweit); }

.tafel text { font-family: var(--text); }
.g-name       { font-size: 18px; font-weight: 700; fill: var(--ink); }
.g-name-hell  { font-size: 18px; font-weight: 700; fill: var(--white); }
.g-klein      { font-size: 16px; font-weight: 400; fill: var(--body); }
.g-klein-hell { font-size: 16px; font-weight: 400; fill: var(--white); }
.g-nr         { font-size: 16px; font-weight: 700; fill: var(--body); }
.g-zeit       { font-size: 16px; font-weight: 400; fill: var(--body); }
.g-schwelle   { font-size: 16px; font-weight: 700; fill: var(--ink); }
.g-marke      { font-size: 12px; font-weight: 600; letter-spacing: .06em; fill: var(--kontext); }
.g-marke-hell { font-size: 12px; font-weight: 600; letter-spacing: .06em; fill: var(--verlauf-text-zweit); }
.g-kern       { font-size: 16px; font-weight: 700; fill: var(--white); }
.g-spur       { font-size: 18px; font-weight: 400; fill: var(--body); }
.g-spur-markiert { font-size: 18px; font-weight: 700; fill: var(--ink); }
.flaeche--dunkel .g-name, .flaeche--dunkel .g-schwelle { fill: var(--white); }
.flaeche--dunkel .g-klein, .flaeche--dunkel .g-nr,
.flaeche--dunkel .g-zeit, .flaeche--dunkel .g-spur { fill: var(--verlauf-text-zweit); }
.flaeche--dunkel .g-marke { fill: var(--verlauf-text-zweit); }

.tafel__flaeche { overflow-x: auto; }
.tafel__flaeche:focus-visible { outline: 3px solid var(--amb); outline-offset: 2px; }
.tafel__hinweis { display: none; }
@media (max-width: 900px) {
  .tafel__flaeche svg { min-width: 760px; }
  .tafel__hinweis {
    display: block; font-size: 13px; line-height: 1.45; color: var(--muted);
    margin: var(--s-sm) 0 0;
  }
  .flaeche--dunkel .tafel__hinweis { color: var(--verlauf-text-zweit); }
}

.raeume { --raum-linie: #3257BC; --raum-kontur: var(--linie); }

.raeume__reihe {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md);
}
.raum { border-radius: var(--r-karte);
  background: var(--surf-dark);
  border: 1px solid var(--raum-kontur);
  border-top: 3px solid var(--raum-linie);
  padding: var(--s-md);
}
.raum__name   { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.raum__zusatz { font-size: 16px; font-weight: 400; color: var(--body); margin: 6px 0 0; line-height: 1.45; }

.raeume__sammler {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md);
  height: 28px;
}
.raeume__sammler .ast { justify-self: center; width: 2px; height: 28px; background: var(--raum-linie); }

.ergebnis { background: var(--white); border: 1px solid var(--raum-kontur); }

.ergebnis__schwelle {
  height: 5px; background: #05164D; padding: 1px 0; box-sizing: border-box;
}
.ergebnis__schwelle span { display: block; height: 3px; background: var(--amb); }

.ergebnis__text { padding: var(--s-md); text-align: center; }
.ergebnis__name   { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.ergebnis__zusatz { font-size: 16px; font-weight: 400; color: var(--body); margin: 6px 0 0; line-height: 1.45; }

@media (max-width: 760px) {
  .raeume { padding-left: 26px; }
  .raeume__reihe { grid-template-columns: 1fr; position: relative; }
  .raeume__reihe::before {
    content: ""; position: absolute; left: -26px; top: 23px; bottom: 0;
    width: 2px; background: var(--raum-linie);
  }
  .raum { position: relative; }
  .raum::before {
    content: ""; position: absolute; left: -26px; top: 23px; width: 26px; height: 2px;
    background: var(--raum-linie);
  }
  .raeume__sammler { height: 18px; position: relative; grid-template-columns: 1fr; }
  .raeume__sammler::before {
    content: ""; position: absolute; left: -26px; top: 0; bottom: 0;
    width: 2px; background: var(--raum-linie);
  }
  .raeume__sammler .ast { display: none; }
  .ergebnis { position: relative; }
  .ergebnis::before {
    content: ""; position: absolute; left: -26px; top: 26px; width: 26px; height: 2px;
    background: var(--raum-linie);
  }
  .ergebnis::after {
    content: ""; position: absolute; left: -26px; top: 0; height: 26px; width: 2px;
    background: var(--raum-linie);
  }
}

.osintstufen {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-lg);
  align-items: start;
}
.stufe { position: relative; display: flex; flex-direction: column; gap: var(--s-sm); }
.stufe__kopf { border-radius: var(--r-klein);
  background: var(--surf-dark); border: 1px solid var(--border); border-top: 3px solid #3257BC;
  padding: var(--s-sm) var(--s-md);
}
.stufe__nr {
  font-size: 12px; font-weight: 600; line-height: 1.40; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kontext); margin: 0;
}
.stufe__titel { font-size: 18px; font-weight: 700; line-height: 1.30; color: var(--ink); margin: 2px 0 0; }

.stufe__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-sm); }
.stufe__eintrag { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-klein); padding: var(--s-sm) var(--s-md); }
.stufe__kategorie {
  font-size: 12px; font-weight: 600; line-height: 1.40; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 2px;
}
.stufe__text { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 0; }

.stufe__schwelle { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-klein); padding: var(--s-md); }
.stufe__satz { font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 0; }
.stufe__folge {
  font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body);
  border-top: 1px solid var(--border); padding-top: var(--s-sm); margin: var(--s-sm) 0 0;
}

.osintstufen > .stufe + .stufe::before {
  content: ""; position: absolute; top: 26px; left: calc(-1 * var(--s-lg));
  width: var(--s-lg); height: 2px; background: #3257BC;
}
.osintstufen > .stufe--schwelle::before {
  top: 24px; height: 5px; background: #05164D;
}
.osintstufen > .stufe--schwelle::after {
  content: ""; position: absolute; top: 25px; left: calc(-1 * var(--s-lg));
  width: var(--s-lg); height: 3px; background: var(--amb);
}

@media (max-width: 760px) {
  .osintstufen { grid-template-columns: 1fr; gap: var(--s-xl); }
  .osintstufen > .stufe + .stufe::before {
    top: calc(-1 * var(--s-xl)); left: 24px; width: 2px; height: var(--s-xl);
  }
  .osintstufen > .stufe--schwelle::before { left: 23px; width: 5px; }
  .osintstufen > .stufe--schwelle::after {
    top: calc(-1 * var(--s-xl)); left: 24px; width: 3px; height: var(--s-xl);
  }
}

.ebenen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); align-items: start; }

.ebenen--untereinander { grid-template-columns: 1fr; gap: var(--s-xl); }
.ebene { display: flex; flex-direction: column; gap: var(--s-md); }
.ebene__kopf { border-radius: var(--r-gross);
  background: var(--surf-dark);
  border: 1px solid var(--border);
  border-top: 3px solid #3257BC;
  padding: var(--s-md);
}
.ebene__stufe {
  font-size: 12px; font-weight: 600; line-height: 1.40; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kontext); margin: 0;
}
.ebene__titel { font-size: 21px; font-weight: 700; line-height: 1.30; color: var(--ink); margin: 4px 0 0; }

.ebene__karte { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-gross); padding: var(--s-md); }
.ebene__kennung {
  font-size: 12px; font-weight: 700; line-height: 1.40; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kontext); margin: 0 0 var(--s-xxs);
}
.ebene__name { font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 0; }
.ebene__zusatz { display: block; font-weight: 700; }
.ebene__text { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: var(--s-sm) 0 0; }
.ebene__liste { margin: var(--s-sm) 0 0; padding-left: 1.1em; }
.ebene__liste li { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); }

.ausklapp {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-gross);
}
.ausklapp > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  font-size: 15px; font-weight: 700; line-height: 1.45; color: #3257BC;
}
.ausklapp > summary::-webkit-details-marker { display: none; }
.ausklapp > summary:focus-visible { outline: 2px solid #3257BC; outline-offset: 2px; }
.ausklapp__marke {
  flex: 0 0 auto; width: 0; height: 0;
  border-left: 8px solid #3257BC;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform 120ms ease;
}
.ausklapp[open] > summary { border-bottom: 1px solid var(--border); }
.ausklapp[open] .ausklapp__marke { transform: rotate(90deg); }
.ausklapp__inhalt { padding: var(--s-md); }
.ausklapp__inhalt > :first-child { margin-top: 0; }
.ausklapp__inhalt .modulblock { margin-top: 0; }
.ausklapp__deutsch {
  font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ink);
  margin: 0 0 var(--s-sm);
}

.ebene__block {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-gross); padding: var(--s-md);
}
.ebene__block > :first-child { margin-top: 0; }
.ebene__block h3 { font-size: 18px; margin: 0 0 var(--s-sm); }
.ebene__block p { font-size: 16px; line-height: 1.55; color: var(--body); margin: var(--s-sm) 0 0; }

.zeitachse { padding: var(--s-sm) 0 0; }
.zeitachse__spur { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-sm); }
.zeitachse__knoten { width: 18px; height: 18px; border-radius: 50%; background: #3257BC; }
.zeitachse__knoten--amber { width: 22px; height: 22px; background: #FFC247; border: 2px solid #05164D; }
.zeitachse__band { height: 2px; background: #3257BC; }
.zeitachse__jahr {
  font-size: 12px; font-weight: 700; line-height: 1.40; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kontext); text-align: center;
  margin: var(--s-sm) 0 0;
}
.zeitachse__mitte { font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; margin: var(--s-xxs) 0 0; }
.zeitachse__enden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); margin: var(--s-md) 0 0; }
.zeitachse__ende--rechts { text-align: right; }
.zeitachse__name { font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 0; }
.zeitachse__zusatz { font-size: 14px; line-height: 1.45; color: var(--body); margin: var(--s-xxs) 0 0; text-wrap: balance; }
@media (max-width: 640px) {
  .zeitachse__enden { grid-template-columns: 1fr; }
  .zeitachse__ende--rechts { text-align: left; }
}

.koepfe {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg);

  align-items: stretch; margin: var(--s-lg) 0 0;
}
.koepfe__karte {
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid #3257BC; border-radius: var(--r-gross);
  padding: var(--s-lg);
}
.koepfe__seite {
  font-size: 12px; font-weight: 600; line-height: 1.40; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kontext); margin: 0;
}
.koepfe__name { font-size: 21px; font-weight: 700; line-height: 1.30; color: var(--ink); margin: 4px 0 0; }
.koepfe__liste { margin: var(--s-md) 0 0; }
.koepfe__liste dt {
  font-size: 12px; font-weight: 700; line-height: 1.40; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kontext); margin: var(--s-md) 0 var(--s-xxs);
}
.koepfe__liste dt:first-child { margin-top: 0; }
.koepfe__liste dd { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 0; }
@media (max-width: 760px) {
  .koepfe { grid-template-columns: 1fr; gap: var(--s-xl); }
}

.formatfrage {
  background: var(--surf); border: 1px solid var(--border);
  padding: var(--s-lg); margin: var(--s-xxl) 0 0;
}
.formatfrage h3 { margin: var(--s-xxs) 0 var(--s-md); }
.formatfrage p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .ebenen { grid-template-columns: 1fr; gap: var(--s-xl); }
}

.regband {
  background-color: #3257BC;
  background-image: linear-gradient(135deg, #3257BC 0%, #05164D 100%);
  padding: var(--s-lg);
  margin: var(--s-lg) 0 0;
}
.regband p {
  font-family: var(--head); font-size: 32px; font-weight: 300; line-height: 1.15;
  color: var(--white); margin: 0;
}
.regband strong { font-weight: 700; }

.regraeume { display: flex; flex-direction: column; gap: var(--s-sm); margin: var(--s-sm) 0 0; }
.regraum { border-radius: var(--r-karte);
  background: var(--surf-dark);
  border: 1px solid var(--border);
  border-left: 3px solid #3257BC;
  padding: var(--s-md);
}
.regraum__name { font-size: 21px; font-weight: 700; line-height: 1.30; color: var(--ink); margin: 0; }
.regraum__zusatz { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 4px 0 0; }

.regergebnis { border-radius: var(--r-karte);
  background: var(--white); border: 1px solid var(--border);
  padding: var(--s-md); margin: var(--s-sm) 0 var(--s-lg);
}
.regergebnis__name { font-size: 21px; font-weight: 700; line-height: 1.30; color: var(--ink); margin: 0; }
.regergebnis__zusatz { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 4px 0 0; }

@media (max-width: 760px) {
  .regband p { font-size: 26px; }
  .regraum__name, .regergebnis__name { font-size: 20px; }
}

.modulblock { margin: var(--s-xxl) 0 0; }
.modulblock + .modulblock { padding-top: var(--s-xl); border-top: 1px solid var(--border); }
.modulblock__kennung {
  font-size: 12px; font-weight: 700; line-height: 1.40; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--kontext); margin: 0 0 var(--s-xs);
}
.modulblock h3 { margin-top: 0; }
.modulblock__deutsch {
  display: block; font-family: var(--text); font-size: 17px; font-weight: 400;
  color: var(--muted); margin-top: var(--s-xxs);
}
.feldzeile { margin: var(--s-md) 0 0; }
.feldzeile > strong { display: block; margin-bottom: var(--s-xxs); }

.schritte { list-style: none; margin: var(--s-md) 0 0; padding: 0; }
.schritte > li { display: grid; grid-template-columns: 46px 1fr; gap: var(--s-md); padding: var(--s-md) 0; }
.schritte > li + li { border-top: 1px solid var(--border); }
.schritte__nr {
  font-family: var(--text); font-size: 13px; font-weight: 700; line-height: 1.4;
  color: var(--muted); padding-top: 4px;
}
.schritte strong { display: block; margin-bottom: var(--s-xxs); }
.schritte p { margin: 0; }

.signalsatz { border-radius: var(--r-gross);
  margin: var(--s-xl) 0 0;
  padding: var(--s-lg) var(--s-lg) var(--s-lg) calc(var(--s-lg) - 3px);
  border-left: 3px solid var(--amb);
  background: var(--surf-mid);
}
.signalsatz p { margin: 0; font-size: 21px; line-height: 1.40; }
.flaeche--ruhig .signalsatz { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--amb); }
.flaeche--dunkel .signalsatz {
  background-color: transparent;
  background-image: var(--verlauf-kasten);
}

.bildplatz { border-radius: var(--r-gross);
  background: var(--surf-mid);
  border: 1px dashed var(--border);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-lg); text-align: center;
}

.bildplatz p { font-size: 13px; line-height: 1.45; color: var(--kontext); margin: 0; }

.einstieg { margin: var(--s-lg) 0 0; }
.einstieg > div { padding: var(--s-md) 0; }
.einstieg > div + div { border-top: 1px solid var(--border); }
.einstieg strong { display: block; margin-bottom: var(--s-xxs); }
.einstieg p { margin: 0; }

.wortmarke--fuss { display: block; margin: 0 0 var(--s-md); }
.fuss__recht { margin-top: var(--s-lg); }
.fuss__recht li { font-size: 15px; }

@media (max-width: 767px) {
  .tafel { --tafel-pt: var(--s-lg); --tafel-px: var(--s-md); padding: var(--tafel-pt) var(--tafel-px) var(--s-md); }
  .tafel__kopf { padding: var(--s-md); }
  .schritte > li { grid-template-columns: 34px 1fr; gap: var(--s-sm); }
  .signalsatz p { font-size: 19px; }
}

.flaeche--dunkel .tafel svg line[stroke="#C7D0D8"],
.flaeche--dunkel .tafel svg rect[stroke="#C7D0D8"],
.flaeche--dunkel .tafel svg circle[stroke="#C7D0D8"] { stroke: var(--verlauf-linie); }

.signalsatz + p, .signalsatz + .modulblock { margin-top: var(--s-lg); }

.kopf nav a { white-space: nowrap; }
.kopf nav { gap: var(--s-md); }
.kopf nav a { font-size: 16px; }
@media (max-width: 1103px) and (min-width: 768px) {
  .kopf__innen { height: auto; flex-wrap: wrap; row-gap: var(--s-xs); padding-top: var(--s-sm); padding-bottom: var(--s-sm); }
  .kopf nav { margin-left: 0; width: 100%; }
}

h3 .deutsch {
  font-family: var(--text); font-weight: 400; color: var(--muted);
}
.flaeche--dunkel h3 .deutsch { color: var(--verlauf-text-zweit); }

.quellenliste { list-style: none; margin: var(--s-lg) 0 0; padding: 0; }
.quellenliste li {
  font-size: 15px; line-height: 1.55; color: var(--muted);
  padding: var(--s-md) 0;
}
.quellenliste li + li { border-top: 1px solid var(--border); }

.modulblock__kurz {
  font-size: 17px; line-height: 1.55; color: var(--muted);
  margin: 0 0 var(--s-md);
}
.befundliste { list-style: none; margin: var(--s-md) 0 0; padding: 0; }

.befundliste li {
  padding: var(--s-md) 0 var(--s-md) var(--s-md);
  border-left: 2px solid #3257BC;
  margin-bottom: var(--s-xs);
}
.flaeche--dunkel .befundliste li { border-left-color: var(--verlauf-linie); }

.hervor { font-weight: 700; }
.hero .hervor { font-size: 21px; line-height: 1.45; }

.schlusszeile { margin-top: var(--s-xl); }

@media (min-width: 900px) {
  .hero .satz > h1 { grid-column: 1 / -1; }
}

.ablauf { border-radius: var(--r-gross); overflow: hidden;
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border);
}

.ablauf__schritt {
  display: grid; grid-template-columns: 68px 1fr;
  background: var(--surf-dark); margin: 0;
}
.ablauf__nr {
  background: var(--mid); color: var(--amb);
  font-family: var(--head); font-size: 34px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ablauf__text { padding: var(--s-md); }
.ablauf__schritt + .ablauf__schritt .ablauf__text { border-top: 1px solid var(--border); }
.ablauf__titel { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.ablauf__satz  { font-size: 16px; font-weight: 400; color: var(--body); line-height: 1.45; margin: 6px 0 0; }

@media (max-width: 600px) {
  .ablauf__schritt { grid-template-columns: 48px 1fr; }
  .ablauf__nr { font-size: 26px; }
  .ablauf__text { padding: var(--s-sm) var(--s-md); }
}

.protokoll { border-radius: var(--r-gross);
  background-color: var(--core-hell);
  background-image: var(--verlauf-flaeche);
  padding: var(--s-lg) var(--s-xl);
  color: var(--white);
}
.protokoll__spur { list-style: none; margin: 0; padding: 0; }

.protokoll__zeile {
  display: grid; grid-template-columns: 176px 5px minmax(0, var(--col-text)); column-gap: var(--s-sm);
  align-items: start; margin: 0; padding: var(--s-md) 0;
}
.protokoll__spur,
.protokoll__folge { max-width: calc(176px + 5px + 2 * var(--s-sm) + var(--col-text)); }
.protokoll__zeile + .protokoll__zeile { border-top: 1px solid rgba(216, 224, 240, 0.30); }
.protokoll__wer {
  font-size: 16px; font-weight: 700; line-height: 1.45;
  color: var(--verlauf-text-zweit); margin: 0;
}
.protokoll__satz {
  font-size: 18px; font-weight: 400; line-height: 1.55;
  color: var(--white); margin: 0;
}

.protokoll__marke { width: 5px; align-self: stretch; }
.protokoll__marke > span { display: block; }
.protokoll__zeile--markiert .protokoll__marke {
  background: var(--core-dunkel); padding: 0 1px; box-sizing: border-box;
}
.protokoll__zeile--markiert .protokoll__marke > span {
  width: 3px; height: 100%; background: var(--amb);
}

.protokoll__folge {
  margin: var(--s-md) 0 0; padding-top: var(--s-md);
  border-top: 1px solid var(--verlauf-linie);
  font-size: 16px; font-weight: 400; line-height: 1.5;
  color: var(--verlauf-text-zweit);
}

@media (max-width: 700px) {
  .protokoll { padding: var(--s-md); }
  .protokoll__zeile { grid-template-columns: 5px 1fr; column-gap: var(--s-sm); }
  .protokoll__marke { grid-column: 1; grid-row: 1 / span 2; }
  .protokoll__wer   { grid-column: 2; grid-row: 1; margin-bottom: 4px; }
  .protokoll__satz  { grid-column: 2; grid-row: 2; }
}

.zusammen { --zus-kontur: var(--linie); --raum-kontur: var(--linie); }

.zusammen__achse { position: relative; height: 34px; margin-bottom: var(--s-xs); }
.zusammen__achse-linie {
  position: absolute; left: 0; right: 10px; top: 22px;
  height: 1px; background: var(--zus-kontur);
}
.zusammen__achse-spitze {
  position: absolute; right: 0; top: 15px;
  width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 12px solid var(--zus-kontur);
}
.zusammen__achse-text {
  position: absolute; left: 0; top: 0;
  font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--muted);
}

.zusammen__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }

.vorgang { border-radius: var(--r-karte);
  background: var(--surf-dark);
  border: 1px solid var(--zus-kontur);
  border-top: 3px solid #3257BC;
  padding: var(--s-md);
}
.vorgang__zeit   { font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: 0.06em;
                   text-transform: uppercase; color: var(--kontext); margin: 0; }
.vorgang__rolle  { font-size: 18px; font-weight: 700; color: var(--ink); margin: 6px 0 0; }
.vorgang__befund { font-size: 16px; font-weight: 400; color: var(--body); line-height: 1.45; margin: 6px 0 0; }

.zusammen__sammler {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md);
  height: 28px;
}
.zusammen__sammler .ast {
  justify-self: center; width: 0; height: 28px;
  border-left: 1px dashed var(--zus-kontur);
}

@media (max-width: 760px) {
  .zusammen { padding-left: 26px; }
  .zusammen__achse { margin-left: -26px; }
  .zusammen__reihe { grid-template-columns: 1fr; position: relative; }
  .zusammen__reihe::before {
    content: ""; position: absolute; left: -26px; top: 23px; bottom: 0;
    width: 0; border-left: 1px dashed var(--zus-kontur);
  }
  .vorgang { position: relative; }
  .vorgang::before {
    content: ""; position: absolute; left: -26px; top: 23px; width: 26px; height: 0;
    border-top: 1px dashed var(--zus-kontur);
  }
  .zusammen__sammler { height: 18px; position: relative; grid-template-columns: 1fr; }
  .zusammen__sammler::before {
    content: ""; position: absolute; left: -26px; top: 0; bottom: 0;
    width: 0; border-left: 1px dashed var(--zus-kontur);
  }
  .zusammen__sammler .ast { display: none; }
  .zusammen .ergebnis { position: relative; }
  .zusammen .ergebnis::before {
    content: ""; position: absolute; left: -26px; top: 26px; width: 26px; height: 0;
    border-top: 1px dashed var(--zus-kontur);
  }
  .zusammen .ergebnis::after {
    content: ""; position: absolute; left: -26px; top: 0; height: 26px; width: 0;
    border-left: 1px dashed var(--zus-kontur);
  }
}

.fuss__stand { font-size: 13px; line-height: 1.45; color: var(--muted); margin: var(--s-md) 0 0; }

.nachweismappe .satz { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); align-items: center; }

.dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 28px 16px;
}
.dossier::before { border-radius: var(--r-gross);
  content: "";
  position: absolute;
  inset: 0 8px 0 0;
  background: linear-gradient(145deg, var(--mid-soft), var(--mid));
  border: 1px solid var(--border-dark);
  box-shadow: 0 24px 55px rgba(7, 28, 44, 0.18);
  transform: rotate(-1.2deg);
}
.dossier__blatt { border-radius: var(--r-karte); overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--s-sm);
  min-height: 104px;
  padding: var(--s-md);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(7, 28, 44, 0.10);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.dossier__blatt::before {
  content: "";
  position: absolute;
  top: -1px; bottom: -1px; left: -1px;
  width: 4px;
  background: var(--amb);
  border-right: 1px solid var(--mid);
}
.dossier__blatt:nth-child(2) { transform: translateX(8px); }
.dossier__blatt:nth-child(3) { transform: translateX(16px); }
.dossier__blatt:nth-child(4) { transform: translateX(24px); }
.dossier__blatt:hover {
  transform: translateX(-4px);
  box-shadow: 0 14px 28px rgba(7, 28, 44, 0.16);
}
.dossier__nummer { border-radius: var(--r-klein);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 32px;
  background: var(--amb);
  color: var(--mid);
  border: 1px solid var(--mid);
  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.dossier__blatt h3 { margin: 2px 0 8px; font-size: 20px; line-height: 1.15; }
.dossier__blatt p { margin: 0; color: var(--body); font-size: 16px; line-height: 1.45; }

.nachweismappe__hinweis {
  margin-top: var(--s-xxl);
  padding: var(--s-lg);
  background: var(--surf);
  border-left: 4px solid var(--mid);
  color: var(--body);
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .dossier__blatt { transition: none; }
  .dossier__blatt:hover { transform: none; }
  .dossier__blatt:nth-child(2):hover { transform: translateX(8px); }
  .dossier__blatt:nth-child(3):hover { transform: translateX(16px); }
  .dossier__blatt:nth-child(4):hover { transform: translateX(24px); }
}
@media (max-width: 767px) {
  .dossier { margin-top: var(--s-xl); padding: 14px 10px 14px 8px; }
  .dossier__blatt { grid-template-columns: 42px 1fr; min-height: auto; padding: var(--s-md); }
  .dossier__blatt:nth-child(n), .dossier__blatt:nth-child(n):hover { transform: none; }
}

.hero .wrap { min-width: 0; }

.beleg { padding: var(--s-xl) 0 var(--s-xxl); }
.beleg .tafel { margin-top: 0; }

@media (max-width: 900px) {
  .beleg { padding: var(--s-lg) 0 var(--s-xl); }
}

@media (min-width: 901px) {
  .hero.hirn-stage { min-height: 744px; }
}
@media (max-width: 900px) {
  .hero .knopfreihe { display: block; margin-bottom: calc(-1 * var(--s-md)); }
  .hero .knopfreihe .knopf { margin: 0 var(--s-md) var(--s-md) 0; vertical-align: top; }
}
@media (max-width: 480px) {
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

.beleg-versprechen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s-xl); align-items: stretch; margin: 0;
}
.beleg-versprechen .kennzahl { margin: 0; }
.versprechen {
  position: relative; overflow: hidden;
  border-radius: var(--r-gross);
  padding: var(--s-xl) var(--s-xl) var(--s-xl) calc(var(--s-xl) + 4px);
  background-color: #3257BC;
  background-image: var(--verlauf-flaeche);
}
.versprechen::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--amb);
}
.versprechen p { margin: 0; color: var(--white); }
.versprechen__aussage {
  font-family: var(--head); font-size: 26px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.2px; margin-bottom: var(--s-md) !important;
}
.versprechen__erlaeuterung { font-size: 18px; line-height: 1.55; color: var(--verlauf-text-zweit) !important; }
@media (max-width: 900px) {
  .beleg-versprechen { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-lg); }
  .versprechen { padding: var(--s-lg) var(--s-lg) var(--s-lg) calc(var(--s-lg) + 4px); }
  .versprechen__aussage { font-size: 21px; }
  .versprechen__erlaeuterung { font-size: 17px; }
}
@media print {
  .versprechen { background: var(--white); border: 1px solid var(--border); }
  .versprechen p, .versprechen__erlaeuterung { color: var(--ink) !important; }
}

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); margin: 0 0 var(--s-md); }
.kachel { border-top: 3px solid var(--silver); border-radius: var(--r-karte); padding: var(--s-lg) var(--s-lg) var(--s-lg); }
.kachel h3 { margin: 0 0 var(--s-sm); }
.kachel p { margin: 0; }
.flaeche--dunkel .kachel,
.flaeche--dunkel .kennzahl--breit {
  background-color: transparent;
  background-image: linear-gradient(rgba(5, 22, 77, 0.42), rgba(5, 22, 77, 0.42));
}
.kennzahl--breit { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-sm) var(--s-xl); align-items: start; }
.kennzahl--breit .kennzahl__wert { grid-column: 1 / -1; }
.kennzahl--breit p { margin: 0; }
.kennzahl--breit .quelle { border-left: 1px solid rgba(216, 224, 240, 0.4); padding-left: var(--s-lg); }
@media (max-width: 900px) {
  .kacheln { grid-template-columns: 1fr; }
  .kennzahl--breit { grid-template-columns: 1fr; }
  .kennzahl--breit .quelle { border-left: 0; padding-left: 0; border-top: 1px solid rgba(216, 224, 240, 0.4); padding-top: var(--s-sm); }
}

.g-nr,
.ablauf__nr,
.schritte__nr,
.stufe__nr,
.dossier__nummer,
.modulblock__kennung,
.ebene__kennung,
.ebene__stufe { font-variant-numeric: tabular-nums lining-nums; }

.flaeche--dunkel .protokoll {
  background-color: transparent;
  background-image: var(--verlauf-kasten);
}
.flaeche--dunkel .tafel:has(.protokoll) { background: none; border: 0; padding: 0; }
.zeitstrahl { margin: var(--s-lg) 0 var(--s-lg); }
.zeitstrahl__reihe {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--s-lg);
}
.zeitstrahl__reihe::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 38px;
  height: 2px; background: var(--verlauf-linie);
}
.zeitstrahl__punkt { position: relative; text-align: center; margin: 0; }
.zeitstrahl__zeit { font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 var(--s-xs); color: var(--verlauf-text-zweit); }
.zeitstrahl__knoten {
  display: block; width: 14px; height: 14px; margin: 0 auto var(--s-sm); border-radius: 50%;
  background: #5291ED; position: relative; z-index: 1;
}
.zeitstrahl__punkt--markiert .zeitstrahl__knoten {
  width: 22px; height: 22px; margin-top: -4px; margin-bottom: calc(var(--s-sm) - 4px);
  background: var(--core-dunkel); border: 3px solid var(--amb);
  box-shadow: 0 0 0 1px var(--core-dunkel);
}
.zeitstrahl__satz { font-size: 16px; line-height: 1.5; margin: 0 auto; max-width: 30ch; }
.zeitstrahl figcaption { margin-top: var(--s-xl); }
@media (max-width: 700px) {
  .zeitstrahl__reihe { grid-template-columns: 1fr; row-gap: var(--s-lg); padding-left: 28px; }
  .zeitstrahl__reihe::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .zeitstrahl__punkt { text-align: left; }
  .zeitstrahl__knoten { position: absolute; left: -28px; top: 2px; margin: 0; }
  .zeitstrahl__punkt--markiert .zeitstrahl__knoten { left: -32px; top: -2px; margin: 0; }
  .zeitstrahl__satz { margin: 0; max-width: none; }
}

.begriffe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-md); margin: var(--s-lg) 0; }
.begriff {
  display: flex; flex-direction: column; border-radius: var(--r-karte);
  background: var(--white); border: 1px solid var(--border); padding: var(--s-lg);
}
.begriff__name { font-size: 20px; line-height: 1.3; margin: 0 0 var(--s-sm); }
.begriff__text { font-size: 16px; line-height: 1.55; margin: 0 0 var(--s-md); flex: 1; }
.begriff__abgrenzung { font-size: 14px; line-height: 1.4; margin: 0; padding-top: var(--s-sm); border-top: 1px solid var(--border); color: var(--kontext); }
.begriff--fokus { background-color: #3257BC; background-image: var(--verlauf-flaeche); border-color: transparent; }
.begriff--fokus .begriff__name, .begriff--fokus .begriff__text { color: var(--white); }
.begriff--fokus .begriff__abgrenzung { color: var(--verlauf-text-zweit); border-top-color: var(--verlauf-linie); }
.begriffe + .kennzahl { margin-top: var(--s-md); }
@media (max-width: 1000px) { .begriffe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .begriffe { grid-template-columns: 1fr; } }

.schutzring__lesehilfe { font-size: 16px; line-height: 1.5; color: var(--body); margin: 0 0 var(--s-md); }
.schutzring__raster { display: block; }
.schutzring__kasten {
  max-width: 440px; margin-left: auto; border-radius: var(--r-gross);
  background-color: #3257BC; background-image: var(--verlauf-flaeche);
  padding: var(--s-lg); margin-bottom: var(--s-lg); margin-top: var(--s-md);
}
.schutzring__kasten::before { content: ""; display: block; width: 48px; height: 3px; background: var(--amb); margin-bottom: var(--s-md); }
.schutzring__kasten p { color: var(--white); margin: 0; font-size: 16px; line-height: 1.5; }
.schutzring__titel { font-size: 21px !important; font-weight: 700; line-height: 1.3 !important; margin-bottom: var(--s-xs) !important; }
.schutzring__name { font-weight: 700; margin-bottom: var(--s-md) !important; }
.g-ring { font-size: 16px; font-weight: 700; fill: var(--ink); }
.g-ring-hell { font-size: 16px; font-weight: 700; fill: var(--white); }
.g-ring-klein { font-size: 13px; fill: var(--body); }
.g-ring-klein-hell { font-size: 13px; fill: var(--verlauf-text-zweit); }
.g-ring-zahl { font-size: 40px; font-weight: 700; fill: var(--ink); }
.g-ring-frage { font-size: 34px; font-weight: 700; fill: var(--ink); }
@media (max-width: 900px) {
  .schutzring__kasten { max-width: none; }
}

.rechtsliste { border: 1px solid var(--border); border-radius: var(--r-gross); overflow: hidden; margin: var(--s-lg) 0; background: var(--white); }
.rechtsliste__kopf {
  margin: 0; padding: var(--s-md) var(--s-lg); color: var(--white); font-weight: 700; font-size: 18px; line-height: 1.4;
  background-color: #3257BC; background-image: var(--verlauf-flaeche);
}
.rechtsliste__zeile { padding: var(--s-md) var(--s-lg); border-top: 1px solid var(--border); }
.rechtsliste__name { margin: 0; font-weight: 700; font-size: 17px; color: var(--ink); }
.rechtsliste__zusatz { margin: 2px 0 0; font-size: 16px; line-height: 1.5; }
.rechtsliste__fuss { margin: 0; padding: var(--s-md) var(--s-lg); border-top: 1px solid var(--border); background: var(--surf-mid); font-weight: 700; font-size: 16px; color: var(--ink); }

.ebene__abschnitt { margin: var(--s-lg) 0 var(--s-xs); }
.koepfe__text { margin: var(--s-md) 0 0; }
.koepfe__text p { font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--body); margin: 0 0 var(--s-sm); }

@media (min-width: 901px) {
  .hero.hirn-stage .satz {
    grid-template-columns: minmax(0, var(--hero-textspalte)) minmax(0, 1fr);
  }
  .hero.hirn-stage .satz > h1 { grid-column: 1; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .hero.hirn-stage { --hero-textspalte: calc(53.7vw - 56px); }
}
@media (min-width: 1041px) {
  .hero.hirn-stage {
    --hero-textspalte: min(620px, max(3.7vw + 464px, 24vw + 197px));
  }
}
@media (max-width: 900px) {
  .hero.hirn-stage {
    align-items: flex-start;
    padding-bottom: calc(520px + var(--s-xxxl) + var(--s-lg));
  }
  .hero.hirn-stage > .hirn-partikel--stage { top: auto; bottom: calc(var(--s-xxxl) + var(--s-lg)); height: 520px; }
  .hero.hirn-stage::before { display: none; }
}

@media (min-width: 901px) {
  .hero.hirn-stage h1 {
    font-size: 52px;
    line-height: 1.06;
    letter-spacing: -0.8px;
  }
}

.zusagen {
  border-left: 3px solid var(--amb);
  padding: 0 0 0 var(--s-lg);
}
.zusagen p,
.flaeche--dunkel .zusagen p {
  font-family: var(--text);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  color: var(--silver);
}
@media (min-width: 901px) {
  .satz > .neben.zusagen {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: var(--s-md);
  }
  .zusagen p,
  .flaeche--dunkel .zusagen p { font-size: 26px; line-height: 1.3; }
  #gespraechsauszug .satz { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  #gespraechsauszug .satz > .signallinie,
  #gespraechsauszug .satz > h2,
  #gespraechsauszug .satz > .lead,
  #gespraechsauszug .satz > h3 {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--col-gutter)) * 0.6);
  }
}
@media (min-width: 1104px) {
  #gespraechsauszug .satz { grid-template-columns: 560px 440px; }
  #gespraechsauszug .satz > .signallinie,
  #gespraechsauszug .satz > h2,
  #gespraechsauszug .satz > .lead,
  #gespraechsauszug .satz > h3 { max-width: var(--col-text); }
}
@media (min-width: 987px) and (max-width: 1019px) {
  .zusagen p, .flaeche--dunkel .zusagen p { font-size: 25px; }
}
@media (min-width: 954px) and (max-width: 986px) {
  .zusagen p, .flaeche--dunkel .zusagen p { font-size: 24px; }
}
@media (min-width: 921px) and (max-width: 953px) {
  .zusagen p, .flaeche--dunkel .zusagen p { font-size: 23px; }
}
@media (min-width: 901px) and (max-width: 920px) {
  .zusagen p, .flaeche--dunkel .zusagen p { font-size: 22px; }
}
@media (max-width: 900px) {
  .satz > .neben.zusagen {
    grid-column: 1 / -1;
    margin-top: var(--s-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .zusagen p,
  .flaeche--dunkel .zusagen p { font-size: 22px; }
}
@media (max-width: 767px) {
  .satz > .neben.zusagen { gap: 8px; }
  .zusagen p,
  .flaeche--dunkel .zusagen p { font-size: 19px; }
}

.schutzring__kompakt { display: none; }
.schutzring__kasten { max-width: none; margin-left: 0; }
@media (min-width: 1050px) {
  .schutzring__raster { display: grid; }
  .schutzring__raster > .schutzring__voll,
  .schutzring__raster > .schutzring__kasten { grid-area: 1 / 1; }
  .schutzring__raster > .schutzring__kasten {
    align-self: start;
    margin: calc(466 / 1140 * 100% + 17px) -16px 0 calc(805 / 1140 * 100% + 17px);
    padding: var(--s-md);
  }
  .schutzring__raster > .schutzring__kasten p { font-size: 14px; line-height: 1.45; }
  .schutzring__raster > .schutzring__kasten .schutzring__titel { font-size: 18px !important; }
  .schutzring__raster > .schutzring__kasten::before { margin-bottom: var(--s-sm); }
}
@media (max-width: 857px) {
  .schutzring__voll { display: none; }
  .schutzring__kompakt { display: block; }
  .schutzring__kompakt svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto var(--s-lg); }
  .schutzring__kasten { margin-top: var(--s-lg); }
}
@media (max-width: 767px) {
  .schutzring__kompakt { margin: 0 -16px; }
  .schutzring__liste { padding: 0 16px; }
}
.g-kring-anzahl { font-size: 20px; font-weight: 400; fill: var(--body); }
.g-kring-mitte  { font-size: 54px; font-weight: 700; fill: var(--ink); }
.schutzring__liste { margin: 0; }
.schutzring__bereich { font-size: 16px; line-height: 1.45; margin: var(--s-md) 0 var(--s-xs); color: var(--body); }
.schutzring__bereich:first-child { margin-top: 0; }
.schutzring__bereich strong { color: var(--ink); }
.schutzring__massnahmen { margin: 0; padding-left: var(--s-lg); }
.schutzring__massnahmen li { font-size: 16px; line-height: 1.45; margin: 0 0 2px; }
.schutzring__luecke {
  margin-top: var(--s-lg);
  border-left: 3px solid var(--amb);
  padding: 0 0 0 var(--s-md);
}
.schutzring__luecke p { margin: 0; font-size: 16px; line-height: 1.45; }
.schutzring__lueckename { font-weight: 700; color: var(--ink); }

@media (min-width: 1050px) {
  .schutzring__raster > .schutzring__kasten {
    margin: calc(464.9 / 1140 * 100% + 17px) 0 0 calc(743.1 / 1140 * 100% + 17px);
  }
}
@media (min-width: 768px) {
  #schutzmassnahmen .satz > h2 { grid-column: 1 / -1; max-width: 660px; }
}
.schutzring__farbe {
  display: inline-block; width: 12px; height: 12px;
  margin-right: var(--s-xs); vertical-align: -1px;
}
.schutzring__farbe--t { background: #05164D; }
.schutzring__farbe--o { background: #A7C7F6; }
.schutzring__farbe--p { background: #5F86C9; }

.satz > .textkasten { margin: 0 0 var(--s-lg); }
.textkasten p {
  font-family: var(--text);
  font-size: 22px; font-weight: 400; line-height: 1.45;
  color: var(--body);
  margin: 0;
}
.textkasten__rechts {
  border-left: 3px solid var(--amb);
  padding-left: var(--s-lg);
}
.textkasten__rechts { margin-top: var(--s-lg) !important; }
@media (min-width: 901px) {
  .textkasten {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--col-gutter);
    align-items: start;
  }
  .textkasten__rechts { margin-top: 0 !important; }
}
@media (max-width: 767px) {
  .textkasten p { font-size: 19px; }
}

.lead, .textkasten p, .zitat p { text-wrap: pretty; }

@media (min-width: 901px) {
  #blinder-fleck .satz > .zitat--neben { grid-column: 2; grid-row: 5 / span 2; margin: 0; }

  #blinder-fleck .satz > .zitat--neben p:not(.quelle) { text-wrap: balance; }
}

.satz > .ueberleitung { margin: var(--s-xs) 0 0; }

@media (max-width: 767px) { .satz > .ueberleitung { margin-top: var(--s-xl); } }

.tafel__kompakt { display: none; }
@media (max-width: 900px) {
  .tafel--kompakt > .tafel__flaeche { display: none; }
  .tafel--kompakt > .tafel__kompakt { display: flex; }
}

.mv { justify-content: center; }
.mv svg { display: block; width: 100%; max-width: 310px; height: auto; }

.bk { flex-direction: column; gap: var(--s-md); }
.bk-karte {
  position: relative; display: flex; flex-direction: column;
  background: #C8DCF9; padding: var(--s-lg);
}
.bk-karte--spear { padding-left: calc(var(--s-lg) + 5px); }
.bk-karte--spear::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(to right, #05164D 0 1px, #FFC247 1px 4px, #05164D 4px 5px);
}
.bk-marke {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.4;
  color: var(--kontext); margin: 0 0 var(--s-md);
}
.bk-zeile { font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--ink); margin: 0 0 var(--s-xs); }

.bk-karte { container-type: inline-size; }
.bk-punkte { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: var(--s-md); max-width: 170px; }
@container (min-width: 234px) { .bk-punkte { max-width: 234px; } }
@container (min-width: 362px) { .bk-punkte { max-width: 362px; } }
.bk-punkte span { width: 10px; height: 10px; border-radius: 50%; background: #5F86C9; }
.bk-gegen { align-self: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.bk-person {
  display: flex; align-items: center; gap: var(--s-md); margin-top: var(--s-md);
  font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--body);
}
.bk-kreis {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #8FB0E6;
  background: radial-gradient(circle, #3257BC 0 13.5px, transparent 14.5px);
}

.kk { flex-direction: column; gap: var(--s-xl); }
.kk-weg { display: flex; flex-direction: column; align-items: center; }
.kk-kasten {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 280px; min-height: 56px; padding: var(--s-sm) var(--s-md);
  border: 1.5px solid #8FB0E6; border-radius: 8px; background: #C8DCF9;
  text-align: center; background-repeat: no-repeat; background-position: center var(--s-sm);
}
.kk-text { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.kk-zusatz { font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--body); margin-top: 2px; }
.kk-kasten--mail, .kk-kasten--anruf, .kk-kasten--vorgefiltert, .kk-kasten--mensch { padding-top: 52px; background-size: auto 30px; }
.kk-kasten--mail { background-color: #F0F4FC; border-color: #C5CDD8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Crect x='1.1' y='1.1' width='37.8' height='25.8' rx='3' fill='none' stroke='%2305164D' stroke-width='2.2'/%3E%3Cpath d='M1.1 3 L20 17 L38.9 3' fill='none' stroke='%2305164D' stroke-width='2.2'/%3E%3C/svg%3E"); }
.kk-kasten--anruf { background-color: #F0F4FC; border-color: #C5CDD8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 218 46 44'%3E%3Cpath d='M74 222 q-6 4 -4 12 q6 16 22 24 q8 2 12 -4 l-8 -8 q-4 2 -8 0 q-8 -6 -12 -14 q-2 -4 0 -8 z' fill='none' stroke='%2305164D' stroke-width='2.2'/%3E%3C/svg%3E"); }
.kk-kasten--vorgefiltert { background-color: #E4EBFA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='819 43 38 44'%3E%3Cpath d='M838 46 L854 52 L854 66 Q854 78 838 84 Q822 78 822 66 L822 52 Z' fill='none' stroke='%2305164D' stroke-width='2.2'/%3E%3C/svg%3E"); }
.kk-kasten--mensch { background-color: #E4EBFA; border-color: #3257BC; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -22 36 41'%3E%3Ccircle cx='0' cy='-10' r='9' fill='none' stroke='%233257BC' stroke-width='2.5'/%3E%3Cpath d='M-15 16 Q0 -6 15 16' fill='none' stroke='%233257BC' stroke-width='2.5'/%3E%3C/svg%3E"); }
.kk-pfeil { position: relative; display: block; width: 100%; max-width: 280px; height: 32px; }
.kk-pfeil::before {
  content: ""; position: absolute; left: calc(50% - 1px); top: 4px; bottom: 12px; width: 2px; background: #5F86C9;
}
.kk-pfeil::after {
  content: ""; position: absolute; left: calc(50% - 7px); bottom: 2px; width: 14px; height: 11px;
  background: #5F86C9; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.kk-pfeil--trenn {
  background: repeating-linear-gradient(to right, #5F86C9 0 5px, transparent 5px 10px) no-repeat center 15px / 60% 1.5px;
}
.kk-ungefiltert {
  box-sizing: border-box; position: relative; display: block; width: 100%; max-width: 280px; height: 132px;
  margin: var(--s-xs) 0; border: 1.5px dashed #C5CDD8; border-radius: 8px;
}
.kk-amber {
  position: absolute; left: calc(50% - 2.5px); top: -10px; bottom: 10px; width: 5px;
  background: linear-gradient(to right, #05164D 0 1px, #FFC247 1px 4px, #05164D 4px 5px);
}
.kk-amber::before {
  content: ""; position: absolute; left: -9.5px; bottom: -20px; width: 24px; height: 22px;
  background: #05164D; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.kk-amber::after {
  content: ""; position: absolute; left: -7px; bottom: -17px; width: 19px; height: 17px;
  background: #FFC247; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.kk-schwelle {
  position: absolute; left: calc(50% + 16px); top: 50%; transform: translateY(-50%);
  font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink);
}

.untrennbar { white-space: nowrap; }

.satz > .kernsatz {
  border-left: 3px solid var(--amb);
  padding: 0 0 0 var(--s-lg);
  font-family: var(--text);
  font-size: 22px; font-weight: 400; line-height: 1.45;
  color: var(--body);
  text-wrap: pretty;
  margin: 0 0 var(--s-md);
}
@media (max-width: 767px) {
  .satz > .kernsatz { font-size: 19px; }
}
@media (min-width: 901px) {
  #zielgruppe .satz > .kernsatz {
    grid-column: 2; grid-row: 5;
    font-family: var(--head);
    font-size: 26px; line-height: 1.30;
    color: var(--ink);
    text-wrap: balance;
    margin: 0;
  }
}

.flaeche:not(.flaeche--dunkel) .kennzahl--breit .quelle { border-left-color: rgba(61, 78, 130, 0.35); }
@media (max-width: 900px) {
  .flaeche:not(.flaeche--dunkel) .kennzahl--breit .quelle { border-top-color: rgba(61, 78, 130, 0.35); }
}

#awareness .satz > .voll { margin-top: var(--s-xs); }
@media (max-width: 767px) {
  #awareness .satz > .voll { margin-top: var(--s-lg); }
}
@media (min-width: 901px) {
  .kacheln--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.verzeichnis { display: flow-root; margin: 0 0 var(--s-lg); }
.verzeichnis__gruppe { margin: var(--s-xxl) 0 var(--s-md); }
.verzeichnis > .verzeichnis__gruppe:first-child { margin-top: var(--s-lg); }
.verzeichnis__zeile {
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--border);
}
.verzeichnis__gruppe + .verzeichnis__zeile { border-top: 1px solid var(--border); }
.verzeichnis__name h3 { margin: 0 0 var(--s-xs); }
.verzeichnis__name p { margin: 0; }
.verzeichnis__text p { margin: 0 0 var(--s-md); }
.verzeichnis__text p:last-child { margin-bottom: 0; }
@media (min-width: 901px) {
  .verzeichnis__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--col-gutter);
    align-items: start;
  }
  .verzeichnis__name h3:only-child { margin-bottom: 0; }
}
@media (max-width: 900px) {
  .verzeichnis__name { margin-bottom: var(--s-sm); }
}

.grundsaetze { margin: var(--s-md) 0 0; }
.grundsatz { border-top: 1px solid var(--border); padding-top: var(--s-md); }
.grundsatz h3 { margin: 0 0 var(--s-md); }
.grundsatz p { margin: 0; }
.grundsatz + .grundsatz { margin-top: var(--s-xl); }
.knopfzeile { margin: var(--col-gutter) 0 0; }
@media (min-width: 901px) {
  .grundsaetze {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gutter); row-gap: var(--col-gutter);
    align-items: start;
  }
  .grundsatz + .grundsatz { margin-top: 0; }
}
@media (max-width: 767px) {
  .grundsaetze { margin-top: var(--col-gutter); }
}

.profile { margin: var(--s-md) 0 0; }
.profil { border-top: 1px solid var(--border); padding-top: var(--s-md); }
.profil h3 { margin: 0 0 var(--s-md); }
.profil__text { padding-bottom: var(--s-lg); }
.profil__text > :last-child { margin-bottom: 0; }
.profil > .hervor { margin: 0; }
.profil + .profil { margin-top: var(--s-xl); }
@media (min-width: 901px) {
  .profile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--col-gutter); row-gap: 0;
  }
  .profil {
    display: grid; grid-row: span 3;
    grid-template-rows: subgrid; row-gap: 0;
  }
  .profil + .profil { margin-top: 0; }
}
@media (max-width: 767px) {
  .profile { margin-top: var(--col-gutter); }
}

@media (min-width: 768px) {
  .satz > p + .knopfzeile { margin-top: var(--s-lg); }
}

@media (max-width: 1103px) and (min-width: 768px) {
  .kopf nav { flex-wrap: wrap; row-gap: var(--s-xs); }
}

#stimme .erklaerung__spalte { margin-top: var(--s-sm); }
@media (min-width: 901px) {
  #stimme .satz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(7, auto) 1fr;
  }
  #stimme .satz > .neben { grid-column: 2; grid-row: 3 / 9; }
}
@media (min-width: 1104px) {
  #stimme .satz {
    grid-template-columns: repeat(2, calc((var(--col-text) + var(--col-side)) / 2));
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  #stimme .satz > .neben {
    grid-column: 1 / -1;
    margin-top: var(--s-md);
  }
  #stimme .satz > .neben.erklaerung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--col-gutter);
    align-items: start;
  }
  #stimme .erklaerung > .kontext { grid-column: 1 / -1; }
}

.textkasten--betont .textkasten__links { font-weight: 700; }

.satz > .fragenfolge {
  border-left: 3px solid var(--amb);
  padding: 0 0 0 var(--s-lg);
  margin: var(--s-md) 0 var(--s-xl);
}
.fragenfolge p { margin: 0; }
.fragenfolge .fragenfolge__frage {
  font-family: var(--text);
  font-size: 22px; font-weight: 400; line-height: 1.45;
  text-wrap: pretty;
  hyphens: manual;
}
.fragenfolge .fragenfolge__frage + .fragenfolge__frage,
.fragenfolge .fragenfolge__antwort + .fragenfolge__frage { margin-top: var(--s-lg); }
.fragenfolge .fragenfolge__antwort {
  margin-top: var(--s-xs);
  font-family: var(--text);
  font-size: 18px; font-weight: 400; line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
  hyphens: manual;
}
.hero .fragenfolge .fragenfolge__antwort { color: var(--verlauf-text-zweit); }
.fragenfolge .fragenfolge__frage--schluss { font-weight: 700; }
@media (max-width: 767px) {

  .satz > .fragenfolge { margin-top: var(--s-xl); }
  .fragenfolge .fragenfolge__frage { font-size: 19px; }
  .fragenfolge .fragenfolge__antwort { font-size: 17px; }
}

@media (min-width: 768px) {
  #bsig .satz { grid-template-rows: repeat(7, auto) 1fr; }
  #bsig .satz > aside:first-of-type { grid-row: 4 / 9; }
  #bsig .satz > aside + aside { grid-row: 9; }
  #bsig .satz > .voll { grid-row: 10; }
}

.ausklapp__inhalt h3 {
  font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--ink);
  margin: var(--s-lg) 0 var(--s-sm);
}
.ausklapp__inhalt > h3:first-child { margin-top: 0; }

@media (min-width: 768px) {
  #bsig .satz > aside + aside { grid-column: 1; grid-row: 8; align-self: start; margin-top: var(--s-sm); }
  #bsig .satz > .voll { grid-row: 9; }
}

#anfrage .satz > .anfrage__einleitung { margin: 0 0 var(--s-lg); }
@media (min-width: 768px) {
  #anfrage .satz > .kontaktweg { grid-row: span 2; align-self: start; }
}
.kontaktweg__art { font-weight: 600; color: var(--ink); }
.platzhalter { background: var(--amb-soft); border-radius: var(--r-klein); padding: 0 4px; }

.anfrage { margin: 0; }
.anfrage fieldset {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  padding: var(--s-md) var(--s-lg) var(--s-lg); margin: 0 0 var(--s-lg); min-width: 0;
}
.anfrage legend {
  font-family: var(--head); font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--ink); padding: 0 var(--s-xs); margin-left: calc(-1 * var(--s-xs));
}
.anfrage__pflicht, .anfrage__hinweis {
  font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 var(--s-md);
}
.anfrage fieldset > .anfrage__hinweis { margin-top: var(--s-xs); }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.feldreihe + .feldreihe { margin-top: var(--s-md); }
.feld { display: flex; flex-direction: column; gap: var(--s-xxs); min-width: 0; }
.feld__name { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.feld__zusatz { font-weight: 400; color: var(--muted); }
.anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"],
.anfrage input[type="date"], .anfrage input[type="time"], .anfrage select, .anfrage textarea {
  box-sizing: border-box; width: 100%; min-height: 44px; margin: 0;
  padding: 10px 12px; font-family: var(--text); font-size: 16px; line-height: 1.4;
  color: var(--body); background: var(--white);
  border: 1px solid var(--linie); border-radius: var(--r-karte);
}
.anfrage textarea { resize: vertical; font-size: 14px; }
.anfrage select { appearance: auto; }
.wahl {
  display: flex; align-items: flex-start; gap: var(--s-sm);
  min-height: 44px; padding: 10px 0; box-sizing: border-box;
  font-size: 16px; line-height: 1.45; color: var(--body); cursor: pointer;
}
.wahl input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mid); cursor: pointer; }
.anfrage__termin { margin-top: var(--s-xs); }
.anfrage__termin[hidden] { display: none; }
.anfrage__einwilligung {
  border: 1px solid var(--border); border-radius: var(--r-gross);
  background: var(--surf); padding: var(--s-xs) var(--s-lg) var(--s-md); margin: 0 0 var(--s-lg);
}
.anfrage__einwilligung .anfrage__hinweis { margin: 0 0 0 32px; }
.anfrage .knopfreihe { margin-top: 0; }
.anfrage__ergebnis {
  margin-top: var(--s-lg); padding: var(--s-lg);
  border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--surf);
}
.anfrage__ergebnis[hidden] { display: none; }
.anfrage__ergebnis [role="status"] { font-weight: 600; color: var(--ink); margin: 0 0 var(--s-xs); }
.anfrage__ergebnis .knopfreihe { margin-top: var(--s-md); }
@media (max-width: 599px) {
  .feldreihe { grid-template-columns: 1fr; }
  .anfrage fieldset { padding: var(--s-sm) var(--s-md) var(--s-md); }
  .anfrage__einwilligung { padding: var(--s-xs) var(--s-md) var(--s-md); }
}