/* BUILD-MARKER: HSL-IONOS-SEO-V148-20260626 */
/* =====================================================
   HSL Gebäudemanagement – Klassisches Premium Design System
   Stil: bürgerlich, ruhig, seriös – wie Drees & Sommer / Bilfinger
   ===================================================== */

:root {
  /* Brand */
  --c-ink: #1a1b14;          /* Dunkles Anthrazit – ersetzt Olive für Großflächen */
  --c-ink-90: #2a2b22;
  --c-ink-80: #3a3b32;
  --c-ink-60: #6b6c64;
  --c-ink-40: #9b9a92;
  --c-ink-20: #c8c8c0;
  --c-ink-10: #e6e5dd;

  /* Brand-Anchor – nur noch für Logo und kleine Akzente */
  --c-olive: #303213;
  --c-olive-90: #4a4d22;

  /* Neutrale Hintergründe */
  --c-bg: #ffffff;
  --c-bg-soft: #f7f5ef;
  --c-bg-warm: #efece2;

  /* PRIMÄRFARBE – Brand-Anchor: Lime aus CI */
  --c-primary: #c3cc56;
  --c-star: #ffd428;        /* Google-Gelb für Sternebewertungen */
  --c-primary-dark: #a8b03e;
  --c-primary-soft: #ecefcd;

  /* Sekundär – Sand-Beige als wärmender Zwischenton */
  --c-sand: #b8a98a;
  --c-sand-dark: #8a7a5c;

  /* Legacy-Aliase (rückwärtskompatibel) */
  --c-lime: #c3cc56;
  --c-lime-dark: #a8b03e;

  --c-border: #e4e2d8;
  --c-border-strong: #cdc8b8;

  /* Type Scale – klassisch, nicht massiv */
  --t-h1: clamp(2rem, 3.6vw, 3rem);
  --t-h2: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-h3: clamp(1.15rem, 1.5vw, 1.35rem);
  --t-h4: 1rem;

  --t-body: 1rem;
  --t-body-lg: 1.08rem;
  --t-small: 0.92rem;
  --t-eyebrow: 0.78rem;

  --lh-tight: 1.15;
  --lh-base: 1.6;

  /* Spacing */
  --gutter: clamp(24px, 4vw, 56px);
  --section-y: clamp(64px, 7vw, 104px);
  --section-y-s: clamp(48px, 6vw, 80px);
  --max: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast: 200ms;
  --d-base: 300ms;

  /* Radius — State-of-the-Art Skala
     klein (Inputs/kleine Tags) · mittel (Cards/Dropdowns) · groß (Modals/Hero/Bento)
     Pillen (999px) bleiben für Buttons, Nav, Icons, Chat */
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* Shadow – sehr dezent */
  --shadow-sm: 0 1px 2px rgba(28, 29, 16, 0.04), 0 2px 8px rgba(28, 29, 16, 0.04);
  --shadow: 0 4px 12px rgba(28, 29, 16, 0.08);

  /* Fonts – Manrope (Brand-Schrift) */
  --f-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-serif: 'Source Serif Pro', Georgia, serif;
}

/* =====================================================
   Reset
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--d-fast) var(--ease); }
button { font: inherit; cursor: pointer; }

::selection { background: var(--c-primary); color: var(--c-ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--c-ink); border-radius: 5px; }

/* =====================================================
   Typografie
   ===================================================== */
h1, h2, h3, h4 {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--c-ink);
}
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.25; }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 600; }
p { margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--c-primary);
}
.eyebrow.light::before { background: var(--c-primary); }
.eyebrow.light { color: var(--c-primary); }

.lead {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--c-ink-60);
  max-width: 60ch;
}

.text-mute { color: var(--c-ink-60); }

/* =====================================================
   Layout
   ===================================================== */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-y) 0; }
.section-s { padding: var(--section-y-s) 0; }
.section-soft { background: var(--c-bg-soft); }
.section-warm { background: var(--c-bg-warm); }
.section-dark {
  background:
    linear-gradient(135deg, rgba(26,27,20,0.94) 0%, rgba(15,16,12,0.96) 100%),
    url('assets/img/construction.webp') center/cover no-repeat;
  color: #fff;
  position: relative;
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .lead { color: rgba(255, 255, 255, 0.75); }

.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-head[style*="center"] { margin-left: auto; margin-right: auto; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; }

/* =====================================================
   Buttons – klassisch & ruhig
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--f-sans);
  font-size: 0.94rem;
  font-weight: 600;
  background: var(--c-primary);
  color: var(--c-ink);
  border: 1px solid var(--c-primary);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--d-base) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--c-primary); border-color: var(--c-ink); color: var(--c-ink); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(26,27,20,0.3); }

/* Dark-button-Variante für Stellen wo dunkel passt */
.btn-dark { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; }
.btn .arrow { transition: transform var(--d-base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-outline {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-border-strong);
}
.btn-outline:hover { background: transparent; color: var(--c-ink); border-color: var(--c-ink); transform: translateY(-2px); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }

.btn-light {
  background: var(--c-primary);
  color: var(--c-ink);
  border-color: var(--c-primary);
}
.btn-light:hover { background: var(--c-primary); border-color: var(--c-ink); color: var(--c-ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--c-ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--c-ink-20);
  transition: all var(--d-base) var(--ease);
}
.link-arrow:hover { gap: 12px; border-bottom-color: var(--c-ink); }

/* =====================================================
   Header
   ===================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: rgba(26, 27, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: padding var(--d-base) var(--ease), transform 0.35s var(--ease), background var(--d-base) var(--ease);
}
/* Fallback für Browser ohne backdrop-filter: etwas deckender, aber nicht voll */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(26, 27, 20, 0.92); }
}
/* Kurze Lime-Trennlinie, kommt von links, läuft nicht über die ganze Breite */
.site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(180px, 32%, 460px);
  height: 2px;
  background: var(--c-primary);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
}
.brand-mark { height: 56px; width: auto; transition: opacity var(--d-base), height var(--d-base) var(--ease); }
.brand:hover .brand-mark { opacity: 0.85; }
.site-header.scrolled .brand-mark { height: 48px; }
@media (max-width: 768px) {
  .brand-mark { height: 44px; }
  .site-header.scrolled .brand-mark { height: 40px; }
}

/* Inline-Nav wird komplett durch das Burger-Menü ersetzt */
.nav { display: none; }

.header-cta {
  display: flex;
  align-items: center;
  gap: 28px;
}
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  transition: color var(--d-fast);
}
.header-tel:hover { color: #fff; }
.header-tel svg { width: 15px; height: 15px; fill: var(--c-primary); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: transparent;
  border: none;
  padding: 10px 6px 10px 18px;
  color: var(--c-primary);
  cursor: pointer;
  font-family: inherit;
  transition: opacity var(--d-fast);
}
.menu-toggle:hover { opacity: 0.78; }
.menu-toggle svg { width: 34px; height: 34px; }
.menu-toggle .menu-toggle-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .header-tel { display: none; }
}
@media (max-width: 560px) {
  .menu-toggle .menu-toggle-label { display: none; }
}

/* Side-Panel-Menü (Lime), fährt von rechts rein */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 88vw);
  z-index: 200;
  background: rgba(26, 27, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  padding: 24px clamp(28px, 4vw, 48px) 40px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  overflow-y: auto;
  box-shadow: -20px 0 60px rgba(0,0,0,0.25);
}
/* Fallback ohne backdrop-filter: deckender, damit Text lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav { background: rgba(26, 27, 20, 0.95); }
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(32px, 6vh, 56px);
}
.mobile-nav-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}
.mobile-nav-close svg { width: 28px; height: 28px; }
.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
}
.mobile-nav-list a {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  padding: clamp(10px, 1.4vh, 16px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: padding-left var(--d-base) var(--ease);
  display: flex;
  align-items: center;
  gap: 14px;
}
.mobile-nav-list a::before {
  content: "→";
  font-size: 0.55em;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.mobile-nav-list a:hover { padding-left: 12px; }
.mobile-nav-list a:hover::before { opacity: 1; transform: translateX(0); }
.mobile-nav-foot {
  flex: 0 0 auto;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Kontaktzeilen: halbe Trennlinie ab Mitte + kleines Icon rechts */
.mobile-nav-foot .mnf-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: clamp(10px, 1.4vh, 16px) 0;
  min-height: calc(clamp(1.8rem, 4vw, 2.6rem) * 1.1);
  box-sizing: content-box;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  transition: color var(--d-fast) var(--ease);
}
.mobile-nav-foot .mnf-line {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1px;
  background: rgba(255,255,255,0.18);
  transition: background var(--d-fast) var(--ease);
}
.mobile-nav-foot .mnf-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-ink);
  border: 2px solid transparent;
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.mobile-nav-foot .mnf-ic svg { width: 19px; height: 19px; }
.mobile-nav-foot .mnf-row:hover .mnf-ic {
  transform: translateY(-2px);
  border-color: var(--c-primary);
}
.mobile-nav-foot .mnf-row:hover .mnf-line { background: rgba(255,255,255,0.4); }
.mobile-nav .brand-mark { height: 38px; }

/* Abdunkelnder Backdrop hinter dem Side-Panel */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(10,12,8,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mobile-nav-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   Hero – klassisch & ruhig
   ===================================================== */
.hero {
  position: relative;
  padding: clamp(278px, calc(22vh + 128px), 388px) 0 clamp(80px, 11vh, 130px);
  background:
    url('assets/img/hero-building.webp') center 60%/cover no-repeat;
  color: #fff;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 75% at 27% 52%,
    rgba(4,7,7,0.88) 0%,
    rgba(4,7,7,0.74) 42%,
    rgba(4,7,7,0.40) 66%,
    transparent 84%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-content {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.hero h1 {
  margin-bottom: 0;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}
.hero-lead {
  font-size: var(--t-body-lg);
  color: rgba(255,255,255,0.96);
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 52ch;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
}
.hero-lead strong { color: #fff; }
.hero .eyebrow {
  margin-bottom: 0;
  color: var(--c-primary-dark);
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.hero .guarantee-badge {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-top: 8px;
}
.hero-actions .btn-outline {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.65);
  color: #fff;
  backdrop-filter: blur(4px);
}
.hero-actions .btn-outline:hover { background: rgba(255,255,255,0.22); }
.hero-trust {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 40px;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.28);
  max-width: 560px;
  width: 100%;
}
.hero-trust-item .num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.hero-trust-item .num .star { color: var(--c-star); font-size: 1rem; vertical-align: middle; margin-left: 2px; }
.hero-trust-item .lbl {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Right-hand image card hidden — hero is now a full-width banner */
.hero-image { display: none; }
.image-placeholder { display: none; }

/* =====================================================
   Trust Strip – statisch & ruhig
   ===================================================== */
.trust-strip {
  padding: clamp(40px, 5vw, 64px) 0;
  background: var(--c-bg);
  position: relative;
}
/* Lime-Trennlinie unten, kommt von rechts ins Bild (Spiegelung der Header-Linie) */
/* .trust-strip.section-green für höhere Spezifität als .section-green::after { content:none } */
.trust-strip::after,
.trust-strip.section-green::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(180px, 32%, 460px);
  height: 2px;
  background: var(--c-primary);
}
.trust-label {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.trust-sublabel {
  text-align: center;
  font-size: 0.94rem;
  color: var(--c-ink-40);
  margin-bottom: 48px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gutter);
}
.trust-logos-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-logos-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  animation: trust-marquee 60s linear infinite;
  will-change: transform;
}
.trust-logos-marquee:hover .trust-logos-track {
  animation-play-state: paused;
}
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-logos-track { animation: none; }
  .trust-logos-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.trust-logos-track .logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  flex-shrink: 0;
}
.trust-logos-track .logo img {
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}
.trust-logos-track .logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* =====================================================
   Services Grid – klassisch
   ===================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.service-card {
  padding: 32px 28px;
  background: var(--c-bg);
  transition: background var(--d-base);
  display: flex;
  flex-direction: column;
}
.service-card:hover { background: var(--c-bg-soft); }
.service-icon {
  width: 44px;
  height: 44px;
  background: var(--c-bg-soft);
  color: var(--c-ink);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  transition: all var(--d-base);
}
.service-card:hover .service-icon {
  background: var(--c-primary);
  color: var(--c-ink);
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--c-ink-60); font-size: 0.95rem; margin: 0 0 20px; flex-grow: 1; }
.service-card .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-top: auto;
}
.service-card:hover .more { color: var(--c-primary-dark); }
.service-card .more::after {
  content: "→";
  transition: transform var(--d-base);
}
.service-card:hover .more::after { transform: translateX(3px); }

/* =====================================================
   Numbers / Stats – KLEIN & klassisch
   ===================================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: left;
}
.stat .lbl {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  margin-bottom: 16px;
}
.stat .num {
  font-family: 'Inter', var(--f-sans);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--c-primary-dark);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stat .num sup { font-size: 0.45em; vertical-align: super; color: var(--c-primary-dark); margin-left: 2px; }
.stat .desc { font-size: 0.92rem; color: var(--c-ink-60); margin: 0; line-height: 1.5; }

/* ============================================================
   STANDARDS-MODUL — "Versiegelte Garantien" (Premium)
   ============================================================ */
.standards-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  perspective: 1400px;            /* für die 3D-Tiefe der Karten */
}
@media (max-width: 880px) { .standards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) { .standards-grid { grid-template-columns: 1fr; } }

/* Verbindungslinie, die sich von Karte zu Karte zieht */
.standards-progress {
  position: absolute;
  top: 52px;                      /* auf Höhe der Siegel-Mitte */
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--c-border);
  overflow: hidden;
  z-index: 0;
}
.standards-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--c-primary-dark), var(--c-primary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.standards-grid.in-view .standards-progress-fill { transform: scaleX(1); }
@media (max-width: 880px) { .standards-progress { display: none; } }

/* Karte */
.std-card {
  border-radius: 0;
  position: relative;
  z-index: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 30px 26px 28px;
  text-align: center;
  /* Startzustand: aus der Tiefe gekippt */
  opacity: 0;
  transform: perspective(1400px) translateY(46px) rotateX(-14deg) scale(0.96);
  transform-origin: center bottom;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  transition-delay: calc(var(--si) * 0.14s);   /* gestaffelt */
}
.std-card.in-view {
  opacity: 1;
  transform: perspective(1400px) translateY(0) rotateX(0) scale(1);
}
.std-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 26px 60px -30px rgba(168, 176, 62, 0.55);
  transform: perspective(1400px) translateY(-6px) rotateX(0) scale(1);
}

/* Siegel mit sich selbst zeichnendem Häkchen */
.std-seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  position: relative;
}
.std-seal svg { width: 100%; height: 100%; overflow: visible; }
.std-seal .std-ring {
  fill: var(--c-primary);
  stroke: var(--c-primary);
  stroke-width: 2;
  transition: stroke 0.5s var(--ease), fill 0.5s var(--ease);
}
.std-seal .std-check {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;          /* unsichtbar bis "gezeichnet" */
}
/* Häkchen zeichnet sich, sobald die einzelne Karte in den Viewport scrollt */
.std-card.in-view .std-check {
  animation: stdDraw 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 0.15s;
}
.std-card.in-view .std-ring {
  animation: stdSealPop 0.5s var(--ease) forwards;
  animation-delay: 0.1s;
}
@keyframes stdDraw { to { stroke-dashoffset: 0; } }
@keyframes stdSealPop {
  0%   { fill: var(--c-primary); stroke: var(--c-primary); }
  55%  { transform: scale(1.12); }
  100% { fill: var(--c-primary); stroke: var(--c-primary); transform: scale(1); }
}
.std-card:hover .std-seal { animation: stdSealPulse 0.6s var(--ease); }
@keyframes stdSealPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.std-no {
  font-family: 'Inter', var(--f-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-primary-dark);
  margin-bottom: 8px;
}
.std-title {
  font-size: 1.18rem;
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  min-height: 2.9em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.std-desc {
  font-size: 0.92rem;
  color: var(--c-ink-60);
  line-height: 1.55;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .std-card { opacity: 1; transform: none; transition: none; }
  .std-seal .std-check { stroke-dashoffset: 0; }
  .std-seal .std-ring { fill: var(--c-primary); stroke: var(--c-primary); }
  .standards-progress-fill { transform: scaleX(1); transition: none; }
}

/* Dark variant */
.section-dark .stats-row {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
}
.section-dark .stat { background: var(--c-ink); }
.section-dark .stat .lbl { color: var(--c-primary); }
.section-dark .stat .num { color: #fff; }
.section-dark .stat .num sup { color: var(--c-primary); }
.section-dark .stat .desc { color: rgba(255, 255, 255, 0.7); }

/* =====================================================
   Process – klassische Schritt-Liste
   ===================================================== */
/* =====================================================
   Ablauf — vertikale Scroll-Timeline mit lime Progress
   ===================================================== */
.timeline {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding-left: 8px;
}
/* Track + Progress-Linie (links) */
.timeline-track {
  position: absolute;
  left: 26px;
  top: 28px;
  bottom: 28px;
  width: 3px;
  background: var(--c-border);
  border-radius: 999px;
  overflow: hidden;
}
.timeline-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark));
  border-radius: 999px;
  transition: height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Ein Step */
.timeline-step {
  position: relative;
  display: flex;
  gap: 32px;
  padding: 0 0 56px 0;
  /* Premium Start-Zustand für Reveal */
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
/* gestaffeltes Erscheinen */
.timeline-step:nth-child(2) { transition-delay: 0.05s; }
.timeline-step:nth-child(3) { transition-delay: 0.1s; }
.timeline-step:nth-child(4) { transition-delay: 0.15s; }
.timeline-step:nth-child(5) { transition-delay: 0.2s; }
/* Marker (Punkt auf der Linie) */
.timeline-marker {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.tl-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 3px solid var(--c-border-strong);
  transition: background 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* Aktiver / erreichter Step: Marker lime */
.timeline-step.active .tl-dot {
  background: var(--c-primary);
  border-color: var(--c-primary-dark);
  transform: scale(1.3);
  box-shadow: 0 0 0 7px var(--c-primary-soft);
}
/* Karte — jetzt echte Card */
.timeline-card {
  flex: 1;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0;
  padding: 24px 28px;
  box-shadow: none;
  transition: background 0.45s cubic-bezier(0.22,1,0.36,1),
              transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
              border-color 0.45s cubic-bezier(0.22,1,0.36,1);
}
/* Aktive Card hebt sich premium hervor */
.timeline-step.active .timeline-card {
  transform: translateX(4px);
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 30px 60px -34px rgba(168,176,62,0.7);
}
.timeline-card .stepnum {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-40);
  margin-bottom: 8px;
  transition: color 0.45s cubic-bezier(0.22,1,0.36,1);
}
.timeline-step.active .timeline-card .stepnum { color: var(--c-ink); }
.timeline-step.active .timeline-card h4 { color: var(--c-ink); }
.timeline-step.active .timeline-card p { color: var(--c-ink); }
.timeline-card h4 { margin-bottom: 8px; font-size: 1.3rem; line-height: 1.2; transition: color 0.45s cubic-bezier(0.22,1,0.36,1); }
.timeline-card p { color: var(--c-ink-60); font-size: 0.96rem; margin: 0; line-height: 1.6; max-width: 52ch; transition: color 0.45s cubic-bezier(0.22,1,0.36,1); }
@media (max-width: 560px) {
  .timeline-step { gap: 16px; padding-bottom: 40px; }
  .timeline-track { left: 23px; }
  .timeline-marker { width: 48px; height: 48px; }
  .timeline-card { padding: 20px 22px; }
}

/* =====================================================
   Testimonials – klassisch (kein Italic-Serif-Magazin)
   ===================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.testimonial {
  padding: 28px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.testimonial .stars {
  color: var(--c-star);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink);
  margin: 0 0 20px;
}
.testimonial cite {
  display: block;
  font-style: normal;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.testimonial .name { display: block; font-size: 0.95rem; font-weight: 600; color: var(--c-ink); }
.testimonial .meta { display: block; font-size: 0.82rem; color: var(--c-ink-60); margin-top: 2px; }

/* =====================================================
   Page Hero (Unterseiten)
   ===================================================== */
.page-hero {
  padding: clamp(152px, calc(8vh + 128px), 224px) 0 clamp(48px, 6vh, 72px);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-soft);
}
/* ============================================================
   BILD-HEROES — einheitliche Markenwelt (monochrom, fast s/w)
   + lokaler Schatten hinter dem Text. Heller Text auf
   abgedunkeltem, entsättigtem Bild. Gilt für /ueber-uns,
   /einzugsgebiet, /kontakt, /leistungen.
   Aufbau: ::before = Bild (gefiltert), ::after = Schatten,
   Text liegt darüber (z-index) und wird NICHT mitgefiltert.
   ============================================================ */
.page-hero-image,
.page-hero-image-ueber,
.page-hero-image-region,
.page-hero-image-leistungen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 50vh, 540px);
  padding-top: clamp(140px, 14vh, 180px);
  padding-bottom: clamp(40px, 6vh, 64px);
  background: var(--c-ink);
}
/* Bild-Layer: entsättigt + leicht abgedunkelt für einheitliche Farbwelt */
.page-hero-image::before,
.page-hero-image-ueber::before,
.page-hero-image-region::before,
.page-hero-image-leistungen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-repeat: no-repeat;
  filter: grayscale(0.85) contrast(1.05) brightness(0.95);
}
/* Schatten-Layer: diagonal von links (für Headline) + vertikal von unten */
.page-hero-image::after,
.page-hero-image-ueber::after,
.page-hero-image-region::after,
.page-hero-image-leistungen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,27,20,0) 25%, rgba(26,27,20,0.35) 52%, rgba(26,27,20,0.62) 75%, rgba(26,27,20,0.8) 100%),
    linear-gradient(105deg, rgba(26,27,20,0.82) 0%, rgba(26,27,20,0.62) 32%, rgba(26,27,20,0.30) 52%, rgba(26,27,20,0.08) 72%, rgba(26,27,20,0) 100%);
}
/* Bild-Quellen + Bildausschnitt je Seite */
.page-hero-image::before        { background-image: url('assets/img/contact-page-image.webp'); background-position: center center; }
.page-hero-image-ueber::before  { background-image: url('assets/img/ueber-uns-hero-image.webp'); background-position: center top; }
.page-hero-image-region::before { background-image: url('assets/img/image-region.webp'); background-position: center top; }
.page-hero-image-leistungen::before { background-image: url('assets/img/leistungen-hero-banner-image.webp'); background-position: center center; }

.page-hero-image .page-hero-inner,
.page-hero-image-ueber .page-hero-inner,
.page-hero-image-region .page-hero-inner,
.page-hero-image-leistungen .page-hero-inner { position: relative; z-index: 1; width: 100%; }

/* Heller Text auf dem dunklen, entsättigten Bild */
.page-hero.page-hero-image h1, .page-hero.page-hero-image-ueber h1, .page-hero.page-hero-image-region h1, .page-hero.page-hero-image-leistungen h1,
.page-hero.page-hero-image .hero-tagline, .page-hero.page-hero-image-ueber .hero-tagline, .page-hero.page-hero-image-region .hero-tagline, .page-hero.page-hero-image-leistungen .hero-tagline,
.page-hero.page-hero-image .sub, .page-hero.page-hero-image-ueber .sub, .page-hero.page-hero-image-region .sub, .page-hero.page-hero-image-leistungen .sub { color: #fff; }
/* Ausnahme: /ueber-uns behält die lime Tagline ("Karlsruher Familienunternehmen…") */
.page-hero.page-hero-image-ueber .hero-tagline { color: var(--c-primary); }
.page-hero-image .breadcrumb, .page-hero-image-ueber .breadcrumb, .page-hero-image-region .breadcrumb, .page-hero-image-leistungen .breadcrumb,
.page-hero-image .breadcrumb a, .page-hero-image-ueber .breadcrumb a, .page-hero-image-region .breadcrumb a, .page-hero-image-leistungen .breadcrumb a,
.page-hero-image .breadcrumb span, .page-hero-image-ueber .breadcrumb span, .page-hero-image-region .breadcrumb span, .page-hero-image-leistungen .breadcrumb span { color: rgba(255,255,255,0.82); }
/* Eyebrow (Kategoriename) einheitlich helles Lime auf dunklem Grund */
.page-hero-image .eyebrow, .page-hero-image-ueber .eyebrow, .page-hero-image-region .eyebrow, .page-hero-image-leistungen .eyebrow { color: var(--c-primary); }
.page-hero-image .eyebrow::before, .page-hero-image-ueber .eyebrow::before, .page-hero-image-region .eyebrow::before, .page-hero-image-leistungen .eyebrow::before { background: var(--c-primary); }
.page-hero-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.page-hero h1 { max-width: 22ch; margin-bottom: 16px; }
.page-hero .hero-tagline {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: var(--c-primary-dark);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: -4px 0 18px;
  max-width: 40ch;
}
.page-hero .sub { font-size: var(--t-body-lg); color: var(--c-ink-60); max-width: 60ch; line-height: 1.55; }
.breadcrumb {
  font-size: 0.85rem;
  color: var(--c-ink-60);
  margin-bottom: 16px;
}
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* =====================================================
   Editorial Rows
   ===================================================== */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.row.reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; }
  .row.reverse > :first-child { order: 0; }
}

.row-image {
  aspect-ratio: 4/5;
  background:
    linear-gradient(180deg, rgba(26,27,20,0.35) 0%, rgba(26,27,20,0.75) 100%),
    url('assets/img/construction.webp') center/cover no-repeat;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* =====================================================
   STORY-MODUL "Unsere Geschichte" — hoch & ausführlich
   ===================================================== */
.story-image {
  border-radius: var(--radius-l);
  position: relative;
  height: clamp(280px, 42vh, 460px);
  margin: clamp(32px, 5vw, 56px) 0 clamp(36px, 5vw, 60px);
  background: url('assets/img/ueber-uns-image-2.webp') center / cover no-repeat;
  border: 1px solid var(--c-border);
  overflow: hidden;
}
/* Dezenter Dunkelverlauf nur unten links — für Lesbarkeit der Caption */
.story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(26,27,20,0.78) 0%, rgba(26,27,20,0.4) 30%, transparent 58%),
    linear-gradient(to top, rgba(26,27,20,0.45) 0%, transparent 35%);
  pointer-events: none;
}
.story-image-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(20px, 3vw, 32px);
  max-width: 70%;
}
.story-image-caption h3 {
  color: #fff;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.story-image-caption p {
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 700px) {
  .story-image {
    background: url('assets/img/ueber-uns-image-2.webp') center / cover no-repeat;
  }
}
.story-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 64px);
}
@media (max-width: 760px) { .story-text { grid-template-columns: 1fr; gap: 28px; } }
.story-text h3 {
  font-size: 1.25rem;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.story-text p {
  color: var(--c-ink-60);
  line-height: 1.7;
  margin-bottom: 16px;
  font-size: 1rem;
}
.story-text p:last-child { margin-bottom: 0; }
/* Hervorgehobenes Schluss-Statement */
.story-pull {
  border-radius: var(--radius);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 4vw, 40px) clamp(28px, 5vw, 48px);
  background: var(--c-bg-soft);
  border-left: 3px solid var(--c-primary);
}
.story-pull p {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0;
  max-width: 62ch;
  font-weight: 500;
}
.story-pull strong { color: var(--c-primary-dark); }
.row-image.wide { aspect-ratio: 16/10; }
.row-image.tools {
  background:
    linear-gradient(180deg, rgba(26,27,20,0.35) 0%, rgba(26,27,20,0.75) 100%),
    url('assets/img/tools.webp') center/cover no-repeat;
}
.row-image.skyline {
  background:
    linear-gradient(180deg, rgba(26,27,20,0.35) 0%, rgba(26,27,20,0.75) 100%),
    url('assets/img/cta-skyline.webp') center/cover no-repeat;
}
.row-image.building {
  background:
    linear-gradient(180deg, rgba(26,27,20,0.35) 0%, rgba(26,27,20,0.75) 100%),
    url('assets/img/hero-building.webp') center/cover no-repeat;
}
.row-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(195, 204, 86, 0.08), transparent 60%);
  pointer-events: none;
}

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.bullet-list li {
  position: relative;
  padding: 12px 0 12px 24px;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.98rem;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 12px;
  height: 2px;
  background: var(--c-primary);
}
.bullet-list li strong {
  display: block;
  color: var(--c-ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.bullet-list li span { color: var(--c-ink-60); font-size: 0.92rem; }

/* =====================================================
   Team (separate page)
   ===================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}
.team-member {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--d-base);
}
.team-member:hover { box-shadow: var(--shadow); }
.team-photo {
  aspect-ratio: 4/5;
  background: var(--c-ink);
  position: relative;
}
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(195, 204, 86, 0.12), transparent 60%);
}
.team-photo .image-placeholder { color: rgba(255, 255, 255, 0.35); }
.team-info { padding: 24px; }
.team-info .role {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.team-info h3 { font-size: 1.2rem; margin-bottom: 8px; }
.team-info p { color: var(--c-ink-60); font-size: 0.92rem; margin: 0 0 16px; line-height: 1.55; }
.team-info .contact {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
}
.team-info .contact a {
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-ink-20);
  padding-bottom: 1px;
}
.team-info .contact a:hover { border-bottom-color: var(--c-ink); }

/* =====================================================
   Cities / Region
   ===================================================== */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.city-tile {
  border-radius: var(--radius);
  background: var(--c-bg);
  padding: 28px;
  transition: background var(--d-base);
}
.city-tile:hover { background: var(--c-bg-soft); }
.city-tile.featured { background: var(--c-ink); color: #fff; }
.city-tile.featured h3 { color: #fff; }
.city-tile.featured p { color: rgba(255, 255, 255, 0.78); }
.city-tile.featured .tag { color: var(--c-primary); }
.city-tile .tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.city-tile h3 { font-size: 1.2rem; margin-bottom: 6px; }
.city-tile p { color: var(--c-ink-60); font-size: 0.9rem; margin: 0; line-height: 1.55; }

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill {
  padding: 8px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-size: 0.88rem;
  color: var(--c-ink);
  background: var(--c-bg);
}
.pill.active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.region-map {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--c-ink);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.region-map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(0.5) contrast(0.92) brightness(0.78);
}
/* Abdunkelndes Overlay — klickdurchlässig, Karte bleibt interaktiv */
.region-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26,27,20,0.45) 0%, rgba(26,27,20,0.25) 40%, rgba(26,27,20,0.5) 100%);
  mix-blend-mode: multiply;
}
/* Summary-Badge oben rechts */
.region-map-summary {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  background: rgba(26,27,20,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(195,204,86,0.3);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.region-map-summary .rms-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.region-map-summary .rms-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* =====================================================
   Contact Form – klassisch
   ===================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info h3 { margin-bottom: 24px; font-size: 1.2rem; }
.contact-info-list { list-style: none; padding: 0; margin: 0; }
.contact-info-list li {
  padding: 18px 0;
  border-top: 1px solid var(--c-border);
}
.contact-info-list li:last-child { border-bottom: 1px solid var(--c-border); }
.contact-info-list .tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  display: block;
  margin-bottom: 4px;
}
.contact-info-list a, .contact-info-list span { color: var(--c-ink); font-size: 1rem; }
.contact-info-list a:hover { color: var(--c-primary-dark); }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-ink);
  transition: all var(--d-base);
}
.socials a:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }

.contact-form {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 32px;
  display: grid;
  gap: 20px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group label {
  display: block;
  font-size: 0.84rem;
  color: var(--c-ink-80);
  font-weight: 500;
  margin-bottom: 6px;
}
.form-group label .req { color: #c0392b; }
.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-s);
  background: var(--c-bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  transition: border-color var(--d-base), box-shadow var(--d-base);
}
.form-control:focus {
  outline: none;
  border-color: var(--c-primary-dark);
  box-shadow: 0 0 0 3px rgba(195, 204, 86, 0.18);
}
.form-control::placeholder { color: var(--c-ink-40); }
textarea.form-control { resize: vertical; min-height: 110px; }
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231c1d10' stroke-width='1.5'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.9rem;
  color: var(--c-ink-60);
  line-height: 1.5;
}
.form-check input { margin-top: 3px; accent-color: var(--c-primary-dark); }
.form-check a { color: var(--c-ink); border-bottom: 1px solid currentColor; }

/* =====================================================
   FAQ
   ===================================================== */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item {
  border-radius: var(--radius); border-top: 1px solid var(--c-border); }
.faq-item:last-child { border-bottom: 1px solid var(--c-border); }
.faq-item summary {
  padding: 22px 0;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--c-primary-dark);
  line-height: 1;
  transition: transform var(--d-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 22px; color: var(--c-ink-60); font-size: 0.98rem; line-height: 1.6; max-width: 68ch; }

/* =====================================================
   CTA banner – mit Hintergrundbild
   ===================================================== */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(26,27,20,0.92) 0%, rgba(15,16,12,0.94) 100%),
    url('assets/img/cta-skyline.webp') center/cover no-repeat;
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(40px, 5vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { color: var(--c-ink); margin-bottom: 18px; max-width: 22ch; margin-left: auto; margin-right: auto; }
.cta-banner p { color: var(--c-ink-60); max-width: 50ch; margin: 0 auto 40px; font-size: 1.02rem; line-height: 1.6; }
.cta-banner .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =====================================================
   Footer
   ===================================================== */
.site-footer {
  background: rgba(26, 27, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--section-y) 0 28px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-footer { background: rgba(26, 27, 20, 0.92); }
}
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } }
.footer-brand img {
  height: 64px;
  margin-bottom: 20px;
  opacity: 1;
  transition: opacity var(--d-base);
}
.footer-brand:hover img { opacity: 1; }
.footer-brand p { max-width: 340px; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.footer-col h5 {
  color: var(--c-primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a, .footer-col span { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }
.footer-col a:hover { color: var(--c-primary); }
.footer-col .ci {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer-col .ci svg { width: 14px; height: 14px; fill: var(--c-primary); flex-shrink: 0; margin-top: 3px; }

.footer-bot {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bot .legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bot .legal a { color: rgba(255, 255, 255, 0.5); transition: color 0.25s var(--ease); }
.footer-bot .legal a:hover { color: var(--c-primary); }
.footer-bot .socials a { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.7); }
.footer-bot .socials a:hover { background: var(--c-primary); color: var(--c-ink); border-color: var(--c-primary); }

/* =====================================================
   Legal Documents (Impressum / Datenschutz / AGB)
   ===================================================== */
.legal-doc { color: var(--c-ink-80, var(--c-ink)); font-size: 0.96rem; line-height: 1.7; }
.legal-doc h2 {
  font-size: 1.35rem;
  margin: 40px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  letter-spacing: -0.01em;
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-doc h3 { font-size: 1.05rem; margin: 26px 0 10px; color: var(--c-ink); }
.legal-doc h4 { font-size: 0.98rem; margin: 20px 0 8px; color: var(--c-ink); }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 22px; }
.legal-doc ul li, .legal-doc ol li { margin-bottom: 6px; }
.legal-doc a { color: var(--c-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--c-ink); }
.legal-doc strong { color: var(--c-ink); }
.legal-doc hr { border: 0; border-top: 1px solid var(--c-line); margin: 36px 0; }

/* =====================================================
   Team Grid 12 (3 × 4 Spalten, mit Hover-Overlay)
   ===================================================== */
.team-grid-12 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .team-grid-12 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .team-grid-12 { grid-template-columns: 1fr; }
}

.team-card-12 {
  position: relative;
  background: var(--c-paper, #fff);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
  transition: transform .35s ease, box-shadow .35s ease;
  cursor: pointer;
  outline: none;
}
.team-card-12:hover,
.team-card-12:focus-visible,
.team-card-12.is-open {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.28);
}
.team-card-12:focus-visible { box-shadow: 0 0 0 3px var(--c-primary), 0 24px 48px -20px rgba(0,0,0,.28); }

/* Foto-Platzhalter (Square Aspect) */
.team-card-12 .photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #ece8df 0%, #d8d2c4 100%);
  display: grid;
  place-items: center;
  color: rgba(48, 50, 19, 0.35);
  overflow: hidden;
}
.team-card-12 .photo svg {
  width: 38%;
  height: 38%;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
}
.team-card-12 .photo .ph-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(48, 50, 19, 0.55);
  text-align: center;
}

/* Reales Portrait (überlagert den Placeholder, sobald Bild geladen ist) */
.team-card-12 .photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
  transition: transform .55s ease, filter .35s ease;
}
.team-card-12:hover .photo img,
.team-card-12:focus-visible .photo img,
.team-card-12.is-open .photo img {
  transform: scale(1.04);
  filter: brightness(0.55) grayscale(15%);
}

/* Footer-Info unter Foto */
.team-card-12 .info {
  padding: 16px 18px 20px;
  text-align: center;
}
.team-card-12 .info .name {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.team-card-12 .info .role {
  font-size: 0.82rem;
  color: var(--c-ink-60);
  letter-spacing: 0.02em;
}

/* Hover-Overlay (deckt das Foto ab) */
.team-card-12 .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--c-olive, #303213) 0%, #1a1b14 100%);
  color: rgba(255,255,255,.92);
  padding: 22px 22px 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(8%);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.team-card-12:hover .overlay,
.team-card-12:focus-visible .overlay,
.team-card-12.is-open .overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.team-card-12 .overlay .ovl-role {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-weight: 600;
  margin-bottom: 8px;
}
.team-card-12 .overlay .ovl-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.team-card-12 .overlay .ovl-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0;
}
.team-card-12 .overlay .ovl-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(195,204,86,.18);
  color: var(--c-primary);
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-top: 14px;
  align-self: flex-start;
}

/* Touch-Geräte: kein Hover, Overlay öffnet sich per Klick (siehe JS) */
@media (hover: none) {
  .team-card-12 .photo::after {
    content: "Tippen für Details ↗";
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 0.66rem;
    color: rgba(48,50,19,.55);
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: var(--radius);
    letter-spacing: 0.04em;
  }
}

/* =====================================================
   Floating
   ===================================================== */
.whatsapp-float {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 52px; height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  z-index: 50;
  transition: transform var(--d-base);
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 26px; height: 26px; fill: #fff; }

.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--c-ink);
  z-index: 49;
  box-shadow: 0 -2px 12px rgba(28, 29, 16, 0.15);
}
.mobile-cta a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-cta a:last-child { border-right: none; }
.mobile-cta a.primary { background: var(--c-primary); color: var(--c-ink); }
.mobile-cta a svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 768px) {
  .mobile-cta { display: flex; }
  .whatsapp-float { display: none; }
}

/* =====================================================
   Reveal — Fail-Safe Pattern
   Standard: Inhalt ist SICHTBAR. Nur wenn JS aktiv das
   Reveal-System bestätigt (durch <html class="js-reveal">),
   wird .reveal ausgeblendet und animiert. So gibt es nie
   einen weißen Bildschirm, wenn JS später kommt oder fehlt.
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  html.js-reveal .reveal.visible { opacity: 1; transform: translateY(0); }
  html.js-reveal .reveal.d1 { transition-delay: 0.08s; }
  html.js-reveal .reveal.d2 { transition-delay: 0.16s; }
  html.js-reveal .reveal.d3 { transition-delay: 0.24s; }
}

/* =====================================================
   Cookie Consent Banner (DSGVO)
   ===================================================== */
/* Cookie-Consent — zentriertes Modal mit Milchglas-Backdrop */
.consent-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 40px 90px -30px rgba(26, 27, 20, 0.45);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 16px;
}
/* Milchglas-Backdrop, der die Seite verdeckt bis Consent gegeben wurde */
.consent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 27, 20, 0.25);
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.consent-backdrop.show { opacity: 1; visibility: visible; }
.consent-banner.show { display: flex; animation: consentPop .45s var(--ease); }
@keyframes consentPop { from { transform: translate(-50%, -48%) scale(0.96); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.consent-banner h4 { margin: 0 0 4px; font-size: 1rem; }
.consent-banner p { font-size: 0.88rem; color: var(--c-ink-60); line-height: 1.55; margin: 0; }
.consent-banner a { color: var(--c-ink); border-bottom: 1px solid var(--c-ink-20); }
.consent-banner .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-banner button {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 500;
  border: 1px solid var(--c-border-strong);
  background: #fff;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--d-base) var(--ease);
}
.consent-banner button:hover { background: var(--c-bg-soft); }
.consent-banner button.accept { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-ink); font-weight: 600; }
.consent-banner button.accept:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }


/* =====================================================
   Lazy-image visual feedback
   ===================================================== */
img[loading="lazy"] { transition: opacity .4s ease; }
img.lazy-loading { opacity: 0; }
img.lazy-loaded { opacity: 1; }

/* =====================================================
   HSL Chat-Assistent (Chatbot-Widget)
   ===================================================== */
.chat-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
}
@media (max-width: 768px) {
  .chat-widget { right: 16px; bottom: 76px; }
}

/* Toggle-Button */
.chat-toggle {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(26, 27, 20, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-base) var(--ease);
  position: relative;
}
.chat-toggle:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(26, 27, 20, 0.35); }
.chat-toggle svg { width: 28px; height: 28px; fill: currentColor; }
.chat-toggle .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--c-primary);
  color: var(--c-ink);
  font-size: 0.7rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.chat-widget.open .chat-toggle svg.icon-chat { display: none; }
.chat-widget:not(.open) .chat-toggle svg.icon-close { display: none; }

/* Panel */
.chat-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: var(--radius-l);
  box-shadow: 0 24px 64px rgba(26, 27, 20, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.chat-widget.open .chat-panel {
  display: flex;
  animation: chatOpen .3s var(--ease);
}
@keyframes chatOpen {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-header {
  background: var(--c-ink);
  color: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header .avatar {
  width: 38px;
  height: 38px;
  background: var(--c-primary);
  color: var(--c-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.chat-header .title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.chat-header .status {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.chat-header .status::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--c-primary);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 var(--c-primary);
  animation: chatPulse 2s infinite;
}
@keyframes chatPulse {
  0%   { box-shadow: 0 0 0 0 rgba(195,204,86,0.6); }
  100% { box-shadow: 0 0 0 10px rgba(195,204,86,0); }
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-bg-soft);
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
  animation: chatMsgIn .25s var(--ease);
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.bot {
  background: #fff;
  color: var(--c-ink);
  align-self: flex-start;
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  background: var(--c-primary);
  color: var(--c-ink);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.chat-msg a {
  color: var(--c-ink);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
.chat-msg ul { margin: 6px 0 0; padding-left: 20px; }
.chat-msg ul li { margin-bottom: 2px; }
.chat-msg strong { color: var(--c-ink); }

.chat-quick-replies {
  padding: 12px 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff;
  border-top: 1px solid var(--c-border);
}
.chat-quick {
  padding: 8px 16px;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--c-ink);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--d-fast) var(--ease);
  font-family: inherit;
}
.chat-quick:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  transform: translateY(-1px);
}
.chat-quick.escalate {
  background: var(--c-ink);
  color: #fff;
  border-color: var(--c-ink);
}
.chat-quick.escalate:hover {
  background: #000;
  border-color: #000;
}

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: var(--c-ink-40);
  border-radius: 50%;
  animation: chatTyping 1.4s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTyping {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Bei geöffnetem Chat: WhatsApp/Mobile-CTA versteckt halten */
.chat-widget.open ~ .mobile-cta { display: none; }

/* =====================================================
   48-Stunden-Garantie (Brand-Element)
   ===================================================== */
.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--c-primary-soft);
  color: var(--c-ink);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--c-primary);
  margin-bottom: 24px;
}
.guarantee-badge .dot {
  width: 8px;
  height: 8px;
  background: var(--c-primary-dark);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--c-primary-dark);
  animation: chatPulse 2s infinite;
  flex-shrink: 0;
}

.guarantee-section {
  background: var(--c-bg-soft);
  color: var(--c-ink);
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.guarantee-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(195, 204, 86, 0.06), transparent 70%);
  pointer-events: none;
}
.guarantee-section .container { position: relative; z-index: 1; }
.guarantee-hero {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
@media (max-width: 900px) { .guarantee-hero { grid-template-columns: 1fr; gap: 40px; } }
.guarantee-visual {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 900px) { .guarantee-visual { justify-content: flex-start; } }
.guarantee-bignum {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 0.82;
}
@media (max-width: 900px) { .guarantee-bignum { align-items: flex-start; } }
.guarantee-bignum .g-48 {
  font-size: clamp(5rem, 11vw, 11rem);
  font-weight: 800;
  color: var(--c-primary-dark);
  letter-spacing: -0.04em;
  font-family: 'Inter', var(--f-sans);
}
.guarantee-bignum .g-unit {
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--c-primary-dark);
  letter-spacing: -0.01em;
  margin-top: 4px;
  font-family: 'Inter', var(--f-sans);
}
.guarantee-content .eyebrow { color: var(--c-primary-dark); }
.guarantee-content .eyebrow::before { background: var(--c-primary-dark); }
.guarantee-content h2 { color: var(--c-ink); margin-bottom: 12px; }
.guarantee-content .guarantee-sub { margin-bottom: 32px; }
.guarantee-pillars {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 540px) {
  .guarantee-pillars { grid-template-columns: 1fr; }
}
.guarantee-pillars li {
  background: var(--c-bg);
  padding: 24px 24px;
  border-radius: 0;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  transition: border-color var(--d-base) var(--ease);
}
.guarantee-pillars li strong { transition: color var(--d-base) var(--ease); }
.guarantee-pillars li:hover {
  background: var(--c-bg);
  border-color: var(--c-border);
  border-left-color: var(--c-ink);
}
.guarantee-pillars li:hover strong { color: var(--c-ink); }
.guarantee-pillars li strong {
  color: var(--c-primary-dark);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}
.guarantee-pillars li span {
  color: var(--c-ink-60);
  font-size: 0.95rem;
  line-height: 1.5;
}
.guarantee-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =====================================================
   Property-Care-Methode (5 Versprechen)
   ===================================================== */
.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  overflow: visible;
}
.method-card {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0;
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  align-items: center;
  overflow: hidden;
  transition: border-color 0.5s var(--ease);
}
/* Lime-Füllung, die beim Reinscrollen von links einwischt */
.method-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease);
  z-index: 0;
}
.method-card.filled::before { transform: scaleX(1); }
.method-card.filled { border-color: var(--c-primary); }
.method-card > * { position: relative; z-index: 1; }
/* Textfarben im gefüllten Zustand */
.method-card.filled .num { color: var(--c-ink); }
.method-card.filled h3 { color: var(--c-ink); }
.method-card.filled .pay { color: rgba(26,27,20,0.75); }
.method-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-primary);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.3);
}
/* Große lime Nummer — links als Anker */
.method-card .num {
  font-family: 'Inter', var(--f-sans);
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--c-primary-dark);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0;
  grid-row: span 2;
  text-transform: none;
}
/* Cards stehen fest an Ort — nur die Lime-Füllung animiert (per JS .filled) */
.mc-reveal {
  opacity: 1;
}
/* Fallback, falls JS deaktiviert: Cards trotzdem sichtbar */
.no-js .mc-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mc-reveal { opacity: 1 !important; transform: none !important; }
}
.method-card h3 { font-size: 1.3rem; margin-bottom: 4px; line-height: 1.25; align-self: end; }
.method-card p { color: var(--c-ink-60); font-size: 0.94rem; line-height: 1.55; margin: 0; }
.method-card .pay { font-size: 0.95rem; color: var(--c-ink-60); margin: 0; padding: 0; border: none; font-style: italic; align-self: start; }
.method-card .pay strong { color: var(--c-ink); font-style: normal; }

/* =====================================================
   Building Health Score (Visualisierung)
   ===================================================== */
.bhs-section {
  padding: var(--section-y) 0;
  background: var(--c-bg-soft);
  color: var(--c-ink);
  position: relative;
  overflow: hidden;
}
/* Gebäude-Foto rechts, Verlauf von Creme (links) ins Bild (rechts) */
.bhs-grid-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--c-bg-soft) 0%, var(--c-bg-soft) 38%, rgba(247,245,239,0.85) 52%, rgba(247,245,239,0.45) 72%, rgba(247,245,239,0.25) 100%),
    url('assets/img/bhs-building.webp') center / cover no-repeat;
  pointer-events: none;
}
.bhs-section .container { position: relative; z-index: 1; }
.bhs-section .eyebrow { color: var(--c-primary-dark); }
.bhs-section .eyebrow::before { background: var(--c-primary-dark); }
.bhs-section h2 { color: var(--c-ink); }
.bhs-section .lead { color: var(--c-ink-60); }
.bhs-section .link-arrow { color: var(--c-primary-dark); }
.bhs-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 900px) {
  .bhs-grid { grid-template-columns: 1fr; }
  /* Mobil: Text liegt über dem Bild — Bild tönen + abdunkeln,
     Text weiß, damit er lesbar bleibt (analog Hero-Banner). */
  .bhs-grid-bg {
    background:
      linear-gradient(180deg, rgba(26,27,20,0.55) 0%, rgba(26,27,20,0.7) 55%, rgba(26,27,20,0.82) 100%),
      url('assets/img/bhs-building.webp') center / cover no-repeat;
    filter: grayscale(0.85) contrast(1.05) brightness(0.95);
  }
  .bhs-section h2 { color: #fff; }
  .bhs-section .lead { color: rgba(255,255,255,0.88); }
  .bhs-section .eyebrow { color: var(--c-primary); }
  .bhs-section .eyebrow::before { background: var(--c-primary); }
  .bhs-section .link-arrow { color: var(--c-primary); }
}

.bhs-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  padding: 30px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25);
  position: relative;
}
/* Eck-Marker für technischen Look */
.bhs-card::before, .bhs-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-primary-dark);
}
.bhs-card::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.bhs-card::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.bhs-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 22px;
}
.bhs-card-head .label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-ink-60);
  text-transform: uppercase;
}
.bhs-card-head .status {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  font-weight: 700;
}
/* === Großer Kreis-Gauge === */
.bhs-gauge-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 8px auto 26px;
}
.bhs-gauge {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.bhs-gauge-track {
  fill: none;
  stroke: rgba(0,0,0,0.10);
  stroke-width: 12;
}
.bhs-gauge-fill {
  fill: none;
  stroke: var(--c-primary-dark);
  stroke-width: 12;
  stroke-linecap: round;
  /* Umfang 2πr = 2π·86 ≈ 540.4 */
  stroke-dasharray: 540.4;
  stroke-dashoffset: 540.4;
  transition: stroke-dashoffset 1.8s var(--ease);
  filter: drop-shadow(0 0 4px rgba(168,176,62,0.4));
}
.bhs-card.in-view .bhs-gauge-fill {
  /* offset = 540.4 * (1 - value/100); für 88 => 540.4*0.12 ≈ 64.8 */
  stroke-dashoffset: 64.8;
}
.bhs-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bhs-gauge-num {
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--c-ink);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.bhs-gauge-of {
  font-size: 0.78rem;
  color: var(--c-ink-40);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}
/* === Mini-Ring-Metriken === */
.bhs-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--c-border);
}
@media (max-width: 480px) { .bhs-metrics { grid-template-columns: repeat(2, 1fr); } }
.bhs-metric {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bhs-mini {
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  margin-bottom: 8px;
}
.bhs-mini-track {
  fill: none;
  stroke: rgba(0,0,0,0.10);
  stroke-width: 6;
}
.bhs-mini-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  /* Umfang 2π·25 ≈ 157.1 */
  stroke-dasharray: 157.1;
  stroke-dashoffset: 157.1;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.bhs-mini-fill.ok { stroke: var(--c-primary-dark); }
.bhs-mini-fill.warn { stroke: #e0a23c; }
.bhs-metric .v {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.bhs-metric .l {
  font-size: 0.66rem;
  color: var(--c-ink-60);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* =====================================================
   Multi-Step-Quiz auf Kontaktseite
   ===================================================== */
.quiz {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 36px;
}
.quiz-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
}
.quiz-progress span {
  flex: 1;
  height: 4px;
  background: var(--c-border);
  border-radius: var(--radius);
  transition: background var(--d-base);
}
.quiz-progress span.done { background: var(--c-primary); }
.quiz-progress span.current { background: var(--c-ink); }

.quiz-step {
  display: none;
  animation: quizIn .35s var(--ease);
}
.quiz-step.active { display: block; }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.quiz-step h3 { font-size: 1.4rem; margin-bottom: 6px; }
.quiz-step p.help { font-size: 0.92rem; color: var(--c-ink-60); margin-bottom: 24px; line-height: 1.5; }

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.quiz-option {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: all var(--d-base) var(--ease);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-ink);
}
.quiz-option:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.quiz-option.selected { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.quiz-option .ic {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.quiz-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 12px;
  flex-wrap: wrap;
}
.quiz-back {
  background: transparent;
  border: 1px solid var(--c-border-strong);
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--c-ink-60);
}
.quiz-back:hover { color: var(--c-ink); border-color: var(--c-ink); }
.quiz-next {
  margin-left: auto;
  font-weight: 600;
}
.quiz-skip {
  font-size: 0.85rem;
  color: var(--c-ink-60);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.quiz-summary {
  background: var(--c-bg-soft);
  padding: 20px;
  border-radius: var(--radius);
  margin: 16px 0 24px;
  font-size: 0.92rem;
  color: var(--c-ink-60);
}
.quiz-summary strong { color: var(--c-ink); display: block; margin-bottom: 4px; }

/* =====================================================
   Reviews Live-Widget Slot
   ===================================================== */
.reviews-live {
  background: var(--c-bg-soft);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--c-border);
}
.reviews-live-head {
  text-align: center;
  margin-bottom: 32px;
}
.reviews-live-head .stars {
  font-size: 1.5rem;
  color: var(--c-star);
  letter-spacing: 4px;
  margin-bottom: 8px;
}
.reviews-live-head .rating {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.reviews-live-head .meta {
  font-size: 0.9rem;
  color: var(--c-ink-60);
  margin-top: 4px;
}
#trustindex-widget {
  min-height: 200px;
}
.reviews-fallback-note {
  background: #fff;
  border: 1px dashed var(--c-border-strong);
  padding: 24px;
  text-align: center;
  border-radius: var(--radius);
  color: var(--c-ink-60);
  font-size: 0.9rem;
  max-width: 600px;
  margin: 0 auto;
}
.reviews-fallback-note code {
  display: inline-block;
  background: var(--c-bg-soft);
  padding: 2px 6px;
  border-radius: var(--radius);
  font-size: 0.85em;
  color: var(--c-ink);
}


/* =====================================================
   .ref-card — verwendet komplette .team-card-12 Mechanik
   (Hover-Overlay, Photo, Info, Animation, a11y)
   ===================================================== */
.ref-card { position: relative; background: var(--c-paper, #fff); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
  transition: transform .35s ease, box-shadow .35s ease; cursor: pointer; outline: none; }
.ref-card:hover, .ref-card:focus-visible, .ref-card.is-open {
  transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.28); }
.ref-card:focus-visible { box-shadow: 0 0 0 3px var(--c-primary), 0 24px 48px -20px rgba(0,0,0,.28); }

.ref-card .photo {
  position: relative; aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #ece8df 0%, #d8d2c4 100%);
  display: grid; place-items: center;
  color: rgba(48, 50, 19, 0.35); overflow: hidden;
}
.ref-card .photo svg { width: 42%; height: 42%; stroke: currentColor; stroke-width: 1.4; fill: none; }
.ref-card .photo .ph-label {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(48, 50, 19, 0.55); text-align: center;
}
.ref-card .photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; display: block;
  transition: transform .55s ease, filter .35s ease;
}
.ref-card:hover .photo img, .ref-card:focus-visible .photo img, .ref-card.is-open .photo img {
  transform: scale(1.04); filter: brightness(0.55) grayscale(15%);
}
.ref-card .info { padding: 16px 18px 20px; text-align: center; }
.ref-card .info .name { font-size: 1rem; font-weight: 600; color: var(--c-ink); margin: 0 0 4px; letter-spacing: -0.01em; }
.ref-card .info .role { font-size: 0.8rem; color: var(--c-ink-60); letter-spacing: 0.02em; }

.ref-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, var(--c-olive, #303213) 0%, #1a1b14 100%);
  color: rgba(255,255,255,.92);
  padding: 22px 22px 100px;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; transform: translateY(8%);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.ref-card:hover .overlay, .ref-card:focus-visible .overlay, .ref-card.is-open .overlay {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.ref-card .overlay .ovl-role {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-primary); font-weight: 600; margin-bottom: 8px;
}
.ref-card .overlay .ovl-name { font-size: 1.05rem; font-weight: 600; color: #fff; margin: 0 0 10px; letter-spacing: -0.01em; }
.ref-card .overlay .ovl-meta {
  font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,.78); margin: 0 0 10px;
}
.ref-card .overlay .ovl-meta strong { color: rgba(255,255,255,.95); font-weight: 600; }
.ref-card .overlay .ovl-tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(195,204,86,.18); color: var(--c-primary);
  padding: 4px 10px; border-radius: var(--radius); margin-top: 6px; align-self: flex-start;
}

@media (hover: none) {
  .ref-card .photo::after {
    content: "Tippen für Details ↗";
    position: absolute; bottom: 12px; right: 12px;
    font-size: 0.66rem; color: rgba(48,50,19,.55);
    background: rgba(255,255,255,.7); backdrop-filter: blur(4px);
    padding: 4px 8px; border-radius: var(--radius); letter-spacing: 0.04em;
  }
}

/* Grid Container fuer Referenzobjekte */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin-top: 8px;
}
@media (max-width: 1100px) { .ref-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .ref-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 640px)  { .ref-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* Stadtteile-Block pro Stadt */
.city-districts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.city-districts .city-col {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
}
.city-districts .city-col h3 {
  font-size: 1rem; margin: 0 0 4px; color: var(--c-ink); letter-spacing: -0.01em;
}
.city-districts .city-col .city-meta {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-primary-dark); font-weight: 600; margin-bottom: 16px;
}
.city-districts .pill-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.city-districts .pill-list .pill {
  background: #f7f5ec;
  border: 1px solid var(--c-line);
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 0.84rem;
  color: var(--c-ink);
  transition: background .25s ease, color .25s ease;
}
.city-districts .pill-list .pill:hover { background: var(--c-primary); border-color: var(--c-primary); }

/* =====================================================
   Accessibility — Skip Link für Keyboard-User
   ===================================================== */
.skip-link:focus {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  background: var(--c-ink);
  color: var(--c-primary);
  padding: 12px 20px;
  border-radius: var(--radius);
  z-index: 9999;
  font-weight: 600;
  outline: 3px solid var(--c-primary);
}

/* =====================================================
   GRÜN-MODUL (.section-green) — radikales Dark-Green-Theme
   Macht eine Sektion dunkelgrün mit hellem Text & Lime-Akzent.
   Als Modifier auf .section / .section-s / .trust-strip setzen.
   ===================================================== */
.section-green {
  background: var(--c-ink) !important;
  color: #fff;
  position: relative;
}
.section-green::after { content: none; }

/* Überschriften & Eyebrows */
.section-green h1,
.section-green h2,
.section-green h3,
.section-green h4 { color: #fff; }
.section-green .eyebrow { color: var(--c-primary); }
.section-green .eyebrow::before { background: var(--c-primary); }
.section-green .lead,
.section-green .section-head p { color: rgba(255,255,255,0.72); }
.section-green > .container > p,
.section-green p { color: rgba(255,255,255,0.78); }

/* Service-Cards */
.section-green .services-grid {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.10);
}
.section-green .service-card { background: var(--c-ink); }
.section-green .service-card:hover { background: rgba(255,255,255,0.04); }
.section-green .service-card h3 { color: #fff; }
.section-green .service-card p { color: rgba(255,255,255,0.7); }
.section-green .service-icon {
  background: rgba(195,204,86,0.14);
  color: var(--c-primary);
}
.section-green .service-card:hover .service-icon {
  background: var(--c-primary);
  color: var(--c-ink);
}
.section-green .service-card .more { color: var(--c-primary); }
.section-green .service-card:hover .more { color: #fff; }

/* Method-Cards (5 Versprechen) — reduziert, lime/weiß auf grün */
.section-green .method-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.section-green .method-card:hover {
  transform: translateY(-6px);
  background: rgba(195,204,86,0.07);
  border-color: rgba(195,204,86,0.5);
}
.section-green .method-card .num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  text-transform: none;
}
.section-green .method-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 10px; }
.section-green .method-card .pay {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  font-style: normal;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.45;
}

/* Zahlen / Stats */
.section-green .stats-row {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.09);
}
.section-green .stat { background: var(--c-ink); }
.section-green .stat .num { color: #fff; }
.section-green .stat .num sup { color: var(--c-primary); }
.section-green .stat .lbl { color: var(--c-primary); }
.section-green .stat .desc { color: rgba(255,255,255,0.7); }

/* Testimonials */
.section-green .testimonial {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.section-green .testimonial p { color: rgba(255,255,255,0.85); }
.section-green .testimonial .name { color: #fff; }
.section-green .testimonial .meta { color: rgba(255,255,255,0.6); }
.section-green .testimonial .stars { color: var(--c-star); }

/* Reviews live */
.section-green .reviews-live,
.section-green .review-card {
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.section-green .review-card p,
.section-green .reviews-live p { color: rgba(255,255,255,0.82); }
.section-green .review-card .name,
.section-green .reviews-live .name { color: #fff; }

/* Trennlinien generisch */
.section-green hr,
.section-green .divider { border-color: rgba(255,255,255,0.12); }

/* Trust-Strip in grün */
.trust-strip.section-green { background: var(--c-ink) !important; }
.trust-strip.section-green .trust-label { color: var(--c-primary); }
.trust-strip.section-green .trust-sublabel { color: rgba(255,255,255,0.6); }
.trust-strip.section-green .trust-logos-track .logo img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.65;
}
.trust-strip.section-green .trust-logos-track .logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* CTA-Banner in grün */
.section-green .cta-banner {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
}
/* Haupt-Button lime statt weiß */
.section-green .cta-banner .btn-light {
  background: var(--c-primary);
  color: var(--c-ink);
  border-color: var(--c-primary);
}
.section-green .cta-banner .btn-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--c-ink);
}
/* Outline-Button: heller Text sichtbar machen */
.section-green .cta-banner .btn-ghost-light {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.section-green .cta-banner .btn-ghost-light:hover {
  background: var(--c-primary);
  color: var(--c-ink);
  border-color: var(--c-primary);
}

/* =====================================================
   Leistungen — "Notizblock"-Scroll-Reveal (grün + lime)
   Karten in breiten Reihen gestapelt, damit beim Scrollen
   wirklich EINE nach der anderen in den Blick kommt.
   ===================================================== */
.services-section .services-grid {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  overflow: visible;
  gap: 20px;
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  /* 3D-Bühne für den Aufklapp-Effekt */
  perspective: 2000px;
  perspective-origin: 50% 50%;
}
.services-section .service-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  padding: 34px 38px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  row-gap: 6px;
  align-items: start;
  transition:
    transform 0.5s cubic-bezier(0.22,1,0.36,1),
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
}
/* Icon spannt über beide Textzeilen links */
.services-section .service-card .service-icon {
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  margin-bottom: 0;
}
.services-section .service-card h3 { grid-column: 2; margin: 0 0 4px; }
.services-section .service-card p { grid-column: 2; margin: 0 0 14px; }
.services-section .service-card .more { grid-column: 2; }
@media (max-width: 600px) {
  .services-section .service-card {
    grid-template-columns: 1fr;
    padding: 28px 26px;
  }
  .services-section .service-card .service-icon { grid-row: auto; margin-bottom: 16px; }
  .services-section .service-card h3,
  .services-section .service-card p,
  .services-section .service-card .more { grid-column: 1; }
}

/* Reveal-Startzustand: Karte liegt nach hinten weggeklappt + abgesunken,
   wie eine noch nicht umgeblätterte Notizblock-Seite. Jede Karte wird
   EINZELN per JS-Observer getriggert (.flip-in), sobald sie beim Scrollen
   in den Blick kommt. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .services-section .service-card {
    opacity: 0;
    transform: translateY(64px) rotateX(-38deg) scale(0.95);
    transform-origin: 50% 100%;
    transition:
      opacity 0.6s var(--ease),
      transform 0.85s cubic-bezier(0.34,1.2,0.4,1);
    will-change: transform, opacity;
  }
  html.js-reveal .services-section .service-card.flip-in {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

/* Lime-Akzente auf grünem Grund */
.services-section .service-icon {
  position: relative;
  background: rgba(195,204,86,0.12);
  color: var(--c-primary);
  border: 1px solid rgba(195,204,86,0.28);
  border-radius: var(--radius);
  overflow: visible;
}
/* HSL-Markenelement: das Giebeldach aus dem Logo sitzt auf jedem Icon-Kasten */
.services-section .service-icon::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 7px;
  background: var(--c-primary);
  /* Dreieckiges Giebeldach */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Icons kantig: eckige Linienenden statt rund, passt zur HSL-Bau-Geometrie */
.services-section .service-icon svg {
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.8;
}
.services-section .service-card h3 { color: #fff; }
.services-section .service-card p { color: rgba(255,255,255,0.72); }
.services-section .service-card .more { color: var(--c-primary); }
.services-section .service-card .more::after { color: var(--c-primary); }

/* Premium-Hover: Karte hebt sich, Lime-Glow, Icon füllt sich */
.services-section .service-card:hover {
  background: rgba(195,204,86,0.07);
  border-color: rgba(195,204,86,0.55);
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}
.services-section .service-card:hover .service-icon {
  background: var(--c-primary);
  color: var(--c-ink);
  border-color: var(--c-primary);
}
.services-section .service-card:hover .more { color: #fff; }
.services-section .service-card:hover .more::after { transform: translateX(4px); }

/* =====================================================
   Universell kantig — HSL-Bau-Geometrie
   Alle Icon-Linien mit eckigen Enden statt rund.
   ===================================================== */
svg[stroke] {
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* Ausnahme: echte Kreis-Elemente (Dots, Spinner) dürfen rund bleiben */
.dot, .bhs-card-head .status { stroke-linecap: round; }

/* =====================================================
   Google-Reviews — horizontaler Drag-Slider, kantig
   ===================================================== */
.reviews-slider {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding-bottom: 18px;
  /* Scrollbar dezent */
  scrollbar-width: thin;
  scrollbar-color: rgba(195,204,86,0.4) transparent;
}
.reviews-slider.dragging { cursor: grabbing; scroll-snap-type: none; }
.reviews-slider::-webkit-scrollbar { height: 6px; }
.reviews-slider::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); }
.reviews-slider::-webkit-scrollbar-thumb { background: rgba(168,176,62,0.5); }
.reviews-slider::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }
.review-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
@media (max-width: 480px) { .review-card { flex: 0 0 82%; } }
.reviews-slider:not(.dragging) .review-card:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  border-left-color: var(--c-primary);
  box-shadow: 0 20px 44px -20px rgba(0,0,0,0.25);
}
/* Drag-Hinweis */
.reviews-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--c-ink-40);
  letter-spacing: 0.04em;
}
.reviews-hint svg { width: 18px; height: 18px; }
.review-stars {
  color: var(--c-star);
  font-size: 1rem;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.review-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-ink-80);
  margin: 0 0 24px;
  flex-grow: 1;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.review-avatar {
  width: 40px;
  height: 40px;
  background: var(--c-primary);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.review-meta { display: flex; flex-direction: column; line-height: 1.3; }
.review-meta strong { color: var(--c-ink); font-size: 0.92rem; }
.review-meta span { color: var(--c-ink-40); font-size: 0.78rem; }

/* btn-outline auf dunkelgrünem Grund: heller Text + lime Hover */
.section-green .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.section-green .btn-outline:hover {
  background: var(--c-primary);
  color: var(--c-ink);
  border-color: var(--c-primary);
}

/* Zahlen-Modul schließt eng an die 5 Versprechen an (gleicher grüner Grund) */
.stats-attached { padding-top: 0; }
.section-green .stat { padding: 32px 28px; }

/* =====================================================
   Leistungen — Sticky-Stack "Notizblock zum Blättern"
   Karten stapeln sich beim Scrollen übereinander.
   ===================================================== */
.services-stack {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  /* Kein perspective hier — würde sticky brechen */
}
.stack-card {
  position: sticky;
  top: 90px;            /* unter dem Header kleben */
  height: min(76vh, 620px);
  margin-bottom: 40px;
  /* Schrumpft beim Wegblättern von oben her */
  transform-origin: center top;
  will-change: transform, filter;
  border: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  overflow: hidden;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.25);
}
.stack-card-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  height: 100%;
}
.stack-text {
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--c-bg-soft);
  position: relative;
}
/* Leistungen-Seite (stack-card-lg): eigenes, großzügigeres Spacing —
   unabhängig von den kompakten Startseiten-Cards */
.stack-card-lg .stack-text { justify-content: center; }
.stack-card-lg .stack-num { margin-bottom: 16px; }
.stack-card-lg .stack-text h3 { margin-bottom: 16px; }
.stack-card-lg .stack-text p { margin-bottom: 24px; }
.stack-card-lg .stack-list { margin-top: 0; gap: 16px; }
.stack-card-lg .stack-text .stack-actions { margin-top: 48px; }
/* Button sitzt mittig im Raum zwischen Textblock-Ende und Card-Boden */
.stack-text .stack-actions {
  margin-top: 8px;
  margin-bottom: 0;
}
/* HSL-Dachmarke über der Nummer */
.stack-num {
  position: relative;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  display: inline-block;
}
.stack-num::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 2px;
  width: 22px;
  height: 9px;
  background: var(--c-primary);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.stack-text h3 {
  color: var(--c-ink);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin-bottom: 16px;
}
.stack-text p {
  color: var(--c-ink-60);
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 42ch;
}
.stack-text .more {
  color: var(--c-primary-dark);
  font-weight: 600;
  align-self: flex-start;
}
.stack-image {
  background-size: cover;
  background-position: center;
  position: relative;
}
/* feiner dunkler Verlauf an der Kante zum Text, damit der Übergang sauber ist */
.stack-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--c-bg-soft) 0%, transparent 12%);
}
@media (max-width: 760px) {
  .stack-card { height: auto; top: 80px; }
  .stack-card-inner { grid-template-columns: 1fr; }
  .stack-image { min-height: 220px; order: -1; }
  .stack-image::after { background: linear-gradient(0deg, var(--c-bg-soft) 0%, transparent 20%); }
}

/* =====================================================
   Einheitlicher vertikaler Rhythmus + dezente Modul-
   Trennung. Da die ganze Seite denselben dunklen Grund
   hat, markiert eine haarfeine Linie die Sektionsgrenzen
   und schafft Struktur ohne Farbwechsel.
   ===================================================== */
.guarantee-section,
.bhs-section,
.section,
.section-s,
.trust-strip {
  border-top: 1px solid rgba(0,0,0,0.07);
}
/* Keine Linie direkt nach dem Hero (Bildkante reicht) und
   keine zwischen bewusst zusammengehörigen Modulen (stats). */
.hero + *,
.stats-attached {
  border-top: none;
}

/* =====================================================
   Leistungen-Seite — größere Stack-Karten mit Bullet-Liste
   ===================================================== */
.stack-card-lg { height: min(86vh, 740px); }
.stack-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stack-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--c-ink-60);
}
.stack-list li strong { color: var(--c-ink); font-weight: 600; }
/* HSL-Dach-Bullet vor jedem Listenpunkt */
.stack-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 6px;
  background: var(--c-primary);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Auf der Leistungsseite Text-Spalte etwas breiter (mehr Inhalt) */
.services-section .stack-card-lg .stack-card-inner { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 760px) {
  .stack-card-lg { height: auto; }
  .services-section .stack-card-lg .stack-card-inner { grid-template-columns: 1fr; }
}

/* =====================================================
   Leistungen — schlanker Hero + smarte runde Einstieg-Pillen
   ===================================================== */
.page-hero-slim {
  padding: clamp(48px, 7vh, 84px) 0 clamp(36px, 5vh, 56px);
}
.page-hero-slim h1 { margin-bottom: 28px; }
/* Pillen direkt im Hero */
.pill-list-hero {
  gap: 10px;
  max-width: 820px;
}
/* Smarte, voll abgerundete Einstieg-Pillen (Ausnahme vom kantigen Look) */
.pill-list-hero .pill {
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg);
  color: var(--c-ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pill-list-hero .pill:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-ink);
  transform: translateY(-2px);
}

/* =====================================================
   Navigation in Inter (Header-Links, MENÜ-Button, Mobile-Nav)
   ===================================================== */
.nav a,
.menu-toggle-label,
.mobile-nav-list a,
.header-tel {
  font-family: 'Inter', var(--f-sans);
}
/* Menüpunkte nicht fett */
.nav a { font-weight: 500; }
.menu-toggle-label { font-weight: 500; }
.mobile-nav-list a { font-weight: 500; letter-spacing: -0.01em; }

/* =====================================================
   Stack-Card Aktionen — "Anfragen"-CTA + Mehr-erfahren-Link
   ===================================================== */
.stack-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.stack-cta {
  padding: 11px 40px;
  font-size: 0.9rem;
}
.stack-actions .more { margin: 0; }

/* =====================================================
   CTA mit Vollbild-Grünflächen-Hintergrund (Leistungsseite)
   ===================================================== */
.cta-garden-section {
  position: relative;
  background: var(--c-bg);
}
.cta-garden-section.cta-soft { background: var(--c-bg-soft); }
/* Innere Box transparent, damit das Sektionsbild durchscheint */
.cta-garden-section .cta-banner {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(8px, 2vw, 24px);
  padding-bottom: clamp(8px, 2vw, 24px);
}

/* =====================================================
   Zahlen-Block — eigenständig, mittig, normaler Abstand
   ===================================================== */
.stats-block {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  border-top: none;
}
.stats-block .stats-row {
  max-width: 1080px;
  margin: 0 auto;
}

/* =====================================================
   HSL Bau — kompaktes Modul, Bild rechts mit Verlauf
   ===================================================== */
.hslbau-section {
  position: relative;
  background: var(--c-bg);
  overflow: hidden;
  padding-top: clamp(72px, 9vw, 130px);
  padding-bottom: clamp(72px, 9vw, 130px);
}
.hslbau-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--c-bg) 0%, var(--c-bg) 40%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.4) 75%, rgba(255,255,255,0.2) 100%),
    url('assets/img/hsl-bau-image.webp') center / cover no-repeat;
  pointer-events: none;
}
.hslbau-section .container { position: relative; z-index: 1; }
.hslbau-inner { max-width: 680px; }
.hslbau-section .eyebrow { color: var(--c-primary-dark); }
.hslbau-section .eyebrow::before { background: var(--c-primary-dark); }
.hslbau-section .lead { color: var(--c-ink-60); }
.hslbau-section .lead strong { color: var(--c-ink); }
/* Leistungen als kompakte Pillen */
.hslbau-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.hslbau-tags a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  padding: 7px 14px 7px 16px;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.hslbau-tags a svg {
  width: 13px;
  height: 13px;
  opacity: 0.55;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.hslbau-tags a:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-ink);
  transform: translateY(-2px);
}
.hslbau-tags a:hover svg {
  opacity: 1;
  transform: translate(2px, -2px);
}
/* Stats kompakt in einer Reihe */
.hslbau-stats {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--c-border);
}
.hslbau-stats div { display: flex; flex-direction: column; }
.hslbau-stats strong {
  font-family: 'Inter', var(--f-sans);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-primary-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hslbau-stats sup { font-size: 0.5em; }
.hslbau-stats span {
  font-size: 0.74rem;
  color: var(--c-ink-60);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 6px;
}
.hslbau-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
}
@media (max-width: 760px) {
  .hslbau-bg {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.55) 0%, var(--c-bg) 70%),
      url('assets/img/hsl-bau-image.webp') center / cover no-repeat;
  }
  .hslbau-inner { max-width: 100%; }
}

/* =====================================================
   Kontaktformular (Leistungsseite)
   ===================================================== */
.contactform-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 860px) { .contactform-grid { grid-template-columns: 1fr; gap: 36px; } }
.contactform-intro { padding-top: 8px; }
.contactform-intro h2 { margin-bottom: 16px; }
.contactform-intro .eyebrow { margin-bottom: 14px; }
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 520px) { .cf-row { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; margin-bottom: 16px; }
.cf-row .cf-field { margin-bottom: 0; }
.cf-field label {
  font-size: 0.84rem;
  color: var(--c-ink-80);
  font-weight: 500;
  margin-bottom: 6px;
}
.cf-req { color: var(--c-primary-dark); }
.cf-field input,
.cf-field textarea {
  width: 100%;
  padding: 13px 22px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  transition: border-color var(--d-base), box-shadow var(--d-base);
}
.cf-field textarea { border-radius: var(--radius); padding: 14px 20px; }
.cf-field textarea { resize: vertical; min-height: 96px; }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--c-primary-dark);
  box-shadow: 0 0 0 3px rgba(195, 204, 86, 0.18);
}
.contactform button[type="submit"] { margin-top: 4px; }
/* Honeypot unsichtbar */
.cf-hp { position: absolute; left: -9999px; visibility: hidden; }

/* =====================================================
   Google Maps Embed (Kontaktseite)
   ===================================================== */
.map-embed {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
}
@media (max-width: 860px) {
  .map-embed, .map-embed iframe { min-height: 320px; }
}

/* =====================================================
   Kontaktseite — aufgeräumtes Grid
   ===================================================== */
.kontakt-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .kontakt-grid { grid-template-columns: 1fr; gap: 44px; } }
.kontakt-side .eyebrow { margin-bottom: 14px; }
.kontakt-side h2 { margin-bottom: 16px; }
.kontakt-side .lead { margin-bottom: 32px; }
/* Kontakt-Kanäle als Karten mit Icon */
.kontakt-channels { display: flex; flex-direction: column; gap: 12px; }
.kontakt-channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.kontakt-channel:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -24px rgba(0,0,0,0.3);
}
.kc-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--c-ink);
  display: grid;
  place-items: center;
}
.kc-icon svg { width: 20px; height: 20px; color: var(--c-primary); }
.kc-body { display: flex; flex-direction: column; }
.kc-body strong { font-size: 0.95rem; color: var(--c-ink); }
.kc-body span { font-size: 0.86rem; color: var(--c-ink-60); }
/* Meta-Infos */
.kontakt-meta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kontakt-meta > div { display: flex; flex-direction: column; gap: 3px; }
.km-address { display: flex; flex-direction: column; gap: 3px; transition: color 0.25s var(--ease); }
.km-address .km-value { transition: color 0.25s var(--ease); }
.km-address:hover .km-value { color: var(--c-primary-dark); }
.km-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-40);
}
.km-value { font-size: 0.92rem; color: var(--c-ink); }
.kontakt-side .socials { margin-top: 28px; }
/* Formular-Wrapper */
.kontakt-formwrap {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
}
/* Formular-Card auf Höhe der h2 ("Direkter Draht zu HSL") starten,
   nicht auf Höhe der Eyebrow darüber. Nur Desktop (2-spaltig). */
@media (min-width: 881px) {
  .kontakt-formwrap { margin-top: 42px; }
}
.cf-note { font-size: 0.82rem; color: var(--c-ink-60); margin: 16px 0 0; line-height: 1.5; }
.cf-status {
  margin-top: 18px;
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  border-left: 3px solid;
}
.cf-status-ok {
  background: var(--c-primary-soft);
  border-left-color: var(--c-primary-dark);
  color: var(--c-ink);
}
.cf-status-error {
  background: #fbecec;
  border-left-color: #c0392b;
  color: #7a241b;
}
.btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ============================================================
   IDENTITY-MODUL "Wer wir sind" — Haltung · Zahlen · Daten
   Großes interaktives Scroll-Erlebnis
   ============================================================ */
.identity-section { overflow: hidden; }

/* ---- TEIL 1: Große Haltungs-Card ---- */
.id-haltung-card {
  border-radius: var(--radius-l);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: clamp(32px, 5vw, 72px);
  margin-bottom: clamp(48px, 7vw, 96px);
}
.id-haltung-head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 56px); }
.id-haltung-head h2 { margin: 10px 0 16px; }
.id-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 72px);
}
@media (max-width: 720px) { .id-steps { grid-template-columns: 1fr; } }
.id-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
  /* Scroll-Startzustand */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--sn) * 0.1s);
}
.id-steps.in-view .id-step { opacity: 1; transform: translateY(0); }
.id-step-num {
  font-family: 'Inter', var(--f-sans);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--c-primary-dark);
  letter-spacing: -0.04em;
}
.id-step-body h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 8px; letter-spacing: -0.01em; }
.id-step-body p { color: var(--c-ink-60); line-height: 1.65; margin: 0; }

/* ---- TEIL 2: Zahlen als versetzte Cards ---- */
.id-stats { margin-bottom: clamp(48px, 7vw, 96px); }
.id-stat-head { text-align: center; max-width: 50ch; margin: 0 auto clamp(36px, 5vw, 56px); }
.id-stat-head h2 { margin-top: 10px; }

.id-stat-card {
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 56px);
  max-width: 680px;
  margin-bottom: clamp(20px, 3vw, 32px);
  /* Scroll-Startzustand */
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.id-stat-card.id-right { margin-left: auto;  transform: translateX(60px); }   /* kommt von rechts */
.id-stat-card.id-left  { margin-right: auto; transform: translateX(-60px); }  /* kommt von links */
.id-stat-card.in-view { opacity: 1; transform: translateX(0); }
.id-stat-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 30px 60px -34px rgba(168,176,62,0.5);
}
@media (max-width: 760px) {
  .id-stat-card { max-width: 100%; gap: 18px; padding: 24px; }
}
.id-stat-num {
  font-family: 'Inter', var(--f-sans);
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  line-height: 0.85;
  color: var(--c-primary-dark);
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.id-stat-prefix { font-size: 0.55em; font-weight: 700; }
.id-stat-suffix { font-size: 0.5em; font-weight: 700; margin-left: 0.04em; }
.id-stat-meta h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin-bottom: 6px; letter-spacing: -0.01em; }
.id-stat-meta p { color: var(--c-ink-60); line-height: 1.6; margin: 0; font-size: 0.96rem; }

/* ---- TEIL 3: Interaktive Scroll-Timeline ---- */
.id-timeline-wrap { }
.id-timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 8px;
}
.id-timeline-line {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--c-border);
  overflow: hidden;
}
.id-timeline-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-primary-dark), var(--c-primary));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.1s linear;
}
.id-tl-item {
  position: relative;
  padding: clamp(48px, 8vh, 96px) 0 clamp(48px, 8vh, 96px) clamp(36px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.3;
  transform: translateX(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.id-tl-item.active { opacity: 1; transform: translateX(0); }
.id-tl-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--c-bg);
  border: 2px solid var(--c-border-strong);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  z-index: 1;
}
.id-tl-item.active .id-tl-dot {
  border-color: var(--c-primary);
  background: var(--c-primary);
  box-shadow: 0 0 0 6px rgba(195,204,86,0.18);
}
.id-tl-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  margin-bottom: 4px;
}
.id-tl-value { display: block; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--c-ink); letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  .id-step, .id-stat-card { opacity: 1 !important; transform: none !important; }
  .id-tl-item { opacity: 1 !important; transform: none !important; }
  .id-timeline-fill { transform: scaleY(1); }
}

/* ============================================================
   EINZUGSGEBIET — Region in Zahlen: vertikale Fill-Timeline
   Cards füllen sich mit Lime, sobald der Scroll-Fill sie erreicht
   ============================================================ */
.region-timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding-left: clamp(36px, 5vw, 56px);
}
/* vertikale Linie + Lime-Fill */
.region-tl-line {
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--c-border);
  overflow: hidden;
}
.region-tl-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-primary-dark), var(--c-primary));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.1s linear;
}
/* Cards */
.region-card {
  border-radius: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: clamp(24px, 3.5vw, 38px) clamp(24px, 4vw, 44px);
  margin-bottom: clamp(20px, 3vw, 32px);
  min-height: 158px;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.region-card:last-child { margin-bottom: 0; }
/* Punkt auf der Linie */
.region-tl-dot {
  position: absolute;
  left: calc(clamp(36px, 5vw, 56px) * -1 + 7px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--c-bg);
  border: 2px solid var(--c-border-strong);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
  z-index: 1;
}
/* Aktiv-Zustand: Card füllt sich mit Lime */
.region-card.filled {
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 30px 60px -34px rgba(168,176,62,0.7);
}
.region-card.filled .region-tl-dot {
  border-color: var(--c-primary-dark);
  background: var(--c-primary-dark);
  box-shadow: 0 0 0 6px rgba(195,204,86,0.3);
}
/* Zahl */
.region-card-num {
  font-family: 'Inter', var(--f-sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  line-height: 0.9;
  color: var(--c-primary-dark);
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  min-width: clamp(2.4em, 18vw, 3em);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--ease);
}
.region-card.filled .region-card-num { color: var(--c-ink); }
.region-card-prefix { font-size: 0.5em; font-weight: 700; }
.region-card-suffix { font-size: 0.45em; font-weight: 700; margin-left: 0.04em; }
/* Text */
.region-card-body h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  transition: color 0.5s var(--ease);
}
.region-card-body p {
  color: var(--c-ink-60);
  line-height: 1.6;
  margin: 0;
  font-size: 0.96rem;
  transition: color 0.5s var(--ease);
}
.region-card.filled .region-card-body h3 { color: var(--c-ink); }
.region-card.filled .region-card-body p { color: rgba(26,27,20,0.8); }

@media (max-width: 560px) {
  .region-card { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; }
  .region-card-num { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .region-tl-fill { transform: scaleY(1); }
  .region-card.filled { background: var(--c-primary); }
}

/* ============================================================
   EINZUGSGEBIET — Interaktive Standort-Karte (locmap)
   Karlsruhe als Hub, Luftlinien, Punkte + Aufklapp-Cards
   ============================================================ */
.locmap {
  position: relative;
  max-width: 920px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  /* Bühne mit fester Höhen-Ratio, damit Punkte sauber sitzen */
  aspect-ratio: 5 / 4;
  min-height: 420px;
}
@media (max-width: 700px) { .locmap { aspect-ratio: 3 / 4; min-height: 520px; } }

/* Luftlinien */
.locmap-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.locmap-line {
  stroke: var(--c-primary-dark);
  stroke-width: 0.6;
  stroke-dasharray: 4 2.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  stroke-dashoffset: 120;
  transition: opacity 0.5s var(--ease);
}
.locmap.in-view .locmap-line {
  opacity: 0.55;
  animation: locmapDraw 1.1s var(--ease) forwards;
}
.locmap.in-view .locmap-line[data-line="0"] { animation-delay: 0.15s; }
.locmap.in-view .locmap-line[data-line="1"] { animation-delay: 0.30s; }
.locmap.in-view .locmap-line[data-line="2"] { animation-delay: 0.45s; }
@keyframes locmapDraw { to { stroke-dashoffset: 0; } }

/* Punkte */
.locmap-point {
  position: absolute;
  left: var(--px);
  top: var(--py);
  transform: translate(-50%, -50%) scale(0);
  width: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
  z-index: 2;
}
.locmap.in-view .locmap-point { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.locmap.in-view .locmap-point[data-point="0"] { transition-delay: 0.55s; }
.locmap.in-view .locmap-point[data-point="1"] { transition-delay: 0.70s; }
.locmap.in-view .locmap-point[data-point="2"] { transition-delay: 0.85s; }
.locmap.in-view .locmap-point.is-hub { transition-delay: 0.1s; }

.locmap-dot {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--c-bg);
  border: 3px solid var(--c-primary-dark);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.locmap-point.is-hub .locmap-dot {
  width: 26px; height: 26px;
  background: var(--c-primary-dark);
  box-shadow: 0 0 0 6px rgba(168,176,62,0.18);
}
/* Puls nur am Hub */
.locmap-point.is-hub .locmap-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 999px;
  border: 2px solid var(--c-primary-dark);
  animation: locmapPulse 2.4s ease-out infinite;
}
@keyframes locmapPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.6); opacity: 0; }
}
.locmap-point:hover .locmap-dot,
.locmap-point[aria-expanded="true"] .locmap-dot {
  transform: scale(1.25);
  background: var(--c-primary);
}
.locmap-pin-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  white-space: nowrap;
  background: var(--c-bg);
  padding: 2px 8px;
  border: 1px solid var(--c-border);
}
.locmap-point.is-hub .locmap-pin-label { color: var(--c-primary-dark); border-color: var(--c-primary); }

/* Aufklapp-Cards */
.locmap-cards { position: absolute; inset: 0; pointer-events: none; }
.locmap-card {
  border-radius: var(--radius);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(12px);
  width: min(340px, 88%);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-primary);
  padding: clamp(20px, 3vw, 28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  pointer-events: none;
  box-shadow: 0 30px 60px -30px rgba(26,27,20,0.3);
  z-index: 3;
}
.locmap-card.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.locmap-card-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-primary-dark); margin-bottom: 8px;
}
.locmap-card h3 { font-size: 1.5rem; margin-bottom: 4px; letter-spacing: -0.01em; }
.locmap-card-num {
  font-family: 'Inter', var(--f-sans);
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--c-primary-dark); letter-spacing: -0.04em; margin-bottom: 12px;
}
.locmap-card-num span { font-size: 0.5em; }
.locmap-card p { color: var(--c-ink-60); line-height: 1.6; margin: 0; font-size: 0.95rem; }

.locmap-hint {
  max-width: 680px;
  margin: clamp(32px, 5vw, 48px) auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--c-ink-60);
  line-height: 1.6;
}
.locmap-hint a { color: var(--c-ink); border-bottom: 1px solid var(--c-ink); font-weight: 500; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .locmap-line { opacity: 0.55 !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .locmap-point { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
  .locmap-point.is-hub .locmap-dot::after { animation: none; }
}

/* ============================================================
   EINZUGSGEBIET — District Heatmap-Cloud (gewichtet nach Dichte)
   ============================================================ */
.district-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 16px) clamp(10px, 1.6vw, 20px);
  max-width: 900px;
  margin: clamp(32px, 5vw, 56px) auto 0;
  line-height: 1;
}
.dc-tag {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  padding: 0.32em 0.62em;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  /* Scroll-Startzustand */
  opacity: 0;
  transform: translateY(8px);
}
.district-cloud.in-view .dc-tag { opacity: 1; transform: none; }

/* Größenstufen = Dichte */
.dc-xl {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  background: var(--c-primary-soft);
  color: var(--c-ink);
  border: 1px solid var(--c-primary);
}
.dc-l {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  background: var(--c-bg-soft);
  color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
}
.dc-m {
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  color: var(--c-ink);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
}
.dc-s {
  font-size: clamp(0.86rem, 1.1vw, 0.94rem);
  color: var(--c-ink-60);
  background: transparent;
  border: 1px solid var(--c-border);
}
.dc-tag:hover {
  transform: translateY(-1px);
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
}

/* Gestaffeltes Erscheinen (zufällig wirkende Verzögerung) */
.district-cloud.in-view .dc-tag:nth-child(1){transition-delay:.02s}
.district-cloud.in-view .dc-tag:nth-child(2){transition-delay:.10s}
.district-cloud.in-view .dc-tag:nth-child(3){transition-delay:.05s}
.district-cloud.in-view .dc-tag:nth-child(4){transition-delay:.14s}
.district-cloud.in-view .dc-tag:nth-child(5){transition-delay:.08s}
.district-cloud.in-view .dc-tag:nth-child(6){transition-delay:.18s}
.district-cloud.in-view .dc-tag:nth-child(7){transition-delay:.12s}
.district-cloud.in-view .dc-tag:nth-child(8){transition-delay:.22s}
.district-cloud.in-view .dc-tag:nth-child(9){transition-delay:.16s}
.district-cloud.in-view .dc-tag:nth-child(10){transition-delay:.26s}
.district-cloud.in-view .dc-tag:nth-child(11){transition-delay:.20s}
.district-cloud.in-view .dc-tag:nth-child(12){transition-delay:.30s}
.district-cloud.in-view .dc-tag:nth-child(13){transition-delay:.24s}
.district-cloud.in-view .dc-tag:nth-child(14){transition-delay:.34s}
.district-cloud.in-view .dc-tag:nth-child(15){transition-delay:.28s}
.district-cloud.in-view .dc-tag:nth-child(16){transition-delay:.38s}
.district-cloud.in-view .dc-tag:nth-child(17){transition-delay:.32s}
.district-cloud.in-view .dc-tag:nth-child(18){transition-delay:.42s}
.district-cloud.in-view .dc-tag:nth-child(19){transition-delay:.36s}
.district-cloud.in-view .dc-tag:nth-child(20){transition-delay:.46s}

/* Legende */
.dc-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  margin-top: clamp(28px, 4vw, 44px);
}
.dc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--c-ink-60);
}
.dc-legend-dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.dc-legend-high { background: var(--c-primary-soft); border: 1px solid var(--c-primary); }
.dc-legend-mid { background: var(--c-bg-soft); border: 1px solid var(--c-border-strong); }
.dc-legend-low { background: transparent; border: 1px solid var(--c-border); }

@media (prefers-reduced-motion: reduce) {
  .dc-tag { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   EINZUGSGEBIET — "Warum lokal": Cards gleiten von rechts ein
   ============================================================ */
.local-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(32px, 5vw, 56px);
}
@media (max-width: 820px) { .local-track { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }

.local-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: clamp(28px, 4vw, 40px);
  /* Animation 1:1 aus dem Standards-Modul: aus der Tiefe gekippt einfahren */
  opacity: 0;
  transform: perspective(1400px) translateY(46px) rotateX(-14deg) scale(0.96);
  transform-origin: center bottom;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  transition-delay: calc(var(--lc) * 0.14s);
}
.local-card.in-view {
  opacity: 1;
  transform: perspective(1400px) translateY(0) rotateX(0) scale(1);
}
.local-card:hover { border-color: var(--c-primary); box-shadow: 0 30px 60px -34px rgba(168,176,62,0.5); }

.local-icon {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.local-icon svg { width: 24px; height: 24px; color: var(--c-ink); }
.local-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin-bottom: 10px; letter-spacing: -0.01em; }
.local-card p { color: var(--c-ink-60); line-height: 1.6; margin: 0; font-size: 0.98rem; }

@media (prefers-reduced-motion: reduce) {
  .local-card { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   STARTSEITE — Statistiken als große Kreise (BHS-Stil)
   ============================================================ */
.stats-circles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 800px) { .stats-circles { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (max-width: 420px) { .stats-circles { grid-template-columns: 1fr; } }

.stat-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.stat-ring-wrap {
  position: relative;
  width: clamp(150px, 16vw, 200px);
  aspect-ratio: 1;
  margin-bottom: 24px;
}
.stat-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.stat-ring-track {
  fill: none;
  stroke: var(--c-border);
  stroke-width: 8;
}
.stat-ring-fill {
  fill: none;
  stroke: var(--c-primary-dark);
  stroke-width: 8;
  stroke-linecap: round;
  /* Umfang 2π·86 ≈ 540.4 */
  stroke-dasharray: 540.4;
  stroke-dashoffset: 540.4;
  transition: stroke-dashoffset 1.6s var(--ease);
}
/* Ring zeichnet sich beim Sichtbarwerden (ca. 78% Füllung für ein offenes, dynamisches Bild) */
.stats-circles.in-view .stat-ring-fill { stroke-dashoffset: 119; }

.stat-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-circle .stat-num {
  font-family: 'Inter', var(--f-sans);
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  color: var(--c-ink);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-circle .stat-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 8px;
}
.stat-circle .stat-desc {
  font-size: 0.92rem;
  color: var(--c-ink-60);
  line-height: 1.55;
  margin: 0;
  max-width: 24ch;
}
@media (prefers-reduced-motion: reduce) {
  .stat-ring-fill { stroke-dashoffset: 119; }
}

/* ============================================================
   ███ MOBILE OPTIMIZATIONS (≤768px) ███
   Zentraler Mobil-Block — überschreibt NIE Desktop.
   Build: V111
   ============================================================ */
@media (max-width: 768px) {

  /* --- Globaler Overflow-Schutz (fängt 1-3px Ausreißer ab) --- */
  html, body { overflow-x: clip; }

  /* --- Lange Links/URLs umbrechen (datenschutz, impressum) --- */
  a, p, li, td, .legal-content, .legal-content * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* --- Hero-Lead: Breite/Größe zähmen, nicht unter Chat-Button laufen --- */
  .hero-lead {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 100%;
  }

  /* ============================================================
     LOCMAP (Einzugsgebiet) — Karte ist auf Mobil unbrauchbar.
     Absolute Punkt-Karte ausblenden, Cards als vertikale Liste.
     ============================================================ */
  .locmap {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    max-width: 100%;
    margin-top: 32px;
  }
  /* Karten-Mechanik (Punkte, Linien) auf Mobil ausblenden */
  .locmap-lines,
  .locmap-point { display: none; }
  /* Cards: aus absolut → normaler Fluss, als gestapelte Liste */
  .locmap-cards {
    position: static;
    inset: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .locmap-card {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    box-shadow: none;
  }
  .locmap-hint { margin-top: 32px; }

  /* ============================================================
     ID-STATS (Über uns) — versetzte Cards ragen auf Mobil raus.
     Vollbreit, kein Links/Rechts-Versatz, immer sichtbar.
     ============================================================ */
  .id-stat-card,
  .id-stat-card.id-right,
  .id-stat-card.id-left {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none !important;
    opacity: 1 !important;
    min-height: 176px;
    align-items: center;
  }

  /* ============================================================
     METHOD-CARDS — auf Mobil einheitliche Höhe (waren je nach
     Textlänge 120 vs. 143px). min-height gleicht sie an.
     ============================================================ */
  .method-card { min-height: 148px; }

  /* ============================================================
     ABLAUF / TIMELINE-CARDS — auf Mobil einheitliche Höhe
     (waren je nach Textlänge 170 vs. 194px).
     ============================================================ */
  .timeline-card { min-height: 200px; }

  /* ============================================================
     STACK-CARDS (Leistungen/Startseite) — Sticky-Stacking-Animation
     auch auf Mobil. Damit man jede Card KOMPLETT sieht, bevor die
     nächste einfliegt:
       1) Card-Höhe auf den sichtbaren Raum begrenzen (zwischen
          Klebepunkt und unterer CTA-Leiste) → Button immer im Bild.
       2) Großer margin-bottom = lange Scroll-Strecke, in der die
          Card allein/komplett steht, bevor die nächste nachrückt.
     ============================================================ */
  .stack-card {
    position: sticky;
    top: 16px;
    /* passt zwischen Klebepunkt (16) und CTA-Leiste (~60) + Puffer */
    height: calc(100vh - 92px);
    max-height: 760px;
    margin-bottom: 70vh;     /* lange Strecke: Card bleibt lange allein sichtbar */
  }
  .services-stack .stack-card:last-child { margin-bottom: 24px; }

  /* Inhalt der langen Leistungs-Cards in die begrenzte Höhe bekommen:
     Bild kompakter, Innenabstände/Liste enger — damit Button reinpasst */
  .stack-card-lg .stack-image { min-height: 150px; max-height: 28vh; }
  .stack-card-lg .stack-text { padding: 20px clamp(20px,5vw,28px); }
  .stack-card-lg .stack-num { margin-bottom: 8px; }
  .stack-card-lg .stack-text h3 { margin-bottom: 8px; }
  .stack-card-lg .stack-text p { margin-bottom: 14px; }
  .stack-card-lg .stack-list { gap: 8px; margin-bottom: 14px; }
  .stack-card-lg .stack-text .stack-actions { margin-top: 12px; }
  /* Kein body padding-bottom (würde als weißer Streifen am Seitenende
     sichtbar) — stattdessen bekommt der dunkle Footer unten genug
     Padding, damit er bis hinter die CTA-Leiste reicht und sein
     Inhalt nicht verdeckt wird. So bleibt der Seitenfuß durchgehend dunkel. */
  .site-footer { padding-bottom: 84px; }
  html { background: var(--c-ink); }

  /* ============================================================
     AUTO-HIDE HEADER (2026 Best Practice für Mobil):
     Beim Runterscrollen ausblenden (volle Lesefläche), beim
     Hochscrollen sofort einblenden (Navigation immer griffbereit).
     Gesteuert per JS-Klasse .header-hidden. Desktop bleibt sticky.
     ============================================================ */
  .site-header.header-hidden {
    transform: translateY(-100%);
  }

  /* ============================================================
     HERO (Mobil) — statt dunklerem Overlay einfach einen anderen
     Bildausschnitt: die Fenster-Reflexion aus der Textzone schieben.
     ============================================================ */
  .hero {
    padding-top: clamp(120px, 16vh, 160px);
    padding-bottom: clamp(56px, 8vh, 84px);
    background-position: 78% 55%;
  }
  /* Fade weiter nach rechts: Text steht auf Mobil fast über die volle
     Breite, daher muss der dunkle Bereich breiter sein und später ausfaden */
  .hero::before {
    background: radial-gradient(ellipse 110% 80% at 35% 50%,
      rgba(4,7,7,0.90) 0%,
      rgba(4,7,7,0.80) 50%,
      rgba(4,7,7,0.55) 80%,
      rgba(4,7,7,0.30) 100%);
  }

  /* ============================================================
     PARTNER-LOGOS — auf Mobil kleiner, damit mehr gleichzeitig in
     der Laufband-Animation sichtbar sind.
     ============================================================ */
  .trust-logos-track { gap: 40px; padding-right: 40px; }
  .trust-logos-track .logo { height: 56px; }
  .trust-logos-track .logo img { max-height: 52px; }

}