/* ============================================================ GRUNDREGELN.CSS – klare, feste Design-Bausteine (zuletzt geladen) ------------------------------------------------------------ Rundungen 8 px Felder, Knöpfe, kleine Flächen (--r-klein) 12 px Karten, Bereiche, Kacheln (--r-karte) 16 px Dialoge, Anmeldung (--r-dialog) 999 px Etiketten, Chips, Zähler (--r-pille) Schrift 11 · 12 · 13 · 14 · 16 · 18 · 20 px, große Zahlen 24/28/32/40 Abstände 4 · 8 · 12 · 16 · 24 px Schatten keine bei Karten (nur Rand) – nur Dialoge und Aufklapper Bewegung kein Springen, Wachsen oder Drehen beim Darüberfahren; nur Randfarbe/Hintergrund ändern sich Flächen einfarbig, keine Farbverläufe ============================================================ */ :root { --r-klein: 8px; --r-karte: 12px; --r-dialog: 16px; --r-pille: 999px; --fs-xs: 11px; --fs-s: 12px; --fs-m: 13px; --fs-n: 14px; --fs-l: 16px; --fs-xl: 18px; --fs-xxl: 20px; --ab-1: 4px; --ab-2: 8px; --ab-3: 12px; --ab-4: 16px; --ab-5: 24px; --schatten-dialog: 0 20px 48px color-mix(in srgb, var(--nacht-950) 18%, transparent); } /* Ruhig beim Darüberfahren: nichts springt, wächst oder dreht sich */ .thd-new:hover, .hd-bereich:hover, .workflow-card:hover, .kanban-card:hover, .se-kiste:hover, .es-konto:hover, .es-farbe:hover, .dashboard-action-btn:hover, .dark-mode-toggle:hover { transform: none; box-shadow: none; } /* Einfarbige Flächen statt Farbverläufe */ .workflow-card[class*="phase-"], body.dark-mode .workflow-card[class*="phase-"] { background: var(--paper); } .pqa-card { background: var(--accent-tint, var(--pal-senf-hell)); } /* Aufmerksamkeit ohne Dauer-Animation im Menü */ .nav-neu-badge { animation: none; } /* Symbol-Knöpfe bleiben immer rund bzw. quadratisch – auch in schmalen Spalten */ .action-btn { flex: none; box-sizing: border-box; aspect-ratio: 1 / 1; min-width: 0; padding: 0; } html[data-symbol="kreis"] .action-btn { width: 38px; min-width: 38px; height: 38px; } /* ============================================================ Farben aus Einstellungen → Layout → Farbzuordnung (Bereich „Elemente“, „Material & Lager“). Ohne Zuordnung gilt der Ersatzwert = bisherige Farbe. Nur im hellen Modus – der dunkle Modus behält seine eigenen Töne. ============================================================ */ /* Zähler und Neu-Punkte */ body:not(.dark-mode) :is(.nav-neu-badge, .db-zaehler, .mad-glocke b, .bn-punkt) { background: var(--el-zaehler, var(--danger, var(--pal-rot))); } body:not(.dark-mode) .notification-dot { background: var(--el-zaehler, var(--pal-rot)); } /* Personenbild, Firma/Lieferant, Material/Bestand */ html:not(.dark-mode) body:not(.dark-mode) .avatar-initials:not(.avatar-supplier):not(.avatar-material):not(.avatar-bestand):not(.te-symbol) { background: var(--el-personenbild-hell, var(--pal-kupfer-hell)); color: var(--el-personenbild-dunkel, var(--pal-koralle-dunkel)); box-shadow: inset 0 0 0 1px var(--el-personenbild-mittel, var(--pal-kupfer-mittel)); } html:not(.dark-mode) body:not(.dark-mode) .avatar-initials.avatar-supplier { background: var(--el-lieferant-hell, var(--pal-blau-hell)); color: var(--el-lieferant-dunkel, var(--pal-blau-dunkel)); box-shadow: inset 0 0 0 1px var(--el-lieferant-mittel, var(--pal-blau-mittel)); } html:not(.dark-mode) body:not(.dark-mode) .avatar-initials:is(.avatar-material, .avatar-bestand) { background: var(--el-materialbild-hell, var(--pal-senf-hell)); color: var(--el-materialbild-dunkel, var(--pal-senf-dunkel)); box-shadow: inset 0 0 0 1px var(--el-materialbild-mittel, var(--pal-senf-mittel)); } /* Kürzel */ html:not(.dark-mode) body:not(.dark-mode) :is(.ki-code, .ki-pl-code, .og-kuerzel, .og-kuerzel-beispiel b) { background: var(--el-kuerzel-hell, var(--pal-senf-hell)); color: var(--el-kuerzel-dunkel, var(--pal-senf-dunkel)); box-shadow: inset 0 0 0 1px var(--el-kuerzel-mittel, var(--pal-senf-mittel)); } /* Etikett Kontakttyp, verknüpfte Einträge */ body:not(.dark-mode) .badge.badge-kontakttyp { background: var(--el-kontakttyp-hell, var(--neutral-100)); border-color: var(--el-kontakttyp-mittel, var(--neutral-300)); color: var(--el-kontakttyp-dunkel, var(--pal-grau-dunkel)); } body:not(.dark-mode) .og-chip { background: var(--el-verknuepft-hell, var(--accent-tint, var(--gold-tint))); color: var(--el-verknuepft-dunkel, var(--ink, var(--nacht-700))); } /* Fortschrittsbalken (ohne eigene Bereichsfarbe) */ .thd-bar > span { background: var(--el-fortschritt, var(--accent-dark)); } .thd-hbar:not([style*="--we"]) .thd-hbar-spur span, .thd-hbar-spur span { background: var(--we, var(--el-fortschritt, var(--accent-dark))); } /* Lager */ body:not(.dark-mode) .badge.badge-in-stock { background: var(--el-lager-voll-hell, var(--pal-gruen-hell)); border-color: var(--el-lager-voll-mittel, var(--pal-gruen-mittel)); color: var(--el-lager-voll-dunkel, var(--pal-gruen)); } body:not(.dark-mode) .badge.badge-low-stock { background: var(--el-lager-knapp-hell, var(--pal-senf-hell)); border-color: var(--el-lager-knapp-mittel, var(--pal-senf-mittel)); color: var(--el-lager-knapp-dunkel, var(--pal-kupfer)); } body:not(.dark-mode) .badge.badge-out-of-stock { background: var(--el-lager-leer-hell, var(--pal-rot-hell)); border-color: var(--el-lager-leer-mittel, var(--pal-rot-mittel)); color: var(--el-lager-leer-dunkel, var(--pal-rot)); } /* ============================================================ Rollen aus Einstellungen → Farben (Bereich „Grundelemente“). Standard = Hauptfarbe Gold (--gold…, gesetzt aus FARBEN „Reich Gottes“). --el--text: Schrift auf der gefüllten Farbe (hell/dunkel automatisch) ============================================================ */ :root { --accent-dark: var(--el-akzent, var(--gold-mittel)); } :root.dark-mode, body.dark-mode { --accent-dark: var(--el-akzent, var(--gold)); } .btn-primary, .btn-submit { background: var(--el-hauptknopf, var(--gold)); border-color: var(--el-hauptknopf, var(--gold)); color: var(--el-hauptknopf-text, var(--neutral-800)); } .btn-primary:hover, .btn-submit:hover { background: color-mix(in srgb, var(--el-hauptknopf, var(--gold)) 88%, #000); border-color: color-mix(in srgb, var(--el-hauptknopf, var(--gold)) 88%, #000); color: var(--el-hauptknopf-text, var(--neutral-800)); } .nav-item.active, .nav-item-parent.active { background-color: var(--el-menue-aktiv, var(--gold)); color: var(--el-menue-aktiv-text, var(--neutral-800)); } .nav-item.active:hover, .nav-item-parent.active:hover { background-color: color-mix(in srgb, var(--el-menue-aktiv, var(--gold)) 92%, #000); color: var(--el-menue-aktiv-text, var(--neutral-800)); } .tab-button.active { color: var(--el-reiter-aktiv, var(--gold)); border-bottom-color: var(--el-reiter-aktiv, var(--gold)); } html[data-symbol="kreis"] .action-btn { background: var(--el-symbolknopf-hell, var(--accent-tint)); color: var(--el-symbolknopf, var(--accent-dark)); } html[data-symbol="kreis"] .action-btn:hover:not(:disabled) { background: var(--el-symbolknopf, var(--login-background)); color: var(--el-symbolknopf-text, #fff); } html[data-symbol="kreis"] .action-btn:is([data-delete], [data-loeschen], [title*="öschen"]) { background: var(--el-loeschen-hell, var(--danger-tint, var(--pal-rot-hell))); color: var(--el-loeschen, var(--danger, var(--pal-rot))); } html[data-symbol="kreis"] .action-btn:is([data-delete], [data-loeschen], [title*="öschen"]):hover:not(:disabled) { background: var(--el-loeschen, var(--danger, var(--pal-rot))); color: var(--el-loeschen-text, #fff); } .thd-new { --we: var(--el-kachelsymbol, var(--accent-dark)); } /* Dunkler Modus: Hinweisleiste im Material-Dashboard gedämpft aus der Bestellfarbe */ body.dark-mode .mad-hinweis { background: color-mix(in srgb, var(--el-bestellung-neu, var(--pal-blau)) 20%, var(--nacht-800)); border-color: color-mix(in srgb, var(--el-bestellung-neu, var(--pal-blau)) 45%, var(--nacht-800)); color: var(--pal-anthrazit-hell); } /* Mail-Reiter: kleines Brief-Symbol vor der Beschriftung (Einladung, Erinnerung, Ablauf) */ .tab-button .tab-symbol { font-size: 16px; text-transform: none; letter-spacing: normal; vertical-align: -3px; margin-right: 5px; opacity: .8; } .tab-button.active .tab-symbol { opacity: 1; } /* ---------- Werkzeugleiste über Tabellen (wie Produkte) ---------- links die Suche, rechts Filter · Schalter · Knöpfe, darunter die Filter-Plaketten in einer eigenen, vollen Zeile */ .toolbar { flex-wrap: wrap; row-gap: 14px; } .toolbar > .toolbar-chips-zeile { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; width: 100%; margin: 0; } .toolbar > .toolbar-chips-zeile:empty { display: none; } .toolbar > .toolbar-left { min-width: 240px; } /* lieber umbrechen als die Suche überdecken */ .toolbar > .toolbar-right { margin-left: auto; } /* umgebrochen: rechtsbündig bleiben */ :where(.toolbar-right .funktionen-container) > select { width: auto; min-width: 160px; } /* Werkzeugleisten: Suche, Auswahlfelder, Schalter und Knöpfe gleich hoch */ :root { --h-leiste: 44px; } :is(.toolbar, .la-filter) :is(select, .btn, .suchfeld-container input) { height: var(--h-leiste); min-height: var(--h-leiste); box-sizing: border-box; } :is(.toolbar, .la-filter) .btn { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; } :is(.toolbar, .la-filter) select { padding-top: 0; padding-bottom: 0; } /* Geschäftsjahr-Auswahl in der Kopfzeile (nur auf Seiten mit Belegen) */ .gj-wahl { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; padding: 0 4px 0 12px; height: 38px; border: 1px solid var(--accent-dark); border-radius: var(--r-klein, 8px); background: var(--accent-tint, var(--paper)); cursor: pointer; } .gj-wahl[hidden] { display: none; } .gj-wahl .material-icons { font-size: 18px; color: var(--accent-dark); } .gj-wahl select { border: 0; background-color: transparent; height: 36px; padding: 0 28px 0 2px; font-weight: 600; font-size: 15px; color: var(--ink); box-shadow: none; min-width: 0; width: auto; cursor: pointer; } .gj-wahl select:focus { outline: none; box-shadow: none; } @media (max-width: 768px) { .gj-wahl { margin-left: auto; height: 34px; padding-left: 8px; } .gj-wahl select { height: 32px; font-size: 14px; } }