diff --git a/frontend/src/tools/devtools.jsx b/frontend/src/tools/devtools.jsx
index 2e8702c..626ac26 100644
--- a/frontend/src/tools/devtools.jsx
+++ b/frontend/src/tools/devtools.jsx
@@ -314,10 +314,7 @@ function ElektroRechner({ mobile }) {
   const n   = k => { const v = parseFloat(vals[k]); return isNaN(v) ? null : v; };
   const fmt = (v, unit, digits=3) => v == null ? '—' : `${parseFloat(v.toPrecision(digits))} ${unit}`;
 
-  // Shorthand mit gebundenen props
-  const Inp = (props) => <ElektroInp vals={vals} setVals={setVals} {...props}/>;
-  const Res = (props) => <ElektroResult {...props}/>;
-  const Sec = (props) => <ElektroSection {...props}/>;
+  // Res und Sec als direkte Aliase (kein Render-Problem, keine Inputs)
 
   const cols = mobile ? '1fr' : '1fr 1fr';
 
@@ -379,51 +376,51 @@ function ElektroRechner({ mobile }) {
       <div style={{ display:'grid', gridTemplateColumns:cols, gap:20 }}>
         <div>
           {/* Ohmsches Gesetz */}
-          <Sec title="⚡ Ohmsches Gesetz  U = R · I">
+          <ElektroSection title="⚡ Ohmsches Gesetz  U = R · I">
             <div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
-              <Inp k="u1" label="Spannung" unit="V" placeholder="230"/>
-              <Inp k="i1" label="Strom"    unit="A" placeholder="2"/>
-              <Inp k="r1" label="Widerstand" unit="Ω" placeholder="115"/>
+              <ElektroInp vals={vals} setVals={setVals} k="u1" label="Spannung" unit="V" placeholder="230"/>
+              <ElektroInp vals={vals} setVals={setVals} k="i1" label="Strom"    unit="A" placeholder="2"/>
+              <ElektroInp vals={vals} setVals={setVals} k="r1" label="Widerstand" unit="Ω" placeholder="115"/>
             </div>
-            <Res label="U – Spannung"    value={fmt(ohmRes.U,'V')}  highlight={!U1&&ohmRes.U!=null}/>
-            <Res label="I – Strom"       value={fmt(ohmRes.I,'A')}  highlight={!I1&&ohmRes.I!=null}/>
-            <Res label="R – Widerstand"  value={fmt(ohmRes.R,'Ω')}  highlight={!R1&&ohmRes.R!=null}/>
-          </Sec>
+            <ElektroResult label="U – Spannung"    value={fmt(ohmRes.U,'V')}  highlight={!U1&&ohmRes.U!=null}/>
+            <ElektroResult label="I – Strom"       value={fmt(ohmRes.I,'A')}  highlight={!I1&&ohmRes.I!=null}/>
+            <ElektroResult label="R – Widerstand"  value={fmt(ohmRes.R,'Ω')}  highlight={!R1&&ohmRes.R!=null}/>
+          </ElektroSection>
 
           {/* Leistung */}
-          <Sec title="🔋 Leistung  P = U · I">
+          <ElektroSection title="🔋 Leistung  P = U · I">
             <div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
-              <Inp k="u2" label="Spannung"   unit="V"/>
-              <Inp k="i2" label="Strom"      unit="A"/>
-              <Inp k="p2" label="Leistung"   unit="W"/>
-              <Inp k="r2" label="Widerstand" unit="Ω"/>
+              <ElektroInp vals={vals} setVals={setVals} k="u2" label="Spannung"   unit="V"/>
+              <ElektroInp vals={vals} setVals={setVals} k="i2" label="Strom"      unit="A"/>
+              <ElektroInp vals={vals} setVals={setVals} k="p2" label="Leistung"   unit="W"/>
+              <ElektroInp vals={vals} setVals={setVals} k="r2" label="Widerstand" unit="Ω"/>
             </div>
             {leistRes ? <>
-              <Res label="P – Leistung"   value={fmt(leistRes.P,'W')}   highlight={!P2}/>
-              <Res label="U – Spannung"   value={fmt(leistRes.U,'V')}   highlight={!U2}/>
-              <Res label="I – Strom"      value={fmt(leistRes.I,'A')}   highlight={!I2}/>
-              <Res label="R – Widerstand" value={fmt(leistRes.R,'Ω')}   highlight={!R2}/>
+              <ElektroResult label="P – Leistung"   value={fmt(leistRes.P,'W')}   highlight={!P2}/>
+              <ElektroResult label="U – Spannung"   value={fmt(leistRes.U,'V')}   highlight={!U2}/>
+              <ElektroResult label="I – Strom"      value={fmt(leistRes.I,'A')}   highlight={!I2}/>
+              <ElektroResult label="R – Widerstand" value={fmt(leistRes.R,'Ω')}   highlight={!R2}/>
             </> : <div style={{color:'rgba(255,255,255,0.2)',fontFamily:'monospace',fontSize:11}}>Mindestens 2 Werte eingeben</div>}
-          </Sec>
+          </ElektroSection>
 
           {/* Wirkungsgrad */}
-          <Sec title="🔄 Wirkungsgrad  η = P_ab / P_zu">
+          <ElektroSection title="🔄 Wirkungsgrad  η = P_ab / P_zu">
             <div style={{ display:'flex', gap:8, marginBottom:10 }}>
-              <Inp k="pa" label="Abgabe-Leistung" unit="W" placeholder="800"/>
-              <Inp k="pe" label="Aufnahme-Leistung" unit="W" placeholder="1000"/>
+              <ElektroInp vals={vals} setVals={setVals} k="pa" label="Abgabe-Leistung" unit="W" placeholder="800"/>
+              <ElektroInp vals={vals} setVals={setVals} k="pe" label="Aufnahme-Leistung" unit="W" placeholder="1000"/>
             </div>
-            <Res label="η – Wirkungsgrad" value={eta!=null ? `${eta.toFixed(1)} %` : '—'} highlight={eta!=null}/>
-            <Res label="Verlustleistung"  value={fmt(verlust,'W')}/>
-          </Sec>
+            <ElektroResult label="η – Wirkungsgrad" value={eta!=null ? `${eta.toFixed(1)} %` : '—'} highlight={eta!=null}/>
+            <ElektroResult label="Verlustleistung"  value={fmt(verlust,'W')}/>
+          </ElektroSection>
         </div>
 
         <div>
           {/* Stromkosten */}
-          <Sec title="💶 Stromkosten">
+          <ElektroSection title="💶 Stromkosten">
             <div style={{ display:'flex', gap:8, marginBottom:10, flexWrap:'wrap' }}>
-              <Inp k="pw"   label="Leistung"       unit="W"   placeholder="100"/>
-              <Inp k="std"  label="Stunden/Tag"    unit="h"   placeholder="5"/>
-              <Inp k="tage" label="Tage/Monat"     unit="d"   placeholder="30"/>
+              <ElektroInp vals={vals} setVals={setVals} k="pw"   label="Leistung"       unit="W"   placeholder="100"/>
+              <ElektroInp vals={vals} setVals={setVals} k="std"  label="Stunden/Tag"    unit="h"   placeholder="5"/>
+              <ElektroInp vals={vals} setVals={setVals} k="tage" label="Tage/Monat"     unit="d"   placeholder="30"/>
             </div>
             <div style={{ marginBottom:8 }}>
               <div style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, marginBottom:3 }}>
@@ -433,41 +430,41 @@ function ElektroRechner({ mobile }) {
                 step="0.01" min="0"
                 style={{ ...S.inp, fontSize:13, padding:'7px 9px', width:'100%', boxSizing:'border-box' }}/>
             </div>
-            <Res label="kWh/Tag"          value={kwhTag!=null   ? `${kwhTag.toFixed(3)} kWh`     : '—'}/>
-            <Res label="Kosten/Tag"        value={kostenTag!=null  ? `${kostenTag.toFixed(3)} €`   : '—'}/>
-            <Res label="kWh/Monat"         value={kwhMonat!=null ? `${kwhMonat.toFixed(2)} kWh`    : '—'}/>
-            <Res label="Kosten/Monat"      value={kostenMonat!=null ? `${kostenMonat.toFixed(2)} €`: '—'} highlight={kostenMonat!=null}/>
-            <Res label="kWh/Jahr"          value={kwhJahr!=null  ? `${kwhJahr.toFixed(1)} kWh`    : '—'}/>
-            <Res label="Kosten/Jahr"       value={kostenJahr!=null ? `${kostenJahr.toFixed(2)} €` : '—'} highlight={kostenJahr!=null}/>
-          </Sec>
+            <ElektroResult label="kWh/Tag"          value={kwhTag!=null   ? `${kwhTag.toFixed(3)} kWh`     : '—'}/>
+            <ElektroResult label="Kosten/Tag"        value={kostenTag!=null  ? `${kostenTag.toFixed(3)} €`   : '—'}/>
+            <ElektroResult label="kWh/Monat"         value={kwhMonat!=null ? `${kwhMonat.toFixed(2)} kWh`    : '—'}/>
+            <ElektroResult label="Kosten/Monat"      value={kostenMonat!=null ? `${kostenMonat.toFixed(2)} €`: '—'} highlight={kostenMonat!=null}/>
+            <ElektroResult label="kWh/Jahr"          value={kwhJahr!=null  ? `${kwhJahr.toFixed(1)} kWh`    : '—'}/>
+            <ElektroResult label="Kosten/Jahr"       value={kostenJahr!=null ? `${kostenJahr.toFixed(2)} €` : '—'} highlight={kostenJahr!=null}/>
+          </ElektroSection>
 
           {/* Widerstände */}
-          <Sec title="🔗 Widerstandsschaltung">
+          <ElektroSection title="🔗 Widerstandsschaltung">
             <div style={{ marginBottom:8 }}>
               <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:5 }}>SERIE (R = R1+R2+…)</div>
               <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:8 }}>
-                {['rs1','rs2','rs3','rs4'].map(k=><Inp key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)}
+                {['rs1','rs2','rs3','rs4'].map(k=><ElektroInp vals={vals} setVals={setVals} key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)}
               </div>
-              <Res label="Gesamtwiderstand (Serie)" value={r_ser.length>=2 ? fmt(R_ser,'Ω') : '—'} highlight={r_ser.length>=2}/>
+              <ElektroResult label="Gesamtwiderstand (Serie)" value={r_ser.length>=2 ? fmt(R_ser,'Ω') : '—'} highlight={r_ser.length>=2}/>
             </div>
             <div>
               <div style={{ color:'rgba(255,255,255,0.3)', fontFamily:'monospace', fontSize:9, marginBottom:5 }}>PARALLEL (1/R = 1/R1+1/R2+…)</div>
               <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:8 }}>
-                {['rp1','rp2','rp3','rp4'].map(k=><Inp key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)}
+                {['rp1','rp2','rp3','rp4'].map(k=><ElektroInp vals={vals} setVals={setVals} key={k} k={k} label={`R${k.slice(2)}`} unit="Ω"/>)}
               </div>
-              <Res label="Gesamtwiderstand (Parallel)" value={r_par.length>=2 ? fmt(R_par,'Ω') : '—'} highlight={r_par.length>=2}/>
+              <ElektroResult label="Gesamtwiderstand (Parallel)" value={r_par.length>=2 ? fmt(R_par,'Ω') : '—'} highlight={r_par.length>=2}/>
             </div>
-          </Sec>
+          </ElektroSection>
 
           {/* Kondensator */}
-          <Sec title="⚡ Kondensator  I = C · (ΔU/Δt)">
+          <ElektroSection title="⚡ Kondensator  I = C · (ΔU/Δt)">
             <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:10 }}>
-              <Inp k="cap" label="Kapazität"  unit="F"   placeholder="0.001"/>
-              <Inp k="uc"  label="Spannung"   unit="V"   placeholder="230"/>
-              <Inp k="tc"  label="Zeit Δt"    unit="s"   placeholder="0.02"/>
+              <ElektroInp vals={vals} setVals={setVals} k="cap" label="Kapazität"  unit="F"   placeholder="0.001"/>
+              <ElektroInp vals={vals} setVals={setVals} k="uc"  label="Spannung"   unit="V"   placeholder="230"/>
+              <ElektroInp vals={vals} setVals={setVals} k="tc"  label="Zeit Δt"    unit="s"   placeholder="0.02"/>
             </div>
-            <Res label="I – Ladestrom" value={fmt(Ic,'A')} highlight={Ic!=null}/>
-          </Sec>
+            <ElektroResult label="I – Ladestrom" value={fmt(Ic,'A')} highlight={Ic!=null}/>
+          </ElektroSection>
         </div>
       </div>