/* =========================================================
   IK-Montagen · Design-Tokens
   Konzept: Raffstore & Tageslicht. Helle Kalk-Flächen, Text und dunkle
   Sektionen in RAL 7016 Anthrazit, Logo-Orange nur als Akzent.
   ========================================================= */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url(/assets/fonts/interdisplay-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Display";src:url(/assets/fonts/interdisplay-600.woff) format("woff");font-weight:600;font-display:swap}

:root{
  --kalk:#f3f4f1;        /* Fläche */
  --weiss:#ffffff;
  --tinte:#1d2124;       /* Text */
  --anthrazit:#383e42;   /* RAL 7016 */
  --dunkel:#23282b;      /* dunkle Sektionen */
  --dunkel-2:#2c3236;
  --grau:#5f666b;        /* Nebentext */
  --grau-hell:#a3aaae;   /* Nebentext auf dunkel */
  --linie:#dadedb;
  --linie-dunkel:#3b4246;
  --orange:#e8a23d;      /* Logo */
  --orange-text:#a8650f; /* Orange als Text auf hell (Kontrast) */
  --display:"Inter Display","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:4px;
  --rand:max(20px,env(safe-area-inset-left,0px));
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:light;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--kalk);color:var(--tinte);font:400 1.0625rem/1.65 var(--text);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
address{font-style:normal}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--anthrazit);color:#fff;padding:10px 14px;z-index:100;border-radius:var(--r)}
.skip:focus{top:12px}
.rand{max-width:1280px;margin-inline:auto;padding-left:var(--rand);padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font:600 .78rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text)}
.dunkel .label{color:var(--orange)}
.titel-gross{font-size:clamp(2.2rem,5vw,4.2rem);letter-spacing:-.035em;line-height:1}
.leise{color:var(--grau)}
.dunkel .leise{color:var(--grau-hell)}
.einleitung{color:var(--grau);font-size:1.12rem;max-width:36em}
.dunkel .einleitung{color:var(--grau-hell)}
.dunkel{background:var(--dunkel);color:#eef0ef}

/* ---------- Knöpfe ---------- */
.knopf{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:var(--r);background:var(--anthrazit);color:#fff;font:600 1rem/1 var(--text);text-decoration:none;overflow:hidden;isolation:isolate;border:0;cursor:pointer;transition:color .35s var(--ease)}
.knopf::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:-1;transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.knopf:hover{color:var(--tinte)}
.knopf:hover::before{transform:scaleY(1)}
.knopf .ic{width:20px;height:20px;transition:translate .35s var(--ease)}
.knopf:hover .ic{translate:4px 0}
.knopf-linie{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--anthrazit)}
.knopf-linie::before{background:var(--anthrazit)}
.knopf-linie:hover{color:#fff}
.dunkel .knopf{background:var(--orange);color:var(--tinte)}
.dunkel .knopf::before{background:#fff}
.knopf-klein{padding:11px 16px;font-size:.95rem}
.link-pfeil{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.link-pfeil .ic{width:18px;height:18px;transition:translate .3s var(--ease)}
.link-pfeil:hover .ic{translate:4px 0}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--kalk) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;padding-top:env(safe-area-inset-top,0px)}
.kopf.gescrollt{border-color:var(--linie);box-shadow:0 8px 30px -18px rgba(29,33,36,.35)}
.kopf-in{display:flex;align-items:center;gap:28px;height:76px;transition:height .3s var(--ease)}
.kopf.gescrollt .kopf-in{height:64px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);flex:none}
.logo-mark{color:var(--orange);flex:none}
.logo-text{display:grid;line-height:1.1}
.logo-text b{font:600 1.2rem/1.1 var(--display);letter-spacing:-.02em}
.logo-text small{font-size:.72rem;color:var(--grau);letter-spacing:.02em}
.logo-hell{color:#fff}.logo-hell small{color:var(--grau-hell)}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{position:relative;text-decoration:none;font-weight:500;font-size:.98rem;padding-block:6px}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav ul a:hover::after,.nav ul a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-tel{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;font-size:.95rem}
.nav-tel .ic{width:18px;height:18px;color:var(--orange-text)}
.menue{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.menue span{position:absolute;left:11px;right:11px;height:2px;background:var(--tinte);transition:transform .35s var(--ease),opacity .2s}
.menue span:nth-child(1){top:15px}.menue span:nth-child(2){top:21px}.menue span:nth-child(3){top:27px}
.menue[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menue[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1020px){.nav-tel{display:none}}
@media (max-width:860px){
  .kopf-cta{display:none}
  .js .menue{display:block}
  .js .nav{position:fixed;left:0;right:0;top:calc(76px + env(safe-area-inset-top,0px));bottom:0;margin:0;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--rand) 32px;background:var(--kalk);visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s;overflow-y:auto}
  .js .kopf.gescrollt .nav{top:calc(64px + env(safe-area-inset-top,0px))}
  .js .nav ul{flex-direction:column;gap:0}
  .js .nav ul li{border-bottom:1px solid var(--linie);transform:translateY(-14px);opacity:0;transition:transform .5s var(--ease),opacity .4s;transition-delay:calc(var(--d)*60ms)}
  .js .nav ul a{display:block;font:600 2rem/1 var(--display);letter-spacing:-.03em;padding:20px 0}
  .js .nav ul a::after{display:none}
  .js .nav-tel{display:flex;margin-top:28px;font-size:1.15rem}
  .js .menue-offen .nav{visibility:visible;opacity:1;transition:opacity .3s}
  .js .menue-offen .nav ul li{transform:none;opacity:1}
  .js .menue-offen{overflow:hidden}
}

@media (max-width:860px){html:not(.js) .kopf-in{height:auto;flex-wrap:wrap;padding-block:12px}html:not(.js) .nav{width:100%;margin:0}html:not(.js) .nav ul{flex-wrap:wrap;gap:8px 18px}}

/* ---------- Einblenden (beim Sichtbarwerden, nicht scroll-gebunden) ---------- */
.js [data-reveal]>*{opacity:0;translate:0 26px;transition:opacity .8s ease,translate 1s var(--ease);transition-delay:calc(var(--d,0)*95ms)}
.js [data-reveal].in>*{opacity:1;translate:0 0}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(72px,10vw,140px)}
.abschnitt-kopf{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,72px);max-width:880px}
.abschnitt-kopf-zeile{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;max-width:none}

/* ---------- HERO: Wort wechselt, Produkt zeichnet sich ---------- */
.hero{padding-top:8px}
/* Scroll-Spur: Hero bleibt stehen, jeder Scroll-Schritt zeigt das nächste Produkt */
.js .hero-spur{height:calc(100svh + 3 * 65svh)}
.js .hero-pin{position:sticky;top:0;height:100svh;padding-top:calc(72px + env(safe-area-inset-top,0px));padding-bottom:12px;display:flex}
.js .hero-pin>.rand{flex:1;display:flex;width:100%}
.js .hero-pin .fenster{flex:1;min-height:0}
.fenster{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);min-height:clamp(560px,80svh,780px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(28px,5.5vw,80px);background:linear-gradient(168deg,#e3eaee 0%,#f2f3ef 52%,#eee2cc 100%)}
.licht{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sonne{position:absolute;width:80vmax;height:80vmax;right:-28vmax;top:-44vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,221,160,.9),rgba(255,221,160,.35) 45%,rgba(255,221,160,0));animation:sonne 22s ease-in-out infinite alternate}
@keyframes sonne{to{translate:-10vmax 8vmax}}
.hero-inhalt{min-width:0}
.hero-label{display:flex;align-items:center;gap:10px;color:var(--anthrazit)}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(232,162,61,.6);animation:puls 2.4s ease-out infinite}
@keyframes puls{70%,100%{box-shadow:0 0 0 10px rgba(232,162,61,0)}}
.hero-titel{font-size:clamp(2.5rem,5.6vw,5.4rem);line-height:1;letter-spacing:-.045em;margin-top:20px}
.zeile{display:block}
.wechsel{display:block;position:relative;height:1.14em;overflow:hidden}
.wort{position:absolute;left:0;top:0;white-space:nowrap;padding-bottom:.12em;transform:translateY(110%);transition:transform .8s cubic-bezier(.7,0,.2,1)}
.wort i{font-style:normal;color:var(--orange)}
.wort::after{content:"";position:absolute;left:0;right:.3em;bottom:.06em;height:.07em;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.wort.an{transform:none}
.wort.an::after{transform:scaleX(1);transition-delay:.55s}
.wort.raus{transform:translateY(-110%)}
.hero-text{margin-top:26px;max-width:34em;font-size:clamp(1.05rem,1.4vw,1.2rem);color:#40474c}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.js:not(.ruhig) .hero-label,.js:not(.ruhig) .hero-titel .zeile,.js:not(.ruhig) .hero-titel .wechsel,.js:not(.ruhig) .hero-text,.js:not(.ruhig) .hero-knoepfe,.js:not(.ruhig) .motiv{animation:hoch 1s var(--ease) both}
.js:not(.ruhig) .hero-titel .zeile{animation-delay:.1s}
.js:not(.ruhig) .hero-titel .wechsel{animation-delay:.2s}
.js:not(.ruhig) .hero-text{animation-delay:.32s}
.js:not(.ruhig) .hero-knoepfe{animation-delay:.44s}
.js:not(.ruhig) .motiv{animation-delay:.2s}
@keyframes hoch{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Technische Ansicht, zeichnet sich Strich für Strich */
.motiv{margin:0;min-width:0;width:100%;max-width:440px;justify-self:end;display:grid;gap:16px}
.motiv svg{display:block;width:100%;height:auto;overflow:visible}
.bild{stroke:var(--anthrazit);stroke-width:2;opacity:0;transition:opacity .45s}
.bild.an{opacity:1}
.bild>*{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 0s .5s}
.bild.an>*{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1)}
.bild.an>*:nth-child(1){transition-delay:0ms}
.bild.an>*:nth-child(2){transition-delay:75ms}
.bild.an>*:nth-child(3){transition-delay:150ms}
.bild.an>*:nth-child(4){transition-delay:225ms}
.bild.an>*:nth-child(5){transition-delay:300ms}
.bild.an>*:nth-child(6){transition-delay:375ms}
.bild.an>*:nth-child(7){transition-delay:450ms}
.bild.an>*:nth-child(8){transition-delay:525ms}
.bild.an>*:nth-child(9){transition-delay:600ms}
.bild.an>*:nth-child(10){transition-delay:675ms}
.bild.an>*:nth-child(11){transition-delay:750ms}
.bild.an>*:nth-child(12){transition-delay:825ms}
.bild.an>*:nth-child(13){transition-delay:900ms}
.bild.an>*:nth-child(14){transition-delay:975ms}
.bild.an>*:nth-child(15){transition-delay:1050ms}
.bild.an>*:nth-child(16){transition-delay:1125ms}
.bild.an>*:nth-child(17){transition-delay:1200ms}
.bild.an>*:nth-child(18){transition-delay:1275ms}
.bild.an>*:nth-child(19){transition-delay:1350ms}
.js:not(.ruhig) .hero:not(.los) .bild>*{stroke-dashoffset:1}
.js:not(.ruhig) .hero:not(.los) .bild .lamelle{fill-opacity:0}
.bild .fein{stroke:#7c8489;stroke-width:1.2}
.bild .symbol{stroke:#9aa1a5;stroke-width:1}
.bild .mass{stroke:#9aa1a5;stroke-width:1}
.bild .akz{stroke:var(--orange);stroke-width:3.5}
.bild .akz.dick{stroke-width:6}
.bild .lamelle{stroke-width:1.2;fill:rgba(56,62,66,.1);fill-opacity:0;transition:stroke-dashoffset 0s .5s,fill-opacity .2s}
.bild.an .lamelle{fill-opacity:1;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1),fill-opacity .6s ease calc(1.1s + var(--k) * 60ms)}
.motiv-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:14px;border-top:1px solid rgba(56,62,66,.15)}
.motiv-text{display:grid;min-width:0}
.mt{grid-area:1/1;font-size:.85rem;font-weight:500;color:var(--grau);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.mt.an{opacity:1;transform:none;transition-delay:.25s}
.motiv-balken{display:flex;gap:6px;flex:none}
.motiv-balken button{width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}
.motiv-balken i{display:block;height:2px;background:rgba(56,62,66,.18);position:relative;overflow:hidden}
.motiv-balken i::after{content:"";position:absolute;inset:0;background:var(--anthrazit);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .15s linear}
@keyframes balken{to{transform:scaleX(1)}}
html:not(.js) .motiv-balken button:first-child i::after{transform:scaleX(1)}
html:not(.js) .motiv-balken,html:not(.js) .scroll-hinweis{display:none}
.scroll-hinweis{position:absolute;left:clamp(28px,5.5vw,80px);bottom:22px;display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);transition:opacity .4s}
.scroll-hinweis span{width:18px;height:28px;border:1.5px solid currentColor;border-radius:10px;position:relative}
.scroll-hinweis span::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:currentColor;animation:maus 1.6s ease-in-out infinite}
@keyframes maus{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
.hero.weiter .scroll-hinweis{opacity:0}
@media (max-width:860px){
  .fenster{grid-template-columns:1fr;min-height:0;padding-top:40px;align-content:start;gap:20px}
  .js .hero-pin .fenster{align-content:center}
  .js .hero-pin{padding-top:calc(68px + env(safe-area-inset-top,0px))}
  .motiv{justify-self:center;max-width:min(220px,26svh);gap:8px}
  .motiv-fuss{justify-content:center;padding-top:8px}
  .motiv-text{display:none}
  .js .hero-pin .fenster{padding:28px 22px 20px}
  .hero-knoepfe .knopf{padding:13px 16px;font-size:.95rem}
  .js .hero-knoepfe{margin-top:22px}
  .js .hero-text{margin-top:16px;font-size:1rem}
  .scroll-hinweis{display:none}
}

.hero-fakten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--linie)}
.hero-fakten li{padding:22px 20px 24px 0;display:grid;gap:2px;min-width:0}
.hero-fakten li+li{padding-left:20px;border-left:1px solid var(--linie)}
.hero-fakten b{font:600 1.05rem/1.25 var(--display)}
.hero-fakten span{font-size:.9rem;color:var(--grau)}
@media (max-width:860px){
  .hero-fakten{grid-template-columns:1fr 1fr}
  .hero-fakten li:nth-child(3){padding-left:0;border-left:0}
  .hero-fakten li:nth-child(n+3){border-top:1px solid var(--linie)}
  .fenster{min-height:clamp(560px,86svh,720px)}
  .hero-inhalt{padding-bottom:84px}
}

/* ---------- Gewerke-Liste ---------- */
.gewerke{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.gewerk{position:relative;isolation:isolate;display:grid;grid-template-columns:72px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) 48px;gap:28px;align-items:center;padding:34px 20px;border-top:1px solid var(--linie);text-decoration:none;color:var(--tinte);transition:color .45s var(--ease)}
.gewerk::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--anthrazit);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.gewerk:hover,.gewerk:focus-visible{color:#fff}
.gewerk:hover::before,.gewerk:focus-visible::before{transform:scaleY(1)}
.gewerk-icon .ic{width:56px;height:56px;color:var(--orange-text);transition:color .4s}
.gewerk:hover .gewerk-icon .ic{color:var(--orange)}
.gewerk-titel{font:600 clamp(1.9rem,3.4vw,3rem)/1 var(--display);letter-spacing:-.035em}
.gewerk-text{color:var(--grau);transition:color .4s}
.gewerk:hover .gewerk-text{color:#cfd4d6}
.gewerk-tags{display:flex;flex-wrap:wrap;gap:6px}
.gewerk-tags em{font-style:normal;font-size:.8rem;font-weight:500;padding:5px 10px;border:1px solid var(--linie);border-radius:999px;transition:border-color .4s}
.gewerk:hover .gewerk-tags em{border-color:#5a6266}
.gewerk-pfeil .ic{width:32px;height:32px;transition:translate .4s var(--ease),rotate .4s var(--ease)}
.gewerk:hover .gewerk-pfeil .ic{translate:6px 0;color:var(--orange)}
.js:not(.ruhig) .gewerke .gewerk-icon .ic *{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s ease}
.js:not(.ruhig) .gewerke.in li:nth-child(1) .ic *{transition-delay:.35s}
.js:not(.ruhig) .gewerke.in li:nth-child(2) .ic *{transition-delay:.5s}
.js:not(.ruhig) .gewerke.in li:nth-child(3) .ic *{transition-delay:.65s}
.js:not(.ruhig) .gewerke.in li:nth-child(4) .ic *{transition-delay:.8s}
.js .gewerke.in .gewerk-icon .ic *{stroke-dashoffset:0}
@media (max-width:1000px){
  .gewerk{grid-template-columns:56px minmax(0,1fr) 36px;grid-template-areas:"i t p" "i x p" "i g p";gap:10px 20px;padding:28px 12px}
  .gewerk-icon{grid-area:i;align-self:start}.gewerk-icon .ic{width:44px;height:44px}
  .gewerk-titel{grid-area:t}.gewerk-text{grid-area:x}.gewerk-tags{grid-area:g;margin-top:6px}.gewerk-pfeil{grid-area:p}
}

/* ---------- Schnitt (dunkel) ---------- */
.schnitt-raster{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:960px){.schnitt-raster{grid-template-columns:1fr}}
.zeichnung{margin:0;background:var(--dunkel-2);border:1px solid var(--linie-dunkel);border-radius:var(--r);overflow:hidden;min-width:0}
.zeichnung svg{display:block;width:100%;height:auto}
.z-zone{font:600 13px var(--display);letter-spacing:.16em;fill:#eef0ef}
.z-klein{font:400 10px var(--text);fill:var(--grau-hell)}
.z-mat{font:500 9px var(--text);fill:#9aa1a5;letter-spacing:.06em}
.schicht{transition:opacity .4s,filter .4s}
svg.hat-aktiv .schicht:not(.an){opacity:.38}
.schicht.an{filter:drop-shadow(0 0 7px rgba(232,162,61,.85))}
.punkt-hs{cursor:pointer;outline:none}
.punkt-hs circle{fill:var(--dunkel);stroke:var(--orange);stroke-width:2;transition:fill .25s}
.punkt-hs .ring{fill:none;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.punkt-hs text{font:700 10px var(--text);fill:#fff;text-anchor:middle;pointer-events:none}
.punkt-hs.an circle:not(.ring){fill:var(--orange)}
.punkt-hs.an text{fill:var(--tinte)}
.punkt-hs.an .ring{animation:ring 1.8s ease-out infinite}
.punkt-hs:focus-visible circle:not(.ring){stroke:#fff;stroke-width:3}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.waerme path{animation:fluss 1.3s linear infinite}
@keyframes fluss{to{stroke-dashoffset:-20}}
.schnitt-panel{display:grid;gap:16px;min-width:0}
.schnitt-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.schnitt-wahl button{display:flex;align-items:center;gap:9px;text-align:left;padding:11px 12px;border-radius:var(--r);border:1px solid var(--linie-dunkel);background:transparent;color:#e7eaea;font:500 .88rem/1.2 var(--text);cursor:pointer;transition:border-color .25s,background .25s}
.schnitt-wahl button span{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--dunkel-2);font-size:.75rem;font-weight:600}
.schnitt-wahl button:hover{border-color:#5d666b}
.schnitt-wahl button[aria-selected="true"]{border-color:var(--orange);background:rgba(232,162,61,.08)}
.schnitt-wahl button[aria-selected="true"] span{background:var(--orange);color:var(--tinte)}
@media (max-width:440px){.schnitt-wahl{grid-template-columns:1fr 1fr}}
.schnitt-text{position:relative;overflow:hidden;background:var(--dunkel-2);border:1px solid var(--linie-dunkel);border-radius:var(--r);padding:24px 24px 28px;min-height:212px}
.schnitt-eintrag{display:grid;gap:8px}
.schnitt-eintrag h3{font-size:1.6rem}
.schnitt-eintrag p:last-child{color:var(--grau-hell)}
.schnitt-eintrag.neu>*{animation:hoch .5s var(--ease) both}
.schnitt-eintrag.neu>*:nth-child(2){animation-delay:.05s}.schnitt-eintrag.neu>*:nth-child(3){animation-delay:.1s}
.schnitt-fortschritt{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.schnitt.auto .schnitt-fortschritt.laeuft{animation:fortschritt 5s linear forwards}
@keyframes fortschritt{to{transform:scaleX(1)}}
.faustregel{font-size:.95rem;color:var(--grau-hell);border-left:3px solid var(--orange);padding:4px 0 4px 16px}
.faustregel b{color:#fff}
.uw{margin-top:48px;display:grid;gap:14px;padding-top:36px;border-top:1px solid var(--linie-dunkel)}
.uw-zeile{display:grid;grid-template-columns:200px minmax(0,1fr) 130px;gap:20px;align-items:center}
.uw-zeile b{text-align:right;font-variant-numeric:tabular-nums}
.uw-balken{height:14px;background:var(--dunkel-2);border-radius:2px;overflow:hidden}
.uw-balken i{display:block;height:100%;width:var(--w);background:var(--orange);border-radius:2px;transform-origin:left;transition:transform 1.4s var(--ease) .4s}
.uw-balken i.alt{background:#c8644c}
.js:not(.ruhig) .uw:not(.in) .uw-balken i{transform:scaleX(0)}
@media (max-width:640px){.uw-zeile{grid-template-columns:1fr auto}.uw-balken{grid-column:1/-1;grid-row:2}}

/* ---------- Ablauf ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.schritte li{position:relative;padding-top:28px;border-top:1px solid var(--linie);display:grid;gap:10px;align-content:start;min-width:0}
.schritte li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);transition-delay:calc(.3s + var(--d) * .35s)}
.schritte.in li::before,.ruhig .schritte li::before,html:not(.js) .schritte li::before{transform:scaleX(1)}
.schritt-nr{font:500 clamp(3rem,5vw,4.6rem)/1 var(--display);letter-spacing:-.04em;color:var(--anthrazit);font-variant-numeric:tabular-nums}
.schritte h3{font-size:1.4rem;margin-top:8px}
.schritte p{color:var(--grau);font-size:.98rem}
@media (max-width:900px){.schritte{grid-template-columns:1fr 1fr;row-gap:44px}}
@media (max-width:520px){.schritte{grid-template-columns:1fr}}

/* ---------- Über uns kurz ---------- */
.ueber-kurz{background:var(--weiss);border-block:1px solid var(--linie)}
.ueber-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px}
.ueber-raster>div:first-child{display:grid;gap:18px;align-content:start}
.ueber-text{display:grid;gap:20px;align-content:start;max-width:38em}
.ueber-text .gross{font:500 clamp(1.35rem,2.2vw,1.75rem)/1.35 var(--display);letter-spacing:-.015em}
.ueber-text p:not(.gross){color:var(--grau)}
.ueber-text .link-pfeil{justify-self:start}
@media (max-width:820px){.ueber-raster{grid-template-columns:1fr;gap:28px}}

/* ---------- Referenzen ---------- */
.ref-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ref-raster li{overflow:hidden;border-radius:var(--r);background:var(--linie);aspect-ratio:4/3}
.ref-raster img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.ref-raster li:hover img{transform:scale(1.05)}
.ref-raster button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
@media (max-width:760px){.ref-raster{grid-template-columns:1fr 1fr}}
.lightbox{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);max-height:90vh}
.lightbox::backdrop{background:rgba(20,23,25,.88)}
.lightbox img{max-height:84vh;width:auto;border-radius:var(--r)}
.lightbox p{color:#fff;margin-top:10px;font-size:.95rem}
.lightbox form{position:absolute;top:8px;right:8px}
.lightbox form button{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:1.4rem;cursor:pointer}
.leer{padding:48px;border:1px dashed #c4c9c5;border-radius:var(--r);display:grid;gap:14px;justify-items:start;max-width:640px}
.leer p{color:var(--grau)}

/* ---------- CTA ---------- */
.cta{padding-block:0 clamp(72px,9vw,120px)}
.cta-box{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);padding:clamp(32px,5vw,64px);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-text{display:grid;gap:10px;max-width:30em}
.cta-text h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.035em}
.cta-text p{color:var(--grau-hell)}
.cta-wege{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta-tel{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 1.3rem/1 var(--display);font-variant-numeric:tabular-nums}
.cta-tel .ic{width:22px;height:22px;color:var(--orange)}
.cta-lamellen{position:absolute;inset:0 0 0 auto;width:44%;z-index:-1;perspective:900px;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.cta-lamellen i{position:absolute;left:0;right:0;top:calc(var(--i) * 11.2%);height:11.2%;background:linear-gradient(180deg,#4a5156,#30363a);rotate:x 62deg;animation:wippen 7s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.25s)}
@keyframes wippen{to{rotate:x 22deg}}

/* ---------- Unterseiten-Kopf (kleiner Raffstore) ---------- */
.seitenkopf{padding-top:8px}
.sk-box{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);padding:clamp(80px,9vw,128px) clamp(24px,5vw,72px) clamp(40px,5vw,64px);display:grid;gap:18px;background:linear-gradient(168deg,#e3eaee 0%,#f2f3ef 52%,#eee2cc 100%)}
.js:not(.ruhig) .sk-inhalt>*{animation:hoch 1s var(--ease) both;animation-delay:calc(.1s + var(--d,0) * .12s)}
.sk-box h1{font-size:clamp(2.6rem,6.4vw,5.6rem);letter-spacing:-.045em;line-height:.98}
.sk-box .einleitung{color:#40474c}
.sk-inhalt{display:grid;gap:18px;max-width:900px}

/* ---------- Leistungen-Seite ---------- */
.gewerk-detail{padding-block:clamp(64px,8vw,110px);border-top:1px solid var(--linie)}
.gewerk-detail:first-of-type{border-top:0}
.gd-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.gd-bild{position:sticky;top:110px;aspect-ratio:1;max-width:420px;width:100%;border-radius:var(--r);background:var(--weiss);border:1px solid var(--linie);display:grid;place-items:center}
.gd-bild .ic{width:62%;height:62%;color:var(--anthrazit);stroke-width:1.3}
.gd-bild .ic .griff{stroke:var(--orange);stroke-width:2.5}
.js:not(.ruhig) .gd-bild .ic *{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 2.2s ease .2s}
.js .in .gd-bild .ic *{stroke-dashoffset:0}
.gd-text{display:grid;gap:22px}
.gd-text h2{font-size:clamp(2.4rem,4.6vw,3.8rem);letter-spacing:-.04em}
.gd-text>p{font-size:1.12rem;color:#40474c;max-width:36em}
.gd-listen{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.gd-listen h3{font:600 .78rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin-bottom:12px}
.gd-listen ul{list-style:none;margin:0;padding:0;display:grid}
.gd-listen li{padding:11px 0;border-top:1px solid var(--linie);display:flex;gap:12px}
.gd-listen li::before{content:"";flex:none;width:7px;height:7px;margin-top:.62em;background:var(--orange)}
@media (max-width:860px){.gd-raster{grid-template-columns:1fr}.gd-bild{position:static;max-width:220px}.gd-listen{grid-template-columns:1fr}}

/* ---------- Über uns Seite ---------- */
.werte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.werte li{background:var(--weiss);padding:32px 28px;display:grid;gap:10px;align-content:start}
.werte h3{font-size:1.4rem}
.werte p{color:var(--grau)}
@media (max-width:820px){.werte{grid-template-columns:1fr}}
.daten{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;margin:0}
.daten div{background:var(--weiss);padding:18px 20px}
.daten dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.daten dd{margin:4px 0 0;font-weight:600}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.kontakt-raster{grid-template-columns:1fr}}
.wege{display:grid;gap:12px}
.weg{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss);text-decoration:none;transition:border-color .3s,transform .3s var(--ease)}
a.weg:hover{border-color:var(--anthrazit);transform:translateX(4px)}
.weg .ic{width:28px;height:28px;color:var(--orange-text);flex:none}
.weg span{display:grid;min-width:0}
.weg small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.weg b{font-weight:600;font-size:1.08rem;overflow-wrap:anywhere}
.formular{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);padding:clamp(22px,3.5vw,40px);display:grid;gap:18px;min-width:0}
.formular h2{font-size:1.8rem}
.feld{display:grid;gap:7px;min-width:0}
.feld label,.feld legend{font-weight:500;font-size:.92rem}
.feld input,.feld select,.feld textarea{width:100%;font:inherit;font-size:1rem;color:var(--tinte);background:var(--kalk);border:1px solid var(--linie);border-radius:var(--r);padding:13px 14px;transition:border-color .2s,background .2s,box-shadow .2s}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--anthrazit);background:#fff;box-shadow:0 0 0 3px rgba(232,162,61,.25)}
.feld textarea{min-height:140px;resize:vertical}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.feld-paar{grid-template-columns:1fr}}
fieldset.feld{border:0;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{padding:9px 15px;border:1px solid var(--linie);border-radius:999px;cursor:pointer;font-weight:500;background:var(--kalk);transition:background .25s,border-color .25s,color .25s}
.chips label:hover{border-color:var(--anthrazit)}
.chips input:checked+label{background:var(--anthrazit);border-color:var(--anthrazit);color:#fff}
.chips input:focus-visible+label{outline:2px solid var(--orange);outline-offset:2px}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--grau)}
.zustimmung input{margin-top:4px;accent-color:var(--anthrazit);width:18px;height:18px;flex:none}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.meldung{padding:14px 16px;border-radius:var(--r);font-weight:500}
.meldung.ok{background:#e4efe3;color:#24502a}
.meldung.fehler{background:#f7e3df;color:#7a2a1c}
.formular .knopf{justify-self:start}
.formular .knopf[disabled]{opacity:.6;cursor:wait}

/* ---------- Text-Seiten ---------- */
.prosa{max-width:72ch;display:grid;gap:14px;padding-block:clamp(48px,6vw,88px)}
.prosa h2{font-size:1.5rem;margin-top:28px}
.prosa p,.prosa li{color:#40474c}
.prosa a{color:var(--orange-text)}

/* ---------- 404 ---------- */
.nf{display:grid;gap:18px;justify-items:start}

/* ---------- Fuß ---------- */
.fuss{padding-top:clamp(56px,7vw,88px)}
.fuss-oben{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px;padding-bottom:48px}
.fuss-marke{display:grid;gap:18px;align-content:start}
.fuss-marke p{color:var(--grau-hell);max-width:30em;font-size:.95rem}
.fuss .label{margin-bottom:14px}
.fuss address,.fuss-links{color:#d4d8d9;font-size:.95rem;line-height:1.9}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--orange)}
.fuss-links{list-style:none;margin:0;padding:0}
.fuss-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linie-dunkel);color:var(--grau-hell);font-size:.88rem}
.fuss-unten span:last-child{display:flex;gap:20px}
@media (max-width:860px){.fuss-oben{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}

/* ---------- Pausieren & ruhiger Modus ---------- */
.pausiert .sonne,.pausiert .scroll-hinweis span::after,.pausiert .punkt,.pausiert .cta-lamellen i,.pausiert .waerme path,.pausiert .ring,
.tab-weg .sonne,.tab-weg .scroll-hinweis span::after,.tab-weg .punkt,.tab-weg .cta-lamellen i,.tab-weg .waerme path,.tab-weg .ring{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]>*{opacity:1;translate:none}
  .js .gewerke .gewerk-icon .ic *,.js .gd-bild .ic *{stroke-dashoffset:0}
  .uw .uw-balken i{transform:none!important}
}