ANDJ/Steuerungstechnik
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Praxis-Hebekran-Sektion neu gestaltet: 2-spaltig mit Foto und Betriebsmittel-Karten, 3 Stat-Boxen

Browse Source 
Made-with: Cursor
This commit is contained in:
root
2026-04-20 20:36:14 +00:00
parent b46021ad89
commit 8b4a0077fe
1 changed files with 54 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
index.html
View File

@@ -599,25 +599,64 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
</section>
<!-- AB 8: Praxis -->
<section id="ab8" class="section reveal">
<section id="ab8" class="section reveal alt-bg">
<h2 class="section-head">Praxisbeispiel: Hebekran</h2>
<figure class="figure">
<img loading="lazy"
src="hebekran.jpg"
alt="Industrieller Portalkran mit Schützsteuerung"
onerror="this.style.display='none'">
</figure>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;margin-bottom:2rem">
<figure class="figure" style="margin:0">
<img loading="lazy"
src="hebekran.jpg"
alt="Industrieller Portalkran"
onerror="this.style.display='none'"
style="border-radius:14px;border:2px solid var(--border);width:100%">
</figure>
<div>
<p style="font-size:1.05rem;color:#374151;margin:0 0 1.25rem">Ein Hebekran wird über Schütze gesteuert. Die Betriebsmittel bilden zusammen die Steuerung des Antriebsmotors.</p>
<div style="display:flex;flex-direction:column;gap:.6rem">
<div style="display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:.75rem 1rem">
<span style="font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--accent);font-size:1rem;min-width:2.5rem">Q1</span>
<span style="font-size:.93rem;color:var(--text)">Hauptschalter</span>
</div>
<div style="display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:.75rem 1rem">
<span style="font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--accent);font-size:1rem;min-width:2.5rem">S1</span>
<span style="font-size:.93rem;color:var(--text)">Schlüsselschalter</span>
</div>
<div style="display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:.75rem 1rem">
<span style="font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--accent);font-size:1rem;min-width:2.5rem">S2</span>
<span style="font-size:.93rem;color:var(--text)">Taster AUF</span>
</div>
<div style="display:flex;align-items:center;gap:.85rem;background:#fff;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:.75rem 1rem">
<span style="font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--accent);font-size:1rem;min-width:2.5rem">S3</span>
<span style="font-size:.93rem;color:var(--text)">Taster AB</span>
</div>
<div style="display:flex;align-items:center;gap:.85rem;background:#fff;border:2px solid var(--danger);border-left:4px solid var(--danger);border-radius:10px;padding:.75rem 1rem">
<span style="font-family:'Share Tech Mono',monospace;font-weight:700;color:var(--danger);font-size:1rem;min-width:2.5rem">S0</span>
<span style="font-size:.93rem;color:var(--text);font-weight:600">NOT-HALT</span>
</div>
</div>
</div>
</div>
<p class="intro-text">Ein Hebekran wird über Schütze gesteuert. Verschiedene Schalter und Taster steuern den Antriebsmotor der Seilwinde.</p>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:.5rem">
<div style="background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:12px;padding:1.1rem;text-align:center">
<div style="font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem">Steuerspannung</div>
<div style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.4rem;color:var(--accent)">DC 24V</div>
</div>
<div style="background:#fff;border:1px solid var(--border);border-top:3px solid var(--amber);border-radius:12px;padding:1.1rem;text-align:center">
<div style="font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem">Gebrauchskategorie</div>
<div style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.4rem;color:var(--amber)">AC-4</div>
</div>
<div style="background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:12px;padding:1.1rem;text-align:center">
<div style="font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem">Betrieb</div>
<div style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.4rem;color:var(--accent)">Tippbetrieb</div>
</div>
</div>
<ul class="signal-list">
<li><div><span class="sig-name">Q1</span> Hauptschalter</div></li>
<li><div><span class="sig-name">S1</span> Schlüsselschalter</div></li>
<li><div><span class="sig-name">S2</span> Taster AUF</div></li>
<li><div><span class="sig-name">S3</span> Taster AB</div></li>
<li><div><span class="sig-name">S0</span> NOT-HALT</div></li>
</ul>
<style>
@media(max-width:900px){#ab8 .praxis-grid{grid-template-columns:1fr !important}}
@media(max-width:900px){#ab8 .praxis-stats{grid-template-columns:1fr 1fr !important}}
@media(max-width:520px){#ab8 .praxis-stats{grid-template-columns:1fr !important}}
</style>
</section>
<!-- QUIZ -->