/* =====================================================================
       * VSNZ WINTER ARC 2027 — Konsolidiertes Stylesheet
       * ---------------------------------------------------------------------
       * Alle ehemals 11 verstreuten <style>-Blöcke wurden in dieser Datei in
       * exakt der ursprünglichen Kaskaden-Reihenfolge zusammengeführt, damit
       * das visuelle Ergebnis 1:1 identisch bleibt. Die Layer-Reihenfolge:
       *
       *  01. CORE — Reset, Tokens, Layout, Components (Base Layer)
       *  02. CORE ADDENDUM — Nav-Höhen & Viewport-Feinschliff
       *  03. PAGE-LOCAL — Winter-Arc Sektionen
       *  04. REFINE v2 — Typo-Rhythmus, Kontraste, Motion-Fallbacks
       *  05. LAYOUT PASS — Grids, Rails, Studio & Projects
       *  06. BIG IMAGE v1 — Fullbleed-Medien & Sheen
       *  07. KLARSCHLIFF v1 — A11y-Fallbacks & Media-Budget
       *  08. KLARSCHLIFF MOBILE v1 — Mobile-Feinschliff
       *  09. FX v1 — Aurora / Glacier Layer
       *  10. FULLSCREEN STAGE v2 — Bühnen-Sektionen
       *  11. EVENT-HEAD & TZOOM — Final Override Layer
       *
       *  99. CONSOLIDATION LAYER — CLS-, a11y- und Motion-Härtung (neu)
       * ===================================================================== */

      /* =====================================================================
         01. CORE — Reset, Tokens, Layout, Components (Base Layer)
         ===================================================================== */
      :root{
        --ink:#FFFFFF; --slate:#EEF2F4; --mist:#5C6A72;
        --frost:#10161A; --ice-1:#C6E9F7; --ice-2:#77BEDD;
        --line:rgba(16,22,26,.12);
        --gut:clamp(20px,3.2vw,56px);
        --safe-l:env(safe-area-inset-left,0px);
        --safe-r:env(safe-area-inset-right,0px);
        --safe-t:0px;
        --safe-b:env(safe-area-inset-bottom,0px);
        --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
        --utility:"Space Grotesk",ui-monospace,"SF Mono",monospace;
        --ease:cubic-bezier(.22,1,.36,1);
        --rv-ease:cubic-bezier(.16,1,.3,1);
        --nav-h:86px;
      }
      *,*::before,*::after{box-sizing:border-box}
      html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--safe-t) + 24px)}
      html,body{margin:0;padding:0}
      html,body{min-height:100vh;min-height:100dvh}
      body{background:var(--ink);color:var(--frost);font-family:var(--display);
        -webkit-font-smoothing:antialiased;overflow-x:hidden}
      /* Inactive views are not painted until they become the active page. */
      .page:not(.is-active){content-visibility:hidden}
      a{color:inherit;text-decoration:none}
      button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
      img{display:block;max-width:100%}
      :focus-visible{outline:2px solid var(--ice-1);outline-offset:4px;border-radius:2px}
      .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

      /* ------------------------------------------------------------
         GPU acceleration / Safari-iOS subpixel-jitter fixes.
         Promotes animated elements to their own compositor layer and
         locks backface/3d handling so transforms don't shimmer.
         ------------------------------------------------------------ */
      .rv,.lu,.proj,.card,.btn{
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d
      }
      .rv,.btn{will-change:transform,opacity}
      .lu,.proj,.card{will-change:transform}

      /* Touch-scroll performance for horizontal drag rails */
      .lineup__rail,.rail{
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x
      }

      .ph{position:relative;overflow:hidden;background:var(--slate);
        background-image:repeating-linear-gradient(135deg,rgba(16,22,26,.035) 0 1px,transparent 1px 9px);
        box-shadow:inset 0 0 46px 14px rgba(255,255,255,.4)}
      .ph::after{content:attr(data-ph);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
        font:500 10px/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;
        color:rgba(16,22,26,.3);white-space:nowrap;padding:8px 12px;border:1px solid rgba(16,22,26,.14)}
      .missing{display:inline-block;font:500 11px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;
        color:var(--ice-2);border:0;padding:0}
      .ph--img{background:none}
      .ph--img::after{display:none}
      .ph--img img{width:100%;height:100%;object-fit:cover;display:block;
        opacity:0;transition:opacity .6s var(--ease)}
      .ph--img img.is-loaded,.ph--img img[loading="eager"]{opacity:1}
      .ph--img img.is-broken{display:none}
      .ph--img img.is-broken ~ .img-fallback{display:flex}
      .img-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
        font:500 10px/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;
        color:rgba(16,22,26,.3);background:var(--slate)}
      .frost__bg .ph--img img{filter:none}
      /* Studio-Top: alle 3 Kacheln randlos gefüllt, kein Letterboxing */
      .studio-top .proj .ph--img{background:#E9EEF1}
      .studio-top .proj .ph--img img{object-fit:cover;object-position:50% 50%}
      .studio-top .grid3 .proj:nth-child(3) .ph--img img{object-position:50% 35%}

      @keyframes ambientGlow{0%,100%{opacity:1}50%{opacity:.94}}
      .frost__bg,.split__bg,.ftr__bg{animation:ambientGlow 8.5s ease-in-out infinite}

      .frost{position:relative;overflow:hidden;isolation:isolate}
      .frost__bg{position:absolute;inset:-9% 0;z-index:-4;will-change:transform,opacity}
      .frost__bg .ph{width:100%;height:100%}
      .frost__bg .ph::after{display:none}
      .ph--faint{position:relative;overflow:hidden}
      .ph--faint img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
        opacity:.4;filter:grayscale(30%) contrast(1.05) brightness(1.05)}
      .frost__tint{position:absolute;inset:0;
        background:radial-gradient(120% 80% at 50% 0%,#DCE7EC 0%,#DCE5EA 38%,#C9D4DA 72%,var(--ink) 100%)}
      .frost__wash{position:absolute;inset:0;z-index:-3;pointer-events:none;
        background:linear-gradient(180deg,rgba(233,242,246,.58) 0%,rgba(190,208,217,.15) 26%,
          rgba(255,255,255,.12) 46%,rgba(255,255,255,.76) 78%,var(--ink) 100%)}
      .frost--quiet .frost__wash{
        background:linear-gradient(180deg,rgba(233,242,246,.20) 0%,rgba(255,255,255,.42) 34%,
          rgba(255,255,255,.80) 74%,var(--ink) 100%)}
      .frost__vig{position:absolute;inset:0;z-index:-3;pointer-events:none;
        background:radial-gradient(115% 90% at 22% 42%,transparent 40%,rgba(255,255,255,.55) 100%)}

      /* Frost effect removed for a cleaner look */
      .frost__wash,.frost__vig{display:none !important}
      .frost__tint{background:var(--ink) !important}
      .ph--img .frost__tint{display:none !important}

      .arc{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
      .arc path{fill:none;stroke:rgba(255,255,255,.30);stroke-width:1;vector-effect:non-scaling-stroke;
        stroke-dasharray:2400;stroke-dashoffset:2400}
      .arc.drawn path{animation:draw 2.6s var(--ease) forwards}
      @keyframes draw{to{stroke-dashoffset:0}}

      .hdr{position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--nav-h) + var(--safe-t));
        padding-top:var(--safe-t);
        display:flex;align-items:center;justify-content:space-between;gap:20px;
        padding-right:calc(var(--gut) + var(--safe-r));padding-left:calc(var(--gut) + var(--safe-l));
        border-bottom:1px solid transparent;color:var(--frost);
        transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}
      /* auto contrast: nav ink flips to match the content directly beneath it */
      .hdr[data-tone="light"]{color:#0C1116}
      .hdr[data-tone="dark"]{color:var(--frost)}
      .hdr[data-solid="true"]{background:rgba(255,255,255,.62);backdrop-filter:blur(22px) saturate(1.18);-webkit-backdrop-filter:blur(22px) saturate(1.18);
        border-bottom-color:var(--line);color:var(--frost)}
      .brand{display:inline-flex;transition:opacity .25s var(--ease);
        animation:navBrandIn 1.1s var(--ease) both}
      .brand:hover{opacity:.6}
      .brand svg{height:clamp(34px,4.4vw,44px);width:auto;display:block;
        filter:drop-shadow(0 0 18px rgba(198,233,247,.16));
        transition:transform .4s var(--ease),filter .4s var(--ease)}
      .brand:hover svg{transform:translateY(-1px) scale(1.02);filter:drop-shadow(0 0 24px rgba(198,233,247,.3))}
      @property --nav-reveal{syntax:"<number>";inherits:false;initial-value:0}
      .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
        display:flex;gap:clamp(16px,2.2vw,38px);align-items:center;
        padding:6px 4px;--nav-reveal:0;
        clip-path:inset(0 calc((1 - var(--nav-reveal)) * 50%) 0 calc((1 - var(--nav-reveal)) * 50%));
        animation:navReveal 1.4s cubic-bezier(.22,1,.36,1) .15s forwards}
      .nav::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
        height:1px;pointer-events:none;
        background:linear-gradient(90deg,transparent,rgba(198,233,247,.7),transparent);
        opacity:0;animation:navSweep 1.6s cubic-bezier(.22,1,.36,1) .1s forwards}
      .nav button,.nav a{font:500 11px/1 var(--utility);letter-spacing:.15em;text-transform:uppercase;
        padding:8px 0;position:relative;opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);
        animation:navItemIn .7s var(--ease) both;
        animation-delay:calc(.55s + var(--i,0) * .07s);white-space:nowrap}
      .nav button,.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
        background:currentColor;transition:right .35s var(--ease)}
      .nav button,.nav a:hover{opacity:1}
      .nav button,.nav a:hover::after,.nav button,.nav a[aria-current="page"]::after{right:0}
      .nav button,.nav a[aria-current="page"]{opacity:1}
      .nav__festival-links{display:none}
      /* tighter desktop nav so all items fit between brand and tickets pill;
         also shift the nav center left of viewport center (the pill takes the right side) */
      @media (min-width:1025px){
        .nav{gap:clamp(12px,1.5vw,26px);transform:translate(calc(-50% - 150px),-50%)}
        #nav button,#nav a{letter-spacing:.08em !important}
      }
      @media (min-width:1025px) and (max-width:1380px){
        .nav{gap:clamp(9px,1.2vw,18px)}
        #nav button,#nav a{letter-spacing:.05em !important;font-size:11px !important}
      }
      @keyframes navReveal{
        0%{--nav-reveal:0;opacity:.001}
        15%{opacity:1}
        100%{--nav-reveal:1;opacity:1}
      }
      @keyframes navSweep{
        0%{opacity:0;width:0}
        55%{opacity:1;width:calc(100% + 90px)}
        100%{opacity:0;width:calc(100% + 40px)}
      }
      @keyframes navItemIn{
        0%{opacity:0;transform:translateY(-10px);filter:blur(6px)}
        60%{opacity:.9;filter:blur(0)}
        100%{opacity:.72;transform:none;filter:none}
      }
      @keyframes navBrandIn{
        0%{opacity:0;transform:translateY(-6px);filter:blur(4px)}
        100%{opacity:1;transform:none;filter:none}
      }
      @media (prefers-reduced-motion:reduce){
        .nav,.nav button,.nav a,.brand,.nav::before{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important}
      }
      .brkt{position:relative}
      .brkt::before,.brkt::after{color:var(--ice-2);opacity:.7;font-weight:400}
      .brkt::before{content:"[";margin-right:.45em}
      .brkt::after{content:"]";margin-left:.45em}
      /* Lando-style horizontal drift: big titles slide sideways as they cross the viewport */
      .drift{will-change:transform}
      .burger{display:none;width:34px;height:34px;position:relative}
      .burger span{position:absolute;left:6px;right:6px;height:1.5px;background:currentColor;
        transition:transform .35s var(--ease)}
      .burger span:nth-child(1){top:12px}
      .burger span:nth-child(2){bottom:12px}
      .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
      .burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

      .btn{display:inline-flex;align-items:center;gap:11px;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;
        font:600 12px/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;padding:19px 36px;
        transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
      .btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
        background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 62%);
        transform:translateX(-140%);transition:transform .7s var(--ease)}
      .btn:hover::after{transform:translateX(140%)}
      .btn__label,.btn svg{display:inline-block;will-change:transform;position:relative;z-index:2}
      .btn--ice{background:linear-gradient(160deg,var(--ice-1),var(--ice-2));color:#0A1116;
        box-shadow:0 10px 30px rgba(119,190,221,.24)}
      .btn--ice:hover{box-shadow:0 18px 46px rgba(119,190,221,.44)}
      .btn--ice{--gx:50%;--gy:50%}
      .btn--ice::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
        background:radial-gradient(120px circle at var(--gx) var(--gy),rgba(255,255,255,.5),transparent 60%);
        transition:opacity .3s var(--ease)}
      .btn--ice:hover::before{opacity:1}
      .btn--ghost{border:1px solid var(--line);color:var(--frost)}
      .btn--ghost:hover{background:rgba(198,233,247,.07);border-color:rgba(198,233,247,.44);
        box-shadow:0 0 0 1px rgba(198,233,247,.12),0 12px 34px rgba(119,190,221,.14)}
      .btn--sm{padding:13px 22px;font-size:11px}

      .page{display:none}
      .page.is-active{display:block}
      .wrap{max-width:1400px;margin:0 auto;padding:0 var(--gut)}
      .sect{position:relative;padding:clamp(90px,14vh,180px) 0}
      .sect::before{content:"";position:absolute;top:0;left:0;right:0;height:min(160px,18vh);
        background:linear-gradient(180deg,var(--ink),rgba(255,255,255,0));pointer-events:none;z-index:1}
      .eyebrow{position:relative;font:500 11px/1 var(--utility);letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
      .eyebrow::before,.eyebrow::after{color:var(--ice-2);opacity:.75}
      .eyebrow::before{content:"[ "}
      .eyebrow::after{content:" ]"}

      /* ---------------------------------------------------------------
         View Transitions API — smooth cross-document navigation now that
         nav links point to real URLs (full browser navigation instead of
         the old in-page router). Chrome/Edge 126+ honour this automatically
         via the <meta name="view-transition"> tag; other browsers just do
         a normal navigation with no animation (no fallback needed).
         --------------------------------------------------------------- */
      ::view-transition-old(root){animation:vtFadeOut .32s var(--ease) both}
      ::view-transition-new(root){animation:vtFadeIn .38s var(--ease) both}
      @keyframes vtFadeOut{to{opacity:0}}
      @keyframes vtFadeIn{from{opacity:0}}
      @media (prefers-reduced-motion:reduce){
        ::view-transition-old(root),::view-transition-new(root){animation:none}
      }

      /* simple page-wash transition — a full-screen colour gradient that just
         fades in and out smoothly between pages, no wipe/iris/sweep effects */
      .pagewash{position:fixed;inset:0;z-index:200;
        background:linear-gradient(180deg,var(--slate),var(--ink));
        opacity:0;pointer-events:none;
        transition:opacity .5s var(--ease),background .5s var(--ease)}
      .pagewash.is-on{opacity:1;pointer-events:auto}
      @media (prefers-reduced-motion:reduce){.pagewash{transition:none}}
      .pagewash[data-target="studio"]{background:linear-gradient(180deg,#E4E9EC,var(--ink))}
      .pagewash[data-target="past"]{background:linear-gradient(180deg,#E2ECF2,var(--ink))}
      .pagewash[data-target="merch"]{background:linear-gradient(180deg,#E4EDF1,var(--ink))}
      .pagewash[data-target="winterarc"]{background:linear-gradient(180deg,#DEEBF3,var(--ink))}
      .pagewash[data-target="projects"]{background:linear-gradient(180deg,#EAE6F2,var(--ink))}
      .pagewash[data-target="sponsoring"]{background:linear-gradient(180deg,#F1EAE0,var(--ink))}
      .pagewash[data-target="influencer"]{background:linear-gradient(180deg,#F2E3E9,var(--ink))}
      .pagewash[data-target="volunteers"]{background:linear-gradient(180deg,#E2EFE8,var(--ink))}
      /* gentle settle-in for whichever page just became active, on top of the wash */
      @keyframes pageIn{from{opacity:.001}to{opacity:1}}
      .page.is-active{animation:pageIn .6s var(--ease)}
      #page-past.is-active{animation:pageIn .6s var(--ease)}
      .scrollprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
        background:linear-gradient(90deg,var(--ice-1),var(--ice-2));
        box-shadow:0 0 12px rgba(119,190,221,.5);transition:width .1s linear;pointer-events:none}

      .rv{opacity:0;transform:translateY(28px) scale(.985);
        transition:opacity 1.05s var(--rv-ease),transform 1.05s var(--rv-ease)}
      .rv.in{opacity:1;transform:none}
      .rv[data-d="1"]{transition-delay:.09s}
      .rv[data-d="2"]{transition-delay:.18s}
      .rv[data-d="3"]{transition-delay:.27s}

      /* masked line-reveal — used for the hero H1: the block itself only fades,
         each line slides up out of its own overflow-hidden mask independently */
      .mask-reveal.rv{transform:none;filter:none;transition:opacity .5s var(--rv-ease)}
      .mask-reveal .mask-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
      .mask-reveal .mask-inner{display:block;transform:translateY(112%);
        transition:transform 1.05s var(--rv-ease)}
      .mask-reveal.in .mask-inner,.mask-reveal.rv.in .mask-inner{transform:none}
      .mask-reveal .mask-line:nth-child(1) .mask-inner{transition-delay:.04s}
      .mask-reveal .mask-line:nth-child(2) .mask-inner{transition-delay:.13s}
      .mask-reveal .mask-line:nth-child(3) .mask-inner{transition-delay:.22s}

      /* cinematic 3D entrance: cards fly in off a tilted plane and settle flat —
         a simple perspective/rotateX swap riding the existing .rv/.in reveal system */
      .lu.rv,.proj.rv,.card.rv{
        transform:perspective(1100px) rotateX(14deg) translateY(34px) scale(.95);
        transform-origin:50% 100%}
      .lu.rv.in,.proj.rv.in,.card.rv.in{transform:perspective(1100px) rotateX(0) translateY(0) scale(1)}

      /* scroll-driven image zoom — images/background layers sit slightly zoomed in
         and settle to their natural scale as they travel through the viewport.
         Works for any current or future photo dropped into a .ph container:
         JS only ever writes the --zoom custom property, never the transform itself,
         so this composes cleanly with any other transform a specific image needs. */
      .frost__bg .ph:not(.ph--img),.split__bg .ph:not(.ph--img),.ftr__bg .ph:not(.ph--img){transform:scale(var(--zoom,1.06));will-change:transform}
      .ph img{transform:scale(var(--zoom,1.12));will-change:transform}
      @media (prefers-reduced-motion:reduce){
        .frost__bg .ph,.split__bg .ph,.ftr__bg .ph,.ph img{transform:none}
      }

      .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;contain:layout paint}
      /* The landing hero is intentionally static: no scroll, cursor or ambient transform
         may compete for its layers and cause visual jitter. */
      .hero .frost__bg,.hero .grain{animation:none}
      .hero .frost__bg,.hero .frost__bg .ph,.hero .frost__bg .ph img{will-change:auto}
      .hero .scrolldot{animation:none}
      .hero .frost__bg .ph--img img{object-position:50% 44%;filter:grayscale(.15) contrast(1.08) saturate(1.1) brightness(.9)}
      .hero__body{position:relative;z-index:2;max-width:680px;
        padding:calc(var(--nav-h) + 12px) var(--gut) 0}
      .hero__meta{width:clamp(280px,30vw,420px);border-top:1px solid rgba(16,22,26,.34);padding-top:13px;
        display:flex;justify-content:space-between;gap:16px;
        font:500 11px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase}
      .hero__h1{margin:clamp(26px,4.2vh,46px) 0 0;font:700 clamp(30px,3.5vw,50px)/.98 var(--display);
        letter-spacing:-.02em;text-transform:uppercase}
      .hero__cta{margin-top:clamp(24px,3.6vh,40px)}
      .hero__note{display:block;margin-top:13px;font:400 10px/1.4 var(--utility);
        letter-spacing:.12em;text-transform:uppercase;color:rgba(16,22,26,.42)}
      .wordmark{position:relative;z-index:2;margin-top:auto;display:flex;align-items:baseline;
        justify-content:space-between;width:104%;margin-left:-2%;padding:0 var(--gut);white-space:nowrap;
        font:600 clamp(56px,12.6vw,224px)/.86 var(--display);letter-spacing:-.035em;color:#fff}
      /* Frost / ice-crystallization: driven purely by the scroll-linked --p custom
         property (written once per frame in JS, never a transform so it never
         collides with the horizontal .drift transform already animating this
         element). Each letter is its own gradient-clipped surface: a fixed
         white→ice base tone, two permanent "frost bloom" facets, and a diagonal
         light-sweep that travels across the glyphs as --p goes 0→1 — i.e. the
         wordmark visibly crystallizes as it scrolls out of the hero. */
      .wordmark span{
        display:inline-block;
        background:
          linear-gradient(115deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%),
          radial-gradient(140% 200% at 15% -10%,rgba(255,255,255,.35),transparent 55%),
          radial-gradient(120% 180% at 95% 110%,rgba(255,255,255,.3),transparent 55%),
          linear-gradient(170deg,#fff 0%,#fff 100%);
        background-size:240% 240%,100% 100%,100% 100%,100% 100%;
        background-position:calc(-70% + var(--p,0) * 240%) 30%,0 0,0 0,0 0;
        -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
        filter:drop-shadow(0 0 calc(4px + var(--p,0) * 26px) rgba(255,255,255,calc(.15 + var(--p,0) * .5)));
        letter-spacing:calc(-.035em + var(--p,0) * .018em)}
      .wordmark span:last-child{letter-spacing:-.045em}
      @media (prefers-reduced-motion:reduce){
        .wordmark span{background-position:0 30%,0 0,0 0,0 0;filter:none;letter-spacing:inherit}
      }
      .hero__foot{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;
        align-items:end;gap:20px;padding:clamp(18px,3vh,40px) var(--gut) clamp(20px,3vh,34px)}
      .hero__tag{grid-column:2;margin:0;text-align:center;font:500 11px/1.7 var(--utility);
        letter-spacing:.16em;text-transform:uppercase;color:rgba(16,22,26,.86)}
      .scrolldot{grid-column:2;justify-self:center;margin-top:22px;width:6px;height:6px;border-radius:50%;
        background:var(--frost);animation:bob 2.4s ease-in-out infinite}
      @keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

      .mast{min-height:64vh;min-height:64svh;display:flex;align-items:flex-end;
        padding:calc(var(--nav-h) + 90px) var(--gut) clamp(50px,7vh,90px)}
      .mast__in{position:relative;z-index:2;max-width:1400px;margin:0 auto;width:100%}
      .mast h1,.mast h2{margin:14px 0 0;font:600 clamp(36px,5.4vw,86px)/1 var(--display);letter-spacing:-.035em}
      .mast p{margin:20px 0 0;max-width:56ch;font-size:16px;line-height:1.62;color:rgba(16,22,26,.72)}

      .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:none;
        border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .facts div{background:none;padding:clamp(26px,3vw,44px) clamp(20px,2vw,32px);
        border-left:1px solid var(--line)}
      .facts div:first-child{border-left:0;padding-left:var(--gut)}
      .facts div:last-child{padding-right:var(--gut)}
      .facts dt{font:500 10px/1 var(--utility);letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
      .facts dd{margin:14px 0 0;font:600 clamp(20px,2vw,30px)/1.1 var(--display);letter-spacing:-.02em}
      .slots{display:grid;gap:clamp(34px,4vw,56px);max-width:820px}
      .slot{display:grid;gap:12px;padding:0;border:0;background:none;
        position:relative;padding-left:22px}
      .slot::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;
        background:linear-gradient(180deg,var(--ice-2),rgba(119,190,221,0))}
      .slot h3{margin:0;font:600 clamp(18px,1.6vw,22px)/1.2 var(--display);letter-spacing:-.01em}
      .slot p{margin:0;font-size:15px;line-height:1.66;color:var(--mist);max-width:60ch}

      .lineup__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:clamp(30px,4vw,52px)}
      .lineup__head h2{margin:0;font:600 clamp(40px,6.4vw,104px)/.9 var(--display);letter-spacing:-.04em;text-transform:uppercase}
      .lineup__sub{margin:18px 0 0;font:500 11px/1.5 var(--utility);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
      .lineup__when{text-align:right;font:500 11px/1.7 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:rgba(16,22,26,.82)}
      .lineup-filter{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 clamp(24px,3vw,38px);border-block:1px solid var(--line);padding:12px 0}
      .lineup-filter__days{display:flex;align-items:center;gap:4px}
      .lineup-filter__day{min-width:74px;min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--mist);font:600 12px/1 var(--utility);letter-spacing:.12em;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
      .lineup-filter__day span{color:inherit;opacity:.62;margin-left:3px}
      .lineup-filter__day:hover{color:var(--frost);border-color:var(--line)}
      .lineup-filter__day.is-active{background:var(--frost);border-color:var(--frost);color:var(--ink)}
      .lineup-filter__day:focus-visible{outline:2px solid var(--ice-2);outline-offset:3px}
      .lineup-filter__status{margin:0;color:var(--mist);font:500 12px/1.4 var(--utility);letter-spacing:.1em;text-transform:uppercase;text-align:right}
      .lineup__rail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
        padding:34px 2px 40px;margin:-34px -2px -40px;
        scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
      .lineup__rail::-webkit-scrollbar{display:none}
      .lineup__rail.dragging{cursor:grabbing;scroll-snap-type:none}
      .lineup__rail.dragging .lu__ph{transform:scale(1.06)}
      .lineup__rail.dragging .lu--zoom .lu__ph{transform:scale(1.32)}
      .lu{position:relative;flex:0 0 clamp(280px,26vw,376px);aspect-ratio:3/4.35;border-radius:14px;
        overflow:hidden;scroll-snap-align:start;isolation:isolate;
        border:1px solid rgba(16,22,26,.08);
        transition:box-shadow .5s var(--ease),border-color .5s var(--ease),
          opacity .45s var(--ease),filter .45s var(--ease),transform .5s var(--ease)}
      .lu[hidden]{display:none}
      .lu__ph{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;
        transition:transform .7s var(--ease)}
      .lu--zoom .lu__ph{transform:scale(1.32)}
      .lu--zoom:hover .lu__ph{transform:scale(1.38)}
      @media (max-width:640px){
        .lu--zoom .lu__ph{transform:scale(1.32)}
      }
      @media (hover:none){
        .lu:hover .lu__ph,
        .lu--zoom:hover .lu__ph{transform:scale(1.32)}
        .lu:hover{border-color:rgba(16,22,26,.08);box-shadow:none}
      }
      .lu::after{content:"";position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.04) 52%,rgba(255,255,255,.26) 82%,rgba(255,255,255,.42) 100%)}
      .lu:hover{border-color:rgba(198,233,247,.34);box-shadow:0 0 0 1px rgba(198,233,247,.16),0 10px 22px rgba(0,0,0,.16),0 0 26px rgba(119,190,221,.10)}
      .lu:hover .lu__ph{transform:scale(1.05)}
      /* context-aware focus: dim & soften every other card while one is hovered */
      .lu{--tilt-x:0deg;--tilt-y:0deg}
      .lineup__rail.is-focusing .lu:not(.is-focused){opacity:.4;filter:blur(2px)}
      .lineup__rail.is-focusing .lu.is-focused{
        transform:perspective(1600px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
        transition:transform .28s cubic-bezier(.22,1,.36,1);z-index:3;
        box-shadow:0 12px 26px rgba(0,0,0,.16),0 0 0 1px rgba(198,233,247,.18)}
      .lu__date{position:absolute;top:22px;left:22px;z-index:2;
        font:500 11px/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;color:rgba(16,22,26,.9)}
      .lu__foot{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;display:grid;gap:16px}
      .lu__name{font:600 clamp(26px,2.4vw,38px)/.98 var(--display);letter-spacing:-.02em;text-transform:uppercase}
      .lu__go{width:46px;height:46px;border-radius:50%;border:1px solid rgba(16,22,26,.5);
        display:grid;place-items:center;color:var(--frost);
        transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
      .lu:hover .lu__go{background:var(--frost);color:#0A1116;border-color:var(--frost)}
      .lu--tba{border-style:dashed;border-color:rgba(16,22,26,.16);background:rgba(16,22,26,.02);
        display:grid;place-items:center;align-content:center;gap:10px;text-align:center;padding:0 18px}
      .lu--tba::after{display:none}
      .lu--tba .lu__tba-k{font:500 clamp(20px,1.7vw,26px)/1.3 var(--display);letter-spacing:.04em;
        text-transform:uppercase;color:var(--mist)}
      .lu--tba .lu__tba-full{font:500 clamp(9px,.72vw,11px)/1.5 var(--utility);letter-spacing:.22em;
        text-transform:uppercase;color:rgba(16,22,26,.34)}
      .lu--tba .lu__date{left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--mist)}
      /* slow shimmer so the empty slots still feel alive rather than unfinished */
      .lu--tba::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
        background:linear-gradient(115deg,transparent 38%,rgba(198,233,247,.07) 50%,transparent 62%);
        transform:translateX(-120%);animation:tbaSheen 6.5s var(--ease) infinite;
        animation-delay:calc(var(--tba-i,0) * 1.1s)}
      .lu--tba:nth-child(2){--tba-i:1}
      .lu--tba:nth-child(3){--tba-i:2}
      .lu--tba:nth-child(4){--tba-i:3}
      @keyframes tbaSheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
      @media (prefers-reduced-motion: reduce){.lu--tba::before{animation:none;opacity:0}}
      .lineup__foot{margin-top:clamp(26px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:20px}

      /* ============================================================
         SCROLL-DRIVEN EFFECT SYSTEM
         Every element below reads a single custom property --p (0→1),
         written once per frame by the shared rAF loop. No element ever
         reads layout during animation.
         ============================================================ */

      /* --- Into-the-Picture: camera pushes into the image, which then
             becomes the backdrop for the content that follows --- */
      .itp{position:relative;height:115vh}
      .itp__stick{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
      .itp__media{position:absolute;inset:0;
        transform:scale(calc(1 + var(--p,0) * 1.1));
        transform-origin:50% 46%;
        will-change:transform;
        background:var(--ink)}
      .itp__media img{width:100%;height:100%;object-fit:cover}
      .itp__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
        background:radial-gradient(120% 90% at 50% 46%,transparent 30%,rgba(255,255,255,.55) 78%,var(--ink) 100%);
        opacity:calc(.25 + var(--p,0) * .75)}
      .itp__cap{position:absolute;z-index:3;left:0;right:0;bottom:clamp(56px,9vh,110px);
        text-align:center;padding:0 var(--gut);
        opacity:calc(1 - var(--p,0) * 2.1);
        transform:translateY(calc(var(--p,0) * -26px))}
      .itp__cap h2{margin:0 0 10px;font:600 clamp(30px,5vw,72px)/.98 var(--display);letter-spacing:-.03em}
      .itp__cap p{margin:0;font:500 11px/1 var(--utility);letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
      /* content that emerges once the camera is fully inside the picture */
      .itp__out{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;
        padding:0 var(--gut);pointer-events:none;
        opacity:clamp(0,calc((var(--p,0) - .62) * 3.4),1);
        transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .62) * 3.4),1)) * 30px))}
      .itp__out h3{margin:0 0 14px;font:600 clamp(24px,3.4vw,52px)/1.04 var(--display);letter-spacing:-.03em}
      .itp__out p{margin:0 auto;max-width:54ch;color:var(--mist);font-size:clamp(14px,1.15vw,17px);line-height:1.7}
      /* Buy Now button that appears beside the zoomed image mid-scroll, then
         fades out before .itp__out's content takes over — reuses the same
         --p custom property, so it stays perfectly in sync with the zoom. */
      .itp__buy{position:absolute;z-index:5;right:clamp(20px,4vw,64px);top:52%;
        display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
        background:linear-gradient(160deg,var(--ice-1),var(--ice-2));color:#0A1116;
        font:600 11px/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;
        box-shadow:0 10px 30px rgba(119,190,221,.28);
        opacity:min(clamp(0,(var(--p,0) - .3)*5,1),clamp(0,(.6 - var(--p,0))*8,1));
        transform:translateY(-50%) translateX(calc((1 - min(clamp(0,(var(--p,0) - .3)*5,1),clamp(0,(.6 - var(--p,0))*8,1))) * 26px));
        transition:box-shadow .3s var(--ease)}
      .itp__buy:hover{box-shadow:0 14px 40px rgba(119,190,221,.46)}
      .itp__buy svg{transition:transform .3s var(--ease)}
      .itp__buy:hover svg{transform:translateX(3px)}
      @media (max-width:700px){
        .itp__buy{right:var(--gut);top:auto;bottom:clamp(70px,14vh,120px);
          transform:translateX(calc((1 - min(clamp(0,(var(--p,0) - .3)*5,1),clamp(0,(.6 - var(--p,0))*8,1))) * 18px))}
      }

      /* --- Scale-Down on Scroll: oversized hero shrinks and settles
             into the layout as a framed tile --- */
      .sdn{position:relative;height:200vh}
      .sdn__stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
      .sdn__frame{position:relative;overflow:hidden;
        --sdn-w:min(76vw,1180px);
        --sdn-h:min(62vh,660px);
        width:calc(100vw - var(--p,0) * (100vw - var(--sdn-w)));
        height:calc(100vh - var(--p,0) * (100vh - var(--sdn-h)));height:calc(100dvh - var(--p,0) * (100dvh - var(--sdn-h)));
        border-radius:calc(var(--p,0) * 18px);
        box-shadow:0 calc(var(--p,0) * 40px) calc(var(--p,0) * 90px) rgba(0,0,0,calc(var(--p,0) * .6));
        will-change:width,height}
      .sdn__frame img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--p,0) * .14))}
      .sdn__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
        border:1px solid rgba(198,233,247,calc(var(--p,0) * .2));border-radius:inherit}
      .sdn__label{position:absolute;z-index:3;left:0;right:0;bottom:clamp(30px,6vh,64px);text-align:center;
        padding:0 var(--gut);opacity:calc(1 - var(--p,0) * 1.6)}

      /* --- Merch Pin: product image sticks while a Buy Now panel slides
             in beside it mid-scroll. Driven by the same shared --p custom
             property as .itp/.sdn above, so it never fights the existing
             .rv reveal system or the .buy-now overlay CTAs on the cards. --- */
      .merch-pin{position:relative;height:220vh}
      .merch-pin__stick{position:sticky;top:calc(var(--nav-h) + 24px);
        height:calc(100vh - var(--nav-h) - 48px);max-height:760px;
        display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(28px,5vw,72px);
        padding:0 var(--gut)}
      .merch-pin__media{position:relative;aspect-ratio:4/5;max-height:74vh;overflow:hidden;border-radius:14px;
        justify-self:end;width:100%;max-width:520px;
        box-shadow:0 30px 70px rgba(0,0,0,.5)}
      .merch-pin__media img{width:100%;height:100%;object-fit:cover;
        transform:scale(calc(1.08 - var(--p,0) * .08));transition:filter .3s linear}
      .merch-pin__media::after{content:"";position:absolute;inset:0;pointer-events:none;
        border:1px solid rgba(198,233,247,.14);border-radius:inherit}
      .merch-pin__panel{justify-self:start;max-width:420px;
        opacity:clamp(0,calc((var(--p,0) - .12) * 2.4),1);
        transform:translateX(calc((1 - clamp(0,calc((var(--p,0) - .12) * 2.4),1)) * 34px))}
      .merch-pin__eyebrow{display:block;margin-bottom:14px}
      .merch-pin__panel h2{margin:0 0 14px;font:600 clamp(26px,3vw,42px)/1.05 var(--display);letter-spacing:-.03em}
      .merch-pin__panel p{margin:0 0 22px;color:rgba(16,22,26,.72);font-size:clamp(14px,1.05vw,16px);line-height:1.62}
      .merch-pin__price{display:block;margin-bottom:26px;font:600 20px/1 var(--display)}
      .merch-pin__buy{display:inline-flex;align-items:center;gap:14px;padding:22px 44px;border-radius:999px;
        background:linear-gradient(160deg,var(--ice-1),var(--ice-2));color:#0A1116;
        font:700 14px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;
        box-shadow:0 16px 46px rgba(119,190,221,.42);transition:box-shadow .3s var(--ease),transform .3s var(--ease);
        transform:scale(1)}
      .merch-pin__buy:hover{box-shadow:0 22px 60px rgba(119,190,221,.62);transform:scale(1.045)}
      .ftr__legal-links{display:inline-flex;align-items:center;gap:8px}
      .ftr__legal-links button,.ftr__legal-links a{font:inherit;color:inherit;opacity:.8;text-decoration:underline;text-underline-offset:3px}
      .ftr__legal-links button,.ftr__legal-links a:hover{opacity:1}
      #page-legal-impressum h3,#page-legal-agb h3,#page-legal-agb h2{margin:28px 0 8px;font:600 15px/1.3 var(--display);color:var(--frost)}
      #page-legal-impressum p,#page-legal-agb p{margin:0 0 14px}
      .itp__buy.is-disabled,.merch-pin__buy.is-disabled{
        cursor:default;pointer-events:none;opacity:.55;filter:grayscale(.4);
        background:rgba(16,22,26,.14) !important;color:rgba(16,22,26,.7) !important;
        box-shadow:none !important
      }
      .itp__buy.is-disabled:hover,.merch-pin__buy.is-disabled:hover{transform:none !important;box-shadow:none !important}
      .merch-pin__buy svg{width:19px;height:13px;transition:transform .3s var(--ease)}
      .merch-pin__buy:hover svg{transform:translateX(4px)}
      @media (max-width:860px){
        .merch-pin{height:auto}
        .merch-pin__stick{position:relative;top:0;height:auto;max-height:none;
          grid-template-columns:1fr;padding:0 var(--gut);gap:24px;margin:20px 0}
        .merch-pin__media{justify-self:center;max-width:420px;max-height:none}
        .merch-pin__media img{transform:none}
        .merch-pin__panel{justify-self:center;text-align:center;max-width:480px;opacity:1;transform:none}
      }
      @media (prefers-reduced-motion: reduce){
        .merch-pin{height:auto}
        .merch-pin__stick{position:relative;top:0;height:auto}
        .merch-pin__media img{transform:none !important}
        .merch-pin__panel{opacity:1 !important;transform:none !important}
      }
      .sdn__label span{font:500 11px/1 var(--utility);letter-spacing:.24em;text-transform:uppercase;color:rgba(16,22,26,.8)}

      /* --- Text & Object Zoom: display type scales up hugely and clears
             the frame, opening the view onto the next section --- */
      .tzoom{position:relative;height:110vh}
      .tzoom__stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
      .tzoom__word{font:700 clamp(52px,11vw,190px)/.86 var(--display);letter-spacing:-.05em;
        text-transform:uppercase;text-align:center;white-space:nowrap;
        transform:scale(calc(.72 + var(--p,0) * 4.4));
        opacity:calc(1 - clamp(0,calc((var(--p,0) - .55) * 2.6),1));
        background:linear-gradient(170deg,var(--frost) 0%,var(--ice-1) 52%,var(--ice-2) 100%);
        -webkit-background-clip:text;background-clip:text;color:transparent;
        will-change:transform,opacity}
      /* Winter Arc zoom now uses the brand mark (same SVG as the nav logo)
         instead of the wordmark text, scaling in on the same --p progress */
      .tzoom__logo{width:clamp(120px,22vw,260px);height:auto;color:var(--frost);
        transform:scale(calc(.6 + var(--p,0) * 2.6));
        opacity:calc(1 - clamp(0,calc((var(--p,0) - .55) * 2.6),1));
        filter:drop-shadow(0 0 40px rgba(198,233,247,.35));
        will-change:transform,opacity}
      .tzoom__logo svg{width:100%;height:100%;display:block;fill:currentColor}

      /* --- Variable-font weight driven by scroll progress --- */
      .vfont{font-variation-settings:"wght" calc(400 + var(--p,0) * 300);
        transition:font-variation-settings .1s linear}

      /* --- Glassmorphism panel --- */
      .glass{position:relative;border-radius:16px;
        background:linear-gradient(150deg,rgba(16,22,26,.09),rgba(16,22,26,.03));
        backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
        border:1px solid rgba(16,22,26,.14);
        box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14)}
      .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
        background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 42%);opacity:.7}

      /* --- Liquid distortion on hover (CSS-only turbulence displacement) --- */
      .liquid{position:relative;overflow:hidden;border-radius:14px;isolation:isolate}
      .liquid img{width:100%;height:100%;object-fit:cover;display:block;
        transition:filter .55s var(--ease),transform .7s var(--ease)}
      .liquid:hover img{transform:scale(1.06);filter:url(#liquidWarp)}
      /* Vorher/Nachher-style overlay wipe */
      .liquid__over{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
        background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(28,36,42,.72));
        backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
        clip-path:inset(0 0 0 100%);transition:clip-path .6s var(--rv-ease);
        font:500 11px/1 var(--utility);letter-spacing:.22em;text-transform:uppercase;color:var(--frost)}
      .liquid:hover .liquid__over{clip-path:inset(0 0 0 0%)}

      /* --- Bento grid with depth --- */
      .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,16px);
        grid-auto-rows:minmax(clamp(120px,15vh,180px),auto)}
      .bento__cell{position:relative;overflow:hidden;border-radius:14px;
        border:1px solid rgba(16,22,26,.08);background:rgba(16,22,26,.025);
        padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;justify-content:flex-end;
        transform:translateZ(0) translateY(calc(var(--depth,0) * var(--p,0) * -22px));
        transition:border-color .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
      .bento__cell:hover{border-color:rgba(198,233,247,.34);background:rgba(198,233,247,.05);
        box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 40px rgba(119,190,221,.1)}
      .bento__cell--w2{grid-column:span 2}
      .bento__cell--w2r2{grid-column:span 2;grid-row:span 2}
      .bento__cell--r2{grid-row:span 2}
      .bento__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
        transition:transform .8s var(--ease)}
      .bento__cell:hover img{transform:scale(1.07)}
      .bento__cell::after{content:"";position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.82) 100%)}
      .bento__k{font:500 10px/1 var(--utility);letter-spacing:.22em;text-transform:uppercase;
        color:var(--ice-2);margin-bottom:8px}
      .bento__t{font:600 clamp(17px,1.6vw,24px)/1.15 var(--display);letter-spacing:-.02em}
      @media (max-width:860px){
        .bento{grid-template-columns:repeat(2,1fr)}
        .bento__cell--w2,.bento__cell--w2r2{grid-column:span 2}
        .bento__cell--w2r2,.bento__cell--r2{grid-row:span 1}
      }

      @media (max-width:1024px){
        .itp{height:95vh}
        .tzoom{height:90vh}
        .itp__stick,.tzoom__stick{height:90vh}
        .itp__cap{bottom:clamp(40px,7vh,80px)}
      }
      @media (max-width:640px){
        .itp{height:85vh}
        .tzoom{height:78vh}
        .itp__stick,.tzoom__stick{height:85vh}
        .tzoom__logo{width:clamp(110px,42vw,200px)}
        .itp__cap{bottom:clamp(28px,6vh,60px)}
      }


      @media (prefers-reduced-motion: reduce){
        .itp,.sdn,.tzoom{height:auto}
        .itp__stick,.sdn__stick,.tzoom__stick{position:relative;height:auto;min-height:70vh}
        .itp__media,.sdn__frame img,.tzoom__word{transform:none !important}
        .itp__cap,.itp__out,.sdn__label{opacity:1 !important;transform:none !important}
        .itp__buy{opacity:1 !important;transform:none !important}
        .sdn__frame{width:min(76vw,1180px);height:min(62vh,660px);border-radius:18px}
        .tzoom__word{font-size:clamp(40px,8vw,110px)}
        .bento__cell{transform:none}
      }
      .lineup__nav{display:flex;gap:10px}
      .lineup__nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
        display:grid;place-items:center;
        transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
      .lineup__nav button:hover{background:rgba(198,233,247,.08);border-color:rgba(198,233,247,.44);
        transform:translateY(-1px);box-shadow:0 0 22px rgba(119,190,221,.18)}
      .lineup__nav button:disabled{opacity:.26;pointer-events:none}
      .lineup__all{display:inline-flex;align-items:center;gap:12px;
        font:500 11px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:rgba(16,22,26,.82);
        transition:color .25s var(--ease)}
      .lineup__all:hover{color:var(--frost)}
      .lineup__all svg{transition:transform .3s var(--ease)}
      .lineup__all:hover svg{transform:translateX(4px)}

      .manifesto{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden;
        padding:calc(var(--nav-h) + 40px) var(--gut) 90px;isolation:isolate}
      .manifesto__mark{position:absolute;top:50%;left:50%;z-index:-1;width:min(62vw,860px);
        transform:translate(-50%,-50%);color:rgba(16,22,26,.028);will-change:transform}
      .manifesto__mark svg{width:100%;height:auto;display:block}
      .manifesto p{max-width:24ch;margin:0;text-align:center;
        font:400 clamp(26px,3.6vw,54px)/1.28 var(--display);letter-spacing:-.018em}
      .manifesto p + p{margin-top:1.1em}
      .manifesto .dim{color:var(--mist)}

      .vault{min-height:92vh;min-height:92svh;display:grid;place-items:center;padding:120px var(--gut)}
      .vault__in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:34px}
      .vault__mark{width:64px;color:var(--frost)}
      .vault h2{margin:0;font:400 clamp(32px,4.6vw,72px)/1.02 var(--display);
        letter-spacing:-.028em;color:rgba(16,22,26,.92)}

      /* Archive finale: a scroll-controlled mosaic that opens from its centre. */
      .archive-zoom{height:260vh;height:260svh;position:relative;background:var(--ink);overflow:clip}
      .archive-zoom__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
      .archive-zoom__grid{--archive-width:min(88vw,1280px);--archive-label:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,.9vw,14px);
        width:var(--archive-width);aspect-ratio:1.42;transform:none;transform-origin:center;
        will-change:width}
      .archive-zoom__tile{position:relative;overflow:hidden;background:var(--slate);min-height:0}
      .archive-zoom__tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(16,22,26,.12);pointer-events:none}
      .archive-zoom__tile img{display:block;width:100%;height:100%;object-fit:cover;filter:none;transform:none;backface-visibility:visible}
      .archive-zoom__tile:nth-child(1) img{object-position:12% 25%}.archive-zoom__tile:nth-child(2) img{object-position:38% 28%}
      .archive-zoom__tile:nth-child(3) img{object-position:85% 27%}.archive-zoom__tile:nth-child(4) img{object-position:18% 58%}
      .archive-zoom__tile:nth-child(5) img{object-position:50% 46%}
      .archive-zoom__tile:nth-child(6) img{object-position:82% 58%}.archive-zoom__tile:nth-child(7) img{object-position:18% 88%}
      .archive-zoom__tile:nth-child(8) img{object-position:50% 88%}.archive-zoom__tile:nth-child(9) img{object-position:84% 88%}
      .archive-zoom__tile--focus::after{border-color:rgba(198,233,247,.58);box-shadow:inset 0 0 30px rgba(198,233,247,.14)}
      .archive-zoom__label{position:absolute;z-index:1;left:var(--gut);bottom:clamp(28px,5vh,58px);margin:0;
        font:500 10px/1.5 var(--utility);letter-spacing:.18em;text-transform:uppercase;color:rgba(16,22,26,.7);
        opacity:var(--archive-label);transition:opacity .2s linear}
      .notice{border:1px solid rgba(198,233,247,.3);padding:clamp(24px,3vw,42px);margin:0 0 clamp(42px,6vw,82px);background:rgba(13,27,35,.48)}
      .notice__kicker,.journey__meta{margin:0 0 12px;font:600 10px/1.3 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:#3E8FB4}
      .notice h2{margin:0 0 14px;font:600 clamp(28px,4vw,58px)/.95 var(--display);letter-spacing:-.035em;text-transform:uppercase}.notice p{margin:0;max-width:65ch;color:rgba(16,22,26,.76);line-height:1.65}
      .journeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
      .journey{background:rgba(16,22,26,.035);border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease)}
      .journey:hover{transform:translateY(-6px);border-color:rgba(198,233,247,.48)}
      .journey img{display:block;width:100%;aspect-ratio:1.35;object-fit:cover;filter:contrast(1.04) saturate(.86)}
      .journey__body{padding:18px 18px 20px}
      .journey__meta{display:block}
      .journey h3{margin:0 0 11px;font:600 clamp(19px,2.1vw,30px)/.95 var(--display);letter-spacing:-.025em}
      .journey p{margin:0;color:rgba(16,22,26,.65);font-size:13px;line-height:1.55}
      @media(max-width:820px){.journeys{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.journeys{grid-template-columns:1fr}}
      /* Immersive video variant — no card chrome */
      .journeys--video{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.6vw,56px)}
      @media(max-width:720px){.journeys--video{grid-template-columns:1fr;gap:36px}}
      .journey--video{background:transparent;border:0;overflow:visible;transition:transform .5s var(--ease)}
      .journey--video:hover{transform:none;border-color:transparent}
      .journey--video:hover .journey__frame::after{opacity:1}
      .journey--video:hover .journey__frame{box-shadow:0 30px 80px -30px rgba(198,233,247,.35),0 0 0 1px rgba(198,233,247,.22)}
      .journey__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;box-shadow:0 20px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(16,22,26,.06);transition:box-shadow .5s var(--ease)}
      .journey__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
      .journey__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.55) 100%);opacity:.6;transition:opacity .5s var(--ease);mix-blend-mode:multiply}
      .journey--video .journey__body{padding:20px 2px 0;background:transparent}
      .journey--video .journey__meta{color:#3E8FB4;opacity:.85}
      .journey--video h3{margin:0;font:400 clamp(18px,1.9vw,26px)/1.15 var(--display);letter-spacing:-.02em;color:var(--frost)}


      .gal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
      .gal__head h2{margin:8px 0 0;font:600 clamp(28px,3.4vw,48px)/1 var(--display);letter-spacing:-.028em}
      .gal__ctrl{display:flex;gap:10px}
      .gal__ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
        display:grid;place-items:center;
        transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
      .gal__ctrl button:hover{background:rgba(198,233,247,.08);border-color:rgba(198,233,247,.44);
        transform:translateY(-1px);box-shadow:0 0 22px rgba(119,190,221,.18)}
      .gal__ctrl button:disabled{opacity:.26;pointer-events:none}
      .rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
        scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding-bottom:6px}
      .rail::-webkit-scrollbar{display:none}
      .rail.dragging{cursor:grabbing;scroll-snap-type:none}
      .rail > figure{flex:0 0 clamp(268px,32vw,460px);margin:0;scroll-snap-align:start}
      .rail .ph{aspect-ratio:16/10;border-radius:10px;
        transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
      .rail.dragging .ph{transform:scale(1.03)}
      .rail > figure:hover .ph{transform:translateY(-4px) scale(1.008);
        box-shadow:0 26px 64px rgba(0,0,0,.55),0 0 0 1px rgba(198,233,247,.14)}
      .rail figcaption{margin-top:12px;font:500 10px/1 var(--utility);letter-spacing:.18em;
        text-transform:uppercase;color:var(--mist)}
      .progress{margin-top:26px;height:1px;background:var(--line);position:relative;overflow:hidden}
      .progress i{position:absolute;inset:0 auto 0 0;background:var(--ice-2);width:20%;
        transition:width .2s linear,transform .2s linear}

      .split{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
      .split::before,.split::after{content:"";position:absolute;left:0;right:0;z-index:3;pointer-events:none}
      .split::before{top:0;height:min(140px,16vh);background:linear-gradient(180deg,var(--ink),rgba(255,255,255,0))}
      .split::after{bottom:0;height:min(160px,18vh);background:linear-gradient(0deg,var(--ink),rgba(255,255,255,0))}
      .split__cell{position:relative;min-height:min(88vh,860px);min-height:min(88svh,860px);display:flex;align-items:flex-end;
        overflow:hidden;isolation:isolate}
      .split__bg{position:absolute;inset:-8% 0;z-index:-2;will-change:transform,opacity}
      .split__bg .ph{width:100%;height:100%}
      .split__scrim{position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg,rgba(190,208,217,.10) 0%,transparent 34%,rgba(255,255,255,.82) 100%)}
      /* soften the hard vertical seam between the two split panels */
      .split__cell:first-child::after{content:"";position:absolute;inset:0 0 0 auto;width:min(90px,7vw);
        z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6))}
      .split__cell:last-child::before{content:"";position:absolute;inset:0 auto 0 0;width:min(90px,7vw);
        z-index:2;pointer-events:none;background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.6))}
      .split__txt{padding:clamp(28px,4vw,56px);max-width:640px}
      .tag{display:inline-block;font:500 10px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;
        background:rgba(16,22,26,.13);padding:7px 11px;border-radius:4px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
      .split__txt h2{margin:18px 0 14px;font:600 clamp(30px,3.6vw,58px)/1 var(--display);letter-spacing:-.03em}
      .split__txt p{margin:0 0 26px;max-width:52ch;font-size:clamp(14px,1.05vw,16px);line-height:1.62;
        color:rgba(16,22,26,.76)}

      .ftr__news-lede{margin:0 0 22px;font-size:clamp(14px,1.05vw,18px);line-height:1.6;color:rgba(16,22,26,.6);max-width:42ch}
      .ftr__news-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);
        transition:border-color .3s var(--ease)}
      .ftr__news-row:focus-within{border-bottom-color:rgba(198,233,247,.6)}
      .ftr__news-row input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--frost);
        padding:16px 0;font:500 14px/1 var(--utility);letter-spacing:.06em}
      .ftr__news-row input::placeholder{color:rgba(16,22,26,.32);text-transform:uppercase;letter-spacing:.14em}
      .ftr__news-row button{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;
        color:rgba(16,22,26,.74);transition:color .25s var(--ease),transform .25s var(--ease)}
      .ftr__news-row button:hover{color:#3E8FB4;transform:translateX(3px)}
      .ftr__news-msg{margin:14px 0 0;font:500 11px/1.4 var(--utility);letter-spacing:.14em;text-transform:uppercase;
        color:var(--ice-2);min-height:12px}
      .ftr__socials ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
      .ftr__socials a{display:inline-flex;font:500 11px/1 var(--utility);letter-spacing:.14em;
        text-transform:uppercase;color:rgba(16,22,26,.74);background:rgba(16,22,26,.07);
        padding:12px 16px;border-radius:999px;
        transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
      .ftr__socials a:hover{background:rgba(198,233,247,.16);color:#3E8FB4;transform:translateY(-1px)}

      /* ===== Creator-Pool application form ===== */
      .form{max-width:760px}
      .form__intro{max-width:56ch;margin:0 0 clamp(40px,5vw,64px);font-size:15px;line-height:1.65;color:var(--mist)}
      .form__grid{display:grid;gap:clamp(28px,3vw,36px)}
      .form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
      .field{display:grid;gap:10px;position:relative}
      /* Animierter Fokus-Unterstrich, wächst von der Mitte aus über die volle Breite */
      .field::after{
        content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:0 0 8px 8px;
        background:linear-gradient(90deg,var(--ice-1),var(--ice-2));
        transform:scaleX(0);transform-origin:center;pointer-events:none;
        transition:transform .5s var(--rv-ease);
      }
      .field:focus-within::after{transform:scaleX(1)}
      @media (prefers-reduced-motion:reduce){
        .field::after{transition:none}
      }
      .field label{font:500 10px/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
      .field label b{color:var(--ice-2);font-weight:500;margin-left:.3em}
      .field input,.field select,.field textarea{width:100%;background:rgba(16,22,26,.02);border:1px solid var(--line);border-radius:8px;
        padding:15px 16px;color:var(--frost);font:500 14px/1.3 var(--utility);letter-spacing:.01em;
        transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
      .field textarea{font-family:inherit;resize:vertical;min-height:110px}
      .field select{cursor:pointer}
      .field select option{background:var(--slate);color:var(--frost)}
      .chk__hint{font:400 12px/1.5 var(--utility);color:var(--mist);margin:-2px 0 2px;max-width:60ch}
      .chk{display:flex;flex-direction:column;gap:5px}
      .chk__item{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px 10px;border:1px solid var(--line);
        border-radius:10px;background:rgba(16,22,26,.02);transition:border-color .25s ease,background .25s ease}
      .chk__item:hover{border-color:rgba(16,22,26,.28);background:rgba(16,22,26,.06)}
      .chk__item input{appearance:none;width:18px;height:18px;flex:0 0 18px;border:1px solid var(--line);border-radius:4px;
        background:transparent;cursor:pointer;transition:background .2s ease,border-color .2s ease;position:relative;display:grid;place-items:center}
      .chk__item input::after{content:"";width:8px;height:4px;border-left:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;
        transform:rotate(-45deg) translate(-1px,-1px);opacity:0;transition:opacity .15s ease}
      .chk__item input:checked{background:var(--ice-2);border-color:var(--ice-2)}
      .chk__item input:checked::after{opacity:1}
      .chk__item span{font:400 13px/1.3 var(--utility);color:var(--frost);letter-spacing:.02em}
      .chk__item:has(input:checked){border-color:rgba(16,22,26,.35);background:rgba(16,22,26,.08)}
      .chk__proxy{position:absolute;opacity:0;pointer-events:none;height:1px;width:1px;padding:0;border:0;margin:0}
      .avail-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
      .avail-phases.is-invalid .avail-phase__box{border-color:rgba(255,154,154,.8)}
      .avail-phases.is-invalid .avail-phase__title{color:#ff9a9a}
      .avail-phase{position:relative;display:block;cursor:pointer}
      .avail-phase input{position:absolute;inset:0;opacity:0;z-index:1;width:100%;height:100%;margin:0;cursor:pointer}
      .avail-phase__box{display:flex;flex-direction:column;gap:3px;padding:14px 12px;border:1px solid var(--line);border-radius:12px;
        background:rgba(16,22,26,.03);transition:border-color .2s ease,background .2s ease}
      .avail-phase:hover .avail-phase__box{border-color:rgba(16,22,26,.28);background:rgba(16,22,26,.06)}
      .avail-phase input:checked + .avail-phase__box{border-color:var(--ice-2);background:rgba(198,233,247,.12)}
      .avail-phase input:focus-visible + .avail-phase__box{outline:2px solid var(--ice-1);outline-offset:2px}
      .avail-phase__box::before{content:"";position:absolute;top:10px;right:10px;width:16px;height:16px;border:1px solid var(--line);
        border-radius:50%;background:transparent;transition:background .2s ease,border-color .2s ease}
      .avail-phase input:checked + .avail-phase__box::before{background:var(--ice-2);border-color:var(--ice-2)}
      .avail-phase__box::after{content:"";position:absolute;top:14px;right:14px;width:5px;height:3px;border-left:2px solid #FFFFFF;
        border-bottom:2px solid #FFFFFF;transform:rotate(-45deg);opacity:0;transition:opacity .15s ease}
      .avail-phase input:checked + .avail-phase__box::after{opacity:1}
      .avail-phase__title{font:600 13px/1.2 var(--display);color:var(--frost);letter-spacing:.02em}
      .avail-phase__date{font:400 11px/1.2 var(--utility);color:var(--mist);letter-spacing:.04em}
      .field input::placeholder,.field textarea::placeholder{color:rgba(16,22,26,.28)}
      .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:rgba(198,233,247,.55);background:rgba(198,233,247,.04);
        box-shadow:0 0 0 3px rgba(119,190,221,.1)}
      .field input:invalid:not(:placeholder-shown){border-color:rgba(233,160,160,.5)}
      .field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid,
      .field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
        border-color:#E9A0A0;background:rgba(233,160,160,.06);box-shadow:0 0 0 3px rgba(233,160,160,.12)}
      .field__error{display:block;margin-top:6px;font:500 11px/1.4 var(--utility);color:#E9A0A0}

      .section-title{margin:0;text-align:center;font:600 clamp(38px,6vw,84px)/.95 var(--display);
        letter-spacing:-.03em;text-transform:uppercase;color:var(--frost)}
      .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
      .info-card{border:1px solid var(--line);border-radius:10px;padding:clamp(22px,2vw,30px);
        background:rgba(16,22,26,.02);display:grid;gap:14px;align-content:start;
        transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease)}
      .info-card:hover{border-color:rgba(198,233,247,.34);transform:translateY(-4px);background:rgba(198,233,247,.03)}
      .info-card svg{width:22px;height:22px;stroke:var(--ice-2);color:var(--ice-2)}
      /* Icon-Draw-in: gleiches stroke-dashoffset-Pattern wie .arc, nur pro Karte gestaffelt */
      .info-card svg path,.info-card svg circle{
        stroke-dasharray:220;stroke-dashoffset:220;
        transition:stroke-dashoffset 1.1s var(--rv-ease);
      }
      .info-grid.in .info-card:nth-child(1) svg path,.info-grid.in .info-card:nth-child(1) svg circle{stroke-dashoffset:0;transition-delay:.05s}
      .info-grid.in .info-card:nth-child(2) svg path,.info-grid.in .info-card:nth-child(2) svg circle{stroke-dashoffset:0;transition-delay:.18s}
      .info-grid.in .info-card:nth-child(3) svg path,.info-grid.in .info-card:nth-child(3) svg circle{stroke-dashoffset:0;transition-delay:.31s}
      @media (prefers-reduced-motion:reduce){
        .info-card svg path,.info-card svg circle{stroke-dashoffset:0;transition:none}
      }
      .info-card h3{margin:0;font:600 15px/1.3 var(--utility);letter-spacing:.04em;text-transform:uppercase}
      .info-card p{margin:0;font-size:14px;line-height:1.62;color:var(--mist)}
      @media (max-width:820px){.info-grid{grid-template-columns:1fr}}

      .form__panel{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.6vw,34px);
        background:rgba(16,22,26,.018);display:grid;gap:22px;
        transition:border-color .4s var(--ease),background .4s var(--ease)}
      .form__panel:focus-within{border-color:rgba(198,233,247,.32);background:rgba(198,233,247,.025)}
      .form__panel-head{display:flex;align-items:center;gap:12px}
      .form__panel-icon{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
        display:grid;place-items:center;color:var(--ice-2);flex:0 0 auto}
      .form__panel-head h3{margin:0;font:600 16px/1 var(--display);letter-spacing:-.01em}
      .form__panel .form__row{grid-template-columns:1.4fr 1fr}

      .form__submit{margin-top:clamp(12px,2vw,20px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
      .btn--dark{background:#FFFFFF;color:var(--frost);border:1px solid rgba(16,22,26,.16);
        font-weight:700;letter-spacing:.16em;padding:21px 44px}
      .btn--dark:hover{background:#E4EAEE;border-color:rgba(16,22,26,.3);
        box-shadow:0 14px 40px rgba(0,0,0,.5)}
      .form__fineprint{margin:0;font:500 10px/1.6 var(--utility);letter-spacing:.08em;color:rgba(16,22,26,.38);
        max-width:56ch}

      /* ===== Brand Integration ===== */
      .brand-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:center;
        border:1px solid var(--line);border-radius:16px;padding:clamp(28px,4vw,56px);
        background:rgba(16,22,26,.018);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
        transition:border-color .4s var(--ease),background .4s var(--ease)}
      .brand-card:hover{border-color:rgba(16,22,26,.24);background:rgba(16,22,26,.03)}
      .brand-card__title{margin:16px 0 12px;font:600 clamp(28px,3vw,46px)/1 var(--display);letter-spacing:-.02em;color:var(--frost)}
      .brand-card__copy{margin:0;max-width:54ch;font-size:clamp(14px,1.05vw,16px);line-height:1.62;color:rgba(16,22,26,.76)}
      .brand-card__contact{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
      .brand-card__email{display:inline-flex;align-items:center;gap:12px;font:500 clamp(18px,1.6vw,24px)/1 var(--display);letter-spacing:-.01em;color:#3E8FB4;text-decoration:none;transition:color .3s var(--ease)}
      .brand-card__email:hover{color:var(--frost)}
      .brand-card__email svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.4;fill:none;flex:0 0 auto}
      .brand-card__cta{font:500 10px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:rgba(16,22,26,.5)}
      @media (max-width:760px){.brand-card{grid-template-columns:1fr;text-align:center}.brand-card__contact{align-items:center;text-align:center}}

      /* ===== Brand Gallery ===== */
      .brand-gallery{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
      .brand-gallery__item{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);aspect-ratio:3/4;
        background:rgba(16,22,26,.02);transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
      .brand-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;
        transition:transform 1.2s var(--ease),filter .6s var(--ease);filter:saturate(1.02) contrast(1.02)}
      .brand-gallery__item::after{content:"";position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.55) 100%);
        transition:opacity .5s var(--ease);opacity:.9}
      .brand-gallery__item:hover{border-color:rgba(198,233,247,.32);box-shadow:0 24px 60px rgba(0,0,0,.45)}
      .brand-gallery__item:hover img{transform:scale(1.045)}
      .brand-gallery__cap{position:absolute;left:14px;bottom:12px;z-index:2;
        font:500 10px/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;color:rgba(16,22,26,.86)}
      @media (max-width:760px){.brand-gallery{grid-template-columns:1fr;gap:14px}.brand-gallery__item{aspect-ratio:4/5}}

      .vsnz-toast{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;align-items:center;gap:12px;
        min-width:280px;max-width:calc(100vw - 48px);padding:14px 18px;
        background:rgba(12,16,20,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
        border:1px solid rgba(16,22,26,.14);border-radius:6px;
        font:500 12px/1.4 var(--utility);letter-spacing:.08em;text-transform:uppercase;color:var(--frost);
        box-shadow:0 20px 60px rgba(0,0,0,.55);
        opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease);
        pointer-events:none}
      .vsnz-toast.in{opacity:1;transform:none;pointer-events:auto}
      .vsnz-toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ice-2);flex:0 0 auto;
        box-shadow:0 0 12px var(--ice-2)}
      .vsnz-toast--error::before{background:#ff9a9a;box-shadow:0 0 12px #ff9a9a}
      @media (max-width:640px){.vsnz-toast{left:16px;right:16px;bottom:16px;min-width:0}}


      @media (max-width:700px){
        .form__row,.form__panel .form__row{grid-template-columns:1fr}
      }
      .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
      .card{display:grid;gap:14px;transition:opacity .45s var(--ease),filter .45s var(--ease),transform .5s var(--ease)}
      .card .ph{aspect-ratio:4/5;border-radius:10px;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
      .card:hover .ph{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(198,233,247,.14)}
      .card__meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
      #page-merch .card__meta{padding-top:20px}
      .card__meta h3{margin:0;font:600 17px/1.2 var(--display);letter-spacing:-.01em}
      .card__meta span{font:500 10px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

      /* Merch: image frame + mid-scroll "Buy Now" overlay CTA.
         The overlay reveals itself (via the shared .rv scroll-reveal system) as the
         product image travels into view, sitting on top of the artwork so a purchase
         is one tap away without leaving the scroll flow — the card underneath and the
         page itself keep scrolling normally before, during and after the interaction. */
      .card__frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;
        transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
      .card:hover .card__frame{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(198,233,247,.14)}
      .card__frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
        background:linear-gradient(180deg,transparent 45%,rgba(255,255,255,.72) 100%);
        opacity:.7;transition:opacity .4s var(--ease)}
      .card:hover .card__frame::after{opacity:.85}
      .buy-now{position:absolute;z-index:2;left:50%;bottom:22px;transform:translate(-50%,14px);
        display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
        background:linear-gradient(160deg,var(--ice-1),var(--ice-2));color:#0A1116;
        font:600 11px/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;
        box-shadow:0 10px 30px rgba(119,190,221,.28);white-space:nowrap;
        opacity:0;transition:opacity .6s var(--rv-ease),transform .6s var(--rv-ease),box-shadow .3s var(--ease)}
      .buy-now.in{opacity:1;transform:translate(-50%,0)}
      .buy-now:hover{box-shadow:0 14px 40px rgba(119,190,221,.46)}
      .buy-now svg{transition:transform .3s var(--ease)}
      .buy-now:hover svg{transform:translateX(3px)}
      @media (max-width:700px){
        .buy-now{padding:12px 22px;bottom:16px}
      }

      .marquee{overflow:hidden;white-space:nowrap;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)}
      .marquee__track{display:inline-flex;gap:6vw;padding-right:6vw;animation:slide 28s linear infinite;will-change:transform}
      .marquee span{font:600 clamp(52px,10vw,160px)/1 var(--display);letter-spacing:-.04em;
        color:var(--frost)}
      .studio-hero .marquee span{color:rgba(255,255,255,.92)}
      @keyframes slide{to{transform:translateX(-50%)}}
      .studio-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-content:center;gap:40px;
        padding:calc(var(--nav-h) + 60px) 0 120px}
      /* the figure needs to read clean & sculptural — no light wash haze over it */
      .studio-hero .frost__wash{display:none}
      .studio-hero .frost__vig{display:none}
      /* Keep the Studio hero on a simple Chrome-safe compositing stack. Negative
         z-indices, blend modes and animated filters could be rasterized as an
         opaque dark layer in Chromium. */
      .studio-hero .frost__bg{perspective:none;z-index:0}
      .studio-hero .frost__bg .ph--img{position:relative;isolation:auto}
      .studio-hero .frost__bg .ph--img img{
        filter:none;
        transform:scale(calc(1.035 * var(--zoom,1)));transform-origin:50% 32%;
        transition:none}
      /* subtle diagonal sheen for a metallic, three-dimensional feel, plus a
         continuous holographic scan sweeping across the chrome */
      .studio-hero .frost__bg .ph--img::after{display:none;content:none}
      @keyframes silverScan{
        0%,100%{background-position:0 0,-40% -60%}
        50%{background-position:0 0,140% 60%}
      }
      #page-studio.is-active .studio-hero .frost__bg .ph--img{animation:silverFloat 7s ease-in-out infinite}
      @keyframes silverFloat{
        0%,100%{transform:translateY(0)}
        50%{transform:translateY(-14px)}
      }
      @media (prefers-reduced-motion:reduce){
        .studio-hero .frost__bg .ph--img::after,
        #page-studio.is-active .studio-hero .frost__bg .ph--img{animation:none}
      }
      /* the statue "wakes up": a chrome energy sweep + halo that intensifies as the
         figure is scrolled past, unique to the studio silver figure */
      .studio-hero .frost__bg .ph--img::before{display:none;content:none}
      .studio-hero__obj{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotateY(calc(var(--p,0) * -11deg));z-index:2;
        width:clamp(180px,17vw,300px);aspect-ratio:2/3;will-change:transform;
        filter:drop-shadow(0 0 calc(var(--p,0) * 26px) rgba(198,233,247,calc(var(--p,0) * .55)))}
      .studio-hero__obj .ph{width:100%;height:100%;border-radius:6px}
      @keyframes studioMaterialize{0%{opacity:0;transform:translateY(-4%) scale(.98)}
        100%{opacity:1;transform:scale(1.035)}}
      #page-studio.is-active .studio-hero .frost__bg .ph--img img{animation:studioMaterialize 1.85s .08s var(--rv-ease) both}
      #page-studio.is-active .marquee{animation:studioMarqueeIn 1s .18s var(--rv-ease) both}
      @keyframes studioMarqueeIn{from{opacity:0;transform:translateY(34px);letter-spacing:.08em}to{opacity:1;transform:none;letter-spacing:normal}}
      .studio-hero__lede{position:relative;z-index:3;text-align:center;padding:0 var(--gut);
        margin-top:clamp(260px,36vw,520px)}
      .studio-hero__lede h1,.studio-hero__lede h2{margin:0 0 18px;font:600 clamp(34px,5vw,76px)/1 var(--display);letter-spacing:-.035em;
        color:#fff;-webkit-text-fill-color:#fff}
      .studio-hero__lede p{margin:0 auto;max-width:70ch;font-size:clamp(14px,1.05vw,16px);line-height:1.62;
        color:rgba(255,255,255,.88)}
      .studio-nav{position:relative;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;
        padding:0 var(--gut);font:500 10px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase}
      .studio-nav a,.studio-nav button{color:rgba(255,255,255,.78);transition:color .25s var(--ease);
        font:inherit;letter-spacing:inherit;text-transform:inherit}
      .studio-nav a:hover,.studio-nav a:focus-visible,
      .studio-nav button:hover,.studio-nav button:focus-visible{color:#C6E9F7}
      .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,56px)}
      .svc{border:0;border-top:1px solid var(--line);border-radius:0;padding:clamp(22px,2vw,30px) 0 0;
        display:grid;align-content:start;gap:18px;background:none;
        transition:border-color .45s var(--ease);overflow:visible}
      .svc:hover{border-top-color:rgba(198,233,247,.5)}
      .svc h3{margin:0;font:600 clamp(24px,2.2vw,36px)/1 var(--display);letter-spacing:-.028em}
      .svc p{margin:0;font-size:14.5px;line-height:1.66;color:rgba(16,22,26,.72)}
      .svc .btn{justify-self:start;margin-top:8px}
      .living{display:grid;gap:clamp(40px,5vw,70px);justify-items:center;text-align:center}
      .living h2{margin:0;max-width:16ch;font:600 clamp(34px,5vw,80px)/1.02 var(--display);letter-spacing:-.035em}
      .living__media{overflow:visible;width:100%;max-width:1000px}
      .living__media .ph{aspect-ratio:16/9;border-radius:12px}
      .stats{overflow:visible;padding:clamp(80px,10vh,140px) 0}
      .stats__in{position:relative;z-index:2}
      .stats h2{margin:0 0 clamp(40px,5vw,72px);font:600 clamp(30px,3.6vw,58px)/1.02 var(--display);
        letter-spacing:-.032em;max-width:12ch}
      .stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,56px)}
      .stat{overflow:visible;border:0;border-top:1px solid var(--line);border-radius:0;padding:clamp(22px,2vw,30px) 0 0;
        background:none;display:grid;gap:16px;align-content:start;
        transition:border-color .4s var(--ease)}
      .stat:hover{border-top-color:rgba(198,233,247,.5)}
      .stat b{font:600 clamp(40px,4.6vw,74px)/1 var(--display);letter-spacing:-.04em}
      .stat .tag{background:none;color:var(--ice-2);justify-self:start;padding:0}
      .stat p{margin:0;font-size:14px;line-height:1.62;color:rgba(16,22,26,.72)}
      .projs__head{margin-bottom:clamp(36px,4vw,60px)}
      .projs__head h2{margin:0 0 14px;font:600 clamp(34px,5vw,78px)/1 var(--display);letter-spacing:-.035em}
      .projs__head p{margin:0;font-size:16px;color:var(--mist)}
      .proj{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;
        display:flex;align-items:flex-end;isolation:isolate;
        transition:opacity .45s var(--ease),filter .45s var(--ease),transform .5s var(--ease)}
      .proj .ph{position:absolute;inset:0;z-index:-2;transition:transform .7s var(--ease)}
      .proj::after{content:"";position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg,transparent 42%,rgba(255,255,255,.88))}
      .proj:hover .ph{transform:scale(1.04)}
      .proj{--tilt-x:0deg;--tilt-y:0deg}
      /* context-aware focus: dim & soften every other project card while one is hovered */
      .grid3.is-focusing .proj:not(.is-focused){opacity:.4;filter:blur(2px)}
      .grid3.is-focusing .proj.is-focused{
        transform:perspective(1600px) translateY(-5px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
        transition:transform .28s cubic-bezier(.22,1,.36,1);z-index:3;
        box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(198,233,247,.14)}
      .card{--tilt-x:0deg;--tilt-y:0deg}
      .grid3.is-focusing .card:not(.is-focused){opacity:.4;filter:blur(2px)}
      .grid3.is-focusing .card.is-focused{
        transform:perspective(1600px) translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
        transition:transform .28s cubic-bezier(.22,1,.36,1);z-index:3}
      .proj__body{padding:clamp(20px,2vw,32px);display:flex;justify-content:space-between;
        align-items:flex-end;gap:16px;width:100%}
      .proj__body h3{margin:0;font:600 clamp(20px,1.8vw,30px)/1.08 var(--display);letter-spacing:-.024em}
      .proj__pills{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

      /* Featured project: pulled into the foreground, full-width, heavy display type */
      .projs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,32px)}
      .proj--feature{grid-column:1 / -1;aspect-ratio:21/9}
      .proj--feature .proj__body h3{display:none}
      .proj__over{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
        align-items:center;justify-content:center;text-align:center;gap:10px;pointer-events:none;
        padding:0 var(--gut)}
      .proj__over h2{margin:0;font:600 clamp(40px,7vw,120px)/.92 var(--display);letter-spacing:-.035em;
        color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.5)}
      .proj__over-cap{margin:0;font:500 clamp(11px,1vw,13px)/1.4 var(--utility);letter-spacing:.14em;
        text-transform:uppercase;color:rgba(16,22,26,.72)}
      @media (max-width:820px){
        .proj--feature{aspect-ratio:4/5}
      }

      /* Extreme dramatic scroll-zoom on every project card's image */
      .proj[data-scroll-progress] .ph{
        transform:scale(calc(1.05 + var(--p,0) * 1.1)) !important;
        transition:none}
      .proj[data-scroll-progress]:hover .ph{transform:scale(calc(1.05 + var(--p,0) * 1.1)) !important}
      .proj[data-scroll-progress]::after{
        background:linear-gradient(180deg,transparent calc(30% - var(--p,0) * 10%),rgba(255,255,255,calc(.88 + var(--p,0) * .1)))}
      @media (prefers-reduced-motion:reduce){
        .proj[data-scroll-progress] .ph{transform:none !important}
      }
      .projs__foot{margin-top:clamp(40px,4.4vw,68px);display:flex;align-items:center;
        justify-content:space-between;gap:24px;flex-wrap:wrap}
      .projs__foot h2{margin:0;font:600 clamp(30px,4.4vw,68px)/1 var(--display);letter-spacing:-.035em}

      /* ===== Projects page: individual show sections ===== */
      .studio-nav{flex-wrap:wrap;row-gap:8px}
      .show{border-top:1px solid var(--line)}
      .show:first-of-type{border-top:0}
      .show__head{margin-bottom:clamp(24px,2.6vw,40px);display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
      .show__head .tag{background:none;color:var(--ice-2);padding:0}
      .show__head h2{margin:0;font:600 clamp(28px,4.2vw,60px)/1 var(--display);letter-spacing:-.033em}
      .show__cover{margin-bottom:clamp(24px,2.6vw,40px)}
      .show__cover .ph{aspect-ratio:16/9;border-radius:12px}
      .show__copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px);margin-bottom:clamp(28px,3vw,48px)}
      .show__copy h3{margin:0 0 10px;font:600 12px/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-2)}
      .show__copy p{margin:0;font-size:14.5px;line-height:1.7;color:rgba(16,22,26,.72);white-space:pre-line}
      .show__gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
      .show__gallery figure{margin:0}
      .show__gallery .ph{aspect-ratio:3/4;border-radius:8px}
      .show__gallery .ph:hover img{transform:scale(1.04)}

      .ftr{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
      .ftr::before{content:"";position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none;
        height:min(220px,22vh);background:linear-gradient(180deg,var(--ink),rgba(255,255,255,0))}
      .ftr__bg{position:absolute;inset:-10% 0 auto;height:70%;z-index:-2;will-change:transform,opacity}
      .ftr__bg .ph{width:100%;height:100%}
      .ftr__bg .ph::after{display:none}
      .ftr__scrim{position:absolute;inset:0;z-index:-1;
        background:linear-gradient(180deg,var(--ink) 0%,rgba(255,255,255,.72) 22%,var(--ink) 74%)}
      .ftr__hero{padding:clamp(90px,14vh,180px) var(--gut) clamp(60px,8vh,110px);text-align:center}
      .ftr__hero h2{margin:0 auto;max-width:14ch;font:400 clamp(34px,5.4vw,86px)/1.02 var(--display);
        letter-spacing:-.032em;color:#fff}
      .ftr__cols{display:grid;grid-template-columns:minmax(220px,auto) minmax(320px,1.6fr);gap:clamp(40px,6vw,100px);
        padding:0 var(--gut) clamp(56px,7vh,90px);max-width:1100px;margin:0 auto;align-items:start}
      .ftr__cols h3{margin:0 0 22px;font:600 clamp(26px,2.6vw,44px)/1 var(--display);letter-spacing:-.03em}
      .ftr__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;justify-items:start}
      .ftr__cols a,.ftr__cols button{display:inline-block;font:500 11px/1 var(--utility);letter-spacing:.14em;
        text-transform:uppercase;color:rgba(16,22,26,.74);background:rgba(16,22,26,.07);
        padding:10px 14px;border-radius:5px;
        transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
      .ftr__cols a:hover,.ftr__cols button:hover{background:rgba(198,233,247,.16);color:#3E8FB4;transform:translateY(-1px)}
      .ftr__base{border-top:1px solid var(--line);padding:26px var(--gut) calc(26px + var(--safe-b));display:flex;
        justify-content:center;gap:16px;flex-wrap:wrap;font:400 11px/1 var(--utility);
        letter-spacing:.12em;text-transform:uppercase;color:rgba(16,22,26,.4);text-align:center}

      /* ===== ULTRAWIDE / CURVED MONITORS ===== */
      @media (min-width:1560px){
        /* stop "WINTER ARC · '27" from tearing apart on wide/curved screens —
           cap the wordmark's own box and let it sit centered instead of edge-to-edge */
        .wordmark{width:min(104%,1720px);margin-left:0;margin-inline:auto}
      }
      @media (min-width:1800px){
        .wrap{max-width:1680px}
        .mast__in{max-width:1680px}
        body{font-size:17px}
        /* a fully edge-to-edge 100svh hero starts to feel like a blank slab on
           curved/ultrawide panels — keep it generous but proportion-checked */
        .hero{min-height:min(100vh,940px);min-height:min(100svh,940px)}
      }
      @media (min-width:2400px){
        /* keep content from stretching edge-to-edge on 21:9 / 32:9 curved panels */
        .wrap{max-width:1880px}
        .mast__in{max-width:1880px}
        .hero__body{max-width:820px}
        .ftr__hero h2,.manifesto p{max-width:20ch}
        .wordmark{max-width:1900px}
        .hero{min-height:min(100vh,880px);min-height:min(100svh,880px)}
      }

      /* ===== LAPTOP / SMALL DESKTOP ===== */
      @media (max-width:1200px){
        .svcs,.stats__grid{gap:clamp(24px,3vw,40px)}
      }

      /* ===== TABLET / iPAD ===== */
      @media (max-width:1024px){
        .burger{display:block}
        .nav{position:fixed;top:calc(var(--nav-h) + var(--safe-t));left:0;right:0;bottom:auto;
          transform:translateY(-12px);animation:none;
          flex-direction:column;align-items:stretch;gap:0;
          background:rgba(255,255,255,.96);backdrop-filter:blur(20px);padding:14px var(--gut) 26px;
          border-bottom:1px solid var(--line);opacity:0;pointer-events:none;
          max-height:calc(100vh - var(--nav-h) - var(--safe-t));max-height:calc(100dvh - var(--nav-h) - var(--safe-t));overflow-y:auto;
          clip-path:none;
          transition:opacity .3s var(--ease),transform .3s var(--ease);color:var(--frost)}
        .nav[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
        .nav::before{display:none}
        .nav button,.nav a{padding:17px 0;border-bottom:1px solid var(--line);text-align:left;font-size:12px;opacity:.85}
        .nav button,.nav a::after{display:none}
        .nav__festival-links{display:contents}
        .nav__festival-links a{order:-1;color:#2B647F;font-weight:700}

        .split{grid-template-columns:1fr}
        .split::after{height:min(120px,14vh)}
        .split__cell:first-child::after,.split__cell:last-child::before{display:none}
        .svcs,.stats__grid,.grid3{grid-template-columns:1fr 1fr}
        .facts{grid-template-columns:1fr}
        .facts div{border-left:0;border-top:1px solid var(--line)}
        .facts div:first-child{border-top:0}
        .lineup__head{grid-template-columns:1fr}
        .lineup__when{text-align:left}
        .ftr__cols{grid-template-columns:1fr;gap:40px}
        .ftr__news{order:-1;max-width:520px}
        .ftr__socials{text-align:center}
        .ftr__socials ul{justify-content:center}
      }

      /* ===== iPad portrait & large phones ===== */
      @media (max-width:820px){
        .svcs,.stats__grid,.grid3{grid-template-columns:1fr}
        .show__copy{grid-template-columns:1fr}
        .show__gallery{grid-template-columns:repeat(3,1fr)}
      }

      /* ===== MOBILE ===== */
      @media (max-width:700px){
        :root{--nav-h:70px}
        .wordmark{flex-direction:column;align-items:flex-start;width:100%;margin-left:0;white-space:normal;
          font-size:clamp(44px,16.5vw,96px);line-height:.92}
        .wordmark span:last-child{align-self:flex-end}
        .hero__meta{width:min(320px,80vw)}
        .hero__foot{grid-template-columns:1fr}
        .hero__tag{grid-column:1;text-align:left}
        .scrolldot{grid-column:1;justify-self:start}
        .manifesto p{max-width:none}
        .rail > figure{flex-basis:80vw}
        .lu{flex-basis:80vw}
        .lineup-filter{align-items:stretch;flex-direction:column;gap:10px;padding:10px 0 14px}
        .lineup-filter__days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
        .lineup-filter__day{min-width:0;width:100%;padding:0 8px;font-size:11px}
        .lineup-filter__status{text-align:left;padding-inline:4px}
        .show__gallery{grid-template-columns:repeat(2,1fr)}
        /* organized footer: newsletter on top, social chips below */
        .ftr__cols{grid-template-columns:1fr;gap:32px;text-align:center}
        .ftr__cols h3{margin-bottom:14px;font-size:24px}
        .ftr__news{order:-1;max-width:none}
        .ftr__socials ul{justify-content:center}

        /* merch page: stack products, give each card breathing room */
        #page-merch .grid3{grid-template-columns:1fr !important;gap:28px}
        #page-merch .card__meta{padding:26px 4px 4px}
        #page-merch .mast__in{padding-inline:4px}
        .projs__foot{flex-direction:column;align-items:flex-start}
        .btn{padding:16px 28px}
        .marquee span{font-size:clamp(40px,15vw,80px)}
        /* stacked two-line section titles read big on phones */
        .stack-title{font-size:clamp(52px,18vw,104px)}
        .archive-zoom{display:none}
        .archive-zoom__sticky,.archive-zoom__grid{display:none}

        /* Mobile image optimisation: lazy sections render only when near viewport,
           hero and manifesto stay fully painted to preserve their impact. */
        .journeys,.grid3,.show__gallery,.brand-gallery,
        .archive-zoom,.archive-zoom__grid,.archive-zoom__sticky{
          content-visibility:auto;
          contain-intrinsic-size:auto 300px;
        }
        .hero,.hero .frost__bg,.hero .frost__bg img,
        .manifesto,.manifesto .frost__bg,.manifesto .frost__bg img{
          content-visibility:visible;
        }
        .hero .frost__bg img,.manifesto .frost__bg img,.frost__bg img{
          image-rendering:-webkit-optimize-contrast;
          image-rendering:high-quality;
        }

        /* Legibility pass: small uppercase utility labels sat at 10–11px with low
           opacity on desktop; both the size and the contrast were too tight once
           these hit a phone screen, so lift both together on mobile. */
        .missing,.ph::after,.img-fallback,
        .nav button,.nav a,.eyebrow,.hero__note,.facts dt,.lineup__sub,.lineup__when,
        .lu--tba .lu__tba-full,.itp__cap p,.sdn__label span,.bento__k,
        .notice__kicker,.journey__meta,.rail figcaption,.tag,
        .ftr__news-msg,.ftr__socials a,.field label,.form__fineprint,
        .brand-card__cta,.card__meta span,.studio-nav,.proj__over-cap,
        .ftr__cols a,.ftr__cols button,.ftr__base,
        .ticket-card__label,.ticket-card__code,.ticket-card__meta,
        .ticket-card__fine,.ticket-card__cta,.ticket-card__badge,
        .partners__role{
          font-size:max(12px,1em) !important;
        }
        .missing,.ph::after,.img-fallback,.hero__note,.ticket-card__code,
        .ticket-card__fine,.form__fineprint,.brand-card__cta{color:rgba(16,22,26,.55)}
        .facts dt,.lineup__sub,.tag{color:rgba(16,22,26,.7)}
        .card__meta span{color:rgba(16,22,26,.75)}
        .ftr__base{color:rgba(16,22,26,.55)}
      }
      @media (max-width:420px){
        .ftr__cols{gap:28px}
        .ftr__socials ul{gap:8px}
        .ftr__socials a{padding:10px 12px;font-size:12px}
      }
      @media (max-width:400px){
        .hero__h1{font-size:clamp(26px,8vw,34px)}
      }

      /* ===== LANDSCAPE PHONE HINT ===== */
      .rotate-hint{position:fixed;inset:0;z-index:300;display:none;place-items:center;text-align:center;
        background:var(--ink);padding:40px;
        font:500 12px/1.7 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:var(--frost)}
      .rotate-hint svg{width:44px;height:44px;margin:0 auto 22px;display:block;color:var(--ice-2);
        animation:rotatehint 2.4s var(--ease) infinite}
      @keyframes rotatehint{0%,45%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
      @media (max-width:820px) and (orientation:landscape) and (max-height:480px){
        .rotate-hint{display:grid}
      }
      @media (prefers-reduced-motion:reduce){
        html{scroll-behavior:auto}
        *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
        .rv{opacity:1;transform:none;filter:none}
        .arc path{stroke-dashoffset:0}
        .archive-zoom{height:auto;padding:clamp(70px,12vh,120px) 0}
        .archive-zoom__sticky{position:relative;height:auto}
        .archive-zoom__grid{--archive-scale:1;--archive-label:1}
      }

      /* === Event grid: Details/Location + Ticketshop preview === */
      .event-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
        gap:clamp(28px,3.4vw,64px);align-items:start;max-width:1200px}
      .event-grid .slots{max-width:none}

      .ticket-card{position:relative;display:block;padding:28px 28px 26px;
        color:var(--frost);background:rgba(255,255,255,.025);
        border:1px solid rgba(16,22,26,.14);border-radius:2px;
        text-decoration:none;transition:border-color .35s var(--ease),background .35s var(--ease)}
      .ticket-card:hover{border-color:rgba(16,22,26,.4);background:rgba(255,255,255,.045)}
      .ticket-card:focus-visible{outline:1px solid var(--ice-1);outline-offset:3px}

      .ticket-card__head{display:flex;justify-content:space-between;align-items:center;gap:12px;
        padding-bottom:18px;border-bottom:1px solid rgba(16,22,26,.12);margin-bottom:22px}
      .ticket-card__label{font:500 12px/1 var(--utility);letter-spacing:.28em;text-transform:uppercase;color:rgba(16,22,26,.7)}
      .ticket-card__code{font:500 12px/1 var(--utility);letter-spacing:.2em;text-transform:uppercase;color:rgba(16,22,26,.55)}

      .ticket-card__badges{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
      .ticket-card__badge{display:inline-flex;align-items:center;gap:6px;
        font:600 11px/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;
        padding:6px 11px;border-radius:999px;white-space:nowrap}
      .ticket-card__badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
      .ticket-card__badge--phase{color:#3E8FB4;background:rgba(198,233,247,.14);border:1px solid rgba(198,233,247,.3)}
      .ticket-card__badge--phase::before{background:var(--ice-1)}
      .ticket-card__badge--limited{color:#ffcf8a;background:rgba(255,207,138,.14);border:1px solid rgba(255,207,138,.32)}
      .ticket-card__badge--limited::before{background:#ffcf8a}

      .ticket-card__title{margin:0 0 8px;font:500 clamp(22px,2.2vw,30px)/1.05 var(--display);letter-spacing:-.02em;color:var(--frost)}
      .ticket-card__meta{margin:0 0 26px;font:500 12px/1.4 var(--utility);letter-spacing:.16em;text-transform:uppercase;color:rgba(16,22,26,.7)}

      .ticket-card__tiers{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px}
      .ticket-card__tiers li{display:flex;align-items:baseline;gap:12px;font:400 13px/1.2 var(--display);color:var(--frost)}
      .tier__name{letter-spacing:.02em}
      .tier__dots{flex:1;height:1px;border-bottom:1px dotted rgba(16,22,26,.18);transform:translateY(-3px)}
      .tier__price{font:500 12px/1 var(--utility);letter-spacing:.08em;color:rgba(16,22,26,.85);white-space:nowrap}

      .ticket-card__fine{margin:0 0 26px;font:400 12px/1.5 var(--utility);letter-spacing:.1em;text-transform:uppercase;color:rgba(16,22,26,.5)}

      .ticket-card__cta{display:inline-flex;align-items:center;gap:10px;
        font:500 12px/1 var(--utility);letter-spacing:.2em;text-transform:uppercase;color:var(--frost);
        padding-bottom:6px;border-bottom:1px solid rgba(16,22,26,.4);
        transition:border-color .3s var(--ease),color .3s var(--ease)}
      .ticket-card__arrow{display:inline-block;transition:transform .35s var(--ease)}
      .ticket-card:hover .ticket-card__cta{border-color:#3E8FB4;color:#3E8FB4}
      .ticket-card:hover .ticket-card__arrow{transform:translateX(4px)}

      @media (max-width:900px){
        .event-grid{grid-template-columns:1fr;gap:34px}
      }
      @media (prefers-reduced-motion:reduce){
        .ticket-card,.ticket-card__cta,.ticket-card__arrow{transition:none}
      }


      /* ==================================================================
         SUPER-ULTRAWIDE / 32:9 / 49" MONITORS / 4K,5K,8K DESKTOPS
         Existing rules above already cap .wrap at 1680–1880px through
         2400px. Beyond that (3440x1440 UWQHD, 5120x1440 49" panels,
         3840/5120/7680 4K–8K desktops) content needs a further-capped
         reading column so text and media don't dissolve into a thin
         strip in a sea of background, plus a base font bump so body
         copy stays legible at typical seated viewing distance.
         ================================================================== */
      @media (min-width:2960px){
        .wrap{max-width:2040px}
        .mast__in{max-width:2040px}
        body{font-size:18px}
        .hero__body{max-width:900px}
        .hero{min-height:min(100vh,860px);min-height:min(100svh,860px)}
        .form{max-width:860px}
      }
      @media (min-width:3840px){
        :root{--gut:clamp(56px,4vw,120px)}
        .wrap{max-width:2320px}
        .mast__in{max-width:2320px}
        body{font-size:19px}
        .hero__body{max-width:980px}
        .wordmark{max-width:2200px}
        .ftr__hero h2,.manifesto p{max-width:22ch}
      }
      @media (min-width:5120px){
        .wrap{max-width:2600px}
        .mast__in{max-width:2600px}
        body{font-size:21px}
        .hero__body{max-width:1080px}
      }
      /* 34" UWQHD / 21:9: preserve cinematic height, keep primary content
         inside the comfortable central arc of curved displays, and scale
         interactive/editorial elements without stretching reading lines. */
      @media (min-width:2560px) and (min-aspect-ratio:21/10) and (max-aspect-ratio:26/10){
        :root{--gut:clamp(88px,4.1vw,144px)}
        .hdr{padding-inline:calc(var(--gut) + var(--safe-l)) calc(var(--gut) + var(--safe-r))}
        .nav{gap:clamp(18px,1.15vw,34px);transform:translate(calc(-50% - 80px),-50%)}
        #nav button,#nav a{font-size:12px !important;letter-spacing:.1em !important}
        .hero{min-height:clamp(900px,68vh,1080px);min-height:clamp(900px,68svh,1080px)}
        .hero__body{max-width:980px;padding-top:calc(var(--nav-h) + 42px)}
        .hero__meta{width:520px;font-size:12px}
        .hero__h1{font-size:clamp(54px,2.2vw,72px);max-width:10ch}
        .hero__cta .btn{font-size:13px;padding:20px 38px}
        .wordmark{width:auto;max-width:none;justify-content:center;gap:.12em;margin-inline:auto}
        .hero__tag{font-size:12px}
        .facts{grid-template-columns:repeat(3,minmax(0,680px));justify-content:center}
        .facts div{padding-block:38px}
        .facts div:first-child{padding-left:32px;border-left:1px solid var(--line)}
        .facts div:last-child{padding-right:32px;border-right:1px solid var(--line)}
        .wrap{max-width:2180px}
        .lineup__rail{justify-content:flex-start}
        .lu{flex-basis:clamp(360px,12vw,420px)}
      }
      /* Curved / super-ultrawide panels: pin sticky full-bleed scenes to a
         sane max-width so the subject stays centered instead of smeared
         edge-to-edge across a 32:9+ curve. */
      @media (min-width:2600px){
        .itp__stick,.sdn__stick,.tzoom__stick,.archive-zoom__sticky{max-width:3000px;margin-inline:auto}
      }

      /* ==================================================================
         SMALLEST SCREENS / FOLDABLES (outer covers, e.g. ~280–320px)
         ================================================================== */
      @media (max-width:340px){
        :root{--gut:clamp(14px,4.4vw,20px)}
        body{font-size:14px}
        .lu{flex-basis:240px}
      }

      /* Foldables & narrow tablets opened in portrait: taller-than-wide
         but with generous width — avoid the mobile column feeling cramped. */
      @media (min-width:600px) and (max-width:900px) and (min-aspect-ratio:1/1){
        .svcs,.stats__grid,.grid3{grid-template-columns:repeat(3,1fr)}
      }

      /* Coarse-pointer safety net: guarantee comfortable tap targets on any
         touch device regardless of screen size (phones, tablets, touch
         laptops, kiosks). */
      @media (hover:none) and (pointer:coarse){
        .nav button,.nav a,.burger,a[data-ticket-link],button{min-height:44px}
      }

      /* Very short viewports (landscape phones, small laptops with the
         browser chrome eating vertical space) — let sticky 100vh scenes
         breathe instead of clipping. */
      @media (max-height:420px) and (orientation:landscape){
        .itp__stick,.sdn__stick,.tzoom__stick,.archive-zoom__sticky{height:100vh;height:100svh}
        .hero{min-height:auto;padding-top:calc(var(--nav-h) + 20px);padding-bottom:20px}
      }


      /* =====================================================================
         02. CORE ADDENDUM — Nav-Höhen & Viewport-Feinschliff
         ===================================================================== */
      /* Winter arc hero: render the original file at full fidelity — no filters,
         no transforms that force resampling, no compositor-induced blur. */
      .hero .frost__bg{transform:none !important;will-change:auto !important}
      .hero .frost__bg .ph--img{position:relative;transform:none !important;will-change:auto}
      .hero .frost__bg .ph--img img{
        filter:none !important;
        transform:none !important;
        image-rendering:-webkit-optimize-contrast;
        image-rendering:high-quality;
        backface-visibility:visible;
        width:100%; height:100%; object-fit:cover;
      }
      .hero .frost__bg .ph--img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
        background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 45%,rgba(255,255,255,.55) 100%)}
      /* Global image quality: native resolution, no compositor blur */
      img{image-rendering:-webkit-optimize-contrast;image-rendering:high-quality}
      .archive-zoom__tile,.archive-zoom__grid{transform:none !important}
      .archive-zoom__tile img,.journey img,.frost__bg img{image-rendering:high-quality;backface-visibility:visible;transform:none !important;will-change:auto !important}


      /* =====================================================================
         03. PAGE-LOCAL — Winter-Arc Sektionen
         ===================================================================== */
      .partners{padding:clamp(80px,10vh,140px) 0 clamp(60px,8vh,110px)}
      .partners__head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(40px,5vh,72px)}
      .partners__title{margin:0;font:600 clamp(34px,4.6vw,64px)/1 var(--display);letter-spacing:-.02em;color:var(--frost)}
      .partners__lede{margin:0;font:400 clamp(13px,1vw,15px)/1.6 var(--utility);color:rgba(16,22,26,.55);letter-spacing:.02em}
      .partners__strip{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.4vw,36px)}
      .partners__item{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;padding:clamp(28px,3vw,44px) clamp(36px,4vw,64px);
        border:1px solid rgba(16,22,26,.12);border-radius:6px;text-decoration:none;color:inherit;cursor:pointer;
        background:linear-gradient(180deg,rgba(16,22,26,.04),rgba(16,22,26,.015));
        backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
        transition:border-color .5s var(--rv-ease),transform .5s var(--rv-ease),background .5s var(--rv-ease)}
      .partners__item::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
        background:radial-gradient(120% 90% at 50% 0%,rgba(198,233,247,.10),transparent 60%);opacity:.7}
      .partners__item:hover{border-color:rgba(198,233,247,.32);transform:translateY(-2px);background:linear-gradient(180deg,rgba(16,22,26,.06),rgba(16,22,26,.02))}
      .partners__item--lead{padding:clamp(34px,3.6vw,56px) clamp(48px,5vw,88px)}
      .partners__role{font:500 10px/1.45 var(--utility);letter-spacing:.22em;text-transform:uppercase;color:#5C7A8A;
        white-space:nowrap;text-align:center}
      .partners__logo{display:grid;place-items:center;min-height:88px}
      .partners__logo img{display:block;width:auto;height:clamp(56px,6vw,84px);max-width:min(360px,72vw);object-fit:contain;
        filter:brightness(0);opacity:.92;image-rendering:high-quality}
      .partners__logo--color img{filter:none;opacity:1;background:transparent}
      .partners__item--lead .partners__logo img{height:clamp(72px,7.2vw,108px)}
      @media (max-width:700px){
        .partners{padding:64px 0 48px}
        .partners__item{width:100%;max-width:420px}
      }
      @media (max-width:380px){
        .partners__role{white-space:normal;letter-spacing:.16em;font-size:9px}
      }

      /* ---------- LOCATION / VENUE ---------- */
      .loc{position:relative;padding:clamp(72px,8vw,120px) 0;background:var(--ink);overflow:hidden}
      .loc__contours{position:absolute;inset:-6% -4%;width:108%;height:112%;color:var(--ice-2);opacity:.14;pointer-events:none}
      .loc__ghost{position:absolute;top:clamp(6px,1.6vw,26px);left:50%;transform:translateX(-50%);z-index:0;
        font-family:var(--display);font-weight:800;font-size:clamp(84px,16.5vw,272px);line-height:1;
        letter-spacing:-.035em;white-space:nowrap;pointer-events:none;user-select:none;
        color:transparent;-webkit-text-fill-color:transparent;
        background:linear-gradient(180deg,rgba(62,143,180,.34) 0%,rgba(119,190,221,.16) 58%,rgba(119,190,221,.05) 100%);
        -webkit-background-clip:text;background-clip:text;
        -webkit-text-stroke:1.5px rgba(62,143,180,.38)}
      .loc .wrap{position:relative;z-index:1}
      .loc__head{margin-bottom:clamp(28px,3.4vw,48px)}
      .loc__head .eyebrow{color:var(--mist)}
      .loc__title{margin:14px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-.02em;color:var(--frost)}
      .loc__title::after{content:"";display:block;width:56px;height:3px;margin-top:18px;background:var(--ice-2)}
      .loc__coords{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;
        font:500 11px/1.7 var(--utility);letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
      .loc__coords b{color:var(--ice-2);font-weight:600}
      .loc__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
      .loc__copy p{font-size:16px;line-height:1.75;color:rgba(16,22,26,.82);max-width:56ch}
      .loc__copy p + p{margin-top:20px}
      .loc__cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;counter-reset:locc}
      .loc__card{position:relative;border:1px solid rgba(16,22,26,.1);border-radius:14px;background:#fff;padding:22px 22px 24px;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
      .loc__card::before{counter-increment:locc;content:"0" counter(locc);position:absolute;top:14px;right:16px;
        font:600 10px/1 var(--utility);letter-spacing:.18em;color:var(--ice-2);opacity:.85}
      .loc__card::after{content:"";position:absolute;left:10px;bottom:10px;width:12px;height:12px;
        border-left:2px solid var(--ice-2);border-bottom:2px solid var(--ice-2);opacity:0;transition:opacity .25s ease}
      .loc__card:hover{border-color:color-mix(in oklab,var(--ice-2) 45%,transparent);box-shadow:0 16px 40px -28px rgba(62,143,180,.5);transform:translateY(-3px)}
      .loc__card:hover::after{opacity:1}
      .loc__card svg{display:block;width:22px;height:22px;color:var(--ice-2);margin-bottom:14px}
      .loc__card .loc__k{font:500 10px/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
      .loc__card .loc__v{font-size:15px;font-weight:600;line-height:1.45;color:var(--frost)}
      .loc__card .loc__v a{color:var(--frost);text-decoration:underline;text-decoration-color:var(--ice-2);text-underline-offset:3px}
      .loc__card .loc__v a:hover{color:var(--ice-2)}
      .loc__card .loc__v--big{font-family:var(--display);font-weight:800;font-size:clamp(30px,2.8vw,42px);line-height:1;letter-spacing:-.02em}
      .loc__card .loc__v--big small{font:600 11px/1 var(--utility);letter-spacing:.18em;color:var(--ice-2);margin-left:8px;vertical-align:6px}
      .loc__map{position:relative;margin-top:clamp(32px,4vw,56px);border:1px solid rgba(16,22,26,.1);border-radius:20px;overflow:hidden;background:#eef4f7}
      .loc__map iframe{display:block;width:100%;height:clamp(340px,38vw,520px);border:0}
      .loc__summit{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:9px;
        padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
        border:1px solid rgba(16,22,26,.08);font:600 10px/1 var(--utility);letter-spacing:.18em;
        text-transform:uppercase;color:var(--frost);box-shadow:0 8px 24px -12px rgba(16,22,26,.25)}
      .loc__summit i{font-style:normal;color:var(--ice-2)}
      .loc__map-actions{position:absolute;right:16px;bottom:16px;display:flex;gap:10px}
      .loc__dir{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:var(--ice-1);color:var(--frost);font:600 11px/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px -14px rgba(62,143,180,.7);transition:background .25s ease,transform .25s ease}
      .loc__dir:hover{background:var(--ice-2);transform:translateY(-1px)}
      @media (max-width:900px){
        .loc__grid{grid-template-columns:1fr}
        .loc__ghost{font-size:clamp(48px,14.5vw,110px);letter-spacing:-.02em}
        .loc__map-actions{position:static;padding:14px 16px 16px;background:var(--ink)}
      }
      @media (max-width:520px){
        .loc__cards{grid-template-columns:1fr}
      }



      /* =====================================================================
         04. REFINE v2 — Typo-Rhythmus, Kontraste, Motion-Fallbacks
         ===================================================================== */
      /* ---------------------------------------------------------------
         1. EXTENDED DESIGN TOKENS
         Layered on top of the existing :root — nothing overwritten that
         the original relies on, only additions plus two easing upgrades.
         --------------------------------------------------------------- */
      :root{
        /* Modular spacing scale (1.5 ratio, clamped for fluidity) */
        --sp-2xs:4px;
        --sp-xs:8px;
        --sp-sm:12px;
        --sp-md:clamp(16px,1.4vw,20px);
        --sp-lg:clamp(24px,2.2vw,32px);
        --sp-xl:clamp(36px,3.4vw,52px);
        --sp-2xl:clamp(56px,5.5vw,84px);
        --sp-3xl:clamp(84px,9vw,132px);

        /* Radii — softened, consistent, never bubbly */
        --r-xs:6px;
        --r-sm:10px;
        --r-md:14px;
        --r-lg:20px;
        --r-pill:999px;

        /* Elevation — multi-stop, low-alpha. Depth comes from stacking
           several soft shadows, not one heavy blur. */
        --el-1:
          0 1px 1px rgba(0,0,0,.28),
          0 2px 6px rgba(0,0,0,.22);
        --el-2:
          0 1px 1px rgba(0,0,0,.30),
          0 4px 12px rgba(0,0,0,.26),
          0 10px 28px rgba(0,0,0,.20);
        --el-3:
          0 1px 1px rgba(0,0,0,.32),
          0 8px 22px rgba(0,0,0,.30),
          0 22px 54px rgba(0,0,0,.28),
          0 42px 92px rgba(0,0,0,.20);

        /* Ice glow — the one accent flourish, kept restrained */
        --glow-ice:0 0 0 1px rgba(198,233,247,.14), 0 14px 44px rgba(119,190,221,.18);
        --glow-ice-strong:0 0 0 1px rgba(198,233,247,.22), 0 20px 62px rgba(119,190,221,.30);

        /* Hairline system — three weights instead of one flat --line */
        --hair-1:rgba(16,22,26,.07);
        --hair-2:rgba(16,22,26,.13);
        --hair-3:rgba(16,22,26,.22);

        /* Material: the top-edge specular highlight that sells "glass" */
        --spec:inset 0 1px 0 rgba(255,255,255,.07);
        --spec-strong:inset 0 1px 0 rgba(255,255,255,.12);

        /* Motion tokens */
        --ease-out:cubic-bezier(.16,1,.3,1);
        --ease-inout:cubic-bezier(.65,0,.35,1);
        --ease-spring:cubic-bezier(.34,1.32,.44,1);
        --dur-fast:160ms;
        --dur-base:280ms;
        --dur-slow:520ms;

        /* Optical text colours — a proper hierarchy, not one grey */
        --tx-1:var(--frost);
        --tx-2:rgba(16,22,26,.76);
        --tx-3:rgba(16,22,26,.56);
        --tx-4:rgba(16,22,26,.60);

        color-scheme:light;
      }

      /* ---------------------------------------------------------------
         2. TYPOGRAPHY — the single biggest maturity lever.
         Optical sizing, tabular figures for data, negative tracking that
         scales with size, and proper wrapping so headlines never orphan.
         --------------------------------------------------------------- */
      body{
        font-optical-sizing:auto;
        font-synthesis-weight:none;
        text-rendering:optimizeLegibility;
        -moz-osx-font-smoothing:grayscale;
        font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
      }

      h1,h2,h3,h4,
      .mast h1,.mast h2,.hero__h1,.lu__name,.bento__t{
        text-wrap:balance;
        font-feature-settings:"kern" 1,"liga" 1,"ss01" 1;
      }

      p,li,.mast p,.form__intro,.ftr__news-lede{
        text-wrap:pretty;
      }

      /* Display type: tracking tightens as size grows — the classic
         optical correction most templates skip. */
      .hero__h1{
        letter-spacing:-.028em;
        line-height:.94;
        font-weight:700;
      }
      .mast h1,.mast h2{
        letter-spacing:-.038em;
        line-height:.96;
      }
      .lu__name,.bento__t,.proj h3,.show__head h3{
        letter-spacing:-.024em;
      }

      /* Utility/mono type: tabular figures so numbers, dates, prices and
         counters never shift width between states. */
      .hero__meta,.eyebrow,.tag,.stat,.tier__price,.lu__date,
      .bento__k,.field label,.ftr__socials a,.nav button,.nav a,.btn,
      .form__fineprint,.journey__meta,.sdn__label,.itp__cap{
        font-variant-numeric:tabular-nums;
        font-feature-settings:"tnum" 1,"zero" 1;
      }

      /* Body copy measure + colour hierarchy */
      .mast p{
        color:var(--tx-2);
        max-width:58ch;
        font-size:clamp(15px,1.05vw,17px);
        line-height:1.68;
        letter-spacing:-.005em;
      }
      .form__intro{
        color:var(--tx-3);
        line-height:1.7;
        letter-spacing:-.004em;
      }
      .eyebrow{
        letter-spacing:.22em;
        color:var(--tx-3);
      }

      /* ---------------------------------------------------------------
         3. GLOBAL SURFACE POLISH
         --------------------------------------------------------------- */
      ::selection{background:rgba(119,190,221,.30);color:var(--frost)}
      ::-moz-selection{background:rgba(119,190,221,.30);color:var(--frost)}

      /* Refined focus ring — a soft dual ring rather than a hard outline */
      :focus-visible{
        outline:none;
        box-shadow:
          0 0 0 2px var(--ink),
          0 0 0 4px rgba(198,233,247,.85),
          0 0 22px rgba(119,190,221,.35);
        border-radius:var(--r-xs);
        transition:box-shadow var(--dur-fast) var(--ease-out);
      }

      /* Scrollbar, tuned to the palette instead of the OS default */
      *{scrollbar-width:thin;scrollbar-color:rgba(147,163,172,.34) transparent}
      ::-webkit-scrollbar{width:10px;height:10px}
      ::-webkit-scrollbar-track{background:transparent}
      ::-webkit-scrollbar-thumb{
        background:rgba(147,163,172,.26);
        border-radius:var(--r-pill);
        border:3px solid var(--ink);
        transition:background var(--dur-base) var(--ease-out);
      }
      ::-webkit-scrollbar-thumb:hover{background:rgba(198,233,247,.42)}

      /* Horizontal rails: hide the bar but keep the drag affordance */
      .lineup__rail,.rail{scrollbar-width:none}
      .lineup__rail::-webkit-scrollbar,.rail::-webkit-scrollbar{display:none}

      /* ---------------------------------------------------------------
         4. HEADER — refined glass. Thinner hairline, real specular edge,
         and a mask-fade so the blur never cuts off with a hard seam.
         --------------------------------------------------------------- */
      .hdr{
        transition:
          background var(--dur-slow) var(--ease-out),
          border-color var(--dur-slow) var(--ease-out),
          color var(--dur-slow) var(--ease-out),
          backdrop-filter var(--dur-slow) var(--ease-out);
      }
      .hdr[data-solid="true"]{
        background:rgba(255,255,255,.62);
        -webkit-backdrop-filter:blur(22px) saturate(1.45);
        backdrop-filter:blur(22px) saturate(1.45);
        border-bottom-color:var(--hair-2);
        box-shadow:var(--spec),0 1px 30px rgba(0,0,0,.32);
      }
      /* Soft gradient scrim under the nav on transparent pages, so light
         imagery never eats the wordmark. */
      .hdr::after{
        content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
        background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
        opacity:1;transition:opacity var(--dur-slow) var(--ease-out);
      }
      .hdr[data-solid="true"]::after{opacity:0}
      .hdr[data-tone="light"]::after{
        background:linear-gradient(180deg,rgba(240,246,249,.55),rgba(240,246,249,0));
      }

      .nav button,.nav a{
        letter-spacing:.16em;
        transition:
          opacity var(--dur-base) var(--ease-out),
          color var(--dur-base) var(--ease-out);
      }
      .nav button,.nav a::after{
        height:1.5px;
        background:linear-gradient(90deg,var(--ice-1),var(--ice-2));
        transition:right var(--dur-slow) var(--ease-out);
      }
      .brand{transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
      .brand:hover{opacity:.72;transform:translateY(-1px)}
      .brand:active{transform:translateY(0) scale(.985)}

      /* ---------------------------------------------------------------
         5. BUTTONS — restrained, tactile, with a real press state.
         --------------------------------------------------------------- */
      .btn{
        letter-spacing:.15em;
        border-radius:var(--r-pill);
        transition:
          transform var(--dur-base) var(--ease-out),
          box-shadow var(--dur-base) var(--ease-out),
          background var(--dur-base) var(--ease-out),
          border-color var(--dur-base) var(--ease-out),
          color var(--dur-base) var(--ease-out);
      }
      .btn svg{transition:transform var(--dur-base) var(--ease-out)}
      .btn:active{transform:translateY(0) scale(.982);transition-duration:var(--dur-fast)}

      .btn--ice{
        background:linear-gradient(152deg,#D8F1FB 0%,var(--ice-1) 34%,var(--ice-2) 100%);
        color:#08131A;
        box-shadow:var(--el-1),0 10px 30px rgba(119,190,221,.22),var(--spec-strong);
      }
      .btn--ghost{
        border-color:var(--hair-2);
        background:rgba(16,22,26,.012);
        box-shadow:var(--spec);
      }

      @media (hover:hover) and (pointer:fine){
        .btn--ice:hover{
          transform:translateY(-2px);
          box-shadow:var(--el-2),0 20px 52px rgba(119,190,221,.40),var(--spec-strong);
        }
        .btn--ghost:hover{
          background:rgba(198,233,247,.06);
          border-color:rgba(198,233,247,.40);
          box-shadow:var(--glow-ice),var(--spec);
          transform:translateY(-2px);
        }
        .btn:hover svg{transform:translateX(4px)}
      }

      /* ---------------------------------------------------------------
         6. CARDS & SURFACES — one coherent material language.
         Every card gets: hairline border, specular top edge, layered
         shadow, and a gradient sheen that only resolves on hover.
         --------------------------------------------------------------- */
      .lu,.bento__cell,.info-card,.form__panel,.svc,.stat,.proj,.show__cover{
        border-radius:var(--r-md);
        box-shadow:var(--el-1),var(--spec);
        transition:
          transform var(--dur-slow) var(--ease-out),
          box-shadow var(--dur-slow) var(--ease-out),
          border-color var(--dur-slow) var(--ease-out),
          background var(--dur-slow) var(--ease-out);
      }

      /* Lineup cards — the hero component. Lift, glow, and a slow
         image push, all on the same easing so it reads as one gesture. */
      .lu{overflow:hidden}
      .lu__ph{transition:transform 1.1s var(--ease-out),filter 1.1s var(--ease-out)}
      .lu__go{
        transition:
          background var(--dur-base) var(--ease-out),
          color var(--dur-base) var(--ease-out),
          border-color var(--dur-base) var(--ease-out),
          transform var(--dur-base) var(--ease-spring);
      }

      @media (hover:hover) and (pointer:fine){
        .lu:hover{
          transform:translateY(-6px);
          border-color:rgba(198,233,247,.30);
          box-shadow:var(--el-3),var(--glow-ice),var(--spec-strong);
        }
        .lu:hover .lu__ph{transform:scale(1.06);filter:saturate(1.06) contrast(1.03)}
        .lu:hover .lu__go{transform:scale(1.09) rotate(-6deg)}

        .bento__cell:hover{
          transform:translateY(-4px);
          border-color:rgba(198,233,247,.28);
          box-shadow:var(--el-2),var(--glow-ice),var(--spec-strong);
        }
        .bento__cell:hover img{transform:scale(1.06)}
      }
      .bento__cell img{transition:transform 1s var(--ease-out)}
      .bento__cell{border-radius:var(--r-md)}
      .bento__k{letter-spacing:.24em;color:var(--tx-3)}

      /* TBA placeholders — quieter, so real acts dominate the grid */
      .lu--tba{
        border-color:var(--hair-1);
        background:rgba(16,22,26,.014);
        box-shadow:none;
      }
      .lu--tba .lu__tba-k{color:var(--tx-3)}
      .lu--tba .lu__tba-full{color:var(--tx-4);letter-spacing:.24em}
      @media (hover:hover) and (pointer:fine){
        .lu--tba:hover{
          transform:translateY(-3px);
          border-color:var(--hair-2);
          background:rgba(16,22,26,.028);
          box-shadow:var(--el-1);
        }
      }

      /* Info cards / service blocks / stats */
      .info-card,.svc,.stat{overflow:visible;
        background:
          linear-gradient(180deg,rgba(16,22,26,.035),rgba(16,22,26,.012));
        border:1px solid var(--hair-1);
        border-radius:var(--r-md);
        -webkit-backdrop-filter:blur(6px);
        backdrop-filter:blur(6px);
      }
      @media (hover:hover) and (pointer:fine){
        .info-card:hover,.svc:hover,.stat:hover{
          transform:translateY(-3px);
          border-color:var(--hair-3);
          box-shadow:var(--el-2),var(--spec-strong);
        }
      }

      /* Tags / pills — the detail that most reads as "toy" when soft.
         Tightened, hairlined, and given a real hover. */
      .tag{
        border-radius:var(--r-pill);
        border:1px solid var(--hair-2);
        background:rgba(16,22,26,.028);
        padding:7px 13px;
        letter-spacing:.17em;
        color:var(--tx-2);
        transition:
          background var(--dur-base) var(--ease-out),
          border-color var(--dur-base) var(--ease-out),
          color var(--dur-base) var(--ease-out),
          transform var(--dur-base) var(--ease-out);
      }
      @media (hover:hover) and (pointer:fine){
        .tag:hover{
          background:rgba(198,233,247,.10);
          border-color:rgba(198,233,247,.34);
          color:#3E8FB4;
          transform:translateY(-1px);
        }
      }

      /* Project cards */
      @media (hover:hover) and (pointer:fine){
        .proj:hover{
          transform:translateY(-5px);
          box-shadow:var(--el-3),var(--spec-strong);
        }
      }

      /* ---------------------------------------------------------------
         7. FORMS — enterprise-grade input treatment.
         --------------------------------------------------------------- */
      .form__panel{
        background:
          linear-gradient(180deg,rgba(16,22,26,.045),rgba(16,22,26,.010));
        border:1px solid var(--hair-2);
        border-radius:var(--r-lg);
        -webkit-backdrop-filter:blur(14px) saturate(1.2);
        backdrop-filter:blur(14px) saturate(1.2);
        box-shadow:var(--el-2),var(--spec-strong);
        padding:var(--sp-xl);
      }
      .form__panel-head{letter-spacing:-.018em}
      .form__panel-icon{color:var(--ice-2);opacity:.9}
      .form__fineprint{color:var(--tx-4);letter-spacing:.1em;line-height:1.6}

      .field label{
        letter-spacing:.19em;
        color:var(--tx-3);
        transition:color var(--dur-base) var(--ease-out);
      }
      .field:focus-within label{color:#3E8FB4}

      .field input,
      .field select,
      .field textarea{
        background:rgba(255,255,255,.42);
        border:1px solid var(--hair-2);
        border-radius:var(--r-sm);
        color:var(--tx-1);
        caret-color:#3E8FB4;
        box-shadow:var(--spec);
        transition:
          border-color var(--dur-base) var(--ease-out),
          background var(--dur-base) var(--ease-out),
          box-shadow var(--dur-base) var(--ease-out);
      }
      .field input::placeholder,
      .field textarea::placeholder{color:var(--tx-4)}

      .field input:hover,
      .field select:hover,
      .field textarea:hover{border-color:var(--hair-3)}

      .field input:focus,
      .field select:focus,
      .field textarea:focus{
        outline:none;
        border-color:rgba(198,233,247,.55);
        background:rgba(255,255,255,.62);
        box-shadow:
          var(--spec),
          0 0 0 3px rgba(119,190,221,.16),
          0 8px 26px rgba(119,190,221,.12);
      }

      /* Custom select chevron in the brand's ice tone */
      .field select{
        appearance:none;-webkit-appearance:none;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2377BEDD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 16px center;
        padding-right:42px;
      }
      .field select option{background:var(--slate);color:var(--frost)}

      /* Validation — only after the user has actually engaged */
      .field input:user-invalid,
      .field textarea:user-invalid{
        border-color:rgba(226,124,124,.55);
        box-shadow:var(--spec),0 0 0 3px rgba(226,124,124,.14);
      }

      /* Kill Chrome's blue autofill wash */
      .field input:-webkit-autofill,
      .field input:-webkit-autofill:hover,
      .field input:-webkit-autofill:focus,
      .ftr__news-row input:-webkit-autofill{
        -webkit-text-fill-color:var(--frost);
        -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.92) inset;
        caret-color:#3E8FB4;
        transition:background-color 9999s ease-in-out 0s;
      }

      /* Newsletter row */
      .ftr__news-row{
        border-bottom-color:var(--hair-2);
        transition:border-color var(--dur-base) var(--ease-out);
      }
      .ftr__news-row:hover{border-bottom-color:var(--hair-3)}
      .ftr__news-row:focus-within{border-bottom-color:rgba(198,233,247,.7)}
      .ftr__news-row button{transition:color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring)}
      .ftr__news-lede{color:var(--tx-3)}

      .ftr__socials a{
        border-radius:var(--r-pill);
        border:1px solid var(--hair-1);
        letter-spacing:.15em;
        transition:
          background var(--dur-base) var(--ease-out),
          color var(--dur-base) var(--ease-out),
          border-color var(--dur-base) var(--ease-out),
          transform var(--dur-base) var(--ease-out);
      }
      @media (hover:hover) and (pointer:fine){
        .ftr__socials a:hover{
          background:rgba(198,233,247,.12);
          border-color:rgba(198,233,247,.30);
          color:#3E8FB4;
          transform:translateY(-2px);
        }
      }

      /* ---------------------------------------------------------------
         8. REVEAL MOTION — shorter, calmer, less blur.
         Long blurred reveals read as "demo"; enterprise motion is quick
         and confident. Duration down, blur down, travel down.
         --------------------------------------------------------------- */
      .rv{
        transform:translateY(20px) scale(.992);
        transition:
          opacity .78s var(--ease-out),
          transform .78s var(--ease-out);
      }
      .rv[data-d="1"]{transition-delay:.07s}
      .rv[data-d="2"]{transition-delay:.14s}
      .rv[data-d="3"]{transition-delay:.21s}

      /* The 3D card entrance: flatten the angle so it reads premium,
         not like a slideshow transition. */
      .lu.rv,.proj.rv,.card.rv{
        transform:perspective(1400px) rotateX(8deg) translateY(26px) scale(.968);
      }

      .mask-reveal .mask-inner{transition:transform .92s var(--ease-out)}

      /* Scroll progress bar — thinner, sharper */
      .scrollprog{
        height:2px;
        background:linear-gradient(90deg,var(--ice-2),var(--ice-1));
        box-shadow:0 0 14px rgba(119,190,221,.55),0 0 3px rgba(198,233,247,.8);
      }

      /* ---------------------------------------------------------------
         9. SECTION RHYTHM — generous, consistent vertical cadence.
         --------------------------------------------------------------- */
      .sect{padding:var(--sp-3xl) 0}
      .mast{padding-bottom:var(--sp-xl)}
      .mast h1,.mast h2{margin-top:var(--sp-md)}
      .mast p{margin-top:var(--sp-lg)}

      /* Hairline section dividers, drawn as a fading rule rather than a
         flat 1px line — subtle, and it stops the page feeling boxy. */
      .sect + .sect::after{
        content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
        background:linear-gradient(90deg,transparent,var(--hair-2) 18%,var(--hair-2) 82%,transparent);
        pointer-events:none;
      }

      /* ---------------------------------------------------------------
         10. PERFORMANCE
         will-change is expensive when left on permanently — it pins a
         compositor layer for the element's whole life. Here it's applied
         only while the element is actually animating (hover / pre-reveal)
         and released once settled.
         --------------------------------------------------------------- */
      .rv.in,.lu.rv.in,.proj.rv.in,.card.rv.in{will-change:auto}
      .btn,.card,.bento__cell,.wordmark span{will-change:auto}
      .btn:hover,.lu:hover,.bento__cell:hover,.info-card:hover,.proj:hover{will-change:transform}

      /* Isolate heavy sections so paint/layout can't escape their bounds */
      .sect,.form__panel,.bento{contain:layout style}

      /* Images must always paint: content-visibility on <img> made
         Studio/gallery images intermittently render as blank boxes. */
      .ph--img img{content-visibility:visible}

      /* ---------------------------------------------------------------
         11. RESPONSIVE TUNING
         --------------------------------------------------------------- */
      @media (max-width:900px){
        .form__panel{padding:var(--sp-lg)}
        .form__row{grid-template-columns:1fr;gap:var(--sp-lg)}
        .sect{padding:var(--sp-2xl) 0}
      }
      @media (max-width:640px){
        .hero__h1{letter-spacing:-.02em;line-height:1.0}
        .mast h1,.mast h2{letter-spacing:-.028em}
        .tag{padding:6px 11px}
        .btn{padding:17px 30px}
        .form__panel{border-radius:var(--r-md)}
      }

      /* Touch devices: strip hover-lift entirely so nothing sticks in a
         hovered state after a tap. */
      @media (hover:none){
        .lu,.bento__cell,.info-card,.svc,.stat,.proj,.tag,.btn{transform:none !important}
      }

      /* ---------------------------------------------------------------
         12. ACCESSIBILITY / REDUCED MOTION
         --------------------------------------------------------------- */
      @media (prefers-reduced-motion:reduce){
        *,*::before,*::after{
          animation-duration:.01ms !important;
          animation-iteration-count:1 !important;
          transition-duration:.01ms !important;
          scroll-behavior:auto !important;
        }
        .rv{opacity:1 !important;transform:none !important;filter:none !important}
        .mask-reveal .mask-inner{transform:none !important}
        .lu.rv,.proj.rv,.card.rv{transform:none !important}
      }

      @media (prefers-contrast:more){
        :root{
          --hair-1:rgba(16,22,26,.20);
          --hair-2:rgba(16,22,26,.34);
          --hair-3:rgba(16,22,26,.50);
          --tx-2:rgba(16,22,26,.92);
          --tx-3:rgba(16,22,26,.78);
          --tx-4:rgba(16,22,26,.62);
        }
      }

      /* Print: flatten to something legible rather than a black slab */
      @media print{
        body{background:#fff;color:#000}
        .hdr,.scrollprog,.pagewash,.arc-intro,.grain{display:none !important}
        .page{display:block !important}
        .rv{opacity:1 !important;transform:none !important;filter:none !important}
      }

      /* ===============================================================
         14. VSNZ MARKE — Logo-System
         Eine einzige Pfad-Quelle, fill:currentColor. Dadurch flippt die
         Marke automatisch mit dem bereits vorhandenen [data-tone] des
         Headers zwischen hell und dunkel — kein zweites Asset nötig.
         =============================================================== */
      .vsnz-mark{
        height:44px;width:auto;display:block;
        fill:currentColor;
        overflow:visible;
        transition:filter var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
      }
      /* Auf hellem Untergrund: dunkle Marke + feiner heller Rand,
         damit sie auf Fotos nie „ausfranst". */
      .hdr[data-tone="light"] .vsnz-mark{
        filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 1px 3px rgba(255,255,255,.5));
      }
      .hdr[data-tone="dark"] .vsnz-mark,
      .hdr[data-solid="true"] .vsnz-mark{
        filter:drop-shadow(0 0 10px rgba(198,233,247,.22));
      }
      @media (hover:hover) and (pointer:fine){
        .brand:hover .vsnz-mark{
          transform:translateY(-1px) scale(1.03);
          filter:drop-shadow(0 0 16px rgba(198,233,247,.45));
        }
      }
      @media (max-width:640px){ .vsnz-mark{height:34px} }

      /* ===============================================================
         15. TZOOM — „EINSCHWEISSEN"
         Die vier Segmente der Marke fliegen aus den Ecken herein,
         verriegeln in der Mitte, und eine Schweißnaht zeichnet die
         Kontur nach, während ein Lichtbogen über die Naht fährt.
         Alles hängt am bestehenden --p (0→1), das der vorhandene
         [data-scroll-progress]-Treiber schreibt. Kein neues JS.
         =============================================================== */
      .tzoom__logo{
        width:clamp(150px,26vw,320px);
        /* Zusammenbau-Fortschritt: 1 = auseinander, 0 = verriegelt (p≥.42) */
        --asm:clamp(0,calc((.42 - var(--p,0)) / .42),1);
        /* Naht-Intensität: rampt .30→.42 hoch, .48→.62 wieder ab */
        --weld:calc(
          clamp(0,calc((var(--p,0) - .28) / .14),1) *
          clamp(0,calc((.64 - var(--p,0)) / .16),1)
        );
        /* Skalierung erst NACH dem Verriegeln */
        --zoom:clamp(0,calc((var(--p,0) - .42) / .58),1);
        transform:scale(calc(.86 + var(--zoom) * 2.4));
        opacity:calc(1 - clamp(0,calc((var(--p,0) - .68) * 3.1),1));
        filter:drop-shadow(0 0 calc(18px + var(--weld) * 46px) rgba(198,233,247,calc(.22 + var(--weld) * .5)));
      }
      .vz{width:100%;height:auto;display:block;overflow:visible}

      /* ---- Die vier Füllsegmente -------------------------------- */
      .vz__seg{
        fill:currentColor;
        transform-box:fill-box;
        transform-origin:center;
        /* leichte Aufhellung im Moment des Verriegelns */
        filter:brightness(calc(1 + var(--weld) * .5));
      }
      /* außen links / innen links kommen von links, gespiegelt rechts.
         Unterschiedliche Distanz + Rotation, damit es gebaut statt
         geschoben wirkt. */
      .vz__seg--1{transform:translate(calc(var(--asm) * -68px),calc(var(--asm) * -30px)) rotate(calc(var(--asm) * -22deg)) scale(calc(1 + var(--asm) * .22));opacity:calc(1 - var(--asm) * .85)}
      .vz__seg--2{transform:translate(calc(var(--asm) * -34px),calc(var(--asm) *  40px)) rotate(calc(var(--asm) *  16deg)) scale(calc(1 + var(--asm) * .14));opacity:calc(1 - var(--asm) * .85)}
      .vz__seg--3{transform:translate(calc(var(--asm) *  68px),calc(var(--asm) * -30px)) rotate(calc(var(--asm) *  22deg)) scale(calc(1 + var(--asm) * .22));opacity:calc(1 - var(--asm) * .85)}
      .vz__seg--4{transform:translate(calc(var(--asm) *  34px),calc(var(--asm) *  40px)) rotate(calc(var(--asm) * -16deg)) scale(calc(1 + var(--asm) * .14));opacity:calc(1 - var(--asm) * .85)}

      /* ---- Die Schweißnaht: Kontur wird nachgezeichnet ----------- */
      .vz__weld{
        fill:none;
        stroke:#10161A;
        stroke-width:calc(.6 + var(--weld) * 1.5);
        stroke-linejoin:round;
        stroke-dasharray:300;
        /* zeichnet mit --p von 0 auf, invers zum Zusammenbau */
        stroke-dashoffset:calc(300 - clamp(0,calc((var(--p,0) - .18) / .26),1) * 300);
        opacity:var(--weld);
      }
      .vz__weld--1,.vz__weld--3{stroke:#10161A}
      .vz__weld--2,.vz__weld--4{stroke:#C6E9F7}

      /* ---- Der Lichtbogen: fährt über die Mittelnaht ------------- */
      .vz__arc{
        opacity:calc(var(--weld) * .95);
        transform:translateY(calc(-60px + clamp(0,calc((var(--p,0) - .26) / .22),1) * 120px))
                  scaleX(calc(1 + var(--weld) * 2.2));
        transform-box:view-box;
        transform-origin:center;
        mix-blend-mode:screen;
      }

      /* Kontaktfunken im Moment des Verriegelns */
      .tzoom__stick::after{
        content:"";
        position:absolute;left:50%;top:50%;
        width:clamp(150px,26vw,320px);aspect-ratio:1;
        translate:-50% -50%;
        pointer-events:none;
        border-radius:50%;
        background:radial-gradient(circle,rgba(198,233,247,.34) 0%,transparent 62%);
        opacity:calc(var(--weld,0) * .9);
        transform:scale(calc(.5 + var(--weld,0) * 1.5));
      }

      /* ---- Reduced motion / Fallback ----------------------------- */
      @media (prefers-reduced-motion:reduce){
        .tzoom__logo{--asm:0;--weld:0;transform:none !important;opacity:1 !important;filter:none !important}
        .vz__seg{transform:none !important;opacity:1 !important;filter:none !important}
        .vz__weld,.vz__arc,.tzoom__stick::after{display:none !important}
      }
      /* Sehr alte Engines ohne verschachteltes clamp() in calc():
         Segmente sitzen dann einfach korrekt, nur ohne Zusammenbau. */
      @supports not (transform:translate(calc(1 * 1px),calc(1 * 1px))){
        .vz__seg{transform:none}
        .vz__weld,.vz__arc{display:none}
      }


      /* ===============================================================
         16. MARKE GRÖSSER + MARKEN-SIGNET AN ZWEI NEUEN STELLEN
         =============================================================== */

      /* --- Logo oben links auf doppelte Größe (44px -> 88px) --------
         Ein 88px-Zeichen passt nicht in eine 74px-Leiste, deshalb
         wächst --nav-h mit. Da die gesamte Datei die Navhöhe
         ausschließlich über calc(var(--nav-h) …) referenziert,
         ziehen Hero-Padding, Sticky-Offsets und das Mobile-Menü
         automatisch nach — kein Nachjustieren nötig. */
      :root{ --nav-h:112px; }
      .vsnz-mark{ height:88px; }

      /* Beim Scrollen fährt die Marke optisch zusammen, ohne die
         Layouthöhe zu ändern — kein Sprung im Seiteninhalt. */
      .hdr[data-solid="true"] .vsnz-mark{
        transform:scale(.74);
        transform-origin:left center;
      }
      .brand{ transform-origin:left center; }

      @media (max-width:900px){
        :root{ --nav-h:92px; }
        .vsnz-mark{ height:70px; }
      }
      @media (max-width:640px){
        :root{ --nav-h:78px; }
        .vsnz-mark{ height:58px; }
      }

      /* --- Marken-Signet als wiederverwendbare Maske ---------------- */
      .ftr__scrim::after,
      .pagewash::after{
        content:"";
        position:absolute;
        pointer-events:none;
        background:currentColor;
        -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
        -webkit-mask-position:center;mask-position:center;
        -webkit-mask-size:contain;mask-size:contain;
        -webkit-mask-image:var(--vsnz-mask);mask-image:var(--vsnz-mask);
      }
      :root{
        --vsnz-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='112.5 87 58.5 109.4'%3E%3Cpath d='M136.7,87v38.8l-14.1,23.2v23.1c0,0-10.1-16.5-10.1-16.5v-29.5l24.2-39.1ZM128,149.9v31.4l8.9,15.1v-61.3l-8.9,14.8ZM146.8,87v38.8s14.1,23.2,14.1,23.2v23.1c0,0,10.1-16.5,10.1-16.5v-29.5s-24.2-39.1-24.2-39.1ZM146.6,135.1v61.3s8.9-15.1,8.9-15.1v-31.4s-8.9-14.8-8.9-14.8Z'/%3E%3C/svg%3E");
      }

      /* --- Footer-Wasserzeichen ------------------------------------
         Sehr blass, halb aus dem unteren Rand laufend, damit es als
         Prägung wirkt und nicht als zweites Logo. */
      .ftr__scrim::after{
        left:var(--gut);
        bottom:-14%;
        width:auto;
        height:min(58vh,540px);
        aspect-ratio:58.5 / 109.4;
        color:var(--frost);
        opacity:.045;
        z-index:0;
      }
      @media (max-width:700px){
        .ftr__scrim::after{ height:min(34vh,300px); bottom:-8%; opacity:.05 }
      }

      /* --- Signet im Page-Wash -------------------------------------
         Beim Seitenwechsel liegt bereits ein Farbverlauf über dem
         Bildschirm. Das Zeichen atmet einmal mit — es erscheint,
         hält kurz und geht mit dem Wash wieder weg. */
      .pagewash::after{
        left:50%;top:50%;
        translate:-50% -50%;
        height:min(30vh,260px);
        width:auto;
        aspect-ratio:58.5 / 109.4;
        color:var(--frost);
        opacity:0;
        filter:drop-shadow(0 0 30px rgba(198,233,247,.5));
      }
      .pagewash.is-on::after{
        animation:washMark 620ms var(--ease-out) both;
      }
      @keyframes washMark{
        0%  {opacity:0;transform:scale(.86);filter:blur(10px) drop-shadow(0 0 0 rgba(198,233,247,0))}
        45% {opacity:.92;transform:scale(1);filter:blur(0) drop-shadow(0 0 34px rgba(198,233,247,.55))}
        100%{opacity:.72;transform:scale(1.04);filter:blur(0) drop-shadow(0 0 22px rgba(198,233,247,.3))}
      }

      /* ===============================================================
         17. ARCHIVE ZOOM — Feinschliff
         Das Raster war im Original-CSS bereits vollständig angelegt.
         Hier nur Material und Lesbarkeit auf das Niveau des Rests.
         =============================================================== */
      .archive-zoom__grid{
        border-radius:2px;
      }
      .archive-zoom__tile{
        background:var(--slate);
        border-radius:1px;
      }
      .archive-zoom__tile::after{
        border-color:var(--hair-1);
        transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
      }
      /* Die Mittelkachel ist der Startpunkt des Zooms — sie bekommt
         den Fokusrahmen, der beim Herausziehen an Kraft verliert. */
      .archive-zoom__tile--focus::after{
        border-color:rgba(198,233,247,calc(.58 - clamp(0,calc((var(--p,0) - .16) / .18),1) * .40));
        box-shadow:inset 0 0 30px rgba(198,233,247,calc(.14 - clamp(0,calc((var(--p,0) - .16) / .18),1) * .10));
      }
      /* Sanftes Aufhellen der Randkacheln, sobald das Raster sichtbar wird */
      .archive-zoom__tile img{
        opacity:calc(.55 + clamp(0,calc((var(--p,0) - .16) / .18),1) * .45);
        transition:opacity .25s linear;
      }
      .archive-zoom__tile--focus img{ opacity:1 }
      .archive-zoom__label{
        opacity:clamp(0,calc((var(--p,0) - .16) / .18),1);
        font-variant-numeric:tabular-nums;
        letter-spacing:.2em;
        color:var(--tx-3);
      }
      /* Vignette, damit die Kacheln am Rand nicht hart abreißen */
      .archive-zoom__sticky::after{
        content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
        background:radial-gradient(130% 100% at 50% 50%,transparent 52%,rgba(255,255,255,.72) 100%);
        opacity:calc(clamp(0,calc((var(--p,0) - .16) / .18),1) * .9);
        transition:opacity .25s linear;
      }

      @media (prefers-reduced-motion:reduce){
        .archive-zoom__grid{ --archive-width:min(88vw,1280px) !important }
        .archive-zoom__tile img{ opacity:1 !important }
        .pagewash::after{ animation:none !important;opacity:.75 !important }
      }

      /* ===============================================================
         18. FINAL FEINSCHLIFF — Glass-Header, Raum, Micro-Interactions
         Rein additiv: keine Pfade, Variablen oder Logiken veraendert.
         =============================================================== */

      /* --- Sticky Glassmorphism-Header (auch im transparenten Zustand) --- */
      .hdr{
        backdrop-filter:blur(14px) saturate(1.12);
        -webkit-backdrop-filter:blur(14px) saturate(1.12);
        background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
        transition:background .45s var(--ease),backdrop-filter .45s var(--ease),
                   border-color .45s var(--ease),color .45s var(--ease),
                   box-shadow .45s var(--ease);
      }
      /* Feine Lichtkante am unteren Header-Rand */
      .hdr::after{
        content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
        background:linear-gradient(90deg,transparent,rgba(198,233,247,.22),transparent);
        opacity:0;transition:opacity .45s var(--ease);
      }
      .hdr[data-solid="true"]::after{opacity:1}
      .hdr[data-tone="light"]{background:linear-gradient(180deg,rgba(16,22,26,.28),rgba(16,22,26,0))}

      /* Logo bekommt Luft, ohne das Mobile-Layout zu sprengen */
      .brand{align-items:center;flex:0 0 auto;max-width:52vw}
      .brand svg{max-height:calc(var(--nav-h) - 26px)}

      /* --- Anker-Scroll & vertikaler Rhythmus --- */
      section[id]{scroll-margin-top:calc(var(--nav-h) + var(--safe-t) + 24px)}
      .page{scroll-margin-top:calc(var(--nav-h) + var(--safe-t) + 24px)}

      /* --- Typografie: Lesbarkeit und Zeilenlaenge entzerren --- */
      p{line-height:1.68}
      .wrap p:not([class]){max-width:68ch}
      h2{line-height:1.06;letter-spacing:-.015em}
      h3{line-height:1.18;letter-spacing:-.008em}
      li{line-height:1.62}
      dd,dt{line-height:1.5}

      /* --- Karten & Container: Elevation, Hairlines, Shimmer --- */
      .card,.proj,.glass,.notice,.bento__cell,.lu{
        transition:transform .3s var(--ease),border-color .3s var(--ease),
                   box-shadow .3s var(--ease),background-color .3s var(--ease);
      }
      .card:hover,.proj:hover,.bento__cell:hover,.lu:hover{
        transform:translateY(-3px);
        border-color:rgba(16,22,26,.22);
        box-shadow:0 22px 48px -30px rgba(0,0,0,.92),0 0 0 1px rgba(16,22,26,.06) inset;
      }
      .glass,.notice{
        position:relative;
        box-shadow:0 24px 60px -40px rgba(0,0,0,.9);
      }
      /* Sehr dezenter Shimmer-Verlauf auf Glas-Containern */
      .glass::before,.notice::before{
        content:"";position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(115deg,rgba(16,22,26,.07) 0%,rgba(16,22,26,0) 34%,
                   rgba(16,22,26,0) 66%,rgba(198,233,247,.05) 100%);
        opacity:.85;
      }

      /* --- Buttons: ruhige, hochwertige Hover-States --- */
      .btn{transition:transform .3s var(--ease),background-color .3s var(--ease),
                     border-color .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease)}
      .btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -20px rgba(198,233,247,.55)}
      .btn:active{transform:translateY(0)}

      @media (hover:none){
        .card:hover,.proj:hover,.bento__cell:hover,.lu:hover,.btn:hover{transform:none;box-shadow:none}
      }
      @media (prefers-reduced-motion:reduce){
        .card,.proj,.glass,.notice,.bento__cell,.lu,.btn{transition:none !important;transform:none !important}
      }

      /* ---------------------------------------------------------------
         FINAL POLISH FIXES
         --------------------------------------------------------------- */

      /* Fix 1 — Services section (Content Production / Stage Design / Art
         Direction): remove the boxed "tile" treatment so the copy stands
         free with just a hairline top rule, and stop the SERVICES pill
         from stretching to the full card width (grid stretch made it read
         as a solid bar). This gives the text proper breathing room instead
         of feeling squeezed inside a card. */
      .svc{
        justify-items:start;
        background:none !important;
        border:0 !important;
        border-top:1px solid var(--line) !important;
        border-radius:0 !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
      }
      .svc .tag{justify-self:start}
      @media (hover:hover) and (pointer:fine){
        .svc:hover{
          transform:none !important;
          border-top-color:rgba(198,233,247,.5) !important;
          box-shadow:none !important;
        }
      }

      /* Fix 2 — Stats section ("We craft unique Experiences"): the global
         frost wash/vignette was switched off site-wide, which left the
         numbers and copy sitting directly on a bright, light-colored photo
         with too little contrast. Restore a darkening wash + vignette for
         this section only (placeholder photo/content untouched) and add a
         supporting text-shadow so the numbers and labels stay legible over
         any part of the image. */
      #studio-impact.frost .frost__wash,
      #studio-impact.frost .frost__vig{
        display:block !important;
      }
      #studio-impact.frost .frost__wash{
        background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.62) 30%,
          rgba(255,255,255,.72) 60%,rgba(255,255,255,.86) 100%) !important;
      }
      #studio-impact.frost .frost__vig{
        background:radial-gradient(115% 90% at 50% 40%,transparent 30%,rgba(255,255,255,.5) 100%) !important;
      }
      #studio-impact .stats h2,
      #studio-impact .stat b,
      #studio-impact .stat .tag,
      #studio-impact .stat p{
        text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);
      }
      #studio-impact .stat .tag{color:#3E8FB4}


      /* =====================================================================
         05. LAYOUT PASS — Grids, Rails, Studio & Projects
         ===================================================================== */
      /* ===============================================================
         19. UPDATE — Hero-Subtitle, Event-Zoom, Studio-Slogan
         =============================================================== */

      /* --- Hero: "The Origin" --------------------------------------- */
      .hero__sub{
        position:relative;z-index:2;
        margin:clamp(6px,1.2vh,16px) 0 0;
        padding:0 var(--gut);
        display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
      }
      .hero__sub-rule{
        display:block;height:1px;width:clamp(34px,5vw,78px);flex:0 0 auto;
        background:linear-gradient(90deg,rgba(198,233,247,0),rgba(198,233,247,.85));
      }
      .hero__sub-txt{
        font:600 clamp(26px,3.4vw,58px)/1 var(--display);
        letter-spacing:-.025em;color:var(--tx-1);
        text-shadow:0 0 38px rgba(198,233,247,.32);
      }
      .hero__sub-rule{width:clamp(40px,7vw,120px)}
      @media (max-width:760px){
        .hero__sub-txt{font-size:clamp(20px,6vw,28px)}
      }

      /* --- Event-Sektion: Zoom-Scroll statt Textslots ---------------- */
      .sdn--event{margin:0 0 clamp(42px,6vw,80px)}
      .event-grid--single{display:block}
      .event-grid--single .ticket-card{max-width:min(560px,100%);margin-inline:auto}

      /* --- Studio-Slogan -------------------------------------------- */
      .studio-slogan{overflow:visible;
        position:relative;z-index:4;
        padding:0 var(--gut);
        pointer-events:none;
        color:#fff;
      }
      .studio-slogan__tag{
        display:inline-block;margin:0 0 clamp(14px,2vh,22px);
        font:500 10px/1 var(--utility);letter-spacing:.28em;text-transform:uppercase;
        color:rgba(16,22,26,.72);
      }
      .studio-slogan__line{
        margin:0;max-width:16ch;
        font:700 clamp(34px,6.4vw,104px)/.92 var(--display);
        letter-spacing:-.035em;text-transform:uppercase;
      }
      .studio-slogan__w{display:block}
      .studio-slogan__w--key{
        background:linear-gradient(96deg,#10161A 0%,#C6E9F7 46%,#77BEDD 100%);
        -webkit-background-clip:text;background-clip:text;color:transparent;
        -webkit-text-fill-color:transparent;
      }
      .studio-slogan__w--soft{font-size:0.46em;
        font-weight:300;letter-spacing:-.01em;
        color:rgba(16,22,26,.62);
        font-size:.46em;line-height:1.15;
        margin-top:.42em;
      }
      .studio-slogan__rule{
        display:block;height:1px;margin-top:clamp(18px,2.6vh,32px);
        width:clamp(120px,22vw,340px);
        background:linear-gradient(90deg,rgba(198,233,247,.8),rgba(198,233,247,0));
      }
      @media (max-width:1080px){
        .studio-slogan__line{max-width:none}
      }
      @media (max-width:600px){
        .studio-slogan__line{font-size:clamp(30px,10vw,46px)}
        .studio-slogan__w--soft{font-size:0.46em;font-size:.5em}
      }

      /* ============================================================
         FINAL POLISH PASS
         1) Footer typography aligned with the rest of the site
         2) Studio statement made properly legible on every backdrop
         3) Responsive clean-up phone → ultrawide
         (all .ph / data-ph placeholders untouched)
         ============================================================ */

      /* --- 1) Footer: same type system as every other section ------ */
      .ftr__hero{
        padding:clamp(80px,13vh,170px) var(--gut) clamp(52px,7vh,100px);
      }
      .ftr__hero h2{
        max-width:15ch;
        /* was 400 / #fff — now identical to .living / .projs__head / .stats */
        font:600 clamp(32px,5.2vw,86px)/1.02 var(--display);
        letter-spacing:-.035em;
        color:var(--frost);
        text-wrap:balance;
      }
      .ftr__cols h3{
        font:600 clamp(24px,2.4vw,40px)/1.05 var(--display);
        letter-spacing:-.03em;
        color:var(--frost);
      }
      .ftr__news-lede{
        font-family:var(--display);
        font-size:clamp(14px,1vw,17px);
        line-height:1.62;
        color:rgba(16,22,26,.66);
      }
      /* chips, base line & input keep the utility face used site-wide
         for small uppercase labels — now with matching tracking/size */
      .ftr__cols a,.ftr__cols button,
      .ftr__socials a,
      .ftr__base,
      .ftr__news-msg,
      .ftr__news-row input,
      .ftr__news-row input::placeholder{
        font-family:var(--utility);
        letter-spacing:.14em;
        text-transform:uppercase;
      }
      .ftr__base{font-weight:500;font-size:11px;line-height:1.4}
      .ftr__legal-links button,.ftr__legal-links a{
        font-family:var(--utility);
        letter-spacing:.14em;
        text-transform:uppercase;
      }

      /* --- 2) Studio statement: legible over any backdrop ---------- */
      .studio-slogan{overflow:visible;isolation:isolate}
      /* soft scrim sits behind the words, never over the figure edges */
      /* no white scrim — the slogan sits directly on the dark figure */
      .studio-slogan::before{display:none;content:none}
      .studio-slogan__tag{color:rgba(255,255,255,.82)}
      .studio-slogan__line{
        /* drop-shadow works on gradient-clipped text (text-shadow would
           bleed through the transparent glyph fill) */
        filter:drop-shadow(0 2px 10px rgba(0,0,0,.28))
               drop-shadow(0 1px 2px rgba(0,0,0,.18));
      }
      .studio-slogan__w--key{
        /* crisp white over the dark chrome figure */
        background:linear-gradient(96deg,#FFFFFF 0%,#F2F8FC 55%,#E4F1F8 100%);
        -webkit-background-clip:text;background-clip:text;
      }
      .studio-slogan__w--soft{font-size:0.46em;
        font-weight:400;
        color:rgba(255,255,255,.86);
      }
      .studio-slogan__rule{
        background:linear-gradient(90deg,rgba(220,242,252,.95),rgba(198,233,247,0));
      }
      /* fallback for engines without background-clip:text */
      @supports not ((-webkit-background-clip:text) or (background-clip:text)){
        .studio-slogan__w--key{
          background:none;color:#fff;-webkit-text-fill-color:currentColor;
        }
      }
      @media (prefers-contrast:more){
        .studio-slogan__w--key{
          background:none;color:#fff;-webkit-text-fill-color:#fff;
        }
        .studio-slogan__w--soft{font-size:0.46em;color:#fff}
      }

      /* --- 3) Responsive clean-up --------------------------------- */
      @media (max-width:900px){
        .studio-slogan::before{display:none;content:none}
        .ftr__hero h2{max-width:18ch}
      }
      @media (max-width:600px){
        .studio-slogan__line{line-height:.96;letter-spacing:-.03em}
        .studio-slogan__w--soft{font-size:0.46em;line-height:1.2;margin-top:.5em}
        .ftr__hero{padding-top:clamp(64px,10vh,110px)}
        .ftr__hero h2{font-size:clamp(30px,8.4vw,44px);max-width:none}
        .ftr__cols h3{font-size:22px}
        .ftr__news-lede{max-width:none}
        .ftr__base{gap:10px;line-height:1.6}
      }
      @media (max-width:400px){
        .studio-slogan__line{font-size:clamp(27px,9.6vw,38px)}
        .ftr__cols a,.ftr__cols button{padding:10px 12px}
      }
      /* short landscape phones: don't let the statement overflow */
      @media (max-height:520px) and (orientation:landscape){
        .studio-slogan__line{font-size:clamp(24px,5.4vh,40px)}
        .studio-slogan__rule{margin-top:12px}
      }
      @media (min-width:1560px){
        .ftr__cols{max-width:1240px}
        .ftr__hero h2{max-width:16ch}
      }

      /* ===============================================================
         HEADER TICKET CTA — "Frost Core"
         Ein einzelner, unverwechselbarer Einstiegspunkt in den Shop:
         rotierender Eis-Konus als Rand, geschliffener Kern, Licht-
         sweep beim Hover und ein langsamer Puls, der ihn im Augen-
         winkel lebendig hält, ohne zu blinken.
         =============================================================== */
      @property --tix-spin{syntax:"<angle>";inherits:false;initial-value:0deg}

      .hdr-tix{
        position:relative;flex:0 0 auto;display:inline-flex;
        margin-left:auto;
        padding:2px;border-radius:var(--r-pill,999px);
        isolation:isolate;text-decoration:none;
        -webkit-tap-highlight-color:transparent;
        transition:transform var(--dur-base,280ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
      }

      /* rotierender Konus-Rand */
      .hdr-tix__ring{
        position:absolute;inset:0;border-radius:inherit;z-index:0;
        background:conic-gradient(from var(--tix-spin),
          rgba(198,233,247,0) 0deg,
          rgba(198,233,247,.95) 62deg,
          rgba(119,190,221,.35) 120deg,
          rgba(198,233,247,0) 190deg,
          rgba(198,233,247,0) 330deg,
          rgba(255,255,255,.85) 360deg);
        animation:tixSpin 5.5s linear infinite;
        opacity:.85;
      }
      .hdr-tix__ring::after{
        content:"";position:absolute;inset:0;border-radius:inherit;
        background:radial-gradient(60% 120% at 50% 0%,rgba(198,233,247,.5),transparent 70%);
        filter:blur(9px);opacity:.55;
      }
      @keyframes tixSpin{to{--tix-spin:360deg}}

      /* geschliffener Kern */
      .hdr-tix__core{
        position:relative;z-index:2;display:inline-flex;align-items:center;
        gap:clamp(10px,1vw,14px);
        padding:clamp(13px,1.15vw,17px) clamp(22px,1.9vw,32px);
        border-radius:inherit;
        background:linear-gradient(152deg,#FFFFFF 0%,#D8F1FB 26%,var(--ice-1,#C6E9F7) 58%,var(--ice-2,#77BEDD) 100%);
        color:#06121A;
        font:700 clamp(11px,.86vw,13px)/1 var(--utility,"Space Grotesk",monospace);
        letter-spacing:.2em;text-transform:uppercase;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.9),
          inset 0 -1px 0 rgba(255,255,255,.14),
          0 10px 26px rgba(119,190,221,.28);
        transition:
          box-shadow var(--dur-base,280ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),
          background var(--dur-base,280ms) var(--ease-out,cubic-bezier(.16,1,.3,1));
      }
      .hdr-tix__label{position:relative;white-space:nowrap}
      .hdr-tix__arrow{
        display:inline-flex;color:#06121A;
        transition:transform var(--dur-base,280ms) var(--ease-spring,cubic-bezier(.34,1.32,.44,1));
      }

      /* Lichtsweep über den Kern */
      .hdr-tix__sheen{
        position:absolute;inset:2px;z-index:3;border-radius:inherit;
        overflow:hidden;pointer-events:none;
      }
      .hdr-tix__sheen::before{
        content:"";position:absolute;inset:-40%;
        background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
        transform:translateX(-130%);
        animation:tixSheen 5.5s var(--ease-out,cubic-bezier(.16,1,.3,1)) infinite;
      }
      @keyframes tixSheen{
        0%,62%{transform:translateX(-130%)}
        86%,100%{transform:translateX(130%)}
      }

      /* ruhiger Atem-Halo, damit der Button nie "tot" wirkt */
      .hdr-tix::after{
        content:"";position:absolute;inset:-8px;border-radius:inherit;z-index:-1;
        background:radial-gradient(50% 60% at 50% 50%,rgba(119,190,221,.4),transparent 72%);
        opacity:.4;animation:tixBreath 4.6s ease-in-out infinite;
        pointer-events:none;
      }
      @keyframes tixBreath{0%,100%{opacity:.28;transform:scale(.96)}50%{opacity:.6;transform:scale(1.04)}}

      @media (hover:hover) and (pointer:fine){
        .hdr-tix:hover{transform:translateY(-2px)}
        .hdr-tix:hover .hdr-tix__core{
          background:linear-gradient(152deg,#FFFFFF 0%,#E6F7FF 30%,var(--ice-1,#C6E9F7) 62%,#5FB2D8 100%);
          box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            inset 0 -1px 0 rgba(255,255,255,.16),
            0 18px 48px rgba(119,190,221,.5);
        }
        .hdr-tix:hover .hdr-tix__arrow{transform:translateX(5px)}
        .hdr-tix:hover .hdr-tix__ring{opacity:1;animation-duration:2.2s}
      }
      .hdr-tix:active{transform:translateY(0) scale(.978)}
      .hdr-tix:focus-visible{outline:none}
      .hdr-tix:focus-visible .hdr-tix__core{
        box-shadow:0 0 0 2px var(--ink,#FFFFFF),0 0 0 4px rgba(198,233,247,.95),0 0 26px rgba(119,190,221,.5);
      }

      /* Auf hellen Bild-Hero-Sektionen bekommt der Kern einen dunklen
         Kontaktschatten, damit er nie im Foto "absäuft". */
      .hdr[data-tone="light"] .hdr-tix__core{
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.9),
          0 2px 10px rgba(255,255,255,.35),
          0 12px 34px rgba(255,255,255,.28);
      }

      /* Platz schaffen: Burger rückt nach rechts neben den Button */
      .hdr .burger{margin-left:14px}
      @media (min-width:1025px){ .hdr-tix{margin-right:0} }

      @media (max-width:1024px){
        .hdr-tix__core{padding:12px 20px;letter-spacing:.16em}
      }
      @media (max-width:640px){
        .hdr-tix__core{padding:11px 15px;font-size:10px;letter-spacing:.14em;gap:8px}
        .hdr-tix__arrow svg{width:13px}
        .hdr-tix::after{display:none}
      }
      @media (max-width:380px){
        .hdr-tix__arrow{display:none}
        .hdr-tix__core{padding:10px 13px}
      }

      @media (prefers-reduced-motion:reduce){
        .hdr-tix__ring,.hdr-tix__sheen::before,.hdr-tix::after{animation:none !important}
        .hdr-tix__ring{opacity:.7}
        .hdr-tix{transform:none !important}
      }


      /* --- TICKET CTA v2: Signet, Doppelzeile, Frostkristalle -------- */
      .hdr-tix__core{
        gap:clamp(11px,1vw,15px);
        padding:clamp(10px,.95vw,14px) clamp(20px,1.8vw,30px);
        overflow:hidden;
      }
      /* geprägtes VSNZ-Signet im Kern */
      .hdr-tix__mark{
        position:relative;display:inline-flex;align-items:center;
        flex:0 0 auto;height:clamp(22px,2vw,30px);
      }
      .hdr-tix__mark svg{
        height:100%;width:auto;display:block;
        fill:#06121A;
        filter:drop-shadow(0 1px 0 rgba(255,255,255,.85));
        transition:transform var(--dur-slow,520ms) var(--ease-spring,cubic-bezier(.34,1.32,.44,1));
      }
      /* Trennkante zwischen Signet und Schrift */
      .hdr-tix__mark::after{
        content:"";position:absolute;right:calc(-1 * clamp(6px,.5vw,8px));top:8%;bottom:8%;
        width:1px;background:linear-gradient(180deg,transparent,rgba(6,18,26,.32),transparent);
      }
      .hdr-tix__stack{display:inline-flex;flex-direction:column;gap:4px;text-align:left}
      .hdr-tix__label{font-size:inherit;letter-spacing:.2em;line-height:1}
      .hdr-tix__sub{
        font:500 clamp(8px,.62vw,9.5px)/1 var(--utility,"Space Grotesk",monospace);
        letter-spacing:.28em;text-transform:uppercase;
        color:rgba(6,18,26,.62);white-space:nowrap;
      }
      .hdr-tix__sub::before{content:"[ ";opacity:.5}
      .hdr-tix__sub::after{content:" ]";opacity:.5}

      /* driftende Frostkristalle über dem Kern */
      .hdr-tix__frost{
        position:absolute;inset:2px;z-index:4;border-radius:inherit;
        overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.75;
        background-image:
          radial-gradient(1.4px 1.4px at 14% 30%,#fff 60%,transparent 61%),
          radial-gradient(1px 1px at 42% 72%,#fff 60%,transparent 61%),
          radial-gradient(1.6px 1.6px at 68% 22%,#fff 60%,transparent 61%),
          radial-gradient(1px 1px at 88% 62%,#fff 60%,transparent 61%),
          radial-gradient(1.2px 1.2px at 30% 88%,#fff 60%,transparent 61%);
        animation:tixFrost 9s linear infinite;
      }
      @keyframes tixFrost{
        0%{background-position:0 -12px,0 -12px,0 -12px,0 -12px,0 -12px;opacity:0}
        18%,74%{opacity:.7}
        100%{background-position:6px 14px,-5px 14px,4px 14px,-6px 14px,5px 14px;opacity:0}
      }

      /* Eiskanten-Facette am unteren Rand des Kerns */
      .hdr-tix__core::after{
        content:"";position:absolute;left:8%;right:8%;bottom:0;height:38%;z-index:-1;
        background:linear-gradient(180deg,transparent,rgba(95,178,216,.55));
        filter:blur(4px);
      }

      @media (hover:hover) and (pointer:fine){
        .hdr-tix:hover .hdr-tix__mark svg{transform:rotate(180deg) scale(1.08)}
        .hdr-tix:hover .hdr-tix__frost{animation-duration:3.4s;opacity:1}
        .hdr-tix:hover .hdr-tix__sub{color:rgba(6,18,26,.85)}
      }

      @media (max-width:1024px){
        .hdr-tix__sub{display:none}
        .hdr-tix__stack{gap:0}
      }
      @media (max-width:640px){
        .hdr-tix__mark{height:20px}
        .hdr-tix__mark::after{display:none}
        .hdr-tix__core{gap:9px}
      }
      @media (max-width:380px){
        .hdr-tix__label{display:none}
        .hdr-tix__mark::after{display:none}
        .hdr-tix__core{padding:10px 14px}
      }
      @media (prefers-reduced-motion:reduce){
        .hdr-tix__frost{animation:none !important;opacity:.5}
        .hdr-tix__mark svg{transition:none}
      }


      /* --- Ticket CTA: fettere, kräftigere Schrift ------------------ */
      .hdr-tix__core{
        font-family:var(--display,"Inter Tight",sans-serif);
        font-weight:800;
        font-size:clamp(13px,1.05vw,16px);
      }
      .hdr-tix__label{
        font-family:var(--display,"Inter Tight",sans-serif);
        font-weight:800;
        font-size:inherit;
        letter-spacing:.13em;
        -webkit-text-stroke:.35px #06121A;
      }
      .hdr-tix__sub{
        font-weight:700;
        font-size:clamp(8.5px,.66vw,10px);
        letter-spacing:.24em;
        color:rgba(6,18,26,.7);
      }
      @media (max-width:640px){
        .hdr-tix__core{font-size:12px}
        .hdr-tix__label{letter-spacing:.1em}
      }


      /* =====================================================================
         06. BIG IMAGE v1 — Fullbleed-Medien & Sheen
         ===================================================================== */
      :root{
        --fx-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
        --bleed:calc(50% - 50vw);
        --hair:1px;
      }

      /* ============================================================
         A) EFFEKT-LINEUP für jedes Foto (.ph--img)
         1 · Reverse-Zoom (JS schreibt --zoom, hier nur der Transform)
         2 · Cinematic Grade (Kontrast/Sättigung, kühler Ice-Cast)
         3 · Film Grain (statisch, GPU-günstig, kein Blur)
         4 · Inset-Vignette statt Overlay → Bild bleibt scharf
         5 · Reveal: Clip-Wipe + Grade-Ramp beim Eintritt
         6 · Specular Sweep beim Hover
         7 · Hairline-Frame, der sich beim Reveal aufzieht
         ============================================================ */
      .ph--img{
        position:relative;isolation:isolate;
        background:#0A0E12;
        --fx-vig:.55;
      }
      .ph img{
        transform:scale(var(--zoom,1.34));
        transform-origin:50% 50%;
        image-rendering:auto;
        -webkit-transform:translateZ(0) scale(var(--zoom,1.34));
        backface-visibility:hidden;
      }
      /* 2 · Grade — bewusst nur Farbe/Kontrast, nie Blur: bleibt knackscharf */
      .ph--img > img{
        filter:contrast(1.09) saturate(1.06) brightness(.97);
        transition:filter .9s var(--rv-ease),opacity .6s var(--ease);
      }
      /* 3 + 4 · Grain + Vignette in einer Compositor-Ebene */
      .ph--img::before{
        content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
        background-image:var(--fx-grain);
        background-size:170px 170px;
        opacity:.17;mix-blend-mode:overlay;
      }
      .ph--img::after{
        content:"";display:block !important;position:absolute;inset:0;z-index:3;pointer-events:none;
        background:
          radial-gradient(120% 92% at 50% 46%,rgba(255,255,255,0) 38%,rgba(255,255,255,var(--fx-vig)) 100%),
          linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 62%,rgba(255,255,255,.42) 100%);
        transform:none;left:0;top:0;
        border:0;padding:0;font:inherit;letter-spacing:0;
        box-shadow:inset 0 0 0 var(--hair) rgba(198,233,247,.14);
        transition:box-shadow .9s var(--rv-ease);
      }
      /* Hero, Frost-Backdrops & Studio behalten ihre eigene Behandlung */
      .hero .ph--img::after,.frost__bg .ph--img::after,.studio-hero .ph--img::after{
        background:none;box-shadow:none;
      }
      .hero .ph--img::before{opacity:.12}

      /* 6 · Specular Sweep */
      .ph--img .fx-sheen{
        position:absolute;inset:-30% -60%;z-index:4;pointer-events:none;opacity:0;
        background:linear-gradient(104deg,transparent 38%,rgba(16,22,26,.16) 48%,rgba(198,233,247,.28) 52%,transparent 62%);
        transform:translateX(-38%);
        transition:opacity .5s var(--ease),transform 1.15s var(--rv-ease);
      }
      .card:hover .ph--img .fx-sheen,
      .proj:hover .ph--img .fx-sheen,
      .rail > figure:hover .ph--img .fx-sheen,
      .brand-gallery__item:hover .fx-sheen,
      .journey:hover .fx-sheen,
      .lu:hover .fx-sheen{opacity:1;transform:translateX(38%)}

      /* 5 + 7 · Reveal-Choreografie */
      .fx-rise{clip-path:inset(0 0 0 0)}
      /* Deaktiviert (siehe Script weiter unten): kein dauerhaftes 92%-Clipping mehr */
      .fx-rise:not(.fx-in){clip-path:inset(0 0 0 0)}
      .fx-rise:not(.fx-in) > img{filter:contrast(1.4) saturate(.25) brightness(.6)}
      .fx-rise:not(.fx-in)::after{box-shadow:inset 0 0 0 var(--hair) rgba(198,233,247,0)}
      .fx-rise{transition:clip-path 1.15s var(--rv-ease)}
      .fx-rise.fx-in::after{box-shadow:inset 0 0 0 var(--hair) rgba(198,233,247,.2)}

      /* ============================================================
         B) VOLLFLÄCHIG — Medien brechen aus dem Grid aus,
            Hairline-Fugen statt Gaps, deutlich grössere Ratios
         ============================================================ */
      .fullbleed{
        width:100vw;margin-left:var(--bleed);margin-right:var(--bleed);
        max-width:none;
      }
      /* Rail: fast bildschirmbreite Kacheln */
      .rail{gap:6px}
      .rail > figure{flex:0 0 min(84vw,1080px)}
      .rail .ph{aspect-ratio:16/10;border-radius:0}
      .rail figcaption{margin-top:14px;padding-left:2px}

      /* Show-Gallery */
      .show__gallery{gap:6px !important}
      .show__gallery .ph{aspect-ratio:3/4;border-radius:0}

      /* Brand-Gallery: 2 Spalten, monumental */
      .brand-gallery{grid-template-columns:repeat(2,1fr);gap:6px;margin-top:clamp(28px,3.4vw,56px)}
      .brand-gallery__item{aspect-ratio:4/5;border-radius:0;border-color:transparent}
      .brand-gallery__item:first-child{grid-column:1 / -1;aspect-ratio:21/9}

      /* Journeys */
      .journeys{gap:6px}
      .journey{background:transparent;border:0}
      .journey img{aspect-ratio:4/5;min-height:min(58vh,620px)}
      .journeys--video .journey img{aspect-ratio:16/9;min-height:0}
      .journey__body{padding:18px 2px 26px}

      /* Merch / Cards */
      .grid3{gap:6px}
      .card .ph{aspect-ratio:3/4;border-radius:0}
      .card__frame{border-radius:0}

      /* Projekte */
      .proj{aspect-ratio:4/5;border-radius:0}

      /* Line-up Karten behalten ihren Radius — das sind freistehende
         Kacheln, keine randlosen Vollflächen-Medien. */

      /* SDN-Frames dürfen komplett randlos werden */
      .sdn__frame{border-radius:calc(var(--p,0) * 6px)}

      @media (max-width:820px){
        .brand-gallery{grid-template-columns:1fr}
        .brand-gallery__item:first-child{aspect-ratio:4/5}
        .journey img{min-height:min(52vh,480px)}
        .rail > figure{flex-basis:88vw}
      }
      @media (prefers-reduced-motion:reduce){
        .fx-rise,.fx-rise:not(.fx-in){clip-path:none}
        .fx-rise:not(.fx-in) > img{filter:none}
        .ph--img .fx-sheen{display:none}
      }

      /* ============================================================
         C) TICKETSHOP — Wave 1 liegt auf dem Bild, nur abgedunkelt
         ============================================================ */
      .sdn--event .sdn__stick{isolation:isolate}
      .sdn--event .sdn__frame::before{
        content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
        background:
          linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.28) 34%,rgba(255,255,255,.62) 100%),
          radial-gradient(78% 62% at 50% 52%,rgba(255,255,255,.62) 0%,rgba(255,255,255,.18) 70%,rgba(255,255,255,0) 100%);
        opacity:calc(.5 + var(--p,0) * .5);
      }
      .sdn--event .sdn__frame img{filter:contrast(1.06) saturate(.94) brightness(.88)}

      .ticket-over{
        position:absolute;z-index:6;left:50%;top:50%;
        transform:translate(-50%,-50%);
        width:min(560px,calc(100% - 2 * var(--gut)));
        display:block;
        opacity:clamp(0,calc((var(--p,0) - .16) * 3.2),1);
        transition:opacity .3s linear;
        pointer-events:auto;
      }
      .ticket-over .ticket-card{
        max-width:none;margin:0;
        background:rgba(255,255,255,.42);
        border-color:rgba(16,22,26,.26);
        box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
        transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .16) * 3.2),1)) * 22px));
        transition:transform .3s linear,border-color .35s var(--ease),background .35s var(--ease);
      }
      .ticket-over .ticket-card:hover{
        background:rgba(255,255,255,.56);
        border-color:rgba(198,233,247,.5);
      }
      .ticket-over .ticket-card__label,
      .ticket-over .ticket-card__meta{color:rgba(16,22,26,.86)}
      .ticket-over .ticket-card__code,
      .ticket-over .ticket-card__fine{color:rgba(16,22,26,.66)}
      .ticket-over .tier__dots{border-bottom-color:rgba(16,22,26,.3)}
      /* der "Keep scrolling"-Hinweis weicht der Karte */
      .sdn--event .sdn__label{opacity:calc((1 - var(--p,0) * 1.6) * (1 - clamp(0,calc((var(--p,0) - .16) * 3.2),1)))}

      /* Mobile-Behandlung siehe Block 22 (Klarschliff Mobile) */

      /* ============================================================
         D) FOOTER — auf die neue Schrift gezogen
            (Display: tight, uppercase, negatives Tracking wie
             .studio-slogan / .hero__h1 · Utility: 12px / .22em)
         ============================================================ */
      .ftr__bg{inset:0;height:100%}
      .ftr__scrim{
        background:
          linear-gradient(180deg,var(--ink) 0%,rgba(255,255,255,.72) 26%,rgba(255,255,255,.82) 68%,var(--ink) 100%);
      }
      .ftr__hero h2,
      .ftr__hero h2 .mask-inner{
        font:700 clamp(38px,7vw,116px)/.9 var(--display) !important;
        letter-spacing:-.045em !important;
        text-transform:uppercase;
        max-width:13ch;
        text-wrap:balance;
      }
      .ftr__hero h2 .mask-inner{
        background:linear-gradient(96deg,#10161A 0%,#2F4552 44%,#5FB2D8 100%);
        -webkit-background-clip:text;background-clip:text;
        color:transparent;-webkit-text-fill-color:transparent;
      }
      .ftr__cols h3{
        font:700 clamp(20px,2vw,30px)/1 var(--display) !important;
        letter-spacing:-.02em !important;
        text-transform:uppercase;
        color:var(--frost);
        margin-bottom:20px;
      }
      .ftr__news-lede{
        font-family:var(--display);
        font-size:clamp(14px,1.02vw,17px);
        line-height:1.55;
        letter-spacing:-.005em;
        color:rgba(16,22,26,.62);
      }
      .ftr__cols a,.ftr__cols button,
      .ftr__socials a,
      .ftr__base,.ftr__base span,
      .ftr__legal-links button,.ftr__legal-links a,
      .ftr__news-msg,
      .ftr__news-row input,
      .ftr__news-row input::placeholder{
        font-family:var(--utility) !important;
        font-weight:500;
        letter-spacing:.22em !important;
        text-transform:uppercase;
      }
      .ftr__socials a,.ftr__cols a,.ftr__cols button{font-size:11px}
      .ftr__news-row input{font-size:12px;letter-spacing:.16em !important}
      .ftr__base{font-size:11px;color:rgba(16,22,26,.5)}
      @media (max-width:700px){
        .ftr__hero h2,.ftr__hero h2 .mask-inner{font-size:clamp(34px,11vw,60px) !important;max-width:none}
      }


      /* =====================================================================
         07. KLARSCHLIFF v1 — A11y-Fallbacks & Media-Budget
         ===================================================================== */
      /* ------------------------------------------------------------
         1) Ticket-Overlay: sichtbar in JEDER Version
            --p wird nur von der rAF-Schleife geschrieben. Ohne JS, bei
            prefers-reduced-motion und in Print bleibt es 0 — die Karte
            wäre unsichtbar, aber fokussierbar. Darum drei Fallbacks.
         ------------------------------------------------------------ */
      .ticket-over:focus-within{opacity:1 !important}
      .ticket-over:focus-within .ticket-card{transform:none !important}
      @media (prefers-reduced-motion:reduce){
        .ticket-over{
          position:relative;left:auto;top:auto;transform:none;
          opacity:1 !important;
          margin:clamp(-80px,-8vh,-48px) auto 0;
        }
        .ticket-over .ticket-card{transform:none !important;background:rgba(255,255,255,.74)}
        .sdn--event .sdn__frame::before{opacity:.72}
        .sdn--event .sdn__label{opacity:0}
      }
      @media print{
        .ticket-over{position:relative;opacity:1 !important;transform:none}
        .ticket-over .ticket-card{transform:none !important}
      }
      /* Ohne JS gibt es kein --p: Karte statisch unter das Bild setzen. */
      html.no-js .ticket-over{
        position:relative;left:auto;top:auto;transform:none;opacity:1;
        margin:clamp(-80px,-8vh,-48px) auto 0;
      }
      @media (max-width:820px){
        html.no-js .ticket-over{margin:clamp(18px,4vw,28px) auto 0}
      }
      html.no-js .ticket-over .ticket-card{transform:none;background:rgba(255,255,255,.74)}

      /* ------------------------------------------------------------
         2) Media-Budget auf allen Breiten, nicht nur Mobile.
            Offscreen-Galerien werden erst gerendert, wenn sie in die
            Nähe des Viewports kommen — mit reservierter Höhe, damit
            der Scrollbalken nicht springt (CLS = 0).
         ------------------------------------------------------------ */
      /* .rail bewusst ausgenommen: content-visibility verfälscht die
         Scroll-Snap-Messung im horizontalen Rail. */
      .journeys,.show__gallery,.brand-gallery,#page-merch .grid3{
        content-visibility:auto;
        contain-intrinsic-size:auto 70vh;
      }
      /* Sichtbare Ratio steht schon vor dem Dekodieren fest → kein Layout-Shift */
      .journey img{aspect-ratio:4/5}
      .journeys--video .journey img{aspect-ratio:16/9}
      .partners__logo img{aspect-ratio:auto}

      /* ------------------------------------------------------------
         3) WINTER ARC — auf grossen Screens wirklich gross.
            Der Frame schrumpfte auf 76vw / 62vh und wirkte ab ~1600px
            wie eine Briefmarke im Weissraum. Jetzt skaliert das
            Endformat mit der Viewportbreite mit.
         ------------------------------------------------------------ */
      @media (min-width:1440px){
        .sdn--event .sdn__frame{--sdn-w:min(92vw,1720px);--sdn-h:min(80vh,940px)}
      }
      @media (min-width:1920px){
        .sdn--event .sdn__frame{--sdn-w:min(94vw,2200px);--sdn-h:min(84vh,1180px)}
      }
      @media (min-width:2560px){
        .sdn--event .sdn__frame{--sdn-w:min(95vw,2800px);--sdn-h:min(86vh,1440px)}
      }
      /* Karte wächst mit, sonst schwimmt sie im XXL-Frame */
      @media (min-width:1440px){
        .ticket-over{width:min(620px,calc(100% - 2 * var(--gut)))}
        .ticket-over .ticket-card{padding:34px 34px 32px}
      }
      @media (min-width:1920px){
        .ticket-over{width:min(720px,calc(100% - 2 * var(--gut)))}
        .ticket-over .ticket-card{padding:40px 40px 38px}
        .ticket-over .ticket-card__title{font-size:clamp(30px,2vw,38px)}
      }
      /* Auf Ultrawide bleibt die Bühne mittig statt auszufransen */
      @media (min-width:2200px){
        .sdn--event .sdn__stick{max-width:2800px;margin-inline:auto}
      }


      /* =====================================================================
         08. KLARSCHLIFF MOBILE v1 — Mobile-Feinschliff
         ===================================================================== */
      /* ------------------------------------------------------------
         Auf Touch-Breiten wird aus der Sticky-Bühne ein statischer
         Block. Drei Dinge müssen dafür zusammen zurückgesetzt werden,
         sonst schneidet der Stick die Karte ab (overflow) bzw. bleibt
         eine leere Scrollstrecke stehen (height:200vh):
           .sdn        → height:auto     (kein Leerraum mehr)
           .sdn__stick → height:auto + overflow:visible (kein Clipping)
           .sdn__frame → feste Ratio statt --p-Rechnung
         ------------------------------------------------------------ */
      @media (max-width:820px){
        .sdn--event{height:auto;margin-bottom:clamp(48px,7vw,80px)}
        .sdn--event .sdn__stick{
          position:relative;top:auto;
          height:auto;min-height:0;
          display:block;overflow:visible;padding:0;
        }
        .sdn--event .sdn__frame{
          width:100%;height:auto;
          aspect-ratio:4/5;
          border-radius:14px;
          box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
        }
        .sdn--event .sdn__frame img{
          position:absolute;inset:0;
          width:100%;height:100%;object-fit:cover;
          transform:none !important;
        }
        .sdn--event .sdn__frame::before{opacity:.3}
        .sdn--event .sdn__label{display:none}

        /* Karte überlappt das Bild von unten, statt darin zu schwimmen */
        .ticket-over{
          position:relative;left:auto;top:auto;transform:none;
          opacity:1 !important;
          width:min(520px,calc(100% - 24px));
          margin:clamp(18px,4vw,28px) auto 0;
          z-index:6;
        }
        .ticket-over .ticket-card{
          transform:none !important;
          padding:24px 22px 24px;
          background:rgba(255,255,255,.03);
          border-color:rgba(16,22,26,.18);
          box-shadow:none;
          border-radius:14px;
        }
        /* Kopfzeile darf nicht mehr auf eine Zeile gequetscht werden */
        .ticket-over .ticket-card__head{
          flex-wrap:wrap;gap:6px 12px;
          padding-bottom:14px;margin-bottom:18px;
        }
        .ticket-over .ticket-card__label{letter-spacing:.2em}
        .ticket-over .ticket-card__code{letter-spacing:.14em}
        .ticket-over .ticket-card__title{font-size:clamp(24px,7vw,30px);margin-bottom:10px}
        .ticket-over .ticket-card__meta{
          font-size:12px;line-height:1.5;letter-spacing:.12em;
          margin-bottom:22px;text-wrap:balance;
        }
        .ticket-over .ticket-card__tiers{gap:13px;margin-bottom:20px}
        .ticket-over .ticket-card__fine{margin-bottom:22px;line-height:1.55}
        .ticket-over .ticket-card__badges{margin-bottom:18px}
      }

      /* Sehr schmale Geräte: Ratio kürzer, Karte darf mehr Breite nehmen */
      @media (max-width:420px){
        .sdn--event .sdn__frame{aspect-ratio:1/1;border-radius:12px}
        .ticket-over{width:calc(100% - 20px);margin-top:16px}
        .ticket-over .ticket-card{padding:22px 18px;border-radius:12px}
        .ticket-over .ticket-card__meta{letter-spacing:.1em}
      }

      /* Landscape-Phone: hohe Ratio wäre höher als der Screen */
      @media (max-width:900px) and (orientation:landscape){
        .sdn--event .sdn__frame{aspect-ratio:16/9}
        .ticket-over{margin-top:18px}
      }

      /* Reduced Motion & no-JS erben dasselbe statische Layout —
         inklusive der beiden Resets, die vorher gefehlt haben. */
      @media (prefers-reduced-motion:reduce){
        .sdn--event{height:auto}
        .sdn--event .sdn__stick{height:auto;min-height:0;overflow:visible;display:block}
        .sdn--event .sdn__frame{width:100%;height:auto;aspect-ratio:16/10;border-radius:14px}
        .sdn--event .sdn__frame img{position:absolute;inset:0;width:100%;height:100%}
      }
      /* Überlappung nur ab Tablet — mobil bleibt es gestapelt */
      @media (prefers-reduced-motion:reduce) and (min-width:821px){
        .ticket-over{margin-top:clamp(-90px,-6vw,-56px);width:min(560px,calc(100% - 32px))}
        .ticket-over .ticket-card{background:rgba(10,14,18,.92)}
      }
      @media (prefers-reduced-motion:reduce) and (max-width:820px){
        .ticket-over{margin-top:clamp(18px,4vw,28px)}
      }
      html.no-js .sdn--event{height:auto}
      html.no-js .sdn--event .sdn__stick{height:auto;min-height:0;overflow:visible;display:block}
      html.no-js .sdn--event .sdn__frame{width:100%;height:auto;aspect-ratio:16/10;border-radius:14px}
      html.no-js .sdn--event .sdn__frame img{position:absolute;inset:0;width:100%;height:100%}
      @media (min-width:821px){
        html.no-js .ticket-over .ticket-card{background:rgba(10,14,18,.92)}
      }
      @media (max-width:820px){
        html.no-js .ticket-over{margin-top:clamp(18px,4vw,28px)}
      }

      /* Touch: kein Hover-State, dafür sichtbares Feedback beim Tap */
      @media (hover:none){
        .ticket-over .ticket-card:active{
          background:rgba(10,14,18,.98);
          border-color:rgba(198,233,247,.45);
        }
        .ph--img .fx-sheen{display:none}
      }

      /* --- Mobile final: Bild und Shop stehen getrennt, nie überlappend --- */
      @media (max-width:820px){
        .ticket-over{margin-top:clamp(18px,4vw,28px) !important}
      }

      /* ===============================================================
         17. TZOOM v2 — „EINSCHWEISSEN", entstockt & verlängert
         ---------------------------------------------------------------
         Problem vorher: .tzoom war 110vh hoch, der Sticky-Child 100vh.
         Scrollweg = height - vh = 10vh. Die komplette Choreografie
         (Zusammenbau → Naht → Zoom → Fade) musste sich also auf ~100px
         Scroll quetschen: jedes Mausrad-Tick sprang mehrere Prozent
         --p weiter, der Lerp hinkte hinterher → Stocken.
         Auf Mobile war height (78vh) sogar KLEINER als der Stick (85vh),
         d.h. distance < 0 → --p schnappte hart auf 1.

         Jetzt: langer Scrollweg, neu getimte Phasen, GPU-freundlich.
         Nach wie vor: kein neues JS, alles hängt an --p.
         =============================================================== */

      .tzoom{height:340vh}
      .tzoom__stick{
        height:100vh;height:100svh;
        overflow:clip;
        contain:paint;
        perspective:1200px;
      }
      @media (max-width:1024px){
        .tzoom{height:300vh}
        .tzoom__stick{height:100vh;height:100svh}
      }
      @media (max-width:640px){
        .tzoom{height:260vh}
        .tzoom__stick{height:100vh;height:100svh}
        .tzoom__logo{width:clamp(140px,50vw,240px)}
      }

      /* ---- Timeline ---------------------------------------------------
         .00 – .30  Segmente fliegen herein und verriegeln
         .10 – .36  Schweißnaht zeichnet sich
         .18 – .50  Lichtbogen fährt über die Mittelnaht
         .22 – .70  Naht glüht auf und kühlt aus
         .34 – 1.0  Zoom durch die Kamera (quadratisch beschleunigt)
         .80 – 1.0  Ausblenden
         ------------------------------------------------------------- */
      .tzoom__logo{
        position:relative;
        width:clamp(150px,26vw,320px);
        --asm:clamp(0,calc((.30 - var(--p,0)) / .30),1);
        /* asm² → weicher Anflug, sattes Einrasten statt linearem Ruck */
        --asm2:calc(var(--asm) * var(--asm));
        --weld:calc(
          clamp(0,calc((var(--p,0) - .22) / .14),1) *
          clamp(0,calc((.70 - var(--p,0)) / .18),1)
        );
        --zr:clamp(0,calc((var(--p,0) - .34) / .66),1);
        /* mehr Wucht im Zoom-Through: schneller Einstieg, brutaler Endspurt */
        --zoom:calc(var(--zr) * 1.3 + var(--zr) * var(--zr) * 4.6);
        transform:translateZ(0) scale(calc(.7 + var(--zoom)));
        opacity:calc(1 - clamp(0,calc((var(--p,0) - .80) / .20),1));
        /* drop-shadow auf einem 3-fach skalierten SVG ist teuer und der
           zweite große Stocker — der Schein läuft jetzt über die
           kompositierten Glow-Layer unten. */
        filter:none;
        will-change:transform,opacity;
        backface-visibility:hidden;
      }

      /* SVG-Filter töten: feGaussianBlur wurde bei jedem Frame neu
         gerastert, während das Element hochskaliert — Hauptursache
         für die Ruckler im Zoom. */
      .vz__welds{filter:none !important}
      .vz{overflow:visible;transform:rotate(calc(var(--asm2) * -15deg))}

      /* ---- Segmente: weiter draußen, härter rotiert, größer im Anflug --- */
      .vz__seg{
        filter:none;
        opacity:calc(1 - var(--asm) * .9);
      }
      .vz__seg--1{transform:translate(calc(var(--asm2) * -150px),calc(var(--asm2) * -68px)) rotate(calc(var(--asm2) * -52deg)) scale(calc(1 + var(--asm2) * .5))}
      .vz__seg--2{transform:translate(calc(var(--asm2) * -76px),calc(var(--asm2) *  92px)) rotate(calc(var(--asm2) *  38deg)) scale(calc(1 + var(--asm2) * .32))}
      .vz__seg--3{transform:translate(calc(var(--asm2) *  150px),calc(var(--asm2) * -68px)) rotate(calc(var(--asm2) *  52deg)) scale(calc(1 + var(--asm2) * .5))}
      .vz__seg--4{transform:translate(calc(var(--asm2) *  76px),calc(var(--asm2) *  92px)) rotate(calc(var(--asm2) * -38deg)) scale(calc(1 + var(--asm2) * .32))}

      /* ---- Schweißnaht: dicker, greller ---------------------------- */
      .vz__weld{
        stroke-width:calc(.5 + var(--weld) * 3.2);
        stroke-dashoffset:calc(300 - clamp(0,calc((var(--p,0) - .10) / .26),1) * 300);
        opacity:calc(var(--weld) * 1);
      }

      /* ---- Lichtbogen: weiter Schwung, breiterer Blitz --------------- */
      .vz__arc{
        opacity:calc(var(--weld) * 1);
        transform:translateY(calc(-96px + clamp(0,calc((var(--p,0) - .18) / .32),1) * 192px))
                  scaleX(calc(1 + var(--weld) * 4.2));
      }

      /* ---- Glow-Layer statt Filter: reine Composite-Properties, deutlich heller --- */
      .tzoom__stick::after{
        width:clamp(150px,26vw,320px);
        background:radial-gradient(circle,rgba(198,233,247,.62) 0%,rgba(119,190,221,.26) 40%,transparent 68%);
        opacity:calc(var(--weld,0) * 1);
        transform:scale(calc(.45 + var(--weld,0) * 2.6 + var(--zr,0) * 5.6));
        will-change:transform,opacity;
      }
      /* Schockwelle: kräftigerer Ring, der im Moment des Verriegelns aufreißt */
      .tzoom__stick::before{
        content:"";
        position:absolute;left:50%;top:50%;
        width:clamp(150px,26vw,320px);aspect-ratio:1;
        translate:-50% -50%;
        pointer-events:none;
        border-radius:50%;
        border:2px solid rgba(198,233,247,.85);
        box-shadow:0 0 40px rgba(198,233,247,.5),inset 0 0 30px rgba(198,233,247,.25);
        --ring:clamp(0,calc((var(--p,0) - .26) / .26),1);
        opacity:calc((1 - var(--ring)) * clamp(0,calc((var(--p,0) - .26) / .05),1) * .9);
        transform:scale(calc(.3 + var(--ring) * 4.4));
        will-change:transform,opacity;
      }
      /* Zweiter, verzögerter Schockring — verdoppelt die Wucht des Einrastens */
      .tzoom__stick{position:sticky}
      .tzoom__logo::after{
        content:"";
        position:absolute;left:50%;top:50%;
        width:clamp(150px,26vw,320px);aspect-ratio:1;
        transform:translate(-50%,-50%) scale(calc(.2 + clamp(0,calc((var(--p,0) - .30) / .22),1) * 5.2));
        border-radius:50%;
        border:1px solid rgba(119,190,221,.6);
        opacity:calc((1 - clamp(0,calc((var(--p,0) - .30) / .22),1)) * clamp(0,calc((var(--p,0) - .30) / .04),1) * .6);
        pointer-events:none;
      }

      @media (prefers-reduced-motion:reduce){
        .tzoom{height:auto}
        .tzoom__stick{position:relative;height:auto;min-height:70vh;min-height:70svh}
        .tzoom__stick::before{display:none !important}
        .tzoom__logo::after{display:none !important}
        .vz{transform:none !important}
      }

      /* ===============================================================
         18. PERFORMANCE LAYER — „immer flüssig"
         Rein additiv, ändert kein Layout und kein Markup. Zielt auf die
         drei Dinge, die auf schwacher Hardware tatsächlich Frames kosten:
         Paint-Fläche, Backdrop-Filter und Layer-Explosion.
         =============================================================== */

      /* --- 1. Offscreen-Sektionen überspringen ----------------------
         content-visibility:auto lässt den Browser Layout/Paint/Style für
         alles überspringen, was nicht in der Nähe des Viewports ist. Bei
         einer Seite dieser Länge ist das der mit Abstand größte Hebel.
         contain-intrinsic-size mit `auto` merkt sich die zuletzt real
         gerenderte Höhe → kein Scrollbar-Springen.
         Sticky-/pin-basierte Sektionen sind bewusst ausgenommen: die
         messen ihre eigene Höhe im JS. Fällt :has() aus (alte Engine),
         wird die ganze Regel verworfen — sauberer Fallback, nichts bricht. */
      @supports (content-visibility:auto) and selector(:has(*)){
        .sect:not(:has(.sdn,.itp,.tzoom,.merch-pin,.archive-zoom,[data-scroll-progress])){
          content-visibility:auto;
          contain-intrinsic-size:auto 800px;
        }
      }

      /* --- 2. Backdrop-Filter entschärfen ---------------------------
         Der Header liegt fix über dem gesamten scrollenden Inhalt, sein
         Blur wird also bei JEDEM Frame neu berechnet — über die volle
         Seitenbreite. Radius runter, den zweiten Saturate-Pass raus, und
         vor allem: backdrop-filter NICHT mehr animieren. Ein
         transitionierter Backdrop-Filter zwingt den Compositor über die
         gesamte Übergangsdauer in einen Neu-Blur pro Frame. */
      .hdr{
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        transition:background .45s var(--ease),border-color .45s var(--ease),
                   color .45s var(--ease),box-shadow .45s var(--ease);
      }
      .hdr[data-solid="true"]{
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
      }
      /* Mobile GPUs stolpern über großflächige Backdrop-Blurs zuverlässig.
         Dort ersetzt eine etwas dichtere Fläche den Effekt — optisch fast
         identisch, kostet null pro Frame. */
      @media (max-width:900px){
        .hdr,.hdr[data-solid="true"]{
          backdrop-filter:none !important;
          -webkit-backdrop-filter:none !important;
        }
        .hdr[data-solid="true"]{background:rgba(255,255,255,.88)}
        .glass{
          backdrop-filter:none !important;
          -webkit-backdrop-filter:none !important;
          background:linear-gradient(150deg,rgba(30,40,48,.92),rgba(16,22,28,.88));
        }
        .liquid:hover img{filter:none}
      }

      /* --- 3. Paint-Isolation für wiederholte Karten ----------------
         `contain` sagt dem Browser, dass sich Änderungen in diesen Boxen
         niemals nach außen auswirken können. Damit bleibt ein Hover oder
         ein Reveal ein lokaler Repaint statt einer Neuberechnung des
         Dokumentflusses. */
      .journey,.bento__cell,.rail > figure,.ticket-card,.proj{
        contain:layout paint;
      }
      .ph{contain:paint}

      /* --- 4. Transform-Hints nur dort, wo wirklich animiert wird ---
         Jedes permanente will-change erzeugt eine eigene Compositor-Ebene
         und damit VRAM-Druck; zu viele davon sind selbst eine Ruckelquelle.
         Hover-Effekte brauchen keine Dauer-Ebene — der Hint wird erst beim
         Hover gesetzt und danach wieder freigegeben. */
      .journey,.bento__cell,.rail > figure,.gal__ctrl button,.lineup__nav button{
        will-change:auto;
      }
      .journey:hover,.bento__cell:hover,.rail > figure:hover{
        will-change:transform;
      }

      /* --- 5. Bilder nie vom Rendering ausschliessen ----------------- */
      img{content-visibility:visible}

      /* --- 6. Scroll-Ketten kappen ----------------------------------
         Verhindert, dass ein zu Ende gescrolltes Karussell den Scroll an
         das Dokument weiterreicht — auf Touch der häufigste Grund für
         „hängt kurz". */
      .rail,.ticket-over{overscroll-behavior:contain}

      /* --- 7. Reduced motion: Loop parkt sowieso, hier nur aufräumen - */
      @media (prefers-reduced-motion:reduce){
        .journey,.bento__cell,.rail > figure{will-change:auto !important}
        .hdr{transition:none}
      }


      /* =====================================================================
         09. FX v1 — Aurora / Glacier Layer
         ===================================================================== */
      /* ---------- 1. Aurora-Bänder in allen .frost-Sektionen ---------- */
      .fx-aurora{position:absolute;inset:-20% -10%;z-index:-2;pointer-events:none;
        mix-blend-mode:screen;opacity:0;filter:blur(46px) saturate(1.25);
        transition:opacity 1.6s var(--ease)}
      .fx-aurora.is-on{opacity:.55}
      .fx-aurora span{position:absolute;display:block;border-radius:50%;
        transform-origin:50% 50%;will-change:transform}
      .fx-aurora span:nth-child(1){left:-8%;top:4%;width:62%;height:52%;
        background:radial-gradient(closest-side,rgba(119,190,221,.55),transparent 72%);
        animation:fxDrift1 26s ease-in-out infinite}
      .fx-aurora span:nth-child(2){right:-10%;top:-6%;width:58%;height:64%;
        background:radial-gradient(closest-side,rgba(198,233,247,.42),transparent 70%);
        animation:fxDrift2 34s ease-in-out infinite}
      .fx-aurora span:nth-child(3){left:24%;bottom:-14%;width:66%;height:48%;
        background:radial-gradient(closest-side,rgba(93,140,190,.42),transparent 74%);
        animation:fxDrift3 42s ease-in-out infinite}
      @keyframes fxDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}
        50%{transform:translate3d(11%,7%,0) scale(1.18)}}
      @keyframes fxDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}
        50%{transform:translate3d(-9%,10%,0) scale(.9)}}
      @keyframes fxDrift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}
        50%{transform:translate3d(-13%,-8%,0) scale(1.2)}}

      /* ---------- 2. Licht-Sweep über Platzhalter (Inhalt bleibt) ---------- */
      .ph::before{content:"";position:absolute;inset:-40% -60%;z-index:1;pointer-events:none;
        background:linear-gradient(105deg,transparent 38%,rgba(198,233,247,.16) 48%,
          rgba(16,22,26,.28) 51%,rgba(198,233,247,.16) 54%,transparent 64%);
        transform:translate3d(-60%,0,0);opacity:0;mix-blend-mode:screen}
      .ph.fx-seen::before{animation:fxSweep 2.6s var(--rv-ease) .25s 1 both}
      .ph:hover::before{animation:fxSweep 1.5s var(--rv-ease) 1 both}
      @keyframes fxSweep{0%{transform:translate3d(-60%,0,0);opacity:0}
        18%{opacity:1}100%{transform:translate3d(60%,0,0);opacity:0}}

      /* ---------- 3. Zeiger-Spotlight auf Karten & Projekten ---------- */
      .card,.proj,.lu{--fx-x:50%;--fx-y:50%}
      .card::before,.proj::before,.lu::before{content:"";position:absolute;inset:0;z-index:-1;
        pointer-events:none;opacity:0;border-radius:inherit;mix-blend-mode:screen;
        background:radial-gradient(240px circle at var(--fx-x) var(--fx-y),
          rgba(198,233,247,.30),rgba(119,190,221,.10) 45%,transparent 70%);
        transition:opacity .45s var(--ease)}
      .card{position:relative}
      .card:hover::before,.proj:hover::before,.lu:hover::before{opacity:1}
      .card .ph{position:relative}

      /* ---------- 4. Eisrand-Schimmer auf Rahmen ---------- */
      .lu:hover,.proj:hover{box-shadow:0 0 0 1px rgba(198,233,247,.22),
        0 12px 26px rgba(0,0,0,.16),0 0 34px rgba(119,190,221,.12)}

      /* ---------- 5. Klick-Welle auf Buttons ---------- */
      .fx-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:3;
        transform:translate(-50%,-50%) scale(0);mix-blend-mode:screen;
        background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent 70%);
        animation:fxRipple .72s var(--rv-ease) forwards}
      @keyframes fxRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

      /* ---------- 6. Frost-Aura am Cursor (nur Desktop / Zeigegerät) ---------- */
      .fx-cursor{position:fixed;left:0;top:0;width:520px;height:520px;z-index:9;
        pointer-events:none;margin:-260px 0 0 -260px;opacity:0;mix-blend-mode:screen;
        background:radial-gradient(closest-side,rgba(119,190,221,.16),transparent 70%);
        transition:opacity .6s var(--ease);will-change:transform}
      .fx-cursor.is-on{opacity:1}

      /* ---------- 7. Scroll-Schimmer auf Überschriften ---------- */
      .fx-shine{position:relative}
      .fx-shine::after{content:"";position:absolute;inset:-10% -6%;pointer-events:none;
        background:linear-gradient(100deg,transparent 40%,rgba(16,22,26,.22) 50%,transparent 60%);
        transform:translate3d(-70%,0,0);opacity:0;mix-blend-mode:screen}
      .fx-shine.is-lit::after{animation:fxSweep 1.9s var(--rv-ease) .35s 1 both}

      /* ---------- 8. Sanftes Atmen der Ticket-/CTA-Buttons ---------- */
      .btn--ice{animation:fxBreath 5.5s ease-in-out infinite}
      .btn--ice:hover{animation-play-state:paused}
      @keyframes fxBreath{0%,100%{box-shadow:0 10px 30px rgba(119,190,221,.24)}
        50%{box-shadow:0 14px 44px rgba(119,190,221,.42),0 0 0 1px rgba(198,233,247,.22)}}

      @media (prefers-reduced-motion:reduce){
        .fx-aurora,.fx-cursor{display:none !important}
        .ph::before,.fx-shine::after{display:none !important}
        .btn--ice{animation:none !important}
      }
      @media (hover:none),(max-width:760px){
        .fx-cursor{display:none !important}
        .fx-aurora.is-on{opacity:.4}
      }


      /* =====================================================================
         10. FULLSCREEN STAGE v2 — Bühnen-Sektionen
         ===================================================================== */
      @media (min-width:821px) and (prefers-reduced-motion:no-preference){
        /* Die Bühne bricht aus dem .wrap-Raster aus, sonst beschneidet
           overflow:hidden den 100vw breiten Frame auf Wrap-Breite. */
        .sdn__stick,
        .sdn--event .sdn__stick{
          width:100vw;max-width:none;
          margin-left:var(--bleed);margin-right:var(--bleed);
          place-items:center;
        }

        /* ---- Zwei Phasen statt einer -------------------------------
           --q = zweite Hälfte des Scrollwegs (ab .58).
           Phase 1 (.00–.58): echtes Vollbild, das Bild zoomt zentriert
                              heraus — der Rahmen bleibt randlos.
           Phase 2 (.58–1.0): der Rahmen selbst fährt zurück auf ein
                              gesetztes Format. Das ist der eigentliche
                              „Raus-Scroll".
           ------------------------------------------------------------ */
        .sdn__frame,
        .sdn--event .sdn__frame{
          --q:clamp(0,calc((var(--p,0) - .58) / .42),1);
          --sdn-w:min(86vw,1560px);
          --sdn-h:min(76vh,880px);
          width:calc(100vw - var(--q) * (100vw - var(--sdn-w)));
          height:calc(100vh - var(--q) * (100vh - var(--sdn-h)));height:calc(100dvh - var(--q) * (100dvh - var(--sdn-h)));
          border-radius:calc(var(--q) * 10px);
          box-shadow:0 calc(var(--q) * 48px) calc(var(--q) * 120px) rgba(0,0,0,calc(var(--q) * .62));
          will-change:width,height;
        }
        @media (min-width:1920px){
          .sdn__frame,.sdn--event .sdn__frame{--sdn-w:min(88vw,2000px);--sdn-h:min(78vh,1080px)}
        }
        @media (min-width:2560px){
          .sdn__frame,.sdn--event .sdn__frame{--sdn-w:min(90vw,2480px);--sdn-h:min(80vh,1320px)}
        }
        .sdn__frame::after{
          border-color:rgba(198,233,247,calc(var(--q,0) * .18));
        }

        /* Reverse-Zoom, strikt aus der Mitte heraus. */
        .sdn__frame img{
          width:100%;height:100%;
          object-fit:cover;
          object-position:50% 50%;
          transform:scale(calc(1.32 - var(--p,0) * .32));
          transform-origin:50% 50%;
          backface-visibility:hidden;
          will-change:transform;
        }

        /* Ticketkarte skaliert sanft mit, wenn der Rahmen zurückfährt —
           sonst wirkt sie in Phase 2 plötzlich überdimensioniert. */
        .ticket-over{
          width:min(640px,calc(100% - 2 * var(--gut)));
          transform:translate(-50%,-50%) scale(calc(1 - clamp(0,calc((var(--p,0) - .58) / .42),1) * .1));
          transform-origin:50% 50%;
        }
      }
      @media (min-width:1440px) and (prefers-reduced-motion:no-preference){
        .ticket-over{width:min(700px,calc(100% - 2 * var(--gut)))}
      }
      @media (min-width:1920px) and (prefers-reduced-motion:no-preference){
        .ticket-over{width:min(760px,calc(100% - 2 * var(--gut)))}
      }

      /* ============================================================
         ENTER THE ARC — weniger Schwarzfläche
         Die Vignette lief bis auf reines --ink aus, dadurch stand am
         Ende der Sektion ein fast komplett schwarzer Screen. Jetzt
         bleibt das Motiv sichtbar, der Text sitzt trotzdem sauber.
         ============================================================ */
      @media (prefers-reduced-motion:no-preference){
        .itp__veil{
          background:
            radial-gradient(135% 105% at 50% 46%,
              transparent 34%,
              rgba(255,255,255,.34) 72%,
              rgba(255,255,255,.74) 100%);
          opacity:calc(.22 + var(--p,0) * .58);
        }
        /* Textblock bekommt eine eigene, lokale Abdunklung statt einer
           ganzflächigen — deutlich weniger tote Fläche. */
        /* ---- Enter the Arc bleibt deutlich länger stehen ----------
           Vorher: .itp 115vh bei 100vh Stick = nur 15vh Scrollweg, die
           Sektion war nach einem Wischen durch. Jetzt langer Scrollweg
           plus neu getimte Phasen, damit Titel und Text jeweils real
           auf dem Schirm stehen bleiben. */
        .itp{height:300vh}
        .itp__stick{height:100vh;height:100svh}

        /* Titel: volle Deckung bis .48, erst dann sanft raus */
        .itp__cap{
          opacity:clamp(0,calc((.74 - var(--p,0)) * 3.6),1);
          transform:translateY(calc(var(--p,0) * -18px));
        }
        /* Textblock kommt später und hat danach reichlich Standzeit */
        .itp__out{
          opacity:clamp(0,calc((var(--p,0) - .74) * 5),1);
          transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .74) * 5),1)) * 26px));
        }
        .itp__media{transform:scale(calc(1 + var(--p,0) * .82));transform-origin:50% 48%}
        .itp__out > div{
          padding:clamp(24px,3vw,44px) clamp(22px,3vw,48px);
          border-radius:14px;
          background:radial-gradient(120% 130% at 50% 50%,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 62%,rgba(255,255,255,0) 100%);
        }
      }
      @media (max-width:1024px) and (prefers-reduced-motion:no-preference){
        .itp{height:250vh}
      }
      @media (max-width:640px) and (prefers-reduced-motion:no-preference){
        .itp{height:200vh}
      }

      /* ============================================================
         ARCHIVE 3×3 — Zoom strikt aus der Bildmitte
         Vorher wurde die Rasterbreite (--archive-width) pro Frame neu
         gesetzt: das ist ein Layout-Reflow pro Scroll-Frame, und die
         Gaps blieben konstant, während die Kacheln wuchsen — der Zoom
         "driftete" dadurch optisch aus der Mitte.
         Jetzt: feste Rasterbreite + transform:scale() mit
         transform-origin 50%/50%. Reiner Compositor-Job, garantiert
         zentriert, Gaps skalieren wie bei einer echten Kamerafahrt.
         ============================================================ */
      @media (min-width:821px) and (prefers-reduced-motion:no-preference){
        .archive-zoom__grid{
          width:min(88vw,1280px) !important;
          transform:scale(var(--az-scale,1)) !important;
          transform-origin:50% 50% !important;
          will-change:transform;
        }
        /* Mittelkachel ist der Startframe — ihr Ausschnitt muss mittig
           sitzen, sonst startet der Zoom sichtbar versetzt. */
        .archive-zoom__tile:nth-child(5) img{object-position:50% 50%}
        .archive-zoom__sticky{contain:paint}
      }

      /* ================================================================
         ARCHIVE RAIL — seitlich laufende Endlos-Collection
         Ersetzt das 3x3-Mosaik. Kartensprache bewusst aus dem Line-up
         (.lu) abgeleitet: gleiche Ratio-Familie, gleicher Rahmen, gleiche
         Hover-Grammatik mit Kreis-Pfeil. Bildmaterial unverändert.

         Zwei Betriebsmodi:
           BASIS  — nativer horizontaler Scroll mit Snap. Gilt für
                    Mobile, reduced-motion und no-JS. Nichts kann brechen.
           LIVE   — Sticky-Bühne, Track wird per transform bewegt, Offset
                    wird modulo Set-Breite gewrappt → echte Endlosigkeit.
                    Wird ausschliesslich per JS zugeschaltet (.is-live).
         ================================================================ */
      .arail{
        position:relative;
        background:var(--ink);
        padding:clamp(56px,7vw,104px) 0 clamp(56px,7vw,104px);
        overflow:clip;
      }
      .arail__stick{position:relative}

      /* ---- Ambiente: Polarlicht + wandernder Lichtstrahl -------------- */
      .arail__aura,.arail__beam{position:absolute;inset:0;pointer-events:none;z-index:0}
      .arail__aura{
        background:
          radial-gradient(58% 42% at 50% 50%, rgba(198,233,247,.13), rgba(198,233,247,0) 70%),
          radial-gradient(42% 34% at 18% 72%, rgba(120,190,230,.10), rgba(0,0,0,0) 72%),
          radial-gradient(38% 30% at 84% 26%, rgba(160,215,245,.09), rgba(0,0,0,0) 74%);
        filter:blur(6px);
        opacity:.9;
        animation:arailAura 17s ease-in-out infinite alternate;
      }
      @keyframes arailAura{
        0%  {transform:translate3d(-2%,1%,0) scale(1.02)}
        50% {transform:translate3d(2%,-2%,0) scale(1.08)}
        100%{transform:translate3d(-1%,2%,0) scale(1.03)}
      }
      .arail__beam{
        background:linear-gradient(105deg,
          rgba(255,255,255,0) 42%,
          rgba(214,240,252,.055) 49%,
          rgba(255,255,255,.10) 51%,
          rgba(214,240,252,.05) 53%,
          rgba(255,255,255,0) 60%);
        mix-blend-mode:screen;
        transform:translate3d(-60%,0,0);
        animation:arailBeam 9.5s cubic-bezier(.5,0,.2,1) infinite;
      }
      @keyframes arailBeam{
        0%,12%{transform:translate3d(-70%,0,0)}
        70%,100%{transform:translate3d(70%,0,0)}
      }

      /* ==============================================================
         GPU-Budget: gleiche Optik, weniger Rasterarbeit pro Frame
         ============================================================== */

      /* 1. Backdrop-Blur-Radien gesenkt. Die Kosten von Backdrop-Filter
            skalieren ueberproportional mit dem Radius; die Deckkraft der
            Grundflaeche wird minimal angehoben, damit Kontrast und
            Lesbarkeit exakt gleich bleiben. */
      .hdr[data-solid="true"]{
        background:rgba(255,255,255,.70);
        -webkit-backdrop-filter:blur(12px) saturate(1.45);
        backdrop-filter:blur(12px) saturate(1.45);
      }
      .glass{
        -webkit-backdrop-filter:blur(11px) saturate(1.45);
        backdrop-filter:blur(11px) saturate(1.45);
      }
      .vsnz-toast{
        background:rgba(12,16,20,.90);
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
      }
      @media (max-width:900px){
        .nav{
          background:rgba(255,255,255,.985);
          -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
        }
      }


      /* 3. Ambient-Loops pausieren, sobald sie ausserhalb des Viewports
            sind. Sichtbar laeuft alles unveraendert weiter. */
      .anim-idle,
      .anim-idle::before,
      .anim-idle::after{animation-play-state:paused !important}

      .arail__viewport{
        position:relative;z-index:1;
        perspective:1500px;
        perspective-origin:50% 52%;
        overflow-x:auto;overflow-y:hidden;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:0 var(--gut) 6px;
      }
      .arail__viewport::-webkit-scrollbar{display:none}
      .arail__viewport:focus-visible{outline:1px solid rgba(198,233,247,.5);outline-offset:6px}

      .arail__track{
        --card-w:clamp(236px,19vw,460px);
        --card-gap:clamp(12px,1.2vw,22px);
        display:flex;
        gap:var(--card-gap);
        width:max-content;
        transform-style:preserve-3d;
        will-change:transform;
      }

      /* ---- Karte ------------------------------------------------------ */
      .acard{
        position:relative;
        flex:0 0 var(--card-w);
        aspect-ratio:3/4.2;
        margin:0;
        border-radius:14px;
        overflow:hidden;
        isolation:isolate;
        background:var(--slate);
        border:1px solid rgba(16,22,26,.12);
        scroll-snap-align:center;
        transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
      }
      .acard__ph{position:absolute;inset:0;z-index:0;overflow:hidden}
      .acard__ph img{
        display:block;width:100%;height:100%;object-fit:cover;
        object-position:50% 50%;
        transform:scale(1.1);
        transform-origin:50% 50%;
        filter:contrast(1.05) saturate(.9) brightness(.9);
        transition:transform .9s var(--ease),filter .6s var(--ease);
        will-change:transform;
      }
      /* Verlauf, damit Index oben und Name unten immer lesbar bleiben */
      .acard::after{
        content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
        background:linear-gradient(180deg,
          rgba(255,255,255,.58) 0%,
          rgba(255,255,255,.06) 34%,
          rgba(255,255,255,.10) 52%,
          rgba(255,255,255,.82) 100%);
      }
      /* Glanzstreifen, der einmal quer über die Karte läuft */
      .acard__ph::after{
        content:"";position:absolute;inset:-20% -40%;z-index:1;pointer-events:none;
        background:linear-gradient(100deg,
          rgba(255,255,255,0) 44%,
          rgba(255,255,255,.16) 50%,
          rgba(255,255,255,0) 56%);
        transform:translate3d(-120%,0,0);
        opacity:0;
      }
      /* Leuchtender Rahmen für die Karte in der Bühnenmitte */
      .acard::before{
        content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
        border-radius:inherit;
        box-shadow:inset 0 0 0 1px rgba(198,233,247,.55),
                   inset 0 0 34px rgba(198,233,247,.14);
        opacity:0;
        transition:opacity .5s var(--ease);
      }
      .acard__idx{
        position:absolute;z-index:2;top:18px;left:18px;
        font:500 10px/1 var(--utility);letter-spacing:.22em;
        color:rgba(16,22,26,.78);
        font-variant-numeric:tabular-nums;
      }
      .acard__idx::after{
        content:"";display:block;height:1px;margin-top:9px;
        width:20px;background:rgba(198,233,247,.45);
        transform-origin:left;transform:scaleX(.5);
        transition:transform .5s var(--ease);
      }
      /* Past Events: Kartentext (Nummer + Name + Pfeil) ausgeblendet */
      .acard__idx,
      .acard__body{display:none !important}
      .acard__body{
        position:absolute;z-index:2;left:18px;right:18px;bottom:18px;
        display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
      }
      .acard__name{
        font:600 clamp(15px,1.15vw,20px)/1.12 var(--display);
        letter-spacing:-.015em;text-transform:uppercase;
        text-wrap:balance;
      }
      .acard__go{
        flex:0 0 auto;
        width:34px;height:34px;border-radius:50%;
        display:grid;place-items:center;
        border:1px solid rgba(16,22,26,.42);
        color:rgba(16,22,26,.9);
        font-size:14px;line-height:1;
        transform:translateX(-4px);opacity:.65;
        transition:transform .45s var(--ease),opacity .45s var(--ease),
                   background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
      }
      @media (hover:hover){
        .acard:hover{
          border-color:rgba(198,233,247,.36);
          box-shadow:0 0 0 1px rgba(198,233,247,.14),0 30px 70px rgba(0,0,0,.55);
        }
        .acard:hover .acard__ph img{transform:scale(1.16);filter:contrast(1.06) saturate(.98) brightness(1)}
        .acard:hover .acard__go{transform:translateX(0);opacity:1;background:var(--frost);color:#0A1116;border-color:var(--frost)}
        .acard:hover .acard__idx::after{transform:scaleX(1)}
      }

      /* ---- Fortschrittslinie + Kantenverläufe ------------------------- */
      .arail__meter{
        position:relative;height:1px;margin:clamp(22px,2.6vw,38px) var(--gut) 0;
        background:rgba(16,22,26,.12);overflow:hidden;
      }
      .arail__meter span{
        position:absolute;inset:0 auto 0 0;display:block;width:0%;
        background:linear-gradient(90deg,rgba(198,233,247,.25),var(--ice-1));
      }
      .arail__edge{
        position:absolute;top:0;bottom:0;width:clamp(48px,9vw,180px);
        pointer-events:none;z-index:3;opacity:0;
      }
      .arail__edge--l{left:0;background:linear-gradient(90deg,var(--ink),rgba(255,255,255,0))}
      .arail__edge--r{right:0;background:linear-gradient(270deg,var(--ink),rgba(255,255,255,0))}

      /* ---- LIVE-Modus (nur mit JS, ab Tablet, ohne reduced-motion) ----- */
      .arail.is-live{height:340vh;height:340svh;padding:0}
      .arail.is-live .arail__stick{
        position:sticky;top:0;height:100vh;height:100svh;
        display:flex;flex-direction:column;justify-content:center;
        gap:clamp(20px,2.6vw,40px);
        overflow:hidden;
      }
      .arail.is-live .arail__viewport{
        overflow:hidden;
        scroll-snap-type:none;
        padding:0;
      }
      .arail.is-live .arail__track{
        transform:translate3d(calc(var(--ax,0px) * -1),0,0);
      }
      .arail.is-live .arail__edge{opacity:1}
      .arail.is-live .arail__viewport{cursor:grab}
      .arail.is-live .arail__viewport.is-dragging{cursor:grabbing}
      .arail.is-live .arail__viewport.is-dragging .acard__ph img{transform:scale(1.14)}

      /* Optik nach Abstand zur Bühnenmitte — JS setzt --d (-1..1) und
         --a (0..1 absolut). Rein additiv: ohne JS bleiben beide 0. */
      .arail.is-live .acard{
        transform:
          translate3d(0, calc(var(--a,0) * 26px), calc(var(--a,0) * -190px))
          rotateY(calc(var(--d,0) * -20deg))
          rotate(calc(var(--d,0) * 1.1deg))
          scale(calc(.94 + (1 - var(--a,0)) * .12));
        opacity:calc(.26 + (1 - var(--a,0)) * .74);
        box-shadow:0 calc(24px + (1 - var(--a,0)) * 26px) calc(50px + (1 - var(--a,0)) * 50px)
                   rgba(0,0,0,calc(.32 + (1 - var(--a,0)) * .3));
        border-color:rgba(198,233,247,calc(.08 + (1 - var(--a,0)) * .3));
        transition:none;
      }
      .arail.is-live .acard__ph img{
        transform:scale(calc(1.14 + (1 - var(--a,0)) * .07)) translateX(calc(var(--d,0) * -42px));
        filter:
          contrast(calc(1.02 + (1 - var(--a,0)) * .08))
          saturate(calc(.62 + (1 - var(--a,0)) * .46))
          brightness(calc(.68 + (1 - var(--a,0)) * .36));
        transition:none;
      }
      /* Mittige Karte: Leuchtrahmen an, Glanzstreifen läuft durch */
      .arail.is-live .acard::before{
        opacity:calc((1 - var(--a,0)) * (1 - var(--a,0)) * 1.15);
        transition:none;
      }
      .arail.is-live .acard__ph::after{
        opacity:calc((1 - var(--a,0)) * .9);
        transform:translate3d(calc(var(--d,0) * -160% + 10%),0,0);
        transition:none;
      }
      .arail.is-live .acard__go{
        transform:translateX(calc(var(--a,0) * -10px)) scale(calc(.88 + (1 - var(--a,0)) * .12));
        opacity:calc((1 - var(--a,0)) * (1 - var(--a,0)));
        transition:none;
      }
      .arail.is-live .acard__idx::after{
        transform:scaleX(calc(.35 + (1 - var(--a,0)) * .65));
        transition:none;
      }

      /* ---- Auftritt beim Betreten der Sektion ------------------------- */
      .arail__viewport{
        opacity:0;
        transform:translateY(38px) scale(.965);
        transition:opacity 1.1s var(--ease),transform 1.25s var(--ease);
      }
      .arail.is-seen .arail__viewport{opacity:1;transform:none}
      .arail__meter span{transition:width .18s linear}
      .arail__meter::after{
        content:"";position:absolute;top:50%;left:0;width:100%;height:1px;
        background:linear-gradient(90deg,rgba(198,233,247,0),rgba(198,233,247,.7),rgba(198,233,247,0));
        transform:translate3d(-100%,-50%,0);
        animation:arailScan 6s linear infinite;
        opacity:.55;
      }
      @keyframes arailScan{to{transform:translate3d(100%,-50%,0)}}
      html.no-js .arail__viewport,
      .arail:not(.is-live) .arail__viewport{opacity:1;transform:none}
      .arail.is-live .acard__body,
      .arail.is-live .acard__idx{
        opacity:calc(.15 + (1 - var(--a,0)) * .85);
      }

      /* ---- Mobile: gestapelte Ratio, native Snap ---------------------- */
      @media (max-width:820px){
        .acard{flex-basis:min(74vw,320px);aspect-ratio:3/4}
        .acard--dup{display:none}
      }
      @media (max-width:420px){
        .acard{flex-basis:82vw}
      }

      @media (max-width:820px){
        .arail__beam{display:none}
      }
      @media (prefers-reduced-motion:reduce){
        .acard,.acard__ph img,.acard__go,.acard__idx::after{transition:none !important}
        .acard--dup{display:none}
        .arail__aura,.arail__beam,.arail__meter::after{animation:none !important}
        .arail__beam{display:none}
        .arail__viewport{opacity:1 !important;transform:none !important;transition:none !important}
      }
      html.no-js .acard--dup{display:none}


      /* =====================================================================
         11. EVENT-HEAD & TZOOM — Final Override Layer
         ===================================================================== */
      /* ---- 1. "Event / Winter Arc 2027" garantiert lesbar ------------
         Vorher stand der Block direkt an der Oberkante der Sektion, im
         Auslauf der Sticky-Bühne darüber, und hing zusätzlich am
         Scroll-Reveal. Jetzt: fest volle Deckkraft, eigene Stapelebene
         und deutlich mehr Luft nach oben. */
      .sect--event-head{
        position:relative;
        z-index:2;
        padding-top:clamp(110px,18vh,220px) !important;
        padding-bottom:clamp(40px,6vh,80px);
        isolation:isolate;
      }
      .sect--event-head > .wrap{position:relative;z-index:2}
      @media (max-width:860px){
        .sect--event-head{padding-top:clamp(56px,9vh,90px) !important;padding-bottom:clamp(28px,4vh,48px)}
        .sect{padding:clamp(64px,9vh,100px) 0}
      }

      .event-head__eyebrow{
        display:block;
        color:#3E8FB4 !important;
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
        text-shadow:0 0 18px rgba(255,255,255,.9);
      }
      .event-head__title{
        margin:14px 0 44px;
        font:700 clamp(30px,3.8vw,56px)/1 var(--display);
        letter-spacing:-.03em;
        color:#FFFFFF !important;
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
        text-shadow:0 2px 26px rgba(255,255,255,.95),0 0 60px rgba(255,255,255,.7);
      }
      /* Falls doch ein Reveal-Layer greifen will: hier hart aushebeln. */
      .sect--event-head .rv{opacity:1 !important;transform:none !important;filter:none !important}

      /* ---- 2. TZOOM: noch krasser --------------------------------- */
      /* Mehr Scrollweg = mehr Raum für die Choreografie */
      .tzoom{height:420vh}
      @media (max-width:1024px){.tzoom{height:360vh}}
      @media (max-width:640px){.tzoom{height:300vh}}

      /* Bühne: tiefe Perspektive + eigener Lichtraum */
      .tzoom__stick{
        perspective:900px;
        background:
          radial-gradient(70% 50% at 50% 50%,rgba(18,40,54,.55) 0%,rgba(255,255,255,0) 70%);
      }

      /* Anflug aus viel weiterer Distanz, härteres Einrasten,
         danach ein echter Kamera-Durchflug statt nur Scale. */
      .tzoom__logo{
        --asm:clamp(0,calc((.34 - var(--p,0)) / .34),1);
        --asm2:calc(var(--asm) * var(--asm));
        --asm3:calc(var(--asm2) * var(--asm));
        --weld:calc(
          clamp(0,calc((var(--p,0) - .24) / .10),1) *
          clamp(0,calc((.74 - var(--p,0)) / .16),1)
        );
        --zr:clamp(0,calc((var(--p,0) - .38) / .62),1);
        --zoom:calc(var(--zr) * 1.8 + var(--zr) * var(--zr) * 9.5);
        transform:
          translateZ(0)
          rotate(calc(var(--zr) * 14deg))
          scale(calc(.55 + var(--zoom)));
        opacity:calc(1 - clamp(0,calc((var(--p,0) - .86) / .14),1));
      }

      /* Ganzes Mark taumelt beim Anflug deutlich stärker */
      .vz{transform:rotate(calc(var(--asm2) * -34deg)) scale(calc(1 + var(--asm2) * .18))}

      /* Segmente kommen aus dem Off, fast blind, und schlagen ein */
      .vz__seg{opacity:calc(1 - var(--asm) * .96)}
      .vz__seg--1{transform:translate(calc(var(--asm3) * -320px),calc(var(--asm3) * -150px)) rotate(calc(var(--asm2) * -110deg)) scale(calc(1 + var(--asm2) * .9))}
      .vz__seg--2{transform:translate(calc(var(--asm3) * -170px),calc(var(--asm3) *  210px)) rotate(calc(var(--asm2) *  84deg)) scale(calc(1 + var(--asm2) * .62))}
      .vz__seg--3{transform:translate(calc(var(--asm3) *  320px),calc(var(--asm3) * -150px)) rotate(calc(var(--asm2) *  110deg)) scale(calc(1 + var(--asm2) * .9))}
      .vz__seg--4{transform:translate(calc(var(--asm3) *  170px),calc(var(--asm3) *  210px)) rotate(calc(var(--asm2) * -84deg)) scale(calc(1 + var(--asm2) * .62))}

      /* Schweißnaht: fett, weiß glühend */
      .vz__weld{
        stroke-width:calc(.4 + var(--weld) * 5.5);
        stroke-dashoffset:calc(300 - clamp(0,calc((var(--p,0) - .12) / .22),1) * 300);
        opacity:calc(var(--weld) * 1);
      }
      .vz__weld--1,.vz__weld--3{stroke:#FFFFFF}
      .vz__weld--2,.vz__weld--4{stroke:#DFF4FF}

      /* Lichtbogen: langer, breiter Sweep über die Mittelnaht */
      .vz__arc{
        opacity:calc(var(--weld) * 1);
        transform:
          translateY(calc(-140px + clamp(0,calc((var(--p,0) - .18) / .34),1) * 280px))
          scaleX(calc(1 + var(--weld) * 8));
      }

      /* Kernblitz im Moment des Verriegelns */
      .tzoom__stick::after{
        background:radial-gradient(circle,
          rgba(255,255,255,.85) 0%,
          rgba(198,233,247,.5) 22%,
          rgba(119,190,221,.22) 48%,
          transparent 72%);
        opacity:calc(var(--weld,0) * 1);
        transform:scale(calc(.4 + var(--weld,0) * 3.4 + var(--zr,0) * 9));
      }

      /* Schockring 1 — reißt beim Einschlag auf */
      .tzoom__stick::before{
        border:3px solid rgba(255,255,255,.95);
        box-shadow:
          0 0 70px rgba(198,233,247,.75),
          0 0 140px rgba(119,190,221,.4),
          inset 0 0 50px rgba(198,233,247,.35);
        --ring:clamp(0,calc((var(--p,0) - .30) / .24),1);
        opacity:calc((1 - var(--ring)) * clamp(0,calc((var(--p,0) - .30) / .03),1) * 1);
        transform:scale(calc(.2 + var(--ring) * 8));
      }

      /* Schockring 2 — verzögerter Nachschlag, doppelte Wucht */
      .tzoom__logo::after{
        --ring2:clamp(0,calc((var(--p,0) - .36) / .26),1);
        width:clamp(150px,26vw,320px);
        border:2px solid rgba(119,190,221,.9);
        box-shadow:0 0 60px rgba(119,190,221,.45);
        opacity:calc((1 - var(--ring2)) * clamp(0,calc((var(--p,0) - .36) / .03),1) * .95);
        transform:translate(-50%,-50%) scale(calc(.15 + var(--ring2) * 11));
      }

      /* Schockring 3 — dritter, weitester Ausschlag */
      .tzoom__logo::before{
        content:"";
        position:absolute;left:50%;top:50%;
        width:clamp(150px,26vw,320px);aspect-ratio:1;
        border-radius:50%;
        border:1px solid rgba(198,233,247,.7);
        --ring3:clamp(0,calc((var(--p,0) - .42) / .30),1);
        opacity:calc((1 - var(--ring3)) * clamp(0,calc((var(--p,0) - .42) / .03),1) * .7);
        transform:translate(-50%,-50%) scale(calc(.1 + var(--ring3) * 15));
        pointer-events:none;
      }

      @media (prefers-reduced-motion:reduce){
        .tzoom__logo::before,.tzoom__logo::after,.tzoom__stick::before{display:none !important}
        .vz,.vz__seg{transform:none !important;opacity:1 !important}
        .tzoom__logo{transform:none !important;opacity:1 !important}
      }


      /* =====================================================================
         99. CONSOLIDATION LAYER  (neu — Performance, CLS, a11y, Motion)
         Bewusst als letzter Layer geladen: härtet die vorhandenen Regeln,
         ohne eine einzige Design-Entscheidung zu überschreiben.
         ===================================================================== */

      /* --- 99.1  Seiten-Routing: CSS-Klasse + hidden-Attribut synchron ------ */
      .page[hidden]{display:none !important}
      .page:not(.is-active){content-visibility:hidden;contain-intrinsic-size:auto 1200px}
      @media print{.page[hidden]{display:block !important}}

      /* --- 99.2  CLS = 0: jeder Bild-Container reserviert seinen Platz ------ */
      :where(.ph){position:relative;overflow:hidden}
      /* Default-Seitenverhältnis mit niedriger Spezifität (:where) — jede
         bestehende, spezifischere Regel (z. B. .rail .ph) gewinnt weiterhin. */
      :where(.ph:not(.ph--free)){aspect-ratio:var(--ph-ar,3/2)}
      :where(.ph--img){display:block;width:100%}
      :where(.ph--img > img){display:block;width:100%;height:100%;object-fit:cover}
      /* Bilder ohne width/height-Attribut trotzdem shift-frei einbetten */
      :where(img){max-width:100%}
      /* Achtung Spezifität: bewusst in :where(), damit Layout-Regeln wie
         .merch-pin__media img{height:100%} weiterhin gewinnen. */
      :where(img:not([width]):not([height])){height:auto}

      /* --- 99.3  Fokus-Sichtbarkeit für alle interaktiven Elemente --------- */
      :where(a,button,[role="button"],[tabindex]:not([tabindex="-1"]),input,select,textarea,summary):focus-visible{
        outline:2px solid var(--ice-2,#c6e9f7);
        outline-offset:3px;
        border-radius:4px;
      }
      :where(a,button):focus:not(:focus-visible){outline:none}
      /* Horizontale Rails: nur Fokus-Ring ergänzen — Snap-Verhalten und
         Drag-Logik der Bestandsregeln bleiben unangetastet. */
      :where(.rail,.show__gallery,.arail__viewport):focus-visible{
        outline:2px solid var(--ice-2,#c6e9f7);outline-offset:6px}

      /* --- 99.4  Skip-Link -------------------------------------------------- */
      .skip-link{position:fixed;top:8px;left:8px;z-index:9999;padding:10px 16px;
        transform:translateY(-200%);transition:transform .2s ease;
        background:var(--ice-2,#c6e9f7);color:#FFFFFF;font:600 13px/1 var(--utility,system-ui);
        letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:4px}
      .skip-link:focus{transform:translateY(0)}

      /* --- 99.5  Compositor-Hygiene: will-change nur wo es zählt ----------- */
      [data-parallax],.tzoom__media,.arail__track{will-change:transform}
      .page:not(.is-active) *{will-change:auto !important;animation-play-state:paused !important}

      /* --- 99.6  Motion- & Low-End-Fallbacks ------------------------------- */
      @media (prefers-reduced-motion:reduce){
        *,*::before,*::after{
          animation-duration:.001ms !important;animation-iteration-count:1 !important;
          transition-duration:.001ms !important;scroll-behavior:auto !important;
        }
        .grain,.fx-sheen,.fx-aurora{display:none !important}
        [data-parallax],.tzoom__media{transform:none !important}
      }
      /* Geräte ohne Hover/mit grober Zeigereingabe = i.d.R. schwächere GPUs:
         teure Filter und Blur-Layer werden dort reduziert. */
      @media (hover:none) and (pointer:coarse){
        .frost__bg,.pagewash{backdrop-filter:none !important}
        .frost__bg,.pagewash{backdrop-filter:none !important}
        .fx-sheen{display:none}
      }
      @media (update:slow){
        *{animation:none !important;transition:none !important}
      }

      /* =====================================================================
         100 · FIX-LAYER — bewusst als allerletzter Block
         100.1  Vollflächige Medien-Ebenen dürfen kein Default-AR erben
         100.2  Auswahl-/Aktiv-Zustand bekommt eine eigene Signalfarbe
         ===================================================================== */

      /* --- 100.1 -----------------------------------------------------------
         Regel 99.2 setzt :where(.ph:not(.ph--free)){aspect-ratio:3/2}.
         Bei absolut positionierten Ebenen mit inset:0 gewinnt das
         Seitenverhältnis gegen die Box-Constraints — die Bildebene füllt die
         Karte dann nur noch bis zur 3:2-Kante, darunter bleibt Leerfläche.
         Für alle Container, die ihre Fläche selbst definieren: AR abschalten. */
      .proj .ph,
      .proj .ph--img,
      .frost__bg .ph,
      .split__bg .ph,
      .ftr__bg .ph,
      .studio-hero__obj .ph{
        aspect-ratio:auto !important;
        inset:0;
        width:100%;
        height:100%;
      }
      .proj .ph--img > img,
      .proj .ph img{
        width:100%;
        height:100%;
        object-fit:cover;
      }
      /* Titelzeile liegt jetzt wieder über dem Bild statt darunter */
      .proj__body{position:relative;z-index:2}

      /* --- 100.1b  Frost-Bleed wieder einfangen ----------------------------
         .stats{overflow:visible} (Regel 1112) hebt das overflow:hidden von
         .frost auf. .frost__bg hat aber bewusst inset:-9% 0 als Parallax-
         Spielraum — ohne Clipping ragt das Foto oben aus der Sektion heraus,
         dort greift der Wash nicht mehr und es entsteht eine harte Kante.
         Sektion clippt wieder, die Karten selbst bleiben overflow:visible. */
      .frost.stats,
      #studio-impact.frost{overflow:hidden}
      .stats .stat{overflow:visible}

      /* --- 100.2  Signalfarbe für Auswahl / Hover / Fokus ------------------ */
      :root{
        --accent:#5FD3F3;
        --accent-ink:#06121A;
        --accent-soft:rgba(95,211,243,.14);
        --accent-line:rgba(95,211,243,.55);
      }

      ::selection{background:var(--accent);color:var(--accent-ink)}
      ::-moz-selection{background:var(--accent);color:var(--accent-ink)}

      :focus-visible,
      :where(a,button,[role="button"],[tabindex]:not([tabindex="-1"]),input,select,textarea,summary):focus-visible{
        outline:2px solid var(--accent);
        outline-offset:3px;
      }

      /* Karten: angewählt / gehovert / per Tastatur fokussiert */
      .proj:hover,
      .proj:focus-within,
      .proj.is-focused,
      .grid3.is-focusing .proj.is-focused,
      .card:hover,
      .card.is-focused,
      .lu:hover,
      .journey:hover,
      .brand-gallery__item:hover{
        box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px var(--accent-line),
                   0 0 34px -6px rgba(95,211,243,.35);
      }
      .proj:hover .proj__body h3,
      .proj:focus-within .proj__body h3,
      .proj.is-focused .proj__body h3,
      .lu:hover .lu__name,
      .journey:hover h3{
        color:var(--accent);
        transition:color .3s var(--ease);
      }
      .proj:hover::after,
      .proj.is-focused::after{
        background:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.9)),
                   linear-gradient(180deg,transparent 60%,var(--accent-soft));
      }

      /* Navigation & Tags im aktiven Zustand */
      .studio-nav a:hover,
      .studio-nav button:hover,
      .studio-nav a[aria-current],
      .studio-nav .is-active,
      nav a[aria-current="page"]{
        color:var(--accent);
        border-color:var(--accent-line);
      }
      .tag:hover,
      .tag.is-active{
        color:var(--accent);
        border-color:var(--accent-line);
        background:var(--accent-soft);
      }
      .lu:hover .lu__go{
        background:var(--accent);
        color:var(--accent-ink);
        border-color:var(--accent);
      }

      @media (prefers-reduced-motion:reduce){
        .proj:hover .proj__body h3{transition:none}
      }

      /* =====================================================================
         12. LESBARKEIT — Mindestgrößen & Kontraste (WCAG AA), Final Layer
         Nur Typo/Farbe. Keine Layout-, Asset- oder Klassen-Änderungen.
         ===================================================================== */
      :root{--mist:#4A5760;--read-min:12px;--read-soft:rgba(16,22,26,.72)}
      body{text-rendering:optimizeLegibility;font-kerning:normal}
      p,li,dd{text-wrap:pretty}
      h1,h2,h3{text-wrap:balance}

      /* Utility-Labels: min. 12px, weniger Laufweite */
      .eyebrow,.hero__meta,.hero__tag,.facts dt,.lineup__sub,.lineup__when,.lu__date,
      .itp__cap p,.itp__buy,.sdn__label span,.liquid__over,.bento__k,.lineup__all,
      .archive-zoom__label,.notice__kicker,.journey__meta,.rail figcaption,.tag,
      .ftr__news-msg,.ftr__socials a,.field label,.avail-phase__date,.field__error,
      .brand-card__cta,.brand-gallery__cap,.card__meta span,.buy-now,.studio-nav,
      .ftr__cols a,.ftr__cols button,.ftr__base,.ticket-card__badge,.partners__role,
      .studio-slogan__tag,.acard__idx,.btn--sm,.missing,.nav button,.nav a{
        font-size:max(var(--read-min),1em) !important;
        letter-spacing:min(.14em,.14em) !important;
      }
      .nav button,.nav a{font-size:12px !important}
      .hero__note,.form__fineprint,.lu--tba .lu__tba-full,.proj__over-cap{
        font-size:max(12px,1em) !important;line-height:1.55 !important;
      }
      .hdr-tix__core{font-size:max(11px,1em) !important}
      .hdr-tix__sub{font-size:max(10px,1em) !important}

      /* Fließtext: Größe & Zeilenhöhe */
      .journey p,.slot p{font-size:max(15px,1em);line-height:1.6}

      /* Schwache Textfarben anheben (≥4.5:1 auf Weiß) */
      .hero__note,.form__fineprint,.ftr__base,.ticket-card__code,.ticket-card__fine,
      .partners__lede,.brand-card__cta,.lu--tba .lu__tba-full,.journey p{color:var(--read-soft) !important}
      .partners__role{color:#46606E !important}
      .field input::placeholder,.field textarea::placeholder,
      .ftr__news-row input::placeholder{color:rgba(16,22,26,.55) !important}

      /* Text auf Bildern absichern */
      .proj__over-cap,.itp__cap p,.liquid__over{text-shadow:0 1px 12px rgba(0,0,0,.35)}

      @media (max-width:640px){
        .partners__role{font-size:11px !important;letter-spacing:.1em !important}
        body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
      }

      /* =====================================================================
         13. FUTURE LAYER 2035 — Progressive Enhancement
         Alles hinter @supports / @media: alte Browser ignorieren es sauber.
         Keine Layout-, Asset- oder Klassen-Änderungen an bestehendem Markup.
         ===================================================================== */
      html{
        color-scheme:light;
        scrollbar-gutter:stable;
        hanging-punctuation:first last;
        -webkit-tap-highlight-color:transparent;
      }
      body{overscroll-behavior-y:none}
      :where(input,select,textarea,progress){accent-color:var(--ice-2)}
      :where(a:not([class])){text-decoration:underline;text-underline-offset:.18em;
        text-decoration-thickness:from-font}
      ::selection{background:var(--ice-1);color:var(--frost)}
      :target{scroll-margin-top:calc(var(--nav-h) + 24px)}

      /* Formulare: moderne Validierung & Auto-Höhe */
      @supports (field-sizing:content){ .field textarea{field-sizing:content;min-block-size:6lh} }
      .field :where(input,textarea,select):user-invalid{border-color:#B3261E;
        box-shadow:0 0 0 1px #B3261E inset}

      /* Animierbare Auto-Höhen (Accordions/Details) */
      @supports (interpolate-size:allow-keywords){ :root{interpolate-size:allow-keywords} }
      details::details-content{transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}

      /* Touch: Mindest-Trefferfläche 44px (WCAG 2.2) */
      @media (hover:none) and (pointer:coarse){
        .nav button,.nav a,.ftr__cols a,.ftr__cols button,.ftr__socials a,.tag,.studio-nav a,.studio-nav button{
          min-block-size:44px;display:inline-flex;align-items:center}
      }

      /* Hoher Kontrast & erzwungene Farben (Windows) */
      @media (prefers-contrast:more){
        :root{--mist:#2E3A41;--read-soft:rgba(16,22,26,.9);--line:rgba(16,22,26,.35)}
        .hdr[data-solid="true"]{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
      }
      @media (forced-colors:active){
        .btn,.tag,.lu__go,.field :where(input,textarea,select){border:1px solid CanvasText}
        .frost__bg,.arc{forced-color-adjust:auto;opacity:.25}
        :focus-visible{outline:2px solid Highlight}
      }
      /* Weniger Transparenz gewünscht */
      @media (prefers-reduced-transparency:reduce){
        .hdr[data-solid="true"]{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
      }
      /* Datensparmodus / reduzierte Bewegung (Klasse per JS) */
      .fx-lite .arc{display:none !important}
      .fx-lite .frost__bg,.fx-lite .split__bg,.fx-lite .ftr__bg{animation:none !important}

      /* Große Displays (5K+/TV): Lesebreite begrenzen */
      @media (min-width:2200px){ :root{--gut:clamp(56px,5vw,140px)} }

      /* Druck */
      @media print{
        .hdr,.arc,.skip-link,video{display:none !important}
        .page[hidden]{display:none !important}
        body{color:#000;background:#fff}
        a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
      }

      /* 14. PLATZHALTER — Schatten entfernt (Fix) */
      .ph,.ph::after,.ph--img::after,
      .card:hover .ph,.rail > figure:hover .ph,
      .lu--tba,.lu--tba:hover,.lu--tba.is-focused{box-shadow:none !important}
      .ph{background-image:none}

      /* =====================================================================
         15. MOTION LAYER — Effekte & Animationen
         Nutzt translate/scale/rotate (nicht transform) → keine Konflikte mit
         bestehendem Parallax-/Reveal-JS. Aus bei reduced-motion & .fx-lite.
         ===================================================================== */
      @property --mx{syntax:"<length>";inherits:true;initial-value:-999px}
      @property --my{syntax:"<length>";inherits:true;initial-value:-999px}
      @property --sheen{syntax:"<percentage>";inherits:false;initial-value:-30%}

      /* Scroll-Fortschrittsbalken */
      .fx-progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none;
        transform-origin:0 50%;scale:var(--p,0) 1;
        background:linear-gradient(90deg,var(--ice-2),var(--ice-1),#fff)}
      @supports (animation-timeline:scroll()){
        .fx-progress{animation:fxGrow linear both;animation-timeline:scroll(root)}
        @keyframes fxGrow{from{scale:0 1}to{scale:1 1}}
      }

      /* Cursor-Spotlight auf Karten */
      .proj,.card,.lu,.journey,.bento__cell,.info-card,.svc,.stat{
        --mx:-999px;--my:-999px;
        background-image:radial-gradient(420px circle at var(--mx) var(--my),
          rgba(198,233,247,.22),transparent 60%);
        transition:--mx .15s linear,--my .15s linear}

      /* 3D-Tilt (per JS gesetzt) */
      .fx-tilt{rotate:var(--tx,0) var(--ty,0) 0 var(--rt,0deg);
        transition:rotate .6s var(--ease)}
      .fx-tilt.is-tilting{transition:rotate .1s linear}

      /* Bild-Zoom & Glanz beim Hover */
      .proj .ph--img img,.card .ph--img img,.journey img,.rail figure img,.brand-gallery__item img{
        transition:scale 1.1s var(--ease),filter .8s var(--ease),opacity .6s var(--ease)}
      .proj:hover .ph--img img,.card:hover .ph--img img,.journey:hover img,
      .rail figure:hover img,.brand-gallery__item:hover img{scale:1.06;filter:saturate(1.08) contrast(1.04)}
      .proj .ph--img,.card .ph--img{isolation:isolate}
      .proj .ph--img::before,.card .ph--img::before{content:"";position:absolute;inset:0;z-index:2;
        pointer-events:none;
        background:linear-gradient(115deg,transparent calc(var(--sheen) - 12%),
          rgba(255,255,255,.35) var(--sheen),transparent calc(var(--sheen) + 12%));
        transition:--sheen 1.1s var(--ease)}
      .proj:hover .ph--img::before,.card:hover .ph--img::before{--sheen:130%}

      /* Buttons: magnetisch + Shine + Klick-Welle */
      .btn{position:relative;overflow:hidden;translate:var(--bx,0) var(--by,0);
        transition:translate .35s var(--ease),scale .2s var(--ease),background .3s,color .3s}
      .btn:active{scale:.96}
      .btn::before{content:"";position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
        translate:-120% 0;transition:translate .8s var(--ease)}
      .btn:hover::before{translate:120% 0}
      .fx-ripple{position:absolute;border-radius:50%;pointer-events:none;
        background:currentColor;opacity:.25;scale:0;animation:fxRipple .7s var(--ease) forwards}
      @keyframes fxRipple{to{scale:1;opacity:0}}

      /* Überschriften: Eis-Schimmer */
      .hero__h1,.event-head__title,.section-title{
        background:linear-gradient(100deg,currentColor 40%,var(--ice-2) 50%,currentColor 60%) 0 0/250% 100%;
        -webkit-background-clip:text;background-clip:text;
        animation:fxShimmer 7s ease-in-out 2s infinite}
      @supports (-webkit-background-clip:text){
        .hero__h1,.event-head__title,.section-title{-webkit-text-fill-color:transparent}
      }
      @keyframes fxShimmer{0%,70%{background-position:100% 0}100%{background-position:-50% 0}}

      /* Scroll-getriebene Einblendungen (nur neue Browser, nur ohne .rv) */
      @supports (animation-timeline:view()){
        .sect :where(p,li,figure,.tag,.stat,.svc):not(.rv):not(.rv *){
          animation:fxRise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
        .hero .ph--img img{animation:fxHeroOut linear both;animation-timeline:scroll(root);
          animation-range:0 90vh}
        @keyframes fxRise{from{opacity:0;translate:0 24px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:none}}
        @keyframes fxHeroOut{to{scale:1.12;filter:saturate(.8) brightness(1.05)}}
      }

      /* Seitenwechsel: View Transition */
      @view-transition{navigation:auto}
      ::view-transition-old(root){animation:fxVtOut .35s var(--ease) both}
      ::view-transition-new(root){animation:fxVtIn .55s var(--ease) both}
      @keyframes fxVtOut{to{opacity:0;filter:blur(6px);scale:.99}}
      @keyframes fxVtIn{from{opacity:0;filter:blur(6px);scale:1.01}}

      /* Lesbarkeit & Barrierefreiheit */
      @media (prefers-reduced-motion:reduce){
        .fx-progress,.btn,.btn::before,.fx-tilt,.fx-ripple,
        .hero__h1,.event-head__title,.section-title,
        .sect :where(p,li,figure,.tag,.stat,.svc),.hero .ph--img img{
          animation:none !important;transition:none !important;translate:none !important;rotate:none !important}
      }
      .fx-lite .fx-tilt,.fx-lite .btn{rotate:none !important;translate:none !important}
      .fx-lite .hero__h1,.fx-lite .event-head__title,.fx-lite .section-title{animation:none !important}
      @media (hover:none){ .proj,.card,.lu,.journey,.bento__cell,.info-card,.svc,.stat{background-image:none} }

      /* =====================================================================
       * UA-DEFAULT COMPAT LAYER
       * The site pages are now real app routes, so the app-wide CSS reset
       * (Tailwind preflight) applies to them too — it flattens headings and
       * strips list/paragraph margins that a few legacy sections (legal
       * pages, prose blocks) inherited from the browser defaults.
       * :where() keeps specificity at 0, so every existing rule above still
       * wins; this only restores what nothing else styles.
       * ===================================================================== */
      :where(main#app h1){font-size:2em;font-weight:700;margin:.67em 0}
      :where(main#app h2){font-size:1.5em;font-weight:700;margin:.83em 0}
      :where(main#app h3){font-size:1.17em;font-weight:700;margin:1em 0}
      :where(main#app h4){font-size:1em;font-weight:700;margin:1.33em 0}
      :where(main#app p){margin:1em 0}
      :where(main#app ul,ol){margin:1em 0;padding-left:40px;list-style:revert}
      :where(main#app li){display:list-item}
      :where(main#app b,strong){font-weight:700}
      :where(main#app i,em){font-style:italic}
      :where(main#app blockquote){margin:1em 40px}
      :where(main#app hr){margin:.5em auto;border-width:1px 0 0}

      /* Legal pages: the section heading was promoted from <h2> to <h1> for
         SEO — keep the exact size/weight it rendered at before. */
      #page-legal-impressum .wrap > h1,#page-legal-agb .wrap > h1{font-size:24px;font-weight:700}

      /* =====================================================================
         16. UX RELIABILITY — resilient actions, forms and mobile conversion
         ===================================================================== */
      .field--choice{margin:0;padding:0;border:0;min-width:0}
      .field--choice legend{margin:0 0 10px;font:500 12px/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
      .field--choice legend b{color:var(--ice-2);font-weight:500;margin-left:.3em}
      .field--choice.is-invalid .avail-phase__box{border-color:#B3261E;background:rgba(179,38,30,.04)}
      .field__error[hidden]{display:none}
      .form__status{margin:0;min-height:1.55em;font:600 12px/1.55 var(--utility);letter-spacing:.04em;color:var(--mist)}
      .form__grid button[disabled],.ftr__news-row button[disabled]{cursor:wait;opacity:.58}
      .form__grid button[aria-busy="true"] svg{animation:submitPulse 1s ease-in-out infinite}
      @keyframes submitPulse{50%{opacity:.25;transform:translateX(3px)}}
      .ftr__news-row{margin:0}
      .mobile-ticket{display:none}

      @media (max-width:1024px){
        body.nav-open{overflow:hidden}
        .nav[data-open="true"]{overscroll-behavior:contain}
      }
      @media (max-width:700px){
        #page-winterarc{padding-bottom:calc(76px + var(--safe-b))}
        .mobile-ticket{position:fixed;z-index:65;left:12px;right:12px;bottom:calc(10px + var(--safe-b));min-height:54px;
          display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 16px;border:1px solid rgba(16,22,26,.16);
          border-radius:6px;background:rgba(198,233,247,.96);color:var(--frost);box-shadow:0 14px 40px rgba(16,22,26,.2);
          backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:600 12px/1 var(--utility);text-transform:uppercase}
        .mobile-ticket strong{font-weight:500;color:#2B647F;text-align:right}
        .mobile-ticket > span:last-child{font-size:18px}
        .vsnz-toast{bottom:calc(78px + var(--safe-b))}
      }
      @media (prefers-reduced-motion:reduce){
        .scrolldot,.frost__bg,.split__bg,.ftr__bg,.fx-progress,.lu--tba::before{animation:none !important}
        .drift,[data-scroll-progress],[data-par],[data-drift]{transform:none !important;translate:none !important}
      }

      /* ===== UX polish 22.09.2026 — additiv, ändert bestehende Regeln nur wo nötig ===== */

      /* 1) Mast-Heroes (Past, Sponsoring, Influencer, Volunteers): dunkler Scrim
            unten + weisse Type, damit Titel auf jedem Foto lesbar bleiben. */
      .mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:1;
        pointer-events:none;
        background:linear-gradient(180deg,rgba(8,11,14,0) 0%,rgba(8,11,14,.38) 52%,rgba(8,11,14,.72) 100%)}
      .mast .eyebrow{color:rgba(255,255,255,.82)}
      .mast h1,.mast h2{color:#fff;text-shadow:0 2px 30px rgba(8,11,14,.35)}
      .mast p{color:rgba(255,255,255,.85)}

      /* 2) Desktop-Navi sichtbarer: Items kräftiger, Ruhe-Opacity .72 → .92,
            ab 1200px etwas grösser (kein Überlappen mit dem Tickets-Pill). */
      @keyframes navItemIn{
        0%{opacity:0;transform:translateY(-10px);filter:blur(6px)}
        60%{opacity:1;filter:blur(0)}
        100%{opacity:.92;transform:none;filter:none}
      }
      @media (prefers-reduced-motion:reduce){
        .nav,.nav button,.nav a,.brand,.nav::before{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important}
      }
      @media (min-width:1200px){
        .nav button,.nav a{font-size:12.5px;letter-spacing:.13em}
      }

      /* 3) Marquee-Titel (Studio/Projects) auf Mobil/Tabla: nicht mitten im Wort
            angeschnitten — statisch zentriert und auf Bildschirmbreite skaliert. */
      @media (max-width:820px){
        .studio-hero .marquee__track{animation:none;display:block;text-align:center;padding:0}
        .studio-hero .marquee span{display:none}
        .studio-hero .marquee span:first-child{display:inline;font-size:clamp(34px,10.5vw,56px)}
      }

      /* 4) Past Events Desktop: Hero füllt den ersten Screen (statt 64vh + weisser
            Leerraum) — das Archiv-Board startet direkt beim ersten Scroll. */
      @media (min-width:821px){
        #page-past .mast{min-height:92vh;min-height:92svh}
      }

      /* =====================================================================
         17. SITE-WIDE FLOW — consistent spacing, section heights and hand-offs
         ===================================================================== */
      :root{
        --space-section:clamp(64px,8vh,112px);
        --space-section-compact:clamp(44px,5.5vh,76px);
        --space-section-mobile:clamp(48px,7vh,72px);
        --space-flow:clamp(24px,3vw,44px);
      }

      /* One predictable rhythm replaces page-by-page viewport-sized gaps. */
      .sect{padding:var(--space-section) 0}
      .sect::before{height:min(72px,8vh)}
      .page > .sect + .sect{padding-top:var(--space-section-compact)}
      .page > .mast + .sect{padding-top:var(--space-section)}
      .wrap > :first-child{scroll-margin-top:calc(var(--nav-h) + 24px)}

      /* Secondary page mastheads remain cinematic without consuming an empty
         full viewport. Past Events keeps a little more room for its archive cue. */
      .mast{min-height:clamp(520px,68svh,760px);
        padding-top:calc(var(--nav-h) + clamp(56px,7vh,92px));
        padding-bottom:clamp(42px,5.5vh,70px)}
      @media (min-width:821px){
        #page-past .mast{min-height:clamp(600px,78svh,840px)}
      }

      /* Preserve each scroll story, but remove long stretches where the frame
         barely changes. These heights still leave enough distance to complete
         every existing progress-driven animation. */
      @media (min-width:821px) and (prefers-reduced-motion:no-preference){
        .tzoom{height:185vh;height:185svh}
        .itp{height:180vh;height:180svh}
        .sdn{height:145vh;height:145svh}
        .merch-pin{height:140vh;height:140svh}
        .arail.is-live{height:180vh;height:180svh}
      }

      /* Page-specific continuity: related blocks read as one sequence. */
      .studio-top{padding-bottom:var(--space-section-compact)}
      #page-studio .studio-top + .itp{margin-top:0}
      #page-studio .itp + .sect{padding-top:var(--space-section-compact)}
      #page-studio .sect + .sect{padding-top:var(--space-section-compact)}
      #page-projects .studio-hero{min-height:clamp(620px,76svh,820px);padding-bottom:clamp(52px,7vh,82px)}
      #page-projects .studio-hero__lede{margin-top:clamp(130px,15vw,240px)}
      #page-projects .show{padding-block:var(--space-section)}
      #page-projects .show + .show{padding-top:var(--space-section-compact)}
      #page-volunteers .sdn + .sect{padding-top:var(--space-section-compact)}
      #page-volunteers .sect + .sect{padding-top:var(--space-section-compact)}
      #page-influencer .form__intro{margin-bottom:var(--space-flow)}
      #page-sponsoring .brand-gallery{margin-top:var(--space-flow)}
      #page-merch .mast + .sdn{margin-top:0}
      .form__grid{gap:clamp(22px,2.4vw,32px)}
      .form__panel{gap:clamp(18px,2vw,24px)}

      /* The event scene hands directly into its heading instead of producing a
         second oversized top gap after the pinned logo sequence. */
      .sect--event-head{padding-top:var(--space-section) !important;
        padding-bottom:var(--space-section-compact)}
      .sdn--event{margin-bottom:0}
      .partners{padding:var(--space-section-compact) 0}
      .loc{padding:var(--space-section) 0}

      /* Footer starts as a continuation of the page rather than another full
         empty panel. */
      .ftr::before{height:min(96px,10vh)}
      .ftr__hero{padding:clamp(70px,9vh,116px) var(--gut) clamp(44px,5.5vh,72px)}
      .ftr__cols{padding-bottom:clamp(44px,5.5vh,72px)}

      /* Legal copy uses content-based spacing; long text no longer inherits the
         same cinematic section height as photo-led pages. */
      #page-legal-impressum > .sect,#page-legal-agb > .sect{
        padding-top:calc(var(--nav-h) + clamp(36px,5vh,64px)) !important;
        padding-bottom:var(--space-section)}
      #page-legal-impressum .wrap > h1,#page-legal-agb .wrap > h1{
        margin:10px 0 clamp(28px,4vw,40px) !important}
      #page-legal-impressum h3,#page-legal-agb h3,#page-legal-agb h2{margin-top:clamp(24px,3vw,34px)}

      @media (max-width:820px){
        .sect{padding:var(--space-section-mobile) 0}
        .sect::before{height:44px}
        .page > .sect + .sect,.page > .mast + .sect,
        #page-studio .itp + .sect,#page-studio .sect + .sect,
        #page-projects .show + .show,#page-volunteers .sdn + .sect,
        #page-volunteers .sect + .sect{padding-top:var(--space-section-mobile)}

        .mast{min-height:clamp(430px,66svh,620px);
          padding-top:calc(var(--nav-h) + 44px);padding-bottom:42px}
        #page-past .mast{min-height:clamp(460px,70svh,640px)}
        .studio-hero{min-height:clamp(620px,88svh,820px);
          padding:calc(var(--nav-h) + 34px) 0 54px;gap:24px}
        .studio-hero__lede{margin-top:clamp(210px,56vw,340px)}
        #page-projects .studio-hero{min-height:clamp(540px,72svh,650px);padding-bottom:40px}
        #page-projects .studio-hero__lede{margin-top:clamp(130px,34vw,190px)}

        /* Mobile uses short, stable scenes instead of multi-screen pinning. */
        .tzoom{height:92svh}
        .tzoom__stick{height:92svh}
        .itp{height:125svh}
        .itp__stick{height:88svh}
        .sdn:not(.sdn--event){height:auto;padding:var(--space-section-mobile) var(--gut)}
        .sdn:not(.sdn--event) .sdn__stick{position:relative;top:auto;height:auto;min-height:0;overflow:visible}
        .sdn:not(.sdn--event) .sdn__frame{width:100%;height:auto;aspect-ratio:4/5;border-radius:12px}
        .sdn:not(.sdn--event) .sdn__frame img{position:absolute;inset:0;transform:none !important}
        .sdn:not(.sdn--event) .sdn__label{display:none}
        .merch-pin{height:auto;padding:var(--space-section-mobile) 0}
        .merch-pin + .merch-pin{padding-top:0}
        .arail{padding:var(--space-section-mobile) 0}
        .arail__viewport{padding-bottom:4px}

        .facts div{padding:22px var(--gut)}
        .show__head{margin-bottom:24px}
        .show__cover{margin-bottom:24px}
        .show__copy{gap:22px;margin-bottom:28px}
        .brand-gallery{margin-top:28px}
        .ftr__hero{padding:64px var(--gut) 42px}
        .ftr__cols{gap:28px;padding-bottom:44px}
        .sect--event-head{padding-top:var(--space-section-mobile) !important;padding-bottom:36px}
        .partners,.loc{padding:var(--space-section-mobile) 0}
      }

      @media (max-width:420px){
        .mast{min-height:clamp(410px,64svh,560px)}
        .studio-hero{min-height:clamp(580px,86svh,760px)}
        .form__grid{gap:20px}
        .form__panel{padding:22px 18px}
      }

      @media (min-width:1800px){
        .sect{padding:clamp(72px,7vh,116px) 0}
        .mast{min-height:min(70svh,800px)}
        #page-past .mast{min-height:min(78svh,860px)}
      }

      @media (max-height:760px) and (min-width:821px){
        .sect{padding:clamp(52px,7vh,78px) 0}
        .mast{min-height:clamp(480px,82svh,650px)}
        .studio-hero{min-height:100svh;padding-bottom:48px}
      }


      /* ── EON concierge ─────────────────────────────────────────── */
      .eon-launch{position:fixed;right:clamp(14px,2vw,26px);bottom:calc(18px + env(safe-area-inset-bottom));z-index:80;display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border-radius:999px;border:1px solid rgba(62,143,180,.35);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);color:#10161A;font:600 12px/1 var(--f-ui,inherit);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,box-shadow .3s ease;box-shadow:0 10px 30px rgba(16,22,26,.12)}
      .eon-launch[data-visible="true"]{opacity:1;transform:none;pointer-events:auto}
      .eon-launch:hover{box-shadow:0 14px 38px rgba(62,143,180,.28)}
      .eon-launch__dot{width:7px;height:7px;border-radius:50%;background:#3E8FB4;box-shadow:0 0 0 4px rgba(119,190,221,.28)}
      .eon-inline{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:8px 14px;border-radius:999px;border:1px solid rgba(62,143,180,.4);background:transparent;color:#10161A;font:600 11px/1 inherit;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .25s ease,color .25s ease}
      .eon-inline:hover{background:#77BEDD;color:#0b1014}
      .eon-scrim{position:fixed;inset:0;z-index:88;background:rgba(16,22,26,.38);opacity:0;pointer-events:none;transition:opacity .3s ease}
      .eon-scrim[data-open="true"]{opacity:1;pointer-events:auto}
      .eon-panel{position:fixed;z-index:89;right:0;top:0;bottom:0;width:min(430px,100vw);display:flex;flex-direction:column;background:#fff;border-left:1px solid rgba(16,22,26,.1);transform:translateX(102%);transition:transform .38s cubic-bezier(.22,.8,.2,1);box-shadow:-24px 0 60px rgba(16,22,26,.16)}
      .eon-panel[data-open="true"]{transform:none}
      .eon-panel__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 12px;border-bottom:1px solid rgba(16,22,26,.08)}
      .eon-panel__kicker{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#3E8FB4}
      .eon-panel__title{font-size:22px;letter-spacing:.12em;color:#10161A}
      .eon-panel__close{border:0;background:transparent;font-size:26px;line-height:1;color:#10161A;cursor:pointer;padding:4px 6px}
      .eon-panel__topics{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px}
      .eon-chip{padding:7px 13px;border-radius:999px;border:1px solid rgba(16,22,26,.16);background:transparent;color:#10161A;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
      .eon-chip[data-active="true"]{background:#10161A;color:#fff;border-color:#10161A}
      .eon-panel__frame{position:relative;flex:1;min-height:0;padding:0 14px 12px}
      .eon-panel__frame iframe{width:100%;height:100%;border:0;border-radius:18px;background:#020708}
      .eon-panel__loading{position:absolute;inset:0 14px 12px;z-index:1;display:grid;place-items:center;border-radius:18px;background:#020708;color:#C6E9F7;font:600 11px/1 var(--utility);letter-spacing:.12em;text-transform:uppercase}
      .eon-panel__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px calc(16px + env(safe-area-inset-bottom));font-size:11px;letter-spacing:.1em;text-transform:uppercase}
      .eon-panel__foot a{color:#3E8FB4}
      .eon-panel__mic{border:1px solid rgba(62,143,180,.4);background:transparent;border-radius:999px;padding:7px 12px;font:inherit;color:#10161A;cursor:pointer}
      .eon-panel__hint{color:#3E8FB4}
      body.eon-open{overflow:hidden}
      @media (max-width:640px){
        .eon-panel{inset:0;width:auto;height:100dvh;border-left:0}
        .eon-panel__head{min-height:calc(62px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left))}
        .eon-panel__close{display:grid;width:44px;height:44px;place-items:center;padding:0;font-size:28px}
        .eon-panel__topics{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:10px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left))}
        .eon-panel__topics::-webkit-scrollbar{display:none}
        .eon-chip{min-height:38px;flex:0 0 auto}
        .eon-panel__frame{padding:0 max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
        .eon-panel__frame iframe,.eon-panel__loading{border-radius:12px}
        .eon-panel__loading{inset:0 max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
        .eon-panel__foot{min-height:56px;padding:4px calc(16px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));font-size:10px}
        .eon-panel__mic{min-height:38px}
        .eon-launch{left:auto;right:calc(14px + env(safe-area-inset-right));width:44px;height:44px;justify-content:center;padding:0;transform:translateY(10px);bottom:calc(78px + env(safe-area-inset-bottom));border-color:rgba(62,143,180,.28);box-shadow:0 8px 24px rgba(16,22,26,.14)}
        .eon-launch[data-visible="true"]{transform:none}
        .eon-launch__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
        .eon-launch__dot{width:10px;height:10px;box-shadow:0 0 0 5px rgba(119,190,221,.25)}
        .eon-inline{min-height:42px;padding:10px 13px;letter-spacing:.1em}
      }
      @media (prefers-reduced-motion:reduce){
        .eon-launch,.eon-panel,.eon-scrim{transition:none}
      }

      /* ==========================================================
       * Refinement layer (UX / a11y) — additive only, no overrides of
       * layout-critical rules. Safe to remove as a block.
       * ========================================================== */
      h1,h2,.hero__h1,.mast__in h1{text-wrap:balance}
      p,.loc__copy p,.ftr__news-lede{text-wrap:pretty}
      .ftr__socials a,.ftr__legal-links a,.loc__dir,.loc__v a{
        text-underline-offset:.22em;text-decoration-thickness:1px;
        transition:color .2s ease,text-decoration-color .2s ease,opacity .2s ease}
      .ftr__socials a:hover,.ftr__legal-links a:hover,.loc__v a:hover{text-decoration:underline;text-decoration-color:currentColor}
      .ftr__socials li a{display:inline-flex;align-items:center;min-height:32px}
      .ftr__legal-links{display:inline-flex;align-items:center;gap:.6em}
      .ftr__legal-links ul{display:inline-flex;gap:.9em;margin:0;padding:0;list-style:none}
      .hdr-tix:focus-visible,.mobile-ticket:focus-visible,.ticket-card:focus-visible,.eon-launch:focus-visible,.eon-chip:focus-visible,.btn:focus-visible{outline:2px solid var(--ice-1);outline-offset:4px}
      #newsletter-form input:focus-visible{outline:2px solid var(--ice-1);outline-offset:2px}
      #newsletter-form button{transition:transform .2s ease,opacity .2s ease}
      #newsletter-form button:hover{transform:translateX(3px)}
      .eon-launch[data-visible="false"]{pointer-events:none}
      .eon-panel__close{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
      .eon-panel__close svg{width:18px;height:18px}
      @media (prefers-reduced-motion:reduce){
        html{scroll-behavior:auto}
        #newsletter-form button{transition:none}
        #newsletter-form button:hover{transform:none}
      }