/* ===================================================================
   Tischlerei Dahlmann, Issum — VORTE Beispiel-Website (Paket: Standard)
   Gemeinsames Stylesheet aller 8 Seiten.

   Farbkonzept "Helles Eichenholz" (Variante D, von Hannes am 18.08.2026
   freigegeben): helle, warme Eichenholz-Flächen tragen Nav, Hero, Bänder
   und Footer; das dunkle Eichenbraun trägt ausschließlich Text, Buttons,
   Icons und dünne Linien. Die Farbwerte im :root-Block sind unverändert
   aus der freigegebenen Vorschau übernommen.

   Aufbau: Mobile First (Basis = Mobil, min-width-Queries = größer).
   Teil 1 = Grundgerüst und Startseiten-Komponenten,
   Teil 2 = Komponenten der Unterseiten (ab "TEIL 2" weiter unten).

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

   ABWEICHUNGEN GEGENÜBER DER VORSCHAUDATEI preview/style-d.css
   (jeweils reine WCAG-Korrekturen, kein Eingriff ins Farbkonzept —
   in allen vier Fällen wurde eine zu helle TEXTfarbe durch das
   dunklere Eichenbraun derselben Palette ersetzt):
     1. .section a:hover / .card-link:hover standen auf var(--primary)
        (#E8D2AC) — auf hellem Grund praktisch unsichtbar (1,4:1).
        Jetzt var(--accent-btn-d), 9,63:1 auf --bg.
     2. .band-dark a:not(.btn) stand auf var(--accent-ink) — auf der
        unteren Bandhälfte (--primary-d) nur 3,55:1. Jetzt
        var(--accent-btn-d), 5,89:1.
     3. .cookie-text a stand auf var(--accent-ink) auf --primary-d
        (3,55:1). Jetzt var(--accent-btn-d), 5,89:1.
     4. footer a:hover / .footer-bottom a:hover standen auf
        var(--accent-ink) auf --primary (4,20:1, knapp unter 4,5:1).
        Jetzt var(--accent-btn-d), 6,96:1.
   Zusätzlich: .cookie-bar ist jetzt standardmäßig ausgeblendet und wird
   per Klasse .show eingeblendet (vorher umgekehrt) — nötig, damit der
   Hinweis nach dem Wegklicken nicht bei jedem Seitenaufruf erneut
   aufblitzt (Steuerung in assets/js/main.js).
   =================================================================== */

/* ── KUNDENVARIABLEN ───────────────────────────────────────────── */
/* KONTRASTWERTE (WCAG-2.x-Formel, python3-Referenzimplementierung der
   relativen Luminanz, nicht geschätzt — 18.08.2026).
   Schwellen: Normaltext 4,5:1 · Großtext (≥24px normal ODER ≥18,66px
   fett) 3:1 · Nicht-Text-/UI-Begrenzungen (WCAG 1.4.11) 3:1.

   (1) TEXTFARBEN
     --text #2E2419 auf --bg #FBF7F1 ................ 14,23:1  ✓ AAA
     --text #2E2419 auf --white ...................... 15,19:1  ✓ AAA
     --text #2E2419 auf --ph-bg #F0E6D8 .............. 12,27:1  ✓ AAA
     --muted #6B5F52 auf --bg ........................ 5,81:1  ✓ AA
     --muted #6B5F52 auf --white ..................... 6,21:1  ✓ AA
     --muted #6B5F52 auf --ph-bg ..................... 5,01:1  ✓ AA
     --accent-ink #8B5424 auf --bg ................... 5,80:1  ✓ AA
     --accent-ink #8B5424 auf --white ................ 6,19:1  ✓ AA
     --accent-btn-d #5F3714 auf --bg ................. 9,63:1  ✓ AAA
     --accent-btn-d #5F3714 auf --white .............. 10,28:1  ✓ AAA
     --accent-btn-d #5F3714 auf --primary ............ 6,96:1  ✓ AAA
     --accent-btn-d #5F3714 auf --primary-d .......... 5,89:1  ✓ AA
     Weiß auf --accent-btn #7A4A1E ................... 7,43:1  ✓ AAA
     Weiß auf --accent-btn-d #5F3714 ................. 10,28:1  ✓ AAA
     --on-dark(-primary-text) #2E2419 auf --primary #E8D2AC .. 10,30:1 ✓ AAA
     --on-dark #2E2419 auf --primary-d #DDC091 ....... 8,70:1  ✓ AAA
     --on-dark-soft #4A3B2C auf --primary ............ 7,29:1  ✓ AAA
     --on-dark-soft #4A3B2C auf --primary-d ........... 6,16:1  ✓ AA
     --on-dark-min #5C4B39 auf --primary-d ............ 4,77:1  ✓ AA
     --on-dark-min #5C4B39 auf --primary ............... 5,65:1  ✓ AA
     Statusmeldung OK: #1F5A22 auf #E7F1E4 ........... 7,11:1  ✓ AAA
     Statusmeldung Fehler: #8C2A16 auf #FBE9E7 ....... 7,26:1  ✓ AAA
       (--on-dark* heißen weiter so wie in A/B/C, tragen hier aber
        DUNKLEN Text für die jetzt hellen "primary"-Flächen — Name
        bewusst nicht geändert, um die Diff zu C klein zu halten)

   (2) NICHT-TEXT-BEGRENZUNGEN (WCAG 1.4.11, ≥3:1):
     --accent #A9713C auf --white (Karten-Oberkante) ......... 4,25:1 ✓
     --ph-border #A08868 auf --bg ............................ 3,17:1 ✓
     --ph-border #A08868 auf --white ......................... 3,38:1 ✓
       → deshalb trägt --ph-border auch die Rahmen der Formularfelder
         und der Kartenvorschau; --border wäre dafür zu blass.
     --accent-l #8B5424 auf --primary (Nav-/Footer-Linie) .... 4,20:1 ✓
     --accent-btn #7A4A1E auf --white (Rahmen .btn-outline) .. 7,43:1 ✓
     --border #E5D9C8 ist rein dekorativ (Kartenkante neben Schatten),
       trägt keine Bedeutung → 3:1 nicht erforderlich. NICHT für
       Formularfeld-Rahmen oder andere Bedienelement-Grenzen verwenden.

   Badge-/Icon-Kreise (piece-stat, cta-facts .ci, .step::before) sitzen
   NICHT auf der großen --primary-Fläche, sondern sind eigenständige
   kleine Flächen — für sie bleibt --accent-btn (dunkles Eichenbraun)
   mit weißer Schrift in Verwendung, siehe Selektoren unten. Kontrast
   dafür siehe oben ("Weiß auf --accent-btn").
*/
:root {
  --primary:      #E8D2AC;   /* Helles Eichenholz — Nav, Hero, dunkle Bänder, Footer (jetzt HELL) */
  --primary-d:    #DDC091;   /* etwas dunklere Stufe — Verlauf, Cookie-Leiste */
  --accent:       #A9713C;   /* Mittleres Eichenbraun — Kanten, Ringe */
  --accent-btn:   #7A4A1E;   /* Dunkles Eichenbraun — Button-/CTA-FLÄCHE, Badge-Kreise */
  --accent-btn-d: #5F3714;   /* Button-Hover */
  --accent-ink:   #8B5424;   /* Dunkles Eichenbraun — TEXT/Rahmen auf hell */
  --accent-l:     #8B5424;   /* Eichenbraun — Linien/aktive Unterstreichung AUF --primary */
  --accent-text:  #FFFFFF;   /* Text AUF --accent-btn */
  --bg:           #FBF7F1;   /* Warmes Elfenbein, minimal heller als --primary — Seitenhintergrund */
  --white:        #FFFFFF;
  --text:         #2E2419;   /* Warmes Dunkelbraun — Fließtext */
  --muted:        #6B5F52;   /* Sekundärtext */
  --border:       #E5D9C8;   /* dekorative Kartenrahmen */
  --ph-bg:        #F0E6D8;   /* Bildplatzhalter-Fläche */
  --ph-border:    #A08868;   /* Bildplatzhalter-Rahmen (gestrichelt), Formularfeld-Rahmen */

  /* Text AUF den jetzt hellen --primary/--primary-d-Flächen (Nav, Hero,
     Bänder, Footer, Cookie-Leiste) — dunkle Töne statt vormals Weiß. */
  --on-dark:      #2E2419;
  --on-dark-soft: #4A3B2C;
  --on-dark-min:  #5C4B39;

  /* Holzmuster (rein dekorativ, Beschriftung steht daneben) — unverändert
     zu A/B, da Materialfarben unabhängig vom Theme reale Holzarten zeigen */
  --wood-eiche:    #C8A87A;
  --wood-nussbaum: #6E4B32;
  --wood-esche:    #DCC9A6;
  --wood-ahorn:    #E8D9B8;
  --wood-kiefer:   #E0C08C;

  --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(30,30,30,0.10);
  --shadow-m: 0 6px 20px rgba(30,30,30,0.16);
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
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; }
ul { 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) ──────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  /* QA-FIX (Schritt 7): --primary ist in Variante D hell (#E8D2AC) — als
     Standard-Fokusring auf den hellen --bg/--white-Flächen der normalen
     Inhaltsbereiche ergab das nur ~1,4:1 Kontrast (WCAG 1.4.11/2.4.11
     verlangen 3:1), praktisch unsichtbar. --accent-btn (dunkles
     Eichenbraun) hält auf --bg UND --white sicher über 7:1. */
  outline: 3px solid var(--accent-btn);
  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,
.band-dark a:focus-visible,
.demo-topbar a:focus-visible,
.cookie-bar a:focus-visible,
.cookie-bar button:focus-visible,
.lightbox button:focus-visible,
footer a:focus-visible {
  /* D-ÄNDERUNG: --primary ist jetzt hell, ein weißer Fokusring wäre
     darauf unsichtbar — dunkler Ring statt Weiß. */
  outline-color: var(--text);
}
.demo-topbar a:focus-visible,
.lightbox button:focus-visible { outline-color: #FFFFFF; }

/* ── SKIP LINK ─────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -60px; left: 0;
  /* D-ÄNDERUNG: bewusst weiter dunkles --accent-btn statt --primary,
     damit der Skip-Link unabhängig vom hellen Nav-Hintergrund immer
     sichtbar bleibt. */
  background: var(--accent-btn); 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: 760px; }

/* ── 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; line-height: 1.4; color: var(--text); }
p  { font-size: 16px; line-height: 1.7; color: var(--muted); }
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: 640px; }
.eyebrow {
  display: block; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 10px;
}

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

.section a:not(.btn):not(.card-link):not(.nav-link):not(.tile) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* KORREKTUR gegenüber preview/style-d.css: Hover stand auf var(--primary)
   (#E8D2AC) und war damit auf hellem Grund faktisch unsichtbar (1,4:1).
   Jetzt die dunkle Stufe derselben Palette, 9,63:1 auf --bg. */
.section a:not(.btn):not(.card-link):not(.nav-link):not(.tile):hover { color: var(--accent-btn-d); }

/* ── 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: var(--accent-text); }
.btn-primary:hover { background: var(--accent-btn-d); transform: translateY(-1px); }
/* Rahmen-Buttons: SOLIDE Hex-Rahmen (kein rgba), da der Rahmen das
   einzige Merkmal ist, das die Schaltfläche erkennbar macht. */
.btn-outline { background: transparent; color: var(--accent-ink); border-color: var(--accent-ink); }
.btn-outline:hover { background: var(--white); }
.btn-outline-light { background: transparent; color: var(--text); border-color: var(--accent-ink); }
.btn-outline-light:hover { border-color: var(--text); background: rgba(46,36,25,0.08); }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── DEMO-HINWEISLEISTE (Transparenzpflicht der Portfolio-Seite) ── */
/* Steht auf ALLEN 8 Seiten ganz oben, noch vor der Navigation, damit
   Besucher sofort erkennen, dass es sich um eine Arbeitsprobe mit
   erfundenen Daten handelt. Bei einem echten Kundenprojekt entfällt
   dieser Block ersatzlos (ebenso .footer-demo-note). */
.demo-topbar {
  background: var(--accent-btn);
  padding: 9px 20px;
}
.demo-topbar p {
  max-width: 1080px; margin: 0 auto;
  font-size: 12.5px; line-height: 1.5;
  color: #FFFFFF; text-align: center;
}
.demo-topbar a { color: #FFFFFF; text-decoration: underline; }

/* ── 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: var(--text); }
.nav-logo-mark {
  width: 36px; height: 36px; 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; letter-spacing: .02em;
  color: var(--accent-text);
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-logo-name { font-size: 15px; font-weight: 800; color: var(--text); }
.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 11px; 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: var(--text); background: rgba(46,36,25,0.08); }
.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: var(--accent-text);
  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: var(--text);
  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(46,36,25,0.15);
}
.nav-mobile.open { display: block; }
.nav-mobile .nav-link {
  display: block; padding: 13px 0; font-size: 16px;
  border-bottom: 1px solid rgba(46,36,25,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 ──────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d) 100%);
  padding: 44px 0 44px;
}
.hero h1 { color: var(--text); margin-bottom: 16px; }
.hero-lead { color: var(--on-dark); font-size: 17px; max-width: 580px; margin-bottom: 22px; }
.hero-usp {
  color: var(--on-dark-soft); 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; }
.head-split { display: grid; gap: 34px; }
.hero-photo-wrap { position: relative; width: 100%; }

/* ── VERTRAUENS-SIEGEL ─────────────────────────────────────────── */
/* Bewusst rein geometrisch aufgebaut (zwei Ringe + gepunkteter Ring aus
   einem einzigen stroke-dasharray-Kreis). Kein handgezeichnetes
   Naturmotiv — siehe haeufige-fehler.md Design/Wirkung #4. */
.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: -10px; bottom: -20px;
}
.trust-badge-wrap svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 16px rgba(20,20,20,0.32));
}

/* ── 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); flex-shrink: 0; }

/* ── BILDPLATZHALTER ───────────────────────────────────────────── */
/* Platzhalter-Muster aus tech-standards.md: gestrichelter Rahmen +
   Motiv-Chip + HTML-Kommentar mit dem fertigen Ersatz-Markup direkt
   darüber. Für diese Portfolio-Demo sind laut references/demo-fotos.md
   echte, lizenzfreie Fotos vorgesehen; sie werden in einem eigenen
   Arbeitsschritt eingesetzt (Websuche/Download nötig). Bis dahin bleiben
   alle 31 Platzhalter stehen — sie sind bewusst deutlich als solche
   erkennbar und dürfen so nicht live gehen. */
.img-ph {
  width: 100%; aspect-ratio: 4 / 3;
  border: 2px dashed var(--ph-border);
  border-radius: var(--radius-l);
  background: var(--ph-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center;
}
.img-ph.wide { aspect-ratio: 16 / 10; }
.img-ph.tall { aspect-ratio: 3 / 4; }
.img-ph.square { aspect-ratio: 1 / 1; }
.ph-icon { width: 30px; height: 30px; color: var(--accent-ink); }
.ph-icon svg { width: 100%; height: 100%; }
.ph-chip {
  display: inline-block;
  background: var(--white); border: 1px solid var(--ph-border);
  border-radius: 999px; padding: 6px 15px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.ph-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 290px; }

/* Rahmen für die späteren ECHTEN Fotos — gleiche Proportionen wie der
   Platzhalter, damit sich beim Austausch nichts verschiebt. */
.img-frame {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius-l); overflow: hidden;
  background: var(--ph-bg);
}
.img-frame.wide { aspect-ratio: 16 / 10; }
.img-frame.tall { aspect-ratio: 3 / 4; }
.img-frame.square { aspect-ratio: 1 / 1; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-credit { font-size: 11.5px; color: var(--muted); margin-top: 6px; text-align: right; }

/* ── LEISTUNGEN: 1 GROSSE + 3 KOMPAKTE (kein gleichförmiges Raster) ── */
.svc-feature {
  display: grid; gap: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-l);
  padding: 22px;
  box-shadow: var(--shadow-s);
  margin-bottom: 22px;
}
.svc-feature h3 { font-size: 21px; margin-bottom: 10px; }
.svc-feature p { font-size: 15.5px; }
.svc-feature .card-link { margin-top: 14px; display: inline-block; }

.svc-rows { display: grid; gap: 14px; }
.svc-row {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 18px 20px;
  transition: box-shadow .2s, transform .2s;
}
.svc-row:hover, .svc-row:focus-within { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.svc-row h3 { margin-bottom: 4px; }
.svc-row p { font-size: 14.5px; margin-bottom: 8px; }
.svc-mark {
  flex-shrink: 0; width: 44px; height: 44px;
  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;
}
.svc-mark svg { width: 23px; height: 23px; }
.card-link { color: var(--accent-ink); font-weight: 700; font-size: 14px; }
/* KORREKTUR gegenüber preview/style-d.css: Hover stand auf var(--primary)
   und war auf hellem Grund unsichtbar — siehe Kommentar oben. */
.card-link:hover { color: var(--accent-btn-d); text-decoration: underline; }

/* ── FALLBEISPIEL (benanntes Einzelstück) ──────────────────────── */
.piece { display: grid; gap: 26px; align-items: start; }
.piece-photo { position: relative; }
.piece-stat {
  position: absolute; left: 14px; bottom: 14px;
  /* D-ÄNDERUNG: dieses Badge sitzt auf dem Foto-Platzhalter, nicht auf
     einer großen --primary-Fläche — bleibt bewusst dunkel (--accent-btn)
     mit weißer Schrift, damit es sich vom Bild abhebt. */
  background: var(--accent-btn); color: #FFFFFF;
  border-radius: var(--radius-m);
  padding: 10px 16px;
  box-shadow: var(--shadow-m);
}
.piece-stat b { display: block; font-size: 21px; font-weight: 800; line-height: 1.1; color: #FFFFFF; }
.piece-stat span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #F0DFC7; margin-top: 2px;
}
.spec {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-m);
  background: var(--white);
  overflow: hidden;
}
.section-alt .spec { background: var(--bg); }
.spec div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 16px; font-size: 14.5px;
  border-bottom: 1px solid var(--border);
}
.spec div:last-child { border-bottom: none; }
.spec dt { font-weight: 700; color: var(--text); flex-shrink: 0; }
.spec dd { color: var(--muted); text-align: right; }

/* ── WEITERE STÜCKE (Teaser-Streifen) ──────────────────────────── */
.pieces-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 34px; }
.pieces-grid > * { min-width: 0; }
.piece-teaser .ph-cat {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin: 16px 0 5px;
}
.piece-teaser h3 { margin-bottom: 6px; }
.piece-teaser p { font-size: 14.5px; }

/* ── HELLES HOLZBAND (Holzarten / Kundenstimmen) ───────────────── */
.band-dark {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d) 100%);
  padding: 48px 0;
}
.band-dark h2 { color: var(--text); margin-bottom: 14px; }
.band-dark h3 { color: var(--text); }
.band-dark .h-rule::after { background: var(--accent-l); }
.band-dark p { color: var(--on-dark-soft); }
/* D-ÄNDERUNG: eyebrow-Text ist klein/fett (kein "Großtext" nach WCAG),
   --accent-l allein reicht auf --primary nur auf 4,20:1 — für 12px-Text
   braucht es 4,5:1, deshalb hier das dunklere --text. */
.band-dark .eyebrow { color: var(--text); }
/* KORREKTUR gegenüber preview/style-d.css: stand auf var(--accent-ink),
   das auf der unteren Bandhälfte (--primary-d) nur 3,55:1 erreicht.
   --accent-btn-d erreicht dort 5,89:1. */
.band-dark a:not(.btn) { color: var(--accent-btn-d); text-decoration: underline; text-underline-offset: 2px; }

/* Holzmuster-Reihe */
.wood-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0 22px; }
.wood-row > * { min-width: 0; }
.wood-item { text-align: center; }
.wood-swatch {
  width: 100%; height: 74px; border-radius: var(--radius-m);
  border: 1px solid rgba(46,36,25,0.22);
  box-shadow: var(--shadow-s);
}
.wood-name { display: block; margin-top: 9px; font-size: 14.5px; font-weight: 700; color: var(--text); }
.wood-sub { display: block; font-size: 12.5px; color: var(--on-dark-soft); }
.wood-hint {
  font-size: 12.5px; color: var(--on-dark-soft);
  border-top: 1px solid rgba(46,36,25,0.15);
  padding-top: 12px; margin-top: 4px;
}

/* ── ÜBER UNS ──────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
.stat-row > * { min-width: 0; }
.stat {
  background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 16px 18px;
}
.section-alt .stat { background: var(--bg); }
.stat b {
  display: block; font-size: 30px; font-weight: 800; line-height: 1.1;
  color: var(--accent-ink);
}
.stat span {
  display: block; margin-top: 4px; font-size: 13px; font-weight: 600;
  color: var(--muted); line-height: 1.45;
}

.credential-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.credential-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 18px 9px 11px;
  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; }

/* ── KUNDENSTIMMEN ─────────────────────────────────────────────── */
.quote-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
.quote-grid > * { min-width: 0; }
.quote-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-l);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-m);
  display: flex; flex-direction: column;
  margin: 0;
}
/* Auf weißen Abschnitten (.section-alt) würde die weiße Karte mit dem
   Hintergrund verschmelzen — dort die warme Grundfläche verwenden. */
.section-alt .quote-card { background: var(--bg); }
.quote-mark { font-size: 40px; line-height: 0.7; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.quote-card blockquote { margin: 0; flex-grow: 1; }
.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-soft);
  border-top: 1px solid rgba(46,36,25,0.15);
  padding-top: 14px;
}
.quote-note strong { color: var(--text); }

/* ── KONTAKT-CTA-BAND ──────────────────────────────────────────── */
.cta-band {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-l);
  padding: 26px 22px;
  box-shadow: var(--shadow-s);
  display: grid; gap: 22px;
}
.section-alt .cta-band { background: var(--bg); }
.cta-band h2 { margin-bottom: 8px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cta-facts { display: grid; gap: 10px; }
.cta-facts li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text); overflow-wrap: break-word; }
.cta-facts li > span:last-child { min-width: 0; }
.cta-facts .ci {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-m);
  /* D-ÄNDERUNG: kleines Icon-Rondell auf weißer Karte, kein Teil der
     großen --primary-Fläche — bleibt dunkel (--accent-btn). */
  background: var(--accent-btn); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.cta-facts .ci svg { width: 17px; height: 17px; }
.cta-facts .cl {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.cta-facts a { color: var(--accent-ink); text-decoration: underline; font-weight: 600; }
address { font-style: normal; }

/* ── COOKIE-/DATENSCHUTZ-HINWEIS (statisch, kein Tracking) ─────── */
/* Standardmäßig ausgeblendet; assets/js/main.js blendet ihn per .show
   ein, solange der localStorage-Eintrag td-hinweis-gelesen fehlt. */
.cookie-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--primary-d);
  border-top: 3px solid var(--accent-l);
  padding: 14px 20px;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.25);
}
.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; }
.cookie-text strong { color: var(--text); }
/* KORREKTUR gegenüber preview/style-d.css: --accent-ink erreicht auf
   --primary-d nur 3,55:1 — zu wenig für 14px-Text. */
.cookie-text a { color: var(--accent-btn-d); text-decoration: underline; font-weight: 600; }
.cookie-bar .btn { flex-shrink: 0; padding: 10px 22px; }
/* Solange die Leiste sichtbar ist, wird der Seiteninhalt um ihre
   tatsächliche Höhe verlängert (in main.js gemessen), damit der Footer
   nicht dauerhaft verdeckt bleibt. */
body.cookie-visible { padding-bottom: var(--cookie-bar-h, 150px); }

/* ── FOOTER ────────────────────────────────────────────────────── */
footer {
  background: var(--primary);
  border-top: 3px solid var(--accent-l);
  padding: 40px 0 20px;
  color: var(--on-dark);
}
footer p, footer li, footer div, footer span, footer address, footer strong { color: var(--on-dark); }
footer a { color: var(--on-dark); }
/* KORREKTUR gegenüber preview/style-d.css: Hover stand auf
   var(--accent-ink) = 4,20:1 auf --primary, knapp unter 4,5:1. */
footer a:hover, footer a:focus-visible { color: var(--accent-btn-d); text-decoration: underline; }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
.footer-grid > * { min-width: 0; }
footer h2 {
  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; overflow-wrap: break-word; }
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); }

.footer-bottom {
  border-top: 1px solid rgba(46,36,25,0.18);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px;
  color: var(--on-dark-min);
}
.footer-bottom span, .footer-bottom div { color: var(--on-dark-min); }
.footer-bottom a { color: var(--on-dark-min); }
.footer-bottom a:hover { color: var(--accent-btn-d); }
.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(46,36,25,0.14);
  padding-top: 12px;
}
.footer-demo-note strong { color: var(--text); }

/* ── 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) {
  .trust-badge-wrap { width: 164px; height: 164px; }
  .wood-row { grid-template-columns: repeat(4, 1fr); }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .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; }
  .svc-feature { padding: 26px 28px; }
}

@media (min-width: 820px) {
  .section { padding: 72px 0; }
  .band-dark { padding: 68px 0; }
  .hero { padding: 76px 0 72px; }
  .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: 182px; height: 182px; }
  .hero-photo-wrap .trust-badge-wrap { right: -18px; bottom: -26px; }
  .svc-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 32px; padding: 30px 32px; }
  .svc-rows { grid-template-columns: repeat(3, 1fr); }
  .svc-rows > * { min-width: 0; }
  .svc-row { flex-direction: column; gap: 12px; }
  .piece { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 44px; }
  .pieces-grid { grid-template-columns: repeat(3, 1fr); }
  .quote-grid { grid-template-columns: repeat(3, 1fr); }
  .cta-band { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; padding: 38px 34px; gap: 40px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1.2fr 1.2fr; gap: 36px; }
  h1 { font-size: clamp(30px, 3.4vw, 42px); }
}

/* Die Desktop-Navigation wird bewusst erst ab 1060px eingeblendet, nicht
   schon ab 820px: sieben Menüpunkte plus CTA plus zweizeiliges Logo
   brauchen rechnerisch ~910px: bei 820px Viewport (Container 780px) würde
   die Navigationsleiste seitlich überlaufen. Zwischen 820 und 1059px
   bleibt deshalb das Burger-Menü aktiv. */
@media (min-width: 1060px) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .nav-mobile, .nav-mobile.open { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   TEIL 2 — KOMPONENTEN DER UNTERSEITEN
   (leistungen, moebel-nach-mass, referenzen, holzarten, ueber-uns,
    kontakt, impressum). Verwendet ausschließlich die oben definierten
    Farbvariablen — kein neuer Farbton, keine zweite Palette.
   ═══════════════════════════════════════════════════════════════════ */

/* ── SEITENKOPF DER UNTERSEITEN ────────────────────────────────── */
.pagehead {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d) 100%);
  padding: 32px 0 30px;
}
.pagehead h1 { color: var(--text); }
.pagehead p { color: var(--on-dark); margin-top: 12px; max-width: 660px; font-size: 16.5px; }
.pagehead .eyebrow { color: var(--text); }
.crumbs { font-size: 13px; color: var(--on-dark-soft); margin-bottom: 10px; }
.crumbs a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 2px; }
.crumbs a:hover { color: var(--text); }

/* ── RASTER ────────────────────────────────────────────────────── */
.grid-2, .grid-3 { display: grid; grid-template-columns: 1fr; gap: 22px; }
/* Grid-Kinder haben per Spec min-width:auto und schrumpfen sonst nicht
   unter die intrinsische Breite ihres Inhalts (breite Tabelle o.ä.) —
   siehe haeufige-fehler.md Technik #11. */
.grid-2 > *, .grid-3 > * { min-width: 0; }
.grid-2 { align-items: start; gap: 28px; }

/* ── ALLGEMEINE TEXTBAUSTEINE ──────────────────────────────────── */
.lead { font-size: 17px; color: var(--text); }
.bullets { display: grid; gap: 9px; margin-top: 12px; }
.bullets li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--muted); line-height: 1.65; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}
.bullets strong { color: var(--text); }

.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: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-btn); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.value-list .tick svg { width: 14px; height: 14px; }

/* ── KARTEN ────────────────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent); border-radius: var(--radius-l);
  padding: 22px; box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
}
.section-alt .card { background: var(--bg); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; }
.card .card-link { margin-top: 14px; }
.card-icon {
  width: 44px; height: 44px; 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(--white); }
.card-icon svg { width: 23px; height: 23px; }

/* ── LEISTUNGSABSCHNITT MIT ANKER (leistungen.html) ────────────── */
.svc-block {
  background: var(--white); border: 1px solid var(--border);
  border-left: 5px solid var(--accent); border-radius: var(--radius-l);
  padding: 24px 22px; box-shadow: var(--shadow-s);
  margin-bottom: 24px;
}
.section-alt .svc-block { background: var(--bg); }
.svc-block:last-of-type { margin-bottom: 0; }
.svc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.svc-head h2 { margin-bottom: 0; }
.svc-block .svc-sub {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px;
}
.svc-block h3 { margin-top: 20px; margin-bottom: 6px; }

/* ── ABLAUF IN SCHRITTEN ───────────────────────────────────────── */
/* Die Schrittliste ist im HTML eine <ol> (semantisch korrekt: die
   Reihenfolge trägt Bedeutung). Die native Nummerierung wird abgeschaltet,
   weil die Nummer gestaltet über counter() im ::before-Kreis erscheint —
   sonst stünde jede Zahl doppelt. */
.steps { counter-reset: step; list-style: none; display: grid; gap: 16px; margin-top: 26px; }
.step {
  position: relative;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 18px 20px 20px 66px;
}
.section-alt .step { background: var(--bg); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 18px; top: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-btn); color: #FFFFFF;
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 15px; }
.step-meta {
  display: inline-block; margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--accent-ink);
}

/* ── PROJEKTKARTEN (referenzen.html) ───────────────────────────── */
.project-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.project-grid > * { min-width: 0; }
.project {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-l); overflow: hidden;
  box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
}
.section-alt .project { background: var(--bg); }
.project-media { padding: 16px 16px 0; }
.project-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex-grow: 1; }
.project-loc {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 6px;
}
.project-body h3 { font-size: 19px; margin-bottom: 8px; }
.project-body > p { font-size: 15px; }
.project .spec { margin-top: auto; }
.section-alt .project .spec { background: var(--white); }

/* ── HOLZARTEN-DETAIL (holzarten.html) ─────────────────────────── */
.wood-card {
  background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent); border-radius: var(--radius-l);
  padding: 20px; box-shadow: var(--shadow-s);
  display: flex; flex-direction: column;
}
.section-alt .wood-card { background: var(--bg); }
.wood-card h3 { font-size: 20px; margin-bottom: 2px; }
.wood-lat { display: block; font-size: 13px; font-style: italic; color: var(--muted); margin-bottom: 12px; }
.wood-card p { font-size: 15px; }
.wood-card .img-ph { margin-bottom: 16px; }
.wood-card .spec { margin-top: auto; }
.section-alt .wood-card .spec { background: var(--white); }

/* Vor- und Nachteile nebeneinander */
.procon { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
.procon > * { min-width: 0; }
.procon h4 {
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px; color: var(--text);
}
.procon ul { display: grid; gap: 8px; }
.procon li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
/* Plus-/Minuszeichen als typografische Marke, bewusst kein Emoji
   (siehe haeufige-fehler.md Design/Wirkung #2). Die Bedeutung steht
   zusätzlich in der jeweiligen Überschrift darüber, die Marke ist
   also nicht die einzige Informationsquelle. */
.procon .pro li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--accent-ink);
}
.procon .con li::before {
  content: "\2013"; position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--muted);
}

/* ── DATENTABELLE ──────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--white);
}
.section-alt .table-wrap { background: var(--bg); }
table.data { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 14.5px; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); }
table.data thead th { background: var(--bg); font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .03em; }
.section-alt table.data thead th { background: var(--white); }
table.data td { color: var(--muted); }
table.data th[scope="row"] { color: var(--text); font-weight: 700; }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: none; }
.table-note { font-size: 13.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; }

/* ── ZEITLEISTE (ueber-uns.html) ───────────────────────────────── */
/* Im HTML eine <ol> (die Jahresfolge trägt Bedeutung); die native
   Nummerierung wird abgeschaltet, weil die Jahreszahl selbst als
   Marke dient. */
.timeline { list-style: none; margin-top: 26px; border-left: 3px solid var(--accent); padding-left: 24px; }
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -33px; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-btn); border: 3px solid var(--bg);
}
.section-alt .tl-item::before { border-color: var(--white); }
.tl-year {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--accent-ink); margin-bottom: 2px;
}
.tl-item h3 { margin-bottom: 6px; }
.tl-item p { font-size: 15px; }

/* ── BILDERGALERIE + LIGHTBOX (Standard-Paket) ─────────────────── */
/* Die Lightbox aktiviert sich erst, wenn die Kacheln echte <img> in
   einem <button class="gallery-btn"> enthalten. Solange dort noch
   Bildplatzhalter stehen, ist das Raster reine Darstellung ohne
   Klickfunktion — bewusst, damit niemand auf einen leeren Rahmen
   klickt. Markup-Vorlage steht als Kommentar in referenzen.html. */
.gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.gallery > * { min-width: 0; }
.gallery-tile {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-m); overflow: hidden; padding: 12px 12px 0;
}
.section-alt .gallery-tile { background: var(--bg); }
.gallery-btn {
  display: block; width: 100%; padding: 0; cursor: pointer; text-align: left;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-m); overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.gallery-btn:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.gallery-btn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g-cap { display: block; padding: 10px 4px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.gallery-hint { font-size: 13.5px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

.lightbox {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(20,14,8,0.88); padding: 24px;
}
.lightbox.open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lightbox-figure { display: flex; justify-content: center; max-width: 100%; margin: 0; }
.lightbox-figure img { max-width: 100%; max-height: 74vh; border-radius: var(--radius-m); }
.lightbox-cap { color: #FFFFFF; font-size: 15px; line-height: 1.6; text-align: center; max-width: 640px; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(0,0,0,0.55); color: #FFFFFF;
  border: 2px solid #FFFFFF; border-radius: var(--radius-s);
  padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.lightbox-close:hover { background: rgba(0,0,0,0.8); }

/* ── FORMULAR (kontakt.html) ───────────────────────────────────── */
.form-card {
  background: var(--white); border: 1px solid var(--border);
  border-top: 4px solid var(--accent); border-radius: var(--radius-l);
  padding: 24px 22px; box-shadow: var(--shadow-m);
}
.section-alt .form-card { background: var(--bg); }
.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;
  /* --ph-border (3,38:1 auf Weiß) statt des rein dekorativen --border:
     Formularfeld-Rahmen sind Bedienelement-Grenzen und brauchen nach
     WCAG 1.4.11 mindestens 3:1. */
  border: 1.5px solid var(--ph-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;
}
.section-alt .form-group input,
.section-alt .form-group select,
.section-alt .form-group textarea { background: var(--white); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted); opacity: 1; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-btn);
  box-shadow: inset 0 0 0 1px var(--accent-btn);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.req { color: var(--accent-ink); font-weight: 800; }
.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(--accent-btn);
}
.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; }

/* Statusmeldung des Formulars. WICHTIG: Der Container bleibt dauerhaft
   im DOM und wird NICHT über display:none gesteuert — sonst verschluckt
   der Screenreader die aria-live-Ankündigung (haeufige-fehler.md
   Technik #7). Ohne Meldung ist er schlicht leer und ohne Rahmen. */
.form-status {
  margin-top: 14px; padding: 0;
  border-radius: var(--radius-m); font-size: 14.5px; line-height: 1.6;
}
.form-status.show { padding: 12px 14px; }
.form-status.ok  { background: #E7F1E4; color: #1F5A22; border: 1px solid #A9C7A5; }
.form-status.err { background: #FBE9E7; color: #8C2A16; border: 1px solid #E3A99C; }

/* ── KONTAKTDATEN & ÖFFNUNGSZEITEN ────────────────────────────── */
.contact-split { display: grid; grid-template-columns: 1fr; gap: 34px; }
.contact-split > * { min-width: 0; }
.contact-list { display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text); overflow-wrap: break-word; }
.contact-list li > div, .contact-list li > span:last-child { min-width: 0; }
.contact-list .ci {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-m);
  background: var(--accent-btn); 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: 11.5px; font-weight: 800; letter-spacing: .08em;
  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(--accent-btn-d); }

.hours { border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--white); overflow: hidden; }
.section-alt .hours { background: var(--bg); }
.hours div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 11px 16px; font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.hours div:last-child { border-bottom: none; }
.hours dt { font-weight: 700; color: var(--text); }
.hours dd { text-align: right; color: var(--muted); }
.hours .highlight { background: var(--ph-bg); }

/* ── GOOGLE MAPS (2-Klick-Lösung) ──────────────────────────────── */
.maps-wrapper {
  border: 2px dashed var(--ph-border); border-radius: var(--radius-l);
  overflow: hidden; background: var(--ph-bg);
}
.maps-preview {
  min-height: 300px; padding: 30px 20px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.maps-overlay { max-width: 420px; }
.maps-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.maps-addr { font-size: 15px; color: var(--muted); margin-bottom: 16px; }
.maps-hint { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.maps-wrapper iframe { display: block; width: 100%; border: 0; }

/* ── GOOGLE-BUSINESS-PLATZHALTER (Standard-Paket) ──────────────── */
.gbp-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 20px 22px; box-shadow: var(--shadow-s);
}
.section-alt .gbp-card { background: var(--bg); }
.gbp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.gbp-title { font-size: 16px; font-weight: 800; color: var(--text); }
.gbp-card p { font-size: 14.5px; }

/* ── HINWEISKASTEN ─────────────────────────────────────────────── */
.notice-box {
  background: var(--ph-bg);
  border: 1px solid var(--ph-border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 16px 18px;
}
.notice-box p { color: var(--text); font-size: 14.5px; margin: 0; }
.notice-box p + p { margin-top: 8px; }
.notice-box strong { color: var(--text); }
.notice-box a { color: var(--accent-btn-d); text-decoration: underline; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq { display: grid; gap: 14px; margin-top: 24px; }
.faq-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 18px 20px;
}
.section-alt .faq-item { background: var(--bg); }
.faq-item h3 { margin-bottom: 6px; }
.faq-item p { font-size: 15px; }

/* ── RECHTSTEXTE (impressum.html) ──────────────────────────────── */
.legal { max-width: 780px; }
.legal h2 { margin-top: 40px; margin-bottom: 12px; color: var(--text); }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { margin-top: 24px; margin-bottom: 8px; color: var(--text); font-size: 17px; }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 12px 0; display: grid; gap: 8px; }
.legal ul li { font-size: 15.5px; 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: 2px; background: var(--accent);
}
.legal address { font-size: 15.5px; color: var(--muted); line-height: 1.8; margin-bottom: 12px; }
.legal a { color: var(--accent-ink); text-decoration: underline; }
.legal a:hover { color: var(--accent-btn-d); }
.legal code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13.5px; background: var(--ph-bg); 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; margin-bottom: 0; }
.legal .toc li::before { top: 9px; }
.legal .notice-box { margin-bottom: 28px; }

/* ── RESPONSIVE TEIL 2 ─────────────────────────────────────────── */
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .procon { grid-template-columns: 1fr 1fr; gap: 24px; }
  .gallery { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 820px) {
  .pagehead { padding: 46px 0 42px; }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .project-grid { grid-template-columns: 1fr 1fr; }
  /* Bei einer ungeraden Kartenzahl (aktuell 3) bliebe die letzte Karte
     allein in der linken Spalte, rechts daneben eine leere Halbzeile —
     gefunden 30.08.2026 bei Schritt 7.5. Die letzte Karte spannt dann
     stattdessen beide Spalten und wird zur bewusst herausgestellten
     Beispielkarte statt einer halb leeren Zeile. Bei geradzahliger
     Kartenzahl greift der Selektor nicht (letzte Karte ist dann
     nicht :nth-child(odd)), also unschädlich für spätere Ergänzungen. */
  .project-grid > .project:last-child:nth-child(odd) {
    grid-column: 1 / -1; max-width: 520px; margin: 0 auto; width: 100%;
  }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .contact-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
  .svc-block { padding: 30px 32px; }
  .form-card { padding: 30px 32px; }
  .steps { gap: 18px; }
}

/* ── DRUCK ─────────────────────────────────────────────────────── */
@media print {
  .nav, footer, .cookie-bar, .skip-link, .hero-actions, .btn,
  .demo-topbar, .lightbox { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  body.cookie-visible { padding-bottom: 0; }
}