/* Schriften liegen lokal in assets/schrift (seit Schritt 17), nicht mehr bei Google Fonts: Barlow 400, 500, 600 und Barlow Condensed 500, 600, 700,
   jeweils der lateinische Grundbestand und die Erweiterung (die lädt der Browser nur, wenn ein Zeichen daraus vorkommt).
   Lizenz: SIL Open Font License 1.1, siehe assets/schrift/OFL.txt. Die Pfade gelten ab assets/htsg.css. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("schrift/barlow-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("schrift/barlow-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("schrift/barlow-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("schrift/barlow-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("schrift/barlow-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("schrift/barlow-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("schrift/barlow-condensed-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("schrift/barlow-condensed-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("schrift/barlow-condensed-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("schrift/barlow-condensed-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("schrift/barlow-condensed-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("schrift/barlow-condensed-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:oklch(0.19 calc(0.038*var(--gc)) 170);
  --bg-2:oklch(0.24 calc(0.048*var(--gc)) 170);
  --green:oklch(0.34 calc(0.07*var(--gc)) 170);
  --orange:oklch(0.68 0.18 50);
  --orange-ink:oklch(0.2 0.045 60);
  --text:oklch(0.965 0.008 150);
  --mute:oklch(0.82 0.025 165);
  --rule:oklch(0.965 0.008 150 / .16);
  --paper:oklch(0.975 0.006 150);
  --wrap:min(1320px, 100% - clamp(32px, 6vw, 112px));
  --ease:cubic-bezier(.16,1,.3,1);
  --disp:"Barlow Condensed","Arial Narrow",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Barlow",system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{width:var(--wrap);margin-inline:auto}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--orange);color:var(--orange-ink);padding:10px 14px;z-index:99}

h1,h2,h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
h2{font-size:clamp(2.6rem,6.4vw,6rem)}
h3{font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1}
.kicker{font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}

.btn{display:inline-flex;align-items:center;gap:.7em;padding:.85em 1.5em;font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid var(--orange);background:var(--orange);color:var(--orange-ink);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--text);border-color:var(--text)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--rule)}
.btn--ghost:hover{background:var(--text);color:var(--bg)}
.btn svg{width:.9em;height:.9em;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

/* header */
.head{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.head.solid{background:oklch(0.19 calc(0.038*var(--gc)) 170 / .96);box-shadow:0 1px 0 var(--rule)}
.head-in{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);width:var(--wrap);margin-inline:auto}
.logo{display:block;flex:none;padding:13px 0;line-height:0;color:var(--text)}
.logo svg{display:block;height:clamp(56px,5vw,74px);width:auto;overflow:visible;transition:height .4s var(--ease)}
.head.solid .logo svg{height:52px}
.logo-wm{fill:currentColor}
.logo-sub{fill:var(--mute)}
.nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto}
.nav a{font-family:var(--disp);font-weight:600;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--orange)}
.tel{font-family:var(--disp);font-weight:700;font-size:1.25rem;text-decoration:none;white-space:nowrap}
.tel:hover{color:var(--orange)}

/* hero */
:root{--gc:1;--sheet:oklch(0.215 calc(0.044*var(--gc)) 170);--orange-text:oklch(0.48 0.15 45);--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cpath d='M0-100A100 100 0 0 0 100 0A100 100 0 0 0 0 100A100 100 0 0 0-100 0A100 100 0 0 0 0-100Z'/%3E%3C/svg%3E")}
.hero{position:relative;padding:clamp(116px,14.5vh,144px) 0 clamp(36px,5vh,64px);background:radial-gradient(110% 80% at 80% 45%,oklch(0.265 calc(0.055*var(--gc)) 170) 0%,var(--bg) 64%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-rows:auto auto 1fr;grid-template-areas:"txt sheet" "tabs sheet" "cta sheet";column-gap:clamp(24px,3.6vw,64px)}
.hero-txt{grid-area:txt}
.hero-txt .kicker{font-size:.95rem;display:block;margin-bottom:1em}
h1{font-size:clamp(2.9rem,min(5.5vw,10.5vh),5.3rem);line-height:.93}
h1 span,h1 em{display:block}
h1 em{font-style:normal;color:var(--orange)}
.hero-txt .lede{margin-top:1.2em;color:var(--mute);font-size:clamp(1rem,1.2vw,1.14rem);max-width:44ch}
.gw{grid-area:tabs;margin-top:clamp(18px,3vh,30px);border-top:1px solid var(--rule)}
.gw button{appearance:none;position:relative;display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--mute);font-family:var(--disp);font-weight:600;font-size:clamp(1.08rem,1.45vw,1.38rem);letter-spacing:.05em;text-transform:uppercase;line-height:1.1;padding:11px 12px 11px 0;cursor:pointer;transition:background .4s var(--ease),color .3s var(--ease),padding .4s var(--ease)}
.gw button span{color:var(--orange);font-size:.85em;font-variant-numeric:tabular-nums}
.gw button:hover{color:var(--text)}
.gw button[aria-selected="true"]{background:var(--orange);color:var(--orange-ink);padding-left:14px}
.gw button[aria-selected="true"] span{color:inherit}
.gw button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--orange-ink);transform:scaleX(0);transform-origin:left}
.gw.auto button[aria-selected="true"]::after{animation:fill 8s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.hero .cta{grid-area:cta;display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3vh,30px);align-self:start}

/* Systemschnitt */
.sheet{grid-area:sheet;align-self:center;background:var(--sheet);border:1px solid var(--rule);min-width:0}
.sheet-head{display:flex;justify-content:space-between;gap:16px;padding:9px 16px;border-bottom:1px solid var(--rule);font-family:var(--disp);font-weight:600;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sheet-head{align-items:center}
.sheet-head b{color:var(--text);font-weight:600;margin-left:auto}
.sheet-head .arrow{font-size:.92rem;letter-spacing:.12em;padding-left:16px;border-left:1px solid var(--rule)}
.sheet svg{display:block;width:100%;height:auto;aspect-ratio:940/740;max-height:min(66vh,640px);background:linear-gradient(oklch(0.965 0.008 150 / .022) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,oklch(0.965 0.008 150 / .022) 1px,transparent 1px) 0 0/28px 100%}
.b{fill:none;stroke:oklch(0.965 0.008 150 / .62);stroke-width:1.3}
.bs{fill:oklch(0.965 0.008 150 / .15);stroke:oklch(0.965 0.008 150 / .62);stroke-width:1}
.f{fill:none;stroke:oklch(0.965 0.008 150 / .27);stroke-width:1}
.fs{fill:oklch(0.965 0.008 150 / .24)}
.lbl{font:600 10.5px var(--disp);letter-spacing:.1em;fill:oklch(0.965 0.008 150 / .55)}
.lbl.s{font-size:8.5px}
.lay{fill:none;stroke:var(--mute);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .8s var(--ease)}
.sheet[data-k="betrieb"] .lay:not(.on),.sheet[data-k="plan"] .lay:not(.on){opacity:.15}
.lay.on{opacity:1;stroke:var(--orange)}
.lay .eq{fill:var(--sheet)}
.lay .so{fill:var(--mute);stroke:none}
.lay.on .so{fill:var(--orange)}
.lay .w2{stroke-width:2.2}
.lay .dash{stroke-dasharray:3 4}
.lay .fl{stroke-dasharray:5 6}
.lay .duct{stroke-width:7;stroke-opacity:.26;stroke-linecap:butt}
.lay .duct.d2{stroke-width:5}
.lay .cone{fill:var(--orange);stroke:none;opacity:0;transition:opacity 1s var(--ease)}
.lay.on .cone{opacity:.07}
.lay .axis{stroke-dasharray:14 4 2 4;stroke-width:.9}
.lay .t{font:600 9.5px var(--disp);letter-spacing:.08em;fill:var(--mute);stroke:none}
.lay.on .t{fill:var(--orange)}
.lay .t.b{font-size:12.5px;font-weight:700}
.lay .tick{stroke:var(--sheet);stroke-width:1.7;fill:none}
.lay .pulse{opacity:0}
.lay .chk{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease)}
.lay.on .chk{transform:scale(1);transition-delay:var(--d,0s)}
.lay .spin{transform-box:fill-box;transform-origin:center}
.call{opacity:0;transition:opacity .35s var(--ease)}
.lay.on .call{opacity:1;transition-delay:.4s}
.call path{stroke:var(--text);stroke-width:1}
.call circle{fill:var(--text);stroke:var(--sheet);stroke-width:2}
.call text{font:700 10.5px "Barlow",sans-serif;fill:var(--bg);stroke:none;text-anchor:middle}
@media (prefers-reduced-motion:no-preference){
  .js .sheet svg{animation:rise 1.9s var(--ease) both}
  .lay.on .fl{animation:flow 2.6s linear infinite}
  .lay.on .fl.rev{animation-direction:reverse}
}
@keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes flow{to{stroke-dashoffset:-22}}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(3.6);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sig{0%,100%{opacity:.25}50%{opacity:1}}
.legend-set{display:grid;border-top:1px solid var(--rule)}
.legend{grid-area:1/1;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:flex-end;justify-content:space-between;padding:14px 16px 16px;visibility:hidden;opacity:0;transition:opacity .5s var(--ease)}
.legend.on{visibility:visible;opacity:1}
.legend ol{flex:1 1 420px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 18px;counter-reset:n}
.legend li{counter-increment:n;display:flex;gap:8px;align-items:baseline;font-size:.82rem;line-height:1.25;color:var(--text)}
.legend li::before{content:counter(n);flex:none;width:18px;height:18px;border-radius:50%;background:var(--text);color:var(--bg);font-weight:700;font-size:.68rem;display:grid;place-items:center;transform:translateY(2px)}
.legend .arrow{font-size:1.02rem;white-space:nowrap}

section{padding:clamp(72px,10vw,150px) 0}

/* Kennzahlen */
.facts{border-top:1px solid var(--rule)}
.facts ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 0;padding:clamp(28px,4vw,52px) 0}
.facts li{border-left:1px solid var(--rule);padding:2px 20px}
.facts b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,3.3vw,3.2rem);line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.facts b small{font-size:.42em;font-weight:600;letter-spacing:.08em;color:var(--orange)}
.facts li>span{display:block;margin-top:.5em;color:var(--mute);font-size:.95rem;line-height:1.35}

/* finder: helle Fläche, dunkle Schrift, Orange nur als Akzent */
.finder{background:var(--paper);color:var(--bg);padding-top:clamp(56px,7vw,110px)}
.finder .kicker{color:var(--orange-text)}
.finder-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:clamp(22px,3vw,40px)}
.finder h2{margin:.15em 0 0}
.pick{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--bg)}
.pick button{appearance:none;font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.75rem);text-transform:uppercase;line-height:1;text-align:left;background:transparent;color:var(--bg);border:0;border-right:2px solid var(--bg);padding:22px 20px 26px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.pick button:last-child{border-right:0}
.pick button small{display:block;font-family:"Barlow",sans-serif;font-weight:600;font-size:.84rem;letter-spacing:.08em;margin-bottom:.9em;color:var(--orange-text);transition:color .3s var(--ease)}
.pick button:hover{background:oklch(0.19 calc(0.038*var(--gc)) 170 / .07)}
.pick button[aria-pressed="true"]{background:var(--bg);color:var(--text)}
.pick button[aria-pressed="true"] small{color:var(--orange)}
.answer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);padding-top:clamp(28px,4vw,56px);align-items:start}
.answer p{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.3;font-weight:500;max-width:28ch}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:flex;align-items:center;gap:.6em;background:var(--bg);color:var(--text);padding:10px 18px 10px 14px;font-weight:600;font-size:1.02rem;animation:chip .6s var(--ease) backwards;animation-delay:calc(var(--n)*55ms)}
.chips li::before{content:"";flex:none;width:.72em;height:.72em;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
@keyframes chip{from{opacity:0;transform:translateY(14px)}}
.answer .btn{margin-top:26px}
.finder .btn:hover{background:var(--bg);border-color:var(--bg);color:var(--text)}
/* Piktogramm als Auswahlanzeige: vier Ellipsen, vier Situationen */
.finder-pk{width:clamp(120px,15vw,196px);aspect-ratio:1}
.finder-pk .pk-p{opacity:.24;cursor:pointer;transition:opacity .45s var(--ease)}
.finder-pk .pk-p:hover{opacity:.55}
.finder-pk .pk-g{transition:transform .6s var(--ease)}
.finder-pk[data-on="1"] .p1,.finder-pk[data-on="2"] .p2,.finder-pk[data-on="3"] .p3,.finder-pk[data-on="4"] .p4{opacity:1}
.finder-pk[data-on="1"] .g1{transform:translate(-6px,-6px)}
.finder-pk[data-on="2"] .g2{transform:translate(6px,-6px)}
.finder-pk[data-on="3"] .g3{transform:translate(6px,6px)}
.finder-pk[data-on="4"] .g4{transform:translate(-6px,6px)}

/* services */
.svc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(40px,6vw,88px)}
.svc-head p{color:var(--mute);max-width:46ch}
.svc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:start}
.visual{position:sticky;top:100px;height:min(calc(100vh - 140px),660px);overflow:hidden;isolation:isolate;background:var(--bg-2);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2.4vw,36px)}

.bar{position:absolute;left:0;top:0;height:4px;background:var(--orange);width:100%;transform-origin:left;transform:scaleX(.2);transition:transform .8s var(--ease)}
.vnum{font-family:var(--disp);font-weight:700;font-size:clamp(7rem,14vw,14rem);line-height:.8;color:var(--orange);font-variant-numeric:tabular-nums;display:block;margin-top:.08em}
.vnum.flip{animation:flip .7s var(--ease)}
@keyframes flip{from{opacity:0;transform:translateY(.25em)}}
.vidx a{display:flex;gap:16px;align-items:baseline;font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--mute);padding:11px 0;border-top:1px solid var(--rule);transition:color .3s var(--ease),background .4s var(--ease),padding .4s var(--ease)}
.vidx a::before{content:attr(data-n);font-size:.85em;color:var(--orange);transition:color .3s}
.vidx a:hover{color:var(--text)}
.vidx a.on{background:var(--orange);color:var(--orange-ink);padding-left:14px;border-top-color:var(--orange)}
.vidx a.on::before{color:var(--orange-ink)}
.block{padding:clamp(28px,5vh,56px) 0 clamp(56px,12vh,120px);border-top:1px solid var(--rule)}
.block:last-child{padding-bottom:0}
.block .kicker{display:block;margin-bottom:.6em}
.block>p{color:var(--mute);margin:1em 0 1.8em;max-width:52ch}
.groups{display:grid;gap:0}
.groups div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid var(--rule)}
.groups h4{font-family:var(--disp);font-weight:600;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.groups p{font-size:.98rem;color:var(--text)}

/* why */
.why{background:var(--paper);color:var(--bg)}
.why .kicker{color:oklch(0.52 0.16 45)}
.why ol{margin-top:clamp(24px,4vw,56px);border-top:2px solid var(--bg)}
.why li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(16px,4vw,72px);align-items:center;padding:clamp(20px,3vw,40px) 0;border-bottom:2px solid var(--bg);position:relative;isolation:isolate}
.why li h3{font-size:clamp(2.2rem,5.6vw,5.4rem)}
.why li p{max-width:44ch}
.certs{display:flex;align-items:center;gap:clamp(20px,4vw,56px);margin-top:clamp(32px,5vw,64px);flex-wrap:wrap}
.certs img{height:110px;width:auto}
.certs p{max-width:46ch;font-size:.98rem}

/* audience */
.aud h2{max-width:14ch}
.aud ul{margin-top:clamp(32px,5vw,72px);display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,88px)}
.aud li{padding:28px 0 34px;border-top:1px solid var(--rule)}
.aud li h3{color:var(--orange);margin-bottom:.45em}
.aud li p{color:var(--mute);max-width:48ch}

/* split */
.split{padding:0;display:grid;grid-template-columns:1fr 1fr}
.split article{padding:clamp(48px,7vw,110px) clamp(24px,5vw,88px)}
.split article:first-child{background:var(--green)}
.split article:last-child{background:var(--bg-2)}
.split h2{font-size:clamp(2rem,3.8vw,3.6rem);margin:.25em 0 .5em}
.split p{color:var(--mute);max-width:46ch}
.split article:first-child p{color:oklch(0.92 0.02 160)}
.split ul{display:flex;flex-wrap:wrap;gap:8px;margin:1.4em 0 1.8em}
.split li{border:1px solid var(--rule);padding:6px 12px;font-size:.92rem;font-weight:500}
.arrow{font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--orange);display:inline-flex;gap:.5em;align-items:center}
.arrow::after{content:"→";transition:transform .25s var(--ease)}
.arrow:hover::after{transform:translateX(6px)}

/* Karriere: heller Bereich mit Stellen als Zeilen */
.jobs{background:var(--paper);color:var(--bg)}
.jobs .kicker{color:var(--orange-text)}
.jobs-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,96px);align-items:start}
.jobs h2{font-size:clamp(2.4rem,5vw,4.6rem);margin:.15em 0 .4em}
.jobs p{color:oklch(0.3 0.05 170);max-width:44ch}
.jobs .jobs-mail{margin-top:1.4em;font-weight:600}
.jobs-mail a{color:var(--bg);text-decoration:none;border-bottom:2px solid var(--orange)}
.joblist{border-top:2px solid var(--bg)}
.joblist a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;padding:clamp(18px,2.4vw,30px) 0;border-bottom:2px solid var(--bg);text-decoration:none;color:var(--bg)}
.joblist small{grid-column:1;font-weight:600;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-text)}
.joblist b{grid-column:1;position:relative;font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.05;text-transform:uppercase;transition:transform .6s var(--ease)}
.joblist b::before{content:"";position:absolute;left:-.6em;top:.3em;width:.4em;height:.4em;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;opacity:0;transform:rotate(-90deg) scale(.4);transition:opacity .4s var(--ease),transform .7s var(--ease)}
.joblist span{grid-column:1;font-size:1rem;color:oklch(0.3 0.05 170);margin-top:.3em}
.joblist i{grid-column:2;grid-row:1/4;width:46px;height:46px;border:2px solid var(--bg);display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.joblist i::before{content:"→";font-style:normal;font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1}
.joblist a:hover b{transform:translateX(.6em)}
.joblist a:hover b::before{opacity:1;transform:none}
.joblist a:hover i{background:var(--bg);color:var(--text)}
/* contact */
.contact h2{font-size:clamp(2.3rem,4.2vw,4rem)}
.contact .lede{color:var(--mute);margin-top:1em;max-width:40ch}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px)}
.contact address{margin-top:2em}
address{font-style:normal;display:grid;gap:22px;align-content:start}
address small{display:block;font-family:var(--disp);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-size:.95rem}
address a{text-decoration:none;font-weight:600;font-size:1.25rem}
address a:hover{color:var(--orange)}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form label{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--mute)}
form .full{grid-column:1/-1}
input,select,textarea{font:inherit;font-weight:400;font-size:1rem;color:var(--text);background:var(--bg-2);border:1px solid var(--rule);border-bottom:2px solid var(--mute);padding:.8em .9em;border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--orange)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--orange)}
.status{font-size:.92rem;color:var(--orange);font-weight:600}

footer{border-top:1px solid var(--rule);padding:28px 0;font-size:.9rem;color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer nav{display:flex;gap:24px}
footer a{text-decoration:none}
footer a:hover{color:var(--orange)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:920px){
  .nav{display:none}
  .tel{margin-left:auto}
  .hero-foot,.answer,.svc-head,.svc-grid,.contact-grid,.split,.why li{grid-template-columns:1fr}
  .hero-foot .cta{justify-content:flex-start}
  .pick{grid-template-columns:1fr 1fr}
  .pick button:nth-child(2){border-right:0}
  .pick button:nth-child(-n+2){border-bottom:2px solid var(--bg)}
  .visual{display:none}
  .aud ul{grid-template-columns:1fr}
  .jobs .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .groups div{grid-template-columns:1fr;gap:4px}
  form{grid-template-columns:1fr}
  .logo svg,.head.solid .logo svg{height:46px}
}
/* Lebenszyklus */
.life{position:relative;isolation:isolate;overflow:hidden;background:var(--bg-2)}
.life>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);opacity:.3}
.life::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,oklch(0.19 calc(0.038*var(--gc)) 170 / .97) 0%,oklch(0.22 calc(0.05*var(--gc)) 170 / .86) 55%,oklch(0.27 calc(0.065*var(--gc)) 170 / .6) 100%)}
.track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,48px);padding-top:44px}
.track::before,.track::after{content:"";position:absolute;left:0;top:9px;height:2px;width:100%;background:var(--rule)}
.track::after{background:var(--orange);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .25s linear}
.track li{position:relative}
.track li::before{content:"";position:absolute;left:2px;top:-42px;width:16px;height:16px;background:var(--bg);border:2px solid var(--orange);transform:rotate(45deg);z-index:1}
.track h3{font-size:clamp(2rem,3.6vw,3.4rem);margin:.12em 0 .35em}
.track p{color:var(--mute);font-size:1rem;max-width:30ch}

/* Piktogramm aus dem Logo als wiederkehrendes Element */
.pk{display:inline-block;line-height:0}
.pk svg{display:block;width:100%;height:100%;overflow:visible}
.pk-p,.pk-s{fill:var(--orange)}
.star::before{content:"";display:inline-block;width:.78em;height:.78em;margin-right:.6em;vertical-align:-.04em;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.js .reveal.star::before{transform:rotate(-135deg) scale(.2);transition:transform 1.1s var(--ease) .2s}
.js .reveal.in.star::before{transform:none}
/* Lebenszyklus: das Zeichen vervollständigt sich von Schritt zu Schritt */
.track li::before{content:none}
.track .pk{position:absolute;left:-7px;top:-50px;width:32px;height:32px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 6px var(--bg);z-index:1;transition:transform .6s var(--ease)}
.track .pk-p,.track .pk-s{fill:transparent;stroke:oklch(0.965 0.008 150 / .42);stroke-width:9;transition:fill .5s var(--ease),stroke .5s var(--ease)}
.track li.on .pk-s,.track li.on .pk-p.lit{fill:var(--orange);stroke:var(--orange)}
.track li.on .pk{transform:scale(1.1)}
/* Leistungen: das Zeichen dreht sich je Bereich einen Schritt weiter */
.vis-pk{position:absolute;right:-24%;top:-14%;width:96%;aspect-ratio:1;z-index:-1;transform:rotate(calc(var(--step,0)*22.5deg));transition:transform 1.8s var(--ease)}
.vis-pk .pk-p,.vis-pk .pk-s{fill:transparent;stroke:oklch(0.965 0.008 150 / .1);stroke-width:1px;vector-effect:non-scaling-stroke;transition:fill 1s var(--ease),stroke 1s var(--ease)}
.vis-pk .cur{fill:oklch(0.68 0.18 50 / .13);stroke:oklch(0.68 0.18 50 / .55)}
/* Kontakt: großes Zeichen im Hintergrund, dreht sich langsam mit dem Scrollen */
.contact{position:relative;overflow:hidden}
.contact .wrap{position:relative;z-index:1}
.bg-pk{position:absolute;right:-150px;bottom:-190px;width:min(60vw,620px);aspect-ratio:1;pointer-events:none}
.bg-pk .pk-p,.bg-pk .pk-s{fill:none;stroke:oklch(0.965 0.008 150 / .08);stroke-width:1px;vector-effect:non-scaling-stroke}
/* Begleiter: füllt sich mit dem Seitenfortschritt und führt zurück nach oben */
.dial{position:fixed;right:18px;bottom:18px;z-index:25;width:46px;height:46px;border-radius:50%;background:var(--bg);border:1px solid oklch(0.965 0.008 150 / .22);display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s}
.dial.show{opacity:1;pointer-events:auto;transform:none}
.dial:hover{border-color:var(--orange)}
.dial .pk{width:28px;height:28px;transition:transform .7s var(--ease)}
.dial:hover .pk{transform:rotate(90deg)}
.dial .pk-p{fill:oklch(0.965 0.008 150 / .2);transition:fill .5s var(--ease)}
.dial .pk-p.lit{fill:var(--orange)}
.foot-pk{width:20px;height:20px;vertical-align:-4px;margin-right:10px}
/* Warum HTSG: ruhiger Hover, Zeichen statt Farbfläche */
.why li h3{position:relative;transition:transform .6s var(--ease)}
.why li h3::before{content:"";position:absolute;left:-.6em;top:.2em;width:.4em;height:.4em;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;opacity:0;transform:rotate(-90deg) scale(.4);transition:opacity .4s var(--ease),transform .7s var(--ease)}
.why li:hover h3{transform:translateX(.6em)}
.why li:hover h3::before{opacity:1;transform:none}
/* Systemschnitt: Fußzeile mit Legende */
.sheet-foot{display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding:12px 16px}
.sheet-foot .legend-set{border-top:0;flex:1;min-width:0}
.sheet-foot .legend{padding:0}
.sheet-foot .legend ol{display:flex;flex-wrap:wrap;gap:6px 20px}
.sheet-foot .arrow{font-size:1rem;letter-spacing:.1em;white-space:nowrap}

/* Zertifikate: eigener, großer Block */
.qual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,88px);align-items:center;margin-bottom:clamp(64px,9vw,130px)}
.qual h2{font-size:clamp(2.4rem,5vw,4.6rem);margin:.15em 0 .4em}
.qual p{max-width:46ch;font-size:1.08rem}
.seals{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.seals li{background:oklch(0.995 0.002 150);border:1px solid oklch(0.3 0.03 171 / .2);padding:clamp(22px,2.8vw,40px) clamp(16px,2vw,28px);display:grid;grid-template-columns:1fr;justify-items:center;align-content:start;align-items:start;gap:6px;text-align:center}
.seals figure{margin:0 0 14px;height:clamp(130px,14vw,190px);display:flex;align-items:center;justify-content:center}
.seals img{max-height:100%;width:auto;height:auto}
.seals b{font-family:var(--disp);font-weight:700;font-size:1.6rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.seals span{font-size:.96rem;line-height:1.35;color:oklch(0.3 0.05 170)}
.seals .todo{color:var(--orange-text);font-style:italic}
.why-note{margin-top:clamp(24px,3vw,40px);max-width:54ch}
/* Für wen wir arbeiten: Markengrün statt Fast-Schwarz, weiße Schrift */
.aud{background:var(--green)}
.aud li{border-top-color:oklch(0.965 0.008 150 / .32)}
.aud li h3{color:var(--text)}
.aud li h3::before{content:"";display:inline-block;width:.42em;height:.42em;margin-right:.4em;vertical-align:.18em;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.aud li p{color:oklch(0.955 0.012 155);font-size:1.06rem}
.split article:first-child{background:var(--bg-2)}
.split article:last-child{background:var(--bg);border-left:1px solid var(--rule)}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"txt" "cta" "tabs" "sheet"}
  .gw{display:flex;overflow-x:auto;border-top:0;gap:8px;margin-top:28px;padding-bottom:10px;scroll-snap-type:x proximity}
  .gw button{flex:none;width:auto;border:1px solid var(--rule);padding:10px 14px;scroll-snap-align:start;white-space:nowrap}
  .gw button[aria-selected="true"]{border-color:var(--orange)}
  .sheet{margin-top:6px}
  .sheet svg{max-height:none}
  .track{grid-template-columns:1fr 1fr;row-gap:64px}
  .qual{grid-template-columns:1fr}
  .split article:last-child{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:560px){
  .track{grid-template-columns:1fr}
  .sheet-head span{display:none}
  .finder-pk{width:88px}
  .sheet-foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   Helle Grundfläche: Weiß trägt die Seite, Grün steht nur in einzelnen Flächen
   (Gebäudeschnitt, Leistungsindex, Arbeitsweise, Zielgruppen, Fußzeile).
   --bg bleibt der dunkle Ton (Schrift und dunkle Flächen), --text der helle.
   --mute, --rule und --accent-text hängen von der Fläche ab.
   ========================================================================== */
:root{
  --paper:oklch(0.99 0.002 150);
  --paper-2:oklch(0.955 0.005 160);
  --orange-text:oklch(0.52 0.17 45);
  --orange-d:oklch(0.62 0.19 47);
  --mute:oklch(0.4 0.03 170);
  --rule:oklch(0.19 0.038 170 / .18);
  --accent-text:var(--orange-text);
}
.sheet,.visual,.life,.aud,footer{--mute:oklch(0.82 0.025 165);--rule:oklch(0.965 0.008 150 / .16);--accent-text:var(--orange);color:var(--text)}
body{background:var(--paper);color:var(--bg)}

/* Kopfzeile: weiß, Logo in Originalfarben */
.head,.head.solid{background:var(--paper);box-shadow:0 1px 0 var(--rule)}
.head.solid{box-shadow:0 1px 0 var(--rule),0 10px 28px oklch(0.19 0.038 170 / .07)}
.logo{color:#9F9F9E}
.logo-sub{fill:#878786}
.nav a:hover,.tel:hover{color:var(--orange-text)}

/* Akzentfarbe je nach Fläche */
.kicker,.arrow,.groups h4,.facts b small,.gw button span,address small,.status{color:var(--accent-text)}
address a:hover{color:var(--accent-text)}
h1 em{color:var(--orange-d)}

/* Hero */
.hero{background:var(--paper)}
.gw button:hover{color:var(--bg)}
.gw button[aria-selected="true"]:hover{color:var(--orange-ink)}

/* Flächenwechsel zwischen Weiß und hellem Grau */
.facts{background:var(--paper-2);border-bottom:1px solid var(--rule)}
#leistungen{background:var(--paper-2)}
.groups p{color:var(--bg)}
.jobs{background:var(--paper-2)}
.split{border-bottom:1px solid var(--rule)}
.split article:first-child,.split article:last-child{background:var(--paper)}
.split article:first-child p{color:var(--mute)}

/* Schaltflächen und Formular auf hellem Grund */
.btn:hover{background:var(--bg);border-color:var(--bg);color:var(--text)}
input,select,textarea{color:var(--bg);background:oklch(0.995 0.002 150)}
.bg-pk .pk-p,.bg-pk .pk-s{stroke:oklch(0.68 0.18 50 / .34)}

/* Fußzeile als dunkler Abschluss */
footer{background:var(--bg);border-top:0}

/* ==========================================================================
   Orange, Weiß, Grau: die Farben der bisherigen Seite. Kein Grün mehr.
   --bg ist jetzt Anthrazit (#2F2F2F wie die bisherige Textfarbe).
   ========================================================================== */
:root{
  --gc:0;
  --bg:oklch(0.3 0.004 60);
  --bg-2:oklch(0.36 0.004 60);
  --text:oklch(0.985 0.001 60);
  --paper:oklch(0.995 0.001 60);
  --paper-2:oklch(0.957 0.002 60);
  --paper-3:oklch(0.925 0.002 60);
  --sheet:var(--paper-2);
  --orange-ink:oklch(0.22 0.01 60);
  --mute:oklch(0.47 0.004 60);
  --rule:oklch(0.3 0.004 60 / .18);
  /* Schriftsystem: fünf Größen, zwei Schnitte (400 und 600), Versalien nur für H1, H2 und Etiketten */
  --fs-h1:clamp(2.6rem,4.6vw,4.2rem);
  --fs-h2:clamp(2rem,3.1vw,2.8rem);
  --fs-h3:clamp(1.2rem,1.5vw,1.4rem);
  --fs-lg:1.15rem;
  --fs-sm:.9rem;
}
.sheet,.visual,.aud{--mute:oklch(0.47 0.004 60);--rule:oklch(0.3 0.004 60 / .18);--accent-text:var(--orange-text);color:var(--bg)}
.life,footer{--mute:oklch(0.87 0.002 60);--rule:oklch(0.985 0.001 60 / .2)}

/* ---- Typografie ---- */
body{font-size:1rem}
.pick button[aria-pressed="true"] small{color:oklch(0.87 0.002 60)}
h1,h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:var(--fs-h1);line-height:1}
h2,.split h2,.jobs h2,.contact h2,.qual h2{font-size:var(--fs-h2);line-height:1.06}
h3,.why li h3,.track h3,.aud li h3{font-family:"Barlow",system-ui,sans-serif;font-weight:600;font-size:var(--fs-h3);line-height:1.25;letter-spacing:0;text-transform:none}
.kicker,.groups h4,.pick button small,.joblist small,address small,.finder .kicker,.why .kicker,.jobs .kicker{font-family:"Barlow",system-ui,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kicker.star::before{background:var(--orange)}
.btn,.arrow,.sheet-foot .arrow,.tel{font-family:"Barlow",system-ui,sans-serif;font-weight:600;font-size:1rem;letter-spacing:0;text-transform:none}
.nav a{font-family:"Barlow",system-ui,sans-serif;font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none}
.hero-txt .lede,.contact .lede{font-size:var(--fs-lg)}
.gw button{font-family:"Barlow",system-ui,sans-serif;font-weight:400;font-size:1.0625rem;letter-spacing:0;text-transform:none;line-height:1.3}
.gw button[aria-selected="true"]{font-weight:600}
.gw button span,.vidx a::before{font-size:var(--fs-sm);font-weight:600}
.facts b{font-weight:600;font-size:var(--fs-h2)}
.facts b small{font-size:1em;font-weight:inherit;letter-spacing:0;color:inherit}
.facts li>span,.legend li,.split li,.joblist span,.seals span,footer,.status,form label{font-size:var(--fs-sm)}
.split li{font-weight:400}
.pick button{font-family:"Barlow",system-ui,sans-serif;font-weight:600;font-size:var(--fs-lg);text-transform:none;line-height:1.25}
.answer p{font-size:var(--fs-h3);font-weight:400;line-height:1.45;max-width:34ch}
.chips li{font-weight:400;font-size:1rem}
.vidx a{font-family:"Barlow",system-ui,sans-serif;font-weight:400;font-size:1rem;letter-spacing:0;text-transform:none}
.vidx a.on{font-weight:600}
.groups p,.track p,.qual p,.aud li p{font-size:1rem}
.joblist b,.seals b{font-family:"Barlow",system-ui,sans-serif;font-weight:600;font-size:var(--fs-h3);line-height:1.25;letter-spacing:0;text-transform:none}
.joblist i::before{font-family:"Barlow",system-ui,sans-serif;font-weight:400;font-size:1.2rem}
address a{font-size:var(--fs-lg);font-weight:600}
.legend li::before,.call text,.lay .t.b{font-weight:600}
.seals .todo{font-style:normal}
section{padding:clamp(64px,8vw,116px) 0}

/* ---- Flächen und Linien ---- */
.pick{border-width:1px}
.pick button{border-right-width:1px}
.why ol,.joblist{border-top:1px solid var(--bg)}
.why li,.joblist a{border-bottom:1px solid var(--rule)}
.why li{padding:22px 0}
.jobs p,.joblist span,.seals span{color:var(--mute)}

/* Gebäudeschnitt: helle Zeichnung, graue Linien, Gewerk in Orange */
.sheet{background:var(--paper-2);border:1px solid var(--rule)}
.sheet svg{background:linear-gradient(oklch(0.3 0.004 60 / .045) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,oklch(0.3 0.004 60 / .045) 1px,transparent 1px) 0 0/28px 100%}
.b{stroke:oklch(0.3 0.004 60 / .72)}
.bs{fill:oklch(0.3 0.004 60 / .11);stroke:oklch(0.3 0.004 60 / .72)}
.f{stroke:oklch(0.3 0.004 60 / .3)}
.fs{fill:oklch(0.3 0.004 60 / .25)}
.lbl{fill:oklch(0.3 0.004 60 / .62)}
.lay.on{stroke:var(--orange-d);stroke-width:1.5}
.lay.on .so{fill:var(--orange-d)}
.lay.on .t{fill:var(--orange-text)}
.lay.on .cone{opacity:.13}
.sheet[data-k="betrieb"] .lay:not(.on),.sheet[data-k="plan"] .lay:not(.on){opacity:.34}
.call path{stroke:var(--bg)}
.call circle{fill:var(--bg);stroke:var(--sheet)}
.call text{fill:var(--text)}
.legend li{color:var(--bg)}
.legend li::before{background:var(--bg);color:var(--text)}

/* Leistungsindex: ruhige, helle Seitenleiste statt großer Zahl */
.visual{top:112px;height:auto;background:var(--paper);border:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:24px}
.vis-pk{position:static;width:44px;z-index:auto}
.vis-pk .pk-p,.vis-pk .pk-s{fill:oklch(0.3 0.004 60 / .16);stroke:none}
.vis-pk .cur{fill:var(--orange);stroke:none}
.vnum{font-weight:600;font-size:var(--fs-h2);line-height:1;color:var(--bg);margin:0}
.vnum::after{content:" / 05";color:var(--mute)}
.vidx{grid-column:1/-1}
.vidx a:hover{color:var(--bg)}

/* Zielgruppen: graues Band wie die Flächen der bisherigen Seite */
.aud{background:var(--paper-3)}
.aud li{border-top-color:var(--rule)}
.aud li h3{color:var(--bg)}
.aud li p{color:oklch(0.38 0.004 60)}

/* ==========================================================================
   Kontrast, Tiefe und Verzahnung in Orange, Weiß und Grau.
   Dunkle Flächen in Anthrazit statt Grün; Karten greifen über Bereichsgrenzen.
   ========================================================================== */
:root{
  --sheet:var(--bg);
  --edge:calc((100vw - min(1320px, 100vw - clamp(32px, 6vw, 112px))) / 2);
  --hpt:clamp(120px,15vh,148px);
  --hpb:clamp(72px,9vh,104px);
  --hg:clamp(24px,3.6vw,64px);
  --lap:clamp(48px,6vw,84px);
  --sec:clamp(64px,8vw,116px);
  --shadow:0 22px 60px oklch(0.3 0.004 60 / .17);
  --fs-h1:clamp(2.9rem,5.4vw,5rem);
  --fs-h2:clamp(2.2rem,3.8vw,3.4rem);
  --fs-h3:clamp(1.25rem,1.7vw,1.55rem);
}
.sheet,.visual,.aud,.contact{--mute:oklch(0.87 0.002 60);--rule:oklch(0.985 0.001 60 / .2);--accent-text:var(--orange);color:var(--text)}

/* Kopfzeile: orange Linie wie die Kopfleiste der bisherigen Seite */
.head{border-top:4px solid var(--orange)}

/* ---- Hero: weiße Textseite, anthrazitfarbene Bühne bis zum rechten Rand ---- */
.hero{overflow-x:clip;padding:var(--hpt) 0 var(--hpb)}
.hero-grid{position:relative;z-index:1;column-gap:var(--hg)}
.sheet{align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:var(--bg);border:0;
  margin:calc(-1*var(--hpt)) calc(-1*var(--edge)) calc(-1*var(--hpb) - 128px) 0;
  padding:var(--hpt) var(--edge) calc(var(--hpb) + 128px + 20px) clamp(20px,2.6vw,44px)}
.sheet svg{max-height:min(60vh,590px);background:linear-gradient(oklch(0.985 0.001 60 / .035) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,oklch(0.985 0.001 60 / .035) 1px,transparent 1px) 0 0/28px 100%}
.b{stroke:oklch(0.985 0.001 60 / .64)}
.bs{fill:oklch(0.985 0.001 60 / .13);stroke:oklch(0.985 0.001 60 / .64)}
.f{stroke:oklch(0.985 0.001 60 / .28)}
.fs{fill:oklch(0.985 0.001 60 / .24)}
.lbl{fill:oklch(0.985 0.001 60 / .58)}
.lay.on{stroke:var(--orange);stroke-width:1.4}
.lay.on .so{fill:var(--orange)}
.lay.on .t{fill:var(--orange)}
.lay.on .cone{opacity:.09}
.sheet[data-k="betrieb"] .lay:not(.on),.sheet[data-k="plan"] .lay:not(.on){opacity:.17}
.call path{stroke:var(--text)}
.call circle{fill:var(--text);stroke:var(--bg)}
.call text{fill:var(--bg)}
.legend li{color:var(--text)}
.legend li::before{background:var(--text);color:var(--bg)}
.sheet-foot .arrow{color:oklch(0.76 0.16 55)}
/* Der gewählte Bereich greift als oranger Balken in die Bühne */
.gw button{transition:background .4s var(--ease),color .3s var(--ease),padding .4s var(--ease),width .5s var(--ease)}
.gw button[aria-selected="true"]{width:calc(100% + var(--hg))}

/* Kennzahlen: weiße Karte, die über die Unterkante des Hero greift */
.facts{background:none;border:0;position:relative;z-index:3;margin-top:-48px}
.facts ul{background:var(--paper);border-top:4px solid var(--orange);box-shadow:var(--shadow);padding:clamp(22px,2.6vw,34px) clamp(8px,1.4vw,20px)}
.facts li:first-child{border-left:0}

/* Auswahl auf Grau, deckt den Auslauf der Bühne sauber ab */
.finder{position:relative;z-index:2;background:var(--paper-2);padding-top:clamp(72px,9vw,128px)}

/* Leistungen: dunkle Seitenleiste auf Weiß */
#leistungen{background:var(--paper)}
.visual{background:var(--bg);border:0;box-shadow:var(--shadow)}
.vnum{color:var(--text)}
.vis-pk .pk-p,.vis-pk .pk-s{fill:oklch(0.985 0.001 60 / .2)}
.vis-pk .cur{fill:var(--orange)}
.vidx a:hover{color:var(--text)}

/* Arbeitsweise: die vier Schritte liegen als weiße Karte auf dem Fotoband und greifen in den nächsten Bereich */
.life{display:flow-root;overflow:visible;z-index:2;padding-bottom:0}
.track{--mute:oklch(0.47 0.004 60);--rule:oklch(0.3 0.004 60 / .18);background:var(--paper);color:var(--bg);border-top:4px solid var(--orange);box-shadow:0 26px 70px oklch(0.2 0.004 60 / .26);
  padding:76px clamp(20px,3vw,44px) clamp(28px,3vw,44px);margin-bottom:calc(-1*var(--lap));z-index:2}
.track::before,.track::after{left:clamp(20px,3vw,44px);width:calc(100% - 2*clamp(20px,3vw,44px));top:41px}
.track .pk{background:var(--paper);box-shadow:0 0 0 6px var(--paper)}
.track .pk-p,.track .pk-s{stroke:oklch(0.3 0.004 60 / .4)}
.why{padding-top:calc(var(--sec) + var(--lap))}
.seals li{border:0;box-shadow:0 16px 44px oklch(0.3 0.004 60 / .12)}

/* Zielgruppen: Anthrazit mit weißer Schrift und großem Zeichen im Anschnitt */
.aud{position:relative;overflow:hidden;background:var(--bg)}
.aud .wrap{position:relative;z-index:1}
.aud li{border-top-color:oklch(0.985 0.001 60 / .22)}
.aud li h3{color:var(--text)}
.aud li p{color:oklch(0.9 0.002 60)}
.aud-pk{position:absolute;right:-170px;top:-150px;width:min(58vw,640px);aspect-ratio:1;pointer-events:none}
.aud-pk .pk-p,.aud-pk .pk-s{fill:none;stroke:oklch(0.985 0.001 60 / .1);stroke-width:1px;vector-effect:non-scaling-stroke}

/* Karriere: Stellen als weiße Karte auf Grau */
.jobs{padding-bottom:calc(var(--sec) + 48px)}
.joblist{background:var(--paper);border-top:4px solid var(--orange);box-shadow:var(--shadow);padding:4px clamp(18px,2.4vw,32px)}
.joblist li:last-child a{border-bottom:0}

/* Kontakt: dunkler Abschluss, das Formular greift als weiße Karte nach oben in die Karriere */
.contact{background:var(--bg)}
.contact h2{color:var(--text)}
#form{--mute:oklch(0.47 0.004 60);--rule:oklch(0.3 0.004 60 / .18);--accent-text:var(--orange-text);background:var(--paper);color:var(--bg);border-top:4px solid var(--orange);box-shadow:0 26px 70px oklch(0.15 0.004 60 / .38);
  padding:clamp(22px,3vw,40px);margin-top:calc(-1*var(--sec) - 48px);position:relative;z-index:2}
.bg-pk{right:auto;left:-170px;bottom:-210px}
.bg-pk .pk-p,.bg-pk .pk-s{stroke:oklch(0.985 0.001 60 / .09)}
footer{background:oklch(0.24 0.004 60)}

@media (max-width:920px){
  .sheet{margin:10px calc(-1*var(--edge)) calc(-1*var(--hpb) - 128px);padding:24px var(--edge) calc(var(--hpb) + 128px + 20px)}
  .gw button[aria-selected="true"]{width:auto}
  #form{margin-top:0}
  .jobs{padding-bottom:var(--sec)}
}

/* ==========================================================================
   Graphit und Szene: Das Gebäude bleibt beim Scrollen stehen, die Leistungen
   laufen daneben durch, die Ansicht fährt je Gewerk an die passende Stelle.
   ========================================================================== */
:root{
  --bg:oklch(0.175 0.004 80);
  --bg-2:oklch(0.215 0.004 80);
  --bg-3:oklch(0.275 0.005 80);
  --paper:oklch(0.995 0.001 80);
  --paper-2:oklch(0.965 0.003 80);
  --paper-3:oklch(0.93 0.004 80);
  --mute:oklch(0.44 0.004 80);
  --rule:oklch(0.175 0.004 80 / .16);
  --shadow:0 24px 64px oklch(0.175 0.004 80 / .2);
  --head-h:86px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage-col,.aud,.contact,.life,footer{--mute:oklch(0.8 0.003 80);--rule:oklch(1 0 0 / .14);--accent-text:var(--orange);color:var(--text)}

/* Graphitflächen: leichter Lichtverlauf, feines Korn, helle Kante statt flacher Fläche */
.aud,.contact{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 70%);border-top:1px solid oklch(1 0 0 / .08)}
.aud::before,.contact::before,.stage::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
footer{background:oklch(0.14 0.004 80)}

/* ---- Szene ---- */
.scene{position:relative;background:var(--paper);overflow-x:clip}
.scene-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"intro stage" "steps stage";column-gap:var(--hg)}
.intro{grid-area:intro;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hpt) - 24px) 0 56px}
.intro .lede{margin-top:1.1em;color:var(--mute);font-size:var(--fs-lg);max-width:40ch}
.intro .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8em}
.cue{display:flex;align-items:center;gap:14px;margin-top:clamp(28px,7vh,72px);font-size:var(--fs-sm);color:var(--mute)}
.cue i{width:1px;height:46px;background:var(--rule);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--orange);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.steps{grid-area:steps;padding-bottom:clamp(110px,16vh,180px)}
.step{min-height:88vh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:0;opacity:.28;transition:opacity .6s var(--ease)}
.step.now{opacity:1}
.step h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:var(--fs-h2);line-height:1.06;letter-spacing:.005em}
.step>p{margin:1em 0 1.6em;max-width:46ch;color:var(--mute)}
.step .kicker{display:block;margin-bottom:1em}

/* Bühne: Graphit bis zum rechten Rand, bleibt beim Scrollen stehen */
.stage-col{grid-area:stage;position:relative;background:var(--bg);margin-right:calc(-1*var(--edge))}
.stage{position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h));display:grid;grid-template-rows:auto minmax(0,1fr);
  background:radial-gradient(82% 60% at 50% 46%,var(--bg-3) 0%,var(--bg) 80%);box-shadow:inset 1px 0 0 oklch(1 0 0 / .08)}
.stage>*{position:relative}
.stage-top,.stage-bot{padding:16px var(--edge) 16px clamp(16px,2vw,32px)}
.stage-top{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--rule)}
.nav-pk{width:34px;height:34px;flex:none}
.nav-pk .pk-p,.nav-pk .pk-s{fill:oklch(1 0 0 / .2);transition:fill .5s var(--ease)}
.nav-pk .cur{fill:var(--orange)}
.stage-top small{display:block;min-height:1.25em;font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--mute)}
.stage-top b{display:block;font-weight:600;font-size:1.05rem;line-height:1.25}
.stage-nav{display:flex;gap:4px;margin-left:auto}
.stage-nav button{appearance:none;width:40px;height:34px;border:1px solid var(--rule);background:none;color:var(--mute);font:600 .85rem "Barlow",system-ui,sans-serif;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.stage-nav button:hover{color:var(--text);border-color:oklch(1 0 0 / .42)}
.stage-nav button[aria-current="step"]{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.stage-bot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;pointer-events:none}
.stage-bot>*{pointer-events:auto}
.stage-hint[hidden]{display:none}
.stage-hint{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);color:var(--mute)}
.stage-hint::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 8px var(--text)}
.tip{position:relative;max-width:480px;background:var(--paper);color:var(--bg);border-top:3px solid var(--orange);padding:14px 46px 16px 16px;box-shadow:0 18px 44px oklch(0 0 0 / .45);animation:tip .45s var(--ease)}
.tip[hidden]{display:none}
.tip b{display:block;margin-bottom:.25em;font-size:1.05rem;font-weight:600}
.tip p{font-size:var(--fs-sm);line-height:1.45;color:oklch(0.36 0.004 80)}
.tip-x{position:absolute;right:6px;top:6px;width:32px;height:32px;border:0;background:none;color:var(--bg);font-size:1.35rem;line-height:1;cursor:pointer}
@keyframes tip{from{opacity:0;transform:translateY(10px)}}

/* Röntgen-Isometrie */
.stage-view{min-height:0;overflow:hidden}
:is(#iso,#iso2){position:absolute;inset:0;display:block;width:100%;height:100%}
:is(#iso,#iso2) *{vector-effect:non-scaling-stroke}
.gnd{fill:oklch(1 0 0 / .02);stroke:oklch(1 0 0 / .1);stroke-width:1}
.slab{fill:oklch(1 0 0 / .05);stroke:oklch(1 0 0 / .42);stroke-width:1}
.slab.s1{fill:oklch(1 0 0 / .1)}
.slab.s2{fill:oklch(1 0 0 / .17)}
.slab.ug{fill:oklch(1 0 0 / .03);stroke:oklch(1 0 0 / .22)}
.edge{fill:none;stroke:oklch(1 0 0 / .42);stroke-width:1}
.edge.back{stroke:oklch(1 0 0 / .16)}
.edge.thin{stroke:oklch(1 0 0 / .22)}
.dash{stroke-dasharray:4 4}
.mull{stroke:oklch(1 0 0 / .1);stroke-width:1}
.core{color:oklch(1 0 0 / .5)}
.fa{fill:currentColor;fill-opacity:.09;stroke:currentColor;stroke-width:1;stroke-linejoin:round}
.fa.ft{fill-opacity:.24}
.fa.fr{fill-opacity:.15}
.fa.fl{fill-opacity:.07}
.lay{color:oklch(0.86 0.003 80);opacity:0;transition:opacity .7s var(--ease),color .5s var(--ease)}
.lay.on{opacity:1;color:var(--orange)}
:is(#iso,#iso2)[data-k="intro"] .lay{opacity:.5}
:is(#iso,#iso2)[data-k="intro"] .lay[data-sys="betrieb"],:is(#iso,#iso2)[data-k="intro"] .lay[data-sys="plan"]{opacity:0}
:is(#iso,#iso2)[data-k="betrieb"] .lay:not(.on):not([data-sys="plan"]),:is(#iso,#iso2)[data-k="plan"] .lay:not(.on):not([data-sys="betrieb"]){opacity:.3}
.lay .p{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lay .thin{stroke-width:1}
.lay .hd{fill:currentColor;stroke:none}
.lay .wall{fill:currentColor;fill-opacity:.15;stroke:currentColor;stroke-width:1}
.lay .lum{fill:currentColor;stroke:none}
.lay .plane{fill:currentColor;fill-opacity:.07;stroke:currentColor;stroke-width:1;stroke-dasharray:7 5}
.lay .axis{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:12 4 2 4}
.lay .bub{fill:var(--bg);stroke:currentColor;stroke-width:1}
.lay text{fill:currentColor;stroke:none;font:600 9.5px "Barlow",system-ui,sans-serif}
.lay .tick{fill:none;stroke:var(--bg);stroke-width:1.8}
.lay .flow{stroke-dasharray:6 6}
.hs{display:none;cursor:pointer;outline:none}
.lay.on .hs{display:block}
.hs-r{fill:oklch(0.175 0.004 80 / .7);stroke:var(--text);stroke-width:1.5;transition:stroke .25s var(--ease),fill .25s var(--ease)}
.hs-d{fill:var(--text);transition:fill .25s var(--ease)}
.hs:hover .hs-r,.hs:focus-visible .hs-r{stroke:var(--orange);stroke-width:2.5}
.hs.sel .hs-r{fill:var(--orange);stroke:var(--orange)}
.hs.sel .hs-d{fill:var(--bg)}
@media (prefers-reduced-motion:no-preference){
  .lay.on .flow{animation:flow 2.8s linear infinite}
  .js .lvl{animation:lvl 1s var(--ease) both;animation-delay:calc(var(--i)*120ms + .15s)}
}
@keyframes lvl{from{opacity:0;transform:translateY(26px)}}

/* Abstände vereinheitlicht: ein Maß für Bereichsränder (--sec), eines für Überschrift zu Inhalt (--gap-head) */
:root{--gap-head:clamp(32px,4vw,56px)}
.finder{padding-top:clamp(56px,6vw,88px)}
.finder-head{align-items:center;margin-bottom:clamp(24px,2.6vw,36px)}
.finder-pk{width:clamp(96px,8.6vw,120px)}
.svc-head{margin-bottom:var(--gap-head)}
.track{padding-top:92px}
.track::before,.track::after{top:57px}
.qual{margin-bottom:clamp(56px,7vw,96px)}
.why ol{margin-top:20px}
.aud h2{max-width:none}
.aud ul{margin-top:var(--gap-head)}
.split article{padding-top:var(--sec);padding-bottom:var(--sec)}
.split article:first-child{padding-left:var(--edge);padding-right:clamp(24px,4vw,64px)}
.split article:last-child{padding-right:var(--edge);padding-left:clamp(24px,4vw,64px)}
.stage-bot{padding-top:44px;background:linear-gradient(0deg,oklch(0.175 0.004 80 / .92) 0%,oklch(0.175 0.004 80 / 0) 100%)}

@media (max-width:920px){
  .split article:first-child,.split article:last-child{padding-left:var(--edge);padding-right:var(--edge)}
  .scene-grid{grid-template-columns:1fr;grid-template-areas:"intro" "stage" "steps"}
  .intro{min-height:0;padding:calc(var(--hpt) - 16px) 0 32px}
  .cue{display:none}
  .stage-col{position:sticky;top:var(--head-h);z-index:5;margin:0 calc(-1*var(--edge))}
  .stage{position:relative;top:auto;height:52svh}
  .stage-top,.stage-bot{padding:10px var(--edge)}
  .stage-top b{font-size:.95rem}
  .stage-nav button{width:32px;height:30px}
  .stage-bot{min-height:0}
  .tip{position:absolute;left:var(--edge);right:var(--edge);bottom:10px;max-width:none}
  .steps{padding-top:28px}
  .step{min-height:62vh}
}

/* ==========================================================================
   Echtes 3D: Das Gebäude lässt sich drehen und zoomen, die Etagen fahren je
   Gewerk auseinander, die Leitungen wachsen. Die Auswahl schließt die Szene ab
   und markiert im Gebäude, was zum Vorhaben gehört.
   ========================================================================== */
.stage-view{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.stage.drag .stage-view{cursor:grabbing}
/* Nur die Markierungen nehmen Klicks an. Sonst fangen unsichtbare Ebenen (etwa die Schnittebene) Klicks auf darunterliegende Markierungen ab. */
:is(#iso,#iso2) .str,:is(#iso,#iso2) .lay{pointer-events:none}
:is(#iso,#iso2) .hs{pointer-events:auto}
.stage-ctl{position:absolute;right:var(--edge);top:16px;display:grid;gap:4px;cursor:default}
.stage-ctl button{appearance:none;display:grid;place-items:center;width:40px;height:34px;padding:0;border:1px solid var(--rule);background:oklch(0.175 0.004 80 / .7);color:var(--mute);cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.stage-ctl button:hover{color:var(--text);border-color:oklch(1 0 0 / .42)}
.stage-ctl button:disabled{opacity:.35;cursor:default;color:var(--mute);border-color:var(--rule)}
.stage-ctl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stage-nav button.in{border-color:var(--orange);color:var(--text)}

/* Auswahl im Gebäude: Anlagen des Vorhabens in Orange, alles andere tritt zurück */
.inst{transition:opacity .5s var(--ease),color .5s var(--ease)}
:is(#iso,#iso2)[data-k="finder"] .lay{opacity:1}
:is(#iso,#iso2)[data-k="finder"] .inst:not(.hi){opacity:.2}
:is(#iso,#iso2)[data-k="finder"] .lay[data-sys="betrieb"] .inst:not(.hi),:is(#iso,#iso2)[data-k="finder"] .lay[data-sys="plan"] .inst:not(.hi){opacity:0}
:is(#iso,#iso2)[data-k="finder"] .inst.hi{color:var(--orange)}
/* Ein Stichwort links zeigt seine Anlage einzeln: die übrigen markierten treten zurück wie alles andere */
:is(#iso,#iso2)[data-k="finder"] .inst.hi.lo{opacity:.2;color:oklch(0.86 0.003 80)}
:is(#iso,#iso2)[data-k="finder"] .lay[data-sys="betrieb"] .inst.hi.lo,:is(#iso,#iso2)[data-k="finder"] .lay[data-sys="plan"] .inst.hi.lo{opacity:0}
.chips li[role]{cursor:pointer;transition:box-shadow .3s var(--ease)}
.chips li[role]:hover,.chips li[role].cur,.chips li[role]:focus-visible{box-shadow:inset 0 0 0 2px var(--orange)}
@keyframes run{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:no-preference){
  .lay.on .flow,:is(#iso,#iso2)[data-k="finder"] .hi .flow{animation:run 2.8s linear infinite}
}

/* Auswahl als Schluss der Szene: steht in der linken Spalte, das Gebäude daneben zeigt, was dazugehört */
.step.finder{background:none;padding:0;z-index:auto}
.step .finder-head{margin-bottom:24px}
.step .finder-pk{width:84px}
.step .pick{grid-template-columns:1fr 1fr}
.step .pick button{padding:14px 16px 16px;font-size:1rem}
.step .pick button small{margin-bottom:.5em}
.step .pick button:nth-child(2n){border-right:0}
.step .pick button:nth-child(-n+2){border-bottom:1px solid var(--bg)}
.step .answer{display:block;padding-top:26px}
.step .answer p{font-size:var(--fs-lg);line-height:1.5;max-width:40ch}
.step .chips{gap:8px;margin-top:20px}
.step .chips li{padding:7px 14px 7px 11px;font-size:var(--fs-sm)}
.step .answer .btn{margin-top:28px}

/* Ernstfall: Die Wirkkette steht links als Liste und läuft im Gebäude ab. Anlagen im Einsatz orange, Sicherheitslicht und Löschwasser weiß, Abgeschaltetes fast aus. */
.step .fall-pick{margin-top:4px}
.step .fall-pick button:nth-child(-n+2){border-bottom:0}
.chain{margin-top:22px;border-top:1px solid var(--bg)}
.chain li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule);transition:opacity .5s var(--ease)}
.chain small{font-weight:600;font-size:.8rem;letter-spacing:.08em;color:var(--mute);white-space:nowrap;transition:color .4s var(--ease)}
.chain.run li{opacity:.3}
.chain.run li.on{opacity:1}
.chain.run li.on small{color:var(--orange-text)}
.step>.chain-note{margin:16px 0 0;font-size:var(--fs-sm);max-width:52ch}
.lay[data-sys="fx"]{display:none;color:var(--orange)}
.lay .wt{stroke:var(--text)}
.lay text.big{font-size:15px}
/* Planertisch (Station 05): Blatt, Plankopf und Arbeitsmittel liegen um den Grundriss und erscheinen erst, wenn die Ansicht zurückfährt */
.lay .papier{fill:currentColor;fill-opacity:.05;stroke:none}
.lay text.t5{font-size:5.5px;letter-spacing:.05em}
.lay text.t7{font-size:7px;letter-spacing:.03em}
.lay text.t8{font-size:8.5px}
.lay text.t10{font-size:10px}
.lay text.t13{font-size:13px;letter-spacing:.03em}
.lay text.dim{fill-opacity:.62}
.lay[data-sys="tisch"],.lay [data-inst="riss"]{color:oklch(0.93 0.003 80)}
.lay[data-sys="tisch"] :is([data-inst="stift"],[data-inst="marke"]){color:var(--orange)}
/* Ohne Grafikkarte: In der Draufsicht treten Zentralen, Dachgeräte und die Wände der anderen Geschosse zurück, der Grundriss übernimmt */
#iso.top[data-k="plan"] :is([data-inst="sprz"],[data-inst="rwa"],[data-inst="bma"],[data-inst="ahu"],[data-inst="klima"],[data-inst="san"],[data-inst="kessel"],[data-inst="tb"],[data-inst="nshv"],[data-inst="it"],[data-inst="nea"]){opacity:0}
:is(#iso,#iso2)[data-k] .lay[data-sys="tisch"]:not(.on):not(.x){opacity:0}
#iso.tisch[data-k="plan"] .lay[data-sys="tisch"]:not(.on):not(.x){opacity:1}
/* In der Draufsicht fallen die Höhenkoten aufeinander */
#iso.top [data-inst="doku"]{opacity:0}
:is(#iso,#iso2)[data-k="fall"] .lay{opacity:1}
:is(#iso,#iso2)[data-k="fall"] .lay[data-sys="fx"]{display:block}
:is(#iso,#iso2)[data-k="fall"] .lay[data-sys="plan"]{opacity:0}
:is(#iso,#iso2)[data-k="fall"] .lay .inst{opacity:.2}
:is(#iso,#iso2)[data-k="fall"] .lay[data-sys="betrieb"] .inst{opacity:0}
:is(#iso,#iso2)[data-k="fall"] .lay .inst.off{opacity:.06}
:is(#iso,#iso2)[data-k="fall"] .lay .inst.safe{opacity:1;color:var(--text)}
:is(#iso,#iso2)[data-k="fall"] .lay .inst.act,:is(#iso,#iso2)[data-k="fall"] .lay[data-sys="fx"] .inst{opacity:1;color:var(--orange)}
:is(#iso,#iso2)[data-fall="brand"] [data-inst="fxs"],:is(#iso,#iso2)[data-fall="strom"] [data-inst="fxb"]{display:none}
@media (prefers-reduced-motion:no-preference){
  :is(#iso,#iso2)[data-k="fall"] .act .flow{animation:run 2.8s linear infinite}
}

/* Echtes Licht: Die Grafikkarte zeichnet das Gebäude auf eine eigene Fläche unter der SVG-Ebene (aufgehellt über den Bühnengrund gelegt).
   Die SVG-Ebene behält dann nur Markierungen und Beschriftung. Ohne die Klasse .gl zeichnet sie wie bisher alles selbst. */
.glc{position:absolute;inset:0;width:100%;height:100%;display:none;mix-blend-mode:screen;pointer-events:none}
.gl .glc{display:block}
.gl .iso .str,.gl .iso .inst > :not(text):not(.bub):not(.keep){display:none}

/* Kennzahlen: Die Karte greift jetzt von der Szene in das Fotoband der Arbeitsweise und liegt dafür in diesem Bereich */
.life{padding-top:0}
.life .facts{margin-bottom:clamp(56px,6vw,88px)}
.life .facts ul{--mute:oklch(0.44 0.004 80);--rule:oklch(0.175 0.004 80 / .16);color:var(--bg)}

/* ==========================================================================
   Text steht: Auf breiten Bildschirmen scrollt der Text links nicht mehr durch. Er steht wie das Gebäude, und zu
   jeder Station erscheint ihr Text an derselben Stelle, in dem Moment, in dem das Gebäude umschaltet. Die Höhe von
   .story ist der Scrollweg (setzt das Skript). Ohne JavaScript und auf schmalen Bildschirmen fließt der Text wie bisher.
   ========================================================================== */
.story,.story-pin{display:contents}
/* Ernstfall: eigener Bereich weiter unten, vom ersten Block ganz getrennt und mit eigenem Gebäude. Heller Grund wie die übrigen
   Wechselflächen; das Gebäude steht auf einer Graphitkarte mit oranger Oberkante, so hoch wie der Text daneben. Ist der Bildschirm
   niedriger als der Text, bleibt die Karte beim Scrollen im Blick. */
.fallsec{background:var(--paper-2)}
.fall-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"text stage" "list stage";grid-template-rows:auto auto;column-gap:var(--hg)}
.fall-text{grid-area:text;align-self:end}
.fall-list{grid-area:list;align-self:start}
.fall-text .kicker{display:block;margin-bottom:12px}
.fall-text .lede{margin:16px 0 26px;max-width:46ch;color:var(--mute);font-size:var(--fs-lg)}
.fallsec .pick{grid-template-columns:1fr 1fr}
.fallsec .pick button{padding:14px 16px 16px;font-size:1rem}
.fallsec .pick button small{margin-bottom:.5em}
.fallsec .pick button:nth-child(-n+2){border-bottom:0}
.fallsec .chain-note{margin:16px 0 0;font-size:var(--fs-sm);max-width:52ch;color:var(--mute)}
.fall-stage{grid-area:stage;position:sticky;top:calc(var(--head-h) + 20px);isolation:isolate;min-height:440px;max-height:calc(100svh - var(--head-h) - 40px);display:grid;grid-template-rows:auto minmax(0,1fr);
  --mute:oklch(0.8 0.003 80);--rule:oklch(1 0 0 / .14);color:var(--text);
  background:radial-gradient(82% 60% at 50% 46%,var(--bg-3) 0%,var(--bg) 80%);border-top:4px solid var(--orange);box-shadow:0 26px 70px oklch(0.175 0.004 80 / .3)}
.fall-stage::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.fall-stage>*{position:relative}
.fall-stage .stage-top{padding-right:clamp(16px,2vw,32px)}
.fall-marks{display:flex;gap:4px;margin-left:auto}
.fall-marks li{display:grid;place-items:center;width:40px;height:34px;border:1px solid var(--rule);color:var(--mute);font-weight:600;font-size:.85rem;transition:color .4s var(--ease),border-color .4s var(--ease)}
.fall-marks li.in{border-color:var(--orange);color:var(--text)}
.fall-view{min-height:0;overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.fall-view.drag{cursor:grabbing}
.fall-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:44px clamp(16px,2vw,32px) 16px;font-size:var(--fs-sm);color:var(--mute);
  background:linear-gradient(0deg,oklch(0.175 0.004 80 / .92) 0%,oklch(0.175 0.004 80 / 0) 100%);pointer-events:none}
@media (max-width:920px){
  .fall-grid{grid-template-columns:1fr;grid-template-areas:"text" "stage" "list"}
  .fall-stage{position:relative;top:auto;margin:28px calc(-1*var(--edge)) 4px;height:56svh;min-height:0;max-height:none}
  .fall-marks li{width:32px;height:30px}
}
@media (min-width:921px){
  .js .scene-grid{grid-template-areas:"story stage"}
  .js .story{display:block;grid-area:story;position:relative}
  .js .story-pin{display:block;position:sticky;top:var(--head-h);height:calc(100svh - var(--head-h))}
  .js .steps{padding:0}
  /* --fit verkleinert einen Text leicht, wenn er sonst nicht in den sichtbaren Bereich passt; --pan lässt den Rest mit dem Scrollen wandern */
  .js .story-pin .intro,.js .story-pin .step{position:absolute;inset:0;min-height:0;padding:0;display:flex;flex-direction:column;justify-content:center;opacity:1;pointer-events:none;transform:translateY(var(--pan,0px)) scale(var(--fit,1));transform-origin:0 50%;transition:none}
  .js .story-pin .intro.tall,.js .story-pin .step.tall{justify-content:flex-start;padding-top:22px;transform-origin:0 0}
  .js .story-pin .intro.now,.js .story-pin .step.now{pointer-events:auto}
  /* Die Zeilen kommen nacheinander von unten und gehen nach oben, beim Zurückscrollen umgekehrt */
  .js .story-pin .intro > *,.js .story-pin .step > *{opacity:0;transform:translateY(18px);transition:opacity .25s var(--ease),transform .45s var(--ease)}
  .js .story-pin .intro.past > *,.js .story-pin .step.past > *{transform:translateY(-18px)}
  .js .story-pin .intro.now > *,.js .story-pin .step.now > *{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.12s + var(--k,0) * .055s),transform .8s var(--ease) calc(.12s + var(--k,0) * .055s)}
  .js .story-pin .intro > :nth-child(2),.js .story-pin .step > :nth-child(2){--k:1}
  .js .story-pin .intro > :nth-child(3),.js .story-pin .step > :nth-child(3){--k:2}
  .js .story-pin .intro > :nth-child(4),.js .story-pin .step > :nth-child(4){--k:3}
  .js .story-pin .intro > :nth-child(5),.js .story-pin .step > :nth-child(5){--k:4}
  .js .story-pin .intro > :nth-child(6),.js .story-pin .step > :nth-child(6){--k:5}
}
/* Niedrige Bildschirme: Texte kompakter setzen, damit sie neben dem Gebäude Platz haben */
@media (min-width:921px) and (max-height:820px){
  .js .step h2,.js .step h3{font-size:clamp(1.9rem,3vw,2.6rem)}
  .js .step .kicker{margin-bottom:.7em}
  .js .step>p{margin:.7em 0 1em}
  .js .step .groups div{padding:9px 0}
  .js .chain{margin-top:14px}
  .js .chain li{padding:6px 0}
  .js .step>.chain-note{margin-top:10px}
  .js .step .finder-head{margin-bottom:16px}
  .js .step .pick button{padding:10px 14px 12px}
  .js .step .answer{padding-top:18px}
  .js .step .chips{margin-top:14px}
  .js .step .answer .btn{margin-top:18px}
}

@media (max-width:920px){
  .stage-hint .more{display:none}
  .stage-ctl{top:10px}
  .stage-ctl button{width:32px;height:30px}
  .stage-ctl [data-act="in"],.stage-ctl [data-act="out"]{display:none}
}

/* ===== Mehrseitige Website (ab 12.10.2026): Hauptmenü, Leistungsseiten ===== */

/* Hauptmenü: "Leistungen" klappt als weiße Karte auf. Beim Überfahren erscheint links ein schmaler oranger Strich, keine Fläche. */
.nav{align-items:center}
.nav-item{position:relative}
.nav-top{appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:.45em;font:400 1rem "Barlow",system-ui,sans-serif;color:inherit;transition:color .2s}
.nav-top:hover,.nav-item.open .nav-top{color:var(--orange-text)}
.nav .chev{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease)}
.nav-item.open .chev{transform:rotate(180deg)}
.nav>a[aria-current="page"],.nav-top.cur{font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:9px}
.sub{position:absolute;left:-22px;top:calc(100% + 16px);min-width:340px;margin:0;padding:8px 0;list-style:none;background:var(--paper);color:var(--bg);border-top:3px solid var(--orange);box-shadow:0 22px 50px oklch(0.2 0.004 60 / .2);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-19px;height:19px}
.nav-item.open .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sub a,.sub .soon{display:block;padding:10px 22px;font:400 1rem "Barlow",system-ui,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;color:inherit;transition:box-shadow .2s var(--ease)}
.sub a:hover,.sub a:focus-visible{color:inherit;box-shadow:inset 3px 0 0 var(--orange)}
.sub a[aria-current="page"]{font-weight:600;box-shadow:inset 3px 0 0 var(--orange)}
.sub .soon{color:var(--mute)}
.sub .soon i{grid-column:2;font-style:normal;font-size:.8rem}
.menu-btn{display:none}
@media (max-width:920px){
  .menu-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:10px;padding:0;border:1px solid var(--rule);background:none;color:inherit;cursor:pointer}
  .menu-btn span,.menu-btn span::before{display:block;width:20px;height:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
  .menu-btn span{position:relative;transform:translateY(-3px)}
  .menu-btn span::before{content:"";position:absolute;left:0;top:6px}
  .menu-open .menu-btn span{transform:rotate(45deg)}
  .menu-open .menu-btn span::before{top:0;transform:rotate(-90deg)}
  .nav{display:none;position:fixed;left:0;right:0;top:var(--head-h);max-height:calc(100svh - var(--head-h));overflow:auto;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:4px var(--edge) 28px;background:var(--paper);box-shadow:0 22px 50px oklch(0.2 0.004 60 / .2)}
  .menu-open .nav{display:flex}
  .nav>a,.nav-top{padding:16px 0;border-bottom:1px solid var(--rule);font-size:1.1rem;width:100%;text-align:left}
  .nav-top{cursor:default}
  .nav .chev{display:none}
  .sub{position:static;min-width:0;padding:4px 0 8px;border-top:0;border-bottom:1px solid var(--rule);box-shadow:none;opacity:1;visibility:visible;transform:none}
  .sub::before{display:none}
  .sub a,.sub .soon{padding:10px 0 10px 14px}
}

/* Leistungsseite: oben links der Text, rechts das Gebäude mit dem Gewerk der Seite, bis zum rechten Rand wie in der Szene der Startseite */
.lp-hero{position:relative;background:var(--paper);overflow-x:clip;padding-top:var(--head-h)}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px)}
.lp-hero-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6vh,72px) 0}
.lp-hero-text .kicker{display:block;margin-bottom:12px}
.lp-hero h1{font-size:clamp(2.3rem,3.7vw,3.5rem)}
.lp-hero-text .lede{margin-top:16px;color:var(--mute);font-size:var(--fs-lg);max-width:42ch}
.lp-hero-text .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:30px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,4vh,44px);font-size:var(--fs-sm);color:var(--mute)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--orange-text)}
.lp-col{grid-area:auto}
.lp-hero .stage{position:relative;top:auto;height:auto;min-height:clamp(520px,calc(100svh - var(--head-h)),880px)}
.gw-view{cursor:grab;touch-action:pan-y}
.gw-view.drag{cursor:grabbing}

/* Abschnitte der Leistungsseite */
.lp-sec{padding:var(--sec) 0;background:var(--paper);color:var(--bg)}
.lp-sec.alt{background:var(--paper-2)}
.lp-head{max-width:62ch;margin-bottom:var(--gap-head)}
.lp-head .kicker,.lp-pruef-grid .kicker{display:block;margin-bottom:12px}
.lp-head p,.lp-pruef-grid>div:first-child>p{margin-top:16px;color:var(--mute);font-size:var(--fs-lg)}
.lp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin:0;padding:0;list-style:none}
.lp-cols>li{border-top:2px solid var(--bg);padding-top:20px}
.lp-cols h3{margin-bottom:14px}
.lp-cols ul,.lp-list{margin:0;padding:0;list-style:none}
.lp-cols ul li,.lp-list li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--rule)}
.lp-cols ul li::before,.lp-list li::before{content:"";position:absolute;left:2px;top:1.02em;width:10px;height:10px;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.lp-pruef-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:start}
.lp-list{margin-top:26px}
.lp-soon{margin-top:26px;font-size:var(--fs-sm);color:var(--mute)}
.lp-table{background:var(--paper);border-top:4px solid var(--orange);box-shadow:0 26px 70px oklch(0.2 0.004 60 / .16);padding:clamp(18px,2.4vw,32px)}
.lp-table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.lp-table caption{text-align:left;font-weight:600;font-size:var(--fs-h3);padding-bottom:14px}
.lp-table th,.lp-table td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-bottom:1px solid var(--rule)}
.lp-table thead th{font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--bg)}
.lp-table tbody th{font-weight:600;white-space:nowrap}
.lp-table td:last-child{color:var(--mute)}
.lp-note{margin-top:16px;font-size:var(--fs-sm);color:var(--mute)}
.lp-table .todo{margin-top:8px;font-size:var(--fs-sm);color:var(--orange-text)}
.lp-qual .qual{margin-bottom:0}
.lp-links{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);border-top:2px solid var(--bg)}
.lp-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 8px;padding:18px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.lp-links b{font-weight:600;font-size:var(--fs-h3);line-height:1.25}
.lp-links i{font-style:normal;transition:transform .4s var(--ease)}
.lp-links i::before{content:"→"}
.lp-links a:hover i{transform:translateX(6px);color:var(--orange-text)}
.lp-cta .contact-grid{align-items:center}
.lp-cta address{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
.lp-cta address .btn{justify-self:start;grid-column:1/-1;margin-top:6px}
@media (max-width:920px){
  .lp-hero-grid{grid-template-columns:1fr;gap:0}
  .lp-hero-text{padding:28px 0 32px}
  .lp-col{margin:0 calc(-1*var(--edge))}
  .lp-hero .stage{min-height:min(74svh,560px)}
  .lp-cols{grid-template-columns:1fr}
  .lp-pruef-grid{grid-template-columns:1fr}
  .lp-links{grid-template-columns:1fr}
  .lp-table tbody th{white-space:normal}
}
@media (max-width:560px){
  .lp-table thead{display:none}
  .lp-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--rule)}
  .lp-table th,.lp-table td{display:block;padding:2px 0;border:0}
  .lp-cta address{grid-template-columns:1fr}
}

/* ===== Übrige Leistungsseiten (Schritt 13): Schrittkarte, Verweise mit Beschreibung, Seite ohne Gebäude ===== */

/* Sichtbare Vermerke im Entwurf: was HTSG noch gegenlesen oder liefern muss */
.todo{color:var(--orange-text);font-size:var(--fs-sm)}
p.todo{margin-top:14px}
/* Auf Graphit wird die Schaltfläche beim Überfahren weiß statt dunkel */
.contact .btn:hover,.lp-band .btn:hover{background:var(--text);border-color:var(--text);color:var(--bg)}

/* Schrittkarte auf einer Leistungsseite: liegt auf der hellen Wechselfläche und greift dort nicht in den nächsten Bereich */
.lp-sec .track{margin-bottom:0}
.lp-cols.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-more{margin-top:14px}
.lp-pruef-grid .cta{margin-top:26px}

/* Verweise mit Beschreibung: Nummer, Name, Beispiele, Pfeil in einer Zeile */
.lp-links.wide{grid-template-columns:1fr}
.lp-links.wide a{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:0 clamp(12px,2vw,32px)}
.lp-links.wide span{color:var(--mute)}

/* Seite ohne Gebäude (Mängelbeseitigung): Graphitband mit dem Einstieg, die Schrittkarte greift als weiße Karte in den nächsten Bereich */
.lp-band{position:relative;z-index:2;isolation:isolate;display:flow-root;overflow-x:clip;padding:calc(var(--head-h) + clamp(36px,6vh,72px)) 0 0;
  --mute:oklch(0.8 0.003 80);--rule:oklch(1 0 0 / .14);--accent-text:var(--orange);color:var(--text);background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 70%)}
.lp-band::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.lp-band .aud-pk{z-index:-1;top:-110px}
.lp-band .kicker{display:block;margin-bottom:12px}
.lp-band h1{font-size:clamp(2.3rem,3.7vw,3.5rem);max-width:26ch}
.lp-band .lede{margin-top:16px;max-width:58ch;color:var(--mute);font-size:var(--fs-lg)}
.lp-band .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:30px 0 var(--gap-head)}
.lp-band .crumb a:hover{color:var(--orange)}
.lp-band .track{margin-bottom:calc(-1*var(--lap))}
.lp-band + .lp-sec{padding-top:calc(var(--sec) + var(--lap))}
.lp-band + .lp-sec>.wrap>.todo:first-child{margin:calc(18px - var(--sec)) 0 calc(var(--sec) - 44px)}
.track.five{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:clamp(14px,1.8vw,32px)}
@media (max-width:1100px){
  .track.five{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:80px}
}
@media (max-width:920px){
  .track{row-gap:80px}
  .lp-cols.two{grid-template-columns:1fr}
  .lp-links.wide a{grid-template-columns:minmax(0,1fr) auto}
  .lp-links.wide span{grid-column:1;grid-row:2;margin-top:4px}
  .track.five{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .track.five{grid-template-columns:1fr}
}

/* ===== Unternehmen, Karriere, Stellen, Kontakt, Impressum (Schritt 14) ===== */

/* Seitenkopf als Graphitband auch für diese Seiten. Eine weiße Karte (.over) greift in den nächsten Bereich; sie steht entweder
   unter dem Text (Kennzahlen) oder rechts neben ihm (.band-grid: Stellen, Formular). Ohne Karte: .flat */
.lp-band .over{--mute:oklch(0.44 0.004 80);--rule:oklch(0.175 0.004 80 / .16);--accent-text:var(--orange-text);color:var(--bg);position:relative;z-index:2;margin-bottom:calc(-1*var(--lap))}
.lp-band.flat{padding-bottom:clamp(40px,6vh,72px)}
.lp-band.flat + .lp-sec{padding-top:var(--sec)}
.lp-band.flat .lede{margin-bottom:0}
.band-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:end}
.band-grid>:first-child{align-self:start;padding-bottom:clamp(40px,6vh,72px)}
.band-grid .cta{margin-bottom:0}
.band-mail{margin-top:26px;font-weight:600}
.band-mail a{color:inherit;text-decoration:none;border-bottom:2px solid var(--orange)}
.lp-band address{margin-top:30px}
.lp-band .facts{margin-top:0}
.lp-band .facts ul{margin:0;list-style:none}
.lp-band #form{margin-top:0}
.lp-band .joblist{margin-top:0;list-style:none}
.lp-band .lp-table{box-shadow:0 26px 70px oklch(0.15 0.004 60 / .38)}

/* Spalten mit Fließtext statt Liste, Kontaktwege, Rechtstext */
.lp-cols>li>p{color:var(--mute)}
.lp-cols>li>p + p{margin-top:12px}
.lp-cols>li>p a{color:var(--bg);font-weight:600;text-decoration:none;border-bottom:2px solid var(--orange)}
.lp-cols>li>.arrow{margin-top:14px}
.lp-table td .todo,.lp-table td.todo{margin:0;font-size:inherit;color:var(--orange-text)}
.lp-cols + .todo,.lp-links + .todo{margin-top:26px}
.legal{max-width:70ch;margin-left:0}
.legal h2{font:600 var(--fs-h3)/1.25 "Barlow",system-ui,sans-serif;letter-spacing:0;text-transform:none;margin:2.2em 0 .5em}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:.5em}
.legal a{color:var(--bg);text-decoration:none;border-bottom:2px solid var(--orange)}
.legal .todo{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--rule)}
@media (max-width:920px){
  .band-grid{grid-template-columns:1fr;gap:0}
  .band-grid>:first-child{padding-bottom:32px}
}

/* ===== Startseite gekürzt (Schritt 15): Karriere als Anreißer, Kontakt als Band ohne Formular ===== */
.jobs.kurz{padding-bottom:var(--sec)}
.jobs-more{margin-top:1.4em}
.why-more{margin-top:20px}

/* ===== Sammeländerungen des Auftraggebers (Schritt 18) ===== */

/* Siegel: Text mit Luft zum Kartenrand, in zwei ausgeglichenen Zeilen */
.seals li{padding-inline:clamp(20px,2.4vw,32px)}
.seals li>span{max-width:24ch;text-wrap:balance}

/* "Warum HTSG": eigenes Graphitband. Die drei Aussagen stehen groß in Versalien (Überschrift 2), weiß, mit orangem Stern;
   der erklärende Satz steht rechts daneben. Auf der Startseite das einzige dunkle Band zwischen Arbeitsweise und Kontakt. */
.warum{position:relative;overflow:hidden;--mute:oklch(0.8 0.003 80);--rule:oklch(1 0 0 / .14);--accent-text:var(--orange);color:var(--text);
  background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 70%);border-top:1px solid oklch(1 0 0 / .08)}
.warum::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.warum .wrap{position:relative;z-index:1}
.warum .kicker{display:block;margin-bottom:22px}
.warum ol{margin:0;padding:0;list-style:none;border-top:1px solid oklch(1 0 0 / .34)}
.warum li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:center;padding:clamp(28px,3.6vw,48px) 0;border-bottom:1px solid var(--rule)}
.warum li h2{position:relative;padding-left:.84em;text-wrap:balance}
.warum li h2::before{content:"";position:absolute;left:0;top:.26em;width:.5em;height:.5em;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.js .warum li.reveal h2::before{transform:rotate(-135deg) scale(.2);transition:transform 1.1s var(--ease) .2s}
.js .warum li.reveal.in h2::before{transform:none}
.warum li p{color:var(--mute);font-size:var(--fs-lg);max-width:44ch}
.warum-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 48px;margin-top:clamp(28px,3.4vw,44px)}
.warum-foot p{color:var(--mute);max-width:62ch}

/* "Für wen wir arbeiten" auf hellem Grund */
.aud.hell{--mute:oklch(0.44 0.004 80);--rule:oklch(0.175 0.004 80 / .16);--accent-text:var(--orange-text);color:var(--bg);background:var(--paper);border-top:0}
.aud.hell::before{content:none}
.aud.hell ul{border-top:2px solid var(--bg)}
.aud.hell li{border-top:0;border-bottom:1px solid var(--rule)}
.aud.hell li h3{color:var(--bg)}
.aud.hell li p{color:var(--mute)}

/* Tiefgestellte Ziffer (CO2) in der Schrift der Überschrift */
sub{font-size:.62em;line-height:0;vertical-align:baseline;position:relative;bottom:-.14em}

/* Nachhaltigkeit: die einzige grüne Fläche der Website (Wunsch des Auftraggebers vom 12.10.2026), im Dunkelgrün der alten Seite.
   Daneben der Partner mit seinem Logo auf reinem Weiß (das Logo hat einen weißen Grund). */
.split article.nachhaltig{position:relative;overflow:hidden;isolation:isolate;--mute:oklch(0.91 0.02 165);--rule:oklch(1 0 0 / .22);--accent-text:var(--orange);color:var(--text);
  background:#004236;background:linear-gradient(165deg,color-mix(in oklab,#004236 88%,white) 0%,#004236 62%)}
.split article.nachhaltig::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.split article.nachhaltig .aud-pk{z-index:-1;right:-190px;top:-170px;width:min(46vw,520px)}
.split article.nachhaltig .aud-pk .pk-p,.split article.nachhaltig .aud-pk .pk-s{stroke:oklch(1 0 0 / .16)}
.split article.nachhaltig h2{color:var(--text)}
.split .hebel{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid oklch(1 0 0 / .4)}
.split .hebel li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:6px clamp(16px,2.4vw,36px);align-items:baseline;border:0;border-bottom:1px solid var(--rule);padding:16px 0;font-size:1rem}
.split .hebel h3{position:relative;padding-left:1.2em;color:var(--text)}
.split .hebel h3::before{content:"";position:absolute;left:0;top:.38em;width:.56em;height:.56em;background:var(--orange);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.split .hebel p{max-width:none}
.split article.partner{background:#fff}
.partner-logo{margin:.5em 0 .7em}
.partner-logo img{display:block;width:min(100%,320px);height:auto;margin-left:-11px}
@media (max-width:920px){
  .warum li{grid-template-columns:1fr;gap:12px}
  .split .hebel li{grid-template-columns:1fr}
}

/* ===== Arbeitsweise hell und von der Szene getrennt (Schritt 19) =====
   Vorher lag der Bereich als dunkles Fotoband direkt unter der dunklen Bühne, die Kennzahlen griffen aus der Szene herein
   ("dunkel auf dunkel", Rückmeldung des Auftraggebers). Jetzt: eigener Bereich auf Hellgrau mit Abstand zur Szene,
   Kennzahlen und Schritte als weiße Karten, keine Karte ragt mehr über eine Bereichsgrenze. */
.arbeit .facts{margin:0 0 clamp(56px,6vw,88px);z-index:auto}
.arbeit .facts ul{margin:0;list-style:none}

/* Tabellen (Fristen, Nachweise, Prüfungen) luftiger: oben stehen Text und Liste nebeneinander, die Tabelle liegt darunter als Karte
   in voller Breite, mit größerer Schrift und deutlich mehr Abstand ("alles zu eng und beieinander", Rückmeldung des Auftraggebers). */
.lp-pruef-grid{gap:clamp(32px,5vw,72px) clamp(32px,5vw,88px)}
@media (min-width:921px){
  .lp-pruef-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}   /* nur breit zweispaltig; schmal bleibt es bei einer Spalte */
}
.lp-pruef-grid>.lp-table{grid-column:1/-1;padding:clamp(24px,3.4vw,52px) clamp(22px,3.8vw,60px)}
.lp-pruef-side{padding-top:34px}
.lp-pruef-side .lp-list{margin-top:0;border-top:2px solid var(--bg)}
.lp-pruef-side .lp-list li{padding-top:13px;padding-bottom:13px}
.lp-pruef-side .lp-list li::before{top:1.28em}
.lp-soon{font-size:1rem}
.lp-pruef-grid>.lp-table table{font-size:1rem}
.lp-pruef-grid>.lp-table caption{padding-bottom:28px}
.lp-pruef-grid>.lp-table th,.lp-pruef-grid>.lp-table td{padding:21px 44px 21px 0;line-height:1.5}
.lp-pruef-grid>.lp-table thead th{padding-top:0;padding-bottom:14px}
.lp-pruef-grid>.lp-table tbody th{width:27%;font-size:1.0625rem;white-space:normal}
.lp-pruef-grid>.lp-table td:nth-child(3){width:27%;padding-right:0}
.lp-pruef-grid>.lp-table td:nth-child(2):last-child{padding-right:0}
.lp-pruef-grid>.lp-table tbody tr:last-child>*{border-bottom-color:var(--bg)}
.lp-pruef-grid>.lp-table .lp-note{margin-top:26px;max-width:82ch;font-size:var(--fs-sm)}

/* Ernstfall: erst der Satz, rechts daneben das beteiligte Gewerk in Worten (vorher standen dort die Nummern der Gewerke,
   die sich wie eine Aufzählung lasen) */
.chain li{grid-template-columns:minmax(0,1fr) auto;gap:18px}
.chain small{text-transform:uppercase;text-align:right}
@media (max-width:920px){
  .lp-pruef-side{padding-top:0}
}
@media (max-width:560px){
  .lp-pruef-grid>.lp-table tr{padding:15px 0}
  .lp-pruef-grid>.lp-table th,.lp-pruef-grid>.lp-table td{padding:3px 0;width:auto}
  .lp-pruef-grid>.lp-table tbody th,.lp-pruef-grid>.lp-table td:nth-child(3){width:auto}
  .chain li{grid-template-columns:1fr;gap:2px}
  .chain small{text-align:left}
}

/* Kopfzeile ohne Telefonnummer (Wunsch des Auftraggebers): Auf schmalen Bildschirmen rückt der Menüknopf an den rechten Rand */
@media (max-width:920px){
  .menu-btn{margin-left:auto}
}

/* Rechtstexte (Impressum, Datenschutz): Wortlaut der bisherigen Website, schlicht gesetzt */
.legal h3{margin:1.6em 0 .4em}
.legal ul{margin:.6em 0 .2em;padding-left:1.25em;list-style:disc}
.legal ol{margin:.6em 0 .2em;padding-left:1.25em;list-style:decimal}
.legal li{margin-top:.3em}
.legal p,.legal li{overflow-wrap:anywhere}
.legal .todo.oben{margin:0 0 2.4em;padding:0 0 1.2em;border-top:0;border-bottom:1px solid var(--rule)}
.check a{color:inherit}

/* Fußzeile: Die Verweise brechen auf sehr schmalen Bildschirmen um, statt über den Rand zu laufen */
footer nav{flex-wrap:wrap;gap:8px 24px}

/* ===== Handyansicht nachgezogen (Prüfung bei 320 bis 430 Pixel Breite) ===== */
@media (max-width:920px){
  /* Startseite: Die Stationen laufen untereinander durch und brauchen Abstand zueinander, auch wenn ein Text höher ist als seine Mindesthöhe */
  .steps .step{padding:30px 0}
}
@media (max-width:430px){
  /* Bühnenkopf der Startseite: ohne das Zeichen links und mit schmaleren Knöpfen steht der Titel in höchstens zwei Zeilen */
  #stage .stage-top .nav-pk{display:none}
  #stage .stage-top{gap:10px}
  .stage-nav{gap:3px}
  .stage-nav button{width:29px;height:30px;font-size:.8rem}
}

/* ===== Livegang (Schritt 21) ===== */
/* Kontaktformular: Das Feld "Website" ist ein Honigtopf gegen selbsttätige Einsendungen; Menschen sehen und erreichen es nicht */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#form button:disabled{opacity:.55;cursor:default}

/* ===== Zwischenbreiten nachgezogen (561 bis 920 Pixel, etwa Tablets im Hochformat) =====
   Die Tabellen der Leistungsseiten waren dort breiter als der Bildschirm und schoben die ganze Seite nach rechts. */
@media (max-width:920px){
  .lp-pruef-grid{grid-template-columns:minmax(0,1fr)}   /* die Spalte folgt dem Bildschirm, nicht der Tabelle */
  .lp-pruef-grid>.lp-table th,.lp-pruef-grid>.lp-table td{padding-right:24px}
}
@media (max-width:760px){
  /* wie auf dem Handy: jede Tabellenzeile als Block */
  .lp-pruef-grid>.lp-table thead{display:none}
  .lp-pruef-grid>.lp-table tr{display:block;padding:15px 0;border-bottom:1px solid var(--rule)}
  .lp-pruef-grid>.lp-table th,.lp-pruef-grid>.lp-table td{display:block;padding:3px 0;border:0;width:auto}
  .lp-pruef-grid>.lp-table tbody th,.lp-pruef-grid>.lp-table td:nth-child(3){width:auto}
}