:root { --ink: #f0f0ef; --paper: #0a0b0c; --card: #26282c; --line: #3a3c40; /* NAME-1b (16.09.2026): KUPFER STATT GOLD. Vom Betreiber verlangt: "alles was jetzt gold ist in kupfer". Die Toene sind aus dem Logo gemessen (assets/veluzis-logo-original.png, System.Drawing): Schriftzug im Mittel #d68958, Schattenkupfer #9a4720. GERECHNET (WCAG), nicht geschaetzt: --accent dunkel #d68958: 7,11:1 auf --paper, 5,33:1 auf --card, 6,29:1 mit --auf-akzent (#1c1a10) (Gold vorher 7,38 / 5,53 / 6,53) --accent-dark / --accent hell #9a4a22: 5,56:1 auf hellem --paper, 6,22:1 auf Weiss und mit weisser Schrift (vorher 5,35 / 5,99) --knopf-primaer #9f5328: 5,61:1 mit weisser Schrift, darueber --knopf-verlauf (jeder Halt ueber 4,5:1) Die Kommentare darunter nennen die alten Goldwerte als Geschichte. */ --accent: #d68958; --accent-dark: #9a4a22; --warn: #e07452; --warn-bg: #2a1710; /* Gegenstueck zu --warn. Stand bisher 27x hart als #3f9e5c im Frontend - meist direkt neben var(--warn) im selben Ausdruck. NACHGEMESSEN am 27.08.2026: #3f9e5c kam auf einer Karte (--card #26282c) auf 4,40:1 und lag damit knapp unter den 4,5:1 der WCAG - auf der Seite selbst (5,87:1) war es in Ordnung, nur in einer Karte nicht, und dort steht der meiste Text. Fuenf Prozent aufgehellt sind es 4,77:1 auf der Karte und 6,36:1 auf der Seite. Dieselbe Ueberlegung wie am 20.08.2026 fuer das helle Design, nur andersherum. */ --gut: #42a560; --pause-start: #5a5d61; --pause-ende: #c98a1f; --belege-farbe: #7a3b3b; --muted: #9a9d9f; /* S2-14c (30.08.2026): Die ZWEITE Datenreihe im DB1-Diagramm. Sie folgt bewusst NICHT dem Akzent - der traegt die erste Reihe (Umsatz), und zwei Reihen in derselben Farbe waeren keine zwei Reihen mehr. Das ist dieselbe Ueberlegung wie bei Rot und Gruen fuer einen Status: eine Aussage, keine Marke. GEMESSEN auf --card: dunkel 5,84:1, hell 4,62:1 - beide ueber den 3:1, die die WCAG fuer ein grafisches Objekt verlangt, und sogar ueber den 4,5:1 fuer Text. */ --diagramm-reihe-2: #6fa8dc; --radius: 10px; /* AB-F1659 (20.10.2026, Wunsch des Betreibers): die Kopfleiste traegt das Schwarz hinter den Kacheln (--paper) statt des Graus der Karten. Bis dahin #26282c (AB-F1653: folgt der Kachelfarbe nicht - bleibt so). */ --topbar-bg: #0a0b0c; /* S2-14/F-5b (26.08.2026): Text auf dunklem Grund - Kopfleiste, Zaehlerblasen, farbige Tabellenzellen, Kamerasucher. Diese Flaechen sind in BEIDEN Themes dunkel, deshalb steht der Ton nur hier und wird im hellen Design nicht ueberschrieben. Er stand vorher an 60 Stellen hart als #fff. */ --auf-dunkel: #fff; /* Die rote Zaehlerblase an den Kacheln. Stand dreimal hart. */ --blase-bg: #c0392b; /* S2-14 (27.08.2026): Text auf der AKZENTFLAECHE - aktiver Reiter, Zaehlerpille, Sprunglink. Nicht dasselbe wie --auf-dunkel: --accent ist im dunklen Design ein HELLES Gold (#b89a6a) und im hellen ein DUNKLES Braun (#7a5f2e). Der Text muss also mitkippen. GEMESSEN: dunkler Text auf hellem Gold 6,53:1, weisser Text auf dunklem Braun 5,99:1 - beide ueber den 4,5:1 der WCAG. Vorher stand an zehn Stellen ein fester Wert, und JEDE fiel in einem der beiden Designs durch: #1c1a10 kam hell auf 2,91:1, Weiss kam dunkel auf 2,67:1. Betroffen war auch .zum-inhalt - der Sprunglink, der die Bedienung ohne Maus ueberhaupt erst moeglich macht. */ --auf-akzent: #1c1a10; /* Dieselbe Bauart wie --auf-akzent, fuer die Warnflaeche. GEMESSEN: --warn ist dunkel ein helles Lachs (#e07452) und hell ein dunkles Rotbraun (#914b35). Das Abzeichen "N ueberfaellig" stand mit weisser Schrift darauf und kam im dunklen Design auf 3,09:1. Dunkler Text erreicht dort 5,64:1, Weiss im hellen Design 6,44:1. */ --auf-warn: #1c1a10; /* Der Hauptknopf. GEMESSEN am 27.08.2026: #96763c kam mit weisser Schrift auf 4,24:1 und lag damit unter den 4,5:1 der WCAG - und zwar am meistgeklickten Element der Anwendung. Vier Prozent abgedunkelt ergibt 4,56:1; der Unterschied ist mit blossem Auge nicht zu sehen, die Zahl schon. */ --knopf-primaer: #9f5328; /* NAME-1b: Kupfer, 5,61:1 mit Weiss - Grundfarbe unter dem Verlauf */ /* NAME-1b (16.09.2026): Metall-Verlauf wie im Logo, vom Betreiber gewaehlt ("das kupfer ist nicht kupferartig genug"). JEDER Halt traegt weisse Schrift ueber 4,5:1: #ae5c2c 4,81, #8a4522 7,11, #a9582a 5,10. Ein hellerer Ton (#c26a36, 3,88) wurde verworfen. Ein Whitelabel-Kunde bekommt den Verlauf NICHT - setzeAkzent() setzt ihn dort auf none, sonst laege Kupfer ueber seiner Farbe. */ --knopf-verlauf: linear-gradient(135deg, #ae5c2c 0%, #8a4522 55%, #a9582a 100%); /* ------------------------------------------------------------ Schleier: eine Flaeche leicht abheben ------------------------------------------------------------ GEMESSEN am 27.08.2026: Drei Flaechen standen auf rgba(255,255,255,0.03) - im dunklen Design hebt das die Flaeche leicht an, im hellen ist Weiss auf #f4f2ec SCHLICHT UNSICHTBAR. Die Kachel war dort einfach nicht da. Deshalb kippt der Schleier jetzt mit: hell wird abgedunkelt statt aufgehellt. Dasselbe beim Akzentschleier: Er war als rgba(184,154,106,...) hingeschrieben - das ist der Goldton des DUNKLEN Designs. Im hellen ist --accent ein dunkles Braun, der Schleier zeigte also die falsche Farbe. */ --flaeche-leicht: rgba(255, 255, 255, 0.03); /* NAME-1b: derselbe Ton wie --accent dunkel (#d68958). */ --akzent-schleier: rgba(214, 137, 88, 0.12); --akzent-schleier-stark: rgba(214, 137, 88, 0.18); --akzent-schleier-zart: rgba(214, 137, 88, 0.06); --akzent-schleier-kachel: rgba(214, 137, 88, 0.16); /* ------------------------------------------------------------ Statusabzeichen und Meldungen ------------------------------------------------------------ Sie standen als Zahlenpaare in style.css und waren damit fuer einen Whitelabel-Kunden unerreichbar - S2-14 verlangt aber, dass er ALLES anpassen kann, wenn er es bucht. ACHTUNG, hier ist eine Entscheidung offen: Diese Werte sind fuer das DUNKLE Design gebaut. Im hellen stehen sie deshalb als dunkle Chips auf hellem Grund. Lesbar sind sie (Pruefung 37 rechnet jede einzeln nach), aber sie sehen fremd aus. Eine helle Fassung ist eine Gestaltungsfrage und keine Rechnung - sie gehoert zum Whitelabel-Paket und wird mit dem Betreiber entschieden. Bis dahin stehen die Werte NUR hier in :root und gelten in beiden Designs, so wie bisher. Es aendert sich also nichts am Aussehen; es ist nur benennbar geworden. */ --marke-offen-grund: #3a2a1c; --marke-offen-schrift: #e8a978; --marke-angebot-grund: #1f2a3a; --marke-angebot-schrift: #8ab4d9; --marke-gut-grund: #22301f; --marke-gut-schrift: #9bcf8a; --marke-abgelehnt-grund: #33201f; --marke-abgelehnt-schrift: #d98a80; --meldung-fehler-grund: #3a1f18; --meldung-fehler-schrift: #f0937a; --meldung-fehler-rand: #6b3226; --meldung-gut-rand: #3d5c34; --meldung-info-grund: #1f2733; --meldung-info-schrift: #8ab0e0; --meldung-info-rand: #2f4968; /* Weitere Statusfarben, die auf einzelnen Seiten standen. Sie gehoeren in dieselbe Reihe wie die Marken darueber - und dieselbe offene Entscheidung gilt fuer sie: die helle Fassung ist Gestaltung, keine Rechnung. */ --marke-faellig-grund: #3a1f1f; --marke-faellig-schrift: #e79a9a; --marke-gwg-grund: #2a2a1a; --marke-gwg-schrift: #cfc48a; --marke-hinweis-grund: rgba(214, 166, 44, 0.18); --marke-hinweis-schrift: #d6a62c; --marke-fehler-grund: rgba(200, 64, 64, 0.18); --marke-fehler-schrift: #c84040; --marke-technik-grund: rgba(120, 120, 200, 0.18); --marke-technik-schrift: #8a8ad0; --marke-neu-grund: rgba(63, 158, 92, 0.18); --marke-zelle-grund: rgba(90, 120, 160, 0.18); /* Kopfzeile einer Aktionsspalte (stile/geraetemanager.css:26). S2-14c, 02.09.2026: Das war ein HANDGESETZTER heller Goldton (#caa06b) mit dunkler Schrift (#2a1a08), in beiden Designs gleich. Damit war es die einzige Akzentflaeche der Anwendung, die setzeAkzent() NICHT erreicht - der Anwender in quelle/app/06-datum-feiertage.js setzt genau neun Eigenschaften, und diese beiden standen nicht darunter. Ein Mandant mit blauer Marke bekam eine goldene Spaltenkopfzeile, und zwar ohne jede Meldung. Jetzt aus dem Akzent abgeleitet - dieselbe Bauart, die der Betreiber am 30.08.2026 fuer die Schriftvariante festgelegt hat: Flaeche var(--accent), Schrift var(--auf-akzent). Beide werden vom Anwender gesetzt, also folgt die Kopfzeile jetzt mit. SICHTBARE FOLGE, damit sie niemand fuer einen Fehler haelt: Im dunklen Design bleibt es praktisch gleich (#caa06b -> #b89a6a). Im HELLEN Design kippt die Kopfzeile von hellem Gold mit dunkler Schrift auf dunkles Braun (#7a5f2e) mit weisser Schrift. NACHGERECHNET, nicht geschaetzt: alt 7,00:1, neu dunkel 6,53:1, neu hell 5,99:1 - alle drei weit ueber den 4,5:1 der WCAG. */ --marke-aktion-grund: var(--accent); --marke-aktion-schrift: var(--auf-akzent); /* Ampel der Vergleichsansicht. Reine Signalfarben - sie sollen in beiden Designs dasselbe bedeuten. */ --signal-gut: #30a46c; --signal-warnung: #f5a524; --signal-schlecht: #e5484d; /* Das Band oben auf der Seite, wenn die Anwendung auf einer fremden Datenbank laeuft. GEMESSEN am 27.08.2026: Beide Baender trugen weisse Schrift - auf dem roten sind das 4,93:1, auf dem GOLDENEN nur 2,25:1. Das Hinweisband war also nicht zu lesen, ausgerechnet der Hinweis, der sagt, wo man gerade arbeitet. Dunkle Schrift erreicht dort 7,76:1. Die Schriftfarbe haengt deshalb am Band, nicht am Design. */ --band-gefahr-grund: #c84040; --band-gefahr-schrift: #ffffff; --band-hinweis-grund: #d6a62c; --band-hinweis-schrift: #1c1a10; /* ------------------------------------------------------------ Schatten, Fokusring, Ueberlagerung, eingelassene Flaeche ------------------------------------------------------------ Alles vier stand als Zahl in den Regeln. Drei davon haben dasselbe Problem wie die Schleier: Ein Schatten mit 40 % Schwarz liegt im dunklen Design richtig, auf hellem Papier ist er ein schwarzer Balken. Sie kippen deshalb mit. Die Ueberlagerung hinter einem Fenster bleibt gleich - Abdunkeln ist Abdunkeln, in jedem Design. GEFUNDEN am 27.08.2026: .ak-umschalter stand auf var(--surface-0, rgba(0,0,0,0.15)). --surface-0 ist NIRGENDS definiert, der Ersatzwert hat also immer gegolten - dieselbe Bauart wie var(--gruen,#1e7a45) auf der Mitarbeiterseite. Die Flaeche heisst jetzt --flaeche-eingelassen und gibt es wirklich. */ --schatten: 0 3px 12px rgba(0, 0, 0, 0.4); --schatten-hoch: 0 4px 16px rgba(0, 0, 0, 0.35); --schatten-schwebend: 0 2px 12px rgba(0, 0, 0, 0.4); --ueberlagerung: rgba(0, 0, 0, 0.6); --flaeche-eingelassen: rgba(0, 0, 0, 0.15); /* Der Ring um ein Feld mit Tastaturfokus. Stand zweimal in leicht verschiedenen Werten - einmal allgemein, einmal in der Anmeldemaske. Derselbe Zweck, also derselbe Wert. */ --fokus-ring: 0 0 0 3px rgba(214, 137, 88, 0.28); /* NAME-1b: --accent dunkel */ /* Kopfzeile des gedruckten Stundenzettels. GEMESSEN am 27.08.2026: #8a8676 kam auf weissem Papier auf 3,65:1. Jetzt 4,97:1. */ --papier-tinte-kopf: #737063; --papier-beruehrt: rgba(28, 26, 16, 0.04); /* ------------------------------------------------------------ Anmeldemaske und Kopfleiste ------------------------------------------------------------ Beide sind in BEIDEN Designs dunkel - das ist Absicht und im hellen Design gut zu sehen: Der Anmeldekasten steht als dunkle Karte auf hellem Grund. Deshalb stehen die Werte nur hier. */ --dunkelflaeche: #16181b; --dunkelflaeche-rand: #2a2d30; --auf-dunkelflaeche: #f4f4f3; --auf-dunkelflaeche-gedaempft: #c7c8c9; /* GEMESSEN: #75787a kam auf der Anmeldebox auf 4,00:1. Es traegt den Satz, der erklaert, wie man ohne Zugang an einen kommt - also genau das, was ein neuer Benutzer sucht. Jetzt 4,85:1. */ --auf-dunkelflaeche-leise: #838688; /* Rand und Schleier auf einer dunklen Flaeche - die Kopfleiste ist in beiden Designs dunkel, deshalb Weiss mit wenig Deckung. */ --auf-dunkelflaeche-rand: rgba(255, 255, 255, 0.4); --auf-dunkelflaeche-schleier: rgba(255, 255, 255, 0.12); /* ------------------------------------------------------------ S2-14 (27.08.2026): zwei Paletten, die KEIN Theme haben ------------------------------------------------------------ Sie stehen bewusst nur hier in :root und werden im hellen Design NICHT ueberschrieben - genau wie --auf-dunkel. Der Grund ist aber ein anderer als dort: Diese Flaechen sollen in beiden Designs gleich aussehen, weil sie etwas Gedrucktes nachbilden. Sie tragen trotzdem einen Namen, weil sie vorher an 60 Stellen in fuenf Dateien als Zahl standen. Wer den Cremeton aendern wollte, musste ihn suchen - und uebersah dabei, dass dieselbe Zahl an zwei voellig verschiedenen Dingen hing. WER SIE ANFASST, aendert das Aussehen von Papier. Ein Kunde mit eigenen Farben (Whitelabel) darf hier NICHT durchgreifen: Ein Stundenzettel geht an den Steuerberater und in die Akte. */ /* Eingabefelder. Creme auf dunklem wie auf hellem Grund - das ist eine Gestaltungsentscheidung, kein vergessener Wert. */ --feld-grund: #fdf6d8; --feld-schrift: #1c1a10; /* GEMESSEN am 27.08.2026: #8a8365 kam auf dem Cremefeld auf 3,51:1. Ein Platzhalter ist Text und faellt nicht unter eine WCAG-Ausnahme - er sagt oft, WAS in das Feld gehoert. 16 % abgedunkelt sind es 4,73:1. */ --feld-platzhalter: #736e54; --feld-grund-gesperrt: #eee5c0; --feld-schrift-gesperrt: #4a4530; /* Papier-Nachbildung: Stundenzettel, Jahresplan, Monatstabelle. Ein DIN-A4-Blatt ist weiss, seine Tinte dunkel - auch auf einem Bildschirm im Nachtmodus. */ --papier-tinte: #1c1a10; --papier-tinte-gedaempft: #5a5750; --papier-tinte-blass: #9a958a; --papier-tinte-sehr-blass: #b3b0a3; --papier-tinte-kaum: #cfcabf; --papier-linie: #e4e0d0; --papier-creme: #fdf6d8; --papier-creme-kopf: #f3ecc8; --papier-creme-betont: #f0e2ae; --papier-creme-summe: #efe6c8; --papier-creme-gewaehlt: #d9c26e; --papier-grau: #ece8db; --papier-grau-betont: #e9e6dc; --papier-leer: #f3f2ee; --papier-wochenende-grund: #f7ece6; --papier-wochenende-schrift: #b5482a; /* Tag ausserhalb der Beschaeftigung im Jahresplan. NACHGEMESSEN am 27.08.2026: Der vorherige Ton #2e7d4f kam auf dem hellgruenen Grund nur auf 4,38:1 und lag damit knapp unter den 4,5:1 der WCAG - bei 11,5 Pixel fetter Schrift gilt die Ausnahme fuer grosse Schrift nicht. Der Wert hier ist KEIN neuer Farbton: Es ist derselbe, den --gut im hellen Design schon traegt, und er kommt auf 4,93:1. */ --papier-gut: #2e7444; --papier-gut-grund: #e3f3e6; /* Die sechs Abwesenheits-Zustaende im Stundenzettel und im Jahresplan. Sie standen bis zum 27.08.2026 in DREI Dateien nebeneinander - mitarbeiter.css, personal-arbeitszeiten.css und personal-jahresplan.css -, und dabei war "Urlaub offen" viermal mit DREI verschiedenen Blautoenen hinterlegt: Der Beschaeftigte sah in seinem Jahresplan eine andere Farbe als der Objektleiter im selben Plan. Vereinheitlicht auf #2c5c85 auf #eef3f8 - das war die Mehrheit (zwei von vier) UND mit 6,32:1 der beste Kontrast; die abgeloeste Fassung kam auf 4,66:1. */ --papier-krank-gemeldet-grund: #fbdcdc; --papier-krank-gemeldet-schrift: #a33; /* GEMESSEN: weisse Schrift auf #e0435a ergab 4,10:1. Neun Prozent abgedunkelt sind es 4,88:1 - dieselbe Groessenordnung wie die beiden anderen bestaetigten Zustaende (5,95:1 und 8,85:1). */ --papier-krank-bestaetigt-grund: #cb3c51; --papier-fehlzeit-gemeldet-grund: #dcb3f7; --papier-fehlzeit-gemeldet-schrift: #5a1e96; --papier-fehlzeit-bestaetigt-grund: #8e2fd6; --papier-urlaub-offen-grund: #eef3f8; --papier-urlaub-offen-schrift: #2c5c85; --papier-urlaub-genehmigt-grund: #1c4c7c; /* Zeile mit Stunden, wenn die Maus darauf steht. */ --papier-creme-beruehrt: #f5ecc0; /* Vertraglich geplante, noch nicht gearbeitete Stunden. Sie sollen zuruecktreten - aber lesbar bleiben. GEMESSEN: der vorherige Ton #9a958a kam auf 2,66:1. Dieser erreicht 4,55:1 und steht immer noch deutlich blasser als die normale Tinte (#1c1a10). */ --papier-tinte-geplant: #716e66; --kalender-tag-bg: #0f1113; --kalender-tag-auftrag-bg: #241a12; --kalender-tag-feiertag-bg: #2a1710; --readout-bg: #1f1a16; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } [data-theme="light"] { --ink: #1c2125; --paper: #f4f2ec; --card: #ffffff; --line: #ddd9cd; --muted: #6b6f72; /* Das helle Gegenstueck. GEMESSEN: Der dunkle Wert #6fa8dc kam auf weissem --card auf 2,53:1 und lag damit UNTER den 3:1 fuer ein grafisches Objekt - die DB1-Linien waren im hellen Design blass. Aufgefallen ist das nie, weil ein blasses Blau nicht nach einem Fehler aussieht. */ --diagramm-reihe-2: #3d78b4; /* G-5: eigener --accent fuers helle Design noetig - der dunkle Goldton war fuer dunklen Hintergrund kalibriert (Kontrast dort 7.4:1), auf hellem Hintergrund nur 2.4:1 (unter dem WCAG-AA-Minimum von 3:1 fuer grosse/UI-Elemente, erst recht unter 4.5:1 fuer normalen Text - und --accent wird an 48+ Stellen als Textfarbe verwendet). Wiederverwendet den bereits vorhandenen --accent-dark-Ton (5.35:1 auf hellem Hintergrund), kein neuer Farbton im System noetig. */ /* NAME-1b (16.09.2026): Kupfer #9a4a22, gleich --accent-dark - siehe :root. */ --accent: #9a4a22; /* G-5: dieselbe Kontrast-Ueberlegung wie bei --accent - --warn (2.76:1) und --pause-ende (2.63:1) waren auf hellem Hintergrund ebenfalls unter dem WCAG-AA-Minimum. Dunklere Varianten derselben Farbfamilie. */ --warn: #914b35; --warn-bg: #f7d9cc; /* #3f9e5c erreicht auf hellem Papier nur 3.00:1 und faellt damit unter die 4.5:1 der WCAG. #2e7444 erreicht 5.07:1 - dieselbe Groessenordnung wie --warn hell (5.75:1). */ --gut: #2e7444; --pause-ende: #825914; --kalender-tag-bg: #eeece4; --kalender-tag-auftrag-bg: #f0dcc4; --kalender-tag-feiertag-bg: #f7d9cc; --readout-bg: #f2ead9; /* Hier ist --accent das dunkle Braun - der Text kippt auf Weiss. */ --auf-akzent: #ffffff; /* Hier ist --warn das dunkle Rotbraun - der Text kippt auf Weiss. */ --auf-warn: #ffffff; /* Auf hellem Papier wird abgedunkelt statt aufgehellt. */ --flaeche-leicht: rgba(0, 0, 0, 0.03); /* --accent ist hier #9a4a22 - der Schleier traegt denselben Ton. */ --akzent-schleier: rgba(154, 74, 34, 0.12); --akzent-schleier-stark: rgba(154, 74, 34, 0.18); --akzent-schleier-zart: rgba(154, 74, 34, 0.06); --akzent-schleier-kachel: rgba(154, 74, 34, 0.16); /* Auf hellem Papier duerfen Schatten nicht so schwer sein. */ --schatten: 0 3px 12px rgba(0, 0, 0, 0.14); --schatten-hoch: 0 4px 16px rgba(0, 0, 0, 0.16); --schatten-schwebend: 0 2px 12px rgba(0, 0, 0, 0.18); --flaeche-eingelassen: rgba(0, 0, 0, 0.06); --fokus-ring: 0 0 0 3px rgba(154, 74, 34, 0.30); } /* KACHELFARBE (18.10.2026, vom Betreiber festgelegt, in Mensura am Handy ausprobiert): Im DUNKLEN Design ist die Farbe der Kacheln und Karten waehlbar - Grau (bisher, Vorgabe, steht oben in :root), Nachtblau oder Moosgruen. Geaendert werden nur --card und --line; Grund, Schrift, Kupfer und das ganze helle Design bleiben. Gesetzt wird das Attribut data-kachel von theme-fruh.js aus localStorage "kachel", gewaehlt im Benutzermenue (quelle/app/05-zugriff-oberflaeche.js). Das :not(light) ist Pflicht: Diese Regel ist spezifischer als [data-theme="light"] und wuerde sonst die weissen Karten des hellen Designs ueberschreiben. GERECHNET (WCAG) auf --card: --ink 15,31 / 13,36; --muted 6,40 / 5,58; --accent 6,30 / 5,50; --warn und --gut 5,64 / 4,92 (Nachtblau / Moosgruen) - alles ueber 4,5:1 und ueber dem bisherigen Grau. Pruefung 37 (kontrast-pruefen.py) rechnet beide Saetze als eigenes Design mit; wer hier einen Satz anlegt, muss NUR diesen Block ergaenzen. Grenze: Die Karte hebt sich weniger vom Grund ab als das Grau (1,13:1 / 1,29:1 statt 1,33:1) - so ausprobiert und gewollt. */ /* AB-F1660 (20.10.2026, Wunsch des Betreibers): Nachtblau ist durch SAPHIR PERLEFFEKT ersetzt (Fassung "Saphir tief", gleiche Helligkeit wie das Tannengruen; Wert "blau" bleibt). Schimmer auf den Startkacheln wie beim Gruen (Regel .dashboard-tile weiter unten). */ /* AB-F1661 (20.10.2026, Optik wie Mensura, vom Betreiber beauftragt): In Saphir und Tannengruen ist der Akzent das Logo-Kupfer #de7440 statt #d68958 - Symbole, Anfangsbuchstaben, Kupferschrift, Werte, Fokusring. Grau und das helle Design behalten #d68958 bzw. #9a4a22. GERECHNET (WCAG, werkzeuge/kontrast-pruefen.py rechnet --card mit): #de7440 auf --card Saphir #11264a 4,77:1, Tannengruen #162d1c 4,68:1; am hellsten Glanzpunkt (#203a66 / #25402a) 3,59:1 / 3,62:1 - unter 4,5 fuer kleine Schrift, ueber 3:1 fuer Symbole; dieselbe Grenze wie AB-F1660 (dort 4,07 / 4,10 mit dem alten Kupfer), so in Mensura abgenommen (4,7 / 3,6). --auf-akzent #1c1a10 auf #de7440 5,54:1 - bleibt fuer die FLACHEN Akzentflaechen (Zaehlerpille, Sprunglink, Spaltenkopf, Testband). Weiss auf #de7440 kaeme nur auf 3,14:1 und faellt durch. Ein Whitelabel-Akzent (setzeAkzent() setzt --accent am Element) gewinnt weiter, weil der Stil am Element staerker ist als diese Regel. */ :root:not([data-theme="light"])[data-kachel="blau"] { --card: #11264a; --line: #284676; --accent: #de7440; --akzent-schleier: rgba(222, 116, 64, 0.12); --akzent-schleier-stark: rgba(222, 116, 64, 0.18); --akzent-schleier-zart: rgba(222, 116, 64, 0.06); --akzent-schleier-kachel: rgba(222, 116, 64, 0.16); --fokus-ring: 0 0 0 3px rgba(222, 116, 64, 0.28); } /* AB-F1660 (20.10.2026, Wunsch des Betreibers): Moosgruen ist durch TANNENGRUEN PERLEFFEKT ersetzt (Wert "gruen" bleibt, wer Moosgruen gewaehlt hatte, sieht sofort Tannengruen). --card ist der mittlere Ton des Lacks; die Startkacheln bekommen zusaetzlich den Schimmer (Regel .dashboard-tile weiter unten). Pruefung 37 rechnet gegen --card. */ :root:not([data-theme="light"])[data-kachel="gruen"] { --card: #162d1c; --line: #2e4a33; /* AB-F1661: Akzent und Schleier wie Saphir - Begruendung dort. */ --accent: #de7440; --akzent-schleier: rgba(222, 116, 64, 0.12); --akzent-schleier-stark: rgba(222, 116, 64, 0.18); --akzent-schleier-zart: rgba(222, 116, 64, 0.06); --akzent-schleier-kachel: rgba(222, 116, 64, 0.16); --fokus-ring: 0 0 0 3px rgba(222, 116, 64, 0.28); } * { box-sizing: border-box; } /* AB-F826 (23.09.2026): min-height 100vh war der Grund, warum sich die Kacheluebersicht der Mitarbeiter-App auf dem Handy trotz gerechneter Kachelhoehe noch scrollen liess. 100vh ist auf Android die Hoehe OHNE die Systemleisten - also MEHR als der sichtbare Bereich. Der Koerper war damit immer ein Stueck hoeher als das Fenster, und die Schleife in passeStundenHubAn() konnte den Ueberstand nie wegrechnen: sie verkleinert die Kacheln, aber min-height haelt den Koerper auf seinem Mass. 100dvh folgt der WIRKLICH sichtbaren Hoehe. Die Zeile mit 100vh bleibt als Rueckfall fuer Browser ohne dvh davor stehen - sie wird von der folgenden ueberschrieben, wo dvh bekannt ist. */ body { margin: 0; background: var(--paper); color: var(--ink); min-height: 100vh; min-height: 100dvh; scrollbar-gutter: stable; } .topbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px 20px; padding: 16px 24px; background: var(--topbar-bg); /* AB-F1659 (20.10.2026, Wunsch des Betreibers): durchgezogener Kupferstrich ueber die ganze Breite statt der grauen Trennlinie. */ border-bottom: 2px solid var(--accent); color: var(--auf-dunkel); position: fixed; top: 0; left: 0; right: 0; z-index: 100; } @media (max-width: 640px) { .topbar { padding: 8px 14px; gap: 0px 20px; } .topbar .who { justify-content: flex-end; } .topbar .logo-mark { font-size: 1.3rem; } .topbar .brand .topbar-sub { font-size: 0.9rem; margin-left: 10px; } } .topbar .brand { font-weight: 700; letter-spacing: 0.02em; font-size: 1.3rem; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .topbar-logo { height: 100px; width: auto; display: block; } @media (max-width: 640px) { .topbar-logo { height: 70px; } } .topbar .logo-mark { display: flex; align-items: baseline; gap: 2px; font-size: 1.55rem; line-height: 1; } .topbar .logo-mark .bold { font-weight: 800; color: var(--auf-dunkelflaeche); } .topbar .logo-mark .slash { color: var(--accent); font-weight: 400; margin: 0 2px; transform: skewX(-15deg); display: inline-block; } .topbar .logo-mark .thin { font-weight: 300; color: var(--muted); } .topbar .brand .topbar-sub { display: none; } .topbar .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; } .topbar .who { font-size: 0.85rem; opacity: 0.9; display: flex; gap: 14px; align-items: flex-end; } /* OF-1 (30.08.2026): In der Kopfleiste steht nur noch das Abmeldesymbol. Der Knopf trug bis dahin das Wort "Abmelden" mit Rahmen; setupTopbar() hat den Text im Betrieb durch ein Symbol ersetzt und den Rahmen ueber style.cssText wieder abgeraeumt. Das Symbol steht jetzt schon im HTML. Zwei Gruende, beide gemessen: Erstens sah man bis dahin fuer den Bruchteil einer Sekunde den Text, bis app.js geladen war. Zweitens rufen protokoll.html und fehlerprotokoll.html setupTopbar() gar nicht auf - dort BLIEB der Text stehen, und der Knopf hatte nicht einmal einen Lauscher. min-height/min-width 44: dieselbe Groesse wie .seiten-nav-knopf. Ein Symbol allein ist ein kleines Ziel; auf dem Telefon wird es mit dem Daumen getroffen. */ .topbar button.logout { background: transparent; border: none; color: var(--auf-dunkel); padding: 6px; min-width: 44px; min-height: 44px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .topbar button.logout:hover { background: var(--auf-dunkelflaeche-schleier); } /* setupTopbar() haengt die Pille unter das Logo (AB-F1684) und benennt sie dabei in topbar-user-unter-titel um. Bis das Skript geladen ist, stand die leere Huelle aber noch hier und nahm Breite ein. Sobald sie umzieht, trifft diese Regel nicht mehr, denn beides aendert sich: die Kennung UND der Elternknoten. */ .topbar #topbar-user { display: none; } /* OF-4 (25.08.2026): Der Abstand zur festen Kopfleiste war ein AUSSENabstand. Ein Aussenabstand am ersten Kind faellt aus dem Koerper heraus und schiebt ihn nach unten - zusammen mit "body { min-height: 100vh }" war jede Seite dadurch genau 140 Pixel hoeher als das Fenster. GEMESSEN am 25.08.2026: Bei 1280x800, 1366x768, 1440x900 und 1920x1080 war der Ueberhang jedes Mal exakt 140 - unabhaengig vom Inhalt. Das waren nie die Kacheln, das war diese eine Zeile. Als INNENabstand liegt derselbe Raum innerhalb des Kastens und zaehlt zur Hoehe. Sichtbar aendert sich nichts, aber eine kurze Seite scrollt nicht mehr. */ /* AB-F273 (03.09.2026): WAS EINE SEITENSTILDATEI HIER AENDERN DARF. 14 Dateien unter stile/ definieren .wrap um. Das ist erlaubt - eine Auswertung braucht mehr Breite als 960px. Der obere und untere Abstand gehoert aber DIESER Regel, und zwar aus einem Grund, der sich nicht meldet: Ein 'margin-top' in einer Seitendatei ERSETZT das padding hier nicht, es kommt HINZU. Bis OF-4b (25.08.2026) stand der Abstand als 'margin-top: 140px' neben 'padding: 28px'; eine Seitendatei mit 'margin: 130px ...' ersetzte ihn also. Seit OF-4b steckt er im padding - dieselbe Zeile addiert seither 130 zu 168 und ergibt 298. Fuenf Seiten standen so ein Vierteljahr lang mit rund 300 statt 168 Pixeln Leerraum oben da, ohne Fehler und ohne Meldung (Regel 10). Zweitens toetet ein 'padding'-Kurzwort in einer Seitendatei die Mobilfassung darunter mit, weil es spaeter geladen wird. Also: max-width nach Bedarf, Seitenraender ueber padding-left / padding-right oder margin links/rechts - Oberkante und Unterkante bleiben hier. Pruefung 81 haelt das fest. */ .wrap { max-width: 960px; margin: 0 auto; padding: 168px 20px 60px; } @media (max-width: 640px) { /* 95 + 14 = 109, dieselbe Rechnung wie oben. */ .wrap { padding: 109px 16px 40px; } .tabs { margin-bottom: 14px; } .card { margin-bottom: 12px; } } h1 { font-size: 1.5rem; margin: 0 0 4px; } h2 { font-size: 1.15rem; margin: 28px 0 12px; } p.lead { color: var(--muted); margin-top: 0; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 18px; } #stunden-monatsplan-view:not(.hidden) { position: fixed; inset: 0; z-index: 200; background: var(--paper); overflow-y: auto; padding: 16px; } #tag-details.popup-modus:not(.hidden) { position: fixed; inset: 0; z-index: 200; background: var(--paper); overflow-y: auto; padding: 16px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } /* BE-4 (26.08.2026): Drei Felder in einer Zeile - Lieferant, Belegdatum, Faellig am. Gebaut wie .grid-2, damit sich beide gleich verhalten: Auf dem Telefon untereinander, dazwischen zweispaltig, damit ein Datumsfeld nicht auf 200 px zusammenschrumpft. */ .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } } label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink); } input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 1rem; margin-bottom: 14px; background: var(--feld-grund); color: var(--feld-schrift); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--fokus-ring); } input::placeholder, textarea::placeholder { color: var(--feld-platzhalter); } select option { background: var(--feld-grund); color: var(--feld-schrift); } input[readonly] { background: var(--feld-grund-gesperrt); color: var(--feld-schrift-gesperrt); cursor: default; } /* AB-F1577 Nr. 50.36 (14.10.2026): ein GESPERRTES Feld sieht aus wie ein schreibgeschuetztes - dieselben zwei Werte, keine neue Farbe. Vorher blieb es hell wie ein freies (im Browser gesehen an der Positionsmaske, Lauf 56), nur die Knoepfe wurden grau. */ input:disabled, select:disabled, textarea:disabled { background: var(--feld-grund-gesperrt); color: var(--feld-schrift-gesperrt); cursor: default; } /* Verhindert, dass der Browser seine eigene Autofill-Farbe reindrückt */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--feld-grund) inset; -webkit-text-fill-color: var(--feld-schrift); } button.primary { background: var(--knopf-primaer); background-image: var(--knopf-verlauf); color: var(--auf-dunkel); border: none; padding: 13px 20px; border-radius: 7px; font-size: 1rem; font-weight: 600; cursor: pointer; } button.primary:hover { background: var(--accent-dark); } button.primary:disabled { opacity: 0.5; cursor: default; } button.secondary { background: transparent; border: 1px solid var(--line); padding: 11px 16px; border-radius: 7px; cursor: pointer; font-size: 0.95rem; color: var(--ink); } .readout { background: var(--readout-bg); border: 1px dashed var(--accent); border-radius: 8px; padding: 12px 14px; font-size: 0.9rem; margin-bottom: 14px; color: var(--ink); } .readout b { color: var(--accent); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } @media (max-width: 700px) { table { display: block; width: auto; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); } th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .badge.offen { background: var(--marke-offen-grund); color: var(--marke-offen-schrift); } .badge.angebot { background: var(--marke-angebot-grund); color: var(--marke-angebot-schrift); } .badge.erledigt { background: var(--marke-gut-grund); color: var(--marke-gut-schrift); } .badge.storniert { background: var(--marke-abgelehnt-grund); color: var(--marke-abgelehnt-schrift); text-decoration: line-through; } .badge.genehmigt { background: var(--marke-gut-grund); color: var(--marke-gut-schrift); } .badge.abgelehnt { background: var(--marke-abgelehnt-grund); color: var(--marke-abgelehnt-schrift); } .checkbox-list { border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; margin-bottom: 14px; max-height: 160px; overflow-y: auto; /* --paper statt #0f1113: im Dunkeln ein Unterschied von 1.04:1 und damit unsichtbar, im Hellen der Unterschied zwischen lesbar und schwarzem Kasten. Der Rahmen var(--line) grenzt die Liste ab. */ background: var(--paper); } .checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 400; padding: 5px 0; margin-bottom: 0; color: var(--ink); cursor: pointer; } .checkbox-item input { width: auto; margin: 0; } .auftrag-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; cursor: pointer; background: var(--card); transition: box-shadow 0.15s, border-color 0.15s; } .auftrag-item:hover { border-color: var(--accent); box-shadow: var(--schatten); } .auftrag-item h3 { margin: 0 0 6px; font-size: 1rem; } .auftrag-item .meta { color: var(--muted); font-size: 0.85rem; } canvas.sigpad { border: 1px dashed var(--accent); border-radius: 8px; width: 100%; height: 160px; touch-action: none; /* feste Farbe: Unterschrift wird als Bild gespeichert und gedruckt */ background: #fff; } .msg { padding: 10px 14px; border-radius: 7px; font-size: 0.88rem; margin-bottom: 14px; } .msg.error { background: var(--meldung-fehler-grund); color: var(--meldung-fehler-schrift); } .msg.success { background: var(--marke-gut-grund); color: var(--marke-gut-schrift); } /* AB-F46 (02.09.2026): Ein Hinweis, der weder Fehler noch Erfolg ist - "so wurde gerechnet". Es gab .msg.error und .msg.success, aber kein .msg.info; ein
haette ohne Hintergrund dagestanden und waere kaum aufgefallen. Dieselben Farbvariablen wie .toast.info, damit derselbe Sachverhalt gleich aussieht. */ .msg.info { background: var(--meldung-info-grund); color: var(--meldung-info-schrift); border: 1px solid var(--meldung-info-rand); } /* AB-F1577 Nr. 43.31 V3: die wartenden Stempel auf der Sperrkarte (sperrkarteStempelZeigen in quelle/app/05-zugriff-oberflaeche.js) - zum Abschreiben oder Abfotografieren. Keine eigene Farbe: die Liste steht in der .msg.error-Karte und erbt deren Schrift. */ .sperrkarte-stempel { margin: 10px 0; } .sperrkarte-stempel p { margin: 0 0 6px; } .sperrkarte-stempel ul { margin: 0; padding-left: 1.2em; } .sperrkarte-stempel li { margin: 3px 0; font-weight: 600; } /* G-2: einheitlicher Ersatz fuer alert() - siehe zeigeToast() in app.js */ #toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; box-shadow: var(--schatten-hoch); max-width: min(90vw, 420px); text-align: center; pointer-events: auto; animation: toast-ein 0.2s ease-out; cursor: pointer; } .toast.error { background: var(--meldung-fehler-grund); color: var(--meldung-fehler-schrift); border: 1px solid var(--meldung-fehler-rand); } .toast.success { background: var(--marke-gut-grund); color: var(--marke-gut-schrift); border: 1px solid var(--meldung-gut-rand); } .toast.info { background: var(--meldung-info-grund); color: var(--meldung-info-schrift); border: 1px solid var(--meldung-info-rand); } @keyframes toast-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .login-shell { /* AB-F826: derselbe Grund wie beim Koerper oben - 100vh ist auf dem Handy groesser als der sichtbare Bereich. 100dvh folgt ihm. */ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--paper); } .login-box { width: 100%; max-width: 400px; background: var(--dunkelflaeche); border: 1px solid var(--dunkelflaeche-rand); border-radius: var(--radius); padding: 40px 34px; } .login-logo { display: flex; align-items: baseline; gap: 2px; font-size: 1.7rem; margin-bottom: 6px; line-height: 1; } .login-logo-img { height: 78px; width: auto; margin-bottom: 10px; display: block; } .login-logo .bold { font-weight: 800; color: var(--auf-dunkelflaeche); letter-spacing: -0.01em; } .login-logo .slash { color: var(--accent); font-weight: 400; margin: 0 1px; transform: skewX(-15deg); display: inline-block; } .login-logo .thin { font-weight: 300; color: var(--muted); } .login-box .eyebrow { color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; } .login-box p.lead { margin-bottom: 22px; color: var(--muted); } .login-box label { color: var(--auf-dunkelflaeche-gedaempft); } .login-box input { background: var(--feld-grund); border: 1px solid var(--dunkelflaeche-rand); color: var(--feld-schrift); } .login-box input:focus { border-color: var(--accent); box-shadow: var(--fokus-ring); } .login-box input::placeholder { color: var(--feld-platzhalter); } .login-box .small { color: var(--auf-dunkelflaeche-leise); } .login-box .small a.link { color: var(--auf-dunkelflaeche-gedaempft); } .hidden { display: none !important; } .tabs { display: flex; /* F-E (25.08.2026): Ohne flex-wrap schob die Reiterleiste die Seite auf 408 Pixel auseinander - gemessen auf auftrag-verwaltung.html bei 375 Pixel Breite. Ein Reiter mehr, und es waere jede Seite gewesen. */ flex-wrap: wrap; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--line); } .tab-btn { background: transparent; border: none; color: var(--muted); padding: 10px 4px; margin-right: 20px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; } .tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); } .kalender-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .kalender-wochentag { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding-bottom: 6px; } .kalender-tag { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; background: var(--kalender-tag-bg); border: 1px solid transparent; color: var(--ink); } .kalender-tag:hover { border-color: var(--accent); } .kalender-tag.ist-heute { border-color: var(--gut); border-width: 2px; font-weight: 700; } .kalender-tag.hat-auftrag { background: var(--kalender-tag-auftrag-bg); color: var(--ink); } .kalender-tag.feiertag { background: var(--kalender-tag-feiertag-bg); border-color: var(--warn); } .kalender-tag.feiertag span:first-child { color: var(--warn); font-weight: 700; } .kalender-feiertag-label { font-size: 0.5rem; font-weight: 700; color: var(--warn); text-transform: uppercase; white-space: nowrap; overflow: hidden; max-width: 100%; } .kalender-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; } .kalender-punkt.erledigt { background: var(--muted); } .stats-row { display: grid; /* F-E (25.08.2026): minmax(0, 1fr) statt 1fr. "1fr" heisst in Wahrheit minmax(auto, 1fr) - die Spalte wird also NIE schmaler als ihr breitester unteilbarer Inhalt. Bei 375 Pixeln blieb die Kachelspalte deshalb 390 Pixel breit und schob die ganze Seite hinaus, obwohl die Media Query laengst auf eine Spalte umgestellt hatte. Mit minmax(0, ...) darf sie schrumpfen. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } @media (max-width: 960px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .stats-row { grid-template-columns: minmax(0, 1fr); } } /* F-E (25.08.2026): Zwei Kachelreihen standen als style="grid-template- columns:1fr 1fr" IM HTML. Eine Angabe im style-Attribut schlaegt jede Media Query - die Regeln darueber liefen also ins Leere, und die Seite war auf dem Telefon 547 Pixel breit. Deshalb als Klasse: so greift der Umbruch wieder. */ .stats-row.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid.zwei-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 560px) { .dashboard-grid.zwei-kacheln { grid-template-columns: minmax(0, 1fr); } } /* F-R4b (08.09.2026): drei Kacheln nebeneinander, gleiche Bauart wie zwei-kacheln. Die Zwischenstufe bei 760 px ist noetig, weil drei Kacheln auf einem Tablet sonst so schmal werden, dass die Ueberschrift umbricht - dann lieber zwei und eine. */ .dashboard-grid.drei-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 760px) { .dashboard-grid.drei-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .dashboard-grid.drei-kacheln { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .stats-row.zwei { grid-template-columns: minmax(0, 1fr); } } /* Dasselbe fuer das Raster aus Stundenzettel (210 mm, A4-Breite) und Seitenspalte. Auf dem Telefon kann eine A4-Seite nicht neben etwas anderem stehen - untereinander ist die einzige Moeglichkeit. */ .zettel-raster { display: grid; grid-template-columns: 210mm 1fr; gap: 14px; align-items: start; } @media (max-width: 1000px) { .zettel-raster { grid-template-columns: 1fr; } } .stat-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; /* Gehoert zum minmax(0, 1fr) oben dazu: ohne min-width bringt ein Rasterfeld seine eigene Mindestbreite mit und macht die Regel wirkungslos. Lange Zahlen brechen notfalls um, statt die Seite breiter zu machen. */ min-width: 0; overflow-wrap: anywhere; } .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; margin-bottom: 6px; } .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; } .stat-sub { font-size: 0.82rem; color: var(--accent); margin-top: 2px; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* AB-F1123: jede Zeile so hoch wie die hoechste Kachel der Seite - alle Kacheln gleich gross. Die Kacheln sind Rasterelemente und strecken sich. */ grid-auto-rows: 1fr; gap: 18px; margin-top: 28px; } @media (min-width: 1100px) { .dashboard-grid { grid-template-columns: repeat(5, 1fr); } } /* OF-4 (25.08.2026): Die Startseite soll ohne Scrollen dastehen. GEMESSEN, nicht geschaetzt: Bei 1280x800 war die Seite 951 Pixel hoch - 151 zu viel. Bei 1920x1080 fehlten 140. Die Straffung haengt an .startseite und wirkt NUR dort. Global waere sie falsch: Eine Liste mit vierzig Zeilen braucht ihren Fussabstand, damit die letzte Zeile nicht am Fensterrand klebt. AUF DEM TELEFON GILT SIE NICHT, und das ist kein Versaeumnis: Bei 375 Pixeln Breite steht EINE Kachel je Zeile, sechzehn Kacheln ergeben 3.274 Pixel. Fest stehen kann das nur, wenn die Startseite dort anders aufgebaut wird - das ist OF-5, nicht OF-4. RICHTIGSTELLUNG 30.08.2026: Zwei der fuenf Zeilen dieses Blocks waren seit dem 25.08.2026 WIRKUNGSLOS, ohne dass etwas gemeldet haette - .startseite .dashboard-tile { padding } und .startseite .dashboard-tile-icon { margin-bottom }. stile/dashboard.css:14-15 setzt dieselben Eigenschaften mit .dashboard-grid .dashboard-tile bzw. .dashboard-grid .dashboard-tile-icon. Beide Auswahlketten haben die Staerke (0,2,0); dashboard.html laedt style.css (Zeile 16) VOR stile/dashboard.css (Zeile 17), also gewinnt die spaetere - und das ist die aus dashboard.css. Eine Medienabfrage erhoeht die Staerke nicht. Folge fuer den Befund vom 25.08.2026: Der Satz "Ursache ist nicht der Abstand" ist an einer Kachel gemessen worden, deren Abstand nie verkleinert war. Die beiden toten Zeilen stehen deshalb nicht mehr hier, sondern die Kachelgroesse der Startseite steht jetzt an EINER Stelle - in stile/dashboard.css. Zwei Stellen, von denen eine still verliert, sind genau die leise Sorte Fehler aus Regel 10. */ @media (min-width: 900px) { .wrap.startseite { padding-bottom: 16px; } .startseite .dashboard-grid { margin-top: 12px; gap: 12px; } } .dashboard-tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.15s; } .dashboard-tile:hover { border-color: var(--accent); transform: translateY(-2px); } /* AB-F1660 (20.10.2026): PERLEFFEKT wie ein Autolack - Glanzpunkt oben rechts, ins Dunkle verlaufend, darueber ein schwacher Lichtstreifen. Nur dunkles Design, nur die Wahlen "gruen" (Tannengruen) und "blau" (Saphir); Grau und das helle Design bleiben einfarbig. ZUERST nur Startkacheln; am selben Tag vom Betreiber erweitert (Wunsch ueber Mensura aktuell weitergegeben und hier per Auswahl bestaetigt): AUF JEDER SEITE GLEICH - alles, was wie eine Kachel oder Karte aussieht (Karten, Listenkarten, Kennzahlkarten, Seitenleisten, Startkacheln samt Meine Todos). OHNE Glanz: aufgehende Fenster (.app-dialog), Menues (#einstellungen-menu), Eingabefelder, Reiterknoepfe, Tabellenzellen, Beleg-Platzhalter, die Papierkarte im Tagesnachweis (.auftrag-item.gedruckt-karte, wird gedruckt) und die markierte Aktenkachel (.akte-kachel.active, eigener Akzentschleier). Die Todo-Spalte der Startseite (.startseite .todo-spalte, sonst durchsichtig) bekommt den Glanz absichtlich mit. GERECHNET (WCAG) am hellsten Punkt: Tannengruen #25402a Schrift 9,98:1, Kupfer 4,10:1; Saphir #203a66 Schrift 9,9:1, Kupfer 4,07:1 (Symbole brauchen 3:1). Auf --card Kupfer 5,3:1 bzw. 5,4:1. Pruefung 37 rechnet gegen --card, nicht gegen den Verlauf. Kein style-Attribut (CSP). AB-F1661 (20.10.2026) AENDERT DIE ABGRENZUNG: Die aufgehenden Fenster (.app-dialog) bekommen den Glanz jetzt doch (Nachtrag 2 (C)(2) der Sitzung mensura aktuell) - Regel im Block AB-F1661 am Dateiende. Mit dem Kupfer #de7440 (AB-F1661) sind es am hellsten Punkt 3,59:1 / 3,62:1, auf --card 4,77:1 / 4,68:1. */ :root:not([data-theme="light"])[data-kachel="gruen"] { --glanz: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0) 60%), radial-gradient(120% 90% at 85% 0%, #25402a 0%, #162d1c 45%, #0d1d12 100%); } :root:not([data-theme="light"])[data-kachel="blau"] { --glanz: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0) 60%), radial-gradient(120% 90% at 85% 0%, #203a66 0%, #11264a 45%, #08162e 100%); } :root:not([data-theme="light"])[data-kachel="gruen"] :is(.card, .auftrag-item:not(.gedruckt-karte), .stat-box, .dashboard-tile, .akte-kachel:not(.active), .ak-sidebar, .db1-sidebar, .db1-kpi-card, .lu-kpi-karte, .pb-eintrag, .rg-kpi-card, .kunden-zeile), :root:not([data-theme="light"])[data-kachel="blau"] :is(.card, .auftrag-item:not(.gedruckt-karte), .stat-box, .dashboard-tile, .akte-kachel:not(.active), .ak-sidebar, .db1-sidebar, .db1-kpi-card, .lu-kpi-karte, .pb-eintrag, .rg-kpi-card, .kunden-zeile) { background: var(--glanz); } .dashboard-tile-icon { font-size: 2rem; margin-bottom: 12px; } .dashboard-tile-icon svg { width: 34px; height: 34px; display: block; } .dashboard-tile h3 { margin: 0 0 8px; font-size: 1.1rem; } .dashboard-tile p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.4; } /* AB-F1123 (30.09.2026, Betreiber per Auswahl im Probelauf): Das Kachelfeld fuellt die Seite bis zum unteren Rand - "am unteren Rand des Bildschirms weniger freie Flaeche". Nur wo das Raster direkt in .wrap steht (Startseite, Dispo, Faktura, Personal); der Stundenhub im Mitarbeiterbereich liegt verschachtelt in einer Registerkarte. - .wrap wird eine Spalte mindestens so hoch wie das Fenster, das Raster nimmt den Rest (flex 1). Oberkante und Unterkante (padding) bleiben, wie sie sind (Pruefung 81). - Reihen: mindestens so hoch wie der Inhalt, sonst gleiche Teile. Im zu kleinen Fenster scrollt die Seite also weiter, statt Text abzuschneiden. - Eine Kachel wird hoechstens 260 px hoch; Rest verteilt sich zwischen die Reihen (align-items center). Sonst waere die eine Dispo-Kachel so hoch wie der Bildschirm. - Schrift und Symbol wachsen mit der Fensterhoehe (vh), nach unten begrenzt auf die bisherigen Werte - im kleinen Fenster aendert sich nichts. Auf Wunsch des Betreibers im selben Probelauf. - Alles erst ab 900 px Breite ("zumindest auf dem Desktop"); das Telefon bleibt, wie es war. Die Startseite setzt Schrift und Symbol in stile/dashboard.css (Block Weg D) mit denselben Werten. */ @media (min-width: 900px) { .wrap:has(> .dashboard-grid) { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; } .wrap > .dashboard-grid { flex: 1 1 auto; grid-auto-rows: minmax(min-content, 1fr); align-items: center; } .wrap > .dashboard-grid > .dashboard-tile { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; height: 100%; max-height: 260px; /* Ohne min-width 0 zaehlt die Mindestbreite des Inhalts als Spalten- minimum (1fr = minmax(auto, 1fr)): im Probelauf wurden die sechs Spalten ungleich und ragten 254 px rechts aus dem Bild. */ min-width: 0; } .wrap > .dashboard-grid > .dashboard-tile .dashboard-tile-icon svg { width: clamp(34px, min(4.5vh, 2.8vw), 56px); height: clamp(34px, min(4.5vh, 2.8vw), 56px); } /* Schrift waechst mit Hoehe UND Breite (min) - ein hohes, schmales Fenster bekaeme sonst grosse Schrift in schmalen Kacheln. Lange Woerter (Qualitaetssicherung) werden getrennt statt abgeschnitten. */ .wrap > .dashboard-grid > .dashboard-tile h3 { font-size: clamp(1.1rem, min(2.2vh, 1.3vw), 1.5rem); hyphens: auto; overflow-wrap: break-word; } .wrap > .dashboard-grid > .dashboard-tile p { font-size: clamp(0.88rem, min(1.4vh, 0.85vw), 1.05rem); } /* Unterseiten (Personal, Dispo, Faktura): Kachelfeld so breit wie auf der Startseite (stile/dashboard.css, 1400 px) - im 960er Feld wurde der Beschreibungstext der Kacheln sechs Zeilen hoch. */ .wrap:has(> .dashboard-grid):not(.startseite) { max-width: 1400px; } } /* AB-F1123, Unterseiten im NIEDRIGEN Fenster (Betreiber per Auswahl: "wie Startseite umbauen"). Gemessen bei 1366x633 vorher: Personal scrollte 354 px, Faktura 113, Dispo 50 - Seitennavigation, Ueberschrift, Chip und Beschreibungszeile brauchten 389 px bis zum Kachelfeld. - Querkachel als Raster: Symbol links ueber zwei Zeilen, rechts Titel und Beschreibung untereinander. - Anmeldechip rechts neben der Ueberschrift. top 226 px = Oberkante .wrap 168 + Seitennavigation 44 + 14 Abstand (gemessen auf Personal, Dispo, Faktura). Das Menue haengt an der Huelle dahinter und wandert mit (Begruendung wie in stile/dashboard.css). - Abstand ueber dem Kachelfeld 12 statt 28 px und unter der Seite 16 statt 60 px, wie auf der Startseite (.wrap.startseite oben, OF-4). Mit Querkacheln allein scrollte Personal bei 1366x633 noch 74 px. - Kachelabstand 12 statt 18 px, Beschreibung mit Zeilenhoehe 1.35. */ @media (min-width: 900px) and (max-height: 860px) { .wrap:has(> .dashboard-grid):not(.startseite) { position: relative; padding-bottom: 16px; } .wrap:has(> .dashboard-grid):not(.startseite) > p.lead { margin-bottom: 8px; } .wrap:not(.startseite) > .dashboard-grid { gap: 12px; } .wrap:not(.startseite) > .dashboard-grid > .dashboard-tile p { line-height: 1.35; } .wrap:not(.startseite) > .dashboard-grid { margin-top: 12px; } .wrap:not(.startseite) > .dashboard-grid > .dashboard-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: center; /* 14/8 statt 16/10: Personal scrollte bei 1366x633 sonst um 2 px. */ padding: 14px 16px 8px; } .wrap:not(.startseite) > .dashboard-grid > .dashboard-tile .dashboard-tile-icon { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; } .wrap:not(.startseite) > .dashboard-grid > .dashboard-tile h3 { margin: 0 0 2px; } } .small { font-size: 0.8rem; color: var(--muted); } .akte-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 22px 0; } .akte-kachel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; transition: border-color 0.15s; } .akte-kachel:hover { border-color: var(--accent); } .akte-kachel.active { border-color: var(--accent); background: var(--akzent-schleier-kachel); } .akte-kachel .akte-kachel-icon { font-size: 1.3rem; margin-bottom: 4px; } .akte-kachel .akte-kachel-icon svg { width: 24px; height: 24px; display: block; } .akte-kachel h3 { margin: 0; font-size: 0.92rem; } .akte-kachel:disabled { opacity: 0.4; cursor: default; } .akte-kachel:disabled:hover { border-color: var(--line); } a.link { color: var(--ink); text-decoration: underline; cursor: pointer; } /* OF-1 (30.08.2026): Hier stand ".topbar a.link" - die Farbe fuer die Verweise in der Kopfleiste. Es gibt dort keine mehr: die elf Rueckwege sind in die Navigationsleiste ueber der Ueberschrift gewandert, die drei Querverweise von uebersicht.html in die Seite selbst. Eine Regel ohne Ziel bleibt nicht stehen - sie sieht beim naechsten Lesen wie eine gebrauchte aus. */ /* ============================================================ Seitennavigation: Zurueck und Startseite (30.08.2026) ============================================================ Gebaut von setupSeitennavigation() in app.js, ueber der Ueberschrift jeder geschuetzten Seite. Vorher trugen 16 Seiten ein fest auf dashboard.html verdrahtetes "Start" in der Kopfleiste, zwei ein "Zurueck", und 21 Seiten gar nichts. Die Knoepfe sind Verweise (), keine