Files
geograsim/App/assets/img/glossar/fossile-brennstoffe-zeit.svg
T
Adminator a425ce31e6 Glossar: Komplettpaket (28 Eintraege, 19 SVGs, 5 DALL-E-Bilder, iPad, Experimente)
- 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>
2026-04-19 00:48:29 +02:00

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>