/* Wilding Rechner – gemeinsames Design (Schriften lokal, keine externen Anfragen) */
@font-face{font-family:'EB Garamond';font-weight:500;font-display:swap;src:url(../fonts/EBGaramond-500.ttf) format('truetype')}
@font-face{font-family:'EB Garamond';font-weight:600;font-display:swap;src:url(../fonts/EBGaramond-600.ttf) format('truetype')}
@font-face{font-family:'Open Sans';font-weight:300 800;font-display:swap;src:url(../fonts/OpenSans-Variable.ttf) format('truetype')}

/* ---------- Farb-Tokens: hell/dunkel automatisch ---------- */
:root{
  --brand:#0F3B2E;          /* Wilding Grün (Flächen: Hero, Buttons) */
  --brand2:#1c5a47;
  --g:light-dark(#0F3B2E,#8fd6b4);        /* Grün für Text/Überschriften */
  --g2:light-dark(#1c5a47,#a9e3c8);
  --g5:light-dark(#e8f0ed,#1b2d26);       /* Grün-Tint */
  --bg:light-dark(#f2f6f4,#0b1411);
  --card:light-dark(#ffffff,#13201b);
  --tx:light-dark(#15201c,#e8f1ed);
  --mu:light-dark(#53625b,#9fb2aa);
  --bd:light-dark(#d8e1dd,#26382f);
  --gold:light-dark(#8f6f3a,#e0bd84);
  --goldl:light-dark(#B08D57,#d6b27a);
  --bad:light-dark(#a8372a,#ff8d7e);
  --warnbg:light-dark(#fbf6ec,#2a2415);--warnbd:light-dark(#e7d6b3,#5a4a24);--warntx:light-dark(#4b3a14,#f1dfb6);
  --shadow:light-dark(0 1px 2px rgba(15,59,46,.05),0 1px 2px rgba(0,0,0,.4));
  --shadow2:light-dark(0 10px 30px -12px rgba(15,59,46,.25),0 10px 30px -12px rgba(0,0,0,.6));
  --r:16px;
  color-scheme:light dark;
  accent-color:var(--g);
  scrollbar-color:light-dark(#9db8ad,#3b5247) transparent;
}
@supports not (color:light-dark(red,blue)){
  :root{--g:#0F3B2E;--g2:#1c5a47;--g5:#e8f0ed;--bg:#f2f6f4;--card:#fff;--tx:#15201c;--mu:#53625b;--bd:#d8e1dd;--gold:#8f6f3a;--goldl:#B08D57;--bad:#a8372a;--warnbg:#fbf6ec;--warnbd:#e7d6b3;--warntx:#4b3a14;--shadow:0 1px 2px rgba(15,59,46,.05);--shadow2:0 10px 30px -12px rgba(15,59,46,.25)}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.55 'Open Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:'EB Garamond',Georgia,serif;color:var(--g);font-weight:600;margin:0;line-height:1.18;letter-spacing:-.005em}
a{color:var(--g2)}
::selection{background:var(--goldl);color:#10241c}
:focus-visible{outline:3px solid var(--goldl);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--tx);padding:10px;z-index:99}.skip:focus{left:8px;top:8px}

/* ---------- Hero ---------- */
header.hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:44px 16px 64px;
  background:radial-gradient(1200px 500px at 85% -10%,#2a7a5f 0%,transparent 60%),radial-gradient(800px 400px at -10% 110%,#134d3c 0%,transparent 60%),linear-gradient(135deg,#0a2c22 0%,#0F3B2E 55%,#14503e 100%)}
header.hero::before,header.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.5}
header.hero::before{width:340px;height:340px;right:-80px;top:-120px;background:#2f8a6a}
header.hero::after{width:300px;height:300px;left:-100px;bottom:-160px;background:#3aa27c}
@media(prefers-reduced-motion:no-preference){header.hero::before{animation:drift 18s ease-in-out infinite alternate}header.hero::after{animation:drift 22s ease-in-out infinite alternate-reverse}}
@keyframes drift{to{translate:40px 30px}}
.wrap{max-width:1200px;margin:0 auto}
.hero .brand{display:inline-block;line-height:0}
.hero .brand img{display:block;width:min(300px,68vw);height:auto}
.hero h1{color:#fff;font-size:clamp(2.3rem,6vw,3.8rem);margin:14px 0 12px;letter-spacing:-.015em}
.hero p{margin:0;max-width:700px;opacity:.92;font-size:1.1rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.chips li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px;font-size:.82rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.chips li::before{content:"✓";color:var(--goldl);margin-right:7px;font-weight:600}

main.wrap{padding:0 16px 24px;margin-top:-34px;position:relative}
.layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:24px;align-items:start}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.inputs{position:sticky;top:14px;box-shadow:var(--shadow2)}
.inputs h2,.lead h2{font-size:1.55rem;margin-bottom:16px}

/* ---------- Eingaben ---------- */
.fld{margin-bottom:22px;border:0;padding:0}
.fld .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.fld label{font-size:.88rem;font-weight:600}
.fld .hl{font-size:.78rem;color:var(--mu);margin-top:2px}
.fld .row{display:flex;gap:14px;align-items:center}
.numwrap{position:relative}
.fld input[type=number],.fld select{font:inherit;font-weight:500;padding:10px 12px;border:1.5px solid var(--bd);border-radius:12px;background:var(--bg);color:var(--tx);transition:border-color .15s,box-shadow .15s}
.fld input[type=number]:hover,.fld select:hover{border-color:var(--g)}
.fld input[type=number]:focus,.fld select:focus{border-color:var(--g);box-shadow:0 0 0 4px color-mix(in srgb,var(--g) 18%,transparent);outline:none}
.fld input[type=number]{width:124px;text-align:right;padding-right:36px;-moz-appearance:textfield}
.fld input[type=number]::-webkit-outer-spin-button,.fld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numwrap .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.85rem;color:var(--mu);pointer-events:none}
.fld select{width:100%;appearance:auto}
.fld.bad input[type=number]{border-color:var(--bad)}
.err{color:var(--bad);font-size:.78rem;min-height:1em;margin-top:3px}
.info{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--g5);color:var(--g);font-size:.7rem;font-weight:600;cursor:help;margin-left:6px;border:0}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;margin:6px 0 16px}.chk input{margin-top:4px}

/* Slider (nativ, per CSS gestaltet) */
input[type=range]{--track:.5rem;--thumb:1.4rem;--fill:var(--g);--rail:light-dark(#dbe5e0,#2a3d34);--pct:0%;
  appearance:none;flex:1;min-width:0;block-size:2.5rem;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{block-size:var(--track);border-radius:999px;background:linear-gradient(to right,var(--fill) var(--pct),var(--rail) var(--pct))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--thumb);block-size:var(--thumb);margin-block-start:calc((var(--track) - var(--thumb)) / 2);border-radius:50%;border:3px solid var(--card);background:var(--fill);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .15s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-track{block-size:var(--track);border-radius:999px;background:var(--rail)}
input[type=range]::-moz-range-progress{block-size:var(--track);border-radius:999px;background:var(--fill)}
input[type=range]::-moz-range-thumb{inline-size:var(--thumb);block-size:var(--thumb);border-radius:50%;border:3px solid var(--card);background:var(--fill);box-shadow:0 2px 8px rgba(0,0,0,.3)}
input[type=range]:focus-visible{outline:2px solid var(--goldl);outline-offset:4px}

.tabs{display:flex;gap:4px;background:var(--g5);padding:5px;border-radius:14px;margin-bottom:20px}
.tabs button{flex:1;padding:11px;border:0;background:transparent;color:var(--g);border-radius:10px;font:inherit;font-weight:600;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tabs button[aria-selected=true]{background:var(--brand);color:#fff;box-shadow:0 4px 12px -4px rgba(15,59,46,.6)}

/* ---------- Ergebnis ---------- */
.insight{position:relative;background:linear-gradient(135deg,var(--g5),var(--card));border:1px solid var(--bd);border-radius:var(--r);padding:18px 20px 18px 24px;margin-bottom:16px;font-size:1.05rem;box-shadow:var(--shadow)}
.insight::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:linear-gradient(var(--goldl),var(--g))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.kpi .l{display:block;font-size:.74rem;color:var(--mu);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.kpi b{display:block;font-family:'EB Garamond',serif;font-size:2rem;color:var(--g);line-height:1.15;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi small{display:block;color:var(--mu);font-size:.78rem;margin-top:3px}
.kpi.primary{background:linear-gradient(135deg,#0F3B2E,#1c5a47);border-color:transparent;color:#fff;grid-column:1/-1}
.kpi.primary .l,.kpi.primary small{color:rgba(255,255,255,.82)}.kpi.primary b{color:#fff;font-size:2.6rem}
.kpi.warn b{color:var(--gold)}.kpi.bad b{color:var(--bad)}.kpi.bad{border-color:var(--bad)}
.kpi.flash b{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:.25;translate:0 6px}100%{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.kpi.flash b{animation:none}.kpi:hover{transform:none}}

.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:18px}
.chartcard{padding:20px;container-type:inline-size}
.chartcard h3{font-size:1.25rem}
.chartcard .sub{color:var(--mu);font-size:.83rem;margin:2px 0 10px}
.cv{position:relative;height:300px}
@container (max-width:380px){.cv{height:250px}.chartcard h3{font-size:1.1rem}}
.tbtn{background:none;border:0;color:var(--g2);font:inherit;font-size:.82rem;text-decoration:underline;cursor:pointer;padding:8px 0 0}
.dtable{display:none;overflow:auto;max-height:260px;margin-top:8px}
.dtable.open{display:block}
.dtable table,.tw table{border-collapse:collapse;width:100%;font-size:.8rem;font-variant-numeric:tabular-nums}
.dtable th,.dtable td,.tw th,.tw td{padding:6px 10px;border-bottom:1px solid var(--bd);text-align:right;white-space:nowrap}
.dtable th:first-child,.dtable td:first-child,.tw th:first-child,.tw td:first-child{text-align:left}
.dtable th,.tw th{position:sticky;top:0;background:var(--card);color:var(--g)}
.tw{overflow:auto;max-height:340px;margin-top:10px}

.notice{margin-top:18px;background:var(--warnbg);border:1px solid var(--warnbd);border-radius:var(--r);padding:16px 18px;font-size:.84rem;color:var(--warntx)}
.notice strong{color:var(--warntx)}.notice ul{margin:6px 0 0;padding-left:18px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:1.5px solid var(--brand);border-radius:12px;padding:13px 20px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{background:var(--brand2);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(15,59,46,.7)}
.btn.alt{background:transparent;color:var(--g);border-color:var(--g)}.btn.alt:hover{background:var(--g5);box-shadow:none}
.btn[disabled]{opacity:.6;cursor:wait}

/* ---------- Lead ---------- */
.lead{margin-top:24px;background:linear-gradient(135deg,var(--card),var(--g5))}
.leadgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
.lead input[type=text],.lead input[type=email],.lead input[type=tel]{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--bd);border-radius:12px;margin-bottom:10px;background:var(--bg);color:var(--tx)}
.lead input:focus{border-color:var(--g);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--g) 18%,transparent)}
.lead ul{padding-left:18px}
.lead .small{font-size:.8rem;color:var(--mu)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
#leadMsg{margin-top:12px;font-weight:600}#leadMsg.ok{color:var(--g)}#leadMsg.no{color:var(--bad)}

details.acc{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);margin-top:12px;padding:0 20px;box-shadow:var(--shadow)}
details.acc summary{cursor:pointer;font-family:'EB Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--g);padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:'+';font:400 1.4rem 'Open Sans';color:var(--g2);transition:rotate .2s}
details.acc[open] summary::after{rotate:45deg}
details.acc .body{padding:0 0 18px;font-size:.9rem}
details.acc .body h4{font-size:1.08rem;margin:14px 0 4px}
details.acc .body p,details.acc .body ul{margin:6px 0}
.inputs details.acc{box-shadow:none;background:var(--bg)}

footer.site{max-width:1200px;margin:10px auto 0;padding:20px 16px 90px;color:var(--mu);font-size:.8rem}
footer.site a{color:var(--mu)}
.todo{background:#fff3c4;color:#3b2f00;padding:0 4px;border-radius:3px}

/* ---------- Ergebnisleiste (Handy) ---------- */
.sbar{position:fixed;inset:auto 12px 12px 12px;z-index:30;display:none;align-items:center;justify-content:space-between;gap:12px;background:var(--brand);color:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 12px 30px -8px rgba(0,0,0,.5);translate:0 140%;transition:translate .3s}
.sbar.show{translate:0 0}
.sbar span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;opacity:.85;display:block}
.sbar b{font-family:'EB Garamond',serif;font-size:1.5rem;font-variant-numeric:tabular-nums}
.sbar a{color:#fff;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:8px 12px;font-size:.85rem}
@media(prefers-reduced-motion:reduce){.sbar{transition:none}}

/* ---------- Scroll-Effekte (nur wenn unterstützt) ---------- */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .chartcard,.lead,details.acc,.notice{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
  }
}

.pdfonly{display:none}
.pdfmeta{border-bottom:2px solid var(--g);padding-bottom:10px;margin-bottom:14px}
.pdfmeta table{border-collapse:collapse;font-size:.85rem;width:100%;margin-top:8px}.pdfmeta td{padding:2px 6px;border-bottom:1px solid var(--bd)}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}.inputs{position:static}.leadgrid{grid-template-columns:1fr}
  .sbar{display:flex}header.hero{padding:34px 16px 56px}
  .kpi.primary b{font-size:2.2rem}
}
@media(forced-colors:active){.kpi.primary,.sbar,.tabs button[aria-selected=true]{border:2px solid CanvasText}}

/* ---------- Druck / PDF: immer hell ---------- */
@page{size:A4;margin:12mm}
@media print{
 :root{color-scheme:light;--g:#0F3B2E;--g2:#1c5a47;--g5:#e8f0ed;--bg:#fff;--card:#fff;--tx:#15201c;--mu:#53625b;--bd:#d8e1dd;--gold:#8f6f3a;--bad:#a8372a;--warnbg:#fbf6ec;--warnbd:#e7d6b3;--warntx:#4b3a14;--shadow:none;--shadow2:none}
 body{background:#fff;font-size:11pt}
 header.hero{background:#fff!important;color:var(--g);padding:0 0 6mm;border-bottom:2px solid var(--g);margin-bottom:5mm;overflow:visible;-webkit-print-color-adjust:exact}
 header.hero::before,header.hero::after{display:none}
 header.hero .brand img{content:url(../assets/logo-green.png)}
 header.hero h1,header.hero p,header.hero .brand{color:var(--g)}header.hero .chips,header.hero p{display:none}
 .inputs,.lead,details.acc,[data-noprint],.skip,.tbtn,.dtable,.sbar{display:none!important}
 main.wrap,.wrap{max-width:none;padding:0;margin-top:0}
 .layout{display:block}
 .pdfonly{display:block}.pdfmeta h2{display:none}
 .kpis{grid-template-columns:repeat(3,1fr);gap:8px}.kpi.primary{grid-column:auto;background:#0F3B2E!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .charts{display:block}.chartcard{margin-bottom:8px;padding:12px}.cv{height:165px}.cv canvas{width:100%!important;max-width:100%!important;height:165px!important}
 .card,.kpi,.chartcard,.notice,.insight{break-inside:avoid;box-shadow:none;animation:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .notice{font-size:9pt}.kpi b{font-size:1.5rem}.kpi.primary b{font-size:1.7rem}
 footer.site{display:block;font-size:8pt;padding:4mm 0 0}
}