Clean-up: alle Bindestriche als Trennzeichen weg, section-subs entfernt, figcaptions bereinigt, Klick-Interaktion Bauteile deaktiviert, Hebekran vereinfacht

Made-with: Cursor

index.html

@@ -337,7 +337,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
   <div class="hero-bg"></div>
   <div class="hero-inner">
     <h1>Elektromagnetische Schalter</h1>
-    <p class="hero-lead">Relais und Schütze — Aufbau, Funktion und Einsatz in der Steuerungstechnik</p>
+    <p class="hero-lead">Relais und Schütze in der Steuerungstechnik</p>
     <div class="stats">
       <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>
@@ -351,7 +351,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 1: Grundlagen -->
 <section id="ab1" class="section reveal alt-bg">
   <h2 class="section-head">Was sind elektromagnetische Schalter?</h2>
-  <p class="intro-text">Elektromagnetische Schalter werden in der Industrie überall dort eingesetzt, wo elektrische Stromkreise sicher und zuverlässig geschaltet werden müssen — zum Beispiel beim Starten von Motoren oder bei der Steuerung von Kränen.</p>
+  <p class="intro-text">Elektromagnetische Schalter werden in der Industrie überall dort eingesetzt, wo elektrische Stromkreise sicher und zuverlässig geschaltet werden müssen, zum Beispiel beim Starten von Motoren oder bei der Steuerung von Kränen.</p>
   <p class="intro-text">Es gibt zwei Haupttypen: das <strong>Relais</strong> für kleinere Steuerströme und das <strong>Schütz</strong> für große Lastströme.</p>
 
   <h3 class="table-title">Schützarten</h3>
@@ -376,13 +376,11 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 2: Relais vs Schütz -->
 <section id="ab2" class="section reveal">
   <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">
     <div class="vs-card left">
       <figure class="figure" style="margin-bottom:1rem">
         <img loading="lazy" src="relais.png" alt="Relais geöffnet — Spule und Kontakte sichtbar">
-        <figcaption class="figcap">Relais geöffnet — Kupferspule und Kontaktflächen</figcaption>
       </figure>
       <h3>Relais <span class="mono" style="color:var(--amber);font-size:.9rem">(K)</span></h3>
       <ul class="vs-list amber">
@@ -399,7 +397,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
     <div class="vs-card right">
       <figure class="figure" style="margin-bottom:1rem">
         <img loading="lazy" src="schuetz.png" alt="Leistungsschütz">
-        <figcaption class="figcap">Leistungsschütz</figcaption>
       </figure>
       <h3>Schütz <span class="mono" style="color:var(--accent);font-size:.9rem">(Q)</span></h3>
       <ul class="vs-list green">
@@ -430,11 +427,9 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
   <div class="grid-2">
     <figure class="figure" style="text-align:center;background:#f8faff;border:1px solid var(--border);border-radius:12px;padding:1.25rem">
       <img loading="lazy" src="federkontakt.png" alt="Federkontakt beim Relais" style="max-width:220px;width:100%;height:auto;margin:0 auto">
-      <figcaption class="figcap" style="margin-top:.75rem">Federkontakt beim Relais</figcaption>
     </figure>
     <figure class="figure" style="text-align:center;background:#f8faff;border:1px solid var(--border);border-radius:12px;padding:1.25rem">
       <img loading="lazy" src="schaltkontakt.png" alt="Schaltkontakt beim Schütz" style="max-width:220px;width:100%;height:auto;margin:0 auto">
-      <figcaption class="figcap" style="margin-top:.75rem">Schaltkontakt beim Schütz</figcaption>
     </figure>
   </div>
 </section>
@@ -442,12 +437,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 4: Schaltzeichen -->
 <section id="ab4" class="section reveal">
   <h2 class="section-head">Schaltzeichen &amp; Symbole</h2>
-  <p class="section-sub">Normgerechte Darstellung nach DIN EN 60617 — so werden Schütze in Schaltplänen dargestellt.</p>
-
-  <div class="subtask">
-    <h3>Schaltzeichen eines Leistungsschützes</h3>
-    <p class="lead">Ein dreipoliges Leistungsschütz wird im Schaltplan mit drei Hauptkontakten und der Spule A1/A2 dargestellt.</p>
-  </div>
   <figure class="figure" style="text-align:center;max-width:420px;margin:1rem auto">
     <img loading="lazy" src="schaltzeichen-schuetz.png" alt="Schaltzeichen Leistungsschütz — 3 Hauptkontakte, Spule A1/A2, Hilfskontakt 13/14">
     <figcaption class="figcap">Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14</figcaption>
@@ -457,11 +446,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 5: Aufbau -->
 <section id="ab5" class="section reveal alt-bg">
   <h2 class="section-head">Aufbau &amp; Bestandteile eines Schützes</h2>
-  <p class="section-sub">Ein Leistungsschütz besteht aus 8 Hauptbauteilen. Klicke auf ein Bauteil für eine erweiterte Erklärung.</p>
-
-  <div class="subtask">
-    <h3>Die 8 Bestandteile</h3>
-  </div>
 
   <div class="ab5-grid">
     <div>
@@ -471,7 +455,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
              alt="Motorschütz geöffnet — Bestandteile sichtbar"
              onerror="this.style.display='none'"
              style="width:100%;max-width:320px;display:block;margin:0 auto;border-radius:12px;border:2px solid #86efac">
-        <figcaption class="figcap">Querschnitt — Nummern entsprechen der Liste rechts</figcaption>
       </figure>
     </div>
 
@@ -486,13 +469,9 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
         <li data-key="spule"><strong>Spule</strong></li>
         <li data-key="eisenkern"><strong>Eisenkern</strong></li>
       </ol>
-      <div class="part-info" id="part-info"></div>
     </div>
   </div>
 
-  <div class="subtask">
-    <h3>Hauptstrom- und Steuerkontakte</h3>
-  </div>
   <div class="grid-2">
     <div class="card card-green">
       <h3 class="card-title">Hauptstromkontakte</h3>
@@ -515,7 +494,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 6: Funktionsweise -->
 <section id="ab6" class="section reveal">
   <h2 class="section-head">Funktionsweise Schritt für Schritt</h2>
-  <p class="section-sub">Vom Anlegen der Spulenspannung bis zum Abfall — der gesamte Schaltvorgang in fünf Schritten erklärt.</p>
 
   <div class="timeline">
     <div class="tl-step" data-n="1" style="transition-delay:.0s">
@@ -524,7 +502,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
     </div>
     <div class="tl-step" data-n="2" style="transition-delay:.15s">
       <h4>Magnetfeld entsteht</h4>
-      <p>Strom fließt durch die Schützspule — ein Magnetfeld entsteht.</p>
+      <p>Strom fließt durch die Schützspule, ein Magnetfeld entsteht.</p>
     </div>
     <div class="tl-step" data-n="3" style="transition-delay:.3s">
       <h4>Anker wird angezogen</h4>
@@ -532,7 +510,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
     </div>
     <div class="tl-step" data-n="4" style="transition-delay:.45s">
       <h4>Kontakte schalten</h4>
-      <p>Schließer schließen, Öffner öffnen — der Verbraucher wird eingeschaltet.</p>
+      <p>Schließer schließen, Öffner öffnen. Der Verbraucher wird eingeschaltet.</p>
     </div>
     <div class="tl-step" data-n="5" style="transition-delay:.6s">
       <h4>Schütz fällt ab</h4>
@@ -541,12 +519,11 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
   </div>
 
   <div class="warn-box">
-    <strong>Wichtig:</strong> Das Schütz ist kein Dauermagnet — fällt die Steuerspannung aus, fällt das Schütz sofort ab!
+    <strong>Wichtig:</strong> Das Schütz ist kein Dauermagnet. Fällt die Steuerspannung aus, fällt das Schütz sofort ab.
   </div>
 
   <div class="subtask">
     <h3>Galvanische Trennung</h3>
-    <p class="lead">Steuer- und Hauptstromkreis sind elektrisch voneinander getrennt — die Übertragung erfolgt ausschließlich über das Magnetfeld.</p>
   </div>
 
   <div class="galv">
@@ -587,7 +564,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 7: Sicherheit -->
 <section id="ab7" class="section reveal alt-bg">
   <h2 class="section-head">Sicherheitsregeln beim Schützaustausch</h2>
-  <p class="section-sub">Vor dem Austausch eines Schützes müssen die fünf Sicherheitsregeln der Elektrotechnik beachtet werden — sie schützen vor lebensgefährlichen Stromschlägen.</p>
 
   <div class="warn-box">
     Vor dem Austausch müssen (je nach Spannungshöhe) die <strong>Fünf Sicherheitsregeln der Elektrotechnik</strong> beachtet werden!
@@ -625,39 +601,28 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 <!-- AB 8: Praxis -->
 <section id="ab8" class="section reveal">
   <h2 class="section-head">Praxisbeispiel: Hebekran</h2>
-  <p class="section-sub">Ein typisches Beispiel für den Einsatz von Schützen in der Industrie.</p>
-
-  <p class="intro-text">Ein Hebekran ist ein typisches Beispiel für den Einsatz von Schützen in der Industrie. Über verschiedene Schalter wird der Antriebsmotor gesteuert.</p>
 
   <figure class="figure">
     <img loading="lazy"
          src="hebekran.jpg"
          alt="Industrieller Portalkran mit Schützsteuerung"
          onerror="this.style.display='none'">
-    <figcaption class="figcap">Portalkran — schwere Lasten werden über Schütz-gesteuerte Motoren bewegt</figcaption>
   </figure>
 
-  <div class="subtask">
-    <h3>Typische Betriebsmittel der Krananlage</h3>
-    <p class="lead">Eine Kransteuerung besteht aus mehreren Bedien- und Schaltelementen, die über Schütze auf den Antriebsmotor wirken:</p>
-  </div>
-  <ul class="signal-list">
-    <li><div><span class="sig-name">Q1 Hauptschalter</span> — Energieversorgung des gesamten Krans</div></li>
-    <li><div><span class="sig-name">S1 Schlüsselschalter</span> — Inbetriebnahme der Steuerung</div></li>
-    <li><div><span class="sig-name">S2 Taster AUF</span> — Motor Seilwinde aufwärts (Tippbetrieb)</div></li>
-    <li><div><span class="sig-name">S3 Taster AB</span> — Motor Seilwinde abwärts (Tippbetrieb)</div></li>
-    <li><div><span class="sig-name">S0 NOT-HALT</span> — Sofortstillstand bei Gefahr</div></li>
-  </ul>
+  <p class="intro-text">Ein Hebekran wird über Schütze gesteuert. Verschiedene Schalter und Taster steuern den Antriebsmotor der Seilwinde.</p>
 
-  <div class="info-box">
-    Die Steuerung des Krans ist ein gutes Beispiel für die <strong>Galvanische Trennung</strong>: Bediener arbeiten mit ungefährlicher Steuerspannung (z.B. DC 24V), während die Motoren über Schütze mit der hohen Lastspannung (z.B. AC 400V) versorgt werden.
-  </div>
+  <ul class="signal-list">
+    <li><div><span class="sig-name">Q1</span> Hauptschalter</div></li>
+    <li><div><span class="sig-name">S1</span> Schlüsselschalter</div></li>
+    <li><div><span class="sig-name">S2</span> Taster AUF</div></li>
+    <li><div><span class="sig-name">S3</span> Taster AB</div></li>
+    <li><div><span class="sig-name">S0</span> NOT-HALT</div></li>
+  </ul>
 </section>
 
 <!-- QUIZ -->
 <section id="quiz" class="section reveal alt-bg">
   <h2 class="section-head">Wissens-Check</h2>
-  <p class="section-sub">Acht allgemeine Fragen rund um Relais, Schütz und Steuerungstechnik — sofortiges Feedback nach jeder Antwort.</p>
   <div class="quiz-progress-wrap"><div class="quiz-progress-bar" id="quiz-progress"></div></div>
   <div id="quiz-box"></div>
   <div style="text-align:center;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center">
@@ -681,7 +646,7 @@ const quizData = [
   {q:'Wofür stehen die Klemmen A1/A2 am Schütz?',
    o:['Hauptstromphasen','Spulenanschlüsse','Hilfskontakt NO','Motorschutz'], c:1},
   {q:'Was passiert wenn die Spulenspannung abgeschaltet wird?',
-   o:['Die Rückstellfeder drückt den Anker zurück — Schütz fällt ab','Schütz bleibt angezogen (Remanenz)','Kontakte bleiben in Stellung','Sicherung löst aus'], c:0},
+   o:['Die Rückstellfeder drückt den Anker zurück, Schütz fällt ab','Schütz bleibt angezogen (Remanenz)','Kontakte bleiben in Stellung','Sicherung löst aus'], c:0},
   {q:'Für welchen Betrieb ist Gebrauchskategorie AC-3 geeignet?',
    o:['Dauertippbetrieb','Käfigläufermotor anlassen und ausschalten','Gleichstrom-Reihenschlussmotoren','Gegenstrombremsung'], c:1},
   {q:'Was versteht man unter Galvanischer Trennung?',
@@ -799,31 +764,6 @@ const tlObs = new IntersectionObserver(entries => {
 }, { threshold: 0.2 });
 document.querySelectorAll('.timeline').forEach(t => tlObs.observe(t));
 
-/* ─── PARTS LIST: click to expand info ──────────────── */
-const partInfo = {
-  oeffner:      'Im Schaltplan als NC gekennzeichnet. Kontaktnummern: 21/22, 41/42',
-  schaltstuecke:'Material: Silber-Zinnoxid — hohe Leitfähigkeit und Verschleißfestigkeit',
-  schliesser:   'Im Schaltplan als NO gekennzeichnet. Kontaktnummern: 13/14, 33/34',
-  spulenanschluss:'A1 = Plus bei DC, A2 = Minus/Neutral',
-  anker:        'Besteht aus weichem Eisen — wird nach Abschalten sofort losgelassen',
-  kurzschlussring:'Nur bei AC-Schützen — erzeugt Phasenverschiebung',
-  spule:        'Bemessungsspannung z.B. 24V DC oder 230V AC',
-  eisenkern:    'Aus laminierten Blechen — reduziert Wirbelstromverluste'
-};
-document.querySelectorAll('#parts-list li').forEach(li => {
-  li.addEventListener('click', () => {
-    const key = li.dataset.key;
-    const box = document.getElementById('part-info');
-    if (box.dataset.open === key) {
-      box.classList.remove('open');
-      box.dataset.open = '';
-      return;
-    }
-    box.textContent = partInfo[key] || '';
-    box.classList.add('open');
-    box.dataset.open = key;
-  });
-});
 
 /* ─── MENU ──────────────────────────────────────────── */
 document.getElementById('menu-btn').addEventListener('click', function() {