/* * Gemeinsames Basis-Stylesheet fuer den internen Bereich (Abschnitt 16: * WCAG-2.1-Konformitaet Stufe AA). * * Maßgebliche Quelle für Regeln und Komponenten: Design-Guide v0.3 (Vault: * 6. Projekte/Software-Standards/Design-Guide v0.3.md). Werte ausschließlich * aus tokens.css, Bausteine siehe auch komponenten.css (Design-Guide v0.3, * Teil 1 Abschnitt 5). Bei Widerspruch zwischen Guide und Code gilt der Guide. * * Fuenfte Fassung (31.08.2026, praezisiert nach Screenshot-Vergleich): * Markus' Rueckmeldung war eindeutig -- die vierte Fassung (Buttons/Karten * nur an das alte System ANGELEHNT) sah "ganz und gar nicht identisch" aus. * Sein Auftrag wörtlich: "guck dir an wie das Original geschrieben ist ... * das komplette Design kannst du ja komplett übernehmen einfach." Deshalb * jetzt ein echter, buchstäblicher Import statt einer Neuinterpretation: * * - tokens.css ist 1:1 aus app.marktmitsystem.de/src/web/static/web/ * tokens.css kopiert (siehe webapp/static/webapp/tokens.css, vor dieser * Datei im verlinkt) -- selbe Farben, Schatten, Radien, Abstände, * Typografie-Skala, keine eigene Annäherung mehr. * - Die selbstgehostete Schrift "Manrope Variable" (samt Lizenzdatei) ist * 1:1 aus demselben Ordner kopiert (webapp/static/webapp/fonts/). * - Die Namen unten (--bg, --text, --edeka-blue, --radius, --shadow-card, …) * bleiben als Aliase bestehen, damit nicht jede einzelne Regel umbenannt * werden musste -- sie zeigen jetzt aber direkt auf die echten Tokens * (var(--color-brand-600) statt eines eigenen Hex-Werts), nicht mehr auf * selbst geschätzte Werte. * - Button-, Karten-, Aufgaben- und Kennzahlen-Kacheln sind jetzt * buchstäblich dieselbe Eigenschaftsliste wie .btn/.btn--primary/.task/ * .stat-card in app.css dort (siehe Kommentare an den jeweiligen Stellen * unten) -- nur die Selektornamen sind andere, weil die Templates hier * auf rohen HTML-Elementen statt auf .btn/.card-Klassen aufbauen. * * Bewusst NICHT übernommen (siehe Rückmeldung Markus, 31.08.2026 vorher): * die linke Sidebar-Navigation des alten Systems -- die Navigation oben * ist eine eigene, bereits getroffene UX-Entscheidung, kein Versehen. * Ebenso keine Funktionsänderung, nur Aufmachung. */ * { box-sizing: border-box; } html { overflow-x: hidden; height: 100%; } :root { /* Aliase auf die echten Design-Tokens aus tokens.css -- Namen bleiben bestehen, Werte kommen jetzt 1:1 aus dem alten System. */ --bg: var(--color-surface); --bg-alt: var(--color-surface-alt); --bg-card: var(--color-surface); --text: var(--color-ink); --text-dim: var(--color-ink-muted); --edeka-blue: var(--color-brand-600); --edeka-blue-dark: var(--color-brand-700); --edeka-blue-tint: var(--color-brand-100); --border: var(--color-line); --border-strong: var(--color-line-strong); --button-bg: var(--color-surface); --button-bg-hover: var(--color-surface-alt); --button-text: var(--color-ink); --button-border: var(--color-line-strong); --button-primary-bg: var(--color-brand-600); --button-primary-bg-hover: var(--color-brand-700); --button-primary-text: #ffffff; --danger-bg: var(--color-danger-100); --danger-text: var(--color-danger-700); --danger-border: var(--color-danger-500); /* ENTSCHIEDEN 29./30.09.2026 (Markus, Design-Guide v0.3 §5.3): Achtung- Hinweis nutzt dasselbe Gold wie Personalakten/Uhr-Symbol statt eines eigenen dritten Gelbtons, Schrift Anthrazit OHNE Blaustich (kein --color-ink/Navy -- Markus wollte das Marken-Blau bewusst aus dem Warnkasten heraushalten). War bis hierher nie aus dem Komponenten- katalog-Entwurf in die echte Software uebertragen worden -- reiner Nachvollzug einer laengst getroffenen Entscheidung, keine neue. */ --warn-bg: var(--color-gold-100); --warn-text: var(--color-anthrazit); --warn-border: var(--color-gold-700); /* Ergaenzt 07.09.2026 (UI-Ueberarbeitung Eintrittsvorgang-Detailseite): Bis hierhin gab es nur --danger- und --warn-Aliase -- .messages faerbte dadurch AUSNAHMSLOS jede Meldung rot, auch messages.success(). Erst mit diesen beiden zusaetzlichen Aliasen (dieselbe Namensform, dieselbe Tokens.css-Quelle) kann eine Erfolgsmeldung tatsaechlich gruen aussehen -- siehe .messages li.success weiter unten. GEFUNDEN 29.09.2026 (Nachtschicht): Dieser Kommentar enthielt an dieser Stelle woertlich Stern-Schraegstrich hintereinander (in "--danger- Stern Schraegstrich --warn-Stern"), was den Kommentar mitten im Text vorzeitig beendet hat -- alles bis zum naechsten Semikolon (also inklusive der --success-bg-Zeile selbst) wurde dadurch als eine einzige ungueltige CSS-Deklaration verworfen. --success-bg war seit dem 07.09.2026 in der echten Software immer leer/transparent, jede Erfolgsmeldung (.messages li.success) unsichtbar auf weissem Grund. Regel fuer jeden kuenftigen Kommentar in CSS-Dateien: Stern und Schraegstrich duerfen im Fliesstext nie direkt aufeinander folgen. */ --success-bg: var(--color-success-100); --success-text: var(--color-success-700); --success-border: var(--color-success-500); --info-bg: var(--color-info-100); --info-text: var(--color-info-700); --info-border: var(--color-info-500); --radius: var(--radius-md); --shadow-card: var(--shadow-1); --shadow-card-hover: var(--shadow-2); --shadow-primary: var(--shadow-brand); --transition: var(--dur-2) var(--ease-standard); /* Zwei bewusste, lokale Abweichungen vom 1:1-Import (01.09.2026, Auftrag Markus) -- tokens.css bleibt dabei unveraendert (bleibt die exakte Kopie), nur hier ueberschrieben: 1. Schrift: kein eigens gehostetes Manrope mehr, sondern der Systemschrift-Stapel -- zeigt auf Mac echtes San Francisco, auf Windows echtes Segoe UI, ohne eine einzige Schriftdatei auszuliefern. Das ist der rechtssichere Weg: Apples San Francisco und Microsofts Segoe UI duerfen NICHT als eigene Dateien eingebettet werden (beide Lizenzen sind auf die jeweils eigene Plattform beschraenkt) -- der Systemschrift-Stapel laedt dagegen gar keine Datei, er fragt nur das Betriebssystem nach seiner Standardschrift. Rechtlich unbedenklich, siehe Chat-Erklaerung. 2. Radius: minimal eckiger als das Original (0.75rem -> 0.625rem bei Karten, Korrektur 01.09.2026 -- erster Versuch ging in die falsche Richtung, weicher statt eckiger). */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --radius-lg: 0.625rem; } /* Footer immer am unteren Bildschirmrand statt mitten im Bild auf kurzen Seiten (01.09.2026, Auftrag Markus) -- klassisches Sticky-Footer-Muster: body ist eine Flex-Spalte ueber die volle Bildschirmhoehe, main waechst (flex: 1 0 auto) und schiebt footer damit zuverlaessig ans Ende, egal wie wenig Inhalt eine Seite hat. Bei viel Inhalt scrollt die Seite ganz normal weiter, der Footer bleibt dann am Seitenende (nicht am Bildschirmrand "kleben") -- kein position:fixed, das wuerde Inhalt dauerhaft ueberdecken. */ body { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text); background: var(--bg); margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } main { flex: 1 0 auto; max-width: var(--content-max, 64rem); margin: 0 auto; padding: 1.5rem 1.5rem 3rem 1.5rem; width: 100%; } /* Kopfzeile: bewusst eigenständig (kein Vorbild im alten System, das dort eine linke Sidebar statt einer oberen Leiste hat -- diese UX-Entscheidung bleibt unverändert, siehe Dateikopf). Der Verlauf und die Farbwahl sind seit 01.09.2026 trotzdem 1:1 aus der Sidebar des alten Systems uebernommen (app.css: ".app-sidebar { background: linear-gradient(180deg, var(--color-brand-800) 0%, var(--color-brand-900) 55%); }") -- brand-900 ist laut tokens.css dort ausdruecklich als "tiefste Markenflaeche" dokumentiert, brand-800 als "Verlaufspartner". Genau das dunkelste Blau aus dem Logo, wie gewuenscht, statt der helleren Leitfarbe brand-600. */ header { background: linear-gradient(180deg, var(--color-brand-800) 0%, var(--color-brand-900) 55%); padding: 1rem 1.5rem; box-shadow: var(--shadow-2); /* 01.09.2026, Liquid-Glass-Umbau: explizit angehoben. Die Glaskapseln im Menue benutzen backdrop-filter, was wie transform/filter/isolation einen eigenen CSS-Stapelkontext erzwingt -- das reicht theoretisch, macht die Reihenfolge gegenueber
(ein spaeteres, aber unpositioniertes Geschwisterelement) in der Praxis aber uneindeutig genug, dass das Einstellungen-Dropdown im Test von den Dashboard- Kacheln darunter verdeckt wurde. Ein expliziter z-index auf dem
selbst raeumt jede Zweideutigkeit aus, unabhaengig davon, was innerhalb des Headers an Stapelkontexten entsteht. */ position: relative; z-index: 10; } header > * { max-width: var(--content-max, 64rem); margin: 0 auto; } header p { margin: 0.75rem 0; color: var(--color-brand-200); font-size: var(--text-sm); } footer { flex-shrink: 0; color: var(--text-dim); font-size: var(--text-sm); border-top: 1px solid var(--border); padding: 1.25rem 1.5rem; background: var(--bg-alt); } /* Ueberschriften: identische Werte wie h1/h2/h3 in app.css (Abschnitt "Reset/Basis") -- Gewicht black statt bold, enge Laufweite, kein erzwungener Blauton (der wirkte im Vergleich zu bunt; das Original faerbt Ueberschriften nicht extra ein, sie tragen die normale Fliesstextfarbe). */ h1, h2, h3 { line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text); } h1 { font-size: var(--text-2xl); font-weight: var(--weight-black); margin: 0 0 var(--space-4); } h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: var(--space-6) 0 var(--space-3); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-offset); } header a:focus-visible, header button:focus-visible { outline-color: #ffffff; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--edeka-blue); color: #ffffff; font-weight: 700; padding: 0.75rem 1rem; border-radius: 0 0 var(--radius-md) 0; z-index: var(--z-toast, 100); } .skip-link:focus { left: 0; top: 0; } a { color: var(--edeka-blue); text-underline-offset: 2px; transition: color var(--transition); } a:hover { color: var(--edeka-blue-dark); } /* --- Buttons ----------------------------------------------------------- */ /* 31.08.2026: buchstäblich dieselbe Eigenschaftsliste wie .btn/button in app.css (Abschnitt "Buttons") -- Grundform neutral/grau, Aktiv-Zustand staucht leicht (scale statt Verschiebung, genau wie im Original). Die primäre Formular-Aktion (immer type="submit") entspricht .btn--primary dort: gefüllte Markenfläche, Schatten, dunklerer Ton beim Hover. */ button, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--button-bg); color: var(--button-text); border: 1px solid var(--button-border); border-radius: var(--radius-md); padding: .55rem 1.05rem; font: inherit; font-weight: var(--weight-semibold); cursor: pointer; min-height: 2.5rem; box-shadow: var(--shadow-1); transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--dur-1) var(--ease-standard); } button:hover, input[type="submit"]:hover { background: var(--button-bg-hover); border-color: var(--color-ink-subtle); } button:active, input[type="submit"]:active { transform: scale(.985); } button[type="submit"], input[type="submit"] { background: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--edeka-blue-dark); font-weight: var(--weight-semibold); box-shadow: var(--shadow-1); } button[type="submit"]:hover, input[type="submit"]:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text); border-color: var(--edeka-blue-dark); box-shadow: var(--shadow-brand); } .formular-aktionen a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .55rem 1.05rem; border: 1px solid var(--button-border); border-radius: var(--radius-md); background: var(--button-bg); color: var(--button-text); text-decoration: none; font-weight: var(--weight-semibold); box-shadow: var(--shadow-1); transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition); } .formular-aktionen a:hover { background: var(--button-bg-hover); border-color: var(--color-ink-subtle); } /* --- .knopf: Link, der wie ein Button aussieht ------------------------- Kiosk-Feinschliff (Markus, 09.10.2026): "wieder Text-Links -- wir haben ja eindeutig einen Komponentenkatalog." Die Klasse "knopf" wurde an mehreren Stellen bereits VERWENDET (zeiterfassung/start.html, kiosk/koppeln.html, geraete/oeffentlich/*.html, kuehlkontrolle/ oeffentlich/*.html), aber nie fuer interne Seiten definiert -- dort lud nichts eine passende Regel, der Link blieb reiner, unformatierter Text. Dieselbe Optik wie die bereits bestehende .formular-aktionen a (Sekundaer-Button-Look), hier aber als eigenstaendige, ueberall ladbare Klasse -- behebt die Luecke an jeder Stelle, an der .knopf schon stand, nicht nur im Kiosk-Feinschliff. */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.5rem; padding: .55rem 1.05rem; border: 1px solid var(--button-border); border-radius: var(--radius-md); background: var(--button-bg); color: var(--button-text); text-decoration: none; font-weight: var(--weight-semibold); box-shadow: var(--shadow-1); transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition); } .knopf:hover { background: var(--button-bg-hover); border-color: var(--color-ink-subtle); color: var(--button-text); } /* Primaer-Variante: dieselbe Markenflaeche wie button[type="submit"]. */ .knopf--primaer { background: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--edeka-blue-dark); } .knopf--primaer:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text); border-color: var(--edeka-blue-dark); box-shadow: var(--shadow-brand); } /* Gefahr-Variante fuer echte, destruktive Aktionen (Loeschen) -- UI- Feedback 07.09.2026. Selektor bewusst mit dem Attribut-Selektor verdoppelt (statt nur .button--gefahr), damit die Spezifitaet sicher ueber der bereits bestehenden button[type="submit"]-Grundfarbe liegt, unabhaengig von der Regel-Reihenfolge im Stylesheet. */ button[type="submit"].button--gefahr, input[type="submit"].button--gefahr { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } button[type="submit"].button--gefahr:hover, input[type="submit"].button--gefahr:hover { background: var(--danger-border); color: #fff; border-color: var(--danger-border); } /* Sekundaere Formular-Aktion (z. B. "Zwischenspeichern" neben "Weiter") -- 15.09.2026, Auftrag Markus Koopmann: die Hauptaktion soll optisch sofort ins Auge stechen ("generelles UX Design Element"), eine Nebenaktion nicht denselben Flaechenanspruch wie die primaere blaue Formularfarbe haben. Faellt zurueck auf dieselbe neutrale Grundfarbe wie ein button OHNE type="submit" weiter oben -- kein neues Farbsystem. Gleiches Selektor-Verdopplungsmuster wie .button--gefahr, aus demselben Grund (Spezifitaet sicher ueber der button[type="submit"]-Grundfarbe, unabhaengig von der Regel-Reihenfolge im Stylesheet). */ button[type="submit"].button--sekundaer, input[type="submit"].button--sekundaer { background: var(--button-bg); color: var(--button-text); border-color: var(--button-border); box-shadow: none; } button[type="submit"].button--sekundaer:hover, input[type="submit"].button--sekundaer:hover { background: var(--button-bg-hover); color: var(--button-text); border-color: var(--color-ink-subtle); } /* --- Klickbare Tabellenzeile ohne JavaScript ------------------------------ UI-Feedback 07.09.2026 (Markus: "hier ist tatsächlich nur der Name anklickbar"). Reiner CSS-Trick statt onclick-Handler ("stretched link"): die Zeile bekommt position:relative als Positionierungskontext, ein unsichtbares ::after-Pseudoelement des Links wird per position:absolute; inset:0 darueber gelegt -- NICHT der Link selbst. Der Link bleibt dadurch ganz normal im Textfluss SEINER EIGENEN Zelle (sichtbarer Name an korrekter Stelle, korrekte Zeilenhoehe), nur sein unsichtbares ::after spannt sich unabhaengig davon ueber die gesamte Zeile auf. Korrektur 07.09.2026, noch am selben Abend: Die erste Fassung setzte position:absolute direkt auf den Link -- dessen sichtbarer Text riss dadurch aus seiner Spalte heraus und ueberlagerte linksbuendig die ganze Zeile (in der Eintrittsvorgaenge-Liste kaum aufgefallen, weil der Link dort zufaellig in der ersten Zelle sitzt und der Text fast spaltenbreit ist -- bei "Mitarbeiter" mit einer Personalnummer-Spalte davor sofort sichtbar als Textueberlagerung). Live auf Staging bemerkt, bevor es produktiv ausgerollt wurde. Genau EIN echter Link pro Zeile, sein Text ist der zugaengliche Name der ganzen Zeile fuer Screenreader -- kein zweiter, separat sichtbarer Link noetig. Weitere eigenstaendig klickbare Elemente in derselben Zeile (z. B. ein Loeschen-Button) brauchen zusaetzlich die Klasse "ueber-zeilen-link", sonst faengt der unsichtbare Zeilen-Link ihren Klick ab. */ tr.klickbare-zeile { position: relative; cursor: pointer; } tr.klickbare-zeile:hover { background: var(--bg-alt); } /* Korrektur 14.09.2026 (Markus, live auf mehreren Listenseiten: "der Text ist blau unterstrichen, sieht aus wie ein Textlink, obwohl die ganze Box schon zum Anklicken ist" -- .zeilen-link hatte bisher KEINE eigene Basis-Regel, nur ::after/:hover/:focus-visible weiter unten. Der bekam dadurch ungestylt die Browser-Standardoptik (blau, unterstrichen), obwohl er als reines Stretched-Link-Element fuer die ganze Zeile gedacht ist, nicht als eigenstaendig erkennbarer Link. Systemweiter Fix -- betrifft automatisch jede Stelle, die .zeilen-link bereits verwendet (Mitarbeiter-, Beschaeftigungs-, Dokumentenliste etc.), kein Einzelfall-Patch. */ tr.klickbare-zeile .zeilen-link { color: inherit; text-decoration: none; font-weight: inherit; } tr.klickbare-zeile .zeilen-link::after { content: ""; position: absolute; inset: 0; } tr.klickbare-zeile .zeilen-link:focus-visible { outline: 2px solid var(--edeka-blue); outline-offset: -2px; } tr.klickbare-zeile .ueber-zeilen-link { position: relative; z-index: 1; } .knopf-loeschen { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--danger-border); border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger-text); text-decoration: none; font-size: var(--text-lg); line-height: 1; } .knopf-loeschen:hover { background: var(--danger-border); color: #fff; } .kiosk button, .kiosk input[type="submit"] { min-height: 56px; min-width: 56px; font-size: var(--text-lg); } /* Ergaenzt 03.09.2026 (Team-Review, Fund von Pia UND Nina unabhaengig): Checkboxen blieben am Kiosk-Touchscreen bei nativer Kleingroesse (1.25rem) -- die 56px-Regel oben deckt nur Buttons ab. Vergroessert die Checkbox selbst und macht die ganze Label-Zeile klickbar, ohne form.as_p anzufassen. */ .kiosk input[type="checkbox"] { width: 32px; height: 32px; } .kiosk form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; cursor: pointer; } /* Ueberarbeitet 07.09.2026 (Markus' Live-Feedback: "Meilenstein abgehakt" erschien in Rot -- eine Bestaetigung muss aber gruen sein, Rot bleibt ausschliesslich Fehlern vorbehalten). Vorher hing Farbe/Rahmen fest an .messages selbst -- JEDE Meldung sah automatisch wie ein Fehler aus, unabhaengig vom tatsaechlichen Level. Django haengt jeder Meldung ueber {{ m.tags }} bereits die passende Stufe an (success/error/warning/info/ debug, siehe MESSAGE_TAGS) -- die Vorlage setzt diese Klasse jetzt direkt auf das
  • , hier wird nur noch je Klasse eingefaerbt. */ .messages { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .messages li { padding: var(--space-3) var(--space-4); border-left: .25rem solid var(--color-line-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--bg-alt); color: var(--text); } .messages li::before { font-weight: bold; } .messages li.success::before { content: "Erledigt: "; } .messages li.error::before { content: "Fehler: "; } .messages li.warning::before { content: "Achtung: "; } .messages li.info::before, .messages li.debug::before { content: "Hinweis: "; } .messages li.success { border-left-color: var(--success-border); background: var(--success-bg); color: var(--success-text); } .messages li.error { border-left-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-text); } .messages li.warning { border-left-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-text); } /* Formular-Warnhinweis (22.09.2026, Austritt-Modul): gleiche Optik wie .messages li.warning oben, aber als eigenständiger Block innerhalb eines Formulars nutzbar, nicht nur als Django-messages-Eintrag. */ .formular-warnung { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border-left: .25rem solid var(--warn-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--warn-bg); color: var(--warn-text); } .messages li.info, .messages li.debug { border-left-color: var(--info-border); background: var(--info-bg); color: var(--info-text); } .banner-testumgebung { background: var(--warn-bg); border-bottom: 1px solid var(--warn-border); color: var(--warn-text); padding: 0.6rem 1rem; font-weight: var(--weight-semibold); text-align: center; } /* Tuerkise Markt-mit-System-Markenfarbe statt der allgemeinen Warnfarbe -- Markus, 16.09.2026: der Demo-Tour-Banner soll optisch zur Marketing-Demo passen (dort --accent:#2fd3c9, siehe "Markt mit System — Tour-Demo"). */ .banner-testumgebung--demo-tour { background: #2fd3c9; border-bottom: 1px solid #1fa89f; color: #04211e; } /* Geführter Einstieg fuer leere/neue Konten (seit 28.08.2026) -- EINE klare naechste Aktion statt der vollen Kachel-Wand, siehe webapp/services.py:compute_onboarding_hint(). Kein Vorbild im alten System (das kennt dieses Muster nicht), nur Tokens angeglichen. */ .einstieg { background: var(--bg-alt); border: 2px solid var(--edeka-blue); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); box-shadow: var(--shadow-1); } .einstieg p { margin: 0; font-weight: var(--weight-semibold); font-size: 1.05rem; } .einstieg a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .55rem 1.05rem; border: 2px solid var(--edeka-blue); border-radius: var(--radius-md); background: #ffffff; color: var(--edeka-blue); text-decoration: none; font-weight: var(--weight-bold); transition: background-color var(--transition), box-shadow var(--transition); white-space: nowrap; } .einstieg a:hover { background: var(--bg-alt); box-shadow: var(--shadow-brand); } /* Team-Runde 01.10.2026 (Pia): .einstieg--dauerhaft enthaelt seit heute nur noch einen einzelnen Link ("Neue Person aufnehmen", ohne separaten Beschreibungstext) -- die schwere .einstieg-Grundoptik (2px-Rahmen, Schatten, flex space-between fuer Text+Button nebeneinander) war fuer diesen Fall gebaut und wirkte dadurch wie der einmalige Onboarding- Hinweis direkt darueber, obwohl beide funktional unterschiedlich sind. Jetzt ein einzelner, leichterer Knopf statt einer vollen Karte. */ .einstieg--dauerhaft { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; display: block; } .einstieg--dauerhaft a { background: var(--edeka-blue); color: #ffffff; border-color: var(--edeka-blue); } .einstieg--dauerhaft a:hover { background: var(--color-brand-700, var(--edeka-blue)); } /* Mitarbeiterereignisse-Hub (seit 28.08.2026) -- kein Vorbild im alten System, nur Tokens angeglichen (Karten-Look wie .stat-card dort). */ .ereignis-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); } .ereignis-karte { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); text-decoration: none; color: var(--text); box-shadow: var(--shadow-1); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } a.ereignis-karte:hover { border-color: var(--edeka-blue); box-shadow: var(--shadow-2); transform: translateY(-2px); } .ereignis-karte h2 { margin: 0 0 var(--space-2); font-size: 1.05rem; font-weight: var(--weight-bold); color: var(--edeka-blue); } .ereignis-karte p { margin: 0; color: var(--text-dim); font-size: var(--text-sm); } .ereignis-karte-geplant { opacity: 0.7; } .ereignis-karte-geplant h2 { color: var(--text-dim); } .ereignis-status { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 0.15rem 0.6rem; margin-left: var(--space-2); vertical-align: middle; } /* --- Badges -------------------------------------------------------------- */ /* Buchstäblich dieselbe Eigenschaftsliste wie .badge in app.css (Abschnitt "Badges"): Tönung + Punkt tragen die Farbe, Rahmen bleibt zurück. Modifier-Klasse ist direkt der Status-Slug (badge--draft, badge-- in_progress, ...) -- keine Template-Logik noetig, der Wert kommt 1:1 aus OnboardingStatus. */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: .15rem .55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.6; border: 1px solid transparent; white-space: nowrap; } .badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; } .badge--draft, .badge--cancelled, .badge--contact_captured { background: var(--color-surface-alt); color: var(--color-ink-muted); border-color: var(--color-line); } .badge--in_progress, .badge--contract_generation { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-200); } .badge--under_review, .badge--changes_requested { background: var(--color-warn-100); color: var(--color-warn-700); border-color: var(--color-warn-200); } .badge--approved, .badge--completed, .badge--succeeded { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-200); } .badge--queued { background: var(--color-surface-alt); color: var(--color-ink-muted); border-color: var(--color-line); } /* Ueberfaellige Eintrittsvorgaenge (Markus, 16.09.2026, Strategiemeeting Punkt 7) -- eigene, auffaellige Farbe statt der Status-Farbtoene oben, weil es hier NICHT um den Status selbst geht, sondern um ein separates Warnsignal ("hier ist laenger nichts passiert als erwartet"). */ .badge--danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); } .badge--running { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-200); } .badge--failed { background: var(--color-danger-100); color: var(--color-danger-700); border-color: var(--color-danger-200); } /* AccidentCaseStatus (deutsche Slugs, eigenes Namensschema) */ .badge--entwurf { background: var(--color-surface-alt); color: var(--color-ink-muted); border-color: var(--color-line); } .badge--eingereicht { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-200); } /* Mitarbeiterkreis aus dem Pepper-Export (employees/models.py, PepperReferenceData) -- Phase 3, Auftrag 03.09.2026. Slug kommt ueber den Django-Standardfilter |slugify direkt aus dem Rohwert (z. B. "Aushilfen kfm" -> "aushilfen-kfm"), keine eigene Kategorisierung. "aushilfen-kfm" ist im echten Datenbestand vom 02.09.2026 der Wert, der geringfuegiger Beschaeftigung/Schueler-Aushilfen am naechsten kommt (kein Wert "Schueler"/"geringfuegig" im Export selbst vorhanden, siehe Vault-Projektnotiz) -- deshalb bewusst hervorgehoben (warn-Farbe), damit diese Gruppe in der Liste auf einen Blick auffaellt. Ein noch nicht bekannter Mitarbeiterkreis-Wert bekommt einfach keine Farbe (nur der neutrale .badge-Rahmen) -- kein Fehler, kein fehlender Text. */ .badge--aushilfen-kfm { background: var(--color-warn-100); color: var(--color-warn-700); border-color: var(--color-warn-200); } .badge--stundenloehner-kfm, .badge--auszubildende-kfm { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-200); } .badge--angestellte, .badge--monatsloehner, .badge--leitende-angest { background: var(--color-surface-alt); color: var(--color-ink-muted); border-color: var(--color-line); } /* --- Dashboard: Aufgaben vor Kennzahlen ----------------------------------- */ /* Aufbau und Eigenschaften 1:1 aus app.css uebernommen (dort .board-section/ .task/.stat-card, hier auf den bestehenden Kachel-Klassen von webapp/templates/webapp/dashboard.html nachgebaut, weil dort keine .card- Klassen verwendet werden). Was zu tun ist, steht oben und traegt Gewicht (linker Rand, Icon). Was nur eine Zahl ist, steht darunter, kleiner und mit einem schmalen Akzentstrich oben statt links. */ #kacheln { padding: 0; margin: 0 0 var(--space-5); list-style: none; } .kachel-abschnitt-label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-subtle); margin: var(--space-6) 0 var(--space-3); } .kachel-abschnitt-label:first-child { margin-top: 0; } /* Fund 01.10.2026 (Markus: "Aktuelles" grafisch besser aufarbeiten, Team- Runde mit Pia/Nina): Statt bis zu 14 einzelne "0"-Kacheln (reine Entwarnung, siehe DashboardTile.clear_when_zero) eine einzige, gruene Sammelzeile -- mit vollstaendiger Liste darunter, nichts wird versteckt. Bereits vorab als Entwurf gezeigt und von Markus nicht beanstandet (UX-Redesign-Runde-Notiz, 01.10.2026). */ /* Vierte Runde 01.10.2026 (Markus: "warum steht das da ueberhaupt, welchen Sinn hat es, was waere ein Element mit echtem Nutzen" -- Hinterfrage- alles-Schritt vor weiterer Farbkorrektur). Antwort: Die Liste einzelner "X ohne Handlungsbedarf"-Bereichsnamen wiederholt nur, was die Mengenanzeigen (Badges) im Hauptmenue ohnehin schon zeigen (kein Badge/ Badge=0 = nichts zu tun dort) -- keine neue Information, kein Klick moeglich, reine Redundanz (Wertekern: "Operative Fakten haben genau eine massgebliche Quelle", das ist hier das Hauptmenue, nicht diese Box). Ersetzt durch eine einzige, schmale Bestaetigungszeile OHNE Aufzaehlung, und nur sichtbar, wenn "Ihre Aufgaben" wirklich leer ist (sonst reine Ablenkung von dem, was gerade zaehlt). Kein eigener Kasten mehr -- passt zum Grundsatz "Reduktion ist der Test". */ .alles-klar-minimal { color: var(--color-success-700); font-size: var(--text-sm); margin: 0 0 var(--space-5); } /* "Naechste Termine" auf "Aktuelles" (01.10.2026, Markus: Ausblick auf Fristen der naechsten Woche inkl. Geburtstage/Probezeitende). Reine Vorschau einer bereits bestehenden Berechnung (wochenuebersicht), bewusst schlicht -- keine eigene Kachel-Optik, keine Farbunterscheidung je Art, damit es nicht mit "Ihre Aufgaben" konkurriert. */ .termine-ausblick { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .termine-ausblick li { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); } .termine-symbol { flex-shrink: 0; font-size: 1.1rem; } .termine-text { flex: 1; color: var(--text); } .termine-wann { flex-shrink: 0; color: var(--text-dim); font-size: var(--text-sm); } .termine-alle-link { display: inline-block; margin: 0 0 var(--space-5); font-weight: var(--weight-semibold); } .kachel-gruppe { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0 0 var(--space-2); } /* "Ihre Aufgaben": Eigenschaften 1:1 aus .task in app.css. Nachtrag 29.09.2026: Die frühere Gold/Rot-Unterscheidung (.task vs. .task--alert, 01.09.2026 ergaenzt) ist entfernt -- seit 27.09.2026 gilt verbindlich nur eine Warnfarbe (Rot), siehe "Regelwerk/3-Betriebsteil-Goecke.md", Abschnitt "Hinweissymbole in der Software". Die Zuordnung aus DashboardTile.severity (webapp/services.py) bleibt bestehen (steuert weiterhin, welches Symbol/.symbol--alarm erscheint), nur die Rahmenfarbe ist jetzt immer Rot. */ .kachel-aufgabe { display: flex; align-items: center; gap: var(--space-4); border-left: .3rem solid var(--color-danger-500); padding-left: calc(var(--space-4) - .3rem); } /* Das frühere .kachel-aufgabe-icon (SVG als Fläche und Zeichen zugleich) ist mit Design-Welle 2 durch .symbol in komponenten.css ersetzt und hier entfernt. */ .kachel-aufgabe-inhalt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .kachel-aufgabe .kachel-wert { display: inline; font-size: var(--text-xl); font-weight: var(--weight-black); color: var(--text); margin-right: var(--space-2); } .kachel-aufgabe h2 { display: inline; text-transform: none; letter-spacing: normal; font-size: 1rem; font-weight: var(--weight-semibold); color: var(--text); margin: 0; } .kachel-aufgabe-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: .15rem; color: var(--edeka-blue); font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none; } .kachel-aufgabe-link:hover { text-decoration: underline; } /* "Zahlen im Überblick": Eigenschaften 1:1 aus .stat-card in app.css, inklusive des schmalen Markenstreifens oben (dort ::before). */ .kachel { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-1); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .kachel:not(.kachel-aufgabe)::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--edeka-blue); } .kachel-handlungsbedarf:not(.kachel-aufgabe)::before { background: var(--color-danger-500); } /* Nur Kacheln mit echtem Ziel bekommen einen Hover-Effekt -- alles andere waere eine falsche Interaktivitaets-Andeutung (siehe DashboardTile.url in webapp/services.py, dort wird die Klasse gesetzt). */ .kachel-verlinkt:hover { border-color: var(--edeka-blue-tint); box-shadow: var(--shadow-2); transform: translateY(-2px); } .kachel h2 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--text-dim); } /* 03.09.2026, Rueckmeldung Markus: Die Organisationsauswahl-Seite (organizations/select_active.html) bestand bisher aus einer nackten