@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;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  /* Das Standbild sitzt bewusst hier und nicht im poster-Attribut des
     Videos - die Begruendung steht im Markup. Es ist das erste Bild des
     Videos, der Uebergang zum laufenden Bild ist deshalb nahtlos.
     Die mobile Fassung passt zum 9:16-Zuschnitt des mobilen Videos. */
  background: #0b0b0b url(../img/brand/hero-poster-mobile-v6.webp) center / cover no-repeat;
}

.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: transparent;
  /* WICHTIG: hier darf NICHT opacity: 0 stehen.
     WebKit prueft in MediaElementSession::autoplayPermitted() ausdruecklich
     die berechnete Deckkraft des Videoelements und verweigert das Autoplay
     bei 0. Genau das war der Grund, warum auf dem iPhone erst ein Tippen
     noetig war: unsichtbar -> kein Autoplay -> das Video blieb unsichtbar.
     Eine Nutzergeste hebt die Sperre auf, deshalb lief es nach dem Tippen.

     Ein Standbild braucht es hier trotzdem nicht: das Videoelement hat kein
     poster-Attribut und zeichnet vor dem ersten Bild gar nichts. Zu sehen
     ist also der Hintergrund von .hv - und das ist genau dieses erste Bild.
     Der Uebergang ist damit bildgleich statt eine Ueberblendung. */
  opacity: 1;
  transition: opacity .3s ease;
}

/* Nur fuer den Fall, dass das Autoplay nachweislich abgelehnt wurde - iOS
   tut das im Stromsparmodus immer. main.js setzt die Klasse erst, wenn das
   Versprechen von play() zurueckgewiesen wurde. Ab da ist das Ausblenden
   ungefaehrlich, die Entscheidung ist ja schon gefallen, und es versteckt
   die Abspielschaltflaeche, die iOS dann in das Element zeichnet. */
.hv.is-blocked .hv__video { opacity: 0; }

/* Zweite Absicherung gegen die iOS-Abspielschaltflaeche: Safari rendert
   sie im Shadow-DOM des Videoelements, wo sie sich nur ueber diese
   Pseudoelemente erreichen laesst. */
.hv__video::-webkit-media-controls,
.hv__video::-webkit-media-controls-panel,
.hv__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* 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; }
/* Das Emblem ist nahezu quadratisch (Verhaeltnis 1,08). Deshalb wird es
   ueber die HOEHE gesteuert, nicht ueber die Breite: der Hero hat nach
   unten ein festes Mass, die Breite hat Platz. Waere es breitengesteuert,
   liefe es auf grossen Schirmen ueber die Hero-Hoehe hinaus.            */
.hv__logo {
  height: min(68vw, 290px);
  width: 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;
}

/* Frueher standen hier zwei Zeilen: "Wertstoffzentrum Templin" und der
   Claim. Das Emblem sagt "TEMPLIN" aber selbst schon zweimal und nennt
   auch das Geschaeft ("Recycling & Schrotthandel"). Die erste Zeile war
   damit doppelt und widersprach dem Bild sogar. Geblieben ist der Claim,
   der dafuer traegt: eine Zeile, mehr Luft, weiter gesperrt.            */
.hv__tag {
  margin: 18px 0 0;
  /* Die Zeile hat 33 Zeichen und soll auf einer Zeile stehen - umgebrochen
     zerfaellt der Dreiklang. Sie skaliert deshalb auf schmalen Geraeten mit
     der Viewportbreite mit. Die Sperrung ist in em angegeben, damit sie im
     gleichen Verhaeltnis mitschrumpft. Bewusst KEIN white-space:nowrap:
     falls es doch einmal zu eng wird, ist ein Umbruch besser als ein
     abgeschnittenes Wort.

     Groesse und Sperrung sind an die BREITE DES EMBLEMS gebunden: die Zeile
     ordnet sich der Marke unter und darf sie nicht ueberragen. Zielwert rund
     90 % der Emblembreite. Vorher war sie mit 12px/.16em auf das 1,29-fache
     gewachsen und wirkte dadurch wie eine zweite Marke statt wie ein Claim.
     Ein Drittel der alten Breite kam allein aus der Sperrung (33 Zeichen),
     deshalb faellt hier auch sie kleiner aus, nicht nur der Schriftgrad.  */
  /* 2.75vw ist kein runder Wert, sondern gerechnet: das Emblem ist auf dem
     Telefon min(73.7vw, 314px) breit, die Zeile misst rund das 24,7-fache
     ihres Schriftgrads. 2.75vw / 11.5px halten sie damit ueber die ganze
     Breite bei rund 92 % des Emblems. Waechst das Emblem, muessen diese
     drei Werte im gleichen Verhaeltnis mitwachsen - sonst kippt die
     Zeile wieder ueber die Marke hinaus. Die 9px-Untergrenze bricht die
     Proportion bewusst: unter 330px Viewport geht Lesbarkeit vor.     */
  font-size: clamp(9px, 2.75vw, 11.5px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  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 das Emblem sonst riesig.
   Stattdessen mitwachsend, aber nach oben gedeckelt. */
@media (min-width: 768px) {
  /* Gleiche Grenze wie bei der Videoauswahl im Markup: ab hier laeuft die
     16:9-Fassung, also muss auch das Standbild darunter 16:9 sein. */
  .hv { background-image: url(../img/brand/hero-poster-desktop-v6.webp); }
}

@media (min-width: 1024px) {
  .hv { min-height: 560px; }
  .hv__logo { height: clamp(320px, 29vw, 430px); width: auto; }
  .hv__tag {
    margin: clamp(22px, 1.75vw, 30px) 0 0;
    font-size: clamp(11.5px, 1.04vw, 15.5px);
    letter-spacing: .22em;
  }
}

/* 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); }
}

/* ==================================================================== */
/* 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) {
  /* Der Abstand war frueher 6, weil zwischen Hero und Scrollhinweis die
     Statleiste stand. Ohne sie beginnt die orange Linie sonst direkt an
     der Unterkante des Videos und sieht aus, als liefe sie daraus aus. */
  .scrollcue { background: #ffffff; margin-top: calc(32 * 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;
  }
  /* 474 statt 468: bei zweizeiliger Ueberschrift lief der Inhalt vorher gut
     2 px ueber, der auto-Rand vor "Mehr erfahren" fiel auf 0 und der Link
     rutschte nach unten. Mit der Zugabe bleibt in jeder Kachel Luft.
     min-height statt height: die Schriftgroessen im Body sind nach unten
     gekappt (max(12.5px, ...)), skalieren also unterhalb von ~1280 px nicht
     mehr mit --s. Der Text braucht dort eine Zeile mehr als die feste Hoehe
     hergibt, der auto-Rand faellt auf 0 und "Mehr erfahren" bricht aus der
     Reihe. Als min-height wachsen alle vier Kacheln gemeinsam mit. */
  .mat-card { width: auto; min-height: calc(474 * 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;
    /* Zwei Zeilen sind immer reserviert, auch bei "REIFEN". Sonst beginnt
       der Fliesstext je nach Ueberschrift auf zwei verschiedenen Hoehen und
       die Kacheln stehen nebeneinander aus dem Takt. 2.44em = 2 x 1.22. */
    min-height: 2.44em;
  }
  .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; }
/* "Anlieferung / Abholung" bricht als einzige Ueberschrift auf zwei Zeilen um,
   dadurch startet der Text von Schritt 4 eine Zeile tiefer als bei 1-3. Zwei
   Zeilen also fest reservieren. 2.2em entspricht der normal-Zeilenhoehe (~1.1).
   Gemessen: der Umbruch verschwindet zwischen 1055 und 1070 px Fensterbreite,
   ab da wird die Reserve wieder freigegeben, sonst klafft dort eine Luecke. */
.flow-card__t { min-height: 2.2em; }
@media (min-width: 1070px) { .flow-card__t { min-height: 0; } }
.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));
    /* Die Grafik ist breiter als ihre Spalte - sie liegt bewusst auf dem
       Luftbild und ist an den Raendern ausmaskiert. Ohne max-width: none
       kappt das globale img { max-width: 100% } die Breite auf die Spalte,
       waehrend die Hoehe stehen bleibt, und die Zeichnung wird gestaucht.
       height: auto, damit Breite und Hoehe nie aus zwei Quellen kommen. */
    width: calc(460 * var(--s)); height: auto; max-width: none;
    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; }
/* height: auto ist hier Pflicht, nicht Kosmetik. Die Attribute
   width="920" height="750" am <img> wirken wie CSS-Regeln. Wird nur die
   Breite ueberschrieben, bleibt die Hoehe bei den 750px aus dem Attribut
   stehen - die Karte bekommt eigene Breite und fremde Hoehe, und aus den
   Kreisen der Grafik werden Ellipsen. */
.sec-ez__map img { width: 118%; height: auto; 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; }
}