@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ═══════════════════════════════════════════════════════════════════════ THEME TOKENS ───────────────────────────────────────────────────────────────────── Das Theme wird via [data-theme="light"|"dark"] am -Element gesetzt (von js/theme.js). Bei [data-theme="system"] greift die prefers-color-scheme-Abfrage weiter unten. ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { --bg:#F2F1EE; --surface:#FFFFFF; --surface2:#F7F6F3; --border:#E2E0DB; --border-strong:#C8C5BE; --text:#1C1B18; --text-2:#5A5750; --text-3:#9A9690; --accent:#2563EB; --accent-bg:#EEF3FD; --ok:#16A34A;--ok-bg:#DCFCE7; --warn:#CA8A04;--warn-bg:#FEF9C3; --bad:#DC2626;--bad-bg:#FEE2E2; --radius:8px; --radius-sm:5px; --shadow:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); --shadow-lg:0 4px 16px rgba(0,0,0,.1); --overlay:rgba(0,0,0,.35); --hover-tint:rgba(0,0,0,.03); /* Spezielle Töne die früher hartkodiert waren */ --btn-primary-bg:#1C1B18; --btn-primary-fg:#FFFFFF; --weekend-bg:#F4F3F0; --weekend-head-bg:#ECEAE5; --ziel-warn-bg:#FFF7E6; --ziel-warn-fg:#92580A; --status-offen-border:#fca5a5; --status-inarbeit-border:#fde68a; --status-erledigt-border:#86efac; --chart-text:#1C1B18; --chart-grid:rgba(0,0,0,.08); } :root[data-theme="dark"] { --bg:#13131A; --surface:#1B1B24; --surface2:#22222D; --border:#2E2E3B; --border-strong:#40404F; --text:#EDEDF0; --text-2:#B8B8C4; --text-3:#7E7E8E; --accent:#5B8DF6; --accent-bg:#1E2B4A; --ok:#4ADE80;--ok-bg:#14331D; --warn:#FBBF24;--warn-bg:#3A2D0A; --bad:#F87171;--bad-bg:#3A1414; --shadow:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-lg:0 4px 16px rgba(0,0,0,.45); --overlay:rgba(0,0,0,.6); --hover-tint:rgba(255,255,255,.04); --btn-primary-bg:#EDEDF0; --btn-primary-fg:#13131A; --weekend-bg:#1E1E28; --weekend-head-bg:#24242F; --ziel-warn-bg:#3A2D0A; --ziel-warn-fg:#FBBF24; --status-offen-border:#7F2A2A; --status-inarbeit-border:#7F5A14; --status-erledigt-border:#2A5A3B; --chart-text:#EDEDF0; --chart-grid:rgba(255,255,255,.08); } /* OS-Dark-Mode: nur aktiv wenn data-theme="system" oder gar nicht gesetzt */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg:#13131A; --surface:#1B1B24; --surface2:#22222D; --border:#2E2E3B; --border-strong:#40404F; --text:#EDEDF0; --text-2:#B8B8C4; --text-3:#7E7E8E; --accent:#5B8DF6; --accent-bg:#1E2B4A; --ok:#4ADE80;--ok-bg:#14331D; --warn:#FBBF24;--warn-bg:#3A2D0A; --bad:#F87171;--bad-bg:#3A1414; --shadow:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-lg:0 4px 16px rgba(0,0,0,.45); --overlay:rgba(0,0,0,.6); --hover-tint:rgba(255,255,255,.04); --btn-primary-bg:#EDEDF0; --btn-primary-fg:#13131A; --weekend-bg:#1E1E28; --weekend-head-bg:#24242F; --ziel-warn-bg:#3A2D0A; --ziel-warn-fg:#FBBF24; --status-offen-border:#7F2A2A; --status-inarbeit-border:#7F5A14; --status-erledigt-border:#2A5A3B; --chart-text:#EDEDF0; --chart-grid:rgba(255,255,255,.08); } } /* ═══════════════════════════════════════════════════════════════════════ DENSITY TOKENS (Dichte-Umschalter) ═══════════════════════════════════════════════════════════════════════ */ :root, :root[data-density="comfortable"] { --pad-card:.875rem 1rem; --pad-cell-y:6px; --pad-cell-x:10px; --pad-head-y:7px; --font-body:13px; --font-cell:12px; --font-head:10.5px; --kpi-val:22px; --kpi-pad:12px 14px; --gap-card:.875rem; } :root[data-density="compact"] { --pad-card:.5rem .75rem; --pad-cell-y:3px; --pad-cell-x:7px; --pad-head-y:4px; --font-body:12px; --font-cell:11px; --font-head:10px; --kpi-val:18px; --kpi-pad:7px 10px; --gap-card:.5rem; } /* ═══════════════════════════════════════════════════════════════════════ */ html{color-scheme:light;transition:background .2s ease} :root[data-theme="dark"], :root[data-theme="system"]{color-scheme:dark light} @media (prefers-color-scheme: dark){:root[data-theme="system"]{color-scheme:dark}} *{box-sizing:border-box;margin:0;padding:0} body{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:var(--font-body);color:var(--text);background:var(--bg);padding:1rem;transition:background .2s ease,color .2s ease} .app{padding:.75rem 0;max-width:1440px;margin:0 auto} /* ── TOPBAR ── */ .topbar{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem;flex-wrap:wrap; padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .title{font-size:15px;font-weight:600;letter-spacing:-.01em} .sub{font-size:11px;color:var(--text-3);margin-top:2px} .spacer{flex:1} /* ── TABS ── */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:1.25rem;flex-wrap:wrap;background:transparent} .tab{padding:7px 14px;font-size:12px;font-weight:500;cursor:pointer;border-radius:var(--radius) var(--radius) 0 0; border:1px solid transparent;border-bottom:none;color:var(--text-2);background:transparent;white-space:nowrap;transition:all .15s} .tab:hover{color:var(--text);background:var(--hover-tint)} .tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .tab.active{border-color:var(--border);border-bottom-color:var(--bg);background:var(--bg);color:var(--text);font-weight:600} .pane{display:none}.pane.active{display:block} /* ── CARDS ── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:var(--pad-card);margin-bottom:var(--gap-card);box-shadow:var(--shadow)} .sec{font-size:10.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px} .card-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:8px;gap:8px} .card-header:hover .sec{color:var(--text-2)} .card-header:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .card-header .sec{margin-bottom:0} .card-toggle{font-size:10px;color:var(--text-3);transition:transform .2s;flex-shrink:0;margin-left:4px;display:inline-block} .card-toggle.collapsed{transform:rotate(-90deg)} .card-body{overflow:hidden;transition:max-height .25s ease} .card-body.collapsed{max-height:0!important;overflow:hidden} /* ── KPI ── */ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:var(--gap-card)} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--kpi-pad);box-shadow:var(--shadow)} .kl{font-size:10.5px;font-weight:500;color:var(--text-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em} .kv{font-size:var(--kpi-val);font-weight:600;line-height:1.1;font-family:'IBM Plex Mono',monospace;letter-spacing:-.02em} .kv-unit{font-size:0.55em;font-weight:400;color:var(--text-2);letter-spacing:0} .ks{font-size:10px;color:var(--text-3);margin-top:3px} /* ── TABLES ── */ .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:var(--font-cell);min-width:max-content} thead th{ text-align:left; padding:var(--pad-head-y) var(--pad-cell-x); font-weight:600; font-size:var(--font-head); color:var(--text-2); border-bottom:1px solid var(--border); background:var(--surface2); white-space:nowrap; position:sticky; top:0; z-index:1; } tbody td{ padding:var(--pad-cell-y) var(--pad-cell-x); border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; } tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--surface2)} .tr td{font-weight:600;background:var(--surface2);border-top:1px solid var(--border)} .num{text-align:right;font-variant-numeric:tabular-nums;font-family:'IBM Plex Mono',monospace;font-size:11.5px} thead th.num{text-align:right} /* ── INPUTS ── */ input[type=number]{ width:86px;text-align:right;padding:4px 8px; border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);color:var(--text);font-size:12px; font-family:'IBM Plex Mono',monospace; transition:border-color .15s; } input[type=number]:focus{outline:none;border-color:var(--accent)} select{ padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);color:var(--text);font-size:12px; font-family:'IBM Plex Sans',sans-serif; transition:border-color .15s; } select:focus{outline:none;border-color:var(--accent)} /* ── BUTTONS ── */ .btn{ padding:6px 14px;font-size:12px;font-weight:500; border:1px solid var(--border);border-radius:var(--radius-sm); cursor:pointer;background:var(--surface);color:var(--text); transition:all .15s;font-family:'IBM Plex Sans',sans-serif; } .btn:hover{background:var(--surface2);border-color:var(--border-strong)} .btn-p{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent} .btn-p:hover{opacity:.85;background:var(--btn-primary-bg)} .btn-danger{border-color:var(--status-offen-border);color:var(--bad)}.btn-danger:hover{background:var(--bad-bg)} /* ── BADGES ── */ .badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600} .ok{background:var(--ok-bg);color:var(--ok)} .warn{background:var(--warn-bg);color:var(--warn)} .bad{background:var(--bad-bg);color:var(--bad)} /* ── CHARTS ── */ .chart-wrap{position:relative;height:250px;width:100%} .chart-wrap-tall{position:relative;height:320px;width:100%} /* ── DROP ZONES ── */ .drop-zone{ border:2px dashed var(--border);border-radius:var(--radius); padding:2rem;text-align:center;cursor:pointer;transition:all .15s; background:var(--surface2); } .drop-zone:hover,.drop-zone.drag{background:var(--accent-bg);border-color:var(--accent)} .drop-zone input{display:none} .dz-icon{font-size:28px;margin-bottom:8px} .dz-title{font-weight:600;margin-bottom:4px;font-size:13px} .dz-sub{font-size:11px;color:var(--text-3)} /* ── IMPORT UPLOAD GRID ── */ .import-upload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:4px} .import-upload-card .card-header{cursor:default} .import-upload-card .card-body{padding:10px 14px} .drop-zone-compact{padding:.75rem;border-width:1.5px} .drop-zone-compact .dz-icon{font-size:20px;margin-bottom:4px} .drop-zone-compact .dz-sub{font-size:10px;line-height:1.4} @media(max-width:900px){.import-upload-grid{grid-template-columns:1fr}} /* ── IMPORT LOG ── */ .import-log{font-size:12px;margin-top:1rem;padding:.75rem 1rem;border-radius:var(--radius-sm); background:var(--surface2);border:1px solid var(--border); white-space:pre-line;max-height:160px;overflow-y:auto;font-family:'IBM Plex Mono',monospace} .log-ok{color:var(--ok)}.log-warn{color:var(--warn)}.log-err{color:var(--bad)} .na-cell{color:var(--text-3);text-align:center} /* ── AUFGABEN ── */ .aufg-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px} .aufg-form-full{grid-column:1/-1} .aufg-input{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius-sm); font-size:12px;font-family:'IBM Plex Sans',sans-serif;background:var(--surface);color:var(--text); transition:border-color .15s} .aufg-input:focus{outline:none;border-color:var(--accent)} .aufg-table thead th{background:var(--surface2)} .aufg-table tbody td{vertical-align:top} .aufg-status{padding:3px 8px;border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;background:var(--surface)} .aufg-status.offen{background:var(--bad-bg);color:var(--bad);border-color:var(--status-offen-border)} .aufg-status.inarbeit{background:var(--warn-bg);color:var(--warn);border-color:var(--status-inarbeit-border)} .aufg-status.erledigt{background:var(--ok-bg);color:var(--ok);border-color:var(--status-erledigt-border)} .aufg-badge-day{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;background:var(--accent-bg);color:var(--accent);margin-left:4px;font-weight:500} .aufg-overdue{color:var(--bad);font-weight:600} .aufg-summary{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap} .aufg-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:8px 14px;font-size:11px;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow)} .aufg-stat-num{font-size:18px;font-weight:700;line-height:1;font-family:'IBM Plex Mono',monospace} .aufg-filter-bar{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;align-items:center} .aufg-filter-btn{padding:4px 12px;border:1px solid var(--border);border-radius:20px;font-size:11px;font-weight:500; cursor:pointer;background:var(--surface);color:var(--text-2);transition:all .15s} .aufg-filter-btn:hover{border-color:var(--border-strong);color:var(--text)} .aufg-filter-btn.active{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent} /* ── NOTE BOXES ── */ .note-box{border-top:1px solid var(--border);padding-top:12px;margin-top:4px} .note-label{font-size:10.5px;font-weight:600;color:var(--text-3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em} .note-area{width:100%;min-height:64px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm); font-size:12px;font-family:'IBM Plex Sans',sans-serif;resize:vertical;background:var(--surface2);color:var(--text);line-height:1.55} .note-area:focus{outline:none;border-color:var(--accent)} /* ── PROTOKOLL ── */ .proto-entry{padding:11px 13px;border-radius:var(--radius);background:var(--surface2); border:1px solid var(--border);margin-bottom:8px} .proto-entry:last-child{margin-bottom:0} .proto-meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap} .proto-thema{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--ok-bg);color:var(--ok)} .proto-thema.energy{background:var(--warn-bg);color:var(--warn)} .proto-thema.zeit{background:var(--accent-bg);color:var(--accent)} .proto-thema.massnahme{background:var(--bad-bg);color:var(--bad)} .proto-time{font-size:11px;color:var(--text-3);font-family:'IBM Plex Mono',monospace} .proto-autor{font-size:11px;color:var(--text-2);font-style:italic} .proto-text{font-size:13px;color:var(--text);line-height:1.55} .proto-del{margin-left:auto;font-size:12px;cursor:pointer;color:var(--border-strong);background:none;border:none;padding:2px 4px;border-radius:4px;transition:all .15s} .proto-del:hover{color:var(--bad);background:var(--bad-bg)} /* ── DROPDOWNS ── */ .dd-wrap{position:relative;display:inline-block;min-width:260px} .dd-trigger{display:flex;align-items:center;justify-content:space-between;padding:6px 11px; border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:12px; background:var(--surface);gap:8px;min-width:260px;transition:border-color .15s} .dd-trigger:hover{border-color:var(--border-strong)} .dd-arrow{font-size:10px;color:var(--text-3);transition:transform .15s} .dd-arrow.open{transform:rotate(180deg)} .dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:100;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius);min-width:260px; box-shadow:var(--shadow-lg);display:none} .dd-menu.open{display:block} .dd-header{display:flex;gap:6px;padding:7px 10px;border-bottom:1px solid var(--border)} .dd-header button{font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:transparent;color:var(--text)} .dd-header button:hover{background:var(--surface2)} .dd-item{display:flex;align-items:center;gap:8px;padding:7px 11px;cursor:pointer;font-size:12px} .dd-item:hover{background:var(--surface2)} .dd-item input[type=checkbox]{width:13px;height:13px;cursor:pointer;accent-color:var(--accent)} .dd-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0} .prod-dd-wrap{position:relative;display:inline-block;min-width:260px} .prod-dd-trigger{display:flex;align-items:center;justify-content:space-between;padding:6px 11px; border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:12px; background:var(--surface);gap:8px;min-width:260px;transition:border-color .15s} .prod-dd-trigger:hover{border-color:var(--border-strong)} .prod-dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:100;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius);min-width:260px; box-shadow:var(--shadow-lg);display:none} .prod-dd-menu.open{display:block} /* ── STÖRGRÜNDE ── */ .stoer-filter-bar{display:flex;align-items:center;gap:10px;padding:10px 0 12px;flex-wrap:wrap} .stoer-filter-bar label{font-size:10.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em} .stoer-linie-select{padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:12px;min-width:220px} .stoer-days-select{padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:12px} .stoer-badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:600;background:var(--bad-bg);color:var(--bad)} .stoer-badge.warn{background:var(--warn-bg);color:var(--warn)} .stoer-badge.info{background:var(--accent-bg);color:var(--accent)} .stoer-empty{color:var(--text-3);font-size:12px;padding:20px 8px;text-align:center} /* ── QUICK-AUFGABE MODAL ── */ .qtask-overlay{position:fixed;inset:0;background:var(--overlay);z-index:900;display:flex;align-items:center;justify-content:center;padding:1rem} .qtask-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;max-width:440px;padding:1.25rem 1.25rem 1rem} .qtask-title{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text)} .qtask-input{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-family:'IBM Plex Sans',sans-serif;background:var(--surface);color:var(--text);transition:border-color .15s;box-sizing:border-box} .qtask-input:focus{outline:none;border-color:var(--accent)} .qtask-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .qtask-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px} /* ── NOTE + AUFGABE BUTTON ── */ .note-action-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} /* ── VERLAUF STICKY FIRST COL ── */ .verlauf-table{position:relative} .verlauf-table th:first-child, .verlauf-table td:first-child{ position:sticky;left:0;z-index:2; background:var(--surface2); border-right:1px solid var(--border-strong); white-space:nowrap; } .verlauf-table thead th:first-child{z-index:3;background:var(--surface2);} /* ── WEEKEND COLUMNS ── */ .col-weekend{background:var(--weekend-bg)!important;color:var(--text-2);} thead .col-weekend{background:var(--weekend-head-bg)!important;} /* ── INLINE BEMERKUNG ── */ .schicht-tbl{table-layout:fixed;width:100%;} .schicht-tbl td{white-space:nowrap;font-size:14px;} .inline-note{ font-size:11px;padding:3px 6px;border:1px solid var(--border);border-radius:4px; background:var(--surface);color:var(--text);width:100%;box-sizing:border-box; font-family:'IBM Plex Sans',sans-serif;resize:none;height:28px;overflow:hidden; transition:border-color .15s,height .1s; } .inline-note:focus{outline:none;border-color:var(--accent);height:52px;} /* ── AUFGABEN INLINE TABLE ── */ .aufg-inline-sel{width:100%;padding:3px 5px;border:1px solid var(--border);border-radius:var(--radius-sm); font-size:11px;font-family:'IBM Plex Sans',sans-serif;background:var(--surface);color:var(--text);} .aufg-inline-sel:focus{outline:none;border-color:var(--accent)} .aufg-inline-txt{width:100%;padding:3px 5px;border:1px solid var(--border);border-radius:var(--radius-sm); font-size:11px;font-family:'IBM Plex Sans',sans-serif;background:var(--surface);color:var(--text); resize:vertical;min-height:28px;} .aufg-inline-txt:focus{outline:none;border-color:var(--accent)} .aufg-inline-in{width:100%;padding:3px 5px;border:1px solid var(--border);border-radius:var(--radius-sm); font-size:11px;font-family:'IBM Plex Sans',sans-serif;background:var(--surface);color:var(--text);} .aufg-inline-in:focus{outline:none;border-color:var(--accent)} .ziel-input{width:72px;text-align:right;padding:3px 6px; border:1px solid var(--border);border-radius:4px; background:var(--surface);color:var(--text);font-size:12px; font-family:'IBM Plex Mono',monospace;} .ziel-input:focus{outline:none;border-color:var(--accent)} .ziel-ok{background:var(--ok-bg)!important;color:var(--ok)} .ziel-warn{background:var(--ziel-warn-bg)!important;color:var(--ziel-warn-fg)} .ziel-bad{background:var(--bad-bg)!important;color:var(--bad)} /* ═══════════════════════════════════════════════════════════════════════ STICKY TOPBAR + TABS (v3 — UX-Politur) ═══════════════════════════════════════════════════════════════════════ */ body{padding-top:0} /* Wird durch sticky-Elemente ersetzt */ .app{padding-top:1rem} .topbar{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(6px); } .tabs{ position:sticky; top:56px; /* Höhe der Topbar */ z-index:40; background:var(--bg); padding-top:4px; margin-bottom:1rem; } @media (max-width:640px){ .tabs{top:88px} /* Auf schmalen Bildschirmen umbricht die Topbar */ } /* ═══════════════════════════════════════════════════════════════════════ THEME & DENSITY TOGGLE (in Topbar) ═══════════════════════════════════════════════════════════════════════ */ .seg-toggle{ display:inline-flex; gap:0; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:2px; overflow:hidden; } .seg-toggle button{ appearance:none; -webkit-appearance:none; background:transparent; border:none; padding:4px 10px; font-size:11px; font-family:'IBM Plex Sans',sans-serif; color:var(--text-2); cursor:pointer; border-radius:3px; transition:background .15s,color .15s; display:inline-flex; align-items:center; gap:5px; } .seg-toggle button:hover{color:var(--text);background:var(--hover-tint)} .seg-toggle button[aria-pressed="true"]{ background:var(--btn-primary-bg); color:var(--btn-primary-fg); } .seg-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .seg-icon{font-size:13px;line-height:1} /* ═══════════════════════════════════════════════════════════════════════ LEERZUSTÄNDE (v3 — UX-Politur) ═══════════════════════════════════════════════════════════════════════ */ .empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1rem; color:var(--text-3); } .empty-state-icon{ font-size:36px; margin-bottom:12px; opacity:.6; } .empty-state-title{ font-size:14px; font-weight:600; color:var(--text-2); margin-bottom:6px; } .empty-state-desc{ font-size:12px; max-width:420px; line-height:1.55; margin-bottom:16px; } .empty-state-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } /* ═══════════════════════════════════════════════════════════════════════ FOCUS STATES (Tastatur-Navigation) — global ═══════════════════════════════════════════════════════════════════════ */ .btn:focus-visible, .aufg-filter-btn:focus-visible, .dd-item:focus-visible, .proto-del:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .aufg-inline-txt:focus, .aufg-inline-in:focus, .aufg-inline-sel:focus, .aufg-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* Dark-Mode-spezifische Feinkorrekturen für Chart- und Druckansicht */ :root[data-theme="dark"] .drop-zone{background:var(--surface2)} :root[data-theme="dark"] .drop-zone:hover, :root[data-theme="dark"] .drop-zone.drag{ background:var(--accent-bg); } /* Scrollbars im Dark Mode etwas sichtbarer */ :root[data-theme="dark"] *::-webkit-scrollbar{width:10px;height:10px} :root[data-theme="dark"] *::-webkit-scrollbar-track{background:var(--bg)} :root[data-theme="dark"] *::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px} :root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:var(--border-strong)} /* Print: immer Light Theme */ @media print{ :root[data-theme="dark"]{ --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F7F6F3; --border:#E2E0DB; --text:#1C1B18; --text-2:#5A5750; --text-3:#9A9690; } }