/* /homepages/pj-dpf/htdocs/css/wissen.css
 * 2026-11-10: knowledge page "DPF-Wissen & Werte erklärt". Uses the variables from template.css, no external assets.
 */
.page-wissen .wissen-hero h1{max-width:900px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.toc a{padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:650;background:rgba(255,255,255,.02)}
.toc a:hover,.toc a:focus-visible{color:var(--text);border-color:rgba(66,211,165,.45)}
.wissen-block{scroll-margin-top:86px}
.val,.neg-card{scroll-margin-top:90px}
.wissen-block .section-intro>p:last-child{color:var(--muted);line-height:1.8}

/* exhaust chain diagram */
.chain-figure{margin:10px 0 34px;padding:clamp(14px,3vw,30px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(140deg,#0f212d,#0a1821)}
.chain{display:block;width:100%;height:auto}
.chain .pipe{stroke:#5d7586;stroke-width:5;fill:none}
.chain .egr{stroke:#ffa45c;stroke-width:2.5;fill:none;stroke-dasharray:7 6}
.chain .egr-t{fill:#ffa45c}
.chain .box{fill:#132a37;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.chain .box.dpf{fill:rgba(66,211,165,.14);stroke:var(--accent);stroke-width:2}
.chain .box.scr{fill:rgba(108,184,255,.12);stroke:#6cb8ff}
.chain .inj{stroke:#6cb8ff;stroke-width:3}
.chain .inj-dot{fill:#6cb8ff}
.chain text{font-family:inherit;text-anchor:middle}
.chain .lbl{fill:var(--text);font-size:18px;font-weight:760}
.chain .lbl-s{fill:var(--muted);font-size:13px}
.chain .sens circle{fill:#ffd166;stroke:#091118;stroke-width:2}
.chain .sens path{stroke:rgba(255,209,102,.55);stroke-width:1.5;fill:none;stroke-dasharray:3 4}
.chain .sens text{fill:#ffd166;font-size:13px;font-weight:700}
.chain .sens.dp path{stroke-dasharray:none;stroke:#ffd166}
.chain .sens.nox circle{fill:#c79bff}.chain .sens.nox text{fill:#c79bff}.chain .sens.nox path{stroke:rgba(199,155,255,.55)}
.chain .sens.pm circle{fill:#ff8fa3}.chain .sens.pm text{fill:#ff8fa3;text-anchor:start}.chain .sens.pm path{stroke:rgba(255,143,163,.55)}
.chain-figure figcaption{margin-top:12px;color:#7f95a4;font-size:.85rem}

.fact-grid,.regen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fact,.regen-card{border:1px solid var(--line);border-radius:18px;padding:24px;background:linear-gradient(145deg,rgba(23,42,54,.9),rgba(11,26,37,.82));min-width:0}
.fact h3,.regen-card h3{margin:0 0 10px;font-size:1.12rem;letter-spacing:-.01em}
.regen-card h3{margin-top:16px}
.fact p,.regen-card p{margin:0;color:var(--muted);line-height:1.7;font-size:.95rem}
.regen-card.is-heat .feature-index{color:#ffa45c}
.regen-card.is-blue .feature-index{color:#6cb8ff}
.tip-box{margin-top:18px;padding:24px 28px;border-radius:18px;border:1px solid rgba(66,211,165,.3);background:var(--accent-soft)}
.tip-box h3{margin:0 0 10px;font-size:1.08rem}
.tip-box ul{margin:0;padding-left:20px;color:#cfdbe3;line-height:1.75}

/* tile anatomy */
.tile-demo{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,48px);align-items:start}
.tile-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;border-radius:20px;background:#eef1f5}
.mock-tile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 8px 8px;border:1px solid #cdd3dc;border-radius:14px;background:#fff;color:#1d232b;min-width:0}
.mt-top{align-self:flex-start;font-size:.62rem;font-weight:700;color:#3b4350}
.mt-title{margin-top:8px;font-weight:700;font-size:.92rem;line-height:1.2}
.mt-value{margin-top:6px;font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.mt-value.is-std{color:#1f6fc5}
.mt-sec{font-size:.72rem;font-weight:600;color:#3b4350;min-height:1em}
.mt-src{align-self:flex-start;margin-top:8px;font-size:.62rem;font-weight:800;color:#1f6fc5}
.legend{margin:0;display:grid;gap:2px}
.legend>div{display:grid;grid-template-columns:185px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.legend dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;color:var(--accent);font-weight:700}
.legend .dot{display:inline-block;width:11px;height:11px;margin-right:8px;border-radius:50%;vertical-align:0;border:1px solid rgba(255,255,255,.5)}
.legend .dot-oem{background:#1d232b}
.legend .dot-std{background:#1f6fc5}
.legend dd{margin:0;color:var(--muted);line-height:1.65;font-size:.94rem}
.state-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.state{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.state-val{flex:none;min-width:58px;padding:8px 10px;border-radius:10px;text-align:center;font-weight:800;font-size:1.05rem;background:#eef1f5;color:#1d232b}
.state-val.is-wait{color:#9a6b00;font-style:italic;font-weight:600}
.state strong{display:block;margin-bottom:4px}
.state p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}

/* glossary */
.val-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.val{padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,rgba(20,38,50,.85),rgba(11,24,34,.8));min-width:0}
.val header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.val h3{margin:0;font-size:1.06rem;line-height:1.3;letter-spacing:-.01em}
.unit{flex:none;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:800;white-space:nowrap}
.val p{margin:10px 0 0;color:var(--muted);line-height:1.7;font-size:.94rem}
.val p.app-label{margin-top:4px;font-size:.78rem;color:#7f95a4}
.val:target{border-color:rgba(66,211,165,.6)}

/* negative values */
.neg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.neg-card{padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);min-width:0}
.neg-card.is-main{grid-column:1/-1;padding:clamp(24px,4vw,40px);border-color:rgba(66,211,165,.35);background:linear-gradient(110deg,#112632,#0b1923)}
.neg-val{display:inline-block;padding:4px 12px;border-radius:10px;background:rgba(255,164,92,.12);color:#ffa45c;font-weight:800;font-variant-numeric:tabular-nums}
.neg-card.is-main .neg-val{font-size:1.6rem}
.neg-card h3{margin:14px 0 8px;font-size:1.08rem}
.neg-card.is-main h3{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.neg-card p{margin:0 0 10px;color:var(--muted);line-height:1.7;font-size:.94rem}
.neg-card.is-main p{max-width:880px;font-size:1rem}
.neg-verdict{padding:14px 16px;border-left:3px solid var(--accent);background:rgba(66,211,165,.07);border-radius:0 10px 10px 0;color:#d5e1e8 !important}

/* NOx */
.nox-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(24px,5vw,60px);padding:clamp(26px,5vw,56px);border:1px solid var(--line);border-radius:23px;background:linear-gradient(110deg,#17203a,#0b1923)}
.nox-panel h2{font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.04em;margin:0 0 18px}
.nox-panel p:not(.eyebrow){color:var(--muted);line-height:1.8}
.nox-panel .eyebrow{color:#c79bff}
.nox-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:center}
.nox-steps li{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.nox-steps span{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:rgba(199,155,255,.16);color:#c79bff;font-weight:800}
.nox-steps p{margin:4px 0 0;font-size:.9rem;color:var(--muted)}

@media(max-width:920px){
 .fact-grid,.regen-grid,.state-grid,.neg-grid{grid-template-columns:1fr 1fr}
 .tile-demo,.nox-panel{grid-template-columns:1fr}
 .tile-wrap{max-width:440px}
}
@media(max-width:650px){
 .fact-grid,.regen-grid,.state-grid,.neg-grid,.val-grid{grid-template-columns:1fr}
 .legend>div{grid-template-columns:1fr;gap:4px}
 .chain-figure{overflow-x:auto}
 .chain{min-width:560px}
}