@font-face{font-family:'HelveticaLTStd-Comp';src:local('HelveticaLTStd-Comp'),local('Helvetica LT Std Condensed'),local('HelveticaNeue-CondensedBold');font-weight:100 900}
:root{
  --bg:#000;--fg:#fff;--fg2:rgba(255,255,255,.42);--acc:#D966FF;--brd:rgba(255,255,255,.1);
  --font:'HelveticaLTStd-Comp','Arial Narrow','Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:clamp(12px,1.1vw,16px)}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:300;overflow:hidden;cursor:none;width:100vw;height:100vh}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.025;pointer-events:none;z-index:100}

/* CURSOR */
#cur{position:fixed;pointer-events:none;z-index:2147483647;transform:translate(-50%,-50%);width:2.75rem;height:2.5rem;transition:transform .15s ease}
#cur svg{width:100%;height:100%}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:2.2em 4em}
.n-logo{display:flex;align-items:center;text-decoration:none;cursor:none}
.n-links{display:flex;gap:2.8em;list-style:none}
.n-links li{display:flex;align-items:center}
.n-links a{font-family:var(--font);font-size:.78em;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.92);text-decoration:none;transition:color .3s,opacity .3s;cursor:none;position:relative;text-shadow:0 1px 4px rgba(0,0,0,.35);font-weight:600}
.n-links a::after{content:'';position:absolute;bottom:-.2em;left:0;width:0;height:1px;background:var(--acc);transition:width .35s}
.n-links a:hover,.n-links a.act{color:#fff;opacity:1}
.n-links a:hover::after,.n-links a.act::after{width:100%}
.n-links a:hover::after,.n-links a.act::after{width:100%}
.lang-toggle{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-family:var(--font);
  font-size:.82em;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  padding:.62em .95em;
  border-radius:999px;
  cursor:none;
  transition:all .25s ease;
}
.lang-toggle:hover{border-color:var(--acc);color:var(--acc)}

/* PAGE SYSTEM */
.page{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
.page.active{opacity:1;visibility:visible}
.page.scrollable{overflow-y:auto;overflow-x:hidden}
.page.scrollable::-webkit-scrollbar{width:3px}
.page.scrollable::-webkit-scrollbar-track{background:transparent}
.page.scrollable::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}

/* HOME */
#page-home{display:flex;align-items:center;justify-content:center;padding:0 6em}
.home-text{font-family:var(--font);font-weight:200;font-size:clamp(.9rem,1.5vw,1.6rem);line-height:2;letter-spacing:.07em;text-align:center;color:var(--fg);max-width:52em;opacity:0;animation:fadeUp .9s ease .3s forwards}

/* REEL */
#page-reel{display:flex;align-items:center;justify-content:center;background:#000}
.r-wrap{position:relative;width:88%;max-width:86em;aspect-ratio:16/9;overflow:hidden;cursor:none}
.r-thumb{width:100%;height:100%;object-fit:cover;filter:brightness(.52);transition:filter .45s,transform .7s;display:block}
.r-wrap:hover .r-thumb{filter:brightness(.35);transform:scale(1.012)}
.r-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1.4em}
.p-btn{width:4.75em;height:4.75em;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);backdrop-filter:blur(12px);transition:all .35s}
.r-wrap:hover .p-btn{background:rgba(200,100,255,.12);border-color:var(--acc);transform:scale(1.08)}
.r-lbl{font-family:var(--font);font-size:.68em;letter-spacing:.38em;text-transform:uppercase;color:var(--fg2)}
.r-meta{position:absolute;bottom:3em;left:4em}
.r-meta h2{font-family:var(--font);font-size:1.3em;font-weight:700}
.r-meta span{font-family:var(--font);font-size:.65em;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}

/* PORTFOLIO */
#page-portfolio{padding:0}
.p-grid{display:flex;flex-direction:column}
.p-card{position:relative;overflow:hidden;cursor:none;width:100%}
.p-thumb{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;filter:brightness(.72);transition:filter .55s,transform .7s}
.p-card:hover .p-thumb{filter:brightness(.35);transform:scale(1.025)}
.p-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .4s ease}
.p-card:hover .p-ov{opacity:0}
.p-title{font-family:var(--font);font-size:clamp(.9rem,1.6vw,1.5rem);font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:#fff;text-align:center}

/* THE GRIND */
#page-grind{padding:0;background:#000;overflow-y:auto}
.grind-mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,8vw);gap:2px;width:100%;padding:0;min-height:100vh}
.gm{overflow:hidden;background:#000;min-height:0;pointer-events:none}
.gm img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.gm:hover img{filter:none;transform:none}
.gm.bottom-half img{object-position:center bottom}
.gm.p0 {grid-column:1/7;grid-row:1/6}
.gm.p1 {grid-column:7/13;grid-row:1/5}
.gm.p2 {grid-column:1/5;grid-row:6/9}
.gm.p3 {grid-column:5/9;grid-row:5/10}
.gm.p4 {grid-column:9/13;grid-row:5/11}
.gm.p5 {grid-column:1/13;grid-row:9/13}

/* CONTACT — no scroll, everything fits */
#page-contact{
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-start;
  padding:8.5em 3em 4em 6%;
  gap:0;overflow-y:auto;overflow-x:hidden;
}
.c-head{
  font-family:var(--font);font-size:clamp(1.6rem,3vw,3rem);
  font-weight:700;line-height:1.1;
  margin-bottom:1.6em;
  text-align:center;
  align-self:flex-start;
}
.c-head em{font-style:italic;color:var(--acc)}
.c-subtitle{
  font-family:var(--font);font-size:clamp(.8rem,1.5vw,1.2rem);
  font-weight:300;color:#888;
  margin-bottom:2em;
  align-self:flex-start;
}
.c-direct{
  font-family:var(--font);font-size:clamp(1.2rem,2vw,1.8rem);
  font-weight:700;color:var(--fg);
  margin-top:2em;margin-bottom:1em;
  align-self:flex-start;
}
.c-icons{
  display:flex;gap:2em;align-items:center;
  margin-top:.9em;
}
.c-ico-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;transition:color .3s,transform .3s;cursor:none}
.c-ico-btn:hover{color:var(--acc);transform:scale(1.15)}
.c-ico-btn svg{width:1.6em;height:1.6em}

/* CONTACT FORM */
.contact-form-wrapper{
  position:relative;
  width:100%;
  max-width:800px;
  margin-bottom:2em;
}
.contact-form{
  width:100%;
}
.submit-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:20;
  transition:opacity .2s ease,visibility .2s ease;
}
.submit-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.submit-overlay img{
  width:clamp(12rem,18vw,24rem);
  max-width:80%;
}
.submit-overlay.active img{
  animation:logoFly 1.7s cubic-bezier(0.85,0,0.9,1) forwards;
  animation-fill-mode:forwards;
}
.thank-you-message{
  display:none;
  margin-top:2em;
  font-family:var(--font);
  font-size:clamp(1.4rem,2vw,2rem);
  font-weight:700;
  color:#fff;
  line-height:1.2;
  text-align:center;
}
.contact-form.hidden{
  display:none;
}
.form-steps{
  display:grid;
  gap:1.25em;
  margin-bottom:2em;
}
.step-indicator,
.step-labels{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  align-items:center;
}
.step{
  width:2.75em;height:2.75em;
  border:2px solid rgba(255,255,255,.3);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-size:.85em;font-weight:700;
  color:#888;
  transition:all .3s;
  justify-self:center;
}
.step.active{
  border-color:var(--acc);color:var(--fg);
  background:var(--acc);
}
.step-labels{
  gap:1rem;
}
.step-label{
  font-family:var(--font);font-size:.9em;font-weight:300;
  color:#888;
  transition:color .3s;
  text-align:center;
}
.step-label.active{
  color:var(--fg);
}
.form-content{
  position:relative;overflow:hidden;
}
.form-step{
  display:none;
  opacity:0;
  transform:translateX(20px);
  transition:all .4s ease;
}
.form-step.active{
  display:block;
  opacity:1;
  transform:translateX(0);
}
.form-step h3{
  font-family:var(--font);font-size:1.5em;font-weight:700;
  color:var(--fg);margin-bottom:.5em;
}
.form-step p{
  font-family:var(--font);font-size:1em;color:#888;
  margin-bottom:1.5em;
}
.options{
  display:flex;flex-wrap:wrap;gap:1em;
}
.option-btn{
  padding:1em 1.5em;
  border:2px solid rgba(255,255,255,.3);
  background:none;
  color:#fff;
  font-family:var(--font);font-size:.9em;
  border-radius:.5em;
  cursor:pointer;
  transition:all .3s;
}
.option-btn:hover,.option-btn.selected{
  border-color:var(--acc);background:var(--acc);
  color:#000;
}
.sub-step{
  margin-bottom:2em;
}
.sub-step h4{
  font-family:var(--font);font-size:1.2em;font-weight:700;
  color:var(--fg);margin-bottom:1em;
}
textarea{
  width:100%;height:150px;
  padding:1em;
  border:2px solid rgba(255,255,255,.3);
  background:#000;
  color:#fff;
  font-family:var(--font);
  border-radius:.5em;
  resize:vertical;
}
.form-field{
  margin-bottom:1.5em;
}
.field-label{
  display:block;
  font-family:var(--font);
  font-size:.85em;
  font-weight:300;
  color:#888;
  margin-bottom:.6em;
}
input{
  width:100%;
  padding:1em;
  margin-bottom:1em;
  border:2px solid rgba(255,255,255,.3);
  background:#000;
  color:#fff;
  font-family:var(--font);
  border-radius:.5em;
}
.submit-btn{
  padding:1em 2em;
  border:2px solid var(--acc);
  background:var(--acc);
  color:#000;
  font-family:var(--font);font-weight:700;
  border-radius:.5em;
  cursor:pointer;
  transition:all .3s;
}
.submit-btn:hover{
  background:#000;color:var(--acc);
}
.form-navigation{
  display:flex;justify-content:space-between;
  margin-top:2em;
}
.nav-btn{
  padding:1em 2em;
  border:2px solid rgba(255,255,255,.3);
  background:none;
  color:#fff;
  font-family:var(--font);font-weight:700;
  border-radius:.5em;
  cursor:pointer;
  transition:all .3s;
}
.nav-btn:hover:not(:disabled){
  border-color:var(--acc);color:var(--acc);
}
.nav-btn:disabled{
  opacity:.5;cursor:not-allowed;
}

/* VIDEO MODAL */
.v-ov{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(2px);
  z-index:9000;          /* höher als body::after und Nav */
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
       /* falls irgendwo global was überschreibt */

.v-ov.on{
  display:flex;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.v-wrap{
  position:relative;
  width:90vw;
  max-width:80em;
  /* Fallback height for browsers where aspect-ratio can collapse in flex overlays */
  height:min(80vh,calc(90vw * 9 / 16));
  max-height:80vh;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
  z-index:9100;
}
.v-wrap iframe{width:100%;height:100%;border:none}
.v-close{position:fixed;top:1.8em;right:2em;width:2.75em;height:2.75em;border:1px solid var(--brd);background:none;color:var(--fg);font-size:.85em;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:701;font-family:var(--font)}
.v-close:hover{background:var(--fg);color:#000}

/* MODAL */
.m-ov{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:600;opacity:0;visibility:hidden;transition:all .4s;overflow-y:auto}
.m-ov.on{opacity:1;visibility:visible}
.m-box{max-width:60em;margin:6em auto 4em;padding:0 2em;transform:translateY(22px);transition:transform .4s}
.m-ov.on .m-box{transform:translateY(0)}
.m-close{position:fixed;top:2em;right:2.5em;width:2.75em;height:2.75em;border:1px solid var(--brd);background:none;color:var(--fg);font-size:.8em;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:601;font-family:var(--font)}
.m-close:hover{background:var(--fg);color:var(--bg)}

@keyframes fadeUp{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:translateY(0)}}

@keyframes logoFly{
  0%{transform:translateY(0) scale(1);opacity:1}
  100%{transform:translateY(-520%) scale(2.8);opacity:0}
}

@media(max-width:900px){
  nav{padding:1.4em 1.2em;align-items:flex-start}
  .n-links{gap:.9em;flex-wrap:wrap;justify-content:flex-end;max-width:70%}
  .n-links a,.lang-toggle{font-size:.62em;letter-spacing:.16em}
  #page-home{padding:0 2.5em}
  .grind-mosaic{grid-template-columns:1fr;grid-auto-rows:minmax(55vw,auto);gap:2px}
  .r-wrap{width:94%}
  .r-meta{left:1.3em;bottom:1.3em}
  .v-wrap{width:94vw;height:min(75vh,calc(94vw * 9 / 16))}
  #page-contact{padding:7em 2em 3.5em;}
  .form-step h3{font-size:1.25em}
  .option-btn,.nav-btn{width:100%}
  .options{flex-direction:column}
}
@media(max-width:600px){
  nav{padding:1em .8em}
  .n-logo svg{width:64px;height:58px}
  .n-links{gap:.5em;max-width:75%}
  .n-links a,.lang-toggle{font-size:.56em;letter-spacing:.12em}
  .c-head{font-size:1.6em}.c-img-wrap{width:92%}
  .grind-mosaic{grid-template-columns:1fr;grid-auto-rows:minmax(55vw,auto);gap:2px}
  #page-home{padding:0 1.25em}
  .home-text{font-size:.88rem;line-height:1.7}
  #page-contact{padding:6.6em 1.1em 2.5em}
  .contact-form-wrapper{max-width:100%}
  .v-close{top:1em;right:1em}
}

@media (hover:none), (pointer:coarse){
  body{cursor:auto}
  #cur{display:none}
  .n-links a,.n-logo,.p-card,.v-close,.m-close,.c-ico-btn,.lang-toggle{cursor:pointer}
}