/* Ospella 2.0 — paletten.css: fünf Farbwelten zur Wahl. * * Angelegt 09.09.2026 auf Ansage („also ich will den farbpalten auswahö"). * * 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; } /* --- 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); } /* 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"] .splash__bild, html[data-palette="abendtisch"] .planen__bild img { filter: brightness(0.88); } /* --- 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; } .probe--vorlage { background: #FFF8F1; } .probe--vorlage .probe__streifen { background: #F7EFE6; } .probe--vorlage .probe__punkt { background: #C85B2A; } .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); }