/* ════════════════════════════════════════════════════════════════════ LEX UI — gemeinsames Design-System (Cockpit + Story-Seiten) Dark "Intelligence Command Center": #0a0a0a · Weiß · #c8102e Lesbarkeit vor Effekten. Premium, aber ruhig. Fonts (im der Seite laden): https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap ════════════════════════════════════════════════════════════════════ */ :root{ --bg:#0a0a0a; --bg2:#101010; --bg3:#161616; --panel:rgba(14,14,16,0.92); --pb:rgba(255,255,255,0.08); --pb2:rgba(255,255,255,0.14); --pbs:rgba(255,255,255,0.22); --accent:#c8102e; --accent2:#8b0b20; --accent-warm:#e02040; --ag:rgba(200,16,46,0.12); --ag2:rgba(200,16,46,0.24); --amber:#d4a030; --green:#5fb583; --blue:#5a8fc0; --violet:#7d6fc0; --red:#e83850; --t0:#ffffff; --t1:#e4e4e8; --t2:#a0a0a8; --t3:#5a5a62; --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --serif:'Cinzel',Georgia,'Times New Roman',serif; --glow:0 0 10px rgba(200,16,46,0.45),0 0 28px rgba(200,16,46,0.14); --panel-shadow:0 12px 40px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.04); --grid:rgba(255,255,255,0.022); --r:10px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;background:var(--bg);color:var(--t0);font-family:var(--sans);line-height:1.5; -webkit-font-smoothing:antialiased;} body{ background-image: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px), radial-gradient(1200px 600px at 70% -10%, rgba(200,16,46,0.06), transparent 60%); background-size:42px 42px,42px 42px,100% 100%; } a{color:inherit;text-decoration:none} ::selection{background:var(--ag2);color:#fff} /* ── Topbar ───────────────────────────────────────────────────────── */ .lx-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px; padding:10px 18px;background:rgba(8,8,9,0.92);backdrop-filter:blur(10px); border-bottom:1px solid var(--pb);} .lx-brand{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:3px; color:var(--t0);text-shadow:var(--glow);white-space:nowrap} .lx-class{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--accent); border:1px solid var(--ag2);border-radius:3px;padding:2px 6px;text-transform:uppercase} .lx-nav{display:flex;gap:14px;margin-left:auto;font-family:var(--mono);font-size:11px;flex-wrap:wrap} .lx-nav a{color:var(--t2);padding:4px 2px;border-bottom:2px solid transparent;transition:.2s} .lx-nav a:hover{color:var(--t0)} .lx-nav a.on{color:var(--accent);border-bottom-color:var(--accent)} .lx-clock{font-family:var(--mono);font-size:11px;color:var(--t2)} /* ── Layout ───────────────────────────────────────────────────────── */ .lx-wrap{max-width:1480px;margin:0 auto;padding:18px} .lx-grid{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)} .col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5} .col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8} .col-9{grid-column:span 9}.col-12{grid-column:span 12} @media(max-width:1024px){.lx-grid{grid-template-columns:repeat(6,1fr)} .col-3,.col-4,.col-5{grid-column:span 3}.col-6,.col-7,.col-8,.col-9{grid-column:span 6}} @media(max-width:680px){.lx-grid{grid-template-columns:1fr} [class^="col-"],[class*=" col-"]{grid-column:span 1}} /* ── Section header ───────────────────────────────────────────────── */ .lx-section{margin:34px 0 12px;display:flex;align-items:baseline;gap:12px} .lx-section h2{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:1px} .lx-section .sub{font-size:12px;color:var(--t2)} .lx-section::before{content:"";flex:0 0 18px;height:2px;background:var(--accent);box-shadow:var(--glow); align-self:center} /* ── Panel ────────────────────────────────────────────────────────── */ .lx-panel{position:relative;background:var(--panel);border:1px solid var(--pb); border-radius:var(--r);box-shadow:var(--panel-shadow);padding:14px;overflow:hidden} .lx-panel::before,.lx-panel::after{content:"";position:absolute;width:10px;height:10px; border-color:var(--ag2);border-style:solid;opacity:.8;pointer-events:none} .lx-panel::before{top:6px;left:6px;border-width:1px 0 0 1px} .lx-panel::after{bottom:6px;right:6px;border-width:0 1px 1px 0} .lx-panel-h{display:flex;align-items:center;gap:8px;margin-bottom:10px} .lx-panel-h .t{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:var(--accent)} .lx-panel-h .meta{margin-left:auto;font-size:10px;color:var(--t3);font-family:var(--mono)} .lx-live{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px; color:var(--green);letter-spacing:1px} .lx-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 8px var(--green);animation:lx-pulse 1.6s infinite} @keyframes lx-pulse{0%,100%{opacity:1}50%{opacity:.3}} /* ── KPI tiles ────────────────────────────────────────────────────── */ .lx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .lx-kpi{position:relative;background:var(--bg2);border:1px solid var(--pb);border-radius:var(--r); padding:14px 16px;overflow:hidden} .lx-kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent); box-shadow:var(--glow)} .lx-kpi .v{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--t0);line-height:1.1} .lx-kpi .l{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:1px;margin-top:4px} .lx-kpi .d{font-size:10px;color:var(--t3);margin-top:2px} .lx-kpi.green::after{background:var(--green);box-shadow:0 0 10px rgba(95,181,131,.4)} .lx-kpi.amber::after{background:var(--amber);box-shadow:0 0 10px rgba(212,160,48,.4)} /* ── Badges / chips ───────────────────────────────────────────────── */ .lx-badge{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:10px; border:1px solid var(--pb2);color:var(--t1);white-space:nowrap} .lx-badge.ok,.lx-badge.verifiziert,.lx-badge.niedrig{border-color:var(--green);color:var(--green)} .lx-badge.mid,.lx-badge.teilweise_belegt,.lx-badge.mittel{border-color:var(--amber);color:var(--amber)} .lx-badge.hi,.lx-badge.unklar,.lx-badge.hoch,.lx-badge.sehr_hoch{border-color:var(--accent);color:var(--accent-warm)} .lx-chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:12px;background:var(--bg3); border:1px solid var(--pb);color:var(--t2);margin:2px} /* ── Timeline (Kausal) ────────────────────────────────────────────── */ .lx-timeline{position:relative;margin:8px 0 0 6px;padding-left:22px} .lx-timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px; background:linear-gradient(var(--accent),var(--accent2));opacity:.5} .lx-tl{position:relative;padding:0 0 16px 8px} .lx-tl::before{content:"";position:absolute;left:-22px;top:3px;width:11px;height:11px;border-radius:50%; background:var(--bg);border:2px solid var(--accent);box-shadow:var(--glow)} .lx-tl.sev::before{background:var(--accent)} .lx-tl .dt{font-family:var(--mono);font-size:11px;color:var(--accent)} .lx-tl .ti{font-size:13px;color:var(--t0);font-weight:600;margin:2px 0} .lx-tl .bd{font-size:12px;color:var(--t1)} .lx-tl .src{font-size:11px}.lx-tl .src a{color:var(--blue)} /* ── Bars / votes ─────────────────────────────────────────────────── */ .lx-bar{height:10px;border-radius:6px;background:var(--bg3);overflow:hidden;border:1px solid var(--pb)} .lx-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent)); box-shadow:var(--glow)} .lx-vote{display:flex;height:30px;border-radius:6px;overflow:hidden;border:1px solid var(--pb);font-family:var(--mono);font-size:12px} .lx-vote .ja{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center} .lx-vote .nein{background:#2a2a30;color:var(--t1);display:flex;align-items:center;justify-content:center} .lx-vote .enth{background:#1a1a1e;color:var(--t3);display:flex;align-items:center;justify-content:center} /* ── Generic text helpers ─────────────────────────────────────────── */ .lx-mut{color:var(--t2);font-size:12px} .lx-small{font-size:11px;color:var(--t3)} .lx-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .lx-divider{height:1px;background:var(--pb);margin:12px 0} .lx-disclaimer{background:rgba(212,160,48,0.07);border-left:3px solid var(--amber); padding:10px 12px;border-radius:4px;font-size:12px;color:var(--t1)} .lx-ai-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px; color:var(--violet);border:1px solid rgba(125,111,192,.4);border-radius:4px;padding:2px 7px} .lx-foot{margin:40px 0 60px;padding-top:16px;border-top:1px solid var(--pb);color:var(--t3);font-size:11px} .lx-skel{background:linear-gradient(90deg,#141416,#1c1c20,#141416);background-size:200% 100%; animation:lx-shimmer 1.4s infinite;border-radius:6px;min-height:14px} @keyframes lx-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .lx-canvas{width:100%;height:auto;display:block} .lx-map{height:440px;border-radius:var(--r);overflow:hidden;border:1px solid var(--pb)} .lx-link{color:var(--accent);font-family:var(--mono);font-size:11px} .lx-link:hover{text-decoration:underline} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}