/* ==========================================================================
   NDS Norddeutsche Sanierung – Design-System (Rebuild)
   ========================================================================== */

/* --- Lokale Schriften (aktiv seit 09.09.2026) -----------------------------
   Inter liegt als variable Schrift unter ../fonts/ und wird vom eigenen Server
   ausgeliefert. Kein Aufruf an Google, damit auch keine IP-Uebertragung an
   Dritte, das ist die datenschutzrechtlich saubere Variante.

   Eine einzige Datei deckt alle Staerken von 100 bis 900 ab (48 KB). Frueher
   war hier ein Block mit fuenf Einzeldateien vorgesehen, Google liefert fuer
   Inter inzwischen aber fuenfmal dieselbe variable Datei aus. Das haette
   236 KB gekostet, fuer exakt dasselbe Schriftbild.

   Lizenz: SIL Open Font License 1.1, Eigen-Hosting ausdruecklich erlaubt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

/* --- Design-Tokens ------------------------------------------------------- */
:root {
  --bg-0: #070707;
  --bg-1: #0c0c0c;
  --bg-2: #111;
  --bg-3: #161616;
  --bg-4: #1c1c1c;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.08);

  --border-weak: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #fff;
  --text-dim: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.48);
  --text-faint: rgba(255, 255, 255, 0.28);

  --accent: #ff6b1a;
  --accent-hover: #ff7d33;
  --accent-soft: rgba(255, 107, 26, 0.5);
  --accent-softer: rgba(255, 107, 26, 0.2);
  --accent-ghost: rgba(255, 107, 26, 0.08);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --container: 1240px;
  --container-narrow: 960px;
  --container-wide: 1400px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --t-fast: 0.15s ease;
  --t-med: 0.3s ease;
  --t-slow: 0.5s ease;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);

  --header-h: 58px;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  background: var(--bg-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-x: hidden;
  position: relative;
}
/* Frueher stand hier ab 760px ein body { min-width: 1100px }, gedacht als
   Apple-Pattern: lieber waagerecht schieben als die Schrift schrumpfen.
   Zusammen mit dem overflow-x: hidden zwei Zeilen darueber wurde daraus aber
   ein Abschneiden statt eines Schiebens: Auf jedem Geraet zwischen 760 und
   1100 Pixeln, also Tablets im Hochformat und praktisch jedem Handy im
   Querformat, lag der rechte Seitenrand unerreichbar ausserhalb des Bildes.
   Betroffen waren alle 35 Seiten. Ausserdem hat die Regel die bereits
   vorhandenen Haltepunkte bei max-width: 1100px ueberstimmt, die dadurch nie
   zur Geltung kamen. Entfernt am 09.09.2026, siehe FEHLER-LOGBUCH F303. */
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* --- Layout -------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 28px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 28px; }

.section { padding: 100px 0; position: relative; }
.section--tight { padding: 60px 0; }

.section-title { text-align: center; margin-bottom: 56px; }
.section-title h2 {
  font-size: 32px; font-weight: 800; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.section-title::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--accent); border-radius: 2px; margin: 16px auto 0;
}
.section-title p {
  margin-top: 20px; color: var(--text-muted); font-size: 15px;
  max-width: 620px; margin-left: auto; margin-right: auto;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; font-size: 14px; font-weight: 700;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #e55a0d);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 107, 26, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(255, 107, 26, 0.35); }

.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 7px 18px;
  font-weight: 700;
  font-size: 13px;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  isolation: isolate;
}
.btn-glass:hover { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.16); }

.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--accent-soft); }

/* ==========================================================================
   HOVER-EFFEKTE (systemweit wiederverwendbar)
   ========================================================================== */

/* .fx-shine – breiter, schneller, weicher Lichtschleier; nur vorwärts */
@keyframes fxShine {
  0%   { left: -140%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 150%;  opacity: 0; }
}
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -140%;
  width: 130%; z-index: 1; pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.08) 58%,
    transparent 70%,
    transparent 100%
  );
}
.fx-shine:hover::before { animation: fxShine 1.1s ease-out forwards; }
.fx-shine > * { position: relative; z-index: 2; }

/* .fx-blink – umrahmender pulsierender Glow (schmal, nicht weit rausfließend) */
@keyframes fxBlink {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 6px 1px rgba(255, 255, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 0 14px 2px rgba(255, 255, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}
.fx-blink { transition: transform var(--t-med), border-color var(--t-med); }
.fx-blink:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  animation: fxBlink 2s ease-in-out infinite;
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(7, 7, 7, 0.35);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--t-med), backdrop-filter var(--t-med), border-color var(--t-med);
}
.site-header.is-scrolled {
  background: rgba(7, 7, 7, 0.96);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--border);
}

/* Der Container ist normalerweise ein Block ohne eigene Hoehe. Im Header
   fuehrte das dazu, dass die Navigation nur so hoch war wie ihr groesstes
   Kind und oben klebte: 0 px Luft oben, 8 px unten. Mit voller Hoehe und
   align-items: center sitzt jetzt alles echt in der Mitte. */
.site-header .container {
  height: 100%;
  display: flex; align-items: center;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; width: 100%; gap: 20px;
  position: relative;
}
/* Hauptmenü auf Desktop im normalen Flex-Fluss: Logo links, Menü mittig
   durch space-between, CTA rechts. Kein absolute-Centering mehr — das
   führte bei knappen Breiten zur Überlappung zwischen Menü-Rand und
   Kontakt-Button. Flex schiebt die drei Bereiche garantiert auseinander. */
@media (min-width: 1101px) {
  .nav { gap: 32px; }
  .nav-menu { margin: 0 auto; }
}
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 100%; }
/* Die Datei hatte 41 % transparenten Rand, sichtbar waren von 40 px nur 23 px.
   Rand ist entfernt, deshalb steht hier jetzt die echte Marken-Hoehe. */
.nav-logo img { height: 46px; width: auto; display: block; }

.nav-link { font-size: 12.5px; padding: 6px 11px; }
.nav-link::after { bottom: 4px; left: 11px; right: 11px; }

.nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }

/* Menü-Link mit Slide-Underline (von links nach rechts „entwickeln") */
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  color: var(--text-dim);
  font-size: 13.5px; font-weight: 600;
  background: none; border: none; cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav-link::after {
  content: "";
  position: absolute; bottom: 2px; left: 12px; right: 12px;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover, .nav-item.is-open .nav-link { color: var(--text); }
.nav-link:hover::after, .nav-item.is-open .nav-link::after { transform: scaleX(1); }
.nav-link .chev { transition: transform var(--t-fast); opacity: 0.6; }
.nav-item.is-open .nav-link .chev { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 260px; margin-top: 0; padding-top: 10px;
  visibility: hidden; opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 9999;
}
.nav-item.is-open .nav-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }
.nav-dropdown-inner {
  background: rgba(20, 20, 20, 0.96);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 0; box-shadow: var(--shadow-lg);
}
.nav-dropdown a {
  display: block; padding: 10px 18px;
  color: var(--text-dim); font-size: 13px;
  border-left: 2px solid transparent;
  transition: all var(--t-fast);
}
.nav-dropdown a:hover {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--surface-hover);
}

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Alle drei Header-CTAs (Kontakt, Theme-Toggle, Mini-Hamburger) auf einheitliche
   Höhe 36px bringen, damit sie visuell exakt auf einer Linie sitzen. */
.nav-cta .btn {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}
.nav-toggle {
  display: none; background: none; border: none;
  color: var(--text); cursor: pointer; padding: 8px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px 0 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Bild wird im unteren Drittel sanft ausgedünnt und blendet auf bg-1 des Body aus
     – dadurch entsteht ein kantenfreier Übergang zum Zähler-Bereich */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, 0.75) 82%,
    rgba(0, 0, 0, 0.35) 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, 0.75) 82%,
    rgba(0, 0, 0, 0.35) 94%,
    transparent 100%
  );
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,7,7,0.55) 0%, rgba(7,7,7,0.15) 55%, rgba(7,7,7,0.3) 100%),
    linear-gradient(
      180deg,
      transparent 25%,
      rgba(12, 12, 12, 0.18) 55%,
      rgba(12, 12, 12, 0.5) 75%,
      rgba(12, 12, 12, 0.9) 88%,
      var(--bg-1) 95%
    );
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero-inner {
  max-width: 620px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 107, 26, 0.7);
}
.hero h1 {
  font-size: 72px; line-height: 0.95; font-weight: 900;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
/* Zeilenumbruch in der Hero-Ueberschrift, ohne das Wort zu zerschneiden.
   Frueher stand dort ein "Komplett-<br />sanierung": optisch richtig, im
   Textinhalt aber "Komplett-sanierung". Suchmaschinen und Vorlesewerkzeuge
   lesen genau diesen Textinhalt, das Hauptwort der Seite war damit kaputt.
   Jetzt macht der Umbruch das CSS, im Text steht das Wort am Stueck. */
.hero h1 .h1-zeile { display: block; }

.hero h1 .accent-line {
  display: block; width: 72px; height: 3px;
  background: var(--accent);
  margin: 18px 0 0;
  border-radius: 2px;
}
.hero-sub {
  font-size: 17px; color: rgba(255,255,255,0.72);
  line-height: 1.55; margin: 28px 0 36px; max-width: 520px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-trust { color: var(--text-muted); font-size: 13px; }
.hero-trust .accent { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   COUNTER-STRIP (zwischen Hero und Über uns)
   ========================================================================== */
.counter-section {
  /* Kein eigener Hintergrund – der Body bringt bereits var(--bg-1) mit.
     Dadurch entsteht keine horizontale Kante dort, wo der Zähler per
     margin-top: -60px in den Hero hochgezogen wird. Der Hero-Gradient
     blendet ungestört auf die identische Hintergrundfarbe aus. */
  background: transparent;
  padding: 80px 0 40px;
  position: relative;
  margin-top: -60px; z-index: 3;
}
.counter-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: 36px 20px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center;
  max-width: 720px; margin: 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.3);
}
.counter-item { text-align: center; padding: 0 24px; position: relative; }
.counter-item + .counter-item::before {
  content: "";
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 1px; background: var(--border);
}
.counter-num {
  font-size: 42px; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em; line-height: 1;
}
.counter-num .accent { color: var(--accent); }
.counter-label {
  margin-top: 10px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.16em;
  /* Auf einer Zeile halten, damit "Jahre Erfahrung" nicht umbrochen wird
     und alle drei Counter symmetrisch ausgerichtet sind */
  white-space: nowrap;
}

/* ==========================================================================
   ÜBER UNS
   ========================================================================== */
.about { background: var(--bg-1); }
.about-inner {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 80px; align-items: center;
}
.about-title {
  font-size: 36px; font-weight: 800; color: var(--text);
  text-transform: uppercase; margin-bottom: 12px;
}
.about-title::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 14px;
}
.about-text p {
  color: var(--text-dim); font-size: 15.5px; line-height: 1.8;
  margin: 20px 0;
}
.about-points {
  display: flex; flex-direction: column;
  gap: 16px; margin-top: 32px;
}
.about-point { display: flex; gap: 12px; align-items: flex-start; cursor: default; }
.about-point-ico {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); margin-top: 2px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.about-point:hover .about-point-ico {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 107, 26, 0.08);
}
.about-point-text strong { color: var(--text); font-weight: 700; font-size: 14.5px; display: block; margin-bottom: 2px; }
.about-point-text span { color: var(--text-muted); font-size: 13.5px; }

.about-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   IHR WEG ZUM ERGEBNIS (4 Schritte)
   ========================================================================== */
.steps { background: var(--bg-1); }
.steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative;
  max-width: 920px; margin: 0 auto;
}
.step-item {
  text-align: center; padding: 0 10px;
  position: relative;
}
/* Durchgezogene Verbindungslinie mit Abstand zu den Kreisen */
.step-item + .step-item::before {
  content: "";
  position: absolute;
  left: calc(-50% + 48px);
  right: calc(50% + 48px);
  top: 37px; height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.step-icon {
  width: 74px; height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005)),
    var(--bg-3);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); position: relative; z-index: 2;
  transition: transform var(--t-med), border-color var(--t-med);
}
/* Hover bringt nur einen sanften Lift + Border-Akzent.
   Der Lichtschleier kommt ueber die fx-shine-Klasse auf dem Icon
   (siehe HTML) - Trigger weiter unten greift auch beim Hover ueber
   die ganze step-item, nicht nur direkt auf dem Kreis. */
.step-item:hover .step-icon {
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.step-item:hover .step-icon.fx-shine::before {
  animation: fxShine 1.1s ease-out forwards;
}
.step-num {
  color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: 0.2em; margin-bottom: 6px;
}
.step-item h3 {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
}
.step-item p {
  color: var(--text-muted); font-size: 13.5px; line-height: 1.55;
  max-width: 200px; margin: 0 auto;
  min-height: 42px;  /* 2 Zeilen konstant */
}

/* ==========================================================================
   ZIELGRUPPEN (4 Karten)
   ========================================================================== */
.target-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.target-card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 360px;
  display: flex; flex-direction: column;
}
.target-ico {
  width: 40px; height: 40px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.target-card h3 {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 16px;
}
.target-list { display: flex; flex-direction: column; gap: 10px; }
.target-list li {
  display: flex; gap: 8px; align-items: flex-start;
  color: var(--text-muted); font-size: 13.5px; line-height: 1.55;
  /* Jeder Listenpunkt belegt so viel vertikalen Raum wie zwei Textzeilen.
     Dadurch sitzen die Häkchen an Position n auf allen vier Karten
     auf exakt derselben Höhe, unabhängig von der Textlänge. */
  min-height: 42px;
}
.target-list li svg { flex-shrink: 0; color: var(--accent); margin-top: 4px; }

/* ==========================================================================
   TRUST-LEISTE
   ========================================================================== */
.trust-bar {
  background: var(--bg-1);
  padding: 40px 0;
  border-top: 1px solid var(--border-weak);
  border-bottom: 1px solid var(--border-weak);
}
.trust-items {
  display: flex; justify-content: center; align-items: center;
  gap: 60px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
.trust-item svg { color: var(--text-faint); flex-shrink: 0; }

/* ==========================================================================
   LEISTUNGSSPEKTRUM (3 Cards)
   ========================================================================== */
.service-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.service-card {
  padding: 26px 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 200px;
  display: flex; flex-direction: column;
  cursor: pointer;
}
/* Etwas praesenter als frueher (war --text-muted bei 0.8 Deckkraft): ein Icon,
   das beim Ueberfahren gezeichnet wird, muss auch im Ruhezustand zu sehen sein.
   Der Ton bleibt neutral, Orange ist weiter dem Hover und den gezielten
   Akzenten vorbehalten. */
.service-card .service-icon {
  margin-bottom: 14px; color: var(--text-dim); opacity: 1;
  transition: color var(--t-med), transform var(--t-med), opacity var(--t-med);
  transform-origin: left center;
}
.service-card:hover .service-icon {
  color: var(--accent);
  opacity: 1;
  transform: scale(1.08);
}

/* --- Icon-Zeichenanimation (Ausloeser: Hover) ------------------------------
   Die Strich-Icons stehen im Ruhezustand fertig da und zeichnen sich neu,
   sobald jemand mit dem Zeiger ueber die Karte faehrt. Bis zum 09.09.2026 lief
   die Animation beim Hereinscrollen. Das hatte zwei Nachteile: Sie lief
   ungefragt bei jedem Vorbeiscrollen erneut, und sie lief genau dann, wenn der
   Blick noch gar nicht auf dem Icon war. Als Hover-Reaktion ist sie eine
   Antwort auf eine Handlung des Nutzers statt eines Selbstlaeufers.

   Grundlage ist pathLength="1" auf jedem Formteil, gesetzt von initIconDraw()
   in js/script.js. Dadurch laufen alle Teile eines Icons gleich schnell,
   unabhaengig von ihrer echten Konturlaenge, und sind gemeinsam fertig.
   Die Marker-Klassen .icon-draw und .icon-teil setzt dasselbe Skript, deshalb
   bleibt das Icon bei abgeschaltetem JavaScript einfach sichtbar stehen.

   Warum eine Klasse und kein Attributselektor [pathLength]: Der Browser
   normalisiert Attributnamen in Stylesheets zu Kleinschreibung, im SVG ist
   pathLength aber gross-klein-empfindlich. [pathLength] wuerde also zu
   [pathlength] und traefe nie ein SVG-Formteil. Klassen haben das Problem
   nicht. */
.icon-draw .icon-teil {
  /* Ruhezustand: durchgezogene Kontur. dasharray 1 entspricht bei pathLength 1
     der gesamten Konturlaenge, bei Versatz 0 ist also nichts ausgespart. */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Zeichnen beim Ueberfahren. backwards sorgt dafuer, dass waehrend der
   gestaffelten Wartezeit schon der Startwert gilt, sonst blitzte das fertige
   Icon vor dem Lauf noch einmal auf. Ohne forwards, damit nach dem Lauf wieder
   der Ruhezustand oben greift und das Icon gezeichnet stehen bleibt. */
.service-card:hover .icon-draw .icon-teil,
.step-item:hover .icon-draw .icon-teil {
  animation: iconDraw 0.75s cubic-bezier(0.65, 0, 0.35, 1) backwards;
  /* --i zaehlt die Formteile durch, gesetzt in initIconDraw().
     55 ms Versatz je Teil lassen das Icon entstehen statt aufblitzen. Kuerzer
     als bei der frueheren Scroll-Fassung, weil der Zeiger schon dort ist und
     eine lange Animation den Nutzer warten liesse. */
  animation-delay: calc(var(--i, 0) * 0.055s);
}
@keyframes iconDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Bewegung ist hier Schmuck, keine Information. Wer sie abbestellt hat,
   bekommt die fertigen Icons ohne Lauf. */
@media (prefers-reduced-motion: reduce) {
  .icon-draw .icon-teil { stroke-dasharray: none; stroke-dashoffset: 0; }
  .service-card:hover .icon-draw .icon-teil,
  .step-item:hover .icon-draw .icon-teil { animation: none; }
}

.service-card h3 {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
}
.service-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; flex: 1; }
.services-all { margin-top: 48px; text-align: center; }

/* ==========================================================================
   VORHER & NACHHER (2 Slider)
   ========================================================================== */
.ba-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1040px; margin: 0 auto;
}
.ba-slider {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  cursor: ew-resize; user-select: none;
  background: var(--bg-3);
}
.ba-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.ba-img--after { z-index: 1; }
.ba-img--before { z-index: 2; }
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 2px; background: rgba(255,255,255,0.8);
  z-index: 3; pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  color: #222;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 20px; letter-spacing: 2px;
  line-height: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  z-index: 4; pointer-events: none;
}

/* ==========================================================================
   REFERENZPROJEKTE (6 Cards, 2x3)
   ========================================================================== */
.proj-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1240px; margin: 0 auto;
}
.proj-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
}
.proj-hero {
  position: relative; aspect-ratio: 16 / 5;
  background: linear-gradient(135deg, var(--g1, #222), var(--g2, #333));
  display: flex; align-items: center; justify-content: center;
}
.proj-hero-placeholder {
  color: rgba(255,255,255,0.15);
  font-size: 13px; font-weight: 500;
  border: 1.5px dashed rgba(255,255,255,0.1);
  padding: 12px 20px; border-radius: 8px;
  letter-spacing: 0.04em;
}
.proj-badge {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.proj-body { padding: 14px 20px 16px; }
.proj-body h3 { color: var(--text); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.proj-tag {
  padding: 5px 11px; font-size: 11.5px; font-weight: 600;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.proj-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); font-size: 13px; font-weight: 700;
}
.proj-link svg { color: var(--accent); transition: transform var(--t-fast); }
.proj-card:hover .proj-link svg { transform: translateX(4px); }

/* ==========================================================================
   KUNDENSTIMMEN
   ========================================================================== */
.reviews-topline {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: -24px 0 40px;
}
.reviews-stars { color: #ffbe64; letter-spacing: 3px; font-size: 16px; }
.reviews-score { color: var(--text); font-size: 17px; font-weight: 700; }
.reviews-source { color: var(--text-muted); font-size: 14px; }
.reviews-sep { color: var(--text-faint); }
.reviews-link {
  color: var(--accent); font-size: 14px; font-weight: 600;
  display: inline-flex; gap: 6px; align-items: center;
  min-height: 24px; /* Mindest-Tippflaeche */
}
.reviews-link:hover { color: var(--accent-hover); }

.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1240px; margin: 0 auto;
}
.review-card {
  padding: 18px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  min-height: 130px;
}
.review-stars {
  color: #ffbe64; font-size: 15px; letter-spacing: 3px;
  margin-bottom: 12px;
}
.review-text {
  color: var(--text-dim); font-size: 15px; line-height: 1.55;
  font-style: italic; margin-bottom: 16px; flex: 1;
}
.review-meta { border-top: 1px solid var(--border-weak); padding-top: 12px; }
.review-name { color: var(--text); font-size: 14px; font-weight: 700; }
.review-source-label { color: var(--text-faint); font-size: 12px; margin-top: 3px; }

.review-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 40px;
}
.review-btn {
  width: 36px; height: 36px; background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.review-btn:disabled { opacity: 0.3; cursor: default; }
.review-btn:not(:disabled):hover { border-color: var(--accent-soft); color: var(--accent); }
.review-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--border-strong); border: none; padding: 0;
  cursor: pointer; transition: width var(--t-med), background var(--t-med);
}
.review-dot.is-active { width: 28px; background: var(--accent); }

/* ==========================================================================
   PARTNER-BANNER (endlos-scrollende Marquee)
   ========================================================================== */
.partners { background: var(--bg-1); }
.marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 18s linear infinite;
  align-items: center;
  /* Kein gap – jedes Item hat seinen eigenen margin-right, damit
     die Animation bei translateX(-50%) nahtlos umspringt. */
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  flex-shrink: 0; height: 64px;
  margin-right: 80px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.marquee-item img {
  max-height: 60px; max-width: 200px;
  width: auto; object-fit: contain;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 860px; margin: 0 auto;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q {
  width: 100%; padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; background: none; border: none; cursor: pointer;
  text-align: left; color: var(--text);
  font-weight: 600; font-size: 14.5px;
}
.faq-q .chev { transition: transform var(--t-med); flex-shrink: 0; color: var(--text-faint); }
.faq-item.is-open .faq-q .chev { transform: rotate(180deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.is-open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 22px 20px; }
.faq-a-inner::before {
  content: ""; display: block; height: 1px;
  background: var(--border-weak); margin-bottom: 14px;
}
.faq-a-inner p { color: var(--text-muted); font-size: 14px; line-height: 1.75; }

/* Extra-FAQ-Items (6 bis 10) sind standardmäßig eingeklappt und werden
   per „Mehr anzeigen"-Button eingeblendet. */
.faq-item--extra { display: none; }
.faq-list.is-expanded .faq-item--extra { display: block; }

.faq-toggle-wrap {
  display: flex; justify-content: center;
  margin-top: 20px;
}
.faq-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-dim);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.faq-toggle:hover {
  border-color: var(--accent-soft);
  color: var(--text);
  background: rgba(255, 107, 26, 0.06);
}
.faq-toggle-chev {
  transition: transform var(--t-med);
  color: var(--accent);
}
.faq-toggle.is-open .faq-toggle-chev { transform: rotate(180deg); }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact { position: relative; }
.contact::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(70%, 820px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  z-index: 2;
}
.contact::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 110px;
  background: radial-gradient(ellipse 42% 100% at 50% 0%, rgba(255, 107, 26, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.contact > .container { position: relative; z-index: 3; }

.contact-inner {
  display: grid; grid-template-columns: 1fr 1.15fr;
  /* 20px Spaltenabstand = gleicher Abstand wie zwischen den
     Google-Bewertungskarten, damit die Bürozeiten-Karte direkt
     an die Formular-Karte anschließt */
  column-gap: 20px;
  grid-template-areas:
    "title   ."
    "desc    form"
    "list    form"
    "hours   form";
  align-items: start;
}
.contact-info-title {
  grid-area: title;
  font-size: 32px; font-weight: 800; color: var(--text);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.contact-info-title::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 14px;
}
.contact-info-desc {
  grid-area: desc;
  color: var(--text-muted);
  max-width: 420px;
  margin-bottom: 36px;
}

.contact-list {
  grid-area: list;
  display: flex; flex-direction: column; gap: 22px;
}
.contact-item {
  display: flex; gap: 16px; align-items: center;
  padding: 0; background: none; border: none; border-radius: 0;
  color: var(--text-dim); cursor: pointer;
  transition: transform var(--t-fast);
}
.contact-item:hover { transform: translateX(3px); }
.contact-item-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.contact-item:hover .contact-item-icon {
  border-color: var(--accent-soft);
}
/* Das Zeichen im Kasten zieht beim Hover kurz an, der Kasten selbst bleibt
   ruhig stehen. So bekommt die Zeile Leben, ohne dass die Kontaktliste
   beim Ueberfahren springt. */
.contact-item-icon svg {
  transition: transform var(--t-med), color var(--t-fast);
}
.contact-item:hover .contact-item-icon svg {
  transform: scale(1.14);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover .service-icon,
  .contact-item:hover .contact-item-icon svg { transform: none; }
}
/* Alte WhatsApp-Farbvariante entfernt – Icon nutzt jetzt den Standardstil */
.contact-item-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.contact-item-label {
  display: block;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600;
}
.contact-item-value {
  display: block;
  font-size: 15px; color: var(--text); font-weight: 700;
  letter-spacing: 0.005em;
}

.contact-hours {
  grid-area: hours;
  margin-top: 32px;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  align-self: end;
  /* füllt die volle Breite der linken Spalte aus */
  width: 100%;
}
.contact-hours h4 {
  color: var(--text); font-size: 15px; font-weight: 700; margin-bottom: 16px;
}
.contact-hours-row {
  display: flex; justify-content: space-between;
  color: var(--text-dim); font-size: 14.5px; padding: 7px 0;
}
.contact-form-wrap {
  grid-area: form;
  display: flex; flex-direction: column;
  align-self: stretch;
}

/* Formular */
.form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex: 1;
  justify-content: flex-start;
}
.form .form-spacer { flex: 1; min-height: 4px; }
.form h3 { color: var(--text); font-size: 20px; font-weight: 700; }
.form > p { color: var(--text-muted); font-size: 14px; margin-bottom: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 13px 15px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-soft); background: var(--bg-4);
}
.form-textarea { resize: vertical; min-height: 100px; font-family: inherit; }
.form-select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  padding-right: 40px;
}
.form-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
}
/* Das Haekchen fuer die Einwilligung war 13 Pixel klein. Auf dem Handy ist das
   die wichtigste Pflicht-Interaktion des Formulars, deshalb auf 22 Pixel. */
.form-consent input[type="checkbox"] {
  margin-top: 2px; accent-color: var(--accent); flex-shrink: 0;
  width: 24px; height: 24px;
}
.form-consent a { color: var(--accent); text-decoration: underline; }
.form-success { display: none; text-align: center; padding: 36px 20px; }
.form-success.is-visible { display: block; }
.form-success-icon { font-size: 40px; color: var(--accent); margin-bottom: 10px; }
.form-success h3 { color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.form-success p { color: var(--text-muted); font-size: 14px; }

/* --- Form-Felder mit sichtbaren Labels (Accessibility) -------------------- */
.form-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.form-label {
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.02em;
}
.form-label .sr-only,
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.form-intro {
  color: var(--text-muted); font-size: 13px; margin-bottom: 4px;
}
.form-honeypot {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.form-error {
  background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.3);
  color: #fca5a5; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  line-height: 1.5;
}
[data-theme="light"] .form-error {
  background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.4);
  color: #b91c1c;
}

/* Globaler Fokus-Indikator (BFSG-Pflicht: sichtbar für alle interaktiven Elemente) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Im Header: Glass-Buttons + Theme-Toggle haben eigene visuell deutliche Border,
   da reicht ein dezenter Outline-Ring statt der globalen 2px-Linie */
.site-header :where(a, button):focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 1px;
}
[data-theme="light"] .site-header :where(a, button):focus-visible {
  outline-color: rgba(0, 0, 0, 0.5);
}

/* --- Zielgruppen-Modal --------------------------------------------------- */
.zg-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.zg-modal[hidden] { display: none !important; }
.zg-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: zgBackdropIn 0.2s ease-out;
}
[data-theme="light"] .zg-modal-backdrop { background: rgba(20, 20, 20, 0.48); }
.zg-modal-content {
  position: relative; z-index: 2;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 38px 40px 32px;
  max-width: 540px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: zgModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .zg-modal-content {
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(20, 20, 20, 0.18);
}
@keyframes zgBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zgModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .zg-modal-backdrop, .zg-modal-content { animation: none; }
}
.zg-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 1px solid transparent; background: transparent;
  font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--text-muted);
  border-radius: 10px;
  transition: background var(--t-fast), color var(--t-fast);
}
.zg-modal-close:hover { background: var(--surface); color: var(--text); }
.zg-modal-title {
  font-size: 24px; font-weight: 800; color: var(--text);
  margin: 0 0 22px; padding-right: 40px;
  line-height: 1.25;
}
.zg-modal-list {
  list-style: none; padding: 0; margin: 0 0 28px;
}
.zg-modal-list li {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
  color: var(--text-dim); font-size: 15px; line-height: 1.55;
}
.zg-modal-list li:last-child { margin-bottom: 0; }
.zg-modal-list svg {
  flex-shrink: 0; color: var(--accent);
  margin-top: 3px;
}
.zg-modal-cta { display: flex; justify-content: center; }
.zg-modal-cta .btn { padding-inline: 28px; }
@media (max-width: 480px) {
  .zg-modal { padding: 12px; }
  .zg-modal-content { padding: 30px 22px 24px; border-radius: 14px; }
  .zg-modal-title { font-size: 20px; padding-right: 36px; margin-bottom: 18px; }
  .zg-modal-list li { font-size: 14.5px; }
}

/* Skip-Link (Accessibility — Pflicht für Tastatur-Navigation, BFSG) */
.skip-link {
  position: absolute; top: -100px; left: 8px;
  z-index: 9999;
  background: var(--accent); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid #fff; outline-offset: 2px;
}

/* ==========================================================================
   FAB (WhatsApp + Chatbot, fixiert bottom-right)
   ========================================================================== */
.fab-stack {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 900;
}
.fab {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.5); }
.fab--whatsapp { background: #25D366; color: #fff; }
.fab--whatsapp:hover { background: #1ebe5a; }
.fab--bot {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
}

/* ==========================================================================
   CHATBOT
   ========================================================================== */

/* Bubble (Teaser) */
.chatbot-bubble {
  position: fixed;
  right: 82px; bottom: 50px;
  z-index: 899;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 14px 40px 14px 16px;
  min-width: 240px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 30px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  animation: bubbleIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.1);
}
.chatbot-bubble[hidden] { display: none; }
.chatbot-bubble::after {
  content: "";
  position: absolute; right: -7px; bottom: 18px;
  width: 14px; height: 14px;
  background: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transform: rotate(-45deg);
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chatbot-bubble-open {
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; text-align: left; display: block; width: 100%;
  font: inherit; color: inherit;
}
.chatbot-bubble-title { display: block; color: var(--text); font-size: 14px; font-weight: 700; }
.chatbot-bubble-hint  { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.chatbot-bubble-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  color: var(--text-faint); font-size: 18px;
  line-height: 1; cursor: pointer;
  transition: color var(--t-fast);
}
.chatbot-bubble-close:hover { color: var(--text); }

/* Panel */
.chatbot-panel {
  position: fixed;
  right: 20px; bottom: 80px;
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  z-index: 950;
  display: flex; flex-direction: column;
  background: rgba(40, 40, 40, 0.55);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform-origin: bottom right;
  animation: panelIn 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.chatbot-panel[hidden] { display: none; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chatbot-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-weak);
}
.chatbot-avatar {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chatbot-header-text { flex: 1; }
.chatbot-header-title { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.2; }
.chatbot-status {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted); font-size: 11.5px; margin-top: 1px;
}
.chatbot-status::before {
  content: ""; width: 7px; height: 7px;
  border-radius: 50%; background: #25D366;
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.6);
}
.chatbot-close {
  width: 28px; height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.chatbot-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.chatbot-scroll {
  flex: 1 1 auto;
  min-height: 0;          /* nötig, damit flex-child tatsächlich scrollen kann */
  max-height: 55vh;        /* Panel bleibt kompakt, Verlauf scrollt intern */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.chatbot-scroll::-webkit-scrollbar { width: 6px; }
.chatbot-scroll::-webkit-scrollbar-track { background: transparent; }
.chatbot-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}
.chatbot-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.chatbot-greeting-box {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px; line-height: 1.45;
  margin-bottom: 8px;
}
.chatbot-section-label {
  color: var(--text-muted);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.chatbot-direct-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: 13px; font-weight: 700;
  transition: border-color var(--t-fast), background var(--t-fast);
  margin-bottom: 6px;
}
.chatbot-direct-btn:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.05); }
.chatbot-direct-btn--primary { border-color: var(--border-strong); }
.chatbot-direct-btn--primary:hover { background: rgba(255, 255, 255, 0.06); }
.chatbot-direct-btn svg { color: var(--text-dim); flex-shrink: 0; }

.chatbot-messages {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 8px;
}
.chatbot-messages:empty { display: none; }
.chatbot-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.55;
  max-width: 88%;
}
.chatbot-msg--bot {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.chatbot-msg--bot .chatbot-link,
.chatbot-msg--user .chatbot-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color var(--t-fast);
}
.chatbot-msg .chatbot-link:hover { color: #fff; }
.chatbot-msg--user {
  background: var(--accent-ghost);
  color: var(--text);
  border: 1px solid var(--accent-softer);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

.chatbot-input {
  display: block; width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: 12.5px;
  outline: none;
  margin-bottom: 8px;
  transition: border-color var(--t-fast);
}
.chatbot-input::placeholder { color: var(--text-faint); }
.chatbot-input:focus { border-color: var(--accent-soft); }

.chatbot-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chatbot-quick button {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px; font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.chatbot-quick button:hover { border-color: var(--accent-soft); background: rgba(255, 255, 255, 0.06); }

@media (max-width: 480px) {
  .chatbot-panel { right: 10px; left: 10px; width: auto; bottom: 72px; }
  .chatbot-bubble { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-0);
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 13px;
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer-left { color: var(--text-muted); }
.footer-social { display: flex; gap: 12px; align-items: center; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); transition: color var(--t-fast), border-color var(--t-fast);
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent-soft); }
.footer-links { display: flex; gap: 24px; }
/* Die Fusszeilen-Links waren nur 19 Pixel hoch und damit auf dem Handy schwer
   zu treffen. Das Polster hebt die Tippflaeche auf die geforderten 24 Pixel,
   der negative Aussenabstand haelt die Zeile optisch an ihrem Platz. */
.footer-links a {
  color: var(--text-muted); transition: color var(--t-fast);
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 3px 0; margin: -3px 0;
}
.footer-links a:hover { color: var(--text); }

/* ==========================================================================
   REVEAL-ANIMATIONEN
   ========================================================================== */
.js-on .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.js-on .reveal.from-left  { transform: translateX(-60px); }
.js-on .reveal.from-right { transform: translateX(60px); }
.js-on .reveal.is-visible { opacity: 1; transform: translate(0, 0); }

/* ==========================================================================
   SUB-PAGES (Impressum/Datenschutz)
   ========================================================================== */
.subpage-header {
  position: relative; padding: 130px 0 50px;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-2));
}
.subpage-header::after {
  content: ""; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
}
.subpage-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  margin-bottom: 24px; transition: color var(--t-fast);
  /* 21 Pixel hoch waren zu wenig zum Treffen, das Polster bringt sie auf 24. */
  min-height: 24px; padding: 2px 0;
}
.subpage-back:hover { color: var(--accent); }
.subpage-header h1 {
  font-size: 40px; font-weight: 800; color: var(--text);
  margin-bottom: 10px;
}
.subpage-header p { color: var(--text-muted); font-size: 15px; max-width: 600px; }

/* --- Coming-Soon-Sektion (z. B. Referenzprojekte in Vorbereitung) --------- */
.coming-soon {
  max-width: 720px; margin: 0 auto; text-align: center;
  padding: 24px 16px;
}
.coming-soon-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--accent);
  margin-bottom: 24px;
}
.coming-soon h2 {
  font-size: 28px; font-weight: 800; color: var(--text);
  margin-bottom: 18px; line-height: 1.25;
}
.coming-soon-lead {
  color: var(--text-dim); font-size: 16px; line-height: 1.7;
  margin-bottom: 18px;
}
.coming-soon-sub {
  color: var(--text-muted); font-size: 14.5px; line-height: 1.7;
  margin-bottom: 28px;
}
.coming-soon-cta {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
@media (max-width: 480px) {
  .coming-soon h2 { font-size: 22px; }
  .coming-soon-lead { font-size: 15px; }
  .coming-soon-cta { width: 100%; flex-direction: column; }
  .coming-soon-cta .btn { width: 100%; }
}

.legal { background: var(--bg-1); padding: 60px 0 100px; }
.legal-content { color: var(--text-dim); line-height: 1.8; font-size: 14.5px; }
.legal-content h2 { color: var(--text); font-size: 20px; font-weight: 700; margin: 36px 0 14px; }
.legal-content h3 { color: var(--text); font-size: 16px; font-weight: 700; margin: 24px 0 10px; }
.legal-content p, .legal-content ul { margin-bottom: 14px; }
.legal-content ul { padding-left: 22px; list-style: disc; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   PROJEKT-DETAILSEITEN (Blog-Stil: Text + Bild im Wechsel)
   ========================================================================== */

/* Projekt-Hero: großer Gradient-Banner mit Kategorie, Titel und Meta-Tags */
.project-hero {
  position: relative;
  padding: 140px 0 80px;
  min-height: 340px;
  display: flex; align-items: flex-end;
  /* background wird inline gesetzt (pro Projekt eigene Farben) */
}
.project-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.project-hero .container { position: relative; z-index: 1; }
.project-hero-badge {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 6px 16px;
  color: var(--text);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.project-hero-title {
  font-size: 48px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 820px;
}
.project-hero-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.project-hero-meta .proj-tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-dim);
}

/* Volle-Breite-Bild-Sektion zwischen Textblöcken */
.project-image-full {
  background: var(--bg-1);
  padding: 40px 0;
}
.project-image-full--dark { background: var(--bg-2); }
.project-image-wrap {
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: var(--container);
  margin: 0 auto;
}
.project-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Text-Block für Projekte (einspaltig, max-width für Lesbarkeit) */
.project-text-block {
  max-width: 780px;
  margin: 0 auto;
}

/* „Alle Projekte ansehen"-Button unter der 3er-Projektvorschau auf Index */
.projects-all-btn {
  margin-top: 48px;
  display: flex; justify-content: center;
}

/* ==========================================================================
   KATEGORIE-HUB-SEITEN (Sanierung, Bäder, Großprojekte, Zielgruppen, Kooperation)
   ========================================================================== */

.category-grid-section {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
.category-grid-section .service-grid {
  row-gap: 22px;
}

/* Service-Card als klickbarer Link (ohne Unterstreichung) */
a.service-card {
  text-decoration: none;
  color: inherit;
}

/* „Mehr erfahren"-Pfeil am Ende der Karte */
.service-card-more {
  margin-top: 18px;
  display: flex; align-items: center; gap: 6px;
  color: var(--text);
  font-size: 13px; font-weight: 700;
}
.service-card-more svg {
  color: var(--accent);
  transition: transform var(--t-fast);
}
.service-card:hover .service-card-more svg { transform: translateX(4px); }

/* ==========================================================================
   SERVICE-DETAIL-SEITE (Unterseiten der Dienstleistungen)
   ========================================================================== */

/* Zurück-Link oberhalb der Eyebrow im Service-Hero (sitzt im .hero-inner) */
.hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
  transition: color var(--t-fast), transform var(--t-fast);
  /* Versale Kurzschrift misst nur 17 Pixel Hoehe, zum Antippen zu wenig. */
  min-height: 24px; padding: 3px 0;
}
.hero-back:hover { color: var(--accent); transform: translateX(-2px); }
.hero-back svg { flex-shrink: 0; }

/* Hero-Banner mit großem Bild (21:9, randlos rechts raus) – für Services
   mit eigenem Hero-Foto. Services ohne Foto nutzen den vorhandenen
   .subpage-header von Impressum/Datenschutz. */
.svc-hero {
  position: relative;
  padding-top: 80px;                    /* Abstand unter fixem Header */
  background: var(--bg-1);              /* einheitlich mit den Folge-Sektionen */
}
.svc-hero-wrap {
  padding-right: max(28px, calc((100vw - var(--container)) / 2 + 28px));
}
.svc-hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  overflow: hidden;
  border: 1px solid var(--border-weak);
  border-left: none;
}
.svc-hero-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.svc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.4) 25%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.25) 100%);
}
.svc-hero-content {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start;
  padding: clamp(28px, 5%, 52px);
  padding-left: max(28px, calc((100vw - var(--container)) / 2 + 28px));
}
.svc-hero-text { max-width: 520px; }
.svc-hero-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  color: var(--text-dim);
  font-size: 12px; font-weight: 700;
  margin-bottom: 18px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.svc-hero-back:hover { color: var(--text); border-color: var(--border-strong); }
.svc-hero-title {
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.svc-hero-title::after {
  content: "";
  display: block;
  width: 44px; height: 2px;
  background: var(--accent-soft);
  margin: 12px 0;
  border-radius: 2px;
}
.svc-hero-sub {
  color: var(--text-dim);
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.65;
}

/* Zwei-Spalten-Blöcke (Intro + Vorteile) */
.svc-block {
  padding: 80px 0;
}
/* Service-Detailseiten sollen ueber alle Sektionen hinweg den gleichen
   Hintergrund haben - keine sichtbaren Stufen zwischen Hero, Intro,
   Vorteile, Vorher/Nachher und CTA. Greift in beiden Themes. */
.svc-block--intro    { background: var(--bg-1); }
.svc-block--benefits { background: var(--bg-1); }

.svc-block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
/* Reverse-Layout: Bild links, Text rechts (nur Desktop).
   Auf Mobil greift das einspaltige Layout weiter unten, dort bleibt
   die DOM-Reihenfolge (Text zuerst) für besseren Lesefluss.
   `grid-auto-flow: dense` ist Pflicht, weil sonst der Text (grid-column: 2)
   die Reihe für das Bild blockiert und das Bild in eine zweite Reihe rutscht
   (diagonal versetzt). Auf Mobil wird beides zurückgesetzt. */
.svc-block--reverse .svc-block-grid { grid-auto-flow: dense; }
.svc-block--reverse .svc-block-grid > .reveal.from-left  { grid-column: 2; grid-row: 1; }
.svc-block--reverse .svc-block-grid > .reveal.from-right { grid-column: 1; grid-row: 1; }
.svc-block-title {
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.2;
}
.svc-block-title--upper { text-transform: uppercase; letter-spacing: 0.02em; }
.svc-block-title::after {
  content: "";
  display: block;
  width: 50px; height: 2px;
  background: var(--accent-soft);
  margin: 14px 0 22px;
  border-radius: 2px;
}
.svc-block-lead {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.85;
}
.svc-block-lead--muted {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* 4:3-Bild-Container neben Text */
.svc-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-3);
}
.svc-image img { width: 100%; height: 100%; object-fit: cover; }
.svc-image--placeholder {
  background: rgba(255, 255, 255, 0.015);
  border: 1.5px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
}
.svc-image-placeholder-label {
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Vorteile-Liste (Häkchen-Punkte) */
.svc-benefit-list {
  display: flex; flex-direction: column; gap: 14px;
}
.svc-benefit-item {
  display: flex; gap: 12px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
}
.svc-benefit-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 2px;
  transition: color var(--t-fast);
}
.svc-benefit-item:hover svg {
  color: var(--accent);
}

/* Vorher/Nachher-Sektion auf Detailseite – nutzt bestehende .ba-slider mit
   neutralem (weißem) Handle und Knob, Knob etwas kleiner als auf der Hauptseite. */
.svc-ba {
  padding: 80px 0;
  background: var(--bg-1);
}
.svc-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.svc-ba-grid--single {
  grid-template-columns: 1fr;
  max-width: 820px;
}
.svc-ba-grid .ba-slider { aspect-ratio: 16 / 9; }
.svc-ba-grid .ba-knob {
  width: 38px; height: 38px;
  font-size: 17px;
}

/* CTA-Abschluss am Ende der Detailseite */
.svc-cta {
  position: relative;
  padding: 80px 0;
  background: var(--bg-1);
}
.svc-cta::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.18) 70%, transparent);
  box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.55);
}
.svc-cta::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent);
  pointer-events: none;
}

.svc-cta-inner {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 0 28px;
  z-index: 1;
}
.svc-cta-inner h3 {
  font-weight: 800; font-size: 24px;
  color: var(--text);
  margin-bottom: 14px;
}
.svc-cta-inner p {
  color: var(--text-muted);
  font-size: 14.5px; line-height: 1.7;
  margin-bottom: 28px;
}
.svc-cta-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-menu.is-open {
    display: flex;
    position: absolute;
    top: calc(var(--header-h) + 0px);
    left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    gap: 2px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    z-index: 999;
  }
  .nav-menu.is-open .nav-link { padding: 12px 8px; font-size: 14px; }
  .nav-menu.is-open .nav-dropdown { display: none; }
}
@media (max-width: 1040px) {
  .nav-menu { gap: 0; }
  .nav-link { font-size: 12.5px; padding: 8px 8px; }
  .hero h1 { font-size: 54px; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .steps-grid, .target-grid { grid-template-columns: 1fr 1fr; }
  .service-grid, .proj-grid, .review-grid { grid-template-columns: 1fr 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .svc-block-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Auf Mobil: Reverse-Overrides neutralisieren, damit Text oben + Bild
     unten stehen (DOM-Reihenfolge, Lesefluss). */
  .svc-block--reverse .svc-block-grid > .reveal.from-left,
  .svc-block--reverse .svc-block-grid > .reveal.from-right {
    grid-column: auto;
    grid-row: auto;
  }
  .svc-ba-grid { grid-template-columns: 1fr; }
  .contact-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "desc"
      "list"
      "form"
      "hours";
    row-gap: 24px;
  }
  /* Buerozeiten-Karte rueckt naeher an das Formular: halbiert den
     Abstand zwischen "Kostenlose Beratung anfragen" und "Buerozeiten" */
  .contact-hours { margin-top: -12px; }
  .section { padding: 70px 0; }
}
@media (max-width: 760px) {
  .nav-menu { display: none; }
  .nav-toggle { display: inline-flex; }
  .hero { min-height: 80vh; }
  .hero h1 { font-size: 40px; }
  .counter-card { grid-template-columns: 1fr 1fr 1fr; padding: 24px 12px; }
  .counter-num { font-size: 28px; }
  .counter-label { font-size: 10px; }

  /* "Ihr Weg zum Ergebnis" bleibt 4-spaltig, aber klein skaliert */
  .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 100%; }
  .step-item { padding: 0 2px; }
  .step-icon { width: 46px; height: 46px; margin-bottom: 10px; }
  .step-icon svg { width: 18px; height: 18px; }
  .step-num { font-size: 9.5px; margin-bottom: 4px; letter-spacing: 0.08em; }
  .step-item h3 { font-size: 12.5px; margin-bottom: 4px; line-height: 1.2; }
  .step-item p { font-size: 11px; line-height: 1.35; min-height: 0; max-width: 100%; }
  .step-item + .step-item::before { top: 22px; left: calc(-50% + 27px); right: calc(50% + 27px); }

  /* Zielgruppen, Leistungsspektrum, Referenzprojekte, Kundenstimmen: horizontale Swipe-Karussells */
  .target-grid, .service-grid, .proj-grid, .review-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    padding: 4px 20px 18px;
    margin: 0 -20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .target-grid::-webkit-scrollbar,
  .service-grid::-webkit-scrollbar,
  .proj-grid::-webkit-scrollbar,
  .review-grid::-webkit-scrollbar { display: none; }
  .target-card, .service-card, .proj-card, .review-card {
    flex: 0 0 85%;
    /* scroll-snap-stop: always = Browser MUSS bei jeder Karte einrasten,
       auch wenn der Swipe schnell/lang war -> keine uebersprungenen Karten */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
    min-height: auto;
    /* Abstand zwischen Karten ueber margin statt gap, weil gap + scroll-snap
       in einigen Mobile-Browsern zu ungenauen Snap-Punkten fuehrt. */
    margin-right: 12px;
  }
  .target-card:last-child,
  .service-card:last-child,
  .proj-card:last-child,
  .review-card:last-child { margin-right: 0; }

  /* Auf den Kategorie-Hub-Seiten (z.B. "Sanierung & Renovierung") soll
     das Service-Grid KEIN Karussell sein, sondern ein gestapeltes Grid
     mit immer zwei Karten pro Reihe. Karten gross genug, dass nicht alle
     in den Viewport passen -> User scrollt nach unten. */
  .category-grid-section .service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    padding: 0;
    margin: 0;
    gap: 12px;
    scroll-snap-type: none;
  }
  .category-grid-section .service-card {
    flex: none;
    margin: 0;
    min-width: 0;
    min-height: 180px;
    scroll-snap-align: none;
    /* Schmaleres Padding, damit Titel und Text nicht abgeschnitten werden */
    padding: 18px 16px 16px;
  }
  /* Titel auf den Mobil-Hub-Karten kleiner und mit Wortumbruch, damit
     lange Woerter wie "Komplettsanierung" oder "Fassadensanierung"
     vollstaendig sichtbar bleiben statt rechts abgeschnitten */
  .category-grid-section .service-card h3 {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 8px;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .category-grid-section .service-card p {
    font-size: 13px;
    line-height: 1.5;
  }
  .category-grid-section .service-card-more {
    margin-top: 12px;
    font-size: 12px;
  }
  /* Auf der Hub-Seite wieder Reveal aktivieren (war im Karussell deaktiviert) */
  .category-grid-section .service-grid .reveal {
    opacity: 0 !important;
    transform: translateX(24px) !important;
    transition: opacity 0.55s ease, transform 0.55s ease !important;
  }
  .category-grid-section .service-grid .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Karussell-Karten: Reveal-Animation deaktivieren. Grund: IntersectionObserver
     erkennt horizontal verdeckte Karten als "unsichtbar", animiert sie chaotisch
     beim vertikalen Scrollen und erzeugt den "Balken"-Effekt. */
  .target-grid .reveal,
  .service-grid .reveal,
  .proj-grid .reveal,
  .review-grid .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Reveal-Animation auf Mobil insgesamt dezenter + alle aus derselben Richtung
     (von rechts). Weniger Weg, kuerzere Dauer → wirkt ruhiger statt dramatisch. */
  .js-on .reveal,
  .js-on .reveal.from-left,
  .js-on .reveal.from-right {
    transform: translateX(24px);
    transition-duration: 0.55s;
  }
  .js-on .reveal.is-visible { transform: translate(0, 0); }

  /* FAQ: alle Fragen auf gleiche Hoehe, damit einzeilige und zweizeilige Fragen
     optisch identisch wirken. */
  .faq-q { min-height: 78px; align-items: center; }

  /* Vorher & Nachher: nur ein Slider auf Mobil statt zwei */
  .ba-grid { grid-template-columns: 1fr; }
  .ba-slider:nth-child(2) { display: none; }

  /* Über uns: Bild unter Text in ruhigem Querformat (Projekt-Look) */
  .about-inner { grid-template-columns: 1fr; gap: 28px; }
  .about-visual { aspect-ratio: 16 / 10; border-radius: var(--radius-md); }
  .about-points { grid-template-columns: 1fr; }

  .trust-items { gap: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .section-title h2 { font-size: 24px; }
  .about-title, .contact-info-title { font-size: 26px; }
  .svc-block { padding: 60px 0; }
  .svc-block-title { font-size: 22px; }
  .svc-ba { padding: 60px 0; }
  .svc-cta { padding: 60px 0; }
  .project-hero { padding: 120px 0 60px; min-height: 280px; }
  .project-hero-title { font-size: 30px; }
}

/* ==========================================================================
   RESPONSIVE – FEINSCHLIFF (Session 5)
   Schärft die Mobile-Darstellung unter 760px und unter 480px.
   ========================================================================== */
@media (max-width: 760px) {
  /* Container & Abstände kompakter, damit auf 375–430px nichts überläuft */
  .container, .container-narrow, .container-wide { padding: 0 20px; }
  .section { padding: 60px 0; }
  .section-title { margin-bottom: 36px; }

  /* Header: Logo etwas kleiner, CTA-Button schmaler, damit nichts umbricht */
  .nav-logo img { height: 42px; }
  .nav-cta .btn-primary { padding: 10px 16px; font-size: 12.5px; }

  /* Hero: Buttons stacken, weniger Top-Padding */
  .hero { padding: 100px 0 60px; }
  .hero-sub { font-size: 15.5px; margin: 22px 0 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 13px 20px; }

  /* Trust-Items unter dem Hero in eine vertikale Liste */
  .trust-items { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Ziel­gruppen-Karten: Min-Height der Häkchen-Zeile ist auf Mobil unnötig */
  .target-card li { min-height: auto !important; }

  /* Subpage-Header (Impressum, Datenschutz, Projekte-Hub) */
  .subpage-header { padding: 100px 0 36px; }
  .subpage-header h1 { font-size: 28px; }
  .subpage-header p { font-size: 14px; }
  .subpage-back { margin-bottom: 18px; }

  /* Legal-Seiten (Datenschutz hat 14 Abschnitte – muss gut lesbar bleiben) */
  .legal { padding: 40px 0 70px; }
  .legal-content { font-size: 14px; line-height: 1.75; }
  .legal-content h2 { font-size: 18px; margin: 26px 0 10px; }
  .legal-content h3 { font-size: 15px; margin: 20px 0 8px; }

  /* Service-Hero: Banner-Seitenverhältnis statt 21:9 auf Mobile 4:3 + voll­breit */
  .svc-hero { padding-top: 70px; }
  .svc-hero-wrap { padding-right: 0; }
  /* Border auf Mobil komplett weg, sonst entsteht ein duenner Strich
     zwischen Banner und Folgesektion (vor allem im Hellmodus sichtbar) */
  .svc-hero-banner { aspect-ratio: 4 / 3; border-radius: 0; border: none; }
  .svc-hero-content { padding: 22px 20px; }
  .svc-hero-text { max-width: 100%; }
  .svc-hero-title { font-size: 24px; }
  .svc-hero-sub { font-size: 14px; }

  /* Service-Blocks untereinander mit etwas mehr Luft */
  .svc-block-grid { gap: 32px; }
  .svc-benefit-item { font-size: 14px; }

  /* Projekt-Hero-Badge etwas kleiner, damit er nicht zu breit wirkt */
  .project-hero-badge { font-size: 10.5px; padding: 5px 12px; letter-spacing: 0.08em; }
  .project-text-block { padding: 0; }

  /* Footer darf umbrechen + geringere Gaps */
  .footer-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-links { gap: 14px; flex-wrap: wrap; }

  /* FAB-Buttons (WhatsApp + Chatbot) auf Mobil etwas näher an den Rand,
     damit sie mit dem Chatbot-Panel bei 480px nicht kollidieren */
  .fab-stack { right: 14px; bottom: 14px; gap: 10px; }
  .fab { width: 48px; height: 48px; }

  /* Kontakt-Stunden-Karte bekommt auf Mobil volle Breite */
  .contact-hours { width: 100%; }
}

@media (max-width: 480px) {
  /* Noch enger auf iPhone-SE-Breite (320–390px) */
  .container, .container-narrow, .container-wide { padding: 0 16px; }
  .section { padding: 48px 0; }

  /* Header noch eine Stufe kleiner */
  .nav-cta .btn-primary { padding: 9px 12px; font-size: 12px; }

  /* Hero */
  .hero { padding: 90px 0 50px; min-height: auto; }
  .hero h1 { font-size: 32px; line-height: 1.02; }
  .hero-eyebrow { font-size: 10.5px; padding: 6px 12px; letter-spacing: 0.12em; }
  .hero-sub { font-size: 14.5px; margin: 18px 0 24px; }

  /* Counter-Card auf sehr kleinen Screens kompakter */
  .counter-card { padding: 18px 6px; border-radius: var(--radius-md); }
  .counter-num { font-size: 22px; }
  .counter-label { font-size: 9px; letter-spacing: 0.02em; }

  /* Section-Titel */
  .section-title h2 { font-size: 21px; }
  .section-title p { font-size: 13.5px; }

  /* Subpage-Header auf sehr schmalen Screens */
  .subpage-header { padding: 90px 0 30px; }
  .subpage-header h1 { font-size: 24px; }

  /* Projekt-Hero enger */
  .project-hero { padding: 100px 0 40px; min-height: 220px; }
  .project-hero-title { font-size: 24px; }

  /* Service-Hero minimal kleiner */
  .svc-hero-title { font-size: 22px; }

  /* Vorher/Nachher-Slider auf sehr schmalem Screen: Knob nicht zu groß */
  .ba-knob { width: 36px; height: 36px; font-size: 16px; }
  .svc-ba-grid .ba-knob { width: 32px; height: 32px; font-size: 14px; }

  /* Footer-Schrift minimal kleiner */
  .site-footer { font-size: 12px; padding: 22px 0; }
}

/* ==========================================================================
   THEME-TOGGLE (Hellmodus / Dunkelmodus)
   ==========================================================================
   Logik: Default-Theme ist Dunkel. Wird auf <html> kein data-theme oder
   data-theme="dark" gesetzt, gelten die :root-Variablen oben unveraendert.
   Mit data-theme="light" greifen die Overrides in diesem Block.
   Der Toggle-Button sitzt rechts neben dem Kontakt-Button im Header.
   Erforderliches Inline-Bootstrap-Skript im <head> verhindert Flackern.
   ========================================================================== */

/* --- Toggle-Button im Header --------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 16px; height: 16px;
  transition: transform var(--t-med);
}
/* Sonne sichtbar im Dunkelmodus (zeigt was Klick aktiviert: Hell) */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
/* Mond sichtbar im Hellmodus */
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* --- Hellmodus: Variablen-Overrides -------------------------------------- */
[data-theme="light"] {
  --bg-0: #f5f5f4;
  --bg-1: #fafaf9;
  --bg-2: #ffffff;
  --bg-3: #f1efed;
  --bg-4: #e9e7e4;

  --surface: rgba(0, 0, 0, 0.04);
  --surface-hover: rgba(0, 0, 0, 0.07);

  /* Borders kraeftiger, damit Karten/Buttons im Hellmodus deutlich abgesetzt sind */
  --border-weak: rgba(0, 0, 0, 0.1);
  --border: rgba(0, 0, 0, 0.18);
  --border-strong: rgba(0, 0, 0, 0.32);

  --text: #1a1a1a;
  --text-dim: rgba(0, 0, 0, 0.78);
  --text-muted: rgba(0, 0, 0, 0.58);
  --text-faint: rgba(0, 0, 0, 0.36);

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.18);

  color-scheme: light;
}

[data-theme="light"] body {
  background: var(--bg-1);
  color: var(--text-dim);
}

/* --- Header im Hellmodus ------------------------------------------------- */
[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--border);
}
[data-theme="light"] .nav-dropdown-inner {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--border);
}
[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .nav-toggle { color: var(--text); }

/* --- Glass-Buttons im Hellmodus ------------------------------------------ */
[data-theme="light"] .btn-glass {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .btn-glass:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(0, 0, 0, 0.24);
}

/* --- Hero im Hellmodus: Foto-Fade laeuft auf hellen Body aus -------------
   Der Hero-Foto-Mask schmilzt das Bild am unteren Rand auf transparent;
   der Overlay-Gradient (.hero-bg::after) wird im Hellmodus hell statt
   dunkel gestaltet, damit das dunkle Foto sanft nach var(--bg-1) (weiss)
   uebergeht. Der Foto-Inhalt selbst wird leicht aufgehellt, damit das
   Bild zum hellen Gesamteindruck passt. */
[data-theme="light"] .hero h1 { color: #fff; }
[data-theme="light"] .hero-back { color: rgba(255, 255, 255, 0.78); }
[data-theme="light"] .hero-back:hover { color: #fff; }
[data-theme="light"] .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05) 0%, transparent 55%, rgba(255,255,255,0.08) 100%),
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(250, 250, 249, 0.15) 60%,
      rgba(250, 250, 249, 0.55) 78%,
      rgba(250, 250, 249, 0.92) 90%,
      var(--bg-1) 96%
    );
}

/* Service-Hero im Hellmodus: Foto bleibt dunkel-overlayed (siehe
   .svc-hero-overlay), aber das Banner endet weich auf hellen Body.
   Texte im Banner bleiben weiss (eigenes dunkles Overlay). */
[data-theme="light"] .svc-hero-title { color: #fff; }
[data-theme="light"] .svc-hero-sub { color: rgba(255, 255, 255, 0.78); }
[data-theme="light"] .svc-hero-banner {
  border-color: var(--border);
}
[data-theme="light"] .svc-hero-overlay {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.45) 100%);
}

/* Subpage-Header (Kategorie-Hubs, Impressum, Datenschutz): heller
   Akzent-Gradient, abgesetzt vom Body. Text dunkel via Variablen. */
[data-theme="light"] .subpage-header {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
[data-theme="light"] .subpage-header::after {
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.55;
}

/* Project-Hero hat einen inline-Gradient (zwei farbige Toene) - Texte
   bleiben weiss, da der Gradient kraeftig farbig ist. */
[data-theme="light"] .project-hero-title,
[data-theme="light"] .project-hero-meta { color: #fff; }
[data-theme="light"] .project-hero .hero-back { color: rgba(255, 255, 255, 0.85); }

/* --- Counter-Card im Hellmodus: heller Hintergrund + dunkle Texte --------
   Im Dunkelmodus war die Card leicht weiss-transparent auf dunklem Body.
   Im Hellmodus dreht sich das: leicht abgesetzte helle Card mit kraeftiger
   Border und dezentem Schatten, Texte werden dunkel via Variablen. */
[data-theme="light"] .counter-card {
  background: var(--bg-2);
  border-color: var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--shadow-md);
}

/* --- Section-Titel im Hellmodus ------------------------------------------ */
[data-theme="light"] .section-title h2 { color: var(--text); }
[data-theme="light"] .section-title p { color: var(--text-muted); }

/* --- Karten / Boxen / Surfaces ------------------------------------------- */
[data-theme="light"] .target-card,
[data-theme="light"] .service-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .project-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .review-card {
  background: var(--bg-2);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .target-card:hover,
[data-theme="light"] .service-card:hover,
[data-theme="light"] .testimonial-card:hover,
[data-theme="light"] .project-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* --- FAQ im Hellmodus ---------------------------------------------------- */
[data-theme="light"] .faq-q { color: var(--text); }
[data-theme="light"] .faq-a { color: var(--text-dim); }

/* --- Footer im Hellmodus (dunkel halten fuer Kontrast) ------------------- */
[data-theme="light"] .site-footer {
  background: #0c0c0c;
  color: rgba(255, 255, 255, 0.62);
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .site-footer a { color: rgba(255, 255, 255, 0.78); }
[data-theme="light"] .site-footer a:hover { color: #fff; }

/* Footer-Texte mit eigenen Color-Variablen explizit überschreiben,
   sonst werden sie im Hellmodus dunkel und unsichtbar auf dem dunklen Footer. */
[data-theme="light"] .site-footer .footer-left,
[data-theme="light"] .site-footer .footer-partners-label {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme="light"] .site-footer .footer-partners {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* --- Kontakt-Sektion ----------------------------------------------------- */
[data-theme="light"] .contact-hours,
[data-theme="light"] .contact-info,
[data-theme="light"] .contact-form {
  background: var(--bg-2);
  border-color: var(--border);
}
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea,
[data-theme="light"] .contact-form select {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder {
  color: var(--text-muted);
}

/* --- Chatbot im Hellmodus ------------------------------------------------ */
[data-theme="light"] .chatbot-panel {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 60px rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .chatbot-header {
  background: var(--bg-3);
  border-color: var(--border);
}
[data-theme="light"] .chatbot-greeting {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .chatbot-direct-btn,
[data-theme="light"] .chatbot-quick button {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .chatbot-direct-btn:hover,
[data-theme="light"] .chatbot-quick button:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
}
[data-theme="light"] .chatbot-msg-bot {
  background: var(--bg-3);
  color: var(--text);
}
[data-theme="light"] .chatbot-input {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .chatbot-input::placeholder { color: var(--text-muted); }
[data-theme="light"] .chatbot-close { color: var(--text-muted); }
[data-theme="light"] .chatbot-close:hover { background: var(--bg-3); color: var(--text); }
[data-theme="light"] .chatbot-scroll {
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
[data-theme="light"] .chatbot-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); }
[data-theme="light"] .chatbot-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

/* --- Service-Detailseiten: alle Sektionen gleicher Hintergrund ----------
   Im Original sind .svc-hero, .svc-block--intro, .svc-block--benefits,
   .svc-ba und .svc-cta jeweils unterschiedliche Gradient-Toene. Im
   Dunkelmodus kaum sichtbar, im Hellmodus harte Kanten. Daher alle
   Sektionen auf var(--bg-1) angleichen, der CTA-Bereich behaelt nur
   die orange Akzent-Trennlinie als visuellen Abschluss. */
[data-theme="light"] .svc-hero,
[data-theme="light"] .svc-block,
[data-theme="light"] .svc-block--intro,
[data-theme="light"] .svc-block--benefits,
[data-theme="light"] .svc-ba,
[data-theme="light"] .svc-cta {
  background: var(--bg-1);
}
/* Im Hellmodus muss die Trennlinie dunkel sein (sonst unsichtbar auf hellem Body),
   der Schatten darunter wird zarter. */
[data-theme="light"] .svc-cta::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.14) 30%, rgba(0, 0, 0, 0.14) 70%, transparent);
  box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .svc-cta::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent);
}
/* Vorteile-Liste bleibt transparent wie im Original (nur Haekchen + Text),
   keine helleren Kaesten mehr auf hellem Body */
[data-theme="light"] .svc-benefit-item {
  background: transparent;
  border: none;
  color: var(--text-dim);
}

/* --- Trust-Leiste, Partner-Marquee --------------------------------------- */
[data-theme="light"] .partner-marquee { background: var(--bg-3); }
[data-theme="light"] .trust-strip { background: var(--bg-3); border-color: var(--border); }

/* --- Mobile Hamburger-Menue --------------------------------------------- */
@media (max-width: 1100px) {
  [data-theme="light"] .nav-menu.is-open {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--border);
  }
}

/* --- Hover-Effekte im Hellmodus: orange statt weiss ---------------------- */
/* fx-shine: Lichtschleier wird orange, damit er auf hellem Untergrund
   ueberhaupt sichtbar ist (weisser Schleier verschwindet sonst). */
[data-theme="light"] .fx-shine::before {
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 107, 26, 0.12) 42%,
    rgba(255, 107, 26, 0.22) 50%,
    rgba(255, 107, 26, 0.12) 58%,
    transparent 70%,
    transparent 100%
  );
}

/* fx-blink: orange pulsierender Glow im Hellmodus.
   Eigene Keyframes, damit @keyframes nicht ueber Variablen gehen muss. */
@keyframes fxBlinkLight {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 107, 26, 0.18),
      0 0 6px 1px rgba(255, 107, 26, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 107, 26, 0.45),
      0 0 14px 2px rgba(255, 107, 26, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}
[data-theme="light"] .fx-blink:hover {
  border-color: rgba(255, 107, 26, 0.45);
  animation: fxBlinkLight 2s ease-in-out infinite;
}

/* --- Glass-Buttons (Kontakt, "Mehr erfahren") deutlicher umrandet -------- */
[data-theme="light"] .btn-glass {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.22);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .btn-glass:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.36);
}

/* Karten kriegen einen sichtbaren Schatten + kraeftigeren Border */
[data-theme="light"] .target-card,
[data-theme="light"] .service-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .project-card,
[data-theme="light"] .review-card,
[data-theme="light"] .svc-feature {
  border-width: 1px;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .faq-item {
  border-color: var(--border);
}

/* svc-block-grid ohne rechte Bild-Spalte (Platzhalter entfernt) → einspaltig
   und in der Breite begrenzt, damit der Text nicht hängt. Greift automatisch,
   wenn keine .reveal.from-right-Karte mehr im Grid steht. */
.svc-block-grid:not(:has(.from-right)) {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   SVC-FEATURES (Karten-Layout für Großprojekt-Service-Seiten,
   Hauszeit-Stil: Icon + Titel + Text statt Vorher/Nachher-Slider)
   ========================================================================== */
.svc-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 14px;
}
.svc-feature {
  display: flex;
  gap: 16px;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-med);
}
.svc-feature:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.svc-feature-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-ghost);
  color: var(--accent);
}
.svc-feature-icon svg { width: 22px; height: 22px; }
.svc-feature-text h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.svc-feature-text p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1100px) {
  .svc-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .svc-features { grid-template-columns: 1fr; gap: 14px; }
  .svc-feature { padding: 18px 18px 16px; }
}

/* ==========================================================================
   LEGAL-MENÜ — Mini-Hamburger im Header (FAQ / Datenschutz / Impressum)
   Sitzt im .nav-cta zwischen Kontakt-Button und Theme-Toggle.
   Auf Mobil ausgeblendet, weil die Punkte dort über das normale
   Klapp-Menü erreichbar sind (.nav-item--legal).
   ========================================================================== */
.legal-menu {
  position: relative;
  display: inline-flex;
}
.legal-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.legal-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--border-strong);
  color: var(--text);
}
.legal-menu-toggle[aria-expanded="true"] {
  background: rgba(255, 107, 26, 0.10);
  border-color: var(--accent-soft);
  color: var(--accent);
}
.legal-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 6px;
  z-index: 1100;
}
.legal-menu-dropdown[hidden] { display: none; }
.legal-menu-dropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.legal-menu-dropdown a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.legal-menu-dropdown a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* Mobile (≤1100 px): Mini-Hamburger ausblenden, der normale Mobile-Nav-Toggle
   übernimmt die Navigation. Im Klapp-Menü sind FAQ/Datenschutz/Impressum
   als .nav-item--legal sichtbar. */
@media (max-width: 1100px) {
  .legal-menu { display: none; }
}
/* Desktop: Legal-Items im Hauptmenü ausblenden, sie wandern ins legal-menu. */
@media (min-width: 1101px) {
  .nav-item--legal { display: none; }
}

/* Hellmodus-Anpassung: hellerer Glass-Look statt weiß-transparent. */
[data-theme="light"] .legal-menu-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--text);
}
[data-theme="light"] .legal-menu-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.24);
}
[data-theme="light"] .legal-menu-toggle[aria-expanded="true"] {
  background: rgba(255, 107, 26, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="light"] .legal-menu-dropdown {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .legal-menu-dropdown a {
  color: var(--text);
}
[data-theme="light"] .legal-menu-dropdown a:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   TRUST-STREIFEN unter Hero (kompakte Variante – 2026-05-19 Restrukturierung)
   ========================================================================== */
.trust-bar--compact {
  padding: 18px 0;
  background: var(--bg-1);
}
.trust-bar--compact .trust-items {
  gap: 40px;
}
.trust-bar--compact .trust-item {
  font-size: 13.5px;
}
@media (max-width: 760px) {
  .trust-bar--compact { padding: 14px 0; }
  .trust-bar--compact .trust-items { gap: 22px; }
  .trust-bar--compact .trust-item { font-size: 12.5px; gap: 8px; }
  .trust-bar--compact .trust-item svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   UNSERE ARBEIT – fusionierte Sektion (Vorher/Nachher + Projekte)
   ========================================================================== */
.work .ba-grid { margin-bottom: 56px; }
.work .work-projects { margin-top: 0; }
@media (max-width: 760px) {
  .work .ba-grid { margin-bottom: 36px; }
}

/* ==========================================================================
   FOOTER – Partner-Logo-Reihe (kompakt, monochrom-ish)
   ========================================================================== */
/* Die Partner-Leiste stand bis zum 09.09.2026 im Fussbereich und sitzt jetzt
   direkt unter dem Hero. Der Baustein selbst bleibt unveraendert, damit sich
   an der Laufschrift nichts aendert, nur die Huelle ist neu: .partner-bar
   traegt Hintergrund und Abstand, die alte Trennlinie nach unten faellt weg,
   weil die Sektion jetzt selbst begrenzt ist. */
.partner-bar {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-weak);
}
.partner-bar .footer-partners {
  border-bottom: none;
  margin-bottom: 0;
  padding: 22px 0;
}
/* Die Logos waren im Fussbereich 112 Pixel hoch. Direkt unter dem Hero war das
   zu viel: Fremdmarken erschienen dort fast dreimal so gross wie das eigene
   Logo im Kopfbereich, die Aufmerksamkeit kippte weg vom eigenen Angebot.
   76 Pixel belegen die Zusammenarbeit, ohne sie zur Hauptaussage zu machen.
   Die Werte im Fussbereich bleiben unberuehrt, falls die Leiste je
   zurueckwandert. */
.partner-bar .footer-partners-row { height: 92px; }
.partner-bar .footer-partners-track img { height: 76px; }
.partner-bar .footer-partners-track img[src*="ajholz"] { height: 24px; }
/* Die Beschriftung stand auf --text-faint und kam damit auf rund 2,4:1
   Kontrast, gefordert sind 4,5:1 bei dieser Schriftgroesse. Im Fussbereich
   war sie eine Randnotiz, hier oben ist sie Teil der Aussage. */
.partner-bar .footer-partners-label { color: var(--text-muted); }

.footer-partners {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--border-weak);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.footer-partners-label {
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer-partners-row {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 120px;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.footer-partners-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  gap: 48px;
  animation: footerPartnerMarquee 32s linear infinite;
  will-change: transform;
}
.footer-partners-track img {
  height: 112px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.55;
  filter: grayscale(1);
  /* Einzel-Logos sind Hover-passiv (verhindert den Sprung-Bug). Der
     farbliche Hover-Effekt sitzt eine Ebene drueber am Container. */
  pointer-events: none;
  transition: opacity var(--t-med);
}
/* AJ Holzzentrum-Logo bleibt kleiner (war schon richtige Groesse) */
.footer-partners-track img[src*="ajholz"] {
  height: 28px;
}
/* Farb-Hover am Container statt am Einzel-Logo: keine filter-Transition
   waehrend der laufenden translateX-Animation -> kein Sprung. */
.footer-partners-row:hover .footer-partners-track img {
  opacity: 0.95;
  filter: grayscale(0);
}
@keyframes footerPartnerMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-partners-track { animation: none; }
}
@media (max-width: 760px) {
  .footer-partners { gap: 14px; padding: 14px 0 16px; }
  .footer-partners-row { height: 96px; }
  .footer-partners-track { gap: 36px; }
  .footer-partners-track img { height: 88px; }
  .footer-partners-track img[src*="ajholz"] { height: 22px; }

  /* Auf dem Handy stand die Beschriftung neben der Laufschrift und nahm ihr
     die halbe Breite, sodass nur ein Logo zugleich zu sehen war. Untereinander
     bekommt das Band die volle Breite. */
  .partner-bar .footer-partners {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px 0;
  }
  .partner-bar .footer-partners-label { text-align: center; }
  .partner-bar .footer-partners-row { height: 68px; }
  .partner-bar .footer-partners-track { gap: 34px; }
  .partner-bar .footer-partners-track img { height: 56px; }
  .partner-bar .footer-partners-track img[src*="ajholz"] { height: 20px; }
}

/* ==========================================================================
   NDS BARRIEREFREI-SERVICE
   Landing-Page + Selbstcheck-Wizard + Quick-Check + Vollmacht-Formular
   ========================================================================== */

/* --- Anspruch-Popup (Modal auf Bad-Seiten + Startseite) ------------------ */
.ap-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ap-modal[hidden] { display: none !important; }
.ap-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  cursor: pointer;
  animation: apBackIn 0.22s ease-out;
}
[data-theme="light"] .ap-modal-backdrop { background: rgba(20, 20, 20, 0.48); }
.ap-modal-content {
  position: relative; z-index: 2;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 36px 32px;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  animation: apModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .ap-modal-content {
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(20, 20, 20, 0.18);
}
@keyframes apBackIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes apModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-modal-backdrop, .ap-modal-content { animation: none; }
}
.ap-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: none; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
  color: var(--text-muted);
  border-radius: 10px;
  transition: background var(--t-fast), color var(--t-fast);
}
.ap-modal-close:hover { background: var(--surface); color: var(--text); }
.ap-modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255, 107, 26, 0.12);
  color: var(--accent);
  margin: 6px auto 18px;
}
.ap-modal-eyebrow {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.ap-modal-title {
  font-size: 22px; font-weight: 800; color: var(--text);
  margin: 0 0 14px; line-height: 1.3;
}
.ap-modal-title strong { color: var(--accent); white-space: nowrap; }
.ap-modal-text {
  color: var(--text-dim); font-size: 14.5px; line-height: 1.6;
  margin: 0 0 24px;
}
.ap-modal-cta {
  display: flex; flex-direction: column; gap: 10px;
}
.ap-modal-cta .btn { width: 100%; padding: 12px 18px; justify-content: center; }
@media (max-width: 480px) {
  .ap-modal-content { padding: 32px 24px 24px; }
  .ap-modal-title { font-size: 19px; }
}

/* --- Promo-Block auf Service-Bad-Seite ----------------------------------- */
.bf-promo-section { padding: 36px 0 12px; }
.bf-promo {
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.bf-promo-head {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
@media (max-width: 600px) { .bf-promo-head { grid-template-columns: 1fr; gap: 14px; } }
.bf-promo-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: 10px;
}
.bf-promo-eyebrow {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}
.bf-promo-body h2 {
  color: var(--text); font-size: 19px; font-weight: 800; margin: 0 0 10px;
  line-height: 1.3;
}
.bf-promo-body p { color: var(--text-dim); font-size: 14.5px; line-height: 1.65; margin: 0; }
.bf-promo-body p strong { color: var(--text); }
.bf-promo-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 4px 0 14px;
}
@media (max-width: 800px) { .bf-promo-actions { grid-template-columns: 1fr; } }
.bf-promo-actions .btn { white-space: nowrap; padding: 11px 16px; font-size: 13.5px; justify-content: center; }
.bf-promo-footer { text-align: center; }
.bf-promo-overview {
  font-size: 13px; color: var(--text-muted); font-weight: 600;
  transition: color var(--t-fast);
  display: inline-flex; align-items: center;
  min-height: 24px; /* Mindest-Tippflaeche */
}
.bf-promo-overview:hover { color: var(--accent); }
[data-theme="light"] .bf-promo { background: #fafafa; }

/* --- Landing-Page (barrierefrei.html) ------------------------------------- */
.bf-hero {
  padding: 130px 0 50px;
  background: linear-gradient(180deg, var(--bg-0), var(--bg-2));
  position: relative;
}
.bf-hero::after {
  content: ""; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
}
.bf-hero h1 {
  font-size: 38px; font-weight: 800; color: var(--text);
  margin: 14px 0 18px; line-height: 1.18;
  max-width: 880px;
}
.bf-hero .bf-hero-betrag {
  color: var(--accent);
  white-space: nowrap;
}
.bf-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  margin: 18px 0 6px;
}
.bf-hero .bf-lead {
  color: var(--text-dim); font-size: 17px; line-height: 1.65;
  max-width: 720px; margin: 0 0 18px;
}
.bf-hero-trust {
  display: inline-flex; flex-wrap: wrap; gap: 10px;
  color: var(--text-muted); font-size: 13px;
  padding: 10px 0 4px;
}
.bf-hero-trust span:first-child { color: var(--text-dim); font-weight: 600; }
@media (max-width: 600px) {
  .bf-hero h1 { font-size: 28px; }
  .bf-hero .bf-lead { font-size: 15.5px; }
}

.bf-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; padding: 50px 0 30px;
}
@media (max-width: 900px) { .bf-cards { grid-template-columns: 1fr; } }
.bf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.bf-card:hover { border-color: var(--accent-soft); transform: translateY(-3px); }
.bf-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.bf-card h3 {
  color: var(--text); font-size: 19px; font-weight: 800;
  margin: 0; line-height: 1.3;
}
.bf-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; flex: 1; }
.bf-card .bf-card-meta {
  color: var(--text-faint); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.bf-card .btn { align-self: flex-start; }

.bf-download {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex; align-items: center; gap: 22px;
  margin: 18px 0 50px;
}
@media (max-width: 700px) { .bf-download { flex-direction: column; align-items: flex-start; gap: 16px; } }
.bf-download-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 107, 26, 0.10); color: var(--accent);
  border-radius: 10px;
}
.bf-download h3 { color: var(--text); font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.bf-download p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; flex: 1; }

/* --- Wizard (barrierefrei-check.html) ------------------------------------- */
.bf-wizard {
  max-width: 720px; margin: 40px auto 80px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 36px;
}
@media (max-width: 600px) { .bf-wizard { padding: 24px 20px; border-radius: 14px; margin: 24px auto 60px; } }

.bf-progress {
  margin-bottom: 24px;
}
.bf-progress-label {
  display: flex; justify-content: space-between;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
  margin-bottom: 8px;
}
.bf-progress-bar {
  width: 100%; height: 6px;
  background: var(--surface); border-radius: 999px;
  overflow: hidden;
}
.bf-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 999px;
  transition: width var(--t-med);
}

.bf-step { display: none; }
.bf-step.is-active { display: block; }

.bf-step-section {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.bf-step h2 {
  font-size: 22px; font-weight: 800; color: var(--text);
  margin: 0 0 14px; line-height: 1.3;
}
.bf-step-hint { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }

.bf-options {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 28px;
}
.bf-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.bf-option:hover { border-color: var(--accent-soft); background: var(--surface-hover); }
/* 18 Pixel liegen unter der Mindest-Tippflaeche. Der Schalter selbst waechst
   auf 22 Pixel, das Polster bringt die treffbare Flaeche auf 24. Die ganze
   Zeile ist ohnehin klickbar, das hier ist die Sicherung fuer den Fall, dass
   jemand genau den Punkt anvisiert. */
.bf-option input[type="radio"] {
  accent-color: var(--accent); width: 24px; height: 24px; flex-shrink: 0;
}
.bf-option-text { color: var(--text); font-size: 15px; font-weight: 500; }
.bf-option input[type="radio"]:checked + .bf-option-text { color: var(--accent); font-weight: 700; }
.bf-option:has(input[type="radio"]:checked) { border-color: var(--accent); background: rgba(255, 107, 26, 0.08); }

.bf-nav {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 24px;
}
.bf-nav .btn { padding: 11px 22px; }
.bf-nav-spacer { flex: 1; }

.bf-step-extra {
  margin: 12px 0 24px; padding: 14px 16px;
  background: rgba(255, 107, 26, 0.06);
  border: 1px solid rgba(255, 107, 26, 0.20);
  border-radius: 10px;
  font-size: 13.5px; color: var(--text-dim); line-height: 1.55;
}

/* Zwischen-Aktionen nach Bad-Check */
.bf-zwischen-actions {
  display: flex; flex-direction: column; gap: 10px;
}
.bf-zwischen-actions .btn { width: 100%; justify-content: center; padding: 13px 18px; }

/* Empfehlungs-Liste im Mini-Ergebnis */
.bf-empf { margin-top: 10px; }
.bf-empf summary {
  cursor: pointer; color: var(--accent);
  font-size: 13px; font-weight: 600;
  list-style: none;
}
.bf-empf summary::-webkit-details-marker { display: none; }
.bf-empf summary::before { content: "▸ "; transition: transform var(--t-fast); display: inline-block; }
.bf-empf[open] summary::before { transform: rotate(90deg); }
.bf-empf ul {
  margin: 10px 0 0 18px; padding: 0;
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
.bf-empf li { margin-bottom: 4px; }

/* --- Kontakt-Schritt im Wizard ------------------------------------------- */
.bf-contact .form-field { margin-bottom: 16px; }

/* --- Ergebnis-Seite ------------------------------------------------------- */
.bf-result h2 {
  font-size: 24px; font-weight: 800; color: var(--text);
  margin: 0 0 6px;
}
.bf-result-lead { color: var(--text-dim); font-size: 15px; margin: 0 0 24px; }

.bf-ampel-list {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 28px;
}
.bf-ampel {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.bf-ampel-dot {
  flex-shrink: 0;
  width: 14px; height: 14px; border-radius: 50%;
  margin-top: 6px;
}
.bf-ampel--gruen .bf-ampel-dot { background: #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, 0.5); }
.bf-ampel--gelb  .bf-ampel-dot { background: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.5); }
.bf-ampel--rot   .bf-ampel-dot { background: #f87171; box-shadow: 0 0 12px rgba(248, 113, 113, 0.5); }
.bf-ampel-body strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.bf-ampel-body span { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }

.bf-foerderung-box {
  background: linear-gradient(135deg, rgba(255, 107, 26, 0.10), rgba(255, 107, 26, 0.04));
  border: 1px solid rgba(255, 107, 26, 0.28);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 24px;
}
.bf-foerderung-box h3 { color: var(--text); font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.bf-foerderung-box p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0; }
.bf-foerderung-box .bf-foerderung-betrag {
  color: var(--accent); font-size: 28px; font-weight: 800;
  display: block; margin: 6px 0 10px;
}
.bf-foerderung-box small { color: var(--text-faint); font-size: 12px; }

.bf-result-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 20px;
}

/* --- Vollmacht-Formular --------------------------------------------------- */
.bf-vollmacht {
  max-width: 720px; margin: 40px auto 80px;
}
.bf-vollmacht-section {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 30px;
  margin-bottom: 18px;
}
.bf-vollmacht-section h3 {
  font-size: 16px; font-weight: 800; color: var(--text);
  margin: 0 0 18px;
}
.bf-vollmacht-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .bf-vollmacht-row { grid-template-columns: 1fr; } }
.bf-vollmacht-row .form-field { margin: 0; }

.bf-vollmacht-info {
  background: rgba(64, 153, 255, 0.06);
  border: 1px solid rgba(64, 153, 255, 0.22);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text-dim); font-size: 13.5px; line-height: 1.6;
  margin-bottom: 18px;
}

/* --- Hellmodus-Anpassungen ----------------------------------------------- */
[data-theme="light"] .bf-card { background: #ffffff; }
[data-theme="light"] .bf-download { background: #ffffff; }
[data-theme="light"] .bf-wizard { background: #ffffff; }
[data-theme="light"] .bf-vollmacht-section { background: #ffffff; }
[data-theme="light"] .bf-option { background: #fafafa; }
[data-theme="light"] .bf-option:has(input[type="radio"]:checked) { background: rgba(255, 107, 26, 0.06); }
[data-theme="light"] .bf-ampel { background: #fafafa; }

/* --- Vollmacht-Dokument (Live-Vorschau + Druck) -------------------------- */
.vm-doc-wrap { padding-top: 0; }
.vm-doc {
  max-width: 720px; margin: 0 auto;
  background: #ffffff;
  color: #1a1a1a;
  padding: 60px 70px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .vm-doc { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10); }
.vm-doc-header { text-align: center; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid #1a1a1a; }
.vm-doc-headline { font-size: 28px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 8px; }
.vm-doc-sub { font-size: 13px; color: #555; font-style: italic; }
.vm-doc-block { margin-bottom: 28px; }
.vm-doc-block-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: #666; margin-bottom: 8px;
  border-bottom: 1px solid #ccc; padding-bottom: 4px;
}
.vm-doc p { margin-bottom: 12px; }
.vm-doc ul { margin: 12px 0 12px 24px; padding: 0; }
.vm-doc li { margin-bottom: 6px; }
.vm-doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 60px; }
.vm-doc-sign-line { display: flex; flex-direction: column; }
.vm-doc-line { height: 1px; background: #1a1a1a; margin-bottom: 6px; }
.vm-doc-line-label { font-size: 11px; color: #666; }
.vm-doc-foot {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid #ccc;
  font-size: 10px; color: #888; text-align: center;
}
@media (max-width: 600px) {
  .vm-doc { padding: 36px 28px; font-size: 12.5px; }
  .vm-doc-headline { font-size: 22px; }
  .vm-doc-sign { grid-template-columns: 1fr; gap: 36px; }
}

/* --- Print-CSS: nur das Dokument drucken, alles andere ausblenden -------- */
@media print {
  @page { size: A4; margin: 18mm 18mm 18mm 18mm; }
  body { background: #fff !important; color: #1a1a1a !important; }
  [data-no-print], .site-header, .site-footer, .nav-toggle,
  .skip-link, .fab-stack, .chatbot-bubble, .chatbot-panel,
  .legal-menu, .theme-toggle, .subpage-header, .bf-vollmacht,
  .bf-vollmacht-info, .vm-doc-title { display: none !important; }
  main, .section { padding: 0 !important; margin: 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .vm-doc {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 11pt !important;
  }
  .vm-doc-headline { font-size: 22pt !important; }
  .vm-doc-block-title { color: #666 !important; border-bottom-color: #999 !important; }
  .vm-doc-block { page-break-inside: avoid; }
  .vm-doc-sign { page-break-inside: avoid; margin-top: 40pt !important; }
}

/* ==========================================================================
   FAQ-SEITE – CTA-Block am Ende
   ========================================================================== */
.faq-cta {
  margin-top: 48px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.faq-cta p {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 18px;
}
.faq-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .faq-cta { padding: 24px 20px; margin-top: 32px; }
  .faq-cta-actions { flex-direction: column; }
  .faq-cta-actions .btn { width: 100%; }
}