/* =========================================================
   Visionwerk – Personal Branding Videoproduktion, Graz
   Konzept: Scrollen = Produktion durchlaufen. Jede Szene ein
   Arbeitsschritt, hell/dunkel im Wechsel, Schnitt-Timeline unten.
   ========================================================= */

@font-face { font-family: "Montserrat"; font-weight: 200; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-200-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  --petrol-1: #284553;
  --petrol-2: #15242B;
  --petrol-3: #060A0D;
  --accent-d: #6F9BAE;
  --accent-l: #284553;
  --rec: #E5484D;
  --chrome: linear-gradient(180deg, #FFF 0%, #E3E7EA 42%, #8C969B 56%, #F5F7F8 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 32px;
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(110px, 13vw, 180px);
  --tl-h: 64px;
}

/* Farbwelten: jede Szene ist .dark oder .light */
.dark {
  --bg: #000; --fg: #fff; --dim: rgba(255,255,255,0.65); --faint: rgba(255,255,255,0.38);
  --line: rgba(255,255,255,0.14); --card: rgba(255,255,255,0.035); --accent: var(--accent-d);
  background-color: var(--bg); color: var(--fg);
}
.light {
  --bg: #fff; --fg: #000; --dim: rgba(0,0,0,0.62); --faint: rgba(0,0,0,0.4);
  --line: rgba(0,0,0,0.12); --card: rgba(0,0,0,0.03); --accent: var(--accent-l);
  background: radial-gradient(110% 80% at 0% 0%, #D5E2E7 0%, rgba(213,226,231,0.35) 32%, #fff 62%), #fff;
  color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: #fff; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-d); color: #000; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.section { padding: var(--section) 0 calc(var(--section) + 20px); }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 96px 0 calc(var(--tl-h) + 12px); }

/* Filmkorn */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }

/* Typografie */
.h2, .h3 { margin: 0; letter-spacing: -0.03em; line-height: 1; font-weight: 200; }
.h2 { font-size: clamp(40px, 5.8vw, 92px); }
.h3 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -0.025em; }
.b { font-weight: 800; }
.chrome { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.lead { font-size: clamp(17px, 1.45vw, 20px); font-weight: 300; color: var(--dim); max-width: 32em; margin: 28px 0 0; }
.num { font-size: 12px; font-weight: 600; letter-spacing: 0.28em; color: var(--accent); }
.note { font-size: 12px; color: var(--faint); margin: 24px 0 0; }
.slate { display: inline-flex; flex-wrap: wrap; margin: 0 0 28px; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.slate span { padding: 8px 16px 8px 18px; }
.slate span + span { border-left: 1px solid var(--line); color: var(--dim); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: #fff; color: #000; border: 1px solid #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: opacity .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease); }
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--ghost:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.btn--dark { background: #000; color: #fff; border-color: #000; }
.btn--small { min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn[disabled] { opacity: 0.5; cursor: progress; }

/* Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background-color .6s var(--ease), border-color .6s var(--ease); border-bottom: 1px solid transparent; color: #fff; }
.nav.is-scrolled, .nav--solid { background: rgba(0,0,0,0.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: rgba(255,255,255,0.12); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; padding: 0 var(--gutter); max-width: 1600px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 16px; }
.brand img { width: 54px; height: auto; }
.brand span { font-size: 13px; font-weight: 300; letter-spacing: 0.42em; text-transform: uppercase; }
.nav__links { display: flex; gap: 38px; font-size: 14px; color: rgba(255,255,255,0.7); }
.nav__links a:hover { color: #fff; }
@media (max-width: 900px) { .nav__links { display: none; } }
@media (max-width: 480px) { .brand span { display: none; } .nav__inner { height: 70px; } .brand img { width: 46px; } }

/* Fokus-Cursor */
.focus { display: none; }
.has-focus .focus { display: block; position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; width: 34px; height: 34px; opacity: 0; transition: opacity .3s; mix-blend-mode: difference; }
.has-focus .focus.on { opacity: 1; }
.focus i { position: absolute; width: 9px; height: 9px; border: 0 solid #fff; }
.focus i:nth-child(1) { left: 0; top: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.focus i:nth-child(2) { right: 0; top: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.focus i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.focus i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.focus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff; transition: opacity .3s; }
.focus.locked::after { opacity: 0; }

/* Schnitt-Timeline */
.timeline { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: var(--tl-h); padding: 10px var(--gutter) 12px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: rgba(0,0,0,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,0.1); color: #fff; transform: translateY(100%); transition: transform .8s var(--ease); pointer-events: none; }
.timeline.is-on { transform: none; }
.timeline__meta { display: flex; gap: 18px; align-items: center; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline__meta .tc { color: #fff; min-width: 11ch; }
.timeline__scene { color: var(--accent-d); }
.timeline__track { position: relative; height: 26px; }
.timeline__clips { position: absolute; inset: 0; display: flex; gap: 3px; }
.timeline__clips i { flex: var(--w, 1) 1 0; height: 100%; border-radius: 4px; position: relative; overflow: hidden; background: rgba(111,155,174,0.14); border: 1px solid rgba(111,155,174,0.3); }
.timeline__clips i.is-light { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
.timeline__clips i::before { content: ""; position: absolute; inset: 0; background: rgba(111,155,174,0.55); transform-origin: left; transform: scaleX(var(--f, 0)); }
.timeline__clips i.is-light::before { background: rgba(255,255,255,0.5); }
.timeline__clips i::after { content: attr(data-label); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 9px; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.8); white-space: nowrap; }
.timeline__head { position: absolute; top: -6px; bottom: -6px; left: 0; width: 1.5px; background: var(--rec); box-shadow: 0 0 10px rgba(229,72,77,0.8); transform: translateX(var(--x, 0)); }
.timeline__head::before { content: ""; position: absolute; top: -2px; left: -4px; border: 5px solid transparent; border-top-color: var(--rec); }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 6px; height: 54px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .timeline__meta { font-size: 10px; gap: 12px; }
  .timeline__track { height: 6px; }
  .timeline__clips i::after { display: none; }
}

.rec { display: inline-flex; align-items: center; gap: 9px; }
.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 12px rgba(229,72,77,0.7); animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }
.vf-corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255,255,255,0.6); z-index: 3; }
.vf-corner--tl { top: 16px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.vf-corner--tr { top: 16px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf-corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf-corner--br { bottom: 16px; right: 16px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ===== 01 INTRO (schlicht) ===== */
.s-intro { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 140px 0 clamp(64px, 11vh, 120px); overflow: hidden; }
.s-intro__glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--petrol-1) 0%, var(--petrol-2) 24%, var(--petrol-3) 50%, #000 72%); }
.s-intro__inner { position: relative; }
.kicker { margin: 0 0 clamp(20px, 3vh, 32px); font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.s-intro__title { margin: 0; font-size: clamp(54px, 10.5vw, 176px); font-weight: 200; letter-spacing: -0.045em; line-height: 0.93; }
.s-intro__title .b { font-weight: 800; }
.s-intro__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; margin-top: clamp(32px, 5vh, 56px); padding-top: clamp(24px, 3vh, 32px); border-top: 1px solid var(--line); }
.s-intro__foot .lead { margin: 0; max-width: 28em; }
.s-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.link-dm { font-size: 14px; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .5s var(--ease), border-color .5s var(--ease); }
.link-dm:hover { color: var(--fg); border-color: var(--fg); }
.s-intro__scroll { position: absolute; right: var(--gutter); top: 50%; width: 1px; height: 80px; background: rgba(255,255,255,0.15); overflow: hidden; }
.s-intro__scroll i { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff; animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue { to { top: 100%; } }
@media (max-width: 760px) { .s-intro__scroll { display: none; } }

/* ===== Button „Projekt anfragen“: Aufnahme-Knopf ===== */
.btn-rec {
  --h: 60px;
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  height: var(--h); padding: 0 26px 0 10px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: #fff; color: #000; border: 1px solid #fff;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap;
  transition: color .6s var(--ease), border-color .6s var(--ease), transform .4s var(--ease);
}
.btn-rec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.btn-rec:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-rec:hover::before { transform: scaleX(1); }
.btn-rec:active { transform: scale(0.97); }
.btn-rec__dot { position: relative; flex: none; width: calc(var(--h) - 20px); height: calc(var(--h) - 20px); border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; transition: border-color .6s var(--ease); }
.btn-rec__dot::before { content: ""; width: 38%; height: 38%; border-radius: 50%; background: var(--rec); box-shadow: 0 0 12px rgba(229,72,77,0.7); transition: border-radius .5s var(--ease), width .5s var(--ease), height .5s var(--ease); }
.btn-rec__dot::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--rec); opacity: 0; animation: recpulse 2s ease-out infinite; }
.btn-rec:hover .btn-rec__dot::before { border-radius: 3px; width: 32%; height: 32%; }
.btn-rec svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.btn-rec:hover svg { transform: translateX(4px); }
@keyframes recpulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.btn-rec--small { --h: 46px; padding: 0 20px 0 7px; gap: 10px; font-size: 14px; }
.btn-rec--dark { background: #000; color: #fff; border-color: #000; }
.btn-rec--dark::before { background: var(--petrol-1); }
.btn-rec--dark:hover { border-color: var(--petrol-1); }
.btn-rec[disabled] { opacity: 0.5; cursor: progress; }
@media (max-width: 480px) { .nav .btn-rec--small span { font-size: 13px; } }

/* ===== 02 SKRIPT ===== */
.s-script { height: 240vh; --p: 0; }
.s-script__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.page { position: relative; background: #fff; color: #000; border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(21,36,43,0.35); padding: clamp(28px, 3.6vw, 52px) clamp(24px, 5vw, 72px); transform: rotate(1deg); max-height: calc(100svh - 190px); overflow: hidden; }
.page::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: rgba(229,72,77,0.25); }
.page__head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,0,0,0.4); margin-bottom: clamp(18px, 3vh, 30px); }
.sp { margin: 0 0 clamp(6px, 1.2vh, 12px); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.5; opacity: 0.12; filter: blur(3px); transition: opacity .6s var(--ease), filter .6s var(--ease); }
.sp.on { opacity: 1; filter: none; }
.sp--slug { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sp--action { font-weight: 300; }
.sp--char { margin: clamp(10px, 1.8vh, 16px) 0 0; padding-left: 38%; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
.sp--paren { padding-left: 30%; font-style: italic; font-weight: 300; color: rgba(0,0,0,0.55); margin: 0; }
.sp--dia { padding: 0 16% 0 22%; }
.sp--big { font-size: clamp(20px, 2vw, 30px); font-weight: 200; letter-spacing: -0.02em; line-height: 1.2; }
.sp--big b { font-weight: 800; }
.sp--trans { text-align: right; font-weight: 600; letter-spacing: 0.14em; font-size: 12px; margin-top: 16px; }
@media (max-width: 900px) {
  .s-script { height: auto; }
  .s-script .sticky { position: relative; height: auto; padding: var(--section) 0; }
  .s-script__grid { grid-template-columns: 1fr; }
  .page { max-height: none; transform: none; }
  .sp--char { padding-left: 28%; } .sp--dia { padding: 0 6% 0 12%; } .sp--paren { padding-left: 22%; }
}

/* ===== 03 DREH – Talking Head + Captions ===== */
.s-shoot { height: 420vh; --p: 0; }
.s-shoot .sticky { background: radial-gradient(70% 60% at 70% 50%, rgba(40,69,83,0.35), transparent 70%); }
.s-shoot__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.services { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.services li { display: flex; gap: 22px; align-items: baseline; padding: clamp(12px, 1.8vh, 20px) 0; border-bottom: 1px solid var(--line); opacity: 0.35; transition: opacity .6s var(--ease), padding-left .6s var(--ease); }
.services li.is-on { opacity: 1; padding-left: 12px; }
.services li b { display: block; font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.015em; }
.services li small { font-size: 14px; color: var(--dim); font-weight: 300; }
.cam { justify-self: center; width: min(100%, calc((100svh - 230px) * 0.8)); }
.cam__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: #050708; border: 1px solid var(--line); }
.cam__bg { position: absolute; inset: 0; background: radial-gradient(60% 50% at 30% 30%, #2b4a59 0%, #13222a 45%, #05080a 100%); }
.cam__bg::after { content: ""; position: absolute; right: 12%; top: 18%; width: 22%; height: 46%; border-radius: 6px; background: linear-gradient(180deg, rgba(255,214,170,0.10), rgba(255,214,170,0.02)); filter: blur(8px); }
.cam__person { position: absolute; left: 50%; bottom: -2%; width: 78%; transform: translateX(-50%); animation: breathe 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.012, 1.008); } }
.cam__thirds { position: absolute; inset: 0; background-image: linear-gradient(to right, transparent 33.2%, rgba(255,255,255,0.08) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,0.08) 66.6%, transparent 66.8%), linear-gradient(to bottom, transparent 33.2%, rgba(255,255,255,0.08) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,0.08) 66.6%, transparent 66.8%); }
.cam__hud { position: absolute; z-index: 3; display: flex; gap: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: rgba(255,255,255,0.8); font-variant-numeric: tabular-nums; }
.cam__hud--tl { top: 26px; left: 50px; }
.cam__hud--tr { top: 26px; right: 50px; }
.cam__meter { position: absolute; z-index: 3; left: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column-reverse; gap: 3px; }
.cam__meter i { width: 5px; height: 9px; border-radius: 1px; background: rgba(255,255,255,0.18); transition: background-color .08s; }
.cam__meter i.lv { background: #9fd3c0; }
.cam__meter i.lv.hi { background: #f2c94c; }
.cam__focus { position: absolute; z-index: 3; left: 50%; top: 31%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid rgba(159,211,192,0.85); border-radius: 4px; }
.cam__label { margin: 14px 0 0; text-align: center; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 900px) {
  .s-shoot { height: 400vh; }
  .s-shoot__grid { grid-template-columns: 1fr; gap: 18px; }
  .s-shoot__side .h2 { font-size: 34px; }
  .s-shoot__side .slate { margin-bottom: 12px; }
  .services { display: none; }
  .cam { width: min(100%, calc((100svh - 300px) * 0.8)); }
  .cam__hud--tl { left: 46px; } .cam__hud--tr { display: none; }
}

/* ===== 04 SCHNITT ===== */
.s-edit { height: 360vh; --p: 0; }
.s-edit .sticky > .container { display: flex; flex-direction: column; gap: clamp(18px, 3.2vh, 36px); }
.s-edit__head .slate { margin-bottom: 16px; }
.editor { display: grid; gap: 14px; }
.monitor { position: relative; border-radius: 22px; background: #0a0e10; color: #fff; padding: clamp(24px, 3.4vw, 46px); min-height: clamp(190px, 29vh, 290px); overflow: hidden; }
.monitor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 0% 0%, rgba(40,69,83,0.7), transparent 70%); }
.monitor__label, .monitor__tc { position: absolute; top: 18px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; z-index: 1; }
.monitor__label { left: 24px; } .monitor__tc { right: 24px; color: #fff; }
.monitor__steps { position: relative; display: grid; }
.mstep { grid-area: 1 / 1; padding-top: 18px; opacity: 0; transform: translateY(16px); filter: blur(8px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.mstep.is-on { opacity: 1; transform: none; filter: none; }
.mstep .num { color: var(--accent-d); }
.mstep h3 { margin: 12px 0 10px; font-size: clamp(40px, 6vw, 92px); font-weight: 200; letter-spacing: -0.04em; line-height: 1; }
.mstep h3 .b { font-weight: 800; }
.mstep p { margin: 0; color: rgba(255,255,255,0.65); font-weight: 300; max-width: 34em; }
.tracks { position: relative; display: grid; gap: 6px; padding: 14px 14px 14px 0; border-radius: 16px; background: #eef3f5; border: 1px solid rgba(0,0,0,0.08); }
.track { display: grid; grid-template-columns: 52px 1fr; align-items: center; }
.track__name { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: rgba(0,0,0,0.5); }
.track__lane { position: relative; height: 32px; border-radius: 8px; background: rgba(0,0,0,0.04); }
.track__lane i { position: absolute; top: 3px; bottom: 3px; left: calc(var(--s) * 1%); width: calc(var(--w) * 1%); border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; transition: filter .4s, box-shadow .4s; }
.lane--cap i { background: #c9a227; opacity: 0.75; }
.lane--clips { height: 44px; }
.lane--clips i { background: linear-gradient(180deg, #3d6577, #284553); color: #fff; }
.lane--clips i.is-on { box-shadow: 0 0 0 2px #000; filter: brightness(1.25); }
.lane--audio svg { position: absolute; top: 4px; left: 0; width: 100%; height: calc(100% - 8px); }
.lane--audio path { fill: #3f7d64; }
.tracks__head { position: absolute; top: 4px; bottom: 4px; left: calc(52px + (100% - 66px) * var(--p, 0)); width: 2px; background: var(--rec); box-shadow: 0 0 10px rgba(229,72,77,0.6); }
.tracks__head::before { content: ""; position: absolute; top: -4px; left: -5px; border: 6px solid transparent; border-top-color: var(--rec); }
@media (max-width: 760px) {
  .s-edit { height: 320vh; }
  .lane--clips i { font-size: 9px; padding: 0 5px; }
  .mstep h3 { font-size: 40px; }
}

/* ===== 05 COLOR ===== */
.s-color { height: 230vh; --p: 0; }
.s-color__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.grade { --cut: 50%; position: relative; aspect-ratio: 16 / 11; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); user-select: none; }
.grade__img { position: absolute; inset: 0; }
.shot-art { position: absolute; inset: 0; display: grid; place-items: end center; }
.shot-art svg { position: relative; width: 52%; z-index: 1; }
.shot-art span { position: absolute; left: 7%; top: 10%; font-size: clamp(60px, 9vw, 140px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.grade__img--log { background: linear-gradient(135deg, #6e7579, #565c60 50%, #4a4f52); filter: saturate(0.2) contrast(0.75) brightness(1.1); }
.grade__img--log .shot-art span { color: rgba(255,255,255,0.35); }
.grade__img--rec { background: radial-gradient(80% 80% at 30% 25%, #5f93aa 0%, #284553 40%, #0a1216 100%); clip-path: inset(0 0 0 var(--cut)); }
.grade__img--rec .shot-art span { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grade__img--rec::after { content: ""; position: absolute; right: 8%; top: 12%; width: 30%; height: 40%; background: radial-gradient(closest-side, rgba(255,190,130,0.22), transparent); }
.grade__line { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; z-index: 2; pointer-events: none; }
.grade__line i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
.grade__line i::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: #000; font-weight: 800; font-size: 14px; }
.grade__tag { position: absolute; bottom: 16px; z-index: 2; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; }
.grade__tag--l { left: 16px; } .grade__tag--r { right: 16px; }
.grade__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3; margin: 0; }
@media (max-width: 900px) {
  .s-color { height: auto; }
  .s-color .sticky { position: relative; height: auto; padding: var(--section) 0; }
  .s-color__grid { grid-template-columns: 1fr; }
}

/* ===== 06 RELEASE ===== */
.s-release__head { max-width: 860px; margin-bottom: clamp(48px, 6vw, 80px); }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); max-width: 820px; margin: 0 auto; }
.phone p { margin: 16px 0 0; font-size: 14px; font-weight: 600; text-align: center; }
.phone__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; border: 8px solid #0a0e10; box-shadow: 0 40px 70px -30px rgba(21,36,43,0.5); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; }
.phone__screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 64px; height: 18px; border-radius: 12px; background: #0a0e10; transform: translateX(-50%); z-index: 2; }
.phone__screen::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 76%; transform: translateX(-50%); aspect-ratio: 4 / 5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cpath fill='%2305080a' fill-opacity='.85' d='M200 70c-46 0-80 38-80 90 0 34 13 64 33 80l-3 30c-58 14-108 46-128 96-8 20-12 50-12 134h380c0-84-4-114-12-134-20-50-70-82-128-96l-3-30c20-16 33-46 33-80 0-52-34-90-80-90z'/%3E%3C/svg%3E") bottom / contain no-repeat; }
.ps--1 { background: radial-gradient(80% 60% at 30% 20%, #4b7d92, #15242B 60%, #030506); }
.ps--2 { background: radial-gradient(80% 60% at 70% 25%, #6F9BAE, #284553 55%, #060A0D); }
.ps--3 { background: radial-gradient(80% 60% at 40% 15%, #33586a, #0c161b 60%, #000); }
.phone__cap { position: relative; z-index: 1; align-self: center; text-align: center; font-size: clamp(15px, 1.5vw, 21px); font-weight: 300; margin-bottom: 40%; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.phone__cap b { font-weight: 800; background: #fff; color: #000; padding: 0 0.15em; border-radius: 5px; text-shadow: none; }
.phone__meta { position: relative; z-index: 1; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; display: flex; gap: 6px; align-items: center; }
.phone__meta::before { content: "▶"; font-size: 9px; }
.views { font-style: normal; font-variant-numeric: tabular-nums; }
.chips { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips li { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; }
.chips li:last-child { background: #000; color: #fff; border-color: #000; font-weight: 800; }
.s-release .note { text-align: center; }
@media (max-width: 760px) {
  .phones { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phone { scroll-snap-align: center; }
}

/* ===== 07 CAST ===== */
.s-cast__head { max-width: 860px; margin-bottom: clamp(48px, 6vw, 80px); }
.cast { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.person { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.person__frame { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--petrol-1) 0%, var(--petrol-2) 35%, var(--petrol-3) 70%, #000 100%); overflow: hidden; }
.person__initial { font-size: clamp(120px, 18vw, 240px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(14px); transform: scale(1.08); transition: filter 1.2s var(--ease), transform 1.2s var(--ease); }
.person.is-in .person__initial, .person:hover .person__initial { filter: blur(0); transform: none; }
.person__af { position: absolute; left: 34px; bottom: 28px; font-size: 11px; letter-spacing: 0.24em; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; transition: color .6s; }
.person.is-in .person__af { color: #9fd3c0; transition-delay: 1s; }
.person__body { padding: clamp(28px, 3.4vw, 44px); }
.person__role { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 0 0 12px; }
.person h3 { margin-bottom: 16px; }
.person p:last-child { margin: 0; color: var(--dim); font-weight: 300; }
@media (max-width: 820px) { .cast { grid-template-columns: 1fr; } }

/* ===== 08 DEIN TAKE ===== */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.dm-card { margin-top: 44px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); display: flex; gap: 22px; align-items: center; transition: background-color .7s var(--ease); }
.dm-card:hover { background: rgba(0,0,0,0.06); }
.dm-card svg { flex: none; width: 40px; height: 40px; stroke: currentColor; stroke-width: 1.3; fill: none; }
.dm-card strong { display: block; font-weight: 800; font-size: 18px; }
.dm-card span { color: var(--dim); font-size: 15px; font-weight: 300; }
.contact__mail { margin-top: 26px; font-size: 15px; color: var(--dim); }
.contact__mail a { color: var(--fg); border-bottom: 1px solid var(--line); }
.form { position: relative; padding: 0 clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 40px 80px -40px rgba(21,36,43,0.35); overflow: hidden; }
.form__slate { display: flex; margin: 0 calc(-1 * clamp(24px, 4vw, 44px)) 30px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(-55deg, #000 0 18px, #fff 18px 36px) top / 100% 12px no-repeat; padding-top: 12px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.form__slate span { flex: 1; padding: 14px clamp(16px, 2vw, 26px); }
.form__slate span + span { border-left: 1px solid var(--line); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 9px; }
.field input, .field select, .field textarea { width: 100%; background: rgba(0,0,0,0.025); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 16px; outline: none; transition: border-color .5s var(--ease), background-color .5s var(--ease); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M2 5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(0,0,0,0.55); background: #fff; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 6px; }
.form__note { font-size: 13px; color: var(--faint); margin: 0; max-width: 24em; }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.form__status { margin: 16px 0 0; font-size: 15px; min-height: 1.5em; }
.form__status.is-ok { color: #1f7a5a; }
.form__status.is-error { color: #c62f35; }
@media (max-width: 960px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; gap: 0; } .form__slate span:first-child { display: none; } }

/* ===== ABSPANN ===== */
.footer { padding: var(--section) 0 calc(var(--tl-h) + 24px); text-align: center; background: radial-gradient(60% 50% at 50% 40%, rgba(40,69,83,0.3) 0%, transparent 70%), #000; }
.credits { display: flex; flex-direction: column; align-items: center; }
.credits__pre { font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--faint); margin: 0 0 32px; }
.credits__logo { width: min(420px, 70vw); height: auto; margin-bottom: clamp(56px, 7vw, 88px); }
.credits__list { margin: 0 0 clamp(56px, 7vw, 88px); display: grid; gap: 22px; }
.credits__list div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: baseline; }
.credits__list dt { text-align: right; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--faint); }
.credits__list dd { margin: 0; text-align: left; font-size: clamp(22px, 2.4vw, 32px); font-weight: 200; letter-spacing: -0.02em; }
.credits__list dd.chrome { font-weight: 800; }
.footer__bottom { margin-top: clamp(72px, 9vw, 120px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--faint); padding-top: 24px; border-top: 1px solid var(--line); }
.footer__bottom nav { display: flex; gap: 24px; }
.footer__bottom a:hover { color: var(--fg); }

/* Rechtliches */
.legal-page { background: #000; color: #fff; }
.legal { padding: 170px 0 var(--section); --dim: rgba(255,255,255,0.65); --line: rgba(255,255,255,0.14); --accent: var(--accent-d); }
.legal__inner { max-width: 820px; }
.legal h1 { margin-bottom: 40px; }
.legal h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--dim); font-weight: 300; }
.legal a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal .label { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-d); }
.legal-page .footer { padding: 0 0 36px; background: none; text-align: left; --faint: rgba(255,255,255,0.4); --line: rgba(255,255,255,0.14); --fg: #fff; }
.legal-page .footer__bottom { margin-top: 0; }
.todo { background: rgba(229,72,77,0.16); color: #ffb3b5; padding: 1px 6px; border-radius: 6px; font-weight: 500; }

/* Bewegung */
.js .split .w { display: inline-block; opacity: 0; filter: blur(20px); transform: translateY(0.25em); transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d0, 0ms)); }
.js .split.is-in .w { opacity: 1; filter: blur(0); transform: none; }
.js .split .chrome { background: none; color: inherit; }
.js .split .chrome .w { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .s-intro .split { --d0: 150ms; }
.js .reveal { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .split .w, .js .reveal { opacity: 1; filter: none; transform: none; }
  .person__initial { filter: none; transform: none; }
  .s-script, .s-shoot, .s-edit, .s-color { height: auto; }
  .sticky { position: relative; height: auto; padding: var(--section) 0; }
  .sp { opacity: 1; filter: none; }
}

/* ===== Captions im Reel-Stil (wie in den Visionwerk-Referenzvideos) =====
   Klein/dünn + riesig/fett gestapelt, jedes Wort springt aus seiner Richtung rein,
   große Wörter steigen von unten auf und füllen sich mit Farbe. */
.captions { position: absolute; z-index: 4; left: 4%; right: 4%; top: 66%; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; }
.cap { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 0.92; transition: opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease); }
.cap.out { opacity: 0; filter: blur(10px); transform: scale(1.06); }
.cap__line { display: flex; align-items: baseline; justify-content: center; gap: 0.28em; white-space: nowrap; }
.cw { display: inline-block; opacity: 0; color: #fff; text-shadow: 0 3px 22px rgba(0,0,0,0.45); --dx: 0; --dy: 0; }
.cw[data-from="l"] { --dx: -0.9em; } .cw[data-from="r"] { --dx: 0.9em; } .cw[data-from="u"] { --dy: 0.7em; }
.cw.in { animation: cw-in .42s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cw-in { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.9); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.cw.s { font-size: clamp(15px, 1.5vw, 22px); font-weight: 400; letter-spacing: 0; }
.cw.it { font-size: clamp(17px, 1.7vw, 25px); font-weight: 800; font-style: italic; }
.cw.m { font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.cw.B, .cw.a { font-size: clamp(54px, 6vw, 92px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; padding: 0 0.04em 0.06em; }
/* große Wörter: erst durchscheinend, dann "Füllung" von unten */
.cw.B, .cw.a {
  color: transparent; text-shadow: none; -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat; background-position: 0 100%, 0 0;
  background-size: 100% 0%, 100% 100%;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45));
}
.cw.B { background-image: var(--chrome), linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0.28)); }
.cw.a { background-image: linear-gradient(180deg, #e3f1f6 0%, #9fc4d4 45%, #6F9BAE 60%, #cfe3ea 100%), linear-gradient(rgba(159,196,212,0.3), rgba(159,196,212,0.3)); }
.cw.B.in, .cw.a.in { animation: cw-rise .5s cubic-bezier(.2, 1.2, .4, 1) both, cw-fill .55s var(--ease) .28s both; }
@keyframes cw-rise { from { opacity: 0; transform: translateY(0.45em); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-20% -10% -20% -10%); } }
@keyframes cw-fill { from { background-size: 100% 0%, 100% 100%; } to { background-size: 100% 100%, 100% 100%; } }
@media (max-width: 900px) {
  .cw.s { font-size: 14px; } .cw.it { font-size: 16px; } .cw.m { font-size: 22px; }
  .cw.B, .cw.a { font-size: clamp(44px, 13vw, 64px); }
}
@media (prefers-reduced-motion: reduce) { .cw { opacity: 1; } .cw.B, .cw.a { background-size: 100% 100%, 100% 100%; } }

/* =========================================================
   HAUPTSÄCHLICH WEISS (Update): Seite hell, dunkle Momente nur
   bei Color Grading und Abspann.
   ========================================================= */
body { background: #fff; color: #000; }
::selection { background: #284553; color: #fff; }

/* Chrome-Wörter auf Weiß: dunkler Petrol-Verlauf statt Silber */
.light .chrome, .js .light .split .chrome .w {
  background: linear-gradient(180deg, #0a0e10 0%, #284553 46%, #3d6577 58%, #0a0e10 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Navigation hell */
.nav { color: #000; }
.nav.is-scrolled, .nav--solid { background: rgba(255,255,255,0.78); border-bottom-color: rgba(0,0,0,0.08); }
.nav__links { color: rgba(0,0,0,0.6); }
.nav__links a:hover { color: #000; }

/* Aufnahme-Button auf Weiß: schwarz, Hover wischt Petrol rein */
.light .btn-rec, .nav .btn-rec { background: #000; color: #fff; border-color: #000; }
.light .btn-rec::before, .nav .btn-rec::before { background: var(--petrol-1); }
.light .btn-rec:hover, .nav .btn-rec:hover { border-color: var(--petrol-1); color: #fff; }

/* Intro hell */
.s-intro__glow { background: radial-gradient(90% 80% at 0% 0%, #D5E2E7 0%, rgba(213,226,231,0.45) 35%, rgba(255,255,255,0) 70%); }
.s-intro__scroll { background: rgba(0,0,0,0.12); }
.s-intro__scroll i { background: #000; }

/* Timeline hell */
.timeline { background: rgba(255,255,255,0.86); border-top-color: rgba(0,0,0,0.08); color: #000; }
.timeline__meta { color: rgba(0,0,0,0.55); }
.timeline__meta .tc { color: #000; }
.timeline__scene { color: var(--petrol-1); }
.timeline__clips i { background: rgba(40,69,83,0.06); border-color: rgba(40,69,83,0.22); }
.timeline__clips i::before { background: rgba(40,69,83,0.28); }
.timeline__clips i.is-light { background: rgba(40,69,83,0.06); border-color: rgba(40,69,83,0.22); }
.timeline__clips i.is-light::before { background: rgba(40,69,83,0.28); }
.timeline__clips i:not(.is-light) { background: #0a0e10; border-color: #0a0e10; }
.timeline__clips i:not(.is-light)::before { background: rgba(111,155,174,0.6); }
.timeline__clips i::after { color: rgba(0,0,0,0.7); }
.timeline__clips i:not(.is-light)::after { color: rgba(255,255,255,0.85); }

/* Dreh-Szene hell: helles Set, dunkle Person – damit die Captions invertieren */
.s-shoot .sticky { background: none; }
.cam__frame { background: #e9eff2; border-color: rgba(0,0,0,0.1); box-shadow: 0 40px 80px -40px rgba(21,36,43,0.45); }
.cam__bg { background: radial-gradient(70% 60% at 30% 25%, #ffffff 0%, #eef3f5 40%, #cddbe1 100%); }
.cam__bg::after { background: linear-gradient(180deg, rgba(40,69,83,0.10), rgba(40,69,83,0.03)); filter: blur(10px); }
.cam__person use { fill: #0e1a20; }
.cam__thirds { background-image: linear-gradient(to right, transparent 33.2%, rgba(0,0,0,0.07) 33.3%, transparent 33.5%, transparent 66.5%, rgba(0,0,0,0.07) 66.6%, transparent 66.8%), linear-gradient(to bottom, transparent 33.2%, rgba(0,0,0,0.07) 33.3%, transparent 33.5%, transparent 66.5%, rgba(0,0,0,0.07) 66.6%, transparent 66.8%); }
.s-shoot .vf-corner { border-color: rgba(0,0,0,0.55); }
.cam__hud { color: rgba(0,0,0,0.75); }
.cam__meter i { background: rgba(0,0,0,0.12); }
.cam__focus { border-color: rgba(31,122,90,0.8); }

/* Captions: farbig + invertiert (Differenz). Weiß wird über hellem Set schwarz,
   über der Person weiß; Farben drehen sich in ihre Komplementärfarbe. */
.captions { mix-blend-mode: difference; }
.cw { color: #fff; text-shadow: none; }
.cw.B, .cw.a, .cw.it, .cw.m { filter: none; }
.cw.B { background-image: linear-gradient(#fff, #fff), linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)); }
.cw.a { background-image: linear-gradient(#D7BAAC, #D7BAAC), linear-gradient(rgba(215,186,172,0.3), rgba(215,186,172,0.3)); } /* wird auf Weiß zu Petrol */
.cw.it { color: #1AB7B2; }   /* wird auf Weiß zu REC-Rot */
.cw.m { color: #90643F; }    /* wird auf Weiß zu Eisblau */

/* Cast hell */
.person { background: #fff; box-shadow: 0 30px 60px -40px rgba(21,36,43,0.35); }
.person__frame .vf-corner { border-color: rgba(255,255,255,0.6); }

/* Rechtliches hell */
.legal-page { background: #fff; color: #000; }
.legal { --dim: rgba(0,0,0,0.62); --line: rgba(0,0,0,0.12); }
.legal a { color: #000; }
.legal .label { color: var(--petrol-1); }
.legal-page .footer { --faint: rgba(0,0,0,0.45); --line: rgba(0,0,0,0.12); --fg: #000; color: #000; }
.todo { background: rgba(229,72,77,0.12); color: #b4252b; }

/* =========================================================
   UPDATE: Label-Schrift, eckiger Button, Captions-Bühne, Referenz-Videos
   ========================================================= */
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/montserrat-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/montserrat-latin-500-italic.woff2") format("woff2"); }

/* Alle kleinen Labels (wie „Szene 03 · Der Dreh“): Monospace wie ein Kamera-Display */
.slate, .kicker, .num, .timeline__meta, .page__head, .monitor__label, .monitor__tc, .track__name,
.grade__tag, .field > span, .form__slate, .credits__pre, .credits__list dt, .person__role, .person__af,
.s-shoot__hud, .legal .label, .chips li, .reel-card figcaption span, .sound, .rec {
  font-family: "Montserrat", system-ui, sans-serif;
  font-style: italic;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
.slate { font-size: 14px; font-weight: 500; border-radius: 6px; }
.slate span { padding: 7px 14px; }
.kicker { font-size: 15px; }
.num { font-size: 13px; }
.field > span, .form__slate, .credits__pre, .credits__list dt, .person__role { font-size: 13px; }

/* Button „Dreh starten“: eckiger */
.btn-rec { border-radius: 6px; padding: 0 24px 0 9px; }
.btn-rec::before { border-radius: 0; }
.btn-rec__dot { border-radius: 4px; width: calc(var(--h) - 20px); height: calc(var(--h) - 20px); }
.btn-rec__dot::after { border-radius: 4px; }
.btn-rec span { letter-spacing: 0.01em; }
.btn-rec--small { padding: 0 18px 0 7px; }

/* ---------- Szene 03: Bühne ohne Silhouette ---------- */
.s-shoot { height: 460vh; }
.s-shoot__stage { display: block; padding: 0; }
.s-shoot__head { position: absolute; left: 0; right: 0; top: clamp(100px, 13vh, 130px); z-index: 2; }
.s-shoot__head .slate { margin-bottom: 16px; }
.s-shoot__head .h2 { font-size: clamp(34px, 4vw, 60px); }
.s-shoot__hud { position: absolute; z-index: 2; right: var(--gutter); top: clamp(108px, 14vh, 140px); display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(0,0,0,0.6); }
.s-shoot__meter { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.s-shoot__meter i { width: 3px; height: 100%; background: rgba(0,0,0,0.12); border-radius: 1px; }
.s-shoot__meter i.lv { background: #2fa36b; }
.s-shoot__meter i.lv.hi { background: #f2a33a; }
.s-shoot .services { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--tl-h) + 20px); max-width: calc(var(--container) - 2 * var(--gutter)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border: 0; z-index: 2; }
.s-shoot .services li { flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.s-shoot .services li.is-on { padding-left: 16px; border-color: #000; }
.s-shoot .services li b { font-size: clamp(15px, 1.3vw, 19px); }
.s-shoot .services li small { font-size: 13px; }

/* Captions über die ganze Bühne */
.captions { position: absolute; inset: 0; top: 0; transform: none; display: block; mix-blend-mode: normal; z-index: 1; }
.cap { position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); }
.cap.out { transform: translate(-50%, -50%) scale(1.05); }
.cap__line:nth-child(odd) { margin-left: -0.9em; }
.cap__line:nth-child(even) { margin-right: -0.9em; }
.cw { color: #000; }
.cw.s { font-size: clamp(18px, 1.9vw, 30px); font-weight: 400; color: #111; }
.cw.it { font-size: clamp(22px, 2.3vw, 36px); color: #FF7A1A; }
.cw.m { font-size: clamp(28px, 3.2vw, 50px); color: #2F54EB; }
.cw.B, .cw.a { font-size: clamp(64px, 9.5vw, 156px); }
.cw.B {
  background-image: linear-gradient(180deg, #e9edef 0%, #b4bcc1 40%, #6b757b 54%, #c4cbcf 78%, #8d979c 100%), linear-gradient(rgba(107,117,123,0.22), rgba(107,117,123,0.22));
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.18)) drop-shadow(0 18px 30px rgba(0,0,0,0.12));
}
.cw.a {
  background-image: linear-gradient(180deg, #9d7bff 0%, #7B4DFF 50%, #5a2fe0 100%), linear-gradient(rgba(123,77,255,0.22), rgba(123,77,255,0.22));
  filter: drop-shadow(0 18px 30px rgba(123,77,255,0.25));
}
@media (max-width: 900px) {
  .s-shoot { height: 420vh; }
  .cap { left: 50% !important; top: 52% !important; }
  .cw.s { font-size: 17px; } .cw.it { font-size: 20px; } .cw.m { font-size: 26px; }
  .cw.B, .cw.a { font-size: clamp(52px, 15vw, 80px); }
  .s-shoot .services { grid-template-columns: 1fr 1fr; gap: 8px; }
  .s-shoot .services li { padding: 10px 12px; }
  .s-shoot .services li small { display: none; }
  .s-shoot__hud { display: none; }
  .s-shoot .services { display: grid; }
}

/* ---------- Szene 06: echte Referenz-Videos ---------- */
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: clamp(20px, 4vw, 56px); }
.reel-card { margin: 0; }
.phone--video { padding: 0; background: #000; }
.phone--video::after { content: none; }
.phone--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sound { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sound::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.sound.on::before { background: #2fa36b; }
.reel-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; }
.reel-card figcaption b { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.reel-card figcaption span { font-size: 12px; color: var(--dim); text-transform: uppercase; }
@media (max-width: 640px) { .reels { grid-template-columns: repeat(2, 72vw); justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: none; } .reel-card { scroll-snap-align: center; } }

/* =========================================================
   INTRO-ANIMATION + LOGO-GLANZ
   ========================================================= */
.splash { display: none; }
.splash-on .splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  position: fixed; inset: 0; z-index: 300; cursor: pointer;
  background: radial-gradient(60% 55% at 50% 45%, #1b2f38 0%, #0a1216 45%, #000 100%);
  animation: splash-out .9s cubic-bezier(.7, 0, .2, 1) 2.25s forwards;
}
.splash__logo { position: relative; width: min(300px, 58vw); opacity: 0; animation: splash-logo 1s var(--ease) .15s forwards; }
.splash__logo img { width: 100%; height: auto; }
/* Glow-Hülle (filter) um den maskierten Streifen, damit das Leuchten nicht abgeschnitten wird */
.splash__glow { position: absolute; inset: 0; filter: drop-shadow(0 0 10px rgba(140, 210, 240, 0.9)) drop-shadow(0 0 28px rgba(111, 155, 174, 0.8)); }
.splash__strip, .brand__shine {
  position: absolute; inset: 0;
  -webkit-mask: url("../img/logo-strip.png") center / 100% 100% no-repeat;
          mask: url("../img/logo-strip.png") center / 100% 100% no-repeat;
}
.splash__strip {
  background: linear-gradient(50deg, transparent 38%, #ffffff 47%, #bfeaff 50%, #ffffff 53%, transparent 62%) 100% 100% / 260% 260% no-repeat, rgba(170, 225, 250, 0);
  animation: strip-sweep 1.1s cubic-bezier(.45, 0, .2, 1) .7s forwards, strip-lit .7s ease-out 1.55s forwards;
}
.splash__word { margin: 0; font-size: clamp(16px, 2vw, 22px); font-weight: 300; letter-spacing: 0.55em; text-indent: 0.55em; text-transform: uppercase; color: #fff; opacity: 0; animation: splash-word 1s var(--ease) .55s forwards; }
@keyframes splash-logo { from { opacity: 0; transform: scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes splash-word { from { opacity: 0; letter-spacing: 0.9em; } to { opacity: 0.85; letter-spacing: 0.55em; } }
@keyframes strip-sweep { from { background-position: 100% 100%, 0 0; } to { background-position: 0% 0%, 0 0; } }
@keyframes strip-lit { 0% { background-color: rgba(170, 225, 250, 0); } 35% { background-color: rgba(200, 238, 255, 0.95); } 100% { background-color: rgba(170, 225, 250, 0.45); } }
@keyframes splash-out { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 100% 0); visibility: hidden; } }
.splash-on .s-intro .split { --d0: 2700ms; }
.splash-on .s-intro .reveal { transition-delay: calc(var(--d, 0ms) + 2600ms); }

/* Logo oben links: der Filmstreifen glänzt alle paar Sekunden */
.brand__mark { position: relative; display: block; width: 54px; filter: drop-shadow(0 0 0 rgba(111,155,174,0)); }
.brand__mark img { width: 100%; height: auto; }
.brand__shine {
  background: linear-gradient(50deg, transparent 36%, #6F9BAE 45%, #d8f2ff 50%, #6F9BAE 55%, transparent 64%) 100% 100% / 260% 260% no-repeat;
  animation: brand-shine 6s cubic-bezier(.45, 0, .2, 1) 3.2s infinite;
}
@keyframes brand-shine { 0% { background-position: 100% 100%; } 22% { background-position: 0% 0%; } 100% { background-position: 0% 0%; } }
@media (max-width: 480px) { .brand__mark { width: 46px; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none !important; } .brand__shine { animation: none; } }