@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;600;700&family=Inter:wght@400;500;600&display=swap');
/* Sicherheitsnetz gegen einen waagerechten Scrollbalken mit einem schmalen
   Streifen rechts, den man wegscrollen kann. Ursache ist eine bekannte
   Eigenart von "vw": der Wert zaehlt die Flaeche unter der Scrollleiste mit,
   Prozentwerte dagegen nicht. Abschnitte, die per "calc(50% - 50vw)" auf
   volle Fensterbreite ausbrechen (VR, FPV, 3D-Visualisierungen,
   KI-Praesentationen, FDE), ueberschiessen dadurch auf Desktops mit
   klassischer Scrollleiste um deren Breite. Diese Zeile faengt das
   sitewide ab, unabhaengig davon, welcher Abschnitt gerade der Ausloeser
   ist - ohne sie an fuenf Stellen einzeln nachzujustieren. */
html, body{ overflow-x:hidden; }
#luxvis-hero{
  --lv-bg:#0a0a0a; --lv-red:#ff3b30; --lv-gold:#d4af37; --lv-gold-light:#f0d879;
  --lv-white:#f5f0e8; --lv-grey:#ab9c98;
  position:relative; width:100%;
  min-height:100vh; min-height:100svh;
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0px, rgba(212,175,55,.10) 1px, transparent 1px, transparent 15px),
    radial-gradient(ellipse at 50% 30%, #141414 0%, var(--lvt-schwarz) 55%, #000 100%);
  background-attachment:scroll;   /* mobil: mitscrollen, siehe Media Query unten */
  color:var(--lv-white); overflow:hidden; font-family:var(--lvt-schrift-text); box-sizing:border-box;
}
#luxvis-hero *{ box-sizing:border-box; }
#luxvis-hero .lv-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0;
  opacity:0; transition:opacity 1s ease; }
#luxvis-hero.lv-scene .lv-canvas{ opacity:1; }
#luxvis-hero .lv-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.95) 100%); }
#luxvis-hero .lv-grain{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0px, transparent 1px, transparent 2px); }
/* Die Explosions-Buehne liegt ueber dem Text und wird nur waehrend eines
   Ausbruchs eingeblendet - in Ruhe unsichtbar und reagiert nicht auf
   Zeigereingaben. Es gibt sie zweimal: als WebGL-Ebene (.lv-title-gl, die
   das Skript selbst einhaengt, deshalb muss am Block nichts geaendert
   werden) und als 2D-Canvas fuer den Fall, dass WebGL oder three.js nicht
   zur Verfuegung stehen. Waehrend eines Ausbruchs traegt der Hero
   zusaetzlich .lv-gl, wenn die 3D-Fassung laeuft - dann bleibt das
   2D-Canvas aus, damit nicht beide uebereinander zeichnen. */
#luxvis-hero .lv-title-canvas,
#luxvis-hero .lv-title-gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:7; pointer-events:none; opacity:0; transition:opacity .25s ease;
}
#luxvis-hero.lv-exploding .lv-title-canvas,
#luxvis-hero.lv-exploding .lv-title-gl{ opacity:1; }
#luxvis-hero.lv-exploding.lv-gl .lv-title-canvas{ opacity:0; }
#luxvis-hero .lv-content{ position:relative; z-index:5; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:140px 20px 120px; }
/* == Logo-Emblem ==
   Das Logo wird nicht eingefaerbt, sondern als Maske benutzt: darunter liegt
   derselbe Goldverlauf wie beim Schriftzug. Die Originalfarbe der PNG ist damit
   egal - nur die Silhouette zaehlt. */
#luxvis-hero .lv-emblem{ position:relative; z-index:5; width:clamp(104px, 13vw, 178px);
  margin:0 auto 30px; opacity:0; transform:translateY(18px); animation:lvUp .9s ease forwards .05s; }
#luxvis-hero .lv-emblem-inner{ position:relative; z-index:1; display:block; animation:lvFloat 7s ease-in-out infinite; }
#luxvis-hero .lv-emblem img{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.40)); }
#luxvis-hero .lv-emblem-gold, #luxvis-hero .lv-emblem-sheen{ display:none; }
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  #luxvis-hero .lv-emblem img{ visibility:hidden; filter:none; }
  #luxvis-hero .lv-emblem-gold{ display:block; position:absolute; inset:0;
    background:linear-gradient(120deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 22%,var(--lvt-gold-mittel) 48%,var(--lvt-gold-weiss) 72%,var(--lvt-gold-tief) 100%);
    -webkit-mask-image:url(../img/luxvis-logo-pyramide-final.png); mask-image:url(../img/luxvis-logo-pyramide-final.png);
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center; }
  #luxvis-hero .lv-emblem-sheen{ display:block; position:absolute; inset:0; overflow:hidden; pointer-events:none;
    -webkit-mask-image:url(../img/luxvis-logo-pyramide-final.png); mask-image:url(../img/luxvis-logo-pyramide-final.png);
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center; }
  #luxvis-hero .lv-emblem-sheen::after{ content:''; position:absolute; top:-60%; left:0; width:55%; height:220%;
    background:linear-gradient(90deg, transparent, rgba(255,250,232,.95), transparent);
    transform:translateX(-180%) rotate(18deg); animation:lvSheen 6.5s ease-in-out infinite; }
}
@keyframes lvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes lvSheen{ 0%{ transform:translateX(-180%) rotate(18deg); } 26%,100%{ transform:translateX(340%) rotate(18deg); } }
#luxvis-hero .lv-kicker{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--lv-gold); margin-bottom:22px; opacity:0; transform:translateY(14px); animation:lvUp .8s ease forwards .15s; }
/* Der Titel bleibt unsichtbar, bis die Einblend-Verzoegerung greift - sonst
   sieht man beim Seitenwechsel kurz den unpositionierten Schriftzug. Das
   2,2s-Sicherheitsnetz greift nur, falls das Skript gar nicht laeuft. */
#luxvis-hero .lv-title-wrap{ position:relative; margin:0 0 26px; opacity:0; transform:translateY(22px);
  animation:lvUp .9s ease forwards 2.2s; }
#luxvis-hero.lv-js .lv-title-wrap{ animation:lvUp .9s ease forwards .05s; }
/* Kurzer Aufschwung beim Ausloesen - der Text ist in diesem Moment schon
   dabei, hinter die Explosions-Buehne zu verblassen, der Puls wirkt danach
   erst auf die zurueckkehrende Schrift. */
@keyframes lvTitlePop{ 0%{ transform:scale(1); } 38%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
#luxvis-hero.lv-exploding .lv-title-wrap{ animation:lvTitlePop .55s var(--lvt-weich); }
#luxvis-hero h1{
  font-family:var(--lvt-schrift-titel); font-weight:600;
  font-size:calc(clamp(3.4rem, 12vw, 10.5rem) * var(--lv-title-scale, 1));
  /* Deutlich geoeffnete Laufweite: die Sperrung ist DAS Erkennungszeichen
     der Buttons (.2em) und macht den Lockup technisch-futuristisch statt
     klassisch-kompakt. .07em ist die Grossformat-Uebersetzung davon. */
  line-height:.92; letter-spacing:.07em; margin:0 0 0 .07em; cursor:pointer; user-select:none; white-space:nowrap;
  opacity:1; transition:opacity .25s ease;
}
#luxvis-hero.lv-exploding h1{ opacity:0; }
#luxvis-hero h1 .lv-word{ display:inline-block; }
/* Der Schriftzug uebernimmt das Material der Buttons woertlich:
   LUX traegt exakt den Verlauf der Portfolio-Buttonflaeche und dazu
   denselben wandernden Lichtreflex - als langsam durchlaufender Schimmer
   statt als Hover-Effekt, denn Hover loest hier das Zerspringen aus.
   VIS ist nicht mehr flaches Creme, sondern gebuerstetes Silber - dieselbe
   Metallsprache wie der Explosionsrahmen. Zwei Metalle, ein Material-Look. */
#luxvis-hero h1 .lv-bold{
  font-weight:600; color:transparent;
  background-image:linear-gradient(105deg,var(--lvt-gold-mittel) 0%,var(--lvt-gold-licht) 18%,var(--lvt-gold) 38%,var(--lvt-gold-weiss) 55%,var(--lvt-gold-mittel) 72%,var(--lvt-gold-licht) 88%,var(--lvt-gold-mittel) 100%);
  background-size:250% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  animation:lvTitleShine 7s ease-in-out infinite;
}
#luxvis-hero h1 .lv-thin{
  font-weight:600; color:transparent;
  background-image:linear-gradient(120deg,#9ea6b4 0%,#f8fafd 30%,#cdd4e0 55%,#ffffff 78%,#9ea6b4 100%);
  -webkit-background-clip:text; background-clip:text;
}
@keyframes lvTitleShine{
  0%, 46%{ background-position:100% 0; }
  78%, 100%{ background-position:0 0; }
}
/* Abgeschraegte Winkelklammern um die Wortmarke - dieselbe geschnittene
   Ecke wie an den Buttons (oben links / unten rechts), als haarfeine
   Goldwinkel. Macht aus dem Schriftzug einen gefassten Lockup statt
   freistehender Buchstaben.
   Bewusst wieder an der reinen Klassenumschaltung statt an einem pro Bild
   gesetzten Wert: eine CSS-Transition auf opacity laeuft im Compositor,
   ein Wert, den JavaScript in jedem Bild neu setzt, erzwingt dagegen
   jedes Mal einen frischen Style-Durchlauf - und zwar genau parallel zum
   WebGL-Bild. */
#luxvis-hero .lv-title-wrap{ padding:18px 30px; }
#luxvis-hero .lv-title-wrap::before,
#luxvis-hero .lv-title-wrap::after{
  content:''; position:absolute; width:30px; height:30px; pointer-events:none;
  border:1px solid rgba(212,175,55,.7);
  transition:opacity .25s ease;
}
#luxvis-hero .lv-title-wrap::before{ left:0; top:0; border-right:0; border-bottom:0; }
#luxvis-hero .lv-title-wrap::after{ right:0; bottom:0; border-left:0; border-top:0; }
#luxvis-hero.lv-exploding .lv-title-wrap::before,
#luxvis-hero.lv-exploding .lv-title-wrap::after{ opacity:0; }
/* Der Titel ist jetzt klick-/tastaturbedienbar (spielt das Intro erneut ab,
   siehe JS), deshalb braucht er einen eigenen Fokus-Stil - dieselbe
   Machart wie bei den Buttons in 4.12. */
#luxvis-hero .lv-title-wrap:focus{ outline:none; }
#luxvis-hero .lv-title-wrap:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:6px; }
#luxvis-hero .lv-sub{ max-width:620px; margin:0 auto 40px; font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.6;
  color:var(--lv-grey); font-weight:400; opacity:0; transform:translateY(18px); animation:lvUp .9s ease forwards .5s; }
#luxvis-hero .lv-cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; opacity:0; transform:translateY(18px); animation:lvUp .9s ease forwards .68s; }
/* == Hero-Buttons ==
   Uebernommen aus dem frueheren eigenstaendigen Snippet "LUXVIS Hero-Buttons"
   (Marker LUXBTN_CSS), das damit ueberfluessig wird und in WPCode geloescht
   werden kann. Unveraendert bis auf die Kommentarstriche - inhaltlich exakt
   dieselben Werte, damit sich am gewohnten Aussehen nichts aendert.
   Zwei Ebenen wie beim Menueschalter: das Element selbst traegt den
   Goldverlauf, das ::before liegt einen Pixel innen darueber und bildet die
   Flaeche. Beide mit derselben Abschraegung beschnitten - so entsteht die
   haarfeine Kante, die der Schraege folgt. Ein border kann das nicht, der
   ignoriert clip-path.
   Das ::before braucht z-index:-1, damit der Text darueber bleibt; damit
   das nicht hinter dem eigenen Hintergrund verschwindet, macht
   position:relative + z-index:0 aus dem Button einen eigenen Stapelraum. */
#luxvis-hero .lv-cta-row .lv-btn{
  --cut:9px;
  position:relative; z-index:0; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 24px; border:0; border-radius:0; box-shadow:none;
  font:600 10px/1 var(--lvt-schrift-titel); letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:transform .4s var(--lvt-weich), background .35s ease, color .35s ease;
}
#luxvis-hero .lv-cta-row .lv-btn::before{
  content:''; position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
  transition:background .35s ease;
}
/* Lichtreflex laeuft beim Darueberfahren durch die Flaeche.
   Wird vom clip-path des Buttons sauber abgeschnitten. */
#luxvis-hero .lv-cta-row .lv-btn::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
  transform:translateX(-180%) skewX(-18deg);
  transition:transform .8s var(--lvt-weich);
}
#luxvis-hero .lv-cta-row .lv-btn:hover{ transform:translateY(-2px); }
#luxvis-hero .lv-cta-row .lv-btn:hover::after{ transform:translateX(340%) skewX(-18deg); }
#luxvis-hero .lv-cta-row .lv-btn:focus{ outline:none; }
#luxvis-hero .lv-cta-row .lv-btn:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }
/* Portfolio: gefuellte Goldflaeche, dunkle Schrift.
   Kein drop-shadow als Hervorhebung - Filter greifen vor dem Beschnitt,
   der Schein wuerde vom clip-path wieder weggeschnitten. Stattdessen wird
   der Rand kraeftiger, das ist die Standard-Hervorhebung im Baukasten. */
#luxvis-hero .lv-cta-row .lv-btn-primary{
  background:linear-gradient(135deg, rgba(255,246,214,.9), rgba(212,175,55,.5) 55%, rgba(255,246,214,.75));
  color:var(--lvt-schwarz);
}
#luxvis-hero .lv-cta-row .lv-btn-primary::before{
  background:linear-gradient(120deg,var(--lvt-gold-mittel) 0%,var(--lvt-gold-licht) 24%,var(--lvt-gold) 50%,var(--lvt-gold-weiss) 74%,var(--lvt-gold-mittel) 100%);
}
#luxvis-hero .lv-cta-row .lv-btn-primary::after{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
#luxvis-hero .lv-cta-row .lv-btn-primary:hover{
  color:var(--lvt-schwarz);
  background:linear-gradient(135deg,var(--lvt-gold-creme), rgba(240,216,121,.9) 55%, var(--lvt-gold-creme));
}
#luxvis-hero .lv-cta-row .lv-btn-primary:hover::before{
  background:linear-gradient(120deg,var(--lvt-gold) 0%,var(--lvt-gold-weiss) 24%,var(--lvt-gold-hell) 50%,var(--lvt-gold-creme) 74%,var(--lvt-gold) 100%);
}
/* Kontakt: dunkle Flaeche mit Goldkante - dieselbe Machart wie der Schalter */
#luxvis-hero .lv-cta-row .lv-btn-secondary{
  background:linear-gradient(135deg, rgba(212,175,55,.85), rgba(212,175,55,.22) 55%, rgba(212,175,55,.7));
  color:var(--lvt-weiss);
}
#luxvis-hero .lv-cta-row .lv-btn-secondary::before{ background:rgba(8,8,8,.9); }
#luxvis-hero .lv-cta-row .lv-btn-secondary::after{
  background:linear-gradient(90deg, transparent, rgba(255,244,214,.28), transparent);
}
#luxvis-hero .lv-cta-row .lv-btn-secondary:hover{
  color:var(--lvt-gold);
  background:linear-gradient(135deg, rgba(212,175,55,1), rgba(240,216,121,.5) 55%, rgba(212,175,55,.9));
}
#luxvis-hero .lv-cta-row .lv-btn-secondary:hover::before{ background:rgba(14,12,6,.92); }
@keyframes lvUp{ to{ opacity:1; transform:translateY(0); } }
#luxvis-hero .lv-scroll-cue{ position:absolute; bottom:44px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.7; }
#luxvis-hero .lv-scroll-cue .lv-line{ width:1px; height:34px; background:linear-gradient(180deg, var(--lv-gold), transparent); position:relative; overflow:hidden; }
#luxvis-hero .lv-scroll-cue .lv-line::after{ content:''; position:absolute; top:-34px; left:0; width:100%; height:34px;
  background:linear-gradient(180deg, transparent, var(--lv-white)); animation:lvDrop 2s ease-in-out infinite; }
@keyframes lvDrop{ to{ top:34px; } }
#luxvis-hero .lv-scroll-cue span{ font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--lv-grey); }
/* Unterseiten: Leitsatz und Buttons ausblenden, Titel bleibt */
#luxvis-hero.lv-subpage .lv-sub,
#luxvis-hero.lv-subpage .lv-cta-row{ display:none; }
#luxvis-hero .lv-diag{ position:absolute; left:12px; bottom:12px; z-index:20; max-width:90%;
  font:12px/1.5 monospace; color:#ffb3ae; background:rgba(0,0,0,.75); border:1px solid rgba(255,59,48,.5);
  border-radius:6px; padding:8px 12px; display:none; white-space:pre-wrap; }
/* Ab Tablet aufwaerts bleiben die diagonalen Linien und der Verlauf beim Scrollen stehen.
   Auf Smartphones bewusst nicht: iOS ignoriert "fixed" ohnehin und Android ruckelt damit. */
@media (min-width:861px){
  #luxvis-hero{ background-attachment:fixed; }
}
@media (max-width:860px){
  #luxvis-hero .lv-emblem{ width:clamp(84px, 26vw, 120px); margin-bottom:22px; }
  #luxvis-hero .lv-emblem-sheen{ display:none; }
  #luxvis-hero .lv-scroll-cue{ display:none; }
  #luxvis-hero .lv-content{ padding:120px 20px 100px; }
  #luxvis-hero .lv-cta-row{ gap:12px; }
  #luxvis-hero .lv-cta-row .lv-btn{ --cut:7px; padding:11px 18px; letter-spacing:.16em; }
  #luxvis-hero .lv-title-wrap{ padding:12px 16px; }
  #luxvis-hero .lv-title-wrap::before,
  #luxvis-hero .lv-title-wrap::after{ width:20px; height:20px; }
}
/* == Mobil: Platz fuer den Menueschalter unter der Buttonzeile ==
   Unter 861px ist der Scroll-Hinweis ausgeblendet, deshalb endet der Inhalt
   dicht ueber der Unterkante des Heros - der angedockte Schalter lag auf dem
   Kontakt-Button. Statt den Inhalt einfach nach oben zu schieben (dann waere er
   unten aus dem Bild gelaufen), werden die Abstaende zwischen den Bausteinen
   gestrafft: das schafft echten Platz, statt ihn nur zu verlagern.
   Nur auf der Startseite, denn nur dort dockt der Schalter an. Unterseiten
   bleiben unveraendert. */
@media (max-width:860px){
  body.home #luxvis-hero .lv-content,
  body.front-page #luxvis-hero .lv-content{ padding:84px 20px 150px; }
  body.home #luxvis-hero .lv-emblem,
  body.front-page #luxvis-hero .lv-emblem{ margin-bottom:14px; }
  body.home #luxvis-hero .lv-kicker,
  body.front-page #luxvis-hero .lv-kicker{ margin-bottom:14px; }
  body.home #luxvis-hero .lv-title-wrap,
  body.front-page #luxvis-hero .lv-title-wrap{ margin-bottom:16px; }
  body.home #luxvis-hero .lv-sub,
  body.front-page #luxvis-hero .lv-sub{ margin-bottom:22px; }
}
@media (hover: none){
  #luxvis-hero .lv-cta-row .lv-btn:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  #luxvis-hero .lv-kicker, #luxvis-hero .lv-title-wrap,
  #luxvis-hero .lv-sub, #luxvis-hero .lv-cta-row{ animation-duration:.01s !important; transition-duration:.01s !important; }
  #luxvis-hero.lv-exploding .lv-title-wrap{ animation:none !important; }
  #luxvis-hero h1 .lv-bold{ animation:none !important; }
  #luxvis-hero .lv-scroll-cue .lv-line::after,
  #luxvis-hero .lv-emblem-inner, #luxvis-hero .lv-emblem-sheen::after{ animation:none !important; }
  #luxvis-hero .lv-cta-row .lv-btn,
  #luxvis-hero .lv-cta-row .lv-btn::before,
  #luxvis-hero .lv-cta-row .lv-btn::after{
    transition-duration:.01s !important; transition-delay:0s !important;
  }
}