/* ============================================================================ Badenliefert Admin – zentrales UI-System (admin-ui.css) Phase 1: Design-Tokens, Shell (Sidebar/Topbar/Drawer), PageHeader, Badges, Buttons, DataTable/MobileCards, globale Suche, Command-Palette, Toast. Bootstrap 3 / ACE bleibt; dies liegt darüber. Keine externen Ressourcen. ============================================================================ */ :root{ /* Flächen & Text */ --ab-bg:#f4f6f8; --ab-surface:#ffffff; --ab-surface-2:#f8fafc; --ab-border:#e3e8ee; --ab-border-strong:#cfd8e3; --ab-text:#1a2432; --ab-muted:#647084; --ab-muted-2:#8a94a6; /* Marke / Akzent */ --ab-accent:#0e7c86; --ab-accent-d:#0b636b; --ab-accent-soft:#e5f3f4; /* Sidebar */ --ab-side-bg:#16232e; --ab-side-bg-2:#1d2f3d; --ab-side-text:#c3cedb; --ab-side-muted:#7d8da0; --ab-side-active:#0e7c86; --ab-side-hover:#24384a; /* Statusfarben (§37) */ --ab-ok:#2e9e5b; --ab-ok-bg:#e7f6ed; --ab-warn:#c98a06; --ab-warn-bg:#fbf1d9; --ab-err:#d6453d; --ab-err-bg:#fbe6e5; --ab-info:#2f79c4; --ab-info-bg:#e6effb; --ab-neutral:#647084; --ab-neutral-bg:#eef1f5; /* Maße */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --r-sm:6px; --r:8px; --r-lg:12px; --sh-1:0 1px 2px rgba(16,32,45,.06),0 1px 3px rgba(16,32,45,.05); --sh-2:0 4px 12px rgba(16,32,45,.10); --sh-3:0 12px 32px rgba(16,32,45,.16); --topbar-h:56px; --side-w:236px; --ab-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ---- Grundlayout / Shell ------------------------------------------------- */ body.ab-body{background:var(--ab-bg);color:var(--ab-text);font-family:var(--ab-font); margin:0;-webkit-font-smoothing:antialiased;} .ab-shell{min-height:100vh;} /* Topbar */ .ab-topbar{position:fixed;top:0;left:var(--side-w);right:0;height:var(--topbar-h);z-index:1030; display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4); background:var(--ab-surface);border-bottom:1px solid var(--ab-border);box-shadow:var(--sh-1);} .ab-burger{display:none;background:none;border:0;font-size:22px;line-height:1;color:var(--ab-text); padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;} .ab-burger:hover{background:var(--ab-surface-2);} .ab-topbar-brand{display:none;font-weight:700;color:var(--ab-text);} .ab-search{position:relative;flex:1;max-width:520px;} .ab-search input{width:100%;height:38px;border:1px solid var(--ab-border-strong);border-radius:var(--r); padding:0 12px 0 36px;font-size:14px;background:var(--ab-surface-2);color:var(--ab-text);} .ab-search input:focus{outline:none;border-color:var(--ab-accent);background:#fff; box-shadow:0 0 0 3px var(--ab-accent-soft);} .ab-search .ab-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ab-muted-2);} .ab-search .ab-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%); font-size:11px;color:var(--ab-muted-2);border:1px solid var(--ab-border-strong); border-radius:4px;padding:1px 6px;background:#fff;} .ab-topbar-spacer{flex:1;} .ab-user{display:flex;align-items:center;gap:8px;color:var(--ab-muted);font-size:14px;white-space:nowrap;} .ab-user a{color:var(--ab-muted);} /* Suchergebnis-Dropdown */ .ab-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff; border:1px solid var(--ab-border);border-radius:var(--r);box-shadow:var(--sh-3); max-height:70vh;overflow:auto;display:none;z-index:1050;} .ab-search-results.open{display:block;} .ab-sr-group{padding:6px 0;border-top:1px solid var(--ab-border);} .ab-sr-group:first-child{border-top:0;} .ab-sr-group h6{margin:0;padding:6px 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ab-muted-2);} .ab-sr-item{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--ab-text);text-decoration:none;cursor:pointer;} .ab-sr-item:hover,.ab-sr-item.active{background:var(--ab-accent-soft);color:var(--ab-accent-d);} .ab-sr-item small{color:var(--ab-muted);margin-left:auto;} .ab-sr-empty{padding:16px 14px;color:var(--ab-muted);font-size:14px;} /* Sidebar */ .ab-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:1040; background:var(--ab-side-bg);color:var(--ab-side-text);display:flex;flex-direction:column; overflow-y:auto;transition:transform .22s ease;} .ab-sidebar-head{display:flex;align-items:center;gap:10px;height:var(--topbar-h);flex:0 0 var(--topbar-h); padding:0 var(--sp-4);border-bottom:1px solid rgba(255,255,255,.08);font-weight:700;color:#fff;} .ab-sidebar-head .ab-logo{width:26px;height:26px;border-radius:6px;background:var(--ab-accent); display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;} .ab-nav{padding:var(--sp-3) var(--sp-2) var(--sp-6);} .ab-nav-group{margin-bottom:var(--sp-3);} /* Hauptkategorie: aufklappbar als
/. Der Pfeil dreht sich mit, der eigene Marker des Browsers ist weg - er sieht in jedem Browser anders aus und passt nirgends. */ .ab-nav-group > .ab-nav-label{display:flex;align-items:center;gap:7px;cursor:pointer; padding:9px 12px 6px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ab-side-muted);list-style:none;user-select:none;border-radius:var(--r-sm);} .ab-nav-group > .ab-nav-label::-webkit-details-marker{display:none;} .ab-nav-group > .ab-nav-label::marker{content:"";} .ab-nav-group > .ab-nav-label:hover{color:#fff;background:var(--ab-side-hover);} .ab-nav-group > .ab-nav-label::after{content:"";margin-left:auto; width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.6;transition:transform .15s;} .ab-nav-group[open] > .ab-nav-label::after{transform:rotate(180deg);} .ab-nav-group > .ab-nav-label:focus-visible{outline:2px solid var(--ab-accent);outline-offset:-2px;} /* Eine zugeklappte Gruppe, in der der aktive Punkt steckt, bekommt einen Punkt - sonst verliert man beim Zuklappen die Orientierung. */ .ab-nav-group.ab-hat-aktiv:not([open]) > .ab-nav-label{color:#fff;} .ab-nav-group.ab-hat-aktiv:not([open]) > .ab-nav-label::before{content:""; width:6px;height:6px;border-radius:50%;background:var(--ab-side-active);flex:none;} .ab-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 0;border-radius:var(--r-sm); color:var(--ab-side-text);text-decoration:none;font-size:14px;line-height:1.2;} .ab-nav a .ab-ic{width:18px;text-align:center;opacity:.85;flex:0 0 18px;} .ab-nav a:hover{background:var(--ab-side-hover);color:#fff;} .ab-nav a.active{background:var(--ab-side-active);color:#fff;font-weight:600;} .ab-nav a .ab-pill{margin-left:auto;font-size:11px;background:rgba(255,255,255,.14);color:#fff; border-radius:20px;padding:1px 7px;} .ab-nav a.active .ab-pill{background:rgba(255,255,255,.24);} /* Content */ .ab-main{margin-left:var(--side-w);padding-top:var(--topbar-h);min-height:100vh;} .ab-page{padding:var(--sp-5);max-width:100%;} .ab-page.ab-narrow{max-width:1180px;} /* Drawer-Overlay (Mobile) */ .ab-overlay{position:fixed;inset:0;background:rgba(10,18,26,.5);z-index:1035;opacity:0; visibility:hidden;transition:opacity .2s ease;} .ab-overlay.open{opacity:1;visibility:visible;} /* ---- PageHeader ---------------------------------------------------------- */ /* Die Knöpfe stehen neben Pfad und Überschrift, die Einleitung darunter über die volle Breite und höchstens zwei Zeilen. Vorher standen die Knöpfe neben der Einleitung und drückten sie auf drei bis vier Zeilen zusammen (Auftragsbuch 249, 11.10.2026). `display:contents` macht Pfad, Überschrift und Einleitung zu Zellen des Rasters, ohne die rund 40 Ansichten anzufassen. */ .ab-ph{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);align-items:end;margin-bottom:var(--sp-5);} .ab-ph-main{display:contents;} .ab-ph > *, .ab-ph-main > *{grid-column:1 / -1;min-width:0;} .ab-ph-main > .ab-crumb, .ab-ph-main > h1{grid-column:1;} .ab-ph .ab-crumb{font-size:14px;color:var(--ab-muted);margin-bottom:4px;} .ab-ph .ab-crumb a{color:var(--ab-muted);text-decoration:none;} .ab-ph .ab-crumb a:hover{color:var(--ab-accent);text-decoration:underline;} /* "Admin" in der Datumszeile statt als eigene Zeile darueber (12.10.2026). Erbt Farbe und Groesse von .ab-crumb, legt nur den Abstand ab, der in einer Textzeile stoert. Die bestehende Regel bleibt unangetastet - sie gilt weiter fuer alle anderen Seiten mit Brotkrume. */ .ab-ph .ab-crumb--inline{display:inline;margin:0;font-size:inherit;} .ab-ph h1{margin:0;font-size:28px;font-weight:700;line-height:1.15;color:var(--ab-text);} .ab-ph .ab-ph-sub{margin:5px 0 0;color:var(--ab-muted);font-size:16px;line-height:1.5; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;} .ab-ph > .ab-ph-actions{grid-column:2;grid-row:1 / span 2;display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end;} /* KPI-Cards */ .ab-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:var(--sp-3);margin-bottom:var(--sp-5);} .ab-kpi{background:var(--ab-surface);border:1px solid var(--ab-border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-1);} .ab-kpi .n{font-size:36px;letter-spacing:-1px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;} .ab-kpi .l{margin-top:8px;font-size:15px;color:var(--ab-muted);} .ab-kpi.ab-kpi--link{cursor:pointer;text-decoration:none;color:inherit;display:block;transition:border-color .15s,box-shadow .15s;} .ab-kpi.ab-kpi--link:hover{border-color:var(--ab-accent);box-shadow:var(--sh-2);} /* ---- Buttons ------------------------------------------------------------- */ .ab-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--r-sm); border:1px solid transparent;font-size:15px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none; white-space:nowrap;transition:background .15s,border-color .15s,color .15s;} .ab-btn:focus-visible{outline:2px solid var(--ab-accent);outline-offset:2px;} .ab-btn--primary{background:var(--ab-accent);color:#fff;} .ab-btn--primary:hover{background:var(--ab-accent-d);color:#fff;} .ab-btn--secondary{background:#fff;color:var(--ab-text);border-color:var(--ab-border-strong);} .ab-btn--secondary:hover{background:var(--ab-surface-2);border-color:var(--ab-muted-2);color:var(--ab-text);} .ab-btn--danger{background:#fff;color:var(--ab-err);border-color:#eab8b5;} .ab-btn--danger:hover{background:var(--ab-err);color:#fff;border-color:var(--ab-err);} /* --- Meldungen (Flash) ------------------------------------------------- * Was der Admin gerade getan hat, steht oben auf der Seite. Vier Arten, dieselbe Form; die Farbe traegt keine Bedeutung allein, der Text sagt es. */ .ab-alert{margin:0 0 18px;padding:13px 16px;border:1px solid var(--ab-border); border-left-width:4px;border-radius:var(--r);background:var(--ab-surface); font-size:15px;line-height:1.5;box-shadow:var(--sh-1);} .ab-alert--ok{border-left-color:var(--ab-ok);background:var(--ab-ok-bg);} .ab-alert--err{border-left-color:var(--ab-err);background:var(--ab-err-bg);} .ab-alert--warn{border-left-color:var(--ab-warn);background:var(--ab-warn-bg);} .ab-alert--info{border-left-color:var(--ab-info);background:var(--ab-info-bg);} .ab-btn--sm{height:30px;padding:0 10px;font-size:13px;} .ab-btn--ghost{background:transparent;color:var(--ab-muted);border-color:transparent;} .ab-btn--ghost:hover{background:var(--ab-surface-2);color:var(--ab-text);} /* ---- Badges -------------------------------------------------------------- */ .ab-badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;line-height:1; padding:4px 9px;border-radius:20px;background:var(--ab-neutral-bg);color:var(--ab-neutral);white-space:nowrap;} .ab-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;} .ab-badge--ok{background:var(--ab-ok-bg);color:var(--ab-ok);} .ab-badge--warn{background:var(--ab-warn-bg);color:var(--ab-warn);} .ab-badge--err{background:var(--ab-err-bg);color:var(--ab-err);} .ab-badge--info{background:var(--ab-info-bg);color:var(--ab-info);} .ab-badge--muted{background:var(--ab-neutral-bg);color:var(--ab-neutral);} .ab-badge--plain::before{display:none;} /* ---- Toolbar über Listen (Suche + Filter-Chips) -------------------------- */ .ab-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);} .ab-listsearch{position:relative;flex:1;min-width:220px;max-width:420px;} .ab-listsearch input{width:100%;height:38px;border:1px solid var(--ab-border-strong);border-radius:var(--r); padding:0 34px 0 34px;font-size:15px;background:#fff;} .ab-listsearch input:focus{outline:none;border-color:var(--ab-accent);box-shadow:0 0 0 3px var(--ab-accent-soft);} .ab-listsearch .ab-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ab-muted-2);} .ab-listsearch .ab-ls-spin{position:absolute;right:11px;top:50%;transform:translateY(-50%);display:none;} .ab-listsearch.loading .ab-ls-spin{display:block;} .ab-tabs{display:flex;gap:4px;flex-wrap:wrap;} .ab-tabs a{padding:8px 15px;border-radius:20px;font-size:15px;color:var(--ab-muted);text-decoration:none;border:1px solid transparent;} .ab-tabs a:hover{background:var(--ab-surface-2);color:var(--ab-text);} .ab-tabs a.active{background:var(--ab-accent-soft);color:var(--ab-accent-d);font-weight:600;} .ab-chips{display:flex;gap:6px;flex-wrap:wrap;} .ab-chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;background:var(--ab-neutral-bg); color:var(--ab-text);border-radius:20px;padding:4px 8px 4px 10px;} .ab-chip a{color:var(--ab-muted);text-decoration:none;font-weight:700;} /* ---- Karten / Tabellen --------------------------------------------------- */ .ab-card{background:var(--ab-surface);border:1px solid var(--ab-border);border-radius:var(--r);box-shadow:var(--sh-1);} .ab-card--pad{padding:var(--sp-5);} .ab-tablewrap{background:var(--ab-surface);border:1px solid var(--ab-border);border-radius:var(--r); box-shadow:var(--sh-1);overflow-x:auto;} /* Jede Tabelle im Admin hat dieselbe Schrift und Größe (Leo 17.10.2026: „alle Tabellen gleiche Schriftart und Größe"). Zellen 16 px in der Systemschrift, Kopfzeilen der Listen 13 px Versalien wie bei .ab-table. Eine View setzt KEINE eigene font-size auf table/td/th – auch kein .93rem („Versorgung nach Ort" war dadurch wieder kleiner). */ .ab-main table{font-family:var(--ab-font);font-size:16px;} .ab-table{width:100%;border-collapse:collapse;font-size:16px;} .ab-table th,.ab-table td{padding:13px 15px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--ab-border);} .ab-table thead th{position:sticky;top:0;z-index:2;background:var(--ab-surface-2); font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--ab-muted);font-weight:700;} /* top:0, nicht top:var(--topbar-h). Sobald eine Tabelle in .ab-tablewrap mit overflow-x:auto steht, rechnet sticky gegen diesen Rahmen und nicht gegen das Fenster - mit einem Abstand von oben hing der Kopf dann über der ersten Datenzeile und schnitt sie ab, schon ohne jedes Scrollen. */ .ab-table tbody tr:hover{background:var(--ab-accent-soft);} .ab-table tbody tr:last-child td{border-bottom:0;} .ab-table .ab-subline{display:block;color:var(--ab-muted);font-size:14px;margin-top:2px;} .ab-table .ab-rowactions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap;} .ab-num{font-variant-numeric:tabular-nums;} /* Empty State */ .ab-empty{text-align:center;padding:var(--sp-7) var(--sp-5);color:var(--ab-muted);} .ab-empty h3{margin:0 0 6px;color:var(--ab-text);font-size:19px;} .ab-empty .ab-empty-actions{margin-top:var(--sp-4);display:flex;gap:8px;justify-content:center;flex-wrap:wrap;} /* ---- Command-Palette / Modal -------------------------------------------- */ .ab-modal{position:fixed;inset:0;z-index:1080;display:none;} .ab-modal.open{display:block;} .ab-modal-bd{position:absolute;inset:0;background:rgba(10,18,26,.45);} .ab-palette{position:relative;max-width:560px;margin:10vh auto 0;background:#fff;border-radius:var(--r-lg); box-shadow:var(--sh-3);overflow:hidden;} .ab-palette-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ab-border);} .ab-palette-in input{flex:1;border:0;font-size:16px;outline:none;color:var(--ab-text);} .ab-palette-list{max-height:52vh;overflow:auto;padding:6px 0;} /* ---- Toast --------------------------------------------------------------- */ .ab-toasts{position:fixed;right:18px;bottom:18px;z-index:1090;display:flex;flex-direction:column;gap:8px;} .ab-toast{background:#16232e;color:#fff;padding:11px 15px;border-radius:var(--r);box-shadow:var(--sh-3); font-size:14px;max-width:340px;display:flex;gap:9px;align-items:center;animation:ab-toast-in .18s ease;} .ab-toast--ok{background:#1f7a48;} .ab-toast--err{background:#b23b34;} @keyframes ab-toast-in{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}} /* ---- Alt-Bootstrap im Content zähmen ------------------------------------ */ .ab-main .container,.ab-main .container-fluid{width:auto;max-width:none;margin:0;padding:0;} .ab-main .wrap{padding:0;} .ab-main h1{font-size:28px;} /* Legacy GridView weicher & scrollbar machen, bis Modul umgestellt ist */ .ab-main .grid-view{overflow-x:auto;background:var(--ab-surface);border:1px solid var(--ab-border); border-radius:var(--r);box-shadow:var(--sh-1);} .ab-main .grid-view > table.table{margin:0;font-size:16px;} .ab-main .grid-view .table > thead > tr > th{background:var(--ab-surface-2);border-bottom:1px solid var(--ab-border); text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--ab-muted);} .ab-main .grid-view .table > tbody > tr:hover{background:var(--ab-accent-soft);} .ab-main .grid-view .summary{color:var(--ab-muted);font-size:12.5px;padding:8px 12px;} .ab-main .pagination{margin:12px;} .ab-main .btn-success{background:var(--ab-accent);border-color:var(--ab-accent);} .ab-main .btn-success:hover{background:var(--ab-accent-d);border-color:var(--ab-accent-d);} /* ---- Responsiv ----------------------------------------------------------- */ @media (max-width:991px){ .ab-sidebar{transform:translateX(-100%);box-shadow:var(--sh-3);} .ab-sidebar.open{transform:none;} .ab-topbar{left:0;} .ab-main{margin-left:0;} .ab-burger{display:inline-flex;} .ab-topbar-brand{display:block;} .ab-search{max-width:none;} /* top:0 gilt schon überall - siehe Kommentar bei .ab-table thead th */ } @media (max-width:600px){ .ab-page{padding:var(--sp-4) var(--sp-3);} .ab-ph h1{font-size:23px;} /* Am Telefon ist neben der Überschrift kein Platz: Knöpfe ans Ende des Kopfs. */ .ab-ph{grid-template-columns:minmax(0,1fr);} .ab-ph > .ab-ph-actions{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:var(--sp-3);} /* Kennzahlen untereinander. `minmax(min(100%,180px),1fr)` setzt bei 390 px noch zwei Karten nebeneinander: 2x180 plus Abstand plus Seitenrand ist breiter als das Telefon, und die Seite scrollte seitlich. Gemessen am 11.10.2026 mit 390 px Fensterbreite. */ .ab-kpis{grid-template-columns:1fr;} .ab-kpi .n{font-size:30px;} .ab-user span.ab-user-name{display:none;} /* Tabellen → Cards */ .ab-table.ab-cards, .ab-table.ab-cards thead{display:block;} .ab-table.ab-cards thead{position:absolute;left:-9999px;} .ab-table.ab-cards tbody{display:block;} .ab-table.ab-cards tr{display:block;border:1px solid var(--ab-border);border-radius:var(--r); margin-bottom:10px;padding:6px 4px;background:#fff;} .ab-table.ab-cards td{display:flex;justify-content:space-between;gap:12px;border:0;padding:7px 12px;text-align:right;} .ab-table.ab-cards td::before{content:attr(data-label);color:var(--ab-muted);font-size:13.5px; font-weight:700;text-align:left;text-transform:uppercase;letter-spacing:.02em;} .ab-table.ab-cards td.ab-cell-actions{justify-content:flex-start;} .ab-table.ab-cards td.ab-cell-actions::before{display:none;} .ab-table.ab-cards .ab-rowactions{justify-content:flex-start;flex-wrap:wrap;} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* ---- Sortierbare Spalten (admin-ui.js) ---------------------------------- */ /* Jede .ab-table wird clientseitig sortierbar. GridView-Tabellen bleiben unberührt - die sortieren serverseitig über ihre eigenen Kopflinks. */ .ab-table th.ab-sort{cursor:pointer;user-select:none;position:relative;padding-right:26px; transition:color .12s,background .12s;} .ab-table th.ab-sort:hover{color:var(--ab-text);background:var(--ab-accent-soft);} .ab-table th.ab-sort::after{content:"";position:absolute;right:9px;top:50%; width:0;height:0;margin-top:-1px; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid currentColor;opacity:.3;} .ab-table th.ab-sort-auf::after{border-top:0;border-bottom:5px solid var(--ab-accent); margin-top:-3px;opacity:1;} .ab-table th.ab-sort-ab::after{border-top:5px solid var(--ab-accent);opacity:1;} .ab-table th.ab-sort-auf,.ab-table th.ab-sort-ab{color:var(--ab-accent-d);} .ab-table th.ab-sort:focus-visible{outline:2px solid var(--ab-accent);outline-offset:-2px;} /* Spalten, die nicht sortiert werden sollen: */ .ab-table th.ab-nosort{cursor:default;} /* ---- Statistik: eigene Darstellungen ------------------------------------ */ /* Die Statistik zeigt Dinge, die es sonst nirgends gibt - Verlaufsbalken, Ring, gestapelter Anteil. Alles Übrige nimmt sie aus den ab-Bausteinen. */ .ab-kurve{display:flex;align-items:flex-end;gap:3px;height:170px;} .ab-kurve span{flex:1 1 0;background:var(--ab-accent-soft);border-radius:3px 3px 0 0; min-height:4px;position:relative;} .ab-kurve span i{position:absolute;inset:auto 0 0 0;background:var(--ab-accent); border-radius:3px 3px 0 0;} .ab-kfuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; margin:12px 0 0;color:var(--ab-muted);font-size:15px;} .ab-ringreihe{display:flex;gap:26px;align-items:center;flex-wrap:wrap;} .ab-ring{width:180px;height:180px;flex:none;} .ab-ringz{font-size:27px;font-weight:700;fill:var(--ab-text);} .ab-ringt{font-size:11px;fill:var(--ab-muted);letter-spacing:1px;} .ab-legende{flex:1 1 260px;display:flex;flex-direction:column;gap:10px;font-size:16px;} .ab-legende .z{display:flex;align-items:center;gap:11px;} .ab-legende .p{width:13px;height:13px;border-radius:4px;flex:none;} .ab-legende .nm{flex:1;color:var(--ab-text);} .ab-legende .n{font-weight:700;color:var(--ab-text);font-variant-numeric:tabular-nums;} .ab-legende .q{color:var(--ab-muted);font-size:15px;min-width:56px;text-align:right;} .ab-stapel{display:flex;height:46px;border-radius:var(--r);overflow:hidden;margin:4px 0 16px;} .ab-stapel i{display:flex;align-items:center;justify-content:center;color:#fff; font-size:15px;font-weight:700;} .ab-takt{display:flex;align-items:flex-end;gap:4px;height:90px;} .ab-takt span{flex:1 1 0;background:var(--ab-accent);border-radius:3px 3px 0 0; min-height:3px;opacity:.68;} .ab-takt span.top{opacity:1;background:var(--ab-ok);} .ab-tfuss{display:flex;justify-content:space-between;margin:8px 0 0; color:var(--ab-muted);font-size:14px;} /* Zeile mit Balken darunter - für Ranglisten */ .ab-rw{padding:12px 0;border-top:1px solid var(--ab-border);} .ab-rw:first-of-type{border-top:0;padding-top:0;} .ab-rw-o{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:0 0 7px;} .ab-rw-n{font-size:16px;color:var(--ab-text);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;min-width:0;} .ab-rw-z{font-size:17px;font-weight:700;color:var(--ab-text);white-space:nowrap; font-variant-numeric:tabular-nums;} .ab-rw-b{height:6px;background:var(--ab-neutral-bg);border-radius:3px;overflow:hidden;} .ab-rw-b i{display:block;height:100%;background:var(--ab-accent);} .ab-rw-b i.gr{background:var(--ab-ok);} /* Raster für mehrere Karten nebeneinander */ .ab-raster{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-3);} .ab-raster.r2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));} .ab-raster.r3{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));} .ab-breit{grid-column:1/-1;} /* Zwischenüberschrift zwischen Kartengruppen */ .ab-abschnitt{font-size:14px;color:var(--ab-muted);letter-spacing:1.2px; text-transform:uppercase;margin:30px 0 14px;font-weight:700;} /* Erklärkasten */ .ab-tip{background:var(--ab-warn-bg);border-radius:var(--r);padding:15px 18px; font-size:16px;color:#6b531a;line-height:1.6;margin:0 0 18px;} .ab-tip code{background:rgba(0,0,0,.07);padding:2px 6px;border-radius:4px;font-size:15px;} .ab-was{color:var(--ab-muted);font-size:15px;margin:0 0 16px;line-height:1.5;} .ab-karte-h2{font-size:19px;color:var(--ab-text);margin:0 0 3px;font-weight:700;} @media (max-width:760px){ .ab-ring{width:160px;height:160px;margin:0 auto;} } /* Kennzahl mit Vergleich zum Vorzeitraum: Titel, Zahl, Pfeilmarke, Fußnote. Entstanden in der Statistik, steht jedem Bereich zur Verfügung. */ .ab-kpi .t{font-size:15px;color:var(--ab-muted);margin:0 0 8px;} .ab-kpi .d{display:inline-flex;align-items:center;gap:5px;margin:10px 0 0; font-size:14px;font-weight:700;border-radius:20px;padding:4px 11px;} .ab-kpi .d.hoch{background:var(--ab-ok-bg);color:var(--ab-ok);} .ab-kpi .d.runter{background:var(--ab-err-bg);color:var(--ab-err);} .ab-kpi .d.gleich{background:var(--ab-neutral-bg);color:var(--ab-muted);} .ab-kpi .f{margin:10px 0 0;color:var(--ab-muted);font-size:15px;} /* Überschrift und Erklärsatz in einer Karte */ .ab-card h2{font-size:19px;font-weight:700;color:var(--ab-text);margin:0 0 3px;} .ab-leise{color:var(--ab-muted);font-weight:400;} .ab-leer{color:var(--ab-muted);font-size:15px;margin:8px 0 0;} /* Legende neben Ring oder gestapeltem Balken - Farbfeld, Name, Zahl */ .ab-legende b,.ab-legende .p{width:13px;height:13px;border-radius:4px;flex:none;display:block;} .ab-legende div{display:flex;align-items:center;gap:11px;} /* Tabelle in einer Karte: die Karte bringt den Rahmen schon mit */ .ab-card > .ab-table{margin:0;} .ab-card > .ab-table thead th{position:static;background:transparent;border-bottom:2px solid var(--ab-border);} .ab-table td.n,.ab-table th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;} .ab-table td.n{font-weight:700;color:var(--ab-text);} /* Merksatz: eine Zahl, die man sich mitnehmen soll */ .ab-merk{background:var(--ab-ok-bg);color:#145c36;border-radius:var(--r);padding:12px 15px; font-size:16px;font-weight:700;margin:16px 0 0;} /* Eine Zahlentabelle in einer Karte darf auf schmalem Schirm seitlich scrollen. Umbrechen würde die Spalten unlesbar machen. */ @media (max-width:760px){ .ab-card--pad{overflow-x:auto;} } /* =================================================================== REDAKTIONSLISTE (/redaktion/index) ergänzt am 13.10.2026 ------------------------------------------------------------------- Nur neue Klassen `ab-red-*`. Oben wird nichts überschrieben: Karten, Knöpfe, Abzeichen und Chips kommen unverändert aus dem Designsystem, hier steht ausschließlich, was dieser Liste eigen ist. Der Auftrag war „schnell bearbeiten ohne die Seite zu verlassen" - also zählt, wie viele Kandidaten ohne Scrollen zu sehen sind und wie deutlich der aktive erkennbar ist, wenn man mit j/k durchgeht. =================================================================== */ .ab-red-filter{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end; margin:var(--sp-3) 0;} .ab-red-filter label{display:flex;flex-direction:column;gap:var(--sp-1); font-size:12px;color:var(--ab-muted);min-width:0;} .ab-red-filter select,.ab-red-filter input[type=search]{ font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--ab-border-strong); border-radius:var(--r-sm);background:var(--ab-surface);color:var(--ab-text);max-width:100%;} .ab-red-filter .ab-red-sel{max-width:min(340px,100%);} .ab-red-check{flex-direction:row!important;align-items:center;gap:var(--sp-2)!important; font-size:13px;color:var(--ab-text);} .ab-red-tasten{flex:1 1 220px;text-align:right;font-size:12px;line-height:1.7;} .ab-red-tasten strong{display:inline-block;min-width:17px;text-align:center; padding:1px 4px;border:1px solid var(--ab-border-strong);border-radius:4px; background:var(--ab-surface-2);font-weight:600;font-size:11px;} .ab-red-liste{display:flex;flex-direction:column;gap:var(--sp-2);} /* Eine Karte je Kandidat. Der aktive bekommt einen farbigen Balken links - beim Durchgehen mit der Tastatur muss ohne Hinsehen klar sein, wo man steht, und ein Rahmen allein ist dafür zu leise. */ .ab-red-item{background:var(--ab-surface);border:1px solid var(--ab-border); border-left:3px solid transparent;border-radius:var(--r); padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-1);outline:none; transition:border-color .12s,box-shadow .12s,opacity .18s;} .ab-red-item.is-aktiv{border-left-color:var(--ab-accent); box-shadow:var(--sh-2);background:linear-gradient(90deg,var(--ab-accent-soft) 0,var(--ab-surface) 120px);} .ab-red-item.is-weg{opacity:.35;} .ab-red-item.is-laeuft{opacity:.6;pointer-events:none;} .ab-red-kopf{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3); align-items:baseline;justify-content:space-between;} .ab-red-titel{margin:0;font-size:15px;line-height:1.35;font-weight:600; flex:1 1 min(420px,100%);min-width:0;overflow-wrap:break-word;} .ab-red-titel a{color:var(--ab-text);text-decoration:none;} .ab-red-titel a:hover,.ab-red-titel a:focus{color:var(--ab-accent);text-decoration:underline;} .ab-red-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;font-size:12px;} .ab-red-teaser{margin:var(--sp-2) 0 0;font-size:13px;line-height:1.55; color:var(--ab-text);overflow-wrap:break-word;} .ab-red-mehr{margin-top:var(--sp-3);padding-top:var(--sp-3); border-top:1px dashed var(--ab-border-strong);font-size:13px;line-height:1.6;} .ab-red-volltext{white-space:pre-wrap;max-height:420px;overflow-y:auto; background:var(--ab-surface-2);border:1px solid var(--ab-border); border-radius:var(--r-sm);padding:var(--sp-3);margin:0 0 var(--sp-3); overflow-wrap:break-word;} .ab-red-fakten{margin:0 0 var(--sp-3);padding-left:var(--sp-4);color:var(--ab-muted);} .ab-red-notizfeld{width:100%;box-sizing:border-box;font:inherit;font-size:13px; padding:var(--sp-2);border:1px solid var(--ab-border-strong); border-radius:var(--r-sm);min-height:62px;resize:vertical;} .ab-red-aktionen{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center; margin-top:var(--sp-3);} /* Die Tastenmarke am Knopf. Am Telefon unsichtbar - dort gibt es keine. */ .ab-red-taste{display:inline-block;margin-left:5px;padding:0 4px;border-radius:3px; background:rgba(255,255,255,.22);font-size:10px;font-weight:700;line-height:15px; vertical-align:1px;} .ab-btn--ghost .ab-red-taste{background:var(--ab-neutral-bg);color:var(--ab-muted);} .ab-red-stand{font-size:12px;} .ab-red-blatt{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center; justify-content:center;margin:var(--sp-4) 0;} @media (max-width:620px){ .ab-red-tasten{display:none;} .ab-red-taste{display:none;} .ab-red-item{padding:var(--sp-3);} .ab-red-aktionen .ab-btn{flex:1 1 calc(50% - var(--sp-2));min-height:40px;} .ab-red-aktionen .ab-topbar-spacer{display:none;} } /* Nachtrag 13.10.2026, aus der Messung am Spiegel: Bei 390 px lief `.ab-red-meta` 39 px über den Rand - Schuld war das Quellenabzeichen. „BMWET - Wirtschaftsministerium, Presse" ist ein Wort zu viel für 390 Pixel, und ein `ab-badge` bricht von sich aus nicht um. `flex-wrap` am Elternteil hilft nicht, wenn ein einzelnes Kind schon zu breit ist: Es braucht `min-width:0` und die Erlaubnis zum Umbrechen. Dieselbe Ursache wie am 12.10.2026 auf /fuer-unternehmen/ bei der Überschrift. */ .ab-red-meta{min-width:0;max-width:100%;} .ab-red-meta>*{min-width:0;max-width:100%;} .ab-red-meta .ab-badge,.ab-red-meta .ab-chip{white-space:normal;overflow-wrap:break-word; text-align:left;} .ab-red-kopf{min-width:0;} /* Am Telefon stand die erste Karte erst bei 675 px - vier Kennzahlen übereinander und ein Filter in drei Zeilen. Wer dort entscheiden will, soll nicht erst scrollen: Die Zahlen stehen zu zweit in einer Reihe, und der Filter klappt zu. */ @media (max-width:620px){ .ab-red-kompakt{margin:var(--sp-2) 0;} .ab-red-kompakt>summary{cursor:pointer;font-size:13px;color:var(--ab-accent); padding:var(--sp-2) 0;list-style:none;} .ab-red-kompakt>summary::-webkit-details-marker{display:none;} .ab-red-kompakt>summary::before{content:'▸ ';} .ab-red-kompakt[open]>summary::before{content:'▾ ';} #red-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);} #red-zahlen .ab-kpi{padding:var(--sp-2) var(--sp-3);} #red-zahlen .n{font-size:20px;} #red-zahlen .l{font-size:11px;margin-top:4px;} .ab-red-filter{margin:var(--sp-2) 0;padding:var(--sp-3);} .ab-red-filter label,.ab-red-filter .ab-btn{width:100%;} .ab-red-filter .ab-red-sel,.ab-red-filter input[type=search]{width:100%;box-sizing:border-box;} } /* Am Telefon wurde aus dem Anreißer eine Textwand: zehn Zeilen, und die nächste Karte stand erst 800 px tiefer. Wer durchgeht, will je Karte wissen, worum es geht - nicht den halben Text lesen. Vier Zeilen reichen dafür; der Rest steht hinter „Volltext". Am Schreibtisch bleibt es bei der vollen Länge, dort ist Platz. */ @media (max-width:620px){ .ab-red-teaser{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical; overflow:hidden;} } /* Nachtrag 13.10.2026: Entschiedenes verschwindet sofort. Zuerst blieb die Karte blass stehen, mit „Rückgängig" daneben - die Ansage war aber: „Beim Verwerfen muss er sofort aus der Liste verschwinden." Sie schiebt sich jetzt zusammen und geht auf `hidden`; im Dokument bleibt sie, damit die Leiste unten sie zurückholen kann. */ .ab-red-item.is-geht{height:0!important;opacity:0;margin-top:0;margin-bottom:0; padding-top:0;padding-bottom:0;overflow:hidden; transition:height .2s ease,opacity .15s ease,padding .2s ease,margin .2s ease;} .ab-red-item{transition:border-color .12s,box-shadow .12s,opacity .18s,height .2s ease;} /* Die Rückgängig-Leiste. Unten, über allem, aber schmal - sie soll die Liste nicht verdecken, während man weiterarbeitet. */ .ab-red-rueck{position:fixed;left:50%;bottom:18px;transform:translateX(-50%); z-index:60;display:flex;align-items:center;gap:var(--sp-3); max-width:min(560px,calc(100vw - 24px)); background:var(--ab-side-bg);color:#fff;border-radius:var(--r); padding:10px var(--sp-3);box-shadow:var(--sh-3);font-size:13px;} .ab-red-rueck-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .ab-red-rueck .ab-btn{flex:0 0 auto;background:rgba(255,255,255,.14);color:#fff; border-color:rgba(255,255,255,.28);} .ab-red-rueck .ab-btn:hover{background:rgba(255,255,255,.26);color:#fff;} .ab-red-rueck-zu{flex:0 0 auto;background:none;border:0;color:var(--ab-side-muted); font-size:18px;line-height:1;cursor:pointer;padding:0 2px;} .ab-red-rueck-zu:hover{color:#fff;} @media (max-width:620px){ .ab-red-rueck{left:12px;right:12px;transform:none;max-width:none;bottom:12px;} } /* Die zwei Reiter der Redaktionsliste: „Zu entscheiden" und „Wartet auf einen Text". Ohne den zweiten wäre „bestätigt" eine Sackgasse. */ .ab-red-reiter{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-3) 0 var(--sp-2); border-bottom:1px solid var(--ab-border);} .ab-red-reiter-a{display:inline-flex;align-items:center;gap:var(--sp-2); padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm) var(--r-sm) 0 0; color:var(--ab-muted);text-decoration:none;font-size:13px;font-weight:600; border:1px solid transparent;border-bottom:0;margin-bottom:-1px;} .ab-red-reiter-a:hover{color:var(--ab-accent);background:var(--ab-surface-2);} .ab-red-reiter-a.is-aktiv{color:var(--ab-text);background:var(--ab-surface); border-color:var(--ab-border);} .ab-red-reiter-a.is-aktiv .ab-badge{background:var(--ab-accent-soft);color:var(--ab-accent-d);} /* Einheitliche Listen, 13.10.2026. Vorgabe des Betreibers: „bitte auch einheitlich wie alle anderen machen die lesbar sind. Verwende bitte einheitliche Listenansichten." /news/themen hatte ein zweites Kartenlayout mit eigenen Klassen (tkarte, tchip, tsel) und eigenem CSS per registerCss. Es sah der Redaktionsliste ähnlich und wich doch ab. Jetzt nutzt es dieselben `ab-red-*`-Bausteine; hier stehen nur die zwei Dinge, die dort zusätzlich gebraucht werden. */ /* Ein Chip als Filter: anklickbar, mit Ein-Zustand. */ a.ab-chip{text-decoration:none;cursor:pointer;} a.ab-chip:hover{border-color:var(--ab-accent);color:var(--ab-accent-d);} .ab-chip.is-an{background:var(--ab-accent);border-color:var(--ab-accent);color:#fff;} .ab-chip.is-an:hover{background:var(--ab-accent-d);color:#fff;} .ab-red-chips{margin:var(--sp-3) 0 var(--sp-2);} /* Was zu lange liegt, bekommt eine Kante - dieselbe Aussage wie vorher `.tkarte.ist-alt`, nur im Designsystem. */ .ab-red-item.ist-alt{border-left-color:var(--ab-warn);} .ab-red-alt{color:var(--ab-warn);font-weight:600;} /* =================================================================== TAGESKALENDER (/news/tageskalender) 13.10.2026 ------------------------------------------------------------------- Rückmeldung des Betreibers: „schaut schrecklich aus." Die Seite hatte 439 eigene `tk-*`-Klassen, einen eigenen