/* Layout: Schwarz-Weiß im Wechsel wie Negativ und Abzug. Oben ein interaktiver 3D-Filmstreifen,
   danach ein Projektindex mit Bildvorschau am Cursor, Leistungen, Über mich, Kontakt. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --black:#0a0a0a;
  --white:#f3f1ed;
  --gray:#8a8783;
  --gray-l:#6b6965;
  --line-d:#242424;
  --line-l:#d9d6d0;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img,video,canvas{display:block;max-width:100%}
.wrap{padding-left:max(24px, env(safe-area-inset-left, 0px));padding-right:max(24px, env(safe-area-inset-right, 0px))}
.inner{max-width:1360px;margin:0 auto}
.lbl{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3{margin:0;font-weight:700;line-height:.92;text-wrap:balance}
.tall{font-stretch:76%;font-weight:600;text-transform:uppercase;letter-spacing:.005em}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Flächen: dunkel und hell */
.dark{background:var(--black);color:var(--white);position:relative}
.light{background:var(--white);color:var(--black);position:relative;color-scheme:light}
.dark .mute{color:var(--gray)}
.light .mute{color:var(--gray-l)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");z-index:1}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 20px}40%{background-position:30px -50px}60%{background-position:-60px -10px}80%{background-position:50px 40px}100%{background-position:0 0}}

/* Kopfzeile: invertiert sich über hellen und dunklen Flächen */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);mix-blend-mode:difference;color:#fff;pointer-events:none}
.top .inner{display:flex;justify-content:space-between;align-items:center;gap:20px;height:clamp(76px,8vw,108px);max-width:none}
.top a{pointer-events:auto}
.top .logo img{height:clamp(34px,3.5vw,56px);width:auto}
.top nav{display:flex;gap:clamp(18px,2.4vw,36px)}
.top nav a{white-space:nowrap;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;position:relative}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.top nav a:hover::after,.top nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
@media (max-width:700px){.top nav .opt{display:none}.top nav{gap:14px}.top nav a{font-size:11px;letter-spacing:.1em}}

/* Hero: 3D-Filmstreifen */
.reel{height:100svh;min-height:600px;max-height:1100px;overflow:hidden;touch-action:pan-y}
.reel canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;z-index:0}
.reel.dragging canvas{cursor:grabbing}
.reel .hud{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:calc(clamp(24px,3vw,40px) + env(safe-area-inset-bottom,0px));pointer-events:none}
.reel .hud .inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;max-width:none}
.reel .now{text-align:center;pointer-events:auto}
.reel .now a{text-decoration:none;display:block}
.reel .now h2{font-size:clamp(44px,7.4vw,124px);transition:opacity .35s}
.reel .now p{margin:10px 0 0;transition:opacity .35s}
.reel .now.swap h2,.reel .now.swap p{opacity:0}
.reel .side{display:grid;gap:6px;align-self:end}
.reel .side.r{text-align:right;justify-items:end}
.reel .count{font-variant-numeric:tabular-nums}
.drag-hint{display:inline-flex;gap:10px;align-items:center}
.drag-hint i{width:28px;height:1px;background:currentColor;display:inline-block;animation:hint 2.4s var(--ease) infinite}
@keyframes hint{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
.fallback{position:absolute;inset:0;display:flex;align-items:center;overflow-x:auto;gap:18px;padding-inline:24px;scroll-snap-type:x mandatory}
.fallback a{flex:0 0 min(78vw,720px);aspect-ratio:16/9;scroll-snap-align:center;border-block:14px solid #000;outline:1px solid #222}
.fallback img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .reel .hud .inner{grid-template-columns:1fr 1fr}
  .reel .now{grid-column:1 / -1;order:-1}
  .reel .side.l{display:none}
  .reel .side.r{grid-column:1 / -1;justify-items:center;text-align:center}
}


/* Startbereich: Clips im Vollbild */
.hero-v{height:100svh;min-height:560px;overflow:hidden;color:#fff}
.hero-v .media{position:absolute;inset:0}
.hero-v .media > img,.hero-v .media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero-v .media > .on{opacity:1}
.hero-v .media > img.on{animation:kb 7s linear both}
@keyframes kb{from{transform:scale(1.1) translate3d(1%,0,0)}to{transform:scale(1) translate3d(0,0,0)}}
.hero-v .shade{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55) 75%),linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,.6));z-index:1}
.hero-v .center{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:clamp(16px,2vw,28px);text-align:center}
.hero-v h1{overflow:hidden}
.hero-v h1 img{width:min(70vw,880px);height:auto;transition:opacity 1.8s ease .2s,transform 1.8s var(--ease) .2s}
.hero-v .sub{transition:opacity 1.4s ease 1.2s}
.fx:not(.loaded) .hero-v .sub{opacity:0}
.fx:not(.loaded) .hero-v h1 img{opacity:0;transform:translateY(10px)}
.hero-v .center [data-chars] .ch{--d:900ms}
.hero-v .center .lbl{opacity:.85}
.hero-v .bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.hero-v .bottom a{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.hero-v .dot{width:8px;height:8px;border-radius:50%;background:#e5322b;animation:rec 1.6s steps(2) infinite}
@keyframes rec{50%{opacity:.25}}
.hero-v .down span{display:inline-block;animation:bob 2s var(--ease) infinite}
@keyframes bob{50%{transform:translateY(5px)}}
.top .logo{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.at-top .top .logo{opacity:0;transform:translateY(-8px);pointer-events:none}
@media (max-width:640px){.hero-v .center .lbl{font-size:10.5px;max-width:30ch;line-height:1.7}}

/* Einleitung */
.intro{padding-block:clamp(110px,14vw,220px) clamp(90px,11vw,170px)}
.intro h1,.intro h2{font-size:clamp(48px,8.4vw,150px)}
.intro .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 80px;margin-top:clamp(40px,5vw,80px);align-items:start}
.intro .row p{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.4;max-width:34ch}
.intro .row .mute{font-size:17px;max-width:42ch}
@media (max-width:820px){.intro .row{grid-template-columns:1fr}}
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line > span{display:block;transform:translateY(102%);transition:transform 1.5s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
.in .line > span,.line.in > span{transform:none}

.btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:16px 26px;border:1px solid currentColor;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:currentColor;transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.light .btn:hover{color:var(--white)}
.dark .btn:hover{color:var(--black)}
.light .btn:hover::before{background:var(--black);transform:none}
.dark .btn:hover::before{background:var(--white);transform:none}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* Projektindex */
.index{padding-block:0 clamp(110px,13vw,200px)}
.index .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.index .head h2{font-size:clamp(56px,9vw,150px)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:inherit;background:transparent;border:1px solid var(--line-l);border-radius:999px;padding:9px 16px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filters button:hover{border-color:var(--black)}
.filters button[aria-pressed="true"]{background:var(--black);color:var(--white);border-color:var(--black)}
/* Arbeiten: breite Banner */
.bands{padding-block:clamp(110px,13vw,190px) clamp(90px,10vw,150px)}
.bands .head .inner{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px);position:relative;z-index:2}
.bands .head h2{font-size:clamp(56px,9vw,150px)}
.dark .filters button{border-color:var(--line-d);color:var(--gray)}
.dark .filters button:hover{border-color:var(--white);color:var(--white)}
.dark .filters button[aria-pressed="true"]{background:var(--white);color:var(--black);border-color:var(--white)}
.band-list .inner{display:grid;gap:clamp(10px,1.2vw,16px);position:relative;z-index:2}
.band{position:relative;display:grid;place-items:center;aspect-ratio:3.1/1;max-width:100%;overflow:hidden;text-decoration:none;color:#fff;background:var(--black)}
.fx .band:not(.in) .bg{opacity:0;transform:translate3d(0,var(--py,0px),0) scale(1.04)}
.band .bg{position:absolute;inset:-12% 0;transform:translate3d(0,var(--py,0px),0);transition:opacity 1.6s ease, transform 1.6s var(--ease)}
.band .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.85);transform:scale(1.04);transition:filter .8s var(--ease),transform 1.6s var(--ease)}
.band:hover .bg img,.band:focus-visible .bg img{filter:brightness(.82) saturate(1);transform:scale(1)}
.band .txt{position:relative;z-index:1;transition:opacity 1.4s ease .3s,transform 1.4s var(--ease) .3s;display:grid;justify-items:center;gap:10px;text-align:center;padding:20px}
.band h3{font-size:clamp(40px,6vw,108px)}
.band .lbl{opacity:.9}
.band .sub{opacity:.7}
.band .go{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px);z-index:1;display:inline-flex;gap:10px;align-items:center;opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.band .go::after{content:"→"}
.band:hover .go,.band:focus-visible .go{opacity:1;transform:none}
.fx .band:not(.in) .txt{opacity:0;transform:translateY(14px)}
.band[hidden]{display:none}
@media (max-width:760px){.band{aspect-ratio:16/10}.band .go{opacity:1;transform:none}}

/* Laufband */
.ticker{overflow:hidden;padding-block:clamp(26px,3vw,44px);border-block:1px solid var(--line-l)}
.tk{display:flex;align-items:center;gap:clamp(24px,3vw,50px);width:max-content;transform:translate3d(var(--tx,0px),0,0);will-change:transform}
.tk span{font-size:clamp(44px,7vw,120px);font-weight:750;font-stretch:68%;text-transform:uppercase;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--black)}
.tk span:nth-of-type(odd){color:var(--black);-webkit-text-stroke:0}
.tk i{font-style:normal;font-size:clamp(26px,3vw,48px);color:var(--black)}

/* Schrift: Buchstaben steigen auf */
[data-chars] .ch{display:inline-block;transform:translateY(105%) rotate(6deg);opacity:0;transition:transform .9s var(--ease),opacity .6s ease;transition-delay:calc(var(--i) * 28ms + var(--d,0ms))}
[data-chars] .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
[data-chars].in .ch,.in [data-chars] .ch{transform:none;opacity:1}
/* Absatz: Wörter werden beim Scrollen dunkel */
[data-words] .w{opacity:.14;transition:opacity .25s linear}
[data-words] .w.on{opacity:1}

/* Leistungen auf heller Fläche */

/* Leistungen */
.services{padding-block:clamp(110px,13vw,200px)}
.services .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:50px clamp(40px,6vw,110px);align-items:start}
.svc-side{position:sticky;top:clamp(110px,12vw,150px);display:grid;gap:22px;align-content:start}
.svc-side h2{font-size:clamp(52px,6.4vw,112px);margin:0}
.svc-side p{margin:0;font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--gray-l);max-width:32ch}
.svc-side .btns{margin-top:8px}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--black)}
.svc-row{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px 20px;padding:clamp(28px,3vw,42px) 0}
.svc-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-l);transform-origin:left;transition:transform 1.2s cubic-bezier(.7,0,.2,1) .15s}
.fx .svc-row.rv:not(.in)::after{transform:scaleX(0)}
.svc-row .no{padding-top:.9em;color:var(--gray-l);font-variant-numeric:tabular-nums}
.svc-row h3{margin:0;font-size:clamp(34px,3.6vw,60px);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svc-row p{margin:14px 0 0;max-width:46ch;color:var(--gray-l);font-size:16.5px;line-height:1.55}
.svc-row .tags{grid-column:2;margin-top:12px;letter-spacing:.12em}
.svc-row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--black);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.svc-row:hover::before{width:100%}
.svc-row:hover h3{transform:translateX(10px)}
.svc-row.extra h3{color:var(--gray-l)}
@media (max-width:900px){.services .inner{grid-template-columns:1fr}.svc-side{position:static}}
@media (max-width:520px){.svc-row{grid-template-columns:1fr}.svc-row .no{padding-top:0}.svc-row .tags{grid-column:1}}
@media (prefers-reduced-motion:reduce){.svc-row::after,.svc-row h3,.svc-row::before{transition:none}.fx .svc-row.rv:not(.in)::after{transform:none}}

/* Über mich */
.about{padding-block:clamp(110px,13vw,200px)}
.about .inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,110px);align-items:end}
.about .pic{aspect-ratio:4/5;max-width:100%;overflow:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.about .pic.in{clip-path:inset(0)}
.about .pic img{width:100%;height:115%;object-fit:cover;object-position:62% 50%;transform:translateY(var(--py,0px))}
.about h2{font-size:clamp(46px,6vw,104px);margin:18px 0 30px}
.about p{margin:0 0 16px;max-width:46ch}
@media (max-width:860px){.about .inner{grid-template-columns:1fr}.about .pic{aspect-ratio:4/3}}

/* Kontakt */
.contact{padding-block:clamp(120px,14vw,220px) clamp(60px,7vw,100px);overflow:hidden}
.contact .inner{position:relative;z-index:2}
.contact h2{font-size:clamp(64px,15vw,280px);line-height:.86}
.contact .mail{display:inline-block;margin-top:clamp(30px,4vw,60px);font-size:clamp(24px,3.6vw,58px);font-weight:500;font-stretch:90%;text-decoration:none;word-break:break-word;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .7s var(--ease)}
.contact .mail:hover{background-size:100% 2px}
.contact .meta{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:40px}
.contact .meta a,.contact .meta span,.contact .meta button{color:var(--gray);text-decoration:none;font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;transition:color .3s}
.contact .meta span{cursor:auto}
.contact .meta a:hover,.contact .meta button:hover{color:var(--white)}

footer{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-d);position:relative;z-index:2}
footer .inner{display:flex;justify-content:space-between;align-items:center;gap:14px 30px;flex-wrap:wrap}
footer img{height:24px;width:auto;opacity:.7}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer a{color:var(--gray);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
footer a:hover{color:var(--white)}

/* Projektseite */
.p-hero{padding-block:calc(clamp(76px,8vw,108px) + 30px) clamp(40px,5vw,70px)}
.p-hero .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin-bottom:20px;position:relative;z-index:2}
.p-hero h1{font-size:clamp(56px,11vw,200px);position:relative;z-index:2}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;overflow:hidden;z-index:2}
.player > img{width:100%;height:100%;object-fit:cover;filter:brightness(.6);transform:scale(1.04);transition:transform 1.6s var(--ease),filter .6s}
.player:hover > img{transform:scale(1);filter:brightness(.72)}
.player button{position:absolute;inset:0;width:100%;display:grid;place-items:center;align-content:center;gap:18px;background:transparent;border:0;color:#fff;cursor:pointer;font:inherit}
.player .play{display:grid;place-items:center;width:clamp(96px,10vw,140px);aspect-ratio:1;border-radius:50%;background:#fff;color:#000;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:transform .5s var(--ease)}
.player button:hover .play{transform:scale(1.1)}
.player .hint{font-size:13px;color:rgba(255,255,255,.75);max-width:44ch;text-align:center;padding-inline:16px}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:560px){.player .hint{display:none}}
.p-ext{margin-top:22px;position:relative;z-index:2}
.p-ext a{color:var(--gray);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.p-ext a:hover{color:var(--white)}
.credits{padding-block:clamp(90px,10vw,150px)}
.credits h2{font-size:clamp(48px,7vw,110px);margin-bottom:clamp(32px,4vw,56px)}
.credits dl{margin:0}
.credits .key{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));border-top:1px solid var(--black)}
.credits .key div{padding:18px 20px 20px 0;border-bottom:1px solid var(--line-l)}
.credits dt{overflow-wrap:anywhere;hyphens:auto;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-l)}
.credits .key dd{margin:6px 0 0;font-size:clamp(17px,1.4vw,20px);font-weight:500;line-height:1.4}
.credits .more{margin-top:clamp(36px,4vw,56px);columns:3 240px;column-gap:40px}
.credits .more div{break-inside:avoid;padding:0 0 14px}
.credits .more dt{font-size:10.5px}
.credits .more dd{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:#333}
.credits .cast{margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid var(--line-l);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:14px 40px}
.credits .cast ul{list-style:none;margin:0;padding:0;columns:3 200px;column-gap:40px}
.credits .cast li{font-size:14.5px;line-height:1.45;padding-bottom:6px;break-inside:avoid}
.credits .note{margin-top:32px;font-size:14px;color:var(--gray-l)}
@media (max-width:700px){.credits .cast{grid-template-columns:1fr}.credits .more{columns:2 150px;column-gap:24px}}
.stills{--pad:max(24px,calc((100% - 1360px)/2));padding-block:clamp(80px,9vw,140px);overflow:hidden}
.stills .head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,3.5vw,48px)}
.stills h2{font-size:clamp(48px,7vw,110px);margin:0}
.stills .ctrl{display:flex;align-items:center;gap:10px}
.stills .count{margin-right:14px;font-variant-numeric:tabular-nums}
.stills .ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-d);background:none;color:inherit;display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,opacity .3s}
.stills .ctrl button:hover{background:var(--white);color:var(--black)}
.stills .ctrl button:disabled{opacity:.3;pointer-events:none}
.stills .prev svg{transform:scaleX(-1)}
.stills .strip{display:flex;gap:clamp(10px,1.2vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-inline:var(--pad);scroll-padding-inline:var(--pad);outline:none}
.stills .strip::-webkit-scrollbar{display:none}
.stills figure{margin:0;flex:0 0 auto;scroll-snap-align:start;height:min(68vh,44vw);overflow:hidden;background:#151515}
.stills .strip::after{content:"";flex:0 0 calc(var(--pad) - clamp(10px,1.2vw,18px))}
.stills img{width:auto;height:100%;display:block;opacity:.55;transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);transform:scale(1.03)}
.stills figure.on img{opacity:1;transform:none}
@media (max-width:820px){.stills figure{height:auto;width:86vw}.stills img{width:100%;height:auto}.stills .ctrl button{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.stills img{transition:none;transform:none}.stills .strip{scroll-behavior:auto}}
.next{display:block;text-decoration:none;padding-block:clamp(90px,11vw,160px);overflow:hidden;position:relative}
.next .bg{position:absolute;inset:0;z-index:0;opacity:.35;transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.next .bg img{width:100%;height:100%;object-fit:cover}
.next:hover .bg{opacity:.6;transform:scale(1.04)}
.next .inner{position:relative;z-index:2}
.next h2{font-size:clamp(56px,11vw,200px);margin-top:16px}

/* Textseiten */
.text-page{padding-block:calc(clamp(76px,8vw,108px) + 60px) clamp(100px,12vw,160px);min-height:70vh}
.text-page h1{font-size:clamp(56px,10vw,170px);margin-bottom:clamp(44px,6vw,80px)}
.prose{max-width:680px}
.prose h2{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:46px 0 10px;line-height:1.4}
.prose p,.prose li{font-size:18px}
.prose .lead{font-size:clamp(22px,2.2vw,30px);line-height:1.35;font-weight:500}
.prose .note{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a0522d}
.about-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,100px);align-items:start}
.about-page .pic{position:sticky;top:130px;aspect-ratio:4/5;max-width:100%;overflow:hidden}
.about-page .pic img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
@media (max-width:860px){.about-page{grid-template-columns:1fr}.about-page .pic{position:relative;top:0;aspect-ratio:3/2}}

/* Einblenden */
.rv{transition:opacity 1.4s ease, transform 1.4s var(--ease)}
.fx .rv:not(.in){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-chars] .ch{transform:none;opacity:1}
  [data-words] .w{opacity:1}
  .fx .band:not(.in) .bg{clip-path:none}
  .fx .rv:not(.in){opacity:1;transform:none}
  .line > span{transform:none}
  .about .pic{clip-path:none}
}


/* Startbereich: beim Scrollen schiebt sich der Inhalt darüber */
.hero-v{position:sticky;top:0;--hp:0}
.hero-v ~ section,.hero-v ~ footer{position:relative;z-index:3}
.hero-v .media{transform:scale(calc(1 + var(--hp) * .08));transform-origin:50% 40%}
.hero-v::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--hp) * .65);z-index:3;pointer-events:none}
.hero-v .center{transform:translateY(calc(var(--hp) * -14vh)) scale(calc(1 - var(--hp) * .16));opacity:calc(1 - var(--hp) * 1.4);will-change:transform,opacity}
.hero-v .bottom{opacity:calc(1 - var(--hp) * 3)}
.intro{box-shadow:0 -30px 60px rgba(0,0,0,.25)}
@media (prefers-reduced-motion:reduce){.hero-v{position:relative}.intro{box-shadow:none}}

.contact .c-note{margin:clamp(18px,2vw,28px) 0 0;color:var(--gray);font-size:clamp(17px,1.4vw,20px)}

.set-wide{margin:0 0 clamp(50px,6vw,100px);aspect-ratio:2.1/1;overflow:hidden;background:#ddd}
.set-wide img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.about-page .pic{aspect-ratio:2/3}
@media (max-width:640px){.set-wide{aspect-ratio:4/3}.set-wide img{object-position:65% 40%}}
.line{padding-top:.14em;margin-top:-.14em}
@media (max-width:860px){.about-page .pic{aspect-ratio:1/1}}
.prose h3{font-size:15px;font-weight:600;line-height:1.3;margin:22px 0 6px;text-transform:none;letter-spacing:0}.prose ul{margin:0 0 12px;padding-left:1.2em}.prose a{word-break:break-all}

.hero-v .sub br.m{display:none}
@media (max-width:640px){.hero-v .sub br.m{display:inline}.hero-v .sub .sep{display:none}.hero-v .center .lbl{max-width:none}}

/* Kopfzeile: Logo nie verzerren, mobil kompakter */
.top .logo{flex:0 0 auto;display:block;line-height:0}
.top .logo img{max-width:none;aspect-ratio:1200/248;object-fit:contain}
.top nav{flex:0 1 auto;min-width:0}
@media (max-width:700px){
  .top .inner{height:58px;gap:12px}
  .top .logo img{height:21px}
  .top nav{gap:14px}
  .top nav a{font-size:10.5px;letter-spacing:.09em}
  .top nav a::after{bottom:-4px}
  .p-hero{padding-top:calc(58px + 28px)}
  .text-page{padding-top:calc(58px + 40px)}
}
@media (max-width:360px){
  .top .logo img{height:18px}
  .top nav{gap:10px}
  .top nav a{font-size:9.5px;letter-spacing:.06em}
}
footer img{max-width:none;flex:0 0 auto;aspect-ratio:1200/248}.hero-v h1 img{aspect-ratio:1200/248;height:auto}

/* Kontakt: drei Spalten */
.contact .c-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:36px 50px;margin-top:clamp(40px,5vw,80px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line-d)}
.contact .c-col{display:grid;gap:14px;align-content:start}
.contact .c-col p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--white)}
.contact .c-col p a{color:inherit;text-decoration:none;transition:color .3s}
.contact .c-col p a:hover{color:var(--gray)}
.contact .mail{margin-top:0;font-size:clamp(24px,2.8vw,44px)}
.contact .tel{color:var(--white);text-decoration:none;font-size:clamp(17px,1.4vw,20px)}
.contact .tel:hover{color:var(--gray)}
@media (max-width:860px){.contact .c-grid{grid-template-columns:1fr 1fr}.contact .c-col:first-child{grid-column:1/-1}}
@media (max-width:480px){.contact .c-grid{grid-template-columns:1fr}}
footer .inner{align-items:center}
footer .copy{color:var(--gray);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-right:auto}
footer .totop{color:var(--gray);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
footer .totop:hover{color:var(--white)}
.hero-v .cnt{font-variant-numeric:tabular-nums;opacity:.7;margin-right:14px}

/* Cursor-Punkt (nur mit Maus) */
.cdot{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;opacity:0;transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) scale(var(--cs,1));transition:opacity .3s ease,width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.cdot.on{opacity:1}
.cdot.down{--cs:.7}
@media (hover:hover) and (pointer:fine){html.has-cdot,html.has-cdot a,html.has-cdot button{cursor:none}}

/* Über mich auf der Startseite: Steckbrief */
.about .about-txt h2{margin:14px 0 clamp(26px,3vw,40px)}
.about .facts{margin:0 0 34px;border-top:1px solid var(--black)}
.about .facts div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line-l)}
.about .facts dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-l);padding-top:.35em}
.about .facts dd{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
@media (max-width:520px){.about .facts div{grid-template-columns:1fr;gap:4px}.about .facts dt{padding-top:0}}

/* Handy: ruhigere Größen, weniger Leerraum */
@media (max-width:640px){
  body{font-size:16px}
  .intro{padding-block:72px 64px}
  .intro h1,.intro h2{font-size:clamp(34px,10vw,42px)}
  .intro .row{margin-top:28px;gap:18px}
  .intro .row p{font-size:17px}
  .intro .row .mute{font-size:15px}
  .bands{padding-block:72px 56px}
  .bands .head h2,.svc-side h2,.stills h2,.credits h2{font-size:clamp(34px,10vw,42px)}
  .band h3{font-size:clamp(26px,8vw,34px)}
  .band .lbl{font-size:10px}
  .services{padding-block:72px}
  .svc-side{gap:16px}
  .svc-row{padding:20px 0}
  .svc-row h3{font-size:clamp(22px,6.6vw,28px)}
  .svc-row .tags{margin-top:8px;font-size:10px}
  .about{padding-block:72px}
  .about h2,.about .about-txt h2{font-size:clamp(34px,10vw,42px);margin:10px 0 22px}
  .about .facts dd{font-size:15px}
  .contact{padding-block:80px 48px}
  .contact h2{font-size:clamp(40px,13vw,54px)}
  .contact .c-grid{margin-top:28px;gap:26px}
  .contact .mail{font-size:clamp(19px,5.6vw,24px)}
  .contact .c-col p,.contact .tel{font-size:16px}
  .p-hero{padding-bottom:36px}
  .p-hero h1{font-size:clamp(36px,11vw,48px)}
  .credits{padding-block:64px}
  .credits h2{margin-bottom:22px}
  .credits .key dd{font-size:16px}
  .credits .more dd,.credits .cast li{font-size:14px}
  .stills{padding-block:60px}
  .stills .head{margin-bottom:20px}
  .next{padding-block:64px}
  .next h2{font-size:clamp(34px,10vw,44px)}
  .text-page h1{font-size:clamp(38px,11vw,48px);margin-bottom:32px}
  .prose p,.prose li{font-size:16px}
  .btn{padding:14px 20px;font-size:11px}
  .lbl{font-size:10.5px}
  .hero-v h1 img{width:min(78vw,880px)}
}

/* Bilder nicht per Rechtsklick, Ziehen oder langem Tippen speichern */
img,video{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.band .bg img,.stills img,.next .bg img,.svc .ph img,.hero-v .media > img,.about .pic img,.about-page .pic img,.set-wide img,.player > img{pointer-events:none}

/* Handy: Arbeiten kompakter, Filter in einer Zeile, Footer schlanker */
@media (max-width:640px){
  .bands .head .inner{gap:14px}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-24px;padding-inline:24px;width:calc(100% + 48px);gap:6px}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:0 0 auto;font-size:10px;letter-spacing:.1em;padding:7px 12px}
  .band-list .inner{gap:8px}
  .band{aspect-ratio:2.5/1}
  .band .txt{gap:4px;padding:12px}
  .band h3{font-size:clamp(22px,6.8vw,28px)}
  .band .txt .lbl{font-size:9px;letter-spacing:.12em}
  .band .txt .sub{display:none}
  .band .go{display:none}
  footer{padding-block:20px calc(20px + env(safe-area-inset-bottom,0px))}
  footer .inner{display:grid;grid-template-columns:1fr auto;gap:14px 16px;align-items:center}
  footer img{height:18px}
  footer .copy{grid-column:1/-1;grid-row:3;font-size:10px;letter-spacing:.12em;margin:0}
  footer nav{gap:16px}
  footer nav a,footer .totop{font-size:10px;letter-spacing:.12em}
  footer .totop{grid-column:2;grid-row:1}
  footer nav{grid-column:1/-1;grid-row:2}
}

/* Kontakt: E-Mail und Telefon in der normalen Schrift der Seite */
.contact .mail,.contact .tel{font-family:var(--sans);font-stretch:100%;font-weight:500;letter-spacing:0;color:var(--white)}
.contact .c-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:860px){.contact .c-grid{grid-template-columns:1fr}}
/* Startbild unten: immer eine Zeile */
.hero-v .bottom{flex-wrap:nowrap}
.hero-v .bottom a{white-space:nowrap;min-width:0}
.hero-v .bottom [data-slide-link]{flex:1 1 auto;overflow:hidden}
.hero-v .bottom [data-slide-title]{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hero-v .bottom .down{flex:0 0 auto}
.hero-v .dot{flex:0 0 auto}
.hero-v .cnt{flex:0 0 auto}
@media (max-width:640px){.hero-v .bottom{gap:12px}.hero-v .bottom .lbl{font-size:9.5px;letter-spacing:.1em}.hero-v .cnt{margin-right:4px}.hero-v .bottom a{gap:8px}}
@media (max-width:640px){.hero-v .down .w{display:none}}