/* ---------- Tokens (Theme "Einsatzbereit" - loest das vorherige "Flow" ab, Amber-Akzent). Bewusst EIN FESTES, HELLES Theme, KEIN automatisches Umschalten auf das Systemschema mehr (Kundenentscheidung: "im Vorschlag ist der hell" - ein spaeteres, manuell waehlbares zweites Theme ist geplant, siehe [[admin_ohne_eigene_zeiterfassung]]-Folgearbeit, aber das darf nicht automatisch ueber prefers-color-scheme greifen). Es gab ohnehin nirgends einen Umschalter, der data-theme="dark" gesetzt haette - die frueheren @media/[data-theme]-Bloecke waren totes Gewicht, das ausschliesslich ueber das Systemschema griff und genau diese Verwirrung verursacht hat. Die --rail-*-Tokens sind bewusst ungenutzter Rest eines verworfenen "Volltransfer"-Zwischenstands. ---------- */ :root { /* ----- 1. Grundfarben (Marke "Einsatzbereit") ----- Die einzige Stelle, an der ein Farbwert als Zahl steht. Alles andere unten verweist nur noch hierauf. */ --ink: #17181c; --ink-soft: #2a2b30; --paper: #f2efe8; --paper-raised: #ffffff; --line: #e5e2d9; --line-strong: #d8d5cc; --text: #17181c; --text-dim: #6f7078; --rail-bg: #17181c; --rail-text: #eef0eb; --rail-text-dim: #9a9d98; --accent: #e0913f; --accent-soft: #e8b57e; --accent-deep: #a3611c; --accent-wash: rgba(224, 145, 63, 0.14); --ok: #2f9e8f; --ok-wash: rgba(47, 158, 143, 0.14); --err: #b3402f; --err-wash: rgba(179, 64, 47, 0.12); --wait: #6a6fae; --wait-wash: rgba(106, 111, 174, 0.12); --warn: #a17a1f; --warn-wash: rgba(161, 122, 31, 0.12); /* Textfarbe auf dunklem Grund (Hero, dunkle Buttons, Preis-Panels). Stand vorher 21-mal als hartes #fff im Stylesheet - semantisch ist das NICHT dieselbe Farbe wie --paper-raised (weisse Flaeche), auch wenn beide zufaellig weiss sind. */ --on-dark: #ffffff; --shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 10px 26px -14px rgba(20, 20, 20, 0.16); /* ----- 2. Radius-Stufen ----- Vorher lagen 17 verschiedene Werte im Stylesheet (1,2,3,4,5,6,7,8, 9,10,11,12,14px sowie 999px/50%) - ohne erkennbare Regel, welcher wofuer gilt. Neue Bauteile bitte ausschliesslich aus dieser Leiter bedienen. */ --r-2xs: 2px; /* Mikro-Marker, Ecken an sehr kleinen Flaechen */ --r-xs: 3px; /* Chips, kleine Marker */ --r-sm: 6px; /* Formularfelder, Buttons */ --r-md: 8px; /* Panels, Karten */ --r-lg: 12px; /* grosse Flaechen, Modals */ --r-pill: 999px; --r-circle: 50%; /* ----- 3. Schriftgroessen ----- Vorher 20+ Groessen in 0,5px-Schritten (9.5/10.5/11/11.5/12/12.5/ 13/13.5/14/14.5/15/...) - fuer den Leser nicht unterscheidbar, aber jede einzeln zu pflegen. */ --fs-2xs: 11px; /* Marker, Tabellen-Fussnoten */ --fs-xs: 12px; /* Sekundaertext, Chips */ --fs-sm: 13px; /* Tabellen, Formulare, Navigation */ --fs-md: 15px; /* Fliesstext */ --fs-lg: 17px; /* Abschnittsueberschriften */ --fs-xl: 22px; /* Seitenueberschriften */ --fs-2xl: 30px; /* Kennzahlen */ --fs-display: 36px; /* grosse Marketing-Ueberschriften */ --fs-3xl: 46px; /* Hero */ /* Ausnahme, bewusst NICHT auf dieser Leiter: das verkleinerte App-Mockup auf der Startseite (.pub-mini-*) arbeitet mit einer eigenen Mikro-Leiter von 7,5-9,5px. Es soll wie ein aus der Entfernung fotografierter Bildschirm wirken - haette man es auf die Fliesstext-Leiter gezwungen, waere genau dieser Eindruck zerstoert. Wer dort etwas aendert, bleibt in dieser Mikro-Leiter. */ /* ----- 4. Abstaende ----- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px; /* ----- 5. Oeffentliche Seiten ----- Die --pub-*-Tokens stammen aus der Zeit, als die eingeloggte App noch das gruene Theme "Flow" trug und die oeffentlichen Seiten als einzige "Einsatzbereit" waren - zwei Markenwelten, bewusst getrennt. Seit die App selbst auf "Einsatzbereit" umgestellt wurde (siehe Kopfkommentar dieser Datei), beschreiben beide Saetze DIESELBE Marke. Uebrig blieben Dubletten - teils wertgleich, teils minimal auseinandergelaufen (--pub-ink #17181a vs. --ink #17181c, --pub-dim #6c6a60 vs. --text-dim #6f7078), ohne dass die Abweichung je beabsichtigt war. Die Namen bleiben als Verweise bestehen, damit die rund 120 bestehenden Verwendungen in den oeffentlichen Seiten unveraendert weiterlaufen - der WERT kommt jetzt aber aus einer einzigen Quelle. Wer neu baut, nimmt direkt die Tokens darueber. */ --pub-ink: var(--ink); --pub-paper: var(--paper); --pub-paper2: var(--paper-raised); --pub-amber: var(--accent); --pub-amber-ink: #1b1300; /* Schrift auf Amber - eigener Wert, kein Duplikat */ --pub-line-dark: rgba(255, 255, 255, 0.14); --pub-line-paper: var(--line); --pub-dim: var(--text-dim); color-scheme: light; } /* View Transitions (2026-08-11, Kundenwunsch "Seitenwechsel optimieren"): sanfter Uebergang beim Wechsel zwischen echten Seiten (Team, Auswertung, Start/Stopp, ...) statt hartem Sprung - rein deklarativ per CSS, KEIN JS-Router noetig, da die Navigation ohnehin ganz normale -Links sind. Browser ohne Unterstuetzung (aktuell u.a. aeltere Safari-Versionen) ignorieren diese Regel schlicht und navigieren exakt wie bisher - reine Verbesserung, kein Risiko. htmx-gesteuerte Teil-Updates (Tab-Wechsel innerhalb einer Seite, Status-Fragment) nutzen dieselbe Technik separat ueber htmx.config.globalViewTransitions (siehe app.js). */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; animation-timing-function: ease-out; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } * { box-sizing: border-box; } [x-cloak] { display: none !important; } html, body { height: 100%; } /* Sicherheitsnetz gegen seitliches Verschieben der ganzen Seite auf dem Handy (Kundenmeldung 2026-08-14: eine einzelne zu breite Zeile hat die komplette Seite nach rechts aus dem Bildschirm wachsen lassen, nicht nur sich selbst). Absichtlich horizontales Scrollen GENERELL ausgeschlossen statt nur die eine Fundstelle zu flicken - echte Breiten-Ausnahmen (.tabs, .table-scroll) haben ohnehin ihren eigenen overflow-x:auto-Container und bleiben davon unberuehrt. */ html, body { max-width: 100%; overflow-x: hidden; } /* touch-action:manipulation (Kundenwunsch 2026-08-11): unterbindet den Doppel-Tap-Zoom beim schnellen Stempeln auf dem Handy, OHNE Pinch-Zoom grundsaetzlich abzuschalten (waere ueber "user-scalable=no" im viewport-Meta ein Accessibility-Problem und wird von manchen Browsern ohnehin ignoriert) - als Nebeneffekt entfaellt zusaetzlich die sonst uebliche ~300ms Tap-Verzoegerung mobiler Browser. */ html, body { touch-action: manipulation; } /* Querformat-Sperre (Kundenwunsch 2026-08-11): manifest.json setzt zwar bereits "orientation":"portrait", das greift aber NUR bei einer installierten PWA unter Android - in einem normalen Browser-Tab und auf iOS (respektiert diese Vorgabe generell nicht, auch nicht installiert) dreht sich die Seite trotzdem mit. Deckt die Luecke stattdessen per CSS ab: .orientation-lock (Markup in base.twig/ offline.html) verdeckt die Bedienoberflaeche, sobald ein Telefon-grosses Geraet quer gehalten wird (max-height 500px grenzt das gezielt auf Handys ein, Tablets/Desktop im Querformat bleiben unberuehrt). */ .orientation-lock { display: none; } @media (orientation: landscape) and (max-height: 500px) { .orientation-lock { display: flex; position: fixed; inset: 0; z-index: 9999; background: #17181c; color: #f2efe8; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; } .orientation-lock svg { width: 44px; height: 44px; flex-shrink: 0; } .orientation-lock p { margin: 0; font-size: var(--fs-md); font-weight: 600; max-width: 280px; } } body { margin: 0; background: var(--paper); color: var(--text); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* Zahlen mit gleicher Ziffernbreite, damit Spalten untereinander stehen und eine laufende Uhr nicht zappelt. Bis 2026-09-04 wurde dafuer eine Monospace-Schrift eingesetzt - das erledigt zwar die Ausrichtung, laesst aber jede Stundenangabe wie Terminal-Ausgabe aussehen (am deutlichsten bei grossen Werten wie "30,0 Tage Rest"). font-variant-numeric: tabular-nums erreicht dasselbe innerhalb der normalen Textschrift: die Ziffern bekommen gleiche Laufweite, die Schrift bleibt die der uebrigen Oberflaeche. Der Klassenname bleibt "num" - er wird in database/ nachrichten_deckel_hinweis_testen.php im erwarteten Markup mitgeprueft. */ .num { font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ---------- Topbar (Theme "Flow") - loest die vorherige linke Icon-Leiste ab, siehe [[theme_redesign_bento_kandidat]]: eine reine Umfaerbung der Leiste reichte dem Kunden ausdruecklich nicht, es sollte die im Flow-Mockup gezeigte obere Tab-Leiste sein. ---------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 14px 32px; /* Cremefarben wie .pub-nav auf den oeffentlichen Seiten (bewusst derselbe Ton wie --paper, nicht das hellere --paper-raised) - ein durchgehender Auftritt von Startseite bis Verwaltung. Der Amber- Streifen direkt darueber (siehe layout/base.twig, .pub-stripe) traegt die Markenfarbe, nicht der Topbar-Hintergrund selbst. */ background: var(--paper); border-bottom: 1px solid var(--line); } .topbar-brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); text-decoration: none; flex-shrink: 0; } .topbar-brand .dot { width: 10px; height: 10px; background: var(--accent); border-radius: var(--r-2xs); transform: rotate(45deg); flex-shrink: 0; } /* .tabs-group buendelt