/* ========================================================= BNKZ – Design-Tokens Die Seite ist nur dunkel. Einen hellen Modus gibt es bewusst nicht: ein Werkzeugkasten, der immer gleich aussieht, ist einer weniger, bei dem man etwas einstellen muss. Akzent-Alternativen über . ========================================================= */ :root { /* Schriften – nur Systemschriften */ --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", sans-serif; /* Schriftgrößen (mobil → desktop) */ --fs-display: clamp(2.25rem, 1.2rem + 4.5vw, 4.25rem); /* 36 → 68 */ --fs-h1: clamp(1.875rem, 1.4rem + 2vw, 2.875rem); /* 30 → 46 */ --fs-h2: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem); /* 26 → 40 */ --fs-h3: 1.125rem; /* 18 (Kachel desktop 22) */ --fs-lead: 1.0625rem;/* 17 (desktop 19) */ --fs-body: 1rem; /* 16 */ --fs-small: .875rem; /* 14 */ --fs-label: .75rem; /* 12, Mono, Versalien, +8 % Laufweite */ /* Abstände – 4er-Raster */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; /* Radien */ --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-pill: 999px; /* Layout */ --page-max: 1200px; /* Startseite */ --tool-max: 880px; /* Werkzeug-Seiten */ --gutter: 20px; /* desktop: 40px, siehe Media Query */ --touch: 44px; /* Bewegung */ --t-fast: 150ms; /* Farben – Dunkel (Standard) */ color-scheme: dark; --bg: #0B0C0B; --surface: #141614; --surface-2: #1C1F1C; --line: #292D29; --line-strong: #636A63; --text: #EDEFE9; --muted: #A3A99F; --danger: #FF7B6F; --danger-bg: #2A1412; /* Signalfarbe: Lime */ --acc: #C6FF3D; --acc-hover: #D8FF7A; --acc-ink: #C6FF3D; /* Akzent als Text/Rahmen/Fokus */ --acc-soft: rgba(198,255,61,0.12); --on-acc: #0B0C0B; /* Text auf --acc */ --btn-p-border: transparent; } @media (min-width: 900px) { :root { --gutter: 40px; } } /* ---------- Alternative Signalfarbe: cyan ---------- */ :root[data-accent="cyan"] { --acc: #3DE3F0; --acc-hover: #7EEEF6; --acc-ink: #3DE3F0; --acc-soft: rgba(61,227,240,0.12); } /* ---------- Alternative Signalfarbe: amber ---------- */ :root[data-accent="amber"] { --acc: #FFB53D; --acc-hover: #FFCB78; --acc-ink: #FFB53D; --acc-soft: rgba(255,181,61,0.12); } /* ---------- Alternative Signalfarbe: pink ---------- */ :root[data-accent="pink"] { --acc: #FF74B6; --acc-hover: #FF9DCB; --acc-ink: #FF74B6; --acc-soft: rgba(255,116,182,0.12); }