/* Die Skalen des Personalmanagers - die einzige Quelle für Maß und Farbe ===================================================================== Entschieden von Michael am 14.09.2026 (Phase 3 der Aufräumung), abgeleitet aus den Zahlen von pruefung/css_audit.py: 601 feste Werte an 139 Ausprägungen, davon 55 nur ein einziges Mal. Jede Stufe unten trägt den Vermerk, welche vorhandenen Werte in ihr aufgehen - und um wie viel sie sich dabei bewegen. Eingebunden von base.html und login_rahmen.html, vor allem anderen. Regel: Ein Wert steht entweder hier oder er ist die Ausnahme, die ihren Grund im Kommentar daneben trägt. Eine dritte Sorte gibt es nicht. Einheit ist rem, Wurzel 16 px, der Fließtext hat .92rem. Alle Zahlen sind Zehntel-rem: --abstand-3 ist .3rem. Das ist bewusst: Der Name sagt die Größe, und beim Umstellen einer Vorlage liest man den Abstand aus dem Namen, ohne hierher zu blättern. Wer eine Stufe ändert, ändert die Zahl im Namen mit - sonst lügt er. */ /* Die Hausschrift des Corporate Designs (anästhesie:mathildenhöhe, 28.09.2026): Bahnschrift, variabel von 300 bis 700. Einmal hier, damit base.html und login_rahmen.html sie beide kennen. Der Pfad ist relativ zu dieser Datei. Die Datei stammt von Microsoft/Windows - die Lizenz für die Auslieferung über personal.an-mh.de ist noch zu klären (Michael, 28.09.2026: "jetzt einbauen, Lizenz später"). Ersatz ohne Lizenzfrage wäre Barlow. */ @font-face { font-family: Bahnschrift; src: url("fonts/bahnschrift.ttf") format("truetype"); font-weight: 300 700; font-stretch: 75% 100%; /* block statt swap (29.09.2026): Mit swap stand die Leiste kurz in der Ersatzschrift und sprang dann um - das "Pumpen". Die Schrift wird in base.html vorgeladen und bleibt im Speicher des Browsers (Frist in app.py), gewartet wird also höchstens beim allerersten Besuch. */ font-display: block; } :root { /* --- Abstände --------------------------------------------------------- Für margin, padding, gap. Acht Stufen bis 1 rem, dazu eine große für den Abstand unter der Menüleiste. 113 der 211 Vorkommen liegen heute schon genau auf diesen Stufen; die 98 übrigen rücken um höchstens .05 rem (0,8 px), die meisten um weniger. --abstand-1 ← .05 (+0,8 px, 2×) .1 (16×) .12 (−0,3 px, 5×) --abstand-2 ← .15 (+0,8 px, 13×) .2 (5×) .25 (−0,8 px, 10×) --abstand-3 ← .3 (17×) .35 (−0,8 px, 14×, oder → 4) --abstand-4 ← .4 (19×) .45 (−0,8 px, 12×, oder → 5) --abstand-5 ← .5 (23×) .55 (4×) --abstand-6 ← .6 (15×) --abstand-7 ← .7 (8×) .75 (3×) .8 (2×) --abstand-9 ← .85 (1×) .9 (10×) 1 (−1,6 px, 5×) --abstand-14 ← 1.38 (+0,3 px, der Seitenkopf) 1.4 (1×) Ob .15 nach oben oder unten geht, entscheidet die Stelle: Im Kalender (7×) ist es meist ein Innenpolster, das nach 2 will; die .35 und .45 sind fast immer "etwas mehr als 3/4" und gehen nach oben. Größere Werte (2rem, 2.5rem, 2.75rem) kommen nur auf der Anmeldeseite und am Terminal vor - dort bleiben sie stehen, mit Grund daneben. */ --abstand-1: .1rem; --abstand-2: .2rem; --abstand-3: .3rem; --abstand-4: .4rem; --abstand-5: .5rem; --abstand-6: .6rem; --abstand-7: .7rem; --abstand-9: .9rem; --abstand-14: 1.4rem; /* --- Schriftgrößen ---------------------------------------------------- Sechs Stufen, jede rund zwölf Prozent über der vorigen - der Abstand, ab dem ein Auge zwei Größen auseinanderhält. Heute gibt es 34 Stufen, elf davon zwischen .66 und .86. --schrift-1 .66 Beschriftung ganz klein: Spaltennamen an Karten, Legendenschilder, small in der Anzeigeleiste ← .6 (+1 px, 2×) .62 (3×) .64 .66 (4×) --schrift-2 .74 Nebentext, Untertitel, Feldbeschriftung ← .68 (7×) .7 (5×) .72 (4×) .74 (10×) .76 (6×) --schrift-3 .82 Kleine Fließschrift: Tabellen, Kacheln, Kalender ← .78 (+0,6 px, 17×) .8 (19×) .82 (14×) .84 .85 (−0,5 px, 5×, darunter die Listentabelle) --schrift-4 .92 Fließtext, wie body ← .86 (2×) .88 .9 (4×) .92 (2×) .95 .98 --schrift-5 1.05 Menüleiste, betonte Zahlen ← 1 (+0,8 px, 9×) 1.05 (3×) 1.1 (2×) --schrift-6 1.25 Titel, Wortmarke ← 1.15 (2×) 1.25 (2×) 1.3 1.35 (3×) Die Menüpunkte stehen seit heute auf 1rem, damit die Leiste bei 1400 passt - mit 1.05 fehlten drei Pixel. Sie bekommen deshalb Stufe 4, nicht 5. Die großen Ziffern am Terminal und auf der Anmeldeseite (1.5 bis 2.6rem, fünf Stellen) bleiben stehen: Das sind Anzeigen, keine Schrift im Text. */ --schrift-1: .66rem; --schrift-2: .74rem; --schrift-3: .82rem; --schrift-4: .92rem; --schrift-5: 1.05rem; --schrift-6: 1.25rem; /* --- Radien ----------------------------------------------------------- Drei Stufen und zwei Formen. Der Kalender benutzt heute durchgehend .35 (19×) - er gibt die mittlere Stufe vor, die vier Kacheln und Karten mit .375 rücken um 0,4 px zu ihm, nicht umgekehrt. --radius-1 .25 Kleines: Kürzel, Schilder, Farbfelder ← 2px 3px (3×) 4px (2×) .2 .25 (3×) .3 (2×) --radius-2 .35 Zellen, Kacheln, Kästen, Knöpfe ← .35 (19×) .375 (4×) .4 (3×) --radius-3 .5 Rahmen um Listen und Formulare ← .45 (5×, siehe unten) .5 (3×) .6 Die .45 innen an der Listentabelle ist kein eigener Wert: Die Ecke der ersten Zelle liegt einen Pixel innerhalb des Rahmens mit .5 und muss deshalb einen Pixel enger sein - calc(var(--radius-3) - 1px). Das war die Absicht, sie stand nur nirgends. 1px bleibt 1px (zweimal im Kalender, ein Hauch von Rundung an Strichen). */ --radius-1: .25rem; --radius-2: .35rem; --radius-3: .5rem; --radius-pille: 999px; /* Meldungen */ --radius-kreis: 50%; /* Fotos, Punkte */ /* --- Farben ----------------------------------------------------------- Die Hausfarben ziehen hierher um - sie standen zweimal, in base.html und in login_rahmen.html, heute gleich und morgen die Falle vom 09.09. Beide Vorlagen binden künftig diese Datei ein. Der Kalender behält seine --kal-* in kalender.css: Das sind Bedeutungen (Dienst, Urlaub, krank), keine Skala, und Michael stellt sie unter Einstellungen → Farben selbst ein. Nur wo ein --kal-* dieselbe Farbe meint wie ein Wert hier, zeigt er künftig hierher. */ /* Hausfarben. #0F70B7 ist das Blau aus dem Logo, das im Praxismanager dem Anmelden-Knopf vorbehalten war; dort ist Grün die Leitfarbe und Blau die Farbe der Symbole - hier genau umgekehrt. Dieselben zwei Farben, vertauschte Rollen, damit die beiden Anwendungen auf einen Blick unterscheidbar bleiben. */ /* Seit dem 28.09.2026 das Blau des Corporate Designs (vorher #0F70B7). Die Dienst-Zellen behalten ihr Blau: --kal-dienst in kalender.css steht für sich und ist nicht umgestellt (Michael, 28.09.2026). */ --blau: #1F6FB4; --blau-dunkel: #0C578E; --blau-hell: #e3f0f8; --gruen: #14A099; /* das Petrol der Bildmarke, nicht das Erfolgsgrün (vorher #12A19A) */ /* Corporate Design anmh (28.09.2026) - die Hülle: Menüleiste, Anmeldung, Seitenkopf und Seitenfuß. Übernommen aus dem Entwurf in Claude Design, der abgenommen ist ("Hi-Fi, Farben, Maße und Schrift sind final"). Tabellen, Kalender und Kästen benutzen diese Werte NICHT - sie behalten ihre Farben und die Systemschrift. */ --ci-petrol: #14A099; /* Linie, Symbole, Akzent-Punkt, Kreis mit Initialen */ --ci-blau: #1F6FB4; /* Hauptknopf Anmelden, Links */ --ci-blau-hover: #185C96; --ci-dunkelblau: #12314F; /* Menüleiste, linke Anmeldehälfte, Tabellenkopf */ --ci-text: #12314F; --ci-text-2: #3B556F; --ci-text-leise: #8FA9C0; /* auf Dunkelblau */ --ci-nav-text: #C9D8E4; /* inaktiver Menüpunkt auf Dunkelblau */ --ci-grund: #F4F7F9; /* Seitenhintergrund */ --ci-rand-feld: #C9D8E4; /* Eingabefelder Anmeldung */ --ci-fuss-text: #5B7488; /* Seitenfuß, Hinweise der Anmeldung */ --ci-oder-linie: #E3EAEF; /* die Linien um "oder" auf der Anmeldung */ --ci-nav-aktiv: rgba(255,255,255,.12); /* Fläche des aktiven Menüpunkts */ --ci-trenner: rgba(255,255,255,.22); /* senkrechte Striche in der Leiste */ --schrift-ci: Bahnschrift, "DIN 1451", Barlow, system-ui, sans-serif; /* Die Maße der Hülle, wie im Entwurf in Pixeln. Sie liegen bewusst nicht auf der Skala oben: Es sind die abgenommenen Werte eines Entwurfs, keine Stufen, und sie gelten nur in der Leiste, im Fuß und auf der Anmeldung. */ --ci-leiste-hoehe: 68px; /* Menüleiste (Entwurf 60, Michael 28.09.2026: "bisschen höher") */ --ci-leiste-linie: 4px; /* Petrol unter der Leiste (rot in fremder Ansicht) */ --ci-marke-hoehe: 30px; /* Bildmarke in der Leiste */ --ci-kreis: 28px; /* Bild der Person in der Leiste (Michael 29.09.2026: "einen Tacken kleiner", vorher 32, davor 36) */ --ci-trenner-hoehe: 26px; --ci-knopf-hoehe: 36px; /* Fläche des aktiven Menüpunkts */ --ci-radius: 8px; /* aktiver Menüpunkt, Felder und Knöpfe der Anmeldung */ --ci-schrift-menue: 15px; --ci-schrift-marke: 18px; /* Michael 29.09.2026: "bisschen größer" (vorher 16) */ /* Die "26" hinter ".personalmanager": Ziffern so hoch wie das "er" - in der Bahnschrift x-Höhe 1053 zu Ziffernhöhe 1454 (Einheiten der Schrift), also 0.724 der Schriftgröße des Namens. Gilt in Leiste und Anmeldung. */ --ci-version-groesse: .724em; --ci-version-abstand: .15em; /* Michael 29.09.2026: "ganz bisschen mehr Abstand" - in der Leiste 2 px */ --ci-schrift-name: 13px; --ci-schrift-klein: 12px; /* "Abmelden", Initialen, Seitenfuß, Copyright */ --ci-schrift-titel: 20px; /* Seitenüberschrift */ --ci-fuss-linie: 2.5px; /* Seitenfuß */ --ci-fuss-turm: 36px; --ci-anmelde-linie: 7px; /* Anmeldung, unten über die ganze Breite */ --ci-anmelde-turm: 100px; /* Flächen */ --weiss: #ffffff; --grund: #f2f8fb; /* Seitenhintergrund ← #f2f8fb (8×) #f4f8fb #eef3f8 */ --flaeche-hell: #f7fafd; /* Zeilen, Köpfe ← #f7fafd (3×) #fafbfc (3×) */ --flaeche-hover: #eef4fa; /* = --tab-hover ← #eef4fa (5×) */ /* Grau, blaustichig wie alles hier, hell → dunkel. Sieben Stufen aus heute 24 Grautönen. Es gibt EIN Rahmengrau (Michael, 14.09.2026): das des Kalenders, #c9d8e5. Tabellen und Karten hatten #dbe6ef, zwei Helligkeitsstufen heller - sie bekommen einen sichtbar kräftigeren Rahmen. Das war die Wahl gegen "beide behalten und später am Bild entscheiden". --grau-1 #eef2f6 Trennlinien in Listen ← --tab-linie --grau-2 #dde5ed Gitterlinien ← --kal-linie --grau-3 #c9d8e5 Rahmen, alle ← --kal-rand, --tab-rand (#dbe6ef), .card (#dbe6ef), #cfd8de #c3cfd9 #b9cbdb (--kal-linie-stark) --grau-4 #adbcc8 Symbole gedämpft ← #adbcc8 (3×) #b7c2cc #a9b6c2 #9fb2c2 --grau-5 #8a99a6 Text ruhend ← #8a99a6 (2×) #8a99a7 #8a99a8 #8494a2 (2×) --grau-6 #6b7c8a Nebentext ← #6b7c8a (22×) #6c757d #5d6f7f (8×, etwas heller als heute) --grau-7 #44586b Text gedämpft dunkel ← #44586b (3×) #46596a */ --grau-1: #eef2f6; --grau-2: #dde5ed; --grau-3: #c9d8e5; --grau-4: #adbcc8; --grau-5: #8a99a6; --grau-6: #6b7c8a; --grau-7: #44586b; /* Signal: drei Bedeutungen, je Fläche, Linie, Schrift. Die Meldungen in base.html und die --kal-nein-…, --kal-gut-… und --kal-knapp-… des Kalenders meinen dieselben Farben und bekommen sie von hier. Rot warnt, Gelb bittet um Beachtung, Grün bestätigt. */ --rot: #b02a37; /* ← #b02a37 (8×) #a03028 #d64545 (2×, Kalender) */ --rot-hell: #fdeeed; /* ← #fdeeed, --kal-nein-hell */ --rot-linie: #f4cbc9; /* ← #f4cbc9, --kal-nein-linie (#f6cccc) */ --gelb: #f59e0b; /* ← #f59e0b (4×), --kal-heute; die 26 der Marke */ --gelb-dunkel: #b45309; /* ← #b45309 (12×): Schrift auf Hellem, eigene Person */ --gelb-hell: #fdf3d8; /* ← #fdf3d8 #fff8e8 (2×) #fff8dc */ --gelb-linie: #f2dfa8; /* ← #f2dfa8 #e8b923 (2×, Kalender) */ --gruen-dunkel: #1c7a4a; /* ← #1c7a4a (3×) #1c6b3a #1b5e20 #0e7d77 #3fa45b (2×) */ --gruen-hell: #e6f4ea; /* ← #e6f4ea, --kal-gut (#d6f0d9) */ --gruen-linie: #c3e6cd; /* ← #c3e6cd */ /* Schatten - zwei, nicht sieben. */ --schatten: 0 2px 8px rgba(0,0,0,.08); /* Leiste, Karten, Anmeldung */ --schatten-stark: 0 4px 16px rgba(10,60,110,.18); /* schwebende Fenster */ /* --- Druck (31.10.2026, Skill mobile-native) --------------------------- Die Rückmeldung beim Antippen: Sie kommt, sobald der Finger aufliegt, nicht erst beim Loslassen. 100-160 ms und ease-out verlangt der Skill; die Kurve ist die kräftige ease-out aus den Design-Skills. --druck-dauer wie schnell die Rückmeldung kommt und geht --druck-kurve ease-out, kräftig --druck-skala Knöpfe mit Fläche werden so viel kleiner Symbolknöpfe ohne Fläche zeigen beim Drücken, was die Maus beim Überfahren zeigt; Zeilen und Menüeinträge färben sich --blau-hell. */ --druck-dauer: 120ms; --druck-kurve: cubic-bezier(.23, 1, .32, 1); --druck-skala: .97; } /* Seitenwechsel ohne Zucken (Michael, 29.09.2026: "jedes Teil der Menübar wird immer wieder neu geladen und zuckt"). Jeder Klick lädt eine neue Seite; der Browser warf bisher die alte weg, malte kurz leer und baute Leiste, Symbole und Überschrift neu auf. Mit dem Seitenübergang hält er die alte Seite stehen, bis die neue fertig ist, und blendet dann weich über. Die Leiste hat einen eigenen Namen und keine Animation - sie bleibt einfach stehen, nur was sich darin ändert (Titel, Markierung), wechselt. Safari ab 18.2 (iOS 18.2) und Chrome/Edge können das; ältere Browser laden wie bisher. */ @view-transition { navigation: auto; } nav.navbar { view-transition-name: leiste; } ::view-transition-group(leiste), ::view-transition-old(leiste), ::view-transition-new(leiste) { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; } /* Die Uhrzeitleiste des iPhones (Michael, 29.09.2026). Seit dem Wechsel auf "black-translucent" liegt sie durchsichtig über der Seite, weiße Schrift. Damit darunter beim Scrollen kein heller Inhalt durchscheint, steht dort immer ein dunkelblauer Streifen; außerhalb der Web-App ist er 0 hoch. */ html::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: env(safe-area-inset-top, 0px); background: var(--ci-dunkelblau); pointer-events: none; } /* Kein Herunterziehen der Seite (Michael, 29.09.2026): Auf dem iPhone ließ sich oben die ganze Seite samt Menüleiste nach unten ziehen, darüber erschien der Hintergrund. overscroll-behavior schaltet das Nachfedern ab. */ html, body { overscroll-behavior-y: none; } /* Antippen ohne grauen Blitz (31.10.2026, Skill mobile-native, Audit Telefon Punkt 1). iOS und Android legen über alles Antippbare einen grauen Schleier - das deutlichste Zeichen "Webseite". Statt dessen gibt jeder Knopf, Reiter und jede anklickbare Zeile eine eigene Rückmeldung über :active (--druck-…). Dazu gehört: :hover steht überall in @media (hover: hover) and (pointer: fine) - sonst bleibt auf iPad und Telefon eine angetippte Zeile hervorgehoben. */ html { -webkit-tap-highlight-color: transparent; }