@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;600;700&family=Inter:wght@400;500;600&display=swap');
#lv-nav{
  --nav-gold:#d4af37; --nav-gold-l:#f0d879; --nav-white:#f5f0e8; --nav-grey:#ab9c98;
  /* Stellschrauben fuer die Lage des Schalters.
     --nav-top waechst wieder mit dem Fenster: 22px auf dem Handy, 48px auf
     grossen Schirmen. Vorher war es clamp(14px,2.2vw,26px) - also nur ein
     Stueck tiefer, kein fester Abstand. */
  --nav-top:clamp(22px,4vw,48px);
  --nav-right:clamp(14px,3vw,44px);
  --nav-dock-y:calc(100vh - 170px);                  /* Notwert, JS misst die echte Luecke im Hero aus */
  --nav-vw:100vw;                                    /* JS setzt hier die Fensterbreite ohne Scrollbalken ein */
  font-family:var(--lvt-schrift-text);
}
/* Eingeloggt liegt die WordPress-Adminleiste ueber der Seite und verdeckt
   alles, was oben fixiert ist. Ihre 32px kommen deshalb nur dann oben drauf,
   wenn sie wirklich da ist - Besucher sehen den Schalter unveraendert.
   Unter 783px laesst WordPress die Leiste mitscrollen, dort waere ein
   Zuschlag unnoetig tief. */
@media screen and (min-width:783px){
  body.admin-bar #lv-nav{ --nav-top:calc(clamp(22px,4vw,48px) + 32px); }
}
#lv-nav *{ box-sizing:border-box; }
/* ---------- Schalter: kantig wie das Logo ----------
   Zwei Ebenen uebereinander: aussen der Goldverlauf, innen die dunkle
   Flaeche. Beide mit derselben abgeschraegten Form beschnitten - so
   entsteht eine haarfeine Kante, die der Abschraegung folgt.
   Ein normaler border kann das nicht, der ignoriert clip-path.
   Die Ruhelage steht in top/right. Die Andockstelle im Hero wird nur
   ueber transform angefahren - das ist die billigste Bewegung, die der
   Browser kennt, und laesst Layout und Beschnitt unberuehrt.
   Die Hover-Anhebung laeuft ueber eine eigene Variable, weil ein zweites
   transform die Verschiebung sonst ueberschreiben wuerde. */
#lv-nav .lv-nav-toggle{
  --cut:11px; --tx:0px; --ty:0px; --lift:0px;
  position:fixed; top:var(--nav-top); right:var(--nav-right); z-index:9999;
  display:block; padding:1px; border:0; cursor:pointer;
  background:linear-gradient(135deg, rgba(212,175,55,.85), rgba(212,175,55,.22) 55%, rgba(212,175,55,.7));
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transform:translate(var(--tx), calc(var(--ty) + var(--lift)));
  transition:filter .4s ease;
}
/* Erst wenn JS die Andockstelle gemessen hat, wird die Bewegung freigegeben.
   Sonst wuerde der Schalter beim Seitenaufbau sichtbar nachrutschen. */
#lv-nav.lv-ready .lv-nav-toggle{
  transition:transform .8s var(--lvt-weich), filter .4s ease;
}
#lv-nav .lv-nav-toggle:hover{ --lift:-2px; filter:drop-shadow(0 8px 22px rgba(212,175,55,.3)); }
#lv-nav .lv-nav-toggle:focus{ outline:none; }
#lv-nav .lv-nav-toggle:focus-visible{ filter:drop-shadow(0 0 0 2px rgba(212,175,55,.9)); }
/* ---------- Startzustand: unten mittig im Hero ----------
   Gilt nur auf der Startseite und nur, solange das Skript die Klasse
   lv-free noch nicht gesetzt hat. Steht bereits im CSS, damit es beim
   Seitenaufbau kein Aufblitzen in der Ecke gibt - auch ohne JS. */
body.home #lv-nav:not(.lv-free) .lv-nav-toggle,
body.front-page #lv-nav:not(.lv-free) .lv-nav-toggle{
  --tx:calc(var(--nav-right) - var(--nav-vw) * .5 + 50%);
  --ty:calc(var(--nav-dock-y) - var(--nav-top));
}
/* Beim Oeffnen des Menues faehrt der Schalter in die Ecke - dort erwartet
   man den Schliessen-Knopf, und er kollidiert nicht mit der Fusszeile im Panel. */
body.home #lv-nav.is-open:not(.lv-free) .lv-nav-toggle,
body.front-page #lv-nav.is-open:not(.lv-free) .lv-nav-toggle{
  --tx:0px; --ty:0px;
}
#lv-nav .lv-nav-face{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:14px 26px 14px 20px;
  background:rgba(8,8,8,.9);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  color:var(--nav-white); font:600 11px/1 var(--lvt-schrift-titel);
  letter-spacing:.24em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease;
}
#lv-nav .lv-nav-toggle:hover .lv-nav-face{ background:rgba(14,12,6,.92); color:var(--nav-gold); }
/* Lichtreflex laeuft beim Darueberfahren durch die Flaeche */
#lv-nav .lv-nav-face::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:40%;
  background:linear-gradient(90deg, transparent, rgba(255,244,214,.28), transparent);
  transform:translateX(-180%) skewX(-18deg);
  transition:transform .8s var(--lvt-weich);
}
#lv-nav .lv-nav-toggle:hover .lv-nav-face::after{ transform:translateX(340%) skewX(-18deg); }
/* Drei Striche als Pyramide gestapelt, oeffnen sich zum Kreuz */
#lv-nav .lv-nav-bars{ position:relative; display:block; width:22px; height:13px; flex:none; }
#lv-nav .lv-nav-bars i{
  position:absolute; left:50%; height:1.6px; background:var(--nav-gold);
  transform:translateX(-50%);
  transition:transform .45s var(--lvt-schalt), width .45s var(--lvt-schalt), opacity .25s ease;
}
#lv-nav .lv-nav-bars i:nth-child(1){ top:0;      width:38%; }
#lv-nav .lv-nav-bars i:nth-child(2){ top:5.7px;  width:70%; }
#lv-nav .lv-nav-bars i:nth-child(3){ top:11.4px; width:100%; }
#lv-nav.is-open .lv-nav-bars i:nth-child(1){ width:100%; transform:translateX(-50%) translateY(5.7px) rotate(45deg); }
#lv-nav.is-open .lv-nav-bars i:nth-child(2){ width:100%; opacity:0; }
#lv-nav.is-open .lv-nav-bars i:nth-child(3){ width:100%; transform:translateX(-50%) translateY(-5.7px) rotate(-45deg); }
/* Wortwechsel MENU / CLOSE.
   Beide Woerter liegen im selben Rasterfeld uebereinander, dadurch richtet
   sich die Breite immer nach dem laengeren - nichts wird mehr abgeschnitten. */
#lv-nav .lv-nav-word{
  display:grid; height:11px; overflow:hidden; text-align:left;
}
#lv-nav .lv-nav-word span{
  grid-area:1 / 1; line-height:11px; white-space:nowrap;
  transition:transform .42s var(--lvt-schalt);
}
#lv-nav .lv-nav-word-b{ transform:translateY(100%); }
#lv-nav.is-open .lv-nav-word-a{ transform:translateY(-100%); }
#lv-nav.is-open .lv-nav-word-b{ transform:translateY(0); }
/* ---------- Panel ---------- */
#lv-nav .lv-nav-panel{ position:fixed; inset:0; z-index:9990; visibility:hidden; }
#lv-nav.is-open .lv-nav-panel{ visibility:visible; }
/* Lamellen: fahren gestaffelt herunter und bilden die Flaeche */
#lv-nav .lv-nav-bg{ position:absolute; inset:0; display:flex; }
#lv-nav .lv-nav-bg i{
  flex:1 1 20%; transform:scaleY(0); transform-origin:top;
  transition:transform .58s cubic-bezier(.76,0,.24,1);
  border-right:1px solid rgba(212,175,55,.06);
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,.10) 0px, rgba(212,175,55,.10) 1px, transparent 1px, transparent 15px),
    linear-gradient(180deg,#131313 0%,var(--lvt-schwarz) 58%,#000 100%);
}
#lv-nav.is-open .lv-nav-bg i{ transform:scaleY(1); }
#lv-nav .lv-nav-bg i:nth-child(1){ transition-delay:0.18s; }
#lv-nav .lv-nav-bg i:nth-child(2){ transition-delay:0.14s; }
#lv-nav .lv-nav-bg i:nth-child(3){ transition-delay:0.09s; }
#lv-nav .lv-nav-bg i:nth-child(4){ transition-delay:0.04s; }
#lv-nav .lv-nav-bg i:nth-child(5){ transition-delay:0.00s; }
#lv-nav.is-open .lv-nav-bg i:nth-child(1){ transition-delay:0.00s; }
#lv-nav.is-open .lv-nav-bg i:nth-child(2){ transition-delay:0.06s; }
#lv-nav.is-open .lv-nav-bg i:nth-child(3){ transition-delay:0.11s; }
#lv-nav.is-open .lv-nav-bg i:nth-child(4){ transition-delay:0.17s; }
#lv-nav.is-open .lv-nav-bg i:nth-child(5){ transition-delay:0.22s; }
/* Lichtkegel folgt dem Mauszeiger */
#lv-nav .lv-nav-spot{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity .8s ease .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,42%), rgba(212,175,55,.17), transparent 70%);
}
#lv-nav.is-open .lv-nav-spot{ opacity:1; }
/* Pyramide als Wasserzeichen, wieder ueber Maske in Gold */
#lv-nav .lv-nav-mark{
  position:absolute; right:-5%; bottom:-10%; width:min(48vw,560px); aspect-ratio:1/1; z-index:1;
  pointer-events:none; opacity:0; transform:translateY(34px) scale(.94);
  transition:opacity 1s ease .3s, transform 1.2s var(--lvt-weich) .3s;
  background:linear-gradient(140deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 34%,var(--lvt-gold-mittel) 62%,var(--lvt-gold-weiss) 82%,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;
}
#lv-nav.is-open .lv-nav-mark{ opacity:.15; transform:none; }
/* Goldlinie oben, zieht sich beim Oeffnen auf */
#lv-nav .lv-nav-rule{
  position:absolute; top:0; left:0; right:0; height:1px; z-index:3; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, transparent, var(--nav-gold), transparent);
  transition:transform .9s var(--lvt-weich) .2s;
}
#lv-nav.is-open .lv-nav-rule{ transform:scaleX(1); }
#lv-nav .lv-nav-inner{
  position:relative; z-index:2; height:100%; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(90px,12vh,140px) clamp(22px,7vw,110px) clamp(34px,6vh,64px);
}
/* ---------- Liste ---------- */
#lv-nav .lv-nav-list{ list-style:none; margin:0; padding:0; }
#lv-nav .lv-nav-list li{ overflow:hidden; }
#lv-nav .lv-nav-list a{
  position:relative; display:flex; align-items:baseline; gap:clamp(12px,2vw,30px);
  text-decoration:none; padding:clamp(4px,.85vh,10px) 0;
  opacity:0; transform:translateY(115%);
  transition:opacity .55s ease, transform .7s var(--lvt-weich);
}
#lv-nav.is-open .lv-nav-list a{ opacity:1; transform:none; }
#lv-nav.is-open .lv-nav-list li:nth-child(1) a{ transition-delay:0.20s; }
#lv-nav.is-open .lv-nav-list li:nth-child(2) a{ transition-delay:0.26s; }
#lv-nav.is-open .lv-nav-list li:nth-child(3) a{ transition-delay:0.31s; }
#lv-nav.is-open .lv-nav-list li:nth-child(4) a{ transition-delay:0.36s; }
#lv-nav.is-open .lv-nav-list li:nth-child(5) a{ transition-delay:0.42s; }
#lv-nav.is-open .lv-nav-list li:nth-child(6) a{ transition-delay:0.48s; }
#lv-nav.is-open .lv-nav-list li:nth-child(7) a{ transition-delay:0.53s; }
#lv-nav.is-open .lv-nav-list li:nth-child(8) a{ transition-delay:0.58s; }
#lv-nav.is-open .lv-nav-list li:nth-child(9) a{ transition-delay:0.64s; }
#lv-nav .lv-nav-num{
  flex:none; width:2.6em; font:600 clamp(10px,.9vw,12px)/1 var(--lvt-schrift-titel);
  letter-spacing:.2em; color:rgba(212,175,55,.5); transition:color .35s ease, transform .45s ease;
}
#lv-nav .lv-nav-text{
  font-family:var(--lvt-schrift-titel); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.45rem,4.3vw,3.5rem); line-height:1.04; letter-spacing:-.015em;
  color:var(--nav-white);
  background-image:linear-gradient(100deg,var(--lvt-gold-tief) 0%,var(--lvt-gold-licht) 20%,var(--lvt-gold-mittel) 42%,var(--lvt-gold-weiss) 64%,var(--lvt-gold-tief) 100%);
  background-size:230% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  transition:background-position .85s ease, color .3s ease, transform .5s var(--lvt-weich);
}
#lv-nav .lv-nav-list a::after{
  content:''; position:absolute; left:0; right:0; bottom:.14em; height:1px;
  background:linear-gradient(90deg, var(--nav-gold), rgba(212,175,55,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--lvt-weich);
}
#lv-nav .lv-nav-list a:hover::after,
#lv-nav .lv-nav-list a:focus-visible::after{ transform:scaleX(1); }
#lv-nav .lv-nav-list a:hover .lv-nav-text,
#lv-nav .lv-nav-list a:focus-visible .lv-nav-text{ color:transparent; background-position:0 0; transform:translateX(10px); }
#lv-nav .lv-nav-list a:hover .lv-nav-num,
#lv-nav .lv-nav-list a:focus-visible .lv-nav-num{ color:var(--nav-gold); transform:translateX(4px); }
#lv-nav .lv-nav-list a:focus{ outline:none; }
#lv-nav .lv-nav-list a:focus-visible{ outline:1px dashed rgba(212,175,55,.6); outline-offset:6px; }
/* Nicht angesteuerte Eintraege treten zurueck */
#lv-nav.is-open .lv-nav-list:hover a{ opacity:.3; }
#lv-nav.is-open .lv-nav-list:hover a:hover{ opacity:1; }
/* Aktuelle Seite */
#lv-nav .lv-nav-list a.is-current .lv-nav-num{ color:var(--nav-gold); }
#lv-nav .lv-nav-list a.is-current .lv-nav-text{ color:transparent; background-position:0 0; }
#lv-nav .lv-nav-list a.is-current::before{
  content:''; position:absolute; left:-.9em; top:50%; width:5px; height:5px; margin-top:-2px;
  background:var(--nav-gold); transform:rotate(45deg);
}
/* ---------- Fusszeile im Panel ---------- */
#lv-nav .lv-nav-meta{
  margin-top:clamp(26px,5vh,52px); padding-top:20px; border-top:1px solid rgba(245,240,232,.09);
  display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:space-between;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease .62s, transform .7s ease .62s;
}
#lv-nav.is-open .lv-nav-meta{ opacity:1; transform:none; }
#lv-nav .lv-nav-tag{
  font:600 11px/1 var(--lvt-schrift-titel); letter-spacing:.26em; text-transform:uppercase; color:var(--nav-gold);
}
#lv-nav .lv-nav-legal{ display:flex; flex-wrap:wrap; gap:8px 26px; }
#lv-nav .lv-nav-legal a{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--nav-grey);
  text-decoration:none; transition:color .3s ease;
}
#lv-nav .lv-nav-legal a:hover{ color:var(--nav-gold); }
/* ---------- Mobil ---------- */
@media (max-width:860px){
  #lv-nav .lv-nav-bg i:nth-child(4), #lv-nav .lv-nav-bg i:nth-child(5){ display:none; }
  #lv-nav .lv-nav-spot{ display:none; }
  #lv-nav .lv-nav-mark{ width:76vw; right:-16%; bottom:-6%; }
  #lv-nav .lv-nav-inner{ justify-content:flex-start; }
  #lv-nav .lv-nav-num{ width:2.2em; }
  #lv-nav .lv-nav-meta{ flex-direction:column; align-items:flex-start; }
  #lv-nav .lv-nav-toggle{ --cut:9px; }
  #lv-nav .lv-nav-face{ padding:12px 18px 12px 15px; letter-spacing:.18em; gap:11px; }
}
@media (prefers-reduced-motion: reduce){
  #lv-nav .lv-nav-bg i, #lv-nav .lv-nav-list a, #lv-nav .lv-nav-meta,
  #lv-nav .lv-nav-mark, #lv-nav .lv-nav-rule, #lv-nav .lv-nav-text,
  #lv-nav.lv-ready .lv-nav-toggle{
    transition-duration:.01s !important; transition-delay:0s !important;
  }
}