/* ============================================================================
   SH_LUX_V1 — Awwwards-Politur-Ebene (rein additiv, performant).
   Bewusst OHNE Lenis/GSAP (haben früher geruckelt). Alle Bewegungen sind
   reine transform/opacity (GPU) + native CSS scroll-driven animations als
   progressive Enhancement. Alles reduced-motion- & touch-sicher.
   Bausteine: (1) Split-Text-Wort-Reveal für Überschriften (Masken-Aufstieg),
   (2) eigener Cursor (Punkt + nachlaufender Ring, blend-mode), (3) Marquee-Band,
   (4) Lade-Vorhang/Wipe, (5) Scroll-Parallax auf Ambient-Ebenen,
   (6) Footer-Link-Unterstrich-Draw-in.
   ========================================================================== */

/* ---- (1) SPLIT-TEXT WORT-REVEAL --------------------------------------------
   JS zerlegt h1/h2 in Wort-Einheiten: .lux-w (Maske, overflow:hidden) > .lux-wi
   (steigt aus der Maske auf). Getaktet per --i (Wort-Index). nbsp-Bindungen und
   <br class="db"> bleiben erhalten (JS-Splitter bricht nur an echten Leerzeichen). */
.lux-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.lux-wi{display:inline-block;transform:translateY(115%);transition:transform .82s cubic-bezier(.16,.84,.28,1);transition-delay:calc(var(--i,0) * 42ms);will-change:transform}
.lux-ready .lux-w > .lux-wi{transform:translateY(115%)}
.lux-in  .lux-w > .lux-wi{transform:translateY(0)}
/* Solange noch nicht initialisiert: nichts verstecken (kein FOUC, kein Verschwinden). */
h1:not(.lux-ready) .lux-wi,h2:not(.lux-ready) .lux-wi{transform:none}

/* ---- (2) EIGENER CURSOR ----------------------------------------------------
   Nur Desktop mit feinem Zeiger & ohne reduced-motion (JS setzt html.lux-cursor).
   Punkt folgt 1:1, Ring läuft weich nach; über interaktiven Elementen wächst der
   Ring. mix-blend-mode:difference → hebt sich auf hell UND dunkel ab. */
html.lux-cursor,html.lux-cursor *{cursor:none !important}
.lux-cur,.lux-ring{position:fixed;top:0;left:0;z-index:2147483000;pointer-events:none;border-radius:50%;
  transform:translate3d(-50%,-50%,0);left:var(--x,50%);top:var(--y,50%);opacity:0;transition:opacity .3s}
.lux-cursor .lux-cur,.lux-cursor .lux-ring{opacity:1}
/* --cur-accent wechselt je Sektion (JS) → Punkt färbt sich passend zum Abschnitt */
.lux-cur{width:8px;height:8px;color:var(--cur-accent,#A9DBF5);background:currentColor;
  box-shadow:0 0 12px currentColor;transition:color .4s var(--ease),width .22s,height .22s,opacity .3s}
.lux-ring{width:38px;height:38px;border:1.5px solid var(--cur-accent,#A9DBF5);
  transition:width .28s var(--ease),height .28s var(--ease),border-color .4s var(--ease),background .28s,opacity .3s}
.lux-cursor.lux-hot .lux-ring{width:60px;height:60px;background:color-mix(in srgb,var(--cur-accent,#A9DBF5) 12%,transparent)}
.lux-cursor.lux-hot .lux-cur{width:5px;height:5px}
.lux-cursor.lux-down .lux-ring{width:28px;height:28px}
/* Über Video/Play-Elementen: Ring wächst und zeigt ein Play-Dreieck */
.lux-ring::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-45%,-50%) scale(.4);
  color:var(--cur-accent,#A9DBF5);font-size:19px;line-height:1;opacity:0;transition:opacity .2s,transform .2s}
.lux-cursor.lux-play .lux-ring{width:66px;height:66px;background:color-mix(in srgb,var(--cur-accent,#A9DBF5) 14%,transparent)}
.lux-cursor.lux-play .lux-ring::after{content:"\25B6";opacity:1;transform:translate(-45%,-50%) scale(1)}
.lux-cursor.lux-play .lux-cur{opacity:0}
@media (hover:none),(pointer:coarse){.lux-cur,.lux-ring{display:none}}
@media (prefers-reduced-motion:reduce){.lux-cur,.lux-ring{display:none}}

/* ---- (3) MARQUEE-BAND ------------------------------------------------------
   JS injiziert ein Band aus Schlagworten nach dem Hero. Zwei Kopien laufen
   nahtlos; Hover verlangsamt. Reduced-motion → statisch, zentriert. */
.lux-marquee{position:relative;overflow:hidden;padding:20px 0;margin:6px 0 -10px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);z-index:1}
.lux-mq-track{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;will-change:transform;
  animation:luxMq 34s linear infinite}
.lux-marquee:hover .lux-mq-track{animation-duration:80s}
.lux-mq-track span{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);display:inline-flex;align-items:center;padding:0 4px}
.lux-mq-track span b{color:var(--ion);font-weight:400}
.lux-mq-track i{color:var(--olive-t);margin:0 26px;font-style:normal;opacity:.8}
@keyframes luxMq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lux-mq-track{animation:none;justify-content:center;width:100%}
  .lux-mq-track.lux-mq-dup{display:none}}

/* ---- (4) LADE-VORHANG / WIPE ----------------------------------------------
   Markup + Basis-CSS liegen INLINE im <head>/<body>-Anfang (paintet sofort,
   räumt sich per CSS-Animation selbst ab — auch ohne JS). Hier nur Feinschliff. */
.lux-load__wm{opacity:0;transform:translateY(8px);animation:luxLoadWm .5s var(--ease) .05s forwards}
.lux-load__bar{width:0;animation:luxLoadBar .7s var(--ease) .2s forwards}
@keyframes luxLoadWm{to{opacity:1;transform:none}}
@keyframes luxLoadBar{to{width:120px}}

/* ---- (5) SCROLL-PARALLAX (native scroll-driven, progressive) ---------------
   Nur wo unterstützt (Chromium). Bewegt fixe Ambient-Ebenen leicht gegen den
   Scroll → Tiefe, ohne JS-Scroll-Listener. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .orb1{animation:drift1 34s var(--ease) infinite alternate, luxPar1 linear both;animation-timeline:auto, scroll(root)}
    .orb2{animation:drift2 40s var(--ease) infinite alternate, luxPar2 linear both;animation-timeline:auto, scroll(root)}
    .grid-bg{animation:luxParGrid linear both;animation-timeline:scroll(root)}
  }
}
@keyframes luxPar1{to{transform:translateY(150px)}}
@keyframes luxPar2{to{transform:translateY(-120px)}}
@keyframes luxParGrid{to{transform:translateY(60px)}}

/* ---- (6) FOOTER-LINK-UNTERSTRICH DRAW-IN ----------------------------------- */
.foot-links a,.foot-legal .ll a{position:relative}
.foot-links a::after,.foot-legal .ll a::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:0;
  background:linear-gradient(90deg,var(--ion),var(--olive-t));transition:width .35s var(--ease)}
.foot-links a:hover::after,.foot-legal .ll a:hover::after{width:100%}

/* ---- Section-Divider-Draw (dünne Linie zeichnet sich beim Reinscrollen) ----- */
.lux-rule{height:1px;border:0;position:relative;background:none;overflow:hidden;margin:0}
.lux-rule::before{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);
  transition:transform 1.1s var(--ease)}
.lux-rule.in::before{transform:scaleX(1)}

/* SH_LUX_V2 — Fokus-Rahmen nur bei TASTATUR zeigen (nicht bei Maus-Klick),
   sonst erscheinen beim Klicken überall die Browser-„Boxen". Eingabefelder
   behalten ihren eigenen Fokus-Stil (Rand + Glow). */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--ion);outline-offset:3px}