/* ============================================================ theme.css — Tagmodus (hell). Aktiv, wenn . Umschalter + Speicherung: js/theme.js. Dunkel bleibt der Standard-Look aus tokens.css; hier wird nur für Hell überschrieben. ============================================================ */ :root[data-theme="light"] { --bg: #f7f4ec; /* warmes Papierweiß */ --bg-panel: #ffffff; --bg-panel-2: #fbf8f1; --ink: #1e1b34; /* das bisherige Hintergrund-Indigo wird zur Schrift */ --ink-muted: #6b6690; --line: #e4ddcc; /* Akzente: leicht tiefer, damit sie auf Hell genug Kontrast haben */ --coral: #ef5a55; --amber: #f2b632; --mint: #1fbf8f; --sky: #3aaee6; --gold: #f0b429; /* Karten */ --meer: #d9e7f2; --land: #f3ede0; --land-linie: #cdbfa3; --fremd: #f2eee6; --land-grau: #ddd1b6; --land-rand: #ae9d78; --schrift-halo: #ffffff; color-scheme: light; } /* Knöpfe: dunkle Schrift auf farbigem Grund (statt Hintergrundfarbe) */ :root[data-theme="light"] .btn { color: #1e1b34; } :root[data-theme="light"] .bald-pill, :root[data-theme="light"] .tages-pill.neu, :root[data-theme="light"] .tages-pill.fertig { color: #1e1b34; } /* Flächen bekommen weiche Schatten statt dunkler Tiefe */ :root[data-theme="light"] .zurueck, :root[data-theme="light"] .gruppe, :root[data-theme="light"] .karte-rahmen, :root[data-theme="light"] .quiz-karte, :root[data-theme="light"] .karte-wrap { box-shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 6px 18px rgba(60, 45, 20, .06); } :root[data-theme="light"] .kopf, :root[data-theme="light"] .fuss { background: rgba(255, 255, 255, .55); } /* Kachelbilder: Goldlinien brauchen auf Hell einen dunklen Rand statt Glow */ /* ---------- Karten (Capture the Map, GeoFill, As The Crow Flies) ---------- */ :root[data-theme="light"] .karte-rahmen { background: var(--meer) !important; } :root[data-theme="light"] .meer { fill: var(--meer) !important; } :root[data-theme="light"] .netz { stroke: rgba(70, 110, 150, .12) !important; } :root[data-theme="light"] .land path { fill: var(--land); } /* Crow */ :root[data-theme="light"] .grenzen { stroke: var(--land-linie) !important; } :root[data-theme="light"] .rand { stroke: #b9cddc !important; } /* Capture the Map */ :root[data-theme="light"] .andere path { fill: var(--land) !important; stroke: var(--land-linie) !important; } :root[data-theme="light"] .ziel { fill: color-mix(in srgb, var(--gold) 30%, var(--land)) !important; stroke: #d39a00 !important; } :root[data-theme="light"] .ring { stroke: #d39a00 !important; } :root[data-theme="light"] .fahne-schatten { fill: rgba(60, 45, 20, .25) !important; } :root[data-theme="light"] .ziel-label { fill: #1e1b34 !important; stroke: #ffffff !important; } :root[data-theme="light"] .linie { stroke: #1e1b34 !important; opacity: .55 !important; } :root[data-theme="light"] .ziel-punkt { stroke: #ffffff !important; } :root[data-theme="light"] .fahne-stange { stroke: #1e1b34 !important; } /* Beschriftungen auf Karten: dunkle Schrift mit weißem Halo */ :root[data-theme="light"] .marke-stadt, :root[data-theme="light"] .marke-land, :root[data-theme="light"] .route-km, :root[data-theme="light"] .etikett, :root[data-theme="light"] .karte text { stroke: var(--schrift-halo) !important; } :root[data-theme="light"] .marke-stadt { fill: #1e1b34 !important; } :root[data-theme="light"] .marke-land { fill: #6b6690 !important; } :root[data-theme="light"] .route-km { fill: #b07800 !important; } :root[data-theme="light"] .marke { stroke: #ffffff !important; fill: #e8a400 !important; } :root[data-theme="light"] .ziel-land { fill: color-mix(in srgb, var(--gold) 40%, var(--land)) !important; stroke: #d39a00 !important; } :root[data-theme="light"] .route-linie { stroke: #d39a00 !important; filter: none !important; stroke-width: 2.4 !important; } /* GeoFill */ :root[data-theme="light"] .land { stroke: var(--land-rand); } :root[data-theme="light"] .modus-klicken .land:not(.gefunden):not(.verpasst):hover { fill: #dcd2bb !important; } :root[data-theme="light"] .land.gefunden { filter: none !important; } :root[data-theme="light"] .etikett { fill: #1e1b34 !important; stroke: rgba(255,255,255,.8) !important; } :root[data-theme="light"] .fremd path { fill: var(--fremd) !important; stroke: #d8d0bd !important; } :root[data-theme="light"] .land.gefunden { fill: var(--gold) !important; stroke: #c48c00 !important; } :root[data-theme="light"] .land.verpasst { fill: #f08c87 !important; stroke: #d0524c !important; } :root[data-theme="light"] .punkt { stroke: #a99a78 !important; } :root[data-theme="light"] .hover-name { background: rgba(255, 255, 255, .92) !important; color: #1e1b34 !important; border-color: #e4ddcc !important; box-shadow: 0 4px 12px rgba(60,45,20,.12); } /* Flaggen bekommen einen feinen Rand statt dunklem Schatten */ :root[data-theme="light"] #q-flagge, :root[data-theme="light"] .q-flagge, :root[data-theme="light"] .kl-flagge { box-shadow: 0 0 0 1px rgba(30, 27, 52, .12), 0 8px 22px rgba(60, 45, 20, .14) !important; } /* Text in Akzentfarben: auf Hell eine Stufe dunkler (eigene Text-Tokens) */ :root[data-theme="light"] .urteil, :root[data-theme="light"] .feedback, :root[data-theme="light"] .meldung, :root[data-theme="light"] .rev-cap, :root[data-theme="light"] .el-pkt, :root[data-theme="light"] .el-urteil, :root[data-theme="light"] .teilen-status, :root[data-theme="light"] .kl-wert { --mint: #0f9a70; --amber: #b47a00; --coral: #d13f3a; --hoch: #0f9a70; --tief: #d13f3a; } :root[data-theme="light"] .s-punkte strong, :root[data-theme="light"] .zaehler strong, :root[data-theme="light"] .aufgabe strong, :root[data-theme="light"] .versuche, :root[data-theme="light"] .e-score strong, :root[data-theme="light"] .ende-score strong, :root[data-theme="light"] .e-text strong, :root[data-theme="light"] .el-pfeil, :root[data-theme="light"] .kl-wert, :root[data-theme="light"] .ergebnis strong { --gold: #b47a00; } :root[data-theme="light"] .q-flagge + *, :root[data-theme="light"] .quiz-leiste .punkte, :root[data-theme="light"] .ende-score strong { --akzent: #b47a00; } /* Kachelbilder: helle Variante (assets/light/) statt der dunklen */ .bild-hell { display: none; } :root[data-theme="light"] .kachel:has(.bild-hell) .bild-dunkel { display: none; } :root[data-theme="light"] .bild-hell { display: block; } /* ---------- Umschalter Sonne / Mond ---------- */ .thema { font: inherit; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--line); cursor: pointer; flex: none; } .thema span { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 999px; font-size: 15px; line-height: 1; filter: grayscale(1); opacity: 0.5; transition: background 0.2s ease, opacity 0.2s ease, filter 0.2s ease; } :root:not([data-theme="light"]) .thema .mond, :root[data-theme="light"] .thema .sonne { background: var(--bg-panel-2); filter: none; opacity: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .thema:hover { border-color: color-mix(in srgb, var(--akzent) 50%, var(--line)); } .thema:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 55%, transparent); } /* Spielseiten: oben rechts, auf Höhe des „← Overview“-Links */ .thema-fix { position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); right: 20px; z-index: 5; } @media (max-width: 560px) { .thema-fix { right: 12px; } .thema span { width: 30px; height: 26px; } } /* Weicher Übergang nur im Moment des Umschaltens */ .thema-wechsel, .thema-wechsel * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important; } /* ---------- Umschalter Benutzer / Admin (js/rolle.js) ---------- */ :root:not([data-rolle="admin"]) .nur-admin { display: none !important; } .rolle { position: relative; flex: none; } .rolle-knopf { font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--bg-panel); color: var(--ink); border: 1px solid var(--line); } .rolle-knopf:hover { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); } .rolle-knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 55%, transparent); } :root[data-rolle="admin"] .rolle-knopf { border-color: color-mix(in srgb, var(--amber) 60%, var(--line)); background: color-mix(in srgb, var(--amber) 16%, var(--bg-panel)); } .r-pfeil { font-size: 0.7rem; opacity: 0.7; } .rolle-menue { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 170px; padding: 6px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } :root[data-theme="light"] .rolle-menue { box-shadow: 0 12px 32px rgba(60, 45, 20, 0.16); } .rolle-titel { margin: 4px 10px 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .rolle-menue button { font: inherit; font-weight: 600; width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 10px; border: none; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; } .rolle-menue button:hover, .rolle-menue button:focus-visible { background: var(--bg-panel-2); outline: none; } .rolle-menue .haken { margin-left: auto; color: var(--amber); visibility: hidden; font-weight: 800; opacity: 1; } /* nicht vom .haken der Länder-Kacheln (Capitulary/Flagulary) überschreiben lassen */ .rolle-menue button[aria-checked="true"] .haken { visibility: visible; } .ecke-rechts { position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); right: 20px; z-index: 20; display: flex; align-items: center; gap: 10px; } @media (max-width: 560px) { .rolle-knopf { padding: 0 9px; height: 34px; } .rolle-knopf .r-name { display: none; } .ecke-rechts { right: 12px; } } /* Admin-Seiten im Benutzer-Modus: nur der Hinweis */ :root[data-gesperrt] .adm, :root[data-gesperrt] .adm-nav { display: none !important; } .gesperrt-hinweis { display: none; } :root[data-gesperrt] .gesperrt-hinweis { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 460px; margin: 12vh auto 0; padding: 30px 28px; border-radius: var(--radius); background: var(--bg-panel); border: 1px solid var(--line); } .gesperrt-hinweis .g-icon { font-size: 2.4rem; } .gesperrt-hinweis h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; } .gesperrt-hinweis p { margin: 0 0 8px; color: var(--ink-muted); } .gesperrt-hinweis .btn { text-decoration: none; } /* ---------- Sprach-Auswahl (js/i18n.js): Globus + Kürzel, darüber unsichtbar das echte