/* Helles Design (Test, Oktober 2026).
   Einbinden NACH dem Seiten-<style>: <link rel="stylesheet" href="/assets/theme-light.css"/>
   Entfernen = zurück zum dunklen Design. Bereiche mit class="theme-dark" bleiben dunkel,
   Bereiche mit data-dark-scroll bekommen einen Scroll-Effekt (assets/theme-scroll.js, Modi: karte/verlauf/blende). */

/* Registrierte Farben, damit sie beim Scroll-Wechsel weich überblenden */
@property --bg{syntax:'<color>';inherits:true;initial-value:#faf8f5}
@property --surface{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --elev{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --line{syntax:'<color>';inherits:true;initial-value:#ebe6df}
@property --line2{syntax:'<color>';inherits:true;initial-value:#dcd5cb}
@property --text{syntax:'<color>';inherits:true;initial-value:#171412}
@property --muted{syntax:'<color>';inherits:true;initial-value:#5d5852}
@property --dim{syntax:'<color>';inherits:true;initial-value:#6f6a63}
@property --accent{syntax:'<color>';inherits:true;initial-value:#176a9c}

:root{
  --bg:#faf8f5;
  --surface:#ffffff;
  --elev:#ffffff;
  --line:#ebe6df;
  --line2:#dcd5cb;
  --text:#171412;
  --muted:#5d5852;
  --dim:#6f6a63;
  --blue:#89cff0;               /* Markenblau: Buttons, Flächen */
  --accent:#176a9c;             /* dunkleres Blau für Text auf Hell */
  --blue-dim:rgba(137,207,240,.2);
  --blue-line:rgba(29,127,181,.28);
  --ink:#0c0b0a;
  --shadow-soft:0 18px 44px rgba(40,30,20,.08);
  --shadow-lift:0 22px 50px rgba(40,30,20,.12),0 0 0 1px rgba(29,127,181,.06);
}
html,body{background:var(--bg);color:var(--text)}

/* Scroll-Effekt: Sobald ein Bereich mit data-dark-scroll in der Bildschirmmitte ist,
   blendet die ganze Seite weich ins Dunkle (und danach wieder zurück). */
body{transition:--bg .7s ease,--surface .7s ease,--elev .7s ease,--line .7s ease,--line2 .7s ease,--text .7s ease,--muted .7s ease,--dim .7s ease,--accent .7s ease}
body.is-dark{
  --bg:#0c0b0a; --surface:#141210; --elev:#1a1714; --line:#2a2622; --line2:#36322e;
  --text:#f6f3ef; --muted:#a39e97; --dim:#6b6560; --accent:#89cff0;
}
@media(prefers-reduced-motion:reduce){body{transition:none}}

/* Akzent-Text: überall, wo im dunklen Design hellblaue Schrift war, auf Hell dunkleres Blau */
.article-prose a,
.article-tag,
.block h2 span,
.bp-h2 span,
.bp-hero .crumbs a:hover,
.bp-hero h1 span,
.bp-hero-badge,
.bp-kicker,
.bp-mark,
.bp-offer b,
.bp-offer-line a,
.bp-step-n,
.branche-card-icon,
.branche-card-tag,
.card a:hover,
.card h2,
.card-n,
.channel-ico,
.err-code,
.eyebrow,
.faq-a a,
.form-success-icon,
.h2 span,
.hero h1 span,
.hero-kicker,
.hero-offer b,
.hero-sub a:hover,
.hero-title span,
.incl-n,
.news-card-tag,
.next-note a,
.offer-card li::before,
.offer-strip-cta,
.page-title span,
.step-n,
.stimmen-meta a:hover,
.svc-links a,
.text-accent,
.tool-card .go,
.tool-card .tag,
.tool-cta .ghost:hover,
.tool-result .label,
.tools-crumbs a:hover,
.tools-faq-item summary::after,
.tools-hero .eyebrow,
.tools-seo-p a,
.why-stat,
.why-stat small,
.work-foot a,
.work-reel-tag{color:var(--accent)}
.eyebrow::before,.hero-kicker::before,.bp-kicker::before{background:var(--accent)}

/* Karten bekommen auf Hell einen leichten Schatten statt Glow */
.why-card,.price,.step,.quote,.faq-item,.incl,.form-card,.next-row,.quotes-static blockquote{box-shadow:0 1px 2px rgba(40,30,20,.04),0 8px 24px rgba(40,30,20,.04)}
.price.hot,.offer-card{background:linear-gradient(180deg,rgba(137,207,240,.22),var(--elev) 60%)}
.band{background:radial-gradient(ellipse 70% 120% at 18% 0%,rgba(137,207,240,.35),transparent 60%),var(--elev)}
.hero-visual-glow{opacity:.45}
.offer-hero::before{opacity:.8}
.btn-line{border-color:var(--line2)}
.btn-line:hover{border-color:var(--text)}
.btn-wa{color:#0f7a41!important;border-color:rgba(15,122,65,.3)!important;background:rgba(37,211,102,.1)!important}
.form-card{background:var(--elev)}
.field input,.field textarea,.radio-item{background:var(--bg)}
.foot{background:color-mix(in srgb,var(--bg) 92%,#d8d0c4)}
.proof{background:var(--elev)}

/* Navigation (überschreibt site-nav.css) */
/* Navigation bleibt immer hell – auch während des Scroll-Effekts */
.nav{--text:#171412;--muted:#5d5852;--line:#ebe6df;--line2:#dcd5cb;--accent:#176a9c}
.nav,.nav.on{background:rgba(250,248,245,.92);border-bottom-color:var(--line)}
.brand{color:var(--text)}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-links a.nav-cta,.nav-links a.nav-cta:hover{color:var(--ink)}
.burger{border-color:var(--line2)}
.burger i,.burger i::before,.burger i::after{background:var(--text)}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before,.burger[aria-expanded="true"] i::after{background:var(--accent)}
.drawer-backdrop{background:rgba(40,30,20,.25)}
.drawer-panel{background:radial-gradient(ellipse 80% 40% at 80% 0%,rgba(137,207,240,.25),transparent 55%),var(--bg)}
.drawer-links a{color:var(--text);border-bottom-color:var(--line)}
.drawer-links a::after{border-color:var(--line2)}
.drawer-links a:hover,.drawer-links a:focus-visible{color:var(--accent)}
.drawer-close{color:var(--text);background:#fff;border-color:var(--line2)}
.drawer-meta{color:var(--dim)}
.page-loader{background:var(--bg)}

/* Dunkle "Kino"-Bereiche, z. B. die Reels unter "Arbeit" */
.theme-dark{
  --bg:#0c0b0a; --surface:#141210; --elev:#1a1714; --line:#2a2622; --line2:#36322e;
  --text:#f6f3ef; --muted:#a39e97; --dim:#6b6560;
  --accent:#89cff0; --blue-dim:rgba(137,207,240,.12); --blue-line:rgba(137,207,240,.28);
  background:var(--bg);color:var(--text);
}
.theme-dark .eyebrow,.theme-dark .h2 span,.theme-dark .work-foot a,.theme-dark .work-reel-tag{color:var(--accent)}
.theme-dark .eyebrow::before{background:var(--accent)}
.theme-dark.block-line{border-top-color:transparent}

/* Scroll-Effekt "karte": dunkler Bereich als abgerundete Karte, wächst mit dem Scrollen auf volle Breite */
.scroll-card{
  --p:0;
  clip-path:inset(0 calc((1 - var(--p)) * clamp(12px,4vw,56px)) round calc((1 - var(--p)) * 36px));
  will-change:clip-path;
}
.scroll-card.block-line{border-top-color:transparent}

/* Scroll-Effekt "verlauf": Farben werden per JS gesetzt, keine zusätzliche CSS-Überblendung */
body.scroll-verlauf{transition:none}