/* Challenge & Courage – Startseite S01, High-End-Look (ab 22.09.2026)
   Quelle: CC Startseite High-End.dc.html
   Raster nach Spezifikation: Viewport 1440, Inhaltsbreite 1200, Pruefbreiten 1440 / 1024 / 390.
   Farben und Schriften kommen aus dem Design System (tokens/). */

@import url("../../tokens/fonts.css");
@import url("../../tokens/typography.css");
@import url("../../tokens/colors.css");
@import url("../../tokens/spacing.css");

:root {
  /* Seitenraster: Aussenabstand faellt von 120px auf 20px, Inhalt bleibt bei 1200px */
  --gut: clamp(20px, calc(9.524vw - 17.14px), 120px);
  --inhalt: 1200px;
  /* Kopfbereich und Fuss laufen etwas breiter als der Inhalt. Bei 1440 sind
     beide gleich (1440 minus zweimal 120 Rand = 1200), erst darueber setzt
     sich das Geruest sichtbar ab. Gedeckelt, damit es auf grossen Schirmen
     nicht auseinanderlaeuft. */
  --inhalt-weit: 1440px;
  --sec-y: clamp(56px, 6.2vw, 88px);
  --sec-y-lg: clamp(72px, 7.8vw, 112px);
  /* High-End-Typoskala (groesser als die Brand-Skala in tokens/typography.css) */
  --he-h1: 800 clamp(44px, 6.7vw, 96px)/0.98 var(--font-display);
  --he-h2: 800 clamp(28px, 3.06vw, 44px)/1.06 var(--font-display);
  --he-h2-gross: 800 clamp(28px, 4.48vw, 64px)/1.02 var(--font-display);
  --he-h2-brueck: 800 clamp(28px, 4.45vw, 64px)/1.02 var(--font-display);
  --he-h3: 700 clamp(17px, 1.46vw, 21px)/1.2 var(--font-display);
  --he-kachel: 800 clamp(21px, 1.95vw, 28px)/1.1 var(--font-display);
  --he-lead: 400 clamp(17px, 1.46vw, 21px)/1.45 var(--font-body);
  --he-body: 400 clamp(15px, 1.19vw, 17px)/1.55 var(--font-body);
  --he-stat: 800 clamp(44px, 4.45vw, 64px)/1.0 var(--font-display);
  --label: 700 12.5px/1.2 var(--font-display);
  --label-sp: 0.12em;
  --kopf-h: 136px;
  /* Top-Bar 80 + Navigation 56 */
  --kopf-kompakt-h: 112px;
  /* Pfeilspitzen als gezeichnete Form statt als Schriftzeichen. Strichstaerke 3
     im 24er Raster entspricht bei 1em rund 2 Pixel - das passt zur Strichstaerke
     der 600er Schrift, in der die Links gesetzt sind. */
  --spitze-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14.5'/%3E%3Cpath d='M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E");
  --spitze-unten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E");
  /* Kontakt-Sinnbilder. Gezeichnet wie die Pfeilspitzen: 24er-Feld,
     Strichstaerke 3, runde Enden - damit sie zur Schriftdicke passen und
     nicht wie aus einem fremden Satz wirken. */
  --sinn-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A17.5 17.5 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2Z'/%3E%3C/svg%3E");
  --sinn-brief: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
  --sinn-haus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 12v8.5h13V12'/%3E%3C/svg%3E");
  --violett-text: #5c2d86;
  --gruen-text: #2e7c35;
  --blau-2-tint-hover: #cfd7ef;
  --violett-tint-hover: #dcc2f2;
  --gruen-hover: #c9f562;
  --knopf1-flaeche: var(--cc-blau-2);
  --knopf1-flaeche-hover: var(--cc-blau-2-hover);
  --knopf1-schrift: #fff;
  --knopf2-flaeche: var(--cc-blau-2-tint);
  --knopf2-flaeche-hover: var(--blau-2-tint-hover);
  --knopf2-schrift: var(--cc-blau-1);
  --knopf2-rahmen: transparent;
  --knopf3-schrift: var(--cc-blau-1);
  --knopf3-rahmen: var(--cc-blau-1);
  --knopf3-flaeche-hover: rgba(3, 26, 128, .08);
  /* QM 29.09.: Signalblau als kleine Schrift lag auf hellem Grund bei 3,8 bis
     4,4:1. Fuer Text das dunklere Blau aus den Tokens (5,1 bis 5,9:1), die
     Knopfflaeche bleibt Signalblau. */
  --link-schrift: var(--cc-blau-2-hover);
  --link-schrift-hover: var(--cc-blau-1);
  /* Erlaubt es, auf "auto" und "max-content" zu animieren - Voraussetzung
     fuer das Akkordeon weiter unten. */
  interpolate-size: allow-keywords;
  /* Eine ruhigere Kurve als --ease-out: startet weicher, laeuft laenger aus.
     Fuer alles, was sich oeffnet oder hereinschiebt. */
  --ease-weich: cubic-bezier(0.22, 0.61, 0.24, 1);
  --dur-auf: 420ms;
  --cc-fehler: var(--cc-error);
}

* { box-sizing: border-box; }

/* Das hidden-Attribut schlaegt jede Klasse. Ohne diese Zeile hebelt schon ein
   display: grid an einer Komponente das Verstecken aus - genau so stand das
   Betrefffeld im Anfrageformular leer sichtbar da. */
[hidden] { display: none !important; }

html { background: var(--cc-weiss); scroll-behavior: smooth; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cc-weiss);
  color: var(--cc-n-800);
  font: var(--he-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
body[data-menue="auf"] { overflow: hidden; }

h1, h2, h3 { margin: 0; color: var(--cc-blau-1); text-wrap: balance; }
p { margin: 0; }
img, svg { max-width: 100%; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--cc-blau-2);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--cc-gruen); color: var(--cc-blau-1); }

/* ---------- Bausteine ---------- */

.inhalt { max-width: var(--inhalt); margin-inline: auto; }
/* fuer Elemente, die den Seitenrand selbst tragen */

.sektion { padding: var(--sec-y) var(--gut); }
.sektion--papier { background: var(--cc-weiss-2); }
.sektion--hellblau { background: var(--cc-blau-2-tint); --knopf2-flaeche: #fff; --knopf2-flaeche-hover: var(--cc-weiss); }
.sektion--marine { background: var(--cc-blau-1); color: var(--cc-weiss); }
.sektion--violett {
  background: var(--cc-violett-tint);
  --knopf2-flaeche: #fff;
  --knopf2-flaeche-hover: var(--cc-weiss);
  --link-schrift: var(--cc-blau-1);
  --link-schrift-hover: var(--cc-blau-2);
}
.sektion--gruen { background: var(--cc-gruen); }

.marke {
  font: var(--label);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
  color: var(--cc-n-600);
}
.marke--blau { color: var(--cc-blau-2-hover); }
.marke--gruen { color: var(--cc-gruen); }
.marke--violett { color: var(--violett-text); }

/* --- Knoepfe ---------------------------------------------------------------
   Drei Rollen statt vieler Farbvarianten:
     primaer    der Hauptweg der Sektion, hoechstens einer
     sekundaer  die zweite Aktion daneben
     ghost      eine dritte, nachgeordnete Aktion (Umriss)
   Welche Farben die Rollen annehmen, legt der Untergrund fest (siehe unten).
   Auf einer neuen Seite genuegt damit die richtige Sektionsklasse. */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-weich),
              box-shadow var(--dur-base) var(--ease-weich);
}
.knopf--gross { height: 52px; padding: 0 26px; }

.knopf--primaer { background: var(--knopf1-flaeche); color: var(--knopf1-schrift); }
.knopf--primaer:hover { background: var(--knopf1-flaeche-hover); box-shadow: 0 12px 24px -12px var(--knopf1-flaeche); }

.knopf--sekundaer {
  background: var(--knopf2-flaeche);
  color: var(--knopf2-schrift);
  border-color: var(--knopf2-rahmen);
}
.knopf--sekundaer:hover { background: var(--knopf2-flaeche-hover); }

.knopf--ghost {
  background: transparent;
  color: var(--knopf3-schrift);
  border-color: var(--knopf3-rahmen);
}
.knopf--ghost:hover { background: var(--knopf3-flaeche-hover); }

/* Kommentar s5Hsq7TNYvYu: ein Hover mit mehr Leben. Beim Ueberfahren laeuft
   ein Lichtschimmer ueber den Knopf, er hebt sich um 2 Pixel und wirft einen
   Schatten in seiner eigenen Farbe. Der Schimmer ist weiss und halbdurch-
   sichtig - er funktioniert damit auf jedem Farbsatz, ohne Schrift oder
   Kontrast zu veraendern. Beim Druecken sinkt der Knopf leicht ein. */
.knopf::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .42) 50%, transparent 75%);
  transform: translateX(-130%);
  pointer-events: none;
}
.knopf:hover::after { transform: translateX(130%); transition: transform 700ms var(--ease-weich); }
.knopf:hover { transform: translateY(-2px); }
.knopf--sekundaer:hover, .knopf--ghost:hover { box-shadow: 0 10px 20px -14px rgba(3, 26, 128, .5); }
.knopf:active { transform: translateY(0) scale(.98); transition-duration: 80ms; }
.knopf:disabled:hover { transform: none; box-shadow: none; }
.knopf:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .knopf, .knopf:hover, .knopf:active { transform: none; }
  .knopf::after { display: none; }
}

/* Farbsaetze je Untergrund. Grundfall: helle Flaeche (Brand-Weiss, Papier). */

/* Hellblau: der sekundaere Knopf braucht Weiss, sonst verschwindet er. */

/* Violett */

/* Marine: Blau auf Blau ginge nicht, hier traegt Gruen den Hauptweg. */
.sektion--marine, .fuss {
  --knopf1-flaeche: var(--cc-gruen);
  --knopf1-flaeche-hover: var(--gruen-hover);
  --knopf1-schrift: var(--cc-blau-1);

  --knopf2-flaeche: transparent;
  --knopf2-flaeche-hover: rgba(245, 244, 240, .14);
  --knopf2-schrift: var(--cc-weiss);
  --knopf2-rahmen: rgba(245, 244, 240, .5);

  --knopf3-schrift: var(--cc-weiss);
  --knopf3-rahmen: rgba(245, 244, 240, .5);
  --knopf3-flaeche-hover: rgba(245, 244, 240, .14);

  --link-schrift: var(--cc-gruen);
  --link-schrift-hover: var(--cc-weiss);
}

/* Gruen: hier traegt Marine den Hauptweg. */
.sektion--gruen, .bruecke {
  --knopf1-flaeche: var(--cc-blau-1);
  --knopf1-flaeche-hover: var(--cc-blau-1-soft);
  --knopf1-schrift: #fff;

  --knopf2-flaeche: #fff;
  --knopf2-flaeche-hover: var(--cc-weiss);
  --knopf2-schrift: var(--cc-blau-1);
  --knopf2-rahmen: transparent;

  --link-schrift: var(--cc-blau-1);
  --link-schrift-hover: var(--cc-blau-2);
}

/* Pfeilspitze. Nimmt die Farbe des Textes an (currentColor) und skaliert
   mit der Schriftgroesse, steht also nie zu duenn oder zu klein daneben. */
.spitze {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--spitze-rechts) center / contain no-repeat;
  mask: var(--spitze-rechts) center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* Nach unten: fuer Sprungmarken auf derselben Seite und fuer Aufklapper */
.spitze--runter {
  width: 0.8em;
  height: 0.8em;
  -webkit-mask-image: var(--spitze-unten);
  mask-image: var(--spitze-unten);
}

/* Weiterfuehrender Textlink mit Pfeil */
.pfeil {
  /* Im Textfluss, nicht als Flexbox. Als inline-flex nahm ein umbrechender
     Text die volle Breite ein, und die Pfeilspitze stand am rechten Rand statt
     hinter dem letzten Wort. Im Fluss folgt sie dem Text, auf jeder Zeilenzahl. */
  display: inline;
  color: var(--link-schrift);
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.pfeil:hover { color: var(--link-schrift-hover); }
/* Abstand zur Pfeilspitze: Das geschuetzte Leerzeichen davor (setzt das
   Werkzeug) plus dieser Rand ergeben die bisherigen 8 Pixel. Das Leerzeichen
   ist geschuetzt, damit die Spitze nie allein in eine neue Zeile rutscht. */
.pfeil .spitze { display: inline-block; vertical-align: -0.14em; margin-left: .22em; }
.pfeil .spitze--zurueck { margin-left: 0; margin-right: .22em; }
/* Die Spitze wandert, sobald irgendetwas Klickbares gehovert wird, in dem
   sie steckt - auch wenn das die ganze Karte ist und nicht nur der Textlink.
   Sonst passiert bei den Kacheln nichts, obwohl die ganze Flaeche klickbar ist.
   Spitzen nach unten sind ausgenommen, die gehoeren zum Aufklapper. */
a:hover .spitze:not(.spitze--runter),
.karte:hover .spitze:not(.spitze--runter),
.rolle:hover .spitze:not(.spitze--runter),
.stimme:hover .spitze:not(.spitze--runter) { transform: translateX(3px); }

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--cc-gruen);
  color: var(--cc-blau-1);
  font: 700 13px/1 var(--font-display);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
  white-space: nowrap;
}
.live-chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.live-chip--invers { background: var(--cc-blau-1); color: var(--cc-gruen); }

/* Karte, die als Ganzes klickbar ist */
.karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.karte:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(3, 26, 128, .12); }
.bildflaeche { background: var(--cc-weiss-3); overflow: hidden; }
/* Bild einsetzen: einfach ein <img> in die Flaeche legen - es fuellt sie
   randlos aus, das Layout springt nicht. Ohne Bild bleibt die ruhige Flaeche. */
.bildflaeche > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Sprunglink ---------- */

.sprunglink {
  position: absolute;
  left: var(--gut);
  top: -60px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--cc-blau-1);
  color: var(--cc-weiss);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.sprunglink:focus { top: 14px; }

/* ---------- Kopfbereich ---------- */

.kopf {
  /* Der Kopfbereich ist immer hell - auch im Courage-Bereich, der die Seite
     auf Marine dreht. Ohne diese Ruecksetzung erben seine Knoepfe den dunklen
     Farbsatz, und "Anfragen" stuende in Weiss auf hellem Grund. */
  --knopf1-flaeche: var(--cc-blau-2);
  --knopf1-flaeche-hover: var(--cc-blau-2-hover);
  --knopf1-schrift: #fff;
  --knopf2-flaeche: var(--cc-blau-2-tint);
  --knopf2-flaeche-hover: var(--blau-2-tint-hover);
  --knopf2-schrift: var(--cc-blau-1);
  --knopf2-rahmen: transparent;
  --link-schrift: var(--cc-blau-2);
  --link-schrift-hover: var(--cc-blau-1);
  position: sticky;
  top: 0;
  /* liegt bewusst ueber dem mobilen Menue (55), damit der Schliessen-Knopf
     immer erreichbar bleibt */
  z-index: 60;
  background: var(--cc-weiss);
  transition: transform var(--dur-base) var(--ease-out);
}

.kopf__bar {
  /* Das mobile Menue liegt im Kopfbereich und wuerde die Leiste sonst
     verdecken: Ein z-index am Elternteil hilft nicht gegen ein eigenes Kind,
     die Leiste braucht ihren eigenen. Ohne das waren Logo und
     Schliessen-Kreuz bei offenem Menue unsichtbar. */
  position: relative;
  z-index: 2;
  max-width: calc(var(--inhalt-weit) + var(--gut) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
  padding: 0 var(--gut);
  transition: height var(--dur-base) var(--ease-out);
}
.kopf__logo { display: flex; align-items: center; }
.kopf__logo img.logo-dunkel { display: none; }
.kopf__logo img { height: 46px; width: auto; transition: height var(--dur-base) var(--ease-out); }

.kopf__aktionen {
  display: flex;
  align-items: center;
  font: 500 15px/1 var(--font-body);
  gap: 12px;
}
.kopf__konto {
  color: var(--cc-blau-1);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  margin-right: 10px;
}
.kopf__konto:hover { color: var(--cc-blau-2); }
.kopf__aktionen .knopf { height: 42px; padding: 0 20px; font-size: 15px; }

.kopf__nav {
  max-width: calc(var(--inhalt-weit) + var(--gut) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  /* Die Reiter tragen ihren Abstand jetzt selbst als Innenabstand der Pille. */
  gap: 0;
  height: 56px;
  padding: 0 calc(var(--gut) - 16px);
  border-top: 1px solid rgba(3, 26, 128, .10);
}
.kopf__reiter {
  display: inline-flex;
  align-items: center;
  /* Die Pfeilspitze gehoert zum Wort, nicht neben das Wort. */
  gap: 5px;
  padding: 10px 16px;
  margin: 0 2px;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  font: 500 17px/1 var(--font-body);
  color: var(--cc-blau-1);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kopf__reiter:hover { color: var(--cc-blau-2); background: rgba(77, 97, 244, .07); }
/* Der offene Reiter traegt eine weiche Pille statt einer Unterkante - so
   haengt er sichtbar an der Karte, die darunter aufgeht. */
.kopf__reiter[aria-expanded="true"] { background: var(--cc-blau-2-tint); color: var(--cc-blau-2); }
.kopf__reiter b { font-weight: 700; }
/* Aktiver Bereich: Blau wie beim Ueberfahren, dazu eine Linie an der
   Unterkante der Navigationsleiste - wie bei den Reitern auf den Seiten
   ("der aktive traegt eine Linie"). Die Linie sitzt auf der Kante, nicht in
   der Pille, damit sie sich nicht mit der Pille des offenen Menues mischt. */
.kopf__reiter[data-aktiv] { position: relative; color: var(--cc-blau-2); }
.kopf__reiter[data-aktiv] .spitze { color: var(--cc-blau-2); }
.kopf__reiter[data-aktiv]::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: -9px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--cc-blau-2);
}
/* Der erste Reiter steht in derselben Flucht wie das Logo. */
.kopf__nav .kopf__reiter:first-child { margin-left: 0; }
/* Die Spitze dreht sich beim Oeffnen mit. */
.kopf__reiter .spitze--runter { transition: transform var(--dur-base) var(--ease-weich); }
.kopf__reiter[aria-expanded="true"] .spitze--runter { transform: rotate(180deg); }
.kopf__reiter .spitze {
  width: 0.72em;
  height: 0.72em;
  color: var(--cc-n-600);
  transition: transform var(--dur-base) var(--ease-out);
}
.kopf__reiter:hover .spitze { color: var(--cc-blau-2); }
.kopf__reiter[aria-expanded="true"] .spitze { color: var(--cc-blau-2); transform: rotate(180deg); }

/* Verdichteter Zustand beim Scrollen: eine Zeile, Login und Registrieren treten zurueck */
.kopf[data-kompakt="ja"] { box-shadow: 0 6px 24px rgba(3, 26, 128, .10); }
.kopf[data-kompakt="ja"] .kopf__bar { height: 56px; }
.kopf[data-kompakt="ja"] .kopf__logo img { height: 34px; }
.kopf[data-kompakt="ja"] .kopf__konto {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

/* Waehrend das Video den Bildschirm fuellt, faehrt der Kopfbereich weg -
   sonst deckt er oben gut 130 Pixel ab und es waere kein voller Viewport.
   Ein Stueck zurueckscrollen holt ihn sofort wieder. */
.kopf[data-versteckt="ja"] {
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}

/* Aufklappmenue ------------------------------------------------------------
   Kein Band ueber die volle Breite, sondern eine schwebende Karte unter der
   Navigation, so breit wie ihr Inhalt. Die Links stehen als Liste, nicht als
   Kaesten mit Pfeil am rechten Rand - der Pfeil stand dort so weit vom Wort
   entfernt, dass beides nicht mehr zusammengehoerte. */

.aufklapp {
  position: absolute;
  /* Der Abstand zum Kopfbereich steckt im Innenabstand, nicht in top:
     als Luecke waere der Zeiger beim Hinuebergehen kurz ueber keinem von
     beiden - der Kopfbereich meldete "verlassen" und das Menue ginge zu.
     So bleibt der Weg nach unten durchgehend Teil des Aufklappers. */
  top: 100%;
  padding-top: 8px;
  /* Die genaue Position setzt das Skript: die Karte haengt an ihrem Reiter. */
  left: var(--gut);
  z-index: 5;
}
.aufklapp[hidden] { display: none; }

.aufklapp__panel {
  display: flex;
  gap: 56px;
  align-items: stretch;
  width: max-content;
  max-width: calc(100vw - var(--gut) * 2);
  padding: 34px 36px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(3, 26, 128, .14), 0 2px 8px rgba(3, 26, 128, .06);
  animation: ccAufklapp var(--dur-auf) var(--ease-weich) both;
}
@keyframes ccAufklapp {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.aufklapp__spalte { display: grid; align-content: start; gap: 4px; min-width: 190px; }
.aufklapp__titel {
  font: 700 21px/1.25 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--cc-blau-1);
  margin-bottom: 14px;
}
.aufklapp__links { display: grid; gap: 2px; }
.aufklapp__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--cc-n-600);
  font: 400 17px/1.35 var(--font-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-weich);
}
.aufklapp__links a:hover { color: var(--cc-blau-2); transform: translateX(3px); }
/* Die Seite, auf der man steht: blau und kraeftiger, ohne Pfeil - man ist
   schon da. */
.aufklapp__links a[aria-current="page"] { color: var(--cc-blau-2); font-weight: 600; }
.aufklapp__links a[aria-current="page"]:hover { transform: none; }
.aufklapp__links a[aria-current="page"]::after { opacity: 0 !important; }

/* Die Pfeilspitze taucht erst beim Ueberfahren auf. Kommentar f_YxL9MpDu61:
   dauerhaft am rechten Rand stand sie zu weit vom Wort, hier steht sie
   direkt daneben und zeigt nur den Punkt an, auf dem die Maus gerade ist.
   Der Platz wird immer freigehalten, sonst wackelt die Liste beim Hovern. */
.aufklapp__links a::after {
  content: "";
  width: .85em; height: .85em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--spitze-rechts) center / contain no-repeat;
  mask: var(--spitze-rechts) center / contain no-repeat;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-weich);
}
.aufklapp__links a:hover::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .aufklapp__links a, .aufklapp__links a::after { transition: none; }
}

/* Der farbige Kasten rechts: eine Sache, die gerade ansteht, statt einer
   weiteren Linkliste. */
.aufklapp__teaser {
  display: grid;
  align-content: start;
  gap: 10px;
  width: 290px;
  padding: 26px 26px 28px;
  border-radius: 16px;
  background: var(--cc-blau-1);
  color: var(--cc-weiss);
  text-decoration: none;
  overflow: hidden;
  position: relative;
}
.aufklapp__teaser .live-chip { justify-self: start; position: relative; }
.aufklapp__teaser b {
  font: 700 21px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  position: relative;
}
.aufklapp__teaser em {
  font: 400 15px/1.5 var(--font-body);
  color: var(--cc-n-200);
  font-style: normal;
  position: relative;
}
.aufklapp__knopf {
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(245, 244, 240, .45);
  font: 600 15px/1 var(--font-body);
  color: var(--cc-weiss);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.aufklapp__knopf .spitze { width: .9em; height: .9em; }
.aufklapp__teaser:hover .aufklapp__knopf { background: rgba(245, 244, 240, .16); border-color: rgba(245, 244, 240, .7); }

/* Burger und mobiles Menue */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.burger span {
  display: block;
  position: relative;
  width: 24px; height: 2px;
  background: var(--cc-blau-1);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px; height: 2px;
  background: var(--cc-blau-1);
  transition: transform var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.burger span::before { top: -8px; }
.burger span::after { top: 8px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.mobilmenue { display: none; }

/* ---------- Kopfbereich der Seite (Hero) ---------- */

.hero { padding: 60px var(--gut) 0; }
.hero-nach { padding: 20px var(--gut) 72px; }
/* MVP ohne Video und Live-Leiste (Pati 28.10.): der Hero braucht selbst den Abstand nach unten */
body[data-umfang="mvp"] .hero { padding-bottom: 88px; }
@media (max-width: 767px) { body[data-umfang="mvp"] .hero { padding-bottom: 56px; } }
.hero__auge { margin-bottom: 26px; }
.hero h1 {
  font: var(--he-h1);
  letter-spacing: -0.035em;
  max-width: 1180px;
}
.hero h1 em { color: var(--cc-blau-2); font-style: normal; }
.hero__unter {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: end;
  margin-top: 44px;
}
.hero__traeger {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 13px/1.3 var(--font-body);
  color: var(--cc-n-600);
}
.hero__traeger .traegerlogo { flex: none; }
.hero__traeger > span { white-space: nowrap; }
.hero__text { margin: 0 0 28px; font: var(--he-lead); color: var(--cc-n-800); max-width: 640px; }
.hero__wege { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__wege .pfeil { margin-left: 10px; }

.hero__video {
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--cc-weiss-3);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Scroll-Zoom des Vorschauvideos --------------------------------------
   Grundzustand (kein JS, reduzierte Bewegung, alte Browser): ganz normale
   Flaeche in Inhaltsbreite. Erst wenn das Skript data-zoom="an" setzt,
   entsteht die Scrollstrecke und das Festheften. */

.heroplay { margin-top: 56px; }
.heroplay__pin { padding-inline: var(--gut); }

.heroplay[data-zoom="an"] {
  /* 100svh zum Festhalten plus die Strecke, ueber die aufgezogen wird (50% der
     Bildschirmhoehe). Die vh-Zeile davor ist der Rueckfall: Versteht ein
     Browser svh nicht, faellt sonst die ganze Angabe weg - und ohne Hoehe gibt
     es keine Scrollstrecke und damit gar keinen Effekt. */
  height: calc(100vh + 50vh);
  height: calc(100svh + var(--zoomweg, 50svh));
  margin-top: 56px;
}
.heroplay[data-zoom="an"] .heroplay__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding-inline: 0;
  overflow: hidden;
}
.heroplay[data-zoom="an"] .hero__video {
  width: var(--vw, 100%);
  height: var(--vh, auto);
  max-width: none;
  aspect-ratio: auto;
  border-radius: var(--vr, 16px);
}

@media (prefers-reduced-motion: reduce) {
  /* Sicherheitsnetz: falls das Attribut doch gesetzt wurde, alles zurueck */
  .heroplay[data-zoom="an"] { height: auto; }
  .heroplay[data-zoom="an"] .heroplay__pin { position: static; height: auto; padding-inline: var(--gut); }
  .heroplay[data-zoom="an"] .hero__video {
    width: 100%; height: auto; max-width: var(--inhalt); aspect-ratio: 16 / 9; border-radius: 16px;
  }
}
.hero__video .live-chip { position: absolute; left: 24px; top: 24px; padding: 8px 14px; font-size: 13px; }
.hero__play {
  width: clamp(72px, 7.8vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cc-blau-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero__play::after {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.28em 0 0.28em 0.45em;
  border-color: transparent transparent transparent var(--cc-gruen);
  font-size: clamp(64px, 7.8vw, 112px);
  margin-left: 0.06em;
}

.sendeplan {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 18px 24px;
  background: var(--cc-blau-2-tint);
  border-radius: 16px;
}
.sendeplan__text { flex: 1; font: 400 15px/1.4 var(--font-body); color: var(--cc-n-800); }
.sendeplan__text b { color: var(--cc-blau-1); font-weight: 600; }

/* ---------- Der Grund und der Sicherheitsblock ---------- */

.grund h2 { font: var(--he-h2); letter-spacing: -0.025em; max-width: 820px; margin-bottom: 44px; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.kennzahl__wert { font: var(--he-stat); letter-spacing: -0.03em; color: var(--cc-blau-1); overflow-wrap: anywhere; }
.kennzahl p { margin: 14px 0 8px; font: var(--he-body); color: var(--cc-n-800); }
.kennzahl__quelle { display: block; font: 400 13px/1.4 var(--font-body); color: var(--cc-n-600); }


.haken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
.haken li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 17px/1.45 var(--font-body);
  color: var(--cc-n-800);
}
.haken li::before {
  content: "✓";
  flex: none;
  margin-top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cc-gruen);
  color: var(--cc-blau-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--font-display);
}

/* ---------- Einstieg (Rollenkacheln) ---------- */

.einstieg h2 { font: var(--he-h2); letter-spacing: -0.025em; }
.rollen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rolle {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rolle:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(3, 26, 128, .14); }
.rolle__name { font: var(--he-kachel); letter-spacing: -0.02em; color: var(--cc-blau-1); margin: 12px 0 8px; }
.rolle__text { flex: 1; font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.rolle__ziel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--cc-blau-1);
  font: 600 15px/1.2 var(--font-body);
}
.rolle--violett { background: var(--cc-violett-tint); }
.rolle--weiss { background: #fff; }
.rolle--weiss .rolle__ziel { color: var(--cc-blau-2); }
.rolle--marine { background: var(--cc-blau-1); color: var(--cc-weiss); }
.rolle--marine:hover { box-shadow: 0 12px 32px rgba(3, 26, 128, .22); }
.rolle--marine .rolle__name { color: var(--cc-weiss); }
.rolle--marine .rolle__text { color: var(--cc-n-200); }
.rolle--marine .rolle__ziel { color: var(--cc-gruen); }
.rolle--gruen { background: var(--cc-gruen); }

/* ---------- In drei Schritten ---------- */

.schritte h2 { font: var(--he-h2); letter-spacing: -0.025em; max-width: 760px; margin-bottom: 40px; }
.schritte__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.schritt__bild { height: 150px; background: var(--cc-weiss-3); border-radius: 16px; margin-bottom: 20px; }
.schritt__kopf { display: flex; align-items: center; gap: 14px; }
.schritt__zahl {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 18px/1 var(--font-display);
  flex: none;
}
.schritt__zahl--1 { background: var(--cc-blau-2); color: #fff; }
.schritt__zahl--2 { background: var(--cc-violett); color: var(--cc-blau-1); }
.schritt__zahl--3 { background: var(--cc-blau-1); color: var(--cc-gruen); }
.schritt h3 { font: var(--he-h3); letter-spacing: -0.01em; }
.schritt p { margin-top: 14px; font: var(--he-body); color: var(--cc-n-800); }
.schritte__fuss { display: flex; align-items: center; gap: 32px; margin-top: 48px; flex-wrap: wrap; }

/* ---------- Live statt Konserve ---------- */

.live__raster { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.live h2 { font: var(--he-h2); letter-spacing: -0.025em; color: var(--cc-weiss); }
.live p { margin: 22px 0 28px; font: 400 clamp(15px, 1.19vw, 17px)/1.55 var(--font-body); color: var(--cc-n-200); }
.live__merkmale { display: grid; gap: 12px; margin-bottom: 30px; }
.live__merkmale li {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 700 clamp(17px, 1.46vw, 21px)/1.25 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cc-weiss);
}
.live__merkmale li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.live__merkmale li:nth-child(1)::before { background: var(--cc-gruen); }
.live__merkmale li:nth-child(2)::before { background: var(--cc-violett); }
.live__merkmale li:nth-child(3)::before { background: var(--cc-blau-2); }

/* Schaubild Studio -> Klassenzimmer */
.schaubild {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cc-weiss-3);
  border-radius: 12px;
  overflow: hidden;
  padding: 24px;
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 225px;
  align-items: center;
  container-type: inline-size;
}
.schaubild__saeule { display: grid; gap: 12px; justify-items: center; }
.schaubild__saeule > span:last-child {
  font: 700 11.5px/1.2 var(--font-display);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
  color: var(--cc-blau-1);
}
.schaubild__studio {
  position: relative;
  width: 150px; height: 196px;
  border-radius: 10px;
  background: var(--cc-blau-1);
  padding: 14px;
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 10px;
  overflow: hidden;
}
.schaubild__studio .live-chip { align-self: start; justify-self: start; padding: 4px 8px; font-size: 9px; letter-spacing: .1em; }
.schaubild__studio .live-chip::before { width: 5px; height: 5px; }
.schaubild__moderation {
  border-radius: 6px;
  background: var(--cc-blau-1-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 9px/1 var(--font-display);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
  color: var(--cc-n-200);
}
.schaubild__balken { display: flex; align-items: flex-end; justify-content: center; gap: 9px; }
.schaubild__balken span { width: 19px; border-radius: 3px; transform-origin: bottom; animation: ccBalken 7s var(--ease-out) infinite; }
.schaubild__balken span:nth-child(1) { height: 56px; background: var(--cc-gruen); }
.schaubild__balken span:nth-child(2) { height: 96px; background: var(--cc-violett); }
.schaubild__balken span:nth-child(3) { height: 74px; background: var(--cc-blau-2); }

.schaubild__weg { position: relative; height: 150px; }
.schaubild__weg span.beschriftung {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font: 600 13px/1.3 var(--font-body);
  color: var(--cc-blau-1);
}
.schaubild__weg span.beschriftung.oben { top: 0; }
.schaubild__weg span.beschriftung.unten { bottom: 0; }
.schaubild__linie { position: absolute; left: 10px; right: 10px; height: 2px; background: rgba(3, 26, 128, .16); }
.schaubild__linie.oben { top: 44px; }
.schaubild__linie.unten { bottom: 44px; }
.schaubild__bahn { position: absolute; left: 12px; right: 12px; }
.schaubild__bahn.oben { top: 39px; height: 12px; }
.schaubild__bahn.unten { bottom: 39px; height: 10px; }
.schaubild__bahn.oben i {
  position: absolute; top: 0; left: 0; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cc-blau-1);
  animation: ccHin 7s cubic-bezier(.4, 0, .6, 1) infinite;
}
.schaubild__bahn.unten i {
  position: absolute; bottom: 0; right: 0; margin-right: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gruen-text);
  animation: ccZurueck 7s cubic-bezier(.4, 0, .6, 1) infinite;
}
.schaubild__bahn.unten i:nth-child(2) { animation-delay: .5s; }
.schaubild__bahn.unten i:nth-child(3) { animation-delay: 1s; }

.schaubild__klasse {
  width: 215px; height: 196px;
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  justify-items: center;
}
.schaubild__beamer {
  width: 100%;
  border-radius: 6px;
  background: var(--cc-blau-2-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 10.5px/1 var(--font-display);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
  color: var(--cc-blau-1);
  animation: ccBeamer 7s ease-in-out infinite;
}
.schaubild__pulte { display: flex; gap: 9px; }
.schaubild__pulte span { width: 28px; height: 15px; border-radius: 3px; background: var(--cc-weiss-3); }

@keyframes ccHin { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 34% { left: 100%; opacity: 1; } 40%, 100% { left: 100%; opacity: 0; } }
@keyframes ccZurueck { 0%, 48% { right: 0; opacity: 0; } 54% { opacity: 1; } 82% { right: 100%; opacity: 1; } 88%, 100% { right: 100%; opacity: 0; } }
@keyframes ccBeamer { 0%, 30% { opacity: .3; } 42%, 74% { opacity: 1; } 92%, 100% { opacity: .3; } }
@keyframes ccBalken { 0%, 60% { transform: scaleY(.4); } 76%, 96% { transform: scaleY(1); } 100% { transform: scaleY(.4); } }

@media (prefers-reduced-motion: reduce) {
  .schaubild *, .kopf, .kopf__bar, .kopf__logo img { animation: none !important; transition: none !important; }
}

/* ---------- Aktuelle Sendungen ---------- */

.sendungen__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.sendungen__kopf h2 { font: var(--he-h2); letter-spacing: -0.025em; }
.sendungen__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sendung__bild { height: 200px; background: var(--cc-weiss-3); position: relative; }
.datumsblock {
  position: absolute;
  left: 16px; top: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--cc-blau-1);
  color: var(--cc-weiss);
}
.datumsblock b { font: 800 21px/1 var(--font-display); }
.datumsblock span {
  font: 700 13px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--cc-gruen);
}
.sendung__text { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.status {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--label);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status--buchbar { color: var(--gruen-text); }
.status--voll { color: var(--cc-n-600); }
.status--voll::before { background: var(--cc-n-400); }
.sendung__titel { font: 800 clamp(21px, 1.95vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--cc-blau-1); }
.sendung__meta { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.sendung__frei { font: 400 13px/1.5 var(--font-body); color: var(--cc-n-600); }
.sendung__ziel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--cc-blau-2);
  font: 600 15px/1.2 var(--font-body);
}

.themen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; }
.themen__marke { margin-right: 10px; }
.thema {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--cc-blau-2-tint);
  font: 500 13px/1 var(--font-body);
  color: var(--cc-blau-1);
}
.thema--offen { background: var(--cc-weiss-3); color: var(--cc-n-600); }

/* ---------- Stimmen ---------- */

.stimmen h2 { font: var(--he-h2); letter-spacing: -0.025em; margin-bottom: 36px; }
.stimmen__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stimme {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.stimme:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(3, 26, 128, .12); }
.stimme__bild { background: var(--cc-weiss-3); display: block; min-height: 180px; }
.stimme__text { display: grid; gap: 14px; align-content: start; padding: 30px; }
.stimme__zitat { font: 700 21px/1.3 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }

/* ---------- Vertrauensleiste ---------- */

.vertrauen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
/* Solange nur die Traeger-Gruppe gefuellt ist, soll sie nicht auf ein Viertel
   der Breite gequetscht werden. */
.vertrauen--traeger { grid-template-columns: auto; justify-items: start; }
/* Logos neben die Beschriftung statt darunter */
.vertrauen--traeger .vertrauen__gruppe {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.vertrauen--traeger .vertrauen__gruppe > div:first-child { margin-bottom: 0; }
.vertrauen__gruppe > div:first-child { margin-bottom: 14px; }
.vertrauen__logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
/* Platzhalter-Kaestchen, nur fuer Gruppen die noch keine echten Logos haben */
.vertrauen__logos span.platzhalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--cc-weiss-2);
  font: 500 13px/1 var(--font-body);
  color: var(--cc-n-600);
}

/* --- Traegerlogos ----------------------------------------------------------
   Die Logos liegen einfarbig vor. Als Maske gerendert nehmen sie die Textfarbe
   der Umgebung an - grau auf hellem Grund, weiss auf Marine - und erfuellen
   damit die Vorgabe "Logos einfarbig grau, gleiche Hoehe" (K31). */
.traegerlogo {
  display: inline-flex;
  align-items: center;
  color: var(--cc-n-600);
  transition: color var(--dur-fast) var(--ease-out);
}
.traegerlogo:hover { color: var(--cc-blau-1); }
.traegerlogo__bild {
  display: block;
  height: 34px;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.traegerlogo__bild--ensible {
  aspect-ratio: 300 / 143;
  -webkit-mask-image: url("../logo/ensible-neg.svg");
  mask-image: url("../logo/ensible-neg.svg");
}
.traegerlogo__bild--youth-and-arts {
  aspect-ratio: 300 / 164;
  -webkit-mask-image: url("../logo/youth-and-arts.svg");
  mask-image: url("../logo/youth-and-arts.svg");
}
/* Im Hero und im Fuss kleiner */
.hero__traeger .traegerlogo__bild { height: 30px; }
.fuss .traegerlogo { color: var(--cc-n-200); }
.fuss .traegerlogo:hover { color: var(--cc-weiss); }
.fuss .traegerlogo__bild { height: 26px; }

/* ---------- Courage ---------- */

.courage__raster { display: grid; grid-template-columns: 6fr 6fr; gap: 64px; align-items: center; }
.courage__stempel {
  display: inline-flex;
  padding: 9px 18px;
  border-radius: 4px;
  background: var(--cc-gruen);
  color: var(--cc-blau-1);
  font: 800 15px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.courage h2 { font: var(--he-h2-gross); letter-spacing: -0.03em; color: var(--cc-weiss); margin: 30px 0 0; }
.courage p { margin: 22px 0 28px; font: 400 17px/1.5 var(--font-body); color: var(--cc-n-200); max-width: 520px; }
.beitraege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.beitrag { aspect-ratio: 9 / 16; border-radius: 16px; position: relative; overflow: hidden; }
.beitrag--versetzt { margin-top: 28px; }
.beitrag--1 { background: var(--cc-gruen); }
.beitrag--1::after { content: ""; position: absolute; left: 14%; top: 26%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-blau-1); }
.beitrag--2 { background: var(--cc-violett); }
.beitrag--2::after { content: ""; position: absolute; left: 10%; top: 40%; width: 80%; height: 22%; border: 4px solid var(--cc-blau-1); transform: rotate(-8deg); }
.beitrag--3 { background: var(--cc-blau-1-soft); }
.beitrag--3::after { content: ""; position: absolute; left: 12%; top: 30%; width: 76%; aspect-ratio: 1; border-radius: 50%; border: 12px solid var(--cc-gruen); }
.beitrag--4 { background: var(--cc-gruen); }
.beitrag--4::before, .beitrag--4::after {
  content: ""; position: absolute; top: 18%; width: 22%; height: 64%; transform: rotate(12deg);
}
.beitrag--4::before { left: 18%; background: var(--cc-blau-1); }
.beitrag--4::after { left: 58%; background: var(--cc-violett); }

/* ---------- Termine ---------- */

.termine h2 { font: var(--he-h2); letter-spacing: -0.025em; margin-bottom: 36px; }
.termine__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.termin__bild { height: 180px; background: var(--cc-weiss-3); position: relative; }
.art {
  position: absolute;
  left: 14px; top: 14px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--cc-violett);
  color: var(--cc-blau-1);
  font: 700 13px/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.termin__text { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.termin__wann { font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-blau-2); }
.termin__titel { font: 800 21px/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--cc-blau-1); }
.termin__ort { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.termin__ziel { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--cc-blau-2); font: 600 15px/1.2 var(--font-body); }

.ansprech {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  background: var(--cc-blau-1);
  border-radius: 16px;
  color: var(--cc-weiss);
}
.ansprech__bild { width: 96px; height: 96px; border-radius: 50%; background: var(--cc-weiss-3); flex: none; }
.ansprech__name { font: 800 clamp(21px, 1.95vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.ansprech__zeiten { font: 400 15px/1.6 var(--font-body); color: var(--cc-n-200); }
.ansprech a {
  align-self: flex-start;
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
  color: var(--cc-gruen);
}
.ansprech a:hover { color: var(--cc-weiss); }

/* ---------- Bruecke ---------- */

.bruecke { padding: var(--sec-y-lg) var(--gut); text-align: center; }
.bruecke h2 { font: var(--he-h2-brueck); letter-spacing: -0.035em; }
.bruecke p {
  margin: 22px auto 36px;
  max-width: 640px;
  color: var(--cc-n-800);
  font: 400 17px/1.5 var(--font-body);
}
.bruecke__wege { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Fuss ---------- */

.fuss { background: var(--cc-blau-1); color: var(--cc-weiss); padding: 0 var(--gut); }
.fuss__inhalt { max-width: var(--inhalt-weit); margin-inline: auto; }

/* Wortmarke oben im Fuss. Die Variante gruen-auf-blau ist fuer genau diesen
   Untergrund gezeichnet. */
/* Kopfreihe des Fusses.
   Die Wortmarke steht nur im MVP. In der vollen Fassung traegt der
   Newsletter die Reihe allein - daneben ging das Logo unter, und darueber
   war es eine Zeile zu viel. */
.fuss__oben {
  display: grid;
  grid-template-columns: 1fr;
  padding: 48px 0;
}
body:not([data-umfang="mvp"]) .fuss__oben { border-bottom: 1px solid rgba(245, 244, 240, .18); }
body[data-umfang="mvp"] .fuss__oben { padding: 48px 0 0; }
.fuss__oben .newsletter { padding: 0; border-bottom: none; }


@media (max-width: 599px) {
  .fuss__oben { padding: 40px 0; }
  body[data-umfang="mvp"] .fuss__oben { padding: 40px 0 0; }
}
.newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid rgba(245, 244, 240, .18);
}
.newsletter b { display: block; font: 700 clamp(21px, 1.95vw, 28px)/1.15 var(--font-display); letter-spacing: -0.02em; margin-bottom: 8px; }
.newsletter__text { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-200); }
.newsletter__form { display: grid; gap: 8px; justify-items: start; }
.newsletter__zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter input {
  width: 300px; height: 48px;
  border: 1.5px solid rgba(245, 244, 240, .5);
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 0 14px;
  color: var(--cc-weiss);
  font: 400 15px/1 var(--font-body);
}
.newsletter input::placeholder { color: var(--cc-n-300); }
.newsletter button { height: 48px; padding: 0 22px; }
.newsletter__hinweis { font: 400 13px/1.4 var(--font-body); color: var(--cc-n-300); }

.fuss__spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 56px 0 40px; }
.fuss__spalte { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fuss__spalte .marke { color: var(--cc-n-300); margin-bottom: 6px; }
.fuss__spalte a {
  color: var(--cc-weiss);
  text-decoration: none;
  font: 400 15px/1.5 var(--font-body);
  transition: color var(--dur-fast) var(--ease-out);
}
.fuss__spalte a:hover { color: var(--cc-gruen); }
.fuss__kontakt { font: 400 15px/1.6 var(--font-body); color: var(--cc-n-200); }
.fuss__kontakt a { font: inherit; }

.fuss__zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(245, 244, 240, .18);
  font: 400 13px/1.4 var(--font-body);
  color: var(--cc-n-300);
}
.fuss__zeile .fueller { flex: 1; }
.fuss__credit a { color: inherit; text-decoration: none; }
.fuss__credit a:hover { color: var(--cc-gruen); }
.fuss__marke { font: 700 13px/1.2 var(--font-display); letter-spacing: var(--label-sp); text-transform: uppercase; }

/* --- MVP-Schalter ----------------------------------------------------------
   <body data-umfang="mvp"> blendet aus, was es noch nicht gibt: die
   Hauptnavigation, Login und Registrieren, die Footer-Spalten zu noch nicht
   gebauten Seiten und den Newsletter. Nichts wird geloescht - Attribut
   entfernen und die volle Seite ist zurueck.

   Was bewusst BLEIBT: Impressum, Datenschutz, AGB und Barrierefreiheit.
   Die muessen von der ersten oeffentlichen Minute an erreichbar sein. */

body[data-umfang="mvp"] .kopf__nav,
body[data-umfang="mvp"] .aufklapp,
body[data-umfang="mvp"] .kopf__konto,
body[data-umfang="mvp"] .newsletter,
body[data-umfang="mvp"] [data-mvp="aus"] { display: none !important; }
/* Gegenstueck (Werft 27.10.): steht nur in der MVP-Fassung, z. B. Coming soon */
body:not([data-umfang="mvp"]) [data-mvp="nur"] { display: none !important; }
/* Einstieg im MVP ohne Links (die Rollenseiten sind noch nicht freigegeben) */
body[data-umfang="mvp"] .einstieg .rolle { pointer-events: none; }
/* Burger und mobiles Menue bleiben: oben sind die Aktionen ausgeblendet und
   die Sticky-Leiste erscheint erst nach 400 Pixel Scrollen - ganz oben gaebe
   es sonst keinen Weg zu Anfragen und Sendung buchen. */
body:not([data-umfang="mvp"]) [data-nur-mvp] { display: none !important; }

/* Ohne Navigationszeile traegt die Top-Bar allein - etwas mehr Luft */
body[data-umfang="mvp"] .kopf__bar { height: 88px; }
body[data-umfang="mvp"] .kopf[data-kompakt="ja"] .kopf__bar { height: 60px; }

/* Der reduzierte Fuss hat drei Spalten statt vier - Service und Rechtliches,
   Ueber uns, Kontakt. Mit vier Spalten bliebe eine leer, mit zwei rutschte
   die dritte in eine zweite Zeile. */
body[data-umfang="mvp"] .fuss__spalten {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 48px;
  gap: 40px;
}
@media (max-width: 1023px) {
  body[data-umfang="mvp"] .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  body[data-umfang="mvp"] .fuss__spalten { grid-template-columns: 1fr; }
}

/* Elemente, deren Ziel es noch nicht gibt, sind im MVP kein Link mehr.
   Das Skript nimmt ihnen href und Pfeilspitze, hier faellt nur die
   Hover-Bewegung weg, damit nichts Klickbarkeit vortaeuscht. */
body[data-umfang="mvp"] [data-ziel="offen"] { cursor: default; }
body[data-umfang="mvp"] [data-ziel="offen"] .spitze { display: none; }
body[data-umfang="mvp"] [data-ziel="offen"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- Sticky-CTA-Leiste K28 (nur mobil) ---------- */

.k28 {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  gap: 10px;
  height: 56px;
  padding: 0 12px;
  background: var(--cc-weiss);
  border-top: 1px solid rgba(3, 26, 128, .12);
  box-shadow: 0 -4px 20px rgba(3, 26, 128, .10);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.k28 .knopf { flex: 1; height: 44px; align-self: center; font-size: 15px; padding: 0 12px; }
.k28[data-sichtbar="ja"] { transform: translateY(0); }
/* Auf Rechtstexten nie - so schreibt es die Spezifikation zu K28 vor. */
body[data-seitentyp="rechtstext"] .k28 { display: none !important; }

/* ---------- Umbrueche ---------- */

/* Tablet und darunter: Spalten fallen zusammen, Navigation wird mobil */
@media (max-width: 1023px) {
  .kopf__nav, .kopf__aktionen { display: none; }
  .aufklapp { display: none !important; }
  .burger { display: inline-flex; }
  .kopf__bar { height: 64px; }
  .kopf[data-kompakt="ja"] .kopf__bar { height: 56px; }

  .mobilmenue {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    /* Liegt im Kopfbereich, der schon auf 60 ueber der Seite steht. Hier
       zaehlt nur noch das Verhaeltnis zur Leiste darueber (z-index 2). */
    z-index: 1;
    background: var(--cc-blau-1);
    color: var(--cc-weiss);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 96px var(--gut) 36px;

    /* Auf Marine traegt Gruen den Hauptweg - dieselbe Regel wie in den
       marineblauen Sektionen. */
    --knopf1-flaeche: var(--cc-gruen);
    --knopf1-flaeche-hover: var(--gruen-hover);
    --knopf1-schrift: var(--cc-blau-1);
    --knopf2-flaeche: transparent;
    --knopf2-flaeche-hover: rgba(245, 244, 240, .14);
    --knopf2-schrift: var(--cc-weiss);
    --knopf2-rahmen: rgba(245, 244, 240, .5);
  }
  .mobilmenue[hidden] { display: none; }
  .mobilmenue__gruppe { border-bottom: 1px solid rgba(245, 244, 240, .16); }
  .mobilmenue__reiter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    text-align: left;
    color: var(--cc-weiss);
    font: 700 21px/1.2 var(--font-display);
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
  }
  .mobilmenue__reiter span.zusatz { font-weight: 400; }
  .mobilmenue__reiter .chev { width: 0.62em; height: 0.62em; color: var(--cc-n-300); }
  .mobilmenue__reiter[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .mobilmenue__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
  .mobilmenue__panel[data-offen="ja"] { grid-template-rows: 1fr; }
  .mobilmenue__panel > div { overflow: hidden; min-height: 0; }
  .mobilmenue__panel a {
    display: block;
    padding: 12px 0 12px 2px;
    color: var(--cc-n-200);
    font: 400 17px/1.3 var(--font-body);
    text-decoration: none;
  }
  .mobilmenue__panel > div > :last-child { padding-bottom: 20px; }
  /* Aktiv im Handymenue: Signalgruen auf Marine, wie die Links im Fliesstext. */
  .mobilmenue__reiter[data-aktiv], .mobilmenue__reiter[data-aktiv] .chev { color: var(--cc-gruen); }
  .mobilmenue__panel a[aria-current="page"] { color: var(--cc-gruen); font-weight: 600; }
  /* margin-top: auto schiebt den Block an den unteren Rand, statt ihn direkt
     unter den Reitern in der Bildmitte haengen zu lassen. */
  .mobilmenue__fuss { display: grid; gap: 12px; justify-items: stretch; margin-top: auto; padding-top: 40px; }
  .mobilmenue__fuss a.konto { color: var(--cc-weiss); font: 500 17px/1 var(--font-body); text-decoration: none; justify-self: start; }
  .mobilmenue__fuss .knopf { width: 100%; height: 52px; }
  .mobilmenue__kontakt { display: grid; gap: 6px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(245, 244, 240, .16); }
  .mobilmenue__kontakt .marke { color: var(--cc-n-300); margin-bottom: 4px; }
  .mobilmenue__kontakt a { color: var(--cc-weiss); font: 400 17px/1.5 var(--font-body); text-decoration: none; justify-self: start; }
  .mobilmenue__kontakt a:hover { color: var(--cc-gruen); }

  /* Bei offenem Menue traegt auch der Kopfbereich Marine, sonst steht ein
     heller Streifen ueber der dunklen Flaeche. */
  body[data-menue="auf"] .kopf { background: var(--cc-blau-1); }
  body[data-menue="auf"] .burger span,
  body[data-menue="auf"] .burger span::before,
  body[data-menue="auf"] .burger span::after { background: var(--cc-weiss); }
  body[data-menue="auf"] .burger[aria-expanded="true"] span { background: transparent; }
  body[data-menue="auf"] .kopf__logo img.logo-hell { display: none; }
  body[data-menue="auf"] .kopf__logo img.logo-dunkel { display: block; }

  /* text-wrap: balance gleicht Zeilenlaengen aus und macht sie dabei kuerzer.
     Bei zwei, drei Zeilen hilft das. Sobald die Ueberschrift aber auf vier
     oder fuenf Zeilen laeuft, bleiben ueber 100 Pixel ungenutzt und sie wirkt
     neben den vollbreiten Buttons eingerueckt. Ab 1024 bleibt balance. */
  .hero h1 { text-wrap: pretty; }

  .hero__unter { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .hero__text { max-width: none; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .schritte__raster { grid-template-columns: repeat(2, 1fr); }
  .live__raster { grid-template-columns: 1fr; gap: 40px; }
  .sendungen__raster { grid-template-columns: repeat(2, 1fr); }
  .stimmen__raster { grid-template-columns: 1fr; }
  .vertrauen { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .courage__raster { grid-template-columns: 1fr; gap: 40px; }
  .termine__raster { grid-template-columns: repeat(2, 1fr); }
  .newsletter { grid-template-columns: 1fr; gap: 24px; }
  .fuss__spalten { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .k28 { display: flex; }
  body { padding-bottom: 0; }
}

/* Mobil: alles einspaltig */
@media (max-width: 599px) {
  .hero { padding-top: 36px; padding-bottom: 0; }
  .hero-nach { padding-bottom: 48px; }
  .heroplay, .heroplay[data-zoom="an"] { margin-top: 32px; }
  .kennzahlen { grid-template-columns: 1fr; gap: 28px; }
  .haken { grid-template-columns: 1fr; }
  .rollen { grid-template-columns: 1fr; }
  .rolle { min-height: 0; padding: 24px; }
  .schritte__raster { grid-template-columns: 1fr; gap: 36px; }
  .schritt__bild { height: 130px; }
  .sendungen__raster { grid-template-columns: 1fr; }
  .sendungen__kopf { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stimme { grid-template-columns: 1fr; }
  .stimme__bild { min-height: 140px; }
  .stimme__text { padding: 24px; }
  .vertrauen { grid-template-columns: 1fr; gap: 28px; }
  .beitraege { grid-template-columns: repeat(2, 1fr); }
  .termine__raster { grid-template-columns: 1fr; }
  .fuss__spalten { grid-template-columns: 1fr; gap: 28px; }
  .newsletter input { width: 100%; }
  .newsletter__zeile { width: 100%; }
  .newsletter__zeile .knopf { width: 100%; }
  .sendeplan { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Pati 28.10. (QM mobil): Knoepfe boxed wie ueberall, nicht volle Breite */
  .bruecke__wege { flex-direction: column; align-items: center; }
  .hero__wege { gap: 12px; }
  .hero__wege .knopf { flex: 0 0 auto; }
  .hero__wege .pfeil { margin-left: 0; width: 100%; }
  .schaubild {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
    padding: 20px;
  }
  .schaubild__weg { width: 100%; height: 110px; }
  .schaubild__klasse { width: 100%; max-width: 215px; }
  .fuss__zeile .fueller { display: none; }
}

/* ===========================================================================
   Unterseiten
   Rechtstexte (S28 bis S31) und die Foerdergeber-Landingpage (S25).
   Knoepfe, Pfeile, Raster und Farben kommen aus den Regeln weiter oben -
   hier steht nur, was diese Seitentypen zusaetzlich brauchen.
   =========================================================================== */

/* Breadcrumb: auf Unterseiten vorgeschrieben, auf der Startseite nicht */
.brotkrume { padding: 22px var(--gut) 0; }
.brotkrume ol {
  max-width: var(--inhalt);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 400 15px/1.4 var(--font-body);
  color: var(--cc-n-600);
}
.brotkrume a { color: var(--cc-n-600); text-decoration: none; }
.brotkrume a:hover { color: var(--cc-blau-2); text-decoration: underline; text-underline-offset: 3px; }
.brotkrume li + li::before { content: "/"; margin-right: 8px; color: var(--cc-n-400); }
.brotkrume [aria-current] { color: var(--cc-blau-1); font-weight: 600; }

/* Kopfbereich einer Unterseite */
/* Unten derselbe Abstand wie bei jeder Sektion, damit der Seitenkopf
   nicht direkt an der naechsten Flaeche klebt. */
.seitenkopf { padding: 36px var(--gut) var(--sec-y); }
.seitenkopf h1 {
  font: 800 clamp(28px, 4.48vw, 64px)/1.04 var(--font-display);
  letter-spacing: -0.03em;
  max-width: 900px;
}
.seitenkopf__intro {
  margin-top: 20px;
  max-width: 680px;
  font: var(--he-lead);
  color: var(--cc-n-800);
}

/* Rechtstext: eine schmale Spalte, damit lange Absaetze lesbar bleiben */
.rechtstext { padding: var(--sec-y) var(--gut); }
.rechtstext__spalte { max-width: 720px; margin-inline: auto 0; }
.rechtstext h2 {
  font: 800 clamp(21px, 1.95vw, 28px)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font: 700 17px/1.3 var(--font-display); margin: 28px 0 10px; }
.rechtstext p, .rechtstext li { font: 400 17px/1.65 var(--font-body); color: var(--cc-n-800); }
.rechtstext p + p { margin-top: 14px; }
.rechtstext ul { margin: 14px 0 0; display: grid; gap: 10px; }
.rechtstext ul li { padding-left: 20px; position: relative; }
.rechtstext ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cc-blau-2);
}
.rechtstext dl { margin: 14px 0 0; display: grid; gap: 12px; }
.rechtstext dt { font: 600 17px/1.5 var(--font-body); color: var(--cc-blau-1); }
.rechtstext dd { margin: 2px 0 0; font: 400 17px/1.65 var(--font-body); color: var(--cc-n-800); }
.rechtstext a:not(.knopf) { color: var(--link-schrift); text-underline-offset: 3px; }

/* Noch nicht gelieferter Text: ruhige Flaeche statt gestricheltem Rahmen */
/* Hinweis-Familie (Komponenten-Audit Schritt 4, 30.09.2026): .ausstehend,
   .hinweis, .leer und .leerzustand haben denselben Aufbau - 24/28 px Innen-
   abstand, 24 px Abstand oben, Titel 21 px, Text 15 px. Sie unterscheiden
   sich nur in Flaeche und Ausrichtung. */
.ausstehend {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin: 24px 0 0;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background: var(--cc-weiss-2);
}
.ausstehend[hidden] { display: none; }
.ausstehend p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-600); }
.ausstehend .marke { display: block; margin-bottom: 0; }

/* Hinweisbox (K20) */
.hinweis {
  margin-top: 24px;
  padding: 24px 28px;
  container-type: inline-size;
  border-radius: var(--radius-md);
  background: var(--cc-blau-2-tint);
  display: grid;
  gap: 10px;
  justify-items: start;
  --knopf2-flaeche: #fff;
  --knopf2-flaeche-hover: var(--cc-weiss-2);
}
.hinweis h2 { margin: 0; font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; }
.hinweis p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.hinweis > .knopf { margin-top: 6px; }
/* Pati 30.09.: in schmalen Kaesten geht der Knopf ueber die volle Breite, wie Titel und Text */
@container (max-width: 560px) { .hinweis > .knopf { justify-self: stretch; } }

/* Ruecksprung am Ende eines Rechtstextes */
.ruecksprung {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(3, 26, 128, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

/* Reiter (K08), auf der Foerdergeber-Seite */
/* Zurueckgenommene Fassung: die Leiste haelt die Reiter nur noch als ruhiger
   Rahmen zusammen. Nicht aktive Reiter sind weisse Flaechen - sie sind damit
   als Schaltflaeche erkennbar, ohne Farbe zu beanspruchen. Kraeftig ist nur
   der eine aktive Reiter. */
.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-bottom: 30px;
  padding: 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--cc-n-200);
}
.reiter button {
  display: inline-flex;
  align-items: center;
  border: none;
  cursor: pointer;
  height: auto;
  padding: 0 0 14px;
  border-radius: 0;
  background: none;
  color: var(--cc-n-600);
  font: 600 15px/1.2 var(--font-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.reiter button:hover { background: none; color: var(--cc-blau-1); }
.reiter button[aria-selected="true"] { background: none; color: var(--cc-blau-1); border-bottom-color: var(--cc-blau-1); }
.reiter-inhalt[hidden] { display: none; }

/* Schrittfolge (K09) */
/* Wirkungskette als Karten. Kommentar mU1I3PHZ0zBR: Als nackte Textspalten
   war nicht zu sehen, dass die vier Schritte zusammengehoeren. Die farbige
   Oberkante im Wechsel reicht dafuer - Verbindungspfeile dazwischen waren
   ueberfluessig und sind wieder raus. */
.schrittfolge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.schrittfolge > div {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 26px 28px;
  background: #fff;
  border-radius: 16px;
  border-top: 3px solid var(--cc-blau-2);
}
.schrittfolge > div:nth-child(2) { border-top-color: var(--cc-violett); }
.schrittfolge > div:nth-child(3) { border-top-color: var(--cc-gruen); }
.schrittfolge > div:nth-child(4) { border-top-color: var(--cc-blau-1); }
.schrittfolge .marke { color: var(--cc-blau-2); }
.schrittfolge h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; }
.schrittfolge p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }

@media (max-width: 1023px) {
  .schrittfolge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* In zwei Reihen zeigt die Spitze am Reihenende ins Leere. */
  .rechtstext__spalte { max-width: none; }
}
@media (max-width: 599px) {
  .schrittfolge { grid-template-columns: 1fr; gap: 34px; }
}

/* ===========================================================================
   Vorschau-Schalter
   Nur sichtbar mit ?vorschau an der Adresse. Bewusst in neutralem Grau statt
   in den Markenfarben - er ist Werkzeug, nicht Teil der Seite.
   =========================================================================== */

.vorschau {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius-pill);
  background: #1a1a1a;
  color: #fff;
  font: 500 13px/1 var(--font-body);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.vorschau[data-an="ja"] { display: flex; }

.vorschau__stand { opacity: .7; white-space: nowrap; }
.vorschau__stand b { font-weight: 600; opacity: 1; color: #d6ff7a; }

.vorschau__schalter {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #1a1a1a;
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.vorschau__schalter:hover { background: #d6ff7a; }
.vorschau__schalter:focus-visible { outline: 3px solid #d6ff7a; outline-offset: 2px; }

.vorschau__zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font: 400 17px/1 var(--font-body);
  cursor: pointer;
}
.vorschau__zu:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* Ueber der Sticky-Leiste bleiben, damit sich beide nicht ueberdecken */
@media (max-width: 1023px) {
  .vorschau { right: 12px; bottom: 68px; padding: 8px 10px 8px 14px; font-size: 13px; }
  .vorschau__schalter { height: 30px; padding: 0 13px; font-size: 13px; }
}

/* --- Bausteine der Unterseiten --------------------------------------------
   Die Unterseiten kommen aus dem Textbuch: Ueberschrift, Fliesstext, Karten
   oder Schrittfolge. Mehr Komponenten (Akkordeon, Reiter, Zeitleiste mit
   Zeiten) werden je Seite nachgezogen. */

.abschnitt__titel {
  font: var(--he-h2);
  letter-spacing: -0.025em;
  max-width: 820px;
  margin-bottom: 36px;
}
.textblock { max-width: 760px; }
.textblock p { font: var(--he-body); color: var(--cc-n-800); }
.textblock p + p { margin-top: 16px; }

.saulen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.saule {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px;
  background: #fff;
  border-radius: 16px;
}
.saule h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; }
/* Kommentar PgaeZz6-HqfY: Endet eine Karte mit einem Textlink, steht der
   Link unten - in allen Karten einer Reihe auf derselben Hoehe, egal wie lang
   der Text darueber ist. So wirken die Karten gleich befuellt. */
.saule:has(> .pfeil:last-child) { display: flex; flex-direction: column; align-items: flex-start; }
.saule:has(> .pfeil:last-child) > :not(.pfeil) { align-self: stretch; }
.saule > .pfeil:last-child { margin-top: auto; padding-top: 6px; }
.saule p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }

.bruecke p + p { margin-top: 12px; }

/* Im Courage-Bereich keine Sticky-Leiste - so schreibt es K28 vor. */
body[data-bereich="courage"] .k28 { display: none !important; }

/* --- Akkordeon (K07) -------------------------------------------------------
   Als <details>/<summary> gebaut: bedienbar ohne JavaScript, mit Tastatur,
   und Screenreader kennen das Muster. */

.akkordeon { display: grid; margin-top: 28px; max-width: 820px; }
.akkordeon details { border-top: 1px solid rgba(3, 26, 128, .14); }
.akkordeon details:last-of-type { border-bottom: 1px solid rgba(3, 26, 128, .14); }
.akkordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font: 700 17px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cc-blau-1);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-base) var(--ease-weich);
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary:hover { color: var(--cc-blau-2); padding-left: 6px; }
.akkordeon summary .spitze { transition: transform var(--dur-auf) var(--ease-weich); }
.akkordeon details[open] summary .spitze { transform: rotate(180deg); }
.akkordeon details > div { padding: 0 0 22px; max-width: 700px; }
.akkordeon p { font: 400 17px/1.6 var(--font-body); color: var(--cc-n-800); }
.akkordeon p + p { margin-top: 12px; }

/* --- Download-Karte (K15) ------------------------------------------------- */

.download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
  padding: 26px 28px;
  border-radius: var(--radius-md);
  background: #fff;
  max-width: 760px;
  --knopf2-flaeche: var(--cc-blau-2-tint);
  --knopf2-flaeche-hover: var(--blau-2-tint-hover);
}
.download h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; }
.download p { margin-top: 6px; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.download__meta { display: block; margin-top: 8px; font: 500 13px/1.4 var(--font-body); color: var(--cc-n-600); }
@media (max-width: 599px) {
  .download { grid-template-columns: 1fr; }
  .download .knopf { width: 100%; }
}

/* --- Pager (K25) ---------------------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 32px var(--gut);
  border-top: 1px solid rgba(3, 26, 128, .14);
}
.pager__inhalt {
  max-width: var(--inhalt);
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
}
.pager .spitze--zurueck { transform: rotate(180deg); }

/* Zwei Spalten: Text links, ruhige Flaeche rechts */

/* Hinweis an FAQ-Eintraegen, deren Antwort noch nicht final ist */
.faq__status {
  margin-top: 10px !important;
  font: 500 15px/1.5 var(--font-body) !important;
  color: var(--cc-n-600) !important;
}

/* --- Zeitleiste (K09 Variante Zeitleiste) --------------------------------- */

.zeitleiste { display: grid; gap: 0; counter-reset: schritt; max-width: 860px; }
.zeitleiste li {
  position: relative;
  counter-increment: schritt;
  padding: 0 0 36px 64px;
  border-left: 2px solid rgba(3, 26, 128, .14);
  --schritt-linie: 0;
  border-left-color: transparent;
}
.zeitleiste li:last-child { border-left-color: transparent; padding-bottom: 0; }
.zeitleiste li::before {
  content: counter(schritt);
  position: absolute;
  left: -21px;
  top: -4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 17px/1 var(--font-display);
  z-index: 1;
  background: var(--cc-n-200);
  color: var(--cc-n-500);
  transition: background-color var(--dur-auf) var(--ease-weich), color var(--dur-auf) var(--ease-weich), transform var(--dur-auf) var(--ease-weich);
}
.zeitleiste__zeit {
  display: block;
  font: var(--label);
  letter-spacing: var(--label-sp);
  text-transform: uppercase;
  color: var(--cc-n-600);
  margin-bottom: 8px;
}
.zeitleiste h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; }
.zeitleiste p { margin-top: 8px; font: var(--he-body); color: var(--cc-n-800); max-width: 620px; }
.zeitleiste .knopf { margin-top: 16px; }
@media (max-width: 599px) {
  .zeitleiste li { padding-left: 44px; }
  .zeitleiste li::before { left: -19px; width: 34px; height: 34px; font-size: 15px; }
}

.reiter__text { font: var(--he-body); color: var(--cc-n-800); max-width: 680px; margin-bottom: 18px; }

/* --- Courage-Bereich -------------------------------------------------------
   Der Kampagnen-Kontrast sitzt auf einzelnen Flaechen, nicht auf der ganzen
   Seite: durchgehend Marine wurde zu blau. Dunkel sind der Kopfbereich und
   ausgewaehlte Sektionen, dazwischen helle und farbige Flaechen. */

.seitenkopf--dunkel {
  background: var(--cc-blau-1);
  color: var(--cc-weiss);
  padding-bottom: var(--sec-y);
}
.seitenkopf--dunkel h1 { color: var(--cc-weiss); }
.seitenkopf--dunkel .seitenkopf__intro { color: var(--cc-n-200); }

/* Farbsatz fuer dunkle Flaechen, auf Sektion und Kopfbereich */
.seitenkopf--dunkel, .sektion--marine {
  --knopf1-flaeche: var(--cc-gruen);
  --knopf1-flaeche-hover: var(--gruen-hover);
  --knopf1-schrift: var(--cc-blau-1);
  --knopf2-flaeche: transparent;
  --knopf2-flaeche-hover: rgba(245, 244, 240, .14);
  --knopf2-schrift: var(--cc-weiss);
  --knopf2-rahmen: rgba(245, 244, 240, .5);
  --link-schrift: var(--cc-gruen);
  --link-schrift-hover: var(--cc-weiss);
}

.sektion--marine h2, .sektion--marine h3 { color: var(--cc-weiss); }
.sektion--marine .textblock p, .sektion--marine .zeitleiste p, .sektion--marine .saule p,
.sektion--marine .akkordeon p { color: var(--cc-n-200); }
.sektion--marine .marke { color: var(--cc-gruen); }
.sektion--marine .akkordeon details { border-color: rgba(245, 244, 240, .18); }
.sektion--marine .akkordeon summary { color: var(--cc-weiss); }
.sektion--marine .akkordeon summary:hover { color: var(--cc-gruen); }
.sektion--marine .zeitleiste li { border-left-color: rgba(245, 244, 240, .2); }
.sektion--marine .zeitleiste li::before { background: rgba(245, 244, 240, .22); color: var(--cc-n-300); }
.sektion--marine .zeitleiste__zeit { color: var(--cc-n-300); }
.sektion--marine .hinweis { background: rgba(245, 244, 240, .1); }
.sektion--marine .hinweis h2 { color: var(--cc-weiss); }
.sektion--marine .hinweis p { color: var(--cc-n-200); }
.sektion--marine .ausstehend { background: rgba(245, 244, 240, .1); }
.sektion--marine .ausstehend p { color: var(--cc-n-300); }
.sektion--marine .faq__status { color: var(--cc-n-300) !important; }
.sektion--marine .haken li,
.seitenkopf--dunkel .haken li { color: var(--cc-n-200); }
.sektion--marine .abschnitt__titel,
.sektion--marine .zweispalter__kopf h2 { color: var(--cc-weiss); }

/* Im Courage-Bereich keine Sticky-Leiste - so schreibt es K28 vor. */

/* --- Bildkarte -------------------------------------------------------------
   Bild oben, Text darunter. Die Karte hat immer eine andere Farbe als die
   Flaeche, auf der sie liegt, sonst verschwindet sie. */

.bildkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.bildkarte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.sektion--marine .bildkarte { background: var(--cc-blau-1-soft); }
.bildkarte__bild { aspect-ratio: 3 / 2; background: var(--cc-weiss-3); transition: transform var(--dur-slow) var(--ease-weich); }
.bildkarte__text { padding: 24px 28px 28px; display: grid; gap: 10px; align-content: start; }
.bildkarte h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; }
.bildkarte p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.sektion--marine .bildkarte p { color: var(--cc-n-200); }
.bildkarte .thema { justify-self: start; margin-top: 4px; }

/* --- Formular (K26, K27) --------------------------------------------------- */

.formular { display: grid; gap: 18px; max-width: 680px; }
.feld { display: grid; gap: 7px; }
.feld label { font: 600 15px/1.3 var(--font-body); color: var(--cc-blau-1); }
.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid rgba(3, 26, 128, .22);
  border-radius: var(--radius-sm);
  /* Nur die Farbe, nicht die Kurzschreibweise: "background:" loeschte das
     Pfeilbild der Auswahlfelder, das weiter unten gesetzt wird. */
  background-color: #fff;
  font: 400 15px/1.4 var(--font-body);
  color: var(--cc-n-900);
}
.feld input:focus, .feld textarea:focus { border-color: var(--cc-blau-2); outline: none; box-shadow: 0 0 0 3px rgba(77,97,244,.2); }
.feld__hinweis { font: 400 13px/1.45 var(--font-body); color: var(--cc-n-600); }
.formular__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
/* Heisst bewusst nicht .vorschau - so hiess schon der Umschalter unten
   rechts, und dessen Gestaltung wurde davon ueberschrieben. */
.textvorschau {
  margin-top: 8px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: #fff;
  font: 400 15px/1.6 var(--font-body);
  color: var(--cc-n-800);
  white-space: pre-wrap;
}

/* ===========================================================================
   Regeln aus der Abnahme vom 23.09.2026
   =========================================================================== */

/* REGEL 1: Der Kopfbereich hat immer die Farbe der Navigation.
   Die Navigation ist Seitenweiss, also ist es der Kopfbereich auch - sonst
   entsteht direkt unter der Leiste eine Kante, die nichts trennt. Einzige
   Ausnahme ist der Courage-Bereich, der bewusst dunkel einsteigt. */
.seitenkopf:not([class*="seitenkopf--"]) { background: var(--cc-weiss); }

/* REGEL 2: Nie zwei gleiche Flaechen hintereinander.
   Weil der Kopfbereich Seitenweiss ist, traegt die erste Sektion die
   Abstufung. Folgt darauf eine Papier-Sektion, weicht die wieder zurueck -
   sonst stossen zwei gleiche Flaechen aneinander. */
.seitenkopf + .sektion:not([class*="sektion--"]),
.sektion:not([class*="sektion--"]) + .sektion:not([class*="sektion--"]) {
  background: var(--cc-weiss-2);
}
.seitenkopf + .sektion:not([class*="sektion--"]) + .sektion--papier { background: var(--cc-weiss); }
.sektion--papier + .sektion--papier,
.sektion--hellblau + .sektion--hellblau,
.sektion--violett + .sektion--violett { background: var(--cc-weiss); }
.sektion--marine + .sektion--marine { background: var(--cc-blau-1-soft); }

/* REGEL 2d: Hellblau und Violett duerfen nicht aufeinander folgen.
   Kommentar 57lC8Z-2Bdad: Hellblau nach Marine sieht gut aus, weil viel
   Kontrast dazwischen liegt. Hellblau nach Violett dagegen sind zwei helle
   Pastelltoene nebeneinander - der Wechsel ist dann nicht mehr zu sehen.
   Die folgende Flaeche weicht auf Seitenweiss aus. */
.sektion--hellblau + .sektion--violett,
.sektion--violett + .sektion--hellblau { background: var(--cc-weiss); }

/* REGEL 2b: Auch eingefasste Kaesten folgen der Regel. Ein Hinweis- oder
   Ausstehend-Kasten in Brand-Weiss verschwindet auf einer Papier-Sektion. */

/* REGEL 2: Eine Karte hat nie dieselbe Farbe wie die Flaeche, auf der sie
   liegt - sonst ist sie schlicht nicht zu sehen. */

/* REGEL 2c: Ein Kasten ist auf jeder hellen Flaeche reinweiss. Keine der
   hellen Flaechen (Seitenweiss, Papier, Hellblau, Violett, Gruen) ist
   reinweiss - damit kann ein Kasten nie mit seinem Untergrund verschmelzen,
   auch wenn die Sektion ihre Farbe durch Regel 2 wechselt. Auf dunklen
   Flaechen uebernehmen die Marine-Abstufungen dieselbe Aufgabe. */
.saule, .ausstehend, .download { background: #fff; }
.sektion--hellblau .hinweis, .bruecke .hinweis { background: #fff; }
.sektion--marine .saule, .sektion--marine .download,
.seitenkopf--dunkel .saule { background: var(--cc-blau-1-soft); }
.sektion--marine .download h3 { color: var(--cc-weiss); }
.sektion--marine .download p,
.sektion--marine .download__meta { color: var(--cc-n-300); }

/* REGEL 3: Zwei-Spalten-Sektion. Ueberschrift links, Inhalt rechts daneben -
   so wie "Finden Sie Ihren Einstieg" auf der Startseite. Standard fuer
   Abschnitte mit viel Inhalt, insbesondere alle FAQ. */
.zweispalter {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.zweispalter > h2 {
  margin: 0;
  font: var(--he-h2);
  letter-spacing: -0.025em;
}
.zweispalter .akkordeon { margin-top: 0; }
/* Komponenten-Audit 30.09.: .geteilt war dasselbe Raster und ist hier aufgegangen */
.zweispalter > h3 { margin: 0; font: 700 clamp(21px, 1.95vw, 28px)/1.1 var(--font-display); letter-spacing: -0.02em; }
@media (max-width: 1023px) {
  .zweispalter { grid-template-columns: 1fr; gap: 28px; }
}

/* Kopfbereich: die beiden Knoepfe standen zu weit auseinander */
.kopf__konto + .kopf__konto { margin-left: -4px; }

/* Die vier Beitragskacheln im Courage-Kopf: mittig und groesser.
   Kommentar l48KcN10UcY0. */
.beitraege--gross {
  max-width: 860px;
  margin: 52px auto 0;
  gap: 20px;
}
@media (max-width: 767px) {
  .beitraege--gross { max-width: 420px; gap: 14px; }
}

/* --- Gestaffeltes Einblenden ------------------------------------------------
   Gilt auf allen Seiten. Die Auswahl der Elemente macht das Skript, hier steht
   nur, wie die Bewegung aussieht. */


/* --- Reiterleiste ohne Hintergrund ---------------------------------------
   Die Pille um die Reiter hat wie ein zweiter Kasten gewirkt. Kommentar
   twskMkw-b43A: Die Reiter stehen jetzt frei, der aktive traegt eine Linie. */

/* Kommentar OpQI9aDVDTYH: Die Reiter teilen sich die Leiste zu gleichen
   Teilen. Frei stehend waren sie so breit wie ihr Wort - drei ungleiche
   Stuecke nebeneinander. Schmal bleiben sie frei, sonst brechen lange
   Bezeichnungen in drei Zeilen um. */
@media (min-width: 768px) {
  .reiter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 12px; }
  .reiter button { text-align: center; }
}
.sektion--marine .reiter { border-bottom-color: rgba(245, 244, 240, .2); }
.sektion--marine .reiter button { color: var(--cc-n-300); }
.sektion--marine .reiter button[aria-selected="true"] { color: var(--cc-gruen); border-bottom-color: var(--cc-gruen); }

/* --- Gruende: drei Karten, darunter zwei --------------------------------
   Kommentare gZ-9XyaqXL3c. Das Sechser-Raster macht die 3+2-Anordnung ohne
   Sonderfaelle: jede Karte nimmt zwei Spalten, die letzten beiden drei.
   Die Farben folgen den Rollenkacheln der Startseite - fuenf Karten, fuenf
   Flaechen, damit keine Karte ohne Grund heraussticht. */

.gruende { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.gruende__karte {
  grid-column: span 2;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px;
  border-radius: 16px;
}
.gruende__karte:nth-child(4), .gruende__karte:nth-child(5) { grid-column: span 3; }
.gruende__zahl {
  font: 800 21px/1 var(--font-display);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.gruende__karte h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.gruende__karte p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.gruende__karte .pfeil { margin-top: 6px; justify-self: start; }

/* Fuenf Flaechen, dieselbe Palette wie die Rollenkacheln */
.gruende__karte--1 { background: var(--cc-violett-tint); }
.gruende__karte--2 { background: #fff; }
.gruende__karte--3 { background: var(--cc-gruen); }
.gruende__karte--4 { background: var(--cc-blau-2-tint); }
.gruende__karte--5 { background: var(--cc-blau-1); }

.gruende__karte--1 .gruende__zahl { background: var(--cc-violett); color: var(--cc-blau-1); }
.gruende__karte--2 .gruende__zahl { background: var(--cc-blau-2); color: #fff; }
.gruende__karte--3 .gruende__zahl { background: var(--cc-blau-1); color: var(--cc-gruen); }
.gruende__karte--4 .gruende__zahl { background: var(--cc-blau-2); color: #fff; }
.gruende__karte--5 .gruende__zahl { background: var(--cc-gruen); color: var(--cc-blau-1); }

.gruende__karte--5 h3 { color: var(--cc-weiss); }
.gruende__karte--5 p { color: var(--cc-n-200); }
.gruende__karte--5 .pfeil { color: var(--cc-gruen); }
.gruende__karte--5 .pfeil:hover { color: var(--cc-weiss); }

@media (max-width: 1023px) {
  .gruende { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gruende__karte, .gruende__karte:nth-child(4), .gruende__karte:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 599px) {
  .gruende { grid-template-columns: 1fr; }
}

/* --- Nicht-noetig-Liste ---------------------------------------------------
   Kommentar 0xaIGU80Nglf: Die vier leeren Kaesten sahen aus wie ein Drahtmodell.
   Jetzt traegt jeder Punkt ein durchgestrichenes Zeichen und steht auf dunklem
   Grund - die Aussage "das brauchen Sie alles nicht" wird damit sichtbar. */

.nichtliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 56px; }
.nichtliste li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(245, 244, 240, .16);
  font: 500 17px/1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cc-weiss);
}
.nichtliste li::before {
  content: "\2715";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cc-violett);
  color: var(--cc-blau-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--font-body);
}
@media (max-width: 767px) {
  .nichtliste { grid-template-columns: 1fr; gap: 0; }
  .nichtliste li { font-size: 17px; padding: 16px 0; }
}


/* Haken einspaltig, wenn sie in der rechten Spalte eines Zweispalters stehen */
.haken--einspaltig { grid-template-columns: 1fr; gap: 14px; }

/* Die Haken setzen sich beim Einblenden selbst: erst der Text, dann das
   Zeichen. Kommentar byHn4IKkyLDS. */
.haken li[data-auf]::before {
  transform: scale(.4);
  opacity: 0;
  transition: transform .4s var(--ease-out), opacity .3s linear;
  transition-delay: calc(var(--auf-i, 0) * 70ms + 160ms);
}
.haken li[data-auf="ja"]::before { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .haken li[data-auf]::before { transform: none !important; opacity: 1 !important; transition: none; }
}

/* --- Zwei-Spalten-Sektion, Variante mit Bild -------------------------------
   Kommentar RA5HPxxq6J4s: Ueberschrift und Fliesstext stehen zusammen in der
   linken Spalte, das Bild fuellt die rechte. Anders als beim Grundfall sind
   die Spalten hier annaehernd gleich breit - ein Bild in 796px neben einer
   340px-Spalte erschlaegt den Text. */

.zweispalter--bild { grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.zweispalter--bild > .zweispalter__text { display: grid; gap: 20px; align-content: start; }
.zweispalter--bild > .zweispalter__text > h2 { margin: 0; font: var(--he-h2); letter-spacing: -0.025em; text-wrap: balance; }
.zweispalter--bild .zweispalter__bild { aspect-ratio: 4 / 3; border-radius: 16px; }
@media (max-width: 1023px) {
  .zweispalter--bild { grid-template-columns: 1fr; gap: 28px; }
}

/* ===========================================================================
   BEWEGUNG
   Die Seite soll sich weich anfuehlen, ohne dass man auf etwas wartet.
   Grundsatz: kurze Wege, lange Kurve. Alles endet unter einer halben Sekunde.
   =========================================================================== */


/* --- Akkordeon: aufziehen statt aufspringen -------------------------------
   Browser mit ::details-content koennen die Hoehe von 0 auf auto animieren.
   Wo das fehlt, klappt das Akkordeon wie bisher sofort auf - der Inhalt ist
   also nie unerreichbar. */

@supports selector(::details-content) {
  .akkordeon details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size var(--dur-auf) var(--ease-weich),
      opacity var(--dur-base) var(--ease-weich),
      content-visibility var(--dur-auf) allow-discrete;
  }
  .akkordeon details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Die Pfeilspitze dreht mit derselben Kurve wie der Inhalt faehrt. */

/* Die ganze Zeile reagiert, nicht nur der Text - das gibt dem Klick eine
   Flaeche und macht den Zustandswechsel sichtbar. */

/* --- Sprungmarken unter dem Kopfbereich ------------------------------------
   Ohne diesen Abstand landet ein Ankerziel unter der klebenden Leiste. */
@media (max-width: 1023px) { html { scroll-padding-top: 80px; } }

/* --- Karten und Kacheln ---------------------------------------------------- */
.gruende__karte, .bildkarte, .saule {
  transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich);
}
a.bildkarte:hover, a.saule:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(3, 26, 128, .12); }

/* Das Bild in einer Bildkarte zieht beim Hovern leicht an. */
a.bildkarte:hover .bildkarte__bild { transform: scale(1.03); }

/* --- Reiter ---------------------------------------------------------------- */
.reiter-inhalt:not([hidden]) { animation: ccEinblenden var(--dur-auf) var(--ease-weich) both; }
@keyframes ccEinblenden {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .akkordeon details::details-content,
  .akkordeon summary,
  .akkordeon summary .spitze,
  .gruende__karte, .bildkarte, .saule, .bildkarte__bild { transition: none; }
  .reiter-inhalt:not([hidden]) { animation: none; }
}

/* --- Brotkrume vor einem dunklen Kopfbereich -------------------------------
   Kommentar WtIraX6lPHqf: Die Brotkrume stand auf hellem Grund vor einer
   marineblauen Flaeche und sah aus wie ein eigener Streifen. Ueber :has()
   erkennt sie den dunklen Kopfbereich selbst - jede neue Seite mit
   .seitenkopf--dunkel bekommt es damit ohne Zusatzarbeit. */

.brotkrume:has(+ .seitenkopf--dunkel) {
  background: var(--cc-blau-1);
  padding-top: 26px;
}
.brotkrume:has(+ .seitenkopf--dunkel) ol { color: var(--cc-n-300); }
.brotkrume:has(+ .seitenkopf--dunkel) a { color: var(--cc-n-300); }
.brotkrume:has(+ .seitenkopf--dunkel) a:hover { color: var(--cc-gruen); }
.brotkrume:has(+ .seitenkopf--dunkel) [aria-current="page"] { color: var(--cc-weiss); }

/* --- "Challenge Sendungen" ist ein Punkt, kein Paar ------------------------
   Kommentar lcYwFVP7hw1r. Statt eines geschuetzten Leerzeichens in voller
   Breite steht jetzt ein knapper Abstand zwischen beiden Woertern. */

.reiter__wort { display: inline-flex; align-items: baseline; gap: 4px; }
.reiter__zusatz { font-weight: 400; }

/* --- Hover auf Karten mit Handlungsaufforderung ----------------------------
   Kommentar fsKykLEvLjTn: Die Rollenkacheln heben sich beim Ueberfahren, die
   uebrigen Karten nicht. Ab jetzt hebt sich jede Karte, die selbst ein Link
   ist oder einen Link traegt - und nur die. Eine Karte ohne Weg soll sich
   auch nicht so anfuehlen, als haette sie einen. */

.saule:has(a), .gruende__karte:has(a), .bildkarte:has(a),
a.saule, a.gruende__karte, a.bildkarte {
  transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich);
}
.saule:has(a):hover, .gruende__karte:has(a):hover, .bildkarte:has(a):hover,
a.saule:hover, a.gruende__karte:hover, a.bildkarte:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(3, 26, 128, .14);
}
.sektion--marine .saule:has(a):hover,
.gruende__karte--5:has(a):hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }

/* Der Pfeil in der Karte laeuft mit, wenn die Karte angehoben wird. */
.saule:has(a):hover .pfeil .spitze,
.gruende__karte:has(a):hover .pfeil .spitze { transform: translateX(3px); }

/* --- Beitragskacheln im Courage-Kopf ---------------------------------------
   Kommentar CAwpUtEzKJbn: beim Ueberfahren groesser werden und leicht
   kippen. Die Nachbarn kippen in die Gegenrichtung, damit die Reihe in
   Bewegung gerät statt nur eine Kachel zu wachsen. */

.beitraege--gross .beitrag {
  transition: transform var(--dur-auf) var(--ease-weich), box-shadow var(--dur-auf) var(--ease-weich);
}
.beitraege--gross:hover .beitrag { transform: scale(.97); }
.beitraege--gross .beitrag:hover {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
  z-index: 2;
}
.beitraege--gross .beitrag:hover + .beitrag { transform: scale(.97) rotate(2deg); }
.beitraege--gross .beitrag:has(+ .beitrag:hover) { transform: scale(.97) rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  .saule, .gruende__karte, .bildkarte, .beitraege--gross .beitrag { transition: none; }
  .beitraege--gross:hover .beitrag,
  .beitraege--gross .beitrag:hover,
  .beitraege--gross .beitrag:hover + .beitrag,
  .beitraege--gross .beitrag:has(+ .beitrag:hover) { transform: none; }
}

/* --- Zwei-Spalten-Sektion: Kopf mit Link ------------------------------------
   Kommentar ypiNT3Qy1lXp: Der weiterfuehrende Link stand unter dem ganzen
   Block. Er gehoert direkt unter die Ueberschrift, also in die linke Spalte. */

.zweispalter__kopf { display: grid; gap: 16px; justify-items: start; align-content: start; }
.zweispalter__kopf h2 { margin: 0; font: var(--he-h2); letter-spacing: -0.025em; text-wrap: balance; }

/* --- Klebende Ueberschrift --------------------------------------------------
   Kommentar _b7f7pQ-qndc: Die Ueberschrift bleibt links stehen, waehrend die
   Schritte rechts durchlaufen - bis die Sektion zu Ende ist. Der Abstand nach
   oben entspricht der klebenden Kopfleiste. */

.zweispalter--klebend > :first-child {
  position: sticky;
  align-self: start;
  top: 176px;
}
@media (max-width: 1023px) {
  /* Einspaltig gibt es nichts, woran die Ueberschrift kleben koennte. */
  .zweispalter--klebend > :first-child { position: static; }
}

/* --- Rollenkachel in Blau --------------------------------------------------
   Kommentar -C6t-Ypylgtr: In der Gruppe war nur eine Kachel farbig. Jetzt hat
   jede ihre eigene Flaeche, wie bei den fuenf Gruenden (Regel 19). */
.rolle--blau { background: var(--cc-blau-2-tint); }

/* --- Bunte Kartengruppe ----------------------------------------------------
   Kommentare wTju8woMo4zW und IY7N9OY2uhAO: Zu viele Unterseiten waren
   weisse Karten auf wechselndem Grau. `.saulen--bunt` gibt jeder Karte einer
   Gruppe eine eigene Flaeche aus derselben Palette wie die Rollenkacheln -
   dieselbe Regel wie bei den fuenf Gruenden (Regel 19), nur ohne neues
   Markup: es reicht die Klasse am Behaelter. */

.saulen--bunt > .saule:nth-child(5n+1) { background: var(--cc-violett-tint); }
.saulen--bunt > .saule:nth-child(5n+2) { background: var(--cc-gruen); }
.saulen--bunt > .saule:nth-child(5n+3) { background: var(--cc-blau-2-tint); }
.saulen--bunt > .saule:nth-child(5n+4) { background: #fff; }
.saulen--bunt > .saule:nth-child(5n+5) { background: var(--cc-blau-1); }
.saulen--bunt > .saule:nth-child(5n+5) h3 { color: var(--cc-weiss); }
.saulen--bunt > .saule:nth-child(5n+5) p { color: var(--cc-n-200); }
.saulen--bunt > .saule:nth-child(5n+5) .pfeil { color: var(--cc-gruen); }
.saulen--bunt > .saule:nth-child(5n+5) .pfeil:hover { color: var(--cc-weiss); }
.saulen--bunt > .saule:nth-child(5n+5) .marke { color: var(--cc-gruen); }

/* --- Knopffarben in Kaesten -------------------------------------------------
   Ein Kasten ist selbst eine Flaeche und muss den Farbsatz deshalb genauso
   neu setzen wie eine Sektion. Ohne diese Zeilen stand "Laden" weiss auf
   weisser Download-Karte und "Anmelden" blau auf blauem Hinweiskasten - der
   Knopf war da, aber nicht als Knopf zu erkennen. */

.sektion--marine .download, .sektion--marine .hinweis {
  --knopf2-flaeche: transparent;
  --knopf2-flaeche-hover: rgba(245, 244, 240, .14);
  --knopf2-rahmen: rgba(245, 244, 240, .5);
}

/* --- Stepper: mittig geteilt ------------------------------------------------
   Kommentar d_l2kBXd7Vd8: In der Grundform (340px + Rest) sass der rechte
   Teil zu weit links. Beim Stepper stehen die Spalten deshalb je zur Haelfte,
   und die Liste nutzt die Breite aus. */

/* 25.09.: Pati will eine Teilungslinie je Art - der Stepper teilt wieder wie
   alle Textsektionen (340px + Rest), die Liste nutzt die rechte Spalte aus. */
.zweispalter--klebend { grid-template-columns: 340px minmax(0, 1fr); gap: 64px; }
.zweispalter--klebend .zeitleiste { max-width: none; }
@media (max-width: 1023px) {
  .zweispalter--klebend { grid-template-columns: 1fr; gap: 28px; }
}

/* Die Ueberschrift haengt sich frueher fest - vorher war sie schon fast am
   oberen Rand, bevor sie stehen blieb. Kommentar 7KLLSGVVD4ke. */

/* --- Stepper: Linie und Punkte laufen beim Scrollen mit --------------------
   Ein Schritt ist erst ausgegraut. Sobald er ins Bild kommt, faerbt sich sein
   Punkt, und die Linie darunter waechst zum naechsten Schritt. */

.zeitleiste li::after {
  content: "";
  position: absolute;
  /* Startet unter dem Zahlenkreis (der reicht von -4 bis 36) statt bei 0 -
     sonst laeuft der Strich mitten durch die Zahl. */
  left: -2px; top: 44px;
  width: 2px;
  height: calc(100% - 44px);
  background: linear-gradient(var(--cc-blau-2) 0 var(--schritt-linie), rgba(3, 26, 128, .14) var(--schritt-linie) 100%);
  transition: --schritt-linie var(--dur-slow) linear;
}
.zeitleiste li:last-child::after { display: none; }
.zeitleiste li[data-erreicht="ja"]::before {
  background: var(--cc-blau-2);
  color: #fff;
}
.zeitleiste li[data-erreicht="ja"]::after { --schritt-linie: 100%; }

/* Auf dunklen Flaechen der gleiche Ablauf in den hellen Tönen */
.sektion--marine .zeitleiste li[data-erreicht="ja"]::before {
  background: var(--cc-gruen); color: var(--cc-blau-1);
}
.sektion--marine .zeitleiste li::after {
  background: linear-gradient(var(--cc-gruen) 0 var(--schritt-linie), rgba(245, 244, 240, .2) var(--schritt-linie) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .zeitleiste li::before, .zeitleiste li::after { transition: none; }
}

@property --schritt-linie {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

/* Der dritte Weg in einer CTA-Sektion steht als Textlink unter dem Knopfpaar.
   Drei Knoepfe nebeneinander sind keine Entscheidung mehr. */

/* Nachgestellte Inhalte, die in der rechten Spalte eines Zweispalters bleiben
   sollen. Einspaltig gibt es keine zweite Spalte - ohne die Abfrage entsteht
   dort eine zusaetzliche Rasterspalte und die Seite laeuft seitlich ueber. */
@media (min-width: 1024px) {
  .zweispalter__rechts { grid-column: 2; }
}

/* --- Suche auf den FAQ-Seiten (K21) -----------------------------------------
   Filtert die Fragen im Browser. Bei hoechstens 50 Eintraegen je Seite braucht
   es dafuer weder Server noch Bibliothek. */

.faq-suche { max-width: 620px; }
.faq-suche__feld { display: grid; gap: 10px; }
.faq-suche__feld > span {
  font: 600 15px/1.3 var(--font-body);
  color: var(--cc-blau-1);
}
.faq-suche input {
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--cc-n-300);
  border-radius: var(--radius-md);
  background: #fff;
  font: 400 17px/1 var(--font-body);
  color: var(--cc-blau-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.faq-suche input:focus {
  outline: none;
  border-color: var(--cc-blau-2);
  box-shadow: 0 0 0 3px rgba(77, 97, 244, .18);
}
.faq-suche__treffer {
  margin-top: 12px;
  min-height: 1.4em;
  font: 400 15px/1.4 var(--font-body);
  color: var(--cc-n-600);
}
.faq-suche__leer { max-width: 620px; margin-top: 8px; }
.faq-suche__leer[hidden] { display: none; }

/* Eine Gruppe ohne Treffer verschwindet mitsamt Ueberschrift. */
[data-faq-block][hidden] { display: none; }

/* --- Themenchips auf schmalen Breiten --------------------------------------
   Kommentar RIOwISvL-mrE. Neun Chips unterschiedlicher Laenge brachen auf dem
   Handy in neun einzelne Zeilen um - ein 400 Pixel hoher, ausgefranster Block.
   Jetzt eine einzige Zeile zum Wischen, bis an den Bildschirmrand gezogen,
   mit weichem Auslauf rechts als Hinweis, dass es weitergeht. */

.themen__reihe { display: contents; }

@media (max-width: 767px) {
  .themen { display: block; }
  .themen__marke { display: block; margin: 0 0 12px; }
  .themen__reihe {
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--gut) * -1);
    padding: 0 var(--gut) 4px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Der Auslauf rechts ist nur Optik, er schneidet nichts ab. */
    -webkit-mask: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .themen__reihe::-webkit-scrollbar { display: none; }
  .themen__reihe .thema { flex: none; white-space: nowrap; }
}

/* --- Anfrageformular (Z4) ---------------------------------------------------
   Die Seite nimmt selbst nichts entgegen - sie ist statisch. Das Formular
   sammelt die Angaben und oeffnet damit eine fertig ausgefuellte E-Mail.
   Solange es keinen Empfaenger gibt, ist das der ehrlichste Weg: Es geht
   nichts verloren, und es wird nichts versprochen, was niemand annimmt. */

.formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formular__paar[hidden] { display: none; }
@media (max-width: 599px) { .formular__paar { grid-template-columns: 1fr; } }

.feld__freiwillig {
  font: 400 13px/1 var(--font-body);
  color: var(--cc-n-600);
  margin-left: 6px;
}
.feld input[readonly] { background-color: var(--cc-weiss-2); color: var(--cc-n-600); }

.haekchen {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 15px/1.5 var(--font-body);
  color: var(--cc-n-800);
  cursor: pointer;
}
.haekchen input {
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--cc-blau-2);
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}
.haekchen a { color: var(--cc-blau-2-hover); }

.anfrage__erfolg[hidden] { display: none; }
.anfrage__erfolg { max-width: 680px; }

/* Wegeliste in einer Karte: mehrere Textlinks untereinander. */
.saule__wege { display: grid; gap: 8px; margin-top: 4px; }
.saule__wege .pfeil { justify-self: start; font-size: 15px; }

/* --- Filterleiste (W1, S20) ------------------------------------------------
   Filter sind Formularfelder, keine Chips - Chips bleiben dem Zustand
   vorbehalten (Regel des Brand-Looks). */

.filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 20px;
  align-items: end;
  padding: 26px 28px;
  background: #fff;
  border-radius: 16px;
}
.filter .feld { gap: 6px; }
.filter__fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 4px;
}
.filter__anzahl { font: 600 15px/1.3 var(--font-body); color: var(--cc-blau-1); }
.filter button.pfeil { background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
@media (max-width: 1023px) { .filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .filter { grid-template-columns: 1fr; padding: 22px; } }

/* Leerer Zustand einer gefilterten Liste */
.leerzustand {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  margin-top: 24px;
  padding: 56px 28px;
  background: #fff;
  border-radius: 16px;
}
.leerzustand[hidden] { display: none; }
.leerzustand b { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.leerzustand span { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-600); max-width: 520px; }

/* Testsendung als dritter Zustand neben buchbar und ausgebucht */
.status--testsendung { color: var(--cc-violett); }

/* --- Klassenkacheln (S03) ---------------------------------------------------
   Zehn Kacheln, Status je Klasse aus dem Sendeplan. Buchbare Klassen sind
   anklickbar und heben sich beim Ueberfahren, vorbereitete bleiben ruhig -
   dieselbe Regel wie bei allen Karten (Regel 25). */

.klassen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.klasse {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px 22px 26px;
  background: #fff;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
}
.klasse h3 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.klasse .thema { justify-self: start; }
.klasse__zahl { font: 400 15px/1.45 var(--font-body); color: var(--cc-n-600); }
.klasse .pfeil { justify-self: start; font-size: 15px; }
.klasse--buchbar { transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich); }
.klasse--buchbar:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(3, 26, 128, .14); }
@media (max-width: 1023px) { .klassen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .klassen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* --- Technik-Check (S04) ----------------------------------------------------
   Fuenf Fragen zum Abhaken. Laeuft ausschliesslich im Browser, es wird nichts
   uebertragen und nichts gespeichert - das steht auch so unter der Liste. */

.check {
  display: grid;
  padding: 26px 28px;
  background: #fff;
  border-radius: 16px;
  gap: 0;
}
.check .haekchen { font-size: 17px; }
.check__stand {
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--cc-n-200);
  font: 600 15px/1.4 var(--font-body);
  color: var(--cc-blau-1);
}
.check__stand[data-fertig="ja"] { color: var(--cc-success); }

/* --- Nachzug zu den neuen Seiten -------------------------------------------
   Alles Folgende hat der Pruefzlauf gefunden, nicht das Auge. */

/* Ein Eingabefeld auf einer weissen Karte war weiss auf weiss. Felder sind
   Kaesten und folgen derselben Regel wie alle anderen (Regel 15): Auf heller
   Flaeche reinweiss - steht die Karte selbst auf Weiss, weicht das Feld auf
   die Papierfarbe aus. */
.filter .feld input, .filter .feld select,
.check input[type="text"] { background-color: var(--cc-weiss-2); }
.filter .feld select:focus { background-color: #fff; }

/* Das schreibgeschuetzte Betrefffeld lag auf der Papier-Sektion in derselben
   Farbe. Auf Papier weicht es nach Weiss aus. */
.sektion--papier .feld input[readonly] { background-color: #fff; color: var(--cc-n-600); }

/* Ein Ausstehend-Kasten in einer weissen Karte braucht die Papierfarbe,
   sonst verschwindet er darin. */
.saule .ausstehend, .bildkarte .ausstehend, .karte .ausstehend,
.gruende__karte .ausstehend { background: var(--cc-weiss-2); }

/* Verweise im Fliesstext auf dunkler Flaeche: Signalblau ist auf Marine nicht
   lesbar, dort traegt Gruen den Weg. Nur Links in Absaetzen und Listen - die
   erste Fassung traf jeden Link, auch ganze Kacheln. Eine helle Kachel auf
   Marine erbte dadurch Gruen als Schriftfarbe, Kontrast 1.14. */
:is(.sektion--marine, .seitenkopf--dunkel) :is(p, li, dd) a:not(.knopf):not(.pfeil) { color: var(--cc-gruen); }
:is(.sektion--marine, .seitenkopf--dunkel) :is(p, li, dd) a:not(.knopf):not(.pfeil):hover { color: var(--cc-weiss); }

/* Die Ansprech-Karte ist selbst marineblau. Signalblau darauf ist zu schwach,
   Marine waere unsichtbar - dort traegt Gruen die Marke, wie im ganzen
   dunklen Satz. */
.ansprech .marke, .ansprech .marke--blau { color: var(--cc-gruen); }

/* display: grid am Feld setzt das hidden-Attribut ausser Kraft. Ohne diese
   Zeile stand das Betrefffeld leer da, obwohl es versteckt sein sollte. */
.feld[hidden], .haekchen[hidden] { display: none; }

/* --- Anfrageseite: Bild links, Formular rechts ------------------------------
   Das Bild bleibt beim Scrollen stehen, das Formular laeuft daran vorbei -
   sonst stuende links auf halber Hoehe eine leere Flaeche, weil das Formular
   deutlich hoeher ist als jedes Bild. Dieselbe Technik wie beim Stepper
   (Regel 28), nur haengt hier das Bild statt der Ueberschrift. */

.zweispalter--formular { grid-template-columns: 5fr 7fr; gap: 56px; align-items: stretch; }
/* Das Bild fuellt seine Spalte und ist damit immer genau so hoch wie das
   Formular daneben. Ein festes Seitenverhaeltnis passte hier nicht: Bei
   3:4 war das Bild 636 Pixel hoch, das Formular 767 - zu nah beieinander,
   als dass Kleben etwas gebracht haette, und zu verschieden fuer eine
   saubere Kante. */
.anfrage__bild { border-radius: 16px; min-height: 420px; }
.anfrage__spalte .formular { max-width: none; }

@media (max-width: 1023px) {
  .zweispalter--formular { grid-template-columns: 1fr; gap: 32px; }
  /* Einspaltig steht das Bild ueber dem Formular. Hochformatig schoebe es
     das Formular aus dem Bild, deshalb hier flach. */
  .anfrage__bild { aspect-ratio: 16 / 9; min-height: 0; }
}

/* --- Kontaktwege mit Sinnbild ----------------------------------------------
   Drei gleichwertige Wege nebeneinander statt eines Absatzes. Die Zeichen
   sind Masken wie die Pfeilspitzen, in derselben Strichstaerke - zwei
   Formensprachen auf einer Seite waeren eine zu viel. */

.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.weg {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 28px 26px 30px;
  background: #fff;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
}
.weg__zeichen {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cc-blau-1);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.weg__zeichen::before {
  content: "";
  width: 24px; height: 24px;
  /* Weiss statt Signalblau: Signalblau auf Marine kommt nur auf 2.96,
     Weiss auf 13.04. Auf einer 24-Pixel-Zeichnung mit duennem Strich ist
     das der Unterschied zwischen lesbar und ahnbar. */
  background: var(--cc-weiss);
  -webkit-mask: var(--zeichen) center / contain no-repeat;
  mask: var(--zeichen) center / contain no-repeat;
}
.weg--telefon .weg__zeichen { --zeichen: var(--sinn-telefon); }
.weg--brief   .weg__zeichen { --zeichen: var(--sinn-brief); }
.weg--haus    .weg__zeichen { --zeichen: var(--sinn-haus); }

/* Jede Karte der Gruppe traegt ihre eigene Flaeche (Regel 19), aus derselben
   Palette wie die Rollenkacheln. */
.weg:nth-child(1) { background: var(--cc-violett-tint); }
.weg:nth-child(2) { background: var(--cc-gruen); }
.weg:nth-child(3) { background: var(--cc-blau-2-tint); }

.weg .marke { color: var(--cc-n-600); }
.weg__wert {
  font: 700 17px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cc-blau-1);
}
.weg__zusatz { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }

/* Anklickbare Wege heben sich, der Adressblock nicht - er fuehrt nirgendwo
   hin (Regel 25). */
a.weg { transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich); }
a.weg:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(3, 26, 128, .14); }
a.weg:hover .weg__wert { color: var(--cc-blau-2); }

@media (max-width: 767px) { .wege { grid-template-columns: 1fr; gap: 14px; } }

/* --- Konto-Screens (Z1 bis Z3) ---------------------------------------------
   Anmeldung, Kennwort und Einladung. Die Formulare sind vollstaendig gebaut,
   koennen aber nichts pruefen: Das Kontosystem steht noch nicht. Statt so zu
   tun, als passiere etwas, sagt die Seite es nach dem Absenden und bietet den
   Weg an, der heute funktioniert. */

.konto { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
.konto__form { max-width: none; }
.konto__seite {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 30px 30px 32px;
  background: var(--cc-blau-2-tint);
  border-radius: 16px;
}
.konto__seite h2 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.konto__seite p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.konto__seite .knopf { justify-self: start; }
.konto__wege { display: grid; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(3, 26, 128, .14); }
.konto__wege .pfeil { justify-self: start; font-size: 15px; }

.konto__meldung { margin-top: 8px; }
.konto__meldung .knopf { justify-self: start; }

@media (max-width: 1023px) { .konto { grid-template-columns: 1fr; gap: 32px; } }

/* --- Anmeldung als Popup ----------------------------------------------------
   Natives <dialog>: Fokus bleibt im Fenster, Escape schliesst, der Rest der
   Seite ist fuer Tastatur und Screenreader gesperrt - das muss nicht von Hand
   nachgebaut werden. Gestaltet wie die Aufklapp-Karte der Navigation: 20px
   Radius, weicher Schatten, dieselbe Kurve beim Oeffnen. */

.anmeldung {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: none;
  border-radius: 24px;
  background: #fff;
  color: var(--cc-n-800);
  box-shadow: 0 30px 80px rgba(3, 26, 128, .28), 0 4px 14px rgba(3, 26, 128, .08);
  overflow: auto;
  overscroll-behavior: contain;
}
.anmeldung::backdrop {
  background: rgba(3, 26, 128, .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.anmeldung[open] { animation: ccAnmeldungAuf var(--dur-auf) var(--ease-weich) both; }
.anmeldung[open]::backdrop { animation: ccAnmeldungHinten var(--dur-base) var(--ease-out) both; }
@keyframes ccAnmeldungAuf {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes ccAnmeldungHinten { from { opacity: 0; } to { opacity: 1; } }

.anmeldung__raster { display: grid; grid-template-columns: 7fr 5fr; }
.anmeldung__form { max-width: none; padding: 44px 44px 40px; gap: 16px; }
.anmeldung__form h2 { font: 800 28px/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.anmeldung__intro { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-600); margin-bottom: 6px; }

.anmeldung__seite {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 44px 36px 40px;
  background: var(--cc-blau-2-tint);
}
.anmeldung__seite:focus { outline: none; }
.anmeldung__seite h2 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.anmeldung__seite p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.anmeldung__seite .knopf { justify-self: start; }

/* Wer ueber "Registrieren" kommt, soll sofort sehen, wo es fuer ihn weitergeht. */
.anmeldung[data-ziel="registrieren"] .anmeldung__seite {
  box-shadow: inset 4px 0 0 var(--cc-blau-2);
}

.anmeldung__zu {
  /* Klebt oben rechts, auch wenn das Fenster in sich scrollt. Wer ueber
     "Registrieren" kommt, landet unten bei "Noch kein Konto?" - ein fest
     positioniertes Kreuz waere dann oben aus dem Bild gescrollt, und auf dem
     Handy gibt es keine Escape-Taste. float plus negativer Rand laesst den
     Inhalt darunter weiterlaufen, statt eine leere Zeile zu erzeugen. */
  position: sticky;
  top: 14px;
  float: right;
  margin: 14px 14px -54px 0;
  z-index: 2;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  /* Deckend, weil beim Scrollen Text darunter durchlaeuft. Der leichte
     Schatten zeigt, dass das Kreuz ueber dem Inhalt schwebt. */
  background: #fff;
  box-shadow: 0 2px 10px rgba(3, 26, 128, .14);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.anmeldung__zu::before, .anmeldung__zu::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--cc-blau-1);
}
.anmeldung__zu::before { transform: translate(-50%, -50%) rotate(45deg); }
.anmeldung__zu::after { transform: translate(-50%, -50%) rotate(-45deg); }
.anmeldung__zu:hover { box-shadow: 0 4px 14px rgba(3, 26, 128, .22); }
.anmeldung__zu:focus-visible { outline: 3px solid var(--cc-blau-2); outline-offset: 2px; }

/* Solange das Fenster offen ist, scrollt die Seite dahinter nicht mit.
   Die Sperre haengt direkt am Zustand des Dialogs, nicht an einem Attribut,
   das ein Skript beim Schliessen wieder entfernen muss. Das close-Ereignis
   kommt verzoegert und kann ausbleiben - dann waere die Seite festgefroren.
   So gibt es nichts aufzuraeumen: Ohne [open] ist die Sperre weg. */
body:has(dialog.anmeldung[open]) { overflow: hidden; }

/* Kennwort vergessen und Einladung annehmen sind weitere Ansichten im
   selben Fenster, kein zweites Popup ueber dem ersten. Ohne "Noch kein
   Konto?" daneben - wer sein Kennwort sucht oder eingeladen wurde, braucht
   das nicht -, deshalb schmaler. Beim Wechsel blendet der Inhalt kurz auf,
   damit der Sprung in der Breite nicht hart wirkt. */
.anmeldung__ansicht { display: none; }
.anmeldung:is([data-ansicht="kennwort"], [data-ansicht="einladung"]) { width: min(580px, calc(100vw - 32px)); }
.anmeldung:is([data-ansicht="kennwort"], [data-ansicht="einladung"]) .anmeldung__raster { grid-template-columns: 1fr; }
.anmeldung:is([data-ansicht="kennwort"], [data-ansicht="einladung"]) :is(#dlg-anmelden, .anmeldung__seite) { display: none; }
.anmeldung[data-ansicht="kennwort"] [data-ansicht-von="kennwort"],
.anmeldung[data-ansicht="einladung"] [data-ansicht-von="einladung"] {
  display: grid;
  animation: ccAnsichtAuf var(--dur-base) var(--ease-weich) both;
}
.anmeldung[data-ansicht="anmelden"][data-gewechselt] .anmeldung__raster {
  animation: ccAnsichtAuf var(--dur-base) var(--ease-weich) both;
}
.anmeldung .ausstehend { margin-top: 8px; }
@keyframes ccAnsichtAuf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .anmeldung__raster { grid-template-columns: 1fr; }
  .anmeldung__form { padding: 36px 24px 28px; }
  .anmeldung__seite { padding: 28px 24px 32px; }
  .anmeldung[data-ziel="registrieren"] .anmeldung__seite { box-shadow: inset 0 4px 0 var(--cc-blau-2); }
}
@media (prefers-reduced-motion: reduce) {
  .anmeldung[open], .anmeldung[open]::backdrop { animation: none; }
  .anmeldung .anmeldung__ansicht, .anmeldung .anmeldung__raster { animation: none !important; }
}


/* --- Auswahlfelder: eigener Pfeil mit Abstand zum Rand ----------------------
   Kommentare kdziJDq-5Vwk und DTTX-oJwTr0v. Der Pfeil des Browsers klebte
   am rechten Rand. Jetzt eine eigene Spitze im Stil der Pfeilspitzen, mit
   demselben Abstand nach rechts wie der Text nach links. Gilt fuer jedes
   Auswahlfeld der Seite. */
.feld select, .filter select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23031a80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.feld select:focus, .filter select:focus { border-color: var(--cc-blau-2); outline: none; box-shadow: 0 0 0 3px rgba(77,97,244,.2); }

/* --- Kleinere Haekchen ------------------------------------------------------
   Kommentar dUrNOCl40dVF: 22 Pixel wirkten neben 16-Pixel-Text klobig. */
.check .haekchen input { margin-top: 3px; }

/* --- Kennzahlen auf der Startseite als Kacheln ------------------------------
   Kommentar e_snUlYUnaKL: Die Zahlen bissen sich mit der Ueberschrift - beide
   Marine, beide fett, und die Zahl mit bis zu 60 Pixeln groesser als die
   Ueberschrift mit 44. Jetzt steht jede Zahl auf einer eigenen Kachel aus der
   Palette der Rollenkacheln, und die Zahl bleibt bei 80 Prozent der
   Ueberschrift. Die Kachel trennt raeumlich, die Groesse stellt
   die Rangfolge wieder her. */

.grund .kennzahlen { gap: 20px; }
.grund .kennzahl {
  align-content: start;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 24px;
  overflow: hidden;
  outline: none;
  background-color: #fff;
  transition: flex-grow 650ms var(--ease-weich), background-color 450ms var(--ease-out), color 450ms var(--ease-out);
}
/* Kommentar I-Ahdi7ornER: Kennzahlen als Karten, die sich beim Ueberfahren
   aufziehen (Beispiel von Pati). Eine Karte ist immer gross: Marine, riesige
   Zahl in Signalgruen. Die anderen sind schmal und weiss (ohne Raster und
   Verlauf, Pati),
   die Zahl in Knopfblau. Beim Ueberfahren oder mit der Tastatur wird die
   jeweilige Karte gross. Auf schmalen Bildschirmen stehen sie untereinander. */
.grund .kennzahlen--karten { display: flex; gap: 16px; min-height: 460px; }
.grund .kennzahl[data-aktiv] {
  flex-grow: 2.15;
  background-color: var(--cc-blau-1);
}
.grund .kennzahl:focus-visible { box-shadow: 0 0 0 3px var(--cc-blau-2); }

.kennzahl__symbol { width: 40px; height: 40px; color: var(--cc-blau-1); transition: color 450ms var(--ease-out); }
.kennzahl__symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grund .kennzahl[data-aktiv] .kennzahl__symbol { color: var(--cc-gruen); }

.grund .kennzahl__wert {
  margin-top: auto;
  font: 800 clamp(44px, 4.4vw, 64px)/.95 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--cc-blau-2);
  white-space: nowrap;
  margin-bottom: 10px;
  transition: font-size 650ms var(--ease-weich), color 450ms var(--ease-out);
}
.grund .kennzahl[data-aktiv] .kennzahl__wert { font-size: clamp(88px, 10.5vw, 172px); color: var(--cc-gruen); }
.kennzahl__einheit { font-size: .42em; letter-spacing: -0.02em; }
.grund .kennzahl p { margin: 0; max-width: 420px; font: 500 17px/1.45 var(--font-body); color: var(--cc-n-800); transition: color 450ms var(--ease-out); }
.grund .kennzahl[data-aktiv] p { color: var(--cc-weiss); font-size: 17px; }
.grund .kennzahl__quelle { font: 400 13px/1.4 var(--font-body); color: var(--cc-n-700); }
.grund .kennzahl[data-aktiv] .kennzahl__quelle { color: var(--cc-n-200); }
.grund .kennzahl__quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.grund .kennzahl__quelle a:hover { color: var(--cc-blau-2); }
.grund .kennzahl[data-aktiv] .kennzahl__quelle a:hover { color: var(--cc-gruen); }

@media (max-width: 1023px) {
  .grund .kennzahlen--karten { flex-direction: column; min-height: 0; gap: 14px; }
  .grund .kennzahl, .grund .kennzahl[data-aktiv] { flex: none; padding: 26px 24px; }
  .grund .kennzahl[data-aktiv] .kennzahl__wert { font-size: clamp(64px, 16vw, 96px); }
  .grund .kennzahl__wert { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .grund .kennzahl, .grund .kennzahl__wert { transition: none; }
}

/* --- Sendeplan (W1) ---------------------------------------------------------
   Kommentar qlXg4ezemFMJ. Gebaut wie ein Programmheft: fuenf Monate als
   Spalten auf dunkler Flaeche, eine Linie verbindet sie, jeder Termin als
   Eintrag mit grossem Tag. Der Zustand steht als farbiger Punkt, nicht als
   Text allein - so liest man den Plan im Ueberblick, bevor man die Woerter
   liest. Ein leerer Monat bleibt stehen und sagt es, statt zu verschwinden:
   auch eine Luecke im Plan ist eine Information. */

.plan__oben {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 40px;
}
.plan__legende { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.plan__legende li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 15px/1 var(--font-body);
  color: var(--cc-n-200);
}

.plan {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  position: relative;
}
/* Die Zeitlinie laeuft durch alle Monate, auf Hoehe der Monatspunkte. */
.plan::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 42px;
  height: 2px;
  background: rgba(245, 244, 240, .16);
}

.plan__monat { position: relative; display: grid; gap: 14px; align-content: start; }
.plan__kopf { display: flex; align-items: baseline; gap: 8px; padding-bottom: 26px; position: relative; }
.plan__kopf::after {
  /* Punkt auf der Zeitlinie */
  content: "";
  position: absolute;
  left: 0; top: 36px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cc-blau-1);
  border: 2px solid var(--cc-gruen);
}
.plan__name { font: 700 17px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--cc-weiss); }
.plan__jahr { font: 500 13px/1 var(--font-body); color: var(--cc-n-300); }

.plan__liste { display: grid; gap: 10px; }
.plan__eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tag text" "tag status";
  gap: 4px 14px;
  align-items: start;
  padding: 16px 16px 16px 14px;
  border-radius: 8px;
  background: var(--cc-blau-1-soft);
}
.plan__tag {
  grid-area: tag;
  font: 800 28px/1 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--plan-farbe, var(--cc-gruen));
}
.plan__text { grid-area: text; display: grid; gap: 3px; }
.plan__titel { font: 700 15px/1.3 var(--font-display); color: var(--cc-weiss); }
.plan__klasse { font: 400 13px/1.35 var(--font-body); color: var(--cc-n-200); }
.plan__status {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font: 700 13px/1 var(--font-display);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--plan-farbe, var(--cc-gruen));
}
.plan__status::before, .plan__punkt {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--plan-farbe, var(--cc-gruen));
}
.plan__punkt { width: 10px; height: 10px; }

/* Farbe je Zustand - Gruen buchbar, Violett Testsendung, Grau ausgebucht */
.plan__eintrag--buchbar { --plan-farbe: var(--cc-gruen); }
.plan__eintrag--testsendung { --plan-farbe: var(--cc-violett); }
.plan__eintrag--ausgebucht { --plan-farbe: var(--cc-n-300); }
.plan__eintrag--ausgebucht .plan__titel { color: var(--cc-n-300); }

/* Kommentar KCuERIRDpZMS: Die Karten sind bunt - aber nur, wo die Farbe etwas
   sagt. Buchbar gruen, Testsendung violett, jeweils als volle Flaeche wie die
   buchbaren Klassen auf Klassenstufen. Ausgebucht bleibt dunkel: Was man nicht
   mehr buchen kann, soll zuruecktreten. So springen die offenen Termine
   zuerst ins Auge, und die Legende bleibt richtig. */
.plan__eintrag:is(.plan__eintrag--buchbar, .plan__eintrag--testsendung) {
  color: var(--cc-blau-1);
  background: var(--plan-farbe);
}
.plan__eintrag:is(.plan__eintrag--buchbar, .plan__eintrag--testsendung) :is(.plan__tag, .plan__titel, .plan__status) { color: var(--cc-blau-1); }
.plan__eintrag:is(.plan__eintrag--buchbar, .plan__eintrag--testsendung) .plan__klasse { color: var(--cc-blau-1); }
.plan__eintrag:is(.plan__eintrag--buchbar, .plan__eintrag--testsendung) .plan__status::before { background: var(--cc-blau-1); }

.plan__leer {
  padding: 16px;
  border-radius: 8px;
  border: 1.5px dashed rgba(245, 244, 240, .2);
  font: 400 15px/1.4 var(--font-body);
  color: var(--cc-n-300);
}

/* Schmal: Die Zeitlinie steht senkrecht, die Monate untereinander. Erst war
   es eine Leiste zum Wischen - aber bei fuenf Monaten blieb unter kurzen
   Monaten ein grosses Loch, weil der Februar mit drei Eintraegen die
   Zeilenhoehe bestimmte, und ein Teil des Plans lag immer ausserhalb. */
@media (max-width: 1023px) {
  .plan { grid-template-columns: 1fr; gap: 30px; }
  .plan::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .plan__kopf { padding: 0 0 4px 30px; }
  .plan__kopf::after { top: 3px; }
  .plan__liste { padding-left: 30px; }
}

/* --- Mittig gesetzter Block -------------------------------------------------
   Fuer kurze Sektionen mit einer einzigen Aussage und einem Weg, etwa
   "Ihre Schule hat schon ein Konto?" auf der Testsendung. */
.mittig { display: grid; justify-items: center; text-align: center; gap: 14px; }
.mittig h2 { font: var(--he-h2); letter-spacing: -0.025em; text-wrap: balance; max-width: 760px; }
.mittig p { font: var(--he-lead); max-width: 620px; }
.mittig .knopf { margin-top: 12px; }
.sektion--marine .mittig p { color: var(--cc-n-200); }

/* CTA-Banner mitten auf der Seite (Kommentar HfykANr9pZ1L): gross gesetzt
   wie die Bruecke am Seitenende, aber auf Marine. Nur ein Knopfpaar, kein
   Textlink (Regel 61). */
.banner { padding-block: var(--sec-y-lg); }
.banner .mittig { gap: 20px; }
.banner .mittig h2 { font: var(--he-h2-brueck); letter-spacing: -0.035em; color: var(--cc-weiss); max-width: 900px; }
.banner .mittig p { font: 400 clamp(17px, 1.43vw, 21px)/1.5 var(--font-body); max-width: 640px; }
.banner__wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }
.banner__wege .knopf { margin-top: 0; }

/* Haekchen in groesserer Schrift, wenn sie allein die rechte Spalte tragen */
.haken--gross li { font: 500 17px/1.4 var(--font-display); letter-spacing: -0.005em; color: var(--cc-blau-1); }
.haken--gross li::before { width: 26px; height: 26px; margin-top: 0; }

/* --- Technik-Check: runde Kreise, Erklaerung unter jeder Frage --------------
   Kommentar 9y2avDEXn2uz: runde Kreise. Nur hier, nicht im Anfrageformular -
   dort waere ein runder Kreis ein Auswahlknopf (einer aus mehreren), und das
   Datenschutz-Haekchen saehe aus wie eine Wahl statt einer Bestaetigung.
   Eine Checkliste zum Abhaken darf rund sein, das kennt man von Aufgabenlisten.

   Kommentar w-fukfQqSyEV: Check und Ausstattung doppelten sich. Jetzt steht
   unter jeder Frage, was der Raum dafuer braucht. */

.haekchen--rund input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 24px; height: 24px;
  margin: 0;
  border: 2px solid rgba(3, 26, 128, .32);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.haekchen--rund input::after {
  content: "";
  width: 12px; height: 12px;
  background: var(--cc-blau-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-weich);
}
.haekchen--rund input:checked { background: var(--cc-gruen); border-color: var(--cc-gruen); }
.haekchen--rund input:checked::after { transform: scale(1); }
.haekchen--rund input:focus-visible { outline: 3px solid var(--cc-blau-2); outline-offset: 2px; }

.check .haekchen--rund {
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cc-n-200);
}
.check .haekchen--rund:first-child { padding-top: 0; }
.check__punkt { display: grid; gap: 6px; }
.check__frage { font: 600 17px/1.4 var(--font-body); color: var(--cc-blau-1); }
.check__erklaerung { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.check__offen {
  justify-self: start;
  margin-top: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--cc-weiss-2);
  font: 400 13px/1.4 var(--font-body);
  color: var(--cc-n-600);
}
.check .check__stand { border-top: none; padding-top: 18px; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .haekchen--rund input, .haekchen--rund input::after { transition: none; }
}

/* --- Klassenkacheln auf Marine ---------------------------------------------
   Kommentar wfgysZbJCvq-. Buchbare Klassen stehen hell und heben sich, die
   vorbereiteten treten in der dunkleren Marine-Abstufung zurueck. So liest man
   auf einen Blick, wo es schon losgeht - ohne die Chips einzeln zu lesen. */
.sektion--marine .klasse { background: var(--cc-blau-1-soft); }
.sektion--marine .klasse h3 { color: var(--cc-weiss); }
.sektion--marine .klasse__zahl { color: var(--cc-n-300); }
.sektion--marine .klasse .thema--offen { background: rgba(245, 244, 240, .12); color: var(--cc-n-200); }
/* Die helle Kachel setzt ihre Schriftfarbe selbst. Sonst erbt sie die gruene
   Linkfarbe der dunklen Flaeche - Gruen auf Weiss, Kontrast 1.14. */
.sektion--marine .klasse--buchbar { background: #fff; color: var(--cc-blau-1); }
.sektion--marine .klasse--buchbar h3 { color: var(--cc-blau-1); }
.sektion--marine .klasse--buchbar .klasse__zahl { color: var(--cc-n-600); }
.sektion--marine .klasse--buchbar .pfeil { color: var(--cc-blau-2); }
.sektion--marine .klasse--buchbar .thema { background: var(--cc-gruen); color: var(--cc-blau-1); }
.sektion--marine .klasse--buchbar:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .3); }
.klassen__hinweis { max-width: 760px; margin-top: 28px; font: var(--he-body); color: var(--cc-n-600); }
.sektion--marine .klassen__hinweis { color: var(--cc-n-200); }

/* --- Schaubild "So ist eine Sendung aufgebaut" ------------------------------
   Kommentar TzoqSBY7o2wZ. Die Regel des Buchungsmodells als Bild: eine
   Sendung, drei Termine, jede Klasse waehlt je Termin ihr Datum. Gezeichnet
   in derselben Sprache wie der Sendeplan - Marine, Zeitlinie, gruene Punkte -,
   damit man es auf der Uebersichtsseite wiedererkennt. */

.aufbau {
  margin: 0;
  padding: 30px 30px 26px;
  border-radius: 16px;
  background: var(--cc-blau-1);
  color: var(--cc-weiss);
}
.aufbau__kopf { display: grid; gap: 6px; margin-bottom: 26px; }
.aufbau__marke {
  font: 700 13px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cc-gruen);
}
.aufbau__titel { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; }

.aufbau__raster {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  align-items: center;
}
.aufbau__termin {
  position: relative;
  padding-bottom: 22px;
  font: 600 13px/1.2 var(--font-body);
  color: var(--cc-n-200);
  text-align: center;
}
.aufbau__termin b { font-weight: 700; color: var(--cc-weiss); }
/* Zeitlinie mit Punkt je Termin */
.aufbau__termin::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: rgba(245, 244, 240, .2);
}
.aufbau__termin::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 14px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--cc-blau-1);
  border: 2px solid var(--cc-gruen);
}
.aufbau__klasse {
  padding-right: 8px;
  font: 700 15px/1.2 var(--font-display);
  white-space: nowrap;
}
.aufbau__datum {
  padding: 10px 6px;
  border-radius: 8px;
  background: var(--cc-blau-1-soft);
  font: 700 15px/1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--cc-gruen);
  text-align: center;
}
.aufbau__fuss {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 244, 240, .16);
  font: 400 15px/1.5 var(--font-body);
  color: var(--cc-n-200);
}
@media (max-width: 599px) {
  .aufbau { padding: 24px 18px 22px; }
  .aufbau__raster { gap: 10px 6px; }
  .aufbau__klasse { font-size: 13px; padding-right: 2px; }
  .aufbau__datum { font-size: 13px; padding: 9px 2px; }
  .aufbau__termin { font-size: 13px; }
}

/* Mehrere Saetze als Einleitung unter der Ueberschrift eines Zweispalters */
.zweispalter__saetze { display: grid; gap: 10px; }
.zweispalter__saetze p { font: var(--he-body); color: var(--cc-n-800); }
.sektion--marine .zweispalter__saetze p { color: var(--cc-n-200); }
.sektion--marine .haken--gross li { color: var(--cc-weiss); }


/* --- Sendungsseite W2 --------------------------------------------------------
   Kopf nach dem W2-Entwurf: Titel, Worum es geht, Chips, Buchen links, Bild
   rechts. Die Terminreihe zeigt die Termine als nummerierte Reihe - die
   Farben der Nummern folgen dem Entwurf (Blau, Violett, Marine). */
.sendungskopf .zweispalter__text { gap: 18px; }
.sendungskopf h1 { margin: 0; }
.sendungskopf .seitenkopf__intro { margin-top: 0; }
.sendungskopf__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sendungskopf__status {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill); background: #fff; border: 1.5px solid currentColor;
  color: var(--gruen-text);
}
.sendungskopf__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; }

.terminreihe { display: grid; gap: 14px; }
.terminreihe__termin {
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 16px;
  background: #fff;
  align-items: flex-start;
}
.terminreihe__nummer {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  font: 800 17px/1 var(--font-display);
  background: var(--cc-blau-2); color: #fff;
}
.terminreihe__termin:nth-child(3n+2) .terminreihe__nummer { background: var(--cc-violett); color: var(--cc-blau-1); }
.terminreihe__termin:nth-child(3n) .terminreihe__nummer { background: var(--cc-blau-1); color: var(--cc-gruen); }
.terminreihe h3 { font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--cc-blau-1); }
.terminreihe p { margin-top: 4px; font: 400 15px/1.45 var(--font-body); color: var(--cc-n-600); }
.terminreihe__daten { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.terminreihe__daten li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 400 15px/1.45 var(--font-body); color: var(--cc-n-800); }
.terminreihe__daten .status { font-size: 13px; }
.terminreihe__voll { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--cc-weiss-2); font: 500 15px/1.5 var(--font-body); color: var(--cc-blau-1); }
.terminreihe__voll .pfeil { font-size: 15px; margin-left: 6px; }

/* --- Kurze Wegkacheln (404) ------------------------------------------------
   Nur Ziel und Pfeil, kein Text - vier Wege nebeneinander, der Pfeil steht
   unten wie bei den Rollenkacheln. */



/* ===========================================================================
   BUCHUNGSSTRECKE W3 bis W6
   Nach "CC High-End Buchung": Marine-Leiste ohne Marketingnavigation,
   hellblaue Schrittanzeige, weisse Karten auf Brand-Weiss, Inhalt 960px.
   =========================================================================== */

.strecke__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 80px; padding: 0 var(--gut); background: var(--cc-blau-1);
}
.strecke__logo img { display: block; height: 56px; width: auto; }
.strecke__aktionen { display: flex; align-items: center; gap: 24px; }
.strecke__name { font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-gruen); }
.strecke__aktionen a { color: var(--cc-weiss); font: 600 15px/1.2 var(--font-body); text-decoration: none; }
.strecke__aktionen a:hover { color: var(--cc-gruen); }
.strecke__aktionen .strecke__abbrechen { color: var(--cc-n-300); font-weight: 500; }
.strecke__aktionen .strecke__abbrechen:hover { color: var(--cc-weiss); }

.schrittanzeige { background: var(--cc-blau-2-tint); }
.schrittanzeige ol { display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 var(--gut); margin: 0; list-style: none; }
.schrittanzeige__schritt { display: flex; align-items: center; gap: 12px; flex: none; }
.schrittanzeige__linie { flex: 1; height: 2px; background: rgba(3, 26, 128, .2); }
.schrittanzeige__punkt {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(3, 26, 128, .14); color: var(--cc-n-600); font: 800 15px/1 var(--font-display);
}
.schrittanzeige__name { font: 500 15px/1.2 var(--font-body); color: var(--cc-n-600); }
/* aktueller Schritt */
body[data-schritt="1"] [data-nr="1"] .schrittanzeige__punkt,
body[data-schritt="2"] [data-nr="2"] .schrittanzeige__punkt,
body[data-schritt="3"] [data-nr="3"] .schrittanzeige__punkt { background: var(--cc-blau-1); color: var(--cc-weiss); }
body[data-schritt="1"] [data-nr="1"] .schrittanzeige__name,
body[data-schritt="2"] [data-nr="2"] .schrittanzeige__name,
body[data-schritt="3"] [data-nr="3"] .schrittanzeige__name { font-weight: 600; color: var(--cc-blau-1); }
/* erledigte Schritte: Haken statt Zahl */
body[data-schritt="2"] [data-nr="1"] .schrittanzeige__punkt,
body[data-schritt="3"] :is([data-nr="1"], [data-nr="2"]) .schrittanzeige__punkt { background: var(--cc-gruen); color: var(--cc-blau-1); }
body[data-schritt="2"] [data-nr="1"] .schrittanzeige__punkt span,
body[data-schritt="3"] :is([data-nr="1"], [data-nr="2"]) .schrittanzeige__punkt span { display: none; }
body[data-schritt="2"] [data-nr="1"] .schrittanzeige__punkt::before,
body[data-schritt="3"] :is([data-nr="1"], [data-nr="2"]) .schrittanzeige__punkt::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-schritt="fertig"] .schrittanzeige,
body[data-schritt="fertig"] .strecke__abbrechen { display: none; }

.strecke__inhalt { max-width: calc(960px + var(--gut) * 2); padding: 64px var(--gut) 96px; }
.strecke__inhalt h1 { font: 800 clamp(28px, 4.46vw, 64px)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--cc-blau-1); }
.strecke__inhalt--danke h1 { margin-top: 24px; font-size: clamp(28px, 4.45vw, 64px); max-width: 1000px; text-wrap: balance; }
.strecke__intro { margin: 20px 0 44px; max-width: 820px; font: 400 clamp(17px, 1.46vw, 21px)/1.5 var(--font-body); color: var(--cc-n-800); }
.strecke__test { margin: -24px 0 32px; max-width: 960px; }
.strecke__form { display: grid; gap: 24px; max-width: 960px; }
.strecke__karte { display: grid; gap: 22px; padding: 30px; background: #fff; border-radius: 16px; }
.strecke__reihe { display: grid; gap: 20px; }
.strecke__reihe--2-1 { grid-template-columns: 2fr 1fr; }
.strecke__reihe--2-1-2 { grid-template-columns: 2fr 1fr 2fr; }
.strecke__reihe--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strecke__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }
.strecke__wege--weit { gap: 14px 28px; margin-top: 44px; }
.strecke__hilfe { max-width: 760px; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.strecke__h2 { margin: 56px 0 32px; font: 800 clamp(28px, 3.08vw, 44px)/1.08 var(--font-display); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.strecke__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 960px; }
.strecke__karten .strecke__karte { gap: 12px; align-content: start; }
.strecke__karten h3 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.strecke__karten p { font: 400 15px/1.55 var(--font-body); }

.feld__optional { font-weight: 400; color: var(--cc-n-600); }
.feld__fehler { font: 500 15px/1.4 var(--font-body); color: var(--cc-fehler); }
.feld__fehler[hidden] { display: none; }
.feld :is(input, select)[aria-invalid="true"] { border: 2px solid var(--cc-fehler); }
.feld:has([aria-invalid="true"]) label { color: var(--cc-fehler); }
.haekchen input[aria-invalid="true"] { outline: 2px solid var(--cc-fehler); outline-offset: 2px; }

/* W3: eine Karte je Klasse */
.klassenliste { display: grid; gap: 24px; }
.klassenkarte { position: relative; display: grid; gap: 22px; margin: 0; padding: 30px; border: 0; background: #fff; border-radius: 16px; min-width: 0; }
.klassenkarte__titel { float: left; padding: 0; font: 700 17px/1.2 var(--font-display); color: var(--cc-blau-1); }
.klassenkarte__weg {
  position: absolute; top: 26px; right: 30px; padding: 4px 0; border: 0; background: none;
  font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-2); cursor: pointer;
}
.klassenkarte__weg:hover { color: var(--cc-blau-1); }
.klassenkarte__reihe { display: grid; gap: 20px; clear: both; }
.klassenkarte__reihe--kopf { grid-template-columns: 2fr 1fr 1fr; }
.klassenkarte__reihe--termine { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.klassenkarte__fehler { margin-top: -8px; }

/* W4: Rechnungsempfaenger */
.strecke__wahl { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.strecke__wahl legend { padding: 0; margin-bottom: 12px; font: 600 15px/1.3 var(--font-body); color: var(--cc-blau-1); }
.strecke__wahl-optionen { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.wahl { display: flex; align-items: center; gap: 10px; font: 400 15px/1.4 var(--font-body); cursor: pointer; }
.wahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--cc-blau-2); }
.strecke__empfaenger { display: grid; gap: 20px; padding: 24px; border-radius: 8px; background: var(--cc-weiss-2); }
.strecke__empfaenger[hidden] { display: none; }
.strecke__konto { max-width: 960px; margin-top: 28px; display: grid; gap: 12px; justify-items: start; padding: 28px 30px; background: var(--cc-blau-2-tint); border-radius: 16px; }
.strecke__konto b { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.strecke__konto span { font: 400 17px/1.55 var(--font-body); }

/* W5, W6: Zusammenfassung */
.strecke__stapel { display: grid; gap: 24px; max-width: 960px; }
.uebersicht { max-width: 960px; background: #fff; border-radius: 16px; overflow: hidden; }
.uebersicht__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 28px; background: var(--cc-blau-2-tint); }
.uebersicht__kopf h2 { font: 700 17px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.uebersicht__aendern { font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-2); }
.uebersicht__liste { display: grid; grid-template-columns: 240px minmax(0, 1fr); margin: 0; }
.uebersicht__liste--tabelle { grid-template-columns: 200px minmax(0, 1fr); }
.uebersicht__liste :is(dt, dd) { margin: 0; padding: 18px 28px; border-bottom: 1px solid rgba(3, 26, 128, .1); font: 400 15px/1.5 var(--font-body); }
.uebersicht__liste dt { font-weight: 600; color: var(--cc-blau-1); }
.uebersicht__liste > :nth-last-child(-n+2) { border-bottom: 0; }
.uebersicht__liste .uebersicht__spaltenkopf { padding-block: 16px; font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-n-600); }
.kapazitaet { display: grid; gap: 6px; justify-items: start; margin-top: 14px; padding: 16px 18px; border-radius: 8px; background: var(--cc-error-bg); }
.kapazitaet b { color: var(--cc-fehler); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

.gebucht {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--cc-gruen); color: var(--cc-blau-1); font: 700 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
}
.gebucht__haken { width: 20px; height: 20px; border-radius: 50%; background: var(--cc-blau-1); position: relative; }
.gebucht__haken::after {
  content: ""; position: absolute; inset: 5px; background: var(--cc-gruen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1023px) {
  .schrittanzeige ol { gap: 10px; height: auto; min-height: 64px; padding-block: 12px; }
  .schrittanzeige__schritt { flex: 0 1 auto; min-width: 0; gap: 10px; }
  .schrittanzeige__punkt { flex: none; }
  .schrittanzeige__linie { min-width: 12px; }
  .schrittanzeige__name { display: none; }
  body[data-schritt="1"] [data-nr="1"] .schrittanzeige__name,
  body[data-schritt="2"] [data-nr="2"] .schrittanzeige__name,
  body[data-schritt="3"] [data-nr="3"] .schrittanzeige__name { display: inline; font-size: 15px; line-height: 1.25; }
  .strecke__reihe--2-1, .strecke__reihe--2-1-2, .strecke__reihe--3, .klassenkarte__reihe--kopf { grid-template-columns: 1fr; }
  .strecke__karten { grid-template-columns: 1fr; }
  .uebersicht__liste, .uebersicht__liste--tabelle { grid-template-columns: 1fr; }
  .uebersicht__liste dt { padding-bottom: 0; border-bottom: 0; }
  .uebersicht__liste dd { padding-top: 6px; }
  .uebersicht__liste > :nth-last-child(2) { border-bottom: 0; }
  .strecke__inhalt { padding-top: 44px; padding-bottom: 72px; }
  .strecke__name { display: none; }
}
@media (max-width: 559px) {
  .strecke__karte, .klassenkarte { padding: 22px 20px; }
  .strecke__bar { height: 68px; }
  .strecke__logo img { height: 46px; }
  .strecke__aktionen { gap: 16px; }
}

/* Nur fuer Screenreader, z. B. Spaltenkoepfe ohne sichtbaren Text */
.sprunglink-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===========================================================================
   KONTO W7 bis W10
   Nach "CC High-End Konto": feste Seitenleiste in Marine (260px), hellblaue
   Kopfzeile, Inhalt 900px auf Brand-Weiss. Navigation je Rolle ueber
   body[data-rolle].
   =========================================================================== */
.kontoraum { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.kontoraum__seite {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 30px; padding: 28px 20px;
  background: var(--cc-blau-1); color: var(--cc-weiss);
}
.kontoraum__logo { display: flex; padding: 0 8px; }
.kontoraum__logo img { height: 50px; width: auto; }
.kontoraum__menue { display: none; }
.kontoraum__nav > div { display: grid; gap: 4px; }
.kontoraum__nav a {
  display: flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 8px;
  color: #d6dbe4; font: 500 15px/1.2 var(--font-body); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kontoraum__nav a:hover { background: rgba(245, 244, 240, .1); color: var(--cc-weiss); }
.kontoraum__nav a[aria-current] { background: rgba(245, 244, 240, .14); color: var(--cc-weiss); font-weight: 600; }
.kontoraum__rolle { margin-top: auto; display: grid; gap: 10px; padding: 16px; border-radius: 8px; background: #14348d; }
.kontoraum__rolle-marke { font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-gruen); }
.kontoraum__rolle > span:not(.kontoraum__rolle-marke) { font: 600 15px/1.3 var(--font-body); }
.kontoraum__rolle a { color: #d6dbe4; font: 500 15px/1.2 var(--font-body); text-decoration: none; }
.kontoraum__rolle a:hover { color: var(--cc-weiss); }
.kontoraum__rolle .kontoraum__rollenwechsel { color: var(--cc-gruen); }

body[data-rolle="admin"] :is(.kontoraum__nav-lehrkraft, .kontoraum__rolle-lehrkraft),
body[data-rolle="lehrkraft"] :is(.kontoraum__nav-admin, .kontoraum__rolle-admin) { display: none !important; }

.kontoraum__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 72px; padding: 0 48px; background: var(--cc-blau-2-tint);
}
.kontoraum__schule { font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-1); }
.kontoraum__kopf-rechts { display: flex; align-items: center; gap: 20px; }
.kontoraum__kopf-rechts > a { color: var(--cc-blau-2); font: 600 15px/1.2 var(--font-body); text-decoration: none; }
.kontoraum__beispiel { padding: 6px 10px; border-radius: var(--radius-pill); background: #fff; font: 700 13px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-n-600); }
.kontoraum__person { display: flex; align-items: center; gap: 10px; font: 500 15px/1.2 var(--font-body); color: var(--cc-blau-1); }
.kontoraum__kuerzel {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--cc-blau-1); color: var(--cc-gruen); font: 700 13px/1 var(--font-display);
}

.kontoraum__inhalt { max-width: calc(900px + 96px); padding: 48px; }
.kontoraum__inhalt > h1 { font: 800 clamp(28px, 3.06vw, 44px)/1.06 var(--font-display); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.kontoraum__intro { margin: 18px 0 36px; max-width: 760px; font: 400 17px/1.5 var(--font-body); color: var(--cc-n-800); }
.kontoraum__inhalt > h2, .konto__h2 { margin: 56px 0 28px; font: 800 28px/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.konto__h2-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 56px 0 28px; max-width: 900px; }
.konto__h2-zeile h2 { margin: 0; font: 800 28px/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.kontoraum__notiz { max-width: 760px; margin-top: 18px; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.kontoraum__krume { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font: 500 15px/1.3 var(--font-body); color: var(--cc-n-600); }
.kontoraum__krume a { color: var(--cc-blau-2); text-decoration: none; }
.kontoraum__krume span[aria-hidden] { color: var(--cc-n-600); }

.naechster {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px; max-width: 900px; padding: 28px;
  border-radius: 16px; background: var(--cc-blau-1); color: var(--cc-weiss);
}
.naechster > div { flex: 1; min-width: 260px; }
.naechster__marke { font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-gruen); }
.naechster__titel { margin-top: 8px; font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; }
.naechster__zeile { margin-top: 6px; font: 400 15px/1.5 var(--font-body); color: #d6dbe4; }

.aufgabe { display: grid; gap: 14px; justify-items: start; max-width: 900px; margin-top: 24px; padding: 26px 28px; border-radius: 16px; background: var(--cc-blau-2-tint); }
.aufgabe b { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.meldung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 900px; margin-bottom: 24px;
  padding: 18px 22px; border-radius: 16px; background: #fff; font: 500 15px/1.4 var(--font-body); color: var(--cc-blau-1);
}
.meldung[hidden] { display: none; }
.meldung__haken { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cc-gruen); position: relative; }
.meldung__haken::after {
  content: ""; position: absolute; inset: 6px; background: var(--cc-blau-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.meldung span:nth-child(2) { flex: 1; }
.meldung button { border: 0; background: none; font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-2); cursor: pointer; }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin-top: 24px; }
.kachel { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: #fff; }
.kachel__marke { font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-n-600); }
.kachel__zahl { font: 800 28px/1 var(--font-display); letter-spacing: -0.03em; color: var(--cc-blau-1); }
.kachel__text { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.kachel .pfeil { margin-top: 4px; font-size: 15px; }

/* Tabellen im Konto: echte <table>, hellblauer Kopf */
.tabelle { width: 100%; max-width: 900px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; }
.tabelle th {
  padding: 16px 24px; background: var(--cc-blau-2-tint); text-align: left;
  font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-n-600);
}
.tabelle td { padding: 18px 24px; border-bottom: 1px solid rgba(3, 26, 128, .1); font: 400 15px/1.4 var(--font-body); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td.tabelle__haupt { font-weight: 600; color: var(--cc-blau-1); }
.tabelle td.tabelle__haupt a { color: inherit; text-decoration: none; }
.tabelle td.tabelle__haupt a:hover { color: var(--cc-blau-2); }
.tabelle__notiz { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font-body); color: var(--cc-n-600); }
.tabelle__aktion { text-align: right; white-space: nowrap; }
.tabelle .pfeil { font-size: 15px; }
.tabelle select { padding: 8px 40px 8px 12px; border: 1.5px solid rgba(3, 26, 128, .22); border-radius: var(--radius-sm); font: 400 15px/1.3 var(--font-body); color: var(--cc-blau-1); background-color: #fff; }
.tabelle tr[hidden] { display: none; }
.textknopf { padding: 0; border: 0; background: none; font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-2); cursor: pointer; }
.textknopf:hover { color: var(--cc-blau-1); }

.zustand {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(3, 26, 128, .3); font: 600 13px/1 var(--font-body); color: var(--cc-blau-1); white-space: nowrap;
}
.zustand--laeuft { border-color: var(--gruen-text); color: var(--gruen-text); }
.zustand--laeuft::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.zustand--fertig { border-color: transparent; background: var(--cc-weiss-3); color: var(--cc-n-600); }
.zustand--verschoben { border-color: transparent; background: var(--cc-violett-tint); color: var(--cc-blau-1); }
.zustand--abgesagt { border-color: transparent; background: var(--cc-error-bg); color: var(--cc-fehler); }
.zustand--eingeladen { border-style: dashed; }

/* .leer sieht aus wie .leerzustand (Schritt 4). Im Konto bleibt die alte Form,
   das Konto laeuft spaeter ueber das andere System. */
.leer { display: grid; gap: 10px; justify-items: center; text-align: center; margin-top: 24px; padding: 56px 28px; border-radius: 16px; background: #fff; }
.leer > span { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-600); max-width: 520px; }
.kontoraum .leer { gap: 16px; justify-items: start; text-align: left; max-width: 700px; margin-top: 0; padding: 32px; background: var(--cc-weiss-2); }
.kontoraum .leer > span { font: inherit; color: inherit; max-width: none; }
.leer b { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.leer[hidden] { display: none; }

.kontokarte { display: grid; gap: 20px; max-width: 900px; padding: 30px; border-radius: 16px; background: #fff; }
.kontokarte + .kontokarte { margin-top: 24px; }
.kontokarte h2 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.kontokarte__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.kontokarte__zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.kontokarte__zeile .feld { flex: 1; min-width: 240px; }
.kontokarte__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.kontokarte .meldung { margin: 0; background: var(--cc-weiss-2); }
.kontokarte .tabelle { background: none; border-radius: 8px; }
.bestaetigen { display: grid; gap: 14px; justify-items: start; padding: 20px 22px; border-radius: 8px; background: var(--cc-violett-tint); }
.bestaetigen[hidden] { display: none; }
.bestaetigen p { font: 500 15px/1.5 var(--font-body); color: var(--cc-blau-1); }
.personen { display: flex; flex-wrap: wrap; gap: 8px; }
.person {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: var(--radius-pill);
  background: var(--cc-blau-2-tint); font: 500 15px/1.2 var(--font-body); color: var(--cc-blau-1);
}
.person button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(3, 26, 128, .12); color: var(--cc-blau-1); font: 600 13px/1 var(--font-body); cursor: pointer; }
.person button:hover { background: rgba(3, 26, 128, .22); }
.noch-niemand { font: 400 15px/1.4 var(--font-body); color: var(--cc-n-600); }
.feld__zeile { display: flex; gap: 10px; }
.feld__zeile input { flex: 1; }

/* W9 Meine Klassen */
.klassen-lk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; }
.klasse-lk { display: grid; gap: 18px; align-content: start; padding: 28px; border-radius: 16px; background: #fff; }
.klasse-lk h2 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.klasse-lk__naechster { font: 400 15px/1.5 var(--font-body); }
.klasse-lk__block { display: grid; gap: 8px; }
.klasse-lk__marke { font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-n-600); }
.klasse-lk__material { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.klasse-lk__material a { font: 600 15px/1.3 var(--font-body); color: var(--cc-blau-2); }
.klasse-lk__material span { display: block; font: 400 13px/1.4 var(--font-body); color: var(--cc-n-600); }
.klasse-lk__bisher { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 400 15px/1.4 var(--font-body); }
.klasse-lk .knopf { justify-self: start; }

/* W10 Termin starten */
.terminkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0 36px; font: 400 17px/1.5 var(--font-body); }
.start { display: grid; gap: 20px; max-width: 900px; padding: 30px; border-radius: 16px; background: #fff; }
.start h2 { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.start__liste { display: grid; gap: 12px; }
.start__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.start__hinweis { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-600); }
.start__hinweis--warnung { color: var(--cc-blau-1); font-weight: 500; padding: 14px 18px; border-radius: 8px; background: var(--cc-violett-tint); }
.start[hidden], .zugang[hidden], .terminende[hidden] { display: none; }
.zugang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; max-width: 900px; }
.zugang__code { display: grid; gap: 18px; align-content: start; padding: 30px; border-radius: 16px; background: var(--cc-blau-1); color: var(--cc-weiss); }
.zugang__code h2 { font: 700 21px/1.2 var(--font-display); color: var(--cc-weiss); }
.zugang__qr { width: 168px; height: 168px; padding: 12px; border-radius: 8px; background: #fff; }
.zugang__qr svg { display: block; width: 100%; height: 100%; }
.zugang__zeichen { font: 800 44px/1 var(--font-display); letter-spacing: .08em; color: var(--cc-gruen); }
.zugang__zeile { font: 400 15px/1.5 var(--font-body); color: #d6dbe4; }
.zugang__wege { display: flex; flex-wrap: wrap; gap: 12px; }
.zugang__raum { display: grid; gap: 12px; align-content: start; }
.zugang__raum .bildflaeche { aspect-ratio: 16 / 10; border-radius: 16px; display: flex; align-items: center; justify-content: center; font: 600 15px/1.3 var(--font-body); color: var(--cc-n-600); }
.vollbild { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 36px; background: var(--cc-blau-1); color: var(--cc-weiss); text-align: center; }
.vollbild[hidden] { display: none; }
.vollbild .zugang__qr { width: min(38vh, 320px); height: min(38vh, 320px); }
.vollbild__code { font: 800 clamp(64px, 12vw, 160px)/1 var(--font-display); letter-spacing: .08em; color: var(--cc-gruen); }
.vollbild__zeile { font: 400 21px/1.5 var(--font-body); color: #d6dbe4; }
.terminende { display: grid; gap: 14px; justify-items: start; max-width: 900px; padding: 30px; border-radius: 16px; background: #fff; }
.terminende b { font: 700 21px/1.25 var(--font-display); color: var(--cc-blau-1); }

@media (max-width: 1023px) {
  .kontoraum { grid-template-columns: 1fr; }
  .kontoraum__seite { position: sticky; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px var(--gut); }
  .kontoraum__logo img { height: 44px; }
  .kontoraum__menue {
    display: inline-flex; margin-left: auto; padding: 10px 16px; border: 1.5px solid rgba(245, 244, 240, .35); border-radius: var(--radius-pill);
    background: none; color: var(--cc-weiss); font: 600 15px/1 var(--font-body); cursor: pointer;
  }
  .kontoraum__nav { display: none; width: 100%; }
  .kontoraum__seite[data-offen="ja"] .kontoraum__nav { display: block; }
  .kontoraum__rolle { display: none; width: 100%; margin-top: 0; }
  .kontoraum__seite[data-offen="ja"] .kontoraum__rolle { display: grid; }
  .kontoraum__kopf { height: auto; padding: 14px var(--gut); flex-wrap: wrap; }
  .kontoraum__inhalt { padding: 32px var(--gut) 64px; }
  .kacheln, .klassen-lk, .zugang { grid-template-columns: 1fr; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { padding: 16px 20px; border-bottom: 1px solid rgba(3, 26, 128, .1); }
  .tabelle tr:last-child { border-bottom: 0; }
  .tabelle td { padding: 4px 0; border: 0; }
  .tabelle td[data-titel]::before { content: attr(data-titel) ": "; font-weight: 600; color: var(--cc-n-600); }
  .tabelle__aktion { text-align: left; padding-top: 10px !important; }
}
@media (max-width: 559px) {
  .kontoraum__person > span:not(.kontoraum__kuerzel) { display: none; }
  .kontoraum__beispiel { display: none; }
  .kontokarte, .start, .klasse-lk, .zugang__code, .terminende { padding: 22px 20px; }
}

/* ===========================================================================
   STUFE-2-SEITEN: Wirkung, Themenbereich, Galerie, Schulsozialarbeit,
   Streitschlichter, Partner, Presse
   =========================================================================== */
.kacheln--zahlen { max-width: none; margin-top: 0; }
.kacheln--zahlen .kachel { background: var(--cc-weiss-2); }
.kacheln--zahlen .kachel__zahl { font-size: clamp(28px, 3vw, 44px); }
.praxiszitat { margin: 0; padding-left: 20px; border-left: 3px solid var(--cc-violett); font: 700 21px/1.35 var(--font-display); color: var(--cc-blau-1); }

/* Themen-Wechsler: Chips, das aktuelle Thema gefuellt */
.themenwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.themenwahl__vorspann { margin-right: 8px; font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-n-600); }
.themenchip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  background: #fff; color: var(--cc-blau-1); font: 500 13px/1 var(--font-body); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.themenchip[href]:hover { background: var(--cc-blau-2-tint); }
.themenchip[aria-current] { background: var(--cc-blau-1); color: var(--cc-gruen); font-weight: 600; }
.themenchip--offen { background: var(--cc-weiss-3); color: var(--cc-n-600); }

.videoflaeche { position: relative; display: flex; align-items: center; justify-content: center; }

/* Aufgaben: Karte, die ihre Tipps aufklappt */
.aufgaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; align-items: start; }
.aufgabe-karte { border-radius: 16px; background: #fff; overflow: hidden; }
.aufgabe-karte summary { display: grid; gap: 8px; padding: 24px; cursor: pointer; list-style: none; }
.aufgabe-karte summary::-webkit-details-marker { display: none; }
.aufgabe-karte summary b { font: 700 21px/1.25 var(--font-display); color: var(--cc-blau-1); }
.aufgabe-karte__meta { font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-n-600); }
.aufgabe-karte__satz { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.aufgabe-karte__auf { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-2); }
.aufgabe-karte[open] .aufgabe-karte__auf .spitze { transform: rotate(180deg); }
.aufgabe-karte__tipps { display: grid; gap: 16px; justify-items: start; padding: 0 24px 24px; }

/* Galerie: Kacheln im Hochformat wie die Beitraege auf Courage */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.galeriekachel { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.galeriekachel[hidden] { display: none; }
.galeriekachel__bild { display: block; aspect-ratio: 4 / 5; transition: transform var(--dur-base) var(--ease-weich); }
.galeriekachel:hover .galeriekachel__bild { transform: translateY(-3px); }
.galeriekachel__text { display: grid; gap: 4px; }
.galeriekachel__text b { font: 700 17px/1.3 var(--font-display); color: var(--cc-blau-1); }
.galeriekachel__text span { font: 400 15px/1.4 var(--font-body); color: var(--cc-n-600); }
.galerie__mehr { display: flex; justify-content: center; margin-top: 36px; }
.mitmachleiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  margin-top: 48px; padding: 28px 32px; border-radius: 16px; background: var(--cc-blau-1); color: var(--cc-weiss);
}
.mitmachleiste div { display: grid; gap: 4px; }
.mitmachleiste b { font: 700 21px/1.25 var(--font-display); }
.mitmachleiste span { color: #d6dbe4; }

/* Bruecke, Variante Inhalt: Text links, Sendungskarten rechts */
.bruecke--inhalt { text-align: left; }
.bruecke__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.bruecke--inhalt p { margin-left: 0; }
.bruecke--inhalt .bruecke__wege { justify-content: flex-start; }
.minikarten { display: grid; gap: 14px; }
.minikarte { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 16px; background: #fff; text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich); }
.minikarte:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(3, 26, 128, .12); }
.minikarte .datumsblock { position: static; flex: none; }
.minikarte__text { display: grid; gap: 3px; }
.minikarte__text b { font: 700 17px/1.25 var(--font-display); color: var(--cc-blau-1); }
.minikarte__text span { font: 400 15px/1.4 var(--font-body); color: var(--cc-n-600); }

/* Einzelansicht (S11b) als Lightbox, gebaut wie das Anmelde-Popup */
.lightbox { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 24px; background: #fff; overflow: auto; box-shadow: 0 30px 80px rgba(3, 26, 128, .28); }
.lightbox::backdrop { background: rgba(3, 26, 128, .6); }
.lightbox[open] { animation: ccAnmeldungAuf var(--dur-auf) var(--ease-weich) both; }
.lightbox__raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.lightbox__bild { aspect-ratio: 4 / 5; border-radius: 0; }
.lightbox__seite { display: grid; gap: 24px; align-content: start; padding: 48px 36px 36px; }
.lightbox__seite b { font: 800 28px/1.15 var(--font-display); color: var(--cc-blau-1); }
.lightbox__herkunft { margin-top: 8px; font: 400 15px/1.4 var(--font-body); color: var(--cc-n-600); }
.lightbox__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lightbox__wege .pfeil { border: 0; background: none; padding: 0; cursor: pointer; font: 600 15px/1.2 var(--font-body); color: var(--cc-blau-2); }
.lightbox__kopiert { font: 500 15px/1.2 var(--font-body); color: var(--gruen-text); }
.lightbox__blaettern { display: inline-flex; gap: 8px; margin-left: auto; }
.lightbox__blaettern button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cc-blau-2-tint); color: var(--cc-blau-1); font: 600 21px/1 var(--font-body); cursor: pointer; }
.lightbox__blaettern button:hover { background: var(--blau-2-tint-hover); }
.lightbox__melden { display: grid; gap: 16px; padding: 20px; border-radius: 16px; background: var(--cc-weiss-2); }
.lightbox__melden[hidden], .lightbox__danke[hidden] { display: none; }
.lightbox__danke { font: 500 15px/1.5 var(--font-body); color: var(--cc-blau-1); }
body:has(dialog.lightbox[open]) { overflow: hidden; }

.leitfragen { display: grid; gap: 6px; margin: 4px 0 0; padding-left: 18px; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }

/* Partner und Presse */
.vertrauen--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.vertrauen--gross .vertrauen__logos span.platzhalter { background: #fff; }
.partnerkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.partnerkarte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: 16px; background: #fff; }
.partnerkarte b { font: 700 21px/1.25 var(--font-display); color: var(--cc-blau-1); }
.partnerkarte p { flex: 1; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.partnerkarte__logo { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 18px; border-radius: 8px; background: #fff; font: 600 13px/1 var(--font-body); color: var(--cc-n-600); }
.experten { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 36px; }
.experte { display: flex; align-items: center; gap: 16px; }
.experte__bild { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.experte b { display: block; font: 700 17px/1.3 var(--font-display); color: var(--cc-blau-1); }
.experte span span { font: 400 15px/1.4 var(--font-body); color: var(--cc-n-600); }
.mitteilungen { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mitteilung { display: grid; gap: 6px; justify-items: start; padding: 24px 26px; border-radius: 16px; background: #fff; }
.mitteilung__datum { font: 700 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--cc-n-600); }
.mitteilung b { font: 700 21px/1.3 var(--font-display); color: var(--cc-blau-1); }
.mitteilung > span:not(.mitteilung__datum) { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }

@media (max-width: 1023px) {
  .galerie, .partnerkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bruecke__raster, .lightbox__raster, .vertrauen--gross { grid-template-columns: 1fr; }
  .lightbox__bild { aspect-ratio: 16 / 11; }
  .lightbox__seite { padding: 28px 22px; }
}
@media (max-width: 559px) {
  .galerie, .partnerkarten { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ZUSTAENDE UND FEHLERSEITEN (Entwurf "F Fehler- und Ladezustaende")
   =========================================================================== */
body.fehlerseite { background: var(--cc-weiss); }
.fehler { display: grid; gap: 26px; justify-items: center; max-width: 720px; margin: 0 auto; padding: 120px var(--gut) 88px; text-align: center; }
.fehler h1 { font: 800 clamp(44px, 4.45vw, 64px)/1.02 var(--font-display); letter-spacing: -0.035em; color: var(--cc-blau-1); text-wrap: balance; }
.fehler p { font: 400 clamp(17px, 1.46vw, 21px)/1.5 var(--font-body); }
.fehler__wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
.fehler__knopf { min-width: 280px; justify-content: center; }

.zustandskarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.zustandskarte { display: grid; gap: 12px; justify-items: start; align-content: start; padding: 28px; border-radius: 16px; background: var(--cc-blau-2-tint); }
.zustandskarte b { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.zustandskarte span { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.zustandskarte .knopf { margin-top: 2px; }
.zustandskarte--fehler { background: var(--cc-error-bg); }
.zustandskarte--fehler b { color: var(--cc-fehler); }
.zustandskarte--vorbereitung { background: var(--cc-violett-tint); }

/* Stufe-2-Seiten in der MVP-Ansicht: statt des Inhalts der Zustand
   "Diese Seite entsteht gerade". In der vollen Ansicht unsichtbar. */
.vorbereitung { display: none; }
body[data-stufe="2"][data-umfang="mvp"] main > :not(.vorbereitung) { display: none !important; }
body[data-stufe="2"][data-umfang="mvp"] .vorbereitung { display: block; padding: 96px var(--gut); }
.vorbereitung__box { display: grid; gap: 14px; justify-items: start; max-width: 720px; margin: 0 auto; padding: 36px; border-radius: 16px; background: var(--cc-violett-tint); }
.vorbereitung__box b { font: 700 clamp(21px, 2vw, 28px)/1.2 var(--font-display); color: var(--cc-blau-1); }
.vorbereitung__box span { font: 400 17px/1.55 var(--font-body); }

@media (max-width: 1023px) { .zustandskarten { grid-template-columns: 1fr; } }

/* ===========================================================================
   E-MAILS M01 bis M10 (Uebersicht nach Wireframe "M")
   =========================================================================== */
body.mailseite { background: var(--cc-weiss); }
.mails { padding: 72px var(--gut) 96px; }
.mails h1 { font: 800 clamp(28px, 4.46vw, 64px)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--cc-blau-1); }
.mails__intro { margin: 20px 0 48px; max-width: 840px; font: 400 clamp(17px, 1.46vw, 21px)/1.5 var(--font-body); }
.mails__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.mailvorschau { display: grid; gap: 14px; }
.mailvorschau__kopf { display: flex; gap: 12px; align-items: baseline; font: 400 13px/1.4 var(--font-body); color: var(--cc-n-600); }
.mailvorschau__id { font: 700 13px/1 var(--font-display); letter-spacing: .06em; color: var(--cc-blau-1); }
.mail { display: block; background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich); }
.mail:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(3, 26, 128, .12); }
.mail__kopf { padding: 18px 22px; background: var(--cc-blau-2-tint); }
.mail__von { font: 400 13px/1.4 var(--font-body); color: var(--cc-n-600); }
.mail__betreff { margin-top: 6px; font: 700 17px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--cc-blau-1); }
.mail__rumpf { display: grid; gap: 14px; padding: 22px; font: 400 15px/1.6 var(--font-body); }
.mail__rumpf ul { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.mail__logo { height: 44px; width: auto; justify-self: start; }
.mail__knopf { display: inline-flex; justify-self: start; align-items: center; height: 44px; padding: 0 20px; border-radius: 8px; background: var(--cc-blau-2); color: #fff; font: 600 15px/1 var(--font-body); }
.mail__links, .mail__link { color: var(--cc-blau-2); font-weight: 500; }
.mail__hinweis { font: 400 13px/1.5 var(--font-body); color: var(--cc-n-600); }
.mail__fuss { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(3, 26, 128, .12); font: 400 13px/1.7 var(--font-body); color: var(--cc-n-600); }
@media (max-width: 1023px) { .mails__raster { grid-template-columns: 1fr; } }

/* --- Drehknopf (Kommentar kNK0pVSVSbyK) -------------------------------------
   Vier Vorschlaege, siehe /entwuerfe/drehknopf/. Er dreht sich langsam und
   gleichmaessig; beim Ueberfahren waechst er leicht. Bei reduzierter
   Bewegung steht er still. */
.hero .inhalt { position: relative; }
/* Etwas hoeher und weiter rechts (Pati): ragt ein Stueck in den Seitenrand,
   so steht er freier neben der Ueberschrift. */
.hero__drehknopf { position: absolute; right: -16px; top: -34px; }
@media (min-width: 1280px) { .hero__drehknopf { right: -48px; top: -44px; } }
.hero__drehknopf[hidden] { display: none; }
.drehknopf { display: block; width: clamp(150px, 15vw, 232px); aspect-ratio: 1; border-radius: 50%; transition: transform var(--dur-base) var(--ease-weich), box-shadow var(--dur-base) var(--ease-weich); }
.drehknopf:hover { transform: scale(1.06); box-shadow: 0 18px 40px -16px rgba(3, 26, 128, .45); }
.drehknopf--frei:hover { box-shadow: none; }
.drehknopf:focus-visible { outline: 3px solid var(--cc-blau-2); outline-offset: 4px; }
.drehknopf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dk-dreh { transform-origin: 100px 100px; animation: ccDrehen 22s linear infinite; }
.dk-schnell { animation-duration: 6s; }
.dk-langsam { animation-duration: 9s; }
.dk-gegen { animation: ccDrehen 9s linear infinite reverse; }
@keyframes ccDrehen { to { transform: rotate(360deg); } }
.dk-marine { fill: var(--cc-blau-1); }
.dk-blau { fill: var(--cc-blau-2); }
.dk-violett { fill: var(--cc-violett); }
.dk-gruen-flaeche { fill: var(--cc-gruen); }
.dk-weiss { fill: #fff; }
.dk-schrift { font: 700 14px/1 var(--font-display); letter-spacing: .04em; }
.dk-klein { font-size: 12px; }
.dk-gruen { fill: var(--cc-gruen); }
.dk-hell { fill: rgba(245, 244, 240, .75); }
.dk-marine-schrift { fill: var(--cc-blau-1); }
.dk-weiss-schrift { fill: #fff; }
.dk-gruen-schrift { fill: var(--cc-gruen); }
.dk-name { font: 800 15px/1 var(--font-display); letter-spacing: -0.01em; }
.dk-klein2 { font-size: 12.5px; fill: var(--cc-blau-1); }
.dk-live { font: 800 30px/1 var(--font-display); letter-spacing: .02em; fill: var(--cc-gruen); }
.dk-bogen { fill: none; stroke: var(--cc-gruen); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dk-bahn { fill: none; stroke: var(--cc-blau-1); stroke-width: 2; stroke-dasharray: 4 7; }
.dk-pfeil { fill: none; stroke: var(--cc-gruen); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Varianten E bis H */
.dk-hellblau { fill: var(--cc-blau-2-tint); }
.dk-rueckwaerts { animation-direction: reverse; }
.dk-zahnrad { animation: ccDrehen 14s linear infinite; }
.dk-strahl { animation-duration: 4s; }
.dk-klasse { fill: rgba(245, 244, 240, .25); animation: ccAufleuchten 4s linear infinite; }
@keyframes ccAufleuchten { 0%, 100% { fill: rgba(245, 244, 240, .25); } 4% { fill: var(--cc-gruen); } 30% { fill: rgba(214, 255, 122, .45); } 45% { fill: rgba(245, 244, 240, .25); } }
.dk-pfeil--weiss { stroke: #fff; stroke-width: 4; }
.dk-bahn--voll { stroke-dasharray: none; stroke-width: 2.5; stroke: rgba(3, 26, 128, .35); }
.dk-spur { fill: none; stroke: var(--cc-blau-2); stroke-width: 4; stroke-linecap: round; opacity: .45; }
.dk-mini { font-size: 12px; }
.dk-live--blau { fill: var(--cc-blau-2); font-size: 26px; }
.dk-bahn--zart { stroke: rgba(3, 26, 128, .28); stroke-dasharray: 3 6; }
.dk-bahn-dreh { animation-duration: 40s; }
/* Wabern (Vorschlaege): 1 der ganze Knopf schwebt, 2 die Bahn verformt sich
   (im Skript), 3 Studio und Klasse treiben leicht und die Bahn atmet. */
.drehknopf--wabern-1 svg { transform-origin: 50% 50%; animation: ccSchweben 6s ease-in-out infinite; }
@keyframes ccSchweben { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-2.5deg); } }
.dk-knoten, .dk-atmen { transform-box: view-box; transform-origin: 100px 100px; }
.drehknopf--wabern-3 .dk-atmen { animation: ccAtmen 5s ease-in-out infinite; }
.drehknopf--wabern-3 .dk-knoten--studio { animation: ccTreibenA 5.2s ease-in-out infinite; }
.drehknopf--wabern-3 .dk-knoten--klasse { animation: ccTreibenB 6.6s ease-in-out infinite; }
@keyframes ccAtmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ccTreibenA { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(3px, -4px); } 66% { transform: translate(-3px, 2px); } }
@keyframes ccTreibenB { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-4px, 3px); } 75% { transform: translate(2px, -3px); } }
@media (prefers-reduced-motion: reduce) { .drehknopf--wabern-1 svg, .dk-atmen, .dk-knoten { animation: none !important; } }
.dk-acht { fill: none; stroke: var(--cc-blau-1); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .dk-dreh, .dk-gegen, .dk-zahnrad, .dk-klasse { animation: none; } }
@media (max-width: 1023px) {
  .hero__drehknopf { position: static; margin: 22px 0 0; }
  .drehknopf { width: 150px; }
}
/* Handy (Pati 25.09.): Drehknopf ganz oben rechts, neben der Kopfzeile "Live
   aus dem Studio ...". Die Kopfzeile bricht links daneben um und ist so hoch
   wie der Knopf, damit die Ueberschrift erst darunter beginnt. */
@media (max-width: 767px) {
  .hero .inhalt:has(> .hero__drehknopf:not([hidden])) > .hero__auge {
    display: flex; align-items: center;
    min-height: 104px; max-width: calc(100% - 120px);
    margin-bottom: 16px;
  }
  .hero__drehknopf { position: absolute; top: 0; right: -6px; margin: 0; }
  .hero__drehknopf .drehknopf { width: 104px; }
}

/* Vergleichsseite */
.entwurf { padding: 64px var(--gut) 96px; }
.entwurf h1 { font: 800 clamp(28px, 4.46vw, 64px)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--cc-blau-1); }
.entwurf__intro { margin: 18px 0 44px; max-width: 760px; font: 400 17px/1.5 var(--font-body); }
.entwurf__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.entwurf__karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 32px; border-radius: 16px; background: #fff; }
.entwurf__karte .drehknopf { width: 180px; }
.entwurf__karte h2 {
  font: 800 21px/1.15 var(--font-display);
  color: var(--cc-blau-1);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.entwurf__karte p { margin: 10px 0 14px; font: 400 15px/1.55 var(--font-body); }
.entwurf__runde { margin: 56px 0 8px; font: 800 28px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--cc-blau-1); }
.entwurf__runde + .entwurf__raster { margin-top: 28px; }
@media (max-width: 1199px) { .entwurf__raster { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .entwurf__karte { grid-template-columns: 1fr; } }



/* ===========================================================================
   AUS DEM DESIGN-SCAN (25.09.2026), Vorschlaege 1, 3 bis 7
   =========================================================================== */

/* 1 Markenflaechen: Solange keine Fotos da sind, tragen Flaechen aus den
   Courage-Formen die Bildstellen statt Grau. werkzeug/geruest.py verteilt
   die sechs Varianten auf jede leere .bildflaeche. Sobald ein <img> drin
   steckt, verschwinden die Formen. */
.markenbild { position: relative; overflow: hidden; }
.markenbild::before, .markenbild::after { content: ""; position: absolute; pointer-events: none; }
.markenbild:has(img)::before, .markenbild:has(img)::after { display: none; }
.markenbild--1 { background-color: var(--cc-violett); }
.markenbild--1::before { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-blau-1); left: 12%; top: 18%; }
.markenbild--1::after { width: 34%; height: 18%; border: 5px solid var(--cc-blau-1); right: 10%; bottom: 16%; transform: rotate(-8deg); }
.markenbild--2 { background-color: var(--cc-gruen); }
.markenbild--2::before { width: 38%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--cc-blau-1); right: 14%; top: 14%; }
.markenbild--2::after { width: 12%; height: 58%; border-radius: 999px; background: var(--cc-blau-2); left: 18%; bottom: -8%; transform: rotate(18deg); }
.markenbild--3 { background-color: var(--cc-blau-1); }
.markenbild--3::before { width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-gruen); left: 28%; top: 22%; }
.markenbild--3::after { width: 22%; aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--cc-violett); right: 10%; top: 10%; }
.markenbild--4 { background-color: var(--cc-blau-2-tint); }
.markenbild--4::before { width: 60%; height: 22%; border-radius: 999px; background: var(--cc-blau-2); left: 10%; top: 38%; transform: rotate(-12deg); }
.markenbild--4::after { width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-violett); right: 12%; bottom: 14%; }
.markenbild--5 { background-color: var(--cc-violett-tint); }
.markenbild--5::before { width: 40%; aspect-ratio: 1; border-radius: 16px; background: var(--cc-blau-1); left: 14%; top: 20%; transform: rotate(10deg); }
.markenbild--5::after { width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-gruen); right: 14%; bottom: 18%; }
.markenbild--6 { background-color: var(--cc-gruen); }
.markenbild--6::before { width: 70%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--cc-blau-1); left: 15%; top: 10%; }
.markenbild--6::after { width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-blau-2); right: 20%; top: 20%; }
/* Liegt eine Markenflaeche auf ihrer eigenen Sektionsfarbe, weicht sie aus -
   sonst waere sie unsichtbar. */
.sektion--hellblau .markenbild--4 { background-color: var(--cc-gruen); }
.sektion--violett .markenbild--5 { background-color: var(--cc-gruen); }
.sektion--marine .markenbild--3, .seitenkopf--dunkel .markenbild--3 { background-color: var(--cc-blau-2); }
.sektion--gruen .markenbild--2, .sektion--gruen .markenbild--6 { background-color: var(--cc-violett-tint); }
/* Beschriftungen, die auf einer Bildflaeche liegen (Datum, Art), bleiben vorn. */
.markenbild > * { position: relative; z-index: 1; }

/* 3 Finanzierung in einer Sektion (Schulleitung) */
.finanzierung { display: grid; gap: 32px; }
.finanzierung__kopf { display: grid; gap: 16px; max-width: 760px; }
.finanzierung__kopf h2 { font: var(--he-h2); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.finanzierung__wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.finanzweg {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: 16px;
  background: #fff;
}
.finanzweg h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--cc-blau-1); }
.finanzweg p { font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
.finanzweg ol { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.finanzweg ol b { color: var(--cc-blau-1); }
.finanzierung__auch { font: 400 17px/1.5 var(--font-body); color: var(--cc-n-800); }
.finanzierung__auch b { color: var(--cc-blau-1); }
.finanzierung__kosten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: 28px 32px; border-radius: 16px; background: var(--cc-blau-1); color: var(--cc-weiss);
  --knopf1-flaeche: var(--cc-gruen); --knopf1-flaeche-hover: var(--gruen-hover); --knopf1-schrift: var(--cc-blau-1);
  --knopf2-flaeche: transparent; --knopf2-flaeche-hover: rgba(245, 244, 240, .14); --knopf2-schrift: var(--cc-weiss); --knopf2-rahmen: rgba(245, 244, 240, .5);
}
.finanzierung__kosten > div:first-child { display: grid; gap: 4px; }
.finanzierung__kosten b { font: 800 28px/1.1 var(--font-display); letter-spacing: -0.02em; }
.finanzierung__kosten span { color: var(--cc-n-200); }
.finanzierung__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Stimmen innerhalb einer anderen Sektion (Schulleitung: Wie es weitergeht) */
.stimmen-eingebettet { margin-top: 56px; }
.stimmen-eingebettet h3 { font: 700 21px/1.2 var(--font-display); color: var(--cc-blau-1); margin-bottom: 20px; }

/* 4 Sicherheitsleiste (Startseite) */
.sicherleiste { margin-top: 56px; }
.sicherleiste h3 { font: 700 21px/1.2 var(--font-display); color: var(--cc-blau-1); margin-bottom: 20px; }
.sicherleiste ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sicherleiste li { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: 16px; background: #fff; font: 500 17px/1.4 var(--font-body); color: var(--cc-blau-1); }
.sicherleiste svg { width: 36px; height: 36px; fill: none; stroke: var(--cc-blau-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 5 Themen in einer wischbaren Zeile, Traeger am Ende der Stimmen */
.themen--zeile { flex-wrap: nowrap; }
.themen--zeile .themen__marke { flex: none; }
.themen--zeile .themen__reihe {
  display: flex; flex-wrap: nowrap; gap: 10px; min-width: 0; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.themen--zeile .themen__reihe::-webkit-scrollbar { display: none; }
.themen--zeile .thema { flex: none; white-space: nowrap; }
/* Laufband (startseite.js): Auslauf auf beiden Seiten, mit der Maus ziehbar */
.themen--zeile .themen__reihe[data-laufband] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
  cursor: grab;
}
.themen--zeile .themen__reihe.ist-gezogen { cursor: grabbing; user-select: none; }
.stimmen__traeger { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(3, 26, 128, .15); }

/* 6 Mitmachen: Ablagefeld und Formular mit Regeln daneben */
.mitmachen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.mitmachen__form { display: grid; gap: 20px; max-width: none; }
.mitmachen__form h2 { font: var(--he-h2); letter-spacing: -0.025em; color: var(--cc-blau-1); }
.mitmachen__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ablage {
  display: grid; justify-items: center; gap: 8px; padding: 44px 24px; border: 2px dashed rgba(77, 97, 244, .55); border-radius: 16px;
  background: var(--cc-blau-2-tint); text-align: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ablage:hover, .ablage[data-ziehen], .ablage:focus-within { background: var(--blau-2-tint-hover); border-color: var(--cc-blau-2); }
.ablage svg { width: 44px; height: 44px; fill: none; stroke: var(--cc-blau-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ablage b { font: 700 21px/1.25 var(--font-display); color: var(--cc-blau-1); }
.ablage span { font: 400 15px/1.4 var(--font-body); color: var(--cc-n-800); }
.ablage u { color: var(--cc-blau-2); text-underline-offset: 3px; }
.ablage[data-datei] b { color: var(--gruen-text); }
.mitmachen__seite { position: sticky; top: 24px; display: grid; gap: 16px; padding: 28px; border-radius: 16px; background: var(--cc-violett-tint); }
.mitmachen__seite > b { font: 700 21px/1.2 var(--font-display); color: var(--cc-blau-1); }
.regelliste { display: grid; gap: 6px; margin: 0; }
.regelliste dt { margin-top: 10px; font: 700 15px/1.3 var(--font-display); color: var(--cc-blau-1); }
.regelliste dd { margin: 0; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.mitmachen__seite .ausstehend { margin-top: 8px; background: rgba(255, 255, 255, .6); }

/* 7 Unterseiten-Kopf mit grafischem Element. werkzeug/geruest.py setzt es in
   die hellen Koepfe der Bereichsseiten; die Farben wechseln je Seite. */
.seitenkopf--grafik { position: relative; }
.seitenkopf--grafik .inhalt { position: relative; z-index: 1; }
.seitenkopf__grafik {
  position: absolute; right: var(--gut); top: 28px; width: min(28vw, 380px); aspect-ratio: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.seitenkopf__grafik span { position: relative; overflow: hidden; border-radius: 24px; }
.seitenkopf__grafik span::after { content: ""; position: absolute; }
.seitenkopf__grafik .g1 { background: var(--cc-violett); }
.seitenkopf__grafik .g1::after { width: 56%; aspect-ratio: 1; border-radius: 50%; background: var(--cc-blau-1); left: 22%; top: 22%; }
.seitenkopf__grafik .g2 { background: var(--cc-blau-1); }
.seitenkopf__grafik .g2::after { width: 20%; height: 70%; border-radius: 999px; background: var(--cc-gruen); left: 40%; top: 15%; transform: rotate(20deg); }
.seitenkopf__grafik .g3 { background: var(--cc-gruen); }
.seitenkopf__grafik .g3::after { width: 60%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--cc-blau-1); left: 20%; top: 20%; }
.seitenkopf__grafik .g4 { background: var(--cc-blau-2-tint); }
.seitenkopf__grafik .g4::after { width: 70%; height: 26%; border-radius: 999px; background: var(--cc-blau-2); left: 15%; top: 37%; transform: rotate(-14deg); }
@media (min-width: 1024px) {
  .seitenkopf--grafik { min-height: calc(min(28vw, 380px) + 28px + var(--sec-y)); }
  .seitenkopf--grafik .inhalt > * { max-width: calc(100% - min(28vw, 380px) - 56px); }
}

@media (max-width: 1023px) {
  .finanzierung__wege, .sicherleiste ul, .mitmachen, .mitmachen__reihe { grid-template-columns: 1fr; }
  .mitmachen__seite { position: static; }
  .seitenkopf__grafik { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .sicherleiste ul { grid-template-columns: 1fr 1fr; }
}

/* --- In drei Schritten: animierte Grafiken --------------------------------
   Jeder Schritt zeigt, was er meint, im 6-Sekunden-Takt: 1 eine Sendung wird
   im Plan ausgewaehlt, 2 im Kalender der Klasse werden drei Termine belegt,
   3 der Termin wird gestartet, die Sendung laeuft live, die Antworten der
   Klasse wachsen. Der Grundzustand ist jeweils das fertige Bild - so steht
   es auch bei reduzierter Bewegung und ohne Animation richtig da. */
.schritt__grafik { display: grid; place-items: center; overflow: hidden; }
.schritt__grafik--1 { background: var(--cc-violett-tint); }
.schritt__grafik--2 { background: var(--cc-gruen); }
.schritt__grafik--3 { background: var(--cc-blau-1); }
.sg { width: 100%; height: 100%; }
.sg * { transform-box: fill-box; }
.sg-text { font: 700 13px/1 var(--font-display); }
.sg-text--weiss { fill: #fff; }
.sg-text--marine { fill: var(--cc-blau-1); }
.sg-frage { font: 800 28px/1 var(--font-display); fill: var(--cc-gruen); }

/* 1 Sendung waehlen */
.sg1-gewaehlt { animation: sg1Heben 6s var(--ease-weich) infinite; transform: translateY(-6px); }
.sg1-ring { animation: sg1Ring 6s var(--ease-weich) infinite; transform: translate(0, -6px); }
.sg1-haken { transform-origin: center; animation: sg1Haken 6s var(--ease-weich) infinite; }
.sg1-zeiger { transform: translate(200px, 120px); animation: sg1Zeiger 6s var(--ease-weich) infinite; }
@keyframes sg1Ring {
  0%, 12% { transform: translate(-108px, 0); opacity: 0; }
  18% { transform: translate(-108px, 0); opacity: 1; }
  34% { transform: translate(0, 0); }
  40%, 88% { transform: translate(0, -6px); opacity: 1; }
  96%, 100% { transform: translate(0, -6px); opacity: 0; }
}
@keyframes sg1Heben { 0%, 36% { transform: none; } 42%, 90% { transform: translateY(-6px); } 100% { transform: none; } }
@keyframes sg1Haken { 0%, 42% { transform: scale(0); } 50% { transform: scale(1.15); } 56%, 90% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
@keyframes sg1Zeiger {
  0% { transform: translate(330px, 190px); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translate(200px, 120px); }
  34% { transform: translate(200px, 120px) scale(.85); }
  38%, 80% { transform: translate(200px, 120px) scale(1); opacity: 1; }
  92%, 100% { transform: translate(330px, 190px); opacity: 0; }
}

/* 2 Termine belegen */
.sg2-termin { transform-origin: center; animation: sg2Termin 6s var(--ease-weich) infinite; }
.sg2-termin--2 { animation-name: sg2Termin2; }
.sg2-termin--3 { animation-name: sg2Termin3; }
.sg2-linie { stroke-dashoffset: 0; animation: sg2Linie 6s linear infinite; }
@keyframes sg2Termin { 0%, 10% { transform: scale(0); opacity: 0; } 18% { transform: scale(1.15); opacity: 1; } 24%, 90% { transform: scale(1); opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes sg2Termin2 { 0%, 30% { transform: scale(0); opacity: 0; } 38% { transform: scale(1.15); opacity: 1; } 44%, 90% { transform: scale(1); opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes sg2Termin3 { 0%, 50% { transform: scale(0); opacity: 0; } 58% { transform: scale(1.15); opacity: 1; } 64%, 90% { transform: scale(1); opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes sg2Linie { 0%, 62% { opacity: 0; } 70%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* 3 Live starten */
.sg3-an { animation: sg3An 6s var(--ease-weich) infinite; }
.sg3-knopf { transform-origin: center; animation: sg3Knopf 6s var(--ease-weich) infinite; opacity: 0; }
.sg3-zeiger { opacity: 0; animation: sg3Zeiger 6s var(--ease-weich) infinite; }
.sg3-balken { transform-origin: bottom; animation: sg3Balken 6s var(--ease-weich) infinite; }
.sg3-balken--2 { animation-delay: .15s; }
.sg3-balken--3 { animation-delay: .3s; }
.sg3-punkt { animation: sg3Punkt 1s ease-in-out infinite; }
.sg3-kopf { transform-origin: bottom; animation: sg3Kopf 6s var(--ease-weich) infinite; }
.sg3-kopf--2 { animation-delay: .1s; } .sg3-kopf--3 { animation-delay: .2s; } .sg3-kopf--4 { animation-delay: .3s; }
@keyframes sg3An { 0%, 32% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sg3Knopf { 0% { opacity: 1; transform: none; } 24% { transform: none; } 28% { transform: scale(.92); } 32% { opacity: 1; transform: scale(1); } 38%, 100% { opacity: 0; } }
@keyframes sg3Zeiger { 0% { opacity: 0; transform: translate(300px, 150px); } 8% { opacity: 1; } 24% { transform: translate(214px, 88px); } 28% { transform: translate(214px, 88px) scale(.85); } 32% { opacity: 1; transform: translate(214px, 88px); } 40%, 100% { opacity: 0; transform: translate(214px, 88px); } }
@keyframes sg3Balken { 0%, 46% { transform: scaleY(0); } 62%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes sg3Punkt { 50% { opacity: .3; } }
@keyframes sg3Kopf { 0%, 50% { transform: none; } 56% { transform: translateY(-6px); } 62%, 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sg * { animation: none !important; }
  .sg3-knopf, .sg3-zeiger { opacity: 0; }
  .sg1-zeiger { transform: translate(200px, 120px); }
}

/* --- Zwei Teilungslinien auf Unterseiten (Regel 122) -----------------------
   Textsektionen teilen bei 340px + Rest (Kante 524 bei 1440). Jede Sektion
   mit Bild uebernimmt den Aufbau von "Live statt Konserve" der Startseite:
   Bild gross links (7:5), Text rechts, mittig zueinander (Kante 844).
   Pati, 25.09.2026: "den duerfen wir nicht killen". */
main:has(> .seitenkopf) section.sektion .zweispalter--bild {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
main:has(> .seitenkopf) section.sektion .zweispalter--bild > :not(.zweispalter__text) { order: -1; }
/* Ausnahme auf Pati-Wunsch (Courage, 25.09.): Stand vor Regel 122 behalten -
   Stepper halb/halb, Bild rechts im Verhaeltnis 5:6. */
.zweispalter--klebend.zweispalter--haelfte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
main:has(> .seitenkopf) section.sektion .zweispalter--bild.zweispalter--bild-rechts { grid-template-columns: 5fr 6fr; gap: 56px; }
main:has(> .seitenkopf) section.sektion .zweispalter--bild-rechts > :not(.zweispalter__text) { order: 0; }
@media (max-width: 1023px) {
  main:has(> .seitenkopf) section.sektion .zweispalter--bild,
  main:has(> .seitenkopf) section.sektion .zweispalter--bild.zweispalter--bild-rechts,
  .zweispalter--klebend.zweispalter--haelfte { grid-template-columns: 1fr; gap: 28px; }
}

/* --- Kommentarrunde 25.09. nachmittags --------------------------------------- */

/* Bild rechts und so hoch wie der Text (Format "So ist eine Sendung
   aufgebaut", Eltern "Mitmachen"). Text 7, Bild 5 - die Kante bleibt bei 844. */
main:has(> .seitenkopf) section.sektion .zweispalter--bild.bild-rechts {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
}
main:has(> .seitenkopf) section.sektion .zweispalter--bild.bild-rechts > :not(.zweispalter__text) {
  order: 2; aspect-ratio: auto; height: auto; min-height: 280px;
}
.zweispalter--bild.bild-rechts > .zweispalter__text { align-content: center; }
.bild-rechts > .aufbau { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1023px) {
  main:has(> .seitenkopf) section.sektion .zweispalter--bild.bild-rechts { grid-template-columns: 1fr; }
}

/* Eltern: Bedenken und Haeufige Fragen als eine Liste */
.akkordeon-stapel { display: grid; }
.akkordeon-stapel > .akkordeon + .akkordeon { margin-top: 0; }
.akkordeon-stapel > .akkordeon:not(:last-child) details:last-of-type { border-bottom: 0; }

/* Eltern: Schulbrief - Formular links, der fertige Text rechts auf Violett */
#schulbrief {
  max-width: none;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: repeat(5, auto) 1fr;
  column-gap: 64px;
  align-items: start;
}
#schulbrief > * { grid-column: 1; }
#schulbrief > .textvorschau {
  grid-column: 2; grid-row: 1 / span 6; margin-top: 0;
  padding: 36px 40px; border-radius: var(--radius-lg);
  background: var(--cc-violett-tint); color: var(--cc-blau-1);
  font-size: 17px;
}
@media (max-width: 1023px) {
  #schulbrief { grid-template-columns: 1fr; grid-template-rows: none; }
  #schulbrief > .textvorschau { grid-column: auto; grid-row: auto; padding: 24px; }
}

/* Schulleitung Finanzierung: drei gleiche weisse Karten, die Schritte fuer
   den Foerderverein beim Vordruck (vorher: drei Farben, Liste in der Mitte). */
.vordruck {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px;
  padding: 36px 40px; border-radius: var(--radius-md); background: var(--cc-violett-tint);
  --knopf2-flaeche: #fff; --knopf2-flaeche-hover: var(--cc-weiss-2);
}
.vordruck__text { display: grid; gap: 8px; align-content: start; justify-items: start; }
.vordruck__text h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--cc-blau-1); }
.vordruck__text p { font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.vordruck__text .knopf { margin-top: 12px; }
.vordruck__schritte ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font: 400 15px/1.5 var(--font-body); color: var(--cc-n-800); }
.vordruck__schritte ol b { color: var(--cc-blau-1); }
.vordruck__schritte p { margin-top: 20px; font: 400 13px/1.5 var(--font-body); }
@media (max-width: 767px) {
  .vordruck { grid-template-columns: 1fr; padding: 24px; }
}

/* Format: der Drehknopf aus dem Startseiten-Hero im Kopf */
.seitenkopf__grafik--drehknopf { display: grid; place-items: center; grid-template-columns: none; }
.seitenkopf__grafik--drehknopf .drehknopf { width: 88%; }

/* Karte mit zwei Links am Ende: beide stehen unten (Schulen, Das Wichtigste vorab) */
.saule > .pfeil:nth-last-child(2) { margin-top: auto; padding-top: 6px; }
.saule > .pfeil:nth-last-child(2) + .pfeil:last-child { margin-top: 0; padding-top: 4px; }

/* Schrittsektion auf Unterseiten: Kopf, drei Schritte, Fuss - wie die
   Startseite. Auf Hellblau tragen die Grafikflaechen weiter. */
.schritte .ausstehend { margin-top: 40px; }

/* --- Weitere Schritt-Grafiken (Lehr- und Fachkraefte, Streitschlichter) ------
   Gleicher 6-Sekunden-Takt, Grundzustand = fertiges Bild. */
/* 4 Anmelden und Termin oeffnen */
.sg4-login { opacity: 0; animation: sg4Login 6s var(--ease-weich) infinite; }
.sg4-ring { animation: sg4Ring 6s var(--ease-weich) infinite; }
.sg4-knopf { transform-origin: center; animation: sg4Knopf 6s var(--ease-weich) infinite; }
.sg4-zeiger { opacity: 0; animation: sg4Zeiger 6s var(--ease-weich) infinite; }
@keyframes sg4Login { 0%, 20% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes sg4Ring { 0%, 52% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sg4Knopf { 0%, 49% { transform: none; } 53% { transform: scale(.88); } 58%, 100% { transform: none; } }
@keyframes sg4Zeiger {
  0% { opacity: 0; transform: translate(320px, 200px); }
  6% { opacity: 1; }
  16% { transform: translate(196px, 142px); }
  18% { transform: translate(196px, 142px) scale(.85); }
  22% { transform: translate(196px, 142px); }
  44% { transform: translate(272px, 84px); }
  50% { transform: translate(272px, 84px) scale(.85); }
  54%, 80% { opacity: 1; transform: translate(272px, 84px); }
  90%, 100% { opacity: 0; transform: translate(320px, 200px); }
}
/* 5 Klassencode zeigen, die Klasse tritt bei */
.sg5-ziffer { animation: sg5Z1 6s var(--ease-weich) infinite; }
.sg5-ziffer--2 { animation-name: sg5Z2; } .sg5-ziffer--3 { animation-name: sg5Z3; } .sg5-ziffer--4 { animation-name: sg5Z4; }
.sg5-dabei { transform-origin: center; animation: sg5D1 6s var(--ease-weich) infinite; }
.sg5-dabei--2 { animation-name: sg5D2; } .sg5-dabei--3 { animation-name: sg5D3; } .sg5-dabei--4 { animation-name: sg5D4; }
@keyframes sg5Z1 { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sg5Z2 { 0%, 10% { opacity: 0; transform: translateY(8px); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sg5Z3 { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sg5Z4 { 0%, 22% { opacity: 0; transform: translateY(8px); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sg5D1 { 0%, 36% { transform: scale(0); } 42% { transform: scale(1.2); } 46%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg5D2 { 0%, 44% { transform: scale(0); } 50% { transform: scale(1.2); } 54%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg5D3 { 0%, 52% { transform: scale(0); } 58% { transform: scale(1.2); } 62%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg5D4 { 0%, 60% { transform: scale(0); } 66% { transform: scale(1.2); } 70%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
/* 6 Am Ende die Aufgabe */
.sg6-karte { animation: sg6Karte 6s var(--ease-weich) infinite; }
.sg6-haken { transform-origin: center; animation: sg6H1 6s var(--ease-weich) infinite; }
.sg6-haken--2 { animation-name: sg6H2; } .sg6-haken--3 { animation-name: sg6H3; }
.sg6-kopf { transform-origin: bottom; animation: sg3Kopf 6s var(--ease-weich) infinite; animation-name: sg6Kopf; }
.sg6-kopf--2 { animation-delay: .1s; } .sg6-kopf--3 { animation-delay: .2s; } .sg6-kopf--4 { animation-delay: .3s; }
@keyframes sg6Karte { 0%, 18% { transform: translateY(130px); } 32%, 92% { transform: none; } 100% { transform: translateY(130px); } }
@keyframes sg6H1 { 0%, 40% { transform: scale(0); } 46% { transform: scale(1.2); } 50%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg6H2 { 0%, 50% { transform: scale(0); } 56% { transform: scale(1.2); } 60%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg6H3 { 0%, 60% { transform: scale(0); } 66% { transform: scale(1.2); } 70%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg6Kopf { 0%, 72% { transform: none; } 78% { transform: translateY(-6px); } 84%, 100% { transform: none; } }
/* 7 Vor dem Start */
.sg7-haken { transform-origin: center; animation: sg7H1 6s var(--ease-weich) infinite; }
.sg7-haken--2 { animation-name: sg7H2; } .sg7-haken--3 { animation-name: sg7H3; }
.sg7-abzeichen { transform-origin: center; animation: sg7A 6s var(--ease-weich) infinite; }
@keyframes sg7H1 { 0%, 12% { transform: scale(0); } 18% { transform: scale(1.2); } 22%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg7H2 { 0%, 30% { transform: scale(0); } 36% { transform: scale(1.2); } 40%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg7H3 { 0%, 48% { transform: scale(0); } 54% { transform: scale(1.2); } 58%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg7A { 0%, 60% { transform: none; } 66% { transform: rotate(-14deg) scale(1.15); } 72%, 100% { transform: none; } }
/* 8 Waehrend der Sendung: jemand fragt, der Scout hilft */
.sg8-frage { transform-origin: bottom; animation: sg8Frage 6s var(--ease-weich) infinite; }
.sg8-antwort { transform-origin: bottom; animation: sg8Antwort 6s var(--ease-weich) infinite; }
.sg8-scout { transform-origin: bottom; animation: sg8Scout 6s var(--ease-weich) infinite; }
@keyframes sg8Frage { 0%, 10% { opacity: 0; transform: scale(.6); } 18%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes sg8Antwort { 0%, 34% { opacity: 0; transform: scale(.6); } 42%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes sg8Scout { 0%, 28% { transform: none; } 34% { transform: translateY(-8px); } 40%, 100% { transform: none; } }
/* 9 Bei der Aufgabe */
.sg9-fortschritt { transform-origin: left; animation: sg9F 6s var(--ease-weich) infinite; }
.sg9-stern { transform-origin: center; animation: sg9S 6s var(--ease-weich) infinite; }
.sg9-kopf { transform-origin: bottom; animation: sg9K 6s var(--ease-weich) infinite; }
.sg9-kopf--2 { animation-delay: .12s; } .sg9-kopf--3 { animation-delay: .24s; }
@keyframes sg9F { 0%, 10% { transform: scaleX(0); } 66%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sg9S { 0%, 66% { transform: scale(0) rotate(-30deg); } 74% { transform: scale(1.2); } 80%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes sg9K { 0%, 18% { transform: none; } 24% { transform: translateY(-5px); } 30%, 44% { transform: none; } 50% { transform: translateY(-5px); } 56%, 100% { transform: none; } }

/* --- Animierte Bildflaechen (Pati 25.09.: "die Animationen sind 10/10") ------
   Statt Markenflaechen zeigen einzelne Bildstellen, was der Text beschreibt.
   Gleicher Takt und Grundzustand wie die Schritt-Grafiken. */
.bildanimation { display: grid; place-items: center; overflow: hidden; border-radius: 16px; }
.bildanimation--marine { background: var(--cc-blau-1); }
.bildanimation--gruen { background: var(--cc-gruen); }
.bildanimation--violett { background: var(--cc-violett-tint); }
.bildanimation .ba { width: 100%; height: 100%; max-height: 520px; }
/* Gedrehte Formen drehen um ihren eigenen Punkt im Bild, nicht um ihre Box */
.sg .ba-frei { transform-box: view-box; }

/* 10 Eltern: Frage, gemeinsame Antwort, Ergebnis, Aufgabe */
.ba10-frage { transform-origin: center; animation: ba10Frage 6s var(--ease-weich) infinite; }
.ba10-antwort { animation: ba10Antwort 6s var(--ease-weich) infinite; }
.ba10-balken { animation-name: ba10Balken; }
.ba10-aufgabe { animation: ba10Aufgabe 6s var(--ease-weich) infinite; }
.ba10-haken { transform-origin: center; animation: ba10Haken 6s var(--ease-weich) infinite; }
.ba10-kopf { transform-origin: bottom; animation: ba10Kopf 6s var(--ease-weich) infinite; }
.ba10-kopf--2 { animation-delay: .08s; } .ba10-kopf--3 { animation-delay: .16s; } .ba10-kopf--4 { animation-delay: .24s; } .ba10-kopf--5 { animation-delay: .32s; }
@keyframes ba10Frage { 0%, 4% { transform: scale(0); } 12% { transform: scale(1.15); } 16%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes ba10Kopf { 0%, 20% { transform: none; } 26% { transform: translateY(-8px); } 32%, 100% { transform: none; } }
@keyframes ba10Antwort { 0%, 26% { opacity: 0; transform: none; } 32% { opacity: 1; transform: none; } 46% { opacity: 1; transform: translateY(-86px) scale(.8); } 50%, 100% { opacity: 0; transform: translateY(-86px) scale(.6); } }
@keyframes ba10Balken { 0%, 48% { transform: scaleY(0); } 64%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes ba10Aufgabe { 0%, 66% { opacity: 0; transform: translateY(-12px); } 74%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba10Haken { 0%, 76% { transform: scale(0); } 82% { transform: scale(1.2); } 86%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

/* 11 Lehr: Einladung per E-Mail, die Vertretung kommt dazu */
.ba11-brief { opacity: 0; animation: ba11Brief 6s var(--ease-weich) infinite; }
.ba11-neu { animation: ba11Neu 6s var(--ease-weich) infinite; }
@keyframes ba11Brief {
  0% { opacity: 0; transform: translate(380px, 250px) rotate(12deg); }
  8% { opacity: 1; }
  30% { opacity: 1; transform: translate(173px, 197px) rotate(0); }
  36%, 100% { opacity: 0; transform: translate(173px, 197px) scale(.6); }
}
@keyframes ba11Neu { 0%, 32% { opacity: 0; transform: translateX(24px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 12 Courage: Beitraege erscheinen, einer ist von eurer Klasse */
.ba12-kachel { transform-origin: center; animation: ba12K1 6s var(--ease-weich) infinite; }
.ba12-kachel--2 { animation-name: ba12K2; } .ba12-kachel--3 { animation-name: ba12K3; }
.ba12-kachel--4 { animation-name: ba12K4; } .ba12-kachel--5 { animation-name: ba12K5; } .ba12-kachel--6 { animation-name: ba12K6; }
.ba12-ring { animation: ba12Ring 6s var(--ease-weich) infinite; }
.ba12-chip { transform-origin: center; animation: ba12Chip 6s var(--ease-weich) infinite; }
@keyframes ba12K1 { 0%, 2% { opacity: 0; transform: scale(.8); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba12K2 { 0%, 8% { opacity: 0; transform: scale(.8); } 16%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba12K3 { 0%, 14% { opacity: 0; transform: scale(.8); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba12K4 { 0%, 20% { opacity: 0; transform: scale(.8); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba12K5 { 0%, 34% { opacity: 0; transform: translateY(-16px) scale(.8); } 44% { opacity: 1; transform: scale(1.06); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba12K6 { 0%, 26% { opacity: 0; transform: scale(.8); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ba12Ring { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ba12Chip { 0%, 56% { transform: scale(0); } 62% { transform: scale(1.2); } 66%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

/* --- Tippflaechen auf Touch-Geraeten (QM-Liste 29.09.) ----------------------
   Mindestens 44px zum Antippen, ohne dass sich das Layout verschiebt: Pfeil-
   Links stehen im Textfluss, dort vergroessert Innenabstand nur die
   Trefferflaeche. Footer-Links und Traegerlogos bekommen Hoehe. */
@media (pointer: coarse) {
  .pfeil { padding-block: 13px; }
  .fuss__spalte { gap: 0; }
  .fuss__spalte a { display: inline-flex; align-items: center; min-height: 44px; }
  .traegerlogo { min-height: 44px; min-width: 44px; }
  .fuss__credit a { display: inline-block; padding-block: 13px; }
  .kennzahl__quelle a, .ansprech > a, .brotkrume a { padding-block: 13px; }
  .reiter [role="tab"] { min-height: 44px; }
}

/* Baustein-Varianten statt Inline-Styles (Komponenten-Audit Schritt 5) */
.saule.saule--bild { padding: 0; overflow: hidden; }
.saule--bild > .bildflaeche { aspect-ratio: 4 / 3; }
.saule--bild > p { padding: 20px 24px 24px; }
.ansprech.ansprech--dunkel { background: var(--cc-blau-1-soft); }
.karte.karte--statisch { cursor: default; }

/* Format "So ist eine Sendung aufgebaut" im Aufbau von "So kommt die Sendung" */
.aufbau__text { display: grid; gap: 16px; justify-items: start; }
.aufbau__text p { margin: 0; }

/* Sendungsseite (30.09.): Termine als Karten nebeneinander, Technik mittig */
.terminreihe-karten { margin-bottom: 24px; }
.terminreihe-karten .terminreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.terminreihe-karten .terminreihe__termin { flex-direction: column; gap: 14px; padding: 24px 28px; }
.terminreihe-karten .terminreihe__termin > div { width: 100%; }
.terminreihe-karten .terminreihe h3 { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; }
.haken--reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin: 18px 0 8px; }
@media (max-width: 1023px) {
  .terminreihe-karten .terminreihe { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .haken--reihe { flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
}

/* Schrittkarten: nummerierte Schritte als Karten im Raster (Ablauf und
   Technik), im Look der Terminkarten der Sendungsseite */
.schrittkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.schrittkarten > li { display: grid; gap: 10px; align-content: start; padding: 24px 28px; border-radius: 16px; background: #fff; counter-increment: schritt; }
.schrittkarten > li::before {
  content: counter(schritt); display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 4px; border-radius: 50%;
  font: 800 17px/1 var(--font-display); background: var(--cc-blau-2); color: #fff;
}
.schrittkarten > li:nth-child(3n+2)::before { background: var(--cc-violett); color: var(--cc-blau-1); }
.schrittkarten > li:nth-child(3n)::before { background: var(--cc-blau-1); color: var(--cc-gruen); }
.schrittkarten h3 { margin: 0; font: 700 21px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
.schrittkarten p { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--cc-n-800); }
/* Akkordeon in einer mittigen Sektion: Spalte mittig, Text links */
.mittig .akkordeon--mittig { width: 100%; max-width: 820px; margin-top: 22px; text-align: left; }
.mittig .akkordeon--mittig p { font: 400 17px/1.6 var(--font-body); max-width: none; }
@media (max-width: 1023px) { .schrittkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .schrittkarten { grid-template-columns: 1fr; } }

/* Rollenbilder, Runde 2 (30.09.): fliegende Zeiger nach dem Vorbild
   miro.com, ohne Flaeche dahinter. Nur ab Desktop, klein waere sie nicht lesbar. */
@media (min-width: 1024px) { .seitenkopf__grafik--rolle, .seitenkopf__grafik.hat-rollenbrett { display: block; } }
.rollenbrett { width: 100%; aspect-ratio: 1; }
.rollenbrett svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rb-wort { font: 800 17px/1 var(--font-display); letter-spacing: -0.01em; }
.rb-zeichen { font: 800 19px/1 var(--font-display); }
.rb-name { font: 700 12.5px/1 var(--font-display); }
.entwurf__karte .rollenbrett { width: 320px; }
.entwurf__raster--brett { grid-template-columns: 1fr; }
.entwurf__karte--brett { background: var(--cc-weiss-2); }
@media (max-width: 767px) { .entwurf__karte .rollenbrett { width: 100%; } }

/* Unterseiten wechseln den Aufbau ab (01.10.): Hinweis in einer mittigen Sektion (Text bleibt links), Knoepfe mittig */
.mittig .ausstehend { width: 100%; max-width: 760px; text-align: left; }
.mittig .ausstehend p { font: 400 15px/1.55 var(--font-body); max-width: none; }
.mittig .d-flex { justify-content: center; }

/* Kommentare 30.09.: sechs Finanzierungswege, Stimmen-Wand, FAQ-Sprung,
   Kennzahlen mit Platzhalter */
.finanzierung__wege--klein { margin-top: -16px; }
.finanzweg--klein { flex-direction: row; align-items: center; gap: 14px; padding: 18px 22px; }
.finanzweg--klein h3 { font-size: 17px; }
.stimmen__raster--wand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stimme[hidden] { display: none; }
.stimme__wer { font: 500 15px/1.45 var(--font-body); color: var(--cc-n-800); }
/* Stimmenkarten bleiben auch auf Marine dunkel beschriftet (weisse Karte) */
.sektion--marine .stimme, .sektion--marine .stimme__zitat { color: var(--cc-blau-1); }
.sektion--marine .stimme .marke { color: var(--cc-blau-2-hover); }
.faq-suche__springen { margin-left: 14px; }
/* Kommentar WLe8KMljP2A4: Suchbereich auf Marine (Schulen). Bei Eltern
   folgt der Hilfe-Block auf Marine, bei Courage steht darueber der dunkle
   Kopf - dort bleibt Papier. */
.sektion--marine .faq-suche__feld > span { color: var(--cc-weiss); }
.sektion--marine .faq-suche__treffer { color: var(--cc-n-200); }
.sektion--marine .faq-suche input { border-color: transparent; }
.sektion--marine .faq-suche input:focus { border-color: var(--cc-gruen); box-shadow: 0 0 0 3px rgba(214, 255, 122, .35); }
.sektion--marine .faq-suche__leer { background: rgba(245, 244, 240, .1); }
.sektion--marine .faq-suche__leer p { color: var(--cc-n-200); }
/* Kommentar H6atUufIuuw7: Suchbegriff in den Treffern markiert */
mark.faq-markiert { background: var(--cc-gruen); color: var(--cc-blau-1); border-radius: 3px; padding: 0 2px; }
/* Schwebende Trefferleiste der FAQ-Suche (01.10., bleibt). Auf Tablet und
   Handy ueber der Knopfleiste K28. */
.faq-leiste {
  position: fixed; left: 50%; bottom: 24px; z-index: 45;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 20px; border-radius: var(--radius-pill);
  background: var(--cc-blau-1); color: var(--cc-weiss);
  box-shadow: 0 14px 36px -10px rgba(3, 26, 128, .55);
  transform: translate(-50%, 0); opacity: 1; visibility: visible;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s;
}
.faq-leiste[data-sichtbar="nein"] { transform: translate(-50%, 18px); opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--dur-base); }
.faq-leiste__stand { margin-right: 8px; font: 600 15px/1 var(--font-body); white-space: nowrap; }
.faq-leiste button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(245, 244, 240, .14); color: var(--cc-weiss); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-leiste button:hover { background: var(--cc-gruen); color: var(--cc-blau-1); }
.faq-leiste button:focus-visible { outline: 3px solid var(--cc-gruen); outline-offset: 2px; }
.faq-leiste .faq-leiste__zu { background: transparent; }
.faq-leiste svg { width: 18px; height: 18px; }
@media (max-width: 1023px) { .faq-leiste { bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .faq-leiste { transition: none; } }
.grund .kennzahl__wert--platzhalter, .grund .kennzahl[data-aktiv] .kennzahl__wert--platzhalter { font-size: clamp(30px, 3vw, 44px); white-space: normal; }
@media (max-width: 1023px) { .stimmen__raster--wand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .stimmen__raster--wand { grid-template-columns: 1fr; } .finanzweg--klein { padding: 16px 20px; } }

/* Kommentare Lisa 01.10. ------------------------------------------------ */
/* Karten (R3iwx-TQy9Km, MVI1SG-tiRyg): Im Raster beginnen die Angaben auf
   gleicher Hoehe, egal ob der Titel ein- oder zweizeilig ist, und der Link
   steht immer unten. */
.sendung__ziel, .termin__ziel { margin-top: auto; padding-top: 12px; }
@media (min-width: 600px) {
  .sendungen__raster .sendung__titel, .termine__raster .termin__titel { min-height: 2.3em; }
  .termine__raster .termin__ort { min-height: 3em; }
}
/* Courage-Beitraege (xsMGJqdnLMss): im Zweierraster ohne Versatz, sonst
   wirkt es zufaellig statt gewollt */
@media (max-width: 599px) { .beitraege .beitrag--versetzt { margin-top: 0; } }
/* Kennzahl-Karten (cVEeGKkvkl1_): Die Zahl waechst ueber transform statt
   ueber die Schriftgroesse - kein Neuumbruch je Bild, kein Ruckeln. Nur ab
   Desktop, wo die Karten nebeneinander aufziehen. */
@media (min-width: 1024px) {
  .grund .kennzahl__wert {
    font-size: clamp(88px, 10.5vw, 172px);
    transform: scale(.42); transform-origin: 0 100%;
    transition: transform 650ms var(--ease-weich), color 450ms var(--ease-out);
    will-change: transform;
  }
  .grund .kennzahl[data-aktiv] .kennzahl__wert { transform: none; }
  .grund .kennzahl__wert--platzhalter, .grund .kennzahl[data-aktiv] .kennzahl__wert--platzhalter { font-size: clamp(30px, 3vw, 44px); transform: none; }
}
/* Video auf dem Handy (WFV18OkTroPO): waechst ohne Festheften */
.heroplay[data-zoom="klein"] .hero__video { transform-origin: 50% 50%; will-change: transform; }
/* Sendeplan (6PQjmU7SoA9v): Zwischen Tablet und grossem Desktop sind die
   fuenf Monatsspalten zu schmal fuer Tag und Text nebeneinander - dort steht
   der Tag ueber dem Text. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .plan__eintrag { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "text" "status"; gap: 6px; padding: 14px; }
  .plan__tag { font-size: 24px; }
  .plan__titel { hyphens: auto; overflow-wrap: break-word; }
  .plan__status { letter-spacing: .05em; }
}

/* Kommentare Lisa 02.10. ------------------------------------------------ */
/* MTQWT9CQML_W: Grosse Headlines optisch buendig mit der Kopfzeile darueber -
   das grosse Anfangs-Versal hat mehr Vorbreite als die kleine Kopfzeile. */
.hero h1, .seitenkopf h1 { margin-left: -0.05em; }
/* lgfwqh2UxMi5: Die Animation im Kopf von Format stand unter 1024 px gross
   ueber der Headline. Dort klein oben rechts neben der Kopfzeile, wie auf
   der Startseite. */
@media (max-width: 1023px) {
  .seitenkopf__grafik--drehknopf { top: 26px; width: 120px; }
  .seitenkopf__grafik--drehknopf .drehknopf { width: 100%; }
  .seitenkopf--grafik:has(> .seitenkopf__grafik--drehknopf) .inhalt > .marke:first-child {
    display: flex; align-items: center; min-height: 120px; max-width: calc(100% - 136px);
  }
}
@media (max-width: 767px) {
  .seitenkopf__grafik--drehknopf { width: 104px; right: calc(var(--gut) - 6px); }
  .seitenkopf--grafik:has(> .seitenkopf__grafik--drehknopf) .inhalt > .marke:first-child { min-height: 104px; max-width: calc(100% - 120px); }
}

/* Kommentare 02.10. (Lisa, David) ---------------------------------------- */
/* etT_0mSZ0M3R: Stimmen auf der Startseite ohne Link, also auch ohne Hover */
.stimme--statisch, .stimme--statisch:hover { transform: none; box-shadow: none; cursor: default; }
/* zq5xkKa5Bkj9: Logo etwas groesser */
/* Final logo (12.11.) carries the tall "!" again, so it grows by about a quarter
   to keep the lettering as large as the October wordmark (decision 171). */
.kopf__logo img { height: 84px; }
.kopf[data-kompakt="ja"] .kopf__logo img { height: 60px; }
@media (max-width: 1023px) { .kopf__logo img { height: 66px; } .kopf[data-kompakt="ja"] .kopf__logo img { height: 54px; } }
/* Werft z40rlephjkxov9 (Lisa 27.10.): Das Logo klemmte am oberen Rand (88 px
   Leiste, 66 px Logo: 11 px Luft). Die Leiste waechst mit, oben und unten
   bleiben jetzt gut 20 px, kompakt 12 px, mobil 16 und 10 px. */
.kopf__bar, body[data-umfang="mvp"] .kopf__bar { height: 108px; }
.kopf[data-kompakt="ja"] .kopf__bar, body[data-umfang="mvp"] .kopf[data-kompakt="ja"] .kopf__bar { height: 72px; }
html { scroll-padding-top: 124px; }
@media (max-width: 1023px) {
  .kopf__bar, body[data-umfang="mvp"] .kopf__bar { height: 84px; }
  .kopf[data-kompakt="ja"] .kopf__bar, body[data-umfang="mvp"] .kopf[data-kompakt="ja"] .kopf__bar { height: 64px; }
  html { scroll-padding-top: 96px; }
}
/* Messen der Kennzahl-Reihe ohne Animation */
.ist-messend, .ist-messend * { transition: none !important; }

/* Kommentare 02.10. nachmittags ------------------------------------------ */
/* bVL_UT_hLNOI: Gruende-Karten - Link immer unten, egal wie lang der Titel */
.gruende__karte { display: flex; flex-direction: column; }
.gruende__karte .pfeil { margin-top: auto; padding-top: 6px; align-self: flex-start; }
/* myxCva6DTzWD: Leitfragen buendig mit der Ueberschrift (Punkt im Rand) */
.leitfragen { padding-left: 0; list-style: none; }
.leitfragen li { position: relative; }
.leitfragen li::before { content: "•"; position: absolute; left: -0.9em; color: var(--cc-blau-2); }
/* LWMFQk2iDJMN: Hinweis unter den Vordruck-Schritten buendig mit dem Text */
.vordruck__schritte p { padding-left: 20px; }
/* 9ARt20PFY2RP: „Weg“-Label in der CI-Labelfarbe wie „Schritt“ */
.finanzweg .marke { color: var(--cc-blau-2-hover); }
/* qDqRhPEsXYoP: Sendeplan-Eintraege sind Links */
.plan .plan__liste a.plan__eintrag:is(.plan__eintrag--buchbar, .plan__eintrag--testsendung) { color: var(--cc-blau-1); }
.plan .plan__liste a.plan__eintrag--ausgebucht { color: var(--cc-weiss); }
a.plan__eintrag { text-decoration: none; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
a.plan__eintrag:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
a.plan__eintrag:focus-visible { outline: 3px solid var(--cc-gruen); outline-offset: 2px; }

/* Kommentare Lisa 03.10. ------------------------------------------------- */
/* wU_PyheRp5dJ: Platzhalter und leere Auswahlfelder in einem Grau, Eingaben
   und gewaehlte Werte dunkel */
.feld input::placeholder, .feld textarea::placeholder { color: var(--cc-n-600); opacity: 1; }
.feld select.ist-leer { color: var(--cc-n-600); }
.feld select option { color: var(--cc-n-900); }
/* eFThBGN1KUS9: Die ganze Karte ist klickbar, der Link spannt sich ueber
   die Flaeche; weitere Links in der Karte bleiben einzeln anklickbar. */
.saulen--klickbar .saule { position: relative; cursor: pointer; }
.saulen--klickbar .pfeil--flaeche::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.saulen--klickbar .saule .pfeil:not(.pfeil--flaeche) { position: relative; z-index: 1; }
.saulen--klickbar .saule:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(3, 26, 128, .12); }
.saulen--klickbar .saule:hover .pfeil--flaeche .spitze { transform: translateX(3px); }
/* lVTm9RaBmorF: Art-Label auf violetter Bildflaeche war unsichtbar */
.markenbild--1 .art, .markenbild--5 .art { background: var(--cc-blau-1); color: var(--cc-weiss); }

/* Fotos (15.10., Stock-Auswahl Pati): Bilder liegen unter den Labels der
   Flaechen; Ansprechperson rund beschnitten; Video-Poster hinter Chip und
   Abspielknopf. */
.datumsblock, .art { z-index: 1; }
.ansprech__bild { overflow: hidden; }
.ansprech__bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video > .live-chip, .hero__video > .hero__play { position: relative; z-index: 1; }
.hero__video > .live-chip { position: absolute; }
.anfrage__bild > img { object-position: 50% 30%; }

/* Courage-Beitraege als Reels: Foto fuellt die 9:16-Kachel, die Formen
   verschwinden, unten links ein kleines Abspielsymbol */
.beitrag:has(img)::before, .beitrag:has(img)::after { display: none; }
.beitrag > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.beitrag__play {
  position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(245, 244, 240, .9);
}
.beitrag__play::after {
  content: ""; position: absolute; left: 12px; top: 9px;
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--cc-blau-1);
}

/* Pati 15.10.: Keine dekorativen Formen (Kreise, Pillen, Ringe) mehr auf
   Bildflaechen und Beitragskacheln - nur noch in bewegten Animationen. Ohne
   Foto bleibt eine ruhige Farbflaeche. */
.markenbild::before, .markenbild::after,
.beitrag::before, .beitrag::after { display: none !important; }
/* Fliesstext-Hilfsklasse auf Marine hell (Foerdergeber „So koennen Sie
   foerdern“, Pati 15.10. dunkelblau) */
.sektion--marine .c-n800 { color: var(--cc-n-200) !important; }
/* Kopf mit Foto (Anfragen) */
.seitenkopf__grafik--foto { display: block; border-radius: 24px; overflow: hidden; }
.seitenkopf__grafik--foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Schaubild „Live und individuell“ als Szene (Pati 15.10.: weniger KI-Look,
   besser animiert). Studio links, Klassenzimmer rechts, ein Ablauf von 9 s:
   Frage im Studio und zugleich auf dem Beamer -> Kinder melden sich, auf dem
   Tablet wird gewaehlt -> Balken im Studio wachsen, die Moderation reagiert. */
.schaubild--szene { display: block; padding: 0; background: var(--cc-weiss); }
.schaubild--foto { display: block; padding: 0; }
.schaubild--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Generated photo: Art. 50 AI Act wants it labelled where it is shown, kept small so it does not compete with the image */
.schaubild__ki {
  position: absolute; right: 10px; bottom: 8px;
  color: rgba(255, 255, 255, .8); font: 400 10px/1.3 var(--font-body); letter-spacing: .02em;
  text-shadow: 0 0 3px rgba(0, 0, 0, .55), 0 1px 1px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.schaubild--szene .szene { display: block; width: 100%; height: 100%; }
.szene .sz-zeichen { font: 800 22px/1 var(--font-display); fill: #031a80; }
.szene .sz-zeichen--klein { font-size: 16px; }
.szene .sz-name { font: 700 14px/1 var(--font-display); fill: #031a80; letter-spacing: -0.01em; }
.szene g, .szene rect { transform-box: fill-box; }
.sz-mod { transform-origin: 50% 100%; animation: szMod 4.5s ease-in-out infinite; }
.sz-mod--klein { animation-delay: .15s; }
.sz-rec { animation: szRec 1.2s ease-in-out infinite; }
.sz-blase { transform-origin: 0% 100%; opacity: 0; }
.sz-blase--frage { animation: szFrage 9s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.sz-blase--ausruf { animation: szAusruf 9s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.sz-blase--spaet { animation-delay: .25s; }
.sz-kind { transform-origin: 50% 100%; animation: szKind 9s ease-in-out infinite; }
.sz-kind--2 { animation-delay: .08s; } .sz-kind--3 { animation-delay: .16s; } .sz-kind--4 { animation-delay: .24s; }
.sz-hand { transform-origin: 50% 100%; animation: szHand 9s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.sz-kind--4 .sz-hand { animation-delay: .2s; }
.sz-wahl { animation: szWahl 9s ease infinite; }
.sz-tablet { transform-origin: 50% 100%; animation: szTablet 9s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.sz-balken { transform-origin: 50% 100%; animation: szBalken 9s cubic-bezier(.22, 1, .36, 1) infinite; }
.sz-balken--2 { animation-delay: .12s; } .sz-balken--3 { animation-delay: .24s; }
@keyframes szMod { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-1.2deg); } }
@keyframes szRec { 50% { opacity: .25; } }
@keyframes szFrage { 0%, 4% { opacity: 0; transform: scale(.4); } 9%, 34% { opacity: 1; transform: scale(1); } 38%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes szAusruf { 0%, 70% { opacity: 0; transform: scale(.4); } 75%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes szKind { 0%, 34% { transform: none; } 38% { transform: translateY(-5px); } 42%, 100% { transform: none; } }
@keyframes szHand { 0%, 38% { opacity: 0; transform: translateY(22px) scaleY(.3); } 43%, 62% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(22px) scaleY(.3); } }
@keyframes szTablet { 0%, 42% { transform: translateY(0); } 46% { transform: translateY(-4px); } 50%, 100% { transform: translateY(0); } }
@keyframes szWahl { 0%, 48% { fill: #dee4f3; } 52%, 92% { fill: #4d61f4; } 96%, 100% { fill: #dee4f3; } }
@keyframes szBalken { 0%, 56% { transform: scaleY(0); } 70%, 92% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
/* Konfetti: zuendet mit den Antworten (Balken wachsen ab 56 %) */
.sz-konfetti > * { transform-box: fill-box; transform-origin: center; opacity: 0; animation: szKonfetti 9s cubic-bezier(.2, .8, .3, 1) infinite; animation-delay: var(--d, 0s); }
@keyframes szKonfetti {
  0%, 57% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); }
  60% { opacity: 1; }
  78% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  90%, 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(var(--r)) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .szene * { animation: none !important; }
  .sz-konfetti { display: none; }
  .sz-blase--frage { opacity: 1; transform: none; }
  .sz-hand { opacity: 1; }
}

/* Schrittfolge als bunte Karten statt farbiger Linie oben (Pati 15.10.,
   Fördergeber und Wirkung) - wie die Gründe-Karten der Schulleitung */
.schrittfolge > div { border-top: 0 !important; border-radius: 16px; padding: 26px 26px 28px; }
.schrittfolge > div:nth-child(4n+1) { background: var(--cc-violett-tint); }
.schrittfolge > div:nth-child(4n+2) { background: var(--cc-blau-2-tint); }
.schrittfolge > div:nth-child(4n+3) { background: var(--cc-gruen); }
.schrittfolge > div:nth-child(4n+4) { background: var(--cc-blau-1); }
.schrittfolge > div:nth-child(4n+4) h3 { color: var(--cc-weiss); }
.schrittfolge > div:nth-child(4n+4) p { color: var(--cc-n-200); }
.schrittfolge > div:nth-child(4n+4) .marke { color: var(--cc-gruen); }
.schrittfolge > div:nth-child(4n+1) .marke, .schrittfolge > div:nth-child(4n+2) .marke, .schrittfolge > div:nth-child(4n+3) .marke { color: var(--cc-blau-1); }

/* ===========================================================================
   FEEDBACK-BEREICH (MVP, 27.10.2026; Stepper nach Pati 28.10.)
   Ganz in Marine, im Stil von Typeform: eine Frage pro Bildschirm, grosse
   Schrift, Gruen traegt die Auswahl. Fuers Handy gedacht (QR-Code): Felder
   in 16px (sonst zoomt iOS), Sterne und Auswahl mit grosser Trefferflaeche.
   Ohne Skript stehen alle Fragen untereinander.
   =========================================================================== */
body.feedbackseite { background: var(--cc-blau-1); --fb-fehler: #ffb0ae; --fb-linie: rgba(245, 244, 240, .22); }
.strecke--feedback .strecke__bar { border-bottom: 1px solid rgba(245, 244, 240, .12); }
.fb-recht { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 12px var(--gut) 24px; border-top: 1px solid rgba(245, 244, 240, .12); }
.fb-recht a { display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/1.4 var(--font-body); color: var(--cc-n-200); text-decoration: none; }
.fb-recht a:hover { color: var(--cc-weiss); }
.fb-kicker { display: inline-block; font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-gruen); }
.fb-intro { max-width: 620px; font: 400 clamp(17px, 1.5vw, 21px)/1.5 var(--font-body); color: var(--cc-n-200); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Uebersicht und Dank ------------------------------------------------- */
.fb-start { min-height: calc(100svh - 80px); padding: clamp(44px, 7vw, 96px) var(--gut) 96px; overflow: hidden; }
.fb-start__inhalt { max-width: 1200px; margin-inline: auto; display: grid; justify-items: start; gap: 20px; }
.fb-start__titel { font: 800 clamp(34px, 4.2vw, 60px)/1.02 var(--font-display); letter-spacing: -0.03em; color: var(--cc-weiss); text-wrap: balance; }
.fb-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; margin-top: 28px; }
.fb-weg {
  position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px; min-height: 380px;
  padding: 28px 30px 30px; border-radius: 24px; color: var(--cc-blau-1); text-decoration: none; overflow: hidden;
  transition: transform 420ms var(--ease-weich), box-shadow 420ms var(--ease-weich);
}
.fb-weg--lehrkraefte { background: var(--cc-blau-2-tint); }
.fb-weg--schueler, .fb-weg--praesenz { background: var(--cc-gruen); }
.fb-weg:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); }
.fb-weg--schueler:hover, .fb-weg--praesenz:hover { transform: translateY(-6px) rotate(.6deg); }
.fb-weg:focus-visible { outline: 3px solid var(--cc-gruen); outline-offset: 4px; }
.fb-weg--schueler:focus-visible, .fb-weg--praesenz:focus-visible { outline-color: var(--cc-weiss); }
.fb-weg__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fb-weg__marke { font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.fb-weg__dauer { padding: 6px 12px; border-radius: 999px; background: rgba(3, 26, 128, .1); font: 600 13px/1 var(--font-body); }
.fb-weg__titel { font: 800 clamp(26px, 2.65vw, 38px)/1.05 var(--font-display); letter-spacing: -0.03em; max-width: 11ch; }
.fb-weg__text { font: 400 17px/1.5 var(--font-body); max-width: 30ch; color: var(--cc-n-800); }
.fb-weg__pfeil {
  position: absolute; right: 26px; bottom: 26px; width: 60px; height: 60px; border-radius: 50%;
  background: var(--cc-blau-1); transition: transform 420ms var(--ease-weich);
}
.fb-weg__pfeil::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: var(--cc-gruen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fb-weg:hover .fb-weg__pfeil { transform: scale(1.12) rotate(-45deg); }
/* Overview without stars (Lisa 03.11.): the title takes the stretching row, so it
   sits at its foot and the free space stays between label and title. */
.feedbackseite .fb-weg__titel { align-self: end; }
/* Sterne auf der Karte: wippen leise, beim Ueberfahren fuellen sie sich
   nacheinander. Die einzigen Formen hier, und sie bewegen sich. */
.fb-weg__sterne { display: flex; gap: 6px; align-self: center; }
.fb-weg__sterne span {
  width: clamp(36px, 4vw, 52px); aspect-ratio: 1; background: currentColor; opacity: .22;
  -webkit-mask: var(--fb-stern) center / contain no-repeat; mask: var(--fb-stern) center / contain no-repeat;
  animation: fbWippen 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 140ms);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-weich);
}
.fb-weg__sterne span:nth-child(2) { --i: 1; } .fb-weg__sterne span:nth-child(3) { --i: 2; }
.fb-weg__sterne span:nth-child(4) { --i: 3; } .fb-weg__sterne span:nth-child(5) { --i: 4; }
.fb-weg:hover .fb-weg__sterne span { opacity: 1; transition-delay: calc(var(--i, 0) * 70ms); }
@keyframes fbWippen { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-8deg); } }

:root {
  --fb-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.1 6.7.8-4.95 4.6 1.3 6.65L12 17.05l-5.95 3.3 1.3-6.65L2.4 9.1l6.7-.8z' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --fb-stern-leer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.65 5.6 6.15.75-4.52 4.22 1.18 6.1L12 16.65l-5.46 3.02 1.18-6.1L3.2 9.35l6.15-.75z'/%3E%3C/svg%3E");
}

.fb-danke [data-fuer] { display: grid; gap: 20px; }
.fb-danke [data-fuer][hidden] { display: none; }
/* Lisa 06.11.: the exclamation mark from the logo instead of a tick. It jumps
   up, turns once and throws sparks in the CI colours, like the hero sign on
   the homepage. */
.fb-danke__zeichen { display: block; height: 111px; animation: fbZeichen 900ms cubic-bezier(.3, 1.4, .5, 1) 150ms both; }
.fb-danke__zeichen img { display: block; width: auto; height: 100%; }
@keyframes fbZeichen {
  0% { opacity: 0; transform: translateY(48px) scale(.3) rotate(-220deg); }
  55% { opacity: 1; transform: translateY(-14px) scale(1.08) rotate(14deg); }
  100% { transform: none; }
}
.fb-funke {
  position: fixed; z-index: 50; width: 16px; height: 16px; pointer-events: none; background: var(--cc-gruen);
  -webkit-mask: var(--fb-stern) center / contain no-repeat; mask: var(--fb-stern) center / contain no-repeat;
}
.fb-funke:nth-of-type(3n) { background: var(--cc-violett); }
.fb-funke:nth-of-type(4n) { background: var(--cc-weiss); width: 11px; height: 11px; }
.fb-funke:nth-of-type(5n) { background: var(--cc-blau-2); }

/* --- Bogen (Stepper) ----------------------------------------------------- */
.fb-bogen { position: relative; min-height: calc(100svh - 80px); padding: 0 var(--gut); }
.fb-fortschritt { position: sticky; top: 0; z-index: 5; height: 4px; margin: 0 calc(var(--gut) * -1); background: rgba(245, 244, 240, .12); }
.fb-fortschritt span { display: block; width: 0; height: 100%; background: var(--cc-gruen); border-radius: 0 4px 4px 0; transition: width 460ms cubic-bezier(.2, .7, .2, 1); }
.fb-form { max-width: 760px; margin-inline: auto; }
/* Pati 28.10.: Fragen mittig, nicht links */
.fb-schritt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 72px 0; border-top: 1px solid var(--fb-linie); }
.fb-schritt:first-of-type { border-top: 0; }
/* Mit Skript: immer nur ein Schritt, mittig im Bildschirm */
.fb-form[data-stepper] .fb-schritt { display: none; border-top: 0; min-height: calc(100svh - 84px); justify-content: center; padding: 48px 0 136px; }
.fb-form[data-stepper] .fb-schritt[data-aktiv] { display: flex; }

.fb-titel { font: 800 clamp(34px, 4.6vw, 64px)/1.02 var(--font-display); letter-spacing: -0.035em; color: var(--cc-weiss); text-wrap: balance; }
/* Pati 28.10.: die Nummer steht oben rechts in der Ecke, nicht mittig ueber
   der Frage. Gross und ruhig, wie ein Seitenzaehler. */
.fb-schritt { position: relative; }
.fb-nummer {
  position: absolute; top: 28px; right: 0; display: inline-flex; align-items: center; gap: 8px;
  font: 800 clamp(20px, 2vw, 26px)/1 var(--font-display); letter-spacing: -0.01em; color: var(--cc-gruen);
}
.fb-nummer__pfeil { width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.feedbackseite .fb-frage { font: 700 clamp(26px, 3.3vw, 44px)/1.12 var(--font-display); letter-spacing: -0.025em; color: var(--cc-weiss); text-wrap: balance; outline: none; }
.fb-frage label { cursor: text; }
.fb-freiwillig { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(245, 244, 240, .12); font: 500 13px/1 var(--font-body); letter-spacing: 0; color: var(--cc-n-200); }
.fb-hilfe { font: 400 17px/1.5 var(--font-body); color: var(--cc-n-200); }
.fb-ok { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.fb-start .fb-ok { align-items: flex-start; }
.fb-taste { font: 400 13px/1.4 var(--font-body); color: var(--cc-n-300); }
.fb-taste--text { margin-top: -4px; }
@media (pointer: coarse) { .fb-taste { display: none; } }
.fb-fehler { font: 600 15px/1.4 var(--font-body); color: var(--fb-fehler); }
.fb-fehler[hidden] { display: none; }

/* Sterne: echte Radioknoepfe, unsichtbar. Gewaehlt fuellt alle Sterne bis
   zum gewaehlten gruen; mit Maus zeigt das Ueberfahren die Wahl vorab. */
.sterne__reihe { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.sterne input, .fb-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sterne label { display: grid; place-items: center; width: clamp(56px, 6vw, 72px); aspect-ratio: 1; border-radius: 12px; cursor: pointer; }
.sterne label::before {
  content: ""; width: 78%; aspect-ratio: 1; background: rgba(245, 244, 240, .7);
  -webkit-mask: var(--fb-stern-leer) center / contain no-repeat; mask: var(--fb-stern-leer) center / contain no-repeat;
  transition: transform 260ms cubic-bezier(.3, 1.6, .5, 1), background-color 160ms var(--ease-out);
}
.sterne:has(input[value="1"]:checked) label:nth-of-type(-n+1)::before,
.sterne:has(input[value="2"]:checked) label:nth-of-type(-n+2)::before,
.sterne:has(input[value="3"]:checked) label:nth-of-type(-n+3)::before,
.sterne:has(input[value="4"]:checked) label:nth-of-type(-n+4)::before,
.sterne:has(input[value="5"]:checked) label:nth-of-type(-n+5)::before {
  background: var(--cc-gruen); -webkit-mask-image: var(--fb-stern); mask-image: var(--fb-stern); transform: scale(1.06);
}
.sterne input:checked + label::before { transform: scale(1.22) rotate(-8deg); }
@media (hover: hover) {
  .sterne__reihe:hover label::before { background: rgba(245, 244, 240, .7); -webkit-mask-image: var(--fb-stern-leer); mask-image: var(--fb-stern-leer); transform: none; }
  .sterne__reihe label:hover::before, .sterne__reihe label:has(~ label:hover)::before {
    background: var(--cc-gruen); -webkit-mask-image: var(--fb-stern); mask-image: var(--fb-stern);
  }
  .sterne__reihe label:hover::before { transform: scale(1.18) rotate(-8deg); }
}
.sterne input:focus-visible + label { outline: 3px solid var(--cc-gruen); outline-offset: -3px; }
[data-fehlt] .sterne label::before { background: var(--fb-fehler); }
/* Y 11.11.: a sixth star for "außergewöhnlich gut". Violet and a little apart, so one to
   five still read as the scale; picked, it fills the five before it in green. :where keeps
   the picked fill below the hover preview, like the other stars. */
.sterne .sterne__extra { margin-left: 10px; }
.sterne .sterne__extra::before, .sterne__reihe:hover .sterne__extra::before { width: 88%; background: var(--cc-violett); }
.sterne :where(input:checked) + .sterne__extra::before { -webkit-mask-image: var(--fb-stern); mask-image: var(--fb-stern); }
.sterne__reihe .sterne__extra:hover::before { background: var(--cc-violett); }

.fb-reaktion { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; font: 700 clamp(19px, 1.8vw, 24px)/1.2 var(--font-display); color: var(--cc-weiss); }
.fb-reaktion:empty { visibility: hidden; }
.fb-reaktion__bild { font-size: 42px; line-height: 1; }

/* Auswahl als Tasten wie bei Typeform: Buchstabe links, gewaehlt gruen */
.fb-wahl { display: grid; gap: 10px; width: min(100%, 520px); margin-top: 6px; }
.fb-wahl label {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 16px 10px 10px; border-radius: 10px;
  border: 1.5px solid rgba(245, 244, 240, .4); background: rgba(245, 244, 240, .06);
  font: 500 17px/1.3 var(--font-body); color: var(--cc-weiss); text-align: left; cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 200ms var(--ease-weich);
}
.fb-wahl label:hover { background: rgba(245, 244, 240, .14); border-color: rgba(245, 244, 240, .7); }
.fb-wahl__taste { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid rgba(245, 244, 240, .5); font: 700 13px/1 var(--font-display); }
.fb-wahl input:checked + label { background: var(--cc-gruen); border-color: var(--cc-gruen); color: var(--cc-blau-1); transform: scale(1.02); }
.fb-wahl input:checked + label .fb-wahl__taste { border-color: var(--cc-blau-1); background: var(--cc-blau-1); color: var(--cc-gruen); }
.fb-wahl input:focus-visible + label { outline: 3px solid var(--cc-gruen); outline-offset: 2px; }
.fb-wahl--zahlen { grid-template-columns: repeat(var(--spalten, 5), minmax(0, 1fr)); width: min(100%, 460px); }
.fb-wahl label[hidden] { display: none; }
.fb-wahl--zahlen label { justify-content: center; padding: 10px; font: 700 21px/1 var(--font-display); }
.fb-wahl--zahlen .fb-wahl__taste { display: none; }

.fb-text {
  width: min(100%, 620px); min-height: 120px; padding: 12px 0; text-align: center; border: 0; border-bottom: 2px solid rgba(245, 244, 240, .4); border-radius: 0;
  background: transparent; resize: vertical; color: var(--cc-weiss); font: 400 clamp(19px, 2vw, 26px)/1.4 var(--font-body);
}
.fb-text::placeholder { color: rgba(245, 244, 240, .4); }
.fb-text:focus { outline: none; border-bottom-color: var(--cc-gruen); }
/* Own answer to be quoted under the consent question; three lines at most */
.fb-zitate { display: grid; gap: 10px; width: min(100%, 620px); margin-top: 4px; text-align: left; }
.fb-zitat { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 14px 18px; border-radius: 12px; background: rgba(245, 244, 240, .06); }
.fb-zitat__nummer { grid-row: span 2; font: 700 15px/1.35 var(--font-display); color: var(--cc-gruen); }
.fb-zitat__frage { font: 500 14px/1.35 var(--font-body); color: var(--cc-n-200); }
.fb-zitat__antwort {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font: 400 17px/1.45 var(--font-body); color: var(--cc-weiss);
}
.fb-zitat__antwort--leer { font-style: italic; color: rgba(245, 244, 240, .45); }

/* Lisa 06.11.: closed by default, the privacy text is there on demand.
   Fixed width so the box does not jump when it opens. */
.fb-datenschutz { width: min(100%, 620px); text-align: left; margin-top: 8px; border-radius: 16px; background: rgba(245, 244, 240, .08); }
.fb-datenschutz summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px;
  border-radius: 16px; list-style: none; cursor: pointer; font: 700 17px/1.3 var(--font-display); color: var(--cc-gruen);
}
.fb-datenschutz summary::-webkit-details-marker { display: none; }
.fb-datenschutz summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 200ms ease;
}
.fb-datenschutz[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.fb-datenschutz summary:focus-visible { outline: 2px solid var(--cc-gruen); outline-offset: 3px; }
.fb-datenschutz p { padding: 0 26px 22px; font: 400 15px/1.55 var(--font-body); color: var(--cc-n-200); }
.fb-datenschutz a { color: var(--cc-weiss); }

/* Unten links: zurueck und weiter, daneben der Stand */
.fb-steuerung { position: fixed; left: var(--gut); bottom: 24px; z-index: 20; display: flex; align-items: center; gap: 8px; }
.fb-steuerung[hidden] { display: none; }
.fb-steuerung__knopf {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--cc-gruen); color: var(--cc-blau-1); transition: background-color 160ms var(--ease-out), transform 200ms var(--ease-weich);
}
.fb-steuerung__knopf:hover { background: var(--gruen-hover); transform: translateY(-2px); }
.fb-steuerung__knopf:disabled { background: rgba(245, 244, 240, .14); color: rgba(245, 244, 240, .4); cursor: default; transform: none; }
.fb-steuerung__knopf:focus-visible { outline: 3px solid var(--cc-weiss); outline-offset: 2px; }
.fb-steuerung__pfeil { width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.fb-steuerung__pfeil--zurueck { transform: scaleX(-1); }
.fb-steuerung__stand { margin-left: 8px; font: 600 15px/1 var(--font-body); color: var(--cc-n-200); }
/* Scrolled to the end, the fixed bar would cover imprint and privacy links (QM 11.11.):
   room below the footer for bar offset, bar height and a gap */
body:has(.fb-steuerung:not([hidden])) .fb-recht { padding-bottom: calc(24px + 48px + 16px); }

/* Bogen v2 (29.10.) --------------------------------------------------------
   Weiterempfehlung 0 bis 10: elf Tasten, die gewaehlte gruen, darunter die
   beiden Enden. Mobil zwei Reihen (6 + 5). */
.fb-skala { width: min(100%, 640px); margin-top: 6px; }
.fb-skala__reihe { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.fb-skala input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fb-skala label {
  display: grid; place-items: center; height: 52px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid rgba(245, 244, 240, .4); background: rgba(245, 244, 240, .06);
  font: 700 19px/1 var(--font-display); color: var(--cc-weiss);
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 200ms var(--ease-weich);
}
.fb-skala label:hover { background: rgba(245, 244, 240, .14); border-color: rgba(245, 244, 240, .7); }
.fb-skala input:checked + label { background: var(--cc-gruen); border-color: var(--cc-gruen); color: var(--cc-blau-1); transform: scale(1.06); }
.fb-skala input:focus-visible + label { outline: 3px solid var(--cc-gruen); outline-offset: 2px; }
.fb-skala__enden { display: flex; justify-content: space-between; margin-top: 10px; font: 400 14px/1.3 var(--font-body); color: var(--cc-n-200); }
[data-fehlt] .fb-skala label { border-color: var(--fb-fehler); }

/* Mehrere Bewertungen auf einem Bildschirm: je Zeile Frage und Sterne */
.fb-mehrfach { display: grid; gap: 18px; width: min(100%, 560px); margin-top: 8px; }
.sterne--zeile { display: grid; justify-items: center; gap: 4px; }
.sterne--zeile .sterne__frage { font: 600 17px/1.3 var(--font-body); color: var(--cc-weiss); }
.sterne--zeile .sterne__reihe { margin-top: 0; }
.sterne--zeile label { width: clamp(46px, 5vw, 56px); }

/* Mehrere Angaben auf einem Bildschirm (Sendung und Klasse, Zitat-Angaben) */
.fb-gruppen { display: grid; gap: 22px; width: min(100%, 560px); margin-top: 8px; text-align: left; }
.fb-gruppe { display: grid; gap: 10px; }
.fb-gruppe[hidden] { display: none; }
.fb-gruppe__titel { font: 600 15px/1.3 var(--font-body); color: var(--cc-n-200); text-align: center; }
.fb-gruppe .fb-wahl { width: 100%; margin-top: 0; }
.fb-gruppe .fb-wahl:not(.fb-wahl--zahlen) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb-gruppe .fb-wahl label { min-height: 46px; font-size: 16px; }
/* mehrere Auswahlen auf einem Bildschirm: keine Tastenkuerzel, also keine Buchstaben */
.fb-gruppe .fb-wahl__taste { display: none; }
.fb-zeile {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 10px;
  border: 1.5px solid rgba(245, 244, 240, .4); background: rgba(245, 244, 240, .06);
  font: 400 16px/1 var(--font-body); color: var(--cc-weiss);
}
.fb-zeile::placeholder { color: rgba(245, 244, 240, .45); }
.fb-zeile:focus { outline: none; border-color: var(--cc-gruen); background: rgba(245, 244, 240, .1); }
@media (max-width: 799px) {
  .fb-skala__reihe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fb-gruppe .fb-wahl:not(.fb-wahl--zahlen) { grid-template-columns: 1fr; }
}

/* Lisa 03.11.: more air between the statements. Lisa 06.11.: three levels
   per row (voll, eher, nicht), short enough for one row on phones too. */
.fb-gruppen--aussagen { width: min(100%, 680px); gap: 48px; }
.fb-gruppen--aussagen .fb-gruppe { gap: 14px; }
.fb-gruppen--aussagen .fb-gruppe__titel { font: 600 17px/1.35 var(--font-body); color: var(--cc-weiss); }
.fb-gruppe .fb-wahl.fb-wahl--stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fb-gruppe .fb-wahl--stufen label { justify-content: center; padding: 8px 10px; text-align: center; font-size: 15px; text-wrap: balance; }
@media (max-width: 799px) {
  .fb-gruppen--aussagen { gap: 36px; }
  .fb-gruppe .fb-wahl.fb-wahl--stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* appearance: none drops the system arrow, so it comes back as an image;
   :invalid greys out the „Bitte wählen“ placeholder. */
select.fb-zeile { appearance: none; padding-right: 44px; color-scheme: dark; cursor: pointer; }
select.fb-zeile, select.fb-zeile:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23f5f4f0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px;
}
select.fb-zeile:invalid { color: rgba(245, 244, 240, .45); }
select.fb-zeile option { color: var(--cc-weiss); background: var(--cc-blau-1); }
/* Shows which rows and fields are still open after a blocked „Weiter“ */
[data-fehlt] .fb-wahl:not(:has(input:checked)) label { border-color: var(--fb-fehler); }
[data-fehlt] .fb-gruppe:has([role]):not(:has(input:checked)) .fb-gruppe__titel,
[data-fehlt] .fb-gruppe:has(.fb-zeile:placeholder-shown) .fb-gruppe__titel,
[data-fehlt] .fb-gruppe:has(select:invalid) .fb-gruppe__titel { color: var(--fb-fehler); }
/* Notice on how results are used, start screen (Yao, 02.11.) */
.fb-hinweis { max-width: 620px; margin-top: 6px; padding: 14px 20px; border-radius: 12px; background: rgba(245, 244, 240, .08); font: 400 15px/1.55 var(--font-body); color: var(--cc-n-200); }

/* Code page in front of the questionnaires (Pascal, 02.11.) */
.fb-code { display: grid; gap: 10px; width: min(100%, 420px); margin-top: 12px; }
.fb-code .fb-gruppe__titel { text-align: left; }
.fb-code__feld { height: 60px; font: 700 22px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; }

/* Honeypot _gotcha: fuer Menschen unsichtbar, fuer Bots ein Feld */
.fb-falle { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* Feedback-Knopf im Fuss */
.fuss__spalte a.knopf { margin-top: 16px; height: 48px; font: 600 15px/1 var(--font-body); color: var(--knopf2-schrift); }
.fuss__spalte a.knopf:hover { color: var(--knopf2-schrift); }

@media (max-width: 799px) {
  .fb-wege { grid-template-columns: 1fr; gap: 16px; }
  .fb-weg { min-height: 300px; padding: 22px 22px 24px; border-radius: 20px; }
  .fb-weg__pfeil { width: 52px; height: 52px; right: 20px; bottom: 20px; }
  .fb-start { min-height: calc(100svh - 68px); }
  .fb-bogen { min-height: calc(100svh - 68px); }
  /* Pati 28.10.: am Handy mittig statt oben angeklebt. Unten bleibt Platz
     fuer Zurueck und Weiter, oben fuer die Nummer. */
  .fb-form[data-stepper] .fb-schritt { min-height: calc(100svh - 72px); justify-content: center; padding: 64px 0 96px; }
  .fb-nummer { top: 20px; font-size: 20px; }
  .sterne label { width: 58px; }
  /* Six stars fit on a 320 px phone too */
  .sterne__reihe:has(.sterne__extra) label { width: min(50px, calc((100vw - 72px) / 6)); }
  .sterne .sterne__extra { margin-left: 6px; }
  .fb-wahl label { min-height: 48px; font-size: 16px; }
  .fb-text { font-size: 19px; min-height: 104px; }
  .fb-datenschutz summary { padding: 16px 20px; }
  .fb-datenschutz p { padding: 0 20px 18px; }
  .fb-steuerung { bottom: 16px; }
  body:has(.fb-steuerung:not([hidden])) .fb-recht { padding-bottom: calc(16px + 48px + 16px); }
}
@media (max-width: 380px) { .sterne label { width: 54px; } }
@media (prefers-reduced-motion: reduce) {
  .fb-weg, .fb-weg:hover { transform: none; }
  .fb-weg__sterne span, .fb-danke__zeichen { animation: none; }
  .fb-fortschritt span, .fb-datenschutz summary::after { transition: none; }
}

/* Feedback-Abschnitt auf der Startseite (Pati 28.10.): dieselben Karten wie
   in der Feedback-Uebersicht, kleiner. Auf Papier ist die Lehrkraefte-Karte
   weiss (Regel 2c), die Schueler-Karte bleibt gruen. */
.rueckmeldung__raster { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.rueckmeldung h2 { font: var(--he-h2); letter-spacing: -0.025em; margin: 14px 0 0; }
.rueckmeldung p { margin-top: 18px; max-width: 460px; font: 400 17px/1.55 var(--font-body); color: var(--cc-n-800); }
.rueckmeldung__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rueckmeldung .fb-weg { grid-template-rows: auto 1fr auto; min-height: 280px; padding: 24px 24px 26px; border-radius: 20px; }
.rueckmeldung .fb-weg--lehrkraefte { background: #fff; }
.rueckmeldung .fb-weg__titel { max-width: none; font-size: clamp(24px, 2.2vw, 32px); padding-right: 64px; }
.rueckmeldung .fb-weg__sterne span { width: clamp(28px, 2.6vw, 38px); }
.rueckmeldung .fb-weg__pfeil { width: 52px; height: 52px; right: 22px; bottom: 22px; }
@media (max-width: 1023px) {
  .rueckmeldung__raster { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 599px) {
  .rueckmeldung__wege { grid-template-columns: 1fr; gap: 14px; }
  .rueckmeldung .fb-weg { min-height: 0; gap: 18px; }
}

/* Coming soon (Werft 27.10., Pati): Kennzeichen fuer Bereiche, die im MVP
   noch nicht nutzbar sind. Steht ueber der Ueberschrift, Violett auf hellen
   Flaechen, Gruen auf Marine. */
.bald {
  display: block; width: fit-content; margin-bottom: 14px; padding: 7px 14px; border-radius: 999px;
  background: var(--cc-violett); color: var(--cc-blau-1);
  font: 700 13px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
}
.sektion--violett .bald { background: #fff; }
.sektion--marine .bald { background: var(--cc-gruen); }
.courage .bald { margin-bottom: 22px; background: var(--cc-violett); }
.foerder__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* Warnung beim Verlassen eines angefangenen Feedbacks (Pati 28.10.) */
.fb-warnung {
  width: min(calc(100% - 32px), 440px); padding: 32px 30px 28px; border: 0; border-radius: 20px;
  background: var(--cc-weiss); color: var(--cc-blau-1); text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.fb-warnung[open] { animation: fbWarnungAuf 320ms cubic-bezier(.2, .8, .2, 1); }
.fb-warnung::backdrop { background: rgba(3, 26, 128, .55); backdrop-filter: blur(3px); }
@keyframes fbWarnungAuf { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.fb-warnung__zeichen {
  display: block; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--cc-gruen); position: relative;
}
.fb-warnung__zeichen::after {
  content: "!"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 30px/1 var(--font-display); color: var(--cc-blau-1);
}
.fb-warnung h2 { font: 800 clamp(22px, 2.4vw, 26px)/1.15 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.fb-warnung p { margin-top: 10px; font: 400 16px/1.5 var(--font-body); color: var(--cc-n-800); }
.fb-warnung__wege { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
.fb-warnung__gehen {
  border: 0; background: none; padding: 8px 4px; cursor: pointer;
  font: 600 15px/1.3 var(--font-body); color: var(--cc-blau-1); text-decoration: underline; text-underline-offset: 3px;
}
.fb-warnung__gehen:hover { color: var(--cc-blau-2); }
@media (prefers-reduced-motion: reduce) { .fb-warnung[open] { animation: none; } }

/* O-Toene unter dem Hero (Werft 91225tdcqrxg24, 30.10.): drei Absender,
   drei Karten in eigener Farbe. Schulen Marine, Lehrkraefte Weiss, Eltern
   Gruen; dazu je Porträt und Absender, damit man auf einen Blick sieht, wer
   spricht. Die grosse Zahl traegt die Aussage. */
.otoene__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.oton {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; align-content: start;
  padding: 28px 28px 26px; border-radius: 20px; background: #fff; color: var(--cc-blau-1);
}
.oton--schulen { background: var(--cc-blau-1); color: var(--cc-weiss); }
.oton--eltern { background: var(--cc-gruen); }
.oton__absender { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.oton__absender b { display: block; font: 700 17px/1.2 var(--font-display); }
.oton__absender b + span { display: block; font: 400 14px/1.3 var(--font-body); opacity: .8; }
.oton__bild { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--cc-weiss-3); }
.oton__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
.oton__zahl { font: 800 clamp(48px, 5vw, 72px)/1 var(--font-display); letter-spacing: -0.035em; }
.oton--schulen .oton__zahl { color: var(--cc-gruen); }
.oton--lehrkraefte .oton__zahl { color: var(--cc-blau-2); }
.oton__text { font: 600 18px/1.4 var(--font-body); }
.oton__zitat { margin: 0; font: 400 16px/1.5 var(--font-body); font-style: italic; }
.oton__quelle { font: 400 13px/1.4 var(--font-body); opacity: .75; }
@media (max-width: 1023px) { .otoene__raster { grid-template-columns: 1fr; gap: 16px; } .oton { padding: 24px 22px; } }

/* Entwurf Reihenfolge Startseite (30.10., nur intern): Hinweisleiste oben
   und „Sicher für Ihre Klasse“ als eigene Sektion */
.entwurf-leiste { padding: 14px var(--gut); background: var(--cc-blau-1); color: var(--cc-weiss); }
.entwurf-leiste .inhalt { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 15px/1.45 var(--font-body); }
.entwurf-leiste b { color: var(--cc-gruen); }
.entwurf-leiste a { color: var(--cc-gruen); }
.sicher h2 { font: var(--he-h2); letter-spacing: -0.025em; color: var(--cc-blau-1); margin-bottom: 32px; }
.sicher .sicherleiste { margin-top: 0; }

/* Werft 30.10. (Lisa): kleines „>“ vor der Zahl; Testsendung unter den drei
   Schritten als gruener Streifen mit einem Knopf */
.oton__vor { font-size: .5em; vertical-align: .35em; margin-right: .08em; letter-spacing: 0; }
.schritte__test {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 36px; padding: 18px 18px 18px 26px; border-radius: 16px; background: var(--cc-gruen);
}
.schritte__test p { font: 700 clamp(18px, 1.6vw, 22px)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--cc-blau-1); }
@media (max-width: 599px) { .schritte__test { padding: 22px 20px; } }

/* --- Hilfsklassen (werkzeug/skala.py) --- */
/* Ersetzen Inline-Styles. !important, weil sie vorher als style="" gewonnen haben. */
.ar-1-1 { aspect-ratio: 1 / 1 !important; }
.ar-16-9 { aspect-ratio: 16 / 9 !important; }
.c-default { cursor: default !important; }
.c-gruen { color: var(--cc-gruen) !important; }
.c-gruen-text { color: var(--gruen-text) !important; }
.c-n200 { color: var(--cc-n-200) !important; }
.c-n600 { color: var(--cc-n-600) !important; }
.c-n800 { color: var(--cc-n-800) !important; }
.c-weiss { color: var(--cc-weiss) !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.f-wrap { flex-wrap: wrap !important; }
.fs-15 { font-size: 15px !important; }
.fs-17 { font-size: 17px !important; }
.fw-400 { font-weight: 400 !important; }
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-14-28 { gap: 14px 28px !important; }
.gap-14-32 { gap: 14px 32px !important; }
.gap-20 { gap: 20px !important; }
.ls-eng { letter-spacing: -0.025em !important; }
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-28 { margin-bottom: 28px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-36 { margin-bottom: 36px !important; }
.mb-44 { margin-bottom: 44px !important; }
.mt--16 { margin-top: -16px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-28 { margin-top: 28px !important; }
.mt-32 { margin-top: 32px !important; }
.mt-36 { margin-top: 36px !important; }
.mt-4 { margin-top: 4px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-44 { margin-top: 44px !important; }
.mt-76 { margin-top: 76px !important; }
.mt-8 { margin-top: 8px !important; }
.mw-260 { max-width: 260px !important; }
.mw-320 { max-width: 320px !important; }
.mw-520 { max-width: 520px !important; }
.mw-620 { max-width: 620px !important; }
.mw-640 { max-width: 640px !important; }
.mw-660 { max-width: 660px !important; }
.mw-720 { max-width: 720px !important; }
.mw-760 { max-width: 760px !important; }
.mw-900 { max-width: 900px !important; }
.r-16 { border-radius: 16px !important; }
.raster-240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.raster-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
.raster-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
.spalten-3 { grid-template-columns: repeat(3, 1fr) !important; }
.t-body { font: var(--he-body) !important; }
.t-h2 { font: var(--he-h2) !important; letter-spacing: -0.025em !important; }
.t-klein { font: 400 15px/1.5 var(--font-body) !important; }
.t-lead { font: var(--he-lead) !important; }
/* --- Ende Hilfsklassen --- */

/* --- Einblenden: Kurve und Staffelung --------------------------------------
   Steht bewusst als letzte Regel der Datei - neue Bloecke gehoeren DAVOR. Karten haben eine eigene
   transition fuer den Hover-Effekt; die wuerde diese hier sonst
   ueberschreiben, weil beide Regeln gleich stark sind und die spaetere
   gewinnt. Sobald ein Element eingeblendet ist, nimmt das Skript das
   Attribut wieder weg - dann gilt fuer den Hover wieder die kurze Kurve
   ohne Verzoegerung. */
[data-auf] {
  transition:
    opacity var(--dur-auf) var(--ease-weich),
    transform var(--dur-auf) var(--ease-weich);
  transition-delay: calc(var(--auf-i, 0) * 70ms);
}
[data-auf="nein"] { opacity: 0; transform: translateY(18px); }
[data-auf="ja"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-auf] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Werft h06s4od0jopcip (Lisa 02.11.): on the start page each safety item links
   to the contact section, so the whole card is the link */
.sicherleiste li:has(> a) { padding: 0; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.sicherleiste li > a { display: grid; gap: 14px; align-content: start; height: 100%; padding: 24px; border-radius: inherit; color: inherit; text-decoration: none; }
.sicherleiste li:has(> a:hover) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(3, 26, 128, .12); }

/* Werft wi04f0mf8sgp5n (Lisa 02.11.): logo row on white above the footer; each logo gets
   its own height so they look equally heavy. Wide screens spread the row over the full
   content width like the footer columns; below that a grid of three, then two columns
   instead of a ragged wrap (a6zmssw6x2xey2, 03.11.: fifth logo Youth & Arts). */
.fuss__partner { margin-inline: calc(-1 * var(--gut)); padding: 36px var(--gut); background: #fff; }
.fuss__partner-reihe { display: grid; grid-template-columns: repeat(3, max-content); align-items: center; gap: 28px 64px; max-width: var(--inhalt-weit); margin: 0 auto; padding: 0; list-style: none; }
.fuss__partner-reihe a { display: inline-flex; transition: opacity var(--dur-fast) var(--ease-out); }
.fuss__partner-reihe a:hover { opacity: .7; }
.fuss__partner img { display: block; width: auto; }
.fuss__partner-cc { height: 80px; }
.fuss__partner-ministerium { height: 56px; }
.fuss__partner-bpb { height: 52px; }
.fuss__partner-sparkasse { height: 42px; }
.fuss__partner-ya { height: 48px; }
/* 1280 instead of 1200: five logos need about 1000px, a Windows scrollbar eats 15px of it */
@media (min-width: 1280px) {
  .fuss__partner-reihe { display: flex; justify-content: space-between; column-gap: 40px; }
}
@media (max-width: 1023px) {
  .fuss__partner-reihe { gap: 24px 40px; }
  .fuss__partner-cc { height: 64px; }
  .fuss__partner-ministerium { height: 44px; }
  .fuss__partner-bpb { height: 42px; }
  .fuss__partner-sparkasse { height: 34px; }
  .fuss__partner-ya { height: 38px; }
}
@media (max-width: 767px) {
  .fuss__partner-reihe { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 599px) {
  .fuss__partner { padding: 28px var(--gut); }
  .fuss__partner-reihe { gap: 22px 24px; }
  .fuss__partner-cc { height: 54px; }
  .fuss__partner-ministerium { height: 36px; }
  .fuss__partner-bpb { height: 34px; }
  .fuss__partner-sparkasse { height: 28px; }
  .fuss__partner-ya { height: 32px; }
}
@media (max-width: 374px) {
  .fuss__partner-reihe { grid-template-columns: max-content; }
}