/* Liquid-Glass-Fundament (UI-Paket, Feedback #46 u.a.) Reine Praesentationsschicht. 1:1 aus dem genehmigten Mockup destilliert: docs/superpowers/mockups/2026-07-03-futuristisch-paket/index.html Namespace lg- damit nichts mit app.css/expose.css kollidiert. Doku: docs/superpowers/specs/2026-07-03-ui-liquid-glass-design.md Theme-Semantik (Nutzer-Feedback): Seiten, die in die App-Shell eingebettet sind (z.B. Leads), haben KEINEN eigenen Umschalter mehr und folgen dem VORHANDENEN Shell-Toggle (app/templates/base.html): ist der Default, der Shell-Toggle setzt bei "Dunkel" data-theme="dark" auf . Deshalb bleiben die --lg-*-Variablen unter :root auf den DUNKLEN Werten (Fallback fuer eigenstaendige Seiten wie Chat/Pruefseite/2FA mit data-default="dark" via theme.js) und [data-theme="light"] ueberschreibt sie auf Hell — das deckt sich exakt mit der Shell-Semantik: Shell-Default "light" trifft [data-theme="light"], Shell "dark" faellt (mangels eigenem [data-theme="dark"]-Block hier) auf die dunklen :root-Werte zurueck. Kein separates data-theme mehr auf #lgLeads noetig. */ :root{ --lg-a:#1799b4;--lg-a2:#63d0e8;--lg-hot:#ff5c4d;--lg-bg0:#070d1c;--lg-ink:#e8f0fb;--lg-mut:#8fa3c4; --lg-glasA:rgba(20,34,62,.85);--lg-glasB:rgba(10,18,36,.9);--lg-rand:rgba(99,208,232,.22);--lg-feld:rgba(255,255,255,.05); --lg-radial:radial-gradient(1200px 600px at 70% -10%,#12325a 0%,var(--lg-bg0) 55%); --lg-grid:rgba(99,208,232,.07);--lg-zell:#63d0e8;--lg-schw:rgba(0,0,0,.9) } [data-theme="light"]{ --lg-bg0:#f2efe8;--lg-ink:#1e2b4d;--lg-mut:#67748c;--lg-a2:#118aa3; --lg-glasA:rgba(255,255,255,.8);--lg-glasB:rgba(250,248,243,.92);--lg-rand:rgba(23,153,180,.35);--lg-feld:rgba(23,153,180,.07); --lg-radial:radial-gradient(1200px 600px at 70% -10%,#d8eef4 0%,var(--lg-bg0) 55%); --lg-grid:rgba(23,153,180,.08);--lg-zell:#0f7d94;--lg-schw:rgba(30,43,77,.25) } /* Hintergrund-Raster (optional je Seite einsetzbar) */ .lg-bg{background:var(--lg-bg0);transition:background .5s,color .3s} /* Hinweis (Nutzer-Feedback): kein Radial-Leuchtfleck und kein Gitter-Schimmer auf App-Flaechen — Hintergrund bleibt flach. --lg-radial bleibt als Token fuer evtl. dezente Verlaeufe auf oeffentlichen Standalone-Seiten erhalten. */ /* Flacher, ruhiger Hintergrund fuer eingebettete Flaechen (z.B. Leads, Nutzer-Feedback): solide var(--lg-bg0), KEIN Radial-Leuchtverlauf (--lg-radial), KEIN Gitter-Overlay. */ .lg-bg-flat{background:var(--lg-bg0);transition:background .5s,color .3s} /* Theme-Umschalter-Knopf */ .lg-mode{position:fixed;top:16px;right:18px;z-index:9;border:1px solid var(--lg-rand);background:var(--lg-glasA); color:var(--lg-ink);border-radius:99px;padding:9px 20px;font:700 13px "Segoe UI",sans-serif;cursor:pointer; backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); box-shadow:0 8px 22px -12px var(--lg-schw),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.1)} /* Glas-Flaeche: Blur+Saturate, Licht-Kante, Glanz-Schimmer via ::before, 26px-Radius */ .lg-glass{background:linear-gradient(160deg,var(--lg-glasA),var(--lg-glasB));border:1px solid var(--lg-rand);border-radius:26px;padding:22px; backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%); box-shadow:0 24px 60px -30px var(--lg-schw), inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.12), inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(255,255,255,.08); transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .25s;position:relative} .lg-glass::before{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none; background:linear-gradient(118deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 22%,transparent 42%,transparent 78%,rgba(255,255,255,.1) 100%); mix-blend-mode:screen;opacity:.75} .lg-glass:hover{box-shadow:0 30px 70px -28px rgba(23,153,180,.45), inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12)} /* Fallback ohne backdrop-filter-Unterstuetzung: solide Flaeche statt Blur */ @supports not (backdrop-filter: blur(1px)) { .lg-glass,.lg-mode{background:var(--lg-glasB)} } /* Scan-Schimmer (optional auf .lg-glass zusaetzlich) */ .lg-scan::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none; background:linear-gradient(180deg,transparent 0%,rgba(99,208,232,.09) 50%,transparent 100%); background-size:100% 220%;animation:lg-scan 5.5s linear infinite} @keyframes lg-scan{0%{background-position:0 -120%}100%{background-position:0 120%}} @keyframes lg-pulse{0%{box-shadow:0 0 0 0 rgba(255,92,77,.55)}70%{box-shadow:0 0 0 10px rgba(255,92,77,0)}100%{box-shadow:0 0 0 0 rgba(255,92,77,0)}} @keyframes lg-floatin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes lg-blink{0%,100%{opacity:.25}50%{opacity:1}} @keyframes lg-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes lg-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.18)}100%{transform:translate(0,0) scale(1)}} @media (prefers-reduced-motion:reduce){ .lg-bg,.lg-glass,.lg-glass::before,.lg-scan::after,.lg-orb,.lg-cell,.lg-cell.on,.lg-pill,.lg-dot,.lg-tippt i,.lg-lead,.lg-msg,.lg-shield{ animation:none!important;transition:none!important } } /* Wandernde Leucht-Orbs hinter dem Glas (fixed, z-index -1, kein Layout-Shift) */ .lg-orb{position:fixed;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:-1;animation:lg-drift 13s ease-in-out infinite} .lg-o1{width:380px;height:380px;background:var(--lg-a);top:12%;left:14%} .lg-o2{width:320px;height:320px;background:#7c5cff;bottom:8%;right:16%;animation-delay:4s} .lg-o3{width:260px;height:260px;background:#63d0e8;top:55%;left:46%;animation-delay:8s;opacity:.35} /* Lead-Karte (Glas-Blase) */ .lg-lead{border:1px solid var(--lg-rand);border-radius:18px;padding:13px 15px;margin-top:12px;background:var(--lg-feld); backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);animation:lg-floatin .6s both} .lg-lead:nth-child(3){animation-delay:.15s}.lg-lead:nth-child(4){animation-delay:.3s} .lg-lead.lg-neu{border-color:var(--lg-a2);box-shadow:0 0 22px -6px rgba(99,208,232,.6)} .lg-lead.lg-hot{outline:2px solid var(--lg-hot);outline-offset:3px} .lg-kopf{display:flex;gap:10px;align-items:center} .lg-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#04222b; background:conic-gradient(from 180deg,var(--lg-a),#63d0e8,var(--lg-a));box-shadow:0 0 14px -2px rgba(99,208,232,.7)} .lg-meta{font-size:11px;color:var(--lg-mut)} .lg-dot{width:9px;height:9px;border-radius:50%;background:var(--lg-hot);margin-left:auto;animation:lg-pulse 1.6s infinite} .lg-zus{font-size:12.5px;color:var(--lg-ink);opacity:.85;margin-top:8px;padding-left:10px;border-left:2px solid var(--lg-rand)} .lg-chips{display:flex;gap:6px;margin-top:9px;font-size:10.5px;flex-wrap:wrap} .lg-chip{border:1px solid var(--lg-rand);border-radius:99px;padding:2px 9px;color:var(--lg-ink);opacity:.85} .lg-chip.h{border-color:var(--lg-hot);color:var(--lg-hot);background:rgba(255,92,77,.12);opacity:1} /* Nav-Zeile + Puls-Badge */ .lg-navd{display:flex;justify-content:space-between;align-items:center;background:var(--lg-feld); border:1px solid var(--lg-rand);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:6px} .lg-pill{background:var(--lg-hot);color:#fff;font-size:10.5px;font-weight:800;border-radius:99px;padding:1px 8px;animation:lg-pulse 1.6s infinite} /* Chat-Blasen */ .lg-msg{max-width:82%;padding:9px 13px;border-radius:14px;margin-top:10px;font-size:12.5px;animation:lg-floatin .5s both} .lg-bot{background:var(--lg-feld);border:1px solid var(--lg-rand);border-bottom-left-radius:4px} .lg-ich{background:linear-gradient(135deg,var(--lg-a),#63d0e8);color:#04222b;font-weight:600;margin-left:auto;border-bottom-right-radius:4px; box-shadow:0 6px 18px -8px rgba(99,208,232,.8);animation-delay:.2s} .lg-tippt{display:inline-flex;gap:4px;padding:10px 13px} .lg-tippt i{width:6px;height:6px;border-radius:50%;background:var(--lg-a2);animation:lg-blink 1.2s infinite;display:inline-block} .lg-tippt i:nth-child(2){animation-delay:.2s}.lg-tippt i:nth-child(3){animation-delay:.4s} .lg-chatin{display:flex;gap:8px;margin-top:14px} .lg-chatin input{flex:1;background:var(--lg-feld);border:1px solid var(--lg-rand);border-radius:99px;padding:10px 16px;color:var(--lg-ink);font:inherit;font-size:13px} .lg-chatin button{border:0;border-radius:99px;padding:10px 18px;font-weight:800;color:#04222b;cursor:pointer; background:linear-gradient(135deg,var(--lg-a),#63d0e8);box-shadow:0 0 16px -4px rgba(99,208,232,.8)} /* Schild-Icon (2FA / Pruefseite) */ .lg-shield{width:74px;height:74px;margin:6px auto 12px;display:grid;place-items:center;border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(99,208,232,.4),rgba(23,153,180,.12)); border:1px solid var(--lg-rand);box-shadow:0 0 34px -6px rgba(99,208,232,.6);font-size:32px;animation:lg-floaty 3.4s ease-in-out infinite} /* Code-Anzeigezellen (2FA / Pruefseite) */ .lg-codein{display:flex;gap:8px;justify-content:center;margin:14px 0 6px} .lg-cell{width:42px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:20px;font-weight:800; background:var(--lg-feld);border:1px solid var(--lg-rand);color:var(--lg-zell); backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.1)} .lg-cell.on{border-color:var(--lg-a2);transform:translateY(-3px); box-shadow:0 0 14px -3px rgba(99,208,232,.85),inset 0 1px 0 rgba(255,255,255,.55)} /* Neon-Fortschrittsbalken (Upload-Fortschritt, Nachtrag 2) */ .lg-bar{height:8px;border-radius:99px;background:var(--lg-feld);overflow:hidden;margin-top:8px; border:1px solid var(--lg-rand)} .lg-bar i{display:block;height:100%;width:0%;border-radius:99px;font-style:normal; background:linear-gradient(90deg,var(--lg-a),var(--lg-a2));transition:width .3s ease} /* Ergebnis-/Erfolgsanzeige (Pruefseite) */ .lg-ok{margin-top:12px;text-align:center;color:#2fae76;font-weight:700;font-size:13.5px} .lg-ok b{display:inline-block;border-radius:99px;background:rgba(63,214,138,.15);padding:3px 12px} .lg-hint{font-size:.82rem;color:var(--lg-mut);margin-top:12px}