/* ============================================================================ messlog.css — Aussehen von MessLOG. Richtung "Werkbank". ---------------------------------------------------------------------------- Wird NACH app.css geladen und arbeitet in zwei Schichten: 1. TOKEN — die Farb- und Formvariablen von app.css werden neu gesetzt. Damit ändert sich alles, was app.css über var(...) zeichnet: rund 2200 Zeilen, ohne dass eine davon angefasst wird. 2. SCHICHT — darüber die Bausteine, die den heutigen Eindruck ausmachen: dunkle Seitenleiste, Kopfzeile, Knöpfe, Karten, Tabellen, Formulare, Zustands-Abzeichen, Fussleiste am Telefon. Warum so und nicht als Neubau: die Ansichten benutzen an über 1500 Stellen eigene Klassennamen (btn, feld-label, karte, seiten-kopf ...). Ein fremdes Baukasten-CSS hätte jede Seite zerlegt. Hier bleibt jede Ansicht unberührt. Farbe ändern? Nur den :root-Block unten anfassen. Feste Farbwerte stehen ABSICHTLICH nirgends sonst in dieser Datei. ========================================================================== */ /* --------------------------------------------------------------------------- 1. TOKEN ------------------------------------------------------------------------- */ /* Token (Farben, Formen) stehen seit UX-Delta 3 in assets/css/tokens.css, gemeinsam mit der Handy-Ansicht. Hier nichts mehr definieren. */ /* --------------------------------------------------------------------------- 2. GRUNDLAGE ------------------------------------------------------------------------- */body { background: var(--bg); -webkit-font-smoothing: antialiased; }h1, h2, h3 { letter-spacing: -.012em; } /* --------------------------------------------------------------------------- 3. KOPFZEILE ------------------------------------------------------------------------- */.topbar { background: var(--flaeche); border-bottom: 1px solid var(--rahmen); box-shadow: none; gap: 14px; }.marke { font-weight: 700; letter-spacing: -.02em; color: var(--text); display: inline-flex; align-items: center; gap: 9px; } /* Markenzeichen vor dem Namen – nur wenn KEIN eigenes Logo hinterlegt ist. Mit Logo würde es doppelt wirken. */.marke:not(:has(.marke-logo))::before { content: ""; width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--ml-marke); /* Becherglas, als Maske – so nimmt es jede Akzentfarbe an */ -webkit-mask: var(--ml-glas) center/15px 15px no-repeat; mask: var(--ml-glas) center/15px 15px no-repeat; background-color: var(--ml-marke); }:root { --ml-glas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v6l-5 9a2 2 0 0 0 2 3h12a2 2 0 0 0 2-3l-5-9V3'/%3E%3Cpath d='M9 3h6M7 15h10'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 4. SEITENLEISTE — der auffälligste Unterschied ------------------------------------------------------------------------- */.seitenleiste { background: var(--ml-nav); border-right: 0; color: var(--ml-nav-text); }.seitenleiste a, .sb-nav a { color: var(--ml-nav-text); border-radius: var(--radius-s); font-weight: 500; min-height: 38px; display: flex; align-items: center; gap: 10px; }.sb-nav a:hover { background: var(--ml-nav-2); color: var(--ml-nav-hell); }.sb-nav a[aria-current], .sb-nav a.ist, .sb-nav a.aktiv { background: var(--ml-nav-2); color: var(--ml-nav-hell); font-weight: 650; box-shadow: inset 3px 0 0 var(--ml-marke); } /* Gruppenüberschriften in der Leiste. FRÜHER zielte diese Regel auf .sb-gruppe – die Klasse gibt es im Markup gar nicht, die Regel war wirkungslos. Richtig sind .sb-bereich-titel (Bereichsname oben) und .kx-titel/.kx-gruppe in der Kontextspalte. */.sb-bereich-titel, .kx-titel, .kx-gruppe { font-size: 11px; /* 10 px Grossbuchstaben waren an der Lesegrenze */ letter-spacing: .13em; text-transform: uppercase; color: var(--ml-nav-leise); font-weight: 700; }.sb-konto { border-top: 1px solid var(--ml-nav-2); color: var(--ml-nav-text); }.sb-konto small { color: var(--ml-nav-leise); }.sb-konto .btn, .seitenleiste .btn-still { background: transparent; border-color: var(--ml-nav-2); color: var(--ml-nav-text); }.sb-konto .btn:hover { background: var(--ml-nav-2); color: var(--ml-nav-hell); } /* --------------------------------------------------------------------------- 5. SEITENKOPF ------------------------------------------------------------------------- */.seiten-kopf { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--abstand); align-items: flex-end; }.seiten-kopf h1 { font-size: 1.45rem; }.seiten-kopf .lead, .lead { color: var(--text-leise); } /* --------------------------------------------------------------------------- 6. KNÖPFE ------------------------------------------------------------------------- */.btn { border-radius: var(--radius-s); font-weight: 600; min-height: var(--ml-tab); box-shadow: none; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease; }.btn:hover { box-shadow: none; }.btn-still { background: var(--flaeche); color: var(--text); border-color: var(--rahmen); }.btn-still:hover { background: var(--bg); }.btn-klein { min-height: 32px; font-size: .84rem; padding: 5px 11px; }.btn-gefahr { background: var(--gefahr); border-color: var(--gefahr); color: var(--gefahr-ink); }.btn-voll { width: 100%; justify-content: center; }.btn-reihe { gap: 8px; } /* --------------------------------------------------------------------------- 7. KARTEN ------------------------------------------------------------------------- */.karte { border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten); }.karte > h2:first-child, .karte > h3:first-child { font-size: .96rem; letter-spacing: 0; } /* --------------------------------------------------------------------------- 8. TABELLEN — ruhiger, mit Zifferngleichlauf ------------------------------------------------------------------------- */.tabelle-huelle { border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; background: var(--flaeche); }.tabelle thead th { background: var(--flaeche-2); border-bottom: 1px solid var(--ml-fein); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ml-sehrleise); font-weight: 700; }.tabelle th, .tabelle td { border-color: var(--ml-fein); }.tabelle tbody tr:hover td { background: var(--flaeche-2); }.tabelle .rechts, .tabelle td.zahl, .tabelle .zahl { font-variant-numeric: tabular-nums; }.kv-tabelle th { color: var(--text-leise); font-weight: 600; } /* --------------------------------------------------------------------------- 9. ABZEICHEN — als Pille mit Punkt statt als Kasten ------------------------------------------------------------------------- */.badge { border-radius: 20px; padding: 3px 10px 3px 8px; font-size: .76rem; font-weight: 600; border: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--info-bg); color: var(--info-tf); }.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* Es gibt im Markup nur zwei Varianten: badge-ok und badge-aus. An einer Stelle steht ausserdem "badge aus" mit Leerzeichen – deshalb beide Formen. */.badge-ok { background: var(--ok-bg); color: var(--ok); }.badge-aus, .badge.aus { background: var(--info-bg); color: var(--text-leise); } /* -------------------------------------------------------------------------- 10. MELDUNGEN ------------------------------------------------------------------------- */.hinweis { border-radius: var(--radius); border: 0; border-left: 3px solid var(--akzent); background: var(--akzent-bg); color: var(--akzent-tf); }.hilfe { color: var(--ml-sehrleise); font-size: .8rem; } /* -------------------------------------------------------------------------- 11. FORMULARE — 16 px Schriftgrösse, sonst zoomt iOS beim Antippen hinein ------------------------------------------------------------------------- */.feld-label { font-size: .79rem; font-weight: 600; color: var(--text-leise); letter-spacing: .005em; }.feld input, .feld select, .feld textarea { font-size: 16px; min-height: var(--ml-tab); border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--flaeche); color: var(--text); }.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); box-shadow: none; }.feld-fehler { color: var(--gefahr); font-size: .79rem; }.formular-aktion { border-top: 1px solid var(--ml-fein); background: var(--flaeche-2); border-radius: 0 0 var(--radius) var(--radius); } /* -------------------------------------------------------------------------- 12. FUSSLEISTE AM TELEFON ------------------------------------------------------------------------- */.kio-tabbar { background: var(--ml-nav); border-top: 0; box-shadow: 0 -6px 20px -12px rgba(0,0,0,.6); }.kio-tabbar a, .kio-tabbar label { color: var(--ml-nav-text); min-height: 52px; }.kio-tabbar a.ist, .kio-tabbar a[aria-current] { color: var(--ml-marke); }.kio-tabbar a.ist svg, .kio-tabbar a[aria-current] svg { stroke: var(--ml-marke); } /* -------------------------------------------------------------------------- 13. HANDY-ANSICHT — ein Wert, gross und mittig ------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 14. FUSS ------------------------------------------------------------------------- */.fuss { background: transparent; border-top: 1px solid var(--rahmen); color: var(--ml-sehrleise); font-size: .8rem; }.fuss a { color: var(--text-leise); } /* -------------------------------------------------------------------------- 15. TESTLEISTE (Impersonation) — bewusst auffällig, sie darf stören ------------------------------------------------------------------------- */.testleiste { background: var(--ml-nav); color: var(--ml-nav-text); }.testleiste-aktiv { background: var(--gefahr); color: var(--gefahr-ink); } /* -------------------------------------------------------------------------- 16. DRUCK — Navigation weg, Flächen weiss ------------------------------------------------------------------------- */@media print { .topbar, .seitenleiste, .kio-tabbar, .fuss, .testleiste { display: none !important; } .shell, .shell-main, .inhalt { display: block; margin: 0; padding: 0; } .karte, .tabelle-huelle { border: 1px solid #ccc; box-shadow: none; } } /* ========================================================================== 17. KENNZAHL-KACHELN (Delta 005) Vier Zahlen über der Protokoll-Liste. Symbol links im farbigen Feld, Beschriftung klein, Zahl gross und mit Zifferngleichlauf. ========================================================================== */.ml-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: var(--abstand); }.ml-kachel { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten); padding: 14px 15px; display: flex; gap: 12px; align-items: center; }.ml-sym { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--akzent-bg); color: var(--akzent); }.ml-sym svg { width: 18px; height: 18px; }.ml-kachel.warn .ml-sym { background: var(--warn-bg); color: var(--warn); }.ml-kachel.gefahr .ml-sym { background: var(--gefahr-bg); color: var(--gefahr); }.ml-zahl small { display: block; font-size: .76rem; color: var(--text-leise); font-weight: 500; }.ml-zahl b { display: block; font-size: 1.55rem; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 1px; } /* ========================================================================== 18. SOLLBEREICHS-BALKEN (Delta 005) Unter jedem Messfeld mit Soll-Grenzen. Der helle Streifen ist der Sollbereich, der Strich der gemessene Wert. Damit muss niemand zwei Zahlen im Kopf vergleichen. ========================================================================== */.ml-band { position: relative; height: 6px; border-radius: 6px; background: var(--flaeche-2); border: 1px solid var(--rahmen); margin: 9px 0 0; }.ml-band-soll { position: absolute; top: 0; bottom: 0; background: var(--ok-bg); border-left: 1px solid var(--ok); border-right: 1px solid var(--ok); }.ml-band-aus .ml-band-soll { background: var(--warn-bg); border-color: var(--warn); }.ml-band-ist { position: absolute; top: -4px; width: 3px; height: 14px; border-radius: 2px; background: var(--text); transform: translateX(-1px); transition: left .12s ease; }.ml-band-aus .ml-band-ist { background: var(--gefahr); }.ml-band-text { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ml-sehrleise); margin-top: 4px; }.ml-band-wert { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-leise); }.ml-band-wert.ml-aus { color: var(--gefahr); } /* ========================================================================== 19. KACHELN ALS LINK, ZUSTANDS-PILLEN (Delta 006) ========================================================================== */ /* Anklickbare Kennzahl-Kacheln (Chemikalienlager: setzen den Filter). */a.ml-kachel { color: inherit; text-decoration: none; }a.ml-kachel:hover { border-color: var(--akzent); box-shadow: var(--schatten-l); }a.ml-kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } /* Ampel-Abzeichen (Bestand, Verfall, Kalibrierung) als Pille mit Punkt – dieselbe Sprache wie .badge, damit man sie überall gleich liest. */.kal-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; font-size: .78rem; font-weight: 600; border: 0; }.kal-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }.kal-keine { background: var(--info-bg); color: var(--text-leise); } /* Bestandsmenge in der Liste: Ziffern untereinander bündig. */.stamm-g .kal-status:first-child { font-variant-numeric: tabular-nums; } /* ========================================================================== 20. STARTSEITE (Delta 008) Die Kennzahlen benutzen jetzt dieselben Kacheln wie Lager und Labor (.ml-kacheln). Hier nur noch die Handlungs-Kästen und die Lagerkarte. ========================================================================== */ /* Handlungsbedarf: Symbol links, Beschriftung und Zahl rechts. Die Farbe trägt die Bedeutung, der Rahmen bleibt zurückhaltend – ein vollflächig roter Kasten schreit, ohne mehr zu sagen. */.dash-boxen { gap: 12px; }.dash-box { flex-direction: row; align-items: center; gap: 12px; padding: 14px 15px; border-radius: var(--radius); border: 1px solid var(--rahmen); background: var(--flaeche); box-shadow: var(--schatten); color: var(--text); }.dash-box:hover { filter: none; border-color: currentColor; box-shadow: var(--schatten-l); }.dash-box-sym { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; }.dash-box-sym svg { width: 18px; height: 18px; }.dash-box-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }.dash-box-label { font-size: .78rem; color: var(--text-leise); font-weight: 500; }.dash-box-wert { font-size: 1.55rem; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }.dash-box-wert small { color: var(--text-leise); }.dash-box.dash-gefahr { background: var(--flaeche); border-color: var(--rahmen); color: var(--gefahr); }.dash-box.dash-warn { background: var(--flaeche); border-color: var(--rahmen); color: var(--warn); }.dash-box.dash-info { background: var(--flaeche); border-color: var(--rahmen); color: var(--info-tf); }.dash-box.dash-gefahr .dash-box-sym { background: var(--gefahr-bg); color: var(--gefahr); }.dash-box.dash-warn .dash-box-sym { background: var(--warn-bg); color: var(--warn); }.dash-box.dash-info .dash-box-sym { background: var(--info-bg); color: var(--info-tf); } /* Die Zahl trägt die Warnfarbe – sie ist das, was man zuerst liest. */.dash-box.dash-gefahr .dash-box-wert { color: var(--gefahr); }.dash-box.dash-warn .dash-box-wert { color: var(--warn); }.dash-h2 { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ml-sehrleise); font-weight: 700; margin: 1.6rem 0 .7rem; } /* Lagerkarte und Bereichs-Einstiege */.dash-lager { border-radius: var(--radius); }.dash-bereich { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }.dash-bereich:hover { border-color: var(--akzent); box-shadow: var(--schatten-l); }.dash-bereich-n { color: var(--ml-sehrleise); font-size: .76rem; } /* ========================================================================== 21. ARTIKEL-ANSICHT (Delta 009) ========================================================================== */ /* Kachelwert, der keine reine Zahl ist ("12.5 l", "1'240.00"): etwas kleiner, sonst bricht er auf schmalen Bildschirmen um. */.ml-zahl b.ml-klein { font-size: 1.25rem; } /* Bestandsbalken: gefüllter Anteil bis zum gemessenen Bestand, senkrechte Marke beim Mindestbestand. Die Skala geht bis zum Dreifachen des Mindest- bestands – darüber ist die genaue Höhe unwichtig. */.ml-bestand { margin: 0 0 var(--abstand); }.ml-bestand .ml-band { height: 10px; margin-top: 0; overflow: hidden; }.ml-band-fuell { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ok); opacity: .55; transition: width .15s ease; }.ml-bestand-knapp .ml-band-fuell { background: var(--gefahr); opacity: .5; }.ml-band-marke { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .75; } /* Zustands-Pillen in der Seitenüberschrift etwas absetzen. */.seiten-kopf h1 .kal-status { font-size: .8rem; vertical-align: middle; margin-left: .5rem; } /* ========================================================================== 22. MESSPROTOKOLL AM TELEFON (Delta 010) ---------------------------------------------------------------------------- Erfasst wird mit Handschuhen, im Stehen, auf Armlänge. Deshalb hier NUR auf schmalen Bildschirmen: grosser Wert, grosse Treffflächen, Sollbereich direkt darunter. Die Zifferntastatur aus der Design-Vorschau ist bewusst NICHT gebaut — Begründung in ZUERST_LESEN. Stattdessen öffnet inputmode="decimal" weiterhin die Zifferntastatur des Telefons, die jeder kennt. ========================================================================== */@media (max-width: 640px) { /* Messzeile: Name oben, Wert gross darunter statt gequetscht daneben. */ .lab-item { padding: .85rem 0; } .lab-item-kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem .8rem; } .lab-mname { font-size: 1.02rem; } .lab-msoll { font-size: .82rem; } /* Der Wert ist das Wichtigste auf der Seite. */ .lab-ist, .t-ist { width: 6.6rem; min-height: 56px; font-size: 1.55rem; font-weight: 650; text-align: right; padding-right: .55rem; font-variant-numeric: tabular-nums; border-radius: var(--radius); border-width: 2px; } /* Bewertung sofort sichtbar: der Rahmen färbt sich beim Tippen mit. */ .lab-ist.g-ok { border-color: var(--ok); background: var(--ok-bg); } .lab-ist.g-unter, .lab-ist.g-ueber { border-color: var(--gefahr); background: var(--gefahr-bg); } /* Sollbereichs-Balken (Delta 005) auf dem Telefon kräftiger. */ .ml-band { height: 9px; margin-top: 11px; } .ml-band-ist { height: 17px; top: -5px; width: 4px; } .ml-band-text { font-size: .8rem; } /* Massnahme und Bemerkung untereinander – nebeneinander ist auf 360 px keine Bedienung, sondern Zielen. */ .lab-zusatz { flex-direction: column; gap: .5rem; } .lab-mass, .lab-bem { flex: 1 1 auto; width: 100%; min-height: var(--ml-tab); } /* Speichern bleibt am unteren Rand erreichbar, ohne die Leiste zu verdecken. */ .lab-aktion .btn { min-height: 50px; font-size: 1rem; } } /* Handy-Einstieg des Labors: die Typen als grosse Flächen. */ /* ========================================================================== 23. ANMELDESEITE (Delta 012) Die erste Seite, die jeder sieht – und die einzige, die auch Fremde zu Gesicht bekommen. Bisher unverändert aus der alten Anwendung. ========================================================================== */.auth-huelle { /* KEIN vh: In der als App verpackten Ansicht ist vh oft 0 – die Anmeldeseite verlöre dann ihre Mitte und klebte oben am Rand. Fester Wert in Pixeln, der auf jedem Gerät trägt. */ min-height: 560px; align-items: center; padding: 42px 1rem; background: radial-gradient(60rem 30rem at 50% -12%, var(--akzent-bg), transparent 70%); }.auth-karte { width: 100%; max-width: 25rem; padding: 2rem 1.9rem 1.7rem; border-radius: 14px; border: 1px solid var(--rahmen); background: var(--flaeche); box-shadow: var(--schatten-l); } /* Markenzeichen über dem Namen – nur wenn kein eigenes Logo hinterlegt ist. */.auth-titel { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 .15rem; }.auth-titel::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto .9rem; border-radius: 13px; background-color: var(--ml-marke); -webkit-mask: var(--ml-glas) center/24px 24px no-repeat; mask: var(--ml-glas) center/24px 24px no-repeat; }.auth-karte .feld input { min-height: 46px; font-size: 16px; }.auth-karte .btn-voll { min-height: 48px; font-size: 1rem; margin-top: .3rem; }.auth-karte .feld-check { margin: .2rem 0 .4rem; }.pw-fuss { text-align: center; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ml-fein); font-size: .88rem; }.pw-fuss a { color: var(--text-leise); }.pw-fuss a:hover { color: var(--akzent); } /* ========================================================================== 24. WIEDERKEHRENDE BAUSTEINE (Delta 012) Diese wenigen Klassen kommen auf fast jeder Seite vor. Sie hier einmal zu gestalten trifft rund 60 Ansichten, ohne eine davon anzufassen. ========================================================================== */ /* Seitenkopf mit Aktionsknopf rechts (56 Ansichten). */.seiten-kopf.mit-aktion { gap: 1rem; }.seiten-kopf.mit-aktion > :last-child { margin-left: auto; } /* Abschnitts-Überschriften (21 Ansichten): gliedern, nicht konkurrieren. */.abschnitt-kopf h2, .titel-sek { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ml-sehrleise); font-weight: 700; }.abschnitt-kopf { margin-top: calc(var(--abstand) * 1.5); } /* Feldzeilen (66 Ansichten): etwas mehr Luft, damit Formulare atmen. */.feld-row { gap: 1rem; } /* Reiter mit Zähler (19 Ansichten). */.lab-tab { border-radius: var(--radius-s); padding: .5rem .85rem; min-height: 36px; font-weight: 500; }.lab-tab .cnt { font-weight: 700; }.lab-tab.aktiv { box-shadow: var(--schatten); } /* Listen-Karten (Becken, Grössen, Bestellvorschlag, Stammdaten). */.stamm-bad { border-radius: var(--radius); box-shadow: var(--schatten); padding: .9rem 1.1rem; }.stamm-bad-kopf h3 { font-size: .98rem; }.stamm-g { border-top-color: var(--ml-fein); padding: .7rem 0; }.stamm-g .gname { font-weight: 600; }.stamm-g .gmeta, .stamm-g .gsoll { font-size: .84rem; }.stamm-g .gmeta { font-variant-numeric: tabular-nums; }.stamm-akt .btn { min-height: 34px; } /* Zurück-Verweis über der Überschrift. */.zurueck { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; }.zurueck:hover { color: var(--akzent); } /* ========================================================================== 25. BESTELLUNGEN, INVENTUR UND KLEINKRAM (Delta 012) Die beiden Lagerseiten benutzen dieselben Bausteine wie oben (stamm-bad, stamm-g, lab-tab, kal-status) – hier nur noch ihre eigenen Klassen. ========================================================================== */ /* Kopfzeile einer Bestell- oder Vorschlagszeile: Name und Beiwerk auf einer Linie, aber der Name führt. */.dok-zeile-haupt { gap: .55rem; }.dok-zeile-haupt .gname { font-size: .98rem; } /* Auswahlfelder der Inventur: als antippbare Flächen statt nackter Ankreuzfelder. Die Inventur macht man am Regal, oft mit Handschuh. */.inv-spalten label, .inv-opt label { min-height: var(--ml-tab); padding: .35rem .7rem .35rem .55rem; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--flaeche); font-size: .92rem; }.inv-spalten label:hover, .inv-opt label:hover { border-color: var(--akzent); }.inv-spalten label:has(input:checked), .inv-opt label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-bg); color: var(--akzent-tf); font-weight: 600; }.bereiche-box { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche-2); padding: .9rem 1.1rem; }.bereiche-box legend { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ml-sehrleise); font-weight: 700; padding: 0 .35rem; } /* Kleine Formulare mitten im Text (47 Ansichten): Knopf und Feld auf einer Linie, ohne dass die Zeile auseinanderfällt. */.inline { display: inline-flex; align-items: center; gap: .4rem; } /* Schmales Feld in einer Feldzeile (29 Ansichten). */.feld.eng { flex: 0 1 9rem; } /* ========================================================================== 26. SEITENLEISTE UND KONTEXTSPALTE, RICHTIG GETROFFEN (Delta 013) ---------------------------------------------------------------------------- Die Hauptnavigation benutzt .sb-link / .sb-sum / .sb-sub / .sb-badge, die Kontextspalte daneben .kx-titel / .kx-gruppe / .kx-link. Beide standen bisher nur in den alten Farben da. ========================================================================== */.sb-link, .sb-sum, .sb-sum-link, .sb-bereich-titel, .sb-bereich-link { color: var(--ml-nav-text); }.sb-link { min-height: 38px; border-radius: var(--radius-s); border-left: 3px solid transparent; font-weight: 500; }.sb-link:hover, .sb-sum:hover { background: var(--ml-nav-2); color: var(--ml-nav-hell); }.sb-link[aria-current] { background: var(--ml-nav-2); color: var(--ml-nav-hell); border-left-color: var(--ml-marke); font-weight: 650; }.sb-sum { color: var(--ml-nav-hell); min-height: 38px; border-radius: var(--radius-s); }.sb-sum::before { color: var(--ml-nav-leise); }.sb-sum-link:hover, .sb-sum-link[aria-current] { color: var(--ml-marke); }.sb-sub { border-left-color: var(--ml-nav-2); } /* Der Zähler am Menüpunkt – im Markup längst vorhanden, nie gestaltet. */.sb-badge { background: var(--gefahr); color: var(--gefahr-ink); font-variant-numeric: tabular-nums; padding: .16rem .46rem; } /* Bereichsname ganz oben in der Leiste. */.sb-bereich-titel { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ml-nav-leise); font-weight: 700; }.sb-bereich-link:hover, .sb-bereich-auf { color: var(--ml-marke); } /* Die Kontextspalte gibt es seit Delta 019 nicht mehr – ihre dritte Ebene steht jetzt eingerückt in der Seitenleiste. Die Regeln für .kx-* bleiben stehen: sie werden im klassischen Menü-Stil weiterhin gezeichnet. */.kx-titel, .kx-gruppe { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ml-sehrleise); font-weight: 700; }.kx-link { border-radius: var(--radius-s); min-height: 34px; display: flex; align-items: center; color: var(--text-leise); }.kx-link:hover { background: var(--flaeche-2); color: var(--text); }.kx-link.kx-auf { background: var(--akzent-bg); color: var(--akzent-tf); font-weight: 650; box-shadow: inset 2px 0 0 var(--akzent); } /* Benutzer unten in der Leiste: Kürzel im Kreis, wie in der Vorschau. */.sb-konto { display: flex; align-items: center; gap: .6rem; }.sb-konto::before { content: attr(data-kuerzel); width: 30px; height: 30px; border-radius: 50%; background: var(--akzent); color: var(--akzent-ink); display: grid; place-items: center; font-size: .72rem; font-weight: 700; flex: none; letter-spacing: .02em; } /* ========================================================================== 27. HINWEISE UND MELDUNGEN MIT SYMBOL (Delta 013) ---------------------------------------------------------------------------- Das Symbol wird per CSS erzeugt – kein Eingriff in die 113 Ansichten nötig, die einen Hinweis zeigen. ACHTUNG, alte Falle: Es gibt KEINE Varianten .hinweis-ok/.hinweis-fehler. Der Hinweis ist immer neutral; Erfolg und Fehler laufen über die Flash-Meldungen (.flash-erfolg / .flash-fehler / .flash-info). Die beiden Varianten-Regeln aus Delta 004 waren wirkungslos und sind entfernt. ========================================================================== */.hinweis { display: flex; gap: .7rem; align-items: flex-start; }.hinweis::before { content: ""; width: 19px; height: 19px; flex: none; margin-top: 1px; background-color: currentColor; -webkit-mask: var(--ml-info) center/19px 19px no-repeat; mask: var(--ml-info) center/19px 19px no-repeat; }:root { --ml-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E"); --ml-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.6 2.6L16 9.7'/%3E%3C/svg%3E"); --ml-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v5M12 17h.01'/%3E%3C/svg%3E"); } /* ========================================================================== 28. ZWEIZEILIGE HAUPTZELLE MIT KÜRZEL (Delta 013) Name gross, Nummer und Ort klein darunter, davor eine Plakette mit den ersten zwei Buchstaben. Spart eine Spalte und liest sich schneller. ========================================================================== */.ml-haupt { display: flex; align-items: center; gap: .7rem; min-width: 0; }.ml-av { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--flaeche-2); color: var(--text-leise); font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }.ml-haupt b { display: block; font-weight: 600; line-height: 1.25; }.ml-haupt span { display: block; color: var(--text-leise); font-size: .8rem; font-variant-numeric: tabular-nums; } /* Zustand rechts in der Zeile, nicht vor dem Namen. */.ml-haupt { flex: 1 1 auto; }.ml-zustand { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; flex: none; } @media (max-width: 560px) {.ml-haupt { flex-wrap: wrap; }.ml-zustand { margin-left: 42px; width: 100%; }} /* Flash-Meldungen: Symbol je nach Art, Rahmen nur links statt rundum. */.flash { display: flex; gap: .7rem; align-items: flex-start; border: 0; border-left: 3px solid currentColor; border-radius: var(--radius); padding: .8rem 1rem; }.flash::before { content: ""; width: 19px; height: 19px; flex: none; margin-top: 1px; background-color: currentColor; -webkit-mask: var(--ml-info) center/19px 19px no-repeat; mask: var(--ml-info) center/19px 19px no-repeat; }.flash-erfolg::before, .flash-ok::before { -webkit-mask-image: var(--ml-haken); mask-image: var(--ml-haken); }.flash-fehler::before { -webkit-mask-image: var(--ml-warn); mask-image: var(--ml-warn); } /* 'ok' kommt an einzelnen Stellen statt 'erfolg' vor – gleich behandeln. */.flash-ok { background: var(--ok-bg); color: var(--ok); } /* ========================================================================== 29. PROTOKOLL-LISTE, DER LAGERLISTE ANGEGLICHEN (Delta 014) ---------------------------------------------------------------------------- Die Chemikalienliste bekam in Delta 013 die zweizeilige Zeile mit Kürzel-Plakette. Die Protokoll-Liste blieb einspaltig – zwei Listen, zwei Bauformen. Hier angeglichen, ohne die Ansicht anzufassen: das Kürzel des Protokolltyps (VB, TE …) wird zur Plakette, Uhrzeit und Prüfer rutschen darunter. ========================================================================== */.prot-zeile { padding: .7rem 0; border-top-color: var(--ml-fein); } /* Kürzel des Typs als Plakette – wie .ml-av in der Lagerliste. Steht ein Typ-Filter an, fehlt das Kürzel; dann rückt die Uhrzeit vor. */.prot-zeit { /* Steht ein Typ-Filter an, fehlt die Plakette. Dann soll die Uhrzeit vorrücken statt eine leere Spalte stehen zu lassen – der Kommentar oben versprach das, die Regel erzwang aber Spalte 2. */ grid-column: 2; font-size: 1rem; font-weight: 600; color: var(--text); }.prot-ma { grid-column: 2; grid-row: 2; font-size: .8rem; } /* Ohne Typ-Kürzel: die beiden Spalten links zusammenziehen. Früher stand hier :not(:has(.prot-typ)). Das kennt die WebView auf älteren Android-Geräten nicht – und dort steht das Hallen-Tablet. Die Ansicht setzt die Klasse jetzt selbst. */.prot-tag-kopf { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ml-sehrleise); font-weight: 700; border-top-color: var(--rahmen); }.prot-tagnav-d { font-size: 1rem; } /* ========================================================================== 30. AM TELEFON: DER WERT GROSS UND MITTIG (Delta 014) ---------------------------------------------------------------------------- In Delta 010 wurde das Feld nur breiter. Aus der Vorschau fehlte, dass der Wert die Zeile beherrscht. Jetzt: Name oben, darunter das Feld über die volle Breite, zentriert, sehr gross – der Sollbereichs-Balken direkt darunter. Die Zifferntastatur des Telefons bleibt (siehe Delta 010). ========================================================================== */@media (max-width: 640px) { .lab-item-kopf { grid-template-columns: 1fr; } .lab-mname { font-size: 1.05rem; font-weight: 600; } .lab-msoll { font-size: .84rem; margin-bottom: .2rem; } .lab-ist, .t-ist { width: 100%; min-height: 68px; font-size: 2.1rem; font-weight: 700; text-align: center; padding: 0 .4rem; letter-spacing: -.02em; } /* Die Einheit steht im Markup direkt hinter dem Namen – dort bleibt sie auch. Sie unter das Feld zu schieben hätte bedeutet, das Markup zu ändern, und "(l)" neben dem Namen liest sich ohnehin natürlicher. */ .lab-einheit { color: var(--text-leise); font-weight: 400; } } /* ========================================================================== 31. SEITENLEISTE MIT SYMBOLEN, FUSS FEST VERANKERT (Delta 015) ---------------------------------------------------------------------------- Drei gemeldete Punkte in einem Zug: - der Fuss klebte direkt unter dem letzten Menüpunkt statt unten - der Schriftzug "Abmelden" machte die Leiste so breit, dass sie waagrecht scrollte - die farbige Umrandung links am aktiven Punkt gefiel nicht ========================================================================== */ /* Die Leiste ist eine Spalte: Navigation oben, Konto ganz unten. */.seitenleiste { display: flex; flex-direction: column; overflow-x: hidden; /* nichts darf waagrecht schieben */ }.sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }.sb-konto { margin-top: auto; flex: none; } /* Symbol vor jedem Menüpunkt. Der aktive Punkt wird als Ganzes gefüllt – die farbige Kante links entfällt, das Symbol trägt jetzt die Farbe. */.sb-link, .sb-sum-link { display: flex; align-items: center; gap: .6rem; min-width: 0; }.sb-link > span, .sb-sum-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mi { width: 17px; height: 17px; flex: none; opacity: .8; }.sb-link[aria-current] { border-left-color: transparent; /* farbige Kante weg */ background: var(--ml-nav-2); color: var(--ml-nav-hell); }.sb-link[aria-current] .mi { opacity: 1; color: var(--ml-marke); }.sb-link:hover .mi { opacity: 1; }.sb-sum-link[aria-current] .mi { color: var(--ml-marke); } /* Konto-Zeile: Kürzel, Name, Symbol – mehr passt nicht in 232 Pixel. */.sb-konto { display: flex; align-items: center; gap: .55rem; padding: .7rem .75rem; border-top: 1px solid var(--ml-nav-2); min-width: 0; }.sb-konto-name { flex: 1 1 auto; min-width: 0; color: var(--ml-nav-text); line-height: 1.2; overflow: hidden; }.sb-konto-name:hover { color: var(--ml-nav-hell); }.sb-konto-name, .sb-konto-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sb-konto-name small { font-size: .72rem; color: var(--ml-nav-leise); }.sb-abmelden { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ml-nav-2); border-radius: var(--radius-s); background: transparent; color: var(--ml-nav-text); cursor: pointer; padding: 0; }.sb-abmelden svg { width: 17px; height: 17px; }.sb-abmelden:hover { background: var(--ml-nav-2); color: var(--ml-nav-hell); }.sb-abmelden:focus-visible { outline: 2px solid var(--ml-marke); outline-offset: 1px; } /* Symbole auch in der Kontextspalte – dort aber gedeckt, sie ist hell. */.kx-link .mi { opacity: .65; }.kx-link.kx-auf .mi { opacity: 1; color: var(--akzent); } /* ========================================================================== 32. FARBIGE KANTEN ENTFERNT (Delta 015) ========================================================================== */ /* Hinweiskasten: die blaue Kante links war zu laut. Der Kasten trägt seine Bedeutung über Fläche und Symbol, das reicht. */.hinweis { border-left: 0; padding-left: 1rem; } /* Bereichskacheln (z. B. auf /labor). Die 4 px breite Akzentkante links ist entfallen. An ihre Stelle tritt das Symbol des Ziels – dasselbe wie im Menü, damit ein Bereich überall dasselbe Zeichen trägt. Die Kacheln sind grösser, damit der Text ohne Gedränge hineinpasst. */.kachel-gitter { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }.kachel { border-left: 1px solid var(--rahmen); padding: 1.35rem 1.4rem; min-height: 118px; flex-direction: row; align-items: flex-start; gap: .95rem; }.kachel:hover { transform: none; border-color: var(--akzent); box-shadow: var(--schatten-l); }.kachel-sym { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--akzent-bg); color: var(--akzent); }.kachel-sym .mi { width: 22px; height: 22px; opacity: 1; }.kachel:hover .kachel-sym { background: var(--akzent); color: var(--akzent-ink); }.kachel-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }.kachel-titel { font-size: 1.05rem; font-weight: 650; line-height: 1.3; }.kachel-text { color: var(--text-leise); font-size: .9rem; line-height: 1.45; } /* ========================================================================== 33. RAUM (Delta 018) ---------------------------------------------------------------------------- WARUM DAS HIER STEHT: Die Werbebilder wirkten deutlich ruhiger als die Anwendung – bei identischen Farben. Der Vergleich der Zahlen zeigte, dass es nicht an der Farbe lag, sondern am Platz: Merkmal Anwendung Nachbau Abstand 16 px 24-34 px Tabellenzelle 10 x 13 px 14 x 18 px Kartenpolster 16 px 26 px Zeilenhöhe 1.55 1.65 H1 26 px 30 px Inhaltsbreite 1080 px 1270 px Das Auge liest "unruhig", wo Zeichen dicht stehen – auch wenn jede einzelne Farbe stimmt. Zwei Werte tragen dabei fast alles: --abstand wird an 40 Stellen benutzt, --max-breite an 4. Sie hier neu zu setzen wirkt in der ganzen Anwendung, ohne dass eine Ansicht angefasst wird. ========================================================================== */:root { /* Von 16 auf 22 px. Das ist der eine Hebel: Innenabstände der Karten, Ränder des Inhalts, Abstände zwischen Abschnitten, die abgeleiteten Werte --abstand-s und --abstand-l – alles zieht mit. */ --abstand: 22px; /* Von 1080 auf 1240 px. Auf einem 1920er Bildschirm blieben vorher 590 Pixel ungenutzt (30 %), während die Tabellen daneben eng standen. Weiter als 1240 würde ich nicht gehen: Zeilen, die über die ganze Breite laufen, sind schwerer zu lesen, nicht leichter. */ --max-breite: 1240px; } /* Etwas mehr Zeilenluft. Kostet Platz, den wir oben gewonnen haben. */body { line-height: 1.62; } /* Überschriften: Die Anwendung hatte eine sehr flache Stufung (26/19 px). Damit sieht jede Seite gleich wichtig aus. */h1 { font-size: 1.85rem; margin-bottom: .35rem; }h2 { font-size: 1.3rem; }.seiten-kopf h1 { font-size: 1.85rem; } /* Tabellen atmen lassen – das ist die Ansicht, in der man am längsten liest. */.tabelle th, .tabelle td { padding: .85rem 1.1rem; }.tabelle thead th { padding-top: .7rem; padding-bottom: .7rem; } /* Knöpfe: 44 px Mindesthöhe gab es schon, aber sie klebten am Text. */.btn { padding: .7rem 1.15rem; }.btn-klein { padding: .4rem .85rem; } /* Karten: das Polster kommt aus --abstand und wächst damit von selbst mit. Hier nur der Abstand ZWISCHEN Karten, der sonst zu knapp bleibt. */.karte + .karte { margin-top: calc(var(--abstand) * .9); } /* Formulare: mehr Luft zwischen den Feldern, damit Beschriftung und Feld zusammengehörig wirken statt als durchgehende Kolonne. */.feld { margin-bottom: calc(var(--abstand) * .75); }.feld-row { gap: calc(var(--abstand) * .85); } /* Listenkarten (Bestand, Bestellungen, Stammdaten). */.stamm-bad { padding: 1.1rem 1.3rem; }.stamm-g { padding: .85rem 0; } /* AM TELEFON ZURÜCK AUF ENG: Auf 360 Pixeln ist Luft kein Gewinn, sondern Scrollweg. Dort gilt wieder der alte Wert. */@media (max-width: 640px) { :root { --abstand: 16px; } h1, .seiten-kopf h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } .tabelle th, .tabelle td { padding: .65rem .8rem; } } /* ========================================================================== 34. DRITTE MENÜEBENE IN DER SEITENLEISTE (Delta 019) ---------------------------------------------------------------------------- Ersetzt die rechte Kontextspalte. Sie erscheint nur unter dem geöffneten Punkt und ist eingerückt, damit die Zugehörigkeit ohne Rahmen erkennbar ist. ========================================================================== */.sb-unterliste { margin: 2px 0 8px; padding-left: 27px; /* auf Höhe des Symbols darüber */ border-left: 1px solid var(--ml-nav-2); margin-left: 16px; }.sb-unter { display: block; padding: 6px 10px; border-radius: var(--radius-s); color: var(--ml-nav-leise); font-size: 13.5px; line-height: 1.35; min-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.sb-unter:hover { color: var(--ml-nav-hell); background: var(--ml-nav-2); }.sb-unter-auf { color: var(--ml-marke); font-weight: 650; } /* Der offene Punkt bekommt keinen unteren Radius mehr – Punkt und Unterliste sollen als ein Block wirken, nicht als zwei Dinge übereinander. */.sb-link-auf { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Die Kontextspalte wird nicht mehr ausgegeben. Falls sie je zurückkommt, steht ihre Gestaltung weiter oben in Abschnitt 26. */ /* ========================================================================== 35. ZIFFERNTASTATUR AM TELEFON (Delta 027) ---------------------------------------------------------------------------- Wahlweise – der Benutzer entscheidet vor der Eingabe. Voreingestellt bleibt die Tastatur des Telefons, weil sie jeder kennt. ACHTUNG WEBVIEW: Keine Höhe in vh oder dvh. In der als App verpackten Ansicht sind beide oft 0, die Tastatur wäre dann unsichtbar. Alle Masse hier stehen in Pixeln. ========================================================================== */ /* --- Umschalter ------------------------------------------------------- */ /* am Bildschirm nie */ /* --- Die Tastatur selbst ---------------------------------------------- */ /* ========================================================================== 36. WERTE AUS EINEM FOTO (Delta 028) ---------------------------------------------------------------------------- Ein Vorschlag muss als Vorschlag ERKENNBAR sein. Ein gelb hinterlegtes Feld sagt: hier hat niemand hingesehen. Sobald der Prüfer es anfasst, wird es ein normales Feld – und damit sein Wert. ========================================================================== */ /* Das vorgeschlagene, noch ungeprüfte Feld. */.ist-vorschlag { background: var(--warn-bg) !important; border-color: var(--warn) !important; box-shadow: inset 0 0 0 1px var(--warn); } /* ========================================================================== 37. FRAGEN AM TELEFON (Delta 032) ---------------------------------------------------------------------------- Vollflächig statt Sprechblase: Am Bad hat man eine Hand frei und Handschuhe an. Keine Höhe in vh – in der WebView wäre sie oft 0. ========================================================================== */ /* Diagnose-Aufklapper auf der Wissensseite */.ki-diag { margin: 1rem 0; }.ki-diag summary { cursor: pointer; font-weight: 650; padding: .4rem 0; min-height: 34px; } /* ========================================================================== 38. ENTWURFS-HINWEIS (Delta 039) ---------------------------------------------------------------------------- Die Leiste wird in app.js zusammengebaut (Text + zwei Knöpfe) – für ihre Klasse .entwurf-hinweis gab es aber NIE eine Regel. Text und Knöpfe klebten deshalb aneinander, ohne Abstand und ohne erkennbare Fläche. Sie erscheint über dem Formular, wenn nicht gespeicherte Eingaben im Gerät liegen. Bewusst auffällig: Wer sie übersieht, tippt alles noch einmal. ========================================================================== */.entwurf-hinweis { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 var(--abstand); padding: .8rem 1rem; background: var(--warn-bg); border: 1px solid var(--warn); border-left-width: 3px; border-radius: var(--radius); font-size: .93rem; color: var(--text); } /* Der Text nimmt den Platz, die Knöpfe rücken nach rechts. */.entwurf-hinweis > span { flex: 1 1 220px; min-width: 0; }.entwurf-hinweis .btn { flex: none; } @media (max-width: 640px) { /* Am Telefon untereinander: nebeneinander werden die Knöpfe zu schmal, und "Verwerfen" darf man nicht aus Versehen treffen. */.entwurf-hinweis { flex-direction: column; align-items: stretch; gap: .5rem; }.entwurf-hinweis > span { margin-bottom: .2rem; }.entwurf-hinweis .btn { width: 100%; justify-content: center; min-height: 44px; }} /* ========================================================================== 39. HANDY-ANSICHT — randlose Liste (Delta 042) ---------------------------------------------------------------------------- ERSETZT den Block aus Delta 041. Dort hatte ich Symbole und Schrift mitvergrössert – das war falsch: Grösser trifft man nur, wo der Finger hingeht. Symbole und Überschriften fressen nur Platz. Jetzt gilt getrennt: Tippfläche mindestens 56 px hoch (Norm sind 44–48) Symbole 1.25 rem, also KLEINER als vorher Schrift wie am Bildschirm, nicht grösser Und: keine Karten mehr. Karten in einer Liste sind Verpackung um Verpackung – auf 390 Pixeln Breite gewinnt man damit nichts. Trennlinien reichen, die Liste wirkt ruhiger und zeigt mehr auf einen Blick. ========================================================================== */ /* ========================================================================== TASTATURWAHL, ZIFFERNBLOCK UND FOTO-KASTEN ---------------------------------------------------------------------------- Diese Regeln gehören NICHT nach handy.css, obwohl sie nur am Telefon sichtbar werden: Das Erfassungsformular gibt es auch am Bildschirm, und dort muss .tw und .zt AUSGEBLENDET bleiben. Läge die Regel in einer Datei, die am Bildschirm gar nicht geladen wird, erschienen Umschalter und Zifferntastatur dort ungestylt mitten im Formular. Der Foto-Kasten (.kif) wird am Bildschirm sogar BENUTZT – er darf erst recht nicht in eine Handy-Datei. ========================================================================== */.tw { display: none; }.tw[hidden] { display: none !important; }.tw { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .7rem .85rem; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); /* --r stammte aus dem Website-Projekt */ }.tw-knoepfe { display: flex; gap: 4px; margin-left: auto; }.tw-knopf { border: 1px solid var(--rahmen); background: var(--flaeche); color: var(--text-leise); font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 13px; min-height: 40px; border-radius: var(--radius-s); cursor: pointer; }.tw-knopf[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-ink); }.zt { display: none; }.zt { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--flaeche); border-top: 1px solid var(--rahmen); box-shadow: 0 -10px 30px -14px rgba(0,0,0,.45); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }.zt[hidden] { display: none; }body.zt-offen { padding-bottom: 330px; }.zt-kopf { display: flex; align-items: center; gap: 10px; padding: 2px 6px 8px; }.zt-feld { font-size: .85rem; font-weight: 650; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.zt-zu { margin-left: auto; width: 38px; height: 38px; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--flaeche); color: var(--text-leise); font-size: 20px; line-height: 1; cursor: pointer; }.zt-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.zt-taste { min-height: 58px; font: inherit; font-size: 1.55rem; font-weight: 650; font-variant-numeric: tabular-nums; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius-s); color: var(--text); cursor: pointer; /* Kein Doppeltipp-Zoom und keine Textauswahl beim schnellen Tippen. */ touch-action: manipulation; -webkit-user-select: none; user-select: none; }.zt-taste:active { background: var(--akzent-bg); border-color: var(--akzent); }.zt-loesch { font-size: 1.25rem; color: var(--gefahr); }.zt-fuss { display: flex; gap: 7px; margin-top: 7px; }.zt-minus { width: 33%; min-height: 52px; font: inherit; font-size: 1.4rem; font-weight: 650; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius-s); color: var(--text); touch-action: manipulation; cursor: pointer; }.zt-weiter { flex: 1; min-height: 52px; font: inherit; font-size: 1rem; font-weight: 700; background: var(--akzent); border: 1px solid var(--akzent); border-radius: var(--radius-s); color: var(--akzent-ink); touch-action: manipulation; cursor: pointer; }.kif { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .85rem 1rem; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-left: 3px solid var(--akzent); border-radius: var(--radius); }.kif-text { flex: 1 1 240px; min-width: 0; }.kif-text strong { display: block; font-size: .95rem; }.kif-text .hilfe { display: block; margin-top: .1rem; }.kif-knopf { flex: none; min-height: var(--ml-tab); }.kif-knopf[disabled] { opacity: .55; cursor: default; }.kif-meldung { flex: 1 1 100%; margin: .2rem 0 0; font-size: .86rem; font-weight: 600; } /* Am Telefon untereinander, am Bildschirm Text links und Knopf rechts. Die beiden Regeln standen ohne Medienabfrage da; dann wurde die 240px-Basis von .kif-text in der Spalte zur Höhe und der Kasten am Bildschirm über 300 px hoch, fast leer. */@media (max-width: 640px) { .kif { flex-direction: column; align-items: stretch; } .kif-text { flex: none; } .kif-knopf { width: 100%; justify-content: center; min-height: 50px; font-size: 1rem; } } /* ========================================================================== 30. PROTOKOLL-LISTE MIT AMPEL UND KLARTEXT (UX-Delta 2) ---------------------------------------------------------------------------- Die Zeile ist ein Link (ganze Fläche klickbar), links ein Ampelpunkt, dann Typ + Untertitel, Uhrzeit, Erfasser, Klartext (Abweichung oder Fortschritt), Status-Pille, Pfeil. Die Knöpfe Ansehen/Bearbeiten/Löschen sind in der Detailansicht. Statusfarben: Grün = in Ordnung/abgeschlossen, Gelb = offen/fällig, Rot = Abweichung, Grau = noch leer. ========================================================================== */.prot-liste .prot-link { display: grid; grid-template-columns: 14px minmax(14rem, 1.6fr) 3.2rem 6.5rem 2fr auto 1rem; align-items: center; gap: .2rem .85rem; padding: .7rem .2rem; border-top: 1px solid var(--ml-fein); color: inherit; text-decoration: none; }.prot-liste .prot-link:hover, .prot-liste .prot-link:focus-visible { background: var(--flaeche-2); outline: 2px solid var(--akzent); outline-offset: -2px; }.prot-liste .prot-tag-kopf + .prot-link { border-top: 0; }.prot-ampel { width: 12px; height: 12px; border-radius: 50%; background: var(--rahmen); }.prot-ampel.a-ok { background: var(--ok); }.prot-ampel.a-nok { background: var(--gefahr); }.prot-ampel.a-offen { background: var(--warn); }.prot-titel { min-width: 0; }.prot-titel b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.prot-titel small { display: block; color: var(--text-leise); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.prot-link .prot-zeit { grid-column: auto; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }.prot-link .prot-ma { grid-column: auto; grid-row: auto; font-size: .85rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.prot-info { font-size: .88rem; color: var(--text-leise); min-width: 0; }.prot-info.ist-abw { color: var(--gefahr); font-weight: 600; }.prot-info small { color: var(--text-leise); font-weight: 400; }.prot-pfeil { color: var(--ml-sehrleise); font-size: 1.2rem; text-align: right; }.badge-warn { background: var(--warn-bg, #fff4e0); color: var(--warn, #8a5a06); } @media (max-width: 900px) {.prot-liste .prot-link { grid-template-columns: 12px 1fr auto; grid-template-areas: "a t z" "a i i" "a s s"; gap: .25rem .6rem; }.prot-ampel { grid-area: a; align-self: start; margin-top: .45rem; }.prot-titel { grid-area: t; }.prot-link .prot-zeit { grid-area: z; }.prot-link .prot-ma, .prot-pfeil { display: none; }.prot-info { grid-area: i; white-space: normal; }.prot-liste .prot-link .badge { grid-area: s; justify-self: start; }} /* ========================================================================== 31. STARTSEITE "HEUTE + AUFGABEN" (UX-Delta 5) ========================================================================== */.heute-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 14px; margin-bottom: 8px; }.heute-karte { padding: 16px 18px; }.heute-karte h3 { margin: 0 0 8px; font-size: .85rem; font-weight: 500; color: var(--text-leise); }.heute-zahl { margin: 0; font-size: 1.05rem; }.heute-zahl b { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }.heute-zahl span { color: var(--text-leise); font-size: .9rem; }.heute-zahl.ok b { color: var(--ok); }.heute-zahl.warn b { color: var(--warn); }.heute-zahl.gefahr b { color: var(--gefahr); }.heute-zahl.leer { color: var(--text-leise); font-size: .95rem; }.heute-sub { margin: 6px 0 0; font-size: .85rem; color: var(--text-leise); }.heute-sub a { color: var(--gefahr); }.heute-karte .btn { margin-top: 12px; }.aufgaben { padding: 0; }.aufgabe { display: flex; align-items: center; gap: 12px; padding: .7rem 1.1rem; border-top: 1px solid var(--ml-fein); }.aufgabe:first-child { border-top: 0; }.auf-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }.auf-rot { background: var(--gefahr); }.auf-gelb { background: var(--warn); }.auf-blau { background: var(--akzent); }.auf-text { flex: 1; }.auf-link { white-space: nowrap; color: var(--akzent); font-size: .9rem; } @media (max-width: 700px) {.aufgabe { flex-wrap: wrap; }.auf-text { flex: 1 1 100%; order: 2; padding-left: 22px; margin-top: -18px; }.auf-link { order: 3; flex: 1 1 100%; padding-left: 22px; }}.dash-box-sub { display: block; font-size: .8rem; color: var(--text-leise); margin-top: 2px; } /* UX-Delta 8: Feinschliff Lager-Liste und Seitenkopf */.seiten-kopf.mit-aktion { display: flex; flex-wrap: wrap; align-items: center; }.seiten-kopf.mit-aktion > span:last-child { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; justify-content: flex-end; } /* Der "…"-Knopf gehört neben den Hauptknopf, nicht darunter: er ist kein eigener Block, sondern die Fortsetzung derselben Knopfreihe. */.seiten-kopf.mit-aktion .akt-mehr { flex: none; }.seiten-kopf.mit-aktion .akt-mehr-knopf { margin: 0; }.ml-unter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }.chem-ghs-inline { display: inline-flex; gap: .3rem; align-items: center; }.chem-ghs-inline .ghs-chip span { display: none; } /* Text erst im Titel-Tooltip */.ml-zustand .kal-status small { font-weight: 500; opacity: .8; margin-left: .15rem; } /* ========================================================================== 32. KALENDER (Delta 12) – gemeinsam für Bildschirm und Handy ========================================================================== */.kal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }.kal-kopf b { font-size: 1.1rem; }.kal-nav { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--rahmen); border-radius: 8px; color: var(--akzent); font-size: 1.3rem; text-decoration: none; }.kal-typen { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }.kal-typ { flex: none; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--rahmen); background: var(--flaeche); font-size: .88rem; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }.kal-typ.on { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-ink); }.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }.kal-wt { text-align: center; font-size: .72rem; color: var(--text-leise); padding: 4px 0; text-transform: uppercase; letter-spacing: .05em; }.kal-tag { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--flaeche-2); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; }.kal-tag small { position: absolute; right: 4px; top: 3px; font-size: .62rem; font-weight: 600; opacity: .8; }.kal-leer, .kal-frei { background: transparent; color: var(--text-leise); font-weight: 400; }.kal-frei { border: 1px dashed var(--rahmen); }.kal-gruen { background: var(--ok-bg); color: var(--ok); }.kal-rot { background: var(--gefahr-bg); color: var(--gefahr); }.kal-gelb { background: var(--warn-bg); color: var(--warn); }.kal-grau { background: var(--rahmen); color: var(--text-leise); }a.kal-tag:hover, a.kal-tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }.kal-stat { margin: 12px 0 4px; font-size: .9rem; color: var(--text-leise); }.kal-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .8rem; color: var(--text-leise); margin: 0; }.kal-lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }.kal-karte { max-width: 42rem; }.kal-feiertage { margin-top: 14px; padding: 12px 18px; }.kal-feiertage summary { font-weight: 600; cursor: pointer; }.kal-feiertage form { margin-top: 10px; } /* ========================================================================== 33. STATISTIK (Delta 16) – Reiter, Zeitraumleiste, Bilder, Tabellen ========================================================================== */.stat-reiter { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; }.stat-reiter-tab { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--rahmen); background: var(--flaeche); color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; }.stat-reiter-tab.an { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-ink); }.stat-reiter-tab:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }.stat-zeit { padding: 12px 16px; margin-bottom: 16px; }.stat-zeit-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 0; }.stat-zeit-form .feld { gap: .2rem; margin-bottom: 0; }.stat-zeit-form .feld-label { font-size: .8rem; color: var(--text-leise); }.stat-zeit-nav { display: inline-flex; align-items: center; gap: 12px; }.stat-zeit-nav b { font-size: 1.05rem; min-width: 9rem; text-align: center; } /* Bilder: das SVG füllt die Karte, die Karte begrenzt die Breite. */.stat-bild { padding: 14px 16px; margin-bottom: 14px; }.stat-svg { width: 100%; height: auto; display: block; }.stat-svg a rect { cursor: pointer; }.stat-svg a:hover rect, .stat-svg a:focus-visible rect { opacity: 1; stroke: var(--text); stroke-width: 1; }.stat-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--text-leise); }.stat-legende li { display: inline-flex; align-items: center; }.stat-lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; }.stat-fuss { font-size: .82rem; color: var(--text-leise); margin: 6px 0 14px; }.stat-tab tr.stat-summe td { font-weight: 650; background: var(--flaeche-2); }.stat-ampel { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .78rem; font-weight: 650; }.stat-ok { background: var(--ok-bg); color: var(--ok); }.stat-warn { background: var(--warn-bg); color: var(--warn); }.stat-gefahr { background: var(--gefahr-bg); color: var(--gefahr); }.stat-leer { background: var(--gefahr-bg); color: var(--gefahr); } /* Am schmalen Bildschirm wird jede Tabellenzeile zur Karte (data-label je Zelle), sonst stünden sechs Spalten gequetscht nebeneinander. */@media (max-width: 640px) { .stat-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .stat-tab tr { display: block; border: 1px solid var(--rahmen); border-radius: var(--radius); margin-bottom: 10px; background: var(--flaeche); } .stat-tab td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ml-fein); } .stat-tab tr td:last-child { border-bottom: 0; } .stat-tab td::before { content: attr(data-label); color: var(--text-leise); font-size: .8rem; } .stat-tab td.num { text-align: right; } .stat-zeit-nav b { min-width: 7rem; } } /* --- Statistik Delta 17: Erfüllungsgrad, Abweichungen, Streuung ----------- */.stat-doku-kopf { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 6px; }.stat-ring-karte { padding: 10px 14px; }.stat-ring { width: 160px; height: 160px; display: block; }.stat-doku-kopf .stat-karten { margin: 0; }.stat-luecken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0 14px; }.stat-luecken a { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--gefahr-bg); color: var(--gefahr); text-decoration: none; font-size: .85rem; font-weight: 600; }.stat-luecken .unter { color: var(--text-leise); font-weight: 400; }.stat-gruppe { padding: 0; margin-bottom: 10px; }.stat-gruppe > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; cursor: pointer; font-weight: 600; }.stat-gruppe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }.stat-gruppe[open] > summary { border-bottom: 1px solid var(--ml-fein); }.stat-gruppe .stat-tab { margin: 0; }.stat-gruppe .stat-tab th, .stat-gruppe .stat-tab td { padding-left: 16px; padding-right: 16px; }.stat-gruppe-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }.stat-pfeil { color: var(--gefahr); font-weight: 700; }.stat-lg-soll { background: var(--ok-bg); border: 1px dashed var(--ok); }.stat-lg-spanne { background: var(--akzent); opacity: .55; }.stat-lg-mittel { background: var(--text); width: 3px; height: 14px; border-radius: 1px; } @media (max-width: 640px) {.stat-doku-kopf { justify-content: center; }.stat-gruppe .stat-tab tr { margin: 10px 12px; }}.stat-lg-eingriff { background: var(--warn); height: 3px; border-radius: 1px; } /* =========================================================================== STUFE 1 (22.09.2026): NAVIGATION AM PC IM STIL VON COATDEPOT --------------------------------------------------------------------------- Eine Seitenleiste über die volle Höhe mit Logo oben, Bereichen als Hauptpunkten, dem offenen Bereich aufgeklappt, Konto unten. Die Kopfzeile rechts daneben enthält nur noch die Suche. ALLES hier gilt erst ab 769 px. Am Handy bleibt die bisherige Ansicht unverändert; die zusätzlichen PC-Teile im aside werden dort nur ausgeblendet. Farben aus tokens.css (--ml-nav, --ml-marke usw.). ========================================================================= */@media (max-width: 768px) { body.app .seitenleiste.seitenleiste--nur-pc, body.app .sb-pc-marke, body.app .sb-nav--pc { display: none !important; } } @media (min-width: 769px) { /* Raster: Seitenleiste links über die volle Höhe, rechts Kopfzeile, Inhalt, Fusszeile. .shell löst sich dafür auf (display: contents), Seitenleiste und Inhalt werden direkt Teil des Rasters. Nur wenn es eine Seitenleiste gibt und kein Fokus-Modus aktiv ist. */body.app:not(.fokus):not(.fokus-seite):has(> .shell > .seitenleiste) { display: grid; grid-template-columns: var(--sb-breite, 232px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }body.app:not(.fokus):not(.fokus-seite):has(> .shell > .seitenleiste) > * { grid-column: 1 / -1; }body.app:not(.fokus):not(.fokus-seite):has(> .shell > .seitenleiste) > .testleiste { grid-row: 1; }body.app:not(.fokus):not(.fokus-seite):has(> .shell > .seitenleiste) > .topbar { grid-column: 2; grid-row: 2; }body.app:not(.fokus):not(.fokus-seite):has(> .shell > .seitenleiste) > .shell { display: contents; }body.app:not(.fokus):not(.fokus-seite) > .shell > .seitenleiste { grid-column: 1; grid-row: 2 / 5; min-height: 0; border-left: 0; }body.app:not(.fokus):not(.fokus-seite) > .shell > .shell-main { grid-column: 2; grid-row: 3; }body.app:not(.fokus):not(.fokus-seite):has(> .shell > .seitenleiste) > .fuss { grid-column: 2; grid-row: 4; } /* Kopfzeile: Logo und Bereichsleiste wandern am PC in die Seitenleiste */body.app .topbar .marke, body.app .topbar .bereichsleiste { display: none; } /* Seitenleiste: nur der PC-Teil */body.app .sb-nav--handy { display: none; }.sb-pc-marke { display: flex; align-items: center; gap: 10px; flex: none; padding: 16px 16px 14px; color: var(--ml-nav-hell); text-decoration: none; }.sb-pc-marke:hover { text-decoration: none; color: var(--ml-nav-hell); }.sb-pc-marke b { font-size: 1.1rem; letter-spacing: -.02em; }.sb-pc-marke .mi { width: 22px; height: 22px; opacity: 1; color: var(--ml-marke); }.sb-pc-logo { display: block; max-width: 100%; max-height: 38px; width: auto; }.sb-nav--pc { padding-top: 2px; }.sb-nav--pc .sb-link { min-height: 40px; }.sb-pc-bereich { font-weight: 600; }.sb-pc-bereich--auf { color: var(--ml-nav-hell); }.sb-pc-bereich--auf .mi { opacity: 1; color: var(--ml-marke); }.sb-pc-trenner { height: 1px; margin: 10px 14px; background: var(--ml-nav-2); } /* Unterpunkte des offenen Bereichs, eingerückt unter dem Hauptpunkt. Die Bereichsüberschrift aus der bisherigen Leiste steht schon als Hauptpunkt darüber und entfällt hier. */ /* Knapp eingerückt: die bisherigen Unterpunkte bringen schon eine eigene Einrückung mit, doppelt würde der Text abgeschnitten */.sb-pc-kinder { margin: 2px 0 8px 8px; padding-left: 2px; border-left: 1px solid var(--ml-nav-2); }.sb-pc-kinder .sb-bereich-titel { display: none; }.sb-pc-kinder .sb-link { font-weight: 400; } } /* =========================================================================== STUFE 2 (22.09.2026): ADMINISTRATION ALS KACHEL-ÜBERSICHT (/administration) Aufbau wie die Verwaltung von coatdepot, Farben aus tokens.css. ========================================================================= */.adm-gruppe { margin-bottom: 24px; }.adm-gruppe-titel { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }.adm-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }.adm-kachel { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 14px; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); color: var(--text); text-decoration: none; }.adm-kachel:hover { border-color: var(--akzent); text-decoration: none; color: var(--text); }.adm-kachel:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }.adm-kachel-symbol { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--radius-s, 6px); background: var(--akzent-bg, var(--flaeche-2)); color: var(--akzent); }.adm-kachel-symbol .mi { width: 22px; height: 22px; opacity: 1; }.adm-kachel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }.adm-kachel-text b { font-size: 1rem; }.adm-kachel-text small { color: var(--text-leise); font-size: .84rem; line-height: 1.35; }.adm-kachel-stand { font-size: .82rem; font-weight: 600; margin-top: 2px; }.adm-kachel-stand--warn { color: var(--warn); }.adm-kachel-pfeil { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--text-leise); } @media (max-width: 640px) {.adm-kacheln { grid-template-columns: 1fr 1fr; gap: 8px; }.adm-kachel { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }.adm-kachel-text small, .adm-kachel-pfeil { display: none; }.adm-kachel-text b { font-size: .95rem; overflow-wrap: anywhere; hyphens: auto; }} /* =========================================================================== STUFE 3 (22.09.2026): BEREICHE AUF DER STARTSEITE ALS KACHELN (nur PC) Am PC die Kacheln mit Symbol, Erklärung und Stand (Baustein .adm-kachel aus Stufe 2); am Handy weiterhin das bisherige Raster .dash-bereiche. ========================================================================= */.dash-bereiche-pc { display: none; } @media (min-width: 769px) {.dash-bereiche { display: none; }.dash-bereiche-pc { display: grid; margin: .4rem 0 1.4rem; }} /* =========================================================================== SCHRITT A (22.09.2026): NAVIGATION AM HANDY Die Seitenleiste stand als dunkler Block ÜBER dem Inhalt (auf der Benutzerseite begann die Liste erst nach 915 px). Sie entfällt am Handy: die Punkte des Bereichs stehen als wischbare Zeile unter dem Titel, alles Übrige auf der Seite "Mehr" (untere Leiste). Am PC unverändert. ========================================================================= */@media (max-width: 768px) { body.app .seitenleiste { display: none !important; } body.app .hy-reiter { display: flex; gap: 6px; margin: 0 0 12px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; scroll-padding-left: 12px; } body.app .hy-reiter::-webkit-scrollbar { display: none; } body.app .hy-reiter a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rahmen); border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: .87rem; font-weight: 500; white-space: nowrap; text-decoration: none; } body.app .hy-reiter a[aria-current] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-ink); font-weight: 600; } }.hy-reiter { display: none; } /* Seite "Mehr" */.mehr-gruppe { margin-bottom: 18px; }.mehr-titel { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }.mehr-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 0 12px; overflow: hidden; }.mehr-karte form { margin: 0; }.mehr-zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ml-fein, var(--rahmen)); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }.mehr-karte > :last-child .mehr-zeile, .mehr-karte > .mehr-zeile:last-child { border-bottom: 0; }.mehr-zeile:hover { text-decoration: none; color: var(--akzent); }.mehr-zeile .mi { width: 20px; height: 20px; flex: none; opacity: 1; color: var(--text-leise); }.mehr-zeile > span { flex: 1; min-width: 0; }.mehr-pfeil { width: 18px; height: 18px; flex: none; color: var(--text-leise); } /* Unterpunkt (dritte Ebene, z. B. Bestellungen unter Chemikalienlager) */.mehr-zeile--unter { padding-left: 18px; }.mehr-zeile--unter > span { font-size: .93rem; color: var(--text-leise); } /* =========================================================================== SCHRITT B (22.09.2026): KOPFZEILE AM HANDY Logo links, Hell/Dunkel auf der Seite "Mehr". Die Suche hinter einer Lupe ist entfallen (22.09.2026). Die Kopfzeile bleibt beim Scrollen oben stehen. Am PC unverändert. ========================================================================= */ @media (max-width: 768px) {body.app .topbar { position: sticky; top: 0; z-index: 40; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }body.app .topbar .nav-toggle { display: none; }body.app .topbar .marke { margin-right: auto; min-height: 44px; display: flex; align-items: center; }} /* Zeile mit Schalter auf "Mehr" (kein Link) */.mehr-zeile--schalter { cursor: default; }.mehr-zeile--schalter .theme-wahl { margin-left: auto; } /* =========================================================================== SCHRITT C (22.09.2026): LISTEN UND TIPPFLÄCHEN AM HANDY Die Zeile einer Tabelle wird am Handy zur Karte (app.js setzt die Bezeichnungen aus dem Tabellenkopf). Bisher war jede Zeile gleich gewichtet: "Benutzername | chef" stand so gross da wie jede andere Angabe. Jetzt trägt die erste Spalte die Karte als Titel, die Aktionen stehen unten auf ganzer Breite. Gilt für alle Listen der Anwendung, ohne Eingriff in die einzelnen Seiten. Am PC unverändert. ========================================================================= */@media (max-width: 640px) { body.app .tabelle tbody td:first-child { display: block; font-size: 1.02rem; font-weight: 600; color: var(--text); text-align: left; padding-bottom: 6px; } body.app .tabelle tbody td:first-child::before { content: none; } body.app .tabelle tbody td:first-child a { display: inline-flex; align-items: center; min-height: 44px; } body.app .tabelle tbody td.aktionen, body.app .tabelle tbody td.rechts.aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--ml-fein, var(--rahmen)); } body.app .tabelle tbody td.aktionen::before { content: none; } } /* Tippflächen und Schriftgrösse (Handy) ------------------------------------ Unter 44 px trifft man mit dem Daumen daneben, mit Handschuhen erst recht. Eingabefelder unter 16 px lassen iPhones beim Antippen hineinzoomen; die Seite steht danach verschoben. */@media (max-width: 768px) { body.app .btn, body.app .chip, body.app .tabelle td .btn, body.app .kio-tabbar a, body.app .reiter a { min-height: 44px; } body.app .btn { display: inline-flex; align-items: center; justify-content: center; } body.app input, body.app select, body.app textarea { font-size: 16px; } body.app input:not([type=checkbox]):not([type=radio]):not([type=hidden]), body.app select { min-height: 44px; } body.app .btn-klein, body.app .btn-ico { min-height: 44px; padding-left: 12px; padding-right: 12px; } body.app .lab-tab, body.app .marke, body.app .fuss a { display: inline-flex; align-items: center; min-height: 44px; } /* Dateimanager: Ordnerbaum und Knöpfe dürfen nicht breiter werden als die Spalte, sonst schiebt die Seite waagrecht. */ body.app .dm-layout > * { min-width: 0; } body.app .dm-layout .btn-voll, body.app .dm-baum .btn { max-width: 100%; } /* Suchzeile: Das Feld darf schrumpfen, der Knopf rutscht sonst über den Rand hinaus (Flexbox lässt Eingabefelder sonst nicht kleiner werden). */ body.app .dm-suchzeile { flex-wrap: wrap; } body.app .dm-suchzeile input[type=search] { min-width: 0; flex: 1 1 60%; } } /* =========================================================================== LOGO IN ZWEI FASSUNGEN (22.09.2026, lib/branding.php) Wo der Hintergrund Hell/Dunkel folgt (Kopfzeile am Handy, Anmeldeseite), stehen beide Bilder im HTML; hier wird je nach Darstellung eins ausgeblendet. Dieselbe Logik wie data-theme in tokens.css: "dunkel" erzwingt dunkel, "hell" erzwingt hell, sonst entscheidet das Gerät. ========================================================================= */ .logo-fuer-dunkel { display: none !important; } :root[data-theme="dunkel"] .logo-fuer-hell { display: none !important; } :root[data-theme="dunkel"] .logo-fuer-dunkel { display: block !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .logo-fuer-hell { display: none !important; } :root:not([data-theme="hell"]) .logo-fuer-dunkel { display: block !important; } } /* Anmeldekarte: Bild wie bisher begrenzen, auch ohne eigene Klasse */ .auth-logo img { margin: 0 auto; } /* Einstellungen: Vorschau der dunklen Fassung auf der Farbe der Leiste */ .branding-vorschau--dunkel { background: var(--ml-nav); border-color: var(--ml-nav-2); } .branding-knoepfe { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: 8px; } /* Kontoseite: Schalter Hell/Dunkel */ .ko-darstellung .theme-wahl a { min-height: 36px; display: inline-flex; align-items: center; } /* =========================================================================== OHNE GLOBALE SUCHE (22.09.2026) Am PC enthielt die Kopfzeile nur noch das Suchfeld; Logo und Navigation stehen in der Seitenleiste. Ohne Suche ist sie leer und entfällt. Die Rasterzeile dafür wird dadurch 0 hoch, der Inhalt rückt nach oben. ========================================================================= */ @media (min-width: 769px) { body.app > .topbar { display: none; } } /* =========================================================================== SEITENLEISTE: LANGE BEGRIFFE UMBRECHEN (23.09.2026) Französische Menünamen sind deutlich länger ("Gestionnaire de fichiers", "Proposition de commande") und wurden bei 232 Pixeln mit "…" gekürzt. Jetzt dürfen sie auf eine zweite Zeile umbrechen; bei deutschen und englischen Namen ändert sich nichts, sie passen in eine Zeile. ========================================================================= */ .sb-link > span, .sb-sum-link > span, .sb-unter { white-space: normal; text-overflow: clip; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; } .sb-unter { min-height: 32px; height: auto; padding-top: 5px; padding-bottom: 5px; } /* Audit 15.10.2026: Hervorhebung in der roten Testleiste erbt die Textfarbe; das feste Hellorange war im Dunkelmodus (heller Rotton) kaum lesbar. */ .testleiste-aktiv .testleiste-status strong { color: inherit; text-decoration: underline; text-underline-offset: 2px; }