/* Schriften direkt im Haupt-CSS (26.08.): der media=print-Trick koppelte den
   Start der woff2-Ladungen ans load-Ereignis (gemessen 112 ms Totzeit).
   ?v=1, weil /assets/fonts/* im Produktions-Caching 1 Jahr immutable bekommt. */
@font-face { font-family:'Clash Display'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/clash-display-500.woff2?v=1') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/clash-display-600.woff2?v=1') format('woff2'); }
@font-face { font-family:'Clash Display'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/clash-display-700.woff2?v=1') format('woff2'); }
@font-face { font-family:'Satoshi'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/satoshi-400.woff2?v=1') format('woff2'); }
@font-face { font-family:'Satoshi'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/satoshi-500.woff2?v=1') format('woff2'); }
@font-face { font-family:'Satoshi'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/satoshi-700.woff2?v=1') format('woff2'); }

/* =========================================================================
   CARFIT Hamburg — Design System
   Cinematic Automotive · Indigo #332883 + Azur #009ada
   Display: Clash Display · Body: Satoshi (selbst gehostet)
   ========================================================================= */

/* Fonts (selbst gehostet) werden verzögert über assets/css/fonts.css geladen. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ---------- Accessibility-Basics ---------- */
.skip-link { position: absolute; white-space: nowrap; left: -9999px; top: 0; z-index: 1000; background: var(--azure-bright); color: #06121f; font-weight: 800; padding: .8rem 1.3rem; border-radius: 0 0 12px 0; }
.skip-link:focus { left: 0; outline: 3px solid #fff; outline-offset: 2px; }
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); } /* a11y: fokussierbar, anders als display:none */
.wiz-foto-btn:focus-within { outline: 3px solid var(--azure-bright); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--azure-bright); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }
.req-note { color: var(--muted); font-size: .85rem; margin: -0.6rem 0 1rem; }


/* ---------- Tokens ---------- */
:root {
  --ink:        #070a14;
  --ink-2:      #0b0f1e;
  --surface:    #121732;
  --surface-2:  #171d3d;
  --line:       rgba(255,255,255,.08);
  --line-2:     rgba(255,255,255,.14);

  --indigo:       #332883;
  --indigo-deep:  #1a1550;
  --indigo-glow:  rgba(80,60,190,.45);
  --azure:        #009ada;
  --azure-bright: #35c4ff;
  --azure-glow:   rgba(0,154,218,.35);

  --text:   #eef2fb;
  --muted:  #9aa3c4;
  --faint:  #7c8aa5; /* a11y: 4.7:1 auf surface-2 (war #6b7395 = 3.5:1) */

  --grad-brand: linear-gradient(115deg, #007cb4 0%, #4a5ce0 55%, var(--indigo) 100%); /* a11y: Start war #009ada (3.2:1 zu Weiß), jetzt 4.6:1 — NUR für Flächen mit weißem Text */
  --grad-text: linear-gradient(115deg, #35c4ff 0%, #5a6ce6 55%, #6f7fe8 100%); /* a11y: für background-clip:text — jeder Punkt ≥3:1 auf ink/surface (Indigo-Ende wäre 1,5:1) */
  --grad-ink:   linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);

  --radius:    18px;
  --radius-lg: 28px;
  --shadow:    0 24px 60px -20px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px var(--line), 0 30px 70px -30px var(--azure-glow);

  --font-display: 'Clash Display', ui-sans-serif, sans-serif;
  --font-body:    'Satoshi', ui-sans-serif, system-ui, sans-serif;

  --wrap: 1220px;

  /* Theme-faehige Zusatz-Tokens (Dark-Standard; Light ueberschreibt unten) */
  --card-tint:   rgba(255,255,255,.02);
  --card-tint-2: rgba(255,255,255,.04);
  --card-tint-3: rgba(255,255,255,.03);
  --trust-tint:  rgba(255,255,255,.015);
  --header-bg:        rgba(7,10,20,.55);
  --header-bg-solid:  rgba(7,10,20,.85);
  --menu-bg:          #080b16;
  --text-strong: #ffffff;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { /* ambient glow field */
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 40% at 78% -5%, var(--indigo-glow), transparent 60%),
    radial-gradient(45% 35% at 5% 8%, var(--azure-glow), transparent 55%),
    var(--ink);
}
body::after { /* film grain */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: min(100% - 2*var(--gutter), var(--wrap)); margin-inline: auto; }
.wide { width: min(100% - 2*var(--gutter), 1400px); margin-inline: auto; }

/* ---------- Typography ---------- */
/* Clash Display hat ein sehr schmales Leerzeichen-Glyph (~.14em) -> word-spacing gleicht das aus, damit Wörter in Überschriften nicht zusammenkleben. Wirkt nur auf echte Leerzeichen (Zahlen/Einzelwörter unberührt). */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; word-spacing: .14em; }
.h-xl { font-size: clamp(2.6rem, 6.5vw, 5.2rem); }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h-md { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--muted); }
.accent-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--azure-bright);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--grad-brand); border-radius: 2px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border-radius: 100px; font-weight: 700; font-size: .98rem;
  letter-spacing: .01em; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 30px -8px var(--azure-glow); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -10px var(--azure-glow); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: var(--card-tint); }
.btn-ghost:hover { border-color: var(--azure); color: var(--text-strong); transform: translateY(-3px); background: rgba(0,154,218,.08); }
.btn svg { width: 1.1em; height: 1.1em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: var(--header-bg); border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.site-header.scrolled { background: var(--header-bg-solid); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 2rem; height: 76px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.brand img { height: 42px; width: auto; }
.brand-name { display: inline-flex; flex-direction: column; line-height: 1; font-size: 1.4rem; }
.brand-name small { font-family: var(--font-body); font-weight: 600; font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; color: var(--azure-bright); margin-top: .4em; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; margin-left: auto; }
.nav-links a { font-weight: 600; font-size: .96rem; color: var(--muted); position: relative; transition: color .2s; white-space: nowrap; /* 26.08.: 'Leasing-Check' brach am Bindestrich zweizeilig um */ }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--grad-brand); border-radius: 2px; transition: width .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--text-strong); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
/* Header-CTA "Preis anfragen" erst nach dem Hero einblenden — verhindert doppelten CTA above the fold.
   visibility+opacity (nicht display) hält den Platz reserviert -> kein Layout-Sprung beim Ein-/Ausblenden. */
.nav-cta-hero[data-hero-cta] { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.nav-cta-hero[data-hero-cta].is-visible { opacity: 1; visibility: visible; transform: none; }
.nav-phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text-strong); }
.nav-phone svg { width: 1.05em; color: var(--azure-bright); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text-strong); border-radius: 2px; transition: .3s; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; margin-bottom: 1.6rem;
  border: 1px solid var(--line-2); border-radius: 100px; background: var(--card-tint-3);
  font-size: .85rem; font-weight: 600; color: var(--muted);
}
.hero-badge b { color: #fff; }
.stars { color: #ffc24b; letter-spacing: 1px; }
.hero h1 { margin: 0 0 1.3rem; }
.hero .tagline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem,1.9vw,1.4rem); color: var(--azure-bright); margin-bottom: 1rem; word-spacing: .14em; }
.hero .lead { max-width: 40ch; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-visual { position: relative; }
.hero-visual .frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
  aspect-ratio: 4/5;
}
.hero-visual .frame img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,10,20,.55)); }
.hero-float {
  position: absolute; left: -28px; bottom: 34px; z-index: 3;
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.3rem;
  background: rgba(11,15,30,.8); backdrop-filter: blur(12px); border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: var(--shadow);
}
.hero-float .num { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-float small { color: var(--muted); font-size: .82rem; display: block; line-height: 1.3; }

/* ---------- Hero mit Hintergrund-Video ---------- */
.hero--video { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem); }
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; opacity: 0; transition: opacity .8s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,10,20,.94) 0%, rgba(7,10,20,.80) 38%, rgba(7,10,20,.34) 70%, rgba(7,10,20,.60) 100%),
    linear-gradient(0deg, rgba(7,10,20,.92) 0%, rgba(7,10,20,0) 44%),
    radial-gradient(60% 55% at 82% -5%, var(--indigo-glow), transparent 60%); }
.hero--video .wide { position: relative; z-index: 2; }
.hero--video .hero-copy { max-width: 620px; }
.hero--video .hero-float { position: absolute; left: auto; right: clamp(20px, 5vw, 56px); bottom: clamp(20px, 5vw, 44px); z-index: 3; }
@media (max-width: 700px) {
  .hero--video { min-height: 84vh; }
  .hero--video .hero-copy { max-width: 100%; }
  .hero--video .hero-float { right: 14px; bottom: 14px; padding: .8rem 1.05rem; }
  .hero--video .hero-copy { padding-bottom: 104px; } /* Platz für das 30-Jahre-Schild — überlappte sonst den 2. Button */
}

/* ---------- Trust bar ---------- */
.trust { border-block: 1px solid var(--line); background: var(--trust-tint); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2.4rem 0; text-align: center; }
.trust .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.5vw, 2.9rem); color: var(--text-strong); }
.trust .num span { color: var(--azure-bright); }
.trust .lbl { color: var(--muted); font-size: .92rem; margin-top: .2rem; }

/* ---------- Section shell ---------- */
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-head { max-width: 640px; margin-bottom: 3.2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head h2 { margin-bottom: 1rem; }

/* ---------- Services grid ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.svc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.svc-card:hover { transform: translateY(-6px); border-color: var(--azure); box-shadow: var(--shadow-glow); }
.svc-card .thumb { aspect-ratio: 3/2; overflow: hidden; position: relative; }
.svc-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.svc-card:hover .thumb img { transform: scale(1.07); }
.svc-card .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18,23,50,.85)); }
.svc-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.svc-body h2,
.svc-body h3 { font-size: 1.28rem; margin-bottom: .55rem; }
.svc-body p { color: var(--muted); font-size: .96rem; margin-bottom: 1.2rem; flex: 1; }
.svc-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--azure-bright); font-size: .95rem; }
.svc-link svg { width: 1em; transition: transform .25s; }
.svc-card:hover .svc-link svg { transform: translateX(4px); }

/* ---------- Variante: Seitenkopf ueber die volle Breite ----------
   Normale Unterseiten begrenzen die H1 auf .page-hero h1 { max-width: 18ch }.
   Diese Variante hebt die Begrenzung auf, damit die Ueberschrift ueber die
   ganze Seite laeuft und nicht in der linken Spalte umbricht. */
.hero-head-full { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.page-hero .hero-head-full h1 { max-width: none; margin: 1rem 0 0; }
.hero-head-full .crumbs { margin-bottom: 1.2rem; }

/* ---------- Bildband (volle Breite, als Atempause zwischen Textstrecken) ----------
   Zweck: die Startseite hatte 4446 von 9515 Pixeln ohne jedes Bild. Das Band
   unterbricht lange Textstrecken, ohne Text auf ein Bild zu legen (Kontrast!).
   Der Text sitzt unten in einem kraeftigen Verlauf, nicht frei auf dem Foto. */
.bildband {
  position: relative;
  margin: clamp(2rem,5vw,3.5rem) 0;
  min-height: clamp(240px, 34vw, 430px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.bildband > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bildband::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,11,26,.30) 0%, rgba(8,11,26,.12) 38%, rgba(8,11,26,.86) 100%);
}
.bildband .wide { position: relative; z-index: 2; padding-block: clamp(1.4rem,3vw,2.4rem); }
.bildband-text { max-width: 46ch; color: #fff; }
.bildband-text b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.15; margin-bottom: .45rem; color: #fff;
}
.bildband-text span { color: rgba(255,255,255,.86); font-size: clamp(.95rem,1.4vw,1.05rem); }

/* ---------- Schlussaufruf mit Foto im Hintergrund ---------- */
.cta-foto { position: relative; overflow: hidden; }
.cta-foto > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Sehr kraeftiger Schleier: der Text muss AA-Kontrast halten, auch auf hellen Lackflaechen. */
.cta-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,11,26,.94) 0%, rgba(8,11,26,.88) 45%, rgba(8,11,26,.72) 100%);
}
.cta-foto > .wide { position: relative; z-index: 2; }
html[data-theme="light"] .cta-foto::after {
  background: linear-gradient(100deg, rgba(10,14,32,.92) 0%, rgba(10,14,32,.86) 45%, rgba(10,14,32,.70) 100%);
}
html[data-theme="light"] .cta-foto,
html[data-theme="light"] .cta-foto h2,
html[data-theme="light"] .cta-foto p { color: #fff; }

@media (max-width: 640px) {
  .bildband { min-height: 260px; }
}

/* ---------- Feature split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.split-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; }
.feature-list { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.feature-item { display: flex; gap: 1rem; }
.feature-item .ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,154,218,.12); border: 1px solid rgba(0,154,218,.25); color: var(--azure-bright); }
.feature-item .ico svg { width: 22px; height: 22px; }
.feature-item h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; margin-bottom: .2rem; }
.feature-item p { color: var(--muted); font-size: .94rem; }

/* ---------- Why chips ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.why-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-tint); transition: border-color .3s, background .3s; }
.why-card:hover { border-color: var(--line-2); background: var(--card-tint-2); }
.why-card .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--grad-brand); color: #fff; margin-bottom: 1rem; }
.why-card .ico svg { width: 22px; height: 22px; }
.why-card h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; margin-bottom: .4rem; }
.why-card p { color: var(--muted); font-size: .93rem; }

/* ---------- Founder ---------- */
.founder { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(120deg, var(--indigo-deep), var(--ink-2)); }
.founder-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.founder-photo { position: relative; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; max-height: 520px; }
.founder-body { padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem) 0; }
.founder-body .quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.9rem); line-height: 1.25; margin: 1rem 0 1.4rem; word-spacing: .14em; }
.founder-body p { color: var(--muted); margin-bottom: 1rem; }
.founder-sign { margin-top: 1.4rem; font-family: var(--font-display); font-weight: 700; color: var(--text-strong); word-spacing: .14em; }
.founder-sign small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: .88rem; }

/* ---------- Familienunternehmen (Zwei Generationen) ---------- */
.family-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: stretch; margin-bottom: 1.6rem; }
.person-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: clamp(1.6rem, 3vw, 2.4rem) 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.person-card .portrait { width: clamp(110px, 12vw, 150px); height: clamp(110px, 12vw, 150px); border-radius: 50%; object-fit: cover; border: 3px solid rgba(0,154,218,.4); box-shadow: 0 12px 34px -12px var(--azure-glow); margin-bottom: 1rem; background: #fff; }
.person-tag { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; color: var(--azure-bright); }
.person-card h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: .15rem; }
.person-card > small { color: var(--faint); font-size: .86rem; }
.person-card p { color: var(--muted); font-size: .95rem; margin-top: .7rem; max-width: 34ch; }
.person-card.energy { background: linear-gradient(155deg, var(--indigo-deep), var(--surface) 70%); border-color: rgba(0,154,218,.3); }
.family-plus { align-self: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.family-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.6rem); }
.family-quote { padding: clamp(1.4rem, 2.5vw, 1.9rem); border: 1px solid var(--line); border-left: 3px solid var(--azure); border-radius: var(--radius); background: var(--card-tint); }
.family-quote .quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.55; margin-bottom: 1.1rem; word-spacing: .14em; }
.family-quote .quote b { color: var(--azure-bright); }
.family-quote .who { font-weight: 800; }
.family-quote .who small { display: block; color: var(--faint); font-weight: 500; font-size: .84rem; }
@media (max-width: 960px) {
  .family-grid { grid-template-columns: 1fr; }
  .family-plus { justify-self: center; line-height: 1; }
  .family-story { grid-template-columns: 1fr; }
}

/* ---------- Rechenbeispiele (echte Gutachten-Fälle) ---------- */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.6rem); margin-bottom: 1.6rem; }
.case-card { position: relative; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.case-card .veh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 800; font-size: 1.05rem; margin-bottom: 1.1rem; }
.case-card .save-badge { flex: none; font-family: var(--font-display); font-weight: 700; font-size: .95rem; padding: .35rem .85rem; border-radius: 100px; background: rgba(46,204,113,.14); border: 1px solid rgba(46,204,113,.35); color: #7ef0c0; }
.case-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px dashed var(--line-2); }
.case-row:last-child { border-bottom: none; }
.case-row .lbl { color: var(--muted); font-size: .92rem; }
.case-row .val { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.case-row.bad .val { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,90,100,.75); text-decoration-thickness: 2px; }
.case-row.good .val { font-size: clamp(1.6rem, 2.5vw, 2rem); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.case-note { color: var(--faint); font-size: .82rem; margin-top: .8rem; }
@media (max-width: 820px) { .case-grid { grid-template-columns: 1fr; } }

/* 4er-Schrittfolge (z. B. Fuhrpark-Prozess) — responsiv wie .steps */
.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps-4 { grid-template-columns: 1fr; } }

/* ---------- Stellenanzeigen (Jobs-Seite) ---------- */
.jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); }
.job-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .25s, transform .25s; }
.job-card:hover { border-color: rgba(0,154,218,.35); transform: translateY(-4px); }
.job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .5rem; }
.job-head h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); }
.job-badge { flex: none; font-weight: 700; font-size: .76rem; letter-spacing: .06em; padding: .35rem .8rem; border-radius: 100px; background: rgba(0,154,218,.12); border: 1px solid rgba(0,154,218,.3); color: var(--azure-bright); white-space: nowrap; }
.job-intro { color: var(--muted); font-size: .95rem; margin-bottom: .4rem; }
.job-card h4 { font-family: var(--font-body); font-weight: 800; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 1rem 0 .5rem; line-height: 1.65; word-spacing: normal; }
.job-card ul { display: grid; gap: .4rem; }
.job-card ul li { position: relative; padding-left: 1.25rem; color: var(--muted); font-size: .92rem; }
.job-card ul li::before { content: "→"; position: absolute; left: 0; color: var(--azure-bright); }
.job-card ul li b { color: var(--text); }
.job-card .btn { margin-top: auto; }
.job-card ul:last-of-type { margin-bottom: 1.5rem; }
@media (max-width: 1100px) { .jobs-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ-Akkordeon (natives details/summary, auf allen Seiten) ---------- */
.faq-list { display: grid; gap: .7rem; margin-top: 1.6rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .25s; }
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: rgba(0,154,218,.35); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 1.3rem; font-weight: 700; font-size: 1rem; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--azure-bright); font-family: var(--font-display); font-size: 1.15rem; line-height: 1; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); background: rgba(0,154,218,.14); border-color: rgba(0,154,218,.4); }
.faq-item[open] summary { color: var(--azure-bright); }
.faq-item .faq-body { padding: 0 1.3rem 1.15rem; color: var(--muted); font-size: .96rem; line-height: 1.65; }
.faq-item .faq-body p { margin: 0 0 .6rem; max-width: none; }
.faq-item .faq-body p:last-child { margin-bottom: 0; }
.faq-item .faq-body a { color: var(--azure-bright); }

/* ---------- Ansprechpartner-Banner (B2B) ---------- */
.contact-person { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.5rem); flex-wrap: wrap; }
.contact-person .portrait { flex: none; width: clamp(110px, 12vw, 150px); height: clamp(110px, 12vw, 150px); border-radius: 50%; object-fit: cover; border: 3px solid rgba(0,154,218,.4); box-shadow: 0 12px 34px -12px var(--azure-glow); background: #fff; }
.contact-person .body { flex: 1; min-width: 260px; }
.contact-person .body h3 { margin: .3rem 0 .2rem; }
.contact-person .body .role { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.contact-person .actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- Fuhrpark-Portal-Zugang ---------- */
.portal-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .2rem; }
.portal-ico { flex: none; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; box-shadow: 0 12px 30px -12px var(--azure-glow); }
.portal-ico svg { width: 27px; height: 27px; }
.portal-note { font-size: .92rem; margin-top: 1rem; color: var(--muted); }
.portal-note a { color: var(--azure-bright); font-weight: 700; }
.portal-benefits-head { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--azure-bright); margin-bottom: 1.2rem; }
.portal-benefits { display: grid; gap: 1.05rem; }
.portal-benefits li { position: relative; padding-left: 2.1rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.portal-benefits li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 7px; background: rgba(0,154,218,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2335c4ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.portal-benefits li b { display: block; color: var(--text); font-weight: 700; margin-bottom: .15rem; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
.review { padding: 1.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.review .stars { margin-bottom: .9rem; font-size: 1rem; }
.review p { font-size: .98rem; margin-bottom: 1.2rem; }
.review .who { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: .92rem; }
.review .who .av { width: 38px; height: 38px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; font-family: var(--font-display); color: #fff; }
.review .who small { display: block; color: var(--faint); font-weight: 500; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2.5rem,6vw,4.5rem); text-align: center; background: var(--grad-brand); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% -20%, rgba(255,255,255,.25), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 2rem; font-size: 1.1rem; }
.cta-band .btn-primary { background: #fff; color: var(--indigo); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }

/* ---------- Contact / Form ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); }
.contact-info .info-row { display: flex; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.contact-info .info-row:last-child { border-bottom: none; }
.contact-info .ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(0,154,218,.12); border: 1px solid rgba(0,154,218,.25); color: var(--azure-bright); }
.contact-info .ico svg { width: 22px; }
.contact-info h2, .contact-info h3 { font-family: var(--font-body); font-weight: 800; font-size: 1rem; margin-bottom: .15rem; }
.contact-info p, .contact-info a { color: var(--muted); font-size: .96rem; }
.contact-info a:hover { color: var(--azure-bright); }
.form-card { padding: clamp(1.6rem,3vw,2.4rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .45rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: 12px; background: var(--ink-2);
  border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: .96rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-glow); }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: .82rem; color: var(--faint); margin-top: .6rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.1rem; font-size: .88rem; color: var(--muted); }
.consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--azure); }
.consent a { color: var(--azure-bright); }
.form-status { font-size: .92rem; font-weight: 600; border-radius: 12px; } /* a11y: bleibt im Accessibility-Tree — display:none-Toggle würde Ansagen schlucken */
.form-status.ok { margin-top: 1rem; padding: .8rem 1rem; color: #7ef0c0; background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.3); }
.form-status.err { margin-top: 1rem; padding: .8rem 1rem; color: #ff9ba3; background: rgba(255,80,90,.08); border: 1px solid rgba(255,80,90,.3); }

/* ---------- Terminbuchung (Sichtung) ---------- */
.booking-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(1.4rem, 3vw, 2.2rem); }
.booking-step-label { display: flex; align-items: center; gap: .7rem; font-weight: 800; margin: 0 0 1rem; font-size: 1.05rem; }
.booking-step-label .n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-size: .95rem; }
.day-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; margin-bottom: 1.6rem; }
.day-btn { padding: .7rem .4rem; border-radius: 14px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); text-align: center; transition: border-color .2s, background .2s, transform .2s; }
.day-btn small { display: block; color: var(--faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .15rem; }
.day-btn b { font-family: var(--font-display); font-size: 1.05rem; }
.day-btn .cnt { display: block; font-size: .72rem; color: var(--azure-bright); margin-top: .2rem; }
.day-btn:hover:not(:disabled) { border-color: var(--azure); transform: translateY(-2px); }
.day-btn.active { border-color: var(--azure); background: rgba(0,154,218,.14); box-shadow: 0 0 0 3px var(--azure-glow); }
.day-btn:disabled { opacity: .35; cursor: not-allowed; }
.day-btn--mehr { border-style: dashed; color: var(--muted); }
.day-btn--mehr:hover { color: var(--text); border-color: var(--azure); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; margin-bottom: 1.6rem; }
.slot-btn { padding: .65rem .4rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s, transform .2s; }
.slot-btn:hover { border-color: var(--azure); transform: translateY(-2px); }
.slot-btn.active { border-color: var(--azure); background: var(--grad-brand); color: #fff; }
.slot-empty { color: var(--muted); font-size: .95rem; padding: .6rem 0 1.4rem; }
.booking-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding: .9rem 1.2rem; border: 1px dashed var(--line-2); border-radius: 14px; margin-bottom: 1.4rem; font-size: .95rem; color: var(--muted); }
.booking-summary b { color: var(--text-strong); font-family: var(--font-display); font-size: 1.05rem; }
.booking-note { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 14px; background: rgba(0,154,218,.08); border: 1px solid rgba(0,154,218,.25); color: var(--muted); font-size: .93rem; margin-bottom: 1.4rem; }
.booking-note svg { flex: none; width: 20px; height: 20px; color: var(--azure-bright); margin-top: 2px; }
.booking-success { text-align: center; padding: clamp(2rem,5vw,3.5rem) 1rem; }
.booking-success .big { width: 72px; height: 72px; margin: 0 auto 1.4rem; border-radius: 50%; display: grid; place-items: center; background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.35); color: #7ef0c0; }
.booking-success .big svg { width: 34px; height: 34px; }
.booking-success h2, .booking-success h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.booking-already h2 { font-size: 1.17em; }
.booking-success p { color: var(--muted); max-width: 52ch; margin: 0 auto .6rem; }
.spin { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--line-2); border-top-color: var(--azure-bright); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -4px; margin-right: .5rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Anfrage-Assistent (Wizard) ---------- */
.wiz-progress { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.wiz-progress small { flex: none; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.wiz-bar { flex: 1; height: 10px; border-radius: 100px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; }
.wiz-bar span { display: block; height: 100%; background: var(--grad-brand); border-radius: 100px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.wiz-q { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 1.4rem; }
.wiz-q .wiz-optional { display: block; font-family: var(--font-body); font-weight: 500; font-size: .85rem; color: var(--faint); margin-top: .3rem; }
.wiz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.wiz-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.3rem .8rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); text-align: center; transition: border-color .2s, background .2s, transform .2s; }
.wiz-tile .ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(0,154,218,.12); border: 1px solid rgba(0,154,218,.25); color: var(--azure-bright); margin-bottom: .3rem; }
.wiz-tile .ico svg { width: 26px; height: 26px; }
.wiz-tile b { font-family: var(--font-display); font-size: 1.02rem; }
.wiz-tile small { color: var(--faint); font-size: .78rem; }
.wiz-tile:hover { border-color: var(--azure); transform: translateY(-3px); }
.wiz-tile.active { border-color: var(--azure); background: rgba(0,154,218,.14); box-shadow: 0 0 0 3px var(--azure-glow); }
.wiz-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.wiz-opt { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font-weight: 700; text-align: center; transition: border-color .2s, background .2s, transform .2s; }
.wiz-opt:hover { border-color: var(--azure); transform: translateY(-2px); }
.wiz-opt.active { border-color: var(--azure); background: var(--grad-brand); color: #fff; }
.wiz-note { padding: .8rem 1rem; border-radius: 12px; background: rgba(0,154,218,.08); border: 1px solid rgba(0,154,218,.25); color: var(--muted); font-size: .9rem; margin-bottom: 1.2rem; }
.wiz-hint { color: var(--faint); font-size: .85rem; margin-top: .8rem; }
.wiz-foto-block { margin: 1.2rem 0; padding: 1.1rem 1.2rem; border: 1px dashed var(--line-2); border-radius: 14px; }
.wiz-foto-label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: .2rem; }
.wiz-foto-label small { color: var(--faint); font-weight: 500; }
.wiz-foto-hint { color: var(--muted); font-size: .86rem; margin-bottom: .9rem; }
.wiz-foto-btn { cursor: pointer; }
.wiz-foto-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; margin-top: .9rem; }
.wiz-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
.wiz-foto img { width: 100%; height: 100%; object-fit: cover; }
.wiz-foto button { position: absolute; top: 2px; right: 2px; width: 28px; height: 28px; border-radius: 50%; background: rgba(7,10,20,.75); color: #fff; font-size: 14px; line-height: 1; display: grid; place-items: center; }
.wiz-foto button:hover { background: rgba(255,80,90,.85); }
.wiz-nav { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; } /* DOM: Weiter zuerst (Tab-Logik), optisch rechts */
.wiz-nav .btn-primary { min-width: 200px; }
@media (max-width: 640px) {
  .wiz-tiles { grid-template-columns: repeat(2, 1fr); }
  .wiz-options { grid-template-columns: 1fr; }
  .wiz-nav { flex-direction: column; }
  .wiz-nav .btn { width: 100%; }
}

/* ---------- Der Beweis / Fallbeispiele ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.proof-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.proof-card:hover { transform: translateY(-6px); border-color: var(--azure); box-shadow: var(--shadow-glow); }
.proof-card.feat { border-color: rgba(0,154,218,.35); }
.proof-head { padding: 1.3rem 1.4rem 1.1rem; background: linear-gradient(160deg, var(--indigo-deep), var(--surface-2)); border-bottom: 1px solid var(--line); }
.proof-tag { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azure-bright); margin-bottom: .5rem; }
.proof-head h3 { font-size: 1.2rem; }
.proof-head small { color: var(--muted); font-size: .85rem; }
.proof-rows { padding: 1.1rem 1.4rem; display: grid; }
.proof-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.proof-row:last-child { border-bottom: none; }
.proof-row span { color: var(--muted); }
.proof-row b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.proof-row b.neg { color: #ff9ba3; text-decoration: line-through; text-decoration-color: rgba(255,155,163,.55); }
.proof-saved { margin: auto 1.4rem 1.4rem; padding: 1rem 1.2rem; border-radius: 14px; background: rgba(0,154,218,.1); border: 1px solid rgba(0,154,218,.3); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.proof-saved small { color: var(--azure-bright); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.proof-saved b { font-family: var(--font-display); font-size: 1.85rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.proof-total { margin-top: 1.4rem; padding: clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,4vw,3rem); border-radius: var(--radius-lg); background: var(--grad-brand); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; position: relative; overflow: hidden; }
.proof-total::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 130% at 12% -25%, rgba(255,255,255,.25), transparent 60%); }
.proof-total > * { position: relative; z-index: 1; }
.proof-total .eyebrow { color: #fff; }
.proof-total .eyebrow::before { background: rgba(255,255,255,.7); }
.proof-total p { color: rgba(255,255,255,.92); font-size: 1.05rem; max-width: 36ch; margin-top: .4rem; }
.proof-total-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6.5vw, 4.2rem); color: #fff; line-height: 1; white-space: nowrap; }
.proof-note { color: var(--faint); font-size: .84rem; margin-top: 1.1rem; }

/* ---------- Vorher / Nachher ---------- */
.ba-list { display: grid; gap: 1.8rem; }
.ba-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card-tint); padding: clamp(1.2rem,3vw,1.8rem); }
.ba-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.ba-num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-brand); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.ba-head h3 { font-size: 1.18rem; }
.ba-badge { margin-left: auto; padding: .42rem .95rem; border-radius: 100px; background: rgba(0,154,218,.14); border: 1px solid rgba(0,154,218,.32); color: var(--azure-bright); font-weight: 800; font-size: .85rem; white-space: nowrap; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ba-fig { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); }
.ba-fig img { width: 100%; aspect-ratio: 97/70; object-fit: cover; display: block; }

/* ---------- Testimonials (Kundenstimmen) ---------- */
.tstm-wrap { display: grid; gap: 1.4rem; }
.tstm { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.6rem); background: var(--surface); }
.tstm-feat { background: linear-gradient(150deg, var(--indigo-deep), var(--ink-2)); border-color: rgba(0,154,218,.25); }
.tstm-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tstm .stars { color: #ffc24b; font-size: 1.1rem; letter-spacing: 2px; }
.tstm-logo { font-family: var(--font-display); font-weight: 800; letter-spacing: .05em; word-spacing: .14em; color: var(--text-strong); font-size: 1.1rem; }
.tstm-logo span { color: var(--azure-bright); }
.tstm-logo-img { height: 26px; width: auto; display: block; }
.tstm blockquote { display: grid; gap: .9rem; }
.tstm blockquote p { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.tstm-feat blockquote p { color: #dbe3fb; }
.tstm-who { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-2); font-weight: 800; }
.tstm-who small { display: block; color: var(--muted); font-weight: 500; font-size: .88rem; margin-top: .15rem; }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ba-pair { grid-template-columns: 1fr; }
  .proof-total { flex-direction: column; align-items: flex-start; }
  .proof-saved b { font-size: 1.6rem; }
}

/* ---------- Leasing: Risiken / Kennzahlen / Vorteile (Sichtung) ---------- */
.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.risk { display: flex; gap: 1rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-left: 3px solid #ff6b7a; border-radius: var(--radius); background: rgba(255,90,100,.045); }
.risk .n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,90,100,.15); color: #ff9ba3; font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.risk h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.02rem; margin-bottom: .3rem; }
.risk p { color: var(--muted); font-size: .93rem; }

.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.figure { text-align: center; padding: 1.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.figure b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.05; }
.figure span { color: var(--muted); font-size: .9rem; margin-top: .4rem; display: block; }

.perk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.perk { padding: 1.9rem 1.6rem; border: 1px solid rgba(0,154,218,.22); border-radius: var(--radius); background: rgba(0,154,218,.05); text-align: center; }
.perk .big { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--azure-bright); }
.perk h3 { font-family: var(--font-body); font-weight: 800; margin: .5rem 0 .35rem; font-size: 1.05rem; }
.perk p { color: var(--muted); font-size: .93rem; }

/* ---------- Leasing-Schwerpunkt (Startseite): Privat vs. Firmen ---------- */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.aud-card { display: flex; flex-direction: column; padding: clamp(1.8rem,3vw,2.6rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.aud-card.firmen { background: linear-gradient(155deg, var(--indigo-deep), var(--surface) 78%); border-color: rgba(0,154,218,.3); }
.aud-card .tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--azure-bright); margin-bottom: .8rem; }
.aud-card h3 { font-size: clamp(1.3rem,2.2vw,1.7rem); margin-bottom: .7rem; }
.aud-card > p { color: var(--muted); margin-bottom: 1.3rem; }
.aud-card ul { display: grid; gap: .75rem; margin-bottom: 1.8rem; }
.aud-card li { display: flex; gap: .8rem; color: var(--text); font-size: .96rem; }
.aud-card li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; background: rgba(0,154,218,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2335c4ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center no-repeat; }
.aud-card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 760px) { .risk-grid, .figures, .perk-grid, .aud-grid { grid-template-columns: 1fr; } }

/* ---------- Page hero (subpages) ---------- */
.page-hero { position: relative; padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); }
.page-hero .crumbs { font-size: .86rem; color: var(--faint); margin-bottom: 1.4rem; }
.page-hero .crumbs a:hover { color: var(--azure-bright); }
.page-hero h1 { max-width: 18ch; margin-bottom: 1.2rem; }
.page-hero .lead { max-width: 56ch; }
.price-tag { display: inline-flex; align-items: baseline; gap: .5rem; margin-top: 1.8rem; padding: .7rem 1.2rem; border: 1px solid var(--line-2); border-radius: 100px; background: var(--card-tint-3); }
.price-tag b { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-strong); white-space: nowrap; flex: none; }
.price-tag span { color: var(--muted); font-size: .9rem; }

/* ---------- Prose ---------- */
.prose p { color: var(--muted); margin-bottom: 1.1rem; max-width: 68ch; }
.prose h3 { font-size: 1.5rem; margin: 2.2rem 0 .9rem; }
.prose-legal h2 { font-size: 1.5rem; margin: 2.2rem 0 .9rem; }
.prose ul.ticks { display: grid; gap: .8rem; margin: 1.2rem 0; }
.prose ul.ticks li { position: relative; padding-left: 2.1rem; color: var(--text); }
.prose ul.ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 7px; background: rgba(0,154,218,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2335c4ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
/* Prozess-/Ablauflisten (<li><b>Titel:</b> Beschreibung …>): Titel in fester Spalte, Beschreibung flexibel
   → alle Beschreibungen fluchten an derselben senkrechten Linie, egal wie lang der Titel ist (auch bei Umbruch).
   Einfache Häkchenlisten ohne <b> bleiben unberührt einspaltig. Zentral über :has(b) — keine HTML-Pflege je Seite. */
.prose ul.ticks li:has(b) { display: grid; grid-template-columns: 15rem 1fr; column-gap: 1.1rem; align-items: start; }
.prose ul.ticks li:has(b) b { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  /* Handy: zu eng für zwei Spalten → Titel über die Beschreibung stapeln, weiterhin sauber linksbündig */
  .prose ul.ticks li:has(b) { grid-template-columns: 1fr; row-gap: .2rem; }
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; counter-reset: step; }
.step { position: relative; padding: 1.8rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-tint); }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: .6rem; }
.step h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; margin-bottom: .35rem; }
.step p { color: var(--muted); font-size: .93rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(3rem,6vw,4.5rem) 0 2rem; margin-top: 2rem; background: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; margin-bottom: 3rem; }
.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { color: var(--muted); font-size: .93rem; max-width: 34ch; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.3rem; }
.footer-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); transition: .25s; }
.footer-social a:hover { color: var(--text-strong); border-color: var(--azure); background: rgba(0,154,218,.1); transform: translateY(-3px); }
.footer-col h2 { font-family: var(--font-body); font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem; line-height: 1.65; word-spacing: normal; }
.footer-col ul { display: grid; gap: .7rem; }
.footer-col a { color: var(--muted); font-size: .94rem; transition: color .2s; }
.footer-col a:hover { color: var(--azure-bright); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--faint); font-size: .86rem; }
.footer-bottom .legal { display: flex; gap: 1.4rem; align-items: center; }
/* WCAG 2.2 (2.5.8): Tippziele mindestens 24x24 px. Die beiden Rechtslinks
   kamen auf 23 px Hoehe, also einen Pixel zu wenig. */
.footer-bottom .legal a { display: inline-flex; align-items: center; min-height: 28px; padding-block: .15rem; }
.footer-bottom .legal a:hover { color: var(--azure-bright); }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
/* Oberhalb der Falz nicht animieren: der Hero stand beim Laden knapp eine Sekunde auf unsichtbar. */
.hero [data-reveal], .page-hero [data-reveal] { opacity: 1; transform: none; transition: none; }
/* Notfall: JS ausgefallen -> Inhalte trotzdem zeigen (siehe Wecker im <head>) */
html.reveal-fallback [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .nav-cta-hero[data-hero-cta] { transition: none; transform: none; } }

/* ---------- Video-Pause (WCAG 2.2.2) ---------- */
.video-toggle { position: absolute; right: 14px; top: 14px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(11,15,30,.72); border: 1px solid var(--line-2); color: #fff; backdrop-filter: blur(8px); }
.video-toggle svg { width: 18px; height: 18px; }
.video-toggle:hover { background: rgba(11,15,30,.9); }

/* ---------- Responsive ---------- */
@media (max-width: 1380px) {
  .nav-phone { display: none; } /* Nav ist mit 6 Punkten zu eng für die Nummer */
  .nav-links { gap: 1.3rem; }
}
@media (max-width: 1100px) {
  /* 6 Nav-Punkte passen nicht mehr → Burger-Menü schon ab 1100px statt 640px */
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; } /* ohne .nav-links fehlt sonst der auto-Margin → CTA+Burger sauber rechts */
  .nav-toggle { display: flex; }
  .nav.open .nav-links { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 1rem var(--gutter); background: var(--menu-bg); border-bottom: 1px solid var(--line); z-index: 99; }
  .nav.open .nav-links a { display: block; padding: .9rem 0; width: 100%; border-bottom: 1px solid var(--line); }  /* display:block ist Pflicht: als Inline-Element zaehlt der senkrechte Innenabstand nicht, die Eintraege ueberlappten sich und die Trennlinie lag mitten im uebernaechsten Text. */
  .nav.open .nav-links a::after { display: none; } /* Desktop-Unterstreichung ragt im Klapp-Menue in den Folgepunkt (wirkte durchgestrichen) */
  .nav-phone { display: inline-flex; } /* Platz ist wieder da → Nummer zeigen */
  .contact-grid[style] { grid-template-columns: 1fr !important; } /* Wizard über Info-Spalte */
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; }
  .split, .founder-grid, .contact-grid { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .founder-photo img { max-height: 380px; }
  .founder-body { padding: 0 clamp(1.5rem,5vw,2.5rem) clamp(2rem,6vw,2.5rem); }
  .services, .why-grid, .reviews, .steps { grid-template-columns: repeat(2,1fr); }
  .trust-inner { grid-template-columns: repeat(2,1fr); gap: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
  .nav-phone { display: none; } /* Brand + Nummer + CTA + Burger überlaufen sonst zwischen 641 und 719px */
}
@media (max-width: 640px) {
  .nav-links, .nav-phone { display: none; }
  /* Header-Zeile passte nicht (Brand 155 + CTA 161 + Burger 40 + Abstände > 375px):
     kompakter Brand + kompakter CTA, nur im Header — sonst wird „Preis anfragen" rechts angeschnitten */
  .nav { gap: .9rem; }
  .nav-cta { gap: .5rem; }
  .brand { gap: .45rem; }
  .brand img { height: 34px; }
  .brand-name { font-size: 1.12rem; }
  .brand-name small { font-size: .5rem; letter-spacing: .08em; }
  .nav-cta .btn { font-size: .84rem; padding: .7em 1.15em; }
  /* Bewertungs-Badge (Hero/Kontakt) brach bei 375px in 3 Zeilen um */
  .rating-badge, .hero-badge { font-size: .82rem; white-space: nowrap; }
  /* Einspaltig ab hier: stand faelschlich erst im 360px-Block, dadurch quetschten sich
     Leistungs-/Bewertungskarten und Formularfelder auf jedem normalen Handy (375-430px) zweispaltig. */
  .services, .why-grid, .reviews, .steps, .form-row, .footer-grid { grid-template-columns: 1fr; }
  .svc-links-grid { grid-template-columns: 1fr !important; }  /* Weitere-Leistungen-Block am Seitenfuss */
  .hero-float { left: 10px; right: 10px; bottom: 12px; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 360px) {
  .rating-badge, .hero-badge { white-space: normal; font-size: .78rem; } /* a11y Reflow 320px: nowrap wäre breiter als der Viewport */
  .nav-toggle { display: flex; }
  .nav.open .nav-links { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 1rem var(--gutter); background: var(--menu-bg); border-bottom: 1px solid var(--line); }
  .nav.open .nav-links a { display: block; padding: .9rem 0; width: 100%; border-bottom: 1px solid var(--line); }  /* display:block ist Pflicht: als Inline-Element zaehlt der senkrechte Innenabstand nicht, die Eintraege ueberlappten sich und die Trennlinie lag mitten im uebernaechsten Text. */
  .nav.open .nav-links a::after { display: none; } /* Desktop-Unterstreichung ragt im Klapp-Menue in den Folgepunkt (wirkte durchgestrichen) */

}

/* =========================================================================
   Animation Pass v4 — cinematic micro-interactions
   Alle Effekte respektieren prefers-reduced-motion (Block am Ende).
   ========================================================================= */

/* --- Lade-Reveal-Varianten (opt-in via data-reveal="left|right|scale") --- */
[data-reveal="left"]  { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="scale"] { transform: scale(.93); }
[data-reveal="left"].in,
[data-reveal="right"].in,
[data-reveal="scale"].in { transform: none; }

/* --- Scroll-Fortschrittsbalken (per JS in <body> injiziert) --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: var(--grad-brand);
  pointer-events: none; will-change: width;
}

/* Bewusst entfernt: wandernder Glanz auf Akzenttext, Glanz-Sweep auf Buttons und wippende
   Hero-Kennzahl. Drei Dauer-Animationen, die die Seite nach gekauftem Template aussehen liessen.
   Der Marken-Verlauf bleibt, nur die Bewegung geht. */

/* --- Etwas mehr Leben bei den „Warum"-Karten --- */
.why-card { transition: border-color .3s, background .3s, transform .3s, box-shadow .3s; }
.why-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.7); }

/* --- Tabellen-Ziffern beim Count-up nicht springen lassen --- */
[data-count] { font-variant-numeric: tabular-nums; }

/* --- Reduced motion: alles Bewegte ruhigstellen --- */
@media (prefers-reduced-motion: reduce) {
  .accent-text, .hero-float .num, .family-plus, .step::before,
  .scroll-progress { display: none; }
  [data-reveal="left"], [data-reveal="right"], [data-reveal="scale"] { transform: none; }
}


/* =========================================================================
   HELLES THEME (Tag-Ansicht) — aktiviert ueber html[data-theme="light"].
   Gleiche Token-Namen, helle Werte. Hero-Video, CTA-Band und proof-total
   behalten bewusst ihre dunkle/farbige Optik (Foto- bzw. Gradient-Flaechen).
   Kontraste: Text 14.8:1 · muted 7.2:1 · faint 5.1:1 · azure-Links 4.6:1.
   ========================================================================= */
html[data-theme="light"] {
  --ink:        #eef1f7;
  --ink-2:      #f6f8fc;
  --surface:    #ffffff;
  --surface-2:  #f4f6fb;
  --line:       rgba(13,21,48,.12);
  --line-2:     rgba(13,21,48,.22);
  --text:   #131b33;
  --muted:  #46526e;
  --faint:  #525e78;
  --azure-bright: #006c9c; /* Konzil 26.08.: 4,9:1 auf --ink #eef1f7 (vorher #007cb4 = 4,09:1) */
  --grad-text: linear-gradient(115deg, #007cb4 0%, #4a5ce0 55%, #332883 100%);
  --grad-ink: linear-gradient(180deg, #f6f8fc 0%, #eef1f7 100%);
  --shadow: 0 24px 60px -24px rgba(23,29,61,.25);
  --shadow-glow: 0 0 0 1px var(--line), 0 30px 70px -34px rgba(0,124,180,.35);
  --card-tint:   rgba(19,27,51,.03);
  --card-tint-2: rgba(19,27,51,.06);
  --card-tint-3: rgba(19,27,51,.04);
  --trust-tint:  rgba(19,27,51,.025);
  --header-bg:        rgba(246,248,252,.72);
  --header-bg-solid:  rgba(246,248,252,.92);
  --menu-bg:          #f6f8fc;
  --text-strong: #0d1530;
}
/* Ambient-Glow und Filmkorn im Hellen stark zuruecknehmen */
html[data-theme="light"] body::before { opacity: .35; }
/* Weisse Logos auf hellem Grund dunkel faerben (Header-Swoosh, Footer-Lockup, E&V) */
html[data-theme="light"] .tstm-logo-img { filter: brightness(0) opacity(.85); }
/* Video-Hero bleibt ein dunkles Kino-Element: lokale Token-Rueckgabe */
html[data-theme="light"] .hero--video { --text: #eef2fb; --muted: #9aa3c4; --faint: #7c8aa5; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14); --card-tint-3: rgba(255,255,255,.03); --text-strong: #ffffff; --azure-bright: #35c4ff; --grad-text: linear-gradient(115deg, #35c4ff 0%, #5a6ce6 55%, #6f7fe8 100%); color: var(--text); }
/* Formularfelder: heller Grund statt dunkler Glas-Optik */
html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select { background: #fff; color: var(--text); border-color: var(--line-2); }
html[data-theme="light"] .field input::placeholder, html[data-theme="light"] .field textarea::placeholder { color: var(--faint); }
/* Skip-Link im Hellen: dunkler Grund, heller Text */
html[data-theme="light"] .skip-link { background: #0d1530; color: #fff; }
/* Nachtraege Hell-Design: Farben, die beim Umbau hart codiert geblieben waren */
html[data-theme="light"] .form-status.ok { color: #0e6b45; background: rgba(14,107,69,.08); border-color: rgba(14,107,69,.32); }
html[data-theme="light"] .form-status.err { color: #a8202c; background: rgba(168,32,44,.07); border-color: rgba(168,32,44,.32); }
html[data-theme="light"] .proof-row b.neg { color: #a8202c; text-decoration-color: rgba(168,32,44,.5); }
html[data-theme="light"] .case-row.bad .val { text-decoration-color: rgba(168,32,44,.7); }
html[data-theme="light"] body::after { opacity: .08; } /* Filmkorn machte den hellen Grund fleckig */


/* Helle Interpretation der Indigo-Verlaufs-Karten (Dark behaelt die tiefen Verlaeufe) */
html[data-theme="light"] .founder { background: linear-gradient(120deg, #e9ecf8, #f7f9fd); }
html[data-theme="light"] .aud-card.firmen { background: linear-gradient(155deg, #eef0f9, #ffffff 78%); border-color: rgba(51,40,131,.28); }
html[data-theme="light"] .person-card.energy { background: linear-gradient(155deg, #eef0f9, #ffffff 70%); border-color: rgba(0,124,180,.35); }
html[data-theme="light"] .proof-head { background: linear-gradient(160deg, #e9ecf8, #f4f6fb); }
html[data-theme="light"] .tstm-feat { background: linear-gradient(150deg, #eef0f9, #f7f9fd); border-color: rgba(0,124,180,.3); }
html[data-theme="light"] .tstm-feat blockquote p { color: var(--text); }
html[data-theme="light"] .svc-card .thumb::after { background: linear-gradient(180deg, transparent 45%, rgba(255,255,255,.5)); }

/* Logo-Varianten: dunkles Theme zeigt Weiss, helles die Originalfarben */
.logo-light { display: none; }
html[data-theme="light"] .logo-light { display: block; }
html[data-theme="light"] .logo-dark { display: none; }
.brand.brand-footer img { height: 108px; width: auto; }

/* ---------- Theme-Umschalter ---------- */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--text); background: var(--card-tint-3); flex: none; transition: border-color .25s, background .25s; }
.theme-toggle:hover { border-color: var(--azure); background: var(--card-tint-2); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun { display: block; }
html[data-theme="light"] .theme-toggle .ico-moon { display: none; }
/* Der Umschalter bleibt auf ALLEN Breiten oben im Header sichtbar (Dustin 21.07.).
   Platz auf kleinen Screens: Tagline unterm Logo weicht, Icon+CTA kompakter. */
.theme-toggle-item { display: none !important; } /* Menue-Variante stillgelegt */
@media (max-width: 640px) {
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .brand-name small { display: none; }
  .brand img { height: 30px; }
  .nav { gap: .55rem; }
  .nav-cta { gap: .4rem; }
  .nav-cta .btn { font-size: .8rem; padding: .62em 1em; }
}


/* ---------- Handlungsaufforderung mitten im Text ---------- */
.cta-inline { margin-top: clamp(1.8rem, 4vw, 2.6rem); padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cta-inline p { color: var(--muted); font-size: 1.02rem; max-width: 46ch; margin: 0; }
@media (max-width: 700px) { .cta-inline { flex-direction: column; align-items: stretch; } .cta-inline .hero-actions .btn { width: 100%; justify-content: center; } }

/* ---------- Direktkontakt unten rechts (Daumenbereich) ---------- */
/* Anruf-Knopf nur dort, wo die Nummer im Header ausgeblendet ist (<=719px). */
.call-fab { display: none; position: fixed; right: 16px; bottom: 84px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; place-items: center; background: var(--grad-brand); color: #fff; box-shadow: 0 10px 28px -8px rgba(0,0,0,.45); transition: transform .2s, opacity .25s, visibility .25s; }
.call-fab svg { width: 27px; height: 27px; }
.call-fab:hover { transform: translateY(-3px); }
.call-fab:focus-visible { outline: 3px solid var(--azure-bright); outline-offset: 3px; }
@media (max-width: 719px) { .call-fab { display: grid; } }
body.has-video-hero .call-fab { opacity: 0; visibility: hidden; }
body.has-video-hero .call-fab.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 640px) { .call-fab { width: 52px; height: 52px; right: 12px; bottom: 74px; } .call-fab svg { width: 26px; height: 26px; } }
@media print { .call-fab { display: none; } }

/* Telefonnummer als erster Eintrag im Klapp-Menue */
.nav-phone-item { display: none; }
@media (max-width: 719px) {
  .nav.open .nav-phone-item { display: block; }
  .nav-phone-item a { display: flex !important; align-items: center; gap: .7rem; font-weight: 800 !important; color: var(--text-strong) !important; }
  .nav-phone-item svg { width: 18px; height: 18px; color: var(--azure-bright); flex: none; }
  .nav-phone-item small { display: block; font-weight: 500; font-size: .78rem; color: var(--muted); }
}

/* ---------- WhatsApp-Kontakt (fest unten rechts) ---------- */
.wa-fab { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px -8px rgba(0,0,0,.45); transition: transform .2s, box-shadow .2s, opacity .25s, visibility .25s; }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab:hover { transform: translateY(-3px); background: #1fb457; }
.wa-fab:focus-visible { outline: 3px solid var(--azure-bright); outline-offset: 3px; }
/* Auf der Startseite erst nach dem Hero einblenden (30-Jahre-Schild sitzt dort unten rechts) */
body.has-video-hero .wa-fab { opacity: 0; visibility: hidden; }
body.has-video-hero .wa-fab.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 640px) { .wa-fab { width: 52px; height: 52px; right: 12px; bottom: 12px; } .wa-fab svg { width: 27px; height: 27px; } }
@media print { .wa-fab { display: none; } }

@media (max-width: 640px) {
  /* ---------- Grosszuegigere Tippziele in der Kopfleiste (25.08.2026) ----------
     Gemessen waren: Umschalter 34x34, Menue 40x32, "Preis anfragen" 113x37.
     Alle unter 44 px, der Daumengroesse nach Apples Richtlinie. Die Leiste ist
     76 px hoch, vertikal ist also Platz. Waagerecht kostet es 14 px, bei 65 px
     freiem Raum zwischen Logo und Knopf. */
  .theme-toggle { width: 44px; height: 44px; }
  .theme-toggle svg { width: 19px; height: 19px; }
  .nav-toggle { min-width: 44px; min-height: 44px; padding: 10px; justify-content: center; align-items: center; }
  .nav-cta .btn { min-height: 44px; }
}

/* =====================================================================
   Konzil-Nachbesserungen 26.08.2026 (Barrierefreiheit + schmale Geraete)
   ===================================================================== */

/* 1) Bedienelemente brauchen einen erkennbaren Rahmen (WCAG 1.4.11: 3:1).
   --line-2 ist eine DEKORATIVE Trennlinie (1,5-1,6:1) und dafuer zu schwach.
   Eigener Token, gerechnet: dunkel 3,2:1 auf --surface, hell 3,3:1 auf Weiss. */
:root { --line-control: rgba(255,255,255,.42); }
html[data-theme="light"] { --line-control: rgba(13,21,48,.55); }
.field input, .field select, .field textarea, .day-btn, .slot-btn { border-color: var(--line-control); }

/* 2) Helles Theme: hartcodierte Dunkeltheme-Farben nachziehen (vorher 1,25-1,61:1) */
html[data-theme="light"] .stars,
html[data-theme="light"] .tstm .stars { color: #9a6b00; }                      /* 5,0:1 auf Weiss */
html[data-theme="light"] .case-card .save-badge { color: #0e6b45; }            /* 5,7:1 */
html[data-theme="light"] .booking-success .big { color: #0e6b45; }             /* statt #7ef0c0 */
html[data-theme="light"] .risk .n { color: #a8202c; background: rgba(168,32,44,.12); } /* 6,4:1 */

/* 3) Haken-Symbole: Farbe steckt im Daten-URI, folgt daher keinem Token */
html[data-theme="light"] .portal-benefits li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23006c9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
html[data-theme="light"] .aud-card li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23006c9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
html[data-theme="light"] .prose ul.ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23006c9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

/* 4) Text auf dem Markenverlauf: Transparenz raus (4,40 -> 4,76:1 am hellsten Punkt) */
.cta-band p { color: #fff; }
.proof-total p { color: #fff; }

/* 5) Schmale Geraete (WCAG 1.4.10 Reflow, gemessen bei 320 und 375 px):
   Gitterspuren duerfen nicht von der Mindestbreite ihres Inhalts aufgesprengt
   werden, lange Knopftexte muessen umbrechen koennen. */
.aud-grid > *, .wiz-tiles > * { min-width: 0; }
.hero-actions .btn, .aud-card .btn { white-space: normal; }
.hero-badge { flex-wrap: wrap; }
@media (max-width: 380px) {
  .wiz-tiles { grid-template-columns: 1fr; }
}