geograsim/App/sims/_inbox/zentrale/2026-04-19-0945-lehrplan-landing-diff.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
lehrplan	atlas	2026-04-19 09:45	neu	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)

/* 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:

<!-- 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:

<!-- 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:

<!-- 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:

<!-- 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)

<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.