/* ============================================================
   LUXVIS — Design-Weiche  (Praefix lv-w-)
   Ladebildschirm auf der Startseite, danach die Wahl zwischen den
   Fassungen der Website. Die Liste der Fassungen steht in weiche.js;
   jede bekommt hier ihren eigenen Stil-Block (--gold, --nxt, ...).
   Kein fremdes CSS noetig, die Datei steht fuer sich.
   ============================================================ */

/* Solange die Weiche aufgebaut wird, bleibt die Seite dahinter unsichtbar.
   Gesetzt wird die Klasse vom Kopf-Skript, also bevor der Rumpf zeichnet. */
html.lv-w-warte{background:#000}
html.lv-w-warte body{visibility:hidden}
html.lv-w-an{overflow:hidden}
html.lv-w-an body{visibility:visible}

.lv-w{
  position:fixed; inset:0; z-index:99999; background:#000; color:#f5f0e8;
  font-family:'Space Grotesk',system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:1; transition:opacity .8s ease;
  /* sichtbar bleiben, auch solange der Rumpf dahinter noch verborgen ist */
  visibility:visible;
}
.lv-w[hidden]{display:none}
.lv-w.weg{opacity:0; pointer-events:none}

/* feines Raster im Hintergrund, gehoert keiner der beiden Welten */
.lv-w::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
}

/* ---------- 1. Ladebildschirm ---------- */
.lv-w-boot{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px; z-index:3;
  transition:opacity .5s ease, transform .7s cubic-bezier(.7,0,.2,1);
}
.lv-w.los .lv-w-boot{opacity:0; transform:scale(1.12); pointer-events:none}

.lv-w-mark{
  font:600 clamp(2.2rem,6.5vw,4.4rem)/1 'Space Grotesk',sans-serif;
  letter-spacing:.07em; color:#f5f0e8;
  background-image:linear-gradient(120deg,#b38728 0%,#f5e6a8 24%,#d4af37 50%,#fcf6ba 74%,#b38728 100%);
  background-size:230% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:lvwLicht 3.4s linear infinite;
}
.lv-w-mark b{font-weight:300}

.lv-w-bar{
  position:relative; width:min(420px,62vw); height:1px; background:rgba(212,175,55,.22);
}
.lv-w-bar i{
  position:absolute; left:0; top:0; height:100%; width:0;
  background:linear-gradient(90deg,#7a5e18,#fcf6ba,#d4af37);
  box-shadow:0 0 12px rgba(212,175,55,.55);
  transition:width .18s linear;
}
/* beim Aufreissen schiesst der Balken nach beiden Seiten aus dem Bild */
.lv-w-bar::before,.lv-w-bar::after{
  content:''; position:absolute; top:0; height:1px; width:50%; background:#fcf6ba;
  opacity:0; transform:scaleX(0);
  transition:transform .55s cubic-bezier(.7,0,.2,1), opacity .55s ease;
}
.lv-w-bar::before{right:50%; transform-origin:right center}
.lv-w-bar::after{left:50%; transform-origin:left center}
.lv-w.los .lv-w-bar::before,.lv-w.los .lv-w-bar::after{opacity:1; transform:scaleX(3.4)}

.lv-w-pct{
  font:600 11px/1 'JetBrains Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.34em; color:#d4af37;
}
.lv-w-log{
  min-height:2.6em; text-align:center;
  font:500 9px/1.9 'JetBrains Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.22em; text-transform:uppercase; color:#6f6558;
}
.lv-w-log b{display:block; font-weight:500; color:#9a8c74}

/* ---------- 2. Die Wahl ----------
   Die Felder nehmen den ganzen Schirm; Kopfzeile und Fussnote schweben
   darueber. Sonst zieht sich eine harte Kante quer durchs Bild. */
.lv-w-wahl{
  position:absolute; inset:0; z-index:2;
  opacity:0; pointer-events:none; transition:opacity .5s ease .1s;
}
.lv-w.los .lv-w-wahl{opacity:1; pointer-events:auto}


.lv-w-panels{
  position:absolute; inset:0; display:flex; align-items:stretch; gap:0;
}

/* ---------- 3. Ein Feld ---------- */
.lv-w-p{
  position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(10px,1.8vh,20px);
  padding:clamp(20px,4vw,60px) clamp(14px,3vw,40px);
  border:0; background:transparent; color:inherit; cursor:pointer; overflow:hidden;
  font-family:inherit; text-align:center;
  opacity:0; transform:translateY(60px) scale(.94);
  transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1),
             filter .5s ease, flex-grow .6s cubic-bezier(.16,1,.3,1);
}
.lv-w.los .lv-w-p{opacity:1; transform:none}
.lv-w.los .lv-w-p:nth-child(1){transition-delay:.30s,.30s,0s,0s}
.lv-w.los .lv-w-p:nth-child(2){transition-delay:.42s,.42s,0s,0s}
.lv-w.los .lv-w-p:nth-child(3){transition-delay:.54s,.54s,0s,0s}
.lv-w.los .lv-w-p:nth-child(4){transition-delay:.66s,.66s,0s,0s}

/* Trennfuge: schraeg, je Feld eine Seite */
.lv-w-p + .lv-w-p{margin-left:-1px}
.lv-w-p::after{ /* Fugenlinie */
  content:''; position:absolute; top:-10%; bottom:-10%; left:0; width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-9deg); opacity:0; transition:opacity .6s ease .6s;
}
.lv-w.los .lv-w-p + .lv-w-p::after{opacity:1}

/* andere Felder treten zurueck, sobald eines angesteuert wird */
@media (hover:hover){
  .lv-w-panels:hover .lv-w-p{filter:brightness(.5) saturate(.55)}
  .lv-w-panels:hover .lv-w-p:hover{filter:none; flex-grow:1.24}
}
.lv-w-p:focus-visible{outline:1px dashed rgba(255,255,255,.7); outline-offset:-14px}

.lv-w-flaeche{position:absolute; inset:0; z-index:0; pointer-events:none}
.lv-w-glanz{position:absolute; inset:0; z-index:1; pointer-events:none}
.lv-w-inhalt{position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:clamp(8px,1.6vh,18px)}

.lv-w-n{
  font:600 10px/1 'JetBrains Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.34em; opacity:.6;
}
.lv-w-mk{display:block; line-height:.92}
.lv-w-sub{
  font:500 9px/1.8 'JetBrains Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.26em; text-transform:uppercase; max-width:30ch;
}
.lv-w-cta{
  margin-top:clamp(4px,1.2vh,14px);
  font:600 10px/1 'Space Grotesk',sans-serif; letter-spacing:.24em; text-transform:uppercase;
  padding:13px 26px; display:inline-block; transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.lv-w-p:hover .lv-w-cta{transform:translateY(-2px)}

/* ---------- 4a. Fassung GOLD: Formensprache der Originalseite ---------- */
.lv-w-p--gold .lv-w-flaeche{
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(212,175,55,.13),transparent 62%),
    repeating-linear-gradient(58deg,rgba(212,175,55,.07) 0 1px,transparent 1px 46px),
    linear-gradient(180deg,#0a0a0a,#050505);
}
/* Winkelklammern statt Rahmen */
.lv-w-p--gold .lv-w-flaeche::before,.lv-w-p--gold .lv-w-flaeche::after{
  content:''; position:absolute; width:46px; height:46px; border:1px solid rgba(212,175,55,.55);
  transition:width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1);
}
.lv-w-p--gold .lv-w-flaeche::before{left:clamp(14px,3vw,40px); top:clamp(14px,3vw,40px); border-right:0; border-bottom:0}
.lv-w-p--gold .lv-w-flaeche::after{right:clamp(14px,3vw,40px); bottom:clamp(14px,3vw,40px); border-left:0; border-top:0}
.lv-w-p--gold:hover .lv-w-flaeche::before,.lv-w-p--gold:hover .lv-w-flaeche::after{width:76px; height:76px}
/* Lichtreflex ueber die Flaeche */
.lv-w-p--gold .lv-w-glanz{
  position:absolute; top:-30%; left:0; width:38%; height:160%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,246,220,.16),transparent);
  transform:translateX(-190%) skewX(-18deg);
  transition:transform .95s cubic-bezier(.16,1,.3,1);
}
.lv-w-p--gold:hover .lv-w-glanz{transform:translateX(330%) skewX(-18deg)}

.lv-w-p--gold .lv-w-n{color:#b38728}
.lv-w-p--gold .lv-w-mk{
  font:600 clamp(2.6rem,7.6vw,6.6rem)/1 'Space Grotesk',sans-serif; letter-spacing:.08em;
  background-image:linear-gradient(120deg,#b38728 0%,#f5e6a8 24%,#d4af37 50%,#fcf6ba 74%,#b38728 100%);
  background-size:230% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transition:background-position .85s ease;
}
.lv-w-p--gold:hover .lv-w-mk{background-position:0 0}
.lv-w-p--gold .lv-w-sub{color:#ab9c98}
.lv-w-p--gold .lv-w-cta{
  --cut:9px; position:relative; color:#0a0a0a;
  background:linear-gradient(120deg,#b38728 0%,#f5e6a8 24%,#d4af37 50%,#fcf6ba 74%,#b38728 100%);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- 4b. Fassung NXT LVL: Formensprache des Relaunch ---------- */
.lv-w-p--nxt .lv-w-flaeche{
  background:
    radial-gradient(120% 90% at 50% 45%,rgba(255,255,255,.06),transparent 60%),
    linear-gradient(180deg,#080808,#040404);
}
/* Scanlinien */
.lv-w-p--nxt .lv-w-flaeche::before{
  content:''; position:absolute; inset:0; opacity:.55;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
}
/* Haarlinien-Rahmen, scharfkantig */
.lv-w-p--nxt .lv-w-flaeche::after{
  content:''; position:absolute; inset:clamp(14px,3vw,40px); border:1px solid rgba(255,255,255,.14);
  transition:border-color .45s ease, inset .5s cubic-bezier(.16,1,.3,1);
}
.lv-w-p--nxt:hover .lv-w-flaeche::after{border-color:rgba(255,255,255,.42)}

.lv-w-p--nxt .lv-w-n{color:#5c5c5c}
.lv-w-p--nxt .lv-w-mk{
  font:600 clamp(2.4rem,7vw,6rem)/.86 'Space Grotesk',sans-serif;
  letter-spacing:.06em; color:#ececec; display:block; position:relative;
}
/* Wortmarke steht gestapelt: NXT halbfett, LVL leicht - wie LUX / VIS */
.lv-w-p--nxt .lv-w-mk b{display:block; font-weight:600}
.lv-w-p--nxt .lv-w-mk i{display:block; font-style:normal; font-weight:300; color:#c9c9c9}
/* Stoerbild beim Anfahren: die beiden Zeilen selbst verrutschen kurz.
   Kein zweiter Textkoerper - der wuerde die gestapelte Marke zerlegen. */
.lv-w-p--nxt:hover .lv-w-mk b{animation:lvwStoer1 .62s steps(3) infinite}
.lv-w-p--nxt:hover .lv-w-mk i{animation:lvwStoer2 .62s steps(3) infinite}
.lv-w-p--nxt .lv-w-sub{color:#8a8a8a}
.lv-w-p--nxt .lv-w-cta{
  color:#ececec; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.03);
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease;
}
.lv-w-p--nxt:hover .lv-w-cta{background:#f2f2f2; color:#050505}

/* ---------- 5. Beim Waehlen: das Feld nimmt den Schirm ----------
   Gewachsen wird ueber flex-grow, nicht ueber transform: ein
   transformierter Vorfahre wuerde position:fixed einsperren und die
   Flaeche bliebe im Feld stehen. */
/* Der Pfad ueber .lv-w-panels ist noetig, um die Hover-Regel weiter
   oben zu ueberbieten - sonst bleibt das Feld auf Hover-Breite stehen. */
.lv-w.gewaehlt .lv-w-panels .lv-w-p{
  transition:flex-grow .85s cubic-bezier(.7,0,.2,1), opacity .5s ease, filter .4s ease;
  filter:none;
}
.lv-w.gewaehlt .lv-w-panels .lv-w-p:not(.aktiv){flex-grow:.0001; opacity:0}
.lv-w.gewaehlt .lv-w-panels .lv-w-p.aktiv{flex-grow:60; z-index:5}
.lv-w-p.aktiv .lv-w-inhalt{
  transform:scale(1.1); transition:transform .85s cubic-bezier(.7,0,.2,1);
}
.lv-w.gewaehlt .lv-w-fuss,.lv-w.gewaehlt .lv-w-p::after{
  opacity:0; transition:opacity .35s ease;
}
.lv-w-blitz{
  position:fixed; inset:0; z-index:9; pointer-events:none; background:#fff; opacity:0;
}
.lv-w.gewaehlt .lv-w-blitz{animation:lvwBlitz .7s ease forwards}

/* ---------- 6. Fussnote und Umschalter ---------- */
.lv-w-fuss{
  position:absolute; bottom:0; left:0; right:0; z-index:3; pointer-events:none;
  text-align:center; padding:clamp(26px,5vh,60px) 20px clamp(16px,3vh,34px);
  background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,transparent 100%);
  font:500 9px/1.8 'JetBrains Mono',ui-monospace,Consolas,monospace;
  letter-spacing:.22em; text-transform:uppercase; color:#5f574c;
  opacity:0; transition:opacity .6s ease .8s;
}
.lv-w.los .lv-w-fuss{opacity:1}

/* Umschalter im Menuefuss der Originalseite */
.lv-w-schalter{
  --cut:7px; display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  padding:9px 16px; cursor:pointer; border:0; background:rgba(212,175,55,.08);
  color:#ab9c98; font:600 9px/1 'Space Grotesk',sans-serif; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:background .35s ease,color .35s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.lv-w-schalter b{font-weight:600; color:#d4af37}
.lv-w-schalter i{font-style:normal; opacity:.6}
.lv-w-schalter:hover{background:rgba(212,175,55,.2); color:#f5f0e8; transform:translateY(-2px)}

/* ---------- 7. Bewegung ---------- */
@keyframes lvwLicht{0%{background-position:100% 0}100%{background-position:-130% 0}}
@keyframes lvwBlitz{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
@keyframes lvwStoer1{
  0%{transform:none; text-shadow:none}
  34%{transform:translateX(4px); text-shadow:-4px 0 rgba(255,255,255,.5)}
  67%{transform:translateX(-3px); text-shadow:3px 0 rgba(150,150,150,.55)}
  100%{transform:none; text-shadow:none}
}
@keyframes lvwStoer2{
  0%{transform:none; text-shadow:none}
  34%{transform:translateX(-3px); text-shadow:3px 0 rgba(150,150,150,.5)}
  67%{transform:translateX(4px); text-shadow:-4px 0 rgba(255,255,255,.45)}
  100%{transform:none; text-shadow:none}
}

/* ---------- 8. Schmale Schirme: untereinander ---------- */
@media (max-width:780px){
  .lv-w-panels{flex-direction:column}
  .lv-w-p{padding:26px 18px}
  .lv-w-p + .lv-w-p{margin-left:0; margin-top:-1px}
  .lv-w-p::after{top:0; bottom:auto; left:-10%; right:-10%; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:none}
  .lv-w-p--gold .lv-w-mk{font-size:clamp(2rem,13vw,3.4rem)}
  .lv-w-p--nxt .lv-w-mk{font-size:clamp(1.8rem,11vw,3rem)}
  .lv-w-p--gold .lv-w-flaeche::before,.lv-w-p--gold .lv-w-flaeche::after{width:26px; height:26px}
  @media (hover:hover){.lv-w-panels:hover .lv-w-p:hover{flex-grow:1}}
}

/* ---------- 9. Wer wenig Bewegung will, bekommt wenig ---------- */
@media (prefers-reduced-motion: reduce){
  .lv-w,.lv-w *{animation:none !important; transition-duration:.01ms !important}
  .lv-w-p{opacity:1; transform:none}
}