/* ==========================================================================
   DiorBau GmbH — Website (Design 2)
   Hell und fotografisch: Weiß, tiefes Nachtblau und das Cyan des Logos.
   Leitmotive: die Dachlinie des Logos und leuchtende LED-Lichtlinien.
   ========================================================================== */

@font-face{font-family:"Jost";src:url("../fonts/jost-var.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --navy:#08121c;
  --navy-2:#0e1c2a;
  --navy-3:#16283a;
  --ink:#0f1a24;
  --text:#465462;
  --mut:#6b7885;
  --white:#fff;
  --mist:#f2f5f8;
  --mist-2:#e4eaf0;
  --cyan:#00afef;
  --cyan-ink:#0078ae;
  --red:#c0392b;
  --line:rgba(15,26,36,.1);
  --line-d:rgba(255,255,255,.14);
  --f-h:"Jost","Century Gothic","Avenir Next",Avenir,system-ui,sans-serif;
  --f-b:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(1.15rem,4.6vw,5.5rem);
  --rad:20px;
  --hd:88px;
  --shadow:0 30px 70px -35px rgba(8,18,28,.42);
  --glow:0 0 12px rgba(0,175,239,.95),0 0 34px rgba(0,175,239,.5);
  --ease:cubic-bezier(.19,.8,.12,1);
  --ease-io:cubic-bezier(.72,0,.16,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--hd) + 1rem)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--f-b);font-size:clamp(1rem,.95rem + .22vw,1.1rem);line-height:1.7;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--cyan);color:var(--navy)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
main{display:block;background:var(--white)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-5rem;z-index:200;background:var(--cyan);color:var(--navy);padding:.7rem 1.1rem;border-radius:99px;font-weight:700;transition:top .2s}
.skip:focus{top:1rem}
.wrap{width:min(100% - var(--pad)*2,1480px);margin-inline:auto}

/* ---------- Typografie ---------- */
.h1,.h2,.h3,.hero__title{font-family:var(--f-h);font-weight:600;color:var(--ink);letter-spacing:-.022em;text-wrap:balance}
.h1{font-size:clamp(2.4rem,5.6vw,5.2rem);line-height:1.03}
.h2{font-size:clamp(2rem,4.3vw,3.9rem);line-height:1.06}
.h3{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.015em}
.h2 a,.h3 a{transition:color .3s}
.h2 a:hover,.h3 a:hover{color:var(--cyan-ink)}
.ln{display:block;overflow:hidden;padding:.06em 0 .17em;margin:-.06em 0 -.17em}
.ln>span{display:block}
.kicker{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--f-h);font-weight:600;font-size:.82rem;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-ink)}
.kicker::before{content:"";flex:none;width:2.2rem;height:3px;border-radius:3px;background:var(--cyan);box-shadow:0 0 10px rgba(0,175,239,.7)}
.kicker--light{color:#fff}
.lead{font-size:clamp(1.06rem,1rem + .4vw,1.3rem);line-height:1.6;color:var(--text);max-width:52ch}
.lnk{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);padding:.3rem 0;background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 2px no-repeat;transition:gap .4s var(--ease),color .3s}
.lnk:hover{gap:1rem;color:var(--cyan-ink)}
.ic{flex:none}

/* ---------- Schaltflächen ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:1rem 1.6rem;border-radius:99px;border:1.5px solid transparent;font-family:var(--f-b);font-weight:700;font-size:.95rem;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .35s,color .35s,border-color .35s,box-shadow .45s,transform .45s var(--ease);will-change:transform}
.btn .ic{transition:transform .45s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
.btn--primary{background:var(--cyan);color:var(--navy);box-shadow:0 12px 30px -12px rgba(0,175,239,.75)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--navy);color:#fff;box-shadow:0 16px 40px -14px rgba(8,18,28,.6)}
.hero .btn--primary:hover,.ph .btn--primary:hover,.cta .btn--primary:hover,.band .btn--primary:hover,.box--dark .btn--primary:hover,.menu .btn--primary:hover,.hd:not(.is-solid) .btn--primary:hover{background:#fff;color:var(--navy);box-shadow:0 16px 40px -12px rgba(0,175,239,.95)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover,.btn--ghost:focus-visible{background:#fff;border-color:#fff;color:var(--navy)}
.btn--dark{background:var(--navy);color:#fff}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--cyan);color:var(--navy);box-shadow:0 14px 34px -12px rgba(0,175,239,.8)}
.btn--sm{padding:.75rem 1.2rem;font-size:.88rem}
.btn--xl{padding:1.2rem 2rem;font-size:1.02rem}

/* ---------- Auftakt: Logo-Loader ---------- */
.loader{position:fixed;inset:0;z-index:120;display:none;place-items:center;background:radial-gradient(60% 50% at 50% 42%,rgba(0,175,239,.14),transparent 70%),var(--navy);color:#fff;clip-path:polygon(0 0,100% 0,100% 118%,50% 100%,0 118%);animation:loader-failsafe 0s linear 7s forwards}
.js:not(.seen) .loader{display:grid}
.loader__in{width:min(74vw,420px)}
.loader__logo{width:100%;height:auto;overflow:visible}
.loader__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:2rem}
.loader__bar i{display:block;height:100%;border-radius:3px;background:var(--cyan);box-shadow:var(--glow);transform:scaleX(0);transform-origin:0 50%}
.loader__meta{display:flex;justify-content:space-between;margin-top:.9rem;font-family:var(--f-h);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.loader__num{color:#fff;font-variant-numeric:tabular-nums}
.loader__num b{font-weight:600}
.loader .lg-roof{opacity:0}
.loader .lg-draw{stroke-dasharray:1;stroke-dashoffset:1}
.loader .lg-chim{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.loader .lg-pane{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)}
.loader .lg-l{transform:translateY(46px);opacity:0}
.loader.is-run .lg-draw{animation:lg-draw .8s var(--ease-io) .05s forwards,lg-hide .01s linear .88s forwards}
.loader.is-run .lg-roof{animation:lg-show .01s linear .86s forwards}
.loader.is-run .lg-chim{animation:lg-chim .4s var(--ease) .4s forwards}
.loader.is-run .lg-pane{animation:lg-pane .45s var(--ease) calc(.56s + var(--i)*60ms) forwards}
.loader.is-run .lg-l{animation:lg-letter .65s var(--ease) calc(.28s + var(--i)*32ms) forwards}
.loader.is-done{clip-path:polygon(0 0,100% 0,100% 0,50% -18%,0 0);transition:clip-path .85s var(--ease-io)}
.loader.is-done .loader__in{transform:translateY(-8vh);opacity:0;transition:transform .8s var(--ease-io),opacity .5s}
@keyframes lg-draw{to{stroke-dashoffset:0}}
@keyframes lg-hide{to{opacity:0}}
@keyframes lg-show{to{opacity:1}}
@keyframes lg-chim{to{transform:none}}
@keyframes lg-pane{60%{transform:scale(1.25)}to{transform:none}}
@keyframes lg-letter{to{transform:none;opacity:1}}
@keyframes loader-failsafe{to{visibility:hidden}}
.logo .lg-draw{display:none}
.loader .logo .lg-draw{display:block}

/* Seitenwechsel-Vorhang mit Dachkante */
.curtain{position:fixed;inset:0;z-index:110;background:var(--navy);pointer-events:none;clip-path:polygon(0 118%,50% 100%,100% 118%,100% 118%,0 118%)}
.js.seen .curtain{animation:curtain-out .8s var(--ease-io) .04s both}
.curtain.is-leave{animation:curtain-in .5s var(--ease-io) both!important}
@keyframes curtain-out{from{clip-path:polygon(0 0,50% 0,100% 0,100% 118%,50% 100%,0 118%)}to{clip-path:polygon(0 0,50% 0,100% 0,100% 0,50% -18%,0 0)}}
@keyframes curtain-in{from{clip-path:polygon(0 118%,50% 100%,100% 118%,100% 118%,50% 118%,0 118%)}to{clip-path:polygon(0 0,50% -18%,100% 0,100% 100%,50% 100%,0 100%)}}

/* Lesefortschritt & nach oben */
.topbar{position:fixed;inset:0 0 auto;height:3px;z-index:95;pointer-events:none}
.topbar i{display:block;height:100%;background:var(--cyan);box-shadow:0 0 10px rgba(0,175,239,.8);transform:scaleX(0);transform-origin:0 50%}
.totop{position:fixed;right:clamp(.9rem,2.4vw,2rem);bottom:clamp(.9rem,2.4vw,2rem);z-index:70;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;box-shadow:0 14px 34px -14px rgba(8,18,28,.7);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s,visibility .4s,transform .4s var(--ease),background-color .3s,color .3s}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop.is-on.is-end{transform:translateY(-3.8rem)}
.totop:hover{background:var(--cyan);color:var(--navy)}
.totop svg:first-child{position:absolute;inset:0;transform:rotate(-90deg)}
.totop .ic{transform:rotate(-90deg)}
.totop__track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.totop__ring{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1}

/* ---------- Einblend-Effekte (nur mit JS aktiv) ---------- */
.js [data-in]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js [data-in].is-in{opacity:1;transform:none}
.js .ln>span{transform:translateY(118%);transition:transform 1.05s var(--ease) calc(var(--i,0)*90ms + var(--d,0s))}
.js .is-in>.ln>span,.js .is-in .ln>span{transform:none}
/* Der Ausschnitt liegt auf dem inneren Element: ein komplett beschnittenes Element würde der IntersectionObserver nie melden */
.js [data-reveal]>.px{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease-io)}
.js [data-reveal].is-in>.px{clip-path:inset(0)}
.js [data-reveal] img{transform:scale(1.18);transition:transform 1.7s var(--ease)}
.js [data-reveal].is-in img{transform:none}
.js [data-stagger]>*,.js [data-gallery]>*{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .9s var(--ease),box-shadow .5s}
.js [data-stagger]>.is-in,.js [data-gallery]>.is-in{opacity:1;transform:none}
.frame{position:relative;overflow:hidden;border-radius:var(--rad);margin:0;background:var(--mist-2);isolation:isolate}
.px{position:absolute;inset:-12% 0;will-change:transform}
.px img{width:100%;height:100%;object-fit:cover}

/* ---------- Kopfzeile ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:90;color:#fff;transition:transform .5s var(--ease),color .35s}
.hd::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 40px -24px rgba(8,18,28,.45);opacity:0;transition:opacity .35s}
.hd__in{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem);height:var(--hd);padding:0 var(--pad);transition:height .4s var(--ease)}
.hd.is-solid{color:var(--ink)}
.hd.is-solid::before{opacity:1}
.hd.is-solid .hd__in{height:70px}
.menu-open .hd{color:#fff!important;transform:none!important}
.menu-open .hd::before{opacity:0!important}
.hd__logo{flex:none;display:block;width:clamp(156px,13vw,196px);position:relative;z-index:2}
.hd__logo .logo{width:100%;height:auto}
.hd__nav{margin-left:auto}
.hd__nav ul{display:flex;gap:clamp(1.1rem,2.2vw,2.4rem)}
.hd__nav a{position:relative;display:block;padding:.7rem 0;font-family:var(--f-h);font-weight:500;font-size:1.04rem;letter-spacing:.01em}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:2px;border-radius:2px;background:var(--cyan);box-shadow:0 0 8px rgba(0,175,239,.8);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-io)}
.hd__nav a:hover::after,.hd__nav a.is-active::after{transform:scaleX(1);transform-origin:0 50%}
.hd__right{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.6rem)}
.hd__tel{display:flex;align-items:center;gap:.7rem;font-family:var(--f-h);font-weight:600;font-size:1.02rem;line-height:1.15;white-space:nowrap}
.hd__telic{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid currentColor;opacity:.9;transition:background-color .3s,color .3s,border-color .3s,opacity .3s}
.hd__tel:hover .hd__telic{background:var(--cyan);border-color:var(--cyan);color:var(--navy);opacity:1}
.hd__teltx small{display:block;font-family:var(--f-b);font-weight:500;font-size:.7rem;opacity:.75;letter-spacing:.02em}
.hd__burger{display:none;position:relative;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid currentColor}
.hd__burger i{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease),opacity .3s}
.hd__burger i:nth-of-type(1){top:16px}
.hd__burger i:nth-of-type(2){top:22px}
.hd__burger i:nth-of-type(3){top:28px}
.menu-open .hd__burger i:nth-of-type(1){top:22px;transform:rotate(45deg)}
.menu-open .hd__burger i:nth-of-type(2){opacity:0}
.menu-open .hd__burger i:nth-of-type(3){top:22px;transform:rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:80;background:radial-gradient(70% 50% at 100% 0,rgba(0,175,239,.2),transparent 70%),var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:calc(var(--hd) + 1.6rem) var(--pad) 2rem;clip-path:polygon(0 0,100% 0,100% 0,50% -18%,0 0);transition:clip-path .7s var(--ease-io);visibility:hidden;overflow-y:auto}
.menu-open .menu{clip-path:polygon(0 0,100% 0,100% 118%,50% 100%,0 118%);visibility:visible}
.menu.is-closing{visibility:visible}
.menu ul{display:grid}
.menu li a{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--f-h);font-weight:500;font-size:clamp(1.25rem,5.4vw,1.5rem);line-height:1.2;letter-spacing:0;padding:1.05rem 0;border-bottom:1px solid var(--line-d);transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .6s,color .3s}
.menu li a::after{content:"";flex:none;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.45}
.menu li a[aria-current]{color:var(--cyan)}
.menu-open .menu li a{transform:none;opacity:1}
.menu-open .menu li:nth-child(1) a{transition-delay:.16s}.menu-open .menu li:nth-child(2) a{transition-delay:.22s}.menu-open .menu li:nth-child(3) a{transition-delay:.28s}.menu-open .menu li:nth-child(4) a{transition-delay:.34s}.menu-open .menu li:nth-child(5) a{transition-delay:.4s}
.menu__foot{display:grid;gap:.9rem;justify-items:start}
.menu__line{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.85)}
.menu__line .ic{color:var(--cyan)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:70svh;display:flex;align-items:flex-end;color:#fff;background:var(--navy);overflow:hidden;padding:calc(var(--hd) + .9rem) 0 clamp(4.4rem,9.4vw,8.8rem)}
.hero__bg{position:absolute;inset:-8% 0;will-change:transform}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 9s linear}
.hero__slide.is-on img{transform:scale(1.02)}
.hero__shade,.ph__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,28,.9) 0%,rgba(8,18,28,.62) 36%,rgba(8,18,28,.12) 70%,rgba(8,18,28,0) 100%),linear-gradient(0deg,rgba(8,18,28,.55),rgba(8,18,28,0) 36%),linear-gradient(180deg,rgba(8,18,28,.55),rgba(8,18,28,0) 22%)}
.hero__in{position:relative;z-index:3;will-change:transform}
.hero__title{color:#fff;font-size:clamp(2.5rem,5.25vw,5.1rem);line-height:1.02;letter-spacing:-.026em;max-width:15ch;margin:1.1rem 0 0}
.hero__title .ln:last-child>span,.cta__title .ln:last-child>span{color:var(--cyan);text-shadow:0 0 44px rgba(0,175,239,.45)}
.hero__text{max-width:62ch;margin-top:clamp(.9rem,2.2vh,1.5rem);font-size:clamp(1rem,.95rem + .35vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.84)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.3rem,3vh,2rem)}
.hero__nav{position:absolute;right:var(--pad);bottom:clamp(4.4rem,9.4vw,8.8rem);z-index:3;display:grid;justify-items:end;gap:.9rem;max-width:22rem}
.hero__cap{display:flex;align-items:baseline;gap:.9rem;text-align:right;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.88)}
.hero__cap b{font-family:var(--f-h);font-weight:600;font-size:2.4rem;line-height:1;color:var(--cyan)}
.hero__dots{display:flex;gap:.5rem}
.hero__dots button{width:52px;padding:10px 0}
.hero__dots i{display:block;position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__dots i::after{content:"";position:absolute;inset:0;border-radius:3px;background:var(--cyan);transform:scaleX(0);transform-origin:0 50%}
.hero__dots .is-on i::after{animation:dot-fill 5.6s linear forwards}
@keyframes dot-fill{to{transform:scaleX(1)}}

/* Dachlinie als Übergang (mit LED-Lichtlinie) */
.roofline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(44px,8.6vw,132px);z-index:2;overflow:visible;pointer-events:none}
.roofline__fill{fill:var(--next,#fff)}
.roofline__led{fill:none;stroke:var(--cyan);stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(0,175,239,.95)) drop-shadow(0 0 16px rgba(0,175,239,.6))}
.js .roofline__led{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s var(--ease-io) .35s}
.js.ready .roofline__led{stroke-dashoffset:0}
.p-kontakt .roofline__fill{fill:var(--mist)}

/* ---------- Abschnitte ---------- */
.sec{position:relative;padding:clamp(4.6rem,10.5vw,9.5rem) 0;background:var(--white)}
.sec--mist{background:var(--mist)}
.sec--dark{background:radial-gradient(55% 60% at 88% 0%,rgba(0,175,239,.17),transparent 70%),radial-gradient(45% 55% at 0% 100%,rgba(0,110,220,.14),transparent 70%),var(--navy);color:rgba(255,255,255,.78);overflow:clip}
.sec--dark .h2,.sec--dark .h3,.band .h1,.cta .h1,.ph .h1,.nextp .h1{color:#fff}
.sec--dark .lead{color:rgba(255,255,255,.76)}
.sec--dark .lnk{color:#fff}
.sec>.wrap{position:relative;z-index:1}
.head{margin-bottom:clamp(2.2rem,5vw,4.2rem)}
.head .h2{margin-top:.9rem}
.head--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.4rem clamp(2rem,6vw,6.5rem);align-items:end}
.head__side{display:grid;gap:1.1rem;justify-items:start}
.head--center{display:grid;justify-items:center;text-align:center}

/* Über uns */
.about__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,7vw,7.5rem);align-items:center}
.about__media{position:relative;padding-bottom:clamp(3rem,7.5vw,6.5rem)}
.about__img--a{width:84%;aspect-ratio:5/4.5}
.about__img--b{position:absolute;right:0;bottom:0;width:45%;aspect-ratio:3/4;border:clamp(5px,.7vw,10px) solid #fff;box-shadow:var(--shadow);z-index:2}
.about__badge{position:absolute;left:clamp(-2.2rem,-2.4vw,-.6rem);bottom:clamp(1.2rem,3.4vw,3.4rem);z-index:3;display:flex;align-items:center;gap:.9rem;max-width:16.5rem;padding:1.05rem 1.25rem;border-radius:18px;background:var(--navy);color:#fff;box-shadow:var(--shadow);will-change:transform}
.about__badgeic{flex:none;display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:14px;background:var(--cyan);color:var(--navy);box-shadow:0 0 24px rgba(0,175,239,.6)}
.about__badge strong{font-family:var(--f-h);font-weight:600;font-size:1.06rem;line-height:1.25}
.about__copy .h2{margin:1rem 0 1.4rem}
.about__text p+p{margin-top:1em}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.4rem;margin:1.8rem 0 0}
.checks li{display:flex;align-items:flex-start;gap:.7rem;font-weight:650;color:var(--ink);line-height:1.4}
.checks .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--cyan);color:var(--navy);margin-top:.05rem}
.checks a{transition:color .3s}
.checks a:hover{color:var(--cyan-ink)}
.checks--col{grid-template-columns:minmax(0,1fr)}
.sec--dark .checks li,.box--dark .checks li{color:#fff}
.about__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.2rem;margin-top:2.2rem}
.telbox{display:flex;align-items:center;gap:.9rem;font-family:var(--f-h);font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.telbox small{display:block;font-family:var(--f-b);font-weight:600;font-size:.76rem;color:var(--mut)}
.telbox__ic{flex:none;display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:50%;border:1.5px solid var(--line);color:var(--cyan-ink);transition:background-color .3s,color .3s,border-color .3s,box-shadow .4s}
.telbox:hover .telbox__ic{background:var(--cyan);border-color:var(--cyan);color:var(--navy);box-shadow:0 0 26px rgba(0,175,239,.6)}
.telbox--light{color:#fff}
.telbox--light small{color:rgba(255,255,255,.65)}
.telbox--light .telbox__ic{border-color:rgba(255,255,255,.3);color:var(--cyan)}

/* Laufband */
.mq{overflow:hidden;padding:clamp(1.1rem,2.4vw,2.1rem) 0;background:#fff;border-block:1px solid var(--line)}
.mq__track{display:flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);width:max-content;will-change:transform}
.mq>.mq__track span{font-family:var(--f-h);font-weight:600;font-size:clamp(1.9rem,4.8vw,4.4rem);line-height:1.1;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(15,26,36,.52)}
.mq>.mq__track span:nth-of-type(3n+1){color:var(--ink);-webkit-text-stroke:0}
.mq>.mq__track i{display:grid;color:var(--cyan)}

/* Leistungen: Karten */
.svc__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.5vw,1.5rem);perspective:1500px}
.svc__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.scard{position:relative;display:block;aspect-ratio:3/4.3;border-radius:var(--rad);overflow:hidden;color:#fff;background:var(--navy-2);isolation:isolate;box-shadow:0 26px 50px -34px rgba(8,18,28,.6)}
.svc__grid--3 .scard{aspect-ratio:4/4.2}
.scard:hover{box-shadow:0 34px 70px -30px rgba(8,18,28,.65)}
.scard__img{position:absolute;inset:0}
.scard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.scard:hover .scard__img img{transform:scale(1.09)}
.scard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,28,.18) 0%,rgba(8,18,28,.06) 35%,rgba(8,18,28,.9) 100%)}
.scard__shade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,120,174,.2),rgba(0,54,104,.86));opacity:0;transition:opacity .55s}
.scard:hover .scard__shade::after,.scard:focus-visible .scard__shade::after{opacity:1}
.scard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--cyan);box-shadow:var(--glow);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.scard:hover::after,.scard:focus-visible::after{transform:scaleX(1)}
.scard__no{position:absolute;left:1.2rem;top:1.2rem;padding:.38rem .8rem;border-radius:99px;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--f-h);font-weight:600;font-size:.9rem;letter-spacing:.08em}
.scard__body{position:absolute;inset:auto 0 0;display:grid;gap:.55rem;padding:1.5rem 1.4rem 1.5rem}
.scard__title{font-family:var(--f-h);font-weight:600;font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
.scard__text{font-size:.93rem;line-height:1.5;color:rgba(255,255,255,.88);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .45s}
.scard:hover .scard__text,.scard:focus-visible .scard__text{max-height:10em;opacity:1}
.scard__go{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.88rem;color:var(--cyan)}
.scard__go .ic{transition:transform .45s var(--ease)}
.scard:hover .scard__go .ic{transform:translateX(5px)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:clamp(2rem,4vw,3.2rem)}
.chips__label{font-family:var(--f-h);font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-ink);margin-right:.5rem}
.chip{padding:.55rem 1.05rem;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:650;font-size:.9rem;color:var(--ink)}

/* Bildband mit Parallax und Zahlen */
.band,.cta,.nextp{position:relative;color:rgba(255,255,255,.8);background:var(--navy);overflow:hidden}
.band{padding:clamp(5.5rem,13vw,12rem) 0}
.band__bg,.cta__bg,.ph__bg,.nextp__bg{position:absolute;inset:-20% 0;will-change:transform}
.band__bg img,.cta__bg img,.ph__bg img,.nextp__bg img{width:100%;height:100%;object-fit:cover}
.band__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,28,.95) 0%,rgba(8,18,28,.8) 50%,rgba(8,18,28,.55) 100%)}
.band__in{position:relative;z-index:1}
.band__title{max-width:15ch;margin:1.1rem 0 1.6rem}
.band__text{max-width:40ch;font-family:var(--f-h);font-weight:500;font-size:clamp(1.2rem,2.1vw,1.9rem);line-height:1.35;color:#fff}
.band__text .w{opacity:.46;transition:opacity .45s linear}
.band__text .w.on{opacity:1}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(2.6rem,6vw,5rem);border-top:1px solid var(--line-d)}
.stats>div{padding:clamp(1.3rem,2.6vw,2.2rem) clamp(1rem,2vw,2rem) 0 0;border-right:1px solid var(--line-d)}
.stats>div+div{padding-left:clamp(1rem,2.4vw,2.4rem)}
.stats>div:last-child{border-right:0}
.stats dt{font-family:var(--f-h);font-weight:600;font-size:clamp(3rem,7vw,6.2rem);line-height:1;letter-spacing:-.03em;color:var(--cyan);text-shadow:0 0 36px rgba(0,175,239,.5);font-variant-numeric:tabular-nums}
.stats dd{margin-top:.6rem;max-width:22ch;color:rgba(255,255,255,.78)}

/* Projekte: Karten, die sich beim Scrollen stapeln */
.stack{display:grid;gap:clamp(1.2rem,2.4vw,2rem)}
.pcard{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:min(68vh,540px);background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 34px 80px -46px rgba(8,18,28,.5);transform-origin:50% 0;will-change:transform}
.stack .pcard{position:sticky;top:calc(var(--hd) + .6rem + var(--i)*1.1rem)}
.pcard__img{position:relative;display:block;overflow:hidden;min-height:260px;background:var(--mist-2)}
.pcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.05)}
.pcard__body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem;padding:clamp(1.5rem,3.6vw,3.6rem)}
.pcard__no{font-family:var(--f-h);font-weight:600;font-size:2.4rem;line-height:1;color:var(--cyan-ink)}
.pcard__no i{font-style:normal;font-size:.95rem;font-weight:500;color:var(--mut);margin-left:.45rem}
.facts{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;width:100%;padding:1rem 0;border-block:1px solid var(--line)}
.facts dt{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.facts dd{font-family:var(--f-h);font-weight:600;font-size:1.15rem;color:var(--ink)}
.pcard--static{min-height:min(60vh,480px)}
.pcard--flip .pcard__img{order:2}
.projs__list{display:grid;gap:clamp(1.4rem,3vw,2.6rem)}

/* Bilderband */
.reel{display:grid;gap:clamp(.6rem,1.1vw,1rem);margin-top:clamp(3rem,7vw,6rem);overflow:hidden}
.reel__row{overflow:hidden}
.reel .mq__track{gap:clamp(.6rem,1.1vw,1rem)}
.reel__item{flex:none;display:block;height:clamp(140px,18.5vw,270px);aspect-ratio:var(--r,1.33);border-radius:16px;overflow:hidden;background:var(--mist-2)}
.reel__item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.reel__item:hover img{transform:scale(1.07)}
.reel__cta{display:flex;justify-content:center;margin-top:clamp(1.4rem,3vw,2.4rem)}

/* Ablauf mit LED-Schiene */
.proc__list{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(.7rem,1.4vw,1.4rem);padding-top:3.4rem}
.proc__rail{position:absolute;left:0;right:0;top:1.3rem;height:3px;border-radius:3px;background:rgba(255,255,255,.13)}
.proc__rail i{display:block;height:100%;border-radius:3px;background:var(--cyan);box-shadow:var(--glow);transform:scaleX(var(--p,0));transform-origin:0 50%}
.proc__step{position:relative;padding:1.5rem 1.25rem 1.5rem;border-radius:var(--rad);background:rgba(255,255,255,.045);border:1px solid var(--line-d);transition:background-color .6s,border-color .6s,transform .7s var(--ease)}
.proc__step::before{content:"";position:absolute;left:1.25rem;top:calc(-2.1rem - 6px);width:15px;height:15px;border-radius:50%;background:var(--navy);border:3px solid rgba(255,255,255,.32);transition:background-color .4s,border-color .4s,box-shadow .5s}
.proc__step.is-lit{background:rgba(0,175,239,.1);border-color:rgba(0,175,239,.5);transform:translateY(-6px)}
.proc__step.is-lit::before{background:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow)}
.proc__ic{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:14px;background:rgba(255,255,255,.09);color:#fff;margin-bottom:1.1rem;transition:background-color .5s,color .5s,box-shadow .5s}
.proc__step.is-lit .proc__ic{background:var(--cyan);color:var(--navy);box-shadow:0 0 26px rgba(0,175,239,.55)}
.proc__no{font-family:var(--f-h);font-weight:600;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.proc__step h3{font-family:var(--f-h);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.15;color:#fff;margin:.4rem 0 .55rem;overflow-wrap:break-word;hyphens:auto}
.proc__step p{font-size:.93rem;line-height:1.55;color:rgba(255,255,255,.74)}

/* Videos */
.vids__rail{display:flex;gap:clamp(.8rem,1.5vw,1.4rem);overflow-x:auto;padding:.4rem var(--pad) 1.6rem;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.vids__rail::-webkit-scrollbar{display:none}
.vids__rail.is-drag{cursor:grabbing}
.vids__rail.is-drag a{pointer-events:none}
.vids__rail .vc{flex:none;width:clamp(176px,19vw,290px)}
.vc{display:block;color:#fff}
.vc__img{position:relative;display:block;aspect-ratio:9/16;border-radius:var(--rad);overflow:hidden;background:var(--navy-2);box-shadow:0 24px 50px -32px rgba(8,18,28,.6);transition:transform .6s var(--ease),box-shadow .6s}
.vc--wide .vc__img{aspect-ratio:16/9}
.vc:hover .vc__img{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(8,18,28,.7)}
.vc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vc:hover .vc__img img{transform:scale(1.06)}
.vc__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,28,0) 45%,rgba(8,18,28,.88))}
.vc__play{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;transition:transform .5s var(--ease),background-color .3s,border-color .3s,color .3s,box-shadow .4s}
.vc__play .ic{margin-left:3px}
.vc:hover .vc__play{transform:scale(1.14);background:var(--cyan);border-color:var(--cyan);color:var(--navy);box-shadow:var(--glow)}
.vc__meta{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:.6rem;padding:1rem 1rem .95rem;font-size:.84rem;font-weight:650;line-height:1.3}
.vc__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vc__dur{flex:none;opacity:.82}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,17vw,250px),1fr));gap:clamp(.8rem,1.5vw,1.4rem)}
.vgrid .vc--wide{grid-column:span 2}
.vgrid--in{margin-top:clamp(2rem,4vw,4rem)}

/* Team */
.team__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,7vw,7.5rem);align-items:center}
.team__imgs{position:relative;padding-bottom:clamp(3rem,8vw,7rem)}
.team__img--1{width:80%;aspect-ratio:4/3}
.team__img--2{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:4/3;border:clamp(5px,.7vw,10px) solid var(--mist);box-shadow:var(--shadow);z-index:2;will-change:transform}
.team__copy .h2{margin:1rem 0 1.3rem}
.team__copy .btn{margin-top:1.9rem}

/* FAQ */
.faq__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,7vw,7.5rem);align-items:start}
.faq__head{position:sticky;top:calc(var(--hd) + 1.6rem);display:grid;gap:1.1rem;justify-items:start}
.faq__list{display:grid;gap:.8rem}
.qa{border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color .35s,box-shadow .45s}
.qa[open]{border-color:rgba(0,175,239,.55);box-shadow:0 26px 56px -40px rgba(0,120,174,.75)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.35rem;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__q{font-family:var(--f-h);font-weight:600;font-size:clamp(1.06rem,1rem + .36vw,1.3rem);line-height:1.3;color:var(--ink)}
.qa summary i{flex:none;position:relative;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--mist);transition:background-color .35s,transform .45s var(--ease)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:30%;right:30%;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{background:var(--cyan)}
.qa[open] summary i::after{transform:rotate(0)}
.qa__a{padding:0 1.35rem 1.35rem;max-width:68ch;overflow:hidden}
.qa__a p+p{margin-top:.8em}

/* Abschluss */
.cta{padding:clamp(7rem,16vw,14rem) 0 clamp(5rem,11vw,9.5rem)}
.cta__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,28,.93),rgba(8,18,28,.8) 50%,rgba(8,18,28,.95))}
.cta__roof{position:absolute;left:0;right:0;top:clamp(1.6rem,3.4vw,3.4rem);z-index:1;width:100%;height:clamp(60px,11.5vw,170px);overflow:visible;pointer-events:none}
.cta__roof path{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--o,0);filter:drop-shadow(0 0 6px rgba(0,175,239,.95)) drop-shadow(0 0 18px rgba(0,175,239,.55))}
.cta__in{position:relative;z-index:2;display:grid;justify-items:center;text-align:center}
.cta__title{max-width:17ch;margin:1.1rem 0 1.2rem}
.cta__text{max-width:52ch;font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.cta__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.3rem 2.6rem;margin-top:2.4rem;text-align:left}

/* ---------- Fußzeile ---------- */
.ft{position:relative;background:#050d15;color:rgba(255,255,255,.72);padding-top:clamp(3.6rem,7vw,6rem);overflow:hidden;font-size:.98rem}
.ft__roof{position:absolute;left:50%;top:0;width:max(100%,1100px);height:100%;transform:translateX(-50%);pointer-events:none}
.ft__roof path{fill:none;stroke:rgba(255,255,255,.055);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ft__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.ft__logo{display:block;width:clamp(170px,16vw,230px);color:#fff;margin-bottom:1.3rem}
.ft__logo .logo{width:100%;height:auto}
.ft__brand p{max-width:38ch}
.ft__h{font-family:var(--f-h);font-weight:600;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:1.2rem}
.ft__col li+li{margin-top:.55rem}
.ft a{transition:color .25s}
.ft a:hover{color:var(--cyan)}
.ft__line{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.9rem;overflow-wrap:anywhere}
.ft__line .ic{color:var(--cyan);margin-top:.25rem}
.ft__line strong{color:#fff}
.ft__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.ft__social a{padding:.45rem .95rem;border:1px solid var(--line-d);border-radius:99px;font-size:.86rem;font-weight:600}
.ft__bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6rem 2rem;padding:1.3rem 0 1.5rem;border-top:1px solid var(--line-d);font-size:.86rem}
.ft__credit{text-align:center;white-space:nowrap}
.ft__credit a{color:#fff;font-weight:700}
.ft__heart{display:inline-block;color:#ff4d6d;margin:0 .15em;animation:heart 1.6s ease-in-out infinite}
@keyframes heart{0%,100%{transform:scale(1)}14%{transform:scale(1.28)}28%{transform:scale(1)}42%{transform:scale(1.18)}56%{transform:scale(1)}}
.ft__legal{display:flex;gap:1.6rem;justify-self:end}

/* ---------- Kopf der Unterseiten ---------- */
.ph{position:relative;color:rgba(255,255,255,.84);background:var(--navy);overflow:hidden;padding:calc(var(--hd) + clamp(3rem,8vw,6.5rem)) 0 clamp(6.5rem,14vw,12.5rem)}
.ph__shade{background:linear-gradient(90deg,rgba(8,18,28,.94) 0%,rgba(8,18,28,.78) 50%,rgba(8,18,28,.5) 100%),linear-gradient(180deg,rgba(8,18,28,.6),rgba(8,18,28,0) 30%)}
.ph__in{position:relative;z-index:3}
.crumbs{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:clamp(1.6rem,4vw,3rem)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.3rem .2rem}
.crumbs li+li::before{content:"";display:inline-block;width:.42rem;height:.42rem;border-right:2px solid var(--cyan);border-top:2px solid var(--cyan);transform:rotate(45deg);margin:0 .75rem 0 .5rem;vertical-align:.08em}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}
.ph__title{max-width:17ch;margin-top:1rem;overflow-wrap:break-word;hyphens:auto}
.ph__title--long{font-size:clamp(2rem,4.5vw,4rem);max-width:23ch;line-height:1.07}
.ph__intro{max-width:60ch;margin-top:1.4rem;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.6}
.ph--404{min-height:100svh;display:grid;align-items:center;padding-bottom:6rem}

/* ---------- Leistungen (Übersicht) ---------- */
.svcp__item{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.svcp__item+.svcp__item{margin-top:clamp(4rem,9vw,8rem)}
.svcp__item--flip .svcp__img{order:2}
.svcp__img{display:block;aspect-ratio:5/4}
.svcp__no{position:absolute;left:1.2rem;top:1.2rem;z-index:2;padding:.42rem .85rem;border-radius:99px;background:#fff;color:var(--ink);font-family:var(--f-h);font-weight:600;font-size:.95rem;letter-spacing:.06em}
.svcp__body .h2{margin:.9rem 0 1.1rem;overflow-wrap:break-word;hyphens:auto}
.svcp__body .btn{margin-top:1.9rem}
.morep__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.morep__grid .h2{margin:1rem 0 1.3rem}
.morep__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.morep__list li{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.2rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line-d);font-family:var(--f-h);font-weight:500;font-size:1.1rem;line-height:1.25;color:#fff}
.morep__list .ic{color:var(--cyan)}

/* ---------- Artikel (Leistung, Projekt, Rechtliches) ---------- */
.art__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2.4rem,6vw,6.5rem);align-items:start}
.art__side{position:sticky;top:calc(var(--hd) + 1.2rem);display:grid;gap:1.2rem}
.prose{max-width:70ch;font-size:clamp(1.03rem,1rem + .2vw,1.14rem);line-height:1.78}
.prose>*+*{margin-top:1.1em}
.prose h2{font-family:var(--f-h);font-weight:600;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.018em;color:var(--ink);margin-top:1.8em}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--f-h);font-weight:600;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;color:var(--ink);margin-top:1.7em}
.prose h4{font-family:var(--f-h);font-weight:600;font-size:1.08rem;color:var(--ink);margin-top:1.6em}
.prose strong{color:var(--ink)}
.prose a{color:var(--cyan-ink);text-decoration:underline;text-underline-offset:.18em;overflow-wrap:anywhere}
.prose ul,.prose ol{padding-left:1.3rem}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.5rem}
.prose ul li::before{content:"";position:absolute;left:.15rem;top:.72em;width:.5rem;height:.5rem;border-radius:50%;background:var(--cyan)}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.4em}
.prose blockquote{margin:1.6em 0;padding-left:1.2rem;border-left:3px solid var(--cyan);font-size:1.1em;color:var(--ink)}
.prose--legal{max-width:78ch;font-size:1rem}
.prose--legal h2{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.prose--legal h3{font-size:1.2rem}
.legal__stand{margin-top:3rem;font-size:.86rem;font-weight:600;color:var(--mut)}
.box{border:1px solid var(--line);border-radius:var(--rad);padding:clamp(1.3rem,2.2vw,1.8rem);background:#fff;box-shadow:0 26px 60px -46px rgba(8,18,28,.5)}
.box__h{font-family:var(--f-h);font-weight:600;font-size:1.25rem;line-height:1.2;color:var(--ink);margin-bottom:1rem}
.box .checks{margin-top:0}
.box--dark{background:radial-gradient(80% 60% at 100% 0,rgba(0,175,239,.22),transparent 70%),var(--navy);border-color:transparent;color:rgba(255,255,255,.8)}
.box--dark .box__h{color:#fff}
.box--dark .btn{margin:1.2rem 0 1.3rem}
.kv>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.8rem;padding:.7rem 0;border-top:1px solid var(--line)}
.kv>div:first-child{border-top:0;padding-top:0}
.kv dt{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding-top:.25rem}
.kv dd{font-weight:700;color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.8rem)}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.js [data-stagger]>.card.is-in:hover,.card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.card__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist-2)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{display:grid;gap:.5rem;padding:1.3rem 1.4rem 1.5rem}
.card__meta{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan-ink)}
.card__title{font-family:var(--f-h);font-weight:600;font-size:1.32rem;line-height:1.2;color:var(--ink)}
.card__text{font-size:.94rem;line-height:1.55}

/* ---------- Referenzen ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.filter button{padding:.65rem 1.1rem;border-radius:99px;border:1px solid var(--line-d);font-weight:650;font-size:.9rem;color:rgba(255,255,255,.82);transition:background-color .3s,color .3s,border-color .3s,box-shadow .4s}
.filter button sup{font-size:.68rem;margin-left:.3rem;opacity:.75}
.filter button:hover{border-color:#fff;color:#fff}
.filter button.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--navy);box-shadow:0 10px 28px -10px rgba(0,175,239,.85)}
.grid{display:flex;flex-wrap:wrap;gap:clamp(.4rem,.8vw,.8rem)}
.grid::after{content:"";flex:40 1 0}
.tile{position:relative;display:block;overflow:hidden;border-radius:14px;height:clamp(150px,21vw,330px);flex:var(--r) 1 calc(var(--r)*clamp(120px,15.4vw,240px));background:var(--navy-2)}
.tile.is-off{display:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.07)}
.tile__cap{position:absolute;inset:auto 0 0;padding:1.8rem .9rem .75rem;font-size:.8rem;font-weight:650;line-height:1.3;color:#fff;background:linear-gradient(rgba(8,18,28,0),rgba(8,18,28,.9));transform:translateY(102%);transition:transform .5s var(--ease)}
.tile:hover .tile__cap,.tile:focus-visible .tile__cap{transform:none}
.gal--project .grid .tile{height:clamp(170px,25vw,400px)}
.nextp{display:grid;align-items:center;min-height:min(74vh,44rem)}
.nextp__shade{position:absolute;inset:0;background:rgba(8,18,28,.74);transition:background-color .6s}
.nextp:hover .nextp__shade{background:rgba(8,18,28,.6)}
.nextp__in{position:relative;z-index:1;display:grid;gap:1.3rem;justify-items:start;padding-block:4rem}
.nextp__title{max-width:19ch;overflow-wrap:break-word;hyphens:auto}

/* ---------- Kontakt ---------- */
.kon__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.icards{display:grid;gap:.8rem}
.icard{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:18px;transition:transform .5s var(--ease),border-color .35s,box-shadow .45s}
a.icard:hover{transform:translateY(-4px);border-color:rgba(0,175,239,.55);box-shadow:0 26px 56px -40px rgba(0,120,174,.75)}
.icard__ic{flex:none;display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:14px;background:rgba(0,175,239,.13);color:var(--cyan-ink)}
.icard small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.icard strong{display:block;font-family:var(--f-h);font-weight:600;font-size:1.28rem;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.icard address{font-size:.96rem;line-height:1.5}
.map{position:relative;margin-top:.8rem;aspect-ratio:4/3;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);background:#fff}
.map__ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;text-align:center;padding:1.4rem;background:repeating-linear-gradient(90deg,transparent 0 47px,var(--line) 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,var(--line) 47px 48px)}
.map__pin{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--cyan);color:var(--navy);box-shadow:0 0 0 10px rgba(0,175,239,.16)}
.map__ph p{color:var(--ink)}
.map__ph small{max-width:38ch;font-size:.8rem;line-height:1.45;color:var(--mut)}
.map__ph small a{text-decoration:underline}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fcard{background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(1.4rem,3.6vw,3.2rem);box-shadow:0 44px 100px -60px rgba(8,18,28,.6)}
.fcard .h3{margin:.8rem 0 1.6rem}
.f{display:grid;gap:1.2rem}
.f__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.f__field{display:grid;gap:.45rem;min-width:0}
.f label{font-weight:700;font-size:.88rem;color:var(--ink)}
.f label i,.f__check i{font-style:normal;color:var(--cyan-ink)}
.f input[type=text],.f input[type=email],.f input[type=tel],.f select,.f textarea{width:100%;background:var(--mist);border:1.5px solid transparent;border-radius:14px;padding:.9rem 1rem;font-size:1.02rem;line-height:1.4;color:var(--ink);outline:0;transition:border-color .3s,background-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.f select{background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f1a24' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 1rem center/12px;padding-right:2.4rem;cursor:pointer}
.f textarea{resize:vertical;min-height:9rem}
.sel{position:relative;display:grid}
.sel>.sel__native,.sel>.sel__btn{grid-area:1/1;min-width:0}
.sel__native{visibility:hidden}
.sel__btn{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;text-align:left;background:var(--mist);border:1.5px solid transparent;border-radius:14px;padding:.9rem 1rem;font-size:1.02rem;font-weight:500;line-height:1.4;color:var(--ink);cursor:pointer;transition:border-color .3s,background-color .3s,box-shadow .3s}
.sel__btn:hover{background:#e9eef3}
.sel__btn:focus-visible,.sel.is-open .sel__btn{outline:0;background:#fff;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,175,239,.16)}
.sel__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel.is-placeholder .sel__label{color:var(--mut)}
.sel__chev{flex:none;transition:transform .35s var(--ease),color .3s}
.sel.is-open .sel__chev{transform:rotate(180deg);color:var(--cyan-ink)}
.sel__list{position:fixed;z-index:150;padding:.4rem;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 34px 70px -28px rgba(8,18,28,.45),0 6px 18px -6px rgba(8,18,28,.12);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:50% 0;transition:opacity .18s,transform .24s var(--ease)}
.sel__list.is-up{transform:translateY(8px) scale(.98);transform-origin:50% 100%}
.sel__list.is-in{opacity:1;transform:none}
.sel__opt{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.74rem .9rem;border-radius:11px;font-size:1rem;font-weight:550;line-height:1.3;color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s}
.sel__opt+.sel__opt{margin-top:2px}
.sel__opt.is-ph{color:var(--mut)}
.sel__opt.is-active{background:var(--mist)}
.sel__opt[aria-selected=true]{background:rgba(0,175,239,.12);color:var(--cyan-ink);font-weight:700}
.sel__opt[aria-selected=true]::after{content:"";flex:none;width:.42rem;height:.78rem;margin-right:.3rem;border:solid var(--cyan-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-2px)}
.sel__opt[aria-disabled=true]{opacity:.45;cursor:default}
.f input:focus,.f select:focus,.f textarea:focus{background-color:#fff;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,175,239,.16)}
.f [aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.f__err{font-size:.86rem;font-weight:600;color:var(--red);line-height:1.35}
.f__check{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.8rem;align-items:start;font-weight:500!important;font-size:.92rem!important;line-height:1.5;color:var(--text)!important;cursor:pointer}
.f__check input{width:1.3rem;height:1.3rem;margin:.1rem 0 0;accent-color:var(--cyan-ink)}
.f__check a{text-decoration:underline;color:var(--ink)}
.f__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f__ts{min-height:65px}
.f__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.f__hint{font-size:.84rem;color:var(--mut)}
.f .btn[disabled]{opacity:.55;pointer-events:none}
.f__note{padding:1rem 1.2rem;margin-bottom:1.4rem;border-radius:14px;border:1px solid rgba(0,175,239,.5);background:rgba(0,175,239,.1);color:var(--ink);font-weight:600;line-height:1.45}
.f__note.is-err{border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.08)}

/* ---------- Lightbox & Videofenster ---------- */
.lb{position:fixed;inset:0;z-index:130;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(5,13,21,.97);color:#fff;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.lb.is-open{opacity:1;visibility:visible}
.lb__top,.lb__bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem var(--pad);font-size:.9rem;font-weight:600}
.lb__count b{font-family:var(--f-h);font-size:1.3rem;color:var(--cyan)}
.lb__btn{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line-d);transition:background-color .3s,color .3s,border-color .3s}
.lb__btn:hover{background:var(--cyan);color:var(--navy);border-color:var(--cyan)}
.lb__stage{position:relative;min-height:0;overflow:hidden;touch-action:pan-y}
.lb__stage img,.lb__stage video{position:absolute;inset:0;margin:auto;max-width:calc(100% - var(--pad)*2);max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:14px;transform:scale(.97);opacity:0;transition:opacity .45s,transform .7s var(--ease)}
.lb__stage .is-show{opacity:1;transform:none}
.lb__stage video{background:#000}
.lb__nav{display:flex;gap:.5rem}
.lb__cap{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.8)}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .hd__teltx{display:none}
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc__grid .scard{aspect-ratio:4/3.6}
  .proc__list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.2rem;padding-top:0}
  .proc__rail,.proc__step::before{display:none}
  .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  :root{--hd:70px}
  .hd__nav,.hd__tel,.hd__cta{display:none}
  .hd__burger{display:block}
  .hd__right{margin-left:auto}
  .hero{padding-bottom:clamp(6.8rem,23vw,9rem)}
  .hd__logo{width:178px}
  .hero__shade{background:linear-gradient(0deg,rgba(8,18,28,.94) 0%,rgba(8,18,28,.72) 55%,rgba(8,18,28,.5) 100%)}
  .hero__nav{left:var(--pad);right:var(--pad);bottom:clamp(3.4rem,13vw,5.6rem);justify-items:start;max-width:none}
  .hero__cap{display:none}
  .head--split,.about__grid,.team__grid,.faq__grid,.kon__grid,.art__grid,.morep__grid,.svcp__item{grid-template-columns:minmax(0,1fr)}
  .about__media{order:-1}
  .about__badge{left:.6rem}
  .faq__head,.art__side{position:static}
  .pcard{grid-template-columns:minmax(0,1fr);min-height:0}
  .stack .pcard{position:relative;top:auto;transform:none!important;filter:none!important}
  .pcard__img{aspect-ratio:4/3;min-height:0}
  .pcard--flip .pcard__img,.svcp__item--flip .svcp__img{order:0}
  .proc__list{grid-template-columns:minmax(0,1fr);padding:0 0 0 2.2rem;row-gap:.8rem}
  .proc__rail{display:block;left:.35rem;right:auto;top:0;bottom:0;width:3px;height:auto}
  .proc__rail i{height:100%;transform:scaleY(var(--p,0));transform-origin:50% 0}
  .proc__step::before{display:block;left:calc(-1.85rem - 6px);top:1.8rem}
  .proc__step.is-lit{transform:none}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stats>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:1rem;border-right:0;border-bottom:1px solid var(--line-d);padding:1.2rem 0!important}
  .stats dd{margin:0 0 .5rem}
  .cards,.svc__grid--3{grid-template-columns:minmax(0,1fr)}
  .morep__list{grid-template-columns:minmax(0,1fr)}
  .cta__row{flex-direction:column}
  .tile__cap{display:none}
  .scard__text{max-height:none;opacity:1}
}
@media (max-width:560px){
  .hero__title{font-size:clamp(2.3rem,11vw,3.2rem)}
  .hero__cta .btn{flex:1 1 auto}
  .svc__grid{grid-template-columns:minmax(0,1fr)}
  .svc__grid .scard,.svc__grid--3 .scard{aspect-ratio:4/3.4}
  .checks{grid-template-columns:minmax(0,1fr)}
  .f__row{grid-template-columns:minmax(0,1fr)}
  .ft__grid{grid-template-columns:minmax(0,1fr)}
  .ft__bar{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:.7rem}
  .ft__legal{justify-self:center}
  .vids__rail .vc{width:56vw}
  .about__img--a{width:88%}
  .about__badge{max-width:13.5rem;padding:.8rem .9rem}
  .about__badgeic{width:2.5rem;height:2.5rem}
  .about__badge strong{font-size:.95rem}
}

/* ---------- Ruhiger Modus / Druck ---------- */
.calm *,.calm *::before,.calm *::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
.calm [data-in],.calm .ln>span,.calm [data-stagger]>*,.calm [data-gallery]>*{opacity:1!important;transform:none!important}
.calm [data-reveal]>.px{clip-path:none!important}
.calm .band__text .w{opacity:1}
.calm .roofline__led{stroke-dashoffset:0!important}
.calm .stack .pcard{position:relative;top:auto}
.calm .loader,.calm .curtain{display:none!important}
@media print{
  .hd,.menu,.loader,.curtain,.cta,.mq,.reel,.totop,.topbar{display:none!important}
  body,main,.sec,.sec--dark,.hero,.ph,.ft{background:#fff!important;color:#000!important}
  .js [data-in],.js .ln>span{opacity:1!important;transform:none!important}
}