/* Ospella 3.0 — paletten.css: ZEHN Farbwelten zur Wahl. * * Angelegt 09.09.2026 auf Ansage („also ich will den farbpalten auswahö"); * am 11.09.2026 fuer Ospella 3.0 auf zehn erweitert („10 verschiede * farbschemen"). Die fuenf neuen (rosmarin, zimt, rose, stein, mitternacht) * sind mit scratchpad/paletten_neu.py auf dieselben Grenzwerte gerechnet * wie die alten; werkzeuge/paletten_pruefen.py misst ALLE an dieser Datei * nach. Die Palette „vorlage" ist seit 3.0 der Style Guide * (ospella_ui_style_guide.md) — sie setzt weiterhin NICHTS und laesst * tokens.css gelten. * * WARUM DIE WERTE HIER STEHEN UND NICHT IM JAVASCRIPT. * Ospella 1 rechnete die Paletten zur Laufzeit in OKLCH nach (`palette.js`, * 453 Zeilen). Das war dort richtig, weil man sich eine eigene Farbe mischen * konnte. Hier gibt es FÜNF feste Paletten — die Rechnung braucht dann kein * Nutzergerät auszuführen, sie ist einmal gelaufen * (`werkzeuge/farben_rechnen.py`, 09.09.2026) und ihr Ergebnis steht hier. * Gegengeprüft wird mit `werkzeuge/paletten_pruefen.py`, das GENAU DIESE * DATEI liest — es gibt also keine zweite Wahrheit. * * DIE REGEL, DIE DABEI GILT (Leitfaden §6.1 aus Ospella 1): Verfehlt eine * Farbe ihren Grenzwert, wird SIE abgedunkelt — nie die Schrift vergrößert * und nie der Grenzwert gesenkt. Nachgerechnet wurde jeweils die Linienfarbe; * alle übrigen Wünsche bestanden auf Anhieb. * * DIE PALETTE „VORLAGE" SETZT NICHTS. Sie lässt `tokens.css` unverändert * gelten — so bleibt der gemessene Bestand aus dem Bau erreichbar, ohne ihn * hier ein zweites Mal hinzuschreiben. Ihre bekannte Abweichung (weiße * Knopfschrift auf #C85B2A misst 4,21:1 statt 4,5) ist am 09.09.2026 * ausdrücklich zugunsten der Vorlagentreue entschieden worden und steht * deshalb weiterhin so da. ALLE VIER ANDEREN PALETTEN BESTEHEN AUCH DIESE * PAARUNG. * * Jede Palette steht ZWEIMAL in dieser Datei: einmal als `--pal-…`-Wert * (die Quelle) und einmal als Zuweisung an die Rollen von tokens.css. Die * Vorschaukacheln im Einstellungs-Screen greifen auf dieselben `--pal-…` * zu — deshalb kann eine Kachel nie eine Farbe zeigen, die die Palette * nicht hat. */ :root { /* --- abendtisch (dunkel) — gemessen 09.09.2026 ------------------- text 14,85 · leise 8,36 · akzent 7,07 · marke 8,50 · weiß auf Knopf 4,66 · Linie 3,10 (nachgerechnet von #4A5040) */ --pal-abendtisch-grund: #1B1E19; --pal-abendtisch-karte: #262A22; --pal-abendtisch-marke: #A8C08E; --pal-abendtisch-zierde: #E8804F; --pal-abendtisch-knopf: #C1522A; --pal-abendtisch-text: #F5F0E8; --pal-abendtisch-leise: #BDB6A8; --pal-abendtisch-akzent: #EF8F6B; --pal-abendtisch-linie: #666C5B; --pal-abendtisch-aufknopf: #FFFFFF; /* --- blaukraut — die Marke von Ospella 1 vor dem 09.09.2026. Nichts gelöscht: was dort eine Zeit lang die ganze App war, ist hier eine wählbare Palette geworden. text 16,41 · leise 7,35 · akzent 6,31 · weiß auf Knopf 8,05 · Linie 3,03 (nachgerechnet von #B9AEC4) */ --pal-blaukraut-grund: #F7F3FA; --pal-blaukraut-karte: #EFE7F4; --pal-blaukraut-marke: #4A3462; --pal-blaukraut-zierde: #7E5AA6; --pal-blaukraut-knopf: #5F447D; --pal-blaukraut-text: #1B1420; --pal-blaukraut-leise: #574C60; --pal-blaukraut-akzent: #6B4C8C; --pal-blaukraut-linie: #94899E; --pal-blaukraut-aufknopf: #FFFFFF; /* --- safran (warm) — text 16,43 · leise 7,45 · akzent 5,21 · weiß auf Knopf 5,04 · Linie 3,08 (nachgerechnet von #C9B98F) */ --pal-safran-grund: #FFF9EC; --pal-safran-karte: #FBF0DA; --pal-safran-marke: #4A3B12; --pal-safran-zierde: #C2410C; --pal-safran-knopf: #A85B10; --pal-safran-text: #221A05; --pal-safran-leise: #5C5136; --pal-safran-akzent: #9A5A0B; --pal-safran-linie: #9D8E65; --pal-safran-aufknopf: #FFFFFF; /* --- meer (kühl) — text 15,67 · leise 6,32 · akzent 5,93 · weiß auf Knopf 5,47 · Linie 3,08 (nachgerechnet von #A5C2BE) */ --pal-meer-grund: #F2F8F7; --pal-meer-karte: #E4F0EE; --pal-meer-marke: #10403C; --pal-meer-zierde: #0E7C74; --pal-meer-knopf: #0F766E; --pal-meer-text: #08211F; --pal-meer-leise: #46605D; --pal-meer-akzent: #0B6B63; --pal-meer-linie: #77938F; --pal-meer-aufknopf: #FFFFFF; /* --- Die fuenf Neuen (11.09.2026, gerechnet mit paletten_neu.py, nachgemessen mit paletten_pruefen.py — alle Paarungen bestehen) --- */ /* rosmarin — gruen, hell */ --pal-rosmarin-grund: #F2F6EC; --pal-rosmarin-karte: #E7EEDC; --pal-rosmarin-marke: #33471F; --pal-rosmarin-zierde: #5A7A34; --pal-rosmarin-knopf: #4E6B2A; --pal-rosmarin-text: #1B2312; --pal-rosmarin-leise: #4E5A3E; --pal-rosmarin-akzent: #48642A; --pal-rosmarin-linie: #849274; --pal-rosmarin-aufknopf: #FFFFFF; /* zimt — warmes braun-orange */ --pal-zimt-grund: #FAF1E8; --pal-zimt-karte: #F3E5D4; --pal-zimt-marke: #5A3416; --pal-zimt-zierde: #A05A20; --pal-zimt-knopf: #8B4A14; --pal-zimt-text: #241505; --pal-zimt-leise: #5D4A35; --pal-zimt-akzent: #8A4A10; --pal-zimt-linie: #9D876C; --pal-zimt-aufknopf: #FFFFFF; /* rose — warmes rosa-rot */ --pal-rose-grund: #FBF1EF; --pal-rose-karte: #F6E3DF; --pal-rose-marke: #6E2436; --pal-rose-zierde: #B04A5E; --pal-rose-knopf: #A03648; --pal-rose-text: #261216; --pal-rose-leise: #5F4A4E; --pal-rose-akzent: #A63A4E; --pal-rose-linie: #A28488; --pal-rose-aufknopf: #FFFFFF; /* stein — ruhiges warmgrau */ --pal-stein-grund: #F4F3F0; --pal-stein-karte: #E9E7E1; --pal-stein-marke: #3A3730; --pal-stein-zierde: #6E6A5E; --pal-stein-knopf: #4A463E; --pal-stein-text: #1C1A16; --pal-stein-leise: #52504A; --pal-stein-akzent: #5A564C; --pal-stein-linie: #8E8B82; --pal-stein-aufknopf: #FFFFFF; /* mitternacht — dunkles blau, zweite dunkle Welt neben abendtisch */ --pal-mitternacht-grund: #161B24; --pal-mitternacht-karte: #202836; --pal-mitternacht-marke: #9FC0E8; --pal-mitternacht-zierde: #E8944F; --pal-mitternacht-knopf: #B35322; --pal-mitternacht-text: #EEF2F8; --pal-mitternacht-leise: #B4BECE; --pal-mitternacht-akzent: #8FB4E4; --pal-mitternacht-linie: #5D687B; --pal-mitternacht-aufknopf: #FFFFFF; } /* --- Anwendung ---------------------------------------------------- * `data-palette` steht am , gesetzt von src/einstellungen.js noch im * . Deshalb ist die Farbe schon beim ersten Zeichnen richtig und es * blitzt nichts auf. (Ospella 1, Merker: „Gegen das Aufblitzen beim Start * hilft nur ein klassisches Skript im ohne defer" — und bei strenger * CSP muss es eine eigene Datei sein.) * * Eine Palette setzt NUR die zehn Rollen. Alle Maße, Radien und Schriften * bleiben, wo sie sind. */ html[data-palette="abendtisch"] { --creme: var(--pal-abendtisch-grund); --sand: var(--pal-abendtisch-karte); --olive: var(--pal-abendtisch-marke); --terracotta: var(--pal-abendtisch-zierde); --knopf: var(--pal-abendtisch-knopf); --text: var(--pal-abendtisch-text); --text-leise: var(--pal-abendtisch-leise); --akzent-text: var(--pal-abendtisch-akzent); --linie: var(--pal-abendtisch-linie); --text-auf-knopf: var(--pal-abendtisch-aufknopf); color-scheme: dark; } html[data-palette="blaukraut"] { --creme: var(--pal-blaukraut-grund); --sand: var(--pal-blaukraut-karte); --olive: var(--pal-blaukraut-marke); --terracotta: var(--pal-blaukraut-zierde); --knopf: var(--pal-blaukraut-knopf); --text: var(--pal-blaukraut-text); --text-leise: var(--pal-blaukraut-leise); --akzent-text: var(--pal-blaukraut-akzent); --linie: var(--pal-blaukraut-linie); --text-auf-knopf: var(--pal-blaukraut-aufknopf); } html[data-palette="safran"] { --creme: var(--pal-safran-grund); --sand: var(--pal-safran-karte); --olive: var(--pal-safran-marke); --terracotta: var(--pal-safran-zierde); --knopf: var(--pal-safran-knopf); --text: var(--pal-safran-text); --text-leise: var(--pal-safran-leise); --akzent-text: var(--pal-safran-akzent); --linie: var(--pal-safran-linie); --text-auf-knopf: var(--pal-safran-aufknopf); } html[data-palette="meer"] { --creme: var(--pal-meer-grund); --sand: var(--pal-meer-karte); --olive: var(--pal-meer-marke); --terracotta: var(--pal-meer-zierde); --knopf: var(--pal-meer-knopf); --text: var(--pal-meer-text); --text-leise: var(--pal-meer-leise); --akzent-text: var(--pal-meer-akzent); --linie: var(--pal-meer-linie); --text-auf-knopf: var(--pal-meer-aufknopf); } html[data-palette="rosmarin"] { --creme: var(--pal-rosmarin-grund); --sand: var(--pal-rosmarin-karte); --olive: var(--pal-rosmarin-marke); --terracotta: var(--pal-rosmarin-zierde); --knopf: var(--pal-rosmarin-knopf); --text: var(--pal-rosmarin-text); --text-leise: var(--pal-rosmarin-leise); --akzent-text: var(--pal-rosmarin-akzent); --linie: var(--pal-rosmarin-linie); --text-auf-knopf: var(--pal-rosmarin-aufknopf); --titel-gruen: var(--pal-rosmarin-marke); } html[data-palette="zimt"] { --creme: var(--pal-zimt-grund); --sand: var(--pal-zimt-karte); --olive: var(--pal-zimt-marke); --terracotta: var(--pal-zimt-zierde); --knopf: var(--pal-zimt-knopf); --text: var(--pal-zimt-text); --text-leise: var(--pal-zimt-leise); --akzent-text: var(--pal-zimt-akzent); --linie: var(--pal-zimt-linie); --text-auf-knopf: var(--pal-zimt-aufknopf); --titel-gruen: var(--pal-zimt-marke); } html[data-palette="rose"] { --creme: var(--pal-rose-grund); --sand: var(--pal-rose-karte); --olive: var(--pal-rose-marke); --terracotta: var(--pal-rose-zierde); --knopf: var(--pal-rose-knopf); --text: var(--pal-rose-text); --text-leise: var(--pal-rose-leise); --akzent-text: var(--pal-rose-akzent); --linie: var(--pal-rose-linie); --text-auf-knopf: var(--pal-rose-aufknopf); --titel-gruen: var(--pal-rose-marke); } html[data-palette="stein"] { --creme: var(--pal-stein-grund); --sand: var(--pal-stein-karte); --olive: var(--pal-stein-marke); --terracotta: var(--pal-stein-zierde); --knopf: var(--pal-stein-knopf); --text: var(--pal-stein-text); --text-leise: var(--pal-stein-leise); --akzent-text: var(--pal-stein-akzent); --linie: var(--pal-stein-linie); --text-auf-knopf: var(--pal-stein-aufknopf); --titel-gruen: var(--pal-stein-marke); } html[data-palette="mitternacht"] { --creme: var(--pal-mitternacht-grund); --sand: var(--pal-mitternacht-karte); --olive: var(--pal-mitternacht-marke); --terracotta: var(--pal-mitternacht-zierde); --knopf: var(--pal-mitternacht-knopf); --text: var(--pal-mitternacht-text); --text-leise: var(--pal-mitternacht-leise); --akzent-text: var(--pal-mitternacht-akzent); --linie: var(--pal-mitternacht-linie); --text-auf-knopf: var(--pal-mitternacht-aufknopf); --titel-gruen: var(--pal-mitternacht-text); color-scheme: dark; } /* Die dunklen Paletten setzen den Titel und die Marke hell — --titel-gruen * und --olive werden oben je Palette mitgezogen, damit kein dunkler Titel * auf dunklem Grund steht. abendtisch/blaukraut/safran/meer aus 2.0: dort * uebernimmt --olive (marke) die Titelrolle. */ html[data-palette="abendtisch"] { --titel-gruen: var(--pal-abendtisch-text); } html[data-palette="blaukraut"] { --titel-gruen: var(--pal-blaukraut-marke); } html[data-palette="safran"] { --titel-gruen: var(--pal-safran-marke); } html[data-palette="meer"] { --titel-gruen: var(--pal-meer-marke); } /* Im Dunkelmodus sind die Fotos zu grell; ein leichter Schleier nimmt die * Spitze, ohne die Gesichter zu verfälschen. Nur dort, nirgends sonst. */ html[data-palette="abendtisch"] .karte__bild, html[data-palette="abendtisch"] .planen__bild img, html[data-palette="mitternacht"] .karte__bild, html[data-palette="mitternacht"] .planen__bild img { filter: brightness(0.88); } /* Der gedeckte Tisch als Grundbild gehoert NUR zur Vorlagen-Palette: Unter * einer dunklen oder farbigen Welt wuerde das warme Foto die gerechneten * Kontraste unterlaufen. Alle anderen Paletten stehen auf ihrer Flaeche. */ html:not([data-palette="vorlage"]) .telefon { background-image: none !important; } /* --- Vorschaukacheln im Einstellungs-Screen ---------------------- * Sie zeigen die Palette, die NICHT läuft — deshalb können sie nicht * einfach die Rollen benutzen. Sie greifen auf dieselben `--pal-…` zu, * also auf die Quelle. */ .probe { display: block; width: 100%; aspect-ratio: 1.35; border-radius: 12px; border: 1px solid var(--linie); overflow: hidden; position: relative; } .probe__streifen { position: absolute; inset: auto 0 0 0; height: 42%; } .probe__punkt { position: absolute; left: 50%; top: 46%; width: 34%; height: 20%; transform: translate(-50%, -50%); border-radius: 999px; } /* „vorlage" ist seit 3.0 der Style Guide: Creme, Light Cream, Orange. */ .probe--vorlage { background: #F4E9D8; } .probe--vorlage .probe__streifen { background: #FAF4EA; } .probe--vorlage .probe__punkt { background: #E86A16; } .probe--abendtisch { background: var(--pal-abendtisch-grund); } .probe--abendtisch .probe__streifen { background: var(--pal-abendtisch-karte); } .probe--abendtisch .probe__punkt { background: var(--pal-abendtisch-knopf); } .probe--blaukraut { background: var(--pal-blaukraut-grund); } .probe--blaukraut .probe__streifen { background: var(--pal-blaukraut-karte); } .probe--blaukraut .probe__punkt { background: var(--pal-blaukraut-knopf); } .probe--safran { background: var(--pal-safran-grund); } .probe--safran .probe__streifen { background: var(--pal-safran-karte); } .probe--safran .probe__punkt { background: var(--pal-safran-knopf); } .probe--meer { background: var(--pal-meer-grund); } .probe--meer .probe__streifen { background: var(--pal-meer-karte); } .probe--meer .probe__punkt { background: var(--pal-meer-knopf); } .probe--rosmarin { background: var(--pal-rosmarin-grund); } .probe--rosmarin .probe__streifen { background: var(--pal-rosmarin-karte); } .probe--rosmarin .probe__punkt { background: var(--pal-rosmarin-knopf); } .probe--zimt { background: var(--pal-zimt-grund); } .probe--zimt .probe__streifen { background: var(--pal-zimt-karte); } .probe--zimt .probe__punkt { background: var(--pal-zimt-knopf); } .probe--rose { background: var(--pal-rose-grund); } .probe--rose .probe__streifen { background: var(--pal-rose-karte); } .probe--rose .probe__punkt { background: var(--pal-rose-knopf); } .probe--stein { background: var(--pal-stein-grund); } .probe--stein .probe__streifen { background: var(--pal-stein-karte); } .probe--stein .probe__punkt { background: var(--pal-stein-knopf); } .probe--mitternacht { background: var(--pal-mitternacht-grund); } .probe--mitternacht .probe__streifen { background: var(--pal-mitternacht-karte); } .probe--mitternacht .probe__punkt { background: var(--pal-mitternacht-knopf); }