From c2c0a39190b109b8c9072d2da5df44a62bb5c3ed Mon Sep 17 00:00:00 2001 From: root Date: Sun, 19 Apr 2026 21:18:35 +0000 Subject: [PATCH] Grosses Update: Emojis, Animationen, Interaktivitaet, Hero, Quiz-Fortschritt MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Emojis entfernt: Nav-Logo, Warn-Box, Betriebsmittel-Liste, Sicherheitsregeln - Hero: Titel ohne 'Baustein 2:', neuer Untertitel, CSS scroll-arrow statt ↓ - Section-heads: ::after Unterstrich-Animation beim Einblenden - Karten/VS-Cards: hover box-shadow 0 8px 24px rgba(22,163,74,.12) - VS-List: Hover-Hintergrund amber/green je nach Karte - Timeline: Schritte blenden von links ein (translateX -30px → 0, delay je Schritt) - Aufbau-Liste: Klick klappt Info-Box auf/zu mit Zusatzerklaerung - Quiz: Fortschrittsbalken aktualisiert sich nach jeder Antwort - Galvanische Trennung: animierter Strompunkt (flow-dot) in beiden Boxen - Wikimedia-URLs ersetzt: schuetz-aufbau.jpg, taster.jpg, hebekran.jpg (onerror=none) - Bildplatzhalter 'Beschriftetes Bild 8 Bauteile' + Canva-Hinweis entfernt - Footer-Wikimedia-Hinweis entfernt - Alle Canva/Fachkundebuch-Texte entfernt - Transitions max .2s fuer Hover-Effekte Made-with: Cursor --- index.html | 373 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 237 insertions(+), 136 deletions(-) diff --git a/index.html b/index.html index ab508e6..d85f343 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ -Baustein 2: Elektromagnetische Schalter | Steuerungstechnik +Elektromagnetische Schalter | Steuerungstechnik @@ -31,12 +31,12 @@ body{margin:0;font-family:'Exo 2',system-ui,sans-serif;background:var(--bg);colo h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-.01em} .mono{font-family:'Share Tech Mono',monospace} -/* ─── NAV ─────────────────────────────────────── */ +/* ─── NAV ──────────────────────────────────── */ nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:0 1px 12px rgba(0,0,0,.04)} .nav-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;gap:.5rem} .logo{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.05rem;color:var(--accent);letter-spacing:-.02em} .nav-links{display:flex;flex-wrap:wrap;gap:.2rem;list-style:none;margin:0;padding:0;justify-content:flex-end} -.nav-links a{color:#374151;text-decoration:none;font-size:.82rem;font-weight:500;padding:.45rem .7rem;border-radius:8px;transition:.18s} +.nav-links a{color:#374151;text-decoration:none;font-size:.82rem;font-weight:500;padding:.45rem .7rem;border-radius:8px;transition:.2s} .nav-links a:hover{color:var(--accent);background:var(--accent-soft)} #menu-btn{display:none;background:var(--panel);border:1px solid var(--accent);color:var(--accent);padding:.5rem .9rem;border-radius:8px;cursor:pointer;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600} @media(max-width:960px){ @@ -46,37 +46,68 @@ nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop- .nav-inner{align-items:flex-start;flex-direction:column} } -/* ─── REVEAL ANIMATION ────────────────────────── */ +/* ─── REVEAL ANIMATION ──────────────────────── */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease} .reveal.visible{opacity:1;transform:none} -/* ─── SECTIONS ────────────────────────────────── */ +/* ─── SECTION HEADS with underline animation ── */ +.section-head{ + font-size:clamp(1.5rem,3vw,2rem); + margin:0 0 .5rem; + color:var(--accent); + font-weight:700; + display:inline-block; + position:relative; +} +.section-head::after{ + content:''; + position:absolute; + bottom:-4px;left:0; + height:2px;width:0; + background:var(--accent); + transition:width .5s ease; +} +.reveal.visible .section-head::after{width:100%} + +/* ─── SECTIONS ──────────────────────────────── */ .section{padding:3.5rem 1.25rem;max-width:1200px;margin:0 auto} -.section-head{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .5rem;color:var(--accent);font-weight:700} -.section-tag{display:inline-block;font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:var(--amber-soft);padding:.3rem .7rem;border-radius:999px;margin-bottom:.75rem} -.section-sub{color:var(--muted);max-width:780px;margin:0 0 2rem;font-size:.98rem} +.section-sub{color:var(--muted);max-width:780px;margin:.5rem 0 2rem;font-size:.98rem} .alt-bg{background:linear-gradient(180deg,var(--accent-soft) 0%,transparent 100%)} -/* ─── HERO ────────────────────────────────────── */ +/* ─── HERO ──────────────────────────────────── */ .hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;padding:5rem 1.25rem 4rem;text-align:center;overflow:hidden;background:var(--bg)} .hero-bg{position:absolute;inset:0;background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Electrical_panel.jpg/640px-Electrical_panel.jpg') center/cover no-repeat;opacity:.05;pointer-events:none} .hero-inner{position:relative;z-index:2;max-width:900px;width:100%} .hero h1{font-size:clamp(2rem,5.5vw,3.2rem);margin:0 0 1rem;line-height:1.15;background:linear-gradient(135deg,#15803d,#16a34a 50%,#ca8a04);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800} .hero-lead{font-size:1.1rem;color:#374151;max-width:640px;margin:0 auto 2.5rem} .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem} -.stat{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.1rem 1.5rem;min-width:160px;box-shadow:var(--glow);transition:transform .25s,border-color .25s} -.stat:hover{transform:translateY(-3px);border-color:var(--accent)} +.stat{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.1rem 1.5rem;min-width:160px;box-shadow:var(--glow);transition:transform .2s,border-color .2s,box-shadow .2s} +.stat:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgba(22,163,74,.12)} .stat b{display:block;font-family:'Outfit',sans-serif;font-size:1.6rem;color:var(--accent);font-weight:700;line-height:1.1} .stat span{font-size:.8rem;color:var(--muted);display:block;margin-top:.25rem} -.hero-scroll{margin-top:3rem;font-size:2rem;line-height:1;color:var(--muted);animation:heroBounce 1.6s ease-in-out infinite} -@keyframes heroBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} -/* ─── TEXT / CONTENT ──────────────────────────── */ +/* CSS scroll arrow */ +.hero-scroll{margin-top:3rem;display:flex;justify-content:center} +.scroll-arrow{ + width:22px;height:22px; + border-right:3px solid var(--muted); + border-bottom:3px solid var(--muted); + transform:rotate(45deg); + animation:arrowBounce 1.5s ease-in-out infinite; + border-radius:2px; +} +@keyframes arrowBounce{ + 0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5} + 50%{transform:rotate(45deg) translate(4px,4px);opacity:1} +} + +/* ─── TEXT ──────────────────────────────────── */ p{margin:.6rem 0} .intro-text{font-size:1.05rem;color:#374151;margin-bottom:1.5rem} -/* ─── CARDS ───────────────────────────────────── */ -.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem} +/* ─── CARDS ─────────────────────────────────── */ +.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;transition:box-shadow .2s} +.card:hover{box-shadow:0 8px 24px rgba(22,163,74,.12)} .card h3,.card h4{margin:0 0 .5rem;color:var(--text)} .card-title{font-size:1rem;font-weight:600;margin:0 0 .5rem} .card-body{font-size:.92rem;color:var(--muted)} @@ -91,33 +122,21 @@ p{margin:.6rem 0} @media(max-width:1000px){.grid-5{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.grid-5{grid-template-columns:1fr}} -/* ─── IMAGES / PLACEHOLDERS ───────────────────── */ +/* ─── IMAGES / PLACEHOLDERS ─────────────────── */ img{max-width:100%;height:auto;display:block} .figure{margin:0 0 1rem} .figure img{border-radius:12px;border:2px solid var(--border);box-shadow:var(--glow)} .figcap{margin-top:.6rem;font-size:.85rem;color:var(--muted);text-align:center;font-style:italic} - .img-placeholder{ - min-height:220px; - background:var(--accent-soft); - border:2px dashed #86efac; - border-radius:12px; - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - gap:.5rem; - padding:1.5rem; - text-align:center; + min-height:220px;background:var(--accent-soft);border:2px dashed #86efac; + border-radius:12px;display:flex;flex-direction:column;align-items:center; + justify-content:center;gap:.5rem;padding:1.5rem;text-align:center; } -.img-placeholder.small{min-height:120px;padding:1rem} .ph-icon{font-size:2.5rem;line-height:1} -.img-placeholder.small .ph-icon{font-size:1.6rem} .ph-title{color:var(--accent);font-weight:700;font-size:.9rem;margin:0;font-family:'Outfit',sans-serif} -.img-placeholder.small .ph-title{font-size:.82rem} .ph-hint{color:var(--muted);font-size:.75rem;margin:0;max-width:540px} -/* ─── VS SECTION (AB2) ────────────────────────── */ +/* ─── VS SECTION ────────────────────────────── */ .vs-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;margin:1.5rem 0 2rem} @media(max-width:900px){.vs-wrap{grid-template-columns:1fr;gap:1rem}} .vs-badge{ @@ -127,32 +146,35 @@ img{max-width:100%;height:auto;display:block} display:flex;align-items:center;justify-content:center;flex-shrink:0; margin:0 auto;box-shadow:0 4px 16px rgba(22,163,74,.3); } -.vs-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem} +.vs-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem;transition:box-shadow .2s} +.vs-card:hover{box-shadow:0 8px 24px rgba(22,163,74,.12)} .vs-card.left{border-top:4px solid var(--amber)} .vs-card.right{border-top:4px solid var(--accent)} .vs-card h3{margin:0 0 1rem;font-size:1.1rem} .vs-list{list-style:none;padding:0;margin:0} -.vs-list li{padding:.55rem 0 .55rem 1.6rem;position:relative;font-size:.92rem;color:#374151;border-bottom:1px solid var(--border-soft)} +.vs-list li{ + padding:.55rem 0 .55rem 1.6rem;position:relative; + font-size:.92rem;color:#374151; + border-bottom:1px solid var(--border-soft); + transition:background .2s;border-radius:4px; + cursor:default; +} .vs-list li:last-child{border-bottom:none} .vs-list.amber li::before{content:'•';position:absolute;left:.3rem;top:.4rem;color:var(--amber);font-size:1.4rem;line-height:1;font-weight:700} .vs-list.green li::before{content:'•';position:absolute;left:.3rem;top:.4rem;color:var(--accent);font-size:1.4rem;line-height:1;font-weight:700} +.vs-list.amber li:hover{background:rgba(202,138,4,.08)} +.vs-list.green li:hover{background:rgba(22,163,74,.08)} -/* ─── TABLES ──────────────────────────────────── */ +/* ─── TABLES ────────────────────────────────── */ table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1rem 0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border)} th,td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top} th{background:var(--accent-soft);font-family:'Outfit',sans-serif;font-size:.78rem;color:var(--accent-dark);font-weight:700;text-transform:uppercase;letter-spacing:.04em} tr:last-child td{border-bottom:none} tr:nth-child(even) td{background:#fafafa} td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} - .table-title{font-family:'Outfit',sans-serif;font-weight:700;color:var(--text);margin:1.5rem 0 .5rem;font-size:1rem} -/* ─── AB3 Callout wrapper ─────────────────────── */ -.ab3-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start} -@media(max-width:900px){.ab3-grid{grid-template-columns:1fr}} -.canva-hint{margin-top:.85rem;padding:.85rem 1rem;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;font-size:.88rem;color:var(--accent-dark)} - -/* ─── AB5 parts list ──────────────────────────── */ +/* ─── AB5 parts list ────────────────────────── */ .ab5-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start} @media(max-width:900px){.ab5-grid{grid-template-columns:1fr}} .parts-list{list-style:none;padding:0;margin:0;counter-reset:part} @@ -164,9 +186,9 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} background:#fff; border:1px solid var(--border); border-radius:10px; - transition:.2s; + transition:background .2s,border-color .2s,transform .2s; font-size:.92rem; - cursor:default; + cursor:pointer; } .parts-list li::before{ content:counter(part); @@ -178,11 +200,31 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} } .parts-list li:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateX(4px)} .parts-list strong{color:var(--accent-dark)} +.part-info{ + max-height:0;overflow:hidden; + transition:max-height .3s ease,padding .3s ease; + background:var(--accent-soft); + border:1px solid var(--border); + border-radius:0 0 10px 10px; + margin-top:-8px; + margin-bottom:.6rem; + padding:0 1rem; + font-size:.88rem; + color:var(--accent-dark); +} +.part-info.open{max-height:200px;padding:.75rem 1rem} -/* ─── TIMELINE (AB6) ──────────────────────────── */ +/* ─── TIMELINE ──────────────────────────────── */ .timeline{position:relative;padding-left:2.5rem;margin:2rem 0} .timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-soft));border-radius:2px} -.tl-step{position:relative;margin-bottom:1.25rem;padding:1rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:12px} +.tl-step{ + position:relative;margin-bottom:1.25rem; + padding:1rem 1.25rem;background:#fff; + border:1px solid var(--border);border-radius:12px; + opacity:0;transform:translateX(-30px); + transition:opacity .4s ease,transform .4s ease; +} +.tl-step.tl-visible{opacity:1;transform:none} .tl-step::before{ content:attr(data-n); position:absolute;left:-2.1rem;top:1rem; @@ -195,13 +237,12 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .tl-step h4{margin:0 0 .35rem;color:var(--accent-dark);font-size:1rem} .tl-step p{margin:0;color:#374151;font-size:.92rem} -/* ─── BOXES ───────────────────────────────────── */ +/* ─── BOXES ─────────────────────────────────── */ .warn-box{border:2px solid var(--danger);background:var(--danger-soft);border-radius:12px;padding:1rem 1.25rem;margin:1.25rem 0;color:#7f1d1d;font-weight:500} .warn-box strong{color:var(--danger)} .info-box{border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;padding:1rem 1.25rem;margin:1.25rem 0;color:#064e3b} -.amber-box{border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 10px 10px 0;padding:1rem 1.25rem;margin:1.25rem 0;color:#713f12} -/* ─── GALVANIC (AB6.2) ────────────────────────── */ +/* ─── GALVANIC ──────────────────────────────── */ .galv{display:grid;grid-template-columns:1fr auto 1fr;gap:1.25rem;align-items:stretch;margin:1.5rem 0} @media(max-width:768px){.galv{grid-template-columns:1fr}} .galv-box{background:#fff;border-radius:14px;padding:1.25rem;text-align:center;display:flex;flex-direction:column;gap:.4rem} @@ -214,19 +255,30 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .galv-mid .sym{font-size:3rem;line-height:1;color:var(--accent)} .galv-mid .lbl{font-family:'Share Tech Mono',monospace;font-size:.8rem;color:var(--amber);margin-top:.25rem} -/* ─── AB8 signal list ─────────────────────────── */ +/* Animated current flow dot */ +.flow-track{position:relative;height:18px;margin:.5rem 0;overflow:hidden;border-radius:4px;background:rgba(22,163,74,.08)} +.flow-dot{ + position:absolute;top:50%;transform:translateY(-50%); + width:10px;height:10px;border-radius:50%; + animation:flowMove 2s linear infinite; +} +.flow-dot.green{background:var(--accent);box-shadow:0 0 6px var(--accent)} +.flow-dot.amber{background:var(--amber);box-shadow:0 0 6px var(--amber)} +@keyframes flowMove{from{left:-10px}to{left:100%}} + +/* ─── SIGNAL LIST ───────────────────────────── */ .signal-list{list-style:none;padding:0;margin:1rem 0} .signal-list li{display:flex;align-items:flex-start;gap:.85rem;padding:.75rem 1rem;background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;font-size:.93rem} -.signal-list .icon{font-size:1.4rem;flex-shrink:0;line-height:1.2} .signal-list .sig-name{font-family:'Share Tech Mono',monospace;color:var(--accent);font-weight:600} -/* ─── SAFETY CARDS (AB7.2) ────────────────────── */ -.safe-card{background:#fff;border:1px solid var(--danger);border-top:4px solid var(--danger);border-radius:12px;padding:1rem;text-align:center;box-shadow:0 2px 10px rgba(220,38,38,.08)} +/* ─── SAFETY CARDS ──────────────────────────── */ +.safe-card{background:#fff;border:1px solid var(--danger);border-top:4px solid var(--danger);border-radius:12px;padding:1rem;text-align:center;box-shadow:0 2px 10px rgba(220,38,38,.08);transition:box-shadow .2s} +.safe-card:hover{box-shadow:0 8px 24px rgba(220,38,38,.14)} .safe-card .num{font-family:'Outfit',sans-serif;font-weight:800;color:var(--danger);font-size:1.5rem;line-height:1} .safe-card h4{margin:.5rem 0 .35rem;font-size:.95rem;color:var(--text)} .safe-card p{font-size:.82rem;color:var(--muted);margin:0} -/* ─── ACCORDION ───────────────────────────────── */ +/* ─── ACCORDION ─────────────────────────────── */ .acc-item{border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;overflow:hidden;background:#fff} .acc-h{width:100%;text-align:left;padding:.85rem 1rem;background:var(--accent-soft);border:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center} .acc-h:hover{background:#dcfce7} @@ -234,7 +286,9 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .acc-b.open{max-height:400px;padding:.9rem 1rem 1.1rem} .acc-b p{font-size:.92rem;color:#374151;margin:.25rem 0} -/* ─── QUIZ ────────────────────────────────────── */ +/* ─── QUIZ ──────────────────────────────────── */ +.quiz-progress-wrap{background:var(--border-soft);border-radius:999px;height:8px;margin-bottom:1.5rem;overflow:hidden} +.quiz-progress-bar{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent),#22c55e);width:0%;transition:width .4s ease} .quiz-q{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem} .quiz-q h4{margin:0 0 .75rem;font-size:1rem;color:var(--accent-dark)} .qopts{display:flex;flex-direction:column;gap:.5rem} @@ -249,12 +303,12 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .btn.ghost:hover{background:#6b7280} .score-panel{text-align:center;padding:2rem;margin-top:1.5rem;border-radius:16px;background:#fff;border:2px solid var(--border)} -/* ─── SUBTASK HEADERS ─────────────────────────── */ +/* ─── SUBTASK HEADERS ───────────────────────── */ .subtask{margin:2rem 0 1rem} .subtask h3{margin:0 0 .35rem;color:var(--accent-dark);font-size:1.15rem;font-weight:700} .subtask p.lead{color:var(--muted);margin:0;font-size:.94rem} -/* ─── FOOTER ──────────────────────────────────── */ +/* ─── FOOTER ────────────────────────────────── */ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border);margin-top:2rem} @@ -262,7 +316,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size: - +
-

Baustein 2: Elektromagnetische Schalter

-

Steuerungstechnik

+

Elektromagnetische Schalter

+

Relais und Schütze — Aufbau, Funktion und Einsatz in der Steuerungstechnik

Relais & SchützSchalttypen
Schütz8 Bauteile
- +
- +

Was sind elektromagnetische Schalter?

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.

@@ -317,13 +373,12 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
- +

Relais & Schütz im Vergleich

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

-
Relais geöffnet — Spule und Kontakte sichtbar @@ -339,15 +394,11 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
-
VS
-
- Leistungsschütz + Leistungsschütz
Leistungsschütz

Schütz (Q)

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

Schaltzeichen & Symbole

Normgerechte Darstellung nach DIN EN 60617 — so werden Schütze in Schaltplänen dargestellt.

@@ -399,15 +450,14 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
Schaltzeichen Leistungsschütz — 3 Hauptkontakte, Spule A1/A2, Hilfskontakt 13/14 -
Schaltzeichen eines Leistungsschützes — Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14
+
Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14
-
- +

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

+

Ein Leistungsschütz besteht aus 8 Hauptbauteilen. Klicke auf ein Bauteil für eine erweiterte Erklärung.

Die 8 Bestandteile

@@ -417,30 +467,27 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
Bestandteile eines Schützes – Querschnitt -
Motorschütz geöffnet (Quelle: Wikimedia Commons)
+
Motorschütz geöffnet — alle Bauteile sichtbar
- -
- 📷 -

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. -
  3. Schaltstücke — Kontaktflächen aus Silberlegierung
  4. -
  5. Schließer — Arbeitskontakt (NO), schließt bei Anzug
  6. -
  7. Spulenanschluss — Klemmen A1 und A2
  8. -
  9. Anker — bewegliches Eisenteil, wird angezogen
  10. -
  11. Kurzschlussring — verhindert Brummen bei AC-Spulen
  12. -
  13. Spule — Erregerspule, erzeugt das Magnetfeld
  14. -
  15. Eisenkern — verstärkt und leitet den magnetischen Fluss
  16. -
+
+
    +
  1. Öffner — Ruhekontakt (NC), öffnet bei Anzug der Spule
  2. +
  3. Schaltstücke — Kontaktflächen aus Silberlegierung
  4. +
  5. Schließer — Arbeitskontakt (NO), schließt bei Anzug
  6. +
  7. Spulenanschluss — Klemmen A1 und A2
  8. +
  9. Anker — bewegliches Eisenteil, wird angezogen
  10. +
  11. Kurzschlussring — verhindert Brummen bei AC-Spulen
  12. +
  13. Spule — Erregerspule, erzeugt das Magnetfeld
  14. +
  15. Eisenkern — verstärkt und leitet den magnetischen Fluss
  16. +
+
+
@@ -465,36 +512,36 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
- +

Funktionsweise Schritt für Schritt

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

-
+

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! + Wichtig: Das Schütz ist kein Dauermagnet — fällt die Steuerspannung aus, fällt das Schütz sofort ab!
@@ -508,9 +555,11 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
DC 24V
kleiner Steuerstrom, Taster / SPS
Taster Steuerstromkreis +
@@ -526,6 +575,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size: M +
@@ -534,7 +584,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
- +

Sicherheitsregeln beim Schützaustausch

Vor dem Austausch eines Schützes müssen die fünf Sicherheitsregeln der Elektrotechnik beachtet werden — sie schützen vor lebensgefährlichen Stromschlägen.

@@ -546,33 +596,33 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
1
-

⛔ Freischalten

+

Freischalten

Anlage spannungsfrei schalten

2
-

🔒 Gegen Wieder­einschalten sichern

+

Gegen Wieder­einschalten sichern

Hauptschalter abschließen

3
-

🔍 Spannungs­freiheit feststellen

+

Spannungs­freiheit feststellen

Mit Messgerät alle Leiter prüfen

4
-

🌍 Erden und kurz­schließen

+

Erden und kurz­schließen

Bei Mittelspannung und höher

5
-

🚧 Benachbarte Teile abdecken

+

Benachbarte Teile abdecken

Schutz vor Nachbarspannungen

- +

Praxisbeispiel: Hebekran

Ein typisches Beispiel für den Einsatz von Schützen in der Industrie.

@@ -581,8 +631,9 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
Industrieller Portalkran mit Schützsteuerung + src="hebekran.jpg" + alt="Industrieller Portalkran mit Schützsteuerung" + onerror="this.style.display='none'">
Portalkran — schwere Lasten werden über Schütz-gesteuerte Motoren bewegt
@@ -591,22 +642,23 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:

Eine Kransteuerung besteht aus mehreren Bedien- und Schaltelementen, die über Schütze auf den Antriebsmotor wirken:

- Die Steuerung des Krans ist ein gutes Beispiel für die Galvanische Trennung: 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. Verbunden sind beide Kreise nur über das Magnetfeld der Schützspulen. + Die Steuerung des Krans ist ein gutes Beispiel für die Galvanische Trennung: 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.
- +

Wissens-Check

Acht allgemeine Fragen rund um Relais, Schütz und Steuerungstechnik — sofortiges Feedback nach jeder Antwort.

+
@@ -616,12 +668,13 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size: