@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;600;700&family=Inter:wght@400;500;600&display=swap');

#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); }

#luxvis-hero .lv-title-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:7; pointer-events:none; display:none; opacity:0;
}
#luxvis-hero.lv-js .lv-title-canvas{ display:block; animation:lvFade .9s ease forwards .05s; }
@keyframes lvFade{ to{ opacity:1; } }

#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 Splitter stehen - sonst sieht man beim
   Seitenwechsel kurz den ungeteilten Schriftzug und auf Unterseiten sogar erst
   LUXVIS und dann den Seitentitel. 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; }

#luxvis-hero h1{
  font-family:var(--lvt-schrift-titel);
  font-size:calc(clamp(3.2rem, 11vw, 9.5rem) * var(--lv-title-scale, 1));
  line-height:.92; letter-spacing:-.02em; margin:0; cursor:default; user-select:none; white-space:nowrap;
  background-image: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-background-clip:text; background-clip:text; color:transparent;
}
#luxvis-hero.lv-js h1{ background-image:none; }
#luxvis-hero h1 .lv-word{ display:inline-block; }
#luxvis-hero h1 .lv-bold{ font-weight:700; }
#luxvis-hero h1 .lv-thin{ font-weight:300; }

#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:16px; justify-content:center; opacity:0; transform:translateY(18px); animation:lvUp .9s ease forwards .68s; }
#luxvis-hero .lv-btn{ padding:16px 32px; border-radius:999px; font-size:14px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease;
  display:inline-flex; align-items:center; gap:10px; }
#luxvis-hero .lv-btn-primary{ background:linear-gradient(120deg,var(--lv-gold),var(--lv-gold-light)); color:var(--lvt-schwarz); }
#luxvis-hero .lv-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(212,175,55,.35); }
#luxvis-hero .lv-btn-secondary{ background:rgba(255,255,255,.04); border:1px solid rgba(245,240,232,.22); color:var(--lv-white); }
#luxvis-hero .lv-btn-secondary:hover{ border-color:var(--lv-gold); color:var(--lv-gold); transform:translateY(-2px); }
@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; }
}
@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-scroll-cue .lv-line::after,
  #luxvis-hero .lv-emblem-inner, #luxvis-hero .lv-emblem-sheen::after{ animation:none !important; }
}