f3e63fec86
- 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
1012 lines
51 KiB
HTML
1012 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Baustein 2: Elektromagnetische Schalter | Steuerungstechnik</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--bg:#f9fafb;
|
||
--bg2:#f3f4f6;
|
||
--panel:#ffffff;
|
||
--accent:#16a34a;
|
||
--accent-dark:#15803d;
|
||
--accent-soft:#f0fdf4;
|
||
--amber:#ca8a04;
|
||
--amber-soft:#fef9c3;
|
||
--text:#111827;
|
||
--muted:#6b7280;
|
||
--danger:#dc2626;
|
||
--danger-soft:#fef2f2;
|
||
--border:#d1fae5;
|
||
--border-soft:#e5e7eb;
|
||
--glow:0 2px 16px rgba(22,163,74,.15);
|
||
}
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{margin:0;font-family:'Exo 2',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
|
||
h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-.01em}
|
||
.mono{font-family:'Share Tech Mono',monospace}
|
||
|
||
/* ─── 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: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){
|
||
#menu-btn{display:block}
|
||
.nav-links{display:none;width:100%;flex-direction:column;gap:0;padding:.5rem 0;align-items:stretch}
|
||
.nav-links.open{display:flex}
|
||
.nav-inner{align-items:flex-start;flex-direction:column}
|
||
}
|
||
|
||
/* ─── REVEAL ANIMATION ────────────────────────── */
|
||
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
|
||
.reveal.visible{opacity:1;transform:none}
|
||
|
||
/* ─── 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}
|
||
.alt-bg{background:linear-gradient(180deg,var(--accent-soft) 0%,transparent 100%)}
|
||
|
||
/* ─── 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 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 ──────────────────────────── */
|
||
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}
|
||
.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)}
|
||
.card-red{border-left:4px solid var(--danger)}
|
||
.card-amber{border-left:4px solid var(--amber)}
|
||
.card-green{border-left:4px solid var(--accent)}
|
||
|
||
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
|
||
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
|
||
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
|
||
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
|
||
@media(max-width:1000px){.grid-5{grid-template-columns:repeat(2,1fr)}}
|
||
@media(max-width:520px){.grid-5{grid-template-columns:1fr}}
|
||
|
||
/* ─── 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;
|
||
}
|
||
.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-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{
|
||
width:56px;height:56px;border-radius:50%;
|
||
background:linear-gradient(135deg,#16a34a,#ca8a04);
|
||
color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;
|
||
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.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: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}
|
||
|
||
/* ─── 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-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}
|
||
.parts-list li{
|
||
counter-increment:part;
|
||
position:relative;
|
||
padding:.8rem 1rem .8rem 3rem;
|
||
margin-bottom:.6rem;
|
||
background:#fff;
|
||
border:1px solid var(--border);
|
||
border-radius:10px;
|
||
transition:.2s;
|
||
font-size:.92rem;
|
||
cursor:default;
|
||
}
|
||
.parts-list li::before{
|
||
content:counter(part);
|
||
position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
|
||
width:28px;height:28px;border-radius:50%;
|
||
background:var(--accent);color:#fff;
|
||
font-family:'Outfit',sans-serif;font-weight:700;font-size:.85rem;
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.parts-list li:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateX(4px)}
|
||
.parts-list strong{color:var(--accent-dark)}
|
||
|
||
/* ─── TIMELINE (AB6) ──────────────────────────── */
|
||
.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::before{
|
||
content:attr(data-n);
|
||
position:absolute;left:-2.1rem;top:1rem;
|
||
width:26px;height:26px;border-radius:50%;
|
||
background:var(--accent);color:#fff;
|
||
font-family:'Outfit',sans-serif;font-weight:700;font-size:.85rem;
|
||
display:flex;align-items:center;justify-content:center;
|
||
box-shadow:0 0 0 4px #fff;
|
||
}
|
||
.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 ───────────────────────────────────── */
|
||
.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) ────────────────────────── */
|
||
.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}
|
||
.galv-box.left{border:1px solid var(--border);border-left:4px solid var(--amber)}
|
||
.galv-box.right{border:1px solid var(--border);border-left:4px solid var(--accent)}
|
||
.galv-box h4{margin:0;font-size:1rem}
|
||
.galv-box .big-val{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.5rem;color:var(--text);margin:.25rem 0}
|
||
.galv-box .sub{font-size:.85rem;color:var(--muted)}
|
||
.galv-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .5rem}
|
||
.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 ─────────────────────────── */
|
||
.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)}
|
||
.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 ───────────────────────────────── */
|
||
.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}
|
||
.acc-b{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 1rem}
|
||
.acc-b.open{max-height:400px;padding:.9rem 1rem 1.1rem}
|
||
.acc-b p{font-size:.92rem;color:#374151;margin:.25rem 0}
|
||
|
||
/* ─── QUIZ ────────────────────────────────────── */
|
||
.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}
|
||
.qbtn{text-align:left;padding:.7rem .95rem;border-radius:10px;border:1px solid var(--border);background:#fafafa;color:var(--text);cursor:pointer;font-family:'Exo 2',sans-serif;font-size:.92rem;transition:.2s}
|
||
.qbtn:hover{border-color:var(--accent);background:var(--accent-soft)}
|
||
.qbtn.ok{border-color:var(--accent);background:rgba(22,163,74,.12);color:var(--accent-dark);font-weight:600}
|
||
.qbtn.bad{border-color:var(--danger);background:rgba(220,38,38,.1);color:#7f1d1d}
|
||
.qbtn:disabled{cursor:default}
|
||
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:999px;font-weight:600;font-family:'Outfit',sans-serif;font-size:.9rem;text-decoration:none;color:#fff;background:var(--accent);border:none;cursor:pointer;transition:transform .2s,background .2s}
|
||
.btn:hover{transform:translateY(-2px);background:var(--accent-dark)}
|
||
.btn.ghost{background:#9ca3af}
|
||
.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{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{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border);margin-top:2rem}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<div class="logo">⚡ Elektromagnetische Schalter</div>
|
||
<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="#quiz">Quiz</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- ═══════════════════════════════════ HERO ═══════════════════════════════════ -->
|
||
<section id="hero" class="hero reveal">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-inner">
|
||
<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 & Schütz</b><span>Schalttypen</span></div>
|
||
<div class="stat"><b>Schütz</b><span>8 Bauteile</span></div>
|
||
</div>
|
||
<div class="hero-scroll" aria-hidden="true">↓</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ AB 1 ════════════════════════════════════ -->
|
||
<section id="ab1" class="section reveal alt-bg">
|
||
<h2 class="section-head">AB 1: Einführung / Kundenauftrag</h2>
|
||
<p class="intro-text">Das Laufband in der Produktionshalle funktioniert nicht mehr.</p>
|
||
|
||
<figure class="figure">
|
||
<img loading="lazy"
|
||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Conveyor_belt%2C_Dhanbad.jpg/640px-Conveyor_belt%2C_Dhanbad.jpg"
|
||
alt="Industrielles Förderband – Kundenauftrag Laufband">
|
||
<figcaption class="figcap">Abb. 1 — Das defekte Förderband (Kundenauftrag)</figcaption>
|
||
</figure>
|
||
|
||
<div class="grid-3" style="margin-top:1.5rem">
|
||
<div class="card card-red">
|
||
<h3 class="card-title">Defekter Anschluss</h3>
|
||
<p class="card-body">Lose oder korrodierte Schraubverbindung am Schütz.</p>
|
||
</div>
|
||
<div class="card card-amber">
|
||
<h3 class="card-title">Defekte Zuleitung</h3>
|
||
<p class="card-body">Beschädigte Leitung bis zum Motor — Kurzschluss oder Phasenausfall.</p>
|
||
</div>
|
||
<div class="card card-green">
|
||
<h3 class="card-title">Defektes Schütz</h3>
|
||
<p class="card-body">Schütz durch Überlastung oder Kurzschluss beschädigt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="table-title">Aufgabe 1.3 — Schützarten</h3>
|
||
<table>
|
||
<thead><tr><th>Schützart</th><th>Anwendungsgebiet</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Leistungsschütz</td><td>Schalten eines Motors</td></tr>
|
||
<tr><td>Hilfsschütz</td><td>Schalten einer Meldeleuchte</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 class="table-title">Aufgabe 1.4 — Einsatzbereiche</h3>
|
||
<table>
|
||
<thead><tr><th>Gerät</th><th>Typischer Einsatz</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Relais</td><td>Schalten von kleineren Strömen (Melde- oder Regeltätigkeiten)</td></tr>
|
||
<tr><td>Schütz</td><td>Schalten von großen Lasten, z.B. Motoren bei Förderbändern</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ 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>
|
||
<p class="section-sub">Zwei elektromagnetische Schalter im direkten Vergleich — unterschiedliche Schaltleistungen, Ankertypen und Bezeichnungen.</p>
|
||
|
||
<div class="vs-wrap">
|
||
<!-- RELAIS -->
|
||
<div class="vs-card left">
|
||
<div class="img-placeholder" style="margin-bottom:1rem">
|
||
<span class="ph-icon">📷</span>
|
||
<p class="ph-title">Foto: Relais (z.B. Omron MY2)</p>
|
||
<p class="ph-hint">Quelle: commons.wikimedia.org → Suche: „relay opened up"</p>
|
||
</div>
|
||
<h3>Relais <span class="mono" style="color:var(--amber);font-size:.9rem">(K)</span></h3>
|
||
<ul class="vs-list amber">
|
||
<li>Für geringere Schaltleistungen ausgelegt</li>
|
||
<li>Meist für Gleichspannung</li>
|
||
<li>Schaltglieder sind einfach unterbrechend</li>
|
||
<li>Besitzen Klappanker</li>
|
||
<li>Bezeichnung: <strong>K</strong></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- VS BADGE -->
|
||
<div class="vs-badge">VS</div>
|
||
|
||
<!-- SCHÜTZ -->
|
||
<div class="vs-card right">
|
||
<figure class="figure" style="margin-bottom:1rem">
|
||
<img loading="lazy"
|
||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Siemens_contactor.jpg/640px-Siemens_contactor.jpg"
|
||
alt="Siemens SIRIUS Leistungsschütz">
|
||
<figcaption class="figcap">Abb. 2 — Siemens SIRIUS 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">
|
||
<li>Für höhere Schaltleistungen ausgelegt</li>
|
||
<li>Schnelle / sichere Schaltvorgänge</li>
|
||
<li>Schaltglieder sind doppelt unterbrechend</li>
|
||
<li>Besitzen Zuganker</li>
|
||
<li>Bezeichnung: <strong>Q</strong></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="table-title">Vergleichstabelle</h3>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Merkmal</th><th>Relais (K)</th><th>Schütz (Q)</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Schaltleistung</td><td>Gering</td><td>Hoch (Motoren)</td></tr>
|
||
<tr><td>Ankertyp</td><td>Klappanker</td><td>Zuganker</td></tr>
|
||
<tr><td>Kontaktunterbrechung</td><td>Einfach</td><td>Doppelt</td></tr>
|
||
<tr><td>Einsatz</td><td>Steuern, Melden, Regeln</td><td>Hauptstrom, Motoren</td></tr>
|
||
<tr><td>Bezeichnung</td><td class="mono">K</td><td class="mono">Q</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 class="table-title">Kontaktarten im Vergleich</h3>
|
||
<div class="grid-2">
|
||
<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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ AB 3 ════════════════════════════════════ -->
|
||
<section id="ab3" class="section reveal alt-bg">
|
||
<h2 class="section-head">AB 3: Aufschriften und Kennzeichnung</h2>
|
||
<p class="section-sub">Das Leistungsschütz trägt zahlreiche Aufschriften — Ordnungsziffern, Funktionsziffern, Klemmenbezeichnungen und Symbole.</p>
|
||
|
||
<div class="ab3-grid">
|
||
<div>
|
||
<img loading="lazy"
|
||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Siemens_contactor.jpg/640px-Siemens_contactor.jpg"
|
||
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.
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<table>
|
||
<thead>
|
||
<tr><th>Nr.</th><th>Fachbegriff</th><th>Erklärung</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="mono">1</td><td>Ordnungsziffer</td><td>Nummer des Betriebsmittels</td></tr>
|
||
<tr><td class="mono">2</td><td>Funktionsziffer</td><td>Art der Kontaktfunktion</td></tr>
|
||
<tr><td class="mono">3</td><td>NO (Normally Open)</td><td>Schließer — im Ruhezustand offen</td></tr>
|
||
<tr><td class="mono">4</td><td>NC (Normally Closed)</td><td>Öffner — im Ruhezustand geschlossen</td></tr>
|
||
<tr><td class="mono">5</td><td>Spulenanschluss</td><td>Klemmen A1 und A2</td></tr>
|
||
<tr><td class="mono">6</td><td>Anzahl der Schließer</td><td>z.B. 3 NO-Kontakte</td></tr>
|
||
<tr><td class="mono">7</td><td>Anzahl der Öffner</td><td>z.B. 1 NC-Kontakt</td></tr>
|
||
<tr><td class="mono">8</td><td>Ausgangsseite Hauptkontakte</td><td>2/T1, 4/T2, 6/T3</td></tr>
|
||
<tr><td class="mono">9</td><td>Benötigte Steuerspannung</td><td>z.B. DC 24V</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>3.2 Schützkontakte des Leistungsschützes</h3>
|
||
<p class="lead">Die Hauptkontakte des Leistungsschützes Q1 werden wie folgt bezeichnet:</p>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr><th>Eingangsseite</th><th>Ausgangsseite</th><th>Funktion</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="mono">1/L1</td><td class="mono">2/T1</td><td>Phase L1 → Motor T1</td></tr>
|
||
<tr><td class="mono">3/L2</td><td class="mono">4/T2</td><td>Phase L2 → Motor T2</td></tr>
|
||
<tr><td class="mono">5/L3</td><td class="mono">6/T3</td><td>Phase L3 → Motor T3</td></tr>
|
||
<tr><td class="mono">13</td><td class="mono">14</td><td>Hilfskontakt (Schließer NO)</td></tr>
|
||
<tr><td class="mono">21</td><td class="mono">22</td><td>Hilfskontakt (Öffner NC)</td></tr>
|
||
<tr><td class="mono">31</td><td class="mono">32</td><td>Hilfskontakt (Schließer NO)</td></tr>
|
||
<tr><td class="mono">43</td><td class="mono">44</td><td>Hilfskontakt (Schließer NO)</td></tr>
|
||
<tr><td class="mono">A1</td><td class="mono">A2</td><td>Spulenanschlüsse</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="subtask">
|
||
<h3>Gebrauchskategorien nach IEC</h3>
|
||
</div>
|
||
<div class="acc-item"><button type="button" class="acc-h" onclick="toggleAcc(this)">AC-3 <span>+</span></button><div class="acc-b"><p>Käfigläufermotor anlassen / ausschalten.</p></div></div>
|
||
<div class="acc-item"><button type="button" class="acc-h" onclick="toggleAcc(this)">AC-4 <span>+</span></button><div class="acc-b"><p>Käfigläufer — Anlassen, Gegenstrombremsung, Tippbetrieb.</p></div></div>
|
||
<div class="acc-item"><button type="button" class="acc-h" onclick="toggleAcc(this)">AC-15 <span>+</span></button><div class="acc-b"><p>Steuerstromkreise mit elektromagnetischen Lasten.</p></div></div>
|
||
<div class="acc-item"><button type="button" class="acc-h" onclick="toggleAcc(this)">DC-5 <span>+</span></button><div class="acc-b"><p>Gleichstrom-Reihenschlussmotoren.</p></div></div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ 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>
|
||
<p class="section-sub">Schaltzeichen nach DIN EN 60617 — normgerechte Darstellung für Haupt- und Hilfskontakte.</p>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 4.1 — Schaltzeichen Leistungsschütz Q1</h3>
|
||
</div>
|
||
<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>
|
||
<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>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 4.2 — Korrigiertes Schaltbild K1</h3>
|
||
</div>
|
||
<div class="info-box">
|
||
<strong>4.2:</strong> In deinem Unterrichtsbaustein hast du ein fehlerhaftes Schaltbild eines K1-Schützes erhalten und korrigiert. Deine Korrekturen:
|
||
<ul style="margin:.5rem 0 0;padding-left:1.25rem">
|
||
<li>Ordnungsziffer korrigiert</li>
|
||
<li>Funktionsziffer korrigiert</li>
|
||
<li>Kontaktnummern (13, 14, 21, 22, 31, 32, 43, 44) korrekt eingetragen</li>
|
||
</ul>
|
||
</div>
|
||
<div class="img-placeholder" style="margin-top:1rem">
|
||
<span class="ph-icon">📷</span>
|
||
<p class="ph-title">Korrigiertes Schaltbild K1 (Aufgabe 4.2)</p>
|
||
<p class="ph-hint">Foto deiner korrigierten Lösung aus dem Unterrichtsbaustein</p>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 4.3 — Symbolübersicht</h3>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr><th style="width:38%">Symbol</th><th>Bezeichnung</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div class="img-placeholder small">
|
||
<span class="ph-icon">📷</span>
|
||
<p class="ph-title">Symbol: Hauptschütz Q1 (3 Kontakte)</p>
|
||
<p class="ph-hint">Aus Fachkundebuch abfotografieren oder mit KI erstellen</p>
|
||
</div>
|
||
</td>
|
||
<td>Hauptschütz mit drei Kontakten</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="img-placeholder small">
|
||
<span class="ph-icon">📷</span>
|
||
<p class="ph-title">Symbol: Hauptschütz Q2 (3 HK + 4 Hilfskontakte)</p>
|
||
<p class="ph-hint">Aus Fachkundebuch abfotografieren oder mit KI erstellen</p>
|
||
</div>
|
||
</td>
|
||
<td>Hauptschütz mit drei Hauptkontakten und 4 Hilfskontakten</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div class="img-placeholder small">
|
||
<span class="ph-icon">📷</span>
|
||
<p class="ph-title">Symbol: Hilfsschütz K1 (4 Schließer + 2 Öffner)</p>
|
||
<p class="ph-hint">Aus Fachkundebuch abfotografieren oder mit KI erstellen</p>
|
||
</div>
|
||
</td>
|
||
<td>Hilfsschütz mit 4 Schließern und 2 Öffnern</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ 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>
|
||
<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">
|
||
<h3>Aufgabe 5.1 — Die 8 Bestandteile</h3>
|
||
</div>
|
||
|
||
<div class="ab5-grid">
|
||
<div>
|
||
<figure class="figure">
|
||
<img loading="lazy"
|
||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Contacteur_tripolaire.jpg/640px-Contacteur_tripolaire.jpg"
|
||
alt="Bestandteile eines Schützes – Querschnitt"
|
||
style="width:100%;border-radius:12px;border:2px solid #86efac">
|
||
<figcaption class="figcap">Abb. 5 — Motorschütz geöffnet (Quelle: Wikimedia Commons)</figcaption>
|
||
</figure>
|
||
|
||
<div class="img-placeholder" style="margin-top:1rem">
|
||
<span class="ph-icon">📷</span>
|
||
<p class="ph-title">Beschriftetes Bild: Alle 8 Bauteile nummeriert</p>
|
||
<p class="ph-hint">Erstelle mit Canva (canva.com): Lade das Foto oben hoch, füge 8 nummerierte Pfeile/Kreise ein und beschrifte:<br>
|
||
1=Öffner, 2=Schaltstücke, 3=Schließer, 4=Spulenanschluss, 5=Anker, 6=Kurzschlussring, 7=Spule, 8=Eisenkern</p>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="parts-list">
|
||
<li><strong>Öffner</strong> — Ruhekontakt (NC), öffnet bei Anzug der Spule</li>
|
||
<li><strong>Schaltstücke</strong> — Kontaktflächen aus Silberlegierung</li>
|
||
<li><strong>Schließer</strong> — Arbeitskontakt (NO), schließt bei Anzug</li>
|
||
<li><strong>Spulenanschluss</strong> — Klemmen A1 und A2</li>
|
||
<li><strong>Anker</strong> — bewegliches Eisenteil, wird angezogen</li>
|
||
<li><strong>Kurzschlussring</strong> — verhindert Brummen bei AC-Spulen</li>
|
||
<li><strong>Spule</strong> — Erregerspule, erzeugt das Magnetfeld</li>
|
||
<li><strong>Eisenkern</strong> — verstärkt und leitet den magnetischen Fluss</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 5.2 — Hauptstrom- und Steuerkontakte</h3>
|
||
</div>
|
||
<div class="grid-2">
|
||
<div class="card card-green">
|
||
<h3 class="card-title">Hauptstromkontakte</h3>
|
||
<ul class="vs-list green" style="margin-top:.5rem">
|
||
<li>Schalten die Außenleiter an den Verbraucher</li>
|
||
<li>Sind in getrennten Schaltkammern angeordnet</li>
|
||
<li>Bei größeren Leistungen mit Lichtbogenlöscheinrichtungen ausgestattet</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card card-amber">
|
||
<h3 class="card-title">Steuerkontakte</h3>
|
||
<ul class="vs-list amber" style="margin-top:.5rem">
|
||
<li>Schalten Kontakte für Steuer- und Meldeaufgaben</li>
|
||
<li>Führen wesentlich weniger Leistung als Hauptstromkontakte</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ 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>
|
||
<p class="section-sub">Vom Anlegen der Spulenspannung bis zum Abfall — in fünf Schritten erklärt.</p>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 6.1 — Fünf-Schritt-Ablauf</h3>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<div class="tl-step" data-n="1">
|
||
<h4>Spannung anlegen</h4>
|
||
<p>Spannung wird an die beiden Spulenanschlüsse A1 und A2 angelegt.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="2">
|
||
<h4>Magnetfeld entsteht</h4>
|
||
<p>Strom fließt durch die Schützspule — ein Magnetfeld entsteht.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="3">
|
||
<h4>Anker wird angezogen</h4>
|
||
<p>Das Magnetfeld zieht den Anker an und betätigt die Schaltkontakte.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="4">
|
||
<h4>Kontakte schalten</h4>
|
||
<p>Schließer schließen, Öffner öffnen — der Verbraucher wird eingeschaltet.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="5">
|
||
<h4>Schütz fällt ab</h4>
|
||
<p>Nach Abschalten der Spannungsversorgung drückt die Rückstellfeder den Anker zurück. Das Schütz fällt ab.</p>
|
||
</div>
|
||
</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!
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>6.2 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">
|
||
<div class="galv-box left">
|
||
<h4 style="color:var(--amber)">Steuerstromkreis</h4>
|
||
<div class="big-val">DC 24V</div>
|
||
<div class="sub">kleiner Steuerstrom, Taster / SPS</div>
|
||
<img loading="lazy"
|
||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Push_button_assembly.jpg/640px-Push_button_assembly.jpg"
|
||
alt="Taster Steuerstromkreis"
|
||
style="width:100%;border-radius:8px;margin-top:.5rem;border:1px solid var(--border)">
|
||
</div>
|
||
|
||
<div class="galv-mid">
|
||
<span class="sym">⏚</span>
|
||
<span class="lbl">Q1 Schütz</span>
|
||
</div>
|
||
|
||
<div class="galv-box right">
|
||
<h4 style="color:var(--accent)">Hauptstromkreis</h4>
|
||
<div class="big-val">AC 230V</div>
|
||
<div class="sub">großer Laststrom, Motor / Last</div>
|
||
<svg viewBox="0 0 120 100" width="120" height="100" style="margin:.5rem auto;display:block" aria-label="Motor-Symbol">
|
||
<circle cx="60" cy="50" r="35" fill="none" stroke="#16a34a" stroke-width="3"/>
|
||
<text x="60" y="57" text-anchor="middle" fill="#15803d" font-family="Outfit,sans-serif" font-weight="700" font-size="22">M</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
Die <strong>Galvanische Trennung</strong> bedeutet, dass zwei Stromkreise zwar verbunden sind, aber nicht elektrisch. Das Übertragungsmedium ist der Elektromagnetismus.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ AB 7 ════════════════════════════════════ -->
|
||
<section id="ab7" class="section reveal alt-bg">
|
||
<h2 class="section-head">AB 7: Auftragsabschluss</h2>
|
||
<p class="section-sub">Zusammenfassung der Fehlerquellen, Behebung und die fünf Sicherheitsregeln beim Schützaustausch.</p>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 7.1 — Mögliche Fehlerquellen und Behebung</h3>
|
||
<p class="lead">Antwort an Herrn Rohweider:</p>
|
||
</div>
|
||
|
||
<div class="grid-3">
|
||
<div class="card card-red">
|
||
<h3 class="card-title">Defekter Anschluss</h3>
|
||
<p class="card-body"><strong>Behebung:</strong> Alle Schraubverbindungen prüfen und ggf. nachziehen.</p>
|
||
</div>
|
||
<div class="card card-amber">
|
||
<h3 class="card-title">Defekte Zuleitung</h3>
|
||
<p class="card-body"><strong>Behebung:</strong> Leitungen mit Messgerät prüfen, beschädigte Leitung ersetzen.</p>
|
||
</div>
|
||
<div class="card card-green">
|
||
<h3 class="card-title">Defektes Schütz</h3>
|
||
<p class="card-body"><strong>Behebung:</strong> Schütz austauschen — dabei Fünf Sicherheitsregeln beachten.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>7.2 Fünf Sicherheitsregeln beim Schützaustausch</h3>
|
||
</div>
|
||
|
||
<div class="warn-box">
|
||
Vor dem Austausch müssen (je nach Spannungshöhe) die <strong>Fünf Sicherheitsregeln der Elektrotechnik</strong> beachtet werden!
|
||
</div>
|
||
|
||
<div class="grid-5">
|
||
<div class="safe-card">
|
||
<div class="num">1</div>
|
||
<h4>⛔ Freischalten</h4>
|
||
<p>Anlage spannungsfrei schalten</p>
|
||
</div>
|
||
<div class="safe-card">
|
||
<div class="num">2</div>
|
||
<h4>🔒 Gegen Wieder­einschalten sichern</h4>
|
||
<p>Hauptschalter abschließen</p>
|
||
</div>
|
||
<div class="safe-card">
|
||
<div class="num">3</div>
|
||
<h4>🔍 Spannungs­freiheit feststellen</h4>
|
||
<p>Mit Messgerät alle Leiter prüfen</p>
|
||
</div>
|
||
<div class="safe-card">
|
||
<div class="num">4</div>
|
||
<h4>🌍 Erden und kurz­schließen</h4>
|
||
<p>Bei Mittelspannung und höher</p>
|
||
</div>
|
||
<div class="safe-card">
|
||
<div class="num">5</div>
|
||
<h4>🚧 Benachbarte Teile abdecken</h4>
|
||
<p>Schutz vor Nachbarspannungen</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ AB 8 ════════════════════════════════════ -->
|
||
<section id="ab8" class="section reveal">
|
||
<h2 class="section-head">AB 8: Übungs- und Zusatzaufgaben — 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">
|
||
<strong>Ausgangssituation:</strong> Die Steuerung eines Hebekrans (5t, Abb. 1) wird erneuert.
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Funktionsbeschreibung</h3>
|
||
</div>
|
||
<ul class="signal-list">
|
||
<li><span class="icon">🔑</span><div><span class="sig-name">-S1 Schlüsselschalter</span> → Inbetriebnahme der Steuerung</div></li>
|
||
<li><span class="icon">⬆️</span><div><span class="sig-name">-S2 Taster AUF</span> → Motor M1 Seilwinde aufwärts (Tippbetrieb)</div></li>
|
||
<li><span class="icon">⬇️</span><div><span class="sig-name">-S3 Taster AB</span> → Motor M1 Seilwinde abwärts (Tippbetrieb)</div></li>
|
||
<li><span class="icon">🔴</span><div><span class="sig-name">-S0 NOT-HALT</span> → Sofortstillstand bei Gefahr</div></li>
|
||
<li><span class="icon">⚡</span><div><span class="sig-name">-Q1 Hauptschalter</span> → Energieversorgung des gesamten Krans</div></li>
|
||
</ul>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 8.1 — Austausch von -K1</h3>
|
||
</div>
|
||
<div class="card card-green">
|
||
<h3 class="card-title">Beim Austausch von -K1 beachten:</h3>
|
||
<ul class="vs-list green">
|
||
<li>Passendes Ersatzschütz verwenden (gleiche Spulenspannung, gleiche Gebrauchskategorie, gleiche Kontaktzahl)</li>
|
||
<li>Spannungsversorgung vorher abschalten (Fünf Sicherheitsregeln!)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 8.2 — Schützauswahl A, B oder C</h3>
|
||
<p class="lead">Welches Schütz (A, B oder C) ist geeignet?</p>
|
||
</div>
|
||
|
||
<div class="grid-3">
|
||
<div class="card card-red">
|
||
<h3 class="card-title">❌ Schütz A — Nicht geeignet</h3>
|
||
<p class="card-body">Spulenspannung 230V AC — passt nicht zur 24V DC Steuerung</p>
|
||
</div>
|
||
<div class="card card-green">
|
||
<h3 class="card-title">✅ Schütz B — Geeignet</h3>
|
||
<p class="card-body">Spulenspannung DC 24V ✓, besitzt Schließerkontakt (NO) ✓</p>
|
||
</div>
|
||
<div class="card card-green">
|
||
<h3 class="card-title">✅ Schütz C — Geeignet</h3>
|
||
<p class="card-body">Spulenspannung DC 24V ✓, besitzt Schließerkontakt (NO) ✓</p>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 8.3 — NC und NO</h3>
|
||
</div>
|
||
<div class="grid-2">
|
||
<div class="card card-amber">
|
||
<h3 class="card-title">NC — Normally Closed</h3>
|
||
<p class="card-body">NC steht für <em>Normally Closed</em> — im Ruhezustand geschlossen. Das entspricht einem <strong>Öffner-Kontakt</strong>.</p>
|
||
</div>
|
||
<div class="card card-green">
|
||
<h3 class="card-title">NO — Normally Open</h3>
|
||
<p class="card-body">NO steht für <em>Normally Open</em> — im Ruhezustand offen. Das entspricht einem <strong>Schließer-Kontakt</strong>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 8.4 — Galvanische Trennung am Hebekran</h3>
|
||
</div>
|
||
<div class="info-box">
|
||
Die beiden Stromkreise sind elektrisch voneinander getrennt, aber durch die elektromagnetischen Schalter besteht eine Verbindung zwischen den Stromkreisen.
|
||
</div>
|
||
|
||
<div class="subtask">
|
||
<h3>Aufgabe 8.5 — Gebrauchskategorie</h3>
|
||
</div>
|
||
<div class="warn-box">
|
||
Das Ersatz-Schütz mit Gebrauchskategorie <strong>AC-3</strong> kann NICHT verwendet werden — AC-3 ist nicht für dauernden Tippbetrieb geeignet. Für Tippbetrieb wird <strong>AC-4</strong> benötigt.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════ QUIZ ═══════════════════════════════════ -->
|
||
<section id="quiz" class="section reveal alt-bg">
|
||
<h2 class="section-head">Wissens-Check</h2>
|
||
<p class="section-sub">Acht Fragen aus dem Unterrichtsbaustein — sofortiges Feedback nach jeder Antwort.</p>
|
||
<div id="quiz-box"></div>
|
||
<div style="text-align:center;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center">
|
||
<button type="button" class="btn" onclick="auswerten()">Auswerten</button>
|
||
<button type="button" class="btn ghost" onclick="resetQuiz()">Quiz zurücksetzen</button>
|
||
</div>
|
||
<div id="score-panel" class="score-panel" style="display:none"></div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Baustein 2 · Elektromagnetische Schalter · Steuerungstechnik · BS1 BFI · Bilder: Wikimedia Commons (CC)</p>
|
||
</footer>
|
||
|
||
<script>
|
||
'use strict';
|
||
|
||
const quizData = [
|
||
{q:'Was bedeutet NO bei einem Schützkontakt?',
|
||
o:['Normally Open — Schließer, im Ruhezustand offen','Normally Obstructed','New Output','Normally On'], c:0},
|
||
{q:'Was ist der Hauptunterschied zwischen Relais und Schütz?',
|
||
o:['Relais nur für AC','Schütz hat Klappanker','Schütz doppelt unterbrechend, Relais einfach unterbrechend','Relais für höhere Leistungen'], c:2},
|
||
{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},
|
||
{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?',
|
||
o:['Direkte elektrische Verbindung zweier Kreise','Zwei Kreise sind über Elektromagnetismus verbunden, aber nicht elektrisch','Spannungsfreiheit','Kurzschlussschutz'], c:1},
|
||
{q:'Welche Bezeichnung hat ein Hilfsschütz?',
|
||
o:['K (z.B. K1)','Q','M','S'], c:0},
|
||
{q:'Warum kann ein Schütz mit AC-3 nicht für Tippbetrieb verwendet werden?',
|
||
o:['Falsche Spulenspannung','Zu wenig Kontakte','AC-3 ist nur für normales An/Aus schalten, nicht für dauernden Tippbetrieb','Falscher Ankertyp'], c:2}
|
||
];
|
||
|
||
let quizState = [];
|
||
|
||
function buildQuiz() {
|
||
const box = document.getElementById('quiz-box');
|
||
box.innerHTML = '';
|
||
quizState = quizData.map(() => ({ answered:false, correct:null }));
|
||
quizData.forEach((d, i) => {
|
||
const wrap = document.createElement('div');
|
||
wrap.className = 'quiz-q reveal';
|
||
wrap.innerHTML = '<h4>Frage ' + (i+1) + ': ' + d.q + '</h4><div class="qopts" id="opts-' + i + '"></div>';
|
||
box.appendChild(wrap);
|
||
const opts = wrap.querySelector('#opts-' + i);
|
||
d.o.forEach((text, oi) => {
|
||
const b = document.createElement('button');
|
||
b.type = 'button';
|
||
b.className = 'qbtn';
|
||
b.textContent = text;
|
||
b.onclick = () => answer(i, oi, d.c);
|
||
opts.appendChild(b);
|
||
});
|
||
});
|
||
observeReveal();
|
||
}
|
||
|
||
function answer(qIdx, choice, correctIdx) {
|
||
if (quizState[qIdx].answered) return;
|
||
quizState[qIdx].answered = true;
|
||
quizState[qIdx].correct = choice === correctIdx;
|
||
const wrap = document.getElementById('opts-' + qIdx);
|
||
wrap.querySelectorAll('.qbtn').forEach((btn, idx) => {
|
||
btn.disabled = true;
|
||
if (idx === correctIdx) btn.classList.add('ok');
|
||
else if (idx === choice) btn.classList.add('bad');
|
||
});
|
||
}
|
||
|
||
function auswerten() {
|
||
let n = 0;
|
||
quizState.forEach(s => { if (s.correct) n++; });
|
||
const pct = Math.round(n / quizData.length * 100);
|
||
let note = 'ungenügend', emoji = '📕';
|
||
if (pct >= 88) { note = 'sehr gut'; emoji = '🏆'; }
|
||
else if (pct >= 75) { note = 'gut'; emoji = '🌟'; }
|
||
else if (pct >= 63) { note = 'befriedigend'; emoji = '👍'; }
|
||
else if (pct >= 50) { note = 'ausreichend'; emoji = '📗'; }
|
||
const p = document.getElementById('score-panel');
|
||
p.style.display = 'block';
|
||
p.innerHTML = '<div style="font-size:3rem">' + emoji + '</div>' +
|
||
'<h3 style="margin:.5rem 0;color:var(--accent)">' + n + ' / ' + quizData.length + ' richtig</h3>' +
|
||
'<p style="color:var(--muted)">Note: <strong style="color:var(--amber)">' + note + '</strong> (' + pct + '%)</p>';
|
||
p.scrollIntoView({ behavior:'smooth', block:'nearest' });
|
||
}
|
||
|
||
function resetQuiz() {
|
||
document.getElementById('score-panel').style.display = 'none';
|
||
document.getElementById('score-panel').innerHTML = '';
|
||
buildQuiz();
|
||
}
|
||
|
||
function toggleAcc(btn) {
|
||
const it = btn.parentElement;
|
||
const body = it.querySelector('.acc-b');
|
||
const wasOpen = body.classList.contains('open');
|
||
document.querySelectorAll('.acc-b').forEach(b => { b.classList.remove('open'); b.style.maxHeight = ''; });
|
||
document.querySelectorAll('.acc-h span').forEach(s => { s.textContent = '+'; });
|
||
if (!wasOpen) {
|
||
body.classList.add('open');
|
||
body.style.maxHeight = '400px';
|
||
btn.querySelector('span').textContent = '−';
|
||
}
|
||
}
|
||
|
||
let revealObs = null;
|
||
function observeReveal() {
|
||
if (!revealObs) {
|
||
revealObs = new IntersectionObserver(ents => {
|
||
ents.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
||
}, { threshold:0.08 });
|
||
}
|
||
document.querySelectorAll('.reveal').forEach(el => {
|
||
if (el.dataset.obs) return;
|
||
el.dataset.obs = '1';
|
||
revealObs.observe(el);
|
||
});
|
||
}
|
||
|
||
document.getElementById('menu-btn').addEventListener('click', function() {
|
||
document.getElementById('navm').classList.toggle('open');
|
||
});
|
||
|
||
buildQuiz();
|
||
observeReveal();
|
||
|
||
// ─── Bild-Fehler-Handler: ersetzt fehlgeschlagene Bilder durch Placeholder ────
|
||
document.querySelectorAll('img').forEach(img => {
|
||
img.addEventListener('error', function() {
|
||
if (this.dataset.err) return;
|
||
this.dataset.err = '1';
|
||
const ph = document.createElement('div');
|
||
ph.className = 'img-placeholder';
|
||
ph.innerHTML = '<span class="ph-icon">📷</span>' +
|
||
'<p class="ph-title">' + (this.alt || 'Foto') + '</p>' +
|
||
'<p class="ph-hint">Bild konnte nicht geladen werden</p>';
|
||
this.parentNode.insertBefore(ph, this);
|
||
this.style.display = 'none';
|
||
});
|
||
});
|
||
|
||
// ─── Fortschrittsbalken unten an der Nav ──────────────────────────────────────
|
||
(function() {
|
||
const nav = document.querySelector('nav');
|
||
const bar = document.createElement('div');
|
||
bar.style.cssText = 'position:absolute;bottom:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#16a34a,#ca8a04);transition:width .1s ease;z-index:10';
|
||
nav.appendChild(bar);
|
||
window.addEventListener('scroll', () => {
|
||
const h = document.documentElement.scrollHeight - window.innerHeight;
|
||
const pct = h <= 0 ? 0 : (window.scrollY / h) * 100;
|
||
bar.style.width = Math.min(Math.max(pct, 0), 100) + '%';
|
||
}, { passive:true });
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|