/* ============================================================
   LUXVIS RELAUNCH — Design-System "LX"
   Dunkles, futuristisches System-Design (Terminal/HUD).
   Ein Stylesheet fuer die ganze Seite; Abschnitte sind markiert.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --lx-bg:#0f0f0f;
  --lx-bg2:#141414;
  --lx-panel:#1a1a1a;
  --lx-panel2:#212121;
  --lx-line:#2f2f2f;
  --lx-line2:#434343;
  --lx-txt:#ececec;
  --lx-mut:#969696;
  --lx-dim:#5c5c5c;
  --lx-acc:#f2f2f2;
  --lx-acc2:#ffffff;
  --lx-accdim:rgba(255,255,255,.08);
  /* Die Akzentfarbe der Marke. #690000 traegt in gold das VIS im
     Hero - hier fuehrt sie dieselbe Rolle. Als Flaeche wirkt sie
     ueber den Farbton, als Linie oder Zeichen braucht sie die
     hellere Schwester akz2. Schrift bleibt weiss. */
  --lx-akz:#690000;
  --lx-akz2:#c11515;
  --lx-akzdim:rgba(105,0,0,.26);
  --lx-akzglut:rgba(193,21,21,.45);
  --lx-gold:#d4af37;
  --lx-ok:#e6e6e6;
  --lx-warn:#8a8a8a;
  --lx-mono:'JetBrains Mono','Cascadia Code',Consolas,monospace;
  --lx-disp:'Space Grotesk',sans-serif;
  --lx-body:'Inter',sans-serif;
  --lx-hud:'Orbitron',var(--lx-disp);
  --lx-wrap:1240px;
  --lx-pad:clamp(18px,3vw,44px);
  --lx-e:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Grund ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--lx-bg);color:var(--lx-txt);
  font:400 16px/1.7 var(--lx-body);
  -webkit-font-smoothing:antialiased;
}
body::before{ /* feines Raster, sitewide */
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
}
body::after{ /* Vignette */
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.55) 100%);
}
::selection{background:var(--lx-akz);color:#fff}
a{color:var(--lx-acc);text-decoration:none}
a:hover{color:var(--lx-acc2)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:1px dashed var(--lx-akz2);outline-offset:4px}
strong{color:var(--lx-txt);font-weight:600}
p{margin:0 0 1em}

/* ---------- 3. Typo-Bausteine ---------- */
.lx-tag{
  display:inline-flex;align-items:center;gap:10px;
  font:500 11px/1 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--lx-acc);
}
.lx-tag::before{content:'';width:26px;height:1px;background:var(--lx-akz2);opacity:.9}
.lx-h1{
  margin:0;font-family:var(--lx-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.1rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.01em;
}
.lx-h2{
  margin:.55em 0 .3em;font-family:var(--lx-disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.55rem,3.6vw,2.7rem);line-height:1.06;letter-spacing:-.01em;
}
.lx-h1 span,.lx-h2 span{color:var(--lx-acc)}
.lx-lead{max-width:760px;color:var(--lx-mut);font-size:clamp(.98rem,1.4vw,1.08rem)}
.lx-lead strong{color:var(--lx-txt)}
.lx-mono{font-family:var(--lx-mono)}

/* ---------- 4. Layout ---------- */
.lx-main{position:relative;z-index:1}
.lx-sec{padding:clamp(56px,9vw,120px) 0;position:relative}
.lx-sec--tight{padding:clamp(36px,6vw,72px) 0}
.lx-wrap{max-width:var(--lx-wrap);margin:0 auto;padding:0 var(--lx-pad)}
.lx-sec-head{margin-bottom:clamp(26px,4vw,52px)}
.lx-sec-line{height:1px;background:linear-gradient(90deg,var(--lx-akz2),var(--lx-line2) 34%,transparent 70%);margin-top:20px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--lx-e) .2s}
.in .lx-sec-line{transform:scaleX(1)}
.lx-grid{display:grid;gap:clamp(14px,1.8vw,22px)}
.lx-grid--2{grid-template-columns:repeat(2,1fr)}
.lx-grid--3{grid-template-columns:repeat(3,1fr)}
.lx-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.lx-grid--4{grid-template-columns:repeat(2,1fr)}.lx-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lx-grid--2,.lx-grid--3,.lx-grid--4{grid-template-columns:1fr}}

/* ---------- 5. Ecken-Marker (Signatur) ---------- */
.lx-corners{position:relative}
.lx-corners::before,.lx-corners::after,
.lx-corners>.lx-c::before,.lx-corners>.lx-c::after{
  content:'';position:absolute;width:14px;height:14px;pointer-events:none;
  border:0 solid var(--lx-line2);transition:border-color .35s ease;
}
.lx-corners::before{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.lx-corners::after{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.lx-corners>.lx-c::before{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.lx-corners>.lx-c::after{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}
.lx-corners:hover::before,.lx-corners:hover::after,
.lx-corners:hover>.lx-c::before,.lx-corners:hover>.lx-c::after{border-color:var(--lx-akz2)}

/* ---------- 6. Karten ---------- */
.lx-card{
  position:relative;background:var(--lx-panel);border:1px solid var(--lx-line);
  padding:clamp(18px,2.4vw,30px);
  transition:transform .22s var(--lx-e),border-color .3s ease,background .3s ease;
}
@media(hover:hover){
  .lx-card:hover{transform:translateY(-4px);border-color:var(--lx-line2);background:var(--lx-panel2)}
  .lx-cardlist:hover .lx-card{opacity:.45}
  .lx-cardlist:hover .lx-card:hover{opacity:1}
}
.lx-card{transition:transform .22s var(--lx-e),border-color .3s ease,background .3s ease,opacity .3s ease}
.lx-num{
  font:600 12px/1 var(--lx-mono);color:var(--lx-acc);letter-spacing:.12em;
  display:block;margin-bottom:14px;
}
.lx-num::after{content:'';display:block;width:22px;height:1px;background:var(--lx-line2);margin-top:10px}
.lx-card h3{
  margin:0 0 10px;font-family:var(--lx-disp);font-weight:600;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.03em;line-height:1.3;
}
.lx-card p{margin:0;color:var(--lx-mut);font-size:.93rem}
.lx-card p strong{color:var(--lx-txt)}
a.lx-card{display:block;color:inherit}
.lx-card .lx-more{
  display:inline-block;margin-top:16px;font:500 10px/1 var(--lx-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--lx-acc);
}
.lx-card .lx-more::after{content:' ->';letter-spacing:0}

/* ---------- 7. Buttons ---------- */
.lx-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:1px solid var(--lx-line2);background:transparent;
  color:var(--lx-txt);cursor:pointer;overflow:hidden;
  font:600 11px/1 var(--lx-mono);letter-spacing:.2em;text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease,transform .18s var(--lx-e);
}
.lx-btn::before{
  content:'';position:absolute;inset:0;background:var(--lx-acc);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--lx-e);z-index:-1;
}
.lx-btn{isolation:isolate;z-index:0}
@media(hover:hover){
  .lx-btn:hover{color:#0a0a0a;border-color:var(--lx-acc);transform:translateY(-2px)}
  .lx-btn:hover::before{transform:scaleX(1)}
}
.lx-btn--p{background:var(--lx-akz);border-color:var(--lx-akz);color:#fff}
.lx-btn--p::before{background:var(--lx-akz2)}
@media(hover:hover){.lx-btn--p:hover{color:#fff;border-color:var(--lx-akz2)}}
.lx-btn--ghost{border-color:var(--lx-line)}
.lx-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ---------- 8. Terminal-Fenster ---------- */
.lx-term{background:#121212;border:1px solid var(--lx-line)}
.lx-term-bar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--lx-line);
  font:500 10px/1 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-dim);
}
.lx-term-bar i{width:7px;height:7px;border:1px solid var(--lx-line2);display:inline-block}
.lx-term-bar i:first-child{background:var(--lx-akz);border-color:var(--lx-akz2)}
.lx-term-body{padding:clamp(16px,2vw,26px);font-family:var(--lx-mono);font-size:.86rem;line-height:1.9;color:var(--lx-mut)}
.lx-term-body .k{color:var(--lx-acc)}
.lx-term-body .v{color:var(--lx-txt)}
.lx-term-body .c{color:var(--lx-dim)}
.lx-term-body .ok{color:var(--lx-ok)}

/* ---------- 9. Stats ---------- */
.lx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lx-line);border:1px solid var(--lx-line)}
.lx-stat{background:var(--lx-panel);padding:clamp(16px,2.4vw,30px);text-align:left}
.lx-stat b{
  display:block;font:600 clamp(1.7rem,3.6vw,2.6rem)/1 var(--lx-disp);color:var(--lx-txt);
}
.lx-stat b em{font-style:normal;color:var(--lx-acc)}
.lx-stat span{display:block;margin-top:8px;font:500 10px/1.5 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lx-dim)}
@media(max-width:640px){.lx-stats{grid-template-columns:1fr}}

/* ---------- 10. Medienbuehne ---------- */
.lx-media{position:relative;background:#111820;border:1px solid var(--lx-line)}
.lx-media-frame{position:relative;aspect-ratio:16/9;overflow:hidden}
.lx-media-frame iframe,.lx-media-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lx-media-frame:fullscreen{background:#000}
.lx-media-cap{
  display:flex;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--lx-line);
  font:500 10px/1.6 var(--lx-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lx-dim);
}
.lx-media-cap::before{content:'>';color:var(--lx-akz2)}
.lx-load{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    #121212;
  background-size:32px 32px,32px 32px,auto;
  color:var(--lx-mut);font:500 11px/1 var(--lx-mono);letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;border:0;width:100%;z-index:2;
}
.lx-load b{color:var(--lx-acc);font-weight:600}
.lx-load small{letter-spacing:.14em;font-size:9px;color:var(--lx-dim)}
.lx-load .lx-play{
  width:54px;height:54px;border:1px solid var(--lx-line2);display:grid;place-items:center;transition:border-color .3s,background .3s;
}
.lx-load .lx-play::before{content:'';border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--lx-akz2)}
@media(hover:hover){.lx-load:hover .lx-play{border-color:var(--lx-akz2);background:var(--lx-akzdim)}}

/* ---------- 11. HUD-Kopfleiste ---------- */
.lx-hud{
  position:fixed;top:0;left:0;right:0;z-index:900;height:58px;
  display:flex;align-items:center;gap:18px;padding:0 clamp(14px,2.4vw,32px);
  background:rgba(15,15,15,.9);border-bottom:1px solid var(--lx-line);
}
.lx-hud-mark{display:flex;align-items:center;gap:12px;color:var(--lx-txt)}
.lx-hud-mark:hover{color:var(--lx-txt)}
.lx-hud-mark img{width:26px;height:26px;object-fit:contain;filter:invert(1)}
.lx-hud-mark b{font:600 14px/1 var(--lx-disp);letter-spacing:.22em;text-transform:uppercase}
.lx-hud-mark b i{font-style:normal;font-weight:300;color:var(--lx-acc)}
.lx-hud-mark small{font:500 8px/1.5 var(--lx-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-dim);display:block;margin-top:3px}
.lx-hud-state{
  flex:1;display:flex;align-items:center;gap:14px;justify-content:center;
  font:500 10px/1 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-dim);
  white-space:nowrap;overflow:hidden;
}
.lx-hud-state .dot{width:6px;height:6px;background:var(--lx-ok);box-shadow:0 0 8px rgba(255,255,255,.6);flex:none}
.lx-hud-state .pg{color:var(--lx-mut)}
.lx-hud-right{display:flex;align-items:center;gap:10px}
.lx-hud-clock{font:500 11px/1 var(--lx-mono);letter-spacing:.14em;color:var(--lx-mut);min-width:74px;text-align:right}
.lx-ctl{
  display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;cursor:pointer;
  background:transparent;border:1px solid var(--lx-line);color:var(--lx-mut);
  font:600 9px/1 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .3s,color .3s,background .3s;
}
@media(hover:hover){.lx-ctl:hover{border-color:var(--lx-acc);color:var(--lx-txt)}}
.lx-ctl[aria-pressed="true"]{border-color:var(--lx-akz2);color:var(--lx-txt);background:var(--lx-akzdim)}
.lx-ctl .bars{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
.lx-ctl .bars i{width:2px;height:4px;background:currentColor;transition:height .3s}
.lx-ctl[aria-pressed="true"] .bars i{animation:lxEq .9s ease-in-out infinite alternate}
.lx-ctl[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.2s}
.lx-ctl[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.45s}
@keyframes lxEq{from{height:3px}to{height:10px}}
@media(max-width:860px){.lx-hud-state{display:none}.lx-hud-clock{display:none}.lx-ctl span.t{display:none}}

/* Menue-Knopf */
.lx-menu-btn{min-width:92px;justify-content:center}
.lx-menu-btn .gl{display:inline-flex;flex-direction:column;gap:3px}
.lx-menu-btn .gl i{width:16px;height:1px;background:currentColor;transition:transform .35s var(--lx-e),opacity .3s}
body.lx-nav-open .lx-menu-btn .gl i:nth-child(1){transform:translateY(4px) rotate(45deg)}
body.lx-nav-open .lx-menu-btn .gl i:nth-child(2){opacity:0}
body.lx-nav-open .lx-menu-btn .gl i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

/* ---------- 12. Vollbild-Navigation ---------- */
.lx-nav{
  position:fixed;inset:0;z-index:880;background:transparent;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  overflow:auto;padding-top:58px;
}
.lx-nav-slats{position:fixed;inset:0;z-index:-1;display:flex;pointer-events:none}
.lx-nav-slats i{
  flex:1;background:rgba(15,15,15,.985);border-right:1px solid rgba(255,255,255,.03);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--lx-e);
}
body.lx-nav-open .lx-nav-slats i{transform:scaleY(1)}
body.lx-nav-open .lx-nav-slats i:nth-child(2){transition-delay:.05s}
body.lx-nav-open .lx-nav-slats i:nth-child(3){transition-delay:.1s}
body.lx-nav-open .lx-nav-slats i:nth-child(4){transition-delay:.15s}
body.lx-nav-open .lx-nav-slats i:nth-child(5){transition-delay:.2s}
body.lx-nav-open .lx-nav{opacity:1;visibility:visible}
body.lx-nav-open{overflow:hidden}
.lx-nav-list{list-style:none;margin:0;padding:clamp(20px,4vh,48px) clamp(18px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.lx-nav-list a{
  position:relative;display:flex;align-items:baseline;gap:18px;padding:7px 0;color:var(--lx-txt);
  font:600 clamp(1.05rem,2.6vh,1.5rem)/1.25 var(--lx-disp);text-transform:uppercase;letter-spacing:.02em;
  opacity:0;transform:translateX(-26px);transition:opacity .45s ease,transform .55s var(--lx-e),color .3s;
  border-bottom:1px solid transparent;
}
.lx-nav-list a::after{
  content:'';position:absolute;left:48px;right:30%;bottom:2px;height:1px;background:var(--lx-akz2);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--lx-e);
}
@media(hover:hover){.lx-nav-list a:hover::after{transform:scaleX(1)}}
body.lx-nav-open .lx-nav-list a{opacity:1;transform:none}
body.lx-nav-open .lx-nav-list li:nth-child(1) a{transition-delay:.16s}
body.lx-nav-open .lx-nav-list li:nth-child(2) a{transition-delay:.2s}
body.lx-nav-open .lx-nav-list li:nth-child(3) a{transition-delay:.24s}
body.lx-nav-open .lx-nav-list li:nth-child(4) a{transition-delay:.28s}
body.lx-nav-open .lx-nav-list li:nth-child(5) a{transition-delay:.32s}
body.lx-nav-open .lx-nav-list li:nth-child(6) a{transition-delay:.36s}
body.lx-nav-open .lx-nav-list li:nth-child(7) a{transition-delay:.4s}
body.lx-nav-open .lx-nav-list li:nth-child(8) a{transition-delay:.44s}
body.lx-nav-open .lx-nav-list li:nth-child(9) a{transition-delay:.48s}
body.lx-nav-open .lx-nav-list li:nth-child(10) a{transition-delay:.52s}
body.lx-nav-open .lx-nav-list li:nth-child(11) a{transition-delay:.56s}
body.lx-nav-open .lx-nav-list li:nth-child(12) a{transition-delay:.6s}
body.lx-nav-open .lx-nav-list li:nth-child(13) a{transition-delay:.64s}
.lx-nav-list a i{font:500 10px/1 var(--lx-mono);color:var(--lx-dim);font-style:normal;letter-spacing:.14em;min-width:30px}
@media(hover:hover){
  .lx-nav-list:hover a{opacity:.35}
  .lx-nav-list:hover a:hover{opacity:1;color:var(--lx-acc)}
  .lx-nav-list:hover a:hover i{color:var(--lx-acc)}
}
.lx-nav-list a[aria-current="page"]{color:var(--lx-txt)}
.lx-nav-list a[aria-current="page"] i{color:var(--lx-akz2)}
.lx-nav-list a[aria-current="page"]::after{content:'// AKTIV';font:500 9px/1 var(--lx-mono);letter-spacing:.2em;color:var(--lx-dim)}
.lx-nav-meta{
  border-left:1px solid var(--lx-line);padding:clamp(20px,4vh,48px) clamp(18px,3vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:26px;
  font:500 11px/1.9 var(--lx-mono);color:var(--lx-mut);
  opacity:0;transform:translateY(14px);transition:opacity .5s ease .45s,transform .6s var(--lx-e) .45s;
}
body.lx-nav-open .lx-nav-meta{opacity:1;transform:none}
.lx-nav-meta h4{margin:0 0 8px;font:600 9px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lx-dim)}
.lx-nav-meta a{display:block;color:var(--lx-mut)}
.lx-nav-meta a:hover{color:var(--lx-acc)}
.lx-nav-tagline{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lx-dim)}
@media(max-width:860px){
  .lx-nav{grid-template-columns:1fr}
  .lx-nav-meta{border-left:0;border-top:1px solid var(--lx-line);justify-content:flex-start}
  .lx-nav-list{justify-content:flex-start}
}

/* ---------- 13. Boot-Overlay (Game-Boot) ---------- */
.lx-boot{position:fixed;inset:0;z-index:1000;overflow:hidden}
.lx-boot-half{position:absolute;left:0;right:0;background:var(--lx-bg);transition:transform .7s var(--lx-e)}
.lx-boot-half.a{top:0;bottom:50%;border-bottom:1px solid rgba(255,255,255,.22)}
.lx-boot-half.b{top:50%;bottom:0}
.lx-boot.done .lx-boot-half.a{transform:translateY(-101%)}
.lx-boot.done .lx-boot-half.b{transform:translateY(101%)}
.lx-boot.done{pointer-events:none}
.lx-boot.weg{visibility:hidden}
.lx-boot-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .3s ease;padding:0 20px;text-align:center;
}
.lx-boot.done .lx-boot-inner{opacity:0}
.lx-boot-logo{
  position:relative;font:700 clamp(2rem,6vw,3.2rem)/1 var(--lx-disp);
  letter-spacing:.26em;text-transform:uppercase;color:var(--lx-txt);
  padding-left:.26em; /* gleicht die Laufweite optisch aus */
}
.lx-boot-logo b{color:var(--lx-acc);font-weight:700}
.lx-glitch::before,.lx-glitch::after{
  content:attr(data-txt);position:absolute;inset:0;pointer-events:none;padding-left:inherit;
}
.lx-glitch::before{color:var(--lx-akz2);animation:lxGl1 2.1s steps(1) infinite}
.lx-glitch::after{color:#6f6f6f;animation:lxGl2 2.7s steps(1) infinite}
@keyframes lxGl1{
  0%,88%{opacity:0;transform:none;clip-path:inset(0 0 60% 0)}
  90%{opacity:.85;transform:translate(-4px,-2px);clip-path:inset(8% 0 64% 0)}
  93%{opacity:.6;transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}
  96%,100%{opacity:0;transform:none}
}
@keyframes lxGl2{
  0%,90%{opacity:0;transform:none;clip-path:inset(62% 0 0 0)}
  92%{opacity:.85;transform:translate(4px,2px);clip-path:inset(58% 0 6% 0)}
  95%{opacity:.55;transform:translate(-3px,-1px);clip-path:inset(20% 0 55% 0)}
  97%,100%{opacity:0;transform:none}
}
.lx-boot-sub{font:500 9px/1 var(--lx-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-dim)}
.lx-boot-log{
  min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  font:500 10px/1.7 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-dim);
}
.lx-boot-log .ok{color:var(--lx-ok)}
.lx-boot-log .ak{color:var(--lx-acc)}
.lx-boot-bar{display:flex;gap:3px;width:min(340px,72vw)}
.lx-boot-bar i{
  flex:1;height:8px;background:var(--lx-line);
  clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%);
}
.lx-boot-bar i.an{background:var(--lx-akz2);box-shadow:0 0 10px var(--lx-akzglut)}
.lx-boot-meta{
  display:flex;gap:22px;align-items:baseline;
  font:500 10px/1 var(--lx-mono);letter-spacing:.2em;color:var(--lx-dim);text-transform:uppercase;
}
.lx-boot-meta b{font:600 20px/1 var(--lx-mono);color:var(--lx-acc);letter-spacing:.08em}
.lx-boot-scan{
  position:absolute;left:0;right:0;top:-8%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:lxScan 2.2s linear infinite;
}
@keyframes lxScan{from{top:-4%}to{top:104%}}

/* ---------- 14. Hero ---------- */
.lx-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:58px}
.lx-hero--sub{min-height:52vh;align-items:flex-end;padding-bottom:clamp(30px,5vh,60px)}
.lx-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.lx-hero-fade{position:absolute;inset:auto 0 0 0;height:32vh;z-index:1;background:linear-gradient(transparent,var(--lx-bg));pointer-events:none}
.lx-hero .lx-wrap{position:relative;z-index:2;width:100%}
.lx-hero-sys{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:26px;
  font:500 10px/1 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lx-dim);
}
.lx-hero-sys b{color:var(--lx-akz2);font-weight:500}
.lx-hero-title{margin:0;font-family:var(--lx-disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,9.5vw,7.2rem);line-height:.98;letter-spacing:.02em}
.lx-hero-title .a{color:var(--lx-txt);font-weight:600}
.lx-hero-title .b{color:var(--lx-akz);font-weight:300;-webkit-text-stroke:1px var(--lx-akz2);
  text-shadow:0 0 38px var(--lx-akzdim)}
.lx-hero-sub{
  margin:26px 0 0;max-width:640px;color:var(--lx-mut);font-size:clamp(.98rem,1.5vw,1.12rem);
}
.lx-hero-type{font-family:var(--lx-mono);font-size:.86em;color:var(--lx-acc);letter-spacing:.06em}
.lx-hero-type::after{content:'_';animation:lxBlink 1s steps(1) infinite}
@keyframes lxBlink{50%{opacity:0}}
.lx-hero-scroll{
  position:absolute;right:clamp(14px,2.4vw,32px);bottom:26px;z-index:2;
  font:500 9px/1 var(--lx-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-dim);
  writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;
}
.lx-hero-scroll::after{content:'';width:1px;height:44px;background:linear-gradient(var(--lx-akz2),transparent);animation:lxDrop 1.8s var(--lx-e) infinite}
@keyframes lxDrop{from{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1)}to{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 15. Footer ---------- */
.lx-footer{position:relative;z-index:1;border-top:1px solid var(--lx-line);background:var(--lx-bg2);margin-top:clamp(40px,7vw,90px)}
.lx-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,44px);padding:clamp(36px,5vw,64px) 0}
.lx-footer h4{margin:0 0 16px;font:600 10px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lx-dim)}
.lx-footer ul{list-style:none;margin:0;padding:0}
.lx-footer ul a{display:block;padding:4px 0;color:var(--lx-mut);font-size:.9rem}
.lx-footer ul a:hover{color:var(--lx-acc)}
.lx-footer-brand b{font:600 20px/1 var(--lx-disp);letter-spacing:.22em;text-transform:uppercase;color:var(--lx-txt)}
.lx-footer-brand b i{font-style:normal;font-weight:300;color:var(--lx-acc)}
.lx-footer-brand p{margin:14px 0 0;color:var(--lx-mut);font-size:.88rem;max-width:300px}
.lx-footer-cta p{color:var(--lx-mut);font-size:.9rem;margin:0 0 18px}
.lx-footer-sys{
  border-top:1px solid var(--lx-line);padding:16px 0;display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
  font:500 9px/1.8 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-dim);
}
.lx-footer-sys .sp{flex:1}
.lx-footer-sys a{color:var(--lx-dim)}
.lx-footer-sys a:hover{color:var(--lx-acc)}
/* Design-Umschalter: fuehrt zurueck zur Weiche auf der Startseite */
.lx-footer-sys a.lx-design{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;
  border:1px solid var(--lx-line2);color:var(--lx-mut);
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.lx-footer-sys a.lx-design b{font-weight:600;color:var(--lx-txt)}
.lx-footer-sys a.lx-design i{font-style:normal;color:var(--lx-dim)}
.lx-footer-sys a.lx-design:hover{border-color:var(--lx-acc);color:var(--lx-acc2);background:rgba(255,255,255,.05)}
@media(max-width:1020px){.lx-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lx-footer-grid{grid-template-columns:1fr}}

/* ---------- 16. Einblenden beim Scrollen ---------- */
.lx-r{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s var(--lx-e)}
.in .lx-r,.lx-r.in{opacity:1;transform:none}
.in .lx-r:nth-child(2){transition-delay:.07s}
.in .lx-r:nth-child(3){transition-delay:.14s}
.in .lx-r:nth-child(4){transition-delay:.21s}
.in .lx-r:nth-child(5){transition-delay:.28s}
.in .lx-r:nth-child(6){transition-delay:.35s}
.in .lx-r:nth-child(7){transition-delay:.42s}
.in .lx-r:nth-child(8){transition-delay:.49s}

/* ---------- 17. Seitenwechsel ---------- */
#lx-fade{position:fixed;inset:0;z-index:990;background:var(--lx-bg);opacity:0;pointer-events:none;transition:opacity .3s ease}
body.lx-leaving #lx-fade{opacity:1;pointer-events:auto}

/* ---------- 18. Bildraster + Grossansicht ---------- */
.lx-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
@media(max-width:640px){.lx-gal{grid-template-columns:1fr}}
.lx-gal-item{
  position:relative;display:block;width:100%;padding:0;margin:0;border:1px solid var(--lx-line);
  background:var(--lx-panel);cursor:zoom-in;overflow:hidden;
  transition:border-color .3s ease,transform .22s var(--lx-e);
}
.lx-gal-item img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(.35) brightness(.8) contrast(1.05);transform:scale(1.01);
  transition:filter .6s ease,transform .9s var(--lx-e);
}
.lx-gal-item.hoch img{aspect-ratio:auto}
@media(hover:hover){
  .lx-gal-item:hover{border-color:var(--lx-akz2);transform:translateY(-3px)}
  .lx-gal-item:hover img{filter:none;transform:scale(1.05)}
}
.lx-gal-item .id{
  position:absolute;left:10px;bottom:8px;z-index:2;
  font:500 9px/1 var(--lx-mono);letter-spacing:.16em;color:rgba(226,234,243,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.8);text-transform:uppercase;
}
.lx-lb{position:fixed;inset:0;z-index:950;background:rgba(13,14,18,.96);display:flex;flex-direction:column}
.lx-lb[hidden]{display:none}
.lx-lb-top{display:flex;align-items:center;gap:14px;padding:14px clamp(14px,2.4vw,32px);
  font:500 10px/1 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lx-mut)}
.lx-lb-top .sp{flex:1}
.lx-lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(10px,2vw,30px)}
.lx-lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid var(--lx-line)}
.lx-lb-nav{display:flex;justify-content:center;gap:12px;padding:16px}
.lx-lb button{cursor:pointer}

/* ---------- 19. Abschnittskopf in Galerien ---------- */
.lx-gsec{margin-top:clamp(34px,5vw,56px)}
.lx-gsec:first-of-type{margin-top:0}
.lx-gsec-h{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.lx-gsec-h h2{margin:0;font:600 clamp(1rem,1.8vw,1.25rem)/1.2 var(--lx-disp);text-transform:uppercase;letter-spacing:.06em}
.lx-gsec-h .n{font:500 10px/1 var(--lx-mono);color:var(--lx-acc);letter-spacing:.14em}
.lx-gsec-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--lx-line2),transparent)}

/* ---------- 20. Tabs / Umschalter ---------- */
.lx-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.lx-tab{
  padding:12px 20px;border:1px solid var(--lx-line);background:transparent;color:var(--lx-mut);cursor:pointer;
  font:600 10px/1 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;
  transition:border-color .3s,color .3s,background .3s;
}
.lx-tab[aria-selected="true"]{border-color:var(--lx-akz2);color:var(--lx-txt);background:var(--lx-akzdim)}
@media(hover:hover){.lx-tab:hover{color:var(--lx-txt);border-color:var(--lx-line2)}}
.lx-panel[hidden]{display:none}

/* ---------- 21. Vergleichsregler ---------- */
.lx-cmp{position:relative;max-width:560px;margin:0 auto;border:1px solid var(--lx-line);background:var(--lx-panel);
  user-select:none;touch-action:none;overflow:hidden}
.lx-cmp img{width:100%;height:auto;display:block;pointer-events:none}
.lx-cmp .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.lx-cmp-bar{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--lx-acc);box-shadow:0 0 12px rgba(255,255,255,.6)}
.lx-cmp-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border:1px solid var(--lx-acc);background:rgba(14,18,26,.85);color:var(--lx-acc);
  cursor:ew-resize;display:grid;place-items:center;font:600 12px/1 var(--lx-mono);
}
.lx-cmp-knob::before{content:'< >';letter-spacing:.1em}
.lx-cmp-tag{position:absolute;top:12px;z-index:2;padding:6px 10px;background:rgba(14,18,26,.8);
  font:600 9px/1 var(--lx-mono);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--lx-line)}
.lx-cmp-tag.l{left:12px;color:var(--lx-mut)}
.lx-cmp-tag.r{right:12px;color:var(--lx-acc);border-color:var(--lx-acc)}

/* ---------- 22. Zeitstrahl ---------- */
.lx-tl{position:relative;padding-left:34px}
.lx-tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--lx-line2);
  transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--lx-e)}
.in .lx-tl::before,.lx-tl.in::before{transform:scaleY(1)}
.lx-tl-step{position:relative;padding:0 0 clamp(24px,3.4vw,40px)}
.lx-tl-step:last-child{padding-bottom:0}
.lx-tl-step::before{content:'';position:absolute;left:-30px;top:8px;width:9px;height:9px;background:var(--lx-bg);
  border:1px solid var(--lx-acc);transform:rotate(45deg)}
.lx-tl-step h3{margin:0 0 8px;font:600 1rem/1.3 var(--lx-disp);text-transform:uppercase;letter-spacing:.04em}
.lx-tl-step h3 .n{color:var(--lx-acc);font:600 11px/1 var(--lx-mono);margin-right:10px}
.lx-tl-step p{margin:0;color:var(--lx-mut);font-size:.93rem;max-width:680px}

/* ---------- 23. Preis-Module ---------- */
.lx-price{border:1px solid var(--lx-line);background:var(--lx-panel);margin-bottom:clamp(18px,2.6vw,28px)}
.lx-price-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;padding:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--lx-line)}
.lx-price-head .lx-num{margin:0}
.lx-price-head h3{margin:0;flex:1;font:600 clamp(1.05rem,2vw,1.35rem)/1.2 var(--lx-disp);text-transform:uppercase;letter-spacing:.03em}
.lx-price-head .ab{font:600 clamp(1rem,1.8vw,1.3rem)/1 var(--lx-mono);color:var(--lx-acc);white-space:nowrap}
.lx-price-body{display:grid;grid-template-columns:1.1fr .9fr;gap:0}
@media(max-width:860px){.lx-price-body{grid-template-columns:1fr}}
.lx-price-txt{padding:clamp(18px,2.4vw,26px);color:var(--lx-mut);font-size:.93rem}
.lx-price-txt ul{margin:14px 0 0;padding:0;list-style:none}
.lx-price-txt li{padding:7px 0 7px 20px;position:relative;border-top:1px solid var(--lx-line)}
.lx-price-txt li::before{content:'>';position:absolute;left:0;color:var(--lx-acc);font-family:var(--lx-mono);font-size:.8rem}
.lx-price-pak{border-left:1px solid var(--lx-line);padding:clamp(18px,2.4vw,26px)}
@media(max-width:860px){.lx-price-pak{border-left:0;border-top:1px solid var(--lx-line)}}
.lx-price-pak h4{margin:0 0 12px;font:600 9px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lx-dim)}
.lx-price-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--lx-line);
  font:500 .86rem/1.5 var(--lx-mono)}
.lx-price-row span{color:var(--lx-mut)}
.lx-price-row span small{display:block;font-size:.72rem;color:var(--lx-dim)}
.lx-price-row b{color:var(--lx-txt);font-weight:600;white-space:nowrap}

/* ---------- 24. Gegenueberstellung ---------- */
.lx-vs{border:1px solid var(--lx-line)}
.lx-vs-row{display:grid;grid-template-columns:180px 1fr 1fr;border-top:1px solid var(--lx-line)}
.lx-vs-row:first-child{border-top:0}
.lx-vs-row>*{padding:14px 18px;font-size:.9rem}
.lx-vs-row i{font:600 10px/1.6 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-dim);font-style:normal}
.lx-vs-row .a{color:var(--lx-mut);border-left:1px solid var(--lx-line)}
.lx-vs-row .b{color:var(--lx-txt);border-left:1px solid var(--lx-line)}
.lx-vs-head>*{background:var(--lx-panel);font:600 10px/1.6 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase}
.lx-vs-head .a{color:var(--lx-mut)}
.lx-vs-head .b{color:var(--lx-acc)}
@media(max-width:700px){
  .lx-vs-row{grid-template-columns:1fr}
  .lx-vs-row .a,.lx-vs-row .b{border-left:0;border-top:1px dashed var(--lx-line);padding-top:10px}
}

/* ---------- 25. Zweispalter mit Medien ---------- */
.lx-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,48px);align-items:center}
@media(max-width:960px){.lx-duo{grid-template-columns:1fr}}
.lx-duo--rev>.lx-duo-media{order:-1}
@media(max-width:960px){.lx-duo--rev>.lx-duo-media{order:0}}
.lx-check{margin:16px 0 0;padding:0;list-style:none}
.lx-check li{padding:8px 0 8px 24px;position:relative;color:var(--lx-mut);font-size:.93rem;border-top:1px solid var(--lx-line)}
.lx-check li:first-child{border-top:0}
.lx-check li::before{content:'+';position:absolute;left:2px;color:var(--lx-ok);font-family:var(--lx-mono)}
.lx-check li strong{color:var(--lx-txt)}
.lx-check--neg li::before{content:'-';color:var(--lx-warn)}

/* ---------- 26. Dokumentseiten (Impressum etc.) ---------- */
.lx-doc{max-width:820px}
.lx-doc h2{font:600 clamp(1.15rem,2.2vw,1.5rem)/1.25 var(--lx-disp);text-transform:uppercase;letter-spacing:.03em;margin:2em 0 .6em}
.lx-doc h3,.lx-doc h4{font:600 1rem/1.3 var(--lx-disp);letter-spacing:.03em;margin:1.6em 0 .5em}
.lx-doc p,.lx-doc li{color:var(--lx-mut);font-size:.95rem}
.lx-doc ul{padding-left:20px}
.lx-doc a{word-break:break-word}
.lx-doc table{border-collapse:collapse;width:100%}
.lx-doc td,.lx-doc th{border:1px solid var(--lx-line);padding:8px 10px;font-size:.88rem;color:var(--lx-mut)}

/* ---------- 27. Portfolio ---------- */
.lx-feature{border:1px solid var(--lx-line);background:var(--lx-panel);display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:960px){.lx-feature{grid-template-columns:1fr}}
.lx-feature-media{position:relative;min-height:280px;overflow:hidden}
.lx-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2) brightness(.85);transition:filter .6s ease,transform 1s var(--lx-e)}
@media(hover:hover){.lx-feature:hover .lx-feature-media img{filter:none;transform:scale(1.03)}}
.lx-feature-media .cap{position:absolute;left:14px;bottom:12px;z-index:2;padding:8px 12px;background:rgba(14,18,26,.82);
  border:1px solid var(--lx-line);font:500 9px/1.7 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-mut)}
.lx-feature-media .cap b{display:block;color:var(--lx-txt);font-size:11px}
.lx-feature-media .sysid{position:absolute;top:14px;left:14px;z-index:2;
  font:500 9px/1 var(--lx-mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(226,234,243,.8);
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
.lx-feature-body{padding:clamp(20px,3vw,40px)}
.lx-c-kawe{
  display:flex;align-items:center;min-height:280px;overflow:hidden;pointer-events:none;
  padding:clamp(18px,2.6vw,34px);
  font:700 clamp(3.4rem,9vw,8.4rem)/.82 var(--lx-disp);letter-spacing:.01em;text-transform:uppercase;
  color:var(--lx-txt);
}
@media(max-width:960px){.lx-c-kawe{min-height:180px}}
.lx-pin-hint{margin:22px 0 0;text-align:center;font:500 9px/1 var(--lx-mono);letter-spacing:.26em;
  text-transform:uppercase;color:var(--lx-dim)}
.lx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.lx-chips li{padding:6px 11px;border:1px solid var(--lx-line);color:var(--lx-mut);
  font:500 9px/1 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase}
.lx-ptile{position:relative;display:block;border:1px solid var(--lx-line);background:var(--lx-panel);overflow:hidden;
  transition:border-color .3s,transform .22s var(--lx-e)}
.lx-ptile img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(.35) brightness(.75);
  transition:filter .6s ease,transform .9s var(--lx-e)}
@media(hover:hover){
  .lx-ptile:hover{border-color:var(--lx-akz2);transform:translateY(-4px)}
  .lx-ptile:hover img{filter:none;transform:scale(1.05)}
}
.lx-ptile-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 16px 14px;
  background:linear-gradient(transparent,rgba(13,14,18,.92))}
.lx-ptile-txt b{display:block;font:600 1rem/1.2 var(--lx-disp);text-transform:uppercase;letter-spacing:.04em;color:var(--lx-txt)}
.lx-ptile-txt span{display:block;margin-top:4px;font:500 9px/1.5 var(--lx-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lx-mut)}
.lx-ptile .sysid{position:absolute;top:10px;left:12px;z-index:2;font:500 9px/1 var(--lx-mono);letter-spacing:.16em;
  color:rgba(226,234,243,.7);text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* ---------- 28. 404 + Kleinkram ---------- */
.lx-err{min-height:70vh;display:flex;align-items:center}
.lx-err b{font:700 clamp(4rem,16vw,10rem)/1 var(--lx-disp);color:transparent;-webkit-text-stroke:1px var(--lx-acc);display:block}
.lx-note{border:1px solid var(--lx-line);border-left:2px solid var(--lx-akz2);background:var(--lx-panel);
  padding:clamp(16px,2.2vw,24px);color:var(--lx-mut);font-size:.92rem}
.lx-note strong{color:var(--lx-txt)}
.lx-center{text-align:center}
.lx-center .lx-actions{justify-content:center}
.lx-center .lx-lead{margin-left:auto;margin-right:auto}
.lx-center .lx-hero-sys{justify-content:center}

/* ---------- 29. Sitemap ---------- */
.lx-tree{font:500 .92rem/2.1 var(--lx-mono);color:var(--lx-mut)}
.lx-tree a{color:var(--lx-txt)}
.lx-tree a:hover{color:var(--lx-acc)}
.lx-tree .lvl{color:var(--lx-dim);user-select:none}
.lx-tree small{color:var(--lx-dim);font-size:.75em;letter-spacing:.1em;text-transform:uppercase;margin-left:10px}

/* ---------- 30. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .lx-r{opacity:1;transform:none;transition:none}
  .lx-hero-scroll::after,.lx-hero-type::after,.lx-ctl .bars i{animation:none}
  .lx-boot{display:none}
  *{transition-duration:.01s !important}
}

/* ---------- 31. Zielkreuz-Cursor (nur Desktop) ---------- */
html.lx-cur, html.lx-cur a, html.lx-cur button, html.lx-cur .lx-gal-item{cursor:none}
.lx-cursor{position:fixed;left:0;top:0;z-index:1300;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .3s}
html.lx-cur .lx-cursor{opacity:1}
.lx-cur-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:var(--lx-akz2)}
.lx-cur-ring{
  position:absolute;left:-17px;top:-17px;width:34px;height:34px;
  transition:transform .3s var(--lx-e);
}
.lx-cur-ring::before,.lx-cur-ring::after,
.lx-cur-ring i::before,.lx-cur-ring i::after{
  content:'';position:absolute;width:9px;height:9px;border:0 solid rgba(255,255,255,.7);
}
.lx-cur-ring::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.lx-cur-ring::after{top:0;right:0;border-top-width:1px;border-right-width:1px}
.lx-cur-ring i::before{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.lx-cur-ring i::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.lx-cursor.akt .lx-cur-dot{background:#fff}

/* Zeiger-Zustand "eine Ebene zurueck": die Ecken oeffnen sich nach aussen,
   vier Pfeile zeigen nach draussen, darunter steht, was ein Klick bewirkt. */
.lx-cur-pfeile{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s ease}
.lx-cur-pfeile b{
  position:absolute;width:7px;height:7px;border:1px solid rgba(255,255,255,.85);
  border-right:0;border-bottom:0;
}
.lx-cur-pfeile b:nth-child(1){left:-31px;top:-31px;transform:rotate(-45deg)}
.lx-cur-pfeile b:nth-child(2){left:24px;top:-31px;transform:rotate(45deg)}
.lx-cur-pfeile b:nth-child(3){left:-31px;top:24px;transform:rotate(-135deg)}
.lx-cur-pfeile b:nth-child(4){left:24px;top:24px;transform:rotate(135deg)}
.lx-cur-text{
  position:absolute;left:0;top:0;opacity:0;transition:opacity .3s ease;
  margin-left:-90px;margin-top:48px;width:180px;text-align:center;
  font:600 8px/1.6 var(--lx-mono);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 0 10px rgba(0,0,0,.9);white-space:nowrap;
}
.lx-cursor.zurueck .lx-cur-pfeile,
.lx-cursor.zurueck .lx-cur-text{opacity:1}
.lx-cursor.zurueck .lx-cur-ring::before,
.lx-cursor.zurueck .lx-cur-ring::after,
.lx-cursor.zurueck .lx-cur-ring i::before,
.lx-cursor.zurueck .lx-cur-ring i::after{border-color:rgba(255,255,255,.95)}
.lx-cursor.zurueck .lx-cur-dot{
  background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8);
  animation:lxZurPuls 1.6s ease-in-out infinite;
}
@keyframes lxZurPuls{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* Hero-Wortmarke: Glitch beim Ueberfahren */
@media(hover:hover){
  .lx-hero-title{position:relative}
  .lx-hero-title:hover::before,.lx-hero-title:hover::after{
    content:attr(data-txt);position:absolute;inset:0;pointer-events:none;
  }
  .lx-hero-title:hover::before{color:var(--lx-akz2);animation:lxGl1 .9s steps(1) infinite}
  .lx-hero-title:hover::after{color:#6f6f6f;animation:lxGl2 1.1s steps(1) infinite}
}

@media (prefers-reduced-motion: reduce){
  .lx-boot-scan,.lx-glitch::before,.lx-glitch::after{animation:none;display:none}
  .lx-cursor{display:none}
  html.lx-cur, html.lx-cur a, html.lx-cur button{cursor:auto}
  .lx-sec-line{transform:none}
}

/* ---------- 32. Intro (nur Startseite, immer, ueberspringbar) ---------- */
body.lx-intro-on{overflow:hidden}
body.lx-intro-on .lx-hud,body.lx-intro-on .lx-main,body.lx-intro-on .lx-footer{
  filter:blur(16px) brightness(.4);
}
body.lx-intro-raus .lx-hud,body.lx-intro-raus .lx-main,body.lx-intro-raus .lx-footer{
  filter:blur(0) brightness(1);transition:filter .8s ease;
}
.lx-intro{position:fixed;inset:0;z-index:1000;cursor:pointer;overflow:hidden;
  font-family:var(--lx-mono);color:var(--lx-dim);background:rgba(15,15,15,.55)}
.lx-intro[hidden]{display:none}
.lx-intro.raus{pointer-events:none}
.lx-intro>*{transition:opacity .45s ease}
.lx-intro.raus>*{opacity:0}
.lx-intro .lx-boot-scan{opacity:.5}

/* Ecken */
.lx-in-mark{position:absolute;top:26px;left:clamp(18px,3vw,44px);
  font:600 12px/1.6 var(--lx-disp);letter-spacing:.26em;text-transform:uppercase;color:var(--lx-txt)}
.lx-in-mark b{font-weight:300}
.lx-in-mark small{display:block;font:500 8px/1.8 var(--lx-mono);letter-spacing:.3em;color:var(--lx-dim)}
.lx-in-pct{position:absolute;top:2px;right:clamp(18px,3vw,44px);
  font:700 clamp(3.6rem,8vw,6.8rem)/1.15 var(--lx-hud);color:var(--lx-txt);letter-spacing:.01em;
  text-shadow:0 0 26px rgba(255,255,255,.22)}

/* Mitte: erst Wortmarke, dann CLICK | TO ENTER */
.lx-in-mitte{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}
.lx-in-stufe{position:absolute;display:flex;align-items:center;gap:22px;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .6s var(--lx-e)}
.lx-in-stufe.an{opacity:1;transform:none}
.lx-in-logo{font:600 clamp(2.4rem,7vw,4.6rem)/1 var(--lx-disp);letter-spacing:.24em;text-transform:uppercase;
  color:var(--lx-txt);padding-left:.24em}
.lx-in-logo b{font-weight:300}
.lx-in-click{font:700 clamp(1.9rem,5vw,3.6rem)/1 var(--lx-hud);letter-spacing:.05em;text-transform:uppercase;color:var(--lx-txt)}
.lx-in-sep{width:1px;height:clamp(44px,7vw,76px);background:var(--lx-line2)}
.lx-in-enter{font:600 clamp(.7rem,1.2vw,.85rem)/1 var(--lx-hud);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-mut)}

/* unten links: Log + Balken */
.lx-in-lu{position:absolute;left:clamp(18px,3vw,44px);bottom:clamp(20px,4vh,40px);max-width:min(420px,80vw)}
.lx-in-log{min-height:70px;font:500 9px/1.9 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lx-dim)}
.lx-in-log .ok{color:var(--lx-mut)}
.lx-in-log .ak{color:var(--lx-txt)}
.lx-in-balken{display:flex;gap:3px;margin-top:12px;width:min(340px,70vw)}
.lx-in-balken i{flex:1;height:7px;background:var(--lx-line);clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}
.lx-in-balken i.an{background:var(--lx-txt);box-shadow:0 0 10px rgba(255,255,255,.4)}

/* unten rechts: Status + LOADED */
.lx-in-ru{position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(20px,4vh,40px);text-align:right}
.lx-in-status{display:flex;gap:26px;justify-content:flex-end;align-items:center;margin-bottom:14px;
  font:500 9px/1 var(--lx-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--lx-dim)}
.lx-in-status b{color:var(--lx-mut);font-weight:500}
.lx-in-loaded{
  min-width:min(300px,60vw);padding:18px 30px;background:transparent;cursor:pointer;
  border:1px solid var(--lx-line2);color:var(--lx-dim);
  font:700 12px/1 var(--lx-mono);letter-spacing:.4em;text-transform:uppercase;
  transition:border-color .4s,color .4s,background .3s;
}
.lx-in-loaded.bereit{border-color:var(--lx-txt);color:var(--lx-txt);background:rgba(255,255,255,.04);
  animation:lxPuls 2.2s ease-in-out infinite}
@keyframes lxPuls{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 22px rgba(255,255,255,.22)}}
@media(hover:hover){.lx-in-loaded.bereit:hover{background:var(--lx-txt);color:#0a0a0a}}

/* unten mitte: Audio */
.lx-in-audio{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(20px,4vh,40px);
  display:flex;gap:10px;align-items:center;
  font:600 9px/1 var(--lx-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-dim)}
.lx-in-audio button{
  padding:9px 16px;border:1px solid var(--lx-line);background:transparent;color:var(--lx-dim);cursor:pointer;
  font:600 9px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;transition:border-color .3s,color .3s;
}
.lx-in-audio button.an{border-color:var(--lx-txt);color:var(--lx-txt)}
.lx-in-hinweis{position:absolute;left:50%;transform:translateX(-50%);top:clamp(20px,4vh,40px);
  font:500 8px/1 var(--lx-mono);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-dim);opacity:.7}
@media(max-width:760px){
  .lx-in-pct{font-size:3.4rem;top:14px}
  .lx-in-status{display:none}
  .lx-in-lu{bottom:110px}
  .lx-in-audio{display:none}
}

/* ---------- 33. Portfolio-Projektnetz (3D) ---------- */
.lx-net-sec{position:relative;padding:0 var(--lx-pad) 8px}
/* Die Galaxie laeuft nicht mehr ueber die volle Fensterbreite, sondern sitzt wie der
   uebrige Inhalt in maximal 1200 px - und ist quadratisch. Dasselbe Format auf
   jedem Geraet: im Hochformat wird nichts mehr zusammengequetscht, die Anordnung
   der Projekte ist auf dem Handy dieselbe wie am Schirm. Auf niedrigen Fenstern
   deckelt die Fensterhoehe die Kantenlaenge, damit das Quadrat ganz zu sehen ist. */
.lx-net{position:relative;width:min(100%,1200px,calc(100vh - 90px));aspect-ratio:1/1;min-height:300px;
  margin:0 auto;overflow:hidden;touch-action:pan-y;border:1px solid var(--lx-line)}
/* Halter: klebt mittig im Fenster, solange man durch den Abschnitt scrollt.
   Hoehe und top setzt lx-galaxie.js (Kantenlaenge des Quadrats). */
.lx-net-halter{position:relative;width:min(100%,1200px,calc(100vh - 90px));margin:0 auto}
/* Vollbild: aus dem Fluss geloest, Lage und Masse kommen je Bild aus JS */
.lx-net.lx-net-voll{position:fixed;z-index:940;margin:0;aspect-ratio:auto;min-height:0;max-width:none;
  border-color:rgba(255,255,255,.28);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 80px rgba(0,0,0,.8)}
.lx-net.lx-net-ganz{border-color:transparent;box-shadow:none}
.lx-net canvas{position:absolute;inset:0}

.lx-net-node{
  position:absolute;left:0;top:0;display:block;text-decoration:none;
  will-change:transform;transform-origin:center;cursor:pointer;user-select:none;
}
.lx-net-node .bild{
  display:block;position:relative;width:var(--b,260px);aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--lx-line2);background:var(--lx-panel);
  transition:border-color .35s ease,box-shadow .35s ease;
}
.lx-net-node .bild img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.72) contrast(1.05);
  transition:filter .5s ease;
}
.lx-net-node .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;
  background:linear-gradient(transparent,rgba(0,0,0,.88));text-align:left;
}
.lx-net-node .cap b{display:block;font:600 12px/1.25 var(--lx-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--lx-txt)}
.lx-net-node .cap span{display:block;margin-top:3px;font:500 8px/1.5 var(--lx-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lx-mut)}
.lx-net-node .cap .mehr{display:none;margin-top:7px;font:600 8px/1 var(--lx-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--lx-txt)}
.lx-net-node.hov .bild,.lx-net-node.fokus .bild{border-color:var(--lx-txt);box-shadow:0 0 44px rgba(255,255,255,.22)}
.lx-net-node.hov .bild img,.lx-net-node.fokus .bild img{filter:grayscale(0) brightness(1)}
.lx-net-node.fokus .cap .mehr,.lx-net-node.hov .cap .mehr{display:inline-block}
.lx-net-node--zentrum{pointer-events:none;text-align:center}
.lx-net-node--zentrum .kern{display:block;
  width:14px;height:14px;margin:0 auto;background:var(--lx-txt);transform:rotate(45deg);
  box-shadow:0 0 26px rgba(255,255,255,.5);
}
.lx-net-node--zentrum .txt b{display:block;margin-top:12px;font:600 15px/1 var(--lx-disp);letter-spacing:.3em;text-transform:uppercase;color:var(--lx-txt)}
.lx-net-node--zentrum .txt span{display:block;margin-top:5px;font:500 8px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lx-dim)}

.lx-net-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;
  font:500 9px/1 var(--lx-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--lx-dim);
  text-align:center;pointer-events:none}
.lx-net-zurueck{
  position:absolute;top:16px;left:clamp(14px,2.4vw,32px);z-index:6;
  display:none;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;
  background:rgba(15,15,15,.8);border:1px solid var(--lx-line2);color:var(--lx-txt);
  font:600 10px/1 var(--lx-mono);letter-spacing:.22em;text-transform:uppercase;
  transition:border-color .3s,background .3s;
}
.lx-net-zurueck.an{display:inline-flex}
@media(hover:hover){.lx-net-zurueck:hover{border-color:var(--lx-txt);background:rgba(255,255,255,.08)}}

/* VR-Knopf: nur sichtbar, wenn das Geraet eine Brille anbietet */
.lx-net-vr{
  position:absolute;top:16px;right:clamp(14px,2.4vw,32px);z-index:6;
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;
  background:rgba(15,15,15,.8);border:1px solid var(--lx-line2);color:var(--lx-txt);
  font:600 10px/1 var(--lx-mono);letter-spacing:.22em;text-transform:uppercase;
  transition:border-color .3s,background .3s;
}
.lx-net-vr[hidden]{display:none}
.lx-net-vr .i{
  width:22px;height:12px;flex:none;position:relative;
  border:1px solid currentColor;border-radius:6px/5px;
}
.lx-net-vr .i::before,.lx-net-vr .i::after{
  content:'';position:absolute;top:2px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;
}
.lx-net-vr .i::before{left:2px}
.lx-net-vr .i::after{right:2px}
@media(hover:hover){.lx-net-vr:hover{border-color:var(--lx-txt);background:rgba(255,255,255,.08)}}
/* in der Brille: alle flachen Overlays raus, es zaehlt nur die Szene */
.lx-net-invr .lx-gx-lab,.lx-net-invr .lx-net-hint,.lx-net-invr .lx-net-zurueck{display:none!important}

/* Netz-Preloader: springt von selbst weiter, sobald geladen */
.lx-net-lade{
  position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;background:var(--lx-bg);
  font:500 10px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lx-dim);
  transition:opacity .5s ease,visibility .5s;
}
.lx-net-lade.weg{opacity:0;visibility:hidden;pointer-events:none}
.lx-net-lade .z{color:var(--lx-txt);font-size:15px}
.lx-net-lade .lx-in-balken{margin-top:0}

/* Bildbetrachter im Netz */
.lx-nv{position:fixed;inset:0;z-index:960;background:rgba(13,13,13,.96);display:flex;flex-direction:column}
.lx-nv[hidden]{display:none}
.lx-nv-top{display:flex;align-items:center;gap:14px;padding:14px clamp(14px,2.4vw,32px);
  font:500 10px/1 var(--lx-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lx-mut)}
.lx-nv-top .sp{flex:1}
.lx-nv-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(10px,2vw,30px)}
.lx-nv-stage img{max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid var(--lx-line)}
.lx-nv-nav{display:flex;justify-content:center;gap:12px;padding:16px}

/* Fallback-Raster: nur ohne JS oder bei Fehler sichtbar */
.lx-net-fallback{display:none}

/* ---------- 34. Galaxie-Beschriftungen ---------- */
.lx-gx-lab{
  position:absolute;left:0;top:0;pointer-events:none;text-align:center;white-space:nowrap;
  opacity:.55;transition:opacity .4s ease;will-change:transform;
}
.lx-gx-lab.an{opacity:1}
.lx-gx-lab b{display:block;font:600 12px/1.3 var(--lx-disp);letter-spacing:.18em;text-transform:uppercase;color:var(--lx-txt);
  text-shadow:0 0 14px rgba(0,0,0,.9)}
.lx-gx-lab span{display:block;margin-top:3px;font:500 8px/1.5 var(--lx-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lx-mut)}
.lx-gx-lab i{display:block;margin-top:4px;font:600 8px/1 var(--lx-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lx-txt);font-style:normal}
.lx-gx-lab.klein b{font-size:10px;letter-spacing:.14em}
.lx-gx-lab.kern b{font-size:15px;letter-spacing:.34em}
/* Auf dem Handy ist das Quadrat kaum 360 px breit: Beschriftungen kleiner und
   enger, die Unterzeile nur noch bei der aktiven Kachel - sonst laeuft alles ineinander */
@media(max-width:600px){
  .lx-gx-lab b{font-size:8px;letter-spacing:.1em}
  .lx-gx-lab span{display:none;font-size:6px;letter-spacing:.12em}
  .lx-gx-lab.an span{display:block}
  .lx-gx-lab.kern b{font-size:11px;letter-spacing:.24em}
  .lx-gx-lab.klein b{font-size:7px}
  .lx-net-hint{font-size:7px;letter-spacing:.16em;bottom:10px;width:90%}
}
/* ============================================================
   Bilder - die Fassung gold zeigt an diesen Stellen Bilder, und
   ein Studio, das Medien herstellt, sollte seine Medien zeigen.
   Hier stehen sie hinter Glas: entsaettigt und ruhig, bis man
   sie ansieht - dann kommen sie in Farbe, und ein Reflex laeuft
   einmal durch.
   ============================================================ */

/* ---- Bild in der Kachel ---- */
.lx-card--bild{padding-top:0;overflow:hidden}
.lx-kbild{
  position:relative;display:block;
  margin:0 calc(-1 * clamp(18px,2.4vw,30px)) clamp(16px,2vw,22px);
  aspect-ratio:16/9;overflow:hidden;background:#18181a;
  border-bottom:1px solid var(--lx-line);
}
.lx-kbild img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.62) brightness(.62) contrast(1.14) saturate(.65);
  transform:scale(1.03);
  transition:filter .6s ease,transform 1.1s var(--lx-e);
}
.lx-kgl{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(148deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.03) 24%,transparent 48%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    linear-gradient(transparent 55%,rgba(15,15,15,.85) 100%);
}
.lx-kgl::after{
  content:'';position:absolute;top:-60%;left:-150%;width:55%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);
  transform:rotate(14deg);opacity:0;
}
@media(hover:hover){
  .lx-card--bild:hover .lx-kbild img{
    filter:grayscale(0) brightness(.95) contrast(1.04) saturate(1);
    transform:scale(1.08);
  }
  .lx-card--bild:hover .lx-kgl::after{opacity:1;animation:lxGlanz 1.5s var(--lx-e)}
}
@keyframes lxGlanz{from{left:-150%}to{left:200%}}

/* ---- Bildband im Textfluss ---- */
.lx-fig{
  position:relative;margin:clamp(26px,4vw,52px) 0 0;overflow:hidden;
  background:#141418;border:1px solid var(--lx-line);
  aspect-ratio:21/9;
}
.lx-fig--hoch{aspect-ratio:16/9}
.lx-fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.55) brightness(.7) contrast(1.1) saturate(.7);
  transform:scale(1.02);
  transition:filter .8s ease,transform 1.4s var(--lx-e);
}
.lx-fig-gl{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(152deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.03) 22%,transparent 46%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    radial-gradient(130% 100% at 50% 40%,transparent 58%,rgba(0,0,0,.55) 100%);
}
/* Eckmarken wie an den Karten */
.lx-fig::before,.lx-fig::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;z-index:2;
  border:0 solid rgba(255,255,255,.42);
}
.lx-fig::before{top:6px;left:6px;border-top-width:1px;border-left-width:1px}
.lx-fig::after{bottom:6px;right:6px;border-bottom-width:1px;border-right-width:1px}
@media(hover:hover){
  .lx-fig:hover img{filter:grayscale(0) brightness(.98) contrast(1.02) saturate(1);transform:scale(1.05)}
}

/* ---- mehrere Bilder nebeneinander ---- */
.lx-figreihe{
  display:grid;gap:clamp(10px,1.4vw,18px);margin-top:clamp(26px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.lx-figreihe .lx-fig{margin:0;aspect-ratio:4/3}
@media(max-width:640px){
  .lx-fig{aspect-ratio:16/10}
}

/* ---------- 28. Vollbild-Cover (Leistungs-Sektionen) ---------- */
.lx-cov{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.lx-cov-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--lx-bg2)}
.lx-cov-media img,.lx-cov-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) brightness(.55);transform:scale(1.03);
  transition:transform 1.8s var(--lx-e);
}
.lx-cov.in .lx-cov-media img,.lx-cov.in .lx-cov-media video{transform:scale(1)}
.lx-cov-fade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.32) 38%,rgba(10,10,10,.86) 100%);
}
.lx-cov-inner{position:relative;z-index:2;width:100%;padding:clamp(90px,15vh,150px) 0 clamp(50px,8vh,90px)}
.lx-cov-items{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px);margin:26px 0 30px;max-width:820px}
.lx-cov-items b{display:block;font:600 11px/1 var(--lx-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lx-acc);margin-bottom:8px}
.lx-cov-items p{margin:0;color:var(--lx-mut);font-size:.92rem}
.lx-cov-items p strong{color:var(--lx-txt)}
.lx-cov .lx-more{
  display:inline-block;margin-top:4px;font:500 10px/1 var(--lx-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--lx-acc);
}
.lx-cov .lx-more::after{content:' ->';letter-spacing:0}
@media(max-width:640px){
  .lx-cov{min-height:88vh}
  .lx-cov-items{grid-template-columns:1fr}
}

/* ===========================================================================
   22. Bewegungsschicht                                       Stand 31.08.2026
   ---------------------------------------------------------------------------
   Nachtrag: Druck-Rueckmeldung, scroll-getriebene Bildbaender, Fortschritts-
   faden und der neue Seitenwechsel. Bewusst ueber die eigenstaendigen
   Eigenschaften scale: und translate: gebaut - die verrechnen sich MIT dem
   vorhandenen transform (Hover-Zoom scale(1.03), translateY(-4px)) statt es
   zu ueberschreiben. Mit transform gebaut waere jeder Hover dieser Datei tot.
   =========================================================================== */

:root{
  --lxm-druck:cubic-bezier(.2,.8,.3,1);
}

/* ---- 22.1 Druck-Rueckmeldung ------------------------------------------- */
/* Vorher gab es zwischen Antippen und Seitenwechsel keinerlei Rueckmeldung -
   am Handy, wo es keinen Hover gibt, war die Seite beim Tippen stumm. */

.lx-btn,.lx-ctl,.lx-card,.lx-nav-text,.lx-more,.lx-gal-item,.lx-ptile,
.lx-in-loaded,.lx-in-enter,.lx-hud-mark{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition-property:scale;
  transition-duration:190ms;
  transition-timing-function:var(--lxm-druck);
}
/* Die Karten und Kacheln haben eigene transition-Listen; dort wird scale
   angehaengt statt sie zu ersetzen. */
.lx-card{transition:transform .22s var(--lx-e),border-color .3s ease,
  background .3s ease,opacity .3s ease,scale .19s var(--lxm-druck)}
.lx-gal-item{transition:border-color .3s ease,transform .22s var(--lx-e),
  scale .19s var(--lxm-druck)}
.lx-ptile{transition:border-color .3s,transform .22s var(--lx-e),
  scale .19s var(--lxm-druck)}
.lx-btn{transition:color .2s ease,border-color .2s ease,
  transform .18s var(--lx-e),scale .19s var(--lxm-druck)}

.lx-ctl:active,.lx-more:active,.lx-hud-mark:active{scale:.95;transition-duration:70ms}
.lx-btn:active,.lx-nav-text:active,.lx-in-loaded:active,
.lx-in-enter:active{scale:.972;transition-duration:70ms}
.lx-card:active,.lx-gal-item:active,.lx-ptile:active{scale:.988;transition-duration:70ms}
/* Wer die Karte anfasst, drueckt die Karte - nicht zusaetzlich das Wort darin. */
.lx-card:active .lx-more{scale:1}

/* ---- 22.2 Scroll-getriebene Bildbaender --------------------------------- */
/* Die Bilder wandern langsamer als ihr Rahmen. animation-timeline: view()
   laeuft im Compositor - ohne scroll-Ereignis und ohne eine Zeile Skript.
   Das zaehlt hier doppelt, weil three.js im Hero und in der Galaxie ohnehin
   am Hauptthread haengt.
   Alle vier Rahmen haben overflow:hidden und ein festes Seitenverhaeltnis;
   scale:1.14 schafft den Ueberstand fuer die 5 % Weg und multipliziert sich
   mit dem vorhandenen transform:scale(1.03). */

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lx-kbild img,.lx-fig img,.lx-gal-item img,.lx-ptile img{
      scale:1.14;
      animation:lxmBand linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
      will-change:translate;
    }
    /* Der Deckbereich liegt hinter Text - dort reicht die halbe Strecke. */
    .lx-cov-media img,.lx-cov-media video{
      animation:lxmBandRuhig linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
      will-change:translate;
    }
  }
}
@keyframes lxmBand{from{translate:0 -5%}to{translate:0 5%}}
@keyframes lxmBandRuhig{from{translate:0 -2.5%}to{translate:0 2.5%}}

/* ---- 22.3 Fortschrittsfaden --------------------------------------------- */
/* Sitzt auf der Unterkante der HUD-Leiste. body::before und body::after sind
   in dieser Datei schon vergeben (Raster und Vignette), .lx-hud::after war
   frei. Ohne animation-timeline bleibt er ganz weg statt halb zu stehen. */

@supports (animation-timeline:scroll()){
  .lx-hud::after{
    content:'';
    position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,var(--lx-akz2),var(--lx-txt));
    transform-origin:0 50%;
    scale:0 1;
    pointer-events:none;
    animation:lxmFaden linear;
    animation-timeline:scroll(root block);
  }
  @keyframes lxmFaden{from{scale:0 1}to{scale:1 1}}
}

/* ---- 22.4 Seitenwechsel -------------------------------------------------- */
/* Bisher: schwarze Blende, opacity .3s. Jetzt zwei Wege, die das Skript
   auseinanderhaelt:
     a) Der Klick sass auf einem Bild -> das Bild fliegt heraus (Klon).
     b) Sonst -> Streifenschluss: 14 Baender fahren abwechselnd von links und
        rechts zu, mit einem roten und einem weissen Haarstrich an der
        Vorderkante (die Riss-Sprache der Weiche, nur knapper).
   Der Rueckweg ist immer derselbe: die neue Seite hebt sich kurz herein. */

.lx-pt-klon{
  position:fixed;z-index:996;object-fit:cover;pointer-events:none;
  transform-origin:center;
}

#lx-riss{
  position:fixed;inset:0;z-index:995;pointer-events:none;
  display:grid;grid-template-rows:repeat(14,1fr);overflow:hidden;
}
#lx-riss i{
  position:relative;display:block;background:var(--lx-bg);
  transform:translateX(-101%);
  transition:transform .26s cubic-bezier(.7,0,.2,1);
  /* 8 ms Versatz x 13 Baender = 104 ms Nachlauf; zusammen mit .26 s ist das
     letzte Band nach 364 ms zu. Das Skript wechselt erst bei 380 ms - sonst
     springt die Seite um, waehrend unten noch eine Luecke offensteht. */
  transition-delay:calc(var(--i) * 8ms);
}
#lx-riss i:nth-child(even){transform:translateX(101%)}
/* Vorderkante: zwei Haarstriche, die den Farbversatz eines Stoerbildes
   andeuten, ohne ihn nachzubauen. */
#lx-riss i::before,#lx-riss i::after{
  content:'';position:absolute;top:0;bottom:0;width:2px;
}
#lx-riss i::before{right:0;background:var(--lx-akz2)}
#lx-riss i::after{right:3px;background:rgba(245,245,245,.55)}
#lx-riss i:nth-child(even)::before{right:auto;left:0}
#lx-riss i:nth-child(even)::after{right:auto;left:3px}
/* Die beiden Wege schliessen einander aus: beim Bildflug (.lx-flug) waeren
   geschlossene Baender doppelt gemoppelt, und die schwarze Blende wuerde den
   Streifenschluss von hinten zuschmieren, bevor man ihn sieht. */
body.lx-leaving:not(.lx-flug) #lx-riss i{transform:none}
body.lx-leaving:not(.lx-flug) #lx-fade{opacity:0}
body.lx-leaving.lx-flug #lx-riss{display:none}
body.lx-leaving.lx-flug #lx-fade{opacity:1;pointer-events:auto}

/* Ankunft: der Rumpf blendet einmal auf. Waehrend der Boot-Sequenz auf der
   Startseite nicht - die hat ihren eigenen Auftritt.

   ACHTUNG, teuer gelernt am 31.08.2026: hier stand zuerst zusaetzlich
   "translate:0 10px -> 0 0". Jeder von none verschiedene Wert von translate/
   scale/rotate macht das Element zum BEZUGSRAHMEN fuer position:fixed - und
   weil animation-fill-mode:both den Endwert stehen laesst, blieb .lx-main das
   dauerhaft. Damit war der Magnet der Portfolio-Galaxie kaputt: .lx-net wird
   beim Einrasten auf position:fixed gestellt und maß sich plötzlich an
   .lx-main statt am Fenster, also scrollte die Seite am Vollbild vorbei.
   Deshalb hier ausschliesslich opacity - das erzeugt zwar einen Stapelraum,
   aber KEINEN Bezugsrahmen. Dasselbe gilt fuer jede kuenftige Animation auf
   .lx-main oder einem ihrer Abschnitte. */
@media (prefers-reduced-motion:no-preference){
  body:not(.lx-intro-on) .lx-main{animation:lxmAnkunft .3s ease both}
}
@keyframes lxmAnkunft{from{opacity:0}to{opacity:1}}

/* ---- 22.5 Rueckzug bei prefers-reduced-motion ---------------------------- */
@media (prefers-reduced-motion:reduce){
  .lx-btn,.lx-ctl,.lx-card,.lx-nav-text,.lx-more,.lx-gal-item,.lx-ptile,
  .lx-in-loaded,.lx-in-enter,.lx-hud-mark{transition:opacity 90ms linear}
  .lx-btn:active,.lx-ctl:active,.lx-card:active,.lx-nav-text:active,
  .lx-more:active,.lx-gal-item:active,.lx-ptile:active,
  .lx-in-loaded:active,.lx-in-enter:active,.lx-hud-mark:active{
    scale:1;opacity:.72;
  }
  .lx-hud::after{display:none}
  #lx-riss{display:none}
}

/* ---- 22.6 Fassungs-Umschalter in der HUD-Leiste ------------------------- */
/* Der Weg zur anderen Fassung stand bisher nur unten im Menuefuss. Jetzt
   sitzt er oben rechts neben Audio und Menue - als .lx-ctl, damit er sich
   nicht als Fremdkoerper aufdraengt, aber mit goldener Raute, weil er als
   einziger Knopf der Seite woanders hinfuehrt. */

.lx-fassung{text-decoration:none}
.lx-fassung i{
  font-style:normal;color:var(--lx-gold);
  transition:transform .5s var(--lx-e),color .3s ease;
}
.lx-fassung b{font-weight:600;letter-spacing:.18em}
@media(hover:hover){
  .lx-fassung:hover{border-color:var(--lx-gold);color:var(--lx-gold)}
  .lx-fassung:hover i{transform:rotate(90deg)}
}
/* Anders als bei Audio und Menue bleibt die Beschriftung auch auf dem Handy
   stehen: eine Raute allein sagt niemandem, dass dahinter die andere Fassung
   liegt. Platz ist da - links neben der Leiste ist bis 375 px alles frei. */
@media(max-width:520px){
  .lx-fassung{padding:0 10px;gap:6px}
  .lx-fassung b{letter-spacing:.12em}
}

/* Der Weg nach GOLD nimmt denselben Streifenschluss wie jeder Seitenwechsel -
   nur in Gold statt Rot, damit man schon waehrend des Uebergangs sieht, wo
   man landet. Die Baender selbst bleiben schwarz; GOLD kommt ohnehin schwarz
   mit eigener Weiche, der Anschluss ist dadurch nahtlos. */
body.lx-zu-gold #lx-riss i::before{background:var(--lx-gold)}
body.lx-zu-gold #lx-riss i::after{background:rgba(252,246,186,.6)}