/* ==========================================================================
FlexiERP Designsystem (2026-10-23)
Lädt NACH sidebar.css (layout.html.twig) und gilt damit als oberste Schicht.
ACHTUNG: assets/styles/app.css (Tailwind, über AssetMapper) wird NOCH SPÄTER
geladen und setzt :root-Variablen und die body-Schrift selbst. Deshalb stehen
Tokens und Grundschrift hier unter html:root (höhere Spezifität) — ein
schlichtes :root verlöre gegen app.css (gemessen 2026-10-23: --chart-5 blieb
#9B8CFF, die Schrift Inter).
Statisch wie sidebar.css — kein tailwind:build, kein asset-map:compile nötig;
beim Ändern die Version im hochzählen (?v=N).
Aufbau
1. Tokens (--ds-*) — die EINE Quelle für Farbe, Form, Schatten, Schrift.
2. Brücke: die älteren Variablen (--accent, --fx-brand, --content-bg …)
zeigen auf die Tokens. So wirkt das neue Bild auch auf Seiten, die noch
nicht umgestellt sind.
3. Grundgerüst: Seitenleiste, Kopfzeile, Arbeitsfläche.
4. Bausteine (ds-*): Seitenkopf, Knopf, Status, Karte, Kennzahl, Reiter,
Tabelle, Merkmalsliste, Zeitleiste, Leerzustand, Monogramm.
Regeln (Einzelheiten docs/handbuch/oberflaeche.md, „Designsystem“):
- Farben haben eine Aufgabe: Blau = Handlung/Auswahl, Grün = erledigt/gut,
Orange = Hinweis/offen, Rot = kritisch/überfällig. Status nie NUR über
Farbe — immer Punkt + Wort.
- Beträge, Mengen, Belegnummern: .ds-num (tabellarische Ziffern).
- Keine Sonderlösung je Seite: fehlt ein Baustein, kommt er HIERHER.
========================================================================== */
/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
html:root {
/* Flächen */
--ds-page: #F4F6F9;
--ds-surface: #FFFFFF;
--ds-surface-2: #F8FAFC;
--ds-surface-3: #EEF2F7;
--ds-line: #E3E8EF;
--ds-line-strong: #CBD3DF;
/* Text */
--ds-ink: #0F172A;
--ds-ink-2: #334155;
--ds-muted: #5B6B7F;
/* --ds-subtle nur für Symbole und Linien: als Text 2,6:1 — unter WCAG AA */
--ds-subtle: #94A3B8;
/* Marke / Handlung */
--ds-primary: #1F5EF5;
--ds-primary-hover: #174BD0;
--ds-primary-soft: #EAF1FF;
--ds-primary-ink: #1A47B8;
/* Fokus: weißer Spalt + voller Blauring (5,3:1). Der frühere 22-%-Schleier lag
unter den 3:1 aus WCAG 1.4.11 — Tastaturnutzer sahen kaum, wo sie sind. */
--ds-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ds-primary);
--ds-focus-soft: 0 0 0 3px rgba(31, 94, 245, .22);
/* Status (Fläche / Schrift / Punkt) */
--ds-ok: #15803D; --ds-ok-bg: #EAF7EF; --ds-ok-dot: #22A35A;
/* Speichern ist grün (1.257.0, Dev-Notiz #29) — #15803D trägt weiße Schrift mit 5,0 : 1 */
--ds-save: #15803D; --ds-save-hover: #166534; --ds-save-line: #86C9A0;
--ds-warn: #B45309; --ds-warn-bg: #FFF4E5; --ds-warn-dot: #F08C1A;
--ds-crit: #B91C1C; --ds-crit-bg: #FDECEC; --ds-crit-dot: #E5484D;
--ds-info: #1A47B8; --ds-info-bg: #EAF1FF; --ds-info-dot: #1F5EF5;
--ds-neutral: #475569; --ds-neutral-bg:#EEF2F7; --ds-neutral-dot:#94A3B8;
/* Seitenleiste */
--ds-nav-bg: #141A24;
--ds-nav-bg-2: #1A2230;
--ds-nav-line: rgba(255, 255, 255, .07);
--ds-nav-text: rgba(226, 232, 240, .92); /* 12,1:1 auf --ds-nav-bg (1.179.0, Dev-Notiz #6; vorher .78 = 9,0:1) */
--ds-nav-text-dim: rgba(226, 232, 240, .70); /* 7,5:1 — Unterpunkte, Abschnitte (vorher .42 = 3,5:1, unter WCAG AA) */
--ds-nav-hover: rgba(255, 255, 255, .055);
/* Form */
/* Straffe Ecken (Wunsch des Anwenders 2026-10-23: 12 px wirkte verspielt):
Karten 8, Knöpfe/Felder 6, Kleines 4. Rund nur, wo es Bedeutung trägt
(Avatar, Statuspunkt, Zeitleistenpunkt). */
--ds-radius-sm: 4px;
--ds-radius: 6px;
--ds-radius-lg: 8px;
--ds-shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
--ds-shadow-2: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04);
--ds-shadow-pop: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
/* Schrift */
--ds-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ds-text-xs: .75rem; /* 12 */
--ds-text-sm: .8125rem; /* 13 */
--ds-text: .875rem; /* 14 */
--ds-text-md: 1rem; /* 16 */
--ds-text-lg: 1.25rem; /* 20 */
--ds-text-xl: 1.625rem; /* 26 */
--ds-text-kpi: 1.5rem; /* 24 */
/* Abstand (4er-Raster) */
--ds-gap: 16px;
--ds-gap-lg: 20px;
}
/* ── 2. Brücke zu den älteren Variablen ──────────────────────────────────── */
html:root {
--accent: var(--ds-primary);
--accent-light: var(--ds-primary-soft);
--accent-glow: rgba(31, 94, 245, .18);
--content-bg: var(--ds-page);
--card-bg: var(--ds-surface);
--card-border: var(--ds-line);
--card-shadow: var(--ds-shadow-2);
--card-radius: var(--ds-radius-lg);
--text-primary: var(--ds-ink);
--text-secondary: var(--ds-ink-2);
--text-muted: var(--ds-subtle);
--sidebar-bg: var(--ds-nav-bg);
--sidebar-border: var(--ds-nav-line);
--sidebar-hover: var(--ds-nav-hover);
--sidebar-active-bg: var(--ds-primary);
--fx-brand: var(--ds-primary);
--fx-brand-strong: var(--ds-primary);
--fx-brand-soft: var(--ds-primary-soft);
--fx-page: var(--ds-page);
--fx-line: var(--ds-line);
--fx-line-soft: #EDF1F6;
--fx-text: var(--ds-ink);
--fx-muted: var(--ds-muted);
--fx-muted-2: var(--ds-subtle);
--fx-shadow-soft: var(--ds-shadow-1);
--fx-shadow-card: var(--ds-shadow-2);
--fx-shadow-hover: var(--ds-shadow-2);
/* Diagramme: Hausfarbe Blau, Rest bleibt die abgestimmte Palette */
--chart-1: #1F5EF5;
--chart-5: #7FA4FA;
--chart-positive: #22A35A;
--chart-negative: #E5484D;
--chart-warning: #F08C1A;
}
/* ── 3. Grundgerüst ──────────────────────────────────────────────────────── */
html:root, html:root body { background: var(--ds-page); }
html:root body {
font-family: var(--ds-font);
color: var(--ds-ink);
font-feature-settings: "cv11", "ss01";
}
.ds-num, .kpi-number, .font-mono.tabular, td.text-right, th.text-right { font-variant-numeric: tabular-nums; }
/* Arbeitsfläche ruhig: keine farbigen Lichthöfe mehr */
main.flex-1.overflow-auto { background: var(--ds-page) !important; }
:focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius-sm); }
/* Seitenleiste */
.erp-sidebar { background: var(--ds-nav-bg) !important; border-right: 1px solid var(--ds-nav-line) !important; }
.erp-sidebar-brand { border-bottom-color: var(--ds-nav-line) !important; }
.erp-sidebar-logo {
background: var(--ds-primary) !important;
box-shadow: none !important;
border-radius: var(--ds-radius) !important;
}
.erp-sidebar-section-label { color: var(--ds-nav-text-dim) !important; letter-spacing: .06em; }
.sidebar-primary-link,
.sidebar-group-summary,
.sidebar-footer-link { color: var(--ds-nav-text) !important; border-radius: var(--ds-radius) !important; }
.sidebar-primary-link:hover,
.sidebar-group-summary:hover,
.sidebar-footer-link:hover { background: var(--ds-nav-hover) !important; color: #fff !important; }
.sidebar-primary-link.is-active,
.sidebar-group.is-current > .sidebar-group-summary,
.sidebar-footer-link.is-active {
background: var(--ds-primary) !important;
color: #fff !important;
box-shadow: none !important;
}
.sidebar-primary-link.is-active > svg:first-child,
.sidebar-group.is-current > .sidebar-group-summary > svg:first-child { color: #fff !important; background: rgba(255, 255, 255, .16) !important; }
.sidebar-submenu-link { color: var(--ds-nav-text-dim) !important; border-radius: var(--ds-radius-sm) !important; }
/* Schriftzug unter dem Logo und Gruppenpfeile — sidebar.css (Kollege) setzt hier 28–50 % Weiß */
.erp-sidebar-subtitle { color: var(--ds-nav-text-dim) !important; }
.sidebar-group-chevron { color: var(--ds-nav-text-dim) !important; }
.sidebar-submenu-link:hover { color: #fff !important; background: var(--ds-nav-hover) !important; }
.sidebar-submenu-link.is-active { color: #fff !important; background: rgba(31, 94, 245, .22) !important; }
.sidebar-submenu-link.is-active .sidebar-submenu-dot { background: #7FA4FA !important; box-shadow: none !important; }
/* Kopfzeile */
.fx-topbar {
/* über jedem mitlaufenden Seitenkopf (z 30): ihre Aufklapper (Glocke,
Verlauf, Profil) liegen in ihrer Stapelebene (backdrop-filter) */
z-index: 40 !important;
background: rgba(255, 255, 255, .92) !important;
border-bottom: 1px solid var(--ds-line) !important;
}
.fx-topbar input[type="text"] {
background: var(--ds-surface-2) !important;
border: 1px solid var(--ds-line) !important;
border-radius: var(--ds-radius) !important;
box-shadow: none !important;
}
.fx-topbar input[type="text"]:focus { border-color: var(--ds-primary) !important; box-shadow: var(--ds-focus-soft) !important; background: #fff !important; }
.fx-system-status { border-radius: var(--ds-radius) !important; }
/* Ältere Karten, Tabellen und Hauptknöpfe ins neue Bild ziehen */
main .erp-card,
main .bg-white.rounded-xl.border,
main .bg-white.rounded-lg.border {
border-color: var(--ds-line) !important;
border-radius: var(--ds-radius-lg) !important;
box-shadow: var(--ds-shadow-1) !important;
transform: none !important;
}
main .erp-card:hover { box-shadow: var(--ds-shadow-1) !important; }
main table thead tr { background: var(--ds-surface-2) !important; }
main table thead th { color: var(--ds-muted) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
main table tbody tr:hover { background: #F5F8FF !important; }
main .bg-slate-800,
main a.bg-slate-800,
main button.bg-slate-800,
:is(button, a, label).bg-slate-800 { background-color: var(--ds-primary) !important; }
main .hover\:bg-slate-700:hover,
main a.bg-slate-800:hover,
main button.bg-slate-800:hover,
:is(button, a, label).bg-slate-800:hover { background-color: var(--ds-primary-hover) !important; }
/* ── 3b. Durchgängige Brücke (1.152.0): alle Seiten im Bild des Dashboards ──
Die ~266 Seiten sind einheitlich mit Tailwind gebaut; statt jede Vorlage
umzuschreiben, gleicht diese Schicht die wiederkehrenden Muster INNERHALB von
an. Spezifität: main + zwei Klassen schlägt das einzelne Utility.
Neue Seiten bauen trotzdem mit den Bausteinen (Abschnitt 4). Regeln:
- keine Großbuchstaben-Beschriftungen (Dashboard schreibt Titel normal),
- Nummern in der Hausschrift mit gleich breiten Ziffern, nicht Schreibmaschine,
- Ecken: Karten 8, Felder/Knöpfe 6, Kleines und Status 4 — rund nur, wo es
Bedeutung trägt (Punkt, Avatar, Schalter). */
/* Seitentitel wie .ds-title */
main h1.text-2xl.font-bold,
main h1.text-xl.font-bold { font-size: var(--ds-text-xl) !important; font-weight: 650 !important; letter-spacing: -.015em !important; color: var(--ds-ink) !important; line-height: 1.2 !important; }
/* Beschriftungen und Kartenköpfe in Satzschreibung */
main .uppercase:is(.tracking-wide, .tracking-wider, .tracking-widest) {
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Kartenkopf (h2/h3 mit Kleinschrift) wie .ds-card-title */
main :is(h2, h3).uppercase.text-xs,
main :is(h2, h3).uppercase.text-\[11px\] {
font-size: var(--ds-text) !important;
font-weight: 600 !important;
color: var(--ds-ink) !important;
}
/* Feldbeschriftung (label/span mit Kleinschrift) */
main :is(label, span, div, p, dt).uppercase.text-xs { font-size: var(--ds-text-sm) !important; font-weight: 500 !important; color: var(--ds-muted) !important; }
/* Nummern: Hausschrift mit tabellarischen Ziffern; Schreibmaschine nur für
Code, Schlüssel und Eingabefelder technischer Werte */
main .font-mono:not(code):not(pre):not(kbd):not(textarea):not(input):not(.ds-keep-mono) {
font-family: var(--ds-font) !important;
font-variant-numeric: tabular-nums;
letter-spacing: 0 !important;
}
/* Nummern-„Kacheln“ (grauer Grund) werden zu ruhigem Text */
main :is(span, a).font-mono:is(.bg-gray-100, .bg-slate-100, .bg-gray-50),
main :is(span, a).font-mono:is(.bg-gray-100, .bg-slate-100, .bg-gray-50):hover {
background: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
color: var(--ds-ink-2) !important;
}
/* Nummer als Verweis: blau wie im Dashboard („SO000039“) */
main a.font-mono,
main a.font-mono:is(.bg-gray-100, .bg-slate-100, .bg-gray-50) { color: var(--ds-primary) !important; font-weight: 500 !important; }
main a.font-mono:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Status und Mengenmarken: Rechteck statt Pille (nur Marken MIT Innenabstand —
Punkte, Avatare und Schalter bleiben rund) */
main :is(span, a, button).rounded-full[class*="px-"] { border-radius: var(--ds-radius-sm) !important; }
/* Ecken straffen */
main .rounded-2xl, main .rounded-xl { border-radius: var(--ds-radius-lg) !important; }
main .rounded-lg { border-radius: var(--ds-radius) !important; }
/* Felder: Linie, Ecke und Fokus aus den Tokens */
main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
border-color: var(--ds-line-strong);
border-radius: var(--ds-radius) !important;
}
main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
border-color: var(--ds-primary) !important;
box-shadow: var(--ds-focus-soft) !important;
outline: none !important;
}
main :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ds-primary); }
/* Grautöne: Hinweistext nie unter 4,5:1 (text-gray-400 hat 2,9:1) */
main .text-gray-400:not(svg):not(:is(svg *)) { color: var(--ds-muted) !important; }
main svg.text-gray-400, main .text-gray-300 { color: var(--ds-subtle) !important; }
main .text-gray-500 { color: var(--ds-muted) !important; }
main .text-gray-900 { color: var(--ds-ink) !important; }
main .border-gray-200, main .divide-gray-100 > * + *, main .divide-gray-200 > * + * { border-color: var(--ds-line) !important; }
/* Klickbare Listenzeilen (onclick): die Nummer der ersten Datenspalte blau wie
ein Verweis; die Zeile ist per Tastatur erreichbar (Skript im Layout) */
main tr[onclick] > td:not([data-col]) + td[data-col] .font-mono,
main tr[onclick] > td[data-col]:first-child .font-mono { color: var(--ds-primary) !important; font-weight: 500 !important; }
main tr[onclick]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ds-primary); background: #F5F8FF !important; }
/* Klapptafeln der Kopfzeile (Benachrichtigungen, zuletzt aufgerufen, Lesezeichen):
Kopf und Leertext lagen bei 2,5:1 */
.fx-navtool-head, .fx-navtool-empty, .fx-navtool-clear, .fx-navtool-remove { color: var(--ds-muted) !important; }
/* Sortierpfeile der Listen: Bedienelement, mindestens 3:1 */
main .lv-sort-pfeil { color: #7B8798 !important; }
.fx-navtool-head { letter-spacing: 0 !important; text-transform: none !important; }
/* Verwaltung: die farbigen Abschnittskanten aus sidebar.css (Kollegen-Datei,
nicht ändern) — Farbe trägt im Dashboard nur Handlung oder Status */
body.erp-admin-index main > .p-6 > .mb-8::before { display: none !important; }
/* Tastaturfokus für alle Bedienelemente — sichtbar wie im Dashboard */
main :is(a, button, summary, [tabindex]):focus-visible { outline: none !important; box-shadow: var(--ds-focus) !important; border-radius: var(--ds-radius-sm); }
/* ── 4. Bausteine ────────────────────────────────────────────────────────── */
/* Seite */
.ds-page { padding: 20px 24px 32px; max-width: 1760px; }
.ds-stack > * + * { margin-top: var(--ds-gap); }
.ds-grid { display: grid; gap: var(--ds-gap); }
.ds-grid-kpi { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Sechs Kennzahlen: 6 → 3 → 2 → 1 Spalten, nie 5 + 1. */
.ds-grid-kpi-6 { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .ds-grid-kpi-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ds-grid-kpi-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ds-grid-kpi-6 { grid-template-columns: 1fr; } }
/* Fünf Kennzahlen (Akte): 5 → 3 → 2 → 1 Spalten. */
.ds-grid-kpi-5 { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1360px) { .ds-grid-kpi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ds-grid-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ds-grid-kpi-5 { grid-template-columns: 1fr; } }
/* Artikelakte: die Übersicht teilt sich die Breite mit der Akten-Seitenleiste —
nach verfügbarem Platz umbrechen statt nach Fensterbreite. */
[data-ds-uebersicht="artikel"] { container-type: inline-size; }
[data-ds-uebersicht="artikel"] .ds-grid-kpi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 860px) { [data-ds-uebersicht="artikel"] .ds-grid-kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (max-width: 480px) { [data-ds-uebersicht="artikel"] .ds-grid-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hauptspalte + Seitenspalte bzw. zwei gleiche Spalten; untereinander unter 1100 px. */
.ds-cols-main { display: grid; gap: var(--ds-gap); grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.ds-cols-2 { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Karten einer Reihe gleich hoch; Spalten mit .ds-stack wachsen nicht mit */
.ds-cols-main > .ds-stack, .ds-cols-2 > .ds-stack { align-self: start; }
@media (max-width: 1100px) { .ds-cols-main, .ds-cols-2 { grid-template-columns: minmax(0, 1fr); } }
/* Pfad */
.ds-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--ds-text-sm); color: var(--ds-muted); margin-bottom: 10px; }
.ds-breadcrumb a { color: var(--ds-ink-2); text-decoration: none; }
.ds-breadcrumb a:hover { color: var(--ds-primary); }
.ds-breadcrumb svg { width: 14px; height: 14px; color: var(--ds-subtle); }
/* Seitenkopf */
.ds-header { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.ds-header-main { flex: 1 1 420px; min-width: 0; }
.ds-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-title { font-size: var(--ds-text-xl); line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ds-ink); margin: 0; }
.ds-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-subtitle { margin-top: 4px; color: var(--ds-muted); font-size: var(--ds-text); max-width: 72ch; }
.ds-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-meta-sep { width: 1px; height: 14px; background: var(--ds-line-strong); }
/* Seitenkopf mit Seitenaktionen (1.202.0, Dev-Notiz #8): Titel links,
Aktionen oben rechts; läuft beim Scrollen mit, damit „Speichern“ auch in
langen Masken an derselben Stelle steht wie „Bearbeiten“ in der Akte. */
/* Er klebt UNTER der Kopfzeile (Suche, Glocke, Profil; 64 px, ebenfalls
sticky in ) — bis 1.206 bei top:0 schob er sich beim Scrollen über
sie, und ihr Benachrichtigungsfenster lag unter ihm (Dev-Notiz #13). */
.ds-seitenkopf {
position: sticky; top: 64px; z-index: 30;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin: 0 0 20px; padding: 12px 0;
background: var(--ds-page);
/* Grund und Trennlinie reichen über die GANZE Breite von bis an die
Seitenleiste (1.204.0, Dev-Notiz #12): der Kopf selbst ist nur so breit
wie der Seitenrahmen (p-6, max-w-…), links und rechts davon schaute der
Inhalt beim Scrollen durch. Das Randbild mit Überstand (outset) wird
gemalt, zählt aber nicht zur Rollfläche — kein Querrollbalken;
(overflow:auto) schneidet es an seinem Rand ab. Der Verlauf ist Grund
und, in der letzten Pixelzeile, die Trennlinie. */
border-image: linear-gradient(to bottom, var(--ds-page) calc(100% - 1px), var(--ds-line) 0) fill 0 / 0 / 0 100vmax;
}
.ds-seitenkopf .ds-header-main { flex: 1 1 320px; }
/* der mitlaufende Kopf darf ein angesprungenes Feld nicht verdecken (WCAG 2.4.11) */
main:has(.ds-seitenkopf) { scroll-padding-top: 148px; }
.ds-seitenkopf .ds-header-actions { margin-left: auto; justify-content: flex-end; }
/* fester Kopf eines Designers (schmales Panel): Knöpfe in einer Zeile, der Titel kürzt sich */
[data-seitenkopf]:not(.ds-seitenkopf) .ds-header-actions { flex-wrap: nowrap; flex-shrink: 0; }
.ds-header-actions [data-seitenaktion="bearbeiten"] { order: 98; }
.ds-header-actions [data-seitenaktion="menue"] { order: 99; }
/* Monogramm (Kontakt, Artikel …) */
.ds-monogram {
width: 72px; height: 72px; flex: 0 0 auto; display: grid; place-items: center;
border-radius: var(--ds-radius-lg); background: var(--ds-primary-soft); color: var(--ds-primary);
font-size: 1.625rem; font-weight: 650; letter-spacing: -.02em;
}
.ds-avatar {
width: 28px; height: 28px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 999px;
background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: .6875rem; font-weight: 600;
}
/* Knöpfe */
.ds-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 36px; padding: 0 14px; border-radius: var(--ds-radius);
font: 500 var(--ds-text)/1 var(--ds-font); white-space: nowrap; cursor: pointer;
border: 1px solid var(--ds-line-strong); background: var(--ds-surface); color: var(--ds-ink);
text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ds-btn:hover { background: var(--ds-surface-2); border-color: var(--ds-subtle); }
.ds-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ds-btn-primary { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }
.ds-btn-primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }
.ds-btn-ghost { background: transparent; border-color: transparent; color: var(--ds-ink-2); }
.ds-btn-ghost:hover { background: var(--ds-surface-3); border-color: transparent; }
.ds-btn-danger { color: var(--ds-crit); }
.ds-btn-danger:hover { background: var(--ds-crit-bg); border-color: #F3B6B6; }
.ds-btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--ds-text-sm); }
.ds-btn-icon { width: 36px; padding: 0; }
.ds-btn[disabled], .ds-btn.is-disabled { opacity: .5; pointer-events: none; }
/* Menü (details/summary — ohne Skript) */
.ds-menu { position: relative; }
.ds-menu > summary { list-style: none; }
.ds-menu > summary::-webkit-details-marker { display: none; }
.ds-menu-panel {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; padding: 6px;
background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop);
}
.ds-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--ds-radius-sm);
font: 400 var(--ds-text)/1.3 var(--ds-font); color: var(--ds-ink); text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none;
}
.ds-menu-item:hover { background: var(--ds-surface-2); }
.ds-menu-item svg { width: 16px; height: 16px; color: var(--ds-muted); }
.ds-menu-item.is-danger { color: var(--ds-crit); }
.ds-menu-item.is-danger svg { color: var(--ds-crit); }
.ds-menu-sep { height: 1px; margin: 6px 4px; background: var(--ds-line); }
/* Status (immer Punkt + Wort) */
.ds-badge {
display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--ds-radius-sm);
font: 500 var(--ds-text-xs)/1 var(--ds-font); white-space: nowrap;
background: var(--ds-neutral-bg); color: var(--ds-neutral);
}
.ds-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ds-neutral-dot); }
.ds-badge-ok { background: var(--ds-ok-bg); color: var(--ds-ok); } .ds-badge-ok::before { background: var(--ds-ok-dot); }
.ds-badge-warn { background: var(--ds-warn-bg); color: var(--ds-warn); } .ds-badge-warn::before { background: var(--ds-warn-dot); }
.ds-badge-crit { background: var(--ds-crit-bg); color: var(--ds-crit); } .ds-badge-crit::before { background: var(--ds-crit-dot); }
.ds-badge-info { background: var(--ds-info-bg); color: var(--ds-info); } .ds-badge-info::before { background: var(--ds-info-dot); }
.ds-badge-plain::before { display: none; }
/* Kennzeichen / Etikett (ohne Statusbedeutung) */
.ds-tag {
display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--ds-radius-sm);
font: 500 var(--ds-text-sm)/1 var(--ds-font); color: var(--ds-ink-2); background: var(--ds-surface-3);
}
.ds-tag-primary { background: var(--ds-primary-soft); color: var(--ds-primary-ink); }
/* Karte */
.ds-card {
background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow-1); min-width: 0;
}
.ds-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 18px 0;
}
.ds-card-title { font: 600 var(--ds-text-md)/1.3 var(--ds-font); color: var(--ds-ink); margin: 0; letter-spacing: -.005em; }
.ds-card-hint { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-card-body { padding: 14px 18px 18px; }
.ds-card-foot { padding: 10px 18px; border-top: 1px solid var(--ds-line); font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-card-body-flush { padding: 10px 0 6px; }
.ds-card-link { font: 500 var(--ds-text-sm)/1 var(--ds-font); color: var(--ds-primary); text-decoration: none; white-space: nowrap; }
.ds-card-link:hover { color: var(--ds-primary-hover); text-decoration: underline; }
/* Kennzahl: Kopfzeile (Bezeichnung + Symbol), Wert, Fußzeile (Vergleich/Herkunft).
Als führt die ganze Karte in die Liste, aus der die Zahl stammt. */
.ds-kpi {
position: relative; display: flex; flex-direction: column; gap: 0; padding: 14px 16px 14px;
background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg);
box-shadow: var(--ds-shadow-1); color: inherit; text-decoration: none; min-width: 0;
transition: border-color .12s ease, box-shadow .12s ease;
}
a.ds-kpi:hover { border-color: #B9C8E6; box-shadow: var(--ds-shadow-2); }
a.ds-kpi:hover .ds-kpi-label { color: var(--ds-primary); }
a.ds-kpi:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.ds-kpi.is-alarm { border-color: #F2C4C4; box-shadow: inset 3px 0 0 var(--ds-crit-dot), var(--ds-shadow-1); }
.ds-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; }
.ds-kpi-icon {
width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--ds-radius);
background: var(--ds-primary-soft); color: var(--ds-primary);
}
.ds-kpi-icon svg { width: 18px; height: 18px; }
.ds-kpi-icon.is-ok { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-kpi-icon.is-warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds-kpi-icon.is-crit { background: var(--ds-crit-bg); color: var(--ds-crit); }
.ds-kpi-icon.is-neutral { background: var(--ds-surface-3); color: var(--ds-ink-2); }
.ds-kpi-label { font-size: var(--ds-text-sm); color: var(--ds-muted); line-height: 1.3; }
.ds-kpi-value {
margin-top: 4px; font-size: var(--ds-text-kpi); line-height: 1.15; font-weight: 650; letter-spacing: -.02em;
color: var(--ds-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ds-kpi-value.is-crit { color: var(--ds-crit); }
.ds-kpi-value small { font-size: var(--ds-text); font-weight: 500; letter-spacing: 0; color: var(--ds-muted); }
.ds-kpi-foot { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-kpi-foot strong { color: var(--ds-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-kpi-chevron { margin-left: auto; align-self: center; width: 18px; height: 18px; color: var(--ds-subtle); }
/* Veränderung (Pfeil + Wert, nicht nur Farbe) */
.ds-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--ds-radius-sm); font: 600 var(--ds-text-xs)/1.5 var(--ds-font); font-variant-numeric: tabular-nums; }
.ds-delta.is-up { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-delta.is-down { background: var(--ds-crit-bg); color: var(--ds-crit); }
.ds-delta.is-flat { background: var(--ds-neutral-bg); color: var(--ds-neutral); }
/* Reiter */
.ds-tabs {
display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
border-bottom: 1px solid var(--ds-line); margin: 0 -24px; padding: 0 24px;
}
.ds-tabs::-webkit-scrollbar { display: none; }
/* Rechter Rand blendet aus: zeigt, dass weitere Reiter folgen (waagrecht rollbar) */
.ds-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.ds-tab {
display: inline-flex; align-items: center; gap: 7px; padding: 11px 12px; margin-bottom: -1px;
border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; white-space: nowrap;
font: 500 var(--ds-text)/1 var(--ds-font); color: var(--ds-muted); text-decoration: none;
}
.ds-tab:hover { color: var(--ds-ink); }
.ds-tab svg { width: 16px; height: 16px; }
.ds-tab.is-active, .ds-tab[aria-selected="true"] { color: var(--ds-primary); border-bottom-color: var(--ds-primary); }
.ds-tab-count { font-size: var(--ds-text-xs); color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.ds-tab.is-active .ds-tab-count { color: var(--ds-primary); }
/* Tabelle */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text); }
.ds-table th {
text-align: left; font-weight: 500; font-size: var(--ds-text-sm); color: var(--ds-muted);
padding: 8px 18px; border-bottom: 1px solid var(--ds-line); background: transparent !important;
}
.ds-table td { padding: 9px 18px; border-bottom: 1px solid #EEF2F6; color: var(--ds-ink); vertical-align: middle; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-table a { color: var(--ds-primary); text-decoration: none; font-variant-numeric: tabular-nums; }
.ds-table a:hover { text-decoration: underline; }
main .ds-table tbody tr:hover { background: #F7F9FC !important; }
/* Merkmalsliste (Stammdaten) */
.ds-dl { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; column-gap: 12px; row-gap: 7px; margin: 0; font-size: var(--ds-text); }
.ds-dl dt { color: var(--ds-muted); font-size: var(--ds-text-sm); line-height: 1.55; }
.ds-dl dd { margin: 0; color: var(--ds-ink); min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.ds-dl dd a { color: var(--ds-primary); text-decoration: none; }
.ds-dl dd a:hover { text-decoration: underline; }
.ds-dl-cols { display: grid; gap: 8px 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Zeitleiste */
.ds-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.ds-timeline li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.ds-timeline li:not(:last-child)::before {
content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 1px; background: var(--ds-line);
}
.ds-timeline-dot {
width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px;
background: var(--ds-primary-soft); color: var(--ds-primary);
}
.ds-timeline-dot svg { width: 15px; height: 15px; }
.ds-timeline-dot.is-ok { background: var(--ds-ok-bg); color: var(--ds-ok); }
.ds-timeline-dot.is-warn { background: var(--ds-warn-bg); color: var(--ds-warn); }
.ds-timeline-dot.is-crit { background: var(--ds-crit-bg); color: var(--ds-crit); }
.ds-timeline-dot.is-neutral { background: var(--ds-surface-3); color: var(--ds-ink-2); }
.ds-timeline-title { font-size: var(--ds-text); color: var(--ds-ink); line-height: 1.35; }
.ds-timeline-meta { margin-top: 2px; font-size: var(--ds-text-xs); color: var(--ds-muted); }
/* Leerzustand */
.ds-empty { padding: 28px 18px; text-align: center; color: var(--ds-muted); font-size: var(--ds-text); }
.ds-empty strong { display: block; color: var(--ds-ink-2); font-weight: 600; margin-bottom: 4px; }
/* Rangliste (Top-Kunden u. ä.) */
.ds-rank { list-style: none; margin: 0; padding: 0; font-size: var(--ds-text); line-height: 1.45; }
/* Top-Listen des Dashboards (1.257.0, Dev-Notiz #32): bis zu 25 Eintraege,
zehn sichtbar, der Rest im Rollbereich — die beiden Karten bleiben gleich hoch. */
.ds-rank-scroll { max-height: 440px; overflow-y: auto; padding-right: 6px; margin-right: -6px; scrollbar-width: thin; }
.ds-rank-scroll:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
.ds-rank li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 0; }
.ds-rank-pos { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--ds-radius-sm); background: var(--ds-surface-3); color: var(--ds-ink-2); font-size: .6875rem; font-weight: 600; }
.ds-rank li:first-child .ds-rank-pos { background: var(--ds-primary); color: #fff; }
.ds-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink); text-decoration: none; }
a.ds-rank-name:hover { color: var(--ds-primary); }
.ds-rank-value { font-variant-numeric: tabular-nums; color: var(--ds-ink); font-weight: 500; }
.ds-rank-bar { grid-column: 2 / 4; height: 4px; border-radius: 1px; background: var(--ds-surface-3); overflow: hidden; }
.ds-rank-bar > i { display: block; height: 100%; border-radius: 1px; background: var(--ds-primary); }
.ds-rank-name small, .ds-rank-value small { margin-left: 4px; font-size: var(--ds-text-xs); color: var(--ds-muted); font-weight: 400; }
/* Zahl im Kartenkopf (Summe des Diagramms) */
.ds-figure { text-align: right; }
.ds-figure-value { font-size: var(--ds-text-lg); font-weight: 650; letter-spacing: -.015em; color: var(--ds-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Diagrammfläche: feste Höhe, damit Chart.js nicht wächst */
.ds-chart-box { position: relative; height: 240px; }
.ds-chart-box.is-low { height: 170px; }
.ds-chart-box.ds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--ds-line); border-radius: var(--ds-radius); }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--ds-text-xs); color: var(--ds-muted); }
.ds-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ds-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.ds-legend i.is-line { height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--c); }
/* Ring mit Legende im Markup (Name, Anzahl, Anteil) */
.ds-donut { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 16px; }
.ds-donut-ring { position: relative; height: 136px; }
.ds-donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--ds-text-sm); }
.ds-donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; }
.ds-donut-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.ds-donut-legend span { color: var(--ds-ink-2); line-height: 1.25; overflow-wrap: anywhere; }
.ds-donut-legend b { font-weight: 600; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.ds-donut-legend em { font-style: normal; text-align: right; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) and (min-width: 520px) { .ds-donut { grid-template-columns: 170px minmax(0, 320px); } }
@media (max-width: 420px) { .ds-donut { grid-template-columns: 1fr; } }
/* Tabelle in Karten: waagrecht rollen statt die Seite zu verbreitern */
.ds-table-wrap { overflow-x: auto; }
.ds-cell-trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ds-link-quiet, .ds-table a.ds-link-quiet { color: var(--ds-ink); text-decoration: none; }
a.ds-link-quiet:hover, .ds-table a.ds-link-quiet:hover { color: var(--ds-primary); text-decoration: underline; }
/* Mehrere Links im Kartenkopf */
.ds-card-links { display: flex; gap: 14px; flex-wrap: wrap; }
/* Knopf, der wie ein Link aussieht (wechselt z. B. den Reiter) */
.ds-linkbutton { background: none; border: 0; padding: 0; cursor: pointer; }
/* Meldungsleiste in der Seite (nicht der Toast) */
.ds-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--ds-radius); border: 1px solid var(--ds-line); background: var(--ds-surface-2); font-size: var(--ds-text); color: var(--ds-ink-2); }
.ds-alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.ds-alert.is-crit { background: var(--ds-crit-bg); border-color: #F2C4C4; color: #7A1F1F; }
.ds-alert.is-crit svg { color: var(--ds-crit); }
.ds-alert.is-warn { background: var(--ds-warn-bg); border-color: #F5D9A8; color: #7A4A0B; }
.ds-alert.is-warn svg { color: var(--ds-warn); }
.ds-text-crit { color: var(--ds-crit) !important; }
/* Kennzahlenleiste über den Listen (1.154.0): kompakte Kacheln, jede zählende
Kachel ist ein Schnellfilter; die aktive trägt den Rahmen in Handlungsblau. */
.ds-list-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 16px; }
.ds-kpi.is-compact { padding: 11px 14px 12px; }
.ds-kpi.is-compact .ds-kpi-value { margin-top: 2px; font-size: 1.375rem; }
.ds-kpi.is-compact .ds-kpi-foot { margin-top: 3px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-kpi.is-warn { border-color: #F5D9A8; box-shadow: inset 3px 0 0 var(--ds-warn-dot), var(--ds-shadow-1); }
.ds-kpi.is-active { border-color: var(--ds-primary); box-shadow: 0 0 0 1px var(--ds-primary), var(--ds-shadow-1); }
.ds-kpi.is-active.is-alarm { box-shadow: inset 3px 0 0 var(--ds-crit-dot), 0 0 0 1px var(--ds-primary), var(--ds-shadow-1); }
.ds-kpi.is-active.is-warn { box-shadow: inset 3px 0 0 var(--ds-warn-dot), 0 0 0 1px var(--ds-primary), var(--ds-shadow-1); }
.ds-kpi.is-active .ds-kpi-label { color: var(--ds-primary); font-weight: 600; }
.ds-quick-hinweis {
display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; padding: 7px 12px;
border-radius: var(--ds-radius); background: var(--ds-primary-soft); color: var(--ds-ink-2); font-size: var(--ds-text-sm);
}
.ds-quick-hinweis a { margin-left: auto; color: var(--ds-primary); font-weight: 600; text-decoration: none; }
.ds-quick-hinweis a:hover { text-decoration: underline; }
/* Anmeldeseite (1.160.0): Markenfläche wie die Seitenleiste, Formular auf der
hellen Arbeitsfläche. Unter 860 px steht die Marke als schmaler Kopf darüber. */
body.ds-login-page { margin: 0; background: var(--ds-page); font-family: var(--ds-font); color: var(--ds-ink); }
.ds-login { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) 1fr; }
.ds-login-brand {
display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 48px;
background: var(--ds-nav-bg); color: var(--ds-nav-text);
}
.ds-login-mark { display: flex; align-items: center; gap: 12px; }
.ds-login-logo {
width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
background: var(--ds-primary); color: #fff; font: 700 1.25rem/1 var(--ds-font);
}
.ds-login-name { display: block; font: 650 1.125rem/1.2 var(--ds-font); color: #fff; letter-spacing: -.01em; }
.ds-login-sub { display: block; font-size: var(--ds-text-sm); color: var(--ds-nav-text-dim); }
.ds-login-claim { margin: 0; max-width: 30ch; font: 500 1.375rem/1.35 var(--ds-font); color: #fff; letter-spacing: -.01em; }
.ds-login-main { display: grid; place-items: center; padding: 32px 16px; }
.ds-login-card {
width: 100%; max-width: 380px; padding: 28px; background: var(--ds-surface);
border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-2);
}
.ds-login-card > * + * { margin-top: 14px; }
.ds-login-title { margin: 0; font: 650 1.375rem/1.2 var(--ds-font); letter-spacing: -.01em; }
.ds-login-lead { margin-top: 4px !important; font-size: var(--ds-text); color: var(--ds-muted); }
.ds-login-form > * + * { margin-top: 14px; }
.ds-login-field label { display: block; margin-bottom: 6px; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-login-field input {
width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; font: inherit; font-size: var(--ds-text);
border: 1px solid var(--ds-line-strong, #CBD3DF); border-radius: var(--ds-radius); background: var(--ds-surface); color: var(--ds-ink);
}
.ds-login-field input:focus { outline: none; border-color: var(--ds-primary); box-shadow: var(--ds-focus-soft); }
.ds-login-check { display: flex; align-items: center; gap: 8px; font-size: var(--ds-text-sm); color: var(--ds-ink-2); cursor: pointer; }
.ds-login-check input { width: 16px; height: 16px; accent-color: var(--ds-primary); }
.ds-login-submit { width: 100%; min-height: 42px; justify-content: center; font-weight: 600; }
.ds-login-submit:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
@media (max-width: 860px) {
.ds-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.ds-login-brand { padding: 16px; gap: 8px; }
.ds-login-claim { display: none; }
.ds-login-main { place-items: start center; padding-top: 24px; }
}
/* Öffentliche Seiten für Kunden (1.161.0): Online-Angebot, Ankunftsbestätigung.
Der Inhalt steht in — so greift die Brücke (Satzschreibung, Ecken,
Hausschrift) wie in der Anwendung. */
body.ds-public-page { margin: 0; min-height: 100vh; background: var(--ds-page); font-family: var(--ds-font); color: var(--ds-ink); }
/* Öffentliche Entwicklerdokumentation /api/docs (1.252.3): eigene Kopfleiste
statt der Anwendungshülle. 64 px hoch wie die Kopfzeile der Anwendung — der
mitlaufende Seitenkopf (.ds-seitenkopf, top: 64px) klebt so genau darunter.
Innen so breit wie der Inhalt (max-w-6xl = 1152 px). */
.ds-public-bar { position: sticky; top: 0; z-index: 40; height: 64px; background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); }
.ds-public-bar-inner { box-sizing: border-box; max-width: 1152px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 14px; }
.ds-public-brand { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--ds-text-md)/1 var(--ds-font); color: var(--ds-ink); text-decoration: none; }
.ds-public-brand .ds-login-logo { width: 32px; height: 32px; border-radius: 8px; font-size: 1rem; }
.ds-public-bar-sep { width: 1px; height: 20px; background: var(--ds-line-strong); }
.ds-public-bar-title { font: 400 var(--ds-text)/1 var(--ds-font); color: var(--ds-muted); }
.ds-public-bar-action { margin-left: auto; }
.ds-public-foot { box-sizing: border-box; max-width: 1152px; margin: 24px auto 0; padding: 20px 24px 32px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--ds-line); font: 400 var(--ds-text-sm)/1.5 var(--ds-font); color: var(--ds-muted); }
.ds-public-foot-links { display: flex; gap: 16px; }
.ds-public-foot a { color: var(--ds-ink-2); text-decoration: none; }
.ds-public-foot a:hover { color: var(--ds-primary); text-decoration: underline; }
@media (max-width: 640px) { .ds-public-bar-sep, .ds-public-bar-title { display: none; } .ds-public-bar-inner { padding: 0 16px; } }
/* Fehlerseiten (1.161.0): Karte der Anmeldeseite, mittig auf der hellen Fläche */
.ds-error { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; }
.ds-error-card { max-width: 440px; }
.ds-error-mark { gap: 10px; }
.ds-error-mark .ds-login-logo { width: 32px; height: 32px; border-radius: 8px; font-size: 1rem; }
.ds-error-code { font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-muted); }
.ds-error-text { margin: 0; font-size: var(--ds-text); line-height: 1.55; color: var(--ds-ink-2); }
.ds-error-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
/* Partnerakte Variante A „Profilspalte“ (1.162.0, entschieden 2026-10-25):
flache Profilspalte links bündig unter den Reitern, Arbeitsbereich rechts.
Das Raster hebt den Innenabstand von .ds-akte-body auf und gibt ihn dem
Arbeitsbereich zurück; unter 900 px steht das Profil über dem Arbeitsbereich. */
.ds-profil-raster { display: grid; grid-template-columns: 320px minmax(0, 1fr); margin: -20px -24px -32px; min-height: calc(100vh - 206px); }
.ds-profil { background: var(--ds-surface); border-right: 1px solid var(--ds-line); padding: 20px 20px 32px; min-width: 0; }
.ds-profil > section { padding: 16px 0; border-top: 1px solid var(--ds-line); }
.ds-profil-kopf { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; }
.ds-profil-kopf .ds-monogram { width: 48px; height: 48px; font-size: 1.125rem; border-radius: var(--ds-radius); flex: 0 0 auto; }
.ds-profil-name { font-weight: 600; color: var(--ds-ink); overflow-wrap: anywhere; }
.ds-profil-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ds-profil-titel { margin: 0 0 10px; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-profil-head .ds-profil-titel { margin: 0; }
.ds-profil .ds-dl { grid-template-columns: 120px 1fr; }
.ds-profil-haupt { padding: 20px 24px 32px; min-width: 0; }
/* Kennzahlband im Arbeitsbereich nach dessen Breite: 5 Spalten ab 780 px, sonst 3, schmal 2 */
.ds-profil-haupt { container-type: inline-size; }
.ds-profil-haupt .ds-grid-kpi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 780px) { .ds-profil-haupt .ds-grid-kpi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (max-width: 480px) { .ds-profil-haupt .ds-grid-kpi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ds-profil-raster { margin: -16px; } .ds-profil-haupt { padding: 16px; } }
@media (max-width: 900px) {
.ds-profil-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.ds-profil { border-right: 0; border-bottom: 1px solid var(--ds-line); }
}
/* Kleiner Monatsverlauf ohne Skript (Säulen in Prozent der Höhe) */
.ds-spark { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 132px; }
.ds-spark-col { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; gap: 6px; }
.ds-spark-bar { display: block; min-height: 0; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--ds-primary) 32%, white); transition: background-color .12s ease; }
.ds-spark-col:hover .ds-spark-bar { background: var(--ds-primary-hover); }
.ds-spark-col.is-current .ds-spark-bar { background: var(--ds-primary); }
.ds-spark-col.is-neg .ds-spark-bar { background: var(--ds-crit-dot); }
.ds-spark-label { flex: 0 0 auto; text-align: center; font-size: .6875rem; color: var(--ds-muted); line-height: 1; }
.ds-spark-col.is-current .ds-spark-label { color: var(--ds-ink-2); font-weight: 600; }
/* Schlichte Liste (Projekte, Verträge) */
.ds-list { list-style: none; margin: 0; padding: 0; }
.ds-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #EEF2F6; font-size: var(--ds-text); min-width: 0; }
.ds-list li:last-child { border-bottom: 0; }
.ds-list li > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-list-meta { font-size: var(--ds-text-xs); color: var(--ds-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kontaktzeilen mit Symbol */
.ds-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--ds-text); }
.ds-contact li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-contact li > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ds-subtle); }
.ds-contact a { color: var(--ds-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-contact a:hover { color: var(--ds-primary); text-decoration: underline; }
.ds-contact small { color: var(--ds-muted); }
.ds-contact-leer { color: var(--ds-muted); }
.ds-subhead { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--ds-line); font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-ink-2); }
/* Personen (Ansprechpartner) */
.ds-people { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.ds-people li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--ds-text); }
.ds-people-meta { font-size: var(--ds-text-xs); color: var(--ds-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Anschrift */
.ds-address { font-style: normal; display: grid; gap: 2px; font-size: var(--ds-text); color: var(--ds-ink); line-height: 1.45; }
.ds-address strong { font-weight: 600; }
.ds-address-land { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.ds-address-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* Aktenkopf: Pfad, Kopf und Reiter auf weißer Fläche, darunter der Inhalt */
.ds-akte-kopf { background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); padding: 16px 24px 0; flex-shrink: 0; }
.ds-akte-kopf .ds-header { margin-bottom: 14px; }
.ds-akte-kopf .ds-tabs { border-bottom: 0; margin-bottom: -1px; }
.ds-akte-body { padding: 20px 24px 32px; }
.ds-monogram.is-crit { background: var(--ds-crit-bg); color: var(--ds-crit); }
@media (max-width: 1100px) { .ds-akte-kopf { padding: 14px 16px 0; } .ds-akte-body { padding: 16px; } }
/* Hinweisfläche (z. B. interne Notiz) */
.ds-note { padding: 10px 12px; border-radius: var(--ds-radius); background: #FFF8E6; border: 1px solid #F5E3B3; color: #5B4A16; font-size: var(--ds-text); white-space: pre-line; }
/* Segment-Umschalter */
.ds-segment { display: inline-flex; padding: 2px; border-radius: var(--ds-radius); background: var(--ds-surface-3); }
.ds-segment > * { padding: 5px 10px; border-radius: var(--ds-radius-sm); font: 500 var(--ds-text-sm)/1 var(--ds-font); color: var(--ds-muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.ds-segment > .is-active { background: var(--ds-surface); color: var(--ds-ink); box-shadow: var(--ds-shadow-1); }
/* Live-Kennzeichen */
.ds-live { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--ds-radius); background: var(--ds-ok-bg); color: var(--ds-ok); font: 500 var(--ds-text-sm)/1 var(--ds-font); }
.ds-live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ds-ok-dot); box-shadow: 0 0 0 3px rgba(34, 163, 90, .18); }
/* ── 4c. Einstellungen (1.175.0): Administration wie Shopware 6, Zahnrad wie im Projekthandbuch ──
Drei feste Spalten mit Gruppen; je Eintrag Symbol + Name, ohne Karte.
`.ds-settings-legacy` bringt Plugin-Kacheln (fertiges HTML aus dem Slot
admin.tiles: a > div[Symbolkasten] + div[Name, Hinweis]) in dieselbe Form. */
.ds-settings-search { position: relative; display: block; }
.ds-settings-search input { width: 320px; max-width: 100%; height: 40px; padding: 0 40px 0 14px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: var(--ds-surface); font: 400 var(--ds-text)/1 var(--ds-font); color: var(--ds-ink); }
.ds-settings-search input::placeholder { color: var(--ds-muted); }
.ds-settings-search input:focus { outline: none; border-color: var(--ds-primary); box-shadow: var(--ds-focus-soft); }
.ds-settings-search svg { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ds-ink-2); pointer-events: none; }
.ds-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 48px; align-items: start; padding-top: 8px; }
.ds-settings-col { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.ds-settings-col:empty { display: none; }
/* `display` aus diesen Regeln übersteuert sonst das hidden-Attribut der Suche */
.ds-settings [hidden], .fx-settings-panel [hidden] { display: none !important; }
.ds-settings-group h2 { margin: 0 0 10px; font: 600 var(--ds-text-md)/1.3 var(--ds-font); color: var(--ds-ink); }
.ds-settings-list { list-style: none; margin: 0; padding: 0; }
.ds-settings-item, .ds-settings-legacy > a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--ds-radius); color: var(--ds-ink-2); font: 400 var(--ds-text)/1.35 var(--ds-font); text-decoration: none; }
.ds-settings-item svg { width: 20px; height: 20px; flex: none; color: var(--ds-ink-2); }
.ds-settings-item:hover, .ds-settings-legacy > a:hover { background: var(--ds-surface-3); color: var(--ds-ink); }
.ds-settings-item:focus-visible, .ds-settings-legacy > a:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-settings-item.is-crit, .ds-settings-item.is-crit svg { color: var(--ds-crit); }
.ds-settings-item.is-crit:hover { background: var(--ds-crit-bg); }
/* Plugin-Kachel → Listenzeile */
.ds-settings-legacy > a { border: 0 !important; background: none; box-shadow: none !important; flex-direction: row !important; }
.ds-settings-legacy > a > div:first-child { width: 20px !important; height: 20px !important; background: none !important; border-radius: 0; color: var(--ds-ink-2) !important; flex: none; }
.ds-settings-legacy > a > div:first-child svg { width: 20px !important; height: 20px !important; }
.ds-settings-legacy > a > div:last-child > div:first-child { font-weight: 400 !important; font-size: var(--ds-text) !important; color: inherit !important; }
.ds-settings-legacy > a > div:last-child > div + div { display: none; }
@media (max-width: 1100px) { .ds-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; } }
@media (max-width: 680px) { .ds-settings { grid-template-columns: minmax(0, 1fr); } .ds-settings-search input { width: 100%; } }
/* Zahnrad in der Kopfzeile: Akkordeon je Bereich (Panel-Grundform aus sidebar.css .fx-navtool-panel) */
.fx-settings-panel { width: 340px; max-height: min(78vh, 640px); display: flex; flex-direction: column; overflow: hidden; }
.fx-settings-acc { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fx-settings-find { width: 100%; margin: 2px 0 6px; }
.fx-settings-sec > summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ds-radius); cursor: pointer; list-style: none; font: 500 var(--ds-text)/1.3 var(--ds-font); color: var(--ds-ink); }
.fx-settings-sec > summary::-webkit-details-marker { display: none; }
.fx-settings-sec > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.6px solid var(--ds-muted); border-bottom: 1.6px solid var(--ds-muted); transform: rotate(-45deg); transition: transform .15s; }
.fx-settings-sec[open] > summary::after { transform: rotate(45deg); }
.fx-settings-sec > summary:hover { background: var(--ds-surface-3); }
.fx-settings-sec > summary:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.fx-settings-sec > summary svg { width: 18px; height: 18px; flex: none; color: var(--ds-ink-2); }
.fx-settings-links { display: flex; flex-direction: column; padding: 2px 0 6px 38px; }
.fx-settings-links > a.fx-navtool-item { padding: 6px 8px; }
.fx-settings-links > a.is-current { color: var(--ds-primary-ink); font-weight: 600; }
.fx-settings-links > a.is-crit { color: var(--ds-crit); }
.fx-settings-legacy > a { margin: 0; min-height: 32px; padding: 6px 8px; font-size: var(--ds-text-sm); }
.fx-settings-legacy > a > div:first-child { display: none !important; }
.fx-settings-all { display: block; text-align: center; margin-top: 6px; }
/* ── 4d. Reiter „Weitere“ (1.176.0, Dev-Notiz #3, Vorbild das Projekthandbuch) ─────────
tabs_controller.js baut ab 7 Reitern: 5 fest + „Weitere (n) ▾“. Der Knopf
übernimmt die Klassen des ersten Reiters (sieht aus wie ein Reiter), das
Menü liegt fest über der Seite und listet die übrigen Reiter senkrecht. */
.ds-tabs-more { display: inline-flex; flex: none; }
.ds-tabs-more-btn { display: inline-flex; align-items: center; gap: 6px; }
.ds-tabs-more-btn svg { width: 16px; height: 16px; flex: none; transition: transform .15s; }
.ds-tabs-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ds-tabs-more-menu { position: fixed; z-index: 70; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; padding: 6px; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop); display: flex; flex-direction: column; gap: 2px; }
.ds-tabs-more-menu[hidden] { display: none; }
.ds-tabs-more-menu > .ds-tabs-more-item { display: flex !important; align-items: center; gap: 8px; width: 100%; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: var(--ds-radius); background: none; text-align: left; white-space: nowrap; font: 500 var(--ds-text)/1.3 var(--ds-font); color: var(--ds-ink-2) !important; cursor: pointer; }
.ds-tabs-more-menu > .ds-tabs-more-item:hover { background: var(--ds-surface-3); color: var(--ds-ink) !important; }
.ds-tabs-more-menu > .ds-tabs-more-item:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.ds-tabs-more-menu > .ds-tabs-more-item.is-active { background: var(--ds-primary-soft); color: var(--ds-primary-ink) !important; }
/* ── 4e. Ungespeicherte Änderungen (1.196.0, Dev-Notiz #7) ───────────────
unsaved-changes.js: schwebende Leiste unten mittig über dem Inhalt (die
Toasts stehen rechts unten) und der Dialog beim Verlassen. */
.erp-unsaved-bar { position: fixed; bottom: 20px; z-index: 9000; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; max-width: calc(100vw - 32px); background: var(--ds-surface); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop); font: 500 var(--ds-text)/1.3 var(--ds-font); color: var(--ds-ink); }
.erp-unsaved-bar[hidden] { display: none; }
.erp-unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-warn-dot); flex: none; }
.erp-unsaved-text { margin-right: 6px; white-space: nowrap; }
.erp-unsaved-bar .ds-btn:focus-visible, .erp-unsaved-dialog .ds-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
/* margin: auto stellt die Mitte wieder her — Tailwinds Preflight setzt den
Rand ALLER Elemente auf 0, der Dialog klebte sonst oben links. */
.erp-unsaved-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(600px, calc(100vw - 32px)); padding: 22px 24px 18px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop); background: var(--ds-surface); color: var(--ds-ink); font-family: var(--ds-font); }
.erp-unsaved-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.erp-unsaved-dialog h2 { margin: 0 0 8px; font-size: var(--ds-text-md); font-weight: 600; }
.erp-unsaved-dialog p { margin: 0 0 20px; font-size: var(--ds-text); line-height: 1.5; color: var(--ds-ink-2); }
.erp-unsaved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.erp-unsaved-spacer { flex: 1 1 auto; }
/* ── 4f. API-Dokumentation (1.203.0, Dev-Notiz #11) ──────────────────────
Klassische Swagger-Anordnung: Ressource als aufklappbare Gruppe, darin je
Endpunkt eine Zeile in der Farbe der Methode. Die Farben sind die
Statusfarben des Systems, nicht Swaggers Pastell — dessen Hellblau trägt
weiße Schrift nur mit 2,5:1. */
.ds-api { --api-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; }
.ds-api code, .ds-api pre { font-family: var(--api-mono); }
.ds-api pre { margin: 0; padding: 12px 14px; border-radius: var(--ds-radius); background: #0F172A; color: #E2E8F0; font-size: var(--ds-text-xs); line-height: 1.55; overflow-x: auto; max-height: 420px; }
.ds-api p code, .ds-api td code, .ds-api li code { padding: 1px 5px; border-radius: var(--ds-radius-sm); background: var(--ds-surface-3); color: var(--ds-ink); font-size: .92em; }
.ds-api-werkzeug { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.ds-api-werkzeug .ds-settings-search input { width: 360px; }
.ds-api-treffer { font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-api-bereich { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 8px; font: 600 var(--ds-text-md)/1.3 var(--ds-font); color: var(--ds-ink); }
.ds-api-bereich span { font: 400 var(--ds-text-sm)/1 var(--ds-font); color: var(--ds-muted); }
/* Ressourcen je Fachbereich als Karte (.ds-card), wie Grundlagen und Schemas
(1.252.4) — vorher standen sie ohne Rahmen auf dem grauen Grund. */
.ds-api-gruppe { margin: 0 0 16px; padding: 2px 18px 4px; }
.ds-api-gruppe > .ds-api-bereich { margin: 14px 0 6px; }
.ds-api-gruppe > .ds-api-tag:last-of-type { border-bottom: 0; }
.ds-api details > summary { list-style: none; cursor: pointer; }
/* Sprungziel (#res-…, #schema-…): kommt zum scroll-padding-top von
(84px) hinzu — Luft, falls der Kopf auf schmalen Schirmen umbricht */
.ds-api details[id] { scroll-margin-top: 24px; }
.ds-api details > summary::-webkit-details-marker { display: none; }
.ds-api details > summary:focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius); }
.ds-api-pfeil { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--ds-ink-2); transition: transform .15s ease; }
.ds-api details[open] > summary .ds-api-pfeil { transform: rotate(180deg); }
/* Ressource („Tag“ bei Swagger) */
.ds-api-tag { border-bottom: 1px solid var(--ds-line); }
.ds-api-tag > summary { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.ds-api-tag > summary:hover { background: var(--ds-surface-2); }
.ds-api-tag-name { font: 600 var(--ds-text-md)/1.2 var(--api-mono); color: var(--ds-ink); }
.ds-api-tag-hint { font-size: var(--ds-text-sm); color: var(--ds-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-api-ops { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 16px; }
/* Endpunkt */
.ds-api-op { --m: var(--ds-neutral); --m-bg: var(--ds-neutral-bg); --m-line: var(--ds-line-strong);
border: 1px solid var(--m-line); border-radius: var(--ds-radius); background: var(--m-bg); }
.ds-api-op--get { --m: var(--ds-info); --m-bg: #F3F7FF; --m-line: #B9CDFB; }
.ds-api-op--post { --m: var(--ds-ok); --m-bg: #F2FAF5; --m-line: #A9DDBC; }
.ds-api-op--put { --m: var(--ds-warn); --m-bg: #FFF8EE; --m-line: #F6CC94; }
.ds-api-op--delete { --m: var(--ds-crit); --m-bg: #FEF4F4; --m-line: #F3B6B6; }
.ds-api-op > summary { display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 6px; min-height: 42px; }
.ds-api-methode { flex: none; width: 76px; padding: 6px 0; border-radius: var(--ds-radius-sm); background: var(--m); color: #fff; text-align: center; font: 700 var(--ds-text-sm)/1 var(--ds-font); letter-spacing: .02em; }
.ds-api-pfad { font: 600 var(--ds-text)/1.3 var(--api-mono); color: var(--ds-ink); word-break: break-all; }
.ds-api-kurz { font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-api-op-body { padding: 4px 16px 16px; border-top: 1px solid var(--m-line); background: var(--ds-surface); border-radius: 0 0 var(--ds-radius) var(--ds-radius); }
.ds-api-op-body > p { margin: 12px 0; font-size: var(--ds-text); line-height: 1.55; color: var(--ds-ink-2); max-width: 90ch; }
.ds-api-teil { margin: 14px 0 6px; font: 600 var(--ds-text-sm)/1.3 var(--ds-font); color: var(--ds-ink); }
.ds-api .ds-table th, .ds-api .ds-table td { padding: 6px 12px 6px 0; font-size: var(--ds-text-sm); vertical-align: top; }
.ds-api .ds-table td:first-child code { white-space: nowrap; }
.ds-api-code { display: inline-block; min-width: 36px; font: 600 var(--ds-text-sm)/1 var(--api-mono); }
.ds-api-code--ok { color: var(--ds-ok); } .ds-api-code--fehler { color: var(--ds-crit); }
.ds-api-versuch { margin-top: 14px; }
/* Konsole: steht oben oder in dem Endpunkt, an dem „Ausprobieren“ gedrückt wurde */
.ds-api-konsole { margin-top: 10px; padding: 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-surface-2); }
.ds-api-konsole :is(select, input[type="text"], textarea) { border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius); background: var(--ds-surface); font: 400 var(--ds-text-sm)/1.4 var(--api-mono); color: var(--ds-ink); }
.ds-api-konsole :is(select, input[type="text"]) { height: 36px; padding: 0 10px; }
.ds-api-konsole textarea { width: 100%; padding: 8px 10px; }
.ds-api-konsole :is(select, input, textarea):focus { outline: none; border-color: var(--ds-primary); box-shadow: var(--ds-focus-soft); }
/* Schemas */
.ds-api-schema { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-surface-2); }
.ds-api-schema + .ds-api-schema { margin-top: 8px; }
.ds-api-schema > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.ds-api-schema-body { padding: 4px 14px 14px; background: var(--ds-surface); border-top: 1px solid var(--ds-line); border-radius: 0 0 var(--ds-radius) var(--ds-radius); }
.ds-api [hidden] { display: none !important; }
@media (max-width: 680px) {
.ds-api-op > summary { flex-wrap: wrap; }
.ds-api-kurz { flex-basis: 100%; }
.ds-api-werkzeug .ds-settings-search input { width: 100%; }
}
/* Kleinere Bildschirme */
@media (max-width: 1100px) {
.ds-page { padding: 16px; }
.ds-kpi-value { font-size: var(--ds-text-lg); }
.ds-tabs { margin: 0 -16px; padding: 0 16px; }
}
@media (max-width: 640px) {
.ds-monogram { width: 52px; height: 52px; font-size: 1.25rem; }
.ds-title { font-size: var(--ds-text-lg); }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ══ Mobil: Handy und Tablet (1.208.0, Dev-Notiz #14) ══════════════════════
Unter 1024 px ist die Hauptnavigation ein Off-Canvas-Menü: aus dem Bild
geschoben, der Hamburger in der Kopfzeile holt sie über den Inhalt
(Schalter body.erp-nav-offen, Skript in layout.html.twig). `visibility`
nimmt die geschlossene Leiste aus Tab-Folge und Vorlesern — kein `inert`
nötig. Die Werte überschreiben sidebar.css (Kollegen-Datei, !important). */
.fx-nav-toggle, .erp-nav-zu, .erp-nav-schleier { display: none; }
@media (max-width: 1023.98px) {
.erp-sidebar {
position: fixed !important; left: 0; top: 0; bottom: 0;
width: min(300px, 86vw) !important; min-width: 0 !important; height: 100dvh !important;
z-index: 80 !important;
transform: translateX(-100%); visibility: hidden;
transition: transform .22s ease, visibility 0s linear .22s;
}
body.erp-nav-offen .erp-sidebar {
transform: none; visibility: visible;
transition: transform .22s ease;
box-shadow: 0 0 48px rgba(2, 6, 23, .45);
}
.erp-nav-schleier {
display: block; position: fixed; inset: 0; z-index: 75;
background: rgba(15, 23, 42, .5);
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.erp-nav-offen .erp-nav-schleier { opacity: 1; pointer-events: auto; }
/* hinter dem offenen Menü rollt die Seite nicht mit */
body.erp-nav-offen main { overflow: hidden !important; }
.fx-nav-toggle {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 40px; height: 40px; padding: 0; cursor: pointer;
border-radius: 10px; border: 1px solid var(--ds-line-strong);
background: var(--ds-surface); color: var(--ds-ink);
}
.fx-nav-toggle svg { width: 20px; height: 20px; }
.erp-nav-zu {
display: inline-grid; place-items: center; margin-left: auto; flex: 0 0 auto;
width: 40px; height: 40px; padding: 0; cursor: pointer;
border-radius: 10px; border: 1px solid var(--sidebar-border);
background: transparent; color: #CBD5E1;
}
.erp-nav-zu svg { width: 18px; height: 18px; }
.fx-nav-toggle:focus-visible, .erp-nav-zu:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
/* Kopfzeile: weniger Rand, die Suche nimmt den Platz */
.fx-topbar { padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
.fx-topbar > .erp-global-search { min-width: 0; }
.fx-topbar-meta { gap: 4px; }
}
@media (max-width: 640px) {
.fx-topbar kbd { display: none; }
.fx-topbar input[type="text"] { padding-right: 12px !important; }
}
@media (max-width: 1023.98px) {
/* Seitenrahmen schmaler (sidebar.css setzt 26/28 px bzw. 22 px) */
main.flex-1.overflow-auto > .p-6,
main.flex-1.overflow-auto > .px-6.py-6 { padding: 16px 14px 28px !important; }
/* Listenkarte: statt „bis zum Bildschirmrand ab ihrer Lage“ (am Handy oft
nur die Untergrenze 280 px, weil Kennzahlen davorstehen) so hoch wie der
Schirm unter Kopfzeile und Seitenkopf — man rollt die Seite, bis die
Liste oben steht, und darin die Zeilen mit festem Spaltenkopf. Die Karte
ist das Elternelement der Tabelle (list_view_controller). */
main :has(> table.lv-einzeilig) { max-height: calc(100dvh - 150px) !important; }
}
@media (max-width: 640px) {
/* Seitenkopf: läuft mit, darf aber nicht den halben Schirm nehmen */
.ds-seitenkopf { padding: 8px 0; gap: 8px 12px; margin-bottom: 14px; }
.ds-seitenkopf .ds-header-main { flex-basis: 100%; }
.ds-seitenkopf h1, .ds-seitenkopf .ds-title { font-size: 1.25rem !important; line-height: 1.25; }
.ds-seitenkopf .ds-header-actions { margin-left: 0; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
main:has(.ds-seitenkopf) { scroll-padding-top: 170px; }
}
@media (max-width: 639.98px) {
/* Raster ohne eigene Grundspalten (nur sm:/lg:-Varianten oder gar keine)
messen ihre Spur sonst nach dem Inhalt — eine breite Tabelle im
Rollbereich schob die ganze Seite auf (Profil, 467 px). Unter 640 px
greift keine sm:-Variante, die Regel nimmt also nichts weg. */
main .grid:not([class^="grid-cols-"]):not([class*=" grid-cols-"]) { grid-template-columns: minmax(0, 1fr); }
/* … und ihre Kinder dürfen schmaler werden als ihr Inhalt (min-width: auto hielt den Überstand) */
main .grid > * { min-width: 0; }
/* Knopfreihen und Kopfzeilen brechen um, statt über den Rand zu laufen
(Blätterleiste, Kopfaktionen, Knopfgruppen): wirkt nur, wo sie nicht passen */
main .flex.justify-between, main .flex.gap-1, main .flex.gap-2, main .flex.gap-3,
main .ds-header-actions, main .ds-card-head { flex-wrap: wrap; }
main .ds-header > .ds-header-actions { margin-left: 0; }
/* nicht die Kopfzeile: sie bleibt einzeilig (64 px — darauf steht der Seitenkopf) */
main .fx-topbar .flex, main .fx-topbar.flex { flex-wrap: nowrap; }
/* Umschalter (Zeitraum u. Ä.) bleibt einzeilig und wird wischbar */
main .ds-segment { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
}
/* ══ Mobil Stufe 2 (1.209.0, Dev-Notiz #14): Listen und Positionstabellen ══
Nur unter 1024 px — am Desktop ändert sich nichts. Ziel: „grundsätzlich
bedienbar“, kein Umbau zu Karten. */
@media (max-width: 1023.98px) {
/* Listen: die erste Spalte (Nummer) bleibt beim waagerechten Wischen
stehen; steht davor die Häkchen-Spalte (37 px, list_view_controller),
bleiben beide stehen. Kopfzellen kleben oben UND links (Ecke darüber). */
table.lv-einzeilig tr > :first-child { position: sticky; left: 0; z-index: 6; background-color: #fff; }
table.lv-einzeilig:has(tbody td:first-child input[type="checkbox"]) tr > :nth-child(2) {
position: sticky; left: 37px; z-index: 6; background-color: #fff; box-shadow: inset -1px 0 0 #e5e7eb;
}
table.lv-einzeilig:not(:has(tbody td:first-child input[type="checkbox"])) tr > :first-child { box-shadow: inset -1px 0 0 #e5e7eb; }
table.lv-einzeilig thead tr:first-child > :first-child,
table.lv-einzeilig:has(tbody td:first-child input[type="checkbox"]) thead tr:first-child > :nth-child(2) { z-index: 14; background-color: #f9fafb; }
table.lv-einzeilig thead tr[data-list-view-target="columnSearchRow"] > :first-child,
table.lv-einzeilig:has(tbody td:first-child input[type="checkbox"]) thead tr[data-list-view-target="columnSearchRow"] > :nth-child(2) { z-index: 13; }
/* Positionstabellen (Angebot, Auftrag, Rechnung, Bestellung): eigene
Mindestbreite wie am Desktop — sonst wird die Bezeichnung so schmal,
dass ein Langtext eine Zeile von 800 px Höhe macht — und die Karte
darum wischt waagerecht, nicht mehr der ganze Reiterbereich. */
main :has(> table[data-pos-tabelle]) { overflow-x: auto !important; }
/* die Bezeichnung (2. Spalte in allen vier) bekommt die Breite — eine
Mindestbreite der ganzen Tabelle verteilte sich auf alle Spalten */
main table[data-pos-tabelle] { min-width: 760px; }
main table[data-pos-tabelle] > thead > tr > :nth-child(2) { width: 24rem; min-width: 24rem; }
}
/* ── Speichern ist grün (1.257.0, Dev-Notiz #29) ─────────────────────────────
„Der Speichern-Button sollte immer grün sein im ganzen System. Blau für
Bearbeiten ist gut und Rot für Löschen.“ Jeder Speichern-Knopf trägt eine
der drei Klassen (tools/speichern_gruen_dn29_probe.php prüft alle Vorlagen):
ds-btn-save gefüllt — der Speichern-Knopf einer Maske, eines Dialogs
ds-btn-save-alt umrandet — Speichern als Nebenweg neben dem Hauptknopf
(„Als Entwurf speichern“, „Speichern und weitere“)
ds-link-save grüner Text — Speichern als Textverweis in einer Zeile
Doppelte Klasse + !important: die Brücke färbt bg-slate-800 mit
`main button.bg-slate-800 … !important` blau, das muss hier verlieren. */
:is(button, a, input, label).ds-btn-save.ds-btn-save {
background-color: var(--ds-save) !important; border-color: var(--ds-save) !important; color: #fff !important;
}
:is(button, a, input, label).ds-btn-save.ds-btn-save:hover { background-color: var(--ds-save-hover) !important; border-color: var(--ds-save-hover) !important; }
:is(button, a, input, label).ds-btn-save.ds-btn-save:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(21, 128, 61, .32) !important; }
:is(button, a, input, label).ds-btn-save-alt.ds-btn-save-alt {
background-color: var(--ds-surface) !important; border: 1px solid var(--ds-save-line) !important; color: var(--ds-save) !important;
}
:is(button, a, input, label).ds-btn-save-alt.ds-btn-save-alt:hover { background-color: var(--ds-ok-bg) !important; border-color: var(--ds-save) !important; }
:is(button, a).ds-link-save.ds-link-save { color: var(--ds-save) !important; }
:is(button, a).ds-link-save.ds-link-save:hover { color: var(--ds-save-hover) !important; }
/* ── „+ Neu“ in der Kopfzeile (1.258.0, Dev-Notiz #36) ──────────────────────────
Grundform aus sidebar.css (.fx-navtool > summary, 34 × 34); hier breit, mit
Schrift, in der Handlungsfarbe — der einzige gefüllte Knopf der Kopfzeile. */
.fx-navtool > summary.fx-neu-btn,
.fx-navtool[open] > summary.fx-neu-btn {
width: auto; gap: 6px; padding: 0 12px 0 9px; margin-right: 6px;
background: var(--ds-primary); color: #fff;
font: 500 var(--ds-text-sm)/1 var(--ds-font);
}
.fx-navtool > summary.fx-neu-btn:hover,
.fx-navtool[open] > summary.fx-neu-btn { background: var(--ds-primary-hover); color: #fff; }
.fx-navtool > summary.fx-neu-btn:focus-visible { outline: none; box-shadow: var(--ds-focus); }
.fx-navtool > summary.fx-neu-btn svg { width: 16px; height: 16px; }
.fx-neu-panel { width: 240px; }
.fx-neu-panel .fx-navtool-head + .fx-navtool-list { margin-bottom: 4px; }
/* Dialoge der Anwendung (1.259.0: Kurzanlage eines Partners) — Grundstil von
Tailwind nimmt