/* ───────────────────────────────────────── KELLER FLAIR — atmosphere layer Aktiviert durch Revert: "kf" aus body class entfernen ───────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); /* ── 1. Concrete/Noise overlay ─────────────────── */ body.kf::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } /* ── 2. Top-Vignette / Glühbirnen-Spotlight ─────── */ body.kf { background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(96,176,255,0.045) 0%, rgba(96,176,255,0) 55%), radial-gradient(ellipse 140% 110% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%); background-attachment: fixed; } /* ── 3. Logo Industrial Typo ────────────────────── */ body.kf .nav-logo { font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important; letter-spacing: 3.5px; font-weight: 400 !important; font-size: 1.15em; } body.kf .nav-logo .nav-logo-accent { letter-spacing: 3.5px; margin-left: 1px; } body.kf .lc-title { font-family: 'Bebas Neue', 'Rajdhani', sans-serif !important; letter-spacing: 6px; font-weight: 400 !important; } /* ── 4. Footer Tagline (added by header.js when body.kf) ──── */ body.kf .kf-tagline { color: var(--muted); font-style: italic; opacity: 0.65; margin-left: 2px; letter-spacing: 0.3px; } /* ── 5. Per-class show/hide für 404-Emoji & co. ──── */ .kf-only { display: none; } .not-kf-only { display: inline; } body.kf .kf-only { display: inline; } body.kf .not-kf-only { display: none; } /* ── 6. Card Industrial Corner Brackets ─────────── */ /* NICHT auf .sh (hat schon ::after für underline) und NICHT auf .fp-page (würde Layout brechen) */ body.kf .pf, body.kf .lg-card { position: relative; } body.kf .q-card::after, body.kf .pf::after, body.kf .lg-card::after { content: ''; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-top: 1.5px solid rgba(96,176,255,0.45); border-left: 1.5px solid rgba(96,176,255,0.45); pointer-events: none; z-index: 1; } /* ───────────────────────────────────────── LIGHT THEME (Tag-Modus) — body.light Quick-Invert v1 — CSS variable overrides ───────────────────────────────────────── */ body.light { --bg: #eaeaf0; --bg2: #d8d8e2; --card: #ffffff; --card2: #f5f5fa; --border: rgba(0,0,0,0.08); --text: #4a4a5e; --white: #1a1a28; --muted: #6a6a82; --accent: #2868c8; --accent-dim: rgba(40,104,200,0.08); --accent-glow: rgba(40,104,200,0.15); background: var(--bg); color: var(--text); } body.light::after { display: none; } body.light::before { mix-blend-mode: multiply; opacity: 0.025; } /* Override hardcoded dark backgrounds on common containers */ body.light .q-card, body.light .pf, body.light .lg-card, body.light .st-card, body.light .m-card { background: linear-gradient(165deg, #ffffff, #f5f5fa) !important; border-color: rgba(0,0,0,0.08) !important; } body.light .fp-page { color: var(--text); } body.light #ph-nav { background: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(0,0,0,0.08); } body.light #ph-nav .nav-logo span { color: #1a1a28; } body.light #ph-nav .nav-links a { color: #4a4a5e; } body.light #ph-nav .nav-user { color: #1a1a28; } body.light .ph-footer { background: rgba(255,255,255,0.6); color: #6a6a82; } body.light input[type=text], body.light textarea, body.light .st-field input, body.light .st-field textarea { background: #fff !important; color: #1a1a28 !important; border-color: rgba(0,0,0,0.12) !important; } body.light .nav-beta { background: rgba(255,160,0,0.12); color: #c87800; border-color: rgba(255,160,0,0.4); }