From 8b4a0077fe779da29e14eca45c419d9d3885b816 Mon Sep 17 00:00:00 2001
From: root <root@ubuntu-16gb-webklar-v1.0.0>
Date: Mon, 20 Apr 2026 20:36:14 +0000
Subject: [PATCH] Praxis-Hebekran-Sektion neu gestaltet: 2-spaltig mit Foto und
 Betriebsmittel-Karten, 3 Stat-Boxen

Made-with: Cursor
---
 index.html | 69 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 54 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 35b9162..870c721 100644
--- a/index.html
+++ b/index.html
@@ -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 -->