/* Kerf & Korn — Industrierevue. Graphit, Kalkweiß, Schwefelgelb. Space Grotesk / Source Serif 4. */
:root{
 --bg:#f4f2ec;--paper:#fbfaf7;--ink:#17191b;--ink-2:#2b2f33;--muted:#575c61;--line:#d9d5ca;--line-2:#bfbab0;
 --graphite:#1b1e21;--graphite-2:#2a2e32;--on-dark:#efede6;--on-dark-2:#b9b6ad;
 --sulfur:#e6c419;--sulfur-soft:#f5e9a8;--accent-ink:#6a5500;--link:#5c4a00;--link-hover:#17191b;
 --copper:#b4643a;--steel:#4f6d7a;--moss:#5d6b3a;
 --tint:#eeebe2;--shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px -16px rgba(0,0,0,.25);
 --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
 --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
 --wide:76rem;--text:42rem;--gut:1rem;
 color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
 --bg:#121416;--paper:#181b1e;--ink:#ebe8e0;--ink-2:#d6d3cb;--muted:#a6aaad;--line:#30353a;--line-2:#454b51;
 --graphite:#0c0e0f;--graphite-2:#202428;--on-dark:#efede6;--on-dark-2:#a9a69e;
 --sulfur:#ecd03a;--sulfur-soft:#3a3412;--accent-ink:#ecd03a;--link:#f0d85a;--link-hover:#ffffff;
 --copper:#d98a5f;--steel:#86a9b8;--moss:#a3b371;
 --tint:#1f2326;--shadow:0 1px 0 rgba(0,0,0,.3),0 10px 30px -18px rgba(0,0,0,.8);
 color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1.09rem/1.68 var(--serif);font-optical-sizing:auto;overflow-x:clip}
@media (min-width:48rem){:root{--gut:2rem}body{font-size:1.14rem}}
img{max-width:100%;height:auto;display:block}
.in{max-width:var(--wide);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- Kopf ---------- */
header.site{background:var(--graphite);color:var(--on-dark);border-bottom:3px solid var(--sulfur)}
header.site .in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 2rem;padding-top:.85rem;padding-bottom:.55rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;color:var(--on-dark);text-decoration:none;font:700 1.35rem/1 var(--sans);letter-spacing:-.01em;padding:.25rem 0}
.logo .mk{flex:none;width:1.25rem;height:1.25rem;background:linear-gradient(90deg,var(--sulfur) 0 18%,transparent 18% 41%,var(--sulfur) 41% 59%,transparent 59% 82%,var(--sulfur) 82%);transform:skewX(-14deg)}
.logo .wm b{color:var(--sulfur);font-weight:500;margin:0 .1em}
nav{display:flex;gap:0 1.35rem;font:500 .8rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.09em;width:100%;overflow-x:auto;scrollbar-width:none;padding:.35rem 0 .2rem}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--on-dark-2);text-decoration:none;white-space:nowrap;padding:.45rem 0;border-bottom:2px solid transparent}
nav a:hover{color:#fff;border-bottom-color:var(--sulfur)}
@media (min-width:62rem){
 header.site .in{flex-wrap:nowrap;padding-top:1rem;padding-bottom:1rem}
 nav{width:auto;flex:1;overflow:visible;padding:0}
}
/* Sprachumschalter DE | EN (das generierte a.lang zeigt nur die andere Sprache) */
nav a.lang{position:absolute;top:.85rem;right:var(--gut);display:inline-flex;align-items:stretch;gap:0;padding:0;border:1px solid var(--on-dark-2);border-radius:999px;overflow:hidden;font:700 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--on-dark)}
nav a.lang::before,nav a.lang::after{display:flex;align-items:center;padding:.5rem .7rem}
html[lang="de"] nav a.lang{padding-right:.7rem;gap:.7rem}
html[lang="de"] nav a.lang::before{content:"DE" / "";background:var(--sulfur);color:#17191b}
html[lang="en"] nav a.lang{padding-left:.7rem;gap:.7rem}
html[lang="en"] nav a.lang::after{content:"EN" / "";background:var(--sulfur);color:#17191b}
nav a.lang{align-items:center}
nav a.lang:hover{border-color:var(--sulfur);color:#fff;background:var(--graphite-2)}
@media (min-width:62rem){nav a.lang{position:static;margin-left:auto}}
a:focus-visible,summary:focus-visible{outline:3px solid var(--sulfur);outline-offset:3px;border-radius:2px}
header.site a:focus-visible{outline-color:#fff}

/* ---------- Grundtypografie ---------- */
main.in{padding-top:2rem;padding-bottom:4rem}
main.in>*{max-width:var(--text);margin-left:auto;margin-right:auto}
main.in>.hero,main.in>.kpis,main.in>.feature,main.in>.rail,main.in>.readnext,main.in>figure.lead,main.in>.wide,main.in>.list,main.in>.grid{max-width:none}
main.in>figure.lead,main.in>.wide{max-width:60rem}
main.in>.hero{margin:-2rem calc(50% - 50vw) 0}
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2rem,5.4vw,3.3rem);line-height:1.06;margin:.3rem auto 1rem;letter-spacing:-.03em}
h2{font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.15;margin-top:3.2rem;margin-bottom:.8rem}
main.in>h2{position:relative;padding-top:1.1rem}
main.in>h2::before{content:"";position:absolute;left:0;top:0;width:2.5rem;height:3px;background:var(--sulfur)}
h3{font-size:1.2rem;line-height:1.25;margin-top:2rem;margin-bottom:.4rem}
p,ul,ol,dl,table{margin-top:0;margin-bottom:1.15rem}
li{margin-bottom:.35rem}
li::marker{color:var(--muted)}
strong{font-weight:600}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
a:hover{color:var(--link-hover);text-decoration-color:var(--sulfur);text-decoration-thickness:2px}
.kicker{font:700 .78rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-ink);margin-top:.5rem;margin-bottom:0}
.kicker a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.kicker a::before{content:"";width:.7rem;height:.7rem;background:var(--sulfur)}
.kicker a:hover{text-decoration:underline}
.meta{font:500 .82rem/1.4 var(--sans);letter-spacing:.02em;color:var(--muted);padding-bottom:1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
.meta a{color:var(--muted)}
.lede{font-size:1.28rem;line-height:1.55;color:var(--ink-2);font-weight:400;margin-bottom:1.8rem}
@media (min-width:48rem){.lede{font-size:1.4rem}}
main.in>.lede:first-of-type::first-line{font-weight:600}
figure{margin:2.2rem auto}
figure img{border-radius:2px}
figcaption{font:400 .82rem/1.5 var(--sans);color:var(--muted);margin-top:.6rem;padding-left:.75rem;border-left:2px solid var(--sulfur)}
figcaption a{color:var(--muted)}
figure.lead{margin:0 auto 2.4rem}
figure.lead img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--tint)}
main.in>figure:not(.lead):not(.diagram) img{max-height:32rem;width:auto;margin:0 auto}

/* Tabellen */
table{width:100%;border-collapse:collapse;font:400 .92rem/1.45 var(--sans);display:block;overflow-x:auto;font-variant-numeric:tabular-nums}
@media (min-width:48rem){table{display:table}}
thead th{font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);border-bottom:2px solid var(--ink);background:none}
th,td{text-align:left;vertical-align:top;padding:.65rem .75rem .65rem 0;border-bottom:1px solid var(--line)}
tbody tr:hover td{background:var(--tint)}
td:first-child{font-weight:500}
.src{font:400 .82rem/1.5 var(--sans);color:var(--muted)}
code{font:.88em var(--mono);background:var(--tint);padding:.08em .32em;border-radius:3px}
pre{font:.88rem/1.5 var(--mono);background:var(--tint);padding:1rem;overflow-x:auto;border-left:3px solid var(--sulfur)}
pre code{background:none;padding:0}
dl dt{font:700 1.02rem/1.3 var(--sans);margin-top:1.3rem}
dl dd{margin:.25rem 0 0}
.note{background:var(--tint);border-left:3px solid var(--sulfur);padding:1rem 1.2rem;font-size:.98rem;margin:1.8rem auto}
.note p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem auto}

/* Kennzahlen-Kasten im Artikel */
.facts{background:var(--graphite);color:var(--on-dark);padding:1.4rem 1.3rem 1.2rem;margin:2.2rem auto;border-top:4px solid var(--sulfur)}
.facts h2,.facts .facts-title{font:700 .78rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--sulfur);margin:0 0 1rem;padding:0;border:0}
.facts h2::before{display:none}
.facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:1.1rem 1.4rem;margin:0}
.facts dl>div{border-top:1px solid #3a3f44;padding-top:.7rem}
.facts dt{font:700 clamp(1.7rem,4vw,2.2rem)/1 var(--sans);letter-spacing:-.03em;color:#fff;margin:0 0 .35rem;font-variant-numeric:tabular-nums}
.facts dd{margin:0;font:400 .86rem/1.45 var(--sans);color:var(--on-dark-2)}
.facts a{color:var(--sulfur);white-space:nowrap}
.facts a:hover{color:#fff}

/* Schema (SVG) */
figure.diagram{max-width:60rem;background:var(--paper);border:1px solid var(--line);padding:1.2rem 1rem 1rem}
figure.diagram svg{width:100%;height:auto;display:block}
figure.diagram figcaption{margin-top:.9rem}
.dg-box{fill:var(--tint);stroke:var(--line-2)}
.dg-hl{fill:var(--sulfur)}
.dg-num{font:700 13px var(--sans);fill:#17191b}
.dg-t{font:700 15px var(--sans);fill:var(--ink)}
.dg-s{font:400 12.5px var(--sans);fill:var(--muted)}
.dg-out{font:500 12px var(--sans);fill:var(--accent-ink)}
.dg-line{stroke:var(--ink);stroke-width:1.5;fill:none}
.dg-dash{stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.dg-arrow{fill:var(--ink)}
figure.diagram .dg-v{display:none}
@media (max-width:40rem){figure.diagram .dg-h{display:none}figure.diagram .dg-v{display:block;max-width:22rem;margin:0 auto}}

/* ---------- Startseite ---------- */
.hero{position:relative;width:100vw;min-height:min(86vh,44rem);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--graphite);isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,14,15,.7) 0%,rgba(12,14,15,.35) 55%,rgba(12,14,15,0) 80%),linear-gradient(180deg,rgba(12,14,15,.1) 0%,rgba(12,14,15,.3) 45%,rgba(12,14,15,.9) 100%)}
.hero-in{width:100%;max-width:var(--wide);margin:0 auto;padding:6rem var(--gut) 1.6rem}
.hero .kicker{color:var(--sulfur);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.hero .kicker::before{content:"";width:2rem;height:3px;background:var(--sulfur)}
.hero h1,.display{font-size:clamp(2.4rem,8vw,5rem);line-height:1;letter-spacing:-.04em;color:#fff;margin:0 0 1.2rem;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--sulfur)}
.hero .dek{font-size:1.12rem;line-height:1.55;max-width:38rem;color:#e9e6dd;margin:0}
@media (min-width:48rem){.hero .dek{font-size:1.3rem}}
.hero .credit{align-self:flex-end;margin:0;padding:0 var(--gut) .7rem;font:400 .68rem/1.3 var(--sans);color:rgba(255,255,255,.75);text-align:right}
.hero .credit a{color:inherit}

.kpis{list-style:none;padding:0;margin:0 0 4rem;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;border-bottom:1px solid var(--line)}
@media (min-width:62rem){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpis li{margin:0;padding:1.4rem 0 1.3rem;border-top:1px solid var(--line)}
@media (min-width:36rem){.kpis{gap:0 1.6rem}}
.kpis .num{display:block;font:700 clamp(1.9rem,8.4vw,3.4rem)/1 var(--sans);letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.kpis .num small{font-size:.45em;letter-spacing:-.01em;font-weight:500;margin-left:.12em;color:var(--muted)}
.kpis li::before{content:"";display:block;width:2rem;height:3px;background:var(--sulfur);margin-bottom:1.2rem}
.kpis .what{display:block;font:400 clamp(.86rem,2.5vw,.95rem)/1.45 var(--serif);color:var(--ink-2);margin-bottom:.6rem}
.kpis .src{display:block}
.kpis-head{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin:2.8rem 0 0}
.kpis-head h2{margin:0;padding:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
.kpis-head h2::before{display:none}
.kpis-head p{margin:0;font:400 .82rem/1.4 var(--sans);color:var(--muted)}
main.in>.kpis-head{max-width:none}

.feature{margin:0 0 4.5rem}
.feature>a{display:grid;grid-template-columns:1fr;gap:0;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
@media (min-width:56rem){.feature>a{grid-template-columns:1.35fr 1fr}}
.feature-img{display:block;overflow:hidden;background:var(--tint)}
.feature-img img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.feature>a:hover .feature-img img{transform:scale(1.03)}
.feature-body{display:flex;flex-direction:column;justify-content:center;padding:1.6rem 1.4rem 1.8rem}
@media (min-width:56rem){.feature-body{padding:2.4rem 2.6rem}}
.feature .eyebrow{font:700 .75rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:.9rem}
.feature h2{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .9rem}
.feature p{color:var(--ink-2);margin:0 0 1.3rem;font-size:1.02rem}
.more{font:700 .85rem/1.2 var(--sans);color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.more::after{content:"→";color:var(--accent-ink);transition:transform .2s}
.feature>a:hover .more::after{transform:translateX(4px)}
.feature>a:hover h2{text-decoration:underline;text-decoration-color:var(--sulfur);text-decoration-thickness:3px;text-underline-offset:.15em}

.rail{margin:0 0 4.5rem}
.rail-head{display:grid;grid-template-columns:1fr;gap:.4rem 2rem;align-items:end;border-top:2px solid var(--ink);padding-top:1.1rem;margin-bottom:1.6rem}
@media (min-width:48rem){.rail-head{grid-template-columns:1fr auto}.rail-head .idx{grid-column:1/-1}}
.rail-head .idx{font:700 .78rem/1 var(--sans);letter-spacing:.12em;color:var(--accent-ink)}
.rail-head h2{margin:0;padding:0;font-size:clamp(1.5rem,3vw,2rem)}
.rail-head h2::before{display:none}
.rail-head p{margin:0;color:var(--muted);font-size:.98rem;max-width:36rem}
.rail-head a{font:700 .82rem/1.2 var(--sans);white-space:nowrap;color:var(--ink)}
.rail-head a::after{content:" →";color:var(--accent-ink)}

.cards{display:grid;grid-template-columns:1fr;gap:2.2rem 1.6rem}
@media (min-width:40rem){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card .ph{display:block;overflow:hidden;margin-bottom:.9rem;background:var(--tint);border-radius:2px}
.card .ph img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card h3{font-size:1.18rem;line-height:1.22;letter-spacing:-.015em;margin:.45rem 0 .45rem}
.card:hover h3{text-decoration:underline;text-decoration-color:var(--sulfur);text-decoration-thickness:2px;text-underline-offset:.15em}
.card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.card:focus-visible{outline:3px solid var(--sulfur);outline-offset:4px}
.label{display:inline-flex;align-items:center;gap:.45rem;font:700 .7rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.label::before{content:"";width:.55rem;height:.55rem;background:var(--sulfur)}
.label-slurry::before,.label-en-slurry::before{background:var(--copper)}
.label-werkstoff::before,.label-en-material::before{background:var(--steel)}
.label-umwelt::before,.label-en-industry::before{background:var(--moss)}

.intro{display:grid;grid-template-columns:1fr;gap:1rem 3rem;max-width:none!important;margin:0 0 4.5rem;padding-top:1.1rem;border-top:2px solid var(--ink)}
@media (min-width:56rem){.intro{grid-template-columns:1fr 1.6fr}}
.intro h2{margin:0;padding:0;font-size:clamp(1.5rem,3vw,2rem)}
.intro h2::before{display:none}
.intro p{margin:0 0 1rem}

.rail.split{display:grid;gap:0 3rem}
@media (min-width:60rem){
 .rail.split{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);border-top:2px solid var(--ink);padding-top:1.1rem}
 .rail.split .rail-head{display:block;border:0;padding:0;margin:0}
 .rail.split .rail-head .idx{display:block;margin-bottom:.9rem}
 .rail.split .rail-head p{margin:.8rem 0 1.2rem}
 .rail.split .cards{grid-template-columns:1fr 1fr}
 .cards.lead-first>.card:first-child{grid-column:span 2}
 .cards.lead-first>.card:first-child h3{font-size:1.55rem;letter-spacing:-.025em}
}

/* Rubrikseiten und Listen */
.grid{list-style:none;padding:0;display:grid;gap:1px;grid-template-columns:1fr;background:var(--line);border:1px solid var(--line)}
@media (min-width:40rem){.grid{grid-template-columns:1fr 1fr}}
.grid li{margin:0}
.grid a{display:block;height:100%;padding:1.3rem 1.2rem;background:var(--paper);color:inherit;text-decoration:none}
.grid a:hover{background:var(--tint)}
.grid strong{display:block;font:700 1.15rem/1.2 var(--sans);margin-bottom:.35rem}
.grid span{font-size:.95rem;color:var(--muted);line-height:1.45}
.list{list-style:none;padding:0;max-width:60rem!important}
.list li{display:grid;grid-template-columns:1fr;gap:.8rem 1.6rem;padding:1.4rem 0;border-bottom:1px solid var(--line);margin:0}
.list li:first-child{border-top:2px solid var(--ink)}
@media (min-width:40rem){.list li.has-img{grid-template-columns:14rem 1fr}}
.list .ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.list li a{font:700 1.2rem/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.list li a:hover{text-decoration:underline;text-decoration-color:var(--sulfur);text-decoration-thickness:2px}
.list li p{margin:.4rem 0 0;color:var(--muted);font-size:.97rem}

/* Weiterlesen */
.readnext{margin:5rem auto 0;max-width:var(--wide)}
.readnext-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;border-top:2px solid var(--ink);padding-top:1.1rem;margin-bottom:1.6rem}
.readnext-head h2{margin:0;padding:0;font-size:clamp(1.4rem,3vw,1.8rem)}
.readnext-head h2::before{display:none}
.readnext-head a{font:700 .82rem/1.2 var(--sans);color:var(--ink)}
.readnext-head a::after{content:" →";color:var(--accent-ink)}

/* Fuß */
footer.site{background:var(--graphite);color:var(--on-dark-2);font:400 .86rem/1.6 var(--sans);padding:2.4rem 0 2.8rem;border-top:3px solid var(--sulfur)}
footer.site a{color:var(--on-dark)}
footer.site a:hover{color:var(--sulfur)}
.fnote{margin:.6rem 0 0}

/* Einheitliches Farbbild aller Fotos: etwas entsättigt, leicht kühler und kontrastreicher */
.hero>img,figure.lead img,.card .ph img,.feature-img img,.list .ph img{filter:saturate(.78) contrast(1.06) brightness(.98) sepia(.06) hue-rotate(-8deg)}
@media (prefers-color-scheme:dark){.hero>img,figure.lead img,.card .ph img,.feature-img img,.list .ph img{filter:saturate(.74) contrast(1.06) brightness(.9) sepia(.06) hue-rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{header.site nav,.readnext,footer.site{display:none}body{background:#fff;color:#000}}