@charset "UTF-8";
/* =====================================================================
   UNDERDOGS — Startseite
   Mobile design canvas 430px (literal px) · Desktop canvas 1536px
   Desktop values are written as calc(N * var(--s)) — see base.css
   ===================================================================== */

/* ==================================================================== */
/* HERO — Vollbild-Video (.hv)                                          */
/* Fuellt den ersten Viewport komplett, Video als cover-Layer,          */
/* darueber ein dezenter dunkler Verlauf und mittig die Wortmarke.      */
/* ==================================================================== */
.hv {
  position: relative;
  height: 100vh;
  height: 100svh;           /* iOS: ohne springende Browserleiste */
  min-height: 520px;
  width: 100%;
  overflow: hidden;
  background: #0b0b0b;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.hv__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  pointer-events: none;
  background: #0b0b0b;
}

/* Dezentes Overlay: oben etwas dunkler fuer die Navigation,
   in der Mitte leicht, unten wieder dunkler fuer den Uebergang. */
.hv__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.46) 100%),
    linear-gradient(180deg, rgba(11,11,11,.62) 0%, rgba(11,11,11,.10) 26%, rgba(11,11,11,.10) 62%, rgba(11,11,11,.72) 100%);
}

.hv__brand {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 24px;
  text-align: center;
  color: #ffffff;
}

.hv__h1 { margin: 0; line-height: 0; }
.hv__logo {
  width: min(78vw, 340px);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 6px 34px rgba(0,0,0,.55));
  /* Safari wertet EXIF/XMP-Orientierung auch bei PNGs aus (Standardwert
     ist image-orientation: from-image). Eine Quelldatei mit falschem
     tiff:Orientation kippt das Logo sonst um 90 Grad und verdreht dabei
     die Seitenverhaeltnisse. Die Metadaten sind aus der Datei entfernt,
     das hier ist die zweite Absicherung.                                */
  image-orientation: none;
}

.hv__sub {
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.hv__tag {
  margin: 9px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: rgba(255,255,255,.84);
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}

/* Der Hero folgt bewusst NICHT dem --s-Zoom des restlichen Layouts:
   auf einem 2560er Monitor wuerde die Wortmarke sonst ueber 1000px breit.
   Stattdessen mitwachsend, aber nach oben gedeckelt. */
@media (min-width: 1024px) {
  .hv { min-height: 560px; }
  .hv__logo { width: clamp(340px, 40vw, 620px); }
  .hv__sub {
    margin: clamp(22px, 1.95vw, 34px) 0 0;
    font-size: clamp(13px, 1.04vw, 18px);
    letter-spacing: clamp(4px, .39vw, 7px);
  }
  .hv__tag {
    margin: clamp(10px, .91vw, 16px) 0 0;
    font-size: clamp(12px, .91vw, 16px);
    letter-spacing: clamp(1.6px, .16vw, 2.8px);
  }
}

/* Reduced motion: Video steht still, Poster bleibt sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .hv__video { animation: none; }
}

/* ==================================================================== */
/* Transparente Navigation ueber dem Video (nur Startseite)             */
/* ==================================================================== */
.page--hv .hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.page--hv .hdr__logo img { filter: brightness(0) invert(1); transition: filter .3s ease; }
.page--hv .hdr__burger span { background: #ffffff; }

/* Sobald der Hero durchgescrollt ist: normaler heller Header. */
.page--hv .hdr.is-solid {
  background: #ffffff;
  border-bottom-color: #f0eeeb;
  box-shadow: 0 6px 26px rgba(0,0,0,.07);
}
.page--hv .hdr.is-solid .hdr__logo img { filter: none; }
.page--hv .hdr.is-solid .hdr__burger span { background: var(--ink-2); }

/* Offenes Mobilmenue: Header wieder deckend, damit das X sichtbar ist. */
.page--hv .hdr.is-open {
  background: #ffffff;
  border-bottom-color: #f0eeeb;
}
.page--hv .hdr.is-open .hdr__logo img { filter: none; }
.page--hv .hdr.is-open .hdr__burger span { background: var(--ink-2); }

@media (min-width: 1024px) {
  .page--hv .hdr { z-index: 50; }
  .page--hv .hdr__nav > a,
  .page--hv .navitem__trigger {
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
    transition: color .3s ease;
  }
  .page--hv .hdr__nav > a:hover,
  .page--hv .navitem__trigger:hover { color: var(--o); }
  .page--hv .hdr__nav a[aria-current="page"] { color: var(--o); }

  .page--hv .hdr.is-solid .hdr__nav > a,
  .page--hv .hdr.is-solid .navitem__trigger {
    color: var(--ink-3);
    text-shadow: none;
  }
  .page--hv .hdr.is-solid .hdr__nav > a:hover,
  .page--hv .hdr.is-solid .navitem__trigger:hover { color: var(--o); }
  .page--hv .hdr.is-solid .hdr__nav a[aria-current="page"] { color: var(--o); }
}

/* ==================================================================== */
/* STAT BAR (desktop only)                                              */
/* ==================================================================== */
@media (min-width: 1024px) {
  .statbar {
    position: relative;
    z-index: 3;
    margin: 0 calc(76 * var(--s));
    background: var(--d-6);
    border-radius: calc(10 * var(--s));
    height: calc(122 * var(--s));
    display: grid;
    grid-template-columns: calc(333 * var(--s)) calc(332 * var(--s)) calc(363 * var(--s)) 1fr;
  }
  .statbar__item {
    display: flex; align-items: center;
    gap: calc(20 * var(--s));
    padding-left: calc(56 * var(--s));
    border-right: 1px solid #3a3a3a;
  }
  .statbar__item:first-child { padding-left: calc(36 * var(--s)); }
  .statbar__item:nth-child(3), .statbar__item:nth-child(4) { padding-left: calc(60 * var(--s)); }
  .statbar__item:last-child { border-right: none; padding-right: calc(20 * var(--s)); }
  .statbar__item svg { width: calc(46 * var(--s)); height: calc(46 * var(--s)); }
  .statbar__item:nth-child(3) svg { width: calc(50 * var(--s)); }
  .statbar__pre {
    font-size: max(9.5px, calc(11 * var(--s)));
    font-weight: 700; letter-spacing: 1.5px;
    color: #9c9c9c; text-transform: uppercase;
  }
  .statbar__num {
    font-family: Archivo, sans-serif;
    font-weight: 900;
    font-stretch: 75%;
    font-size: calc(27 * var(--s));
    line-height: 1.2;
    color: #ffffff;
  }
  .statbar__lbl {
    font-size: max(13px, calc(17 * var(--s)));
    font-weight: 800; letter-spacing: .4px;
    color: #ffffff; text-transform: uppercase;
  }
  .statbar__sub {
    margin-top: calc(5 * var(--s));
    font-size: max(10px, calc(11.5 * var(--s)));
    font-weight: 700; letter-spacing: 1px;
    color: #9c9c9c; text-transform: uppercase;
    white-space: nowrap;
  }
}

/* ==================================================================== */
/* SCROLL CUE                                                           */
/* ==================================================================== */
.scrollcue {
  background: var(--d-1);
  padding: 14px 0 20px;
  display: flex; flex-direction: column; align-items: center;
}
.scrollcue svg { width: 16px; height: 26px; }
.scrollcue__txt {
  margin-top: 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 2.2px;
  color: #6f6d69; text-transform: uppercase; text-align: center;
}
@media (min-width: 1024px) {
  .scrollcue { background: #ffffff; margin-top: calc(6 * var(--s)); padding: 0 0 calc(26 * var(--s)); }
  .scrollcue__line { display: block; width: 1px; height: calc(26 * var(--s)); background: var(--o); }
  .scrollcue svg { width: calc(22 * var(--s)); height: calc(34 * var(--s)); margin-top: calc(8 * var(--s)); }
  .scrollcue__txt {
    margin-top: calc(10 * var(--s));
    font-size: max(9px, calc(10.5 * var(--s)));
    letter-spacing: 2.5px;
    line-height: 1.7;
    color: #8a8a8a;
  }
}

/* ==================================================================== */
/* LEISTUNGEN                                                           */
/* ==================================================================== */
.sec-mat { position: relative; padding: 64px 0 0; background: #ffffff; }
.sec-mat__head { padding: 0 22px; }
.sec-mat__h2 { font-size: 38px; line-height: 1.12; }
.sec-mat__aside { margin-top: 16px; }

.mat-row { gap: 14px; padding: 28px 22px 8px; }
.mat-card {
  flex: none;
  width: 296px;
  background: var(--d-2);
  display: flex;
  flex-direction: column;
}
.mat-card__media { position: relative; height: 164px; flex: none; }
.mat-card__media img { width: 100%; height: 164px; object-fit: cover; display: block; }
.mat-card__fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 72%, #0d0d0d 100%);
}
.mat-card__body { padding: 4px 24px 0; }
.mat-card__icon { width: 44px; height: 44px; }
.mat-card__icon--wide { width: 48px; height: 44px; }
.mat-card__title {
  margin: 14px 0 0;
  font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 24px; letter-spacing: .5px; color: #ffffff;
}
.mat-card__text {
  margin: 10px 0 0;
  font-size: 13.5px; line-height: 1.6; font-weight: 500; color: #cfcfcf;
}
.mat-card__link { display: flex; margin: auto 24px 22px; padding-top: 16px; }

.trust {
  margin-top: 36px;
  background: var(--sand-2);
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px 0;
}
.trust__item { display: flex; flex-direction: column; gap: 10px; }
.trust__item > div { display: flex; flex-direction: column; gap: 10px; }
.trust__item:nth-child(1) { padding: 18px 14px 18px 22px; border-right: 1px solid var(--line-4); border-bottom: 1px solid var(--line-4); }
.trust__item:nth-child(2) { padding: 18px 22px 18px 18px; border-bottom: 1px solid var(--line-4); }
.trust__item:nth-child(3) { padding: 18px 14px 18px 22px; border-right: 1px solid var(--line-4); }
.trust__item:nth-child(4) { padding: 18px 22px 18px 18px; }
.trust__item svg { width: 34px; height: 38px; }
.trust__item:nth-child(4) svg { width: 38px; height: 38px; }
.trust__t { font-size: 12.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; }
.trust__d { font-size: 12.5px; line-height: 1.5; font-weight: 500; color: var(--tx-3); }

@media (min-width: 1024px) {
  .sec-mat { padding: calc(110 * var(--s)) 0 calc(96 * var(--s)); }
  .sec-mat__head {
    display: flex; align-items: flex-start;
    padding: 0 0 0 calc(77 * var(--s));
    position: relative; z-index: 1;
  }
  .sec-mat__h2 {
    width: calc(456 * var(--s)); flex: none;
    margin-top: calc(14 * var(--s));
    font-size: calc(66 * var(--s)); line-height: 1.11;
  }
  .sec-mat__aside {
    margin: 0 0 0 calc(77 * var(--s));
    padding-top: calc(44 * var(--s));
    max-width: calc(340 * var(--s));
  }
  .sec-mat__aside .link-rule { margin-top: calc(24 * var(--s)); }
  .sec-mat__deco {
    position: absolute;
    top: calc(-101 * var(--s));
    left: calc(1148 * var(--s));
    width: calc(290 * var(--s));
    height: calc(295 * var(--s));
    opacity: .06;
    pointer-events: none;
  }

  .mat-row {
    display: grid;
    grid-template-columns: repeat(4, calc(353 * var(--s)));
    gap: calc(17 * var(--s));
    padding: 0 calc(38 * var(--s));
    margin-top: calc(66 * var(--s));
    overflow: visible;
  }
  .mat-card { width: auto; height: calc(468 * var(--s)); }
  .mat-card__media { height: calc(196 * var(--s)); }
  .mat-card__media img { height: calc(196 * var(--s)); }
  .mat-card__body { padding: calc(2 * var(--s)) calc(30 * var(--s)) 0; }
  .mat-card__icon { width: calc(54 * var(--s)); height: calc(54 * var(--s)); }
  .mat-card__icon--wide { width: calc(58 * var(--s)); height: calc(54 * var(--s)); }
  .mat-card__title {
    margin: calc(20 * var(--s)) 0 0;
    font-size: calc(29 * var(--s)); line-height: 1.22;
  }
  .mat-card__text {
    margin: calc(14 * var(--s)) 0 0;
    max-width: calc(236 * var(--s));
    font-size: max(12.5px, calc(14.5 * var(--s))); line-height: 1.62;
  }
  .mat-card__link { margin: auto calc(30 * var(--s)) calc(26 * var(--s)); padding-top: 0; }

  .trust {
    margin-top: calc(28 * var(--s));
    grid-template-columns: repeat(4, 1fr);
    padding: calc(26 * var(--s)) 0;
  }
  .trust__item {
    flex-direction: row; align-items: center;
    gap: calc(26 * var(--s));
    padding: 0 0 0 calc(56 * var(--s));
    border-right: 1px solid var(--line-4);
    border-bottom: none;
  }
  .trust__item > div { display: block; }
  .trust__item:first-child { padding-left: calc(77 * var(--s)); }
  .trust__item:last-child { border-right: none; padding-right: calc(30 * var(--s)); }
  .trust__item svg { width: calc(52 * var(--s)); height: calc(60 * var(--s)); }
  .trust__item:nth-child(4) svg { width: calc(56 * var(--s)); height: calc(56 * var(--s)); }
  .trust__t { font-size: max(12.5px, calc(15 * var(--s))); letter-spacing: .3px; }
  .trust__d { margin-top: calc(6 * var(--s)); font-size: max(12px, calc(14 * var(--s))); line-height: 1.55; }
}

/* ==================================================================== */
/* ABLAUF                                                               */
/* ==================================================================== */
.sec-flow { position: relative; background: var(--sand); padding: 64px 0 60px; overflow: hidden; }
.sec-flow__head { padding: 0 22px; }
.sec-flow__h2 { margin-top: 12px; }
.sec-flow__lead { margin-top: 14px; }

.flow-row { gap: 14px; padding: 26px 22px 8px; }
.flow-card {
  flex: none;
  width: 264px;
  background: #ffffff;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  overflow: hidden;
}
.flow-card__media { position: relative; }
.flow-card__media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.flow-card__num {
  position: absolute; left: 14px; top: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--o); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
}
.flow-card__body { padding: 18px 20px 22px; }
.flow-card__t { font-size: 15.5px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; }
.flow-card__d { margin-top: 8px; font-size: 13.5px; line-height: 1.6; font-weight: 500; color: var(--tx-2); }

.flow-cta {
  margin: 30px 18px 0;
  background: var(--d-3);
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
}
.flow-cta__icon { width: 72px; height: 60px; display: block; margin: 0 auto; }
.flow-cta__h {
  margin-top: 16px;
  font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 23px; line-height: 1.3; letter-spacing: .5px; color: #ffffff;
}
.flow-cta__p {
  margin: 14px auto 0;
  max-width: 280px;
  font-size: 13.5px; line-height: 1.65; font-weight: 500; color: #e6e6e6;
}
.flow-cta__act { margin-top: 20px; }
.flow-cta__act .btn { padding: 16px 0; gap: 14px; }

@media (min-width: 1024px) {
  .sec-flow { padding: calc(104 * var(--s)) 0; }
  .sec-flow__deco {
    position: absolute;
    right: calc(41 * var(--s)); top: calc(104 * var(--s));
    width: calc(520 * var(--s)); height: calc(165 * var(--s));
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 50%, #000 55%, transparent 90%);
    mask-image: radial-gradient(ellipse 68% 62% at 50% 50%, #000 55%, transparent 90%);
  }
  .sec-flow__head {
    display: flex; align-items: flex-start;
    padding: 0 0 0 calc(66 * var(--s));
    position: relative; z-index: 1;
  }
  .sec-flow__head > div { width: calc(530 * var(--s)); flex: none; }
  .sec-flow__h2 { margin-top: calc(16 * var(--s)); font-size: calc(62 * var(--s)); }
  .sec-flow__lead {
    margin: calc(64 * var(--s)) 0 0 calc(42 * var(--s));
    max-width: calc(310 * var(--s));
  }

  .flowline {
    position: relative; display: flex; align-items: center;
    margin: calc(64 * var(--s)) calc(69 * var(--s)) 0;
  }
  .flowline__rule {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1.5px; background: var(--o); opacity: .9;
  }
  .flowline__row { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; }
  .flowline__pad--first { width: calc(126 * var(--s)); }
  .flowline__pad--last { width: calc(140 * var(--s)); }
  .flowline__gap { flex: 1; }
  .flowline__num {
    width: calc(34 * var(--s)); height: calc(34 * var(--s));
    border-radius: 50%; background: var(--o); color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: max(11px, calc(13 * var(--s))); font-weight: 800; flex: none;
  }
  .flowline__arrow { width: calc(26 * var(--s)); height: calc(12 * var(--s)); flex: none; }

  .flow-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: calc(37 * var(--s));
    padding: 0 calc(69 * var(--s));
    margin-top: calc(34 * var(--s));
    position: relative; z-index: 1;
    overflow: visible;
  }
  .flow-card { width: auto; background: none; border: none; border-radius: 0; overflow: visible; }
  .flow-card__media img { height: calc(195 * var(--s)); }
  .flow-card__body { padding: 0; }
  .flow-card__icon { margin-top: calc(22 * var(--s)); width: calc(48 * var(--s)); height: calc(48 * var(--s)); }
  .flow-card__icon--wide { width: calc(56 * var(--s)); height: calc(48 * var(--s)); }
  .flow-card__t { margin-top: calc(16 * var(--s)); font-size: max(15px, calc(19 * var(--s))); letter-spacing: .3px; }
  .flow-card__d {
    margin-top: calc(10 * var(--s));
    max-width: calc(280 * var(--s));
    font-size: max(12.5px, calc(14.5 * var(--s)));
  }

  .flow-cta {
    margin: calc(56 * var(--s)) calc(43 * var(--s)) 0;
    display: flex; align-items: center;
    padding: calc(38 * var(--s)) calc(44 * var(--s));
    text-align: left;
  }
  .flow-cta__icon { width: calc(100 * var(--s)); height: calc(84 * var(--s)); flex: none; margin: 0; }
  .flow-cta__h {
    margin: 0 0 0 calc(48 * var(--s));
    font-size: calc(31 * var(--s));
    flex: none;
  }
  .flow-cta__div { width: 1px; align-self: stretch; background: #3a3b3d; margin-left: calc(56 * var(--s)); }
  .flow-cta__p {
    margin: 0 0 0 calc(46 * var(--s));
    max-width: calc(250 * var(--s));
    font-size: max(12.5px, calc(14.5 * var(--s))); line-height: 1.7;
  }
  .flow-cta__act { margin: 0 0 0 auto; flex: none; }
  .flow-cta__act .btn {
    width: auto;
    justify-content: space-between;
    gap: calc(50 * var(--s));
    padding: calc(16 * var(--s)) calc(26 * var(--s));
  }
  .flow-cta__hint {
    margin-top: calc(14 * var(--s));
    font-size: max(11.5px, calc(13.5 * var(--s)));
    font-weight: 500; color: #e6e6e6; text-align: center;
  }
}

/* ==================================================================== */
/* FUHRPARK                                                             */
/* ==================================================================== */
.sec-fleet { position: relative; background: var(--d-4); padding: 64px 0 58px; overflow: hidden; }
.sec-fleet__head { padding: 0 22px; }
.sec-fleet__h2 { margin-top: 12px; font-size: 37px; color: #ffffff; }
.sec-fleet__aside { margin-top: 14px; }
.sec-fleet__lead { color: #e6e6e6; }

.fleet-row { gap: 12px; padding: 26px 22px 8px; }
.fleet-card { flex: none; width: 280px; background: var(--d-0); display: flex; flex-direction: column; }
.fleet-card__media { position: relative; flex: none; }
.fleet-card__media img { width: 100%; height: 210px; object-fit: cover; display: block; }
.fleet-card__fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,12,0) 75%, #0a0b0c 100%);
}
.fleet-card__body { padding: 6px 22px 24px; }
.fleet-card__t {
  font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 23px; letter-spacing: .5px; color: #ffffff;
}
.fleet-card__cap { margin-top: 6px; font-size: 13.5px; font-weight: 800; color: var(--o); }
.fleet-card__d { margin-top: 10px; font-size: 13px; line-height: 1.6; font-weight: 500; color: #c9c9c9; }

@media (min-width: 1024px) {
  .sec-fleet { padding: calc(104 * var(--s)) 0 calc(96 * var(--s)); }
  .sec-fleet__deco {
    position: absolute;
    right: calc(31 * var(--s)); top: calc(70 * var(--s));
    width: calc(420 * var(--s)); height: calc(290 * var(--s));
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 55%, transparent 88%);
    mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 55%, transparent 88%);
  }
  .sec-fleet__head {
    display: flex; align-items: flex-start;
    padding: 0 0 0 calc(66 * var(--s));
    position: relative; z-index: 1;
  }
  .sec-fleet__head > div:first-child { width: calc(500 * var(--s)); flex: none; }
  .sec-fleet__h2 { margin-top: calc(16 * var(--s)); font-size: calc(64 * var(--s)); line-height: 1.14; }
  .sec-fleet__aside {
    margin: 0 0 0 calc(26 * var(--s));
    padding-top: calc(32 * var(--s));
    max-width: calc(270 * var(--s));
  }
  .sec-fleet__aside .link-rule {
    margin-top: calc(36 * var(--s));
    gap: calc(26 * var(--s));
    padding-bottom: calc(9 * var(--s));
  }

  .fleet-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: calc(9 * var(--s));
    padding: 0 calc(39 * var(--s));
    margin-top: calc(44 * var(--s));
    position: relative; z-index: 1;
    overflow: visible;
  }
  .fleet-card { width: auto; height: calc(558 * var(--s)); }
  .fleet-card__media img { height: calc(325 * var(--s)); }
  .fleet-card__body { padding: calc(8 * var(--s)) calc(28 * var(--s)) 0; }
  .fleet-card__icon { width: calc(66 * var(--s)); height: calc(46 * var(--s)); }
  .fleet-card__t { margin-top: calc(16 * var(--s)); font-size: calc(28 * var(--s)); }
  .fleet-card__cap {
    margin-top: calc(10 * var(--s));
    font-size: max(13px, calc(16 * var(--s)));
    letter-spacing: .3px;
    color: #ffffff;
  }
  .fleet-card__d {
    margin-top: calc(14 * var(--s));
    max-width: calc(240 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
  }
}

/* ==================================================================== */
/* ZITAT BAND (desktop only)                                            */
/* ==================================================================== */
@media (min-width: 1024px) {
  .sec-quote {
    position: relative;
    background: var(--o);
    overflow: hidden;
    padding: calc(88 * var(--s)) calc(60 * var(--s));
    text-align: center;
  }
  .sec-quote__ghost {
    position: absolute;
    right: calc(-40 * var(--s)); top: calc(-60 * var(--s));
    font-family: Anton, "Arial Narrow", sans-serif;
    font-size: calc(340 * var(--s));
    line-height: 1;
    color: rgba(255,255,255,.08);
    pointer-events: none; user-select: none;
  }
  .sec-quote__t {
    position: relative; z-index: 1;
    margin: 0 auto;
    max-width: calc(1080 * var(--s));
    font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
    font-size: calc(52 * var(--s)); line-height: 1.22; letter-spacing: .5px;
    color: #ffffff;
  }
  .sec-quote__rule {
    position: relative; z-index: 1;
    display: block;
    width: calc(60 * var(--s)); height: calc(4 * var(--s));
    background: #ffffff;
    margin: calc(32 * var(--s)) auto 0;
  }
  .sec-quote__by {
    position: relative; z-index: 1;
    margin-top: calc(24 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
    font-weight: 800; letter-spacing: 1.6px;
    color: var(--o-soft); text-transform: uppercase;
  }
}

/* ==================================================================== */
/* INFRASTRUKTUR                                                        */
/* ==================================================================== */
.sec-infra { position: relative; background: var(--sand); padding: 60px 0 0; overflow: hidden; }
.sec-infra__top { display: flex; flex-direction: column; }
.sec-infra__body { order: 0; padding: 0 22px; }
.sec-infra__media { order: 1; position: relative; margin-top: 24px; }
.sec-infra__media img { width: 100%; height: 250px; object-fit: cover; display: block; }
.sec-infra__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #f8f7f5 0%, rgba(248,247,245,0) 18%),
    linear-gradient(0deg, #f8f7f5 0%, rgba(248,247,245,0) 16%);
}
.sec-infra__h2 { margin-top: 12px; font-size: 38px; line-height: 1.08; }
.sec-infra__lead { margin-top: 16px; }

/* Die beiden Flaechen-Kennzahlen.
   Vorher ein zweispaltiges Grid. Auf 375px blieben pro Spalte rund 150px,
   und die beiden Anton-Zahlen standen mit 5px Abstand nebeneinander — das
   las sich als eine einzige Zeichenkette. Untereinander bekommt jede Zahl
   die volle Breite, darf deutlich groesser werden, und die Beschreibung
   braucht eine Zeile weniger.                                            */
.sec-infra__facts { display: flex; flex-direction: column; padding: 0 22px 20px; }
.fact { padding: 24px 0; }
/* Bewusst NICHT :nth-of-type. Zwischen den beiden .fact liegen jeweils
   span.sec-infra__div, und nth-of-type zaehlt nach Elementtyp innerhalb
   aller Geschwister — nicht nach Klasse. .fact:nth-of-type(1) traf damit
   gar nichts (erstes div ist .sec-infra__claim) und :nth-of-type(2) traf
   die erste statt der zweiten Kennzahl. Folge: Trennlinie fehlte, und die
   zweite Zahl sass 16px hoeher als die erste. Der Geschwister-Kombinator
   trifft zuverlaessig jede .fact ausser der ersten.                      */
.fact ~ .fact { border-top: 1px solid var(--line-5); }
.fact__num {
  font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: clamp(40px, 12.5vw, 52px); line-height: 1;
  letter-spacing: -.5px; color: var(--o);
}
.fact__t {
  margin-top: 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--ink); text-transform: uppercase;
}
.fact__d { margin-top: 9px; font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--tx-2); }

/* Ab Tablet-Breite ist wieder Platz fuer den direkten Vergleich der beiden
   Zahlen nebeneinander. Der Hauptumbruch der Seite liegt erst bei 1024px,
   ohne das hier stuende bis dahin eine sehr schmale Spalte auf sehr viel
   leerer Flaeche. Bei 620px bleiben je Spalte rund 254px — die 52px-Anton
   Zahl braucht davon etwa 205px.                                         */
@media (min-width: 620px) and (max-width: 1023px) {
  .sec-infra__facts { flex-direction: row; align-items: flex-start; padding-bottom: 28px; }
  .fact { flex: 1 1 0; }
  .fact ~ .fact {
    border-top: none; border-left: 1px solid var(--line-5);
    margin-left: 34px; padding-left: 34px;
  }
}

@media (min-width: 1024px) {
  .sec-infra { padding: calc(56 * var(--s)) 0 calc(64 * var(--s)); }
  .sec-infra__top { display: block; position: relative; height: calc(697 * var(--s)); }
  .sec-infra__media {
    position: absolute; right: 0; top: 0;
    width: calc(1116 * var(--s)); height: calc(697 * var(--s));
    margin: 0;
  }
  .sec-infra__media img { width: calc(1116 * var(--s)); height: calc(697 * var(--s)); }
  .sec-infra__veil {
    background:
      linear-gradient(90deg, #f8f7f5 0%, rgba(248,247,245,0) 22%),
      linear-gradient(180deg, rgba(248,247,245,0) 62%, #f8f7f5 100%),
      linear-gradient(0deg, rgba(248,247,245,0) 88%, #f8f7f5 100%);
  }
  .sec-infra__body {
    position: relative; z-index: 2;
    padding: calc(68 * var(--s)) 0 0 calc(66 * var(--s));
    width: calc(480 * var(--s));
  }
  .sec-infra__h2 { margin-top: calc(16 * var(--s)); font-size: calc(70 * var(--s)); line-height: 1; }
  .sec-infra__lead { margin-top: calc(32 * var(--s)); max-width: calc(300 * var(--s)); }
  .sec-infra__wire {
    display: block;
    margin: calc(26 * var(--s)) 0 0 calc(-8 * var(--s));
    width: calc(460 * var(--s)); height: calc(130 * var(--s));
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 48% 50%, #000 45%, transparent 82%);
    mask-image: radial-gradient(ellipse 62% 58% at 48% 50%, #000 45%, transparent 82%);
  }

  .sec-infra__facts {
    position: relative; z-index: 2;
    /* flex-direction explizit zuruecksetzen: die Mobilfassung stapelt mit
       column, sonst bliebe das hier stehen.                              */
    display: flex; flex-direction: row; align-items: flex-start;
    padding: calc(34 * var(--s)) calc(40 * var(--s)) calc(46 * var(--s)) calc(66 * var(--s));
  }
  .sec-infra__claim { flex: none; }
  .sec-infra__claim span {
    display: block;
    font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
    font-size: calc(34 * var(--s)); line-height: 1.22; letter-spacing: .5px;
    color: var(--ink);
  }
  .sec-infra__note {
    margin: 0 0 0 calc(62 * var(--s));
    max-width: calc(250 * var(--s));
    font-size: max(12px, calc(14 * var(--s))); line-height: 1.65;
    font-weight: 500; color: var(--tx-2);
  }
  .sec-infra__div { width: 1px; align-self: stretch; background: var(--line-5); margin-left: calc(36 * var(--s)); }
  /* Auf dem Desktop uebernehmen die span.sec-infra__div die Trennung,
     deshalb hier Innenabstand und Linie der Mobilfassung zuruecknehmen. */
  .fact { flex: none; margin-left: calc(38 * var(--s)); padding: 0; }
  .fact ~ .fact { border-top: none; }
  .fact__num { font-size: calc(52 * var(--s)); letter-spacing: 0; }
  .fact__t {
    margin-top: calc(14 * var(--s));
    font-size: max(13px, calc(16 * var(--s)));
    letter-spacing: .5px;
  }
  .fact__d {
    margin-top: calc(12 * var(--s));
    max-width: calc(210 * var(--s));
    font-size: max(12px, calc(14 * var(--s))); line-height: 1.6;
  }
  .sec-infra__plan {
    margin: calc(-6 * var(--s)) 0 0 auto;
    width: calc(290 * var(--s)); height: calc(180 * var(--s));
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 58%, transparent 92%);
    mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 58%, transparent 92%);
  }
}

/* ==================================================================== */
/* EINZUGSGEBIET                                                        */
/* ==================================================================== */
.sec-ez { position: relative; background: var(--sand); padding: 24px 0 64px; overflow: hidden; }
.sec-ez__top { display: flex; flex-direction: column; }
.sec-ez__body { display: contents; }
.sec-ez .eyebrow, .sec-ez__h2, .sec-ez__lead { padding: 0 22px; }
.sec-ez__h2 { margin-top: 12px; }
.sec-ez__lead { margin-top: 14px; line-height: 1.65; }
.sec-ez__map { order: 1; margin-top: 10px; }
.sec-ez__map img { width: 118%; max-width: none; margin-left: -9%; display: block; }

.ez-row { order: 2; gap: 12px; padding: 12px 22px 8px; }
.ez-step {
  flex: none;
  width: 170px;
  background: #ffffff;
  border: 1px solid #e8e6e2;
  border-radius: 8px;
  padding: 18px 16px;
  text-align: center;
}
.ez-step svg { height: 33px; width: auto; margin: 0 auto; display: block; }
.ez-step__t { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; }
.ez-step__d { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--tx-3); }

@keyframes ezPulse {
  0%   { transform: scale(.55); opacity: .9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (min-width: 1024px) {
  .sec-ez { padding: calc(48 * var(--s)) 0 calc(104 * var(--s)); }
  .sec-ez__top { display: flex; flex-direction: row; align-items: flex-start; position: relative; }
  .sec-ez__body {
    display: block;
    position: relative; z-index: 2;
    padding: calc(91 * var(--s)) 0 0 calc(68 * var(--s));
    width: calc(620 * var(--s));
  }
  .sec-ez .eyebrow, .sec-ez__h2, .sec-ez__lead { padding: 0; }
  .sec-ez__h2 { margin-top: calc(18 * var(--s)); font-size: calc(62 * var(--s)); }
  .sec-ez__lead {
    margin-top: calc(30 * var(--s));
    max-width: calc(390 * var(--s));
    font-size: max(13px, calc(15.5 * var(--s)));
    line-height: 1.75;
  }

  .sec-ez__map {
    position: absolute;
    right: calc(20 * var(--s)); top: calc(7 * var(--s));
    width: calc(828 * var(--s)); height: calc(675 * var(--s));
    margin: 0; order: 0;
    clip-path: circle(1200px at 453px 248px);
    transition: clip-path 850ms cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
  }
  .sec-ez__map img { width: calc(828 * var(--s)); height: calc(675 * var(--s)); margin: 0; max-width: none; }
  .sec-ez.ez-armed .sec-ez__map { opacity: 0; }

  .sec-ez__pulse {
    position: absolute;
    right: calc(20 * var(--s)); top: calc(7 * var(--s));
    width: calc(828 * var(--s)); height: calc(675 * var(--s));
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
  }
  .sec-ez__pulse.is-in { opacity: 1; }
  .sec-ez__pulse span {
    position: absolute;
    left: calc(425 * var(--s)); top: calc(220 * var(--s));
    width: calc(56 * var(--s)); height: calc(56 * var(--s));
    border-radius: 50%;
    border: 2px solid var(--o);
    animation: ezPulse 2.2s ease-out infinite;
  }

  .ez-row {
    display: flex; align-items: flex-start;
    margin-top: calc(56 * var(--s));
    width: calc(690 * var(--s));
    gap: 0; padding: 0; overflow: visible;
  }
  .ez-step {
    width: calc(112 * var(--s));
    display: flex; flex-direction: column; align-items: center;
    background: none; border: none; border-radius: 0; padding: 0;
  }
  .ez-step:first-child { width: calc(100 * var(--s)); }
  .ez-step--wide { width: calc(134 * var(--s)); }
  .ez-step svg { height: calc(44 * var(--s)); }
  .ez-step__t {
    margin-top: calc(14 * var(--s));
    font-size: max(12px, calc(14.5 * var(--s)));
    letter-spacing: .3px; line-height: 1.3;
  }
  .ez-step__d {
    margin-top: calc(6 * var(--s));
    font-size: max(11px, calc(13 * var(--s)));
    line-height: 1.5;
  }
  .ez-conn { flex: none; margin-top: calc(16 * var(--s)); width: calc(44 * var(--s)); height: auto; }

  .sec-ez.ez-armed .ez-step {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .sec-ez.ez-armed .ez-step.is-in { opacity: 1; transform: translateY(0); }
  .sec-ez.ez-armed .ez-conn { opacity: 0; transition: opacity .6s ease; }
  .sec-ez.ez-armed .ez-conn.is-in { opacity: 1; }

  .ez-cta {
    margin: calc(60 * var(--s)) calc(52 * var(--s)) 0;
    background: #ffffff;
    border: 1px solid #e8e6e2;
    border-radius: calc(10 * var(--s));
    display: flex; align-items: center;
    padding: calc(28 * var(--s)) calc(44 * var(--s)) calc(28 * var(--s)) calc(24 * var(--s));
    position: relative; z-index: 2;
  }
  .ez-cta > img {
    width: calc(310 * var(--s)); height: calc(160 * var(--s));
    flex: none; display: block;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 55%, transparent 92%);
    mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 55%, transparent 92%);
  }
  .ez-cta__h {
    margin-left: calc(42 * var(--s)); flex: none;
    font-family: Anton, "Arial Narrow", sans-serif; font-weight: 400;
    font-size: calc(27 * var(--s)); line-height: 1.26; letter-spacing: .4px;
    color: var(--ink-2);
  }
  .ez-cta__div { width: 1px; align-self: stretch; background: #e3e1dd; margin-left: calc(52 * var(--s)); }
  .ez-cta__list {
    margin-left: calc(50 * var(--s));
    font-size: max(13px, calc(16 * var(--s)));
    line-height: 2.1; font-weight: 500; color: #1f1f1f;
  }
  .ez-cta__act {
    margin-left: auto; flex: none;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: calc(22 * var(--s));
  }
  .ez-cta__act .btn { gap: calc(40 * var(--s)); }
  .ez-cta__link { color: var(--ink-2); letter-spacing: .8px; }
  .ez-cta__link:hover { color: var(--o); }
}

/* ==================================================================== */
/* FAQ + ANFRAGE                                                        */
/* ==================================================================== */
.sec-faq { position: relative; background: var(--sand); padding: 0 0 70px; }
.sec-faq__head { padding: 0 22px; }
.sec-faq__h2 { margin-top: 12px; font-size: 33px; line-height: 1.18; }
.sec-faq .faq { margin: 22px 18px 0; }
.sec-faq .form-card { margin: 36px 18px 0; }
.form-card form { margin-top: 20px; }
.form-top, .fld-row--last { grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 1024px) {
  .sec-faq {
    display: flex; align-items: flex-start;
    gap: calc(88 * var(--s));
    padding: calc(96 * var(--s)) calc(59 * var(--s)) calc(110 * var(--s)) calc(64 * var(--s));
  }
  .sec-faq__col { width: calc(600 * var(--s)); flex: none; }
  .sec-faq__head { padding: 0 0 0 calc(22 * var(--s)); }
  .sec-faq__h2 { margin-top: calc(16 * var(--s)); font-size: calc(45 * var(--s)); }
  .sec-faq__head .lead { margin-top: calc(20 * var(--s)); font-size: max(13px, calc(15.5 * var(--s))); }
  .sec-faq .faq { margin: calc(26 * var(--s)) 0 0; }
  .sec-faq .form-card { flex: 1; margin: 0; }
  .form-card form { margin-top: calc(24 * var(--s)); }
  .form-card .lead { margin-top: calc(12 * var(--s)) !important; }
  .form-top, .fld-row--last { grid-template-columns: 1fr 1fr; gap: calc(18 * var(--s)); }
  .form-top { margin-top: 0; }
}