/* ==========================================================================
   GRÜNWALD Baudienstleistungen — Design Tokens
   Zimmerer- & Dachdeckermeisterbetrieb, Schwerpunkt Flachdachtechnik
   Stand: 2026-10-12 — Farben aus der echten Logodatei (Logo.pdf)

   MARKENFARBEN GEMESSEN (Pixel der Logodatei, 2026-10-12):
   - Grün #72B054 — Akzent- und Flächenfarbe, NIE Textfarbe, nie Knopf.
   - Navy #29367B — Text, Links, Knöpfe.
   Frühere Werte (#8CC63F / #1C3F6E) stammten aus einer Bildschirmaufnahme
   und sind ersetzt; alle abgeleiteten Rollen unten neu berechnet.

   WARUM ZWEI FARBROLLEN STATT EINER STELLSCHRAUBE: Grün und Navy sind
   zwei eigenständige Farbtöne, keine Hell/Dunkel-Variante derselben
   Farbe — die frühere Ein-Stellschrauben-Mechanik (--gwb-primaer-h/s/l)
   passt hier nicht mehr. Stattdessen zwei Rohwerte unten, jede Rolle
   bewusst einem der beiden zugeordnet.

   KONTRAST GEMESSEN, NICHT GESCHÄTZT (WCAG 2.1, relative Luminanz,
   Formel L = 0,2126·R + 0,7152·G + 0,0722·B linearisiert, Verhältnis
   (L1+0,05)/(L2+0,05) — Python nachgerechnet, 2026-10-12):
   - Navy #29367B auf Weiß ............................ 11,01:1  PASS (Text/Links, Ziel 4,5:1, auch ≥ 7:1)
   - Navy auf Fläche #f6f4f0 ........................... 10,02:1  PASS
   - Weiß auf Navy (Knopftext) ......................... 11,01:1  PASS
   - Weiß auf Navy-dunkler #1d2757 (Hover) ............. 14,19:1  PASS
   - Anthrazit #2b2f33 auf Weiß (unverändert) .......... 13,49:1  PASS
   - Text-mittel #52585c auf Weiß (unverändert) ........  7,22:1  PASS
   - Weiß auf Notfall-Rot #c23a1a (unverändert) ........  5,37:1  PASS
   - Anthrazit auf Grün-hell #eef6e9 (Hinweis-Flächen) . 12,20:1  PASS
   - Navy auf Grün-hell (Links in Hinweis-Boxen) .......  9,96:1  PASS
   - RAW --gwb-gruen #72B054 auf Weiß (Rahmen/Linie) ...  2,61:1  FAIL
     ⚠ zu schwach für Ziel 3:1 (Bedienelemente/Rahmen) und als Text
     völlig ungeeignet — Grün bleibt NIE Textfarbe, NIE Linienfarbe,
     siehe --farbe-primaer-rahmen.
   - --farbe-primaer-rahmen #5a9142 auf Weiß ...........  3,77:1  PASS
   - --farbe-primaer-rahmen auf Fläche #f6f4f0 .........  3,44:1  PASS
   - Fokusring 65% Deckkraft Navy auf Weiß (geblendet) .  4,04:1  PASS
   Mindestwerte: Fließtext ≥ 4,5:1 · große/fette Schrift (≥24px oder
   ≥19px bold) ≥ 3:1 · Bedienelemente/Rahmen ≥ 3:1.

   VISUELLE GRUNDÜBERARBEITUNG 2026-10-01 — Eigentümer-Urteil: „Die
   Webseite sieht aus wie aus 2010." Ursache zum Teil eigener Fehler: Die
   Vorgabe „keine Webschrift" (wegen Google Fonts/Einwilligungspflicht)
   wurde faelschlich zu „gar keine Webschrift" statt „nur selbst gehostet,
   ohne Einwilligungspflicht". Jetzt korrigiert: Inter selbst gehostet
   (assets/fonts/inter-latin.woff2, SIL Open Font License, aus dem
   Hausbestand), eine Datei, variabler Schnitt 300–700, kein zweiter
   Font noetig.

   HERO-FOTO GETAUSCHT 2026-10-02 — echtes Kundenfoto statt erzeugtem Bild
   (hero-flachdach-echt.jpg, MANIFEST.md). Aufnahme bei strahlend blauem
   Himmel und direkter Sonne, deutlich heller als das vorherige bedeckte
   Bild — Kontrast am NEUEN Foto neu gemessen (Python/PIL, worst-case
   Einzelpixel in der Textregion unten links, nicht nur im Mittel):
   - Alter Verlauf (0%→0,08 / 45%→0,38 / 100%→0,82 Navy-Deckkraft) ergab
     am neuen, hellen Foto nur noch 3,29:1 WORST CASE — FAIL gegen die
     4,5:1-Grenze (der hellste Einzelpixel der Textregion war ein
     Metall-/Himmelreflex bei RGB 252/255/255).
   - Verlauf deshalb verstärkt (dunkler, früher einsetzend), NICHT die
     Schrift verkleinert und KEIN Schatten untergelegt: neue Stops
     0%→0,30 / 30%→0,65 / 100%→0,92 Navy-Deckkraft (rgba(10,23,42,…)).
   - Mit dem verstärkten Verlauf, selber worst-case Pixel: 8,31:1 PASS —
     über der 4,5:1-Grenze UND über der 7:1-Zielmarke.
   - Durchschnitt der Textregion liegt entsprechend noch höher (weit
     jenseits 8,31:1); der worst-case-Wert ist der bindende.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. FARBE — Rohwerte (Quelle der Wahrheit, zwei Markenfarben)
     ------------------------------------------------------------------ */
  --gwb-gruen: #72b054;   /* Akzent- und Flächenfarbe — NIE für Text/Knöpfe */
  --gwb-navy: #29367b;    /* Text, Links, Knöpfe */

  /* ------------------------------------------------------------------
     2. FARBE — abgeleitete Rollen
     ------------------------------------------------------------------ */
  --farbe-primaer: var(--gwb-gruen);
  --farbe-primaer-dunkel: var(--gwb-navy);
  --farbe-primaer-dunkler: #1d2757;      /* Hover-Zustand der Knöpfe */
  --farbe-primaer-hell: #eef6e9;          /* helle Grün-Fläche, z. B. Hinweis-Boxen */
  /* Abgedunkelte Grün-Variante NUR für Rahmen/Linien (Bedienelemente),
     weil das rohe --gwb-gruen gegen Weiß nur 2,61:1 erreicht (siehe
     Tabelle oben) — reines Grün bleibt Flächenfarbe, nie Linienfarbe. */
  --farbe-primaer-rahmen: #5a9142;
  --farbe-primaer-fokus: rgba(41, 54, 123, 0.65); /* --gwb-navy bei 65% Deckkraft — als rgba() geschrieben statt mit der modernen hsl(from …)-Syntax, wegen Browser-Kompatibilität (Safari < 16.4) */

  --farbe-anthrazit: #2b2f33;
  --farbe-text: var(--farbe-anthrazit);
  --farbe-text-mittel: #52585c;
  --farbe-text-auf-primaer: #ffffff;
  --farbe-text-auf-notfall: #ffffff;

  --farbe-weiss: #ffffff;
  --farbe-flaeche: #f6f4f0;
  --farbe-flaeche-2: #ede9e2;
  --farbe-rand: #d8d3c9;
  --farbe-rand-bedienung: #a9a29373;

  --farbe-notfall: #c23a1a;
  --farbe-notfall-dunkel: #9c2f14;
  --farbe-notfall-hell: #fbe9e3;

  --farbe-erfolg: #2e6b45;
  --farbe-erfolg-flaeche: #e9f3ec;
  --farbe-fehler: #a3232b;
  --farbe-fehler-flaeche: #fbeced;

  /* ------------------------------------------------------------------
     3. TYPOGRAFIE — Inter, selbst gehostet (keine Einwilligungspflicht,
     keine externe Anfrage — @font-face siehe unten). System-Stack bleibt
     als Fallback, falls die Datei mal nicht laedt.
     ------------------------------------------------------------------ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;

  /* Maßstab angehoben 2026-10-01 (Eigentümer: Seite wirkte wie 2010 —
     Ueberschriften zu zaghaft, Fließtext zu klein). */
  --schrift-xs: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --schrift-sm: clamp(0.9rem, 0.86rem + 0.2vw, 0.97rem);
  --schrift-basis: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem); /* 17–18px */
  --schrift-md: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --schrift-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --schrift-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --schrift-xxl: clamp(2.6rem, 1.9rem + 3.2vw, 4rem);
  --schrift-hero: clamp(2.6rem, 7vw, 5rem); /* Hero-H1, wörtlich vorgegeben */

  --zeilenhoehe-eng: 1.1;
  --zeilenhoehe-basis: 1.55;
  --laufweite-caps: 0.04em;
  --laufweite-eng: -0.02em;

  --gewicht-normal: 400;
  --gewicht-kraeftig: 600;
  --gewicht-fett: 700;

  /* ------------------------------------------------------------------
     4. ABSTÄNDE — 8px-Raster
     ------------------------------------------------------------------ */
  --abstand-3xs: 0.25rem;
  --abstand-2xs: 0.5rem;
  --abstand-xs: 0.75rem;
  --abstand-sm: 1rem;
  --abstand-md: 1.5rem;
  --abstand-lg: 2.5rem;
  --abstand-xl: 4rem;
  --abstand-xxl: 6rem;

  --breite-inhalt: 72rem;
  --breite-text: 38rem;

  /* ------------------------------------------------------------------
     5. RADIEN & SCHATTEN
     ------------------------------------------------------------------ */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-pille: 999px;

  /* Schatten jetzt Navy-getönt statt Grün-getönt (--gwb-primaer-h gibt es
     nicht mehr, siehe Kopfkommentar) — rgba() auf Navy-Basis. */
  --schatten-sm: 0 1px 2px rgba(41, 54, 123, 8%);
  --schatten-md: 0 4px 14px rgba(41, 54, 123, 10%);
  --schatten-lg: 0 12px 32px rgba(41, 54, 123, 14%);
  --schatten-notfall: 0 6px 20px hsl(12 65% 40% / 28%);

  /* ------------------------------------------------------------------
     6. BEWEGUNG — Hausnorm
     ------------------------------------------------------------------ */
  --dauer-hover: 200ms;
  --dauer-eintritt: 450ms;
  --dauer-eintritt-lang: 480ms;
  --versatz-eintritt: 20px;
  --stagger-schritt: 60ms;
  --easing-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer-hover: 0ms;
    --dauer-eintritt: 0ms;
    --dauer-eintritt-lang: 0ms;
    --versatz-eintritt: 0px;
    --stagger-schritt: 0ms;
  }
}

/* ==========================================================================
   SCHRIFT — Inter, selbst gehostet, eine Datei, variabler Schnitt.
   Self-hosted = keine Einwilligungspflicht, keine externe Anfrage (anders
   als Google Fonts). font-display:swap verhindert unsichtbaren Text
   während des Ladens (FOIT); bis die Datei da ist, steht die
   Systemschrift aus dem --font-sans-Fallback-Stack. Nur der lateinische
   Bereich noetig (deutsche Umlaute inklusive) — unicode-range grenzt
   das ein, falls je ein kyrillischer Schnitt dazukommt. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122;
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   RESET & BASIS
   ========================================================================== */
*, *::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;
  font-family: var(--font-sans);
  font-size: var(--schrift-basis);
  line-height: var(--zeilenhoehe-basis);
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--zeilenhoehe-eng);
  font-weight: var(--gewicht-fett);
  letter-spacing: var(--laufweite-eng);
  margin: 0 0 var(--abstand-sm);
  color: var(--farbe-anthrazit);
}
h1 { font-size: var(--schrift-xxl); }
h2 { font-size: var(--schrift-xl); }
h3 { font-size: var(--schrift-lg); }
/* Zeilenlaenge begrenzt auf ~70 Zeichen (ch-Einheit = Breite der Ziffer
   "0" der aktuellen Schrift, bei Fliesstext eine verlaessliche Naeherung
   fuer "Zeichen pro Zeile"). */
p { margin: 0 0 var(--abstand-sm); max-width: 70ch; }
ul, ol { padding-left: 1.2em; }

a { color: var(--farbe-primaer-dunkel); }
a:not(.knopf) { text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

/* Sichtbarer Fokusrahmen — Pflicht, nirgends entfernt */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--farbe-primaer-fokus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sprungmarke zum Inhalt */
.sprungmarke {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  z-index: 1000;
}
.sprungmarke:focus {
  left: var(--abstand-sm);
  top: var(--abstand-sm);
  width: auto; height: auto;
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  padding: var(--abstand-2xs) var(--abstand-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--schatten-lg);
}

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

/* ==========================================================================
   LAYOUT-HILFEN
   ========================================================================== */
.inhalt {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--abstand-md);
}
@media (max-width: 599px) {
  .inhalt { padding-inline: var(--abstand-sm); }
}

.abschnitt { padding-block: var(--abstand-xxl); }
@media (max-width: 767px) {
  .abschnitt { padding-block: var(--abstand-xl); }
}

.abschnitt-kopf { max-width: 44rem; margin-bottom: var(--abstand-lg); }
.abschnitt-kopf p { color: var(--farbe-text-mittel); }

.gitter {
  display: grid;
  gap: var(--abstand-md);
}
.gitter-2 { grid-template-columns: 1fr; }
.gitter-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .gitter-2 { grid-template-columns: repeat(2, 1fr); }
  .gitter-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .gitter-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   HINTERGRUNDFLÄCHEN — reines CSS, ohne Muster
   Zwei Linien-/Punkt-Muster waren hier (Umbau 2026-10-01): das diagonale
   .gwb-hintergrund-bahnen (Eigentümer-Urteil: "wie ein Word-Dokument-
   Wasserzeichen") und die radiale Kies-Punktierung im "Warum Flachdach"-
   Abschnitt — selbst gemeldet, gleiche Kategorie wie das erste Muster,
   jetzt ebenfalls entfernt. Der Abschnittsrhythmus (hell/warm/Navy im
   Wechsel) bleibt erhalten — nur die reine Flächenfarbe, kein Muster
   mehr, der Abschnitt trägt sich über Typografie und Bild.
   ========================================================================== */
.gwb-hintergrund-warm {
  background-color: var(--farbe-flaeche-2);
}

/* ==========================================================================
   BEWEGUNG — Einblenden beim Scrollen (Hausnorm)
   ========================================================================== */
/* Progressive Verbesserung: Der unsichtbare Startzustand gilt NUR, wenn
   JavaScript lief und die Klasse "js" auf <html> gesetzt hat (siehe
   Inline-Script im <head>). Ohne JS — oder solange es noch lädt — bleibt
   jeder Inhalt von Anfang an sichtbar. So hängt kein Inhalt von einem
   IntersectionObserver-Treffer ab. */
html.js .gwb-reveal {
  opacity: 0;
  transform: translateY(var(--versatz-eintritt));
  transition:
    opacity var(--dauer-eintritt) var(--easing-standard),
    transform var(--dauer-eintritt) var(--easing-standard);
  transition-delay: calc(var(--stagger-index, 0) * var(--stagger-schritt));
}
html.js .gwb-reveal.ist-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

/* Reissleine (siehe Inline-Script im <head>): Falls app.js nicht lief,
   nicht laden konnte oder der IntersectionObserver nicht ausloeste,
   erzwingt diese Klasse nach 1,5 s vollstaendige Sichtbarkeit — egal
   was mit --stagger-index oder .ist-sichtbar passiert ist. */
html.reveal-alles .gwb-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   TRENNER — feine Linie statt gezeichneter Bahnenstoß
   (2026-10-01: der Eigentümer hat alle gezeichneten Symbole verworfen —
   „Alle Bilder sehen schrecklich aus". Der Bahnenstoß-Trenner war eine
   Linien-Illustration wie die anderen; ersetzt durch eine echte,
   schlichte Trennlinie. Siehe deko.md §Bahnenstoß — dort unverändert,
   fremdes Gewerk, nur hier nicht mehr verwendet.) --- */
.gwb-feine-linie {
  border: none;
  border-top: 1px solid var(--farbe-rand);
  max-width: var(--breite-inhalt);
  margin: 0 auto;
}

/* ==========================================================================
   KOPFBEREICH / NAVIGATION / SOFORT-LEISTE
   ========================================================================== */
/* Entscheidung 2026-10-01 (Koordinator, nach Messung bei 1440px): keine
   transparente Kopfzeile mehr. Der erste Versuch (transparent über dem
   Hero, fest+Weichzeichner beim Scrollen) hatte einen echten Fehler —
   .kopf war volle Breite/durchsichtig, aber .kopf-leiste (der weiße
   Innenblock) blieb auf Inhaltsbreite zentriert, dadurch schaute links
   und rechts das Hero-Foto an den Ecken heraus. Statt das zu reparieren:
   bewusst einfacher gemacht. Begründung des Koordinators: der obere
   Rand des Hero-Fotos ist heller Himmel, Weiß auf Himmel haette zu
   wenig Kontrast gehabt. Jetzt: Hintergrund IMMER weiß, volle Breite,
   auf .kopf selbst (nicht nur auf .kopf-leiste) — kein Zustandswechsel
   beim Scrollen, kein Weichzeichner, kein JS dafür noetig. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 90;
  width: 100%;
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-sm);
}
.kopf-leiste {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding: var(--abstand-sm) var(--abstand-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-md);
}
/* Logo (Logo.pdf, 2026-10-12) ersetzt die frühere Textmarke. Das Logo
   ist ein Rasterbild (640×257, Seitenverhältnis 2,49:1), bei 72 px Höhe
   also rund 3,5-fach hochaufgelöst für Retina. Feste Höhe, Breite folgt
   dem Seitenverhältnis — kein Layoutsprung beim Laden (width/height-
   Attribute im Markup). Mobil kleiner, damit Menü-Knopf Platz hat. */
.marke {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.25s ease;
}
.marke picture { display: block; line-height: 0; }
.marke-logo {
  display: block;
  height: 72px;
  width: auto;
}
@media (max-width: 560px) {
  .marke-logo { height: 54px; }
}
.hauptnav ul {
  list-style: none;
  display: flex;
  gap: var(--abstand-md);
  margin: 0;
  padding: 0;
}
.hauptnav a {
  text-decoration: none;
  color: var(--farbe-text);
  font-size: var(--schrift-sm);
  font-weight: var(--gewicht-kraeftig);
  padding: var(--abstand-2xs) var(--abstand-3xs);
  transition: color 0.25s ease;
}
.hauptnav a:hover { color: var(--farbe-primaer-dunkel); }

.menu-knopf {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--farbe-rand-bedienung);
  border-radius: var(--radius-md);
  background: var(--farbe-weiss);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.menu-knopf span {
  display: block;
  width: 20px; height: 2px;
  background: var(--farbe-anthrazit);
  border-radius: 2px;
  transition: background-color 0.25s ease;
}

/* Umschaltschwelle 2026-10-01 gemessen, nicht geschätzt: die volle
   6-Punkte-Navigation passt erst ab 1070px ohne Überlauf (per
   getBoundingClientRect() in 5px-Schritten zwischen 1050 und 1100
   gefunden — bei 1065px noch nav.right=1068.5 > Fenster, bei 1070px
   erstmals nav.right=1068.5 ≤ Fenster). Schwelle = 1070px + 40px
   Sicherheitsabstand = 1110px. Vorher stand hier die geschätzte
   Breakpoint-Zahl 767/768px (Telefon/Tablet-Konvention) — bei 900–1050px
   (Tablet quer, kleinere Notebooks) lief die Navigation nachweislich
   über den Rand, siehe README. */
@media (max-width: 1109px) {
  .menu-knopf { display: inline-flex; }
  .hauptnav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--farbe-weiss);
    border-bottom: 1px solid var(--farbe-rand);
    box-shadow: var(--schatten-md);
    display: none;
  }
  .hauptnav.ist-offen { display: block; }
  .hauptnav ul {
    flex-direction: column;
    gap: 0;
    padding: var(--abstand-sm) var(--abstand-md) var(--abstand-md);
  }
  .hauptnav a {
    display: block;
    padding: var(--abstand-sm) var(--abstand-2xs);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Sofort-Leiste — das wichtigste Element der Seite */
.sofortleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--farbe-notfall);
  box-shadow: var(--schatten-notfall);
}
.sofortleiste a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2xs);
  width: 100%;
  min-height: 56px;
  padding: var(--abstand-sm);
  color: var(--farbe-text-auf-notfall);
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-md);
  text-decoration: none;
}
.sofortleiste svg { color: var(--farbe-text-auf-notfall); flex-shrink: 0; }
body { padding-bottom: 64px; }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .sofortleiste {
    position: static;
    box-shadow: none;
    border-top: 1px solid hsl(12 40% 88%);
  }
  .sofortleiste a {
    min-height: 44px;
    border-radius: var(--radius-md);
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding-block: var(--abstand-2xs);
  }
}

/* ==========================================================================
   KNÖPFE
   ========================================================================== */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2xs);
  min-height: 44px;
  padding: var(--abstand-sm) var(--abstand-md);
  border-radius: var(--radius-pille);
  font-weight: var(--gewicht-kraeftig);
  font-size: var(--schrift-basis);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  /* Hausnorm: ausschließlich transform + opacity animieren. */
  transition: transform var(--dauer-hover) var(--easing-standard);
}
.knopf-notfall {
  background: var(--farbe-notfall);
  color: var(--farbe-text-auf-notfall);
  box-shadow: var(--schatten-notfall);
}
.knopf-notfall:hover { background: var(--farbe-notfall-dunkel); transform: translateY(-1px); }
.knopf-primaer {
  /* Navy, nicht Grün — Weiß auf rohem Grün erreicht nur 2,61:1, siehe
     Kontrast-Tabelle im Kopfkommentar. */
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-text-auf-primaer);
}
.knopf-primaer:hover { background: var(--farbe-primaer-dunkler); transform: translateY(-1px); }
.knopf-sekundaer {
  background: transparent;
  color: var(--farbe-primaer-dunkel);
  border-color: var(--farbe-primaer-dunkel);
}
.knopf-sekundaer:hover { background: var(--farbe-primaer-hell); }
@media (prefers-reduced-motion: reduce) {
  .knopf:hover { transform: none; }
}

/* ==========================================================================
   HERO — randloses Foto, min. 70% Bildschirmhoehe, Navy-Verlauf, Text
   linksbuendig in Weiß darueber (Umbau 2026-10-01, Kontrastwerte siehe
   Kopfkommentar). Die Kopfzeile ist seit der Korrektur oben IMMER solide
   weiß (kein transparenter Zustand mehr) — der Hero zieht sich deshalb
   nicht mehr unter sie (kein negativer margin-top noetig), er beginnt
   einfach direkt darunter, wie jeder andere Abschnitt. --- */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-bild {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-verlauf {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Verstärkt 2026-10-02 fürs neue, helle Hero-Foto (strahlender Himmel) —
     am echten Foto nachgemessen (Python/PIL, worst-case Einzelpixel der
     Textregion): 8,31:1, siehe Kopfkommentar. Der alte, schwächere Verlauf
     fiel am neuen Foto auf 3,29:1 (FAIL) zurück. */
  background: linear-gradient(
    180deg,
    rgba(10, 23, 42, 0.30) 0%,
    rgba(10, 23, 42, 0.65) 30%,
    rgba(10, 23, 42, 0.92) 100%
  );
}
.hero-innen {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-md);
  align-items: flex-start;
  padding-block: var(--abstand-xxl) var(--abstand-xl);
  width: 100%;
}
.hero h1 {
  color: var(--farbe-weiss);
  font-size: var(--schrift-hero);
  line-height: 1.05;
  letter-spacing: var(--laufweite-eng);
  margin-bottom: 0;
}
.hero-unterzeile {
  font-size: var(--schrift-md);
  color: rgba(255, 255, 255, 0.88);
  max-width: 34rem;
}
.hero-unterzeile strong { color: var(--farbe-weiss); font-weight: var(--gewicht-kraeftig); }
.hero-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-sm);
  margin-top: var(--abstand-2xs);
}
/* .knopf-sekundaer ist normalerweise Navy auf Weiß — auf dem dunklen
   Hero-Verlauf waere Navy-Text fast unsichtbar. Hier auf Weiß
   umgestellt, Kontrast gegen den Verlauf siehe Kopfkommentar (gleiche
   Größenordnung wie die Überschrift, 11–14:1). */
.hero-knoepfe .knopf-sekundaer {
  color: var(--farbe-weiss);
  border-color: var(--farbe-weiss);
}
.hero-knoepfe .knopf-sekundaer:hover {
  background: var(--farbe-weiss);
  color: var(--farbe-primaer-dunkel);
}

/* ==========================================================================
   VERTRAUENSLEISTE
   ========================================================================== */
.vertrauensleiste {
  padding-block: var(--abstand-lg);
}
.vertrauensleiste ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abstand-sm);
}
@media (min-width: 700px) {
  .vertrauensleiste ul { grid-template-columns: repeat(5, 1fr); }
}
.vertrauensleiste li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--abstand-2xs);
  font-size: var(--schrift-sm);
  font-weight: var(--gewicht-kraeftig);
  color: var(--farbe-text-mittel);
}
/* Feine Linie statt gezeichnetem Icon — 2026-10-01, siehe Begründung oben
   bei .gwb-feine-linie. */
.vertrauensleiste li::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  /* Grün als Akzentfarbe (Linie, nicht Text) — die kontrastsichere
     Rahmen-Variante, nicht das rohe --gwb-gruen. */
  background: var(--farbe-primaer-rahmen);
}

/* ==========================================================================
   NOTDIENST
   ========================================================================== */
.notdienst {
  background: var(--farbe-notfall-hell);
}
.notdienst-karte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-lg);
  justify-content: space-between;
}
.notdienst-text { max-width: 36rem; }
.notdienst-text p { font-size: var(--schrift-md); color: var(--farbe-text); }
.notdienst-nummer {
  font-size: var(--schrift-xl);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-notfall-dunkel);
  margin: var(--abstand-sm) 0 var(--abstand-md);
}

/* ==========================================================================
   LEISTUNGSBLÖCKE
   ========================================================================== */
/* Karten ohne Rahmen, mit weichem Schatten statt duenner grauer Linie
   (Umbau 2026-10-01 — Rahmen wirkten "wie 2010"). Bild randlos, oben
   buendig, fester Ausschnitt per aspect-ratio + object-fit:cover; der
   Textteil traegt den Innenabstand, nicht die ganze Karte. */
.leistungs-karte {
  background: var(--farbe-weiss);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--schatten-sm);
}
.leistungs-karte {
  /* Alle Karten tragen oben 4 px Rand (nur die hervorgehobene sichtbar),
     damit die Bildoberkanten im Raster auf einer Linie liegen. */
  border-top: 4px solid transparent;
}
.leistungs-karte--hervorgehoben {
  /* Farbiger Akzentbalken oben statt umlaufendem Rahmen. */
  border-top-color: var(--farbe-primaer-rahmen);
  box-shadow: var(--schatten-md);
}
.leistungs-karte-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--farbe-flaeche-2);
}
/* Bild absolut im 4:3-Rahmen: ohne das drückt die intrinsische Höhe eines
   Hochformat-Originals den Rahmen über 4:3 hinaus (min-height:auto). */
.leistungs-karte-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Flachdachtechnik-Karte (Stand 2026-10-12): das Original ist ein
   Hochformat (767×1022 px). Alle vier Karten haben jetzt dasselbe 4:3-
   Bildformat, damit das 2×2-Raster keine Lücke hat. Die Hochformat-Szene
   wird per object-fit:cover beschnitten (nicht verzerrt); object-position
   hält Kopf, Hände und Brenner im Ausschnitt (Bildmitte-oben statt
   Bildmitte). */
.leistungs-karte-bild--hochkant img {
  object-position: 50% 34%;
}
/* Symbolbild-Kennzeichnung (KI-erzeugte Platzhalterbilder, bis echte Fotos
   vorliegen). Pseudo-Element, weil <picture> nur source/img enthalten darf;
   der Alt-Text nennt "Symbolbild" ebenfalls. */
.leistungs-karte-bild--symbol::after {
  content: "Symbolbild";
  position: absolute;
  right: var(--abstand-xs);
  bottom: var(--abstand-xs);
  padding: var(--abstand-3xs) var(--abstand-xs);
  border-radius: var(--radius-md);
  font-size: var(--schrift-xs);
  font-weight: var(--gewicht-kraeftig);
  line-height: 1.2;
  color: #ffffff;
  background: rgba(43, 47, 51, 0.82); /* Anthrazit, Weiß darauf > 11:1 */
  pointer-events: none;
}
.leistungs-karte-inhalt {
  padding: var(--abstand-lg);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-sm);
  flex: 1;
}
.leistungs-karte h3 { margin-bottom: 0; }
.leistungs-karte .nutzen {
  margin-top: auto; /* "Nutzen für Sie" bündig unten, auch bei ungleich langem Text */
  padding-top: var(--abstand-sm);
  border-top: 1px dashed var(--farbe-rand);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-sm);
}
.leistungs-karte .nutzen strong { color: var(--farbe-text); }

/* ==========================================================================
   FOTOS — echte Fotografien (2026-10-01, ersetzen alle Linien-Illustrationen)
   ========================================================================== */
.gwb-foto-rahmen {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--farbe-flaeche-2);
  box-shadow: var(--schatten-md);
}
.gwb-foto {
  display: block;
  width: 100%;
  height: auto;
}
.gwb-foto-unterschrift {
  font-size: var(--schrift-sm);
  color: var(--farbe-text-mittel);
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   BILDBEREICH — Platzhalter für Fotos, die noch nicht geliefert sind
   ========================================================================== */
.bildbereich {
  width: 100%;
  border: 2px dashed var(--farbe-rand-bedienung);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--abstand-md);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-sm);
}
.bildbereich em { color: var(--farbe-text); font-style: normal; font-weight: var(--gewicht-kraeftig); }

/* ==========================================================================
   WARUM FLACHDACH / ABLAUF / MEISTERBETRIEB
   ========================================================================== */
.warum-flachdach {
  display: grid;
  gap: var(--abstand-lg);
  align-items: center;
}
@media (min-width: 800px) {
  .warum-flachdach { grid-template-columns: 1fr 1fr; }
}

.ablauf-liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--abstand-md);
}
@media (min-width: 700px) {
  .ablauf-liste { grid-template-columns: repeat(4, 1fr); }
}
.ablauf-schritt {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2xs);
}
.ablauf-nummer {
  width: 40px; height: 40px;
  border-radius: 50%;
  /* Navy, nicht Grün — gleicher Kontrastgrund wie .knopf-primaer oben. */
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-text-auf-primaer);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--gewicht-fett);
  font-size: var(--schrift-md);
}

.meisterbetrieb-gitter {
  display: grid;
  gap: var(--abstand-lg);
  align-items: start;
}
@media (min-width: 800px) {
  .meisterbetrieb-gitter { grid-template-columns: 1fr 1fr; }
  /* Abwechselnde Anordnung (Umbau 2026-10-01): "Warum Flachdach" davor
     hat Text links/Bild rechts — hier umgekehrt, Bildspalte zuerst,
     damit sich das Muster beim Scrollen abwechselt. Nur visuell (order),
     die Lesereihenfolge im Markup bleibt Text zuerst. */
  .meisterbetrieb-gitter > .meisterbetrieb-bildspalte { order: -1; }
}
/* Reine Textliste statt Icon-Zeile (2026-10-01, siehe §6 unten) */
.rollen-liste { margin: var(--abstand-sm) 0 0; padding-left: 1.2em; display: grid; gap: var(--abstand-2xs); color: var(--farbe-text); }

/* Bildspalte "Wer hier arbeitet" (2026-10-02): echtes Teamfoto + darunter
   der weiterhin offene Meisterbrief-Platzhalter, gleiche Spalte. */
.meisterbetrieb-bildspalte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-md);
}
.meisterbetrieb-bildspalte .gwb-foto-rahmen { width: 100%; }

/* ==========================================================================
   PLANER-BLOCK — randlose Navy-Flaeche (Umbau 2026-10-01: Abschnitte
   wechseln sich im Untergrund ab, hell -> Navy-Flaeche -> hell, statt
   durchgehend Anthrazit)
   ========================================================================== */
.planer {
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-weiss);
}
.planer h2 { color: var(--farbe-weiss); }
.planer p { color: rgba(255, 255, 255, 0.85); }
.planer .knopf-primaer { background: var(--farbe-weiss); color: var(--farbe-primaer-dunkel); }
.planer .knopf-primaer:hover { background: var(--farbe-flaeche); }

/* ==========================================================================
   EINZUGSGEBIET — zweispaltig statt zentriert gestapelt (Umbau
   2026-10-01): Text links, Orte-Liste als eigene Spalte rechts.
   ========================================================================== */
.einzugsgebiet-gitter {
  display: grid;
  gap: var(--abstand-lg);
  align-items: center;
}
@media (min-width: 800px) {
  .einzugsgebiet-gitter { grid-template-columns: 1fr 1fr; }
}
.einzugsgebiet-orte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-sm);
}
.einzugsgebiet-orte span {
  font-size: var(--schrift-lg);
  font-weight: var(--gewicht-fett);
  color: var(--farbe-text);
  padding-left: var(--abstand-md);
  border-left: 3px solid var(--farbe-primaer-rahmen);
}
.einzugsgebiet-orte span.einzugsgebiet-bis {
  font-size: var(--schrift-sm);
  font-weight: var(--gewicht-normal);
  color: var(--farbe-text-mittel);
  border-left-color: var(--farbe-rand);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-liste { display: grid; gap: var(--abstand-sm); max-width: var(--breite-inhalt); }
.faq-eintrag {
  border-radius: var(--radius-md);
  padding: var(--abstand-sm) var(--abstand-md);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-sm);
}
.faq-eintrag summary {
  cursor: pointer;
  font-weight: var(--gewicht-kraeftig);
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--farbe-primaer-dunkel);
  font-weight: var(--gewicht-fett);
}
.faq-eintrag[open] summary::before { content: "–"; }
.faq-eintrag p { margin-top: var(--abstand-2xs); max-width: none; }
.faq-eintrag .platzhalter { display: inline-block; margin-top: var(--abstand-2xs); }

/* ==========================================================================
   ABSCHLUSS-BLOCK
   ========================================================================== */
.abschluss {
  background: var(--farbe-primaer-dunkel);
  color: var(--farbe-weiss);
  text-align: center;
}
.abschluss h2 { color: var(--farbe-weiss); }
.abschluss p { color: #dcebe1; margin-inline: auto; }
.abschluss-nummer {
  font-size: var(--schrift-xl);
  font-weight: var(--gewicht-fett);
  display: block;
  margin: var(--abstand-sm) 0 var(--abstand-md);
}
.abschluss .knopf-notfall { box-shadow: none; }

/* ==========================================================================
   ANFRAGEFORMULAR
   ========================================================================== */
.anfrage-hinweis {
  background: var(--farbe-primaer-hell);
  border-radius: var(--radius-md);
  padding: var(--abstand-sm) var(--abstand-md);
  margin-bottom: var(--abstand-md);
  font-weight: var(--gewicht-kraeftig);
}
.anfrage-hinweis a { color: var(--farbe-primaer-dunkel); }

.formular {
  display: grid;
  /* minmax(0, 1fr) statt der impliziten "auto"-Spalte (Fund 2026-10-01,
     320px-Überlauf): ohne gesetzte grid-template-columns schrumpft die
     einzige Spalte nicht unter die automatische Mindestgröße ihrer
     Inhalte — gemessen 365px bei 320px Fenster. minmax(0, …) hebt genau
     diese Mindestgröße auf. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-md);
  max-width: 40rem;
}
.feld { display: flex; flex-direction: column; gap: var(--abstand-3xs); }
.feld label { font-weight: var(--gewicht-kraeftig); font-size: var(--schrift-sm); }
.feld .hilfetext { font-size: var(--schrift-xs); color: var(--farbe-text-mittel); }
.feld input,
.feld select,
.feld textarea {
  font: inherit;
  padding: var(--abstand-2xs) var(--abstand-sm);
  min-height: 44px;
  border: 1.5px solid var(--farbe-rand-bedienung);
  border-radius: var(--radius-md);
  background: var(--farbe-weiss);
  color: var(--farbe-text);
}
.feld textarea { min-height: 120px; resize: vertical; }
.feld input[type="file"] { padding: var(--abstand-2xs) 0; border: none; min-height: auto; }

/* Honeypot — für Menschen unsichtbar, für Screenreader ausgeblendet, Bots füllen es aus */
.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular-fusszeile { font-size: var(--schrift-xs); color: var(--farbe-text-mittel); }
.datenschutzhinweis { font-size: var(--schrift-xs); color: var(--farbe-text-mittel); max-width: none; }

.formular-status {
  border-radius: var(--radius-md);
  padding: var(--abstand-sm) var(--abstand-md);
  font-weight: var(--gewicht-kraeftig);
}
.formular-status--erfolg { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); }
.formular-status--fehler { background: var(--farbe-fehler-flaeche); color: var(--farbe-fehler); }

/* ==========================================================================
   PLATZHALTER — gelb markiert, damit niemand sie übersieht
   ========================================================================== */
.platzhalter {
  background: #fff3b0;
  color: #5c4a00;
  padding: 0.05em 0.4em;
  border-radius: var(--radius-sm);
  font-weight: var(--gewicht-kraeftig);
  font-size: 0.92em;
  border: 1px dashed #c9a400;
  display: inline;
}

/* ==========================================================================
   FUSS
   ========================================================================== */
.fuss {
  background: var(--farbe-anthrazit);
  color: #cfd2d5;
  padding-block: var(--abstand-lg);
}
.fuss .inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-md);
  justify-content: space-between;
  align-items: center;
}
.fuss a { color: #f0f1f2; }
.fuss-nav { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-md); padding: 0; margin: 0; }
.fuss small { color: #9aa0a5; }

/* ==========================================================================
   UNTERSEITEN (Impressum / Datenschutz)
   ========================================================================== */
.rechtstext {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--abstand-xl) var(--abstand-md) var(--abstand-xxl);
}
.rechtstext h1 { font-size: var(--schrift-xl); }
.rechtstext h2 { font-size: var(--schrift-lg); margin-top: var(--abstand-lg); }
.rechtstext p { max-width: none; }
.zurueck-link { display: inline-block; margin-bottom: var(--abstand-md); }

/* ==========================================================================
   DANKE-SEITE
   ========================================================================== */
.danke-seite {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--abstand-xxl) var(--abstand-md);
  gap: var(--abstand-md);
}

/* ==========================================================================
   FOTOS, GÜTEMERKMALE, VERTRAUENSREIHE, FIXES
   Stand 2026-10-01 — zwei Revisionen in einem Abschnitt:
   (a) Nacharbeit nach Kundenruckmeldung 1 (leere Bilder, Abstände, Bewegung,
       Hochwertigkeitsmerkmale, Siegel — ersetzte Platzhalter durch fünf
       Linien-Illustrationen).
   (b) Diese Revision, nach Rückmeldung des Eigentümers: „Alle Bilder sehen
       schrecklich aus. Diese Dächer oder Symbole, Ikonen, alles was du
       rein platziert hast, sieht wirklich schrecklich aus." Die fünf
       Illustrationen aus (a) sind jetzt durch echte Fotos ersetzt (siehe
       .gwb-foto-rahmen oben), und JEDES gezeichnete Linien-Symbol auf der
       Seite ist entfernt — Vertrauensleiste, Gütemerkmale, Siegel, die
       Icon-Paare in den Leistungskarten, beide Tropfen (Hero + Notdienst),
       die drei Deko-Trenner, die Rollen-Liste-Icons, das Meisterbrief-Icon,
       die Einzugsgebiet-Karte. Einzige bewusst erhaltene Ausnahme: das
       Telefon-Icon in der Sofort-Leiste (Kopfbereich) — funktionales
       UI-Element neben der wichtigsten Handlung der Seite, keine
       Dach-/Symbol-Illustration, nicht in der Entfernungs-Liste des
       Auftrags genannt. Leitsatz dieser Revision: „Bei einem Meisterbetrieb
       wirkt gut gesetzter Text hochwertiger als ein Symbol, das nicht ganz
       sitzt." Statt Icons: klare Typografie, Weißraum, feine Trennlinien
       (siehe .gwb-feine-linie, ::before-Akzente unten).
   ========================================================================== */

/* --- Meisterbrief-Platzhalter: würdig statt graues Loch. Bleibt ein
   Platzhalter (echtes Foto noch nicht geliefert), jetzt ohne Icon —
   die Doppelrahmen-Umrandung trägt die Form allein. --- */
.bildbereich--urkunde {
  aspect-ratio: auto;
  max-height: 240px;
  max-width: 180px;
  margin-inline: auto;
  flex-direction: column;
  gap: var(--abstand-2xs);
  border: 4px double var(--farbe-rand-bedienung);
  padding: var(--abstand-md) var(--abstand-sm);
}

/* --- Gütemerkmal-Block: fünf Kernaussagen aus der Visitenkarte, ohne
   Icon — eine feine Linie markiert den Anfang jedes Blocks. --- */
.gwb-guete {
  display: grid;
  gap: var(--abstand-lg) var(--abstand-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .gwb-guete { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gwb-guete { grid-template-columns: repeat(5, 1fr); } }
.gwb-guete-item { display: flex; flex-direction: column; gap: var(--abstand-2xs); }
.gwb-guete-item::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--farbe-primaer-rahmen);
  margin-bottom: var(--abstand-3xs);
}
.gwb-guete-item h3 {
  font-size: var(--schrift-sm);
  letter-spacing: var(--laufweite-caps);
  text-transform: uppercase;
  margin-bottom: 0;
}
.gwb-guete-item p { font-size: var(--schrift-sm); color: var(--farbe-text-mittel); margin: 0; max-width: none; }

/* --- Vertrauensreihe: war ein gezeichnetes Rundsiegel mit perforiertem
   Rand, wirkte wie eine unfertige Skizze. Jetzt reiner Textbaustein mit
   feiner Umrandung — der offene Platz (Herstellerzertifikate)
   bleibt Text, dort kommen später echte Logos hin; ein echtes Logo neben einem gezeichneten Pseudosiegel hätte erst
   recht schlecht ausgesehen. --- */
.gwb-vertrauensreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-sm);
  margin-top: var(--abstand-lg);
}
.gwb-vertrauen-eintrag {
  border-radius: var(--radius-md);
  padding: var(--abstand-xs) var(--abstand-md);
  font-size: var(--schrift-sm);
  font-weight: var(--gewicht-kraeftig);
  color: var(--farbe-text);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-sm);
}
/* Platzhalter behalten bewusst einen gestrichelten Rahmen (statt
   Schatten) — das ist hier kein Karten-Rahmen, sondern das Signal
   "offen/unvollständig", dieselbe Konvention wie .platzhalter überall
   sonst auf der Seite. */
.gwb-vertrauen-eintrag--platzhalter {
  border: 1px dashed var(--farbe-rand-bedienung);
  box-shadow: none;
  font-weight: var(--gewicht-normal);
}

/* Alte Fix-Regel "Hero bekommt dieselbe mobile Reduzierung wie .abschnitt"
   entfaellt — der Hero ist seit dem Umbau 2026-10-01 kein padding-block-
   Abschnitt mehr, sondern eine min-height:70vh-Bühne mit eigenem
   Innenabstand (.hero-innen), siehe HERO-Block oben. */

/* --- Fix: Vertrauensleiste konsistent mit dem übrigen System --- */
@media (max-width: 767px) {
  .vertrauensleiste { padding-block: var(--abstand-md); }
}

/* --- Fix: Ueberschrift-zu-Inhalt-Abstand vereinheitlicht. Abschnitte ohne
   .abschnitt-kopf bekamen nur die 16px H2-Eigenabstand statt der ueblichen
   40px zwischen Kopf und Koerper. --- */
.notdienst-text h2,
.warum-flachdach h2,
.meisterbetrieb-gitter h2,
.planer h2,
.abschluss h2 {
  margin-bottom: var(--abstand-lg);
}

/* --- Entfallen in dieser Revision: die Hero-Illustration mitsamt ihrer
   dokumentierten stroke-dashoffset-Zeichnen-Ausnahme (frühere §5.8). Die
   Hero-Illustration war selbst eine Linien-Illustration und ist durch das
   Hero-Foto ersetzt — es gibt keine Stelle mehr, an der diese Ausnahme
   noch gilt. --dauer-zeichnen-Token oben ebenfalls entfernt. --- */

/* ==========================================================================
   REFERENZEN (2026-10-02) — echte Baustellenfotos, Raster + Lightbox.
   Kein Vorher/Nachher-Regler: siehe 03-referenzen-konzept.md §1.2, es gibt
   kein zugeordnetes Paar im Material. Jede Kachel ist ein echter Link auf
   das Originalbild (href) — funktioniert ohne JavaScript (öffnet das Bild
   direkt), die Lightbox in app.js ist eine Verbesserung obendrauf, kein
   Ersatz für die Sichtbarkeit im Raster.
   ========================================================================== */
.referenz-gitter {
  display: grid;
  gap: var(--abstand-md);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .referenz-gitter { grid-template-columns: repeat(2, 1fr); }
}
.referenz-kachel {
  display: block;
  background: var(--farbe-weiss);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schatten-sm);
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
}
.referenz-kachel:hover { box-shadow: var(--schatten-md); }
.referenz-kachel:focus-visible {
  outline: 3px solid var(--farbe-primaer-fokus);
  outline-offset: 2px;
}
.referenz-kachel-bild {
  aspect-ratio: 4 / 3;
  background: var(--farbe-flaeche-2);
  display: block;
}
.referenz-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.referenz-kachel-text {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3xs);
  padding: var(--abstand-sm) var(--abstand-md);
  font-size: var(--schrift-sm);
  color: var(--farbe-text-mittel);
}
.referenz-kachel-text strong { color: var(--farbe-text); font-weight: var(--gewicht-kraeftig); }

/* ---- Vorher / Nachher (2026-10-12) ---- */
.vorher-nachher {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-md);
  margin-bottom: var(--abstand-lg);
}
@media (min-width: 700px) {
  .vorher-nachher { grid-template-columns: repeat(2, 1fr); }
}
.vn-kachel {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--schatten-md);
  cursor: zoom-in;
  background: var(--farbe-flaeche-2);
}
.vn-kachel:focus-visible {
  outline: 3px solid var(--farbe-primaer-fokus);
  outline-offset: 2px;
}
.vn-kachel picture { display: block; aspect-ratio: 4 / 3; }
.vn-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-etikett {
  position: absolute;
  top: var(--abstand-sm);
  left: var(--abstand-sm);
  padding: var(--abstand-2xs) var(--abstand-md);
  border-radius: var(--radius-md);
  font-size: var(--schrift-md);
  font-weight: var(--gewicht-fett);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--farbe-anthrazit);   /* Weiß auf Anthrazit 13,49:1 */
  box-shadow: var(--schatten-md);
}
.vn-etikett--nachher { background: var(--farbe-primaer-dunkel); } /* Weiß auf Navy 11,01:1 */
.vn-unterschrift {
  margin: 0 0 var(--abstand-md);
  color: var(--farbe-text-mittel);
  font-size: var(--schrift-sm);
}
.vn-ausgang {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abstand-md);
  margin-bottom: var(--abstand-lg);
}
.vn-ausgang .vn-kachel { box-shadow: var(--schatten-sm); }
.vn-ausgang .vn-etikett { font-size: var(--schrift-xs); padding: var(--abstand-3xs) var(--abstand-sm); top: var(--abstand-xs); left: var(--abstand-xs); }

.referenz-material {
  margin-top: var(--abstand-lg);
  padding: var(--abstand-md) var(--abstand-lg);
  background: var(--farbe-primaer-hell);
  border-radius: var(--radius-lg);
  max-width: 44rem;
}
.referenz-material h3 { margin-bottom: var(--abstand-2xs); }
.referenz-material p { margin: 0; color: var(--farbe-text); }

.referenz-anruf {
  margin-top: var(--abstand-lg);
  font-size: var(--schrift-md);
  font-weight: var(--gewicht-kraeftig);
}
.referenz-anruf a { color: var(--farbe-primaer-dunkel); }

/* ==========================================================================
   LIGHTBOX (2026-10-02) — eigenes kleines Skript, keine Fremdbibliothek.
   Tastatur: Escape schließt, Pfeiltasten blättern (siehe app.js). Fokus
   wird beim Öffnen in den Dialog gesetzt und beim Schließen auf das
   auslösende Element zurückgegeben.
   ========================================================================== */
.gwb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand-md);
  background: rgba(10, 12, 16, 0.92);
}
.gwb-lightbox[hidden] { display: none; }
.gwb-lightbox-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-sm);
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  outline: none;
}
.gwb-lightbox-bild {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--schatten-lg);
}
.gwb-lightbox-beschriftung {
  color: var(--farbe-weiss);
  font-size: var(--schrift-sm);
  text-align: center;
  max-width: 60ch;
  margin: 0;
}
.gwb-lightbox-knopf {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--farbe-weiss);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.gwb-lightbox-knopf:hover { background: rgba(255, 255, 255, 0.22); }
.gwb-lightbox-knopf:focus-visible {
  outline: 3px solid var(--farbe-weiss);
  outline-offset: 2px;
}
.gwb-lightbox-schliessen { position: absolute; top: -52px; right: 0; }
.gwb-lightbox-zurueck { position: absolute; left: -12px; top: 50%; transform: translateY(-50%); }
.gwb-lightbox-weiter { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  /* Pfeile auf Schmalbildschirm unter statt neben dem Bild — kein
     Überlauf durch die negativ positionierten Knöpfe. */
  .gwb-lightbox-dialog { padding-inline: 0; }
  .gwb-lightbox-zurueck, .gwb-lightbox-weiter {
    position: static;
    transform: none;
  }
  .gwb-lightbox-schliessen { top: -48px; right: 0; }
}