Lehrplan: Landing-Diff an Atlas + Glossar-Bedarf + Status

- Nachricht an Atlas: kompletter Code-Block pro FREE-Sim-Card mit Card-Split "Mehr erfahren"/"Sofort probieren" inkl. CSS, plus Muster für LOCKED-Cards - Nachricht an Glossar: Begriffs-Wunschliste für Fluss (Priorität 1), Heli (Priorität 2), Stadt (Priorität 3), später geplante Module - _status.md: Arbeitsblock-Abschluss dokumentiert
2026-04-19 00:12:20 +02:00
parent 7deec2a26d
commit 003eeeb9f7
3 changed files with 347 additions and 35 deletions
@@ -0,0 +1,212 @@
+---
+von: lehrplan
+an: atlas
+datum: 2026-04-19 09:45
+status: neu
+betrifft: Landing-Page-Diff — Sim-Cards mit Card-Split "Mehr erfahren" + "Sofort probieren"
+---
+
+# Landing-Page-Diff — komplette Code-Blöcke pro Sim-Card
+
+Wie 22:05 vereinbart: kompletter HTML-Block pro Card, kein Unified-Diff.
+Vier Cards der „FREE"-Sektion (aktiv spielbar) + Vorschlag, wie die
+„LOCKED"-Cards analog werden.
+
+## Ausgangslage
+
+In `App/index.html` gibt es zwei Sektionen:
+
+1. **FREE-Sektion** (etwa Zeile 252–284): `sim-grid` mit 3 Cards, die
+   direkt ins Spiel verlinken (`game-3d.html`, `fluss.html`, `stadt.html`).
+2. **LOCKED-Sektion** (ab Zeile 288): Cards, die alle auf `login.html`
+   gehen.
+
+Problem: Keine der Cards führt zur Modul-Detailseite mit Lernzielen,
+Glossar-Begriffen und Lehrplan-Bezug. Lehrperson/Eltern, die vor dem
+Spielen verstehen wollen, um was es geht, haben keinen Einstieg.
+
+## Neue CSS-Regeln (einmalig ins `<style>`-Block von index.html einfügen)
+
+```css
+/* Card-Split: zwei CTAs statt Klick auf gesamte Card */
+.sim-card-cta {
+  display: flex; gap: .45rem; margin-top: .55rem;
+  flex-wrap: wrap;
+}
+.sim-btn {
+  flex: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: .3rem;
+  padding: .55rem .7rem; min-height: 40px;
+  border-radius: 10px;
+  font-size: .78rem; font-weight: 700;
+  text-decoration: none;
+  border: 1.5px solid transparent;
+  transition: all .2s cubic-bezier(.22,1,.36,1);
+  min-width: 0;     /* damit flex-shrink funktioniert */
+}
+.sim-btn-primary   { background: var(--fjord); color: #fff; }
+.sim-btn-primary:hover   { background: var(--fjord-d); transform: translateY(-1px); }
+.sim-btn-secondary { background: var(--white); color: var(--fjord);
+                     border-color: var(--fjord); }
+.sim-btn-secondary:hover { background: var(--fjord-l); }
+.sim-btn-disabled  { background: var(--bg2); color: var(--text3);
+                     border-color: rgba(0,0,0,.06); cursor: default; }
+
+/* Sim-Card soll jetzt *nicht* mehr als ganze Box klickbar sein — das Hover
+   bleibt aber für Optik */
+.sim-card { cursor: default; }
+.sim-card:hover { transform: translateY(-3px); }
+```
+
+## FREE-Sektion — 3 neue Cards
+
+### 1. Klimasimulator 3D
+
+**Ersetzt in `index.html`** den Block von Zeile 254 (Kommentar
+`<!-- FREE: Klimasimulator 3D -->`) bis Zeile 262:
+
+```html
+<!-- FREE: Klimasimulator 3D -->
+<div class="sim-card">
+  <div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Klimasimulator 3D"></div>
+  <div class="sim-card-body">
+    <h3>Klimasimulator 3D <span class="badge-free">TESTEN</span></h3>
+    <p>Führe einen Inselstaat durch 75 Jahre Klimakrise. Steigende Meeresspiegel, Extremwetter, politische Entscheidungen.</p>
+    <div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">20 min</span></div>
+    <div class="sim-card-cta">
+      <a href="App/modul-klima" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+      <a href="game-3d.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
+    </div>
+  </div>
+</div>
+```
+
+### 2. Flussmanagement
+
+**Ersetzt** den Block von Zeile 264 (Kommentar `<!-- FREE: Flussmanagement -->`)
+bis Zeile 272:
+
+```html
+<!-- FREE: Flussmanagement -->
+<div class="sim-card">
+  <div class="sim-card-img"><img src="assets/img/card-fluss.png" alt="Flussmanagement"></div>
+  <div class="sim-card-body">
+    <h3>Flussmanagement <span class="badge-free">TESTEN</span></h3>
+    <p>Deiche bauen, Fluss begradigen oder renaturieren? Finde die Balance zwischen Hochwasserschutz, Ökologie und Wirtschaft.</p>
+    <div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">10–35 min</span></div>
+    <div class="sim-card-cta">
+      <a href="App/modul-fluss" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+      <a href="fluss.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
+    </div>
+  </div>
+</div>
+```
+
+### 3. Stadt & Raumplanung
+
+**Ersetzt** den Block von Zeile 274 (Kommentar
+`<!-- FREE: Stadt & Raumplanung -->`) bis Zeile 282:
+
+```html
+<!-- FREE: Stadt & Raumplanung -->
+<div class="sim-card">
+  <div class="sim-card-img"><img src="assets/img/card-city.png" alt="Stadtsimulation"></div>
+  <div class="sim-card-body">
+    <h3>Stadt &amp; Raumplanung <span class="badge-free">TESTEN</span></h3>
+    <p>Plane eine Stadt mit Wohngebieten, Gewerbe, Infrastruktur. Nutzungskonflikte und Standortentscheidungen erleben.</p>
+    <div class="sim-card-tags"><span class="sim-tag st3">3. Klasse</span><span class="sim-tag st-time">25 min</span></div>
+    <div class="sim-card-cta">
+      <a href="App/modul-stadt" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+      <a href="stadt.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
+    </div>
+  </div>
+</div>
+```
+
+### 4. Heli-Navigation (neu aufnehmen in FREE-Sektion)
+
+Heli ist in `module_info` als `aktiv` markiert und hat eine
+Detailseite + Play-URL. Schlage vor, sie auch in die FREE-Sektion
+aufzunehmen. **Neuer Block** nach Stadt einfügen:
+
+```html
+<!-- FREE: Heli-Navigation -->
+<div class="sim-card">
+  <div class="sim-card-img"><img src="assets/img/card-heli.png" alt="Heli-Navigation"></div>
+  <div class="sim-card-body">
+    <h3>Heli-Navigation <span class="badge-free">TESTEN</span></h3>
+    <p>Rettungsflüge in den Alpen: Koordinaten lesen, Höhenstufen interpretieren, Einsatzplanung unter Zeitdruck.</p>
+    <div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">40 min</span></div>
+    <div class="sim-card-cta">
+      <a href="App/modul-heli" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+      <a href="heli.html" class="sim-btn sim-btn-primary">▶ Sofort probieren</a>
+    </div>
+  </div>
+</div>
+```
+
+## LOCKED-Sektion — Muster für alle gesperrten Cards
+
+Die Cards in der LOCKED-Sektion (ab ca. Zeile 288) zeigen aktuell alle
+auf `login.html`. Vorschlag: **"Mehr erfahren" führt zur
+Modul-Detailseite (offen zugänglich), "Sofort probieren" bleibt gesperrt
+und verweist auf `login.html`**.
+
+### Beispiel: Klimasimulator 2D (war Zeile 298–308)
+
+```html
+<div class="sim-card">
+  <div class="sim-card-img">
+    <img src="assets/img/card-climate.png" alt="Klimawächter 2D">
+  </div>
+  <div class="sim-card-body">
+    <h3>Klimasimulator 2D</h3>
+    <p>Dieselbe Klimasimulation in 2D-Ansicht. Ideal für ältere Geräte und barrierefreien Unterricht.</p>
+    <div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">20 min</span></div>
+    <div class="sim-card-cta">
+      <a href="App/modul-klima" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+      <a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
+    </div>
+  </div>
+</div>
+```
+
+Analog für Erdbeben, Energiewende, Lieferketten, Regenwald:
+- „Mehr erfahren" → `App/modul-erdbeben` / `App/modul-energiemix` /
+  `App/modul-lieferketten` / `App/modul-regenwald`
+- „Anmelden" → `login.html`
+
+Die `.locked`-Klasse und das `.lock-overlay`-Element können wegfallen,
+weil der Sperr-Charakter jetzt durch den disabled Button kommuniziert
+wird. Alternativ `.locked` beibehalten, wenn du Optik leicht
+verblassend möchtest.
+
+## Warum so
+
+1. **Öffentlicher Einstieg für Lehrpersonen/Eltern**: Die Modul-
+   Detailseiten sind ohne Login zugänglich. Sie zeigen Lehrplan-Bezug
+   (78 Anker), Lernziele, Glossar-Begriffe — die Rechtfertigung für
+   den Schuleinsatz.
+2. **Kein Dark-Pattern**: Schüler:innen sehen gleich beide Optionen.
+   Lehrer haben die zusätzliche Info ohne Umweg.
+3. **Symmetrie**: Beide Sektionen (FREE + LOCKED) funktionieren nach
+   demselben Zwei-Button-Muster. Für LOCKED-Cards bleibt der „Sofort
+   probieren"-Button als disabled/Login-Variante.
+
+## Zu klären
+
+- **Regenwald-Link**: `modul-regenwald` existiert noch nicht als
+  eigene Detailseite (Status `geplant` in `module_info`, aber page_url
+  ist gesetzt). Sobald ich die Datei anlege, kann die LOCKED-Card
+  darauf zeigen. Bis dahin: Link funktioniert nur über Front-Controller-
+  Fallback und zeigt einen freundlichen „In Entwicklung"-Rahmen.
+  Oder möchtest du, dass ich jetzt schon Platzhalter-Detailseiten für
+  alle `geplanten` Module anlege (erdbeben, energiemix, lieferketten,
+  regenwald)? Einfach ein Wrapper auf das gleiche `_partials/modul_detail.php`
+  — `module_info` hat alle nötigen Felder, nur die Prosa ist knapp.
+- **Reihenfolge in der FREE-Sektion**: aktuell Klima-3D / Fluss /
+  Stadt. Heli dazu: vor oder nach Stadt?
+
+Keine weitere Rückmeldung nötig, wenn der Vorschlag passt — einfach
+einarbeiten.