/* * Design-System "Stille Klarheit", Nutzerentscheidung 2026-10-03 (Schritt 4, * Schrift): Noto Sans (Google Fonts, OFL-lizenziert), lokal vendort unter * css/fonts/ -- NICHT ueber die Google-Fonts-CDN nachgeladen. Grund: die App * ist Offline-first (PWA mit Service-Worker-Precache, file://-Start ohne * Netzwerk) -- ein Nachladezwang zu einem externen Host wuerde beides * brechen UND eine neue externe Abhaengigkeit ausserhalb der bestehenden * CSP/Netzwerk-Allowlist einfuehren (server/security-helpers.js * STATIC_DIRECTORIES erlaubt ".woff2" bereits gezielt unter "/css/" -- * dieser Pfad wird hier zum ersten Mal tatsaechlich genutzt). * * 4 Teilbereiche (Latin/Latin-Ext/Griechisch/Kyrillisch -- Entscheidung * 2026-10-02: KEIN Kyrillisch-Ext/Devanagari/Griechisch-Ext/Vietnamesisch/ * CJK/Arabisch), echte Groessen gemessen (nicht geschaetzt): * latin=35.820B, latin-ext=167.960B, greek=21.776B, cyrillic=20.080B, * zusammen 245.636 Byte (~240 KB). unicode-range je Subset direkt aus * Google Fonts' eigener css2-API uebernommen (fonts.googleapis.com, * modernes Chrome-UA fuer WOFF2 statt TTF abgefragt) -- der Browser laedt * dadurch pro Seite nur die Subset-Datei(en), deren Zeichen tatsaechlich * vorkommen, nie alle 4 auf einmal. Lizenz/Herkunft: FONT_LICENSES.md. * * Variable Schriftschnitt-Datei (wght 100-900 in einer Datei, daher * font-weight als Bereich statt Einzelwert) -- deckt alle im Projekt * verwendeten Schriftstaerken ab (400/500/600/700, siehe font-weight- * Fundstellen in dieser Datei) ohne weitere Dateien. * * font-display: swap -- Text bleibt mit dem Fallback-Stack sofort lesbar, * tauscht non-blocking, sobald die Datei geladen ist. Kompatibilitaet hat * Vorrang (Nutzer-Vorgabe): fehlt eine Datei (404, Dateisystem-Zugriff * blockiert o.ae.), faellt die Schrift automatisch auf den weiter unten im * Basis-Selektor definierten font-family-System-Stack zurueck -- kein * zusaetzlicher Code noetig, das ist eingebautes CSS-Verhalten. Siehe * tests/guard.font-noto-sans.test.js fuer den expliziten Beleg (Fallback- * Kette vorhanden, Dateien existieren mit den oben genannten exakten * Groessen, CSP erlaubt den Ladeweg). */ @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/noto-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/noto-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/noto-sans-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/noto-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { --bg: #f4f7fb; --surface: #ffffff; --surface-muted: #f8fafc; --surface-strong: #eef3f8; --text: #152033; --text-muted: #5d6c82; --border: #d9e1eb; --border-strong: #b9c7d8; --primary: #185bb9; --primary-hover: #0e4a9d; --primary-soft: #e7f0ff; --success: #157348; --success-soft: #e6f6ed; --warning: #a75d00; --warning-soft: #fff3dc; --danger: #b42318; --danger-hover: #8d1b12; --danger-soft: #feeceb; /* * Status-Center-Avatar-Badge (Nutzerauftrag 2026-10-01): dritte, eigene * Stufe "Info" (gelb) neben --warning (orange) und --danger (rot) -- * eigener Ton statt Wiederverwendung von --warning, damit alle drei * Prioritaetsstufen auf einen Blick unterscheidbar sind. #8a6d00 auf * Weiss: 4,92:1 (AA). */ --info: #8a6d00; --info-soft: #fdf6da; /* * AP7b-1 (2026-08-30): CSS-Custom-Properties fuer Diagrammfarben, die * bisher als reine Hex-Literale in Chart-Klassen unten bzw. als * JS-Konstanten (js/settings/activity-categories.js) hartcodiert waren * -- dadurch unveraendert im Dark-Theme (z.B. war --chart-af im Light- * Modus zufaellig identisch zu --primary, blieb im Dark-Modus aber die * dunkle Light-Variante und damit kaum lesbar vor dunklem Hintergrund). * Namensschema bewusst zweigeteilt, damit AP7b-2 (Band-Layer, noch * NICHT umgesetzt) sauber andocken kann, ohne umzubauen: --chart-* = * Linien-/Punkt-/Marker-Vordergrundfarben (diese Runde), --band-* = * reservierter, noch NICHT befuellter Namensraum fuer die spaeteren * Tag/Nacht-/Aktivitaetsphasen-/Medikationsfenster-Hintergrundflaechen. */ /* * Nutzerauftrag 2026-10-01 ("Beschriftungen/Farben bei allen Diagrammen * fuer alle Channels pruefen und optimieren"): komplette Neuvergabe aller * 11 --chart-*-Werte, systematisch generiert (fixer Hue pro Kanal, * HSL->Hex, WCAG-Kontrast gegen --bg je Theme nachjustiert, siehe * PROJECT_STATUS.md Abschnitt "Diagramm-Farbpalette 2026-10-01" fuer das * Erzeugungsskript). Feste Zuordnung je Kanal, EIN Hue pro Kanal ueber * ALLE 5 Themes hinweg (nur Lightness/Saturation passen sich dem Theme- * Hintergrund an) -- das ist die Umsetzung von "unabhaengig vom Theme". * Pflichtvorgabe: HR=rot (hue 5), Atmung/AF=blau (hue 215), in jedem der * 5 Themes unten identisch eingehalten. Alle Werte >=4.5:1 Kontrast * gegen --bg (ikyru-a11y >=7:1). Vorherige Kollision --chart-hrv == * --chart-ratio im Dark-Theme (beide #b79aec) ist mit dieser Neuvergabe * behoben (siehe PROJECT_STATUS.md). */ --chart-hr: #ab2c21; --chart-af: #215aab; --chart-ratio: #6621ab; --chart-weight: #188144; /* * Gesundheits-Stammdaten-Konzept, Commit C (2026-09-11): fuer den * neuen "height"-Channel (exakt analog "weight" aufgebaut, siehe * channel-registry.js), damit dessen automatisch abgeleitetes * cssColorVar (--chart-height) nicht ins Leere zeigt -- sonst * unsichtbare Linie/Markierung, sobald der Channel je gechartet wird. */ --chart-height: #7b7324; --chart-barking: #9e4a2e; --chart-measurement: #ab21ab; --chart-stool: #634a2c; /* * Sprint 13 (2026-09-14): fuer die drei neuen Fitbit-Vital-Kanaele * (resting_heartrate/spo2/hrv, channel-registry.js) -- gleicher Grund * wie beim --chart-height-Kommentar oben. */ --chart-resting-heartrate: #ab2172; --chart-spo2: #167474; --chart-hrv: #2121ab; /* * Nutzerauftrag 2026-10-01 (Fortsetzung der Diagramm-Farbpruefung): * BEFUND -- die Marker-Ereigniskanaele (diagnosis/vet_appointment/ * symptom_episode, js/core/channel-registry.js) hatten GAR KEINE * Fuellfarbe (chart-renderer.js appendMarkerChannelRow() setzt die * Klasse chart-marker-, aber es gab keine CSS-Regel dafuer -- * Raute blieb auf Browser-Default-Fuellung statt einer bewussten * Farbe), und die Legende kannte nur 4 von 9 Marker-Kanaelen * (renderChartLegend(), ui-charts.js). Generischer Fix: JEDER Marker- * Kanal bekommt jetzt sein eigenes --chart--Token -- die bereits * bestehenden 6 nutzen es als blossen ALIAS auf ihren semantischen Ton * (unveraendertes Aussehen, EINE Quelle statt zwei), die 3 bisher * ungefaerbten bekommen neue, kontrastgepruefte Farben (>=4,5:1 gegen * --bg, ikyru-a11y >=7:1). renderChartLegend() liest jetzt fuer ALLE * Kanaele (Linie UND Marker) einheitlich channel.cssColorVar -- * keine manuell nachgepflegte CSS-Klasse pro Kanal mehr noetig. */ --chart-medication_administration: var(--success); --chart-medication_planned: var(--text-muted); --chart-medication_plan_change: var(--danger); --chart-observation: var(--warning); --chart-context_event: var(--primary); --chart-nutrition_event: var(--chart-measurement); --chart-diagnosis: #3b8118; --chart-vet_appointment: #4f21ab; --chart-symptom_episode: #ab2138; /* * Nutzerauftrag 2026-09-24 (medizinische Diagramm-Zusatzoptionen, Prioritaet 4 * "Vergleichszeitraum"): vorgebaute, aber noch nicht aktivierte Farbdaempfungs- * Option fuer die Vorperiode-Linie (.chart-line-comparison) -- siehe dortiger * Kommentar. 1 = keine Daempfung (aktueller Stand, Nutzerentscheidung). */ --chart-comparison-overlay-opacity: 1; /* * Nutzer-Auftrag "Daten-Uebersicht" (2026-09-14): kleine, feste * Palette fuer die neue profilweite Abdeckungs-/Luecken-Zeitleiste * (App.UI.openDataCoverageDialog(), ui-overview.js) -- EIN Farbton * je unterschiedlicher Datenquelle (zyklisch durchlaufen, nicht * kanalgebunden wie --chart-hr/--chart-af oben), plus ein eigener, * bewusst deutlich abweichender Farbton fuer Luecken-Abschnitte. */ --coverage-source-1: #2f8f5b; --coverage-source-2: #185bb9; --coverage-source-3: #b8760a; --coverage-source-4: #7b4acb; --coverage-source-5: #1f8f8c; --coverage-gap: #c33a32; /* * Reine Namens-Aliase auf bereits theme-fähige Tokens (keine neue * Farbe) -- damit alle vier in dieser Runde geforderten Bereiche * (HR/AF/Aktivitaets-Codes/Findings) unter demselben --chart-*-/--act-*- * Schema auffindbar sind. Nur in :root definiert (nicht im * Dark-Block) -- var(--danger) etc. loest bereits am Verwendungsort * auf die dort aktive Theme-Variante auf, eine Dark-Redefinition * dieser Aliase waere reine Duplikation. */ --chart-finding-high: var(--danger); --chart-finding-medium: var(--warning); --chart-finding-low: var(--text-muted); /* * Korb E, Paket E1.1 (SVG-Sprite-Icon-System, 2026-09-16): reiner * Namens-Alias auf --text-muted (kein neuer Farbwert) -- Icons sind * standardmaessig dezent/sekundaer, dieselbe Logik wie die * --chart-finding-*-Aliase oben. Nur in :root definiert, kein * Dark-Block-Gegenstueck noetig (var(--text-muted) loest bereits am * Verwendungsort theme-richtig auf). Ein Icon mit eigener Bedeutung * (z.B. Severity-Icons) ueberschreibt die Farbe gezielt am * Verwendungsort, nicht hier global. */ --icon-color: var(--text-muted); /* * Aktivitaets-Codes: feste Farbe pro bekanntem Default-Code * (js/settings/activity-categories.js KNOWN_CODE_COLORS), benannt * nach dem jeweiligen Klartext-Label. */ --act-code-unknown: #8a94a3; --act-code-standing: #f2c94c; --act-code-resting: #5cb3ae; --act-code-sleep: #0f4d49; --act-code-walking: #f2a541; --act-code-running: #a8331f; /* * Fallback-Palette pro Klassifizierung * (FALLBACK_PALETTE_BY_CLASSIFICATION) fuer unbekannte/ * benutzerdefinierte Aktivitaets-Codes. */ --act-resting-1: #5cb3ae; --act-resting-2: #0f4d49; --act-active-1: #f0c04b; --act-active-2: #8a4508; --act-light-1: #f5cd7a; --act-light-2: #c98a1f; --act-unknown-1: #aab1bd; --act-unknown-2: #6b7280; --act-unknown-3: #545b66; /* * AP7b-2a (Band-Layer): befuellt den in AP7b-1 reservierten * band-Namensraum. --band-night faerbt sowohl das dezente * Hintergrundband als auch (spaeter, AP7b-2b) die Tag/Nacht-Spur -- * Aktivitaetsphasen nutzen bewusst die bereits vorhandenen act- * Tokens ueber App.ActivityCategories.getClassificationColor() * statt eigener band-Aktivitaets-Farben (keine zweite Palette fuer * dieselbe Bedeutung). Medikationsphasen (PRE_DOSE/PEAK/MID_CYCLE/ * WEARING_OFF, App.ContextClustering.medPhase) bekommen eine eigene, * vierteilige Skala. * Nachtrag (2026-08-31, Usertest-Finding 6): --band-morning/-day/ * -evening ergaenzt -- resolveBandColor()/resolveBandValueLabel() * (js/ui/chart-renderer.js) faellen fuer bandType "dayNight" vorher * fuer JEDE Klassifizierung (NACHT/MORGEN/TAG/ABEND) auf --band-night/ * "Nacht" zurueck, jetzt vier eigene Werte je Tageszeit. */ --band-night: #1f3a63; --band-morning: #d98a3f; --band-day: #4a90c9; --band-evening: #8a4a7a; --band-medphase-pre-dose: #9aa8c9; --band-medphase-peak: #2f8f5b; --band-medphase-mid-cycle: #5cb3ae; --band-medphase-wearing-off: #c98a1f; --shadow: 0 12px 35px rgba(24, 52, 82, 0.08); --radius: 14px; --radius-small: 9px; color-scheme: light; /* * "Inter" -> "Noto Sans" (2026-10-03, s.o.): "Inter" war nie per * @font-face eingebunden, loeste also auf jedem System ohne lokal * installiertes Inter ohnehin sofort auf ui-sans-serif/system-ui/... * durch. "Noto Sans" ist jetzt der erste Name, der tatsaechlich auf * eine (lokal vendorte) Schriftdatei verweist -- der gesamte * restliche Fallback-Stack bleibt unveraendert und greift unveraendert, * falls die Dateien fehlen oder nicht laden. */ font-family: "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } :root[data-theme="dark"] { --bg: #0d1521; --surface: #152131; --surface-muted: #19283a; --surface-strong: #213248; --text: #edf4ff; --text-muted: #b4c3d7; --border: #30445d; --border-strong: #46617f; --primary: #77adff; --primary-hover: #a2c8ff; --primary-soft: #1c3863; --success: #62d59b; --success-soft: #173c2c; --warning: #f7bb58; --warning-soft: #483413; --danger: #ff968d; --danger-hover: #ffb5af; --danger-soft: #542525; /* Dark-Gegenstueck zum --info-Token oben (Status-Center-Avatar-Badge). */ --info: #e8d44a; --info-soft: #463f16; /* * Dark-Gegenstuecke zu den --chart-*-/--act-*-Tokens oben -- hellere/ * entsaettigtere Toene DESSELBEN Hues wie im Light-Theme (Nutzerauftrag * 2026-10-01, siehe Kommentar in :root oben), nur Lightness/Saturation * an den dunklen Hintergrund angepasst. HR bleibt rot, AF bleibt blau. * Vorherige Kollision behoben: --chart-af war hier bisher faelschlich * `var(--primary)` statt einer eigenen Farbe, und --chart-hrv war mit * --chart-ratio identisch (beide #b79aec) -- beides mit dieser * Neuvergabe korrigiert. */ --chart-hr: #dd867e; --chart-af: #7ea6dd; --chart-ratio: #ad7edd; --chart-weight: #7edda6; --chart-height: #d5ce86; --chart-barking: #d59a86; --chart-measurement: #dd7edd; --chart-stool: #b3926b; --chart-resting-heartrate: #dd7eb5; --chart-spo2: #7edddd; --chart-hrv: #7e7edd; /* Marker-Kanal-Aliase/-Farben, gleicher Grund wie im :root-Block oben. */ --chart-medication_administration: var(--success); --chart-medication_planned: var(--text-muted); --chart-medication_plan_change: var(--danger); --chart-observation: var(--warning); --chart-context_event: var(--primary); --chart-nutrition_event: var(--chart-measurement); --chart-diagnosis: #9edd7e; --chart-vet_appointment: #9e7edd; --chart-symptom_episode: #dd7e8e; /* Dark-Gegenstuecke zu den --coverage-*-Tokens oben, gleiches Prinzip. */ --coverage-source-1: #57c98a; --coverage-source-2: var(--primary); --coverage-source-3: #e0a83e; --coverage-source-4: #b295e8; --coverage-source-5: #5fcac6; --coverage-gap: #ff7a6e; --act-code-unknown: #aab4c2; --act-code-standing: #f5d873; --act-code-resting: #7fd1cb; --act-code-sleep: #3f8f88; --act-code-walking: #f5b866; --act-code-running: #d9634b; --act-resting-1: #7fd1cb; --act-resting-2: #3f8f88; --act-active-1: #f3cd73; --act-active-2: #c07a2e; --act-light-1: #f7d998; --act-light-2: #dba64a; --act-unknown-1: #c2c9d4; --act-unknown-2: #8b93a1; --act-unknown-3: #6b7280; /* Dark-Gegenstuecke zu den band-Tokens oben, gleiches Kontrast-Prinzip. */ --band-night: #6b8fd6; --band-morning: #f0b06a; --band-day: #7ab8e0; --band-evening: #b06aa0; --band-medphase-pre-dose: #b7c2de; --band-medphase-peak: #57c98a; --band-medphase-mid-cycle: #7fd1cb; --band-medphase-wearing-off: #dba64a; --shadow: 0 12px 35px rgba(0, 0, 0, 0.26); color-scheme: dark; } /* * Phase E5 (WCAG-2.2-Audit, 2026-09-15): .button.primary/.button.danger * setzen `color: #ffffff` fest (siehe unten) -- im Dark-Theme sind * --primary/--danger aber deutlich aufgehellte Akzenttoene (fuer * Lesbarkeit von TEXT vor dunklem Hintergrund gedacht), nicht fuer * weissen Text auf sich selbst. Weiss-auf-Hellblau/-Lachs lag bei * ~2,1-2,3:1, weit unter AA 4,5:1. Dunkler Text (--bg) statt Weiss * behebt das in beiden Faellen (Hover-Hintergruende sind noch heller, * bleiben also ebenfalls konform). */ :root[data-theme="dark"] .button.primary, :root[data-theme="dark"] .button.danger { color: var(--bg); } /* * Ikyru Zen-Theme (Nutzerauftrag 2026-09-24): drei zusaetzliche, eigene * Theme-Werte -- "light"/"dark" oben bleiben VOLLSTAENDIG unveraendert, * nichts wird ersetzt (ausdrueckliche Leitplanke). Naming bewusst * "ikyru-light"/"ikyru-dark"/"ikyru-a11y" statt einer Wiederverwendung von * "light"/"dark": diese Werte sind bereits vergeben (siehe :root oben und * :root[data-theme="dark"]), eine Wiederverwendung wuerde sie ueberschreiben * statt sie zu ergaenzen (Konzeptvorschlag, Chat 2026-09-24, Punkt 6 -- * vom Nutzer bestaetigt). * * Farbwelt (Nutzer-Vorgabe): Tinte/Papier-Basis, EIN Akzent (Siegellack- * Rot #B4453A Light / #C85A4D Dark) statt bunter Kategoriefarben -- * Datentrennung in Diagrammen laeuft ueber Linienstil (stroke-dasharray je * Kanal, siehe .chart-line-* Regeln unten und guard.ikyru-theme-wiring. * test.js), nicht ueber Farbvielfalt: alle --chart-*-Tokens zeigen daher * unten auf denselben --primary-Akzent. --coverage-*, --act-* und --band-* * bleiben bewusst unterscheidbare (aber gedaempfte) Toene -- diese Bereiche * zeigen mehrere KATEGORIEN GLEICHZEITIG nebeneinander (z.B. die * Abdeckungs-Zeitleiste mehrerer Datenquellen auf einmal), fuer die * Linienstil keine uebertragbare Unterscheidungstechnik ist (keine Linien, * sondern gefuellte Flaechen) -- das waere ausserhalb dessen, was der * Nutzerauftrag mit "Diagrammfarben" (Vitalwert-Kanaele) meinte. */ :root[data-theme="ikyru-light"] { --bg: #f7f5f0; --surface: #fcfaf6; --surface-muted: #f2efe8; --surface-strong: #eae5d9; --text: #20262a; --text-muted: #5b6368; --border: #dcd6c9; --border-strong: #9aa6a0; /* * Design-System "Stille Klarheit", Nutzerentscheidung 2026-10-03 * (Token-Konsolidierung + Farbentscheidung 1): Hauptakzent jetzt aus dem * Logo-Blau abgeleitet (icons/icon.svg, #185bb9, HSL h:215/s:77/l:41 -- * "Ai-iro"/Indigo), auf grossen Flaechen gedaempft (s:60 statt 77). * ABLOESUNG, keine Fortfuehrung: der bisherige Ton #b4453a ("Siegellack- * Rot") war NICHT das Logo-Blau -- eine fruehere Analyse (Migrationsplan- * Entwurf, Abschnitt 3.1) hat das faelschlich behauptet, indem sie den * falschen/laengst abgeloesten CSS-Block (bare :root, Alt-Theme) statt * dieses aktiven ikyru-light-Blocks verglichen hat. #2d65b4 (h:215/s:60/ * l:44) erreicht 5,31:1 auf --bg, 5,55:1 auf --surface (AA 4,5:1). */ --primary: #2d65b4; --primary-hover: #255393; /* Akzent-Text (#2d65b4) auf diesem Pill-/Badge-Hintergrund: 5,08:1. */ --primary-soft: #e9f1fb; /* * Zweitfarbe "Jade" (Nutzerentscheidung 2026-10-03): bewusst nicht der * gleiche Gruenton wie --success (h:154, sehr blass, s:7 -- siehe * darunter) -- Jade liegt auf h:178 (Richtung Tuerkis/Teal statt * Gelbgruen) UND deutlich saettigungsstaerker (s:55), damit sich beide * Token-Paare klar unterscheiden, nicht nur im Hex-Wert. Eigener * Kontrasttest: tests/guard.ikyru-theme-wiring.test.js. */ --accent-2: #217370; --accent-2-hover: #1a5b59; /* Akzent-Text (#217370) auf diesem Pill-/Badge-Hintergrund: 5,19:1. */ --accent-2-soft: #ebf9f9; --success: #5f6d67; /* * s.o.: von #e7eae6 auf #f5f6f4 aufgehellt -- Alt-Ton erreichte nur * 4,47:1 (unter AA 4,5:1). Neu: 5,01:1. */ --success-soft: #f5f6f4; /* * Nutzerauftrag 2026-09-24 (Nachbesserung nach Live-Kontrast-Audit, * ECHTER Bug, keine Grenzwertfrage): der urspruengliche Ton #a67c3d * erreichte nur 3,46:1 auf --bg / 3,62:1 auf --surface UND 3,07:1 auf * --warning-soft -- alle drei unter AA 4,5:1, unabhaengig vom Hintergrund * (auch reines Weiss reicht fuer #a67c3d nicht: 3,77:1). Abgedunkelt auf * #7e5e2e (gleiche Ocker-Familie) -- neu: 5,46:1 auf --bg, 5,71:1 auf * --surface, 4,85:1 auf --warning-soft (--warning-soft selbst bleibt * unveraendert, reicht mit dem dunkleren Text bereits). */ --warning: #7e5e2e; --warning-soft: #f1e7d4; --danger: #7a2e24; --danger-hover: #5f241c; --danger-soft: #eedbd7; /* Ikyru-Gegenstueck zum --info-Token oben (Status-Center-Avatar-Badge). */ --info: #8a7a1f; --info-soft: #f3efd9; /* * ABGELOEST durch Nutzerauftrag 2026-10-01 (siehe ausfuehrlicher * Kommentar bei den --chart-*-Tokens in :root oben): die Nutzer-Vorgabe * 2026-09-24 "Ein Akzent statt Kategoriefarben, Kanaele nur per * stroke-dasharray unterscheiden" wird NICHT mehr befolgt -- echte * Kanalfarben sind jetzt Pflicht (HR=rot, AF=blau, feste Hues je Kanal * ueber alle Themes). Die stroke-dasharray-Regeln weiter unten * (".chart-line-hr" etc.) bleiben als ZUSAETZLICHE, redundante * Kodierung bestehen (hilft z.B. bei Farbfehlsichtigkeit) -- * Dokumentation der Abloesung: PROJECT_STATUS.md, Abschnitt * "Diagramm-Farbpalette 2026-10-01". */ --chart-hr: #8d3c34; --chart-af: #34598d; --chart-ratio: #61348d; --chart-weight: #276842; --chart-height: #716b33; --chart-barking: #864e3c; --chart-measurement: #8d348d; --chart-stool: #514434; --chart-resting-heartrate: #8d3468; --chart-spo2: #276868; --chart-hrv: #34348d; /* Marker-Kanal-Aliase/-Farben, gleicher Grund wie im :root-Block oben. */ --chart-medication_administration: var(--success); --chart-medication_planned: var(--text-muted); --chart-medication_plan_change: var(--danger); --chart-observation: var(--warning); --chart-context_event: var(--primary); --chart-nutrition_event: var(--chart-measurement); --chart-diagnosis: #3c6827; --chart-vet_appointment: #52348d; --chart-symptom_episode: #8d3443; --coverage-source-1: #5f6d67; --coverage-source-2: #b4453a; --coverage-source-3: #a67c3d; --coverage-source-4: #7c8a7f; --coverage-source-5: #9aa6a0; --coverage-gap: #c9c2b2; --act-code-unknown: #b3ada0; --act-code-standing: #a67c3d; --act-code-resting: #9aa6a0; --act-code-sleep: #5f6d67; --act-code-walking: #96654a; --act-code-running: #b4453a; --act-resting-1: #9aa6a0; --act-resting-2: #5f6d67; --act-active-1: #c99a5c; --act-active-2: #96654a; --act-light-1: #d9c8a8; --act-light-2: #a67c3d; --act-unknown-1: #c9c2b2; --act-unknown-2: #b3ada0; --act-unknown-3: #8a8578; --band-night: #5f6d67; --band-morning: #c99a5c; --band-day: #9aa6a0; --band-evening: #96654a; --band-medphase-pre-dose: #c9c2b2; --band-medphase-peak: #5f6d67; --band-medphase-mid-cycle: #9aa6a0; --band-medphase-wearing-off: #a67c3d; --shadow: 0 12px 30px rgba(32, 38, 42, 0.08); color-scheme: light; } :root[data-theme="ikyru-dark"] { --bg: #20262a; --surface: #262d31; --surface-muted: #2b3236; --surface-strong: #333b3f; --text: #f7f5f0; --text-muted: #b9c0bc; --border: #454d48; --border-strong: #6c7871; /* * Design-System "Stille Klarheit", Nutzerentscheidung 2026-10-03 * (Token-Konsolidierung + Farbentscheidung 1): Hauptakzent aus dem * Logo-Blau (#185bb9) abgeleitet, fuer das Dark-Theme wie gewohnt * aufgehellt (gleiches Prinzip wie zuvor beim Siegellack-Rot -- der * dunkle Logo-Ton selbst waere auf dunklem Grund zu kontrastarm). #719bd6 * (h:215/s:55/l:64) erreicht 5,37:1 auf --bg, 4,90:1 auf --surface (AA * 4,5:1). Als Knopf-Hintergrund mit weissem Text waere das zu hell * (2,85:1) -- Knopf-Textfarbe daher unten weiterhin gezielt auf --bg * umgeschaltet (5,37:1 mit dunkler Tinte), exakt das bereits bestehende * Muster von :root[data-theme="dark"] oben (dort fuer denselben Grund bei * .button.primary/.button.danger) -- bleibt unveraendert gueltig, da die * Regel nicht an einen bestimmten Farbwert gebunden ist. */ --primary: #719bd6; --primary-hover: #88abdd; /* Akzent-Text (#719bd6) auf diesem Pill-/Badge-Hintergrund: 5,06:1. */ --primary-soft: #152a47; /* * Zweitfarbe "Jade" (s.o., gleiche Nutzerentscheidung): h:178/s:50, * deutlich von --success (h:150, s:6 -- fast Graugruen) unterschieden. */ --accent-2: #5bc8c5; --accent-2-hover: #71d0cd; /* Akzent-Text (#5bc8c5) auf diesem Pill-/Badge-Hintergrund: 5,67:1. */ --accent-2-soft: #1c403f; --success: #9aa6a0; --success-soft: #2b322e; --warning: #c79a5c; --warning-soft: #3a2f1e; /* * --danger #e08a7a statt derselben Akzentfarbe -- Weiss-auf-#e08a7a waere * bei nur 2,60:1 zu niedrig; die Knopf-Textfarbe wird daher unten gezielt * auf --bg umgeschaltet (5,89:1), exakt das bereits bestehende Muster von * :root[data-theme="dark"] oben. */ --danger: #e08a7a; --danger-hover: #eaa695; --danger-soft: #3d2620; /* Ikyru-Dark-Gegenstueck zum --info-Token oben (Status-Center-Avatar-Badge). */ --info: #d4c468; --info-soft: #3a351c; /* Abgeloest 2026-10-01, gleicher Grund wie bei :root[data-theme="ikyru-light"] oben. */ --chart-hr: #cb8b86; --chart-af: #86a3cb; --chart-ratio: #a886cb; --chart-weight: #86cba3; --chart-height: #c4bf8d; --chart-barking: #c49a8d; --chart-measurement: #cb86cb; --chart-stool: #9c8c77; --chart-resting-heartrate: #cb86ae; --chart-spo2: #86cbcb; --chart-hrv: #8686cb; /* Marker-Kanal-Aliase/-Farben, gleicher Grund wie im :root-Block oben. */ --chart-medication_administration: var(--success); --chart-medication_planned: var(--text-muted); --chart-medication_plan_change: var(--danger); --chart-observation: var(--warning); --chart-context_event: var(--primary); --chart-nutrition_event: var(--chart-measurement); --chart-diagnosis: #9dcb86; --chart-vet_appointment: #9d86cb; --chart-symptom_episode: #cb8691; --coverage-source-1: #9aa6a0; --coverage-source-2: #c85a4d; --coverage-source-3: #c79a5c; --coverage-source-4: #7c8a7f; --coverage-source-5: #6c7871; --coverage-gap: #454d48; --act-code-unknown: #7c8a7f; --act-code-standing: #c79a5c; --act-code-resting: #9aa6a0; --act-code-sleep: #6c7871; --act-code-walking: #c99a72; --act-code-running: #c85a4d; --act-resting-1: #9aa6a0; --act-resting-2: #6c7871; --act-active-1: #c79a5c; --act-active-2: #96654a; --act-light-1: #d9c8a8; --act-light-2: #a67c3d; --act-unknown-1: #7c8a7f; --act-unknown-2: #6c7871; --act-unknown-3: #454d48; --band-night: #454d48; --band-morning: #c79a5c; --band-day: #6c7871; --band-evening: #96654a; --band-medphase-pre-dose: #7c8a7f; --band-medphase-peak: #9aa6a0; --band-medphase-mid-cycle: #6c7871; --band-medphase-wearing-off: #c79a5c; --shadow: 0 12px 35px rgba(0, 0, 0, 0.4); color-scheme: dark; } :root[data-theme="ikyru-dark"] .button.primary, :root[data-theme="ikyru-dark"] .button.danger { color: var(--bg); } /* * Ikyru a11y-Variante: KEIN drittes "huebsches" Theme, sondern maximal * simplifiziert -- Funktion vor Aesthetik (Nutzer-Vorgabe). Kontrast * >=7:1 (WCAG AAA) rechnerisch geprueft (WCAG-Relativluminanz-Formel, * nicht nur geschaetzt), siehe Werte in den Kommentaren je Token. Eigene, * VOLLE Token-Kaskade (wie :root[data-theme="dark"] oben auch keine * "nur Overrides" ist) -- ein Kontrast-Modus kann keine Werte des * dekorativen Basisthemes erben, die selbst nicht AAA-geprueft sind. */ :root[data-theme="ikyru-a11y"] { --bg: #ffffff; --surface: #ffffff; --surface-muted: #f2f2f2; --surface-strong: #e8e8e8; --text: #111111; --text-muted: #333333; --border: #333333; --border-strong: #000000; /* #111 auf #fff: 18,88:1. */ /* * Design-System "Stille Klarheit", Nutzerentscheidung 2026-10-03 * (Token-Konsolidierung + Farbentscheidung 1): Hauptakzent aus dem * Logo-Blau abgeleitet, fuer den a11y-Modus auf AAA (>=7:1) abgedunkelt. * #1c519c auf #fff: 7,76:1. */ --primary: #1c519c; --primary-hover: #153f79; /* Akzent-Text (#1c519c) auf diesem Pill-/Badge-Hintergrund: 7,22:1. */ --primary-soft: #f4f7fa; /* * Zweitfarbe "Jade" (s.o.), ebenfalls auf AAA abgedunkelt, h:178 (Teal) * statt --success' h:140 -- klar unterscheidbar. #105b59 auf #fff: 7,89:1. */ --accent-2: #105b59; --accent-2-hover: #0d4a48; /* Akzent-Text (#105b59) auf diesem Pill-/Badge-Hintergrund: 7,30:1. */ --accent-2-soft: #ebf9f9; /* #1e5631 auf #fff: 8,64:1. Auf --success-soft (#e3ece6): 7,16:1 -- bereits AAA, unveraendert. */ --success: #1e5631; --success-soft: #e3ece6; /* * s.o.: von #efe6d3 auf #f5f0e4 aufgehellt -- Alt-Ton erreichte nur * 6,70:1 (unter AAA 7:1). Neu: 7,31:1. */ --warning: #6b4700; --warning-soft: #f5f0e4; /* * s.o.: von #f0ddd6 auf #f9f2ef aufgehellt -- Alt-Ton erreichte nur * 6,19:1 (unter AAA 7:1). Neu: 7,34:1. */ --danger: #8a3419; --danger-hover: #6e2913; --danger-soft: #f9f2ef; /* * a11y-Gegenstueck zum --info-Token oben (Status-Center-Avatar-Badge), * AAA-geprueft: #5c5400 auf Weiss: 7,71:1, auf --info-soft: 7,09:1. */ --info: #5c5400; --info-soft: #f8f6e6; /* * Abgeloest 2026-10-01, gleicher Grund wie bei :root[data-theme= * "ikyru-light"] oben -- hier zusaetzlich auf AAA (>=7:1 statt >=4,5:1) * nachjustiert, da ikyru-a11y durchgehend AAA-Kontrast einhaelt. */ --chart-hr: #7b1d14; --chart-af: #143f7b; --chart-ratio: #47147b; --chart-weight: #0d4f28; --chart-height: #595318; --chart-barking: #71331e; --chart-measurement: #7b147b; --chart-stool: #3a2b18; --chart-resting-heartrate: #7b1450; --chart-spo2: #0d4f4f; --chart-hrv: #14147b; /* Marker-Kanal-Aliase/-Farben, gleicher Grund wie im :root-Block oben. */ --chart-medication_administration: var(--success); --chart-medication_planned: var(--text-muted); --chart-medication_plan_change: var(--danger); --chart-observation: var(--warning); --chart-context_event: var(--primary); --chart-nutrition_event: var(--chart-measurement); --chart-diagnosis: #234f0d; --chart-vet_appointment: #36147b; --chart-symptom_episode: #7b1425; --coverage-source-1: #1e5631; --coverage-source-2: #8b2e24; --coverage-source-3: #6b4700; --coverage-source-4: #333333; --coverage-source-5: #000000; --coverage-gap: #999999; --act-code-unknown: #666666; --act-code-standing: #6b4700; --act-code-resting: #1e5631; --act-code-sleep: #000000; --act-code-walking: #6e241c; --act-code-running: #8a3419; --act-resting-1: #1e5631; --act-resting-2: #000000; --act-active-1: #6b4700; --act-active-2: #333333; --act-light-1: #999999; --act-light-2: #6b4700; --act-unknown-1: #999999; --act-unknown-2: #666666; --act-unknown-3: #333333; --band-night: #000000; --band-morning: #6b4700; --band-day: #333333; --band-evening: #6e241c; --band-medphase-pre-dose: #999999; --band-medphase-peak: #1e5631; --band-medphase-mid-cycle: #333333; --band-medphase-wearing-off: #6b4700; --shadow: none; color-scheme: light; /* * Nutzer-Vorgabe: Basis-Schriftgroesse >=18px, Zeilenhoehe 1.6, dicke * farbige Fokus-Ringe. font-size auf :root (nicht body) wirkt auf jedes * rem-basierte Mass im ganzen Dokument, ohne jede Komponente einzeln * anzufassen. */ font-size: 18px; line-height: 1.6; } :root[data-theme="ikyru-a11y"] :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* * Nutzer-Vorgabe: "alle rein dekorativen Meridian-/Enso-SVG-Elemente * ausgeblendet" im a11y-Modus -- Funktion vor Aesthetik. Jedes rein * dekorative Grafikelement (Hero-Banner, Kiesgarten-Hintergrund, siehe * .ikyru-hero/.ikyru-decorative unten) traegt dafuer die Klasse * "ikyru-decorative"; ein Screenreader ueberspringt sie ohnehin * (aria-hidden="true", siehe Markup), dieser Block entfernt sie zusaetzlich * optisch, damit sie im a11y-Modus keine Aufmerksamkeit/Kontrast-Flaeche * beanspruchen, die dem eigentlichen Inhalt fehlen wuerde. */ :root[data-theme="ikyru-a11y"] .ikyru-decorative { display: none !important; } /* * Ikyru Zen-Theme: Hero-Banner (Willkommen-Bildschirm) -- standardmaessig * UNSICHTBAR (display:none), fuer light/dark/auto also null zusaetzliches * Markup-Gewicht sichtbar. Nur bei aktivem Ikyru-Theme eingeblendet. * "currentColor" auf den Pfaden faerbt sich automatisch mit dem jeweiligen * Theme-Token um (siehe index.html-Kommentar an derselben Stelle) -- keine * zweite Datei fuer ikyru-light/-dark noetig. */ .ikyru-hero { display: none; } :root[data-theme^="ikyru"] .ikyru-hero { display: block; margin: 0 0 20px; } /* * "Ueber Ikyru"-Seite (Nutzerauftrag 2026-10-03): dieselbe Hero-Grafik, aber bewusst in JEDEM * Theme sichtbar (nicht nur bei aktivem Ikyru-Zen-Theme wie die Willkommen-Variante oben) -- * die Grafik ist hier der Seiteninhalt selbst ("huebsche Grafiken"), nicht ein optionales * Theme-Flourish. Hoehere Spezifitaet (zwei Klassen) gewinnt gegen die display:none-Grundregel; * die a11y-Theme-Regel oben (.ikyru-decorative, !important) blendet sie dort weiterhin aus. */ .about-hero.ikyru-hero { display: block; margin: 0 0 20px; } /* * Wortmarke-Icon (Topbar, links vom Markennamen): Nutzer-Vorgabe * (2026-09-27) -- gehoert fest zur Marke, nicht mehr an das Ikyru-Zen- * Theme gekoppelt wie zuvor. Immer sichtbar (ausser im a11y-Theme, siehe * .ikyru-decorative-Regel oben), "currentColor" faerbt sich automatisch * mit dem jeweiligen Theme-Token um. */ .ikyru-wordmark-icon { display: inline-block; width: 26px; height: 26px; vertical-align: middle; margin-right: 6px; color: var(--primary); } .ikyru-hero-svg { display: block; width: 100%; max-width: 320px; height: auto; } .ikyru-hero-enso { color: var(--primary); } .ikyru-hero-meridian { color: var(--text-muted); opacity: 0.35; } .ikyru-hero-pulse { color: var(--primary); } /* * Nutzerauftrag 2026-09-24/26: reichhaltigere Recraft.ai-Tuschezeichnung als Ersatz fuer * .ikyru-hero-simple, NUR bei ikyru-light (helle Flaeche noetig, siehe Kommentar in index.html). * .ikyru-hero-rich ist standardmaessig ausgeblendet -- fuer ikyru-dark/base/a11y also kein * zusaetzliches Rendergewicht sichtbar, nur das (bereits vorhandene) Markup liegt im DOM. */ .ikyru-hero-rich { display: none; } :root[data-theme="ikyru-light"] .ikyru-hero-simple { display: none; } :root[data-theme="ikyru-light"] .ikyru-hero-rich { display: block; } /* * "Ueber Ikyru"-Seite (Nutzerauftrag 2026-10-03): nutzt bewusst NUR die leichte .ikyru-hero-simple- * Variante (keine zweite Kopie der sehr grossen .ikyru-hero-rich-Tuschezeichnung hier noetig) -- * diese Regel gewinnt gegen die ikyru-light-Austauschregel direkt darueber (eine Klasse mehr auf * dem Wrapper), damit die einfache Linien-Grafik hier in JEDEM Theme sichtbar bleibt. */ :root[data-theme="ikyru-light"] .about-hero .ikyru-hero-simple { display: block; } /* * Wortmarke "Ikyru" (Recraft.ai) unter dem Hero-Grafikelement -- fuer ikyru-light UND ikyru-dark, * currentColor faerbt sich automatisch mit dem Theme-Akzent. Ergaenzt, ersetzt nicht, den * textbasierten Markennamen (bleibt fuer Screenreader/Suche unveraendert bestehen). */ .ikyru-hero-wordmark { display: block; width: 100%; max-width: 220px; height: auto; margin: 14px auto 0; color: var(--primary); } /* * Kopfleisten-Banner (Nutzerauftrag 2026-09-27): anders als .ikyru-hero IMMER sichtbar (jede * Ansicht, jedes Theme -- nicht an data-theme^="ikyru" gekoppelt), deshalb zurueckhaltend gestaltet: * geringe Hoehe, keine Animation (Nutzer-Vorgabe "ruhig"). .ikyru-decorative blendet ihn im * a11y-Theme aus wie jedes andere rein dekorative Element (siehe Regel weiter oben). * * Live-Fund (Nutzerauftrag 2026-09-28, "Grafiken sind immernoch nicht zu sehen"): "--border" war als * Farbe zu subtil -- dieses Token ist auf Trennlinien-Kontrast ausgelegt (z.B. #dcd6c9 auf #f7f5f0 * im hellen Theme, kaum messbarer Helligkeitsunterschied), zusaetzlich mit 0,45-0,7 Deckkraft * multipliziert praktisch unsichtbar. "--text-muted" ist das Token, das .ikyru-hero bereits * erfolgreich fuer denselben Zweck nutzt (gedaempft, aber lesbar) -- hier uebernommen, Deckkraft * angehoben, damit das Banner tatsaechlich wahrnehmbar ist, ohne laut zu wirken. * * Umbau (Nutzerauftrag 2026-09-28, "nicht unter Produktname/Profilbild, sondern in dieselbe Zeile * dahinter/in den Hintergrund"): war ein eigener Block UNTER .topbar (voller Breite, eigene Zeile) -- * jetzt absolut positionierter Hintergrund INNERHALB von .topbar (siehe index.html: erstes Kind vor * .brand), hinter .brand/.topbar-actions liegend. .topbar bekommt dafuer eine eigene * Stapelkontext-Ebene (position:relative + z-index), .brand/.topbar-actions werden explizit * darueber gelegt -- kein "aus dem Fluss geschoben"/uebersprungenes Layout, nur eine Ebene tiefer. * pointer-events:none, damit die rein dekorative Grafik keine Klicks auf Markenname/Profilbild * abfaengt. */ .topbar { position: relative; z-index: 0; } .brand, .topbar-actions { position: relative; z-index: 1; } /* * Live-Fund (Nutzerauftrag 2026-09-28, "Kopfzeile sieht schlecht aus"): .topbar ist flex-wrap -- * bei schmaler Breite faellt .topbar-actions (Profilbild) unter .brand (Markenname) in eine zweite * Zeile, aber .ikyru-header-banner spannte bisher IMMER die volle (dann hoehere) .topbar-Hoehe auf * und zentrierte sich darin -- die Linien/der Enso-Kreis landeten dadurch in der LEEREN LUECKE * zwischen den beiden umgebrochenen Zeilen, statt hinter Text/Bild zu liegen (wirkte wie ein * abgerissenes, zufaelliges Element statt wie Gestaltung). Fix: fest auf die Hoehe EINER Zeile * (oben) gepinnt, statt sich ueber die ganze, variable Topbar-Hoehe zu strecken -- liegt dadurch * bei breiter Ansicht (Marke+Bild nebeneinander) hinter beiden, bei schmaler (umgebrochener) * Ansicht sauber nur hinter der Markenzeile, nie mehr in einer Luecke. */ .ikyru-header-banner { position: absolute; top: 0; left: 0; right: 0; height: 3.25rem; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; z-index: 0; } .ikyru-header-banner-svg { display: block; width: 100%; height: 22px; color: var(--text-muted); } .ikyru-header-banner-enso { opacity: 0.85; } .ikyru-header-banner-meridian { opacity: 0.7; } .ikyru-header-banner-pulse { opacity: 0.55; } * { box-sizing: border-box; } html { min-height: 100%; background: var(--bg); /* * Phase E5 (WCAG-2.2-Audit, 2026-09-15, SC 2.4.11 "Focus Not * Obscured" -- neu in WCAG 2.2): .app-sticky-header (Topbar) ist * `position: sticky; top: 0`, der Scroll-Kontext ist der Viewport * selbst (kein eigener overflow-Container, siehe Kommentar bei * .app-content-column). Ohne scroll-padding-top konnte ein per Tab * fokussiertes Element direkt unter der Topbar teilweise/ganz * dahinter verschwinden. 5rem ist eine bewusste Naeherung an die * typische Topbar-Hoehe (Padding + Inhalt, variiert leicht durch * flex-wrap/Safe-Area) -- etwas Luft ist unkritisch, zu wenig waere * es nicht. */ scroll-padding-top: 5rem; } body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient( circle at 0 0, color-mix(in srgb, var(--primary) 9%, transparent), transparent 30rem ), var(--bg); color: var(--text); line-height: 1.5; /* * AP12 Thread M1: Basis-Typografie-Skala fluid gemacht (gleiche * clamp(min, preferred-vw, max)-Formel-Konvention wie h1/h2/Padding * an den bereits bestehenden 5 clamp()-Stellen dieser Datei). Wirkt * nur auf tatsaechlich gerenderten Text (line-height/font-size), * NICHT auf rem-basierte Layout-/Padding-Masse (die bleiben an * :root gebunden, unveraendert). */ font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1rem); } button, input, select, textarea { font: inherit; } button, select, input, textarea { border-radius: var(--radius-small); } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.5; } input, select, textarea { width: 100%; padding: 0.7rem 0.8rem; /* * Phase E5 (WCAG-2.2-Audit, 2026-09-15): --border allein lag im * Ruhezustand unter 3:1 (Non-text-Kontrast, SC 1.4.11) gegen * --surface in beiden Themes -- --border-strong verwendet, das * andernorts im Projekt bereits fuer genau diesen Zweck existiert * (z.B. .button.secondary-Rahmen). */ border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); outline: none; } /* * AP11 Thread C: ersetzt die einzige Inline-style="width: 5em"-Stelle * im gesamten index.html (Periodenvergleich-Anzahl-Feld) -- Voraussetzung * fuer eine CSP ohne style-src 'unsafe-inline'. */ .input-width-narrow { width: 5em; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* * Phase E5 (WCAG-2.2-Audit, 2026-09-15, SC 3.3.1): visuelles * Gegenstueck zu App.UI.showFieldError() (ui-core.js) -- Feld-Rahmen * markiert den Fehler zusaetzlich zur programmatischen aria-invalid/ * aria-describedby-Verknuepfung, nicht nur der danebenstehende Text. */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); } .field-error { display: block; color: var(--danger); font-size: 0.78rem; font-weight: 600; } /* * Phase E5 (WCAG-2.2-Audit, 2026-09-15, SC 3.3.2): sichtbares * Pflichtfeld-Signal zusaetzlich zum (bereits vorhandenen, aber rein * programmatischen) `required`-Attribut -- `aria-hidden`, da * Screenreader `required` ohnehin automatisch ansagen; ein zusaetzlich * vorgelesenes "*" waere Doppelinformation. */ .required-marker { color: var(--danger); } /* * AP12 Thread M6: generische, sichtbare Fokus-Ring-Regel fuer alle * interaktiven Elemente, die bisher nur auf den unzuverlaessigen * Browser-Default angewiesen waren (`