1140 lines
57 KiB
HTML
1140 lines
57 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>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:.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){
|
||
#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}
|
||
|
||
/* ─── 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-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{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 .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}
|
||
|
||
/* 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;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)}
|
||
.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;
|
||
}
|
||
.ph-icon{font-size:2.5rem;line-height:1}
|
||
.ph-title{color:var(--accent);font-weight:700;font-size:.9rem;margin:0;font-family:'Outfit',sans-serif}
|
||
.ph-hint{color:var(--muted);font-size:.75rem;margin:0;max-width:540px}
|
||
|
||
/* ─── 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{
|
||
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;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);
|
||
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 ────────────────────────────────── */
|
||
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}
|
||
|
||
/* ─── AB5 parts list ────────────────────────── */
|
||
.ab5-grid{display:grid;grid-template-columns:1fr 1.4fr;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:background .2s,border-color .2s,transform .2s;
|
||
font-size:.92rem;
|
||
cursor:pointer;
|
||
}
|
||
.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)}
|
||
.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 ──────────────────────────────── */
|
||
.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;
|
||
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;
|
||
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}
|
||
|
||
/* ─── 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}
|
||
.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}
|
||
|
||
/* 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 .sig-name{font-family:'Share Tech Mono',monospace;color:var(--accent);font-weight:600}
|
||
|
||
/* ─── 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 ─────────────────────────────── */
|
||
.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-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}
|
||
.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}
|
||
|
||
/* ─── FAULT BUTTON in gi-wrap ───────────────── */
|
||
.gi-fault-btn{background:var(--danger);box-shadow:0 4px 16px rgba(220,38,38,.3)}
|
||
.gi-fault-btn:hover:not(:disabled){background:#b91c1c;box-shadow:0 6px 20px rgba(220,38,38,.45)}
|
||
.gi-fault-btn:disabled{background:#e5e7eb;color:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}
|
||
|
||
/* Fault indicator badge — big & pulsing */
|
||
.gi-fault-ind{
|
||
background:rgba(220,38,38,.12);border:2px solid var(--danger);
|
||
border-radius:10px;padding:.6rem .85rem;
|
||
font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:800;
|
||
color:var(--danger);display:none;text-align:center;
|
||
letter-spacing:.02em;
|
||
}
|
||
.gi-wrap.fault .gi-fault-ind{display:block;animation:faultPulse .65s ease-in-out infinite}
|
||
@keyframes faultPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
|
||
|
||
/* Motor stop text */
|
||
.gi-motor-stop{display:none;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:800;color:#9ca3af;text-align:center;margin-top:.2rem;letter-spacing:.03em}
|
||
.gi-wrap.faulted .gi-motor-stop{display:block}
|
||
|
||
/* Fault: red border + glow on whole wrap */
|
||
.gi-wrap.fault,.gi-wrap.faulted{border-color:rgba(220,38,38,.5);box-shadow:0 0 36px rgba(220,38,38,.25)}
|
||
|
||
/* Fault: main panel gets red tint */
|
||
.gi-panel.main{position:relative;overflow:hidden;transition:background .3s}
|
||
.gi-wrap.fault .gi-panel.main{background:rgba(220,38,38,.12)}
|
||
.gi-wrap.faulted .gi-panel.main{background:rgba(0,0,0,.03)}
|
||
|
||
/* BIG KS FLASH: covers entire right panel */
|
||
.gi-ks-flash{
|
||
position:absolute;inset:0;z-index:20;pointer-events:none;
|
||
background:rgba(220,38,38,.88);border-radius:inherit;
|
||
display:flex;align-items:center;justify-content:center;
|
||
font-size:4rem;opacity:0;
|
||
}
|
||
.gi-ks-flash.go{animation:ksFlash .7s ease-out forwards}
|
||
@keyframes ksFlash{0%{opacity:1;transform:scale(.8)}20%{opacity:1;transform:scale(1.15)}70%{opacity:.6}100%{opacity:0;transform:scale(1.2)}}
|
||
|
||
/* Motor shake on fault */
|
||
.gi-wrap.fault .gi-motor-svg{color:var(--danger);animation:motorShake .08s linear 6}
|
||
@keyframes motorShake{0%,100%{transform:translateX(0)}33%{transform:translateX(-4px)}66%{transform:translateX(4px)}}
|
||
.gi-wrap.fault .spin-mark{animation:none}
|
||
.gi-wrap.faulted .gi-motor-svg{color:#9ca3af;transition:color .4s}
|
||
|
||
/* Fault: main electrons go red and frantic */
|
||
.gi-wrap.fault .gi-flow.mf .gi-el{background:var(--danger);box-shadow:0 0 10px var(--danger);animation-duration:.45s}
|
||
|
||
/* Faulted: coil goes gray */
|
||
.gi-wrap.faulted .gi-coil{border-color:#d1d5db;box-shadow:none}
|
||
.gi-wrap.faulted .gi-wind{border-color:#d1d5db}
|
||
|
||
/* Separation barrier flashes red on fault */
|
||
.gi-wrap.fault .gi-sep-badge{background:rgba(220,38,38,.2);color:var(--danger);animation:sepFault .5s ease-in-out infinite}
|
||
@keyframes sepFault{0%,100%{letter-spacing:.05em}50%{letter-spacing:.1em}}
|
||
|
||
/* ─── BIG CURRENT ARROWS ────────────────────── */
|
||
.gd-arrows{display:flex;gap:.4rem;justify-content:center;align-items:center;min-height:28px}
|
||
.gd-arr{font-size:1.4rem;opacity:.1;transition:opacity .15s;color:var(--accent)}
|
||
.gi-wrap.on .gd-arrows .gd-arr{animation:arrPulse 1.2s ease-in-out infinite}
|
||
.gi-wrap.on .gd-arrows .gd-arr:nth-child(2){animation-delay:.4s}
|
||
.gi-wrap.on .gd-arrows .gd-arr:nth-child(3){animation-delay:.8s}
|
||
.gi-wrap.on .gd-arrows.mf .gd-arr{color:var(--danger)}
|
||
.gi-wrap.fault .gd-arrows.mf .gd-arr{color:var(--danger);animation:arrPulse .4s ease-in-out infinite;opacity:1}
|
||
@keyframes arrPulse{0%,100%{opacity:.15;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}}
|
||
|
||
/* ─── BIG CONTACTS ──────────────────────────── */
|
||
.gd-contacts{display:flex;flex-direction:column;gap:.55rem;width:100%}
|
||
.gd-ct-row{display:flex;align-items:center;justify-content:center;gap:3px;font-family:'Share Tech Mono',monospace;font-size:.9rem;font-weight:700}
|
||
.gd-ct-lbl{color:var(--muted);min-width:24px;text-align:center}
|
||
.gd-ct-left,.gd-ct-right{height:6px;width:20px;background:#d1d5db;border-radius:3px;transition:background .3s,transform .35s}
|
||
.gd-ct-gap{height:6px;width:16px;border-top:3px dashed #d1d5db;transition:width .35s,border-color .3s}
|
||
.gi-wrap.on .gd-ct-left,.gi-wrap.on .gd-ct-right{background:var(--accent)}
|
||
.gi-wrap.on .gd-ct-gap{width:0;border-top-color:var(--accent)}
|
||
.gi-wrap.faulted .gd-ct-left,.gi-wrap.faulted .gd-ct-right{background:var(--danger)}
|
||
.gi-wrap.faulted .gd-ct-gap{width:20px;border-top-color:rgba(220,38,38,.4)}
|
||
|
||
/* ─── STATUS LABELS ─────────────────────────── */
|
||
.gd-ct-status{font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;text-align:center;color:#94a3b8;transition:color .3s;margin-top:.25rem;letter-spacing:.04em}
|
||
.gi-wrap.on .gd-ct-status{color:var(--accent)}
|
||
.gi-wrap.faulted .gd-ct-status{color:var(--danger)}
|
||
.gd-coil-status{font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;text-align:center;color:#9ca3af;margin-top:.2rem;transition:color .3s;letter-spacing:.03em}
|
||
.gi-wrap.on .gd-coil-status{color:var(--accent)}
|
||
.gi-wrap.faulted .gd-coil-status{color:#9ca3af}
|
||
.gd-motor-status{font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;color:#94a3b8;transition:color .3s;text-align:center;letter-spacing:.04em}
|
||
.gi-wrap.on .gd-motor-status{color:var(--accent)}
|
||
.gi-wrap.faulted .gd-motor-status{color:var(--danger)}
|
||
|
||
/* ─── 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}
|
||
|
||
/* ─── GALVANIC INTERACTIVE DEMO ─────────────── */
|
||
.gi-wrap{background:var(--panel);border:2px solid var(--border);border-radius:20px;padding:1.75rem;margin:1.5rem 0;overflow:hidden;transition:box-shadow .3s}
|
||
.gi-wrap.on{box-shadow:0 0 40px rgba(22,163,74,.15)}
|
||
.gi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
|
||
.gi-status{display:flex;align-items:center;gap:.65rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem}
|
||
.gi-dot{width:14px;height:14px;border-radius:50%;background:#d1d5db;transition:background .4s,box-shadow .4s;flex-shrink:0}
|
||
.gi-dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 20px rgba(22,163,74,.4)}
|
||
.gi-btn{padding:.85rem 2rem;border-radius:999px;border:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;background:var(--accent);color:#fff;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 4px 18px rgba(22,163,74,.35);letter-spacing:.01em}
|
||
.gi-btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 22px rgba(22,163,74,.45)}
|
||
.gi-btn.on{background:var(--danger);box-shadow:0 4px 18px rgba(220,38,38,.35)}
|
||
.gi-btn.on:hover{background:#b91c1c;box-shadow:0 6px 22px rgba(220,38,38,.45)}
|
||
.gi-diagram{display:grid;grid-template-columns:1fr 200px 1fr;gap:0;border-radius:14px;border:1px solid var(--border-soft);overflow:hidden;background:var(--bg)}
|
||
@media(max-width:700px){.gi-diagram{grid-template-columns:1fr}}
|
||
.gi-panel{padding:1.4rem 1rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.85rem}
|
||
.gi-panel.ctrl{border-right:1px solid var(--border-soft)}
|
||
.gi-panel.main{border-left:1px solid var(--border-soft)}
|
||
.gi-plabel{font-family:'Outfit',sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
|
||
.gi-volt{font-family:'Share Tech Mono',monospace;font-size:1.5rem;font-weight:700;line-height:1}
|
||
.gi-volt.cv{color:var(--accent)}.gi-volt.mv{color:var(--danger)}
|
||
/* Battery symbol */
|
||
.gi-bat{display:flex;align-items:center;gap:5px;font-family:'Outfit',sans-serif;font-weight:800;font-size:.95rem;color:var(--accent)}
|
||
.gi-bat-lines{display:flex;flex-direction:column;gap:3px}
|
||
.gi-bat-thick{width:20px;height:3px;background:var(--accent);border-radius:2px}
|
||
.gi-bat-thin{width:12px;height:2px;background:var(--accent);border-radius:2px;margin:0 auto;opacity:.55}
|
||
.gi-devname{font-size:.82rem;color:var(--muted);font-family:'Outfit',sans-serif;font-weight:600;text-align:center}
|
||
/* Switch */
|
||
.gi-sw{display:flex;flex-direction:column;align-items:center;gap:.3rem}
|
||
.gi-sw-body{display:flex;align-items:center;gap:2px;height:28px}
|
||
.gi-sw-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--accent-dark);flex-shrink:0}
|
||
.gi-sw-arm{width:26px;height:2px;background:var(--accent);transform:rotate(-38deg);transform-origin:0% 50%;transition:transform .35s ease;margin-left:-2px}
|
||
.gi-wrap.on .gi-sw-arm{transform:rotate(0deg)}
|
||
.gi-sw-spacer{width:22px;height:2px;background:var(--border-soft)}
|
||
/* Flow track */
|
||
.gi-flow{position:relative;width:100%;height:22px;border-radius:11px;overflow:hidden;border:1px solid rgba(22,163,74,.2);background:rgba(22,163,74,.05)}
|
||
.gi-flow.mf{border-color:rgba(220,38,38,.2);background:rgba(220,38,38,.05)}
|
||
.gi-el{position:absolute;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent);animation:elFlow 2s linear infinite;animation-play-state:paused}
|
||
.gi-flow.mf .gi-el{background:var(--danger);box-shadow:0 0 5px var(--danger);animation-direction:reverse}
|
||
.gi-el:nth-child(2){animation-delay:-.67s}
|
||
.gi-el:nth-child(3){animation-delay:-1.33s}
|
||
@keyframes elFlow{from{left:-11px}to{left:calc(100% + 11px)}}
|
||
.gi-wrap.on .gi-el{animation-play-state:running}
|
||
.gi-conn{font-family:'Share Tech Mono',monospace;font-size:.78rem;color:var(--accent);font-weight:600;text-align:center}
|
||
.gi-conn.mc{color:var(--danger)}
|
||
/* Motor */
|
||
.gi-motor-svg{color:#94a3b8;transition:color .4s}
|
||
.gi-wrap.on .gi-motor-svg{color:var(--accent)}
|
||
.spin-mark{transform-origin:50px 50px}
|
||
.gi-wrap.on .spin-mark{animation:motorSpin .9s linear infinite}
|
||
@keyframes motorSpin{to{transform:rotate(360deg)}}
|
||
/* CENTER Schütz panel */
|
||
.gi-sc{display:flex;flex-direction:column;align-items:center;padding:1.25rem .75rem;gap:.7rem}
|
||
.gi-sc-label{font-family:'Outfit',sans-serif;font-weight:700;font-size:.88rem;color:var(--text);text-align:center}
|
||
.gi-coil{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .75rem;border:2px solid var(--border);border-radius:10px;background:#fff;transition:border-color .4s,box-shadow .4s;width:100%}
|
||
.gi-wrap.on .gi-coil{border-color:var(--accent);box-shadow:0 0 16px rgba(22,163,74,.22)}
|
||
.gi-ctag{font-family:'Share Tech Mono',monospace;font-size:.75rem;font-weight:700;color:var(--accent)}
|
||
.gi-winds{display:flex;flex-direction:column;gap:2px;padding:.2rem 0}
|
||
.gi-wind{height:5px;border:1.5px solid var(--border);border-radius:2px;width:54px;transition:border-color .4s}
|
||
.gi-wrap.on .gi-wind{border-color:var(--accent)}
|
||
/* Mag field */
|
||
.gi-mag{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
|
||
.gi-mr{position:absolute;border-radius:50%;border:2px solid var(--accent);opacity:0}
|
||
.gi-mr.r1{width:20px;height:20px}
|
||
.gi-mr.r2{width:36px;height:36px}
|
||
.gi-mr.r3{width:52px;height:52px}
|
||
.gi-wrap.on .gi-mr{animation:magRing 1.6s ease-out infinite}
|
||
.gi-wrap.on .gi-mr.r2{animation-delay:.35s}
|
||
.gi-wrap.on .gi-mr.r3{animation-delay:.7s}
|
||
@keyframes magRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.15)}}
|
||
.gi-mag-icon{font-size:1.1rem;position:relative;z-index:1}
|
||
/* Separation barrier */
|
||
.gi-sep{width:100%;display:flex;flex-direction:column;align-items:center;gap:.2rem}
|
||
.gi-sep-dashes{width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--danger) 0,var(--danger) 7px,transparent 7px,transparent 13px);opacity:.4;transition:opacity .4s}
|
||
.gi-wrap.on .gi-sep-dashes{opacity:1;animation:sepBlink 2s ease-in-out infinite}
|
||
@keyframes sepBlink{0%,100%{opacity:.55}50%{opacity:1}}
|
||
.gi-sep-badge{font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:800;color:var(--danger);text-transform:uppercase;letter-spacing:.05em;background:rgba(220,38,38,.08);padding:.2rem .5rem;border-radius:4px;white-space:nowrap}
|
||
/* Contacts */
|
||
.gi-cts{display:flex;flex-direction:column;gap:.4rem;width:100%}
|
||
.gi-crow{display:flex;align-items:center;justify-content:center;gap:3px;font-family:'Share Tech Mono',monospace;font-size:.78rem}
|
||
.gi-cl{color:var(--muted);min-width:20px;text-align:right}
|
||
.gi-chalf{width:14px;height:3px;background:#d1d5db;border-radius:2px;transition:background .35s}
|
||
.gi-cgap{width:10px;height:3px;background:transparent;border:none;border-top:2px dashed #d1d5db;transition:width .35s,border-color .35s}
|
||
.gi-wrap.on .gi-chalf{background:var(--accent)}
|
||
.gi-wrap.on .gi-cgap{width:0;border-top-color:var(--accent)}
|
||
/* Footer */
|
||
.gi-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-top:1.25rem}
|
||
@media(max-width:700px){.gi-foot{grid-template-columns:1fr}}
|
||
.gi-fbox{padding:.9rem 1rem;border-radius:12px;text-align:center;font-size:.84rem;line-height:1.4}
|
||
.gi-fbox strong{display:block;font-family:'Outfit',sans-serif;font-size:.88rem;margin-bottom:.2rem}
|
||
.gi-fb-ctrl{background:var(--accent-soft);border:1px solid var(--border)}.gi-fb-ctrl strong{color:var(--accent-dark)}
|
||
.gi-fb-sep{background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.2)}.gi-fb-sep strong{color:var(--danger)}
|
||
.gi-fb-main{background:rgba(254,242,242,.8);border:1px solid rgba(220,38,38,.2)}.gi-fb-main strong{color:var(--danger)}
|
||
</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">Grundlagen</a></li>
|
||
<li><a href="#ab2">Relais & Schütz</a></li>
|
||
<li><a href="#ab5">Aufbau</a></li>
|
||
<li><a href="#ab6">Funktion</a></li>
|
||
<li><a href="#ab7">Sicherheit</a></li>
|
||
<li><a href="#quiz">Quiz</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section id="hero" class="hero reveal">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-inner">
|
||
<h1>Elektromagnetische Schalter</h1>
|
||
<p class="hero-lead">Relais und Schütze in der Steuerungstechnik</p>
|
||
<div class="stats">
|
||
<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 class="scroll-arrow"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AB 1: Grundlagen -->
|
||
<section id="ab1" class="section reveal alt-bg">
|
||
<h2 class="section-head">Was sind elektromagnetische Schalter?</h2>
|
||
<p class="intro-text">Elektromagnetische Schalter werden in der Industrie überall dort eingesetzt, wo elektrische Stromkreise sicher und zuverlässig geschaltet werden müssen, zum Beispiel beim Starten von Motoren oder bei der Steuerung von Kränen.</p>
|
||
<p class="intro-text">Es gibt zwei Haupttypen: das <strong>Relais</strong> für kleinere Steuerströme und das <strong>Schütz</strong> für große Lastströme.</p>
|
||
|
||
<h3 class="table-title">Schützarten</h3>
|
||
<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">Typische 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. Antriebsmotoren</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- AB 2: Relais vs Schütz -->
|
||
<section id="ab2" class="section reveal">
|
||
<h2 class="section-head">Relais & Schütz im Vergleich</h2>
|
||
|
||
<div class="vs-wrap">
|
||
<div class="vs-card left">
|
||
<figure class="figure" style="margin-bottom:1rem">
|
||
<img loading="lazy" src="relais.png" alt="Relais geöffnet — Spule und Kontakte sichtbar">
|
||
</figure>
|
||
<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>
|
||
|
||
<div class="vs-badge">VS</div>
|
||
|
||
<div class="vs-card right">
|
||
<figure class="figure" style="margin-bottom:1rem">
|
||
<img loading="lazy" src="schuetz.png" alt="Leistungsschütz">
|
||
</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">
|
||
<figure class="figure" style="text-align:center;background:#f8faff;border:1px solid var(--border);border-radius:12px;padding:1.25rem">
|
||
<img loading="lazy" src="federkontakt.png" alt="Federkontakt beim Relais" style="max-width:220px;width:100%;height:auto;margin:0 auto">
|
||
</figure>
|
||
<figure class="figure" style="text-align:center;background:#f8faff;border:1px solid var(--border);border-radius:12px;padding:1.25rem">
|
||
<img loading="lazy" src="schaltkontakt.png" alt="Schaltkontakt beim Schütz" style="max-width:220px;width:100%;height:auto;margin:0 auto">
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- AB 5: Aufbau -->
|
||
<section id="ab5" class="section reveal alt-bg">
|
||
<h2 class="section-head">Aufbau & Bestandteile eines Schützes</h2>
|
||
|
||
<div class="ab5-grid">
|
||
<div>
|
||
<figure class="figure">
|
||
<img loading="lazy"
|
||
src="schuetz-aufbau.jpg"
|
||
alt="Motorschütz geöffnet — Bestandteile sichtbar"
|
||
onerror="this.style.display='none'"
|
||
style="width:100%;max-width:320px;display:block;margin:0 auto;border-radius:12px;border:2px solid #86efac">
|
||
</figure>
|
||
</div>
|
||
|
||
<div>
|
||
<ol class="parts-list" id="parts-list">
|
||
<li data-key="oeffner"><strong>Öffner</strong></li>
|
||
<li data-key="schaltstuecke"><strong>Schaltstücke</strong></li>
|
||
<li data-key="schliesser"><strong>Schließer</strong></li>
|
||
<li data-key="spulenanschluss"><strong>Spulenanschluss</strong></li>
|
||
<li data-key="anker"><strong>Anker</strong></li>
|
||
<li data-key="kurzschlussring"><strong>Kurzschlussring</strong></li>
|
||
<li data-key="spule"><strong>Spule</strong></li>
|
||
<li data-key="eisenkern"><strong>Eisenkern</strong></li>
|
||
</ol>
|
||
</div>
|
||
</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: Funktionsweise -->
|
||
<section id="ab6" class="section reveal">
|
||
<h2 class="section-head">Funktionsweise Schritt für Schritt</h2>
|
||
|
||
<div class="timeline">
|
||
<div class="tl-step" data-n="1" style="transition-delay:.0s">
|
||
<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" style="transition-delay:.15s">
|
||
<h4>Magnetfeld entsteht</h4>
|
||
<p>Strom fließt durch die Schützspule, ein Magnetfeld entsteht.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="3" style="transition-delay:.3s">
|
||
<h4>Anker wird angezogen</h4>
|
||
<p>Das Magnetfeld zieht den Anker an und betätigt die Schaltkontakte.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="4" style="transition-delay:.45s">
|
||
<h4>Kontakte schalten</h4>
|
||
<p>Schließer schließen, Öffner öffnen. Der Verbraucher wird eingeschaltet.</p>
|
||
</div>
|
||
<div class="tl-step" data-n="5" style="transition-delay:.6s">
|
||
<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>Galvanische Trennung</h3></div>
|
||
|
||
<!-- ── INTERACTIVE DEMO ── -->
|
||
<div class="gi-wrap" id="giWrap">
|
||
|
||
<!-- Header -->
|
||
<div class="gi-header">
|
||
<div class="gi-status">
|
||
<span class="gi-dot" id="giDot"></span>
|
||
<span id="giTxt">Schütz abgefallen — kein Strom fließt</span>
|
||
</div>
|
||
<button class="gi-btn" id="giBtn" onclick="toggleGalv()">Spannung anlegen</button>
|
||
<button class="gi-btn gi-fault-btn" id="giFaultBtn" onclick="triggerFault()" disabled title="Nur wenn Schütz eingeschaltet">⚡ Fehlerstrom</button>
|
||
</div>
|
||
|
||
<!-- Three-column diagram -->
|
||
<div class="gi-diagram">
|
||
|
||
<!-- LEFT: Steuerstromkreis -->
|
||
<div class="gi-panel ctrl">
|
||
<div class="gi-plabel">Steuerstromkreis</div>
|
||
<div class="gi-volt cv">DC 24V</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:.3rem">
|
||
<div class="gi-bat">
|
||
<span>+</span>
|
||
<div class="gi-bat-lines">
|
||
<div class="gi-bat-thick"></div>
|
||
<div class="gi-bat-thin"></div>
|
||
<div class="gi-bat-thick"></div>
|
||
<div class="gi-bat-thin"></div>
|
||
</div>
|
||
<span>−</span>
|
||
</div>
|
||
<div class="gi-devname">Spannungsquelle</div>
|
||
</div>
|
||
<div class="gi-sw">
|
||
<div class="gi-sw-body">
|
||
<div class="gi-sw-dot"></div>
|
||
<div class="gi-sw-arm" id="giArm"></div>
|
||
<div class="gi-sw-spacer"></div>
|
||
<div class="gi-sw-dot"></div>
|
||
</div>
|
||
<div class="gi-devname">Taster S1</div>
|
||
</div>
|
||
<div class="gi-flow">
|
||
<div class="gi-el"></div>
|
||
<div class="gi-el"></div>
|
||
<div class="gi-el"></div>
|
||
</div>
|
||
<div class="gi-conn">Klemme A1 →</div>
|
||
</div>
|
||
|
||
<!-- CENTER: Schütz -->
|
||
<div class="gi-sc">
|
||
<div class="gi-sc-label">Schütz Q1</div>
|
||
<div class="gi-coil">
|
||
<div class="gi-ctag">A1</div>
|
||
<div class="gi-winds">
|
||
<div class="gi-wind"></div>
|
||
<div class="gi-wind"></div>
|
||
<div class="gi-wind"></div>
|
||
<div class="gi-wind"></div>
|
||
<div class="gi-wind"></div>
|
||
</div>
|
||
<div class="gi-ctag">A2</div>
|
||
</div>
|
||
<div class="gi-mag">
|
||
<div class="gi-mr r1"></div>
|
||
<div class="gi-mr r2"></div>
|
||
<div class="gi-mr r3"></div>
|
||
<span class="gi-mag-icon">🧲</span>
|
||
</div>
|
||
<div class="gi-sep">
|
||
<div class="gi-sep-dashes"></div>
|
||
<div class="gi-sep-badge">Keine elektr. Verbindung</div>
|
||
<div class="gi-sep-dashes"></div>
|
||
</div>
|
||
<div class="gi-cts">
|
||
<div class="gi-crow">
|
||
<span class="gi-cl">L1</span>
|
||
<div class="gi-chalf"></div><div class="gi-cgap"></div><div class="gi-chalf"></div>
|
||
<span class="gi-cl" style="text-align:left">T1</span>
|
||
</div>
|
||
<div class="gi-crow">
|
||
<span class="gi-cl">L2</span>
|
||
<div class="gi-chalf"></div><div class="gi-cgap"></div><div class="gi-chalf"></div>
|
||
<span class="gi-cl" style="text-align:left">T2</span>
|
||
</div>
|
||
<div class="gi-crow">
|
||
<span class="gi-cl">L3</span>
|
||
<div class="gi-chalf"></div><div class="gi-cgap"></div><div class="gi-chalf"></div>
|
||
<span class="gi-cl" style="text-align:left">T3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: Hauptstromkreis -->
|
||
<div class="gi-panel main">
|
||
<div class="gi-ks-flash" id="giKsFlash">⚡</div>
|
||
<div class="gi-plabel">Hauptstromkreis</div>
|
||
<div class="gi-volt mv">AC 400V</div>
|
||
<svg class="gi-motor-svg" viewBox="0 0 100 100" width="82" height="82">
|
||
<circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" stroke-width="3"/>
|
||
<circle cx="50" cy="50" r="33" fill="none" stroke="currentColor" stroke-width="1" opacity=".2"/>
|
||
<text x="50" y="58" text-anchor="middle" font-family="Outfit,sans-serif" font-weight="800" font-size="26" fill="currentColor">M</text>
|
||
<line class="spin-mark" x1="50" y1="8" x2="50" y2="20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
||
</svg>
|
||
<div class="gi-devname">Motor M1</div>
|
||
<div class="gi-fault-ind" id="giFaultInd">⚡ Kurzschluss — Auslösung!</div>
|
||
<div class="gi-motor-stop" id="giMotorStop">MOTOR GESTOPPT</div>
|
||
<div class="gi-flow mf">
|
||
<div class="gi-el"></div>
|
||
<div class="gi-el"></div>
|
||
<div class="gi-el"></div>
|
||
</div>
|
||
<div class="gi-conn mc">← T1 / T2 / T3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer legend -->
|
||
<div class="gi-foot">
|
||
<div class="gi-fbox gi-fb-ctrl">
|
||
<strong>Steuerstromkreis</strong>
|
||
DC 24V · sicher berührbar
|
||
</div>
|
||
<div class="gi-fbox gi-fb-sep">
|
||
<strong>Galvanische Trennung</strong>
|
||
Kopplung nur über Magnetfeld
|
||
</div>
|
||
<div class="gi-fbox gi-fb-main">
|
||
<strong>Hauptstromkreis</strong>
|
||
AC 400V · lebensgefährlich
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
|
||
<!-- AB 7: Sicherheit -->
|
||
<section id="ab7" class="section reveal alt-bg">
|
||
<h2 class="section-head">Sicherheitsregeln beim Schützaustausch</h2>
|
||
|
||
<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>
|
||
|
||
|
||
<!-- QUIZ -->
|
||
<section id="quiz" class="section reveal alt-bg">
|
||
<h2 class="section-head">Wissens-Check</h2>
|
||
<div class="quiz-progress-wrap"><div class="quiz-progress-bar" id="quiz-progress"></div></div>
|
||
<div id="quiz-box"></div>
|
||
<div style="text-align:center;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center">
|
||
<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>Elektromagnetische Schalter · Steuerungstechnik</p>
|
||
</footer>
|
||
|
||
<script>
|
||
'use strict';
|
||
|
||
/* ─── QUIZ ─────────────────────────────────────────── */
|
||
const quizData = [
|
||
{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 updateProgress() {
|
||
const answered = quizState.filter(s => s.answered).length;
|
||
const pct = (answered / quizData.length) * 100;
|
||
document.getElementById('quiz-progress').style.width = pct + '%';
|
||
}
|
||
|
||
function buildQuiz() {
|
||
const box = document.getElementById('quiz-box');
|
||
box.innerHTML = '';
|
||
quizState = quizData.map(() => ({ answered:false, correct:null }));
|
||
updateProgress();
|
||
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;
|
||
updateProgress();
|
||
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 = '−';
|
||
}
|
||
}
|
||
|
||
/* ─── REVEAL ────────────────────────────────────────── */
|
||
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);
|
||
});
|
||
}
|
||
|
||
/* ─── TIMELINE: animate steps on scroll ─────────────── */
|
||
const tlObs = new IntersectionObserver(entries => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
const steps = e.target.querySelectorAll('.tl-step');
|
||
steps.forEach(s => s.classList.add('tl-visible'));
|
||
tlObs.unobserve(e.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.2 });
|
||
document.querySelectorAll('.timeline').forEach(t => tlObs.observe(t));
|
||
|
||
|
||
/* ─── MENU ──────────────────────────────────────────── */
|
||
document.getElementById('menu-btn').addEventListener('click', function() {
|
||
document.getElementById('navm').classList.toggle('open');
|
||
});
|
||
|
||
/* ─── PROGRESS BAR ──────────────────────────────────── */
|
||
(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;
|
||
bar.style.width = (h <= 0 ? 0 : Math.min((window.scrollY / h) * 100, 100)) + '%';
|
||
}, { passive:true });
|
||
})();
|
||
|
||
/* ─── IMG ERROR HANDLER ─────────────────────────────── */
|
||
document.querySelectorAll('img').forEach(img => {
|
||
img.addEventListener('error', function() {
|
||
if (this.dataset.err) return;
|
||
this.dataset.err = '1';
|
||
if (this.style.display === 'none') return;
|
||
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';
|
||
});
|
||
});
|
||
|
||
/* ─── GALVANIC TOGGLE + FAULT ───────────────────────── */
|
||
let galvOn = false;
|
||
function toggleGalv() {
|
||
galvOn = !galvOn;
|
||
const wrap = document.getElementById('giWrap');
|
||
const dot = document.getElementById('giDot');
|
||
const btn = document.getElementById('giBtn');
|
||
const txt = document.getElementById('giTxt');
|
||
const fBtn = document.getElementById('giFaultBtn');
|
||
// Always clear fault state when toggling
|
||
wrap.classList.remove('fault');
|
||
if (galvOn) {
|
||
wrap.classList.add('on');
|
||
dot.classList.add('on');
|
||
btn.classList.add('on');
|
||
btn.textContent = 'Spannung abschalten';
|
||
txt.textContent = 'Schütz angezogen · Kontakte geschlossen · Motor läuft';
|
||
fBtn.disabled = false;
|
||
document.getElementById('gdCoilStatus').textContent = 'ERREGT';
|
||
document.getElementById('gdCtStatus').textContent = 'GESCHLOSSEN ✓';
|
||
document.getElementById('gdMotorStatus').textContent = 'LÄUFT ✓';
|
||
} else {
|
||
wrap.classList.remove('on');
|
||
dot.classList.remove('on');
|
||
btn.classList.remove('on');
|
||
fBtn.disabled = true;
|
||
btn.textContent = 'Spannung anlegen';
|
||
txt.textContent = 'Schütz abgefallen · kein Strom fließt';
|
||
document.getElementById('gdCoilStatus').textContent = 'STROMLOS';
|
||
document.getElementById('gdCtStatus').textContent = 'OFFEN ✗';
|
||
document.getElementById('gdMotorStatus').textContent = 'GESTOPPT ✗';
|
||
if (document.getElementById('giArm')) document.getElementById('giArm').style.transform = '';
|
||
}
|
||
}
|
||
|
||
function triggerFault() {
|
||
if (!galvOn) return;
|
||
const wrap = document.getElementById('giWrap');
|
||
const dot = document.getElementById('giDot');
|
||
const btn = document.getElementById('giBtn');
|
||
const txt = document.getElementById('giTxt');
|
||
const fBtn = document.getElementById('giFaultBtn');
|
||
|
||
// ── SCHRITT 1: Fehlerstrom tritt auf ──────────────
|
||
// Big flash first, then fault state
|
||
const flash = document.getElementById('giKsFlash');
|
||
flash.classList.add('go');
|
||
setTimeout(() => flash.classList.remove('go'), 750);
|
||
|
||
wrap.classList.add('fault');
|
||
fBtn.disabled = true;
|
||
txt.textContent = '⚡ Fehlerstrom im Hauptstromkreis!';
|
||
dot.style.cssText = 'background:#dc2626;box-shadow:0 0 12px #dc2626';
|
||
|
||
// ── SCHRITT 2 (0.9s): Schutzorgan löst aus ───────
|
||
setTimeout(() => {
|
||
txt.textContent = '🔴 Schutzorgan hat ausgelöst — Schütz fällt ab ...';
|
||
}, 900);
|
||
|
||
// ── SCHRITT 3 (1.8s): Schütz fällt ab ────────────
|
||
setTimeout(() => {
|
||
galvOn = false;
|
||
wrap.classList.remove('on');
|
||
wrap.classList.remove('fault');
|
||
wrap.classList.add('faulted');
|
||
btn.classList.remove('on');
|
||
btn.textContent = 'Spannung anlegen';
|
||
dot.classList.remove('on');
|
||
dot.style.cssText = 'background:#dc2626;box-shadow:0 0 8px #dc2626';
|
||
txt.textContent = '⛔ Schütz abgefallen · Kontakte offen · Motor spannungsfrei';
|
||
document.getElementById('gdCoilStatus').textContent = 'STROMLOS';
|
||
document.getElementById('gdCtStatus').textContent = 'OFFEN — ⚡ FEHLER';
|
||
document.getElementById('gdMotorStatus').textContent = 'GESTOPPT ✗';
|
||
}, 1800);
|
||
|
||
// ── Automatisch zurücksetzen nach 4.5s ──────────────
|
||
setTimeout(() => {
|
||
wrap.classList.remove('faulted');
|
||
dot.style.cssText = '';
|
||
fBtn.disabled = true;
|
||
txt.textContent = 'Schütz abgefallen · kein Strom fließt';
|
||
document.getElementById('gdCtStatus').textContent = 'OFFEN ✗';
|
||
}, 4500);
|
||
}
|
||
|
||
buildQuiz();
|
||
observeReveal();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|