:root{
  --ground:#EDEFEA; --surface:#FFFFFF; --surface-2:#F6F7F3;
  --rule:#D3DAD2; --rule-soft:#E2E7E0;
  --ink:#131A16; --ink-2:#3B4842; --muted:#5F6E66;
  --pine:#0E6B4A; --pine-ink:#0A5239;
  --save:#1E8F5E; --save-soft:#D8EFE2;
  --cost:#A55C15; --cost-soft:#F5E7D3;
  --focus:#0E6B4A; --on-pine:#FFFFFF; --cta-bg:#131A16; --cta-fg:#EDEFEA; --cta-rule:transparent;
  --f-display:"IBM Plex Sans Condensed",-apple-system,"Segoe UI",sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1512; --surface:#161F1A; --surface-2:#121A16;
    --rule:#2A3730; --rule-soft:#222E28;
    --ink:#E7EDE8; --ink-2:#C2CFC6; --muted:#94A79B;
    --pine:#3FBF87; --pine-ink:#5CD49B;
    --save:#4FCB90; --save-soft:#12332480;
    --cost:#E0A055; --cost-soft:#3A2A1580;
    --focus:#5CD49B; --on-pine:#08130D; --cta-bg:#1B2721; --cta-fg:#E7EDE8; --cta-rule:#2A3730;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1512; --surface:#161F1A; --surface-2:#121A16;
  --rule:#2A3730; --rule-soft:#222E28;
  --ink:#E7EDE8; --ink-2:#C2CFC6; --muted:#94A79B;
  --pine:#3FBF87; --pine-ink:#5CD49B;
  --save:#4FCB90; --save-soft:#12332480;
  --cost:#E0A055; --cost-soft:#3A2A1580;
  --focus:#5CD49B; --on-pine:#08130D; --cta-bg:#1B2721; --cta-fg:#E7EDE8; --cta-rule:#2A3730;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:24px}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:700; line-height:1.12; letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.005em}
p{margin:0}
.eyebrow{
  font-family:var(--f-display); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pine);
}
.lede{font-size:1.12rem; color:var(--ink-2); max-width:62ch}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* header */
header{border-bottom:1px solid var(--rule); background:var(--ground); position:sticky; top:0; z-index:20}
.bar{display:flex; align-items:center; gap:28px; height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:700; font-size:1.18rem; letter-spacing:-.01em}
.brand svg{width:30px; height:30px; display:block}
nav{margin-left:auto; display:flex; gap:26px; align-items:center; font-size:.94rem}
nav a{text-decoration:none; color:var(--ink-2)}
nav a:hover{color:var(--pine)}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  background:var(--pine); color:var(--on-pine); border:1px solid var(--pine);
  font-weight:600; font-size:.95rem; text-decoration:none; border-radius:2px;
}
.btn:hover{background:var(--pine-ink); border-color:var(--pine-ink)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--rule)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--pine); color:var(--pine)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

/* hero */
.hero{padding:64px 0 20px; display:grid; gap:20px}
.hero h1 span{color:var(--pine)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.hero-note{font-size:.9rem; color:var(--muted); margin-top:6px}

/* estimate document */
.doc{
  background:var(--surface); border:1px solid var(--rule);
  margin:36px 0 0;
}
.doc-head{
  display:flex; flex-wrap:wrap; gap:16px 32px; align-items:baseline;
  padding:18px 22px; border-bottom:1px solid var(--rule); background:var(--surface-2);
}
.doc-head .k{font-family:var(--f-display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block}
.doc-head .v{font-family:var(--f-mono); font-size:.92rem; font-weight:500}
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:660px}
thead th{
  font-family:var(--f-display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:700; text-align:right; padding:12px 22px; border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
thead th:first-child,thead th:nth-child(2){text-align:left}
tbody td{padding:13px 22px; border-bottom:1px solid var(--rule-soft); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.pos{font-family:var(--f-mono); font-size:.82rem; color:var(--muted); width:1%; white-space:nowrap}
td.name{font-weight:500}
td.name small{display:block; font-size:.8rem; color:var(--muted); font-weight:400; margin-top:2px}
td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.new{color:var(--ink-2)}
td.used{font-weight:600}
.tag{
  display:inline-block; font-family:var(--f-display); font-size:.68rem; letter-spacing:.09em;
  text-transform:uppercase; padding:2px 7px; border-radius:2px; font-weight:700; vertical-align:1px;
}
.tag-ok{background:var(--save-soft); color:var(--save)}
.tag-no{background:var(--cost-soft); color:var(--cost)}
tr.keep td{background:var(--surface-2)}
tfoot td{padding:14px 22px; border-top:1px solid var(--rule); font-weight:600}
tfoot .grand td{font-size:1.05rem; border-top:2px solid var(--ink)}
.doc-foot{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--rule);
}
.doc-foot > div{padding:20px 22px; border-right:1px solid var(--rule-soft)}
.doc-foot > div:last-child{border-right:0}
.doc-foot .k{font-family:var(--f-display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.doc-foot .big{font-family:var(--f-mono); font-size:1.7rem; font-weight:600; letter-spacing:-.02em; display:block; margin-top:4px}
.doc-foot .big.save{color:var(--save)}
.disclaimer{padding:14px 22px; border-top:1px solid var(--rule-soft); font-size:.85rem; color:var(--muted)}

/* sections */
section{padding:72px 0; border-top:1px solid var(--rule)}
.sec-head{display:grid; gap:12px; margin-bottom:34px; max-width:70ch}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0; border:1px solid var(--rule); background:var(--surface)}
.grid3 > article{padding:28px 26px; border-right:1px solid var(--rule-soft)}
.grid3 > article:last-child{border-right:0}
.grid3 h3{font-family:var(--f-display); font-size:1.18rem; margin:8px 0 10px}
.grid3 p{color:var(--ink-2); font-size:.96rem}
.way{font-family:var(--f-mono); font-size:.8rem; color:var(--pine); font-weight:600; letter-spacing:.06em}
.steps{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:7px; font-size:.9rem; color:var(--muted)}
.steps li{padding-left:18px; position:relative}
.steps li::before{content:"→"; position:absolute; left:0; color:var(--pine)}

.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:44px; align-items:start}
.figure{border:1px solid var(--rule); background:var(--surface); padding:8px}
.figure img{width:100%; height:auto; display:block}
figcaption{font-size:.85rem; color:var(--muted); padding:10px 4px 2px}

.datalist{display:grid; gap:0; border-top:1px solid var(--rule)}
.datalist > div{display:grid; grid-template-columns:minmax(140px,180px) 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--rule-soft)}
.datalist dt{font-family:var(--f-mono); font-size:.86rem; color:var(--pine); font-weight:500}
.datalist dd{margin:0; color:var(--ink-2); font-size:.96rem}

.honest{background:var(--surface); border:1px solid var(--rule); padding:32px 30px}
.honest ul{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:14px}
.honest li{padding-left:26px; position:relative; color:var(--ink-2)}
.honest li::before{content:"—"; position:absolute; left:0; color:var(--cost); font-family:var(--f-mono)}

.co2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0; border:1px solid var(--rule); background:var(--surface)}
.co2 > div{padding:26px; border-right:1px solid var(--rule-soft)}
.co2 > div:last-child{border-right:0}
.co2 .n{font-family:var(--f-mono); font-size:2.1rem; font-weight:600; letter-spacing:-.02em; color:var(--pine); display:block}
.co2 .l{font-family:var(--f-display); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; display:block}
.co2 p{font-size:.9rem; color:var(--ink-2); margin-top:12px}

.cta{background:var(--cta-bg); color:var(--cta-fg); border:1px solid var(--cta-rule); padding:46px 40px; display:grid; gap:16px}
.cta h2{color:inherit}
.cta p{max-width:60ch; opacity:.85}

details{border-bottom:1px solid var(--rule-soft); padding:16px 0}
summary{cursor:pointer; font-weight:600; list-style:none; display:flex; gap:14px; align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; font-family:var(--f-mono); color:var(--pine); font-weight:600}
details[open] summary::before{content:"–"}
details p{margin-top:12px; padding-left:28px; color:var(--ink-2); max-width:70ch}

footer{border-top:1px solid var(--rule); padding:40px 0 56px; font-size:.9rem; color:var(--muted)}
.foot-grid{display:flex; flex-wrap:wrap; gap:28px; align-items:baseline}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--pine)}
.legalnote{margin-top:22px; max-width:80ch; font-size:.84rem; line-height:1.65}

@media (max-width:720px){
  nav{display:none}
  .hero{padding-top:44px}
  .doc-foot > div{border-right:0; border-bottom:1px solid var(--rule-soft)}
  .grid3 > article{border-right:0; border-bottom:1px solid var(--rule-soft)}
  .co2 > div{border-right:0; border-bottom:1px solid var(--rule-soft)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* --- Werkstatt- und Methodikseite --- */
.pricing{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); border:1px solid var(--rule); background:var(--surface)}
.pricing > div{padding:26px; border-right:1px solid var(--rule-soft)}
.pricing > div:last-child{border-right:0}
.pricing .tier{font-family:var(--f-display); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.pricing .amt{font-family:var(--f-mono); font-size:2rem; font-weight:600; display:block; margin:8px 0 4px; letter-spacing:-.02em}
.pricing .sub{font-size:.88rem; color:var(--muted)}
.pricing ul{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; font-size:.92rem; color:var(--ink-2)}
.pricing li{padding-left:18px; position:relative}
.pricing li::before{content:"·"; position:absolute; left:4px; color:var(--pine); font-weight:700}
.pricing .hl{border:2px solid var(--pine)}

.steplist{counter-reset:st; display:grid; gap:0; border-top:1px solid var(--rule)}
.steplist > li{list-style:none; counter-increment:st; display:grid; grid-template-columns:56px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--rule-soft)}
.steplist > li::before{content:counter(st,decimal-leading-zero); font-family:var(--f-mono); color:var(--pine); font-weight:600; font-size:.95rem}
.steplist h3{font-family:var(--f-display); font-size:1.08rem; margin-bottom:6px}
.steplist p{color:var(--ink-2); font-size:.96rem; max-width:66ch}
.steplist{margin:0; padding:0}

.callout{border-left:3px solid var(--pine); background:var(--surface); padding:20px 24px; margin:28px 0}
.callout p{color:var(--ink-2)}
.formula{background:var(--surface); border:1px solid var(--rule); padding:22px 24px; font-family:var(--f-mono); font-size:.95rem; overflow-x:auto; line-height:1.9}
.formula .c{color:var(--muted)}
.formula .g{color:var(--pine)}
table.plain{min-width:520px}
table.plain th{text-align:left; padding:12px 0; border-bottom:1px solid var(--rule); font-family:var(--f-display); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
table.plain th.r,table.plain td.r{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
table.plain td{padding:12px 0; border-bottom:1px solid var(--rule-soft)}
table.plain td:first-child,table.plain th:first-child{padding-right:24px}