/* ============================================================================
   Naturnahe Kleine Wümme – gemeinsames Stylesheet
   Auftraggeber: Die Senatorin für Umwelt, Klima und Wissenschaft, Bremen.

   Gestaltungsidee „Der Lauf":
   Das Projektlogo ist eine fließende Linie mit aufgereihten Trittsteinen.
   Die Seite folgt derselben Logik – eine durchgehende senkrechte Linie
   verbindet die Abschnitte, jeder Abschnitt sitzt als Trittstein darauf.
   Kein Kachelraster: die Inhalte stehen in einer asymmetrischen Spur,
   links der Abschnittsname, rechts der Inhalt.

   Barrierefreiheit (BITV 2.0 / WCAG 2.1 AA ist hier Pflicht, nicht Kür):
   Salbei und Himmel tragen NIE Text. Das CD-Blau #0090ad (3,75 auf Weiß)
   ist Flächen- und Grafikfarbe, keine Textfarbe. Alle Texte und alle
   Bedienelemente laufen über --tinte (7,79), --tinte-2 (5,10) oder
   --akzent #006e85 (5,88 auf Weiß, 5,50 auf --grund, 5,88 mit weißer
   Schrift) – AA in beide Richtungen, auch auf den getönten Flächen.
   ========================================================================== */

/* ---------- Schriften (self-hosted, es geht keine IP an Dritte) ----------
   Jost = geometrische Grotesk, gewählt am Specimen gegen das Logo
   (spitzes A, gekreuztes W, kreisrunde O). Trägt die Überschriften.
   Inter trägt den Fließtext – auf einer Behördenseite mit viel Text zählt
   Lesbarkeit mehr als Formverwandtschaft. Lizenz beider: SIL OFL 1.1. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* CD des Projekts (studiolenz) */
  --blau: #0090ad;          /* Flächen, Grafik, große Headlines – NIE Fließtext */
  --himmel: #6cb0c1;        /* nur Fläche/Linie */
  --salbei: #9fbcae;        /* nur Fläche/Linie */

  /* Textsichere Abstufung desselben Blautons (Hue 190°) */
  --akzent: #006e85;        /* Links, Buttons, Auszeichnung */
  --akzent-tief: #005a6d;   /* Hover */
  --tief: #00414f;          /* dunkle Fläche – Weiß darauf 11,24 */

  --tinte: #4f5353;         /* Fließtext */
  --tinte-2: #6a6f6f;       /* Sekundärtext */
  --weiss: #ffffff;
  --grund: #f5f8f6;         /* sehr helles Salbei */
  --grund-kuehl: #eef4f6;   /* sehr helles Himmel */
  --linie: #dde5e1;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif-los: 'Jost', 'Futura', system-ui, sans-serif;

  --breite: 74rem;          /* Inhaltsbreite – gilt global, nicht je Abschnitt */
  --kopf-oben: 10px;        /* Luft über der Kopfzeile */
  --kopf-h: 86px;           /* Höhe der Kopfzeile im Ruhezustand */
  --logo-h: 62px;           /* Höhe des Logos darin */
  --luft: clamp(3.5rem, 7vw, 6.5rem);   /* Abstand zwischen Abschnitten */
  --radius: 14px;
}
/* ---------- Grundgerüst ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;               /* globaler Schutz gegen Seiten-Querscroll */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, .jost {
  font-family: var(--serif-los);
  color: var(--tinte);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); }
a:hover { color: var(--akzent-tief); }
:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 3px;
}

.inhalt {
  width: min(100% - clamp(2rem, 8vw, 5rem), var(--breite));
  margin-inline: auto;
}

/* Sprungmarke für Tastatur- und Screenreader-Nutzung (WCAG 2.4.1) */
.sprung {
  position: fixed;
  left: 0.75rem;
  top: -5rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--akzent);
  color: var(--weiss);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: 600;
}
.sprung:focus { top: 0; color: var(--weiss); }

/* ============================================================
   Kopfzeile – 1:1 nach der Referenz `anachb`:
   im Ruhezustand eine schlichte Leiste über die volle Breite,
   beim Scrollen zieht sie sich zu einer schwebenden Pille
   zusammen – schmaler, niedriger, mit Rundung, Glasfläche,
   feinem Rahmen und Schatten.

   Bewusst KEIN Burger: bei fünf Sprungzielen ist ein verstecktes
   Menü verschenkter Platz, und sichtbare Ziele werden geklickt.
   ============================================================ */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: var(--kopf-oben) clamp(16px, 3vw, 48px) 0;
  transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.kopf__innen {
  max-width: 2400px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  min-height: var(--kopf-h);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--weiss);
  transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              min-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s, box-shadow 0.4s, border-color 0.4s, border-radius 0.4s;
}
/* Nach dem Scrollen zieht sich die Leiste zu einer schwebenden Pille zusammen */
.kopf.fest { padding-top: calc(var(--kopf-oben) + 12px); }
.kopf.fest .kopf__innen {
  max-width: var(--breite);
  min-height: 62px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-color: rgba(0, 65, 79, 0.1);
  box-shadow: 0 16px 46px rgba(0, 65, 79, 0.16);
}

.kopf__logo { flex: 0 0 auto; display: block; line-height: 0; }
.kopf__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.kopf.fest .kopf__logo img { height: 40px; }

.kopf__aktion { flex: 0 0 auto; display: flex; align-items: center; gap: 0.75rem; }

/* ---------- Burger + Mobilmenü ----------
   Unter 680px ersetzt der Burger die Abschnittsreihe UND den Kontakt-Knopf;
   die Kopfzeile bleibt dadurch einzeilig. Darüber ist er ausgeblendet, dort
   stehen die Sprungziele sichtbar in der Leiste. */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(0, 65, 79, 0.16);
  border-radius: 12px;
  background: var(--weiss);
  cursor: pointer;
  position: relative;
}
.burger__striche,
.burger__striche::before,
.burger__striche::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  margin-left: -10px;
  background: var(--akzent);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.burger__striche { top: 50%; margin-top: -1px; }
.burger__striche::before { content: ''; top: -7px; margin-left: 0; left: 0; }
.burger__striche::after  { content: ''; top: 7px;  margin-left: 0; left: 0; }

/* Offen: aus den drei Strichen wird ein × – der sichtbare Schließweg. */
.burger[aria-expanded='true'] .burger__striche { background: transparent; }
.burger[aria-expanded='true'] .burger__striche::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__striche::after  { transform: translateY(-7px) rotate(-45deg); }

.mobilmenu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100dvh;          /* nicht inset:0 – sonst liegt der Fuß unter der iOS-Leiste */
  z-index: 55;             /* unter der Kopfzeile (60), damit der × klickbar bleibt */
  background: var(--weiss);
  overflow-y: auto;
  padding: calc(var(--kopf-oben) + var(--kopf-h) + 1.5rem) clamp(20px, 6vw, 36px) 3rem;
}
.mobilmenu__liste { list-style: none; margin: 0; padding: 0; }
.mobilmenu__liste li { border-bottom: 1px solid var(--linie); }
.mobilmenu__liste a {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--serif-los);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--tinte);
  text-decoration: none;
}
.mobilmenu__liste a:hover,
.mobilmenu__liste a:focus-visible { color: var(--akzent); }

/* Scroll-Lock: der body wird zum Scroll-Container, deshalb muss die sticky
   Kopfzeile auf fixed umschalten – sonst rutscht sie bei gescrollter Seite
   aus dem Bild und das offene Menü hätte keinen sichtbaren Schließknopf. */
body.menu-open { overflow: hidden; padding-top: calc(var(--kopf-oben) + var(--kopf-h)); }
body.menu-open .kopf { position: fixed; top: 0; left: 0; right: 0; }

.secnav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.secnav__spur {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;              /* die Reihe scrollt IN SICH, nie die Seite */
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 100%;
  scroll-behavior: smooth;
}
.secnav__spur::-webkit-scrollbar { display: none; }
.secnav a {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 6px 0 10px;
  color: var(--tinte);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
}
.secnav a:hover, .secnav a[aria-current='true'] { color: var(--akzent); }
/* Die Marke fährt von links ein – wie bei der Referenz, nur als WELLE
   statt als gerader Strich: dieselbe Kurve wie der Lauf, waagerecht. */
.secnav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M0 4C3.7 6.6 7.3 1.4 11 4c3.7 2.6 7.3-2.6 11 0' fill='none' stroke='%23006e85' stroke-width='1.7'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 22px 8px;
  transition: right 0.3s ease;
}
.secnav a:hover::after, .secnav a[aria-current='true']::after { right: 0; }

/* ============================================================
   Startbereich – eingerückte Bühne nach der Referenz `anachb`:
   Foto als abgerundeter Block, darauf mittig Pille, Überschrift,
   Unterzeile und zwei Knöpfe.

   Das Overlay ist kräftig, weil der untere Bildbereich heller Kies
   ist; auf dem Original trägt ein dunkles Motiv den Text von allein.
   Die Bühne liegt absolut über ihrem Platzhalter, damit das Skript
   sie beim Scrollen in Breite und Position frei animieren kann.
   ============================================================ */
/* Maße 1:1 nach der Referenz `anachb`: 48px Rand je Seite statt des
   Inhaltsrasters, dadurch läuft die Bühne fast über die ganze Breite.

   Die Luft ÜBER der Bühne wird ab der Unterkante des Logos gemessen, nicht
   ab der Kopfzeile – so wirkt sie optisch gleich groß wie die Luft bis zum
   unteren Bildschirmrand. Beides rechnet sich aus --kopf-h und --logo-h,
   zieht also mit, wenn das Logo seine Größe ändert. */
.start {
  --luftig: 34px;
  --logo-unten: calc((var(--kopf-h) + var(--logo-h)) / 2);
  --gleich: calc(var(--luftig) + var(--kopf-h) - var(--logo-unten));
  padding: calc(var(--luftig) - var(--kopf-oben)) 0 clamp(3rem, 6vw, 5.5rem);
}
.buehne {
  position: relative;
  transform-origin: 50% 0;       /* schrumpft beim Scrollen zur Oberkante hin */
  will-change: transform;
  width: min(100% - 96px, 1920px);
  margin-inline: auto;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: var(--tief);
  /* Höhe so, dass unter der Bühne genauso viel Luft bleibt wie darüber.
     min-height, nie height – sonst läuft der Inhalt aus der Fläche.
     svh statt vh, sonst springt die Höhe auf iOS mit der Adressleiste. */
  min-height: clamp(
    30rem,
    calc(100svh - var(--kopf-h) - var(--luftig) - var(--gleich)),
    60rem
  );
  display: grid;
  place-items: center;
  padding: clamp(46px, 6vw, 84px) clamp(20px, 4vw, 56px);
}
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* Reflexe auf dem Wasser: zwei sehr flache, schräg laufende Lichtbänder,
   die langsam über das Bild wandern. Sie liegen UNTER dem Schleier – so
   dämpft der sie mit und der gemessene Textkontrast bleibt erhalten.
   Bei „Bewegung reduzieren" stehen sie still. */
.buehne__reflex {
  position: absolute;
  inset: -20% -10%;
  background:
    repeating-linear-gradient(101deg,
      rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 30px,
      rgba(255, 255, 255, 0.20) 52px, rgba(255, 255, 255, 0.05) 70px,
      rgba(255, 255, 255, 0) 96px, rgba(255, 255, 255, 0) 168px),
    repeating-linear-gradient(96deg,
      rgba(214, 232, 238, 0) 0, rgba(214, 232, 238, 0) 70px,
      rgba(214, 232, 238, 0.16) 104px, rgba(214, 232, 238, 0) 146px,
      rgba(214, 232, 238, 0) 280px),
    repeating-linear-gradient(107deg,
      rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 190px,
      rgba(255, 255, 255, 0.10) 226px, rgba(255, 255, 255, 0) 268px,
      rgba(255, 255, 255, 0) 430px);
  opacity: 0.9;
  animation: wogen 24s linear infinite alternate;
  pointer-events: none;
}
@keyframes wogen {
  from { transform: translate3d(-40px, 14px, 0) skewY(0deg); }
  to { transform: translate3d(120px, -34px, 0) skewY(-0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .buehne__reflex { animation: none; }
}

.buehne__schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 51, 62, 0.56) 0, rgba(0, 51, 62, 0.42) 38%, rgba(0, 51, 62, 0.66) 100%),
    rgba(0, 51, 62, 0.44);
}
.buehne__inhalt {
  position: relative;
  text-align: center;
  width: min(100%, 52rem);
}
/* Auftaktzeile über der Überschrift – ohne Rahmen, dicht an der Zeile
   darunter: sie gehört zur Überschrift und soll keine eigene Fläche bilden. */
.buehne__vorzeile {
  display: block;
  max-width: 100%;
  margin: 0 0 clamp(0.4rem, 1vw, 0.65rem);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--serif-los);
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.start h1 { margin: 0; }
.start__z1, .start__z2 { display: block; line-height: 1.07; color: var(--weiss); }
.start__z1 { font-weight: 300; font-size: clamp(2rem, 1.15rem + 3.4vw, 3.75rem); }
.start__z2 { font-weight: 600; font-size: clamp(2rem, 1.15rem + 3.4vw, 3.75rem); }
.buehne__unter {
  margin: clamp(1.1rem, 2.5vw, 1.6rem) auto 0;
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
}
.buehne__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* ============================================================
   Abschnitte – die Spur „Der Lauf"
   ============================================================ */
.abschnitt {
  position: relative;
  padding-block: var(--luft);
  scroll-margin-top: calc(var(--kopf-h) + 0.5rem);
}
.abschnitt--getoent { background: var(--grund); }
/* Zwei gleich getönte Abschnitte hintereinander: kein doppelter Abstand */
.abschnitt--getoent + .abschnitt--getoent { padding-top: 0; }

.abschnitt__raster {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: 0 4.5rem;                 /* 3rem + je 12px Luft links und rechts der Linie */
  position: relative;
}

/* Die durchgehende Linie des Laufs – leicht wellig, wie das Gewässer im Logo.
   Sie gehört der gemeinsamen Zone um ALLE Abschnitte, nicht dem einzelnen
   Abschnitt: nur so ist es eine Welle mit konstanter Wellenlänge und ohne
   Nahtstellen. Am Raster durfte sie ohnehin nicht hängen – das beginnt erst
   hinter dem Innenabstand, dadurch blieb an jedem Abschnittsende ein Stück
   Linie frei.

   Der Abstand vom linken Rand wird aus derselben Formel gerechnet wie die
   Breite von `.inhalt`, plus Spaltenbreite (14,5rem) und halber
   Spaltenabstand (1,5rem), minus halbe Kachelbreite.

   z-index 1, weil die getönten Abschnitte einen eigenen Hintergrund haben und
   sonst über der Linie lägen. Sie verläuft in der Lücke zwischen Marginalspalte
   und Inhalt, kreuzt also keinen Text. */
.lauf-zone { position: relative; }
.lauf-zone::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: calc((100% - min(100% - clamp(2rem, 8vw, 5rem), var(--breite))) / 2 + 16.75rem - 6px);
  top: 0;
  bottom: 14rem;                 /* der Lauf endet vor der Fußzeile, er läuft aus */
  width: 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='120' viewBox='0 0 12 120'%3E%3Cpath d='M6 0C9 20 3 40 6 60c3 20-3 40 0 60' fill='none' stroke='%236cb0c1' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 12px 120px;
  opacity: 0.65;
  pointer-events: none;
}

/* Trittstein und Abschnittsname stehen bündig untereinander, links neben
   der Linie – der Stein liegt am Ufer, nicht auf dem Wasser. */
.spur { position: relative; text-align: right; }
.spur__stein {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  margin: 0 0 0.85rem auto;
}
.spur__name {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0;
  text-wrap: balance;
}

/* Abschnittskopf: Überschrift links, Einleitung rechts */
/* Die Einleitung steht unter der Überschrift, nicht daneben: neben der
   großen Grotesk konkurriert ein gleich großer Textblock mit ihr. */
.abschnitt__kopf { margin-bottom: clamp(2rem, 4vw, 3rem); }
h2 {
  margin: 0;
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  line-height: 1.15;
}
h2 .duenn { display: block; font-weight: 300; }
h2 .fett { display: block; font-weight: 600; }
.abschnitt__einleitung {
  color: var(--tinte);
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 44rem;
}

/* ---------- Ziele: ruhige Textzeilen, kein Kachelraster ---------- */
.ziele { list-style: none; margin: 0; padding: 0; }
.ziele li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--linie);
}
.ziele img { display: block; width: 4.25rem; height: 4.25rem; object-fit: contain; }
.ziel__titel {
  font-family: var(--serif-los);
  font-size: clamp(1.1875rem, 1.1rem + 0.6vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.ziel__text { margin: 0; color: var(--tinte); max-width: 46rem; }

/* ---------- Projektkarte + Stationen ---------- */
/* Die Projektkarte ist der Kern dieses Abschnitts und steht deshalb groß
   über der vollen Inhaltsbreite; Stationen und Hintergrund folgen darunter
   zweispaltig. Neben der Karte wären beide Spalten zu schmal geworden. */
.karte__bild {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);   /* linksbündig zur Überschrift */
  width: min(100%, 44rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.karte__text {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
/* Textfassung der Karte – kurze Zeile direkt unter der Grafik. Sie trägt die
   Begründung in der Erklärung zur Barrierefreiheit („Sämtliche Angaben der Karte
   stehen unmittelbar daneben zusätzlich als Text zur Verfügung"). Label steht
   über dem Wert, nicht daneben. */
.karte__stationen {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 44rem;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--tinte-2);
}
.karte__stationen-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
}

.karte__bild img { display: block; width: 100%; height: auto; }
.karte__quelle {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--tinte-2);
}

/* Die Stationen als Zickzack-Treppe: die Karten wechseln links/rechts
   und versetzen sich nach unten, verbunden über Linien – der Lauf des
   Gewässers als Abfolge gelesen. Muster aus `bu-rechte/#ablauf`.
   Bewusst keine zweite senkrechte Linie: daneben läuft schon der Lauf. */
.stationen { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.stationen__titel {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 0.5rem;
}
.stationen__vor {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 44rem;
  color: var(--tinte);
}
.zickzack {
  --versatz: clamp(2rem, 5vw, 4.5rem);   /* wie tief die rechte Karte sitzt */
  --spalte: clamp(1.75rem, 4.5vw, 4rem); /* Spaltenabstand = Länge der Querlinie */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spalte);
  row-gap: 0.4rem;
  align-items: start;
}
.zst {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.zst:nth-child(even) { margin-top: var(--versatz); }
/* links → rechts: waagerechte Linie durch den Spaltenabstand.
   An der UNTERKANTE der Karte ausgerichtet, nicht an einem festen Abstand
   von oben: sonst liegt sie bei kurzen Karten unterhalb der Karte in der
   Luft – genau daran hing die fehlende Verbindung 03→04 und 05→06. */
.zst:nth-child(odd):not(:last-child)::after {
  content: '';
  position: absolute;
  left: 100%;
  bottom: 2rem;
  width: var(--spalte);
  border-top: 1px solid var(--salbei);
}
/* rechts → links: Bogen nach links, dann hinunter zur nächsten Karte */
.zst:nth-child(even):not(:last-child)::after {
  content: '';
  position: absolute;
  right: 100%;
  top: calc(100% - 3rem);
  height: calc(3rem + 0.4rem);
  width: calc(var(--spalte) + 42%);
  border-top: 1px solid var(--salbei);
  border-left: 1px solid var(--salbei);
  border-top-left-radius: 12px;
}
.zst__nr {
  display: block;
  font-family: var(--serif-los);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--akzent);
  margin-bottom: 0.4rem;
}
.zst__ort {
  font-family: var(--serif-los);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.35rem;
  color: var(--tinte);
}
.zst__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--tinte-2); }

/* ---------- Registerkarten im Abschnitt „Das Vorhaben" ----------
   Drei Hintergrundtexte teilen sich eine Fläche. Die Blätter liegen im
   selben Grid-Feld übereinander: der längste Text bestimmt die Höhe, beim
   Wechsel springt nichts. Inaktive Blätter sind `visibility: hidden` –
   damit sind sie auch für Screenreader und die Tabulatorreihenfolge weg,
   behalten aber ihren Platz im Raster. */
.reiter__ueberschrift {
  margin: clamp(64px, 6vw, 82px) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  font-family: var(--serif-los);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  line-height: 1.15;
}
.reiter__ueberschrift .duenn,
.reiter__ueberschrift .fett { display: block; color: var(--tinte); }
.reiter__ueberschrift .duenn { font-weight: 300; }
.reiter__ueberschrift .fett { font-weight: 600; }
.reiter { margin-top: 0; }
.reiter__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(0.5rem, 1.5vw, 0.85rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  padding: 2px;          /* Luft für den Schatten der aktiven Kachel */
}
/* Jede Registerkarte ist eine weiße Pille. Läuft der Timer, flutet sie
   von links nach rechts blau – die Wasserfront ist eine Wellenkante, und
   der Text wechselt dabei auf Weiß. Dafür liegt eine zweite, weiße
   Textkopie in der Füllung: die Füllung deckt sie beim Wachsen auf.
   `overflow: hidden` am Knopf beschneidet beides an der Rundung. */
.reiter__knopf {
  --pad-x: 1.3rem;
  --pad-y: 0.72rem;
  position: relative;
  overflow: hidden;
  appearance: none;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 999px;
  cursor: pointer;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--serif-los);
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinte-2);
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.reiter__knopf:hover { color: var(--akzent); border-color: rgba(0, 110, 133, 0.3); }
.reiter__knopf[aria-selected='true'] {
  border-color: var(--akzent);
  box-shadow: 0 2px 10px rgba(0, 65, 79, 0.08);
}
.reiter__text { position: relative; white-space: nowrap; }

.reiter__fuell {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;      /* beschneidet die weiße Textkopie an der Wasserlinie */
  background: var(--akzent);
  pointer-events: none;
}
/* Die weiße Kopie steht exakt über dem Original – gleiche Innenabstände,
   und sie wandert nicht mit der Breite der Füllung. */
.reiter__fuell .reiter__text {
  position: absolute;
  left: var(--pad-x);
  top: var(--pad-y);
  color: var(--weiss);
  font-weight: inherit;
}

/* Wasserfront: eine senkrechte Wellenkante am vorderen Ende der Füllung.
   Sie erscheint nur, solange geflutet wird – steht die Füllung, ist sie
   entweder bei 0 (Reiter inaktiv) oder von der Pille weggeschnitten. */
.reiter__knopf::after {
  content: '';
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='22' viewBox='0 0 8 22'%3E%3Cpath d='M0 0h3.5c3 3.7-3 7.3 0 11 3 3.7-3 7.3 0 11H0z' fill='%23006e85'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 8px 22px;
}
@keyframes reiter-front { from { left: 0; } to { left: 100%; } }
.reiter__knopf.laeuft::after {
  display: block;
  animation: reiter-front 10s linear forwards;
}

/* Der Nutzer hat selbst gewählt: die Pille steht sofort voll gefüllt. */
.reiter__knopf[aria-selected='true'] .reiter__fuell { width: 100%; }
@keyframes reiter-fluten { from { width: 0; } to { width: 100%; } }
.reiter__knopf.laeuft .reiter__fuell { animation: reiter-fluten 10s linear forwards; }

/* Anhalten außerhalb des Sichtfelds: BEIDE Animationen zusammen. Wurde nur
   die Füllung pausiert, lief die Wellenkante weiter – sie stand dann ein
   Stück vor dem Balken, und der Vorsprung blieb bis zum Rundenende. */
.reiter__knopf.pause::after,
.reiter__knopf.pause .reiter__fuell { animation-play-state: paused; }

/* Die Bühne wächst auf die Höhe der gewählten Karte. Ohne das stünde sie
   immer auf der Höhe des längsten Textes – unter den kurzen Karten klaffte
   dann ein Loch. Die Höhe setzt app.js; ohne JavaScript bleibt sie „auto“
   und damit so hoch wie der längste Text. */
.reiter__buehne {
  display: grid;
  /* start: sonst zieht das Grid jede Karte auf die Höhe der höchsten –
     dann misst die Höhenanpassung überall denselben Wert. */
  align-items: start;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reiter__buehne { transition: none; }
}
.reiter__blatt {
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.reiter__blatt.aktiv { visibility: visible; opacity: 1; }
.reiter__titel {
  font-family: var(--serif-los);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  line-height: 1.2;
  margin: 0 0 1rem;
}
.reiter__titel .duenn { font-weight: 300; }
.reiter__titel .fett { font-weight: 600; }
.reiter__blatt p { max-width: 48rem; }
.reiter__quelle {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tinte-2);
}

/* ---------- Zitat ---------- */
/* Gemeinsamer Abstand für Zitat und Trittstein – sie liegen in derselben
   Rasterzeile, jeder Wert muss also bei beiden ankommen. */
.abschnitt__raster { --zitat-luft: clamp(72px, 6.5vw, 96px); }
.zitat { margin: var(--zitat-luft) 0 24px; }
.spur--zitat { margin-top: var(--zitat-luft); }
.zitat__stein {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  display: block;
  margin: 0 0 0 auto;
}
.zitat blockquote { margin: 0; }
.zitat p {
  font-family: var(--serif-los);
  font-weight: 300;
  font-size: clamp(1.3125rem, 1.05rem + 1.25vw, 1.9375rem);
  line-height: 1.35;
  color: var(--tinte);
  max-width: 44rem;
}
.zitat figcaption {
  margin-top: 1.2rem;
  font-size: 0.9375rem;
  color: var(--tinte-2);
}
.zitat figcaption strong { display: block; color: var(--tinte); font-size: 1rem; }

/* ---------- Beteiligte und Förderung ----------
   Statt drei gleichwertiger Spalten eine echte Hierarchie: der Träger zuerst
   und groß, darunter Partner und Mittel, zuletzt abgesetzt der Kontakt. */
.block__titel {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 1.2rem;
}
.traeger { margin: 0 0 clamp(2.25rem, 4vw, 3.25rem); }
.traeger__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 0.7rem;
}
.traeger__name {
  display: block;
  font-family: var(--serif-los);
  font-weight: 300;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.25;
  color: var(--tinte);
  max-width: 40rem;
  text-wrap: balance;
}

/* Jeder Partner in einer eigenen Kachel, zwei Spalten, zwei Zeilen. */
.partner-kacheln {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
}
.partner-kacheln li {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.2vw, 1.5rem);
  font-family: var(--serif-los);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinte);
}
.abschnitt--getoent .partner-kacheln li { background: var(--weiss); }

.finanzierung { max-width: 46rem; }
.mittel__zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 1.4rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
  background: var(--grund);
  border-radius: 10px;
}
.mittel__posten { margin: 0; }
.mittel__label {
  display: block;                /* Label und Wert nie inline aneinander */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-2);
  margin: 0 0 0.35rem;
}
.mittel__wert {
  display: block;
  margin: 0;
  font-family: var(--serif-los);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.1;
  color: var(--blau);            /* große fette Schrift – über der Schwelle 3,0 */
}
.mittel__einordnung { font-size: 0.9375rem; color: var(--tinte-2); }

.kontakt__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.kontakt__zeile { margin-bottom: 0; }
.kontakt__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-2);
  margin-bottom: 0.2rem;
}
.kontakt__wert { display: block; overflow-wrap: anywhere; }  /* lange Mailadressen */
.block__titel--folge { margin-top: 2rem; }
.fuss__traeger { margin: 0; }

/* Offene Angaben sichtbar markieren statt sie zu erfinden */
.offen {
  display: inline-block;
  background: var(--grund-kuehl);
  border-left: 3px solid var(--akzent);
  padding: 0.15rem 0.55rem;
  color: var(--tinte);
  font-size: 0.9375rem;
}

/* ---------- Ausblick ---------- */
.schritte { list-style: none; margin: 0; padding: 0; }
.schritte li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  border-top: 1px solid var(--linie);
}
.schritte li:last-child { border-bottom: 1px solid var(--linie); }
.schritte img { width: 3.25rem; height: 3.25rem; object-fit: contain; display: block; }
.schritt__titel {
  font-family: var(--serif-los);
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 0.3rem;
}
.schritt__text { margin: 0; max-width: 46rem; }

/* ============================================================
   Fußzeile
   Das BMUV/ANK-Förderlogo hat hier seine Pflichtplatzierung.
   Es steht auf Weiß, mit freier Schutzzone (≈16 % der Logohöhe
   oben/unten, ≈6 % der Breite seitlich) – siehe Logo-Manual.
   ============================================================ */
.fuss { position: relative; }

/* Der Lauf endet im Footer: eine Wellenkante führt vom hellen Inhalt in die
   dunkle Fläche. Dieselbe Kurve wie im Menü und an der Marginalspur, nur
   über die volle Breite gekachelt. */
.fuss__kante {
  height: 34px;
  margin-bottom: -1px;           /* keine Haarlinie zwischen Welle und Fläche */
  /* Zwei Lagen: die dunkle Wasserfläche und darüber, leicht versetzt, eine
     zweite Linie in Himmelblau – wie zwei Wellen hintereinander. Lange
     Periode und flache Amplitude, sonst wirkt es wie Wolken statt Wasser. */
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 20C40 12 80 12 120 20s80 8 120 0v14H0z' fill='%2300414f'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cpath d='M0 12C40 4 80 4 120 12s80 8 120 0' fill='none' stroke='%236cb0c1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x;
  background-position: left bottom, 60px bottom;
  background-size: 240px 34px, 240px 34px;
}

.fuss__dunkel {
  background: var(--tief);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Oben: Marke und Anspruch links, das Förderlogo als helle Karte rechts. */
.fuss__kopf {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.fuss__logo { display: block; width: min(100%, 19rem); height: auto; }
.fuss__claim {
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  max-width: 30rem;
  font-family: var(--serif-los);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.4;
  color: var(--weiss);
}

/* Pflichtplatzierung: das Förderlogo steht auf Weiß. Die Schutzzone steckt
   BEREITS in der gelieferten SVG-Datei – gemessen 6,1 % der Logobreite
   seitlich und 16,5 % der Logohöhe oben/unten, also genau die Werte des
   Manuals. Ein zusätzliches Padding am Bild würde sie doppelt anlegen und
   das Logo unnötig verkleinern; die Luft zur Kartenkante leistet das
   Padding der Karte. */
.foerderung {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  justify-self: end;
  width: min(100%, 37rem);       /* ≈ halbe Inhaltsbreite */
}
.foerderung__logo { display: block; background: var(--weiss); }
.foerderung__logo img { display: block; width: 100%; height: auto; }
.foerderung__text {
  margin: 1.1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tinte);
}

.fuss__spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.fuss__titel {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--weiss);
}
.fuss__spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss__spalte li { margin-bottom: 0.55rem; }
.fuss__spalte a,
.fuss__kontakt a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.fuss__spalte a:hover,
.fuss__spalte a:focus-visible,
.fuss__kontakt a:hover,
.fuss__kontakt a:focus-visible { color: var(--weiss); text-decoration: underline; }
.fuss__kontakt { margin: 0; }
.fuss__sozial { margin: 1.1rem 0 0; }
.sozial {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.sozial:hover,
.sozial:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--weiss);
  text-decoration: none;
}
.sozial__zeichen { flex: 0 0 auto; display: block; }
.fuss__kontakt span { display: block; margin-bottom: 0.4rem; overflow-wrap: anywhere; }

.fuss__schluss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.5rem, 4vw, 3rem);
  justify-content: space-between;
  align-items: baseline;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
}
.fuss__traeger { margin: 0; color: rgba(255, 255, 255, 0.82); }
.fuss__hinweis { margin: 0; color: rgba(255, 255, 255, 0.68); }

/* ============================================================
   Rechtstexte (Impressum, Datenschutz, Barrierefreiheit, 404)
   ============================================================ */
.rechtstext { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rechtstext h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 600;
  margin: 0 0 1.75rem;
}
.rechtstext h2 {
  font-size: clamp(1.1875rem, 1.1rem + 0.6vw, 1.4375rem);
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
}
.rechtstext h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
.rechtstext p, .rechtstext li { max-width: 46rem; }
/* Anschriften: jede Zeile ein eigenes Blockelement statt <br> */
.anschrift span { display: block; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: 0.4rem; }

.fehler { padding-block: clamp(3rem, 8vw, 6rem); }
.fehler__code {
  font-family: var(--serif-los);
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  font-weight: 300;
  line-height: 1;
  color: var(--blau);
  margin: 0 0 0.5rem;
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.knopf {
  display: inline-block;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--weiss);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--akzent);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: var(--weiss); }
/* Maße 1:1 wie der Knopf in der Referenz-Kopfzeile. Die line-height ist
   entscheidend: ohne sie erbt der Knopf die 1,65 des Fließtexts und wird
   deutlich zu hoch. */
.knopf--klein {
  padding: 13px 24px;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1;
}
.knopf--hell {
  background: var(--weiss);
  color: var(--akzent);          /* 5,88 auf Weiß */
  border-color: var(--weiss);
}
.knopf--hell:hover { background: #d6e8ee; border-color: #d6e8ee; color: var(--akzent-tief); }
.knopf--hell:focus-visible { outline-color: var(--weiss); outline-offset: 4px; }
/* Dunkles Glas, nicht helles: der Zweitknopf liegt auf hellem Kies,
   mit einer weißen Glasfläche käme weiße Schrift nur auf 2,3. */
.knopf--glas {
  background: rgba(0, 51, 62, 0.38);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--weiss);
}
.knopf--glas:hover { background: rgba(0, 51, 62, 0.62); border-color: var(--weiss); color: var(--weiss); }
.knopf--glas:focus-visible { outline-color: var(--weiss); outline-offset: 4px; }
.knopf--leise { background: transparent; color: var(--akzent); border-color: var(--linie); }
.knopf--leise:hover { background: var(--grund); color: var(--akzent-tief); border-color: var(--akzent); }

/* ============================================================
   Bewegung
   Bewusst kein Einblenden beim Scrollen: gewünscht war ein sehr
   ruhiger Auftritt, und ein Reveal ist die einzige Konstruktion,
   bei der Inhalt unsichtbar bleiben kann, wenn das Skript nicht
   greift. Es bleiben die Übergänge an Bedienelementen.
   ============================================================ */
/* Gestaffeltes Einblenden: nicht der ganze Abschnitt auf einmal, sondern
   Überschrift, Text und dann die Einträge nacheinander. Die Verzögerung
   setzt das Skript je Element (--verzug). Die Klasse kommt ebenfalls erst
   vom Skript – ohne JavaScript ist alles sichtbar. */
.zeig--aus { opacity: 0; transform: translateY(18px); }
.zeig--aus.da {
  opacity: 1;
  transform: none;
  transition: opacity 0.65s ease var(--verzug, 0s),
              transform 0.65s cubic-bezier(0.22, 0.8, 0.28, 1) var(--verzug, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeig--aus, .zeig--aus.da { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Umbrüche
   ============================================================ */
@media (max-width: 1080px) {
  /* Marke und Förderkarte untereinander, die Karte bleibt linksbündig. */
  .fuss__kopf { grid-template-columns: minmax(0, 1fr); }
  .foerderung { justify-self: start; }
}
@media (max-width: 820px) {
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  /* Schmaler Bildschirm: das scharfe Foto läuft selbst bis zum Rand, ein
     15px breiter unscharfer Streifen daneben sähe nach Fehler aus. */
  .buehne__bild { width: 100%; }
  .buehne__echo { display: none; }
  .karte__text { grid-template-columns: minmax(0, 1fr); }
  .beteiligte { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  /* Die Spur klappt über den Inhalt: Trittstein und Abschnittsname
     stehen dann nebeneinander, die senkrechte Linie entfällt. */
  .abschnitt__raster { grid-template-columns: minmax(0, 1fr); }
  .lauf-zone::before { display: none; }
  .spur {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    text-align: left;
  }
  .spur__stein { width: 2.5rem; height: 2.5rem; margin: 0; }
  .zitat__stein { margin: 0 0 1.25rem; }
  /* Einspaltig stehen Stein und Zitat untereinander – der Abstand darf dann
     nur einmal gezählt werden, sonst klafft die doppelte Lücke. */
  .zitat { margin-top: 0; }
  .secnav__spur { justify-content: flex-start; }
}
@media (max-width: 780px) {
  /* Zickzack einspaltig: zwei Spalten passen hier nicht mehr, und die
     Verbindungslinien würden ins Leere zeigen. */
  .zickzack { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .zst:nth-child(even) { margin-top: 0; }
  .zst::after { display: none !important; }
  .partner-kacheln { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  /* Schmaler Bildschirm: das Foto wird hochformatiger und die Überschrift
     ragt weniger weit ins Bild – sie braucht sonst zu viel Platz darin. */
  .buehne__bild img { aspect-ratio: 4 / 3; }
  .start { --kante: 2.75rem; }
  .ziele li { grid-template-columns: 3rem minmax(0, 1fr); }
  .ziele img { width: 3rem; height: 3rem; }
  .mittel__zahlen { gap: 1rem 2rem; }
}
/* Unter 560px reicht die Zeile nicht mehr für Logo UND vier Sprungziele:
   dann bekommt die Abschnittsreihe eine eigene Zeile über die volle Breite.
   Sichtbare Ziele werden geklickt, versteckte nicht. */
@media (max-width: 860px) {
  /* Die Bühne wird sonst sehr hochformatig und zeigt nur einen schmalen
     Ausschnitt des Motivs. */
  .buehne { min-height: clamp(24rem, 62svh, 34rem); }
}
@media (max-width: 680px) {
  /* Auf dem Handy führt der Burger ins Menü; die Abschnittsreihe und der
     Kontakt-Knopf stecken darin. Die Kopfzeile bleibt so einzeilig. */
  .kopf__aktion { margin-left: auto; }
  .kopf__aktion .knopf { display: none; }
  .secnav { display: none; }
  .burger { display: block; }

  /* Rand um das Startbild: 24px je Seite statt 48px. */
  .buehne { width: min(100% - 48px, 1920px); }

  /* Nebeneinander passen die drei hier nicht, und seitliches Wischen
     versteckt den dritten Reiter. Deshalb stehen sie untereinander, jede
     Pille über die volle Breite: alles sichtbar, große Tippflächen, und
     die Flutung hat mehr Strecke. */
  .reiter__leiste {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: visible;
    gap: 0.5rem;
    padding: 2px;
  }
  .reiter__knopf { width: 100%; text-align: left; }
}
@media (max-width: 560px) {
  .fuss__spalten { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .fuss__schluss { flex-direction: column; align-items: flex-start; }
}
/* Auf sehr schmalen Geräten rückt das große Logo dem Burger zu dicht auf die
   Pelle – dort bleibt es etwas kleiner. Die Kopfhöhe zieht mit. */
@media (max-width: 400px) {
  :root { --kopf-h: 76px; --logo-h: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .reiter__knopf.laeuft .reiter__fuell { animation: none; width: 100%; }
  .reiter__knopf.laeuft::after { display: none; animation: none; }
  .reiter__blatt { transition: none; }
  .burger__striche,
  .burger__striche::before,
  .burger__striche::after { transition: none; }
}