/* ==================================================================
   TaxiProject — Deutsches Maklerforum · One-Pager
   Konsolidierte Fassung (Kaskade aufgelöst): Basis + Feedback-Runden
   1-5, visual-critic-Fixes, Varianten-Dropdown, SKIN v15 GLASS MESH,
   Glas-Fallbacks. Effektiver Endstand = SKIN v15.
   Mobile-first · 8pt-Spacing · fluide Type-Scale (1.25) · 60-30-10
   ================================================================== */

/* ==================================================================
   1) Fonts — D-DIN (self-hosted, kein Dritt-CDN — DSGVO)
   ================================================================== */
@font-face { font-family:'D-DIN'; src:url('../fonts/D-DIN.woff2') format('woff2'), url('../fonts/D-DIN.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'D-DIN'; src:url('../fonts/D-DIN-Bold.woff2') format('woff2'), url('../fonts/D-DIN-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }

/* ==================================================================
   2) Design-Token
   ================================================================== */
:root {
  /* 8pt-Spacing */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; --s-12: 96px; --s-16: 128px;
  /* Type-Scale 1.25, fluid */
  --t-sm: clamp(.875rem, .1vw + .84rem, .9375rem);
  --t-body: clamp(1rem, .2vw + .95rem, 1.0625rem);
  --t-lg: clamp(1.125rem, .4vw + 1.05rem, 1.25rem);
  --t-xl: clamp(1.25rem, .8vw + 1.1rem, 1.563rem);
  --t-2xl: clamp(1.5rem, 1.6vw + 1.15rem, 1.953rem);
  --t-3xl: clamp(1.75rem, 2.5vw + 1.2rem, 2.441rem);
  --t-hero: clamp(1.95rem, 4vw + .9rem, 4.15rem);
  /* 60-30-10 */
  --c-neutral: #fcfcfc; --c-surface: #ffffff;
  --c-text: #4a4a4a; --c-text-soft: #575757; --c-heading: #333333;
  --c-dark: #141414; --c-dark-card: #1e1e1e; --c-dark-text: #b7bda9; --c-dark-head: #f4f6ee; --c-dark-muted: #a9b09b;
  --c-accent: #a2c617; --c-accent-strong: #8fb111; --c-accent-deep: #3d4d0f; --c-accent-tint: #eef3d2; --c-accent-bright: #b7dd2e;
  /* Lime als TEXT: auf hellem BG nur --c-accent-text (WCAG Large 3:1+), auf Dark --c-accent-bright */
  --c-accent-text: #6b8a0a;
  --c-gray: #edefe7; --c-gray-soft: #f6f7f2; --c-border: #e0e0e0;
  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 200ms; --dur-2: 400ms; --dur-3: 700ms;
  --radius: 12px; --radius-lg: 20px;
  --header-h: 64px;
}

/* ==================================================================
   3) Reset / Basis
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
body {
  background: #f7f9f4;
  color: var(--c-text);
  font-family: 'D-DIN', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Seiten-Hintergrund: Foto "City hell" (User-Wahl BG-Lab) mit hellem Overlay
   — fixer Layer, kein Scroll-Repaint. Generiert lokal (SDXL, RTX 4090). */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52rem 42rem at 10% 6%, rgba(162,198,23,.17), transparent 60%),
    radial-gradient(48rem 46rem at 92% 90%, rgba(162,198,23,.13), transparent 58%),
    radial-gradient(38rem 38rem at 88% 14%, rgba(20,40,10,.06), transparent 55%),
    linear-gradient(rgba(250,252,244,.58), rgba(246,249,238,.72)),
    url('../img/bg/bg-hell-city.jpg') center/cover no-repeat;
}
h1, h2, h3, h4 { color: var(--c-heading); font-weight: 700; line-height: 1.15; }
p { max-width: 68ch; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-accent-strong); outline-offset: 2px; border-radius: 4px; }

/* ==================================================================
   4) Utility — Shell / Eyebrow / Highlight / Section
   ================================================================== */
.shell { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); width: 100%; }
.highlight { color: var(--c-accent); } /* DMF-Markenfarbe #a2c617 (Milo-Wunsch) */
section { scroll-margin-top: calc(var(--header-h) + 56px); }
.section {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
  /* Grundfarbe der hellen Content-Bänder; das Raster liegt als ::after-Layer drüber. */
  background-color: #ecedeb;
}
.section > .shell { position: relative; z-index: 1; }
/* Top-3: Raster als eigenes Layer mit weichem Rand-Fade (mask) statt harter Kachelkante */
.section::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.section.band-panel::after { background-image:none; }
/* Schwarze Flächen: Plus-Kreuz-Muster in Hell-Grün (heropatterns), data-URI = kein Request */
.section.band-dark::after {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a2c617' fill-opacity='0.22'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}
/* Section-Divider — dezente Lime-Glow-Trennlinie mit Mittelpunkt-Knoten.
   Research-Konsens (Jarvis + Gemini): geometrisch/technisch statt Welle/Blob.
   Automatisch zwischen aufeinanderfolgenden Content-Sektionen (nicht nach dem Hero). */
.section + .section::before {
  content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width: min(620px, 80%); height:9px; pointer-events:none; z-index:2;
  background:
    linear-gradient(90deg, transparent, rgba(162,198,23,.5) 30%, rgba(162,198,23,.5) 70%, transparent) center/100% 1px no-repeat,
    radial-gradient(circle at 50%, rgba(162,198,23,.95) 0 2.4px, transparent 3.4px) center/100% 100% no-repeat;
  filter: drop-shadow(0 0 5px rgba(162,198,23,.32));
}

/* ===== Vollflächige Bänder (hell/dunkel im Wechsel) =====
   BG wandert von den schwebenden Panels auf die volle .section-Breite;
   das innere Panel verschmilzt (transparent, kein Radius/Padding). */
/* Dunkle Baender: weicher Spotlight (Tiefe) + feines Dot-Grid (Textur).
   Research-Konsens Jarvis+Gemini; rein S/W ohne Farb-Glow. Basis #0f0f0f
   ist dunkler als die Karten (#141414) → sie heben sich plastisch ab. */
.section.band-dark {
  background-color:#0f0f0f;
  /* nur noch Spotlight für Tiefe; das Muster ist jetzt das Lime-Plus-Pattern (::after) */
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(255,255,255,.05), transparent 72%);
}
.section.band-dark .section-dark { background:transparent; border-radius:0; padding:0; overflow:visible; box-shadow:none; }
/* Lese-Fleck entfernt (radialer Ansatz traf die Card-Positionen nicht sauber). */
/* Performance: below-fold-Sektionen erst rendern, wenn sie in Viewport-Nähe kommen */
#bewertungen, #faq, #kontakt { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* ===== Bundesweite Präsenz — Standorte-Karte in dunkler Display-Case ===== */
.praesenz-grid { display:grid; grid-template-columns:1fr; gap: clamp(30px,5vw,52px); align-items:center; }
@media (min-width: 60rem) { .praesenz-grid { grid-template-columns:.82fr 1fr; gap: clamp(40px,5vw,72px); } }
.mapcase {
  position:relative; justify-self:center; width:100%; max-width:440px; aspect-ratio:.69/1;
  border-radius:28px; overflow:hidden; padding: clamp(16px,2.5vw,26px); background:#111208;
  border:1px solid rgba(162,198,23,.35);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 60px rgba(162,198,23,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.mapcase::before { content:""; position:absolute; inset:0; z-index:0; opacity:.16;
  background: radial-gradient(circle, rgba(162,198,23,.9) 1.2px, transparent 1.5px) 0 0/26px 26px; }
.mapcase::after { content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(58% 52% at 50% 44%, rgba(162,198,23,.22), transparent 70%); }
.mapcase-img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 0 22px rgba(162,198,23,.28)); }
.mapcase .bracket { position:absolute; z-index:3; width:22px; height:22px; border:2px solid rgba(162,198,23,.7); }
.mapcase .bracket.tl { top:12px; left:12px; border-right:0; border-bottom:0; }
.mapcase .bracket.tr { top:12px; right:12px; border-left:0; border-bottom:0; }
.mapcase .bracket.bl { bottom:12px; left:12px; border-right:0; border-top:0; }
.mapcase .bracket.br { bottom:12px; right:12px; border-left:0; border-top:0; }
.mapcase-chip { position:absolute; z-index:3; top:14px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font:700 .66rem/1 'D-DIN',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#c9e35c;
  padding:5px 12px; border:1px solid rgba(162,198,23,.4); border-radius:999px; background:rgba(0,0,0,.4); }
.praesenz-copy .eyebrow { margin-bottom: var(--s-2); }
.praesenz-copy h2 { font-size: var(--t-3xl); line-height:1.06; margin-bottom: var(--s-2); }
.praesenz-copy .sub { color: var(--c-text-soft); max-width:52ch; margin-bottom: var(--s-4); }
/* Kern-Kontrast: EIN persönlicher Ansprechpartner (Held) vs. bundesweites Netzwerk — kompakt */
.pres-contrast { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap: clamp(10px,1.2vw,14px); margin-bottom: var(--s-3); }
.pres-num { position:relative; background: rgba(255,255,255,.74); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(20,30,10,.08); border-radius:14px; padding: clamp(11px,1.4vw,15px);
  box-shadow: 0 6px 18px -12px rgba(40,60,20,.2); }
.pres-num--solo { border-color: rgba(162,198,23,.5); box-shadow: 0 0 0 1px rgba(162,198,23,.22), 0 8px 22px -14px rgba(162,198,23,.38); }
.pres-ico { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px;
  background: rgba(162,198,23,.16); margin-bottom:7px; }
.pres-ico svg { width:16px; height:16px; stroke: var(--c-accent-deep); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pres-num b { display:block; font:800 clamp(24px,3.2vw,36px)/1 'D-DIN',sans-serif; color: var(--c-accent-deep); letter-spacing:-.02em; }
.pres-num span { display:block; margin-top:5px; font-size:.76rem; color: var(--c-text-soft); line-height:1.4; }
/* Glattes Grau-Band (Produkte) */
.section.band-panel { background-color:#e8eae6; background-image:none; }
.section.band-panel .section-panel { background:transparent; border:none; border-radius:0; padding:0; box-shadow:none; }
/* Weiß-Band (Ablauf/FAQ) — mit Karo-Raster (kariertes Papier) */
.section.band-plain { background-color:#f7f8f5; }
.section.band-plain::after {
  background-image:
    linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
  background-size: 34px 34px;
  /* Karo läuft bis an die Ränder durch (kein weißer, karo-loser Rand-Streifen) */
  -webkit-mask-image:none; mask-image:none;
}
/* Ablauf-Teil in der gemergten Produkte-Sektion: Abstand zum Produkte-Block */
.prozess-head { margin-top: clamp(48px, 6vw, 88px); }
/* Ablauf: Glas-Panel raus → Timeline direkt auf dem Blueprint-Band */
#ablauf .shell { background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:none; box-shadow:none; }
.section-head { margin-bottom: clamp(32px, 4.5vw, 56px); }
/* Eyebrow global (auch Final-CTA) */
.eyebrow {
  display:inline-block; font-size: var(--t-sm); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-heading); background: #fff;            /* kein grün-auf-grün mehr */
  border: 1px solid rgba(162,198,23,.5);                /* dezenter Lime-Rand (DMF-Akzent) */
  box-shadow: 0 2px 6px rgba(20,30,10,.12);             /* kleine Schatten-Umrandung */
  border-radius:999px; padding:5px 15px; margin-bottom: var(--s-2);
}
.section-head .eyebrow { margin-bottom: var(--s-2); } /* Look zentral aus .eyebrow */
.section-head h2 { font-size: var(--t-3xl); margin-bottom: var(--s-1); }
.section-head p { color: var(--c-text-soft); }
.section-head.center { text-align:center; }
.section-head.center p { margin-inline:auto; }

/* ==================================================================
   5) Buttons (Tap-Target >= 44px) — glossy Pills (Feedback-Runde 3)
   ================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 28px; border:none; border-radius:10px;
  font: 700 var(--t-body) 'D-DIN', sans-serif; cursor:pointer; text-decoration:none;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* Primaer-Button: glossy Pill mit Lime-Verlauf, Glanzkante, Pfeil */
.btn-primary {
  border-radius: 999px;
  background: linear-gradient(180deg, #c3e42e 0%, #a2c617 55%, #8fb111 100%);
  color: #fff; /* Milo-Wunsch: weisse Schrift auf Lime */
  text-shadow: 0 1px 2px rgba(0,0,0,.38); /* Lesbarkeit: Kontur der weissen Schrift auf hellem Lime */
  box-shadow: 0 6px 16px rgba(143,177,17,.35), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(61,77,15,.22);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #cdec3f 0%, #abd01d 55%, #9abd14 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(143,177,17,.45), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(61,77,15,.22);
}
.btn-primary:active { transform: none; }
.btn-ico {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px;
  background: rgba(255,255,255,.22); flex:0 0 auto;
}
.btn-ico svg { width:15px; height:15px; stroke: #fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-arrow { transition: transform var(--dur-1) var(--ease); }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }
.btn-ghost { background: var(--c-surface); color: var(--c-heading); border:1px solid var(--c-border); border-radius: 999px; }
.btn-ghost:hover { background: var(--c-gray-soft); }

/* ==================================================================
   6) Header / Nav — floating Glas-Pill (SKIN v15) + Chip-Nav + Nav-DD
   ================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent; border-bottom: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-top: 10px;
}
.site-header .bar {
  display:flex; align-items:center; justify-content:space-between; gap: var(--s-2);
  height: 60px; transition: height var(--dur-2) var(--ease);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  padding-inline: clamp(14px, 2vw, 26px);
  box-shadow: 0 12px 32px rgba(40,60,20,.10);
}
.site-header.shrunk .bar { height: 52px; }
.brand img { width: clamp(84px, 10vw, 108px); height:auto; transition: width var(--dur-2) var(--ease); }
.site-header.shrunk .brand img { width: 78px; }
/* Partner-Lockup: DMF-Logo + freenow-by-Lyft nebeneinander (responsive) */
.brand-lockup { display:flex; align-items:center; gap: clamp(6px, 1.2vw, 14px); min-width:0; }
.brand-x { flex:none; width:1px; align-self:stretch; margin-block: clamp(8px, 1.4vw, 11px); background: rgba(15,25,10,.16); }
.brand-partner { flex:none; height: clamp(25px, 3vw, 42px); width:auto; display:block; }
.site-header.shrunk .brand-partner { height: clamp(24px, 2.6vw, 32px); }
.main-nav { display:none; }
.header-cta .btn { min-height:44px; padding:10px 20px; }

/* Anker-Chips (mobile Nav) — kollabieren beim Scrollen (.shrunk via app.js),
   sonst frisst der Sticky-Header ~20 % vom mobilen Viewport */
.chip-nav { display:flex; gap:8px; overflow-x:auto; padding: 8px 0 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-height:60px; transition: max-height var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), padding var(--dur-2) var(--ease); }
.site-header.shrunk .chip-nav { max-height:0; opacity:0; padding-block:0; overflow:hidden; pointer-events:none; }
.chip-nav::-webkit-scrollbar { display:none; }
.chip-nav a {
  flex:0 0 auto; font-size: var(--t-sm); font-weight:700; text-decoration:none;
  color: var(--c-text-soft); background: rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.8);
  border-radius:999px; padding:10px 16px; min-height:44px; display:inline-flex; align-items:center;
  transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.chip-nav a.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-deep); }
/* (Varianten-Dropdown entfernt — war nur Dev-/Test-Ballast) */

/* ==================================================================
   7) Audience-Toggle (Segmented Control mit Slide)
   — Basis hell (ausserhalb Card) + dunkler Override in der Funnel-Card
   ================================================================== */
.aud-toggle {
  position:relative; display:inline-grid; grid-template-columns:1fr 1fr;
  background: var(--c-gray-soft); border:1px solid var(--c-border); border-radius:999px; padding:4px;
  width:100%; max-width:340px; user-select:none;
}
.aud-toggle .thumb {
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background: var(--c-accent); border-radius:999px;
  transition: transform var(--dur-2) var(--ease);
}
body[data-audience="gewerbe"] .aud-toggle .thumb { transform: translateX(100%); }
.aud-toggle button {
  position:relative; z-index:1; background:none; border:none; cursor:pointer;
  font: 700 var(--t-sm) 'D-DIN', sans-serif; color: var(--c-text-soft);
  min-height:44px; border-radius:999px; transition: color var(--dur-2);
}
body[data-audience="privat"] .aud-toggle button[data-aud-btn="privat"],
body[data-audience="gewerbe"] .aud-toggle button[data-aud-btn="gewerbe"] { color: var(--c-accent-deep); }

/* Toggle in der Funnel-Card (dunkel) */
.funnel-card .aud-toggle { width:100%; max-width:none; margin-bottom: var(--s-3); background: #2a2a2a; border-color: rgba(255,255,255,.16); }
.funnel-card .aud-toggle button { color:#a9b09b; }
body[data-audience="privat"] .funnel-card .aud-toggle button[data-aud-btn="privat"],
body[data-audience="gewerbe"] .funnel-card .aud-toggle button[data-aud-btn="gewerbe"] { color: var(--c-accent-deep); }
/* Aktiver Zielgruppen-Toggle (React-Funnel nutzt aria-pressed): weisse Schrift (Milo-Wunsch) */
.aud-toggle button[aria-pressed="true"],
.funnel-card .aud-toggle button[aria-pressed="true"] { color: #fff; }

/* Audience-Sichtbarkeit */
[data-aud] { display:none !important; }
body[data-audience="privat"] [data-aud="privat"],
body[data-audience="gewerbe"] [data-aud="gewerbe"] { display:revert !important; }

/* ==================================================================
   8) Hero
   ================================================================== */
.hero { padding-block: clamp(24px, 4vw, 64px) clamp(40px, 6vw, 72px); }
.hero-grid { display:grid; gap: var(--s-4); }
.hero .eyebrow { margin: var(--s-2) 0; } /* Look zentral aus .eyebrow */

/* ---- Hero-Sparten-Karten (2×2, wechseln mit Privat/Unternehmer) ---- */
.hero-sparten { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--s-3); max-width: 540px; }
body[data-audience="privat"] .hero-sparten[data-aud="privat"],
body[data-audience="gewerbe"] .hero-sparten[data-aud="gewerbe"] { display: grid !important; }
.sparte-card {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  background: #fff; border: 1px solid var(--c-border); border-radius: 14px;
  padding: 15px 16px; text-decoration: none;
  box-shadow: 0 1px 2px rgba(20,30,10,.05), 0 6px 16px rgba(20,30,10,.08), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sparte-card:hover { transform: translateY(-4px); border-color: rgba(162,198,23,.6); box-shadow: 0 2px 4px rgba(20,30,10,.06), 0 20px 38px -16px rgba(162,198,23,.34); }
.sparte-ico { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; }
.sparte-ico img { width: 64px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
.sparte-card b { color: var(--c-heading); font-size: var(--t-body); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.sparte-card span { color: var(--c-text-soft); font-size: var(--t-sm); }
.hero h1 { font-size: var(--t-hero); line-height:1.06; margin-bottom: var(--s-2); overflow-wrap: break-word; hyphens: auto; }
.hero .sub { color: var(--c-text-soft); font-size: var(--t-lg); margin-bottom: var(--s-3); }
.hero-cta-row { display:flex; flex-wrap:wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.trust-row { display:flex; flex-wrap:wrap; gap:8px 20px; color: var(--c-text-soft); font-size: var(--t-sm); }
.trust-row span::before { content:"✓ "; color: var(--c-accent-text); font-weight:700; }
.section-dark .trust-row span::before { color: var(--c-accent-bright); }
/* Top-1: Trust-Zeile direkt unter dem Funnel (Reassurance am Absende-Punkt) */
.bezel-trust { justify-content:center; gap:8px 16px; margin:10px 4px 4px; font-size:.78rem; }
/* Top-2: Bewertungs-Aggregat ueber den Zitaten */
.rating-agg { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--c-dark-muted); }
.rating-stars { color:#f5c445; letter-spacing:2px; font-size:1.05em; }
.rating-score { color: var(--c-dark-muted); }
.rating-score b { color: var(--c-dark-head); font-size:1.2em; font-weight:700; }
.rating-count { color: var(--c-dark-muted); }
/* Hero-Grafik (Taxi unter Schirm) — sichtbar ab 48rem, s. Media-Query */
.hero-art { display:none; }

/* ==================================================================
   9) Funnel — Bezel / Card (dunkel, Chevron) / Felder / Dropdown /
      Nav / Msg / Validierung
   ================================================================== */

/* Double-Bezel: helles Glas (mobil/tablet zentriert, ab 1060px volle Spaltenbreite) */
.bezel {
  border-radius: var(--radius-lg); padding:6px; max-width:640px; margin-inline:auto; width:100%;
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 18px 44px rgba(40,60,20,.12);
}

/* Funnel-Card: dunkel mit Chevron/Zickzack (#1e1e1e / #2a2a2a, 24px-Raster) */
.funnel-card {
  background-color:#1e1e1e;
  background-image:
    linear-gradient(135deg, #242424 25%, transparent 25%),
    linear-gradient(225deg, #242424 25%, transparent 25%),
    linear-gradient(45deg, #242424 25%, transparent 25%),
    linear-gradient(315deg, #242424 25%, transparent 25%);
  background-position: 12px 0, 12px 0, 0 0, 0 0;
  background-size: 24px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--radius-lg) - 7px); padding: clamp(16px, 2.5vw, 28px);
  color-scheme: dark;
  box-shadow: 0 4px 24px rgba(0,0,0,.28);
}
.funnel-head { display:flex; justify-content:space-between; align-items:center; gap: var(--s-2); flex-wrap:wrap; margin-bottom: var(--s-2); }
.funnel-head strong, .funnel-head .funnel-title { font-size: var(--t-lg); color: var(--c-heading); }
.funnel-head .meta { font-size: var(--t-sm); color: var(--c-text-soft); }
/* Dunkle Card: Textfarben */
.funnel-card .funnel-head strong, .funnel-card .funnel-head .funnel-title, .funnel-card h3 { color:#f4f6ee; }
.funnel-card .funnel-head .meta, .funnel-card .step-sub, .funnel-card .field-hint, .funnel-card .consent, .funnel-card .progress-label { color:#a9b09b; }
.funnel-chip { display:inline-flex; align-items:center; gap:6px; font-size: var(--t-sm); background: var(--c-gray); color: var(--c-text-soft); border-radius:999px; padding:6px 12px; white-space:nowrap; }
.funnel-chip::before { content:""; width:8px; height:8px; border-radius:999px; background: var(--c-accent); }
.funnel-card .funnel-chip { color:#c9cec0; border:1px solid rgba(255,255,255,.12); background: #2a2a2a; }
.progress { display:flex; align-items:center; gap: var(--s-2); margin-bottom: var(--s-3); }
.progress-label { font-size: var(--t-sm); color: var(--c-text-soft); white-space:nowrap; }
.progress-bar { flex:1; height:6px; border-radius:999px; background: var(--c-gray); overflow:hidden; }
.funnel-card .progress-bar { background: rgba(255,255,255,.18); }
.progress-fill { height:100%; width:33%; border-radius:inherit; background: var(--c-accent); transition: width var(--dur-2) var(--ease); }

/* Funnel-Formular */
.funnel-step { display:none; }
.funnel-step.active { display:block; animation: stepIn var(--dur-2) var(--ease); }
@keyframes stepIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.funnel-step h3 { font-size: var(--t-lg); margin-bottom:4px; }
.funnel-step .step-sub { font-size: var(--t-sm); color: var(--c-text-soft); margin-bottom: var(--s-2); }
/* Mindesthoehe: kleine Schritte (1/2) wechseln ohne Hoehenaenderung (Runde 4) */
.funnel-steps { min-height: 350px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight:700; color: var(--c-heading); }
.field input, .field select, .field textarea {
  font: 400 16px 'D-DIN', sans-serif; color: var(--c-text);
  border:1px solid var(--c-border); border-radius:10px; background: var(--c-surface);
  padding:12px 14px; min-height:48px; outline:none; width:100%;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field textarea { min-height:84px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(162,198,23,.18); }
.field-hint { font-size: var(--t-sm); color: var(--c-text-soft); }
.consent { display:flex; gap:10px; align-items:flex-start; font-size: var(--t-sm); color: var(--c-text-soft); margin-bottom: var(--s-2); }
.consent input { width:20px; height:20px; margin-top:2px; accent-color: var(--c-accent-strong); flex:0 0 auto; }
.consent a { color: var(--c-accent-deep); }
.funnel-card .consent a { color: var(--c-accent-bright); }

/* Dunkle Felder: solide + hoher Kontrast (Runde 3, ersetzt Transparenz-Look) */
.funnel-card .field input,
.funnel-card .field select,
.funnel-card .field textarea,
.funnel-card .multi-dropdown-toggle {
  background: #2b2b2b;
  border: 1px solid rgba(255,255,255,.3);
  color: #ffffff;
  border-radius: 12px;
}
.funnel-card .field input::placeholder,
.funnel-card .field textarea::placeholder { color: rgba(255,255,255,.62); }
.funnel-card .field select option { background: #242424; color: #f0f0ea; }
.funnel-card .field label { color: #f4f6ee; }
.funnel-card .field input:hover,
.funnel-card .field select:hover,
.funnel-card .field textarea:hover,
.funnel-card .multi-dropdown-toggle:hover { border-color: rgba(255,255,255,.45); }
.funnel-card .field input:focus,
.funnel-card .field select:focus,
.funnel-card .field textarea:focus {
  background: #303030;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(162,198,23,.25);
}

/* Multi-Dropdown */
.multi-dropdown { position:relative; }
.multi-dropdown-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--c-border); border-radius:10px; background: var(--c-surface);
  padding:12px 14px; min-height:48px; cursor:pointer; font-size:16px;
}
.multi-dropdown-arrow { font-size:.7em; opacity:.6; transition: transform var(--dur-1); }
.multi-dropdown.open .multi-dropdown-arrow { transform: rotate(180deg); }
.multi-dropdown-menu {
  position:absolute; left:0; right:0; margin-top:6px; z-index:30; display:none;
  background: var(--c-surface); border:1px solid var(--c-border); border-radius:10px;
  box-shadow: 0 12px 32px rgba(20,25,15,.12); padding:6px 0; max-height:230px; overflow-y:auto;
}
.multi-dropdown.open .multi-dropdown-menu { display:block; }
.multi-dropdown-option { display:flex; align-items:center; gap:10px; padding:11px 14px; min-height:44px; cursor:pointer; font-size: var(--t-sm); }
.multi-dropdown-option:hover { background: var(--c-gray-soft); }
.multi-dropdown-option input { width:18px; height:18px; accent-color: var(--c-accent-strong); }
/* Multi-Dropdown in dunkler Card */
.funnel-card .multi-dropdown-text { color: rgba(255,255,255,.85); }
.funnel-card .multi-dropdown-arrow { color: #f0f0ea; opacity:.7; }
.funnel-card .multi-dropdown-menu {
  background: #242424;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
.funnel-card .multi-dropdown-option { color: #e8eae2; }
.funnel-card .multi-dropdown-option:hover { background: rgba(255,255,255,.07); }

/* Funnel-Buttons mittig zentriert */
.funnel-nav { display:flex; gap: var(--s-2); margin-top: var(--s-2); justify-content:center; }
.funnel-nav .btn { flex:0 1 260px; }
.funnel-card .btn-ghost { color:#e8eae2; background: #2a2a2a; border-color: rgba(255,255,255,.2); }
.funnel-card .btn-ghost:hover { background: #343434; }

/* Erfolgs-Zustand: Formular weicht der Bestätigung */
.funnel.is-done .funnel-steps, .funnel.is-done .funnel-nav, .funnel.is-done .progress { display:none; }
.funnel.is-done .funnel-msg.ok { font-size: var(--t-body); padding:18px 20px; text-align:center; }

/* Meldungen */
.funnel-msg { display:none; font-size: var(--t-sm); border-radius:10px; padding:10px 14px; margin-top: var(--s-2); }
.funnel-msg.show { display:block; }
.funnel-msg.ok { background: var(--c-accent-tint); color: var(--c-accent-deep); }
.funnel-msg.warn { background:#fdf3e0; color:#7a5200; }
.funnel-card .funnel-msg.warn { background:#2a2416; color:#e8c877; }
.funnel-card .funnel-msg.ok { background:#1e2600; color:#c9e35c; }

/* Validierung: Feld-Fehlerzustand */
.funnel-card .is-invalid,
.funnel-card .field .is-invalid {
  border-color: #e24b4a !important;
  box-shadow: 0 0 0 3px rgba(226,75,74,.25) !important;
}
.consent input.is-invalid { outline: 2px solid #e24b4a; outline-offset: 2px; }

/* ==================================================================
   10) Zahlen-Strip — dunkel + Punkte-Muster (Runde 3)
   ================================================================== */
.stats-strip {
  background-color: #141414;
  background-image:
    repeating-linear-gradient(45deg, #1d1d1d 0 12px, transparent 12px 24px),
    radial-gradient(720px circle at 50% 0%, rgba(162,198,23,.12), transparent 62%);
  background-size: auto;
  border-block: 1px solid #262626;
}
.stats-strip .row { display:grid; grid-template-columns:1fr; gap: var(--s-3); padding-block: clamp(24px, 4vw, 40px); align-items: center; }
.stat { text-align:center; }
.stat b { display:block; font-size: var(--t-3xl); color: var(--c-accent-deep); line-height:1.1; }
.stat span { font-size: var(--t-sm); color: var(--c-text-soft); }
.stats-strip .stat b {
  background: linear-gradient(180deg, #c8e34a 0%, #a2c617 62%, #8fb111 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(162,198,23,.4));
}
.stats-strip .stat span { color: #a9b09b; }

/* ==================================================================
   11) Dunkle Muster-Sektionen (v9) + Streifen-Variante
   ================================================================== */
.section-dark {
  position:relative; overflow:hidden; background-color: var(--c-dark);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px);
}
.section-dark.pattern-dots {
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px),
    radial-gradient(720px circle at 85% 10%, rgba(162,198,23,.16), transparent 62%);
  background-size: 24px 24px, auto;
}
.section-dark.pattern-karo {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 24px),
    radial-gradient(720px circle at 12% 88%, rgba(162,198,23,.13), transparent 62%);
}
/* Bewertungen: dunkel mit diagonalen Streifen (#141414 / #202020) */
.section-dark.pattern-stripes {
  background-color:#141414;
  background-image:
    repeating-linear-gradient(45deg, #1d1d1d 0 12px, transparent 12px 24px),
    radial-gradient(720px circle at 85% 10%, rgba(162,198,23,.16), transparent 62%);
}
.section-dark h2, .section-dark h3 { color: var(--c-dark-head); }
.section-dark p { color: var(--c-dark-muted); }
.section-dark .highlight { color: var(--c-accent-bright); }
/* .section-dark .eyebrow: kein Override — einheitlicher Look aus .eyebrow (alle Badges gleich) */

/* ==================================================================
   12) Vorteile: Bento — Karten als dunkles Glas (Muster scheint durch)
   ================================================================== */
.bento { display:grid; gap: clamp(12px, 1.6vw, 20px); }
.bento .b-card {
  container-type: inline-size;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: clamp(18px, 4vw, 28px);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2);
}
.bento .b-card:hover { transform: translateY(-3px); border-color: rgba(162,198,23,.45); box-shadow: 0 12px 30px rgba(0,0,0,.4); background: rgba(255,255,255,.09); }
.bento .b-card h3 { font-size: var(--t-lg); margin: var(--s-2) 0 6px; }
.bento .b-card p { font-size: var(--t-sm); color: var(--c-dark-text); }
.b-orb { width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:20px; background: rgba(162,198,23,.16); color:#c9e35c; }
.b-orb svg { width:22px; height:22px; stroke: currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.b-kpi { font-size: var(--t-2xl); font-weight:700; color: var(--c-accent-bright); }
/* KPI-Subzeile als Klasse statt Inline-Style */
.b-kpi-sub { display:block; font-size:.55em; color: var(--c-dark-muted); font-weight:400; }

/* Bento — Held-Karte (.wide): flex-column, KPI als grosser Blickfang unten;
   .wide-btm = breites Abschluss-Band (Spans in den Media-Queries) */
.bento .b-card.wide { display:flex; flex-direction:column; gap: var(--s-3); }
.bento .b-card.wide .b-kpi { margin-top:auto; font-size: var(--t-3xl); line-height:1.05; }

/* ===== Vorteile: FeatureGrid (Icon links · Text · Pfeil), 2 Spalten ===== */
.feat-grid { display:grid; grid-template-columns:1fr; gap: clamp(14px, 1.8vw, 20px); }
@media (min-width: 40rem) { .feat-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; } }
.feat-card {
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding: clamp(20px, 3vw, 28px); border-radius: var(--radius);
  background: #1a1a1d; border:1px solid rgba(255,255,255,.1);
  text-decoration:none; color:inherit;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2);
}
@media (min-width: 30rem) { .feat-card { flex-direction:row; gap: clamp(18px, 2.5vw, 26px); } }
/* Fix: data-aud-Karten als Flex einblenden (sonst macht display:revert sie inline → Layout kippt) */
body[data-audience="privat"] .feat-card[data-aud="privat"],
body[data-audience="gewerbe"] .feat-card[data-aud="gewerbe"] { display:flex !important; }
.feat-card:hover { transform: translateY(-4px); border-color: rgba(162,198,23,.4); box-shadow: 0 20px 44px -20px rgba(0,0,0,.7); background: #212226; }
.feat-ico { flex:none; width: clamp(60px, 7vw, 84px); height: clamp(60px, 7vw, 84px); border-radius:20px; display:flex; align-items:center; justify-content:center; background: rgba(162,198,23,.14); }
.feat-ico svg { width:48%; height:48%; stroke:#c9e35c; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feat-body { flex:1; display:flex; flex-direction:column; justify-content:center; align-self:stretch; }
.feat-body h3 { font-size: var(--t-lg); color: var(--c-dark-head); margin-bottom:6px; }
.feat-body p { font-size: var(--t-sm); color: var(--c-dark-muted); }
.feat-body p b { color: var(--c-accent-bright); font-weight:700; }
.feat-arrow { align-self:flex-end; margin-top: var(--s-2); font-size:1.35rem; line-height:1; color: var(--c-dark-muted); transition: transform var(--dur-2), color var(--dur-2); }
.feat-card:hover .feat-arrow { transform: translateX(4px); color: var(--c-accent-bright); }

/* ==================================================================
   13) Produkte — helle Glas-Karten
   ================================================================== */
.prod-grid { display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap: var(--s-2); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.prod-grid::-webkit-scrollbar { display:none; }
.prod-card {
  container-type: inline-size;
  scroll-snap-align:start; display:flex; flex-direction:column; gap:10px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 20px;
  padding:20px;
  box-shadow: 0 1px 2px rgba(20,30,10,.05), 0 14px 34px -12px rgba(40,60,20,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.prod-card:hover { transform: translateY(-4px); border-color: rgba(162,198,23,.4); box-shadow: 0 2px 4px rgba(20,30,10,.06), 0 26px 52px -16px rgba(162,198,23,.34); }
.prod-tag { align-self:flex-start; font-size:.75rem; font-weight:700; background: var(--c-gray); color: var(--c-accent-deep); border-radius:999px; padding:4px 12px; }
.prod-card h3 { font-size: var(--t-lg); }
.prod-card p { font-size: var(--t-sm); color: var(--c-text-soft); flex:1; }
.prod-price { align-self:flex-start; font-size: var(--t-sm); font-weight:700; color: var(--c-accent-deep); background: var(--c-accent-tint); border-radius:999px; padding:8px 16px; border:none; cursor:pointer; min-height:40px; transition: background var(--dur-1), color var(--dur-1); }
.prod-price:hover { background: var(--c-accent); color:#fff; }

/* ==================================================================
   14) Ablauf: Timeline — Nummern als 3D-Kugeln
   ================================================================== */
.timeline { display:grid; gap: clamp(24px,5vw,32px); position:relative; align-items: start; }
.t-step { position:relative; padding-left:64px; }
.t-num {
  position:absolute; left:0; top:0; width:44px; height:44px; border-radius:999px;
  background: radial-gradient(circle at 30% 25%, #c3e42e, #8fb111 78%);
  color: var(--c-accent-deep); font-weight:700; font-size: var(--t-lg);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(143,177,17,.4), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 5px rgba(61,77,15,.3);
}
.t-step:not(:last-child)::before { content:""; position:absolute; left:21px; top:48px; bottom:-36px; width:2px; background: linear-gradient(var(--c-accent-tint), var(--c-border)); }
.t-step h3 { font-size: var(--t-lg); margin-bottom:4px; }
.t-step p { font-size: var(--t-sm); color: var(--c-text-soft); }

/* ==================================================================
   15) Bewertungen — dunkle Glas-Quotes
   ================================================================== */
.quotes { display:grid; grid-auto-flow:column; grid-auto-columns:85%; gap: var(--s-2); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.quotes::-webkit-scrollbar { display:none; }
.quote {
  position:relative; scroll-snap-align:start;
  background: #1a1a1d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  padding:22px; overflow:hidden;
}
.quote::before { content:"\201C"; position:absolute; top:-14px; right:10px; font:700 4.5rem Georgia, serif; color: rgba(162,198,23,.28); }
.quote .stars { color: #f5c445; letter-spacing:2px; margin-bottom:8px; font-size: var(--t-sm); }
.quote p { font-style:italic; font-size: var(--t-sm); position:relative; color: #e8eae2; }
.quote footer { margin-top:10px; font-size: var(--t-sm); color: #a9b09b; }

/* ==================================================================
   16) FAQ — helles Glas
   ================================================================== */
.faq {
  max-width:760px; margin-inline:auto;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  padding: 8px clamp(16px, 3vw, 32px);
  box-shadow: 0 14px 34px rgba(40,60,20,.08);
}
.faq details { border-bottom:1px solid rgba(20,25,15,.08); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  display:flex; justify-content:space-between; align-items:center; gap: var(--s-2);
  cursor:pointer; list-style:none; min-height:56px; padding:16px 4px;
  font-weight:700; color: var(--c-heading); font-size: var(--t-body);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"▾"; color: var(--c-accent-strong); transition: transform var(--dur-2) var(--ease); flex:0 0 auto; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .a { display:grid; grid-template-rows:0fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.faq details[open] .a { grid-template-rows:1fr; }
.faq .a > div { overflow:hidden; }
.faq .a p { font-size: var(--t-sm); color: var(--c-text-soft); padding:0 4px 16px; }

/* ==================================================================
   17) Final-CTA
   ================================================================== */
.final-cta { text-align:center; }
.final-cta h2 { font-size: var(--t-3xl); margin-bottom: var(--s-1); }
.final-cta p { margin: 0 auto var(--s-3); }
.final-cta .trust-row { justify-content:center; margin-top: var(--s-3); }
.final-cta .trust-row span { color: var(--c-dark-muted); }

/* ==================================================================
   18) Footer
   ================================================================== */
.site-footer { background: var(--c-gray); border-top:1px solid #d5d8cf; padding-block: var(--s-4); font-size: var(--t-sm); color: var(--c-text-soft); }
.site-footer .row { display:flex; flex-direction:column; gap: var(--s-2); align-items:center; text-align:center; }
.site-footer a { text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.footer-links { display:flex; gap: var(--s-3); }
/* Firmen-Block: sichtbarer Trust (Name, Adresse, §34d) statt nur Copyright */
.footer-co { display:grid; gap:2px; }
.footer-co strong { color: var(--c-heading); }
.footer-copy { margin-top: var(--s-2); opacity:.8; }

/* ==================================================================
   19) Sticky-Bottom-CTA (mobile, Daumenzone) — Glas, aus Tab-Order
       wenn unsichtbar
   ================================================================== */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border-top: 1px solid rgba(255,255,255,.8);
  padding: 10px clamp(16px,4vw,24px) calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%); visibility:hidden;
  transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.sticky-cta.show { transform: none; visibility:visible; transition: transform var(--dur-2) var(--ease), visibility 0s; }
.sticky-cta .btn { width:100%; }

/* ==================================================================
   20) Video / iPhone-Frame (HeyGen-Video im Hero)
   ================================================================== */
.hero-video { display:flex; justify-content:center; }

/* iOS-Frame (CSS-only) */
.iphone {
  position:relative;
  width:min(230px, 64vw);
  aspect-ratio: 9 / 19.3;
  background:#141414;
  border-radius:40px;
  padding:9px;
  box-shadow:
    0 24px 56px rgba(20,25,15,.26),
    0 4px 14px rgba(0,0,0,.18),
    inset 0 0 0 2px #3c3c3c,
    inset 0 0 0 4px #101010;
}
/* Seitentasten */
.iphone::before {
  content:""; position:absolute; left:-2.5px; top:19%; width:3px; height:56px;
  background:#2c2c2c; border-radius:2px;
  box-shadow: 0 74px 0 #2c2c2c;
}
.iphone::after {
  content:""; position:absolute; right:-2.5px; top:24%; width:3px; height:84px;
  background:#2c2c2c; border-radius:2px;
}
.iphone-island {
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:70px; height:20px; background:#000; border-radius:999px; z-index:3;
}
.iphone-screen {
  position:relative; width:100%; height:100%;
  border-radius:32px; overflow:hidden;
  background-color:#1e1e1e;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
}
.iphone-screen video { width:100%; height:100%; object-fit:cover; display:block; }
.video-placeholder {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:24px; color:#a9b09b; font-size: var(--t-sm);
}
.video-placeholder strong { color:#f4f6ee; font-size: var(--t-body); }
/* Play-Orb als Glas statt Lime: entlastet das Accent-Budget im Hero */
.vp-icon {
  width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color:#f4f6ee; font-size:20px; padding-left:4px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.18);
  margin-bottom:6px;
}
/* Symmetrische Frontal-Pose: leichtes rotateX für Tiefe, kein rotateY = nicht seitlich gekippt (Milo-Wunsch) */
.hero-video .iphone {
  transform: perspective(1100px) rotateX(4deg);
  transition: transform .5s var(--ease);
  width: min(200px, 58vw);
}

/* ---- Vorstellungsvideo im Apple/Safari-Browser-Mockup (16:9) ---- */
.video-section { padding-block: clamp(48px, 6vw, 88px); }
.browser-mock {
  max-width: 940px; margin-inline: auto;
  border-radius: 14px; overflow: hidden;
  background: #1c1c1e;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 30px 60px -22px rgba(20,30,10,.32), 0 8px 22px rgba(0,0,0,.12);
}
.browser-bar {
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px;
  background: linear-gradient(#f7f7f8, #e8e8ea);
  border-bottom: 1px solid #d7d7da;
}
.browser-dots { display: flex; gap: 8px; flex: 0 0 auto; }
.browser-dots span { width: 12px; height: 12px; border-radius: 50%; display: block; }
.browser-dots .r { background: #ff5f57; }
.browser-dots .y { background: #febc2e; }
.browser-dots .g { background: #28c840; }
.browser-url {
  flex: 1 1 auto; max-width: 360px; margin-inline: auto;
  text-align: center; font-size: 12.5px; color: #6b6b70;
  background: #fff; border: 1px solid #e0e0e3; border-radius: 8px;
  padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-body { aspect-ratio: 16 / 9; background: #000; }
.browser-body video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==================================================================
   21) Reveals / Motion
   ================================================================== */
.reveal-hidden { opacity:0; transform: translateY(18px); }
.reveal-in { opacity:1; transform:none; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
/* Tilt-Karten: sanfte Basis-Transition (JS setzt transform) */
.prod-card, .quote, .b-card { transition: transform .3s var(--ease), border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2); }

/* ==================================================================
   22) A11y: Skip-Link (nur bei Tastatur-Fokus sichtbar)
   ================================================================== */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--c-accent-deep); color: #fff; font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus-visible { top: 0; }

/* ==================================================================
   23) Legacy-Support (Impressum/Datenschutz-Seiten)
   ================================================================== */
.legal main { padding-block: var(--s-6); }
.legal .card-text { color: var(--c-text-soft); }
.legal h2, .legal .h2 { font-size: var(--t-xl); margin: var(--s-3) 0 var(--s-1); }

/* ==================================================================
   24) Media-Queries (mobile-first, konsolidiert)
   ================================================================== */

/* Smartphone (< 480): kompaktere Card, Buttons volle Breite untereinander */
@media (max-width: 29.99rem) {
  .bezel { padding: 4px; border-radius: 16px; }
  .funnel-card { padding: 16px 14px; border-radius: 13px; }
  .funnel-card .funnel-head { margin-bottom: 12px; }
  .funnel-card .funnel-chip { display:none; }
  .funnel-nav { flex-direction: column; }
  .funnel-nav .btn { flex: 1 1 auto; width: 100%; }
  .field { margin-bottom: 12px; }
  .funnel-steps { min-height: 270px; }
}

/* Mobile (< 768): Blur reduzieren (GPU-Last auf schwachen Geraeten) */
@media (max-width: 47.99rem) {
  .prod-card, .faq, .bezel { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .bento .b-card, .quote { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* >= 480 */
@media (min-width: 30rem) {
  .stats-strip .row { grid-template-columns: repeat(3, 1fr); }
  .prod-grid { grid-auto-columns: 60%; }
}

/* Tablet (480-1060): Card zentriert, angenehme Formularbreite */
@media (min-width: 30rem) and (max-width: 65.99rem) {
  .funnel-card { padding: 24px 28px; }
}

/* >= 768 */
@media (min-width: 48rem) {
  .main-nav { display:flex; gap: clamp(16px, 2vw, 28px); }
  .main-nav a { position:relative; text-decoration:none; font-size: var(--t-sm); font-weight:700; color: var(--c-text-soft); padding:12px 2px; transition: color var(--dur-1); }
  .main-nav a::after { content:""; position:absolute; left:0; bottom:2px; height:2px; width:0; background: var(--c-accent); border-radius:999px; transition: width var(--dur-2) var(--ease); }
  .main-nav a:hover { color: var(--c-heading); }
  .main-nav a.active { color: var(--c-heading); }
  .main-nav a.active::after { width:100%; }
  .chip-nav { display:none; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; }
  .bento .b-card.wide { grid-column: span 2; }
  .bento .b-card.wide-btm { grid-column: span 2; }
  .prod-grid { grid-auto-flow:row; grid-template-columns: repeat(2, 1fr); overflow:visible; grid-auto-columns:unset; }
  .quotes { grid-auto-flow:row; grid-template-columns: repeat(3, 1fr); overflow:visible; grid-auto-columns:unset; }
  .timeline { grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .t-step { padding-left:0; padding-top:64px; text-align:center; }
  /* Nummer mittig über der Spalte → 3 Nummern symmetrisch bei 16/50/83 % */
  .t-num { top:0; left:50%; right:auto; transform:translateX(-50%); z-index:1; }
  /* Linie exakt von einer Nummer-Mitte zur nächsten (Spaltenbreite + gap) */
  .t-step:not(:last-child)::before { left:50%; right:auto; top:21px; bottom:auto; width: calc(100% + var(--s-3)); height:2px; background: linear-gradient(90deg, var(--c-accent-tint), var(--c-border)); z-index:0; }
  .sticky-cta { display:none; }
  .site-footer .row { flex-direction:row; justify-content:space-between; align-items:flex-start; text-align:left; }
  .hero-art { display:block; margin-top: var(--s-4); }
  .hero-art img {
    width: min(480px, 100%); height: auto;
    mix-blend-mode: multiply; /* fast-weisser Bild-BG verschmilzt mit Seiten-BG */
  }
  /* Anker-Offset ab Desktop kleiner (keine Chip-Nav mehr) */
  section { scroll-margin-top: 76px; }
}

/* >= 1060: Hero als EIN Grid — Funnel-Card spannt beide Reihen,
   Video links unter dem Text */
@media (min-width: 66rem) {
  .hero-grid { grid-template-columns: 1.08fr 1fr; gap: var(--s-4) var(--s-6); align-items:start; }
  .hero-grid .bezel { grid-column: 2; grid-row: 1; }
  .hero-video { grid-column: 1; grid-row: 2; align-self: end; justify-content: flex-start; padding-left: clamp(8px, 3vw, 48px); }
  .bezel { max-width:none; margin-inline:0; padding:8px; }
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(158px, 1fr); grid-auto-flow: row dense; }
  .bento .b-card.wide { grid-column: span 2; grid-row: span 2; }
  .bento .b-card.wide-btm { grid-column: span 3; }
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
  /* 3 Quotes = eine volle Reihe (statt 2+1-Luecke im 2er-Grid) */
  .quotes { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .reveal-hidden { opacity:1; transform:none; }
  .hero-video .iphone { transform: none; }
}

/* ---- Glas-Fallbacks: ohne backdrop-filter-Support solide Flaechen ---- */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .site-header .bar, .sticky-cta { background: rgba(255,255,255,.97); }
  .prod-card { background: rgba(255,255,255,.94); }
  .faq, .bezel { background: rgba(255,255,255,.92); }
  .bento .b-card, .quote { background: rgba(30,30,30,.92); }
}

/* Container Query: kompakte Karten in schmalen Containern */
@container (max-width: 200px) {
  .prod-card h3 { font-size: var(--t-body); }
  .prod-card p { display:none; }
}

/* ==================================================================
   Produkt-Karten: Impact-Upgrade (Icons, Featured, Preis-Hierarchie)
   ================================================================== */
/* Flex-Column ist Pflicht: nur so drückt margin-top:auto die Preiszeile
   in ALLEN Karten auf dieselbe Höhe (Symmetrie der Trennlinie) */
.prod-card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.prod-tag { position: absolute; top: 18px; right: 18px; }
.prod-ico {
  width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef3d2, rgba(162,198,23,.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px rgba(143,177,17,.15);
}
.prod-ico svg { width: 24px; height: 24px; stroke: var(--c-accent-deep); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Preiszeile statt Pill: ab | BETRAG | Zeitraum | Pfeil-Orb */
.prod-price {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: none; border-top: 1px solid rgba(20,25,15,.1);
  border-radius: 0; padding: 14px 0 0; margin-top: auto; min-height: 52px;
  font: 700 var(--t-sm) 'D-DIN', sans-serif; color: var(--c-text-soft); cursor: pointer;
  box-shadow: none; transition: color var(--dur-1);
}
.prod-price strong { font-size: var(--t-xl); color: var(--c-accent-deep); line-height: 1; }
.pp-ab, .pp-per { font-weight: 400; font-size: var(--t-sm); color: var(--c-text-soft); }
.prod-price .btn-arrow {
  margin-left: auto; width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
  background: linear-gradient(180deg, #c3e42e, #8fb111); color: var(--c-accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(143,177,17,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.prod-price:hover { background: transparent; color: var(--c-heading); }
.prod-price:hover strong { color: var(--c-accent-strong); }
.prod-price:hover .btn-arrow { transform: translateX(3px); }

/* ===== Produkte: heller grauer Panel + symmetrisches 4er-Grid (Glas-Karten) ===== */
.section-panel {
  background:#e8eae6;
  border:1px solid rgba(20,30,10,.07);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4.5vw, 56px) clamp(18px, 4vw, 44px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 20px 50px -32px rgba(30,45,15,.28);
}
#produkte .section-panel .section-head.center { background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:none; border-radius:0; padding:0; }
.prod-bento { display:grid; gap: clamp(12px,1.6vw,20px); grid-template-columns:1fr; }
@media (min-width: 40rem) { .prod-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .prod-bento { grid-template-columns: repeat(4, 1fr); } }

/* Score-Gauge in den Tarif-Karten (Halbkreis-Tacho + Schutz-Score) */
.sc-defs { position:absolute; width:0; height:0; overflow:hidden; }
.sc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sc-top h3 { font-size: var(--t-lg); overflow-wrap:break-word; }
.sc-badge { flex:none; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.sc-badge[data-strength="strong"]   { background: rgba(162,198,23,.2);  color: var(--c-accent-deep); }
.sc-badge[data-strength="moderate"] { background: rgba(234,179,8,.16);  color:#8a6300; }
.sc-badge[data-strength="weak"]     { background: rgba(229,72,77,.14);  color:#a5252a; }
.sc-gauge { position:relative; width:100%; max-width:208px; margin:2px auto 0; }
.sc-svg { display:block; width:100%; height:auto; overflow:visible; }
.sc-track { fill:none; stroke: rgba(20,30,10,.1); stroke-width:9; stroke-linecap:round; }
.sc-arc { fill:none; stroke-width:9; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition: stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1); }
.sc-readout { position:absolute; left:0; right:0; bottom:2px; text-align:center; }
.sc-num { display:block; font:700 2.3rem/1 'D-DIN', sans-serif; color: var(--c-heading); }
.sc-cap { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color: var(--c-text-soft); margin-top:3px; }

/* Lange Produktnamen sauber umbrechen (kein Overflow aus der Karte) */
.prod-card h3 { overflow-wrap: break-word; hyphens: auto; }

/* Lesbarkeit auf dem Foto-Hintergrund: Ablauf-Sektion als Glas-Panel */
#ablauf .shell {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 20px;
  padding-block: clamp(24px, 3vw, 40px);
  box-shadow: 0 14px 34px rgba(40,60,20,.08);
  max-width: 1136px;
}
/* Auch nackte Sektions-Header bekommen Lesbarkeits-Rückhalt */
#faq .section-head.center {
  background: rgba(252,253,250,.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 16px 24px;
}

/* Audience-Sichtbarkeit setzt display:revert!important (-> block) — Produkt-Karten
   brauchen aber Flex-Column fuer die buendige Preiszeile. Spezifischere Regel gewinnt: */
body[data-audience="privat"] .prod-card[data-aud="privat"],
body[data-audience="gewerbe"] .prod-card[data-aud="gewerbe"] { display: flex !important; }