/* ==========================================================================
   Opti-Rail GmbH — Design System
   Alle Marken-Farben hängen an --brand. Zum Umfärben nur diese Werte ändern.
   ========================================================================== */

/* --- Schriftart lokal gehostet (DSGVO: keine Verbindung zu Google) --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 750;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 750;
  font-display: swap;
  src: url("../fonts/inter-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;
}

:root {
  /* --- Markenfarbe: Opti-Rail Blau ---------------------------------------
     Übernommen aus dem bisherigen Auftritt:
       #3A7DCF  Identitätsblau (Verlaufsziel)
       #305679  dunkles Marineblau
       #2882EB  Akzentblau
     Nur diese sechs Werte anfassen — der Rest der Seite zieht nach.        */
  --brand: #3a7dcf;
  --brand-600: #2a66b0; /* dunkler: Links und Text auf Weiß (AA-tauglich) */
  --brand-700: #1f4a80;
  --brand-300: #8ab6e8; /* heller: Akzente auf dunklem Grund */
  --brand-100: #d8e6f8;
  --brand-050: #eff5fd;

  /* Marken-Verlauf wie im bisherigen Auftritt: Marineblau → Identitätsblau */
  --brand-gradient: linear-gradient(158deg, #1f3c57 0%, #3a7dcf 100%);

  /* --- Neutrale Skala (blaustichig, damit Dunkelflächen als Marineblau
         gelesen werden statt als Schwarz) --- */
  --ink-900: #0f2337;
  --ink-800: #1b344c;
  --ink-700: #274056;
  --ink-600: #435c73;
  --ink-500: #64798d;
  --ink-400: #8a9bab;
  --ink-300: #b6c2ce;
  --ink-200: #d8dfe7;
  --ink-100: #edf1f5;
  --ink-050: #f6f9fc;
  --white: #ffffff;

  --ok: #0f9d58;
  --warn: #e8a020;

  /* --- Typografie --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.42rem, 1.28rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.72rem, 1.48rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.05rem, 1.65rem + 2vw, 3.35rem);
  --step-5: clamp(2.45rem, 1.8rem + 3.2vw, 4.5rem);

  /* --- Raster & Radius --- */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* --- Schatten --- */
  --sh-sm: 0 1px 2px rgba(11, 14, 20, 0.06), 0 1px 3px rgba(11, 14, 20, 0.04);
  --sh-md: 0 4px 12px rgba(11, 14, 20, 0.07), 0 12px 28px rgba(11, 14, 20, 0.05);
  --sh-lg: 0 12px 32px rgba(11, 14, 20, 0.1), 0 32px 72px rgba(11, 14, 20, 0.09);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset & Basis
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  color: var(--ink-900);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  font-weight: 700;
  text-wrap: balance;
  /* Deutsche Komposita wie "Triebfahrzeugführer/innen" sind länger als manche
     Spalte breit ist und müssen getrennt werden.

     "manual" und nicht "auto": Bei "auto" entscheidet der Browser selbst und
     übergeht dabei die weichen Trennstellen (­) im Text. Gemessen ergab
     das "Triebfahrzeugführ-|er/innen" und "Eisenbahnver-|kehrsunternehmen" —
     das erste ist nicht einmal eine zulässige Trennung, das zweite trennt
     mitten durch das Grundwort statt an der Fuge.

     Mit "manual" gelten ausschließlich die Stellen, die im Text stehen. Wo
     ein langes Wort umbrechen können muss, gehört dort ein ­ hinein.

     Ebenfalls bewusst OHNE overflow-wrap: break-word — das erlaubt Brüche an
     jeder beliebigen Stelle und führte zu Umbrüchen wie "Trieb-f|ahrzeug". */
  hyphens: manual;
}

h1 {
  font-size: var(--step-5);
  letter-spacing: -0.035em;
}
h2 {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

a {
  color: var(--brand-600);
  text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
  text-underline-offset: 3px;
  transition: color 0.18s var(--ease);
}
a:hover {
  color: var(--brand-700);
}

ul,
ol {
  padding-left: 1.2em;
}

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

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

/* ==========================================================================
   Layout-Primitive
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section--ink {
  background: var(--ink-900);
  color: var(--ink-300);
}
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: #fff;
}

.section--soft {
  background: var(--ink-050);
}

.section--brand-soft {
  background: linear-gradient(180deg, var(--brand-050), var(--white));
}

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.stack > * + * {
  margin-top: 1rem;
}

.center {
  text-align: center;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-600);
}
.section--ink .lead {
  color: var(--ink-300);
}

.measure {
  max-width: 62ch;
}
.measure-center {
  max-width: 62ch;
  margin-inline: auto;
}

/* ==========================================================================
   Section-Kopf
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.section--ink .eyebrow {
  color: var(--brand-300);
}
.section--ink .eyebrow::before {
  background: var(--brand-300);
}

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

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  /* brand-600 statt brand: Weiß auf #3A7DCF erreicht nur 4,19:1 und verfehlt
     damit WCAG AA (4,5:1) für Fließtextgrößen. brand-600 liegt bei 5,79:1. */
  --btn-bg: var(--brand-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  font: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
  box-shadow: 0 1px 2px rgba(11, 14, 20, 0.12);
}

.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 38%, transparent);
}

.btn:not(.btn--ghost):not(.btn--on-dark):hover {
  --btn-bg: var(--brand-700);
}
.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  border-color: var(--ink-200);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: var(--ink-900);
  background: var(--ink-900);
  --btn-fg: #fff;
  box-shadow: var(--sh-md);
}

.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.btn--on-dark:hover {
  background: #fff;
  --btn-fg: var(--ink-900);
  border-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.btn--lg {
  padding: 1.1em 2.1em;
  font-size: var(--step-1);
}

.btn--block {
  width: 100%;
}

.btn .icon {
  transition: transform 0.2s var(--ease);
}
.btn:hover .icon {
  transform: translateX(3px);
}

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

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}
.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */

/* Sprungmarke für Tastatur- und Screenreader-Nutzung: überspringt die
   Navigation und führt direkt zum Inhalt. Sie liegt oberhalb des Sichtfelds
   und wird erst beim Anfokussieren heruntergefahren.

   Zusätzlich unsichtbar geschaltet, weil sie sonst beim Überziehen der Seite
   am oberen Rand ("rubber banding") auf Mobilgeräten hervorlugt. Fokussierbar
   bleibt sie dabei — deshalb opacity und nicht visibility oder display. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  opacity: 0;
  z-index: 200;
  background: var(--ink-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  opacity: 1;
  color: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Der Hintergrund der Leiste liegt bewusst auf einer eigenen Ebene und nicht
   auf .site-header selbst. Das mobile Menü ist ein Nachfahre des Headers und
   würde sonst zwangsläufig über dessen Hintergrund gezeichnet — es klappte
   sichtbar vor der Leiste auf statt dahinter hervor.

   Reihenfolge innerhalb des Headers:  Menü (0) → Hintergrund (1) → Leiste (2) */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: background 0.25s var(--ease);
}

/* Was in der Leiste sichtbar bleiben soll, muss über diesen Hintergrund.
   .wrap anzuheben genügt nicht — das mobile Menü liegt darin und stiege mit. */
.brand,
.nav-cta,
.nav-links {
  position: relative;
  z-index: 2;
}
.site-header.is-scrolled {
  border-bottom-color: var(--ink-100);
  box-shadow: 0 1px 20px rgba(11, 14, 20, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink-900);
  font-weight: 750;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  margin-right: auto;
  flex-shrink: 0;
}
.brand img {
  height: 40px;
  width: auto;
}
.brand span small {
  display: block;
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  line-height: 1.4;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* :not(.btn) ist hier keine Kosmetik: Der CTA im Mobilmenü ist ein
   <a class="btn"> innerhalb von .nav-links. Ohne den Ausschluss gewinnt
   diese Regel gegen .btn (0,1,1 vs. 0,1,0) und setzt dunkle Schrift auf
   den blauen Button — 2,1:1 statt 5,8:1. */
.nav-links a:not(.btn) {
  display: block;
  padding: 0.55rem 0.8rem;
  white-space: nowrap;
  border-radius: var(--r-full);
  color: var(--ink-600);
  font-weight: 550;
  font-size: 0.96rem;
  text-decoration: none;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.nav-links a:not(.btn):hover {
  background: var(--ink-100);
  color: var(--ink-900);
}
.nav-links a[aria-current="page"]:not(.btn) {
  color: var(--brand-600);
  background: var(--brand-050);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-full);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 0.24s var(--ease);
}
.nav-toggle span::before {
  top: -6px;
}
.nav-toggle span::after {
  top: 6px;
}
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav-cta .btn {
    display: none;
  }
  .nav-links {
    position: fixed;
    /* Unter den Hintergrund der Leiste, damit das Menü dahinter
       hervorgleitet statt davor aufzuklappen. */
    z-index: 0;
    inset: 4.75rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: #fff;
    padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--ink-100);
    box-shadow: var(--sh-lg);
    transform: translateY(-130%);
    transition: transform 0.32s var(--ease);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }
  .nav-links.is-open {
    transform: translateY(0);
  }
  .nav-links a:not(.btn) {
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
    border-radius: var(--r-md);
  }
  .nav-links .nav-mobile-cta {
    margin-top: 0.75rem;
    display: block;
  }
}

@media (min-width: 1101px) {
  .nav-links .nav-mobile-cta {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--ink-900);
  color: var(--ink-300);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 70% 60% at 78% 8%,
      color-mix(in srgb, var(--brand) 42%, transparent),
      transparent 65%
    ),
    radial-gradient(
      ellipse 55% 55% at 8% 92%,
      color-mix(in srgb, var(--brand) 22%, transparent),
      transparent 62%
    );
  z-index: -2;
}

/* Schienen-Linien im Hintergrund */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 50% 40%,
    #000,
    transparent 75%
  );
  z-index: -1;
}

.hero__inner {
  /* Oben und unten getrennt: Auf schmalen Geräten griff überall der
     Mindestwert von 4.5rem, wodurch zwischen Kopfleiste und der ersten
     Zeile unnötig viel Leere stand. Am oberen Rand reicht deutlich weniger,
     unten bleibt der Abstand zum nächsten Abschnitt erhalten. Auf breiten
     Fenstern ändert sich nichts, dort gilt weiterhin die 11vw-Kurve. */
  padding-block: clamp(2.75rem, 11vw, 8.5rem) clamp(4.5rem, 11vw, 8.5rem);
}

.hero h1 {
  color: #fff;
  /* 20ch statt 17ch: Seit "Triebfahrzeugführer/innen" in der Headline steht,
     erzwang die engere Breite eine vierte Zeile. */
  max-width: 20ch;
}

.hero .lead {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--step-1);
}

.hero--page .hero__inner {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero--page h1 {
  max-width: 20ch;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 1em 0.45em 0.75em;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.6);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(53, 208, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(53, 208, 127, 0);
  }
}

.breadcrumb {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1.25rem;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #fff;
}
.breadcrumb span {
  margin-inline: 0.5em;
  opacity: 0.5;
}

/* ==========================================================================
   Kennzahlen
   ========================================================================== */

.stats {
  display: grid;
  /* 16rem statt 11rem: Die Kennzahlen enthalten mit "Bundesweit" ein langes,
     nicht trennbares Wort. Durfte die Spalte auf 11rem schrumpfen, lief es in
     die Nachbarspalte hinein — ein Rasterelement wird nicht von allein so
     breit wie sein Inhalt.

     Mit 16rem entsteht die vierspaltige Reihe erst ab etwa 1220 Pixeln, wenn
     die Spalten auch breit genug sind; darunter fällt das Raster sauber auf
     drei, zwei und eine Spalte zurück. Nachgemessen in Zehnerschritten von
     340 bis 1920 Pixeln: kein Überlauf, im engsten Fall 18 Pixel Luft.

     Mehr als 16rem geht nicht: Der Container ist auf 1200 Pixel begrenzt,
     bei 17rem käme die vierspaltige Reihe überhaupt nicht mehr zustande. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.stat__value {
  display: block;
  font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 0.4rem;
  /* Auffangnetz für den Fall, dass hier später eine noch längere Angabe
     eingetragen wird. Silbentrennung bricht an zulässigen Stellen
     ("Bundes-weit"); overflow-wrap würde mitten im Wort trennen. Greift nur,
     wenn es sonst nicht passt — im Normalfall bleibt alles einzeilig. */
  hyphens: auto;
}
.stat__label {
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
}

.section--soft .stats,
.section--brand-soft .stats {
  border-top-color: var(--ink-200);
}
.section--soft .stat__value {
  color: var(--ink-900);
}
.section--soft .stat__label {
  color: var(--ink-500);
}

/* ==========================================================================
   Karten
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--ink-200);
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: var(--r-md);
  background: var(--brand-050);
  color: var(--brand-600);
  flex-shrink: 0;
}
.card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.card--ink {
  background: var(--ink-800);
  border-color: var(--ink-700);
  color: var(--ink-300);
}
.card--ink .card__icon {
  background: rgba(255, 255, 255, 0.07);
  color: var(--brand-300);
}
.card--ink:hover {
  border-color: var(--ink-600);
}

.card--flat {
  box-shadow: none;
  background: var(--ink-050);
  border-color: transparent;
}
.card--flat:hover {
  transform: none;
  background: var(--ink-100);
  box-shadow: none;
}

/* Karte, die als Link fungiert */
.card--link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ==========================================================================
   Zielgruppen-Weiche (Dual Path)
   ========================================================================== */

.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.path {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ink-100);
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.path:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  color: inherit;
}

.path::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.path--evu::before {
  background: linear-gradient(150deg, var(--brand-050), transparent 65%);
}
.path--driver::before {
  background: linear-gradient(150deg, var(--ink-050), transparent 65%);
}
.path:hover::before {
  opacity: 1;
}

.path__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.35em 0.9em;
  border-radius: var(--r-full);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.path--evu .path__tag {
  background: var(--brand-100);
  color: var(--brand-700);
}
.path--driver .path__tag {
  background: var(--ink-900);
  color: #fff;
}

.path h3 {
  font-size: var(--step-3);
  margin-bottom: 0.75rem;
}

.path ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.path ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--ink-600);
}
.path ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.path .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Prozess / Ablauf
   ========================================================================== */

.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: step;
}

.step {
  position: relative;
  counter-increment: step;
  padding-top: 3.5rem;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--brand);
  line-height: 1;
}

.step::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 3.5rem;
  right: -1rem;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink-200) 0 10px,
    transparent 10px 18px
  );
}
.step:last-child::after {
  display: none;
}

@media (max-width: 720px) {
  .step::after {
    display: none;
  }
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}
.step p {
  color: var(--ink-500);
  margin-bottom: 0;
  font-size: 0.97rem;
}

.section--ink .step::before {
  color: var(--brand-300);
}
.section--ink .step::after {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0 10px,
    transparent 10px 18px
  );
}
.section--ink .step p {
  color: var(--ink-400);
}

/* ==========================================================================
   Feature-Liste (Checkmarks)
   ========================================================================== */

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.check-list li {
  position: relative;
  padding-left: 2.25rem;
  line-height: 1.55;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--brand-050);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.52em;
  width: 0.6rem;
  height: 0.32rem;
  border-left: 2px solid var(--brand-600);
  border-bottom: 2px solid var(--brand-600);
  transform: rotate(-45deg);
}

.section--ink .check-list li::before {
  background: rgba(255, 255, 255, 0.09);
}
.section--ink .check-list li::after {
  border-color: var(--brand-300);
}

.check-list--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.85rem clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   Split-Layout (Text + Bild/Panel)
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* Für Abschnitte mit Formular: Ein langes Formular zieht die Spalte daneben
   bei align-items:center in die Mitte, sodass die Überschrift erst auf halber
   Höhe beginnt. Oben ausgerichtet fangen beide Spalten gemeinsam an. */
.split--top {
  align-items: start;
}

.split--reverse > *:first-child {
  order: 2;
}
@media (max-width: 830px) {
  .split--reverse > *:first-child {
    order: 0;
  }
}

.panel {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
}

.panel--ink {
  background: var(--ink-900);
  color: var(--ink-300);
  border-color: var(--ink-700);
}
.panel--ink h3 {
  color: #fff;
}

.panel--brand {
  background: linear-gradient(158deg, var(--brand-700), var(--brand-600));
  color: rgba(255, 255, 255, 0.88);
  border-color: transparent;
}
.panel--brand h3,
.panel--brand h2 {
  color: #fff;
}

/* ==========================================================================
   Benefits-Raster (Lokführer)
   ========================================================================== */

.benefit {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--brand-050);
  color: var(--brand-600);
}
.benefit__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.benefit h3 {
  font-size: var(--step-0);
  font-weight: 650;
  margin-bottom: 0.25rem;
}
.benefit p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-500);
  line-height: 1.55;
}

.section--ink .benefit__icon {
  background: rgba(255, 255, 255, 0.07);
  color: var(--brand-300);
}
.section--ink .benefit p {
  color: var(--ink-400);
}

/* Highlight-Kachel für Zahlen */
.highlight-tile {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--ink-100);
}
.highlight-tile strong {
  display: block;
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--brand-600);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.highlight-tile span {
  font-size: 0.95rem;
  color: var(--ink-500);
}

/* ==========================================================================
   Team
   ========================================================================== */

.person {
  text-align: left;
}

.person__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-lg);
  background: var(--ink-100);
  margin-bottom: 1.25rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.person:hover .person__photo {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.person h3 {
  font-size: var(--step-1);
  margin-bottom: 0.15rem;
}
.person__role {
  color: var(--brand-600);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.person p {
  color: var(--ink-500);
  font-size: 0.97rem;
}

.person__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.93rem;
}
.person__contact a {
  text-decoration: none;
  font-weight: 550;
}

/* ==========================================================================
   Zitat
   ========================================================================== */

.quote {
  position: relative;
  padding-left: clamp(1.5rem, 4vw, 3rem);
  border-left: 3px solid var(--brand);
  font-size: var(--step-2);
  line-height: 1.45;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.quote footer {
  margin-top: 1.25rem;
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0;
}
.section--ink .quote {
  color: #fff;
  border-left-color: var(--brand-300);
}
.section--ink .quote footer {
  color: var(--ink-400);
}

/* ==========================================================================
   Partner-Logos
   ========================================================================== */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}

.logos img {
  height: clamp(2rem, 4vw, 2.75rem);
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ==========================================================================
   FAQ / Accordion
   ========================================================================== */

.faq {
  border-top: 1px solid var(--ink-200);
}

.faq details {
  border-bottom: 1px solid var(--ink-200);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  transition: color 0.18s var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--brand-600);
}

.faq summary::after {
  content: "";
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.3rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq details > div {
  padding-bottom: 1.5rem;
  max-width: 70ch;
  color: var(--ink-600);
}
.faq details > div > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Formulare
   ========================================================================== */

.form {
  display: grid;
  gap: 1.15rem;
}

.form-grid-2 {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-700);
}
.field label .req {
  color: var(--brand-600);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--r-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  appearance: none;
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2364798d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.15rem;
  padding-right: 2.75rem;
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-400);
}

/* Auch außerhalb von .field verwendbar — Hinweise stehen an mehreren
   Stellen direkt unter einem Absatz statt unter einem Eingabefeld. */
.hint,
.field .hint {
  font-size: 0.85rem;
  /* ink-500 erreicht auf dem hellgrauen Panel nur 4,26:1. Auf Weiß reicht es
     knapp, auf getönter Fläche nicht mehr — deshalb durchgängig ink-600. */
  color: var(--ink-600);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #d93025;
}

.field .error {
  font-size: 0.85rem;
  color: #d93025;
  font-weight: 550;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--ink-600);
  line-height: 1.5;
}
.consent input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form-status {
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.5;
}
.form-status[hidden] {
  display: none;
}
.form-status--ok {
  background: #e7f6ed;
  color: #0b6b39;
  border: 1px solid #b9e3ca;
}
.form-status--err {
  background: #fdecea;
  color: #a3221a;
  border: 1px solid #f6c9c5;
}

.btn[data-loading="true"] {
  pointer-events: none;
  opacity: 0.7;
}

/* ==========================================================================
   Kontakt-Kacheln
   ========================================================================== */

.contact-tile {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.35rem;
  border-radius: var(--r-md);
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.contact-tile:hover {
  background: #fff;
  border-color: var(--ink-200);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
  color: inherit;
}
.contact-tile__icon {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  color: var(--brand-600);
}
.contact-tile__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.contact-tile strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  /* ink-400 erreichte auf der hellen Kachel nur 2,70:1. ink-600 liegt bei
     6,59:1 — nötig, weil die Beschriftung klein und in Versalien gesetzt ist. */
  color: var(--ink-600);
  margin-bottom: 0.15rem;
}
.contact-tile span {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-900);
}

/* ==========================================================================
   CTA-Band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.76);
  border-radius: var(--r-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 65% 90% at 50% 0%,
    color-mix(in srgb, var(--brand) 45%, transparent),
    transparent 70%
  );
}
.cta-band h2 {
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}

/* .lead setzt eine eigene, dunkle Farbe und überschreibt damit die helle
   Textfarbe des Bandes. Ohne diese Regel steht dunkles Blaugrau auf dunklem
   Marineblau — praktisch unlesbar. */
.cta-band .lead,
.cta-band p {
  color: rgba(255, 255, 255, 0.82);
}
.cta-band p {
  max-width: 52ch;
  margin-inline: auto;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink-900);
  color: var(--ink-400);
  padding-block: clamp(2.75rem, 5vw, 3.75rem) 1.5rem;
  font-size: 0.92rem;
}

/* Marke links, Linkspalten rechts — nebeneinander statt untereinander. */
.footer-top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(15rem, 1.5fr) minmax(0, 2fr);
  align-items: start;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-bottom: 0.9rem;
}
.footer-logo img {
  height: 34px;
  width: auto;
}

.footer-brand p {
  max-width: 36ch;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-contact a,
.footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-400);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.footer-contact a:hover {
  color: #fff;
}
.footer-contact svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.65;
}

/* Drei schmale Linkspalten, die auf Mobil zu zweien werden statt zu stapeln. */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1rem, 2.5vw, 2rem);
}

.site-footer h4 {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-nav a {
  color: var(--ink-400);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.footer-nav a:hover {
  color: #fff;
}

@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

@media (max-width: 460px) {
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  /* ink-500 erreicht auf dem dunklen Footer nur 3,54:1 und verfehlt damit
     WCAG AA. ink-400 liegt bei 5,59:1. */
  color: var(--ink-400);
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer-bottom a {
  color: var(--ink-400);
  text-decoration: none;
}
.footer-bottom a:hover {
  color: #fff;
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */

/* Rechtstexte werden selten am Stück gelesen, sondern nach einer bestimmten
   Angabe durchsucht. Deshalb hier großzügiger als im übrigen Layout:
   größere Schrift, mehr Zeilenabstand und sichtbar getrennte Abschnitte. */

.legal {
  /* Bewusst über --step-0: Der Fließtext liegt fluid bei rund 17 px, hier
     sind es rund 19 px. Ein fester rem-Wert hätte je nach Viewport auch
     kleiner ausfallen können als der normale Text. */
  font-size: clamp(1.1rem, 1.02rem + 0.36vw, 1.22rem);
  line-height: 1.8;
}

.legal h2 {
  font-size: var(--step-2);
  margin-top: 3.75rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink-100);
}
.legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal h3 {
  font-size: var(--step-1);
  margin-top: 2.5rem;
  margin-bottom: 0.5em;
}

.legal p,
.legal li {
  color: var(--ink-600);
}
.legal p {
  margin-bottom: 1.3em;
}

.legal ul,
.legal ol {
  margin-bottom: 1.5em;
  padding-left: 1.35em;
}
.legal li {
  margin-bottom: 0.55em;
}
.legal li::marker {
  color: var(--brand);
}

.legal address {
  font-style: normal;
  line-height: 1.9;
  padding: 1.35rem 1.5rem;
  background: var(--ink-050);
  border-radius: var(--r-md);
  border-left: 3px solid var(--brand);
  margin-bottom: 1.5em;
}

/* Angabe-Wert-Paare: jede Zeile bekommt eine eigene Trennlinie, damit sich
   Zusammengehöriges auch bei langen Werten nicht vermischt. */
.legal dl,
dl.specs {
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: 0 2rem;
  margin: 1.5rem 0 2rem;
}
.legal dt,
dl.specs dt {
  font-weight: 600;
  color: var(--ink-900);
  padding: 0.85rem 0;
  border-top: 1px solid var(--ink-100);
}
.legal dd,
dl.specs dd {
  margin: 0;
  color: var(--ink-600);
  padding: 0.85rem 0;
  border-top: 1px solid var(--ink-100);
}
/* Erste Zeile ohne Linie — die Überschrift trennt bereits. */
.legal dl > dt:first-of-type,
.legal dl > dt:first-of-type + dd,
dl.specs > dt:first-of-type,
dl.specs > dt:first-of-type + dd {
  border-top: none;
  padding-top: 0;
}

/* Im Panel „Auf einen Blick“ wirken Linien zu schwer. */
.panel dl.specs dt,
.panel dl.specs dd {
  border-top-color: var(--ink-200);
}
@media (max-width: 560px) {
  .legal dl,
  dl.specs {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Einspaltig gehören Label und Wert zusammen: Die Trennlinie sitzt nur
     über dem Label, sonst würde sie das Paar auseinanderreißen. */
  .legal dt,
  dl.specs dt {
    padding: 1rem 0 0.15rem;
  }
  .legal dd,
  dl.specs dd {
    padding: 0 0 0.25rem;
    border-top: none;
  }
  .legal dl > dt:first-of-type,
  dl.specs > dt:first-of-type {
    padding-top: 0;
  }
}

/* ==========================================================================
   Scroll-Reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  /* 0.7s war zusammen mit dem späten Auslösen zu träge: Der Abschnitt war
     schon im Bild, während er noch halb durchsichtig war. */
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

/* ==========================================================================
   Utilities
   ========================================================================== */

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

.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-3 {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.mt-4 {
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .btn {
    display: none !important;
  }
}

/* ==========================================================================
   News
   ========================================================================== */

.news-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease);
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--ink-200);
}

/* Die ganze Karte ist klickbar, der Link bleibt trotzdem ein echter Link. */
.news-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink-100);
}

.news-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--brand-050), var(--ink-100));
  color: var(--brand-300);
}
.news-card__image--placeholder svg {
  width: 3rem;
  height: 3rem;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.news-card__body h2,
.news-card__body h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.news-card__body p {
  color: var(--ink-500);
  font-size: 0.96rem;
  margin-bottom: 1.25rem;
}

.news-card__body .link-arrow {
  margin-top: auto;
  color: var(--brand-600);
}

.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.83rem;
  color: var(--ink-500);
}

.news-tag {
  display: inline-block;
  padding: 0.25em 0.7em;
  border-radius: var(--r-full);
  background: var(--brand-050);
  color: var(--brand-700);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Einzelbeitrag */

.article-image {
  width: 100%;
  /* Festes Seitenverhältnis, obwohl die Maße des hochgeladenen Bildes
     unbekannt sind. Ohne diese Angabe hat das Bild bis zum Laden die Höhe
     null, und der gesamte Artikel darunter springt nach unten, sobald es da
     ist — genau der Layoutsprung, den Google als Core Web Vital misst.
     Dasselbe Verhältnis wie in den Beitragskacheln, damit der Ausschnitt
     zwischen Übersicht und Artikel gleich bleibt. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--ink-100);
}

.article-body {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink-700);
}
.article-body p {
  margin-bottom: 1.2em;
}
.article-body p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Partner- und Kundenkarten
   ========================================================================== */

.partner-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.partner-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 3.5rem;
  margin-bottom: 1.25rem;
}
.partner-card__logo img {
  max-height: 3.5rem;
  max-width: 12rem;
  width: auto;
  object-fit: contain;
}

.partner-card__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-md);
  background: var(--brand-050);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.partner-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

/* Abgeschlossene Zusammenarbeit: zurückgenommen, aber nicht ausgegraut —
   eine Referenz bleibt ein Argument und muss lesbar sein. */
.partner-card--past {
  border-left: 3px solid var(--ink-200);
}

.partner-card__status {
  display: inline-block;
  margin-bottom: 0.75rem !important;
  padding: 0.22em 0.7em;
  border-radius: var(--r-full);
  background: var(--ink-100);
  color: var(--ink-600) !important;
  font-size: 0.76rem !important;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.partner-card p {
  color: var(--ink-500);
  font-size: 0.96rem;
}
.partner-card__link {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.75rem;
}

/* ==========================================================================
   Leerzustand
   ========================================================================== */

.empty-state {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  background: var(--ink-050);
  border: 1px dashed var(--ink-200);
  border-radius: var(--r-lg);
}
.empty-state h2 {
  font-size: var(--step-2);
  margin-bottom: 0.6rem;
}
.empty-state p {
  color: var(--ink-500);
  margin-bottom: 0;
}

/* ==========================================================================
   Hinweiskasten — für Konditionen, die man vorab kennen sollte
   ========================================================================== */

.notice {
  padding: clamp(1.15rem, 2.5vw, 1.5rem);
  border-radius: var(--r-md);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  border-left: 4px solid var(--brand);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-600);
}
.notice p:last-child {
  margin-bottom: 0;
}
.notice strong {
  color: var(--ink-900);
}

.section--ink .notice {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: var(--brand-300);
  color: var(--ink-300);
}
.section--ink .notice strong {
  color: #fff;
}

/* ==========================================================================
   Pflichtangaben als Karten (Impressum)
   Die Angaben werden gesucht, nicht gelesen — deshalb einzeln abgesetzt
   statt in einer durchlaufenden Liste.
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.info-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.info-card--wide {
  grid-column: 1 / -1;
}

.info-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 1rem;
}
.info-card h3::before {
  content: "";
  width: 1.1rem;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  flex-shrink: 0;
}

.info-card p,
.info-card address {
  margin: 0;
  font-style: normal;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-700);
}
.info-card p + p {
  margin-top: 0.85rem;
}

.info-card strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}

.info-card .info-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--ink-500);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0;
}

.info-card a {
  font-weight: 550;
  text-decoration: none;
}
.info-card a:hover {
  text-decoration: underline;
}

/* Auffällig für Nummern, die man kopiert */
.info-card .info-code {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--ink-900);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Section-Kopf innerhalb von .legal: Die Regeln für Rechtstext-Überschriften
   (Trennlinie, großer Abstand) sollen hier nicht greifen — die Überschrift
   leitet den Abschnitt ein, sie trennt ihn nicht. */
.legal .section-head h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* .legal p ist spezifischer als .eyebrow und würde die Markenfarbe
   überschreiben. */
.legal .eyebrow {
  color: var(--brand-600);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Zeitstrahl — mehrstufige Abläufe
   Gegenüber .steps (nebeneinander) hier untereinander: Ein Ablauf mit fünf
   Stationen wird nebeneinander zu schmal, und die Reihenfolge liest sich
   von oben nach unten ohnehin natürlicher.
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46rem;
  /* Als <ol> ausgezeichnet, damit die Reihenfolge auch ohne CSS und für
     Screenreader erhalten bleibt — die eigene Nummerierung wird aber durch
     die Marker ersetzt. */
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Verbindungslinie hinter den Markern */
.timeline::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: linear-gradient(var(--ink-200) 60%, var(--ink-100));
  border-radius: 2px;
}

.timeline__item {
  position: relative;
  padding-left: 4.25rem;
  min-height: 2.8rem;
}

.timeline__marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-200);
  color: var(--ink-500);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Der Schritt, an dem die Entscheidung fällt */
.timeline__item--key .timeline__marker {
  border-color: var(--brand);
  color: var(--brand-700);
  background: var(--brand-050);
}

/* Das Ziel */
.timeline__item--final .timeline__marker {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

.timeline__item h3 {
  font-size: var(--step-1);
  margin-bottom: 0.3rem;
  padding-top: 0.35rem;
}

.timeline__item p {
  color: var(--ink-600);
  margin-bottom: 0;
}

.timeline__who {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2em 0.7em;
  border-radius: var(--r-full);
  background: var(--ink-100);
  color: var(--ink-600);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timeline__item--key .timeline__who {
  background: var(--brand-100);
  color: var(--brand-700);
}

@media (max-width: 520px) {
  .timeline::before {
    left: 1.1rem;
  }
  .timeline__item {
    padding-left: 3.5rem;
  }
  .timeline__marker {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Stellenkarten
   ========================================================================== */

.job-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.job-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.86rem;
  color: var(--ink-500);
}

.job-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.job-card p {
  color: var(--ink-500);
  font-size: 0.96rem;
  margin-bottom: 1.25rem;
}

.job-card .link-arrow {
  margin-top: auto;
  color: var(--brand-600);
}

/* Warnhinweis — z. B. wenn der Wartungsmodus läuft */
.form-status--warn {
  background: #fdf4e3;
  color: #8a5116;
  border: 1px solid #f2ddb8;
}

/* ==========================================================================
   Zustimmung zur Reichweitenmessung
   ========================================================================== */

.zustimmung {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  transform: translateX(-50%);
  width: min(100% - 1.5rem, 46rem);
  /* Über allem außer der Kopfleiste, die bei 100 liegt. Das Banner soll
     Inhalte überdecken, aber die Navigation nicht unbedienbar machen. */
  z-index: 90;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(11, 14, 20, 0.18);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}

.zustimmung__inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.zustimmung__text {
  flex: 1 1 20rem;
}

.zustimmung__text h2 {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}

.zustimmung__text p {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-600);
}

.zustimmung__klein {
  font-size: 0.84rem !important;
  color: var(--ink-500) !important;
}

.zustimmung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 0 0 auto;
}

/* Beide Schaltflächen gleich breit und gleich betont. Ein kleingeredetes
   "Ablehnen" neben einem großen "Zustimmen" wäre eine Gestaltung, die zur
   Einwilligung drängt — und eine so erlangte Einwilligung ist nicht
   freiwillig im Sinne der DSGVO. */
.zustimmung__knoepfe .btn {
  flex: 1 1 auto;
  min-width: 11rem;
  justify-content: center;
}

@media (max-width: 560px) {
  .zustimmung__knoepfe .btn {
    min-width: 100%;
  }
}

/* Widerruf in der Datenschutzerklärung */
.zustimmung-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}

.zustimmung-status {
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  color: var(--ink-700);
  font-size: 0.92rem;
}