/* ===================================================================== LEADPILOTS — Design-System Clean, neutral, content-first — orientiert am OpenAI-Platform-Dashboard. Hell · viel Weissraum · dezente Linien · schwarze Primaeraktionen · weiche Ecken. Einbinden: Schriften (in ): Montserrat (+ JetBrains Mono nur fuer IDs/Code) ===================================================================== */ :root { /* Surfaces */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f8; /* hover / subtle fill */ --surface-3: #f0f0f1; /* active */ --sidebar: #fbfbfa; --line: #e7e7e8; /* hairline border */ --line-2: #dadade; /* input / stronger border */ /* Text */ --text: #0d0d0d; --text-dim: #5a5a66; /* ~7:1 Kontrast — Meta, Einheiten, Zeitstempel */ --text-faint: #8a8a93; /* nur Platzhalter/disabled/Captions >=14px, NIE Body */ /* Primary action = schwarz (OpenAI-Stil) */ --primary: #0d0d0d; --primary-hover: #2b2b2b; --on-primary: #ffffff; /* Status — sehr sparsam */ --ok: #067647; --ok-bg: #ecfdf3; --ok-line: #abefc6; --danger: #d92d20; --danger-bg: #fef3f2; --danger-line: #fecdca; /* Type */ --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Geometry */ --radius: 8px; --radius-sm: 6px; --bw: 1px; /* Spacing */ --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; /* Elevation — minimal */ --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 4px 14px rgba(16,24,40,.08); /* Type scale — eine Skala, keine Ad-hoc-Groessen */ --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-30:30px; /* Tracking — Display eng, Caps weit, sonst nichts */ --tracking-display: -0.03em; /* >=24px Headlines / KPI-Zahlen */ --tracking-tight: -0.015em; /* 16-20px Headings */ --tracking-caps: 0.06em; /* uppercase Micro-Labels */ /* Line-height */ --lh-body: 1.5; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { color-scheme: light; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: #dfe6ff; color: #0d0d0d; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: #dcdce0; border: 3px solid #fff; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #c4c4cc; } a { color: var(--text); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; border-radius: var(--radius-sm); } /* Section label — ruhige Sans, grau, normale Schreibweise */ .micro { font-size: 12px; font-weight: 600; color: var(--text-dim); } /* Tabellarische Ziffern — fuer jede Datenflaeche, damit Zahlen-Spalten ruhig stehen */ .num, .tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } /* Caps-Micro-Label — eine konsistente Behandlung */ .caps { font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-dim); } /* Panels / cards — weiss, dezente Linie, weiche Ecken, kaum Schatten */ .panel, .card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); } /* ---------- Buttons ---------- */ .btn { font-family: var(--font-sans); font-size: 14px; font-weight: 600; padding: 9px 14px; border: var(--bw) solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); transition: background-color .15s, border-color .15s, box-shadow .15s; white-space: nowrap; } .btn:hover { background: var(--surface-2); } .btn svg { width: 16px; height: 16px; } .btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn.danger { color: var(--danger); border-color: var(--danger-line); background: #fff; } .btn.danger:hover { background: var(--danger-bg); } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------- Form fields ---------- */ .field { margin-bottom: var(--s4); } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .field input, .field select, .input { width: 100%; padding: 9px 12px; background: #fff; border: var(--bw) solid var(--line-2); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .field input::placeholder { color: #a8a8b0; } .field input:focus, .field select:focus, .input:focus { border-color: #0d0d0d; box-shadow: 0 0 0 3px rgba(13,13,13,.07); } .field input[type="color"] { width: 46px; height: 38px; padding: 3px; cursor: pointer; } /* ---------- Toggle / switch (klassische Pille, schwarz wenn an) ---------- */ .switch { position: relative; width: 40px; height: 22px; flex: 0 0 auto; display: inline-block; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; background: #e3e3e6; border-radius: 999px; cursor: pointer; transition: background-color .15s; } .slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .15s; } .switch input:checked + .slider { background: var(--primary); } .switch input:checked + .slider::before { transform: translateX(18px); } /* ---------- Badges (dezente Pille) ---------- */ .badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); } .badge.aktiv { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); } .badge.inaktiv { background: var(--surface-2); color: var(--text-dim); border-color: var(--line); } .badge.shk, .badge.arztpraxis { background: var(--surface-2); color: var(--text-dim); border-color: var(--line); } /* Status dot */ .status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--ok); } .status-dot.off { background: #c4c4cc; }