a425ce31e6
- Mindmap mit Force-directed Layout (pages/mindmap.php) + Cross-Links - 28 Eintraege im Fachartikel-Stil mit 113 Quellen + Inline-Referenzen [^n] - Leichte-Sprache-Version fuer alle 28 Eintraege (short_easy, text_easy, examples.text_easy) - 19 Infografiken (12 neu): co2-Keeling, klimawandel-Temp, kohlenstoff-Kreislauf, fotosynthese, energiemix-AT, methan-GWP, photovoltaik, wasserkraft, kipppunkt, biodiversitaet-LPI, permafrost, treibhausgas-GWP + bestehende (treibhauseffekt, ppm, windrad, albedo, fossile, kwh, co2-fussabdruck) - 5 DALL-E-Reprasentationsbilder im Querformat (nachhaltigkeit, klimaneutralitaet, erneuerbare-energie, emissionen, pariser-abkommen) - Alphabetische Sprungnavigation A-Z mit Buchstabenbannern - Lightbox-Vollbild auf allen Infografiken mit expliziten SVG-Dimensionen (Safari/iPad-Fix) - Easy-Sprache-Toggle pro Card mit localStorage-Persistenz - 4 interaktive Experimente: kWh-Rennen, ppm-Finder, albedo-Slider, CO2-Fussabdruck-Rechner - iPad-Optimierung: Touch-Ziele >=38px, Hover in @media (hover), touch-action - Modul-Metadaten aus DB-Tabelle module_info (keine Hardcodes) - Cache-Buster auf JS-Asset - Schema-Erweiterung: glossar_sources, examples.text_easy Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
138 lines
7.0 KiB
XML
138 lines
7.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 420" font-family="Inter, system-ui, sans-serif" width="900" height="420">
|
|
<defs>
|
|
<pattern id="fb-rock" width="8" height="8" patternUnits="userSpaceOnUse">
|
|
<rect width="8" height="8" fill="#6b4a2e"/>
|
|
<circle cx="3" cy="3" r=".7" fill="#4a2f1a"/>
|
|
<circle cx="6" cy="6" r=".6" fill="#8a6a4a"/>
|
|
</pattern>
|
|
<linearGradient id="fb-flame" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#f4c94e"/>
|
|
<stop offset=".6" stop-color="#e8833a"/>
|
|
<stop offset="1" stop-color="#c85c4a"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<text x="450" y="30" font-size="16" font-weight="800" fill="#1f4e5a" text-anchor="middle">
|
|
Fossile Brennstoffe — 300 Millionen Jahre Speicherung, Sekunden Verbrennung
|
|
</text>
|
|
|
|
<!-- Zeitachse: 300 Mio Jahre als Balken -->
|
|
<g transform="translate(50, 90)">
|
|
<!-- Balken (Geschichte der Erde) -->
|
|
<rect x="0" y="0" width="800" height="42" fill="#4a7c8a" rx="3"/>
|
|
<rect x="0" y="0" width="800" height="42" fill="none" stroke="#1f4e5a" stroke-width="1.5" rx="3"/>
|
|
|
|
<!-- Karbon-Zeitalter (Entstehung der Kohle) -->
|
|
<rect x="0" y="0" width="120" height="42" fill="#3a6b3e" rx="3"/>
|
|
<text x="60" y="25" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">Karbon</text>
|
|
|
|
<!-- Dinosaurier -->
|
|
<circle cx="260" cy="21" r="3" fill="#fff"/>
|
|
<text x="260" y="58" font-size="8" fill="#4a4a4a" text-anchor="middle">Dinosaurier</text>
|
|
<text x="260" y="68" font-size="8" fill="#8a8a8a" text-anchor="middle">vor 200 Mio J.</text>
|
|
|
|
<!-- Säugetiere -->
|
|
<circle cx="620" cy="21" r="3" fill="#fff"/>
|
|
<text x="620" y="58" font-size="8" fill="#4a4a4a" text-anchor="middle">Säugetiere</text>
|
|
|
|
<!-- Menschheit (ganz am Ende) -->
|
|
<rect x="795" y="-6" width="5" height="54" fill="#c85c4a"/>
|
|
<text x="790" y="-10" font-size="10" fill="#c85c4a" font-weight="800" text-anchor="end">Homo sapiens</text>
|
|
<text x="790" y="-22" font-size="9" fill="#8a8a8a" text-anchor="end">(letzte 300.000 Jahre)</text>
|
|
|
|
<!-- Achsen-Labels -->
|
|
<text x="0" y="80" font-size="10" fill="#1f4e5a" font-weight="700">vor 350 Mio Jahren</text>
|
|
<text x="800" y="80" font-size="10" fill="#1f4e5a" font-weight="700" text-anchor="end">heute</text>
|
|
|
|
<text x="400" y="-18" font-size="11" fill="#1f4e5a" font-weight="800" text-anchor="middle">Zeitachse: 350 Millionen Jahre</text>
|
|
|
|
<!-- Pfeil runter zur Entstehung -->
|
|
<path d="M 60 42 L 60 105" stroke="#3a6b3e" stroke-width="1.5" marker-end="url(#fb-a-green)" fill="none" stroke-dasharray="3 2"/>
|
|
</g>
|
|
|
|
<!-- Entstehung der Kohle (links) -->
|
|
<g transform="translate(110, 240)">
|
|
<text y="-10" font-size="12" font-weight="800" fill="#3a6b3e" text-anchor="middle">Über Millionen Jahre:</text>
|
|
<!-- Pflanzen -->
|
|
<g>
|
|
<polygon points="-40,-5 -35,-25 -30,-5" fill="#5a8a5e"/>
|
|
<polygon points="-25,-5 -20,-30 -15,-5" fill="#3a6b3e"/>
|
|
<polygon points="-10,-5 -5,-28 0,-5" fill="#5a8a5e"/>
|
|
<polygon points="5,-5 10,-25 15,-5" fill="#3a6b3e"/>
|
|
<polygon points="20,-5 25,-30 30,-5" fill="#5a8a5e"/>
|
|
<rect x="-50" y="-5" width="100" height="6" fill="#6b4a2e"/>
|
|
</g>
|
|
<!-- Pfeil nach unten -->
|
|
<path d="M 0 5 L 0 35" stroke="#6b4a2e" stroke-width="2" fill="none"/>
|
|
<polygon points="-4,30 4,30 0,40" fill="#6b4a2e"/>
|
|
<!-- Schichten (Gestein) -->
|
|
<rect x="-60" y="45" width="120" height="10" fill="#e8d5b5"/>
|
|
<rect x="-60" y="55" width="120" height="10" fill="#c4a97a"/>
|
|
<rect x="-60" y="65" width="120" height="15" fill="url(#fb-rock)"/>
|
|
<!-- Kohle-Flöz -->
|
|
<rect x="-60" y="80" width="120" height="10" fill="#1a1a1a"/>
|
|
<text y="103" font-size="11" fill="#1f4e5a" font-weight="700" text-anchor="middle">Kohle-Flöz</text>
|
|
<text y="118" font-size="9" fill="#8a8a8a" text-anchor="middle">(gepresste Urwälder)</text>
|
|
</g>
|
|
|
|
<!-- Pfeil: Entstehung dauert lange -->
|
|
<g>
|
|
<path d="M 230 280 L 380 280" stroke="#4a7c8a" stroke-width="2" fill="none" stroke-dasharray="6 4"/>
|
|
<polygon points="380,280 370,275 370,285" fill="#4a7c8a"/>
|
|
<text x="305" y="272" font-size="11" fill="#4a7c8a" font-weight="700" text-anchor="middle">~300.000.000 Jahre</text>
|
|
<text x="305" y="295" font-size="9" fill="#8a8a8a" text-anchor="middle">Druck · Wärme · kein Sauerstoff</text>
|
|
</g>
|
|
|
|
<!-- Verbrennung (Mitte-Rechts) -->
|
|
<g transform="translate(510, 260)">
|
|
<text y="-25" font-size="12" font-weight="800" fill="#c85c4a" text-anchor="middle">Heute in Sekunden:</text>
|
|
<!-- Schornstein / Feuerstelle -->
|
|
<rect x="-20" y="-5" width="40" height="45" fill="#4a4a4a"/>
|
|
<rect x="-25" y="-10" width="50" height="8" fill="#2a2a2a"/>
|
|
<!-- Flamme -->
|
|
<path d="M -15 -10 Q -20 -35 -10 -55 Q 0 -40 5 -60 Q 15 -35 20 -45 Q 15 -20 -15 -10 Z" fill="url(#fb-flame)"/>
|
|
<!-- Rauch: CO₂-Wölkchen -->
|
|
<g fill="#c85c4a" opacity=".75">
|
|
<circle cx="-5" cy="-75" r="7"/>
|
|
<circle cx="8" cy="-82" r="9"/>
|
|
<circle cx="20" cy="-75" r="6"/>
|
|
<circle cx="12" cy="-95" r="7"/>
|
|
</g>
|
|
<text x="10" y="-72" font-size="7" font-weight="800" fill="#fff">CO₂</text>
|
|
|
|
<text y="60" font-size="11" fill="#1f4e5a" font-weight="700" text-anchor="middle">Verbrennung</text>
|
|
<text y="76" font-size="9" fill="#8a8a8a" text-anchor="middle">setzt in Sekunden frei,</text>
|
|
<text y="89" font-size="9" fill="#8a8a8a" text-anchor="middle">was in Jahrmillionen</text>
|
|
<text y="102" font-size="9" fill="#8a8a8a" text-anchor="middle">gebunden wurde.</text>
|
|
</g>
|
|
|
|
<!-- Mahnungs-Pfeil: Ungleichgewicht -->
|
|
<g>
|
|
<path d="M 600 280 L 760 280" stroke="#c85c4a" stroke-width="3" fill="none" marker-end="url(#fb-red)"/>
|
|
</g>
|
|
<defs>
|
|
<marker id="fb-red" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#c85c4a"/>
|
|
</marker>
|
|
<marker id="fb-a-green" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="4" markerHeight="4" orient="auto">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#3a6b3e"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<!-- CO₂-Block rechts -->
|
|
<g transform="translate(820, 240)">
|
|
<circle r="35" fill="#c85c4a"/>
|
|
<text y="-3" font-size="18" font-weight="900" fill="#fff" text-anchor="middle">CO₂</text>
|
|
<text y="15" font-size="9" fill="#fff" text-anchor="middle">ansteigend</text>
|
|
</g>
|
|
|
|
<!-- Footer Vergleiche -->
|
|
<g transform="translate(0, 370)">
|
|
<rect x="50" y="0" width="800" height="40" rx="6" fill="#fff" stroke="#dae8ec" stroke-width="1"/>
|
|
<text x="70" y="16" font-size="10" fill="#1f4e5a" font-weight="800">Zum Einordnen:</text>
|
|
<text x="155" y="16" font-size="10" fill="#4a4a4a">1 Liter Benzin = Energie aus ≈ 25 t Urzeit-Pflanzenmaterial · 75 % der weltweiten CO₂-Emissionen aus Fossilen</text>
|
|
<text x="70" y="32" font-size="10" fill="#1f4e5a" font-weight="800">In Österreich:</text>
|
|
<text x="155" y="32" font-size="10" fill="#4a4a4a">jährlich ca. 8 Mio. Tonnen Erdöl — vor allem für den Verkehr (Diesel, Benzin, Kerosin)</text>
|
|
</g>
|
|
</svg>
|