/* ============================================================
   SICHTWERT – v9 Editorial Motion (Basis: Konzept B)
   Farb-Morph beim Scrollen · gepinnte Arbeitsweise · Text-Scrub
   Outline-Marquee als Divider · komplette Seite
   ============================================================ */

:root{
  --paper:#F3F2EE;
  --paper-2:#E8E7E2;
  --ink:#0E0E0C;
  --ink-2:#161512;
  --ink-3:#1f1e1a;
  --accent:#FFD400;
  --accent-ink:#1a1700;
  --on-dark:#F5F4F0;
  --on-dark-soft:rgba(245,244,240,.78);
  --on-dark-line:rgba(245,244,240,.18);
  --max:1680px;
  --gutter:clamp(20px,4vw,72px);
  --f:"DM Sans", system-ui, sans-serif;
  --d:"Space Grotesk", system-ui, sans-serif;
  --hw:700;
  --m:"Space Mono", ui-monospace, monospace;

  /* themed tokens – driven by body[data-theme] */
  --bgc:#F3F2EE;
  --tx:#0E0E0C;
  --tx-soft:#46453f;
  --tx-mute:#8b897f;
  --ln:#0E0E0C;
  --ln-soft:#d3d1ca;
  --card:#FBFAF7;
  --card-line:#0E0E0C;
}

/* ===== theme stops (Farb-Morph) ===== */
body[data-theme="paper"]{
  --bgc:#F3F2EE; --tx:#0E0E0C; --tx-soft:#46453f; --tx-mute:#8b897f;
  --ln:#0E0E0C; --ln-soft:#d3d1ca; --card:#FBFAF7; --card-line:#0E0E0C;
}
body[data-theme="paper2"]{
  --bgc:#E8E7E2; --tx:#0E0E0C; --tx-soft:#46453f; --tx-mute:#85837a;
  --ln:#0E0E0C; --ln-soft:#c9c7c0; --card:#F3F2EE; --card-line:#0E0E0C;
}
body[data-theme="dark"]{
  --bgc:#161512; --tx:#F5F4F0; --tx-soft:rgba(245,244,240,.82); --tx-mute:rgba(245,244,240,.62);
  --ln:rgba(245,244,240,.7); --ln-soft:rgba(245,244,240,.16); --card:#1f1e1a; --card-line:rgba(245,244,240,.24);
}
body[data-theme="accent"]{
  --bgc:var(--accent); --tx:#1a1700; --tx-soft:rgba(26,23,0,.74); --tx-mute:rgba(26,23,0,.5);
  --ln:#1a1700; --ln-soft:rgba(26,23,0,.25); --card:rgba(255,255,255,.32); --card-line:#1a1700;
}

/* Feste Sektions-Themes – unabhängig vom Scroll-Morph (harte Kante zwischen Sektionen) */
[data-section-theme="paper"]{
  --bgc:#F3F2EE; --tx:#0E0E0C; --tx-soft:#46453f; --tx-mute:#8b897f;
  --ln:#0E0E0C; --ln-soft:#d3d1ca; --card:#FBFAF7; --card-line:#0E0E0C;
  background:var(--bgc); color:var(--tx);
}
[data-section-theme="dark"]{
  --bgc:#161512; --tx:#F5F4F0; --tx-soft:rgba(245,244,240,.82); --tx-mute:rgba(245,244,240,.62);
  --ln:rgba(245,244,240,.7); --ln-soft:rgba(245,244,240,.16); --card:#1f1e1a; --card-line:rgba(245,244,240,.24);
  background:var(--bgc); color:var(--tx);
}
[data-section-theme="dark"] .section-title .acc{color:var(--accent)}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);background:var(--bgc);color:var(--tx);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body:not(.scroll-morph){transition:background-color .9s ease}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{text-decoration:none;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,h3,h4{margin:0;font-family:var(--d);font-weight:var(--hw)}

/* themable elements fade with the section color (fallback ohne scroll-morph) */
body:not(.scroll-morph) .section :is(h2,h3,h4,p,span,div,li,a),
body:not(.scroll-morph) .cta-sec :is(h2,p,span,a,div,b),
body:not(.scroll-morph) footer :is(h5,p,span,div,li,a){
  transition:color .9s ease,border-color .9s ease,background-color .9s ease;
}
body.scroll-morph .hs-left{transition:none}
body.scroll-morph :where(.case,.m-card,.t-card,.chip,.oa-card,.cta-meta div,.pin-step,.q-list .row,.oa-light .oa-bl::after,.oa-light .oa-q,.kin-track span,.topbar){
  transition-property:transform,opacity,box-shadow,gap,padding!important;
}
body.theme-cut{transition:none!important}
body.theme-cut,
body.theme-cut .section :is(h2,h3,h4,p,span,div,li,a),
body.theme-cut .cta-sec :is(h2,p,span,a,div,b),
body.theme-cut footer :is(h5,p,span,div,li,a){
  transition:none!important;
}

.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative}
.mono{font-family:var(--m)}
.klabel{font-family:var(--m);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--tx-mute)}
.klabel .dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:8px;vertical-align:1px}

/* ===== INTRO SPLASH ===== */
.intro-splash{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);pointer-events:all;
  transition:opacity .38s cubic-bezier(.4,0,.2,1);
}
.intro-splash.is-exiting{opacity:0;pointer-events:none}
.intro-splash-logo{
  font-family:var(--d);font-weight:700;
  font-size:clamp(52px,13vw,132px);letter-spacing:-0.025em;
  color:var(--tx);margin:0;transform-origin:center center;will-change:transform;
  animation:introPop .32s cubic-bezier(.2,.7,.2,1) both;
  transition:color .22s ease;
}
.intro-splash-logo .logo-mark::after{bottom:-0.10em;min-height:3px}
.intro-splash-bar{
  position:absolute;left:50%;bottom:clamp(48px,12vh,120px);
  transform:translateX(-50%);
  width:min(140px,40vw);height:2px;background:var(--ln-soft);overflow:hidden;
}
.intro-splash-bar i{
  display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.intro-splash.is-loading .intro-splash-bar i{transform:scaleX(1)}
body.intro-active{overflow:hidden}
body.intro-active .topbar .logo{visibility:hidden}
@keyframes introPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* ===== scroll progress ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none}
.scroll-progress i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* ===== image placeholder (filmisch) ===== */
.ph{position:relative;background:#1a1916;overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 90% at 70% 0%, rgba(240,214,68,.07), transparent 60%),
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.035) 14px 15px);}
.ph .cap{position:absolute;left:14px;bottom:12px;z-index:3;font-family:var(--m);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#b9b6ac;background:#0d0d0b;padding:5px 9px;border:1px solid #2b2a25;transition:none}
.ph .tag{position:absolute;right:14px;top:14px;z-index:3;font-family:var(--m);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:5px 9px;transition:none}
.grain::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.no-grain .grain::after{display:none}

/* ===== TOPBAR ===== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,border-color .4s}
.topbar .bar{max-width:var(--max);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;gap:32px}
.topbar.solid{background:color-mix(in oklab, var(--bgc) 86%, transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--ln-soft)}
.logo{display:inline-flex;align-items:baseline;font-family:var(--d);font-weight:700;font-size:22px;letter-spacing:-0.025em;color:var(--on-dark);transition:color .4s}
.topbar.solid .logo{color:var(--tx)}
.logo-mark{position:relative;display:inline-block}
.logo-mark::after{content:"";position:absolute;left:0;right:0;bottom:-0.22em;height:0.1em;min-height:2px;background:var(--accent);border-radius:1px}
.topbar .logo-mark::after{bottom:-0.10em;min-height:3px}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-family:var(--m);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--on-dark-soft);transition:color .4s}
.topbar.solid .nav{color:var(--tx-soft)}
.nav a{position:relative;padding:6px 0;transition:color .2s}
.nav a:hover,.nav a.on{color:var(--accent)}
.topbar.solid .nav a:hover,.topbar.solid .nav a.on{color:var(--tx)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nav a:hover::after,.nav a.on::after{right:0}
.nav-cta{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;background:var(--accent);color:var(--accent-ink);border-radius:999px;font-family:var(--m);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;transition:transform .25s}
.nav-cta:hover{transform:translateY(-1px)}
.nav-cta .arr{transition:transform .25s}
.nav-cta:hover .arr{transform:translateX(3px)}

/* mobile menu */
.nav-toggle{display:none;flex-direction:column;gap:5px;margin-left:auto;padding:10px;z-index:75}
.nav-toggle i{display:block;width:22px;height:2px;background:var(--on-dark);transition:transform .3s,opacity .3s,background .4s}
.topbar.solid .nav-toggle i{background:var(--tx)}

/* Legal pages: no dark hero – topbar readable from the first pixel */
body:has(.legal-page) #topbar:not(.solid){
  background:color-mix(in oklab,var(--bgc) 86%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--ln-soft);
}
body:has(.legal-page) #topbar:not(.solid) .logo{color:var(--tx)}
body:has(.legal-page) #topbar:not(.solid) .nav{color:var(--tx-soft)}
body:has(.legal-page) #topbar:not(.solid) .nav a:hover{color:var(--tx)}
body:has(.legal-page) #topbar:not(.solid) .nav-toggle i{background:var(--tx)}

body.menu-open{overflow:hidden}
body.menu-open .nav-toggle i{background:var(--on-dark)}
body.menu-open .nav-toggle i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle i:nth-child(2){opacity:0}
body.menu-open .nav-toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-menu{
  position:fixed;inset:0;z-index:70;background:var(--ink-2);color:var(--on-dark);
  display:flex;flex-direction:column;padding:0;
  opacity:0;pointer-events:none;transition:opacity .35s;
  overflow:hidden;
}
body.menu-open .m-menu{opacity:1;pointer-events:auto}
.m-menu-close{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:calc(var(--gutter) - 10px);z-index:2;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:30px;line-height:1;color:var(--on-dark);background:transparent;border:0;cursor:pointer;
  transition:color .2s,transform .2s;
}
.m-menu-close:hover{color:var(--accent);transform:scale(1.06)}
.m-menu-inner{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(68px + env(safe-area-inset-top,0px)) var(--gutter) 24px;
}
.m-menu .cta-row{
  flex:none;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--on-dark-line);
  background:linear-gradient(180deg,transparent,var(--ink-2) 24%);
}
.m-menu .cta-row .btn{width:100%;justify-content:center}
/* Fallback: statische Menüs ohne site-context.js */
.m-menu > a,
.m-menu-inner > a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font-family:var(--d);font-weight:500;font-size:17px;letter-spacing:-0.02em;line-height:1.25;
  padding:13px 0;border-bottom:1px solid var(--on-dark-line);text-decoration:none;color:var(--on-dark);
  transition:color .18s;
}
.m-menu > a:hover,
.m-menu-inner > a:hover{color:var(--accent)}
.m-menu > a .n,
.m-menu-inner > a .n{font-family:var(--m);font-size:10px;font-weight:400;color:var(--on-dark-soft);letter-spacing:0.1em}
.m-menu:not(:has(.m-menu-inner)){padding:calc(68px + env(safe-area-inset-top,0px)) var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}
.m-menu:not(:has(.m-menu-inner)) .cta-row{margin-top:20px;padding:16px 0 0;border-top:1px solid var(--on-dark-line)}

/* mobile bottom tab bar (Test, parallel zum Top-Hamburger) */
:root{--mobile-bottom-bar-h:58px;--mobile-bar-bg:#F3F2EE;--mobile-bar-tx:#0E0E0C;--mobile-bar-tx-soft:#46453f}
.mobile-bottom-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--mobile-bar-bg);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid color-mix(in oklab,var(--mobile-bar-tx) 10%,transparent);
  transition:opacity .25s,transform .25s;
  isolation:isolate;
}
body.intro-active .mobile-bottom-bar{opacity:0;pointer-events:none;transform:translateY(100%)}
.mobile-tab-sheet__backdrop{
  position:fixed;top:0;left:0;right:0;z-index:57;border:0;padding:0;cursor:pointer;
  bottom:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom,0px));
  background:rgba(5,5,4,.42);opacity:0;pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:opacity .36s cubic-bezier(.22,.78,.22,1),backdrop-filter .36s cubic-bezier(.22,.78,.22,1);
}
body.mobile-tab-sheet-open .mobile-tab-sheet__backdrop{opacity:1;pointer-events:auto}
.mobile-tab-sheet{
  position:fixed;left:0;right:0;z-index:58;width:100%;
  bottom:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom,0px));
  max-height:min(72dvh,calc(100dvh - var(--mobile-bottom-bar-h) - env(safe-area-inset-top,0px) - 16px));
  height:auto;display:flex;flex-direction:column;background:var(--ink-2);color:var(--on-dark);
  border-radius:20px 20px 0 0;border:1px solid var(--on-dark-line);border-bottom:0;
  box-shadow:0 -18px 48px rgba(0,0,0,.34);overflow:hidden;pointer-events:none;
  transform:translateY(calc(100% + 8px));
  transition:transform .36s cubic-bezier(.22,.78,.22,1);
  will-change:transform;
}
body.mobile-tab-sheet-open .mobile-tab-sheet{transform:translateY(0);pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .mobile-tab-sheet,.mobile-tab-sheet__backdrop{transition:none}
  .mobile-tab-sheet__backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
.mobile-tab-sheet__head{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--gutter) 6px;
}
.mobile-tab-sheet__title{
  margin:0;font-family:var(--m);font-size:10px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);
}
.mobile-tab-sheet__close{
  flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  margin:-4px -8px -4px 0;border:0;border-radius:999px;background:transparent;
  font-size:26px;line-height:1;color:var(--on-dark);cursor:pointer;
  transition:color .2s,transform .2s,background .2s;
}
.mobile-tab-sheet__close:hover{color:var(--accent);background:rgba(255,255,255,.06);transform:scale(1.04)}
.mobile-tab-sheet__inner{
  flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 var(--gutter) 16px;
  max-height:min(68dvh,calc(100dvh - var(--mobile-bottom-bar-h) - env(safe-area-inset-top,0px) - 72px));
}
body.mobile-tab-sheet-open{overflow:hidden}
.mobile-bottom-bar__tab{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:var(--mobile-bottom-bar-h);padding:8px 6px;
  font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mobile-bar-tx-soft);text-decoration:none;text-align:center;
  background:transparent;border:0;cursor:pointer;position:relative;
  transition:color .2s;
}
.mobile-bottom-bar__tab:hover{color:var(--mobile-bar-tx)}
.mobile-bottom-bar__tab.is-active{color:var(--mobile-bar-tx)}
.mobile-bottom-bar__tab.is-active::before{
  content:"";position:absolute;top:0;left:18%;right:18%;height:2px;
  background:var(--accent);border-radius:0 0 2px 2px;
}
.mobile-bottom-bar__tab--kontakt.is-active::before{background:var(--accent)}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--on-dark)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media::before,
.hero-media::after{content:"";position:absolute;pointer-events:none;z-index:1}
.hero-media::before{
  width:clamp(260px,36vw,560px);height:clamp(260px,36vw,560px);left:max(-150px,-8vw);top:18vh;
  background:radial-gradient(circle at 42% 48%, rgba(255,212,0,.22), rgba(255,212,0,.07) 38%, transparent 70%);
  filter:blur(30px);opacity:.72;mix-blend-mode:screen;
}
.hero-media::after{
  width:clamp(160px,20vw,310px);height:clamp(160px,20vw,310px);left:clamp(18px,8vw,128px);top:clamp(112px,20vh,220px);
  border:1px solid rgba(255,212,0,.18);border-radius:50%;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(255,212,0,.28) 48% 52%, transparent 53%),
    repeating-linear-gradient(135deg, transparent 0 17px, rgba(245,244,240,.08) 17px 18px);
  transform:rotate(-16deg);opacity:.48;
}
.hero-fallback{position:absolute;inset:0;background:#15140f}
.hero-fallback::before{content:"";position:absolute;inset:0;background:
  radial-gradient(130% 100% at 75% 0%, rgba(240,214,68,.10), transparent 58%),
  repeating-linear-gradient(135deg, transparent 0 16px, rgba(255,255,255,.03) 16px 17px)}
.hero-bg-wrap{position:absolute;inset:0;overflow:hidden;transform:scale(1.05) translateZ(0)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24}
.hero-showreel{
  position:absolute;right:clamp(64px,17vw,280px);top:clamp(112px,15vh,158px);z-index:2;
  width:clamp(300px,31vw,480px);aspect-ratio:9/13;perspective:1100px;
  opacity:.96;filter:drop-shadow(-38px 46px 54px rgba(0,0,0,.58));
}
.hero-showreel::before{
  content:"";position:absolute;inset:8% -10% -8% 5%;border-radius:42px;
  background:linear-gradient(135deg, rgba(255,212,0,.22), transparent 48%), rgba(245,244,240,.05);
  filter:blur(24px);transform:rotate(-7deg);opacity:.85;
}
.hero-showreel-frame{
  position:absolute;inset:0;overflow:hidden;border-radius:34px;background:#070706;
  border:1px solid rgba(245,244,240,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), -24px 30px 80px rgba(0,0,0,.54);
  transform:rotateY(-15deg) rotateZ(2.6deg) translateZ(0);transform-origin:center right;
}
.hero-showreel-frame::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:repeating-linear-gradient(-14deg, transparent 0 5px, rgba(0,0,0,.22) 5px 6px);
  opacity:.12;mix-blend-mode:multiply;
}
.hero-showreel-frame::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:
    linear-gradient(90deg, rgba(3,3,3,.82) 0%, rgba(3,3,3,.36) 34%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.12) 18%, transparent 54%, rgba(0,0,0,.46));
  mix-blend-mode:soft-light;
}
.hero-showreel video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-texture{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(168deg, transparent 0 7px, rgba(255,255,255,.18) 7px 8px);
}
.hero-overlay{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg, #050504 0%, rgba(5,5,4,.98) 31%, rgba(5,5,4,.82) 55%, rgba(5,5,4,.46) 75%, rgba(5,5,4,.72) 100%),
  linear-gradient(180deg, rgba(8,8,7,.86) 0%, rgba(8,8,7,.36) 34%, rgba(8,8,7,.56) 66%, rgba(8,8,7,.96) 100%)}
.hero-content{position:relative;z-index:5;width:100%;padding-top:128px;padding-bottom:clamp(40px,5vw,72px)}
.hero-top{position:relative;display:flex;justify-content:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:clamp(36px,6vw,80px)}
.hero-top::after{content:"";position:absolute;left:0;bottom:0;width:50%;height:1px;background:var(--on-dark-line)}
.hero-brandline{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);flex-wrap:wrap}
.hero-top .klabel{color:var(--on-dark-soft)}
.hero-top .right{display:flex;gap:36px;flex-wrap:wrap;text-align:right}
.hero-top .right .it b{display:block;font-family:var(--f);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--on-dark);margin-bottom:3px}
.hero-top .ind{display:inline-flex;align-items:center;gap:7px}
.hero-top .ind .d{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero-top .hero-svc{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.hero-top .hero-svc--row{flex-direction:row;align-items:center;gap:0;flex-wrap:nowrap}
.hero-top .hero-svc span{font-family:var(--m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-dark-soft);display:inline-flex;align-items:center;gap:9px;line-height:1}
.hero-top .hero-svc span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.hero-top .hero-svc--row span::before{margin-left:10px}
.hero-top .hero-svc--row span:first-child::before{margin-left:0}

.hero h1{font-family:var(--d);font-weight:var(--hw);font-size:clamp(40px,4.8vw,78px);line-height:0.98;letter-spacing:-0.04em;max-width:22ch;text-wrap:balance}
.hl{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hl-i{display:inline-block;will-change:transform}
.hero h1 .uline{white-space:nowrap;color:var(--accent)}
.rotator{display:inline-block;position:relative;vertical-align:bottom;color:var(--accent);white-space:nowrap}
.rotator .word{display:inline-block;white-space:nowrap}

.hero-foot{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-top:clamp(32px,4vw,56px);
  background:rgba(8,8,7,.28);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(245,244,240,.06);border-left:none;border-radius:0 14px 14px 0;
  padding:clamp(20px,2.5vw,32px) clamp(20px,2.5vw,32px) clamp(20px,2.5vw,32px) 0}
.hero-sub{font-family:var(--f);font-size:18px;line-height:1.55;color:var(--on-dark);max-width:48ch;margin:0}
.hero-sub .lead{display:block;font-family:var(--d);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-0.018em;color:var(--on-dark);margin-bottom:14px}
.hero-sub .body{display:block;color:var(--on-dark-soft);font-weight:500;line-height:1.35}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.mid-cta{display:flex;justify-content:flex-start;padding-top:clamp(28px,4vw,44px)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;font-family:var(--m);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s,border-color .25s;border:1px solid var(--ln)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--tx)}
.btn-ghost:hover{background:var(--tx);color:var(--bgc)}
.hero .btn{border-color:var(--on-dark-line);color:var(--on-dark)}
.hero .btn-primary{border-color:transparent;color:var(--accent-ink)}
.hero .btn-ghost:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}

.hero-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;font-family:var(--m);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--on-dark-soft);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll .ln{width:1px;height:30px;background:linear-gradient(var(--accent),transparent)}

/* ===== LOGO TICKER ===== */
.logo-ticker{border-top:1px solid var(--ln-soft);border-bottom:1px solid var(--ln-soft);padding:30px 0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-ticker .track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.logo-ticker .track img{width:auto;object-fit:contain;margin:0 44px;opacity:.55;filter:grayscale(1);transition:opacity .3s,filter .3s}
.logo-ticker .track img:hover{opacity:1;filter:grayscale(0)}
.logo-ticker .tk{font-family:var(--d);font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--tx-mute);margin:0 30px;transition:color .3s}
.logo-ticker .tk:hover{color:var(--tx)}
.logo-ticker .sep{font-family:var(--m);font-size:10px;color:var(--accent);align-self:center}
.logo-ticker:hover .track{animation-play-state:paused}

/* ===== OUTLINE-MARQUEE (Divider) ===== */
.kin-marquee{overflow:hidden;padding:clamp(36px,6vw,84px) 0;pointer-events:none}
.kin-track{display:inline-flex;white-space:nowrap;will-change:transform}
.kin-track span{font-family:var(--d);font-weight:700;font-size:clamp(56px,9vw,130px);line-height:1;letter-spacing:-0.04em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px var(--tx-mute);padding-right:.5em;transition:-webkit-text-stroke-color .9s}
.kin-track span b{font-weight:700;color:var(--accent);-webkit-text-stroke:0}

/* ===== SECTION ===== */
.section{padding:clamp(72px,9vw,140px) 0;position:relative}
.section-head{margin-bottom:clamp(40px,5vw,68px)}
.section-title{font-family:var(--d);font-weight:var(--hw);font-size:clamp(34px,5vw,78px);line-height:0.98;letter-spacing:-0.035em;color:var(--tx);text-wrap:balance}
.section-title .acc{color:var(--accent)}
.mark,
.hs-mark{
  position:relative;z-index:0;white-space:nowrap;padding:0 .08em;
}
.mark::before,
.hs-mark::before{
  content:"";position:absolute;left:-.02em;right:-.02em;top:14%;bottom:6%;
  background:var(--accent);z-index:-1;
}
.section-title .mark{color:var(--accent-ink)}
body[data-theme="dark"] .section-title .acc{color:var(--accent)}
.section-lede{margin-top:22px;font-family:var(--f);font-size:18px;line-height:1.6;color:var(--tx-soft);max-width:54ch}

/* Section eyebrow – matches local scroll-nav label */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--tx-mute);margin:0 0 clamp(14px,1.8vw,20px);
}
.section-eyebrow::before{
  content:"";flex:none;width:clamp(28px,3vw,44px);height:2px;background:var(--accent);
}
.section-head--split .section-eyebrow{grid-column:1/-1}
.section-head--center .section-eyebrow{justify-content:center;margin-inline:auto}

/* Editorial section-head variants – layouts intentionally differ section to section */
.section-head--rule{border-bottom:1px solid var(--ln);padding-bottom:clamp(24px,3vw,38px)}
.section-head--split{display:grid;grid-template-columns:1.25fr 1fr;column-gap:clamp(28px,5vw,72px);row-gap:0;align-items:end;border-bottom:1px solid var(--ln);padding-bottom:clamp(28px,3.5vw,44px)}
.section-head--split .section-lede{margin-top:0}
.section-head--center{display:flex;flex-direction:column;align-items:center;text-align:center}
.section-head--center .section-title{max-width:18ch}
.section-head--center .section-lede{margin-inline:auto;text-align:center;max-width:58ch}
.section-head--lg .section-title{font-size:clamp(42px,6.6vw,104px);letter-spacing:-0.045em}
@media(min-width:861px){.section-head--nowrap .section-title{white-space:nowrap}}

/* ===== 01 SPANNUNG ===== */
.problem{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.problem-quote{font-family:var(--d);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.18;letter-spacing:-0.026em;color:var(--tx)}
.problem-quote em{font-style:normal;background:transparent;color:inherit;padding:0}
.problem-quote .w{color:var(--tx)}
.problem-quote .w.mk{background:var(--accent);color:var(--accent-ink);padding:0 .08em}
.problem-copy p{margin-top:22px;font-size:18px;line-height:1.6;color:var(--tx-soft);max-width:46ch}
.q-list{display:flex;flex-direction:column;border-top:1px solid var(--ln)}
.q-list .row{display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--ln-soft);transition:padding .25s,border-color .9s}
.q-list .row:hover{padding-left:14px}
.q-list .row .n{font-family:var(--m);font-size:11px;color:var(--tx-mute);letter-spacing:0.06em}
.q-list .row .t{font-family:var(--d);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-0.012em;color:var(--tx)}
.q-list .row .x{font-family:var(--m);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-mute)}
.q-list .row:hover .x{color:var(--tx)}
.q-list .row:hover .n{color:var(--accent)}

/* ===== 02 ARBEITSWEISE – Pinned Scrollytelling ===== */
.pin-space{height:270vh;position:relative}
.pin-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.pin-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(32px,5vw,84px);align-items:center;width:100%}
.pin-left .section-title{font-size:clamp(30px,3.6vw,58px)}
.pin-lede{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--tx-soft);max-width:44ch}
.pin-steps{margin-top:36px;border-top:1px solid var(--ln-soft)}
.pin-step{padding:16px 2px 18px;border-bottom:1px solid var(--ln-soft);cursor:pointer;opacity:.42;transition:opacity .4s,border-color .9s}
.pin-step.active{opacity:1}
.pin-step .row{display:flex;align-items:baseline;gap:14px}
.pin-step .n{font-family:var(--m);font-size:11px;color:var(--tx-mute);letter-spacing:0.08em}
.pin-step .t{font-family:var(--d);font-weight:600;font-size:19px;letter-spacing:-0.015em;color:var(--tx)}
.pin-step .bar{height:2px;background:var(--ln-soft);margin-top:12px;position:relative;overflow:hidden}
.pin-step .bar i{position:absolute;top:0;left:0;bottom:0;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.pin-right{position:relative;min-height:clamp(380px,52vh,560px)}
.pin-pane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;visibility:hidden;opacity:0;transform:translateY(28px);pointer-events:none;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.pin-pane.active{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.pin-pane .ph{aspect-ratio:16/8;margin-bottom:26px;border:5px solid #fff;box-shadow:0 18px 50px rgba(0,0,0,.4);transform:rotate(-1.4deg)}
.pin-pane:nth-child(2) .ph{transform:rotate(1.6deg)}
.pin-pane h3{font-family:var(--d);font-weight:600;font-size:clamp(24px,2.4vw,38px);line-height:1.1;letter-spacing:-0.022em;color:var(--tx)}
.pin-pane p{font-size:16.5px;line-height:1.6;color:var(--tx-soft);margin:14px 0 0;max-width:52ch}
.pin-pane .m-tags{margin-top:20px}
.m-tags{display:flex;flex-wrap:wrap;gap:7px}
.m-tags span{font-family:var(--m);font-size:10.5px;letter-spacing:0.04em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--ln-soft);border-radius:999px;color:var(--tx-soft)}

/* ===== 03 ANGEBOTE – editorial question-cards (aus v7, Farb-Dramaturgie v9) ===== */

/* dark sub-panel: immer anthrazit, unabhängig vom Scroll-Theme – bewusster Kontrast */
.oa-dark{
  background:var(--ink-2);
  padding:clamp(28px,3vw,48px);
  margin-bottom:16px;
}
.oa-light{
  padding:clamp(20px,2.5vw,40px) 0 0;
}

/* Gruppen-Label mit Dekorationslinie */
.oa-bl{
  font-family:var(--d);font-weight:700;
  font-size:clamp(20px,2.2vw,32px);letter-spacing:-0.02em;
  display:flex;align-items:center;gap:20px;margin-bottom:24px;
}
.oa-dark .oa-bl{color:var(--on-dark-soft)}
.oa-dark .oa-bl::after{content:"";flex:1;height:1px;background:rgba(245,244,240,.18)}
.oa-light .oa-bl{color:var(--tx-mute)}
.oa-light .oa-bl::after{content:"";flex:1;height:1px;background:var(--ln-soft);transition:background-color .9s}

/* Grids */
.oa-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(245,244,240,.18)}
.oa-g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

/* Card */
.oa-card{
  display:flex;flex-direction:column;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1);
}
.oa-dark .oa-card{background:var(--ink-3)}
.oa-light .oa-card{
  background:var(--card);border:1px solid var(--card-line);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1),background-color .9s,border-color .9s;
}
.oa-card:hover{transform:translateY(-5px)}
.oa-dark .oa-card:hover{box-shadow:0 22px 56px rgba(0,0,0,.35)}
.oa-light .oa-card:hover{box-shadow:0 16px 44px rgba(14,14,12,.1)}

/* Accent-Top-Bar beim Hover (v9-Behandlung) */
.oa-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:2;
}
.oa-card:hover::before{transform:scaleX(1)}

/* Bildbereich */
.oa-vis{position:relative;overflow:hidden}
.oa-dark .oa-vis{aspect-ratio:4/3}
.oa-light .oa-vis{aspect-ratio:16/9}

/* Card-Body */
.oa-body{padding:20px 22px 26px;display:flex;flex-direction:column;flex:1}

/* Frage-Headline */
.oa-q{
  font-family:var(--d);font-weight:700;
  font-size:clamp(19px,2.1vw,28px);letter-spacing:-0.022em;line-height:1.22;
  margin:0;flex:1;
}
.oa-dark .oa-q{color:#F5F4F0}
.oa-light .oa-q{color:var(--tx);transition:color .9s}

/* Footer-Zeile (Tag + Pfeil) */
.oa-foot{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Format-Tag */
.oa-dark .oa-tag{
  font-family:var(--m);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);background:#0d0d0b;padding:5px 9px;border:1px solid #2b2a25;
}
.oa-light .oa-tag{
  font-family:var(--m);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);padding:5px 9px;
}

/* Pfeil */
.oa-arr{font-size:18px;transition:transform .25s;color:var(--accent)}
.oa-card:hover .oa-arr{transform:translateX(5px)}

/* ===== 04 FÜR WEN ===== */
.aud{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.aud-copy h3{font-family:var(--d);font-weight:700;font-size:clamp(26px,3vw,42px);line-height:1.02;letter-spacing:-0.03em;color:var(--tx)}
.aud-copy h3 .acc{color:var(--accent)}
.aud-copy p{font-size:18px;line-height:1.6;color:var(--tx-soft);max-width:40ch;margin-top:20px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--ln);border-radius:999px;font-family:var(--f);font-size:15px;background:transparent;transition:background .25s,color .25s,border-color .9s}
.chip .n{font-family:var(--m);font-size:10px;color:var(--tx-mute)}
.chip:hover{background:var(--tx);color:var(--bgc)}
.chip:hover .n{color:var(--accent)}

/* ===== 05 PROJEKTE ===== */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cases--bento{
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:auto;
  gap:14px;
}
.cases--bento .case:nth-child(1){grid-column:1/8;grid-row:1/3}
.cases--bento .case:nth-child(2){grid-column:8/13;grid-row:1}
.cases--bento .case:nth-child(3){grid-column:8/13;grid-row:2}
.cases--bento .case:nth-child(4){grid-column:1/7;grid-row:3}
.cases--bento .case:nth-child(5){grid-column:7/13;grid-row:3}
.cases--bento .case--feature .vis{flex:1;aspect-ratio:auto;min-height:clamp(240px,32vw,380px)}
.cases--bento .case--feature .name{font-size:clamp(22px,2.2vw,28px)}
.case{border:1px solid var(--card-line);background:var(--card);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s cubic-bezier(.2,.7,.2,1),background-color .9s,border-color .35s}
a.case{text-decoration:none;color:inherit}
.case:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 48px rgba(0,0,0,.14),0 4px 12px rgba(0,0,0,.06);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--card-line));
  z-index:2;
}
.case .vis{aspect-ratio:16/9;border-bottom:1px solid var(--card-line);position:relative;overflow:hidden}
.case .vis img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.case:hover .vis img{transform:scale(1.05)}
.case:hover .vis::before{opacity:.42!important}
.case .stat{position:absolute;right:18px;bottom:16px;z-index:4;font-family:var(--d);font-weight:700;font-size:clamp(40px,4.4vw,68px);letter-spacing:-0.04em;line-height:0.9;color:var(--on-dark);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.case:hover .stat{transform:translateY(-4px)}
.case .stat .u{font-family:var(--m);font-size:12px;font-weight:400;letter-spacing:0.04em;color:var(--on-dark-soft);display:block;margin-top:6px;text-align:right}
.case .stat .acc{color:var(--accent)}
.case .meta{padding:24px 28px 28px;display:flex;flex-direction:column;gap:9px;transition:background-color .35s}
.case:hover .meta{background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.case .client{font-family:var(--m);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx)}
.case .name{font-family:var(--d);font-weight:600;font-size:23px;line-height:1.15;letter-spacing:-0.02em;color:var(--tx)}
.case .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.case .tags span{
  font-family:var(--m);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--ln-soft);border-radius:999px;color:var(--tx-soft);
  transition:background-color .3s,border-color .3s,color .3s;
}
.case:hover .tags span{
  border-color:color-mix(in srgb,var(--accent) 40%,var(--ln-soft));
  color:var(--tx);
}
.case .tags span:first-child{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--ln-soft));
  color:var(--tx);
}
.case:hover .tags span:first-child{background:color-mix(in srgb,var(--accent) 22%,transparent)}

/* ===== STUDIO ===== */
.studio{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center}
.studio .portrait{aspect-ratio:4/5;border:5px solid #fff;box-shadow:0 18px 50px rgba(0,0,0,.4);transform:rotate(-1.4deg);position:relative}
.studio .portrait.reveal{transform:rotate(-1.4deg)}
@media (prefers-reduced-motion: no-preference){
  .studio .portrait.reveal{transform:translateY(22px) rotate(-1.4deg)}
  .studio .portrait.reveal.in{transform:rotate(-1.4deg)}
}
.studio .pin-badge{position:absolute;right:-14px;bottom:32px;z-index:6;background:var(--accent);color:var(--accent-ink);font-family:var(--m);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:10px 16px;transform:rotate(3deg)}
.studio-copy .section-eyebrow{display:flex}
.studio-copy h2{font-family:var(--d);font-weight:var(--hw);font-size:clamp(30px,4vw,58px);line-height:1.02;letter-spacing:-0.03em;color:var(--tx)}
.studio-copy h2 .acc{color:var(--accent)}
.studio-copy .p{font-size:18px;line-height:1.62;color:var(--tx-soft);margin-top:24px;max-width:50ch}
.studio-sign{margin-top:32px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.studio-sign .who{font-family:var(--d);font-weight:600;font-size:18px;letter-spacing:-0.01em;color:var(--tx)}
.studio-sign .who span{display:block;font-family:var(--m);font-size:11px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:var(--tx-mute);margin-top:4px}
.studio-sign .line{flex:1;height:1px;background:var(--ln-soft);min-width:40px}

/* ===== ARBEITSWEISE (Prinzipien-Karten) ===== */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.m-card{border:1px solid var(--card-line);background:var(--card);padding:30px 28px 28px;display:flex;flex-direction:column;min-height:380px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .9s,border-color .9s}
.m-card:hover{transform:translateY(-5px)}
.m-card .step{font-family:var(--m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx);display:flex;align-items:center;gap:10px}
.m-card .step::before{content:"";width:26px;height:2px;background:var(--accent)}
.m-card h3{font-family:var(--d);font-weight:600;font-size:25px;line-height:1.12;letter-spacing:-0.02em;margin-top:18px;color:var(--tx)}
.m-card p{font-size:15px;line-height:1.55;color:var(--tx-soft);margin-top:14px}
.m-card .m-tags{margin-top:18px}
.m-card .m-tags .hl-tag{border-color:transparent;color:var(--accent-ink);background:var(--accent)}
.m-card .bign{font-family:var(--d);font-weight:700;font-size:108px;letter-spacing:-0.05em;line-height:0.85;margin-top:auto;color:var(--tx)}
.m-card .bign span{color:var(--accent)}

/* ===== STIMMEN ===== */
.t-wrap{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);margin-top:48px}
.t-track{display:inline-flex;will-change:transform}
.t-track:hover{animation-play-state:paused}
.t-wrap--swipe{
  pointer-events:auto;cursor:grab;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
}
.t-wrap--swipe:active{cursor:grabbing}
.t-wrap--swipe .t-track{animation:none !important;will-change:transform}
.t-wrap--swipe a{-webkit-user-drag:none}
.t-card{flex:0 0 440px;margin-right:16px;padding:30px;border:1px solid var(--ln-soft);background:var(--card);display:flex;flex-direction:column;gap:18px;transition:background-color .9s,border-color .9s}
.t-card .q{font-family:var(--d);font-weight:500;font-size:20px;line-height:1.32;letter-spacing:-0.012em;color:var(--tx)}
.t-card .q::before{content:"„";display:block;font-family:var(--d);font-weight:700;font-size:54px;line-height:0.2;color:var(--accent);margin-bottom:20px}
.t-card .who{margin-top:auto;display:flex;align-items:center;gap:16px;font-family:var(--m);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-mute)}
.t-card .who .av{width:64px;height:64px;border-radius:50%;background:var(--accent);flex-shrink:0;object-fit:cover;object-position:center top}
.t-card .who .who-info{display:flex;flex-direction:column;gap:4px}
.t-card .who b{color:var(--tx);font-weight:600;display:block}
.t-card .who .who-co{color:var(--tx-mute);font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:0.08em}
.t-card{position:relative}
.t-read-more{font-family:var(--m);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:6px;margin-top:18px;transition:opacity .2s}
.t-read-more::after{content:"";position:absolute;inset:0;z-index:1}
.t-card:hover .t-read-more{opacity:.7}
.t-card:hover{border-color:var(--accent)}

/* ===== KONTAKT (accent) ===== */
.cta-sec{padding:clamp(80px,11vw,160px) 0}
.cta-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,64px);align-items:end}
.cta-sec h2{font-family:var(--d);font-weight:var(--hw);font-size:clamp(38px,5.4vw,84px);line-height:0.96;letter-spacing:-0.035em;margin-top:0;color:var(--tx)}
.cta-sec h2 .mark{color:var(--bgc)}
.cta-sec h2 .mark::before{background:var(--tx)}
.cta-meta{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ln-soft);border:1px solid var(--ln-soft)}
.cta-meta div{background:var(--bgc);padding:22px 22px;display:flex;flex-direction:column;justify-content:flex-end;min-height:110px;height:110px;transition:background-color .9s}
.cta-meta b{font-family:var(--d);font-weight:600;font-size:17px;line-height:1.32;letter-spacing:-0.012em;color:var(--tx)}
.cta-right p{font-size:18px;line-height:1.6;color:var(--tx-soft);max-width:34ch}
.cta-right .btns{display:flex;flex-direction:column;gap:12px}
.cta-right .btn{justify-content:space-between;border-color:var(--ln);color:var(--tx)}
.cta-right .btn-primary{background:var(--tx);border-color:transparent;color:var(--bgc)}
.cta-right .btn-primary:hover{transform:translateY(-2px)}
.cta-right .btn-ghost:hover{background:var(--tx);color:var(--bgc)}

/* ===== FOOTER ===== */
footer{padding:clamp(48px,6vw,80px) 0 32px;border-top:1px solid var(--ln)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
.foot .big{font-family:var(--d);font-weight:700;font-size:clamp(40px,4.5vw,64px);letter-spacing:-0.04em;line-height:0.95;display:inline-flex;align-items:baseline;color:var(--tx)}
.foot .big .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);margin-left:4px}
.foot p{margin-top:18px;max-width:400px;color:var(--tx-soft);font-size:14.5px;line-height:1.55}
.foot h5{font-family:var(--m);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--tx-mute);margin:0 0 16px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot ul a{color:var(--tx-soft);transition:color .2s}
.foot ul a:hover{color:var(--tx)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid var(--ln-soft);font-family:var(--m);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-mute)}

/* ===== Reveal (Endzustand = sichtbar) ===== */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.07s}
  .reveal.d2{transition-delay:.15s}
  .reveal.d3{transition-delay:.23s}
  .rotator .word{animation:rotIn .5s cubic-bezier(.2,.7,.2,1)}
  .hero-top .ind .d{animation:pulse 2.2s infinite}
  .hero-scroll .ln{animation:scrolly 1.8s infinite}
  .logo-ticker .track{animation:marquee 44s linear infinite}
  .kin-track{animation:marquee 26s linear infinite}
  .t-track{animation:marquee 60s linear infinite}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px){
  .logo-ticker .track{animation-duration:28s}
}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hlReveal{
  0%{transform:translateY(110%);opacity:0;filter:blur(6px)}
  40%{opacity:1;filter:blur(2px)}
  100%{transform:translateY(0);opacity:1;filter:blur(0)}
}

/* Hero-Animationen – immer aktiv, unabhängig von prefers-reduced-motion */
.hero-top{animation:heroFadeUp .9s cubic-bezier(.2,.7,.2,1) .05s both}
.hero .hl-i{animation:hlReveal 1.1s cubic-bezier(.16,.8,.24,1) both}
.hero .hl:nth-child(1) .hl-i{animation-delay:.15s}
.hero .hl:nth-child(2) .hl-i{animation-delay:.4s}
.hero .hl:nth-child(3) .hl-i{animation-delay:.65s}
.hero-foot{animation:heroFadeUp 1s cubic-bezier(.2,.7,.2,1) 1s both}
.hero-scroll{animation:heroFadeUp .8s cubic-bezier(.2,.7,.2,1) 1.4s both}
@keyframes rotIn{from{transform:translateY(45%)}to{transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes scrolly{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}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Reduced Motion: Scrub-Wörter immer voll lesbar */
@media (prefers-reduced-motion: reduce){
  .intro-splash{display:none}
  body.intro-active{overflow:visible}
  body.intro-active .topbar .logo{visibility:visible}
  .problem-quote .w{color:var(--tx)}
  .problem-quote .w.mk{background:var(--accent);color:var(--accent-ink);padding:0 .08em}
}

/* ===== Pin-Fallback: mobil & reduced motion → statisch ===== */
@media (max-width:1040px), (prefers-reduced-motion: reduce){
  .pin-space{height:auto}
  .pin-stick{position:static;height:auto;display:block;overflow:visible;padding:0}
  .pin-grid{grid-template-columns:1fr;align-items:start}
  .pin-steps{display:none}
  .pin-right{min-height:0}
  .pin-pane{position:static;visibility:visible;opacity:1;transform:none;pointer-events:auto;margin-top:40px}
}

@media (min-width:1921px){
  .hero-showreel{
    right:auto;
    left:calc(50% + min(var(--max), 100vw - 2 * var(--gutter)) * 0.16);
    width:clamp(480px, 24vw, 580px);
  }
}
@media (max-width:1200px){
  .cases--bento .case:nth-child(1){grid-column:1/8}
  .cases--bento .case:nth-child(4){grid-column:1/7}
  .cases--bento .case:nth-child(5){grid-column:7/13}
}
@media (max-width:1040px){
  .hero-showreel{width:clamp(300px,38vw,380px);right:42px;left:auto;top:clamp(92px,13vh,132px);opacity:.94}
  .hero-overlay{background:
    linear-gradient(90deg, #050504 0%, rgba(5,5,4,.98) 44%, rgba(5,5,4,.72) 72%, rgba(5,5,4,.62) 100%),
    linear-gradient(180deg, rgba(8,8,7,.88) 0%, rgba(8,8,7,.44) 34%, rgba(8,8,7,.68) 66%, rgba(8,8,7,.97) 100%)}
  .hero-foot{grid-template-columns:1fr;gap:28px}
  .hero-actions,
  .hero .hero-actions,
  .hero-foot--offer .hero-actions,
  .hero-bottom .hero-actions,
  .hero-side .hero-actions{justify-content:flex-start}
  .hero-content{padding-bottom:clamp(72px,12vh,104px)}
  .hero-scroll{bottom:clamp(10px,2vh,16px)}
  .problem,.aud,.studio,.cases{grid-template-columns:1fr;gap:36px}
  .cases--bento{grid-template-columns:repeat(2,1fr);gap:14px}
  .cases--bento .case:nth-child(1){grid-column:1/3;grid-row:auto}
  .cases--bento .case:nth-child(2){grid-column:1;grid-row:auto}
  .cases--bento .case:nth-child(3){grid-column:2;grid-row:auto}
  .cases--bento .case:nth-child(4){grid-column:1;grid-row:auto}
  .cases--bento .case:nth-child(5){grid-column:2;grid-row:auto}
  .cases--bento .case--feature .vis{min-height:0;aspect-ratio:16/9;flex:none}
  .method{grid-template-columns:1fr}
  .m-card{min-height:0}
  .oa-g3{grid-template-columns:1fr}
  .oa-g2{grid-template-columns:1fr}
  .section-head--split{grid-template-columns:1fr;column-gap:16px;row-gap:0}
  .cta-grid{grid-template-columns:1fr;gap:48px}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .hero{min-height:100svh}
  .hero-media::before{left:-170px;top:10vh;opacity:.58}
  .hero-media::after{left:auto;right:-90px;top:112px;opacity:.30}
  .hero-showreel{width:236px;right:-94px;top:96px;opacity:.48;filter:drop-shadow(-24px 30px 44px rgba(0,0,0,.5))}
  .hero-showreel-frame{border-radius:26px;transform:rotateY(-18deg) rotateZ(3deg)}
  .hero-overlay{background:
    linear-gradient(90deg, #050504 0%, rgba(5,5,4,.99) 58%, rgba(5,5,4,.82) 100%),
    linear-gradient(180deg, rgba(8,8,7,.90) 0%, rgba(8,8,7,.55) 38%, rgba(8,8,7,.74) 68%, rgba(8,8,7,.98) 100%)}
  .nav{display:none}
  .nav-toggle{display:flex}
  .topbar .nav-cta{display:none}
  body:not([data-mobile-bottom-bar="off"]).has-mobile-bottom-bar{
    padding-bottom:calc(var(--mobile-bottom-bar-h) + env(safe-area-inset-bottom,0px));
  }
  body:not([data-mobile-bottom-bar="off"]) .mobile-bottom-bar{display:flex}
  .cta-meta{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .t-card{flex-basis:320px}
  .cases--bento{grid-template-columns:1fr}
  .cases--bento .case:nth-child(n){grid-column:1}
}

/* ===== KONTAKT-MODAL ===== */
.kontakt-modal{
  --tx-mute:#8b897f;
  --tx-soft:#46453f;
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,32px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility .35s;
}
.kontakt-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.kontakt-modal__backdrop{
  position:absolute;inset:0;background:rgba(14,14,12,.52);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.kontakt-modal__panel{
  position:relative;z-index:1;width:min(1120px,100%);max-height:min(94vh,900px);
  display:grid;grid-template-columns:1.15fr 0.85fr;background:#FBFAF7;color:var(--ink);
  border-radius:clamp(18px,2.4vw,28px);overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  transform:translateY(16px) scale(.985);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.kontakt-modal.is-open .kontakt-modal__panel{transform:none}
.kontakt-modal__close{
  position:absolute;top:clamp(14px,2vw,20px);right:clamp(14px,2vw,20px);z-index:3;
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(14,14,12,.06);color:var(--ink);font-size:20px;line-height:1;
  transition:background .2s,transform .2s;
}
.kontakt-modal__close:hover{background:rgba(14,14,12,.12);transform:scale(1.05)}
.kontakt-modal__form{
  min-height:0;max-height:min(94vh,900px);
  padding:clamp(28px,4vw,48px) clamp(24px,3.5vw,44px);
  padding-bottom:clamp(20px,2.5vw,32px);
  overflow-y:auto;scrollbar-width:thin;
}
.kontakt-modal__form h2{
  font-family:var(--d);font-weight:700;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.03em;line-height:1.12;margin:0 0 clamp(20px,2.8vw,28px);max-width:none;
}
.kontakt-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.kontakt-field label{
  font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-mute,#8b897f);
}
.kontakt-field input,.kontakt-field textarea{
  width:100%;padding:14px 16px;border:0;border-radius:10px;background:#F2F2ED;
  font-family:var(--f);font-size:16px;line-height:1.4;color:var(--ink);
  transition:box-shadow .2s,background .2s;
}
.kontakt-field input::placeholder,.kontakt-field textarea::placeholder{
  font-size:15px;color:rgba(14,14,12,.45);
}
.kontakt-field input:focus,.kontakt-field textarea:focus{
  outline:none;box-shadow:0 0 0 2px var(--accent);background:#fff;
}
.kontakt-field textarea{min-height:88px;resize:vertical}
.kontakt-field.is-error input,.kontakt-field.is-error textarea{box-shadow:0 0 0 2px #c0392b}
.kontakt-angebote{margin-bottom:20px}
.kontakt-angebote__label{
  font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-mute,#8b897f);margin-bottom:10px;display:block;
}
.kontakt-angebote__hint{font-size:14px;color:var(--tx-soft,#46453f);margin:0 0 12px;line-height:1.45}
.kontakt-angebote__grid{display:flex;flex-wrap:wrap;gap:8px}
.kontakt-angebot{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:#F2F2ED;font-size:14px;line-height:1.2;cursor:pointer;
  transition:background .2s,box-shadow .2s;
  user-select:none;
}
.kontakt-angebot input{
  flex:none;width:16px;height:16px;margin:0;accent-color:var(--ink);cursor:pointer;
}
.kontakt-angebot:has(input:checked){background:#fff;box-shadow:0 0 0 2px var(--accent)}
.kontakt-angebot:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.kontakt-privacy{margin:18px 0 24px}
.kontakt-privacy__label{
  font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-mute,#8b897f);margin-bottom:8px;display:block;
}
.kontakt-privacy__row{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45}
.kontakt-privacy__row input{
  flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--ink);cursor:pointer;
}
.kontakt-privacy__row a{text-decoration:underline;text-underline-offset:2px}
.kontakt-privacy.is-error .kontakt-privacy__row{color:#c0392b}
.kontakt-form-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  position:sticky;bottom:0;margin-top:12px;padding-top:16px;flex-shrink:0;
  background:linear-gradient(to top,#FBFAF7 78%,rgba(251,250,247,0));
}
.kontakt-submit{
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;flex:none;white-space:nowrap;
  background:var(--ink);color:#FBFAF7;border-radius:999px;
  font-family:var(--m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .2s,background .2s,gap .2s;
}
.kontakt-captcha{display:flex;align-items:center;gap:10px;font-family:var(--m);font-size:13px;color:var(--tx-soft,#46453f)}
.kontakt-captcha input{
  width:52px;padding:10px 8px;border:0;border-radius:8px;background:#F2F2ED;
  font-family:var(--m);font-size:14px;text-align:center;
}
.kontakt-captcha input:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
.kontakt-captcha.is-error input{box-shadow:0 0 0 2px #c0392b}
.kontakt-submit:hover{transform:translateY(-2px);gap:14px;background:#000}
.kontakt-submit:disabled,.kontakt-submit.is-loading{opacity:.65;cursor:wait;transform:none}
.kontakt-submit .arr{transition:transform .2s}
.kontakt-submit:hover .arr{transform:translateX(3px)}
.kontakt-submit:disabled .arr,.kontakt-submit.is-loading .arr{transform:none}
.kontakt-error{
  margin:0 0 16px;padding:12px 14px;border-radius:10px;background:#fdecea;color:#8b1e16;
  font-size:14px;line-height:1.45;
}
.kontakt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.kontakt-modal__aside{
  min-height:0;max-height:min(94vh,900px);overflow-y:auto;
  background:#F3F2EE;padding:clamp(28px,4vw,48px) clamp(24px,3.5vw,40px);
  display:flex;flex-direction:column;gap:clamp(20px,3vw,28px);
}
.kontakt-modal__img{
  aspect-ratio:4/3;border-radius:10px;overflow:hidden;
}
.kontakt-modal__img img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;
}
.kontakt-modal__aside h3{
  font-family:var(--d);font-weight:700;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.02em;margin:0;
}
.kontakt-modal__links{display:flex;flex-direction:column;gap:18px}
.kontakt-modal__link{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--d);font-weight:600;font-size:clamp(18px,1.8vw,22px);
  letter-spacing:-.02em;line-height:1.2;color:var(--ink);
  transition:gap .2s;
}
.kontakt-modal__link:hover{gap:18px}
.kontakt-modal__link svg{flex:none;width:22px;height:22px;opacity:1;stroke-width:1.75}
.kontakt-modal__meta{margin-top:auto;padding-top:8px;font-size:14px;line-height:1.55;color:var(--tx-soft,#46453f)}
.kontakt-modal__meta b{display:block;font-family:var(--d);font-size:16px;color:var(--ink);margin-bottom:4px}
.kontakt-modal__success{
  display:none;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:16px;min-height:280px;padding:clamp(28px,4vw,48px);
}
.kontakt-modal__success.is-visible{display:flex}
.kontakt-modal__success h3{
  font-family:var(--d);font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:0;
}
.kontakt-modal__success p{margin:0;max-width:36ch;color:var(--tx-soft,#46453f);line-height:1.55}
.kontakt-form-wrap.is-sent{display:none}
body.kontakt-modal-open{overflow:hidden}
@media (max-width:760px){
  .kontakt-modal{align-items:flex-end;padding:0}
  .kontakt-modal__panel{
    width:100%;max-height:min(92dvh,900px);border-radius:24px 24px 0 0;grid-template-columns:1fr;
    transform:translateY(100%);
    overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .kontakt-modal.is-open .kontakt-modal__panel{transform:translateY(0)}
  .kontakt-modal__form,.kontakt-modal__aside{max-height:none;overflow:visible}
  .kontakt-modal__aside{order:-1;padding-bottom:20px}
  .kontakt-modal__img{aspect-ratio:16/9;max-height:180px}
  .kontakt-form-foot{position:static;background:none;padding-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .kontakt-modal,.kontakt-modal__panel{transition:none}
}

/* ===== VIDEO-LIGHTBOX (Lazy-Load, max. Quellauflösung) ===== */
.video-lightbox{
  position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,32px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility .35s;
}
.video-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.video-lightbox__backdrop{
  position:absolute;inset:0;background:rgba(14,14,12,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.video-lightbox__panel{
  position:relative;z-index:1;width:min(540px,92vw);max-height:min(92vh,960px);
  display:flex;flex-direction:column;gap:clamp(10px,1.4vw,14px);
  transform:translateY(12px) scale(.985);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.video-lightbox.is-open .video-lightbox__panel{transform:none}
.video-lightbox__frame{
  position:relative;width:100%;aspect-ratio:9/16;background:#0d0d0b;
  border-radius:clamp(14px,1.6vw,18px);overflow:hidden;
  box-shadow:0 24px 72px rgba(0,0,0,.38);
  border:1px solid rgba(245,244,240,.12);
}
.video-lightbox__frame video{
  display:block;width:100%;height:100%;object-fit:contain;background:#0d0d0b;
}
.video-lightbox__title{
  font-family:var(--d);font-weight:600;font-size:clamp(15px,1.35vw,17px);
  letter-spacing:-.018em;line-height:1.25;color:#FBFAF7;text-align:center;margin:0;
  padding:0 clamp(8px,2vw,16px);
}
.video-lightbox__close{
  position:absolute;top:clamp(-12px,-1.2vw,-8px);right:clamp(-8px,-.8vw,-4px);z-index:2;
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(251,250,247,.94);color:var(--ink);font-size:20px;line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:background .2s,transform .2s;
}
.video-lightbox__close:hover{background:#fff;transform:scale(1.05)}
body.video-lightbox-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .video-lightbox,.video-lightbox__panel{transition:none}
}