/* ===== Lokal gehostete Schriften (kein Google-Server-Kontakt) ===== */
/* Bebas Neue & DM Sans — SIL Open Font License 1.1, siehe assets/fonts/LICENSE-*.txt */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/bebas-neue-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-ext-300-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#050505;
  --fg:#f4f2ec;
  --muted:#79797a;
  --line:#1e1e1c;
  --neon:#c8ff00;
  --card:#0d0d0c;
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:'DM Sans',sans-serif;overflow-x:hidden;}
body.locked{overflow:hidden;}
h1,h2,h3,.disp{font-family:'Bebas Neue',sans-serif;font-weight:400;line-height:.88;text-transform:uppercase;letter-spacing:.01em;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1300px;margin:0 auto;padding:0 5vw;}
.eyebrow{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--neon);font-weight:700;}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ HEADER ============ */
#header{position:fixed;top:0;left:0;right:0;z-index:1200;display:flex;align-items:center;
  justify-content:space-between;padding:1.5rem 5vw;transition:background .4s,backdrop-filter .4s;}
#header.scrolled{background:rgba(5,5,5,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.logo{display:flex;align-items:center;gap:.65rem;}
.logo .mono{width:36px;height:36px;border:1.5px solid var(--fg);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:1.15rem;padding-top:2px;}
.logo .name{font-size:.72rem;letter-spacing:.24em;font-weight:700;}
.head-right{display:flex;align-items:center;gap:1.2rem;}
.btn-neon{background:var(--neon);color:#000;font-weight:700;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.85rem 1.5rem;border-radius:100px;border:none;cursor:pointer;
  transition:transform .25s,box-shadow .25s;box-shadow:0 0 0 rgba(200,255,0,0);}
.btn-neon:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(200,255,0,.35);}
.burger{width:46px;height:46px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:none;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:.3s;}
.burger:hover{border-color:var(--fg);}
.burger span{display:block;width:16px;height:1.5px;background:var(--fg);transition:.35s;}
.burger.open span:nth-child(1){transform:translateY(3.2px) rotate(45deg);}
.burger.open span:nth-child(2){transform:translateY(-3.2px) rotate(-45deg);}

/* ============ MENU OVERLAY (Headline-Menü) ============ */
.menu{position:fixed;inset:0;z-index:1100;background:#000;display:flex;flex-direction:column;
  justify-content:center;padding:0 5vw;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.76,0,.24,1);}
.menu.open{clip-path:inset(0 0 0 0);}
.menu ul{list-style:none;}
.menu li{overflow:hidden;}
.menu li a{display:block;font-family:'Bebas Neue';font-size:clamp(3rem,11vw,9rem);line-height:.95;
  text-transform:uppercase;color:var(--fg);transform:translateY(110%);transition:transform .7s cubic-bezier(.16,1,.3,1),color .3s;
  position:relative;}
.menu.open li a{transform:translateY(0);}
.menu.open li:nth-child(1) a{transition-delay:.15s}
.menu.open li:nth-child(2) a{transition-delay:.22s}
.menu.open li:nth-child(3) a{transition-delay:.29s}
.menu.open li:nth-child(4) a{transition-delay:.36s}
.menu.open li:nth-child(5) a{transition-delay:.43s}
.menu.open li:nth-child(6) a{transition-delay:.50s}
.menu.open li:nth-child(7) a{transition-delay:.57s}
.menu li a:hover{color:var(--neon);}
.menu li a .idx{font-family:'DM Sans';font-size:.7rem;letter-spacing:.2em;color:var(--muted);
  vertical-align:super;margin-right:1rem;font-weight:600;}
.menu-foot{position:absolute;bottom:3rem;left:5vw;right:5vw;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;font-size:.78rem;color:var(--muted);opacity:0;transition:opacity .5s .6s;}
.menu.open .menu-foot{opacity:1;}
.menu-foot a:hover{color:var(--neon);}

/* ============ HERO ============ */
.hero{position:relative;min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 5vw 3.2rem;overflow:hidden;}
.hero .fallback{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  filter:blur(9px) brightness(.5) saturate(.85);transform:scale(1.08);
  transform-origin:center;will-change:filter;}
.hero .fallback{background:
  radial-gradient(circle at 25% 30%, rgba(200,255,0,.07), transparent 55%),
  radial-gradient(circle at 75% 70%, rgba(255,255,255,.05), transparent 55%),
  repeating-linear-gradient(112deg, rgba(255,255,255,.02) 0 2px, transparent 2px 100px),
  linear-gradient(180deg,#0b0b0a,#000);
  animation:drift 22s ease-in-out infinite alternate;}
@keyframes drift{from{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-2%)}}
.hero-veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.92) 100%);}
.hero-inner{position:relative;z-index:3;}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(1.5rem,7vh,4rem);padding-top:7.5rem;}
.hero-tag{max-width:250px;font-size:.85rem;line-height:1.55;color:#b9b8b2;}
.hero-tag b{color:var(--fg);}
.hero h1{font-size:clamp(3.4rem,14vw,11.5rem);margin-bottom:.4rem;}
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:rise 1s cubic-bezier(.16,1,.3,1) forwards;}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s;}
@keyframes rise{to{transform:translateY(0)}}
.hero h1 .neon{color:var(--neon);}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.16);padding-top:1.4rem;margin-top:1.2rem;}
.hero-bottom p{max-width:440px;font-size:1rem;line-height:1.6;color:#cdcbc4;}
.hero .btn-neon{padding:1.1rem 2.2rem;font-size:.8rem;}
.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.66rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.scroll-hint::after{content:'';width:1px;height:34px;background:linear-gradient(var(--muted),transparent);}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  white-space:nowrap;padding:1.15rem 0;background:#000;}
.marquee-track{display:inline-flex;animation:scroll 34s linear infinite;}
.marquee-track span{flex:none;font-family:'Bebas Neue';font-size:1.35rem;color:var(--muted);
  padding:0 1.6rem;display:inline-flex;gap:1.6rem;align-items:center;}
.marquee-track i{color:var(--neon);font-style:normal;}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
body > section{padding:7.5rem 0;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.2rem;
  border-bottom:1px solid var(--line);padding-bottom:1.5rem;margin-bottom:3.2rem;}
.sec-head h2{font-size:clamp(2.3rem,6.5vw,4.4rem);margin-top:.5rem;}
.sec-head .side{max-width:340px;color:var(--muted);font-size:.9rem;line-height:1.6;}

/* ============ WORK ============ */
.filters{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2.4rem;}
.fbtn{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1px solid var(--line);
  padding:.6rem 1.15rem;border-radius:100px;background:none;color:var(--muted);cursor:pointer;transition:.25s;font-family:'DM Sans';}
.fbtn:hover{color:var(--fg);border-color:rgba(255,255,255,.4);}
.fbtn.active{background:var(--neon);color:#000;border-color:var(--neon);}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;
  grid-auto-rows:4px;grid-auto-flow:row dense;align-items:start;}
.tile{position:relative;grid-column:span 6;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  border:1.5px solid rgba(255,255,255,.9);cursor:pointer;background:#0a0a0a;}
.tile.portrait{grid-column:span 3;aspect-ratio:9/16;}
.tile.full{grid-column:span 12;aspect-ratio:21/9;}
.tile-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;background-size:contain;background-position:center;background-repeat:no-repeat;
  width:100%;height:100%;object-fit:contain;background-color:#000;
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s;filter:grayscale(40%) brightness(.7);}
.tile:hover .tile-media{transform:scale(1.06);filter:grayscale(0) brightness(.85);}
.tile-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.8) 100%);}
.tile-body{position:absolute;inset:0;padding:1.2rem 1.3rem;display:flex;flex-direction:column;justify-content:space-between;}
.chip{align-self:flex-start;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.55);border-radius:100px;padding:.34rem .75rem;display:flex;align-items:center;gap:.42rem;
  backdrop-filter:blur(4px);background:rgba(0,0,0,.25);}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--neon);}
.tile h3{font-size:1.75rem;}
.tile .meta{font-size:.72rem;color:#d3d1ca;margin-top:.3rem;display:flex;justify-content:space-between;gap:1rem;}
.tile.hide{display:none;}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);width:58px;height:58px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:.4s;backdrop-filter:blur(4px);}
.tile:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);}
.play::after{content:'';border-left:11px solid var(--fg);border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:3px;}

/* ============ ABOUT / CHARACTER CARD ============ */
.char{display:grid;grid-template-columns:0.85fr 1.15fr;gap:2.5rem;align-items:stretch;}
.char-card{position:relative;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.9);overflow:hidden;
  background:linear-gradient(165deg,#131311,#050505 70%);min-height:460px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.4rem;}
.char-card::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 50% 35%,rgba(200,255,0,.16),transparent 62%);}
.char-card::after{content:'';position:absolute;inset:0;z-index:2;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.char-photo{position:absolute;inset:0;background-size:cover;background-position:50% 18%;
  filter:grayscale(100%) contrast(1.12) brightness(.85);z-index:1;}
.char-card{min-height:520px;}
.char-card .char-name::before{content:"";position:absolute;left:-1.4rem;right:-1.4rem;bottom:-1.4rem;
  height:250px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.9) 62%);z-index:-1;}
.char-rank{position:absolute;top:1.2rem;left:1.3rem;z-index:4;font-family:'Bebas Neue';font-size:3.4rem;
  color:var(--neon);line-height:.8;}
.char-rank small{display:block;font-family:'DM Sans';font-size:.6rem;letter-spacing:.22em;color:var(--fg);
  font-weight:700;margin-top:.3rem;}
.char-badge{position:absolute;top:1.3rem;right:1.3rem;z-index:4;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;border:1px solid var(--neon);color:var(--neon);
  border-radius:100px;padding:.32rem .7rem;}
.char-name{position:relative;z-index:4;}
.char-name h3{font-size:2.6rem;}
.char-name p{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--neon);
  font-weight:700;margin-top:.3rem;}
.char-stats{display:flex;flex-direction:column;justify-content:center;gap:1rem;}
.skill-tier{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--neon);display:flex;align-items:center;gap:.7rem;margin-top:.4rem;}
.skill-tier::after{content:"";flex:1;height:1px;background:var(--line);}
.skill-tier.basic{color:var(--muted);}
.skill-tier.basic ~ div .bar i{background:linear-gradient(90deg,#6d6d68,#4a4a46);}
.char-intro{font-size:1rem;line-height:1.65;color:#c9c7c0;margin-bottom:.6rem;}
.stat-label{display:flex;justify-content:space-between;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;margin-bottom:.42rem;}
.stat-label .val{color:var(--neon);font-family:'Bebas Neue';font-size:1.1rem;letter-spacing:.04em;}
.bar{height:7px;background:#181816;border-radius:100px;overflow:hidden;position:relative;}
.bar i{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--neon),#8fd400);transition:width 1.4s cubic-bezier(.16,1,.3,1);}
.char-meta{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:.8rem;padding-top:1.3rem;border-top:1px solid var(--line);}
.char-meta div span{display:block;font-family:'Bebas Neue';font-size:2rem;color:var(--fg);line-height:1;}
.char-meta div small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}

/* ============ CLIENTS ============ */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);}
.logo-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1.2rem;transition:.35s;text-align:center;}
.logo-cell:hover{background:var(--card);}
.logo-cell .lg{font-family:'Bebas Neue';font-size:1.55rem;color:#9a9a94;transition:.3s;line-height:1;}
.logo-cell:hover .lg{color:var(--fg);}
.logo-cell .rl{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;}

/* ============ VIDEO LIGHTBOX ============ */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.94);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:5vw;
  opacity:0;pointer-events:none;transition:opacity .4s;}
.lb.open{opacity:1;pointer-events:auto;}
.lb-box{width:100%;max-width:1100px;position:relative;}
.lb-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  border:1.5px solid rgba(255,255,255,.9);background:#000;}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lb-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}
.lb-consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;text-align:center;padding:2rem;
  background-size:cover;background-position:center;}
.lb-consent::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.72);}
.lb-consent > *{position:relative;z-index:2;}
.lb-consent p{max-width:520px;font-size:.88rem;line-height:1.6;color:#c9c7c0;}
.lb-consent p a{text-decoration:underline;}
.lb-close{position:absolute;top:-3rem;right:0;background:none;border:1px solid rgba(255,255,255,.35);
  color:var(--fg);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;transition:.3s;font-family:'DM Sans';}
.lb-close:hover{border-color:var(--neon);color:var(--neon);}
.lb-title{margin-top:1.1rem;font-family:'Bebas Neue';font-size:1.8rem;}
.lb-title:empty{display:none;}

/* ---- Clip-Galerie (lokale Videos) ---- */
.lb-clips{background:var(--card);border:1.5px solid rgba(255,255,255,.9);border-radius:var(--r);
  padding:1.6rem;max-height:80vh;overflow-y:auto;}
.clip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;}
.clip-grid video{width:100%;max-height:62vh;object-fit:contain;border-radius:12px;
  border:1px solid var(--line);background:#000;display:block;}
.lb-ig{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);}
.lb-ig p{font-size:.8rem;color:var(--muted);margin-bottom:.8rem;}

/* ---- Reel-Übersicht (Instagram-Links) ---- */
.lb-reels{background:var(--card);border:1.5px solid rgba(255,255,255,.9);border-radius:var(--r);
  padding:2rem 1.8rem;}
.lb-reels > p{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:1.4rem;max-width:560px;}
.reel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;}
.reel{display:flex;flex-direction:column;gap:.55rem;border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1rem;transition:.3s;background:#0a0a09;}
.reel:hover{border-color:var(--neon);transform:translateY(-3px);}
.reel .rn{font-family:'Bebas Neue';font-size:1.7rem;color:var(--neon);line-height:.9;}
.reel .rl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;
  display:flex;align-items:center;gap:.35rem;}
.reel:hover .rl{color:var(--fg);}

/* ============ BOOKING ============ */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:3rem;}
.pack{position:relative;border:1.5px solid var(--line);border-radius:var(--r);padding:1.8rem 1.5rem 1.6rem;
  background:var(--card);cursor:pointer;transition:.3s;display:flex;flex-direction:column;gap:.75rem;
  user-select:none;}
.pack:hover{border-color:rgba(255,255,255,.4);transform:translateY(-3px);}
.pack.sel{border-color:var(--neon);background:rgba(200,255,0,.05);}
.pack .n{font-size:.6rem;letter-spacing:.22em;color:var(--muted);font-weight:700;}
.pack.sel .n{color:var(--neon);}
.pack h3{font-size:1.7rem;line-height:.95;}
.pack ul{list-style:none;display:flex;flex-direction:column;gap:.42rem;margin-top:.35rem;padding:0;}
.pack li{font-size:.82rem;color:#adaba5;line-height:1.45;padding-left:.95rem;position:relative;}
.pack li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:1px;background:var(--muted);}
.pack.sel li::before{background:var(--neon);}
.pack .tick{position:absolute;top:1.4rem;right:1.4rem;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);transition:.3s;}
.pack.sel .tick{background:var(--neon);border-color:var(--neon);}
.pack.sel .tick::after{content:'';position:absolute;top:4px;left:6.5px;width:5px;height:9px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg);}

.bform{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.2rem;max-width:900px;}
.bform > div{display:flex;flex-direction:column;}
.bform .full{grid-column:1/-1;}
.bform label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:.55rem;}
.bform input,.bform textarea{width:100%;background:#0b0b0a;border:1px solid var(--line);
  border-radius:12px;padding:.9rem 1.05rem;color:var(--fg);font-family:'DM Sans',sans-serif;
  font-size:.92rem;transition:.25s;}
.bform input::placeholder,.bform textarea::placeholder{color:#4f4f4b;}
.bform input:focus,.bform textarea:focus{outline:none;border-color:var(--neon);
  box-shadow:0 0 0 3px rgba(200,255,0,.10);}
.bform textarea{resize:vertical;min-height:130px;line-height:1.55;}
.bform .btn-neon{margin-top:.4rem;padding:1.05rem 2.3rem;font-size:.78rem;align-self:flex-start;}
.bform .hint{font-size:.76rem;color:var(--muted);margin-top:.9rem;line-height:1.55;}
@media(max-width:640px){.bform{grid-template-columns:1fr;}}

/* ============ CONTACT ============ */
.contact{background:linear-gradient(180deg,#000,#050505);}
.contact h2{font-size:clamp(3rem,12vw,9rem);margin:1rem 0 2.2rem;}
.contact h2 .neon{color:var(--neon);}
.contact-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:2rem;}
.clinks{display:flex;flex-direction:column;gap:.5rem;}
.clinks a{font-size:1.15rem;font-weight:500;width:fit-content;transition:.25s;}
.clinks a::after{content:'↗';margin-left:.5rem;color:var(--neon);}
.clinks a:hover{color:var(--neon);}
.cmeta{font-size:.82rem;color:var(--muted);line-height:1.7;text-align:right;}

/* ============ IMPRESSUM ============ */
.legal{padding:6rem 0 4rem;border-top:1px solid var(--line);background:#000;}
.legal h2{font-size:clamp(2rem,5.5vw,3.4rem);margin:.8rem 0 2.4rem;}
.legal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem;max-width:900px;
  font-size:.9rem;line-height:1.75;color:#c3c1ba;}
.legal-grid h3{font-family:'DM Sans';font-size:1rem;font-weight:700;color:var(--fg);
  text-transform:none;letter-spacing:0;margin-bottom:.5rem;}
.legal-grid .full{grid-column:1/-1;}
.legal-grid a{text-decoration:underline;}
.legal-grid em{color:var(--muted);font-size:.85rem;}

body > footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  padding:2rem 5vw;border-top:1px solid var(--line);font-size:.7rem;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;}
body > footer a:hover{color:var(--neon);}

/* Nur mit aktivem JS ausblenden: sonst wäre die Seite bei einem Skriptfehler leer */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.js .reveal.in{opacity:1;transform:none;}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  /* Ab hier bricht der Hero-Fuß um und der Button liefe in den Scroll-Hinweis */
  .scroll-hint{display:none;}
  .char{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(4,1fr);}
  .tile,.tile.wide,.tile.wide3,.tile.full{grid-column:span 4;aspect-ratio:16/10;}
  .tile.portrait{grid-column:span 2;aspect-ratio:9/16;}
  .legal-grid{grid-template-columns:1fr;}
  .cmeta{text-align:left;}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr;}
  .tile,.tile.portrait,.tile.full{grid-column:span 1;}
  .tile.portrait{aspect-ratio:9/16;}
  .head-right .btn-neon{display:none;}
  .hero-top{padding-top:7rem;}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track,.hero .fallback{animation:none;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .hero h1 .ln span{transform:none;animation:none;}
  html{scroll-behavior:auto;}
}

/* ===== Formular: Honeypot, Pflichtfeld-Marker, Einwilligung, Statusmeldung ===== */
.bform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.bform .req{color:var(--neon);}
.bform .check{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;line-height:1.5;
  color:var(--muted);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;margin:.4rem 0;}
.bform .check:hover{color:#a3a3a0;}
.bform .check input{width:18px;height:18px;flex:none;margin-top:.1rem;accent-color:var(--neon);cursor:pointer;}
.bform .check a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;}
.bform .fstatus{margin-top:.9rem;font-size:.84rem;line-height:1.5;min-height:1.2em;color:var(--muted);}
.bform .fstatus.ok{color:var(--neon);}
.bform .fstatus.err{color:#ff6b5e;}
.bform button[disabled]{opacity:.55;cursor:progress;}
.bform input:user-invalid,.bform textarea:user-invalid{border-color:#ff6b5e;}

/* ===== Tastaturbedienung: sichtbarer Fokus überall ===== */
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:4px;}
.tile:focus-visible{outline-offset:4px;}
.tile:focus-visible .play{opacity:1;transform:translate(-50%,-50%) scale(1);}
.pack:focus-visible{outline-offset:4px;}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--neon);color:#000;
  padding:.9rem 1.4rem;font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;}
.skip:focus{left:1rem;top:1rem;}

/* ===== Case Study: Detailansicht in der Lightbox ===== */
.lb-case{background:var(--card);border:1.5px solid rgba(255,255,255,.9);border-radius:var(--r);
  padding:clamp(1.4rem,4vw,2.6rem);max-height:82vh;overflow-y:auto;overscroll-behavior:contain;}
.cs-head{border-bottom:1px solid var(--line);padding-bottom:1.4rem;margin-bottom:1.6rem;}
.cs-head .chip{display:inline-flex;margin-bottom:.9rem;}
.cs-head h2{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:1.2rem;}
.cs-meta{display:flex;flex-wrap:wrap;gap:2rem 3rem;}
.cs-meta dt{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--neon);
  font-weight:700;margin-bottom:.35rem;}
.cs-meta dd{font-size:.95rem;color:var(--fg);}
.cs-text{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem 2.4rem;margin-bottom:1.8rem;}
.cs-text h3{font-size:1.05rem;letter-spacing:.12em;margin-bottom:.5rem;color:var(--muted);}
.cs-text p{font-size:.94rem;line-height:1.65;color:var(--fg);}
.cs-media{margin-bottom:1.6rem;}
.cs-media iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block;}
.cs-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  border-top:1px solid var(--line);padding-top:1.5rem;margin-top:.4rem;}
.cs-copy{background:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.8rem 1.3rem;border-radius:100px;transition:border-color .25s,color .25s;}
.cs-copy:hover{border-color:var(--fg);color:var(--fg);}
@media(max-width:640px){
  .lb-case{max-height:88vh;}
  .cs-meta{gap:1.2rem 2rem;}
  .cs-foot .btn-neon{width:100%;text-align:center;}
}

/* ===== Feinschliff ===== */
/* Sprungziele nicht unter den fixierten Kopf schieben */
:target,section[id],#top{scroll-margin-top:6rem;}

/* Touch-Geräte kennen kein Hover: Play-Symbol und Bildschärfe dauerhaft zeigen */
@media (hover:none){
  .tile .play{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .tile .tile-media{filter:grayscale(0) brightness(.8);}
}

/* Ruhiger Modus: auch die neuen Bausteine halten still */
@media (prefers-reduced-motion: reduce){
  .tile-media,.tile:hover .tile-media{transition:none;transform:none;}
  .btn-neon:hover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   TIMECODE — die Seite als ein durchlaufender Take
   HUD unten links, Schnittleiste rechts, Sucherrahmen im Hero.
   Alles Beiwerk ist zurückhaltend: die Arbeiten bleiben die Hauptsache.
   ============================================================ */
:root{
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---- HUD: mitlaufender Timecode ---- */
.hud{position:fixed;left:5vw;bottom:1.5rem;z-index:1150;display:flex;align-items:center;gap:.75rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);
  padding:.55rem .9rem;border:1px solid var(--line);border-radius:100px;
  background:rgba(5,5,5,.72);backdrop-filter:blur(10px);pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;}
.hud.on{opacity:1;transform:none;}
.hud .rec{width:7px;height:7px;border-radius:50%;background:#ff3b30;flex:none;
  box-shadow:0 0 10px rgba(255,59,48,.8);animation:rec 2s ease-in-out infinite;}
@keyframes rec{0%,45%{opacity:1}55%,100%{opacity:.25}}
.hud .tc{color:var(--fg);font-variant-numeric:tabular-nums;}
.hud .hud-clip{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;
  padding-left:.75rem;border-left:1px solid var(--line);white-space:nowrap;}

/* ---- Schnittleiste rechts: Position im Film und Navigation zugleich ---- */
.rail{position:fixed;right:1.6rem;top:50%;transform:translateY(-50%);z-index:1150;
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-end;
  opacity:0;transition:opacity .6s ease;}
.rail.on{opacity:1;}
.rail button{position:relative;display:flex;align-items:center;gap:.6rem;background:none;border:0;
  cursor:pointer;padding:.2rem 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:transparent;transition:color .3s;}
.rail button::after{content:'';width:26px;height:2px;background:var(--muted);opacity:.45;
  transition:width .35s cubic-bezier(.16,1,.3,1),background .3s,opacity .3s;flex:none;}
.rail button:hover{color:var(--muted);}
.rail button:hover::after{opacity:.9;}
.rail button[aria-current="true"]{color:var(--neon);}
.rail button[aria-current="true"]::after{width:44px;background:var(--neon);opacity:1;
  box-shadow:0 0 12px rgba(200,255,0,.5);}

/* ---- Schnittkante beim Abschnittswechsel ---- */
.cutline{position:fixed;left:0;right:0;top:0;height:2px;z-index:1400;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  transform:scaleX(0);opacity:0;}
.cutline.flash{animation:cut .5s cubic-bezier(.16,1,.3,1);}
@keyframes cut{
  0%{transform:scaleX(0);opacity:0;}
  25%{transform:scaleX(1);opacity:1;}
  100%{transform:scaleX(1);opacity:0;}
}

/* ---- Sucherrahmen im Hero ---- */
.vf{position:absolute;inset:clamp(1.2rem,4vw,2.6rem);z-index:3;pointer-events:none;}
.vf i{position:absolute;width:26px;height:26px;border:1px solid rgba(244,242,236,.28);}
.vf i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;}
.vf i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;}
.vf i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;}
.vf i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;}

/* ---- Laufzeit-Marke auf den Kacheln ---- */
.tile-tc{position:absolute;top:1.2rem;right:1.3rem;z-index:3;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.08em;color:rgba(244,242,236,.62);
  display:flex;align-items:center;gap:.4rem;transition:color .3s;}
.tile-tc::before{content:'';width:5px;height:5px;border-radius:50%;background:#ff3b30;opacity:.75;}
.tile:hover .tile-tc,.tile:focus-visible .tile-tc{color:var(--fg);}

/* ---- Abschnittsmarken bekommen ihren Timecode ---- */
.sec-tc{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--muted);margin-top:.5rem;font-variant-numeric:tabular-nums;}

/* ---- Clip-Leiste in der Case Study ---- */
.cs-strip{display:flex;gap:3px;margin:0 0 1.4rem;height:34px;align-items:stretch;}
.cs-strip span{position:relative;background:#151513;border-radius:3px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.58rem;color:var(--muted);
  letter-spacing:.06em;overflow:hidden;min-width:0;}
.cs-strip span::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);opacity:.6;}
.cs-strip-legende{font-family:var(--mono);font-size:.62rem;color:var(--muted);
  margin:-.9rem 0 1.4rem;letter-spacing:.08em;}

@media(max-width:900px){
  .rail{display:none;}                       /* auf schmalen Displays übernimmt das Menü */
  .hud{left:1rem;bottom:1rem;font-size:.62rem;gap:.55rem;padding:.45rem .75rem;}
  .hud .hud-clip{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hud .rec{animation:none;}
  .cutline{display:none;}
  .hud,.rail{transition:none;}
}

/* ============================================================
   FILMKLAPPE — Auftakt beim ersten Aufruf einer Sitzung
   Ohne die Klasse .slate-on am <html> ist sie nie sichtbar:
   Besucher ohne JavaScript sehen sofort den Inhalt.
   Die Animation endet in visibility:hidden — die Seite ist also
   auch dann frei, wenn main.js gar nicht lädt.
   ============================================================ */
.slate{display:none;}
html.slate-on .slate{
  display:flex;position:fixed;inset:0;z-index:3000;align-items:center;justify-content:center;
  background:var(--bg);animation:slate-weg .26s ease .34s forwards;}
@keyframes slate-weg{to{opacity:0;visibility:hidden;}}

.slate-board{position:relative;width:min(420px,80vw);border:1.5px solid rgba(244,242,236,.9);
  border-radius:6px;overflow:hidden;background:#0b0b0a;
  animation:slate-auf .18s ease both;}
@keyframes slate-auf{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* Der Klappenbalken schlägt zu */
.slate-stick{display:flex;height:34px;transform-origin:0 100%;
  animation:slate-klapp .2s cubic-bezier(.5,0,.75,0) .12s both;}
.slate-stick i{flex:1;background:var(--fg);}
.slate-stick i:nth-child(even){background:#0b0b0a;}
@keyframes slate-klapp{from{transform:rotate(-24deg)}to{transform:rotate(0)}}

/* Kurzer Lichtblitz im Moment des Zuschlagens */
.slate-board::after{content:'';position:absolute;inset:0;background:var(--fg);opacity:0;
  pointer-events:none;animation:slate-blitz .16s ease .3s both;}
@keyframes slate-blitz{0%{opacity:.55}100%{opacity:0}}

.slate-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;}
.slate-body > div{display:flex;align-items:baseline;gap:.6rem;}
.slate-body span{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:.58rem;}
.slate-body b{color:var(--fg);font-weight:400;margin-right:.9rem;}
.slate-body > div:last-child b:last-child{color:var(--neon);margin-right:0;}