/* ===================================================================
   Kerkhoff Garten- und Landschaftsbau — VORTE Beispiel-Website
   Paket: Starter (5 Seiten). Gebaut 30.08.2026.

   Farbkonzept: bestätigte Option A — Tannengrün + gedämpfter Holz-/
   Erdton. Gedämpftes, gesättigtes Grün statt Wiesen-/Neongrün (wirkt
   laut Branchen-Recherche „billig"), warmer Ockerbraun statt grellem
   Gelb, Anthrazit als zweite Dunkelfläche für Abwechslung.

   Aufbau: Mobile First (Basis = Mobil, min-width-Queries = größer).

   HINWEIS: Fiktives Portfolio-Projekt. Alle Firmen-/Kontaktdaten sind
   bewusst erfundene Platzhalter.
   =================================================================== */

/* ── KUNDENVARIABLEN ───────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   KONTRASTWERTE — WCAG-2.x-Formel, gegen die tatsächlichen Hex-Werte
   ausgerechnet (relative Luminanz je Kanal, nicht geschätzt),
   30.08.2026.

   Verwendete Schwellen — genau zwei, siehe qualitaets-checkliste.md
   und haeufige-fehler.md Technik #9:
     ≥ 24px normal ODER ≥ 18,66px/14pt fett  → 3:1
     alles darunter                           → 4,5:1
     Nicht-Text-Begrenzungen (WCAG 1.4.11)    → 3:1
   Der Bereich 18–18,66px fett zählt als NORMALTEXT. Kein Wert unter
   4,6:1 wurde mit einer Größen-/Fettschrift-Begründung durchgewinkt.

   (1) TEXTFARBEN
     Weiß         auf --primary   #31572C .......  8,30:1  ✓ AAA
     Weiß         auf --primary-d #22400F ....... 11,61:1  ✓ AAA
     Weiß         auf --ink       #2B2E29 ....... 13,77:1  ✓ AAA
     Weiß         auf --accent-btn#9A6127 .......  5,11:1  ✓ AA
     --on-dark-soft #E4EBE0 auf --primary .......  6,82:1  ✓ AA
     --on-dark-soft #E4EBE0 auf --primary-d .....  9,54:1  ✓ AAA
     --on-dark-soft #E4EBE0 auf --ink ........... 11,31:1  ✓ AAA
     --on-dark-min  #D6E0D2 auf --primary .......  6,11:1  ✓ AA
     --on-dark-min  #D6E0D2 auf --ink ........... 10,12:1  ✓ AAA
     --text  #132A13 auf --bg #F5F3EE ........... 13,84:1  ✓ AAA
     --text  #132A13 auf --white ................ 15,35:1  ✓ AAA
     --muted #5A5F55 auf --bg ...................  5,91:1  ✓ AA
     --muted #5A5F55 auf --white ................  6,56:1  ✓ AA
     --accent-ink #8A5520 auf --bg ..............  5,57:1  ✓ AA
     --accent-ink #8A5520 auf --white ...........  6,18:1  ✓ AA
     --primary-d  #22400F auf --white ........... 11,61:1  ✓ AAA (.btn-light)
     --danger #A3341F auf --white ...............  6,84:1  ✓ AA
     --danger #A3341F auf --bg ..................  6,17:1  ✓ AA
     Notice-Box: #3F3A22 auf #EFEADF ............ 10,05:1  ✓ AAA
     Statusbox OK:  #1E5B22 auf #E6F2E6 .........  6,84:1  ✓ AA
     Statusbox Fehler: #8C2A16 auf #FBE9E7 ......  7,29:1  ✓ AAA

   (2) NICHT-TEXT-KONTRASTE (WCAG 1.4.11, Ziel 3:1)
       Zweite, eigenständige Liste — genau deren Fehlen war der blinde
       Fleck aus haeufige-fehler.md Technik #10.
     --input-border #8C877D auf Weiß ............  3,57:1  ✓
     Fokusring --primary #31572C auf --bg .......  7,49:1  ✓
     Fokusring --primary #31572C auf --white ....  8,30:1  ✓
     .btn-outline-Rahmen --accent-ink auf Weiß ..  6,18:1  ✓
       (solider Hex-Wert statt rgba — der Rahmen ist das einzige
        Merkmal, das den sekundären CTA als Schaltfläche ausweist)
     .btn-outline-light-Rahmen rgba(255,255,255,0.60)
       deckt auf --primary zu #ADBCAB auf ........  4,17:1  ✓
     --accent-l #DDA15E auf --primary ...........  3,69:1  ✓
       (Nav-Unterkante, Footer-Trennlinie, Badge-Ring — rein
        dekorativ bzw. Begrenzung, NIE für Text)
     --accent #B9793A auf --white ...............  3,58:1  ✓
       (Karten-Oberkante, h-rule, Zitatzeichen 44px = Großtext)
     --accent #B9793A auf --bg ..................  3,23:1  ✓
       (nur Flächen/Linien, kein Text — für Text steht
        --accent-ink #8A5520 bereit)

   WICHTIG für künftige Farbänderungen: --accent #B9793A ist als
   Textfarbe UNZUREICHEND (auf Weiß nur 3,58:1, auf --bg 3,23:1) und
   auch als Button-Hintergrund unbrauchbar (Weiß darauf 3,58:1, --text
   darauf 4,28:1 — beides unter 4,5:1). Deshalb existieren zwei
   Ableitungen: --accent-btn #9A6127 (Buttonfläche, Weiß darauf
   5,11:1) und --accent-ink #8A5520 (Akzenttext auf hellem Grund).
   --accent selbst bleibt dekorativ.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --primary:      #31572C;   /* Tannengrün — Header, Footer, Hero */
  --primary-d:    #22400F;   /* Dunkler — Hover, Verlaufsende */
  --primary-l:    #4B7444;   /* Heller — dekorative Flächen */
  --ink:          #2B2E29;   /* Grünlich-Anthrazit — 2. Dunkelfläche
                                (Zitat-Sektion, Footer-Unterzeile) */
  --ink-d:        #1D1F1B;   /* Anthrazit dunkler — Hover */
  --accent:       #B9793A;   /* Holz-/Erdton — DEKORATIV (Linien,
                                Kartenkanten). NICHT für Text/Buttons. */
  --accent-l:     #DDA15E;   /* Heller Ocker — dekorativ AUF dunklem
                                Grund (Nav-Unterkante, Badge-Ring) */
  --accent-btn:   #9A6127;   /* Buttonfläche — Weiß darauf 5,11:1 */
  --accent-btn-d: #7E4E1D;   /* Button-Hover */
  --accent-ink:   #8A5520;   /* AKZENTTEXT auf hellem Grund (Links,
                                Karten-Links, Kicker): 5,57:1 auf --bg */
  --bg:           #F5F3EE;   /* Warmes Off-White — Seitenhintergrund */
  --white:        #FFFFFF;
  --text:         #132A13;   /* Fließtext, sehr dunkles Grün */
  --muted:        #5A5F55;   /* Sekundärtext (5,91:1 auf --bg) */
  --border:       #E1DCD1;   /* dekorative Kartenrahmen (kein UI-Rand) */
  --input-border: #8C877D;   /* Formularfeld-Rahmen: 3,57:1 auf Weiß */
  --danger:       #A3341F;   /* Pflichtfeld-Sternchen */

  /* Dunkelbereich-Textfarben — bewusst SOLIDE Hex-Werte statt
     rgba()-Opacity: die nötige Deckkraft hängt an der Helligkeit der
     jeweiligen Dunkelfläche, und diese Website hat zwei davon
     (--primary und --ink). Solide Werte sind gegen beide gerechnet. */
  --on-dark:      #FFFFFF;   /* 8,30:1 auf --primary */
  --on-dark-soft: #E4EBE0;   /* 6,82:1 auf --primary */
  --on-dark-min:  #D6E0D2;   /* 6,11:1 auf --primary (Kleinstext) */

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 14px;
  --shadow-s: 0 1px 4px rgba(19,42,19,0.10);
  --shadow-m: 0 6px 20px rgba(19,42,19,0.16);
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top GLOBAL auf html — deckt die Sticky-Nav (~64px) für
   ALLE Anker-Sprungziele ab, auch #main-content (Skip-Link) und später
   ergänzte IDs. Bewusst nicht als scroll-margin-top auf Einzelselektoren
   (haeufige-fehler.md Technik #6). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { text-decoration: none; color: inherit; }
/* BEIDE Listentypen zurücksetzen — sobald eine Liste ihre Nummerierung
   selbst mitbringt (hier: ol.timeline mit Jahreszahl im eigenen span,
   ol.steps mit CSS-Counter), stünde der native ::marker sonst je nach
   Browser als zweite Nummer daneben (haeufige-fehler.md Technik #15). */
ul, ol { list-style: none; }
button { font-family: inherit; }

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

/* ── SICHTBARER TASTATURFOKUS (BFSG) ──────────────────────────── */
/* --primary ist hier eine DUNKLE Fläche, der Fokusring auf hellem
   Grund erreicht damit 7,49:1 (--bg) bzw. 8,30:1 (Weiß). Sollte das
   Farbkonzept je auf eine helle --primary umgestellt werden, muss
   diese Basisregel mitgeprüft werden — genau das wurde in
   haeufige-fehler.md Technik #13 einmal übersehen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.nav a:focus-visible,
.nav button:focus-visible,
.nav-mobile a:focus-visible,
.hero a:focus-visible,
.pagehead a:focus-visible,
.section-quotes a:focus-visible,
.cookie-bar a:focus-visible,
.cookie-bar button:focus-visible,
.tel-float:focus-visible,
footer a:focus-visible {
  outline-color: #FFFFFF;
}

/* ── SKIP LINK ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -60px; left: 0;
  background: var(--primary); color: #FFFFFF;
  padding: 10px 18px; z-index: 1000;
  font-size: 14px; font-weight: 600;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ── LAYOUT ────────────────────────────────────────────────────── */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.section { padding: 48px 0; }
.section-alt { background: var(--white); }
.narrow { max-width: 780px; }

/* ── TYPOGRAFIE ────────────────────────────────────────────────── */
/* overflow-wrap: lange deutsche Komposita ohne Leerzeichen koennen auf
   schmalen Viewports breiter sein als die verfuegbare Spalte und ohne
   Umbruchpunkt horizontal ueberlaufen -- praeventiv nach Fund auf
   berger-bedachungen/leistungen.html (30.08.2026), siehe
   haeufige-fehler.md Technik #16. */
h1 { font-size: clamp(27px, 6vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: break-word; }
h2 { font-size: clamp(21px, 4vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
h4 { font-size: 15px; font-weight: 700; }
p  { font-size: 16px; line-height: 1.7; color: var(--muted); }
.lead { font-size: 17px; color: var(--text); }
strong { color: var(--text); font-weight: 700; }

.section h2 { margin-bottom: 14px; color: var(--text); }
.section h3 { color: var(--text); }
.section p + p { margin-top: 14px; }
.section-head { margin-bottom: 28px; }
.section-head p { max-width: 660px; }

.h-rule::after {
  content: ""; display: block;
  width: 52px; height: 4px; border-radius: 2px;
  background: var(--accent);
  margin-top: 12px;
}

/* Kicker / Eyebrow-Zeile über Überschriften */
.kicker {
  display: block;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}
/* Auf dunklem Grund reicht --accent-l (3,69:1) für 12,5px-Text NICHT.
   Deshalb --on-dark-soft (6,82:1 / 11,31:1). */
.pagehead .kicker,
.hero .kicker,
.section-quotes .kicker { color: var(--on-dark-soft); }

/* Fließtext-Links. ACHTUNG: Für Dunkelbereiche wird diese :not()-Kette
   weiter unten vollständig wiederholt und um eine Klasse ergänzt —
   eine kürzere Override-Regel würde gegen diese hier verlieren
   (haeufige-fehler.md Technik #14). */
.section a:not(.btn):not(.card-link):not(.nav-link):not(.nav-cta) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section a:not(.btn):not(.card-link):not(.nav-link):not(.nav-cta):hover { color: var(--primary); }

/* Aufzählungen (ul/ol global ohne Marker) */
.bullets { display: grid; gap: 9px; margin-top: 12px; }
.bullets li { position: relative; padding-left: 20px; font-size: 16px; color: var(--muted); line-height: 1.65; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.bullets strong { color: var(--text); }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--radius-s);
  font-family: var(--font); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background-color .15s, transform .15s, border-color .15s;
  border: 2px solid transparent;
  text-align: center;
}
.btn-primary { background: var(--accent-btn); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-btn-d); transform: translateY(-1px); }
.btn-secondary { background: var(--primary); color: #FFFFFF; }
.btn-secondary:hover { background: var(--primary-d); transform: translateY(-1px); }
/* Rahmen als solider Hex-Wert, NICHT als rgba: bei einem sekundären
   CTA auf hellem Grund ist der Rahmen das einzige Merkmal, das ihn als
   Schaltfläche ausweist, und braucht deshalb 3:1 (WCAG 1.4.11).
   --accent-ink = 6,18:1 auf Weiß (haeufige-fehler.md Technik #10). */
.btn-outline { background: transparent; color: var(--text); border-color: var(--accent-ink); }
.btn-outline:hover { border-color: var(--text); background: rgba(19,42,19,0.07); }
/* rgba(255,255,255,0.60) deckt auf --primary zu #ADBCAB auf = 4,17:1 ✓ */
.btn-outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.60); }
.btn-outline-light:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.12); }
/* Heller Button auf dunklen Bändern: --primary-d auf Weiß = 11,61:1 ✓ */
.btn-light { background: #FFFFFF; color: var(--primary-d); border-color: #FFFFFF; }
.btn-light:hover { background: var(--on-dark-soft); border-color: var(--on-dark-soft); color: var(--primary-d); }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.cta-band {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-l);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-s);
}
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { margin-bottom: 20px; }
.cta-band .btn-row { justify-content: center; }

/* ── NAVIGATION ────────────────────────────────────────────────── */
.nav {
  background: var(--primary);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 3px solid var(--accent-l);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 12px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; color: #FFFFFF; }
.nav-logo-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-s);
  background: var(--accent-btn);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #FFFFFF;   /* 5,11:1 ✓ */
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-logo-name { font-size: 15px; font-weight: 800; color: #FFFFFF; }
.nav-logo-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--on-dark-soft); }

.nav-links { display: none; align-items: center; gap: 2px; }
.nav-link {
  padding: 8px 12px; font-size: 13.5px; font-weight: 600;
  color: var(--on-dark-soft); border-radius: var(--radius-s);
  transition: color .15s, background-color .15s;
}
.nav-link:hover, .nav-link.active { color: #FFFFFF; background: rgba(255,255,255,0.10); }
.nav-link.active { box-shadow: inset 0 -2px 0 var(--accent-l); }
.nav-cta {
  margin-left: 8px; padding: 10px 16px;
  background: var(--accent-btn); color: #FFFFFF;
  font-size: 13.5px; font-weight: 700;
  border-radius: var(--radius-s);
  transition: background-color .15s;
}
.nav-cta:hover { background: var(--accent-btn-d); }

.nav-burger {
  display: block; background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: var(--radius-s);
}
.nav-burger span {
  display: block; width: 24px; height: 2px; background: #FFFFFF;
  margin: 5px 0; border-radius: 1px; transition: transform .2s, opacity .2s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; background: var(--primary);
  padding: 8px 0 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.nav-mobile.open { display: block; }
.nav-mobile .nav-link {
  display: block; padding: 13px 0; font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
}
.nav-mobile .nav-link:last-of-type { border-bottom: none; }
.nav-mobile .nav-cta { display: block; margin: 14px 0 0; text-align: center; }

/* ── HERO / SEITENKOPF ─────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d) 100%);
  padding: 52px 0 48px;
}
.hero h1 { color: #FFFFFF; margin-bottom: 16px; }
.hero-lead { color: var(--on-dark); font-size: 17px; max-width: 580px; margin-bottom: 22px; }
.hero-usp {
  color: var(--on-dark); font-size: 14.5px; font-weight: 600;
  max-width: 620px; margin-bottom: 26px;
  border-left: 4px solid var(--accent-l); padding-left: 14px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.pagehead { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d) 100%); padding: 40px 0 36px; }
.pagehead h1 { color: #FFFFFF; }
.pagehead p { color: var(--on-dark); margin-top: 10px; max-width: 640px; font-size: 16px; }
.crumbs { font-size: 13px; color: var(--on-dark-soft); margin-bottom: 10px; }
.crumbs a { color: var(--on-dark-soft); text-decoration: underline; }
.crumbs a:hover { color: #FFFFFF; }

/* ── ERFAHRUNGS-SIEGEL (Vertrauenssignal) ──────────────────────── */
/* Punktkranz statt handgezeichnetem Blattkranz: ein organisches
   Naturmotiv aus Bézier-Kurven ist ein Illustrationsproblem, kein
   Geometrieproblem, und rendert je nach Farbkonzept als Fransensaum
   (haeufige-fehler.md Design/Wirkung #4, dort nach sechs Anläufen
   entschieden). 28 gleichmäßig verteilte Punkte sind geometrisch
   trivial und dadurch über jede Farbvariante hinweg stabil. */
.head-split { display: grid; gap: 30px; }
.hero-photo-wrap { position: relative; width: 100%; }

.trust-badge-wrap {
  flex-shrink: 0; position: relative;
  width: 148px; height: 148px;
  display: flex; align-items: center; justify-content: center;
}
.hero-photo-wrap .trust-badge-wrap { position: absolute; right: -12px; bottom: -18px; }
.trust-badge-wrap svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(19,42,19,0.30)); }

/* ── TRUST BAR ─────────────────────────────────────────────────── */
.trust-bar { background: var(--white); padding: 14px 0; border-bottom: 1px solid var(--border); }
.trust-bar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 24px; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.trust-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-btn); flex-shrink: 0; }

/* ── KARTEN / GRIDS ────────────────────────────────────────────── */
.grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: 20px; }
/* Grid-Kinder haben per Spezifikation min-width:auto und schrumpfen
   deshalb nicht unter die intrinsische Breite ihres Inhalts — ein
   breites Kind (Tabelle, Formular) zieht sonst die ganze Seite auf
   Mobile in horizontales Scrollen (haeufige-fehler.md Technik #11). */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid-2 { gap: 28px; align-items: start; }

.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 24px;
  box-shadow: var(--shadow-s);
  transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.card:hover, .card:focus-within { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.card-top { border-top: 4px solid var(--accent); }
.card h3 { margin-bottom: 8px; color: var(--text); }
.card p { font-size: 15px; margin-bottom: 14px; flex-grow: 1; }
.card-link { color: var(--accent-ink); font-weight: 700; font-size: 14px; align-self: flex-start; }
.card-link:hover { color: var(--primary); text-decoration: underline; }
.card-icon {
  width: 42px; height: 42px; border-radius: var(--radius-m);
  background: var(--bg); border: 1px solid var(--border);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.section-alt .card-icon { background: var(--bg); }
.card-icon svg { width: 22px; height: 22px; }

/* ── VERTRAUENS-CHIPS ──────────────────────────────────────────── */
.credential-strip { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.credential-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 18px 10px 12px;
  font-size: 13.5px; font-weight: 700; color: var(--text);
  box-shadow: var(--shadow-s);
}
.section-alt .credential-chip { background: var(--bg); }
.credential-chip .ci-mark {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.section-alt .credential-chip .ci-mark { background: var(--white); }
.credential-chip .ci-mark svg { width: 16px; height: 16px; }

/* ── FOTOS ──────────────────────────────────────────────────────── */
.img-frame {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame.wide { aspect-ratio: 16 / 10; }
.photo-credit { font-size: 11.5px; color: var(--muted); margin-top: 6px; text-align: right; }
.photo-credit a { color: var(--muted); text-decoration: underline; }

/* hero-garten.jpg ist 1,91:1 und wird im 4:3-Rahmen beschnitten — die
   Sitzgruppe liegt im Original rechts im Bild, daher rechtsbetonter
   Bildausschnitt statt der Center-Voreinstellung von object-fit: cover. */
.hero-photo-wrap .img-frame img { object-position: 78% center; }

/* ── REFERENZ-KACHELN (Startseite) ─────────────────────────────── */
.showcase-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.showcase-loc {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin: 18px 0 6px;
}
.showcase-item h3 { margin-bottom: 8px; }
.showcase-item p { font-size: 15px; }

/* ── LEISTUNGSBLÖCKE (leistungen.html) ─────────────────────────── */
.service-block {
  background: var(--white); border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 24px; margin-bottom: 28px;
}
.service-block:last-of-type { margin-bottom: 0; }
.service-block h2 { margin-bottom: 10px; }
.service-num {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: .12em; color: var(--accent-ink); margin-bottom: 6px;
}
.service-icon { margin-bottom: 14px; }
@media (min-width: 820px) {
  .service-reverse .grid-2 > :first-child { order: 2; }
  .service-reverse .grid-2 > :last-child { order: 1; }
}

.value-list { display: grid; gap: 12px; margin-top: 14px; }
.value-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text); }
.value-list .tick {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%; background: var(--accent-btn); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}

/* ── ABLAUF-SCHRITTE ───────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 16px; }
.step {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 20px 20px 20px 64px; position: relative;
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 19px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-btn); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 15px; }
.section-alt .step { background: var(--bg); }

/* ── ZEITLEISTE (ueber-uns.html) ───────────────────────────────── */
.timeline { display: grid; gap: 16px; margin-top: 20px; }
.timeline li {
  background: var(--white); border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-m); padding: 18px 20px;
}
.section-alt .timeline li { background: var(--bg); }
.tl-year {
  display: block; font-size: 13px; font-weight: 800;
  letter-spacing: .1em; color: var(--accent-ink); margin-bottom: 4px;
}
.timeline h3 { margin-bottom: 6px; }
.timeline p { font-size: 15px; }

/* ── ZAHLEN-BAND ───────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.stat {
  background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-m); padding: 18px 14px; text-align: center;
}
.section-alt .stat { background: var(--bg); }
.stat-num { display: block; font-size: 32px; font-weight: 900; line-height: 1.1; color: var(--accent-ink); }
.stat-lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }

/* ── KUNDENSTIMMEN (Anthrazit-Band) ────────────────────────────── */
/* Zweite Dunkelfläche neben dem Grün. Alle Overrides bewusst als
   COMPOUND-Selektoren (.section.section-quotes …) — die generischen
   Regeln .section h2 / .section h3 stehen weiter oben mit gleicher
   Spezifität, bei Gleichstand gewinnt die spätere Quellposition
   (haeufige-fehler.md Technik #14). */
.section-quotes { background: var(--ink); }
.section.section-quotes h2,
.section.section-quotes h3 { color: #FFFFFF; }
.section.section-quotes .section-head p { color: var(--on-dark-soft); }
.section-quotes .h-rule::after { background: var(--accent-l); }
.section.section-quotes a:not(.btn):not(.card-link):not(.nav-link):not(.nav-cta) { color: #FFFFFF; }

.quote-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.quote-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-l);
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-m);
  display: flex; flex-direction: column;
  margin: 0;
}
/* 44px = Großtext-Schwelle klar überschritten; --accent auf Weiß
   3,58:1 ✓ (rein dekoratives Anführungszeichen). */
.quote-mark { font-size: 44px; line-height: 0.7; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.quote-card blockquote { margin: 0; flex-grow: 1; }
.section.section-quotes .quote-card blockquote p { color: var(--text); font-size: 15.5px; line-height: 1.65; }
.quote-author {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14.5px; font-weight: 700; color: var(--text);
}
.quote-author span { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.quote-note {
  margin-top: 22px; font-size: 13px; line-height: 1.6;
  color: var(--on-dark-min);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 14px;
}
/* Globale strong-Regel würde hier dunkles Grün erzwingen
   (haeufige-fehler.md Technik #4). */
.quote-note strong { color: #FFFFFF; }

/* ── ÖFFNUNGSZEITEN ────────────────────────────────────────────── */
.hours { border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); overflow: hidden; }
.hours > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 16px; font-size: 15px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.hours > div:last-child { border-bottom: none; }
.hours dt { font-weight: 700; }
.hours dd { text-align: right; }
.hours .closed { color: var(--muted); }
.hours .highlight { background: var(--bg); }

/* ── SERVICEGEBIET ─────────────────────────────────────────────── */
.area-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.area-list li {
  font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 16px;
}
.section-alt .area-list li { background: var(--bg); }

/* ── FORMULAR ──────────────────────────────────────────────────── */
.form-card {
  background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-l); padding: 24px;
  box-shadow: var(--shadow-s);
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--input-border); border-radius: var(--radius-m);
  font-size: 16px; font-family: var(--font); color: var(--text);
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6E6B65; }
/* Fokusrahmen bewusst --primary, nicht --accent: --accent erreicht auf
   Weiß nur 3,58:1 und wäre als alleiniger Fokusindikator zu schwach
   erkennbar; --primary liegt bei 8,30:1. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(49,87,44,0.20);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.req { color: var(--danger); font-weight: 700; }
.form-optional { font-weight: 400; color: var(--muted); }

.form-check { display: flex; gap: 12px; align-items: flex-start; }
.form-check input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--primary); cursor: pointer;
}
.form-check label { font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; line-height: 1.55; }
.form-check a { color: var(--accent-ink); text-decoration: underline; }

.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
/* aria-live-Container: main.js setzt zuerst die Klasse und schreibt den
   Text erst im nächsten Frame — sonst verschlucken Screenreader die
   Ansage, weil das Element beim Textwechsel noch display:none war
   (haeufige-fehler.md Technik #7). */
.form-status {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-m);
  font-size: 15px; font-weight: 600; display: none;
}
.form-status.show { display: block; }
.form-status.ok { background: #E6F2E6; color: #1E5B22; border: 1px solid #B7DAB8; }
.form-status.err { background: #FBE9E7; color: #8C2A16; border: 1px solid #F0C0B7; }

/* ── KONTAKTDATEN-BLOCK ────────────────────────────────────────── */
.contact-split { display: grid; grid-template-columns: 1fr; gap: 32px; }
.contact-list { display: grid; gap: 16px; margin-top: 20px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text); }
.contact-list .ci {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-m);
  background: var(--primary); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.contact-list .ci svg { width: 18px; height: 18px; }
.contact-list .cl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em;
                    text-transform: uppercase; color: var(--muted); }
.contact-list a { color: var(--accent-ink); text-decoration: underline; font-weight: 600; }
.contact-list a:hover { color: var(--primary); }
address { font-style: normal; }

/* ── GOOGLE MAPS — 2-KLICK-LÖSUNG ──────────────────────────────── */
.maps-wrapper {
  margin-top: 8px; border: 1px solid var(--border);
  border-radius: var(--radius-l); overflow: hidden; background: var(--white);
}
.maps-preview {
  min-height: 260px;
  background: linear-gradient(135deg, #EAEDE4 0%, #DFE3D8 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 26px 20px; text-align: center;
}
.maps-overlay { max-width: 400px; }
.maps-overlay .maps-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.maps-overlay .maps-addr { font-size: 15px; color: var(--muted); margin-bottom: 16px; }
.maps-overlay .maps-hint { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.maps-wrapper iframe { display: block; width: 100%; border: 0; }

/* ── RECHTSTEXTE (Impressum / Datenschutz) ─────────────────────── */
.legal { max-width: 800px; }
.legal h2 { margin-top: 40px; margin-bottom: 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin-top: 24px; margin-bottom: 8px; color: var(--text); }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 12px 0; display: grid; gap: 8px; }
.legal ul li { font-size: 16px; color: var(--muted); padding-left: 18px; position: relative; line-height: 1.65; }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.legal address { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
.legal a { color: var(--accent-ink); text-decoration: underline; }
.legal a:hover { color: var(--primary); }
.legal code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 1px 5px; color: var(--text);
}
.legal .toc {
  background: var(--white); border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-m); padding: 18px 20px; margin-bottom: 32px;
}
.legal .toc h2 { margin: 0 0 10px; font-size: 17px; }
.legal .toc ul { gap: 6px; }
.legal .toc li::before { top: 9px; }

.notice-box {
  background: #EFEADF; border: 1px solid #D9D1BF;
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-m); padding: 16px 18px; margin-bottom: 28px;
}
.notice-box p { color: #3F3A22; font-size: 14.5px; margin: 0; }   /* 10,05:1 ✓ */
.notice-box p + p { margin-top: 8px; }
.notice-box strong { color: #302C19; }

/* ── COOKIE-/DATENSCHUTZ-HINWEIS (statisch, kein Tracking) ─────── */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--ink);
  border-top: 3px solid var(--accent-l);
  padding: 14px 20px;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.22);
  display: none;
}
.cookie-bar.show { display: block; }
.cookie-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.cookie-bar, .cookie-inner, .cookie-text { color: var(--on-dark); }
.cookie-text { font-size: 14px; line-height: 1.6; }
/* Globale strong-Regel würde hier dunkles Grün erzwingen — explizit
   überschreiben (haeufige-fehler.md Technik #4). */
.cookie-text strong { color: #FFFFFF; }
.cookie-text a { color: #FFFFFF; text-decoration: underline; font-weight: 600; }
.cookie-bar .btn { flex-shrink: 0; padding: 10px 22px; }

/* ── TELEFON-SCHNELLWAHL (nur mobil) ───────────────────────────── */
/* Statt eines WhatsApp-Buttons: das Briefing nennt keine WhatsApp-
   Nummer, und eine erfundene würde einen eigenen Datenschutz-Abschnitt
   samt Drittlandübermittlung nach sich ziehen. Reiner tel:-Link, kein
   Drittanbieter, keine Datenübertragung. */
.tel-float {
  position: fixed; right: 16px; bottom: 16px;
  z-index: 310;
  display: flex; align-items: center; gap: 9px;
  background: var(--primary-d); color: #FFFFFF;
  border: 2px solid #FFFFFF; border-radius: 999px;
  padding: 12px 18px; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
  transition: background-color .15s, transform .15s;
}
.tel-float:hover { background: var(--ink-d); transform: translateY(-1px); }
.tel-float svg { width: 19px; height: 19px; flex-shrink: 0; }
/* Solange die Hinweisleiste sichtbar ist, rutscht der Button hoch.
   --cookie-bar-h setzt main.js auf die TATSÄCHLICH gerenderte Höhe
   (ändert sich mit Zeilenumbruch/Bildschirmbreite); 152px ist nur der
   Fallback ohne JavaScript. */
body.cookie-visible .tel-float { bottom: calc(var(--cookie-bar-h, 152px) + 14px); }

/* ── FOOTER ────────────────────────────────────────────────────── */
/* Farbregeln stehen auf JEDEM umgebenden Element, nicht nur auf `a` —
   sonst fällt reiner Text (z. B. die Adresse) auf die dunkle globale
   Fließtextfarbe zurück (haeufige-fehler.md Technik #2). */
footer {
  background: var(--primary);
  border-top: 3px solid var(--accent-l);
  padding: 40px 0 0;
  color: var(--on-dark);
}
footer p, footer li, footer div, footer span, footer address,
footer strong, footer dt, footer dd { color: var(--on-dark); }
footer a { color: var(--on-dark); }
footer a:hover, footer a:focus-visible { color: var(--on-dark-min); text-decoration: underline; }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
footer h2, footer h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark-soft); margin-bottom: 12px;
}
footer ul li { margin-bottom: 8px; font-size: 15px; line-height: 1.55; }
footer ul li:last-child { margin-bottom: 0; }
.footer-desc { font-size: 15px; line-height: 1.7; margin-top: 12px; max-width: 320px; color: var(--on-dark); }
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-hours { font-size: 15px; line-height: 1.7; color: var(--on-dark); }

/* Anthrazit-Unterzeile als zweite Dunkelfläche (Farbkonzept Option A).
   Weiß/--on-dark-min auf --ink = 13,77:1 bzw. 10,12:1 ✓ */
.footer-base { background: var(--ink); padding: 18px 0 22px; }
.footer-base, .footer-base span, .footer-base div, .footer-base p, .footer-base a { color: var(--on-dark-min); }
.footer-base a:hover { color: #FFFFFF; }
.footer-bottom {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px;
}
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.footer-demo-note {
  margin-top: 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--on-dark-min);
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 12px;
}
.footer-demo-note strong { color: #FFFFFF; }

/* ── HILFSKLASSEN ──────────────────────────────────────────────── */
.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;
}
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* ── RESPONSIVE (Mobile First → aufwärts) ──────────────────────── */
@media (min-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .trust-badge-wrap { width: 168px; height: 168px; }
  .form-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cookie-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .service-block { padding: 28px 30px; }
  .form-card, .card { padding: 28px; }
}

@media (min-width: 820px) {
  .section { padding: 72px 0; }
  .hero { padding: 88px 0 76px; }
  .pagehead { padding: 56px 0 50px; }
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .nav-mobile, .nav-mobile.open { display: none; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .quote-grid { grid-template-columns: repeat(3, 1fr); }
  .showcase-grid { grid-template-columns: repeat(3, 1fr); }
  /* .stats bleibt bewusst auch auf dem Desktop zweispaltig: das Raster
     steht in einer halbbreiten .grid-2-Spalte, vier Spalten ergäben dort
     nur ~125px pro Kachel — die große Kennzahl („20 km", 32px/900) und
     ihr Label würden umbrechen. */
  .steps { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .contact-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
  .head-split { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: center; gap: 48px; }
  .hero-photo-wrap { justify-self: end; }
  .trust-badge-wrap { width: 186px; height: 186px; }
  .hero-photo-wrap .trust-badge-wrap { right: -20px; bottom: -24px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 36px; }
  .cta-band { padding: 40px 32px; }
  h1 { font-size: 42px; }
  /* Auf dem Desktop nicht nötig — die Nummer steht im Kopfbereich. */
  .tel-float { display: none; }
}

@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── DRUCK ─────────────────────────────────────────────────────── */
@media print {
  .nav, footer, .cookie-bar, .skip-link, .hero-actions, .btn,
  .tel-float { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .hero, .pagehead, .section-quotes { background: #FFFFFF !important; }
  .hero h1, .pagehead h1,
  .section.section-quotes h2, .section.section-quotes h3 { color: #000000 !important; }
}