/* ============================================
   Breuer Vertrieb – D2D Recruiting Landingpage
   ============================================ */

:root {
  --ink-950: #05170f;
  --ink-900: #092518;
  --ink-800: #0e3a25;
  --ink-700: #155738;
  --ink-600: #237b52;
  /* Grüntöne aus dem Logo: dunkler Schriftzug und helles Blatt.
     Farbwelt „Waldgrün“, im Style Guide ausgewählt (style-guide.html). */
  --accent: #17663f;        /* Markengrün – Flächen, Icons, Deko */
  --accent-bright: #43a06a; /* helles Grün – Akzente auf dunklem Grund */
  --accent-deep: #0d472a;   /* tiefes Grün */
  --accent-glow: rgba(67, 160, 106, 0.45);

  /* Anders als das frühere Gelb wäre --accent als Textfarbe brauchbar
     (7.0:1 auf Weiß). Für Fließtext und kleine Icons trotzdem diese
     dunklere Stufe: 9.4:1, und sie hält den Abstand zu den Flächen,
     die --accent selbst belegt. */
  --accent-text: #0d5133;

  /* Haken in Aufzählungen. Früher ein eigenes Grün, weil die Marke gelb
     war und Grün allein "erfüllt" bedeutete. Jetzt ist Grün die Marke –
     ein zweiter, leicht abweichender Grünton säße daneben wie ein
     Versehen. Deshalb derselbe Ton wie Akzenttext. */
  --check: var(--accent-text);
  --white: #ffffff;
  /* Heller Grünton am Übergang vom Hero in den Ablauf: der Hero blendet
     nach unten darauf aus, der Ablauf beginnt damit. Beide Seiten der
     Naht tragen denselben Ton, sonst bricht dort die Farbtemperatur. */
  --tint: #eef5f0;
  --gray-50: #f8faf9;
  --gray-100: #f2f6f4;
  --gray-200: #e1eae6;
  --gray-400: #9fbbae;
  --gray-500: #699681;
  --gray-600: #466355;

  /* System UI stack (Apple-like; no bundled font files) */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Ecken: „Weich“ aus dem Style Guide. Zwei Stufen, mehr nicht:
     --radius-box trägt jede Karte, jedes Panel, jedes Bild – überall
     derselbe Wert, damit die Seite eine einzige Handschrift hat.
     --radius-sm ist ausschließlich für Teile, die *in* einer Karte
     liegen (Felder, Chips, kleine Hinweise). Gleich groß dürfen die
     nicht sein: Eine Innenecke mit demselben Radius wie die Außenecke
     wirkt neben ihr zu rund, weil sie auf kürzerer Kante sitzt. */
  --radius-box: 14px;
  --radius-sm: 10px;

  --nav-height: 72px;
  --container: min(1180px, calc(100% - 2rem));

  /* Vertikaler Rhythmus: jede .section nutzt padding-block: var(--section-y).
     Der Abstand zwischen zwei Sections ist damit immer exakt 2 x --section-y.
     Nicht mit Multiplikatoren arbeiten – nur diesen Wert je Breakpoint setzen. */
  --section-y: clamp(3.5rem, 6.5vw, 6rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Eine echte Feder lässt sich nicht als cubic-bezier schreiben – die
     überschwingt und pendelt aus. linear() nähert dafür eine beliebige
     Kurve aus Stützpunkten an. Diese hier ist die Sprungantwort eines
     gedämpften Schwingers (Dämpfung 0.8, Frequenz 4.5), auf 32 Punkte
     abgetastet: 0,9 % Überschwingen – gut 4 px auf der Schiene –, danach
     setzt sie sich. Mit Frequenz 8 war sie nach der Hälfte der Strecke
     fertig und stand die restliche Zeit still.

     32 Stützpunkte: 1 px Abweichung in der Bewegungsphase. Am Ende muss
     sie auf den Keyframe-Wert einrasten – die Feder steht dort von
     selbst noch auf 1,009. Das sind 3,7 px über 145 ms und liest sich
     als Setzen, nicht als Sprung.

     Nicht --spring nehmen: dessen 1.56 überschwingt um rund 10 %, auf
     der Schiene wären das 48 px – der Punkt liefe sichtbar über sein
     Ziel hinaus. Hier sind es gut 4 px, weniger als der halbe Endpunkt. */
  --feder: linear(
    0, 0.0092, 0.034, 0.0709, 0.1168, 0.1691, 0.2255, 0.2843, 0.3438,
    0.403, 0.4608, 0.5165, 0.5695, 0.6194, 0.6661, 0.7092, 0.7488,
    0.7848, 0.8174, 0.8466, 0.8727, 0.8958, 0.916, 0.9337, 0.949,
    0.9621, 0.9732, 0.9826, 0.9903, 0.9967, 1.0019, 1.006, 1
  );
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.22s;
  --dur-md: 0.35s;
}

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

/* muss Klassenregeln wie `.apply-step { display: block }` schlagen */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* etwas Luft unter dem Header, damit Sprungziele nicht am Rand kleben */
  scroll-padding-top: calc(var(--nav-height) + 1.25rem);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `clip` statt `hidden`: verhindert, dass das Wurzelelement zum Scroll-Container
   wird. `hidden` auf <body> erzeugte hier Scroll-Ruckeln und brach position:sticky. */
@supports (overflow: clip) {
  html { overflow-x: clip; }
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.47;
  color: var(--gray-600);
  background: var(--white);
}

/* Scroll-Sperre für Modal und Mobile-Menü: position:fixed statt overflow:hidden,
   weil iOS Safari overflow:hidden auf <body> ignoriert. Der Offset wird per JS
   gesetzt und beim Schließen wieder zurückgescrollt. */
body.is-scroll-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow-y: scroll;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10000;
  transform: translate(-50%, -150%);
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--ink-900);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform var(--dur-md) var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { width: var(--container); margin-inline: auto; }

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1rem;
}

/* Senkrechter Strich vor der Marke – das wiederkehrende Zeichen der Seite.
   Er steht im Ruhezustand, wächst aber mit, wenn der Abschnitt eingeblendet
   wird. Deshalb der Umweg über .reveal statt einer Animation im Grundzustand. */
.section__eyebrow::before {
  content: "";
  flex: none;
  width: 3px;
  height: 1em;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  transform-origin: bottom;
}

.section__eyebrow--light::before {
  background: linear-gradient(180deg, var(--white), var(--accent-bright));
}

.reveal .section__eyebrow::before { transform: scaleY(0); }
.reveal.is-visible .section__eyebrow::before {
  transform: scaleY(1);
  transition: transform 0.55s var(--spring) 0.14s;
}

.section__eyebrow--light { color: var(--accent-bright); }

.section__title {
  position: relative;
  font-family: var(--font-sans);
  font-size: clamp(2.125rem, 4.75vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.07;
  color: var(--ink-900);
  margin-bottom: 1.35rem;
}

.section__title--editorial { font-size: clamp(2.5rem, 5.5vw, 4rem); }

/* Die Linie unter der Überschrift zieht sich beim Einblenden auf. Sie folgt
   der Textausrichtung: bei zentrierten Köpfen sitzt sie mittig. */
.section__title::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin-top: 1.15rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transform-origin: left;
}

.section__header--center .section__title::after { margin-inline: auto; }

.section__title--light::after {
  background: linear-gradient(90deg, var(--accent-bright), var(--white));
}

.reveal .section__title::after { transform: scaleX(0); }
.reveal.is-visible .section__title::after {
  transform: scaleX(1);
  transition: transform 0.75s var(--ease) 0.22s;
}
.section__title--light { color: var(--white); }

.text-gradient {
  background: linear-gradient(135deg, var(--ink-800) 0%, var(--accent-text) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Logo ───────────────────────────────────────────────────
   Zwei Fassungen liegen im Markup, umgeschaltet wird per CSS:
   oben über dem hellen Hero die dunkle, auf dem dunklen Header-
   Balken und im Footer die helle. Der Wechsel läuft über opacity
   auf gestapelten Bildern, damit nichts springt.

   Beide Dateien liegen auf derselben Leinwand (552×154) und sind so
   ineinander eingepasst, dass die Wortmarke in beiden gleich groß ist
   und an derselben Stelle sitzt. Die gelieferten Fassungen sind nämlich
   nicht dasselbe Lockup – bei gleicher Gesamthöhe wäre die Schrift der
   hellen rund 22 % größer. Neu eingespielte Logos deshalb wieder
   normalisieren, nicht einfach ersetzen.
   ------------------------------------------------------------ */
.logo {
  position: relative;
  display: inline-grid;
  line-height: 0;
}

.logo picture {
  grid-area: 1 / 1;
  display: block;
}

.logo__img {
  display: block;
  height: 44px;
  width: auto;
  transition: opacity var(--dur-md) var(--ease);
}

/* gestapelt: beide Fassungen liegen übereinander, nur eine ist sichtbar */
.nav__logo .logo__img--light { opacity: 0; }
.nav__logo .logo__img--dark  { opacity: 1; }

.nav--scrolled .nav__logo .logo__img--light { opacity: 1; }
.nav--scrolled .nav__logo .logo__img--dark  { opacity: 0; }

/* Footer trägt nur die helle Fassung */
.logo--light-only .logo__img { height: 38px; }

/* ─── Buttons ────────────────────────────────────────────────
   Eine CTA-Farbe für die ganze Seite. Vorher war der Primär-Button
   weiß – auf den hellen Sections (gray-50) verschwand er dadurch
   fast im Hintergrund. Blau trägt auf hell wie auf dunkel.
   ------------------------------------------------------------ */
.btn {
  position: relative;
  /* hält den Lichtblitz von .btn--primary in der Knopfform */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  border-radius: 100px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-md) var(--ease),
    background var(--dur-md) var(--ease),
    color var(--dur-md) var(--ease),
    border-color var(--dur-md) var(--ease);
  white-space: nowrap;
}

.btn--sm { min-height: 40px; padding: 0.5rem 1.15rem; font-size: 0.8125rem; }
.btn--lg { min-height: 56px; padding: 1.05rem 2.25rem; font-size: 1.0625rem; }
.btn--full { width: 100%; }

.btn--primary {
  /* Farbverlauf laut Style-Guide-Auswahl: tief -> Marke -> hell, diagonal.
     Umgekehrt zum früheren Gelb trägt Grün jetzt weiße Schrift – dunkle
     Schrift käme auf diesen Tönen nur auf 1.8:1. Der helle Ton sitzt
     bewusst erst ab 88 %: dort steht keine Schrift mehr. Über der Fläche,
     die die Beschriftung wirklich bedeckt, sind es 4.7 bis 7.0:1. */
  background: linear-gradient(122deg, #0e3b26 0%, #17663f 55%, #2a8256 88%, #43a06a 100%);
  color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(14, 58, 37, 0.28),
    0 8px 24px rgba(45, 136, 89, 0.32);
}

/* Der Lichtblitz aus dem Logo, als Bewegung: ein schmaler Streifen zieht
   einmal quer über den Knopf. Nur bei Zeigegeräten – auf dem Phone gibt es
   kein Hover, dort liefe er nach jedem Tippen und würde nur stören. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      104deg,
      transparent 34%,
      rgba(255, 255, 255, 0.26) 48%,
      transparent 62%
    );
    transform: translateX(-115%);
    pointer-events: none;
  }

  .btn--primary:hover::after {
    transform: translateX(115%);
    transition: transform 0.78s var(--ease);
  }
}

/* Für den Einsatz auf Foto-/Dunkelflächen, wo Weiß mehr Kontrast bringt. */
.btn--light {
  background: var(--white);
  color: var(--ink-900);
  box-shadow:
    0 1px 2px rgba(5, 23, 15, 0.2),
    0 10px 30px rgba(5, 23, 15, 0.28);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 2px 4px rgba(14, 58, 37, 0.3),
      0 16px 38px rgba(45, 136, 89, 0.42);
  }

  .btn--light:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(5, 23, 15, 0.22),
      0 18px 42px rgba(5, 23, 15, 0.34);
  }

  .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
  }

  .btn:active {
    transform: translateY(0) scale(0.985);
  }
}

/* Auf Touch nur das Eindrücken – ohne Hover-Anhebung, die dort hängen bleibt. */
@media (hover: none) {
  .btn:active { transform: scale(0.975); }
}

.btn[disabled],
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dezenter Puls auf dem Haupt-CTA. Läuft als eigene Ebene, damit die
   Animation nicht mit den box-shadow-Übergängen des Buttons kollidiert. */
.btn--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(67, 160, 106, 0.55);
  animation: btnPulse 3.2s var(--ease) infinite;
}

@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(67, 160, 106, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(67, 160, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 160, 106, 0); }
}

/* ─── Nav ────────────────────────────────────────────────────
   Der Header liegt fix über dem Inhalt. Zwei Dinge lösen das
   frühere Scroll-Problem:
   1. Der Hintergrund liegt in einem ::before und wird nur über
      `opacity` ein-/ausgeblendet. Vorher wurde `background` +
      `backdrop-filter` direkt umgeschaltet – das erzwingt bei
      jedem Statuswechsel ein Repaint der ganzen Leiste (sichtbares
      Aufblitzen, Ruckeln auf Mobilgeräten).
   2. Der Header selbst wird nur per `transform` bewegt (Ein-/
      Ausblenden beim Scrollen) – das läuft auf dem Compositor.
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-height);
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s var(--ease);
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* deckend genug, damit heller Text darunter nicht mehr durchscheint */
  background: linear-gradient(180deg, rgba(10, 17, 14, 0.97) 0%, rgba(9, 37, 24, 0.94) 100%);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  backdrop-filter: saturate(150%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease);
  pointer-events: none;
}

.nav--scrolled::before { opacity: 1; }

/* ─── Nav über dem hellen Hero ───────────────────────────────
   Ganz oben liegt der Header transparent auf dem hellen Hero-Bild –
   weiße Schrift wäre dort unlesbar. Solange nicht gescrollt wurde,
   schaltet er deshalb auf dunkle Typo um. Ab .nav--scrolled greift
   wieder die helle Schrift auf dem deckenden dunklen Balken. */
.nav:not(.nav--scrolled):not(.nav--menu-open) .nav__links a {
  color: var(--ink-800);
}

.nav:not(.nav--scrolled):not(.nav--menu-open) .nav__toggle span {
  background: var(--ink-900);
}

/* Zarter heller Verlauf ganz oben: hebt die dunkle Typo vom Hero-Foto ab,
   ohne einen sichtbaren Balken zu erzeugen. Verschwindet, sobald der
   deckende Hintergrund übernimmt. */
.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 100%);
  transition: opacity var(--dur-md) var(--ease);
  pointer-events: none;
}

.nav--scrolled::after { opacity: 0; }

/* ─── Nav bei offenem Mobil-Menü ─────────────────────────────
   Der Header liegt über der Menüfläche (z-index 1000 gegen 999).
   Ungescrollt trug er dort seinen hellen Verlauf für den Hero –
   der oberste Streifen blieb dadurch hell, während darunter alles
   dunkel war. Beide Ebenen werden deshalb ausgeblendet: den
   Hintergrund liefert dann allein die Menüfläche, und der Streifen
   hat exakt denselben Ton wie der Rest. Ein eigener dunkler
   Header-Hintergrund käme nicht infrage – er ist ein anderer Ton
   und zöge unten eine sichtbare Kante. */
.nav--menu-open::before,
.nav--menu-open::after { opacity: 0; }

.nav--menu-open .nav__logo .logo__img--light { opacity: 1; }
.nav--menu-open .nav__logo .logo__img--dark  { opacity: 0; }

/* Beim Runterscrollen weg, beim Hochscrollen sofort zurück. */
.nav--hidden { transform: translate3d(0, -100%, 0); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: var(--container);
  margin-inline: auto;
}

.nav__links { display: flex; gap: 2.25rem; }

.nav__links a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--dur-md) var(--ease);
  position: relative;
}

.nav__links a:hover { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-md) var(--ease), opacity var(--dur-md) var(--ease);
    opacity: 0;
    pointer-events: none;
  }

  .nav__links a:hover::after,
  .nav__links a:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

.nav__logo {
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .nav__logo:hover {
    opacity: 0.92;
    transform: translateY(-1px);
  }
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 28px;
}

.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

.nav__toggle.is-active span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle.is-active span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  padding-top: var(--nav-height);
  background: var(--ink-900);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-md) var(--ease), visibility var(--dur-md);
}

.nav__mobile.is-open { opacity: 1; visibility: visible; }

/* :not(.btn) ist nötig – sonst überschreibt diese Regel die Button-Farbe
   und der CTA wird weiß auf weiß. */
.nav__mobile a:not(.btn) {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
}

.nav__mobile .btn {
  min-height: 48px;
  width: min(100%, 18rem);
  font-size: 1rem;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;

  /* Nur die X-Achse klemmen: der Halo hinter dem Portrait (.hero__portrait
     ::before, inset:-18%) ragt sonst seitlich über den Viewport hinaus.
     Wichtig ist `clip` statt `hidden` – bei `hidden` rechnet der Browser
     die andere Achse von `visible` auf `auto` um und der Hero wird zum
     eigenen Scroll-Container. Mit `clip` bleibt Y auf `visible`, es
     entsteht keine Scrollleiste und kein Inhalt wird abgeschnitten. */
  overflow-x: clip;
}

/* Enthält Bild und Scrim.

   Vorher stand hier kein overflow und der Hero trug `overflow-x: hidden`.
   Ist eine Achse hidden und die andere visible, rechnet der Browser die
   visible-Achse zu `auto` – der Hero wurde dadurch zum eigenen Scroll-
   Container mit einer vom Seitenscroll unabhängigen Scrollleiste.

   Jetzt wird direkt hier abgeklemmt: `clip` erzeugt keinen Scroll-Container,
   `hidden` davor ist der Fallback für Safari < 16. Der Hero-Inhalt bleibt
   unangetastet. */
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--ink-950);
  overflow: hidden;
  overflow: clip;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
}

/* Overlay über dem Hero-Foto.
   Zwei Ebenen: links ein kräftiger warmweißer Verlauf, damit die dunkle
   Typo auf dem hellen, aber detailreichen Foto sicher lesbar bleibt –
   rechts läuft er aus, damit das Motiv sichtbar bleibt. Darüber ein
   zarter Orange-Gelb-Schleier als Markenton. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Ausblendung zur Naht: das Foto lief vorher hart gegen die Kante des
       nächsten Abschnitts. Zuerst gelistet heißt zuoberst gezeichnet. */
    linear-gradient(
      180deg,
      rgba(238, 245, 240, 0) 74%,
      rgba(238, 245, 240, 0.3) 84%,
      rgba(238, 245, 240, 0.72) 92%,
      rgba(238, 245, 240, 0.94) 97%,
      var(--tint) 100%
    ),
    linear-gradient(
      100deg,
      rgba(249, 252, 251, 0.97) 0%,
      rgba(246, 252, 249, 0.93) 30%,
      rgba(244, 251, 248, 0.74) 52%,
      rgba(239, 248, 244, 0.36) 78%,
      rgba(233, 246, 240, 0.16) 100%
    ),
    radial-gradient(ellipse 85% 75% at 16% 45%, rgba(251, 253, 252, 0.82) 0%, transparent 72%);
}

.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Die Ausblendung zur Naht steht hier ein zweites Mal – dieses Element
       liegt über dem Scrim, sonst legten sich die gelben Schleier unten
       rechts wieder über den fertigen Übergang und die Naht wurde dort
       sichtbar (gemessen 13/255 nur an der rechten Kante). */
    linear-gradient(
      180deg,
      rgba(238, 245, 240, 0) 80%,
      rgba(238, 245, 240, 0.5) 90%,
      rgba(238, 245, 240, 0.88) 97%,
      var(--tint) 100%
    ),
    radial-gradient(ellipse 60% 50% at 82% 16%, rgba(67, 160, 106, 0.18) 0%, transparent 64%),
    radial-gradient(ellipse 70% 55% at 92% 88%, rgba(67, 160, 106, 0.12) 0%, transparent 60%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__img {
    animation: hero-img-breathe 26s ease-in-out infinite alternate;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .hero__img { animation: none; }
}

@keyframes hero-img-breathe {
  0%   { transform: scale(1); }
  100% { transform: scale(1.03); }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-height) + clamp(1.5rem, 4vh, 3rem)) 32px clamp(1.5rem, 4vh, 2.5rem);
}

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 64px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
  max-width: 720px;
}

/* Standort-Pill über der Headline */
/* Zwei Wörter brauchen kein schwebendes Kärtchen. Der Ort trägt jetzt
   dieselbe Marke wie jeder Abschnittskopf: flach, bündig, gesperrt. Die
   Nadel ist das führende Zeichen – ein zusätzlicher Balken davor wären
   zwei Marken nebeneinander. */
.hero__location {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hero__location-pin {
  display: inline-flex;
  color: var(--accent-text);
}

/* Der Grad ist auf die Länge der Stellenbezeichnung abgestimmt: mit dem
   früheren Maximum (4.4rem) lief die Zeile fünfmal um und die Headline
   war höher als das halbe Bild. */
.hero__title {
  font-family: var(--font-sans);
  font-size: clamp(2.1rem, 3.3vw, 3.3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 20ch;
  color: var(--ink-900);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  text-wrap: balance;
}

.hero__subhead {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-600);
  max-width: 46ch;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  text-wrap: pretty;
}

.hero__benefits {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.2vw, 0.85rem);
  margin-bottom: clamp(1rem, 1.8vw, 1.35rem);
  max-width: 620px;
}

.hero__benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(0.9375rem, 0.45vw + 0.85rem, 1.0625rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-800);
}

/* Einordnung zum Stundenwert – hält die Angabe konsistent mit der
   Überschlagsrechnung weiter unten auf der Seite. */
/* Steht unter dem CTA und gehört zu ihm – deshalb keine eigene
   Randmarke, die Abstände kommen aus dem gap von .hero__actions. */
.hero__note {
  font-size: 0.8125rem;
  line-height: 1.45;
  /* nicht --gray-500: über dem Foto blieben davon auf dem Phone nur
     4.3:1 übrig, hier sind es rund 6:1 */
  color: #475a51;
  max-width: 42ch;
}

.hero__check {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--check);
}

.hero__check svg {
  display: block;
}

.hero__portrait {
  margin: 0;
  justify-self: center;
  width: 500px;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.hero__portrait::before {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(ellipse 70% 65% at 50% 45%, rgba(67, 160, 106, 0.2) 0%, transparent 68%),
    radial-gradient(ellipse 55% 50% at 50% 72%, rgba(35, 123, 82, 0.14) 0%, transparent 62%);
  filter: blur(38px);
  opacity: 0.8;
  z-index: -1;
  pointer-events: none;
}

/* Das Seitenverhältnis kommt vom Foto (917x831), nicht umgekehrt: mit
   einem eigenen Format schnitte `object-fit: cover` das Bild an, und es
   soll vollständig zu sehen sein. Beim Bildtausch mitziehen. */
.hero__portrait-card {
  position: relative;
  width: 100%;
  aspect-ratio: 917 / 831;
  max-width: 100%;
  border-radius: var(--radius-box);
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  border: 1px solid rgba(35, 123, 82, 0.1);
  box-shadow:
    0 2px 6px rgba(14, 58, 37, 0.06),
    0 16px 40px rgba(14, 58, 37, 0.1),
    0 36px 72px rgba(14, 58, 37, 0.08);
}

.hero__portrait-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(67, 160, 106, 0.4) 38%,
    rgba(35, 123, 82, 0.12) 62%,
    rgba(255, 255, 255, 0.5) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.hero__portrait-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.hero__portrait-card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  transform: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero__portrait-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 2.75rem 1.35rem 1.3rem;
  background:
    linear-gradient(180deg, transparent 0%, rgba(5, 23, 15, 0.55) 32%, rgba(5, 23, 15, 0.92) 100%);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.35;
}

.hero__portrait-caption strong {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.hero__portrait-caption span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.8125rem;
}

/* Die Angaben stehen untereinander, jede in eigener Zeile. Ein
   Trennpunkt davor läse sich wie ein Aufzählungsrest – die Zeilen
   trennen sich schon durch den Umbruch. */

.hero__portrait.reveal {
  transform: none;
  transition: opacity 0.88s var(--ease);
}

.hero__portrait.reveal.is-visible {
  transform: none;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.hero__actions .btn {
  min-height: 48px;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.section-cta .btn {
  min-height: 48px;
}

@media (max-width: 768px) {
  .hero__content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero__layout {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.5rem);
  }

  .hero__copy {
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  /* ─── Rhythmus im Hero ──────────────────────────────────────
     Auf dem Phone läuft der Hero in einer 32px-Stufe: Pille,
     Überschrift, Fließtext und Liste stehen im selben Takt. Enger
     gesetzt drängte sich alles im ersten Bildschirm zusammen.
     Zwei Ausnahmen: unter der Überschrift genügt eine halbe Stufe,
     weil ihre Zeilen ohnehin dicht stehen, und die Zeile unter dem
     CTA gehört zu ihm und bleibt deshalb am nächsten dran.
     ------------------------------------------------------------ */
  .hero__location {
    /* align-self aus der Basisregel überschreiben – auf dem Phone ist
       die Copy zentriert, die Pille saß sonst links. */
    align-self: center;
    margin-bottom: 2rem;
  }

  .hero__title {
    font-size: clamp(2rem, 8.5vw, 2.85rem);
    line-height: 1.06;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  .hero__subhead {
    font-size: clamp(1rem, 3.8vw, 1.125rem);
    max-width: 34ch;
    margin-inline: auto;
    margin-bottom: 2rem;
    text-wrap: pretty;
  }

  /* fit-content statt zentrierter Einzelzeilen: sonst bekommt jede Zeile
     je nach Textlänge eine andere linke Kante und die Liste franst aus. */
  .hero__benefits {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 2rem;
  }

  .hero__benefit {
    justify-content: flex-start;
    text-align: left;
    width: auto;
  }

  .hero__actions {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 0.875rem;
  }

  .hero__note { text-align: center; }

  .hero__portrait {
    justify-self: center;
    width: min(440px, 88vw);
  }

  .section-cta {
    flex-direction: column;
    width: 100%;
  }

  .section-cta .btn {
    width: 100%;
  }
}

/* ─── Vertikaler Rhythmus ────────────────────────────────────
   Eine Regel für alle Sections. Vorher hatte jede Section ihr
   eigenes padding (var(--section-y) * 0.92 / 0.85 / 0.72 …),
   wodurch die Abstände zwischen 257px und 328px schwankten.
   ------------------------------------------------------------ */
.section { padding-block: var(--section-y); }

.section--divider {
  position: relative;
}

.section--divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(35, 123, 82, 0.15), transparent);
  pointer-events: none;
}

.editorial--light { background: var(--white); }

/* Bild rechts, alles andere links. align-items: start statt center –
   die linke Spalte trägt jetzt Text, Liste und Versprechen und ist
   deutlich länger als das Foto; zentriert würde das Foto in der Mitte
   schweben und die Oberkanten liefen auseinander. */
.editorial__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.editorial__intro .editorial__copy {
  max-width: min(44rem, 100%);
}

/* Einspaltig steht das Foto sonst hinter dem CTA – also ganz am Ende des
   Abschnitts, wo es niemand mehr sucht. `display: contents` löst die
   Textspalte auf, ihre Kinder werden selbst zu Rasterzeilen und lassen
   sich einzeln einsortieren. Ohne order stehen Rubrik und Überschrift
   weiterhin zuerst (Standardwert 0).

   Die Grenze ist dieselbe, ab der das Raster einspaltig wird (1024px) –
   liefen die beiden auseinander, gäbe es dazwischen einen Bereich mit
   einer Spalte und dem Foto ganz unten. */
@media (max-width: 1024px) {
  .editorial__intro .editorial__copy { display: contents; }
  .editorial__body { order: 1; }
  .editorial__visual { order: 2; }
  .editorial__copy .section-cta { order: 5; }

  /* Aufgelöste Textspalte heißt: jedes Kind ist jetzt eine eigene
     Rasterzeile und bekommt den Spalten-gap obendrauf. Rubrik und
     Überschrift standen dadurch 48px statt 16px von ihrem Text entfernt.
     Der Abstand kommt hier wieder aus den Elementen selbst – die tragen
     ihn ohnehin (Lernliste, Versprechen, CTA); nur das Foto braucht
     einen eigenen. */
  .editorial__intro { row-gap: 0; }
  .editorial__visual { margin-top: clamp(1.5rem, 4vw, 2rem); }
}

/* Das <figure> ist nur der Rahmen und füllt die Rasterzeile; die Optik
   sitzt am <picture> darin. Nötig fürs Mitlaufen: ein sticky-Element
   klebt nur innerhalb seines Elternkastens, und mit align-items:start
   wäre das <figure> nur so hoch wie das Bild – es löste sich nach
   wenigen hundert Pixeln wieder. */
.editorial__visual {
  margin: 0;
  min-width: 0;
}

.editorial__visual picture {
  display: block;
  border-radius: var(--radius-box);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 8px 32px rgba(5, 23, 15, 0.08);
  transition: box-shadow 0.6s var(--ease);
}

/* Die Textspalte ist deutlich länger als das Foto. Ohne Mitlaufen bliebe
   rechts unten eine große leere Fläche stehen. */
@media (min-width: 1025px) {
  .editorial__visual { align-self: stretch; }

  .editorial__visual picture {
    position: sticky;
    top: calc(var(--nav-height) + 1.5rem);
  }
}

@media (hover: hover) and (pointer: fine) {
  .editorial__visual picture:hover {
    box-shadow:
      0 12px 40px rgba(5, 23, 15, 0.1),
      0 36px 72px rgba(5, 23, 15, 0.06);
  }
}

.editorial__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 1s var(--ease);
}

@media (hover: hover) {
  .editorial__visual picture:hover img {
    transform: scale(1.04);
  }
}

/* Beide Absätze tragen dieselbe Schrift. Vorher war der erste 19px und
   der zweite 16px – zwei Größen in einem zusammenhängenden Fließtext
   lesen sich wie zwei verschiedene Textsorten. */
.editorial__body p {
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--gray-600);
  margin-bottom: 1.1rem;
}

.editorial__lead {
  color: var(--ink-800);
}

.editorial__body em {
  color: var(--ink-800);
  font-style: italic;
}

.editorial__body strong { color: var(--ink-900); font-weight: 600; }

/* In der Textspalte gehört auch der CTA nach links, nicht in deren Mitte. */
.editorial__copy .section-cta { justify-content: flex-start; }

/* Mobil wächst der letzte Punkt beim Haken deutlich stärker als die
   anderen – „erledigt“ soll man sehen. Das Wachsen hängt an --near, läuft
   also mit dem Scroll mit und beim Zurückscrollen wieder zurück; eine
   Transition dagegen würde beim Wegfallen der Klasse zurückschnappen.
   Den Akzent setzt ein einmaliger Ring, der nach außen ausläuft.
   Nur mobil: am Desktop sitzen die Punkte auf der Kurve, dort käme
   ein wachsender Punkt der Linie in die Quere. */
@keyframes task-erledigt {
  from { opacity: 0.8; transform: scale(1); }
  to   { opacity: 0; transform: scale(2); }
}

@keyframes growth-tile-mist {
  0% {
    filter: hue-rotate(-6deg);
  }
  100% {
    filter: hue-rotate(10deg);
  }
}

/* FAQ */
.faq {
  background: var(--gray-50);
}

.section__header--center { text-align: center; margin-bottom: 3rem; }

.faq__list { max-width: 720px; margin-inline: auto; }

.faq__item {
  background: var(--white);
  border-radius: var(--radius-box);
  margin-bottom: 0.65rem;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition:
    box-shadow var(--dur-md) var(--ease),
    border-color var(--dur-md) var(--ease),
    transform var(--dur-md) var(--ease);
}

.faq__item[open] { box-shadow: 0 8px 32px rgba(14, 22, 18, 0.08); }

@media (hover: hover) and (pointer: fine) {
  .faq__item:hover {
    border-color: rgba(159, 187, 174, 0.55);
    transform: translateY(-1px);
  }
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-md) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover {
    background: rgba(248, 250, 249, 0.85);
  }

  .faq__item[open] summary:hover {
    background: rgba(248, 250, 249, 0.5);
  }
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: '+';
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent-text);
  background: var(--gray-100);
  border-radius: 50%;
  transition: transform 0.3s var(--spring), background 0.2s, color 0.2s;
}

.faq__item[open] summary::after {
  content: '−';
  background: var(--ink-900);
  color: var(--white);
  transform: rotate(180deg);
}

.faq__item p {
  padding: 0 1.5rem 1.35rem;
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.47;
}

/* ─── Formularfelder (im Dialog wiederverwendet) ─────────────── */
.form__field { display: block; margin-bottom: 1rem; }

.form__field span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.4rem;
}

.form__field input,
.form__field textarea,
.form__field select {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form__field input::placeholder,
.form__field textarea::placeholder { color: rgba(255, 255, 255, 0.28); }

.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(67, 160, 106, 0.2);
}

/* Feld hat die Schritt-Prüfung nicht bestanden */
.form__field input[aria-invalid="true"],
.form__field select[aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

.form__field textarea { resize: vertical; min-height: 88px; }

.form__field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 4px),
    calc(100% - 12px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

.form__field select option { color: #111; }

.form__group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Radios visuell ersetzt durch .form__option – Fokus bleibt am Input. */
.apply-dialog input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.form__options--triple { grid-template-columns: repeat(3, 1fr); }

/* Für Antworten, die aus ganzen Formulierungen bestehen – nebeneinander
   brächen sie mehrzeilig um und die Schaltflächen würden ungleich hoch. */
.form__options--stack { grid-template-columns: 1fr; }

.form__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  padding: 16px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.form__option:has(input:focus-visible) {
  outline: none;
  border-color: rgba(116, 201, 155, 0.9);
  box-shadow: 0 0 0 3px rgba(116, 201, 155, 0.25);
}

.form__option:has(input:checked) {
  color: var(--white);
  background: linear-gradient(135deg, rgba(67, 160, 106, 0.35), rgba(255, 255, 255, 0.1));
  border-color: rgba(116, 201, 155, 0.9);
  box-shadow:
    0 0 0 1px rgba(116, 201, 155, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.22);
}

@media (hover: hover) and (pointer: fine) {
  .form__option:hover {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--white);
  }

  .form__option:has(input:checked):hover {
    border-color: rgba(116, 201, 155, 0.9);
  }
}

.form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

/* Eigenes Kästchen statt Systemsteuerung: `accent-color` färbt zwar den
   Haken, lässt aber Form, Rahmen und Radius beim Browser. Gestylt wird
   der Input selbst – kein Ersatz-Element, damit Fokus, Tastatur und die
   Trefferfläche unangetastet bleiben. */
.form__checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  margin: 0.05rem 0 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

.form__checkbox input[type="checkbox"]:hover {
  border-color: rgba(116, 201, 155, 0.75);
  background: rgba(255, 255, 255, 0.1);
}

.form__checkbox input[type="checkbox"]:checked {
  background-color: var(--accent-bright);
  border-color: var(--accent-bright);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.6' stroke='%23231508' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.form__checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(67, 160, 106, 0.28);
}

.form__checkbox span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
}

.form__checkbox a { color: var(--accent-bright); text-decoration: underline; }

/* ─── Einwilligungs-Hinweis ──────────────────────────────────
   Bewusst kein modaler Blocker: die Seite lädt vor der Entscheidung
   ohnehin nichts von Dritten, also gibt es keinen Grund, den Inhalt
   zu sperren. Der Banner sitzt unten und lässt sich wegklicken.
   ------------------------------------------------------------ */
.consent {
  position: fixed;
  /* Kompakte Karte unten rechts: eine volle Leiste verdeckte auf dem
     Desktop den Hero-CTA, und genau der soll beim ersten Aufruf
     erreichbar bleiben. Rechts unten ist der Hero frei. */
  inset: auto 0 0 auto;
  z-index: 1200;
  width: min(26rem, 100%);
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.consent__inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-box);
  background: linear-gradient(160deg, #15211b 0%, #092518 60%, #0e3a25 100%);
  border: 1px solid rgba(67, 160, 106, 0.22);
  box-shadow: 0 20px 60px rgba(5, 23, 15, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.consent__title {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.35rem;
}

.consent__text {
  font-size: 0.78125rem;
  line-height: 1.5;
  color: rgba(218, 229, 224, 0.82);
  text-wrap: pretty;
}

.consent__text strong { color: var(--white); font-weight: 600; }

.consent__text a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Einblenden von unten */
@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in 0.45s var(--ease) both; }
}

@keyframes consent-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.consent__actions { display: flex; gap: 0.6rem; }

.consent__btn {
  flex: 1;
  min-height: 44px;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
}

/* Auf dem Phone so flach wie möglich halten: der Hero-CTA liegt dort
   dicht über dem unteren Rand und darf nicht verdeckt werden. */
@media (max-width: 768px) {
  .consent {
    width: 100%;
    padding: 0.65rem;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  }

  .consent__inner {
    gap: 0.7rem;
    padding: 0.9rem 1rem;
  }

  .consent__title {
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
  }

  .consent__text { font-size: 0.75rem; line-height: 1.45; }

  .consent__btn { font-size: 0.78125rem; }
}

/* Widerrufs-Schalter im Footer – sieht aus wie die Links daneben */
.footer__legal-btn {
  font-family: inherit;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--dur-md) var(--ease);
}

.footer__legal-btn:hover { color: var(--white); }

/* ─── Multi-Step-Bewerbungsdialog ────────────────────────────
   Natives <dialog>: Fokusfalle, ESC und Top-Layer kommen vom
   Browser, das spart Custom-JS und ist zuverlässiger.
   ------------------------------------------------------------ */
.apply-dialog {
  width: min(560px, calc(100% - 2rem));
  max-width: none;
  max-height: min(90dvh, 46rem);
  /* Das globale `* { margin: 0 }`-Reset entfernt sonst die
     UA-Zentrierung des Dialogs – er klebt dann oben links. */
  margin: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-box);
  background: linear-gradient(160deg, #15211b 0%, #092518 55%, #0e3a25 100%);
  color: var(--white);
  box-shadow: 0 40px 100px rgba(5, 23, 15, 0.6);
  overflow: hidden;
}

/* Nur im geöffneten Zustand auf flex umstellen – sonst überschreibt
   die Regel das `display: none` des Browsers für geschlossene Dialoge. */
.apply-dialog[open] {
  display: flex;
  flex-direction: column;
}

.apply-dialog::backdrop {
  background: rgba(5, 23, 15, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Sanftes Einblenden, wo unterstützt – sonst erscheint der Dialog direkt. */
@media (prefers-reduced-motion: no-preference) {
  .apply-dialog,
  .apply-dialog::backdrop {
    transition:
      opacity 0.3s var(--ease),
      transform 0.3s var(--ease),
      overlay 0.3s allow-discrete,
      display 0.3s allow-discrete;
  }

  .apply-dialog[open] { opacity: 1; transform: translateY(0); }
  .apply-dialog:not([open]) { opacity: 0; transform: translateY(12px); }
  .apply-dialog[open]::backdrop { opacity: 1; }

  @starting-style {
    .apply-dialog[open] { opacity: 0; transform: translateY(12px); }
    .apply-dialog[open]::backdrop { opacity: 0; }
  }
}

.apply-dialog__form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Der Schließen-Button liegt absolut, nicht als Flex-Nachbar: als
   Nachbar nähme er rechts Platz weg und die zentrierte Überschrift
   säße um seine halbe Breite nach links versetzt. Das seitliche
   Padding ist deshalb symmetrisch und hält ihn frei. */
.apply-dialog__head {
  position: relative;
  padding: 1.5rem 3.5rem 0;
  text-align: center;
}

.apply-dialog__title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

.apply-dialog__subtitle {
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.58);
}

.apply-dialog__close {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--dur-fast), color var(--dur-fast);
}

.apply-dialog__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.apply-dialog__progress {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.5rem 0;
}

.apply-dialog__bar {
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.apply-dialog__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
  transition: width var(--dur-md) var(--ease);
}

.apply-dialog__count {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

.apply-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* verhindert, dass die Seite hinter dem Dialog mitscrollt */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
}

/* Eigener Scrollbalken: der Systembalken sitzt als heller Block auf der
   dunklen Fläche. Der Rahmen aus transparentem Border plus
   background-clip hält den Griff schmal, ohne die Spur zu verengen. */
.apply-dialog__body::-webkit-scrollbar { width: 12px; }

.apply-dialog__body::-webkit-scrollbar-track { background: transparent; }

.apply-dialog__body::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.apply-dialog__body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(116, 201, 155, 0.55);
}

/* Nur für Firefox: sobald `scrollbar-width` gesetzt ist, ignoriert
   Blink die ::-webkit-Regeln oben komplett. */
@supports not selector(::-webkit-scrollbar) {
  .apply-dialog__body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  }
}

.apply-step { display: block; text-align: center; }

/* ─── Ausrichtung im Funnel ──────────────────────────────────
   Frage und Hinweis stehen mittig über dem Schritt, die Eingaben
   darunter laufen linksbündig: Beschriftung, Feldinhalt und
   Einwilligung teilen sich eine Kante.
   ------------------------------------------------------------ */
.apply-dialog .form__field,
.apply-dialog .form__field input,
.apply-dialog .form__field textarea { text-align: left; }

/* Bündig mit den Feldern darüber – vorher saß der Satz als schmaler,
   mittiger Block sichtbar eingerückt. */
.apply-dialog .form__checkbox {
  justify-content: flex-start;
  margin-top: 1.25rem;
  text-align: left;
}

.apply-step__question {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--white);
  /* Abstand zum Schrittinhalt. Folgt ein Hinweis, zieht der ihn wieder
     zusammen – nicht jeder Schritt hat einen. */
  margin-bottom: 1.35rem;
}

.apply-step__hint {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  margin-top: -0.85rem;
  margin-bottom: 1.35rem;
}

@media (prefers-reduced-motion: no-preference) {
  .apply-step { animation: apply-step-in 0.32s var(--ease) both; }
}

@keyframes apply-step-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.apply-dialog__error {
  margin: 0 1.5rem;
  text-align: center;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
  font-size: 0.875rem;
  line-height: 1.45;
}

.apply-dialog__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 23, 15, 0.35);
}

.apply-dialog__back { min-height: 50px; }

.apply-dialog__next,
.apply-dialog__submit {
  flex: 1;
  min-height: 50px;
}

.apply-dialog__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 3rem 1.75rem;
}

.apply-dialog__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  margin-bottom: 0.35rem;
}

.apply-dialog__success-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}

.apply-dialog__success-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  max-width: 30rem;
  margin-bottom: 0.75rem;
}

/* Mobil als Vollbild-Sheet: mehr Platz, wenn die Tastatur aufgeht.
   dvh statt vh, damit die Höhe der eingeblendeten Tastatur folgt. */
@media (max-width: 640px) {
  .apply-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  /* Auf dem schmalen Sheet reicht seitliches Freihalten nicht: die
     zentrierte Überschrift käme dem Schließen-Button auf wenige Pixel
     nahe. Er bekommt deshalb eine eigene Zeile darüber, die Überschrift
     die volle Breite. */
  .apply-dialog__head { padding: 3.5rem 1.25rem 0; }
  .apply-dialog__close { top: 0.7rem; right: 0.85rem; }
  .apply-dialog__nav { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .apply-step__question { font-size: 1.2rem; }
}

/* ─── Rechtliche Seiten (Impressum, Datenschutz) ─────────────
   Dieselbe Kopf- und Fußzeile wie die Startseite, dazwischen eine
   schlichte Textspalte. Die Seiten hatten früher ein eigenes,
   dunkelblaues Inline-Stylesheet – aus der Zeit vor der Umstellung
   auf die Markenfarben.

   Das `padding-top` hält den fest stehenden Header frei: hier gibt es
   keinen Hero, der ihn ohnehin unterlaufen würde.
   ------------------------------------------------------------ */
.legal {
  padding-top: calc(var(--nav-height) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background: var(--white);
}

.legal__inner { max-width: 52rem; }

.legal__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.legal__section + .legal__section {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Platzhalter auf den Rechtsseiten sollen unübersehbar sein. Ein Impressum,
   dem man die fehlenden Angaben nicht ansieht, ist gefährlicher als eines,
   das gar nicht da ist. */
.legal__notice {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1.5px solid var(--accent);
  border-inline-start-width: 5px;
  border-radius: var(--radius-box);
  background: var(--tint);
}

.legal__notice h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.legal__notice p {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-600);
}

.legal__notice p:last-child { margin-bottom: 0; }

.legal__todo {
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  border: 1px dashed var(--gray-400);
  font-variant-numeric: tabular-nums;
}

.legal__section h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: 0.85rem;
}

.legal__section p,
.legal__section li {
  font-size: clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
  line-height: 1.7;
  color: var(--gray-600);
  text-wrap: pretty;
}

.legal__section p + p,
.legal__section ul { margin-top: 0.9rem; }

.legal__section ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
}

.legal__section strong { color: var(--ink-900); font-weight: 600; }

.legal__section a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer */
.footer {
  background: var(--ink-950);
  padding: 3rem 0 2rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 1.5rem;
}

.footer__nav { display: flex; gap: 2rem; }

.footer__nav a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--dur-md) var(--ease);
}

.footer__nav a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
}

.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a {
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--dur-md) var(--ease);
}
.footer__legal a:hover { color: var(--white); }

/* Keyboard focus — visible rings, clipped shapes avoided where needed */
.nav__links a:focus-visible,
.nav__mobile a:focus-visible,
.nav__cta:focus-visible,
.nav__toggle:focus-visible,
.footer__nav a:focus-visible,
.footer__legal a:focus-visible,
.footer__logo:focus-visible,
.nav__logo:focus-visible {
  outline: 2px solid rgba(67, 160, 106, 0.95);
  outline-offset: 3px;
}

.btn:focus-visible {
  outline: 2px solid rgba(67, 160, 106, 0.95);
  outline-offset: 3px;
}

.faq__item summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* ============================================================
   Bewerbungsablauf – die Treppe
   "In drei Schritten zu deinem Einstieg" – also drei Stufen. Die Böden
   liegen auf einer Linie, die Köpfe steigen: Jede Stufe bekommt oben so
   viel mehr Polsterung, wie sie höher liegt. Kein Raster gleich hoher
   Kacheln, keine Kreisziffern.
   ============================================================ */
.process { background: var(--white); }

.process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Böden bündig – nur dadurch entsteht die Treppe. */
  align-items: end;
  gap: clamp(0.65rem, 1.6vw, 1.1rem);
  max-width: 58rem;
  margin-inline: auto;
}

.process__step {
  --polster: clamp(1.1rem, 2.2vw, 1.6rem);
  --tritt: clamp(1.4rem, 3.2vw, 3.25rem);
  display: grid;
  /* Der Text sitzt unten auf der Stufe, nicht in ihrer Mitte. */
  align-content: end;
  gap: 0.35rem;
  padding: var(--polster);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  /* Die Trittkante oben – das einzige farbige Element der Stufe. */
  border-block-start: 3px solid var(--accent);

  /* Höhe und Textmenge sind entkoppelt. Erster Versuch war eine
     wachsende Polsterung oben: Damit trug die Textmenge die Treppe mit,
     und eine umbrechende Überschrift in der Mitte warf sie um. Jetzt
     sind alle Stufen gleich hoch, und nur der Abstand nach unten
     staffelt sie. Die Mindesthöhe muss über dem längsten Text liegen –
     sonst wächst eine Stufe aus der Reihe. */
  min-height: 15rem;
  margin-block-end: calc(var(--stufe) * var(--tritt));
}

.process__num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.process__heading {
  font-size: clamp(1rem, 0.9vw + 0.8rem, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink-900);
}

.process__text { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-600); }

@media (max-width: 780px) {
  /* Untereinander trägt die Höhe die Treppe nicht mehr – dann rückt
     jede Stufe stattdessen weiter ein. */
  .process__list { grid-template-columns: 1fr; gap: 0; }
  .process__step {
    min-height: 0;
    margin-block-end: 0;
    margin-inline-start: calc(var(--stufe) * clamp(0.6rem, 3vw, 1.5rem));
  }
}

/* ============================================================
   Letzter Schritt
   Aufbau wie gehabt: Text links, Panel rechts. Neu ist die Wertung –
   das Panel ist ein helles Blatt auf dunklem Grund statt einer Glaskarte
   mit Leuchtrand. Es liegt auf dem Abschnitt wie ein Formular, das einem
   hingelegt wird.

   Es nennt nur die vier Stichworte, nicht die Fragen selbst. Die stehen
   im Dialog; zweimal derselbe Wortlaut auf einer Seite liest sich wie
   ein Versehen.
   ============================================================ */
.apply {
  position: relative;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.apply__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 58% at 82% 0%, rgba(67, 160, 106, 0.2), transparent 64%),
    radial-gradient(62% 52% at 8% 100%, rgba(23, 102, 63, 0.34), transparent 66%);
  pointer-events: none;
}

.apply__inner {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .apply__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
}

.apply__lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

/* Trennpunkte statt Häkchen: Die Haken stehen auf dieser Seite schon im
   Hero und in der Tafel. */
.apply__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
}

.apply__meta span { display: inline-flex; align-items: center; gap: 1rem; }

.apply__meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-bright);
}

/* ── Das Blatt ─────────────────────────────────────────────── */
.apply-sheet {
  position: relative;
  /* 5 px mehr oben: Der Steg liegt jetzt über dem Blatt statt als
     Rahmen davor, die Polsterung muss ihn also selbst ausgleichen. */
  padding: calc(clamp(1.35rem, 2.6vw, 1.9rem) + 5px) clamp(1.35rem, 2.6vw, 1.9rem)
    clamp(1.35rem, 2.6vw, 1.9rem);
  background: var(--white);
  color: var(--gray-600);
  border-radius: var(--radius-box);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
}

/* Der Steg oben ist das einzige farbige Element des Blatts. Als eigene
   Leiste statt als border-block-start: Ein reiner Oberrahmen läuft in
   der gerundeten Ecke spitz aus und verliert dort seine Höhe – deshalb
   stand das Blatt vorher auf 4 px. Die Leiste nimmt die Rundung oben
   mit und bleibt über die ganze Breite gleich hoch. */
.apply-sheet::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
  background: var(--accent);
  border-radius: var(--radius-box) var(--radius-box) 0 0;
}

.apply-sheet__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.6rem;
}

.apply-sheet__lede {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 1.1rem;
}

/* Haarlinien statt Kästchen – vier Zeilen auf einem Blatt. */
.apply-sheet__steps {
  list-style: none;
  border-block-start: 1px solid var(--gray-200);
  margin-bottom: 1.35rem;
}

.apply-sheet__step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.68rem;
  border-block-end: 1px solid var(--gray-200);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-900);
}

.apply-sheet__num {
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

/* ============================================================
   "Passt Door-to-Door zu dir?" – die geteilte Tafel
   Vorher zwei Karten mit Leuchtrand in einem vollbreiten Schrägband.
   Jetzt eine einzige dunkle Tafel, die im Weißraum steht, geteilt von
   einer Naht in der Mitte: Der Gegensatz steckt in der Teilung, nicht
   in zwei Rahmen.

   Bewusst ohne Dauerbewegung. Hier läuft nichts ab und nichts wächst –
   eine Schleife hätte keinen Anlass. Die Bewegung der Seite trägt der
   Ablauf-Abschnitt; dieser hier trägt den Gegensatz.
   ============================================================ */
.fit-section { background: var(--gray-50); }

.fit {
  max-width: 62rem;
  margin-inline: auto;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-box);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(5, 23, 15, 0.85);
}

.fit__head {
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

.fit__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--white);
  text-wrap: balance;
  margin-bottom: 0.6rem;
}

.fit__intro { font-size: 1rem; font-style: italic; color: rgba(255, 255, 255, 0.6); }

/* Die Naht: eine Linie, keine zwei Rahmen. */
.fit__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.fit__half {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 3.5vw, 2.5rem);
}

.fit__half--no {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
  /* Minimal abgesetzt, damit die Teilung auch ohne die Linie lesbar ist. */
  background: rgba(0, 0, 0, 0.18);
}

.fit__kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}

.fit__half--yes .fit__kicker { color: var(--accent-bright); }

.fit__list { list-style: none; display: grid; gap: 0.9rem; }

.fit__item {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: start;
  gap: 0.85rem;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.fit__item strong { color: var(--white); font-weight: 700; }

/* Gezeichnete Marken statt Abzeichen: Häkchen in Kreisen stehen auf
   dieser Seite schon im Hero und im Ablauf. Ein Haken und ein Strich,
   beide aus derselben Linienstärke. */
.fit__mark {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
}

.fit__mark::before,
.fit__mark::after {
  content: "";
  position: absolute;
  border-radius: 99px;
  background: currentColor;
}

.fit__mark--yes { color: var(--accent-bright); }

/* Ein gedrehtes Eck aus zwei Rändern statt zweier gedrehter Balken: Bei
   Balken müssen Winkel, Länge und Fußpunkt gegeneinander stimmen, sonst
   treffen sich die Enden nicht. Das Eck trifft sich immer. */
.fit__mark--yes::before {
  width: 0.42rem;
  height: 0.78rem;
  left: 0.24rem;
  top: 0;
  background: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(42deg);
}

/* Kein rotes Kreuz: "passt nicht" ist kein Fehler, sondern eine
   Feststellung. Ein waagerechter Strich sagt das ohne Warnfarbe. */
.fit__mark--no { color: rgba(255, 255, 255, 0.42); }

.fit__mark--no::before {
  width: 0.85rem; height: 2px;
  left: 0.12rem; top: 0.5rem;
}

.fit__note {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

.fit__aside {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
}

.fit__subtitle {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--white);
  margin-bottom: 0.85rem;
}

.fit__aside p { max-width: 62ch; font-size: 1rem; line-height: 1.7; margin-bottom: 0.85rem; }
.fit__aside p:last-child { margin-bottom: 0; }
.fit__aside strong { color: var(--white); font-weight: 700; }

@media (max-width: 720px) {
  .fit__split { grid-template-columns: 1fr; }
  .fit__half--no {
    border-inline-start: 0;
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* ============================================================
   Ansprechpartner – der Steckbrief
   Vorher eine Magazin-Doppelseite: Text links, Bild rechts, Häkchen-
   Liste darunter. Jetzt ein Steckbrief – Bild zuerst, daneben die
   Eckdaten als Zeile, ein Zitat und eine nummerierte Liste.

   Wer sich bewirbt, sucht zuerst: Wer ist das? Deshalb steht das Bild
   links und die Eckdaten stehen als <dl>, nicht im Fließtext.
   ============================================================ */
.profil-section { background: var(--white); }

.profil {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .profil { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  /* Das Bild bleibt stehen, während die Angaben daneben durchlaufen. */
  .profil__bild { position: sticky; top: calc(var(--nav-height) + 2rem); }
}

/* Hart geschnitten, mit einem versetzten Block dahinter – kein
   schwebendes Kärtchen mit runden Ecken. */
.profil__bild {
  position: relative;
  margin: 0;
  isolation: isolate;
}

/* Der versetzte Block hinter dem Bild rundet mit: Eine harte Ecke
   neben einer weichen liest sich als Fehler, nicht als Kontrast. */
.profil__bild::before {
  content: "";
  position: absolute;
  inset: auto auto -14px -14px;
  width: 62%;
  height: 62%;
  background: var(--accent);
  border-radius: var(--radius-box);
  z-index: -1;
}

.profil__bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-box);
}

.profil__copy > * + * { margin-top: clamp(1.1rem, 2.2vw, 1.6rem); }

/* Eckdaten als Zeile: gesucht wird hier, nicht gelesen. */
.profil__daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  border-block: 1px solid var(--gray-200);
}

.profil__datum { padding: 0.85rem 0; }
.profil__datum + .profil__datum { padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--gray-200); }

.profil__datum dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.3rem;
}

.profil__datum dd { font-size: 0.98rem; font-weight: 700; color: var(--ink-900); }

/* Das Zitat trägt die Stimme der Person – deshalb größer als der Rest
   und mit der Marke an der Kante, nicht mit Anführungszeichen als Deko. */
.profil__zitat {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
}

.profil__zitat p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-800);
}

.profil__lern-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.9rem;
}

/* Nummeriert und mit Haarlinien statt Häkchen in Kreisen: Die Häkchen
   stehen auf dieser Seite schon im Hero und in der Tafel darüber. */
.profil__lern-list { list-style: none; border-top: 1px solid var(--gray-200); }

.profil__lern-item {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.profil__lern-num {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.profil__schluss { font-size: 1rem; line-height: 1.7; color: var(--gray-600); max-width: 62ch; }

/* ============================================================
   "Dein Ablauf vor Ort" – der Lichtpunkt läuft die Schiene hinunter

   Eine durchgehende Schleife, kein Scroll-Auslöser: Der Punkt wandert
   die Schiene ab, zieht die grüne Spur hinter sich her und schaltet die
   Schritte der Reihe nach an. Am Ende hält der Zustand kurz, blendet ab
   und es beginnt von vorn.

   Als CSS-Keyframes statt als Zeitschleife im Skript: predeterminierte
   Bewegung läuft damit off-main-thread und stockt nicht, während die
   Seite noch lädt. Das Skript hält sie nur an, solange niemand hinsieht.

   Taktplan bei 8 s Umlauf:
     0–58 %   Punkt läuft von oben nach unten, Spur füllt sich mit
     9/29/49 % Schritt 1 / 2 / 3 gehen an
     58–86 %  fertiger Zustand steht
     86–94 %  alles blendet ab
     94–100 % Pause, dann von vorn
   ============================================================ */
.walk-section { background: var(--white); }

.walk {
  position: relative;
  /* Enger als der Container: Die Einrückung läuft nach rechts, der Block
     soll dabei nicht auseinanderfallen. */
  max-width: 50rem;
  margin-inline: auto;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.walk__list { list-style: none; }

/* ── Schiene, Spur, Punkt ──────────────────────────────────── */
.walk__rail,
.walk__trail,
.walk__scan {
  /* Die Schiene spannt nur über die Schritte, nicht über den ganzen
     Container: Oben und unten liegt die Polsterung des ersten und
     letzten Schritts: Ohne diesen Einzug lief die Linie unter dem
     letzten Schritt weiter, neben nichts. Der Wert ist derselbe wie
     `padding-block` von .walk__step – wer den ändert, ändert ihn hier
     mit. */
  --einzug: clamp(1.75rem, 3.5vw, 2.75rem);
  position: absolute;
  inset-block: var(--einzug);
  inset-inline-start: 0;
  width: 2px;
}

/* Alpha statt opacity: Der Endpunkt unten hängt als ::after daran und
   soll seine eigene Deckkraft behalten. */
.walk__rail { background: color-mix(in srgb, var(--gray-400) 55%, transparent); }

/* Der Endpunkt. Die Strecke hört damit auf, statt abgeschnitten zu sein. */
.walk__rail::after {
  content: "";
  position: absolute;
  inset-inline-start: -3px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gray-400) 70%, transparent);
}

/* Flach, nicht als Verlauf: Ein beschnittener Verlauf zeigt sein helles
   Ende erst, wenn die Spur ganz aufgefüllt ist – der Kopf liefe dann
   nicht mit. Den hellen Kopf macht der Punkt. */
.walk__trail { background: var(--accent); }

.walk__scan {
  /* Genau so hoch wie die Schiene – translateY(100%) trägt den Punkt
     damit exakt von deren Anfang bis zu deren Ende. */
  inset-inline-start: 1px;
  width: 0;
  opacity: 0;
}

/* Der Punkt selbst. Er liegt über dem Schweif: ::after malt nach
   ::before, ohne z-index läge der Schweif oben und liefe sichtbar in
   den Punkt hinein. */
.walk__scan::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -7px;
  inset-inline-start: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 4px var(--accent-bright),
    0 0 16px 4px rgba(67, 160, 106, 0.55),
    0 0 30px 8px rgba(67, 160, 106, 0.22);
}

/* Der Schweif dahinter: ein kurzes helles Stück Schiene über dem Punkt,
   das nach oben ausläuft. Er macht die Richtung sichtbar – ein Punkt
   allein sagt nicht, wohin er unterwegs ist. */
.walk__scan::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -84px;
  /* Dieselbe Breite und Mitte wie die Schiene (x 0–2, Mitte 1). */
  inset-inline-start: -1px;
  width: 2px;
  height: 84px;
  background: linear-gradient(180deg, transparent, var(--accent-bright));
  /* Er wächst vom Punkt aus nach oben. Als feste Länge stand er beim
     Start des Umlaufs 84 px über der Schiene – also über der
     Überschrift, außerhalb des Abschnitts. */
  transform-origin: bottom;
  transform: scaleY(0);
}

/* ── Schritte ─────────────────────────────────────────────── */
.walk__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  /* Die Einrückung wächst mit dem Schritt – der Abstand zur Schiene ist
     das Bild für "weiter gelaufen". */
  padding-inline-start: calc(clamp(1.75rem, 4vw, 3.25rem) + var(--step) * clamp(0.75rem, 2.5vw, 2.25rem));
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

.walk__num {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  margin-top: -0.08em;
  /* Ruhezustand ist der fertige: ohne Skript und ohne Bewegungswunsch
     stehen die Ziffern grün. .js-walk nimmt das für die Schleife zurück. */
  color: var(--accent);
}

.walk__heading {
  position: relative;
  font-size: clamp(1.15rem, 1.3vw + 0.95rem, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
}

/* Der Strich unter der Zeile zieht sich auf, wenn das Licht ankommt. */
.walk__heading::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transform-origin: left;
}

/* Der Fließtext bleibt immer voll lesbar. Ein Text, der alle acht
   Sekunden wegblendet, ist ein Ärgernis, kein Effekt. */
.walk__text {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-600);
}

.walk__handoff {
  max-width: 56ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-600);
}

.walk__handoff strong { color: var(--ink-900); font-weight: 700; }

/* ── Die Schleife ─────────────────────────────────────────── */
/* Weg und Deckkraft laufen getrennt. Eine Zeitfunktion wirkt je
   Keyframe-Abschnitt: Lägen beide in einem Satz, hätten Spur und Punkt
   unterschiedliche Abschnitte und die Feder liefe für jeden anders –
   der Punkt wäre nicht mehr auf seiner Spur. So teilen sich beide
   denselben Abschnitt 0–58 % und bleiben deckungsgleich. */
@keyframes walk-trail {
  0%   { clip-path: inset(0 0 100% 0); }
  58%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes walk-trail-blende {
  0%, 86%   { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* Der Schweif im selben Takt wie der Punkt: Er wächst kurz nach dem
   Start heraus und ist weg, bevor der Punkt ausgeht. */
@keyframes walk-tail {
  0%, 2%    { transform: scaleY(0); }
  16%, 56%  { transform: scaleY(1); }
  64%, 100% { transform: scaleY(0); }
}

@keyframes walk-scan {
  0%   { transform: translateY(0); }
  58%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* Der Punkt bleibt am Ziel kurz stehen und geht dann aus – nicht mitten
   in der Bewegung, das sähe nach Abbruch aus. */
@keyframes walk-scan-blende {
  0%, 2%    { opacity: 0; }
  5%, 70%   { opacity: 1; }
  78%, 100% { opacity: 0; }
}

/* Ein Satz Keyframes je Schritt statt eines gemeinsamen mit Versatz:
   Angehen soll versetzt passieren, Abblenden dagegen gemeinsam. Mit
   animation-delay wäre beides verschoben.

   Die Einsatzzeiten sind nicht geschätzt, sondern aus --feder
   zurückgerechnet. Gemessen wurde, auf welchem Anteil der Schiene
   Ziffer und Linie sitzen; gesucht wurde dann, wann die Feder diesen
   Anteil erreicht. Weil die Feder vorne schnell und hinten langsam
   läuft, liegen die Zeiten eng beieinander statt gleichmäßig verteilt –
   in gleichmäßigen Abständen wäre Schritt 3 über eine Sekunde zu spät.
   Zwischen 360 und 1440 px Breite wandern die gemessenen Anteile so
   wenig, dass ein fester Satz Werte reicht (höchstens 0,12 s Abweichung). */

/* Ziffer 1 geht mit dem Punkt an, der bei 2–5 % aufblendet – sie steht
   schon oberhalb seines Startpunkts, es gibt also nichts abzuwarten. */
@keyframes walk-lit-1 {
  0%, 2%    { color: var(--gray-200); }
  5%, 86%   { color: var(--accent); }
  94%, 100% { color: var(--gray-200); }
}

@keyframes walk-lit-2 {
  0%, 14.8%  { color: var(--gray-200); }
  17.8%, 86% { color: var(--accent); }
  94%, 100%  { color: var(--gray-200); }
}

@keyframes walk-lit-3 {
  0%, 28.7%  { color: var(--gray-200); }
  31.7%, 86% { color: var(--accent); }
  94%, 100%  { color: var(--gray-200); }
}

/* Die Linie zieht in dem Moment durch, in dem der Punkt auf ihrer Höhe
   steht – sie sitzt tiefer als die Ziffer, kommt also jeweils kurz nach
   ihr. */
@keyframes walk-underline-1 {
  0%, 7.1%   { transform: scaleX(0); }
  13.1%, 86% { transform: scaleX(1); }
  94%, 100%  { transform: scaleX(0); }
}

@keyframes walk-underline-2 {
  0%, 19%    { transform: scaleX(0); }
  25%, 86%   { transform: scaleX(1); }
  94%, 100%  { transform: scaleX(0); }
}

@keyframes walk-underline-3 {
  0%, 35.6%  { transform: scaleX(0); }
  41.6%, 86% { transform: scaleX(1); }
  94%, 100%  { transform: scaleX(0); }
}

/* Erst mit Skript: ohne JavaScript steht der Abschnitt fertig da. */
/* Die Zeitfunktion steht als eigene Zeile, nicht in der Kurzschreibweise:
   Kennt ein Browser linear() nicht, fällt nur sie aus und die Animation
   läuft mit der Vorgabe weiter – in der Kurzschreibweise wäre die ganze
   Zeile ungültig und es liefe gar nichts. */
.js-walk .walk__trail {
  animation: walk-trail 8s infinite, walk-trail-blende 8s linear infinite;
  animation-timing-function: var(--feder), linear;
}

.js-walk .walk__scan {
  animation: walk-scan 8s infinite, walk-scan-blende 8s linear infinite;
  animation-timing-function: var(--feder), linear;
}

.js-walk .walk__scan::after { animation: walk-tail 8s var(--ease) infinite; }

.js-walk .walk__step:nth-child(1) .walk__num { animation: walk-lit-1 8s linear infinite; }
.js-walk .walk__step:nth-child(2) .walk__num { animation: walk-lit-2 8s linear infinite; }
.js-walk .walk__step:nth-child(3) .walk__num { animation: walk-lit-3 8s linear infinite; }

/* Dieselbe Kurve wie der Punkt, nicht --ease: Die Linie soll nicht nur
   zur richtigen Zeit kommen, sie soll sich auch so bewegen wie er. */
.js-walk .walk__step:nth-child(1) .walk__heading::after { animation: walk-underline-1 8s var(--feder) infinite; }
.js-walk .walk__step:nth-child(2) .walk__heading::after { animation: walk-underline-2 8s var(--feder) infinite; }
.js-walk .walk__step:nth-child(3) .walk__heading::after { animation: walk-underline-3 8s var(--feder) infinite; }

/* Angehalten, solange der Abschnitt nicht im Bild ist – und damit auch
   von vorn, wenn man hinscrollt. Eine Schleife, die niemand sieht, muss
   nicht laufen. */
.js-walk .walk__trail,
.js-walk .walk__scan,
.js-walk .walk__scan::after,
.js-walk .walk__num,
.js-walk .walk__heading::after { animation-play-state: paused; }

.js-walk .walk.is-running .walk__trail,
.js-walk .walk.is-running .walk__scan,
.js-walk .walk.is-running .walk__scan::after,
.js-walk .walk.is-running .walk__num,
.js-walk .walk.is-running .walk__heading::after { animation-play-state: running; }

/* Kein Dauerlauf für wen, der Bewegung abbestellt hat: der fertige
   Zustand ohne Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
  .js-walk .walk__trail,
  .js-walk .walk__scan,
  .js-walk .walk__scan::after,
  .js-walk .walk__num,
  .js-walk .walk__heading::after { animation: none; }

  .js-walk .walk__trail { clip-path: inset(0 0 0 0); }
  .js-walk .walk__scan { display: none; }
  .js-walk .walk__num { color: var(--accent); }
  .js-walk .walk__heading::after { transform: scaleX(1); }
}

/* Startwerte der Schleife – nur mit Skript. Ohne JavaScript bleibt der
   Ruhezustand aus den Grundregeln oben stehen: Spur voll, Ziffern grün,
   Striche gezogen. */
.js-walk .walk__trail { clip-path: inset(0 0 100% 0); }
.js-walk .walk__num { color: var(--gray-200); }
.js-walk .walk__heading::after { transform: scaleX(0); }

@media (max-width: 640px) {
  .walk__step {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
    padding-inline-start: calc(1.25rem + var(--step) * 0.6rem);
  }
  .walk__num { font-size: 2.4rem; }
}

/* ============================================================
   Verdienst – die Rechnung als Zeile
   Vorher eine dunkle Glaskarte mit Leuchtrand und drei Kacheln. Jetzt
   heller Grund und reine Typografie: Die Glieder stehen auf einer Linie,
   die Operatoren dazwischen sind groß und hell. Die Zahlen zählen beim
   Einblenden hoch – eine Bewegung, die die Rechnung selbst vorführt,
   statt sie nur zu dekorieren.
   ============================================================ */
.calc-section { background: var(--gray-50); }

.calc {
  max-width: 1060px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-box);
  /* Die kräftige Oberkante ersetzt den früheren Leuchtrand: ein Zeichen
     statt eines Schimmers ringsum. */
  border-top: 4px solid transparent;
  background-image:
    linear-gradient(var(--white), var(--white)),
    linear-gradient(90deg, var(--accent), var(--accent-bright));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 18px 44px -28px rgba(9, 37, 24, 0.35);
}

.calc__head { text-align: center; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.calc__head .section__title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.calc__head .section__title::after { margin-inline: auto; }
.calc__lede { color: var(--gray-600); font-size: 0.9375rem; }

.calc__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

.calc__term { text-align: center; padding: 0.9rem 0.75rem 1rem; }

/* Gleiche Polsterung wie die anderen Glieder – sonst rutschte die
   Ergebniszahl aus der gemeinsamen Zeile. Ausgezeichnet wird sie über
   Fläche und Farbe, nicht über zusätzlichen Raum. */
.calc__term--result {
  border-radius: var(--radius-sm);
  background: var(--tint);
}

.calc__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.55rem;
}

.calc__term--result .calc__label { color: var(--accent-text); }

.calc__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--ink-900);
  line-height: 1;
}

.calc__approx { font-size: clamp(1rem, 1.6vw, 1.4rem); color: var(--gray-400); margin-inline-end: 0.2rem; }

.calc__num {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.calc__term--result .calc__num { color: var(--accent-text); }

.calc__unit { font-size: clamp(0.85rem, 1.2vw, 1.05rem); font-weight: 600; color: var(--gray-600); }

.calc__per { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--gray-600); margin-top: 0.45rem; }

.calc__note {
  display: block;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--gray-500);
  margin-top: 0.5rem;
}

/* Die Operatoren tragen die Rechnung – groß genug, um sie zu lesen,
   hell genug, um den Zahlen nicht die Schau zu stehlen. */
/* Der Operator gehört auf die Zeile der Zahlen, nicht in die Mitte der
   ganzen Spalte – darunter stehen Bezug und Fußnote unterschiedlich hoch.
   Der Vorlauf entspricht Beschriftung plus halber Ziffernhöhe. */
.calc__op {
  align-self: start;
  padding-top: clamp(2.4rem, 3.4vw, 3.1rem);
  font-size: clamp(1.15rem, 2.4vw, 1.8rem);
  font-weight: 400;
  color: var(--gray-400);
}

@media (max-width: 760px) {
  .calc__row { grid-template-columns: 1fr; gap: 0.35rem; }
  /* Untereinander steht der Operator zwischen den Gliedern – dort ist
     der Vorlauf von oben falsch. */
  .calc__op { align-self: center; padding: 0.15rem 0; }
}

/* Reveal
   Vorher bekam jedes Element denselben Aufwärtsschub. Jetzt trennen sich
   drei Rollen: Überschriften werden aufgedeckt, einzelne Blöcke steigen
   kurz auf, Listen laufen gestaffelt durch – damit ihre Reihenfolge
   lesbar wird statt als Block zu erscheinen. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

.reveal--delay-1 { transition-delay: 0.08s; }
.reveal--delay-2 { transition-delay: 0.17s; }
.reveal--delay-3 { transition-delay: 0.27s; }
.reveal--delay-4 { transition-delay: 0.36s; }

/* Überschriften: die Maske gibt die Zeile von unten frei. Der Endzustand
   greift über den Textkasten hinaus – sonst schneidet die Maske Unterlängen
   und die Linie unter der Überschrift ab. */
.reveal .section__title,
.reveal .hero__title { clip-path: inset(0 0 102% 0); }

.reveal.is-visible .section__title,
.reveal.is-visible .hero__title {
  clip-path: inset(-14% -14% -34% -14%);
  transition: clip-path 0.9s var(--ease) 0.06s;
}

/* Gestaffelte Listen. Der Container selbst blendet nicht mit ein – sonst
   liefe über der Staffelung eine zweite Blende und beides wirkte matschig. */
.reveal--stagger {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal--stagger > * {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.reveal--stagger.is-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 0.11s; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 0.25s; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 0.39s; }
.reveal--stagger.is-visible > *:nth-child(n + 7) { transition-delay: 0.46s; }

/* Wer Bewegung abbestellt hat, bekommt den Endzustand ohne Weg dorthin.
   Das Skript setzt .is-visible dann ohnehin sofort; hier stehen die
   Deko-Teile, die nicht am Skript hängen. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--stagger > * {
    opacity: 1;
    transform: none;
  }

  .reveal .section__title,
  .reveal .hero__title { clip-path: none; }

  .btn--primary::after { display: none; }
}

/* ============================================================
   Responsive
   Breakpoints: 1024 (Tablet) · 768 (Phone) · 480 (klein) · 360 (sehr klein)
   Grundsatz: Auf dem Phone werden CTAs und Tap-Ziele größer, nicht kleiner.
   ============================================================ */

/* ─── Phone ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
    --section-y: clamp(3rem, 7vw, 4rem);
    /* 20px Seitenluft – vorher waren es 12px, das wirkte gedrängt */
    --container: min(1180px, calc(100% - 2.5rem));
  }

  body { line-height: 1.55; }

  /* Navigation */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile { display: flex; }

  .nav__inner { gap: 0.5rem; }

  /* Auf dem Phone trägt der Header nur Logo und Menü. Der CTA steckt im
     aufgeklappten Menü und in jeder Section – eine dritte, dauerhaft
     sichtbare Instanz im Balken gibt es bewusst nicht. */
  .nav__cta { display: none; }

  /* Der Button war nur 10px hoch (zwei Balken + Lücke). Das Padding
     bringt die Trefferfläche auf 44px, ohne die Optik zu ändern. */
  .nav__toggle {
    width: 44px;
    height: 44px;
    padding: 17px 8px;
    margin-right: -8px;
    justify-content: center;
  }

  .nav__mobile a:not(.btn) {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
  }

  /* Wortmarken sind Navigationsziele und waren nur 26px hoch */
  .nav__logo,
  .footer__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  

  

  /* Typografie */
  .section__title { margin-bottom: 1rem; }
  .section__header--center { margin-bottom: 2rem; }

  .editorial__lead {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  /* CTAs: große Fläche, klare Schrift – aber nicht randlos. 75 % der
     Spaltenbreite, mittig; die Fläche bleibt weit über der 44-px-Grenze. */
  .hero__actions,
  .section-cta {
    flex-direction: column;
    width: 100%;
  }

  .nav__mobile .btn { width: min(75%, 18rem); }

  /* Hero */
  .hero {
    min-height: 100svh;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Auf dem Phone liegt die Copy über der Bildmitte – Verlauf von oben
     statt von links, damit sie überall auf dem Foto lesbar bleibt. Die
     Ausblendung zur Naht steht hier mit drin: diese Regel ersetzt den
     ganzen Verlauf, ein separater Layer von oben ginge verloren. */
  .hero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.9) 46%,
        rgba(252, 254, 253, 0.74) 70%,
        rgba(248, 251, 250, 0.8) 86%,
        rgba(241, 248, 245, 0.92) 96%,
        var(--tint) 100%
      );
  }

  .hero__img {
    object-fit: cover;
    object-position: center 24%;
  }

  /* flex-shrink:1 ließ den Inhalt vorher über den Hero hinauslaufen */
  .hero__content {
    flex: 0 0 auto;
    width: 100%;
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 3rem;
  }

  /* Abstand zwischen Copy und Foto – der größte Bruch im Hero, denn
     hier endet der Text und das Bild beginnt. */
  .hero__layout { gap: 3.5rem; }

  

  .form__field input,
  .form__field textarea,
  .form__field select {
    min-height: 52px;
  }

  /* FAQ – größere Trefferfläche */
  .faq__item summary {
    min-height: 56px;
    padding-block: 1.1rem;
  }

  /* Footer – Links brauchen Fläche */
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer__nav {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-left: -0.6rem;
  }

  .footer__nav a,
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.6rem;
  }

  .footer__legal { margin-left: -0.6rem; }
}

/* ─── Kleine Phones ──────────────────────────────────────────
   Nur noch Feinjustierung der Typo-Skala – Layout und Tap-Ziele
   sitzen bereits im 768er-Block.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  :root {
    --nav-height: 56px;
    --section-y: clamp(2.75rem, 9vw, 3.5rem);
    --container: min(1180px, calc(100% - 2.25rem));
  }

  .btn { white-space: normal; text-align: center; }

  .section__title {
    font-size: clamp(1.7rem, 7vw, 2.25rem);
    line-height: 1.12;
  }

  .section__title--editorial { font-size: clamp(1.8rem, 7.4vw, 2.35rem); }

  .editorial__lead { font-size: 1rem; margin-bottom: 1rem; }
  .editorial__body p { margin-bottom: 0.95rem; }

  .hero__img { object-position: center 20%; }

  

  

  

  .faq__item summary {
    font-size: 1rem;
    padding-inline: 1.1rem;
    gap: 0.7rem;
  }

  .faq__item p {
    padding: 0 1.1rem 1.15rem;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .footer { padding: 2.25rem 0 1.5rem; }
}

/* ─── Sehr kleine Phones (iPhone SE & Co.) ──────────────────── */
@media (max-width: 360px) {
  :root { --container: min(1180px, calc(100% - 1.75rem)); }

  .form__options--triple { grid-template-columns: 1fr; }

  

  
  
}

/* ─── Niedrige Viewports im Querformat ──────────────────────── */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; }

  .hero__content {
    padding-top: calc(var(--nav-height) + 1rem);
    padding-bottom: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__img { animation: none !important; }
  .apply-step { animation: none !important; }
  .btn--glow { animation: none !important; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* KI-Kennzeichnung nach Art. 50 KI-VO (EU AI Act).
   Sitzt am unteren Rand der Sektion, die das KI-Bild fuehrt — nicht im Fluss
   direkt unter dem CTA. Muss echter Text bleiben und >= 4,5:1 Kontrast halten. */
#hero, #d2d { position: relative; }
.ai-credit {
  position: absolute;
  left: 0; right: 0; bottom: 1.25rem;
  z-index: 2;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  color: #4a4a4a;
  /* Kein Traeger, dafuer ein Schatten: haelt den Kontrast auch dort ueber
     4,5:1, wo ein heller Bildbereich hinter dem Text liegt. */
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}