AB-Bezeichnungen durch echte Thementitel ersetzt

- Sektion-Headlines: 'AB 1: ...' raus, jetzt 'Grundlagen & Kundenauftrag', 'Relais & Schütz im Vergleich' usw. - Nav-Links: AB1-AB8 → Grundlagen, Relais & Schütz, Kennzeichnung, Schaltzeichen, Aufbau, Funktion, Sicherheit, Praxis - Hero-Stat 'AB 1-8/Aufgaben' entfernt (war doppelt mit 'Relais & Schütz') - '⭐ Leistungsaufgabe'-Tags entfernt - Verweise im Body-Text wie 'Unterrichtsbaustein AB3' jetzt 'Unterrichtsbaustein zur Kennzeichnung' Made-with: Cursor
2026-04-19 13:26:52 +00:00
parent f3e63fec86
commit f4511db7ba
1 changed files with 23 additions and 28 deletions
--- a/index.html
+++ b/index.html
@@ -266,14 +266,14 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
    <button type="button" id="menu-btn" aria-label="Menü">☰ Menü</button>
    <ul class="nav-links" id="navm">
      <li><a href="#hero">Start</a></li>
-      <li><a href="#ab1">AB1</a></li>
-      <li><a href="#ab2">AB2</a></li>
-      <li><a href="#ab3">AB3</a></li>
-      <li><a href="#ab4">AB4</a></li>
-      <li><a href="#ab5">AB5</a></li>
-      <li><a href="#ab6">AB6</a></li>
-      <li><a href="#ab7">AB7</a></li>
-      <li><a href="#ab8">AB8</a></li>
+      <li><a href="#ab1">Grundlagen</a></li>
+      <li><a href="#ab2">Relais &amp; Schütz</a></li>
+      <li><a href="#ab3">Kennzeichnung</a></li>
+      <li><a href="#ab4">Schaltzeichen</a></li>
+      <li><a href="#ab5">Aufbau</a></li>
+      <li><a href="#ab6">Funktion</a></li>
+      <li><a href="#ab7">Sicherheit</a></li>
+      <li><a href="#ab8">Praxis</a></li>
      <li><a href="#quiz">Quiz</a></li>
    </ul>
  </div>
@@ -286,7 +286,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
    <h1>Baustein 2: Elektromagnetische Schalter</h1>
    <p class="hero-lead">Steuerungstechnik · BS1 BFI</p>
    <div class="stats">
-      <div class="stat"><b>AB 1–8</b><span>Aufgaben</span></div>
      <div class="stat"><b>Relais &amp; Schütz</b><span>Schalttypen</span></div>
      <div class="stat"><b>Schütz</b><span>8 Bauteile</span></div>
    </div>
@@ -296,7 +295,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 1 ════════════════════════════════════ -->
 <section id="ab1" class="section reveal alt-bg">
-  <h2 class="section-head">AB 1: Einführung / Kundenauftrag</h2>
+  <h2 class="section-head">Grundlagen &amp; Kundenauftrag</h2>
  <p class="intro-text">Das Laufband in der Produktionshalle funktioniert nicht mehr.</p>

  <figure class="figure">
@@ -342,8 +341,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 2 ════════════════════════════════════ -->
 <section id="ab2" class="section reveal">
-  <span class="section-tag">⭐ Leistungsaufgabe</span>
-  <h2 class="section-head">AB 2: Unterschied Relais und Schütz</h2>
+  <h2 class="section-head">Relais &amp; Schütz im Vergleich</h2>
  <p class="section-sub">Zwei elektromagnetische Schalter im direkten Vergleich — unterschiedliche Schaltleistungen, Ankertypen und Bezeichnungen.</p>

  <div class="vs-wrap">
@@ -405,19 +403,19 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
    <div class="img-placeholder">
      <span class="ph-icon">📷</span>
      <p class="ph-title">Federkontakt beim Relais</p>
-      <p class="ph-hint">Quelle: AB2 aus deinem Unterrichtsbaustein (Foto aus Heft)</p>
+      <p class="ph-hint">Quelle: aus deinem Unterrichtsbaustein zu Relais &amp; Schütz (Foto aus Heft)</p>
    </div>
    <div class="img-placeholder">
      <span class="ph-icon">📷</span>
      <p class="ph-title">Schaltkontakt beim Schütz</p>
-      <p class="ph-hint">Quelle: AB2 aus deinem Unterrichtsbaustein (Foto aus Heft)</p>
+      <p class="ph-hint">Quelle: aus deinem Unterrichtsbaustein zu Relais &amp; Schütz (Foto aus Heft)</p>
    </div>
  </div>
 </section>

 <!-- ═══════════════════════════════════ AB 3 ════════════════════════════════════ -->
 <section id="ab3" class="section reveal alt-bg">
-  <h2 class="section-head">AB 3: Aufschriften und Kennzeichnung</h2>
+  <h2 class="section-head">Kennzeichnungen am Schütz lesen</h2>
  <p class="section-sub">Das Leistungsschütz trägt zahlreiche Aufschriften — Ordnungsziffern, Funktionsziffern, Klemmenbezeichnungen und Symbole.</p>

  <div class="ab3-grid">
@@ -427,7 +425,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
           alt="Siemens Schütz mit Aufschriften und Kennzeichnungen"
           style="border-radius:12px;border:2px solid #86efac;width:100%">
      <div class="canva-hint">
-        💡 <strong>Tipp:</strong> Füge in Canva (canva.com) nummerierte Kreise (1–9) auf dieses Foto ein — so wie in deinem Unterrichtsbaustein AB3 gezeigt.
+        💡 <strong>Tipp:</strong> Füge in Canva (canva.com) nummerierte Kreise (1–9) auf dieses Foto ein — so wie in deinem Unterrichtsbaustein zur Kennzeichnung gezeigt.
      </div>
    </div>

@@ -483,8 +481,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 4 ════════════════════════════════════ -->
 <section id="ab4" class="section reveal">
-  <span class="section-tag">⭐ Leistungsaufgabe</span>
-  <h2 class="section-head">AB 4: Schaltzeichen eines Schützes</h2>
+  <h2 class="section-head">Schaltzeichen &amp; Symbole</h2>
  <p class="section-sub">Schaltzeichen nach DIN EN 60617 — normgerechte Darstellung für Haupt- und Hilfskontakte.</p>

  <div class="subtask">
@@ -493,10 +490,10 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
  <div class="img-placeholder" style="min-height:300px">
    <span class="ph-icon">📷</span>
    <p class="ph-title">Schaltbild Q1 — Leistungsschütz mit Bezeichnungen</p>
-    <p class="ph-hint">Fotografiere das Schaltbild aus deinem Unterrichtsbaustein AB4 oder erstelle es mit diesem KI-Prompt bei ChatGPT/DALL-E:<br><br>
+    <p class="ph-hint">Fotografiere das Schaltbild aus deinem Unterrichtsbaustein zu Schaltzeichen oder erstelle es mit diesem KI-Prompt bei ChatGPT/DALL-E:<br><br>
    <em>„Clean technical electrical schematic drawing of a 3-pole contactor Q1 after DIN EN 60617. White background, black lines. Show coil symbol A1/A2 as rectangle, 3 main contacts labeled 1/L1-2/T1, 3/L2-4/T2, 5/L3-6/T3 as switching symbols, and 1 auxiliary contact 13/14. Engineering drawing style, no color."</em></p>
  </div>
-  <p class="figcap">Abb. 4 — Schaltzeichen Leistungsschütz Q1 (aus AB4)</p>
+  <p class="figcap">Abb. 4 — Schaltzeichen Leistungsschütz Q1 (aus dem Unterrichtsbaustein)</p>

  <div class="subtask">
    <h3>Aufgabe 4.2 — Korrigiertes Schaltbild K1</h3>
@@ -559,8 +556,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 5 ════════════════════════════════════ -->
 <section id="ab5" class="section reveal alt-bg">
-  <span class="section-tag">⭐ Leistungsaufgabe</span>
-  <h2 class="section-head">AB 5: Bestandteile eines Schützes</h2>
+  <h2 class="section-head">Aufbau &amp; Bestandteile</h2>
  <p class="section-sub">Ein Leistungsschütz besteht aus 8 Hauptbauteilen — vom Öffner bis zum Eisenkern. Fahre mit der Maus über die Liste rechts, um jedes Bauteil zu erkunden.</p>

  <div class="subtask">
@@ -621,8 +617,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 6 ════════════════════════════════════ -->
 <section id="ab6" class="section reveal">
-  <span class="section-tag">⭐ Leistungsaufgabe</span>
-  <h2 class="section-head">AB 6: Funktionsweise eines Schützes</h2>
+  <h2 class="section-head">Funktionsweise</h2>
  <p class="section-sub">Vom Anlegen der Spulenspannung bis zum Abfall — in fünf Schritten erklärt.</p>

  <div class="subtask">
@@ -695,7 +690,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 7 ════════════════════════════════════ -->
 <section id="ab7" class="section reveal alt-bg">
-  <h2 class="section-head">AB 7: Auftragsabschluss</h2>
+  <h2 class="section-head">Sicherheit beim Schützaustausch</h2>
  <p class="section-sub">Zusammenfassung der Fehlerquellen, Behebung und die fünf Sicherheitsregeln beim Schützaustausch.</p>

  <div class="subtask">
@@ -757,7 +752,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

 <!-- ═══════════════════════════════════ AB 8 ════════════════════════════════════ -->
 <section id="ab8" class="section reveal">
-  <h2 class="section-head">AB 8: Übungs- und Zusatzaufgaben — Hebekran</h2>
+  <h2 class="section-head">Praxisbeispiel: Hebekran</h2>
  <p class="section-sub">Die Steuerung eines Hebekrans wird erneuert — verstehen, analysieren und passendes Ersatzschütz auswählen.</p>

  <div class="info-box">
@@ -767,7 +762,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
  <div class="img-placeholder" style="margin-top:1rem">
    <span class="ph-icon">📷</span>
    <p class="ph-title">Technologieschema Hebekran (Abb. 1)</p>
-    <p class="ph-hint">Foto aus deinem Unterrichtsbaustein AB8, Seite 10</p>
+    <p class="ph-hint">Foto aus deinem Unterrichtsbaustein zum Hebekran, Seite 10</p>
  </div>

  <div class="subtask">
@@ -815,7 +810,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
  <div class="img-placeholder" style="margin-top:1.25rem">
    <span class="ph-icon">📷</span>
    <p class="ph-title">Schütze A, B und C — Vergleich (Siemens SIRIUS)</p>
-    <p class="ph-hint">Foto aus deinem Unterrichtsbaustein AB8, Seite 11</p>
+    <p class="ph-hint">Foto aus deinem Unterrichtsbaustein zum Hebekran, Seite 11</p>
  </div>

  <div class="subtask">