/* ============================================================ BASIS - GILT AUF JEDER SEITE, HAENGT AN NICHTS ============================================================ Hier stehen genau die Regeln, die zwei Bedingungen erfuellen: 1. sie gelten auf JEDER Seite - Shell, Anmeldung, Landingpage, oeffentliche Buchung, Fehlerseiten, Widgets; 2. sie brauchen KEINE Tokens, keine Komponenten, keinen Kontext. Darum ist diese Datei winzig und darf als erstes Stylesheet in jeden . Alles, was hier nicht beide Bedingungen erfuellt, gehoert woanders hin - sonst waechst die Datei zurueck zu dem, was sie aufloesen soll. Beide Themen hatten dasselbe Problem: eine app-weite Zusage, die in einer Datei lag, die nicht jede Seite laedt. Das faellt nie auf, weil CSS keinen Fehler meldet - es fehlt einfach. ---- 1. Scrollbalken ---- Vorher stand der Satz zweimal: in components.css (Shell) und in login.css (Anmeldung). Die beiden waren bereits auseinandergelaufen - der Anmeldeseite fehlten scrollbar-width/-color (also der komplette Firefox-Zweig: dort blieben die dicken Systembalken), die Hoehe fuer waagerechte Balken, der Hover-Zustand und die Ecke. Ihre Farbe stand ausserdem fest als rgba(120,130,140,0.4) und folgte dem Dunkelmodus nicht. Zwoelf weitere eigenstaendige Seiten hatten gar keine. Farbe: --sb-tinte/--sb-rand greifen die Tokens der jeweiligen Seite ab, wenn es sie gibt. Die Shell nennt sie --text-muted/--border-color, die Anmeldeseite --text-muted/--border - beide Namen sind abgedeckt. Seiten ganz ohne Tokens bekommen den Ersatzwert; der Dunkelmodus-Block unten tauscht NUR diesen Ersatzwert, damit auch sie im Dunkeln stimmen. Seiten mit eigenen Tokens merken davon nichts, weil var() dann gar nicht erst auf den Ersatzwert zurueckfaellt. ---- 2. Reduzierte Bewegung ---- Stand vorher in styles.css und galt damit nur fuer die Shell. Sechs Seiten, auf denen ein Mensch sitzt, bewegten etwas ohne die Zusage: Anmeldung und Einladung (endlos drehender Spinner), Landingpage, Newsletter-Statusseiten und das Notdienst-Widget (endlos laufender Ladeschimmer). Endlos laufende Bewegung ist genau der Fall, den die Einstellung abstellen soll. Bewusst NICHT dabei: display.html und signage_idle.html - das Schaufenster-Display ist ein Kiosk ohne Bedienenden, dort IST die Bewegung der Inhalt (wie beim Scrollbalken-Kanon ebenfalls ausgenommen). */ :root { --sb-tinte: var(--text-muted, #6b7888); --sb-rand: var(--border-color, var(--border, #d2dee4)); } @media (prefers-color-scheme: dark) { :root { --sb-tinte: var(--text-muted, #9aa7b6); --sb-rand: var(--border-color, var(--border, #2a3a4d)); } } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sb-tinte) 40%, transparent) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--sb-tinte) 40%, transparent); border-radius: 4px; border: 1px solid var(--sb-rand); } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--sb-tinte) 65%, transparent); } ::-webkit-scrollbar-corner { background: transparent; } /* ================ BARRIEREFREIHEIT - Reduzierte Bewegung ================ */ /* Respektiert die Systemeinstellung "prefers-reduced-motion" app-weit. Nicht-essentielle Animationen/Transitions werden quasi-instant gemacht (0.01ms statt 0/none, damit transitionend/animationend-Events weiter feuern und darauf wartendes JS nicht bricht - hideModal() und switchSectionDom() in common.js warten genau darauf). Sichtbarkeit/Layout/Zustaende bleiben unveraendert. animation-iteration-count: 1 ist der Teil, der endlose Bewegung stoppt. Ohne ihn wuerde ein Spinner mit 0.01ms Dauer nicht anhalten, sondern rasend schnell weiterdrehen - schlimmer als vorher. !important, weil diese Datei als ERSTES Stylesheet laedt. Die wenigen spaeteren !important-Regeln auf Bewegung (nav.css, aposignage.css, apobooking_public.css) schalten Bewegung ihrerseits ab, koennen die Zusage also nur verstaerken, nie aufweichen. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } }