/* ========================================================== nacht.css · Nachtmodus des Klickdummys Aktiv, sobald die Klasse .nacht traegt. Gesetzt wird sie von zwei Stellen: dem Inline-Schnipsel im (vor dem ersten Anstrich, damit es nicht blitzt) und dem Schalter unten rechts, den beeit.js einhaengt. WARUM DIESE DATEI UTILITIES UEBERSCHREIBT, obwohl beeit.css ausdruecklich sagt, Utilities gehoerten ins Markup: Der Nachtmodus ist nachtraeglich. Der Tailwind-Weg waere ein dark:-Gegenstueck an jeder Farbklasse - bei 533 text-white, 177 bg-white und den Ink-Klassen quer durch achtzehn Seiten sind das rund zweitausend Eingriffe ins Markup, und die erzeugte tailwind.css muesste jedes Mal neu gerendert werden. Eine getrennte Schicht ist hier das kleinere Uebel. Sie liegt bewusst NICHT in beeit.css, damit deren Zweck klar bleibt. WIE ES WIRKT: Tailwind v4 gibt jede Abstufung als color-mix(... var(--color-bee-ink) 10% ...) aus. Wer die Variable umdefiniert, dreht Raender, Trenner, Ringe, Icons und Fokusringe in einem Zug mit. Ueberschrieben werden muss nur, wo Ink keine Farbe ist, sondern eine FLAECHE. Diese Datei ist unbeschichtet (kein @layer). Tailwind liegt in @layer utilities. Unbeschichtete Regeln gewinnen gegen beschichtete, unabhaengig von der Spezifitaet - deshalb braucht hier nichts !important. KONTRASTE gerechnet, nicht geschaetzt (Kanon 5.2, 5.27): Text #EDF1F5 auf Grund #0C1015 ....... 16,81:1 Leise #A6B3C1 auf Grund .............. 8,94:1 Leise #A6B3C1 auf Karte #151B23 ...... 8,11:1 Honig #E8A837 auf Grund .............. 9,17:1 Ink #14181D auf Honig .............. 8,56:1 Alarm #F07A63 auf Karte .............. 6,32:1 Der Tag-Alarmton #C4321F kam auf den Nachtflaechen nur auf 3,15-3,47:1 und faellt durch - deshalb der hellere Ton. Stand: p.014 · 23.09.2026 ========================================================== */ /* --- 1 · Grundzustand ------------------------------------- color-scheme stellt Rollbalken, Auswahlfelder und die Datumswaehler des Browsers mit um. Ohne die Zeile bleiben genau diese Teile hell und verraten den Umbau. */ html.nacht { color-scheme: dark; } /* --- 2 · Die Umdefinition -------------------------------- Der Kern. Vier Zeilen, die den groessten Teil der Arbeit machen. ACHTUNG fuer spaeter: --color-bee-ink ist ab hier eine HELLE Farbe. Alles, was Ink als Flaeche benutzt, steht unter 3 und muss dort ergaenzt werden. Wer eine neue bg-bee-ink-Flaeche ins Markup setzt, ohne sie dort einzutragen, bekommt nachts eine weisse Kachel. */ html.nacht { --color-bee-ink: #EDF1F5; /* war Text- UND Flaechenfarbe */ --color-bee-slate: #A6B3C1; --color-bee-mist: #11171E; --color-bee-alert: #F07A63; /* --color-bee-honey bleibt #E8A837. Honig ist die Signatur der Marke und traegt nachts 9,17:1 - er muss nicht weichen, er gewinnt sogar: auf Weiss kam er nur auf 2,08:1 und durfte deshalb nie Text sein. Nachts darf er es. */ --n-grund: #0C1015; /* Seitengrund, ersetzt bg-white */ --n-karte: #151B23; /* abgesetzte Flaechen */ --n-tief: #070A0D; /* Fuss und Buehne, tiefer als alles */ --n-linie: rgb(237 241 245 / .10); --n-honigduft: rgb(232 168 55 / .22); } /* --- 3 · Rueckholung: Ink als Flaeche --------------------- Die vier Stellen, an denen Ink kein Text ist. Sie werden nicht heller, sondern tiefer als der Seitengrund - im Tagmodus ist dieser Abschnitt der dunkelste, nachts bleibt er es. Die Gestaltungsabsicht ueberlebt die Umkehrung. */ html.nacht .bg-bee-ink { background-color: var(--n-tief); } html.nacht .bg-bee-ink\/75 { background-color: rgb(7 10 13 / .78); } html.nacht .bg-bee-ink\/85 { background-color: rgb(7 10 13 / .88); } /* Am Tag trennt der Sprung von Weiss auf Ink den Fuss vom Inhalt. Nachts liegen beide Toene dicht beieinander und der Sprung traegt nicht mehr. Eine Haarlinie stellt die Grenze wieder her - gemessen im Fussbild, nicht vermutet. */ html.nacht > body footer { border-top: 1px solid var(--n-linie); } /* --- 4 · Der Primaerknopf wird Honig ---------------------- bg-bee-ink ist gleichzeitig Fuss, Buehne und Hauptknopf. Auf dunklem Grund verschwindet ein dunkler Knopf. Nachts traegt er deshalb Honig - dieselbe Rangfolge, anderes Mittel. Getroffen wird ueber a und button, weil nur Knoepfe diese Elemente sind; Fuss (footer), Buehne (section) und die Ueberlagerungen (div) fallen nicht darunter. Die Sprungmarke traegt focus:bg-bee-ink und ist eine andere Klasse. */ html.nacht :is(a, button).bg-bee-ink { background-color: var(--color-bee-honey); color: #14181D; } html.nacht :is(a, button).bg-bee-ink :is(svg, path) { fill: currentColor; } @media (hover: hover) { html.nacht :is(a, button).bg-bee-ink:hover, html.nacht :is(a, button).hover\:bg-bee-ink\/90:hover { background-color: #F2BE5C; } } /* Ausnahme: die mobile Sticky-Leiste. Sie traegt zwei Knoepfe nebeneinander - "Anrufen" (Ink) und "Rueckruf" (Honig). Am Tag sind die beiden klar zu unterscheiden. Wuerde der Ink-Knopf hier auch Honig werden, staenden zwei gleiche Knoepfe nebeneinander und die Leiste saehe aus wie ein breiter Honigbalken mit einer Fuge. Im Bild bei 390px genau so gesehen. Deshalb wird "Anrufen" nachts ein umrandeter Knopf: gleiche Groesse, gleiches Gewicht, andere Art. Die Rangfolge der Tagfassung bleibt erhalten. */ html.nacht .fixed.bottom-0 :is(a, button).bg-bee-ink { background-color: var(--n-karte); color: var(--color-bee-ink); box-shadow: inset 0 0 0 1px rgb(237 241 245 / .22); } @media (hover: hover) { html.nacht .fixed.bottom-0 :is(a, button).bg-bee-ink:hover { background-color: #1B2230; } } /* --- 5 · Honig-Inseln behalten den Tag -------------------- Der Honigstreifen und jeder Honigknopf bleiben hell. Alles darin muss sich also weiter wie am Tag verhalten, sonst steht heller Text auf hellem Honig. Statt jede Textklasse einzeln zurueckzuholen, werden die Variablen auf der Insel neu gesetzt. Sie vererben nach innen - eine Regel deckt Text, Raender, Icons und Trenner des ganzen Teilbaums ab. */ html.nacht .bg-bee-honey { --color-bee-ink: #14181D; --color-bee-slate: #46525F; } html.nacht .bg-bee-honey :is(a, button).bg-bee-ink { background-color: #14181D; color: #fff; } @media (hover: hover) { html.nacht .bg-bee-honey :is(a, button).bg-bee-ink:hover, html.nacht .bg-bee-honey :is(a, button).hover\:bg-bee-ink\/90:hover { background-color: rgb(20 24 29 / .9); } } /* --- 6 · Weisse Flaechen --------------------------------- bg-white ist zweierlei: der Seitengrund und die abgesetzte Karte. Am Tag trennt sie der Schatten, nachts traegt kein Schatten. Deshalb bekommt die Karte eine eigene, hellere Flaeche - erkennbar an ihrer Rundung. */ html.nacht .bg-white { background-color: var(--n-grund); } html.nacht .bg-white:is(.rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-4xl) { background-color: var(--n-karte); } /* --- 7 · Ringe und Schatten auf Schwarzbasis -------------- ring-black/5 und Verwandte sind nachts unsichtbar: Schwarz auf Schwarz. Sie sind aber genau das, was die Karten begrenzt, seit der Schatten nicht mehr traegt. */ html.nacht .ring-black\/5 { --tw-ring-color: var(--n-linie); } html.nacht .outline-black\/5 { outline-color: var(--n-linie); } html.nacht .shadow-black\/5 { --tw-shadow-color: transparent; } /* --- 8 · Alarmton ---------------------------------------- Die Variable traegt den helleren Ton (Text, Unterstreichung, 10-Prozent-Tönung). Wo Alarm eine Flaeche mit weisser Schrift ist, bleibt der satte Tagton - heller Grund mit weisser Schrift faellt sonst auf 2,7:1. */ html.nacht .bg-bee-alert { background-color: #C4321F; } @media (hover: hover) { html.nacht .hover\:bg-bee-alert\/90:hover { background-color: rgb(196 50 31 / .9); } } /* --- 9 · Die Einsatzgebiet-Karte -------------------------- Eine SVG-Datei mit fest eingebackenen Farben, per eingebunden - CSS kommt nicht hinein. Sie nachts umzufaerben ginge nur per Filter, und ein Filter dreht auch den Honig der Ortsmarken. Stattdessen bekommt sie ein helles Passepartout: die Karte bleibt eine Karte, sichtbar als eigenes Blatt auf dunklem Grund. */ html.nacht img[src$="einsatzgebiet.svg"] { background-color: #F1F4F6; border-radius: 12px; padding: 10px; box-shadow: 0 0 0 1px var(--n-linie); } /* --- 9a · Die Verlaufstafel hinter den Preiskarten ------- Der Preisblock traegt einen Verlauf mit fest eingebackenen Farben (Tailwind-Sonderwert, keine Variable): #A87A22 -> #3A3320 -> #14181D ab 70%. Am Tag ist das die dunkle Tafel, die die Karten traegt. Nachts ist ihr Endpunkt #14181D HELLER als der Seitengrund #0C1015 - die Tafel setzte sich als Naht quer ueber die Seite ab. Gemessen an der Kante: elementFromPoint(50, 460) lieferte genau diesen Verlauf. Der Honigglanz bleibt, nur der Auslauf wird auf den Nachtgrund gezogen. Getroffen wird ueber den Klassennamen, weil der Sonderwert kein sauberer Selektor ist; im ganzen Projekt gibt es genau diese zwei Verlaufsklassen. */ html.nacht [class*="radial-gradient"] { background-image: radial-gradient(circle at center center, #A87A22, #2A2517, #0C1015 70%); } @media (min-width: 64rem) { html.nacht [class*="radial-gradient"] { background-image: radial-gradient(circle at center 150%, #A87A22, #2A2517, #0C1015 70%); } } /* --- 10 · Logo ------------------------------------------ Kopf und Mobilmenue tragen das dunkle Logo, der Fuss das weisse. Nachts wird der Kopf dunkel - das dunkle Logo waere dann unsichtbar. Getauscht wird ueber content, nicht ueber JavaScript. Der Umschalter im setzt .nacht vor dem ersten Anstrich; beeit.js laeuft erst nach dem Parsen. Ein Tausch per Skript haette das Logo beim Laden kurz verschluckt. Die weissen Dateien liegen bereits im Bestand und haben dieselben Abmessungen - w-auto und h-10 rechnen unveraendert weiter, das alt-Attribut bleibt. */ html.nacht img[src$="beeit_logo-beeit_380.webp"] { content: url("/assets/bilder/beeit_logo-beeit-weiss_380.webp"); } html.nacht img[src$="beeit_logo-beeit_190.webp"] { content: url("/assets/bilder/beeit_logo-beeit-weiss_190.webp"); } /* --- 11 · Buehne ------------------------------------------ Ein Hauch Honig am oberen Rand. Reine Zier, aber sie macht aus der Umkehrung eine Gestaltung. Liegt hinter dem Inhalt (isolate + -z-10 stehen im Markup) und faengt keine Klicks. */ html.nacht .buehne::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 40%; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, var(--n-honigduft) 0%, transparent 70%); } /* ========================================================== DER SCHALTER Gilt in BEIDEN Modi, steht deshalb ausserhalb von .nacht. Eingehaengt wird er von beeit.js, nicht vom Markup: ohne JavaScript kann er nichts umschalten, dann soll er auch nicht dastehen. ========================================================== */ .nacht-schalter { position: fixed; right: 1rem; bottom: 5.25rem; /* ueber der mobilen Sticky-Leiste */ z-index: 45; /* ueber der Leiste (40), unter dem Menue (50) */ display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; /* Kanon 5.3 */ min-width: 52px; padding: 0 1rem; border: 0; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; background: rgb(20 24 29 / .92); color: #fff; box-shadow: 0 6px 20px rgb(10 13 17 / .28), 0 0 0 1px rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } @media (min-width: 768px) { .nacht-schalter { right: 1.5rem; bottom: 1.5rem; } } /* Platz unter dem Fuss, damit der Schalter nichts zudeckt. BELEGTER FALL, nicht vorsorglich: Am Seitenende lag der Schalter genau auf der Credit-Zeile "Made with * by eyedee" und schnitt sie ab - das ist eine Pflichtangabe nach Kanon 1.2/1.3, keine Zierde. Die Klasse setzt beeit.js, wenn der Schalter tatsaechlich haengt. Ohne JavaScript gibt es keinen Schalter, dann soll auch die Luft nicht da sein. Gilt in BEIDEN Modi - der Schalter steht ja auch am Tag da. Mobil zusaetzlich die Hoehe der Sticky-Leiste: der Schalter sitzt ueber ihr und braucht entsprechend mehr Raum. */ html.schalter-da footer { padding-bottom: 9.5rem; } @media (min-width: 768px) { html.schalter-da footer { padding-bottom: 5.5rem; } } .nacht-schalter .schalter-zeichen { display: block; width: 20px; height: 20px; flex: 0 0 auto; } /* Unter 380px nur das Zeichen - der Text wuerde die Leiste darunter erdruecken. Die Beschriftung bleibt als aria-label am Knopf. */ @media (max-width: 379px) { .nacht-schalter { padding: 0; justify-content: center; } .nacht-schalter .schalter-text { display: none; } } @media (hover: hover) { .nacht-schalter:hover { background: #14181D; } } .nacht-schalter:focus-visible { outline: 2px solid var(--color-bee-honey, #E8A837); outline-offset: 3px; } /* Nachts dreht der Knopf sich um: Honigkante und ein Schimmer, damit er als aktiv zu erkennen ist und nicht nur als Knopf, der zufaellig dunkel ist. */ html.nacht .nacht-schalter { background: rgb(21 27 35 / .92); color: var(--color-bee-honey); box-shadow: 0 6px 24px rgb(0 0 0 / .5), 0 0 0 1px rgb(232 168 55 / .38), 0 0 22px -6px rgb(232 168 55 / .55); } @media (hover: hover) { html.nacht .nacht-schalter:hover { background: #1B2230; } } /* --- Der Wechsel selbst ---------------------------------- Einmalig 300 ms, waehrend des Umschaltens. Die Klasse setzt beeit.js und nimmt sie danach wieder weg - ein dauerhafter Uebergang auf * wuerde jeden Zustandswechsel der Seite verschleppen. 13.4: unter prefers-reduced-motion passiert gar nichts, der Sprung ist dann hart und sofort. */ @media (prefers-reduced-motion: no-preference) { html.wechselt, html.wechselt *, html.wechselt *::before, html.wechselt *::after { transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, box-shadow .3s ease, outline-color .3s ease !important; } .nacht-schalter .schalter-zeichen { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .nacht-schalter:active .schalter-zeichen { transform: rotate(-35deg) scale(.9); } } /* --- Druck ----------------------------------------------- Papier ist immer hell. Die Umdefinition wird zurueckgedreht, der Schalter verschwindet. */ @media print { .nacht-schalter { display: none !important; } html.nacht { color-scheme: light; --color-bee-ink: #14181D; --color-bee-slate: #46525F; --color-bee-mist: #F1F4F6; --color-bee-alert: #C4321F; --n-grund: #fff; --n-karte: #fff; --n-tief: #14181D; } html.nacht .buehne::after { display: none; } html.nacht img[src$="einsatzgebiet.svg"] { padding: 0; box-shadow: none; } }