/* ============================================================
   Schriftarten, lokal abgelegt.
   Bricolage Grotesque, Instrument Sans und JetBrains Mono stehen
   unter der SIL Open Font License, Eigenhosting ist ausdruecklich erlaubt.
   Dadurch baut die Website keine Verbindung zu Google auf.
   Nur die Subsets latin und latin-ext, der Rest wird nicht gebraucht.
   Alle drei sind Variable Fonts, eine Datei deckt die Gewichte ab.
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:600 700;
  font-stretch:100%;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:600 700;
  font-stretch:100%;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 500;
  font-stretch:100%;
  font-display:swap;
  src:url('fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 500;
  font-stretch:100%;
  font-display:swap;
  src:url('fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --canvas:#12151b;
  --canvas-2:#171b23;
  --panel:#1d222b;
  --panel-2:#232935;
  --line:#2c333f;
  --line-strong:#414b5c;
  --accent:#c77e6a;
  --accent-hover:#d99483;
  --accent-muted:#6a4a45;
  --glow:#e9a24c;
  --text-primary:#f2ece6;
  --text-secondary:#a8acb6;
  --text-quiet:#7d828d;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,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);
  --maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
figure,figcaption{margin:0}
ul{margin:0;padding:0}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.022em;margin:0}
p{margin:0}
button{font:inherit;color:inherit}

/* ---------- the fixed environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(ellipse 60% 45% at 18% 12%,rgba(199,126,106,.10),transparent 62%),
    radial-gradient(ellipse 52% 40% at 84% 78%,rgba(233,162,76,.075),transparent 65%);
  animation:envDrift 96s var(--ease-soft) infinite alternate;animation-delay:-31s;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
@keyframes envDrift{from{transform:translate3d(-1.4%,-1%,0) scale(1.03)}to{transform:translate3d(1.8%,1.6%,0) scale(1.09)}}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:#14100f;padding:12px 20px;border-radius:0 0 10px 0;font-weight:500}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:28px;
  padding:16px clamp(18px,4vw,44px);
  background:linear-gradient(to bottom,rgba(12,14,19,.82),rgba(12,14,19,0));
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(14,17,23,.88);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand .mark{width:22px;height:22px;flex:0 0 auto}
.brand .mark rect{fill:var(--accent)}
.brand .mark rect.lit{fill:var(--glow)}
.brand .name{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em}
.navlinks{display:flex;gap:26px;margin-left:auto;align-items:baseline}
.navlinks a{
  text-decoration:none;color:var(--text-secondary);font-size:14.5px;
  transition:color .35s var(--ease);position:relative;padding-bottom:2px;
}
.navlinks a::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);
}
.navlinks a:hover{color:var(--text-primary)}
.navlinks a:hover::after{transform:scaleX(1)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  background:var(--accent);color:#1a0f0c;font-weight:500;font-size:15px;
  text-decoration:none;cursor:pointer;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 34px rgba(199,126,106,.28)}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--text-primary)}
.btn.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--accent);box-shadow:none}
.nav .btn{flex:0 0 auto;padding:10px 18px;font-size:14.5px}
@media (max-width:860px){.navlinks{display:none}}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- hero ---------- */
.hero{position:relative;height:760vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--canvas);
}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:50% 46%;
  transition:opacity .9s var(--ease);
}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  opacity:0;transition:opacity .8s var(--ease);will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 124% 96% at 62% 40%,rgba(10,11,17,0) 40%,rgba(10,11,17,.46) 100%),
    linear-gradient(to bottom,rgba(10,11,17,.52) 0%,rgba(10,11,17,0) 24%);
}

/* loading ring */
.ringwrap{
  position:absolute;left:50%;bottom:46px;transform:translateX(-50%);
  z-index:6;color:var(--accent);opacity:.9;transition:opacity .6s var(--ease);
}
.stage.video-ready .ringwrap{opacity:0;pointer-events:none}
.ring{width:34px;height:34px;transform:rotate(-90deg)}
.chev{width:22px;height:34px;color:var(--text-secondary);animation:chevBob 2.6s var(--ease-soft) infinite;animation-delay:-.8s}
@keyframes chevBob{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(4px);opacity:1}}

/* caption bands */
.bands{position:absolute;inset:0;z-index:5;pointer-events:none}
.band{position:absolute;inset:0;opacity:0;pointer-events:none}
/* The lower-third scrim. The text lives on the wet road, which the footage already
   keeps dark, so the building's face stays fully lit: the rendering is the product. */
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:
    linear-gradient(to right,rgba(5,6,11,.46) 0%,rgba(5,6,11,.18) 26%,rgba(5,6,11,0) 44%),
    linear-gradient(to top,
      rgba(5,6,11,.95) 0%,
      rgba(5,6,11,.90) 25%,
      rgba(5,6,11,.72) 40%,
      rgba(5,6,11,.34) 52%,
      rgba(5,6,11,0) 68%);
}
/* the settle block is the tallest, so its scrim reaches higher */
#b4::before{
  background:
    linear-gradient(to right,rgba(5,6,11,.50) 0%,rgba(5,6,11,.20) 28%,rgba(5,6,11,0) 46%),
    linear-gradient(to top,
      rgba(5,6,11,.95) 0%,
      rgba(5,6,11,.91) 30%,
      rgba(5,6,11,.78) 48%,
      rgba(5,6,11,.38) 60%,
      rgba(5,6,11,0) 74%);
}
.bt{position:absolute;padding:0 clamp(18px,5vw,72px);text-shadow:var(--tshadow)}
.band .line{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.15rem,4.6vw,3.9rem);line-height:1.03;letter-spacing:-.03em;
  max-width:14ch;
}
.band .kick{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;display:block;
}
#b1 .bt{left:0;bottom:13vh;width:min(600px,48vw)}
#b2 .bt{left:0;bottom:13vh;width:min(600px,48vw)}
#b3 .bt{left:0;bottom:13vh;width:min(580px,46vw)}
#b4 .bt{left:0;bottom:10vh;width:min(660px,50vw)}
#b4 h1{font-size:clamp(2.2rem,4.5vw,3.75rem);letter-spacing:-.032em;max-width:13ch}
#b4 .sub{
  margin-top:20px;font-size:clamp(1rem,1.25vw,1.1rem);color:#ded7d0;max-width:34ch;line-height:1.6;
}
#b4 .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;pointer-events:auto}
#b4 .btn{text-shadow:none}

/* split text mechanics */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vis{display:block}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* entrance (a) drift-down: band 1 */
#b1 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* entrance (b) blur-to-sharp: band 2 */
#b2 .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));pointer-events:none}
#b2 .sharp{opacity:var(--k,0)}
#b2 .stack{position:relative}
/* entrance (c) approach-from-depth: band 3 */
#b3 .vis{transform:scale(calc(.84 + .16*var(--k,0)));transform-origin:0 50%;opacity:var(--k,0)}
/* entrance (e) word rise into staged settle: band 4 */
#b4 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px))}
#b4 .sub{--ks:clamp(0,(var(--k,0) - .58)*3.4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*16px))}
#b4 .row{--kb:clamp(0,(var(--k,0) - .74)*4.2,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*16px))}

/* ---------- static hero (phones / reduced motion) ---------- */
.static-hero{display:none;position:relative;min-height:100svh;align-items:flex-end;overflow:hidden}
.static-hero .bgimg{
  position:absolute;inset:0;background-image:url("hero-ending.jpg");
  background-size:cover;background-position:58% 44%;
}
.static-hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,11,17,.95) 0%,rgba(10,11,17,.88) 30%,rgba(10,11,17,.72) 46%,rgba(10,11,17,.3) 68%,rgba(10,11,17,.5) 100%);
}
.static-hero .inner{position:relative;padding:0 clamp(18px,6vw,48px) clamp(52px,10vh,88px);width:100%}
.static-hero h1{font-size:clamp(2.1rem,8.4vw,3.2rem);letter-spacing:-.03em;max-width:14ch}
.static-hero .kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
.static-hero p{margin-top:18px;color:#ddd6cf;max-width:38ch;font-size:1.02rem}
.static-hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- shared section furniture ---------- */
main{position:relative;z-index:2}
.sec{position:relative;padding:clamp(62px,8.5vh,104px) clamp(18px,5vw,44px);background:var(--canvas)}
.sec.alt{background:var(--canvas-2)}
.wrap{max-width:var(--maxw);margin:0 auto}
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:22px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.65}
h2{font-size:clamp(1.95rem,4.1vw,3.05rem)}
.lede{margin-top:20px;color:var(--text-secondary);font-size:clamp(1.02rem,1.35vw,1.16rem);max-width:56ch}

/* the signature: light-window grid divider */
.wingrid{display:block;width:100%;height:auto;margin:0;opacity:.9}
.wingrid rect{fill:var(--line);transition:fill .6s var(--ease)}
.wingrid rect.lit{fill:var(--accent-muted)}
.divider{padding:0 clamp(18px,5vw,44px);background:var(--canvas);position:relative;z-index:2}
.divider .wrap{border-top:1px solid var(--line);padding-top:26px}
.sec.alt + .divider,.divider.on-alt{background:var(--canvas-2)}

/* entrance choreography */
.rise{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.stg > *{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stg.in > *{opacity:1;transform:none}
.stg.in > *:nth-child(1){transition-delay:0ms}
.stg.in > *:nth-child(2){transition-delay:90ms}
.stg.in > *:nth-child(3){transition-delay:180ms}
.stg.in > *:nth-child(4){transition-delay:270ms}
.stg.in > *:nth-child(5){transition-delay:360ms}
.stg.done > *:nth-child(1),.stg.done > *:nth-child(2),.stg.done > *:nth-child(3),
.stg.done > *:nth-child(4),.stg.done > *:nth-child(5){transition-delay:0s !important}

/* ---------- leistungen: alternating feature rows ---------- */
.svc{display:grid;gap:clamp(28px,5vw,64px);margin-top:clamp(48px,7vh,84px)}
.svc-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;
}
.svc-row:nth-child(even) .svc-media{order:2}
.svc-media{position:relative;overflow:hidden;border-radius:3px;background:var(--panel)}
.svc-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform 1.1s var(--ease),filter 1.1s var(--ease);filter:saturate(.94)}
.svc-row:hover .svc-media img{transform:scale(1.035);filter:saturate(1.04)}
.svc-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,11,17,.4),transparent 46%);
}
.svc-num{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.16em}
.svc-body h2,.svc-body h3{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-top:14px;letter-spacing:-.02em}
.svc-body p{margin-top:14px;color:var(--text-secondary);max-width:44ch}
.svc-body .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-quiet);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}
@media (max-width:820px){
  .svc-row{grid-template-columns:1fr}
  .svc-row:nth-child(even) .svc-media{order:0}
}

/* ---------- projekte: gallery ---------- */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap}
.gal-head .count{font-family:var(--mono);font-size:12.5px;color:var(--text-quiet);letter-spacing:.1em}
.gal{
  display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:118px;gap:14px;
  margin-top:clamp(40px,6vh,64px);
}
.shot{position:relative;overflow:hidden;background:var(--panel);border-radius:3px;
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.gal.in .shot{opacity:1;transform:none}
.gal.in .shot:nth-child(1){transition-delay:0ms}
.gal.in .shot:nth-child(2){transition-delay:70ms}
.gal.in .shot:nth-child(3){transition-delay:140ms}
.gal.in .shot:nth-child(4){transition-delay:210ms}
.gal.in .shot:nth-child(5){transition-delay:280ms}
.gal.in .shot:nth-child(6){transition-delay:350ms}
.gal.in .shot:nth-child(7){transition-delay:420ms}
.gal.in .shot:nth-child(8){transition-delay:490ms}
.gal.done .shot:nth-child(1),.gal.done .shot:nth-child(2),.gal.done .shot:nth-child(3),
.gal.done .shot:nth-child(4),.gal.done .shot:nth-child(5),.gal.done .shot:nth-child(6),
.gal.done .shot:nth-child(7),.gal.done .shot:nth-child(8){transition-delay:0s !important}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1s var(--ease);filter:saturate(.95)}
.shot.low img{object-position:50% 70%}   /* wide crops that would otherwise be mostly sky */
.shot:hover img{transform:scale(1.045);filter:saturate(1.05)}
.shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;
  background:linear-gradient(to top,rgba(9,10,15,.9),transparent);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.shot:hover figcaption,.shot:focus-within figcaption{opacity:1;transform:none}
.shot figcaption b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em}
.shot figcaption span{font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
/* the editorial grid: cells set the shape, images cover them */
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.r3{grid-row:span 3}.r4{grid-row:span 4}
@media (max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .c2,.c3,.c4{grid-column:span 2}
  .r3,.r4{grid-row:auto}
  .shot{aspect-ratio:16/10}
  .shot figcaption{opacity:1;transform:none}
}
@media (max-width:560px){.gal{grid-template-columns:1fr}.c2,.c3,.c4{grid-column:span 1}}

/* ---------- ablauf: the rail ---------- */
.ablauf{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(32px,6vw,84px);align-items:start}
.rail{position:relative;padding-left:34px;margin-top:clamp(34px,5vh,56px)}
.railline{position:absolute;left:0;top:6px;bottom:6px;width:1px;overflow:visible}
.railline svg{position:absolute;inset:0;width:1px;height:100%;overflow:visible}
.railline path{stroke:var(--glow);stroke-width:1.6;fill:none;
  stroke-dasharray:var(--len,1000);stroke-dashoffset:calc(var(--len,1000) * (1 - var(--draw,0)))}
.railline .bg{stroke:var(--line);stroke-dasharray:none;stroke-dashoffset:0;stroke-width:1}
.step{position:relative;padding:0 0 clamp(34px,5vh,52px)}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:-38px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--canvas);border:1.5px solid var(--line-strong);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.step.lit::before{background:var(--glow);border-color:var(--glow);box-shadow:0 0 0 5px rgba(233,162,76,.14)}
.step .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--text-quiet)}
.step h3{font-size:clamp(1.2rem,2vw,1.5rem);margin-top:9px;letter-spacing:-.02em}
.step p{margin-top:11px;color:var(--text-secondary);max-width:48ch;font-size:.99rem}
.step .rounds{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);
  border:1px solid var(--accent-muted);border-radius:999px;padding:5px 12px;
}
.ablauf-side{position:sticky;top:104px}
.ablauf-side .card{
  border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:26px;margin-top:26px;
}
.ablauf-side .card h3{font-size:1.06rem;letter-spacing:-.015em}
.ablauf-side .card p{margin-top:11px;color:var(--text-secondary);font-size:.95rem}
@media (max-width:900px){.ablauf{grid-template-columns:1fr}.ablauf-side{position:static}}

/* ---------- freigabe: the interactive moment ---------- */
.freigabe{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,44px);margin-top:clamp(40px,6vh,64px)}
.fg-stage{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
.fg-imgs{position:relative;aspect-ratio:16/9}
.fg-imgs img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease),filter .9s var(--ease);
  filter:saturate(calc(.58 + .42*var(--appr,0))) brightness(calc(.82 + .18*var(--appr,0)));
}
.fg-imgs img.on{opacity:1}
.fg-stamp{
  position:absolute;right:18px;top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--glow);color:var(--glow);border-radius:999px;padding:7px 14px;
  background:rgba(8,8,15,.55);backdrop-filter:blur(10px);
  opacity:0;transform:scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.freigabe.approved .fg-stamp{opacity:1;transform:none}
.fg-ctrl{display:flex;gap:clamp(16px,3vw,34px);align-items:center;flex-wrap:wrap}
.fg-thumbs{display:flex;gap:10px}
.fg-thumbs button{
  width:88px;padding:0;border:1px solid var(--line);background:none;border-radius:3px;
  overflow:hidden;cursor:pointer;position:relative;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.fg-thumbs button img{aspect-ratio:16/10;object-fit:cover;filter:saturate(.6) brightness(.72);transition:filter .5s var(--ease)}
.fg-thumbs button:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.fg-thumbs button[aria-pressed="true"]{border-color:var(--accent)}
.fg-thumbs button[aria-pressed="true"] img{filter:saturate(1) brightness(1)}
.fg-thumbs .lbl{
  position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-size:10px;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);letter-spacing:.1em;
}
.hold{
  position:relative;display:inline-flex;align-items:center;gap:13px;
  padding:13px 24px;border-radius:999px;border:1px solid var(--line-strong);
  background:transparent;cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;font-size:15px;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.hold:hover{border-color:var(--accent)}
.freigabe.approved .hold{border-color:var(--glow);color:var(--glow)}
.hold .track{
  position:absolute;left:0;top:0;bottom:0;border-radius:999px;pointer-events:none;
  width:calc(100% * var(--appr,0));background:rgba(233,162,76,.16);
  transition:background .4s var(--ease);
}
.hold .txt{position:relative}
.hold svg{position:relative;width:17px;height:17px;flex:0 0 auto}
.fg-note{
  margin-top:22px;color:var(--text-secondary);max-width:52ch;font-size:.99rem;
  opacity:var(--appr,0);transform:translateY(calc((1 - var(--appr,0))*10px));
}
@media (min-width:940px){.freigabe{grid-template-columns:1.5fr .95fr;align-items:center}}

/* ---------- warum: cards + stats ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,26px);margin-top:clamp(40px,6vh,64px)}
.why .card{
  border:1px solid var(--line);border-radius:4px;padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(160deg,var(--panel),var(--canvas-2));position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.why .card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.why .card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,162,76,.13),transparent 66%);
  opacity:0;transition:opacity .6s var(--ease);
}
.why .card:hover::after{opacity:1}
.why .card h3{font-size:1.14rem;letter-spacing:-.018em}
.why .card p{margin-top:12px;color:var(--text-secondary);font-size:.97rem}
.why .card .ico{width:26px;height:26px;color:var(--accent);margin-bottom:16px}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(16px,2.4vw,26px);border-top:1px solid var(--line);padding-top:clamp(30px,4vh,42px);
}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(2.3rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1;color:var(--accent)}
.stat .l{margin-top:10px;color:var(--text-secondary);font-size:.95rem;max-width:24ch}
@media (max-width:760px){.why{grid-template-columns:1fr}.stats{grid-template-columns:1fr;gap:26px}}

/* ---------- brauchen: checklist ---------- */
.need{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,64px);margin-top:clamp(40px,6vh,60px)}
.need li{
  list-style:none;display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.need ul{margin:0;padding:0}
.need .tick{
  width:19px;height:19px;border:1px solid var(--accent-muted);border-radius:3px;
  display:grid;place-items:center;flex:0 0 auto;position:relative;top:3px;
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.need li:hover .tick{border-color:var(--accent);background:rgba(199,126,106,.12)}
.need .tick svg{width:11px;height:11px;color:var(--accent);
  stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .6s var(--ease)}
.need.in .tick svg{stroke-dashoffset:0}
.need.in li:nth-child(1) .tick svg{transition-delay:60ms}
.need.in li:nth-child(2) .tick svg{transition-delay:150ms}
.need.in li:nth-child(3) .tick svg{transition-delay:240ms}
.need b{font-family:var(--display);font-weight:600;font-size:1.04rem;display:block;letter-spacing:-.015em}
.need p{margin-top:6px;color:var(--text-secondary);font-size:.95rem}
@media (max-width:760px){.need{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{margin-top:clamp(40px,6vh,60px);border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:26px 44px 26px 0;position:relative;font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,1.7vw,1.2rem);letter-spacing:-.015em;color:var(--text-primary);
  transition:color .4s var(--ease);
}
.q button:hover{color:var(--accent)}
.q button::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .45s var(--ease);
}
.q.open button::after{transform:translateY(-30%) rotate(-135deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.q .a p{padding:0 0 28px;color:var(--text-secondary);max-width:62ch}

/* ---------- anfrage ---------- */
.cta{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(32px,5vw,72px);
  margin-top:clamp(40px,6vh,60px);align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-quiet);margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%;background:var(--canvas-2);border:1px solid var(--line);border-radius:3px;
  padding:13px 15px;color:var(--text-primary);font:inherit;font-size:16px;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:none;background:var(--panel)}
.field textarea{min-height:128px;resize:vertical}
.formnote{margin-top:6px;color:var(--text-quiet);font-size:.88rem}
.sent{
  display:none;border:1px solid var(--accent-muted);background:rgba(199,126,106,.08);
  border-radius:4px;padding:22px;margin-top:18px;
}
.sent.show{display:block}
.sent b{font-family:var(--display);font-weight:600;display:block;margin-bottom:7px}
.sent p{color:var(--text-secondary);font-size:.95rem}
.contact .row{padding:20px 0;border-bottom:1px solid var(--line)}
.contact .row:first-child{padding-top:0}
.contact .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-quiet)}
.contact .v{margin-top:8px;font-size:1.06rem}
.contact a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .35s var(--ease)}
.contact a:hover{border-bottom-color:var(--accent)}
.contact .portrait{margin-top:26px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.contact .portrait img{width:100%;height:270px;object-fit:cover;object-position:50% 62%;filter:saturate(.95)}
@media (max-width:860px){.cta{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:2;background:var(--canvas-2);border-top:1px solid var(--line);
  padding:clamp(48px,7vh,72px) clamp(18px,5vw,44px) 34px;
}
.fgrid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.fnav{display:flex;gap:24px;flex-wrap:wrap}
.fnav a{color:var(--text-secondary);text-decoration:none;font-size:14.5px;transition:color .35s var(--ease)}
.fnav a:hover{color:var(--text-primary)}
.fbot{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:var(--text-quiet);font-size:13px;
}

/* ---------- short screens ---------- */
@media (max-height:560px){.ringwrap{display:none}}

/* ---------- the five static-hero gates (must match the JS list exactly) ---------- */
@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{display:none}
  .static-hero{display:flex}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .rise,.stg > *,.shot{opacity:1 !important;transform:none !important}
  .need .tick svg{stroke-dashoffset:0 !important}
  .railline path{stroke-dashoffset:0 !important}
  .fg-note{opacity:1 !important;transform:none !important}
  .fg-imgs img{filter:none !important}
  .env::before{animation:none !important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* =========================================================
   Multi-page additions
   ========================================================= */

/* ---------- compact page header for sub pages ---------- */
.pagehead{
  position:relative;min-height:clamp(340px,52vh,520px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--canvas);
}
.pagehead .ph-img{
  position:absolute;inset:0;background-size:cover;background-position:50% 55%;
  transform:scale(1.04);filter:saturate(.92);
}
.pagehead .ph-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(8,9,14,.86) 0%,rgba(8,9,14,.5) 42%,rgba(8,9,14,.18) 72%),
    linear-gradient(to top,rgba(8,9,14,.92) 0%,rgba(8,9,14,.42) 38%,rgba(8,9,14,.55) 100%);
}
.pagehead .ph-in{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(18px,5vw,44px) clamp(40px,7vh,64px);
}
.pagehead h1{
  font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.032em;max-width:16ch;
  text-shadow:var(--tshadow);
}
.pagehead .lede{margin-top:16px;color:#ded7d0;max-width:52ch;text-shadow:0 1px 10px rgba(5,5,10,.8)}
.pagehead .kicker{margin-bottom:18px}

/* breadcrumb-ish back link */
.backlink{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease)
}
.backlink:hover{color:var(--accent)}
.backlink svg{width:13px;height:13px}

/* ---------- nav current page ---------- */
.navlinks a[aria-current="page"]{color:var(--text-primary)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- home teasers ---------- */
.teasers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);margin-top:clamp(44px,6vh,68px)}
.teaser{
  position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:4px;
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.teaser:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.teaser .t-img{position:relative;overflow:hidden;aspect-ratio:4/3}
.teaser .t-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);
  transition:transform 1.1s var(--ease),filter 1s var(--ease)}
.teaser:hover .t-img img{transform:scale(1.05);filter:saturate(1.03)}
.teaser .t-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,10,15,.72),transparent 52%)}
.teaser .t-body{padding:20px 22px 24px}
.teaser h3{font-size:1.22rem;letter-spacing:-.02em}
.teaser p{margin-top:10px;color:var(--text-secondary);font-size:.95rem}
.teaser .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.teaser .more svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.teaser:hover .more svg{transform:translateX(4px)}
@media (max-width:860px){.teasers{grid-template-columns:1fr}}

/* ---------- home project strip ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:14px;margin-top:clamp(40px,6vh,60px)}
.strip .shot{aspect-ratio:4/3;grid-column:auto;grid-row:auto}
@media (max-width:760px){.strip{grid-template-columns:1fr}}

/* ---------- the coming Entstehung sequence (appears once the file exists) ---------- */
.entstehung{display:none;margin-top:clamp(44px,6vh,68px)}
.entstehung.ready{display:block}
.ent-stage{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel)}
.ent-stage video{width:100%;height:auto;display:block;will-change:transform;transform:translateZ(0)}
.ent-steps{display:flex;gap:0;margin-top:18px;border-top:1px solid var(--line)}
.ent-steps div{
  flex:1;padding:14px 4px 0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-quiet);border-top:1px solid transparent;margin-top:-1px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.ent-steps div.on{color:var(--accent);border-top-color:var(--accent)}

/* ---------- legal pages ---------- */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:clamp(38px,5vh,54px)}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.06rem;margin-top:28px;letter-spacing:-.015em}
.legal p{margin-top:14px;color:var(--text-secondary)}
.legal ul.plain{margin-top:14px}
.legal ul.plain li{
  list-style:none;padding:9px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:16px;color:var(--text-secondary);
}
.legal ul.plain li b{color:var(--text-primary);font-family:var(--body);font-weight:500}
.legal a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .35s var(--ease)}
.legal a:hover{border-bottom-color:var(--accent)}
@media (max-width:640px){.legal ul.plain li{grid-template-columns:1fr;gap:4px}}

/* placeholder marker for data the client still has to supply */
.todo{
  display:inline-block;background:rgba(233,162,76,.14);border:1px dashed var(--accent-muted);
  border-radius:3px;padding:1px 8px;color:var(--glow);font-family:var(--mono);font-size:.88em;
}
.legalnote{
  border:1px solid var(--accent-muted);background:rgba(199,126,106,.07);border-radius:4px;
  padding:20px 22px;margin-bottom:clamp(32px,4vh,44px);
}
.legalnote b{font-family:var(--display);font-weight:600;display:block;margin-bottom:7px}
.legalnote p{margin-top:0;color:var(--text-secondary);font-size:.95rem}

/* ---------- closing CTA band, reused on every page ---------- */
.endcta{
  position:relative;overflow:hidden;background:var(--canvas-2);
  border-top:1px solid var(--line);padding:clamp(64px,10vh,110px) clamp(18px,5vw,44px);
}
.endcta .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}
.endcta h2{max-width:18ch}
.endcta p{margin-top:16px;color:var(--text-secondary);max-width:46ch}
.endcta .row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- touch targets on coarse pointers ---------- */
@media (pointer:coarse){
  .fnav a,.navlinks a,.backlink,.contact .v a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .fnav{gap:6px 22px}
  .q button{min-height:44px}
}

/* =========================================================
   Parallax hero (replaces the scrubbed video hero)
   Layers move at different rates, driven by one --py variable.
   ========================================================= */
.phero{position:relative;height:118svh;min-height:600px;overflow:hidden;background:var(--canvas);z-index:1}
.phero .layer{position:absolute;inset:-9% 0 -9% 0;will-change:transform}
.phero .l-back{
  background-size:cover;background-position:50% 50%;
  transform:translate3d(0,calc(var(--py,0) * 14vh),0) scale(1.045);
}
.phero .l-mid{
  background-size:cover;background-position:50% 50%;
  opacity:.0;transform:translate3d(0,calc(var(--py,0) * 13vh),0) scale(1.1);
}
.phero .l-glow{
  inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 62% 46%,rgba(233,162,76,.16),transparent 62%);
  transform:translate3d(0,calc(var(--py,0) * 8vh),0);
}
.phero .l-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(18,21,27,1) 0%,
      rgba(18,21,27,.9) 8%,
      rgba(18,21,27,.5) 18%,
      rgba(18,21,27,.16) 30%,
      rgba(18,21,27,0) 44%),
    linear-gradient(to bottom,rgba(18,21,27,.34) 0%,rgba(18,21,27,0) 11%);
}
/* the phone crop puts the lit facade right behind the words, so it needs more */
@media (max-width:720px){
  .phero .l-veil{
    background:
      linear-gradient(to top,
        rgba(6,7,12,.97) 0%,
        rgba(6,7,12,.95) 34%,
        rgba(6,7,12,.90) 56%,
        rgba(6,7,12,.62) 72%,
        rgba(6,7,12,.18) 86%,
        rgba(6,7,12,0) 96%),
      linear-gradient(to bottom,rgba(6,7,12,.6) 0%,rgba(6,7,12,0) 18%);
  }
}
.phero .p-in{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 clamp(18px,5vw,44px) clamp(72px,13vh,130px);
  transform:translate3d(0,calc(var(--py,0) * -5vh),0);
  /* eigener Stapelkontext, sonst rutscht die Unterlage hinter das Video */
  isolation:isolate;
}
/* weiche Unterlage nur hinter den Worten, damit das Bild ringsum hell bleibt */
.phero .p-in::before{
  /* Der Kasten ist bewusst viel groesser als der Verlauf, damit dieser
     vollstaendig auf null ausklingt und keine Kante im Bild entsteht. */
  content:"";position:absolute;left:-40%;right:-40%;top:-150%;bottom:-60%;
  pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 46% 50% at 31% 70%,
    rgba(14,16,21,.95) 0%,
    rgba(14,16,21,.92) 34%,
    rgba(14,16,21,.82) 54%,
    rgba(14,16,21,.5) 74%,
    rgba(14,16,21,.14) 90%,
    rgba(14,16,21,0) 100%);
}
@media (max-width:720px){
  .phero .p-in::before{
    left:-50%;right:-50%;top:-120%;bottom:-60%;
    background:radial-gradient(ellipse 46% 32% at 50% 78%,
      rgba(14,16,21,.86) 0%,
      rgba(14,16,21,.74) 34%,
      rgba(14,16,21,.42) 60%,
      rgba(14,16,21,.12) 82%,
      rgba(14,16,21,0) 100%);
  }
}
.phero .p-wrap{max-width:var(--maxw);margin:0 auto}
.phero .kick{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  /* light text over footage: the accent tone is too dark for small type on an image,
     so the accent stays as the border and the brand cue, the words go light */
  color:#f4e7e0;display:inline-block;margin-bottom:18px;
  background:rgba(10,12,17,.94);border:1px solid rgba(199,126,106,.38);border-radius:999px;
  padding:6px 14px;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.9);
}
.phero h1{
  font-size:clamp(1.85rem,4.2vw,3.4rem);letter-spacing:-.033em;line-height:1.02;
  max-width:15ch;text-shadow:var(--tshadow);
}
.phero .sub{
  margin-top:22px;font-size:clamp(1rem,1.3vw,1.15rem);color:#ded7d0;max-width:44ch;
  line-height:1.6;text-shadow:0 1px 12px rgba(5,5,10,.85);
}
.phero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.phero .row .btn{text-shadow:none}
.phero .cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:20px;height:32px;color:var(--text-secondary);opacity:.7;
  animation:chevBob 2.6s var(--ease-soft) infinite;animation-delay:-.8s;
}
@media (max-width:720px){
  .phero{height:100svh}
  .phero .p-in{padding-bottom:clamp(56px,9vh,90px)}
  .phero h1{max-width:13ch}
}
@media (max-height:560px) and (orientation:landscape){.phero .cue{display:none}}

/* word entrance on the hero headline, one time on load */
.phero h1 .w{
  --kc:clamp(0,(var(--hk,0) - var(--th,0))*3,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*28px));
}
.phero .sub{--ks:clamp(0,(var(--hk,0) - .5)*3,1);opacity:var(--ks)}
.phero .row{--kb:clamp(0,(var(--hk,0) - .68)*3.4,1);opacity:var(--kb);
  transform:translate3d(0,calc((1 - var(--kb))*14px),0)}

@media (prefers-reduced-motion: reduce){
  .phero .layer,.phero .p-in{transform:none !important}
  .phero h1 .w,.phero .sub,.phero .row{opacity:1 !important;transform:none !important}
  .phero .cue{animation:none !important}
}

/* ---------- cases ---------- */
.cases{display:grid;gap:clamp(48px,7vh,88px);margin-top:clamp(40px,6vh,60px)}
.case{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
.case-media{overflow:hidden;border-radius:4px;background:var(--panel);align-self:start}
.case-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:saturate(.95);
  transition:transform 1.1s var(--ease)}
.case:hover .case-media img{transform:scale(1.03)}
.case-body h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:12px;letter-spacing:-.025em}
.case-body h3{font-size:1.02rem;margin-top:26px;letter-spacing:-.01em;color:var(--text-primary)}
.case-body p{margin-top:10px;color:var(--text-secondary);max-width:62ch}
.case-meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px;
  margin-top:22px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.case-meta .k{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-quiet);margin-bottom:5px;
}
.case-meta .v{display:block;font-size:.95rem;color:var(--text-secondary)}
@media (min-width:940px){.case{grid-template-columns:.85fr 1.15fr;align-items:start}}
@media (max-width:520px){.case-meta{grid-template-columns:1fr}}
.legalnote code{font-family:var(--mono);font-size:.88em;color:var(--glow);
  background:rgba(233,162,76,.1);padding:1px 6px;border-radius:3px}

/* ---------- click to play video (Leistungen) ---------- */
.vidbox{position:relative}
.vidbox video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block;background:#000}
.playbtn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:13px 22px 13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:rgba(10,11,17,.6);backdrop-filter:blur(10px);color:var(--text-primary);
  font-size:14.5px;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.playbtn:hover{background:rgba(10,11,17,.78);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.03)}
.playbtn svg{width:17px;height:17px;color:var(--accent)}
.vidbox.playing .playbtn{display:none}
@media (pointer:coarse){.playbtn{min-height:44px}}

@media (max-width:720px){
  .phero .kick{background:rgba(6,6,12,.9)}
}

/* the dormant Entstehung section collapses entirely, padding included */
section.sec.entstehung{display:none;padding-top:0;padding-bottom:0}
section.sec.entstehung.ready{display:block;padding-top:clamp(84px,12vh,148px);padding-bottom:clamp(84px,12vh,148px)}

/* ---------- Hintergrundvideo im Hero, liegt ueber dem Posterbild ---------- */
.phero .l-video{
  position:absolute;inset:-9% 0 -9% 0;width:100%;height:118%;
  object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity 1.1s var(--ease);
  transform:translate3d(0,calc(var(--py,0) * 14vh),0) scale(1.045);
  will-change:transform;
}
.phero.video-ready .l-video{opacity:1}
@media (prefers-reduced-motion: reduce){
  .phero .l-video{display:none}
}

/* ---------- Projektuebersicht ---------- */
.projgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px);margin-top:clamp(44px,6vh,68px)}
.projcard{
  position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:4px;
  border:1px solid var(--line);background:var(--panel);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.projcard:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.projcard .pc-img{position:relative;overflow:hidden;aspect-ratio:16/10}
.projcard .pc-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.94);
  transition:transform 1.2s var(--ease),filter 1s var(--ease)}
.projcard:hover .pc-img img{transform:scale(1.05);filter:saturate(1.04)}
.projcard .pc-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,10,15,.8),transparent 56%)}
.projcard .pc-body{position:absolute;left:0;right:0;bottom:0;padding:24px clamp(18px,2.4vw,28px)}
.projcard h3{font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em}
.projcard .pc-meta{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
}
.projcard .pc-meta b{color:var(--accent);font-weight:400}
.projcard .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.projcard .more svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.projcard:hover .more svg{transform:translateX(4px)}
@media (max-width:760px){.projgrid{grid-template-columns:1fr}}

/* ---------- Projektdetail ---------- */
.proj-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px 26px;
  padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(30px,4vh,44px);
}
.proj-facts .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-quiet);margin-bottom:6px}
.proj-facts .v{display:block;font-size:.98rem;color:var(--text-secondary)}
@media (max-width:760px){.proj-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.proj-facts{grid-template-columns:1fr}}
.proj-text{max-width:70ch;margin-top:clamp(34px,5vh,50px)}
.proj-text h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-top:clamp(30px,4vh,42px)}
.proj-text h2:first-child{margin-top:0}
.proj-text p{margin-top:12px;color:var(--text-secondary)}

/* ---------- Workflow-Kette: eine Kamera durch vier Stufen ---------- */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(28px,4vh,40px)}
.chain figure{position:relative;overflow:hidden;border-radius:3px;background:var(--panel);margin:0}
.chain img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;
  transition:transform 1s var(--ease);filter:saturate(.96)}
.chain figure:hover img{transform:scale(1.04)}
.chain figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  background:linear-gradient(to top,rgba(9,10,15,.9),transparent);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
.chain figcaption b{display:block;color:var(--accent);font-weight:400;margin-bottom:3px}
.chain figcaption span{color:var(--text-secondary);font-size:10px;letter-spacing:.06em;text-transform:none}
@media (max-width:820px){.chain{grid-template-columns:repeat(2,1fr)}}

/* ---------- Raster kleiner Varianten (Perspektiven, Stimmungen) ---------- */
.variants{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:clamp(22px,3vh,32px)}
.variants figure{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--panel);
  border:1px solid transparent;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.variants figure:hover{border-color:var(--accent);transform:translateY(-3px)}
.variants img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.variants figure.picked{border-color:var(--accent)}
.variants figure.picked::after{
  content:"gewählt";position:absolute;left:6px;bottom:6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(6,6,12,.82);color:var(--accent);padding:3px 7px;border-radius:999px;
}
@media (max-width:900px){.variants{grid-template-columns:repeat(3,1fr)}}

/* =========================================================
   Übergang vom Hero zum ersten Abschnitt.
   Der Inhalt schiebt sich als Fläche über den Film, statt hart abzusetzen.
   ========================================================= */
.phero{z-index:1}
.after-hero{
  position:relative;z-index:3;
  margin-top:calc(-1 * clamp(38px,6vh,74px));
  border-radius:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 0 0;
  background:var(--canvas);
}
/* feiner Lichtsaum an der Oberkante, wie eine aufgesetzte Platte */
.after-hero::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(to right,transparent,rgba(199,126,106,.5) 22%,rgba(233,162,76,.45) 50%,rgba(199,126,106,.5) 78%,transparent);
}
/* kleiner Griff in der Mitte, greift das Fenstermotiv der Marke auf */
.after-hero::after{
  content:"";position:absolute;left:50%;top:-5px;width:52px;height:10px;
  transform:translateX(-50%);pointer-events:none;border-radius:99px;
  background:var(--canvas);
  box-shadow:0 0 0 1px rgba(199,126,106,.32);
}
/* der Film wird nach unten hin ruhiger, damit die Kante nicht schneidet */
.phero .l-fade{
  position:absolute;left:0;right:0;bottom:0;height:26vh;pointer-events:none;z-index:2;
  background:linear-gradient(to top,
    var(--canvas) 0%,
    rgba(18,21,27,.85) 26%,
    rgba(18,21,27,.4) 55%,
    rgba(18,21,27,0) 100%);
}
@media (prefers-reduced-motion: reduce){
  .after-hero{box-shadow:none}
}

/* ---------- Erste Stufe der Kette: viele kleine Weißrender statt einem ---------- */
.chain figure.many{background:var(--canvas-2)}
.chain .manygrid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;
}
.chain .manygrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;filter:saturate(.9)}
.chain .manygrid .more{
  display:grid;place-items:center;background:var(--panel);
  font-family:var(--mono);font-size:clamp(10px,1.1vw,13px);letter-spacing:.06em;color:var(--accent);
  text-align:center;line-height:1.3;padding:4px;
}
.chain figure.many figcaption{padding-top:30px}

/* ---------- Vorschauschleife bei den Leistungen ---------- */
.previewbox{position:relative;overflow:hidden;background:var(--panel)}
.previewbox video,.previewbox img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.previewbox video{opacity:0;transition:opacity .9s var(--ease);position:absolute;inset:0}
.previewbox.ready video{opacity:1}
.previewbox .tag-live{
  position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#f4e7e0;background:rgba(6,6,12,.7);border:1px solid rgba(199,126,106,.45);
  border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px);
}
.previewbox .tag-live i{
  width:6px;height:6px;border-radius:50%;background:var(--glow);display:inline-block;
  animation:livePulse 2.4s var(--ease-soft) infinite;animation-delay:-.6s;
}
@keyframes livePulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.previewbox .tag-live i{animation:none;opacity:1}}

/* ---------- gemischte Galerie unter den Projekten ---------- */
.mixgal{
  columns:3;column-gap:14px;margin-top:clamp(36px,5vh,56px);
}
.mixgal figure{
  break-inside:avoid;margin:0 0 14px;position:relative;overflow:hidden;border-radius:3px;
  background:var(--panel);opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.mixgal.in figure{opacity:1;transform:none}
.mixgal.in figure:nth-child(3n+2){transition-delay:80ms}
.mixgal.in figure:nth-child(3n+3){transition-delay:160ms}
.mixgal.done figure,.mixgal.done figure:nth-child(3n+2),.mixgal.done figure:nth-child(3n+3){transition-delay:0s !important}
.mixgal img{width:100%;height:auto;display:block;filter:saturate(.94);
  transition:transform 1.1s var(--ease),filter 1s var(--ease)}
.mixgal figure:hover img{transform:scale(1.035);filter:saturate(1.04)}
@media (max-width:900px){.mixgal{columns:2}}
@media (max-width:560px){.mixgal{columns:1}}

/* =========================================================
   Scroll-Hero: das Video folgt der Maus.
   Runterscrollen spielt vorwärts, hochscrollen rückwärts.
   Bewusst kurze Scrollstrecke, damit man schnell weiterkommt.
   ========================================================= */
.scrubhero{position:relative;height:300vh;z-index:1}
.phero.sh-stage{
  position:sticky;top:0;height:100svh;min-height:0;overflow:hidden;
}
.phero.sh-stage .l-back{
  position:absolute;inset:0;background-size:cover;background-position:50% 50%;
  transform:none;transition:opacity .8s var(--ease);
}
.phero.sh-stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.phero.sh-stage.video-ready video{opacity:1}
.phero.sh-stage.video-ready .l-back{opacity:0}
.phero.sh-stage .l-glow{position:absolute;inset:0;transform:none}
.phero.sh-stage .p-in{transform:none}

/* Ladering, solange das Video noch kommt */
.sh-ring{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:6;
  color:var(--accent);opacity:.9;transition:opacity .6s var(--ease);
}
.phero.sh-stage.video-ready .sh-ring{opacity:0;pointer-events:none}
.sh-ring svg{width:32px;height:32px;transform:rotate(-90deg)}
.sh-ring .chev{width:20px;height:32px;color:var(--text-secondary);transform:none;
  animation:chevBob 2.6s var(--ease-soft) infinite;animation-delay:-.8s}

/* auf kurzen Schirmen stoert der Ring nur */
@media (max-height:560px){.sh-ring{display:none}}

/* ohne Scrub bleibt es ein ruhiges Standbild, ohne die 300vh Leerraum */
/* faellt das Springen im Video aus, wird daraus eine ruhige Schleife ohne Leerweg */
.scrubhero.no-scrub{height:100svh}
.scrubhero.no-scrub .sh-ring{display:none}

@media (max-width:720px){
  .scrubhero{height:220vh}          /* am Handy kuerzer, sonst scrollt man zu lang */
}
@media (orientation: landscape) and (pointer:coarse) and (max-height:480px),
       (prefers-reduced-motion: reduce){
  .scrubhero{height:auto}
  .phero.sh-stage{position:relative;height:100svh}
  .sh-ring{display:none}
}

/* ---------- Ablauf-Teaser: drei Stufen wischen beim Überfahren durch ---------- */
.t-stages{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--panel)}
.t-stages img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:clip-path 1.1s var(--ease),transform 1.2s var(--ease);
}
.t-stages .s1{clip-path:inset(0 66.7% 0 0)}
.t-stages .s2{clip-path:inset(0 33.4% 0 33.3%)}
.t-stages .s3{clip-path:inset(0 0 0 66.6%)}
.teaser:hover .t-stages .s1{clip-path:inset(0 0 0 0)}
.teaser:hover .t-stages .s2{clip-path:inset(0 0 0 100%)}
.teaser:hover .t-stages .s3{clip-path:inset(0 0 0 100%)}
/* feine Trennlinien zwischen den Stufen */
.t-stages::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,transparent calc(33.3% - 1px),rgba(233,162,76,.5) 33.3%,
    transparent calc(33.3% + 1px),transparent calc(66.6% - 1px),rgba(233,162,76,.5) 66.6%,transparent calc(66.6% + 1px));
  transition:opacity .9s var(--ease);
}
.teaser:hover .t-stages::before{opacity:0}
.t-stages .s-lbl{
  position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#f0e3dc;background:linear-gradient(to top,rgba(9,10,15,.9),transparent);
  padding:22px 0 8px;transition:opacity .6s var(--ease);
}
.t-stages .s-lbl i{flex:0 0 0;font-style:normal}
.t-stages .s-lbl{justify-content:space-around}
.teaser:hover .t-stages .s-lbl{opacity:0}
@media (prefers-reduced-motion: reduce){
  .t-stages img,.t-stages::before,.t-stages .s-lbl{transition:none !important}
}

/* =========================================================
   Vollbildansicht für Bilder und Clips
   ========================================================= */
.mixgal figure,.gal .shot{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(8,9,14,.94);backdrop-filter:blur(14px);
  align-items:center;justify-content:center;padding:clamp(14px,4vw,54px);
}
.lb.open{display:flex}
.lb-media{
  position:relative;max-width:min(1500px,100%);max-height:100%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.97);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.lb.shown .lb-media{opacity:1;transform:none}
.lb-media img,.lb-media video{
  max-width:100%;max-height:calc(100svh - clamp(96px,16vh,150px));
  width:auto;height:auto;display:block;border-radius:4px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lb-cap{
  position:absolute;left:0;right:0;bottom:-38px;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--text-secondary);
  padding:0 12px;
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;z-index:2;display:grid;place-items:center;cursor:pointer;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(10,11,17,.62);
  color:var(--text-primary);backdrop-filter:blur(8px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(10,11,17,.9);border-color:var(--accent);transform:scale(1.06)}
.lb-close{top:clamp(12px,2.5vw,24px);right:clamp(12px,2.5vw,24px)}
.lb-prev{left:clamp(10px,2vw,22px);top:50%;margin-top:-23px}
.lb-next{right:clamp(10px,2vw,22px);top:50%;margin-top:-23px}
.lb-close svg,.lb-prev svg,.lb-next svg{width:19px;height:19px}
.lb-hint{
  position:absolute;left:0;right:0;bottom:clamp(10px,2vw,20px);text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-quiet);
}
@media (max-width:640px){.lb-prev,.lb-next{width:42px;height:42px}.lb-hint{display:none}}
@media (pointer:coarse){.lb-close,.lb-prev,.lb-next{width:48px;height:48px}}
body.lb-offen{overflow:hidden}

/* Kachel mit Clip bekommt ein Abspielzeichen */
.mixgal figure.hat-clip::after{
  content:"";position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(10,11,17,.66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e9a24c'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50%/13px;
  border:1px solid rgba(199,126,106,.45);backdrop-filter:blur(6px);pointer-events:none;
}

/* =========================================================
   Karten, die sich aufklappen
   ========================================================= */
.why .card{cursor:pointer}
.why .card .mehr{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease);
  opacity:0;
}
.why .card .mehr > div{overflow:hidden}
.why .card.auf .mehr{grid-template-rows:1fr;opacity:1}
.why .card .mehr p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.94rem}
.why .card .auf-zeichen{
  position:absolute;right:18px;top:18px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line-strong);display:grid;place-items:center;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.why .card:hover .auf-zeichen{border-color:var(--accent)}
.why .card.auf .auf-zeichen{transform:rotate(45deg);border-color:var(--accent)}
.why .card .auf-zeichen::before,.why .card .auf-zeichen::after{
  content:"";position:absolute;background:var(--accent);border-radius:2px;
}
.why .card .auf-zeichen::before{width:11px;height:1.5px}
.why .card .auf-zeichen::after{width:1.5px;height:11px}
@media (prefers-reduced-motion: reduce){
  .why .card .mehr{grid-template-rows:1fr;opacity:1}
  .lb-media{opacity:1 !important;transform:none !important}
}




/* =========================================================
   Weicher Ausklang unter dem Kopfbild.
   Vorher endete das Bild an der Kastenkante, das gab eine harte Linie.
   ========================================================= */
.pagehead::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(18,21,27,0) 0%, rgba(18,21,27,.22) 38%, rgba(18,21,27,.62) 70%,
    rgba(18,21,27,.9) 88%, var(--canvas) 100%);
}
.pagehead .ph-in{z-index:1}

/* =========================================================
   Vier Stufen, die beim Scrollen ineinander übergehen.
   Ohne JavaScript bleiben es vier Bilder nebeneinander, das ist
   der Grundzustand hier. Erst das Skript macht die klebende Bühne daraus.
   ========================================================= */
.stufen{margin-top:clamp(28px,4vh,44px)}
.stufen-buehne{display:block}
.stufen-bilder{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.stufen-bilder figure{
  margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--panel);
}
.stufen-bilder img{width:100%;height:auto;display:block;filter:saturate(.95)}
.stufen-bilder figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  background:linear-gradient(to top,rgba(8,9,14,.88),rgba(8,9,14,0));
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);display:flex;gap:8px;align-items:baseline;
}
.stufen-bilder figcaption b{color:var(--accent);font-weight:400}
.stufen-bilder figcaption span{display:none}
.stufen-text,.stufen-rail,.stufen-wink{display:none}
@media (max-width:760px){
  .stufen-bilder{grid-template-columns:repeat(2,1fr)}
}

/* ---- ab hier der Zustand mit Skript ---- */
.stufen.aktiv{height:var(--weg,240vh);margin-top:0}
.stufen.aktiv .stufen-buehne{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,2vh,22px);padding:clamp(70px,10vh,96px) 0 clamp(26px,4vh,40px);
}
.stufen.aktiv .stufen-bilder{
  display:block;position:relative;width:min(100%,960px);aspect-ratio:4/3;
  max-height:52svh;margin:0 auto;border-radius:4px;overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}
.stufen.aktiv .stufen-bilder figure{
  position:absolute;inset:0;border-radius:0;opacity:0;will-change:opacity;
}
.stufen.aktiv .stufen-bilder figure:first-child{opacity:1}
.stufen.aktiv .stufen-bilder img{width:100%;height:100%;object-fit:cover}
.stufen.aktiv .stufen-bilder figcaption{display:none}

.stufen.aktiv .stufen-text{
  display:block;text-align:center;max-width:46ch;padding:0 18px;min-height:5.6em;
}
.stufen.aktiv .stufen-text .st-nr{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px;
}
.stufen.aktiv .stufen-text .st-titel{
  display:block;font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.1;
}
.stufen.aktiv .stufen-text .st-satz{
  margin-top:8px;color:var(--text-secondary);font-size:.98rem;line-height:1.5;
}
.stufen.aktiv .stufen-text .st-nr,
.stufen.aktiv .stufen-text .st-titel,
.stufen.aktiv .stufen-text .st-satz{transition:opacity .22s var(--ease)}
.stufen.aktiv .stufen-text.wechselt .st-nr,
.stufen.aktiv .stufen-text.wechselt .st-titel,
.stufen.aktiv .stufen-text.wechselt .st-satz{opacity:0}

.stufen.aktiv .stufen-rail{
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:0 18px;
}
.stufen-rail button{
  appearance:none;background:none;border:0;cursor:pointer;padding:8px 4px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);display:flex;align-items:center;gap:8px;
  transition:color .35s var(--ease);
}
.stufen-rail button .punkt{
  width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.stufen-rail button[aria-current="true"]{color:var(--text-primary)}
.stufen-rail button[aria-current="true"] .punkt{background:var(--accent);transform:scale(1.5)}
.stufen-rail button:hover .punkt{background:var(--accent-hover)}
.stufen-rail button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.stufen.aktiv .stufen-wink{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-secondary);opacity:.75;
  transition:opacity .4s var(--ease);
}
.stufen.aktiv .stufen-wink[hidden]{display:none}

@media (max-width:560px){
  .stufen.aktiv .stufen-bilder{max-height:40svh}
  .stufen-rail button{font-size:9.5px;letter-spacing:.1em;gap:6px;padding:8px 2px}
}
@media (prefers-reduced-motion: reduce){
  .stufen.aktiv .stufen-bilder figure{transition:none}
}

/* =========================================================
   Animationen ganz oben in der Galerie.
   Sie sollen auf den ersten Blick als Video erkennbar sein,
   deshalb ein deutliches Abspielzeichen und, wenn die Leitung
   es hergibt, ein stumm laufender Clip statt eines Standbilds.
   ========================================================= */
.clipstrip{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.4vw,16px);margin-top:clamp(28px,4vh,44px);
}
.clipstrip figure{
  margin:0;position:relative;overflow:hidden;border-radius:3px;
  background:var(--panel);aspect-ratio:16/10;cursor:zoom-in;
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.clipstrip.in figure{opacity:1;transform:none}
.clipstrip.in figure:nth-child(2){transition-delay:70ms}
.clipstrip.in figure:nth-child(3){transition-delay:140ms}
.clipstrip.in figure:nth-child(4){transition-delay:210ms}
.clipstrip img,.clipstrip video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.clipstrip img{filter:saturate(.94);transition:transform 1.1s var(--ease)}
.clipstrip figure:hover img{transform:scale(1.04)}
.clipstrip video{opacity:0;transition:opacity .7s var(--ease)}
.clipstrip figure.laeuft video{opacity:1}

/* Immer sichtbar: das sagt "hier ist Bewegung drin" */
.clipstrip .marke{
  position:absolute;left:12px;top:12px;z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;
  background:rgba(10,11,17,.66);border:1px solid rgba(199,126,106,.45);
  backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-primary);
}
.clipstrip .marke::before{
  content:"";width:0;height:0;border-style:solid;
  border-width:4.5px 0 4.5px 7px;border-color:transparent transparent transparent var(--glow);
}
/* Der große Knopf verschwindet, sobald der Clip wirklich laeuft */
.clipstrip .spiel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;pointer-events:none;
  background:rgba(10,11,17,.58);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(7px);display:grid;place-items:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.clipstrip .spiel::before{
  content:"";width:0;height:0;border-style:solid;margin-left:4px;
  border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
}
.clipstrip figure:hover .spiel{transform:translate(-50%,-50%) scale(1.08)}
.clipstrip figure.laeuft .spiel{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.clipstrip figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 12px 11px;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,14,.86),rgba(8,9,14,0));
  font-size:.86rem;color:var(--text-primary);
}
@media (max-width:900px){.clipstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){
  .clipstrip{grid-template-columns:1fr}
  .clipstrip .spiel{width:50px;height:50px}
}

/* =========================================================
   Einzelne Projekte, auswählbar statt vier Kacheln am Stück.
   Ohne Skript stehen alle vier da, das Skript macht die Auswahl daraus.
   ========================================================= */
.projwahl{display:none;gap:8px;flex-wrap:wrap;margin-top:clamp(24px,3.5vh,38px)}
.projwahl.bereit{display:flex}
.projwahl button{
  appearance:none;cursor:pointer;padding:10px 16px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--text-secondary);
  font-family:var(--body);font-size:.93rem;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.projwahl button:hover{border-color:var(--line-strong);color:var(--text-primary)}
.projwahl button[aria-selected="true"]{
  background:var(--accent);border-color:transparent;color:#15171c;
}
.projwahl button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.projtafel{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.6vw,30px);margin-top:clamp(20px,3vh,30px);
}
.projtafel.bereit{display:block}
.projtafel.bereit > .projcard{display:none}
.projtafel.bereit > .projcard.an{display:block;animation:projauf .5s var(--ease) both}
@keyframes projauf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.projtafel.bereit > .projcard .pc-img{aspect-ratio:21/9}
@media (max-width:760px){
  .projtafel{grid-template-columns:1fr}
  .projtafel.bereit > .projcard .pc-img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion: reduce){
  .projtafel.bereit > .projcard.an{animation:none}
}

/* Sprungmarke zu den Projekten, damit niemand erst alles durchscrollen muss */
.zumziel{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  color:var(--accent);font-size:.95rem;text-decoration:none;
  border-bottom:1px solid var(--accent-muted);padding-bottom:3px;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.zumziel:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.zumziel svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.zumziel:hover svg{transform:translateY(3px)}

/* =========================================================
   Abstaende aufraeumen.
   Nach dem Kopfbild und zwischen zwei gleichfarbigen Abschnitten
   stand die Polsterung doppelt, das las sich wie ein Loch.
   ========================================================= */
.pagehead + main > .sec:first-child{padding-top:clamp(40px,6vh,76px)}
.sec:not(.alt) + .sec:not(.alt),
.sec.alt + .sec.alt{padding-top:clamp(44px,6vh,80px)}
.sec + .endcta{padding-top:clamp(56px,8vh,96px)}

/* =========================================================
   Sieben Schritte als ruhige Kartenfolge.
   Vorher: schmale Spalte links, lange Schiene rechts. Das war
   unausgewogen und zwang zum Hin- und Herspringen.
   Jetzt: gleichwertige Karten, zwei davon mit Miniaturen.
   ========================================================= */
.schritte{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(32px,4.5vh,52px);
}
.schritte .schritt{
  position:relative;padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--line);border-radius:4px;background:var(--panel);
  display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.schritte .schritt:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.schritte .schritt .no{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);
}
.schritte .schritt h3{font-size:1.06rem;margin-top:10px;letter-spacing:-.018em;line-height:1.2}
.schritte .schritt p{
  margin-top:9px;color:var(--text-secondary);font-size:.94rem;line-height:1.55;
}
.schritte .breit{grid-column:span 2}

/* Miniaturen in den zwei Schritten, die eine Auswahl zeigen */
.schritte .mini{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:6px;margin-top:auto;padding-top:16px;
}
.schritte .mini figure{
  margin:0;position:relative;overflow:hidden;border-radius:2px;
  border:1px solid transparent;background:var(--panel-2);
}
.schritte .mini img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;display:block;
  filter:saturate(.9);transition:filter .5s var(--ease)
}
.schritte .mini figure:hover img{filter:saturate(1.02)}
.schritte .mini figure.picked{border-color:var(--accent)}
.schritte .mini figure.picked::after{
  content:"";position:absolute;right:4px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171c' stroke-width='3.4'%3E%3Cpath d='M4 12l6 6L20 6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/8px;
}
.schritte .mini-text{
  margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-quiet);
}
@media (max-width:980px){
  .schritte{grid-template-columns:repeat(2,1fr)}
  .schritte .breit{grid-column:span 2}
}
@media (max-width:620px){
  .schritte{grid-template-columns:1fr}
  .schritte .breit{grid-column:span 1}
}

/* =========================================================
   Sprungmarke als Knopf, nicht als Textlink
   ========================================================= */
.zumziel{
  display:inline-flex;align-items:center;gap:12px;margin-top:24px;
  padding:11px 20px 11px 22px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line-strong);background:var(--panel);
  color:var(--text-primary);font-size:.95rem;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.zumziel:hover{border-color:var(--accent);background:var(--panel-2);transform:translateY(-2px)}
.zumziel .pfeilkreis{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--accent-muted);color:var(--text-primary);
  transition:background .4s var(--ease);
}
.zumziel:hover .pfeilkreis{background:var(--accent);color:#15171c}
.zumziel svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.zumziel:hover svg{transform:translateY(2px)}
@media (prefers-reduced-motion: reduce){
  .zumziel,.zumziel:hover,.schritte .schritt:hover{transform:none}
}

/* Folgen zwei Abschnitte mit derselben Hintergrundfarbe aufeinander,
   stand unten und oben die volle Polsterung. Ohne Farbwechsel liest sich
   das wie ein Loch, deshalb wird auch die untere Seite gekuerzt. */
.sec:not(.alt):has(+ .sec:not(.alt)),
.sec.alt:has(+ .sec.alt){padding-bottom:clamp(40px,5.5vh,66px)}

/* Der Schlussblock haengt an main, nicht am letzten Abschnitt */
main + .endcta{padding-top:clamp(50px,7vh,82px)}

/* Mehr als fuenf Kacheln in einer Staffel: auch die bekommen ihre Verzoegerung */
.stg.in > *:nth-child(6){transition-delay:450ms}
.stg.in > *:nth-child(7){transition-delay:540ms}
.stg.done > *:nth-child(6),.stg.done > *:nth-child(7){transition-delay:0s !important}

/* Der letzte Abschnitt vor dem Schlussblock braucht unten weniger Luft */
main > .sec:last-child{padding-bottom:clamp(48px,6.5vh,78px)}

/* Am Handy stehen sechs Miniaturen nebeneinander zu eng,
   deshalb brechen sie dort auf drei je Reihe um. */
@media (max-width:620px){
  .schritte .mini{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:8px}
}

/* =========================================================
   Bilder entwickeln sich, statt zu laden.
   Kein Ladekreisel. Jede Kachel zeigt zuerst ein winziges
   Vorschaubild, unscharf und entfaerbt, also genau so, wie bei
   uns ein Weissrender aussieht. Ist das echte Bild da, wird
   daraus das fertige, farbige Rendering. Das Warten erzaehlt
   damit dasselbe, was das Studio tut.
   Ueber die Flaeche wandert dabei ein weiches Licht, so wie ein
   Renderdurchlauf ueber das Bild geht.
   ========================================================= */
[data-lqip]{position:relative;overflow:hidden;background:var(--panel)}
/* Die Unterlage ist sofort da, noch bevor das Skript laeuft.
   Unscharf und entfaerbt sieht sie aus wie ein Weissrender. */
[data-lqip]::before{
  content:"";position:absolute;inset:-8%;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(100deg,transparent 28%,rgba(255,238,218,.30) 47%,transparent 66%),
    var(--lqip);
  background-size:230% 100%, cover;
  background-position:150% 0, 50% 50%;
  background-repeat:no-repeat,no-repeat;
  filter:blur(15px) saturate(0) brightness(1.12) contrast(.88);
  opacity:1;
  animation:renderlauf 1.9s linear infinite;
}
@keyframes renderlauf{
  from{background-position:150% 0, 50% 50%}
  to{background-position:-70% 0, 50% 50%}
}
/* Bild steht: die Unterlage bekommt Farbe, wird scharf und geht */
[data-lqip].fertig::before{
  opacity:0;animation:none;
  filter:blur(5px) saturate(1) brightness(1) contrast(1);
}
[data-lqip].entwickelt.fertig::before{
  transition:opacity .8s var(--ease) .1s, filter .9s var(--ease);
}
/* Nur wenn wirklich gewartet wird, blendet das Bild auf.
   War es schon da, erscheint es ohne Umweg. */
[data-lqip].entwickelt img{opacity:0;transition:opacity .7s var(--ease) .12s}
[data-lqip].entwickelt.fertig img{opacity:1}
/* Waehrend gewartet wird, ist die Kachel sichtbar: sonst sieht man
   im entscheidenden Moment gar nichts. */
.mixgal figure.entwickelt:not(.fertig),
.clipstrip figure.entwickelt:not(.fertig){opacity:1;transform:none}
/* Beschriftungen und Abspielzeichen bleiben ueber der Unterlage */
[data-lqip] figcaption{z-index:3}

@media (prefers-reduced-motion: reduce){
  [data-lqip]::before{animation:none}
  [data-lqip].entwickelt::before,
  [data-lqip].entwickelt img{transition-duration:.2s}
}

/* =========================================================
   Abstaende: das erste Element in einem Abschnitt braucht keinen
   eigenen Abstand nach oben, die Polsterung des Abschnitts reicht.
   Vorher stapelte sich beides, am deutlichsten bei .svc auf Leistungen.
   ========================================================= */
.sec > .wrap > *:first-child{margin-top:0}

/* =========================================================
   Anfrage: ein Formular, drei Felder, sonst nichts.
   Alles, was ablenkt, ist weg. Das Bild kommt erst danach.
   ========================================================= */
.anfrage{max-width:600px;margin:0 auto}
.anfrage .field{margin-bottom:20px}
.anfrage [aria-invalid="true"]{border-color:var(--accent)}
.anfrage .btn.gross{
  width:100%;justify-content:center;padding:17px 26px;font-size:1.02rem;margin-top:6px;
}
.anfrage .formnote{margin-top:14px;line-height:1.55}
.anfrage .formnote a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-muted)}
.anfrage .formnote a:hover{border-bottom-color:var(--accent)}
.anfrage .direkt{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--text-secondary);font-size:.95rem;text-align:center;
}
.anfrage .direkt a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.anfrage .direkt a:hover{border-bottom-color:var(--accent)}

/* Diktierknopf, sitzt unten rechts im Textfeld */
.feld-projekt{position:relative}
.diktat{
  position:absolute;right:10px;bottom:12px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 11px;border-radius:999px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text-secondary);
  font-family:var(--body);font-size:.86rem;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.diktat:hover{border-color:var(--accent);color:var(--text-primary)}
.diktat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.diktat-punkt{
  width:9px;height:9px;border-radius:50%;background:var(--text-quiet);flex:0 0 auto;
  transition:background .3s var(--ease);
}
.diktat.hoert{border-color:var(--accent);color:var(--text-primary);background:var(--panel)}
.diktat.hoert .diktat-punkt{background:var(--glow);animation:pulsen 1.3s ease-in-out infinite}
@keyframes pulsen{
  0%,100%{box-shadow:0 0 0 0 rgba(233,162,76,.55)}
  70%{box-shadow:0 0 0 7px rgba(233,162,76,0)}
}
.diktat-hinweis{
  margin-top:-10px;margin-bottom:20px;color:var(--text-quiet);font-size:.84rem;line-height:1.5;
}

/* Das Abschlussbild, bewusst nach dem Formular und ohne Text darauf */
.anfrage-bild{
  margin-top:clamp(40px,6vh,72px);overflow:hidden;position:relative;background:var(--panel);
}
.anfrage-bild img{
  width:100%;height:clamp(220px,34vh,360px);object-fit:cover;object-position:50% 60%;
  display:block;filter:saturate(.94);
}
.anfrage-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--canvas) 0%,rgba(18,21,27,.35) 26%,rgba(18,21,27,0) 60%);
}
@media (max-width:620px){
  .diktat{position:static;margin-top:10px;width:100%;justify-content:center;min-height:46px}
  .diktat-hinweis{margin-top:8px}
}
@media (prefers-reduced-motion: reduce){
  .diktat.hoert .diktat-punkt{animation:none}
}

/* Der Abstand zwischen Abschnitten war zu gross: bis zu einem Drittel
   Bildschirm Leere, was wie ein Fehler aussieht statt wie eine Pause. */
.sec:not(.alt) + .sec:not(.alt),
.sec.alt + .sec.alt{padding-top:clamp(38px,5vh,62px)}
.sec:not(.alt):has(+ .sec:not(.alt)),
.sec.alt:has(+ .sec.alt){padding-bottom:clamp(34px,4.5vh,56px)}
main > .sec:last-child{padding-bottom:clamp(42px,5.5vh,66px)}
main + .endcta{padding-top:clamp(44px,6vh,72px)}

/* ---------- projektseite: leistungen und haeufige fragen ----------
   Zwei lesbare Bloecke am Seitenende. Kein verstecktes Keyword-Feld:
   versteckter Text wird abgestraft und von KI-Suchen ignoriert. */
.projmehr{max-width:74ch}
.projmehr h2{font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.02em}
.projmehr .fragen{margin-top:clamp(46px,6.5vh,76px)}
.projmehr .faq{margin-top:22px}
.lstgliste{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.lstgliste li{list-style:none}
.tag.lstg{
  font-family:var(--body);font-size:.92rem;letter-spacing:0;
  color:var(--text-secondary);padding:7px 14px;border-color:var(--line-strong);
}
/* Die Frage ist eine echte Ueberschrift, der Knopf bringt seine
   Schrift selbst mit. */
.q h3{margin:0;font:inherit;letter-spacing:inherit}

/* Die Leistungskarte spannt sich ueber beide Spalten: fuenf Karten in
   einem Zweierraster liessen sonst ein leeres Feld. */
.why .card.breit{grid-column:1/-1}