/* ==========================================================================
   Archivo, lokal eingebunden

   Vorher kam die Schrift von fonts.googleapis.com, und damit ging bei
   jedem Seitenaufruf die IP-Adresse des Besuchers an Google. Das LG
   München hat dafür am 20.01.2022 Schadenersatz zugesprochen (3 O
   17493/20). Lokal eingebunden entfällt das — und damit auch der Grund
   für einen Cookie-Banner.

   Eine variable Schrift, Stärke 400 bis 900 und Breite 75 bis 125 %;
   die Seite benutzt beide Achsen (font-stretch: 104 % in den
   Überschriften). Zwei Zeichensätze statt drei: Vietnamesisch braucht
   eine deutsche Seite nicht, das spart 86 KB.

   Neu holen, wenn Google die Version hochzählt (derzeit v25):
     curl -A "<moderner Browser-UA>" \
       "https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..900&display=swap"
   ========================================================================== */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Zug Pilot — zugpilot.de
   Statische Website, kein CMS, keine Abhängigkeiten.
   Scroll-Animationen mit CSS scroll-driven animations.
   ========================================================================== */

:root {
  --ground:    #070A08;
  --ground-2:  #050706;
  --deep:      #0C2A1B;
  --accent:    #3ECF86;
  --accent-lt: #8BE9B8;

  /* Zwei Gegenfarben, beide aus vorhandenem Material statt vom Farbkreis:
     Der Logoverlauf läuft von Grün #189C6C (158°) in ein tiefes Blau
     #182448 (225°) — daraus gehoben --kontra. Der Sonnenaufgang in der
     eigenen Bildstrecke liegt bei 26°, warm — daraus --warm. Warm gegen
     Kühl ist die Gegenfarbe, die hier trägt. */
  --kontra:    #3E6ECF;
  --kontra-lt: #7E9EE4;
  --warm:      #E8A46A;
  --warm-lt:   #F2C79C;
  --deep-2:    #0F1B33;
  --text:      #F2F6F3;
  --text-2:    #C9D6CE;
  --text-3:    #A9BBB0;
  --text-4:    #8FA398;
  --line:      rgba(242, 246, 243, .12);
  --wrap:      1320px;
  /* Höhe des Seitenkopfs — muss zu .site-header passen. Gemessen 91 px am
     Schreibtisch, 101 px auf dem Telefon. Der Kopf nimmt Platz im Fluss
     ein und drückte den klebenden Hero um genau diesen Betrag nach unten;
     Scroll-Hinweis und HUD fielen dadurch unter den Bildrand. Seit die
     Sequenz mit der Marke beginnt, steht dort sonst nichts, was zum
     Weiterscrollen auffordert. */
  --kopf:      91px;
}
/* Gemessen, nicht geschätzt: 151 px zwischen 561 und 860 px, 131 px
   darunter — unter 560 px sind Logo, Knopf und Satzspiegel kleiner. Ein
   einziger Wert für die ganze Spanne war schon vorher falsch; aufgefallen
   ist es erst, als die Tippziele auf 44 px wuchsen und main dadurch um
   die Differenz verrutschte. Wer am Kopf etwas ändert, muss hier
   nachmessen. */
@media (max-width: 860px) { :root { --kopf: 151px; } }
@media (max-width: 560px) { :root { --kopf: 131px; } }

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

html {
  scroll-behavior: smooth;
  /* Platz für die Scrollleiste freihalten: sonst springt die Seite um
     deren Breite, sobald die Sperre des Preloaders gelöst wird. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Nicht overflow-x: hidden.

     Das macht den body zum Scrollcontainer, und Safari bricht damit
     position: sticky in allen Nachkommen. Auf dem iPhone klebte dadurch
     weder der Seitenkopf noch der Bildfilm des Hero: der Film scrollte
     nach oben weg und darunter blieb der leere, 300vh hohe Abschnitt in
     #030705 stehen — ein schwarzer Bildschirm. Chrome verträgt es,
     deshalb war in der Emulation nichts zu sehen.

     overflow-x: clip beschneidet genauso, erzeugt aber keinen
     Scrollcontainer (Safari 16+, Chrome 90+). Ältere Browser kennen
     clip nicht und lassen die Zeile fallen — das ist hier unkritisch:
     auf keiner der neun Seiten läuft bei 320, 375, 812 oder 1440 px
     etwas seitlich über, die Regel war nur ein Netz. */
  overflow-x: clip;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lt); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--ground); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ground);
  padding: 14px 22px; font-weight: 800;
}
.skip-link:focus { left: 0; }

/* ---------- Kopfbereich ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 10, 8, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(62, 207, 134, .16);
  transition: opacity var(--t-surface) var(--ease),
              transform var(--t-surface) var(--ease);
}

/* Am Anfang der Startseite zurückgehalten — gesetzt von kopf.js, damit
   der Kopf ohne JavaScript sichtbar bleibt. :focus-within holt ihn für
   die Tastatur zurück: unsichtbar, aber anspringbar wäre ein
   Zugänglichkeitsfehler. */
.site-header--verborgen {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.site-header--verborgen:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 32px;
}
.site-nav__logo img { height: 34px; width: auto; }
.site-nav__logo {
  position: relative;
  display: block;
  height: 34px;
  opacity: calc(.58 + var(--morph-header, 1) * .42);
  transition: opacity .15s linear;
}
.site-nav__spacer { flex-grow: 1; }
.site-nav__links { display: flex; gap: 26px; align-items: center; font-size: 14px; font-weight: 600; }
.site-nav__links a { color: var(--text-2); }
.site-nav__links a[aria-current="page"] { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 15px 28px;
  border-radius: 2px; font-weight: 800; font-size: 15px;
  background: var(--accent); color: var(--ground);
}
.btn:hover { background: var(--accent-lt); color: var(--ground); }
.btn--lg { padding: 19px 38px; font-size: 17px; font-weight: 900; }
.btn--ghost {
  background: none; color: var(--text);
  border: 1px solid rgba(242, 246, 243, .3); font-weight: 700;
}
.btn--ghost:hover { background: rgba(242, 246, 243, .08); color: var(--text); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.hero--full { height: 94vh; min-height: 620px; }
.hero--page { height: 62vh; min-height: 440px; }
.hero__bg { position: absolute; inset: -12% 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.06) brightness(.5); }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,10,8,.58) 0%, rgba(7,10,8,.16) 38%, rgba(7,10,8,.94) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: 86px; }
.hero h1 {
  margin: 0;
  font-size: clamp(42px, 6.6vw, 104px); line-height: .9;
  font-weight: 900; font-stretch: 112%; letter-spacing: -.03em;
  text-transform: uppercase;
}
.hero__sub { margin: 28px 0 0; font-size: clamp(17px, 2.1vw, 26px); font-weight: 500; color: var(--text-2); max-width: 620px; line-height: 1.45; }
.hero__actions { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

.scroll-cue {
  position: absolute; z-index: 2; bottom: 30px; left: 50%; transform: translateX(-50%);
  animation: nudge 2.4s ease-in-out infinite;
}

/* ---------- Scrollgesteuerter Video-Hero ---------- */
.scroll-hero {
  --hero-progress: 0;
  /* Unter den Kopf gezogen, damit die Sequenz schon bei Scrollstand 0 den
     ganzen Bildschirm füllt und der Hinweis im Bild liegt. Der Kopf liegt
     mit seiner Unschärfe darüber. */
  margin-top: calc(-1 * var(--kopf));
  position: relative;
  /* Vorher 500vh / 3000px — das waren 3.840 px, ein Drittel der ganzen
     Seite, für acht Wörter. Die Bildfolge läuft jetzt dichter: 150 Bilder
     auf rund 1.900 px sind knapp 13 px pro Bild, immer noch flüssig. */
  height: 320vh;
  min-height: 1900px;
  background: #030705;
  isolation: isolate;
}

.scroll-hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  color: var(--text);
  background: #050908;
}

.scroll-hero__media,
.scroll-hero__poster,
.scroll-hero__canvas,
.scroll-hero__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scroll-hero__media { z-index: 0; overflow: hidden; }

.scroll-hero__poster,
.scroll-hero__canvas {
  object-fit: cover;
  object-position: center center;
  will-change: transform;
}

.scroll-hero__poster {
  filter: saturate(.76) contrast(1.04) brightness(.64);
}

.scroll-hero__canvas {
  z-index: 1;
  opacity: 0;
  background: #050908;
  transition: opacity .35s ease;
}

.scroll-hero.is-sequence-ready .scroll-hero__canvas { opacity: 1; }

.scroll-hero__veil {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 7, 5, .68), rgba(2, 7, 5, .12) 58%, rgba(2, 7, 5, .28)),
    linear-gradient(180deg, rgba(2, 7, 5, .35), transparent 35%, rgba(2, 7, 5, .7));
}

.scroll-hero__scene {
  position: absolute;
  z-index: 4;
  will-change: transform, opacity;
}

.scroll-hero__scene--opening {
  left: 0;
  right: 0;
  bottom: clamp(88px, 12vh, 132px);
}

.scroll-hero__scene--opening h1 {
  margin: 0;
  font-size: clamp(42px, 6.6vw, 104px);
  line-height: .9;
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-shadow: 0 18px 50px rgba(0, 0, 0, .46);
}

.scroll-hero__lead {
  max-width: 620px;
  margin: 28px 0 0;
  color: rgba(242, 246, 243, .82);
  font-size: clamp(17px, 2.1vw, 26px);
  font-weight: 500;
  line-height: 1.45;
}

.scroll-hero__scene--statement {
  top: clamp(126px, 19vh, 180px);
  left: 0;
  right: 0;
  visibility: hidden;
}

.scroll-hero__eyebrow {
  margin: 0 0 16px;
  color: var(--accent-lt);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.scroll-hero__scene--statement h2 {
  margin: 0;
  /* Wieder wie vorher. Ich hatte diese Aussage auf Gewicht 450 und
     Satzschreibung gestellt, um sie von den Titeln abzusetzen — im Hero
     stand damit aber eine leichte Stimme direkt neben der versalen
     Überschrift, und Archivo 450 sieht neben Archivo 900 aus wie eine
     andere Schrift. Auf einer Fläche gehört eine Stimme. */
  font-size: clamp(62px, 8.2vw, 126px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 0 15px 45px rgba(0, 0, 0, .5);
}

.scroll-hero__scene--statement > p:last-child {
  max-width: 470px;
  margin: 26px 0 0;
  color: rgba(242, 246, 243, .78);
  font-size: 16px;
  line-height: 1.55;
}

.scroll-hero__scene--brand {
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 96px 24px 90px;
  text-align: center;
  visibility: hidden;
}
.scroll-hero__hud {
  position: absolute;
  z-index: 5;
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  color: rgba(215, 229, 222, .7);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.scroll-hero__progress {
  height: 1px;
  overflow: hidden;
  background: rgba(215, 229, 222, .24);
}

.scroll-hero__progress i {
  display: block;
  width: calc(var(--hero-progress) * 100%);
  height: 100%;
  background: var(--accent-lt);
  box-shadow: 0 0 12px rgba(84, 218, 150, .75);
}

.scroll-hero__cue {
  position: absolute;
  z-index: 5;
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  bottom: 60px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(242, 247, 244, .76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.scroll-hero__cue i {
  width: 34px;
  height: 1px;
  background: var(--accent-lt);
  animation: scroll-hero-pulse 1.8s ease-in-out infinite;
}

@keyframes scroll-hero-pulse {
  0%, 100% { transform: scaleX(.45); transform-origin: left; opacity: .48; }
  50% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

@media (max-width: 860px) {
  .scroll-hero { height: 300vh; min-height: 1650px; }
  .scroll-hero__sticky { min-height: 580px; }
  .scroll-hero__media { inset: 0; }
  .scroll-hero__poster,
  .scroll-hero__canvas { object-position: 56% center; }
  .scroll-hero__scene--opening { bottom: 92px; }
  .scroll-hero__scene--statement { top: max(128px, 18vh); }
  .scroll-hero__scene--statement h2 { font-size: clamp(50px, 10vw, 76px); }
  .scroll-hero__scene--statement > p:last-child { max-width: 78vw; font-size: 14px; }
  .scroll-hero__brand-logo { width: min(78vw, 570px); }
}

@media (max-width: 560px) {
  .scroll-hero { height: 410vh; min-height: 2200px; }
  .scroll-hero__scene--opening { bottom: 88px; }
  .scroll-hero__scene--opening h1 { font-size: clamp(48px, 16vw, 72px); }
  .scroll-hero__lead { max-width: 82vw; font-size: 16px; }
  .scroll-hero__scene--opening .hero__actions { margin-top: 28px; }
  .scroll-hero__scene--opening .btn--lg { padding: 15px 22px; font-size: 14px; }
  .scroll-hero__scene--statement { top: max(124px, 18vh); }
  .scroll-hero__scene--statement h2 { font-size: clamp(44px, 11vw, 60px); }
  .scroll-hero__scene--brand { padding-inline: 18px; }
  .scroll-hero__brand-logo { width: 84vw; }
  .scroll-hero__hud { left: 20px; right: 20px; bottom: 20px; gap: 9px; font-size: 7px; }
  .scroll-hero__cue { right: 20px; bottom: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hero { height: 100svh; min-height: 620px; }
  .scroll-hero__canvas { display: none; }
  .scroll-hero__scene--statement,
  .scroll-hero__scene--brand,
  .scroll-hero__cue { display: none; }
  .scroll-hero__poster { transform: none !important; }
  .scroll-hero__hud { display: none; }
}

/* ---------- Signature-Moment: Original-Lok wird Logo ---------- */
.locomorph {
  --scroll: 0;
  --approach: 0;
  --dissolve: 0;
  --dock: 0;
  --dock-x: 0px;
  --dock-y: 0px;
  position: relative;
  height: 330vh;
  background: #030504;
  isolation: isolate;
}

.locomorph__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  perspective: 1200px;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(62,207,134,.12), transparent 38%),
    linear-gradient(180deg, #07100b 0%, #020403 78%);
}

.locomorph__atmosphere {
  position: absolute;
  inset: 0;
  opacity: calc(.72 - var(--dissolve) * .5);
  background:
    linear-gradient(90deg, rgba(3,5,4,.9), transparent 16% 84%, rgba(3,5,4,.9)),
    repeating-linear-gradient(90deg, transparent 0 9.9%, rgba(62,207,134,.035) 10%, transparent 10.1% 20%);
}

.locomorph__rails {
  position: absolute;
  left: 0; right: 0; top: 68%;
  height: 82px;
  opacity: calc(.68 - var(--dissolve) * .68);
  background:
    linear-gradient(180deg, transparent 8px, rgba(181,204,190,.5) 9px 13px, transparent 14px 58px, rgba(181,204,190,.5) 59px 63px, transparent 64px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(158,177,166,.24) 33px 46px, transparent 47px 66px);
  transform: translateX(calc((1 - var(--approach)) * 9vw));
  mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
}

.locomorph__rails i {
  position: absolute;
  top: 50%; width: 42vw; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,207,134,.55), transparent);
}
.locomorph__rails i:first-child { left: -8vw; }
.locomorph__rails i:last-child { right: -8vw; }

.locomorph__copy {
  position: absolute;
  z-index: 4;
  top: clamp(90px, 13vh, 140px);
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  max-width: 520px;
  opacity: calc(1 - var(--approach) * 1.7);
  transform: translate3d(calc(var(--approach) * -55px), calc(var(--approach) * -18px), 0);
}
.locomorph__copy h2 {
  margin: 0;
  font-size: clamp(43px, 6.9vw, 104px);
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: uppercase;
  font-weight: 900;
}
.locomorph__copy h2 span { color: var(--accent); }
.locomorph__copy > p:last-child { max-width: 460px; color: var(--text-3); font-size: 17px; }

.locomorph__train-wrap {
  position: absolute;
  z-index: 3;
  left: 50%; top: 56%;
  width: min(92vw, 1480px);
  max-width: none;
  aspect-ratio: 3 / 1;
  transform-origin: center;
  transform:
    translate3d(calc(-50% + (1 - var(--approach)) * -68vw), -50%, calc((1 - var(--approach)) * -180px))
    scale(calc(.78 + var(--approach) * .22 - var(--dissolve) * .04));
  opacity: calc(1 - var(--dissolve) * .96);
  will-change: transform, opacity;
}

.locomorph__train {
  width: 100%; height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 38px 34px rgba(0,0,0,.68))
    saturate(calc(1 - var(--dissolve) * .68))
    contrast(calc(1 + var(--dissolve) * .22));
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,calc(1 - var(--dissolve))) 0%,
    #000 calc(36% + var(--dissolve) * 14%),
    #000 calc(64% - var(--dissolve) * 14%),
    rgba(0,0,0,calc(1 - var(--dissolve))) 100%);
}

.locomorph__scan {
  position: absolute;
  z-index: 4;
  top: 3%; bottom: 8%;
  left: calc(-12% + var(--dissolve) * 124%);
  width: 2px;
  opacity: calc(var(--dissolve) * (1 - var(--dock)));
  background: var(--accent);
  box-shadow: 0 0 24px 7px rgba(62,207,134,.38);
}

.locomorph__mark {
  position: absolute;
  z-index: 5;
  left: 50%; top: 50%;
  width: min(610px, 48vw);
  transform:
    translate3d(calc(-50% + var(--dock-x) * var(--dock)), calc(-50% + var(--dock-y) * var(--dock)), 0)
    scale(calc(.7 - var(--dock) * .56));
  transform-origin: center;
  opacity: calc(var(--dissolve) * (1 - var(--dock) * .08));
  will-change: transform, opacity;
}
.locomorph__mark img { position: relative; z-index: 1; width: 100%; height: auto; }
.locomorph__mark-glow {
  position: absolute;
  inset: -70%;
  background: radial-gradient(circle, rgba(62,207,134,.28), transparent 58%);
  opacity: calc(1 - var(--dock));
}

.locomorph__wordmark {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(calc(.88 + var(--dock) * .12));
  opacity: calc(var(--dock) * .085);
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-lt);
  font-size: clamp(70px, 14vw, 220px);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -.07em;
  white-space: nowrap;
  pointer-events: none;
}

.locomorph__status {
  position: absolute;
  z-index: 5;
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  bottom: 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: center;
  color: var(--text-4);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}
.locomorph__status b { height: 1px; background: linear-gradient(90deg, var(--accent) calc(var(--scroll) * 100%), var(--line) 0); }

/* ---------- Signature-Moment: Lokmontage und Kamerafahrt ---------- */
.rail-cinema {
  --cinema-progress: 0;
  --assemble: 0;
  --lock: 0;
  --run: 0;
  --solid: 0;
  --intro-opacity: 1;
  --callout-opacity: 0;
  --final-opacity: 0;
  --track-x: 0px;
  --far-x: 0px;
  --train-x: 0px;
  --train-y: 0px;
  --train-scale: .88;
  --energy: 0;
  position: relative;
  height: 480vh;
  color: #f1f4f1;
  background: #030504;
  isolation: isolate;
}

.rail-cinema__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  perspective: 1500px;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(73, 173, 134, .12), transparent 40%),
    linear-gradient(180deg, #08100d 0%, #030504 76%);
}

.rail-cinema__sticky::before,
.rail-cinema__sticky::after {
  content: "";
  position: absolute;
  z-index: 12;
  pointer-events: none;
}
.rail-cinema__sticky::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1,3,2,.92), transparent 14% 86%, rgba(1,3,2,.92)),
    linear-gradient(180deg, rgba(1,3,2,.7), transparent 18% 79%, rgba(1,3,2,.88));
  mix-blend-mode: multiply;
}
.rail-cinema__sticky::after {
  left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105,220,158,.55), transparent);
  transform: translateY(calc(var(--lock) * 100vh));
  opacity: calc((1 - var(--lock)) * .46);
  box-shadow: 0 0 22px rgba(62,207,134,.3);
}

.rail-cinema__world,
.rail-cinema__grid,
.rail-cinema__catenary,
.rail-cinema__speed,
.rail-cinema__mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rail-cinema__grid {
  opacity: calc(.52 - var(--lock) * .38);
  background:
    linear-gradient(rgba(137,180,157,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137,180,157,.04) 1px, transparent 1px),
    linear-gradient(rgba(137,180,157,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137,180,157,.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 74%);
}

.rail-cinema__catenary {
  left: -25vw;
  right: auto;
  width: 250vw;
  opacity: calc(var(--run) * .38);
  transform: translate3d(var(--far-x), 0, -260px);
  background:
    linear-gradient(180deg, transparent 19%, rgba(133,162,148,.65) 19.15%, transparent 19.3%),
    repeating-linear-gradient(90deg, transparent 0 17vw, rgba(133,162,148,.32) 17.08vw 17.18vw, transparent 17.26vw 34vw);
}
.rail-cinema__catenary::before {
  content: "";
  position: absolute;
  inset: 19% 0 auto;
  height: 31%;
  background: repeating-linear-gradient(114deg, transparent 0 16.8vw, rgba(133,162,148,.17) 16.9vw 17vw, transparent 17.1vw 34vw);
}
.rail-cinema__catenary::after {
  content: "";
  position: absolute;
  inset: 29% 0 auto;
  height: 18px;
  opacity: .72;
  background: radial-gradient(circle, rgba(94,255,165,.9) 0 2px, transparent 3px) 0 0 / 34vw 18px repeat-x;
  filter: drop-shadow(0 0 7px rgba(62,207,134,.8));
}

.rail-cinema__speed {
  z-index: 6;
  opacity: calc(var(--run) * .52);
  background:
    repeating-linear-gradient(90deg, transparent 0 9%, rgba(194,232,209,.09) 9.08% 9.18%, transparent 9.28% 18%),
    linear-gradient(90deg, transparent 15%, rgba(62,207,134,.08) 48%, transparent 78%);
  transform: skewX(-16deg) translateX(var(--far-x));
  filter: blur(1px);
  mask-image: linear-gradient(180deg, transparent 18%, #000 42% 76%, transparent 94%);
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 42% 76%, transparent 94%);
}

.rail-cinema__mist {
  z-index: 7;
  top: 48%;
  height: 46%;
  opacity: calc(.24 + var(--run) * .25);
  background:
    radial-gradient(ellipse at 28% 54%, rgba(183,208,193,.16), transparent 26%),
    radial-gradient(ellipse at 72% 68%, rgba(62,207,134,.12), transparent 24%);
  filter: blur(32px);
  transform: translateX(calc(var(--far-x) * .18));
}

.rail-cinema__intro {
  position: absolute;
  z-index: 9;
  top: clamp(104px, 15vh, 160px);
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  max-width: 650px;
  opacity: var(--intro-opacity);
  transform: translate3d(calc((1 - var(--intro-opacity)) * -50px), calc((1 - var(--intro-opacity)) * -16px), 0);
  will-change: transform, opacity;
}
.rail-cinema__intro h2 {
  margin: 0;
  font-size: clamp(48px, 7.4vw, 112px);
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: uppercase;
  font-weight: 900;
}
.rail-cinema__intro h2 span { color: var(--accent); }
.rail-cinema__intro > p:last-child {
  max-width: 440px;
  margin-top: 22px;
  color: #8ea298;
  font-size: 16px;
}

.rail-cinema__stage {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 54%;
  width: min(94vw, 1540px);
  aspect-ratio: 3 / 1;
  transform-style: preserve-3d;
  transform: translate3d(calc(-50% + var(--train-x)), calc(-50% + var(--train-y)), 0) scale(var(--train-scale));
  transform-origin: center;
  will-change: transform;
}

.rail-cinema__train,
.rail-cinema__fragments,
.rail-cinema__fragment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rail-cinema__train {
  z-index: 2;
  object-fit: contain;
  opacity: var(--solid);
  filter: drop-shadow(0 34px 26px rgba(0,0,0,.62)) saturate(1.03) contrast(1.02);
  will-change: opacity;
}
.rail-cinema__fragments {
  z-index: 3;
  transform-style: preserve-3d;
}
.rail-cinema__fragment {
  background: url("../img/lok-original.png") center / 100% 100% no-repeat;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

.rail-cinema__shadow {
  position: absolute;
  z-index: 0;
  left: 8%; right: 8%; bottom: 7%; height: 11%;
  border-radius: 50%;
  opacity: calc(.12 + var(--lock) * .58);
  background: #000;
  filter: blur(26px);
  transform: scaleX(calc(.7 + var(--lock) * .3));
}
.rail-cinema__energy {
  position: absolute;
  z-index: 4;
  inset: -45%;
  opacity: var(--energy);
  background: radial-gradient(ellipse at center, rgba(119,242,175,.32), rgba(62,207,134,.08) 22%, transparent 54%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.rail-cinema__track {
  position: absolute;
  z-index: 4;
  left: -30vw;
  width: 260vw;
  top: 67.5%;
  height: 142px;
  transform: translate3d(var(--track-x), 0, 0);
  opacity: calc(.24 + var(--lock) * .76);
  pointer-events: none;
}
.rail-cinema__ballast,
.rail-cinema__sleepers,
.rail-cinema__rail { position: absolute; left: 0; right: 0; }
.rail-cinema__ballast {
  top: 38px; height: 104px;
  background:
    linear-gradient(180deg, rgba(79,88,82,.5), rgba(11,14,12,.95)),
    repeating-linear-gradient(108deg, rgba(157,168,161,.17) 0 2px, transparent 2px 9px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.rail-cinema__sleepers {
  top: 24px; height: 75px;
  background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(103,113,107,.82) 43px 58px, transparent 59px 84px);
  transform: skewX(-18deg);
  filter: drop-shadow(0 8px 3px rgba(0,0,0,.7));
}
.rail-cinema__rail {
  top: 22px; height: 7px;
  background: linear-gradient(180deg, #b6c1ba, #3c4741 42%, #121814);
  box-shadow: 0 49px 0 #303b35, 0 50px 3px rgba(0,0,0,.8);
}

.rail-cinema__callouts {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: var(--callout-opacity);
  pointer-events: none;
}
.rail-cinema__callout {
  position: absolute;
  color: #a9bbb1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rail-cinema__callout::before {
  content: "";
  display: block;
  width: 72px; height: 32px;
  margin-bottom: 7px;
  border-top: 1px solid rgba(105,220,158,.7);
  border-right: 1px solid rgba(105,220,158,.7);
}
.rail-cinema__callout::after {
  content: "";
  position: absolute;
  top: -3px; left: -3px;
  width: 7px; height: 7px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #07100b;
}
.rail-cinema__callout--roof { left: 61%; top: 28%; }
.rail-cinema__callout--body { left: 77%; top: 47%; }
.rail-cinema__callout--gear { left: 29%; top: 65%; }

.rail-cinema__final {
  position: absolute;
  z-index: 8;
  top: clamp(112px, 16vh, 170px);
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  max-width: 560px;
  text-align: right;
  opacity: var(--final-opacity);
  transform: translate3d(calc((1 - var(--final-opacity)) * 45px), 0, 0);
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
  will-change: transform, opacity;
}
.rail-cinema__final h3 {
  margin: 0;
  font-size: clamp(43px, 5.8vw, 86px);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
  font-weight: 900;
}
.rail-cinema__final h3 span { color: var(--accent); }

.rail-cinema__hud {
  position: absolute;
  z-index: 13;
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  bottom: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  color: #6f8077;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}
.rail-cinema__timeline {
  height: 1px;
  overflow: hidden;
  background: rgba(127,151,138,.18);
}
.rail-cinema__timeline i {
  display: block;
  width: calc(var(--cinema-progress) * 100%);
  height: 100%;
  background: linear-gradient(90deg, #1d6143, var(--accent));
  box-shadow: 0 0 12px rgba(62,207,134,.55);
}

/* ---------- Typografie im Inhalt ---------- */
.h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 54px); line-height: 1.02;
  font-weight: 900; font-stretch: 108%; letter-spacing: -.028em; text-transform: uppercase;
}
/* Aussagesätze sind keine Titel. Sie standen mit 62 px in Gewicht 800
   neben den Abschnittstiteln als zweite laute Stimme — daher wirkte
   alles gleich. Jetzt leichter: eine andere Stimme, nicht nur eine
   andere Größe. */
.h2--sentence {
  text-transform: none;
  font-size: clamp(23px, 2.5vw, 38px);
  line-height: 1.3;
  font-weight: 450;
  font-stretch: 100%;
  letter-spacing: -.004em;
  color: var(--text-2);
}
.h3 { margin: 0 0 10px; font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.lead { margin: 0; font-size: 18px; line-height: 1.72; color: var(--text-3); }

.section { padding-block: 130px; }
.section--tight { padding-block: 100px; }
.section--deep { background: var(--deep); }
.section--ruled { border-top: 1px solid var(--line); }

.cols { display: flex; gap: 64px; flex-wrap: wrap; align-items: flex-start; }
.cols__main { flex-grow: 1; flex-basis: 540px; }
.cols__side { flex-grow: 1; flex-basis: 380px; }

/* ---------- Kennzahlen ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 54px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__num { font-size: clamp(34px, 3.4vw, 56px); font-weight: 900; line-height: 1; color: var(--warm); font-stretch: 108%; }
.stat__label { margin-top: 12px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--text-4); }

/* ---------- Nachweise ---------- */
.proof { background: linear-gradient(145deg, rgba(62,207,134,.055), transparent 46%); }
.certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}
.cert { min-width: 0; background: var(--ground); }
.cert__link {
  min-height: 154px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 28px;
  color: var(--text-2);
  background: linear-gradient(135deg, rgba(62,207,134,.045), transparent 55%);
  transition: background-color .25s ease, color .25s ease;
}
.cert__link:hover,
.cert__link:focus-visible { color: var(--text); background-color: rgba(62,207,134,.09); }
.cert__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cert__icon {
  width: 42px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(62,207,134,.42);
  color: var(--accent);
}
.cert__body { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.cert__title { font-size: 18px; font-weight: 800; line-height: 1.3; }
.cert__meta { color: var(--text-4); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.cert__cue { display: inline-flex; gap: 9px; align-items: center; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cert__cue svg { transition: transform .25s ease; }
.cert__link:hover .cert__cue svg,
.cert__link:focus-visible .cert__cue svg { transform: translateX(4px); }

/* ---------- Bilder, die an den Rand laufen ----------

   Fotos saßen vorher als abgerundete Rechtecke frei im dunklen Feld und
   wirkten aufgeklebt — die einzigen Stellen der Seite, die so auftraten,
   während Zertifikatsliste, Tafeln und Bildband bündig laufen.

   .anschnitt läuft bis an den Bildschirmrand. Welche Seite, sagt die
   Reihenfolge im Quelltext bzw. --links.

   Die Prozentangabe im Rand rechnet gegen die Breite des umgebenden
   Kastens. Das stimmt bei einem Flex-Element (Containerbreite) und bei
   einem Block in .wrap — bei einem Grid-Element bezöge sie sich auf die
   Spalte, und der Anschnitt landete mitten auf der Seite. Deshalb hat
   das Bildpaar auf "Über uns" weiter unten eine eigene Regel. */
.anschnitt {
  overflow: hidden;
  border-radius: 0;
  margin-right: calc(50% - 50vw);
}
.anschnitt--links { margin-right: 0; margin-left: calc(50% - 50vw); }
.anschnitt img {
  display: block;
  width: 100%;
  /* Festes Seitenverhältnis statt fester Höhe: vorher änderte sich der
     Ausschnitt mit jeder Fensterbreite — bei schmaler Spalte fast
     quadratisch, bei breiter ein Streifen. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.8) contrast(1.05);
}

/* Der Vorhang: das Bild öffnet sich vom Text weg zum Rand hin, also in
   die Richtung, in die es ohnehin aus dem Bild läuft. Eine Bewegung je
   Block — deshalb ist zoom-out von diesen Bildern heruntergenommen.
   Ohne view()-Unterstützung oder bei reduzierter Bewegung steht das Bild
   einfach da. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .anschnitt {
      animation: vorhangRechts linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .anschnitt--links { animation-name: vorhangLinks; }
  }
}
@keyframes vorhangRechts { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vorhangLinks  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* Zwei Bilder nebeneinander über die volle Breite, getrennt von einer
   Haarlinie — dieselbe Fügung wie bei den Tafeln und der
   Zertifikatsliste. Sie öffnen sich nach außen, von der Linie weg. */
.bildpaar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-inline: calc(50% - 50vw);
  background: var(--line);
}
.bildpaar > * { overflow: hidden; min-width: 0; }
.bildpaar img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.8) contrast(1.05);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bildpaar > * {
      animation: linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .bildpaar > :first-child { animation-name: vorhangLinks; }
    .bildpaar > :last-child  { animation-name: vorhangRechts; }
  }
}

/* ---------- Leistungsblöcke ---------- */
.feature {
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  flex-wrap: wrap;
  align-items: center;
  padding-block: 56px;
  border-top: 1px solid var(--line);
}
.feature--flip { flex-wrap: wrap-reverse; }
.feature__text { flex: 1 1 420px; min-width: 0; }
.feature__media { flex: 1 1 520px; min-width: 0; }

@media (max-width: 760px) {
  /* Gestapelt laufen die Bilder nach beiden Seiten über die ganze
     Breite, wie das Bildband. */
  .feature { padding-block: 40px; gap: 26px; }
  .anschnitt,
  .anschnitt--links { margin-inline: calc(50% - 50vw); }
  .anschnitt img,
  .bildpaar img { aspect-ratio: 3 / 2; }
  .bildpaar { grid-template-columns: minmax(0, 1fr); }
}

.feature__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.feature__title { margin: 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; letter-spacing: -.015em; font-stretch: 104%; }

/* ---------- Nummerierte Liste ---------- */






.rule { width: 2px; height: 140px; background: linear-gradient(var(--accent), rgba(62,207,134,0)); transform-origin: top; }

/* ---------- Karten ---------- */
.cards { display: grid; gap: 30px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { border-top: 2px solid var(--accent); padding-top: 24px; }
.card h3 { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-3); }

/* ---------- Marker ---------- */
.pills { display: flex; gap: 12px; flex-wrap: wrap; }
.pill { border: 1px solid rgba(62,207,134,.45); color: var(--accent); padding: 11px 20px; border-radius: 2px; font-weight: 700; font-size: 15px; }

/* ---------- Checkliste ---------- */
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.checks svg { flex-shrink: 0; margin-top: 3px; }

/* ---------- Kontakt ---------- */
.contact-list { display: flex; flex-direction: column; gap: 20px; }
.contact-list dt {
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--text-4); margin-bottom: 6px;
}
.contact-list dd { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--text-2); }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 780px; }
.legal h2 { margin: 48px 0 14px; font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.legal h3 { margin: 32px 0 10px; font-size: 19px; font-weight: 800; }
.legal p, .legal li { font-size: 16px; line-height: 1.75; color: var(--text-3); }
.legal ul { padding-left: 22px; }
.legal address { font-style: normal; font-size: 17px; line-height: 1.7; color: var(--text-2); }

/* ---------- Fußbereich ---------- */
/* ==========================================================================
   Der Footer als Vorhang, durchzogen von einem Lichtstrahl

   Zwei Mechaniken übereinander.

   Der Vorhang: der Footer klebt am unteren Viewportrand, darüber liegt
   die Seite. Ein Abschnitt im normalen Fluss beschneidet ihn mit
   clip-path — und weil clip-path auch fest positionierte Kinder
   beschneidet, ohne deren Bezugsrahmen zu übernehmen, wird der Footer
   beim Scrollen aufgedeckt statt heraufgeschoben. Kein Skript, keine
   Scroll-Beobachter.

   Das Licht: ein schräger Strahl zieht langsam über den Grund und lehnt
   sich zum Zeiger. Die Wortmarke am Fuß ist echter Text, ein Zeichen je
   Span, und jedes Zeichen malt denselben footergroßen Hintergrund — nur
   um seinen eigenen Abstand verschoben. Dadurch läuft der Strahl durch
   die Buchstaben hindurch, als wäre es ein einziger.

   Das Verschieben braucht gemessene Abstände, also ein Skript
   (fussbalken.js). Ohne Skript steht die Marke still und trägt nur ihren
   ruhenden Verlauf: sichtbar, nur ohne Licht.

   Kein Weichzeichner und keine Mischung: der Strahl ist ein Verlauf mit
   genug Stützstellen, dass er weich aussieht, ohne dass jedes Bild eine
   Unschärfe über den halben Bildschirm rechnen muss. Das Zeigerlicht ist
   eine eigene Scheibe, die nur verschoben wird.
   ========================================================================== */
:root { --vorhang: clamp(584px, 86vh, 800px); }

main { position: relative; z-index: 1; background: var(--ground); }

.curtain {
  height: var(--vorhang);
  clip-path: inset(0);
}

.site-footer {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: var(--vorhang);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  /* cqw = Footerbreite. Als fest positionierter Kasten ist das die
     Fläche ohne Scrollleiste — genauer als vw. */
  container-type: inline-size;
  background: var(--ground-2);

  /* Die Verläufe brauchen die Farben mit wechselnder Deckkraft, also
     als Tripel. */
  --acc: 62, 207, 134;    /* --accent  */
  --ink: 242, 246, 243;   /* --text    */
  --grd: 5, 7, 6;         /* --ground-2 */

  --rand: 24px;           /* derselbe Satzspiegel wie .wrap */
  /* Der Pfeil der Linkspalten als Maske: so steht er einmal hier statt
     neunmal in jeder Seite. Die Maske liest nur die Deckkraft, die
     Strichfarbe im Datenpfad ist darum beliebig. */
  --pfeil: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8'/></svg>");
  --wort-top:  #124630;   /* ruhende Füllung der Marke, oben */
  --wort-fuss: #070C09;   /*                        und am Fuß */
}

/* ---- Haarlinie oben, dieselbe wie überall auf der Seite ---- */
.site-footer__kante {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 3;
  background: var(--line);
}

/* ---- Spalten ---- */
/* Kein .wrap hier: dessen margin: 0 auto zwingt das Kind in einem
   Spalten-Flexcontainer auf Inhaltsbreite. Satzspiegel von Hand. */
.site-footer__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(48px, 7vh, 86px) var(--rand) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, .86fr) minmax(0, .86fr);
  column-gap: clamp(24px, 4cqw, 56px);
  row-gap: 44px;
}
.site-footer__spalte { min-width: 0; }
.site-footer__spalte:first-child { max-width: 460px; }

/* Das Aufsteigen beim ersten Sehen. Die Verzögerung setzt sich aus der
   Spalte (--ds) und der Zeile darin (--di) zusammen. */
.fuss-auf {
  transition: opacity .9s var(--ease), translate .9s cubic-bezier(.2, .7, .1, 1);
  transition-delay: calc(var(--ds, 0ms) + var(--di, 0ms));
}
.site-footer[data-in="false"] .fuss-auf { opacity: 0; translate: 0 14px; }
.site-footer__inner > :nth-child(2) { --ds: 110ms; }
.site-footer__inner > :nth-child(3) { --ds: 190ms; }
.site-footer li:nth-child(2) { --di:  60ms; }
.site-footer__zusatz p:nth-child(2) { --di: 60ms; }
.site-footer li:nth-child(3) { --di: 120ms; }
.site-footer li:nth-child(4) { --di: 180ms; }
.site-footer li:nth-child(5) { --di: 240ms; }

.site-footer__etikett {
  position: relative;
  display: block;
  margin: 0;
  padding-bottom: 13px;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--accent);
}
.site-footer__etikett::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--acc), .55), rgba(var(--acc), .26));
  transform: scaleX(var(--linie, 1));
  transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.2, .7, .1, 1);
  transition-delay: calc(var(--ds, 0ms) + 120ms);
}
.site-footer[data-in="false"] .site-footer__etikett::after { --linie: 0; }

/* ---- Die beiden Tasten: schreiben und nach oben ---- */
.site-footer__wege {
  display: flex;
  gap: 12px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.site-footer__taste {
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: rgba(var(--ink), .62);
  background: linear-gradient(180deg, rgba(var(--ink), .085), rgba(var(--ink), .022));
  box-shadow: inset 0 0 0 1px rgba(var(--ink), .15),
              inset 0 1px 0 rgba(var(--ink), .13),
              0 6px 14px -8px rgba(0, 0, 0, .8);
  transition: color var(--t-micro) var(--ease),
              background var(--t-surface) var(--ease),
              box-shadow var(--t-surface) var(--ease),
              transform var(--t-surface) var(--ease),
              translate var(--t-surface) cubic-bezier(.2, .8, .2, 1);
  /* magnet.js schreibt --mx/--my; ohne Skript bleibt es bei 0. */
  transform: translate(var(--mx, 0px), var(--my, 0px));
}
.site-footer__taste svg { width: 18px; height: 18px; }
.site-footer__taste:hover,
.site-footer__taste:focus-visible {
  color: var(--text);
  translate: 0 -2px;
  background: linear-gradient(180deg, rgba(var(--acc), .3), rgba(var(--acc), .07));
  box-shadow: inset 0 0 0 1px rgba(var(--acc), .7),
              inset 0 1px 0 rgba(var(--ink), .28),
              0 10px 26px -8px rgba(var(--acc), .6);
}
.site-footer__fahne {
  position: absolute;
  z-index: 5;
  left: 50%; top: calc(100% + 9px);
  translate: -50% -4px;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 11.5px; line-height: 1;
  background: var(--accent);
  color: var(--ground);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-micro) var(--ease), translate var(--t-surface) var(--ease);
}
.site-footer__fahne::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 100%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-bottom-color: var(--accent);
}
.site-footer__taste:hover .site-footer__fahne,
.site-footer__taste:focus-visible .site-footer__fahne { opacity: 1; translate: -50% 0; }

.site-footer__zusatz {
  margin-top: 21px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-4);
}
.site-footer__zusatz p { margin: 0; }
.site-footer__zusatz p + p { margin-top: 2px; }
.site-footer__zusatz b { font-weight: 400; color: var(--text-2); }

/* ---- Die Linkspalten ---- */
.site-footer__liste { margin: 13px 0 0; padding: 0; list-style: none; }
.site-footer__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 22px;
  color: rgba(var(--ink), .78);
  transition: color var(--t-micro) var(--ease);
}
.site-footer__link-t {
  display: inline-block;
  transition: translate var(--t-surface) cubic-bezier(.2, .8, .2, 1);
}
/* Ein kurzer Strich fährt vor dem Wort ein, das Wort rückt nach, der
   Pfeil kommt nach. Im Ruhezustand steht nichts davon da. */
.site-footer__link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-surface) cubic-bezier(.2, .8, .2, 1);
}
.site-footer__link::after {
  content: "";
  width: 12px; height: 12px;
  background: var(--accent);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
          mask: var(--pfeil) center / contain no-repeat;
  opacity: 0;
  translate: -6px 0;
  transition: opacity var(--t-micro) var(--ease),
              translate var(--t-surface) cubic-bezier(.2, .8, .2, 1);
}
.site-footer__link:hover,
.site-footer__link:focus-visible { color: var(--text); }
.site-footer__link:hover::before,
.site-footer__link:focus-visible::before { transform: scaleX(1); }
.site-footer__link:hover .site-footer__link-t,
.site-footer__link:focus-visible .site-footer__link-t { translate: 12px 0; }
.site-footer__link:hover::after,
.site-footer__link:focus-visible::after { opacity: 1; translate: 10px 0; }

/* ---- Die Wortmarke ----
   Höhe und Schriftgröße stehen hier für den Fall ohne Skript. 6.4493 ist
   die gemessene Breite von ZUGPILOT bei Schriftgröße 1 in Archivo 900,
   Breite 125 %, Laufweite -.045em — gemessen an dieser Auszeichnung, ein
   Span je Zeichen, nicht an einem durchgehenden Wort: zwischen einzelnen
   Spans fällt die Unterschneidung weg, das macht 1,3 % mehr Breite.
   Hier steht 6.48, also ein halbes Prozent Luft, denn ein zu breites
   Wort schneidet overflow: hidden am T ab, ein zu schmales lässt rechts
   eine Lücke von wenigen Pixeln. Fällt die Schrift auf die Systemschrift
   zurück, bleibt die Marke 13 % zu kurz. Das Skript misst die wirkliche
   Breite und setzt beides in Pixeln. */
.site-footer__marke {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: clamp(28px, 6vw, 88px);
  --groesse: calc((min(100cqw, var(--wrap)) - 2 * var(--rand)) / 6.48);
  height: calc(var(--groesse) * .785);
}
.site-footer__wort-box {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--rand);
}
.site-footer__wort {
  display: inline-flex;
  white-space: nowrap;
  font-size: var(--groesse);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -.045em;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* Die Buchstaben fahren von unten ein. offsetTop ignoriert dieses
   translate, der Strahl sitzt also schon richtig, während sie steigen. */
.fuss__heber {
  display: inline-block;
  transition: translate 1.25s cubic-bezier(.16, .84, .2, 1);
  transition-delay: calc(260ms + var(--di, 0ms));
}
.site-footer[data-in="false"] .fuss__heber { translate: 0 85%; }
.site-footer__wort > span:nth-child(1) { --di:   0ms; }
.site-footer__wort > span:nth-child(2) { --di:  75ms; }
.site-footer__wort > span:nth-child(3) { --di: 150ms; }
.site-footer__wort > span:nth-child(4) { --di: 225ms; }
.site-footer__wort > span:nth-child(5) { --di: 300ms; }
.site-footer__wort > span:nth-child(6) { --di: 375ms; }
.site-footer__wort > span:nth-child(7) { --di: 450ms; }
.site-footer__wort > span:nth-child(8) { --di: 525ms; }

.fuss__zeichen {
  display: inline-block;
  cursor: pointer;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, var(--wort-top), var(--wort-fuss));
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.2), filter .4s var(--ease);
}
.fuss__zeichen:hover { transform: translateY(-.045em); filter: brightness(1.3) saturate(1.08); }
.fuss__zeichen.hopst { animation: fussHopser .75s cubic-bezier(.2, .8, .2, 1); }
@keyframes fussHopser {
  0%   { transform: translateY(0)      scale(1,    1);    }
  18%  { transform: translateY(.02em)  scale(1.06, .9);   }
  45%  { transform: translateY(-.14em) scale(.97,  1.05); }
  70%  { transform: translateY(.01em)  scale(1.02, .97);  }
  100% { transform: translateY(-.045em) scale(1,   1);    }
}

/* Der Fuß der Marke sinkt in den Grund, statt am Rand abzubrechen. */
.site-footer__sohle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent, rgba(var(--grd), .5) 55%, var(--ground-2));
}

/* Auf dem Telefon kein Vorhang: ein bildschirmhoher fester Footer und eine
   Viewporthöhe, die mit der Adressleiste springt, vertragen sich nicht. */
@media (max-width: 860px) {
  .curtain { height: auto; clip-path: none; }
  .site-footer { position: relative; height: auto; }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-top: 54px;
    row-gap: 40px;
  }
  .site-footer__spalte:first-child { grid-column: 1 / -1; max-width: none; }
  .site-footer__link { padding: 12px 0; }
  .site-footer__marke { margin-top: 44px; }

  /* Die Fähnchen hängen an :hover, den es hier nicht gibt — und die
     erste würde am linken Rand 5 px abgeschnitten. Das aria-label
     bleibt, die Beschriftung geht also nicht verloren. */
  .site-footer__fahne { display: none; }
}

/* ---- Ohne clip-path-Unterstützung und bei reduzierter Bewegung:
        der Footer läuft normal im Fluss mit. ----
   relative statt static: Grund, Marke und Sohle sind absolut gesetzt und
   brauchen den Footer als Bezugsrahmen. Ohne ihn landen sie irgendwo im
   Dokument. */
@supports not (clip-path: inset(0)) {
  .curtain { height: auto; }
  .site-footer { position: relative; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { height: auto; clip-path: none; }
  .site-footer { position: relative; height: auto; }

  .site-footer .fuss-auf,
  .site-footer .fuss__heber,
  .site-footer .fuss__zeichen,
  .site-footer .site-footer__taste,
  .site-footer .site-footer__link-t,
  .site-footer .site-footer__link::before,
  .site-footer .site-footer__link::after,
  .site-footer .site-footer__etikett::after { transition: none; animation: none; }

  .site-footer[data-in="false"] .fuss-auf { opacity: 1; translate: none; }
  .site-footer[data-in="false"] .fuss__heber { translate: none; }
  .site-footer[data-in="false"] .site-footer__etikett::after { --linie: 1; }
}

/* ==========================================================================
   Scroll-Choreografie
   Nur wo der Browser sie beherrscht und der Nutzer sie nicht abbestellt hat.
   Ohne Unterstützung bleibt alles sichtbar — nichts versteckt sich dauerhaft.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise      { opacity: 0; animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 30%; }
    .rise-slow { opacity: 0; animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .fade      { opacity: 0; animation: fade linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; }
    .slide-l   { opacity: 0; animation: slideL linear both; animation-timeline: view(); animation-range: entry 6% cover 36%; }
    .slide-r   { opacity: 0; animation: slideR linear both; animation-timeline: view(); animation-range: entry 6% cover 36%; }
    .drift     { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .drift-fast{ animation: driftFast linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .zoom-out  { animation: zoomOut linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .grow-line { animation: growLine linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .hero-sink { animation: heroSink linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    .stagger > *              { opacity: 0; animation: rise linear both; animation-timeline: view(); }
    .stagger > *:nth-child(1) { animation-range: entry 4%  cover 26%; }
    .stagger > *:nth-child(2) { animation-range: entry 8%  cover 30%; }
    .stagger > *:nth-child(3) { animation-range: entry 12% cover 34%; }
    .stagger > *:nth-child(4) { animation-range: entry 16% cover 38%; }
    .stagger > *:nth-child(5) { animation-range: entry 20% cover 42%; }
    .stagger > *:nth-child(6) { animation-range: entry 24% cover 46%; }
  }
}

@keyframes rise      { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideL    { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes slideR    { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes drift     { from { transform: translateY(-7%); }  to { transform: translateY(7%); } }
@keyframes driftFast { from { transform: translateY(-14%); } to { transform: translateY(14%); } }
@keyframes zoomOut   { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes growLine  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes heroSink  { from { transform: translateY(0); opacity: 1; } to { transform: translateY(90px); opacity: .15; } }
@keyframes nudge     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .locomorph { height: auto; }
  .locomorph__sticky { position: relative; height: 760px; }
  .locomorph__train-wrap { opacity: .3; transform: translate(-50%, -50%); }
  .locomorph__mark { opacity: 1; transform: translate(-50%, -50%) scale(.72); }
  .locomorph__wordmark { opacity: .09; transform: translate(-50%, -46%); }
  .locomorph__copy { opacity: 1; transform: none; }
  .locomorph__status { display: none; }
  .rail-cinema { height: auto; }
  .rail-cinema__sticky { position: relative; height: 760px; }
  .rail-cinema__fragments,
  .rail-cinema__callouts,
  .rail-cinema__intro,
  .rail-cinema__hud { display: none; }
  .rail-cinema__train { opacity: 1; }
  .rail-cinema__stage { --train-scale: 1; --train-x: 0px; --train-y: 0px; }
  .rail-cinema__final { opacity: 1; transform: none; }
}

/* ==========================================================================
   Schmale Fenster
   ========================================================================== */
@media (max-width: 1000px) {
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
}

@media (max-width: 860px) {
  .section { padding-block: 86px; }
  .site-nav { flex-wrap: wrap; gap: 16px; }
  .site-nav__spacer { display: none; }
  .site-nav__links { order: 3; flex-basis: 100%; gap: 20px; flex-wrap: wrap; }
  .cards--3 { grid-template-columns: 1fr; }
  /* Feste Höhe von 260 px hier entfernt: der Ausschnitt kommt seit dem
     26.10.2026 aus dem Seitenverhältnis, und diese Regel hat es
     überschrieben. */
  .certs { grid-template-columns: 1fr; }
  .hero--full { height: auto; min-height: 0; padding-top: 140px; }
  .hero--page { height: auto; min-height: 0; padding-top: 120px; }
  .hero__inner { padding-bottom: 64px; }
  .scroll-cue { display: none; }
  .locomorph { height: 300vh; }
  .locomorph__sticky { min-height: 560px; }
  .locomorph__copy { max-width: 78vw; }
  .locomorph__copy > p:last-child { display: none; }
  .locomorph__train-wrap { width: 112vw; top: 58%; }
  .locomorph__mark { width: min(360px, 78vw); }
  .rail-cinema { height: 430vh; }
  .rail-cinema__sticky { min-height: 600px; }
  .rail-cinema__intro { top: 17vh; max-width: 80vw; }
  .rail-cinema__intro > p:last-child { display: none; }
  .rail-cinema__stage { width: 124vw; top: 55%; }
  .rail-cinema__track { top: 64.8%; }
  .rail-cinema__callouts { display: none; }
  .rail-cinema__final { top: 17vh; max-width: 76vw; }
}

@media (max-width: 560px) {
  .site-nav { padding: 14px 18px 12px; }
  .site-nav__logo img { height: 30px; }
  .site-nav > .btn { min-height: 40px; padding: 10px 19px; font-size: 13px; margin-left: auto; }
  .site-nav__links {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    font-size: 11px;
    letter-spacing: -.01em;
  }
  .cards--4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .cert__link { grid-template-columns: 38px minmax(0, 1fr); padding: 22px 18px; }
  .cert__icon { width: 38px; height: 44px; }
  .cert__cue { grid-column: 2; }
  .locomorph__copy h2 { font-size: clamp(38px, 12vw, 58px); }
  .locomorph__status { font-size: 8px; letter-spacing: .13em; }
  .rail-cinema { height: 410vh; }
  .rail-cinema__intro { top: 17vh; left: 20px; }
  .rail-cinema__intro h2 { font-size: clamp(44px, 14vw, 62px); }
  .rail-cinema__stage { width: 146vw; top: 55%; }
  .rail-cinema__track { top: 62.5%; height: 116px; }
  .rail-cinema__ballast { height: 80px; }
  .rail-cinema__final { top: 18vh; right: 20px; }
  .rail-cinema__final h3 { font-size: clamp(42px, 13vw, 59px); }
  .rail-cinema__hud { left: 20px; right: 20px; bottom: 20px; font-size: 7px; gap: 10px; }
}

/* ---------- Rail Cinema 3D ---------- */
.rail-cinema--3d {
  --cinema-progress: 0;
  --drive: 0;
  --intro-opacity: 1;
  --spec-opacity: 0;
  --final-opacity: 0;
  height: 560vh;
  background: #020403;
}

.rail-cinema--3d .rail-cinema__sticky {
  min-height: 650px;
  background:
    radial-gradient(ellipse at 52% 56%, rgba(49, 143, 99, .18), transparent 44%),
    linear-gradient(180deg, #0a110e 0%, #030504 70%, #010201 100%);
}

.rail-cinema--3d .rail-cinema__sticky::before {
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(0, 2, 1, .93), transparent 12% 86%, rgba(0, 2, 1, .9)),
    linear-gradient(180deg, rgba(0, 2, 1, .72), transparent 19% 74%, rgba(0, 2, 1, .94));
  mix-blend-mode: normal;
  pointer-events: none;
}

.rail-cinema--3d .rail-cinema__sticky::after {
  z-index: 9;
  left: 7%;
  right: 7%;
  top: auto;
  bottom: 76px;
  height: 1px;
  transform: none;
  opacity: .22;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px rgba(62, 207, 134, .25);
}

.rail-cinema__viewport {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.rail-cinema__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .8s ease;
}

.rail-cinema--3d.is-ready .rail-cinema__canvas { opacity: 1; }

.rail-cinema__fallback {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 55%;
  width: min(92vw, 1420px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: .82;
  filter: drop-shadow(0 32px 30px rgba(0, 0, 0, .75));
}

.rail-cinema--3d.is-ready .rail-cinema__fallback { display: none; }

.rail-cinema__atmosphere {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: calc(.55 - var(--drive) * .2);
  background:
    linear-gradient(rgba(106, 148, 125, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(106, 148, 125, .028) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 58%, transparent 16%, rgba(0, 0, 0, .42) 76%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 20% 80%, transparent);
}

.rail-cinema--3d .rail-cinema__speed {
  z-index: 4;
  inset: 20% -25% 8%;
  opacity: calc(var(--drive) * .78);
  transform: skewX(-19deg) translate3d(calc(var(--drive) * -7%), 0, 0);
  background:
    repeating-linear-gradient(90deg, transparent 0 8.8%, rgba(192, 229, 208, .1) 8.9% 9%, transparent 9.1% 17%),
    linear-gradient(90deg, transparent 10%, rgba(62, 207, 134, .11) 46%, transparent 78%);
  filter: blur(1.5px);
  mask-image: linear-gradient(180deg, transparent, #000 22% 82%, transparent);
}

.rail-cinema--3d .rail-cinema__intro,
.rail-cinema--3d .rail-cinema__final {
  z-index: 10;
  pointer-events: none;
}

.rail-cinema--3d .rail-cinema__intro {
  top: clamp(102px, 14vh, 150px);
  opacity: var(--intro-opacity);
  transform: translate3d(calc((1 - var(--intro-opacity)) * -46px), 0, 0);
}

.rail-cinema--3d .rail-cinema__intro h2 {
  font-size: clamp(48px, 7vw, 108px);
  text-shadow: 0 16px 40px rgba(0, 0, 0, .38);
}

.rail-cinema--3d .rail-cinema__intro > p:last-child {
  color: #a2b3aa;
  max-width: 480px;
}

.rail-cinema__specs {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: var(--spec-opacity);
  pointer-events: none;
}

.rail-cinema__spec {
  position: absolute;
  color: #b5c4bc;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #020403;
}

.rail-cinema__spec::before {
  content: "";
  display: block;
  width: 78px;
  height: 30px;
  margin-bottom: 8px;
  border-top: 1px solid rgba(111, 232, 168, .75);
  border-right: 1px solid rgba(111, 232, 168, .75);
}

.rail-cinema__spec::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: #07100b;
  box-shadow: 0 0 9px rgba(62, 207, 134, .6);
}

.rail-cinema__spec--roof { left: 56%; top: 21%; }
.rail-cinema__spec--body { left: 75%; top: 61%; }
.rail-cinema__spec--gear { left: 28%; top: 66%; }

.rail-cinema--3d .rail-cinema__final {
  top: clamp(148px, 18vh, 190px);
  opacity: var(--final-opacity);
  transform: translate3d(calc((1 - var(--final-opacity)) * 46px), 0, 0);
  mask-image: none;
}

.rail-cinema--3d .rail-cinema__final h3 {
  max-width: 560px;
  margin-left: auto;
  color: rgba(242, 246, 243, .78);
  font-size: clamp(46px, 5.4vw, 78px);
  text-shadow: 0 16px 40px rgba(0, 0, 0, .42);
}

.rail-cinema--3d .rail-cinema__hud {
  z-index: 11;
  bottom: 31px;
  color: #87988f;
}

.rail-cinema--3d .rail-cinema__timeline i {
  width: calc(var(--cinema-progress) * 100%);
}

.rail-cinema__loader {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: 104px;
  display: flex;
  align-items: center;
  gap: 11px;
  transform: translateX(-50%);
  color: #8ea298;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: opacity .4s ease, visibility .4s ease;
}

.rail-cinema__loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(62, 207, 134, .8);
  animation: rail-pulse 1.1s ease-in-out infinite alternate;
}

.rail-cinema--3d.is-ready .rail-cinema__loader,
.rail-cinema--3d.is-fallback .rail-cinema__loader {
  opacity: 0;
  visibility: hidden;
}

@keyframes rail-pulse {
  from { opacity: .25; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 860px) {
  .rail-cinema--3d { height: 500vh; }
  .rail-cinema--3d .rail-cinema__intro { max-width: 84vw; }
  .rail-cinema--3d .rail-cinema__final { max-width: 80vw; }
  .rail-cinema__specs { display: none; }
}

@media (max-width: 560px) {
  .rail-cinema--3d { height: 450vh; }
  .rail-cinema--3d .rail-cinema__sticky { min-height: 590px; }
  .rail-cinema--3d .rail-cinema__intro { top: 15vh; left: 20px; }
  .rail-cinema--3d .rail-cinema__intro h2 { font-size: clamp(42px, 13.2vw, 60px); }
  .rail-cinema--3d .rail-cinema__intro > p:last-child { display: block; max-width: 86vw; font-size: 13px; }
  .rail-cinema--3d .rail-cinema__final { top: max(112px, 17vh); right: 20px; }
  .rail-cinema--3d .rail-cinema__final h3 { font-size: clamp(42px, 13vw, 58px); }
  .rail-cinema__loader { bottom: 88px; width: max-content; max-width: 80vw; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-cinema--3d { height: 140vh; }
  .rail-cinema--3d .rail-cinema__speed,
  .rail-cinema__specs { display: none; }
  .rail-cinema--3d .rail-cinema__intro { opacity: 0; }
  .rail-cinema--3d .rail-cinema__final { opacity: 1; }
}

/* ---------- Trackside Cinema ---------- */
.rail-film {
  --film-progress: 0;
  position: relative;
  z-index: 1;
  height: 520vh;
  background: #050908;
}

.rail-film__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  color: #f5f8f7;
  background: #071011;
}

.rail-film__world,
.rail-film__aerial,
.rail-film__landscape,
.rail-film__weather,
.rail-film__grade {
  position: absolute;
  inset: 0;
}

.rail-film__world {
  z-index: 1;
  overflow: hidden;
  perspective: 1400px;
}

.rail-film__landscape {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, filter;
}

.rail-film__aerial {
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform, opacity, filter;
}

.rail-film__weather {
  z-index: 2;
  width: 116%;
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(106deg, transparent 4% 18%, rgba(206, 226, 217, .12) 18.2% 18.35%, transparent 18.6% 41%, rgba(206, 226, 217, .08) 41.2% 41.35%, transparent 41.6%),
    linear-gradient(180deg, rgba(1, 8, 8, .03), rgba(2, 10, 8, .42));
  mix-blend-mode: screen;
  will-change: transform;
}

.rail-film__train {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: clamp(118px, 19vh, 160px);
  width: min(100vw, 1700px);
  will-change: transform, filter, opacity;
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 24px rgba(0, 0, 0, .62));
}

.rail-film__train img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(.72) contrast(1.16) saturate(.82);
}

.rail-film.is-driving .rail-film__train img {
  animation: rail-film-vibration .14s steps(2, end) infinite;
}

@keyframes rail-film-vibration {
  0% { transform: translate3d(0, 0, 0) rotate(.015deg); }
  50% { transform: translate3d(-.7px, .75px, 0) rotate(-.02deg); }
  100% { transform: translate3d(.45px, -.35px, 0) rotate(.01deg); }
}

.rail-film__rush {
  position: absolute;
  z-index: 5;
  left: -15%;
  right: -45%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(194, 225, 211, .74) 26%, rgba(64, 211, 137, .3) 58%, transparent);
  filter: blur(.7px);
  will-change: transform, opacity;
}

.rail-film__rush--one {
  top: 48%;
  box-shadow: 0 31px 0 rgba(213, 230, 221, .22), 0 74px 0 rgba(64, 211, 137, .12);
}

.rail-film__rush--two {
  top: 64%;
  transform: translateX(28%);
  box-shadow: 0 -44px 0 rgba(213, 230, 221, .16), 0 25px 0 rgba(64, 211, 137, .16);
}

.rail-film__grade {
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 6, 5, .66), transparent 24% 72%, rgba(1, 6, 5, .4)),
    linear-gradient(180deg, rgba(1, 6, 5, .43), transparent 23% 67%, rgba(1, 6, 5, .84));
}

.rail-film__opening,
.rail-film__trackside,
.rail-film__altitude,
.rail-film__brand,
.rail-film__hud {
  position: absolute;
  z-index: 10;
}

.rail-film__opening {
  top: clamp(122px, 18vh, 174px);
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  max-width: 720px;
  will-change: transform, opacity;
}

.rail-film__eyebrow {
  margin: 0 0 16px;
  color: #70dda5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.rail-film__opening h2 {
  margin: 0;
  color: #f4f7f5;
  font-size: clamp(66px, 8.2vw, 126px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 0 15px 45px rgba(0, 0, 0, .48);
}

.rail-film__opening > p:last-child {
  max-width: 460px;
  margin: 25px 0 0;
  color: rgba(241, 247, 244, .75);
  font-size: 16px;
  line-height: 1.55;
}

.rail-film__trackside {
  top: 24%;
  right: max(28px, calc((100vw - var(--wrap)) / 2 + 28px));
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(240, 247, 243, .82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 3px 12px #000;
  will-change: transform, opacity;
}

.rail-film__trackside i {
  display: block;
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, #46d58b, transparent);
}

.rail-film__altitude {
  top: clamp(110px, 16vh, 156px);
  right: max(28px, calc((100vw - var(--wrap)) / 2 + 28px));
  display: grid;
  justify-items: end;
  gap: 8px;
  color: rgba(240, 247, 243, .82);
  text-align: right;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .72);
  will-change: transform, opacity;
}

.rail-film__altitude span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.rail-film__altitude b {
  color: #6fe2a8;
  font-size: clamp(24px, 2.3vw, 38px);
  line-height: 1;
  letter-spacing: -.025em;
}

.rail-film__brand {
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 96px 24px 90px;
  text-align: center;
  pointer-events: none;
  visibility: hidden;
}

.rail-film__brand .rail-film__eyebrow {
  margin-bottom: 26px;
  color: rgba(241, 247, 244, .68);
}

.rail-film__logo {
  position: relative;
  width: min(47vw, 690px);
  overflow: hidden;
  will-change: transform, clip-path;
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, .55));
}

.rail-film__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.rail-film__logo-white {
  filter: brightness(0) invert(1);
}

.rail-film__logo-color {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 45.2%);
}

.rail-film__logo-scan {
  position: absolute;
  inset: -18% auto -18% 46%;
  width: 12%;
  opacity: 0;
  transform: skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  filter: blur(5px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.rail-film__brandline {
  margin: 27px 0 0;
  color: rgba(242, 247, 244, .78);
  font-size: clamp(12px, 1.1vw, 17px);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.rail-film__hud {
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  bottom: 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  color: rgba(204, 220, 212, .66);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.rail-film__progress {
  height: 1px;
  overflow: hidden;
  background: rgba(204, 220, 212, .2);
}

.rail-film__progress i {
  display: block;
  width: calc(var(--film-progress) * 100%);
  height: 100%;
  background: #54da96;
  box-shadow: 0 0 10px rgba(84, 218, 150, .7);
}

@media (max-width: 860px) {
  .rail-film { height: 460vh; }
  .rail-film__train {
    width: 150vw;
    max-width: none;
    bottom: clamp(130px, 19vh, 170px);
  }
  .rail-film__opening { max-width: 84vw; }
  .rail-film__opening h2 { font-size: clamp(57px, 14.5vw, 86px); }
  .rail-film__opening > p:last-child { max-width: 78vw; font-size: 14px; }
  .rail-film__trackside { top: 22%; right: 20px; }
  .rail-film__logo { width: min(76vw, 560px); }
  .rail-film__brandline { max-width: 82vw; line-height: 1.6; }
}

@media (max-width: 560px) {
  .rail-film { height: 430vh; }
  .rail-film__sticky { min-height: 590px; }
  .rail-film__opening { top: 18vh; left: 20px; }
  .rail-film__opening h2 { font-size: clamp(52px, 16vw, 72px); }
  .rail-film__trackside { display: none; }
  .rail-film__altitude { top: auto; right: 20px; bottom: 68px; }
  .rail-film__altitude span { max-width: 160px; font-size: 7px; }
  .rail-film__altitude b { font-size: 24px; }
  .rail-film__brand { padding-inline: 18px; }
  .rail-film__logo { width: 82vw; }
  .rail-film__brandline { font-size: 10px; letter-spacing: .2em; }
  .rail-film__hud { left: 20px; right: 20px; bottom: 20px; gap: 9px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-film { height: 130vh; }
  .rail-film__rush,
  .rail-film__trackside,
  .rail-film__altitude { display: none; }
  .rail-film.is-driving .rail-film__train img { animation: none; }
}

/* ==========================================================================
   Verfeinerung
   Zwei Grundsätze aus der Kritik:
   1. Bewegung ohne Zutun des Nutzers nur an EINER Stelle — dem Hero.
      Eintritts-Reveals auf jedem Abschnitt sind entfallen.
   2. Bewegung als Antwort auf eine Handlung ist willkommen. Dort liegt
      jetzt die Sorgfalt: kurze Wege, eine gemeinsame Kurve.
   ========================================================================== */

:root {
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-micro:   160ms;
  --t-surface: 300ms;
  --t-slow:    620ms;
}

/* Kennzahlen: feste Ziffernbreite, damit nichts springt */
.stat__num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Listenzeilen ohne Nummern: die Linie trägt die Gliederung */




/* Karten */
.card { transition: transform var(--t-surface) var(--ease); }
@media (hover: hover) { .card:hover { transform: translateY(-3px); } }

/* Marker */
.pill {
  background: transparent;
  transition: background-color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}
@media (hover: hover) {
  .pill:hover { background-color: rgba(62, 207, 134, .1); border-color: rgba(62, 207, 134, .85); }
}

/* Leistungsbilder: träger als alles andere, das ist Absicht */
.feature__media img { transition: transform var(--t-slow) var(--ease-soft); }
@media (hover: hover) { .feature:hover .feature__media img { transform: scale(1.03); } }

/* Schaltflächen */
.btn { transition: background-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: translateY(0); }

/* Links: der Unterstrich zieht sich, statt zu erscheinen */
.contact-list a, .legal a, .site-nav__links a, .cert__link {
  transition: color var(--t-micro) var(--ease);
}
.site-nav__links a { position: relative; }
.site-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-surface) var(--ease);
}
@media (hover: hover) { .site-nav__links a:hover::after { transform: scaleX(1); } }
.site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__links a:focus-visible::after { transform: scaleX(1); }

/* Zertifikatszeilen */
.cert__link { transition: padding-inline-start var(--t-surface) var(--ease), color var(--t-micro) var(--ease); }
@media (hover: hover) { .cert__link:hover { padding-inline-start: 12px; } }

/* Tastaturbedienung bekommt dieselbe Rückmeldung wie der Zeiger */
.card:focus-within { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .card, .pill,
  .feature__media img, .btn, .site-nav__links a::after, .cert__link {
    transition-duration: 1ms;
  }
  .feature:hover .feature__media img,
  .card:hover, .btn:hover, .cert__link:hover { transform: none; padding-inline-start: 4px; }
}


/* ==========================================================================
   Nachweise auf der Startseite
   Aufgebaut wie ein Datenblatt: Bezeichnung, Rechtsgrundlage, Gültigkeit.
   Dieselbe Spalten-Rhythmik wie die Kennzahlen, damit der Abschnitt
   dazugehört statt aufgesetzt zu wirken.
   ========================================================================== */

.proof > .wrap { padding-block: 110px; }

.proof__head { max-width: 760px; margin-bottom: 64px; }
.proof__head .lead { margin-top: 22px; max-width: 580px; }

.proof__list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof__item {
  position: relative;
  padding: 38px 32px 38px 0;
  border-right: 1px solid var(--line);
  transition: background-color var(--t-surface) var(--ease);
}
.proof__item:not(:first-child) { padding-left: 32px; }
.proof__item:last-child { border-right: 0; }

.proof__item dt {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 18px;
  min-height: 2.5em;
  transition: transform var(--t-surface) var(--ease);
}
.proof__item dd { margin: 0; }

.proof__basis {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(62, 207, 134, .4);
  border-radius: 2px;
  padding: 7px 13px;
  margin-bottom: 14px;
}
.proof__gueltig {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Die Oberkante zeichnet sich beim Scrollen, wie bei den Karten */
.proof__item::before {
  content: "";
  position: absolute; inset-inline: 0; top: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .proof__item::before {
      animation: drawRule linear both;
      animation-timeline: view();
      animation-range: entry 16% cover 44%;
    }
    .proof__item:nth-child(2)::before { animation-range: entry 20% cover 48%; }
    .proof__item:nth-child(3)::before { animation-range: entry 24% cover 52%; }
  }
}
@supports not (animation-timeline: view()) {
  .proof__item::before { transform: scaleX(1); }
}
@keyframes drawRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: hover) {
  .proof__item:hover { background-color: rgba(62, 207, 134, .035); }
  .proof__item:hover dt { transform: translateX(4px); }
}

.proof__cta { margin-top: 48px; }

@media (max-width: 900px) {
  .proof__list { grid-template-columns: 1fr; }
  .proof__item {
    padding: 32px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .proof__item:not(:first-child) { padding-left: 0; }
  .proof__item:last-child { border-bottom: 0; }
  .proof > .wrap { padding-block: 80px; }
  .proof__head { margin-bottom: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .proof__item, .proof__item dt { transition-duration: 1ms; }
  .proof__item:hover dt { transform: none; }
  .proof__item::before { transform: scaleX(1); }
}


/* ==========================================================================
   Der Markenmoment: ein Strich, eine Kante

   Die Marke ist ein durchgehendes Band mit zwei Kehren. Gemessen am
   Alphakanal (516 × 297):

      y   0–17 %   breites Band, x  0 … 60 %      der obere Arm
      y  17–80 %   schmaler Grat, x 52 → 89 %     die Diagonale
      y  80–100 %  breites Band, x 12 … 99 %      die Basis

   Vorher liefen drei Ebenen mit drei eigenen Schnittkanten über diese
   Form. Das hat vier Fehlerklassen erzeugt, weil die Striche an den
   Bandgrenzen ineinander übergehen:

     · Die Grat-Ebene reichte bis 82,4 % und zeigte damit einen 2,2 %
       hohen, 80 % breiten Streifen des Basis-Bands — als haarfeine
       Nadel quer durch das Bild, auch wenn die Basis längst weg war.
     · Unten rechts blieb ein loser Keil stehen.
     · Senkrechte Schnitte durch das gerade Basis-Band sahen aus wie ein
       Kasten.
     · Der Funke interpolierte zwischen drei Kanten und saß dadurch in
       den Überlappungsfenstern auf keiner davon (gemessen: Funke bei
       x 81 %, Kante bei x 97 %).

   Jetzt trägt eine einzige Ebene eine einzige schräge Kante, die von
   unten nach oben durch die Form wandert. Die Basis verschwindet
   zuerst, dann die Diagonale, zuletzt der Arm — dieselbe Reihenfolge
   wie vorher, aber ohne Bandgrenzen. Der Funke sitzt per Konstruktion
   auf der Kante, weil er dieselbe Variable benutzt. Die Kante fällt
   nach rechts ab, weil der Strich dort hinunterläuft, und zwar um 26 %
   der Höhe: flacher lief sie zu lang durch das waagerechte Basis-Band
   und hinterließ dort einen langen dünnen Keil — wieder eine Form, die
   sich als „Strich" liest.
   ========================================================================== */

@property --zug   { syntax: '<number>'; initial-value: 1; inherits: true; }
@property --blute { syntax: '<number>'; initial-value: 0; inherits: true; }

.scroll-hero {
  --p: var(--hero-progress, 1);
  /* Rückwärts: 1 = Marke steht, 0 = Marke ist fort */
  --zug:   clamp(0, calc((.235 - var(--p)) / .215), 1);
  --blute: clamp(0, calc((var(--p) - .004) / .030), 1);
}

.signet {
  position: relative;
  width: min(15vw, 158px);
  display: block;
  transform: translateY(calc((1 - var(--zug)) * 9px));
  /* Hier und nicht auf .signet__strich: Custom Properties vererben nach
     unten, nicht zu Geschwistern. Auf dem Bild definiert, sah der Funke
     sie nicht, seine Positionierung fiel auf auto zurück und er klebte
     bei x 50 % / y 100 %. Die Kante läuft von 114 % (alles da) auf
     −14 % (nichts mehr), damit die Schräge an beiden Enden die Form
     vollständig verlässt. */
  --kante: calc(var(--zug) * 126% - 13%);
  /* Macht cqw verfügbar, damit der Funke über transform statt über
     left/top gesetzt werden kann — siehe unten. */
  container-type: inline-size;
}

.signet img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Kante läuft von 114 % (alles da) auf −14 % (nichts mehr): so
   verlässt die Schräge an beiden Enden die Form vollständig und
   schneidet im Ruhezustand nichts ab. */
.signet__strich {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(var(--kante) + 13%),
    0 calc(var(--kante) - 13%)
  );
}

/* ---- Der Funke sitzt auf der Kante ----
   Die Höhe ist die Kante selbst. Die Breite folgt dem Strich: er wandert
   mit der Höhe nach rechts (gemessen: Mitte bei y 20 % auf x 52 %, bei
   y 80 % auf x 89 %). Ein weiches Leuchten von 15 % Breite verzeiht die
   paar Prozent Abweichung. */
.signet__funke {
  position: absolute;
  /* left/top lösen pro Bild ein Layout aus. Beim Seitenwechsel, wenn der
     Hauptthread ohnehin mit Navigation und Parsen beschäftigt ist, ruckelt
     die Marke dadurch sichtbar. transform wird dagegen vom Compositor
     erledigt.

     Umgerechnet aus den alten Werten:
       links  = 40 % + .55 × Kante          → 32,85 + 69,3 × zug  (in cqw)
       oben   = 1,143 × Kante − 2,6 %       → 144,018 × zug − 17,459
     Die Höhe ist 297/516 = 0,5756 der Breite, also mal 0,5756 in cqw:
                                            → 82,894 × zug − 10,049
     Die zweite Verschiebung zentriert den Funken auf diesem Punkt. */
  left: 0;
  top: 0;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(calc(32.85cqw + var(--zug) * 69.3cqw),
                       calc(var(--zug) * 82.894cqw - 10.049cqw))
             translate(-50%, -50%);
  pointer-events: none;
  /* null im Ruhezustand und null am Ende, hell nur unterwegs */
  opacity: calc(min(var(--zug) * 6, 1) * min((1 - var(--zug)) * 6, 1));
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, .92) 0%,
    rgba(156, 255, 206, .5) 24%,
    rgba(62, 207, 134, .2) 50%,
    transparent 74%
  );
}

/* ---- Letzter Kontakt an der Spitze der Basis, bevor sie weicht ---- */
.signet__blute {
  position: absolute;
  left: 15%;
  top: 91%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(var(--blute) * (1 - var(--blute)) * 3.4);
  transform: translate(-50%, -50%)
             scale(calc(.4 + var(--blute) * (1 - var(--blute)) * 3.8));
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, .8) 0%,
    rgba(62, 207, 134, .3) 38%,
    transparent 70%
  );
}

@media (max-width: 860px) {
  .signet { width: min(34vw, 140px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hero { --zug: 1; --blute: 0; }
  .signet { transform: none; }
  .signet__funke,
  .signet__blute { display: none; }
}
/* ==========================================================================
   Preloader

   Er benutzt dieselbe Mechanik wie der Markenmoment: --zug treibt eine
   einzige schräge Kante durch die Form, der Funke sitzt darauf. Nur läuft
   sie hier vorwärts — die Marke entsteht von oben nach unten, Arm, Grat,
   Basis. Am Ende steht genau das Bild, mit dem die Hero-Sequenz beginnt;
   der Preloader klappt also nicht weg, er geht über.

   --zug bekommt ausdrücklich den Rückfallwert 0. Ohne ihn stünde vor dem
   ersten Skriptlauf die registrierte Vorgabe 1 im Raum und die fertige
   Marke blitzte kurz auf.
   ========================================================================== */

@property --laden { syntax: '<number>'; initial-value: 0; inherits: true; }

html.laedt { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 96px 24px 90px;          /* wie .scroll-hero__scene--brand */
  background: #050908;

  --zug:   var(--laden, 0);
  /* Das Aufblühen am Strichende zündet erst auf den letzten zehn Prozent */
  --blute: clamp(0, calc((var(--laden, 0) - .9) / .1), 1);
}

/* Die Marke steht kleiner als im Hero und wächst beim Übergeben auf
   dessen Maß. So bleibt der Wechsel auf der Startseite nahtlos — beide
   Marken sitzen in derselben Mitte, nur die Größe zieht nach. */
.preloader .signet {
  /* Nur noch der Maßstab. Das frühere translateY hing an --zug und
     wackelte, seit die Marke nicht mehr gezeichnet wird. */
  transform: scale(var(--pl-skala, .64));
  transition: transform 620ms var(--ease);
}
.preloader--fort .signet { --pl-skala: 1; }

/* Zwischen zwei Fortschrittsmeldungen weich überblenden, sonst ruckelt
   die Marke in Stufen voran. */
/* Nur Deckkraft und Sichtbarkeit laufen über Übergänge. --laden bewusst
   nicht: gemessen bleibt der berechnete Wert auf 0 stehen, sobald die
   Animationsuhr pausiert — der Fortschritt fröre ein. Den Wert treibt
   preloader.js selbst. */
.preloader {
  transition-property: opacity, visibility;
  transition-duration: 620ms;
  transition-timing-function: var(--ease);
}

/* Beim Seitenwechsel liegt der Vorhang schnell; gezeichnet wird in Ruhe.
   Die Marke ist der Auftritt, nicht die Überblendung. */
.preloader--wechsel { transition-duration: 150ms; }

.preloader--fort {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Das Gleis: eine Haarlinie, die mitwächst ----
   Kein Balken mit Rahmen und Rundung — eine Schiene, die sich verlegt. */
.preloader__gleis {
  position: absolute;
  left: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  right: max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  bottom: clamp(34px, 7vh, 64px);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.preloader__gleis i {
  display: block;
  height: 100%;
  /* scaleX statt width: width löst Layout aus, scaleX nicht. */
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--laden, 0));
  background: linear-gradient(90deg,
    rgba(62, 207, 134, .25) 0%,
    var(--accent) 72%,
    var(--accent-lt) 100%);
}

@media (max-width: 860px) {
  .preloader { padding-inline: 18px; }
  .preloader__gleis { left: 20px; right: 20px; }
}

/* Bei reduzierter Bewegung steht die Marke sofort und ohne Überblendung;
   preloader.js beendet dort ohnehin gleich. */
@media (prefers-reduced-motion: reduce) {
  .preloader { --zug: 1; --blute: 0; transition: none; }
  .preloader__gleis { display: none; }
}

/* ==========================================================================
   Leistungs-Vorschau

   Die Startseite zeigt, dass es die drei Felder gibt, und schickt weiter.
   Vorher standen hier dieselben drei Texte wie auf leistungen.html, in
   voller Länge über 1.852 px — eine Startseite, die ihre Unterseiten
   nacherzählt, macht beide überflüssig.
   ========================================================================== */

.teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 30px;
  margin-bottom: 52px;
  border-bottom: 1px solid var(--line);
}
.teaser__mehr {
  font-size: 15px; font-weight: 700; color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px solid rgba(62, 207, 134, .4);
  padding-bottom: 3px;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.teaser__mehr:hover,
.teaser__mehr:focus-visible { color: var(--accent); border-color: var(--accent); }

.teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}

.teaser__kachel {
  display: block;
  color: inherit;
  text-decoration: none;
}
.teaser__bild {
  display: block;
  overflow: hidden;            /* damit der Zoom innen bleibt */
  border-radius: 2px;
  margin-bottom: 22px;
}
.teaser__bild img {
  display: block;
  width: 100%;
  /* height: auto ist nötig, nicht optional: die HTML-Attribute
     width="1600" height="1075" wirken als Darstellungshinweis, und
     aspect-ratio greift nur, wenn die andere Achse auto ist. Ohne das
     stand jedes Bild auf seinen intrinsischen 1075 px — der Abschnitt
     war dadurch 1.666 statt rund 700 px hoch. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.72) contrast(1.04) brightness(.84);
  transform: scale(1.02);
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
.teaser__kachel:hover .teaser__bild img,
.teaser__kachel:focus-visible .teaser__bild img {
  transform: scale(1.07);
  filter: saturate(.9) contrast(1.04) brightness(1);
}

.teaser__titel {
  margin: 0 0 10px;
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 800;
  letter-spacing: -.015em;
}
.teaser__kachel p {
  margin: 0;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1.62;
  max-width: 34ch;             /* kurze Zeilen, es ist eine Vorschau */
}
.teaser__kachel:hover .teaser__titel,
.teaser__kachel:focus-visible .teaser__titel { color: var(--accent); }

@media (max-width: 980px) { .teaser { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .teaser { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .teaser__bild img { transition: none; transform: none; }
  .teaser__kachel:hover .teaser__bild img { transform: none; }
}

/* ==========================================================================
   Haltung: Leitgedanke und Facetten

   Vorher lag die Überschrift in einer schmalen, klebenden linken Spalte
   und der Inhalt quetschte sich rechts in eine lange Kolonne
   gleichförmiger Zeilen mit Haarlinien — eine halbe Bildschirmbreite
   blieb leer, und alle fünf Punkte sahen gleich wichtig aus. Das liest
   sich als Aufzählung, nicht als Haltung.

   Beide Abschnitte tragen aber dieselbe Struktur: ein Leitgedanke und
   vier Facetten. Die bekommt jetzt auch die Form — der Leitgedanke über
   die volle Breite, die Facetten darunter zu zweit. Die Trennung
   besorgen Abstände und eine einzige Linie unter dem Leitgedanken, nicht
   ein Gitter aus Haarlinien.
   ========================================================================== */

/* Der Block läuft schmaler als der übrige Satzspiegel. Bei voller Breite
   waren die Spalten 588 px breit, eine bequeme Textkolonne misst aber
   rund 480 px — der Rest blieb als Leere stehen. Lieber den Block
   zusammenziehen als den Text darin einschnüren. */
.haltung { max-width: 1080px; margin-inline: auto; }

.haltung__kopf { margin-bottom: clamp(44px, 5vw, 72px); }
.haltung__marke {
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 26px;
  background: linear-gradient(90deg, var(--accent), rgba(62, 207, 134, 0));
}

.haltung__raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Spalten weit, Zeilen enger: so lesen die vier als eine Gruppe.
     Vorher standen 96 px neben 68 px und die Reihen trieben auseinander. */
  column-gap: clamp(40px, 5.5vw, 104px);
  row-gap: clamp(38px, 3.4vw, 54px);
}

/* Die vier Facetten tragen eine kurze Marke über der Überschrift —
   dieselbe Form wie unter dem Abschnittstitel. Sie sagt: hier beginnt
   eine der Facetten. Der Leitgedanke bekommt sie nicht, er ist keine. */
.haltung__punkt:not(.haltung__punkt--leit) h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, var(--kontra), rgba(62, 110, 207, .12));
}

.haltung__punkt h3 {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.2;
}

/* Der erste Satz jedes Absatzes steht für sich — das ist in diesen
   Texten durchgängig so geschrieben. Er wird deshalb auch so gesetzt:
   größer, heller, enger geführt. Der Rest tritt zurück. Das ist
   Hierarchie aus dem vorhandenen Text, nicht Zierat obendrauf. */
.haltung__leitzeile {
  margin: 0 0 15px;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.5;
  letter-spacing: -.004em;
  color: var(--text);
  max-width: 34ch;
}
.haltung__punkt p {
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
  color: var(--text-4);
  max-width: 56ch;          /* füllt die 488-px-Spalte, statt sie halb zu lassen */
}

/* ==========================================================================
   Die vier Tafeln: Einstieg in die Seite Verantwortung

   Keine schwebenden Karten mit Schatten — vier Tafeln, die sich eine
   Haarlinie teilen, wie die Zertifikatsliste auf "Über uns". Das ist die
   Sprache, die diese Seite schon spricht, und es sagt das Richtige: vier
   Felder eines Ganzen, nicht vier Produkte.

   Heißen .tafel und nicht .feld: .feld ist seit jeher die Hülle eines
   Formularfeldes auf kontakt.html und bewerbung.html. Die Namensgleichheit
   hat am 15.10.2026 jedes Eingabefeld 236 px hoch gemacht.
   ========================================================================== */
.tafeln-abschnitt { padding-block: clamp(50px, 5.5vw, 92px); }
.tafeln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}
.tafeln > li { display: grid; min-width: 0; }
.tafel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 236px;
  padding: clamp(24px, 2.6vw, 38px);
  color: var(--text-2);
  background: var(--ground) linear-gradient(135deg, rgba(62,207,134,.05), transparent 58%);
  transition: background-color .25s ease, color .25s ease;
}
.tafel:hover,
.tafel:focus-visible { color: var(--text); background-color: rgba(62,207,134,.09); }
.tafel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tafel__titel {
  font-size: clamp(23px, 2.5vw, 36px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-stretch: 104%;
  color: var(--text);
  hyphens: auto;
}
.tafel__zeile { max-width: 32ch; font-size: 16px; line-height: 1.58; }
.tafel__cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tafel__cue::after {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width .25s ease;
}
@media (hover: hover) { .tafel:hover .tafel__cue::after { width: 30px; } }

@media (max-width: 760px) {
  .tafeln { grid-template-columns: minmax(0, 1fr); }
  .tafel { min-height: 0; }
}

/* ==========================================================================
   Bausteine innerhalb eines Abschnitts

   Die Abschnitte sind lang geworden: Grundsätze, Ablauf, Kultur,
   Dokumente. Ohne Zwischenüberschriften wäre das wieder die Textwand,
   die der Kunde zu Recht bemängelt hat.
   ========================================================================== */
/* Zwei Ebenen unter der Kapitelüberschrift, und sie müssen verschieden
   aussehen.

   "Grundsätze" stand vorher in 17 px und Stärke 800 — die Grundsätze
   darunter in 18,7 px und derselben Stärke. Die Überschrift war also
   kleiner als das, was sie überschreibt, und hob sich nicht ab. Vom
   Kunden gemeldet, zu Recht.

   .kapitel__unter ist ein echtes Unterthema: groß, hell, wie eine
   kleine Kapitelüberschrift. .kapitel__zwischen ist nur noch eine
   Beschriftung: klein, gesperrt, gedämpft — erkennbar eine andere Art
   von Sache, nicht bloß eine andere Größe. */
.kapitel__unter {
  margin: clamp(36px, 3.6vw, 54px) 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--text);
}
.kapitel__zwischen {
  margin: clamp(30px, 3vw, 44px) 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}
/* Eine Beschriftung gleich unter einem Unterthema braucht die Trennlinie
   nicht — der Abschnitt hat gerade erst begonnen. */
.kapitel__zwischen--ohne-linie { border-top: 0; padding-top: 0; margin-top: clamp(24px, 2.4vw, 34px); }
/* Der zweite Leitsatz in einem Abschnitt darf dem ersten nicht die Schau
   stehlen — die Sicherheitskultur steht unter der Sicherheit, nicht
   daneben. */
.kapitel__satz--klein { font-size: clamp(19px, 1.7vw, 23px); margin-bottom: 14px; }

/* Grundsätze: Begriff links, Erklärung rechts. So schreibt ein
   Qualitätshandbuch Festlegungen, und man überfliegt die Begriffe, ohne
   alles zu lesen. Nummern stehen bewusst nicht davor: das Verzeichnis
   links zählt schon. */
.grundsaetze { margin: 0; }
.grundsatz {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line);
}
.grundsatz:last-child { border-bottom: 1px solid var(--line); }
.grundsatz dt {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--text);
  padding-top: 2px;
}
.grundsatz dd {
  margin: 0;
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text-3);
}

/* Kurze Festlegungen, die für sich stehen: zwei Spalten, damit die vier
   als Gruppe lesen statt als Liste in die Länge zu laufen. Ein grüner
   Strich statt eines Hakens — Haken behaupten Erledigung. */
.merkmale {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.merkmale li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.merkmale li::before {
  content: "";
  position: absolute;
  top: .66em;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--accent);
}

/* Der Ablauf ist das einzige auf dieser Seite, das wirklich eine Folge
   ist — deshalb hier Nummern, und nur hier. Der fünfte Schritt führt
   zurück zum ersten; das sagt die Beschriftung, nicht ein Pfeilkreis. */
.ablauf {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  padding: 1px;
  list-style: none;
  background: rgba(255, 255, 255, .09);
}
.ablauf li {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 14px;
  /* Durchscheinend statt var(--ground): dieser Abschnitt liegt auf dem
     navyfarbenen Verlauf, eine feste Fläche risse Löcher hinein. */
  background: rgba(255, 255, 255, .04);
}
.ablauf__nr { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.ablauf__name { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--text); }

@media (max-width: 760px) {
  .grundsatz { grid-template-columns: 1fr; row-gap: 9px; }
  .grundsatz dt { padding-top: 0; }
  .merkmale { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li { flex-direction: row; align-items: baseline; gap: 14px; padding: 13px 14px; }
}

/* ---------- Dokumentenliste in der schmalen Spalte ----------
   Die Zertifikatskacheln von "Über uns" sind 154 px hoch und zweispaltig;
   in der 670-px-Textspalte wird daraus Gedränge. Hier dieselbe Zeile,
   nur flach und einspaltig — und ohne eigene Fläche, damit sie auch auf
   dem abgesetzten Abschnitt liegt, ohne ihn zu zerschneiden. */
.certs--schmal {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: none;
}
.certs--schmal .cert { background: none; border-top: 1px solid var(--line); }
.certs--schmal .cert:last-child { border-bottom: 1px solid var(--line); }
.certs--schmal .cert__link {
  min-height: 0;
  gap: 18px;
  padding: 17px 0;
  background-image: none;
}
.certs--schmal .cert__icon { width: 34px; height: 40px; }
.certs--schmal .cert__title { font-size: 16.5px; }
@media (hover: hover) { .certs--schmal .cert__link:hover { padding-inline-start: 10px; } }

/* Dokumente, die es noch nicht gibt, sehen aus wie die anderen — aber
   gestrichelt und in Warnfarbe, und sie sind kein Link. Beim Livegang
   darf keine dieser Zeilen mehr auf der Seite sein. */
.cert--fehlt .cert__link { color: var(--text-4); background: none; }
.cert--fehlt .cert__icon { border-style: dashed; border-color: rgba(232, 164, 106, .5); color: var(--warm); }
.cert--fehlt .cert__title { color: var(--text-3); }
.cert--fehlt .cert__meta { color: var(--warm); }

/* Der Leitgedanke trägt den Abschnitt: volle Breite, größer gesetzt, und
   als einziger mit einer Linie darunter — sie trennt These von Facetten. */
/* Der Leitgedanke spannt über beide Spalten — dann muss er sie auch
   füllen. Titel über die ganze Breite, darunter die Aussage links und
   die Erläuterung rechts. Sonst stünde sein Text in der linken Hälfte
   und die rechte bliebe leer, derselbe Fehler eine Ebene höher. */
.haltung__punkt--leit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5.5vw, 104px);
  row-gap: 0;
  align-items: start;
  padding-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.haltung__punkt--leit h3 { grid-column: 1 / -1; }
.haltung__punkt--leit h3 {
  font-size: clamp(21px, 1.9vw, 28px);
  margin-bottom: 18px;
}
.haltung__punkt--leit .haltung__leitzeile {
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.42;
  color: var(--text);
  max-width: 30ch;
}
.haltung__punkt--leit p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-3);
  max-width: 56ch;
}

@media (max-width: 760px) {
  .haltung__punkt--leit { grid-template-columns: 1fr; row-gap: 14px; }
}

@media (max-width: 760px) {
  .haltung__raster { grid-template-columns: 1fr; row-gap: 38px; }
}


/* ==========================================================================
   Farbe im System

   Drei Töne mit festen Rollen statt bunter Flecken:
     Grün    Marke, Handlung, Markenmoment
     Blau    Struktur — Marken an Facetten, Rechtsgrundlagen, zweiter Grund
     Bernstein  Zahlen und Belege; der warme Gegenpol zum kühlen Grün

   Die Rollen sind der Punkt. Eine Farbe, die überall auftaucht, ist
   Dekoration; eine Farbe mit einer Aufgabe ist Gestaltung.
   ========================================================================== */

/* Rechtsgrundlagen sind Struktur, nicht Marke */
.proof__basis { color: var(--kontra-lt); }
.proof__gueltig { color: var(--text-4); }

/* Zweiter tiefer Grund, damit nicht jeder dunkle Abschnitt gleich aussieht */
.section--deep-2 { background: var(--deep-2); }

/* Die Kennzahlen bekommen eine warme Grundlinie */
.stats .stat { position: relative; }
.stats .stat::before {
  content: "";
  position: absolute;
  left: 0; top: -14px;
  width: 30px; height: 2px;
  background: linear-gradient(90deg, var(--warm), rgba(232, 164, 106, .12));
  transform-origin: left;
}

/* Verweise im Fließtext tragen die Gegenfarbe, Handlungen bleiben grün */
.haltung a:not(.btn),
.section p a:not(.btn) {
  color: var(--kontra-lt);
  text-decoration-color: rgba(126, 158, 228, .45);
  text-underline-offset: 3px;
  transition: color var(--t-micro) var(--ease);
}
.haltung a:not(.btn):hover,
.section p a:not(.btn):hover { color: var(--warm); }

/* ---- Bewegung: die Marken zeichnen sich beim Eintreten ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .haltung__marke,
    .haltung__punkt:not(.haltung__punkt--leit) h3::before,
    .stats .stat::before {
      animation: markeZieht linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
    @keyframes markeZieht { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .haltung__marke { transform-origin: left; }
    .haltung__punkt h3::before { transform-origin: left; }
  }
}


/* ==========================================================================
   Die Einfahrt

   Das Zeichen ist eine Bewegungsmarke — ein Schwung, der nach rechts
   zieht. Es soll deshalb nicht entstehen, sondern einfahren: von links
   herein, hart abbremsend, wie etwas, das zum Stehen kommt.

   Bewusst nur transform und opacity. Das sind die einzigen beiden
   Eigenschaften, die der Compositor ohne den Hauptthread erledigt —
   damit kann die Bewegung gar nicht stottern, egal was sonst lädt.
   Vorher liefen hier clip-path und eine aufblendende Ebene gegeneinander.

   Die Schleppe ist der ganze Trick: dieselbe Marke, weiter hinten,
   etwas später, schwächer — und sie holt auf. Das liest das Auge als
   Tempo, nicht als zweites Bild.
   ========================================================================== */

/* Im Preloader wird nicht beschnitten — die Marke steht vollständig und
   fährt ein. Ohne diese Aufhebung trüge sie den Beschnitt des Heros und
   wäre bei --zug: 0 restlos weggeschnitten. */
.preloader .signet__strich { clip-path: none; }

.signet--einfahrt { --takt: 760ms; }
.signet--zuegig   { --takt: 520ms; }   /* beim Verlassen knapper */

/* Bei der Ankunft steht die Marke schon — sie ist auf der alten Seite
   eingefahren. Eine zweite Einfahrt wäre eine Wiederholung. */
.signet--steht .signet__strich { animation: none; }
.signet--steht .signet__spur   { display: none; }

.signet--einfahrt .signet__strich {
  /* Nicht cubic-bezier(.16,1,.3,1): das ist so kopflastig, dass die Marke
     nach einem Fünftel der Zeit schon fast steht — man sieht die Fahrt
     gar nicht. Diese Kurve bremst spürbar über den ganzen Weg. */
  animation: signetEin var(--takt) cubic-bezier(.19, .84, .26, 1) both;
}

.signet__spur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.signet--einfahrt .signet__spur {
  animation: signetSpur calc(var(--takt) + 140ms) cubic-bezier(.19, .84, .26, 1) both;
}

@keyframes signetEin {
  from { transform: translate3d(-34%, 8%, 0) scale(.955); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes signetSpur {
  from { transform: translate3d(-56%, 14%, 0) scale(.93); opacity: 0; }
  22%  { opacity: .38; }
  to   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signet--einfahrt .signet__strich,
  .signet--einfahrt .signet__spur { animation: none; }
  .signet__spur { display: none; }
}



/* ==========================================================================
   Kontaktseite

   Aufbau nach der Vorlage von hamburgerrailservice.de/kontakt — Wege,
   Öffnungszeiten, Formular. Die Gestalt bleibt die unsere: eine
   Schwesterfirma am selben Standort sollte erkennbar verwandt, aber
   nicht verwechselbar sein.
   ========================================================================== */

.kontakt__wege { margin: 0; }
.kontakt__weg {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-block: 26px;
  border-top: 1px solid var(--line);
}
.kontakt__weg:last-child { border-bottom: 1px solid var(--line); }
.kontakt__weg dt {
  font-size: 14px; font-weight: 600; letter-spacing: 0;
  color: var(--text-4);
}
.kontakt__weg dd {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 700; letter-spacing: -.012em;
  line-height: 1.45;
}
.kontakt__weg dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(62,207,134,.42); }
.kontakt__weg dd a:hover,
.kontakt__weg dd a:focus-visible { color: var(--accent); border-color: var(--accent); }

@media (max-width: 680px) {
  .kontakt__weg { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Wege und Zeiten nebeneinander ----
   Zwei gleich breite Spalten mit je einer ruhigen Überschrift. Vorher
   stand eine 54-px-Versalüberschrift in einer 458 px schmalen Spalte —
   "ÖFFNUNGSZEITEN" ist dort 585 px breit und lief in die Tabelle. Eine
   Datenangabe braucht keine Plakatschrift. */
.erreichbar {
  padding-block: clamp(64px, 7vh, 104px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.erreichbar__titel {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.008em;
  color: var(--text);
}

.zeiten { width: 100%; border-collapse: collapse; }
.zeiten__hinweis {
  caption-side: bottom;
  margin-top: 16px;
  font-size: 13px; color: var(--warm);
  text-align: left;
}
/* Haarlinien statt Zebrastreifen: ruhiger und leichter zu lesen */
.zeiten tr { border-bottom: 1px solid var(--line); }
.zeiten tr:first-child { border-top: 1px solid var(--line); }
.zeiten th, .zeiten td { padding: 12px 2px; font-size: 15px; }
.zeiten th { text-align: left; font-weight: 600; color: var(--text-2); }
.zeiten td { text-align: right; color: var(--text-4); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .erreichbar { grid-template-columns: 1fr; gap: 48px; }
}

/* ---- Formular ---- */
.formular { max-width: 860px; }
.formular__zeile { display: grid; gap: clamp(18px, 2vw, 28px); margin-bottom: clamp(18px, 2vw, 28px); }
.formular__zeile--drei { grid-template-columns: minmax(140px, .7fr) 1fr 1fr; }
.formular__zeile--zwei { grid-template-columns: 1fr 1fr; }

.feld { margin: 0 0 clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 9px; }
.feld label { font-size: 14px; font-weight: 600; color: var(--text-4); }
.feld label span { color: var(--warm); }

.feld input,
.feld select,
.feld textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: rgba(242, 246, 243, .035);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 16px;
  min-height: 52px;              /* bequem zu treffen */
  width: 100%;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.feld textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(62, 207, 134, .06);
}

/* Zustimmung: Haken neben Text, nicht darüber */
.feld--haken {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}
.feld--haken input {
  width: 22px; height: 22px; min-height: 0;
  flex: 0 0 auto; margin-top: 2px;
  accent-color: var(--accent);
  padding: 0;
}
.feld--haken label {
  font-size: 15px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--text-3); line-height: 1.6;
}
.feld--haken label a { color: var(--kontra-lt); }

.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 34px; }
.formular__meldung { font-size: 15px; color: var(--text-3); }
.formular__meldung[data-art="fehler"] { color: var(--warm); }
.formular__meldung[data-art="ok"] { color: var(--accent); }

@media (max-width: 760px) {
  .formular__zeile--drei,
  .formular__zeile--zwei { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Stellenangebote

   Aufbau nach hamburgerrailservice.de/stellenangebote: Bild links, Titel,
   eine Zeile, Weiterführung. Waagerecht statt als Kachelraster, weil eine
   Stellenliste gelesen und nicht überflogen wird.
   ========================================================================== */

.stellen { display: grid; gap: clamp(22px, 2.6vw, 36px); }

.stelle {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) 3fr;
  gap: clamp(26px, 3.4vw, 54px);
  align-items: center;
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.stelle:last-child { border-bottom: 1px solid var(--line); }

.stelle__bild { display: block; overflow: hidden; border-radius: 2px; }
.stelle__bild img {
  display: block;
  width: 100%;
  height: auto;                /* nötig, sonst gewinnt das height-Attribut */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.72) contrast(1.04) brightness(.84);
  transform: scale(1.02);
  transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
.stelle__bild:hover img,
.stelle__bild:focus-visible img { transform: scale(1.06); filter: saturate(.9) brightness(1); }

/* Die Initiativ-Zeile hat kein Bild und nimmt die ganze Breite */
.stelle--offen { grid-template-columns: 1fr; }

.stelle__titel {
  margin: 0 0 12px;
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 800;
  letter-spacing: -.016em;
}
.stelle__text p { margin: 0 0 14px; color: var(--text-3); font-size: 16px; line-height: 1.68; max-width: 56ch; }

.stelle__merkmale { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.stelle__link {
  display: inline-block;
  font-size: 15px; font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(62, 207, 134, .45);
  padding-bottom: 3px;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.stelle__link:hover,
.stelle__link:focus-visible { color: var(--accent); border-color: var(--accent); }

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

@media (prefers-reduced-motion: reduce) {
  .stelle__bild img { transition: none; transform: none; }
  .stelle__bild:hover img { transform: none; }
}


/* ==========================================================================
   Lange Wörter brechen, statt überzulaufen

   "ÖFFNUNGSZEITEN" war bei 54 px 585 px breit und stand in einer 458 px
   schmalen Spalte — es lief einfach darüber hinaus, weil Text seine Box
   nicht sprengt, sondern überdeckt. Deshalb grundsätzlich: Trennung nach
   deutschen Regeln (das Dokument ist lang="de"), und wenn das nicht
   reicht, wird umgebrochen. Ein getrenntes Wort ist unschön, ein
   überlappendes ist ein Fehler.
   ========================================================================== */
h1, h2, h3, .h2, .h3,
.feature__title, .teaser__titel, .stelle__titel, .erreichbar__titel {
  hyphens: auto;
  overflow-wrap: break-word;
}


/* ---- Bewerbungsseite: was wir brauchen ---- */
.unterlagen { margin: 0; padding: 0; list-style: none; }
.unterlagen li {
  padding: 12px 0 12px 22px;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.unterlagen li:first-child { border-top: 1px solid var(--line); }
/* Ein kurzer Strich statt eines Aufzählungspunkts — dieselbe Sprache wie
   die Marken an den Facetten, nur kleiner. */
.unterlagen li::before {
  content: "";
  position: absolute;
  left: 0; top: 21px;
  width: 11px; height: 2px;
  background: var(--kontra);
}
.unterlagen__hinweis {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-4);
  max-width: 48ch;
}

/* ==========================================================================
   Kontaktkarte: Streckenkarte neben dem Formular

   Links eine gepunktete Deutschlandkarte, auf der Strecken ab Hamburg
   abgefahren werden (karte.js), rechts das Formular. Zwei Hälften in
   einem Kasten, damit das Formular nicht allein auf weiter Flur steht.

   Unter 900 px stapeln sie: die Karte als Streifen obendrüber. Sie
   verschwindet nicht — sie ist die Aussage "deutschlandweit", und die
   gilt auf dem Telefon genauso.
   ========================================================================== */
.karte {
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ground-2);
}

.karte__seite {
  position: relative;
  min-height: 520px;
  border-right: 1px solid var(--line);
  background: linear-gradient(168deg, #0A1510, var(--ground-2) 72%);
}

/* Der Halter gibt der Leinwand ihre Größe; karte.js liest sie ab und
   rechnet daraus Maßstab und Rasterweite. */
.karte__flaeche { position: absolute; inset: 0; }
.karte__flaeche canvas { display: block; width: 100%; height: 100%; }

/* Die Zeile steht unten über einem Schleier, sonst liegt sie auf den
   Punkten und beides wird unlesbar. */
.karte__zeile {
  position: absolute;
  inset: auto 0 0 0;
  padding: 54px clamp(22px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px);
  background: linear-gradient(180deg, transparent, rgba(5, 7, 6, .82) 46%, var(--ground-2));
}
.karte__zeile h2 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--text);
}
.karte__zeile p {
  margin: 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-4);
}

.karte__form { padding: clamp(28px, 3.2vw, 52px); }
.karte__form > h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
}
.karte__form > p {
  margin: 0 0 34px;
  font-size: 15px;
  color: var(--text-4);
}

@media (max-width: 900px) {
  .karte { grid-template-columns: minmax(0, 1fr); }

  /* Gestapelt statt übereinander: die Karte bekommt ihre Höhe ganz, die
     Zeile stellt sich darunter. Als Schleier über einer 300 px hohen
     Karte bliebe für Deutschland die Hälfte übrig. */
  .karte__seite {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .karte__flaeche { position: relative; inset: auto; height: 300px; }
  .karte__zeile {
    position: static;
    padding: 4px clamp(22px, 2.6vw, 34px) 30px;
    background: none;
  }
}

/* ==========================================================================
   Telefon: Tippziele

   Gemessen auf allen neun Seiten bei 375 px: kein Querscroll, kein
   Textüberlauf — aber neun Arten von Tippzielen unter 44 px. Die
   schlimmsten waren die Links der Kopfnavigation mit 18 px Höhe.

   44 px ist das Maß von Apple, 48 dp das von Material; WCAG 2.2 verlangt
   als Untergrenze 24 px. Hier wird auf 44 gegangen, wo ein Ziel für sich
   steht. Links mitten in einem Satz bleiben, wie sie sind — die nimmt
   WCAG ausdrücklich aus, und Fließtext auseinanderzuziehen, nur damit
   ein Link größer wird, macht den Text schlechter, nicht die Seite
   bedienbarer.

   Gelöst mit Innenabstand statt mit Höhe: ein größerer Kasten um
   dieselbe Schrift. Dadurch verschiebt sich nichts im Satzbild.
   ========================================================================== */
@media (max-width: 860px) {

  /* Kopfnavigation: 45x18 bis 71x18 → volle Zeilenhöhe. Der Abstand
     untereinander bleibt, weil der Innenabstand symmetrisch ist. */
  .site-nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Die Unterstreichung hing an der Textunterkante und würde durch den
     Innenabstand mitwandern — sie bleibt an der Schrift. */
  .site-nav__links a::after { bottom: 12px; }

  /* Logo: 108x34. Feste Tipphöhe statt Innenabstand — das Bild ist
     unter 560 px nur 30 px hoch, ein fester Abstand hätte dort 40 px
     ergeben. So sind es in jeder Breite 44. */
  .site-nav__logo {
    height: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Knopf: 90x41, drei Pixel zu wenig. Die Höhe kam nicht aus .btn,
     sondern aus `.site-nav > .btn { min-height: 40px }` unter 560 px —
     der Kopfknopf wird dort bewusst kleiner, damit die Zeile passt. Der
     Selektor ist spezifischer, also muss er hier mit angesprochen
     werden. Schmaler darf er bleiben, flacher als 44 px nicht; Platz
     ist in der Zeile genug (Logo 108 px + Knopf 90 px auf 339 px). */
  .btn { min-height: 46px; }
  .site-nav > .btn { min-height: 44px; }

  /* Eigenständige Verweise, die für sich in einer Zeile stehen:
     "Alle Leistungen ansehen", "Mehr zu unserer Haltung" und die Links
     der Stellenliste. Alle drei tragen .teaser__mehr oder
     .stelle__link — der Verweis auf die Haltung hatte vorher gar keine
     Klasse, einen Inline-Stil und einen Pfeil im Text; er trägt jetzt
     dasselbe Idiom wie der daneben. */
  .teaser__mehr,
  .stelle__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Telefonnummer und E-Mail auf der Kontakt- und Bewerbungsseite. Auf
     dem Telefon sind das die beiden Dinge, die wirklich angetippt
     werden — 20 px waren dafür zu wenig. Drei Klassen, weil die
     Startseite .contact-list benutzt und die Kontakt- und
     Bewerbungsseite .kontakt__wege in .erreichbar. */
  .kontakt__wege dd a,
  .erreichbar dd a,
  .contact-list dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Zustimmungshaken: 22x22 lag unter den 24 px, die WCAG 2.2 als
     Untergrenze nennt. Der Beschriftungstext schaltet ihn mit, das
     eigentliche Ziel ist also größer — sichtbar war er trotzdem zu
     klein. */
  .feld--haken input[type="checkbox"] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  /* Der Verweis auf die Datenschutzerklärung steht mitten im
     Zustimmungssatz. WCAG nimmt Links im Satz von der Mindestgröße aus,
     und den Satz auseinanderzuziehen wäre schlechter als ein kleiner
     Link. Innenabstand an einem Inline-Element vergrößert die
     Trefffläche aber, ohne die Zeilen zu verschieben: aus 16 px werden
     24, also die Untergrenze, bei unverändertem Satzbild. */
  .feld--haken label a { padding-block: 4px; }

  /* Dasselbe für die Links im Rechtstext von Impressum und
     Datenschutz — E-Mail-Adresse und die Schlichtungsplattform der
     EU-Kommission standen bei 17 und 19 px — und für Verweise in
     Fließtextabsätzen, etwa der Hinweis auf die Unternehmenspolitik im
     Auftakt der Jobs-Seite. */
  .legal a,
  main .lead a { padding-block: 4px; }
}

/* ==========================================================================
   Was der Kunde noch liefern muss

   Sichtbar und als Baustelle erkennbar, nicht als fertiger Text. Dieselbe
   Absicht wie die Platzhalter in eckigen Klammern: der Kunde sieht beim
   Durchgehen genau, was fehlt, statt dass wir etwas erfinden. Beim
   Livegang muss keiner dieser Blöcke mehr auf der Seite sein — sie
   fallen durch den Rahmen auf.
   ========================================================================== */
.fehlt {
  border: 1px dashed rgba(232, 164, 106, .5);
  border-radius: 3px;
  padding: clamp(22px, 2.6vw, 34px);
  background: rgba(232, 164, 106, .045);
}
.fehlt__marke {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--warm);
}
.fehlt p { margin: 0; color: var(--text-3); font-size: 16px; line-height: 1.65; }
.fehlt p + p { margin-top: 12px; }
.fehlt ul { margin: 12px 0 0; padding-left: 20px; color: var(--text-3); font-size: 16px; line-height: 1.7; }

/* ==========================================================================
   Unternehmenspolitik: ein Dokument, keine Werbeseite

   Die Seite trägt vier formale Selbstverpflichtungen — Ziele, Politik,
   Sicherheitsordnung, Nachhaltigkeit. Das liest kein Besucher aus
   Neugier: das liest ein Auditor, eine Einkaufsabteilung, ein Bewerber,
   der wissen will, worauf er sich einlässt. Also soll die Seite aussehen
   wie ein gut gesetztes Dokument und nicht wie eine Textwand.

   Erster Entwurf war genau diese Wand: drei Abschnitte hintereinander
   im gleichen Zweispaltenmuster, 2.000 px Prosa, zwei Bilder auf der
   ganzen Seite. Drei Dinge dagegen:

   1. Ein Verzeichnis, das mitläuft. Links stehen die vier Kapitel und
      bleiben stehen, während rechts gelesen wird — man weiß immer, wo
      man ist und was noch kommt. Der Platz dafür ist ohnehin da.
   2. Jedes Kapitel beginnt mit einem Satz in Lesegröße, danach kommt
      das Kleingedruckte. Aus 162 Wörtern Blocktext wird eine Aussage
      mit Begründung.
   3. Rhythmus über den Grund: die Kapitel wechseln den Untergrund, so
      fühlt sich das Scrollen wie Umblättern an statt wie Rollen.
   ========================================================================== */
.politik {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 72px);
  /* Schmaler als der Satzspiegel der übrigen Seiten (1320). Bei voller
     Breite blieben rechts neben jedem Kapitel 400 px leer, weil der Text
     ohnehin bei 62 Zeichen endet — ein Band Text in einer Leere. Ein
     Dokument darf schmaler sein als eine Werbeseite; der Wechsel von
     breitem Hero zu schmalem Satz macht den Unterschied sichtbar. */
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 24px;
  align-items: start;
}

/* ---- Das Verzeichnis ---- */
.politik__index {
  position: sticky;
  top: calc(var(--kopf) + 28px);
  padding-top: 6px;
}
.politik__index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kapitel;
}
.politik__index li { counter-increment: kapitel; }
.politik__index li + li { margin-top: 2px; }
.politik__index a {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-4);
  transition: color var(--t-micro) var(--ease);
}
.politik__index li:last-child a { border-bottom: 1px solid var(--line); }
/* Die Zahl steht für die Reihenfolge im Dokument, nicht für einen
   Arbeitsschritt — darum klein und leise, nicht als Auszeichnung. */
.politik__index a::before {
  content: counter(kapitel, decimal-leading-zero);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-4);
  opacity: .6;
  padding-top: 2px;
}
.politik__index a:hover,
.politik__index a:focus-visible { color: var(--text); }
.politik__index a[aria-current="true"] { color: var(--accent); }
.politik__index a[aria-current="true"]::before { color: var(--accent); opacity: 1; }

/* ---- Die Kapitel ---- */
.politik__text > section {
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.politik__text > section:first-child { border-top: 0; padding-top: 0; }

.kapitel__titel {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-transform: uppercase;
}
/* Der tragende Satz in Lesegröße, das Übrige kleiner und ruhiger.
   Dasselbe Verhältnis wie bei .haltung__leitzeile auf den anderen
   Seiten — ein Muster, nicht zwei. */
.kapitel__satz {
  margin: 0 0 20px;
  max-width: 30ch;
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 450;
  line-height: 1.26;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
}
.kapitel__text {
  margin: 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text-3);
}
.kapitel__text + .kapitel__text { margin-top: 16px; }

/* Rhythmus: das dritte Kapitel steht auf dem Gegenblau, damit die
   Sicherheitsordnung sich als eigener Teil absetzt. */
/* Sprungziele der vier Felder und des Verzeichnisses: ohne diesen Abstand
   landet die Überschrift hinter dem klebenden Seitenkopf — gemessen 73 px
   bei 91 px Kopfhöhe. --kopf ist je Breakpoint gesetzt, der Abstand
   wandert also mit. */
.politik__text > section { scroll-margin-top: calc(var(--kopf) + 24px); }

.kapitel--abgesetzt {
  margin-inline: calc(-1 * clamp(18px, 2.4vw, 34px));
  padding-inline: clamp(18px, 2.4vw, 34px);
  border-radius: 3px;
  /* Der Abschnitt ist mit den neuen Inhalten rund 1500 px hoch. Liefe der
     Verlauf über die ganze Höhe, wäre er ein kaum sichtbarer Schleier;
     auf 560 px festgelegt hat er einen klaren Kopf und gibt dann frei. */
  background: linear-gradient(180deg, rgba(15, 27, 51, .55), rgba(15, 27, 51, 0) 560px);
}

@media (max-width: 900px) {
  /* Ein klebendes Verzeichnis neben 375 px Text ergibt keinen Sinn —
     es wird zur Liste über dem Dokument. */
  .politik { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .politik__index {
    position: static;
    margin-bottom: 36px;
    padding-top: 0;
  }
  .politik__index a { padding: 13px 0; }
}

/* ==========================================================================
   Bildband über volle Breite

   Vorher saß das Bild im Satzspiegel, mit 24 px Rand links und rechts und
   120 px Abstand nach unten — das liest sich als unfertiger Kasten, nicht
   als Band. Jetzt läuft es von Kante zu Kante und stößt unten ohne Fuge
   an den nächsten Abschnitt. Oben bleibt Luft, weil darüber der schmale
   Dokumentsatz endet und der Sprung sonst hart käme.
   ========================================================================== */
.bildband {
  overflow: hidden;
  margin-top: clamp(44px, 6vw, 92px);
  margin-bottom: 0;
}
.bildband img {
  display: block;
  width: 100%;
  /* Höher als die alten 440 px: ein Band, das die Breite trägt, braucht
     auch Höhe, sonst wird es ein Streifen. Die Obergrenze wächst ab etwa
     2100 px Fensterbreite mit, sonst wird das Band so flach, dass die
     Sonne oben aus dem Ausschnitt fällt. */
  height: clamp(320px, 52vh, max(620px, 29vw));
  object-fit: cover;
  /* Das Bild ist 2,39:1, das Band bis zu 4,6:1 — es bleibt also ein
     waagerechter Streifen übrig. 85 % hält bei jeder Fensterbreite beides
     im Bild: die Sonne am Fluchtpunkt und die glänzenden Schienen im
     Vordergrund. Bei 50 % wäre der Vordergrund weg, bei 100 % die Sonne. */
  object-position: center 85%;
}
/* Kein zoom-out auf diesem Bild: die Klasse skaliert auf 1,22 und würde
   den Ausschnitt noch weiter zusammenziehen. */

@media (max-width: 860px) {
  /* Auf dem Telefon ist ein 2,39:1-Band nur 157 px hoch — zu schmal für
     ein Bild, das eine Landschaft zeigt. Dort 3:2, dafür wird links und
     rechts beschnitten; die Sonne und die Strecke liegen in der Mitte und
     bleiben drin. */
  .bildband img { height: auto; aspect-ratio: 3 / 2; }
}