/* ==========================================================================
   LWR 3D Command Deck - originalgetreu aus LWR 3D/LetWinnersRun 3D
   Interface.dc.html (Nutzer-Design 2026-08-22). Vier Screens (Dashboard,
   Tradelog, Signalscanner, Benutzerverwaltung) teilen dieses feste
   Vollbild-Deck: Parallax-Buehne (Maus neigt die Szene), 3D-Bodengitter,
   Sternenfeld, Header mit Circuit-Krone, schwebende Bottom-Nav. Login,
   Chart-Detail und Server-Core behalten das alte Layout.
   ========================================================================== */

/* Globaler Massstab (Owner 2026-09-06: "das ganze UI bitte ein bisschen
   groesser"). Das Deck ist durchgehend in px gesetzt - hunderte Regeln
   einzeln anzuheben waere fehlertraechtig, `zoom` skaliert Layout UND
   Schrift zusammen und die Grids sind fr/minmax-flexibel, nichts laeuft
   ueber. Nur am Desktop: auf schmalen Screens ist Platz knapper als
   Lesbarkeit. Firefox kann `zoom` seit 126; aeltere ignorieren es schlicht. */
@media (min-width: 1100px) {
  body { zoom: 1.09; }
}

@keyframes l3dStarDrift { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
@keyframes l3dFloatY { 0%, 100% { transform: var(--l3d-base, none) translateY(0); } 50% { transform: var(--l3d-base, none) translateY(-9px); } }
@keyframes l3dSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes l3dBlip { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes l3dRingPing { 0% { opacity: 0.7; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes l3dShimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
@keyframes l3dBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes l3dDrawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes l3dGlowPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes l3dBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes l3dScanline { 0% { top: -15%; } 100% { top: 115%; } }
@keyframes l3dNodeP { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Weicher Uebergang nach dem Login (Nutzerwunsch 2026-08-22): Login- und
   Deck-Root teilen dieselbe #020107-Grundflaeche, aber ihre Deko-Hintergruende
   (Candle-Skyline vs. Hexagon-Welt) wuerden sonst hart reinpoppen, weil
   render() das ganze DOM in einem Frame austauscht. Der neue Hintergrund
   faedet stattdessen ueber der gemeinsamen Grundflaeche sanft ein.
   Ein echter Crossfade zwischen den zwei DOM-Baeumen ist ohne groesseren
   Umbau nicht drin - das Einfaden macht den Wechsel trotzdem ruhig. */
@keyframes l3dBgEnter { from { opacity: 0; } to { opacity: 1; } }
.l3d-bg-enter { animation: l3dBgEnter 0.9s ease both; }

/* Echter Crossfade beim Login->Dashboard-Wechsel (crossfadeTo() in main.js):
   der alte Screen haengt hier drin und loest sich auf, waehrend der neue
   Screen darunter in #app bereits steht (und selbst per l3d-bg-enter
   einfaedt) - zwei ueberlagerte Uebergaenge statt eines harten Schnitts. */
.l3d-crossfade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 700ms ease;
}
.l3d-crossfade.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .l3d-crossfade { transition-duration: 1ms; }
}

/* ---- Buehne ---- */
.l3d-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #020107;
  color: #fff;
  perspective: 1300px;
  font-family: "Space Grotesk", sans-serif;
}
.l3d-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(124, 58, 237, 0.24), transparent 60%),
    radial-gradient(70% 40% at 50% 100%, rgba(168, 85, 247, 0.16), transparent 70%);
}
.l3d-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
  animation: l3dStarDrift 9s ease-in-out infinite;
}

/* ---- Header ---- */
.l3d-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 26px;
  background: linear-gradient(180deg, rgba(2, 1, 7, 0.85), rgba(2, 1, 7, 0));
}
/* Marke = Owner-Wortmarke als Bild (2026-09-09: W-Zeichen + LETWINNERSRUN),
   die Unterzeile bleibt darunter. Die alte Krone ist Geschichte. */
.l3d-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.l3d-brand .l3d-brandsub { white-space: nowrap; }
.l3d-headmeta .stat { white-space: nowrap; }
.l3d-brand svg { display: block; }
.l3d-brandmark {
  display: block;
  height: 36px;
  width: auto;
  user-select: none;
  filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.28));
}
@media (max-width: 820px) { .l3d-brandmark { height: 26px; } .l3d-brand .l3d-brandsub { display: none; } }
.l3d-brand .node { animation: l3dNodeP 2s ease-in-out infinite; }
.l3d-brand .node-b { animation-delay: 0.4s; }
.l3d-brand .node-c { animation-delay: 0.8s; }
.l3d-brandword {
  font-family: "Bebas Neue", sans-serif;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.03em;
  background: linear-gradient(100deg, #fff, #f5d0fe 35%, #a855f7 55%, #fff 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: l3dShimmer 5.5s linear infinite;
}
.l3d-brandsub {
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(196, 181, 253, 0.6);
  text-transform: uppercase;
}
.l3d-headmeta {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Darf schrumpfen statt rechts aus dem Bild zu laufen (Owner 2026-10-09:
     "oben rechts ist der Logout-Button abgeschnitten"): min-width 0 laesst
     die Kursleiste (.head-coins, min-width 0, scrollt) nachgeben, die Knoepfe
     ruecken dadurch nach links an den Rand des Fensters statt dahinter. */
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.l3d-headmeta .stat { display: flex; align-items: center; gap: 7px; }
.l3d-headmeta .muted { color: rgba(196, 181, 253, 0.65); }
.l3d-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  animation: l3dGlowPulse 1.6s ease-in-out infinite;
}
.l3d-logout {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 9px;
  padding: 6px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.l3d-logout:hover { color: #f5d0fe; border-color: rgba(168, 85, 247, 0.5); }
.l3d-logout.l3d-danger { border-color: rgba(255, 109, 138, 0.4); color: #ff9db1; }
.l3d-logout.l3d-danger:hover { border-color: rgba(255, 109, 138, 0.7); color: #ffc2cf; }

/* ---- Kurz-Lane Modal ---- */
.lane-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(5, 7, 13, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lane-modal {
  width: min(680px, 100%);
  background: #12101f;
  border: 1px solid rgba(255, 109, 138, 0.35);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6);
  font-family: "JetBrains Mono", monospace;
}
.lane-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #ff9db1;
  letter-spacing: 0.08em;
}
.lane-modal-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1fr 1fr 1fr 1fr 1.1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12px;
  cursor: pointer;
  border-radius: 8px;
}
.lane-modal-row:hover { background: rgba(255, 109, 138, 0.08); }
.lane-modal-row .pair { font-weight: 700; color: #f5f3ff; }
.lane-modal-row .dim { color: rgba(196, 181, 253, 0.65); }
.lane-modal-row .pnl { text-align: right; font-weight: 700; }
.lane-modal-row .acts { display: flex; gap: 5px; }
.lane-modal-row .acts button {
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(250, 204, 21, 0.5);
  background: rgba(250, 204, 21, 0.1);
  color: #facc15;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
.lane-modal-row .acts button.x { border-color: rgba(255, 109, 138, 0.55); background: rgba(255, 109, 138, 0.12); color: #ff6d8a; }
.lane-modal-empty { padding: 26px 0; text-align: center; color: rgba(196, 181, 253, 0.6); font-size: 12px; }
.lane-modal-foot { margin-top: 12px; font-size: 10.5px; color: rgba(196, 181, 253, 0.55); }

/* ---- Kontostand-Maske: PIN-Block (2026-09-07) ---- */
.l3d-kpi-balance, [data-balance-card] { cursor: pointer; }
.l3d-kpi-balance.masked .l3d-big { letter-spacing: 0.12em; color: rgba(233, 213, 255, 0.85); }
.l3d-kpi-balance .mask-lock { font-size: 11px; margin-left: 4px; opacity: 0.8; }
.pin-modal {
  width: 340px;
  max-width: 100%;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(24, 18, 44, 0.98), rgba(12, 10, 24, 0.98));
  border: 1px solid rgba(168, 85, 247, 0.45);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(168, 85, 247, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: "JetBrains Mono", monospace;
  text-align: center;
}
.pin-modal-title { font-size: 22px; letter-spacing: 0.12em; color: #f5f3ff; text-shadow: 0 0 18px rgba(168, 85, 247, 0.6); }
.pin-modal-text { margin-top: 6px; font-size: 11px; line-height: 1.5; color: rgba(196, 181, 253, 0.7); }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 18px 0 4px; }
.pin-dots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(196, 181, 253, 0.55);
  background: transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pin-dots i.on {
  background: #e879f9;
  border-color: #e879f9;
  box-shadow: 0 0 12px rgba(232, 121, 249, 0.8);
  transform: scale(1.1);
}
.pin-dots.shake { animation: pin-shake 0.35s ease; }
.pin-dots.shake i { border-color: #ff6d8a; }
.pin-error { min-height: 15px; margin: 4px 0 10px; font-size: 11px; color: #ff6d8a; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pin-key {
  height: 52px;
  border-radius: 13px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(255, 255, 255, 0.045);
  color: #f5f3ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  -webkit-user-select: none;
  user-select: none;
}
.pin-key:hover { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 16px rgba(168, 85, 247, 0.25); }
.pin-key:active { transform: scale(0.94); background: rgba(168, 85, 247, 0.32); }
.pin-key-del { color: rgba(196, 181, 253, 0.75); font-size: 18px; }
.pin-key-ok {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #e879f9);
  box-shadow: 0 8px 22px rgba(168, 85, 247, 0.35);
}
.pin-key-ok:hover { filter: brightness(1.1); box-shadow: 0 10px 26px rgba(168, 85, 247, 0.5); }
.pin-cancel {
  margin-top: 14px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: rgba(196, 181, 253, 0.6);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.pin-cancel:hover { color: #f5f3ff; }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---- Zugang anfragen (Login) + Nachrichten-Postfach ---- */
.lg-request {
  width: 100%;
  margin-top: 12px;
  padding: 10px 0;
  background: transparent;
  border: 1px dashed rgba(168, 85, 247, 0.45);
  border-radius: 10px;
  color: #c4b5fd;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.lg-request:hover { border-color: rgba(232, 121, 249, 0.7); color: #f5d0fe; }
.lane-modal .lg-field { margin-top: 12px; }
.lane-modal .lg-field textarea {
  width: 100%;
  background: rgba(12, 10, 26, 0.8);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 10px;
  color: #f5f3ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  padding: 10px;
  resize: vertical;
}
.lane-modal .lg-cta { margin-top: 14px; }

.msg-wrap { width: min(760px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* Support-Chat Owner <-> User (2026-09-03) + App-Download-Knopf im Header. */
.l3d-app { text-decoration: none; color: #6dffbf !important; border-color: rgba(109, 255, 191, 0.45) !important; }
.l3d-app:hover { color: #b8ffe0 !important; border-color: rgba(109, 255, 191, 0.8) !important; }
.chat-wrap { width: min(760px, 94vw); }
.chat-wrap.owner { width: min(1100px, 94vw); }
.chat-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .chat-grid { grid-template-columns: minmax(0, 1fr); } }
.chat-list { padding: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.chat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(168, 85, 247, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  color: #fff;
  cursor: pointer;
}
.chat-row.active { border-color: rgba(232, 121, 249, 0.6); background: rgba(168, 85, 247, 0.16); }
.chat-row .avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  font-family: "Bebas Neue", sans-serif; font-size: 14px;
  background: linear-gradient(135deg, #7c3aed, #e879f9);
}
.chat-row .meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row .name { font-size: 12px; font-weight: 700; }
.chat-row .name .badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #6dffbf; color: #02120b; font-size: 9px; }
.chat-row .last { font-family: "JetBrains Mono", monospace; font-size: 9px; color: rgba(196, 181, 253, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; min-height: 200px; overflow-y: auto; padding: 4px 2px; }
/* `position: relative` traegt das Loeschkreuz, das seit 2026-09-26 absolut in
   der oberen rechten Ecke sitzt (Owner: "es gehoert schoen rechts oben in die
   Ecke"). */
.chat-msg { position: relative; max-width: 82%; padding: 10px 13px; border-radius: 14px; border: 1px solid rgba(168, 85, 247, 0.28); background: rgba(30, 15, 55, 0.7); }
.chat-msg.mine { align-self: flex-end; background: rgba(124, 58, 237, 0.32); border-color: rgba(232, 121, 249, 0.45); border-bottom-right-radius: 4px; }
.chat-msg.theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg .who { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(196, 181, 253, 0.6); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
/* Das Loeschkreuz sitzt in der oberen rechten Ecke der Blase (2026-09-26).
   Vorher lief es in der Kopfzeile mit - erst mit `margin-left:auto` am rechten
   Ende, dann kurzzeitig direkt hinter dem Datum. Beides war eine Position IM
   Textfluss und wanderte damit mit der Laenge von Name und Zeit. Absolut
   verankert steht es bei jeder Blase an derselben Stelle.
   Die Kopfzeile bekommt rechts Platz, damit ein langer Name nicht darunter
   laeuft. */
.chat-msg .who { padding-right: 18px; }
.chat-msg .who .del {
  position: absolute;
  /* Zweimal hoeher gerueckt (2026-09-26). Wichtig dabei: der Knopfrahmen ist
     NICHT das, was man sieht. Das Zeichen "x" fuellt seine Zeilenbox nicht aus -
     darueber stehen rund 4px Luft. Wer nur `top` verkleinert, misst einen
     Fortschritt, den das Auge nicht sieht. Deshalb hier zusaetzlich der obere
     Innenabstand auf 0 und die Zeilenbox eng an das Zeichen
     (`line-height: 0.75`); der untere Innenabstand bleibt als Klickflaeche. */
  top: 0;
  right: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 157, 177, 0.55);
  font-size: 14px;
  line-height: 0.75;
  cursor: pointer;
  padding: 0 4px 5px;
  opacity: 0;
  transition: opacity 0.15s;
}
.chat-msg:hover .who .del { opacity: 1; }
.chat-msg .who .del:hover { color: #ff9db1; }
.chat-msg.system { align-self: center; max-width: 92%; background: rgba(109, 255, 191, 0.06); border-color: rgba(109, 255, 191, 0.3); border-radius: 12px; }
.chat-msg.system .who { color: #6dffbf; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-row.self .avatar { background: linear-gradient(135deg, #22c55e, #6dffbf); color: #02120b; font-size: 15px; }
@media (hover: none) { .chat-msg .who .del { opacity: 1; } }
.chat-msg .text { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); white-space: pre-wrap; word-break: break-word; }
.chat-composer { display: flex; gap: 8px; align-items: flex-end; }
.chat-composer textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
  background: rgba(8, 5, 20, 0.7);
  color: #fff;
  padding: 10px 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
}
.chat-composer textarea:focus { outline: none; border-color: rgba(232, 121, 249, 0.6); }
.chat-composer .lg-cta { width: auto; margin: 0; padding: 12px 18px; }
.msg-card { padding: 14px 16px; }
.msg-card.unread { border-color: rgba(109, 255, 191, 0.45); box-shadow: 0 0 24px rgba(109, 255, 191, 0.12); }
.msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.msg-mail { color: #6dffbf; font-weight: 700; font-size: 13px; text-decoration: none; }
.msg-mail:hover { text-decoration: underline; }
.msg-date { color: rgba(196, 181, 253, 0.6); font-size: 11px; }
.msg-new { color: #6dffbf; }
.msg-body { margin: 10px 0; color: rgba(233, 213, 255, 0.9); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.msg-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Szene + Parallax ---- */
.l3d-scene {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  transform: rotateX(var(--l3d-rx, 0deg)) rotateY(var(--l3d-ry, 0deg));
}
.l3d-page {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 76px 34px 96px;
  transform-style: preserve-3d;
}
/* Hit-Test-Falle im 3D-Deck (2026-09-09, Kalender-Pfeil "›" tot): die um
   16deg gedrehten Seitenspalten tauchen mit ihrem aeusseren Rand HINTER die
   flache Ebene von Buehne und Seite (translateZ 30 - 150*sin16 < 0). Dort
   faengt die Ebene den Klick ab, elementFromPoint liefert .l3d-page/.l3d-scene
   statt des Knopfs. Die beiden Ebenen sind fuer den Zeiger durchlaessig,
   ihre Kinder nicht - so erreicht der Klick wieder die Karte. */
.l3d-scene { pointer-events: none; }
.l3d-scene > * { pointer-events: auto; }
/* Nur die Dashboard-Seite hat gedrehte Spalten; die News-Seite ist selbst der
   Scroll-Container und braucht ihre Zeigerereignisse (Rad ueber Luecken,
   Scrollbalken) - Owner 2026-09-09: "es werden nicht alle News angezeigt". */
.l3d-page:has(> .l3d-dashcol) { pointer-events: none; }
.l3d-page:has(> .l3d-dashcol) > * { pointer-events: auto; }

/* ---- Bottom-Nav ---- */
.l3d-nav {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(8, 5, 20, 0.75);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(124, 58, 237, 0.2);
}
.l3d-nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  padding: 11px 17px;
  border-radius: 11px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.l3d-nav button.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(124, 58, 237, 0.28));
  color: #f5d0fe;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.l3d-nav button svg { flex-shrink: 0; }
/* "Nachrichten (3)" darf nicht umbrechen (Badge 2026-09-03). */
.l3d-nav button { white-space: nowrap; }

/* ---- Karten-Grundform ---- */
.l3d-card {
  padding: 16px 17px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.85), rgba(8, 5, 20, 0.8));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.l3d-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(196, 181, 253, 0.6);
  text-transform: uppercase;
}
.l3d-big {
  margin-top: 6px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 38px;
  line-height: 1;
  color: #fff;
}
.l3d-mono { font-family: "JetBrains Mono", monospace; }
.l3d-green { color: #6dffbf; }
.l3d-red { color: #ff6d8a; }
.l3d-gold { color: #ffd166; }

/* ---- Dashboard ---- */
.l3d-dashcol {
  /* 250 -> 300px am 2026-09-07 (Owner: die KI-Kern-Karte wirkt
     zusammengequetscht, "mach das ganze UI ein Stueck breiter") - so passen
     Stop-Pfleger-Wert und Tor-Chips neben ihre Bezeichnung. Gesamtbreite
     300 + 26 + 620 + 26 + 300 = 1272px, passt ab ~1340px Fensterbreite;
     darunter greift ab 1100px ohnehin das Stapel-Layout. */
  width: 300px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform-style: preserve-3d;
  /* Die Spalte darf nicht hoeher werden als die Seite. `.l3d-root` steht auf
     `overflow: hidden`, und ohne diese Grenze wuchs die Spalte mit dem Inhalt
     einfach unten aus dem Bild heraus - unerreichbar statt scrollbar. */
  max-height: 100%;
  min-height: 0;
}
/* Beide Seitenspalten haengen oben (Owner 2026-09-08: "die 3 linken Fenster so
   weit nach oben wie das Fenster auf der rechten Seite") - `.l3d-page` zentriert
   sonst jede Spalte fuer sich, und die kuerzere linke rutschte in die Mitte. */
.l3d-dashcol { align-self: flex-start; }
.l3d-dashcol.left { --l3d-base: rotateY(16deg) translateZ(30px); animation: l3dFloatY 7s ease-in-out infinite; }
.l3d-dashcol.right { --l3d-base: rotateY(-16deg) translateZ(30px); animation: l3dFloatY 7.5s ease-in-out 1s infinite; }
.l3d-dashmid {
  flex: 0 1 620px;
  min-width: 0;
  --l3d-base: translateZ(60px);
  animation: l3dFloatY 8s ease-in-out 0.5s infinite;
  /* Mittelspalte als Saeule, die nie hoeher wird als die Buehne (2026-10-01,
     Owner-Screenshot mit zehn Trend-Positionen: die Karten liefen unten aus
     dem Bild, unerreichbar). Die Buehne selbst bleibt fest und scrollt nicht
     (Owner 2026-09-02) - nur die Positionsliste scrollt in sich. */
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
.l3d-dashmid .l3d-hero { flex: 0 0 auto; }
.l3d-dashmid .l3d-minis {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 6px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
  /* Unterer Rand blendet aus, damit ein angeschnittenes Karten-Ende als
     "da kommt mehr" lesbar ist statt als Fehler. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
}
.l3d-dashmid .l3d-minis::-webkit-scrollbar { width: 6px; }
.l3d-dashmid .l3d-minis::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.35); border-radius: 99px; }
/* Dicht ab sieben Positionen (Trend-Engine haelt bis zu zwoelf): ZWEI Spalten
   mit etwas engerem Rand, der Rest scrollt in der Liste. Drei Spalten waren
   dem Owner "zu sehr gequetscht" (2026-10-02): Entry/SL und die Positionszeile
   brachen dreifach um. */
.l3d-minis.dense { gap: 10px; margin-top: 12px; }
.l3d-minis.dense .l3d-mini { padding: 10px 13px; gap: 9px; }
@media (max-width: 1100px) {
  .l3d-dashmid { max-height: none; }
  .l3d-dashmid .l3d-minis { overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ---- Dashboard scrollt als Ganzes (Owner 2026-10-09) ----------------------
   "im Dashboard den Scrollbalken bei den aktiven Positionen entfernen, mach
   stattdessen, dass man die ganze Seite nach unten scrollt, damit es
   hochwertiger aussieht, und das Scrollen laggt aktuell auch ein wenig."
   Ersetzt die Entscheidung vom 02.09. (Buehne fest, nur die Liste scrollt).
   main.js setzt `l3d-flow` am Root nur auf dem Dashboard. Die Buehne (.l3d-scene,
   .l3d-page) steht dann im Fluss und waechst mit dem Inhalt, der Root scrollt;
   Kopfzeile, Dock, Warnstreifen und Hintergrund werden `fixed`, damit sie beim
   Scrollen stehen bleiben. Der Lag kam vom Scrollen INNERHALB einer 3D-
   gekippten, maskierten Spalte mit Blur-Karten: jeder Scrollschritt zeichnete
   Maske, Blur und Neigung neu. Jetzt scrollt der Compositor den Root; die
   Positionskarten verlieren dazu ihren backdrop-filter (ueber dem dunklen
   Hex-Boden ohnehin unsichtbar), die Flaeche wird dafuer eine Spur dichter. */
@media (min-width: 1101px) {
  .l3d-root.l3d-flow {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
  }
  .l3d-root.l3d-flow::-webkit-scrollbar { width: 7px; }
  .l3d-root.l3d-flow::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.35); border-radius: 99px; }
  /* `perspective` auf dem Root macht ihn zum Bezugsrahmen fuer position:fixed -
     Kopfzeile und Dock wuerden dann mitscrollen (Playwright-Befund). Die
     Perspektive wandert deshalb in die Transformation der Szene selbst. */
  .l3d-root.l3d-flow { perspective: none; }
  .l3d-root.l3d-flow .l3d-scene,
  .l3d-root.l3d-flow .l3d-page { position: relative; inset: auto; }
  .l3d-root.l3d-flow .l3d-scene {
    transform: perspective(1300px) rotateX(var(--l3d-rx, 0deg)) rotateY(var(--l3d-ry, 0deg));
    /* Drehpunkt = Bildschirmmitte, nicht Szenenmitte (Owner 2026-10-09: "die
       Changelog-Seite ist stark verbuggt"): die Szene ist dort 52.000px hoch,
       ihr Mittelpunkt lag 26.000px unter dem Bild - 2 Grad Neigung um diesen
       Punkt holen den sichtbaren Teil ueber 1000px nach vorn, das Perspektiv-
       Projektion um das Siebenfache vergroessert. main.js (wireL3dShell)
       schreibt --l3d-oy beim Scrollen nach. */
    transform-origin: 50% var(--l3d-oy, 50%);
  }
  /* Changelog (l3d-flat): gar keine 3D-Transformation. Die Szene ist dort
     ueber 50.000px hoch - selbst mit richtigem Drehpunkt blaeht eine Neigung
     die Scroll-Hoehe auf das Zehnfache (599.000 statt 59.000px gemessen), weil
     die fernen Teile projiziert riesig werden. Der Owner wollte dort ohnehin
     kein 3D (02.09.: "der 3d look vom changelog gefaellt mir nicht"). */
  .l3d-root.l3d-flow.l3d-flat .l3d-scene {
    transform: none !important;
    /* Die per translateZ nach vorn geholten Spalten ragen projiziert ein paar
       Pixel ueber die Buehne hinaus - das ergab einen Phantom-Scrollbalken
       fuer 4px. Senkrecht abgeklemmt (clip haelt preserve-3d am Leben,
       anders als hidden/auto); waagerecht bleibt alles sichtbar. */
    overflow-x: visible;
    overflow-y: clip;
  }
  .l3d-root.l3d-flow .l3d-page { box-sizing: border-box; min-height: 100%; }
  .l3d-root.l3d-flow .l3d-bg-enter { position: fixed; inset: 0; pointer-events: none; }
  .l3d-root.l3d-flow .l3d-header,
  .l3d-root.l3d-flow .l3d-nav,
  .l3d-root.l3d-flow .l3d-health { position: fixed; }
  .l3d-root.l3d-flow .l3d-dashcol,
  .l3d-root.l3d-flow .l3d-dashmid { max-height: none; }
  .l3d-root.l3d-flow .l3d-dashmid .l3d-minis {
    flex: 0 0 auto;
    overflow: visible;
    padding: 2px 2px 6px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .l3d-root.l3d-flow .l3d-mini {
    backdrop-filter: none;
    background: linear-gradient(145deg, rgba(10, 35, 25, 0.86), rgba(5, 15, 12, 0.9));
  }
  .l3d-root.l3d-flow .l3d-mini.short {
    background: linear-gradient(145deg, rgba(45, 12, 22, 0.86), rgba(18, 5, 9, 0.9));
  }
  /* Changelog ebenso (Owner 2026-10-09: "auch beim Changelog-Tab auf der
     ganzen Seite scrollen statt nur neben dem Changelog, das Scrollen laggt"):
     die Spalte verliert Hoehenlimit und inneren Balken, die Kopfzeile der
     Spalte klebt nicht mehr (sie wuerde sonst unter der festen Kopfzeile des
     Decks haengen), die Karten verlieren ihren backdrop-filter. */
  .l3d-root.l3d-flow .cl-wrap {
    max-height: none;
    overflow: visible;
    padding-right: 10px;
  }
  .l3d-root.l3d-flow .cl-top { position: static; }
  .l3d-root.l3d-flow .cl-wrap > .cl-entry { backdrop-filter: none; }
}
.l3d-kpi .glow { text-shadow: 0 0 22px rgba(168, 85, 247, 0.5); }
.l3d-kpi .grad {
  background: linear-gradient(90deg, #f5d0fe, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.l3d-kpi .sub {
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}
.l3d-meter {
  margin-top: 8px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.l3d-meter i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7c3aed, #e879f9);
  box-shadow: 0 0 10px rgba(232, 121, 249, 0.7);
}
.l3d-hero {
  position: relative;
  overflow: hidden;
  padding: 20px 22px 16px;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.9), rgba(8, 5, 20, 0.85));
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(124, 58, 237, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.l3d-hero .scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(232, 121, 249, 0.09), transparent);
  animation: l3dScanline 5s linear infinite;
}
.l3d-hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.l3d-hero-head .headline {
  margin-top: 4px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  line-height: 1;
  color: #fff;
}
/* Die OFFEN-Summe stand hier kurz als grosse 22px-Pille (2026-09-06) - der
   Owner nahm sie noch am selben Tag zurueck: mit dem globalen Massstab unten
   reicht die alte Inline-Form ("jetzt gefuehlt zu gross"). Nicht erneut
   aufblasen. */
.l3d-chips { display: flex; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 700; }
.l3d-chips button {
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  cursor: pointer;
}
.l3d-chips button.active {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.5);
  color: #f5d0fe;
}
.l3d-eq svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.l3d-eq .line {
  /* Pfad traegt pathLength="1000" - so reicht der Strich immer bis zum Ende */
  stroke-dasharray: 1000;
  filter: drop-shadow(0 0 8px rgba(232, 121, 249, 0.7));
  animation: l3dDrawLine 2.2s ease-out both;
}
.l3d-eq .tip { filter: drop-shadow(0 0 10px #e879f9); animation: l3dBlip 2s ease-in-out infinite; }
.l3d-eq-dates {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: rgba(196, 181, 253, 0.45);
}
/* Festes Zweier-Raster (2026-09-03): mit Flex-Umbruch rutschten die Karten je
   nach Textlaenge in 2/3/1-Reihen. */
.l3d-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 700px) { .l3d-minis { grid-template-columns: minmax(0, 1fr); } }
/* Kleiner Richtungspfeil neben dem Coin-Namen (Owner 2026-09-03). */
.l3d-mini b .dir { font-style: normal; font-size: 8.5px; margin-right: 4px; vertical-align: 1px; }
/* Stop nachgezogen: Karte glimmt kurz gelb, SL-Wert und Chip blinken (2026-09-02). */
.l3d-mini.stop-moved { animation: l3dStopMoved 1.3s ease-out 2; border-color: rgba(250, 204, 21, 0.7) !important; }
.l3d-mini .sl-moved { color: #facc15; font-weight: 700; }
.l3d-mini .sl-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 99px;
  border: 1px solid rgba(250, 204, 21, 0.6);
  color: #facc15;
  font-size: 9px;
  animation: l3dChipBlink 0.65s ease-in-out 4;
}
/* "sichert +x USDT": Stop steht im Profit - der festgeschriebene Betrag,
   gruen wie die P&L-Werte (2026-09-06). */
.sl-secured {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 99px;
  border: 1px solid rgba(109, 255, 191, 0.45);
  background: rgba(34, 197, 94, 0.1);
  color: #6dffbf;
  font-size: 9px;
  white-space: nowrap;
}
/* Stop noch auf der Verlustseite: derselbe Chip, aber rot - der Betrag, der
   am Stop noch im Risiko steht (Owner 2026-09-06). */
.sl-secured.loss {
  border-color: rgba(255, 109, 138, 0.45);
  background: rgba(240, 68, 100, 0.1);
  color: #ff8fa6;
}
@keyframes l3dStopMoved {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.75); }
  60% { box-shadow: 0 0 0 12px rgba(250, 204, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}
@keyframes l3dChipBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.l3d-mini {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(109, 255, 191, 0.3);
  background: linear-gradient(145deg, rgba(10, 35, 25, 0.7), rgba(5, 15, 12, 0.7));
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.l3d-mini.short {
  border-color: rgba(255, 109, 138, 0.3);
  background: linear-gradient(145deg, rgba(45, 12, 22, 0.7), rgba(18, 5, 9, 0.7));
}
.l3d-mini b { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; display: block; }
.l3d-mini small { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: rgba(255, 255, 255, 0.5); display: block; }
.l3d-mini > div { min-width: 0; }
.l3d-mini small.margin { color: rgba(255, 255, 255, 0.56); margin-top: 2px; }
.l3d-mini small.margin .margin-value { color: #6dffbf; }
.l3d-mini .pnl { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; white-space: nowrap; }
.l3d-mini .x {
  border: 1px solid rgba(255, 109, 138, 0.4);
  background: transparent;
  color: #ff6d8a;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.l3d-corelist {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(233, 213, 255, 0.85);
}
.l3d-corelist div { display: flex; justify-content: space-between; gap: 10px; }

/* ---- KI-Kern, Neugestaltung 2026-09-07 (Owner: "optisch schoener") ----
   Pill-Reihe fuer die drei Systeme, zwei Kacheln (Regime / Zyklus mit
   Fortschritt), Agenten-Zeilen mit Status-Punkt, Tore als Chips. Gleiche
   Hoehe wie die alte Liste - die rechte Spalte hat einen festen Rahmen. */
.l3d-core2 {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: "JetBrains Mono", monospace;
}
.l3d-core-sys { display: flex; gap: 5px; }
.l3d-core-sys span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 0;
  border-radius: 8px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.22);
}
.l3d-core-sys span i {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: l3dGlowPulse 1.8s ease-in-out infinite;
}
.l3d-core-sys span:nth-child(2) i { animation-delay: 0.3s; }
.l3d-core-sys span:nth-child(3) i { animation-delay: 0.6s; }
.l3d-core-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.l3d-core-tile {
  padding: 7px 9px 8px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.16), rgba(168, 85, 247, 0.04));
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.l3d-core-tile small {
  display: block;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
  white-space: nowrap;
}
.l3d-core-tile b {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #f5d0fe;
  white-space: nowrap;
}
.l3d-core-tile .l3d-meter { margin-top: 6px; height: 3px; }
.l3d-core-tile .l3d-meter i { transition: width 0.9s linear; }
.l3d-core-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(233, 213, 255, 0.85);
}
/* Passt der Wert nicht neben die Bezeichnung, rutscht er als GANZES in die
   naechste Zeile (rechtsbuendig) - nie ein Umbruch mitten im Wert (Owner
   2026-09-07: "die 7h in einer Zeile"). */
.l3d-core-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; }
.l3d-core-row .dot {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 99px;
  align-self: center;
  background: rgba(196, 181, 253, 0.28);
}
.l3d-core-row.ok .dot { background: #6dffbf; box-shadow: 0 0 7px rgba(109, 255, 191, 0.7); }
.l3d-core-row.hot .dot { background: #ffd166; box-shadow: 0 0 7px rgba(255, 209, 102, 0.7); }
.l3d-core-row.alert .dot { background: #ff6d8a; box-shadow: 0 0 7px rgba(255, 109, 138, 0.8); animation: l3dGlowPulse 1.2s ease-in-out infinite; }
.l3d-core-row.sub .dot { visibility: hidden; }
.l3d-core-row > span { color: rgba(196, 181, 253, 0.62); white-space: nowrap; }
.l3d-core-row > b {
  /* Darf schrumpfen und schneidet mit Punkten ab (2026-10-03, Owner: "Text ragt
     aus dem Fenster" - die Trend-Zeile stand mit flex-shrink 0 ueber den
     Kartenrand hinaus). Der volle Text steht im Tooltip. */
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-weight: 700;
  color: #f5d0fe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l3d-core-row.ok > b { color: #6dffbf; }
.l3d-core-row.hot > b { color: #ffd166; }
.l3d-core-row.alert > b { color: #ff6d8a; }
.l3d-core-row.idle > b { color: rgba(196, 181, 253, 0.5); font-weight: 500; }
.l3d-core-row > b.tags { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 3px; }
.l3d-core-row > b.tags em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: 999px;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.38);
}
.l3d-core-row.sub > b.tags em {
  color: #e9d5ff;
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.4);
}
.l3d-core-foot {
  padding-top: 8px;
  border-top: 1px dashed rgba(168, 85, 247, 0.22);
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(196, 181, 253, 0.55);
}
.l3d-bars { margin-top: 9px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 64px; }
.l3d-bars i {
  flex: 1;
  max-width: 30px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #a855f7, #7c3aed);
  transform-origin: bottom;
  animation: l3dBarGrow 0.6s ease-out both;
}
.l3d-bars i.hot {
  background: linear-gradient(180deg, #f5d0fe, #e879f9);
  box-shadow: 0 0 14px rgba(232, 121, 249, 0.7);
}
.l3d-bars i.loss { background: linear-gradient(180deg, #ff6d8a, #7f1d34); }
.l3d-today-sum { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700; }
/* PnL je Tag als Monatskalender (Owner 2026-09-09): Kopf mit Blaetter-
   Pfeilen, Wochentage, 7er-Raster; Zelle = Tag + Tages-PnL, Farbe nach
   Vorzeichen, Deckung (--a) nach Groesse relativ zum staerksten Tag. */
.l3d-cal { margin-top: 6px; font-family: "JetBrains Mono", monospace; }
.l3d-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f5d0fe;
}
.l3d-cal-head button {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.l3d-cal-head button:hover:not(:disabled) { color: #f5d0fe; border-color: rgba(168, 85, 247, 0.5); }
.l3d-cal-head button:disabled { opacity: 0.25; cursor: default; }
/* Zellen 22px hoch, Luecken 2px: sechs Wochenzeilen muessen unter "Heute" in
   die linke Spalte passen, ohne die Dock-Leiste zu beruehren (gemessen bei
   1600x900: 30px-Zellen ragten bis 924px). */
.l3d-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.l3d-cal-wd { margin-bottom: 2px; }
.l3d-cal-wd span { text-align: center; font-size: 7.5px; letter-spacing: 0.08em; color: rgba(196, 181, 253, 0.45); text-transform: uppercase; }
.l3d-cal-cell {
  --a: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
}
.l3d-cal-cell.empty { background: transparent; }
.l3d-cal-cell b { font-weight: 700; font-size: 8.5px; }
.l3d-cal-cell i { font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: -0.02em; }
.l3d-cal-cell.win { background: rgba(109, 255, 191, calc(var(--a) * 0.32)); color: #6dffbf; border-color: rgba(109, 255, 191, calc(var(--a) * 0.45)); }
.l3d-cal-cell.loss { background: rgba(255, 109, 138, calc(var(--a) * 0.32)); color: #ff9db1; border-color: rgba(255, 109, 138, calc(var(--a) * 0.45)); }
.l3d-cal-cell.today { box-shadow: 0 0 0 1px rgba(232, 121, 249, 0.85), 0 0 10px rgba(232, 121, 249, 0.35); }
.l3d-cal .l3d-today-sum { font-size: 9.5px; margin-top: 5px; }
.l3d-cal-card { padding: 12px 14px 13px; }
/* "Heute"-Balken eine Stufe niedriger (64 -> 40px), damit der Kalender darunter Platz hat. */
.l3d-bars { height: 40px; }
/* Bot-Steuerung (Nutzerwunsch: eigenes Fenster zum Starten/Stoppen) */
/* Seit der Not-Aus raus ist (Owner 2026-09-05), stehen hier nur noch zwei
   Knoepfe - und die sollen nebeneinander liegen statt untereinander.
   Gemessen: die Karte ist 232px breit, und mit `nowrap` passen "Zyklus jetzt"
   und "Bot deaktivieren" NICHT in eine Zeile - sie brachen um und standen
   wieder gestapelt da. Deshalb feste halbe Breite und Umbruch IM Knopf:
   lieber zwei Zeilen Beschriftung als zwei Zeilen Knoepfe. `stretch` haelt
   beide gleich hoch, auch wenn nur einer umbricht. */
#dash-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 10px; }
#dash-actions .chip,
#dash-actions .danger {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
}
#dash-actions .chip,
#dash-actions .danger,
#dash-actions .pill {
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.14);
  color: #f5d0fe;
}
#dash-actions .danger {
  border-color: rgba(255, 109, 138, 0.5);
  background: rgba(255, 109, 138, 0.14);
  color: #ff9db1;
}
#dash-actions .pill { cursor: default; border-color: rgba(255, 255, 255, 0.12); background: transparent; color: rgba(255, 255, 255, 0.5); }
#dash-actions button:disabled { opacity: 0.45; cursor: default; }

/* ---- Tradelog ---- */
.l3d-log-wrap {
  width: min(980px, 94vw);
  max-width: 100%;
  transform: rotateX(7deg) translateZ(30px);
  transform-style: preserve-3d;
}
.l3d-log-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.9), rgba(8, 5, 20, 0.85));
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(124, 58, 237, 0.2);
}
.l3d-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 17px 22px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25);
}
.l3d-log-head .title { display: flex; align-items: center; gap: 10px; }
.l3d-log-head .bebas { font-family: "Bebas Neue", sans-serif; font-size: 24px; letter-spacing: 0.04em; }
.l3d-log-head .note {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(196, 181, 253, 0.55);
  text-transform: uppercase;
}
.l3d-log-stats { display: flex; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700; }
.l3d-log-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 22px 0; }
.l3d-log-cols,
.l3d-log-row {
  display: grid;
  grid-template-columns: 1.1fr 0.65fr 0.95fr 0.95fr 0.6fr 0.9fr 1fr 1.3fr;
  gap: 0 14px;
  align-items: center;
  padding: 11px 22px;
}
.l3d-verdict {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(233, 213, 255, 0.75);
  cursor: help;
}
.l3d-verdict.ok { border-color: rgba(74, 222, 128, 0.4); color: #4ade80; }
.l3d-verdict.clean { border-color: rgba(196, 181, 253, 0.35); color: rgba(196, 181, 253, 0.85); }
.l3d-verdict.warn { border-color: rgba(251, 146, 60, 0.5); color: #fb923c; }
.l3d-verdict.hand { border-color: rgba(250, 204, 21, 0.4); color: #facc15; }
.l3d-quality-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 10px 22px 0;
  padding: 10px 14px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  background: rgba(168, 85, 247, 0.07);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: rgba(233, 213, 255, 0.85);
}
.l3d-quality-strip b { color: #fff; }
.l3d-log-cols {
  padding: 10px 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.l3d-log-body { max-height: 46vh; overflow-y: auto; }

/* ---- Bubblemap (owner request 2026-09-02) ---- */
.l3d-bubbles {
  position: relative;
  width: min(1180px, 94vw);
  /* 190 -> 225px am 2026-09-25: die Navigationsleiste steht absolut bei
     bottom:26px und ist rund 54px hoch, beginnt also etwa 80px ueber dem
     unteren Rand. Mit 190px endete die Karte 12px DAHINTER, und die Fusszeile
     verschwand halb unter der Leiste - das war die zweite Haelfte des
     "unten sieht verbuggt aus". */
  height: calc(100vh - 225px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.9), rgba(8, 5, 20, 0.85));
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(124, 58, 237, 0.2);
  transform: translateZ(30px);
  --l3d-base: translateZ(30px);
  overflow: hidden;
}
.l3d-bubbles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25);
}
.l3d-bubbles-head .title { display: flex; align-items: center; gap: 10px; }
.l3d-bubbles-head .bebas { font-family: "Bebas Neue", sans-serif; font-size: 24px; letter-spacing: 0.04em; }
.l3d-bubbles-head .note {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(196, 181, 253, 0.55);
  text-transform: uppercase;
}
.l3d-bubbles-head .l3d-chips button { font-size: 10.5px; padding: 6px 13px; }
.l3d-bubbles-body { position: relative; flex: 1 1 auto; min-height: 0; }
.l3d-bubbles-body canvas { display: block; }
.l3d-bubble-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(8, 5, 20, 0.92);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #f5f3ff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.l3d-bubble-tip .dim { color: rgba(196, 181, 253, 0.6); }
/* `hidden` muss staerker sein als jede display-Regel (2026-09-25).
   Die Karte trug unten links dauerhaft ein leeres Popup mit Rand und Schatten:
   `.l3d-bubble-pop` setzt `display:flex`, und eine Klassenregel schlaegt das
   `display:none`, das der Browser fuer `[hidden]` mitbringt. Das Element war
   also im DOM als versteckt markiert (`hidden`) und trotzdem 234x24 px gross.
   Der Tooltip daneben blieb korrekt unsichtbar - er setzt kein `display`. */
[hidden] {
  display: none !important;
}
.l3d-bubble-pop {
  position: absolute;
  z-index: 6;
  width: 210px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.5);
  background: rgba(8, 5, 20, 0.96);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.l3d-bubble-pop .head { font-family: "JetBrains Mono", monospace; font-size: 12px; margin-bottom: 4px; display: flex; gap: 6px; align-items: baseline; }
.l3d-bubble-pop .head .dim { font-size: 9.5px; color: rgba(196, 181, 253, 0.55); }
.l3d-bubble-pop button {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.14);
  color: #f5d0fe;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
}
.l3d-bubble-pop button.long { border-color: rgba(109, 255, 191, 0.5); background: rgba(109, 255, 191, 0.12); color: #6dffbf; }
.l3d-bubble-pop button.short { border-color: rgba(255, 109, 138, 0.5); background: rgba(255, 109, 138, 0.12); color: #ff6d8a; }
/* Manual entry on a scanner call (owner only) */
.l3d-start {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid rgba(109, 255, 191, 0.55);
  background: rgba(109, 255, 191, 0.12);
  color: #6dffbf;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.l3d-start.short { border-color: rgba(255, 109, 138, 0.55); background: rgba(255, 109, 138, 0.12); color: #ff6d8a; }
.l3d-start:hover { filter: brightness(1.25); }
.l3d-bubbles-foot {
  padding: 9px 20px;
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(196, 181, 253, 0.55);
}
@media (max-width: 900px) {
  .l3d-bubbles { width: 100%; height: 70vh; transform: none; animation: none; }
}
.l3d-log-row {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.l3d-log-row:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.l3d-log-row:hover { background: rgba(168, 85, 247, 0.1); }
.l3d-log-row .pair { font-weight: 700; color: #fff; cursor: pointer; }
.l3d-log-row .dim { color: rgba(233, 213, 255, 0.8); }
.l3d-log-row .pnl { text-align: right; font-weight: 700; white-space: nowrap; }
.l3d-log-row .acts { display: flex; gap: 6px; justify-content: flex-end; }
.l3d-log-row .acts button {
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.1);
  color: #e9d5ff;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.l3d-log-row .acts button.del { border-color: rgba(255, 109, 138, 0.4); background: rgba(255, 109, 138, 0.08); color: #ff9db1; }
.l3d-log-row .acts button:disabled { opacity: 0.4; cursor: default; }
.l3d-log-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.l3d-log-shadow {
  height: 26px;
  margin: 0 40px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(168, 85, 247, 0.35), transparent 70%);
  filter: blur(6px);
}

/* ---- Signalscanner ---- */
.l3d-radar {
  position: relative;
  width: min(400px, 38vw);
  aspect-ratio: 1;
  flex: 0 0 auto;
  transform: rotateY(10deg) translateZ(40px);
  --l3d-base: rotateY(10deg) translateZ(40px);
  animation: l3dFloatY 8s ease-in-out infinite;
}
.l3d-radar .ring { position: absolute; border-radius: 999px; }
.l3d-radar .r0 { inset: 0; border: 1px solid rgba(168, 85, 247, 0.4); box-shadow: 0 0 60px rgba(124, 58, 237, 0.25), inset 0 0 60px rgba(124, 58, 237, 0.15); }
.l3d-radar .r1 { inset: 12%; border: 1px dashed rgba(168, 85, 247, 0.3); }
.l3d-radar .r2 { inset: 26%; border: 1px dashed rgba(168, 85, 247, 0.25); }
.l3d-radar .r3 { inset: 40%; border: 1px solid rgba(232, 121, 249, 0.35); }
.l3d-radar .ax-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(168, 85, 247, 0.18); }
.l3d-radar .ax-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(168, 85, 247, 0.18); }
.l3d-radar .sweep { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; animation: l3dSweep 4s linear infinite; }
.l3d-radar .sweep i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  background: conic-gradient(from 0deg at 0% 100%, rgba(232, 121, 249, 0.5), transparent 70deg);
}
.l3d-radar .ping { position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(232, 121, 249, 0.5); animation: l3dRingPing 3s ease-out infinite; }
.l3d-radar .blip { position: absolute; border-radius: 99px; animation: l3dBlip 2s ease-in-out infinite; }
.l3d-radar .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.l3d-radar .center .val {
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 24px rgba(168, 85, 247, 0.7);
}
.l3d-radar .center .cap {
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(196, 181, 253, 0.7);
  text-transform: uppercase;
  white-space: nowrap;
}
.l3d-signals {
  width: min(460px, 46vw);
  flex: 0 0 auto;
  transform: rotateY(-10deg) translateZ(30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.l3d-signals-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.l3d-signals-head .title { display: flex; align-items: center; gap: 10px; }
.l3d-signals-head .bebas { font-family: "Bebas Neue", sans-serif; font-size: 24px; letter-spacing: 0.04em; }
.l3d-signals-head .live {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #6dffbf;
  text-transform: uppercase;
}
.l3d-signal-list { display: flex; flex-direction: column; gap: 12px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.l3d-signal {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto; /* nicht in der scrollenden Liste zusammenquetschen lassen */
  padding: 13px 16px;
  border-radius: 13px;
  border: 1px solid rgba(109, 255, 191, 0.35);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.85), rgba(8, 5, 20, 0.8));
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.l3d-signal:hover { transform: translateZ(20px) scale(1.02); }
.l3d-signal.short { border-color: rgba(255, 109, 138, 0.35); }
.l3d-signal .row { display: flex; align-items: center; gap: 10px; }
.l3d-signal .pair { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: #fff; }
.l3d-signal .side {
  padding: 3px 9px;
  border-radius: 99px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid rgba(109, 255, 191, 0.35);
}
.l3d-signal.short .side { border-color: rgba(255, 109, 138, 0.35); }
.l3d-signal .conf { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700; }
.l3d-signal .meter { margin-top: 8px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.l3d-signal .meter i { display: block; height: 100%; border-radius: 99px; box-shadow: 0 0 8px rgba(232, 121, 249, 0.6); }
.l3d-signal .meta { margin-top: 7px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: rgba(196, 181, 253, 0.6); }
.l3d-scan-search { position: relative; }
.l3d-scan-search input {
  width: 100%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 11px;
  background: rgba(8, 5, 20, 0.7);
  color: #fff;
  padding: 10px 13px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.l3d-scan-search input:focus { outline: none; border-color: rgba(232, 121, 249, 0.6); }
.l3d-scan-search .search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(8, 5, 20, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.l3d-scan-search .search-item { padding: 9px 13px; font-family: "JetBrains Mono", monospace; font-size: 11px; cursor: pointer; }
.l3d-scan-search .search-item:hover { background: rgba(168, 85, 247, 0.15); }

/* ---- Benutzerverwaltung ---- */
.l3d-users {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 86px 34px 110px;
  overflow-y: auto;
}
/* Zwei Spalten ab 1000px (Owner 2026-09-03: "sieht gequetscht aus"). */
.l3d-users-body {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 460px);
  gap: 26px 32px;
  align-items: start;
}
.l3d-users-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.l3d-users-col.forms { gap: 18px; }
.l3d-users-col .l3d-user-form { width: 100%; padding: 20px 22px; }
.l3d-users-col .l3d-users-grid { justify-content: flex-start; max-width: none; transform: none; }
.l3d-users-col .l3d-user-card { width: 236px; padding: 17px 16px 15px; }
.l3d-users-col .l3d-user-card .name { font-size: 14px; }
.l3d-users-col .l3d-user-card .avatar { width: 42px; height: 42px; font-size: 18px; }
.l3d-users-col .l3d-user-card .foot { margin-top: 14px; font-size: 10px; }
.l3d-users-col .l3d-user-form label { margin-top: 14px; }
.l3d-users-col .l3d-user-form input { padding: 11px 13px; font-size: 13px; }
.l3d-venue-key .venue-status.trading { margin-top: 4px; color: rgba(196, 181, 253, 0.7); }
/* Follower-Engine (2026-09-03): Schalter + Risiko auf der Key-Karte, Status + Lizenz auf den Karten. */
.l3d-venue-key .venue-controls { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.l3d-venue-key .venue-toggle {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #02120b;
  background: linear-gradient(135deg, #6dffbf, #22c55e);
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.35);
  cursor: pointer;
}
.l3d-venue-key .venue-toggle.on { color: #fff; background: linear-gradient(135deg, rgba(255, 109, 138, 0.9), rgba(160, 30, 60, 0.9)); box-shadow: 0 10px 26px rgba(255, 109, 138, 0.3); }
.l3d-venue-key .venue-toggle:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.l3d-venue-key .risk-chips { align-items: center; gap: 5px; }
.l3d-venue-key .risk-chips .risk-label { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(196, 181, 253, 0.6); margin-right: 4px; }
.l3d-venue-key .risk-chips button { cursor: pointer; }
.l3d-venue-key .venue-status.err { color: #ff9db1; margin-top: 6px; }
.l3d-user-card .botline { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 8.5px; line-height: 1.5; color: rgba(233, 213, 255, 0.72); }
.l3d-user-card .botline.err { color: #ff9db1; }
.l3d-user-card .botctl { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.l3d-user-card .botctl button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 4px 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.l3d-user-card .botctl button.grant { border-color: rgba(109, 255, 191, 0.5); color: #6dffbf; }
.l3d-user-card .botctl button:hover { border-color: rgba(232, 121, 249, 0.6); color: #f5d0fe; }
.l3d-user-card .botctl button:disabled { opacity: 0.4; cursor: default; }
/* Online-Status auf der Benutzerkarte (Owner 2026-09-03). */
.l3d-user-card .presence {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.45);
  flex-shrink: 0;
}
.l3d-user-card .presence i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); }
.l3d-user-card .presence.on { color: #6dffbf; }
.l3d-user-card .presence.on i { background: #6dffbf; box-shadow: 0 0 10px #6dffbf; animation: l3dGlowPulse 2s ease-in-out infinite; }
.l3d-user-card.online { border-color: rgba(109, 255, 191, 0.45); }
.l3d-user-card .seen { margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 8.5px; color: rgba(196, 181, 253, 0.5); }
@media (max-width: 1000px) {
  .l3d-users-body { grid-template-columns: minmax(0, 1fr); }
  .l3d-users-col .l3d-users-grid { justify-content: center; }
}
.l3d-users-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.l3d-users-head .bebas { font-family: "Bebas Neue", sans-serif; font-size: 26px; letter-spacing: 0.04em; }
.l3d-users-pill {
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid rgba(232, 121, 249, 0.5);
  background: rgba(168, 85, 247, 0.15);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f5d0fe;
}
.l3d-users-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 16px;
  transform: rotateX(6deg);
  transform-style: preserve-3d;
  max-width: 980px;
}
.l3d-user-card {
  position: relative;
  width: 190px;
  padding: 15px 14px 13px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.85), rgba(8, 5, 20, 0.8));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  transform: translateZ(18px);
  transition: transform 0.25s ease;
}
.l3d-user-card:hover { transform: translateZ(46px) scale(1.03); }
.l3d-user-card.free {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(10, 8, 20, 0.55);
  cursor: pointer;
}
.l3d-user-card .head { display: flex; align-items: center; gap: 10px; }
.l3d-user-card .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #e879f9);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
  flex-shrink: 0;
}
.l3d-user-card.free .avatar { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
.l3d-user-card .name { font-size: 12.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.l3d-user-card .plan { font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: 0.08em; color: rgba(196, 181, 253, 0.55); }
.l3d-user-card .foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
}
.l3d-user-card .foot button {
  border: 1px solid rgba(255, 109, 138, 0.4);
  background: transparent;
  color: #ff9db1;
  border-radius: 8px;
  padding: 3px 8px;
  font: inherit;
  cursor: pointer;
}
.l3d-user-card .foot button:disabled { opacity: 0.4; cursor: default; }
.l3d-user-form {
  width: min(420px, 92vw);
  text-align: left;
}
.l3d-user-form label {
  display: block;
  margin: 10px 0 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.6);
}
.l3d-user-form input {
  width: 100%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
  background: rgba(8, 5, 20, 0.7);
  color: #fff;
  padding: 9px 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.l3d-user-form input:focus { outline: none; border-color: rgba(232, 121, 249, 0.6); }
.l3d-user-form button[type="submit"] {
  margin-top: 14px;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 11px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  cursor: pointer;
}
.l3d-user-form button[type="submit"]:disabled { opacity: 0.5; }
.l3d-users-note { font-family: "JetBrains Mono", monospace; font-size: 10px; color: rgba(196, 181, 253, 0.5); }
.l3d-strip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(109, 255, 191, 0.3);
  background: rgba(10, 35, 25, 0.5);
  color: #6dffbf;
}
.l3d-strip.err { border-color: rgba(255, 109, 138, 0.4); background: rgba(45, 12, 22, 0.5); color: #ff9db1; }

/* ---- Chart-Overlay (Coin-Klick bleibt im Deck) ---- */
.l3d-detail-wrap {
  /* 1240px bis 2026-09-06 - dem Owner zu eng ("zieh doch einfach das ganze UI
     ein wenig breiter"): die Seitenkacheln brachen lange USDT-Werte um. */
  width: min(1520px, 96vw);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  transform: translateZ(40px);
}
.l3d-detail-card { padding: 18px 20px; }
.l3d-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.l3d-detail-head .title { display: flex; align-items: baseline; gap: 12px; }
.l3d-detail-head .bebas { font-family: "Bebas Neue", sans-serif; font-size: 26px; letter-spacing: 0.04em; }
.l3d-detail-head .note {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(196, 181, 253, 0.55);
  text-transform: uppercase;
}
.l3d-detail-card .center-state { padding: 60px 0; }

/* ---- zentrierter Lade-/Fehlerzustand im Deck ---- */
.l3d-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(196, 181, 253, 0.7);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

/* ---- Kleine Screens: 3D-Neigung raus, Spalten stapeln, scrollen erlauben ---- */
@media (max-width: 1100px) {
  .l3d-page { flex-direction: column; align-items: stretch; overflow-y: auto; justify-content: flex-start; gap: 16px; padding: 84px 16px 110px; }
  .l3d-dashcol, .l3d-dashmid, .l3d-radar, .l3d-signals, .l3d-log-wrap, .l3d-users-grid { transform: none; animation: none; width: 100%; }
  .l3d-radar { width: min(320px, 86vw); margin: 0 auto; }
  .l3d-signals { width: 100%; }
  .l3d-signal-list { max-height: none; }
  .l3d-log-body { max-height: none; }
  .l3d-scene { transform: none !important; }
  /* Schmale Screens: die Nav bleibt eine EINE Zeile aus Icons mit Mini-Label
     (Owner 2026-09-02: "das staendige Aufklappen des Menues nervt" - vorher
     wickelte sie sich zu einem hohen Block in der Bildmitte). */
  .l3d-nav {
    position: fixed;
    bottom: 10px;
    max-width: 96vw;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    padding: 5px;
    overflow-x: auto;
  }
  .l3d-nav button {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 6px 3px;
    font-size: 7.5px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .l3d-headmeta .muted { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .l3d-floor, .l3d-stars, .l3d-dashcol, .l3d-dashmid, .l3d-radar,
  .l3d-eq .line, .l3d-bars i, .l3d-hero .scanline, .l3d-brandword { animation: none !important; }
}

/* ==========================================================================
   Gemeinsamer Hintergrund (Nutzer-Design 2026-08-22, LetWinnersRun
   Login.dc.html): driftende Candlestick-Skyline in zwei Parallax-Ebenen,
   Nebelschwaden, Abdunklung nach unten und eine glimmende Ticker-Linie.
   Ersetzt das alte 3D-Bodenraster auf ALLEN Deck-Screens und traegt auch
   die Loginpage.
   ========================================================================== */

/* Interface-Backdrop (finales Canvas-Design 2026-08-22 nachts): Hexagon-Welt.
   Ein gekippter Hex-Boden rollt auf den Betrachter zu, darueber eine atmende
   Horizont-Linie, vier aufsteigende taumelnde Hexagons, Nebel und Abdunklung. */
@keyframes l3dHexGlow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.5; } }
@keyframes l3dHexFloorMove { from { background-position: 0 0; } to { background-position: 0 194px; } }
@keyframes l3dHexRise {
  0% { transform: translateZ(0) translateY(0); opacity: 0; }
  15% { opacity: 0.5; }
  85% { opacity: 0.4; }
  100% { transform: translateZ(120px) translateY(-42vh); opacity: 0; }
}
@keyframes l3dHexTumble { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(720deg); } }

.l3d-hexworld {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 900px;
}
.l3d-hexworld .hex-floor {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -14%;
  height: 78%;
  transform: rotateX(68deg);
  transform-origin: bottom center;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22112%22%20height%3D%22194%22%20viewBox%3D%220%200%20112%20194%22%3E%3Cpath%20d%3D%22M56%2C0%20L112%2C32.4%20L112%2C97%20L56%2C129.4%20L0%2C97%20L0%2C32.4%20Z%20M56%2C129.4%20L56%2C194%20M0%2C97%20L-56%2C129.4%20M112%2C97%20L168%2C129.4%22%20fill%3D%22none%22%20stroke%3D%22rgba(168%2C85%2C247%2C.35)%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E');
  background-size: 112px 194px;
  animation: l3dHexFloorMove 9s linear infinite;
  -webkit-mask-image: radial-gradient(60% 85% at 50% 100%, black 25%, transparent 78%);
  mask-image: radial-gradient(60% 85% at 50% 100%, black 25%, transparent 78%);
}
.l3d-hexworld .hex-floor-glow {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -14%;
  height: 78%;
  transform: rotateX(68deg);
  transform-origin: bottom center;
  background: radial-gradient(45% 60% at 50% 85%, rgba(124, 58, 237, 0.3), transparent 70%);
  filter: blur(18px);
}
.l3d-hexworld .hex-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 121, 249, 0.4), transparent);
  filter: blur(1px);
  animation: l3dHexGlow 8s ease-in-out infinite;
}
.l3d-hexworld .hex-rise {
  position: absolute;
  transform-style: preserve-3d;
  animation: l3dHexRise 16s linear infinite;
}
.l3d-hexworld .hex-rise span {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: l3dHexTumble 11s linear infinite;
}
.l3d-hexworld .hex-fog {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -34%;
  height: 70%;
  background: radial-gradient(55% 65% at 50% 100%, rgba(124, 58, 237, 0.2), transparent 70%);
  filter: blur(30px);
  animation: l3dFogSoft 26s ease-in-out infinite;
}
.l3d-hexworld .hex-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  background: linear-gradient(180deg, transparent, rgba(2, 1, 7, 0.9));
}

/* Altes Mesh-Backdrop (2026-08-22 abends, vom Nutzer verworfen) */
@keyframes l3dFogSoft { 0%, 100% { transform: translateX(-3%); opacity: 0.4; } 50% { transform: translateX(3%); opacity: 0.6; } }
@keyframes l3dAuroraShift { 0%, 100% { transform: translateX(-2%) scaleY(1); opacity: 0.5; } 50% { transform: translateX(2%) scaleY(1.06); opacity: 0.75; } }
@keyframes l3dSparkRise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.9; } 80% { opacity: 0.5; } 100% { transform: translateY(-46vh); opacity: 0; } }
@keyframes l3dCometMove { from { stroke-dashoffset: 1460; } to { stroke-dashoffset: 0; } }
@keyframes l3dMeshBreathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.6; } }
@keyframes l3dTickPop { 0%, 88%, 100% { opacity: 0; transform: translateY(3px); } 91%, 96% { opacity: 0.9; transform: translateY(0); } }
@keyframes l3dDashFlow { to { stroke-dashoffset: -30; } }

.l3d-mesh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  pointer-events: none;
  overflow: hidden;
}
.l3d-mesh .fog-a {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -30%;
  height: 90%;
  background: radial-gradient(60% 70% at 30% 100%, rgba(124, 58, 237, 0.26), transparent 70%);
  filter: blur(28px);
  animation: l3dFogSoft 22s ease-in-out infinite;
}
.l3d-mesh .fog-b {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -32%;
  height: 85%;
  background: radial-gradient(55% 65% at 72% 100%, rgba(232, 121, 249, 0.16), transparent 70%);
  filter: blur(32px);
  animation: l3dFogSoft 28s ease-in-out 4s infinite;
}
.l3d-mesh svg.net {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2%;
  width: 100%;
  height: 88%;
  animation: l3dMeshBreathe 10s ease-in-out infinite;
}
.l3d-mesh .aurora {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(88, 28, 180, 0.1) 55%, rgba(124, 58, 237, 0.18));
  animation: l3dAuroraShift 18s ease-in-out infinite;
}
.l3d-mesh .spark {
  position: absolute;
  border-radius: 99px;
  animation: l3dSparkRise 12s linear infinite;
}
.l3d-mesh .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(2, 1, 7, 0.92));
}

@keyframes l3dCandDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes l3dFogDrift { 0%, 100% { transform: translateX(-4%) scale(1); opacity: 0.5; } 50% { transform: translateX(4%) scale(1.07); opacity: 0.8; } }
@keyframes l3dTickerGlow { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }

.l3d-candles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 38%, black 70%);
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 38%, black 70%);
}
.l3d-candles svg { display: block; position: absolute; left: 0; }
.l3d-candles .layer-far {
  bottom: 16%;
  width: 200%;
  height: 72%;
  opacity: 0.28;
  filter: blur(3px);
  animation: l3dCandDrift 74s linear infinite;
}
.l3d-candles .layer-near {
  bottom: -4%;
  width: 200%;
  height: 96%;
  opacity: 0.6;
  animation: l3dCandDrift 44s linear infinite;
}
.l3d-candles .fog-a {
  position: absolute;
  left: -10%;
  bottom: 0;
  width: 70%;
  height: 60%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(124, 58, 237, 0.3), transparent 70%);
  filter: blur(20px);
  animation: l3dFogDrift 13s ease-in-out infinite;
}
.l3d-candles .fog-b {
  position: absolute;
  right: -10%;
  bottom: 0;
  width: 65%;
  height: 55%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(232, 121, 249, 0.22), transparent 70%);
  filter: blur(24px);
  animation: l3dFogDrift 17s ease-in-out 2s infinite;
}
.l3d-candles .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(2, 1, 7, 0.9));
}
.l3d-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), rgba(232, 121, 249, 0.7), rgba(168, 85, 247, 0.6), transparent);
  filter: blur(1px);
  animation: l3dTickerGlow 5s ease-in-out infinite;
}

/* ==========================================================================
   Loginpage (Nutzer-Design 2026-08-22, LetWinnersRun Login.dc.html):
   Hero links mit Shimmer-Wortmarke, Sheen und Boot-Sequenz, rechts die
   schwebende Operator-Login-Karte mit Conic-Glow-Rand. Parallax wie im
   Canvas (Szene 0.5x, Karte 1.6x + Grundneigung -6deg).
   ========================================================================== */

@keyframes lgHeroIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes lgCardIn { from { opacity: 0; transform: translateY(26px) rotateY(-14deg) scale(0.97); } to { opacity: 1; transform: translateY(0) rotateY(0deg) scale(1); } }
@keyframes lgLineIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lgSheenSweep { 0%, 60% { left: -80px; opacity: 0; } 66% { opacity: 1; } 88% { left: calc(100% + 40px); opacity: 1; } 89%, 100% { left: calc(100% + 40px); opacity: 0; } }
@keyframes lgOrbGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.08); } }
@keyframes lgProgFill { from { width: 0%; } to { width: 100%; } }
@keyframes lgFloatY { 0%, 100% { transform: translateZ(70px) translateY(0); } 50% { transform: translateZ(70px) translateY(-10px); } }

.lg-armed {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid rgba(109, 255, 191, 0.35);
  color: #6dffbf;
}
.lg-main {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(7vw, 110px);
  padding: 80px 48px 60px;
  transform-style: preserve-3d;
  transform: rotateX(var(--lg-rx, 0deg)) rotateY(var(--lg-ry, 0deg));
  transition: transform 0.25s ease-out;
}
.lg-hero { width: min(560px, 46vw); flex: 0 0 auto; transform: translateZ(20px); }
.lg-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.7);
  animation: lgHeroIn 0.7s ease 0.1s both;
}
.lg-wordwrap { position: relative; margin-top: 10px; animation: lgHeroIn 0.8s ease 0.25s both; }
.lg-word {
  font-family: "Bebas Neue", sans-serif;
  font-size: min(7.2vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, #ffffff 0%, #f5d0fe 30%, #a855f7 52%, #f5d0fe 72%, #ffffff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(168, 85, 247, 0.5));
  animation: l3dShimmer 6s linear infinite;
}
.lg-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80px;
  width: 60px;
  transform: skewX(-16deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: lgSheenSweep 7s ease-in-out infinite;
}
.lg-by {
  margin-top: 8px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  letter-spacing: 0.18em;
  color: #c4b5fd;
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
  animation: lgHeroIn 0.8s ease 0.4s both;
}
.lg-copy {
  margin-top: 16px;
  max-width: 440px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(233, 213, 255, 0.75);
  text-wrap: pretty;
  animation: lgHeroIn 0.8s ease 0.55s both;
}
.lg-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 9px; animation: lgHeroIn 0.8s ease 0.7s both; }
.lg-chips span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid rgba(168, 85, 247, 0.4);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5d0fe;
}
.lg-chips span.live { border-color: rgba(109, 255, 191, 0.3); color: #6dffbf; }
.lg-chips span.live i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #6dffbf;
  box-shadow: 0 0 8px #6dffbf;
}
.lg-boot {
  margin-top: 24px;
  width: min(440px, 100%);
  border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: linear-gradient(145deg, rgba(20, 10, 40, 0.8), rgba(5, 3, 14, 0.85));
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: lgHeroIn 0.8s ease 0.85s both;
}
.lg-boot .head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.22);
}
.lg-boot .head i { width: 8px; height: 8px; border-radius: 99px; }
.lg-boot .head strong {
  margin-left: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(196, 181, 253, 0.6);
}
.lg-boot .lines { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 11px; }
.lg-boot .lines div { display: flex; justify-content: space-between; gap: 10px; }
.lg-boot .lines div:nth-child(1) { animation: lgLineIn 0.4s ease 1.1s both; }
.lg-boot .lines div:nth-child(2) { animation: lgLineIn 0.4s ease 1.45s both; }
.lg-boot .lines div:nth-child(3) { animation: lgLineIn 0.4s ease 1.8s both; }
.lg-boot .lines span { color: rgba(233, 213, 255, 0.8); }
.lg-boot .lines span em { font-style: normal; color: rgba(196, 181, 253, 0.5); }
.lg-boot .lines b.ok { color: #6dffbf; }
.lg-boot .lines b.ready { color: #ffd166; }

.lg-cardcol { flex: 0 0 auto; transform-style: preserve-3d; animation: lgFloatY 8s ease-in-out 1.2s infinite; }
.lg-cardwrap {
  position: relative;
  width: min(390px, 88vw);
  transform: rotateY(calc(-6deg + var(--lg-cry, 0deg))) rotateX(var(--lg-crx, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  animation: lgCardIn 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) 0.5s both;
}
.lg-glowring {
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: conic-gradient(from 180deg, rgba(124, 58, 237, 0), rgba(168, 85, 247, 0.55), rgba(232, 121, 249, 0.8), rgba(168, 85, 247, 0.55), rgba(124, 58, 237, 0));
  filter: blur(10px);
  opacity: 0.7;
  animation: lgOrbGlow 4.5s ease-in-out infinite;
}
.lg-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: linear-gradient(150deg, rgba(32, 16, 60, 0.92), rgba(8, 5, 20, 0.9));
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 26px 26px 22px;
}
.lg-card .scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(232, 121, 249, 0.08), transparent);
  animation: l3dScanline 5.5s linear infinite;
}
.lg-card .topline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a855f7, #e879f9, #a855f7, transparent);
  animation: l3dGlowPulse 4s ease-in-out infinite;
}
.lg-card .rowhead { display: flex; align-items: center; justify-content: space-between; }
.lg-card .kick {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e879f9;
}
.lg-card .aes {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
}
.lg-card h2 {
  margin: 10px 0 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 37px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 0 24px rgba(168, 85, 247, 0.55);
}
.lg-card .sub { margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: rgba(233, 213, 255, 0.65); }
.lg-access {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(124, 58, 237, 0.1);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lg-access span { color: rgba(196, 181, 253, 0.7); }
.lg-access strong { color: #6dffbf; letter-spacing: 0.16em; }
/* Operator-Plaetze "7/10 FREI" mit zehn Pips (Owner-Design 2026-09-03) - auf der
   Login-Karte und, kompakt, in der Benutzerverwaltung. */
.lg-seats {
  margin-top: 16px;
  padding: 11px 13px 12px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.32);
  background: linear-gradient(145deg, rgba(20, 10, 40, 0.85), rgba(6, 3, 14, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lg-seats .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lg-seats .row span { color: rgba(196, 181, 253, 0.65); }
.lg-seats .row strong { color: #f5d0fe; letter-spacing: 0.14em; }
.lg-seats .pips { margin-top: 9px; display: flex; gap: 5px; }
.lg-seats .pips i {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lg-seats .pips i.on {
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  border-color: rgba(232, 121, 249, 0.6);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.55);
}
.lg-seats .note { margin-top: 8px; font-size: 11px; color: rgba(233, 213, 255, 0.62); }
.lg-seats.compact { margin-top: 10px; }
/* Einladungskarte im Hero ("Noch kein Operator?"), ersetzt die Boot-Sequenz. */
.lg-invite {
  margin-top: 22px;
  width: min(440px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.42);
  background: linear-gradient(145deg, rgba(30, 15, 55, 0.85), rgba(8, 5, 20, 0.85));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: lgHeroIn 0.8s ease 0.85s both;
}
.lg-invite strong { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.lg-invite span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: rgba(233, 213, 255, 0.65); }
.lg-invite-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.45);
  cursor: pointer;
}
.lg-invite-btn:hover { filter: brightness(1.12); }
@media (max-width: 700px) {
  .lg-invite { flex-direction: column; align-items: stretch; }
}
/* Persoenlicher Bitunix-API-Key (jeder Login, 2026-09-03). */
.l3d-venue-key .venue-status { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: rgba(233, 213, 255, 0.75); }
.l3d-venue-key .venue-status b { color: #f5d0fe; }
.l3d-venue-key .venue-remove {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(255, 109, 138, 0.4);
  border-radius: 10px;
  padding: 9px;
  background: transparent;
  color: #ff9db1;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.l3d-venue-key .venue-remove:hover { border-color: rgba(255, 109, 138, 0.7); color: #ffc2cf; }
.l3d-venue-key .venue-remove:disabled { opacity: 0.5; cursor: default; }
.l3d-user-card .foot { flex-wrap: wrap; gap: 6px 10px; }
/* Steuerung in der Benutzerverwaltung: 0-10 als Chips. */
.l3d-seats-ctl .seats-chips { margin-top: 10px; flex-wrap: nowrap; gap: 4px; }
.l3d-seats-ctl .seats-chips button { flex: 1 1 0; min-width: 0; padding: 5px 0; text-align: center; cursor: pointer; }
.l3d-seats-ctl .seats-chips button:disabled { opacity: 0.5; cursor: default; }
.lg-field { margin-top: 15px; }
.lg-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: rgba(233, 213, 255, 0.75); }
.lg-field input {
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(5, 3, 14, 0.7);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.lg-field input:focus {
  border-color: #e879f9;
  box-shadow: 0 0 0 3px rgba(232, 121, 249, 0.18), 0 0 18px rgba(168, 85, 247, 0.25);
}
.lg-pw { position: relative; margin-top: 6px; }
.lg-pw input { margin-top: 0; padding-right: 64px; letter-spacing: 0.08em; }
.lg-pw button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(168, 85, 247, 0.18);
  color: #f5d0fe;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.lg-error {
  margin: 12px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: #ff9db1;
}
.lg-cta {
  position: relative;
  overflow: hidden;
  margin-top: 19px;
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 11px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #e879f9);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.45), 0 0 24px rgba(168, 85, 247, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lg-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(124, 58, 237, 0.55), 0 0 34px rgba(168, 85, 247, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.lg-cta:disabled { cursor: default; }
.lg-cta .prog {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.18);
  animation: lgProgFill 1.4s ease-out both;
}
.lg-cta span.txt { position: relative; }
.lg-footnote {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 3, 14, 0.5);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
}
.lg-cardshadow {
  height: 30px;
  margin: 6px 46px 0;
  background: radial-gradient(50% 100% at 50% 0%, rgba(168, 85, 247, 0.4), transparent 70%);
  filter: blur(8px);
}
.lg-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 26px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.45);
}

@media (max-width: 1100px) {
  .lg-main { flex-direction: column; overflow-y: auto; justify-content: flex-start; gap: 30px; padding: 84px 20px 60px; transform: none !important; }
  .lg-hero { width: 100%; transform: none; }
  .lg-cardcol { animation: none; }
  .lg-cardwrap { transform: none; }
  .lg-footer { display: none; }
}

/* ==========================================================================
   Loginpage v2 (Owner-Design 2026-09-07, loginpage.png): Weltraum-Szene mit
   dunklem Planeten, gluehendem Rand, Lichtstrahl, Horizont und Wasser -
   alles CSS. Palette deutlich dunkler und ruhiger als das Deck davor:
   Flaechen fast schwarz (#04030a / #0a0712), Rahmen weiss-transparent,
   Violett nur als Akzent (Knopf, Rand, Strahl). Diese Farbwelt wird unten
   ("Deck dunkel") auf das ganze Interface uebertragen.
   ========================================================================== */
@keyframes lg2BeamPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes lg2RimBreathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes lg2CardIn { from { opacity: 0; transform: perspective(1400px) translateY(22px) rotateY(-9deg); } to { opacity: 1; transform: perspective(1400px) translateY(0) rotateY(-4deg); } }

.lg2-root { background: #04030a; }
.lg2-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lg2-space {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 28% 18%, #110a22 0%, #07040f 42%, #030208 100%);
}
.lg2-stars { opacity: 0.75; }
.lg2-stars circle { r: 0.2px; }
.lg2-nebula {
  position: absolute;
  left: -20%;
  top: -34%;
  width: 115%;
  height: 125%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 58, 237, 0.32), rgba(88, 28, 180, 0.12) 45%, transparent 70%);
  filter: blur(46px);
}
/* Planet: Mittelpunkt bei 23vw / 68.5vh, Radius 55vh - der rechte Scheitel
   liegt damit bei ~54% der Breite, genau dort startet der Lichtstrahl. */
.lg2-planet {
  position: absolute;
  width: 110vh;
  height: 110vh;
  left: calc(23vw - 55vh);
  top: 13.5vh;
  border-radius: 50%;
  background: radial-gradient(circle at 66% 30%, #0e0819 0%, #08050f 40%, #040209 70%, #020105 100%);
  box-shadow: 0 0 160px 40px rgba(124, 58, 237, 0.2), inset -70px 20px 150px rgba(168, 85, 247, 0.3);
}
.lg2-planet .rim,
.lg2-planet .rim-glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 22deg,
    rgba(232, 121, 249, 0.35) 55deg,
    #e9d5ff 95deg,
    #ffffff 122deg,
    #e879f9 150deg,
    rgba(168, 85, 247, 0.4) 185deg,
    transparent 215deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px));
  animation: lg2RimBreathe 6s ease-in-out infinite;
}
.lg2-planet .rim-glow {
  inset: -16px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 14px), transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 14px), transparent 100%);
  filter: blur(14px);
  opacity: 1;
}
.lg2-beam {
  position: absolute;
  left: calc(23vw + 55vh - 2px);
  top: 58vh;
  width: 5px;
  height: 23.5vh;
  background: linear-gradient(180deg, rgba(245, 208, 254, 0), #f5d0fe 30%, #ffffff 100%);
  box-shadow: 0 0 18px 4px rgba(245, 208, 254, 0.45);
  filter: blur(1px);
  animation: lg2BeamPulse 4s ease-in-out infinite;
}
.lg2-beam-glow {
  position: absolute;
  left: calc(23vw + 55vh - 4vw);
  top: 56vh;
  width: 8vw;
  height: 26vh;
  background: radial-gradient(50% 60% at 50% 70%, rgba(232, 121, 249, 0.55), transparent 70%);
  filter: blur(18px);
  animation: lg2BeamPulse 4s ease-in-out infinite;
}
.lg2-horizon-glow {
  position: absolute;
  left: calc(23vw + 55vh - 28vw);
  top: 68vh;
  width: 56vw;
  height: 26vh;
  background: radial-gradient(50% 50% at 50% 50%, rgba(168, 85, 247, 0.6), rgba(124, 58, 237, 0.18) 45%, transparent 72%);
  filter: blur(22px);
}
.lg2-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 81vh;
  bottom: 0;
  background: linear-gradient(180deg, rgba(120, 62, 225, 0.42), rgba(40, 16, 84, 0.6) 35%, #030208 100%);
}
.lg2-reflect {
  position: absolute;
  left: calc(23vw + 55vh - 7vw);
  top: 81vh;
  width: 14vw;
  height: 19vh;
  background: linear-gradient(180deg, rgba(245, 208, 254, 0.6), rgba(168, 85, 247, 0.22) 45%, transparent 100%);
  filter: blur(12px);
  animation: lg2BeamPulse 4s ease-in-out infinite;
}
.lg2-horizon {
  position: absolute;
  left: calc(23vw + 55vh - 30vw);
  top: calc(81vh - 3px);
  width: 60vw;
  height: 6px;
  background: radial-gradient(50% 50% at 50% 50%, #ffffff, rgba(232, 121, 249, 0.7) 22%, rgba(168, 85, 247, 0.25) 55%, transparent 75%);
  filter: blur(2px);
}
/* Die vertraute Kerzen-Skyline sitzt hier flach auf dem Wasser, gedimmt. */
.lg2-candles { height: 30%; opacity: 0.45; }
.lg2-candles .layer-far { opacity: 0.2; }
.lg2-candles .layer-near { opacity: 0.4; }
.lg2-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 3, 10, 0.8) 0%, transparent 16%, transparent 76%, rgba(4, 3, 10, 0.88) 100%),
    linear-gradient(90deg, transparent 66%, rgba(4, 3, 10, 0.45) 100%);
}

/* ---- Foto-Szene (Owner-Bild als Hintergrund, seit 2026-09-07 spaet) ----
   .lg2-photo haelt exakt das Seitenverhaeltnis des Bildes (1672:941) und
   deckt den Viewport (wie background-size: cover) - so sitzen Strahl,
   Horizont und Sterne in Prozent immer an derselben Stelle des Bildes. */
@keyframes lg2MistDrift {
  0% { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.55; }
  50% { transform: translate3d(3%, -2%, 0) scale(1.08); opacity: 0.85; }
  100% { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.55; }
}
@keyframes lg2Breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
@keyframes lg2Twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
.lg2-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.68vh);
  height: max(100vh, 56.28vw);
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.lg2-photo-img {
  position: absolute;
  inset: 0;
  background: url("/assets/login-scene.jpg?v=2") center / 100% 100% no-repeat;
}
.lg2-mist {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(40px);
  animation: lg2MistDrift 26s ease-in-out infinite;
}
.lg2-mist.a {
  left: 44%;
  top: 44%;
  width: 26%;
  height: 34%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(168, 85, 247, 0.32), rgba(124, 58, 237, 0.1) 50%, transparent 72%);
}
.lg2-mist.b {
  left: 2%;
  top: 50%;
  width: 34%;
  height: 32%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(140, 80, 230, 0.22), transparent 70%);
  animation-duration: 34s;
  animation-delay: -12s;
}
.lg2-beam-pulse {
  position: absolute;
  left: 52.6%;
  top: 60%;
  width: 3.6%;
  height: 22%;
  background: radial-gradient(50% 55% at 50% 72%, rgba(245, 208, 254, 0.7), rgba(232, 121, 249, 0.25) 45%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: lg2Breathe 4.2s ease-in-out infinite;
}
.lg2-horizon-pulse {
  position: absolute;
  left: 42%;
  top: 76%;
  width: 24%;
  height: 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(232, 121, 249, 0.45), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(12px);
  animation: lg2Breathe 4.2s ease-in-out -1.4s infinite;
}
.lg2-twinkle { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg2-twinkle circle { fill: #f5f0ff; animation: lg2Twinkle 3.6s ease-in-out infinite; }
.lg2-twinkle circle:nth-child(2n) { animation-delay: -1.2s; animation-duration: 4.4s; }
.lg2-twinkle circle:nth-child(3n) { animation-delay: -2.1s; animation-duration: 5.1s; }
.lg2-twinkle circle:nth-child(5n) { animation-delay: -0.6s; }
.lg2-vignette.photo {
  background:
    linear-gradient(180deg, rgba(4, 3, 10, 0.55) 0%, transparent 14%, transparent 84%, rgba(4, 3, 10, 0.6) 100%);
}

/* Kopf- und Fusszeile */
.lg2-header { background: linear-gradient(180deg, rgba(4, 3, 10, 0.9), rgba(4, 3, 10, 0)); padding: 22px 40px; }
.lg2-brandword {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: #fff;
}
.lg2-brandsub {
  margin-top: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
}
.lg2-headmeta { gap: 22px; }
.lg2-online {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6dffbf;
}
.lg2-online i { width: 6px; height: 6px; border-radius: 99px; background: #6dffbf; box-shadow: 0 0 10px #6dffbf; animation: l3dGlowPulse 2s ease-in-out infinite; }
.lg2-headmeta .lwr-music {
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 4px 0 4px 22px;
  background: transparent;
  color: rgba(196, 181, 253, 0.6);
  box-shadow: none;
  letter-spacing: 0.24em;
}
.lg2-footer { padding: 18px 40px; color: rgba(196, 181, 253, 0.42); letter-spacing: 0.32em; font-size: 10px; }

/* Buehne */
/* transform-style FLAT auf der Buehne (nicht preserve-3d wie .lg-main): mit
   echter Tiefe lag die um -4deg gedrehte Karte teils hinter der Ebene der
   Buehne, die dann die Klicks bekam (elementFromPoint -> #lg-main). Flach
   bleibt der Parallax-Effekt sichtbar, aber jede Ebene wird 2D projiziert
   und Klicks treffen (Messung 2026-09-07, verify-login.js). */
.lg2-main { padding: 90px 8.5vw 70px 11vw; gap: min(6vw, 90px); justify-content: space-between; transform-style: flat; }
.lg2-hero { flex: 0 1 auto; min-width: 0; }
.lg2-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: #c4b5fd;
  animation: lgHeroIn 0.7s ease 0.1s both;
}
.lg2-title {
  margin: 14px 0 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: min(9.4vw, 128px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  animation: lgHeroIn 0.8s ease 0.25s both;
}
.lg2-title span { display: block; color: #fff; text-shadow: 0 0 40px rgba(168, 85, 247, 0.25); }
.lg2-title em {
  display: block;
  font-style: normal;
  background: linear-gradient(180deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.45));
}
.lg2-rule { width: 56px; height: 2px; margin: 22px 0 20px; background: #a855f7; box-shadow: 0 0 12px rgba(168, 85, 247, 0.8); animation: lgHeroIn 0.8s ease 0.4s both; }
.lg2-tagline { font-size: 24px; font-weight: 600; letter-spacing: 0.01em; color: #fff; animation: lgHeroIn 0.8s ease 0.5s both; }
.lg2-copy { margin-top: 14px; font-size: 19px; line-height: 1.45; color: rgba(214, 205, 232, 0.72); animation: lgHeroIn 0.8s ease 0.6s both; }
.lg2-features {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #a78bfa;
  animation: lgHeroIn 0.8s ease 0.75s both;
}
.lg2-features i { font-style: normal; color: rgba(196, 181, 253, 0.35); }
/* "Noch keinen Zugang?" mit den freien Operator-Plaetzen - links im Hero
   unter der Feature-Zeile (Owner 2026-09-07), nicht in der Karte. */
.lg2-invite {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  max-width: 100%;
  padding: 12px 18px 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  background: rgba(8, 5, 16, 0.55);
  backdrop-filter: blur(10px);
  animation: lgHeroIn 0.8s ease 0.9s both;
}
.lg2-invite .text strong { display: block; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; }
.lg2-invite .text span { display: block; margin-top: 2px; font-size: 12px; color: rgba(196, 181, 253, 0.7); white-space: nowrap; }
.lg2-invite .lg2-seats { margin-top: 0; width: 150px; flex: 0 0 auto; }
.lg2-invite .lg2-link.strong { white-space: nowrap; }

/* Karte. Der Spaltencontainer bleibt bewusst FLACH (kein preserve-3d): mit
   3D-Tiefe kippte die linke Kartenhaelfte (rotateY -4deg) hinter die Ebene
   des Containers, der dann die Klicks bekam - "Angemeldet bleiben" und die
   linke Knopfhaelfte waren tot (Owner 2026-09-07). Die Perspektive sitzt
   deshalb direkt an der Karte. */
/* position/z-index/isolation: der Container braucht einen EIGENEN Stapel-
   kontext. Ohne ihn schlug Chromium Klicks auf die linke Haelfte der
   gedrehten Karte dem Container zu (elementFromPoint -> .lg2-cardcol) - mit
   ihm treffen Checkbox und Knopf (Experiment 2026-09-07, exp-login2.js). */
.lg2-cardcol { position: relative; z-index: 1; isolation: isolate; flex: 0 0 auto; transform-style: flat; }
.lg2-cardwrap {
  width: min(448px, 92vw);
  transform: perspective(1400px) rotateY(calc(-4deg + var(--lg-cry, 0deg))) rotateX(var(--lg-crx, 0deg));
  transform-style: flat;
  transition: transform 0.25s ease-out;
  /* Fill-Mode BACKWARDS, nicht both: eine fertige Animation, die eine
     3D-Transformation dauerhaft "haelt", laesst Chromium beim Hit-Testing
     die linke Kartenhaelfte dem Elternelement zuschlagen (gemessen
     2026-09-07: Checkbox und linke Knopfhaelfte tot). Der Endzustand der
     Keyframes entspricht dem transform oben, deshalb kein Sprung. */
  animation: lg2CardIn 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) 0.45s backwards;
}
.lg2-card {
  position: relative;
  padding: 34px 36px 28px;
  border-radius: 16px;
  border: 1px solid rgba(196, 181, 253, 0.16);
  background: linear-gradient(165deg, rgba(12, 8, 22, 0.86), rgba(6, 4, 12, 0.9));
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lg2-secure {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #a78bfa;
}
.lg2-secure svg { color: #a855f7; }
.lg2-card h2 { margin: 22px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.lg2-sub { margin: 8px 0 0; font-size: 15px; color: rgba(190, 180, 210, 0.78); }
.lg2-field { margin-top: 22px; }
.lg2-field label { display: block; font-size: 13.5px; font-weight: 500; color: #ddd6ee; }
.lg2-input { position: relative; margin-top: 9px; }
.lg2-input input {
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  padding: 0 46px 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(16, 12, 26, 0.9);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lg2-input input::placeholder { color: #6e6584; }
.lg2-input input:focus { border-color: rgba(168, 85, 247, 0.75); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.lg2-input .ico {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: rgba(196, 181, 253, 0.55);
}
.lg2-input .ico.btn { border: none; background: transparent; padding: 4px; cursor: pointer; color: rgba(196, 181, 253, 0.65); }
.lg2-input .ico.btn:hover { color: #f5d0fe; }
.lg2-row { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lg2-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: rgba(214, 205, 232, 0.8); user-select: none; }
.lg2-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg2-check i {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(16, 12, 26, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lg2-check i::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.lg2-check input:checked + i { background: #7c3aed; border-color: #8b5cf6; box-shadow: 0 0 12px rgba(124, 58, 237, 0.5); }
.lg2-check input:checked + i::after { opacity: 1; }
.lg2-check input:focus-visible + i { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3); }
.lg2-link {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #a78bfa;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lg2-link:hover { color: #d8b4fe; }
.lg2-link.strong { font-size: 14.5px; }
.lg2-error { margin-top: 14px; }
.lg2-cta {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6 70%, #9d6cf9);
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.lg2-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 16px 40px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.lg2-cta:disabled { cursor: default; opacity: 0.85; }
.lg2-cta .prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(255, 255, 255, 0.18); animation: lgProgFill 1.4s ease-out both; }
.lg2-cta .txt { position: relative; }
.lg2-cta .arr { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; opacity: 0.9; }
.lg2-divider { margin: 24px 0 20px; display: flex; align-items: center; gap: 14px; color: rgba(196, 181, 253, 0.45); }
.lg2-divider i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.09); }
.lg2-divider span { display: flex; }
.lg2-access { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lg2-access strong { display: block; font-size: 14.5px; font-weight: 500; color: #fff; }
.lg2-access span { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(196, 181, 253, 0.7); }
.lg2-seats { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.lg2-seats .pips { flex: 1; display: flex; gap: 4px; }
.lg2-seats .pips i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.09); }
.lg2-seats .pips i.on { background: linear-gradient(90deg, #7c3aed, #a855f7); box-shadow: 0 0 8px rgba(168, 85, 247, 0.55); }
.lg2-seats span {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.6);
  white-space: nowrap;
}
.lg2-foot {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(196, 181, 253, 0.5);
}
.lg2-foot svg { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .lg2-main { padding: 96px 20px 70px; gap: 34px; }
  .lg2-hero { width: 100%; transform: none; }
  .lg2-title { font-size: min(17vw, 96px); }
  .lg2-cardwrap { transform: none; animation: lgHeroIn 0.8s ease 0.4s both; }
  .lg2-card { padding: 28px 24px 24px; }
  .lg2-planet { width: 120vw; height: 120vw; left: -40vw; top: 6vh; }
  .lg2-beam, .lg2-beam-glow, .lg2-reflect { left: 50%; transform: translateX(-50%); }
  .lg2-horizon, .lg2-horizon-glow { left: 0; width: 100%; }
  .lg2-header { padding: 16px 20px; }
  .lg2-online { white-space: nowrap; letter-spacing: 0.16em; }
  .lg2-features { flex-wrap: wrap; gap: 8px 12px; margin-top: 30px; letter-spacing: 0.2em; }
  .lg2-features span { white-space: nowrap; }
  .lg2-invite { width: 100%; box-sizing: border-box; flex-wrap: wrap; gap: 12px 18px; margin-top: 24px; }
}

/* ---- Cinematic layer (2026-09-02): Vignette, Korn, Ambience, Feed, Boot ---- */
/* RGB-Triplet, per JS aus dem offenen Buch gesetzt: gruen im Plus, rot im
   Minus. Faerbt seit 2026-09-04 nur noch den kurzen Puls am Kontostand
   (.cine-pulse) - die ganzflaechige Einfaerbung haengt nicht mehr dran. */
:root { --cine-tint: 168, 85, 247; }
#l3d-cine { position: fixed; inset: 0; pointer-events: none; z-index: 9990; }
#l3d-cine .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(5, 3, 12, 0.5) 100%);
}
/* Hier lagen drei weitere Vollbild-Ebenen: `.tint` faerbte die Seite im
   Farbwert des offenen Buchs (bei unter -1 USDT rot), `.sheen` schob einen
   hellen Streifen alle 16s durchs Bild, `.grain` legte Filmkorn in vier
   Schritten je 0,9s darueber. Zusammen ergab das den roetlichen Schleier und
   das Flimmern, die der Owner am 2026-09-04 abgestellt haben wollte. Die
   Vignette bleibt: sie ist statisch und rahmt nur ab. */

/* War-Room-Feed: Engine-Ereignisse laufen unten links ein und faden aus. */
#l3d-feed {
  position: fixed; left: 18px; bottom: 92px; z-index: 9991; pointer-events: none;
  display: flex; flex-direction: column; gap: 5px; max-width: 44vw;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
}
#l3d-feed .evt {
  color: rgba(233, 213, 255, 0.85); background: rgba(10, 6, 20, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.22); border-left: 2px solid #a855f7;
  padding: 4px 11px; border-radius: 7px; backdrop-filter: blur(5px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: evtIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) backwards, evtOut 1.4s ease 13s forwards;
}
@keyframes evtIn { from { opacity: 0; transform: translateX(-16px); } }
@keyframes evtOut { to { opacity: 0; transform: translateX(-12px); } }

/* Boot-Sequenz: nur beim Screenwechsel, gestaffelt - danach rendert alles hart.
   Ein Re-Render innerhalb des Fensters (Tradelog nach dem Datenabruf) setzt
   die Animation ueber die bereits verstrichene Zeit (--gt-boot-elapsed, vom
   Renderer gesetzt) dort fort, wo sie war - vorher startete sie neu und das
   Tradelog "flackerte" beim Oeffnen (Owner 2026-09-03). */
.l3d-boot .l3d-card, .l3d-boot .l3d-log-wrap, .l3d-boot .l3d-user-card {
  animation: cardBoot 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
  animation-delay: calc(var(--gt-stagger, 0ms) - var(--gt-boot-elapsed, 0ms));
}
.l3d-boot .l3d-card:nth-of-type(2) { --gt-stagger: 60ms; }
.l3d-boot .l3d-card:nth-of-type(3) { --gt-stagger: 120ms; }
.l3d-boot .l3d-card:nth-of-type(4) { --gt-stagger: 180ms; }
.l3d-boot .l3d-card:nth-of-type(5) { --gt-stagger: 240ms; }
.l3d-boot .l3d-card:nth-of-type(6) { --gt-stagger: 300ms; }
@keyframes cardBoot { from { opacity: 0; transform: translateY(16px) scale(0.985); filter: blur(5px); } }

/* Kontostand pulst kurz, wenn sich der gebuchte Wert aendert. */
.cine-pulse { animation: cinePulse 0.9s ease; }
@keyframes cinePulse {
  30% { text-shadow: 0 0 20px rgba(var(--cine-tint), 0.95); transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  /* Korn und Lichtstreifen standen hier - die gibt es nicht mehr, weder mit
     noch ohne Bewegungswunsch. */
  .l3d-boot .l3d-card, .l3d-boot .l3d-log-wrap, .l3d-boot .l3d-user-card { animation: none; }
}


/* ---- Changelog-Reiter (Owner 2026-09-03) -------------------------------
   Eine schmale, lesbare Spalte in der Deck-Sprache: pro Update eine Karte,
   pro Aenderung eine Zeile mit farbigem Bereichs-Chip. Die Liste kann lang
   werden, deshalb scrollt sie INNEN - die Buehne selbst bleibt fest, wie im
   restlichen Dashboard (Owner: "mach das Scrollbare weg"). */
/* Die Buehne des Reiters. Sie traegt die Neigung und das Schweben, die Spalte
   darin traegt den Scrollbalken - getrennt, weil ein Scroll-Container
   `preserve-3d` flach macht und die Karten dann keine Tiefe haetten.
   `--l3d-base` + l3dFloatY ist dieselbe Mechanik wie bei den Dashboard-Saeulen. */
/* Owner 2026-09-04: "der 3d look vom changelog gefaellt mir nicht". Die
   Buehne traegt deshalb keine Neigung und kein Schweben mehr - sie haelt nur
   noch die Breite. Zeitschiene, Knoten und die goldene Neuheit bleiben. */
.cl-deck {
  position: relative;
  width: min(880px, 100%);
}
/* Hier lag bis 2026-09-04 ein dunkler Verlaufsstreifen als Scroll-Hinweis.
   Er hat die unterste Karte nur zugedeckt, statt sie ausklingen zu lassen -
   der Owner las das weiter als "abgeschnitten". Die Aufgabe uebernimmt jetzt
   die Maske auf .cl-wrap. */
/* Neugestaltung 2026-10-09 (Owner: "oben der schwarze Hintergrund und die
   gelben Punkte sehen billig aus, bitte hochwertiger"): vier Entwuerfe als
   Screenshot gerendert, drei Juroren (Owner-Geschmack, Typografie, Deck-
   Konsistenz) - Sieger "ruhig und edel": typografischer Kopf ohne Kasten,
   Haarlinie mit Verlauf, 1px-Zeitschiene, hohle Ringe statt Kugeln, Neuheit
   mit violett-magenta Lichtsaum statt Gold. Uebernommen aus den Verlierern:
   conic-Lichtsaum-Rahmen der Neuheit (D), ruhige Kopfzeile je Karte mit
   Versionsstempel rechts und runder Haarlinien-Knopf ohne Blur (B). */
.cl-wrap {
  --cl-gap: 20px;
  /* Abstand Kopf-Unterkante -> erste Karte: margin 10 + padding-bottom 16. */
  --cl-rail-top: 26px;
  --cl-bg: var(--dk-bg, #060414);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--cl-gap);
  max-height: min(72vh, 720px);
  /* Waagerecht NIE scrollen: eine nach vorne geholte Karte wird durch die
     Perspektive breiter als die Spalte und erzeugte sonst einen zweiten,
     quer laufenden Balken (Owner-Screenshot 2026-09-04). Senkrecht wird
     gescrollt - und zwar MIT sichtbarem Balken. Zweimal (2026-09-04) las der
     Owner die Spalte als "abgeschnitten": erst wegen des dunklen Streifens,
     dann wegen der Ausblendung. Beides wollte sagen "es geht weiter" und
     verdeckte dabei Inhalt. Ein schmaler Balken in Deck-Farben sagt dasselbe,
     ohne eine einzige Zeile zu verstecken. */
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.55) transparent;
  /* Hier lag der Fluchtpunkt fuer die aufklappenden Karten. Ohne 3D-Look
     braucht die Spalte keine Perspektive mehr. */
  /* Die 72px rechts waren der Ueberhang der gedrehten Karten. Ohne Drehung
     schwenkt keine Kante mehr nach aussen, also reicht normale Luft; links
     bleiben 30px fuer Zeitschiene und Knoten, rechts Platz fuer den Balken. */
  padding: 0 20px 0 34px;
  /* Die Zeitschiene (bis 09.10. ein 4px-Rohr als background-image) zeichnen
     jetzt die Karten selbst, 1px je Karte, nahtlos durch die Luecke
     (.cl-wrap > .cl-entry::before). So beginnt sie immer exakt an der
     Haarlinie des Kopfs und endet an der letzten Karte. */
  /* Hier lag eine Maske, die die untersten 86px ausgeblendet hat. Sie ist
     statisch: auch am Scroll-ENDE verblasst die letzte Karte, also sieht der
     letzte Eintrag dauerhaft angeschnitten aus - genau die Beschwerde, die sie
     beheben sollte. Nichts wird mehr ausgeblendet; die 26px sind nur Luft,
     damit Rahmen und Schlagschatten der letzten Karte vollstaendig in die
     Scrollhoehe passen. Nebenwirkung, die mitverschwindet: eine Maske zwingt
     Chrome zu einer eigenen Compositing-Ebene, und die Karten darin tragen
     `backdrop-filter` - das kann als milchiger Schleier ueber die Buehne
     schlagen. */
  padding-bottom: 26px;
}
/* Fallback fuer Engines ohne `scrollbar-color` (dort, wo es greift, gewinnt
   die Standard-Eigenschaft oben und diese Regeln bleiben unbenutzt): schmaler
   violetter Griff ohne Pfeilkoepfe, damit auch dort nicht die klassische
   Windows-Leiste im Deck steht. Der Griff liegt im rechten Innenabstand der
   Spalte, ueberdeckt also keine Karte. */
.cl-wrap::-webkit-scrollbar { width: 8px; }
.cl-wrap::-webkit-scrollbar-track { background: transparent; }
.cl-wrap::-webkit-scrollbar-button { display: none; }
.cl-wrap::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background: rgba(168, 85, 247, 0.5);
  background-clip: padding-box;
}
.cl-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(196, 181, 253, 0.75);
  background-clip: padding-box;
}
/* Kopf: Typografie statt Kasten. Wortmarke in Bebas mit Weiss-zu-Lavendel-
   Verlauf, Untertitel als gedimmte Mono-Kapitaelchen auf der Grundlinie,
   darunter eine 1px-Haarlinie mit Violett-Verlauf, die 20px vor dem Inhalt
   beginnt - genau ueber der Zeitschiene, die darunter ansetzt. Im Fluss-Modus
   (Desktop) ist der Kopf statisch; auf schmalen Schirmen bleibt er sticky mit
   einem weichen Verlauf in Grundfarbe, nie wieder mit einem Kasten. */
.cl-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  z-index: 2;
  margin: 2px 0 10px;
  padding: 6px 0 16px;
  background: none;
}
.cl-top::after {
  content: "";
  position: absolute;
  left: -20px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 200, 255, 0.95) 0, rgba(168, 85, 247, 0.75) 18%, rgba(168, 85, 247, 0.3) 55%, rgba(168, 85, 247, 0) 100%);
}
.cl-top .title { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
/* 32px statt 23px: eine Stufe ueber den Koepfen der anderen Reiter, aber
   keine Plakatwand (die 42px des Entwurfs sprengten den Deck-Massstab). */
.cl-top .title .bebas {
  font-size: 32px;
  letter-spacing: 0.07em;
  line-height: 0.9;
  background: linear-gradient(100deg, #ffffff 0%, #f5f3ff 45%, #d8b4fe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cl-top .note {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(-2px);
}
/* Aktualisieren: runder Haarlinien-Knopf, ohne Blur und Schatten - sieht im
   vollen Deck und im Server-Modus gleich aus. */
.cl-top #changelog-refresh {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 254, 0.24);
  background: transparent;
  color: rgba(216, 180, 254, 0.72);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}
.cl-top #changelog-refresh:hover { color: #fdf4ff; border-color: rgba(240, 171, 252, 0.7); }
.cl-entry { padding: 16px 18px 14px; }
/* Die Spalte ist ein Flex-Container mit Hoehenlimit: ohne das hier stauchen
   sich die Karten, statt zu scrollen - je mehr Eintraege, desto flacher. Beim
   13. Eintrag war von einer Neuheit nur noch die Kopfzeile uebrig, der Rest
   lag unter `overflow: hidden` (Owner 2026-09-04: "Changelog zeigt nichts
   mehr an"). Karten behalten deshalb ihre Hoehe, gescrollt wird die Spalte. */
.cl-wrap > .cl-entry {
  flex: 0 0 auto;
  position: relative;
  /* Die Karten hingen als gekippte Blaetter an der Schiene. Jetzt liegen sie
     flach untereinander; auf Ueberfahren und Oeffnen antworten nur noch
     Helligkeit, Rahmen und Schatten. */
  transition: opacity 0.18s ease, border-color 0.18s ease, box-shadow 0.25s ease;
}
/* Zeitschiene: 1px je Karte, nahtlos durch die Luecke (bottom = -gap). Die
   erste Karte haengt die Linie an die Haarlinie des Kopfs (--cl-rail-top =
   margin + padding-bottom des Kopfs), oben heller; an der letzten Karte
   laeuft sie aus. Belegt ::before, auf dem bis 09.10. das goldene Lauflicht
   der Neuheit lag (cl-edge-sweep, entfernt). */
.cl-wrap > .cl-entry::before {
  content: "";
  position: absolute;
  inset: 0 auto calc(-1 * var(--cl-gap)) -20px;
  width: 1px;
  background: rgba(176, 130, 252, 0.6);
  pointer-events: none;
}
.cl-top + .cl-entry::before,
.l3d-strip + .cl-entry::before {
  inset: calc(-1 * var(--cl-rail-top)) auto calc(-1 * var(--cl-gap)) -20px;
  background: linear-gradient(180deg, rgba(216, 200, 255, 0.95) 0, rgba(176, 130, 252, 0.6) 120px, rgba(176, 130, 252, 0.6) 100%);
}
.cl-wrap > .cl-entry:last-of-type::before {
  inset: 0 auto 0 -20px;
  background: linear-gradient(180deg, rgba(176, 130, 252, 0.6) 0, rgba(176, 130, 252, 0.6) 30%, rgba(168, 85, 247, 0) 100%);
}
.cl-top + .cl-entry:last-of-type::before,
.l3d-strip + .cl-entry:last-of-type::before {
  inset: calc(-1 * var(--cl-rail-top)) auto 0 -20px;
  background: linear-gradient(180deg, rgba(216, 200, 255, 0.95) 0, rgba(176, 130, 252, 0.6) 120px, rgba(176, 130, 252, 0.6) 40%, rgba(168, 85, 247, 0) 100%);
}
/* Knoten: hohle Ringe statt Kugeln. Der Ring sitzt AUSSERHALB der Karte;
   die Stanze (outline in Grundfarbe) unterbricht die Linie hinter dem Ring
   und ueberlebt auch den Server-Modus, der box-shadow komplett entfernt. */
.cl-wrap > .cl-entry::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 21px;
  width: 8px;
  height: 8px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid rgba(196, 181, 253, 0.8);
  background: var(--cl-bg);
  outline: 3px solid var(--cl-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cl-wrap > .cl-entry:hover::after { border-color: rgba(216, 200, 255, 0.95); }
/* Neuheit: groesserer Ring, heller, mit Kern und weichem Schein. */
.cl-wrap > .cl-feature::after {
  left: -27px;
  top: 24px;
  width: 13px;
  height: 13px;
  border-color: rgba(216, 200, 255, 0.95);
  background:
    radial-gradient(circle at 50% 50%, #fdf4ff 0, #fdf4ff 1.6px, rgba(232, 121, 249, 0.6) 2.4px, rgba(232, 121, 249, 0) 3.6px),
    var(--cl-bg);
  box-shadow: 0 0 10px 1px rgba(232, 121, 249, 0.35), 0 0 22px 4px rgba(168, 85, 247, 0.45);
}
.cl-wrap > .cl-feature:hover::after { box-shadow: 0 0 12px 2px rgba(232, 121, 249, 0.5), 0 0 26px 5px rgba(168, 85, 247, 0.6); }
html.lwr-lite .cl-wrap > .cl-feature::after { border-color: #e9d5ff; }

/* NEUHEIT (`highlight: true` im Eintrag): kein Gold mehr. Dunkler Violett-
   Verlauf mit einem Hauch Magenta oben links, als Rahmen ein conic-Lichtsaum
   in Violett-Magenta (Doppel-Hintergrund: Flaeche auf padding-box, Saum auf
   border-box) und ein 1px-Lichtsaum an der Oberkante - alles Hintergrund-
   Schichten, die auch im Server-Modus (ohne box-shadow) stehen bleiben. */
.cl-feature {
  position: relative;
  overflow: visible;
  padding: 20px 22px 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, rgba(232, 121, 249, 0) 4%, rgba(232, 121, 249, 0.9) 30%, rgba(216, 180, 254, 0.95) 62%, rgba(216, 180, 254, 0) 96%) 0 0 / 100% 1px no-repeat border-box,
    radial-gradient(120% 90% at 0% 0%, rgba(232, 121, 249, 0.1), transparent 55%) padding-box,
    linear-gradient(165deg, rgba(40, 22, 72, 0.96), rgba(13, 8, 25, 0.985)) padding-box,
    conic-gradient(from 215deg, rgba(232, 121, 249, 0.92), rgba(168, 85, 247, 0.4) 20%, rgba(168, 85, 247, 0.22) 46%, rgba(232, 121, 249, 0.68) 68%, rgba(168, 85, 247, 0.32) 86%, rgba(232, 121, 249, 0.92)) border-box;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}
/* Ruhige Kopfzeile je Karte: Marke, Datum, Version rechts als Stempel, darunter eine Haarlinie. */
.cl-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 180, 254, 0.14);
}
.cl-date {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.55);
  white-space: nowrap;
}
.cl-feature .cl-title { font-size: 29px; line-height: 1.08; margin-top: 14px; color: #fcf8ff; }
.cl-feature .cl-sum { color: rgba(245, 233, 255, 0.9); font-size: 14.5px; line-height: 1.55; }
.cl-feature .cl-items li { font-size: 13.5px; color: rgba(255, 255, 255, 0.88); }

/* Marke statt Deckel (Owner 2026-09-05: "das zum Ausklappen wegmachen, dafuer
   optisch klarer sichtbar was neue Funktionen sind was Updates"). Jeder
   Eintrag steht offen; die Art steht als erstes Wort oben links. Seit 09.10.
   als Haarlinien-Pillen: Magenta mit weisser Raute = neue Funktion, Lila =
   Update. Die Unterscheidung tragen ausserdem Ring, Saum und Titelgroesse. */
.cl-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.cl-badge.neu {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  color: #f3b6fb;
  background: rgba(232, 121, 249, 0.08);
  border: 1px solid rgba(232, 121, 249, 0.42);
}
.cl-badge.neu::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}
.cl-badge.upd {
  color: rgba(196, 181, 253, 0.78);
  background: transparent;
  border: 1px solid rgba(196, 181, 253, 0.26);
}
/* Der Update-Eintrag ist eine vollwertige Karte, nur ruhiger als eine
   Neuheit: duennerer Rahmen, Lichtsaum als Hintergrund-Schicht (bleibt im
   Server-Modus), kleinere Typografie. */
.cl-update {
  padding: 15px 18px 14px;
  border-color: rgba(196, 181, 253, 0.2);
  background:
    linear-gradient(90deg, rgba(216, 180, 254, 0) 0, rgba(216, 180, 254, 0.32) 40%, rgba(216, 180, 254, 0) 100%) 0 0 / 100% 1px no-repeat border-box,
    linear-gradient(145deg, rgba(30, 15, 55, 0.9), rgba(8, 5, 20, 0.85)) padding-box;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.cl-update .cl-title { font-size: 20px; line-height: 1.15; margin-top: 12px; color: rgba(238, 230, 255, 0.92); }
.cl-update .cl-sum { font-size: 13px; color: rgba(226, 214, 248, 0.7); }
.cl-update .cl-items li { font-size: 12.5px; }

/* UPDATE. Laeuft im Hintergrund mit: gedimmt, eine Zeile hoch, Details
   zugeklappt. Beim Ueberfahren oder Oeffnen kommt es auf volle Helligkeit. */
.cl-compact {
  padding: 0;
  border-color: rgba(168, 85, 247, 0.16);
  background: linear-gradient(145deg, rgba(24, 12, 44, 0.55), rgba(8, 5, 20, 0.5));
  box-shadow: none;
  opacity: 0.62;
}
.cl-compact:hover,
.cl-compact[open] {
  opacity: 1;
  border-color: rgba(168, 85, 247, 0.32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Hier richteten sich die Karten beim Ueberfahren auf und kamen nach vorne.
   Die Unterscheidung offen/zu traegt jetzt allein die Helligkeit oben. */
/* Offener Eintrag: eine Trennlinie zwischen Kopfzeile und Inhalt, sonst
   fliessen Titel und Zusammenfassung ineinander. */
.cl-compact[open] > summary { border-bottom: 1px solid rgba(168, 85, 247, 0.14); margin-bottom: 11px; }
.cl-compact > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  cursor: pointer;
  list-style: none;
}
.cl-compact > summary::-webkit-details-marker { display: none; }
.cl-ctitle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: rgba(233, 213, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-caret { font-size: 10px; color: rgba(196, 181, 253, 0.5); transition: transform 0.18s ease; }
.cl-compact[open] .cl-caret { transform: rotate(180deg); }
.cl-cbody { padding: 0 15px 14px; }
.cl-compact .cl-sum { margin-top: 0; font-size: 12.5px; }
.cl-compact .cl-items li { font-size: 12.5px; }
.cl-title { margin: 2px 0 0; font-size: 21px; letter-spacing: 0.04em; color: #f5e9ff; }
/* App-Version als Haarlinien-Stempel rechts in der Kopfzeile der Karte. */
.cl-ver {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 180, 254, 0.66);
  border: 1px solid rgba(216, 180, 254, 0.2);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
}
.cl-sum { margin: 9px 0 0; color: rgba(233, 213, 255, 0.72); font-size: 13px; line-height: 1.5; }
/* Haarlinie statt Luft zwischen den Punkten: bei drei, vier Aenderungen pro
   Eintrag liest sich das als Tabelle statt als Absatzhaufen. */
.cl-items { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cl-items li + li { border-top: 1px solid rgba(168, 85, 247, 0.12); }
.cl-items li { padding: 9px 0; }
.cl-items li:first-child { padding-top: 2px; }
.cl-items li:last-child { padding-bottom: 0; }
.cl-items li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.cl-kind {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 6px;
  padding: 3px 0;
  margin-top: 2px;
  /* Gedaempft (09.10.): kein Schein mehr, Rahmen nur noch ein Drittel der
     Farbe - der Chip bleibt die Orientierung der Zeile, schreit aber nicht.
     Die Fuellung steht je Klasse ausgeschrieben statt per color-mix. */
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cl-bot { color: #6dffbf; background: rgba(109, 255, 191, 0.1); border-color: rgba(109, 255, 191, 0.3); }
.cl-web { color: #c4b5fd; background: rgba(196, 181, 253, 0.11); border-color: rgba(196, 181, 253, 0.3); }
.cl-app { color: #7dd3fc; background: rgba(125, 211, 252, 0.11); border-color: rgba(125, 211, 252, 0.3); }
/* Gedaempftes Amber statt Gelb (Owner 09.10.: Gelb wirkt billig). */
.cl-fix { color: #e8c58f; background: rgba(232, 197, 143, 0.08); border-color: rgba(232, 197, 143, 0.3); }

@media (max-width: 1100px) {
  /* Schmaler Schirm, meist Touch: die Neigung frisst hier nur Breite und
     laesst den Text schraeg laufen. Spalte flach - Schiene und Knoten bleiben. */
  .cl-deck { transform: none; animation: none; }
  .cl-wrap {
    max-height: none;
    overflow: visible;
    perspective: none;
    padding-right: 6px;
    /* Ohne Hoehenlimit wird nichts abgeschnitten - eine Ausblendung wuerde
       hier den letzten Eintrag grundlos verschlucken. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cl-wrap > .cl-entry,
  .cl-wrap > .cl-compact:hover,
  .cl-wrap > .cl-compact[open],
  .cl-wrap > .cl-compact[open]:hover { transform: none; }
  .cl-wrap > .cl-feature { transform: none; animation: none; }
  .cl-items li { grid-template-columns: 42px 1fr; font-size: 12.5px; }
  .cl-title { font-size: 19px; }
  .cl-feature { padding: 17px 16px 15px; }
  .cl-feature .cl-title { font-size: 23px; }
  .cl-ctitle { white-space: normal; }
  /* Schmaler Schirm: die Spalte scrollt innen, der Kopf klebt oben - mit einem
     weichen Verlauf in Grundfarbe, damit der Text nicht durch ihn scrollt. */
  .cl-top {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, var(--cl-bg) 0, var(--cl-bg) 55%, transparent 100%);
    padding-top: 10px;
  }
  .cl-top .title { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cl-top .title .bebas { font-size: 26px; }
  .cl-top .note { transform: none; }
  .cl-wrap { padding-left: 30px; }
  .cl-wrap > .cl-entry::before { left: -18px; }
  .cl-top::after { left: -18px; }
  .cl-wrap > .cl-entry::after { left: -22px; }
  .cl-wrap > .cl-feature::after { left: -25px; }
}


/* ---- Wach-Routine: Befundstreifen ueber dem Deck (2026-09-03) -----------
   Sitzt absolut ueber der Buehne, damit das dreispaltige Raster unveraendert
   bleibt - das Dashboard ist eine feste Buehne, kein Fluss (Owner-Veto gegen
   Scrollen). Nur da, wenn es etwas zu melden gibt. */
.l3d-health {
  /* Kopfzeile UND Buehne sind absolut positioniert - ein Element im normalen
     Fluss landet deshalb bei top:0 und verdeckt Bot-Status und Uhr
     (Playwright-Befund 2026-09-03). Also selbst absolut, unter den 68px
     hohen Header gesetzt. */
  position: absolute;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  /* Ueber den Karten, nicht dahinter: ein ungeschuetzter Stop darf die
     Equity-Karte ruhig verdecken - sichtbar ist er sonst gar nicht. */
  z-index: 30;
  width: min(760px, 92%);
  border-radius: 13px;
  padding: 9px 14px 10px;
  backdrop-filter: blur(9px);
  background: rgba(24, 8, 14, 0.86);
  border: 1px solid rgba(255, 109, 138, 0.5);
  box-shadow: 0 0 28px rgba(255, 109, 138, 0.18);
}
.l3d-health.is-warn {
  background: rgba(26, 20, 6, 0.86);
  border-color: rgba(255, 209, 102, 0.45);
  box-shadow: 0 0 24px rgba(255, 209, 102, 0.14);
}
.l3d-health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #ff9db1;
}
.l3d-health.is-warn .l3d-health-head { color: #ffd166; }
.l3d-health ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.l3d-health li { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.l3d-health li.more { color: rgba(233, 213, 255, 0.6); font-size: 11px; }
@media (max-width: 1100px) {
  .l3d-health { top: 62px; left: 12px; right: 12px; width: auto; transform: none; }
}