/* Hell und dunkel umschaltbar. Standard ist HELL (Sven 31.08.2026). GEPRUEFT-GEGEN: geprueft: stil.css (definiert die Farbvariablen dunkel), stil-live.css (Bausteine, farbneutral ueber die Variablen), entwuerfe/ entwurf_2_klar.html (dort entstand die helle Palette, hier uebernommen). Keine dieser Dateien kann umschalten, deshalb diese dritte. WIE ES FUNKTIONIERT Die dunklen Werte stehen in stil.css auf :root und bleiben dort unberuehrt. Diese Datei laedt DANACH und dreht die Werte auf hell. Der Umschalter setzt `data-theme="dark"` auf , was die dunklen Werte zurueckholt. So bleibt das Layout in beiden Faellen identisch, es tauschen nur die Farben. Die Variablennamen sind aus dem dunklen Entwurf gewachsen (--nacht ist der Seitengrund, --weiss die Textfarbe). Im Hellmodus stimmen die Namen nicht mehr woertlich. Umbenennen haette jede Zeile in drei Dateien angefasst, das Risiko ist groesser als der Gewinn. */ :root { --nacht: #f7f8fa; /* Seitengrund */ --karte: #ffffff; /* Kacheln und Bloecke */ --karte2: #f2f4f7; --rand: #e4e7ec; --rand2: #d5dae2; --weiss: #14161a; /* Textfarbe */ --matt: #5a616c; --dunkelmatt: #868d99; --gold: #b07d10; /* dunkler als im Dunkelmodus, sonst zu blass */ --goldtief: #8f6408; --goldweich: rgba(176,125,16,.12); --rot: #c0392b; --gruen: #17794c; } :root[data-theme="dark"] { --nacht: #0e0f12; --karte: #16181d; --karte2: #1b1e24; --rand: #23262d; --rand2: #2e323a; --weiss: #f2f3f5; --matt: #9aa0aa; --dunkelmatt: #6c727d; --gold: #d8a83c; --goldtief: #b98d24; --goldweich: rgba(216,168,60,.13); --rot: #c8453b; --gruen: #5ec08c; } /* Was im Hellmodus anders sein MUSS, nicht nur andersfarbig ────────────── */ /* Kopfzeile: der Weichzeichner braucht den passenden Grundton. */ header { background: rgba(247,248,250,.92); } :root[data-theme="dark"] header { background: rgba(14,15,18,.92); } .leiste { background: rgba(247,248,250,.94); } :root[data-theme="dark"] .leiste { background: rgba(14,15,18,.94); } /* Die Wortmarke der Betriebe ohne eigenes Bild ist weiss. Auf hellem Grund waere sie unsichtbar, deshalb bekommt sie dort einen grauen Ton und einen Rahmen (Hinweis an Sven vor dem Bau, 31.08.2026). */ .wortmarke { background:#eef0f4; border:1px solid var(--rand); } .wortmarke b { color:#14161a; } .wortmarke i { color:#7c8290; } :root[data-theme="dark"] .wortmarke { background:#fff; border:0; } :root[data-theme="dark"] .wortmarke b { color:#111318; } :root[data-theme="dark"] .wortmarke i { color:#8b919c; } /* Bildfelder ohne Foto: heller Verlauf statt dunklem. */ .kbild, .tbild, .empfbild, .galerie div { background: linear-gradient(150deg,#eaedf1,#f5f7f9); color: #b4bac4; } :root[data-theme="dark"] .kbild, :root[data-theme="dark"] .tbild, :root[data-theme="dark"] .empfbild, :root[data-theme="dark"] .galerie div { background: linear-gradient(150deg,#23262d,#171a1f); color: #3d434e; } .kbild.hat-bild, .tbild.hat-bild { background-size:cover; background-position:center; } /* Der Goldschimmer im Hero ist auf Weiss zu grell. */ .hero::after { background: radial-gradient(circle,rgba(176,125,16,.08),transparent 68%); } :root[data-theme="dark"] .hero::after { background: radial-gradient(circle,rgba(216,168,60,.13),transparent 68%); } /* Kacheln brauchen auf Hell einen Schatten statt eines Randes, sonst verschwinden sie im Grund. */ .k, .box, .block, .info, .br, .staedteliste a, .treffer, .streifen { box-shadow: 0 1px 2px rgba(20,22,26,.04); } :root[data-theme="dark"] .k, :root[data-theme="dark"] .box, :root[data-theme="dark"] .block, :root[data-theme="dark"] .info, :root[data-theme="dark"] .br, :root[data-theme="dark"] .staedteliste a, :root[data-theme="dark"] .treffer, :root[data-theme="dark"] .streifen { box-shadow: none; } .k:hover, .treffer:hover { border-color: var(--rand2); box-shadow: 0 6px 18px rgba(20,22,26,.08); } :root[data-theme="dark"] .k:hover, :root[data-theme="dark"] .treffer:hover { border-color:#39404b; box-shadow:none; } /* Der Aufruf-Block ist im Dunkelmodus ein heller Kasten auf Dunkel. Auf Hell muss er umgekehrt dunkel bleiben, sonst faellt er gar nicht mehr auf. */ .cta { background: linear-gradient(120deg,#1a1d22,#241f10); border-color:#2a2d34; } .cta h2 { color:#fff; } .cta p { color:#a9afb9; } /* Die Karte ist ohnehin hell (OpenStreetMap-Original), im Dunkelmodus bekommt sie nur einen ruhigeren Rahmen. */ .karte-bild { background:#e9e5dc; } /* Der Umschalter selbst ─────────────────────────────────────────────────── */ .thema { background: transparent; border: 1px solid var(--rand2); border-radius: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--matt); flex: none; padding: 0; } .thema:hover { color: var(--gold); border-color: var(--gold); } .thema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .thema .mond { display: none; } :root[data-theme="dark"] .thema .sonne { display: none; } :root[data-theme="dark"] .thema .mond { display: block; } /* Oeffnungszeiten: die Tabelle klebte am Rahmen des Blocks, links am Wochentag und rechts an der Uhrzeit (Sven 31.08.2026 am Screenshot bemerkt). Zwei Ursachen, beide hier behoben: 1. Hello Elementor gibt jeder Tabellenzelle einen eigenen Rahmen und laesst die Tabelle bis an die Blockkante laufen. Das muss zurueckgesetzt werden. 2. Die Zeitspalte war zu breit und schob sich nach aussen. */ .seitenbox .block { padding: 24px 28px; } .zeiten { width: 100%; border-collapse: collapse; table-layout: auto; } .zeiten td, .zeiten th { border: 0 !important; background: none !important; } .zeiten tr td { border-bottom: 1px solid var(--rand) !important; } .zeiten tr:last-child td { border-bottom: 0 !important; } .zeiten td:first-child { padding: 11px 14px 11px 0; } .zeiten td:last-child { padding: 11px 0 11px 14px; white-space: nowrap; } @media (max-width: 640px) { .seitenbox .block { padding: 20px 18px; } }