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>

App/index.html

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