/* =====================================================================
   Designs für den Nachhilfe-Raum. Jede Person wählt ihr eigenes Design
   (oben "Design"), gespeichert nur im eigenen Browser.
   Alles reines CSS mit Schriften, die auf dem Gerät schon vorhanden sind:
   keine Bilder oder Schriften von fremden Servern (Datenschutz).
   Das Arbeitsblatt (Seite im Whiteboard) bleibt in jedem Design weiß.
   ===================================================================== */

/* ---------- Design-Auswahl (Knopf + Menü) ---------- */
.head-actions { display: flex; align-items: center; gap: 8px; }
#btn-theme { display: inline-flex; align-items: center; gap: 6px; }
.link-btn { background: transparent; border: none; color: var(--muted); font-size: 13px; padding: 2px; align-self: center; }
.link-btn:hover { color: var(--text); }
.theme-menu {
  position: fixed; z-index: 60; width: 230px; padding: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px;
}
.theme-menu .theme-title { margin: 2px 6px 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.theme-menu button {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: transparent; border: 1px solid transparent; padding: 7px 8px;
}
.theme-menu button:hover { background: var(--panel-2); }
.theme-menu button.active { border-color: var(--accent); background: var(--panel-2); }
@media (max-width: 800px) { #btn-theme .txt { display: none; } }
.sw { width: 34px; height: 22px; border-radius: 6px; flex: none; border: 1px solid rgba(255,255,255,.25); }
.sw-standard { background: linear-gradient(135deg, #14161a 50%, #3b82f6 50%); }
.sw-cyber { background: linear-gradient(135deg, #0a0614 40%, #ff2a6d 40% 70%, #05d9e8 70%); }
.sw-mittelalter { background: linear-gradient(135deg, #e9dcb8 50%, #8b1e1e 50%); }
.sw-clean { background: linear-gradient(135deg, #ffffff 60%, #111111 60%); border-color: #d4d4d4; }
.sw-academia { background: linear-gradient(135deg, #2a221d 45%, #6e2a26 45% 70%, #c9b48a 70%); }
.sw-pastell { background: linear-gradient(135deg, #f9c6d8 0 33%, #d9c8f5 33% 66%, #bfead6 66%); }
.sw-cottage { background: linear-gradient(180deg, #6aa84f 0 35%, #fbf1d9 35% 70%, #8b5a2b 70%); }
.sw-pixel { background: repeating-conic-gradient(#0f380f 0 25%, #9bbc0f 0 50%) 0 0 / 8px 8px; border-radius: 0; }
.sw-retro { background: linear-gradient(180deg, #000080 0 35%, #c0c0c0 35% 70%, #008080 70%); }
.sw-weltall { background: radial-gradient(circle at 70% 30%, #38bdf8 0 3px, transparent 4px), radial-gradient(circle at 25% 70%, #fff 0 1px, transparent 2px), #050816; }

/* Hinweistexte auf hellem Grund lesbar halten */
:root[data-theme="clean"] .status.warn, :root[data-theme="mittelalter"] .status.warn, :root[data-theme="retro"] .status.warn { color: #92400e; }
:root[data-theme="clean"] .status.ok, :root[data-theme="mittelalter"] .status.ok, :root[data-theme="retro"] .status.ok { color: #166534; }

/* ---------- Cyberpunk: Neon, Raster, eckige Kanten ---------- */
:root[data-theme="cyber"] {
  --bg: #0a0614; --panel: rgba(18, 8, 38, .88); --panel-2: #1c0f33; --text: #e0f7ff; --muted: #9b8cc4;
  --accent: #ff2a6d; --ok: #00c98d; --danger: #ff3860; --border: rgba(255, 42, 109, .45); --border-hover: #05d9e8;
  --surface: #120a24; --tile-bg: #05020c; --radius: 2px; --btn-radius: 0;
  --font: "Cascadia Mono", Consolas, "Courier New", monospace; --title-font: var(--font);
  --glow: drop-shadow(0 0 3px currentColor); --ico-stroke: 1.8;
  --bg-image:
    linear-gradient(rgba(5, 217, 232, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 217, 232, .07) 1px, transparent 1px),
    radial-gradient(ellipse at 20% 0%, rgba(255, 42, 109, .25), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(5, 217, 232, .2), transparent 55%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
}
:root[data-theme="cyber"] body { background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%; }
:root[data-theme="cyber"] button { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
:root[data-theme="cyber"] #controls button, :root[data-theme="cyber"] .card button.primary {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
:root[data-theme="cyber"] .toggle.active, :root[data-theme="cyber"] button.primary,
:root[data-theme="cyber"] #board-tools button.active { box-shadow: 0 0 14px var(--accent); }
:root[data-theme="cyber"] header, :root[data-theme="cyber"] #controls {
  background: rgba(10, 6, 20, .9); border-color: #05d9e8; border-style: solid; border-width: 0;
}
:root[data-theme="cyber"] header { border-bottom-width: 1px; box-shadow: 0 0 18px rgba(5, 217, 232, .35); }
:root[data-theme="cyber"] #controls { border-top-width: 1px; box-shadow: 0 0 18px rgba(255, 42, 109, .35); }
:root[data-theme="cyber"] .tile { border: 1px solid #05d9e8; box-shadow: 0 0 12px rgba(5, 217, 232, .35); }
:root[data-theme="cyber"] h1, :root[data-theme="cyber"] #room-title { color: #05d9e8; text-shadow: 0 0 8px #05d9e8; text-transform: uppercase; letter-spacing: .08em; }
:root[data-theme="cyber"] .card { border: 1px solid var(--border); box-shadow: 0 0 30px rgba(255, 42, 109, .25); }
:root[data-theme="cyber"] .surface {
  background-color: #0d0820;
  background-image: linear-gradient(rgba(5, 217, 232, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 217, 232, .08) 1px, transparent 1px);
  background-size: 24px 24px; border: 1px solid var(--border);
}
:root[data-theme="cyber"] #banner { background: #2a0a1c; color: #ff9ec0; border-bottom: 1px solid var(--accent); }


/* ---------- Mittelalter: Pergament, Holz, Siegelrot, Zierschrift ---------- */
:root[data-theme="mittelalter"] {
  --bg: #2b1d12; --panel: #e9dcb8; --panel-2: #dccb9f; --text: #3b2414; --muted: #7a5a3a;
  --accent: #8b1e1e; --on-accent: #f8ecd0; --ok: #556b2f; --danger: #a1281b;
  --border: #8b6b3e; --border-hover: #5c3d1e; --surface: #4a3220; --tile-bg: #2b1d12;
  --radius: 6px; --btn-radius: 4px; --ico-stroke: 2.2;
  --font: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --title-font: "Old English Text MT", "UnifrakturMaguntia", "Goudy Old Style", Georgia, serif;
  --bg-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #3a2716, #241710);
}
:root[data-theme="mittelalter"] body { color: var(--text); }
:root[data-theme="mittelalter"] header, :root[data-theme="mittelalter"] #controls {
  background: linear-gradient(180deg, #5c3d1e, #3e2914); color: #f1e4c3;
  border-color: #b8892f; border-style: solid; border-width: 0;
}
:root[data-theme="mittelalter"] header { border-bottom-width: 3px; }
:root[data-theme="mittelalter"] #controls { border-top-width: 3px; }
:root[data-theme="mittelalter"] header .muted { color: #d8c08f; }
:root[data-theme="mittelalter"] header button:not(.primary) { background: #e9dcb8; color: #3b2414; }
:root[data-theme="mittelalter"] h1, :root[data-theme="mittelalter"] #room-title, :root[data-theme="mittelalter"] #side h2 {
  font-family: var(--title-font); font-weight: normal; letter-spacing: .02em;
}
:root[data-theme="mittelalter"] h1 { font-size: 30px; color: #6b1515; }
:root[data-theme="mittelalter"] #room-title { font-size: 22px; color: #f1e4c3; }
:root[data-theme="mittelalter"] button { border: 3px double var(--border); }
:root[data-theme="mittelalter"] .link-btn, :root[data-theme="mittelalter"] .theme-menu button { border: 1px solid transparent; }
:root[data-theme="mittelalter"] .theme-menu button.active { border-color: var(--accent); }
:root[data-theme="mittelalter"] #controls button:not(.on):not(.off):not(.active):not(.danger) { background: #e9dcb8; color: #3b2414; }
:root[data-theme="mittelalter"] .card, :root[data-theme="mittelalter"] #side {
  background: radial-gradient(ellipse at center, #f3e7c6 40%, #dcc894 100%);
  border: 3px double #8b6b3e; box-shadow: inset 0 0 40px rgba(120, 80, 30, .35);
}
:root[data-theme="mittelalter"] .tile { border: 4px ridge #b8892f; }
:root[data-theme="mittelalter"] #board-tools .tool-group { background: #e9dcb8; border: 2px solid #8b6b3e; }
:root[data-theme="mittelalter"] #board-tools button { border: none; }
:root[data-theme="mittelalter"] .surface { border: 4px ridge #b8892f; }
:root[data-theme="mittelalter"] .toggle.active, :root[data-theme="mittelalter"] button.primary {
  background: radial-gradient(circle at 35% 30%, #b83232, #6b1515); border-color: #4a0e0e;
}

/* ---------- Clean: ganz reduziert, schwarz-weiß, feine Linien, keine Effekte ---------- */
:root[data-theme="clean"] {
  --bg: #fafafa; --panel: #ffffff; --panel-2: #f4f4f5; --text: #18181b; --muted: #71717a;
  --accent: #18181b; --on-accent: #ffffff; --ok: #18181b; --danger: #dc2626;
  --border: #e4e4e7; --border-hover: #a1a1aa; --surface: #f4f4f5; --tile-bg: #27272a;
  --radius: 12px; --btn-radius: 8px; --ico-stroke: 1.6;
  --font: "Segoe UI Variable", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="clean"] header, :root[data-theme="clean"] #controls { border-color: var(--border); border-style: solid; border-width: 0; }
:root[data-theme="clean"] header { border-bottom-width: 1px; }
:root[data-theme="clean"] #controls { border-top-width: 1px; }
:root[data-theme="clean"] #side { border-left: 1px solid var(--border); }
:root[data-theme="clean"] button { background: #fff; }
:root[data-theme="clean"] button:hover { background: var(--panel-2); }
/* Mikro/Kamera an: dezent statt grün; aus: rote Schrift statt roter Fläche */
:root[data-theme="clean"] .toggle.on { background: #fff; color: var(--text); border-color: var(--border); }
:root[data-theme="clean"] .toggle.off { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
:root[data-theme="clean"] .toggle.active, :root[data-theme="clean"] button.primary,
:root[data-theme="clean"] #board-tools button.active { background: #18181b; color: #fff; border-color: #18181b; }
:root[data-theme="clean"] button.danger { background: #fff; color: #dc2626; border-color: #fecaca; }
:root[data-theme="clean"] .card { border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
:root[data-theme="clean"] h1 { font-weight: 600; letter-spacing: -.02em; }
:root[data-theme="clean"] .tile { border-radius: 12px; }
:root[data-theme="clean"] #board-tools .tool-group { background: #fff; border: 1px solid var(--border); }
:root[data-theme="clean"] .surface { border: 1px solid var(--border); }
:root[data-theme="clean"] .surface-page { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
:root[data-theme="clean"] .status.warn { color: #92400e; }
:root[data-theme="clean"] .status.ok { color: #166534; }
:root[data-theme="clean"] #banner { background: #fffbeb; color: #78350f; border-bottom: 1px solid #fde68a; }
:root[data-theme="clean"] .msg { background: var(--panel-2); }

/* ---------- Dark Academia: dunkles Holz, Creme, Bordeaux, Antiqua ---------- */
:root[data-theme="academia"] {
  --bg: #1b1613; --panel: #2a221d; --panel-2: #352b24; --text: #e9dfc9; --muted: #a8977b;
  --accent: #6e2a26; --on-accent: #f3e9d2; --ok: #4f5d3a; --danger: #8e2c22;
  --border: #5a4636; --border-hover: #c9b48a; --surface: #14100d; --tile-bg: #0f0c0a;
  --radius: 4px; --btn-radius: 3px; --ico-stroke: 1.7;
  --font: Garamond, "EB Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif; --title-font: var(--font);
  --bg-image:
    radial-gradient(ellipse at 50% -10%, rgba(201, 180, 138, .12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px);
}
:root[data-theme="academia"] body { font-size: 16px; }
:root[data-theme="academia"] h1, :root[data-theme="academia"] #room-title {
  font-style: italic; font-weight: normal; color: #c9b48a; letter-spacing: .02em;
}
:root[data-theme="academia"] h1 { font-size: 30px; }
:root[data-theme="academia"] #side h2, :root[data-theme="academia"] .theme-menu .theme-title {
  font-variant: small-caps; text-transform: none; letter-spacing: .12em; font-size: 15px; color: #c9b48a;
}
:root[data-theme="academia"] header, :root[data-theme="academia"] #controls {
  background: #231c18; border-color: #c9b48a; border-style: solid; border-width: 0;
}
:root[data-theme="academia"] header { border-bottom-width: 1px; }
:root[data-theme="academia"] #controls { border-top-width: 1px; }
:root[data-theme="academia"] button { letter-spacing: .02em; }
:root[data-theme="academia"] .toggle.active, :root[data-theme="academia"] button.primary,
:root[data-theme="academia"] #board-tools button.active { background: #6e2a26; border-color: #c9b48a; color: #f3e9d2; }
:root[data-theme="academia"] .card { border: 1px solid #5a4636; outline: 1px solid #3a2e25; outline-offset: 4px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
:root[data-theme="academia"] .tile { border: 1px solid #c9b48a; outline: 1px solid #3a2e25; outline-offset: 2px; }
:root[data-theme="academia"] .surface { border: 1px solid #5a4636; }
:root[data-theme="academia"] .msg { background: #352b24; border-left: 2px solid #c9b48a; }
:root[data-theme="academia"] #banner { background: #3a2a1a; color: #e9dfc9; border-bottom: 1px solid #c9b48a; }
:root[data-theme="academia"] .ico svg { filter: none; }

/* ---------- Pastell: zarte Bonbonfarben, sehr rund, weiche Schatten ---------- */
:root[data-theme="pastell"] {
  --bg: #fdf6fb; --panel: rgba(255, 255, 255, .82); --panel-2: #f6effc; --text: #4a4458; --muted: #8e86a0;
  --accent: #9b7fd4; --on-accent: #ffffff; --ok: #5fb894; --danger: #e8798c;
  --border: #eadff5; --border-hover: #c9b6ee; --surface: #f3ecfa; --tile-bg: #6d6283;
  --radius: 22px; --btn-radius: 999px; --ico-stroke: 1.8;
  --font: "Segoe UI", "Nunito", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg-image:
    radial-gradient(circle at 10% 15%, rgba(249, 198, 216, .7), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(217, 200, 245, .7), transparent 32%),
    radial-gradient(circle at 80% 90%, rgba(191, 234, 214, .7), transparent 30%),
    radial-gradient(circle at 20% 85%, rgba(255, 221, 189, .6), transparent 28%);
}
:root[data-theme="pastell"] header, :root[data-theme="pastell"] #controls, :root[data-theme="pastell"] #side {
  background: rgba(255, 255, 255, .7); backdrop-filter: blur(10px);
}
:root[data-theme="pastell"] button { background: #fff; box-shadow: 0 2px 8px rgba(155, 127, 212, .12); }
:root[data-theme="pastell"] .toggle.on { background: #d7f2e6; color: #2f7a5a; border-color: #bfead6; }
:root[data-theme="pastell"] .toggle.off, :root[data-theme="pastell"] button.danger { background: #fde2e8; color: #c24d63; border-color: #f9c6d8; }
:root[data-theme="pastell"] .toggle.active, :root[data-theme="pastell"] button.primary,
:root[data-theme="pastell"] #board-tools button.active { background: linear-gradient(135deg, #b9a2ea, #f2a7c3); color: #fff; border-color: transparent; }
:root[data-theme="pastell"] h1, :root[data-theme="pastell"] #room-title { color: #9b7fd4; }
:root[data-theme="pastell"] .card { box-shadow: 0 12px 40px rgba(155, 127, 212, .2); border: 1px solid #f1e8fb; }
:root[data-theme="pastell"] .tile { border: 3px solid #f9c6d8; }
:root[data-theme="pastell"] .tile:nth-child(3n+2) { border-color: #bfead6; }
:root[data-theme="pastell"] .tile:nth-child(3n) { border-color: #d9c8f5; }
:root[data-theme="pastell"] #board-tools .tool-group { background: rgba(255,255,255,.85); border: 1px solid var(--border); }
:root[data-theme="pastell"] .surface { border: 1px solid var(--border); }
:root[data-theme="pastell"] .msg { background: #f6effc; }
:root[data-theme="pastell"] .status.warn { color: #9a5a12; }
:root[data-theme="pastell"] .status.ok { color: #2f7a5a; }
:root[data-theme="pastell"] #banner { background: #fff1f5; color: #8a3a50; }

/* ---------- Cottage: gemütlicher Bauernhof-Look, Holz, Creme, Blattgrün ---------- */
:root[data-theme="cottage"] {
  --bg: #8b5a2b; --panel: #fbf1d9; --panel-2: #f3e3bd; --text: #4a3222; --muted: #8a6a4a;
  --accent: #5d9a45; --on-accent: #ffffff; --ok: #5d9a45; --danger: #c0504d;
  --border: #a0662f; --border-hover: #6b3f1a; --surface: #6b4423; --tile-bg: #3d2614;
  --radius: 12px; --btn-radius: 10px; --ico-stroke: 2.3;
  --font: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; --title-font: var(--font);
  /* Holzdielen */
  --bg-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #9a6634, #7d4f24);
}
:root[data-theme="cottage"] header {
  background: linear-gradient(180deg, #6aa84f, #4f8a3a); color: #fff8e6;
  border-bottom: 4px solid #3d6b2b; box-shadow: 0 3px 0 #2c4f1f;
}
:root[data-theme="cottage"] header .muted { color: #e6f4d8; }
:root[data-theme="cottage"] #room-title, :root[data-theme="cottage"] h1 { font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,.15); }
:root[data-theme="cottage"] h1 { color: #4f8a3a; }
:root[data-theme="cottage"] #controls { background: #6b4423; border-top: 4px solid #4a2e17; }
/* Knöpfe wie kleine Holzschilder mit Creme-Fläche */
:root[data-theme="cottage"] button {
  background: #fbf1d9; color: #4a3222; border: 3px solid #a0662f; font-weight: bold;
  box-shadow: inset 0 -3px 0 rgba(160, 102, 47, .25), 0 2px 0 #4a2e17;
}
:root[data-theme="cottage"] button:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(160, 102, 47, .25); }
:root[data-theme="cottage"] .toggle.active, :root[data-theme="cottage"] button.primary,
:root[data-theme="cottage"] #board-tools button.active { background: #6aa84f; color: #fff; border-color: #3d6b2b; }
:root[data-theme="cottage"] .toggle.on { background: #e3f0c8; color: #3d6b2b; border-color: #6aa84f; }
:root[data-theme="cottage"] .toggle.off, :root[data-theme="cottage"] button.danger { background: #f6d6c8; color: #9a3a2a; border-color: #c0504d; }
:root[data-theme="cottage"] .card, :root[data-theme="cottage"] #side {
  border: 5px solid #a0662f; box-shadow: inset 0 0 0 3px #e2c48e, 0 6px 0 #4a2e17;
}
:root[data-theme="cottage"] .card { border-radius: 16px; }
:root[data-theme="cottage"] .tile { border: 5px solid #a0662f; box-shadow: 0 4px 0 #4a2e17; }
:root[data-theme="cottage"] #board-tools .tool-group { background: #fbf1d9; border: 3px solid #a0662f; }
:root[data-theme="cottage"] #board-tools button { border: none; box-shadow: none; }
:root[data-theme="cottage"] .surface { border: 5px solid #a0662f; }
:root[data-theme="cottage"] .msg { background: #fffaf0; border: 2px solid #e2c48e; }
:root[data-theme="cottage"] .status.warn { color: #8a4b00; }
:root[data-theme="cottage"] .status.ok { color: #3d6b2b; }
:root[data-theme="cottage"] #banner { background: #fff3cf; color: #5a3a12; border-bottom: 3px solid #a0662f; }

/* ---------- Pixel-Retro: alte Handheld-Konsole, 4 Grüntöne, Pixelkanten ---------- */
:root[data-theme="pixel"] {
  --bg: #306230; --panel: #9bbc0f; --panel-2: #8bac0f; --text: #0f380f; --muted: #306230;
  --accent: #0f380f; --on-accent: #9bbc0f; --ok: #306230; --danger: #8b2c1c;
  --border: #0f380f; --border-hover: #0f380f; --surface: #306230; --tile-bg: #0f380f;
  --radius: 0; --btn-radius: 0; --ico-stroke: 2.5;
  --font: "Lucida Console", "Courier New", Consolas, monospace; --title-font: var(--font);
  --bg-image: repeating-conic-gradient(rgba(15, 56, 15, .25) 0 25%, transparent 0 50%);
}
:root[data-theme="pixel"] body { background-size: 8px 8px; font-weight: bold; }
:root[data-theme="pixel"] button, :root[data-theme="pixel"] input, :root[data-theme="pixel"] select { font-weight: bold; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
/* Pixel-Symbole: eckige Linienenden, keine Kantenglättung */
:root[data-theme="pixel"] .ico svg, :root[data-theme="pixel"] [data-icon] svg {
  shape-rendering: crispEdges; stroke-linecap: square; stroke-linejoin: miter;
}
/* Pixel-Rahmen: Ecken fehlen (wie bei alten Spielegrafiken) */
:root[data-theme="pixel"] button, :root[data-theme="pixel"] .tile, :root[data-theme="pixel"] .surface,
:root[data-theme="pixel"] #board-tools .tool-group, :root[data-theme="pixel"] input, :root[data-theme="pixel"] .share-btn {
  border: none;
  box-shadow: 0 -3px 0 0 #0f380f, 0 3px 0 0 #0f380f, -3px 0 0 0 #0f380f, 3px 0 0 0 #0f380f;
  margin: 3px;
}
:root[data-theme="pixel"] #board-tools button { box-shadow: none; margin: 0; }
:root[data-theme="pixel"] button { background: #9bbc0f; color: #0f380f; }
:root[data-theme="pixel"] .toggle.active, :root[data-theme="pixel"] button.primary,
:root[data-theme="pixel"] #board-tools button.active { background: #0f380f; color: #9bbc0f; }
:root[data-theme="pixel"] .toggle.on { background: #8bac0f; color: #0f380f; }
:root[data-theme="pixel"] .toggle.off, :root[data-theme="pixel"] button.danger { background: #306230; color: #9bbc0f; }
:root[data-theme="pixel"] input { background: #c4d65b; color: #0f380f; }
/* Textkästen wie in alten Rollenspielen: heller Kasten mit doppeltem dunklem Rahmen */
:root[data-theme="pixel"] .card, :root[data-theme="pixel"] #side, :root[data-theme="pixel"] .theme-menu, :root[data-theme="pixel"] .popover {
  background: #c4d65b; border: 4px solid #0f380f; outline: 4px solid #9bbc0f; outline-offset: -10px;
  box-shadow: 6px 6px 0 #0f380f; border-radius: 0;
}
:root[data-theme="pixel"] .card { padding: 30px; }
:root[data-theme="pixel"] h1, :root[data-theme="pixel"] #room-title { text-transform: uppercase; letter-spacing: .08em; }
:root[data-theme="pixel"] h1 { font-size: 20px; }
:root[data-theme="pixel"] h1::before { content: '▶ '; }
:root[data-theme="pixel"] header { background: #0f380f; color: #9bbc0f; }
:root[data-theme="pixel"] header .muted { color: #8bac0f; }
:root[data-theme="pixel"] #controls { background: #0f380f; }
:root[data-theme="pixel"] .tile .label { background: #0f380f; color: #9bbc0f; border-radius: 0; }
:root[data-theme="pixel"] .msg { background: #9bbc0f; border: 2px solid #0f380f; border-radius: 0; }
:root[data-theme="pixel"] .status, :root[data-theme="pixel"] .status.warn, :root[data-theme="pixel"] .status.ok { color: #0f380f; background: #8bac0f; border-radius: 0; }
:root[data-theme="pixel"] #banner { background: #8bac0f; color: #0f380f; border-bottom: 4px solid #0f380f; }
:root[data-theme="pixel"] .badge { border-radius: 0; background: #0f380f; color: #9bbc0f; }

/* ---------- Retro-Windows: Petrol-Desktop, graue 3D-Knöpfe, blaue Titelleiste ---------- */
:root[data-theme="retro"] {
  --bg: #008080; --panel: #c0c0c0; --panel-2: #d4d0c8; --text: #000000; --muted: #404040;
  --accent: #000080; --on-accent: #ffffff; --ok: #008000; --danger: #a00000;
  --border: #808080; --border-hover: #000000; --surface: #808080; --tile-bg: #000000;
  --radius: 0; --btn-radius: 0; --ico-stroke: 2.2;
  --font: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Arial, sans-serif; --title-font: var(--font);
}
/* 3D-Rahmen wie bei Windows 95: oben/links hell, unten/rechts dunkel */
:root[data-theme="retro"] button, :root[data-theme="retro"] .share-btn {
  border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
  background: #c0c0c0; color: #000; font-size: 13px;
}
:root[data-theme="retro"] button:active, :root[data-theme="retro"] .toggle.active,
:root[data-theme="retro"] #board-tools button.active, :root[data-theme="retro"] .theme-menu button.active {
  border-color: #404040 #ffffff #ffffff #404040; box-shadow: inset 1px 1px #808080; background: #d4d0c8; color: #000;
}
:root[data-theme="retro"] button.primary { background: #c0c0c0; color: #000; font-weight: bold; outline: 1px solid #000; }
:root[data-theme="retro"] .toggle.on { background: #c0c0c0; color: #006000; }
:root[data-theme="retro"] .toggle.off, :root[data-theme="retro"] button.danger { background: #c0c0c0; color: #a00000; }
:root[data-theme="retro"] .badge { border-radius: 0; }
:root[data-theme="retro"] input, :root[data-theme="retro"] select {
  background: #fff; color: #000; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; border-radius: 0;
}
/* Fenster mit blauer Titelleiste */
:root[data-theme="retro"] header {
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 6px 10px;
}
:root[data-theme="retro"] header .muted { color: #dfe8ff; }
:root[data-theme="retro"] #room-title { font-weight: bold; }
:root[data-theme="retro"] .card {
  padding: 0 0 18px; gap: 12px; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: 1px 1px 0 #000;
}
:root[data-theme="retro"] .card > *:not(h1) { margin-left: 18px; margin-right: 18px; }
:root[data-theme="retro"] .card h1 {
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-size: 15px; padding: 6px 10px; margin: 0;
}
:root[data-theme="retro"] #side { border-left: 2px solid #ffffff; }
:root[data-theme="retro"] #chat-log, :root[data-theme="retro"] #people {
  background: #fff; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; padding: 4px;
}
:root[data-theme="retro"] .msg { background: #ffffe1; border: 1px solid #808080; }
/* Taskleiste unten */
:root[data-theme="retro"] #controls { background: #c0c0c0; border-top: 2px solid #ffffff; padding: 4px 8px; }
:root[data-theme="retro"] .tile { border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; }
:root[data-theme="retro"] #board-tools .tool-group { background: #c0c0c0; border: 1px solid #808080; border-radius: 0; }
:root[data-theme="retro"] #board-tools button { border-width: 1px; }
:root[data-theme="retro"] .surface { border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; }
:root[data-theme="retro"] #banner { background: #ffffe1; color: #000; border-bottom: 1px solid #000; }
:root[data-theme="retro"] .theme-menu, :root[data-theme="retro"] .popover { border-radius: 0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; }

/* ---------- Weltall: Sterne, Nebel, Leuchtblau ---------- */
:root[data-theme="weltall"] {
  --bg: #02030a; --panel: rgba(10, 14, 34, .82); --panel-2: #141b3c; --text: #e6ecff; --muted: #8e9ac4;
  --accent: #38bdf8; --on-accent: #02030a; --ok: #22c55e; --danger: #f43f5e;
  --border: #2b3a6b; --border-hover: #7dd3fc; --surface: #070b1d; --tile-bg: #01020a;
  --radius: 14px; --btn-radius: 12px; --glow: drop-shadow(0 0 2px #7dd3fc);
  --bg-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #cfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 55% 30%, #fff, transparent),
    radial-gradient(1px 1px at 75% 85%, #fff, transparent),
    radial-gradient(1px 1px at 90% 45%, #bde0ff, transparent),
    radial-gradient(1px 1px at 45% 50%, #fff, transparent),
    /* kleine, ferne Galaxien (leuchtender Kern + flache Scheibe) */
    radial-gradient(ellipse 34px 9px at 36% 18%, rgba(255, 244, 214, .85), rgba(196, 181, 253, .35) 45%, transparent 75%),
    radial-gradient(ellipse 22px 7px at 62% 74%, rgba(255, 255, 255, .8), rgba(125, 211, 252, .3) 45%, transparent 75%),
    radial-gradient(ellipse 14px 5px at 92% 88%, rgba(255, 228, 230, .8), rgba(244, 114, 182, .3) 45%, transparent 75%),
    radial-gradient(ellipse 18px 6px at 8% 42%, rgba(255, 255, 255, .7), rgba(165, 180, 252, .3) 45%, transparent 75%),
    radial-gradient(ellipse 26px 8px at 52% 6%, rgba(254, 240, 138, .7), rgba(251, 146, 60, .25) 45%, transparent 75%),
    /* Milchstraßen-Band quer über den Himmel */
    linear-gradient(115deg, transparent 32%, rgba(165, 180, 252, .06) 44%, rgba(255, 255, 255, .1) 50%, rgba(196, 181, 253, .06) 56%, transparent 68%),
    /* bunte Nebel */
    radial-gradient(ellipse at 80% 20%, rgba(56, 189, 248, .18), transparent 45%),
    radial-gradient(ellipse at 15% 85%, rgba(168, 85, 247, .2), transparent 45%),
    radial-gradient(ellipse at 55% 55%, rgba(244, 114, 182, .08), transparent 40%);
}
:root[data-theme="weltall"] header, :root[data-theme="weltall"] #controls, :root[data-theme="weltall"] #side {
  background: rgba(6, 9, 24, .75); backdrop-filter: blur(6px);
}
:root[data-theme="weltall"] .toggle.on, :root[data-theme="weltall"] .toggle.off,
:root[data-theme="weltall"] button.danger, :root[data-theme="weltall"] .badge { color: #fff; }
:root[data-theme="weltall"] h1, :root[data-theme="weltall"] #room-title { letter-spacing: .12em; text-transform: uppercase; color: #bae6fd; }
:root[data-theme="weltall"] .tile { border: 1px solid #2b3a6b; box-shadow: 0 0 16px rgba(56, 189, 248, .25); }
:root[data-theme="weltall"] .card { border: 1px solid #2b3a6b; box-shadow: 0 0 40px rgba(56, 189, 248, .2); }
:root[data-theme="weltall"] .surface { background: radial-gradient(ellipse at 50% 40%, #0d1433, #02030a); }

/* =====================================================================
   Kleine Details je Design: Rahmen ums eigene Bild ("Du"-Schild),
   Verzierungen an den Videos, Zeichen vor dem Raumtitel, sanfte Animationen.
   ===================================================================== */

/* Feine Scrollbalken in Designfarben */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* Verzierungen liegen über Video und Initialen, sind aber nicht anklickbar */
.tile::before, .tile::after { pointer-events: none; z-index: 2; position: absolute; }

/* "Du"-Schild am eigenen Bild – Text, Farben und Form pro Design */
:root {
  --self-tag: "Du"; --self-bg: var(--accent); --self-fg: var(--on-accent);
  --self-radius: 999px; --self-ring: 0 0 0 2px var(--accent);
}
/* Vorrang vor den allgemeinen Videorahmen der Designs */
:root[data-theme] .tile.local { box-shadow: var(--self-ring); }
.tile.local::after {
  content: var(--self-tag); top: 8px; right: 8px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  background: var(--self-bg); color: var(--self-fg); border-radius: var(--self-radius);
}
.tile .label { z-index: 3; }
.tile .avatar { z-index: 1; }

@keyframes lw-twinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes lw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes lw-glow { 0%, 100% { box-shadow: 0 0 0 2px #ff2a6d, 0 0 14px #ff2a6d; } 50% { box-shadow: 0 0 0 2px #05d9e8, 0 0 22px #05d9e8; } }
@keyframes lw-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* --- Standard: klar, mit Akzentring --- */


/* --- Clean: hauchdünn, schwarz --- */
:root[data-theme="clean"] { --self-tag: "Du"; --self-bg: #fff; --self-fg: #18181b; --self-ring: 0 0 0 2px #18181b; }
:root[data-theme="clean"] .tile.local::after { border: 1px solid #e4e4e7; font-weight: 500; }
:root[data-theme="clean"] .tile .label { background: rgba(255,255,255,.92); color: #18181b; border-radius: 999px; padding: 3px 10px; }

/* --- Dark Academia: Goldrahmen, Zierblatt, Namensplakette --- */
:root[data-theme="academia"] { --self-tag: "❦ Du"; --self-bg: #e9dfc9; --self-fg: #3a2a1f; --self-radius: 2px; --self-ring: 0 0 0 2px #c9b48a, 0 0 0 5px #1b1613, 0 0 0 6px #c9b48a; }
:root[data-theme="academia"] .tile.local::after { font-style: italic; font-weight: normal; font-size: 13px; }
:root[data-theme="academia"] .tile::before {
  content: "❧"; top: 4px; left: 10px; color: #c9b48a; font-size: 24px; text-shadow: 0 1px 2px #000;
}
:root[data-theme="academia"] .tile .label {
  background: #e9dfc9; color: #3a2a1f; border-radius: 2px; font-style: italic; border: 1px solid #c9b48a;
}
:root[data-theme="academia"] #room-title::before { content: "❧ "; }
:root[data-theme="academia"] .card h1::after { content: ""; display: block; width: 70px; height: 1px; margin-top: 10px; background: linear-gradient(90deg, #c9b48a, transparent); }

/* --- Pastell: Blümchen, doppelter Bonbonring, Herz-Schild --- */
:root[data-theme="pastell"] { --self-tag: "♡ du"; --self-bg: #fde2e8; --self-fg: #c24d63; --self-ring: 0 0 0 4px #f9c6d8, 0 0 0 8px #d9c8f5, 0 10px 24px rgba(155, 127, 212, .3); }
:root[data-theme="pastell"] .tile.local { border-color: #fff; }
:root[data-theme="pastell"] .tile::before {
  content: "✿"; top: 6px; left: 10px; font-size: 22px; color: #f2a7c3; animation: lw-float 3s ease-in-out infinite;
}
:root[data-theme="pastell"] .tile:nth-child(3n+2)::before { content: "❀"; color: #7fd1ae; }
:root[data-theme="pastell"] .tile:nth-child(3n)::before { content: "✾"; color: #b9a2ea; }
:root[data-theme="pastell"] .tile .label { background: rgba(255,255,255,.88); color: #6d6283; border-radius: 999px; padding: 3px 10px; }
:root[data-theme="pastell"] #room-title::before { content: "✿ "; color: #f2a7c3; }
:root[data-theme="pastell"] .msg { border-radius: 16px 16px 16px 4px; }
:root[data-theme="pastell"] .card h1::after { content: " ♡"; color: #f2a7c3; }

/* --- Cottage: Holzschild, Sprösslinge, Blümchen --- */
:root[data-theme="cottage"] { --self-tag: "🏡 Du"; --self-bg: #a0662f; --self-fg: #fff8e6; --self-radius: 6px; --self-ring: 0 0 0 4px #6aa84f, 0 4px 0 4px #3d6b2b; }
:root[data-theme="cottage"] .tile.local::after { border: 2px solid #6b3f1a; box-shadow: 0 2px 0 #4a2e17; }
:root[data-theme="cottage"] .tile::before { content: "🌱"; top: 6px; left: 8px; font-size: 20px; animation: lw-float 4s ease-in-out infinite; }
:root[data-theme="cottage"] .tile:nth-child(2n)::before { content: "🌻"; }
:root[data-theme="cottage"] .tile:nth-child(3n)::before { content: "🍄"; }
:root[data-theme="cottage"] .tile .label { background: #fbf1d9; color: #4a3222; border: 2px solid #a0662f; border-radius: 6px; font-weight: bold; }
:root[data-theme="cottage"] #room-title::before { content: "🌾 "; }
:root[data-theme="cottage"] .card h1::before { content: "🌻 "; }
:root[data-theme="cottage"] .msg { border-radius: 10px; }

/* --- Pixel-Retro: Herzen, blinkender Pfeil, Textkasten-Schilder --- */
:root[data-theme="pixel"] { --self-tag: "▶ DU"; --self-bg: #0f380f; --self-fg: #9bbc0f; --self-radius: 0; --self-ring: 0 -3px 0 0 #0f380f, 0 3px 0 0 #0f380f, -3px 0 0 0 #0f380f, 3px 0 0 0 #0f380f, 0 0 0 6px #9bbc0f; }
:root[data-theme="pixel"] .tile::before {
  content: "♥♥♥"; top: 6px; left: 8px; padding: 1px 4px; font-size: 12px; letter-spacing: 2px;
  color: #0f380f; background: #9bbc0f; box-shadow: 0 0 0 2px #0f380f;
}
:root[data-theme="pixel"] .tile.local::after { animation: lw-blink 1s steps(1) infinite; }
:root[data-theme="pixel"] .tile .label { box-shadow: 0 0 0 2px #9bbc0f; }
:root[data-theme="pixel"] #room-title::after { content: "_"; animation: lw-blink 1s steps(1) infinite; }
:root[data-theme="pixel"] .msg > div:last-child::before { content: "▶ "; }

/* --- Cyberpunk: Zielerfassungs-Ecken, Scanlines, Glitch-Titel --- */
:root[data-theme="cyber"] { --self-tag: "[ DU ]"; --self-bg: #ff2a6d; --self-fg: #0a0614; --self-radius: 0; --self-ring: 0 0 0 2px #ff2a6d, 0 0 14px #ff2a6d; }
:root[data-theme="cyber"] .tile.local { animation: lw-glow 3s ease-in-out infinite; }
:root[data-theme="cyber"] .tile::before {
  content: ""; inset: 6px;
  background:
    linear-gradient(#05d9e8, #05d9e8) top left / 16px 2px no-repeat, linear-gradient(#05d9e8, #05d9e8) top left / 2px 16px no-repeat,
    linear-gradient(#05d9e8, #05d9e8) top right / 16px 2px no-repeat, linear-gradient(#05d9e8, #05d9e8) top right / 2px 16px no-repeat,
    linear-gradient(#05d9e8, #05d9e8) bottom left / 16px 2px no-repeat, linear-gradient(#05d9e8, #05d9e8) bottom left / 2px 16px no-repeat,
    linear-gradient(#05d9e8, #05d9e8) bottom right / 16px 2px no-repeat, linear-gradient(#05d9e8, #05d9e8) bottom right / 2px 16px no-repeat,
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
:root[data-theme="cyber"] .tile .label { background: rgba(10, 6, 20, .85); border: 1px solid #05d9e8; border-radius: 0; color: #05d9e8; }
:root[data-theme="cyber"] #room-title { text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8, 0 0 8px #05d9e8; }
:root[data-theme="cyber"] #room-title::before { content: "// "; color: #ff2a6d; }
:root[data-theme="cyber"] .card h1::after { content: "_"; animation: lw-blink 1s steps(1) infinite; color: #ff2a6d; }
:root[data-theme="cyber"] .msg { border-left: 2px solid #ff2a6d; border-radius: 0; }


/* --- Mittelalter: Lilie, Wimpel-Namensband, Siegel --- */
:root[data-theme="mittelalter"] { --self-tag: "⚜ Ihr ⚜"; --self-bg: #8b1e1e; --self-fg: #f1e4c3; --self-radius: 2px; --self-ring: 0 0 0 3px #b8892f, 0 0 0 6px #3e2914; }
:root[data-theme="mittelalter"] .tile.local::after { font-family: var(--font); border: 1px solid #b8892f; }
:root[data-theme="mittelalter"] .tile::before {
  content: "⚜"; top: 4px; left: 50%; transform: translateX(-50%); font-size: 26px;
  color: #d4a63a; text-shadow: 0 1px 0 #3e2914, 0 0 6px rgba(0,0,0,.6);
}
:root[data-theme="mittelalter"] .tile .label {
  background: #8b1e1e; color: #f1e4c3; border-radius: 0; padding: 3px 16px; font-family: var(--font);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}
:root[data-theme="mittelalter"] #room-title::before { content: "⚜ "; color: #d4a63a; }
:root[data-theme="mittelalter"] .card h1::after { content: " ⚔"; font-family: Georgia, serif; font-size: 22px; color: #8b6b3e; }
:root[data-theme="mittelalter"] .msg { background: #f6ecd2; border: 1px solid #c9ad7a; border-radius: 2px; }

/* --- Weltall: Bullauge, Satellit, funkelnde Sterne --- */
:root[data-theme="weltall"] { --self-tag: "🛰 Du"; --self-bg: rgba(56, 189, 248, .9); --self-fg: #02030a; --self-ring: 0 0 0 3px #38bdf8, 0 0 0 7px rgba(56, 189, 248, .25), 0 0 26px rgba(56, 189, 248, .45); }
:root[data-theme="weltall"] .tile.local { border-radius: 26px; }
:root[data-theme="weltall"] .tile::before { content: "🪐"; top: 6px; left: 10px; font-size: 20px; animation: lw-float 5s ease-in-out infinite; }
:root[data-theme="weltall"] .tile:nth-child(2n)::before { content: "☄"; color: #bae6fd; }
:root[data-theme="weltall"] .tile .label { background: rgba(6, 9, 24, .8); border: 1px solid #2b3a6b; border-radius: 999px; padding: 3px 10px; }
:root[data-theme="weltall"] #room-title::before { content: "✦ "; color: #7dd3fc; }
/* zusätzliche, langsam funkelnde Sternenschicht */
:root[data-theme="weltall"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 22% 35%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 84% 62%, #fff, transparent), radial-gradient(1px 1px at 38% 90%, #fff, transparent),
    radial-gradient(1px 1px at 5% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 40%, #fde68a, transparent),
    radial-gradient(1px 1px at 15% 15%, #fff, transparent), radial-gradient(1px 1px at 48% 62%, #bae6fd, transparent);
  animation: lw-shine 4s ease-in-out infinite;
}
@keyframes lw-shine { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes lw-spin { from { transform: rotateX(64deg) rotate(0deg); } to { transform: rotateX(64deg) rotate(360deg); } }

/* Große Spiralgalaxien, die sich ganz langsam drehen (schräg von der Seite gesehen) */
:root[data-theme="weltall"] body::after,
:root[data-theme="weltall"] #app::before,
:root[data-theme="weltall"] #join::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
  width: min(460px, 75vw); aspect-ratio: 1;
  background:
    radial-gradient(circle, #fff 0 1.5%, rgba(254, 243, 199, .95) 4%, rgba(253, 224, 171, .45) 12%, transparent 30%),
    radial-gradient(circle, rgba(147, 197, 253, .35) 0 18%, rgba(167, 139, 250, .16) 40%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgba(186, 230, 253, .4) 0deg, rgba(186, 230, 253, .03) 55deg, rgba(196, 181, 253, .35) 95deg, rgba(196, 181, 253, .03) 145deg, rgba(186, 230, 253, .4) 180deg);
  -webkit-mask: radial-gradient(circle, #000 0 16%, rgba(0, 0, 0, .55) 34%, transparent 64%);
  mask: radial-gradient(circle, #000 0 16%, rgba(0, 0, 0, .55) 34%, transparent 64%);
  filter: blur(5px);
  animation: lw-spin 300s linear infinite;
}
/* oben rechts: blau-violett */
:root[data-theme="weltall"] body::after { top: -6%; right: -4%; }
/* unten links: rosa-violett, kleiner, dreht andersherum */
:root[data-theme="weltall"] #app::before,
:root[data-theme="weltall"] #join::before {
  bottom: -10%; left: -6%; width: min(340px, 60vw); opacity: .85;
  background:
    radial-gradient(circle, #fff 0 1.5%, rgba(255, 228, 230, .95) 4%, rgba(251, 207, 232, .45) 12%, transparent 30%),
    radial-gradient(circle, rgba(244, 114, 182, .3) 0 18%, rgba(167, 139, 250, .16) 40%, transparent 62%),
    repeating-conic-gradient(from 20deg, rgba(251, 207, 232, .4) 0deg, rgba(251, 207, 232, .03) 55deg, rgba(196, 181, 253, .35) 95deg, rgba(196, 181, 253, .03) 145deg, rgba(251, 207, 232, .4) 180deg);
  animation-direction: reverse; animation-duration: 240s;
}

/* --- Retro-Windows: jedes Video ist ein kleines Fenster mit Titelleiste --- */
:root[data-theme="retro"] { --self-ring: none; }
:root[data-theme="retro"] .tile { padding-top: 20px; background: #c0c0c0; }
:root[data-theme="retro"] .tile video { height: calc(100% - 0px); }
:root[data-theme="retro"] .tile::before {
  content: "Video.exe"; top: 0; left: 0; right: 0; height: 20px; padding-left: 6px;
  background: linear-gradient(90deg, #808080, #b5b5b5); color: #fff; font: bold 11px/20px Tahoma, sans-serif;
}
:root[data-theme="retro"] .tile.local::before { content: "Webcam.exe – Du"; background: linear-gradient(90deg, #000080, #1084d0); }
:root[data-theme="retro"] .tile::after, :root[data-theme="retro"] .tile.local::after {
  content: "✕"; top: 3px; right: 3px; width: 16px; height: 14px; padding: 0; border-radius: 0;
  background: #c0c0c0; color: #000; font: bold 9px/12px Tahoma, sans-serif; text-align: center;
  border: 1px solid; border-color: #fff #404040 #404040 #fff;
}
:root[data-theme="retro"] .tile .avatar { top: 20px; }
:root[data-theme="retro"] .tile .label { background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 0; }
:root[data-theme="retro"] #room-title::before { content: "🖥 "; }

/* =====================================================================
   Dunkel: das Gegenstück zu Clean – reduziert, tiefes Schwarz, weißer Akzent
   ===================================================================== */
.sw-dunkel { background: linear-gradient(135deg, #0a0a0a 60%, #fafafa 60%); }
:root[data-theme="dunkel"] {
  --bg: #0a0a0a; --panel: #121212; --panel-2: #1c1c1c; --text: #f5f5f5; --muted: #8a8a8a;
  --accent: #fafafa; --on-accent: #0a0a0a; --ok: #fafafa; --danger: #f87171;
  --border: #262626; --border-hover: #525252; --surface: #161616; --tile-bg: #000000;
  --radius: 12px; --btn-radius: 8px; --ico-stroke: 1.6;
  --font: "Segoe UI Variable", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --self-tag: "Du"; --self-bg: #fafafa; --self-fg: #0a0a0a; --self-ring: 0 0 0 2px #fafafa;
}
:root[data-theme="dunkel"] header, :root[data-theme="dunkel"] #controls { border-color: var(--border); border-style: solid; border-width: 0; }
:root[data-theme="dunkel"] header { border-bottom-width: 1px; }
:root[data-theme="dunkel"] #controls { border-top-width: 1px; }
:root[data-theme="dunkel"] #side { border-left: 1px solid var(--border); }
:root[data-theme="dunkel"] button { background: #121212; }
:root[data-theme="dunkel"] button:hover { background: #1c1c1c; }
:root[data-theme="dunkel"] .toggle.on { background: #121212; color: var(--text); border-color: var(--border); }
:root[data-theme="dunkel"] .toggle.off, :root[data-theme="dunkel"] button.danger { background: #1f1111; color: #f87171; border-color: #3f1d1d; }
:root[data-theme="dunkel"] .toggle.active, :root[data-theme="dunkel"] button.primary,
:root[data-theme="dunkel"] #board-tools button.active { background: #fafafa; color: #0a0a0a; border-color: #fafafa; }
:root[data-theme="dunkel"] .card { border: 1px solid var(--border); }
:root[data-theme="dunkel"] h1 { font-weight: 600; letter-spacing: -.02em; }
:root[data-theme="dunkel"] #board-tools .tool-group { background: #121212; border: 1px solid var(--border); }
:root[data-theme="dunkel"] .surface { border: 1px solid var(--border); }
:root[data-theme="dunkel"] .tile .label { background: rgba(10,10,10,.85); border-radius: 999px; padding: 3px 10px; }
:root[data-theme="dunkel"] #banner { background: #1c1917; color: #fde68a; border-bottom: 1px solid #292524; }

/* =====================================================================
   Kleine animierte Szene unter den Videos
   Nur am PC, im Präsentationsmodus und bei höchstens 3 Personen
   (Einzelunterricht): dann ist in der Videospalte unten Platz.
   ===================================================================== */
#stage { position: relative; }
#deco { display: none; }
@media (min-width: 801px) {
  #stage.board-open.few #deco {
    display: block; position: absolute; right: 12px; bottom: 12px; z-index: 0;
    width: 200px; height: 150px; overflow: hidden; pointer-events: none;
    border-radius: var(--radius);
  }
  #stage.board-open #videos { position: relative; z-index: 1; }
}
#deco span { position: absolute; font-size: 28px; line-height: 1; display: block; }
#deco::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; }

@keyframes deco-wiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes deco-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes deco-walk {
  0% { transform: translateX(0) scaleX(-1); } 48% { transform: translateX(120px) scaleX(-1); }
  50% { transform: translateX(120px) scaleX(1); } 98% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(0) scaleX(-1); }
}
@keyframes deco-hop {
  0%, 100% { transform: translate(0, 0); } 12% { transform: translate(15px, -22px); } 25% { transform: translate(30px, 0); }
  37% { transform: translate(45px, -22px); } 50% { transform: translate(60px, 0); } 62% { transform: translate(45px, -22px) scaleX(-1); }
  75% { transform: translate(30px, 0) scaleX(-1); } 87% { transform: translate(15px, -22px) scaleX(-1); }
}
@keyframes deco-drift { from { transform: translateX(0); } to { transform: translateX(110px); } }
@keyframes deco-fly { from { transform: translateX(240px); } to { transform: translateX(-80px); } }
@keyframes deco-fly-back { from { transform: translateX(-80px) scaleX(-1); } to { transform: translateX(240px) scaleX(-1); } }
@keyframes deco-flicker {
  0%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: .75; transform: scale(.95); }
  40% { opacity: 1; transform: scale(1.04); } 60% { opacity: .85; transform: scale(.98); } 80% { opacity: 1; transform: scale(1.02); }
}
@keyframes deco-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes deco-spin { to { transform: rotate(360deg); } }
@keyframes deco-grow { 0% { transform: scale(.3); opacity: .4; } 60%, 100% { transform: scale(1); opacity: 1; } }
@keyframes deco-rocket {
  0% { transform: translate(0, 0); } 45% { transform: translate(120px, -80px); }
  50% { transform: translate(120px, -80px) rotate(180deg); } 95% { transform: translate(0, 0) rotate(180deg); } 100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes deco-bx { from { left: 4px; } to { left: calc(100% - 92px); } }
@keyframes deco-by { from { top: 4px; } to { top: calc(100% - 22px); } }
@keyframes deco-steps-walk { from { transform: translateX(0); } to { transform: translateX(130px); } }
@keyframes deco-wave { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-12deg); } }

/* --- Standard: Lernecke mit Büchern, kritzelndem Stift und Ideen-Glühbirne --- */
:root[data-theme="standard"] #deco .d1::before { content: "📚"; }
:root[data-theme="standard"] #deco .d1 { left: 18px; bottom: 10px; }
:root[data-theme="standard"] #deco .d2::before { content: "✏️"; }
:root[data-theme="standard"] #deco .d2 { left: 72px; bottom: 14px; animation: deco-wiggle 1.2s ease-in-out infinite; transform-origin: bottom left; }
:root[data-theme="standard"] #deco .d3::before { content: "☕"; }
:root[data-theme="standard"] #deco .d3 { left: 130px; bottom: 10px; }
:root[data-theme="standard"] #deco .d4::before { content: "💡"; }
:root[data-theme="standard"] #deco .d4 { left: 84px; top: 14px; animation: deco-pulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px #fde68a); }

/* --- Clean: eine kleine Pflanze, die sanft schwankt --- */
:root[data-theme="clean"] #deco::before, :root[data-theme="dunkel"] #deco::before { height: 1px; background: var(--border); bottom: 10px; left: 30px; right: 30px; }
:root[data-theme="clean"] #deco .d1::before, :root[data-theme="dunkel"] #deco .d1::before { content: "🪴"; }
:root[data-theme="clean"] #deco .d1, :root[data-theme="dunkel"] #deco .d1 { left: 84px; bottom: 11px; font-size: 34px; transform-origin: bottom center; animation: deco-sway 4s ease-in-out infinite; }
:root[data-theme="dunkel"] #deco .d2::before { content: "🌙"; }
:root[data-theme="dunkel"] #deco .d2 { right: 30px; top: 18px; font-size: 20px; animation: lw-float 5s ease-in-out infinite; }

/* --- Dark Academia: Bücherstapel, flackernde Kerze, Feder, Eule --- */
:root[data-theme="academia"] #deco .d1::before { content: "📚"; }
:root[data-theme="academia"] #deco .d1 { left: 14px; bottom: 10px; font-size: 32px; }
:root[data-theme="academia"] #deco .d2::before { content: "🕯️"; }
:root[data-theme="academia"] #deco .d2 { left: 66px; bottom: 10px; animation: deco-flicker 1.8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(253, 186, 116, .9)); }
:root[data-theme="academia"] #deco .d3::before { content: "🪶"; }
:root[data-theme="academia"] #deco .d3 { left: 110px; bottom: 26px; animation: lw-float 3.5s ease-in-out infinite; }
:root[data-theme="academia"] #deco .d4::before { content: "🦉"; }
:root[data-theme="academia"] #deco .d4 { right: 14px; top: 12px; animation: deco-sway 3s ease-in-out infinite; transform-origin: bottom center; }

/* --- Pastell: Regenbogen, ziehende Wolke, hüpfender Hase, Blüte --- */
:root[data-theme="pastell"] #deco .d1::before { content: "🌈"; }
:root[data-theme="pastell"] #deco .d1 { right: 16px; top: 10px; font-size: 32px; animation: lw-float 4s ease-in-out infinite; }
:root[data-theme="pastell"] #deco .d2::before { content: "☁️"; }
:root[data-theme="pastell"] #deco .d2 { left: 6px; top: 14px; animation: deco-drift 9s ease-in-out infinite alternate; opacity: .9; }
:root[data-theme="pastell"] #deco .d3::before { content: "🐰"; }
:root[data-theme="pastell"] #deco .d3 { left: 30px; bottom: 8px; animation: deco-hop 5s ease-in-out infinite; }
:root[data-theme="pastell"] #deco .d4::before { content: "🌸"; }
:root[data-theme="pastell"] #deco .d4 { right: 22px; bottom: 10px; font-size: 22px; animation: deco-spin 12s linear infinite; }

/* --- Cottage: Wiese, laufendes Huhn, wachsender Spross, Sonnenblume, Sonne --- */
:root[data-theme="cottage"] #deco::before { height: 22px; background: linear-gradient(180deg, #6aa84f 0 40%, #7d4f24 40%); border-top: 3px solid #4f8a3a; }
:root[data-theme="cottage"] #deco .d1::before { content: "🐔"; }
:root[data-theme="cottage"] #deco .d1 { left: 10px; bottom: 18px; animation: deco-walk 10s linear infinite; }
:root[data-theme="cottage"] #deco .d2::before { content: "🌱"; }
:root[data-theme="cottage"] #deco .d2 { left: 96px; bottom: 18px; font-size: 22px; transform-origin: bottom center; animation: deco-grow 6s ease-out infinite; }
:root[data-theme="cottage"] #deco .d3::before { content: "🌻"; }
:root[data-theme="cottage"] #deco .d3 { right: 12px; bottom: 18px; font-size: 32px; transform-origin: bottom center; animation: deco-sway 3s ease-in-out infinite; }
:root[data-theme="cottage"] #deco .d4::before { content: "☀️"; }
:root[data-theme="cottage"] #deco .d4 { right: 16px; top: 10px; font-size: 26px; animation: deco-spin 20s linear infinite; }

/* --- Pixel-Retro: laufendes Pixelmonster, Münze, blinkendes "PRESS START" --- */
:root[data-theme="pixel"] #deco::before {
  height: 16px; background: repeating-linear-gradient(90deg, #0f380f 0 8px, #306230 8px 16px); border-top: 4px solid #0f380f;
}
:root[data-theme="pixel"] #deco .d1::before { content: "👾"; }
:root[data-theme="pixel"] #deco .d1 { left: 8px; bottom: 20px; animation: deco-steps-walk 4s steps(8) infinite alternate; }
:root[data-theme="pixel"] #deco .d2::before { content: "PRESS START"; }
:root[data-theme="pixel"] #deco .d2 {
  left: 0; right: 0; top: 24px; text-align: center; font: bold 13px/1 "Lucida Console", monospace; color: #9bbc0f;
  letter-spacing: .1em; animation: lw-blink 1.2s steps(1) infinite;
}
:root[data-theme="pixel"] #deco .d3::before { content: "♥"; }
:root[data-theme="pixel"] #deco .d3 { left: 14px; top: 6px; font-size: 18px; color: #9bbc0f; animation: deco-pulse 1s steps(2) infinite; }
:root[data-theme="pixel"] #deco .d4::before { content: "🪙"; }
:root[data-theme="pixel"] #deco .d4 { right: 18px; bottom: 50px; font-size: 22px; animation: lw-float 1s steps(2) infinite; }

/* --- Cyberpunk: Neon-Skyline mit fliegenden Lichtern und flackerndem Schild --- */
:root[data-theme="cyber"] #deco::before {
  height: 70px;
  background:
    linear-gradient(#1c0f33, #1c0f33) 6px 22px / 26px 48px no-repeat,
    linear-gradient(#24123f, #24123f) 36px 6px / 22px 64px no-repeat,
    linear-gradient(#1c0f33, #1c0f33) 62px 30px / 30px 40px no-repeat,
    linear-gradient(#2a1550, #2a1550) 96px 0 / 18px 70px no-repeat,
    linear-gradient(#1c0f33, #1c0f33) 118px 18px / 34px 52px no-repeat,
    linear-gradient(#24123f, #24123f) 156px 34px / 38px 36px no-repeat,
    repeating-linear-gradient(0deg, rgba(5, 217, 232, .35) 0 2px, transparent 2px 9px) 40px 14px / 14px 50px no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 42, 109, .35) 0 2px, transparent 2px 9px) 122px 26px / 26px 40px no-repeat;
  border-bottom: 2px solid #ff2a6d; box-shadow: 0 0 12px #ff2a6d;
}
:root[data-theme="cyber"] #deco .d1, :root[data-theme="cyber"] #deco .d2 { width: 16px; height: 4px; border-radius: 2px; }
:root[data-theme="cyber"] #deco .d1 { top: 30px; background: #ff2a6d; box-shadow: 0 0 10px #ff2a6d; animation: deco-fly 4s linear infinite; }
:root[data-theme="cyber"] #deco .d2 { top: 52px; background: #05d9e8; box-shadow: 0 0 10px #05d9e8; animation: deco-fly-back 6s linear infinite; }
:root[data-theme="cyber"] #deco .d3::before { content: "OPEN 24/7"; }
:root[data-theme="cyber"] #deco .d3 {
  right: 10px; top: 8px; font: bold 11px/1 "Cascadia Mono", Consolas, monospace; color: #05d9e8;
  text-shadow: 0 0 6px #05d9e8; padding: 3px 5px; border: 1px solid #05d9e8; animation: deco-flicker 2.2s steps(3) infinite;
}
:root[data-theme="cyber"] #deco .d4::before { content: "🐈‍⬛"; }
:root[data-theme="cyber"] #deco .d4 { left: 100px; bottom: 72px; font-size: 18px; animation: deco-sway 3s ease-in-out infinite; }

/* --- Mittelalter: Burg mit wehender Fahne, Pferd, vorbeifliegender Drache --- */
:root[data-theme="mittelalter"] #deco::before { height: 30px; background: radial-gradient(ellipse 140px 30px at 50% 100%, #556b2f 60%, transparent 62%); }
:root[data-theme="mittelalter"] #deco .d1::before { content: "🏰"; }
:root[data-theme="mittelalter"] #deco .d1 { left: 60px; bottom: 12px; font-size: 44px; }
:root[data-theme="mittelalter"] #deco .d2::before { content: "🚩"; }
:root[data-theme="mittelalter"] #deco .d2 { left: 84px; bottom: 58px; font-size: 16px; transform-origin: bottom left; animation: deco-wave 1.4s ease-in-out infinite; }
:root[data-theme="mittelalter"] #deco .d3::before { content: "🐎"; }
:root[data-theme="mittelalter"] #deco .d3 { left: 10px; bottom: 10px; font-size: 24px; animation: lw-float 1.2s ease-in-out infinite; }
:root[data-theme="mittelalter"] #deco .d4::before { content: "🐉"; }
:root[data-theme="mittelalter"] #deco .d4 { top: 6px; font-size: 26px; animation: deco-fly 12s linear infinite; }

/* --- Weltall: Rakete auf Rundflug, Mond, schwebender Astronaut, Ufo --- */
:root[data-theme="weltall"] #deco .d1::before { content: "🚀"; }
:root[data-theme="weltall"] #deco .d1 { left: 14px; bottom: 14px; animation: deco-rocket 8s ease-in-out infinite; }
:root[data-theme="weltall"] #deco .d2::before { content: "🌙"; }
:root[data-theme="weltall"] #deco .d2 { right: 14px; top: 10px; filter: drop-shadow(0 0 8px #fde68a); }
:root[data-theme="weltall"] #deco .d3::before { content: "🧑‍🚀"; }
:root[data-theme="weltall"] #deco .d3 { right: 30px; bottom: 16px; animation: deco-spin 18s linear infinite; }
:root[data-theme="weltall"] #deco .d4::before { content: "🛸"; }
:root[data-theme="weltall"] #deco .d4 { left: 40px; top: 14px; font-size: 22px; animation: deco-drift 5s ease-in-out infinite alternate; }

/* --- Retro-Windows: Bildschirmschoner mit hüpfendem "Lernen.exe" --- */
:root[data-theme="retro"] #deco {
  background: #000; border: 2px solid; border-color: #404040 #ffffff #ffffff #404040; border-radius: 0;
}
:root[data-theme="retro"] #deco .d1::before { content: "Lernen.exe"; }
:root[data-theme="retro"] #deco .d1 {
  font: bold 14px/18px Tahoma, sans-serif; color: #00ff00; width: 88px; text-align: center;
  animation: deco-bx 3.3s linear infinite alternate, deco-by 2.1s linear infinite alternate;
}
:root[data-theme="retro"] #deco .d2::before { content: "⌛"; }
:root[data-theme="retro"] #deco .d2 { right: 8px; bottom: 6px; font-size: 18px; animation: deco-spin 2s steps(4) infinite; }
:root[data-theme="retro"] #deco .d3::before { content: "💾"; }
:root[data-theme="retro"] #deco .d3 { left: 8px; bottom: 6px; font-size: 18px; }

/* =====================================================================
   Chat-Schriften je Design: Namen (Absender) und Nachrichten
   ===================================================================== */
#chat-log .msg .meta { font-family: var(--title-font); }
#chat-log > .meta { font-style: italic; } /* Systemhinweise ("ist beigetreten") */

/* Mittelalter: Absender in Zierschrift, Nachrichten wie handgeschrieben auf Pergament */
:root[data-theme="mittelalter"] #chat-log .msg .meta { font-size: 16px; color: #6b1515; }
:root[data-theme="mittelalter"] #chat-log .msg { font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size: 15px; }
:root[data-theme="mittelalter"] #chat-input { font-family: "Palatino Linotype", Georgia, serif; }

/* Dark Academia: Namen in Kapitälchen, Nachrichten kursiv wie Randnotizen */
:root[data-theme="academia"] #chat-log .msg .meta { font-variant: small-caps; letter-spacing: .06em; color: #c9b48a; font-size: 13px; }
:root[data-theme="academia"] #chat-log .msg > div:last-child { font-style: italic; }

/* Cyberpunk: Terminal-Look mit Prompt vor jeder Nachricht */
:root[data-theme="cyber"] #chat-log .msg .meta { color: #05d9e8; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
:root[data-theme="cyber"] #chat-log .msg > div:last-child::before { content: "> "; color: #ff2a6d; }
:root[data-theme="cyber"] #chat-input { caret-color: #ff2a6d; }

/* Pixel-Retro: alles in Großbuchstaben wie im Spiele-Textkasten */
:root[data-theme="pixel"] #chat-log .msg { text-transform: uppercase; font-size: 12px; letter-spacing: .03em; line-height: 1.5; }
:root[data-theme="pixel"] #chat-log .msg .meta { font-size: 11px; color: #306230; }

/* Retro-Windows: kleine Systemschrift wie in alten Chatprogrammen, Namen fett und blau */
:root[data-theme="retro"] #chat-log .msg { font: 12px/1.4 Tahoma, "Microsoft Sans Serif", sans-serif; }
:root[data-theme="retro"] #chat-log .msg .meta { font-weight: bold; color: #000080; font-size: 11px; }

/* Cottage: freundlich und rund, Namen fett in Blattgrün */
:root[data-theme="cottage"] #chat-log .msg { font-family: "Trebuchet MS", Verdana, sans-serif; }
:root[data-theme="cottage"] #chat-log .msg .meta { font-weight: bold; color: #4f8a3a; }

/* Pastell: weich, Namen in Lavendel */
:root[data-theme="pastell"] #chat-log .msg .meta { color: #9b7fd4; font-weight: 600; }
:root[data-theme="pastell"] #chat-log .msg { font-size: 14px; }

/* Weltall: Namen wie Funkrufzeichen */
:root[data-theme="weltall"] #chat-log .msg .meta { text-transform: uppercase; letter-spacing: .14em; color: #7dd3fc; font-size: 11px; }

/* Clean & Dunkel: ruhig, Namen in normaler Strichstärke */
:root[data-theme="clean"] #chat-log .msg .meta, :root[data-theme="dunkel"] #chat-log .msg .meta { font-weight: 500; letter-spacing: -.01em; }

/* =====================================================================
   Retro-Windows: der Chat als eigenes Programmfenster
   (Titelleiste mit Fensterknöpfen, Listenfeld, Protokoll, Statusleiste)
   ===================================================================== */
:root[data-theme="retro"] #side {
  padding: 0 0 0; gap: 6px; background: #c0c0c0;
  border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}
/* Titelleiste mit Minimieren / Maximieren / Schließen */
:root[data-theme="retro"] #side::before {
  content: "💬 Chat - Nachhilfe-Raum"; display: block; flex: none; margin: 2px 2px 4px; height: 20px; padding: 0 64px 0 6px;
  font: bold 12px/20px Tahoma, "Microsoft Sans Serif", sans-serif; color: #fff; white-space: nowrap; overflow: hidden;
  background:
    linear-gradient(#c0c0c0, #c0c0c0) right 3px center / 16px 14px no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) right 21px center / 16px 14px no-repeat,
    linear-gradient(#c0c0c0, #c0c0c0) right 37px center / 16px 14px no-repeat,
    linear-gradient(90deg, #000080, #1084d0);
}
/* Symbole auf den drei Fensterknöpfen */
:root[data-theme="retro"] .side-head { position: relative; }
:root[data-theme="retro"] .side-head::before {
  content: "_  □  ×"; position: absolute; top: -27px; right: 6px; font: bold 11px/14px Tahoma, sans-serif;
  color: #000; letter-spacing: 3px; pointer-events: none; word-spacing: 1px;
}
:root[data-theme="retro"] #side > *:not(#chat-form) { margin-left: 8px; margin-right: 8px; }
:root[data-theme="retro"] #side h2 {
  text-transform: none; letter-spacing: 0; font: 12px Tahoma, sans-serif; color: #000; margin: 2px 0 0;
}
:root[data-theme="retro"] #side h2::after { content: ":"; }
:root[data-theme="retro"] #people li { font-size: 12px; padding: 2px 4px; }
:root[data-theme="retro"] #people li:first-child { background: #000080; color: #fff; } /* ausgewählter Eintrag */
:root[data-theme="retro"] #people .perm { border-radius: 0; font-size: 11px; color: #000; }
/* Chatprotokoll: weißes, eingelassenes Textfeld, Zeilen statt Blasen */
:root[data-theme="retro"] #chat-log { gap: 1px; padding: 4px 6px; }
:root[data-theme="retro"] #chat-log .msg {
  background: none; border: none; border-radius: 0; padding: 1px 0; color: #000;
}
:root[data-theme="retro"] #chat-log .msg .meta, :root[data-theme="retro"] #chat-log .msg > div:last-child { display: inline; }
:root[data-theme="retro"] #chat-log .msg .meta::after { content: ": "; }
:root[data-theme="retro"] #chat-log .msg:nth-child(odd) .meta { color: #800000; } /* abwechselnde Namensfarben wie früher */
:root[data-theme="retro"] #chat-log > .meta { color: #008000; font: italic 12px Tahoma, sans-serif; }
:root[data-theme="retro"] #chat-log > .meta::before { content: "*** "; }
/* Eingabezeile + Senden-Knopf */
:root[data-theme="retro"] #chat-form { margin: 0 8px; gap: 4px; }
:root[data-theme="retro"] #chat-form button { min-width: 72px; font-weight: bold; }
/* Statusleiste ganz unten */
:root[data-theme="retro"] #side::after {
  content: "● Verbunden"; display: block; flex: none; margin: 2px; padding: 2px 6px;
  font: 11px Tahoma, sans-serif; color: #000;
  border: 1px solid; border-color: #808080 #ffffff #ffffff #808080;
}