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