From f3e63fec86d901318aebac9f4d7cd1c36a4611f7 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 18 Apr 2026 12:37:14 +0000 Subject: [PATCH] Baustein 2: Kompletter Relaunch der Lernwebsite - Alle Inhalte 1:1 aus dem Unterrichtsbaustein (AB 1-8 + Quiz) - Neues Weiss/Gruenes Farbschema (Gruen #16a34a, Amber #ca8a04) - Sections Hero, AB1-AB8, Quiz in korrekter Reihenfolge - VS-Badge in AB2 als Grid-Element (nicht mehr absolute) - AB3 mit Siemens-Foto + 9-Zeilen-Tabelle und Canva-Hinweis - AB4 mit Bildplatzhaltern und KI-Prompts statt falscher SVG-Schaltzeichen - AB5 echtes Schuetz-Foto + nummerierte 8-Bauteile-Liste - AB6 inkl. 6.2 Galvanische Trennung als Unterabschnitt - AB7 mit 5 korrekten Sicherheitsregeln (Freischalten, Sichern, Spannungsfreiheit, Erden, Abdecken) - AB8 Hebekran komplett 8.1-8.5 - Quiz mit 8 Fragen aus PDF - Bild-Fehler-Handler ersetzt fehlgeschlagene Bilder durch gruene Platzhalter - Nav mit Fortschrittsbalken + Hamburger-Menue < 960px - Alles inline (CSS/JS), script.js und styles.css obsolet Made-with: Cursor --- index.html | 1168 ++++++++++++++++++++++++++++++++++++++++++++-------- script.js | 184 --------- styles.css | 671 +----------------------------- 3 files changed, 1006 insertions(+), 1017 deletions(-) diff --git a/index.html b/index.html index 1405431..b92d5e6 100644 --- a/index.html +++ b/index.html @@ -1,199 +1,1011 @@ - - - Grundlagen der Steuerungstechnik - - - - + + +Baustein 2: Elektromagnetische Schalter | Steuerungstechnik + + + + - -
-
-

Grundlagen der Steuerungstechnik

-

Baustein 1

- Los geht's -
-
+ -
- -
-

Das wirst du lernen

-
-
    -
  • ✓ Unterscheidung zwischen Steuerung und Regelung verstehen
    • -
  • ✓ Das EVA-Prinzip erkennen und erklären können
    • -
  • ✓ Wichtige Größen der Steuerungstechnik benennen
    • -
  • ✓ Verschiedene Steuerungsarten (VPS, SPS) kennenlernen
    • -
-
-
+ +
+
+
+

Baustein 2: Elektromagnetische Schalter

+

Steuerungstechnik · BS1 BFI

+
+
AB 1–8Aufgaben
+
Relais & SchützSchalttypen
+
Schütz8 Bauteile
+
+ +
+
- -
-

Was ist Steuerungstechnik?

-
-
- -

Steuern

-

Beeinflussung einer Ausgangsgröße. Wichtig: Der Ausgang hat keinen Einfluss auf den Eingang (offener Wirkungsablauf).
Beispiel: Heizung nach Außentemperatur.

-
-
- -

Regeln

-

Hier wird der Ist-Wert gemessen und mit dem Soll-Wert verglichen. Der Ausgang wirkt auf den Eingang zurück (geschlossener Regelkreis).
Beispiel: Tempomat im Auto.

-
-
- -

Beeinflussung

-

Wir steuern physikalische Größen wie:
• Drehzahl
• Temperatur
• Helligkeit
• Geschwindigkeit

-
-
-
+ +
+

AB 1: Einführung / Kundenauftrag

+

Das Laufband in der Produktionshalle funktioniert nicht mehr.

- -
-

Das EVA-Prinzip

-

Jede Steuerung folgt diesem Grundmuster:

- -
-
-
E
-

Eingabe

-

Sensoren erfassen Signale.

-

(z.B. Taster, Lichtschranke)

-
-
-
V
-

Verarbeitung

-

Die Logik verknüpft die Signale.

-

(z.B. Steuergerät, SPS)

-
-
-
A
-

Ausgabe

-

Aktoren führen den Befehl aus.

-

(z.B. Motor, Lampe)

-
-
+
+ Industrielles Förderband – Kundenauftrag Laufband +
Abb. 1 — Das defekte Förderband (Kundenauftrag)
+
- -
-

Interaktives EVA-Beispiel: Ampel

-

Drücke den Fußgänger-Taster (Eingabe), um die Ampel zu steuern.

- -
- -
-

Eingabe

- - Taster drücken -
+
+
+

Defekter Anschluss

+

Lose oder korrodierte Schraubverbindung am Schütz.

+
+
+

Defekte Zuleitung

+

Beschädigte Leitung bis zum Motor — Kurzschluss oder Phasenausfall.

+
+
+

Defektes Schütz

+

Schütz durch Überlastung oder Kurzschluss beschädigt.

+
+
-
➜ Signal ➜
+

Aufgabe 1.3 — Schützarten

+ + + + + + +
SchützartAnwendungsgebiet
LeistungsschützSchalten eines Motors
HilfsschützSchalten einer Meldeleuchte
- -
-

Verarbeitung

-
- ⚙️ -
- Steuerung verarbeitet... -
+

Aufgabe 1.4 — Einsatzbereiche

+ + + + + + +
GerätTypischer Einsatz
RelaisSchalten von kleineren Strömen (Melde- oder Regeltätigkeiten)
SchützSchalten von großen Lasten, z.B. Motoren bei Förderbändern
+
-
➜ Befehl ➜
+ +
+ ⭐ Leistungsaufgabe +

AB 2: Unterschied Relais und Schütz

+

Zwei elektromagnetische Schalter im direkten Vergleich — unterschiedliche Schaltleistungen, Ankertypen und Bezeichnungen.

- -
-

Ausgabe

-
-
-
-
- Ampel schaltet -
- -
Status: Autos haben Grün
- -
+
+ +
+
+ 📷 +

Foto: Relais (z.B. Omron MY2)

+

Quelle: commons.wikimedia.org → Suche: „relay opened up"

+
+

Relais (K)

+
    +
  • Für geringere Schaltleistungen ausgelegt
    • +
  • Meist für Gleichspannung
    • +
  • Schaltglieder sind einfach unterbrechend
    • +
  • Besitzen Klappanker
    • +
  • Bezeichnung: K
    • +
+
- -
-

Wichtige Begriffe & Arten

-
-
- -
-

Auch "kombinatorische Steuerung". Sie verknüpft Eingangssignale logisch (UND, ODER, NICHT). Das Ausgangssignal hängt direkt von der Kombination der Eingänge ab.

-
-
-
- -
-

Arbeitet in Schritten nacheinander. Der nächste Schritt passiert erst, wenn eine bestimmte Bedingung erfüllt ist (Schrittkette).

-
-
-
- -
-

Die Logik wird durch Verdrahtung erstellt. Um die Funktion zu ändern, muss man Kabel umklemmen. (z.B. Schützschaltung)

-
-
-
- -
-

Die Logik ist als Software gespeichert. Änderungen sind einfach per Programmierung möglich. (z.B. Siemens S7)

-
-
-
-
+ +
VS
- -
-

Wissens-Check

-
-
Frage wird geladen...
-
- -
-
- -
-
-
+ +
+
+ Siemens SIRIUS Leistungsschütz +
Abb. 2 — Siemens SIRIUS Leistungsschütz
+
+

Schütz (Q)

+ +
+ - +

Vergleichstabelle

+ + + + + + + + + + + +
MerkmalRelais (K)Schütz (Q)
SchaltleistungGeringHoch (Motoren)
AnkertypKlappankerZuganker
KontaktunterbrechungEinfachDoppelt
EinsatzSteuern, Melden, RegelnHauptstrom, Motoren
BezeichnungKQ
-
Powered by Webklar
+

Kontaktarten im Vergleich

+
+
+ 📷 +

Federkontakt beim Relais

+

Quelle: AB2 aus deinem Unterrichtsbaustein (Foto aus Heft)

+
+
+ 📷 +

Schaltkontakt beim Schütz

+

Quelle: AB2 aus deinem Unterrichtsbaustein (Foto aus Heft)

+
+
+ + + +
+

AB 3: Aufschriften und Kennzeichnung

+

Das Leistungsschütz trägt zahlreiche Aufschriften — Ordnungsziffern, Funktionsziffern, Klemmenbezeichnungen und Symbole.

+ +
+
+ Siemens Schütz mit Aufschriften und Kennzeichnungen +
+ 💡 Tipp: Füge in Canva (canva.com) nummerierte Kreise (1–9) auf dieses Foto ein — so wie in deinem Unterrichtsbaustein AB3 gezeigt. +
+
+ +
+ + + + + + + + + + + + + + + +
Nr.FachbegriffErklärung
1OrdnungszifferNummer des Betriebsmittels
2FunktionszifferArt der Kontaktfunktion
3NO (Normally Open)Schließer — im Ruhezustand offen
4NC (Normally Closed)Öffner — im Ruhezustand geschlossen
5SpulenanschlussKlemmen A1 und A2
6Anzahl der Schließerz.B. 3 NO-Kontakte
7Anzahl der Öffnerz.B. 1 NC-Kontakt
8Ausgangsseite Hauptkontakte2/T1, 4/T2, 6/T3
9Benötigte Steuerspannungz.B. DC 24V
+
+
+ +
+

3.2 Schützkontakte des Leistungsschützes

+

Die Hauptkontakte des Leistungsschützes Q1 werden wie folgt bezeichnet:

+
+ + + + + + + + + + + + + + + +
EingangsseiteAusgangsseiteFunktion
1/L12/T1Phase L1 → Motor T1
3/L24/T2Phase L2 → Motor T2
5/L36/T3Phase L3 → Motor T3
1314Hilfskontakt (Schließer NO)
2122Hilfskontakt (Öffner NC)
3132Hilfskontakt (Schließer NO)
4344Hilfskontakt (Schließer NO)
A1A2Spulenanschlüsse
+ +
+

Gebrauchskategorien nach IEC

+
+

Käfigläufermotor anlassen / ausschalten.

+

Käfigläufer — Anlassen, Gegenstrombremsung, Tippbetrieb.

+

Steuerstromkreise mit elektromagnetischen Lasten.

+

Gleichstrom-Reihenschlussmotoren.

+
+ + +
+ ⭐ Leistungsaufgabe +

AB 4: Schaltzeichen eines Schützes

+

Schaltzeichen nach DIN EN 60617 — normgerechte Darstellung für Haupt- und Hilfskontakte.

+ +
+

Aufgabe 4.1 — Schaltzeichen Leistungsschütz Q1

+
+
+ 📷 +

Schaltbild Q1 — Leistungsschütz mit Bezeichnungen

+

Fotografiere das Schaltbild aus deinem Unterrichtsbaustein AB4 oder erstelle es mit diesem KI-Prompt bei ChatGPT/DALL-E:

+ „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."

+
+

Abb. 4 — Schaltzeichen Leistungsschütz Q1 (aus AB4)

+ +
+

Aufgabe 4.2 — Korrigiertes Schaltbild K1

+
+
+ 4.2: In deinem Unterrichtsbaustein hast du ein fehlerhaftes Schaltbild eines K1-Schützes erhalten und korrigiert. Deine Korrekturen: +
    +
  • Ordnungsziffer korrigiert
    • +
  • Funktionsziffer korrigiert
    • +
  • Kontaktnummern (13, 14, 21, 22, 31, 32, 43, 44) korrekt eingetragen
    • +
+
+
+ 📷 +

Korrigiertes Schaltbild K1 (Aufgabe 4.2)

+

Foto deiner korrigierten Lösung aus dem Unterrichtsbaustein

+
+ +
+

Aufgabe 4.3 — Symbolübersicht

+
+ + + + + + + + + + + + + + + + + + +
SymbolBezeichnung
+
+ 📷 +

Symbol: Hauptschütz Q1 (3 Kontakte)

+

Aus Fachkundebuch abfotografieren oder mit KI erstellen

+
+ 		Hauptschütz mit drei Kontakten
+
+ 📷 +

Symbol: Hauptschütz Q2 (3 HK + 4 Hilfskontakte)

+

Aus Fachkundebuch abfotografieren oder mit KI erstellen

+
+ 		Hauptschütz mit drei Hauptkontakten und 4 Hilfskontakten
+
+ 📷 +

Symbol: Hilfsschütz K1 (4 Schließer + 2 Öffner)

+

Aus Fachkundebuch abfotografieren oder mit KI erstellen

+
+ 		Hilfsschütz mit 4 Schließern und 2 Öffnern
+
+ + +
+ ⭐ Leistungsaufgabe +

AB 5: Bestandteile eines Schützes

+

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.

+ +
+

Aufgabe 5.1 — Die 8 Bestandteile

+
+ +
+
+
+ Bestandteile eines Schützes – Querschnitt +
Abb. 5 — Motorschütz geöffnet (Quelle: Wikimedia Commons)
+
+ +
+ 📷 +

Beschriftetes Bild: Alle 8 Bauteile nummeriert

+

Erstelle mit Canva (canva.com): Lade das Foto oben hoch, füge 8 nummerierte Pfeile/Kreise ein und beschrifte:
+ 1=Öffner, 2=Schaltstücke, 3=Schließer, 4=Spulenanschluss, 5=Anker, 6=Kurzschlussring, 7=Spule, 8=Eisenkern

+
+
+ +
    +
  1. Öffner — Ruhekontakt (NC), öffnet bei Anzug der Spule
    2. +
  2. Schaltstücke — Kontaktflächen aus Silberlegierung
    3. +
  3. Schließer — Arbeitskontakt (NO), schließt bei Anzug
    4. +
  4. Spulenanschluss — Klemmen A1 und A2
    5. +
  5. Anker — bewegliches Eisenteil, wird angezogen
    6. +
  6. Kurzschlussring — verhindert Brummen bei AC-Spulen
    7. +
  7. Spule — Erregerspule, erzeugt das Magnetfeld
    8. +
  8. Eisenkern — verstärkt und leitet den magnetischen Fluss
    9. +
+
+ +
+

Aufgabe 5.2 — Hauptstrom- und Steuerkontakte

+
+
+
+

Hauptstromkontakte

+
    +
  • Schalten die Außenleiter an den Verbraucher
    • +
  • Sind in getrennten Schaltkammern angeordnet
    • +
  • Bei größeren Leistungen mit Lichtbogenlöscheinrichtungen ausgestattet
    • +
+
+
+

Steuerkontakte

+
    +
  • Schalten Kontakte für Steuer- und Meldeaufgaben
    • +
  • Führen wesentlich weniger Leistung als Hauptstromkontakte
    • +
+
+
+
+ + +
+ ⭐ Leistungsaufgabe +

AB 6: Funktionsweise eines Schützes

+

Vom Anlegen der Spulenspannung bis zum Abfall — in fünf Schritten erklärt.

+ +
+

Aufgabe 6.1 — Fünf-Schritt-Ablauf

+
+ +
+
+

Spannung anlegen

+

Spannung wird an die beiden Spulenanschlüsse A1 und A2 angelegt.

+
+
+

Magnetfeld entsteht

+

Strom fließt durch die Schützspule — ein Magnetfeld entsteht.

+
+
+

Anker wird angezogen

+

Das Magnetfeld zieht den Anker an und betätigt die Schaltkontakte.

+
+
+

Kontakte schalten

+

Schließer schließen, Öffner öffnen — der Verbraucher wird eingeschaltet.

+
+
+

Schütz fällt ab

+

Nach Abschalten der Spannungsversorgung drückt die Rückstellfeder den Anker zurück. Das Schütz fällt ab.

+
+
+ +
+ ⚠️ Wichtig: Das Schütz ist kein Dauermagnet — fällt die Steuerspannung aus, fällt das Schütz sofort ab! +
+ +
+

6.2 Galvanische Trennung

+

Steuer- und Hauptstromkreis sind elektrisch voneinander getrennt — die Übertragung erfolgt ausschließlich über das Magnetfeld.

+
+ +
+
+

Steuerstromkreis

+
DC 24V
+
kleiner Steuerstrom, Taster / SPS
+ Taster Steuerstromkreis +
+ +
+ ⏚ + Q1 Schütz +
+ +
+

Hauptstromkreis

+
AC 230V
+
großer Laststrom, Motor / Last
+ + + M + +
+
+ +
+ Die Galvanische Trennung bedeutet, dass zwei Stromkreise zwar verbunden sind, aber nicht elektrisch. Das Übertragungsmedium ist der Elektromagnetismus. +
+
+ + +
+

AB 7: Auftragsabschluss

+

Zusammenfassung der Fehlerquellen, Behebung und die fünf Sicherheitsregeln beim Schützaustausch.

+ +
+

Aufgabe 7.1 — Mögliche Fehlerquellen und Behebung

+

Antwort an Herrn Rohweider:

+
+ +
+
+

Defekter Anschluss

+

Behebung: Alle Schraubverbindungen prüfen und ggf. nachziehen.

+
+
+

Defekte Zuleitung

+

Behebung: Leitungen mit Messgerät prüfen, beschädigte Leitung ersetzen.

+
+
+

Defektes Schütz

+

Behebung: Schütz austauschen — dabei Fünf Sicherheitsregeln beachten.

+
+
+ +
+

7.2 Fünf Sicherheitsregeln beim Schützaustausch

+
+ +
+ Vor dem Austausch müssen (je nach Spannungshöhe) die Fünf Sicherheitsregeln der Elektrotechnik beachtet werden! +
+ +
+
+
1
+

⛔ Freischalten

+

Anlage spannungsfrei schalten

+
+
+
2
+

🔒 Gegen Wieder­einschalten sichern

+

Hauptschalter abschließen

+
+
+
3
+

🔍 Spannungs­freiheit feststellen

+

Mit Messgerät alle Leiter prüfen

+
+
+
4
+

🌍 Erden und kurz­schließen

+

Bei Mittelspannung und höher

+
+
+
5
+

🚧 Benachbarte Teile abdecken

+

Schutz vor Nachbarspannungen

+
+
+
+ + +
+

AB 8: Übungs- und Zusatzaufgaben — Hebekran

+

Die Steuerung eines Hebekrans wird erneuert — verstehen, analysieren und passendes Ersatzschütz auswählen.

+ +
+ Ausgangssituation: Die Steuerung eines Hebekrans (5t, Abb. 1) wird erneuert. +
+ +
+ 📷 +

Technologieschema Hebekran (Abb. 1)

+

Foto aus deinem Unterrichtsbaustein AB8, Seite 10

+
+ +
+

Funktionsbeschreibung

+
+ + +
+

Aufgabe 8.1 — Austausch von -K1

+
+
+

Beim Austausch von -K1 beachten:

+
    +
  • Passendes Ersatzschütz verwenden (gleiche Spulenspannung, gleiche Gebrauchskategorie, gleiche Kontaktzahl)
    • +
  • Spannungsversorgung vorher abschalten (Fünf Sicherheitsregeln!)
    • +
+
+ +
+

Aufgabe 8.2 — Schützauswahl A, B oder C

+

Welches Schütz (A, B oder C) ist geeignet?

+
+ +
+
+

❌ Schütz A — Nicht geeignet

+

Spulenspannung 230V AC — passt nicht zur 24V DC Steuerung

+
+
+

✅ Schütz B — Geeignet

+

Spulenspannung DC 24V ✓, besitzt Schließerkontakt (NO) ✓

+
+
+

✅ Schütz C — Geeignet

+

Spulenspannung DC 24V ✓, besitzt Schließerkontakt (NO) ✓

+
+
+ +
+ 📷 +

Schütze A, B und C — Vergleich (Siemens SIRIUS)

+

Foto aus deinem Unterrichtsbaustein AB8, Seite 11

+
+ +
+

Aufgabe 8.3 — NC und NO

+
+
+
+

NC — Normally Closed

+

NC steht für Normally Closed — im Ruhezustand geschlossen. Das entspricht einem Öffner-Kontakt.

+
+
+

NO — Normally Open

+

NO steht für Normally Open — im Ruhezustand offen. Das entspricht einem Schließer-Kontakt.

+
+
+ +
+

Aufgabe 8.4 — Galvanische Trennung am Hebekran

+
+
+ Die beiden Stromkreise sind elektrisch voneinander getrennt, aber durch die elektromagnetischen Schalter besteht eine Verbindung zwischen den Stromkreisen. +
+ +
+

Aufgabe 8.5 — Gebrauchskategorie

+
+
+ Das Ersatz-Schütz mit Gebrauchskategorie AC-3 kann NICHT verwendet werden — AC-3 ist nicht für dauernden Tippbetrieb geeignet. Für Tippbetrieb wird AC-4 benötigt. +
+
+ + +
+

Wissens-Check

+

Acht Fragen aus dem Unterrichtsbaustein — sofortiges Feedback nach jeder Antwort.

+
+
+ + +
+ +
+ + + + - diff --git a/script.js b/script.js index 3241e94..e69de29 100644 --- a/script.js +++ b/script.js @@ -1,184 +0,0 @@ -// --- Mobile Menu Toggle --- -const mobileMenuBtn = document.getElementById('mobile-menu'); -const navLinks = document.querySelector('.nav-links'); - -if (mobileMenuBtn) { - mobileMenuBtn.addEventListener('click', () => { - navLinks.classList.toggle('active'); - }); - - // Close menu when clicking a link - document.querySelectorAll('.nav-links a').forEach(link => { - link.addEventListener('click', () => { - navLinks.classList.remove('active'); - }); - }); -} - - -// --- Interactive Simulation (EVA Traffic Light) --- -const simBtn = document.getElementById('sim-btn'); -const simLogic = document.getElementById('sim-logic'); -const lightRed = document.getElementById('light-red'); -const lightGreen = document.getElementById('light-green'); -const simStatus = document.getElementById('sim-status'); - -let isTrafficGreen = true; - -// Function to trigger traffic light sequence -function triggerTrafficLight() { - if (!isTrafficGreen) return; // Already red or changing - - // 1. INPUT (Eingabe) - simBtn.classList.add('active'); // Visual feedback button pressed - simStatus.textContent = "Eingabe: Signal erfasst..."; - - // 2. PROCESSING (Verarbeitung) - setTimeout(() => { - simLogic.classList.add('processing'); // Spin or glow - simStatus.textContent = "Verarbeitung: Logik schaltet um..."; - - // 3. OUTPUT (Ausgabe) sequence - setTimeout(() => { - // Traffic Green -> Red - lightGreen.classList.remove('active'); - lightRed.classList.add('active'); - isTrafficGreen = false; - - simLogic.classList.remove('processing'); - simStatus.textContent = "Ausgabe: Autos Rot, Fußgänger Grün!"; - simStatus.style.color = "#10b981"; - - // Reset after 3 seconds - setTimeout(() => { - lightRed.classList.remove('active'); - lightGreen.classList.add('active'); - isTrafficGreen = true; - simStatus.textContent = "Status: Autos haben Grün"; - simStatus.style.color = "#1e293b"; - simBtn.classList.remove('active'); - }, 3000); - - }, 1000); // Wait 1s for processing simulation - }, 500); -} - -// Event Listeners -if (simBtn) { - simBtn.addEventListener('click', triggerTrafficLight); -} - - -// --- Accordion Logic --- -const accordionHeaders = document.querySelectorAll('.accordion-header'); - -accordionHeaders.forEach(header => { - header.addEventListener('click', () => { - const content = header.nextElementSibling; - content.classList.toggle('open'); - }); -}); - - -// --- Quiz Logic (Baustein 1) --- -const quizData = [ - { - question: "Was ist der Unterschied zwischen Steuern und Regeln?", - options: [ - "Es gibt keinen Unterschied.", - "Beim Steuern gibt es keine Rückkopplung, beim Regeln schon.", - "Steuern ist genauer als Regeln.", - "Regeln passiert nur von Hand." - ], - correct: 1 - }, - { - question: "Wofür steht EVA in der Steuerungstechnik?", - options: [ - "Einschalten - Verriegeln - Ausschalten", - "Energie - Versorgung - Antrieb", - "Eingabe - Verarbeitung - Ausgabe", - "Elektrisch - Verbunden - Automatisch" - ], - correct: 2 - }, - { - question: "Welches ist ein Beispiel für eine EINGABE?", - options: [ - "Ein Motor läuft an", - "Eine Signallampe leuchtet", - "Ein Taster wird gedrückt", - "Ein Schütz zieht an" - ], - correct: 2 - }, - { - question: "Was ist eine VPS?", - options: [ - "Verbindungsprogrammierbare Steuerung (verdrahtet)", - "Volle Power Steuerung", - "Virtuelle Programm Struktur", - "Variable Prozess Schnittstelle" - ], - correct: 0 - } -]; - -let currentQuestion = 0; -const questionEl = document.getElementById('quiz-question'); -const optionsEl = document.getElementById('quiz-options'); -const resultEl = document.getElementById('quiz-result'); -const nextBtn = document.getElementById('next-question'); - -function loadQuestion() { - if (!questionEl) return; - - const data = quizData[currentQuestion]; - questionEl.textContent = data.question; - optionsEl.innerHTML = ''; - resultEl.textContent = ''; - nextBtn.classList.add('hidden'); - - data.options.forEach((option, index) => { - const btn = document.createElement('button'); - btn.textContent = option; - btn.classList.add('option-btn'); - btn.addEventListener('click', () => checkAnswer(index)); - optionsEl.appendChild(btn); - }); -} - -function checkAnswer(selectedIndex) { - const data = quizData[currentQuestion]; - const buttons = optionsEl.querySelectorAll('.option-btn'); - - // Disable all buttons - buttons.forEach(btn => btn.disabled = true); - - if (selectedIndex === data.correct) { - buttons[selectedIndex].classList.add('correct'); - resultEl.textContent = "Richtig! Gut gemacht."; - resultEl.style.color = "#10b981"; - } else { - buttons[selectedIndex].classList.add('wrong'); - buttons[data.correct].classList.add('correct'); // Show correct answer - resultEl.textContent = "Leider falsch."; - resultEl.style.color = "#ef4444"; - } - - if (currentQuestion < quizData.length - 1) { - nextBtn.classList.remove('hidden'); - } else { - resultEl.textContent += " Quiz beendet!"; - } -} - -if (nextBtn) { - nextBtn.addEventListener('click', () => { - currentQuestion++; - loadQuestion(); - }); -} - -// Initialize Quiz -loadQuestion(); diff --git a/styles.css b/styles.css index 6f2f3cf..f2bdcd8 100644 --- a/styles.css +++ b/styles.css @@ -1,669 +1,30 @@ -/* Global Styles */ -:root { - --primary: #3b82f6; /* Brighter blue (was #2563eb) */ - --primary-dark: #2563eb; /* Less dark blue (was #1e40af) */ - --secondary: #10b981; /* Success green */ - --accent: #f59e0b; /* Warning/Attention orange */ - --dark: #1e293b; /* Dark slate */ - --light: #f8fafc; /* Very light grey/blue */ - --white: #ffffff; - --text-main: #334155; - --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -} - * { - margin: 0; - padding: 0; box-sizing: border-box; } body { - font-family: 'Poppins', sans-serif; - line-height: 1.6; - color: var(--text-main); - background-color: var(--light); - scroll-behavior: smooth; + margin: 0; + font-family: system-ui, sans-serif; + line-height: 1.5; + color: #111; + background: #fff; } -/* Navbar */ -.navbar { - background-color: var(--white); - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; - box-shadow: var(--shadow); - position: sticky; - top: 0; - z-index: 100; - flex-wrap: wrap; /* Allow wrapping for mobile menu */ -} - -.menu-toggle { - display: none; - flex-direction: column; - justify-content: space-between; - width: 30px; - height: 21px; - background: none; - border: none; - cursor: pointer; -} - -.menu-toggle .bar { - height: 3px; - width: 100%; - background-color: var(--primary); - border-radius: 3px; -} - -.logo { - font-weight: 700; - font-size: 1.5rem; - color: var(--primary); -} - -.nav-links { - list-style: none; - display: flex; - gap: 2rem; -} - -.nav-links a { - text-decoration: none; - color: var(--text-main); - font-weight: 500; - transition: color 0.3s; -} - -.nav-links a:hover { - color: var(--primary); -} - -/* Hero Section */ -.hero { - background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); - color: var(--white); - padding: 6rem 2rem; - text-align: center; - border-bottom-right-radius: 50px; - border-bottom-left-radius: 50px; -} - -.hero h1 { - font-size: 3.5rem; - margin-bottom: 1rem; - font-weight: 700; -} - -.hero p { - font-size: 1.2rem; - opacity: 0.9; - margin-bottom: 2rem; -} - -/* Buttons */ -.btn { - display: inline-block; - background-color: var(--accent); - color: var(--white); - padding: 0.8rem 2rem; - border-radius: 30px; - text-decoration: none; - font-weight: 600; - transition: transform 0.2s, box-shadow 0.2s; - border: none; - cursor: pointer; -} - -.btn:hover { - transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); -} - -.hidden { - display: none; -} - -/* Sections */ -.section { - padding: 4rem 2rem; - max-width: 1200px; +.wrap { + max-width: 40rem; margin: 0 auto; + padding: 2rem 1rem; } -.alt-bg { - background-color: #e2e8f0; - border-radius: 20px; - margin-top: 2rem; - margin-bottom: 2rem; +h1 { + font-size: 1.25rem; + font-weight: 600; } -.section-title { - text-align: center; - font-size: 2.5rem; - margin-bottom: 3rem; - color: var(--dark); - position: relative; -} - -.section-title::after { - content: ''; - display: block; - width: 60px; - height: 4px; - background-color: var(--primary); - margin: 10px auto 0; - border-radius: 2px; -} - -/* Goals Section (Green) */ -.goals-list { - list-style: none; - font-size: 1.2rem; - font-weight: 500; -} - -.goals-list li { - margin-bottom: 1rem; - display: flex; - align-items: center; - gap: 10px; -} - -.check-icon { - color: #22c55e; /* Bright Green */ - font-weight: bold; - font-size: 1.5rem; -} - -.goals-container { - background: #f0fdf4; /* Very light green background */ - padding: 2rem; - border-radius: 10px; - box-shadow: var(--shadow); - max-width: 800px; +.foot { + max-width: 40rem; margin: 0 auto; -} - -/* Cards */ -.card-grid { - display: flex; /* Changed from grid to flex for vertical stack */ - flex-direction: column; - gap: 2rem; - max-width: 800px; /* Limit width so they don't stretch too far */ - margin: 0 auto; /* Center the stack */ -} - -.card { - background: var(--white); - padding: 3rem; /* Bigger padding */ - border-radius: 15px; - box-shadow: var(--shadow); - transition: transform 0.3s; - text-align: center; - border: 1px solid #e2e8f0; /* Slight border for definition */ -} - -.card:hover { - transform: translateY(-5px); - border-color: var(--primary); /* Highlight on hover */ -} - -.card .icon { - font-size: 4rem; /* Bigger icon */ - margin-bottom: 1.5rem; -} - -.card h3 { - margin-bottom: 1rem; - font-size: 2rem; /* Bigger title */ - color: var(--primary-dark); -} - -.card p { - font-size: 1.2rem; /* Bigger text */ - line-height: 1.8; -} - -/* Steps (EVA) */ -.steps-container { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: 1rem; -} - -.step { - flex: 1; - min-width: 200px; - text-align: center; - position: relative; - background: white; - padding: 2rem; - border-radius: 15px; - box-shadow: var(--shadow); -} - -.step-number { - width: 60px; - height: 60px; - background-color: var(--primary); - color: var(--white); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 2rem; - font-weight: bold; - margin: 0 auto 1rem; -} - -.small-text { - font-size: 0.9rem; - color: #64748b; - margin-top: 0.5rem; -} - -/* Interactive Simulation (EVA Traffic Light) */ -.simulation-container { - background: var(--white); - padding: 3rem; - border-radius: 15px; - box-shadow: var(--shadow); - text-align: center; -} - -.circuit-diagram { - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - flex-wrap: wrap; - margin-bottom: 2rem; -} - -.circuit-control, .circuit-power { - border: 3px solid #cbd5e1; - padding: 1.5rem; - border-radius: 15px; - width: 220px; - height: 300px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - background-color: #f8fafc; -} - -.component-wrapper { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; -} - -.label { - font-weight: 600; - font-size: 0.9rem; - color: var(--text-main); -} - -/* Button / Taster Symbol */ -.sim-button { - background-color: #ef4444; - border: none; - padding: 0; - border-radius: 50%; - width: 80px; - height: 80px; - cursor: pointer; - box-shadow: 0 4px 0 #b91c1c; - display: flex; - align-items: center; - justify-content: center; - transition: transform 0.1s; -} - -.sim-button:active, .sim-button.active { - transform: translateY(4px); - box-shadow: none; -} - -.symbol-taster { - width: 40px; - height: 40px; - position: relative; -} - -.button-head { - width: 30px; - height: 10px; - background: white; - position: absolute; - top: 15px; - left: 5px; - border-radius: 2px; -} - -.line-top, .line-bottom { - width: 4px; - height: 12px; - background: white; - position: absolute; - left: 18px; -} -.line-top { top: 3px; } -.line-bottom { bottom: 3px; } - - -/* Logic Processing Animation */ -.coil#sim-logic { - background: white; - border: 2px solid #cbd5e1; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s; -} - -.coil#sim-logic.processing { - border-color: var(--accent); - background-color: #fffbeb; - box-shadow: 0 0 15px var(--accent); - animation: pulseLogic 0.5s infinite alternate; -} - -@keyframes pulseLogic { - from { transform: scale(1); } - to { transform: scale(1.1); } -} - -/* Traffic Light */ -.traffic-light { - width: 80px; - height: 160px; - background-color: #333; - border-radius: 10px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-around; - padding: 10px; -} - -.light { - width: 50px; - height: 50px; - border-radius: 50%; - background-color: #555; - transition: background-color 0.3s, box-shadow 0.3s; -} - -.light.red.active { - background-color: #ef4444; - box-shadow: 0 0 20px #ef4444; -} - -.light.green.active { - background-color: #10b981; - box-shadow: 0 0 20px #10b981; -} - -.circuit-arrow { - font-weight: bold; - color: var(--primary); - font-size: 1.2rem; -} - -.status-text { - font-size: 1.5rem; - font-weight: bold; - color: var(--dark); -} - -/* Accordion */ -.accordion { - max-width: 800px; - margin: 0 auto; -} - -.accordion-item { - background: var(--white); - border-radius: 8px; - margin-bottom: 1rem; - box-shadow: var(--shadow); - overflow: hidden; -} - -.accordion-header { - width: 100%; - padding: 1.5rem; - text-align: left; - border: none; - background-color: #f1f5f9; /* Light grey background to make it visible */ - color: #1e293b; /* Dark text explicitly */ - font-weight: 600; - font-size: 1.1rem; - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; - transition: background-color 0.2s; -} - -.accordion-header:hover { - background-color: #e2e8f0; /* Darker on hover */ - color: var(--primary); /* Blue text on hover */ -} - -.accordion-header:after { - content: '+'; - font-size: 1.5rem; -} - -.accordion-content { - padding: 0 1.5rem; - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease, padding 0.3s ease; -} - -.accordion-content.open { - padding-bottom: 1.5rem; - max-height: 200px; /* Adjust based on content */ -} - -/* Quiz */ -.quiz-container { - background: var(--white); - padding: 3rem; - border-radius: 15px; - box-shadow: var(--shadow); - max-width: 800px; - margin: 0 auto; - text-align: center; -} - -.quiz-question { - font-size: 1.5rem; - margin-bottom: 2rem; - font-weight: 600; -} - -.quiz-options { - display: grid; - gap: 1rem; -} - -.option-btn { - padding: 1rem; - border: 2px solid #e2e8f0; - border-radius: 10px; - background: #f8fafc; /* Light background for visibility */ - color: #1e293b; /* Dark text */ - cursor: pointer; - font-size: 1.1rem; - transition: all 0.2s; - font-weight: 500; -} - -.option-btn:hover { - background-color: #e2e8f0; - border-color: var(--primary); - color: #1e293b; -} - -.option-btn.correct { - background-color: var(--secondary); - color: white; - border-color: var(--secondary); -} - -.option-btn.wrong { - background-color: #ef4444; - color: white; - border-color: #ef4444; -} - -.quiz-result { - margin-top: 1.5rem; - font-weight: bold; - font-size: 1.2rem; - min-height: 1.5rem; -} - -/* Responsive */ -@media (max-width: 768px) { - .navbar { - padding: 1rem; - } - - .menu-toggle { - display: flex; /* Show hamburger on mobile */ - } - - .nav-links { - display: none; /* Hide default menu */ - width: 100%; - position: absolute; - top: 100%; - left: 0; - background-color: var(--white); - flex-direction: column; - padding: 1rem; - box-shadow: var(--shadow); - text-align: center; - gap: 1.5rem; - } - - .nav-links.active { - display: flex; /* Show when active */ - } - - .time-counter { - display: none; /* Hide timer on very small screens or move it */ - } - - .hero { - padding: 3rem 1rem; - } - - .hero h1 { - font-size: 2rem; - } - - .section { - padding: 2rem 1rem; - } - - /* Cards - Ensure they fit on small screens */ - .card { - padding: 1.5rem; - width: 100%; /* Ensure full width usage */ - } - - .card .icon { - font-size: 3rem; - } - - .card h3 { - font-size: 1.5rem; - } - - /* Simulation - Ensure it fits */ - .simulation-container { - padding: 1.5rem; /* Reduce padding */ - } - - .circuit-diagram { - flex-direction: column; - gap: 1.5rem; - } - - .circuit-arrow { - transform: rotate(90deg); - margin: 0.5rem 0; - } - - .circuit-control, .circuit-power { - width: 100%; - max-width: 100%; /* Use full width */ - height: auto; /* Auto height to fit content */ - min-height: 250px; - } - - /* Steps */ - .steps-container { - flex-direction: column; - } - - .step { - width: 100%; - margin-bottom: 1rem; - } - - .watermark { - font-size: 0.6rem; - bottom: 10px; - right: 10px; - background-color: rgba(255, 255, 255, 0.9); - padding: 3px 8px; - } -} - -/* Small Phones (iPhone SE, etc.) */ -@media (max-width: 380px) { - .hero h1 { - font-size: 1.5rem; - } - - .section-title { - font-size: 1.8rem; - } - - .card { - padding: 1rem; - } - - .circuit-control, .circuit-power { - padding: 1rem; - } -} - -/* Watermark */ -.watermark { - position: fixed; - bottom: 20px; - right: 20px; - background-color: rgba(255, 255, 255, 0.8); - padding: 5px 10px; - border-radius: 5px; - font-size: 0.8rem; - color: #64748b; - font-weight: 600; - pointer-events: none; /* Allows clicking through it */ - z-index: 1000; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); - border: 1px solid rgba(0,0,0,0.1); + padding: 0 1rem 2rem; + font-size: 0.875rem; + color: #555; }