@charset "UTF-8";
/* =========================================================================
   saugbaggernord.de – Designsystem
   =========================================================================
   Uebernommen und erweitert aus dem Inline-CSS der urspruenglichen Onepager-
   Version. Aenderungen gegenueber dem Original sind im Text vermerkt.
   ========================================================================= */

@import url("../fonts/fonts.css");

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* ---- Flaechen ------------------------------------------------------
     Helles Design. Die Seite stand bis 09/2026 auf fast Schwarz; der
     Auftraggeber wollte sie heller. Die Logik bleibt dieselbe wie vorher,
     nur umgedreht: EINE Flaeche fuer die Seite, eine fuer die Bauteile,
     eine als Akzent. Bauteile liegen jetzt HELLER als die Seite - das ist
     die Richtung, in die Licht auf hellem Grund faellt.
     Der Grund traegt einen leichten Warmton; reines Weiss wirkt klinisch
     und passt nicht zu einer Baustelle. */
  --ground:  #EFEFE9;   /* Seitengrund                                     */
  --raised:  #FFFFFF;   /* Bauteile: Karte, Hinweiskasten, Schritt, FAQ    */
  --sunken:  #E4E4DC;   /* Eingabefelder liegen darunter                   */

  /* RAL 6005 Moosgruen - unveraendert. Auf hellem Grund ist es jetzt der
     einzige wirklich dunkle Ton und traegt die Akzentflaeche allein:
     8,7:1 gegen den Seitengrund. */
  --green:       #0D4F3C;
  --green-deep:  #093729;
  --green-mid:   #166A50;

  /* Gruen als Schrift. Auf dunklem Grund war der Akzent hell (#7DBFA8);
     auf hellem Grund muss er dunkel sein, sonst traegt er nicht. */
  --accent:      #0B5C44;   /* Links und Akzentschrift, 7,3:1 auf ground   */
  --accent-dim:  #2A7057;   /* Rahmen und sekundaerer Akzent, 5,1:1        */
  --accent-on-green: #8ECBB5;   /* nur auf der gruenen Flaeche             */
  --on-green:    #FFFFFF;   /* Schrift auf RAL 6005, 9,5:1                 */
  --red-on-green: #E8776A;  /* Warnfarbe auf Gruen, 3,3:1 - nur Grosstext    */

  /* Auf dunkler Flaeche - gruener Abschnitt und Bildbalken.
     Vorher standen hier dreizehn freistehende rgba-Werte fuer vier Rollen:
     0,90 / 0,88 / 0,86 / 0,85 / 0,78 / 0,72 fuer Text, 0,30 / 0,22 / 0,18 /
     0,14 / 0,12 fuer Linien. Die Unterschiede waren nicht zu sehen und nicht
     begruendet - sie waren einfach entstanden. Vier Rollen genuegen. */
  --text-on-dark:      rgba(255,255,255,0.90); /* Fliesstext, 8,3:1 auf Gruen */
  --text-on-dark-mute: rgba(255,255,255,0.72); /* Sekundaertext, 5,8:1        */
  --line-on-dark:      rgba(255,255,255,0.25); /* sichtbare Trennung          */
  --line-on-dark-soft: rgba(255,255,255,0.12); /* Haarlinie im Raster         */
  --line-on-dark-ui:   rgba(255,255,255,0.55); /* Kante an Bedienelementen    */
  --fill-on-dark:      rgba(0,0,0,0.16);       /* abgesetzte Flaeche          */
  --fill-on-dark-soft: rgba(0,0,0,0.10);       /* Zeilenfuehrung              */

  /* Auf heller Flaeche */
  --nav-fond:          rgba(239,239,233,0.97); /* Kopfzeile, leicht durchlaessig */
  --zebra:             rgba(0,0,0,0.035);      /* Zeilenfuehrung in Tabellen  */
  --red-wash:          rgba(192,57,43,0.07);   /* Contra-Spalte               */
  --red-wash-stark:    rgba(192,57,43,0.12);   /* Fehlermeldung im Formular   */

  /* Signalfarbe. Sie gilt ausschliesslich fuer Dringlichkeit - Havarie,
     Kurzfristeinsatz, Pflichtfeld. Auf hellem Grund braucht sie zwei
     Werte: das helle Amber traegt als Flaeche, als Schrift erreicht es
     nur 1,8:1 und muss dunkel sein. */
  --signal:      #8A6013;   /* Schrift und Rahmen, 5,1:1 auf ground        */
  --signal-fill: #E8B04B;   /* Flaeche, mit --ink darauf                   */

  /* Linien und Text */
  --line:        #C6C6BE;   /* Haarlinien: Karten, Tabellen, Trennungen    */
  --line-strong: #7A7A73;   /* Bedienelemente - Formularfelder brauchen 3:1 */
  --muted:       #63635C;   /* Sekundaertext, 5,5:1 auf ground             */
  --body:        #3A3A36;   /* Fliesstext, 10,5:1                          */
  --ink:         #161614;   /* Ueberschriften und Auszeichnung, 16,6:1     */

  --red:      #C0392B;   /* Rahmen und Flaechen                            */
  --red-soft: #A62F20;   /* Schrift, 6,3:1 auf ground                      */

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --fs-100: 0.75rem;    /* 12px  Mono-Versallabel                          */
  --fs-200: 0.875rem;   /* 14px  Hilfstext, Navigation, Footer             */
  --fs-300: 1rem;       /* 16px  UI, Tabellenzellen, Schaltflaechen        */
  --fs-400: 1.125rem;   /* 18px  Fliesstext                                */
  --fs-500: 1.5rem;     /* 24px  Bebas: Karten-, USP-, Footertitel, Logo   */
  --fs-600: clamp(1.875rem, 1rem + 2.4vw, 2.75rem);   /* 30-44px  Abschnitt */
  --fs-700: clamp(2.5rem, 1rem + 4.6vw, 4.5rem);      /* 40-72px  Seitentitel */

  /* ---- Laufweite -----------------------------------------------------
     Drei Werte statt dreizehn. Die Sperrung faellt mit steigender Groesse:
     Bebas traegt sich ab 30px selbst, mehr Sperrung reisst das Wortbild auf.
     Gemischtsatz in IBM Plex Sans bekommt gar keine - Sperrung im
     Gemischtsatz ist ein Fehler, kein Stilmittel. */
  --ls-label:   0.12em;   /* Mono, Versal                                  */
  --ls-title:   0.05em;   /* Bebas Stufe 500                               */
  --ls-display: 0.02em;   /* Bebas Stufe 600 und 700                       */

  /* ---- Zeilenhoehe --------------------------------------------------- */
  /* Bebas hat eine sehr grosse Versalhoehe im Verhaeltnis zum Kegel; bei
     Displaygroessen darf die Zeile deshalb unter 1 liegen, ohne zu kollidieren. */
  --lh-tight:   0.95;
  --lh-display: 1.05;
  --lh-ui:      1.45;
  --lh-text:    1.60;

  /* ---- Abstaende -----------------------------------------------------
     Ein Raster auf 4 Pixeln, die Zahl im Namen sind die Vielfachen davon. */
  --s-1:   0.25rem;  /*  4px  Feinkorrektur an Marken und Chips           */
  --s-2:   0.5rem;   /*  8px                                              */
  --s-3:   0.75rem;  /* 12px                                              */
  --s-4:   1rem;     /* 16px  Grundabstand im Text                        */
  --s-6:   1.5rem;   /* 24px                                              */
  --s-8:   2rem;     /* 32px  Innenpolsterung der Kaesten                 */
  --s-12:  3rem;     /* 48px                                              */
  --s-16:  4rem;     /* 64px  Abschnittstakt normal                       */
  --s-24:  6rem;     /* 96px  Abschnittstakt weit                         */

  /* ---- Satzbreite ----------------------------------------------------
     In rem, nicht in ch. 1ch ist die Dickte der Ziffer 0 und in IBM Plex
     Sans 1,43-mal breiter als ein mittleres Zeichen deutschen Fliesstexts -
     aus "68ch" wurden gemessen 103 Zeichen je Zeile. */
  --measure:      38rem;   /* 608px, gemessen 80 Zeichen bei --fs-400      */
  --measure-wide: 52rem;   /* 832px, fuer Kaesten und Verzeichnisse        */
  --measure-sm:   30rem;   /* 480px, fuer --fs-300                         */

  /* Feldbreite. 1200px war fuer diese Seite zu breit: Der Inhalt besteht zu
     ueber 90 Prozent aus Fliesstext, und der steht bei 38rem Satzmass. In
     einem 1136px-Feld nutzte er 54 Prozent - der Rest blieb leer, ohne dass
     etwas darin stand. 1040px halten das Verhaeltnis bei 62 Prozent, und die
     Karten bleiben mit 325px je Spalte breit genug fuer 45 Zeichen. */
  --wrap: 1040px;
  --wrap-narrow: 820px;
  --nav-h: 4.25rem;
}

/* ── 2. RESET & BASIS ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--ground);
  color: var(--ink);
  line-height: var(--lh-text);
  overflow-x: hidden;
  /* font-synthesis-weight bleibt an: Die Textschrift liegt nur im Regular
     vor, der Browser muss den Fettschnitt also rechnen duerfen. Sobald echte
     Schnitte vorliegen, kann die Synthese wieder abgeschaltet werden. */
}

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

a { color: var(--accent); }
a:hover { color: var(--ink); }

:focus-visible {
  /* Der Fokusring gehoert nicht zur Signalfarbe: Er ist kein Notfall,
     sondern eine Ortsangabe. --accent traegt auf allen Flaechen ueber 5:1. */
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--green-mid); color: var(--on-green); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--ground);
  font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 600;
  padding: var(--s-3) var(--s-6); text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--ground); }

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

/* ── 3. LAYOUT-UTILITIES ───────────────────────────────────────────────── */
.container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-8); }
.container-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s-8); }
.nowrap { white-space: nowrap; }
/* Zwei Abstandsklassen statt 34 Inline-Angaben. Die frueheren style-Attribute
   fuegten der Skala eigene Werte hinzu - unter anderem 2.4rem, das im
   Stylesheet an keiner Stelle vorkam. */
.mt-6  { margin-top: var(--s-6); }
.mt-12 { margin-top: var(--s-12); }
.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;
}

/* Die zwei Schraegstriche standen 76-mal von Hand im Redaktionstext - auf
   100 Prozent aller Dachzeilen, also ohne unterscheidende Wirkung, und jeder,
   der spaeter eine ergaenzt, haette sie mittippen muessen. Als Stilentscheidung
   gehoeren sie an eine Stelle. */
.tag::before { content: "// "; color: var(--accent-dim); }
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  margin-bottom: var(--s-4);
}
.tag-signal { color: var(--signal); border-color: var(--signal); }

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

/* ── 4. NAVIGATION ─────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-fond);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
  display: flex; align-items: center;
  /* Kein backdrop-filter: Ein Filter macht das Element zum enthaltenden Block
     fuer alle position:fixed-Nachfahren. Das mobile Menue haette seine
     top/bottom-Werte dann gegen die 68 Pixel hohe Leiste gerechnet statt gegen
     den Viewport und waere auf 81 Pixel Hoehe zusammengefallen. Bei 97 Prozent
     Deckkraft war der Weichzeichner ohnehin nicht wahrnehmbar. */
}
.nav > .container { display: flex; align-items: center; gap: var(--s-6); width: 100%; }

.nav-logo {
  font-family: var(--font-display);
  font-size: var(--fs-500);
  letter-spacing: var(--ls-title);
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.nav-logo span { color: var(--accent); }
.nav-logo:hover { color: var(--ink); }

.nav-menu {
  display: flex; align-items: center; gap: var(--s-1);
  margin-left: auto;
  list-style: none;
}
.nav-menu li { position: relative; }
.nav-menu li::before { content: none; }
.nav-link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }
.nav-link[aria-current="page"],
.nav-link.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.nav-link[aria-expanded]::after {
  /* Gezeichnetes Dreieck statt U+25BE: Das Zeichen liegt in keinem der drei
     geladenen woff2-Subsets und rendert sonst in einer Systemschrift. */
  content: ""; display: inline-block; vertical-align: 0.15em;
  margin-left: 0.4em; width: 0; height: 0;
  border-left: 0.28em solid transparent;
  border-right: 0.28em solid transparent;
  border-top: 0.28em solid var(--muted);
}
.nav-link:hover::after, .nav-link.is-active::after { border-top-color: var(--accent); }

.nav-sub {
  position: absolute; top: 100%; left: 0;
  min-width: 19rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: var(--s-2) 0;
  list-style: none;
  display: none;
  /* Hier lag ein Schlagschatten (0 18px 40px, 55 Prozent Schwarz) aus der
     dunklen Fassung. Auf hellem Grund war er ein grauer Schmier unter dem
     Menue und widersprach dem Grundsatz. Das Menue haelt sich ueber seine
     Umrisslinie und die zwei Pixel Akzentkante oben. */
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub,
.nav-sub.is-open { display: block; }
.nav-sub a {
  display: block;
  font-size: var(--fs-200);
  color: var(--body);
  text-decoration: none;
  padding: var(--s-2) var(--s-4);
  border-left: 2px solid transparent;
}
.nav-sub a:hover, .nav-sub a:focus-visible {
  background: var(--raised); color: var(--ink); border-left-color: var(--accent);
}
.nav-sub a[aria-current="page"] { color: var(--accent); border-left-color: var(--accent); }
.nav-sub-head {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s-2) var(--s-4) var(--s-1);
}

.nav-phone {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  color: var(--on-green);
  text-decoration: none;
  background: var(--green);
  border: 1px solid var(--green-mid);
  padding: var(--s-2) var(--s-4);
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  gap: var(--s-2);
  /* Die beiden wichtigsten Bedienelemente auf dem Telefon lagen bei 34 und
     39 Pixeln Hoehe. Ein Bauleiter bedient sie mit Arbeitshandschuhen. */
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav-phone:hover { background: var(--green-mid); color: var(--on-green); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--s-2) var(--s-4);
  min-height: 44px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    height: calc(100dvh - var(--nav-h));   /* Absicherung, falls doch einmal
                                              ein enthaltender Block entsteht */
    max-height: calc(100dvh - var(--nav-h));
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground);
    border-top: 1px solid var(--line);
    padding: var(--s-4) 0 var(--s-16);
    overflow-y: auto;
    margin-left: 0;
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-link {
    padding: var(--s-4) var(--s-8);
    font-size: var(--fs-400);
    border-bottom: 1px solid var(--line);
  }
  .nav-link:hover { border-bottom-color: var(--line); }
  .nav-sub {
    position: static; display: block; min-width: 0;
    background: var(--raised); border: none; border-top: none;
    box-shadow: none; padding: 0 0 var(--s-2);
  }
  .nav-sub a { padding: var(--s-3) var(--s-12); font-size: var(--fs-200); }
  .nav-phone { margin-left: auto; order: 3; }
}
.nav-phone-nummer .vorwahl-kurz { display: none; }

@media (max-width: 620px) {
  /* Die vollstaendig formatierte Rufnummer sprengt bei 375 px die Kopfzeile.
     Sie wird deshalb gekuerzt, nicht ausgeblendet: Auf einer Seite, deren
     wichtigster Conversion-Weg das Telefon ist, darf im ersten Viewport nicht
     nur ein Symbol stehen. Der vollstaendige Linktext bleibt fuer Screenreader
     ueber .visually-hidden erhalten. */
  .nav-phone-nummer { font-size: var(--fs-200); letter-spacing: normal; }
  .nav-phone-nummer .vorwahl-lang { display: none; }
  .nav-phone-nummer .vorwahl-kurz { display: inline; }
  .nav-phone { padding: var(--s-2) var(--s-2); gap: var(--s-1); }

  /* Logo, Menueknopf und Rufnummer muessen bei 375 px nebeneinander passen.
     Gerechnet: 2x20 Rand + 126 Logo + 2x10 Abstand + 57 Knopf + 112 Rufnummer
     = 355 von 375 Pixeln. Mit dem urspruenglichen Abstand von 24 Pixeln und
     der groesseren Logoschrift waren es 401 – die Rufnummer wurde beschnitten. */
  .nav > .container { gap: var(--s-2); }
  .nav-toggle { padding: var(--s-2) var(--s-3); font-size: var(--fs-100); }
  .container, .container-narrow { padding: 0 var(--s-4); }
}

/* ── 5. BREADCRUMB ─────────────────────────────────────────────────────── */
.breadcrumb {
  padding: calc(var(--nav-h) + var(--s-6)) 0 0;
  background: var(--ground);
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-label);
  color: var(--muted);
}
.breadcrumb li::before { content: none; }
.breadcrumb li + li::before {
  content: "/"; content: "/" / "";
  color: var(--line); margin-right: var(--s-2);
}
.breadcrumb a, .breadcrumb [aria-current="page"] {
  color: var(--muted); text-decoration: none;
  display: inline-block; padding: var(--s-1) 0;   /* Tap-Ziel */
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--body); }

/* ── 6. HERO ───────────────────────────────────────────────────────────── */
.hero {
  min-height: min(100vh, 52rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
  padding: calc(var(--nav-h) + var(--s-16)) 0 var(--s-16);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    /* Die beiden Rasterverlaeufe lagen bei 1,02:1 auf ihrem eigenen Grund
       und unter einem Bild mit 45 Prozent Deckkraft - sie waren unter keinen
       Umstaenden zu sehen. Was bleibt, ist die Flaeche. */
    var(--ground);
}
/* Das Hero-Bild lag im Original als CSS-background-image vor. Damit war es fuer
   den Preload-Scanner unsichtbar und blockierte den LCP. Jetzt echtes <img>. */
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Volle Farbe, volle Deckkraft. Vorher lag das Foto bei 45 Prozent unter
     einem luminosity-Blend und war damit schwarzweiss - der Auftraggeber
     will farbige Bilder. Die Lesbarkeit der Schrift traegt jetzt ein
     Verlauf von links (.hero::after), nicht mehr die Entsaettigung. */
}
/* Kein Schleier ueber dem Bild.
   Der Verlauf, der hier stand, war der einzige im ganzen System und hat seine
   Aufgabe nicht erfuellt: Der gruene Teil der Ueberschrift stand am rechten
   Ende auf der abgeschatteten Fahrzeugseite und kam dort auf 1,9:1 - unter
   der Grenze von 3:1 fuer Grosstext. Um ihn zu tragen, haette der Schleier
   bis 71 Prozent der Breite mit 0,7 Deckkraft laufen muessen; dann waere vom
   Foto nichts mehr uebrig gewesen.
   Stattdessen bekommt der Text eine eigene Flaeche mit harter Kante. Das ist
   die Logik des Systems - eine Flaeche, eine Linie, ein Abstand - und das Foto
   bleibt daneben unangetastet. Siehe .hero-inner::before. */
.hero-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--green); z-index: 2; }
/* .container traegt margin-inline:auto. In einem Flexcontainer mit
   flex-direction:column schalten automatische Raender auf der Querachse das
   Strecken ab - der Container schrumpft dann auf die Breite seines breitesten
   Kindes (672 statt 1040 px) und sitzt mittig im Bild statt am Satzspiegel.
   width:100% stellt die Feldbreite wieder her; max-width begrenzt sie. */
.hero > .container { width: 100%; }

/* Der Textblock steht auf einer eigenen Flaeche, die nach links ueber den
   Feldrand hinaus bis zum Fensterrand laeuft und rechts hart endet.
   width:max-content laesst sie genau so breit werden, wie der Text sie
   braucht - sonst haette sie die volle Feldbreite und wuerde das Fahrzeug
   verdecken. .hero traegt overflow:hidden, der Ueberstand nach links ist
   also folgenlos. */
.hero-inner {
  position: relative; z-index: 2;
  width: max-content; max-width: 100%;
}
.hero-inner::before {
  content: ""; position: absolute; z-index: -1;
  /* unten bis an die Kante des Abschnitts, nicht kurz davor: Die Flaeche soll
     im Eck sitzen und nicht ueber dem Bild schweben. */
  top: calc(-1 * var(--s-12)); bottom: calc(-1 * var(--s-16));
  left: -100vw; right: calc(-1 * var(--s-12));
  background: var(--ground);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
  position: relative; z-index: 2;
  /* In em, nicht in rem: Das Mass muss mit der Schriftgroesse wachsen.
     11em ergeben bei --fs-700 rund 26 Versalzeichen Bebas je Zeile. */
  max-width: 11em;
  margin-bottom: var(--s-6);
}
.hero h1 em { font-style: normal; color: var(--accent); display: block; }
.hero-sub {
  font-size: var(--fs-400);
  color: var(--body);
  max-width: var(--measure);
  margin-bottom: var(--s-8);
  line-height: var(--lh-text);
  border-left: 4px solid var(--green);
  padding-left: var(--s-4);
}
.hero-ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* Kompakter Kopf fuer Unterseiten */
.pagehead { padding: var(--s-8) 0 var(--s-12); background: var(--ground); position: relative; }
.pagehead h1 {
  font-family: var(--font-display);
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--ink);
  max-width: 11em;
  margin-bottom: var(--s-4);
}
.pagehead h1 em { font-style: normal; color: var(--accent); }
.pagehead-sub {
  font-size: var(--fs-400); color: var(--body); max-width: var(--measure); line-height: var(--lh-text);
  border-left: 4px solid var(--green); padding-left: var(--s-4);
}
.pagehead-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-label); color: var(--muted);
}
.pagehead-meta strong { color: var(--accent); font-weight: 600; }

.pagehead-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6);
}
.pagehead-cta-note {
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-title); color: var(--muted);
}
@media (max-width: 560px) {
  .pagehead-cta .btn-primary, .pagehead-cta .btn-secondary { flex: 1 1 100%; justify-content: center; }
  .pagehead-cta-note { flex: 1 1 100%; }
}

/* ── 7. BUTTONS ────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-signal {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-body); font-size: var(--fs-400); font-weight: 700;
  padding: var(--s-4) var(--s-8); text-decoration: none; letter-spacing: var(--ls-display);
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
.btn-primary { background: var(--green); color: var(--on-green); border: 2px solid var(--green-mid); }
/* Die drei Schaltflaechen hoben sich beim Ueberfahren um zwei Pixel an.
   Das ist dieselbe Weichzeichner-Geste wie das Aufwaertsblenden und passt
   nicht zu einem System aus harten Kanten. Der Zustandswechsel traegt die
   Rueckmeldung allein: Flaeche, Rahmen und Schrift wechseln ohnehin. */
.btn-primary:hover { background: var(--green-mid); color: var(--on-green); }
/* --line erreicht auf --ground nur 1,49:1. Fuer eine Flaeche ist das genug,
   fuer ein Bedienelement nicht: WCAG 1.4.11 verlangt 3:1 fuer die Kante, an
   der man den Knopf ueberhaupt als Knopf erkennt. --line-strong liefert 3,7:1. */
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); font-weight: 600; }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-signal { background: var(--signal-fill); color: var(--ink); border: 2px solid var(--signal-fill); }
.btn-signal:hover { background: transparent; color: var(--signal); border-color: var(--signal); }
.btn-sm { padding: var(--s-3) var(--s-6); font-size: var(--fs-200); }

/* ── 8. SECTIONS ───────────────────────────────────────────────────────── */
/* Drei Takte statt einem. Vorher hatte jeder Abschnitt 5,5rem oben und
   unten - ein Metronom ueber 208 Bloecke. Eine Lesestrecke, ein
   Kartenraster und ein Abschluss brauchen nicht dieselbe Luft.
   Zwei aufeinanderfolgende Abschnitte auf gleicher Flaeche teilen sich
   den Abstand, statt ihn zu addieren. */
.section { padding: var(--s-16) 0; }
.section-sm { padding: var(--s-12) 0; }
.section-lg { padding: var(--s-24) 0; }
/* Die Seite steht durchgehend auf einer Flaeche; zwei aufeinanderfolgende
   Abschnitte sind optisch einer und nehmen sich den Abstand nur einmal.
   Der gruene Abschnitt ist die Ausnahme - er bekommt seinen vollen Takt. */
.section + .section:not(.section-green) { padding-top: var(--s-12); }
.section-green + .section, .section + .section-green { padding-top: var(--s-16); }

/* EINE Flaeche fuer die Seite, eine fuer die Bauteile, eine als Akzent.
   Vorher wechselten die Abschnitte im Zweiertakt zwischen zwei Graustufen -
   112-mal die eine, 98-mal die andere, auf jeder Seite stur abwechselnd. Der
   Wechsel haing an der Position im Dokument, nicht am Inhalt, und betrug
   1,18:1. Das ist kein Gestaltungsmittel, sondern ein Zaehler.
   Jetzt steht die Seite durchgehend auf --ground. --raised gehoert den
   Bauteilen - Karte, Hinweiskasten, Schritt, FAQ -, die sich dadurch
   ueberall gleich stark vom Grund abheben. --green markiert je Seite genau
   einen Abschnitt: den, auf dem das Argument der Seite steht. */
.section-green {
  background: var(--green); color: var(--on-green);
  border-top: 1px solid var(--green-mid); border-bottom: 1px solid var(--green-mid);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--s-4);
  color: var(--ink);
}
.section-intro {
  font-size: var(--fs-400); color: var(--body); max-width: var(--measure);
  margin-bottom: var(--s-12); line-height: var(--lh-text);
}
/* Der gruene Abschnitt ist die einzige Flaeche, die man sieht - und die
   einzige, auf der die Textfarben des Grundsystems nicht tragen. --light
   erreicht dort 5,47:1, --muted nur 3,52:1. Deshalb steht hier alles auf
   Weiss oder auf --accent-on-green. */
.section-green .section-title { color: var(--on-green); }
.section-green .section-intro { color: var(--text-on-dark); }
.section-green .tag { color: var(--accent-on-green); border-color: var(--accent-on-green); }
.section-green .tag::before { color: var(--accent-on-green); }
.section-green .prose { color: var(--text-on-dark); }
.section-green .prose h2, .section-green .prose h3 { color: var(--on-green); }
.section-green .prose h4 { color: var(--text-on-dark-mute); }
.section-green .prose strong, .section-green strong { color: var(--on-green); }
.section-green a { color: var(--accent-on-green); }
.section-green a:hover { color: var(--on-green); }
.section-green .prose ul > li::before { background: var(--accent-on-green); }
.section-green .prose ol > li::before { color: var(--accent-on-green); }

/* Bauteile auf der gruenen Flaeche.
   Ohne diese Regeln kehren sie ihre Richtung um: --raised liegt auf dem
   Seitengrund 1,18:1 DARUEBER und wirkt aufgelegt, auf Gruen aber 1,59:1
   DARUNTER - aus dem Kasten wird ein Loch in der Akzentflaeche. Und --line
   erreicht auf Gruen nur 1,18:1, ist dort also keine Linie mehr.
   Auf Gruen tragen Bauteile deshalb keine eigene Flaeche, sondern nur eine
   Kante in --green-mit oder --accent-on-green. */
.section-green .callout {
  background: transparent;
  /* .callout traegt in seiner Grundregel color: var(--body). Ohne diese Zeile
     erbt der Kasten sie auch auf Gruen und steht dort mit 1,2:1. */
  color: var(--text-on-dark);
  border-left-color: var(--accent-on-green);
  box-shadow: inset 0 0 0 1px var(--line-on-dark-soft);
}
.section-green .callout-title { color: var(--accent-on-green); }
.section-green .callout-signal { border-left-color: var(--signal-fill); }
.section-green .callout-signal .callout-title { color: var(--signal-fill); }
.section-green .callout-red { border-left-color: var(--red-on-green); }
/* Bei 12px Versalsatz braucht der Titel 4,5:1; das helle Rot erreicht auf
   Gruen nur 3,3:1. Die Bedeutung traegt hier die Kante, der Titel steht weiss. */
.section-green .callout-red .callout-title { color: var(--on-green); }

.section-green .pain-grid,
.section-green .pain-col { border-color: var(--line-on-dark); }
.section-green .pain-col:first-child { background: var(--fill-on-dark); }
.section-green .pain-item { color: var(--text-on-dark); }
/* Die Spaltenkoepfe des Pro/Contra-Rasters laufen sonst auf --red-soft und
   --accent - beide sind fuer hellen Grund gerechnet und erreichen auf Gruen
   nur 1,4 beziehungsweise 1,2:1. */
.section-green .pain-col:first-child .pain-col-head { color: var(--red-on-green); }
.section-green .pain-col:last-child  .pain-col-head { color: var(--accent-on-green); }
.section-green .pain-col:first-child .pain-item::before { background: var(--red-on-green); }
.section-green .pain-col:last-child .pain-item::before { border-color: var(--accent-on-green); }

.section-green .table-wrap { border-color: var(--line-on-dark); }
.section-green th, .section-green td { border-bottom-color: var(--line-on-dark); }
.section-green thead th, .section-green caption { background: var(--fill-on-dark); color: var(--on-green); }
.section-green tbody td { color: var(--text-on-dark); }
.section-green tbody tr:nth-child(even) { background: var(--fill-on-dark-soft); }

/* Alles, was auf --muted laeuft, erreicht auf Gruen nur 3,52:1. */
.section-green figcaption,
.section-green .machine-img-caption,
.section-green .availability-note,
.section-green .tech-note,
.section-green .prose h4 { color: var(--text-on-dark-mute); }

.section-green .chip {
  background: transparent; border-color: var(--line-on-dark);
  color: var(--text-on-dark);
}

/* ── 9. FLIESSTEXT (Ratgeber / Leistungsseiten) ────────────────────────── */
/* Das Inhaltsraster.
   Vorher stand der ganze Block auf --measure - und damit auch jede Tabelle,
   jedes Bild und jedes Vergleichsraster darin. Auf einer Seite mit 1136px
   Inhaltsbreite nutzte der Text 48 Prozent, und eine Tabelle mit fuenf Spalten
   quetschte sich in dieselben 544 Pixel.
   Jetzt gilt das Satzmass nur fuer den Satz. Wer Breite braucht, nimmt sie
   sich: Tabellen, Bilder, Ablaeufe und Raster laufen bis zur Feldkante,
   Kaesten und Verzeichnisse bis zum Zwischenmass. Der Text bleibt linksbuendig
   mit der Ueberschrift - es entsteht keine zweite Fluchtlinie. */
.prose {
  display: grid;
  grid-template-columns:
    [satz-start] min(var(--measure), 100%)
    [satz-ende breit-start] minmax(0, 1fr) [breit-ende];
  font-size: var(--fs-400); line-height: var(--lh-text); color: var(--body);
}
.prose > * { grid-column: satz-start / satz-ende; }
.prose > * + * { margin-top: var(--s-4); }

/* Volle Feldbreite: alles, was Spalten, Zeilen oder Bildflaeche hat */
.prose > .table-wrap,
.prose > figure,
.prose > .figure-full,
.prose > .pain-grid,
.prose > .steps,
.prose > .card-grid,
.prose > .usp-grid,
.prose > .tech-grid,
.prose > .anfahrt-grid { grid-column: satz-start / breit-ende; }

/* Zwischenmass: Kaesten sind kurz und werden ueberflogen, sie vertragen
   mehr Breite als Fliesstext - aber nicht die volle Feldbreite, sonst
   verlieren sie den Bezug zum Absatz davor. */
.prose > .callout,
.prose > .toc,
.prose > .linkbox { grid-column: satz-start / breit-ende; max-width: var(--measure-wide); }

/* prose-wide gab es einmal, um das Satzmass ganz aufzuheben. Die Klasse ist
   entfernt: Sie stand an allen drei Fundstellen ueber Fliesstext, der dadurch
   auf 127 Zeichen je Zeile lief. Gebraucht wurde sie nie - im normalen Raster
   laufen Tabellen, Bilder und Vergleichsraster ohnehin bis zur Feldkante,
   nur der Satz bleibt beim Mass. */
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--s-12); margin-bottom: var(--s-1);
  padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.prose h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-500); line-height: var(--lh-ui); color: var(--accent);
  margin-top: var(--s-8);
}
.prose h4 {
  font-family: var(--font-mono); font-size: var(--fs-200); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted);
  margin-top: var(--s-8);
}
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose ol { counter-reset: pl; }
.prose li { position: relative; padding-left: var(--s-6); margin-top: var(--s-2); }
.prose ul > li::before {
  /* Waagerechter Strich statt U+2192. Der Pfeil lag ausserhalb der geladenen
     unicode-range, sodass der Listenpunkt jeder Seite in einer Fremdschrift
     mit abweichender Strichstaerke stand. */
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.6rem; height: 2px; background: var(--accent);
}
.prose ol > li::before {
  counter-increment: pl; content: counter(pl) ".";
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-family: var(--font-mono); font-size: 0.85em; font-weight: 600;
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose blockquote {
  border-left: 4px solid var(--green);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  color: var(--ink);
  font-size: var(--fs-400);
}
.prose figure { margin-top: var(--s-8); }
.prose figcaption {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  color: var(--muted); margin-top: var(--s-2); line-height: var(--lh-ui);
}

/* ── 10. TABELLEN ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: var(--s-6); border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--fs-300); }
caption {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted);
  text-align: left; padding: var(--s-4) var(--s-4); background: var(--raised);
}
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--raised); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600;
}
tbody th { color: var(--ink); font-weight: 600; }
tbody td { color: var(--body); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
/* Der Hover lag bei 1,06:1 und war damit unsichtbar - auf dem Telefon
   gibt es ihn ohnehin nicht. Eine dauerhafte Zeilenfuehrung traegt auch
   unter dem Daumen. */
tbody tr:nth-child(even) { background: var(--zebra); }

/* ── 11. KARTEN-RASTER ─────────────────────────────────────────────────── */
/* Die Haarlinien zwischen den Karten kamen bisher aus einem hellen
   Gitterhintergrund, den der 1,5px-Abstand durchscheinen liess. Bei
   auto-fit bleibt die letzte Reihe fast immer unvollstaendig - und dort
   stand die Hintergrundfarbe dann als Flaeche. Auf /leistungen/ waren das
   bei 1280px 948 x 410 Pixel helles Grau mitten im Raster.
   Jetzt zeichnet jede Karte ihre Linie selbst, als outline: Sie liegt
   ausserhalb der Boxmasse, ueberlagert sich im 1px-Abstand mit der
   Nachbarlinie zu genau einer Linie, und leere Rasterplaetze bleiben leer. */
/* Feste Spaltenzahl statt auto-fit. auto-fit richtete sich nach dem Platz,
   nicht nach dem Inhalt: Bei 1200px ergab es vier Spalten und liess bei 9 wie
   bei 17 Karten genau eine allein in der letzten Reihe stehen. Drei Spalten
   gehen bei allen vorkommenden Kartenzahlen (3-18) sauber auf und geben der
   Karte 45 statt 32 Zeichen je Zeile. */
/* Das Raster stand als direktes Kind der Section ausserhalb von .container
   und lief damit randlos - seine linke Kante lag 225px links von der
   Ueberschrift, die es ankuendigt. Jetzt teilt es das Feld mit allem anderen:
   eine Fluchtlinie je Seite. */
.card-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-8);
}
/* Zwei Raster stehen bereits in einem .container (einsatzgebiete__hamburg,
   leistungen__schacht-sandfang-grube). Dort waere die Polsterung doppelt. */
.container > .card-grid,
.container-narrow > .card-grid { max-width: none; margin-inline: 0; padding-inline: 0; }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--raised); padding: var(--s-8) var(--s-8) var(--s-8);
  outline: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: background 0.2s, outline-color 0.2s;
  text-decoration: none;
}
a.card:hover { background: var(--ground); outline-color: var(--accent-dim); }
.card-title {
  font-family: var(--font-display); font-size: var(--fs-500);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s-3);
}
.card-body { font-size: var(--fs-200); color: var(--body); line-height: var(--lh-text); flex: 1; }
.card-more {
  margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent);
}
a.card:hover .card-more { color: var(--ink); }
.card-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; background: var(--raised);
  /* Der Chip ist kein Bedienelement, 1.4.11 greift also nicht. Bei 1,72:1 war
     die Kante aber schlicht nicht da und der Chip nicht als solcher zu
     erkennen. --accent-dim traegt 5,1:1 und bindet ihn an die Akzentfarbe. */
  border: 1px solid var(--accent-dim); color: var(--body); padding: var(--s-1) var(--s-2);
}

/* USP-Karten */
.usp-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
@media (min-width: 40rem) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .usp-grid { grid-template-columns: repeat(3, 1fr); } }
/* Die Karte rutschte beim Ueberfahren vier Pixel nach rechts. Eine Karte,
   die kein Ziel ist, braucht keine Rueckmeldung; die Kante uebernimmt. */
.usp-card { border-left: 4px solid var(--green); padding: var(--s-6) var(--s-6) var(--s-6) var(--s-8); background: var(--raised); transition: border-color 0.2s; }
.usp-card:hover { border-left-color: var(--accent); }
.usp-title { font-family: var(--font-display); line-height: var(--lh-display); font-size: var(--fs-500); letter-spacing: var(--ls-title); text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-2); }
.usp-body { font-size: var(--fs-300); color: var(--body); line-height: var(--lh-text); }

/* ── 12. TECHNIK-KACHELN ───────────────────────────────────────────────── */
.tech-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 1px; background: var(--line-on-dark-soft);
  border: 1px solid var(--line-on-dark-soft); margin-top: var(--s-8);
}
.tech-cell { background: var(--green); padding: var(--s-8) var(--s-6); text-align: center; transition: background 0.2s; }
.tech-cell:hover { background: var(--green-mid); }
.tech-val { font-family: var(--font-display); letter-spacing: var(--ls-display); font-size: var(--fs-600); color: var(--on-green); display: block; line-height: 1; margin-bottom: var(--s-1); }
.tech-unit { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--accent-on-green); display: block; margin-bottom: var(--s-2); }
.tech-label { font-size: var(--fs-200); font-weight: 600; color: var(--text-on-dark-mute); display: block; }
.tech-note {
  font-family: var(--font-mono); font-size: var(--fs-100); line-height: var(--lh-text);
  color: var(--muted); margin-top: var(--s-4); letter-spacing: var(--ls-title);
}

/* ── 13. ABLAUF / SCHRITTE ─────────────────────────────────────────────── */
.steps { counter-reset: st; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-8); }
.step { background: var(--raised); padding: var(--s-6) var(--s-8) var(--s-6) var(--s-16); position: relative; }
.step::before {
  counter-increment: st; content: counter(st, decimal-leading-zero);
  position: absolute; left: var(--s-6); top: var(--s-6);
  font-family: var(--font-display); font-size: var(--fs-500); color: var(--accent-dim); line-height: 1;
}
.step-title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-400); color: var(--ink); margin-bottom: var(--s-1); }
.step-body { font-size: var(--fs-300); color: var(--body); line-height: var(--lh-text); max-width: var(--measure); }

/* ── 14. PRO/CONTRA-RASTER ─────────────────────────────────────────────── */
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.pain-col { padding: var(--s-8); }
.pain-col:first-child { border-right: 1px solid var(--line); background: var(--red-wash); }
.pain-col-head {
  font-family: var(--font-display); line-height: var(--lh-display); font-size: var(--fs-500); letter-spacing: var(--ls-title);
  text-transform: uppercase; margin-bottom: var(--s-6);
}
.pain-col:first-child .pain-col-head { color: var(--red-soft); }
.pain-col:last-child  .pain-col-head { color: var(--accent); }
.pain-list { display: flex; flex-direction: column; gap: var(--s-4); list-style: none; }
.pain-item { font-size: var(--fs-300); color: var(--body); line-height: var(--lh-text); padding-left: var(--s-6); position: relative; }
/* Vorher standen hier U+2715 und U+2713 - ein geometrisches
   Multiplikationskreuz und ein handschriftlicher Haken, beide ausserhalb
   des Schrift-Subsets, mit verschiedener Strichstaerke und optischer Hoehe
   nebeneinander. Jetzt zwei gezeichnete Marken mit identischer Staerke. */
.pain-item::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.6rem; height: 2px;
}
.pain-col:first-child .pain-item::before { background: var(--red-soft); }
.pain-col:last-child  .pain-item::before {
  background: none; width: 0.42rem; height: 0.72rem;
  top: 0.18em; border: solid var(--accent);
  border-width: 0 2px 2px 0; transform: rotate(40deg);
}

/* ── 15. FAQ ───────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); margin-top: var(--s-8); }
.faq details { border-bottom: 1px solid var(--line); background: var(--raised); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--s-4) var(--s-12) var(--s-4) var(--s-6);
  font-weight: 700; font-size: var(--fs-400); color: var(--ink);
  position: relative; line-height: var(--lh-ui);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-500); color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { color: var(--accent); }
.faq summary:hover { background: var(--raised); }
/* Die Antworten liefen ueber die volle Breite des Elternelements - gemessen
   159 bis 174 Zeichen je Zeile. Ein Mass, das ein Auge nicht mehr zurueckfindet. */
.faq-body { padding: 0 var(--s-6) var(--s-6); color: var(--body); font-size: var(--fs-300); line-height: var(--lh-text); }
.faq-body > p, .faq-body > ul, .faq-body > ol { max-width: var(--measure); }
.faq-body > * + * { margin-top: var(--s-4); }
.faq-body ul { list-style: none; }
.faq-body li { position: relative; padding-left: var(--s-6); margin-top: var(--s-2); }
.faq-body li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.55rem; height: 2px; background: var(--accent); }

/* ── 16. HINWEIS-BOXEN ─────────────────────────────────────────────────── */
.callout {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  background: var(--raised); padding: var(--s-6) var(--s-6); margin-top: var(--s-8);
  font-size: var(--fs-300); line-height: var(--lh-text); color: var(--body);
}
.callout > * + * { margin-top: var(--s-3); }
.callout > p, .callout > ul { max-width: var(--measure); }
.callout-title {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); display: block;
}
.callout-signal { border-left-color: var(--signal); }
.callout-signal .callout-title { color: var(--signal); }
.callout-red { border-left-color: var(--red); }
.callout-red .callout-title { color: var(--red-soft); }

/* ── 17. BILDER ────────────────────────────────────────────────────────── */
.figure-full { margin: var(--s-8) 0 0; }
/* Die Entsaettigung war nur per Hover zurueckzunehmen - auf dem Telefon,
   dem Geraet der Zielgruppe, blieb jedes Foto dauerhaft gedaempft. Bilder
   laufen hier in voller Farbe; der Auftraggeber hat Schwarzweiss abgelehnt. */
.figure-full img { width: 100%; }

.machine-showcase {
  display: grid; grid-template-columns: 1.15fr 1fr; min-height: 24rem;
  margin: var(--s-12) 0 0; border: 1px solid var(--line); overflow: hidden;
}
.machine-img-wrap { position: relative; overflow: hidden; }
.machine-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* Die Bildunterschrift lag auf einem Verlauf von durchsichtig nach 90 Prozent
   Schwarz, mit --muted als Schrift - das ergab rund 2,4:1 und war der zweite
   Verlauf im System. Jetzt ein flacher Balken mit harter Oberkante. */
.machine-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--ink);
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-on-dark); line-height: var(--lh-ui);
}
.machine-detail {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-12); background: var(--raised); border-left: 1px solid var(--line);
}
.machine-detail h2, .machine-detail h3 {
  font-family: var(--font-display); line-height: var(--lh-display); font-size: var(--fs-600); letter-spacing: var(--ls-display);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4);
  border: none; padding: 0; margin-top: 0;
}
.machine-detail p { font-size: var(--fs-300); color: var(--body); line-height: var(--lh-text); }
.machine-detail p + p { margin-top: var(--s-4); }

/* ── 18. REGIONEN ──────────────────────────────────────────────────────── */
.region-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); list-style: none; }
.region-tags li::before { content: none; }
.region-tag {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; background: var(--raised); border: 1px solid var(--line);
  color: var(--body); padding: var(--s-1) var(--s-3); text-decoration: none; display: inline-block;
}
a.region-tag:hover { border-color: var(--accent); color: var(--accent); }

.trust-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: start; }
.trust-text h2, .trust-text h3 {
  font-family: var(--font-display); line-height: var(--lh-display); font-size: var(--fs-600); letter-spacing: var(--ls-display);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4);
  border: none; padding: 0; margin-top: 0;
}
.trust-text p { font-size: var(--fs-300); color: var(--body); line-height: var(--lh-text); }
.trust-text p + p { margin-top: var(--s-4); }
.trust-map-wrap { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: flex; flex-direction: column; gap: var(--s-2); }
.trust-map-label {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent-dim); padding-left: var(--s-1);
}

.anfahrt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: var(--s-8); }
.anfahrt-cell { background: var(--raised); padding: var(--s-4) var(--s-6); }
.anfahrt-ort { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-300); color: var(--ink); }
.anfahrt-wert { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--accent); margin-top: var(--s-1); display: block; }

/* ── 19. FORMULAR / CTA ────────────────────────────────────────────────── */
.cta-final { background: var(--raised); border-top: 3px solid var(--green-mid); }
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; }
.cta-left h2 {
  font-family: var(--font-display); letter-spacing: var(--ls-display); font-size: var(--fs-600);
  line-height: var(--lh-tight); text-transform: uppercase; color: var(--ink);
  margin: 0 0 var(--s-6); border: none; padding: 0;
}
.cta-left h2 span { color: var(--accent); display: block; }
.cta-left p { font-size: var(--fs-300); color: var(--body); line-height: var(--lh-text); margin-bottom: var(--s-6); }
.phone-big {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); line-height: var(--lh-display); font-size: var(--fs-600);
  letter-spacing: var(--ls-display); color: var(--on-green); text-decoration: none;
  background: var(--green); border: 2px solid var(--green-mid);
  padding: var(--s-4) var(--s-6); transition: background 0.2s; margin-bottom: var(--s-8);
}
.phone-big:hover { background: var(--green-mid); color: var(--on-green); }
.or-divider {
  display: flex; align-items: center; gap: var(--s-4); color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label); margin-bottom: var(--s-6);
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.availability-note { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-title); color: var(--muted); line-height: var(--lh-text); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
/* Der Block, auf den die ganze Seite zulaeuft, war das einzige
   inhaltstragende Bauteil ohne Fassung - jede Karte, jeder Hinweiskasten und
   jede Tabelle hat eine. */
.form-box {
  background: var(--raised);
  outline: 1px solid var(--line);
  border-top: 3px solid var(--green-mid);
  padding: var(--s-8);
}
.form-group { margin-bottom: var(--s-4); }
.form-group label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--body); margin-bottom: var(--s-2);
}
.form-group label .req { color: var(--red-soft); }
.form-group input, .form-group select, .form-group textarea {
  /* 16px ist keine Geschmacksfrage: iOS Safari zoomt jedes fokussierte
     Eingabefeld unter 16 Pixel automatisch heran und zoomt nicht zurueck.
     Der Nutzer sitzt danach in einer verschobenen Ansicht fest – auf der
     einzigen Seite, auf der Anfragen entstehen. */
  width: 100%; background: var(--sunken); border: 1px solid var(--line-strong);
  color: var(--ink); font-family: var(--font-body); font-size: var(--fs-400);
  padding: var(--s-3) var(--s-4); transition: border-color 0.2s;
  -webkit-appearance: none; border-radius: 0;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline-offset: 0; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); }
.form-group textarea { resize: vertical; min-height: 6.5rem; }
.form-group select option { background: var(--sunken); color: var(--ink); }
/* Das Auswahlfeld war vom Textfeld nicht zu unterscheiden: appearance:none
   entfernt den Systempfeil, ein Ersatz fehlte. Der Chevron ist als SVG
   eingebettet, damit er nicht wieder an einem fehlenden Zeichen haengt. */
.form-group select {
  padding-right: var(--s-12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B5C44' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: var(--red); }
.form-hint { font-size: var(--fs-200); color: var(--muted); margin-top: var(--s-1); line-height: var(--lh-ui); }
.form-submit {
  width: 100%; background: var(--green); color: var(--on-green); border: 2px solid var(--green-mid);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-400); letter-spacing: var(--ls-title);
  padding: var(--s-4); cursor: pointer; transition: background 0.2s; margin-top: var(--s-2);
}
.form-submit:hover { background: var(--green-mid); }
.form-submit[disabled] { opacity: 0.6; cursor: progress; }
.form-privacy { font-size: var(--fs-200); color: var(--muted); margin-top: var(--s-3); line-height: var(--lh-text); }
.form-privacy a { color: var(--body); display: inline-block; padding: var(--s-1) 0; }
.form-error {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4);
  background: var(--red-wash-stark); border: 1px solid var(--red);
  color: var(--red-soft); font-size: var(--fs-200); font-family: var(--font-mono);
  letter-spacing: var(--ls-display); line-height: var(--lh-ui);
}
.form-success { text-align: center; padding: var(--s-12) var(--s-8); background: var(--raised); border: 1px solid var(--green); }
.form-success h2, .form-success-titel {
  font-family: var(--font-display); font-size: var(--fs-600); line-height: var(--lh-display);
  color: var(--accent); margin: 0 0 var(--s-2); border: none; padding: 0;
  text-transform: uppercase; letter-spacing: var(--ls-display);
}
.form-success p { color: var(--body); font-size: var(--fs-300); }

/* CTA-Band fuer Unterseiten */
.cta-band { background: var(--green); padding: var(--s-12) 0; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; }
.cta-band h2 {
  font-family: var(--font-display); font-size: var(--fs-600);
  text-transform: uppercase; letter-spacing: var(--ls-display); color: var(--on-green);
  margin: 0 0 var(--s-2); border: none; padding: 0; line-height: var(--lh-display);
}
.cta-band p { color: var(--text-on-dark); font-size: var(--fs-300); max-width: var(--measure-sm); }
.cta-band-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.cta-band .btn-primary { background: var(--on-green); color: var(--green-deep); border-color: var(--on-green); }
.cta-band .btn-primary:hover { background: var(--ground); color: var(--green-deep); border-color: var(--ground); }
.cta-band .btn-secondary { border-color: var(--line-on-dark-ui); color: var(--on-green); }
.cta-band .btn-secondary:hover { border-color: var(--on-green); color: var(--on-green); background: var(--fill-on-dark); }

/* ── 20. WEITERFUEHRENDE LINKS ─────────────────────────────────────────── */
.linkbox { border: 1px solid var(--line); background: var(--raised); padding: var(--s-8) var(--s-8); margin-top: var(--s-12); }
.linkbox-title {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-4);
}
.linkbox ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-3) var(--s-8); padding: 0; }
.linkbox li { position: relative; padding-left: var(--s-6); margin: 0; }
.linkbox li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.55rem; height: 2px; background: var(--accent); }
.linkbox a { display: inline-block; padding: var(--s-1) 0; color: var(--body); text-decoration: none; font-size: var(--fs-300); line-height: var(--lh-ui); }
.linkbox a:hover { color: var(--accent); text-decoration: underline; }

/* Inhaltsverzeichnis */
.toc { border: 1px solid var(--line); border-left: 4px solid var(--accent-dim); background: var(--raised); padding: var(--s-6) var(--s-8); margin: var(--s-8) 0; }
.toc-title { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); }
.toc ol { list-style: none; counter-reset: toc; padding: 0; }
.toc li { position: relative; padding-left: var(--s-8); margin-top: var(--s-2); }
.toc li::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; color: var(--accent-dim);
  font-family: var(--font-mono); font-size: var(--fs-200);
}
.toc a { display: inline-block; padding: var(--s-1) 0; color: var(--body); text-decoration: none; font-size: var(--fs-300); }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* ── 21. FOOTER ────────────────────────────────────────────────────────── */
.site-footer { background: var(--ground); border-top: 1px solid var(--line); padding: var(--s-12) 0 var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); }
.footer-col h2 {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-4);
  border: none; padding: 0; font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--s-1); }
.footer-col a {
  color: var(--body); text-decoration: none; font-size: var(--fs-200);
  display: inline-block; padding: var(--s-2) 0;   /* Tap-Ziel mindestens 24 px hoch */
}
.footer-col a:hover { color: var(--accent); text-decoration: underline; }
.footer-nap { font-size: var(--fs-200); color: var(--body); line-height: var(--lh-text); font-style: normal; }
.footer-nap strong { display: block; font-family: var(--font-display); line-height: var(--lh-display); font-size: var(--fs-500); letter-spacing: var(--ls-title); color: var(--ink); margin-bottom: var(--s-2); }
.footer-nap a { color: var(--accent); text-decoration: none; display: inline-block; padding: var(--s-1) 0; }
.footer-nap a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line);
}
.footer-copy, .footer-links a {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: var(--ls-label); color: var(--muted);
}
.footer-links { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.footer-links a { text-decoration: none; display: inline-block; padding: var(--s-2) 0; }
.footer-links a:hover { color: var(--accent); }

/* ── 22. ANIMATION ─────────────────────────────────────────────────────── */
/* Hier standen zwei Bewegungen: ein gestaffeltes Einblenden der Hero-Zeilen
   (0,05 / 0,12 / 0,22 / 0,32 Sekunden Versatz) und ein Aufwaertsblenden der
   Karten beim Scrollen. Beide sind entfernt.
   Der Grund steht im ersten Absatz des Designsystems: kein Radius, kein
   Schatten, kein Verlauf - alles, was nach Weichzeichner aussieht, ist hier
   falsch. Ein Aufwaertsblenden ist genau das. Die Seite baut auf harte Kanten
   und flache Flaechen; die Bewegung war der einzige weiche Rest und zugleich
   das am leichtesten erkennbare Merkmal maschinell gebauter Landingpages.
   Nebeneffekt: Der Inhalt steht sofort und haengt an keinem Skript mehr. */

/* ── 22a. AUF GRUENER FLAECHE ──────────────────────────────────────────
   Diese Regeln stehen bewusst hier unten. Die Bauteilregeln (.prose a,
   .linkbox a, .toc a) haben dieselbe Spezifitaet wie .section-green a und
   gewinnen deshalb allein durch ihre spaetere Position - Links im gruenen
   Abschnitt liefen dadurch auf --accent und erreichten 1,19:1. */
.section-green .prose a,
.section-green .linkbox a,
.section-green .toc a,
.section-green .card-more,
.section-green a { color: var(--accent-on-green); }

.section-green .prose a:hover,
.section-green .linkbox a:hover,
.section-green .toc a:hover,
.section-green a:hover { color: var(--on-green); }

.section-green .tech-note,
.section-green .availability-note,
.section-green figcaption,
.section-green .machine-img-caption { color: var(--text-on-dark-mute); }

/* Zwei Luecken in der Gruen-Palette, gemessen ueber alle 35 Seiten:

   1. Der Hinweiskasten. .section-green .callout nimmt ihm die Flaeche, setzt
      aber keine Textfarbe - der Kasten behaelt also --body aus seiner eigenen
      Grundregel und steht mit 1,2:1 auf Gruen. Betraf sechs Seiten.
      Die Regel muss am Kasten selbst haengen: Erbt er von .prose, gewinnt
      seine eigene color-Angabe.

   2. Zeilenkoepfe in Tabellen. Fuer thead th und tbody td gibt es
      Gruen-Regeln, fuer tbody th nicht - der behielt --ink und kam auf
      1,7 bis 1,9:1. Betraf drei Seiten mit Bodenarten-Tabellen. */
.section-green tbody th { color: var(--on-green); }

/* Der Fokusring laeuft auf --accent. Das traegt auf jeder hellen Flaeche
   ueber 5:1 - auf --green sind es 1,2:1, und die Tastaturbedienung war im
   gruenen Abschnitt damit blind. Dort uebernimmt das helle Gruen (5,2:1). */
.section-green :focus-visible { outline-color: var(--accent-on-green); }

/* ── 23. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Der Hero wechselt die Ordnung.
     Auf dem Schreibtisch steht der Text auf einer Flaeche links, das Foto
     liegt rechts daneben. Sobald der Textblock breiter wird als das Fenster
     minus Foto, deckt die Flaeche das Fahrzeug zu - auf einem 375px-Schirm
     blieb nur ein Streifen Himmel uebrig. Unterhalb von 900px wird deshalb
     gestapelt: Bildband oben, Text darunter. Kein Text mehr auf Bild, also
     auch keine Frage nach dem Kontrast. */
  .hero {
    display: block;
    min-height: 0;
    padding: var(--nav-h) 0 var(--s-16);
    background: var(--ground);
  }
  .hero picture { display: block; }
  .hero-img {
    position: static;
    width: 100%; height: 16rem;
    object-position: center 50%;
  }
  .hero-bg { display: none; }
  .hero > .container { padding-top: var(--s-12); }
  .hero-inner { width: auto; }
  .hero-inner::before { display: none; }
  /* Der gruene Streifen laeuft sonst neben dem Foto ins Leere. */
  .hero-stripe { bottom: auto; height: 16rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .machine-showcase { grid-template-columns: 1fr; }
  .machine-img-wrap { min-height: 15rem; }
  .machine-detail { border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 768px) {
  /* 112px zwischen zwei Abschnitten sind auf einem 812px hohen Schirm
     ein Siebtel der Hoehe. Auf dem Telefon faellt der Takt eine Stufe. */
  .section { padding: var(--s-12) 0; }
  .section + .section { padding-top: var(--s-8); }
  .pain-grid { grid-template-columns: 1fr; }
  .pain-col:first-child { border-right: none; border-bottom: 1px solid var(--line); }
  .trust-block { grid-template-columns: 1fr; gap: var(--s-8); }
  .trust-map-wrap { position: static; }
  .cta-split { grid-template-columns: 1fr; gap: var(--s-8); }
  .form-row { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .card { padding: var(--s-6) var(--s-6) var(--s-8); }
  .step { padding: var(--s-6) var(--s-6) var(--s-6) var(--s-16); }
}

/* ── 24. DRUCK ─────────────────────────────────────────────────────────── */
@media print {
  .nav, .cta-band, .site-footer, .hero-img, .skip-link, .form-box { display: none !important; }
  body { background: #fff; color: #000; }
  .prose, .section-intro, td, .card-body { color: #222; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}