From bb8721d5f05d811dc671a29b50dd982a31c11091 Mon Sep 17 00:00:00 2001
From: root <root@ubuntu-16gb-webklar-v1.0.0>
Date: Wed, 22 Apr 2026 21:29:54 +0000
Subject: [PATCH] Kurzschluss deutlicher: grosser roter Blitz-Flash ueber
 rechtem Panel + Motor-Shake

Made-with: Cursor
---
 index.html | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 9cb5abd..a2619eb 100644
--- a/index.html
+++ b/index.html
@@ -332,12 +332,23 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
 .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;transition:background .3s}
-.gi-wrap.fault .gi-panel.main{background:rgba(220,38,38,.08)}
+.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)}
 
-/* Fault: motor red, stops spinning */
-.gi-wrap.fault .gi-motor-svg{color:var(--danger);transition:color .2s}
+/* 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}
 
@@ -750,6 +761,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
 
       <!-- 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">
@@ -1044,6 +1056,11 @@ function triggerFault() {
   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!';