/* Hollstein Medien: Handwerk für digitale Räume */
@font-face{font-family:"Playfair Display";src:url(fonts/PlayfairDisplay.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/Montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --canvas:#0F222D;
  --canvas-deep:#0B1A23;
  --panel:#142B38;
  --line:rgba(235,231,217,.16);
  --line-strong:rgba(235,231,217,.42);
  --accent:#EBE7D9;
  --accent-hover:#F7F3E8;
  --accent-muted:rgba(235,231,217,.28);
  --glow:#D8CFB2;
  --text-secondary:#A9B6BF;
  --text-primary:#EBE7D9;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --gutter:clamp(18px,5vw,72px);
  --plumb-x:clamp(14px,3.2vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color-scheme:dark}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-weight:400;font-size:clamp(16px,1.05vw,18px);line-height:1.65;-webkit-font-smoothing:antialiased;opacity:0;animation:pagein 1.1s var(--ease) .05s forwards}
@keyframes pagein{to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--accent);color:var(--canvas);font-weight:500;border-radius:6px;transition:top .25s var(--ease)}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:.78em;letter-spacing:.08em}

/* ---------- environment layer (one place, not stacked sections) ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env-glow{position:absolute;width:120vmax;height:120vmax;left:50%;top:40%;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 50%,rgba(216,207,178,.14) 0%,rgba(216,207,178,.05) 22%,rgba(15,34,45,0) 50%);animation:glowdrift 75s ease-in-out -20s infinite alternate}
@keyframes glowdrift{0%{transform:translate(-56%,-52%) scale(1)}100%{transform:translate(-44%,-46%) scale(1.12)}}
.env-room{position:absolute;right:-4vw;bottom:-2vh;width:min(74vw,1040px);color:var(--accent);opacity:var(--envo,.075);transform:perspective(1400px) translate3d(var(--mx,0px),var(--my,0px),0) rotateX(14deg) rotateY(calc(var(--ry,-20)*1deg));transform-origin:50% 55%;filter:drop-shadow(0 0 6px rgba(216,207,178,.35));transition:opacity .6s var(--ease)}
@keyframes roomdrift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(-26px,-18px) rotate(.6deg)}}
.motes{position:absolute;inset:0}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--glow);opacity:0;animation:mote var(--d,40s) linear var(--dl,-10s) infinite}
@keyframes mote{0%{transform:translate(0,0);opacity:0}8%{opacity:.34}50%{opacity:.18}92%{opacity:.3}100%{transform:translate(var(--dx,20px),var(--dy,-160px));opacity:0}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px var(--gutter);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.nav::before{content:"";position:absolute;inset:0;background:rgba(11,26,35,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .5s var(--ease);z-index:-1}
.nav.scrolled::before{opacity:1}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1360px;margin:0 auto}
.brand{display:inline-flex;align-items:stretch;gap:12px;text-decoration:none;color:var(--accent)}
.brand-rule{width:1.5px;background:var(--accent);opacity:.9;transform-origin:top;align-self:stretch}
.brand-text{display:flex;flex-direction:column;line-height:1;font-family:var(--display);font-weight:700;font-variant:small-caps;letter-spacing:.02em;font-size:1.22rem}
.brand-l1{font-size:1em}
.brand-l2{font-size:.86em;margin-top:.12em}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links>a:not(.btn){text-decoration:none;font-size:.86rem;font-weight:500;letter-spacing:.02em;color:var(--text-primary);opacity:.82;position:relative;padding:6px 0;transition:opacity .3s var(--ease)}
.nav-links>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav-links>a:not(.btn):hover{opacity:1}
.nav-links>a:not(.btn):hover::after{transform:scaleX(1)}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--text-secondary)}
.lang button{all:unset;display:inline-block;box-sizing:border-box;min-width:24px;min-height:24px;padding:7px 2px;text-align:center;cursor:pointer;color:var(--text-secondary);transition:color .3s var(--ease)}
.lang button[aria-pressed="true"]{color:var(--accent)}
.lang button:hover{color:var(--accent)}
.lang button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-toggle{all:unset;display:none;cursor:pointer;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 4px;color:var(--accent)}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-block;padding:14px 26px;border-radius:999px;font-family:var(--body);font-weight:500;font-size:.92rem;letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .45s var(--ease-out),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .45s var(--ease);text-shadow:none;line-height:1.2}
.btn-solid{background:var(--accent);color:var(--canvas);border-color:var(--accent)}
.btn-solid:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(235,231,217,.45)}
.btn-ghost{color:var(--accent);border-color:var(--line-strong);background:rgba(11,26,35,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)}
.btn-nav{padding:10px 18px;font-size:.84rem}
.btn-glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 6px rgba(235,231,217,.10),0 0 36px 6px rgba(216,207,178,.22);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.in .btn-glow::before{animation:glowpulse 5s ease-in-out -1.5s infinite}
@keyframes glowpulse{0%,100%{opacity:.25}50%{opacity:.75}}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- hero ---------- */
.hero{position:relative;height:1400vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas-deep)}
.poster{position:absolute;inset:0;background:var(--canvas-deep) center/cover no-repeat}
#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease);will-change:transform;transform:translateZ(0);pointer-events:none}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
.bands{position:absolute;inset:0;transform:translate3d(var(--px,0px),var(--py,0px),0) skewY(calc(var(--sk,0)*1deg));transform-origin:left center}
.band{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(34vw,560px);opacity:0;visibility:hidden;pointer-events:none;text-shadow:var(--tshadow);--k:0}
.band::before{content:"";position:absolute;inset:-45% -55%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(5,5,10,.72) 0%,rgba(5,5,10,.64) 50%,rgba(5,5,10,.28) 70%,rgba(5,5,10,0) 84%)}
.band.settle::before{background:radial-gradient(ellipse 64% 60% at 48% 50%,rgba(5,5,10,.78) 0%,rgba(5,5,10,.68) 50%,rgba(5,5,10,.30) 70%,rgba(5,5,10,0) 84%)}
.band.on{visibility:visible}
.band.settle.on{pointer-events:auto}
.band .hl{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.7vw,3.7rem);line-height:1.08;letter-spacing:-.005em;margin:0;max-width:14ch}
.band .sub{margin:1.1em 0 0;font-size:clamp(1rem,1.25vw,1.2rem);color:var(--text-primary);opacity:.9;max-width:44ch;--ks:clamp(0,(var(--k,0) - .5)*3,1);opacity:calc(var(--ks)*.92);transform:translateY(calc((1 - var(--ks))*10px))}
.band.settle .hl{font-size:clamp(2.1rem,4.2vw,4.3rem);font-weight:700}
.band.b3 .hl{font-size:clamp(1.7rem,3.15vw,3.2rem);max-width:none}
.band.settle .cta-row{width:max-content;max-width:min(72vw,760px)}
.band.settle .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1)}
.chip-kicker{margin:0 0 1.2em;--kk:clamp(0,var(--k,0)*2,1);opacity:var(--kk);transform:translateY(calc((1 - var(--kk))*8px))}
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 1.2em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2em;--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.cta-row .btn{text-shadow:none}
/* split text */
.band .w{display:inline-block;white-space:nowrap}
.band .c{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc)}
.band[data-fx="grid"] .c{transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.band[data-fx="weave"] .c{transform:translateY(calc((1 - var(--kc))*var(--jy,0px)))}
.band[data-fx="depth"] .c{--kc:1;opacity:1}
.band[data-fx="depth"] .hl{--kd:clamp(0,var(--k,0)*1.35,1);opacity:var(--kd);transform:scale(calc(.84 + .16*var(--kd)));transform-origin:left center}
.band[data-fx="halves"] .c{--kc:1;opacity:1}
.band[data-fx="halves"] .w{--kw:clamp(0,(var(--k,0) - var(--th,0)*.4)*2.4,1);opacity:var(--kw);transform:translateX(calc((1 - var(--kw))*var(--hx,-40px)))}
.band[data-fx="punch"] .c{--kc:1;opacity:1}
.band[data-fx="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));transform-origin:left center}
.band[data-fx="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
.band[data-fx="drift"] .c{--kc:1;opacity:1}
.band[data-fx="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
.band[data-fx="rise"] .c{--kc:1;opacity:1}
.band[data-fx="rise"] .w{--kw:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kw);transform:translateY(calc((1 - var(--kw))*22px))}
/* ring + cue */
.ring{position:absolute;left:50%;bottom:34px;width:36px;height:36px;margin-left:-18px;color:var(--accent);transform:rotate(-90deg);opacity:.9;transition:opacity .6s var(--ease)}
.ring-fill{transition:stroke-dashoffset .2s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-secondary);opacity:0;transition:opacity .8s var(--ease)}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:1}
.stage.scrolled .cue{opacity:0}
.cue-txt{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.cue-line{width:1px;height:38px;background:linear-gradient(to bottom,var(--accent),transparent);animation:cueline 2.4s var(--ease) -.6s infinite}
@keyframes cueline{0%{transform:scaleY(0);transform-origin:top;opacity:0}30%{opacity:1}60%{transform:scaleY(1);transform-origin:top}61%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom;opacity:0}}
@media (max-height:560px){.cue,.chip-kicker{display:none}}
@media (max-height:640px) and (min-width:721px){#hero{object-position:50% 25%}.poster{background-position:50% 25%}}

/* ---------- main + plumb line ---------- */
main{position:relative;z-index:2;background:transparent}
main::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--canvas-deep) 0,rgba(15,34,45,.0) 220px);pointer-events:none}
.plumb{position:absolute;left:var(--plumb-x);top:0;bottom:0;width:1px;pointer-events:none;z-index:1;--pl:0;--plpx:0px}
.plumb-line{position:absolute;left:0;top:0;width:1px;height:100%;background:linear-gradient(to bottom,var(--accent),var(--accent-muted));opacity:.55;transform:scaleY(var(--pl));transform-origin:top}
.plumb-bob{position:absolute;left:-4px;top:-9px;width:9px;height:18px;transform:translateY(var(--plpx));color:var(--accent)}
.bob{position:absolute;inset:0;display:block;transform-origin:50% 0}
.bob::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);box-shadow:0 0 18px 2px rgba(216,207,178,.5)}
.bob::after{content:"";position:absolute;left:-10px;top:-10px;right:-10px;bottom:-10px;border-radius:50%;background:radial-gradient(circle,rgba(216,207,178,.35),transparent 70%);animation:bobglow 4.5s ease-in-out -1s infinite}
.bob.swing{animation:swing 1.5s var(--ease) 1}
@keyframes swing{0%{transform:rotate(0)}18%{transform:rotate(calc(var(--sd,1)*11deg))}42%{transform:rotate(calc(var(--sd,1)*-7deg))}66%{transform:rotate(calc(var(--sd,1)*4deg))}85%{transform:rotate(calc(var(--sd,1)*-2deg))}100%{transform:rotate(0)}}
@keyframes bobglow{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
@media (max-width:720px){.plumb{left:6px;opacity:.55}}
@media (max-height:560px){.plumb{display:none}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(88px,12vw,160px) 0}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.grid-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.h2{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.12;letter-spacing:-.005em;margin:0;max-width:20ch}
.h3{font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.25;margin:0 0 .5em}
.p{margin:0;color:var(--text-secondary);max-width:58ch}
.lede{color:var(--text-primary);font-size:1.06em;max-width:48ch}
.label{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 .9em}
.rule{display:block;height:1px;width:120px;background:var(--accent);margin-top:2em;transform-origin:left}
.tlink{display:inline-block;margin-top:1.2em;color:var(--accent);text-decoration:none;font-weight:500;font-size:.92rem;position:relative;padding-bottom:3px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(.35);transform-origin:left;opacity:.6;transition:transform .5s var(--ease-out),opacity .4s var(--ease)}
.tlink:hover::after{transform:scaleX(1);opacity:1}
.sec-head{margin-bottom:clamp(40px,5vw,64px)}
.h2+.p,.h2+.lede{margin-top:1.1em}
.btn-hold{margin-top:1.6em}

/* entrances: prefixed with the container class so they win the cascade */
[data-in] .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out)}
[data-in].in .part{opacity:1;transform:none}
[data-in] .part:nth-child(1){transition-delay:0s}
[data-in] .part:nth-child(2){transition-delay:.09s}
[data-in] .part:nth-child(3){transition-delay:.18s}
[data-in] .part:nth-child(4){transition-delay:.27s}
[data-in] .part:nth-child(5){transition-delay:.36s}
[data-in] .part:nth-child(6){transition-delay:.45s}
[data-in] .part:nth-child(7){transition-delay:.54s}
[data-in].in.done .part:nth-child(n){transition-delay:0s}
[data-in] .rule.part{transform:scaleX(0)}
[data-in].in .rule.part{transform:scaleX(1)}

/* A: Warum */
.sticky-head{position:sticky;top:120px}
.reasons{list-style:none;margin:0;padding:0}
.reason{position:relative;padding:36px 0 36px 0;border-top:1px solid var(--line)}
.reason:first-child{border-top:0;padding-top:0}
.reason .num{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--accent);margin-bottom:1.2em;position:relative}
.reason .num::after{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--glow);opacity:0;box-shadow:0 0 12px 2px rgba(216,207,178,.5)}
.reason.in .num::after{animation:numglow 6s ease-in-out -2s infinite}
@keyframes numglow{0%,100%{opacity:.25}50%{opacity:.9}}

/* B: Leistungen */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.card{position:relative;padding:22px 22px 28px;background:linear-gradient(180deg,rgba(20,43,56,.78),rgba(20,43,56,.42));border:1px solid var(--line);border-radius:14px;transform:perspective(900px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg)) translateY(var(--ty,0px));transition:transform .4s var(--ease-out),border-color .5s var(--ease);overflow:hidden}
.card:hover{--ty:-6px;border-color:var(--line-strong)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(235,231,217,.16),transparent 55%);opacity:0;transition:opacity .5s var(--ease)}
.card:hover::after{opacity:1}
.card-fig{margin:0 0 22px;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:var(--canvas-deep)}
.card-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
.card.in .card-fig img{animation:kenburns 26s ease-in-out -8s infinite alternate}
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-1.5%,1%)}}
.card .p{font-size:.95em}

/* C: Das Lot */
.lot{background:linear-gradient(180deg,rgba(11,26,35,0),rgba(11,26,35,.55) 20%,rgba(11,26,35,.55) 80%,rgba(11,26,35,0))}
.lot-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.btn-hold{overflow:hidden;background:rgba(15,34,45,.6);color:var(--accent);border:1px solid var(--line-strong);padding:16px 30px;user-select:none;-webkit-user-select:none;touch-action:none;--p:0}
.btn-hold .hold-fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p));transform-origin:left;pointer-events:none}
.btn-hold .hold-txt{position:relative;mix-blend-mode:difference;color:#fff}
.btn-hold:hover{border-color:var(--accent);transform:none}
.btn-hold.done{pointer-events:none;border-color:var(--accent)}
.lights{list-style:none;margin:2.2em 0 0;padding:0;display:grid;gap:10px}
.light{position:relative;padding-left:26px;color:var(--text-secondary);opacity:.35;transform:translateX(-6px);transition:opacity .7s var(--ease),color .7s var(--ease),transform .7s var(--ease-out)}
.light::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--accent);opacity:.4;transition:opacity .7s var(--ease),box-shadow .7s var(--ease)}
.lot-wrap.done .light{opacity:1;color:var(--text-primary);transform:none}
.lot-wrap.done .light::before{opacity:1;box-shadow:0 0 12px 1px rgba(216,207,178,.7)}
.lot-wrap.done .light:nth-child(1){transition-delay:.1s}
.lot-wrap.done .light:nth-child(2){transition-delay:.45s}
.lot-wrap.done .light:nth-child(3){transition-delay:.8s}
.done-line{margin:1.6em 0 0;font-family:var(--display);font-size:1.3rem;color:var(--accent);opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease) 1.2s,transform .8s var(--ease-out) 1.2s}
.lot-wrap.done .done-line{opacity:1;transform:none}
.lot-stage{--p:0;position:relative;aspect-ratio:600/420;max-width:100%}
.room{position:absolute;inset:0;width:100%;height:100%;color:var(--accent);overflow:visible}
.room-lines{opacity:.45;transform:rotate(calc((1 - var(--p))*-3.2deg)) skewX(calc((1 - var(--p))*-4deg));transform-origin:50% 60%;transition:opacity .8s var(--ease)}
.lot-wrap.done .room-lines{opacity:1;filter:drop-shadow(0 0 6px rgba(216,207,178,.55))}
.plumb-g{transform-origin:320px 18px;transform:scaleY(var(--p))}
.plumb-tip{fill:var(--accent);stroke:none}
.plumb-string{opacity:.85}
.lot-stage::after{content:"";position:absolute;left:50%;bottom:6%;width:40%;height:10%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(216,207,178,.22),transparent 70%);opacity:var(--p);pointer-events:none}

/* D: Ablauf */
.steps{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:clamp(36px,5vw,64px)}
.steps::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(to bottom,var(--accent-muted),var(--line))}
.step{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:720px}
.step .dot{position:absolute;left:-38px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--canvas);border:1px solid var(--accent);opacity:0}
.step.in .dot{opacity:1;animation:breathe 4.8s ease-in-out -1.2s infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(216,207,178,.0)}50%{box-shadow:0 0 0 5px rgba(216,207,178,.14),0 0 14px 2px rgba(216,207,178,.35)}}
.step .label{margin-bottom:.6em}
.step .label .mono{color:var(--accent);margin-right:.6em}

/* E: Über mich */
.about-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.about-fig{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--canvas-deep)}
.about-fig img{width:100%;height:100%;object-fit:cover}
.about-fig figcaption{position:absolute;left:16px;bottom:14px;padding:6px 10px;border-radius:8px;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);backdrop-filter:blur(10px);color:var(--text-primary);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.about-fig::after{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 40% 60%,rgba(216,207,178,.14),transparent 55%);opacity:0;pointer-events:none}
.about-grid.in .about-fig::after{animation:aboutglow 7s ease-in-out -2s infinite}
@keyframes aboutglow{0%,100%{opacity:.35}50%{opacity:.9}}
.about-copy .p+.p{margin-top:1.1em}

/* F: FAQ */
.faq-wrap{max-width:860px}
.qa-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line);position:relative}
.qa::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.qa-list.in .qa::before{transform:scaleX(1)}
.qa-list.in .qa:nth-child(2)::before{transition-delay:.1s}
.qa-list.in .qa:nth-child(3)::before{transition-delay:.2s}
.qa-list.in .qa:nth-child(4)::before{transition-delay:.3s}
.qa-list.in .qa:nth-child(5)::before{transition-delay:.4s}
.qa-list.in .qa:nth-child(6)::before{transition-delay:.5s}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa-x{position:relative;width:14px;height:14px;flex:0 0 14px;align-self:center}
.qa-x::before,.qa-x::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1px;background:var(--accent);transition:transform .5s var(--ease-out)}
.qa-x::after{transform:rotate(90deg)}
.qa.open .qa-x::after{transform:rotate(0)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a>p{overflow:hidden;margin:0;color:var(--text-secondary);max-width:64ch}
.qa.open .qa-a>p{padding-bottom:24px}
.qa-list.in .qa.part:nth-child(n){transition-delay:0s}

/* G: Kontakt */
.kontakt-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.details{margin:2.4em 0 0;display:grid;gap:14px}
.details div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;align-items:baseline}
.details dt{color:var(--text-secondary);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.details dd{margin:0}
.details a{text-decoration:none;color:var(--text-primary);border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease)}
.details a:hover{border-color:var(--accent)}
.form{display:grid;gap:18px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(20,43,56,.7),rgba(20,43,56,.35))}
.field{display:grid;gap:8px}
.field label{font-size:.8rem;letter-spacing:.04em;font-weight:500;color:var(--text-secondary)}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--line-strong);background:rgba(11,26,35,.7);color:var(--text-primary);font:inherit;font-size:1rem;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:rgba(169,182,191,.78)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--accent)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.form .btn{justify-self:start}
.form-ok{margin:0;color:var(--accent)}
.form-err{margin:0;color:#F0C9B4}
.form-ok[hidden],.form-err[hidden],.field[hidden]{display:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form{container-type:inline-size}
@container (max-width:560px){.field-row{grid-template-columns:1fr}}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5l5 5 5-5%27 fill=%27none%27 stroke=%27%23EBE7D9%27 stroke-width=%271.4%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.field select option{background:var(--canvas-deep);color:var(--text-primary)}
.field .opt{color:rgba(169,182,191,.85);font-weight:400}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#F0C9B4}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.form-note{margin:0;font-size:.78rem;line-height:1.55;color:var(--text-secondary)}
.form-note a{color:var(--text-primary)}
.form .btn[disabled]{opacity:.6;cursor:progress}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;padding:56px 0 40px;border-top:1px solid var(--line);background:var(--canvas-deep)}
.foot-wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:stretch}
.foot-brand .brand-rule{grid-row:1/3}
.foot-tag{grid-column:2;margin:.6em 0 0;font-size:.82rem;color:var(--text-secondary);letter-spacing:.02em}
.foot-meta{font-size:.84rem;color:var(--text-secondary);text-align:right}
.foot-meta p{margin:0 0 .5em}
.foot-meta a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.foot-meta a:hover{border-color:var(--accent)}
.foot-note{font-size:.76rem;opacity:.8}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .grid-2,.lot-wrap,.about-grid,.kontakt-grid{grid-template-columns:minmax(0,1fr)}
  .sticky-head{position:static;margin-bottom:40px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:22px}
  .card-fig{grid-row:1/6;margin:0}
  .lot-stage{order:-1;max-width:560px}
}
/* The one-row nav needs ~900 px on the home page in German (up to ~920 px with a classic 17 px scrollbar);
   below 940 px it collapses into the menu button, so no link wraps and the Erstgespräch button is never
   pushed off the edge (it was, at 725–790 px, before 2026-09-21). */
@media (max-width:940px){
  .nav{padding:10px 16px}
  .nav-toggle{display:inline-block}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px 20px;background:rgba(11,26,35,.96);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .4s var(--ease-out),visibility 0s .4s}
  .nav.open .nav-links{opacity:1;transform:none;visibility:visible;transition:opacity .35s var(--ease),transform .4s var(--ease-out),visibility 0s}
  .nav-links>a:not(.btn){padding:10px 0;font-size:1rem}
  .btn-nav{margin-top:8px}
}
@media (max-width:720px){
  .card{grid-template-columns:minmax(0,1fr)}
  .card-fig{grid-row:auto;margin-bottom:18px}
  .details div{grid-template-columns:minmax(0,1fr)}
  .foot-meta{text-align:left}
}
@media (max-width:360px){:root{--gutter:16px}}

/* ---------- the five static-hero gates (identical strings in site.js) ---------- */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
  .poster{background-image:url(hero-ending.jpg)!important}
  #hero,.ring,.cue,.band.b1,.band.b2,.band.b3,.band.b4,.band.b5,.band.b6{display:none!important}
  .scrim{background:linear-gradient(to top,rgba(11,26,35,.92) 0,rgba(11,26,35,.55) 45%,rgba(11,26,35,.25) 100%)}
  .bands{position:relative;inset:auto;width:100%}
  .band.settle{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:720px;margin:0;padding:120px var(--gutter) 56px;opacity:1!important;visibility:visible!important;pointer-events:auto;--k:1!important}
  .band.settle::before{display:none}
  .band.settle .hl{font-size:clamp(2.2rem,9vw,4rem)}
}

/* ---------- the sixth gate: a metered or slow connection (site.js sets html.hero-static) ---------- */
html.hero-static .hero{height:auto}
html.hero-static .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
html.hero-static .poster{background-image:url(hero-ending.jpg)!important}
html.hero-static #hero,html.hero-static .ring,html.hero-static .cue,html.hero-static .band.b1,html.hero-static .band.b2,html.hero-static .band.b3,html.hero-static .band.b4,html.hero-static .band.b5,html.hero-static .band.b6{display:none!important}
html.hero-static .scrim{background:linear-gradient(to top,rgba(11,26,35,.92) 0,rgba(11,26,35,.55) 45%,rgba(11,26,35,.25) 100%)}
html.hero-static .bands{position:relative;inset:auto;width:100%}
html.hero-static .band.settle{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:720px;margin:0;padding:120px var(--gutter) 56px;opacity:1!important;visibility:visible!important;pointer-events:auto;--k:1!important}
html.hero-static .band.settle::before{display:none}
html.hero-static .band.settle .hl{font-size:clamp(2.2rem,9vw,4rem)}

/* ---------- reduced motion: final states, drives stopped ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  [data-in] .part{opacity:1;transform:none}
  [data-in] .rule.part{transform:scaleX(1)}
  .plumb{--pl:1}
  .plumb-bob{display:none}
  .lot-stage{--p:1}
  .lot-wrap .light{opacity:1;color:var(--text-primary);transform:none}
  .lot-wrap .light::before{opacity:1}
  .lot-wrap .done-line{opacity:1;transform:none}
  .lot-wrap .room-lines{opacity:1}
  .btn-hold{display:none}
  .qa::before{transform:scaleX(1)}
  .card-fig img{transform:none}
  .band .sub,.cta-row,.chip-kicker{opacity:1;transform:none}
  html{scroll-behavior:auto}
  @media (max-width:940px){.nav.open .nav-links{opacity:1;transform:none;visibility:visible}}
}


/* ---------- the crazy round ---------- */
.grain{position:fixed;inset:-10%;pointer-events:none;z-index:3;opacity:.05;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") repeat;background-size:220px 220px;animation:grain .8s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1.5%)}50%{transform:translate(1.5%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}
.reasons,.cards,.lot-wrap,.steps,.about-grid,.qa-list,.kontakt-grid{transform:skewY(calc(var(--sk,0)*1deg));transform-origin:left center}
.marquee{overflow:hidden;position:relative;padding:clamp(20px,3.5vw,48px) 0;margin:0}
.mq-scroll{transform:translateX(calc(var(--mq,0)*1px)) skewY(calc(var(--sk,0)*.6deg));will-change:transform}
.mq-track{display:flex;align-items:center;gap:clamp(22px,3vw,44px);width:max-content;animation:mq 70s linear infinite;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,7rem);line-height:1.1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(235,231,217,.55);padding:.1em 0}
.mq-rev .mq-track{animation-direction:reverse}
.mq-track i{display:inline-block;width:.3em;height:.3em;background:var(--accent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.85;flex:0 0 auto;box-shadow:0 0 14px 2px rgba(216,207,178,.45)}
@keyframes mq{to{transform:translateX(-25%)}}
.wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .05em .16em;margin:-.06em -.05em -.16em}
.wi{display:inline-block;transform:translateY(112%);transition:transform .95s var(--ease-out);transition-delay:calc(var(--i,0)*55ms + .12s)}
[data-in].in .wi{transform:none}
[data-in].in.done .wi{transition-delay:0s}
.h2.part{position:relative}
.h2.part::after{content:"";position:absolute;inset:-.1em -.2em;pointer-events:none;background:linear-gradient(100deg,transparent 36%,rgba(235,231,217,.28) 50%,transparent 64%);transform:translateX(-130%);mix-blend-mode:screen;opacity:0}
[data-in].in .h2.part::after{animation:sweep 1.5s var(--ease) .45s 1 forwards}
.band.settle .hl{position:relative}
.band.settle.lit .hl::after{content:"";position:absolute;inset:-.1em -.2em;pointer-events:none;background:linear-gradient(100deg,transparent 36%,rgba(235,231,217,.4) 50%,transparent 64%);transform:translateX(-130%);opacity:0;animation:sweep 1.4s var(--ease) .15s 1 forwards;mix-blend-mode:screen}
@keyframes sweep{0%{transform:translateX(-130%);opacity:1}80%{opacity:1}100%{transform:translateX(130%);opacity:0}}
.nav-links>a:not(.btn){font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  .grain{display:none}
  .wi{transform:none}
  .mq-track{animation:none}
  .band.settle.lit .hl::after,.h2.part::after{display:none}
  .env-room{transform:none;opacity:.06}
  .reasons,.cards,.lot-wrap,.steps,.about-grid,.qa-list,.kontakt-grid,.bands,.mq-scroll{transform:none}
}

/* ---------- service pages ---------- */
.subpage main{position:relative;z-index:2}
.subpage .sec{padding:clamp(64px,9vw,120px) 0}
.page-hero{padding-top:clamp(120px,14vw,180px)!important}
.page-hero-grid{align-items:center;grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.06;letter-spacing:-.01em;margin:0;max-width:16ch}
.h1+.lede{margin-top:1.2em}
.page-hero .cta-row{opacity:1;transform:none;--kb:1}
.page-hero-fig{margin:0}
.page-hero-fig img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(5,5,10,.45)}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 1.6em}
.crumbs a{color:var(--accent);text-decoration:none}
.card.feat{transform:none}
.card.feat .label .mono{color:var(--accent)}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.4vw,32px)}
.price{padding:26px 24px 28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(20,43,56,.78),rgba(20,43,56,.42))}
.price-num{font-family:var(--display);font-variant-numeric:lining-nums;font-feature-settings:"lnum";font-weight:600;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1;margin:0 0 .5em;color:var(--text-primary)}
.price .p{margin:0}
.price-note{margin:1.6em 0 0;font-size:.84rem;color:var(--text-secondary);max-width:70ch}
.page-cta .grid-2{align-items:end}
.page-cta .btn{margin-top:1.6em}
.rel-list{display:grid;border-top:1px solid var(--line)}
.rel{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--text-primary);text-decoration:none;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.5vw,1.3rem);transition:padding .4s var(--ease-out)}
.rel:hover{padding-left:8px}
.rel-arrow{color:var(--accent);font-family:var(--body)}
.foot-services{display:grid;gap:.45em;font-size:.84rem;align-content:start}
.foot-services .mono{margin:0 0 .3em;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.foot-services a{color:var(--text-primary);text-decoration:none}
.foot-services a:hover{text-decoration:underline}
.card .tlinks{display:flex;flex-wrap:wrap;gap:0 18px;margin:0}
@media (max-width:980px){.page-hero-grid{grid-template-columns:minmax(0,1fr)}.page-hero-fig{max-width:620px}}
@media (prefers-reduced-motion: reduce){.rel{transition:none}}
.demo-video{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(5,5,10,.45);background:var(--canvas-deep);aspect-ratio:16/9}
.demo-video video{display:block;width:100%;height:100%;object-fit:cover}
.demo-badge{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(11,26,35,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line)}
.demo-cap{margin:.9em 0 0;font-size:.78rem;line-height:1.55;color:var(--text-secondary);max-width:60ch}