@font-face{font-family:Archivo;font-weight:900;font-display:swap;src:url(/fonts/archivo-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
 --papier:#EFEDE6; --papier-hell:#F7F6F2; --tinte:#101310; --gruen:#16A86B; --kupfer:#E2621C; --grau:#6E7269;
 --linie:rgba(16,19,16,.16); --band:#101310; --band-text:#EFEDE6; --band-grau:#9a9e96; --band-linie:rgba(255,255,255,.16);
 --korn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.36'/></svg>");
 --kopf:Archivo,"Arial Black",Impact,system-ui,sans-serif; --text:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:Plex,ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --papier:#131613; --papier-hell:#1A1E1A; --tinte:#ECEAE3; --grau:#9A9E96; --linie:rgba(236,234,227,.16);
 --band:#ECEAE3; --band-text:#131613; --band-grau:#5d615a; --band-linie:rgba(16,19,16,.16);}}
:root[data-theme="dark"]{
 --papier:#131613; --papier-hell:#1A1E1A; --tinte:#ECEAE3; --grau:#9A9E96; --linie:rgba(236,234,227,.16);
 --band:#ECEAE3; --band-text:#131613; --band-grau:#5d615a; --band-linie:rgba(16,19,16,.16);}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--papier);color:var(--tinte);font-family:var(--text);font-size:17px;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background-image:var(--korn);opacity:.45;mix-blend-mode:multiply;pointer-events:none;z-index:50}
.inner{max-width:980px;margin:0 auto;padding:0 22px}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.label b{color:var(--kupfer);font-weight:400}
h1,h2,h3{font-family:var(--kopf);text-transform:uppercase;font-weight:900;letter-spacing:-.035em}
h1{font-size:clamp(2.7rem,10.5vw,6.2rem);line-height:.86}
h2{font-size:clamp(1.9rem,7vw,3.4rem);line-height:.9;font-weight:800;letter-spacing:-.025em}
h3{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;line-height:1.05}
p.lead{font-size:clamp(1.05rem,2.6vw,1.25rem);max-width:34em}

.kopf{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--linie)}
.marke{font-family:var(--kopf);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:22px}
.plakette{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--tinte);padding:5px 9px;display:flex;gap:8px;align-items:center}
.plakette i{width:7px;height:7px;background:var(--gruen);display:block;animation:puls 2.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.25}}

.einstieg{display:grid;grid-template-columns:1fr;gap:10px;padding:34px 0 46px}
.einstieg .figur{width:min(58vw,250px);justify-self:end;margin:-8px -6px -6px 0;cursor:pointer;touch-action:manipulation}
.einstieg p.lead{margin-top:22px}
@media(min-width:760px){.einstieg{grid-template-columns:1.5fr 1fr;align-items:end;padding:64px 0 70px}
 .einstieg .figur{width:100%;max-width:330px;margin:0;grid-row:1/3;grid-column:2}}

.ar-figur{width:100%;height:auto;display:block;overflow:visible}
.ar-figur .grund{fill:var(--papier);stroke:none}
.ar-figur .bau{fill:none;stroke:var(--tinte);stroke-linecap:round;stroke-linejoin:round}
.ar-figur .schatten{fill:none;stroke:var(--grau);stroke-linecap:round}
.ar-figur .kupfer{fill:none;stroke:var(--kupfer);stroke-linecap:round}
.ar-figur .voll{fill:var(--gruen)}
.ar-koerper{transform-box:view-box;transform-origin:160px 217px;animation:wippen 3.6s ease-in-out infinite}
@keyframes wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-.6deg)}}
.ar-pupille{transition:transform .18s ease-out}
.ar-pupille path{transform-box:fill-box;transform-origin:center}
.blinzeln .ar-pupille path{animation:zu .22s ease-in-out}
@keyframes zu{50%{transform:scaleY(.12)}}
.ar-bund{transform-box:view-box;transform-origin:228px 118px;animation:baumeln 2.8s ease-in-out infinite}
@keyframes baumeln{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-4deg)}}
.ar-deckel{transform-box:view-box;transform-origin:99px 96px}
.huepf .ar-koerper{animation:huepfen .7s cubic-bezier(.3,.7,.3,1)}
.huepf .ar-deckel{animation:deckel .7s ease-out}
@keyframes huepfen{0%{transform:translateY(0)}25%{transform:translateY(4px) scaleY(.96)}55%{transform:translateY(-22px) rotate(-3deg)}80%{transform:translateY(0)}90%{transform:translateY(2px) scaleY(.98)}}
@keyframes deckel{40%{transform:rotate(-14deg)}75%{transform:rotate(0)}}

.band{background:var(--band);color:var(--band-text);padding:56px 0;position:relative}
.band .label{color:var(--band-grau)}
.heute{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--band-linie)}
.heute>div{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-bottom:1px solid var(--band-linie)}
.heute .n{font-family:var(--mono);font-size:12px;color:var(--kupfer);padding-top:4px}
.heute p{color:var(--band-grau);font-size:15.5px;margin-top:3px}
@media(min-width:760px){.heute{grid-template-columns:repeat(3,1fr);gap:0 28px;border-top:0}
 .heute>div{grid-template-columns:1fr;border-top:1px solid var(--band-linie)}}

.abschnitt{padding:62px 0}
.waehler{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0 0;border:1px solid var(--tinte)}
.waehler button{font:inherit;font-family:var(--mono);font-size:11px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--tinte);border:0;border-right:1px solid var(--tinte);padding:13px 6px;cursor:pointer;transition:background .2s,color .2s}
.waehler button:last-child{border-right:0}
.waehler button[aria-selected="true"]{background:var(--tinte);color:var(--papier)}
.waehler button:focus-visible{outline:3px solid var(--gruen);outline-offset:-3px}
.tafel{border:1px solid var(--tinte);border-top:0;background:var(--papier-hell);padding:26px 20px 8px}
.tafel[hidden]{display:none}
.tafel .satz{font-family:var(--kopf);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.35rem,4.6vw,2rem);line-height:1;margin-bottom:20px}
.tafel .satz em{font-style:normal;color:var(--gruen)}
.punkte{display:grid;gap:0}
.punkte>div{display:grid;grid-template-columns:34px 1fr;padding:14px 0;border-top:1px solid var(--linie)}
.punkte .n{font-family:var(--mono);font-size:12px;color:var(--kupfer);padding-top:3px}
.punkte p{font-size:15.5px;color:var(--grau);margin-top:2px}
@media(min-width:760px){.tafel{padding:34px 34px 14px}.punkte{grid-template-columns:repeat(3,1fr);gap:0 26px}.punkte>div{grid-template-columns:1fr}}
.tafel.rein .satz,.tafel.rein .punkte>div{animation:rein .45s ease-out both}
.tafel.rein .punkte>div:nth-child(2){animation-delay:.06s}.tafel.rein .punkte>div:nth-child(3){animation-delay:.12s}
@keyframes rein{from{opacity:0;transform:translateY(8px)}}

.raster{background:var(--papier-hell);background-image:linear-gradient(var(--linie) 1px,transparent 1px),linear-gradient(90deg,var(--linie) 1px,transparent 1px);background-size:64px 64px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.schritte{display:grid;gap:14px;margin-top:30px}
.schritt{background:var(--papier);border:1px solid var(--tinte);padding:20px 18px 18px;position:relative}
.schritt .z{font-family:var(--kopf);font-weight:900;font-size:3rem;line-height:.8;color:var(--kupfer);display:block;margin-bottom:12px}
.schritt p{font-size:15.5px;color:var(--grau);margin-top:6px}
.schritt .zitat{font-family:var(--mono);font-size:13px;color:var(--tinte);background:var(--papier-hell);border-left:3px solid var(--gruen);padding:8px 10px;margin-top:10px}
@media(min-width:760px){.schritte{grid-template-columns:repeat(4,1fr)}}

.grenzen{display:grid;gap:0;margin-top:28px}
.grenzen>div{padding:16px 0 16px 34px;border-top:1px solid var(--linie);position:relative}
.grenzen>div::before{content:"";position:absolute;left:0;top:23px;width:16px;height:2px;background:var(--kupfer)}
.grenzen p{color:var(--grau);font-size:15.5px;margin-top:2px}
@media(min-width:760px){.grenzen{grid-template-columns:repeat(3,1fr);gap:0 28px}}

.schluss h2{max-width:13em}
.schluss p.lead{margin-top:18px;color:var(--band-grau)}
.kontakt{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.adresse{font-family:var(--mono);font-size:clamp(1rem,4.4vw,1.35rem);border:1px solid var(--band-text);padding:14px 16px;user-select:all;-webkit-user-select:all;color:var(--band-text);text-decoration:none}
.kopieren{font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:var(--gruen);color:#fff;border:0;padding:14px 18px;cursor:pointer;transition:transform .15s}
.kopieren:active{transform:scale(.97)}
.fuss{padding:24px 0 34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

.zeig{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.zeig.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.zeig{opacity:1;transform:none}html{scroll-behavior:auto}}