/* ============================================================
   SITEBASE · site.css — Dark-Glass-Makeover (2026-08-11)
   ------------------------------------------------------------
   Voll-Pivot auf Wunsch William (11.08.): glasige, dunkle
   Premium-Welt in der Sprache des LinkedIn-Banners — warmes
   Fast-Schwarz, Gold als Licht, Milchglas-Flächen, Grain.
   Serif-Editorial-Stimme (Fraunces) bleibt — das ist die eigene
   Art, nicht Apple. Historie: davor Hell-Pivot 2026-07 (Feedback
   Luke/hallomerlin: Zielgruppe Handwerk — bewusst übersteuert;
   der warme Goldton + Serif hält die Nahbarkeit im Dunkel).

   Aufhellung 2026-08-15 (William: „etwas zu dunkel irgendwie" —
   Variante C aus dem Screenshot-Bakeoff): alle Flächen-Töne eine
   halbe Stufe wärmer/heller + Licht-Rhythmus (Block 28 unten).
   KEIN Hell-Pivot — Nachtatelier bleibt.

   Kontraste rechnerisch geprüft (WCAG AA, 2026-08-15, eigene Rechnung):
     ink      #F4EEDF auf #110E08 → 16.6 : 1   (surface: 15.5)
     ink-soft #CFC5AE auf #110E08 → 11.2 : 1   (surface: 10.5)
     ink-mut  #B0A58E auf #110E08 →  7.9 : 1   (surface:  7.4)
     label    #9E927A auf #110E08 →  6.3 : 1   (surface:  5.9)
     gold     #C9A86B auf #110E08 →  8.5 : 1   (im Dunkel textsicher!)
     gold-deep#E3C98F auf #110E08 → 11.9 : 1   (Leucht-Gold für Links)
   ============================================================ */

:root {
  /* Flächen — warmes Fast-Schwarz, nie #000 (aufgehellt 15.08.) */
  --bg:            #110E08;   /* Grundton (Banner-Welt, +1/2 Stufe) */
  --surface:       #1B1610;   /* Karten, Formulare */
  --surface-warm:  #221C13;   /* Sektions-Wechsel, ruhige Bänder */

  /* Schrift — warmes Licht auf Dunkel (mut/label leicht angehoben) */
  --ink:           #F4EEDF;
  --ink-soft:      #CFC5AE;
  --ink-mut:       #B0A58E;
  --label:         #9E927A;

  /* Akzent: Gold wird im Dunkel zur Lichtfarbe */
  --gold:          #C9A86B;   /* jetzt auch als Text sicher (8.5:1) */
  --gold-soft:     rgba(201, 168, 107, 0.13);   /* Gold-Hauch-Fläche */
  --gold-deep:     #E3C98F;   /* text-sicheres Leucht-Gold (Links, Akzente) */

  --line:          #332A1C;   /* Hairlines/Borders */
  --line-strong:   #453A28;

  --success:       #8FCB9B;
  --error:         #E39A8B;

  /* Typografie — Brand-Fonts bleiben (selbst gehostet, DSGVO) */
  --font-anchor:   'Fraunces', Georgia, serif;
  --font-display:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --t-display:     clamp(2.7rem, 1.4rem + 5vw, 5.2rem);
  --t-title:       clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem);
  --t-sub:         clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --t-body:        clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  --t-label:       0.74rem;

  --space-section: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --radius:        10px;
  --radius-sm:     7px;
  /* Schatten tragen im Dunkel die Hintergrund-Tinte (nie generisches Schwarz-auf-Schwarz-Grau) */
  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop:    0 2px 8px rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.5);
  /* Artefakt-Tiefe: Schwärze + ein Hauch Gold-Aura (Glas fängt Licht) */
  --shadow-artifact: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 30px rgba(0, 0, 0, 0.45),
                     0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 0 44px rgba(201, 168, 107, 0.07);
  /* Glas-Bausteine (Dark-Glass-Makeover; Ton folgt der Aufhellung 15.08.) */
  --glass-bg:      rgba(30, 24, 16, 0.6);
  --glass-line:    rgba(201, 168, 107, 0.22);
  --glass-inner:   inset 0 1px 0 rgba(244, 238, 223, 0.07);

  --easing-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast:        160ms;
  --d-normal:      280ms;
}

/* ---------- Fonts (selbst gehostet, unverändert) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/public/fonts/Fraunces.woff2') format('woff2-variations'),
       url('/public/fonts/Fraunces.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/public/fonts/Fraunces-Italic.woff2') format('woff2-variations'),
       url('/public/fonts/Fraunces-Italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/public/fonts/InterTight.woff2') format('woff2-variations'),
       url('/public/fonts/InterTight.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/public/fonts/JetBrainsMono.woff2') format('woff2-variations'),
       url('/public/fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  scroll-padding-top: 5.5rem; /* sticky Nav */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-body);
  min-height: 100vh;
  overflow-x: clip;
}

img, video, svg, canvas { display: block; max-width: 100%; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, select, textarea { background: transparent; border: none; color: inherit; font: inherit; }
::selection { background: var(--gold); color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
:where(input, textarea):focus-visible { outline-offset: 1px; }

/* ---------- Typo-Utilities ---------- */
.t-display {
  font-family: var(--font-anchor);
  font-size: var(--t-display);
  font-weight: 470;
  font-variation-settings: "opsz" 90, "SOFT" 40;
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--ink);
}
.t-title {
  font-family: var(--font-anchor);
  font-size: var(--t-title);
  font-weight: 480;
  font-variation-settings: "opsz" 70, "SOFT" 40;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ink);
}
.t-label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  font-weight: 600;
  line-height: 1.5;
}
.t-body {
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}
.t-body p + p { margin-top: 0.9em; }
.t-body ul, .t-body ol { margin: 0.9em 0; padding-left: 1.2em; list-style: disc; }
.t-body li { margin-bottom: 0.45em; }
.t-body strong { color: var(--ink); font-weight: 600; }
.t-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 10000;
  background: var(--ink); color: #fff;
  padding: 0; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  font-size: 0.85rem; border-radius: 6px; text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible {
  width: auto; height: auto; padding: 0.8rem 1.1rem;
  overflow: visible; clip-path: none;
}

main { display: block; }

section {
  padding-block: var(--space-section);
  padding-inline: clamp(1.25rem, 4vw, 4rem);
}
.wrap { max-width: 72rem; margin-inline: auto; }
.wrap--narrow { max-width: 54rem; margin-inline: auto; }

/* Sektions-Kopf */
.section-head { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head .t-body { margin-top: 0.3rem; }

/* ============================================================
   NAV — sticky, warmweiß, ruhig
   ============================================================ */
#nav {
  position: sticky; top: 0; inset-inline: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-normal) ease, box-shadow var(--d-normal) ease;
}
#nav.nav--scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(36, 30, 20, 0.02), 0 6px 24px rgba(36, 30, 20, 0.05);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.32em;
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1;
  color: var(--ink);
}
.brand-strong { font-weight: 750; }
.brand-light  { font-weight: 380; color: var(--ink-mut); }
.logo-atom { fill: none; stroke: var(--gold-deep); stroke-width: 1.4; transform: translateY(-1px); }

.nav-links {
  display: flex; gap: clamp(1.1rem, 2.5vw, 2.2rem);
  font-size: 0.92rem; font-weight: 500;
}
.nav-links a {
  color: var(--ink-soft);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); border-bottom-color: var(--gold); }
@media (max-width: 1024px) { .nav-links { display: none; } }

.nav-right { display: flex; align-items: center; gap: 0.9rem; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 0.1rem;
  padding: 0.18rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.lang-switch-opt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  padding: 0.3rem 0.55rem; border-radius: 999px; color: var(--ink-mut);
  transition: color var(--d-fast) ease, background var(--d-fast) ease;
}
.lang-switch-opt.is-active { background: var(--ink); color: #fff; font-weight: 600; }
.lang-switch:hover .lang-switch-opt:not(.is-active) { color: var(--ink); }
.lang-switch--menu { align-self: flex-start; margin-bottom: 1rem; }

.menu-toggle {
  display: none; align-items: center; gap: 0.55em;
  min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 550; color: var(--ink-soft);
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.menu-toggle:hover { color: var(--ink); border-color: var(--ink-mut); }
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-toggle-bars span { display: block; width: 15px; height: 2px; border-radius: 2px; background: currentColor; }
@media (max-width: 1024px) { .menu-toggle { display: inline-flex; } }
/* Hinweis: .cta (weiter unten) setzt display:inline-flex bei gleicher
   Spezifität — deshalb hier .cta.nav-cta, damit das Verstecken gewinnt. */
@media (max-width: 1024px) { .cta.nav-cta { display: none; } }

/* ============================================================
   CTA-Buttons — solide, freundlich, eindeutig
   ============================================================ */
.cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  transition: background var(--d-fast) ease, border-color var(--d-fast) ease,
              color var(--d-fast) ease, transform var(--d-fast) var(--easing-out),
              box-shadow var(--d-fast) ease;
}
.cta:hover, .cta:focus-visible {
  background: #3A3222;
  border-color: #3A3222;
  box-shadow: 0 6px 18px rgba(36, 30, 20, 0.18);
}
.cta:active { transform: translateY(1px); }
.cta-arrow { transition: transform var(--d-normal) var(--easing-out); flex: none; }
.cta:hover .cta-arrow, .cta:focus-visible .cta-arrow { transform: translateX(4px); }

.cta--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong);
  font-weight: 550;
}
.cta--ghost:hover, .cta--ghost:focus-visible {
  background: var(--surface);
  color: var(--ink); border-color: var(--ink-mut);
  box-shadow: 0 4px 14px rgba(36, 30, 20, 0.08);
}
.cta--xl { min-height: 54px; padding: 1rem 2.1rem; font-size: 1.05rem; }
.nav-cta { min-height: 42px; padding: 0.55rem 1.15rem; font-size: 0.92rem; }
.cta-bracket { color: rgba(255,255,255,0.6); }
.cta--ghost .cta-bracket { color: var(--gold-deep); }

/* ============================================================
   MOBILE MENU — <dialog>, warmweiß, Vollbild
   ============================================================ */
.mobile-menu {
  border: none; max-width: none; max-height: none;
  width: 100vw; height: 100dvh;
  background: var(--bg); color: var(--ink);
  padding: 1rem clamp(1.25rem, 5vw, 2rem) 2rem;
  display: none; flex-direction: column;
}
.mobile-menu[open] { display: flex; }
.mobile-menu::backdrop { background: rgba(36, 30, 20, 0.3); }
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 0.4rem 1.6rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu-close {
  font-size: 1.9rem; line-height: 1; color: var(--ink-mut);
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.mobile-menu-close:hover { color: var(--ink); background: var(--surface-warm); }
.mobile-menu-nav { flex: 1; display: flex; align-items: center; }
.mobile-menu-nav ul { width: 100%; display: flex; flex-direction: column; gap: 0.2rem; }
.mobile-menu-nav a {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0.85rem 0.2rem;
  font-family: var(--font-anchor);
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-weight: 480; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu-nav a:hover .mm-label { color: var(--gold-deep); }
.mm-idx { font-family: var(--font-mono); font-size: 0.7rem; color: var(--gold-deep); }
.mobile-menu-foot { display: flex; flex-direction: column; padding-top: 1.4rem; }
.mobile-menu-cta { width: 100%; }

/* ============================================================
   01 · HERO — Klartext links, Angebotskarte rechts
   ============================================================ */
#hero {
  padding-top: clamp(2.5rem, 3rem + 3vw, 6rem);
  padding-bottom: clamp(3rem, 2.5rem + 3vw, 5.5rem);
}
.hero-grid {
  max-width: 72rem; margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
}
.hero-text { display: flex; flex-direction: column; gap: 1.4rem; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6em; }
.hero-eyebrow::before {
  content: ''; width: 22px; height: 2px; background: var(--gold); border-radius: 2px;
}
.hero-h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 90, "SOFT" 80;
}
.hero-subhead {
  font-size: var(--t-sub);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 34rem;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.4rem; }
.hero-proof {
  display: flex; gap: 0.5em; align-items: baseline; flex-wrap: wrap;
  font-size: 0.92rem; color: var(--ink-mut);
}
.hero-proof a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.hero-proof a:hover { color: var(--ink); }

/* Signature: die Angebotskarte — das schriftliche Angebot,
   dem Handwerker vertrauen. Ruhig, wie ein sauberes Dokument. */
.offer-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 3vw, 2rem);
  position: relative;
}
.offer-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
}
.offer-card-title { font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; }
.offer-card-brand { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--label); text-transform: uppercase; }
.offer-rows { display: flex; flex-direction: column; }
.offer-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px dashed var(--line-strong);
}
.offer-row:last-child { border-bottom: none; }
.offer-row dt { font-size: 0.94rem; color: var(--ink-mut); }
.offer-row dd {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  text-align: right;
}
.offer-row--price dd { font-size: 1.45rem; font-weight: 700; }
.offer-row--price dt { color: var(--ink); font-weight: 600; }
.offer-foot {
  margin-top: 0.4rem; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.82rem; color: var(--ink-mut);
}
.offer-seal {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-deep);
  background: var(--gold-soft);
}
.offer-seal svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.3; }

/* Sanfte Entrance — der reduced-motion-Kill-Switch (unten) stoppt
   sie bei echter Nutzer-Präferenz; fill-mode both endet sichtbar. */
.hero-text { animation: rise-in 0.7s var(--easing-out) both; }
.hero-stage { animation: rise-in 0.7s var(--easing-out) 0.12s both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO-BÜHNE — das Angebots-Dokument als Artefakt: leicht gedreht
   wie auf dem Schreibtisch, Gold-Orbit (Marken-Atom, riesig und
   leise) dahinter. Hover richtet das Dokument auf.
   ============================================================ */
.hero-stage { position: relative; }
.hero-orbit {
  position: absolute; inset: -18% -14%;
  width: auto; height: auto; max-width: none;
  pointer-events: none; z-index: 0;
  color: var(--gold);
  opacity: 0.5;
}
.hero-orbit ellipse { fill: none; stroke: currentColor; stroke-width: 0.55; }
.hero-orbit circle  { fill: currentColor; stroke: none; }
/* Bestandsfehler, gemessen am 2026-08-03 (bestand identisch auf der Live-Seite):
   das seitliche -14% liess den Orbit auf 390px-Viewports 29px ueber den rechten
   Rand ragen -> body.scrollWidth 419 statt 390, die ganze Seite liess sich seitlich
   schieben. Auf schmalen Screens seitlich buendig; oben/unten bleibt der Ueberstand,
   dort erzeugt er keinen horizontalen Scroll. */
@media (max-width: 640px) {
  .hero-orbit { inset: -18% 0; }
}
.hero-stage .offer-card {
  position: relative; z-index: 1;
  transform: rotate(-1.6deg);
  box-shadow: var(--shadow-artifact);
  transition: transform 0.5s var(--easing-out), box-shadow 0.5s ease;
  /* Papier: hauchfeine Körnung + warmer Lichteinfall von oben links */
  background:
    linear-gradient(160deg, #FFFFFF 0%, #FFFDF8 55%, #FBF6EC 100%);
}
.hero-stage .offer-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--shadow-pop);
}
.offer-stamp {
  position: absolute; top: -17px; right: 18px;
  transform: rotate(7deg);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
}

/* Mini-Beweis-Strip unter den CTAs: drei echte Screenshots als
   Münzen — der Link führt zur Beweis-Sektion. */
.hero-proofstrip {
  display: inline-flex; align-items: center; gap: 0.8rem;
  margin-top: 0.2rem;
  font-size: 0.92rem; color: var(--ink-mut);
  align-self: flex-start;
}
.hero-proofstrip:hover .proof-label, .hero-proofstrip:focus-visible .proof-label { color: var(--ink); }
.proof-thumbs { display: inline-flex; }
.proof-thumbs img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; object-position: left top;
  border: 2px solid var(--bg);
  box-shadow: 0 2px 8px rgba(36, 30, 20, 0.18);
}
.proof-thumbs img + img { margin-left: -11px; }
.proof-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); transition: color var(--d-fast) ease; }

/* ============================================================
   02 · REFERENZEN — Echte Kunden, echte Seiten
   ============================================================ */
#referenzen { background: var(--surface-warm); }

/* --- Geräte-Rahmen: Browser-Chrome um echte Screenshots --- */
.browser-frame {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-artifact);
}
.bf-bar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  background: linear-gradient(#FBF8F2, #F3EDE1);
  border-bottom: 1px solid var(--line);
}
.bf-dots { display: inline-flex; gap: 5px; flex: none; }
.bf-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-strong); display: inline-block;
}
.bf-url {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--ink-mut);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-badge {
  flex: none;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 4px;
}
.bf-badge--live { color: var(--success); border: 1px solid #BAD3BF; background: #EDF4EE; }
.bf-badge--demo { color: var(--ink-mut); border: 1px solid var(--line-strong); background: var(--bg); }
.browser-frame img { width: 100%; height: auto; }

/* --- Telefon-Rahmen mit auto-scrollendem Screenshot --- */
.phone {
  display: block;
  width: 100%;
  border-radius: clamp(16px, 2vw, 26px);
  border: clamp(5px, 0.7vw, 8px) solid var(--ink);
  background: var(--ink);
  box-shadow: var(--shadow-artifact);
  overflow: hidden;
  position: relative;
}
.phone-screen {
  --phone-screen-h: clamp(230px, 25vw, 320px);
  display: block;
  height: var(--phone-screen-h);
  overflow: hidden;
  border-radius: inherit;
  background: #103B34; /* dunkelgrüner Platzhalter-Ton, bis das Bild geladen ist */
}
.phone-screen img {
  width: 100%; height: auto;
  animation: phone-pan 26s ease-in-out 1.2s infinite alternate;
}
@keyframes phone-pan {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% + var(--phone-screen-h))); }
}

/* --- Die eine echte Referenz: große Beweis-Komposition --- */
.ref-feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 860px) { .ref-feature { grid-template-columns: 1fr; } }
.ref-shot { position: relative; padding-bottom: clamp(1.8rem, 4vw, 2.6rem); padding-right: clamp(2rem, 5vw, 3.6rem); }
.ref-shot .phone {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: clamp(120px, 13vw, 158px);
  transform: rotate(2deg);
}
.ref-body { display: flex; flex-direction: column; gap: 0.9rem; }
.ref-live {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.82rem; font-weight: 650; color: var(--success);
  letter-spacing: 0.04em;
}
.ref-live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(47, 107, 63, 0.16);
}
.ref-name { font-family: var(--font-anchor); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 520; line-height: 1.12; }
.ref-branch { font-size: 0.9rem; color: var(--ink-mut); }
.ref-desc { color: var(--ink-soft); line-height: 1.65; font-size: 0.98rem; }
.ref-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: 0.95rem; color: var(--gold-deep);
  align-self: flex-start;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 0.15em;
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.ref-link:hover, .ref-link:focus-visible { color: var(--ink); border-color: var(--ink); }
.ref-link .ext { font-size: 0.85em; }
.ref-note { margin-top: clamp(1.6rem, 3vw, 2.2rem); font-size: 0.95rem; color: var(--ink-mut); max-width: 60ch; }

/* --- Beispiel-Designs: drei sichtbar VERSCHIEDENE Demo-Welten --- */
.examples-strip {
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line-strong);
}
.examples-lead { font-size: 0.98rem; color: var(--ink-mut); max-width: 64ch; margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.demo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
@media (max-width: 760px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-card { display: flex; flex-direction: column; gap: 0.75rem; }
.demo-card .browser-frame {
  box-shadow: var(--shadow-card);
  transition: transform var(--d-normal) var(--easing-out), box-shadow var(--d-normal) ease;
}
.demo-card .browser-frame img {
  aspect-ratio: 1264 / 800; object-fit: cover;
  transition: transform 0.6s var(--easing-out);
}
.demo-card:hover .browser-frame, .demo-card:focus-visible .browser-frame {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}
.demo-card:hover .browser-frame img { transform: scale(1.035); }
.demo-meta { display: flex; align-items: baseline; gap: 0.55em; font-size: 0.92rem; }
.demo-meta strong { font-weight: 700; color: var(--ink); letter-spacing: 0.01em; }
.demo-meta span { color: var(--ink-mut); font-size: 0.9em; }
.demo-meta .ext { margin-left: auto; color: var(--gold-deep); }

/* ============================================================
   03 · PRICING — der Pauschalpreis, groß und ruhig
   ============================================================ */
#pricing {
  text-align: center;
  background: radial-gradient(ellipse 55% 46% at 50% 34%, rgba(201, 168, 107, 0.13), transparent 72%);
}
.pricing-inner { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.pricing-capacity {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.88rem; color: var(--ink-mut);
  padding: 0.45rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface);
}
.pricing-capacity::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.pricing-number {
  font-family: var(--font-anchor);
  font-size: clamp(4rem, 2.5rem + 8vw, 7.5rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pricing-currency { color: var(--gold-deep); font-weight: 420; }
.pricing-tagline { font-size: var(--t-sub); color: var(--ink); font-weight: 550; }
.pricing-fineprint { font-size: 0.92rem; color: var(--ink-mut); max-width: 46ch; line-height: 1.6; }
.pricing-included {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.7rem 2rem;
  margin-block: 1.2rem 0.6rem;
  text-align: left;
}
@media (max-width: 640px) { .pricing-included { grid-template-columns: 1fr; } }
.pricing-included li { display: flex; gap: 0.65em; align-items: baseline; color: var(--ink-soft); }
.pi-check { color: var(--success); font-weight: 700; flex: none; }
.pricing-anchor { font-size: 0.92rem; color: var(--ink-mut); max-width: 52ch; line-height: 1.65; }
.anchor-strike { color: var(--ink-soft); font-weight: 550; }

/* --- Kalkulator: „Stellen Sie Ihr Paket zusammen" ---
   Gleiche Dokument-Familie wie die Hero-Angebotskarte: Papier,
   Rechnungsposten, Summenzeile mit Doppelstrich. Der Besucher
   schreibt sein eigenes Angebot (Endowment-Effekt). */
.calc-card {
  width: min(100%, 34rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  text-align: left;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFDF8 55%, #FBF6EC 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-artifact);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.calc-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink);
}
.calc-title { font-weight: 700; font-size: 1.02rem; }
.calc-brand { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--label); text-transform: uppercase; }

.calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px dashed var(--line-strong);
}
.calc-row--base .calc-name { font-weight: 600; color: var(--ink); }
.calc-base-check {
  flex: none; align-self: center;
  width: 21px; height: 21px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  font-size: 0.75rem; font-weight: 700;
}
.calc-left { display: flex; gap: 0.7rem; align-items: baseline; min-width: 0; }
.calc-name { font-size: 0.96rem; color: var(--ink-soft); }
.calc-sub { display: block; font-size: 0.78rem; color: var(--ink-mut); margin-top: 0.15rem; }
.calc-price {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.98rem; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}

/* Add-on-Zeile = großes Label, ganze Zeile klickbar */
.calc-row--addon { cursor: pointer; transition: background var(--d-fast) ease; }
.calc-row--addon:hover { background: rgba(201, 168, 107, 0.07); }
.calc-check {
  flex: none; align-self: center;
  appearance: none; -webkit-appearance: none;
  width: 21px; height: 21px; border-radius: 5px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease;
}
.calc-check::before {
  content: '';
  width: 11px; height: 11px;
  transform: scale(0);
  transition: transform var(--d-fast) var(--easing-out);
  background: #fff;
  clip-path: polygon(14% 44%, 0 62%, 38% 100%, 100% 18%, 84% 6%, 38% 70%);
}
.calc-check:checked { background: var(--gold-deep); border-color: var(--gold-deep); }
.calc-check:checked::before { transform: scale(1); }
.calc-check:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.calc-row--addon:has(.calc-check:checked) .calc-name { color: var(--ink); font-weight: 600; }

/* Gruppen im Kalkulator: trennen optisch, ohne den Rechnungs-Stil zu brechen */
.calc-gruppe { border: none; margin: 0; padding: 0; }
.calc-gruppe legend {
  padding: 1.1rem 0 0.2rem;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}

/* Hosting-Wahl: zwei Radio-Zeilen im selben Rechnungs-Stil */
.calc-hosting { border: none; margin: 0; padding: 0; }
.calc-hosting legend {
  padding: 0.9rem 0 0.2rem;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.calc-radio {
  flex: none; align-self: center;
  appearance: none; -webkit-appearance: none;
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: border-color var(--d-fast) ease;
}
.calc-radio::before {
  content: '';
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold-deep);
  transform: scale(0);
  transition: transform var(--d-fast) var(--easing-out);
}
.calc-radio:checked { border-color: var(--gold-deep); }
.calc-radio:checked::before { transform: scale(1); }
.calc-radio:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.calc-row--hosting:has(.calc-radio:checked) .calc-name { color: var(--ink); font-weight: 600; }

.calc-total-row {
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 3px double var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.calc-monthly-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: 0.4rem;
}
.calc-monthly-label { font-size: 0.9rem; color: var(--ink-mut); }
.calc-monthly-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.02rem; font-weight: 650; color: var(--ink);
  white-space: nowrap;
}
.calc-monthly-val small { font-weight: 500; color: var(--ink-mut); font-size: 0.8em; }
.calc-total-label { font-weight: 700; font-size: 1rem; }
.calc-total {
  font-family: var(--font-anchor);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  font-weight: 520; color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.calc-total-currency { color: var(--gold-deep); font-weight: 420; }
.calc-anchor { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-mut); line-height: 1.55; }
.calc-cta { width: 100%; margin-top: 1.1rem; }
.calc-note { margin-top: 0.7rem; font-size: 0.8rem; color: var(--ink-mut); line-height: 1.5; }

/* ============================================================
   04 · WHY — vier Versprechen (Trust-Substanz)
   ============================================================ */
/* #why-Flächenregel entfernt 15.08.: #why ist keine eigene Sektion mehr,
   sondern der Kern-Block des Nacht-Vorspanns (Block 30c) — die alte
   surface-warm-Fläche malte dort einen abgesetzten Kasten hinter den Text. */
.why-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.why-pillars { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.2rem; }
.why-pillar {
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
  padding: 0.45rem 0.95rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
}
.why-list { display: flex; flex-direction: column; counter-reset: why; }
.why-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-strong);
  align-items: baseline;
}
.why-item:first-child { padding-top: 0.2rem; }
.why-idx {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  color: var(--gold-deep);
}
.why-text { color: var(--ink-soft); line-height: 1.65; }
.why-cite { padding-top: 1.15rem; font-size: 0.92rem; color: var(--ink-mut); font-style: italic; font-family: var(--font-anchor); }

/* ============================================================
   05 · STATS — vier ehrliche Eckdaten
   ============================================================ */
#stats { padding-block: clamp(2.2rem, 4vw, 3.5rem); }
.stats-inner {
  max-width: 72rem; margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .stats-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stats-inner { grid-template-columns: 1fr; } }
.stat-cell {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold);
}
.stat-num {
  font-family: var(--font-anchor); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  font-weight: 500; color: var(--ink); line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-num small { font-size: 0.45em; font-family: var(--font-display); font-weight: 550; color: var(--ink-mut); letter-spacing: 0.02em; }
.stat-key { font-weight: 650; font-size: 0.95rem; color: var(--ink); }
.stat-cap { font-size: 0.88rem; color: var(--ink-mut); line-height: 1.5; }

/* ============================================================
   06 · PROCESS — fünf Tage als sichtbare Zeitleiste (keine Tabs)
   ============================================================ */
.process-steps {
  display: flex; flex-direction: column;
  max-width: 54rem;
}
.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 3vw, 2.2rem);
  position: relative;
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.process-step:last-child { padding-bottom: 0; }
.process-day {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  position: relative;
}
.process-day-dot {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
  border: 1.5px solid var(--gold);
  color: var(--ink);
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 650;
  flex: none;
  transition: background 0.5s ease, border-color 0.5s ease;
}
.process-step::before {
  content: '';
  position: absolute; left: 25.5px; top: 56px; bottom: 4px;
  width: 1.5px; background: var(--line-strong);
}
/* Gold-Verbinder: zeichnet sich beim Scrollen (nur unter data-anim;
   ohne JS/Motion ist er von Anfang an voll gezeichnet). */
.process-step::after {
  content: '';
  position: absolute; left: 25.5px; top: 56px; bottom: 4px;
  width: 1.5px; background: var(--gold);
  transform-origin: top;
}
html[data-anim] .process-step::after {
  transform: scaleY(0);
  transition: transform 0.9s var(--easing-out) 0.15s;
}
html[data-anim] .process-step.is-reached::after { transform: scaleY(1); }
html[data-anim] .process-day-dot { background: var(--surface); }
html[data-anim] .process-step.is-reached .process-day-dot {
  background: var(--gold-soft);
  border-color: var(--gold-deep);
}
.process-step:last-child::before, .process-step:last-child::after { display: none; }
.process-body { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.35rem; }
.process-meta { display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap; }
.process-daylabel { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.process-tag {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.process-h { font-family: var(--font-anchor); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 500; line-height: 1.2; color: var(--ink); }
.process-p { color: var(--ink-soft); line-height: 1.65; max-width: 58ch; }
.process-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.3rem; }
.process-list li {
  display: flex; gap: 0.6em; align-items: baseline;
  font-size: 0.94rem; color: var(--ink-mut);
}
.process-list li::before { content: '—'; color: var(--gold-deep); flex: none; }

/* ============================================================
   07 · ADD-ONS — schlichte Liste statt Live-Demo-Bühne
   ============================================================ */
#addons { background: var(--surface-warm); }
.addons-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 900px) { .addons-grid { grid-template-columns: 1fr; } }
.addons-lead-h em { font-style: italic; font-variation-settings: "opsz" 70, "SOFT" 80; }
.addons-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 640px) { .addons-list { grid-template-columns: 1fr; } }
.addon-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.addon-name { font-weight: 650; color: var(--ink); font-size: 1rem; }
.addon-desc { font-size: 0.92rem; color: var(--ink-mut); line-height: 1.55; }
.addons-note { grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink-mut); margin-top: 0.3rem; }

/* ============================================================
   08 · INHABER — inhabergeführt, persönlich erreichbar
   ============================================================ */
.owner-grid {
  max-width: 54rem; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 640px) { .owner-grid { grid-template-columns: 1fr; } }
.owner-badge {
  width: clamp(110px, 16vw, 150px); aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-soft), #DFCFA8);
  border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-anchor); font-weight: 520;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}
.owner-body { display: flex; flex-direction: column; gap: 0.9rem; }
.owner-name { font-weight: 700; color: var(--ink); }
.owner-facts { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.3rem; }
.owner-facts li { display: flex; gap: 0.6em; align-items: baseline; font-size: 0.95rem; color: var(--ink-soft); }
.owner-facts li::before { content: '·'; color: var(--gold-deep); font-weight: 700; flex: none; }
.owner-facts a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.owner-facts a:hover { color: var(--ink); }

/* ============================================================
   09 · INTEGRATIONS — nüchterne Liste
   ============================================================ */
#integrations { background: var(--surface-warm); }
.integrations-inner { max-width: 72rem; margin-inline: auto; }
.integrations-body { margin-top: 0.6rem; }
.integrations-list {
  margin-top: clamp(1.6rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .integrations-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .integrations-list { grid-template-columns: 1fr; } }
.ints-cat {
  display: block;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--label);
  padding-bottom: 0.6rem; margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-strong);
}
.ints-group li { padding-block: 0.28rem; color: var(--ink-soft); font-size: 0.97rem; }

/* ============================================================
   10 · FAQ — Accordion
   ============================================================ */
.faq-accordion { max-width: 54rem; }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item:first-child { border-top: 1px solid var(--line-strong); }
.faq-toggle {
  width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem 0.2rem;
  text-align: left;
  transition: color var(--d-fast) ease;
}
.faq-toggle:hover .faq-q { color: var(--gold-deep); }
.faq-q { font-weight: 620; font-size: 1.08rem; color: var(--ink); line-height: 1.4; }
.faq-plus {
  flex: none;
  font-family: var(--font-mono); font-size: 1.15rem; color: var(--gold-deep);
  transition: transform var(--d-normal) var(--easing-out);
}
.faq-toggle[aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
.faq-panel { padding: 0 0.2rem 1.4rem; }
.faq-panel[hidden] { display: none; }

/* ============================================================
   11 · FINAL CTA
   ============================================================ */
#final-cta {
  text-align: center;
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(201, 168, 107, 0.16), transparent 70%),
    var(--surface-warm);
  border-top: 1px solid var(--line);
}
.final-cta-inner { max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.final-cta-headline em { font-style: italic; font-variation-settings: "opsz" 90, "SOFT" 80; }
.final-cta-body { text-align: center; }
.final-cta-substext { font-size: 0.92rem; color: var(--ink-mut); }
.final-cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 0.4rem; }
.final-cta-trust {
  display: flex; gap: clamp(1.4rem, 4vw, 3rem); flex-wrap: wrap; justify-content: center;
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
  width: 100%;
}
.final-cta-trust li { display: flex; flex-direction: column; gap: 0.2rem; }
.trust-key { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.trust-val { font-weight: 650; font-size: 0.98rem; color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  border-top: 1px solid var(--line);
  padding: clamp(2.2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 4rem) 2.2rem;
  background: var(--bg);
}
.footer-grid {
  max-width: 72rem; margin-inline: auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-tagline { margin-top: 0.8rem; font-size: 0.95rem; }
.footer-col .t-label { margin-bottom: 0.8rem; }
.footer-col li { padding-block: 0.22rem; font-size: 0.95rem; }
.footer-col a { color: var(--ink-soft); }
.footer-col a:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.footer-meta-line { color: var(--ink-mut); font-size: 0.9rem; }
.footer-copy { color: var(--ink-mut); font-size: 0.88rem; align-self: end; }

/* ============================================================
   BOOKING MODAL — gleiche DOM-Struktur wie zuvor (booking-modal.js
   hängt an diesen Klassen), nur hell restyled.
   ============================================================ */
.modal {
  /* margin: auto explizit — der globale Reset (* { margin: 0 })
     überschreibt sonst das UA-Centering des <dialog> im Top-Layer */
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop);
  padding: clamp(1.2rem, 3vw, 2rem);
  width: min(94vw, 34rem);
  max-height: min(92dvh, 46rem);
  overflow-y: auto;
}
.modal::backdrop { background: rgba(36, 30, 20, 0.38); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 280ms var(--easing-out); }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
.modal-close {
  position: absolute; top: 0.7rem; right: 0.7rem;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; color: var(--ink-mut);
  border-radius: 50%;
}
.modal-close:hover { color: var(--ink); background: var(--surface-warm); }

.booking-head { display: flex; align-items: baseline; gap: 0.7em; padding-right: 3rem; }
.booking-head-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); align-self: center; }
.booking-head-label { font-weight: 700; font-size: 1.05rem; }
.booking-head-meta { font-size: 0.85rem; color: var(--ink-mut); }

.booking-tabs {
  display: flex; gap: 1.4rem;
  margin-top: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.booking-tab {
  position: relative;
  padding: 0.6rem 0.1rem 0.7rem;
  font-size: 0.92rem; font-weight: 550; color: var(--ink-mut);
  transition: color var(--d-fast) ease;
}
.booking-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: transparent;
  transition: background var(--d-fast) ease;
}
.booking-tab--active { color: var(--ink); }
.booking-tab--active::after { background: var(--gold-deep); }
.booking-tab:hover { color: var(--ink); }

.booking-panel { padding-top: 1.2rem; }
.booking-panel[hidden] { display: none; }

.bw-steps { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 1.2rem; }
.bw-steps__item {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-size: 0.8rem; color: var(--ink-mut);
}
.bw-steps__item + .bw-steps__item::before {
  content: ''; width: 22px; height: 1px; background: var(--line-strong);
  margin-inline: 0.4rem;
}
.bw-steps__dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--ink-mut);
}
.bw-steps__num { font-size: 0.62rem; }
.bw-steps__item--active { color: var(--ink); font-weight: 600; }
.bw-steps__item--active .bw-steps__dot { border-color: var(--gold-deep); color: var(--gold-deep); }
.bw-steps__item--done .bw-steps__dot { border-color: var(--success); color: var(--success); background: #EDF4EE; }
.bw-steps__item--done { color: var(--ink-soft); }

.bw-step { display: flex; flex-direction: column; gap: 1.2rem; }
.bw-step[hidden] { display: none; }
.bw-step__head { display: flex; flex-direction: column; gap: 0.4rem; }
.bw-step__title { font-weight: 700; font-size: 1.05rem; }
.bw-step__hint { font-size: 0.9rem; color: var(--ink-mut); line-height: 1.55; }
.bw-back {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.85rem; color: var(--ink-mut);
  align-self: flex-start;
  min-height: 34px;
}
.bw-back:hover { color: var(--ink); }
.bw-back__arrow { font-size: 1.05em; }

.bw-calendar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.45rem;
}
@media (max-width: 480px) { .bw-calendar { grid-template-columns: repeat(3, 1fr); } }
.bw-day {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.55rem 0.3rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease, transform var(--d-fast) ease;
}
.bw-day:hover { border-color: var(--ink-mut); background: var(--bg); }
.bw-day--active { background: var(--ink); border-color: var(--ink); color: #fff; }
.bw-day--active .bw-day__weekday, .bw-day--active .bw-day__month { color: rgba(255,255,255,0.75); }
.bw-day--disabled, .bw-day:disabled { opacity: 0.38; cursor: not-allowed; }
.bw-day__weekday { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mut); }
.bw-day__date { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 650; }
.bw-day__month { font-size: 0.68rem; color: var(--ink-mut); }

.bw-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
@media (max-width: 480px) { .bw-slots { grid-template-columns: 1fr 1fr; } }
.bw-slot {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease;
}
.bw-slot:hover { border-color: var(--ink-mut); background: var(--bg); }
.bw-slot--active { background: var(--ink); border-color: var(--ink); color: #fff; }
.bw-slot__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.98rem; font-weight: 600; }
.bw-slot__local { font-size: 0.68rem; color: var(--ink-mut); }
.bw-slot--active .bw-slot__local { color: rgba(255,255,255,0.75); }
.bw-slots__empty { grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink-mut); padding-block: 0.6rem; }

.bw-continue { align-self: flex-start; }
.bw-continue:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.bw-summary {
  font-size: 0.92rem; color: var(--ink);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem;
  display: inline-flex; gap: 0.5em; align-items: baseline;
}
.bw-summary:empty { display: none; }
.bw-summary__icon { opacity: 0.75; }

.bw-form { display: flex; flex-direction: column; gap: 1rem; }
.bw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .bw-form-row { grid-template-columns: 1fr; } }
.bw-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.bw-field > span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.bw-field input, .bw-field textarea {
  /* width:100% + min-width:0 — Inputs haben eine intrinsische
     Mindestbreite (size-Attribut) und sprengen sonst die 1fr-Grid-Spalte */
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.7rem 0.85rem;
  font-size: 1rem; color: var(--ink);
  transition: border-color var(--d-fast) ease;
}
.bw-field input:hover, .bw-field textarea:hover { border-color: var(--ink-mut); }
.bw-field input:focus-visible, .bw-field textarea:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 0; border-color: var(--gold-deep);
}
.bw-field textarea { resize: vertical; min-height: 7rem; }

.bw-channels { border: none; display: flex; flex-direction: column; gap: 0.5rem; }
.bw-channels legend { font-size: 0.85rem; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 0.45rem; }
.bw-channels-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bw-channel {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 0.9rem; color: var(--ink-soft);
  cursor: pointer;
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease, color var(--d-fast) ease;
}
.bw-channel:hover { border-color: var(--ink-mut); }
.bw-channel:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.bw-channel:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.bw-channel input {
  appearance: none; -webkit-appearance: none;
  width: 0; height: 0; position: absolute;
}
.bw-submit { align-self: flex-start; }
.bw-fineprint { font-size: 0.82rem; color: var(--ink-mut); line-height: 1.55; }
.bw-privacy a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.bw-result:empty { display: none; }
.bw-result__card {
  display: flex; align-items: flex-start; gap: 0.85rem;
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-top: 1.1rem;
}
.bw-result__card--success { background: #EDF4EE; border: 1px solid #BAD3BF; }
.bw-result__card--error   { background: #F9ECE9; border: 1px solid #E4C0B9; }
.bw-result__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; }
.bw-result__icon--success { color: var(--success); border: 1.5px solid var(--success); }
.bw-result__icon--error   { color: var(--error); border: 1.5px solid var(--error); }
.bw-result__text { flex: 1; }
.bw-result__title { font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.bw-result__body { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.bw-btn-ghost {
  flex: none; align-self: center;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.bw-btn-ghost:hover { color: var(--ink); border-color: var(--ink-mut); }

/* ============================================================
   STICKY CTA — dezente Leiste unten
   ============================================================ */
#sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  transform: translateY(110%);
  transition: transform var(--d-normal) var(--easing-out);
  pointer-events: none;
}
#sticky-cta.is-visible { transform: translateY(0); pointer-events: auto; }
.sticky-cta-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 72rem; margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -8px 30px rgba(36, 30, 20, 0.12);
  padding: 0.75rem clamp(1rem, 3vw, 1.6rem);
}
.sticky-cta-meta { display: flex; gap: 0.5em; align-items: baseline; flex-wrap: wrap; font-size: 0.9rem; color: var(--ink-soft); }
.sticky-cta-price { font-weight: 700; color: var(--ink); }
.sticky-cta-sep { color: var(--line-strong); }
.sticky-cta-btn { min-height: 44px; padding: 0.6rem 1.3rem; font-size: 0.95rem; flex: none; }
@media (max-width: 560px) {
  .sticky-cta-prom { display: none; }
}

/* ============================================================
   ANGEBOTS-ERWEITERUNG 2026-08-03 — Leistungen · Lead-Demo ·
   Automationen · Termin-Demo.
   ------------------------------------------------------------
   Nutzt ausschließlich die Tokens von oben. Kontrast-Regel des
   Hell-Pivots gilt weiter: Gold roh (#C9A86B) NIE als Textfarbe
   auf hellem Grund (2.1:1) — für Text immer --gold-deep (4.6:1).
   Steht bewusst VOR dem Reveal- und Reduced-Motion-Block, damit
   die dortigen Regeln diese Klassen mit abdecken.
   ============================================================ */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- Editorial-Akzent: EIN kursives Gold-Wort pro Sektionstitel.
   gold-deep (4.6:1) — Gold roh ist auf hell als Textfarbe verboten. ---------- */
.t-title em {
  font-style: italic;
  font-variation-settings: "opsz" 70, "SOFT" 80;
  color: var(--gold-deep);
}

/* ---------- Beweis-Leiste (ehem. #stats, jetzt direkt unterm Hero) ---------- */
.beweis-band {
  padding-block: 0;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.beweis-inner {
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
}
.beweis-cell {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.35rem 1.3rem;
  border-left: 1px solid var(--line);
}
.beweis-cell:first-child { border-left: none; }
.beweis-num {
  font-family: var(--font-anchor);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 500; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.beweis-num small {
  font-family: var(--font-mono); font-size: 0.62em;
  font-weight: 400; color: var(--ink-mut);
}
.beweis-key {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--label); margin-top: 0.3rem;
}
.beweis-cap { font-size: 0.82rem; line-height: 1.45; color: var(--ink-mut); }
.beweis-cell--lead { background: var(--gold-soft); border-left: none; }
.beweis-cell--lead .beweis-num { color: var(--gold-deep); }
.beweis-cell--lead .beweis-key { color: var(--gold-deep); }
.beweis-link {
  color: var(--gold-deep); text-decoration: none; font-weight: 600;
  align-self: flex-start; border-bottom: 1px solid transparent;
}
.beweis-link:hover, .beweis-link:focus-visible { border-bottom-color: var(--gold-deep); }
@media (max-width: 940px) {
  .beweis-inner { grid-template-columns: 1fr 1fr; }
  .beweis-cell--lead { grid-column: 1 / -1; }
  .beweis-cell { border-left: none; border-top: 1px solid var(--line); }
  .beweis-cell:nth-child(even) { border-left: 1px solid var(--line); }
  .beweis-cell--lead { border-top: none; }
}

/* ---------- Leistungen: vier Karten ---------- */
.leist-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.leist-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.leist-tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--gold-soft);
  padding: 0.25rem 0.5rem; border-radius: 3px;
}
.leist-name {
  font-family: var(--font-anchor);
  font-size: 1.3rem; font-weight: 500; line-height: 1.25;
  color: var(--ink); margin: 0.15rem 0 0;
}
.leist-desc { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.leist-price {
  margin-top: auto; padding-top: 0.7rem;
  font-family: var(--font-anchor); font-size: 1.45rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.leist-price--soft { font-size: 1rem; color: var(--ink-mut); font-family: var(--font-display); }
.leist-link {
  margin-top: auto; padding-top: 0.7rem;
  font-weight: 600; font-size: 0.95rem;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid transparent; align-self: flex-start;
}
.leist-link:hover, .leist-link:focus-visible { border-bottom-color: var(--gold-deep); }

/* ---------- Lead-Demo ---------- */
.ld-card {
  display: flex; flex-direction: column; gap: 1.3rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.ld-controls { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.ld-field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; flex: 1 1 13rem; }
.ld-label {
  font-family: var(--font-display); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label); font-weight: 600;
}
.ld-select {
  font: inherit; font-size: 1rem; color: var(--ink);
  min-height: 48px; padding: 0.6rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.ld-select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.ld-select:disabled { opacity: 0.55; cursor: not-allowed; }

.ld-results {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (max-width: 620px) { .ld-results { grid-template-columns: repeat(2, 1fr); } }
.ld-cell { background: var(--surface); padding: 0.95rem 0.9rem; }
.ld-cell-label {
  display: block; font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--label);
  font-weight: 600; margin-bottom: 0.35rem;
}
.ld-cell-value {
  display: block; font-family: var(--font-anchor);
  font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 500; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ld-cell--hot .ld-cell-value { color: var(--gold-deep); }

/* Die Kiez-Nachtkarte — das eine Signature-Element der Seite.
   Metapher wird physisch: Betriebe ohne Website sind "dunkel im Netz" —
   die Karte zeigt sie als goldene Lichter in der Nacht. Bewusst der
   einzige dunkle Block der Seite (wie die GLUT/CUIVRE-Referenz-Shots):
   warmes Nacht-Braun, KEIN kaltes Tech-Schwarz — die helle Linie
   (Luke-Feedback) bricht das nicht, es ist ein Fenster, kein Theme. */
.ld-mapwrap { margin: 0; }
.ld-map {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 7;
  background:
    radial-gradient(90% 130% at 50% 108%, rgba(201, 168, 107, 0.16) 0%, transparent 60%),
    linear-gradient(175deg, #241D13 0%, #1B1610 58%, #171209 100%);
  border: 1px solid #33291B;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 14px rgba(0, 0, 0, 0.35);
}
.ld-grid { stroke: rgba(233, 221, 196, 0.09); stroke-width: 0.3; fill: none; }
.ld-dot {
  fill: var(--gold-soft);
  opacity: 0.95;
  /* Achtung Skalierung: drop-shadow rechnet im SVG-userSpace (viewBox 100
     breit, gerendert ~1084px = Faktor ~11). 0.2/0.6 wirken wie ~2px/6.5px
     Halo um den 12px-Kern (r=0.55) — Stadtlicht, kein Bokeh-Ball.
     Gemessen per getBoundingClientRect am 03.08. */
  filter: drop-shadow(0 0 0.2px rgba(228, 206, 158, 0.95))
          drop-shadow(0 0 0.6px rgba(201, 168, 107, 0.55));
}
html[data-anim] .ld-dot {
  animation: ld-pop 480ms var(--easing-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes ld-pop { from { opacity: 0; transform: scale(0.4); transform-origin: center; } }
.ld-mapcap {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--ink-mut);
  padding-top: 0.55rem;
}

/* ---------- Hero-Spice: Preisanker + Risk-Reversal + echte Kapazität ---------- */
.hero-anker {
  font-family: var(--font-anchor);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.8rem);
  line-height: 1.3; color: var(--ink);
  margin: 0.2rem 0 0;
}
.hero-anker s {
  color: var(--ink-mut);
  text-decoration-color: var(--gold-deep);
  text-decoration-thickness: 2px;
}
.hero-anker strong { color: var(--gold-deep); font-weight: 600; }
/* Hero-Umbau 2026-08-10: Der Anker trägt jetzt die Risikoumkehr mit
   <mark> — gleicher Gold-Unterstreich wie zuvor in .hero-reversal,
   sonst fiele das UA-Default-Gelb hinein. */
.hero-anker mark {
  background: linear-gradient(transparent 62%, var(--gold-soft) 62%);
  color: var(--ink); font-weight: 650; padding-inline: 0.06em;
}
.hero-reversal {
  font-size: var(--t-sub); line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
.hero-reversal mark {
  background: linear-gradient(transparent 62%, var(--gold-soft) 62%);
  color: var(--ink); font-weight: 650; padding-inline: 0.06em;
}
.hero-reversal strong { color: var(--gold-deep); font-weight: 650; }
.hero-subhead { margin-top: 0.1rem; }
/* Fix 16.08. (Handy-Befund William): display:flex machte <strong> und den
   Resttext zu ZWEI nebeneinander umbrechenden Spalten — auf 390 px ein
   kaputter Zwei-Spalten-Look. Jetzt Fließtext mit hängendem Gold-Punkt. */
.hero-kapazitaet {
  margin: 0.65rem 0 0;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--ink-mut);
  display: block; position: relative; padding-left: 1.15em; line-height: 1.6;
}
.hero-kapazitaet::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-deep);
  position: absolute; left: 0; top: 0.4em;
}
.hero-kapazitaet strong { color: var(--ink); font-weight: 600; }

/* ---------- CTA-Energie: Gold-Schimmer-Sweep bei Hover (nur mit Motion) ---------- */
.cta { overflow: hidden; }
html[data-anim] .cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(228, 206, 158, 0.32) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
html[data-anim] .cta:hover::before,
html[data-anim] .cta:focus-visible::before {
  transform: translateX(120%);
  transition: transform 0.55s var(--easing-out);
}

/* ---------- Final-CTA als Nacht-Schluss (Klammer zur Kiez-Nachtkarte) ----------
   ID im Selektor ist Pflicht: #final-cta (Zeile ~1070) setzt den hellen
   Grund mit ID-Spezifität — eine reine Klasse würde verlieren. */
#final-cta.final-cta--nacht {
  background:
    radial-gradient(75% 110% at 50% 115%, rgba(201, 168, 107, 0.2) 0%, transparent 62%),
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(228, 206, 158, 0.75) 49%, transparent 52%),
    radial-gradient(1.5px 1.5px at 31% 68%, rgba(228, 206, 158, 0.5) 49%, transparent 52%),
    radial-gradient(2px 2px at 46% 22%, rgba(228, 206, 158, 0.6) 49%, transparent 52%),
    radial-gradient(1.5px 1.5px at 62% 55%, rgba(228, 206, 158, 0.45) 49%, transparent 52%),
    radial-gradient(2px 2px at 74% 28%, rgba(228, 206, 158, 0.65) 49%, transparent 52%),
    radial-gradient(1.5px 1.5px at 87% 62%, rgba(228, 206, 158, 0.55) 49%, transparent 52%),
    linear-gradient(175deg, #241D13 0%, #1B1610 58%, #171209 100%);
}
.final-cta--nacht .final-cta-label { color: var(--gold); }
.final-cta--nacht .final-cta-headline { color: #F6F1E6; }
.final-cta--nacht .final-cta-headline em { color: var(--gold-soft); }
.final-cta--nacht .final-cta-body { color: rgba(246, 241, 230, 0.82); }
.final-cta--nacht .final-cta-substext { color: rgba(246, 241, 230, 0.6); }
.final-cta--nacht .final-cta-trust { border-top-color: rgba(233, 221, 196, 0.18); }
.final-cta--nacht .trust-key { color: rgba(228, 206, 158, 0.75); }
.final-cta--nacht .trust-val { color: #F6F1E6; }
/* CTAs invertiert: Gold-Karte auf Nacht, Ghost hell umrandet */
.final-cta--nacht .cta--nacht {
  background: var(--gold); border-color: var(--gold); color: #241D13;
}
.final-cta--nacht .cta--nacht:hover,
.final-cta--nacht .cta--nacht:focus-visible {
  background: var(--gold-soft); border-color: var(--gold-soft);
  box-shadow: 0 8px 26px rgba(201, 168, 107, 0.35);
}
.final-cta--nacht .cta--ghost {
  color: #F6F1E6; border-color: rgba(233, 221, 196, 0.35); background: transparent;
}
.final-cta--nacht .cta--ghost:hover,
.final-cta--nacht .cta--ghost:focus-visible {
  background: rgba(246, 241, 230, 0.08); color: #F6F1E6;
  border-color: rgba(233, 221, 196, 0.6);
}
.final-cta--nacht .cta--ghost .cta-bracket { color: var(--gold-soft); }

/* Live-testbar-Marker der Leistungskarten */
.leist-card--live { border-color: var(--gold); }
.leist-tag--live {
  display: inline-flex; align-items: center; gap: 0.42em;
  color: var(--gold-deep); background: var(--gold-soft);
}
.leist-tag--live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-deep); flex: none;
}
html[data-anim] .leist-tag--live i { animation: live-puls 2.2s ease-in-out infinite; }
@keyframes live-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 109, 52, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(138, 109, 52, 0); }
}

.ld-satz {
  margin: 0; padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-anchor); font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.5; color: var(--ink);
}
.ld-foot { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.ld-cta { flex: none; }
.ld-source { margin: 0; flex: 1 1 20rem; font-size: 0.82rem; line-height: 1.55; color: var(--ink-mut); }
.ld-card[data-ld-error] .ld-satz { border-left-color: var(--line-strong); }

/* ---------- Kostenrechner (17.08., Williams Problem-first-Werkzeug) ----------
   Gleiche Kartensprache wie .ld-card; eigenes kr-Präfix gegen
   Klassennamen-Kollisionen (Lektion 13.08.). Kein rAF — die Anzeige
   hängt an input-Events (js/kostenrechner.js). */
.kr-card {
  display: flex; flex-direction: column; gap: 1.3rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.kr-regler {
  display: grid; gap: 0.85rem 1.7rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kr-field { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; min-width: 0; }
.kr-label {
  font-family: var(--font-display); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label); font-weight: 600;
}
.kr-zeile { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.kr-range {
  flex: 1 1 auto; min-width: 0; min-height: 44px;   /* Touch-Ziel */
  accent-color: var(--gold);
}
.kr-range:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.kr-wert {
  flex: none; min-width: 5.6ch; text-align: right;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
.kr-satz {
  margin: 0; padding-left: 1rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-anchor); font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.5; color: var(--ink);
}
.kr-results {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (max-width: 620px) { .kr-results { grid-template-columns: 1fr; } }
.kr-cell { background: var(--surface); padding: 0.95rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; }
.kr-cell__l {
  font-family: var(--font-display); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label); font-weight: 600;
}
.kr-cell__v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink);
}
.kr-cell--gesamt .kr-cell__v { color: var(--gold-deep); }
.kr-cell__n { font-size: 0.8rem; color: var(--ink-mut); }
.kr-foot { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.kr-cta { flex: none; }
.kr-source { margin: 0; flex: 1 1 20rem; font-size: 0.82rem; line-height: 1.55; color: var(--ink-mut); }

/* ---------- Automationen ---------- */
.auto-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.auto-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.45rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.auto-name {
  font-family: var(--font-anchor); font-size: 1.22rem; font-weight: 500;
  line-height: 1.3; color: var(--ink); margin: 0;
}
.auto-desc { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.auto-try {
  margin-top: auto; padding-top: 0.6rem;
  font-weight: 600; font-size: 0.92rem; color: var(--gold-deep);
  text-decoration: none; border-bottom: 1px solid transparent; align-self: flex-start;
}
.auto-try:hover, .auto-try:focus-visible { border-bottom-color: var(--gold-deep); }
.auto-card--soon { background: var(--surface-warm); border-style: dashed; }
.auto-soon {
  margin-top: auto; padding-top: 0.6rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--ink-mut); font-style: italic;
}
.auto-foot {
  margin: 1.4rem 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--ink-mut);
  max-width: 52rem;
}

/* ---------- Termin-Demo ---------- */
.tt-card {
  display: grid; gap: clamp(1.4rem, 3vw, 2.5rem);
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 780px) { .tt-card { grid-template-columns: 1fr; } }
.tt-text { display: flex; flex-direction: column; gap: 0.7rem; }
.tt-text .t-title { margin: 0.2rem 0 0; }
.tt-fact {
  margin: 0.3rem 0 0; padding: 0.85rem 1rem;
  background: var(--surface); border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft);
}
.tt-fact strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-cta { align-self: flex-start; margin-top: 0.5rem; }
.tt-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.tt-roles li {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.9rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.tt-role-h {
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700;
}
.tt-role-d { font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }

/* ============================================================
   SCROLL-REVEALS — nur unter html[data-anim] (JS setzt das Attribut
   ausschließlich, wenn Motion erlaubt ist → der reduced-Pfad hat
   per Konstruktion NIE versteckte Inhalte).
   Stagger pro Element über --rv-i (0, 1, 2, …).
   ============================================================ */
/* 2026-08-10: Grundzustand von 0 auf 0.12 + kürzerer Weg — beim schnellen
   Scrollen wirkten Sektionen als „Löcher", weil komplett unsichtbare
   Inhalte erst nach IO-Trigger + 0,75s-Transition erschienen. Ein leiser
   Rest-Schimmer hält die Seite auch mid-transition als Seite lesbar. */
html[data-anim] .rv {
  opacity: 0.12;
  transform: translateY(16px);
  transition: opacity 0.65s var(--easing-out), transform 0.65s var(--easing-out);
  transition-delay: calc(var(--rv-i, 0) * 80ms);
}
html[data-anim] .rv.rv-in { opacity: 1; transform: none; }

/* ============================================================
   Reduced Motion — alles Nicht-Essentielle aus.
   html[data-force-motion] (QA-Hook ?motion=1, s. js/motion.js)
   bleibt ausgenommen, sonst ist Motion auf diesem Host nie prüfbar.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html:not([data-force-motion]) *,
  html:not([data-force-motion]) *::before,
  html:not([data-force-motion]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   CHAT-ASSISTENT (2026-08-07)
   ------------------------------------------------------------
   Bewusst KEIN Modal: Das Panel liegt neben der Seite, sperrt den
   Scroll nicht und lässt die Preissektion lesbar. Das <dialog>
   bleibt allein der Buchung vorbehalten.

   Ausschließlich bestehende Tokens — kein neuer Farbwert. Gold roh
   (#C9A86B, 2.1:1) erscheint nur als Fläche/Linie, Textgold ist
   immer --gold-deep (4.6:1).

   Der Launcher teilt sich den unteren Rand mit #sticky-cta. Statt
   eines zweiten Observers setzt initStickyCta() in js/app.js die
   Variable --chat-launcher-bottom.
   ============================================================ */

:root {
  --sticky-cta-h: 4.5rem;
  --chat-launcher-bottom: 1.25rem;

  /* Die eingebauten CSS-Easings sind zu weich — ihnen fehlt der Anschlag, der
     eine Bewegung absichtsvoll wirken lässt. Diese Kurve startet schnell und
     bremst spät: das Auge sieht die Reaktion sofort. */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Launcher ---------- */
.chat-launcher {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: var(--chat-launcher-bottom);
  z-index: 89;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px;                       /* Touch-Ziel */
  padding: 0.7rem 1.15rem;
  font-family: var(--font-display);
  font-size: 0.92rem; font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-artifact);     /* mehrstufig weich: liegt auf der Seite, klebt nicht */
  cursor: pointer;
  transition: bottom var(--d-normal) var(--ease-out-strong),
              transform 160ms var(--ease-out-strong),
              box-shadow 160ms var(--ease-out-strong);
}
.chat-launcher::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);                /* dekorativ, nie Text */
  flex: none;
  /* Ruhiger Puls: zeigt „hier antwortet etwas", ohne zu zappeln. */
  box-shadow: 0 0 0 0 rgba(201, 168, 107, 0.55);
}
html[data-anim] .chat-launcher::before { animation: chat-pulse 2.8s var(--easing-out) infinite; }
@keyframes chat-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 107, 0); }
  35%           { box-shadow: 0 0 0 5px rgba(201, 168, 107, 0.18); }
}
/* Hover nur dort, wo es einen Zeiger gibt — auf Touch löst :hover beim Tippen
   aus und lässt den Zustand hängen. */
@media (hover: hover) and (pointer: fine) {
  .chat-launcher:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
}
/* Druckfeedback: ohne das wirkt ein Klick, als hätte die Seite ihn überhört. */
.chat-launcher:active { transform: scale(0.97); }
.chat-launcher:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.chat-launcher.is-hidden { display: none; }

/* ---------- Panel ---------- */
.chat-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: 1.25rem;
  z-index: 95;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100dvh - 3rem));
  display: flex; flex-direction: column;
  /* Das Panel ist ein <section> und erbt sonst die globale Regel weiter oben
     (`section { padding-block: var(--space-section) }`, ~92 px oben UND unten).
     Am 2026-08-07 gemessen: Kopf 92 px unter der Panel-Kante, Verlauf auf 78 px
     gequetscht bei 1262 px Inhalt. Generische Elementnamen erben globale Regeln. */
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
/* PFLICHT, nicht Kosmetik: `display: flex` oben ist spezifischer als die
   UA-Regel [hidden] { display: none }. Ohne diese Zeile bleibt das
   „versteckte" Panel im Layout — auf dem Handy mit inset:0 als
   unsichtbare Vollbild-Fläche, die JEDEN Tap der Seite abfängt.
   Im Test 2026-08-07 exakt so aufgetreten (Playwright: „intercepts
   pointer events"). Gilt genauso für .chat-chips weiter unten. */
.chat-panel[hidden] { display: none; }
/* Das Panel wächst aus dem Launcher, nicht aus seiner Mitte — es gehört sichtbar
   zu dem Knopf, der es geöffnet hat. Start bei 0.96, nie bei 0: nichts in der
   echten Welt erscheint aus dem Nichts. */
.chat-panel { transform-origin: bottom right; }
html[data-anim] .chat-panel.is-open { animation: chat-in 200ms var(--ease-out-strong); }
@keyframes chat-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  /* Als Blatt von unten, nicht aus der Mitte skaliert. */
  .chat-panel { transform-origin: bottom center; }
  html[data-anim] .chat-panel.is-open { animation: chat-in-sheet 240ms var(--ease-out-strong); }
  @keyframes chat-in-sheet {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (max-width: 560px) {
  /* BOTTOM-SHEET statt randlosem Vollbild (2026-08-13).
     Vorher `inset: 0` + `border: 0` + `border-radius: 0`: Das Panel deckte
     die Seite komplett ab. Zusammen mit dem sofortigen input.focus() (Tastatur
     schiebt hoch) und dem iOS-Autozoom durch die 14.72-px-Eingabe sprang beim
     Antippen alles gleichzeitig — Williams Befund „komisches Format, wirkt
     verbuggt". Jetzt bleibt der obere Seitenrand stehen: erkennbar ein Fenster
     ÜBER der Seite, mit Griff-Leiste als Sheet-Signal. */
  .chat-panel {
    inset: auto 0 0 0;
    width: auto;
    max-height: min(86vh, 40rem);
    max-height: min(86dvh, 40rem);         /* dvh gewinnt, wo unterstützt */
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    /* Die Sheet-Unterkante darf nicht unter dem Home-Indicator liegen. */
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Griff-Leiste: macht ohne Worte klar, dass das Blatt zum Wegschieben ist. */
  .chat-panel::before {
    content: '';
    position: absolute; top: 7px; left: 50%;
    width: 36px; height: 4px; margin-left: -18px;
    border-radius: 999px;
    background: var(--line-strong);
    z-index: 2;
  }
  .chat-head { padding-top: 1.15rem; }     /* Platz für den Griff */
}

/* ---------- Kopf ---------- */
.chat-head {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1rem 0.85rem;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
}
/* Feine Goldkante als Markenzeichen — dieselbe Sprache wie die Zeitleiste im
   Ablauf und der Rand der Preiskarten. */
.chat-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 38%, transparent 78%);
}
.chat-head__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.chat-head__title {
  font-family: var(--font-anchor);        /* Serif wie die Überschriften der Seite */
  font-weight: 600; font-size: 1rem; letter-spacing: 0.005em; color: var(--ink);
}
.chat-head__hint  { font-size: 0.71rem; color: var(--ink-mut); line-height: 1.35; }
.chat-close {
  flex: none; width: 34px; height: 34px;
  font-size: 1.4rem; line-height: 1;
  color: var(--ink-mut); background: transparent;
  border: 1px solid transparent; border-radius: 50%;
  cursor: pointer;
  transition: background 140ms var(--ease-out-strong), color 140ms var(--ease-out-strong),
              transform 140ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .chat-close:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
}
.chat-close:active { transform: scale(0.92); }
.chat-close:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ---------- Verlauf ---------- */
.chat-log {
  /* Basis `auto` ist hier korrekt: das Panel hat KEINE feste Höhe, nur eine
     max-height. Der Verlauf bringt seine Inhaltshöhe als Basis mit, das Panel
     wächst mit dem Gespräch — und sobald die max-height erreicht ist, schrumpft
     der Verlauf (min-height: 0) und scrollt. Mit Basis 0 gäbe es nichts zu
     verteilen und das Panel bliebe auf ~240 px stehen (am 2026-08-07 gemessen). */
  flex: 1 1 auto; min-height: 4rem;
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0.9rem 1rem;
  list-style: none;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.chat-msg { max-width: 92%; }
.chat-msg--user { align-self: flex-end; max-width: 85%; }
.chat-msg__text {
  margin: 0; padding: 0.62rem 0.85rem;
  font-size: 0.93rem; line-height: 1.55;
  border-radius: 14px;                    /* weicher als die Karten der Seite: Sprechblase, kein Kasten */
}
.chat-msg--bot  .chat-msg__text {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft);
  border-bottom-left-radius: 5px;         /* Blasen-Ecke zeigt zur Sprecherseite */
}
/* Die eigene Stimme spricht in Gold, nicht in Weiß (2026-08-13).
   Vorher: --ink als Fläche (#F4EEDF) — im dunklen Panel ein greller
   cremefarbener Klotz, der die ganze Dark-Glass-Welt aufbrach. Jetzt
   goldgetöntes Glas mit Gold-Hairline: klar vom Assistenten unterscheidbar
   (Farbe + Eckenform), aber Teil derselben Welt.
   Kontrast: --ink auf bg+16 % Gold ≈ 14:1 — bleibt weit über AA. */
.chat-msg--user .chat-msg__text {
  background: linear-gradient(165deg, rgba(201, 168, 107, 0.17), rgba(201, 168, 107, 0.09));
  border: 1px solid rgba(201, 168, 107, 0.32);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
/* Neue Nachrichten erscheinen, statt zu springen. Nur transform und opacity —
   beides läuft auf der GPU, ohne Layout und Paint. */
html[data-anim] .chat-msg { animation: chat-msg-in 220ms var(--ease-out-strong) both; }
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Tipp-Punkte — nur unter data-anim, sonst steht dort schlichter Text.
   2026-08-13: Die Punkte waren praktisch UNSICHTBAR. Farbe war
   --line-strong (#3B3222) auf der Bot-Blase mit --bg (#0C0A07) —
   das ist Hairline-Farbe, gedacht für Ränder, nicht für Inhalt.
   Im Dunkel-Flip vom 11.08. ist das durchgerutscht. Jetzt --ink-mut
   (#A99E88, 7.2:1 auf bg): deutlich sichtbar, aber ruhig. */
.chat-typing { display: flex; gap: 6px; align-items: center; min-height: 1.5em; }
/* Die Warteblase schmiegt sich an ihren Inhalt. Als Block war sie 300 px
   breit für drei Punkte — ein fast leerer Kasten, der wie ein Fehler aussah. */
.chat-msg--pending .chat-msg__text { width: fit-content; }
.chat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mut);
  opacity: 0.4;                            /* Ruhezustand, falls Animation aus */
}
html[data-anim] .chat-dot {
  animation: chat-blink 1.25s infinite var(--easing-out);
  animation-delay: calc(var(--i) * 160ms);
}
/* Denken, nicht laden: Die Punkte heben sich leicht an und leuchten auf.
   Reine Opazität wirkte wie ein Ladebalken — das Anheben macht daraus
   eine Geste. transform + opacity, beides GPU, kein Layout. */
@keyframes chat-blink {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  28%           { opacity: 1;    transform: translateY(-3px); }
}

/* ---------- Preiskarten ---------- */
.chat-cards { display: grid; gap: 0.5rem; margin-top: 0.55rem; }
.chat-card {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.chat-card__title { font-weight: 700; font-size: 0.86rem; color: var(--ink); }
.chat-card__price { font-family: var(--font-mono); font-size: 0.86rem; color: var(--gold-deep); text-align: right; white-space: nowrap; }
.chat-card__note  { grid-column: 1 / -1; font-size: 0.72rem; color: var(--label); }
.chat-card__desc  { grid-column: 1 / -1; font-size: 0.78rem; color: var(--ink-mut); line-height: 1.45; margin-top: 0.15rem; }

/* ---------- Links, Chips, CTA ---------- */
.chat-links { margin: 0.55rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat-link {
  font-size: 0.8rem; color: var(--gold-deep);
  text-decoration: underline; text-underline-offset: 2px;
}
.chat-cta { margin-top: 0.65rem; width: 100%; min-height: 44px; font-size: 0.9rem; }

.chat-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0 1rem 0.7rem;
}
.chat-chips[hidden] { display: none; }   /* s. Hinweis am .chat-panel */
.chat-chip {
  padding: 0.44rem 0.75rem;
  font-family: var(--font-display); font-size: 0.79rem;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out-strong), color 140ms var(--ease-out-strong),
              transform 140ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .chat-chip:hover { border-color: var(--gold); color: var(--ink); }
}
.chat-chip:active { transform: scale(0.97); }
.chat-chip:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Gestaffelt statt alle auf einmal — 45 ms Abstand, kurz genug um nicht zu bremsen. */
html[data-anim] .chat-chip { animation: chat-msg-in 200ms var(--ease-out-strong) both; }
html[data-anim] .chat-chip:nth-child(2) { animation-delay: 45ms; }
html[data-anim] .chat-chip:nth-child(3) { animation-delay: 90ms; }

/* ---------- Eingabe ---------- */
.chat-form {
  display: flex; gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  padding: 0.55rem 0.7rem;
  /* 16 px HART, nicht in rem (2026-08-13): iOS Safari zoomt beim Fokus
     automatisch hinein, sobald ein Eingabefeld unter 16 px liegt — und
     bleibt teils darin hängen. Der Wert war 0.92rem = 14.72 px, gemessen
     am Live-Stand. Das war die Hauptursache des „verbuggten" Eindrucks
     auf dem Handy. Alle anderen Felder der Seite (Booking, Selects) sind
     bereits bei 1rem = 16 px — dieses hier war die einzige Ausnahme.
     In rem notiert wäre der Schutz weg, sobald jemand die Wurzelgröße ändert. */
  font-family: var(--font-display); font-size: 16px; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.chat-input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.chat-send {
  flex: none; min-height: 44px; padding: 0.55rem 1.05rem;
  font-family: var(--font-display); font-size: 0.88rem; font-weight: 600;
  color: var(--surface); background: var(--ink);
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: transform 140ms var(--ease-out-strong), opacity 140ms var(--ease-out-strong);
}
.chat-send:active:not(:disabled) { transform: scale(0.97); }
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-send:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.chat-foot {
  margin: 0; padding: 0 1rem 0.7rem;
  font-size: 0.68rem; color: var(--label);
}
.chat-foot a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   24 · DARK-GLASS-MAKEOVER (2026-08-11, Wunsch William)
   ------------------------------------------------------------
   Die Banner-Designsprache auf der ganzen Seite: Milchglas-
   Flächen (blur + Gold-Hairline + innere Lichtkante), Gold als
   Licht, feines Grain, Wellen-Fasern im Hero. Dieser Block
   übersteuert gezielt die Hell-Hardcodes der Sektionen oben —
   bewusst am Dateiende (Kaskade), damit der Diff klein bleibt.
   ============================================================ */

/* --- Atmosphäre: Grain + zwei ruhige Gold-Glows ------------- */
html::after {
  content: '';
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
body {
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(201, 168, 107, 0.055), transparent 62%),
    radial-gradient(900px 520px at 96% 34%, rgba(201, 168, 107, 0.04), transparent 60%),
    var(--bg);
}

/* --- Glas-Grundrezept -----------------------------------------
   GEZIELT REDUZIERT 2026-08-13. Vorher trugen sechs Flächen echtes
   Glas: Angebotskarte, Kalkulator, alle Browser-Rahmen, Mobil-Menü,
   Modal, Nav und Chat. Zwei Gründe, warum das weniger wird:

   1. Wirkung. Wenn alles glänzt, glänzt nichts. Glas ist ein Material
      für das EINE Artefakt, nicht für die Grundfläche — genau das
      unterscheidet ein durchdachtes Dunkel von einem, das nach
      Effekt-Voreinstellung aussieht.
   2. Rechenlast. `backdrop-filter` zwingt den Browser, für jede
      Fläche den Hintergrund erneut zu rastern und zu unschärfen.
      Auf einem 200-€-Android — dem Gerät der Zielgruppe — kostet das
      spürbar Bildrate, und zwar dauerhaft, nicht nur beim Scrollen.

   Glas behalten genau zwei: die Angebotskarte im Hero (das
   Signature-Artefakt) und das Chat-Panel (schwebt über der Seite,
   braucht die Trennung). Alles andere bekommt eine matte Fläche mit
   derselben Gold-Hairline — optisch fast identisch, technisch billig. */
.offer-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-artifact), var(--glass-inner);
}
.calc-card,
.browser-frame,
.mobile-menu,
.modal {
  /* Deckend statt durchscheinend: dieselbe Kante, dieselbe Tiefe,
     ohne die Unschärfe-Ebene. */
  background: linear-gradient(165deg, rgba(30, 24, 15, 0.97), rgba(18, 15, 10, 0.98));
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-artifact), var(--glass-inner);
}

/* --- Nav: dunkles Glas statt Warmweiß ----------------------- */
#nav {
  /* Die Navigation liegt über der GESAMTEN Seitenhöhe und ist damit die
     teuerste Blur-Fläche überhaupt: Sie wird bei jedem Scroll-Pixel neu
     berechnet. Deckend kostet sie nichts und sieht im Dunkel praktisch
     gleich aus — der Unterschied war ein Hauch Durchschimmern, den kein
     Besucher benennen könnte. (2026-08-13)

     `backdrop-filter: none` steht hier ausdrücklich: Die Basisregel weiter
     oben stammt noch aus dem hellen Pivot (warmweiß, blur(10px)). Dieser
     Block übersteuert per Kaskade nur, was er BENENNT — die Farbe zu
     überschreiben und den Filter zu vergessen, hätte den teuersten Teil
     stehen lassen. Im Browser nachgemessen: fünf Blur-Flächen statt zwei. */
  background: rgba(12, 10, 7, 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--glass-line);
}
#nav.nav--scrolled { background: rgba(10, 8, 6, 0.985); }

/* --- CTAs: Gold-Licht statt dunkler Fläche (Banner-Pills) ---- */
.cta {
  background: linear-gradient(175deg, #E3C98F 0%, #C9A86B 58%, #B08F4F 100%);
  border-color: rgba(227, 201, 143, 0.6);
  color: #14100A;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 26px rgba(201, 168, 107, 0.22);
}
.cta:hover, .cta:focus-visible {
  background: linear-gradient(175deg, #EFD9A6 0%, #D6B67A 58%, #BE9C5C 100%);
  border-color: rgba(239, 217, 166, 0.7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 34px rgba(201, 168, 107, 0.34);
}
.cta-bracket { color: rgba(20, 16, 10, 0.55); }
.cta--ghost {
  /* Der Blur ist hier ersatzlos weg (13.08.): Auf einer 7-%-Goldfläche von
     der Größe eines Knopfes war er unsichtbar — aber er zwang den Browser,
     für jeden dieser Knöpfe eine eigene Composite-Ebene anzulegen. Bezahlt
     wurde ein Effekt, den niemand sehen konnte. */
  background: rgba(201, 168, 107, 0.09);
  color: var(--gold-deep);
  border-color: var(--glass-line);
  box-shadow: none;
}
.cta--ghost:hover, .cta--ghost:focus-visible {
  background: rgba(201, 168, 107, 0.14);
  color: var(--ink);
  border-color: rgba(201, 168, 107, 0.5);
  box-shadow: 0 0 22px rgba(201, 168, 107, 0.18);
}
.cta--ghost .cta-bracket { color: var(--gold); }

/* --- Kleinzeug, das oben hell hardcodet war ------------------ */
::selection { background: var(--gold); color: #14100A; }
.skip-link { background: var(--gold); color: #14100A; }
.lang-switch-opt.is-active { background: var(--gold); color: #14100A; }
.mobile-menu::backdrop { background: rgba(0, 0, 0, 0.55); }

/* --- Hero: Faser-Wellen (Banner-Match) + leuchtender Orbit --- */
#hero { position: relative; overflow: clip; }
#hero::before {
  content: '';
  position: absolute; inset: -4% 0; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 760' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff8e6' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff8e6' stop-opacity='.85'/%3E%3Cstop offset='.65' stop-color='%23e8c87a' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23c9a24b' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23e8c87a' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23e8c87a' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23c9a24b' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath d='M-60,170 C420,560 760,120 1160,470 S1380,420 1500,440' stroke='url(%23h)' stroke-width='1.8' opacity='.8'/%3E%3Cpath d='M-60,185 C430,572 750,135 1170,480 S1385,432 1500,450' stroke='url(%23m)' stroke-width='1.2' opacity='.65'/%3E%3Cpath d='M-60,152 C410,545 772,102 1150,458 S1375,408 1500,428' stroke='url(%23m)' stroke-width='1.1' opacity='.6'/%3E%3Cpath d='M-60,205 C445,588 740,152 1180,492 S1390,444 1500,462' stroke='url(%23m)' stroke-width='.9' opacity='.45'/%3E%3Cpath d='M-60,135 C400,532 780,88 1145,448 S1372,398 1500,418' stroke='url(%23m)' stroke-width='.8' opacity='.4'/%3E%3Cpath d='M-60,540 C440,180 780,600 1180,240 S1400,300 1500,280' stroke='url(%23h)' stroke-width='1.5' opacity='.6'/%3E%3Cpath d='M-60,556 C450,196 772,612 1188,252 S1405,310 1500,290' stroke='url(%23m)' stroke-width='1' opacity='.5'/%3E%3Cpath d='M-60,522 C430,164 790,586 1172,228 S1395,290 1500,270' stroke='url(%23m)' stroke-width='.9' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
#hero > * { position: relative; z-index: 1; }
.hero-orbit { opacity: 0.75; filter: drop-shadow(0 0 14px rgba(201, 168, 107, 0.35)); }

/* offer-card: vom Papier zum Glas-Artefakt (Gradient-Override) */
.hero-stage .offer-card {
  background:
    linear-gradient(165deg, rgba(34, 27, 17, 0.72) 0%, rgba(22, 18, 12, 0.6) 60%, rgba(16, 13, 9, 0.66) 100%);
}

/* --- Referenzen: Browser-Chrome dunkel ----------------------- */
.bf-bar {
  background: linear-gradient(rgba(28, 23, 16, 0.9), rgba(20, 16, 10, 0.9));
  border-bottom: 1px solid var(--line);
}
.bf-url { background: rgba(12, 10, 7, 0.6); }

/* --- Kalkulator: Rechnung auf Glas --------------------------- */
.calc-card {
  background:
    linear-gradient(165deg, rgba(30, 24, 15, 0.66) 0%, rgba(20, 16, 10, 0.6) 100%);
}
.calc-head { border-bottom-color: var(--gold); }
.calc-base-check { background: var(--gold); color: #14100A; }
.calc-check { background: rgba(12, 10, 7, 0.5); }
.calc-check::before { background: #14100A; }
.calc-check:checked { background: var(--gold); border-color: var(--gold); }

/* --- Booking-Modal: aktive Zustände in Gold ------------------ */
.bw-day--active { background: var(--gold); border-color: var(--gold); color: #14100A; }
.bw-day--active .bw-day__weekday, .bw-day--active .bw-day__month { color: rgba(20, 16, 10, 0.7); }
.bw-slot--active { background: var(--gold); border-color: var(--gold); color: #14100A; }
.bw-slot--active .bw-slot__local { color: rgba(20, 16, 10, 0.7); }
.bw-channel:has(input:checked) { background: var(--gold); border-color: var(--gold); color: #14100A; }

/* --- Ergebniskarte des Buchungsdialogs -----------------------
   Diese beiden Regeln blieben beim Dunkel-Makeover als einzige des
   Dialogs unkorrigiert: oben tragen sie weiter die hellen Flächen
   (#EDF4EE / #F9ECE9), während --ink und --ink-soft hell geworden
   sind. Live gemessen: Titel 1,03:1, Fließtext 1,53:1 — die
   Rückmeldung nach dem Absenden war praktisch unsichtbar, und zwar
   am einzigen Conversion-Punkt der Seite. Wer ein Pflichtfeld
   vergaß, sah auch nicht, welches. (Prüfung 14.08., kritisch)

   Korrigiert wird hier und nicht oben: dort steht der Hell-Bestand
   bewusst, ein Edit an der Stelle würde die helle Fassung zerlegen. */
.bw-result__card--success {
  background: rgba(143, 203, 155, 0.10);
  border-color: rgba(143, 203, 155, 0.35);
}
.bw-result__card--error {
  background: rgba(227, 154, 139, 0.10);
  border-color: rgba(227, 154, 139, 0.35);
}

/* --- Final-CTA („Nacht"): war der Kontrastblock — jetzt die
       gold-hellste Stelle der Seite ----------------------------- */
.final-cta--nacht {
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(201, 168, 107, 0.14), transparent 70%),
    var(--surface-warm);
  border-top: 1px solid var(--glass-line);
}

/* --- Chat: Panel und Launcher auf Glas ----------------------- */
.chat-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-pop), var(--glass-inner);
}
.chat-launcher {
  background: linear-gradient(175deg, #E3C98F, #C9A86B);
  color: #14100A;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 26px rgba(201, 168, 107, 0.25);
}

/* --- Kiez-Nachtkarte: Stadtlichter brauchen echtes Licht -----
       (--gold-soft ist im Dunkel-Flip eine Hauch-Fläche geworden —
       für die ld-dots als FILL wäre das unsichtbar) --------------- */
.ld-dot { fill: #E9CD96; }
.ld-map { border-color: var(--glass-line); }
.ld-grid { stroke: rgba(233, 221, 196, 0.13); }

/* --- Fallback: Glas ohne Blur-Support ------------------------ */
@supports not (backdrop-filter: blur(1px)) {
  .offer-card, .calc-card, .browser-frame, .mobile-menu, .modal, #nav, .chat-panel {
    background: rgba(22, 18, 12, 0.97);
  }
}

/* ============================================================
   25 · AUSPROBIEREN-BÜHNE (2026-08-13)
   ------------------------------------------------------------
   Fünf Reiter (DE; EN vier — kein Assistent) statt drei Sektionen. Die Leiste ist ohne
   JavaScript ausgeblendet — dann stehen alle Panels sichtbar
   untereinander, also der Zustand von vorher. Erst
   js/ausprobieren.js setzt data-ausp-ready und macht daraus
   eine Reiter-Steuerung. Tote Knöpfe ohne JS gibt es so nicht.
   ============================================================ */

.ausp-tabs { display: none; }
.ausp[data-ausp-ready] .ausp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.ausp-tab {
  display: flex; flex-direction: column; gap: 0.15rem;
  min-height: 48px;                        /* Touch-Ziel */
  padding: 0.6rem 1rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--d-fast) var(--easing-out),
              border-color var(--d-fast) var(--easing-out),
              transform var(--d-fast) var(--easing-out);
}
.ausp-tab__k {
  font-family: var(--font-display);
  font-size: 0.98rem; font-weight: 600; color: var(--ink-mut);
  transition: color var(--d-fast) var(--easing-out);
}
.ausp-tab__d {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--label);
}
@media (hover: hover) and (pointer: fine) {
  .ausp-tab:hover { background: rgba(201, 168, 107, 0.06); border-color: var(--line); }
  .ausp-tab:hover .ausp-tab__k { color: var(--ink); }
}
.ausp-tab:active { transform: scale(0.98); }
.ausp-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Der aktive Reiter trägt eine Gold-Kante — dieselbe Sprache wie der
   Kopf des Assistenten und der Rand der Preiskarten. Farbe allein wäre
   zu wenig: Der Zustand muss auch ohne Farbwahrnehmung lesbar sein,
   deshalb zusätzlich Fläche und Kantenstärke. */
.ausp-tab.is-active {
  background: linear-gradient(170deg, rgba(201, 168, 107, 0.14), rgba(201, 168, 107, 0.05));
  border-color: rgba(201, 168, 107, 0.36);
  box-shadow: inset 0 1px 0 rgba(244, 238, 223, 0.06);
}
.ausp-tab.is-active .ausp-tab__k { color: var(--ink); }
.ausp-tab.is-active .ausp-tab__d { color: var(--gold); }

.ausp-panel:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
/* Ohne JS: Abstand zwischen den untereinanderstehenden Panels. */
.ausp:not([data-ausp-ready]) .ausp-panel + .ausp-panel { margin-top: clamp(2.5rem, 6vw, 4rem); }

.ausp-intro { max-width: 62ch; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.ausp-h {
  font-family: var(--font-anchor);
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 0.6rem;
}
.ausp-h em { font-style: italic; color: var(--gold-deep); }

.ausp-note {
  margin-top: 1rem;
  font-size: 0.86rem; color: var(--ink-mut); line-height: 1.6;
}
.ausp-note strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ausp-note a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Andockpunkt des Assistenten ---------- */
.ausp-dock { min-height: 22rem; display: flex; }
.ausp-dock__leer {
  margin: auto; padding: 2rem;
  font-size: 0.9rem; color: var(--label);
}
/* Angedockt hört das Panel auf, ein schwebendes Fenster zu sein:
   keine Fixierung, keine Ecke unten rechts, kein Schließen-Knopf —
   der Reiter selbst ist das Schließen. */
.chat-panel--docked {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 34rem;
  max-height: 30rem;
  border-radius: var(--radius);
  border: 1px solid var(--glass-line);
  animation: none;
}
.chat-panel--docked .chat-close { display: none; }
.chat-panel--docked::before { content: none; }     /* Griff-Leiste nur im Sheet */
@media (max-width: 560px) {
  /* Im Dock gelten die Sheet-Regeln NICHT — sonst klebte das Panel
     wieder am unteren Bildschirmrand statt im Reiter zu sitzen. */
  .chat-panel--docked {
    position: static; inset: auto;
    max-height: 26rem;
    border-radius: var(--radius);
    border-bottom: 1px solid var(--glass-line);
    padding-bottom: 0;
  }
  .ausp-dock { min-height: 20rem; }
}

/* ---------- Reiter-Inhalte: geerbte Blöcke einpassen ---------- */
/* Die Karten kamen aus eigenen Sektionen und brachten deren
   Außenabstände mit. Im Reiter sitzen sie direkt unter dem Intro. */
.ausp-panel > .ld-card,
.ausp-panel > .tt-card { margin-top: 0; }

@media (max-width: 560px) {
  .ausp[data-ausp-ready] .ausp-tabs {
    /* Fünf Reiter passen nicht nebeneinander auf ein Handy: waagerecht
       schiebbar mit Einrastpunkten, statt in fünf Zeilen umzubrechen. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ausp[data-ausp-ready] .ausp-tabs::-webkit-scrollbar { display: none; }
  .ausp-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ============================================================
   26 · VERTRAUENS-SEKTION (2026-08-13)
   ------------------------------------------------------------
   Vier Versprechen, der Inhaber und die häufigen Fragen standen
   vorher als drei eigene Sektionen untereinander — dreimal
   derselbe Zweck (Zweifel ausräumen) auf dreifacher Höhe.
   Jetzt ein Raster: links die Haltung, rechts die Fragen.
   ============================================================ */

.vt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
/* Seit dem 13.08. (Commit c6fb62b, Williams Entscheid) hat diese Sektion nur
   noch zwei Blöcke: Die FAQ ist von der Seite genommen — die Einwände fängt
   jetzt der Assistent ab. Versprechen und Inhaber stehen deshalb
   nebeneinander statt in einer Spalte übereinander. */
.vt-grid > #why     { grid-column: 1; }
.vt-grid > #inhaber { grid-column: 2; }

.vt-inner { max-width: none; }            /* war .wrap — im Raster kein zweiter Container */
.vt-block + .vt-block { margin-top: clamp(2rem, 4vw, 3rem); }

.vt-h {
  font-family: var(--font-anchor);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--ink); text-wrap: balance;
}
.vt-h em { font-style: italic; color: var(--gold-deep); }

/* Der Inhaber-Block brachte sein eigenes zweispaltiges Raster mit.
   In der linken Spalte ist dafür kein Platz — Bild über Text. */
.vt-block .owner-grid { grid-template-columns: 1fr; gap: 1.2rem; }

@media (max-width: 900px) {
  .vt-grid { grid-template-columns: 1fr; }
  .vt-grid > #why, .vt-grid > #inhaber { grid-column: 1; }
}

/* ============================================================
   27 · LEISTUNGEN ALS EDITORIALE ZEILEN (2026-08-13)
   ------------------------------------------------------------
   Vorher: vier gleich große Karten in einem auto-fit-Raster —
   das generischste Layout, das es gibt, und auf jeder zweiten
   Seite im Netz zu sehen. Genau so etwas liest sich als „billig",
   auch wenn Farben und Schrift stimmen.

   Jetzt: ein Verzeichnis. Nummer in Mono, Name als Serif-Zeile,
   Beschreibung in einer schmalen Randspalte, Preis rechts,
   Hairline dazwischen. Beim Überfahren zieht eine Gold-Linie
   von links ein — die einzige Bewegung, die die Zeile braucht.

   Das Markup bleibt unverändert (dieselben .leist-card-Artikel),
   nur die Darstellung ist eine andere. Kein HTML-Umbau, kein
   Risiko für die Inhalte.
   ============================================================ */

.leist-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
  counter-reset: leist;
}

.leist-card {
  /* Raster: Nummer | Name+Preis | Beschreibung */
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 0.4rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0.4rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  counter-increment: leist;
  transition: background var(--d-normal) var(--easing-out);
}
/* Die Nummer ersetzt das Aufzählungszeichen — Verzeichnis, keine Liste. */
.leist-card::before {
  content: counter(leist, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--label);
  padding-top: 0.45rem;
  font-variant-numeric: tabular-nums;
}
/* Die Gold-Linie, die beim Überfahren einzieht. transform statt width:
   keine Layout-Berechnung, läuft auf der GPU. */
.leist-card::after {
  content: '';
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 55%, transparent 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--easing-out);
}
@media (hover: hover) and (pointer: fine) {
  .leist-card:hover { background: rgba(201, 168, 107, 0.035); }
  .leist-card:hover::after { transform: scaleX(1); }
  .leist-card:hover .leist-name { color: var(--ink); }
}

.leist-tag {
  grid-column: 2; grid-row: 1;
  align-self: start; justify-self: start;
  margin-bottom: 0.1rem;
}
.leist-name {
  grid-column: 2; grid-row: 2;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 500; letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-soft);
  transition: color var(--d-fast) var(--easing-out);
  text-wrap: balance;
}
.leist-desc {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: 0.94rem; line-height: 1.65; color: var(--ink-mut);
  max-width: 46ch;
  padding-top: 0.3rem;
}
.leist-price {
  grid-column: 2; grid-row: 3;
  margin-top: 0.5rem; padding-top: 0;
  font-size: 1.15rem; color: var(--gold-deep);
  font-family: var(--font-mono); font-weight: 500;
  letter-spacing: -0.01em;
}
.leist-price--soft { font-size: 0.92rem; color: var(--ink-mut); }
.leist-price small { font-size: 0.78em; color: var(--ink-mut); }
.leist-link {
  grid-column: 3; grid-row: 3;
  margin-top: 0.5rem; padding-top: 0;
  justify-self: start;
}
/* „Auf dieser Seite testbar" braucht im Verzeichnis keinen Rahmen mehr —
   die Zeile selbst ist ruhig genug, dass das Gold-Label trägt. */
.leist-card--live { border-color: var(--line); }

@media (max-width: 800px) {
  .leist-card {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.35rem 1rem;
  }
  .leist-card::before { grid-row: 1 / span 4; }
  .leist-tag  { grid-column: 2; grid-row: 1; }
  .leist-name { grid-column: 2; grid-row: 2; }
  .leist-desc { grid-column: 2; grid-row: 3; max-width: none; padding-top: 0.4rem; }
  /* Fix 16.08. (Handy-Befund William): Preis und Test-Link teilten sich
     DIESELBE Grid-Zelle — bei Lead-Recherche (einzige Zeile mit beidem)
     lagen „490 € + 149 €/Mon" und „Jetzt selbst testen" übereinander. */
  .leist-price { grid-column: 2; grid-row: 4; }
  .leist-link  { grid-column: 2; grid-row: 5; margin-top: 0.15rem; }
}

/* Die Labels waren gefüllte Kästchen — im Verzeichnis drei kleine bunte
   Blöcke, die mit den Serif-Namen um Aufmerksamkeit ringen. Als reine
   Mono-Zeile mit Gold-Punkt ordnen sie sich unter, ohne zu verschwinden. */
.leist-card .leist-tag {
  background: none;
  padding: 0;
  color: var(--label);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}
.leist-card .leist-tag--live { color: var(--gold); }
.leist-card .leist-tag--live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* ============================================================
   28 · ATOM-REISE (2026-08-13)
   ------------------------------------------------------------
   Das Marken-Atom als durchgehender Scroll-Faden. Die Bewegung
   macht js/atom-reise.js; hier steht nur, wie es aussieht.

   z-index 0: hinter allen Inhalten. Das Atom ist ein Ornament,
   das die Seite begleitet — es darf nie über Text liegen.
   ============================================================ */

.atom-reise {
  position: fixed;
  top: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--gold);
  opacity: 0;                                  /* JS blendet ein, sobald im Bild */
  transition: opacity 420ms var(--easing-out);
  will-change: transform;
  /* Perspektive für den Maus-Tilt der inneren Gruppe */
  perspective: 900px;
}
.atom-reise .atom-tilt {
  transform-origin: 100px 100px;
  transform-style: preserve-3d;
}
/* 18.08. (William: „ästhetischer, dezent, mit leichtem Glow"): Bahnen
   feiner und zurückhaltender, dafür Kern und Elektronen mit weichem
   zweischichtigem Gold-Glow — leuchtet, ohne zu schreien. */
.atom-bahn {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  opacity: 0.38;
}
.atom-kern {
  fill: currentColor;
  filter: drop-shadow(0 0 5px rgba(201, 168, 107, 0.6))
          drop-shadow(0 0 16px rgba(201, 168, 107, 0.25));
}
.atom-elektron {
  fill: var(--gold-deep);
  filter: drop-shadow(0 0 4px rgba(227, 201, 143, 0.75))
          drop-shadow(0 0 12px rgba(227, 201, 143, 0.3));
}

/* Der statische Hero-Orbit weicht, sobald das reisende Atom lebt —
   sonst stünden zwei Marken-Atome übereinander im Hero. Dasselbe
   Muster wie beim WebGL-Hero im Juni: Fallback bleibt im DOM,
   verschwindet aber, wenn die bessere Fassung übernimmt. */
html[data-atom] .hero-orbit { opacity: 0; transition: opacity 500ms var(--easing-out); }

/* Inhalte liegen über dem Atom. Ohne diese Stapelung schöbe sich
   die Gold-Bahn über Fließtext — im Dunkel schwer lesbar. */
main > section { position: relative; z-index: 1; }
#nav, #footer, .sticky-cta, #chat-panel, .chat-launcher { z-index: 90; }

/* ============================================================
   29 · REVEALS ÜBER DEM FALZ ABSCHALTEN (2026-08-13)
   ------------------------------------------------------------
   Lighthouse maß im Beweisband einen Kontrast von 1,28 : 1 —
   Text praktisch unsichtbar. Ursache war nicht die Farbe,
   sondern der Reveal-Grundzustand: `opacity: 0.12`, bis der
   IntersectionObserver feuert.

   Für alles unterhalb des ersten Bildschirms ist das richtig.
   Für Hero und Beweisband ist es unsinnig: Sie stehen beim
   Laden bereits im Bild. Der Besucher sieht dort keinen
   Reveal, sondern nur einen Moment lang unleserlichen Text —
   und wer die Seite ohne Zeigegerät oder mit langsamem
   Skript-Start öffnet, sieht ihn länger.

   Ein Reveal für etwas, das ohnehin sichtbar ist, ist kein
   Effekt. Es ist ein Fehler mit Verzögerung.
   ============================================================ */
html[data-anim] #hero .rv,
html[data-anim] #beweis .rv {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ============================================================
   30 · REDESIGN 2026-08-15 (Williams Feedback-Runde)
   ------------------------------------------------------------
   a) Konkurrenz-Check: Einheiten-Raster statt Pseudo-Punktkarte
   b) Ablauf: kompakte Fakten-Zeile statt Bullet-Listen
   c) Vertrauen: aufgelöst zum Nacht-Vorspann vor #final-cta
   d) Licht-Rhythmus (Helligkeits-Variante C aus dem Bakeoff)
   e) Dezente Mikro-Sterne (Vokabular des Final-CTA, sparsam)
   f) Mobil: Überlauf-Fixes 320 px + flache Touch-Ziele
   ============================================================ */

/* ---------- a) Konkurrenz-Check: Einheiten-Raster ----------
   1 Punkt = 1 geprüfter Betrieb. Gold gefüllt = ohne Website,
   Hohlkreis = mit Website — Form UND Farbe tragen den Zustand.
   Border des Hohlkreises: rgba(233,221,196,0.45) ≈ 3.5:1 auf
   surface (WCAG 1.4.11); die Legende nennt die Zahlen zusätzlich
   in Textform, das Raster ist nie alleiniger Träger. */
.ld-raster {
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: clamp(7px, 1.6vw, 10px);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background:
    radial-gradient(80% 120% at 50% 112%, rgba(201, 168, 107, 0.12) 0%, transparent 60%),
    linear-gradient(175deg, #241D13 0%, #1B1610 62%, #191309 100%);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.3);
}
.ld-unit {
  width: clamp(16px, 3.4vw, 22px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 221, 196, 0.45);
}
.ld-unit--ohne {
  border-color: transparent;
  background: #E9CD96;
  box-shadow: 0 0 3px rgba(228, 206, 158, 0.8), 0 0 11px rgba(201, 168, 107, 0.45);
}
html[data-anim] .ld-unit {
  animation: ld-pop 420ms var(--easing-out) backwards;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.ld-key {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(233, 221, 196, 0.45);
  vertical-align: -1px;
}
.ld-key--ohne {
  border-color: transparent; background: #E9CD96;
  box-shadow: 0 0 4px rgba(201, 168, 107, 0.6);
}
.ld-meta { font-size: 0.92rem; color: var(--ink-mut); }
.ld-meta strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }
.ld-meta-sep { padding-inline: 0.35em; color: var(--label); }
/* Der Satz ist jetzt die Hauptaussage (steht ÜBER dem Raster) — eine Stufe größer. */
.ld-card .ld-satz { font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.24rem); }

/* ---------- b) Ablauf kompakt ---------- */
.process-step { padding-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.process-facts { font-size: 0.9rem; color: var(--ink-mut); margin-top: 0.15rem; max-width: 58ch; }

/* ---------- c) Vertrauen → Nacht-Vorspann ----------
   Läuft optisch auf die Schluss-Klammer zu: gleiche Nacht-Töne,
   erster Hauch der Sterne, Gold-Glow von unten. Die Hairline von
   #final-cta bleibt als bewusste Schwelle. */
.vt-vorspann {
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(228, 206, 158, 0.38), transparent 60%),
    radial-gradient(1px 1px at 71% 16%, rgba(228, 206, 158, 0.28), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(228, 206, 158, 0.2), transparent 60%),
    radial-gradient(70% 90% at 50% 118%, rgba(201, 168, 107, 0.1), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, #191309 55%, #201A11 100%);
}
.vt-kern { max-width: 56rem; margin-inline: auto; display: grid; gap: 1.3rem; }
.vt-line em { font-style: italic; color: var(--gold-deep); }
.vt-copy { max-width: 62ch; color: var(--ink-soft); }
.vt-fakten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 2.6rem;
  margin-top: 0.9rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(233, 221, 196, 0.14);
}
.vt-fakten li { display: flex; flex-direction: column; gap: 0.3rem; }
.vtf-k {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.vtf-v { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }
.vtf-v a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.vtf-v a:hover { color: var(--ink); }
@media (max-width: 640px) { .vt-fakten { grid-template-columns: 1fr; } }

/* ---------- d) Licht-Rhythmus (Variante C) ---------- */
#beweis {
  background:
    radial-gradient(1.5px 1.5px at 9% 32%, rgba(228, 206, 158, 0.3), transparent 60%),
    radial-gradient(1px 1px at 82% 20%, rgba(228, 206, 158, 0.24), transparent 60%),
    linear-gradient(180deg, #191309 0%, var(--surface-warm) 30%, var(--surface-warm) 72%, #191309 100%);
}
#was-wir-machen {
  background: linear-gradient(180deg, var(--bg) 0%, #1A140C 50%, var(--bg) 100%);
}
#ausprobieren {
  background: radial-gradient(90% 65% at 50% 0%, rgba(201, 168, 107, 0.11), transparent 62%);
}

/* ============================================================
   31 · GEWICHTUNG (2026-08-17, William)
   ------------------------------------------------------------
   „Ablauf" und „Leistungen" geben vertikalen Raum ab, die
   Ausprobieren-Bühne (mit dem neuen Kostenrechner) trägt mehr
   Gewicht — über Raum, Licht und Kante, nicht über Lautstärke.
   Ist-Höhen vor dem Umbau (Desktop 1280): ausprobieren 1052 px,
   process 1239 px, was-wir-machen 1223 px.
   ============================================================ */
#process, #was-wir-machen { padding-block: calc(var(--space-section) * 0.62); }
#process .section-head, #was-wir-machen .section-head { margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem); }
.process-step { padding-bottom: clamp(0.75rem, 1.6vw, 1.1rem); }
/* Schritt-Anatomie eine Stufe kompakter: kleinere Tages-Punkte (die
   Verbindungslinien hängen an der Punktgröße — left = Punktmitte,
   top = Punkthöhe + Luft), engere Typo. Lesbarkeit bleibt: 0.95rem
   Fließtext bei 1.55 Zeilenhöhe. */
.process-day-dot { width: 44px; height: 44px; }
.process-step::before, .process-step::after { left: 21.25px; top: 48px; }
.process-h { font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.4rem); }
.process-p { font-size: 0.95rem; line-height: 1.55; }
.process-body { gap: 0.45rem; }
.process-facts { margin-top: 0.05rem; }

#ausprobieren { padding-block: calc(var(--space-section) * 1.12); }
.ausp {
  border-color: rgba(201, 168, 107, 0.32);
  box-shadow: 0 0 0 1px rgba(201, 168, 107, 0.10),
              0 2px 8px rgba(0, 0, 0, 0.5),
              0 26px 70px rgba(0, 0, 0, 0.5),
              0 0 110px rgba(201, 168, 107, 0.07);
}

/* Der Kostenrechner ist neu und das Problem-first-Verkaufswerkzeug —
   ein stilles Gold-Etikett am Reiter zieht den Blick, ohne zu schreien. */
.ausp-tab--hot .ausp-tab__k::after {
  content: 'Neu';
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em 0.14em;
  border: 1px solid rgba(201, 168, 107, 0.45);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  vertical-align: 0.15em;
}

/* ---------- Runde 2 (17.08., William: „viel zu groß, kompakter") ----------
   Ablauf: die Timeline wird auf Desktop ein 2-Spalten-Raster — die
   Verbindungslinien fallen dort weg, die Tages-Punkte bleiben.
   Ist vor Runde 2 (Desktop 1280): process 1099, was-wir-machen 1097,
   pricing 2679. */
/* Runde 3 (17.08., William: „muss noch kleiner"): Der Ablauf wird auf
   breiten Screens eine 5-Spalten-LEISTE — ein Blick, fünf Tage, fertig.
   Die Serif-Headlines schrumpfen dort zu Zeilentiteln, die Tertiärzeile
   (Judge: grenzwertig lesbar) entfällt auf Desktop ganz. */
@media (min-width: 980px) {
  .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 1.5rem; max-width: none; }
  .process-step { grid-template-columns: 1fr; gap: 0.5rem; padding-bottom: 0; align-content: start; }
  .process-step::before, .process-step::after { display: none; }
  .process-day { flex-direction: row; }
  .process-day-dot { width: 34px; height: 34px; }
  .process-body { padding-top: 0; gap: 0.35rem; }
  .process-h { font-size: 1rem; line-height: 1.4; }
  .process-p { font-size: 0.85rem; line-height: 1.5; }
  .process-facts { display: none; }
}
@media (min-width: 900px) and (max-width: 979.9px) {
  .process-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 3rem; max-width: none; }
  .process-step { padding-bottom: 0.7rem; }
  .process-step::before, .process-step::after { display: none; }
  .process-step:last-child { grid-column: 1 / -1; }
}
/* Die Sticky-CTA-Leiste schnitt den Text der letzten Ablauf-Karte an —
   Puffer unter der Sektion, damit sie frei ausläuft. */
#process { padding-bottom: calc(var(--space-section) * 0.62 + 3.5rem); }
/* Tertiärzeilen der Schritte waren an der Lesbarkeitsgrenze (Judge:
   52-jähriger am Handy) — eine Stufe heller und minimal größer. */
.process-facts { font-size: 0.92rem; color: var(--ink-soft); }

/* Mobil-Quetschungen aus der Judge-Runde: Das dekorative Karten-Label und
   der Kapazitäts-Nebensatz kosten unter 480 px dem eigentlichen Inhalt
   die Zeile — beide sind dort verzichtbar. */
@media (max-width: 480px) {
  .calc-brand { display: none; }
  .pricing-capacity-zusatz { display: none; }
}

/* ---------- Seiten-Navigation rechts (17.08., js/seiten-nav.js) ----------
   Nur Desktop ≥1200 px. Gold-Punkte, Label erscheint bei Hover/Fokus
   (Kanzlei-Persona: „Punkte ohne Beschriftung nehme ich nicht wahr").
   z-index 80 = unter Header (90), über Sektions-Content (1). */
/* 18.08. (William): Glass-Leiste statt nackter Punkte — Milchglas-Fläche
   in der Banner-Designsprache, Labels DAUERHAFT dezent lesbar, aktiver
   Eintrag in Gold. Größer, aber ruhig. */
.seiten-nav {
  position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%);
  z-index: 80;
  padding: 0.9rem 1rem;
  background: linear-gradient(165deg, rgba(30, 24, 15, 0.55), rgba(16, 13, 9, 0.48));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 168, 107, 0.2);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(244, 238, 223, 0.06);
}
.seiten-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sn-punkt {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
  min-height: 26px; padding: 0.1rem 0.15rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
@media (hover: hover) { .sn-punkt:hover { background: rgba(201, 168, 107, 0.07); } }
.sn-punkt::after {
  content: '';
  flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid rgba(201, 168, 107, 0.55);
  background: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sn-punkt.is-active::after {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(201, 168, 107, 0.55);
}
.sn-punkt:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.sn-label {
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mut);
  opacity: 0.75;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.sn-punkt:hover .sn-label { color: var(--ink-soft); opacity: 1; }
.sn-punkt.is-active .sn-label { color: var(--gold-deep); opacity: 1; }
@media (max-width: 1199.9px) { .seiten-nav { display: none; } }

/* ---------- Runder Kapitel-Knopf an der Seite (Mobil/Tablet, 18.08. v2) ----------
   Ersetzt Kapitel-Leiste UND Burger-Menü (gedoppelter Inhalt, William).
   Ein Glass-KREIS rechts in der Mitte: goldener Scroll-Fortschrittsring,
   „n/8" im Kern. Das Panel poppt rund vom Knopf auf, unten der CTA. */
.fab-nav { position: fixed; right: 0.9rem; top: 50%; transform: translateY(-50%); z-index: 85; }
.fab-knopf {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, rgba(30, 24, 15, 0.72), rgba(16, 13, 9, 0.66));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 168, 107, 0.3);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(244, 238, 223, 0.07);
  cursor: pointer;
  transition: transform 0.16s var(--easing-out), box-shadow 0.2s ease;
}
.fab-knopf:active { transform: scale(0.92); }
.fab-nav.is-offen .fab-knopf {
  border-color: rgba(201, 168, 107, 0.55);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4), 0 0 18px rgba(201, 168, 107, 0.25);
}
.fab-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fab-ring circle { fill: none; stroke-width: 2.5; }
.fab-ring-spur { stroke: rgba(201, 168, 107, 0.18); }
.fab-ring-gold { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 0.15s linear; }
.fab-zaehler {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  color: var(--gold-deep); font-weight: 700;
}
.fab-panel {
  position: absolute; right: calc(100% + 0.7rem); top: 50%; transform: translateY(-50%);
  width: min(76vw, 15.5rem);
  padding: 0.55rem 0.55rem 0.7rem;
  background: linear-gradient(165deg, rgba(30, 24, 15, 0.82), rgba(16, 13, 9, 0.78));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(201, 168, 107, 0.24);
  border-radius: 22px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(244, 238, 223, 0.06);
}
html[data-anim] .fab-panel:not([hidden]) { animation: fab-pop 240ms var(--ease-out-strong); transform-origin: right center; }
@keyframes fab-pop {
  from { opacity: 0; transform: translateY(-50%) scale(0.72); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.fab-liste {
  list-style: none; margin: 0; padding: 0;
  max-height: min(56vh, 21rem); overflow-y: auto;
}
.fab-eintrag {
  display: flex; align-items: center; gap: 0.7em;
  min-height: 44px; padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.93rem; color: var(--ink-soft);
}
.fab-eintrag:active { background: rgba(201, 168, 107, 0.12); }
.fab-eintrag.is-active { color: var(--gold-deep); background: rgba(201, 168, 107, 0.08); }
.fab-nr {
  flex: none;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--label);
}
.fab-eintrag.is-active .fab-nr { color: var(--gold-deep); }
.fab-cta { width: 100%; margin-top: 0.45rem; border-radius: 999px; justify-content: center; }
.fab-knopf:focus-visible, .fab-eintrag:focus-visible, .fab-cta:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Ziehen + Kanten-Magnet: Größen bleiben unangetastet (William) — beim
   Greifen nur Cursor + tieferer Schatten, das Anschnappen federt über
   left/top-Transition. Links geklebt öffnet das Panel nach rechts. */
.fab-knopf { touch-action: none; user-select: none; -webkit-user-select: none; }
/* Während des Ziehens darf nichts auf der Seite markierbar sein —
   sonst „kopiert" der Finger Text unter dem Knopf mit. */
body.is-fab-drag, body.is-fab-drag * { user-select: none !important; -webkit-user-select: none !important; }
.fab-nav.is-dragging .fab-knopf {
  cursor: grabbing;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(201, 168, 107, 0.3);
}
.fab-nav.is-snapping { transition: left 0.32s var(--ease-out-strong), top 0.32s var(--ease-out-strong); }
.fab-nav--links .fab-panel { right: auto; left: calc(100% + 0.7rem); transform-origin: left center; }
html[data-anim] .fab-nav--links .fab-panel:not([hidden]) { transform-origin: left center; }
@media (min-width: 1200px) { .fab-nav { display: none; } }

/* Der Burger oben rechts ist damit überflüssig (William) — der runde
   Kapitel-Knopf trägt Navigation UND CTA. Der Dialog bleibt inert im
   Markup; Ausbau als Aufräum-Punkt notiert. */
#menu-toggle { display: none; }

/* (Kein zusätzliches scroll-margin hier: html trägt seit jeher
   scroll-padding-top: 5.5rem für das Sticky-Nav — ein zweiter Rand
   ADDIERTE sich und ließ jeden Anker 96 px zu tief landen. Am 18.08.
   gemessen und entfernt.) */

/* 18.08. (William: „Seite so kurz wie möglich"): Auf dem Handy verschwindet
   die Angebotskarte samt Bühne — ihre Claims (Festpreis, fünf Werktage,
   14 Tage, Hosting) stehen alle in Hero-Zeile, Beweis-Band und Preisblock.
   Der Kalkulator ist ohnehin das interaktive Pendant. */
@media (max-width: 760px) { .hero-stage { display: none; } }

/* ============================================================
   32 · AUFPLOPP-CHOREOGRAFIE (18.08., William)
   ------------------------------------------------------------
   Alles, was sich öffnet, kommt mit derselben leichten Premium-
   Geste an: kurzer Fade + minimaler Lift + Hauch von Scale —
   dieselbe Sprache wie die bestehende Chat-Einfahrt (chat-in).
   Gated über html[data-anim] (das Motion-Gate der Seite):
   reduced-motion-Nutzer sehen weiterhin sofortiges Erscheinen.
   Nur transform + opacity, GPU-leicht; nur beim ÖFFNEN — ein
   Schließen soll sich anfühlen wie Loslassen, nicht wie Theater. */
html[data-anim] .mobile-menu[open] { animation: pop-auf 260ms var(--ease-out-strong); }
html[data-anim] .mobile-menu[open]::backdrop { animation: backdrop-auf 260ms ease-out; }
html[data-anim] #booking[open] { animation: pop-auf 260ms var(--ease-out-strong); }
html[data-anim] #booking[open]::backdrop { animation: backdrop-auf 260ms ease-out; }
/* (kl-sheet ist dem runden Kapitel-Knopf gewichen — dessen fab-pop
   wohnt bei seinen eigenen Regeln.) */
@keyframes pop-auf {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-auf-oben {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes backdrop-auf { from { opacity: 0; } to { opacity: 1; } }

/* Runde 3 (William): Die Bühne muss auch Technik-Laien zum Klicken bringen —
   die Reiterleiste wird von einer Beschriftung zur SCHALTZENTRALE:
   größere Klickziele, kräftigere Titel, und das Neu-Etikett atmet.
   (17.08. spät: Das ausp-tab--hot-Badge sitzt seit der IA-Runde ungenutzt —
   der Kostenrechner ist eine eigene Sektion; Regeln bleiben für künftige
   „Neu"-Reiter.) */
.ausp-tab { padding: 0.85rem 1.15rem; border-color: var(--line); background: rgba(201, 168, 107, 0.03); }
.ausp-tab__k { font-size: 1.05rem; color: var(--ink-soft); }
.ausp-tab__d { font-size: 0.68rem; }
@media (prefers-reduced-motion: no-preference) {
  .ausp-tab--hot .ausp-tab__k::after { animation: neu-atmen 2.6s ease-in-out infinite; }
  @keyframes neu-atmen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 107, 0); }
    50%      { box-shadow: 0 0 10px 1px rgba(201, 168, 107, 0.35); }
  }
}

/* Leistungen (Runde 3): Listen-Anatomie bleibt, aber eng — Texte sind auf
   eine Zeile Desktop gekürzt (HTML), die Zeilen tragen kaum noch Luft. */
.leist-card { padding: clamp(0.75rem, 1.6vw, 1rem) 0.4rem; }
.leist-desc { font-size: 0.88rem; line-height: 1.45; }
.leist-price { font-size: 1.15rem; padding-top: 0.25rem; }
#was-wir-machen .section-head { margin-bottom: clamp(1rem, 2vw, 1.4rem); }

/* Kalkulator: aus der schmalen Ein-Spalten-Rechnung wird auf Desktop ein
   breiteres 2-Spalten-Blatt (Add-ons paarweise, Hosting als drei Karten) —
   und jede Zeile gibt beim Anhaken sichtbar Gold zurück. Bedienbarkeit:
   ganze Zeile bleibt klickbar (label), Hover zeigt die Klickfläche. */
#pricing { padding-block: calc(var(--space-section) * 0.7); }
/* Runde 3: Die Checkliste wird eine zentrierte Inline-Zeile — fünf kurze
   Fakten, ein Blick, statt eines dreizeiligen Blocks vor dem Kalkulator. */
.pricing-included {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.35rem 1.5rem; margin-block: 0.7rem 0.2rem;
}
.pricing-included li { font-size: 0.9rem; }
.pricing-inner { gap: 0.85rem; }
.calc-card { width: min(100%, 44rem); }
.calc-row { padding-block: 0.55rem; }
.calc-sub { font-size: 0.72rem; line-height: 1.4; }
.calc-row--addon {
  border-radius: 6px;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  transition: background-color 0.18s ease;
}
@media (hover: hover) {
  .calc-row--addon:hover { background: rgba(201, 168, 107, 0.06); }
}
/* Kein eigenes :has(:checked)-Background hier: Das Gold-Feedback beim
   Anhaken existiert bereits weiter unten als Makeover-Gradient
   (.calc-row--addon:has(.calc-check:checked) — Verlauf!). Messhinweis:
   backgroundColor ist bei einem Verlauf immer transparent (Lektion 13.08.),
   prüfen über backgroundImage. */

.calc-zeilen { display: block; }
@media (min-width: 760px) {
  .calc-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.8rem; row-gap: 0; align-items: start; }
  .calc-card > * { grid-column: 1 / -1; }
  .calc-card > .calc-row--addon { grid-column: auto; }
  .calc-zeilen--2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.8rem; }
  /* Hosting: drei kompakte Wahl-Karten statt drei voller Zeilen. */
  .calc-zeilen--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; padding-top: 0.45rem; }
  .calc-zeilen--3 .calc-row {
    flex-direction: column; align-items: flex-start; gap: 0.35rem;
    padding: 0.7rem 0.75rem; margin-inline: 0;
    border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  }
  .calc-zeilen--3 .calc-row:has(input:checked) { border-style: solid; border-color: rgba(201, 168, 107, 0.5); }
}
.section-head h2 { text-shadow: 0 0 60px rgba(201, 168, 107, 0.16); }

/* ---------- e) Mikro-Sterne in den Referenzen (sehr sparsam) ---------- */
#referenzen {
  background:
    radial-gradient(1.5px 1.5px at 14% 12%, rgba(228, 206, 158, 0.26), transparent 60%),
    radial-gradient(1px 1px at 68% 7%, rgba(228, 206, 158, 0.2), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 34%, rgba(228, 206, 158, 0.16), transparent 60%);
}

/* ---------- f) Mobil-Fixes (Befunde vom 15.08., gemessen bei 320 px) ----------
   Die Demo-Karten (li.rv → .browser-frame) und der Konkurrenz-Check-CTA
   schoben die Seite 29 px über den rechten Rand. */
.demo-grid > li { min-width: 0; }
.demo-card .browser-frame,
.demo-card .browser-frame img { max-width: 100%; }
.ref-shot .phone { max-width: 100%; }
.ld-cta { max-width: 100%; white-space: normal; height: auto; min-height: 48px; }
/* Flache Links bekommen Luft (44-px-Ziel; gemessen: 18–26 px hoch) */
.beweis-cap, .leist-link { display: inline-block; padding-block: 0.45rem; }
#footer a { display: inline-block; padding-block: 0.4rem; }
.brand { padding-block: 0.35rem; }
/* Tab-Leiste ≤560 px: rechte Fade-Kante als Scroll-Hinweis —
   ohne sie wirkte die Leiste wie zu Ende, obwohl 4 Reiter da sind. */
@media (max-width: 560px) {
  .ausp[data-ausp-ready] .ausp-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(90deg, #000 90%, rgba(0, 0, 0, 0.15) 100%);
    padding-right: 1.25rem;
  }
}

/* ---------- g) Kalkulator-Redesign (15.08., William: „langweilig und kacke") ----------
   Vorher: 13 identische Kontoauszug-Zeilen mit 21-px-Häkchen. Jetzt:
   wählbare Basis als drei Segmente, fühlbare Checkboxen, checked-Zeilen
   mit Gold-Hauch, klarere Gruppen, Summenblock mit Gewicht. */

.calc-basis { border: none; margin: 0; padding: 0 0 0.4rem; }
.calc-basis legend {
  padding: 0.9rem 0 0.55rem;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}
.calc-basis-seg {
  position: relative;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(17, 14, 8, 0.4);
  cursor: pointer;
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease;
}
/* Drei Segmente nebeneinander, mobil untereinander */
.calc-basis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.calc-basis legend { grid-column: 1 / -1; }
@media (max-width: 620px) { .calc-basis { grid-template-columns: 1fr; } }
.calc-basis-radio {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.calc-basis-name { font-weight: 650; color: var(--ink); font-size: 0.98rem; }
.calc-basis-sub { font-size: 0.78rem; color: var(--ink-mut); line-height: 1.45; }
.calc-basis-price {
  margin-top: 0.3rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.95rem; font-weight: 600; color: var(--ink-soft);
}
.calc-basis-seg:hover { border-color: var(--line-strong); background: rgba(201, 168, 107, 0.05); }
.calc-basis-seg:has(.calc-basis-radio:checked) {
  border-color: rgba(201, 168, 107, 0.5);
  background: linear-gradient(170deg, rgba(201, 168, 107, 0.14), rgba(201, 168, 107, 0.04));
  box-shadow: inset 0 1px 0 rgba(244, 238, 223, 0.06), 0 0 18px rgba(201, 168, 107, 0.08);
}
.calc-basis-seg:has(.calc-basis-radio:checked) .calc-basis-price { color: var(--gold-deep); }
.calc-basis-seg:has(.calc-basis-radio:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* Checkboxen: 21 → 24 px, checked-Zeile bekommt Fläche + Gold-Kante */
.calc-check { width: 24px; height: 24px; border-radius: 6px; }
.calc-check::before { width: 13px; height: 13px; }
.calc-row--addon { border-radius: var(--radius-sm); padding-inline: 0.55rem; margin-inline: -0.55rem; }
.calc-row--addon:has(.calc-check:checked),
.calc-row--addon:has(.calc-radio:checked) {
  background: linear-gradient(170deg, rgba(201, 168, 107, 0.1), rgba(201, 168, 107, 0.03));
}
.calc-row--addon:has(.calc-check:checked) .calc-price,
.calc-row--addon:has(.calc-radio:checked) .calc-price { color: var(--gold-deep); }

/* Im Bausteine-Modus gesperrte Zeilen (data-needs-site) */
.calc-row--gesperrt { opacity: 0.4; cursor: not-allowed; }
.calc-row--gesperrt:hover { background: transparent; }
/* Inklusiv-Zeile (16.08.: Texterstellung bei Überarbeitung — fest an, 0 €):
   Gold-Hauch kommt schon über :has(:checked); hier nur Cursor + Preis-Ton. */
.calc-row--inklusive { cursor: default; }
.calc-row--inklusive .calc-price { color: var(--gold-deep); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.calc-hinweis {
  margin: 0.3rem 0 0;
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem; line-height: 1.55; color: var(--ink-mut);
  border-left: 2px solid var(--gold);
  background: rgba(201, 168, 107, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Summenblock: mehr Gewicht, Beleg-Charakter */
[data-calc-totals] { margin-top: 0.9rem; padding-top: 1rem; border-top: 2px solid var(--gold); }
.calc-total-ab { font-size: 0.55em; font-weight: 500; color: var(--ink-soft); }

/* ---------- h) „Ihre Auswahl" im Booking-Modal (15.08.) ---------- */
.bw-paket {
  margin: 0.9rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--glass-line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm);
  background: rgba(201, 168, 107, 0.06);
}
.bw-paket-label {
  display: block;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.3rem;
}
.bw-paket-text { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); }

/* Auswahl-Chip im Chat: hebt sich golden von den Standard-Chips ab */
.chat-chip--auswahl {
  border-color: rgba(201, 168, 107, 0.5) !important;
  background: linear-gradient(170deg, rgba(201, 168, 107, 0.16), rgba(201, 168, 107, 0.05)) !important;
  color: var(--ink) !important;
}

/* ---------- i) Erster Scroll aufgeräumt + Atom-Zauber (Handy-Feedback William 16.08.) ---------- */
/* Mobil konkurrierten im ersten Viewport: Orbit-Linien quer durch CTAs und
   Proof-Strip, die kaputte Kapazitäts-Zeile (Fix oben bei .hero-kapazitaet)
   und die sofort einfahrende Sticky-Leiste (Fix in app.js: erscheint mobil
   erst nach dem Beweis-Band). Hier: Linien auf die Karte begrenzen + Luft. */
@media (max-width: 640px) {
  .hero-orbit { inset: 0; opacity: 0.45; }
  .hero-proofstrip { margin-top: 1.3rem; }
}
/* Atom-Zauber: sanfter Kern-Puls + atmende Elektronen (reine opacity-Keyframes,
   Compositor-billig; nur unter data-anim — reduced-motion bleibt still). */
html[data-anim] .atom-kern { animation: atom-kern-puls 4.2s ease-in-out infinite; }
html[data-anim] .atom-elektron { animation: atom-elektron-atmen 3.6s ease-in-out infinite; }
html[data-anim] .atom-elektron:nth-of-type(2) { animation-delay: -1.2s; }
html[data-anim] .atom-elektron:nth-of-type(3) { animation-delay: -2.4s; }
@keyframes atom-kern-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes atom-elektron-atmen { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.55; } }

/* ============================================================
   MOBIL-KORREKTUREN 26.08.2026 — aus dem Audit auf echten iPhone-Viewports
   (393x852 / 402x874, scripts/mobil-audit.mjs). Jede Regel unten steht fuer
   einen gemessenen Befund, nicht fuer eine Vermutung.
   ============================================================ */

/* 1) Die fixe CTA-Leiste hatte keinen Platzhalter im Seitenfluss.
      --sticky-cta-h wurde bisher NUR vom JS gelesen (js/app.js:102), um den
      Chat-Launcher darueber zu halten — der Seiteninhalt bekam nie Ausgleich.
      Folge, live gemessen: die Leiste lag ueber der Kalkulator-Zeile
      "Bewertungs-Kit" und ueber einer Demo-Karte, beide nicht antippbar.
      Genau das Symptom "liegt drueber, kann man nicht tippen". */
body:has(#sticky-cta.is-visible) {
  padding-bottom: calc(var(--sticky-cta-h, 4.5rem) + env(safe-area-inset-bottom, 0px));
}

/* 2) Tap-Targets unter der 44px-Marke (Apple HIG). Gemessen: brand 107x30,
      lang-switch 73x32, beweis-link 126x34, leist-link 214x38 — alle zu FLACH,
      die Breite stimmt ueberall. Beide Nav-Elemente sind bereits inline-flex
      mit align-items:center, min-height waechst also nur nach unten/oben und
      laesst das Schriftbild unberuehrt. */
.brand,
.lang-switch {
  min-height: 44px;
}
.beweis-link,
.leist-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 3) index.html deklariert viewport-fit=cover, im gesamten Stylesheet stand
      safe-area-inset aber nur EINMAL (unten, Chat-Panel). Die sticky Nav klebt
      damit auf top:0 und rutscht unter die Dynamic Island (~59px).
      Nicht headless verifizierbar — Playwright emuliert keine Safe-Area-Insets;
      auf dem Geraet gegenpruefen. */
@supports (padding: env(safe-area-inset-top)) {
  #nav {
    padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   Sprachassistent-Demo (#referenzen, seit 15.09.2026)
   Ersetzt die fuenf Demo-Design-Kacheln. Nutzt bewusst die
   vorhandenen Bausteine (browser-frame-Leiste, cta, rv) damit
   die Sektion nicht wie ein Fremdkoerper wirkt.
   ============================================================ */
.voice-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
@media (max-width: 860px) { .voice-demo { grid-template-columns: minmax(0, 1fr); } }

.voice-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.voice-body { padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }

.voice-knopf { width: 100%; justify-content: center; }
.voice-knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.voice-knopf.laeuft { filter: saturate(0.75) brightness(0.9); }

.voice-zustand {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin: 1rem 0 0; min-height: 1.5rem;
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em;
  color: var(--ink-mut);
}
.voice-punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
  flex: 0 0 auto;
}
.voice-punkt.an { background: var(--success); animation: voice-puls 1.6s ease-in-out infinite; }
.voice-punkt.spricht { background: var(--gold); animation: voice-puls 0.7s ease-in-out infinite; }
@keyframes voice-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .voice-punkt { animation: none !important; } }

.voice-hinweis {
  margin-top: 1rem; padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-warm);
  font-size: 0.9rem; color: var(--ink-soft); text-align: left;
}
.voice-hinweis[hidden] { display: none; }

.voice-fuss {
  margin: 1.25rem 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--label);
}

.voice-untertitel {
  margin: 0 0 0.75rem; font-family: var(--font-mono);
  font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--label); font-weight: 500;
}
.voice-untertitel--verlauf { margin-top: 1.75rem; }

.voice-saetze { list-style: none; margin: 0; padding: 0; }
.voice-saetze li {
  padding: 0.7rem 0.9rem; margin-bottom: 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.93rem; color: var(--ink-soft); text-wrap: pretty;
}
.voice-saetze q { quotes: "„" "“"; }
.voice-saetze q::before, .voice-saetze q::after { color: var(--gold); }

.voice-verlauf {
  min-height: 190px; max-height: 320px; overflow-y: auto;
  padding: 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.voice-leer { margin: 0; font-size: 0.9rem; font-style: italic; color: var(--label); }
.voice-zeile { margin-bottom: 0.9rem; }
.voice-zeile:last-child { margin-bottom: 0; }
.voice-wer {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--label); margin-bottom: 0.15rem;
}
.voice-zeile--luca .voice-wer { color: var(--gold); }
.voice-was { font-size: 0.93rem; color: var(--ink-soft); }

.voice-brueck {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--line);
  font-size: var(--t-body); color: var(--ink-mut); max-width: 62ch;
}
.voice-brueck-link { color: var(--gold-deep); white-space: nowrap; }

/* --- Sprachassistent am Handy (Korrektur 15.09.2026) ----------
   Befund aus der Messung: die Grid-Spalte war 433px breit in einem
   350px-Grid. `1fr` heisst `minmax(auto, 1fr)`, und dieses
   auto-Minimum erbt die min-content-Breite des Inhalts — hier die
   nicht umbrechende Adresszeile der Browserleiste (432px). Der
   Kasten lief 63px nach rechts raus und wurde von `overflow-x: clip`
   abgeschnitten: der Demo-Aufkleber lag ausserhalb des Bildschirms,
   der Knopf war angeschnitten. Deshalb oben `minmax(0, …)`, wie im
   Rest dieser Datei auch. Die Adresszeile kuerzt sich dann selbst.

   Der Rest hier ist Bedienbarkeit. Gemessen lagen Knopf (y=1773) und
   Gespraechsverlauf (y=2295) 522px auseinander, mit den
   Beispielsaetzen dazwischen. Am Handy sah man also im Gespraech
   entweder den Knopf oder das Gesagte, nie beides.
   -------------------------------------------------------------- */
.voice-stage, .voice-seite { min-width: 0; }

@media (max-width: 640px) {
  /* Verlauf nach oben, Beispielsaetze darunter: waehrend eines
     Gespraechs zaehlt, was gesagt wird — die Vorschlaege hat man
     vorher gelesen. */
  .voice-seite { display: flex; flex-direction: column; }
  .voice-untertitel--verlauf { order: 1; margin-top: 0.25rem; }
  .voice-verlauf { order: 2; }
  .voice-seite > .voice-untertitel:not(.voice-untertitel--verlauf) { order: 3; margin-top: 1.5rem; }
  .voice-saetze { order: 4; margin-bottom: 0; }

  .voice-body { padding: 1.25rem 1rem 1.5rem; }
  .voice-knopf { min-height: 52px; }
  .voice-verlauf { min-height: 140px; max-height: 42vh; padding: 0.85rem; }
  .voice-saetze li { padding: 0.65rem 0.8rem; font-size: 0.88rem; }

  /* Die Browserleiste hat am Handy zu wenig Platz fuer drei Elemente
     in Originalgroesse. */
  .voice-frame .bf-bar { gap: 0.5rem; padding: 0.45rem 0.6rem; }
  .voice-frame .bf-url { font-size: 0.62rem; padding: 0.2rem 0.5rem; }
  .voice-frame .bf-badge { font-size: 0.52rem; padding: 0.18rem 0.4rem; letter-spacing: 0.1em; }

  /* Platz fuer die Steuerleiste, damit sie nichts verdeckt. */
  .voice-demo.im-gespraech { padding-bottom: 4.5rem; }
}

/* Steuerleiste am unteren Rand — nur am Handy, nur waehrend eines
   Gespraechs. Ohne sie muss man zum Auflegen erst wieder hoch zum
   Knopf scrollen, waehrend Luca weiterredet. */
.voice-steuer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
.voice-steuer[hidden] { display: none; }
.voice-steuer-status {
  display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  color: var(--ink-mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-steuer-knopf {
  flex: none; min-height: 44px; padding: 0 1.15rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.voice-steuer-knopf:active { background: var(--surface-warm); }
@media (min-width: 641px) { .voice-steuer { display: none !important; } }

/* Vapi haengt ein eigenes Schwebe-Widget an den body. Es wird beim
   Start per offset aus dem Bild geschoben; hier zusaetzlich hart
   stillgelegt, damit es am Handy nicht als Fehlklick-Ziel auftaucht
   oder die Seitenbreite aufzieht. */
[id^="vapi-support"], [class*="vapi-btn"], .vapi-support-btn {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Einwilligung für die zweite Messschicht (16.09.2026)

   Kein Vorhang, kein Dunkelschleier, keine Wiedervorlage. Die Leiste sitzt unten,
   nimmt so wenig Platz wie möglich und verschwindet nach der Entscheidung für immer.
   Beide Knöpfe sind absichtlich identisch gestaltet: eine Ablehnung, die unscheinbarer
   aussieht als die Zustimmung, macht die Einwilligung rechtlich wertlos.
   ═══════════════════════════════════════════════════════════════════════════ */
.einwilligung {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, calc(100% + 2rem));
  width: min(52rem, calc(100vw - 2rem));
  z-index: 70;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop), var(--glass-inner);
  opacity: 0;
  transition: transform var(--d-normal) var(--ease-out-strong), opacity var(--d-normal) var(--ease-out-strong);
}

.einwilligung--da {
  transform: translate(-50%, 0);
  opacity: 1;
}

.einwilligung--weg {
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
}

.einwilligung-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.3rem;
}

.einwilligung-wort {
  flex: 1 1 22rem;
  min-width: 0;
}

.einwilligung-titel {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.einwilligung-text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-mut);
  text-wrap: pretty;
}

.einwilligung-link {
  color: var(--gold-deep);
  text-underline-offset: 3px;
}

/* Grid mit gleichen Spalten statt Flex: So sind beide Knöpfe exakt gleich breit, obwohl
   „Nicht einverstanden" mehr Zeichen hat als „Einverstanden". Gleichwertigkeit soll man
   sehen und nicht nachmessen müssen. */
.einwilligung-knoepfe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.6rem;
  flex: 0 0 auto;
}

/* Gleiche Größe, gleiche Farbe, gleicher Rahmen — der einzige Unterschied ist das Wort. */
.einwilligung-knopf {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
  background: rgba(244, 238, 223, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--d-fast) var(--easing-out), border-color var(--d-fast) var(--easing-out);
}

.einwilligung-knopf:hover {
  background: rgba(244, 238, 223, 0.11);
  border-color: var(--gold);
}

.einwilligung-knopf:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.einwilligung-meldung {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 71;
  margin: 0;
  padding: 0.7rem 1.1rem;
  font-size: 0.84rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
  .einwilligung-inner {
    padding: 1rem;
  }
  .einwilligung-knoepfe {
    width: 100%;
  }
  .einwilligung-knopf {
    flex: 1 1 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .einwilligung {
    transition-duration: 1ms;
  }
}