/* ==========================================================================
   TRUCKTOWER GmbH — Design System
   Marke: Rot #E31E24 · Navy #081A2A · Montserrat
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, DSGVO-konform — kein Google-CDN)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marken-Farben (aus dem bestehenden Auftritt übernommen) */
  --red: #e31e24;
  --red-deep: #b8151b;
  --red-soft: rgba(227, 30, 36, 0.1);

  --navy: #081a2a;
  --navy-700: #0d2438;
  --navy-600: #123047;
  --navy-line: rgba(255, 255, 255, 0.12);

  /* Bahnenfarbe des Stacks in der Gegenüberstellung — Gegenstück zu --red.
     Bewusst NICHT --navy: der Balken der Stack-Karte sitzt direkt über einer
     Navy-Bildfläche und wäre dort unsichtbar. Dieses Blau liest sich auf Weiß
     wie auf Navy und bleibt trotzdem eindeutig „nicht rot". */
  --stack: #5b87ae;

  --ink: #383838;
  --body: #6f6f6f;
  /* --muted ist dekorativ (Rahmen, Flächen). Für Text ist es mit 2,3:1 zu
     schwach — dafür --muted-ink verwenden. Der Wert ist so gewählt, dass er
     auch auf --surface-alt noch AA erfüllt (4,55:1 dort, 4,88:1 auf Weiß).
     Hilfstext wird deshalb über Größe und Gewicht abgestuft, nicht über
     noch hellere Farbe — die gibt der Untergrund nicht mehr her. */
  --muted: #aaaaaa;
  --muted-ink: #717171;
  --hair: #e6e8ea;
  --surface: #ffffff;
  --surface-alt: #f6f7f8;
  /* Gedecktes Blaugrau für den "Heute"-Zustand im Flächenvergleich. */
  --surface-sunken: #dfe5eb;

  --green: #6bc116;
  --amber: #eda929;

  /* Typo */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);
  --fs-h1: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.875rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Raum */
  --shell: 1280px;
  --shell-narrow: 900px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  /* Form */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 2px 8px rgba(8, 26, 42, 0.06);
  --shadow: 0 12px 32px -8px rgba(8, 26, 42, 0.14);
  --shadow-lg: 0 32px 72px -20px rgba(8, 26, 42, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  /* Abstand nach unten in `em`, nicht in `rem`: er muss mit dem Schriftgrad
     wachsen. Als fester rem-Wert stand unter einer 46-px-Überschrift genauso
     viel Luft wie unter einer 20-px-Überschrift — gemessen 20 px, also 0,43
     Schriftgrade. Das las sich gedrängt. Jetzt sind es rund 0,6 Schriftgrade.
     Im normalen Blockfluss kollabiert der Wert mit einem margin-top des
     Folgeelements, doppelte Abstände entstehen also nicht. */
  margin: 0 0 0.62em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Deutsche Komposita sprengen sonst schmale Bildschirme:
     „Datenschutzerklärung" ist bei 390 px als ein Wort 387 px breit und ließ
     die ganze Seite waagerecht scrollen. `hyphens` trennt sauber (das
     lang="de" am <html> liefert die Trennregeln), `overflow-wrap` ist die
     Rückfallebene, wenn kein Trennpunkt passt.
     `anywhere` statt `break-word`: beide brechen die Zeile gleich, aber nur
     `anywhere` zählt den Bruch auch in die min-content-Breite. Mit
     `break-word` blieb der Grid-Track auf voller Wortbreite stehen und schob
     die Seite ins waagerechte Scrollen — sichtbar nur unter 360 px. */
  hyphens: manual;
  overflow-wrap: anywhere;
}
/* `hyphens: auto` hat auch dort getrennt, wo die Zeile noch gepasst hätte:
   „Wie viele Stellplätze ste-cken in Ihrem Grundstück?" ist zwar korrekt
   getrennt, in einer Überschrift aber ein Lesebruch. Deshalb greift die
   automatische Trennung erst auf schmalen Bildschirmen, wo ein einzelnes
   Kompositum sonst die Spalte sprengt. `overflow-wrap: anywhere` bleibt
   überall die Rückfallebene und deckt breite Bildschirme mit ab. */
@media (max-width: 34rem) {
  h1, h2, h3, h4, h5 { hyphens: auto; }
}
/* Große Überschriften brauchen absolut mehr Luft, relativ aber weniger —
   sonst reißt es die Zeilen auseinander. */
h1, h2 { margin-bottom: 0.52em; }
/* Steht die Überschrift allein, soll unten nichts nachhängen. */
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child { margin-bottom: 0; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Schusterjungen vermeiden: ohne diese Zeile stand in mehreren Karten in der
   letzten Zeile nur noch ein Wortrest von 16 bis 50 px Breite. `pretty` zieht
   dafür ein Wort aus der vorletzten Zeile herunter. Browser ohne Unterstützung
   ignorieren den Wert und brechen wie bisher, es geht also nichts verloren.
   Überschriften bleiben bei `balance` (gleich lange Zeilen), das ist bei
   wenigen Zeilen die bessere Wahl. */
p, li, dd, dt, figcaption, small { text-wrap: pretty; }

/* Rot als Textfarbe: --red erreicht auf --surface-alt nur 4,37:1. Für
   Fließtext-Links deshalb --red-deep (6,2:1 dort, 6,9:1 auf Weiß). --red
   bleibt für Flächen, Rahmen, Icons und große Akzente. */
a { color: var(--red-deep); text-decoration: none; }
a:hover { color: var(--red); }

img, picture, video, svg { max-width: 100%; display: block; }
/* height:auto muss auch für <video> gelten — sonst wird das height-Attribut
   (z. B. 2160) als Pixelhöhe benutzt und das Element steht hochkant. */
img, video { height: auto; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 700; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--red); color: #fff; }

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

.skip-link {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--red); color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 600; font-size: var(--fs-sm);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   4. Layout-Primitiven
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

.section--alt { background: var(--surface-alt); }

.section--dark {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: #fff; }
.section--dark strong { color: #fff; }

/* Grid */
.grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Zweispalter Text + Bild */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .split__media--first { order: -1; }
}

/* Oben bündig statt senkrecht zentriert. `.split` zentriert, weil dort meist
   Text neben einem Bild steht. Auf der Kontaktseite ist die rechte Spalte
   deutlich kürzer als das Formular und rutschte damit in die Mitte, statt auf
   Höhe der Überschrift zu beginnen.
   MUSS nach `.split` stehen: gleiche Spezifität, es entscheidet die
   Reihenfolge im Stylesheet. */
.split--oben { align-items: start; }

.stack > * + * { margin-top: 1.5rem; }
.stack--sm > * + * { margin-top: 0.75rem; }
.stack--lg > * + * { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   5. Typo-Bausteine
   -------------------------------------------------------------------------- */
/* Sektionslabel: senkrechter Akzent statt Querstrich, normale Schreibweise
   statt gesperrter Kapitälchen. Die Senkrechte greift die Grundidee auf —
   nach oben statt in die Breite.
   Soll das Label ganz weg: hier .kicker { display: none } setzen. */
.kicker {
  display: inline-block;
  padding-left: 0.85rem;
  border-left: 3px solid var(--red);
  margin-bottom: 1.15rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.section--dark .kicker,
.band .kicker,
.cta .kicker { color: rgba(255, 255, 255, 0.92); }

.display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.035em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  font-weight: 400;
  color: var(--body);
}
.section--dark .lead { color: rgba(255, 255, 255, 0.78); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.accent { color: var(--red); }
.thin { font-weight: 300; }

/* Hervorgehobenes Wort: durchgehend rot hinterlegt. Ein nur teilweise
   hinterlegter Balken würde die weiße Schrift auf Weiß stehen lassen. */
.mark {
  padding: 0.02em 0.2em;
  background-color: var(--red);
  color: #fff;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Wortmarke: Bus/Truck + TOWER */
.wordmark { font-weight: 800; letter-spacing: -0.02em; }
.wordmark span { font-weight: 300; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(227, 30, 36, 0.6);
}
.btn--primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
  box-shadow: 0 14px 32px -10px rgba(227, 30, 36, 0.7);
}

.btn--ghost {
  background: transparent;
  border-color: var(--hair);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

.btn--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.btn--sm { padding: 0.65rem 1.35rem; font-size: var(--fs-xs); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--red-deep);
}
/* Die Größe muss hier stehen, nicht nur als width/height am <svg>. Ohne
   Angabe rendert ein SVG mit 300x150 px und sprengt auf schmalen Displays
   die Karte. */
.link-arrow svg {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Header / Navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    height 0.3s var(--ease);
}
.header__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header__logo { flex: none; display: block; }
.header__logo img { height: 34px; width: auto; transition: opacity 0.25s var(--ease); }
.header__logo .logo--light { display: block; }
.header__logo .logo--dark { display: none; }

/* Transparent über dunklem Hero */
.header:not(.is-stuck) { background: transparent; }
.header:not(.is-stuck) .nav__link { color: rgba(255, 255, 255, 0.85); }
.header:not(.is-stuck) .nav__link:hover,
.header:not(.is-stuck) .nav__link[aria-current='page'] { color: #fff; }
.header:not(.is-stuck) .nav-toggle span { background: #fff; }

.header.is-stuck {
  height: 66px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--hair), 0 8px 28px -18px rgba(8, 26, 42, 0.4);
}
.header.is-stuck .header__logo .logo--light { display: none; }
.header.is-stuck .header__logo .logo--dark { display: block; }

/* Seiten mit hellem Kopf: Header immer im Light-Mode */
.header--solid,
.header--solid:not(.is-stuck) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--hair);
}
.header--solid .header__logo .logo--light { display: none; }
.header--solid .header__logo .logo--dark { display: block; }
.header--solid:not(.is-stuck) .nav__link { color: var(--ink); }
.header--solid:not(.is-stuck) .nav-toggle span { background: var(--ink); }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { margin: 0; }
.nav__link {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0.4rem 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover { color: var(--red); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* Hier stand ein Untermenü „Varianten" mit den vier Produktseiten. Seit
   TruckTower/BusTower in tower.html und TruckStack/BusStack in stack.html
   aufgegangen sind, ist die Navigation flach: vier Links, kein Panel, keine
   Hover-Falle auf dem Desktop. Die Fahrzeugwahl steht auf der Seite selbst
   (siehe .fleet). */

/* „Kontakt" ist der einzige Knopf im Kopf. Vorher standen dort zwei, die beide
   auf `kontakt.html` führten: der Navigationspunkt und ein separater
   „Infogespräch"-Button. Der zweite ist raus, der Navigationspunkt ist jetzt
   der Knopf — ein Ziel, eine Schaltfläche. */
.nav__knopf { display: flex; align-items: center; margin-left: 0.4rem; }
.nav__knopf .btn { white-space: nowrap; }

/* Sprachumschalter. Zwei Kürzel in einer Pille, die aktive Sprache ist gefüllt.
   Kein <select>: bei genau zwei Sprachen ist ein Klick weniger Arbeit als ein
   Aufklappen, und der Zielverweis bleibt ein echter Link. */
.nav__sprache { display: flex; align-items: center; margin-left: 0.9rem; }
.sprachwahl {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--hair);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
.sprachwahl > * { padding: 0.45rem 0.6rem; }
.sprachwahl__an { background: var(--navy); color: #fff; }
.sprachwahl__aus { color: var(--muted-ink); }
.sprachwahl__aus:hover { background: var(--surface-alt); color: var(--ink); }
/* Über dem Hero ist der Kopf durchsichtig und liegt auf Navy. Dort braucht die
   Pille helle Kanten, sonst verschwindet sie. */
.header:not(.is-stuck) .sprachwahl { border-color: rgba(255, 255, 255, 0.35); }
.header:not(.is-stuck) .sprachwahl__an { background: #fff; color: var(--navy); }
.header:not(.is-stuck) .sprachwahl__aus { color: rgba(255, 255, 255, 0.8); }
.header:not(.is-stuck) .sprachwahl__aus:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1149px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    background: #fff;
    border-top: 1px solid var(--hair);
    box-shadow: var(--shadow-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
  }
  .nav.is-open { max-height: min(80vh, 560px); overflow-y: auto; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .nav__list li { border-bottom: 1px solid var(--hair); }
  .nav__list li:last-child { border-bottom: 0; }
  .header:not(.is-stuck) .nav__link { color: var(--ink); }
  .nav__link { padding: 1rem 0; font-size: 1.0625rem; }
  .nav__link::after { display: none; }
  /* Im aufgeklappten Menü steht der Knopf über die volle Breite unten. */
  .nav__knopf { display: block; margin-left: 0; padding-top: 1.25rem; }
  .nav__knopf .btn { width: 100%; }
  /* Das aufgeklappte Menü liegt auf Weiß, auch wenn der Kopf über dem Hero
     durchsichtig ist. Deshalb hier zurück auf die dunkle Variante. */
  .nav__sprache { margin-left: 0; padding: 0.9rem 0; }
  .header:not(.is-stuck) .sprachwahl { border-color: var(--hair); }
  .header:not(.is-stuck) .sprachwahl__an { background: var(--navy); color: #fff; }
  .header:not(.is-stuck) .sprachwahl__aus { color: var(--muted-ink); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 1040px);
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero--compact {
  min-height: min(62svh, 620px);
  align-items: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* Zwei Verläufe: senkrecht für die Kennzahlenleiste unten, diagonal für die
   linke Textspalte. Die Diagonale trägt die Hauptlast, damit die rechte
   Bildhälfte — dort stehen die Fahrzeuge — sichtbar bleibt. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 26, 42, 0.96) 0%, rgba(8, 26, 42, 0.72) 38%, rgba(8, 26, 42, 0.26) 70%, rgba(8, 26, 42, 0.5) 100%),
    linear-gradient(105deg, rgba(8, 26, 42, 0.93) 0%, rgba(8, 26, 42, 0.6) 38%, rgba(8, 26, 42, 0.12) 72%);
}
/* Auf schmalen Schirmen trägt die Diagonale nicht mehr — der Text läuft dann
   über die ganze Breite. Dort gleichmäßig senkrecht abdunkeln. */
@media (max-width: 860px) {
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(8, 26, 42, 0.96) 0%, rgba(8, 26, 42, 0.82) 48%, rgba(8, 26, 42, 0.62) 100%);
  }
}

.hero__body { max-width: 54rem; position: relative; }
.hero .kicker { color: rgba(255, 255, 255, 0.92); }
.hero h1 { color: #fff; }
/* Selbstbewusst: größer, enger gesetzt, kompakte Zeilen. */
.hero__title {
  font-size: clamp(2.75rem, 1.2rem + 6.2vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}
.hero__lead {
  max-width: 42rem;
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.hero .btn-row { margin-top: 2.25rem; }

/* Kennzahlen-Leiste unter dem Hero */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
  border-radius: var(--r);
  overflow: hidden;
}
.hero__stat {
  padding: 1.4rem 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}
.hero__stat dt {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.62);
}
.hero__stat dd {
  margin: 0 0 0.3rem;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.hero__stat dd .unit { font-size: 0.62em; font-weight: 700; }

/* Der „Scrollen"-Hinweis am unteren Bildrand ist entfallen — samt seiner
   Animation `scrollHint`. Er stand unter dem Titelbild und sagte nichts, was
   die Seite nicht schon durch ihre Länge sagt. */

/* Hero auf kleinen Schirmen kompakter */
@media (max-width: 640px) {
  .hero { min-height: min(88svh, 760px); }
  .hero__stat { padding: 1rem 1.05rem; }
}

/* Kompakter Seitenkopf (Unterseiten) */
.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  isolation: isolate;
}
.pagehead h1 { color: #fff; }
.pagehead .kicker { color: rgba(255, 255, 255, 0.92); }
.pagehead__body { max-width: 48rem; }

/* Systemseiten: kein Foto im Kopf, sondern die Konstruktionszeichnung rechts
   neben dem Titel. Kein Scrim, keine Überlagerung — Navy als reine Fläche,
   damit die weißen Linien den Grund haben, den sie brauchen. */
.pagehead--split .pagehead__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .pagehead--split .pagehead__grid { grid-template-columns: 1fr 1fr; }
}
.pagehead--split .pagehead__body { max-width: 32rem; }

/* Freigestelltes Fahrzeug im Seitenkopf, direkt auf dem Navy. Die vom
   Kunden gelieferten Freisteller sind schattenfrei — der Schlagschatten
   kommt per CSS und folgt dank drop-shadow der Fahrzeugkontur, nicht dem
   rechteckigen Bildkasten. Hier stand einmal eine weiße „Bühne" als
   Behelf gegen den eingebackenen Kontaktschatten der ersten Freisteller;
   die ist mit den sauberen Originalen überflüssig. */
.pagehead__fahrzeug { margin: 0; padding-block: clamp(0.5rem, 1vw, 1.5rem); }
.pagehead__fahrzeug img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.45));
}
/* Ab zwei Spalten fährt das Fahrzeug groß aus der Spalte heraus und wird am
   rechten Seitenrand angeschnitten — es „schaut in die Seite hinein". Den
   Schnitt macht `overflow: hidden` auf `.pagehead`; das steht dort ohnehin.
   Gilt nur für das Fahrzeug: die Weltkugel im Kopf der Visionsseite nutzt
   dieselbe Spalte und muss vollständig sichtbar bleiben. */
@media (min-width: 60rem) {
  .pagehead--split .pagehead__fahrzeug {
    margin-right: calc(-1 * var(--gutter) - 3vw);
    align-self: center;
  }
  .pagehead--split .pagehead__fahrzeug img { width: 132%; max-width: none; }
}

/* ------------------------------------------------- Seitenkopf am Telefon
   Auf einem schmalen Bildschirm füllte der Kopf mehr als eine ganze Anzeige,
   und unter dem Titel stand nichts als Navy. Gemessen bei 390 px Breite:

       lkw.html     1283 px Kopf     Fahrzeug 340 + Kennzahlen 253 einspaltig
       busse.html   1203 px          Fahrzeug 271
       vision.html  1225 px          Weltkugel 525
       news         502 px, downloads 568, kontakt 489    (in Ordnung)

   Sichtbar sind auf einem Telefon rund 730 px. Der erste Inhaltsabschnitt
   begann also weit unterhalb, und wer die Seite öffnete, sah eine leere
   Fläche. Drei Stellschrauben, alle nur unterhalb der Zweispaltigkeit. */
@media (max-width: 59.99rem) {
  /* Das freigestellte Fahrzeug ist ab 60rem der Blickfang neben dem Titel und
     ragt dort über den Seitenrand hinaus. Darunter stapelt es sich unter den
     Text und kostet 271 bis 340 px, die überwiegend Luft und Schlagschatten
     zeigen. Auf dem Telefon zählt der Text. */
  .pagehead--split .pagehead__fahrzeug { display: none; }

  /* Die Weltkugel bleibt: sie ist das Kennzeichen der Visionsseite. Aber sie
     braucht dort keine 525 px. Halbiert ergibt das rund 240 px, und die
     Beschriftung darunter bleibt lesbar. */
  .pagehead--split .globus__canvas { max-width: 15rem; }

  /* Oben bleiben die 72 px für den festen Seitenkopf stehen, darunter reicht
     auf dem Telefon die Hälfte des bisherigen Polsters. */
  .pagehead {
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  }
}

/* Kennzahlen direkt unter dem Seitentitel — drei Zahlen, die den Nutzen
   beziffern, bevor irgendein Fließtext kommt. */
/* Drei Spalten, kein Umbruch: die Zahlen sollen als Reihe gelesen werden.
   Als Flexbox mit wrap rutschte die dritte Zahl in eine zweite Zeile, sobald
   die Labels breiter wurden. Erst unter 34 rem wird einspaltig gestapelt —
   drei Spalten passen auf einem Telefon nicht. */
.kopf-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  margin: clamp(1.9rem, 1.5rem + 1.5vw, 2.75rem) 0 0;
}
/* Unter 34 rem zwei Spalten statt einer. Untereinander kosteten drei Zahlen
   253 px, nebeneinander sind es rund 130. Die dritte Zahl steht dann allein in
   der zweiten Zeile; das ist der Preis dafür, dass darunter noch Inhalt in den
   sichtbaren Bereich passt. */
@media (max-width: 33.99rem) {
  .kopf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopf-stats dt { max-width: none; }
}
@media (min-width: 34rem) {
  .kopf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kopf-stats div { display: grid; gap: 0.2rem; align-content: start; }
.kopf-stats dd {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.kopf-stats dt {
  max-width: 17ch;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}

.pagehead__wire { margin: 0; }
.pagehead__wire img { display: block; width: 100%; height: auto; }
.pagehead__wire figcaption {
  margin-top: 0.85rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted-ink);
}

.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Der obere Bereich muss kräftig abgedunkelt bleiben: dort liegt der
   transparente Header mit weißer Navigation über dem Bild. */
.pagehead__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(8,26,42,0.75) 0, rgba(8,26,42,0) var(--header-h)),
    linear-gradient(to right, rgba(8,26,42,0.95) 0%, rgba(8,26,42,0.8) 50%, rgba(8,26,42,0.55) 100%),
    linear-gradient(to top, rgba(8,26,42,0.9), rgba(8,26,42,0.45));
}

/* Brotkrumen */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: '/'; color: rgba(255, 255, 255, 0.3); }
.crumbs a { color: rgba(255, 255, 255, 0.72); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   9. Karten
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
/* In `em`, damit der Abstand mit dem Schriftgrad wächst — als feste 0,7rem
   blieben unter einer 28-px-Kartenüberschrift nur 11 px Luft. */
.card h3, .card h4 { margin-bottom: 0.62em; }
.card p { font-size: var(--fs-sm); }

.card--dark {
  background: var(--navy-700);
  border-color: var(--navy-line);
  color: rgba(255, 255, 255, 0.72);
}
.card--dark h3, .card--dark h4 { color: #fff; }
.card--dark:hover { border-color: rgba(255, 255, 255, 0.28); }

.card--flat { background: var(--surface-alt); border-color: transparent; }

/* Karte als Link — erbt Textfarben, statt alles rot zu färben. */
a.card { text-decoration: none; color: var(--body); }
a.card h3, a.card h4 { color: var(--ink); }
a.card:hover { color: var(--body); }
a.card:hover h3, a.card:hover h4 { color: var(--red); }
a.card .link-arrow { margin-top: auto; padding-top: 1rem; }

/* Karte mit Bild darüber */
.card--media { padding: 0; overflow: hidden; }
.card--media > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-alt);
}
.card--media .card__body {
  padding: clamp(1.35rem, 1.05rem + 1vw, 1.9rem);
}
.card--media .card__body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Fahrzeugtypen
   Die Silhouetten sind reinweiße PNGs mit Alphakanal. Als Maske eingesetzt
   lassen sie sich einfärben — als <img> wären sie auf hellem Grund unsichtbar.
   -------------------------------------------------------------------------- */
/* Die Silhouetten sind reinweiße PNGs. Statt sie per CSS-Maske einzufärben
   (das scheitert in Chrome über file:// an der Origin-Prüfung und lässt die
   Kacheln leer), stehen sie unverändert als <img> auf dunklen Kacheln. */
.vehicles {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(50% - 1px, 210px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--navy-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.vehicles li {
  margin: 0;
  padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem) 1rem;
  background: var(--navy);
  text-align: center;
  transition: background-color 0.25s var(--ease);
}
.vehicles li:hover { background: var(--navy-600); }

/* Feste Vierer-Zeilen statt auto-fit: die Reihenfolge trägt eine Aussage
   (schwere Züge, dann Solofahrzeuge, dann Busse) und darf nicht je nach
   Fensterbreite anders umbrechen. Unter 62 rem wird auf zwei Spalten
   umgestellt — dort ist die Gruppierung ohnehin nicht mehr ablesbar. */
/* `minmax(0, 1fr)`, nicht `1fr`: ein blankes `1fr` ist `minmax(auto, 1fr)`, und
   das `auto` ist die min-content-Breite. Bei 320 px waren die zwei Spalten
   zusammen 318 px breit in einem 265-px-Kasten — die Kacheln wurden vom
   `overflow: hidden` abgeschnitten, ohne dass die Seite scrollte. Die Null
   erlaubt den Spalten, unter ihren Inhalt zu schrumpfen. */
.vehicles--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 62rem) {
  /* Zwölf Kacheln gehen in drei Viererzeilen ohne Rest auf. Bei elf blieb ein
     Loch in der letzten Reihe, und das Loch zeigt die Trennlinienfarbe des
     Rasters — es sah aus wie ein Fehler. Der frühere Spalten-Überlauf
     (`.vehicles__weit`) ist damit hinfällig. */
  .vehicles--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.vehicle {
  display: block;
  width: auto;
  /* Deckel bei 200 px: die Silhouetten sind schmale PNGs (der Auflieger nur
     306 px breit). In den jetzt breiteren Vierer-Kacheln würde er auf 270 px
     hochgerechnet und damit auf jedem Retina-Display weich. */
  max-width: min(100%, 200px);
  height: 46px;
  margin: 0 auto 0.85rem;
  object-fit: contain;
}
/* Der behelfsweise gezeichnete Inline-SVG für „Autonome Fahrzeuge" ist
   entfallen — dort steht jetzt die echte Silhouette aus `Fahrzeuge2.svg`. */
.vehicles b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.vehicles small {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
}

/* Zwei Bilder nebeneinander, gleiches Format */
.pair {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair .figure img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Nummerierte Karte */
/* Gleiche Sprache wie .kicker — senkrechter Akzent, keine gesperrten Kapitälchen. */
.card__num {
  display: inline-block;
  padding-left: 0.85rem;
  border-left: 3px solid var(--red);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--red-deep);
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------------------
   10. Flächen-Vergleich (Kernvorteil)
   -------------------------------------------------------------------------- */
.compare {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; } }

.compare__panel {
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  background: #fff;
}
/* Beide Panels tragen Farbe: links der Ist-Zustand in gedecktem Blaugrau,
   rechts der Tower in Navy. Auf --surface-alt wäre links sonst unsichtbar. */
/* Auf #DFE5EB reicht --body (#6F6F6F) mit 3,96:1 nicht. Blaugraue,
   dunklere Schrift passt zur Fläche und erreicht 5,4:1. */
.compare__panel--now {
  background: var(--surface-sunken);
  border-color: transparent;
  color: #4f5c68;
}
.compare__panel--now .compare__note { color: #566270; }  /* 4,9:1 */
.compare__panel--tower {
  background: var(--navy);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}

.compare__tag {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.compare__panel--now .compare__tag { background: #fff; color: var(--body); border: 1px solid rgba(8, 26, 42, 0.12); }
/* Rahmen in der Farbe der Fläche, nicht `border: 0`: sonst ist die rote Kachel
   2 px flacher als die weiße, und der ganze Stapel darunter sitzt 2 px höher
   als die Ebene links. Beim Vergleich zweier Raster fällt genau das auf. */
.compare__panel--tower .compare__tag { background: var(--red); color: #fff; border: 1px solid var(--red); }

/* Stellplatz-Raster als visuelle Metapher */
.plots {
  display: grid;
  gap: 4px;
  margin-bottom: 1.35rem;
  padding: 0.75rem;
  border-radius: var(--r-sm);
  background: rgba(8, 26, 42, 0.05);
}
.compare__panel--tower .plots { background: rgba(255, 255, 255, 0.06); }
.plots--flat { grid-template-columns: repeat(6, 1fr); }
.plots--stack { grid-template-columns: repeat(6, 1fr); }
.plot {
  /* Quadratisch, und darin eine FRONTansicht. Vorher lagen hier 16:7-Streifen
     mit Seitenansichten — ein Stellplatz von oben ist aber kein Streifen, und
     die Front zeigt, dass Fahrzeuge nebeneinander stehen, nicht hintereinander. */
  aspect-ratio: 1;
  border-radius: 2px;
  /* `background-color`, nicht die Kurzform: die Kurzform setzt
     `background-image` auf `none` zurück und würde die Fahrzeugsilhouette
     unten wieder löschen. */
  background-color: var(--muted);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62% auto;
  opacity: 0.45;
}
.plot--used { background-color: var(--red); opacity: 1; }
/* Platzhalter über der belegten Ebene. `visibility: hidden` statt `display:
   none`: die Zelle muss im Raster stehen bleiben, sonst rutscht die Reihe nach
   oben und die Ausrichtung auf die Grundebene rechts ist wieder hin. Kein
   `opacity: 0` daneben nötig, die Zelle bekommt schon keine Farbe. */
.plot--luft { visibility: hidden; }
.compare__panel--tower .plot { background-color: rgba(255, 255, 255, 0.2); opacity: 1; }
.compare__panel--tower .plot--used { background-color: var(--red); }
/* Die Silhouetten sind weiß und stehen deshalb sauber auf dem roten Feld. */
.plot--lkw { background-image: url(../img/icon/vehicle-lkwfront.svg); }
.plot--bus { background-image: url(../img/icon/vehicle-busfront.svg); }

.compare__note {
  font-size: var(--fs-xs);
  color: var(--muted-ink);
  letter-spacing: 0.02em;
}
.compare__panel--tower .compare__note { color: rgba(255, 255, 255, 0.5); }

/* --------------------------------------------------------------------------
   11. Kennzahlen (Fakten-Raster)
   -------------------------------------------------------------------------- */
.facts {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.fact { padding-top: 1.35rem; border-top: 3px solid var(--red); }
.fact__value {
  display: block;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.65rem;
}
.section--dark .fact__value { color: #fff; }
.fact__value .unit { font-size: 0.5em; font-weight: 700; letter-spacing: -0.01em; }
.fact__label { font-size: var(--fs-sm); line-height: 1.5; }
.fact__src { display: block; margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--muted-ink); }

/* --------------------------------------------------------------------------
   12. Unterschied Tower / Stack — die sechs Überpunkte
   Dieselben sechs Zeilen erscheinen auf der Startseite und auf beiden
   Systemseiten. Auf einer Systemseite wird die eigene Spalte hervorgehoben,
   die andere bleibt lesbar — der Unterschied ist die Botschaft, nicht die
   eigene Spalte allein.
   -------------------------------------------------------------------------- */
/* Gruppentitel über einem Tabellenblock („Wofür die Bauform gebaut ist",
   „Was sie Ihnen bringt"). Gliedert die Gegenüberstellung, ohne eine zweite
   Tabellenkomponente zu brauchen. */
.diff__gruppe {
  margin: clamp(2.25rem, 1.8rem + 2vw, 3.25rem) 0 0.9rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.diff__gruppe:first-child { margin-top: 0; }

/* Eine eigene Kopfzeile über der Tabelle gab es zwischenzeitlich. Sie ist raus:
   auf beiden Fahrzeugseiten stehen die Optionskarten darüber, auf der
   Startseite die zwei Systemkarten — beide tragen die Namen und liegen bündig
   über ihrer Spalte. Eine zusätzliche Zeile hätte dasselbe zweimal gesagt. */

/* Tower/Stack-Vergleich über der Gegenüberstellung.
   Dasselbe Spaltenraster wie `.diff__row` darunter: leere Schlüsselspalte
   (dort steht der Umschalter), dann die zwei Karten — jede genau über ihrer
   Tabellenspalte. Vorher lag der Block als breiter Navy-Kasten quer darüber
   und hatte mit der Tabelle sichtbar nichts zu tun. */
/* EINE Lückenbreite für beide Raster. Karten und Tabellenzellen stehen sonst
   nicht bündig übereinander — und genau das ist der Punkt des Bausteins. */
.systembild, .diff__row { --vgl-lueck: clamp(1rem, 0.5rem + 1.4vw, 1.75rem); }
.systembild {
  display: grid;
  gap: var(--vgl-lueck);
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
}
@media (min-width: 860px) {
  .systembild { grid-template-columns: 13rem 1fr 1fr; align-items: start; }
}

.systembild__wahl {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 0.5rem;
}
@media (min-width: 860px) { .systembild__wahl { padding-top: 0.35rem; } }
.systembild__wahl-titel {
  flex: 1 0 100%;
  margin-bottom: 0.15rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.systembild__knopf {
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.systembild__knopf:hover { border-color: var(--red); color: var(--red-deep); }
.systembild__knopf.is-an { background: var(--red); border-color: var(--red); color: #fff; }

/* Die Karte ist gebaut wie `.option` auf den Fahrzeugseiten — Bild und Text
   in EINEM Kasten. Vorher stand die Bildunterschrift unter einer freien Bühne
   und wirkte losgelöst. Der farbige Balken oben setzt sich unten als linker
   Strich an den Tabellenzellen fort. */
.systemseite {
  overflow: hidden;
  border: 1px solid var(--hair);
  border-top: 4px solid var(--hair);
  border-radius: var(--r-lg);
  background: #fff;
}
.section--alt .systemseite { border-color: transparent; }
.systemseite--tower, .section--alt .systemseite--tower { border-top-color: var(--red); }
.systemseite--stack, .section--alt .systemseite--stack { border-top-color: var(--stack); }

/* Gleich große Bühnen — das war die Vorgabe. Beide Kästen haben dasselbe
   Seitenverhältnis; `contain` schneidet nichts ab. Die Zeichnungen liegen im
   Hochformat, die Visualisierungen im Querformat (0,73 bis 1,78); ein festes
   Verhältnis ist der einzige Weg, beide Seiten gleich groß zu halten, ohne
   Inhalt zu beschneiden.
   Nur diese Fläche ist navy: Konstruktionszeichnungen brauchen dunklen Grund,
   die Karte selbst soll weiß sein wie ihr Gegenstück auf lkw.html. */
.systemseite__buehne {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  overflow: hidden;
}
.systemseite__buehne img {
  position: absolute;
  inset: 5%;
  width: 90%;
  height: 90%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.systemseite__buehne img.is-an { opacity: 1; }
/* Ohne JavaScript liegen sonst alle Bilder unsichtbar übereinander. */
html:not(.js) .systemseite__buehne img { opacity: 1; }
html:not(.js) .systemseite__buehne img + img { display: none; }
html:not(.js) .systembild__wahl { display: none; }

.systemseite__body { padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.systemseite__body h3 { font-size: var(--fs-h4); }
.systemseite__body p { margin: 0; font-size: var(--fs-sm); }

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

.diff { border-top: 1px solid var(--hair); }
/* Die Abstände liegen hier doppelt: Zeilenpolster plus Zellenpolster. Mit
   1,5–2,25 rem oben und unten kam eine Zeile auf 188 px, fünf Zeilen auf
   940 px — für je zwei kurze Sätze. Halbiert. */
.diff__row {
  display: grid;
  gap: 0.65rem;
  padding-block: clamp(0.9rem, 0.75rem + 0.5vw, 1.3rem);
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
@media (min-width: 860px) {
  /* Muss Spalte für Spalte zu `.optionen` passen — dort steht dieselbe
     Definition, mit einer leeren ersten Spalte über ::before. */
  .diff__row { grid-template-columns: 13rem 1fr 1fr; gap: var(--vgl-lueck); }
}
.diff__key {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.diff__nr {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--red-deep);
}
.diff__cell {
  padding: 0.8rem 1rem;
  border-radius: var(--r);
  background: var(--surface-alt);
  border: 1px solid transparent;
  /* Der Farbstrich setzt den Balken der Karte darüber fort — so liest sich die
     Tabelle als zwei durchgehende Bahnen statt als Feld gleicher Kästchen. */
  border-left: 3px solid var(--hair);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.diff__row .diff__cell:nth-of-type(1) { border-left-color: var(--red); }
.diff__row .diff__cell:nth-of-type(2) { border-left-color: var(--stack); }
.diff__cell p { margin: 0; font-size: var(--fs-sm); }
.diff__label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
/* MUSS NACH der Basisregel stehen. Stand zuerst weiter oben im 860-px-Block
   und wurde von `display: block` überschrieben — gleiche Spezifität, die
   spätere Regel gewinnt. Sichtbar war das nur über getComputedStyle. */
@media (min-width: 860px) {
  /* Ab hier stehen die Karten als Spaltenköpfe darüber und die Zellen liegen
     bündig darunter. Den Namen in jeder Zeile zu wiederholen wäre elfmal
     dasselbe Wort. Schmaler stapeln die Zellen — dort ist die Beschriftung die
     einzige Zuordnung und bleibt. */
  .diff__label { display: none; }
}
/* Hervorgehobene Spalte auf der jeweiligen Systemseite */
.diff__cell--on {
  background: var(--navy);
  border-color: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}
.diff__cell--on .diff__label { color: #fff; }

/* Auf --surface-alt braucht die neutrale Zelle einen eigenen Ton, sonst
   verschwindet sie im Abschnittshintergrund. */
/* `border-color` (die Kurzform) hat hier den farbigen Bahnenstrich links
   mitgesetzt: auf der Startseite lag die Gegenüberstellung in einem
   `section--alt`, und beide Spalten wurden grau statt rot/navy. Nur die drei
   übrigen Kanten setzen — die linke gehört der Bahnenfarbe. */
.section--alt .diff__cell:not(.diff__cell--on) {
  background: #fff;
  border-top-color: var(--hair);
  border-right-color: var(--hair);
  border-bottom-color: var(--hair);
}

/* --------------------------------------------------------------------------
   12b. Technische Zeichnungen (Blaupausen)
   Die Zeichnungen sind weiße bzw. hellgraue Linien auf transparentem Grund.
   Auf hellem Untergrund sind sie unsichtbar, zwischen Fotos wirken sie wie
   ein Fehler. Sie stehen deshalb nur in .section--dark und bekommen hier
   bewusst KEINEN weißen Rahmen und keinen Kartenhintergrund.
   -------------------------------------------------------------------------- */
.blueprints {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.blueprint { margin: 0; }
.blueprint img {
  width: 100%;
  height: auto;
  /* Leichter Rahmen aus dem Navy-Ton, damit die Zeichnung eine Fläche hat,
     ohne dass ein Kasten um die transparenten Ränder sichtbar wird. */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--navy-line);
  border-radius: var(--r);
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}
.blueprint figcaption {
  margin-top: 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   12c. Vorteilskarten
   Bewusst ohne Bilder: die Vorteile sind Text, jedes Bild dazu wäre
   Dekoration. Ruhige Kacheln, die beim Überfahren anspringen.
   -------------------------------------------------------------------------- */
.benefits {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.benefit {
  margin: 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  transition: border-color 0.28s var(--ease), transform 0.28s var(--ease),
              box-shadow 0.28s var(--ease);
}
.benefit:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.benefit__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: var(--r);
  background: var(--red-soft);
  color: var(--red-deep);
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease);
}
.benefit__icon svg { width: 26px; height: 26px; }
.benefit:hover .benefit__icon { background: var(--red); color: #fff; }
.benefit h3 { font-size: var(--fs-h4); margin-bottom: 0.62em; }
.benefit p { margin: 0; font-size: var(--fs-sm); }
/* Auf abgesetzten Flächen braucht die Kachel Weiß, sonst verschwindet sie. */
.section--alt .benefit { background: #fff; }

/* --------------------------------------------------------------------------
   12d. Die zwei Bauformen — Kurzeinordnung über der Vergleichstabelle
   Hier stand ein `.kit`-Datenblatt mit fünf Kennwerten je Karte. Die
   Kennwerte stehen jetzt in der Gegenüberstellung darunter (`.diff`), wo sie
   Spalte an Spalte lesbar sind. In den Karten blieben sie zweimal gepflegt
   und wären auseinandergelaufen.
   -------------------------------------------------------------------------- */
/* Die früheren `.option`-Karten sind entfallen. Auf allen drei Seiten steht
   jetzt derselbe Baustein `.systembild` / `.systemseite` — mit umschaltbarer
   Zeichnung/Visualisierung statt eines festen Fotos. Die Spaltendefinition
   `--vgl-lueck` ist zu `.systembild` gewandert. */

/* --------------------------------------------------------------------------
   12d1. Freisteller — Fahrzeuge ohne Hintergrund, offenes Design
   Kein Rahmen, keine Kachel: die Fahrzeuge stehen frei auf der Seite. Die
   Freisteller kommen schattenfrei vom Kunden und funktionieren auf jedem
   Grund; den Bodenschatten liefert drop-shadow entlang der Kontur.
   -------------------------------------------------------------------------- */
.freisteller {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}
.freisteller img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: clamp(96px, 6vw + 52px, 150px);
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 14px 14px rgba(8, 26, 42, 0.18));
}

/* --------------------------------------------------------------------------
   12d2. Claim — eine Aussage, die stehen bleiben soll
   -------------------------------------------------------------------------- */
.claim {
  margin: 0 0 clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  padding: clamp(1.2rem, 1rem + 1vw, 1.75rem) clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-alt);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.section--alt .claim { background: #fff; }

/* --------------------------------------------------------------------------
   12e. Problem und Antwort (Produktseiten)
   Links das Problem, darunter unsere Antwort — abgesetzt durch den roten
   Balken, damit man beim Überfliegen die Antworten findet.
   -------------------------------------------------------------------------- */
.problems {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.problem {
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  background: var(--surface-alt);
  border-radius: var(--r-lg);
}
.problem h3 { font-size: var(--fs-h4); margin-bottom: 0.62em; }
.problem__ist { font-size: var(--fs-sm); }
.problem__wir {
  margin: 1rem 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--red);
  font-size: var(--fs-sm);
}
.problem__wir b { display: block; color: var(--red-deep); }
.section--alt .problem { background: #fff; }

/* --------------------------------------------------------------------------
   12f. Sprungkarten (Querverweise zwischen Produkten)
   Dieser Block steht auf sechs Seiten. Mit Bildern tauchten dort überall
   dieselben vier Renderings auf — deshalb reiner Text mit Pfeil.
   -------------------------------------------------------------------------- */
.jumps {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.jump {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  color: var(--body);
  transition: border-color 0.28s var(--ease), transform 0.28s var(--ease),
              box-shadow 0.28s var(--ease);
}
.jump:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  color: var(--body);
}
.jump__tag {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.jump__name {
  margin-top: 0.5rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.jump__text { margin-top: 0.6rem; font-size: var(--fs-sm); }
.jump .link-arrow { margin-top: auto; padding-top: 1.25rem; }
.section--alt .jump { background: #fff; }

/* --------------------------------------------------------------------------
   12g. Fahrzeugwelten (Startseite)
   Zwei ruhige Kacheln: Bild, Name, eine Zeile Aufzählung, zwei Produktlinks.
   Bewusst ohne Absatztext und ohne Buttons — darunter folgen ohnehin die
   zehn Fahrzeugtypen im Detail.
   -------------------------------------------------------------------------- */
.worlds {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  /* Zwei Karten, mittig unter der Überschrift — ohne Deckel liefen sie über
     die ganze Shell-Breite und standen weiter auseinander als der Fließtext
     darüber. */
  max-width: 60rem;
  margin-inline: auto;
}
.world {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
  /* KEIN overflow:hidden. Das Fahrzeug muss beim Überfahren links aus der
     Karte herauswachsen können — clippt die Karte, passiert nichts Sichtbares. */
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.world:hover { border-color: var(--red); box-shadow: var(--shadow); }

/* Bühne für das eine Fahrzeug. Die Höhe kommt aus dem Seitenverhältnis, nicht
   aus einem festen Wert: beide Fahrzeuge stehen auf 84 % Kartenbreite, und der
   Sattelzug (1200×844) braucht dafür 0,59 × Kartenbreite an Höhe. Eine feste
   Höhe stand hier schon einmal — der Sattelzug ragte 92 px unten heraus und
   legte sich über die Überschrift. Der Solobus (1200×648) ist flacher und
   bekommt entsprechend mehr Luft; gleiche Breite liest sich als „gleich groß",
   gleiche Höhe würde den Bus doppelt so lang erscheinen lassen. */
.world__buehne {
  display: grid;
  /* Unten ausgerichtet, nicht mittig: beide Fahrzeuge stehen damit auf
     derselben Linie und haben denselben Abstand zur Überschrift. Mittig
     zentriert lag der flachere Bus 32 px höher als der Sattelzug — der
     Unterschied fiel genau dort auf, wo man ihn vergleichen kann. */
  place-items: end center;
  aspect-ratio: 100 / 64;
}
.world__buehne img {
  width: 84%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 16px rgba(8, 26, 42, 0.18));
}

/* Erst ab Tablet-Breite: auf dem Handy ist die Karte so schmal, dass der
   Überstand die Seite waagerecht schöbe.

   BEWUSST OHNE `(hover: hover)`. Die Abfrage stand hier und ist raus: Geräte
   mit Touchscreen melden `hover: none`, auch wenn eine Maus angeschlossen ist —
   der Browser führt dort den Finger als primäres Eingabegerät. Am Globus hat
   genau diese Abfrage den Zoom komplett abgeschaltet. Die Breitengrenze
   erledigt den eigentlichen Zweck bereits: bei 768 px endet das vergrößerte
   Fahrzeug gemessen 10 px innerhalb des Fensters, die Seite scrollt nicht. */
@media (min-width: 48rem) {
  .world__buehne img {
    /* Wachstumspunkt ist die Standlinie, nicht die Bildmitte. Aus der Mitte
       heraus wuchs das Fahrzeug auch nach UNTEN und schob sich bei 1024 px in
       die Überschrift; bei 1280 px fehlten 0,1 px zum selben Fehler. Von unten
       heraus bleibt die Standlinie stehen, und der Zuwachs geht nach oben und
       zur Seite — dorthin, wo nichts steht. */
    transform-origin: center bottom;
    transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
  }
  /* scale wirkt zuerst, translateX danach und unskaliert: aus 84 % Breite
     werden 99 %, der Versatz schiebt die linke Kante rund 7 % der
     Kartenbreite über den Rand hinaus. */
  .world:hover .world__buehne img {
    transform: translateX(-9%) scale(1.18);
    filter: drop-shadow(0 26px 26px rgba(8, 26, 42, 0.26));
  }
}
@media (prefers-reduced-motion: reduce) {
  .world__buehne img, .world:hover .world__buehne img { transition: none; transform: none; }
}

.world__body { padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); }
.world__body h3 { margin-bottom: 0.55em; font-size: var(--fs-h4); }
.world__body p { margin: 0; font-size: var(--fs-sm); }
.world__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem !important;
}
.world__links a {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.world__links a:hover { border-color: var(--red); color: var(--red-deep); }
.section--alt .world { background: #fff; }

/* --------------------------------------------------------------------------
   13b. Hinweiskasten
   Für die Stelle, an der die Seite eine Frage stellt und ins Formular führt
   („Ihr Fahrzeug ist nicht dabei?"). Roter Balken links, damit er sich vom
   Fließtext löst, ohne wie eine Warnung zu wirken.
   -------------------------------------------------------------------------- */
.notice {
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-alt);
}
.section--alt .notice { background: #fff; }
.notice h3 { font-size: var(--fs-h4); margin-bottom: 0.62em; }
.notice p { margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   14. Bildbausteine & Galerie
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: var(--shadow);
}
.figure img { width: 100%; }
.figure--plain { box-shadow: none; }

/* Einzelne Konstruktionszeichnung neben Text (Abschnitt „Das Prinzip").
   Muss NACH .figure stehen: beide haben dieselbe Spezifität, sonst gewinnt
   das helle background von .figure und die weiße Zeichnung sitzt auf einem
   fast weißen Kasten. */
.figure--blueprint {
  background: none;
  box-shadow: none;
  overflow: visible;
}
.figure--blueprint img { background: none; }
.figure figcaption {
  padding: 0.9rem 1.2rem;
  font-size: var(--fs-xs);
  color: var(--muted-ink);
  background: #fff;
}

.figure--bleed { border-radius: 0; box-shadow: none; }

/* Der rote Offset-Rahmen (`.figure--framed`) ist entfallen. Er saß nur auf
   news.html hinter dem Bild, ragte unten rechts heraus und sah dort aus wie
   ein Fehler statt wie Gestaltung. */

/* Volle Breite, feste Höhe */
.band {
  position: relative;
  min-height: clamp(320px, 46vw, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(8,26,42,0.86), rgba(8,26,42,0.55));
}
.band__body {
  max-width: 48rem;
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter);
}
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, 0.82); }

/* Galerie */
.gallery {
  display: grid;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy-700);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.1rem 0.95rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(8,26,42,0.9), transparent);
}
.gallery__item--tall { grid-row: span 2; }
.gallery__item--tall img { aspect-ratio: 4 / 5; }
.gallery__item--wide { grid-column: span 2; }
@media (max-width: 720px) {
  .gallery__item--wide { grid-column: span 1; }
  .gallery__item--tall { grid-row: span 1; }
  .gallery__item--tall img { aspect-ratio: 16 / 9; }
}

/* Videos */
.videos {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
.video-card {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--hair);
}
.section--dark .video-card { border-color: var(--navy-line); }
.video-card video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;   /* nichts vom Bild abschneiden */
  background: #000;
}
.video-card figcaption {
  padding: 0.95rem 1.15rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--body);
  background: #fff;
}
.video-card figcaption b { display: block; color: var(--ink); font-size: var(--fs-sm); margin-bottom: 0.15rem; }
.section--dark .video-card figcaption { background: var(--navy-700); color: rgba(255,255,255,0.7); }
.section--dark .video-card figcaption b { color: #fff; }

/* Downloads */
.downloads {
  display: grid;
  gap: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.downloads li { margin: 0; }
.downloads a,
.downloads .download--soon {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--body);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.downloads a:hover { border-color: var(--red); transform: translateY(-2px); color: var(--body); }
.downloads svg { flex: none; width: 22px; height: 22px; color: var(--red); margin-top: 0.15rem; }
.downloads b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.downloads small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--muted-ink); }
.downloads .download--soon { border-style: dashed; background: var(--surface-alt); }
.downloads .download--soon svg { color: var(--muted-ink); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 26, 42, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.75rem);
  right: clamp(0.75rem, 2vw, 1.75rem);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox__close:hover { background: var(--red); border-color: var(--red); }

/* --------------------------------------------------------------------------
   15. Merkmal-Liste mit Häkchen
   -------------------------------------------------------------------------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.checks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.checks li {
  position: relative;
  margin: 0;
  padding-left: 2.1rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.16em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e31e24' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--dark .checks li::before,
.card--dark .checks li::before { background-color: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
   16. Prozess-Zeitachse
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--hair); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  counter-increment: step;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  background: #fff;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--red-deep);
}
.step h4 { margin-bottom: 0.6rem; }
.step p { font-size: var(--fs-sm); margin: 0; }

/* --------------------------------------------------------------------------
   17. CTA-Band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  isolation: isolate;
}
.cta__inner {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .cta__inner { grid-template-columns: 1.4fr 1fr; } }
.cta h2 { color: #fff; }
.cta__aside { display: grid; gap: 1rem; }

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
}
.contact-line svg { flex: none; width: 20px; height: 20px; color: var(--red); }
.contact-line a { color: #fff; font-weight: 600; }
.contact-line a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   18. Formular
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--red); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-ink); }

/* Mindestens 16px, sonst zoomt iOS Safari beim Fokussieren automatisch hinein. */
@media (max-width: 860px) {
  .field input,
  .field select,
  .field textarea { font-size: 1rem; }
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.consent input { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--red); }

/* Die eigene Auswahlpfeil-Grafik ersetzt die des Betriebssystems. Grund: der
   native Pfeil sitzt am äußersten Rand des Feldes und damit sichtbar weiter
   rechts als der Text seine 1rem Abstand hat. Nebenbei sehen die Felder in
   Chrome, Firefox und Safari jetzt gleich aus.
   Die Grafik steckt als Daten-URI im Stylesheet: keine zusätzliche Datei,
   und die Content Security Policy erlaubt `img-src 'self' data:`. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236f6f6f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
/* Ohne das bleibt in Firefox der gestrichelte Fokusrahmen auf dem Text. */
.field select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }

.form__note { font-size: var(--fs-xs); color: var(--muted-ink); }

/* Info-Panel neben dem Formular */
.info-panel {
  padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  background: var(--navy);
  border-radius: var(--r-lg);
  color: rgba(255, 255, 255, 0.75);
}

/* Kontaktdaten und Bild als EIN Block: kein Abstand dazwischen, und die
   berührenden Ecken werden gerade, damit der Navy-Kasten ohne Bruch ins Bild
   übergeht. Vorher stapelte hier ein `.stack` mit 1,5 rem Lücke. */
.kontaktkarte {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.kontaktkarte .info-panel {
  border-radius: 0;
  padding-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.kontaktkarte .figure {
  border-radius: 0;
  box-shadow: none;
}
/* tt-zufahrt.webp ist ein Hochformat (1100x1556). Ungeschnitten würde die
   Spalte doppelt so hoch wie das Formular. Der Zuschnitt zeigt die Zufahrt,
   das ist der bildwichtige untere Teil. */
.kontaktkarte .figure img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 60%;
}
.info-panel h3 { color: #fff; margin-bottom: 1.25rem; }
.info-panel dl { margin: 0; display: grid; gap: 1.1rem; }
.info-panel dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}
.info-panel dd { margin: 0; color: #fff; font-size: var(--fs-sm); }
.info-panel dd a { color: #fff; }
.info-panel dd a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2rem;
  background: #050f18;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-sm);
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__brand img { height: 32px; width: auto; margin-bottom: 1.25rem; }
.footer__brand p { font-size: var(--fs-xs); max-width: 24rem; }
.footer h4 {
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.footer li { margin: 0; }
.footer a { color: rgba(255, 255, 255, 0.6); }
.footer a:hover { color: #fff; }
.footer address { font-style: normal; line-height: 1.8; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: var(--fs-xs);
  /* 0,4 ergab auf dem abgedunkelten Footer-Grund nur 3,8:1. */
  color: rgba(255, 255, 255, 0.5);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }

.social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.25s var(--ease);
}
.social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.social svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   20. Motion / Reveal
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Nur ausblenden, wenn JS aktiv ist — ohne JS bleibt alles sichtbar.
   Die .js-Klasse wird per Inline-Skript im <head> gesetzt. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay='1'] { transition-delay: 0.08s; }
[data-reveal][data-delay='2'] { transition-delay: 0.16s; }
[data-reveal][data-delay='3'] { transition-delay: 0.24s; }
[data-reveal][data-delay='4'] { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Rechtstexte (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1.1rem; }

.prose h2 {
  margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  margin-bottom: 1rem;
  font-size: var(--fs-h3);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: var(--fs-h4);
}
.prose p { font-size: var(--fs-body); line-height: 1.75; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: 0.5rem; line-height: 1.65; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Adressblöcke und Definitionslisten */
.prose address { font-style: normal; line-height: 1.85; }
.prose dl { display: grid; gap: 0.85rem; margin: 0; }
.prose dt { font-weight: 700; color: var(--ink); }
.prose dd { margin: 0.15rem 0 0; }

/* Hervorgehobener Kasten für Hinweise */
.note {
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface-alt);
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.note strong { display: block; margin-bottom: 0.3rem; }
.note :last-child { margin-bottom: 0; }

/* Gesetzestext in Großbuchstaben (Widerspruchsrecht) etwas entschärfen */
.prose .shout {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   22. Sicherheitsnetz für Text auf dunklen Flächen
   Einzelregeln wie ".compare__panel--tower h4" brechen, sobald eine
   Überschrift eine Ebene wechselt — dann steht dunkle Schrift auf dunklem
   Grund. Dieselbe Falle gibt es bei .lead und .kicker, die eine eigene
   Farbe setzen und damit die Vererbung der dunklen Fläche aushebeln.
   Diese Regeln gelten für jede Ebene und stehen bewusst am Ende.
   Geprüft: In diesen Bereichen liegen keine hellen Karten.
   -------------------------------------------------------------------------- */
.section--dark :is(h1, h2, h3, h4, h5),
.compare__panel--tower :is(h1, h2, h3, h4, h5),
.card--dark :is(h1, h2, h3, h4, h5),
.band :is(h1, h2, h3, h4, h5),
.cta :is(h1, h2, h3, h4, h5),
.info-panel :is(h1, h2, h3, h4, h5),
.hero :is(h1, h2, h3, h4, h5),
.pagehead :is(h1, h2, h3, h4, h5),
.product :is(h1, h2, h3, h4, h5) { color: #fff; }

/* .lead und .kicker tragen eine eigene Farbe — auf Navy muss sie hell sein.
   0,82 auf #081A2A ergibt 11,5:1, deutlich über AA. */
.section--dark .lead,
.compare__panel--tower .lead,
.card--dark .lead,
.band .lead,
.cta .lead,
.info-panel .lead,
.hero .lead,
.pagehead .lead,
.product .lead { color: rgba(255, 255, 255, 0.82); }

.section--dark .kicker,
.card--dark .kicker,
.band .kicker,
.cta .kicker,
.info-panel .kicker,
.hero .kicker,
.pagehead .kicker,
.product .kicker { color: rgba(255, 255, 255, 0.92); }

/* Hilfstext (Quellenangaben, Bildhinweise) nutzt --muted-ink. Auf Navy
   ergibt der Grauwert nur 3,6:1 — deshalb wird das Token in dunklen
   Bereichen umdefiniert statt jede Einzelregel zu doppeln. 7,3:1. */
.section--dark,
.compare__panel--tower,
.card--dark,
.band,
.cta,
.info-panel,
.hero,
.pagehead,
.product { --muted-ink: rgba(255, 255, 255, 0.62); }

/* Helle Inseln innerhalb dunkler Bereiche — Bildunterschriften stehen auf
   Weiß, helle Karten auf Weiß. Sie holen sich den dunklen Wert zurück,
   sonst wäre der Hilfstext dort unsichtbar. */
.figure figcaption,
.gallery__item figcaption,
.card:not(.card--dark),
.compare__panel--now { --muted-ink: #717171; }

/* Rote Akzente sind auf Navy zu dunkel (--red 3,8:1, --red-deep 2,7:1).
   Auf dunklem Grund übernimmt Weiß bzw. ein aufgehelltes Rot. */
.section--dark :is(.card__num, .link-arrow),
.card--dark :is(.card__num, .link-arrow),
.band :is(.card__num, .link-arrow),
.cta :is(.card__num, .link-arrow),
.hero :is(.card__num, .link-arrow),
.pagehead :is(.card__num, .link-arrow),
.product :is(.card__num, .link-arrow) { color: #ff8a8e; }

/* Fließtext-Links erben --red-deep. Auf Navy sind das 2,7:1 — unlesbar.
   Dasselbe aufgehellte Rot wie oben erreicht dort 7,8:1. Gilt nicht für
   .btn, der seine Farbe selbst setzt. */
.section--dark :is(p, li, dd, figcaption) a:not(.btn),
.card--dark :is(p, li, dd, figcaption) a:not(.btn),
.band :is(p, li, dd, figcaption) a:not(.btn),
.cta :is(p, li, dd, figcaption) a:not(.btn),
.hero :is(p, li, dd, figcaption) a:not(.btn),
.pagehead :is(p, li, dd, figcaption) a:not(.btn),
.info-panel :is(p, li, dd, figcaption) a:not(.btn),
.product :is(p, li, dd, figcaption) a:not(.btn) { color: #ff8a8e; }
.section--dark :is(p, li, dd, figcaption) a:not(.btn):hover,
.band :is(p, li, dd, figcaption) a:not(.btn):hover,
.cta :is(p, li, dd, figcaption) a:not(.btn):hover { color: #fff; }
.section--dark .card__num,
.card--dark .card__num,
.product .card__num { border-left-color: var(--red); }

/* --------------------------------------------------------------------------
   23. Helfer
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
/* `.mt-3` stand im Markup von index.html und news.html, gab es im Stylesheet
   aber gar nicht — die Videos klebten deshalb direkt an der Galerie. Solche
   Lücken fallen nur auf, wenn man Klassennamen gegen das Stylesheet abgleicht,
   nicht beim Draufschauen. */
.mt-3 { margin-top: clamp(3rem, 2.2rem + 3vw, 5rem); }
.mb-0 { margin-bottom: 0; }
.measure { max-width: 40rem; }
.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   24. Presse — Download-Kacheln und News-Einträge
   -------------------------------------------------------------------------- */
.dl {
  display: grid;
  gap: clamp(0.9rem, 0.75rem + 0.8vw, 1.35rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.dl li { margin: 0; }
.dl__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: #fff;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.dl__card:hover,
.dl__card:focus-visible { border-color: var(--red); transform: translateY(-3px); }
.dl__card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-alt);
}
.dl__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 auto;
  padding: 0.8rem 0.95rem 0.95rem;
}
.dl__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; color: var(--ink); }
.dl__meta { margin: 0; font-size: var(--fs-xs); color: var(--muted-ink); }
.dl__go { margin-top: auto; padding-top: 0.5rem; font-size: var(--fs-xs); font-weight: 700; color: var(--red-deep); }
.dl__go::after { content: ' \2193'; }

/* Auf Navy: die Blaupausen haben Transparenz, sie dürfen nicht beschnitten
   werden — deshalb `contain` statt `cover` und kein heller Kachelgrund. */
.section--dark .dl__card { background: var(--navy-700); border-color: var(--navy-line); }
.section--dark .dl__card img { background: transparent; object-fit: contain; }
.section--dark .dl__name { color: #fff; }
.section--dark .dl__go { color: #ff8a8e; }

/* --------------------------------------------------------------------------
   25. Weltkugel — im Seitenkopf der Visionsseite
   Der Kopf ist selbst Navy, die weißen Punkte brauchen keinen eigenen
   Kasten. Ohne JavaScript zeichnet das Canvas nichts — die Figur wird dann
   ausgeblendet und der Kopf rückt einspaltig zusammen.
   -------------------------------------------------------------------------- */
.globus { margin: 0; }
.globus__canvas {
  display: block;
  width: 100%;
  max-width: 31rem;
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  touch-action: pan-y;
  /* Beim Überfahren kommt die Kugel zusätzlich nach vorn. Die eigentliche
     Vergrößerung passiert im Canvas (Zoom auf Europa), das hier ist nur die
     Geste dazu. `transform` statt `width`, damit kein Umbruch je Frame
     entsteht — die Zeichenroutine misst deshalb `offsetWidth`, das von
     Transformationen unberührt bleibt. */
  transform-origin: center;
  transition: transform 0.55s var(--ease), filter 0.55s var(--ease);
}
.globus__canvas.is-zoom {
  transform: scale(1.08);
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}
@media (prefers-reduced-motion: reduce) {
  .globus__canvas, .globus__canvas.is-zoom { transition: none; transform: none; }
}
.globus figcaption {
  margin-top: 0.75rem;
  margin-inline: auto;
  max-width: 46ch;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
html:not(.js) .globus { display: none; }

.news { display: grid; gap: clamp(1rem, 0.8rem + 1vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
.news li { margin: 0; }
.news__item {
  display: grid;
  /* Der Abstand steckt komplett im `gap`. Ein zusätzlicher `margin` an der
     Überschrift würde sich im Grid addieren — vorher 10,4 px über der H3 und
     14 px darunter, also zwei verschiedene Abstände in derselben Karte. */
  gap: 0.75rem;
  padding: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  background: var(--surface-alt);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--red);
}
.section--alt .news__item { background: #fff; }
.news__tag {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.news__item h3 { margin: 0; font-size: var(--fs-h4); }
.news__item p { margin: 0; }

/* Leerzustand: eine News-Seite ohne Meldungen soll nicht wie ein Ladefehler
   aussehen, sondern sagen, was hier erscheinen wird. */
.leer {
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border: 1px dashed var(--hair);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--body);
}
.leer p { margin: 0; max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   25. Einwilligung (Cookies und externe Inhalte)
   Das Markup baut assets/js/consent.js zur Laufzeit. Ohne JavaScript
   erscheint nichts, und das ist richtig so: ohne JavaScript kann die Seite
   auch keinen Drittinhalt nachladen, für den eine Einwilligung nötig wäre.
   -------------------------------------------------------------------------- */
.consent-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  /* Kein Vollbild-Overlay: das Banner sperrt die Seite nicht. Wer nicht
     entscheiden will, liest weiter, und genau das verlangt die Freiwilligkeit
     der Einwilligung. */
  pointer-events: none;
}
.consent-bar__box {
  pointer-events: auto;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.consent-bar__titel { margin: 0 0 0.6rem; font-size: var(--fs-h4); }
.consent-bar__text {
  margin: 0 0 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--body);
}
.consent-bar__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
}
/* Ablehnen und Annehmen sind gleich groß und stehen nebeneinander. Ein
   kleinerer oder blasserer Ablehnen-Knopf ist der Punkt, den die
   Aufsichtsbehörden regelmäßig beanstanden. */
.consent-bar__btn { flex: 1 1 12rem; justify-content: center; }
.consent-bar__link {
  border: 0;
  background: none;
  padding: 0.5rem 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent-bar__link:hover { color: var(--red); }

.consent-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.consent-modal__hg { position: absolute; inset: 0; background: rgba(8, 26, 42, 0.6); }
.consent-modal__box {
  position: relative;
  width: min(100%, 40rem);
  max-height: min(86vh, 46rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.consent-modal__zu {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 40px; height: 40px;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--body);
  cursor: pointer;
}
.consent-modal__zu:hover { color: var(--red); }

.consent-bar__kat {
  margin-bottom: 1.1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface-alt);
}
.consent-bar__kopf { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.consent-bar__kopf input { width: 18px; height: 18px; accent-color: var(--red); }
.consent-bar__kopf input:disabled { cursor: not-allowed; }
.consent-bar__name { font-weight: 700; color: var(--ink); }
.consent-bar__kat-text { margin: 0.4rem 0 0; font-size: var(--fs-sm); color: var(--body); }
.consent-bar__stand { margin: 0.3rem 0 0; font-size: var(--fs-xs); color: var(--muted-ink); }

/* Platzhalter anstelle eines noch gesperrten Drittinhalts. */
.consent-sperre {
  display: grid;
  gap: 0.9rem;
  place-items: center;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  border: 1px dashed var(--hair);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  text-align: center;
}
.consent-sperre p { margin: 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--body); }

/* Der Fußzeilen-Eintrag ist ein <button>, weil er kein Ziel hat, sondern ein
   Fenster öffnet. Er muss trotzdem wie die Links daneben aussehen. */
.footer__consent {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  /* Dieselbe Deckkraft wie `.footer a`, sonst fällt der Knopf aus der Reihe. */
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.footer__consent:hover { color: #fff; }

@media (max-width: 32rem) {
  .consent-bar__btn { flex: 1 1 100%; }
}

@media print {
  .header, .footer, .cta, .nav-toggle, .lightbox { display: none !important; }
  .consent-bar, .consent-modal { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  .vergleich__body { display: block !important; }
}