/* 10.09.2026: Espresso und Elfenbein (Simons Wahl). Hell: Elfenbein-Grund, Espresso als die eine Aktion, Linien in getoentem Elfenbein. Dunkel: Espresso-Grund, Elfenbein als Aktion. Kein Blau mehr. */ /* =========================================================================== farben.css: die Palette des Kundenbereichs, an EINER Stelle. ## ⚠️ Warum diese Datei überhaupt entstanden ist Die Palette stand in ACHT `:root`-Blöcken, je einer in jeder HTML-Datei unter `projekt/buchbar/web/`. Am 16.08.2026 war sie bereits auseinandergelaufen: `--linie` hatte drei verschiedene Werte, `--leise` zwei. Niemand hätte das gemeldet, denn man sieht es nur beim Klicken, als Sprung im Hintergrund, und es wirkt billig, ohne dass man sagen könnte warum. Genau davor warnt `CLAUDE.md`: *„Dasselbe nie an zwei Stellen pflegen. Zwei Kopien werden nachgezogen, die dritte nicht, und der Fehler ist nur zwischen ihnen sichtbar."* Bei acht Kopien war es keine Frage, ob eine zurückbleibt, sondern wann. ## Eine Fassung, und sie ist hell (06.09.2026) Simon, nachdem er die Stilprobe „Blaupause" gesehen hatte: *„okay, Blau passt so. Mach das mal auf die Website, dort hätte ich gerne das helle Design. In der App kann man dann auch noch das Dunkle wählen, das machen wir aber erst nach dem Launch, damit wir erst mal alles so einfach wie möglich halten: eine Designlinie durchs komplette Produkt."* Daraus folgt für diese Datei genau dreierlei: 1. **Hell gilt ohne Attribut.** Wer nichts wählt, bekommt die helle Fassung, auf der Website wie in der App. Ein Fehler beim Laden der Einstellung führt damit zum Standard und nicht zu einer halb umgefärbten Seite. 2. **Das dunkle Aussehen ruht.** Es steht weiter unten vollständig da, unter `:root[data-thema="dunkel"]`, und nichts setzt dieses Attribut vor dem Start am 09.09.2026. Es kommt danach als Wahl im Konto zurück, deshalb wird es gepflegt und nicht gelöscht. 3. **Kein `prefers-color-scheme`.** Welche Fassung gilt, entscheiden wir und später der Benutzer, nicht sein Betriebssystem. ### ⚠️ Rückblick: was hier bis zum 06.09.2026 stand Diese Datei erklärte seit dem 17.08.2026, das dunkle Aussehen sei die Vorgabe und hell wähle man selbst. Das war Simons Ansage von damals und ist durch die von heute ersetzt. Der alte Wortlaut steht hier bewusst NICHT mehr: Ein Absatz, der das Gegenteil des Wertes sagt, wird beim nächsten Mal zur Anleitung, den Wert zurückzudrehen, und ein Riegel, der nach Worten sucht, findet ihn im Rückblick statt an der Stelle, auf die es ankommt. Der Grund von damals gilt weiter, und er ist der Grund, warum das Dunkle wiederkommt: Ein Betrieb hat den Kalender den ganzen Tag offen, und wer abends im halbdunklen Salon sitzt, arbeitet dunkel besser. Das kann nur der Benutzer entscheiden. Bis zum Start ist die Wahl zurückgestellt, damit es EINE Sache gibt, die geprüft werden muss, und nicht zwei. ## ⚠️ Die Farbwerte sind aus `projekt/site/stil.css` übernommen, nicht neu erfunden Sie sind dort begründet: Blau ist Linie, Schrift und eine Aktion, nie Fläche; wie hell das Blau sein darf, ist gerechnet und nicht geschätzt. Wer hier eine Farbe ändert, ändert sie nur für den Kundenbereich, und dann laufen Website und Oberfläche auseinander. `test_die_palette_ist_in_beiden_dateien_dieselbe` hält die zwei Dateien aneinander. =========================================================================== */ /* (Fortsetzung des Kopfkommentars; am 10.09.2026 war hier ein Einschub, der ihn aufgebrochen hatte.) :root`, und nichts setzt dieses Attribut vor dem Start am 09.09.2026. Es kommt danach als Wahl im Konto zurück, deshalb wird es gepflegt und nicht gelöscht. 3. **Kein `prefers-color-scheme`.** Welche Fassung gilt, entscheiden wir und später der Benutzer, nicht sein Betriebssystem. ### ⚠️ Rückblick: was hier bis zum 06.09.2026 stand Diese Datei erklärte seit dem 17.08.2026, das dunkle Aussehen sei die Vorgabe und hell wähle man selbst. Das war Simons Ansage von damals und ist durch die von heute ersetzt. Der alte Wortlaut steht hier bewusst NICHT mehr: Ein Absatz, der das Gegenteil des Wertes sagt, wird beim nächsten Mal zur Anleitung, den Wert zurückzudrehen, und ein Riegel, der nach Worten sucht, findet ihn im Rückblick statt an der Stelle, auf die es ankommt. Der Grund von damals gilt weiter, und er ist der Grund, warum das Dunkle wiederkommt: Ein Betrieb hat den Kalender den ganzen Tag offen, und wer abends im halbdunklen Salon sitzt, arbeitet dunkel besser. Das kann nur der Benutzer entscheiden. Bis zum Start ist die Wahl zurückgestellt, damit es EINE Sache gibt, die geprüft werden muss, und nicht zwei. ## ⚠️ Die Farbwerte sind aus `projekt/site/stil.css` übernommen, nicht neu erfunden Sie sind dort begründet: Blau ist Linie, Schrift und eine Aktion, nie Fläche; wie hell das Blau sein darf, ist gerechnet und nicht geschätzt. Wer hier eine Farbe ändert, ändert sie nur für den Kundenbereich, und dann laufen Website und Oberfläche auseinander. `test_die_palette_ist_in_beiden_dateien_dieselbe` hält die zwei Dateien aneinander. =========================================================================== */ /* 10.09.2026 (Simon): die Website ist dunkel, Espresso und Elfenbein, und das ist die Vorgabe ohne Attribut. Hell bleibt als ausdrueckliche Wahl unter :root[data-thema="hell"], gesetzt von thema.js. Der Kommentar ueber dem hellen Block stammt vom 06.09.2026 und gilt fuer die Wahl. */ :root { color-scheme: dark; --grund: #171412; --flaeche: #221E1A; --erhoben: #2E2823; --text: #F7F3EA; --leise: #B5ADA0; --sehrLeise: #9A938A; --linie: #3A332C; --linieStark: #8A8278; --akzent: #F4EFE3; --akzentText: #171412; --akzentHell: #2E2823; --akzentTief: #FFFFFF; --gruen: #7FB795; --rot: #E09B8A; --gutFlaeche: #13221C; --rotFlaeche: #241715; --frei: #7FB795; --belegt: #D9D2C3; --gehalten: #D0AE5D; --abgesagt: #E09B8A; --abwesend: #B0A8C8; --freiFlaeche: #13221C; --belegtFlaeche: #2E2823; --gehaltenFlaeche: #211D12; --abgesagtFlaeche: #241715; --abwesendFlaeche: #1C1A28; /* ⚠️ **Die Auslastung eines Tages, aufgenommen am 12.09.2026.** Sie fehlte hier, stand aber im Kalender, und deshalb meldete die Linienpruefung fuenf Farben als fremd, die zu uns gehoeren. `web/index.html` laedt keine Stildatei (eine Seite, ein Stueck) und traegt die Werte deshalb selbst. Damit die Kopie nicht davonlaeuft, haelt `test_der_kalender_und_die_palette_sagen_dasselbe.py` beide Seiten gleich. Die Gruentoene sind gedaempft und nicht Signalgruen: Ein Monat mit dreissig leuchtenden Feldern ist keine Auskunft mehr, sondern ein Muster. `--voll` ist der Tag, in den GAR NICHTS mehr passt, kommt selten vor und darf deshalb lauter sein. */ --last1: #4E8C5A; --last2: #B79441; --last3: #C47A33; --last4: #9C3B2C; --voll: #D13B22; /* ⚠️ **Die Farben der Mitarbeiter, aufgenommen am 12.09.2026.** Acht Toene, die im Kalender und in den Einstellungen dieselben sein muessen: Wer Bea im Kalender blau sieht und in den Einstellungen gruen, traut der Anzeige nicht mehr. Sie standen als Liste in beiden Dateien, unter zwei verschiedenen Namen. `test_der_kalender_und_die_palette_sagen_dasselbe.py` haelt alle drei Stellen gleich. */ --mitarbeiter1: #3A7CA5; --mitarbeiter2: #C3733A; --mitarbeiter3: #4F8A5B; --mitarbeiter4: #8A5A8F; --mitarbeiter5: #B04A4A; --mitarbeiter6: #6B7280; --mitarbeiter7: #2F7D78; --mitarbeiter8: #A8763A; /* aus dem hellen Block hierher geholt (10.09.2026): gilt fuer beide Fassungen */ --kante: 0; --kanteKlein: 0; --disp: "Fraunces", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; } /* ⚠️ **Die ruhende Fassung.** Sie wird gepflegt und nicht ausgeliefert: Bis zum Start am 09.09.2026 setzt nichts dieses Attribut. Dieselben Rollen, dasselbe Blau eine Stufe heller, damit es auf dunklem Grund dieselbe Arbeit tut. */ :root[data-thema="hell"] { /* Blaupause, hell. Die Namen sind die aus den acht alten Blöcken, damit die bestehenden Klassen unverändert weiterarbeiten; nur die Werte sind neu. ⚠️ **Am Abend des 06.09.2026 ein zweites Mal nachgezogen.** Simon: *„und nicht mehrere Blautöne, und das Hintergrundweiß mehr cremiger, wie bei so einem Papyrus."* Die Begründung und die Rechnung stehen einmal in `stil.css`; hier stehen nur die Werte, damit es nicht zwei Erklärungen für eine Sache gibt. */ --grund: #F4EFE3; /* stil.css --grund, das cremige Papier */ --flaeche: #FBF8F1; /* stil.css --flaeche, das Blatt */ --erhoben: #ECE6D8; /* stil.css --erhoben, die Glasur */ --text: #2B2A26; /* stil.css --text, die warme Tinte, 12,52:1 */ --leise: #5C574D; /* stil.css --leise, 6,26:1 */ --sehrLeise: #6B655A; /* stil.css --sehrLeise, 5,04:1 */ --linie: #D9D2C3; /* stil.css --linie, das Blau mit 18 % auf dem Papier */ --linieStark: #6B655A; /* stil.css --linieStark, dasselbe Blau mit 78 %, 3,32:1 */ /* ⚠️ Der Akzent trägt jetzt selbst die Farbe, und darauf muss der Text WEISS sein. Die alten Blöcke hatten `color:#fff` fest in der Knopfregel; auf dem früheren Platinton wäre das unlesbar gewesen, auf dem Aktionsblau stimmt es wieder (5,60:1). `--akzentText` bleibt trotzdem, denn die Knopfregeln lesen ihn, und die ruhende dunkle Fassung dreht ihn um. */ --akzent: #171412; /* stil.css --metall, die eine Aktion, 4,88:1 */ --akzentText: #F4EFE3; /* stil.css --aufAktion */ --akzentHell: #ECE6D8; /* die getönte Fläche, nicht ein aufgehelltes Blau */ --akzentTief: #0F0D0B; /* stil.css --aktionTief, nur Hover und Aktiv */ --gruen: #2F6B4F; /* stil.css --gut */ --rot: #97402F; /* stil.css --schlecht */ --gutFlaeche: #E7EFE2; --rotFlaeche: #F5E7E0; /* Die Zustände des Kalenders. Sie tragen Bedeutung und sind deshalb die einzige Stelle, an der neben dem Blau eine zweite Farbe vorkommt. Die Fläche tönt, sie trägt nicht: Der Text darauf ist die Zustandsfarbe selbst und hält über 5:1. `--belegt` ist die Tinte selbst: Ein belegter Platz braucht keinen eigenen Ton. */ --frei: #2F6B4F; --belegt: #2B2A26; --gehalten: #7A5E1F; --abgesagt: #97402F; --abwesend: #55506B; --freiFlaeche: #E7EFE2; --belegtFlaeche: #ECE6D8; --gehaltenFlaeche: #F2EBD8; --abgesagtFlaeche: #F5E7E0; --abwesendFlaeche: #EDEAE6; /* ⚠️ **Die Kante der App, seit dem 01.09.2026 null.** Simon am 29.08.2026 zum Kalender: „ich moechte aber das wir es nicht rund machen sondern komplett eckig alles." Der Kalender ist seither eckig, die uebrigen Oberflaechen waren es nicht. Simon am 01.09.2026: „Alles ist eckig ausser die Einstellungen." dieselbe Sache `--kante`. Zwei Namen fuer eine Kante sind zwei Stellen, an denen jemand sie aendert, und die zweite zieht niemand nach. `--r` ist deshalb entfallen; die Oberflaechen lesen alle `--kante`. Die Website unter `projekt/site/` ist NICHT betroffen: Sie holt ihre Kante aus `stil.css`, und nur `site/index.html` laedt diese Datei ueberhaupt, ohne die Marke zu benutzen. Der Verkaufsauftritt darf rund bleiben, die App ist ein Werkzeug. */ /* Dieselben Schriften wie auf sentavel.de, selbst gehostet, ohne Google. ⚠️ Der Fließtext ist seit dem 06.09.2026 IBM Plex Sans statt Inter: Die Stilprobe steht darauf, und die Schreibmaschinenschrift der Beschriftungen ist ihre Schwester. Beschriftung und Fließtext gehören damit sichtbar zusammen, so wie in einer Zeichnung die Maßkette zum Grundriss gehört. */ } /* ⚠️ **Hier stand kurzzeitig ein eigener heller Block, und er ist weg.** Seit `:root` selbst hell ist, wäre er eine zweite Kopie derselben Werte, und die zweite zieht niemand nach: genau die Form, vor der `CLAUDE.md` Regel 3 warnt. Die ausdrückliche Wahl „hell" wirkt trotzdem in beide Richtungen: `data-thema="hell"` trifft keinen eigenen Block, der ruhende dunkle unten greift nicht, und es bleibt bei `:root`. */ /* Die Grundfläche gehört hierher und nicht in jede Datei: Ein Hintergrund, der in acht Dateien gesetzt wird, ist in der neunten vergessen. */ html, body { background: var(--grund); color: var(--text); } /* ⚠️ `color-scheme` sagt dem Browser, wie er Bildlaufleisten und Formularelemente zeichnen soll. Ohne die Angabe steht eine helle Seite mit dunklen Auswahlfeldern da, und das sieht nach Fehler aus, nicht nach Absicht. */ :root { color-scheme: dark; } :root[data-thema="hell"]{ color-scheme: light; }