make css more generic

classes/grundrechenarten.json

@@ -1,18 +1,31 @@
 {
   "id": "grundrechenarten",
-  "name": "Grundrechenarten",
+  "name": "Einhorn-Mathe",
-  "icon": "➕",
+  "icon": "🦄",
-  "description": "Lerne die Grundlagen der Mathematik",
+  "description": "Magische Mathematik mit Einhörnern und Regenbögen",
   "theme": {
-    "--theme-bg": "#1a2f1a",
+    "--theme-bg": "#2d1b69",
-    "--theme-bg-mid": "#2a4a2a",
+    "--theme-bg-mid": "#4a1a8a",
-    "--theme-bg-light": "#3a6a3a",
+    "--theme-bg-light": "#6b35b5",
-    "--theme-bg-hover": "#4a7a4a",
+    "--theme-bg-hover": "#7d42cc",
-    "--theme-text": "#e8f5e8",
+    "--theme-text": "#fce4ff",
-    "--theme-muted": "#7fa87f",
+    "--theme-muted": "#c4a0dc",
-    "--theme-muted-light": "#aed4ae",
+    "--theme-muted-light": "#dfc4f0",
-    "--theme-accent": "#4caf50",
+    "--theme-accent": "#ff69b4",
-    "--theme-accent-hover": "#388e3c"
+    "--theme-accent-hover": "#e91e8c",
+    "--theme-content-bg": "#fef0ff",
+    "--theme-card-bg": "#fce8ff",
+    "--theme-card-radius": "16px",
+    "--theme-ui-radius": "12px",
+    "--theme-card-shadow": "0 6px 24px rgba(255,105,180,0.18)",
+    "--theme-font": "'Trebuchet MS', sans-serif",
+    "--theme-text-transform": "none",
+    "--theme-letter-spacing": "0px",
+    "--theme-h1-letter-spacing": "0px",
+    "--theme-sidebar-item-margin": "3px 8px",
+    "--theme-sidebar-active-bg": "#ff69b4",
+    "--theme-sidebar-active-border": "none",
+    "--theme-sidebar-active-color": "#ffffff"
   },
   "lessons": ["adding"]
 }

classes/kriminalfälle.json

@@ -12,7 +12,20 @@
     "--theme-muted": "#7f8c8d",
     "--theme-muted-light": "#bdc3c7",
     "--theme-accent": "#3498db",
-    "--theme-accent-hover": "#2980b9"
+    "--theme-accent-hover": "#2980b9",
+    "--theme-content-bg": "#f4f1ec",
+    "--theme-card-bg": "#ffffff",
+    "--theme-card-radius": "0px",
+    "--theme-ui-radius": "0px",
+    "--theme-card-shadow": "0 1px 3px rgba(0,0,0,0.12)",
+    "--theme-font": "Georgia, 'Times New Roman', serif",
+    "--theme-text-transform": "uppercase",
+    "--theme-letter-spacing": "1px",
+    "--theme-h1-letter-spacing": "2px",
+    "--theme-sidebar-item-margin": "0",
+    "--theme-sidebar-active-bg": "#1a252f",
+    "--theme-sidebar-active-border": "4px solid #3498db",
+    "--theme-sidebar-active-color": "#ecf0f1"
   },
   "lessons": ["steglitz", "bode-museum", "dresden-gruenes-gewoelbe"]
 }

lessons/adding.json

@@ -15,132 +15,6 @@
       "answer": 3,
       "points": 10,
       "type": "word-problem"
-    },
-    {
-      "id": "adding-3",
-      "question": "Was ist 2 + 2?",
-      "answer": 4,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-4",
-      "question": "Was ist 3 + 2?",
-      "answer": 5,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-5",
-      "question": "Was ist 3 + 3?",
-      "answer": 6,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-6",
-      "question": "Was ist 4 + 3?",
-      "answer": 7,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-7",
-      "question": "Was ist 4 + 4?",
-      "answer": 8,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-8",
-      "question": "Was ist 5 + 4?",
-      "answer": 9,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-9",
-      "question": "Was ist 5 + 5?",
-      "answer": 10,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-10",
-      "question": "Was ist 6 + 4?",
-      "answer": 10,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-11",
-      "question": "Was ist 6 + 5?",
-      "answer": 11,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-12",
-      "question": "Was ist 6 + 6?",
-      "answer": 12,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-13",
-      "question": "Was ist 7 + 5?",
-      "answer": 12,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-14",
-      "question": "Was ist 7 + 6?",
-      "answer": 13,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-15",
-      "question": "Was ist 7 + 7?",
-      "answer": 14,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-16",
-      "question": "Was ist 8 + 6?",
-      "answer": 14,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-17",
-      "question": "Was ist 8 + 7?",
-      "answer": 15,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-18",
-      "question": "Was ist 9 + 7?",
-      "answer": 16,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-19",
-      "question": "Was ist 9 + 8?",
-      "answer": 17,
-      "points": 10,
-      "type": "word-problem"
-    },
-    {
-      "id": "adding-20",
-      "question": "Was ist 9 + 9?",
-      "answer": 18,
-      "points": 10,
-      "type": "word-problem"
     }
   ]
 }

public/app.js

@@ -84,6 +84,7 @@ function applyTheme(theme) {
     });
 }
 
+
 // ─── Screen management ───────────────────────────────────────────────────────
 
 function showScreen(screen) {
@@ -124,12 +125,17 @@ async function showClassPicker() {
     classes.forEach(cls => {
         const card = document.createElement('div');
         card.className = 'class-card';
-        card.style.setProperty('--card-accent', cls.theme['--theme-accent'] || 'var(--theme-accent)');
+        const bg = cls.theme['--theme-bg-mid'] || '';
+        const border = cls.theme['--theme-accent'] || '';
+        const text = cls.theme['--theme-text'] || '';
+        const muted = cls.theme['--theme-muted'] || '';
+        if (bg) card.style.background = bg;
+        if (border) card.style.borderColor = border;
         card.innerHTML = `
             <div class="class-card-icon">${cls.icon || '📚'}</div>
             <div class="class-card-info">
-                <div class="class-card-name">${cls.name}</div>
+                <div class="class-card-name" style="color:${text}">${cls.name}</div>
-                <div class="class-card-desc">${cls.description || ''}</div>
+                <div class="class-card-desc" style="color:${muted}">${cls.description || ''}</div>
             </div>
         `;
         card.onclick = () => selectClass(cls.id);

public/index.html

@@ -118,9 +118,10 @@
                 </div>
                 <div class="user-display">
                   <div class="user-name" id="userDisplayName"></div>
-                  <button class="logout-button" onclick="logout()">
+                  <div class="user-buttons">
-                    Abmelden
+                    <button class="logout-button" onclick="showClassPicker()">Klasse wechseln</button>
-                  </button>
+                    <button class="logout-button" onclick="logout()">Abmelden</button>
+                  </div>
                 </div>
               </div>
             </div>

public/style.css

@@ -1,13 +1,29 @@
 :root {
-    --theme-bg: #1a252f;
+    /* Shell colors — neutral light defaults (auth, class picker) */
-    --theme-bg-mid: #2c3e50;
+    --theme-bg: #f0f2f5;
-    --theme-bg-light: #34495e;
+    --theme-bg-mid: #ffffff;
-    --theme-bg-hover: #3d566e;
+    --theme-bg-light: #e0e4ea;
-    --theme-text: #ecf0f1;
+    --theme-bg-hover: #d0d5de;
-    --theme-muted: #7f8c8d;
+    --theme-text: #2c3e50;
-    --theme-muted-light: #bdc3c7;
+    --theme-muted: #8892a4;
-    --theme-accent: #3498db;
+    --theme-muted-light: #a8b2c0;
-    --theme-accent-hover: #2980b9;
+    --theme-accent: #4a90d9;
+    --theme-accent-hover: #3a7bc8;
+
+    /* Content area / lesson-level theming */
+    --theme-content-bg: #e8ecf0;
+    --theme-card-bg: #ffffff;
+    --theme-card-radius: 4px;
+    --theme-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+    --theme-font: 'Arial', sans-serif;
+    --theme-ui-radius: 0px;
+    --theme-text-transform: uppercase;
+    --theme-letter-spacing: 1px;
+    --theme-h1-letter-spacing: 2px;
+    --theme-sidebar-item-margin: 0;
+    --theme-sidebar-active-bg: var(--theme-bg);
+    --theme-sidebar-active-border: 4px solid var(--theme-accent);
+    --theme-sidebar-active-color: var(--theme-text);
 }
 
 * {
@@ -17,7 +33,7 @@
 }
 
 body {
-    font-family: 'Arial', 'Helvetica', sans-serif;
+    font-family: var(--theme-font);
     background: var(--theme-bg-mid);
     min-height: 100vh;
     padding: 0;
@@ -54,8 +70,8 @@ body {
     color: var(--theme-text);
     font-size: 1.2em;
     font-weight: bold;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
 }
 
 .sidebar-item {
@@ -65,6 +81,8 @@ body {
     border-bottom: 1px solid var(--theme-bg-mid);
     background: var(--theme-bg-light);
     color: var(--theme-text);
+    margin: var(--theme-sidebar-item-margin);
+    border-radius: var(--theme-ui-radius);
 }
 
 .sidebar-item:hover {
@@ -72,9 +90,9 @@ body {
 }
 
 .sidebar-item.active {
-    background: var(--theme-bg);
+    background: var(--theme-sidebar-active-bg);
-    border-left: 4px solid var(--theme-accent);
+    border-left: var(--theme-sidebar-active-border);
-    color: var(--theme-text);
+    color: var(--theme-sidebar-active-color);
     font-weight: bold;
 }
 
@@ -88,7 +106,7 @@ body {
 }
 
 .sidebar-item.completed.active {
-    background: var(--theme-bg);
+    background: var(--theme-sidebar-active-bg);
     border-left: 4px solid #27ae60;
 }
 
@@ -104,9 +122,7 @@ body {
     border: 1px solid #7f3030;
     color: #c0392b;
     font-size: 0.8em;
-    font-family: 'Arial', sans-serif;
+    font-family: inherit;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
     cursor: pointer;
     transition: background-color 0.2s, color 0.2s;
     display: block;
@@ -125,7 +141,7 @@ body {
 
 .container {
     max-width: 100%;
-    background: #ffffff;
+    background: var(--theme-content-bg);
     padding: 0;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     min-height: 100vh;
@@ -151,23 +167,23 @@ h1 {
     color: var(--theme-text);
     margin: 0;
     font-weight: bold;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 2px;
+    letter-spacing: var(--theme-h1-letter-spacing);
 }
 
 .points-display {
     background: var(--theme-bg-mid);
     padding: 15px 25px;
     border: 2px solid var(--theme-accent);
-    border-radius: 4px;
+    border-radius: var(--theme-ui-radius);
     text-align: center;
 }
 
 .points-label {
     font-size: 0.85em;
     color: var(--theme-muted-light);
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
     margin-bottom: 5px;
 }
 
@@ -193,8 +209,8 @@ h1 {
     color: var(--theme-text);
     margin-bottom: 10px;
     font-weight: bold;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
 }
 
 .progress-bar-container {
@@ -202,6 +218,7 @@ h1 {
     height: 25px;
     background: var(--theme-bg-mid);
     border: 1px solid var(--theme-bg);
+    border-radius: var(--theme-ui-radius);
     overflow: hidden;
     margin-bottom: 8px;
 }
@@ -226,17 +243,16 @@ h1 {
 }
 
 .chapter-description {
-    background: #f8f9fa;
+    background: rgba(0, 0, 0, 0.04);
     padding: 20px 25px;
     margin-bottom: 30px;
     font-size: 1em;
     line-height: 1.7;
     color: #2c3e50;
     border-left: 4px solid var(--theme-accent);
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
-    border-right: 1px solid #e0e0e0;
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .task-container {
@@ -245,13 +261,14 @@ h1 {
 }
 
 .task-card {
-    background: #ffffff;
+    background: var(--theme-card-bg);
     padding: 30px;
-    border: 2px solid #e0e0e0;
+    border: 2px solid rgba(0, 0, 0, 0.08);
     border-left: 4px solid var(--theme-accent);
+    border-radius: var(--theme-card-radius);
     transition: border-color 0.2s, box-shadow 0.2s;
     position: relative;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--theme-card-shadow);
 }
 
 .task-card:hover {
@@ -301,16 +318,16 @@ h1 {
 .task-title {
     font-size: 1.1em;
     font-weight: bold;
-    color: var(--theme-bg);
+    color: #1a252f;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
 }
 
 .task-points {
     background: var(--theme-bg-light);
     color: var(--theme-text);
     padding: 6px 15px;
-    border-radius: 2px;
+    border-radius: var(--theme-ui-radius);
     font-weight: bold;
     font-size: 0.9em;
     border: 1px solid var(--theme-bg-mid);
@@ -339,10 +356,10 @@ h1 {
     font-size: 1.2em;
     padding: 12px 18px;
     border: 2px solid #bdc3c7;
-    border-radius: 2px;
+    border-radius: var(--theme-ui-radius);
     width: 150px;
     text-align: center;
-    font-family: 'Arial', sans-serif;
+    font-family: inherit;
     font-weight: bold;
     background: #ffffff;
     color: #1a1a1a;
@@ -360,12 +377,12 @@ h1 {
     border: none;
     padding: 12px 30px;
     font-size: 1em;
-    border-radius: 2px;
+    border-radius: var(--theme-ui-radius);
     cursor: pointer;
-    font-family: 'Arial', sans-serif;
+    font-family: inherit;
     font-weight: bold;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
     transition: background-color 0.2s;
 }
 
@@ -437,6 +454,7 @@ h1 {
 .auth-card {
     background: var(--theme-bg-mid);
     border: 1px solid var(--theme-bg-light);
+    border-radius: var(--theme-ui-radius);
     padding: 32px;
     width: 100%;
     max-width: 360px;
@@ -479,6 +497,7 @@ h1 {
     margin-bottom: 10px;
     background: var(--theme-bg);
     border: 1px solid var(--theme-bg-light);
+    border-radius: var(--theme-ui-radius);
     color: var(--theme-text);
     font-size: 0.95em;
     transition: border-color 0.2s;
@@ -507,6 +526,7 @@ h1 {
     background: var(--theme-accent);
     color: white;
     border: none;
+    border-radius: var(--theme-ui-radius);
     font-size: 0.95em;
     cursor: pointer;
     transition: background-color 0.2s;
@@ -532,6 +552,7 @@ h1 {
 .class-picker-card {
     background: var(--theme-bg-mid);
     border: 1px solid var(--theme-bg-light);
+    border-radius: var(--theme-ui-radius);
     padding: 40px;
     width: 100%;
     max-width: 560px;
@@ -558,6 +579,7 @@ h1 {
 .class-card {
     background: var(--theme-bg);
     border: 2px solid var(--card-accent, var(--theme-accent));
+    border-radius: var(--theme-ui-radius);
     padding: 20px 24px;
     cursor: pointer;
     transition: opacity 0.15s, transform 0.15s;
@@ -615,8 +637,13 @@ h1 {
 .user-name {
     color: var(--theme-muted-light);
     font-size: 0.85em;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
+}
+
+.user-buttons {
+    display: flex;
+    gap: 6px;
 }
 
 .logout-button {
@@ -625,9 +652,9 @@ h1 {
     color: var(--theme-muted);
     padding: 5px 12px;
     font-size: 0.8em;
-    font-family: 'Arial', sans-serif;
+    font-family: inherit;
-    text-transform: uppercase;
+    text-transform: var(--theme-text-transform);
-    letter-spacing: 1px;
+    letter-spacing: var(--theme-letter-spacing);
     cursor: pointer;
     transition: border-color 0.2s, color 0.2s;
 }