/* * Erscheinungsbild für alseda Stable. * * Zwei Paletten über [data-theme] am -Element: hell ist der Standard, * dunkel für die Bildschirmarbeit am Abend. Grundfarbe ist das Firmenblau * (Pantone 281, #012C70); im dunklen Layout tritt eine aufgehellte Fassung an * seine Stelle, weil das satte Blau auf schwarzem Grund zu wenig Kontrast hat. */ :root, :root[data-theme="light"] { --brand:#012C70; /* Pantone 281 — Hausfarbe */ --brand-dark:#001B48; --brand-soft:#E8EEF7; --bg:#F4F6FA; --panel:#FFFFFF; --card:#FFFFFF; --line:#D8DFEA; --line-soft:#EBEFF6; --txt:#16202F; --mut:#5D6B80; --acc:#012C70; --acc-txt:#FFFFFF; /* Schrift auf Akzentflächen */ --ok:#0F7B4F; --ok-bg:#E3F5EC; --warn:#8A5B00; --warn-bg:#FBF0DA; --err:#B3261E; --err-bg:#FBE6E5; --shadow:0 1px 2px rgba(16,32,64,.06), 0 4px 14px rgba(16,32,64,.05); --logo-filter:none; } :root[data-theme="dark"] { --brand:#4A90E2; --brand-dark:#012C70; --brand-soft:#16233C; --bg:#0B1220; --panel:#0F172A; --card:#16213A; --line:#2A3A55; --line-soft:#22304A; --txt:#E4EAF3; --mut:#93A2B8; --acc:#4A90E2; --acc-txt:#04182F; --ok:#34D399; --ok-bg:#0B3D2B; --warn:#FBBF24; --warn-bg:#3D3010; --err:#F87171; --err-bg:#41201F; --shadow:none; /* Das blaue "a" auf dunklem Grund in Weiß umschlagen. */ --logo-filter:brightness(0) invert(1); } * { box-sizing:border-box; } body { margin:0; font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--txt); } img.brandmark { filter:var(--logo-filter); } label { display:block; font-size:12px; color:var(--mut); margin:10px 0 4px; font-weight:500; } input, select, textarea { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:9px 11px; font:inherit; } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); } input:disabled, select:disabled { background:var(--line-soft); color:var(--mut); } input[type=checkbox] { width:auto; } button { background:var(--acc); color:var(--acc-txt); border:0; border-radius:8px; padding:10px 18px; font-weight:600; cursor:pointer; font-size:14px; margin-top:14px; } button:hover { filter:brightness(1.08); } button.ghost { background:transparent; color:var(--acc); border:1px solid var(--acc); } button.danger { background:transparent; color:var(--err); border:1px solid var(--err); } button.small { padding:5px 11px; font-size:12px; margin:0; } button:disabled { opacity:.4; cursor:not-allowed; } .hint { font-size:12px; color:var(--mut); } .msg { margin-top:12px; font-size:13px; padding:10px 12px; border-radius:8px; background:var(--brand-soft); color:var(--txt); } .msg.err { background:var(--err-bg); color:var(--err); } .msg.ok { background:var(--ok-bg); color:var(--ok); } .msg.warn{ background:var(--warn-bg);color:var(--warn); } .chip { padding:2px 10px; border-radius:99px; font-size:11px; font-weight:600; white-space:nowrap; } .chip-ok { background:var(--ok-bg); color:var(--ok); } .chip-warn { background:var(--warn-bg); color:var(--warn); } .chip-err { background:var(--err-bg); color:var(--err); } .chip-mut { background:var(--brand-soft); color:var(--txt); } table.grid-table, table.ledger { width:100%; border-collapse:collapse; font-size:13px; } table.grid-table th, table.grid-table td, table.ledger th, table.ledger td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line-soft); } table.grid-table th, table.ledger th { color:var(--mut); font-weight:600; font-size:12px; } table.grid-table td.r, table.grid-table th.r, table.ledger td.r, table.ledger th.r { text-align:right; font-variant-numeric:tabular-nums; }