/* ==========================================================================
   Vitaro Hemsbach — V1 Mockup-Stylesheet
   Status: Visual + Content, NICHT funktional.
   Anker: Hybrid V5 Iter 2 + Drift-Audit-Fixes + STATUS.md-Konventionen.
   Mobile-first 375px. WCAG 2.2 AA. Sie-Form. HWG-konform.
   Quelle: HAND-GEWARTET — NICHT generiert. Kein Build-Step schreibt diese Datei
   (build.js erzeugt nur HTML; die _build/-Lints lesen sie nur). Direkt editieren,
   niemals neu generieren. Details: _build/README.md.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --beige: #E8C9A0;
  --beige-soft: #F5E4CB;
  --anthrazit: #1C1917;
  --anthrazit-soft: #2A2622;
  /* Oliv-Werte WCAG-AA-konform mit Weiß: oliv 5.40:1, oliv-dark 6.69:1 (>= 4.5 für Body, >= 3 für UI ≥18pt) */
  --oliv: #54713C;       /* Primärbutton-Default, war #6B8E4E (3.74:1 — fail) */
  --oliv-dark: #3F5A2A;  /* Hover/Akzent, war #54713C */
  --warmweiss: #FAF6F0;
  --holz: #3E2C1F;
  --text: #1C1917;
  --text-muted: #5C544D;
  --hairline: #E5DDD2;
  --warn: #B4541A;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 28px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-elev: 0 12px 36px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08);

  --z-skip: 100;
  --z-header: 50;
  --z-stickycta: 45;
  --z-kipill: 40;
  --z-modal: 90;

  --container: 1160px;
  --gutter: 20px;

  /* ---------- Container-Tiers (Story 3.10) ----------
     Schmalere Lese-/Formular-Breiten. Soll: keine Inline-max-width-px mehr. */
  --container-narrow: 780px;  /* Content-Sektionen, Text + Medien */
  --container-text:   680px;  /* reine Lese-Textspalten */
  --container-form:   580px;  /* Formular-Container */

  /* ---------- Lese-Maße (Story 3.11) — zeichen-basierte Zeilenlänge ----------
     ch skaliert mit der Schriftgröße (Zoom-freundlich, Persona 70+) und ergänzt die
     px-basierten container-*-Tiers oben, die ganze Layout-Spalten dimensionieren.
     Soll: keine Inline-max-width-ch mehr. */
  --measure:       60ch;  /* Lead-/Intro-Textspalten */
  --measure-prose: 70ch;  /* lange Fließtext-Seiten (Impressum/Datenschutz/Über uns) */

  /* ---------- Spacing-Skala (Story 3.10) — 2px-Basisraster ----------
     Soll: keine Inline-px-Abstände mehr. em-relative Abstände bleiben (Konvention). */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-9: 36px;  --space-10: 40px; --space-12: 48px; --space-14: 56px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---------- Typografie-Skala (Story 3.6) ----------
     Vorgabe: max 7 unique font-sizes site-weit (B-13).
     Body-Floor mobil 18 px PFLICHT (ux-spec §I.8). */
  --text-xs:   14px;   /* Fine-Print, Footer-Disclaimer, Form-Help, Eyebrow-Sub */
  --text-sm:   16px;   /* Sekundär-Body, Form-Labels, Nav-Sub-Items */
  --text-base: 18px;   /* Body-Floor mobil, KI-Antwort-Karten, Form-Inputs */
  --text-lg:   20px;   /* Lead-Text, Button-Body, Hervorhebung im Body */
  --text-xl:   24px;   /* Stars-Rating, Modal-Headlines, Tel-Header-Desktop */
  --text-2xl:  32px;   /* Score-Numbers, große Geräte-Karten-Headlines */
  --text-3xl:  48px;   /* (reserviert für künftige Mega-Hero-Pattern, aktuell ungenutzt) */

  --touch: 56px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--text);
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  /* 2026-05-13: Body-Font UX-Spec-konform — 18 px Mobile-Pflicht (Z. 160 + 585), Hauptpersona 70+ */
  font-size: var(--text-base);
  line-height: 1.55;
  background: var(--warmweiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

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

/* ---------- Typography ---------- */
.h, h1, h2, h3, h4 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--anthrazit);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(34px, 7vw, 56px); }
h2 { font-size: clamp(26px, 4.5vw, 38px); }
h3 { font-size: clamp(20px, 3vw, 26px); }
h4 { font-size: var(--text-base); }
.eyebrow {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oliv-dark);
  margin-bottom: 10px;
}
p { margin: 0 0 1em; }
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--text); }
.muted { color: var(--text-muted); }

/* ---------- Skip-Link ---------- */
.skip-link {
  position: absolute; left: 8px; top: 8px;
  background: var(--anthrazit); color: var(--warmweiss);
  padding: 10px 14px; border-radius: 6px;
  font-weight: 600; text-decoration: none;
  z-index: var(--z-skip);
  transform: translateY(-200%);
  transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Container ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Umbau-Hinweis-Banner (Story 5.14 / Feedback-Runde-2 #2) ----------
   Site-weit, schließbar (localStorage), dezent. Normaler Dokumentfluss vor dem
   Sticky-Header — kein Overlay, verdeckt keine Inhalte. */
.site-banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  background: var(--beige-soft);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-2) var(--gutter);
}
.site-banner[hidden] { display: none; } /* Flash-Guard: display:flex würde das hidden-Attribut sonst überstimmen */
.site-banner p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--anthrazit);
  line-height: 1.5;
}
.site-banner__close {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--anthrazit);
  cursor: pointer;
}
.site-banner__close:hover { background: rgba(28,25,23,0.08); }
.site-banner__close:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: var(--warmweiss);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  display: flex; align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
/* Echtes Logo (Story 5.14): Bild ersetzt den Text-Schriftzug in Header/Mobile/Footer;
   die Typo-Regeln des alten Schriftzugs (.brand font-*, .leaf, small) sind mit entfernt. */
.brand { flex: 0 0 auto; display: block; }
.brand__logo { display: block; height: 36px; width: auto; } /* schmale Screens: Burger darf nicht clippen (Audit 5.14) */
@media (min-width: 480px) { .brand__logo { height: 48px; } }
/* Ab breitem Desktop noch größer (Manuel 5.15b) — nur Header; Footer bleibt über --footer fixiert.
   Erst ab 1200px: bei 960–1199px kollidiert 56px mit der vollen Desktop-Nav (gemessen +102/+38px Overflow). */
@media (min-width: 1200px) { .site-header .brand__logo { height: 56px; } }
.brand__logo--footer { height: 56px; }
/* Logo-Panel (Story 5.15, Manuel-Sketch): linker Header-Bereich in Oliv mit schräger Kante,
   damit das cremefarbene Logo lesbar heraussticht. Bleed bis zum Viewport-Rand via -100vw;
   nur im Site-Header (Mobile-Nav-Dialog + Footer bleiben unverändert). */
.site-header .brand {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 8px; /* mobil eng: 360px-Header hat nur ~10px Slack (5.15b nachgemessen) */
}
@media (min-width: 480px) { .site-header .brand { padding-right: 28px; } }
.site-header .brand::before {
  content: "";
  position: absolute;
  /* ±10px = vertikales Padding der .site-header__inner; unten +1px für die Header-Border-Zone,
     sonst blitzt vor dunklen Sektionen ein heller Pixelstreifen unter dem Panel auf (Manuel 5.18) */
  top: -10px;
  bottom: -11px;
  left: -100vw;
  right: 0;
  z-index: -1;
  background: var(--oliv);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); /* mobil flachere Schräge (wenig Platz) */
}
@media (min-width: 480px) {
  .site-header .brand::before { clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
}
.header-tel {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--oliv);
  color: #fff;
  text-decoration: none;
  /* 2026-05-13: Klartext-Nummer sichtbar auf JEDEM Viewport (UX-Spec Make-or-Break für 70+).
     Gestaffelte Größe: 18px <480, 22px <960, 28px ≥960 (UX-Spec Z. 161-162 Mobile-Tel 22-28 px).
     18 px auf 360-px-Viewport ist Kompromiss (Brand+Tel+Burger sonst > 360 px). */
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-base);
  min-height: var(--touch);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.header-tel svg { width: 18px; height: 18px; flex-shrink: 0; }
.header-tel:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; }

@media (min-width: 480px) {
  .header-tel { gap: 8px; padding: 10px 14px; font-size: var(--text-xl); }
  .header-tel svg { width: 20px; height: 20px; }
}
.header-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  color: var(--anthrazit);
}
.header-burger:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }
.nav-desktop { display: none; }

/* Desktop-Nav erst ab 1060px (Story 5.15b): mit dem echten Logo (166px @48px) braucht der
   Header real 1034px — bei 960 überlief er um 74px (5.5 hatte das mit dem schmaleren
   Text-Schriftzug auf 960 getunt). 960–1059 fährt sauber im Burger-Modus. */
@media (min-width: 1060px) {
  .header-burger { display: none; }
  .nav-desktop {
    display: flex; align-items: center; gap: 4px;
    margin-left: 20px;
    flex: 1;
  }
  .nav-desktop a {
    text-decoration: none;
    color: var(--anthrazit);
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 12px 12px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .nav-desktop a:hover { background: var(--beige-soft); }
  .nav-desktop a[aria-current="page"] { color: var(--oliv-dark); }
  /* 2026-05-13: Tel-Button auf Desktop NICHT mehr vergrößern.
     Bleibt bei 22px / 10-14 padding aus dem ≥480px-Block.
     28 px drückte die Nav zusammen und dominierte visuell unangemessen. */
}

/* Mobile menu overlay */
.mobile-nav {
  display: none;
  position: fixed; inset: 0;
  background: var(--warmweiss);
  z-index: calc(var(--z-header) + 1);
  padding: 16px var(--gutter) 24px;
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__head {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 64px;
  margin-bottom: 12px;
}
.mobile-nav__close {
  width: var(--touch); height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); background: transparent;
  border-radius: var(--radius-md);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--hairline); }
.mobile-nav a {
  display: block;
  padding: 18px 4px;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--anthrazit);
  text-decoration: none;
  min-height: var(--touch);
}
.mobile-nav .sub a { font-size: var(--text-sm); padding-left: 20px; font-weight: 400; color: var(--text-muted); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--anthrazit);
  color: var(--warmweiss);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,25,23,0.30) 0%, rgba(28,25,23,0.55) 55%, rgba(28,25,23,0.80) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter) 56px;
}
.hero h1 { color: var(--warmweiss); margin-bottom: 16px; }
.hero p.lead { color: var(--warmweiss); opacity: 0.96; max-width: var(--measure); font-size: var(--text-lg); }
.hero__lifecycle {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--beige);
  margin-top: 8px;
  letter-spacing: 0.01em;
}
.hero__pill {
  display: inline-block;
  background: var(--oliv);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 26px;
}
@media (min-width: 768px) {
  .hero__inner { padding: 96px var(--gutter) 84px; }
}
@media (min-width: 1024px) {
  /* 130/110px: großzügiges Hero-Padding nur auf Large-Desktop. Beide auf dem 2px-Raster,
     aber bewusst jenseits der benannten --space-Skala (Max 96px) — kein neuer Off-Grid-Token (AC-2). */
  .hero__inner { padding: 130px var(--gutter) 110px; }
}

/* Mini-Trust-Bar direkt unter Hero-CTAs (ATF, Persona-4-Finding) */
.trust-mini {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--warmweiss);
  opacity: 0.95;
}
.trust-mini .stars { color: #F5C95B; letter-spacing: 1px; font-size: var(--text-base); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  border: 2px solid transparent;
  text-align: center;
  letter-spacing: 0.01em;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--oliv); color: #fff; }
.btn--primary:hover { background: var(--oliv-dark); }
.btn--primary:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 3px; }
/* Disabled submit stays visually positive (green, not faded-grey) — Story 3.7 / B-17.
   Scoped to the form submit button so a genuinely-disabled primary button elsewhere
   still reads as disabled. */
.btn:disabled { cursor: default; }
.btn--primary[data-submit-dynamic]:disabled { background: var(--oliv); color: #fff; opacity: 1; }
.btn--ghost {
  background: transparent;
  color: var(--warmweiss);
  border-color: var(--warmweiss);
}
.btn--ghost:hover { background: rgba(250,246,240,0.10); }
.btn--dark {
  background: var(--anthrazit);
  color: var(--warmweiss);
}
.btn--dark:hover { background: var(--anthrazit-soft); }
.btn--outline {
  background: transparent;
  color: var(--anthrazit);
  border-color: var(--anthrazit);
}
.btn--block { width: 100%; }

/* ---------- Sections ---------- */
section.page {
  padding: 56px 0;
}
section.page--dark {
  background: var(--anthrazit);
  color: var(--warmweiss);
}
section.page--dark h2 { color: var(--warmweiss); }
section.page--beige {
  background: var(--beige-soft);
}
section.page--narrow .container { max-width: var(--container-narrow); }
section.page header.head {
  text-align: center;
  margin-bottom: 36px;
}
section.page header.head p { color: var(--text-muted); max-width: var(--measure); margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
  section.page { padding: 80px 0; }
}

/* ---------- Card Grids ---------- */
.grid {
  display: grid;
  gap: 16px;
}
.grid--persona { grid-template-columns: 1fr; }
.grid--geraete { grid-template-columns: 1fr; }
.grid--orte { grid-template-columns: 1fr; }
.grid--stimmen { grid-template-columns: 1fr; }
.grid--faq { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid { gap: 18px; }
  .grid--persona { grid-template-columns: repeat(2, 1fr); }
  .grid--geraete { grid-template-columns: repeat(2, 1fr); }
  .grid--stimmen { grid-template-columns: repeat(2, 1fr); }
  .grid--orte { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid { gap: 22px; }
  .grid--persona { grid-template-columns: repeat(4, 1fr); }
  .grid--geraete { grid-template-columns: repeat(2, 1fr); }
  /* .grid--faq bleibt einspaltig (Story 5.18: Accordion-Liste statt 3-Spalten-Wand) */
  .grid--stimmen { grid-template-columns: repeat(3, 1fr); }
  .grid--orte { grid-template-columns: repeat(3, 1fr); }
}

/* Persona-Card */
.persona-card {
  display: flex; flex-direction: column;
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  color: var(--anthrazit);
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.persona-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elev); }
.persona-card:focus-visible { outline: 3px solid var(--oliv); outline-offset: 3px; }
.persona-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--beige-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: var(--oliv-dark);
}
.persona-card__icon svg { width: 28px; height: 28px; }
.persona-card h3 { margin-bottom: 6px; }
.persona-card__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 10px;
}
.persona-card__link {
  margin-top: auto;
  color: var(--oliv-dark);
  font-weight: 700;
  font-size: var(--text-sm);
  padding-top: 12px;
}
.persona-card__link::after { content: " →"; }

/* Geräte-Card */
.geraet-card {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--anthrazit);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.geraet-card:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }
.geraet-card__media {
  aspect-ratio: 16/10;
  background: var(--beige-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--oliv-dark);
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: var(--text-xl);
}
.geraet-card__body { padding: 22px 22px 24px; }
.geraet-card h3 { margin-bottom: 6px; }
.geraet-card__sub { color: var(--text-muted); font-size: var(--text-xs); font-style: italic; margin-bottom: 12px; }
.geraet-card__bullets { margin: 0 0 16px; padding: 0; list-style: none; }
.geraet-card__bullets li {
  padding-left: 22px; position: relative;
  font-size: var(--text-sm); padding-top: 4px; padding-bottom: 4px;
}
.geraet-card__bullets li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 12px; height: 2px; background: var(--oliv);
}
.geraet-card__link {
  color: var(--oliv-dark); font-weight: 700; font-size: var(--text-sm);
}
.geraet-card__link::after { content: " →"; }

/* ---------- Preis-Karussell (Story 5.10 / C5) ----------
   CSS-scroll-snap-Karussell: aktiver Tarif zentriert/voll, Nachbarn peeken.
   Ohne JS bleibt der Track nativ scroll-/wischbar (Progressive Enhancement);
   die Vor/Zurück-Buttons sind reine Tastatur-/Maus-Bequemlichkeit. */
.preis-carousel { margin-top: var(--space-8); position: relative; }
.preis-carousel__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Center-Fokus (Story 5.15): padding-inline in % bezieht sich auf den Containing Block
     (.preis-carousel), flex-basis:100% auf die Track-Content-Box → Karte = 100% − 2×Padding
     der sichtbaren Breite; erste/letzte Karte kann dadurch echt mittig snappen. */
  padding: 14px 8% 14px; /* vertikal: Raum für Card-Shadow, Fokusring UND den BELIEBT-Badge (top:-12px; CR 5.15 F2) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Story 5.15: Scrollbar optisch raus — Buttons + Peeks tragen die Affordance */
}
.preis-carousel__track::-webkit-scrollbar { display: none; }
.preis-carousel__track > .preis-card {
  scroll-snap-align: center;
  flex: 0 0 100%; /* = 84% sichtbar (100% − 2×8% Padding) */
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
/* Nachbarn im Hintergrund (Story 5.15): entsättigt (= grau wie im Referenz-Mockup) + leicht
   verkleinert, aber voll bedienbar. BEWUSST KEINE opacity: jede Transparenz drückt Text-Kontraste
   unter WCAG-AA (axe-Gate schlug bei 0.7 auf --text-muted an, bei 0.85 auf Weiß-auf-Oliv
   [BELIEBT-Badge/Primary-CTA, nur 5,5:1 Headroom]); saturate() ist luminanz-neutral und
   kostet daher keinen Kontrast.
   Nur bei aktivem JS (.is-enhanced) — ohne JS gäbe es keine .is-centered-Karte und alles wäre gedimmt. */
.preis-carousel.is-enhanced .preis-carousel__track > .preis-card:not(.is-centered) {
  transform: scale(0.94);
  filter: saturate(0.4);
}
@media (min-width: 640px) {
  .preis-carousel__track { padding-left: 22%; padding-right: 22%; } /* Karte = 56% */
}
@media (min-width: 960px) {
  .preis-carousel__track { padding-left: 27%; padding-right: 27%; } /* Karte = 46% */
}
.preis-carousel__controls {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}
/* Ab 640px liegen die Nav-Buttons wie im Referenz-Mockup seitlich über den gedimmten Peeks
   (mobil bleiben sie unter dem Track — dort würden 56px-Buttons die 84%-Karte verdecken). */
@media (min-width: 640px) {
  .preis-carousel__controls {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
  }
  .preis-carousel__nav {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .preis-carousel__nav:hover { transform: translateY(-50%) scale(1.08); } /* Centering beim Scale-Hover erhalten */
  .preis-carousel__nav[data-carousel-prev] { left: var(--space-3); }
  .preis-carousel__nav[data-carousel-next] { right: var(--space-3); }
}
.preis-carousel__nav {
  width: 56px; height: 56px; /* Touch-Token */
  border-radius: 999px;
  border: none;
  background: var(--oliv); /* Manuel 5.18: Bedienelemente generell in Oliv, Hover = Scale statt Farbwechsel */
  color: #fff;
  font-size: var(--text-xl);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; /* zentriert den Glyph — daher kein line-height nötig */
  transition: transform 0.15s ease;
}
.preis-carousel__nav:hover { transform: scale(1.08); }
.preis-carousel__nav:focus-visible { outline: 3px solid var(--oliv-dark); outline-offset: 2px; }
/* [disabled]-Regel entfernt (Story 5.14): Endlos-Loop ersetzt den Enden-Disabled-State. */

/* MitgliederStimme */
.stimme {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.stimme__quote {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0 0 18px;
}
.stimme__quote::before { content: "\201E"; color: var(--oliv); margin-right: 2px; }
.stimme__quote::after  { content: "\201C"; color: var(--oliv); margin-left: 2px; }
.stimme__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}
.stimme__meta strong { color: var(--anthrazit); }

/* Trust-Bar (Sterne + Anzahl, page-weite Variante) */
.trust-bar {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center;
  background: var(--anthrazit);
  color: var(--warmweiss);
  padding: 18px 22px;
  border-radius: var(--radius-lg);
}
.trust-bar .stars { color: #F5C95B; font-size: var(--text-lg); letter-spacing: 2px; }
.trust-bar strong { font-weight: 700; }
.trust-bar a { color: var(--beige); text-decoration: underline; }

/* FAQ-Teaser-Card */
.faq-teaser {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.faq-teaser h3 { font-family: 'Newsreader', Georgia, serif; font-size: var(--text-lg); margin-bottom: 10px; }
.faq-teaser p { color: var(--text-muted); flex: 1; }
.faq-teaser__link {
  color: var(--oliv-dark); font-weight: 700; font-size: var(--text-sm);
  text-decoration: none; margin-top: 12px;
}
.faq-teaser__link::after { content: " →"; }

/* ---------- Forms ---------- */
.form {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 22px 28px;
  box-shadow: var(--shadow-card);
}
.form fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.form legend { font-weight: 700; font-size: var(--text-sm); margin-bottom: 10px; padding: 0; }
.form .field { margin-bottom: 18px; }
.form label {
  display: block; font-weight: 600; font-size: var(--text-sm);
  margin-bottom: 6px;
}
.form .help { color: var(--text-muted); font-size: var(--text-xs); margin-top: 4px; }
.form .req { color: var(--warn); }
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea,
.form select {
  width: 100%;
  min-height: var(--touch);
  padding: 14px 14px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  color: var(--text);
}
.form textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 3px solid var(--oliv);
  outline-offset: 0;
  border-color: var(--oliv-dark);
}
.form .radio-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.form .radio {
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
}
.form .radio input {
  position: absolute; opacity: 0; inset: 0;
}
.form .radio span {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--touch);
  padding: 12px 16px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  font-weight: 600;
  background: #fff;
  text-align: center;
  line-height: 1.2;
}
.form .radio input:checked + span {
  background: var(--oliv);
  color: #fff;
  border-color: var(--oliv-dark);
}
.form .radio input:focus-visible + span {
  outline: 3px solid var(--anthrazit);
  outline-offset: 2px;
}
.form .checkbox-consent {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--touch);
  padding: 8px 0;
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.4;
}
.form .checkbox-consent input {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-top: 2px;
  accent-color: var(--oliv);
}

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Form Validation Feedback */
.field-error {
  color: var(--warn);
  font-size: var(--text-xs);
  font-weight: 600;
  margin: 4px 0 0;
}
.form-banner {
  background: #fdecd5;
  border-left: 4px solid var(--warn);
  color: var(--text);
  padding: 12px 16px;
  margin: 0 0 18px;
  border-radius: 6px;
  font-size: var(--text-sm);
}
.form-banner a { color: var(--oliv-dark); font-weight: 600; }

/* ---------- Sticky-Bottom-CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-stickycta);
  background: var(--warmweiss);
  border-top: 1px solid var(--hairline);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: none;
  box-shadow: 0 -10px 24px rgba(0,0,0,0.06);
}
.sticky-cta.is-visible { display: flex; gap: 10px; align-items: center; }
.sticky-cta .btn { flex: 1; font-size: var(--text-sm); padding: 12px 16px; }
.sticky-cta__tel {
  width: var(--touch); height: var(--touch);
  background: var(--oliv);
  color: #fff;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.sticky-cta__tel svg { width: 24px; height: 24px; }
@media (min-width: 1024px) { .sticky-cta { padding-left: 24px; padding-right: 24px; } }

/* ---------- KI-Pill + DSGVO-Modal ---------- */
.ki-pill {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: var(--z-kipill);
  width: 56px;
  height: 120px;
  background: var(--anthrazit);
  color: var(--warmweiss);
  border-radius: var(--radius-pill);
  border: 0;
  box-shadow: var(--shadow-elev);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  text-align: center;
  line-height: 1.05;
}
.ki-pill svg { width: 22px; height: 22px; color: var(--beige); }
.ki-pill__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 4px;
}
.ki-pill:focus-visible { outline: 3px solid var(--oliv); outline-offset: 3px; }
@media (min-width: 768px) {
  .ki-pill { bottom: 24px; right: 24px; }
}

/* DSGVO-Pre-Chat-Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(28,25,23,0.55);
  z-index: var(--z-modal);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
}
.modal.is-open { display: flex; }
.modal__panel {
  background: var(--warmweiss);
  border-radius: var(--radius-lg);
  /* 480px: bewusste Dialog-Breite, KEIN container-*-Tier — die Tiers dimensionieren
     Seiten-Layout-Spalten, nicht modale Dialoge. Einzige Nutzung → kein eigener Token (YAGNI). */
  max-width: 480px; width: 100%;
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-elev);
}
.modal__panel h2 { margin-top: 0; font-size: var(--text-xl); }
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  font-size: var(--text-xl); color: var(--text-muted);
  cursor: pointer;
}
.modal__actions {
  display: flex; gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.modal__actions .btn { flex: 1 1 auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--anthrazit);
  color: var(--warmweiss);
  padding: 56px 0 24px;
  margin-top: 64px;
}
.site-footer h3,
.site-footer .footer-col-h {
  color: var(--warmweiss);
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  margin-top: 0;
  opacity: 0.85;
}
.site-footer a {
  color: var(--warmweiss);
  text-decoration: none;
  display: inline-block;
  padding: var(--space-1) 0;
}
.site-footer a:hover { color: var(--beige); }
.site-footer a:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; }
.footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
.footer-brand { margin-bottom: 8px; } /* Typo-Regeln des alten Schriftzugs entfernt (Story 5.14: Logo-Bild) */
.footer-firm {
  font-size: var(--text-sm); opacity: 0.85; line-height: 1.5;
}
.footer-bottom {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(250,246,240,0.10);
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
  opacity: 0.75;
}
.footer-bottom a { padding: 0; }
.footer-bottom .links a + a { margin-left: 16px; }

/* ---------- Hub-Index Listing ---------- */
.index-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .index-grid { grid-template-columns: repeat(2, 1fr); } }
.index-card {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--anthrazit);
  font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: var(--shadow-card);
}
.index-card:hover { border-color: var(--oliv); }
.index-card:focus-visible { outline: 3px solid var(--oliv); outline-offset: 2px; }
.index-card small { display: block; color: var(--text-muted); font-weight: 400; margin-top: 4px; font-size: var(--text-xs); }

/* ---------- Breadcrumb ----------
   2026-05-13: Eigener Bg-Streifen damit Crumb visuell vom Header getrennt ist.
   Negative horizontale Margins brechen aus dem .container-Padding aus → wirkt
   bei Viewports ≤ container-max wie ein full-bleed Streifen. */
.crumb {
  display: block;
  background: var(--beige-soft);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: 14px var(--gutter);
  margin: 0 calc(var(--gutter) * -1) 24px;
}
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--anthrazit); }
.crumb [aria-current="page"] { color: var(--anthrazit); font-weight: 600; }

/* ---------- Q&A (Antworten-Karte) ---------- */
.qa-card {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  box-shadow: var(--shadow-card);
}
.qa-card h3 {
  font-family: 'Newsreader', serif;
  font-size: var(--text-lg);
  margin-bottom: 12px;
}
.qa-card p { color: var(--text); }
/* FAQ-Accordion (Story 5.18, Manuel: „überwältigend" → natives details; schließt 5.10-AC-4-Defer) */
.qa-card summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-height: 32px; /* + Card-Padding 22px oben/unten ≥ Touch-Komfort */
}
.qa-card summary::-webkit-details-marker { display: none; }
.qa-card summary::after { content: "+"; margin-left: auto; font-size: var(--text-xl); color: var(--oliv-dark); flex: 0 0 auto; }
.qa-card[open] summary::after { content: "−"; }
.qa-card summary h3 { margin: 0; }
.qa-card summary:focus-visible { outline: 3px solid var(--oliv); outline-offset: 4px; border-radius: 6px; }
.qa-card[open] summary { margin-bottom: 10px; }

/* ---------- Anfahrt-Block ---------- */
.ort-block {
  background: var(--warmweiss);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.ort-block h3 { font-size: var(--text-lg); margin-bottom: 8px; }
.ort-block dl { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: var(--text-sm); }
.ort-block dt { color: var(--text-muted); font-weight: 600; }
.ort-block dd { margin: 0; }

/* ---------- Prose (Impressum / Datenschutz / Über uns) ---------- */
.prose { max-width: var(--measure-prose); }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--oliv-dark); }

/* ---------- Utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  /* margin:-1px ist Teil des kanonischen Visually-Hidden-Patterns (verhindert, dass das
     1px-Element Layout/Scroll beeinflusst) — bewusste 1px-Ausnahme, kein Spacing-Token (AC-3). */
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.flow > * + * { margin-top: 1em; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Page-Bottom Spacer für Sticky-CTA — räumt die ~76px hohe Sticky-Bar frei (10+56+10).
   --space-20 (80px) ist der nächste Grid-Token und gibt minimal mehr Abstand (AC-2). */
body.has-sticky-cta { padding-bottom: var(--space-20); }
@media (min-width: 768px) { body.has-sticky-cta { padding-bottom: 0; } }