/* Net Zero Exposure, seitenspezifisch.
   Nutzt Tokens und Komponenten aus styles.css. Hier steht nur, was die Seite noch nicht hat. */
.nze .blk{padding:52px 0 0}
/* Ueberschriften auf Werkzeuggroesse. Die Marketinggroessen der Startseite sind
   fuer eine Seite mit zwoelf H2 zu laut. */
.nze h1{font-size:clamp(32px,3.8vw,46px);letter-spacing:-.03em;max-width:20ch;margin-bottom:22px}
.nze h2{font-size:clamp(23px,2.4vw,30px);letter-spacing:-.02em;max-width:26ch}
.nze .section-head{padding:0 0 22px;max-width:none}
.nze .section-head p{font-size:16.5px;margin-top:12px;max-width:66ch}
.nze .section-head p + p{font-size:15.5px;margin-top:10px}
.nze .lead{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:58ch}
.nze .disc{margin-top:22px;font-size:15px;color:var(--ink-muted);max-width:62ch;
  border-left:2px solid var(--line-strong);padding-left:16px}
.nze .meta-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:0;padding:22px 32px;align-items:stretch;justify-content:initial}
/* Die Leiste ist auf crcfprojects blau hinterlegt (styles.css, EU-Akzent).
   Alle Texte darin muessen hell sein, nicht in Tinte. */
.nze .meta-block{max-width:none;text-align:left;padding:2px 20px;border-left:1px solid rgba(255,255,255,.22)}
.nze .meta-block:first-child{border-left:0;padding-left:0}
.nze .meta-block .sub{color:rgba(255,255,255,.82)}
.nze .meta-block .src{color:rgba(255,255,255,.55)}
.nze .meta-block .sub strong{color:#fff}
.nze .meta-divider{display:none}
.nze .meta-block .num{display:block;font-variant-numeric:tabular-nums;line-height:1.15;font-size:25px}
.nze .meta-block .lbl{display:block;margin-bottom:4px}
.nze .meta-block .sub{display:block;font-size:13px;line-height:1.45;margin-top:6px}
.nze .meta-block .src{display:block;font-size:12px;margin-top:5px}


.nze .cols{display:grid;grid-template-columns:308px minmax(0,1fr);gap:32px;align-items:start;margin-top:48px}
@media(max-width:980px){.nze .cols{grid-template-columns:1fr}}
.nze .rail{position:sticky;top:80px;padding:20px;max-height:calc(100vh - 104px);overflow-y:auto;
  overscroll-behavior:contain}
.nze .rail::-webkit-scrollbar{width:8px}
.nze .rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.nze details{border-top:1px solid var(--line-soft);padding-top:12px;margin-top:4px}
.nze details summary{cursor:pointer;font-size:14px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}
.nze details summary::-webkit-details-marker{display:none}
.nze details summary::after{content:"+";color:var(--ink-muted);font-weight:400;font-size:17px}
.nze details[open] summary::after{content:"−"}
/* Bis 19.10.2026 wurde hier nur position zurueckgesetzt, max-height und
   overflow-y blieben stehen. Auf dem Telefon hatte das Formular dadurch einen
   eigenen Scrollbalken: 1063px Inhalt in 706px Kasten, also ein Drittel der
   Felder unerreichbar, und beim Wischen scrollte der Kasten statt der Seite. */
@media(max-width:980px){
  .nze .rail{position:static;max-height:none;overflow-y:visible}
}

/* Das Diagramm hat ein Seitenverhaeltnis von 800 zu 320. Bei 375px Breite
   blieben davon 261 mal 104 Pixel uebrig, also unlesbar. Es bekommt deshalb
   dieselbe Behandlung wie die breiten Tabellen: Mindestbreite plus waagerecht
   scrollender Rahmen. Der Tooltip haengt am Hover und fehlt auf dem Telefon
   ohnehin, hier geht also nichts verloren. */
@media(max-width:760px){
  .nze .chartpos{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nze .chartpos svg.chart{min-width:560px}
  .nze .chartcard{padding:18px 16px 14px}
}
.nze .rail h3{font-size:14px;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.nze fieldset{border:0;padding:0;margin:0 0 26px}
.nze fieldset:last-child{margin-bottom:0}
.nze label.f{display:block;margin-bottom:14px}
.nze label.f>span{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:5px}
.nze label.f .hint{color:var(--ink-muted);font-size:13px}
.nze input[type=number],.nze select{width:100%;font-family:inherit;font-size:15px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);
  font-variant-numeric:tabular-nums;transition:border-color .15s}
.nze input:focus,.nze select:focus{outline:none;border-color:var(--green-bright)}
.nze .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nze .srange{display:flex;align-items:center;gap:10px}
.nze .srange input[type=range]{flex:1;accent-color:var(--green-bright);min-width:0}
.nze .srange output{font-size:14px;min-width:46px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.nze .notebox{font-size:13px;line-height:1.5;padding:10px 12px;border-radius:10px;
  background:var(--green-pale);color:var(--green)}
.nze .notebox.plain{background:var(--surface);color:var(--ink-soft)}

.nze .scrub{padding:20px 22px 22px;margin-bottom:20px}
.nze .scrub .top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.nze .scrub .yr{font-size:32px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.nze .scrub input[type=range]{width:100%;accent-color:var(--green-bright)}
.nze .ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-muted);margin-top:6px;font-variant-numeric:tabular-nums}

.nze .tag{display:inline-block;white-space:nowrap;line-height:1.35}
.nze .tag-yes{background:var(--green-pale);color:var(--green);font-weight:500}
.nze .tag-part{background:var(--amber-pale);color:var(--amber);border:1px solid var(--amber);font-weight:600}
.nze .tag-no{background:var(--red-pale,#f8ece9);color:var(--red,#96342c);font-weight:500}
.nze .tag-open{background:var(--neutral-pale);color:var(--neutral)}

.nze .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.nze table{border-collapse:collapse;width:100%;min-width:820px;font-size:15px}
.nze th,.nze td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.nze thead th{font-size:13px;color:var(--ink-muted);font-weight:500;border-bottom:1px solid var(--line);line-height:1.35}
.nze thead th .sub{display:block;font-size:12px;color:var(--ink-muted)}
.nze tbody tr:last-child td{border-bottom:0}
.nze td.m{font-weight:500;min-width:216px;color:var(--ink)}
.nze td.m .meta{display:block;font-weight:400;font-size:13px;color:var(--ink-muted);margin-top:3px}
.nze td .note{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:5px;line-height:1.4;max-width:26ch}
.nze td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.nze tr.hl td{background:var(--blue-pale)}

.nze .chartcard{padding:22px 24px 16px}
.nze .legend{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);margin-bottom:12px}
.nze .legend .k{display:inline-flex;align-items:center;gap:8px}
.nze .legend .sw{width:12px;height:12px;border-radius:4px;flex:none}
.nze svg.chart{display:block;width:100%;height:auto;overflow:visible}
.nze .gl{stroke:var(--line-soft);stroke-width:1}
.nze .ax{stroke:var(--line);stroke-width:1}
.nze .axt{fill:var(--ink-muted);font-family:inherit;font-size:12px}
.nze .mk{stroke:var(--ink-muted);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.nze .mkt{fill:var(--ink-soft);font-family:inherit;font-size:12px;font-weight:500}
.nze .chartpos{position:relative}
.nze .tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--white);font-size:13px;
  padding:9px 12px;border-radius:10px;opacity:0;transition:opacity .1s;white-space:nowrap;z-index:20;
  font-variant-numeric:tabular-nums;line-height:1.55;box-shadow:0 6px 18px rgba(20,32,26,.12)}

.nze .finds{display:flex;flex-direction:column;gap:14px}
.nze .finding{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:box-shadow .15s}
.nze .finding:hover{box-shadow:0 6px 18px rgba(20,32,26,.06)}
.nze .finding .h{font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-bottom:8px}
.nze .finding p{font-size:15px;color:var(--ink-soft);line-height:1.55;max-width:76ch}
.nze .finding .cite{font-size:12.5px;color:var(--ink-muted);margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}

.nze .togs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.nze .tog{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.nze button[role=switch]{appearance:none;width:40px;height:23px;border-radius:100px;border:1px solid var(--line-strong);
  background:var(--surface);position:relative;cursor:pointer;flex:none;padding:0;margin-top:2px;transition:background .16s,border-color .16s}
.nze button[role=switch]::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--ink-muted);transition:transform .16s,background .16s}
.nze button[role=switch][aria-checked=true]{background:var(--green-pale);border-color:var(--green-bright)}
.nze button[role=switch][aria-checked=true]::after{transform:translateX(17px);background:var(--green-bright)}
.nze .tog .t{font-size:15px;font-weight:500;margin-bottom:3px;line-height:1.35}
.nze .tog .d{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.nze .tog .d code{font-family:inherit;font-weight:500;color:var(--ink)}

.nze .srcs{columns:2;column-gap:44px;font-size:15px;color:var(--ink-soft);list-style:none}
@media(max-width:760px){.nze .srcs{columns:1}}
.nze .srcs li{break-inside:avoid;margin-bottom:12px;line-height:1.5}
.nze .srcs a{color:var(--green);text-decoration:none}
.nze .srcs a:hover{text-decoration:underline}
.nze .vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ═══════════ Standardansicht: Formular, Knopf, Ergebnis ═══════════
   Seit 19.10.2026, dritter Anlauf. Vorher lagen Hero und Werkzeug in
   verschieden breiten Containern (1200 gegen 860), die linken Kanten standen
   also um knapp 100px versetzt. Jetzt teilen sich alle Teile EINE Spalte.
   Mobil zuerst gebaut, ab 640px zweispaltig. */
/* Rand 32px wie ueberall sonst. Mit 24px stand das Werkzeug 8px dichter am
   Rand als jede andere Seite und wirkte dadurch wie ein Fremdkoerper
   (Hinweis Max, 19.10.2026, nachgemessen gegen /projects/). */
.nze .nze-col{max-width:920px;margin:0 auto;padding:0 32px}
.nze .nze-head{padding:72px 32px 30px}
@media(min-width:720px){.nze .nze-head{padding:84px 32px 34px}}
.nze .nze-head h1{margin-bottom:14px;max-width:18ch;line-height:1.1}
.nze .nze-lead{font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
/* Der Analyseteil lief in der breiten Standardspalte und sprang damit aus der
   Flucht des Werkzeugs. Auf dieselbe Breite gezogen. */
.nze #advanced .container{max-width:920px}

/* ─── Eingabekarte ─── */
.nze .nze-panel{padding:24px 20px 22px}
@media(min-width:720px){.nze .nze-panel{padding:30px 32px 28px}}
.nze .nze-panel-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line-soft)}
.nze .nze-panel-top h2{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0;max-width:none}
.nze .nze-presets{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nze .nze-presets-lbl{font-size:13px;color:var(--ink-muted);white-space:nowrap}
.nze .nze-presets .filters{gap:6px}
.nze .nze-presets .filter{font-size:13px;padding:6px 12px}

.nze .nze-grid{display:grid;grid-template-columns:1fr;gap:0 20px}
.nze .nze-grid .f{margin-bottom:18px}
@media(min-width:640px){
  .nze .nze-grid{grid-template-columns:1fr 1fr}
  .nze .nze-grid .nze-span2{grid-column:1 / -1}
}
.nze .nze-note{font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin:2px 0 0;max-width:68ch}

/* ─── Advanced mode, am Formular statt hinter dem Ergebnis ─── */
.nze details.nze-adv{border-top:1px solid var(--line-soft);margin-top:22px;padding-top:0}
.nze details.nze-adv>summary{font-size:14px;font-weight:500;color:var(--ink-soft);padding:15px 0}
.nze details.nze-adv[open]>summary{color:var(--ink)}
.nze .nze-adv-body{padding:2px 0 14px}
/* Verschachtelte Gruppen eine Stufe leiser als der Aufklapper darueber. */
.nze .nze-adv-body details{border-top:1px solid var(--line-soft);margin-top:0}
.nze .nze-adv-body details summary{font-size:13.5px;font-weight:400;color:var(--ink-muted);padding:12px 0}
.nze .nze-adv-body details[open] summary{color:var(--ink-soft)}
.nze .nze-adv-body fieldset{margin-bottom:18px}

.nze .nze-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:22px;margin-top:4px}
.nze .nze-actions .btn-dark{border:0;cursor:pointer;font-size:16px;padding:13px 30px}

/* ─── Ergebnis ─── */
.nze #result{margin-top:44px}
.nze #result>h2{font-size:clamp(22px,3.2vw,30px);font-weight:500;letter-spacing:-.025em;
  color:var(--ink);line-height:1.3;max-width:24ch;margin:0 0 20px}
.nze .nze-tiles{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.nze .nze-tiles{grid-template-columns:1fr 1fr}}
.nze .nze-tile{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.nze .nze-tile .lbl{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted)}
.nze .nze-tile .num{display:block;font-size:30px;font-weight:500;letter-spacing:-.03em;color:var(--ink);
  line-height:1.15;margin:5px 0 7px;font-variant-numeric:tabular-nums}
.nze .nze-tile .sub{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.nze .nze-tile .src{display:block;font-size:12px;color:var(--ink-muted);margin-top:6px}

.nze .nze-verdict{margin-top:12px;padding:22px 24px;font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.nze .nze-verdict-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);margin-bottom:10px}
.nze .nze-v-num{font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}

.nze .nze-next{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.nze .nze-next .btn-outline{cursor:pointer;font-family:inherit}
.nze .nze-small{font-size:13px;color:var(--ink-muted);margin-top:18px;max-width:72ch;line-height:1.55}


/* ─── Die Luecke, ueber dem Formular ───
   Drei Zahlen als Begruendung, warum der Rechner darunter jemanden angeht.
   Seit 19.10.2026, nach Max: "warum sollte das fuer mich wichtig sein?" */
.nze .nze-gap{display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--line);border-radius:18px;background:var(--white);overflow:hidden}
@media(min-width:720px){.nze .nze-gap{grid-template-columns:repeat(3,1fr)}}
.nze .nze-gap-item{padding:20px 22px;border-top:1px solid var(--line-soft)}
.nze .nze-gap-item:first-child{border-top:0}
@media(min-width:720px){
  .nze .nze-gap-item{border-top:0;border-left:1px solid var(--line-soft)}
  .nze .nze-gap-item:first-child{border-left:0}
}
.nze .nze-gap-item .n{display:block;font-size:29px;font-weight:500;letter-spacing:-.03em;
  color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.nze .nze-gap-item .t{display:block;font-size:14px;color:var(--ink-soft);line-height:1.5;margin-top:7px}
/* Die Kernaussage stand bis 19.10.2026 im kleinen grauen Quellentext und ging
   dort unter. Eigene Zeile, in Lesegroesse. */
.nze .nze-point{font-size:17px;line-height:1.6;color:var(--ink);margin:18px 0 0;max-width:68ch}
.nze .nze-gap-src{font-size:12.5px;color:var(--ink-muted);line-height:1.55;margin:12px 0 0;max-width:80ch}

.nze .nze-panel-top>div:first-child{flex:1 1 260px}
.nze .nze-panel-sub{font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin:6px 0 0;max-width:52ch}

/* ─── Einordnung im Ergebnis ─── */
.nze .nze-means{margin-top:14px}
.nze .nze-means-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);margin-bottom:10px}
.nze .nze-mean{background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;margin-bottom:10px}
.nze .nze-mean .h{font-size:16px;font-weight:500;color:var(--ink);line-height:1.4;margin-bottom:7px}
.nze .nze-mean .p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}


/* ─── "Does it count for you?", drei Zeilen vor dem Formular ───
   Beantwortet die Frage, die vor allen Zahlen kommt. Bewusst eine
   Definitionsliste und kein Fliesstext, damit sie ueberflogen werden kann. */
.nze .nze-counts{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.nze .nze-counts-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);margin-bottom:12px}
.nze .nze-counts dl{display:grid;grid-template-columns:1fr;gap:0;margin:0}
@media(min-width:720px){.nze .nze-counts dl{grid-template-columns:170px minmax(0,1fr);column-gap:24px}}
.nze .nze-counts dt{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 0 2px}
@media(min-width:720px){.nze .nze-counts dt{padding:11px 0;border-top:1px solid var(--line-soft)}
  .nze .nze-counts dt:first-of-type{border-top:0}}
.nze .nze-counts dd{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 12px}
@media(min-width:720px){.nze .nze-counts dd{padding:11px 0;margin:0;border-top:1px solid var(--line-soft)}
  .nze .nze-counts dd:first-of-type{border-top:0}}