/* ==========================================================================
   GALVORN — styles.css
   Tokens extracted from test-claude.fig · 12-col grid · 80px margin · 24px gutter
   Breakpoint scope: 1440px reference (fluid below via max-width; further
   breakpoints get added as media-query overrides in a later pass)
   ========================================================================== */

/* ---------- Fonts (variable, one file per style = fast) ---------- */
@font-face {
  font-family: "Red Hat Display";
  src: url("../assets/fonts/RedHatDisplay-VF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/* ---------- Design tokens ---------- */
:root {
  /* brand (Figma variables) */
  --blue-05: #AAC0ED;
  --blue-1: #5682DC;
  --blue-3: #253D70;
  --blue-35: #162648;     /* Sektionston der Karten-Bänder (Figma 297:727) */
  --blue-4: #0C1C3E;
  --blue-5: #070E20;
  --yellow: #E2B22B;
  --yellow-2: #D99F00;
  --error: #C4453A;        /* Fehlerrot auf Hell — 4,93:1 auf Weiß */
  --error-hell: #F0857A;   /* Fehlerrot auf Dunkel */
  --charcoal: #37414F;
  --white: #FFFFFF;
  --black: #000000;
  --dark-grey-2: #252525;

  /* greys (consolidated from page usage) */
  --grey-100: #F4F4F4;
  --grey-200: #ECECEC;
  --grey-300: #E3E3E3;
  --grey-400: #CFCFCF;
  --grey-500: #9A9A9A;
  --grey-600: #6B6B6B;
  --grey-800: #2A2A2A;
  /* Echtes Schwarz: #1E1E1E wirkte mit 400er-Schnitt + Antialiasing „grau" */
  --text-dark: #000000;
  --train-window: #46618A;

  /* gradients */
  --grad-hero: linear-gradient(135deg, var(--blue-5) 0%, var(--blue-4) 100%);
  --grad-panel: linear-gradient(180deg, var(--blue-3) 0%, var(--blue-4) 100%);
  --grad-card: linear-gradient(120deg, var(--blue-5) 0%, var(--blue-4) 100%);

  /* type */
  --font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: 64px;      /* page hero H1 (unified from 62/64) */
  --fs-stat: 68px;
  --fs-h2: 40px;
  --fs-lead: 24px;
  --fs-body: 16px;
  --fs-small: 12px;
  --ls-wide: 0.05em;       /* 5% */
  --ls-wider: 0.10em;      /* 10% */
  --ls-widest: 0.11em;     /* 11% */

  /* spacing — 8px system */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px;
  --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px; --s-16: 128px;

  /* layout */
  --page-margin: 80px;
  --content-max: 1280px;
  /* Spaltenmaße des 12er-Rasters: 80 px Rand, 24 px Rinne.
     Damit hängen Textbreiten am Raster statt an gegriffenen Zahlen.
     --sp6 heißt "sechs Spalten breit". */
  --spalte: calc((var(--content-max) - 11 * var(--gutter)) / 12);
  --sp2:  calc(2  * var(--spalte) + 1  * var(--gutter));
  --sp3:  calc(3  * var(--spalte) + 2  * var(--gutter));
  --sp4:  calc(4  * var(--spalte) + 3  * var(--gutter));
  --sp5:  calc(5  * var(--spalte) + 4  * var(--gutter));
  --sp6:  calc(6  * var(--spalte) + 5  * var(--gutter));
  --sp7:  calc(7  * var(--spalte) + 6  * var(--gutter));
  --sp8:  calc(8  * var(--spalte) + 7  * var(--gutter));
  --sp9:  calc(9  * var(--spalte) + 8  * var(--gutter));
  --sp10: calc(10 * var(--spalte) + 9  * var(--gutter));
  --sp11: calc(11 * var(--spalte) + 10 * var(--gutter));
  --gutter: 24px;

  /* radii */
  --r-card: 16px;
  --r-pill: 110px;
  --r-tile: 8px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  /* Grundwert 1: alle einzeiligen Elemente (Label, Badges, Kennzahlen, H3)
     sind gegen diesen Wert auf das Figma-Raster gesetzt. Nicht global ändern —
     das verschiebt die halbe Seite. Fließtext bekommt seinen Wert unten. */
  line-height: 1;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
button { font: inherit; letter-spacing: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--blue-1); color: var(--white); }

/* ---------- Layout: container + 12-col grid ---------- */
.wrap {
  max-width: calc(var(--content-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* ---------- Typography helpers ---------- */
.display {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
}
.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: var(--ls-wide);
}
.body-copy { line-height: 1.5; }        /* UX fix: multi-line body reads at 150%, not 100% */
.overline {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.small-caps {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.on-dark { color: var(--white); }

/* ---------- CTA buttons (5 Figma variants) ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: 1.3;
  white-space: nowrap;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), background-color .34s ease, border-color .34s ease;
}
.cta:hover { transform: translateY(-4px); }
.cta:active { transform: translateY(0); }

/* Die Glas-Variante wurde im Aug 2026 ausgemustert („wirkt alt") —
   Primärknöpfe auf Dunkel sind jetzt durchgehend cta--white. */

.cta--white { color: var(--black); background: var(--white); box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.cta--white:hover { background: var(--grey-200); }

.cta--blue { color: var(--white); background: var(--blue-4); padding: 16px 40px; }
.cta--blue:hover { background: var(--blue-3); }

.cta--outline { color: var(--white); background: transparent; border: 1px solid var(--white); padding: 16px 40px; }
.cta--outline:hover { background: rgba(255,255,255,.1); }

.cta--outline-narrow { color: var(--white); background: transparent; border: 1px solid var(--white); padding: 12px 24px; }
.cta--outline-narrow:hover { background: rgba(255,255,255,.1); }

/* dark-context outline (on white sections) */
.cta--outline-dark { color: var(--blue-4); border: 1px solid var(--blue-4); background: transparent; padding: 16px 40px; }
.cta--outline-dark:hover { background: var(--blue-4); color: var(--white); }

/* ---------- Header / nav ---------- */
/* Fixiert statt absolut: beim Scrollen nach unten gleitet die Leiste weg,
   beim ersten Scroll nach oben kommt sie zurück (Klassen setzt main.js).
   Ab dem ersten Scroll bekommt sie einen dunklen Glas-Hintergrund, damit
   sie auf hellen Sektionen lesbar bleibt; ganz oben ist sie transparent
   und liegt wie bisher auf dem dunklen Hero. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .25s ease,
              box-shadow .25s ease;
}
.site-header--scrolled {
  background-color: rgba(7, 14, 32, .88);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .25);
}
.site-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background-color .25s ease, box-shadow .25s ease; }
}
.site-header--solid { position: static; background: var(--blue-5); }
/* Schlanke Leiste: 16 px Polster oben und unten (vorher 40/24) —
   mit 32-px-Logo ergibt das 64 px Gesamthöhe. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.nav__logo img { height: 32px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--fs-body);
}
.nav__links a,
.nav__links .nav__droptoggle { color: var(--white); letter-spacing: var(--ls-wide); padding: 4px 0; position: relative;
  font: inherit; background: none; border: 0; cursor: pointer; }
/* hover: yellow underline slides in (replaces old color swap) */
.nav__links a::before,
.nav__links .nav__droptoggle::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav__links a:hover::before,
.nav__links .nav__droptoggle:hover::before { transform: scaleX(1); }
.nav__links a[aria-current="page"],
.nav__links .nav__droptoggle[aria-current="page"] { font-weight: 900; }
/* width-lock: invisible bold ghost reserves the bold width, so the bar never shifts */
.nav__lbl { display: inline-block; text-align: center; }
.nav__lbl::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 900;
}
.nav--dark .nav__links a,
.nav--dark .nav__links .nav__droptoggle { color: var(--black); }

/* Lösungen dropdown */
.nav__item--dropdown { position: relative; }
.nav__droptoggle {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--white); padding: 4px 0;
}
.nav__links .nav__droptoggle::before { right: 24px; }
.nav--dark .nav__droptoggle { color: var(--black); }
.nav__droptoggle svg { transition: transform .15s ease; }
.nav__item--dropdown[data-open] .nav__droptoggle svg { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: var(--sp3);
  padding: var(--s-1);
  background: var(--blue-5);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-card);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  display: none;
  flex-direction: column;
}
.nav__item--dropdown[data-open] .nav__dropdown { display: flex; }
.nav__dropdown a {
  color: var(--white) !important;
  padding: 12px 16px !important;
  border-radius: var(--s-1);
}
.nav__dropdown a:hover { background: rgba(255,255,255,.08); }
.nav__dropdown-overview {
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: var(--s-1) var(--s-1) 0 0 !important;
  margin-bottom: 4px;
}

/* ---------- Decorative silhouettes ("figures") ---------- */
/* Figma: ellipse head + fading body bar, layer-blurred. --d = head diameter. */
.person {
  transform-origin: 50% 100%;
  --d: 28px;
  --tint: #FFFFFF;
  --pblur: 1.2px;
  position: absolute;
  width: var(--d);
  height: calc(var(--d) * 3.86);
  pointer-events: none;
}
.person::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: var(--tint);
  filter: blur(var(--pblur));
}
.person::after {
  content: "";
  position: absolute;
  top: calc(var(--d) * 1.21); left: 0;
  width: var(--d);
  height: calc(var(--d) * 2.64);
  border-radius: calc(var(--d) * 8);
  /* Der Körper verliert nach unten NUR Deckkraft, nie die Farbe: einfarbige
     Fläche + Alpha-Maske. Ein Farbverlauf zu „transparent" (= transparentes
     SCHWARZ) lief je nach Browser durch dunkle Mischtöne — die Figuren
     wirkten „unten dunkelblau". Eine Maske blendet rein über den Alphakanal. */
  background: var(--tint);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  filter: blur(var(--pblur));
}
/* Gelb = markiert. Außerhalb der animierten Hero-Szene tragen gelbe Figuren
   dieselbe Unschärfe wie alle anderen — „erkannt = scharf" ist ein Erzähl-
   mittel der Detektionsszene, kein globaler Look (sah sonst uneinheitlich aus). */
.person--yellow { --tint: var(--yellow); }
.hero .person--yellow { --pblur: 0px; }   /* erkannt = scharf, nur in der Szene */
.person--lightblue { --tint: var(--blue-05); }
.person--sharp { --pblur: 1.2px; }

/* ---------- Train graphic (hero) ---------- */
.train {
  position: absolute;
  height: 104px;
}
/* Der Korpus trägt die ICE-Form — Insassen und Labels liegen darüber und werden NICHT beschnitten */
.train__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) 336px var(--s-4) var(--s-10);
  background: var(--grad-panel);
  clip-path: path("M0 20 Q0 0 20 0 L1440 0 C1590 0 1675 46 1720 96 L1720 104 L20 104 Q0 104 0 84 Z");
  filter: blur(.3px);
}
.train__body i {
  flex: 0 0 80px;
  height: 40px;
  background: var(--train-window);
  border-radius: var(--r-tile);
}
/* speed stripe along the flank */
.train__body::before {
  content: "";
  position: absolute;
  left: 24px; right: 24px; bottom: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
  opacity: .55;
}
/* sleek windshield slit in the nose */
.train__body::after {
  content: "";
  position: absolute;
  right: 158px; top: 24px;
  width: 62px; height: 14px;
  background: var(--train-window);
  border-radius: 8px 10px 8px 6px;
  transform: rotate(13deg);
}
/* Dome-Kamera unter der Decke, kompakt */
.train .train__cam {
  position: absolute;
  top: 4px;
  width: 14px; height: 8px;
  border-radius: 0 0 14px 14px / 0 0 8px 8px;
  background: var(--blue-05);
}
.train .train__cam svg { display: none; }
.train .train__cam::before {
  content: "";
  position: absolute;
  left: -2px; top: -2px;
  width: 18px; height: 2px;
  border-radius: 1px;
  background: var(--blue-05);
}
.train .train__cam .led {
  position: absolute;
  left: 50%; top: 1.8px;
  margin-left: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue-5);
  animation: cam-blink 1.4s steps(2, jump-none) infinite;
}
/* passengers ride WITH the train (children -> they drift and zoom together) */
.train .person { position: absolute; animation: none; filter: none; }
.train .pass { bottom: 12px; }
.train .person--yellow { position: absolute; inset: 0; }

/* ---------- Section rhythm ---------- */
.section { padding-block: var(--s-12); }
.section--dark { background: var(--blue-4); color: var(--white); }
.section--night { background: var(--blue-35); color: var(--white); }
.section--gradient { background: var(--grad-hero); color: var(--white); }
.section-title { display: grid; gap: var(--s-3); max-width: var(--sp7); }
.section-title .sub { max-width: var(--sp6); }

/* ---------- Solution tile cards (3×2 home grid + lösungen page) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  padding: var(--s-3);
  background: var(--grad-card);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), background-color .34s ease, border-color .34s ease;
}
.tile:hover { transform: translateY(-4px); }
.tile:active { transform: translateY(0); }
.tile__label {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  text-align: center;
  line-height: 1.3;
}
.tile__icon {
  position: absolute;
  pointer-events: none;
  /* Die 24 % lagen früher als fill-opacity in den SVG-Dateien. Jetzt steuert
     das CSS sie, damit der Hover das Zeichen auf volle Deckkraft ziehen kann. */
  opacity: .24;
  transition: opacity .34s cubic-bezier(.2, .7, .3, 1);
}
.tile:hover .tile__icon,
.tile:focus-visible .tile__icon { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tile__icon { transition: none; }
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); text-align: center; }
.stat { display: grid; gap: var(--s-1); justify-items: center; color: var(--blue-4); }
.stat__value { font-size: var(--fs-stat); font-weight: 700; letter-spacing: var(--ls-wide); }
.stat__label { font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wider); }

/* ---------- Glass feature cards (privacy quartet) ---------- */
/* Karten nach Figma-Entwurf 297:727 (Aug 2026): keine Kästen — Spalten mit
   feinen SENKRECHTEN Trennlinien, weißes Kontur-Icon (32 px), Titel 16 px
   extrabold versal, Fließtext weiß. Nicht klickbar → kein Hover.
   --3 ist die dreispaltige Variante (Soziale Einrichtungen). */
.glass-grid { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: var(--s-6); }
.glass-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Die Trennlinien gehören ZWISCHEN die Spalten, nicht an die Karten:
   seitliches Polster von 32 px hält den Text beidseitig von der Linie fern. */
.glass-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  text-align: left;
}
.glass-grid .glass-card:not(:nth-child(4n + 1)) { border-left: 1px solid rgba(255, 255, 255, .35); }
.glass-grid--3 .glass-card:not(:nth-child(4n + 1)) { border-left: 0; }
.glass-grid--3 .glass-card:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(255, 255, 255, .35); }
.glass-card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--yellow);
}
.glass-card__icon svg { width: 32px; height: 32px; }
.glass-card h3 {
  font-size: var(--fs-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.glass-card p { line-height: 1.4; color: var(--white); }

/* ---------- Badges (hero trust pills) ---------- */
.badges { display: flex; justify-content: center; gap: var(--s-6); flex-wrap: wrap; }
/* Nur Kontur, kein Glas — so sind die Pillen klar vom CTA unterscheidbar */
.badge {
  padding: 16px 24px;
  border-radius: 50px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- Footer ---------- */
/* ---------- Fußzeile ---------------------------------------------------
   12 Spalten, 80 px Seitenrand, 24 px Rinne, Abstände in 8er-Schritten.
   Marke 4 Spalten, die drei Verweisspalten 3 + 2 + 3.
   ---------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--blue-5);
  color: var(--white);
  overflow: hidden;
  padding-top: var(--s-8);
  padding-bottom: var(--s-4);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.site-footer__marke { grid-column: span 4; display: grid; gap: var(--s-2); }
.site-footer__marke img { height: 32px; width: auto; }
.site-footer__slogan { margin: 0; color: var(--white); }
.site-footer__text {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.site-footer__spalte { display: grid; gap: var(--s-2); align-content: start; }
/* Eigene Klassen statt Positionszählung: nth-of-type zählt je Elementtyp,
   und die Spalten sind teils <nav>, teils <div>. */
.site-footer__spalte--loesungen { grid-column: span 3; }
.site-footer__spalte--unternehmen { grid-column: span 2; }
.site-footer__spalte--kontakt { grid-column: span 3; }
.site-footer__titel { margin: 0; font-size: var(--fs-small); color: var(--white); }
/* Der Reset oben greift nur bei ul[class]; die Listen hier tragen keine. */
.site-footer ul { padding: 0; list-style: none; }
.site-footer__spalte ul { display: grid; gap: var(--s-1); }
.site-footer__spalte a {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  transition: color .15s ease;
}
.site-footer__spalte a:hover,
.site-footer__spalte a:focus-visible { color: var(--white); }
.site-footer__adresse {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

/* Untere Leiste: Copyright links, Rechtliches rechts */
.site-footer__leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  position: relative;
  margin-top: var(--s-6);
  padding-top: var(--s-3);
}
/* Trennlinie bündig zur Inhaltskante — ein border-top auf dem gepolsterten
   Wrapper liefe sonst über die volle Fensterbreite. */
.site-footer__leiste::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--page-margin);
  right: var(--page-margin);
  height: 1px;
  background: rgba(255, 255, 255, .14);
}
.site-footer__leiste p { margin: 0; color: rgba(255, 255, 255, .72); }
.site-footer__rechtlich { display: flex; gap: var(--s-3); }
.site-footer__rechtlich a { color: rgba(255, 255, 255, .72); transition: color .15s ease; }
.site-footer__rechtlich a:hover,
.site-footer__rechtlich a:focus-visible { color: var(--white); }
.site-footer a:hover { color: var(--blue-05); }

/* ---------- Fließtext-Links ----------
   Links im laufenden Text sind auf allen Seiten unterstrichen. Der Scope auf
   <main> nimmt Navigation, Footer und Cookie-Banner aus; die :not()-Liste
   nimmt Links aus, die als Fläche gestaltet sind (Buttons, Kacheln, Karten). */
main :is(p, li, dd, dt, blockquote, figcaption, .body-copy, .lead, .prose)
  a:not(.cta, .tile, .navy-card, .callout__link, .terminwahl__person, [class*="card"], [class*="__more"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Long-form prose (Datenschutz / Impressum) ---------- */
.prose { line-height: 1.6; letter-spacing: 0.01em; max-width: 65ch; }
.prose h2 { font-size: 28px; font-weight: 800; line-height: 1.3; margin-top: var(--s-8); scroll-margin-top: 120px; }
.prose h3 { font-size: 18px; font-weight: 700; line-height: 1.4; margin-top: var(--s-5); scroll-margin-top: 120px; }
.prose h4 { font-size: 16px; font-weight: 700; line-height: 1.4; margin-top: var(--s-3); scroll-margin-top: 120px; }
.prose p, .prose ul, .prose ol { margin-top: var(--s-2); }
.prose ul { padding-left: 20px; list-style: disc; }
.prose a { color: var(--blue-1); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 700; }

/* sticky in-page nav for long documents */
.doc-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.doc-toc {
  grid-column: 1 / span 4;
  position: sticky;
  top: var(--s-5);
  display: grid;
  gap: 2px;
  padding-right: var(--s-3);
}
.doc-toc a {
  padding: 12px 16px;
  border-left: 2px solid var(--grey-300);
  color: var(--grey-600);
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.doc-toc a:hover { color: var(--text-dark); background: var(--grey-100); }
.doc-toc a.is-active { border-color: var(--yellow); color: var(--text-dark); font-weight: 700; }
/* Zweite Ebene der Randnavigation — bei einem 30-KB-Rechtstext reichen
   fünf Hauptabschnitte allein nicht zum Navigieren. */
.doc-toc a.doc-toc__sub {
  padding-left: var(--s-4);
  font-size: 14px;
  color: var(--grey-500);
}
.doc-toc { max-height: calc(100vh - var(--s-10)); overflow-y: auto; }
.doc-body { grid-column: 5 / span 8; }

/* ---------- Startseite: hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding-block: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
/* deckt alles ab, was in die Textzone ragt — auch beim Hineinzoomen */
.hero__veil {
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, transparent 34%, rgba(0,0,0,.72) 39%, #000 44%),
    linear-gradient(90deg, #000 0%, #000 71%, transparent 78%);
  mask-image:
    linear-gradient(180deg, transparent 0%, transparent 34%, rgba(0,0,0,.72) 39%, #000 44%),
    linear-gradient(90deg, #000 0%, #000 71%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hero__graphics {
  position: absolute;
  inset: 48px 0 auto 0;
  height: 880px;
  pointer-events: none;
  /* Bühne blendet nach unten aus — Textzone bleibt komplett frei */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 95%, transparent 100%);
  -webkit-mask-repeat: repeat-x;   /* vertikal NICHT kacheln: unterhalb der Bühne ist Schluss */
  mask-repeat: repeat-x;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hero__graphics .train {
  left: -138px;
  top: 88px;
  width: 1720px;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(500px, 62vh, 620px);
  padding-bottom: clamp(56px, 8vh, 112px);
}

.hero__title {
  display: grid;
  justify-items: start;
  gap: var(--s-2);   /* Titel sitzt immer 16 px über dem Untertitel */
  max-width: var(--sp10);
}
/* Haupt-CTA im Hero eine Stufe größer als die Standardknöpfe */
.hero__title .cta { margin-top: var(--s-2); padding: 20px 48px; }
/* Claim und Pillen bekommen bewusst viel Luft — der Absatz stand vorher
   gedrängt zwischen CTA und Badges. */
.hero__claim {
  max-width: 900px;
  margin: clamp(120px, 18vh, 200px) auto 0;
  text-align: center;
}
.hero .badges { margin-top: clamp(80px, 12vh, 128px); justify-content: center; gap: var(--s-3); }

/* ---------- Startseite: privacy / closing sections ---------- */
.privacy { position: relative; overflow: hidden; padding-block: var(--s-8); }
.privacy__deco { position: absolute; inset: 0; pointer-events: none; }
.closing-cta { position: relative; overflow: hidden; padding-block: var(--s-16); }
.closing-cta__deco { position: absolute; inset: 0; pointer-events: none; }

/* last dark section flows seamlessly into the #070E20 footer */
.closing-cta, .section--flow {
  background: linear-gradient(180deg, var(--blue-4) 0%, var(--blue-5) 100%);
  color: var(--white);
}

/* ---------- Startseite: retrofit diagram ---------- */
.retrofit { display: grid; gap: 0; }
.retrofit__diagram { width: 100%; height: auto; }
.retrofit__banner { width: 100%; height: auto; border-radius: var(--r-tile); }

/* ==========================================================================
   Subpage components
   ========================================================================== */

/* ---------- Short page hero (subpages) ---------- */
/* Feste Bühnenhöhe: jede Unterseite ist exakt gleich hoch (480px bei 1440),
   Titel und Text sitzen MITTIG in der Bühne (padding-top hält nur die
   Navigation frei). --fluid (Kontakt-Chat) darf nach unten wachsen. */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--grad-hero);
  color: var(--white);
  height: 480px;
  padding-top: 96px;
  padding-bottom: var(--s-4);
  overflow: hidden;
}
/* Kontakt-Bühne: bewusste Ausnahme mit fester Mehrhöhe für das Chat-Fenster —
   der Verlauf hat feste Maße, dadurch springt beim Antworten nichts. */

.page-hero .lead { font-size: 20px; }
.page-hero__inner {
  display: grid;
  gap: var(--s-2);   /* Titel sitzt immer 16 px über dem Untertitel */
  justify-items: center;
  text-align: center;
  /* Figma: Titelblock 1176 px breit und mittig — das sind 11 Spalten.
     Dieses Element trägt zugleich .wrap, das die 80 px Seitenrand als
     Polsterung mitbringt. Die müssen dazugerechnet werden, sonst bleiben
     vom Text nur 1016 px übrig. */
  max-width: calc(var(--sp11) + 2 * var(--page-margin));
  margin-inline: auto;
}
/* Unterseiten (zentriertes Layout): Titel eine Stufe kleiner als der Start-Hero */
.page-hero .display { font-size: 56px; }
.page-hero__inner .lead { max-width: var(--sp8); }
.page-hero .eyebrow {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--blue-05);
}

/* ---------- Yellow statement band ---------- */
/* Haltungs-Statement: ruhig, redaktionell — kein Warnbanner */
.statement-band {
  background: var(--grey-100);
  color: var(--text-dark);
  padding-block: var(--s-10);
}
.statement-band__inner {
  max-width: var(--sp9);
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
.statement-band .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--yellow-2);
}
.statement-band .eyebrow::before,
.statement-band .eyebrow::after {
  content: "";
  width: 34px; height: 2px;
  background: var(--yellow);
  border-radius: 1px;
}
.statement-band p {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.statement-band p b { font-weight: 800; }

/* ---------- Typographic "KEINE …" rows (Datenschutz redesign) ---------- */
.type-rows { display: grid; }
.type-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gutter);
  align-items: center;
  padding-block: var(--s-5);
  border-top: 0.5px solid rgba(255, 255, 255, .35);
}
.type-row:first-child { border-top: 0; }
.type-row h3 {
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: 1.05;
}
.type-row h3 .accent { color: var(--yellow); }
.type-row p { line-height: 1.5; max-width: var(--sp5); justify-self: end; text-align: left; }

/* ---------- Borderless feature list (icon + copy, no boxes) ---------- */
/* Gleiche Sprache wie die Datenschutz-Karten (Figma 297:727): Spalten mit
   senkrechten Trennlinien ZWISCHEN den Positionen, gelbes Icon, linksbündig.
   Nicht klickbar → kein Hover. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--s-8);
}
.feature-list .feature {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  justify-items: start;
  padding: 0 var(--s-4);
}
.feature-list .feature:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(255, 255, 255, .35); }
.feature p { max-width: var(--sp3); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--yellow);
}
.feature__icon svg { width: 32px; height: 32px; }
.feature h3 {
  font-size: var(--fs-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.feature p { line-height: 1.4; color: var(--white); }

/* Helle Variante (weiße Sektionen): dunkle Trennlinien, schwarzer Text */
.feature-list--light .feature:not(:nth-child(3n + 1)) { border-left-color: rgba(12, 28, 62, .18); }
.feature-list--light .feature__icon { color: var(--yellow-2); }
.feature-list--light .feature p { color: var(--text-dark); }

/* on light backgrounds */

/* ---------- Ledger rows (regulatory standards) ---------- */
.ledger { display: grid; }
.ledger__row {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gutter);
  align-items: center;
  padding-block: var(--s-4);
  border-top: 1px solid var(--grey-300);
}
.ledger__row:last-child { border-bottom: 1px solid var(--grey-300); }
.ledger__row h3 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--blue-4);
}
.ledger__row p { line-height: 1.5; max-width: var(--sp7); }

/* ---------- Comparison table ---------- */
.compare table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
}
.compare th, .compare td {
  padding: var(--s-4) var(--s-3);
  border-top: 0.5px solid rgba(255, 255, 255, .5);
  vertical-align: middle;
  line-height: 1.4;
}
.compare thead th, .compare thead td { border-top: 0; }
.compare col.compare-col--label { width: 22%; }
.compare th[scope="row"] { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); }
.compare thead th { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); }
/* highlighted Galvorn column as real cell backgrounds (no floating overlay) */
.compare thead th:last-child, .compare td.galvorn { background: var(--blue-3); font-weight: 700; }
.compare thead th:last-child { border-radius: var(--r-card) var(--r-card) 0 0; }
.compare tbody tr:last-child td.galvorn { border-radius: 0 0 var(--r-card) var(--r-card); }

/* ---------- Navy cards (Lösungen overview) ---------- */
/* ---------- Lösungskarten ---------------------------------------------
   Schwesterkarte zu den Kacheln der Startseite: gleiche Bewegung beim
   Überfahren (4 px anheben, Symbol auf volle Deckkraft), aber eigener
   Charakter durch Rahmen, Fließtext und Pfeil.

   Bewusst OHNE wiederholte Textzeile: sechsmal "Mehr erfahren" nebeneinander
   verstößt gegen WCAG 2.4.4 — Screenreader lesen die Linkliste vor, und sechs
   gleich benannte Verweise auf sechs verschiedene Ziele sind dort nicht
   unterscheidbar. Die ganze Karte ist der Verweis, ihr zugänglicher Name ist
   die Überschrift. Der Pfeil ist die sichtbare Zusage, kein zweiter Link.

   Alle Maße in geraden Zahlen.
   -------------------------------------------------------------------- */
.navy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.navy-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-2);
  overflow: hidden;
  padding: var(--s-4);
  background: var(--blue-4);
  border-radius: var(--r-card);
  color: var(--white);
  text-align: left;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), background-color .34s ease;
}
.navy-card:hover,
.navy-card:focus-visible {
  transform: translateY(-4px);
  background: #102448;
}
.navy-card:active { transform: translateY(0); }

/* Ortssymbol unten rechts, gespiegelt — es zeigt damit in die Karte hinein */
.navy-card__icon {
  position: absolute;
  right: -32px; bottom: -32px;
  width: 144px; height: 144px;
  opacity: .34;
  transform: scaleX(-1);
  pointer-events: none;
  transition: opacity .34s cubic-bezier(.2, .7, .3, 1);
}
/* Wie auf der Startseite hellt das Symbol beim Überfahren auf — dort geht es
   auf volle Deckkraft, hier nur auf 52 %: die Kacheln tragen nur ein kurzes
   Wort, diese Karten einen Absatz, der lesbar bleiben muss. */
.navy-card:hover .navy-card__icon,
.navy-card:focus-visible .navy-card__icon { opacity: .6; }

.navy-card h3 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.navy-card p {
  position: relative;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.navy-card__pfeil {
  position: relative;
  display: inline-flex;
  color: var(--yellow);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.navy-card:hover .navy-card__pfeil,
.navy-card:focus-visible .navy-card__pfeil { transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) {
  .navy-card, .navy-card__icon, .navy-card__pfeil { transition: none; }
}

/* ---------- Prinzipien 01/02/03 ----------------------------------------
   Alle Werte direkt aus test-claude.fig, Sektion 1440x1216.
   Die Ziffern sind in Figma Geschwister der Textblöcke und liegen frei über
   der Sektion — sie brechen bewusst aus der 1280er Inhaltsspalte aus.
   .principles__inner spannt die volle Breite und hält den Seitenrand als
   Polsterung — waagerecht gelten deshalb die Figma-Werte unverändert,
   senkrecht Figma-y minus 64 (obere Polsterung der Sektion).
   Figma: 01 @1181,100 · 02 @60,362 · 03 @1128,678 · je 200px Black, Weiß 20 %
   ---------------------------------------------------------------------- */
.principles { position: relative; overflow: hidden; }
.principles__inner { position: relative; }

.principles__num {
  position: absolute;
  z-index: 0;
  font-size: 200px;
  font-weight: 900;
  /* 265 / 200 — in Figma steht "lh:100%", das ist dort die natürliche
     Zeilenhöhe der Schrift, nicht 1.0 */
  line-height: 1.325;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .2);
  pointer-events: none;
  user-select: none;
}
/* 01 und 03 hängen an der rechten Wrap-Kante statt an festen left-Werten:
   mit left:1181px ragten sie bei Fenstern unter 1440 px aus dem Wrap und
   wurden vom overflow:hidden der Sektion abgeschnitten. right:48/56px
   ergibt bei voller Breite dieselbe Position, bleibt aber überall sichtbar. */
.principles__num--1 { right: 48px; top: 36px; }
.principles__num--2 { left: 60px;  top: 298px; }
.principles__num--3 { right: 56px; top: 614px; }

.principle { position: relative; display: grid; gap: var(--s-1); }
.principle h3, .principle p { position: relative; z-index: 1; }
.principle h3 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.328;          /* Figma: 85 px Zeilenkasten bei 64 px */
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
.principle p {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.3333;         /* Figma: 32 px je Zeile bei 24 px */
  letter-spacing: var(--ls-wide);
}

/* 01 und 03 stehen rechtsbündig an der Inhaltskante, 02 linksbündig */
.principle--right { text-align: right; justify-items: end; }
.principle--1 { margin-top: 80px; }
.principle--1 p { max-width: 628px; }
.principle--2 { margin-top: 120px; justify-items: start; }
.principle--2 h3 { width: 973px; text-align: center; }
.principle--2 p { max-width: 856px; }
.principle--3 { margin-top: 152px; }
.principle--3 h3 { max-width: 780px; }
/* Figma nennt 780; die Schrift bricht hier erst ab 790 auf zwei Zeilen um */
.principle--3 p { max-width: 792px; }

.principles__cta { margin-top: 32px; text-align: right; }

/* ---------- Detail pages ---------- */
/* „Was Galvorn leisten kann" — helle Variante der Karten-Sprache aus dem
   Figma-Entwurf 297:727: keine Kästen, senkrechte Trennlinien ZWISCHEN den
   Spalten, gelbes Icon, linksbündig. Nicht klickbar → kein Hover. */
.detail-cards { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: var(--s-6); }
.detail-cards--3 { grid-template-columns: repeat(3, 1fr); }
.detail-card {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  color: var(--text-dark);
  text-align: left;
}
.detail-cards .detail-card:not(:nth-child(4n + 1)) { border-left: 1px solid rgba(12, 28, 62, .18); }
.detail-cards--3 .detail-card:not(:nth-child(4n + 1)) { border-left: 0; }
.detail-cards--3 .detail-card:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(12, 28, 62, .18); }
.detail-card .kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--yellow-2);
}
.detail-card h3 {
  font-size: var(--fs-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-top: -8px;
}
.detail-card .detail-card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--yellow-2);
}
.detail-card .detail-card__icon svg { width: 32px; height: 32px; }
.detail-card p { line-height: 1.4; color: var(--text-dark); }

/* split: stacked rows + visual */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: stretch; }
.split__rows { display: grid; gap: var(--s-2); align-content: start; }
.split-row {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--r-tile);
}
.split-row h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-wide); }
.split-row p { line-height: 1.5; color: var(--text-dark); letter-spacing: 0.01em; }

/* image placeholder in brand style */
.img-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  border-radius: var(--r-card);
  background: var(--grad-card);
  overflow: hidden;
}
.img-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(86, 130, 220, .25), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(226, 178, 43, .12), transparent 55%);
}
.img-slot span {
  position: relative;
  color: rgba(255, 255, 255, .7);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-pill);
}

/* side-note paragraph (e.g. Bremen Robotics hint) */
.note-aside {
  max-width: var(--sp6);
  padding-left: var(--s-3);
  border-left: 2px solid var(--yellow);
  color: var(--text-dark);
  letter-spacing: 0.01em;
}

/* press link cards (light) */

/* ---------- Accordion (Über Galvorn) ---------- */
.accordion {
  background: var(--white);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-8);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}
.accordion details { border-top: 0.5px solid var(--black); }
.accordion details:first-child { border-top: 0; }
.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  color: var(--black);
  letter-spacing: var(--ls-wide);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary svg { flex: 0 0 auto; transition: transform .18s ease; }
.accordion details[open] summary svg { transform: rotate(180deg); }
.accordion details[open] summary { font-weight: 700; }
.accordion .accordion__body { padding: 0 0 var(--s-3); line-height: 1.5; max-width: var(--sp8); color: var(--text-dark); }
.accordion .accordion__body p + p { margin-top: var(--s-2); }

/* ---------- Press cards (Über Galvorn, dark) ---------- */
/* Kleine mittige Zwischenüberschrift im Pressebereich („Highlights“ / „Alle
   Berichte“). Bewusst klein und grau, damit die H2 „Pressestimmen“ die Sektion
   führt und die beiden Blöcke nur voneinander getrennt werden. */
.press-label {
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--grey-600);
}
/* Nur die Highlights werden hervorgehoben. Markengelb erreicht auf Weiß nur
   2.36:1 und liegt damit unter AA (4.5:1 für 12px) — auf Wunsch so gesetzt.
   Die Marke nutzt das Gelb sonst ausschließlich auf dunklem Grund (8.50:1). */
.press-label--gelb { color: var(--yellow-2); }
.press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
/* Feedback Aug 2026: Karten im Blau-Verlauf der Orte-Kacheln auf weißer
   Sektion, komplett klickbar (Stretched Link), Hover-Lift wie die Kacheln. */
.press-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--charcoal);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.press-card:has(.press-card__more:hover) { transform: translateY(-4px); }
.press-card:has(.press-card__more:active) { transform: translateY(0); }
/* Stretched Link: macht die ganze Karte klickbar, ohne ein zweites <a>
   um die Karte zu legen (verschachtelte Links sind ungültiges HTML). */
.press-card__more::after { content: ""; position: absolute; inset: 0; }
.press-card__img {
  position: relative;
  height: 160px;
  background: var(--blue-1);
}
/* Artikelbilder als Duotone: Sättigung auf null, dunkelblau überlagert —
   so fügt sich jedes gezogene Pressebild automatisch ins Design, ohne dass
   Bilder von Hand bearbeitet werden müssen (gilt auch für künftige). */
.press-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.press-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(47, 107, 229, .2);
}
.press-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  /* --grad-card lief nur von #070E20 nach #0C1C3E — zu dicht beieinander, um
     als Verlauf sichtbar zu sein. Alle Stopps bleiben zwischen --blue-3 und
     --blue-5, damit das gelbe Quellen-Label überall mindestens 4.5:1 hält
     (bei --blue-3 exakt 4.50:1). */
  background-image: linear-gradient(150deg, var(--blue-3) 0%, var(--blue-4) 52%, var(--blue-5) 100%);
  /* Doppelt so groß wie der Textteil, damit der Verlauf beim Hover verschoben
     werden kann: background-position ist animierbar, ein Gradient selbst nicht. */
  background-size: 200% 200%;
  background-position: 0% 0%;
  transition: background-position .8s cubic-bezier(.2, .7, .3, 1);
  color: var(--white);
  flex: 1;
}
/* Hover: der Verlauf wandert diagonal durch den Textteil — das Licht zieht
   über die Karte, ohne dass Farben ausgetauscht werden. */
.press-card:has(.press-card__more:hover) .press-card__body { background-position: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .press-card__body { transition: none; }
  .press-card:has(.press-card__more:hover) .press-card__body { background-position: 0% 0%; }
}
.press-card__meta { display: flex; justify-content: space-between; gap: var(--s-2); font-weight: 700; color: var(--yellow-2); }
.press-card h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: var(--ls-wide); line-height: 1.3; }
.press-card p { line-height: 1.5; }
.press-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  margin-top: auto;
}
.press-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
  /* Die Karten stehen seit Aug 2026 auf weißer Sektion (siehe .press-card) —
     der Pager erbte davor das Weiß der alten Navy-Sektion und war unsichtbar. */
  color: var(--text-dark);
}
.press-pager button { color: inherit; display: grid; place-items: center; }
.press-pager button[disabled] { opacity: .4; cursor: default; }

/* ---------- Forms (Kontakt / Jetzt starten) ---------- */
.form-grid { display: grid; gap: var(--s-2); }
.field { display: grid; gap: 8px; }
.field label,
.field__legend { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wider); }
.field__legend { margin: 0; }
.field input, .field textarea, .field select {
  font: inherit;
  letter-spacing: 0.01em;
  padding: 16px;
  border: 1px solid var(--grey-400);
  border-radius: var(--r-tile);
  background: var(--white);
  color: var(--text-dark);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--blue-1);
  outline-offset: 0;
  border-color: var(--blue-1);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.panel {
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--r-card);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.panel > h2, .panel > h3 { font-size: 24px; font-weight: 800; line-height: 1.25; }
.panel .hint { color: var(--grey-600); line-height: 1.5; letter-spacing: 0.01em; }

/* dark glass panel variant */
.panel--glass {
  background: rgba(255, 255, 255, .1);
  border: 0.5px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--white);
}
.panel--glass .field input, .panel--glass .field textarea, .panel--glass .field select {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: var(--white);
}
.panel--glass .field ::placeholder { color: rgba(255, 255, 255, .6); }
.panel--glass .hint { color: rgba(255, 255, 255, .75); }

/* Die Spalten sind unterschiedlich hoch (links Terminwahl, rechts Formular).
   Ohne align-self würde die kürzere auf Zeilenhöhe gestreckt und stünde als
   hoher leerer Kasten da. */
.contact-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.contact-cols > * { align-self: start; }
.contact-facts { display: grid; gap: var(--s-2); align-content: start; }
.contact-facts a { font-weight: 700; }
.contact-facts a:hover { color: var(--blue-05); }

/* booking slots */
.slots { display: flex; flex-wrap: wrap; gap: var(--s-1); }
/* Das Radio-Feld bleibt bedienbar, ist aber unsichtbar — sichtbar ist sein
   Label. Nicht mit display:none arbeiten, sonst verliert es den Fokus. */
.slot__feld, .cal-day__feld {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.slot {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid var(--grey-400);
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  cursor: pointer;
}
.slot:hover,
.slot__feld:checked + .slot { border-color: var(--blue-4); background: var(--blue-4); color: var(--white); }
.slot__feld:focus-visible + .slot { outline: 2px solid var(--blue-1); outline-offset: 2px; }
.slots-gruppe { border: 0; padding: 0; margin: 0; min-inline-size: 0; }

/* light variant of type-rows (on white sections) */
.type-rows--light .type-row { border-color: var(--grey-300); }
.type-rows--light .type-row h3 { color: var(--blue-4); }
.type-rows--light .type-row h3 .accent { color: var(--yellow-2); }

/* blurred star decoration (Datenschutz regulatory section) */
.stars-deco {
  position: absolute;
  right: -60px;
  top: 46px;
  width: 608px;
  height: 608px;
  opacity: .6;
  filter: blur(8px);
  pointer-events: none;
}

/* calendar (Kontakt) */
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar th {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--grey-600);
  padding-bottom: var(--s-1);
}
.calendar td { text-align: center; padding: 2px; }
.calendar-gruppe { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.cal-day {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: var(--r-tile);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-dark);
  cursor: pointer;
}
.cal-day:hover { background: var(--grey-100); }
/* Wochenenden sind nicht buchbar und deshalb gar kein Bedienelement mehr */
.cal-day--zu { color: var(--grey-400); cursor: default; }
.cal-day--zu:hover { background: none; }
.cal-day__feld:checked + .cal-day { background: var(--blue-4); color: var(--white); }
.cal-day__feld:focus-visible + .cal-day { outline: 2px solid var(--blue-1); outline-offset: -2px; }

/* ---------- Pilot stats (Jetzt starten) ---------- */
.pilot-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6); }
.pilot-stat { display: grid; justify-items: center; gap: var(--s-1); }
.pilot-stat b { font-size: var(--fs-stat); font-weight: 700; line-height: 1; }
.pilot-stat span { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wider); }

/* timeline */
.timeline { display: grid; gap: var(--s-2); }
.timeline__months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.timeline__months span { text-align: center; font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-wider); padding-bottom: var(--s-1); }
.timeline__bars { display: grid; gap: var(--s-1); }
.timeline__bar {
  height: 40px;
  display: flex;
  align-items: center;
  padding-inline: var(--s-2);
  border-radius: var(--r-tile);
  background: var(--blue-3);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  white-space: nowrap;
}

/* ==========================================================================
   Motion: scroll reveals + hero scene
   ========================================================================== */

/* scroll-triggered reveal (elements get .reveal via JS, .in-view when visible) */
/* WICHTIG: `translate` statt `transform` — sonst überschreibt das Reveal jeden Hover-Transform */
.reveal {
  opacity: 0;
  translate: 0 28px;
  /* transform/Farben MÜSSEN hier mitlaufen — sonst überschreibt die Shorthand die Hover-Transition */
  transition:
    opacity .7s cubic-bezier(.2, .6, .2, 1),
    translate .7s cubic-bezier(.2, .6, .2, 1),
    transform .34s cubic-bezier(.2, .7, .3, 1),
    background-color .34s ease,
    border-color .34s ease;
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s;
}
.reveal.in-view { opacity: 1; translate: 0 0; }

/* plaza life: everyone bobs and wanders, varied builds */
.hero .person {
  animation:
    person-bob var(--bob, 4s) ease-in-out infinite alternate,
    person-wander var(--wander, 11s) ease-in-out infinite alternate;
}
/* sanftes Wiegen um den Fußpunkt — kein vertikales Schweben */
@keyframes person-bob {
  from { rotate: -1.1deg; }
  to { rotate: 1.1deg; }
}
@keyframes person-wander {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(calc(var(--wx, 40px) * .55)); }
  70%  { transform: translateX(calc(var(--wx, 40px) * .3)); }
  100% { transform: translateX(var(--wx, 40px)); }
}
/* builds */
.person--skinny::after { width: calc(var(--d) * 0.68); left: calc(var(--d) * 0.16); }
/* couples / families walk & stand together */
.pgroup {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: person-wander var(--wander, 24s) ease-in-out infinite alternate;
}
.pgroup .person { position: relative; left: auto; top: auto; }
.hero .pgroup .person { animation: person-bob var(--bob, 6s) ease-in-out infinite alternate; }
/* passers-by crossing the plaza */

/* ==========================================================================
   Hero-Szene — 40-Sekunden-Schleife, immer nur ein Vorgang:
   0,0s– 4,2s  der Zug fährt ein
   4,2s– 7,2s  Fahrgäste steigen ein
   7,2s–21,2s  Zoom in den Wagen: Streit → Schlägerei → B geht zu Boden →
               markiert und beobachtet → zwei Fahrgäste helfen B auf → Zoom heraus
  23,6s–28,0s  Fahrgäste steigen aus
  26,4s–33,8s  Koffer wird hereingetragen und abgestellt — markiert wird NUR
               der Koffer, die Person geht unmarkiert weiter
  33,2s–34,6s  der Zug fährt ab
  34,8s–40,0s  eine Person auf dem Bahnsteig sackt zusammen, Label NOTFALL

   Der frühere erste Takt (auffällige Person, 0–6s) ist entfallen; alle Takte
   sind deshalb um 13 Prozentpunkte nach vorn gerückt, und am Ende ist Platz
   für den Notfall-Takt frei geworden.
   ========================================================================== */

/* the ICE arrives nose-first from the LEFT, stands through everything, departs at the end */
.hero__graphics .train { animation: train-run 40s linear infinite; }
@keyframes train-run {
  0%, 2% { translate: -1952px 0; }
  4%  { translate: -1248px 0; }
  7%  { translate: -520px 0; }
  9%  { translate: -240px 0; }
  10.5% { translate: -176px 0; }   /* eingefahren — durchgehend in eine Richtung */
  83%  { translate: -176px 0; }
  84.5% { translate: 448px 0; }
  86.5%, 100% { translate: 1952px 0; }
}

/* Gleis: eine klare Schiene mit direkt anliegenden Schwellen */
.scene__track {
  position: absolute;
  left: -144px; top: 192px;
  width: calc(100% + 280px); height: 8px;
  background:
    linear-gradient(rgba(170, 192, 237, .42), rgba(170, 192, 237, .42)) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,
      rgba(170, 192, 237, .17) 0 4px,
      transparent 4px 30px) 0 2px / 100% 6px no-repeat;
}

.hero__graphics { animation: hero-zoom 40s ease-in-out infinite; transform-origin: 61% 13%; }
@keyframes hero-zoom {
  0%, 18%  { transform: none; }
  24%      { transform: scale(1.7); }
  53%      { transform: scale(1.7); }
  59%, 100% { transform: none; }
}

.scene { position: absolute; inset: 0; pointer-events: none; }
.scene .person { animation: none; }

/* shared reticle look */
.scene__ret {
  position: absolute;
  opacity: 0;
  --corner: 14px;
  --thick: 2px;
  background:
    linear-gradient(var(--yellow), var(--yellow)) 0 0 / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 0 / var(--thick) var(--corner) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 0 / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 0 / var(--thick) var(--corner) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 100% / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 100% / var(--thick) var(--corner) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 100% / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 100% / var(--thick) var(--corner) no-repeat;
}
.scene__ret svg { display: none; }
/* Label-Pille über dem Rahmen */
.det-label {
  position: absolute;
  left: 50%; bottom: 100%;
  margin-bottom: 8px;
  translate: -50% 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--blue-5);          /* dunkel auf Gelb = 8.5:1 statt 1.97:1 (WCAG AA) */
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(7, 14, 32, .45);
}
.train .scene__ret--fight .det-label {
  margin-bottom: 8px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: .06em;
}
.train .scene__ret--fight {
  z-index: 3; --corner: 10px; --thick: 1.6px; }

/* --- beat 2/3: the train and its passengers --- */
.hero .train .person { position: absolute; animation: none; --pblur: .7px; }
.hero .train .pass {
  bottom: 12px;
  animation: pass-sway var(--sway, 3.5s) ease-in-out infinite alternate;
}
@keyframes pass-sway {
  from { transform: translateX(0); }
  to { transform: translateX(8px); }
}

/* --- Aussteigende nach dem Zoom-out --- */
.hero .scene__exit.person {
  position: absolute;
  top: 192px;
  opacity: 0;
  animation: exit-train 40s linear infinite;
}
.hero .scene__exit--b.person { animation-name: exit-train-b; }
.hero .scene__exit--c.person { animation-name: exit-train-c; }
@keyframes exit-train {
  0%, 59% { opacity: 0; translate: 0 0; rotate: 0deg; }
  60% { opacity: 1; }
  62% { translate: 24px 56px; rotate: 2deg; }
  64% { translate: 48px 112px; rotate: -2deg; }
  66% { translate: 72px 168px; rotate: 2deg; }
  68% { opacity: 1; translate: 96px 216px; rotate: 0deg; }
  70%, 100% { opacity: 0; translate: 104px 232px; }
}
@keyframes exit-train-b {
  0%, 61% { opacity: 0; translate: 0 0; rotate: 0deg; }
  62% { opacity: 1; }
  64% { translate: -24px 56px; rotate: -2deg; }
  66% { translate: -48px 112px; rotate: 2deg; }
  68% { translate: -72px 168px; rotate: -2deg; }
  70% { opacity: 1; translate: -88px 216px; rotate: 0deg; }
  72%, 100% { opacity: 0; translate: -96px 232px; }
}
@keyframes exit-train-c {
  0%, 63% { opacity: 0; translate: 0 0; rotate: 0deg; }
  64% { opacity: 1; }
  66% { translate: 16px 64px; rotate: 2deg; }
  68% { translate: 32px 128px; rotate: -2deg; }
  70% { translate: 48px 192px; rotate: 2deg; }
  72% { opacity: 1; translate: 64px 240px; rotate: 0deg; }
  74%, 100% { opacity: 0; translate: 72px 256px; }
}

/* --- beat 4: the brawl --- */
.train .scene__fighter {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  width: var(--d);
  height: calc(var(--d) * 3.86);
  transform-origin: 50% 100%;
  animation: fight-a 40s linear infinite;
}
.train .scene__fighter .person { left: 0; top: 0; --pblur: .7px; animation: none; }
.train .scene__fighter .person--yellow { --pblur: 0px; }
.train .scene__fighter .person--yellow {
  opacity: 0;
  animation: fight-flag 40s linear infinite;
}
.train .scene__fighter--b { animation-name: fight-b; }

@keyframes fight-a {
  0%, 25% { transform: none; }
  26% { transform: translateX(2px) rotate(3deg); }
  27.2% { transform: translateX(-2px) rotate(-2deg); }
  28.4% { transform: translateX(2px) rotate(3deg); }
  29.6% { transform: translateX(-2px) rotate(-2deg); }
  30.8% { transform: translateX(2px) rotate(2deg); }
  32.3% { transform: translateX(8px) rotate(4deg); }
  33.5% { transform: translateX(20px) rotate(15deg); }
  34.7% { transform: translateX(6px) rotate(3deg); }
  35.9% { transform: translateX(22px) rotate(16deg); }
  37.1% { transform: translateX(6px) rotate(2deg); }
  38.3% { transform: translateX(24px) rotate(18deg); }
  39.5% { transform: translateX(6px) rotate(2deg); }
  41% { transform: translateX(2px) rotate(0deg); }
  42.5%, 100% { transform: none; }
}
@keyframes fight-b {
  0%, 25% { transform: none; }
  26% { transform: translateX(-2px) rotate(-3deg); }
  27.2% { transform: translateX(2px) rotate(2deg); }
  28.4% { transform: translateX(-2px) rotate(-3deg); }
  29.6% { transform: translateX(2px) rotate(2deg); }
  30.8% { transform: translateX(-2px) rotate(-2deg); }
  32.3% { transform: translateX(-8px) rotate(-4deg); }
  33.5% { transform: translateX(-4px) rotate(6deg); }
  35% { transform: translateX(-16px) rotate(-13deg); }
  36.5% { transform: translateX(-2px) rotate(4deg); }
  38.3% { transform: translateX(6px) rotate(24deg); }
  39.5% { transform: translateX(12px) rotate(56deg); }
  41% { transform: translateX(16px) rotate(86deg); }
  52.5% { transform: translateX(16px) rotate(86deg); }
  55% { transform: translateX(8px) rotate(30deg); }
  57%, 100% { transform: none; }
}
@keyframes fight-flag {
  0%, 34% { opacity: 0; }
  35.5% { opacity: 1; }
  51.5% { opacity: 1; }
  54%, 100% { opacity: 0; }
}
.scene__fighter .person.base { animation: base-hide-fight 40s linear infinite; }
@keyframes base-hide-fight {
  0%, 34% { opacity: 1; }
  35.5% { opacity: 0; }
  51.5% { opacity: 0; }
  54%, 100% { opacity: 1; }
}

/* yellow fists */
.scene__fighter .fist {
  position: absolute;
  filter: blur(.7px);
  top: 30%;
  right: calc(var(--d) * -0.6);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  animation: jab-a 40s linear infinite, fist-color 40s linear infinite;
}
/* Fäuste wechseln zeitgleich mit den Körpern auf Gelb */
/* Übergang deckungsgleich mit fight-flag (47%→48.5% ein, 64.5%→67% aus) */
/* Farbe UND Unschärfe folgen dem Körper: unerkannt weich, erkannt scharf.
   Ohne den Filter stachen die Fäuste als einzige scharfe Punkte hervor. */
@keyframes fist-color {
  0%, 34% { background: var(--white); filter: blur(.7px); }
  35.5%, 51.5% { background: var(--yellow); filter: blur(0px); }
  54%, 100% { background: var(--white); filter: blur(.7px); }
}
.scene__fighter--b .fist {
  right: auto;
  left: calc(var(--d) * -0.6);
  animation-name: jab-b, fist-color;
}
@keyframes jab-a {
  0%, 32% { opacity: 0; transform: translate(0, 0); }
  32.7% { opacity: 1; transform: translate(2px, -4px); }
  33.5% { transform: translate(22px, -8px); }
  34.7% { transform: translate(2px, 0); }
  35.9% { transform: translate(24px, -10px); }
  37.1% { transform: translate(4px, 0); }
  38.3% { transform: translate(26px, -8px); }
  39.5% { transform: translate(2px, 0); }
  40.5% { opacity: 1; transform: translate(2px, 0); }
  42%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes jab-b {
  0%, 33% { opacity: 0; transform: translate(0, 0); }
  33.7% { opacity: 1; transform: translate(-2px, -4px); }
  35% { transform: translate(-22px, -8px); }
  36.3% { transform: translate(-2px, 0); }
  38%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* smaller reticle over the brawl, rides inside the train */
.train .scene__ret--fight {
  left: 66.2%; top: 24px;
  width: 130px; height: 82px;
  animation: ret-fight 40s ease-in-out infinite;
}
@keyframes ret-fight {
  0%, 34% { opacity: 0; transform: scale(1.4); }
  36%   { opacity: 1; transform: scale(1); }
  38.5% { transform: scale(1.08); }
  40.5% { transform: scale(1); }
  51.5% { opacity: 1; }
  54.5%, 100% { opacity: 0; transform: scale(1.2); }
}

/* --- beat 6: the suitcase --- */
.scene__walker {
  position: absolute;
  left: -80px; top: 276px;
  width: 28px; height: 108px;
  animation: walk 40s linear infinite;
}
/* Die Person bleibt durchgehend grau: markiert wird der Koffer, nicht sie.
   Vorher wechselte sie beim Abstellen auf Gelb und trug das Label "Person". */
.scene__walker .person { position: absolute; left: 0; top: 0; }
@keyframes walk {
  0%, 66% { transform: translateX(0) rotate(0deg); }
  67.5% { transform: translateX(190px) rotate(2.5deg); }
  69% { transform: translateX(400px) rotate(-2.5deg); }
  70.5% { transform: translateX(610px) rotate(2.5deg); }
  72% { transform: translateX(820px) rotate(-2.5deg); }
  73.3% { transform: translateX(1000px) rotate(2deg); }
  74.3% { transform: translateX(1060px) rotate(0deg); }
  76.5% { transform: translateX(1060px) rotate(0deg); }  /* stellt den Koffer ab */
  77.6% { transform: translateX(1180px) rotate(10deg); } /* und rennt */
  78.7% { transform: translateX(1310px) rotate(6deg); }
  79.8% { transform: translateX(1440px) rotate(11deg); }
  80.9% { transform: translateX(1560px) rotate(7deg); }
  82% { transform: translateX(1680px) rotate(11deg); }
  84.5%, 100% { transform: translateX(1900px) rotate(9deg); }
}
/* Hier standen walker-flag und ret-walker: die Person wurde beim Abstellen
   gelb und bekam den Rahmen mit dem Label "Person". Beides ist weg — die
   Erkennung gilt dem Gegenstand. */

/* --- Letzter Takt: eine Person auf dem Bahnsteig sackt zusammen --- */
.scene__fall {
  position: absolute;
  /* Auf dem freien Stück Bahnsteig rechts der Mitte — dort, wo vorher die
     Fußgängerszene lief. Weiter unten liegt die Überschrift darüber. */
  left: 75.5%; top: 250px;
  width: var(--d); height: calc(var(--d) * 3.86);
  animation: fall-show 40s linear infinite;
}
/* Kippen steckt im inneren Element, damit der Rahmen gerade stehen bleibt —
   dasselbe Vorgehen wie früher bei der Fußgängerszene. */
.scene__fall__body {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  animation: fall-tilt 40s ease-in infinite;
}
.scene__fall .person { position: absolute; left: 0; top: 0; --pblur: .6px; }
.scene__fall .person.person--yellow {
  --pblur: 0px;
  opacity: 0;
  animation: fall-flag 40s linear infinite;
}
.scene__fall .person.base { animation: fall-hide 40s linear infinite; }
/* Die Person steht die ganze Schleife über auf dem Bahnsteig und blendet nur
   an der Nahtstelle kurz weg, damit der Sturz nicht rückwärts abläuft. */
@keyframes fall-show {
  0% { opacity: 0; }
  1.5%, 98.5% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fall-tilt {
  0%, 87% { transform: rotate(0deg); }
  88.2%   { transform: rotate(-8deg); }    /* knickt ein */
  90%     { transform: rotate(-82deg); }
  91%     { transform: rotate(-88deg); }   /* liegt */
  100%    { transform: rotate(-88deg); }
}
@keyframes fall-flag {
  0%, 91% { opacity: 0; }
  92.2%   { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes fall-hide {
  0%, 91% { opacity: 1; }
  92.2%, 100% { opacity: 0; }
}
.scene__fall .scene__ret--fall {
  left: calc(var(--d, 30px) * -4.1); top: calc(var(--d, 30px) * 3);
  width: calc(var(--d, 30px) * 5.2); height: calc(var(--d, 30px) * 1.75);
  animation: ret-fall 40s ease-in-out infinite;
}
@keyframes ret-fall {
  0%, 91% { opacity: 0; transform: scale(1.5); }
  92.2%   { opacity: 1; transform: scale(1); }
  93.8%   { transform: scale(1.08); }
  95.5%   { transform: scale(1); }
  99%     { opacity: 1; }
  100%    { opacity: 0; }
}

/* ---------- Gepäck: Farbe über currentColor, damit bei Erkennung ALLES mitwechselt ---------- */
/* Gepäck und Hunde: gleiche Unschärfe UND Deckkraft wie die Figurenkörper,
   die durch ihren Verlauf nach unten hin leichter werden */
/* Vorgemischtes Grau-Blau (Weiß 58 % über Bühnen-Blau) statt Deckkraft —
   Gepäck bleibt deckend und scheint hinter Figuren nicht mehr durch.
   Bei Erkennung wechselt currentColor unverändert auf Gelb. */
.case, .duffel, .pack, .brief, .bag--held {
  color: #989DA8;
  filter: blur(var(--pblur, 1.2px));
}

/* Rollkoffer: Korpus mit Naht, Teleskopgriff, zwei Rollen */
.case {
  position: absolute;
  width: 18px; height: 24px;
  border-radius: 4px;
  background:
    linear-gradient(rgba(12, 28, 62, .32), rgba(12, 28, 62, .32)) 0 8px / 100% 1.5px no-repeat,
    currentColor;
}
.case::before {                      /* Teleskopgriff */
  content: "";
  position: absolute;
  left: 50%; translate: -50% 0; top: -10px;
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.case::after {                       /* zwei Rollen, skalieren mit der Breite */
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -2px;
  height: 4px;
  background:
    radial-gradient(circle 2px at 2px 2px, currentColor 98%, transparent 100%) left center / 50% 100% no-repeat,
    radial-gradient(circle 2px at calc(100% - 2px) 2px, currentColor 98%, transparent 100%) right center / 50% 100% no-repeat;
}
/* gezogen links: Griff kippt zur Person, Rollen stehen außen */
.person .case--pulled {
  left: calc(var(--d) * -0.9); bottom: 1px; top: auto;
  width: 16px; height: 20px;
  rotate: 21deg;
  transform-origin: 0% 100%;
}
.person .case--pulled-r {
  left: auto; right: calc(var(--d) * -0.9);
  rotate: -21deg;
  transform-origin: 100% 100%;
}
.person .case--stand {
  left: calc(var(--d) * 0.95); bottom: 1px; top: auto;
  width: 16px; height: 20px;
}

/* Reisetasche */
.duffel {
  position: absolute;
  left: calc(var(--d) * 0.8); bottom: calc(var(--d) * 0.75); top: auto;
  width: 20px; height: 10px;
  border-radius: 6px;
  background: currentColor;
}
.duffel::before {
  content: "";
  position: absolute;
  left: 6px; top: -6px;
  width: 10px; height: 6px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* Rucksack */
.pack {
  position: absolute;
  left: calc(var(--d) * -0.5); top: calc(var(--d) * 1.15);
  width: 14px; height: 18px;
  border-radius: 6px 6px 4px 4px;
  background: currentColor;
}
.pack::before {
  content: "";
  position: absolute;
  left: 50%; translate: -50% 0; top: -4px;
  width: 8px; height: 6px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

/* Aktenkoffer */
.brief {
  position: absolute;
  left: calc(var(--d) * 0.82); bottom: calc(var(--d) * 0.7); top: auto;
  width: 18px; height: 12px;
  border-radius: 2px;
  background:
    linear-gradient(rgba(12, 28, 62, .3), rgba(12, 28, 62, .3)) 0 6px / 100% 1.2px no-repeat,
    currentColor;
}
.brief::before {
  content: "";
  position: absolute;
  left: 6px; top: -4px;
  width: 8px; height: 6px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

/* Handtasche */
.bag--held {
  position: absolute;
  left: calc(var(--d) * 0.82); bottom: calc(var(--d) * 0.8); top: auto;
  width: 14px; height: 12px;
  border-radius: 2px 2px 4px 4px;
  background: currentColor;
}
.bag--held::before {
  content: "";
  position: absolute;
  left: 3.5px; top: -6px;
  width: 8px; height: 8px;
  border: 1.6px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

/* ---------- Hund ---------- */
.dog {
  position: absolute;
  width: 22px; height: 10px;
  border-radius: 6px 6px 4px 4px;
  background: currentColor;
  color: #9197A2;   /* Weiß 55 % über Bühnen-Blau, vorgemischt = deckend */
  filter: blur(var(--pblur, 1.2px));
}
.dog__head {
  position: absolute;
  right: -6px; top: -8px;
  width: 8px; height: 8px;
  border-radius: 50% 50% 45% 45%;
  background: currentColor;
}
.dog__head::before {            /* Schnauze */
  content: "";
  position: absolute;
  right: -3.5px; top: 3.5px;
  width: 6px; height: 3.5px;
  border-radius: 2px;
  background: currentColor;
}
.dog__head::after {             /* Ohr */
  content: "";
  position: absolute;
  left: 0.5px; top: -2px;
  width: 3.5px; height: 6px;
  border-radius: 2px 2px 1px 1px;
  background: currentColor;
  rotate: -12deg;
}
.dog__tail {
  position: absolute;
  left: -6px; top: -4px;
  width: 2.6px; height: 8px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 100%;
  animation: tail-wag .42s ease-in-out infinite alternate;
}
@keyframes tail-wag {
  from { rotate: 18deg; }
  to { rotate: 54deg; }
}
/* Beine: nth-child, weil Kopf und Rute als Geschwister mitzählen; Positionen in %, damit sie mitskalieren */
.dog__leg {
  position: absolute;
  bottom: -4px;
  width: 2.2px; height: 6px;
  border-radius: 0 0 1px 1px;
  background: currentColor;
  transform-origin: 50% 0;
}
.dog__leg:nth-child(3) { left: 13%; }   /* Hinterbeine */
.dog__leg:nth-child(4) { left: 27%; }
.dog__leg:nth-child(5) { left: 63%; }   /* Vorderbeine */
.dog__leg:nth-child(6) { left: 78%; }
@keyframes trot {
  from { rotate: -18deg; }
  to { rotate: 18deg; }
}
.hero .dog--idle { animation: none; }   /* Hunde schweben nicht — nur Rute und Beine bewegen sich */
.dog--flip { scale: -1 1; }
.dog--sm { width: 18px; height: 8px; }
.dog--sm .dog__head { width: 6.5px; height: 6.5px; right: -6px; top: -5.5px; }
/* in the walker's hand until the drop */
/* der Täter zieht den Koffer hinter sich her */
.scene__walker .case--carried {
  left: calc(var(--d, 28px) * -0.9); bottom: 1px; top: auto;
  width: 16px; height: 20px;
  rotate: 21deg;
  transform-origin: 0% 100%;
  animation: bag-carried 40s linear infinite;
}
@keyframes bag-carried {
  0%, 89% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
/* left behind at the drop point */
.scene__bagdrop {
  left: 1006px; top: 360px;
  width: 18px; height: 24px;
  opacity: 0;
  animation: bag-drop 40s linear infinite;
}
@keyframes bag-drop {
  0%, 76% { opacity: 0; color: var(--white); filter: blur(.3px); }
  76.8% { opacity: 1; color: var(--white); filter: blur(.3px); }
  77.8% { color: var(--white); filter: blur(.3px); }
  78.5% { color: var(--yellow); filter: blur(0px); opacity: 1; }
  85.2% { opacity: 1; color: var(--yellow); filter: blur(0px); }
  86.8%, 100% { opacity: 0; filter: blur(0px); }
}
.scene__bagdrop .ping {
  content: "";
  position: absolute;
  inset: -14px -10px -8px -10px;
  border: 2px solid var(--yellow);
  border-radius: 10px;
  opacity: 0;
  animation: bag-ping 40s linear infinite;
}
@keyframes bag-ping {
  0%, 78% { opacity: 0; transform: scale(1.6); }
  79% { opacity: 1; transform: scale(1); }
  80.8% { opacity: .4; transform: scale(1.3); }
  82.5% { opacity: 1; transform: scale(1); }
  84.5% { opacity: 1; }
  86.5%, 100% { opacity: 0; }
}
.scene__ret--bag {
  left: 976px; top: 330px;
  width: 80px; height: 74px;
  animation: ret-bag 40s ease-in-out infinite;
}
@keyframes ret-bag {
  0%, 77.8% { opacity: 0; transform: scale(1.5); }
  79%     { opacity: 1; transform: scale(1); }
  80.8%   { transform: scale(1.08); }
  82.5%   { transform: scale(1); }
  85.2%   { opacity: 1; }
  86.8%, 100% { opacity: 0; }
}

@keyframes cam-blink {
  from { background: var(--blue-5); }
  to { background: var(--yellow); }
}

/* ---------- Typography helpers ---------- */
.h3 { font-size: 24px; font-weight: 800; line-height: 1.3; }
.section-title .sub { line-height: 1.5; }

/* Zeitplan bars grow in when scrolled into view */
@media (prefers-reduced-motion: no-preference) {
  .timeline.reveal .timeline__bar { transform: scaleX(0); transform-origin: left; }
  .timeline.reveal .timeline__bar span { opacity: 0; }
  .timeline.reveal.in-view .timeline__bar {
    animation: bar-grow .9s cubic-bezier(.2, .6, .2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 280ms);
  }
  .timeline.reveal.in-view .timeline__bar span {
    animation: bar-label .5s ease forwards;
    animation-delay: calc(var(--i, 0) * 280ms + 550ms);
  }
}
@keyframes bar-grow { to { transform: scaleX(1); } }
@keyframes bar-label { to { opacity: 1; } }

/* ---------- Utility ---------- */
.center { text-align: center; }
.stack-40 { display: grid; gap: var(--s-5); justify-items: center; }
.mt-24 { margin-top: var(--s-3); }
.mt-40 { margin-top: var(--s-5); }
.mt-64 { margin-top: var(--s-8); }
.mt-80 { margin-top: var(--s-10); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-48 { margin-top: var(--s-6); }
.mt-96 { margin-top: var(--s-12); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; translate: 0 0; }
  .scene { display: none; }
}

/* ---------- Sprachumschalter: aktive Sprache klar erkennbar ---------- */
/* Sprachumschalter: gleiche Schrift und Höhe wie die Menüpunkte, klare
   Trennlinie, aktive Sprache fett + gelb unterstrichen. Die inaktive Sprache
   bleibt voll deckend — nur das Gewicht unterscheidet sie. */
.nav__lang { margin-left: var(--s-1); }
.nav__lang-inner { display: inline-flex; align-items: center; gap: 12px; }
.nav__lang b,
.nav__lang a {
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: var(--ls-wide);
  color: var(--white);
  padding: 4px 0;
}
.nav__lang b,
.nav__lang [data-sprache][aria-current] {
  font-weight: 800;
  box-shadow: 0 2px 0 0 var(--yellow);   /* Unterstrich zeigt die aktive Sprache */
}
.nav__lang-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .35);
}
.nav__lang a { transition: color .15s ease; }
.nav__lang a:not([aria-current]):hover,
.nav__lang a:not([aria-current]):focus-visible { color: var(--blue-05); }
.nav__lang a::before { display: none; }  /* kein Hover-Unterstrich wie bei Menüpunkten */
.nav--dark .nav__lang b { color: var(--black); }

/* ==========================================================================
   Cookie-Hinweis
   ========================================================================== */
.cookie {
  position: fixed;
  /* Volle Fensterbreite, bündig am unteren Rand — bewusst NICHT am
     80-px-Raster; nur der Inhalt bekommt den Seitenabstand als Polster. */
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: var(--s-3) var(--page-margin);
  /* Flache Leiste statt Kasten: so verdeckt der Hinweis den Hero-Knopf nicht.
     Text links, Schaltflächen rechts. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  border-radius: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)), var(--blue-5);
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--white);
  translate: 0 0;
  transition: translate .4s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
}
.cookie > h2 { grid-column: 1; margin: 0; }
.cookie > p { grid-column: 1; margin: 0; }
.cookie .cookie__actions { grid-column: 2; grid-row: 1 / span 2; }
.cookie[hidden] { display: none; }
.cookie--leaving { translate: 0 24px; opacity: 0; }
.cookie h2 {
  font-size: var(--fs-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.cookie p { line-height: 1.5; }
.cookie a { text-decoration: underline; text-underline-offset: 2px; }
.cookie a:hover { color: var(--blue-05); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cookie .cta { padding: 12px 24px; }

/* ==========================================================================
   404
   ========================================================================== */
.notfound {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s-4);
  background: var(--grad-hero);
  color: var(--white);
  padding: var(--s-10);
}
.notfound__code {
  font-size: 160px;
  font-weight: 900;
  line-height: .9;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, .16);
}
.notfound h1 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.25; }
.notfound p { line-height: 1.5; max-width: var(--sp5); margin-inline: auto; }
.notfound__actions { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--s-2); }

/* Presse-Karten ohne Bild: typografischer Platzhalter im Markenlook
   (fremde Artikel-Screenshots wären urheberrechtlich geschützt) */
.press-card__img--text {
  display: grid;
  place-items: center;
  padding: var(--s-3);
  background: var(--grad-card);
}
.press-card__img--text::after { display: none; }
.press-card__img--text span {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .82);
}

/* ==========================================================================
   Formular-Zustände: Validierung, Senden, Rückmeldung
   ========================================================================== */
/* Fehlermeldung sitzt auf der Label-Zeile und ist absolut positioniert —
   dadurch verschiebt sich beim Einblenden kein einziges Feld. */
.field { position: relative; }
.field__error {
  display: none;
  position: absolute;
  top: 0; right: 0;
  max-width: 68%;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--error);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field--invalid .field__error { display: block; }
.field--invalid input,
.field--invalid textarea,
.field--invalid select { border-color: var(--error); }
.panel--glass .field--invalid input,
.panel--glass .field--invalid textarea { border-color: var(--error-hell); }
.panel--glass .field__error { color: var(--error-hell); }

/* Einwilligung und Newsletter: Kästchen neben Fließtext, nicht im Label-Stil.
   Der Platz für die Fehlermeldung ist dauerhaft reserviert (16 px). */
.field--consent { padding-bottom: var(--s-3); }
/* Die Einwilligung ist eine eigene Gruppe, kein weiteres Auswahlfeld */
.field:not(.field--consent) + .field--consent { margin-top: var(--s-1); }
.field--consent .field__error {
  top: auto; bottom: 0;
  left: 0; right: auto;
  max-width: 100%;
}
.field .check {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--s-1);
  align-items: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.field .check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--blue-1);
  cursor: pointer;
}
.field .check a { color: inherit; text-underline-offset: 2px; }
.field--invalid .check { color: var(--error); }
.panel--glass .field--invalid .check { color: var(--error-hell); }
.field--invalid .check input[type="checkbox"] { outline: 2px solid var(--error); outline-offset: 2px; }

/* Ladezustand des Absende-Buttons */
.cta[data-busy] { pointer-events: none; opacity: .72; }
.cta[data-busy]::after {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* Rückmeldung nach dem Absenden */
.form-status {
  display: none;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-tile);
  line-height: 1.5;
}
.form-status[data-state] { display: flex; }
.form-status[data-state="ok"] {
  background: rgba(46, 125, 80, .12);
  border: 1px solid rgba(46, 125, 80, .5);
  color: #1E5C2E;
}
.form-status[data-state="error"] {
  background: rgba(196, 69, 58, .1);
  border: 1px solid rgba(196, 69, 58, .5);
  color: #A5352B;
}
.panel--glass .form-status[data-state="ok"] { background: rgba(255,255,255,.14); border-color: rgba(140, 220, 160, .6); color: #BFE9CB; }
.panel--glass .form-status[data-state="error"] { background: rgba(255,255,255,.14); border-color: rgba(240, 133, 122, .6); color: #F3AEA6; }

/* ==========================================================================
   Sprung zum Inhalt — nur sichtbar, wenn er den Fokus hat
   ========================================================================== */
.skip-link {
  position: absolute;
  left: var(--s-2); top: -100px;
  z-index: 1000;
  padding: var(--s-1) var(--s-2);
  background: var(--yellow);
  color: var(--blue-5);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  border-radius: var(--r-tile);
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-2); }
main:focus { outline: none; }

/* Fließtext bekommt immer eine lesbare Zeilenhöhe, auch wenn ein neuer Block
   vergisst, sie zu setzen. Bewusst nur diese Elemente: p, Tabellenzellen und
   Beschriftungen führen mehrzeiligen Text, Badges und Kennzahlen nicht. */
p, td, th, dd, blockquote, figcaption { line-height: 1.5; }

/* ==========================================================================
   Ortsbühnen auf den Lösungs-Unterseiten
   10-Sekunden-Schleife, ein Beat: erst passiert etwas Sichtbares, dann greift
   die Erkennung. Ein Label ohne Vorgang wirkt behauptet — deshalb hat jede
   Szene eine echte Handlung (Sturz, Streit, Gleisbetreten, Zaunübertritt).
   Der Rahmen sitzt als Kind der Figur und umschließt sie dadurch vollständig.
   ========================================================================== */
.ortszene {
  position: relative;
  aspect-ratio: 1280 / 460;
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue-5) 0%, var(--blue-4) 62%, #0a1730 100%);
  margin: 0;
}
.ortszene__buehne { position: absolute; inset: 0; }

.ortszene__boden {
  position: absolute;
  left: 0; right: 0; bottom: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(170, 192, 237, .34) 12%, rgba(170, 192, 237, .34) 88%, transparent);
}

.ortszene .person { bottom: 0; --pblur: .6px; }

/* Der Akteur: Hülle um die Figur, an der auch der Rahmen hängt.
   Dadurch passt sich der Rahmen jeder Figurengröße von selbst an. */
.ortszene__akteur {
  position: absolute;
  bottom: 22%;
  width: var(--d, 26px);
  height: calc(var(--d, 26px) * 3.86);
}
.ortszene__akteur .person { --d: inherit; left: 0; }

.ortszene__ret {
  position: absolute;
  inset: -10px -12px -6px -12px;
  opacity: 0;
  --corner: 10px;
  --thick: 2px;
  background:
    linear-gradient(var(--yellow), var(--yellow)) 0 0 / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 0 / var(--thick) var(--corner) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 0 / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 0 / var(--thick) var(--corner) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 100% / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 0 100% / var(--thick) var(--corner) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 100% / var(--corner) var(--thick) no-repeat,
    linear-gradient(var(--yellow), var(--yellow)) 100% 100% / var(--thick) var(--corner) no-repeat;
  animation: ort-ret 10s ease-in-out infinite;
}
/* Gestürzte Person: der Rahmen legt sich mit, bleibt aber waagerecht */
/* Rahmen um ein Paar: hängt nicht an einer Figur, sondern spannt über beide.
   Ein Streit betrifft zwei Personen — ein Rahmen um nur eine ist falsch. */
.ortszene__ret--paar {
  inset: auto auto auto auto;
}

/* Gedrehte Figuren: nur die Figur wird transformiert, die Hülle nicht — der
   Rahmen muss der Lage deshalb von Hand folgen. Gemessen liegt die gekippte
   Figur bei 0,40…4,38 × Grundbreite waagerecht und reicht 2,63 × darüber
   hinaus bis 0,49 × unter die Hülle. Der Rahmen deckt das mit etwas Luft ab. */
.ortszene__akteur--liegend .ortszene__ret {
  inset: auto auto calc(var(--d, 26px) * -0.62) calc(var(--d, 26px) * 0.26);
  width: calc(var(--d, 26px) * 4.26);
  height: calc(var(--d, 26px) * 2.1);
}
/* Streitende Figur: lehnt sich zur Seite, der Rahmen bekommt dafür Spielraum */
.ortszene__akteur--stoss-a .ortszene__ret,
.ortszene__akteur--stoss-b .ortszene__ret {
  inset: calc(var(--d, 16px) * -0.3) calc(var(--d, 16px) * -1.5)
         calc(var(--d, 16px) * -0.3) calc(var(--d, 16px) * -0.3);
}
@keyframes ort-ret {
  0%, 20%   { opacity: 0; scale: 1.3; }
  26%       { opacity: 1; scale: 1; }
  32%       { scale: 1.05; }
  38%       { scale: 1; }
  86%       { opacity: 1; }
  94%, 100% { opacity: 0; scale: 1.15; }
}
.ortszene .det-label { font-size: 10px; padding: 4px 12px; white-space: nowrap; }

/* Die erkannte Figur wechselt zeitgleich auf Gelb */
/* Jede erkannte Figur wechselt auf Gelb — auch wenn nur eine den Rahmen
   traegt. Bei einem Streit sind beide Beteiligte erkannt. */
.ortszene__akteur--ziel .person,
.ortszene__akteur--mit-erkannt .person { animation: ort-ziel 10s linear infinite; }
@keyframes ort-ziel {
  0%, 22%   { --tint: #FFFFFF; }
  26%, 90%  { --tint: var(--yellow); }
  94%, 100% { --tint: #FFFFFF; }
}

/* ---------- Handlungen ---------- */
/* Gehen: von links ins Bild und dort bleiben */
@keyframes ort-gehen {
  0%      { translate: -70px 0; }
  20%     { translate: 0 0; }
  100%    { translate: 0 0; }
}
/* Stürzen: kippt über die Füße und bleibt liegen */
@keyframes ort-sturz {
  0%, 12%   { rotate: 0deg; }
  15%       { rotate: -6deg; }
  21%       { rotate: 74deg; }
  23%       { rotate: 79deg; }
  90%       { rotate: 79deg; }
  96%, 100% { rotate: 0deg; }
}
/* Streit: zwei Figuren stoßen gegeneinander.
   Viele kleine Schritte statt weniger großer — bei Sprüngen von 0 auf 22
   Grad wirkt die Bewegung hakelig. Vorbild ist der Streit auf der
   Startseite: überwiegend kleines Rempeln, nur gelegentlich ein Ausfall. */
@keyframes ort-stoss-a {
  0%, 16%  { rotate: 0deg;  translate: 0 0; }
  18%      { rotate: 4deg;  translate: 2px 0; }
  20%      { rotate: 2deg;  translate: 0 0; }
  22%      { rotate: 6deg;  translate: 4px 0; }
  24%      { rotate: 3deg;  translate: 2px 0; }
  27%      { rotate: 14deg; translate: 8px 0; }
  30%      { rotate: 4deg;  translate: 2px 0; }
  33%      { rotate: 12deg; translate: 6px 0; }
  36%      { rotate: 3deg;  translate: 2px 0; }
  40%      { rotate: 15deg; translate: 8px 0; }
  44%      { rotate: 4deg;  translate: 2px 0; }
  50%      { rotate: 11deg; translate: 6px 0; }
  56%      { rotate: 3deg;  translate: 2px 0; }
  62%      { rotate: 9deg;  translate: 4px 0; }
  68%      { rotate: 2deg;  translate: 0 0; }
  76%, 100% { rotate: 0deg; translate: 0 0; }
}
@keyframes ort-stoss-b {
  0%, 16%  { rotate: 0deg;   translate: 0 0; }
  18%      { rotate: -3deg;  translate: -2px 0; }
  20%      { rotate: -1deg;  translate: 0 0; }
  22%      { rotate: -5deg;  translate: -4px 0; }
  25%      { rotate: -12deg; translate: -6px 0; }
  28%      { rotate: -3deg;  translate: -2px 0; }
  31%      { rotate: -10deg; translate: -6px 0; }
  35%      { rotate: -2deg;  translate: 0 0; }
  38%      { rotate: -13deg; translate: -8px 0; }
  42%      { rotate: -4deg;  translate: -2px 0; }
  48%      { rotate: -9deg;  translate: -4px 0; }
  54%      { rotate: -2deg;  translate: 0 0; }
  60%      { rotate: -8deg;  translate: -4px 0; }
  66%      { rotate: -2deg;  translate: 0 0; }
  76%, 100% { rotate: 0deg;  translate: 0 0; }
}
/* Ins Gleis steigen: nach vorn und hinunter */
@keyframes ort-ins-gleis {
  0%, 8%    { translate: 0 0; }
  20%       { translate: 26px 22px; }
  90%       { translate: 26px 22px; }
  97%, 100% { translate: 0 0; }
}
/* Über die Absperrung: seitlich hinüber und einen Schritt weiter */
@keyframes ort-ueber-zaun {
  0%, 6%    { translate: 0 0; }
  12%       { translate: 34px -14px; }
  20%       { translate: 74px 0; }
  90%       { translate: 74px 0; }
  97%, 100% { translate: 0 0; }
}
/* Durchs Tor: hindurchgehen und stehen bleiben */
@keyframes ort-durchs-tor {
  0%, 6%    { translate: -46px 0; }
  20%       { translate: 8px 0; }
  90%       { translate: 8px 0; }
  97%, 100% { translate: -46px 0; }
}
/* Leichtes Wippen für die unbeteiligten Figuren */
@keyframes ort-wippen { from { rotate: -1deg; } to { rotate: 1deg; } }
.ortszene__akteur--ruhig .person {
  animation: ort-wippen 3.2s ease-in-out infinite alternate;
}

.ortszene__akteur--sturz .person { animation: ort-sturz 10s ease-in-out infinite; }
.ortszene__akteur--sturz.ortszene__akteur--ziel .person,
.ortszene__akteur--sturz.ortszene__akteur--mit-erkannt .person {
  animation: ort-sturz 10s ease-in-out infinite, ort-ziel 10s linear infinite;
}
.ortszene__akteur--stoss-a .person { animation: ort-stoss-a 10s ease-in-out infinite; }
.ortszene__akteur--stoss-b .person { animation: ort-stoss-b 10s ease-in-out infinite; }
.ortszene__akteur--stoss-a.ortszene__akteur--ziel .person,
.ortszene__akteur--stoss-a.ortszene__akteur--mit-erkannt .person {
  animation: ort-stoss-a 10s ease-in-out infinite, ort-ziel 10s linear infinite;
}
.ortszene__akteur--stoss-b.ortszene__akteur--ziel .person,
.ortszene__akteur--stoss-b.ortszene__akteur--mit-erkannt .person {
  animation: ort-stoss-b 10s ease-in-out infinite, ort-ziel 10s linear infinite;
}

/* Faust — dieselbe Bauweise wie im Streit auf der Startseite: ein kleiner
   Punkt, der aus dem Körper hervorstößt und zeitgleich mit ihm auf Gelb
   wechselt. Ohne sie sieht man nur zwei schwankende Figuren. */
.ortszene__faust {
  position: absolute;
  filter: blur(.6px);
  top: 30%;
  right: calc(var(--d, 18px) * -0.6);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  animation: ort-faust-a 10s linear infinite, ort-faust-farbe 10s linear infinite;
}
.ortszene__akteur--stoss-b .ortszene__faust {
  right: auto;
  left: calc(var(--d, 18px) * -0.6);
  animation-name: ort-faust-b, ort-faust-farbe;
}
@keyframes ort-faust-a {
  0%, 18%   { opacity: 0; translate: 0 0; }
  20%       { opacity: 1; translate: 2px -4px; }
  22%       { translate: 18px -6px; }
  26%       { translate: 2px 0; }
  30%       { translate: 20px -6px; }
  34%       { translate: 2px 0; }
  42%       { translate: 16px -4px; }
  48%       { translate: 2px 0; }
  60%       { opacity: 1; translate: 14px -4px; }
  70%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes ort-faust-b {
  0%, 18%   { opacity: 0; translate: 0 0; }
  20%       { opacity: 1; translate: -2px -4px; }
  24%       { translate: -16px -6px; }
  28%       { translate: -2px 0; }
  32%       { translate: -18px -6px; }
  36%       { translate: -2px 0; }
  44%       { translate: -14px -4px; }
  50%       { translate: -2px 0; }
  62%       { opacity: 1; translate: -12px -4px; }
  70%, 100% { opacity: 0; translate: 0 0; }
}
/* Farbwechsel deckungsgleich mit dem der Körper (ort-ziel: 22 % → 26 %) */
/* Wie auf der Startseite: unerkannt weich, erkannt scharf. */
@keyframes ort-faust-farbe {
  0%, 22%   { background: var(--white); filter: blur(.6px); }
  26%, 90%  { background: var(--yellow); filter: blur(0px); }
  94%, 100% { background: var(--white); filter: blur(.6px); }
}
.ortszene__akteur--gleis    { animation: ort-ins-gleis 10s ease-in-out infinite; }
.ortszene__akteur--zaun     { animation: ort-ueber-zaun 10s ease-in-out infinite; }
.ortszene__akteur--tor      { animation: ort-durchs-tor 10s ease-in-out infinite; }

/* ---------- gemeinsame Bauteile ---------- */
.ort-block {
  position: absolute;
  bottom: 22%;
  background: rgba(37, 61, 112, .85);
  border-radius: 4px 4px 0 0;
}

/* ---------- Öffentliche Orte ---------- */
.ortszene--platz .ort-block:nth-child(1) { left: 4%;  width: 9%;  height: 46%; }
.ortszene--platz .ort-block:nth-child(2) { left: 14%; width: 8%;  height: 72%; }
.ortszene--platz .ort-block:nth-child(3) { left: 23%; width: 11%; height: 34%; }
.ortszene--platz .ort-block:nth-child(4) { right: 6%; width: 9%;  height: 60%; }
.ortszene--platz .ort-block:nth-child(5) { right: 16%; width: 7%; height: 40%; }
/* Fensterreihen geben den Häusern Maßstab */
.ortszene--platz .ort-block:nth-child(2)::after,
.ortszene--platz .ort-block:nth-child(4)::after {
  content: ""; position: absolute; inset: 12% 20% 8% 20%;
  background:
    repeating-linear-gradient(90deg, rgba(170,192,237,.22) 0 30%, transparent 30% 60%),
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 60%, transparent 60% 100%);
  background-size: 100% 100%, 100% 14%;
}
/* Baum und Bank */
.ortszene--platz .ort-baum {
  position: absolute; bottom: 22%; left: 37%;
  width: 4px; height: 22%;
  background: rgba(170, 192, 237, .3);
}
.ortszene--platz .ort-baum::after {
  content: ""; position: absolute; bottom: 60%; left: -20px;
  width: 42px; height: 42px; border-radius: 50% 50% 46% 46%;
  background: rgba(37, 61, 112, .8);
}
.ortszene--platz .ort-bank {
  position: absolute; bottom: 22%; right: 28%;
  width: 62px; height: 12px;
  border-top: 4px solid rgba(170, 192, 237, .34);
  border-left: 4px solid rgba(170, 192, 237, .22);
  border-right: 4px solid rgba(170, 192, 237, .22);
}
.ortszene--platz .ort-laterne {
  position: absolute; bottom: 22%; left: 46%;
  width: 4px; height: 34%;
  background: rgba(170, 192, 237, .38);
}
.ortszene--platz .ort-laterne::after {
  content: ""; position: absolute; top: -6px; left: -8px;
  width: 18px; height: 8px; border-radius: 10px 10px 2px 2px;
  background: rgba(226, 178, 43, .5);
}

/* ---------- Bahnen und Busse ---------- */
.ortszene--bus .ort-bus {
  position: absolute; bottom: 26%; left: 50%;
  width: 54%; height: 42%;
  margin-left: -27%;
  background: rgba(37, 61, 112, .92);
  border-radius: 14px 20px 6px 6px;
  animation: ort-bus 10s linear infinite;
}
/* Kommt zügig, bleibt lange, fährt gemächlich wieder ab */
/* Ein Bus rollt aus und fährt an — die Beschleunigung gehört an den Anfang
   der Ausfahrt, nicht ans Ende. Deshalb hat jeder Abschnitt seine eigene
   Kurve: einbremsen, stehen, anfahren. Vorher schoss der Bus aus dem Bild. */
@keyframes ort-bus {
  0%   { translate: -150% 0; animation-timing-function: cubic-bezier(.08, .8, .22, 1); }
  22%  { translate: 0 0;     animation-timing-function: linear; }
  72%  { translate: 0 0;     animation-timing-function: cubic-bezier(.7, .02, .92, .4); }
  100% { translate: 140% 0; }
}
.ortszene--bus .ort-bus::before {
  content: ""; position: absolute;
  left: 6%; right: 16%; top: 22%; height: 34%;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg,
    rgba(170, 192, 237, .5) 0 11%, transparent 11% 15%);
}
.ortszene--bus .ort-bus::after {
  content: ""; position: absolute;
  right: 6%; top: 20%; bottom: 0; width: 8%;
  background: rgba(170, 192, 237, .28);
  border-radius: 2px 2px 0 0;
}
.ortszene--bus .ort-rad {
  position: absolute; bottom: -7%;
  width: 9%; aspect-ratio: 1;
  border-radius: 50%;
  background: #0a1226;
  border: 2px solid rgba(170, 192, 237, .4);
}
.ortszene--bus .ort-rad--v { left: 12%; }
.ortszene--bus .ort-rad--h { right: 14%; }
/* Haltestellenmast mit Schild und Fahrplan — gibt der Szene Höhe */
.ortszene--bus .ort-mast {
  position: absolute; bottom: 22%; left: 6%;
  width: 4px; height: 52%;
  background: rgba(170, 192, 237, .34);
}
.ortszene--bus .ort-schild {
  position: absolute; bottom: 70%; left: 3%;
  width: 46px; height: 30px;
  border-radius: 4px;
  background: rgba(226, 178, 43, .22);
  border: 2px solid rgba(226, 178, 43, .5);
}
.ortszene--bus .ort-schild::after {
  content: ""; position: absolute; inset: 26% 18%;
  background: repeating-linear-gradient(180deg,
    rgba(226, 178, 43, .5) 0 2px, transparent 2px 6px);
}
/* Oberleitung über dem Fahrzeug */
.ortszene--bus .ort-leitung {
  position: absolute; left: 0; right: 0; bottom: 82%;
  height: 2px;
  background: rgba(170, 192, 237, .22);
}
/* Die Fahrgäste fahren mit. Wichtig: derselbe Kasten wie der Bus — die
   Prozentwerte im translate beziehen sich auf die eigene Breite, und ein
   bildschirmbreiter Kasten legte hier fast die doppelte Strecke zurück.
   Deshalb wirkten die Fahrgäste, als rannten sie durch den Bus. */
.ortszene--bus .ort-innen {
  position: absolute;
  bottom: 26%; left: 50%;
  width: 54%; height: 42%;
  margin-left: -27%;
  animation: ort-bus 10s linear infinite;
}

/* ---------- Haltestellen und Bahnhöfe ---------- */
.ortszene--halt .ort-dach {
  position: absolute; bottom: 58%; left: 12%;
  width: 46%; height: 6px;
  background: rgba(170, 192, 237, .46);
  border-radius: 4px;
}
/* Hallenbinder über dem Bahnsteig */
.ortszene--halt .ort-binder {
  position: absolute; bottom: 60%; left: 12%;
  width: 46%; height: 16%;
  background:
    repeating-linear-gradient(66deg, rgba(170,192,237,.2) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(114deg, rgba(170,192,237,.2) 0 2px, transparent 2px 22px);
  border-top: 4px solid rgba(170, 192, 237, .34);
}
/* Bahnhofsuhr */
.ortszene--halt .ort-uhr {
  position: absolute; bottom: 62%; left: 66%;
  width: 4px; height: 14%;
  background: rgba(170, 192, 237, .3);
}
.ortszene--halt .ort-uhr::after {
  content: ""; position: absolute; top: -22px; left: -12px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(226, 178, 43, .5);
  background: rgba(12, 28, 62, .9);
}
.ortszene--halt .ort-stuetze {
  position: absolute; bottom: 22%; width: 4px; height: 30%;
  background: rgba(170, 192, 237, .34);
}
.ortszene--halt .ort-stuetze { height: 36%; }
.ortszene--halt .ort-stuetze--l { left: 13%; }
.ortszene--halt .ort-stuetze--r { left: 57%; }
.ortszene--halt .ort-bank {
  position: absolute; bottom: 22%; left: 24%;
  width: 15%; height: 8%;
  border-top: 4px solid rgba(170, 192, 237, .4);
  border-left: 4px solid rgba(170, 192, 237, .28);
  border-right: 4px solid rgba(170, 192, 237, .28);
}
.ortszene--halt .ort-anzeiger {
  position: absolute; bottom: 44%; right: 14%;
  width: 12%; height: 16%;
  background: rgba(37, 61, 112, .9);
  border-radius: 4px;
}
.ortszene--halt .ort-anzeiger::before {
  content: ""; position: absolute; inset: 22% 14%;
  background: repeating-linear-gradient(180deg,
    rgba(226, 178, 43, .55) 0 2px, transparent 2px 8px);
}
/* Bahnsteigkante und Gleis darunter */
.ortszene--halt .ort-kante {
  position: absolute; left: 0; right: 0; bottom: 22%;
  height: 4px;
  background: rgba(226, 178, 43, .45);
}
.ortszene--halt .ort-gleis {
  position: absolute; left: 0; right: 0; bottom: 11%;
  height: 4px;
  background:
    linear-gradient(rgba(170, 192, 237, .34), rgba(170, 192, 237, .34)) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(170, 192, 237, .18) 0 4px, transparent 4px 26px) 0 2px / 100% 2px no-repeat;
}

/* ---------- Baustellen ---------- */
.ortszene--bau .ort-mast {
  position: absolute; bottom: 22%; left: 14%;
  width: 6px; height: 56%;
  background: rgba(226, 178, 43, .5);
}
.ortszene--bau .ort-ausleger {
  position: absolute; bottom: 76%; left: 14%;
  width: 30%; height: 4px;
  background: rgba(226, 178, 43, .5);
}
.ortszene--bau .ort-haken {
  position: absolute; bottom: 60%; left: 38%;
  width: 2px; height: 16%;
  background: rgba(170, 192, 237, .4);
}
.ortszene--bau .ort-haken::after {
  content: ""; position: absolute; bottom: -10px; left: -6px;
  width: 14px; height: 10px;
  background: rgba(37, 61, 112, .95);
  border-radius: 2px;
}
/* Absperrung, über die die Figur steigt */
.ortszene--bau .ort-zaun {
  position: absolute; bottom: 22%; left: 56%;
  width: 30%; height: 15%;
  background: repeating-linear-gradient(115deg,
    rgba(226, 178, 43, .32) 0 8px,
    rgba(37, 61, 112, .62) 8px 14px);
  border-top: 2px solid rgba(226, 178, 43, .5);
}
.ortszene--bau .ort-rohr {
  position: absolute; bottom: 22%; left: 30%;
  width: 12%; height: 4%;
  background: rgba(37, 61, 112, .9);
  border-radius: 4px;
}
/* Materialstapel */
.ortszene--bau .ort-stapel {
  position: absolute; bottom: 22%; left: 42%;
  width: 9%; height: 11%;
  background: repeating-linear-gradient(180deg,
    rgba(37, 61, 112, .95) 0 6px, rgba(170, 192, 237, .16) 6px 8px);
  border-radius: 2px;
}
/* Rohbau im Hintergrund gibt Höhe */
.ortszene--bau .ort-rohbau {
  position: absolute; bottom: 22%; right: 6%;
  width: 22%; height: 56%;
  background:
    repeating-linear-gradient(90deg, rgba(170,192,237,.14) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(180deg, rgba(170,192,237,.14) 0 2px, transparent 2px 30px),
    rgba(37, 61, 112, .5);
  border-top: 2px solid rgba(170, 192, 237, .24);
}

/* ---------- Soziale und medizinische Einrichtungen ---------- */
.ortszene--klinik .ort-haus {
  position: absolute; bottom: 22%; left: 50%;
  width: 40%; height: 44%;
  margin-left: -20%;
  background: rgba(37, 61, 112, .9);
  border-radius: 4px 4px 0 0;
}
/* Fensterraster: zwei saubere Reihen statt überlagerter Verläufe */
.ortszene--klinik .ort-fenster {
  position: absolute;
  left: 10%; right: 10%;
  height: 13%;
  background: repeating-linear-gradient(90deg,
    rgba(170, 192, 237, .34) 0 7%,
    transparent 7% 14%);
}
.ortszene--klinik .ort-fenster--1 { top: 22%; }
.ortszene--klinik .ort-fenster--2 { top: 46%; }
.ortszene--klinik .ort-eingang {
  position: absolute; bottom: 0; left: 50%;
  width: 13%; height: 22%;
  margin-left: -6.5%;
  background: rgba(170, 192, 237, .3);
  border-radius: 4px 4px 0 0;
}
.ortszene--klinik .ort-kreuz {
  position: absolute; bottom: 66%; left: 50%;
  width: 24px; height: 24px;
  margin-left: -12px;
}
.ortszene--klinik .ort-kreuz::before,
.ortszene--klinik .ort-kreuz::after {
  content: ""; position: absolute; background: var(--yellow); border-radius: 2px;
}
.ortszene--klinik .ort-kreuz::before { left: 39%; top: 0; width: 22%; height: 100%; }
.ortszene--klinik .ort-kreuz::after  { top: 39%; left: 0; height: 22%; width: 100%; }
/* Höherer Bettenflügel neben dem Haupthaus */
.ortszene--klinik .ort-fluegel {
  position: absolute; bottom: 22%; left: 68%;
  width: 15%; height: 62%;
  background: rgba(37, 61, 112, .78);
  border-radius: 4px 4px 0 0;
}
.ortszene--klinik .ort-fluegel::after {
  content: ""; position: absolute; inset: 10% 14% 12% 14%;
  background: repeating-linear-gradient(180deg,
    rgba(170, 192, 237, .26) 0 6px, transparent 6px 16px);
}
/* Rettungswagen vor dem Eingang */
.ortszene--klinik .ort-wagen {
  position: absolute; bottom: 22%; left: 16%;
  width: 76px; height: 34px;
  background: rgba(170, 192, 237, .32);
  border-radius: 6px 10px 4px 4px;
}
.ortszene--klinik .ort-wagen::before {
  content: ""; position: absolute; top: -6px; left: 34%;
  width: 16px; height: 6px; border-radius: 4px;
  background: rgba(226, 178, 43, .7);
}
.ortszene--klinik .ort-wagen::after {
  content: ""; position: absolute; bottom: -6px; left: 12%; right: 12%;
  height: 10px;
  background:
    radial-gradient(circle at 12% 50%, #0a1226 0 6px, transparent 6px),
    radial-gradient(circle at 88% 50%, #0a1226 0 6px, transparent 6px);
}

/* ---------- Individuelle Orte ---------- */
.ortszene--frei .ort-halle {
  position: absolute; bottom: 22%; left: 6%;
  width: 25%; height: 44%;
  background: rgba(37, 61, 112, .88);
  border-radius: 4px 4px 0 0;
}
.ortszene--frei .ort-halle::before {
  content: ""; position: absolute; top: -12px; left: -5%; right: -5%; height: 12px;
  background: rgba(37, 61, 112, .95);
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.ortszene--frei .ort-zaunlinie {
  position: absolute; bottom: 22%;
  height: 20%;
  background: repeating-linear-gradient(90deg,
    rgba(170, 192, 237, .34) 0 2px, transparent 2px 16px);
  border-top: 2px solid rgba(170, 192, 237, .34);
}
.ortszene--frei .ort-zaunlinie--l { left: 36%; width: 16%; }
.ortszene--frei .ort-zaunlinie--r { left: 62%; right: 7%; }
.ortszene--frei .ort-tor {
  position: absolute; bottom: 22%; left: 52%;
  width: 10%; height: 24%;
  border: 2px solid rgba(226, 178, 43, .5);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
/* Kameramast über dem Tor */
.ortszene--frei .ort-kameramast {
  position: absolute; bottom: 22%; left: 49%;
  width: 4px; height: 54%;
  background: rgba(170, 192, 237, .34);
}
.ortszene--frei .ort-kameramast::after {
  content: ""; position: absolute; top: -4px; left: 2px;
  width: 30px; height: 12px;
  border-radius: 4px 6px 6px 4px;
  background: rgba(37, 61, 112, .95);
  border: 2px solid rgba(170, 192, 237, .4);
}
/* Silo neben der Halle */
.ortszene--frei .ort-silo {
  position: absolute; bottom: 22%; left: 33%;
  width: 6%; height: 46%;
  background: rgba(37, 61, 112, .8);
  border-radius: 26px 26px 2px 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ortszene *, .ortszene { animation: none !important; }
  .ortszene__ret { opacity: 1; }
}

/* ==========================================================================
   Zeilenumbrüche in Überschriften
   Ohne Hilfe bricht der Browser gierig um: er füllt jede Zeile bis zum Rand
   und lässt am Ende ein einzelnes Wort stehen — „AI WATCH IN BAHNEN UND" /
   „BUSSEN". text-wrap: balance verteilt die Wörter gleichmäßig auf alle
   Zeilen, sodass keine Zeile allein steht. Browser ohne Unterstützung
   ignorieren die Regel und brechen wie bisher um.
   ========================================================================== */
h1, h2, h3,
.h2, .hero__title, .page-hero__inner h1,
.section-title h2,
.detail-card h3, .navy-card h3, .tile__label,
.glass-card h3, .feature h3, .type-row h3 {
  text-wrap: balance;
}

/* .principle h3 bleibt bewusst draußen. Die drei Überschriften der Sektion
   „Was alle Lösungen verbindet" stehen in Figma einzeilig und tragen dafür
   white-space: nowrap. Beide Eigenschaften steuern denselben Teilwert
   (text-wrap-mode) — ein balance an dieser Stelle hebt das nowrap auf und
   „Nachrüsten statt austauschen" bricht auf zwei Zeilen um. */

/* Fließtext bekommt "pretty" statt "balance": das verhindert nur die
   Schusterjunge-Zeile am Absatzende, ohne die Zeilenlängen anzugleichen —
   bei langen Absätzen wäre balance zu teuer und sähe unruhig aus. */
p, .body-copy, .lead, .sub {
  text-wrap: pretty;
}

/* ==========================================================================
   Bühnen-Requisiten der Unterseiten-Heroes (.ph-*)
   Jede Unterseite bekommt eine eigene kleine Szene statt der immergleichen
   drei Figuren. Die Requisiten sind bewusst zurückhaltend (aria-hidden,
   pointer-events: none) und nutzen die globalen Figuren/Gepäck-Bausteine.
   ========================================================================== */
.page-hero [aria-hidden] { pointer-events: none; }

/* Haltestellen: Mast mit gelbem H-Schild */
.page-hero .ph-mast {
  position: absolute;
  width: 3px; height: 112px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .35);
}
.page-hero .ph-mast::before {          /* Schild sitzt oben am Mast */
  content: "H";
  position: absolute;
  top: -8px; left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue-5);
  font-size: 13px;
  font-weight: 800;
  opacity: .9;
}

/* Bahnen: angedeutetes Gleis am Bühnenboden */

/* Baustellen: schraffierte Absperrbake */
.page-hero .ph-bake {
  position: absolute;
  width: 10px; height: 56px;
  border-radius: 3px;
  background: repeating-linear-gradient(-45deg,
    var(--yellow) 0 8px, rgba(255, 255, 255, .75) 8px 16px);
  opacity: .65;
}
.page-hero .ph-bake::before {          /* Standfuß */
  content: "";
  position: absolute;
  left: -7px; right: -7px; bottom: -4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
}

/* Individuelle Orte: Erkennungsrahmen steht ruhig um eine Figur */
.page-hero .scene__ret { opacity: .85; }
.page-hero .scene__ret .det-label { opacity: 1; }

/* Kamera-Dome wie im Start-Hero, für Kontext an Deckenkante */

/* ==========================================================================
   KI-Chat (Kontakt-Hero) — Attrappe: zeigt, wie Frage und Antwort aussehen
   ========================================================================== */
.ki-chat {
  width: min(640px, 100%);
  display: grid;
  gap: var(--s-2);
  justify-self: center;
}
/* Festes Chat-Fenster: Höhe steht, Blasen stapeln von unten, Älteres
   scrollt — Breite und Höhe des Panels ändern sich beim Antworten NIE. */
.ki-chat__verlauf {
  display: grid;
  gap: var(--s-1);
  text-align: left;
  height: 280px;
  overflow-y: auto;
  align-content: end;
  padding-right: 4px;             /* Luft für die Scrollleiste */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.chat-bubble {
  max-width: 85%;
  padding: 12px 20px;
  border-radius: 20px;
  line-height: 1.5;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
}
.chat-bubble--frage {
  justify-self: end;
  background: var(--white);
  color: var(--text-dark);
  border-bottom-right-radius: 4px;
}
.chat-bubble--antwort {
  justify-self: start;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
  border-bottom-left-radius: 4px;
}
/* drei pulsierende Punkte, solange die Antwort "tippt" */
.chat-bubble--tippt { display: inline-flex; gap: 4px; padding-block: 16px; }
.chat-bubble--tippt i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  animation: chat-punkt 1s ease-in-out infinite;
}
.chat-bubble--tippt i:nth-child(2) { animation-delay: .16s; }
.chat-bubble--tippt i:nth-child(3) { animation-delay: .32s; }
@keyframes chat-punkt { 50% { opacity: .25; translate: 0 -2px; } }
.ki-chat__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1);
  align-items: center;
}
.ki-chat__form input {
  min-width: 0;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .40);
  background: rgba(255, 255, 255, .10);
  color: var(--white);
  font: inherit;
  letter-spacing: inherit;
}
.ki-chat__form input::placeholder { color: rgba(255, 255, 255, .55); }
.ki-chat__form input:focus-visible { outline-offset: 2px; }
.ki-chat__hinweis { color: rgba(255, 255, 255, .55); text-align: center; }

/* ==========================================================================
   Video-Sektion (Startseite) — Standbild, Video lädt erst auf Klick
   ========================================================================== */
/* Schmaler als die volle Inhaltsbreite (8 Spalten, mittig), Seitenverhältnis
   bleibt 16:9 — so sind Titel, Untertitel UND Video gemeinsam im Blick. */
.video-buehne {
  position: relative;
  max-width: var(--sp8);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--grad-card);
}
.video-buehne img,
.video-buehne video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Schlichter Abspielknopf: weiße Scheibe, dunkles Dreieck — kein Verlauf
   über dem Standbild, keine Glas-Effekte. Klickfläche bleibt die ganze Bühne. */
.video-buehne__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  cursor: pointer;
}
.video-buehne__play-kreis {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-5);
  box-shadow: 0 8px 32px rgba(7, 14, 32, .40);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.video-buehne__play:hover .video-buehne__play-kreis,
.video-buehne__play:focus-visible .video-buehne__play-kreis { transform: scale(1.08); }
.video-buehne__play-kreis svg { translate: 2px 0; }

/* Nur Einzeldatei (galvorn.html): Die Zwillings-Startseite der jeweils
   anderen Sprache bleibt gerendert, aber unsichtbar — ihre Animationen
   laufen weiter, damit der Sprachwechsel die Hero-Szene nicht neu startet. */
.page--lautlos {
  visibility: hidden;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

/* ==========================================================================
   Danke-Zustand nach dem Absenden — ersetzt das Formular ([data-danke])
   ========================================================================== */
.form-danke {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-2);
  padding-block: var(--s-6);
}
.form-danke__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(226, 178, 43, .16);
  color: var(--yellow-2);
}
.form-danke h3 {
  font-size: 24px;
  font-weight: 800;
}
.form-danke p {
  max-width: 44ch;
  opacity: .75;
}

/* ==========================================================================
   Terminwahl (Kontakt) — jede Zeile ist als Ganzes der Verweis auf die
   Bookings-Seite der Person. Kein eigener Knopf: die Fläche IST der Knopf.
   Trennlinie ZWISCHEN den Zeilen, nicht um sie herum — der Kasten hat schon
   einen Rahmen, ein zweiter darin wirkt verschachtelt.
   ========================================================================== */
.terminwahl { display: grid; }
.terminwahl li + li { border-top: 1px solid var(--grey-300); }
.terminwahl__person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  /* Seitlich ins Kasten-Polster hinein, damit die Fläche bis an die Kante
     reicht und der Text trotzdem auf einer Linie mit dem übrigen Inhalt sitzt */
  padding: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-tile);
  color: var(--black);
  transition: background-color .34s ease;
}
.terminwahl__person:hover,
.terminwahl__person:focus-visible { background: var(--grey-100); }
/* Der Pfeil rückt beim Überfahren nach — gleiche Sprache wie „Zum Artikel"
   auf den Pressekacheln. */
.terminwahl__pfeil {
  flex: 0 0 auto;
  color: var(--blue-1);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1);
}
.terminwahl__person:hover .terminwahl__pfeil,
.terminwahl__person:focus-visible .terminwahl__pfeil { transform: translateX(4px); }

/* ==========================================================================
   Ansprechpartner (Kontakt) — Gesicht zum Termin-Formular
   ========================================================================== */
.ansprechpartner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.ansprechpartner__foto {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-card);
  color: var(--white);
  font-weight: 800;
  letter-spacing: var(--ls-wider);
  object-fit: cover;          /* greift, sobald das echte Foto als <img> kommt */
  flex: 0 0 auto;
}
.ansprechpartner__name {
  display: grid;
  gap: 4px;
  font-weight: 700;
}
.ansprechpartner__name span {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--grey-600);
}

/* ==========================================================================
   Hardware-Illustration (Lösungsseiten) — ersetzt den leeren Bildplatzhalter:
   die Privacy Unit als Gerät mit blinkender Statusanzeige auf Navy-Panel
   ========================================================================== */
.hardware-visual { gap: var(--s-3); align-content: center; }
.hardware-visual__geraet {
  position: relative;
  display: grid;
  place-items: center;
}
.hardware-visual__geraet img {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .45));
}
.hardware-visual__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.hardware-visual__led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  animation: hardware-led 1.6s steps(2, jump-none) infinite;
}
@keyframes hardware-led { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .hardware-visual__led { animation: none; }
}

/* ==========================================================================
   Callout — helles Panel mit Icon (z. B. „Die Kontrolle bleibt bei Ihnen."
   unter „Was wir nicht wollen"). Hell, damit auf dunklen wie hellen
   Sektionen kein zweiter Blauton entsteht; Icon gegen die Textwüste.
   --quer = volle Breite, Kopf links, Text rechts.
   ========================================================================== */
.callout {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-5);
  background: var(--grey-100);
  color: var(--text-dark);
  border-radius: var(--r-card);
}
.callout__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--yellow-2);
}
.callout h3 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}
.callout p { line-height: 1.5; }
.callout__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
  font-weight: 700;
  color: var(--yellow-2);
}
.callout__link:hover,
.callout__link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.callout--quer {
  grid-template-columns: var(--sp4) 1fr;
  gap: var(--gutter);
  align-items: start;
}
.callout__kopf { display: grid; gap: var(--s-2); justify-items: start; }
.callout__inhalt { display: grid; gap: var(--s-2); justify-items: start; }
.callout--quer .callout__inhalt p { max-width: var(--sp6); }

/* ==========================================================================
   BREAKPOINTS — Tablet und Mobil
   ==========================================================================
   Der Entwurf oben ist auf 1440 px gesetzt. Alles ab hier sind reine
   Übersteuerungen nach unten (max-width). Oberhalb von 1400 px greift
   nichts davon — die Fassung für große Bildschirme bleibt unverändert.

   Stufen:
     1400  Seitenrand schrumpft, Raster bleibt zwölfspaltig
     1180  vierspaltige Karten werden zweispaltig, Schrift eine Stufe kleiner
     1024  MENÜKNOPF (dieselbe Grenze steht in main.js), Spalten paarweise
      760  ein Strang: alles untereinander, Telefon-Typografie
      480  kleine Telefone: Knöpfe dürfen umbrechen, letzte Feinheiten

   Die --sp*-Tokens (Spaltenbreiten) bleiben absichtlich stehen: sie werden
   fast überall als max-width benutzt und sind damit unterhalb ihrer Größe
   von selbst wirkungslos. Angefasst wird nur, was feste Breiten oder feste
   Spaltenzahlen hat — dort entsteht der Überlauf.
   ========================================================================== */

/* Der Menüknopf steht in jeder Seite im Markup, ist aber nur unterhalb von
   1024 px sichtbar. Auf großen Bildschirmen existiert er für Auge und
   Screenreader nicht — display:none nimmt ihn auch aus der Tab-Reihenfolge. */
.nav__burger { display: none; }

/* ---------- Ab hier passt der 80-px-Rand nicht mehr ---------- */
@media (max-width: 1400px) {
  :root { --page-margin: 48px; }
}

@media (max-width: 1180px) {
  :root {
    --page-margin: 40px;
    --fs-display: 52px;
    --fs-stat: 56px;
    --fs-h2: 34px;
  }
  .section { padding-block: var(--s-10); }
  .page-hero .display { font-size: 44px; }

  /* Vierspaltige Kartenbänder werden zweispaltig — die Trennlinien wandern
     mit, sonst stünde in jeder Zeile eine Linie an der falschen Stelle. */
  .glass-grid, .detail-cards { grid-template-columns: repeat(2, 1fr); }
  .glass-grid.glass-grid .glass-card,
  .detail-cards.detail-cards .detail-card { border-left: 0; }
  .glass-grid.glass-grid .glass-card:not(:nth-child(2n + 1)) { border-left: 1px solid rgba(255, 255, 255, .35); }
  .detail-cards.detail-cards .detail-card:not(:nth-child(2n + 1)) { border-left: 1px solid rgba(12, 28, 62, .18); }

  /* Die Ziffern 01/02/03 hängen an Figma-Koordinaten; hier eine Stufe
     kleiner, damit sie nicht in den Text der Nachbarspalte ragen. */
  .principles__num { font-size: 148px; }
  .principle h3 { font-size: 44px; }
  .principle--2 h3 { width: auto; }
}

/* ==========================================================================
   1024 — die Menüzeile passt nicht mehr in eine Reihe
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --fs-display: 44px;
    --fs-stat: 48px;
    --fs-h2: 30px;
    --fs-lead: 20px;
  }
  .section { padding-block: var(--s-8); }

  /* ---------- Menüknopf statt Menüzeile ---------- */
  /* Die Leiste bricht um: Logo und Knopf bleiben oben, die Punkte klappen
     als volle Zeile darunter auf. Gesteuert über [data-menu-open] auf der
     Kopfzeile — dasselbe Attribut setzt main.js. */
  .nav { flex-wrap: wrap; gap: var(--s-2); }
  .nav__burger {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;      /* volle Antippfläche, auch wenn das Zeichen kleiner ist */
    margin-right: calc(var(--s-1) * -1);
    color: var(--white);
    background: none;
    border: 0;
    border-radius: var(--r-tile);
  }
  .nav--dark .nav__burger { color: var(--black); }
  .nav__burger-striche {
    display: grid;
    gap: 5px;
    width: 22px;
  }
  .nav__burger-striche i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .24s cubic-bezier(.2, .7, .3, 1), opacity .18s ease;
  }
  /* Offen: aus den drei Strichen wird ein Kreuz */
  .site-header[data-menu-open] .nav__burger-striche i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header[data-menu-open] .nav__burger-striche i:nth-child(2) { opacity: 0; }
  .site-header[data-menu-open] .nav__burger-striche i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Solange das Menü offen ist, braucht die Leiste ihren eigenen Grund —
     sonst stünden die Punkte auf dem Hero-Bild. */
  .site-header[data-menu-open] {
    background-color: rgba(7, 14, 32, .97);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }

  .nav__links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Ist die Liste länger als der Bildschirm, scrollt sie in sich */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding-bottom: var(--s-2);
  }
  .site-header[data-menu-open] .nav__links { display: flex; }
  .nav__links > li { border-top: 1px solid rgba(255, 255, 255, .12); }
  .nav__links a,
  .nav__links .nav__droptoggle {
    display: block;
    width: 100%;
    padding: 14px 0;
    text-align: left;
  }
  /* Der Unterstrich der Zeile fährt sonst über die volle Breite */
  .nav__links a::before,
  .nav__links .nav__droptoggle::before { display: none; }
  /* Der Platzhalter für die fette Schrift hält im Block-Layout keine Breite
     mehr frei und würde nur eine leere Zeile erzeugen. */
  .nav__lbl { display: block; text-align: left; }
  .nav__lbl::after { content: none; }

  /* Das Untermenü klappt in der Liste auf statt darüber zu schweben */
  .nav__item--dropdown { position: static; }
  /* Muss so spezifisch sein wie die Block-Regel oben, sonst gewinnt dort das
     display:block und der Pfeil rutscht unter die Beschriftung. */
  .nav__links .nav__droptoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav__links .nav__droptoggle .nav__lbl { flex: 1 1 auto; }
  .nav__dropdown {
    position: static;
    translate: none;
    min-width: 0;
    padding: 0 0 var(--s-2) var(--s-2);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav__dropdown a { padding: 10px 0 !important; }
  .nav__dropdown a:hover { background: none; color: var(--blue-05) !important; }
  .nav__dropdown-overview { border-bottom: 0; margin-bottom: 0; }
  .nav__lang { margin-left: 0; padding-block: var(--s-2); }

  /* ---------- Bühnen ---------- */
  /* Die Hero-Szene ist auf 1440 px Entwurfsbreite gezeichnet: der Zug ist
     fest 1720 px breit (seine Nasenform steckt in einem clip-path und lässt
     sich nicht umbauen), die Figuren stehen an Prozentmarken. Auf schmalen
     Geräten muss deshalb die ganze Bühne maßstäblich schrumpfen — sonst
     stünde nur ein Ausschnitt im Bild und der Zug wäre an beiden Enden
     abgeschnitten. Verkleinert wird über die eigenständige scale-Eigenschaft,
     nicht über transform: transform ist durch die Zoom-Animation belegt,
     beide wirken multiplikativ übereinander.

     scale schrumpft aber auch die Kastenbreite. Damit die Bühne trotzdem von
     Kante zu Kante läuft, wird der Kasten um den Kehrwert breiter gemacht und
     so verschoben, dass die verkleinerte Fassung wieder genau auf der
     Bildbreite liegt. Rechenweg mit Faktor f und dem x-Ursprung 61 %
     (transform-origin der hero-zoom, der auch für scale gilt):
       sichtbare Breite = Breite × f   =>  Breite = 100 % / f
       linke Kante des Kastens         =  −61 % × (100 % / f − 100 %)

     f = 100vw / 1440px hält den Maßstab des Entwurfs über die ganze Spanne:
     bei 1440 px wäre f = 1, bei 390 px ist die Bühne 27 % groß — und der Zug
     steht mit der Nase am rechten Rand, genau wie am Schreibtisch. Länge
     durch Länge zu teilen ist CSS Values 4; Browser ohne diese Rechnung
     behalten den festen Vorgabewert und bekommen damit eine brauchbare,
     ebenfalls randlose Näherung. */
  .hero__graphics {
    --buehne: .5;
    scale: var(--buehne);
    inset-inline: calc(-.61 * (100% / var(--buehne) - 100%)) auto;
    width: calc(100% / var(--buehne));
  }
  @supports (scale: calc(100vw / 1440px)) {
    .hero__graphics { --buehne: calc(100vw / 1440px); }
  }
  /* Rahmen und Beschriftungen der Erkennung sind Bedienoberfläche, keine
     Szenerie: sie müssen lesbar bleiben, auch wenn die Bühne auf ein Viertel
     schrumpft. Deshalb rechnen sie den Maßstab wieder heraus — die Zahlen
     sind die gewünschten Bildschirmgrößen in px. */
  .hero__graphics .det-label {
    font-size: calc(12px / var(--buehne));
    padding: calc(4px / var(--buehne)) calc(10px / var(--buehne));
    margin-bottom: calc(7px / var(--buehne));
    box-shadow: 0 calc(2px / var(--buehne)) calc(8px / var(--buehne)) rgba(7, 14, 32, .45);
  }
  .hero__graphics .scene__ret {
    --corner: calc(7px / var(--buehne));
    --thick: calc(1.6px / var(--buehne));
  }
  /* Der Rahmen im Zug ist bewusst kleiner als die auf dem Bahnsteig und
     erscheint nur während der Heranfahrt (hero-zoom, Faktor 1,7) — er braucht
     denselben Ausgleich, aber in seiner eigenen, kleineren Abmessung. */
  .hero__graphics .train .scene__ret--fight {
    --corner: calc(5px / var(--buehne));
    --thick: calc(1.1px / var(--buehne));
  }
  .hero__graphics .train .scene__ret--fight .det-label {
    font-size: calc(8px / var(--buehne));
    padding: calc(1.5px / var(--buehne)) calc(5px / var(--buehne));
    margin-bottom: calc(5px / var(--buehne));
  }
  /* Der Schleier deckt auf großen Bildschirmen nur die linken 71 % ab —
     rechts soll die Szene frei stehen, weil der Text dort nicht hinreicht.
     Im Hochformat läuft der Text über die volle Breite, also muss auch der
     Schleier über die volle Breite decken und früher einsetzen. Eine
     einzelne Maskenebene genügt dafür; das Verrechnen zweier Ebenen
     (mask-composite) entfällt damit von selbst. */
  .hero__veil {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .78) 33%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .78) 33%, #000 40%);
  }
  /* Der Text beginnt dort, wo die Bühne endet — und die Bühne wächst linear
     mit der Bildbreite (siehe Faktor f oben). Ein vh-Wert wäre hier falsch:
     die Szene misst sich an der Breite, nicht an der Höhe des Geräts.
     150 px + 45 vw entspricht der Unterkante der hintersten Figurenreihe. */
  .hero__inner { padding-top: calc(150px + 45vw); }
  .hero__claim { margin-top: clamp(64px, 10vh, 120px); }
  .hero .badges { margin-top: clamp(48px, 8vh, 88px); gap: var(--s-2); }

  /* Feste 480 px reichen nicht mehr für Titel plus Untertitel (und auf der
     Kontaktseite für das Chat-Fenster). Ab hier wächst die Bühne mit. */
  .page-hero {
    height: auto;
    min-height: 400px;
    padding-top: 112px;
    padding-bottom: var(--s-6);
  }
  .page-hero .display { font-size: 38px; }

  /* ---------- Dreispaltiges wird zweispaltig ---------- */
  .tile-grid, .navy-grid, .press-grid, .feature-list,
  .glass-grid--3, .detail-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .feature-list.feature-list .feature { border-left: 0; }
  .feature-list.feature-list .feature:not(:nth-child(2n + 1)) { border-left: 1px solid rgba(255, 255, 255, .35); }
  .feature-list--light.feature-list--light .feature:not(:nth-child(2n + 1)) { border-left-color: rgba(12, 28, 62, .18); }

  /* ---------- Zweispaltiges wird einspaltig ---------- */
  .split, .contact-cols, .callout--quer { grid-template-columns: 1fr; }
  /* Raster- und Flex-Kinder haben min-width:auto und schrumpfen deshalb nie
     unter ihre Eigenbreite. Bei Eingabefeldern ist das die vom Browser
     gesetzte Standardbreite (input size=20, textarea cols=20) — die schob
     den Kasten auf schmalen Telefonen über den Rand hinaus. */
  .panel, .form-grid, .field,
  .field input, .field textarea, .field select { min-width: 0; }
  .type-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .type-row p { max-width: none; justify-self: start; }

  /* ---------- Lange Dokumente: Randnavigation nach oben ---------- */
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc {
    grid-column: 1;
    position: static;
    /* Ein Inhaltsverzeichnis mit 25 Punkten würde die Seite sonst auf
       Armeslänge nach unten schieben — hier rollt es in sich. */
    max-height: 240px;
    padding-right: 0;
  }
  .doc-body { grid-column: 1; }
  /* Die Rechtstexte führen ausgeschriebene Adressen wie
     „https://admin.typeform.com/to/…". Ein Rasterfeld ist nie schmaler als
     das längste unteilbare Wort darin, und overflow-wrap:break-word ändert
     diese Mindestbreite ausdrücklich NICHT — es bricht nur beim Zeichnen.
     Erst min-width:0 gibt die Spalte frei; den Umbruch besorgt dann die
     Regel weiter unten. */
  .doc-toc, .doc-body { min-width: 0; }
  .doc-toc a, .prose a { overflow-wrap: break-word; }

  /* ---------- Tabellen bekommen eine eigene Rollfläche ---------- */
  /* Umbrechen macht eine Vergleichstabelle unlesbar; seitliches Rollen
     erhält den Zeilenbezug. */
  .compare { overflow-x: auto; }
  .compare table { min-width: 620px; }
  .timeline { overflow-x: auto; padding-bottom: var(--s-1); }
  .timeline__months, .timeline__bars { min-width: 560px; }

  /* ---------- Fußzeile: Marke über die volle Breite ---------- */
  .site-footer__marke { grid-column: span 12; }
  .site-footer__spalte--loesungen,
  .site-footer__spalte--unternehmen,
  .site-footer__spalte--kontakt { grid-column: span 4; }

  .accordion { padding: var(--s-3) var(--s-4); }
  .statement-band p { font-size: 22px; }
  .ledger__row h3 { font-size: 26px; }
  .ortszene { aspect-ratio: 2 / 1; }
  .stars-deco { width: 380px; height: 380px; right: -80px; }
}

/* ==========================================================================
   760 — Telefon: ein Strang
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    --page-margin: 24px;
    --gutter: 16px;
    --fs-display: 34px;
    --fs-stat: 40px;
    --fs-h2: 26px;
    --fs-lead: 18px;
  }
  .section { padding-block: var(--s-6); }

  /* Deutsche Komposita sind länger als eine Telefonspalte breit ist —
     „Datenschutzerklärung" allein misst in der Auszeichnungsgröße mehr als
     ein 320-px-Bildschirm hergibt und schob die ganze Seite auf.
     break-word greift ausschließlich bei Wörtern, die sonst überliefen;
     alles, was passt, bricht unverändert an der Wortgrenze. Die Trennstriche
     kommen von hyphens:auto und funktionieren, weil jede Seite ihre Sprache
     im <html lang> mitbringt. */
  h1, h2, h3, h4, p, li, dd, td, th, summary, label,
  .display, .h2, .lead, .prose { overflow-wrap: break-word; }
  /* Trennstriche NUR dort, wo wirklich lange Wörter auf wenig Breite treffen:
     in der Auszeichnungsgröße und im Fließtext der Rechtsseiten. Auf den
     versalen Kartentiteln sah die Trennung falsch aus („MEDIZINI-SCHE"), und
     nötig ist sie dort nicht — break-word oben fängt Ausreißer ohnehin ab. */
  .display, .prose { hyphens: auto; }

  /* Alles, was mehr als eine Spalte hatte, steht jetzt untereinander.
     Die senkrechten Trennlinien ergeben ohne Nachbarspalte keinen Sinn —
     stattdessen trennt eine waagerechte Linie die Positionen. */
  .glass-grid, .glass-grid--3,
  .detail-cards, .detail-cards--3,
  .feature-list, .navy-grid, .press-grid,
  .stats, .ledger__row, .field--row { grid-template-columns: 1fr; }
  .glass-grid.glass-grid .glass-card,
  .detail-cards.detail-cards .detail-card,
  .feature-list.feature-list .feature { border-left: 0; padding: 0; }
  /* Gegenstück zu den Zweispalter-Linien weiter oben: die stehen mit vier
     Klassen (0,4,0) über der Rücknahme darüber und kämen sonst hier wieder
     durch — an einer einzelnen Spalte als Strich am linken Kartenrand. */
  .glass-grid.glass-grid .glass-card:not(:nth-child(2n + 1)),
  .detail-cards.detail-cards .detail-card:not(:nth-child(2n + 1)),
  .feature-list.feature-list .feature:not(:nth-child(2n + 1)) { border-left: 0; }
  /* Ausnahme: die vierspaltige Fassung der Startseite steht untereinander
     ganz ohne Trennlinie — Symbol und Überschrift gliedern dort deutlich
     genug. Die dreispaltige Fassung (Soziale Einrichtungen) behält ihre. */
  .glass-grid--3.glass-grid--3 .glass-card:not(:first-child),
  .feature-list.feature-list .feature:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, .35);
    padding-top: var(--s-3);
  }
  .detail-cards.detail-cards .detail-card:not(:first-child) {
    border-top: 1px solid rgba(12, 28, 62, .18);
    padding-top: var(--s-3);
  }
  .glass-grid, .glass-grid--3, .detail-cards, .detail-cards--3 { row-gap: var(--s-3); }
  .feature-list { row-gap: var(--s-3); }
  .ledger__row { gap: var(--s-1); }

  /* Die Kacheln der Startseite bleiben zu zweit: sechs volle Breiten
     untereinander wären eine sehr lange Rutschbahn. */
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 128px; }
  .tile__label { font-size: 14px; }

  /* ---------- Kopfzeile und Bühnen ---------- */
  /* Der Faktor rechnet sich weiter aus der Bildbreite, nur der Abstand von
     oben wird knapper — der Kopfbereich ist hier niedriger. */
  .hero__graphics { inset-block-start: 24px; }
  .hero { min-height: 88vh; }
  /* In den kleinen Ortszenen tritt die Menge auf dem Telefon zurück, damit
     der Erkennungsrahmen trägt. Die gelbe Markierungsfigur bleibt davon
     unberührt: ihre Deckkraft kommt aus einer Keyframe-Animation, und die
     steht in der Kaskade über einer normalen Deklaration. */
  .person { opacity: .2; }
  /* Die Bühne der Startseite ist die Ausnahme — dort ist die Menge nicht
     Beiwerk hinter einem Rahmen, sondern das Bild selbst. Alle Figuren, die
     dort ohnehin ein- und ausgeblendet werden, hängen an Animationen; die
     gehen dieser Rücknahme in der Kaskade vor und bleiben unverändert. */
  .hero__graphics .person { opacity: 1; }
  /* 24 px höher angesetzte Bühne, also auch der Text 24 px höher. */
  .hero__inner { padding-top: calc(126px + 45vw); padding-bottom: var(--s-6); }
  .hero__claim { margin-top: var(--s-8); }
  .hero .badges { margin-top: var(--s-6); gap: var(--s-1); }
  .badge { padding: 10px 16px; font-size: 14px; }
  .page-hero { min-height: 320px; padding-top: 104px; }
  .page-hero .display { font-size: 30px; }
  .page-hero .lead { font-size: 17px; }

  /* Knöpfe: das lange „Jetzt Kontakt aufnehmen" passt sonst nicht */
  .cta { padding: 14px 24px; }
  .cta--blue, .cta--outline, .cta--outline-dark { padding: 14px 24px; }
  .hero__title .cta { padding: 16px 28px; }

  /* ---------- Prinzipien 01/02/03 ---------- */
  /* Die freistehenden Ziffern sind auf 1440 px gesetzt und träfen im
     schmalen Strang nicht mehr ihren Textblock. Statt sie fallen zu lassen,
     bekommt jeder Block seine eigene Ziffer über einen Zähler — dieselbe
     Bildsprache, nur an der richtigen Stelle. */
  .principles__num { display: none; }
  .principles__inner { counter-reset: prinzip; }
  .principle {
    counter-increment: prinzip;
    padding-top: var(--s-6);
    text-align: left;
    justify-items: start;
  }
  .principle::before {
    content: counter(prinzip, decimal-leading-zero);
    position: absolute;
    z-index: 0;
    top: -14px; left: -4px;
    font-size: 84px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .2);
    pointer-events: none;
    user-select: none;
  }
  .principle h3 { font-size: 26px; white-space: normal; }
  .principle p { font-size: var(--fs-body); }
  .principle--1, .principle--2, .principle--3 { margin-top: var(--s-6); }
  .principle--2 h3 { width: auto; text-align: left; }
  .principles__cta { text-align: left; margin-top: var(--s-5); }

  /* ---------- Fußzeile ---------- */
  .site-footer__spalte--loesungen,
  .site-footer__spalte--unternehmen { grid-column: span 6; }
  .site-footer__spalte--kontakt { grid-column: span 12; }
  .site-footer__leiste { flex-direction: column; align-items: flex-start; }
  .site-footer__rechtlich { flex-wrap: wrap; }

  /* ---------- Formulare ---------- */
  /* Auf breiten Schirmen sitzt die Fehlermeldung neben der Feldbezeichnung
     und verschiebt nichts. Dafür ist hier kein Platz — sie rückt unter das
     Feld und darf umbrechen. */
  .field__error {
    position: static;
    max-width: 100%;
    white-space: normal;
    margin-top: 4px;
  }
  .field--consent .field__error { position: static; }
  .panel { padding: var(--s-3); }

  /* ---------- Einzelteile ---------- */
  .statement-band { padding-block: var(--s-6); }
  .statement-band p { font-size: 19px; }
  .type-row h3 { font-size: 30px; }
  .type-row { padding-block: var(--s-3); }
  .ledger__row h3 { font-size: 22px; }
  /* Die Merkmalsspalte trägt Wörter wie „IMPLEMENTIERUNG". Mit den 22 % der
     großen Fassung blieben davon 119 px, und der Umbruchschutz zerlegte sie
     mitten im Wort („DATENSCHUT / Z"). Auf der Rollfläche kostet mehr Breite
     nichts — die Tabelle rollt ohnehin seitlich. */
  .compare table { min-width: 620px; }
  .compare col.compare-col--label { width: 32%; }
  .compare th, .compare td { padding: var(--s-2) var(--s-1); font-size: 14px; }
  .timeline__bar { height: 32px; font-size: 10px; padding-inline: var(--s-1); }
  .accordion { padding: var(--s-2) var(--s-3); }
  .accordion summary { gap: var(--s-2); }
  .ki-chat__verlauf { height: 220px; }
  .chat-bubble { max-width: 92%; padding: 10px 16px; }
  .notfound { padding: var(--s-4); }
  .notfound__code { font-size: 96px; }
  .prose h2 { font-size: 24px; }
  .ortszene { aspect-ratio: 16 / 10; }
  .stars-deco { width: 260px; height: 260px; right: -60px; top: 20px; }
  .pilot-stats { gap: var(--s-4); }
  .img-slot { min-height: 200px; }
  .hardware-visual__geraet img { width: 180px; }
  .doc-toc a { padding: 10px 12px; }

  /* Der Hinweisbalken stapelt: Text oben, Schaltflächen darunter */
  .cookie { grid-template-columns: 1fr; }
  .cookie .cookie__actions { grid-column: 1; grid-row: auto; margin-top: var(--s-1); }
}

/* ==========================================================================
   480 — kleine Telefone
   ========================================================================== */
@media (max-width: 480px) {
  :root {
    --page-margin: 20px;
    --fs-display: 29px;
    --fs-stat: 34px;
  }
  /* Ab hier ist eine Zeile für lange Beschriftungen zu wenig — Knöpfe
     dürfen umbrechen, statt aus dem Bild zu laufen. */
  .cta { white-space: normal; text-align: center; padding: 14px 20px; }
  .badge { white-space: normal; text-align: center; }
  .tile-grid { grid-template-columns: 1fr; }
  .tile { min-height: 104px; }
  .page-hero .display { font-size: 26px; }
  .notfound__code { font-size: 72px; }
  .site-footer__spalte--loesungen,
  .site-footer__spalte--unternehmen { grid-column: span 12; }
  .statement-band .eyebrow::before,
  .statement-band .eyebrow::after { width: 16px; }
  .terminwahl__person { padding: var(--s-2) var(--s-1); margin-inline: calc(var(--s-1) * -1); }
  .ansprechpartner__foto { width: 44px; height: 44px; }
}