/* ==========================================================================
   402PAYMENT — Homepage (10 Sektionen; Kontakt-Sektion entfallen 2026-07-30)
   Farben:  Signal-Rot #FF4436 · Navy #0B0B23 · Weiß #FFFFFF
   (Quelle: brand-assets/colors.css. Die Grautöne unten sind noch nicht auf die
   Drei-Farben-Regel aus DESIGN.md §2 umgestellt — offener Punkt.)
   Font:    Segoe UI + System-Fallback (kein Web-Font)
   Radius:  999px (Buttons, MD3-Pille) · 8px (Kacheln) · 12px (Karten/Bildcontainer)
   JS:      vier Dateien (DESIGN.md §6.2/§6.3/§7) — mailchimp-popup.js (Whitepaper-Popup),
            button-ripple.js (MD3-Ripple), process-timeline.js (Sticky-Scroll-Reveal)
            und scroll-reveal.js (Einblenden von [data-reveal] beim Scrollen).
            Alle als Progressive Enhancement. Ticker (CSS-Marquee) und das
            Case-Study-Akkordeon (Radio-Buttons) bleiben vollständig JS-frei.
   ========================================================================== */

:root {
  --primary: #FF4436;
  --primary-hover: #E13A2C;
  --dark: #0B0B23;
  --light: #FFFFFF;
  --gray: #F5F5F5;
  --border: #E4E4EA;
  --muted: #5C5C74;
  --muted-light: #A6B0CC;

  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  --container: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* MD3-Physik (DESIGN.md §6.2): Spring-Back mit Overshoot beim Loslassen,
     Standard-Easing für das Hineindrücken und den Ripple. */
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1.2);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font); color: var(--dark); background: var(--light); line-height: 1.6; -webkit-font-smoothing: antialiased; }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.01em; font-weight: 700; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ SECTIONS ============ */
.section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
.section--alt { background: var(--gray); }
.section--dark { background: var(--dark); color: var(--light); }

.section__head { max-width: 720px; margin: 0 auto 2.75rem; text-align: center; }
.section__head h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.section__sub { margin-top: 0.85rem; font-size: 1.0625rem; color: var(--muted); }
.section--dark .section__sub { color: var(--muted-light); }
/* Jede Sektion endet mit einem Whitepaper-CTA (Button) plus optionalem, bewusst
   zurückhaltendem Textlink zur nächsten Sektion (DESIGN.md §6.1). */
.section__cta {
  margin-top: 2.75rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 0.9rem 1.75rem;
}
.section__link {
  font-weight: 600; font-size: 0.9375rem; color: var(--muted);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.section__link:hover { color: var(--primary); border-bottom-color: var(--primary); }
.section--dark .section__link { color: var(--muted-light); }
.section--dark .section__link:hover { color: #fff; border-bottom-color: #fff; }

/* ============ BUTTONS — MD3-inspirierter Shape-Morph + Ripple (DESIGN.md §6.2) ============
   Ruhezustand ist eine Pille. Beim Drücken zieht sich der Radius zusammen (schnell,
   ease-standard), beim Loslassen federt er mit Overshoot zurück (ease-spring).
   Der Ripple wird von button-ripple.js eingefügt — ohne JS bleibt alles andere intakt.
   Farben unverändert: nur Rot / Navy / Weiß.                                             */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: inherit; font-weight: 600; font-size: 0.9375rem; line-height: 1;
  padding: 0.8rem 1.6rem; border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.45s var(--ease-spring), border-radius 0.45s var(--ease-spring);
}
/* Squish beim Drücken: schnell rein (ease-standard), federnd zurück (Basis-
   Transition oben). Die volle Liste wird hier wiederholt — würde man nur
   border-radius angeben, verlöre der Button beim Drücken alle anderen
   Übergänge. */
.btn:active {
  border-radius: var(--radius);
  transition: transform 0.1s var(--ease-standard), border-radius 0.1s var(--ease-standard),
              background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--lg:active { border-radius: var(--radius-lg); }

.btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--dark); border-color: var(--dark); }
.btn--outline:hover { background: var(--dark); color: #fff; }
.btn--outline-light { color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--outline-light:hover { background: #fff; color: var(--dark); border-color: #fff; }
/* Navy-Raise-Variante (MD3 "secondary") — für Buttons auf hellem Grund ohne Rot-Signal. */
.btn--secondary { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn--secondary:hover { background: #1a1a3d; border-color: #1a1a3d; transform: translateY(-1px); }
.btn--lg { padding: 1rem 2rem; font-size: 1.0625rem; }

/* Press-Feedback auf scale, NICHT auf border-radius: die Pille liegt bei 999px,
   optisch gekappt wird sie aber schon bei halber Buttonhöhe (~22px). Der
   Overshoot des Springs landete damit in einem unsichtbaren Bereich — der
   „Bounce" war nie zu sehen. Auf scale federt er zuverlässig.
   Steht absichtlich NACH den :hover-Regeln der Varianten: gleiche Spezifität,
   also entscheidet die Reihenfolge, und Drücken soll Hover überschreiben. */
.btn:active { transform: scale(0.96); }

/* Ripple: negativer z-index liegt über dem Button-Hintergrund, aber unter dem Label. */
.btn__ripple {
  position: absolute; z-index: -1; pointer-events: none;
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(closest-side, currentColor 65%, transparent 100%);
  animation: btn-ripple 450ms var(--ease-standard) forwards;
}
@keyframes btn-ripple {
  from { transform: translate(-50%, -50%) scale(0);   opacity: 0.28; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* ============ NAV ============ */
.nav { position: sticky; top: 0; z-index: 100; background: var(--light); border-bottom: 1px solid var(--border); }
.nav__inner { max-width: var(--container); margin: 0 auto; padding: 0.8rem var(--gutter); display: flex; align-items: center; gap: 1.25rem; }
.nav__logo-wide { height: 34px; width: auto; }
.nav__logo-stacked { display: none; height: 40px; width: auto; }
/* Kein Burger-Menü und keine Link-Leiste (Kundenwunsch 2026-07-30): die Nav
   besteht auf ALLEN Breakpoints nur aus Logo + „Termin buchen". Der CTA wird
   deshalb rechts ausgerichtet und nirgends ausgeblendet. */
.nav__cta { margin-left: auto; white-space: nowrap; }

/* ============ SEKTION 1 · HERO ============ */
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.05rem); }
.hero__subtitle { margin-top: 0.85rem; font-size: 1.0625rem; font-weight: 600; color: var(--primary); }
.hero__subline { margin-top: 1.1rem; font-size: 1.0625rem; color: var(--muted); max-width: 48ch; }
.hero__usps { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.hero__usps li { position: relative; padding-left: 1.75rem; font-weight: 500; }
.hero__usps li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__socialproof { margin-top: 1.5rem; font-size: 0.875rem; color: var(--muted); }

/* Pille über der Headline (Vorlage). Mono-Label nach DESIGN.md §5 „Eyebrows",
   Rot nur als Rahmen und Text — keine rote Fläche, das wäre zu laut so weit oben. */
.hero__badge {
  display: inline-block; margin-bottom: 1.1rem;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary); border: 1px solid var(--border);
  background: var(--light); border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
}

/* Collage: links zwei gestapelte Kacheln, rechts eine hohe über beide Zeilen.
   Die Zeilenhöhen sind gleich (1fr 1fr), sodass die rechte Kachel exakt so hoch
   wird wie die beiden linken plus Spalt — genau das Bild aus der Vorlage. */
.hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.hero__tile {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radius-lg); display: block;
}
.hero__tile--a { grid-column: 1; grid-row: 1; }
.hero__tile--b { grid-column: 1; grid-row: 2; }
.hero__tile--c { grid-column: 2; grid-row: 1 / span 2; }

/* ============ EINBLENDEN BEIM SCROLLEN ([data-reveal]) ====================
   Generisch für alle Sektionen. Der Ausgangszustand hängt an .reveal-ready auf
   <html>, das AUSSCHLIESSLICH scroll-reveal.js setzt — ohne JS (oder bei
   reduzierter Bewegung) steht alles sofort sichtbar da. Niemals opacity: 0 in
   die Basis-CSS ziehen, sonst verschwindet bei einem JS-Fehler die halbe Seite.

   Vorgänger war `animation-timeline: view()` (rein CSS). Rausgeflogen, weil es
   nur in einem Teil der Browser lief (Kundenmeldung 2026-07-30). */
.reveal-ready [data-reveal] {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0, 0, 1);
}
.reveal-ready [data-reveal="left"]  { transform: translateX(-4rem); }
.reveal-ready [data-reveal="right"] { transform: translateX(4rem); }
.reveal-ready [data-reveal="up"]    { transform: translateY(1.75rem); }
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Leichte Staffelung, wo zwei Elemente zusammen auftauchen. */
.reveal-ready [data-reveal-delay] { transition-delay: 0.14s; }

/* ============ SEKTION 2 · CHALLENGES — wechselseitig ausgerichtet ==========
   Gestapelte Punkte, abwechselnd links- und rechtsbündig, die beim Scrollen von
   der jeweiligen Seite einfliegen (Kundenwunsch 2026-07-30). Die Richtung steht
   als data-reveal="left|right" im Markup, nicht hier. */
/* Keine Karten (Kundenwunsch 2026-07-30): flach auf dem Sektionsgrund, nur eine
   Haarlinie an der jeweils führenden Kante gibt dem Wechsel Struktur. */
.challenges { display: grid; gap: clamp(1.75rem, 3.4vw, 2.75rem); list-style: none; }
.challenge {
  max-width: min(100%, 34rem);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--border);
}
.challenge:nth-child(even) {
  margin-left: auto; text-align: right;
  padding-left: 0; padding-right: clamp(1rem, 2vw, 1.5rem);
  border-left: 0; border-right: 2px solid var(--border);
}
.challenge__num {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--primary); margin-bottom: 0.5rem;
}
.challenge h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.2; margin-bottom: 0.55rem; }
.challenge > p:not(.challenge__num) { color: var(--muted); font-size: 1rem; line-height: 1.65; }

/* Das Einfliegen selbst steckt im generischen [data-reveal]-System weiter unten. */

/* ============ CARDS (Challenges / Solution / Case Studies) ============ */
.cards { display: grid; gap: 1.5rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--light); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; }
.section--alt .card { background: var(--light); }
.card h3 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.card p { color: var(--muted); font-size: 0.9875rem; }
.card--todo { background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 10px, #f2f2f4 10px, #f2f2f4 20px); }
.tag-todo { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: var(--muted); padding: 0.2rem 0.5rem; border-radius: 4px; margin-bottom: 0.75rem; }
.case-fields { margin-top: 1rem; display: grid; gap: 0.35rem; font-size: 0.8125rem; }
.case-fields dt { font-weight: 700; color: var(--dark); }
.case-fields dd { color: var(--muted); margin-bottom: 0.4rem; }

/* ============ SEKTION 5 · CASE-STUDY-AKKORDEON ============================
   Aufklappende Panels. Auswahl läuft über versteckte Radio-Buttons im Markup:
   damit ist ein Panel per Klick UND per Tap wählbar und die Tastaturbedienung
   ergibt sich aus der Radiogruppe. Kein JS.

   Zwei Layouts:
   - bis 1024px (Mobile + Tablet): VERTIKAL gestapelt, jedes Panel per Tap auf
     die Kennzahl-Kachel aufklappbar (:hover greift auf Touch nicht).
   - ab 1025px: horizontale Akkordeon-Reihe mit gestaffelten Höhen, zusätzlich
     öffnet Hover ein Panel.
   Farben: nur Navy / Rot / Weiß. Rot trägt genau EIN Panel (Rarity-Rule §2). */
.cases { display: grid; gap: 1rem; }

/* Radio bleibt fokussierbar (kein display:none), ist aber unsichtbar. */
.case__radio {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; margin: 0; pointer-events: none;
}

.case {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  /* Hellgrau statt Weiß: die Sektion selbst ist weiß, reine weiße Panels
     verschwinden darin bis auf den Rand. */
  background: var(--gray); color: var(--dark);
}
/* Farbvarianten — ein rotes Feature-Panel, sonst Navy/Hellgrau im Wechsel. */
.case--feature { background: var(--primary); border-color: var(--primary); color: var(--dark); }
.case--dark { background: var(--dark); border-color: var(--dark); color: var(--light); }

/* Sichtbarer Fokusring auf der Kachel, wenn das zugehörige Radio Fokus hat. */
.case__radio:focus-visible + .case { outline: 2px solid var(--primary); outline-offset: 2px; }

.case__peek, .case__open { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.case__peek { cursor: pointer; }
.case__metric { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; line-height: 1; display: block; }
/* 24ch, nicht 16ch: mit letter-spacing 0.12em ist ein „ch" hier deutlich breiter
   als das Zeichen, sonst bricht schon „VERTRIEBSKOSTEN" im weiten offenen Panel
   um. Die schmalen geschlossenen Kacheln überschreiben das weiter unten.
   hyphens greift über lang="de" am <html>; overflow-wrap ist nur das Netz für
   Wörter, für die das Wörterbuch keine Trennstelle kennt — die Labels sind
   bewusst kurz gehalten, damit es gar nicht erst greifen muss. */
.case__metric-label {
  margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; max-width: 24ch; display: block;
  hyphens: auto; overflow-wrap: break-word;
}

.case__eyebrow { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.case__title { margin-top: 0.5rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.1; }
.case__desc { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; opacity: 0.9; max-width: 46ch; }
.case__link {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.case__stat { margin-top: auto; }
.case__stat .case__metric { font-size: clamp(2.75rem, 6vw, 4rem); }

/* Bildfläche: bis echtes, lizenziertes ÖPNV-Bildmaterial vorliegt dieselbe
   Schraffur wie .card--todo, damit nichts nach fertigem Inhalt aussieht. */
.case__media {
  border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.1);
  background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 10px, #f2f2f4 10px, #f2f2f4 20px);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 0.75rem;
  min-height: 150px;
}

/* --- Mobile + Tablet (bis 1024px): vertikal, per Tap aufklappbar ----------
   Die Kachel wird zur Kopfzeile mit Kennzahl links und Plus/Minus rechts.
   Geschlossen ist nur die Kopfzeile sichtbar. */
.case__peek {
  display: flex; align-items: baseline; gap: 0.75rem;
}
.case__peek::after {
  content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: 700;
  line-height: 1; opacity: 0.7;
}
.case__radio:checked + .case .case__peek::after { content: "–"; }
.case__peek .case__metric-label { margin-top: 0; max-width: 22ch; }
.case__open { display: none; padding-top: 0; }
.case__radio:checked + .case .case__open { display: block; }
.case__figure { margin-top: 1.25rem; }
/* Die Kennzahl steht schon in der Kopfzeile — im Body wäre sie doppelt. */
.case__stat { display: none; }

/* --- Ab 1025px: horizontale Akkordeon-Reihe ------------------------------ */
@media (min-width: 1025px) {
  .cases { display: flex; align-items: flex-end; gap: 0.75rem; }

  .case {
    flex: 1.5 1.5 0; min-width: 0; height: var(--h-closed);
    transition: flex-grow 0.45s var(--ease-spring), height 0.45s var(--ease-spring);
  }
  /* Gestaffelte Treppe der geschlossenen Höhen (wie in der Vorlage).
     nth-of-type, nicht nth-child: zwischen den <article> stehen die <input>. */
  .case:nth-of-type(1) { --h-closed: 280px; }
  .case:nth-of-type(2) { --h-closed: 320px; }
  .case:nth-of-type(3) { --h-closed: 360px; }
  .case:nth-of-type(4) { --h-closed: 400px; }
  .case:nth-of-type(5) { --h-closed: 440px; }

  /* Kachel zurück auf vertikal, ohne Plus/Minus (das ist die Touch-Affordanz). */
  .case__peek {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    position: absolute; inset: 0; opacity: 1; transition: opacity 0.3s ease; cursor: default;
  }
  .case__peek::after { content: none; }
  .case__peek .case__metric-label { margin-top: 0.5rem; max-width: 16ch; }

  .case__open {
    display: grid; grid-template-rows: auto 1fr;
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    padding: clamp(1.25rem, 2.5vw, 1.75rem); transition: opacity 0.3s ease;
  }
  .case__figure {
    margin-top: 1.25rem; display: grid; grid-template-columns: 1.05fr 1fr;
    gap: 1.25rem; align-items: end;
  }
  .case__stat { display: block; }
  .case__media { min-height: 0; height: 100%; max-height: 200px; }

  /* Gewähltes Panel (Radio) ist offen — Panel 1 ist per checked der Standard. */
  .case__radio:checked + .case { flex-grow: 4.8; height: 470px; }
  .case__radio:checked + .case .case__peek { opacity: 0; }
  .case__radio:checked + .case .case__open { opacity: 1; pointer-events: auto; }

  /* Hover schlägt die Auswahl — steht nach den :checked-Regeln, gleiche
     Spezifität, also entscheidet die Reihenfolge. */
  .cases .case:hover { flex-grow: 4.8; height: 470px; }
  .cases .case:hover .case__peek { opacity: 0; }
  .cases .case:hover .case__open { opacity: 1; pointer-events: auto; }

  /* Liegt der Zeiger auf einem anderen Panel, klappt das gewählte wieder zu. */
  .cases:has(.case:hover) .case__radio:checked + .case:not(:hover) { flex-grow: 1.5; height: var(--h-closed); }
  .cases:has(.case:hover) .case__radio:checked + .case:not(:hover) .case__peek { opacity: 1; }
  .cases:has(.case:hover) .case__radio:checked + .case:not(:hover) .case__open { opacity: 0; pointer-events: none; }
}

/* Reduzierte Bewegung: Auf-/Zuklappen bleibt, nur ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .case, .case__peek, .case__open { transition: none; }
}

/* Abschluss-Banner der Sektion: Navy-Pille mit Whitepaper-CTA (§6.1). */
.cases-banner {
  margin-top: 1.5rem; background: var(--dark); color: var(--light);
  border-radius: var(--radius-pill); padding: 1.1rem clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.9rem 1.5rem; text-align: center;
}
.cases-banner p { font-size: 0.9375rem; line-height: 1.4; }
@media (max-width: 560px) {
  .cases-banner { border-radius: var(--radius-lg); }
  .cases-banner .btn { width: 100%; }
}

/* ============ SEKTION 4 · STICKY-SCROLL-REVEAL ============================
   Adaption der gelieferten StickyScroll-Komponente. Zwei Modi, ein Markup:

   1. BASIS (nur CSS, ohne JS): Kasten mit fester Höhe, die Schrittspalte ist
      eine eigene Scrollfläche. Vollständig benutzbar, kein kaputter Zustand.
      Kein overscroll-behavior: contain — unten angekommen reicht das Mausrad
      an die Seite weiter, sonst wäre die Fläche eine Scroll-Falle.

   2. GEPINNT (.is-pinned, setzt NUR process-timeline.js): der Kasten klebt per
      position:sticky in der Fensermitte, die Laufstrecke .sticky-scroll-pin
      bekommt eine Inline-Höhe, und der normale Seitenscroll schiebt den Text
      im Kasten nach oben. Die Fläche wird dabei auf overflow:hidden gestellt —
      es gibt genau ein Scrollrad, nämlich das der Seite.

   Progressive Enhancement: das Abdunkeln hängt an .is-enhanced, das NUR das
   Script setzt. Ohne JS sind alle Schritte voll lesbar. */
.sticky-scroll-pin { position: relative; }

/* Gepinnt: der Kasten steht mittig im Fenster still, die Seite läuft an ihm
   vorbei. max() hält ihn auch auf niedrigen Fenstern unter der Sticky-Nav. */
.sticky-scroll-pin.is-pinned .sticky-scroll {
  position: sticky;
  top: max(5.5rem, calc(50vh - 13rem));
}
.sticky-scroll-pin.is-pinned .sticky-scroll__steps { overflow: hidden; padding-right: 0; }

.sticky-scroll {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--dark); color: var(--light);
  border-radius: var(--radius-lg);
  height: 26rem;
}

/* Die eigentliche Scrollfläche. min-height:0 ist Pflicht, sonst wächst das
   Grid-Item auf seinen Inhalt statt zu scrollen. */
.sticky-scroll__steps {
  display: grid; gap: 0;
  min-height: 0; overflow-y: auto;
  padding-right: 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 68, 54, 0.55) rgba(255, 255, 255, 0.08);
}
.sticky-scroll__steps::-webkit-scrollbar { width: 6px; }
.sticky-scroll__steps::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill); }
.sticky-scroll__steps::-webkit-scrollbar-thumb { background: rgba(255, 68, 54, 0.55); border-radius: var(--radius-pill); }

.sticky-step { padding: 1.25rem 0; max-width: 46ch; }
.sticky-step__num {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--primary);
}
.sticky-step__title { margin-top: 0.75rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; }
.sticky-step__desc { margin-top: 0.9rem; font-size: 1rem; line-height: 1.65; color: var(--muted-light); }

/* Aktiv/inaktiv nur bei aktivem Script. */
.sticky-scroll.is-enhanced .sticky-step { opacity: 0.3; transition: opacity 0.35s ease; }
.sticky-scroll.is-enhanced .sticky-step.is-active { opacity: 1; }

/* Visual-Kachel: gestapelte Kacheln, gekreuzt eingeblendet. */
.sticky-scroll__visual { display: none; }
.sticky-visual {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; border-radius: var(--radius);
  background: var(--primary); color: var(--dark);
  opacity: 0; transition: opacity 0.35s ease;
}
.sticky-visual.is-active { opacity: 1; }
.sticky-visual__num { font-size: 3rem; font-weight: 700; line-height: 1; }
.sticky-visual__label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Ab 1025px zweispaltig mit der Kachel rechts (wie `hidden lg:block` der Vorlage).
   Die Kachel muss nicht mehr sticky sein: der Kasten steht ohnehin still, sie
   sitzt einfach mittig in der rechten Spalte. Höhe bewusst kleiner als der
   Kasten — eine 26rem hohe rote Fläche wäre gegen die Rarity-Regel. */
@media (min-width: 1025px) {
  /* Textspalte auf Lesebreite festgenagelt statt 1fr, damit der Scrollbalken
     direkt neben dem Text sitzt und nicht frei in der Fläche schwebt. */
  .sticky-scroll {
    grid-template-columns: minmax(0, 30rem) 18rem;
    justify-content: space-between;
    height: 28rem;
  }
  .sticky-step { max-width: none; }
  .sticky-scroll-pin.is-pinned .sticky-scroll { top: max(6rem, calc(50vh - 14rem)); }
  .sticky-scroll__visual {
    display: block; position: relative; align-self: center;
    height: 13rem; border-radius: var(--radius); overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-scroll.is-enhanced .sticky-step { transition: none; }
  .sticky-visual { transition: none; }
}

/* ============ SEKTION 6 · TICKER (CSS-Marquee) ============ */
.ticker {
  overflow: hidden; position: relative; padding: 0.9rem 0; margin-bottom: 3rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker-scroll 70s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
/* Der Punkt-Trenner ist mit den Logos entfallen: zwischen Bildmarken braucht es
   keine Interpunktion, und 18 rote Punkte wären gegen die Rarity-Regel. Die
   Typo-Angaben bleiben — sie greifen als Fallback, wenn ein Logo nicht lädt und
   der alt-Text einspringt. */
/* Jedes Logo bekommt dieselbe Box und wird darin eingepasst — die Seitenverhält-
   nisse reichen von 3,4:1 (Rheinbahn) bis hochkant (VVM). Nur eine feste Höhe
   zu setzen ließe die fast quadratischen Marken halb so breit erscheinen wie die
   liegenden; die Box gibt der Reihe einen gleichmäßigen Takt. */
.ticker__item {
  font-size: 0.9375rem; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  width: 10rem; padding: 0 0.75rem; flex: none;
}
.ticker__logo {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 3.25rem; object-fit: contain;
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .ticker__item[aria-hidden="true"] { display: none; }
  .ticker__item::after { display: none; }
}

/* ============ SEKTION 6 · TESTIMONIALS ============ */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.testimonial { background: var(--light); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; }
.testimonial__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 1rem; }
.avatar--lg { width: 64px; height: 64px; font-size: 1.25rem; margin-bottom: 1rem; }
.avatar--xl { width: 96px; height: 96px; font-size: 1.75rem; }
.testimonial__cite { display: flex; flex-direction: column; font-style: normal; }
.testimonial__name { font-weight: 700; }
.testimonial__role { font-size: 0.8125rem; color: var(--muted); }
.testimonial__date { font-size: 0.75rem; color: var(--muted-light); margin-top: 0.15rem; }
.testimonial__quote { font-size: 1rem; color: var(--dark); }

/* ============ SEKTION 7 · ANSPRECHPARTNERIN (eine Kontaktperson, kein Carousel) ============ */
.contact-person {
  max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2rem); align-items: start;
  background: var(--light); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.contact-person h3 { font-size: 1.35rem; }
.contact-person__role { color: var(--primary); font-weight: 600; font-size: 0.9375rem; margin: 0.25rem 0 0.9rem; }
.contact-person__desc { color: var(--muted); font-size: 0.9875rem; max-width: 52ch; }
.contact-person__channels { margin-top: 1.25rem; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.contact-person__channels > div { display: grid; grid-template-columns: 90px 1fr; gap: 0.75rem; }
.contact-person__channels dt { font-weight: 700; }
.contact-person__channels dd { color: var(--muted); }
.contact-person__actions { margin-top: 1.5rem; }

/* ============ SEKTION 8 · WHITEPAPER ============ */
.whitepaper__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.wp-cover {
  aspect-ratio: 3 / 4; border-radius: var(--radius-lg); background: linear-gradient(150deg, #0C2050, #16305E);
  border: 1px solid rgba(255,255,255,0.12); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35); max-width: 320px;
}
.wp-cover__label { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--primary); font-weight: 700; }
.wp-cover__title { font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.25; }
.wp-cover__brand { font-size: 0.9rem; font-weight: 700; color: var(--muted-light); letter-spacing: 0.04em; }
.whitepaper__copy h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
/* Inline-Formular entfällt — Felder liegen im Mailchimp-Popup (siehe mailchimp-popup.js). */
.whitepaper__actions { margin-top: 1.75rem; }
.wp-form__legal { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-light); line-height: 1.5; }

/* ============ SEKTION 9 · ACTIVITIES ============ */
.activities { max-width: 820px; margin: 0 auto; display: grid; gap: 0.75rem; }
.activity { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 1rem; background: var(--light); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.activity__type { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.activity--linkedin .activity__type { color: var(--primary); }
.activity__title { font-weight: 600; color: var(--dark); }
.activity__link { font-size: 0.8125rem; color: var(--muted-light); white-space: nowrap; }

/* Die Kontakt-Sektion (.contact-info) ist entfallen (Kundenwunsch 2026-07-30);
   Mail/Telefon/Termin stehen jetzt in .contact-person__channels bei #about-us. */

/* ============ SEKTION 11 · FINAL CTA ============ */
.final-cta { text-align: center; max-width: 720px; }
.final-cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.final-cta__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* ============ FOOTER ============ */
.footer { background: var(--dark); padding: 2.5rem 0; }
/* Grid statt flex/space-between: bei space-between hängt die Position des
   Copyrights an den Breiten von Logo und Linkleiste — die Linkleiste ist breiter,
   also saß der Text 79px links der Mitte. Mit zwei gleich breiten 1fr-Spalten
   außen liegt die auto-Spalte in der Mitte exakt mittig. minmax(0, 1fr), damit
   ein breiter Inhalt seine Spur nicht aufbläht und die Symmetrie kippt. */
.footer__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 1.5rem;
}
.footer__logo { justify-self: start; }
.footer__copyright { justify-self: center; text-align: center; }
.footer__links { justify-self: end; }
/* Wide-Logo (1386×344) auf 36px Höhe, Breite folgt dem Seitenverhältnis.
   invert dreht die farbige Wortmarke auf Weiß für den navy Footer — siehe
   Kommentar im Markup: die „weiße" Datei ist quadratisch und unbrauchbar. */
.footer__logo { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer__copyright { color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.footer__links { display: flex; gap: 1.5rem; }
.footer__links a { color: rgba(255,255,255,0.6); font-size: 0.875rem; }
.footer__links a:hover { color: #fff; }

/* ============ BREAKPOINTS ============ */
@media (max-width: 1000px) {
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Kompaktes gestapeltes Logo, der CTA bleibt sichtbar (kein Burger-Menü). */
  .nav__logo-wide { display: none; }
  .nav__logo-stacked { display: block; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__subline { max-width: none; }

  /* Ohne horizontalen Versatz (die Punkte sind hier ohnehin 100% breit) bliebe
     vom Wechsel nur die Textausrichtung übrig — und rechtsbündiger Fließtext
     über die volle Handybreite liest sich schlecht. Die Seitenzuordnung trägt
     auf Mobil allein die Einflug-Richtung. */
  .challenge:nth-child(even) { text-align: left; }

  .testimonials { grid-template-columns: 1fr; }
  .whitepaper__grid { grid-template-columns: 1fr; }
  .wp-cover { max-width: 260px; margin: 0 auto; }
  .activity { grid-template-columns: 1fr; gap: 0.35rem; }
  .contact-person { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .contact-person__desc { max-width: none; }
  .contact-person__channels > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__logo, .footer__links { justify-self: center; }
}
@media (max-width: 480px) {
  .cards--3 { grid-template-columns: 1fr; }
  .hero__actions .btn, .final-cta__actions .btn { width: 100%; }
  .whitepaper__actions .btn, .contact-person__actions .btn { width: 100%; }
  .section__cta { flex-direction: column-reverse; gap: 1rem; }
  .section__cta .btn { width: 100%; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  /* Shape-Morph und Ripple sind rein dekorativ — vollständig abschalten.
     Der Button bleibt in allen Zuständen als Pille bestehen. */
  .btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
  .btn:active, .btn--lg:active { border-radius: var(--radius-pill); transition: none; }
  .btn--primary:hover, .btn--secondary:hover { transform: none; }
  .btn__ripple { display: none; }
  html { scroll-behavior: auto; }
}