/* Schriften für die Spezial-Designs: Star Wars (Orbitron), Pixel und Pinguin (Press Start 2P + Pixelify Sans). */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Press+Start+2P&family=Pixelify+Sans:wght@400;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Data Science Lab: gemeinsames Design der Lern-Labs der HS Pforzheim (SAP-Lab,
   Prozess-Lab). Umschaltung über data-theme am <html> (siehe app.js, THEMES).
   Die Farben stehen als Variablen pro Design; alle Bauteile unten nutzen nur diese
   Variablen. Aufbau: 1. Designs (Farben) · 2. Grundlayout · 3. Bauteile ·
   4. Feinschliff je Design · 5. Spezial-Designs Star Wars, Pixel, Pinguin.
   --------------------------------------------------------------------------- */

/* ===== 1. Designs ===== */
:root,
[data-theme="hspf"] {
  --akzent:#FFB400; --akzent-hover:#ffc02e; --on-akzent:#1b1b1f; --akzent-hell:#FFF6DC; --akzent-rand:#f1deaa; --akzent-text:#9a6a00;
  --primaer:#1b1b1f; --primaer-hover:#000000; --on-primaer:#ffffff;
  --text:#1b1b1f; --text-2:#5b5b66; --linie:#e4e2db; --bg:#ffffff; --bg-2:#f8f7f3; --flaeche:#ffffff; --seite:#fcfbf7; --track:#ebe9e2; --kbd:#f1efe8;
  --ok:#17803f; --ok-bg:#e8f4ec; --err:#c0312a; --err-bg:#fbeceb; --err-rand:#eac5c2;
  --info-bg:#eef3fb; --info-rand:#cdd9ee; --info-akzent:#4a73c4; --warn-bg:#fff8e4; --warn-rand:#f0dc9f; --quiz-bg:#fffdf6;
  --hero-von:#ffd45e; --hero-bis:#FFB400;
  --student-bubble:#f1efe8;
  --radius:12px; --radius-s:10px; --pille:999px;
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:var(--font-base);
  color-scheme:light;
}
[data-theme="blau"] {
  --akzent:#0070F2; --akzent-hover:#2a85f5; --on-akzent:#ffffff; --akzent-hell:#EBF5FF; --akzent-rand:#B8DAFF; --akzent-text:#0057D2;
  --primaer:#1D2D3E; --primaer-hover:#0f1b27; --on-primaer:#ffffff;
  --text:#1D2D3E; --text-2:#556B82; --linie:#D5DADD; --bg:#ffffff; --bg-2:#F5F6F7; --flaeche:#ffffff; --seite:#F7F9FB; --track:#E2E7EB; --kbd:#EEF1F4; --quiz-bg:#F5FAFF;
  --ok:#17803f; --ok-bg:#e8f4ec; --err:#c0312a; --err-bg:#fbeceb; --err-rand:#eac5c2;
  --info-bg:#eef3fb; --info-rand:#cdd9ee; --info-akzent:#4a73c4; --warn-bg:#fff8e4; --warn-rand:#f0dc9f;
  --hero-von:#b9dcff; --hero-bis:#3d96ff;
  --student-bubble:#EEF1F4;
  --radius:12px; --radius-s:10px; --pille:999px;
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:var(--font-base);
  color-scheme:light;
}
[data-theme="aurora"] {
  --akzent:#22d3ee; --akzent-hover:#67e8f9; --on-akzent:#06121a; --akzent-hell:rgba(34,211,238,.10); --akzent-rand:rgba(34,211,238,.38); --akzent-text:#67e8f9;
  --primaer:#6d4df2; --primaer-hover:#7f63ff; --on-primaer:#ffffff;
  --text:#eaf0ff; --text-2:#a9b3d6; --linie:rgba(255,255,255,.13); --bg:#0a0c18; --bg-2:rgba(255,255,255,.05); --flaeche:rgba(255,255,255,.06); --seite:rgba(255,255,255,.035); --track:rgba(255,255,255,.11); --kbd:rgba(255,255,255,.09);
  --ok:#34d399; --ok-bg:rgba(52,211,153,.13); --err:#fb7185; --err-bg:rgba(251,113,133,.13); --err-rand:rgba(251,113,133,.42);
  --info-bg:rgba(99,102,241,.15); --info-rand:rgba(129,140,248,.42); --info-akzent:#818cf8; --warn-bg:rgba(250,204,21,.10); --warn-rand:rgba(250,204,21,.35); --quiz-bg:rgba(124,58,237,.11);
  --hero-von:#2f4fa8; --hero-bis:#162050;
  --student-bubble:rgba(255,255,255,.09);
  --radius:12px; --radius-s:10px; --pille:999px;
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:var(--font-base);
  color-scheme:dark;
}
[data-theme="retro"] {
  --akzent:#ff3cac; --akzent-hover:#ff6ac1; --on-akzent:#12002b; --akzent-hell:rgba(255,60,172,.13); --akzent-rand:rgba(255,60,172,.55); --akzent-text:#ff7ac8;
  --primaer:#00e5ff; --primaer-hover:#5cf0ff; --on-primaer:#07041a;
  --text:#f4eaff; --text-2:#b9a5da; --linie:rgba(160,90,255,.42); --bg:#0e0522; --bg-2:rgba(255,255,255,.04); --flaeche:rgba(30,10,64,.93); --seite:rgba(20,6,45,.72); --track:#2a1157; --kbd:#2b1457;
  --ok:#39ff88; --ok-bg:rgba(57,255,136,.12); --err:#ff5470; --err-bg:rgba(255,84,112,.14); --err-rand:rgba(255,84,112,.5);
  --info-bg:rgba(0,229,255,.1); --info-rand:rgba(0,229,255,.45); --info-akzent:#00e5ff; --warn-bg:rgba(255,230,0,.09); --warn-rand:rgba(255,230,0,.4); --quiz-bg:rgba(255,60,172,.08);
  --hero-von:#2a0a55; --hero-bis:#12002b;
  --student-bubble:rgba(0,229,255,.1);
  --radius:2px; --radius-s:2px; --pille:2px;
  --font-base:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace; --font-display:var(--font-base);
  color-scheme:dark;
}
[data-theme="byte"] {
  --akzent:#F5921E; --akzent-hover:#ffa63d; --on-akzent:#1d2340; --akzent-hell:#FFF1DC; --akzent-rand:#F6C58B; --akzent-text:#A85800;
  --primaer:#1d2a5a; --primaer-hover:#131c40; --on-primaer:#ffffff;
  --text:#1d2340; --text-2:#5a6385; --linie:#e7e2da; --bg:#fffdf9; --bg-2:#f8f4ee; --flaeche:#ffffff; --seite:#fbf7f1; --track:#ece6dc; --kbd:#FFF1DC;
  --ok:#17803f; --ok-bg:#e8f4ec; --err:#c0312a; --err-bg:#fbeceb; --err-rand:#eac5c2;
  --info-bg:#eaf8fe; --info-rand:#b5e6f8; --info-akzent:#1a9bd0; --warn-bg:#fff4e0; --warn-rand:#f6c58b; --quiz-bg:#fffaf2;
  --hero-von:#2f4fa8; --hero-bis:#162050;
  --student-bubble:#e8ecf8;
  --radius:12px; --radius-s:10px; --pille:999px;
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:var(--font-base);
  color-scheme:light;
}
[data-theme="marker"] {
  --akzent:#FFE600; --akzent-hover:#fff04d; --on-akzent:#111111; --akzent-hell:#FFF9B8; --akzent-rand:#111111; --akzent-text:#111111;
  --primaer:#111111; --primaer-hover:#333333; --on-primaer:#ffffff;
  --text:#111111; --text-2:#55555c; --linie:#d9d9d2; --bg:#ffffff; --bg-2:#f6f5ee; --flaeche:#ffffff; --seite:#faf9f4; --track:#ffffff; --kbd:#FFF9B8;
  --ok:#14803c; --ok-bg:#e6f5ea; --err:#c4261d; --err-bg:#fdecea; --err-rand:#eab5b1;
  --info-bg:#ffffff; --info-rand:#111111; --info-akzent:#111111; --warn-bg:#FFF9B8; --warn-rand:#111111; --quiz-bg:#fffef2;
  --hero-von:#111111; --hero-bis:#111111;
  --student-bubble:#f1f0e8;
  --radius:3px; --radius-s:3px; --pille:3px;
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:var(--font-base);
  color-scheme:light;
}
/* Star Wars: tiefes Weltraum-Schwarz und das ikonische Gelb, Orbitron-Schrift. Passt zum Beispiel "Star Wars". */
[data-theme="starwars"] {
  --akzent:#ffe81f; --akzent-hover:#fff059; --on-akzent:#05070d; --akzent-hell:#2a2712; --akzent-rand:rgba(255,232,31,.45); --akzent-text:#ffe81f;
  --primaer:#ffe81f; --primaer-hover:#fff059; --on-primaer:#05070d;
  --text:#e8e6d9; --text-2:#8a8f9c; --linie:#2a3040; --bg:#05070d; --bg-2:#0a0e16; --flaeche:#0f131c; --seite:#0b0f17; --track:#232a3a; --kbd:#1a2030;
  --ok:#63d471; --ok-bg:rgba(99,212,113,.12); --err:#ff5c5c; --err-bg:rgba(255,92,92,.13); --err-rand:rgba(255,92,92,.45);
  --info-bg:rgba(90,140,255,.12); --info-rand:rgba(90,140,255,.4); --info-akzent:#7aa2ff; --warn-bg:rgba(255,232,31,.08); --warn-rand:rgba(255,232,31,.35); --quiz-bg:rgba(255,232,31,.05);
  --hero-von:#1a2030; --hero-bis:#05070d;
  --student-bubble:#1a2030;
  --radius:8px; --radius-s:6px; --pille:999px;
  --font-base:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:'Orbitron',system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
/* Pixel: 8-Bit-Jump'n'Run, Himmelblau mit Gras- und Ziegelboden, cremefarbene Flächen, dicke dunkle Ränder.
   Passt zum Beispiel "Super Mario", geht aber mit jedem Beispiel. */
[data-theme="pixel"] {
  --akzent:#d62418; --akzent-hover:#e8392d; --on-akzent:#ffffff; --akzent-hell:#ffe9a3; --akzent-rand:#2b1d0e; --akzent-text:#d62418;
  --primaer:#2b1d0e; --primaer-hover:#000000; --on-primaer:#ffffff;
  --text:#1f160b; --text-2:#6e5a42; --linie:#2b1d0e; --bg:#dcecff; --bg-2:#dcecff; --flaeche:#fffbea; --seite:#fffbea; --track:#e9dcb4; --kbd:#ffe9a3;
  --ok:#1f8a3b; --ok-bg:#d9f2de; --err:#d62418; --err-bg:#ffe0dc; --err-rand:#d62418;
  --info-bg:#dcecff; --info-rand:#2b1d0e; --info-akzent:#2b6fd6; --warn-bg:#ffe9a3; --warn-rand:#2b1d0e; --quiz-bg:#fffbea;
  --hero-von:#5c94fc; --hero-bis:#5c94fc;
  --student-bubble:#cfe8ff;
  --radius:0; --radius-s:0; --pille:0;
  --font-base:'Pixelify Sans','Courier New',monospace; --font-display:'Press Start 2P','Courier New',monospace;
  --pixel-sky:#5c94fc; --pixel-coin:#fbd000; --pixel-coin-dark:#c98a00; --pixel-shadow:3px 3px 0 var(--linie);
  color-scheme:light;
}
/* Pinguin: Arktis-Variante des Pixel-Designs, passt zum Python-Beispiel "Pinguine". */
[data-theme="pinguin"] {
  --akzent:#0b6fa8; --akzent-hover:#1583c4; --on-akzent:#ffffff; --akzent-hell:#cdeafa; --akzent-rand:#14202e; --akzent-text:#0b6fa8;
  --primaer:#14202e; --primaer-hover:#000000; --on-primaer:#ffffff;
  --text:#0f2233; --text-2:#4a667d; --linie:#14202e; --bg:#e3f3fb; --bg-2:#e3f3fb; --flaeche:#fbfeff; --seite:#fbfeff; --track:#c9e3f1; --kbd:#cdeafa;
  --ok:#1b7f4a; --ok-bg:#d6f0e1; --err:#c0392b; --err-bg:#fde3df; --err-rand:#c0392b;
  --info-bg:#e3f3fb; --info-rand:#14202e; --info-akzent:#0b6fa8; --warn-bg:#fff0cc; --warn-rand:#14202e; --quiz-bg:#fbfeff;
  --hero-von:#9fd8f5; --hero-bis:#9fd8f5;
  --student-bubble:#d3eaf8;
  --radius:0; --radius-s:0; --pille:0;
  --font-base:'Pixelify Sans','Courier New',monospace; --font-display:'Press Start 2P','Courier New',monospace;
  --pixel-sky:#9fd8f5; --pixel-coin:#ff9f1c; --pixel-coin-dark:#c46a00; --pixel-shadow:3px 3px 0 var(--linie);
  color-scheme:light;
}

/* ===== 2. Grundlayout ===== */
* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:var(--font-base);
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
a { color:inherit; }
button, select, input, textarea { font-family:inherit; }
button { cursor:pointer; font-size:inherit; }

/* Kopfleiste */
header.top {
  position:relative; z-index:20; flex:none;
  display:flex; align-items:center; gap:.9rem;
  padding:.55rem 1.2rem;
  background:var(--flaeche);
  border-bottom:1px solid var(--linie);
}
.logo { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem; text-decoration:none; white-space:nowrap; flex:none; }
.logo .byte-img { height:34px; width:auto; flex:none; }
.logo small { font-weight:500; color:var(--text-2); font-size:.8rem; margin-left:.3rem; }
nav.hauptnav { margin-left:auto; display:flex; gap:.25rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.teamchip {
  display:flex; align-items:center; gap:.45rem;
  background:var(--bg-2); border:1px solid var(--linie);
  padding:.22rem .85rem; border-radius:var(--pille);
  font-size:.86rem; white-space:nowrap; margin-left:.4rem; max-width:260px;
}
.account-name { overflow:hidden; text-overflow:ellipsis; }
.hilfebtn, .themebtn {
  display:grid; place-items:center; padding:.45rem; margin-left:.2rem;
  background:transparent; color:inherit; border:0; border-radius:var(--pille);
}
.hilfebtn:hover, .themebtn:hover { background:var(--bg-2); }
.hilfebtn[hidden] { display:none; }

/* Kurswahl SQL / Python als Pillen-Tabs in der Kopfleiste */
.course-switch { display:flex; gap:.2rem; }
.course-btn {
  padding:.38rem .95rem; border:0; border-radius:var(--pille);
  background:transparent; color:var(--text); font-weight:500; font-size:.93rem;
}
.course-btn:hover { background:var(--bg-2); }
.course-btn.active { background:var(--akzent-hell); color:var(--akzent-text); font-weight:600; }
.course-switch[hidden] { display:none; }

/* Design-Menü (Symbol mit Auswahl) */
.thememenue { position:relative; display:inline-block; }
.themeliste {
  position:absolute; right:0; top:calc(100% + .4rem); z-index:50;
  list-style:none; margin:0; padding:.35rem; min-width:210px;
  border:1px solid var(--linie); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.18);
  background-color:var(--bg); background-image:linear-gradient(var(--flaeche),var(--flaeche));
}
.themeliste[hidden] { display:none; }
.themeliste button {
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  padding:.45rem .6rem; background:transparent; color:var(--text); border:0;
  border-radius:calc(var(--radius) - 2px); font-size:.92rem;
}
.themeliste button:hover { background:var(--akzent-hell); }
.themeliste button.gewaehlt { font-weight:700; }
.themeliste .punkt { width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(128,128,128,.5); }
.themeliste .haken { margin-left:auto; color:var(--akzent-text); }

/* Buttons wie in den anderen Labs: ohne Unterstreichung, beim Drüberfahren zittern sie dezent vor Kälte */
.btn {
  display:inline-block; text-decoration:none; text-align:center;
  background:var(--primaer); color:var(--on-primaer); border:1px solid var(--primaer);
  padding:.55rem 1.05rem; border-radius:var(--radius-s); font-weight:600; font-size:.93rem;
}
.btn:hover:not([disabled]) { background:var(--primaer-hover); animation:frier .4s ease-in-out; }
.btn.gelb { background:var(--akzent); border-color:var(--akzent); color:var(--on-akzent); }
.btn.gelb:hover:not([disabled]) { background:var(--akzent-hover); }
.btn.hell { background:var(--flaeche); color:var(--text); border-color:var(--linie); }
.btn.hell:hover:not([disabled]) { background:var(--bg-2); }
.btn.klein { padding:.28rem .65rem; font-size:.85rem; }
.btn[disabled] { opacity:.45; cursor:not-allowed; pointer-events:none; }
@keyframes frier { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-1px) rotate(-.4deg)} 40%{transform:translateX(1px) rotate(.4deg)} 60%{transform:translateX(-1px) rotate(-.3deg)} 80%{transform:translateX(1px) rotate(.3deg)} }
@media (prefers-reduced-motion:reduce) { .btn:hover { animation:none; } }

/* Burger: klappt die Seitenleiste ein */
.nav-toggle {
  flex:none; width:34px; height:34px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:transparent; color:var(--text); border:1px solid var(--linie); border-radius:var(--radius-s);
}
.nav-toggle span { display:block; width:16px; height:2px; border-radius:2px; background:currentColor; }
.nav-toggle:hover { background:var(--akzent-hell); }
.nav-toggle:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }

/* App: Seitenleiste + Arbeitsbereich. Auf sehr breiten Bildschirmen auf 1900 px begrenzt und zentriert. */
.app {
  flex:1; min-height:0;
  display:grid; grid-template-columns:290px 1fr;
  width:100%; max-width:1900px; margin:0 auto;
  transition:grid-template-columns .18s ease;
}
@media (min-width:1901px) { .app { border-left:1px solid var(--linie); border-right:1px solid var(--linie); } }
.app.nav-collapsed { grid-template-columns:0 1fr; }
.app.nav-collapsed .sidebar { padding-left:0; padding-right:0; border-right:0; visibility:hidden; }

.sidebar {
  background:var(--seite);
  border-right:1px solid var(--linie);
  padding:1rem 1rem .6rem;
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}
.dataset-switch { margin:0 0 .4rem; }
.dataset-switch label {
  display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:.3rem;
}
.dataset-switch select {
  font:inherit; font-weight:600; font-size:.88rem; width:100%; padding:.5rem .5rem;
  border:1px solid var(--linie); border-radius:var(--radius-s); background:var(--flaeche); color:var(--text);
  text-overflow:ellipsis; cursor:pointer;
}
.kursfortschritt { margin-top:.55rem; }
.kursfortschritt[hidden] { display:none; }
.kursfortschritt span { display:block; font-size:.76rem; color:var(--text-2); margin-top:.25rem; }
.xpbar { height:8px; background:var(--track); border-radius:var(--pille); overflow:hidden; }
.xpbar i { display:block; height:100%; background:var(--akzent); border-radius:var(--pille); transition:width .6s; }

.exercise-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-top:.5rem; padding-bottom:.5rem; }
.chapter-header {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  color:var(--akzent-text); margin:1rem 0 .25rem; padding:0 .7rem;
}
.chapter-header:first-child { margin-top:.2rem; }
.exercise-item {
  display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem;
  border-radius:var(--radius-s); cursor:pointer; font-size:.9rem; color:var(--text-2);
  border:1px solid transparent;
}
.exercise-item:hover { background:var(--akzent-hell); }
.exercise-item.active { background:var(--primaer); color:var(--on-primaer); font-weight:600; }
.exercise-item .ex-title { flex:1; }
/* Nummer im Kästchen, gelöste Aufgaben bekommen einen grünen Haken */
.exercise-item .ex-num {
  min-width:22px; height:22px; padding:0 3px; flex:none; display:grid; place-items:center;
  border-radius:50%; font-size:.72rem; font-weight:700;
  border:1.5px solid var(--akzent); background:var(--flaeche); color:var(--text-2);
}
.exercise-item.solved .ex-num { background:var(--ok); border-color:var(--ok); color:transparent; position:relative; }
.exercise-item.solved .ex-num::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; }
.exercise-item .ex-check { display:none; }

/* Arbeitsbereich: Aufgabenbereich, Zieh-Leiste, Chat. Der Chat nimmt als 1fr-Zeile immer den Rest ein. */
.main {
  display:grid; min-height:0; overflow:hidden;
  grid-template-columns:minmax(0,1fr) 10px var(--chat-w, clamp(340px, 34vw, 520px));
  grid-template-rows:minmax(0,1fr);
}
.task-panel { padding:1.1rem 1.6rem; background:var(--bg); overflow-y:auto; min-height:0; }
.splitter {
  position:relative; width:10px; background:var(--bg); border-left:1px solid var(--linie);
  cursor:col-resize; touch-action:none;
}
.splitter::after {
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3px; height:46px; border-radius:2px; background:var(--linie);
}
.splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after { background:var(--akzent); }
.splitter:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; }
body.resizing { cursor:col-resize; -webkit-user-select:none; user-select:none; }

.task-breadcrumb { font-size:.78rem; color:var(--text-2); }
.task-breadcrumb:not(:empty) { margin:0 0 .7rem; }
.task-breadcrumb .crumb-db { font-weight:700; color:var(--text); }
.task-breadcrumb .crumb-sep { margin:0 6px; opacity:.6; }

/* Aufgaben-Karte (der Arbeitsauftrag) */
.task-card {
  border:1px solid var(--linie); border-radius:var(--radius); background:var(--flaeche);
  padding:1rem 1.2rem; margin:0 0 .9rem; box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.task-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:.4rem; }
.task-card-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--akzent-text); }
.task-kicker {
  font-size:.74rem; font-weight:600; color:var(--akzent-text);
  background:var(--akzent-hell); border:1px solid var(--akzent-rand); border-radius:var(--pille); padding:.02rem .7rem;
}
.task-kicker:empty { display:none; }
.task-panel h2 { margin:0 0 .45rem; font-size:1.4rem; line-height:1.25; letter-spacing:-.015em; font-weight:750; font-family:var(--font-display); }
.task-prompt { color:var(--text); margin:0; font-size:1.02rem; line-height:1.6; }

/* Szenario (nur bei der ersten Aufgabe): Byte mit Sprechblase auf farbigem Kopfbild */
.task-scenario:not(:empty) {
  display:flex; align-items:center; gap:1.4rem; margin:0 0 .9rem; padding:.8rem 1.4rem .8rem 1rem; overflow:hidden;
  border-radius:calc(var(--radius) + 4px);
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.4px),linear-gradient(135deg,var(--hero-von),var(--hero-bis));
  background-size:14px 14px,100% 100%;
}
.task-scenario .byte-img { height:120px; width:auto; flex:none; margin:-.2rem 0; }
.task-scenario .sprechblase {
  position:relative; background:var(--flaeche); color:var(--text); border-radius:calc(var(--radius) + 4px);
  padding:.7rem 1.1rem; box-shadow:0 2px 0 rgba(0,0,0,.06); flex:1;
}
.task-scenario .sprechblase::before {
  content:""; position:absolute; left:-6px; top:50%; margin-top:-6px; width:12px; height:12px;
  background:var(--flaeche); transform:rotate(45deg);
}
.task-scenario .task-card-head { margin-bottom:.2rem; }

/* Tabellen und Hinweis zur Aufgabe */
.task-tables { display:flex; flex-direction:column; gap:6px; margin:0 0 .6rem; }
.tables-heading { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:2px; }
.tables-legend { text-transform:none; letter-spacing:0; opacity:.8; }
.table-card, .hint-card { border:1px solid var(--linie); border-radius:var(--radius-s); background:var(--bg-2); overflow:hidden; }
.table-card > summary, .hint-card > summary { cursor:pointer; padding:.45rem .75rem; font-size:.84rem; list-style:none; }
.table-card > summary::-webkit-details-marker, .hint-card > summary::-webkit-details-marker { display:none; }
.table-card > summary::before { content:'▸'; color:var(--text-2); margin-right:6px; font-size:.7rem; }
.table-card[open] > summary::before { content:'▾'; }
.table-card > summary:hover, .hint-card > summary:hover { background:var(--akzent-hell); }
.table-name { font-weight:600; }
.table-cols { color:var(--text-2); font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.78rem; }
.table-card-body { max-height:200px; overflow:auto; padding:0 .75rem .7rem; }
.pk-col { text-decoration:underline; text-underline-offset:2px; }
.null-cell { color:var(--text-2); font-style:italic; }
.task-hint { margin:0 0 .9rem; }
.hint-card { background:var(--info-bg); border-color:var(--info-rand); }
.hint-card > summary { font-weight:600; color:var(--text); }
.hint-card > summary::after { content:'▸'; color:var(--text-2); margin-left:6px; font-size:.7rem; font-weight:400; }
.hint-card[open] > summary::after { content:'▾'; }
.hint-card > summary:hover { background:transparent; }
.hint-icon { margin-right:4px; }
.hint-card-body { padding:.2rem .85rem .8rem; font-size:.88rem; line-height:1.55; color:var(--text); white-space:pre-wrap; }

/* Editor, Ausführen, Ergebnis */
#sql-input {
  width:100%; min-height:90px; font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:.88rem;
  padding:.7rem .8rem; border-radius:var(--radius-s); border:1px solid var(--linie);
  background:var(--flaeche); color:var(--text); resize:vertical;
}
#sql-input:focus, #chat-input:focus, select:focus, input:focus { outline:2px solid var(--akzent); border-color:var(--akzent); }
.actions { display:flex; align-items:center; gap:.7rem; margin-top:.7rem; flex-wrap:wrap; }
.attempt-info { font-size:.8rem; color:var(--text-2); }
.run-hint { font-size:.75rem; color:var(--text-2); }
#result-table-wrap { margin-top:.9rem; max-height:38vh; overflow:auto; }
table.result-table { border-collapse:collapse; font-size:.82rem; width:100%; }
table.result-table th, table.result-table td { border:0; border-bottom:1px solid var(--linie); padding:.4rem .6rem; text-align:left; }
table.result-table th { background:var(--akzent-hell); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-2); }
.result-status { font-weight:600; margin-top:.5rem; padding:.45rem .8rem; border-radius:var(--radius-s); }
.result-status.correct { color:var(--ok); background:var(--ok-bg); }
.result-status.wrong { color:var(--err); background:var(--err-bg); }

/* Chat */
.chat-panel { display:grid; grid-template-rows:1fr auto; overflow:hidden; min-height:0; padding:.9rem 1.1rem; background:var(--seite); }
.chat-feed { overflow-y:auto; display:flex; flex-direction:column; gap:.65rem; padding-bottom:.6rem; }
.chat-msg { max-width:80%; padding:.6rem .9rem; border-radius:calc(var(--radius) + 4px); font-size:.9rem; line-height:1.45; white-space:pre-wrap; }
.chat-msg.tutor { background:var(--akzent-hell); border:1px solid var(--akzent-rand); align-self:flex-start; position:relative; margin-left:40px; }
.chat-msg.tutor::before {
  content:''; position:absolute; left:-40px; bottom:0; width:32px; height:32px;
  background:url(maskottchen/web/byte-kopf.png) center/contain no-repeat;
}
.chat-msg.student { background:var(--student-bubble); align-self:flex-end; }
.chat-msg.system { background:transparent; color:var(--text-2); font-size:.78rem; align-self:center; }
.chat-msg.typing { color:var(--text-2); font-style:italic; opacity:.85; }
.chat-input-row { display:flex; gap:.5rem; }
#chat-input { flex:1; padding:.6rem .8rem; border-radius:var(--radius-s); border:1px solid var(--linie); background:var(--flaeche); color:var(--text); font-size:.92rem; }

/* Fußzeile */
.fuss { flex:none; text-align:center; font-size:.85rem; color:var(--text-2); padding:.55rem 1rem; border-top:1px solid var(--linie); background:var(--akzent-hell); }
.fuss .herz { color:#e0245e; }
.fuss a { color:var(--akzent-text); font-weight:600; text-decoration:none; }
.fuss a:hover { text-decoration:underline; }

/* Anmeldung: Vollbild über der App, bis jemand angemeldet ist */
.auth-screen {
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--bg-2); overflow-y:auto;
}
.auth-screen[hidden], .auth-card[hidden], .auth-card [hidden] { display:none; }
.auth-card {
  width:100%; max-width:400px; background:var(--flaeche); border:1px solid var(--linie); border-radius:calc(var(--radius) + 8px);
  padding:1.6rem 2rem 1.3rem; box-shadow:0 8px 30px rgba(0,0,0,.08); display:flex; flex-direction:column; text-align:center;
}
.auth-card .byte-img { height:150px; width:auto; margin:-.2rem auto .1rem; }
.auth-card h1 { text-wrap:balance; margin:0 0 .3rem; font-size:1.45rem; line-height:1.2; letter-spacing:-.015em; font-family:var(--font-display); }
.auth-intro { margin:0 0 .6rem; font-size:.9rem; color:var(--text-2); line-height:1.45; }
.auth-card label { display:block; text-align:left; font-weight:600; font-size:.88rem; margin:.7rem 0 .25rem; }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"] {
  padding:.6rem .8rem; border:1px solid var(--linie); border-radius:var(--radius-s); background:var(--flaeche); color:var(--text); font-size:.95rem; width:100%;
}
.auth-card label.auth-check { display:flex; align-items:center; gap:8px; font-weight:400; font-size:.85rem; margin:.8rem 0 .2rem; cursor:pointer; }
.auth-note { color:var(--text-2); font-size:.78rem; }
.auth-error { min-height:1.2em; margin:.4rem 0 .2rem; color:var(--err); font-size:.85rem; font-weight:600; }
.auth-card button[type="submit"] {
  margin-top:.3rem; padding:.7rem; font-size:.95rem; font-weight:600;
  background:var(--akzent); color:var(--on-akzent); border:1px solid var(--akzent); border-radius:var(--radius-s);
}
.auth-card button[type="submit"]:hover { background:var(--akzent-hover); }
.auth-help { margin:1.1rem 0 0; font-size:.8rem; color:var(--text-2); line-height:1.45; }

/* Python: Editor und Ausgabe */
body.course-python #sql-input { min-height:120px; tab-size:4; white-space:pre; overflow:auto; }
body.course-python #result-table-wrap { max-height:45vh; }
.py-output-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin:10px 0 4px; }
.py-output {
  margin:0; padding:.55rem .75rem; border:1px solid var(--linie); border-radius:var(--radius-s); background:var(--bg-2); color:var(--text);
  font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:.82rem; white-space:pre-wrap; word-break:break-word;
}
.py-output.error { border-color:var(--err); color:var(--err); background:var(--err-bg); }
.py-output table { border-collapse:collapse; font-size:.82rem; }
.py-output table th, .py-output table td { border:1px solid var(--linie); padding:4px 8px; text-align:right; }
.py-output table thead th { background:var(--akzent-hell); }
.py-loading { color:var(--text-2); font-size:.85rem; padding:6px 0; }
.table-card-body pre.py-value { margin:8px 0 0; font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:.8rem; white-space:pre-wrap; word-break:break-word; }

/* Rundgang (Onboarding-Tour, siehe app.js): Overlay, Lichtkegel, Sprechblase mit Byte */
.tour-overlay, .tour-spotlight, .tour-bubble { display:none; }
body.tour-open .tour-overlay, body.tour-open .tour-bubble { display:block; }
body.tour-open .tour-spotlight:not([hidden]) { display:block; }
.tour-overlay { position:fixed; inset:0; z-index:900; background:transparent; }
.tour-overlay.dim { background:rgba(10,15,30,.62); }
.tour-spotlight {
  position:fixed; z-index:901; pointer-events:none; border-radius:calc(var(--radius) + 4px);
  box-shadow:0 0 0 3px var(--akzent),0 0 0 9999px rgba(10,15,30,.62); transition:all .2s ease;
}
.tour-spotlight[hidden] { display:none; }
.tour-bubble {
  position:fixed; z-index:902; width:380px; max-width:calc(100vw - 24px); padding:1rem 1.2rem 1rem;
  border:1px solid var(--linie); border-radius:calc(var(--radius) + 4px); box-shadow:0 16px 48px rgba(0,0,0,.4);
  color:var(--text); font-family:var(--font-base);
  background-color:var(--bg); background-image:linear-gradient(var(--flaeche),var(--flaeche));
}
.tour-bubble.centered { left:50%; top:50%; transform:translate(-50%,-50%); width:440px; }
.tour-head { display:flex; align-items:center; gap:.8rem; margin-bottom:.2rem; }
.tour-head .byte-img { height:64px; width:auto; flex:none; margin:-.2rem 0; }
.tour-count { font-size:.78rem; font-weight:700; color:var(--akzent-text); letter-spacing:.04em; }
.tour-bubble h3 { margin:0 0 .3rem; font-size:1.1rem; line-height:1.25; font-family:var(--font-display); }
.tour-text { margin:.5rem 0 .9rem; font-size:.95rem; line-height:1.55; color:var(--text); }
.tour-actions { display:flex; justify-content:flex-end; gap:.4rem; }
.tour-actions button { padding:.4rem .95rem; border-radius:var(--radius-s); font-weight:600; font-size:.88rem; }
.tour-next { background:var(--akzent); color:var(--on-akzent); border:1px solid var(--akzent); }
.tour-next:hover { background:var(--akzent-hover); }
.tour-back { background:var(--flaeche); color:var(--text); border:1px solid var(--linie); }
.tour-back:hover { background:var(--bg-2); }
.tour-back[hidden] { display:none; }
.tour-close { margin-left:auto; align-self:flex-start; background:transparent; border:0; color:var(--text-2); font-size:1rem; line-height:1; padding:.2rem .4rem; border-radius:6px; }
.tour-close:hover { background:var(--bg-2); color:var(--text); }
.tour-bubble button:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }
.tour-arrow { position:absolute; width:12px; height:12px; background:var(--flaeche); border:1px solid var(--linie); transform:rotate(45deg); }
.tour-arrow[hidden] { display:none; }
.tour-arrow.arrow-bottom { top:-7px; margin-left:-6px; border-right:none; border-bottom:none; }
.tour-arrow.arrow-top { bottom:-7px; margin-left:-6px; border-left:none; border-top:none; }
.tour-arrow.arrow-right { left:-7px; margin-top:-6px; border-right:none; border-top:none; }
.tour-arrow.arrow-left { right:-7px; margin-top:-6px; border-left:none; border-bottom:none; }
@media (prefers-reduced-motion:reduce) { .tour-spotlight { transition:none; } }

/* Schmale Fenster: der Tutor rutscht unter die Aufgabe, die Zieh-Leiste entfällt */
@media (max-width:1100px) {
  .main { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(220px,1fr); }
  .task-panel { max-height:62vh; }
  .splitter { display:none; }
  .chat-panel { padding:.9rem 1.6rem; }
}

/* Schmale Fenster */
@media (max-width:900px) { .logo small { display:none; } .teamchip { display:none; } }
@media (max-width:760px) {
  header.top { gap:.5rem; padding:.5rem .7rem; flex-wrap:wrap; }
  .app { grid-template-columns:1fr; }
  .app:not(.nav-collapsed) .sidebar { max-height:38vh; border-right:0; border-bottom:1px solid var(--linie); }
  .app.nav-collapsed { grid-template-columns:1fr; }
  .app.nav-collapsed .sidebar { display:none; }
  .app { grid-template-rows:auto 1fr; }
  .task-panel { padding:.8rem 1rem; }
  .task-scenario:not(:empty) { flex-direction:column; text-align:center; }
  .task-scenario .sprechblase::before { display:none; }
  .chat-panel { padding:.7rem 1rem; }
}

/* ===== 4. Feinschliff je Design ===== */

/* HS PF, Lab Blau, Byte: Kopfleiste und Seitenleiste mit sanftem Schatten bzw. Verlauf */
:is([data-theme="hspf"],[data-theme="blau"],[data-theme="byte"]) header.top { border-bottom:0; box-shadow:0 1px 10px rgba(0,0,0,.08); }
:is([data-theme="hspf"],[data-theme="blau"],[data-theme="byte"]) .sidebar { background:linear-gradient(180deg,var(--akzent-hell),var(--seite) 240px); }
:is([data-theme="hspf"],[data-theme="blau"],[data-theme="byte"]) .fuss { border-top:0; }
:is([data-theme="hspf"],[data-theme="blau"],[data-theme="byte"],[data-theme="aurora"]) .sidebar select { border-radius:var(--radius-s); }

/* Aurora: Nachthimmel mit wandernden Farbwolken, Glas-Flächen, Verläufe */
[data-theme="aurora"] body { position:relative; isolation:isolate; }
[data-theme="aurora"] body::before {
  content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 35% at 18% 22%,rgba(34,211,238,.34),transparent 70%),
    radial-gradient(38% 38% at 82% 18%,rgba(167,139,250,.38),transparent 70%),
    radial-gradient(42% 40% at 70% 85%,rgba(244,114,182,.26),transparent 70%),
    radial-gradient(35% 35% at 12% 80%,rgba(52,211,153,.20),transparent 70%);
  filter:blur(40px); animation:aurora-drift 26s ease-in-out infinite alternate;
}
[data-theme="aurora"] body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); background-size:34px 34px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 70%);
}
@keyframes aurora-drift {
  0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(4%,3%,0) rotate(6deg) scale(1.08)}
  100%{transform:translate3d(-2%,5%,0) rotate(-5deg) scale(1.02)}
}
[data-theme="aurora"] header.top { background:rgba(10,12,24,.62); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-bottom-color:rgba(255,255,255,.1); }
[data-theme="aurora"] .sidebar { background:rgba(255,255,255,.03); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
[data-theme="aurora"] .task-panel, [data-theme="aurora"] .splitter, [data-theme="aurora"] .chat-panel { background:transparent; }
[data-theme="aurora"] :is(.task-card,.teamchip,.auth-card,.tour-bubble,.table-card,.hint-card) {
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="aurora"] .task-scenario:not(:empty) { background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px),linear-gradient(120deg,rgba(34,211,238,.14),rgba(167,139,250,.16),rgba(244,114,182,.12)); background-size:14px 14px,100% 100%; border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 40px rgba(109,77,242,.22); }
[data-theme="aurora"] .sprechblase, [data-theme="aurora"] .sprechblase::before { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
[data-theme="aurora"] .sprechblase::before { border-right:0; border-top:0; }
[data-theme="aurora"] .byte-img { filter:drop-shadow(0 0 14px rgba(34,211,238,.5)) drop-shadow(0 0 26px rgba(167,139,250,.3)); }
[data-theme="aurora"] .logo .byte-img { filter:drop-shadow(0 0 8px rgba(34,211,238,.6)); }
[data-theme="aurora"] .auth-screen { background:rgba(10,12,24,.55); backdrop-filter:blur(6px); }
[data-theme="aurora"] .auth-card { border:1px solid rgba(255,255,255,.16); box-shadow:0 20px 60px rgba(109,77,242,.35),0 0 0 1px rgba(34,211,238,.08); }
[data-theme="aurora"] .task-panel h2 { background:linear-gradient(90deg,#ffffff 0%,#8be9fd 45%,#c4b5fd 80%,#f9a8d4 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
[data-theme="aurora"] .btn { background:linear-gradient(135deg,#6d4df2,#2f7bf5); border-color:transparent; box-shadow:0 4px 18px rgba(109,77,242,.45); }
[data-theme="aurora"] .btn:hover:not([disabled]) { background:linear-gradient(135deg,#7f63ff,#4a90ff); box-shadow:0 6px 26px rgba(109,77,242,.65); }
[data-theme="aurora"] :is(.btn.gelb,.auth-card button[type="submit"],.tour-next) { background:linear-gradient(135deg,#22d3ee,#a78bfa); color:#06121a; border-color:transparent; box-shadow:0 4px 18px rgba(34,211,238,.4); }
[data-theme="aurora"] :is(.btn.gelb,.auth-card button[type="submit"],.tour-next):hover:not([disabled]) { background:linear-gradient(135deg,#67e8f9,#c4b5fd); box-shadow:0 6px 28px rgba(34,211,238,.6); }
[data-theme="aurora"] .btn.hell { background:rgba(255,255,255,.06); border:1px solid var(--linie); box-shadow:none; }
[data-theme="aurora"] .btn.hell:hover:not([disabled]) { background:rgba(255,255,255,.12); }
[data-theme="aurora"] .course-btn.active { background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(167,139,250,.2)); box-shadow:inset 0 -2px 0 #22d3ee; }
[data-theme="aurora"] .exercise-item.active { background:linear-gradient(135deg,#6d4df2,#2f7bf5); box-shadow:0 4px 18px rgba(109,77,242,.4); }
[data-theme="aurora"] .exercise-item.solved .ex-num { background:linear-gradient(135deg,#34d399,#22d3ee); border-color:transparent; }
[data-theme="aurora"] .exercise-item.solved .ex-num::after { color:#04201a; }
[data-theme="aurora"] .exercise-item .ex-num { border-color:#22d3ee; box-shadow:0 0 8px rgba(34,211,238,.4); }
[data-theme="aurora"] .xpbar i { background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6); box-shadow:0 0 14px rgba(167,139,250,.7); }
[data-theme="aurora"] :is(#sql-input,#chat-input,select,.auth-card input) { background:rgba(255,255,255,.06); }
[data-theme="aurora"] :is(input,select):focus { box-shadow:0 0 0 3px rgba(34,211,238,.25); }
[data-theme="aurora"] option { background:#14172b; color:#eaf0ff; }
[data-theme="aurora"] .fuss { background:transparent; border-top-color:rgba(255,255,255,.1); }
[data-theme="aurora"] .fuss a { color:#67e8f9; }
[data-theme="aurora"] ::selection { background:rgba(167,139,250,.5); }
[data-theme="aurora"] ::-webkit-scrollbar { width:10px; height:10px; }
[data-theme="aurora"] ::-webkit-scrollbar-thumb { background:rgba(167,139,250,.35); border-radius:6px; }
[data-theme="aurora"] ::-webkit-scrollbar-track { background:transparent; }
@media (prefers-reduced-motion:reduce) { [data-theme="aurora"] body::before { animation:none; } }

/* Retro Neon: Synthwave, Gitterboden, Neon-Leuchten, Monospace */
[data-theme="retro"] body { position:relative; isolation:isolate; background:linear-gradient(180deg,#0e0522 0%,#1c0a3d 52%,#3a1054 100%) fixed; }
[data-theme="retro"] body::before {
  content:""; position:fixed; left:-60%; right:-60%; bottom:0; height:34vh; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,60,172,.7) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(0,229,255,.6) 0 1px,transparent 1px 38px);
  transform:perspective(360px) rotateX(64deg); transform-origin:50% 100%;
  mask-image:linear-gradient(to top,#000 5%,transparent 95%); -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 95%);
  animation:retro-gitter 2.4s linear infinite;
}
[data-theme="retro"] body::after {
  content:""; position:fixed; left:50%; bottom:30vh; width:30vmin; height:30vmin; margin-left:-15vmin; z-index:-1; pointer-events:none; border-radius:50%;
  background:linear-gradient(180deg,#ffe600 0%,#ff7a3c 45%,#ff3cac 100%); opacity:.16;
  mask-image:repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 15px); -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 15px);
  box-shadow:0 0 70px rgba(255,60,172,.4);
}
@keyframes retro-gitter { from{background-position:0 0,0 0} to{background-position:0 0,0 38px} }
[data-theme="retro"] :is(h1,h2,h3,.task-panel h2) { text-transform:uppercase; letter-spacing:.06em; }
[data-theme="retro"] .task-panel h2 { color:#7df3ff; font-size:1.2rem; text-shadow:0 0 10px rgba(0,229,255,.6); }
[data-theme="retro"] header.top { background:rgba(14,5,34,.82); backdrop-filter:blur(8px); border-bottom:1px solid #ff3cac; box-shadow:0 0 18px rgba(255,60,172,.45); }
[data-theme="retro"] .logo { text-transform:uppercase; letter-spacing:.06em; }
[data-theme="retro"] .logo .byte-img, [data-theme="retro"] .auth-card .byte-img, [data-theme="retro"] .task-scenario .byte-img { filter:drop-shadow(0 0 8px rgba(255,60,172,.8)); }
[data-theme="retro"] .course-btn { text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; }
[data-theme="retro"] .course-btn.active { background:rgba(255,60,172,.14); box-shadow:inset 0 -2px 0 #ff3cac,0 0 12px rgba(255,60,172,.35); color:#fff; }
[data-theme="retro"] .btn { text-transform:uppercase; letter-spacing:.06em; box-shadow:0 0 14px rgba(0,229,255,.55); }
[data-theme="retro"] .btn:hover:not([disabled]) { box-shadow:0 0 24px rgba(0,229,255,.9); }
[data-theme="retro"] :is(.btn.gelb,.auth-card button[type="submit"],.tour-next) { background:#ff3cac; border-color:#ff3cac; color:#12002b; box-shadow:0 0 14px rgba(255,60,172,.65); text-transform:uppercase; letter-spacing:.06em; }
[data-theme="retro"] :is(.btn.gelb,.auth-card button[type="submit"],.tour-next):hover:not([disabled]) { background:#ff6ac1; box-shadow:0 0 26px rgba(255,60,172,.95); }
[data-theme="retro"] .btn.hell { background:transparent; color:var(--text); border-color:#a05aff; box-shadow:none; }
[data-theme="retro"] :is(.task-card,.auth-card,.tour-bubble,.table-card,.hint-card,.teamchip) { border:1px solid rgba(160,90,255,.6); box-shadow:0 0 0 1px rgba(255,60,172,.12),0 0 20px rgba(160,90,255,.28); }
[data-theme="retro"] .task-card { position:relative; }
[data-theme="retro"] .task-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,#ff3cac,#a05aff,#00e5ff); box-shadow:0 0 10px rgba(255,60,172,.8); }
[data-theme="retro"] .task-scenario:not(:empty) { background-image:repeating-linear-gradient(90deg,rgba(255,60,172,.1) 0 1px,transparent 1px 16px),repeating-linear-gradient(0deg,rgba(0,229,255,.08) 0 1px,transparent 1px 16px),linear-gradient(110deg,rgba(255,60,172,.16),rgba(160,90,255,.14),rgba(0,229,255,.12)); background-size:auto; border:1px solid rgba(255,60,172,.6); box-shadow:0 0 28px rgba(255,60,172,.3); }
[data-theme="retro"] .sprechblase { background:rgba(14,5,34,.7); border:1px solid #00e5ff; box-shadow:0 0 12px rgba(0,229,255,.35); }
[data-theme="retro"] .sprechblase::before { background:rgb(14,5,34); border:1px solid #00e5ff; border-right:0; border-top:0; }
[data-theme="retro"] .xpbar, [data-theme="retro"] .xpbar i { border-radius:0; }
[data-theme="retro"] .xpbar i { background:repeating-linear-gradient(90deg,#ff3cac 0 10px,#00e5ff 10px 20px); box-shadow:0 0 12px rgba(255,60,172,.8); }
[data-theme="retro"] .exercise-item.active { background:rgba(0,229,255,.14); color:#fff; box-shadow:inset 3px 0 0 #00e5ff,0 0 14px rgba(0,229,255,.3); }
[data-theme="retro"] .exercise-item.solved .ex-num { background:#39ff88; border-color:#39ff88; box-shadow:0 0 10px rgba(57,255,136,.7); }
[data-theme="retro"] .exercise-item.solved .ex-num::after { color:#052b14; }
[data-theme="retro"] :is(.task-panel,.splitter) { background:rgba(14,5,34,.6); }
[data-theme="retro"] .chat-panel { background:rgba(14,5,34,.55); }
[data-theme="retro"] .sidebar { border-right-color:rgba(255,60,172,.45); }
[data-theme="retro"] .auth-screen { background:rgba(14,5,34,.5); }
[data-theme="retro"] .fuss { background:transparent; border-top:1px solid rgba(255,60,172,.5); }
[data-theme="retro"] .fuss a { color:#7df3ff; }
[data-theme="retro"] option { background:#1a0840; color:#f4eaff; }
@media (prefers-reduced-motion:reduce) { [data-theme="retro"] body::before { animation:none; } }

/* Byte: Orange und Navy, Punktraster, Pixel-Knöpfe */
[data-theme="byte"] body { background-color:#fffdf9; background-image:radial-gradient(rgba(29,42,90,.07) 1px,transparent 1.4px); background-size:16px 16px; }
[data-theme="byte"] .task-panel, [data-theme="byte"] .splitter { background:transparent; }
[data-theme="byte"] .logo { font-weight:800; }
[data-theme="byte"] .task-scenario:not(:empty) { background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.4px),linear-gradient(135deg,var(--hero-von),var(--hero-bis)); }
[data-theme="byte"] .auth-screen { background:linear-gradient(135deg,#2f4fa8,#162050); }
[data-theme="byte"] .btn { box-shadow:0 3px 0 rgba(0,0,0,.28); }
[data-theme="byte"] .btn:active:not([disabled]) { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.28); }
[data-theme="byte"] .btn.hell { box-shadow:0 2px 0 var(--linie); }
[data-theme="byte"] .btn.gelb { box-shadow:0 3px 0 #b86400; }
[data-theme="byte"] .xpbar i { background:repeating-linear-gradient(90deg,#F5921E 0 8px,#ffb04a 8px 16px); }
[data-theme="byte"] .xpbar { background:#e9e3d8; }
[data-theme="byte"] .exercise-item .ex-num { background:var(--akzent-hell); }
[data-theme="byte"] .exercise-item.active { background:var(--primaer); }

/* Marker: Schwarz-Weiß mit gelbem Textmarker-Strich */
[data-theme="marker"] :is(.task-panel h2,.fuss a,.course-btn.active) {
  text-decoration:underline; text-decoration-color:#FFE600; text-decoration-thickness:.42em; text-underline-offset:-.2em; text-decoration-skip-ink:none;
}
[data-theme="marker"] :is(.task-panel h2,.auth-card h1,.tour-bubble h3) { font-family:"Arial Black","Segoe UI Black","Helvetica Neue",Impact,system-ui,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.005em; line-height:1.15; }
[data-theme="marker"] .task-panel h2 { font-size:1.3rem; }
[data-theme="marker"] header.top { border-bottom:1px solid #111; }
[data-theme="marker"] .logo { text-transform:uppercase; letter-spacing:.02em; font-weight:900; }
[data-theme="marker"] .course-btn { text-transform:uppercase; letter-spacing:.05em; font-size:.8rem; font-weight:700; }
[data-theme="marker"] .course-btn:hover { background:transparent; text-decoration:underline; text-decoration-color:#FFE600; text-decoration-thickness:.4em; text-underline-offset:-.15em; }
[data-theme="marker"] .course-btn.active { background:transparent; }
[data-theme="marker"] .teamchip { background:#FFF9B8; border:1px solid #111; }
[data-theme="marker"] .btn { text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; font-weight:800; }
[data-theme="marker"] :is(.btn.gelb,.auth-card button[type="submit"],.tour-next) { background:#FFE600; border:1px solid #111; color:#111; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
[data-theme="marker"] :is(.btn.gelb,.auth-card button[type="submit"],.tour-next):hover:not([disabled]) { background:#fff04d; box-shadow:3px 3px 0 #111; }
[data-theme="marker"] .btn.hell { border-color:#111; }
[data-theme="marker"] .task-kicker { background:#FFE600; border:1px solid #111; color:#111; font-weight:700; }
[data-theme="marker"] .sprechblase { background:#FFE600; color:#111; font-weight:600; }
[data-theme="marker"] .sprechblase::before { background:#FFE600; }
[data-theme="marker"] .sidebar { background:#faf9f4; border-right:1px solid #111; }
[data-theme="marker"] .exercise-item.active { background:#111; color:#fff; }
[data-theme="marker"] .exercise-item:hover { background:#FFF9B8; }
[data-theme="marker"] .exercise-item .ex-num { border-color:#111; }
[data-theme="marker"] .exercise-item:not(.solved) .ex-num { background:#FFE600; color:#111; }
[data-theme="marker"] .dataset-switch select { border-color:#111; }
[data-theme="marker"] :is(.task-card,.table-card,.hint-card,.auth-card,.tour-bubble) { border:1px solid #111; }
[data-theme="marker"] .task-card { box-shadow:5px 5px 0 #FFE600; }
[data-theme="marker"] .hint-card { background:#FFF9B8; }
[data-theme="marker"] .auth-card { box-shadow:6px 6px 0 #111; }
[data-theme="marker"] .auth-screen { background:#FFE600; }
[data-theme="marker"] .xpbar { border:1px solid #111; }
[data-theme="marker"] .xpbar i { background:#FFE600; }
[data-theme="marker"] table.result-table th { color:#111; background:#FFF9B8; }
[data-theme="marker"] .chat-msg.tutor { background:#FFF9B8; border-color:#111; }
[data-theme="marker"] .fuss { background:#111; color:#e8e8e8; }
[data-theme="marker"] .fuss a { color:#fff; }
[data-theme="marker"] .fuss .herz { color:#FFE600; }
[data-theme="marker"] :is(input,textarea,select):focus, [data-theme="marker"] :is(#sql-input,#chat-input):focus { outline:2px solid #111; border-color:#111; }

/* ===== 5. Spezial-Designs: Star Wars, Pixel, Pinguin ===== */

/* --- Star Wars --- */
/* Star-Wars-Feinschliff: leuchtendes Gelb im Logo-Stil. */
:root[data-theme="starwars"] .task-card-label,
:root[data-theme="starwars"] .chapter-header { font-family: var(--font-display); }
:root[data-theme="starwars"] .logo {
  color: var(--akzent);
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px rgba(255, 232, 31, 0.5);
}
:root[data-theme="starwars"] button { box-shadow: 0 0 10px rgba(255, 232, 31, 0.3); }
:root[data-theme="starwars"] .exercise-item.active { box-shadow: 0 0 8px rgba(255, 232, 31, 0.3); }


/* --- Pixel und Pinguin (gemeinsame Regeln) --- */
/* Himmel mit Gras + Ziegelboden am unteren Rand (sichtbar hinter dem Chat). */
:root[data-theme="pixel"] body {
  background-color: var(--pixel-sky);
  background-image:
    linear-gradient(#43b047 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, #c4611c 0 22px, var(--linie) 22px 24px);
  background-size: 100% 16px, 100% 16px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Keine runden Ecken – Pixel sind eckig. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(button, select, input, textarea, .table-card, .hint-card,
  .exercise-item, .task-card, .task-scenario, .chat-msg, .tour-bubble, .tour-spotlight, .nav-toggle span) {
  border-radius: 0;
}

/* Dicke, dunkle Ränder wie Sprite-Umrisse. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .sidebar { border-right: 4px solid var(--linie); }
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .splitter { border-left: 4px solid var(--linie); width: 12px; }
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.table-card, #sql-input, #chat-input, select) {
  border: 3px solid var(--linie);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.hint-card, .task-card, .task-scenario:not(:empty)) {
  border: 3px solid var(--linie);
  border-left: 6px solid var(--akzent);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) table.result-table :is(th, td) { border: 2px solid var(--linie); }
:root:is([data-theme="pixel"], [data-theme="pinguin"]) #sql-input:focus,
:root:is([data-theme="pixel"], [data-theme="pinguin"]) #chat-input:focus { outline: 3px solid var(--pixel-coin); outline-offset: 0; }

/* Schriften: 8-Bit-Schrift ist sehr breit, daher kleiner setzen. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .logo {
  font-size: 0.8rem;
  color: var(--akzent);
  text-shadow: 2px 2px 0 var(--linie);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .task-panel h2 { font-size: 0.95rem; line-height: 1.6; }
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.chapter-header, .task-card-label) {
  font-family: var(--font-display);
  font-size: 0.55rem;
  line-height: 1.6;
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .tour-bubble h3 { font-size: 0.8rem; line-height: 1.5; }

/* Aufgabenliste: aktive Aufgabe als hervorgehobener Block mit Pixel-Schatten. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .exercise-item { border-width: 2px; }
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .exercise-item.active {
  border-color: var(--linie);
  box-shadow: var(--pixel-shadow);
}

/* Buttons als gelbe Fragezeichen-Blöcke: Lichtkante oben links, Schattenkante unten
   rechts, beim Klicken "drückt" sich der Block hinein. Die dezenten Hilfs-Buttons
   (Burger, Rundgang, Zurück, Schließen) behalten ihren schlichten Stil. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.btn:not(.hell), .auth-card button[type="submit"], .tour-next) {
  background: var(--pixel-coin);
  color: var(--text);
  border: 3px solid var(--linie);
  box-shadow: inset -3px -3px 0 var(--pixel-coin-dark), inset 3px 3px 0 #fff3a8, var(--pixel-shadow);
  font-family: var(--font-display);
  font-size: 0.6rem;
  line-height: 1.4;
  padding: 10px 12px;
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.btn:not(.hell), .auth-card button[type="submit"], .tour-next):hover {
  opacity: 1;
  filter: brightness(1.07);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.btn:not(.hell), .auth-card button[type="submit"], .tour-next):active {
  transform: translate(2px, 2px);
  box-shadow: inset -3px -3px 0 var(--pixel-coin-dark), inset 3px 3px 0 #fff3a8, 1px 1px 0 var(--linie);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) :is(.nav-toggle, .btn.hell, .tour-back) {
  border: 2px solid var(--linie);
  border-radius: 0;
}

/* Ein paar eckige Pixel-Wolken am Himmel hinter dem Chat (reines SVG, keine Bilddatei). */
:root[data-theme="pixel"] .chat-panel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='170' shape-rendering='crispEdges' fill='white'%3E%3Crect x='72' y='24' width='36' height='12'/%3E%3Crect x='60' y='36' width='72' height='12'/%3E%3Crect x='48' y='48' width='96' height='18'/%3E%3Crect x='354' y='92' width='24' height='10'/%3E%3Crect x='342' y='102' width='54' height='10'/%3E%3Crect x='332' y='112' width='78' height='14'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0;
}

/* Chat: Sprechblasen als Pixel-Kästen; Systemhinweise stehen direkt auf dem Himmel. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .chat-msg {
  border: 3px solid var(--linie);
  box-shadow: 4px 4px 0 rgba(43, 29, 14, 0.35);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .chat-msg.system {
  border: none;
  box-shadow: none;
  color: #ffffff;
  text-shadow: 2px 2px 0 var(--linie);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .tour-bubble {
  border: 3px solid var(--linie);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}


/* Pixel-Design: auch die Anmeldung eckig mit harten Schatten. */
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .auth-card {
  border: 4px solid var(--linie);
  border-radius: 0;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .auth-card h1 { font-size: 0.95rem; line-height: 1.5; color: var(--akzent); text-shadow: 2px 2px 0 var(--linie); }
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .auth-card input[type="email"],
:root:is([data-theme="pixel"], [data-theme="pinguin"]) .auth-card input[type="password"] { border: 3px solid var(--linie); border-radius: 0; }
:root[data-theme="pixel"] .auth-screen {
  background-color: var(--pixel-sky);
  background-image:
    linear-gradient(#43b047 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, #c4611c 0 22px, var(--linie) 22px 24px);
  background-size: 100% 16px, 100% 16px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
}

/* --- Pinguin --- */
/* Eisblauer Himmel, unten Schnee über Eisblöcken (sichtbar hinter dem Chat). */
:root[data-theme="pinguin"] body {
  background-color: var(--pixel-sky);
  background-image:
    linear-gradient(#ffffff 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, #8fd0ee 0 22px, var(--linie) 22px 24px);
  background-size: 100% 16px, 100% 16px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Hinter dem Chat: Schneeflocken und eine Eisscholle mit vier Pinguinen über der Eingabezeile. */
:root[data-theme="pinguin"] .chat-panel {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'360'%20height%3D'120'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'0'%20y%3D'104'%20width%3D'360'%20height%3D'6'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'0'%20y%3D'110'%20width%3D'360'%20height%3D'6'%20fill%3D'%23a9dcf2'%2F%3E%3Crect%20x%3D'0'%20y%3D'116'%20width%3D'360'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'52'%20width%3D'16'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'40'%20y%3D'56'%20width%3D'24'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'36'%20y%3D'60'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'60'%20width%3D'4'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'48'%20y%3D'60'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'56'%20y%3D'60'%20width%3D'4'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'60'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'36'%20y%3D'64'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'48'%20y%3D'64'%20width%3D'8'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'56'%20y%3D'64'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'36'%20y%3D'68'%20width%3D'32'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'32'%20y%3D'72'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'72'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'72'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'32'%20y%3D'76'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'76'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'76'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'32'%20y%3D'80'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'80'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'80'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'32'%20y%3D'84'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'84'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'84'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'36'%20y%3D'88'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'88'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'88'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'40'%20y%3D'92'%20width%3D'4'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'44'%20y%3D'92'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'60'%20y%3D'92'%20width%3D'4'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'40'%20y%3D'96'%20width%3D'24'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'36'%20y%3D'100'%20width%3D'12'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'56'%20y%3D'100'%20width%3D'12'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'112'%20y%3D'65'%20width%3D'12'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'109'%20y%3D'68'%20width%3D'18'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'106'%20y%3D'71'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'71'%20width%3D'3'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'115'%20y%3D'71'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'121'%20y%3D'71'%20width%3D'3'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'71'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'106'%20y%3D'74'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'115'%20y%3D'74'%20width%3D'6'%20height%3D'3'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'121'%20y%3D'74'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'106'%20y%3D'77'%20width%3D'24'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'103'%20y%3D'80'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'80'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'80'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'103'%20y%3D'83'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'83'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'83'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'103'%20y%3D'86'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'86'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'86'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'103'%20y%3D'89'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'89'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'89'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'106'%20y%3D'92'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'92'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'92'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'109'%20y%3D'95'%20width%3D'3'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'112'%20y%3D'95'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'124'%20y%3D'95'%20width%3D'3'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'109'%20y%3D'98'%20width%3D'18'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'106'%20y%3D'101'%20width%3D'9'%20height%3D'3'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'121'%20y%3D'101'%20width%3D'9'%20height%3D'3'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'256'%20y%3D'52'%20width%3D'16'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'56'%20width%3D'24'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'248'%20y%3D'60'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'60'%20width%3D'4'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'260'%20y%3D'60'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'268'%20y%3D'60'%20width%3D'4'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'60'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'248'%20y%3D'64'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'260'%20y%3D'64'%20width%3D'8'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'268'%20y%3D'64'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'248'%20y%3D'68'%20width%3D'32'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'244'%20y%3D'72'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'72'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'72'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'244'%20y%3D'76'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'76'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'76'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'244'%20y%3D'80'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'80'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'80'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'244'%20y%3D'84'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'84'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'84'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'248'%20y%3D'88'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'88'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'88'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'92'%20width%3D'4'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'92'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'272'%20y%3D'92'%20width%3D'4'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'96'%20width%3D'24'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'248'%20y%3D'100'%20width%3D'12'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'268'%20y%3D'100'%20width%3D'12'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'312'%20y%3D'78'%20width%3D'8'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'310'%20y%3D'80'%20width%3D'12'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'308'%20y%3D'82'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'82'%20width%3D'2'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'314'%20y%3D'82'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'318'%20y%3D'82'%20width%3D'2'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'82'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'308'%20y%3D'84'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'314'%20y%3D'84'%20width%3D'4'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'318'%20y%3D'84'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'308'%20y%3D'86'%20width%3D'16'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'306'%20y%3D'88'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'88'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'88'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'306'%20y%3D'90'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'90'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'90'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'306'%20y%3D'92'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'92'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'92'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'306'%20y%3D'94'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'94'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'94'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'308'%20y%3D'96'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'96'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'96'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'310'%20y%3D'98'%20width%3D'2'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'312'%20y%3D'98'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'320'%20y%3D'98'%20width%3D'2'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'310'%20y%3D'100'%20width%3D'12'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'308'%20y%3D'102'%20width%3D'6'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'318'%20y%3D'102'%20width%3D'6'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'170'%20shape-rendering%3D'crispEdges'%20fill%3D'white'%3E%3Crect%20x%3D'34'%20y%3D'14'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'30'%20y%3D'18'%20width%3D'12'%20height%3D'4'%2F%3E%3Crect%20x%3D'34'%20y%3D'22'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'174'%20y%3D'50'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'170'%20y%3D'54'%20width%3D'12'%20height%3D'4'%2F%3E%3Crect%20x%3D'174'%20y%3D'58'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'100'%20y%3D'112'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'96'%20y%3D'116'%20width%3D'12'%20height%3D'4'%2F%3E%3Crect%20x%3D'100'%20y%3D'120'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'220'%20y%3D'12'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'70'%20y%3D'74'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'140'%20y%3D'142'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'240'%20y%3D'120'%20width%3D'4'%20height%3D'4'%2F%3E%3Crect%20x%3D'12'%20y%3D'140'%20width%3D'4'%20height%3D'4'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 24px bottom 62px, 0 0;
}

/* Kleiner Pinguin hinter dem Titel in der Seitenleiste. */
:root[data-theme="pinguin"] #brand-title::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 26px;
  margin-left: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'26'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'8'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'6'%20y%3D'2'%20width%3D'12'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'4'%20y%3D'4'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'4'%20width%3D'2'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'10'%20y%3D'4'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'14'%20y%3D'4'%20width%3D'2'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'4'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'4'%20y%3D'6'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'10'%20y%3D'6'%20width%3D'4'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'14'%20y%3D'6'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'4'%20y%3D'8'%20width%3D'16'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'2'%20y%3D'10'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'10'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'10'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'2'%20y%3D'12'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'12'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'12'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'2'%20y%3D'14'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'14'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'14'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'2'%20y%3D'16'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'16'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'16'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'4'%20y%3D'18'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'18'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'18'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'6'%20y%3D'20'%20width%3D'2'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'8'%20y%3D'20'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'16'%20y%3D'20'%20width%3D'2'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'6'%20y%3D'22'%20width%3D'12'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'4'%20y%3D'24'%20width%3D'6'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'14'%20y%3D'24'%20width%3D'6'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3C%2Fsvg%3E") no-repeat;
}

/* Anmeldung: Schnee, Eisblöcke und eine Pinguin-Gruppe. */
:root[data-theme="pinguin"] .auth-screen {
  background-color: var(--pixel-sky);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'65'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'30'%20y%3D'0'%20width%3D'20'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'25'%20y%3D'5'%20width%3D'30'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'20'%20y%3D'10'%20width%3D'10'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'10'%20width%3D'5'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'35'%20y%3D'10'%20width%3D'10'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'45'%20y%3D'10'%20width%3D'5'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'10'%20width%3D'10'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'20'%20y%3D'15'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'35'%20y%3D'15'%20width%3D'10'%20height%3D'5'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'45'%20y%3D'15'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'20'%20y%3D'20'%20width%3D'40'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'15'%20y%3D'25'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'25'%20width%3D'20'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'25'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'15'%20y%3D'30'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'30'%20width%3D'20'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'30'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'15'%20y%3D'35'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'35'%20width%3D'20'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'35'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'15'%20y%3D'40'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'40'%20width%3D'20'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'40'%20width%3D'15'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'20'%20y%3D'45'%20width%3D'10'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'45'%20width%3D'20'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'45'%20width%3D'10'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'25'%20y%3D'50'%20width%3D'5'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'30'%20y%3D'50'%20width%3D'20'%20height%3D'5'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'50'%20y%3D'50'%20width%3D'5'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'25'%20y%3D'55'%20width%3D'30'%20height%3D'5'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'20'%20y%3D'60'%20width%3D'15'%20height%3D'5'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'45'%20y%3D'60'%20width%3D'15'%20height%3D'5'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'126'%20y%3D'13'%20width%3D'16'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'122'%20y%3D'17'%20width%3D'24'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'118'%20y%3D'21'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'21'%20width%3D'4'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'130'%20y%3D'21'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'138'%20y%3D'21'%20width%3D'4'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'21'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'118'%20y%3D'25'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'130'%20y%3D'25'%20width%3D'8'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'138'%20y%3D'25'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'118'%20y%3D'29'%20width%3D'32'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'114'%20y%3D'33'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'33'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'33'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'114'%20y%3D'37'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'37'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'37'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'114'%20y%3D'41'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'41'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'41'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'114'%20y%3D'45'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'45'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'45'%20width%3D'12'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'118'%20y%3D'49'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'49'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'49'%20width%3D'8'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'122'%20y%3D'53'%20width%3D'4'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'126'%20y%3D'53'%20width%3D'16'%20height%3D'4'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'142'%20y%3D'53'%20width%3D'4'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'122'%20y%3D'57'%20width%3D'24'%20height%3D'4'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'118'%20y%3D'61'%20width%3D'12'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'138'%20y%3D'61'%20width%3D'12'%20height%3D'4'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'202'%20y%3D'26'%20width%3D'12'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'199'%20y%3D'29'%20width%3D'18'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'196'%20y%3D'32'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'32'%20width%3D'3'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'205'%20y%3D'32'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'211'%20y%3D'32'%20width%3D'3'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'32'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'196'%20y%3D'35'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'205'%20y%3D'35'%20width%3D'6'%20height%3D'3'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'211'%20y%3D'35'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'196'%20y%3D'38'%20width%3D'24'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'193'%20y%3D'41'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'41'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'41'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'193'%20y%3D'44'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'44'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'44'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'193'%20y%3D'47'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'47'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'47'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'193'%20y%3D'50'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'50'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'50'%20width%3D'9'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'196'%20y%3D'53'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'53'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'53'%20width%3D'6'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'199'%20y%3D'56'%20width%3D'3'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'202'%20y%3D'56'%20width%3D'12'%20height%3D'3'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'214'%20y%3D'56'%20width%3D'3'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'199'%20y%3D'59'%20width%3D'18'%20height%3D'3'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'196'%20y%3D'62'%20width%3D'9'%20height%3D'3'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'211'%20y%3D'62'%20width%3D'9'%20height%3D'3'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'258'%20y%3D'39'%20width%3D'8'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'41'%20width%3D'12'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'254'%20y%3D'43'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'43'%20width%3D'2'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'260'%20y%3D'43'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'264'%20y%3D'43'%20width%3D'2'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'43'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'254'%20y%3D'45'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'260'%20y%3D'45'%20width%3D'4'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'264'%20y%3D'45'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'254'%20y%3D'47'%20width%3D'16'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'49'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'49'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'49'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'51'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'51'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'51'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'53'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'53'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'53'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'252'%20y%3D'55'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'55'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'55'%20width%3D'6'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'254'%20y%3D'57'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'57'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'57'%20width%3D'4'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'59'%20width%3D'2'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'258'%20y%3D'59'%20width%3D'8'%20height%3D'2'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'266'%20y%3D'59'%20width%3D'2'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'256'%20y%3D'61'%20width%3D'12'%20height%3D'2'%20fill%3D'%2314202e'%2F%3E%3Crect%20x%3D'254'%20y%3D'63'%20width%3D'6'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3Crect%20x%3D'264'%20y%3D'63'%20width%3D'6'%20height%3D'2'%20fill%3D'%23ff9f1c'%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(#ffffff 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, #8fd0ee 0 22px, var(--linie) 22px 24px);
  background-size: 300px 65px, 100% 16px, 100% 16px;
  background-position: 6% calc(100% - 14px), left bottom, left bottom;
  background-repeat: no-repeat;
}


/* --- Anpassungen der Spezial-Designs an die neue Oberfläche --- */
/* Star Wars, Pixel, Pinguin: Aufgabenbereich als helle Fläche, Chat darunter durchsichtig bzw. mit Hintergrund */
:is([data-theme="starwars"],[data-theme="pixel"],[data-theme="pinguin"]) :is(.task-panel,.splitter) { background:var(--flaeche); }
:is([data-theme="starwars"],[data-theme="pixel"],[data-theme="pinguin"]) .task-card { box-shadow:none; background:var(--bg-2); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .chat-panel { background-color:transparent; }
:is([data-theme="pixel"],[data-theme="pinguin"]) :is(.logo small,.teamchip) { display:none; }
:is([data-theme="pixel"],[data-theme="pinguin"]) :is(.exercise-item .ex-num,.status) { border-radius:0; }
:is([data-theme="pixel"],[data-theme="pinguin"]) header.top { border-bottom:4px solid var(--linie); box-shadow:none; }
:is([data-theme="pixel"],[data-theme="pinguin"]) .fuss { border-top:4px solid var(--linie); background:var(--flaeche); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .sidebar { background:var(--flaeche); }
:is([data-theme="pixel"],[data-theme="pinguin"]) :is(.course-btn.active) { background:var(--pixel-coin); color:var(--text); box-shadow:inset 0 0 0 2px var(--linie); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .course-btn { font-family:var(--font-display); font-size:.6rem; padding:.55rem .8rem; }
:is([data-theme="pixel"],[data-theme="pinguin"]) .task-scenario:not(:empty) { border:3px solid var(--linie); background-image:none; background-color:var(--pixel-sky); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .task-scenario .sprechblase { border:3px solid var(--linie); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .task-scenario .byte-img,
:is([data-theme="pixel"],[data-theme="pinguin"]) .auth-card .byte-img { image-rendering:pixelated; }
:is([data-theme="pixel"],[data-theme="pinguin"]) .themeliste { border:3px solid var(--linie); box-shadow:4px 4px 0 rgba(0,0,0,.4); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .themeliste button { font-size:.9rem; }
:is([data-theme="pixel"],[data-theme="pinguin"]) .result-status { border:2px solid var(--linie); }
:is([data-theme="pixel"],[data-theme="pinguin"]) .task-kicker { border:2px solid var(--linie); font-family:var(--font-display); font-size:.5rem; }
[data-theme="pixel"] .auth-card .byte-img, [data-theme="pinguin"] .auth-card .byte-img { height:120px; }
/* Star Wars: Leuchten auch an den neuen Bauteilen */
[data-theme="starwars"] .btn.gelb, [data-theme="starwars"] .auth-card button[type="submit"], [data-theme="starwars"] .tour-next { box-shadow:0 0 10px rgba(255,232,31,.3); }
[data-theme="starwars"] .task-panel h2 { letter-spacing:.04em; font-size:1.2rem; }
[data-theme="starwars"] .logo { font-family:var(--font-display); }
[data-theme="starwars"] header.top { border-bottom-color:rgba(255,232,31,.35); }
[data-theme="starwars"] .auth-screen { background:radial-gradient(ellipse at 50% 120%,#1a2030,#05070d 70%); }
[data-theme="starwars"] .fuss { background:#05070d; }