/* ============================================================
   DAUD RECYCLING - Main Stylesheet
   Industrial/Robust Design System
   ============================================================ */

/* ---------- Google Fonts ---------- */
/* Fonts: self-hosted via css/fonts.css (DE-GDPR, no Google hotlink) */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Brand colors */
  --clr-red: #da0019;
  --clr-red-dark: #b00015;
  --clr-red-light: #ff1a35;
  --clr-blue: #102462;
  --clr-blue-dark: #0a1844;
  --clr-blue-light: #1a3388;

  /* Rot auf dunklem Grund unterhalb von 24px: --clr-red faellt dort auf
     Werten wie #111827/#0a0f1a auf 3.37:1/3.64:1 (Audit C9) - zu dunkel fuer
     Fliesstext-Groessen. #ff4d5f haelt 5.91:1 auf #0a0f1a und 5.47:1 auf
     #111827. Nur fuer Text < 24px auf dunklem Grund; Flaechen, Icons und
     grosse Display-Typo bleiben bei --clr-red. */
  --clr-red-on-dark: #ff4d5f;

  /* Neutrals */
  --clr-dark: #0a0f1a;
  --clr-dark-2: #111827;
  --clr-dark-3: #1f2937;
  --clr-grey: #3a3a4a;
  --clr-grey-light: #6b7280;
  --clr-border: #2a2a3a;
  --clr-light: #f5f5f5;
  --clr-light-2: #e5e7eb;
  --clr-white: #ffffff;

  /* Text */
  --clr-text: #1a1a2e;
  --clr-text-light: #e8e8e8;
  --clr-text-muted: #9ca3af;

  /* Chrome-Flaechen — hell, damit das Original-Logo traegt */
  --surface-nav: #ffffff;
  --surface-footer: var(--clr-light);
  --surface-footer-bar: var(--clr-blue);
  --surface-nav-overlay: rgba(255,255,255,.98);

  /* Muted-Text auf hellen Flaechen.
     --clr-grey-light (#6b7280) erreicht auf #f5f5f5 nur 4,43:1 und
     verfehlt AA. #5f6b7a liefert 4,97:1. */
  --clr-grey-on-light: #5f6b7a;

  /* Typography */
  /* M-12: Arial Black ist ~2x breiter als das ultra-schmale Bebas Neue -
     bei blockiertem Font (oder waehrend des font-display:swap-Fensters)
     lief "AUTOVERWERTER" dadurch ueber die Hero-Box hinaus. Die schmalen
     Fallbacks liegen metrisch naeher an Bebas Neue; sans-serif bleibt als
     letzte Stufe. */
  --ff-heading: 'Bebas Neue', 'Arial Narrow', 'Liberation Sans Narrow', 'Arial Black', sans-serif;
  --ff-body: 'Source Sans 3', 'Segoe UI', sans-serif;

  /* Font sizes (fluid) */
  --fs-hero: clamp(3rem, 8vw, 6rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-h4: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 6rem;
  --sp-2xl: 8rem;

  /* Layout */
  --max-width: 1280px;
  --nav-height: 80px;

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.2);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.3);
  --shadow-glow-red: 0 6px 18px rgba(218,0,25,.28);
  --shadow-glow-blue: 0 6px 18px rgba(16,36,98,.28);

  /* Transitions */
  --tr-fast: 150ms ease;
  --tr-base: 300ms ease;
  --tr-slow: 500ms ease;
  --tr-smooth: 600ms cubic-bezier(.22,1,.36,1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--clr-text);
  background: var(--clr-white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr-fast);
}

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* Sichtbarer Tastaturfokus (WCAG 2.4.7). Gemessen bei 390px Breite betraegt
   der Abstand zur clip-Grenze der .section genau 5px - das ist die volle
   Ausdehnung des Rings, kein Puffer (H-8/C11-Audit). Die Aufteilung unten
   (Outline 1-4px + Halo 0-5px) haelt exakt dieses 5px-Budget ein; jede
   kuenftige Vergroesserung von outline-width/-offset oder der Halo-Ausdehnung
   wuerde den Ring anschneiden.

   H-8: Browser ohne :focus-visible-Unterstuetzung (Safari <=15.3,
   Chrome/Edge <=85, Firefox <=84) wuerden sonst ueberhaupt keinen Ring
   zeigen, weil der Reset oben outline:none setzt und eine unbekannte
   Pseudoklasse den ganzen Selektor - nicht nur die Deklaration - ungueltig
   macht. Die Basisregel greift deshalb zunaechst immer (auch bei
   Maus-Fokus); :focus-visible schraenkt moderne Browser wieder auf reine
   Tastaturbedienung ein. */
:focus {
  outline: 3px solid var(--clr-red);
  outline-offset: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* C11: zweifarbiger Ring. Ein reiner roter Ring fiel auf rotem/blauem/
   fotografiertem Grund unter 3:1 (u.a. 1.09:1 auf dem roten CTA-Banner,
   2.75:1 auf der blauen Footer-Leiste, 2.37:1 auf dem Hero-Foto). Das
   weisse Halo dahinter haelt den roten Ring auf jeder Flaeche sichtbar,
   ohne dass pro Sektion eine eigene Ring-Farbe gepflegt werden muss. */
:focus-visible {
  outline: 3px solid var(--clr-red);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(255,255,255,.9);
}

button { cursor: pointer; }

/* K3: kein <main> und kein Sprunganker liess Tastatur-/Screenreader-Nutzer
   Navbar und Hero auf jeder Seite erneut durchlaufen. Der Skip-Link ist das
   erste fokussierbare Element im DOM (WP4), bleibt aber ausserhalb des
   sichtbaren Bereichs, bis er selbst den Fokus erhaelt - dieselbe
   Zweifarbring-Logik wie :focus-visible oben sorgt dafuer, dass er auf
   jeder Flaeche sichtbar bleibt. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.85rem 1.5rem;
  background: var(--clr-red);
  color: var(--clr-white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  transform: translateY(-150%);
  transition: transform var(--tr-fast);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--clr-white);
  outline-offset: 2px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

p + p { margin-top: 1em; }

.text-red { color: var(--clr-red); }
.text-blue { color: var(--clr-blue); }
.text-light { color: var(--clr-text-light); }
.text-muted { color: var(--clr-text-muted); }
.text-center { text-align: center; }

/* ---------- Layout Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.section {
  padding: var(--sp-xl) 0;
  /* Faengt den horizontalen Ueberhang ab, den .reveal--left/--right im
     Zustand vor dem Einblenden erzeugen (translateX 60px), sowie den
     absolut positionierter Deko-Elemente — damit er nicht in
     document.documentElement.scrollWidth landet.
     clip statt hidden: hidden wuerde overflow-y auf auto hochstufen
     (Spec: ist eine Achse nicht visible, wird die andere zu auto) und
     die Sektion zum Scroll-Container machen. clip laesst overflow-y
     visible und ist ausserdem nicht per Skript scrollbar.
     hidden steht als Fallback fuer Safari < 16 voran. */
  overflow-x: hidden;
  overflow-x: clip;
}

.section--dark {
  background: var(--clr-dark);
  color: var(--clr-text-light);
}

.section--blue {
  background: var(--clr-blue);
  color: var(--clr-text-light);
}

.section--grey {
  background: var(--clr-light);
}

.grid {
  display: grid;
  gap: var(--sp-md);
}

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

.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.flex-col {
  display: flex;
  flex-direction: column;
}

.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2.2rem;
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  transform: translateX(-100%);
  transition: transform var(--tr-base);
}

.btn:hover::before {
  transform: translateX(0);
}

.btn--red {
  background: var(--clr-red);
  color: var(--clr-white);
  box-shadow: var(--shadow-glow-red);
}

.btn--red:hover {
  /* C8: --clr-red-light (heller) drueckte Weiss-auf-Rot von 5.26:1 auf
     3.85:1 - unter AA fuer 13.6-17.6px Button-Text. Der Hover-Akzent muss
     dunkler, nicht heller werden. */
  background: var(--clr-red-dark);
  box-shadow: 0 10px 24px rgba(218,0,25,.35);
  transform: translateY(-2px);
}

.btn--blue {
  background: var(--clr-blue);
  color: var(--clr-white);
  box-shadow: var(--shadow-glow-blue);
}

.btn--blue:hover {
  background: var(--clr-blue-light);
  box-shadow: 0 10px 24px rgba(16,36,98,.35);
  transform: translateY(-2px);
}

.btn--outline {
  border: 2px solid var(--clr-white);
  color: var(--clr-white);
  background: transparent;
}

.btn--outline:hover {
  background: var(--clr-white);
  color: var(--clr-dark);
  transform: translateY(-2px);
}

.btn--outline-red {
  border: 2px solid var(--clr-red);
  color: var(--clr-red);
  background: transparent;
}

.btn--outline-red:hover {
  background: var(--clr-red);
  color: var(--clr-white);
  transform: translateY(-2px);
}

/* ---------- Section Headings ---------- */
.section-header {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.section-header__title {
  margin-bottom: var(--sp-sm);
  text-wrap: balance;
}

.section-header__desc {
  max-width: 640px;
  margin: 0 auto;
  color: var(--clr-grey-light);
  font-size: 1.1rem;
  line-height: 1.8;
}

.section--dark .section-header__desc,
.section--blue .section-header__desc {
  color: var(--clr-text-muted);
}

/* ---------- Cards ---------- */
.card {
  background: var(--clr-white);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
}

a.card { cursor: pointer; }

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.card--dark {
  background: var(--clr-dark-2);
  border: 1px solid var(--clr-border);
}

.card--dark:hover {
  border-color: var(--clr-red);
  box-shadow: var(--shadow-glow-red);
}

.card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-sm);
  background: rgba(218,0,25,.1);
  border-radius: var(--radius-md);
  color: var(--clr-red);
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
}

.card:hover .card__icon {
  background: var(--clr-red);
  color: var(--clr-white);
}

.card__icon svg {
  width: 32px;
  height: 32px;
}

.card__title {
  font-size: var(--fs-h4);
  margin-bottom: 0.5rem;
}

.card__text {
  color: var(--clr-grey-light);
  line-height: 1.7;
}

.card--dark .card__text {
  color: var(--clr-text-muted);
}

.card--dark .card__title {
  color: var(--clr-white);
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--sp-md);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--surface-nav);
  border-bottom: 1px solid var(--clr-light-2);
  transition: box-shadow var(--tr-base), border-color var(--tr-base);
}

.navbar.scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--shadow-md);
}

.navbar__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  display: flex;
  align-items: center;
}

.navbar__logo img {
  height: 64px;
  width: auto;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.navbar__link {
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--tr-fast);
}

.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--clr-red);
  transition: width var(--tr-base);
}

.navbar__link:hover,
.navbar__link.active {
  color: var(--clr-red);
}

.navbar__link:hover::after,
.navbar__link.active::after {
  width: 100%;
}

.navbar__cta {
  padding: 0.6rem 1.5rem;
  font-size: 0.85rem;
}

/* Hamburger */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
}

.navbar__hamburger span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--clr-text);
  transition: background var(--tr-base), transform var(--tr-base), opacity var(--tr-base);
}

.navbar__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar__hamburger.active span:nth-child(2) {
  opacity: 0;
}

.navbar__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* H-4: bis einschliesslich 1024px blendet responsive.css .navbar__links aus
   und zeigt nur den Hamburger - ohne JavaScript oeffnet der Hamburger nichts,
   die Navigation waere komplett unerreichbar. .js wird von einem
   Inline-Script ganz am Anfang von <head> gesetzt, noch bevor irgendein
   Stylesheet angewendet wird (dasselbe Muster, das animations.css bereits
   fuer die Reveal-Animationen nutzt) - html:not(.js) greift deshalb
   zuverlaessig genau dann, wenn kein Skript gelaufen ist. */
html:not(.js) .navbar__hamburger {
  display: none !important;
}

html:not(.js) .navbar__links {
  display: flex !important;
  flex-wrap: wrap;
}

/* Mobile Nav */
/* C1: Das Overlay ist position:fixed;inset:0 - sein Inhalt (sechs Punkte
   plus Primaer-CTA, zusammen rund 480px) passt seit dem sechsten
   Navigationspunkt nicht mehr in jeden Viewport, und seit der Breakpoint
   von 768px auf 1024px gewandert ist, benutzen auch Breiten von 769-1024px
   dieses Overlay. Ohne overflow-y quoll der Inhalt an BEIDEN Enden heraus
   und war weder per Scrollen noch per Tastatur erreichbar (WCAG 2.4.7,
   1.4.10 Reflow bei 400% Zoom). Drei Zutaten gehoeren zusammen:
   - overflow-y: auto macht das Overlay ueberhaupt scrollbar;
   - justify-content: safe center zentriert nur solange der Inhalt passt und
     faellt beim Ueberlaufen auf flex-start zurueck - ohne "safe" bleibt der
     obere Ueberhang auch MIT Scrollcontainer unerreichbar, weil zentrierte
     Flex-Kinder ueber den Scrollbereichsanfang hinausragen. Aeltere Browser
     ohne "safe"-Unterstuetzung verwerfen die Deklaration und landen bei
     flex-start - ebenfalls unproblematisch;
   - padding-top >= --nav-height, weil die Navbar (z-index 1000) UEBER dem
     Overlay (z-index 999) liegt: ohne den Abstand verschwaende der erste
     Eintrag hinter der Leiste. Das Padding unten haelt den CTA vom
     Viewportrand frei. */
.navbar__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--surface-nav-overlay);
  backdrop-filter: blur(16px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--nav-height) + var(--sp-sm)) var(--sp-md) var(--sp-md);
}

.navbar__mobile.active {
  display: flex;
}

.navbar__mobile a {
  color: var(--clr-text);
  font-family: var(--ff-heading);
  font-size: 2rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--tr-fast);
}

.navbar__mobile a:hover {
  color: var(--clr-red);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* I2 (Endpruefung Plan 3): Das Video muss das Poster UEBERDECKEN, nicht
   hinter ihm im Fluss stehen. Ohne Positionierung waren img und video beide
   static: das Video begann bei top 800 - exakt dort, wo der 800 px hohe Hero
   endet - und wurde von .hero { overflow: hidden } vollstaendig weggeschnitten
   (gemessen mit echter Videodatei: readyState 4, es spielte, sichtbare Flaeche
   0 px). Die Drohnenaufnahme haette geladen, dekodiert und dauerhaft gespielt,
   ohne dass ein einziger Pixel zu sehen gewesen waere.
   Nur das video wird positioniert, nicht das img: das Poster bleibt der
   normale Fluss und damit der Zustand, auf den ohne Video zurueckgefallen
   wird. */
.hero__bg video {
  position: absolute;
  inset: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* C2: bei .7/.6/.85 schien an den hellen Keilriemenscheiben so viel vom
     Foto durch, dass Rot- und Weiss-Text auf 1.0-3.5:1 fielen. Der
     Tiefblau-Mittelton (rgba(16,36,98,...)) deckelte den erreichbaren
     Kontrast zusaetzlich: selbst bei Alpha 1 liegt reines --clr-blue nur
     bei 2.75:1 gegen Signalrot (derselbe Effekt wie C3 auf der
     Page-Hero) - die Mitte des Verlaufs blieb deshalb zu hell, egal wie
     stark die Alpha-Werte stiegen. Durchgehend Nacht (#0a0f1a) statt des
     Blautons haelt Rot ueber 3:1, die Alpha-Stufen sorgen weiter fuer
     leichte Tiefe im Verlauf. */
  background: linear-gradient(
    to bottom,
    rgba(10,15,26,.9) 0%,
    rgba(10,15,26,.94) 50%,
    rgba(10,15,26,.96) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--clr-white);
  padding: var(--sp-md);
  max-width: 900px;
  /* M-12: als Flex-Kind verhindert der Default min-width:auto sonst, dass
     die Box unter die Breite des laengsten Wortes schrumpft - genau das
     Szenario, in dem ein breiterer Fallback-Font (Arial Black statt Bebas
     Neue) ueberlaeuft statt umzubrechen. */
  min-width: 0;
}

.hero__tag {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* C9: --clr-red faellt auf dem Hero-Foto/Overlay bei 14px unter 4.5:1. */
  color: var(--clr-red-on-dark);
  margin-bottom: var(--sp-sm);
  border: 1px solid rgba(218,0,25,.4);
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  /* C2: selbst ein stark verdunkeltes Overlay liess an hellen Bildstellen
     (Chrom/Riemenscheiben) noch zu viel Foto durch. Ein eigener, fast
     deckender Chip-Hintergrund macht den Textkontrast unabhaengig vom Bild
     darunter - Rand und Radius bestehen bereits, eine Fuellung passt sich
     dem an. */
  background: rgba(10,15,26,.85);
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.95;
  margin-bottom: var(--sp-md);
  text-wrap: balance;
  /* M-12: laesst "AUTOVERWERTER" im Fallback-Font (Arial Black/Arial
     Narrow) umbrechen statt am .hero-Rand abgeschnitten zu werden. */
  overflow-wrap: break-word;
}

.hero__title span {
  color: var(--clr-red);
}

.hero__desc {
  font-size: 1.2rem;
  /* C10: .75 Alpha ergab 3.95:1 auf dem verdunkelten Overlay; .92 haelt
     durchgehend 4.5:1. */
  color: rgba(255,255,255,.92);
  margin-bottom: var(--sp-md);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.hero__buttons {
  display: flex;
  gap: var(--sp-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Zielgruppen (sechs Einstiegspfade) ---------- */
.section--paths {
  border-bottom: 1px solid var(--clr-light-2);
}
.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
.path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.path__label {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--clr-red);
}
.path__title {
  font-family: var(--ff-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--clr-text);
}
.path__text {
  color: var(--clr-grey-light);
  line-height: 1.7;
  max-width: 44ch;
}
.path__link {
  margin-top: auto;
  font-family: var(--ff-heading);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-red);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--tr-fast);
}
.path__link span {
  transition: transform var(--tr-fast);
}
.path__link:hover {
  color: var(--clr-red-dark);
}
.path__link:hover span {
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  .paths {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .paths {
    grid-template-columns: 1fr;
  }
}

/* ---------- Page Hero (Unterseiten) ---------- */
.page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--clr-blue);
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  /* C3: der 135deg-Verlauf liess das blaue Ende nahe --clr-blue pur durch,
     worauf Rot nur 2.75:1 erreichte. Ein flacher, dunklerer Ton haelt die
     Ueberschrift (>=24px, 3:1) und den Breadcrumb-Text (<24px, 4.5:1)
     durchgehend ueber dem Zielkontrast. */
  background: rgba(10,15,26,.94);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  /* H-1: padding-block statt der padding-Shorthand - eine Shorthand setzt
     immer alle vier Seiten und ueberschrieb damit .container's
     padding-inline (Shorthands schlagen dieselbe Kaskadenposition, egal
     wie spezifisch die vorherige Longhand war). Dadurch sass die
     Ueberschrift zwischen 481px und 1280px ohne seitlichen Abstand am
     Viewport-Rand. */
  padding-block: calc(var(--nav-height) + var(--sp-lg)) var(--sp-lg);
}

.page-hero__title {
  color: var(--clr-white);
  font-size: var(--fs-h1);
  margin-bottom: var(--sp-sm);
}

.page-hero__breadcrumb {
  display: flex;
  gap: 0.5rem;
  /* C10: .5 Alpha ergab bei 390px 4.35-4.49:1 (knapp unter 4.5). */
  color: rgba(255,255,255,.75);
  font-size: var(--fs-small);
}

.page-hero__breadcrumb a:hover {
  /* C9: --clr-red faellt bei 14px auf dem verdunkelten Overlay unter 4.5:1. */
  color: var(--clr-red-on-dark);
}

.page-hero__breadcrumb span {
  color: var(--clr-red-on-dark);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--surface-footer);
  color: var(--clr-text);
  padding: var(--sp-xl) 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp-lg);
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--clr-light-2);
}

.footer__brand {
  max-width: 320px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-sm);
}

.footer__logo img {
  height: 130px;
  width: auto;
}

.footer__brand p {
  color: var(--clr-grey-on-light);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--sp-md);
}

.footer__socials {
  display: flex;
  gap: 0.75rem;
}

.footer__social {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  /* C11: --clr-light-2 auf --clr-light ergab 1.14:1 (Ziel 3:1 fuer
     UI-Komponentengrenzen, WCAG 1.4.11). */
  border: 1px solid var(--clr-grey-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-grey-on-light);
  transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}

.footer__social:hover {
  border-color: var(--clr-red);
  color: var(--clr-red);
  background: rgba(218,0,25,.08);
}

.footer__social svg {
  width: 18px;
  height: 18px;
}

.footer__heading {
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-text);
  margin-bottom: var(--sp-md);
}

.footer__link {
  display: block;
  color: var(--clr-grey-on-light);
  font-size: 0.95rem;
  padding: 0.3rem 0;
  transition: color var(--tr-fast);
}

.footer__link:hover {
  color: var(--clr-red);
}

.footer__contact-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: var(--sp-sm);
  color: var(--clr-grey-on-light);
  font-size: 0.95rem;
}

.footer__contact-item svg {
  width: 18px;
  height: 18px;
  color: var(--clr-red);
  flex-shrink: 0;
  margin-top: 3px;
}

/* Abschlussleiste — greift die Bauweise des Logos auf. */
.footer__bottom {
  background: var(--surface-footer-bar);
  margin-top: var(--sp-lg);
  padding: var(--sp-md) 0;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  font-size: var(--fs-small);
  color: rgba(255,255,255,.85);
}

.footer__legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer__legal a {
  color: rgba(255,255,255,.85);
  transition: color var(--tr-fast);
}

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

/* ---------- Parallax Section ---------- */
.parallax-section {
  position: relative;
  padding: var(--sp-2xl) 0;
  overflow: hidden;
}

.parallax-section__bg {
  position: absolute;
  /* Der Ueberstand von 20% ist der Spielraum, den initParallax() in
     js/animations.js verschieben darf. BLEED_RATIO dort muss zu diesem
     Wert passen, sonst entsteht am Rand ein Spalt.
     Bewusst kein background-attachment: fixed — das waere ein zweiter
     Parallax-Mechanismus neben dem JS-transform. Ein transform macht das
     Element zum Containing Block, wodurch "fixed" nicht mehr gegen den
     Viewport aufloest; ausserdem ignoriert iOS Safari es ganz. */
  inset: -20%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}

.parallax-section__overlay {
  position: absolute;
  inset: 0;
  /* C5/C6: bei .85 blieb genug vom Foto sichtbar, um Counter-Zahlen (Rot)
     und rote H2 knapp unter 3:1 zu druecken. .93 raeumt in allen
     gemessenen Faellen mit Puffer auf. */
  background: rgba(10,15,26,.93);
  z-index: 1;
}

.parallax-section__content {
  position: relative;
  z-index: 2;
}

/* ---------- Counter ---------- */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
  text-align: center;
}

.counter-item__number {
  font-family: var(--ff-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--clr-red);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.counter-item__label {
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-md) 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  /* H-5: .timeline sitzt in einer hellen .section - --clr-border ist ein
     Dunkelgrund-Token und wirkte hier wie ein schwerer schwarzer Strich. */
  background: var(--clr-light-2);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  width: 50%;
  padding: 0 var(--sp-md) var(--sp-md);
}

.timeline__item:nth-child(odd) {
  left: 0;
  text-align: right;
  padding-right: var(--sp-lg);
}

.timeline__item:nth-child(even) {
  left: 50%;
  padding-left: var(--sp-lg);
}

.timeline__dot {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  background: var(--clr-red);
  border-radius: 50%;
  /* H-5: --clr-dark war als Ring gegen einen dunklen Hintergrund gedacht;
     auf der hellen .section zeichnete er einen schweren schwarzen Rand um
     den roten Punkt. Weiss laesst den Punkt sauber auf dem hellen Grund
     stehen. */
  border: 3px solid var(--clr-white);
}

.timeline__item:nth-child(odd) .timeline__dot {
  right: calc(-8px - var(--sp-md) + var(--sp-lg));
  right: -8px;
}

.timeline__item:nth-child(even) .timeline__dot {
  left: -8px;
}

.timeline__year {
  font-family: var(--ff-heading);
  font-size: 1.5rem;
  color: var(--clr-red);
  letter-spacing: 0.05em;
}

.timeline__text {
  /* C4/H-5: --clr-text-muted ist laut DESIGN.md ausschliesslich fuer
     dunklen Grund bestimmt (2.54:1 auf Weiss). --clr-grey-light ist der
     dokumentierte Text-auf-Weiss-Ton (4.83:1). */
  color: var(--clr-grey-light);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- Team Card ---------- */
.team-card {
  text-align: center;
  padding: var(--sp-md);
}

.team-card__img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto var(--sp-sm);
  overflow: hidden;
  border: 3px solid var(--clr-border);
  transition: border-color var(--tr-base);
  background: var(--clr-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
}

.team-card:hover .team-card__img {
  border-color: var(--clr-red);
}

.team-card__img svg {
  width: 48px;
  height: 48px;
}

.team-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__name {
  font-family: var(--ff-heading);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--clr-white);
  margin-bottom: 0.25rem;
}

.team-card__role {
  /* C9: --clr-red faellt bei 14px auf --clr-dark unter 4.5:1 (3.64:1). */
  color: var(--clr-red-on-dark);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.team-card__contact {
  color: var(--clr-text-muted);
  font-size: var(--fs-small);
}

/* ---------- FAQ Accordion ---------- */
.accordion__item {
  border-bottom: 1px solid var(--clr-border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-family: var(--ff-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clr-white);
  cursor: pointer;
  text-align: left;
  transition: color var(--tr-fast);
}

.accordion__trigger:hover {
  /* C9: --clr-red faellt bei 17.6px auf --clr-dark unter 4.5:1 (3.64:1). */
  color: var(--clr-red-on-dark);
}

.accordion__trigger svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--tr-base);
}

.accordion__item.active .accordion__trigger svg {
  transform: rotate(180deg);
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tr-slow);
}

.accordion__body-inner {
  padding: 0 0 1.25rem;
  color: var(--clr-text-muted);
  line-height: 1.8;
}

.accordion__body > p {
  margin: 0;
  padding: 0 0 1.25rem;
  line-height: 1.8;
}

/* H-4: der Kollaps oben (max-height: 0) ist nicht auf .js beschraenkt -
   ohne JavaScript gibt es keinen Weg, eine Antwort wieder aufzuklappen,
   alle fuenf FAQ-Antworten auf leistungen.html blieben dauerhaft auf 0px
   Hoehe unsichtbar. Dieselbe html:not(.js)-Erkennung wie beim Hamburger
   oben hebt den Kollaps auf, wenn kein Skript gelaufen ist. */
html:not(.js) .accordion__body {
  max-height: none !important;
  overflow: visible !important;
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  color: var(--clr-text);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.9rem 1.2rem;
  background: var(--clr-white);
  /* C11: --clr-light-2 auf Weiss ergab 1.24:1 (Ziel 3:1, WCAG 1.4.11) -
     das Feld war ohne Fokus/Fehler-Zustand kaum als Feld erkennbar.
     --clr-grey-light ist bereits als Text-auf-Weiss-Ton dokumentiert und
     haelt hier 4.83:1. */
  border: 2px solid var(--clr-grey-light);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--clr-blue);
  box-shadow: 0 0 0 3px rgba(16,36,98,.15);
}

.form-input.error,
.form-textarea.error {
  border-color: var(--clr-red);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-error {
  color: var(--clr-red);
  font-size: var(--fs-small);
  margin-top: 0.4rem;
  display: none;
}

.form-group.has-error .form-error {
  display: block;
}

/* Form in dark context */
.section--dark .form-input,
.section--dark .form-textarea {
  background: var(--clr-dark-2);
  border-color: var(--clr-border);
  color: var(--clr-text-light);
}

.section--dark .form-input:focus,
.section--dark .form-textarea:focus {
  border-color: var(--clr-red);
  box-shadow: 0 0 0 3px rgba(218,0,25,.15);
}

.section--dark .form-group label {
  color: var(--clr-text-light);
}

select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233a3a4a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--clr-grey-light);
}

.form-checkbox input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  accent-color: var(--clr-red);
  cursor: pointer;
  flex-shrink: 0;
}

.form-checkbox a {
  color: var(--clr-red);
  text-decoration: underline;
}

.form-message {
  margin-top: var(--sp-sm);
}

/* A19: Hilfstext und Auswahlliste unter dem Bild-Upload. Beide stehen auf
   .section (weiss, --clr-white), NICHT auf .section--grey - anders als bei
   .gallery__caption / .legal-content .muster-widerruf p. --clr-text-muted
   ist laut DESIGN.md nur fuer dunklen Grund bestimmt (auf Weiss noch
   schlechter als die dort belegten 2,33:1 auf --clr-light). Nachgerechnet:
   --clr-grey-on-light (#5f6b7a) auf #ffffff ergibt 5,42:1 - erfuellt AA
   (4.5:1) fuer Fliesstext, auch bei --fs-small (14px). */
.form-hint {
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  color: var(--clr-grey-on-light);
}

.form-filelist {
  margin-top: 0.6rem;
  padding-left: 1.2rem;
  font-size: var(--fs-small);
  color: var(--clr-grey-on-light);
}

.form-filelist li {
  margin-bottom: 0.2rem;
}

/* ---------- Cookie Banner ---------- */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  background: var(--clr-dark);
  border-top: 1px solid var(--clr-border);
  padding: var(--sp-md);
  /* I1 (Endpruefung Plan 3): Der Banner ist position:fixed - was ueber den
     Viewport hinausragt, ist durch NICHTS erreichbar: kein Scrollen, kein
     Tastaturweg. Bei 200 % Textgroesse (WCAG 2.1 AA, 1.4.4 Resize Text)
     wurde der Bannertext gemessen 1504 px hoch und verlor 596 px nach oben.
     Das ist der rechtlich tragende Teil einer informierten Einwilligung
     (Art. 4 Nr. 11 DSGVO), nicht Dekoration. Die Deckelung auf 90vh macht
     den Ueberhang scrollbar statt unerreichbar; overscroll-behavior haelt
     das Scrollen im Banner, statt es an die Seite darunter zu geben. */
  max-height: 90vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookie-banner.active {
  display: block;
}

.cookie-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}

.cookie-banner__text {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  flex: 1;
  /* M-7: feste 300px + Banner-Padding (var(--sp-md) = 32px) brauchen
     364px - bei 320px Viewportbreite liefen 12px ueber den Rand hinaus
     und wurden von body { overflow-x: hidden } abgeschnitten. */
  min-width: min(300px, 100%);
  /* I1, zweite Haelfte: Wuerde nur der Banner selbst scrollen, muesste der
     Besucher bei 200 % erst durch den ganzen Text scrollen, um die beiden
     Knoepfe zu erreichen. Scrollt stattdessen der Textabsatz, bleibt die
     Knopfleiste im Blick.
     Die Rechnung ist die Bannerdeckelung (90vh) minus dem, was neben dem
     Text im Banner steht: 4rem Innenabstand oben und unten (2x var(--sp-md)),
     2rem Abstand zur Knopfleiste (gap) und rund 3rem Knopfhoehe. Bewusst in
     rem, nicht in px: bei 200 % Textgroesse waechst der Wurzel-Schriftgrad
     mit, also auch Innenabstand, Abstand und Knopfhoehe - eine px-Rechnung
     wuerde genau in dem Fall zu knapp, fuer den sie gedacht ist.
     Bei 100 % bleiben auf 320x568 gemessen 367 px uebrig fuer 343 px Text:
     die Deckelung greift dort nicht, sie kostet den Normalfall nichts.

     NACHPRUEFUNG, BEFUND 1 - die Untergrenze fehlte. Die reine Differenz
     90vh - 9rem wird auf Querformat-Telefonen NEGATIV: bei 200 %
     Textgroesse und 320 CSS-px Viewporthoehe sind 90vh = 288 px und
     9rem = 288 px, macht 0. Gemessen auf 568x320 bei 200 %: Textbox 0 px
     bei 685 px Inhalt, nicht scrollbar - der Banner zeigte zwei Knoepfe
     und keinen Buchstaben Text; auf 640x360 und 740x360 blieb ein 36-px-
     Schlitz fuer 636 bzw. 490 px Inhalt. Das war schlechter als vor der
     Deckelung (dort 103 px sichtbar). max() zieht deshalb eine Untergrenze
     von 6rem ein - drei Zeilen, die bei jeder Textgroesse mitwachsen. Bei
     100 % bindet sie nie (auf 320x568 sind es weiterhin 367 px), sie
     kostet den Normalfall also nach wie vor nichts. Dass der Banner dann
     in den engsten Kombinationen selbst scrollen muss, faengt die
     Knopfleiste ab (position: sticky, siehe unten). */
  max-height: max(6rem, calc(90vh - 9rem));
  overflow-y: auto;
}

.cookie-banner__text a {
  /* C9: --clr-red faellt bei 14.4px auf --clr-dark unter 4.5:1 (3.64:1). */
  color: var(--clr-red-on-dark);
  text-decoration: underline;
}

/* NACHPRUEFUNG, BEFUND 1 - die eigentliche Absicherung. Eine Deckelung des
   Textabsatzes haelt die Knoepfe nur so lange im Blick, wie die Rechnung
   aufgeht; sie haengt an drei Groessen (Innenabstand, Abstand, Knopfhoehe),
   von denen jede spaeter einzeln geaendert werden kann. Auf 320 px
   Viewporthoehe bei 200 % fuellt allein dieses Beiwerk gemessen 276 der
   288 px, die 90vh hergeben - dort geht keine Rechnung mehr auf.

   Die Knopfleiste klebt deshalb am unteren Rand des Bannerausschnitts,
   unabhaengig davon, wie viel Text darueber steht. Der Banner darf dann
   ruhig selbst scrollen: der Text ist vollstaendig erreichbar, und
   "Akzeptieren"/"Ablehnen" sind es immer.

   Zur Rechnung: bottom ist var(--sp-md), nicht 0 - genau der Innenabstand,
   den der Banner unten ohnehin hat. Die Leiste steht dadurch im geklebten
   Zustand exakt dort, wo sie im ruhenden steht; es gibt keinen Sprung.

   Die beiden Schatten sind KEIN Schmuck, sondern der Ersatz fuer Polster:
   ohne sie scrollt Text sichtbar durch den 2rem-Abstand ueber der Leiste
   und durch den Innenabstand unter ihr. Sie sind gleichfarbig, ohne
   Weichzeichnung und ohne Streuung, decken also genau diese beiden
   Streifen ab - und anders als padding/margin veraendern sie die Groesse
   der Randbox NICHT. Das ist hier die Bedingung: die Bannerhoehe geht in
   den K2-Bodenabstand ein (body:has(.cookie-banner.active), 260px), und
   die Ausrichtung in der Flexzeile darf sich bei Desktopbreite nicht
   verschieben. Bei Desktopbreite steht die Leiste neben dem Text statt
   darunter; dort deckt der Schatten nur die Leistenbreite ab. Das ist
   hingenommen: der Banner ueberschreitet bei dieser Breite die 90vh nicht,
   die Leiste klebt also gar nicht. */
.cookie-banner__btns {
  display: flex;
  gap: 0.75rem;
  position: sticky;
  bottom: var(--sp-md);
  z-index: 1;
  background: var(--clr-dark);
  box-shadow: 0 calc(var(--sp-md) * -1) 0 var(--clr-dark), 0 var(--sp-md) 0 var(--clr-dark);
}

/* M-1/C7/C11: "Ablehnen" und "Karte laden" tragen inline
   style="border-color: var(--clr-border); color: var(--clr-text-muted);"
   (HTML, von WP3 nicht aenderbar). Der Rand war mit 1.26-1.36:1 praktisch
   unsichtbar (Ziel 3:1); im Hover-Zustand schlug .btn--outline:hover zwar
   den Hintergrund auf Weiss um, das Inline-color blieb aber ueber der
   :hover-Regel stehen und ergab 2.32:1 hellgrauen Text auf Weiss. Beides
   braucht !important, um die Inline-Deklaration zu schlagen. */
[data-cookie-reject],
.map-placeholder__btn {
  border-color: var(--clr-grey-light) !important;
}

[data-cookie-reject]:hover,
.map-placeholder__btn:hover {
  color: var(--clr-dark) !important;
}

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: var(--clr-red);
  color: var(--clr-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: background var(--tr-base), color var(--tr-base), border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
  cursor: pointer;
  box-shadow: var(--shadow-glow-red);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--clr-red-light);
  transform: translateY(-3px);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* M-6: die Cookie-Notiz (z-index 1500, fixed am unteren Rand) liegt bei
   jedem Erstbesuch ueber dem Back-to-top-Button (z-index 900, ebenfalls
   unten rechts) - der Button war komplett verdeckt und nicht klickbar.
   Die Banner-Hoehe variiert je nach Zeilenumbruch (118-248px gemessen),
   ein fester Versatz waere fragil - solange die Notiz offen ist, blenden
   wir den Button stattdessen aus. */
body:has(.cookie-banner.active) .back-to-top {
  display: none;
}

/* K2: derselbe Ueberdeckungs-Effekt trifft auch die Footer-Legal-Links
   (Impressum/Datenschutz/AGB/Cookie-Einstellungen) bei Desktop-Breite - der
   fixierte Banner liegt beim Scrollen zum Seitenende genau ueber der
   Footer-Leiste, Playwrights Klickbarkeitspruefung schlaegt dort
   nachweislich fehl ("cookie-banner intercepts pointer events"). 260px
   liegt ueber der gemessenen maximalen Bannerhoehe (118-248px je nach
   Zeilenumbruch) und schafft Platz am Seitenende, solange die Notiz aktiv
   ist. */
body:has(.cookie-banner.active) {
  padding-bottom: 260px;
}

/* ---------- Google Maps 2-Click ---------- */
.map-container {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--clr-dark-2);
}

.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  color: var(--clr-text-muted);
  text-align: center;
  padding: var(--sp-md);
}

.map-placeholder svg {
  width: 48px;
  height: 48px;
  color: var(--clr-red);
}

.map-placeholder p {
  font-size: var(--fs-small);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Success/Error Messages ---------- */
.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-md);
  font-size: 0.95rem;
}

.alert--success {
  background: rgba(21,128,61,.1);
  border: 1px solid #15803d;
  color: #15803d;
}

.alert--error {
  background: rgba(218,0,25,.1);
  border: 1px solid var(--clr-red);
  color: var(--clr-red-dark);
}

/* ============================
   LEGAL CONTENT
   ============================ */
.legal-content h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--clr-text);
  margin-bottom: var(--sp-md);
}

.legal-content h3 {
  font-family: var(--ff-heading);
  font-size: 1.4rem;
  color: var(--clr-red);
  margin: var(--sp-md) 0 var(--sp-xs);
  letter-spacing: 0.02em;
}

.legal-content h4 {
  font-size: 1.1rem;
  color: var(--clr-text);
  margin: var(--sp-sm) 0 var(--sp-xs);
}

.legal-content p {
  color: var(--clr-grey-light);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.legal-content ul {
  color: var(--clr-grey-light);
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-content li {
  margin-bottom: .4rem;
}

.legal-content a {
  color: var(--clr-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content a:hover {
  color: var(--clr-text);
}

/* Muster-Widerrufsformular: abgesetzter heller Kasten.
   Der Fliesstext braucht hier --clr-grey-on-light, weil
   --clr-grey-light auf #f5f5f5 nur 4,43:1 erreicht und AA verfehlt. */
.legal-content .muster-widerruf {
  background: var(--clr-light);
  border: 1px solid var(--clr-light-2);
  border-radius: var(--radius-md);
  padding: var(--sp-md);
  margin: var(--sp-md) 0;
}

.legal-content .muster-widerruf p {
  color: var(--clr-grey-on-light);
}

/* ---------- Maschinen-Galerie (fuhrpark.html) ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}
.gallery__item {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.gallery__caption {
  /* --clr-text-muted ist laut DESIGN.md nur fuer dunklen Grund bestimmt
     (2,33:1 auf --clr-light, AA-Fehlschlag bei 14px). .section--grey ist
     eine hellgraue Flaeche - dafuer dokumentiert DESIGN.md
     --clr-grey-on-light (4,98:1), siehe auch das gleiche Muster bei
     .timeline__text (C4/H-5) und im Footer. */
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--clr-grey-on-light);
}
@media (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}