/* =====================================================================
   KANTARA PRODUCTIONS
   ---------------------------------------------------------------------
   Farbwelt "Oxide". Alles Wichtige steht hier oben als Variable.
   Ändere eine Zeile, und die ganze Seite zieht nach.
   ===================================================================== */

:root{
  /* --- Oxide --- */
  --black:#0C1512;      /* Grundton, fast schwarz mit Grünstich */
  --deep:#13221D;       /* erhöhte Flächen */
  --oxide:#1F4739;      /* die tragende Fläche */
  --patina:#5E8C77;     /* helleres Grün, Linien und Nebentext */
  --bone:#E8E4D8;       /* gebrochenes Weiß */
  --bone-dim:rgba(232,228,216,.55);
  --line:rgba(232,228,216,.16);

  /* --- Schrift --- */
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* --- Maße --- */
  --pad:clamp(20px, 4.4vw, 76px);
  --bar:60px;           /* Höhe der oberen Leiste */
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:auto}
body{
  margin:0; background:var(--black); color:var(--bone);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
::selection{background:var(--oxide); color:var(--bone)}
:focus-visible{outline:2px solid var(--patina); outline-offset:3px}

h1,h2,h3{
  font-family:var(--display); font-weight:400;
  line-height:.94; letter-spacing:-.018em; margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(3rem, 11vw, 11rem)}
h2{font-size:clamp(2.4rem, 7.5vw, 7rem)}
h3{font-size:clamp(1.6rem, 3.4vw, 3rem)}
p{margin:0 0 1em}

/* --- wiederkehrende Bausteine --- */
.wrap{padding-inline:var(--pad)}
.lede{font-size:clamp(1rem,1.45vw,1.24rem); line-height:1.55; max-width:54ch}
.dim{color:var(--bone-dim)}
.label{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--patina);
  display:block;
}
.rule{height:1px; background:var(--line); border:0; margin:0}
.pre{white-space:pre-line}

.skip{position:absolute; left:-9999px; top:0; z-index:400; background:var(--oxide); padding:12px 20px}
.skip:focus{left:12px; top:12px}

/* =====================================================================
   OBERE LEISTE
   ===================================================================== */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:120; height:var(--bar);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad); pointer-events:none;
  mix-blend-mode:difference;
}
.bar > *{pointer-events:auto}
.bar__mark{
  width:26px; height:26px; display:block; opacity:0;
  transition:opacity .5s var(--ease);
}
.bar__mark img{width:100%; height:100%; object-fit:contain}
.bar.is-live .bar__mark{opacity:1}

.bar__nav{display:flex; align-items:center; gap:clamp(14px,1.8vw,28px)}
.bar__nav a,.bar__nav button{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; position:relative; padding-block:4px;
}
.bar__nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.bar__nav a:hover::after{transform:scaleX(1); transform-origin:left}
.bar__lang{border:1px solid currentColor; border-radius:99px; padding:4px 11px !important}

.bar__burger{display:none; width:34px; height:20px; position:relative}
.bar__burger i{position:absolute; left:0; width:100%; height:1px; background:currentColor; transition:transform .4s var(--ease), opacity .3s}
.bar__burger i:nth-child(1){top:4px}
.bar__burger i:nth-child(2){bottom:4px}
body.menu-open .bar__burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .bar__burger i:nth-child(2){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:820px){
  .bar__burger{display:block}
  .bar__nav{
    position:fixed; inset:0; background:var(--black); flex-direction:column;
    justify-content:center; gap:22px; opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  body.menu-open .bar__nav{opacity:1; visibility:visible}
  .bar__nav a{font-family:var(--display); font-size:clamp(2rem,9vw,3.4rem); letter-spacing:-.02em; text-transform:none}
  .bar__nav a::after{display:none}
  .bar__lang{font-family:var(--mono) !important; font-size:12px !important}
  .bar{mix-blend-mode:normal}
  body.menu-open .bar__burger{z-index:130}
}

/* =====================================================================
   00 APERTURE  ·  Logo als Blende
   ===================================================================== */
.aperture{height:320vh; position:relative}
.aperture__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:var(--black);
}
.aperture__video{position:absolute; inset:0; z-index:1}
.aperture__video video,.aperture__video img{width:100%; height:100%; object-fit:cover}
.aperture__video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,21,18,.55) 0%, rgba(12,21,18,.15) 45%, rgba(12,21,18,.8) 100%);
}
.aperture__pin{--hole:15vmin}

/* Phase eins: das Logo steht einfach da, massiv und ohne Erklärung. */
.aperture__solid{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  pointer-events:none;
}
.aperture__solid::before{
  content:""; display:block; width:var(--hole); aspect-ratio:107/113;
  background:var(--bone);
  -webkit-mask:url("../../media/logo-mask.svg") center/contain no-repeat;
  mask:url("../../media/logo-mask.svg") center/contain no-repeat;
}

/* Phase zwei: dasselbe Logo wird zum Loch, durch das man das Video sieht */
.aperture__mask{
  position:absolute; inset:0; z-index:2; background:var(--black);
  -webkit-mask-image:url("../../media/logo-mask.svg"), linear-gradient(#000,#000);
  mask-image:url("../../media/logo-mask.svg"), linear-gradient(#000,#000);
  -webkit-mask-size:var(--hole) auto, 100% 100%;
  mask-size:var(--hole) auto, 100% 100%;
  -webkit-mask-position:center, center;
  mask-position:center, center;
  -webkit-mask-repeat:no-repeat, no-repeat;
  mask-repeat:no-repeat, no-repeat;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.aperture__word{
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(30px,7vh,74px);
  text-align:center; font-family:var(--mono); font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--bone);
}
.aperture__scroll{
  position:absolute; z-index:3; left:50%; bottom:clamp(14px,3.4vh,30px);
  transform:translateX(-50%); width:1px; height:clamp(22px,4vh,42px);
  background:linear-gradient(var(--bone), transparent);
}
/* Fallback, wenn der Browser keine CSS-Masken kann */
.no-mask .aperture__mask{
  -webkit-mask-image:none; mask-image:none; background:var(--black);
  display:grid; place-items:center;
}
.no-mask .aperture__mask::before{
  content:""; width:min(38vmin,300px); aspect-ratio:107/113;
  background:var(--bone);
  -webkit-mask:url("../../media/logo-mask.svg") center/contain no-repeat;
  mask:url("../../media/logo-mask.svg") center/contain no-repeat;
}

/* =====================================================================
   01 SHOWREEL  ·  erste Worte der Seite
   ===================================================================== */
.reel{
  min-height:78vh; display:flex; align-items:flex-end;
  padding-block:clamp(50px,9vh,120px) clamp(40px,7vh,90px);
  border-bottom:1px solid var(--line);
}
.reel__grid{display:grid; gap:clamp(24px,4vw,60px); width:100%}
@media(min-width:900px){.reel__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end}}
.reel__line{
  font-family:var(--display); font-size:clamp(2.2rem,6.2vw,5.6rem);
  line-height:.98; letter-spacing:-.02em; margin:0;
}
.reel__side{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.reel__play{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:12px 22px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.reel__play:hover{background:var(--bone); color:var(--black); border-color:var(--bone)}
.reel__play i{
  width:7px; height:9px; background:currentColor; font-style:normal;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

/* =====================================================================
   02 WORK  ·  ein Projekt pro Bildschirm
   ===================================================================== */
.work__head{padding-block:clamp(56px,9vw,130px) clamp(30px,4vw,54px)}
.work__head h2{margin:.28em 0 .5em}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.filter{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:9px 18px;
  color:var(--bone-dim); transition:.35s var(--ease);
}
.filter:hover{color:var(--bone); border-color:var(--patina)}
.filter.is-on{background:var(--bone); border-color:var(--bone); color:var(--black)}

.slate{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end; overflow:hidden;
  border-top:1px solid var(--line);
}
.slate.is-hidden{display:none}
.slate__bg{position:absolute; inset:0; z-index:0}
.slate__bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.2s var(--ease);
}
.slate:hover .slate__bg img{transform:scale(1.01)}
.slate__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,21,18,.34) 0%, rgba(12,21,18,.05) 38%, rgba(12,21,18,.88) 100%);
}
.slate__body{
  position:relative; z-index:2; width:100%;
  padding-block:clamp(34px,6vh,80px);
  display:grid; gap:clamp(16px,2.6vw,44px);
}
@media(min-width:900px){
  .slate__body{grid-template-columns:minmax(0,1fr) minmax(0,330px); align-items:end}
}
.slate__no{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--patina); margin-bottom:14px; display:block;
}
.slate__title{
  font-family:var(--display); font-size:clamp(2.6rem,8.5vw,7.5rem);
  line-height:.9; letter-spacing:-.025em; margin:0 0 .12em;
}
.slate__meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--bone-dim); display:flex; flex-wrap:wrap; gap:6px 18px;
}
.slate__right{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.slate__blurb{font-size:.97rem; line-height:1.5; color:var(--bone-dim); max-width:42ch; margin:0}
.slate__cta{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:7px; transition:border-color .4s, gap .4s var(--ease);
}
.slate__cta:hover{border-color:var(--bone); gap:17px}

/* Das Plakat, das beim Hovern erscheint */
.slate__poster{
  position:absolute; z-index:3; right:var(--pad); top:50%;
  width:clamp(120px,13vw,196px); aspect-ratio:2/3;
  transform:translateY(-58%) rotate(-3deg) scale(.94);
  opacity:0; transition:opacity .55s var(--ease), transform .55s var(--ease);
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  pointer-events:none;
}
.slate__poster img{width:100%; height:100%; object-fit:cover}
.slate:hover .slate__poster{opacity:1; transform:translateY(-50%) rotate(-1.5deg) scale(1)}
@media(max-width:900px){.slate__poster{display:none}}

/* Kleine Bildleiste je Projekt */
.slate__strip{
  position:absolute; z-index:2; left:var(--pad); top:clamp(70px,12vh,120px);
  display:flex; gap:7px; opacity:0; transform:translateY(-8px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.slate:hover .slate__strip{opacity:1; transform:none}
.slate__strip img{
  width:clamp(48px,5.4vw,80px); aspect-ratio:16/10; object-fit:cover;
  border:1px solid rgba(232,228,216,.2);
}
@media(max-width:900px){.slate__strip{display:none}}

/* =====================================================================
   ÜBERGANG  ·  die Oxidfläche zwischen den Kapiteln
   ===================================================================== */
.bridge{
  background:var(--oxide); position:relative; overflow:hidden;
  padding-block:clamp(70px,14vh,180px);
}
.bridge__text{
  font-family:var(--display); font-size:clamp(1.5rem,4.2vw,3.4rem);
  line-height:1.08; letter-spacing:-.018em; max-width:22ch; margin:0;
}
.bridge__sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,228,216,.6); margin-top:26px; display:block;
}

/* =====================================================================
   03 HOUSE
   ===================================================================== */
.house{padding-block:clamp(64px,11vw,160px)}
.house__top{display:grid; gap:clamp(22px,3.4vw,60px); margin-bottom:clamp(40px,6vw,84px)}
@media(min-width:900px){.house__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end}}
.house__top h2{margin:.3em 0 0}

.strands{display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line)}
@media(min-width:900px){.strands{grid-template-columns:repeat(3,1fr)}}
.strand{
  background:var(--black); padding:clamp(28px,3.2vw,52px) clamp(22px,2.6vw,40px);
  display:flex; flex-direction:column; gap:15px; transition:background .6s var(--ease);
}
.strand:hover{background:var(--deep)}
.strand h3{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.strand p{color:var(--bone-dim); font-size:.95rem; margin:0}
.strand__n{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--patina)}
.strand__go{
  margin-top:auto; padding-top:24px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; gap:10px; align-items:center; transition:gap .4s var(--ease);
}
.strand:hover .strand__go{gap:16px}
.house__cross{
  margin-top:clamp(40px,6vw,84px); font-family:var(--display);
  font-size:clamp(1.3rem,3vw,2.4rem); line-height:1.16; letter-spacing:-.015em;
  max-width:34ch; color:var(--bone);
}

/* =====================================================================
   04 JOHN  ·  invertiert, das Archiv
   ===================================================================== */
.john{background:var(--bone); color:var(--black); padding-block:clamp(64px,11vw,160px)}
.john .label{color:var(--oxide)}
.john__top{display:grid; gap:clamp(26px,4vw,66px)}
@media(min-width:900px){.john__top{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start}}
.john__name{font-family:var(--display); font-size:clamp(2.8rem,8vw,6.6rem); line-height:.9; letter-spacing:-.028em; margin:.2em 0 0}
.john__text{color:rgba(12,21,18,.72); font-size:1.02rem; line-height:1.58; max-width:56ch}
.john__stats{display:flex; gap:clamp(26px,4vw,64px); flex-wrap:wrap; margin-top:34px}
.john__n{font-family:var(--display); font-size:clamp(2.4rem,5vw,4.2rem); line-height:1; letter-spacing:-.02em}
.john__l{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(12,21,18,.5); margin-top:7px}

.arch{margin-top:clamp(46px,7vw,100px)}
.arch__list{border-top:1px solid rgba(12,21,18,.16)}
.arch__row{
  display:grid; grid-template-columns:44px minmax(0,1fr) auto;
  gap:clamp(10px,2vw,26px); align-items:baseline;
  padding:clamp(12px,1.5vw,19px) 0; border-bottom:1px solid rgba(12,21,18,.16);
  position:relative; transition:padding-left .45s var(--ease), color .35s;
}
.arch__row:hover{padding-left:14px}
.arch__i{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(12,21,18,.4)}
.arch__t{font-family:var(--display); font-size:clamp(1.1rem,2.1vw,1.7rem); line-height:1.14; letter-spacing:-.012em}
.arch__c{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(12,21,18,.5); white-space:nowrap}
.arch__row .arch__peek{
  position:absolute; right:clamp(90px,12vw,180px); top:50%; width:clamp(120px,14vw,210px);
  aspect-ratio:16/9; transform:translateY(-50%) scale(.9); opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease); z-index:3;
  box-shadow:0 18px 48px rgba(12,21,18,.4);
}
.arch__row:hover .arch__peek{opacity:1; transform:translateY(-50%) scale(1)}
.arch__peek img{width:100%; height:100%; object-fit:cover}
@media(max-width:820px){
  .arch__row{grid-template-columns:32px minmax(0,1fr)}
  .arch__c{grid-column:2; white-space:normal}
  .arch__peek{display:none}
}

/* =====================================================================
   05 JOSHUA  ·  06 ON SCREEN
   ===================================================================== */
.person{padding-block:clamp(64px,11vw,160px)}
.person__grid{display:grid; gap:clamp(26px,4vw,70px); align-items:center}
@media(min-width:900px){.person__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.person__media{aspect-ratio:4/5; overflow:hidden; background:var(--deep)}
.person__media img{width:100%; height:100%; object-fit:cover}
.person__name{font-family:var(--display); font-size:clamp(2.6rem,7vw,5.4rem); line-height:.9; letter-spacing:-.026em; margin:.22em 0 .5em}
.person__text{color:var(--bone-dim); max-width:52ch}

.screen{position:relative; overflow:hidden; padding-block:clamp(64px,11vw,150px); border-top:1px solid var(--line)}
.screen__head{max-width:60ch; margin-bottom:clamp(34px,5vw,66px)}
.screen__head h2{margin:.3em 0 .45em}
.screen__rail{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:16px;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.screen__rail::-webkit-scrollbar{display:none}
.screen__rail img{
  flex:0 0 auto; width:clamp(240px,38vw,520px); aspect-ratio:16/9;
  object-fit:cover; scroll-snap-align:start;
  filter:saturate(.92); transition:filter .5s;
}
.screen__rail img:hover{filter:none}
.screen__credit{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--patina); margin-top:18px;
}

/* =====================================================================
   07 ZANOA
   ===================================================================== */
.zanoa{
  background:var(--oxide); padding-block:clamp(70px,12vw,170px);
  text-align:center; position:relative; overflow:hidden;
}
.zanoa__word{
  font-family:var(--display); font-size:clamp(3.4rem,16vw,13rem);
  line-height:.86; letter-spacing:-.035em; margin:.16em 0 .3em;
}
.zanoa .lede{margin-inline:auto; color:rgba(232,228,216,.72)}
.zanoa__cta{
  display:inline-flex; align-items:center; gap:13px; margin-top:30px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(232,228,216,.45); border-radius:99px; padding:13px 26px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.zanoa__cta:hover{background:var(--bone); color:var(--oxide); border-color:var(--bone)}

/* =====================================================================
   08 CLIENTS  ·  Namen als Band, Logo beim Hovern
   ===================================================================== */
.clients{padding-block:clamp(56px,9vw,130px); overflow:hidden; position:relative}
.clients__head{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,54px)}
.clients__hint{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--patina)}
.ticker{display:flex; gap:0; width:max-content; animation:roll 64s linear infinite}
.clients:hover .ticker{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.ticker__item{
  font-family:var(--display); font-size:clamp(2rem,5.4vw,4.6rem);
  line-height:1.1; letter-spacing:-.02em; padding-inline:clamp(18px,2.4vw,40px);
  color:var(--bone-dim); position:relative; white-space:nowrap;
  transition:color .4s var(--ease);
}
.ticker__item:hover{color:var(--bone)}
.ticker__item::after{content:"·"; position:absolute; right:-.16em; color:var(--patina); opacity:.5}
.ticker__logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.88);
  width:clamp(70px,7vw,118px); opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.ticker__logo img{width:100%; height:auto; filter:brightness(0) invert(1)}
.ticker__item:hover .ticker__logo{opacity:1; transform:translate(-50%,-50%) scale(1)}
.ticker__item:hover .ticker__label{opacity:.12}
.ticker__label{transition:opacity .4s var(--ease)}

/* =====================================================================
   09 BTS
   ===================================================================== */
.bts{padding-block:clamp(64px,11vw,160px); border-top:1px solid var(--line)}
.bts__head{display:grid; gap:clamp(20px,3vw,52px); margin-bottom:clamp(34px,5vw,70px)}
@media(min-width:900px){.bts__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end}}
.bts__grid{columns:2; column-gap:clamp(8px,1.2vw,16px)}
@media(min-width:760px){.bts__grid{columns:3}}
@media(min-width:1180px){.bts__grid{columns:4}}
.bts__item{
  break-inside:avoid; margin-bottom:clamp(8px,1.2vw,16px);
  position:relative; overflow:hidden; background:var(--deep);
}
.bts__item img{width:100%; height:auto; transition:transform 1s var(--ease), filter .5s}
.bts__item:hover img{transform:scale(1.04)}
.bts__cap{
  position:absolute; inset:auto 0 0 0; padding:26px 14px 13px;
  background:linear-gradient(transparent, rgba(12,21,18,.92));
  font-size:.8rem; line-height:1.35; opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.bts__item:hover .bts__cap,.bts__item:focus-within .bts__cap{opacity:1; transform:none}

/* =====================================================================
   10 CONTACT
   ===================================================================== */
.contact{padding-block:clamp(64px,11vw,160px)}
.contact__grid{display:grid; gap:clamp(30px,5vw,80px)}
@media(min-width:900px){.contact__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.contact h2{margin:.3em 0 .5em}
.mailto{
  font-family:var(--display); font-size:clamp(1.5rem,4.6vw,3.6rem);
  line-height:1.05; letter-spacing:-.022em; display:inline-block;
  position:relative; margin-top:14px; word-break:break-word;
}
.mailto::after{
  content:""; position:absolute; left:0; bottom:.08em; width:100%; height:1px;
  background:var(--patina); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.mailto:hover::after{transform:scaleX(1); transform-origin:left}
.rows{display:grid; gap:0; border-top:1px solid var(--line)}
.row{display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line)}
.row__k{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--patina)}
.row a:hover{color:var(--patina)}

/* =====================================================================
   11 INDEX
   ===================================================================== */
.index{padding-block:clamp(56px,9vw,130px); border-top:1px solid var(--line)}
.index__head{margin-bottom:clamp(30px,4vw,60px)}
.index__grid{display:grid; gap:clamp(24px,3vw,48px); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.index__h{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--patina); padding-bottom:11px; border-bottom:1px solid var(--line); margin:0 0 13px;
}
.index__list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.index__list li{font-size:.88rem; line-height:1.32}
.index__list a{border-bottom:1px solid transparent; transition:border-color .3s, color .3s}
.index__list a:hover{border-color:var(--patina); color:var(--patina)}
.index__list span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-dim); margin-top:3px}

/* =====================================================================
   FUSS
   ===================================================================== */
.foot{padding:clamp(40px,6vw,80px) var(--pad) 34px; border-top:1px solid var(--line)}
.foot__grid{display:flex; flex-wrap:wrap; gap:26px 60px; justify-content:space-between; margin-bottom:44px}
.foot__col{display:grid; gap:9px; align-content:start}
.foot__h{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--patina); margin-bottom:5px}
.foot__col a{font-size:.92rem; color:var(--bone-dim); transition:color .3s}
.foot__col a:hover{color:var(--bone)}
.foot__base{
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); border-top:1px solid var(--line); padding-top:24px;
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lb{
  position:fixed; inset:0; z-index:300; background:rgba(6,11,9,.97);
  display:grid; place-items:center; padding:var(--pad);
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.lb.is-open{opacity:1; pointer-events:auto}
.lb__inner{width:min(1240px,100%)}
.lb__frame{width:100%; aspect-ratio:16/9; background:#000; position:relative}
.lb__frame iframe,.lb__frame video{position:absolute; inset:0; width:100%; height:100%; border:0}
.lb__close{
  position:absolute; top:calc(var(--pad) - 4px); right:var(--pad);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.lb__cap{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--patina); margin-top:15px; text-align:center;
}

/* =====================================================================
   EINBLENDEN  ·  greift nur, wenn JavaScript läuft
   ===================================================================== */
.js [data-in]{opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.js [data-in].is-in{opacity:1; transform:none}
.js [data-in][data-d="1"]{transition-delay:.09s}
.js [data-in][data-d="2"]{transition-delay:.18s}
.js [data-in][data-d="3"]{transition-delay:.27s}

[id]{scroll-margin-top:calc(var(--bar) + 16px)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js [data-in]{opacity:1; transform:none}
  .aperture{height:auto}
  .aperture__pin{position:static; height:100svh}
  .aperture__mask{--hole:300vmax}
}

/* Zusätze: ZANOA-Zeile, On-Screen-Fuß, Credits auf den Slates */
.zanoa__tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,228,216,.65); margin:0 0 26px;
}
.screen__foot{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline; justify-content:space-between;
  margin-top:18px;
}
.screen__imdb{
  font-family:var(--mono); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:5px; transition:border-color .4s, color .4s;
}
.screen__imdb:hover{border-color:var(--bone); color:var(--bone)}
.slate__credits{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--bone-dim); margin:0; line-height:1.5;
}

/* =====================================================================
   RECHTSTEXTE
   ===================================================================== */
.legal{padding-block:calc(var(--bar) + clamp(50px,8vw,110px)) clamp(50px,8vw,110px); max-width:74ch}
.legal h1{font-size:clamp(2.4rem,6vw,4.6rem); margin-bottom:.4em}
.legal h2{font-size:clamp(1.2rem,2.2vw,1.7rem); margin:2.4em 0 .5em}
.legal h2:first-of-type{margin-top:1.6em}
.legal p{color:var(--bone-dim); font-size:.97rem; line-height:1.62}
.legal a{color:var(--patina); border-bottom:1px solid transparent; transition:border-color .3s}
.legal a:hover{border-color:var(--patina)}
.legal .note{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--patina); border-top:1px solid var(--line); padding-top:18px; margin-top:3em;
}

/* =====================================================================
   APERTURE, PHASE ZWEI UND DREI
   Nach dem Öffnen hält das Reel formatfüllend, dann geht es in den Grund über.
   ===================================================================== */
.aperture__tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--bone);
}
.aperture__acts{display:flex; gap:10px; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(232,228,216,.5); border-radius:99px; padding:11px 22px;
  color:var(--bone); transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
  backdrop-filter:blur(8px); background:rgba(12,21,18,.3);
}
.pill:hover{background:var(--bone); color:var(--black); border-color:var(--bone)}
.pill--solid{background:var(--bone); color:var(--black); border-color:var(--bone)}
.pill--solid:hover{background:transparent; color:var(--bone); border-color:rgba(232,228,216,.5)}
.pill.is-on{background:var(--oxide); border-color:var(--oxide); color:var(--bone)}

/* =====================================================================
   KUNDENLOGOS, BAND GANZ OBEN
   ===================================================================== */
.strip{
  overflow:hidden; border-block:1px solid var(--line);
  padding-block:clamp(20px,2.6vw,34px);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.strip__track{display:flex; width:max-content; animation:strip 58s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
@keyframes strip{to{transform:translateX(-33.333%)}}
.strip__item{
  flex:0 0 auto; display:grid; place-items:center;
  padding-inline:clamp(26px,3.6vw,64px);
}
.strip__item img{
  height:clamp(26px,3.1vw,42px); width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.58; transition:opacity .4s var(--ease);
}
.strip__item:hover img{opacity:1}

/* =====================================================================
   HOVER-VIDEO AUF DEN WERKSEITEN
   ===================================================================== */

/* =====================================================================
   ZANOA, LOGO STATT WORTMARKE
   ===================================================================== */
.zanoa__logo{
  width:min(560px,74vw); height:auto; margin:clamp(20px,3vw,38px) auto clamp(16px,2vw,26px);
}

/* =====================================================================
   CREDITS VOR DER KAMERA
   ===================================================================== */
.credits{border-top:1px solid var(--line); margin-top:clamp(22px,3vw,40px)}
.credits__row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; align-items:baseline;
  padding:clamp(13px,1.6vw,19px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
a.credits__row:hover{padding-left:12px}
.credits__t{font-family:var(--display); font-size:clamp(1.1rem,2vw,1.6rem); line-height:1.15; letter-spacing:-.01em}
.credits__m{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); grid-column:1; 
}
.credits__go{grid-row:1 / span 2; grid-column:2; color:var(--patina); font-size:.9rem}

/* =====================================================================
   ARCHIV, WENN ES BEIM DOKU-FILTER NACH OBEN RÜCKT
   ===================================================================== */
.john--pulled{border-top:1px solid var(--line)}

/* =====================================================================
   IMPRESSUM IM FUSS
   ===================================================================== */
.foot__imprint{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px}
.foot__imprint .pill{backdrop-filter:none; background:transparent; border-color:var(--line)}
.foot__imprint .pill:hover{background:var(--bone); color:var(--black); border-color:var(--bone)}

@media (max-width:700px){
  .aperture__deck{flex-direction:column; align-items:flex-start; gap:12px}
  .aperture__acts{width:100%}
}

/* =====================================================================
   DIE EINE BEWEGUNG
   Leiste und Text gehören zur Eröffnung und erscheinen erst,
   wenn der Besucher weit genug gescrollt hat.
   ===================================================================== */
.bar__nav,.bar__burger{opacity:0; transition:opacity .8s var(--ease)}
.bar.is-live .bar__nav,.bar.is-live .bar__burger{opacity:1}
body.menu-open .bar__nav{opacity:1}
/* Auf Unterseiten gibt es keine Blende, dort ist alles sofort da. */
.bar--static .bar__nav,.bar--static .bar__burger,.bar--static .bar__mark{opacity:1}

.aperture__deck{
  position:absolute; z-index:5; left:0; right:0;
  bottom:clamp(26px,5vh,58px);
  opacity:0; pointer-events:none;
}
.aperture__deckgrid{display:grid; gap:clamp(18px,3vw,50px); align-items:end}
@media(min-width:900px){
  .aperture__deckgrid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
.aperture__line{
  font-family:var(--display); font-size:clamp(1.9rem,5.2vw,4.6rem);
  line-height:.98; letter-spacing:-.02em; margin:.3em 0 0; color:var(--bone);
  text-shadow:0 2px 40px rgba(12,21,18,.5);
}
.aperture__sub{
  font-size:clamp(.94rem,1.3vw,1.1rem); line-height:1.5;
  color:rgba(232,228,216,.8); max-width:40ch; margin:0 0 20px;
  text-shadow:0 2px 30px rgba(12,21,18,.5);
}
.aperture__side{display:flex; flex-direction:column; align-items:flex-start}
.aperture__acts{display:flex; gap:10px; flex-wrap:wrap}

/* Zwei gestapelte Hover-Videos, damit zwischen den Clips kein Loch entsteht */
.slate__hover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:1; transition:opacity .45s var(--ease);
}
.slate.is-playing .slate__hover.is-front{opacity:1}
.slate.is-playing .slate__bg img{opacity:0; transition:opacity .5s var(--ease)}

@media (max-width:700px){
  .aperture__deck{bottom:clamp(20px,4vh,40px)}
  .aperture__side{width:100%}
}

/* =====================================================================
   PORTRÄT IN DER ARCHIVSEKTION
   ===================================================================== */
.john__portrait{margin:clamp(26px,3.4vw,44px) 0 0; max-width:340px}
.john__portrait img{width:100%; height:auto; display:block}

/* =====================================================================
   KOMMENDE PRODUKTION IM ARCHIV
   ===================================================================== */
.arch__row--soon{background:rgba(31,71,57,.07)}
.arch__row--soon:hover{padding-left:0}
.arch__soon{
  display:inline-block; vertical-align:middle;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--oxide); color:var(--bone);
  padding:4px 9px; border-radius:99px; margin-right:12px;
  transform:translateY(-2px);
}