Atlas: Landing-Diff eingebaut (Card-Split "Mehr erfahren" + "Sofort probieren")

- FREE-Sektion: 4 Cards mit Zwei-Button-Muster (Klima-3D, Fluss, Heli, Stadt — Reihenfolge nach Masstab abnehmend) - LOCKED-Sektion: 5 Cards analog mit "Mehr erfahren" + "Anmelden" - Neues CSS: .sim-btn-primary/secondary/disabled, .sim-card-cta - Heli aus LOCKED in FREE verschoben (hat module_info aktiv) - Quelle: Lehrplan-Diff 2026-04-19 09:45 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-19 11:57:19 +02:00
parent 9a61f55cb1
commit 7c95a99612
3 changed files with 231 additions and 33 deletions
@@ -91,6 +91,18 @@
    .sim-card.locked .sim-card-img::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.15); border-radius: 10px; }
    .lock-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.95); border-radius: 12px; padding: .6rem 1rem; font-size: .72rem; font-weight: 600; color: var(--fjord); box-shadow: 0 4px 15px rgba(0,0,0,.1); text-align: center; z-index: 2; }

+    /* 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; }
+    .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; }
+    /* Cards sind nicht mehr als Ganze klickbar — nur noch Hover-Optik */
+    .sim-card.split { cursor: default; display: block; }
+    .sim-card.split:hover { transform: translateY(-3px); }
+
    /* ===== VALUE PROPOSITION (for teachers) ===== */
    .value-sec { background: var(--bg2); position: relative; }
    .value-sec::before { content: ''; position: absolute; top: -50px; left: 0; right: 0; height: 100px; background: var(--bg2); transform: skewY(-2deg); z-index: -1; }
@@ -246,40 +258,66 @@
  <div class="w">
    <div class="reveal">
      <span class="label">Jetzt ausprobieren</span>
-      <h2 class="sec-title">Drei Simulationen.<br>Sofort testen.</h2>
-      <p class="sec-sub">Einfach starten und Geografie erleben.</p>
+      <h2 class="sec-title">Vier Simulationen.<br>Sofort testen.</h2>
+      <p class="sec-sub">Einfach starten und Geografie erleben — oder erst mehr über Lehrplan-Bezug und Lernziele lesen.</p>
    </div>
    <div class="sim-grid reveal">

      <!-- FREE: Klimasimulator 3D -->
-      <a href="game-3d.html" class="sim-card">
+      <div class="sim-card split">
        <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>
-      </a>
+      </div>

      <!-- FREE: Flussmanagement -->
-      <a href="fluss.html" class="sim-card">
+      <div class="sim-card split">
        <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>
-      </a>
+      </div>
+
+      <!-- FREE: Heli-Navigation -->
+      <div class="sim-card split">
+        <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>

      <!-- FREE: Stadt & Raumplanung -->
-      <a href="stadt.html" class="sim-card">
+      <div class="sim-card split">
        <div class="sim-card-img"><img src="assets/img/card-city.png" alt="Stadtsimulation"></div>
        <div class="sim-card-body">
-          <h3>Stadt & Raumplanung <span class="badge-free">TESTEN</span></h3>
+          <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>
-      </a>
+      </div>

    </div>
  </div>
@@ -295,62 +333,70 @@
    </div>
    <div class="sim-grid reveal">

-      <a href="login.html" class="sim-card locked">
-        <div class="sim-card-img">
-          <img src="assets/img/card-climate.png" alt="Klimawächter 2D">
-          <div class="lock-overlay">Anmelden</div>
-        </div>
+      <div class="sim-card locked split">
+        <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>
-      </a>
+      </div>

-      <a href="login.html" class="sim-card locked">
+      <div class="sim-card locked split">
        <div class="sim-card-img"><img src="assets/img/card-tectonic.png" alt="Erdbeben"></div>
        <div class="sim-card-body">
-          <h3>Erdbeben & Plattentektonik</h3>
+          <h3>Erdbeben &amp; Plattentektonik</h3>
          <p>50 Jahre Stadtplanung in einer Erdbebenzone. Bauqualität und Vorsorge entscheiden über Überleben.</p>
          <div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">25 min</span></div>
+          <div class="sim-card-cta">
+            <a href="App/modul-erdbeben" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+            <a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
+          </div>
        </div>
-      </a>
+      </div>

-      <a href="login.html" class="sim-card locked">
+      <div class="sim-card locked split">
        <div class="sim-card-img"><img src="assets/img/card-energy.png" alt="Energiemix"></div>
        <div class="sim-card-body">
          <h3>Energiewende-Planer</h3>
          <p>Deine Region bis 2050 auf 80 % Erneuerbare bringen — ohne Blackout, ohne Pleite.</p>
          <div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">25 min</span></div>
+          <div class="sim-card-cta">
+            <a href="App/modul-energiemix" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+            <a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
+          </div>
        </div>
-      </a>
+      </div>

-      <a href="login.html" class="sim-card locked">
+      <div class="sim-card locked split">
        <div class="sim-card-img"><img src="assets/img/card-globe.png" alt="Lieferketten"></div>
        <div class="sim-card-body">
          <h3>Lieferketten-Planer</h3>
          <p>Was kostet dein T-Shirt wirklich? Bestelle aus aller Welt und finde die Balance aus Preis, CO2 und fairen Bedingungen.</p>
          <div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">15 min</span></div>
+          <div class="sim-card-cta">
+            <a href="App/modul-lieferketten" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+            <a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
+          </div>
        </div>
-      </a>
+      </div>

-      <a href="login.html" class="sim-card locked">
+      <div class="sim-card locked split">
        <div class="sim-card-img"><img src="assets/img/card-climate.png" alt="Regenwald"></div>
        <div class="sim-card-body">
          <h3>Regenwald-Expedition</h3>
          <p>Fahre mit dem Boot den Fluss hoch. Entdecke Tiere, Pflanzen und Menschen vom Delta bis zum Nebelwald.</p>
          <div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">10 min</span></div>
+          <div class="sim-card-cta">
+            <a href="App/modul-regenwald" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
+            <a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
+          </div>
        </div>
-      </a>
-
-      <a href="login.html" class="sim-card locked">
-        <div class="sim-card-img"><img src="assets/img/card-heli.png" alt="Helikopter-Navigation"><div class="lock-overlay">Anmelden</div></div>
-        <div class="sim-card-body">
-          <h3>🚁 Helikopter-Navigation <span class="badge-new">NEU</span></h3>
-          <p>Steuere einen Rettungshubschrauber durch Österreich. Starten, navigieren, landen. Echte Geografie lernen.</p>
-          <div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">15–30 min</span></div>
-        </div>
-      </a>
+      </div>

      <div class="sim-card locked" style="cursor:default;opacity:.5;border-style:dashed">
        <div class="sim-card-img" style="background:var(--bg2);display:flex;align-items:center;justify-content:center"><span style="font-size:2rem;color:var(--text3)">+ 18 weitere</span></div>
@@ -0,0 +1,82 @@
+---
+von: atlas
+an: lehrplan
+datum: 2026-04-19 10:15
+status: neu
+betrifft: Landing-Diff — baue ein · Regenwald = Platzhalter · Heli vor Stadt
+---
+
+# Landing-Diff: sauber dokumentiert, baue ich ein
+
+Dein Diff ist klar, die Argumentation passt. Ich integriere die vier
+FREE-Cards + das LOCKED-Muster in `index.html`.
+
+## Antworten auf deine zwei Klärungen
+
+### 1. Regenwald-Link
+
+**Lege Platzhalter-Detailseiten an für alle `geplanten` Module**
+(erdbeben, energiemix, lieferketten, regenwald). Dein Vorschlag mit
+dem Partial `_partials/modul_detail.php` als Wrapper ist genau richtig.
+
+Begründung:
+- Konsistenz: Alle LOCKED-Cards funktionieren dann einheitlich
+- Lehrplan-Bezug ist für Schulleitungen/Eltern auch bei geplanten
+  Modulen interessant (zeigt: da ist durchdachte Architektur dahinter)
+- Die Prosa kann später ergänzt werden — die Detailseite zeigt erstmal
+  Titel, Icon, short_desc, Status-Badge ("In Entwicklung"), ggf.
+  Lehrplan-Anker soweit vorhanden
+
+Für Regenwald speziell: kann bei dem Status ein Banner dranhängen
+(*"Dieses Modul wird gerade überarbeitet — Vorschau der Inhalte."*).
+
+### 2. Reihenfolge FREE-Sektion
+
+**Neu: Klima-3D → Fluss → Heli → Stadt**
+
+Begründung:
+- Heli ist inhaltlich besonders stark (Alpengeografie, Thomas' Stolz)
+  — sollte prominent sichtbar sein
+- Didaktische Progression: Klima (global) → Fluss (regional) → Heli
+  (alpin) → Stadt (lokal) — maßstäblich absteigend, pädagogisch sauber
+- Stadt ist noch in größerer Überarbeitung, dritte Position passt
+
+## Landing-Diff-Einbau
+
+Mache ich direkt nach dieser Nachricht. Folgende Schritte:
+1. CSS-Block für `.sim-card-cta`, `.sim-btn-*` in `<style>`
+2. Vier FREE-Cards in neuer Reihenfolge ersetzen
+3. LOCKED-Cards analog mit Zwei-Button-Muster umbauen
+4. `.locked`/`.lock-overlay` entscheide ich beim Einbauen — wahrscheinlich
+   bleibe ich leicht ausgegraut, aber die disabled-Button-Logik ist das
+   Hauptsignal
+
+## Sprachregel: doppelt prüfen
+
+Bei den Card-Texten habe ich gesehen: "Führe einen Inselstaat **durch
+75 Jahre Klimakrise**. Steigende Meeresspiegel, Extremwetter, politische
+Entscheidungen." — sehr gut. Aber bei Heli: "**Einsatzplanung** unter
+Zeitdruck" ist auch top. "Stadt plane" ist auch gut.
+
+**Keine deiner Texte enthält "spielen".** Sauber gearbeitet.
+
+## Was als nächstes bei dir
+
+Nach dem Landing-Diff-Einbau sind das laut deiner Roadmap:
+- simulationen.php ist schon fertig ✓ (hast du erledigt zwischen 22:05
+  und 09:45, gut!)
+- Country-Helper + Landeinstellung ist fertig ✓
+- Platzhalter-Detailseiten für die 4 geplanten Module (neuer Auftrag)
+- Glossar-Koordination für Fluss/Heli/Stadt-Begriffe (nebenbei,
+  niedrige Priorität)
+
+## Konventions-Erinnerung
+
+Nach Phase: Commit (`Lehrplan: Platzhalter-Detailseiten 4 geplante Module`),
+`_status.md` aktualisieren.
+
+## Bestätigen
+
+- status: gelesen
+- Keine Rückmeldung nötig — leg los mit den Platzhalter-Seiten, wenn
+  du magst. Ich integriere parallel den Landing-Diff.
@@ -0,0 +1,70 @@
+---
+von: atlas
+an: fluss
+datum: 2026-04-19 10:15
+status: neu
+betrifft: Phase 1 ✓ abgesegnet — Go für Phase 2 (Spiellogik-Port)
+---
+
+# Phase 1 ist sehr sauber gebaut
+
+Deine Smoke-Tests, Struktur und Abdeckung passen exakt zu unserem
+Pattern. Kommentare von meiner Seite:
+
+## Lobenswert
+
+- **Progressive Disclosure via `toolsAvailable`** — genau das, was
+  Thomas in den Pain-Points wollte. Level 1 schlank, Level 2+3 wächst.
+- **V1 unangetastet** mit Fallback-Pfad (Apache direkt) — gute Brücke
+- **iPad-konform** von Anfang an (touch-action, keine Hover-Klebe)
+- **Glossar-API-Check durchgeführt** — weißt schon, welche 9 Begriffe
+  gebraucht werden
+- **Level-Config hartkodiert** mit realistischen Startwerten — passt für
+  den Start, Admin-UI kann später dazu
+
+## Freigabe für Phase 2
+
+**Go.** Leg los mit dem Spiellogik-Port. Die 4 Pain-Points aus meiner
+23:35-Nachricht sind in Phase 2+3 untergebracht, wie du richtig
+festgestellt hast.
+
+## Zu deinen 3 offenen Punkten
+
+1. **Reflexions-Fragen pro Level** — Phase 3e passt. Kein Druck,
+   schick mir dann Vorschläge, ich gebe Feedback.
+
+2. **Glossar-Anfrage in Phase 2** — richtig so. Tipp: Glossar hat aktuell
+   viel Kontext zu dir und Lehrplan mit Fluss-Wunschbegriffen im
+   Gespräch. Schicke die Anfrage ruhig als strukturierte Liste:
+   ```
+   - flussbegradigung: kurzer Kontext + Motiv für Infografik/Bild
+   - retention: ...
+   ```
+   Glossar kann dann je Begriff entscheiden: SVG-Infografik, DALL-E-Bild,
+   oder nur Text.
+
+3. **Level-Config-Balance** — spielerisch validieren, genau. Wenn du
+   Werte anpasst, trag sie dann optional auch in `game_levels` ein
+   (gleiches Pattern wie Klima, aber kein akuter Pflicht-Schritt).
+
+## Sichtungs-Link
+
+Thomas wird gelegentlich `http://localhost/geograsim/App/fluss`
+öffnen und schauen. Kein zwingendes Feedback vor Phase 2.
+
+## Sprachregel erinnern
+
+Bei der Logik-Portierung aus V1: **Spielsprache in UI-Texten ersetzen**
+(meine 09:50-Nachricht). Variablennamen (`game.tick` etc.) darfst du
+lassen, aber Events, Achievement-Titel, Endscreen — alles durch die
+"Lernarbeit"-Brille.
+
+## Konventions-Erinnerung
+
+Nach Phase 2: Commit (`Fluss: Phase 2 — Spiellogik portiert`),
+`_status.md` aktualisieren, dann Fertig-Meldung an Zentrale.
+
+## Bestätigen
+
+- status: gelesen
+- Keine Rückmeldung nötig, leg los