:root{
  color-scheme: light;
  --graphit:#1A1D21; --graphit-2:#22262B; --papier:#F5F6F7; --stahl:#565E66;
  --haar:#C7CBCF; --haar-dunkel:#353A40; --messing:#B08D57; --messing-tief:#7A5E2E;
  --text-hell:#E6E8EA; --text-hell-2:#A3AAB1;
  --sans:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --max:1180px; --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--graphit);color:var(--text-hell);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(72px,10vw,128px)}
.dunkel{background:var(--graphit);color:var(--text-hell)}
.dunkel-2{background:var(--graphit-2);color:var(--text-hell)}
.hell{background:var(--papier);color:var(--graphit)}
.hell .leise{color:var(--stahl)}
.dunkel .leise,.dunkel-2 .leise{color:var(--text-hell-2)}
.wortmarke{display:inline-flex;align-items:center;text-decoration:none}
.wortmarke img{display:block;height:auto}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.dunkel .label,.dunkel-2 .label{color:var(--messing)}
.hell .label{color:var(--messing-tief)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(3.1rem,8.4vw,6.6rem);line-height:.98}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08}
h3{font-size:1.1rem;font-weight:500;letter-spacing:0;line-height:1.35}
p{margin:0;max-width:62ch}
.kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.kopf .label{grid-column:1/-1;margin-bottom:-8px}
@media (max-width:820px){.kopf{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;font:500 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-messing{background:var(--messing);color:var(--graphit)}
.btn-messing:hover{background:#C29E66}
.btn-linie{border-color:var(--haar-dunkel);color:var(--text-hell);position:relative;overflow:hidden;z-index:0}
.btn-linie::before{content:"";position:absolute;inset:0;background:var(--messing);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn-linie:hover{color:var(--graphit);border-color:var(--messing)}
.btn-linie:hover::before{transform:scaleX(1)}
.pfeil{transition:transform .2s}
.btn:hover .pfeil{transform:translateX(3px)}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(26,29,33,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--haar-dunkel)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
header.nav .wortmarke{min-height:44px}
@media (max-width:400px){header.nav .wortmarke img{width:170px}}
header.nav nav{display:flex;gap:28px;margin-left:auto}
header.nav nav a{font-size:14px;color:var(--text-hell-2);text-decoration:none}
header.nav nav a:hover{color:var(--text-hell)}
header.nav .btn{padding:11px 16px;font-size:14px}
@media (max-width:900px){header.nav nav{display:none}}
.hero{padding-block:clamp(56px,8vw,104px) clamp(56px,7vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,80px);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
@media (min-width:961px){.hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;color:var(--text-hell-2);margin-top:28px;max-width:48ch}
.hero .lead strong{color:var(--text-hell);font-weight:400}
.hero .aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero .hinweis{margin-top:18px;color:var(--text-hell-2)}
.strecke{margin:0;border-top:1px solid var(--haar-dunkel);padding-top:18px}
.strecke-breit{margin-top:clamp(48px,6vw,80px)}
.strecke figcaption{font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2);margin-bottom:18px}
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.schritt{display:flex;flex-direction:column;gap:6px}
.bildplatz{position:relative;aspect-ratio:4/3;background:var(--graphit-2);border:1px dashed var(--haar-dunkel);display:grid;place-items:center;margin-bottom:8px;overflow:hidden}
.bildplatz svg{width:74%;height:auto;display:block}
.bildplatz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bildplatz .folgt{position:absolute;left:10px;bottom:8px;font:400 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-hell-2)}
.schritt .nr{font:400 12px/1 var(--mono);color:var(--text-hell-2)}
.schritt h3{font-size:1rem}
.schritt p{font-size:14px;line-height:1.5;color:var(--text-hell-2)}
@media (max-width:560px){
  .schritte{grid-template-columns:1fr;gap:16px}
  .schritt{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start}
  .schritt .bildplatz{grid-row:1 / span 3;margin-bottom:0}
  .bildplatz svg{width:60%;margin-bottom:14px}
}
.zeichnung{border-top:1px solid var(--haar-dunkel);border-bottom:1px solid var(--haar-dunkel);padding-block:20px 0}
.zeichnung svg{display:block;width:100%;height:auto}
.scan{animation:scan 5.5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes scan{from{transform:translateX(0)}to{transform:translateX(420px)}}
.schriftfeld{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--haar-dunkel);margin-top:16px}
.schriftfeld div{padding:10px 12px 12px;border-left:1px solid var(--haar-dunkel)}
.schriftfeld div:first-child{border-left:0;padding-left:0}
.schriftfeld span{display:block;font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2);margin-bottom:4px}
.schriftfeld b{font:400 13px/1.3 var(--mono);color:var(--text-hell)}
@media (max-width:560px){.schriftfeld{grid-template-columns:repeat(2,minmax(0,1fr))}.schriftfeld div:nth-child(3){border-left:0;padding-left:0}.schriftfeld div:nth-child(n+3){border-top:1px solid var(--haar-dunkel)}}
.ticker{padding-block:26px;border-top:1px solid var(--haar-dunkel);border-bottom:1px solid var(--haar-dunkel);overflow:hidden}
.spur{display:flex;width:max-content;animation:lauf 70s linear infinite}
.ticker:hover .spur{animation-play-state:paused}
.spur span,.spur i{font:300 clamp(1.9rem,4.6vw,3.6rem)/1.1 var(--sans);letter-spacing:-.015em;white-space:nowrap;margin-right:clamp(20px,3vw,40px)}
.spur i{font-style:normal;color:var(--messing)}
.spur small{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2);margin-left:16px;vertical-align:middle}
@keyframes lauf{to{transform:translateX(-50%)}}
.leiste{padding-block:0}
.leiste ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.leiste li{padding:22px 20px 24px;border-left:1px solid var(--haar-dunkel)}
.leiste li:first-child{border-left:0;padding-left:0}
.leiste span{display:block;font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2);margin-bottom:6px}
.leiste b{font-weight:300;font-size:1.25rem;font-variant-numeric:tabular-nums}
@media (max-width:900px){.leiste ul{grid-template-columns:repeat(2,minmax(0,1fr))}.leiste li{border-left:0;padding-left:0;border-top:1px solid var(--haar-dunkel)}.leiste li:nth-child(-n+2){border-top:0}}
.spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.spalten.vier{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.spalten.zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.spalten > div{border-top:1px solid var(--haar);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.dunkel .spalten > div,.dunkel-2 .spalten > div{border-top-color:var(--haar-dunkel)}
.dunkel .spalten h3{font-weight:400}
.spalten p{font-size:15px;line-height:1.6}
@media (max-width:960px){.spalten.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.spalten,.spalten.zwei{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.spalten.vier{grid-template-columns:1fr}}
.rechnung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
@media (max-width:880px){.rechnung{grid-template-columns:1fr}}
.regler{display:flex;flex-direction:column}
.regler .zeile{display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center;padding-block:22px;border-top:1px solid var(--haar-dunkel)}
.regler label{font-size:15px}
.regler output{font:400 22px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right;min-width:5ch}
.regler input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--messing);height:22px;margin:0}
.ergebnis{border-top:1px solid var(--messing);padding-top:22px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.ergebnis span{color:var(--messing);font-size:15px}
.ergebnis output{font:300 clamp(2.4rem,5vw,3.6rem)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--text-hell)}
.rechnung aside{display:flex;flex-direction:column;gap:20px;color:var(--text-hell-2);font-size:15px}
.rechnung aside p:first-child{color:var(--text-hell);font-size:1.1rem;font-weight:300;line-height:1.55}
.diagramm{overflow-x:auto;border-top:1px solid var(--haar-dunkel);border-bottom:1px solid var(--haar-dunkel);padding-block:24px 12px}
.diagramm svg{display:block;width:100%;min-width:620px;height:auto}
.diagramm text{font-family:var(--mono);font-size:11px;fill:var(--text-hell-2)}
.diagramm .t-messing{fill:var(--messing)}
.fussnote{margin-top:14px;color:var(--text-hell-2);font:400 12px/1.6 var(--mono)}
.takte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:960px){.takte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.takte{grid-template-columns:1fr}}
.kette{list-style:none;margin:0;padding:0;border-top:1px solid var(--haar-dunkel)}
.kette li{position:relative;display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding-block:26px;border-bottom:1px solid var(--haar-dunkel);align-items:baseline;transition:background .2s}
.kette li:hover{background:rgba(255,255,255,.02)}
.kette li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--messing);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.kette li.erreicht::after{transform:scaleX(1)}
.kette .nr{font:400 14px/1 var(--mono);color:var(--messing);transition:color .4s}
.kette li:not(.erreicht) .nr{color:var(--text-hell-2)}
.kette h3{font-size:1.2rem;font-weight:400}
.kette .de{display:block;margin-top:4px;font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2)}
.kette p{font-size:15px;color:var(--text-hell-2)}
.kette .freigabe{font:400 12px/1.5 var(--mono);color:var(--text-hell)}
.kette .freigabe::before{content:"Sie: ";color:var(--text-hell-2)}
:lang(en) .kette .freigabe::before{content:"You: "}
.kette-kopf{display:grid;grid-template-columns:64px minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr);gap:24px;padding-bottom:12px}
.kette-kopf span{font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2)}
@media (max-width:820px){.kette-kopf{display:none}.kette li{grid-template-columns:40px 1fr;gap:8px 16px}.kette li > *:nth-child(n+3){grid-column:2}}
.zeitplan{margin-top:48px}
.z-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;align-items:baseline;margin-bottom:16px}
.zeitplan ol{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.zeitplan li{flex:var(--w) 1 0;min-width:0;border-top:3px solid var(--messing);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.zeitplan li:last-child{border-top-style:dashed;border-top-color:var(--haar-dunkel)}
.zeitplan b{font-weight:500;font-size:15px}
.zeitplan span{font:400 13px/1.4 var(--mono);color:var(--text-hell-2)}
@media (max-width:700px){.zeitplan ol{flex-direction:column;gap:16px}}
.daten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
@media (max-width:880px){.daten{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 0;border-bottom:1px solid var(--haar);vertical-align:top}
th{font:400 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stahl);width:42%;padding-right:16px}
td{font:400 15px/1.5 var(--mono);color:var(--graphit)}
.format svg{width:100%;height:auto;display:block}
.format text{font-family:var(--mono);font-size:11px;fill:var(--stahl)}
.faq{border-top:1px solid var(--haar);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
@media (max-width:820px){.faq{grid-template-columns:1fr}}
details{border-bottom:1px solid var(--haar)}
summary{list-style:none;cursor:pointer;padding:22px 32px 22px 0;position:relative;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;margin-top:-6px;background:linear-gradient(var(--messing-tief),var(--messing-tief)) center/11px 1px no-repeat,linear-gradient(var(--messing-tief),var(--messing-tief)) center/1px 11px no-repeat;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:24px;font-size:15px;color:var(--stahl)}
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:880px){.kontakt{grid-template-columns:1fr}}
.stufen{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--haar-dunkel)}
.stufen li{display:grid;grid-template-columns:72px 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--haar-dunkel)}
.stufen span{font:400 12px/1.6 var(--mono);color:var(--messing);letter-spacing:.08em;text-transform:uppercase}
.stufen p{font-size:15px;color:var(--text-hell-2)}
.stufen b{display:block;color:var(--text-hell);font-weight:500;margin-bottom:2px}
.direkt{margin-top:32px;display:flex;flex-direction:column;gap:8px}
.direkt a{font-size:1.2rem;font-weight:300;text-decoration:none;border-bottom:1px solid var(--messing)}
.direkt a:hover{color:var(--messing)}
form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feld{display:flex;flex-direction:column;gap:8px}
.feld.voll{grid-column:1/-1}
@media (max-width:520px){form{grid-template-columns:1fr}}
.feld label{font:400 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-2)}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--text-hell);background:transparent;border:0;border-bottom:1px solid var(--haar-dunkel);padding:10px 0;border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--messing)}
select option{background:var(--graphit)}
textarea{resize:vertical;min-height:80px}
.upload{border:1px dashed var(--haar-dunkel);padding:22px;text-align:center;cursor:pointer;color:var(--text-hell-2);font-size:15px;transition:border-color .2s}
.upload:hover,.upload.aktiv{border-color:var(--messing)}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload b{color:var(--text-hell);font-weight:500}
.dateien{font:400 12px/1.6 var(--mono);color:var(--messing);margin-top:6px}
.meldung{grid-column:1/-1;font:400 13px/1.6 var(--mono);color:var(--messing);border-top:1px solid var(--messing);padding-top:14px}
footer{border-top:1px solid var(--haar-dunkel);padding-block:48px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
footer p{font-size:14px;color:var(--text-hell-2)}
footer nav{display:flex;gap:24px;font-size:14px}
footer nav a{color:var(--text-hell-2);text-decoration:none}
.modell-box{position:relative;border-top:1px solid var(--haar-dunkel);border-bottom:1px solid var(--haar-dunkel)}
.modell{position:relative;aspect-ratio:5/4;max-width:100%;cursor:grab;touch-action:pan-y}
.modell:active{cursor:grabbing}
.modell canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.modell .ersatz{position:absolute;inset:0;display:flex;align-items:center}
.modell .ersatz svg{width:100%;height:auto}
.fadenkreuz{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;overflow:hidden}
.modell:hover .fadenkreuz{opacity:1}
.fx{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(176,141,87,.55)}
.fy{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(176,141,87,.55)}
.fw{position:absolute;left:0;top:0;font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--messing);background:var(--graphit);padding:6px 8px;white-space:nowrap}
@media (hover:none){.fadenkreuz{display:none}}
.phasen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--haar-dunkel)}
.phasen li{padding:12px 12px 14px;border-left:1px solid var(--haar-dunkel);font:400 12px/1.4 var(--mono);color:var(--text-hell-2);position:relative;transition:color .3s}
.phasen li:first-child{border-left:0;padding-left:0}
.phasen li b{display:block;font-weight:400;font-size:12px;letter-spacing:.1em;margin-bottom:3px}
.phasen li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--messing);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.phasen li.an{color:var(--text-hell)}
.phasen li.an b{color:var(--messing)}
.phasen li.an::before{transform:scaleX(1)}
.drehen{position:absolute;right:0;top:12px;font:400 12px/1 var(--mono);color:var(--text-hell-2);letter-spacing:.08em;pointer-events:none}
.band{padding-block:clamp(64px,9vw,112px)}
.band-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.band-grid{grid-template-columns:1fr}}
.band h2{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02}
.buehne{border-top:1px solid var(--haar);border-bottom:1px solid var(--haar);padding-block:12px;margin-bottom:28px}
.buehne svg{display:block;width:100%;height:auto;max-height:420px}
.takte button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--haar);padding-top:18px;transition:border-color .3s}
.takte button:focus-visible{outline:2px solid var(--messing-tief);outline-offset:4px}
.takte button p{font-size:15px;color:var(--stahl);transition:color .3s}
.takte button h3{color:var(--stahl);transition:color .3s}
.takte button.an{border-top-color:var(--messing-tief)}
.takte button.an h3{color:var(--graphit)}
.takte button.an p{color:var(--graphit)}
.menue-knopf{display:none;background:none;border:1px solid var(--haar-dunkel);color:var(--text-hell);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:11px 12px;cursor:pointer}
header.nav nav a.aktiv{color:var(--text-hell);border-bottom:1px solid var(--messing);padding-bottom:3px}
@media (max-width:900px){
  .menue-knopf{display:inline-block;margin-left:auto}
  header.nav nav.offen{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--graphit);border-bottom:1px solid var(--haar-dunkel);padding:4px var(--gutter) 16px}
  header.nav nav.offen a{padding:14px 0;border-bottom:1px solid var(--haar-dunkel);font-size:16px}
  header.nav nav.offen a.aktiv{padding-bottom:14px}
}
.kopf-cta{white-space:nowrap}
.kopf-cta .kurz{display:none}
@media (max-width:560px){header.nav .wrap{gap:12px}.kopf-cta .lang{display:none}.kopf-cta .kurz{display:inline}}
.zwischen{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:40px;padding-top:28px;border-top:1px solid var(--haar-dunkel)}
.zwischen p{font-size:1.1rem;font-weight:300}
.uebernehmen{margin-top:22px;align-self:flex-start}
.opt{color:var(--text-hell-2);text-transform:none;letter-spacing:0;font-size:12px}
.ds{grid-column:1/-1;font:400 12px/1.6 var(--mono);color:var(--text-hell-2)}
.fall{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin-bottom:clamp(56px,7vw,88px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--haar)}
@media (max-width:880px){.fall{grid-template-columns:1fr}}
.fall-bild{aspect-ratio:16/10;background:#fff;overflow:hidden}
.fall-bild img{display:block;width:100%;height:100%;object-fit:contain}
.fall-text{display:flex;flex-direction:column;gap:14px}
.fall-text h3{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:300;line-height:1.25}
.fall-text dl{display:grid;grid-template-columns:auto 1fr;gap:14px 20px;margin:8px 0 0}
.fall-text dt{font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--messing-tief);padding-top:2px}
.fall-text dd{margin:0;font-size:15px;line-height:1.6;color:var(--stahl)}
@media (max-width:480px){.fall-text dl{grid-template-columns:1fr;gap:4px}.fall-text dd{margin-bottom:10px}}
.galerie{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 24px}
.teil{grid-column:span 2;display:flex;flex-direction:column;gap:12px;margin:0}
.teil.gross{grid-column:span 3}
.teil .bild{aspect-ratio:5/3;max-width:100%;background:#fff;border-bottom:1px solid var(--haar);overflow:hidden;cursor:zoom-in}
.teil img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .5s}
.teil:hover img{transform:scale(1.03)}
.teil h3{font-size:1.05rem}
.teil dl{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0;font:400 13px/1.5 var(--mono);color:var(--graphit)}
.teil dt{color:var(--stahl);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.teil dd{margin:0}
@media (max-width:900px){.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}.teil,.teil.gross{grid-column:span 1}}
@media (max-width:520px){.galerie{grid-template-columns:1fr}}
.js-bereit .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-bereit .rv.da{opacity:1;transform:none}
.zeichnen .strich{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
.zeichnen.fertig .strich{stroke-dashoffset:0}
.lupe{border:0;padding:0;background:var(--papier);color:var(--graphit);width:min(1100px,94vw);max-width:none;max-height:92vh}
.lupe::backdrop{background:rgba(26,29,33,.9)}
.lupe img{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain;background:#fff}
.lupe-zu{position:absolute;top:10px;right:10px;background:var(--graphit);color:var(--text-hell);border:0;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;cursor:pointer}
.lupe-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--haar)}
.lupe-fuss p{font-weight:500}
.lupe-nav{display:flex;gap:8px}
.lupe-nav button{background:none;border:1px solid var(--haar);color:var(--graphit);font:400 16px/1 var(--mono);padding:10px 14px;cursor:pointer}
.lupe-nav button:hover{border-color:var(--graphit)}
/* Mobil: Tippflächen, lesbare Zeichnungen, Diagramm im Hochformat, Galerie zum Wischen */
@media (max-width:600px){.diagramm{overflow:visible}.diagramm svg{min-width:0}.diagramm text{font-size:11.5px}}
@media (max-width:900px){
  .sprache,.menue-knopf,header.nav .btn{min-height:44px;display:inline-flex;align-items:center}
  .regler input[type=range]{height:40px}
  input:not([type=range]):not([type=file]):not([type=checkbox]),select{min-height:48px}
  .direkt a{display:inline-block;padding-block:8px}
  footer nav a{display:inline-block;padding-block:11px}
  #buehne #b-titel{font-size:19px}
  .zeichnung text{font-size:17px}
}
@media (max-width:600px){
  .buehne{position:sticky;top:calc(68px + env(safe-area-inset-top,0px));z-index:2;background:var(--papier);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .format text{font-size:13px}
  .daten th,.daten td{display:block;width:auto;padding:0}
  .daten th{padding-top:14px;border-bottom:0}
  .daten td{padding:4px 0 14px}
  .galerie{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 12px;scrollbar-width:none}
  .galerie::-webkit-scrollbar{display:none}
  .galerie .teil,.galerie .teil.gross{flex:0 0 84%;scroll-snap-align:start}
  .teil:hover img{transform:none}
}