/* Clevanta · Scroll-Film ganz oben auf der Startseite (flüssiges Gold formt das Logo) */

:root{--film-bg:#050403;--film-text:#F4F1EA;--film-soft:#B9B2A6}

/* Kopfzeile liegt auf der Startseite über dem Film */
.has-film .top{position:fixed;left:0;right:0}
.has-film main{padding-top:0}
.top.on-dark{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
.top.on-dark .brand span,.top.on-dark .nav a{color:var(--film-text)}
.top.on-dark .nav a:hover{color:#fff}
.top.on-dark .nav .btn{background:var(--film-text);border-color:var(--film-text);color:var(--ink)}
.top.on-dark .nav .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.top.on-dark .burger span{background:var(--film-text)}
.top .brand img,.top .nav a,.top .brand span{transition:color .35s var(--ease)}
@media (max-width:980px){
  .top.on-dark.is-open{background:var(--film-bg)}
  .top.on-dark .nav{background:var(--film-bg);border-color:rgba(255,255,255,.12)}
  .top.on-dark .nav a{border-color:rgba(255,255,255,.12)}
}

.film{position:relative;height:calc(var(--app-h,100vh) * 5.6);background:var(--film-bg);color:var(--film-text)}
.film-stage{position:sticky;top:0;height:var(--app-h,100vh);overflow:hidden}
.film-cv,.film-poster{position:absolute;inset:0;width:100%;height:100%}
.film-poster{object-fit:cover;object-position:62% 50%;transition:opacity .6s var(--ease)}
.film.is-ready .film-poster{opacity:0}
.film-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,4,3,.78) 0%,rgba(5,4,3,.5) 30%,rgba(5,4,3,0) 50%)}

.band{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:96px var(--gut) 72px;pointer-events:none;opacity:0;text-shadow:0 1px 2px rgba(5,4,3,.9),0 4px 24px rgba(5,4,3,.7)}
.band-inner > *{max-width:min(40vw,560px)}
.band .btn{text-shadow:none}
.band.is-live{pointer-events:auto}
.band-inner{width:100%;max-width:var(--wrap);margin:0 auto}
.b-big{font-family:var(--head);font-weight:700;font-size:clamp(2.2rem,3.9vw,3.9rem);line-height:1.04;letter-spacing:-.03em;color:var(--film-text)}
.b-big .ln{display:block;opacity:calc(var(--k,1));transform:translateY(calc((1 - var(--k,1)) * -16px))}
.b-big .ln:nth-child(2){opacity:clamp(0,calc(var(--k,1) * 1.6 - .6),1);transform:translateY(calc((1 - var(--k,1)) * -26px));color:var(--gold)}
.b-small{margin-top:22px;font-size:1.1rem;color:var(--film-soft);max-width:420px;opacity:clamp(0,calc(var(--k,1) * 2 - 1),1)}

.band-final h1{color:var(--film-text);font-size:clamp(2.3rem,3.9vw,4rem);max-width:min(40vw,600px)}
.band-final h1 .ln{display:block;opacity:var(--k,1);transform:translateY(calc((1 - var(--k,1)) * -18px))}
.band-final h1 .ln + .ln{color:var(--gold);opacity:clamp(0,calc(var(--k,1) * 1.6 - .6),1)}
.band-final .lead{margin-top:24px;color:var(--film-soft);max-width:440px;opacity:clamp(0,calc(var(--k,1) * 2 - 1),1)}
.band-final .hero-actions{margin-top:32px;opacity:clamp(0,calc(var(--k,1) * 2.5 - 1.5),1)}
.band-final .btn{background:var(--film-text);border-color:var(--film-text);color:var(--ink)}
.band-final .btn:hover{background:#fff;border-color:#fff}
.band-final .link{color:var(--film-text)}

.film-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.85rem;color:var(--film-soft);letter-spacing:.02em;pointer-events:none;transition:opacity .5s var(--ease)}
.film-cue i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.film.is-moving .film-cue{opacity:0}

/* Hochkant (Handy): Bild unten, Text oben */
@media (max-aspect-ratio:4/5){
  .film{height:calc(var(--app-h,100vh) * 5.2)}
  .film-poster{object-position:50% 50%}
  .film-shade{background:linear-gradient(180deg,rgba(5,4,3,.9) 0%,rgba(5,4,3,.55) 38%,rgba(5,4,3,0) 55%)}
  .band{justify-content:flex-start;padding-top:calc(78px + 5vh)}
  .band-inner > *{max-width:100%}
  .b-big{font-size:clamp(2rem,9.4vw,3rem)}
  .band-final{justify-content:space-between;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .band-final h1{font-size:clamp(2rem,9.2vw,2.9rem);max-width:100%}
  .band-final .lead{display:none}
  .band-final .hero-actions{margin-top:0}
  .band-final .hero-actions .btn{width:100%;justify-content:center}
  .band-final .hero-actions .link{display:none}
  .film-cue{bottom:18px}
}

/* Bewegung reduziert: nur Endbild und Schlusstext */
@media (prefers-reduced-motion:reduce){
  .film{height:100vh;height:100svh}
  .film-cv{display:none}
  .film.is-ready .film-poster{opacity:1}
  .band{opacity:0 !important}
  .band-final{opacity:1 !important;pointer-events:auto}
  .film-cue{display:none}
}
.no-js .film{height:100vh}
.no-js .band-final{opacity:1}

/* Beim Herausscrollen aus dem Film: Menü bekommt einen dunklen Verlauf, damit nichts durchscheint */
.top.on-dark.is-scrolled{background:linear-gradient(180deg,rgba(5,4,3,.92) 0%,rgba(5,4,3,.7) 70%,rgba(5,4,3,0) 100%)}

/* weicher Übergang vom Film in die Seite */
.film-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16vh;pointer-events:none;background:linear-gradient(180deg,rgba(5,4,3,0),#050403)}
.film-stage::after{z-index:1}
.band,.film-cue{z-index:2}