/* LogicPile „Lebendige Wand" — gemeinsames Design-System (Drop-in)
   Farben: nur Schwarz · Weiß · Rot (#DE002E). Schrift: Unbounded (Display), Inter Tight (UI), JetBrains Mono (Daten).
   Einbinden:  <link rel="stylesheet" href="/wand.css">  +  <script src="/wand.js"></script>
   Dann:       LPWand.mount({ intensity: 'full' | 'ambient' })
   Das Feld liegt HINTER der App (z-index:-1). Die App-Grundfläche muss transparent sein (--bg: transparent). */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --lp-void:#060607; --lp-ink:#0e0d10;
  --lp-red:#de002e; --lp-red-hot:#ff3b5c; --lp-red-deep:#7a0018; --lp-red-soft:rgba(222,0,46,.16);
  --lp-bone:#f6f4f6; --lp-mist:#b4b1b8; --lp-faint:#77747c;
  --lp-brd:rgba(255,255,255,.10); --lp-hi:rgba(255,255,255,.16);
  --lp-glass:rgba(18,16,19,.55); --lp-glass-elev:rgba(30,28,32,.72);
  --lp-disp:'Unbounded',system-ui,sans-serif;
  --lp-ui:'Inter Tight',system-ui,sans-serif;
  --lp-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* Grund: Obsidian-Schwarz, Feld dahinter */
html.lp-wand-on body{background:var(--lp-void);color:var(--lp-bone)}
.lp-wand{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lp-wand canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-wand-vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(0,0,0,.75) 100%)}
.lp-wand-vig.ambient{background:radial-gradient(120% 90% at 50% 50%,transparent 30%,rgba(0,0,0,.6) 100%)}

/* Glas-Panels — Flächen, die über dem Feld schweben */
.lp-glass{background:var(--lp-glass);border:1px solid var(--lp-brd);border-radius:18px;
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 1px 0 var(--lp-hi) inset,0 24px 60px -30px rgba(0,0,0,.9)}
.lp-glass.elev{background:var(--lp-glass-elev)}

/* Display-Schrift auf Überschriften */
.lp-disp,html.lp-wand-on h1,html.lp-wand-on h2{font-family:var(--lp-disp);letter-spacing:-.015em}
.lp-mono{font-family:var(--lp-mono);letter-spacing:.06em}
.lp-eye{font-family:var(--lp-mono);font-size:11px;letter-spacing:.3em;color:var(--lp-red-hot);text-transform:uppercase}

/* HUD-Leiste */
.lp-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,34px)}
.lp-mark{width:30px;height:30px;border-radius:8px;position:relative;flex:none;
  background:conic-gradient(from 210deg,var(--lp-red),var(--lp-red-deep),#150207,var(--lp-red));
  box-shadow:0 0 20px rgba(222,0,46,.55),inset 0 0 0 1px rgba(255,255,255,.18)}
.lp-mark::after{content:"";position:absolute;inset:8px;border-radius:3px;background:var(--lp-void)}
.lp-status{font-family:var(--lp-mono);font-size:10.5px;color:var(--lp-mist);letter-spacing:.08em;display:flex;gap:16px;align-items:center}
.lp-dot{width:6px;height:6px;border-radius:50%;background:var(--lp-bone);box-shadow:0 0 8px #fff;display:inline-block;margin-right:6px;animation:lp-pulse 2.6s ease-in-out infinite}
.lp-ava{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--lp-red),var(--lp-red-deep));display:grid;place-items:center;font-family:var(--lp-mono);font-size:10px;font-weight:700;color:#fff}
@keyframes lp-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ⌘K-Balken */
.lp-cmd{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--lp-hi);border-radius:14px;padding:11px 16px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px #000}
.lp-cmd .k{font-family:var(--lp-mono);font-size:10.5px;color:var(--lp-faint);border:1px solid var(--lp-brd);border-radius:6px;padding:2px 6px}
.lp-cmd input{flex:1;background:transparent;border:0;outline:0;color:var(--lp-bone);font-family:var(--lp-ui);font-size:15px}
.lp-cmd input::placeholder{color:var(--lp-faint)}

/* App-Knoten im Feld (Hub-Landing) */
.lp-node{position:fixed;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--lp-bone);cursor:pointer;transition:transform .25s}
.lp-node .orb{width:14px;height:14px;border-radius:50%;position:relative;transition:all .3s;
  background:radial-gradient(circle at 40% 35%,#fff,var(--lp-bone) 40%,rgba(246,244,246,.4) 70%,transparent);
  box-shadow:0 0 14px rgba(255,255,255,.75),0 0 30px rgba(255,255,255,.25)}
.lp-node .orb::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,255,255,.18);transition:all .3s}
.lp-node .lbl{font-family:var(--lp-ui);font-size:12.5px;font-weight:500;color:var(--lp-mist);transition:all .3s;white-space:nowrap}
.lp-node .sub{font-family:var(--lp-mono);font-size:9.5px;color:var(--lp-faint);letter-spacing:.06em;opacity:0;transform:translateY(-4px);transition:all .3s}
.lp-node:hover .orb,.lp-node:focus-visible .orb{transform:scale(1.45);
  background:radial-gradient(circle at 40% 35%,#fff,var(--lp-red-hot) 40%,var(--lp-red) 70%,transparent);
  box-shadow:0 0 22px rgba(222,0,46,.9),0 0 60px rgba(222,0,46,.5)}
.lp-node:hover .orb::after,.lp-node:focus-visible .orb::after{inset:-16px;border-color:rgba(222,0,46,.6)}
.lp-node:hover .lbl,.lp-node:focus-visible .lbl{color:var(--lp-bone);font-weight:600;transform:translateY(2px)}
.lp-node:hover .sub,.lp-node:focus-visible .sub{opacity:1;transform:none}
.lp-node:focus-visible{outline:none}

/* Primär-Button */
.lp-btn{font-family:var(--lp-ui);font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:11px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--lp-red),var(--lp-red-deep));box-shadow:0 8px 26px -8px rgba(222,0,46,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--lp-brd);box-shadow:none;color:var(--lp-bone)}

@media (prefers-reduced-motion:reduce){.lp-dot{animation:none}}