/* ============================================================
   NaviTec — Design-System
   Layoutsprache nach dem Lovable-Entwurf, Farbwelt nach der
   echten CI (Orange/Anthrazit). Kein Blau, kein Türkis.
   ============================================================ */

/* ---------- 1. Schriften, self-hosted, kein CDN ---------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  src: url('../fonts/IBMPlexSansCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  src: url('../fonts/IBMPlexSansCondensed-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- 2. Token ---------- */

:root {
  /* Marke. --orange ist die CI-Farbe und trägt Flächen ohne Schrift.
     Für Schrift auf Weiß bzw. Weiß auf Fläche gelten die geprüften
     dunkleren Werte, sonst reicht der Kontrast nicht für AA. */
  /* Vier Töne, am 26.08.2026 von sieben zusammengelegt. Weniger geht nicht:
     Ein Ton, der auf Weiß lesbar ist, verschwindet auf Anthrazit und
     umgekehrt. Die Zahlen dahinter sind gemessene Kontrastwerte. */
  --orange:        #EA6209;   /* NUR Flächen, Icons, Linien, Fokusring.
                                 Als Text ungeeignet: 3,36:1 auf Weiß. */
  --orange-text:   #BC4B05;   /* Text auf hell UND Buttonfläche.
                                 5,06:1 in beide Richtungen. Ersetzt seit
                                 26.08.2026 auch das frühere --orange-btn
                                 (#C24E05), das mit 4,79:1 schlechter war. */
  --orange-btn-h:  #A03F04;   /* Der dunkelste Ton: Button beim Überfahren,
                                 Hervorhebung in Überschriften, Text in den
                                 hellen Hinweiskästen. 6,55:1 auf Weiß.
                                 Ersetzt die früher fest eingetragenen
                                 #7A3208 und #83320A. */
  --orange-on-dark:#F5893C;   /* Der einzige Ton für dunkle Abschnitte,
                                 4,64:1 auf Anthrazit. */
  --akzent:        #9C3211;   /* Hervorhebung in Überschriften, seit
                                 26.08.2026 Kalles Wahl. Liegt mit 14° genau
                                 zwischen dem CI-Orange (24°) und reinem Rot,
                                 liest sich deshalb rot, ohne die Familie zu
                                 verlassen. 7,30:1 auf Weiß.
                                 NUR auf hellem Grund: auf Anthrazit sind es
                                 1,57:1. Wer ihn in einem dunklen Abschnitt
                                 braucht, legt dafür eine eigene Regel an. */

  --ink:           #2B2726;   /* Fließtext auf hell */
  --ink-strong:    #1E1B1A;   /* Überschriften */
  --anthrazit:     #3D3937;   /* dunkle Abschnitte, Footer */
  --anthrazit-deep:#2A2725;   /* Verlaufsende dunkler Abschnitte */
  --muted:         #5C5654;   /* Sekundärtext, nicht heller setzen */
  --muted-on-dark: #C9C2BE;

  --bg:            #FFFFFF;
  --bg-alt:        #F6F4F2;   /* warmes Grau, kein Blaustich */
  --bg-page:       #FAF8F7;   /* Seitengrund zwischen den Karten */
  --border:        #E3DFDD;
  --border-soft:   #EFEBE9;
  --focus:         #EA6209;

  /* Raster und Form */
  --container: 1180px;
  --pad: 24px;
  --radius: 10px;          /* moderner als 4px, aber nicht verspielt */
  --radius-sm: 7px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(43,39,38,.06);
  --shadow-lift: 0 6px 22px rgba(43,39,38,.09);
  --section: clamp(72px, 8.5vw, 116px);

  /* Schrift */
  --font-display: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- 3. Grundlagen ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;          /* 18px, Mindestwert */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  margin: 0 0 .6em;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.03; }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.13; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.3rem; line-height: 1.35; letter-spacing: -.005em; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--orange-btn-h); }

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

strong, b { font-weight: 600; color: var(--ink-strong); }

/* Tastaturfokus: 2px orange mit Abstand */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--anthrazit); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 500;
}
.skip-link:focus { left: 0; }

.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;
}

/* ---------- 4. Layout ---------- */

.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--pad);
}
@media (max-width: 560px) { :root { --pad: 20px; } }

/* Deutsche Komposita sprengen am Handy sonst die Spalte.
   Die Seite ist auf de-AT ausgezeichnet, die Trennung stimmt also. */
@media (max-width: 620px) {
  p, li, .lead, .card h3, .card h4, .hero__lead { hyphens: auto; -webkit-hyphens: auto; }
}

.section { padding-block: var(--section); }
.section--alt { background: var(--bg-alt); }
/* Fuer Abschnitte, die inhaltlich direkt an den vorigen anschliessen und
   denselben Hintergrund haben: Dort addieren sich unterer und oberer
   Abstand zu einer Luecke, die als Leerraum wirkt statt als Trennung.
   Gemessen auf /telematik-einrichten/ zwischen Einrichtung und Ablauf:
   254px, die groesste Luecke der Seite. */
.section--anschluss { padding-top: clamp(24px, 3vw, 40px); }
.section--white { background: var(--bg); }

/* Dunkler Abschnitt: gezielt dort, wo verkauft wird */
.section--dark {
  background: linear-gradient(160deg, var(--anthrazit) 0%, var(--anthrazit-deep) 100%);
  color: #EDE9E7;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .kicker { color: var(--orange-on-dark); }
.section--dark .lead { color: #DCD6D3; }
.section--dark a { color: var(--orange-on-dark); }
/* Ohne diese Zeile erbt fetter Text die Farbe --ink-strong (#1E1B1A) aus der
   Grundregel fuer strong und steht damit fast schwarz auf dem dunklen Grund.
   Gilt auch im Callout, der im dunklen Abschnitt dunkel bleibt. */
.section--dark strong, .section--dark b { color: #fff; }

/* Feines technisches Raster, das Erkennungsmerkmal des Entwurfs */
.grid-pattern { position: relative; }
.grid-pattern::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(61,57,55,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61,57,55,.055) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
}
.section--dark.grid-pattern::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
}
.grid-pattern > * { position: relative; z-index: 1; }

/* ---------- 5. Typografische Bausteine ---------- */

.kicker {
  font-family: var(--font-mono);
  font-weight: 500; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--orange-text);
  margin: 0 0 .9rem;
  display: block;
}

/* Keine Breitenbegrenzung mehr, Kalles Entscheidung vom 05.08.2026: Ueber-
   schriften und ihre Vorspaenne laufen ueber die volle Breite. Vorher 60ch,
   was in einspaltigen Abschnitten eine schmale Spalte im leeren Container
   erzeugte. Wo der Vorspann in einer Rasterspalte steht, begrenzt ihn ohnehin
   die Spalte. */
.lead {
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
}

.prose { max-width: 68ch; }

/* Volle Breite NUR fuer Seiten mit viel Fliesstext: Impressum, Datenschutz,
   spaeter AGB. Kalles Entscheidung vom 25.08.2026, ausdruecklich NICHT fuer
   Produkt- und Loesungsseiten. Anlass: Am Impressum war der Container 1180px
   breit, der Text 734px, 446px blieben leer. Bei Seiten, die aus reinem
   Fliesstext bestehen, wirkt die schmale Spalte im leeren Container falsch. */
.prose--voll { max-width: none; }
.prose h3 { margin-top: 2em; }
.prose h3:first-child { margin-top: 0; }

/* Textabschnitt zweispaltig: Überschrift läuft links mit, Text rechts.
   Hält die Zeilenlänge unter 68 Zeichen und lässt breite Schirme
   trotzdem nicht halb leer stehen. */
.prose-split { display: grid; gap: clamp(22px, 3.5vw, 60px); grid-template-columns: 1fr; }
.prose-split__body { max-width: 68ch; }
.prose-split__body > :first-child { margin-top: 0; }
@media (min-width: 960px) {
  .prose-split { grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); }
  /* Kein position: sticky mehr. Kalles Entscheidung vom 05.08.2026: Der Kopf
     blieb beim Scrollen stehen, was bei langen Textspalten hilft, aber bei der
     Haelfte der 64 Abschnitte steht daneben zu wenig Text, und dann haengt die
     Ueberschrift allein im Weissraum und sieht nach einem Fehler aus. */
  .prose-split__head { align-self: start; }
  .prose-split__head h2 { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .prose-split__head { position: static; }
}

/* Ohne max-width. Vorher 40ch, und das war doppelt unguenstig: Die ch beziehen
   sich auf die Schriftgroesse des Containers und nicht auf die grosse h2 darin,
   deshalb brach schon eine kurze Zeile wie "Was Betriebe uns vorher fragen" um.
   Kalles Entscheidung vom 05.08.2026: volle Breite fuer alle Ueberschriften. */
.section-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.section-head .lead { margin-top: -.2em; }

/* Zwei helle Abschnitte hintereinander: Ohne Farbwechsel steht dazwischen nur
   Weissraum, gemessen 218 px aus zwei vollen Abschnittsraendern. Diese Variante
   halbiert den Abstand und setzt eine feine Linie auf Containerbreite, damit
   der Schnitt sichtbar bleibt statt bloss leer zu sein.
   Kalles Wunsch vom 05.08.2026: "entweder schoene Trennlinie oder kleinerer
   Abstand" - hier beides. */
/* Hervorhebung innerhalb einer Ueberschrift. Nur auf hellem Grund. */
.akzent { color: var(--akzent); }

/* Beanstandete Formularfelder. Seit 26.08.2026, davor gab es im Browser
   ueberhaupt keine Pruefung und der Besucher landete auf einer Fehlerseite. */
.field--fehler input,
.field--fehler textarea { border-color: var(--akzent); }
.field__fehler {
  margin: .45em 0 0; font-size: .875rem; line-height: 1.4;
  color: var(--akzent);
}
/* In der Zeile mit Telefon UND E-Mail ist der Hinweis ein Rasterkind und
   landete sonst in der ersten Spalte. Er gilt aber fuer beide Felder. */
.field--row > .field__fehler { grid-column: 1 / -1; margin-bottom: .2em; }

/* Produktbild in den Ergebniskarten des Konfigurators. Freigestellte Geraete
   auf hellem Grund, deshalb ohne Rahmen und mit Luft ringsum. */
.konf__karte__bild {
  display: block; background: var(--bg-alt);
  border-radius: 8px; margin-bottom: 1.1em; padding: 14px 18px;
  text-align: center;
}
.konf__karte__bild img {
  max-width: 100%; max-height: 132px; width: auto; height: auto;
  object-fit: contain; display: inline-block;
}

/* Ergebnisfeld des Loesungskonfigurators. Schreibgeschuetzt, deshalb ohne
   weissen Grund: Es soll nicht wie ein Eingabefeld aussehen. */
.field [readonly] {
  background: var(--bg-alt); color: var(--muted);
  cursor: default; resize: none;
}

.section--fortsetzung { padding-top: 0; }
.section--fortsetzung > .container {
  border-top: 1px solid var(--border);
  padding-top: clamp(40px, 5vw, 64px);
}

/* Zweispaltiger Kopf: Überschrift links, Text rechts */
.head-split {
  display: grid; gap: clamp(20px, 4vw, 64px);
  grid-template-columns: 1fr;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
@media (min-width: 860px) {
  .head-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; }
  .head-split h2 { margin-bottom: 0; }
}
/* Enger Kopf, 05.08.2026 auf Kalles Wunsch fuer den Loesungsblock der
   Startseite. Bewusst ein eigener Modifikator und keine Aenderung an
   .head-split selbst, damit die uebrigen Abschnitte unberuehrt bleiben. */
.head-split--eng { margin-bottom: clamp(20px, 2.6vw, 34px); }

/* ---------- 6. Schaltflächen ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem;
  line-height: 1.2; padding: 15px 26px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

.btn--primary { background: var(--orange-text); color: #fff; }
.btn--primary:hover { background: var(--orange-btn-h); color: #fff; }

.btn--ghost {
  background: var(--bg); color: var(--ink-strong);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--ink-strong); color: var(--ink-strong); }

.btn--onDark {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.4);
}
.btn--onDark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.btn__arrow { width: 1em; height: 1em; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 7. Kopfzeile ---------- */

/* Weiß, weil das Logo einen weißen Grund mitbringt und sonst
   als sichtbarer Kasten auf dem warmen Grau stehen würde. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 14px rgba(43,39,38,.07);
}
.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 76px;
  padding-block: 16px;
}
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo img { height: 72px; width: auto; }

.site-nav { margin-left: auto; }
.site-nav__list {
  list-style: none; display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0;
}
.site-nav__link {
  display: block; padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 500; font-size: 1rem; text-decoration: none;
}
.site-nav__link:hover { background: rgba(61,57,55,.06); color: var(--ink-strong); }
.site-nav__link[aria-current="page"] { color: var(--orange-text); }

/* Ausklappmenü Lösungen */
.has-menu { position: relative; }
.site-nav__toggle {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 1rem; color: var(--ink);
}
.site-nav__toggle:hover { background: rgba(61,57,55,.06); }
.site-nav__toggle svg { width: .7em; height: .7em; transition: transform .18s ease; }
.site-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  min-width: 310px; margin: 0; padding: 8px;
  list-style: none; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.site-nav__menu[hidden] { display: none; }
.site-nav__menu a {
  display: block; padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--ink-strong); text-decoration: none; font-size: 1rem; line-height: 1.35;
}
.site-nav__menu a:hover { background: var(--bg-alt); }
.site-nav__menu .sub { display: block; font-size: .9rem; color: var(--muted); margin-top: 2px; }

.header-cta { flex: none; display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-weight: 500; font-size: 1rem;
  color: var(--ink-strong); text-decoration: none;
  padding: 13px 20px; border-radius: var(--radius-sm);
  background: var(--orange-text); color: #fff;
}
.header-phone:hover { background: var(--orange-btn-h); color: #fff; }
.header-phone svg { width: 1.05em; height: 1.05em; flex: none; }

.nav-burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.nav-burger svg { width: 22px; height: 22px; color: var(--ink-strong); }

@media (max-width: 1180px) {
  .nav-burger { display: inline-flex; }
  /* Absolut statt fixed: der backdrop-filter am Header erzeugt einen
     eigenen Bezugsrahmen, an dem sich fixed sonst festmacht. */
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 90;
    margin: 0; padding: 14px var(--pad) 26px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 26px rgba(43,39,38,.11);
    max-height: calc(100vh - 76px); overflow-y: auto;
    -webkit-overscroll-behavior: contain; overscroll-behavior: contain;
  }
  .site-nav[hidden] { display: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__link, .site-nav__toggle { width: 100%; padding: 15px 12px; font-size: 1.125rem; }
  .site-nav__toggle { justify-content: space-between; }
  .has-menu { position: static; }
  .site-nav__menu {
    position: static; min-width: 0; box-shadow: none;
    border: 0; border-left: 2px solid var(--border);
    border-radius: 0; margin: 2px 0 8px 12px; padding: 0 0 0 8px;
  }
  .header-cta .header-phone { display: none; }
}
@media (max-width: 600px) {
  .site-header__logo img { height: 56px; }
}

/* ---------- 7b. Nach oben ---------- */

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-strong); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--orange-text); }
.to-top svg { width: 22px; height: 22px; }
@media (max-width: 780px) {
  /* Ueber der Anrufleiste, nicht dahinter oder ueberlappend */
  .to-top { bottom: calc(62px + env(safe-area-inset-bottom) + 14px); right: 14px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none; } }

/* ---------- 8. Anrufleiste am Handy ---------- */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 15px 10px; font-weight: 600; font-size: 1.0625rem;
  text-decoration: none; background: var(--bg); color: var(--ink-strong);
}
.callbar a.is-primary { background: var(--orange-text); color: #fff; }
.callbar svg { width: 1.1em; height: 1.1em; }
@media (max-width: 780px) {
  .callbar { display: flex; }
  body { padding-bottom: 62px; }
}

/* ---------- 9. Hero ---------- */

.hero {
  position: relative;
  background: var(--anthrazit);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 68%;   /* Lichtspuren im Bild, nicht der leere Himmel */
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(30,27,26,.94) 0%, rgba(30,27,26,.86) 42%, rgba(30,27,26,.42) 72%, rgba(30,27,26,.30) 100%);
}
.hero__inner {
  padding-block: clamp(64px, 9vw, 128px);
  color: #EDE9E7;
  position: relative;
}
.hero__inner::before {
  content: ''; position: absolute; inset: -40px -100vw;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 78%);
          mask-image: linear-gradient(to right, #000 0%, transparent 78%);
}
/* In px, nicht in ch: ch bezieht sich auf die Schriftgröße des
   Containers und nicht auf die der Überschrift. */
/* Die Breiten sind auf den tatsächlichen Text abgestimmt: Überschrift auf
   drei Zeilen, Fließtext auf vier. Damit bleiben die Buttons auch auf einem
   Notebook mit 720 px Höhe über dem Falz. Angabe in px statt ch, weil sich
   ch auf die Schriftgröße des Elements bezieht und beim Skalieren wandert. */
.hero__content { position: relative; max-width: 780px; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.hero .kicker { color: var(--orange-on-dark); }
.hero__lead {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.55;
  color: #DCD6D3; max-width: 700px; margin-bottom: 2rem;
}
.hero .btn--ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* Kleinerer Hero für Unterseiten. Das Overlay ist hier etwas leichter,
   weil diese Motive selbst schon dunkel sind und sonst zulaufen. */
.hero--sub .hero__inner { padding-block: clamp(52px, 7vw, 92px); }
.hero--sub .hero__content { max-width: 720px; }
.hero--sub::after {
  background:
    linear-gradient(100deg, rgba(30,27,26,.92) 0%, rgba(30,27,26,.80) 40%, rgba(30,27,26,.34) 70%, rgba(30,27,26,.16) 100%);
}

/* Alle Unterseiten-Kopfbereiche MIT Bild auf eine gemeinsame Hoehe.
   Kalles Wunsch vom 25.08.2026. Gemessen bei 1265px Fensterbreite lagen sie
   vorher zwischen 453 und 736 Pixeln auseinander, obwohl der Innenabstand
   gleich war: Die Textmengen sind verschieden. Deshalb min-height statt
   padding, und der Inhalt wird senkrecht mittig gesetzt.
   Nicht betroffen sind die Kopfbereiche ohne Bild (Impressum, Datenschutz,
   Produktuebersicht, Vergleichsseiten) - dort waere die Hoehe nur Leerraum -
   und der helle Produkt-Hero, der ein eigenes Layout hat. */
.hero--sub,
.page-head--plan,
.page-head--flotte {
  /* 700px, weil der laengste Vorspann (Spedition und Handwerk) von sich aus
     schon 660px braucht. Darunter waeren die Hoehen wieder ungleich. */
  min-height: clamp(420px, 56vw, 700px);
  display: flex;
  align-items: center;
}
.hero--sub > .hero__inner,
.page-head--plan > .container,
.page-head--flotte > .container { width: 100%; }

/* ---------- 9b. Produkt-Hero, hell statt Vollbild ---------- */

.produkt-hero {
  background: linear-gradient(155deg, #FBFAF9 0%, var(--bg-alt) 55%, #EEE9E5 100%);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(34px, 5vw, 68px) clamp(40px, 6vw, 76px);
  overflow: hidden;
}
.produkt-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
.produkt-hero__grid > * { min-width: 0; }
@media (min-width: 900px) {
  .produkt-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; }
}
.produkt-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: .25em; }
.produkt-hero__claim {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.3;
  color: var(--orange-text); margin: 0 0 1em;
}
.produkt-hero__bild img {
  width: 100%; height: auto;
  filter: drop-shadow(0 26px 44px rgba(43,39,38,.24));
}
.produkt-hero .badge-row { margin-top: 1.8em; }

/* ---------- 9c. Technische Daten ---------- */

.datenblatt { width: 100%; border-collapse: collapse; font-size: 1rem; }
.datenblatt th, .datenblatt td {
  text-align: left; padding: 13px 0; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.datenblatt th { font-weight: 600; color: var(--ink-strong); width: 44%; padding-right: 16px; }
/* Kalles Entscheidung vom 05.08.2026: In den Datenblaettern steht alles in
   einer Schrift. Vorher waren Messwerte in Monospace ausgezeichnet, was je
   nach Zeile mal zutraf und mal nicht und deshalb willkuerlich aussah.
   Die Klasse .mono ist damit aus allen Seiten entfernt, nicht nur stillgelegt. */
.datenblatt td { color: var(--muted); overflow-wrap: anywhere; }
.datenblatt tr:last-child th, .datenblatt tr:last-child td { border-bottom: 0; }

/* Am Handy untereinander statt zweispaltig, sonst sprengen lange
   Messwerte die Spalte. */
@media (max-width: 620px) {
  .datenblatt th, .datenblatt td { display: block; width: auto; padding-right: 0; }
  .datenblatt th { border-bottom: 0; padding: 14px 0 2px; }
  .datenblatt td { padding: 0 0 14px; }
}

/* ---------- 9e. Vergleichstabelle ---------- */

.vergleich-wrap { overflow-x: auto; }
.vergleich {
  width: 100%; min-width: 640px; border-collapse: collapse;
  font-size: 1rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.vergleich thead th {
  text-align: left; padding: 16px 18px;
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  font-family: var(--font-body); font-weight: 600; color: var(--ink-strong);
  font-size: 1.0625rem;
}
.vergleich thead th:first-child { width: 22%; }
.vergleich thead th .zusatz {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); margin-bottom: 4px;
}
.vergleich th[scope="row"] {
  text-align: left; padding: 15px 18px; vertical-align: top;
  font-weight: 600; color: var(--ink-strong);
  border-bottom: 1px solid var(--border-soft);
  background: #FCFBFA;
}
.vergleich td {
  padding: 15px 18px; vertical-align: top; color: var(--muted);
  border-bottom: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
.vergleich .stark { color: var(--ink); }

/* ---------- Tariftabelle auf den Geraeteseiten ----------
   Eigener Stil, nicht .vergleich. Der ist fuer den Geraetevergleich
   gebaut: erste Spalte 22 Prozent und min-width 640px. Beides passt hier
   nicht, weil die Tabelle in der schmalen Textspalte steht (gemessen 644px)
   und links ganze Saetze stehen. Ergebnis war eine 172px-Spalte, in der
   der Text sechszeilig umbrach, und ein Rollbalken.
   Kalle am 26.08.2026: "sieht etwas komisch aus". */
.tarife-wrap { overflow-x: auto; margin: 1.2em 0; }
.tarife {
  width: 100%; min-width: 380px; border-collapse: collapse;
  font-size: 1rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.tarife thead th {
  text-align: left; padding: 12px 16px;
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-weight: 500;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); white-space: nowrap;
}
.tarife thead th:first-child { width: 54%; white-space: normal; }
.tarife th[scope="row"] {
  text-align: left; padding: 13px 16px; vertical-align: middle;
  font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.45;
}
.tarife td {
  padding: 13px 16px; vertical-align: middle; color: var(--ink-strong);
  border-bottom: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tarife tr:last-child th, .tarife tr:last-child td { border-bottom: 0; }
/* Die erste Zeile ist der Einstiegstarif, der interessiert am meisten. */
.tarife tbody tr:first-child td { font-weight: 600; }

@media (max-width: 700px) {
  .vergleich { min-width: 560px; }
  .vergleich thead th, .vergleich th[scope="row"], .vergleich td { padding: 12px 14px; font-size: .9375rem; }
}
.tabellen-hinweis {
  font-size: .875rem; color: var(--muted); margin-top: 10px;
}

/* Nummerierter Ablauf. Seit 26.08.2026 auf der Tachograph-Manager-Seite,
   erste Verwendung. Die Ziffer sitzt in einem Kreis links neben dem Schritt. */
.ablauf { list-style: none; padding: 0; margin: 0; counter-reset: schritt; }
.ablauf li {
  counter-increment: schritt; position: relative;
  padding-left: 52px; margin-bottom: 1.5em;
}
.ablauf li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--orange-text); color: #fff;
  font-weight: 600; font-size: .9375rem; line-height: 1;
}
.ablauf h3 { margin: 0 0 .25em; font-size: 1.0625rem; }
.ablauf p { margin: 0; }
.section--dark .ablauf li::before { background: var(--orange-on-dark); color: var(--anthrazit-deep); }

/* Kennzeichnung, dass ein Abschnitt eine hoehere Leistungsstufe braucht.
   Seit 26.08.2026, Kalles Wunsch: Die Restlenkzeit gibt es nur mit
   Tachograph Manager Plus, und das soll man sofort sehen und nicht erst im
   Kleingedruckten darunter. */
.stufe-hinweis {
  margin: .5em 0 0; font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--akzent);
}

/* Bildunterschrift. Seit 26.08.2026, erste auf der Website. Anlass: Die
   Oberflaechenaufnahmen aus dem Webfleet-Produktmaterial sind englisch,
   eine deutsche Zeile darunter sagt, was man sieht. */
.bildzeile {
  font-size: .875rem; color: var(--muted); margin-top: 10px; line-height: 1.5;
}
/* Auf dunklem Grund stuende --muted mit 1,50:1 da, also unlesbar. Dieselbe
   Falle wie bei der Zitat-Quellenzeile am 26.08.2026. --muted-on-dark
   erreicht 6,53:1. */
.section--dark .bildzeile { color: var(--muted-on-dark); }

.fussnoten {
  margin-top: 2.4em; padding-top: 1.4em;
  border-top: 1px solid var(--border);
  font-size: .9375rem; color: var(--muted);
}
.fussnoten ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }

/* ---------- 9d. Eingebettetes Fremdwerkzeug, zwei Klicks ----------
   Nichts wird geladen, bevor der Besucher zugestimmt hat. Damit bleibt
   die Aussage in der Datenschutzerklärung wahr und es braucht kein
   Zustimmungsbanner für die ganze Seite. */

.einbettung {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg); overflow: hidden;
}
.einbettung__kopf { padding: clamp(22px, 3vw, 30px); }
.einbettung__kopf h2,
.einbettung__kopf h3 { margin-bottom: .45em; }
/* Kein max-width. Bis 26.08.2026 stand hier 62ch, die Lesebreite fuer
   Fliesstext. In diesem Kasten war das falsch: Der Hinweiskasten daneben
   laeuft ueber die volle Breite, die Absaetze brachen bei 595 von 1070
   verfuegbaren Pixeln um. Das sah ausgefranst aus. Kalle am 26.08.2026:
   der Text soll ueber die ganze Breite laufen. */
.einbettung__kopf p { color: var(--muted); font-size: 1rem; }
.einbettung__hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  background: #FDF6F1; border: 1px solid #F0CDB2;
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 1.2em 0 1.4em;
  font-size: .9375rem; color: var(--orange-btn-h);
}
.einbettung__hinweis svg { width: 20px; height: 20px; flex: none; margin-top: .1em; color: var(--orange-text); }
.einbettung__rahmen { border-top: 1px solid var(--border); background: var(--bg-alt); }
.einbettung__rahmen iframe { display: block; width: 100%; height: 950px; border: 0; }
@media (max-width: 700px) { .einbettung__rahmen iframe { height: 1250px; } }
.einbettung__fuss {
  padding: 14px 20px; border-top: 1px solid var(--border);
  font-size: .875rem; color: var(--muted); background: var(--bg-alt);
}

/* ---------- 10. Beleg-Zeile, das Erkennungsmerkmal ---------- */

.beleg {
  margin: 2.2rem 0 0;
  padding: 18px 20px;
  background: rgba(20,18,17,.62);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .9rem; line-height: 1.9;
  color: #E5DFDC;
  overflow-x: auto;
}
.beleg--light {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--ink);
}
.beleg__caption {
  display: block; font-family: var(--font-body); font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-on-dark); margin-bottom: 10px;
}
.beleg--light .beleg__caption { color: var(--muted); }
/* Die Zeile darf schmal nicht umbrechen, sie soll wie ein Ausdruck
   aussehen. Sie scrollt stattdessen innerhalb ihres eigenen Rahmens. */
.beleg table { border-collapse: collapse; width: 100%; min-width: 300px; }
.beleg td { padding: 1px 0; white-space: nowrap; vertical-align: baseline; }
.beleg td + td { padding-left: 1.6em; }
.beleg .t { color: var(--orange-on-dark); }
.beleg--light .t { color: var(--orange-text); }
.beleg .v { text-align: right; }
.beleg tr { opacity: 1; }

/* Der eine bewegte Moment: Zeilen laufen an wie ein Ausdruck */
@media (prefers-reduced-motion: no-preference) {
  .beleg--animate tr { opacity: 0; animation: belegIn .28s ease-out forwards; }
  .beleg--animate tr:nth-child(1) { animation-delay: .10s; }
  .beleg--animate tr:nth-child(2) { animation-delay: .23s; }
  .beleg--animate tr:nth-child(3) { animation-delay: .36s; }
  .beleg--animate tr:nth-child(4) { animation-delay: .49s; }
}
@keyframes belegIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 11. Kennzahlenleiste ---------- */

.statbar {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 800px) { .statbar { grid-template-columns: repeat(4, 1fr); } }
.statbar__item { padding: 26px 24px; border-top: 1px solid var(--border-soft); border-left: 1px solid var(--border-soft); }
.statbar__item:nth-child(-n+2) { border-top: 0; }
.statbar__item:nth-child(odd) { border-left: 0; }
@media (min-width: 800px) {
  .statbar__item { border-top: 0; }
  .statbar__item:first-child { border-left: 0; }
  .statbar__item:nth-child(odd) { border-left: 1px solid var(--border-soft); }
  .statbar__item:first-child { border-left: 0; }
}
.statbar__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 5.4vw, 2.5rem); line-height: 1.05;
  color: var(--orange-text); letter-spacing: -.02em;
  display: block; margin-bottom: .28em;
  overflow-wrap: anywhere;
}
.statbar__value .unit { font-size: .52em; font-weight: 600; color: var(--ink-strong); margin-left: .3em; }
.statbar__value .pre { font-size: .5em; font-weight: 600; color: var(--ink-strong); margin-right: .35em; }
.statbar__value--text { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.25; color: var(--ink-strong); }
.statbar__label { font-size: 1rem; color: var(--muted); line-height: 1.4; }
.statbar__note {
  margin: 14px 0 0; font-size: .9375rem; color: var(--muted);
}
/* Dieselbe Notiz auf dunklem Grund. var(--muted) ist dort nicht mehr lesbar,
   deshalb ein aufgehellter Ton aus derselben warmgrauen Familie.
   Läuft bewusst über die volle Containerbreite, nicht auf Lesebreite begrenzt. */
.statbar__note--dark { color: #BDB6B2; }

/* Pull-up: Leiste überlappt den Hero */
.statbar-wrap { margin-top: calc(var(--section) * -.42); position: relative; z-index: 3; }

/* ---------- 11b. Kundenzitat ---------- */

/* Fuer echte, freigegebene Kundenaussagen. Orangefarbene Kante links wie beim
   Callout, damit es als eigene Stimme erkennbar ist und nicht als unser Text.
   Das Anfuehrungszeichen ist dekorativ und per aria-hidden ausgeblendet. */
.zitat {
  margin: 0 0 clamp(28px, 3.4vw, 44px);
  /* Links mehr Innenabstand, damit das grosse Anfuehrungszeichen eine eigene
     Spalte bekommt und nicht unter dem Text liegt. */
  padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.6vw, 36px)
           clamp(24px, 2.6vw, 34px) clamp(58px, 6vw, 88px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  position: relative;
}
.zitat__text {
  margin: 0;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-strong);
  font-style: italic;
}
/* Grosses Anfuehrungszeichen als Schmuck. Rein dekorativ, deshalb ohne
   eigenen Textinhalt im Lesefluss: Screenreader lesen das Zitat ohnehin
   ueber blockquote als solches. */
.zitat::before {
  content: '\201E';                 /* deutsches oeffnendes Anfuehrungszeichen */
  position: absolute;
  left: clamp(14px, 1.6vw, 26px);
  top: clamp(6px, 1.2vw, 18px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 6vw, 5.4rem);
  line-height: 1;
  color: var(--orange);
  opacity: .34;
  pointer-events: none;
}
.section--dark .zitat::before { color: var(--orange-on-dark); opacity: .42; }
.zitat__text p { margin: 0 0 .7em; }
.zitat__text p:last-child { margin-bottom: 0; }
.zitat__quelle {
  margin: 1.1em 0 0; font-size: .9375rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .4em .9em;
}
.zitat__quelle strong { color: var(--ink-strong); font-weight: 600; }
.section--dark .zitat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.section--dark .zitat__text { color: #fff; }
/* Die Quellenzeile hatte keine Dunkelregel: Auf .section--dark stand sie mit
   1,58:1, der fette Kundenname sogar mit 1,15:1. Grund war .zitat__quelle
   strong weiter oben, gleiche Spezifitaet wie .section--dark strong, aber
   spaeter in der Datei. Seit 26.08.2026, als der Referenzabschnitt der
   Startseite dunkel wurde. */
.section--dark .zitat__quelle { color: #B8B0AC; }
.section--dark .zitat__quelle strong { color: #fff; }

/* ---------- 12. Karten und Bento-Raster ---------- */

.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: .45em; }
/* In Kartenlisten mit Gruppenueberschriften ist der Gruppentitel das h3 und
   der Kartentitel das h4. Damit die Gliederung stimmt, ohne dass die Karte
   optisch kleiner wird, erbt h4 hier die h3-Groesse. Siehe /service/. */
.card h4 {
  margin-bottom: .45em;
  font-size: 1.3rem; line-height: 1.35; letter-spacing: -.005em;
}
.card p { color: var(--muted); font-size: 1.0625rem; }
.card__icon {
  width: 26px; height: 26px; color: var(--orange); margin-bottom: 18px; flex: none;
}
.card__label {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted); margin-bottom: 12px; display: block;
}
.card__media { margin: -28px -28px 24px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }

/* verlinkte Karte */
a.card { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
a.card:hover { border-color: #D6CFCB; box-shadow: var(--shadow-lift); transform: translateY(-2px); }
a.card h3, a.card h4 { color: var(--ink-strong); }

/* Produktkachel mit Bild beim Mouseover.
 *
 * Absichtlich eine reine Zugabe fuer die Maus, kein Ersatz fuer etwas:
 *  - Die Tafel liegt absolut ueber der Karte, deshalb springt beim Zeigen
 *    kein Raster und keine Nachbarkachel.
 *  - Der Knopf ist ein <span>, kein <a>. Ein Link im Link waere ungueltiges
 *    HTML, und die ganze Kachel ist ohnehin der Link.
 *  - Ohne Maus (Handy, Tablet) bleibt die Tafel ganz aus. Dort steht weiter
 *    "Datenblatt ansehen", es geht also nichts verloren. Das Produktbild
 *    steht auf der Zielseite gross und in Ruhe.
 *  - :focus-within zeigt sie auch beim Durchtabben mit der Tastatur.
 */
.card__reveal { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* Wo der Bildeinblender laeuft, zeigt er selbst "Mehr dazu". Die Zeile
     in der Karte waere daneben doppelt und wird von ihm ohnehin verdeckt.
     Ohne Maus gibt es den Einblender nicht (display:none oben), dort
     bleibt die Zeile der einzige Hinweis, dass die Karte irgendwohin
     fuehrt. Kalle am 26.08.2026.

     :has ist noetig, nicht bequem. Auf der Startseite haben 4 und im
     Servicebereich 2 Produktkarten gar keinen Einblender. Ohne diese
     Bedingung stuenden die mit der Maus voellig ohne Hinweis da.
     Browser ohne :has lassen die Regel weg, dann ist es wie bisher. */
  .card--produkt:has(.card__reveal) .card__more { display: none; }

  a.card--produkt { position: relative; overflow: hidden; }
  .card__reveal {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 14px;
    position: absolute; inset: auto 0 0 0; height: 78%;
    padding: 0 22px 24px;
    background: linear-gradient(to bottom, rgba(250,249,248,0) 0%, var(--bg) 26%, var(--bg) 100%);
    opacity: 0; transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    /* Sicherheitsnetz: Was trotz Deckel zu gross wird, wird abgeschnitten
       statt sich ueber die Ueberschrift zu legen. */
    overflow: hidden;
  }
  a.card--produkt:hover .card__reveal,
  a.card--produkt:focus-within .card__reveal { opacity: 1; transform: none; }

  .card__reveal img {
    max-width: 100%; max-height: 118px; width: auto; height: auto;
    object-fit: contain; margin-top: auto;
  }
  /* Bildschirmfotos statt freigestellter Geraete: Die brauchen die volle
     Breite, sonst ist von einer Kartenansicht nichts mehr zu erkennen.
     Eigene Ecken, weil das Motiv anders als beim Geraet bis an den Rand geht. */
  .card__reveal--breit img {
    width: auto; height: auto; max-width: 100%;
    /* Deckel, damit Bild, Abstand und Knopf zusammen in die Tafel passen.
       Ohne ihn ragte das Bild auf den kurzen Kacheln der Gruppe "Weitere
       Loesungen" 51 px nach oben heraus und lag ueber der Ueberschrift
       (gemessen am 05.08.2026: Tafel 204 px, Bild 180 px, Knopf 38 px).
       min-height: 0 erlaubt dem Flex-Kind ueberhaupt erst zu schrumpfen. */
    min-height: 0; max-height: calc(100% - 76px);
    border-radius: 8px; border: 1px solid var(--border);
  }
  /* Kuerzerer Verlauf als bei den Geraetebildern. Ein Bildschirmfoto hat eine
     harte Kante, und wenn darueber noch Textzeilen durchschimmern, sieht das
     nach Fehler aus statt nach Verlauf. Die Hoehe bleibt bei 78 Prozent,
     hoeher wuerde der Verlauf die Ueberschrift auswaschen. */
  .card__reveal--breit {
    /* Fester Abstand statt Prozentwert: Bei 78 Prozent Hoehe begann die Tafel
       51 px unter der Kartenkante, die Ueberschrift endet aber erst bei 88 px.
       Der Verlauf legte sich also ueber den Titel und wusch ihn aus. Gemessen
       am 05.08.2026, deshalb 96 px. */
    inset: 96px 0 0 0; height: auto;
    background: linear-gradient(to bottom, rgba(250,249,248,0) 0%, var(--bg) 14%, var(--bg) 100%);
  }
  /* Download-Karten auf /service/ sind kuerzer als die Produktkacheln der
     Startseite. Gemessen: Karte 246px, Tafel 192px. Mit den 118px der
     Standardregel passten Bild, Abstand, Knopf und Innenabstand zusammen auf
     194px und liefen oben aus der Tafel heraus, wo overflow:hidden sie
     abgeschnitten hat. In px statt Prozent, weil eine Prozentangabe gegen eine
     auto-hohe Tafel nicht aufloest.
     Rechnung an der kuerzesten gemessenen Tafel (168px):
     168 - 24 Innenabstand - 38 Knopf - 14 Abstand = 92px fuer das Bild.
     88px lassen vier Pixel Luft. */
  .card--pdf .card__reveal img { max-height: 88px; }

  /* Die Karten der Produktuebersicht sind kuerzer als die Kacheln der
     Startseite: kuerzeste gemessene Tafel 176px. Abzueglich 24px
     Innenabstand, 38px Knopf und 14px Abstand bleiben 100px fuers Bild.
     92px lassen Luft. Gilt auch fuer die breiten Tafeln, deren
     Prozentangabe gegen eine auto-hohe Tafel nicht aufloest. */
  .card--kompakt .card__reveal img { max-height: 92px; }

  /* Loesungskacheln der Startseite: Hier fuellt das Bild die GANZE Karte,
     nicht nur eine Tafel im unteren Teil. Kalles Vorgabe vom 26.08.2026.
     Deshalb keine Hoehendeckel und kein Verlauf wie bei den Geraetekacheln,
     sondern ein deckendes Bild mit object-fit: cover, damit jedes
     Seitenverhaeltnis passt, ohne verzerrt zu werden. */
  .card--loesung .card__reveal {
    inset: 0; height: auto; padding: 0; gap: 0;
    background: none; justify-content: flex-end;
    border-radius: inherit;
  }
  .card--loesung .card__reveal picture {
    position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  }
  .card--loesung .card__reveal img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; margin: 0; display: block;
  }
  /* Abdunklung nur unten, damit der Knopf lesbar bleibt und das Motiv
     oben unangetastet sichtbar ist. */
  .card--loesung .card__reveal::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
    background: linear-gradient(to bottom, rgba(43,39,38,0), rgba(43,39,38,.72));
    border-radius: inherit; pointer-events: none;
  }
  .card--loesung .card__btn { position: relative; z-index: 1; margin: 0 0 24px; }

  .card__btn {
    display: inline-flex; align-items: center; gap: .5em; flex: none;
    background: var(--orange); color: #fff;
    font-weight: 600; font-size: .9375rem; line-height: 1;
    padding: 11px 18px; border-radius: 999px;
  }
  .card__btn svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .card__reveal { transition: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) { a.card, a.card:hover { transition: none; transform: none; } }

.card__more {
  margin-top: auto; padding-top: 18px;
  font-weight: 500; font-size: 1rem; color: var(--orange-text);
  display: inline-flex; align-items: center; gap: .45em;
}
.card__more svg { width: .95em; height: .95em; }

/* Rasterkinder dürfen nicht breiter werden als ihre Spalte. Ohne das
   sprengt breiter Inhalt wie die Beleg-Tabelle das ganze Layout. */
.grid > *, .split > *, .bento > *, .head-split > *,
.prose-split > *, .statbar > *, .contact-panel > * { min-width: 0; }

/* Raster */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Bento: großes Feld links, zwei schmale rechts */
.bento { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .bento { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  .bento__wide { grid-row: span 2; }
}
.bento__wide .card__media img { aspect-ratio: 16/9; }

/* Zwischenüberschrift über einer Kartengruppe */
/* Groesser auf Kalles Wunsch, 05.08.2026. Vorher 1,0625rem, damit kaum von
   der Fliesstextgroesse zu unterscheiden. Bleibt bewusst in der Textschrift,
   damit die Gruppenzeile die h2 darueber nicht ueberholt. */
.group-title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--ink-strong);
  letter-spacing: -.01em;
  margin: clamp(34px, 4vw, 52px) 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: .7em;
}
.group-title:first-child { margin-top: 0; }
.group-title .zusatz {
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
  margin-left: auto;
}
@media (max-width: 560px) {
  .group-title { flex-direction: column; gap: .3em; }
  .group-title .zusatz { margin-left: 0; }
}

/* Bild-neben-Text */
.split {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse .split__media { order: 2; }
}
/* Oben ausrichten, wo ein kurzes Element neben einem langen Text steht.
   Sonst hängt etwa die Beleg-Zeile auf halber Höhe in der Luft. */
.split--top { align-items: start; }
.split__media img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ---------- 13. Häkchenliste ---------- */

.checklist { list-style: none; margin: 1.4em 0; padding: 0; display: grid; gap: 13px; }
.checklist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 13px;
  align-items: start; line-height: 1.55;
}
.checklist svg { width: 22px; height: 22px; color: var(--orange); margin-top: .18em; flex: none; }
.section--dark .checklist svg { color: var(--orange-on-dark); }
.section--dark .plainlist li::before { background: var(--orange-on-dark); }

/* ---------- 14. Hinweiskasten ---------- */

.callout {
  border: 1px solid var(--orange);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: #FDF6F1;
  padding: 24px 26px;
  margin: 2em 0;
}
.callout h3 { margin-bottom: .5em; }
.callout p:last-child { margin-bottom: 0; }
.section--dark .callout {
  background: rgba(255,255,255,.05);
  border-color: var(--orange-on-dark);
  color: #E4DEDB;
}
/* Sachlicher Hinweis ohne Signalwirkung */
.callout--plain {
  background: var(--bg-alt);
  border-color: var(--border);
  border-left-color: var(--muted);
}

/* Schlichter Seitenkopf für Rechtsseiten */
.page-head {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(40px, 5vw, 68px);
}
.page-head h1 { margin-bottom: .35em; }
.page-head .lead { margin-bottom: 0; }

/* Kopfbereich mit dem Fuhrpark-Motiv, derzeit nur auf /konfigurator/.
   Gluecksfall beim Format: Der Kopfbereich ist rund 3,2:1, das Motiv 3,37:1.
   Formatfuellend geht daher fast nichts verloren, die ganze Reihe vom PKW bis
   zum Bagger bleibt sichtbar.

   Kalles Entscheidung vom 25.08.2026: Statt eines blassen Motivs hinter
   dunkler Schrift liegt das Bild jetzt in voller Staerke, darueber der dunkle
   Verlauf, und die Schrift ist weiss. Der Grund war messbar: Der orange Kicker
   hatte auf hellem Grund nur 4,62 Kontrast und kippte bei jeder Abdunklung
   unter die geforderten 4,5. Auf dunklem Grund entfaellt das Problem. */
.page-head--flotte {
  position: relative; overflow: hidden;
  background-color: var(--anthrazit);
  color: #EDE9E7;
  border-bottom: 0;
}
.page-head--flotte::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/img/fuhrpark-flotte-voll.webp');
  background-repeat: no-repeat;
  /* Das vollstaendige Original (1814x867, Verhaeltnis 2,09) statt des auf
     1814x538 beschnittenen. Es hat Himmel oben und Asphalt unten und passt
     damit in einen 700px hohen Kopfbereich, ohne dass seitlich viel verloren
     geht: Bei 1265px Fensterbreite bleiben 86 Prozent der Bildbreite sichtbar,
     beim beschnittenen Motiv waren es nur 54. Unten ausgerichtet, damit die
     Fahrzeuge im Bild bleiben und oben der Himmel weicht. */
  background-position: center bottom;
  background-size: cover;
}
/* Text nach oben, damit er nicht auf den Fahrzeugen liegt. */
.page-head--flotte { align-items: flex-start; }
.page-head--flotte > .container { padding-top: clamp(20px, 3vw, 44px); }
/* Verlauf wie beim Unterseiten-Hero: links dunkel fuer den Text, rechts
   durchsichtiger, damit Sattelzug und Bagger sichtbar bleiben. */
.page-head--flotte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Abdunklung nur hinter dem Textblock, nach aussen auf null auslaufend.
     Die Staerke steht auf 80 Prozent. Kalle hat am 25.08.2026 sechs Stufen
     zwischen Originalbild und voller Abdunklung durchgesehen und diese
     gewaehlt. Bewusste Entscheidung zugunsten des Motivs: Der gemessene
     Textkontrast liegt damit bei 3,18 statt der geforderten 4,5. Nicht
     stillschweigend hochsetzen. */
  --flotte-dunkel: .8;
  background:
    radial-gradient(ellipse 92% 104% at 22% 44%,
      rgba(30,27,26,calc(var(--flotte-dunkel, 1) * .94)) 0%,
      rgba(30,27,26,calc(var(--flotte-dunkel, 1) * .92)) 46%,
      rgba(30,27,26,calc(var(--flotte-dunkel, 1) * .52)) 72%,
      rgba(30,27,26,0) 100%);
}
.page-head--flotte > .container { position: relative; z-index: 1; }
/* Text endet vor den Fahrzeugen. Spaltenweise gemessen lagen die schlechtesten
   Kontraste bei 77 bis 92 Prozent der Breite, also dort, wo der helle Sattelzug
   steht und der Verlauf am duennsten ist: Vorspann 1,08 und Ueberschrift 2,10
   statt der geforderten 4,5. Ohne Begrenzung muesste der Verlauf so dunkel
   werden, dass vom Fuhrpark nichts mehr zu sehen ist. */
@media (min-width: 901px) {
  .page-head--flotte .breadcrumb,
  .page-head--flotte .kicker,
  .page-head--flotte h1,
  .page-head--flotte .lead { max-width: 56%; }
}

/* Produktuebersicht, 26.08.2026. Gleiche Machart wie oben, nur ein anderes
   Motiv: derselbe Fuhrpark bei Daemmerung, dazu Anhaenger und Bagger, also
   genau die Fahrzeugarten, nach denen das Raster darunter sortiert ist.
   Das Bild ist 1942x809 (2,40), etwas breiter als das Konfigurator-Motiv
   (2,09). Verlauf, Textbreite und Abdunklung bleiben unveraendert, die
   stammen aus Kalles Auswahl vom 25.08.2026. */
.page-head--produkte::before {
  background-image: url('/assets/img/hero-produktuebersicht.webp');
}

.page-head--flotte h1 { color: #fff; }
.page-head--flotte .kicker { color: var(--orange-on-dark); }
.page-head--flotte .lead { color: #DCD6D3; }
.page-head--flotte .lead strong,
.page-head--flotte strong { color: #fff; }
.page-head--flotte .breadcrumb,
.page-head--flotte .breadcrumb a { color: #C6BEBA; }
.page-head--flotte .breadcrumb li::after { color: #8E8783; }

/* Am Handy laeuft der Text ueber die volle Breite und damit auch ueber die
   hellen Stellen des Motivs. Dort deshalb gleichmaessig abdunkeln. */
@media (max-width: 780px) {
  .page-head--flotte::after { background: rgba(30, 27, 26, .86); }
}
@media print { .page-head--flotte::before, .page-head--flotte::after { display: none; } }

/* Kopfbereich mit Anschlussplan als Hintergrund, derzeit nur auf /service/.
   Gleiche Technik wie beim Rasterhintergrund: Pseudoelement, maskiert, damit
   Ueberschrift und Vorspann lesbar bleiben. Das Motiv laeuft nach links aus und
   steht nie hinter dem Text. Am Handy ausgeblendet, weil dort kein Platz neben
   der Ueberschrift bleibt. */
.page-head--plan { position: relative; overflow: hidden; }
.page-head--plan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/img/anschlussplan.webp');
  background-repeat: no-repeat;
  background-position: right center;
  /* Gemessen: Kopfbereich 454px hoch, sichtbares Fenster rechts 531px breit.
     Bei 132% war das Bild 2112px breit, sichtbar waren nur 25 Prozent davon,
     also die leere rechte Ecke. Bei 78% ist es rund 1250px breit, damit liegen
     die beiden C137-Stecker im sichtbaren Bereich. */
  background-size: auto 78%;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 58%, #000 95%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 58%, #000 95%);
}
.page-head--plan > .container { position: relative; z-index: 1; }
/* Text endet vor der Zeichnung. Gemessen: ohne diese Grenze lief der Vorspann
   668px weit unter das Motiv. */
@media (min-width: 901px) {
  .page-head--plan h1, .page-head--plan .lead { max-width: 52%; }
}
@media (max-width: 900px) { .page-head--plan::before { display: none; } }
@media print { .page-head--plan::before { display: none; } }

/* ---------- 14b. Aktualitätsband ---------- */

.newsband {
  background: linear-gradient(160deg, var(--anthrazit) 0%, var(--anthrazit-deep) 100%);
  color: #E4DEDB;
  border-top: 3px solid var(--orange);
  padding-block: clamp(30px, 4vw, 46px);
}
.newsband__inner { max-width: 78ch; }
.newsband strong { color: #fff; }
.newsband p { font-size: 1.0625rem; }
.newsband p:last-child { margin-bottom: 0; }
.newsband__lead { font-size: 1.1875rem !important; line-height: 1.5; }
.newsband a { color: var(--orange-on-dark); font-weight: 500; }

/* ---------- 14c. Schlichte Aufzählung ---------- */

.plainlist { list-style: none; margin: 1.2em 0; padding: 0; display: grid; gap: 10px; }
.plainlist li {
  padding-left: 20px; position: relative; line-height: 1.55;
}
.plainlist li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
}

/* ---------- 15. Nummerierte Abfolge ---------- */

.steplist { list-style: none; counter-reset: step; margin: 2em 0 0; padding: 0; display: grid; gap: 8px; }
.steplist > li {
  counter-increment: step;
  display: grid; grid-template-columns: 46px 1fr; gap: 22px;
  padding: 24px 0; border-top: 1px solid var(--border);
}
.steplist > li:last-child { border-bottom: 1px solid var(--border); }
.steplist > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-weight: 500; font-size: 1rem;
  color: var(--orange-text); padding-top: .18em;
}
.steplist h3 { margin-bottom: .35em; }
.steplist p { color: var(--muted); margin-bottom: 0; }

/* ---------- 16. Einwände, Aufklappen ---------- */

.faq { border-top: 1px solid var(--border); margin-top: 2em; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 0;
  font-family: var(--font-body); font-weight: 600; font-size: 1.1875rem;
  line-height: 1.4; color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange-text); }
.faq__sign { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--orange); transition: transform .18s ease; }
.faq details[open] .faq__sign { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq__sign { transition: none; } }
/* Antworten ueber die volle Breite, Kalles Entscheidung vom 05.08.2026.
   Vorher auf 68ch begrenzt, das ist die klassische Lesebreite. Die Antworten
   sind kurz genug, dass die laengere Zeile hier nicht stoert. */
.faq__body { padding: 0 44px 24px 0; color: var(--muted); }
@media (max-width: 480px) {
  .faq summary { gap: 12px; font-size: 1.0625rem; }
  .faq__body { padding-right: 0; }
}
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- 17. Kontakt ---------- */

.contact-panel {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 940px) { .contact-panel { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); } }
.contact-panel__intro { padding: clamp(30px, 4vw, 52px); }
.contact-panel__form {
  padding: clamp(30px, 4vw, 52px);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
@media (min-width: 940px) {
  .contact-panel__form { border-top: 0; border-left: 1px solid var(--border); }
}

.contact-list { list-style: none; margin: 1.8em 0 0; padding: 0; display: grid; gap: 12px; }
.contact-list a, .contact-list__item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--ink-strong); background: var(--bg);
}
.contact-list a:hover { border-color: var(--orange); }
.contact-list svg { width: 22px; height: 22px; color: var(--orange); flex: none; }
.contact-list .label { display: block; font-size: .875rem; color: var(--muted); line-height: 1.3; }
.contact-list .value { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.contact-list .value--mono { font-family: var(--font-mono); font-weight: 500; }

/* ---------- 18. Formular ---------- */

.anfrage-form h3 { margin-bottom: .5em; }
.anfrage-form > :last-child { margin-bottom: 0; }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; font-size: 1rem; margin-bottom: 7px; color: var(--ink-strong); }
.field .hint { font-weight: 400; color: var(--muted); font-size: .9375rem; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  padding: 13px 15px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--orange); }
.field textarea { min-height: 130px; resize: vertical; }
.field--row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field--row { grid-template-columns: 1fr 1fr; } }

.field--check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 22px 0; }
.field--check input { width: 20px; height: 20px; margin-top: .22em; accent-color: var(--orange-text); }
.field--check label { font-weight: 400; font-size: 1rem; color: var(--ink); margin: 0; line-height: 1.5; }

/* Köderfeld gegen Spam */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .9375rem; color: var(--muted); margin-top: 16px; }

.form-msg { padding: 16px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; font-size: 1rem; }
.form-msg--ok { background: #F0F6EF; border: 1px solid #BBD3B6; color: #2C4A26; }
.form-msg--err { background: #FDF1EC; border: 1px solid #EFC3AC; color: var(--orange-btn-h); }

/* ---------- 19. Platzhalter, sichtbar bis zur Freigabe ---------- */

.ph {
  display: inline;
  overflow-wrap: anywhere; word-break: break-word;
  background: repeating-linear-gradient(135deg, #FBEDE4, #FBEDE4 7px, #F6E1D3 7px, #F6E1D3 14px);
  border: 1px dashed var(--orange-text);
  border-radius: 4px;
  padding: 0 .38em;
  color: var(--orange-btn-h);
  font-family: var(--font-mono); font-size: .82em; font-weight: 500;
  letter-spacing: 0;
}
.section--dark .ph, .hero .ph {
  background: rgba(245,137,60,.15); border-color: var(--orange-on-dark); color: #FBD4B6;
}
.statbar__value .ph { font-size: .5em; }

.img-missing {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; padding: 28px; text-align: center;
  background: var(--bg-alt);
  border: 1px dashed #C6BEB9; border-radius: var(--radius-lg);
  color: var(--muted); font-family: var(--font-mono); font-size: .875rem;
  line-height: 1.6;
}

/* ---------- 20. Fußzeile ---------- */

.site-footer {
  background: var(--anthrazit); color: #C9C2BE;
  padding-block: clamp(48px, 6vw, 76px) 34px;
  font-size: 1rem;
}
.site-footer__top {
  display: grid; gap: 36px; grid-template-columns: 1fr;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.13);
}
@media (min-width: 760px) { .site-footer__top { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 48px; } }
/* Helles Feld, weil das Logo einen weißen Grund hat und auf dem
   Anthrazit sonst als harter Kasten stünde. */
.site-footer__logo {
  display: inline-block;
  margin-bottom: 20px;
}
.site-footer__logo img { height: 48px; width: auto; display: block; }
.site-footer h4 { color: #fff; font-size: .8rem; font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #C9C2BE; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer__phone { font-family: var(--font-mono); color: #fff !important; font-weight: 500; }
.site-footer__bottom {
  padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; font-size: .9375rem; color: #B0A8A4;  /* 4,89:1 auf --anthrazit, AA */
}
.site-footer__bottom .sep { margin-left: auto; }
@media (max-width: 600px) { .site-footer__bottom .sep { margin-left: 0; } }

/* ---------- 21. Kleinteile ---------- */

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.badge {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: .9375rem; color: var(--ink); font-weight: 500;
}
.badge svg { width: 1em; height: 1em; color: var(--orange); }
.section--dark .badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #E4DEDB; }
.section--dark .badge svg { color: var(--orange-on-dark); }

.breadcrumb { font-size: .9375rem; color: var(--muted); padding-top: 22px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; }
.breadcrumb li::after { content: '/'; margin-left: .55em; color: #B9B1AD; }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--muted); }

.legal-page { padding-block: clamp(48px, 6vw, 80px); }
.legal-page h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 2em; }
.legal-page h2:first-of-type { margin-top: 1em; }
.legal-page dl { margin: 0 0 1.4em; }
.legal-page dt { font-weight: 600; color: var(--ink-strong); margin-top: .9em; }
.legal-page dd { margin: 0; }

/* AGB (/agb/, 16.09.2026): Inhaltsverzeichnis in Spalten, Klauseln mit
   haengender Nummer in Orange-Text. Nur auf der AGB-Seite (.agb). Die
   Nummern sind Teil des Textes, deshalb <span> im Absatz und keine Liste:
   beim Kopieren und fuer Vorleser bleibt "5.3 Rechnungen sind ..." zusammen. */
.agb-inhalt {
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.agb-inhalt ol {
  margin: 0; padding: 0 0 0 1.6em;
  columns: 3; column-gap: 56px;
  font-size: .96rem; line-height: 1.45;
}
.agb-inhalt li { break-inside: avoid; padding: 4px 0; padding-left: .3em; }
.agb-inhalt li::marker { color: var(--orange-text); font-weight: 600; }
.agb-inhalt a { color: var(--ink-strong); text-decoration: none; }
.agb-inhalt a:hover { color: var(--orange-text); text-decoration: underline; }
@media (max-width: 900px) { .agb-inhalt ol { columns: 2; } }
@media (max-width: 560px) { .agb-inhalt ol { columns: 1; } }

/* Volle Breite wie Impressum und Datenschutz (Kalle am 16.09.2026, nach
   einem Umweg ueber 820 px). Nur der Kopf ist wie im PDF: Ueberschrift
   kleiner, Vorspann kleiner. */
.page-head--agb h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.page-head--agb .lead { font-size: 1.125rem; }
.agb h2 { scroll-margin-top: 130px; }  /* Kopfzeile ist 105 px hoch, gemessen 16.09.2026 */
.agb h2 .agb-nr { color: var(--orange-text); margin-right: .15em; }
.agb-klausel { display: grid; grid-template-columns: 3.4em 1fr; column-gap: .4em; }
.agb-klausel .agb-nr { font-weight: 600; color: var(--orange-text); font-variant-numeric: tabular-nums; }
/* Druck und PDF der AGB: nur der Text, ohne Navigation und Fusszeile.
   Aus dieser Ansicht entsteht /downloads/navitec-agb.pdf (Chrome, headless). */
@page { size: A4; margin: 16mm 18mm; }
@media print {
  body:has(.agb) .site-header, body:has(.agb) .site-footer, body:has(.agb) .breadcrumb,
  body:has(.agb) .skip-link, body:has(.agb) .to-top { display: none !important; }
  body:has(.agb) .page-head { padding-top: 0; }
  .agb-inhalt { break-inside: avoid; border-color: #ccc; }
  .agb-inhalt ol { columns: 2; }
  .agb h2 { break-after: avoid; }
  .agb-klausel { break-inside: avoid; }
  .agb .tabellen-hinweis { display: none; }
}

hr.rule { border: 0; border-top: 1px solid var(--border); margin: var(--section) 0 0; }

@media print {
  .site-header, .callbar, .site-nav, .hero__media { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* ---------- 20. Lösungskonfigurator ---------- */

.container--schmal { max-width: 860px; }

.konf__kopf { margin-bottom: clamp(28px, 3.5vw, 40px); }
.konf__zaehler {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin: 0 0 10px;
}
/* Hinweis, wenn der Konfigurator wiederhergestellte Antworten zeigt. */
.konf__wieder {
  margin: .9em 0 0; font-size: .9375rem; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em;
}
.konf__wieder button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--orange-text);
  text-decoration: underline; text-underline-offset: .18em;
}
.konf__wieder button:hover { color: var(--orange-btn-h); }

.konf__balken { height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
.konf__balken > span {
  display: block; height: 100%; background: var(--orange);
  border-radius: 99px; transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) { .konf__balken > span { transition: none; } }

/* Der Fragenblock ist ein fieldset, deshalb Rahmen und Innenabstand zurücksetzen. */
.konf__schritt { border: 0; padding: 0; margin: 0; min-width: 0; }
.konf__frage {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15;
  color: var(--ink-strong); letter-spacing: -.015em;
  padding: 0; margin-bottom: .35em;
}
/* Volle Breite, seit der Konfigurator nicht mehr im schmalen Container steht.
   Kalles Entscheidung vom 25.08.2026. */
.konf__hilfe { color: var(--muted); margin-bottom: 1.6em; }

.konf__optionen { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .konf__optionen--eng { grid-template-columns: repeat(4, 1fr); }
}

.konf__option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-width: 0;
}
.konf__option:hover { border-color: #D6CFCB; box-shadow: var(--shadow-card); }

/* Der echte Input bleibt bedienbar und sichtbar, nur zurückhaltend gesetzt.
   Ein visuell verstecktes Steuerelement wäre für Screenreader zwar in Ordnung,
   nimmt aber Sehenden die vertraute Auswahlmarke. */
.konf__option input { margin: .25em 0 0; flex: none; accent-color: var(--orange); width: 18px; height: 18px; }
.konf__option__text { display: block; min-width: 0; }
.konf__option__text strong { display: block; color: var(--ink-strong); font-weight: 600; }
.konf__option__text span { display: block; color: var(--muted); font-size: .9375rem; margin-top: .2em; }

.konf__option:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.konf__option:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }

.konf__steuerung {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.konf__warnung { color: var(--orange-text); font-weight: 500; margin: 0; flex-basis: 100%; }

.konf__ergebnis { outline: none; }
.konf__ergebnis > h2 { margin-bottom: .3em; }

.konf__karte {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-card); margin-top: 20px;
}
.konf__karte h3 { margin-bottom: .4em; }

/* Karte mit Produktbild: Bild links, Text rechts. Kalle am 26.08.2026.
   Die Klasse setzt konfigurator.js, sobald wirklich ein Bild geladen wird,
   sonst stuende links eine leere Spalte. Das Bild ueberspannt alle Zeilen
   der Textspalte, damit die Aufteilung unabhaengig davon stimmt, wie viele
   Absaetze rechts stehen. Unter 700px bleibt es untereinander, dort waere
   eine 200px-Spalte zu schmal fuer beides. */
@media (min-width: 700px) {
  .konf__karte--mit-bild {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 32px);
    align-items: start;
  }
  .konf__karte--mit-bild > .konf__karte__bild {
    grid-column: 1; grid-row: 1 / -1;
    margin-bottom: 0; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
  }
  .konf__karte--mit-bild > :not(.konf__karte__bild) { grid-column: 2; }
  .konf__karte--mit-bild > .konf__karte__bild img { max-height: 150px; }
}
.konf__karte p { color: var(--muted); }
.konf__karte .checklist { margin-top: .2em; }

/* Rueckblick auf die eigenen Antworten, steht unter dem Vorspann des
   Ergebnisses. Zweispaltig: links die Frage in Kurzform, rechts die Antwort. */
.konf__angaben {
  margin-top: clamp(20px, 2.5vw, 28px);
  padding: 20px 24px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.konf__angaben h3 { font-size: 1.05rem; margin-bottom: .7em; }
.konf__angaben__liste {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px; margin: 0;
}
.konf__angaben__liste dt { color: var(--muted); font-size: .95rem; }
.konf__angaben__liste dd { margin: 0; font-size: .95rem; }
@media (max-width: 520px) {
  .konf__angaben__liste { grid-template-columns: 1fr; gap: 2px; }
  .konf__angaben__liste dd { margin-bottom: .6em; font-weight: 600; }
}

.konf__hinweise { margin-top: clamp(28px, 3.5vw, 40px); display: grid; gap: 14px; }
.konf__hinweis {
  margin: 0; padding: 16px 20px;
  background: var(--bg-alt); border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem; line-height: 1.55;
}
.konf__hinweis strong { color: var(--ink-strong); }

/* Kopf ueber die volle Containerbreite statt zweispaltig wie .head-split.
   Ueberschrift und Unterzeile laufen beide durch, ohne Lesebreitenbegrenzung. */
.head-voll { margin-bottom: clamp(34px, 4vw, 52px); }
.head-voll h2 { max-width: none; margin-bottom: .45em; }
.head-voll .lead { max-width: none; }

/* ===========================================================================
   Sparrechner
   Eigenes Praefix, damit keine der uebrigen Seiten betroffen ist. Schritte,
   Fortschritt und Ergebnisrahmen kommen vom Konfigurator (.konf__*), hier
   stehen nur die Zahlenfelder, die Regler und die Bilanz.
   =========================================================================== */

.rechner__gruppe { margin-bottom: 2em; }
.rechner__gruppe__titel {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--ink-strong);
  margin: 0 0 .8em; padding-bottom: .5em;
  border-bottom: 1px solid var(--border);
}

.rechner__felder { display: grid; gap: 14px; }
@media (min-width: 700px) {
  .rechner__felder { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

.rechner__feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rechner__feld__name { font-weight: 600; color: var(--ink-strong); font-size: .95rem; }
.rechner__feld__einheit { color: var(--muted); font-size: .85rem; }
.rechner__feld input {
  font: inherit; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); width: 100%;
}
.rechner__feld input:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange);
}
.rechner__startwert-hinweis { margin-top: 1.4em; }

/* ---------- Regler ---------- */

.rechner__regler { display: grid; gap: 22px; margin: 1.8em 0; }
.rechner__regler__zeile {
  display: grid; gap: 8px 16px; align-items: center;
  grid-template-columns: 1fr auto;
}
.rechner__regler__name { grid-column: 1 / -1; font-weight: 600; color: var(--ink-strong); }
.rechner__regler__zeile input[type="range"] { width: 100%; accent-color: var(--orange); min-width: 0; }
.rechner__regler__wert {
  font-family: var(--font-mono, var(--font-display)); font-weight: 700;
  font-size: 1.1rem; color: var(--orange-text); min-width: 4ch; text-align: right;
}

/* ---------- Bilanz ---------- */

.rechner__bilanz { display: grid; gap: 14px; margin: 1.4em 0; }
@media (min-width: 700px) { .rechner__bilanz { grid-template-columns: 1fr 1fr; } }

.rechner__posten {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 18px 20px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--bg-alt);
}
.rechner__posten__name { color: var(--muted); font-size: .95rem; }
.rechner__posten__wert {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.1; color: var(--ink-strong);
}
.rechner__posten__detail { color: var(--muted); font-size: .85rem; }

.rechner__summe {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px;
  padding: 20px 22px; border-radius: 14px;
  background: var(--bg-alt); border: 1px solid var(--border);
}
.rechner__summe__name { font-weight: 600; color: var(--ink-strong); }
.rechner__summe__wert {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1; color: var(--orange-text);
}
.rechner__summe--stark { background: var(--anthrazit); border-color: var(--anthrazit); }
.rechner__summe--stark .rechner__summe__name { color: #fff; }
.rechner__summe--stark .rechner__summe__wert { color: var(--orange-on-dark); }

.rechner__schwelle {
  margin-top: 1.2em; padding: 16px 18px;
  border-left: 3px solid var(--orange); background: var(--bg-alt);
  border-radius: 0 10px 10px 0;
}

/* Tarifübersicht: nur auf /webfleet-tarife/ verwendet, deshalb eigene
   Klassen statt einer Änderung an .tarife, die alle Geräteseiten träfe. */

.tarife__zusatz {
  display: block; font-weight: 400; color: var(--muted);
  font-size: .85rem; margin-top: 2px;
}
.section--dark .tarife__zusatz { color: var(--muted); }

.tarife__erklaerung { margin: 1.6em 0 0; display: grid; gap: .5em 1em; }
@media (min-width: 620px) {
  .tarife__erklaerung { grid-template-columns: max-content 1fr; }
}
.tarife__erklaerung dt {
  font-family: var(--font-mono, var(--font-display)); font-weight: 700;
  color: var(--orange-text); white-space: nowrap;
}
.tarife__erklaerung dd { margin: 0 0 .6em; color: var(--ink); }
@media (min-width: 620px) { .tarife__erklaerung dd { margin-bottom: 0; } }

/* Die Tarif-Tabelle bringt eine eigene weisse Flaeche mit. Steht sie in einem
   dunklen Abschnitt, erben Links und fetter Text trotzdem die Dunkelregeln
   und stehen dann hell auf hell: gemessen am 27.08.2026 auf
   /webfleet-tarife/ mit 2,46:1 fuer den Link und 1,00:1 fuer das <strong>,
   also unsichtbar. Dieselbe Falle wie am 05.08.2026 beim fetten Text, nur
   andersherum. */
.section--dark .tarife a      { color: var(--orange-text); }
.section--dark .tarife strong { color: var(--ink-strong); }

/* hidden schlaegt jede display-Regel.
   Kalle am 27.08.2026: "wenn ich die Seite konfigurator komplett neu oeffne,
   steht immer dieser Text: Ihre Antworten von vorhin sind noch da."
   Ursache war nicht das Gedaechtnis - sessionStorage war leer und das
   hidden-Attribut korrekt gesetzt. Aber .konf__wieder bringt display:flex
   mit, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Dasselbe
   traf den Zurueck-Knopf bei Frage 1. Ohne diese Regel faellt der Fehler
   erst im Screenshot auf, nie im Code. */
[hidden] { display: none !important; }

/* Bestellcodes unter der jeweiligen Tarifstufe. Bis 27.08.2026 standen alle
   dreizehn in einer Fussnote unter der Tabelle, ohne Zuordnung - unbrauchbar
   fuer den, der bestellen will. */
.tarife__codes {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-mono, monospace); font-size: .8rem;
  color: var(--muted); letter-spacing: .01em;
}

/* Lesehilfe fuer die Tarifcodes. Kalle am 03.09.2026: Das zweite Segment ist
   das Land des Kunden (AT/DE), das dritte das Gebiet der Ortung. Vorher stand
   der Code unerklaert da. */
.tarife__codeschluessel {
  /* Zeilenlaenge begrenzen: ueber die vollen 1132 px waeren es mehr als
     110 Zeichen je Zeile. */
  max-width: 820px;
  margin: 1.8em 0; padding: 18px 20px;
  border-left: 3px solid var(--orange); background: var(--bg-alt);
  border-radius: 0 10px 10px 0;
}
.tarife__codeschluessel p { margin: 0 0 .6em; }
.tarife__codeschluessel p:last-child { margin-bottom: 0; }

/* ===========================================================================
   Tarifkachel — Muster vom 03.09.2026, Vorbild sind die Schanes-Kacheln.
   Eigenes Praefix, trifft nur /webfleet-tarife/. Die Symbole stammen aus
   dem vorhandenen Bestand der Seite, es ist keines dazugezeichnet.
   =========================================================================== */

/* Zwei Kacheln nebeneinander, Kalles Vorgabe vom 03.09.2026. Dafuer stehen
   sie ausserhalb des prose-split und nutzen die volle Containerbreite; in der
   Textspalte waeren es nur 647 px und damit rund 315 px je Kachel. */
.tarifkacheln { display: grid; gap: 20px; margin: 2em 0 0; }
@media (min-width: 900px) {
  .tarifkacheln { grid-template-columns: 1fr 1fr; }
}

.tarifkachel {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg); padding: 24px 26px; margin: 0;
  display: flex; flex-direction: column; min-width: 0;
}
/* Die Fusszeile unten buendig, damit nebeneinanderstehende Kacheln trotz
   unterschiedlich langer Texte gleich hoch abschliessen. */
.tarifkachel__fuss { margin-top: auto; padding-top: 14px; }
.tarifkachel__kopf { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; }
.tarifkachel__stufe {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1;
  color: var(--orange-text); letter-spacing: .01em;
}
.tarifkachel__was { margin: .5em 0 0; color: var(--muted); }

.tarifkachel__funktionen {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: grid; gap: 16px 12px;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}
.tarifkachel__funktionen li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; min-width: 0;
}
.tarifkachel__funktionen svg { width: 30px; height: 30px; color: var(--orange); flex: none; }
.tarifkachel__funktionen span { font-size: .875rem; line-height: 1.35; color: var(--ink); }

.tarifkachel__preise {
  display: grid; gap: 10px; padding-top: 18px;
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tarifkachel__preise > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; background: var(--bg-alt); border-radius: 10px; min-width: 0;
}
.tarifkachel__gebiet { font-size: .8rem; color: var(--muted); }
.tarifkachel__preis {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; line-height: 1.1; color: var(--ink-strong);
}
.tarifkachel__code {
  font-family: var(--font-mono, monospace); font-size: .72rem; color: var(--muted);
}
.tarifkachel__fuss { font-size: .8rem; color: var(--muted); }
.tarifkachel__vorstufe {
  margin: 0 0 14px; font-size: .875rem; color: var(--muted);
}

/* Abschnittskopf ueber die volle Breite. Der prose-split haelt die linke
   Haelfte fuer die Ueberschrift frei; bei kurzer Ueberschrift und langem Text
   steht dort ein leeres Drittel. Kalle am 03.09.2026: "hier ist links immer
   soooo viel Freiraum". Nur auf /webfleet-tarife/ im Einsatz. */
.abschnitt-kopf { max-width: 780px; margin-bottom: clamp(24px, 3vw, 36px); }
.abschnitt-kopf h2 { margin: .2em 0 .4em; }
.abschnitt-kopf .lead { margin: 0; }