/* stobbe.cc · Prototyp "Film" – die Seite als durchgehender Film mit Timeline */
@font-face{font-family:"Signifier";src:url("assets/fonts/signifier-extralight.woff2") format("woff2");font-weight:200 300;font-style:normal;font-display:swap}
@font-face{font-family:"Signifier";src:url("assets/fonts/signifier-light-italic.woff2") format("woff2");font-weight:200 600;font-style:italic;font-display:swap}
@font-face{font-family:"Söhne";src:url("assets/fonts/soehne-buch.woff2") format("woff2");font-weight:200 400;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("assets/fonts/soehne-kraftig.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}

:root{
  --schwarz:#000; --nacht:#0a0b0b; --papier:#ece6da; --asche:#a39e95; --messing:#c2a574; --linie:rgba(236,230,218,.14);
  --serif:"Signifier",Georgia,serif; --sans:"Söhne","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --blur:0; --shade:.35;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--papier);font:400 1.0625rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:50;background:var(--papier);color:var(--nacht);padding:.5rem 1rem}
.nw{white-space:nowrap}

/* Bühne: Porträt, Schärfentiefe über --blur */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--nacht)}
.stage__img{position:absolute;inset:-2%;background-size:cover;background-position:center;
  background-image:image-set(url("assets/img/bg-1280.avif") type("image/avif"),url("assets/img/bg-1280.webp") type("image/webp"),url("assets/img/bg-1280.jpg") type("image/jpeg"))}
@media (min-width:900px){.stage__img{background-image:image-set(url("assets/img/bg-2560.avif") type("image/avif"),url("assets/img/bg-2560.webp") type("image/webp"),url("assets/img/bg-2560.jpg") type("image/jpeg"))}}
@media (max-aspect-ratio:5/4){.stage__img{background-position:42% center}}
.stage__img--soft{filter:blur(28px) saturate(.7) brightness(.7);opacity:var(--blur);transform:scale(1.06);will-change:opacity}
.stage__shade{position:absolute;inset:0;background:var(--nacht);opacity:var(--shade)}
body.is-end .stage__img{background-image:image-set(url("assets/img/bg-kontakt-2560.avif") type("image/avif"),url("assets/img/bg-kontakt-2560.webp") type("image/webp"),url("assets/img/bg-kontakt-2560.jpg") type("image/jpeg"))}

/* Kopf */
.bar{position:fixed;top:0;left:0;z-index:20;padding:1.4rem var(--gutter)}
.bar__mark{display:block}
.logo{display:block;height:2rem;width:auto;fill:var(--papier);transition:opacity .3s}
.bar__mark:hover .logo{opacity:.7}

/* Szenen */
main{position:relative;z-index:1}
.scene{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gutter);position:relative}
.tc-label{font:500 .72rem/1 var(--sans);letter-spacing:.22em;color:var(--messing);margin:0 0 1.5rem}

@media (min-width:901px){.scene{padding-right:calc(var(--gutter) + 8rem)}}

/* 01 Vorspann */
.scene--open{justify-content:flex-end;padding-bottom:12svh}
.open__name{margin:0;font:200 clamp(4rem,1rem + 10vw,12rem)/.9 var(--serif);letter-spacing:-.02em}
.open__name > span{display:block}
.open__name > span + span{padding-left:.6em}
.open__claim{margin:1.8rem 0 0;font:200 clamp(1.35rem,.9rem + 1.6vw,2.6rem)/1.15 var(--serif);font-size:min(clamp(1.35rem,.9rem + 1.6vw,2.6rem),5.6vw);letter-spacing:-.005em;white-space:nowrap}
.open__role{margin:1.6rem 0 .3rem;font-weight:500;letter-spacing:.04em}
.open__loc{margin:0;color:var(--asche);font-size:.9rem}
.cue{position:absolute;right:var(--gutter);bottom:12svh;display:flex;flex-direction:column;align-items:center;gap:.8rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--asche)}
.cue i{display:block;width:1px;height:3.5rem;background:linear-gradient(var(--messing),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{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}}
@media (max-width:700px){.cue{display:none}}

/* Filme */
.scene--film{align-items:center;padding-top:5rem;padding-bottom:5rem}
.reel{margin:0;display:grid;gap:1.4rem;justify-items:start}
.reel__frame{position:relative;background:#000;box-shadow:0 2rem 6rem rgba(0,0,0,.6)}
.reel__video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.reel--wide .reel__frame{width:min(100%,calc((100svh - 17rem)*16/9),1500px);aspect-ratio:16/9}
.reel--tall{grid-template-columns:auto minmax(12rem,22rem);align-items:end;column-gap:3rem}
.reel--tall .reel__frame{height:min(84svh,calc((100vw - 2*var(--gutter))*16/9));aspect-ratio:9/16}
@media (max-width:760px){
  .reel--tall{grid-template-columns:1fr;justify-items:center}
  .reel--tall .reel__frame{height:auto;width:min(100%,calc((100svh - 18rem)*9/16))}
  .reel__cap{width:100%}
}
.reel__title{margin:0;font:200 clamp(2.2rem,1rem + 3vw,4rem)/1 var(--serif)}
.reel__line{margin:.7rem 0 0;font-size:1.05rem}
.reel__credits{margin:.9rem 0 0;font-size:.78rem;color:var(--asche);line-height:1.5}
.reel__dur{color:var(--messing)}
.reel__sound{position:absolute;right:.9rem;bottom:.9rem;font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--papier);background:rgba(10,11,11,.55);border:1px solid var(--linie);border-radius:999px;padding:.65rem 1rem;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,border-color .3s}
.reel__sound:hover,.reel__sound:focus-visible{border-color:var(--messing);outline:none}
.reel__sound-off{display:none}
.reel__sound[aria-pressed="true"] .reel__sound-on{display:none}
.reel__sound[aria-pressed="true"] .reel__sound-off{display:inline}
.reel__sound[aria-pressed="true"]{background:var(--messing);color:var(--nacht)}

/* 03 Haltung */
.scene--words{gap:62svh;padding-top:40svh;padding-bottom:40svh}
.word{margin:0;max-width:16ch;font:200 clamp(2.4rem,1rem + 4.6vw,6.2rem)/1.04 var(--serif);letter-spacing:-.01em}
.word:nth-of-type(odd){align-self:flex-start}.word:nth-of-type(even){align-self:flex-end;text-align:left}

/* 07 Handwerk */
.craft{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.craft li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1rem 3rem;align-items:baseline;padding:1.8rem 0;border-bottom:1px solid var(--linie)}
.craft__t{font:200 clamp(1.8rem,1rem + 2.4vw,3.4rem)/1.05 var(--serif)}
.craft__d{color:var(--asche)}
@media (max-width:700px){.craft li{grid-template-columns:1fr}}

/* 08 Erfahrung */
.exp{margin:0;max-width:22ch;font:200 clamp(2rem,1rem + 3vw,4.4rem)/1.2 var(--serif)}
.quote{margin:5rem 0 0 auto;max-width:34rem}
.quote blockquote{margin:0;font:italic 200 clamp(1.3rem,1rem + .8vw,1.8rem)/1.35 var(--serif)}
.quote blockquote p{margin:0;text-indent:-.45em}
.quote figcaption{margin-top:1.2rem;display:flex;flex-direction:column;gap:.2rem;font-size:.82rem}
.quote__name{font-weight:500}.quote__role{color:var(--asche)}

/* 09 Kontakt – wie auf stobbe.cc: ein Screen, das Bild kehrt in den Fokus zurück */
.contact{min-height:100svh;justify-content:center;padding-top:calc(4.75rem + env(safe-area-inset-top,0px));padding-bottom:1rem}
.contact__h{margin:0 0 clamp(1rem,2.5vh,2rem);max-width:14ch;padding-bottom:.06em;font:300 clamp(2.8rem,1rem + 4.4vw,6rem)/1.16 var(--serif);letter-spacing:-.012em;color:var(--papier);text-wrap:balance}
.contact .ask{margin-top:clamp(1rem,2.5vh,2rem)}
.contact__meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;margin-top:clamp(1.5rem,3.5vh,3rem);font-size:.95rem}
.contact__meta a{text-decoration:none;color:var(--asche);transition:color .3s}
.contact__meta a:hover{color:var(--papier)}
.contact__vcf{display:inline-flex;align-items:center;gap:.5em}
.contact__vcf::before{content:"";width:.9em;height:.9em;border:1px solid currentColor;border-radius:3px;opacity:.7}
@media (min-width:641px) and (max-height:900px) and (pointer:fine){
  .contact{padding-top:calc(4.5rem + env(safe-area-inset-top,0px))}
  .contact__h{font-size:clamp(2.2rem,1rem + 3vw,3.6rem);margin-bottom:.4rem}
  .contact .ask{margin-top:1rem}
  .contact .ask__bar{margin:.8rem 0 1.4rem}
  .contact .step{margin-bottom:1rem}
  .contact .step__nav{margin-top:1.2rem}
  .contact .step__q{font-size:clamp(1.5rem,1rem + 1.2vw,2.2rem);margin-bottom:.9rem}
  .contact .box textarea{min-height:5.2rem}
  .contact__meta{margin-top:1.4rem}
}
@media (pointer:coarse){
  .contact{min-height:calc(100svh - var(--foot-h,4.5rem));padding-bottom:.5rem}
  .contact .step{margin-bottom:1rem}.contact .step__nav{margin-top:1.2rem}
  .contact .ask__bar{margin:.8rem 0 clamp(1rem,3vh,2rem)}
}
@media (max-width:640px){
  .contact__h{font-size:2.25rem;margin-bottom:.6rem}
  .contact .ask{margin-top:.6rem}
  .contact .ask__intro{font-size:.62rem;letter-spacing:.05em;white-space:nowrap}
  .contact .ask__head{align-items:center}
  .contact .step__q{font-size:1.6rem;margin-bottom:.9rem}
  .contact .step__fields{gap:.6rem}
  .contact__meta{gap:.4rem 1.3rem;font-size:.84rem}
}
.foot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));font-size:.85rem;color:var(--asche);border-top:1px solid rgba(236,230,218,.06)}
@media (min-width:901px){.foot{padding-right:calc(var(--gutter) + 8rem)}}
@media (max-width:900px){.foot{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}}
.foot__about{flex:0 0 100%;margin:0 0 .25rem;line-height:1.6;text-wrap:pretty;opacity:.55}.foot__about>span{display:block;max-width:44rem}
.foot nav{display:flex;gap:2rem}.foot a{text-decoration:none}.foot a:hover{color:var(--papier)}

/* Einblenden: Text zeilenweise hinter einer Maske, alles andere öffnet sich von unten */
[data-reveal]{opacity:0;transform:translate3d(0,1.6rem,0);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal].is-lines{opacity:1;transform:none;transition:none}
/* Zeilen kommen aus der Unschärfe (ohne Maske, damit keine Unterlängen abgeschnitten werden) */
.ln{display:block}
.ln__i{display:block;opacity:0;filter:blur(10px);transform:translate3d(0,.22em,0);
  transition:opacity 1s var(--ease),filter 1.3s var(--ease),transform 1.3s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.is-in .ln__i{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}
.craft li:nth-child(2){transition-delay:.08s}.craft li:nth-child(3){transition-delay:.16s}.craft li:nth-child(4){transition-delay:.24s}

/* Timeline (Desktop: rechts senkrecht) */
.tl{position:fixed;z-index:20;right:var(--gutter);top:50%;transform:translateY(-50%);height:min(64svh,34rem);width:auto;display:flex;flex-direction:column;align-items:flex-end}
.tl__toggle{order:2;margin-top:auto;background:none;border:0;color:var(--asche);font:500 .7rem/1.4 var(--sans);letter-spacing:.12em;text-align:right;padding:0;cursor:default;display:flex;flex-direction:column;gap:.25rem}
.tl__now{display:none}
.tl__tc{font-variant-numeric:tabular-nums;color:var(--papier)}
.tl__rail{position:absolute;right:0;top:0;bottom:2.6rem;width:1px;background:var(--linie)}
.tl__fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--messing);transform-origin:top;transform:scaleY(var(--p,0))}
.tl__head{position:absolute;left:-3px;top:calc(var(--p,0)*100%);width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--messing)}
.tl__list{position:absolute;right:0;top:0;bottom:2.6rem;margin:0;padding:0;list-style:none}
.tl__list li{position:absolute;right:0;transform:translateY(-50%)}
.tl__list a{display:flex;align-items:center;gap:.7rem;padding:.25rem 0;text-decoration:none;font:500 .66rem/1 var(--sans);letter-spacing:.14em;color:var(--asche)}
.tl__list a::after{content:"";width:9px;height:1px;background:currentColor;margin-right:-4px}
.tl__list .tl__t{opacity:0;transform:translateX(.4rem);transition:opacity .3s,transform .3s;white-space:nowrap}
.tl:hover .tl__t,.tl__list a:focus-visible .tl__t,.tl__list a.is-on .tl__t{opacity:1;transform:none}
.tl__list a.is-on{color:var(--papier)}
.tl__list a:hover{color:var(--messing)}

/* Timeline (Handy/schmal: unten waagerecht, Kapitel zum Aufklappen) */
@media (max-width:900px){
  .tl{left:0;right:0;top:auto;bottom:0;transform:none;height:auto;display:block;padding:0 1rem calc(.6rem + env(safe-area-inset-bottom));
    background:linear-gradient(transparent,rgba(10,11,11,.85) 45%)}
  .tl__rail{position:relative;top:auto;bottom:auto;right:auto;width:100%;height:1px}
  .tl__fill{width:100%;height:1px;transform-origin:left;transform:scaleX(var(--p,0))}
  .tl__head{top:-3px;left:calc(var(--p,0)*100%);margin:0 0 0 -3px}
  .tl__toggle{order:0;width:100%;margin:0;padding:.9rem 0 .6rem;flex-direction:row;justify-content:space-between;align-items:center;cursor:pointer;color:var(--papier)}
  .tl__now{display:inline;text-transform:uppercase}
  .tl__num{color:var(--messing)}
  .tl__list{position:static;display:none;padding:.4rem 0 .6rem}
  .tl.is-open .tl__list{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem}
  /* aufgeklappt: dunkle Fläche hinter der Kapitelliste, nach oben weich auslaufend */
  .tl::before,.tl::after{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease}
  .tl::after{top:0;bottom:0;background:rgba(10,11,11,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .tl::before{bottom:100%;height:3.5rem;background:linear-gradient(rgba(10,11,11,0),rgba(10,11,11,.94))}
  .tl.is-open::before,.tl.is-open::after{opacity:1}
  .tl.is-open .tl__list{animation:tlIn .3s ease both}
  @keyframes tlIn{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
  .tl__list li{position:static;transform:none}
  .tl__list a{padding:.6rem 0;font-size:.72rem}
  .tl__list a::after{display:none}
  .tl__list .tl__t{opacity:1;transform:none}
  .scene{padding-bottom:7rem}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;filter:none;transform:none;transition:none}
  .cue i{animation:none}
}

/* The Line: randlos über die volle Breite */
.scene--wide{padding-left:0;padding-right:0}
.reel--wide{width:100%;justify-items:stretch}
.reel--wide .reel__frame{width:100%;aspect-ratio:16/9;box-shadow:none}
.reel--wide .reel__cap{padding:0 var(--gutter)}
@media (min-width:901px){
  .scene--wide{padding:0}
  .reel--wide{display:block;position:relative}
  .reel--wide .reel__frame{width:100%;height:100svh;aspect-ratio:auto}
  .reel--wide .reel__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(10,11,11,.85) 0%,rgba(10,11,11,.35) 22%,rgba(10,11,11,0) 45%),linear-gradient(to bottom,rgba(10,11,11,.45),rgba(10,11,11,0) 18%)}
  .reel--wide .reel__cap{position:absolute;z-index:2;left:var(--gutter);bottom:5.6rem;max-width:40rem;padding:0;pointer-events:none}
  .reel--wide .reel__sound{z-index:3;right:calc(var(--gutter) + 8rem);bottom:5.6rem}
}

/* Disziplinen, Arbeiten, Erfahrung, Kontakt */
.span{margin:0 0 3.5rem;max-width:30ch;font:200 clamp(1.4rem,1rem + 1.4vw,2.4rem)/1.25 var(--serif);color:var(--papier)}
.scene--intro{min-height:70svh;justify-content:center}
.intro{margin:0;max-width:24ch;font:200 clamp(2rem,1rem + 3vw,4.4rem)/1.1 var(--serif)}
.quote--film{margin:2.5rem 0 0;max-width:22rem;padding-top:1.6rem;border-top:1px solid var(--linie)}
.quote--film blockquote{font-size:clamp(1.05rem,.9rem + .4vw,1.3rem)}
.exp__sub{margin:4rem 0 1.2rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--asche)}
.ticker{overflow:hidden;margin:0 calc(-1*var(--gutter));-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;width:max-content;animation:ticker 90s linear infinite}
.ticker__track span{padding:0 1.6rem;font:200 clamp(1.4rem,1rem + 1.2vw,2.2rem)/1.4 var(--serif);white-space:nowrap;color:var(--papier)}
.ticker__track span::after{content:"·";margin-left:3.2rem;color:var(--messing)}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;flex-wrap:wrap;width:auto}}
.contact__socs{display:inline-flex;gap:1.4rem;align-items:center}
.contact__soc{display:inline-flex;position:relative}
.contact__soc svg{width:1.1rem;height:1.1rem;fill:currentColor;display:block}
.contact__soc::after{content:"";position:absolute;inset:-10px}

/* Satz: kein Flattern, keine Einzelwörter, nichts mehrzeilig zentriert */
p,li,figcaption,blockquote{text-wrap:pretty}
h1,h2,h3,.word,.span,.intro,.exp,.reel__title,.contact__h,.step__q{text-wrap:balance}
.br-m{display:none}
@media (max-width:700px){.br-m{display:inline}}

/* Kapitelwechsel als Schnitt */
.cut{position:fixed;left:0;right:0;top:0;height:1px;z-index:15;pointer-events:none;opacity:0;transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--messing) 22%,#e9d3a8 50%,var(--messing) 78%,transparent);box-shadow:0 0 14px rgba(194,165,116,.45)}

/* ===== Feinschliff in Bewegung (polish.js) ===== */
/* 01 · Kamerafahrt auf dem Porträt, Name rückt in seine Laufweite */
.stage__img{transform:scale(calc(1 + var(--push,0)))}
.stage__img--soft{transform:scale(calc(1.06 + var(--push,0)))}
.pl .open__name .ch{display:inline-block;opacity:0;filter:blur(14px);transform:translate3d(var(--dx,0),0,0);
  transition:opacity 1.4s var(--ease) var(--d,0ms),filter 1.7s var(--ease) var(--d,0ms),transform 2.1s var(--ease) var(--d,0ms)}
.pl.is-ready .open__name .ch,.is-ready .open__name .ch{opacity:1;filter:none;transform:none}
.pl .open__claim,.pl .open__role,.pl .open__loc,.pl .scene--open .cue{opacity:0;transform:translate3d(0,.8rem,0);transition:opacity 1.2s var(--ease),transform 1.5s var(--ease)}
.is-ready .open__claim,.is-ready .open__role,.is-ready .open__loc,.is-ready .scene--open .cue{opacity:1;transform:none}
.is-ready .open__claim{transition-delay:1.05s}.is-ready .open__role{transition-delay:1.3s}.is-ready .open__loc{transition-delay:1.45s}.is-ready .scene--open .cue{transition-delay:2s}
/* 02 · Showreel öffnet sich wie eine Blende */
.pl .reel--wide .reel__frame{clip-path:inset(calc(var(--ap,0) * 46%) calc(var(--ap,0) * 9%))}
/* Handy: die Steuerleiste liegt unter dem Film – die Blende lässt unten Platz für sie, sobald der Film offen ist */
@media (max-width:900px){.pl .reel--wide .reel__frame{clip-path:inset(calc(var(--ap,0) * 46%) calc(var(--ap,0) * 9%) calc(var(--ap,0) * (46% + 4rem) - 4rem))}}
/* 03 · Haltung: Wort für Wort, ein Begriff wird bronze und bekommt eine Haarlinie */
.pl [data-reveal="words"]{opacity:1;transform:none}
.pl .wq{display:inline-block;opacity:0;filter:blur(10px);transform:translate3d(0,.22em,0);
  transition:opacity 1s var(--ease) calc(var(--i,0) * 85ms),filter 1.3s var(--ease) calc(var(--i,0) * 85ms),transform 1.3s var(--ease) calc(var(--i,0) * 85ms),color 1.4s var(--ease) calc(var(--n,6) * 85ms + .5s)}
.pl .is-in .wq{opacity:1;filter:none;transform:none}
.key{position:relative}
/* Haarlinie als echte Unterstreichung einer unsichtbaren Kopie des Worts: sie macht Unterlängen Platz (skip-ink) und zeichnet sich per Clip von links */
.key::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;color:transparent;pointer-events:none;
  text-decoration-line:underline;text-decoration-color:var(--messing);text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-skip-ink:auto;-webkit-text-decoration-skip:ink;
  clip-path:inset(-.3em 100% -.8em 0);transition:clip-path 1.5s var(--ease) calc(var(--n,6) * 85ms + .7s),text-decoration-color .3s}
.is-in .key,.is-in .key-p{color:var(--messing)}
.is-in .key::after{clip-path:inset(-.3em 0 -.8em 0)}
/* 05 · Detail: Grundlinienraster während der Korrekturen */
.tp__q{position:relative}
.tp__q::before{content:"";position:absolute;z-index:-1;left:-2.5rem;right:-2.5rem;top:0;bottom:0;pointer-events:none;opacity:0;transition:opacity 1s var(--ease);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh,1em) * .8 - .5px),rgba(236,230,218,.1) calc(var(--lh,1em) * .8 - .5px),rgba(236,230,218,.1) calc(var(--lh,1em) * .8 + .5px),transparent calc(var(--lh,1em) * .8 + .5px),transparent var(--lh,1em))}
.tp__q::after{content:"";position:absolute;z-index:-1;left:0;top:-1.2rem;bottom:-1.2rem;width:1px;background:rgba(194,165,116,.4);opacity:0;transition:opacity 1s var(--ease)}
.tp__q.is-grid::before,.tp__q.is-grid::after{opacity:1}
/* 06 · Disziplinen: Linien zeichnen sich, Titel folgen, beim Hover rückt der Titel ein */
.craft li{position:relative;border-bottom:0}
.craft li::after,.craft li::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;transform:scaleX(0);transform-origin:left}
.craft li::after{background:var(--linie);transition:transform 1.6s var(--ease)}
.craft li::before{background:var(--messing);transition:transform .8s var(--ease);z-index:1}
.craft li.is-in::after,.pl-static .craft li::after{transform:scaleX(1)}
.pl .craft li[data-reveal]{opacity:1;transform:none}
.pl .craft li .craft__t,.pl .craft li .craft__d{opacity:0;transform:translate3d(0,.7rem,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.pl .craft li.is-in .craft__t{opacity:1;transform:none;transition-delay:.15s}
.pl .craft li.is-in .craft__d{opacity:1;transform:none;transition-delay:.3s}
.craft__t{display:inline-block}
@media (hover:hover){
  .pl .craft li.is-in .craft__t{transition:opacity 1s var(--ease) .15s,transform .6s var(--ease)}
  .pl .craft li.is-in:hover .craft__t{transform:translate3d(.7rem,0,0);transition-delay:0s}
  .craft li:hover::before{transform:scaleX(1)}
}
/* 07 · Arbeiten: aus der Mittellinie geöffnet, leicht zur Maus geneigt */
.pl .reel--tall .reel__frame{clip-path:inset(49.6% 0 49.6% 0);transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:clip-path 1.7s cubic-bezier(.7,0,.2,1)}
.pl .reel--tall .reel__frame.is-open{clip-path:inset(-6rem -6rem -6rem -6rem)}
/* 08 · Zähler und Markenband */
.count{font-variant-numeric:tabular-nums}
.ticker.is-js .ticker__track{animation:none;will-change:transform}
/* 09 · magnetischer Knopf */
@media (hover:hover){
  .pl .contact .send{translate:var(--mx,0px) var(--my,0px);transition:translate .55s var(--ease),box-shadow .3s}
  .pl .contact .send.is-near{transition:translate .12s linear,box-shadow .3s}
}

/* 08 · „im Game“ führt zu 30 Flex */
.exp--more{margin-top:.25em}
.exp__link{display:inline-block;text-decoration:none;color:inherit;cursor:pointer}
.exp__link:hover::after,.exp__link:focus-visible::after{text-decoration-color:var(--papier)}
.exp__link:focus-visible{outline:none}

/* Filmsteuerung: Haarlinie, Bronze-Fortschritt, Monogramm als Abspielkopf */
.fc{position:absolute;left:0;right:0;top:calc(100% + 1.1rem);z-index:3;display:flex;align-items:center;gap:1rem;height:24px;--pct:0%}
.fc__track{position:relative;flex:1;height:24px;cursor:pointer;touch-action:none;outline:none}
.fc__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(236,230,218,.22);transform:scaleY(1);transition:transform .35s var(--ease)}
.fc__fill{position:absolute;left:0;top:50%;height:1px;width:var(--pct);background:var(--messing);transition:transform .35s var(--ease)}
.fc__head{position:absolute;top:50%;left:var(--pct);width:13px;height:15px;fill:#cfaf7e;transform:translate(-50%,calc(-100% - 5px));transform-origin:50% 100%;transition:transform .35s var(--ease);filter:drop-shadow(0 0 5px rgba(10,11,11,.7));pointer-events:none}
.fc__track:hover::before,.fc__track:focus-visible::before,.fc.is-drag .fc__track::before{transform:scaleY(2)}
.fc__track:hover .fc__fill,.fc__track:focus-visible .fc__fill,.fc.is-drag .fc__fill{transform:scaleY(2)}
.fc__track:hover .fc__head,.fc__track:focus-visible .fc__head,.fc.is-drag .fc__head{transform:translate(-50%,calc(-100% - 6px)) scale(1.2)}
.fc__time{font:500 .64rem/1 var(--sans);letter-spacing:.12em;color:var(--asche);font-variant-numeric:tabular-nums;white-space:nowrap}
.fc.is-paused .fc__time{color:var(--papier)}
.fc__note{font:500 .64rem/1 var(--sans);letter-spacing:.12em;color:var(--asche);white-space:nowrap}
/* Showreel über die volle Breite: unten im Bild, unter der Bildunterschrift */
@media (min-width:901px){
  .reel--wide .fc{top:auto;bottom:2.2rem;left:var(--gutter);right:calc(var(--gutter) + 8rem)}
}
@media (max-width:900px){
  .reel--wide .reel__cap{margin-top:2.4rem}
  .reel--wide .fc{left:var(--gutter);right:var(--gutter)}
}
@media (max-width:760px){
  .reel--tall .reel__cap{margin-top:1.4rem}
  .reel--tall .reel__frame{width:min(100%,calc((100svh - 19.5rem)*9/16))}
  .reel--tall .reel__cap .tc-label{margin-bottom:.9rem}
  .reel--tall .reel__line{margin-top:.5rem}
  .reel--tall .reel__credits{margin-top:.6rem}
}

/* Hinweis: Navigation auch mit den Pfeiltasten (nur Desktop) */
.cue__keys{display:flex;align-items:center;gap:.35rem;letter-spacing:.2em;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.cue__keys span{margin-right:.25rem}
.cue__keys kbd{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;border:1px solid rgba(236,230,218,.28);border-radius:4px;font:400 .72rem/1 var(--sans);letter-spacing:0;color:var(--asche);
  transition:border-color .35s,color .35s,box-shadow .5s}
.cue__keys kbd.is-hit{border-color:var(--messing);color:var(--messing);box-shadow:0 0 14px rgba(194,165,116,.45)}
.cue__keys.is-gone{opacity:0;transform:translate3d(0,.4rem,0)}
@media (hover:none),(pointer:coarse){.cue__keys{display:none}}

/* „Scrollen“ steht fest unten rechts und fährt beim Scrollen nach unten hinaus */
@media (min-width:701px){
  .pl .scene--open .cue{position:fixed;z-index:15;pointer-events:none}
  .pl .is-ready .scene--open .cue,.pl .is-ready.cue-live .scene--open .cue{opacity:calc(1 - var(--out,0));transform:translate3d(0,calc(var(--out,0) * 7rem),0);transition:opacity 1.2s var(--ease) 2s,transform 1.5s var(--ease) 2s}
  .pl .is-ready.cue-live .scene--open .cue{transition:none}
}

/* Monogramm oben links: Linie, dann Bronze; Hover dreht es zurück in die aufrechte Form */
.logo{fill:#cfaf7e;overflow:visible}
.bar__mark .logo{transform-origin:50% 50%;transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .3s}
.bar__mark:hover .logo{opacity:1}
@media (hover:hover){.bar__mark:hover .logo{transform:rotate(45deg)}}
.bar__mark:focus-visible .logo{transform:rotate(45deg)}
.pl .logo.is-drawing path{fill-opacity:0;stroke:#cfaf7e;stroke-width:6;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:markDraw 1.5s cubic-bezier(.65,0,.35,1) .2s forwards}
.pl .logo.is-filled path{animation:markDraw 0s forwards,markFill .9s var(--ease) forwards}
@keyframes markDraw{to{stroke-dashoffset:0}}
@keyframes markFill{from{fill-opacity:0;stroke-width:6}to{fill-opacity:1;stroke-width:0}}
/* Dankeschön mit dem Zeichen */
.thanks__sign{position:relative;width:5.5rem;height:6.2rem;margin:0 0 2rem}
.thanks__mark{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#cfaf7e;stroke-width:2.5}
.thanks__mark path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.thanks.is-in .thanks__mark path{animation:markDraw 1.4s cubic-bezier(.65,0,.35,1) .1s forwards}
.thanks__mark--fill{fill:#cfaf7e;stroke:none;clip-path:inset(100% 0 0 0)}
.thanks__mark--fill path{stroke-dasharray:none}
.thanks.is-in .thanks__mark--fill{animation:pour 1.6s cubic-bezier(.5,0,.2,1) 1.2s forwards}
@keyframes pour{to{clip-path:inset(0 0 0 0)}}
/* Am Ende bleibt nur die flache Bronze: die Konturlinie blendet aus, sonst stehen an Ecken und Enden kleine Kanten über */
.thanks__mark{stroke-linejoin:round}
.thanks.is-in .thanks__mark:not(.thanks__mark--fill){animation:markOut .6s var(--ease) 2.6s forwards}
@keyframes markOut{to{opacity:0}}
.contact .thanks.is-in .thanks__big{animation-delay:2.1s}
.contact .thanks.is-in .thanks__text{animation-delay:2.35s}

/* Sprachumschalter oben rechts */
.lang{position:fixed;z-index:20;top:1.4rem;right:var(--gutter);display:flex;gap:1rem;font:500 .68rem/2rem var(--sans);letter-spacing:.16em}
.lang a{text-decoration:none;color:var(--asche);transition:color .3s}
.lang a[aria-current]{color:var(--papier)}
.lang a:hover,.lang a:focus-visible{color:var(--messing)}
/* Sprachwechsel: die neue Seite blendet an derselben Stelle auf */
.lang-jump body{opacity:0;transition:none}
body{transition:opacity .45s var(--ease)}
/* Erfahrung: Agenturen im Wechsel */
.exp--more .nw{display:inline-block;transition:opacity .55s var(--ease),filter .55s var(--ease),transform .6s var(--ease)}
.exp--more .nw.is-out{opacity:0;filter:blur(8px);transform:translate3d(0,.18em,0)}
.exp--more .ag{display:block;text-wrap:balance}
/* Nach dem Öffnen keine Maske mehr auf dem laufenden Film (spart bei jedem Bild das Neuzeichnen von Maske und Schatten) */
.pl .reel--tall .reel__frame.is-opened{clip-path:none}
/* Desktop: Kontakt und Fuß teilen sich die letzte Folie, Impressum und Datenschutz ohne weiteren Scrollschritt sichtbar */
@media (pointer:fine){.contact{min-height:calc(100svh - var(--foot-h,5.35rem))}}
/* Unschärfe-Filter schneidet am Rand der Box ab: Platz für Unterlängen und Akzente schaffen, ohne das Layout zu verändern */
.pl .wq,.ln__i,.exp--more .nw{padding:.12em 0 .3em;margin:-.12em 0 -.3em}
@media (min-width:701px){.nb{white-space:nowrap}}
/* Haltung: Schlüsselwörter nur in Bronze, ohne Linie – unterstrichen ist allein der echte Link („im Game“) */
.word .key::after{content:none}
.key-nw{white-space:nowrap}   /* Schlüsselwort und Punkt bleiben auf einer Zeile */
/* Listen-Folien: rechts Platz für den Kapitelnamen der Zeitleiste lassen (lange Namen wie „Zusammenarbeit“) */
@media (min-width:901px){.scene--craft{padding-right:calc(var(--gutter) + 13rem)}}

/* Hintergrund-Loops hinter Disziplinen und Zusammenarbeit: dunkel, weich ausgeblendet, Text bleibt vorn */
.scene--bg{isolation:isolate}
.scene__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.scene__bg video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;filter:brightness(.7) saturate(.9);transition:opacity 2s var(--ease)}
.scene__bg.is-on video{opacity:1}
.scene__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,11,.5),rgba(10,11,11,.12) 45%,rgba(10,11,11,.42))}
/* Stift ruhiger als die Welle; Beschreibungen über den Loops heller und mit weichem Schatten */
#zusammenarbeit .scene__bg video{filter:brightness(.5) saturate(.85)}
#zusammenarbeit .scene__bg::after{background:linear-gradient(90deg,rgba(10,11,11,.62),rgba(10,11,11,.32) 45%,rgba(10,11,11,.58))}
.scene--bg .craft__d{color:rgba(236,230,218,.84)}
.scene--bg .craft__t,.scene--bg .craft__d,.scene--bg .span{text-shadow:0 1px 14px rgba(10,11,11,.7)}
/* Ton an/aus überall als Symbol statt Schrift (Text bleibt für Screenreader) */
@media all{
  .reel__sound{width:2.9rem;height:2.9rem;padding:0;display:grid;place-items:center;font-size:0;letter-spacing:0}
  .reel__sound span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .reel__sound::before{content:"";width:1.5rem;height:1.5rem;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5h3.5l5-4v13l-5-4H3.5z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5h3.5l5-4v13l-5-4H3.5z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
  .reel__sound[aria-pressed="true"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5h3.5l5-4v13l-5-4H3.5z'/%3E%3Cpath d='M15.5 9.5a3.5 3.5 0 0 1 0 5M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5h3.5l5-4v13l-5-4H3.5z'/%3E%3Cpath d='M15.5 9.5a3.5 3.5 0 0 1 0 5M18.5 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E")}
}
@media (min-width:901px){
  .reel__sound{width:3.2rem;height:3.2rem}
  .reel__sound::before{width:1.65rem;height:1.65rem}
}
@media (max-width:900px){
  .reel__sound{width:2.3rem;height:2.3rem}
  .reel__sound::before{width:1.2rem;height:1.2rem}
  .reel__sound::after{content:"";position:absolute;inset:-.3rem}   /* Tippfläche bleibt so groß wie vorher */
  .reel__play{width:3.5rem;height:3.5rem;margin:-1.75rem 0 0 -1.75rem}
  .reel__play::before{width:1.35rem;height:1.35rem}
}
/* Same AI: mobil im Hochformat bildschirmfüllend wie das Showreel auf dem Desktop (film.js wählt die 9:16-Datei).
   Die Szene ist genau eine Bildschirmhöhe, damit der Haltepunkt den Film exakt einpasst; Steuerung und Ton liegen im Bild über der Timeline. */
@media (max-width:900px){
  .scene--full{padding:0;min-height:0}
  .reel--duo{display:block;position:relative}
  .reel--duo .reel__frame{aspect-ratio:auto;width:100%;height:100svh;box-shadow:none}
  .reel--duo .reel__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(10,11,11,.8) 0%,rgba(10,11,11,0) 22%),linear-gradient(to bottom,rgba(10,11,11,.45),rgba(10,11,11,0) 14%)}
  .reel--duo .fc{top:auto;bottom:calc(4.8rem + env(safe-area-inset-bottom));left:var(--gutter);right:calc(var(--gutter) + 3.8rem)}
  .reel--duo .reel__sound{z-index:3;right:var(--gutter);bottom:calc(4.1rem + env(safe-area-inset-bottom))}
}
/* Experience drives: Schrift und Monogramm als echter Text bzw. Vektor über dem Video (auf jedem Bildschirm scharf), zeitlich an das Video gekoppelt (film.js) */
.fo{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fo__it{position:absolute;left:50%;top:50%;opacity:0;will-change:opacity,filter,transform}
.fo__t{margin:0;padding:.35em .15em;white-space:nowrap;font:200 var(--fs,5rem)/1 var(--serif);color:var(--papier);font-kerning:normal;text-rendering:geometricPrecision}
.fo__logo{height:var(--lh,30vh);width:auto;fill:#cfaf7e}

/* Play-Hinweis, wenn der Browser das automatische Abspielen verweigert (z. B. Stromsparmodus) */
.reel__play{display:none;position:absolute;left:50%;top:50%;z-index:4;width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem;padding:0;border-radius:999px;cursor:pointer;color:var(--messing);background:rgba(10,11,11,.55);border:1px solid var(--linie);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);place-items:center;transition:border-color .3s,background .3s}
.reel__play::before{content:"";width:1.7rem;height:1.7rem;margin-left:.2rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}
.reel__play:hover,.reel__play:focus-visible{border-color:var(--messing);outline:none}
.reel.is-blocked .reel__play{display:grid}