/* =====================================================================
   Solar Lead-Gen Design System — shared CSS for site-solar-erstberatung
   Direction A (Trust). Imported from every page (index + sub-pages).
   ===================================================================== */
:root {
  --forest-900:#06241c; --forest-800:#0b3b2e; --forest-700:#14543f;
  --forest-600:#1f6f54; --forest-500:#2f8a6b; --forest-300:#9ec7b6;
  --forest-100:#d4e5dc; --forest-50:#ecf3ef;
  --sun-700:#b07d00; --sun-600:#d99a00; --sun-500:#f5b800;
  --sun-300:#fcd96a; --sun-100:#fdeebc; --sun-50:#fef7df;
  --sand-50:#faf6ee; --sand-100:#f4efe6; --sand-200:#ebe3d3;
  --sand-300:#d8cdb6; --sand-400:#b8ac92;
  --ink-900:#0e1f1a; --ink-700:#2a3a35; --ink-500:#5b6a64;
  --ink-300:#98a39e; --ink-100:#d6dcd9; --cream:#f4efe6;
  --ok-600:#1f8a5b; --warn-600:#d97706; --err-600:#b91c1c;
  --bg:var(--sand-50); --bg-elev:#fff; --bg-sunken:var(--sand-100);
  --fg:var(--ink-900); --fg-muted:var(--ink-500); --fg-on-dark:var(--cream);
  --border:rgba(14,31,26,.08); --border-strong:rgba(14,31,26,.16);
  --border-on-dark:rgba(244,239,230,.12);
  --primary:var(--forest-800); --primary-hover:var(--forest-700); --primary-fg:var(--cream);
  --accent:var(--sun-500); --accent-hover:var(--sun-600); --accent-fg:var(--forest-900);
  --link:var(--forest-600); --link-hover:var(--forest-800);
  --font-sans:'Geist',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',monospace;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-17:17px; --fs-20:20px;
  --fs-24:24px; --fs-32:32px; --fs-40:40px; --fs-56:56px; --fs-72:72px;
  --lh-tight:1.1; --lh-snug:1.25; --lh-body:1.55; --lh-loose:1.7;
  --tracking-tight:-0.02em; --tracking-eyebrow:0.12em;
  --h1:700 var(--fs-56)/var(--lh-tight) var(--font-sans);
  --h2:700 var(--fs-40)/var(--lh-snug)  var(--font-sans);
  --h3:600 var(--fs-24)/var(--lh-snug)  var(--font-sans);
  --eyebrow:500 var(--fs-12)/1.2 var(--font-sans);
  --body:400 var(--fs-17)/var(--lh-body) var(--font-sans);
  --body-sm:400 var(--fs-14)/var(--lh-body) var(--font-sans);
  --label:500 var(--fs-14)/1.2 var(--font-sans);
  --num:500 var(--fs-32)/1 var(--font-mono);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-xs:0 1px 1px rgba(11,59,46,.05);
  --shadow-sm:0 1px 2px rgba(11,59,46,.06),0 1px 1px rgba(11,59,46,.04);
  --shadow-md:0 8px 24px -8px rgba(11,59,46,.18);
  --shadow-lg:0 24px 56px -16px rgba(11,59,46,.28);
  --shadow-glow:0 0 0 4px rgba(245,184,0,.30);
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:140ms; --dur:220ms; --dur-slow:340ms;
  --container:1200px; --gutter:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{font:var(--body);color:var(--fg);background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--font-sans);overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;letter-spacing:var(--tracking-tight);color:var(--ink-900)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:none;transition:color var(--dur) var(--ease)}
a:hover{color:var(--link-hover)}
img{max-width:100%;height:auto;display:block}
hr{border:0;height:1px;background:var(--border);margin:32px 0}

.ds-wordmark{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:700;font-size:18px;color:var(--primary);letter-spacing:-0.01em;text-decoration:none}
.ds-wordmark::before{content:"";width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,var(--sun-500) 0 50%,var(--forest-800) 50% 100%)}

.btn{--_bg:var(--primary);--_fg:var(--primary-fg);--_bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:var(--r-md);font:500 16px/1 var(--font-sans);background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);cursor:pointer;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),filter var(--dur) var(--ease);box-shadow:var(--shadow-sm);text-decoration:none;white-space:nowrap;font-family:var(--font-sans)}
.btn:hover{filter:brightness(1.08);box-shadow:var(--shadow-md);color:var(--_fg)}
.btn:active{transform:scale(.98);box-shadow:var(--shadow-xs)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-glow)}
.btn--accent{--_bg:var(--accent);--_fg:var(--accent-fg)}
.btn--ghost{--_bg:transparent;--_fg:var(--primary);--_bd:var(--border-strong);box-shadow:none}
.btn--ghost:hover{background:var(--bg-sunken)}
.btn--lg{height:56px;padding:0 28px;font-size:17px;border-radius:var(--r-lg)}
.btn--sm{height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-sm)}

.container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section{padding-top:96px;padding-bottom:96px}

.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;gap:28px;height:72px}
.site-nav{display:flex;gap:28px;margin-left:auto}
.site-nav a{font:500 15px/1 var(--font-sans);color:var(--fg)}
.site-nav a:hover{color:var(--link)}
.site-nav a.is-active{color:var(--link)}
.nav-toggle{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;margin-left:auto;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink-900);border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}

/* Index hero (forest-green big) */
.hero{position:relative;background:var(--forest-800);color:var(--cream);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 90% 0%,rgba(245,184,0,.18),transparent 60%),radial-gradient(50% 60% at 10% 100%,rgba(31,111,84,.4),transparent 70%);pointer-events:none}
.hero .inner{position:relative;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-top:96px;padding-bottom:112px;align-items:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font:var(--eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--sun-300);margin-bottom:20px}
.hero .eyebrow::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--sun-500)}
.hero h1{font:var(--h1);line-height:1.05;letter-spacing:-0.025em;margin-bottom:20px;color:var(--cream)}
.hero h1 em{font-style:normal;color:var(--sun-300)}
.hero p.lead{font:400 19px/1.5 var(--font-sans);color:rgba(244,239,230,.82);max-width:52ch;margin-bottom:32px}
.hero .bullets{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.hero .bullets li{display:flex;align-items:center;gap:10px;font:500 15px/1.3 var(--font-sans);color:var(--cream)}
.hero .bullets svg{color:var(--sun-500);flex-shrink:0}
.hero .ratings{display:flex;align-items:center;gap:18px;margin-top:36px;font:var(--body-sm);color:rgba(244,239,230,.7)}
.stars{color:var(--sun-500);letter-spacing:2px;font-size:18px}

/* Hero with CTA only (no inline wizard) */
.hero .inner-cta{grid-template-columns:1.3fr 1fr;align-items:center}
.hero-copy{display:flex;flex-direction:column}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 32px}
.hero-side{display:flex;flex-direction:column;gap:20px}
.hero-badge{display:flex;align-items:center;gap:14px;background:rgba(244,239,230,.10);border:1px solid rgba(244,239,230,.22);border-radius:var(--r-xl);padding:18px 22px;color:var(--sun-300)}
.hero-badge svg{color:var(--sun-500);flex-shrink:0}
.hero-badge-num{font:700 28px/1 var(--font-mono);color:var(--cream);letter-spacing:-0.02em}
.hero-badge-label{font:400 14px/1.3 var(--font-sans);color:rgba(244,239,230,.78);margin-top:2px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.hero-stats .hero-stat{background:rgba(244,239,230,.06);border:1px solid rgba(244,239,230,.14);border-radius:var(--r-md);padding:14px 12px;text-align:center}
.hero-stats .hero-stat .n{font:700 20px/1.1 var(--font-mono);color:var(--cream);letter-spacing:-0.02em}
.hero-stats .hero-stat .l{font:400 11px/1.3 var(--font-sans);color:rgba(244,239,230,.66);margin-top:4px;text-transform:uppercase;letter-spacing:0.08em}

/* Sub-page hero (compact, no wizard) */
.page-hero{position:relative;background:var(--forest-800);color:var(--cream);overflow:hidden;padding:80px 0 72px}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 90% 0%,rgba(245,184,0,.18),transparent 60%);pointer-events:none}
.page-hero .inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;max-width:720px}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font:var(--eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--sun-300);margin-bottom:16px}
.page-hero .eyebrow::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--sun-500)}
.page-hero h1{font:700 44px/1.1 var(--font-sans);letter-spacing:-0.02em;margin-bottom:16px;color:var(--cream)}
.page-hero p.lead{font:400 18px/1.55 var(--font-sans);color:rgba(244,239,230,.82);max-width:60ch}

/* Wizard */
.wizard{background:var(--bg-elev);color:var(--fg);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-lg);border:1px solid rgba(0,0,0,.04);position:relative;z-index:2}
.wizard-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.wizard-head .step-count{font:500 13px/1 var(--font-mono);color:var(--fg-muted)}
.wizard-progress{flex:1;height:4px;background:var(--sand-200);border-radius:999px;overflow:hidden}
.wizard-progress>i{display:block;height:100%;width:25%;background:var(--forest-600);border-radius:999px;transition:width var(--dur-slow) var(--ease)}
.wizard h3{font:700 22px/1.25 var(--font-sans);margin-bottom:4px;color:var(--ink-900)}
.wizard .sub{font:var(--body-sm);color:var(--fg-muted);margin-bottom:20px}
.wizard-step{display:none}
.wizard-step.active{display:block;animation:dsFadeUp .32s var(--ease)}
@keyframes dsFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wizard .options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.wizard .opt{border:1.5px solid var(--border-strong);border-radius:var(--r-md);padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all var(--dur) var(--ease);background:var(--bg-elev);position:relative}
.wizard .opt:hover{border-color:var(--forest-600);background:var(--forest-50)}
.wizard .opt input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.wizard .opt:has(input:checked){border-color:var(--forest-700);background:var(--forest-50)}
.wizard .opt .ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--sand-100);display:flex;align-items:center;justify-content:center;color:var(--forest-700);flex-shrink:0}
.wizard .opt:has(input:checked) .ic{background:var(--forest-600);color:var(--cream)}
.wizard .opt .label{font:500 15px/1.2 var(--font-sans);color:var(--ink-900)}
.wizard .opt .meta{font:var(--body-sm);color:var(--fg-muted);display:block;margin-top:2px}
.wizard .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.wizard .field label{font:var(--label);color:var(--fg)}
.wizard .input,.wizard .select{font:var(--body);height:48px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-elev);color:var(--fg);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);width:100%;font-family:var(--font-sans)}
.wizard .input:focus,.wizard .select:focus{outline:none;border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(31,111,84,.15)}
.wizard .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wizard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px;flex-wrap:wrap}
.wizard-foot .privacy{font:var(--body-sm);color:var(--fg-muted);display:flex;align-items:center;gap:6px}
.wizard-foot .btn-row{display:flex;gap:8px;margin-left:auto}
.wizard-thanks{text-align:center;padding:32px 0}
.wizard-thanks .check{width:64px;height:64px;border-radius:50%;background:var(--ok-600);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.wizard-thanks h3{margin-bottom:8px}

/* Progress with check-marks for completed steps */
.wizard-tabs{display:flex;align-items:center;gap:10px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.wizard-tab{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;font:500 13px/1 var(--font-sans);color:var(--fg-muted);opacity:.55;transition:opacity var(--dur) var(--ease)}
.wizard-tab.is-current{opacity:1;color:var(--fg)}
.wizard-tab.is-done{opacity:1;color:var(--ok-600)}
.wizard-tab .dot{width:24px;height:24px;border-radius:50%;background:var(--bg-sunken);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--font-mono);color:var(--fg-muted);flex-shrink:0;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.wizard-tab.is-current .dot{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.wizard-tab.is-done .dot{background:var(--ok-600);border-color:var(--ok-600);color:#fff}
.wizard-tab .dot svg{display:none;width:14px;height:14px}
.wizard-tab.is-done .dot svg{display:block}
.wizard-tab.is-done .dot .num{display:none}

/* Toggle group (Ja/Nein/In Zukunft style) */
.toggle-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.toggle-btn{position:relative;border:1.5px solid var(--border-strong);border-radius:var(--r-md);padding:12px 8px;text-align:center;cursor:pointer;background:var(--bg-elev);font:500 14px/1.2 var(--font-sans);color:var(--ink-900);transition:all var(--dur) var(--ease)}
.toggle-btn input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.toggle-btn:hover{border-color:var(--forest-600);background:var(--forest-50)}
.toggle-btn:has(input:checked){border-color:var(--forest-700);background:var(--forest-50);color:var(--forest-800)}

/* Contact method cards (3-card radio with colored icons) */
.contact-method{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:6px}
.contact-method .opt{padding:14px 16px}
.contact-method .opt .ic{background:var(--sand-100);color:var(--forest-700)}
.contact-method .opt.is-phone .ic{background:#f3e8ff;color:#7c3aed}
.contact-method .opt.is-video .ic{background:#dbeafe;color:#2563eb}
.contact-method .opt.is-onsite .ic{background:#fed7aa;color:#c2410c}
.contact-method .opt:has(input:checked) .ic{background:var(--forest-600);color:var(--cream)}

/* Slider with ticks under */
.slider-wrap{padding:4px 0}
.slider-wrap{position:relative}
.slider-value{font:600 22px/1 var(--font-mono);color:var(--accent);margin-bottom:8px;display:inline-block;position:relative;left:0;transition:left var(--dur-fast) var(--ease);transform:translateX(-50%);padding-left:11px}
.slider-value.is-edge-left{transform:translateX(0);padding-left:0}
.slider-value.is-edge-right{transform:translateX(-100%);padding-left:0;padding-right:11px}
.slider-value .u{font-size:13px;color:var(--fg-muted);font-weight:400;margin-left:4px}
.slider-wrap input[type=range]{width:100%;accent-color:var(--forest-600);height:6px;-webkit-appearance:none;background:var(--sand-200);border-radius:999px;outline:none;cursor:pointer}
.slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--forest-700);cursor:pointer;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.slider-wrap input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--forest-700);cursor:pointer;border:3px solid #fff;box-shadow:var(--shadow-sm)}
.slider-ticks{display:flex;justify-content:space-between;font:400 11px/1 var(--font-mono);color:var(--fg-muted);margin-top:8px}

/* Inline field error message under invalid field */
.field-error{display:none;font:500 13px/1.4 var(--font-sans);color:var(--err-600);margin-top:6px}
.field.has-error .field-error{display:block}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--err-600);box-shadow:0 0 0 3px rgba(185,28,28,.10)}
.wizard-error{display:none;padding:12px 16px;background:#fee2e2;border:1px solid var(--err-600);border-radius:var(--r-md);color:var(--err-600);font:500 14px/1.4 var(--font-sans);margin-bottom:14px}
.wizard-error.show{display:block;animation:dsFadeUp .25s var(--ease)}

/* Consent box (green-bordered) */
.consent-box{display:flex;gap:12px;padding:14px 16px;margin-top:12px;border:2px solid var(--ok-600);background:#e8f5e9;border-radius:var(--r-md)}
.consent-box input[type="checkbox"]{margin-top:3px;width:18px;height:18px;accent-color:var(--ok-600);flex-shrink:0}
.consent-box label{font:400 13px/1.5 var(--font-sans);color:var(--ink-700)}
.consent-box label strong{display:block;color:var(--ok-600);font-weight:600;margin-bottom:4px}

/* Field row variants */
.field-row-3{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.wizard .textarea{font:var(--body);padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-elev);color:var(--fg);width:100%;font-family:var(--font-sans);min-height:80px;resize:vertical}
.wizard .textarea:focus{outline:none;border-color:var(--forest-600);box-shadow:0 0 0 4px rgba(31,111,84,.15)}

/* Mobile adjustments */
@media (max-width:680px){
  .toggle-group{grid-template-columns:1fr}
  .field-row-3{grid-template-columns:1fr}
}

/* Trust strip */
.trust{padding:28px 0;background:var(--bg-elev);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust .inner{display:flex;align-items:center;gap:48px;justify-content:center;flex-wrap:wrap}
.trust .item{display:flex;align-items:center;gap:10px;font:500 14px/1.2 var(--font-sans);color:var(--ink-700)}
.trust .item svg{color:var(--forest-600)}
.trust .divider{width:1px;height:24px;background:var(--border)}

/* Section primitives */
.section-eyebrow{font:var(--eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--forest-600);margin-bottom:14px;display:block}
.section-lead{font:400 18px/1.55 var(--font-sans);color:var(--fg-muted);max-width:60ch;margin-bottom:56px}
.process h2,.calc h2,.faq h2,.comp h2{font:var(--h2);margin-bottom:16px;max-width:22ch}

/* Process / steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;position:relative}
.step .n{position:absolute;top:-16px;left:24px;width:36px;height:36px;background:var(--forest-800);color:var(--cream);border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 15px/1 var(--font-mono)}
.step .ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--forest-50);color:var(--forest-700);display:flex;align-items:center;justify-content:center;margin:8px 0 16px}
.step h3{font:600 18px/1.3 var(--font-sans);margin-bottom:6px;color:var(--ink-900)}
.step p{font:var(--body-sm);color:var(--fg-muted)}

/* Calculator */
.calc{background:var(--bg-elev);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.calc .inner-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.calc-card{background:var(--forest-800);color:var(--cream);border-radius:var(--r-xl);padding:36px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.calc-card::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 100% at 100% 0%,rgba(245,184,0,.20),transparent 50%);pointer-events:none}
.calc-card h3{font:500 14px/1 var(--font-sans);color:var(--sun-300);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);margin-bottom:24px;position:relative}
.calc-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;position:relative}
.calc-stat .n{font:700 56px/1 var(--font-mono);letter-spacing:-0.03em;color:var(--cream)}
.calc-stat .n.gold{color:var(--sun-500)}
.calc-stat .u{font:500 18px/1 var(--font-mono);color:rgba(244,239,230,.7);margin-left:6px}
.calc-stat .l{font:var(--body-sm);color:rgba(244,239,230,.6);margin-top:8px;text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-weight:500}
.calc-foot{margin-top:32px;padding-top:24px;border-top:1px solid rgba(244,239,230,.12);display:flex;align-items:flex-start;gap:12px;position:relative;font:var(--body-sm);color:rgba(244,239,230,.7)}
.calc-inputs .field{margin-bottom:18px}
.calc-inputs label{display:block;font:var(--label);color:var(--fg);margin-bottom:8px}
.slider-row{display:flex;align-items:center;gap:16px}
.slider-row input[type=range]{flex:1;accent-color:var(--forest-600)}
.slider-row .v{font:500 16px/1 var(--font-mono);color:var(--forest-700);min-width:100px;text-align:right}
.hint{font:var(--body-sm);color:var(--fg-muted);margin-top:6px;display:block}

/* Comparison */
.comp-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-top:8px}
.comp-table th,.comp-table td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--border)}
.comp-table tr:last-child td{border-bottom:0}
.comp-table thead th{font:500 13px/1 var(--font-sans);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--fg-muted);background:var(--bg-sunken)}
.comp-table .col-ours{background:var(--forest-50)}
.comp-table thead th.col-ours{background:var(--forest-800);color:var(--sun-300)}
.comp-table .row-label{font:500 15px/1.3 var(--font-sans);color:var(--fg)}
.comp-table .cell-yes{color:var(--ok-600)}
.comp-table .cell-no{color:var(--fg-muted);opacity:.7}
.comp-table .cell-num{font:500 16px/1 var(--font-mono);color:var(--forest-800)}
.comp-table .col-ours .cell-num{font-weight:700}

/* FAQ */
.faq-list{display:grid;gap:12px;margin-top:12px}
.faq-item{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.faq-q{display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;font:500 17px/1.4 var(--font-sans);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q .ch{margin-left:auto;transition:transform var(--dur) var(--ease);color:var(--fg-muted)}
.faq-item[open] .faq-q .ch{transform:rotate(180deg);color:var(--forest-700)}
.faq-a{padding:0 24px 24px;font:var(--body);color:var(--fg-muted);max-width:70ch}
.faq-a a{color:var(--link)}

/* Footer */
.site-footer{background:var(--forest-900);color:rgba(244,239,230,.75);padding:80px 0 32px;margin-top:64px}
.site-footer h4{font:500 13px/1 var(--font-sans);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--cream);margin-bottom:18px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.footer-grid a{color:rgba(244,239,230,.75);display:block;padding:4px 0;font:400 14px/1.5 var(--font-sans)}
.footer-grid a:hover{color:var(--cream)}
.footer-about p{font:400 14px/1.55 var(--font-sans);color:rgba(244,239,230,.7);max-width:36ch;margin-top:12px}
.site-footer .ds-wordmark{color:var(--cream)}
.imprint{margin-top:56px;padding-top:24px;border-top:1px solid rgba(244,239,230,.1);display:flex;align-items:center;justify-content:space-between;gap:24px;font:400 13px/1.5 var(--font-sans);color:rgba(244,239,230,.6);flex-wrap:wrap}
.imprint .legal{display:flex;gap:24px;flex-wrap:wrap}

/* Sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--bg-elev) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);box-shadow:var(--shadow-md);z-index:40;transform:translateY(100%);transition:transform var(--dur-slow) var(--ease);display:none}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .inner{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.sticky-cta .copy{display:flex;flex-direction:column;line-height:1.2;flex:1}
.sticky-cta .copy .a{font:600 14px/1.2 var(--font-sans);color:var(--ink-900)}
.sticky-cta .copy .b{font:400 12px/1.3 var(--font-sans);color:var(--fg-muted)}

/* PV-Rechner modal */
.pv-modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding:0;overflow-y:auto;overscroll-behavior:contain;background:rgba(6,36,28,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur) var(--ease);-webkit-overflow-scrolling:touch}
.pv-modal.open{display:flex;opacity:1}
.pv-modal-dialog{background:var(--bg-elev);color:var(--fg);border-radius:var(--r-xl);max-width:560px;width:calc(100% - 32px);padding:56px 28px 32px;box-shadow:var(--shadow-lg);border:1px solid rgba(0,0,0,.04);position:relative;margin:24px auto;transform:translateY(20px);transition:transform var(--dur-slow) var(--ease)}
.pv-modal.open .pv-modal-dialog{transform:translateY(0)}
.pv-modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--border-strong);color:var(--ink-900);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease),transform var(--dur-fast) var(--ease);z-index:10;box-shadow:var(--shadow-sm)}
.pv-modal-close:hover{background:var(--sand-100);transform:scale(1.05)}
.pv-modal-close:focus-visible{outline:none;box-shadow:var(--shadow-glow)}
.pv-modal .wizard{padding:0;box-shadow:none;border:0;background:transparent}
body.modal-open{overflow:hidden;padding-bottom:0}
body.modal-open .sticky-cta{display:none !important}

/* Article (sub-page main content) */
.article{padding:72px 0 96px}
.article .inner{max-width:760px;margin:0 auto}
.article h2{font:700 32px/1.2 var(--font-sans);margin:48px 0 16px;color:var(--ink-900);letter-spacing:-0.015em}
.article h2:first-child{margin-top:0}
.article h3{font:600 22px/1.3 var(--font-sans);margin:32px 0 12px;color:var(--ink-900)}
.article h4{font:600 18px/1.35 var(--font-sans);margin:24px 0 8px;color:var(--ink-900)}
.article p{font:var(--body);color:var(--fg);margin:0 0 16px}
.article ul,.article ol{margin:0 0 16px;padding-left:24px}
.article li{font:var(--body);color:var(--fg);margin:0 0 8px}
.article li strong{color:var(--ink-900)}
.article a{color:var(--link)}
.article a:hover{color:var(--link-hover)}
.article blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--sun-500);background:var(--sand-100);border-radius:0 var(--r-md) var(--r-md) 0;font:400 16px/1.55 var(--font-sans);color:var(--ink-700)}
.article table{width:100%;border-collapse:collapse;margin:24px 0;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.article th{background:var(--bg-sunken);font:500 14px/1.3 var(--font-sans);color:var(--ink-700);padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.article td{padding:12px 16px;border-bottom:1px solid var(--border);font:var(--body-sm);color:var(--fg)}
.article tr:last-child td{border-bottom:0}
.article .info-card{background:var(--bg-elev);border:1px solid var(--border);border-left:3px solid var(--sun-500);border-radius:var(--r-md);padding:20px 24px;margin:24px 0}
.article .info-card p:last-child{margin-bottom:0}
.article .meta{font:var(--body-sm);color:var(--fg-muted);margin:0 0 24px}

/* Blog listing — clickable cards */
.blog-list-section{padding-top:48px;padding-bottom:96px}
.blog-list{display:grid;grid-template-columns:1fr;gap:20px;max-width:840px;margin:0 auto}
.blog-card{display:block;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 32px;text-decoration:none;color:var(--fg);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);box-shadow:var(--shadow-sm)}
.blog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);text-decoration:none}
.blog-card-date{display:block;font:500 13px/1 var(--font-mono);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.blog-card h2{font:700 22px/1.3 var(--font-sans);color:var(--ink-900);margin:0 0 10px;letter-spacing:-0.01em}
.blog-card p{font:var(--body);color:var(--fg-muted);margin:0 0 14px}
.blog-card-cta{display:inline-flex;align-items:center;gap:4px;font:500 14px/1 var(--font-sans);color:var(--link)}
.blog-card:hover .blog-card-cta{color:var(--link-hover)}

/* CTA card for sub-pages */
.cta-card{background:var(--forest-800);color:var(--cream);border-radius:var(--r-xl);padding:48px 40px;text-align:center;margin:48px 0;position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 90% 0%,rgba(245,184,0,.18),transparent 60%);pointer-events:none}
.cta-card > *{position:relative}
.cta-card h2{color:var(--cream);font:700 28px/1.2 var(--font-sans);margin:0 0 12px;letter-spacing:-0.015em}
.cta-card p{color:rgba(244,239,230,.85);font:400 17px/1.55 var(--font-sans);margin:0 0 24px;max-width:50ch;margin-left:auto;margin-right:auto}

/* Responsive */
@media (max-width:1024px){
  .hero .inner,.hero .inner-cta{grid-template-columns:1fr;padding-top:64px;padding-bottom:80px;gap:40px}
  .hero-stats{grid-template-columns:1fr 1fr 1fr}
  .calc .inner-grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  section{padding:64px 0}
  .hero h1{font-size:44px}
  .page-hero h1{font-size:36px}
  .page-hero{padding:64px 0 56px}
}
@media (max-width:680px){
  .site-nav{display:none}
  .site-header.open .site-nav{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--bg-elev);padding:20px var(--gutter);border-bottom:1px solid var(--border);gap:16px;box-shadow:var(--shadow-md)}
  .nav-toggle{display:flex}
  .site-header .inner > .btn{display:none}
  .hero h1{font-size:34px;line-height:1.1}
  .page-hero h1{font-size:28px}
  .hero p.lead{font-size:17px}
  .hero .bullets{grid-template-columns:1fr;gap:10px}
  .steps{grid-template-columns:1fr}
  .calc-stats{grid-template-columns:1fr 1fr;gap:20px}
  .calc-stat .n{font-size:36px}
  .calc-card{padding:24px 20px}
  .hero h1{word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}
  .article{padding-left:0;padding-right:0}
  .article .info-card{padding:14px 16px}
  .calc .inner-grid > *{min-width:0}
  .hero .inner > *{min-width:0}
  img,svg,video{max-width:100%;height:auto}
  .footer-grid{grid-template-columns:1fr}
  .imprint{flex-direction:column;align-items:flex-start}
  .trust .divider{display:none}
  .trust .inner{gap:20px 32px}
  .sticky-cta{display:block}
  body{padding-bottom:76px}
  .wizard .options{grid-template-columns:1fr}
  .wizard .field-row{grid-template-columns:1fr}
  .comp-table{font-size:13px}
  .comp-table th,.comp-table td{padding:12px 10px}
  .container{padding:0 16px}
  section{padding:48px 0}
  .article h2{font-size:26px}
  .article{padding:48px 0 64px}
  .cta-card{padding:32px 24px}

  /* Modal mobile: full-screen, dialog fills viewport with safe-area padding */
  .pv-modal{align-items:stretch;padding:0}
  .pv-modal-dialog{padding:56px 16px 24px;margin:0;border-radius:0;width:100%;max-width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;box-shadow:none}
  .pv-modal-dialog > .wizard{flex:1;display:flex;flex-direction:column}
  .pv-modal-dialog .wizard-step.active{flex:1}
  .pv-modal-close{top:10px;right:10px;width:44px;height:44px}
  .pv-modal .wizard h3{font-size:20px;line-height:1.25}
  .pv-modal .wizard-tabs{gap:6px;padding-bottom:14px;margin-bottom:18px}
  .pv-modal .wizard-tab{font-size:12px;gap:6px}
  .pv-modal .wizard-tab .dot{width:22px;height:22px;font-size:11px}
  .pv-modal .options{grid-template-columns:1fr 1fr;gap:8px}
  .pv-modal .opt{padding:12px;font-size:14px}
  .pv-modal .opt .ic{width:30px;height:30px}
  .pv-modal .opt .ic svg{width:18px;height:18px}
  .pv-modal .contact-method{grid-template-columns:1fr}
  .pv-modal .wizard-foot{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .pv-modal .wizard-foot .privacy{justify-content:center;font-size:12px}
  .pv-modal .wizard-foot .btn-row{width:100%}
  .pv-modal .wizard-foot .btn{width:100%;justify-content:center}
  .pv-modal .consent-box{padding:12px;gap:10px}
  .pv-modal .consent-box label{font-size:12px;line-height:1.45}
  .toggle-group{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .toggle-btn{padding:10px 4px;font-size:13px}
  .slider-wrap input[type=range]{height:8px}
  .slider-wrap input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
  .slider-ticks{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}





/* ===DS-DIRECTIONS-START=== (managed block — do not edit; regenerated by build-solar-ds-site.mjs) */
/* ============================================================
   B — Friendly / Approachable
   Light sand hero, dark text, pill eyebrow, yellow highlight,
   cream wizard with sun-circle decoration, rounded steps.
   ============================================================ */
[data-direction="b"]{--bg:var(--sand-100);--bg-elev:#fffaf0;--primary:var(--forest-600);--primary-hover:var(--forest-700);--r-sm:12px;--r-md:18px;--r-lg:24px;--r-xl:32px}

/* Hero — LIGHT, sand gradient + sun radial top-right */
[data-direction="b"] .hero{background:transparent;color:var(--ink-900);position:relative;overflow:hidden}
[data-direction="b"] .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(42% 62% at 86% 26%,var(--sun-300),transparent 65%),linear-gradient(180deg,var(--sand-100) 0%,var(--sand-50) 100%);pointer-events:none;z-index:0}
[data-direction="b"] .hero .inner{position:relative;z-index:1}
[data-direction="b"] .hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm);font:500 13px/1 var(--font-sans);color:var(--forest-700);text-transform:none;letter-spacing:0;margin-bottom:18px}
[data-direction="b"] .hero .eyebrow::before{display:none}
[data-direction="b"] .hero h1{color:var(--forest-900)}
[data-direction="b"] .hero h1 em{font-style:normal;color:var(--forest-900);background:linear-gradient(0deg,var(--sun-300) 45%,transparent 45%);padding:0 6px;border-radius:2px}
[data-direction="b"] .hero p.lead{color:var(--ink-700)}
[data-direction="b"] .hero .bullets li{color:var(--ink-900);font:500 15px/1.3 var(--font-sans)}
[data-direction="b"] .hero .bullets svg{color:var(--forest-700);background:var(--forest-100);width:18px;height:18px;padding:3px;border-radius:999px;box-sizing:content-box;flex-shrink:0}
[data-direction="b"] .hero .ratings{color:var(--ink-700)}
[data-direction="b"] .hero .ratings strong{color:var(--forest-800) !important}

/* Sub-page hero (compact) — also light for B */
[data-direction="b"] .page-hero{background:transparent;color:var(--ink-900);position:relative;overflow:hidden}
[data-direction="b"] .page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(36% 60% at 86% 20%,var(--sun-300),transparent 65%),linear-gradient(180deg,var(--sand-100) 0%,var(--sand-50) 100%);pointer-events:none;z-index:0}
[data-direction="b"] .page-hero .inner{position:relative;z-index:1}
[data-direction="b"] .page-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow-sm);color:var(--forest-700);text-transform:none;letter-spacing:0}
[data-direction="b"] .page-hero .eyebrow::before{display:none}
[data-direction="b"] .page-hero h1{color:var(--forest-900)}
[data-direction="b"] .page-hero p.lead{color:var(--ink-700)}

/* Wizard — cream + sun-circle decoration top-right */
[data-direction="b"] .wizard{background:#fffaf0;border-radius:28px;padding:32px;border:1px solid rgba(0,0,0,.04);position:relative;overflow:visible}
[data-direction="b"] .wizard::after{content:"";position:absolute;top:-36px;right:24px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,var(--sun-300) 0%,var(--sun-500) 100%);box-shadow:0 8px 24px rgba(245,184,0,.4);z-index:3;pointer-events:none}
[data-direction="b"] .wizard .opt{border:2px solid transparent;background:var(--sand-50);border-radius:18px;padding:16px}
[data-direction="b"] .wizard .opt:hover{background:#fff;border-color:transparent}
[data-direction="b"] .wizard .opt:has(input:checked){border-color:var(--forest-600);background:#fff;box-shadow:var(--shadow-sm)}
[data-direction="b"] .wizard .opt .ic{width:40px;height:40px;border-radius:12px;background:var(--forest-100)}
[data-direction="b"] .wizard-progress{height:6px}
[data-direction="b"] .wizard-progress>i{background:linear-gradient(90deg,var(--forest-500),var(--forest-700))}

/* Process steps rounder */
[data-direction="b"] .step{border-radius:22px;background:#fff}
[data-direction="b"] .step .n{background:var(--sun-100);color:var(--sun-700);border-radius:50%}

/* CTA card stays dark forest (intentional contrast block on light page) */
[data-direction="b"] .cta-card{background:linear-gradient(135deg,var(--forest-700) 0%,var(--forest-800) 100%)}
[data-direction="b"] .article .info-card{border-left-color:var(--forest-600);background:var(--bg-elev)}

/* ============================================================
   C — Tech-Data / Comparison portal
   White hero, no dark blocks, live data callouts, sharp 1px
   borders, segmented progress, monospace numbers.
   ============================================================ */
[data-direction="c"]{--bg:#ffffff;--bg-elev:#ffffff;--bg-sunken:#f6f7f5;--primary:var(--forest-900);--primary-hover:var(--forest-800);--r-sm:4px;--r-md:6px;--r-lg:10px;--r-xl:14px;--r-pill:6px}

/* Hero — white, dark text, horizontal-line eyebrow */
[data-direction="c"] .hero{background:#fff;color:var(--ink-900);border-bottom:1px solid var(--border)}
[data-direction="c"] .hero::before{display:none}
[data-direction="c"] .hero .inner{padding-top:64px;padding-bottom:80px}
[data-direction="c"] .hero .eyebrow{color:var(--forest-700);background:transparent;padding:0;display:inline-flex;align-items:center;gap:10px}
[data-direction="c"] .hero .eyebrow::before{content:"";width:24px;height:1px;background:var(--forest-700);border-radius:0}
[data-direction="c"] .hero h1{color:var(--ink-900);letter-spacing:-0.03em;line-height:1.0}
[data-direction="c"] .hero h1 em{font-style:normal;color:var(--forest-700);background:transparent}
[data-direction="c"] .hero p.lead{color:var(--ink-700);max-width:52ch}
[data-direction="c"] .hero .bullets li{color:var(--ink-900)}
[data-direction="c"] .hero .bullets svg{color:var(--forest-700)}
[data-direction="c"] .hero .ratings{color:var(--ink-700);font:400 13px/1.4 var(--font-mono)}
[data-direction="c"] .hero .ratings strong{color:var(--forest-800) !important;font-weight:700}
[data-direction="c"] .hero .stars{color:var(--sun-500)}

/* Sub-page hero — also white for C */
[data-direction="c"] .page-hero{background:#fff;color:var(--ink-900);border-bottom:1px solid var(--border)}
[data-direction="c"] .page-hero::before{display:none}
[data-direction="c"] .page-hero .eyebrow{color:var(--forest-700);background:transparent;padding:0}
[data-direction="c"] .page-hero .eyebrow::before{content:"";width:24px;height:1px;background:var(--forest-700);border-radius:0}
[data-direction="c"] .page-hero h1{color:var(--ink-900);letter-spacing:-0.03em}
[data-direction="c"] .page-hero p.lead{color:var(--ink-700)}

/* Wizard — sharp 10px radius, thin 1px border, no big shadow */
[data-direction="c"] .wizard{border:1px solid var(--border-strong);border-radius:10px;padding:24px;box-shadow:none;background:#fff}
[data-direction="c"] .wizard h3{font:600 17px/1.25 var(--font-sans)}
[data-direction="c"] .wizard .opt{border:1px solid var(--border-strong);padding:12px 14px;border-radius:6px;background:#fff}
[data-direction="c"] .wizard .opt:has(input:checked){border-color:var(--forest-700);background:var(--forest-50)}
[data-direction="c"] .wizard .opt .ic{width:30px;height:30px;border-radius:4px;background:var(--bg-sunken)}
[data-direction="c"] .wizard-progress{height:3px}
[data-direction="c"] .wizard-progress>i{background:var(--forest-700)}

[data-direction="c"] .calc-stat .n{font-size:64px}
[data-direction="c"] .article .info-card{border-radius:6px;background:var(--bg-sunken);border-left:3px solid var(--forest-700)}
[data-direction="c"] .comp-table{border-radius:10px}
[data-direction="c"] .ds-wordmark{font-family:var(--font-mono);letter-spacing:-0.02em}
[data-direction="c"] .step{border-radius:8px;border:1px solid var(--border)}

/* ============================================================
   A — Trust / Established (default, no overrides needed —
   dark forest hero, sun-glow radial, cream text, sun-300 em,
   sand-100 wizard with --r-xl 28px corners).
   ============================================================ */
/* ===DS-DIRECTIONS-END=== */