/* ══════════════════════════════════════════════════════════════════════ BIKEAXO — Zentrale Design-Tokens + Basis-Komponenten (Dark + Light) Dark ist Standard. Umschalter setzt . ══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"]{ --bg:#0c0e12; --bg-2:#0f1218; --surface:#161a21; --surface-2:#1e232c; --surface-hover:#232a35; --text:#e8ebf0; --text-muted:#9aa3b2; --text-dim:#6c7a89; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --accent:#00E5FF; --accent-ink:#053241; --accent-text:#00E5FF; --accent-soft:rgba(0,229,255,.14); --accent-line:rgba(0,229,255,.42); --btn-1:#00E5FF; --btn-2:#00E5FF; --btn-ink:#053241; --danger:#ff6b6b; --glow-1:rgba(0,229,255,.10); --glow-2:rgba(0,229,255,.07); --shadow:0 18px 60px rgba(0,0,0,.45); --pill-bg:rgba(8,12,18,.86); --pill-line:rgba(255,255,255,.10); --pill-link:rgba(255,255,255,.48); --pill-link-hover:#fff; --glass:rgba(255,255,255,.05); --glass-hi:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.10); --card-bg:#161a21; color-scheme:dark; } [data-theme="light"]{ --bg:#f6f7f9; --bg-2:#eef1f5; --surface:#ffffff; --surface-2:#eef1f5; --surface-hover:#e6ebf0; --text:#1a1f27; --text-muted:#5a6472; --text-dim:#8a94a2; --line:rgba(15,25,35,.12); --line-strong:rgba(15,25,35,.22); --accent:#00E5FF; --accent-ink:#053241; --accent-text:#0a9fc4; --accent-soft:rgba(0,229,255,.14); --accent-line:rgba(0,229,255,.42); --btn-1:#00E5FF; --btn-2:#00E5FF; --btn-ink:#053241; --danger:#d92c2c; --glow-1:rgba(0,200,229,.10); --glow-2:rgba(0,150,180,.06); --shadow:0 18px 50px rgba(20,30,45,.12); --pill-bg:rgba(255,255,255,.86); --pill-line:rgba(15,25,35,.10); --pill-link:rgba(20,25,32,.55); --pill-link-hover:#0c0e12; --glass:#ffffff; --glass-hi:#ffffff; --glass-line:rgba(15,25,35,.10); --card-bg:#ffffff; color-scheme:light; } /* Alias-Tokens: alte Referenzen (--ink/--muted) schalten automatisch mit */ :root{ --ink:var(--text); --muted:var(--text-muted); } *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; } body{ background:var(--bg); color:var(--text); transition:background-color .28s ease, color .28s ease; } /* ── Icons (schlichte Line-Icons via ) ── */ .ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em;fill:none; stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .ic-sm{width:1em;height:1em} /* ── Theme-Umschalter (Sonne/Mond im Header) ── */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;flex:0 0 auto;cursor:pointer; background:transparent;border:1px solid var(--pill-line);color:var(--pill-link); transition:color .15s,border-color .15s,background .15s} .theme-toggle:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)} .theme-toggle .ic{width:17px;height:17px} .theme-toggle .ic-sun{display:none} [data-theme="light"] .theme-toggle .ic-sun{display:block} [data-theme="light"] .theme-toggle .ic-moon{display:none} /* ── Basis-Komponenten (token-basiert, für neue/portierte Seiten) ── */ /* Button: flach + eingepresst (rechteckig, abgerundete Kanten, keine Wölbung) */ .btn{display:inline-flex;align-items:center;gap:9px;justify-content:center; color:var(--btn-ink);font-weight:800;border:1px solid rgba(0,0,0,.22);border-radius:12px; padding:14px 26px;font-size:15px;cursor:pointer;text-decoration:none;font-family:inherit; background:linear-gradient(180deg, var(--btn-2) 0%, var(--btn-1) 100%); box-shadow:inset 0 2px 5px rgba(0,0,0,.42), inset 0 -1px 1px rgba(255,255,255,.14); transition:filter .15s, box-shadow .12s} .btn:hover{filter:brightness(1.06);box-shadow:inset 0 2px 5px rgba(0,0,0,.42),inset 0 -1px 1px rgba(255,255,255,.14),0 0 20px 1px rgba(0,229,255,.55),0 0 46px 8px rgba(0,229,255,.28)} .btn:active{box-shadow:inset 0 3px 8px rgba(0,0,0,.52),0 0 18px 1px rgba(0,229,255,.45)} .btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line-strong);box-shadow:none} .btn-ghost:hover{border-color:var(--accent-line);color:var(--accent-text);background:var(--accent-soft);filter:none;box-shadow:0 0 18px 1px rgba(0,229,255,.30),0 0 40px 6px rgba(0,229,255,.14)} .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)} .input,input.tk,textarea.tk,select.tk{ width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:10px; padding:12px 14px;color:var(--text);font-size:15px;font-family:inherit;transition:border-color .15s} .input:focus,input.tk:focus{outline:0;border-color:var(--accent)} a{color:var(--accent-text)} /* ── Theme-abhängiges Logo (dunkel-BG-Logo vs. Farb-Logo für hell) ── */ .bx-logo-light{display:none!important} [data-theme="light"] .bx-logo-dark{display:none!important} [data-theme="light"] .bx-logo-light{display:block!important} /* Schwebender Theme-Umschalter (oben rechts) — global */ .bx-theme-fab{position:fixed;top:18px;right:20px;z-index:502} .bx-theme-fab .theme-toggle{width:38px;height:38px;background:var(--pill-bg); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 4px 18px rgba(0,0,0,.25)} @media(max-width:780px){.bx-theme-fab{top:20px;left:16px;right:auto}}