Glossar: 3 weitere Experimente + Watt-Leiter-Infografik

- Treibhauseffekt-Slider (CO2-ppm 200..800 -> Temperatur-Anomalie via IPCC-Faustformel, Moleküle füllen Atmosphäre dynamisch, Thermometer visualisiert ΔT)
- Windrad-Höhenslider (0..260 m, 7 Vergleichsobjekte Mensch..modernes Windrad leuchten je nach Schieberstellung auf)
- Methan-GWP-Waage (CO2-Schale variabel 1..60 kg, Waage kippt physikalisch bis bei 28 kg Balance erreicht ist)
- kWh-Rennen: Fahrzeuge fahren jetzt von rechts nach links (plattformunabhängige Emoji-Orientierung), Animation auf 6,5s verlangsamt
- Watt-Leiter: neue gemeinsame Infografik (log-Skala 1 W..1 GW mit 6 Haushalts- und Kraftwerks-Beispielen), verknüpft mit watt/kilowatt/megawatt
- CSS für Slider-Experimente (.ge-gh-*), Waagen-Animation, Windrad-Highlighting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-19 00:52:39 +02:00
parent a425ce31e6
commit 22f5e9b686
3 changed files with 531 additions and 4 deletions
+180
View File
@@ -0,0 +1,180 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 560" font-family="Inter, system-ui, sans-serif" width="900" height="560">
<defs>
<linearGradient id="wl-bar" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#c85c4a"/>
<stop offset=".25" stop-color="#e8833a"/>
<stop offset=".55" stop-color="#f4c94e"/>
<stop offset=".8" stop-color="#5a8a5e"/>
<stop offset="1" stop-color="#4a7c8a"/>
</linearGradient>
</defs>
<text x="450" y="32" font-size="17" font-weight="800" fill="#1f4e5a" text-anchor="middle">
Die Leistungs-Leiter — Watt, Kilowatt, Megawatt, Gigawatt im Überblick
</text>
<text x="450" y="52" font-size="11" fill="#8a8a8a" text-anchor="middle">
Logarithmische Skala · jeder Schritt = 10× mehr Leistung · Beispiele gerundet
</text>
<!-- Vertikale Leiter im Zentrum: x=450, y 90..520 (430 px für 10 Schritte: 10⁰ W..10⁹ W) -->
<!-- Jeweils 43 px pro Dekade -->
<rect x="440" y="80" width="20" height="450" rx="10" fill="url(#wl-bar)"/>
<!-- Skala-Beschriftung: 10⁰..10⁹ Watt -->
<!-- yByLogW: y = 520 - logW * 43. logW = log10(watt) -->
<!-- Beispiele links (Haushalt) -->
<g font-family="Inter, system-ui, sans-serif">
<!-- 5 W — LED Lampe -->
<g transform="translate(0, 497)">
<line x1="420" y1="3" x2="435" y2="3" stroke="#c85c4a" stroke-width="1.5"/>
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="265" y="2" font-size="22" text-anchor="start">💡</text>
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">LED-Lampe</text>
<text x="300" y="13" font-size="10" fill="#8a8a8a">510 W</text>
</g>
<!-- 100 W — Mensch -->
<g transform="translate(0, 413)">
<line x1="420" y1="3" x2="435" y2="3" stroke="#c85c4a" stroke-width="1.5"/>
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="265" y="5" font-size="22">🚶</text>
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">Mensch beim Gehen</text>
<text x="300" y="13" font-size="10" fill="#8a8a8a">≈ 100 W Muskelkraft</text>
</g>
<!-- 2.000 W (2 kW) — Wasserkocher -->
<g transform="translate(0, 327)">
<line x1="420" y1="3" x2="435" y2="3" stroke="#e8833a" stroke-width="1.5"/>
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="265" y="5" font-size="22">🫖</text>
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">Wasserkocher</text>
<text x="300" y="13" font-size="10" fill="#8a8a8a">2 kW = 2.000 W</text>
</g>
<!-- 150 kW — E-Auto Motor -->
<g transform="translate(0, 229)">
<line x1="420" y1="3" x2="435" y2="3" stroke="#f4c94e" stroke-width="1.5"/>
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="265" y="5" font-size="22">🚗</text>
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">E-Auto-Motor</text>
<text x="300" y="13" font-size="10" fill="#8a8a8a">150 kW · 0,15 MW</text>
</g>
<!-- 6 MW — Windrad -->
<g transform="translate(0, 155)">
<line x1="420" y1="3" x2="435" y2="3" stroke="#5a8a5e" stroke-width="1.5"/>
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="265" y="5" font-size="22">🌬</text>
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">Modernes Windrad</text>
<text x="300" y="13" font-size="10" fill="#8a8a8a">36 MW</text>
</g>
<!-- 1.400 MW (1,4 GW) — AKW-Block -->
<g transform="translate(0, 92)">
<line x1="420" y1="3" x2="435" y2="3" stroke="#4a7c8a" stroke-width="1.5"/>
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="265" y="5" font-size="22"></text>
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">AKW-Block</text>
<text x="300" y="13" font-size="10" fill="#8a8a8a">1.400 MW = 1,4 GW</text>
</g>
</g>
<!-- Skala mit Einheit und Vielfachen rechts -->
<g font-family="Inter, system-ui, sans-serif" fill="#1f4e5a">
<!-- 1 W (10⁰) -->
<g transform="translate(465, 520)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#c85c4a" stroke-width="1.5"/>
<text x="22" y="3" font-size="11" font-weight="800">1 W</text>
<text x="22" y="16" font-size="9" fill="#8a8a8a">100 Watt</text>
</g>
<!-- 10 W (10¹) -->
<g transform="translate(465, 477)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#c85c4a" stroke-width="1"/>
<text x="22" y="3" font-size="11" font-weight="800">10 W</text>
</g>
<!-- 100 W (10²) -->
<g transform="translate(465, 434)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#c85c4a" stroke-width="1"/>
<text x="22" y="3" font-size="11" font-weight="800">100 W</text>
</g>
<!-- 1 kW (10³) -->
<g transform="translate(465, 391)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#e8833a" stroke-width="1.5"/>
<text x="22" y="3" font-size="11" font-weight="800" fill="#b8641d">1 kW</text>
<text x="22" y="16" font-size="9" fill="#8a8a8a">1.000 W</text>
</g>
<!-- 10 kW (10⁴) -->
<g transform="translate(465, 348)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#e8833a" stroke-width="1"/>
<text x="22" y="3" font-size="11" font-weight="800" fill="#b8641d">10 kW</text>
</g>
<!-- 100 kW (10⁵) -->
<g transform="translate(465, 305)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#e8833a" stroke-width="1"/>
<text x="22" y="3" font-size="11" font-weight="800" fill="#b8641d">100 kW</text>
</g>
<!-- 1 MW (10⁶) -->
<g transform="translate(465, 262)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#5a8a5e" stroke-width="1.5"/>
<text x="22" y="3" font-size="11" font-weight="800" fill="#3a6b3e">1 MW</text>
<text x="22" y="16" font-size="9" fill="#8a8a8a">1.000 kW · 1.000.000 W</text>
</g>
<!-- 10 MW (10⁷) -->
<g transform="translate(465, 219)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#5a8a5e" stroke-width="1"/>
<text x="22" y="3" font-size="11" font-weight="800" fill="#3a6b3e">10 MW</text>
</g>
<!-- 100 MW (10⁸) -->
<g transform="translate(465, 176)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#5a8a5e" stroke-width="1"/>
<text x="22" y="3" font-size="11" font-weight="800" fill="#3a6b3e">100 MW</text>
</g>
<!-- 1 GW (10⁹) -->
<g transform="translate(465, 133)">
<line x1="0" y1="0" x2="15" y2="0" stroke="#4a7c8a" stroke-width="1.5"/>
<text x="22" y="3" font-size="11" font-weight="800">1 GW</text>
<text x="22" y="16" font-size="9" fill="#8a8a8a">1.000 MW · 1 Mrd. W</text>
</g>
<!-- Weitere Beispiele rechts unten -->
<g transform="translate(600, 455)">
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">📱 Handy-Ladegerät</text>
<text x="10" y="16" font-size="10" fill="#8a8a8a">20 W — zwischen LED und Mensch</text>
</g>
<g transform="translate(600, 370)">
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">🏠 Hausdach-Solaranlage</text>
<text x="10" y="16" font-size="10" fill="#8a8a8a">10 kWp — deckt 2 Haushalte</text>
</g>
<g transform="translate(600, 283)">
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">⚡ Kraftwerk Freudenau (Donau)</text>
<text x="10" y="16" font-size="10" fill="#8a8a8a">172 MW — 230.000 Haushalte</text>
</g>
<g transform="translate(600, 196)">
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">🇦🇹 Österreich gesamt installiert</text>
<text x="10" y="16" font-size="10" fill="#8a8a8a">~29.000 MW = 29 GW</text>
</g>
</g>
<!-- Fußzeile Quellen -->
<g transform="translate(50, 540)">
<rect x="0" y="-14" width="800" height="28" rx="4" fill="#fff" stroke="#dae8ec"/>
<text x="12" y="4" font-size="10" font-weight="800" fill="#1f4e5a">Quellen:</text>
<text x="62" y="4" font-size="10" fill="#4a4a4a">E-Control Betriebsstatistik Strom 2023 · IG Windkraft Österreich · Hersteller-Angaben Haushaltsgeräte · Physik-Richtwert Muskelarbeit</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.6 KiB