/* industriepark.org – gemeinsames Farbschema (hell/dunkel) für Startseite, Spielseiten und Neuigkeiten.
   Dunkel folgt der Browser-Einstellung; der Umschalter setzt data-theme="light|dark" auf <html>. */
:root { --tief: #182142; --gruen-hell: #e9f8ee; --naht: rgba(24, 33, 66, .1); --glas: rgba(255, 255, 255, .92); --schatten-tief: rgba(24, 33, 66, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0f1424; --surface: #1b2238; --ink: #eef1fb; --muted: #a2abc9; --line: #4d5a97; --tief: #2b3566; --gruen-hell: #173726; --naht: rgba(255, 255, 255, .12); --glas: rgba(27, 34, 56, .94); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0f1424; --surface: #1b2238; --ink: #eef1fb; --muted: #a2abc9; --line: #4d5a97; --tief: #2b3566; --gruen-hell: #173726; --naht: rgba(255, 255, 255, .12); --glas: rgba(27, 34, 56, .94); color-scheme: dark; }
.thema-knopf { width: 42px; height: 42px; flex: none; border-radius: 14px; border: 3px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--line); padding: 0; transition: transform .1s ease, box-shadow .1s ease; }
.thema-knopf:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.thema-knopf:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.thema-knopf:focus-visible { outline: 3px solid #2f80ed; outline-offset: 2px; }
.thema-knopf svg { width: 22px; height: 22px; }
/* Favoriten-Herz und „spielen gerade“ (Startseite + Spielseiten) */
.herz-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 3px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--line); transition: transform .12s ease; }
.herz-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.herz-knopf.an { color: #ff3b6a; } .herz-knopf.an svg { fill: #ff3b6a; stroke: #ff3b6a; }
.herz-knopf:hover { transform: scale(1.08); } .herz-knopf:active { transform: scale(.92); }
.herz-knopf:focus-visible { outline: 3px solid #2f80ed; outline-offset: 2px; }
.herz-knopf.mit-text { width: auto; height: auto; border-radius: 12px; padding: 6px 12px; font: 600 .88rem "Fredoka", sans-serif; }
.herz-knopf.mit-text svg { width: 16px; height: 16px; }
.online-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem "Fredoka", sans-serif; color: #fff; background: rgba(13, 16, 32, .78); padding: 3px 9px; border-radius: 999px; }
.online-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3be07a; box-shadow: 0 0 0 3px rgba(59, 224, 122, .3); }
.online-badge[hidden] { display: none; }