/* Leschok Visuals — site.css (v4: Archivo, angelehnt an die Logo-Schrift)
   Schwarz / Neon #CCFF00 / Grau / Off-White · Archivo (SIL OFL, selbst gehostet), angelehnt an die Logo-Schrift
   Der Hintergrund ist eine durchgehende WebGL-Fläche; Abschnitte sagen per data-bg, was dahinter laufen soll. */
@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --bg:#000;--ink:#E9EDE4;--mute:#8A8F80;--neon:#CCFF00;--neon-ink:#0A0C00;
  --line:rgba(233,237,228,.14);--line2:rgba(233,237,228,.3);
  --fd:"Archivo","Arial Black",Arial,Helvetica,sans-serif;
  --fb:"Archivo",Arial,Helvetica,sans-serif;
  --fm:"Archivo",Arial,Helvetica,sans-serif;
  --gl:max(clamp(16px,4vw,64px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4vw,64px),env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--fb);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0}
:where(ul,ol){padding:0;list-style:none}
::selection{background:var(--neon);color:var(--neon-ink)}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--neon);color:var(--neon-ink);padding:8px 12px;font:600 11px/1 var(--fm);text-transform:uppercase}
.skip:focus{left:16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- canvas */
#lv-gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;background:#000}
.no-gl #lv-gl{background:radial-gradient(60% 50% at 70% 40%,rgba(204,255,0,.12),transparent 70%),#000}
main,.top,.foot{position:relative;z-index:1}

/* ---------- type */
.mono{font:600 11px/1.45 var(--fm);font-stretch:125%;letter-spacing:.14em;text-transform:uppercase}
.label{display:flex;gap:12px;align-items:center;color:var(--neon)}
.label::before{content:"";width:22px;height:1px;background:currentColor}
.h-xxl{font:800 clamp(2.6rem,9vw,9.5rem)/.9 var(--fd);font-stretch:104%;letter-spacing:-.04em;text-wrap:balance}
.h-xl{font:800 clamp(2.2rem,6.4vw,6.4rem)/.92 var(--fd);font-stretch:104%;letter-spacing:-.035em;text-wrap:balance}
.h-l{font:800 clamp(1.7rem,4.2vw,4rem)/1 var(--fd);font-stretch:104%;letter-spacing:-.03em;text-wrap:balance}
.h-m{font:800 clamp(1.2rem,1.9vw,1.6rem)/1.1 var(--fd);font-stretch:104%;letter-spacing:-.02em}
.h-xxl,.h-xl,.h-l,.h-m{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.lead{font:400 clamp(1.1rem,1.6vw,1.35rem)/1.5 var(--fb);max-width:52ch}
.mute{color:var(--mute)}
.neon{color:var(--neon)}
.prose p{max-width:62ch;color:#D3D8CC}
.prose p+p{margin-top:1em}

/* ---------- layout */
.wrap{padding-left:var(--gl);padding-right:var(--gr);max-width:1720px;margin:0 auto}
.sec{padding-block:clamp(88px,13vw,180px)}
.solid{background:var(--bg)}

/* ---------- header */
.top{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .4s}
.scrolled .top{background:linear-gradient(rgba(0,0,0,.92),rgba(0,0,0,.55) 70%,transparent)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:22px;width:auto}
.home .brand{opacity:0;transition:opacity .4s}
.home.scrolled .brand{opacity:1}
.nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px)}
.nav a{text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;text-shadow:0 0 12px #000}
.nav a:hover,.nav a[aria-current="page"]{color:var(--neon);border-bottom-color:var(--neon)}
.nav .lang{border:1px solid var(--line2);padding:5px 8px;background:rgba(0,0,0,.5)}
.nav .lang:hover{border-color:var(--neon)}

/* ---------- hero (home) */
.hero{min-height:100svh;display:grid;grid-template-rows:1fr auto;position:relative}
.hero-mid{display:grid;place-items:center;padding-top:72px}
.hero h1{display:grid;justify-items:center;gap:clamp(18px,2.4vw,32px);text-align:center}
.lv-logo{width:min(70vw,980px,calc(44svh*2.43));transition:opacity .6s}
.gl .lv-logo{opacity:0}
.tag{font:700 clamp(11px,1.25vw,15px)/1 var(--fd);font-stretch:125%;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(8px);filter:blur(6px);
  transition:opacity 2.4s ease,transform 2.4s var(--ease),filter 2.4s ease,letter-spacing 3.2s var(--ease)}
.tag.show,.no-gl .tag,html:not(.js) .tag{opacity:.92;transform:none;filter:none;letter-spacing:.62em;padding-left:.62em}
.hero-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
.hero-bar .scroll{justify-self:center;color:var(--mute);display:grid;justify-items:center;gap:8px}
.hero-bar .scroll i{width:1px;height:34px;background:linear-gradient(var(--neon),transparent);animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hud{justify-self:end;display:flex;gap:12px;align-items:center;color:var(--mute)}
.hud b{font-weight:600;color:var(--ink)}
.hud button{all:unset;cursor:pointer;font:600 11px/1 var(--fm);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);border:1px solid var(--neon);padding:7px 9px}
.hud button:hover{background:var(--neon);color:var(--neon-ink)}
.hud button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- statement */
.statement{display:grid;gap:28px;max-width:1400px}
.statement .h-xl{max-width:16ch}
.statement .lead{color:#C9CEC2}

/* ---------- offer (statisch, 2×2) */
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line2)}
.oc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;padding:clamp(28px,3.4vw,48px) clamp(0px,2vw,32px) clamp(28px,3.4vw,48px) 0;border-bottom:1px solid var(--line);position:relative}
.oc:nth-child(odd){border-right:1px solid var(--line)}
.oc:nth-child(even){padding-left:clamp(20px,3vw,48px)}
.oc .num{color:var(--neon);padding-top:.5em}
.oc h3{font:800 clamp(1.6rem,3vw,2.8rem)/1 var(--fd);font-stretch:104%;letter-spacing:-.035em;text-transform:lowercase}
.oc p{grid-column:2;max-width:40ch;color:#D3D8CC;margin-top:10px}
.oc .tags{grid-column:2;color:var(--mute);margin-top:6px}
.oc::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--neon);transition:width .6s var(--ease)}
.oc:hover::after{width:100%}

/* ---------- selected */
.refs{border-top:1px solid var(--line2)}
.ref{display:grid;grid-template-columns:110px minmax(0,1.2fr) minmax(0,1fr) 40px;gap:24px;align-items:center;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--line);text-decoration:none}
.ref .t{font:800 clamp(1.5rem,3.6vw,3.4rem)/1 var(--fd);font-stretch:104%;letter-spacing:-.03em;transition:color .25s,transform .4s var(--ease)}
.ref p{color:#C9CEC2}
.ref .arr{font-family:var(--fm);color:var(--neon);justify-self:end;transition:transform .3s var(--ease)}
.ref:hover .t{color:var(--neon);transform:translateX(8px)}
.ref:hover .arr{transform:translateX(6px)}
.ref .y{color:var(--mute)}
.textlink{display:inline-flex;gap:10px;align-items:center;color:var(--neon);text-decoration:none;border-bottom:1px solid var(--neon);padding-bottom:4px}
.textlink:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- contact */
.contact-sec{min-height:100svh;display:grid;align-content:center}
.contact{display:grid;gap:26px}
.mail{font:800 clamp(1.3rem,5.6vw,5.8rem)/1 var(--fd);font-stretch:104%;letter-spacing:-.035em;color:var(--neon);text-decoration:none;overflow-wrap:anywhere;text-shadow:0 0 30px rgba(0,0,0,.6)}
.mail:hover{color:var(--ink)}
.copy{all:unset;cursor:pointer;font:600 11px/1 var(--fm);font-stretch:125%;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line2);padding:10px 12px;color:var(--ink);background:rgba(0,0,0,.5)}
.copy:hover,.copy.ok{border-color:var(--neon);color:var(--neon)}
.copy:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.crow{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.contact .lead{text-shadow:0 1px 16px #000}

/* ---------- footer */
.foot{background:var(--bg);border-top:1px solid var(--line);padding-block:26px max(26px,env(safe-area-inset-bottom,0px))}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;color:var(--mute)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--neon)}

/* ---------- page hero */
.phero{min-height:100svh;display:grid;align-content:end;padding-top:120px;padding-bottom:clamp(32px,5vw,64px);position:relative}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 65%),linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.25) 40%,rgba(0,0,0,.95));pointer-events:none}
.phero>*{position:relative;z-index:1}
.phero.mid{min-height:72svh}
html:not(.gl) .phero[style]{background:var(--ph) center/cover no-repeat}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--mute);margin-bottom:22px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--neon)}
.kicker{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:18px}
.phero .lead{margin-top:24px;text-shadow:0 1px 16px #000}
.hint{color:var(--mute);margin-top:28px}

/* ---------- project info */
.info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:start}
.fig b{display:block;white-space:nowrap;font:800 clamp(3rem,7.4vw,7.5rem)/.85 var(--fd);font-stretch:104%;letter-spacing:-.05em;color:var(--neon)}
.fig span{display:block;margin-top:14px;max-width:24ch}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line2);margin-top:44px}
.facts div{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--mute)}
.facts dd{font-size:.97rem}
.facts .wide{grid-column:1/-1}

/* ---------- filmstrip */
.strip-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
.strip{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--neon) transparent}
.frame{flex:0 0 auto;max-width:86vw;scroll-snap-align:start;display:grid;gap:10px;align-content:start}
.frame .im{position:relative;overflow:hidden;border:1px solid var(--line);background:#060705;max-height:52vh}
.frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);transition:filter .5s,transform .8s var(--ease)}
.frame .im::after{content:"";position:absolute;inset:0;background:var(--neon);mix-blend-mode:multiply;opacity:1;transition:opacity .5s}
.frame:hover img,.frame:focus-within img{filter:none;transform:scale(1.03)}
.frame:hover .im::after,.frame:focus-within .im::after{opacity:0}
.frame figcaption{display:flex;gap:12px;color:var(--mute)}
.frame figcaption b{font-weight:400;color:var(--neon)}
@media (hover:none){.frame img{filter:none}.frame .im::after{opacity:0}}

/* ---------- next */
.next{display:grid;gap:14px;padding-block:clamp(56px,9vw,120px);text-decoration:none;border-top:1px solid var(--line)}
.next .h-xl{transition:color .25s}
.next:hover .h-xl{color:var(--neon)}

/* ---------- project index */
.index-wrap{position:relative}
.index-wrap::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 50%,rgba(0,0,0,.15));pointer-events:none}
.index{position:relative;border-top:1px solid var(--line2)}
.row{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,.55fr) 110px;gap:20px;align-items:center;padding:clamp(26px,4.4vh,52px) 0;border-bottom:1px solid var(--line);text-decoration:none}
.row .t{font:800 clamp(1.35rem,3.4vw,3.3rem)/1 var(--fd);font-stretch:104%;letter-spacing:-.03em;transition:color .25s,transform .4s var(--ease)}
.row:hover .t{color:var(--neon);transform:translateX(8px)}
.row .num{color:var(--neon)}
.row .c,.row .y{color:var(--mute)}
.row .y{text-align:right}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line2)}
.more li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.more b{font:800 1.05rem/1.2 var(--fd)}

/* ---------- about / faq / lists / legal */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{border:1px solid var(--line2);padding:7px 10px}
.stack{display:grid;gap:36px;align-content:start}
.faq{border-top:1px solid var(--line2)}
.faq div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 48px;padding:22px 0;border-bottom:1px solid var(--line)}
.faq h3{font:800 1.08rem/1.25 var(--fd)}
.faq p{color:#C9CEC2}
.ticks li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.ticks li::before{content:"→";color:var(--neon)}
.legal{max-width:72ch}
.legal h2{font:800 1.2rem/1.25 var(--fd);margin:2.2em 0 .6em}
.legal p,.legal li{color:#C9CEC2}
.legal p+p{margin-top:.8em}
.todo{background:var(--neon);color:var(--neon-ink);padding:0 4px}

/* ---------- reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- responsive */
@media (max-width:1000px){
  .row{grid-template-columns:40px minmax(0,1fr) 96px}
  .row .c{display:none}
  .ref{grid-template-columns:minmax(0,1fr) 30px;gap:8px 16px}
  .ref .y{grid-column:1/-1;order:-1}
  .ref p{grid-column:1}
  .ref .arr{grid-row:2/4;grid-column:2;align-self:center}
}
@media (max-width:700px){
  body{font-size:1rem}
  .top .wrap{height:58px}
  .brand img{height:18px}
  .nav{gap:13px}
  .nav .opt{display:none}
  .lv-logo{width:min(88vw,560px)}
  .hero-bar{grid-template-columns:1fr auto}
  .hero-bar .scroll{display:none}
  .hero-bar .where{grid-column:1/-1}
  .hud{justify-self:start}
  .offer-grid{grid-template-columns:minmax(0,1fr)}
  .oc:nth-child(odd){border-right:0}
  .oc:nth-child(even){padding-left:0}
  .info,.split,.faq div{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .more{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .row .y{display:none}
  .index-wrap::before{background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.55))}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .hero-bar .scroll i{animation:none}
  *{transition-duration:.01ms!important}
}
@media (hover:none){.hint{display:none}}


/* ================= v5 ================= */
/* Logo + Slogan bündig */
.hero h1.logo-box{display:grid;justify-items:start;gap:clamp(14px,2vw,26px);text-align:left}
.hero .tag{padding-left:0;letter-spacing:.42em;text-transform:none;font-weight:600;font-size:clamp(13px,1.5vw,19px)}
.hero .tag.show,.no-gl .hero .tag,html:not(.js) .hero .tag{letter-spacing:.06em;padding-left:0}
.hero .tag{font-stretch:110%}

/* Fotos im CI-Look: Duotone, Ränder verlaufen ins Schwarz, Farbe beim Überfahren */
.ph{display:grid;gap:10px;align-content:start;margin:0}
.ph .pi{position:relative;display:block;width:100%;max-width:var(--w);overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 58%,transparent 100%)}
.ph .pi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1s var(--ease)}
.ph .pi img.c{opacity:0}
@media (hover:hover){.ph:hover .pi img.c,.ph:focus-visible .pi img.c{opacity:1}.ph:hover .pi img{transform:scale(1.02)}}
.ph[data-lb]{cursor:zoom-in}
.ph figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--mute);justify-content:space-between}
.ph figcaption a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--neon);text-underline-offset:3px}
.pa{display:block;text-decoration:none}

/* Bildreihe Startseite */
.reel-sec{padding-block:clamp(40px,7vw,96px)}
.reel-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.reel-nav{display:flex;gap:10px;align-items:center}
.rb{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line2);color:var(--neon);font:600 18px/1 var(--fd)}
.rb:hover{background:var(--neon);color:var(--neon-ink);border-color:var(--neon)}
.rb:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.reel{display:flex;gap:clamp(8px,1.5vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gl) var(--gr);scroll-padding-inline:var(--gl)}
.reel::-webkit-scrollbar{display:none}
.reel .slide{flex:0 0 auto;scroll-snap-align:start;height:auto}
.reel .slide .pi{height:min(66vh,620px,var(--h));width:auto;max-width:none}
.reel .slide figcaption{max-width:60ch}

/* Collage auf Projektseiten */
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,4vw,64px) clamp(12px,2vw,32px);align-items:start}
.collage .ph{grid-column:span 7}
.collage .c1{grid-column:8/span 5;margin-top:clamp(40px,12vw,200px)}
.collage .c2{grid-column:3/span 6}
.collage .c3{grid-column:9/span 4;margin-top:clamp(20px,6vw,100px)}
.collage .ph .pi{margin-inline:auto}

/* Galerie aller Projekte */
.gallery{columns:3 280px;column-gap:clamp(12px,2vw,28px)}
.gallery .ph{break-inside:avoid;margin-bottom:clamp(16px,2.4vw,36px)}

/* Angebotsseite */
.svc-list{display:grid;gap:0;border-top:1px solid var(--line2)}
.svc-b{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:clamp(32px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.svc-b .num{color:var(--neon);padding-top:.6em}
.svc-b h2{margin-bottom:18px;text-transform:lowercase}
.svc-b .lead{max-width:62ch;color:#D3D8CC}
.svc-b .tags{display:block;margin-top:18px;color:var(--mute)}

/* Porträt */
.portrait-w .ph .pi{max-width:520px}

/* YouTube (Klick zum Laden) */
.yt{position:relative;aspect-ratio:16/9;max-width:1100px;border:1px solid var(--line2);background:radial-gradient(60% 60% at 50% 50%,rgba(204,255,0,.12),transparent 70%),#030402;display:grid;place-items:center;text-align:center;padding:20px}
.yt-btn{all:unset;cursor:pointer;display:grid;justify-items:center;gap:14px;color:var(--ink)}
.yt-play{width:78px;height:78px;border-radius:50%;background:var(--neon);color:var(--neon-ink);display:grid;place-items:center;font-size:26px;padding-left:5px;transition:transform .3s var(--ease)}
.yt-btn:hover .yt-play{transform:scale(1.08)}
.yt-btn:focus-visible{outline:2px solid var(--neon);outline-offset:6px}
.yt p{position:absolute;left:16px;right:16px;bottom:14px}
.yt.on{padding:0}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:max(56px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-height:100%}
.lb img{max-width:100%;max-height:calc(100svh - 140px);width:auto;height:auto;object-fit:contain}
.lb figcaption{color:var(--mute);text-align:center;max-width:70ch}
.lb-x{all:unset;cursor:pointer;position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));color:var(--ink);border:1px solid var(--line2);padding:9px 12px}
.lb-p,.lb-n{all:unset;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;color:var(--neon);border:1px solid var(--line2);font:600 20px/1 var(--fd)}
.lb-p:hover,.lb-n:hover,.lb-x:hover{border-color:var(--neon);color:var(--neon)}
.lb button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
html.lb-open{overflow:hidden}
.lb[hidden],[hidden]{display:none!important}

@media (max-width:700px){
  .collage{grid-template-columns:minmax(0,1fr)}
  .collage .ph,.collage .c1,.collage .c2,.collage .c3{grid-column:1;margin-top:0}
  .reel .slide .pi{height:min(50vh,var(--h))}
  .svc-b{grid-template-columns:minmax(0,1fr);gap:8px}
  .lb{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto}
  .lb figure{grid-column:1;grid-row:1}
  .lb-p,.lb-n{grid-row:2;justify-self:start}
  .lb-n{justify-self:end;margin-top:-60px}
}

.yts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(14px,2vw,28px)}
.yts .yt{max-width:none}

/* ================= v6 ================= */
/* kein harter Schnitt: Hero läuft weich aus, dunkle Abschnitte blenden von oben ein */
.phero::after{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 65%),linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.2) 45%,rgba(0,0,0,.55))}
.phero h1,.phero .lead,.phero .kicker,.phero .crumbs{text-shadow:0 2px 24px rgba(0,0,0,.85)}
main>[data-bg="off"]:not(.see){background:linear-gradient(rgba(0,0,0,0),#000 min(28vh,260px))}
/* Mail-Adresse kleiner */
.mail{font-size:clamp(1.15rem,3.1vw,2.9rem)}
/* Porträt: Person in Farbe, Hintergrund im CI-Look */
.cut{margin:0;display:grid;gap:10px}
.cut-in{position:relative;display:block;width:100%;max-width:520px;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 45%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 45%,#000 62%,transparent 100%)}
.cut-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cut-in .bgd{transition:filter 1.2s var(--ease),transform 1.6s var(--ease)}
.cut:hover .bgd,.cut:active .bgd{filter:hue-rotate(-55deg) saturate(1.25) brightness(1.08);transform:scale(1.04)}
.cut,.cut *{-webkit-tap-highlight-color:transparent;outline:none}
.cut figcaption{color:var(--mute)}
/* Instagram im Footer */
.foot .ig{display:inline-flex;align-items:center;color:var(--ink)}
.foot .ig:hover{color:var(--neon)}
.foot nav{align-items:center}
.more b a{text-decoration:none}
.more b a:hover{color:var(--neon)}
.prose a,.phero .lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--neon);text-underline-offset:3px}
.prose a:hover,.phero .lead a:hover{color:var(--neon)}
/* v7: eigene Clips im CI-Look */
.ph .pi video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease),transform 1s var(--ease)}
.vd{cursor:pointer}
.vd.pl .pi video,.vd.on .pi video{opacity:1}
@media (hover:hover){.vd:hover .pi video{opacity:1}}
.vd .vp{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;background:rgba(0,0,0,.62);color:var(--neon);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(204,255,0,.4);pointer-events:none;transition:opacity .4s var(--ease)}
.vd .vp i{width:0;height:0;border-left:8px solid var(--neon);border-top:5px solid transparent;border-bottom:5px solid transparent}
.vd.pl .vp,.vd.on .vp{opacity:0}
.vd:focus-visible{outline:2px solid var(--neon);outline-offset:4px}
.svc-m{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:clamp(14px,2vw,24px);margin-top:30px;align-items:start;max-width:860px}
.svc-m .ph .pi{max-width:100%}
.more-media{margin-top:clamp(36px,5vw,64px)}
.events{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.events li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:6px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.events b{font-weight:600}
.events a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--neon);text-underline-offset:3px}
@media (max-width:640px){.events li{grid-template-columns:minmax(0,1fr)}}
.portrait-w .sh{margin-top:clamp(28px,4vw,48px)}
.vid-tip{margin:-14px 0 28px;color:var(--mute)}
.collage .ph .pi,.gallery .ph .pi{max-width:min(var(--w),calc(min(74vh,720px) * var(--ar,1)))}
.svc-m .ph .pi{max-width:min(100%,calc(420px * var(--ar,1)))}
/* ===== v8: ruhige Bildreihen, Textabschnitte, Menü, Eindrücke ===== */
.story{display:grid;gap:clamp(28px,4.5vw,72px)}
.mrow{--g:clamp(12px,1.6vw,24px);display:flex;gap:var(--g);justify-content:center;align-items:flex-start}
.mrow>.ph{flex:none;margin:0;width:calc((100% - (var(--n) - 1) * var(--g)) * var(--ar) / var(--sum));max-width:calc(min(var(--rh),78vh) * var(--ar))}
.mrow>.ph .pi{max-width:none!important;width:100%}
.ph figcaption.cr{justify-content:flex-end;font-size:.68rem}
.mtext{max-width:58ch;margin-inline:auto;width:100%;padding-left:22px;border-left:1px solid var(--neon)}
.mtext p{margin:0;font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.6;color:#D3D8CC}
.mtext a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--neon);text-underline-offset:3px}
.svc-b .story{margin-top:30px;gap:clamp(20px,3vw,36px)}
.svc-b .mtext{margin-inline:0}
.svc-b .mrow{justify-content:flex-start}
@media (max-width:640px){
  .mrow{flex-direction:column;align-items:center}
  .mrow>.ph{width:100%;max-width:calc(min(var(--rh),72vh) * var(--ar))}
  .svc-b .mrow{align-items:flex-start}
}
.igw{display:inline-flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.igw .mute{color:var(--mute)}
/* YouTube-Kacheln mit eigenem Standbild */
.yt::before{content:"";position:absolute;inset:0;background:var(--ph) center/cover no-repeat;opacity:.55;pointer-events:none}
.yt.on::before{display:none}
.yt>*{position:relative}
.yt p a{color:var(--neon)}
a.yt-btn{text-decoration:none}
/* Kontakt mit Hintergrund-Clip */
.contact-full{position:relative}
.contact-full::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 70%),linear-gradient(transparent 60%,#000);pointer-events:none}
.contact-full>.wrap{position:relative;z-index:1}
html:not(.gl) .contact-full[style]{background:var(--ph) center/cover no-repeat}
/* Menü-Knopf (Handy) */
.menu-b{all:unset;display:none;cursor:pointer;color:var(--ink);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:10px;padding:8px 0}
.menu-b i{position:relative;width:24px;height:16px;display:block}
.menu-b i b{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s,top .3s var(--ease)}
.menu-b i b:nth-child(1){top:0}.menu-b i b:nth-child(2){top:7px}.menu-b i b:nth-child(3){top:14px}
.top.open .menu-b i b:nth-child(1){top:7px;transform:rotate(45deg)}.top.open .menu-b i b:nth-child(2){opacity:0}.top.open .menu-b i b:nth-child(3){top:7px;transform:rotate(-45deg)}
@media (max-width:1024px){
  .menu-b{display:inline-flex}
  .nav{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:-1;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:90px max(24px,env(safe-area-inset-left,0px)) 40px;background:#000;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
  .nav a{font:800 clamp(1.8rem,9vw,3rem)/1.05 var(--fd);letter-spacing:-.02em;text-transform:lowercase;text-shadow:none}
  .nav .lang{font:inherit;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
  .nav .opt{display:block}
  .top.open .nav{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
  .top.open{background:transparent}
  .menu-open body{overflow:hidden}
  .top.open .brand{opacity:1}
}
/* Eindrücke */
.imppage .foot{display:none}
.imp{position:relative;height:100svh;overflow:hidden;background:#000}
.duo-svg{position:absolute;width:0;height:0}
.imp-track{list-style:none;margin:0;padding:0;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.imp-track::-webkit-scrollbar{display:none}
.imp-s{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:76px max(16px,env(safe-area-inset-left,0px)) 18px}
.imp-m{position:relative;align-self:center;width:min(100%,calc((100svh - 190px) * var(--ar)),calc(var(--h) * 1.25 * var(--ar)));height:auto;aspect-ratio:var(--ar);cursor:pointer;
  -webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}
@supports not (aspect-ratio:1){.imp-m{width:100%}}
.imp-m img,.imp-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .7s var(--ease)}
.imp-m .c{opacity:0}
.imp-s.is-vid.act .imp-m video{opacity:1;filter:url(#lvduo)}
.imp-s.is-vid.act .imp-m .d{opacity:0}
@media (hover:hover){.imp-m:hover .c{opacity:1}.imp-s.is-vid .imp-m:hover video{filter:none}}
.imp-s.col .imp-m .c{opacity:1}
.imp-s.col .imp-m video{filter:none!important}
.imp-cap{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;align-items:baseline;color:var(--mute);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding-top:14px;max-width:900px;text-align:center}
.imp-cap .n{color:var(--neon)}
.imp-cap a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--neon);text-underline-offset:3px}
.imp-p,.imp-n{all:unset;position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;display:grid;place-items:center;cursor:pointer;color:var(--neon);font-size:22px;border:1px solid rgba(204,255,0,.35);background:rgba(0,0,0,.55);transition:opacity .3s}
.imp-p{left:max(14px,env(safe-area-inset-left,0px))}.imp-n{right:max(14px,env(safe-area-inset-right,0px))}
.imp-p:disabled,.imp-n:disabled{opacity:.15;cursor:default}
.imp-p:focus-visible,.imp-n:focus-visible{outline:2px solid var(--neon)}
.imp-hint{position:absolute;left:0;right:0;top:74px;text-align:center;color:var(--mute);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;z-index:2;padding-inline:16px}
@media (max-width:700px){.imp-p,.imp-n{display:none}.imp-s{padding-top:64px}.imp-hint{top:62px}}
.yt::before{opacity:.35}
@media (max-width:640px){.yt{aspect-ratio:auto;min-height:240px;gap:18px;align-content:center}.yt.on{aspect-ratio:16/9;min-height:0}.yt p{position:static;font-size:.66rem}}
/* v9 */
.story{gap:clamp(40px,6vw,104px)}
.ph figcaption.cr,.ph figcaption.cr a,.imp-cap .cr,.imp-cap .cr a{color:rgba(138,143,128,.75);text-decoration:none}
.ph figcaption.cr{font-size:.62rem;letter-spacing:.08em}
.ph figcaption.cr a:hover,.imp-cap .cr a:hover{color:var(--ink)}
.ph.mid .pi img.c,.vd.mid .pi video{opacity:1}
.ph figcaption.cr{justify-content:flex-end;gap:4px 14px}
@media (hover:none){.phero .hint{display:none}}