Adminator
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>
148 lines
8.2 KiB
XML
148 lines
8.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 440" font-family="Inter, system-ui, sans-serif" width="900" height="440">
|
|
<defs>
|
|
<marker id="al-in" 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="#e8833a"/>
|
|
</marker>
|
|
<marker id="al-out" 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="#f4c94e"/>
|
|
</marker>
|
|
</defs>
|
|
|
|
<text x="450" y="30" font-size="16" font-weight="800" fill="#1f4e5a" text-anchor="middle">
|
|
Albedo — Wie viel Sonnenlicht wirft die Oberfläche zurück?
|
|
</text>
|
|
<text x="450" y="50" font-size="11" fill="#8a8a8a" text-anchor="middle">
|
|
Helle Oberflächen reflektieren viel, dunkle absorbieren Wärme. 1,0 = Spiegel · 0,0 = schwarz
|
|
</text>
|
|
|
|
<!-- 5 vertikale Spalten: Schnee, Wüste, Wald, Ozean, Asphalt -->
|
|
<!-- Jede Spalte: 160 px breit. Startet x=60 -->
|
|
<!-- SURFACE, Albedo, Color -->
|
|
|
|
<!-- Column 1: Frischer Schnee A=0.85 -->
|
|
<g transform="translate(80, 90)">
|
|
<text y="-10" font-size="12" font-weight="800" fill="#1f4e5a" text-anchor="middle" x="70">❄ Frischer Schnee</text>
|
|
<!-- Sonne-Pfeil rein -->
|
|
<line x1="10" y1="0" x2="60" y2="70" stroke="#e8833a" stroke-width="2.5" marker-end="url(#al-in)"/>
|
|
<!-- 85% raus (mehrere Pfeile) -->
|
|
<g stroke="#f4c94e" stroke-width="2" fill="none" marker-end="url(#al-out)">
|
|
<line x1="60" y1="70" x2="130" y2="10"/>
|
|
<line x1="60" y1="70" x2="115" y2="0"/>
|
|
<line x1="60" y1="70" x2="100" y2="-5"/>
|
|
<line x1="60" y1="70" x2="130" y2="25"/>
|
|
</g>
|
|
<!-- Oberfläche -->
|
|
<rect x="0" y="70" width="140" height="50" fill="#fff" stroke="#1f4e5a" stroke-width="1.5"/>
|
|
<!-- Schnee-Sparkle -->
|
|
<g fill="#4a7c8a" opacity=".4">
|
|
<circle cx="20" cy="85" r="1"/><circle cx="50" cy="98" r="1"/>
|
|
<circle cx="85" cy="82" r="1"/><circle cx="110" cy="100" r="1"/>
|
|
<circle cx="130" cy="90" r="1"/>
|
|
</g>
|
|
<text x="70" y="140" font-size="24" font-weight="900" fill="#1f4e5a" text-anchor="middle">0,85</text>
|
|
<text x="70" y="158" font-size="9" fill="#4a7c8a" text-anchor="middle">85 % zurückgeworfen</text>
|
|
<!-- Balken 0-100% -->
|
|
<rect x="10" y="175" width="120" height="8" fill="#dae8ec" rx="2"/>
|
|
<rect x="10" y="175" width="102" height="8" fill="#4a7c8a" rx="2"/>
|
|
</g>
|
|
|
|
<!-- Column 2: Wüste/Sand A=0.35 -->
|
|
<g transform="translate(240, 90)">
|
|
<text y="-10" font-size="12" font-weight="800" fill="#1f4e5a" text-anchor="middle" x="70">🏜 Wüste · Sand</text>
|
|
<line x1="10" y1="0" x2="60" y2="70" stroke="#e8833a" stroke-width="2.5" marker-end="url(#al-in)"/>
|
|
<g stroke="#f4c94e" stroke-width="2" fill="none" marker-end="url(#al-out)" opacity=".6">
|
|
<line x1="60" y1="70" x2="115" y2="20"/>
|
|
<line x1="60" y1="70" x2="100" y2="5"/>
|
|
</g>
|
|
<rect x="0" y="70" width="140" height="50" fill="#e8d5b5" stroke="#1f4e5a" stroke-width="1.5"/>
|
|
<g fill="#c4a97a" opacity=".6">
|
|
<circle cx="30" cy="88" r="2"/><circle cx="70" cy="100" r="2"/>
|
|
<circle cx="110" cy="85" r="2"/>
|
|
<path d="M 10 110 Q 35 106 60 110 Q 85 114 110 110 Q 125 108 130 110" fill="none" stroke="#c4a97a" stroke-width=".8"/>
|
|
</g>
|
|
<text x="70" y="140" font-size="24" font-weight="900" fill="#1f4e5a" text-anchor="middle">0,35</text>
|
|
<text x="70" y="158" font-size="9" fill="#c4a97a" text-anchor="middle">35 % zurückgeworfen</text>
|
|
<rect x="10" y="175" width="120" height="8" fill="#dae8ec" rx="2"/>
|
|
<rect x="10" y="175" width="42" height="8" fill="#c4a97a" rx="2"/>
|
|
</g>
|
|
|
|
<!-- Column 3: Wald A=0.12 -->
|
|
<g transform="translate(400, 90)">
|
|
<text y="-10" font-size="12" font-weight="800" fill="#1f4e5a" text-anchor="middle" x="70">🌲 Wald</text>
|
|
<line x1="10" y1="0" x2="60" y2="70" stroke="#e8833a" stroke-width="2.5" marker-end="url(#al-in)"/>
|
|
<g stroke="#f4c94e" stroke-width="1.5" fill="none" marker-end="url(#al-out)" opacity=".4">
|
|
<line x1="60" y1="70" x2="95" y2="35"/>
|
|
</g>
|
|
<rect x="0" y="70" width="140" height="50" fill="#3a6b3e" stroke="#1f4e5a" stroke-width="1.5"/>
|
|
<!-- Baumsymbole -->
|
|
<g fill="#5a8a5e">
|
|
<polygon points="15,115 22,92 29,115"/>
|
|
<polygon points="42,115 50,88 58,115"/>
|
|
<polygon points="70,115 80,85 90,115"/>
|
|
<polygon points="100,115 108,90 116,115"/>
|
|
<polygon points="122,115 130,93 138,115"/>
|
|
</g>
|
|
<text x="70" y="140" font-size="24" font-weight="900" fill="#1f4e5a" text-anchor="middle">0,12</text>
|
|
<text x="70" y="158" font-size="9" fill="#3a6b3e" text-anchor="middle">12 % zurückgeworfen</text>
|
|
<rect x="10" y="175" width="120" height="8" fill="#dae8ec" rx="2"/>
|
|
<rect x="10" y="175" width="14" height="8" fill="#3a6b3e" rx="2"/>
|
|
</g>
|
|
|
|
<!-- Column 4: Ozean A=0.06 -->
|
|
<g transform="translate(560, 90)">
|
|
<text y="-10" font-size="12" font-weight="800" fill="#1f4e5a" text-anchor="middle" x="70">🌊 Ozean</text>
|
|
<line x1="10" y1="0" x2="60" y2="70" stroke="#e8833a" stroke-width="2.5" marker-end="url(#al-in)"/>
|
|
<g stroke="#f4c94e" stroke-width="1" fill="none" marker-end="url(#al-out)" opacity=".3">
|
|
<line x1="60" y1="70" x2="85" y2="45"/>
|
|
</g>
|
|
<rect x="0" y="70" width="140" height="50" fill="#1f4e5a" stroke="#1f4e5a" stroke-width="1.5"/>
|
|
<!-- Wellen -->
|
|
<g fill="none" stroke="#4a7c8a" stroke-width=".8" opacity=".5">
|
|
<path d="M 5 85 Q 20 82 35 85 Q 50 88 65 85 Q 80 82 95 85 Q 110 88 125 85 Q 135 83 138 85"/>
|
|
<path d="M 5 100 Q 20 97 35 100 Q 50 103 65 100 Q 80 97 95 100 Q 110 103 125 100 Q 135 98 138 100"/>
|
|
</g>
|
|
<text x="70" y="140" font-size="24" font-weight="900" fill="#1f4e5a" text-anchor="middle">0,06</text>
|
|
<text x="70" y="158" font-size="9" fill="#1f4e5a" text-anchor="middle">6 % zurückgeworfen</text>
|
|
<rect x="10" y="175" width="120" height="8" fill="#dae8ec" rx="2"/>
|
|
<rect x="10" y="175" width="7" height="8" fill="#1f4e5a" rx="2"/>
|
|
</g>
|
|
|
|
<!-- Column 5: Asphalt A=0.05 -->
|
|
<g transform="translate(720, 90)">
|
|
<text y="-10" font-size="12" font-weight="800" fill="#1f4e5a" text-anchor="middle" x="70">🛣 Asphalt</text>
|
|
<line x1="10" y1="0" x2="60" y2="70" stroke="#e8833a" stroke-width="2.5" marker-end="url(#al-in)"/>
|
|
<g stroke="#f4c94e" stroke-width="1" fill="none" marker-end="url(#al-out)" opacity=".25">
|
|
<line x1="60" y1="70" x2="80" y2="50"/>
|
|
</g>
|
|
<rect x="0" y="70" width="140" height="50" fill="#2a2a2a" stroke="#1f4e5a" stroke-width="1.5"/>
|
|
<!-- Straßenmarkierung -->
|
|
<g fill="#fff" opacity=".8">
|
|
<rect x="20" y="93" width="14" height="3"/>
|
|
<rect x="50" y="93" width="14" height="3"/>
|
|
<rect x="80" y="93" width="14" height="3"/>
|
|
<rect x="110" y="93" width="14" height="3"/>
|
|
</g>
|
|
<text x="70" y="140" font-size="24" font-weight="900" fill="#1f4e5a" text-anchor="middle">0,05</text>
|
|
<text x="70" y="158" font-size="9" fill="#2a2a2a" text-anchor="middle">5 % zurückgeworfen</text>
|
|
<rect x="10" y="175" width="120" height="8" fill="#dae8ec" rx="2"/>
|
|
<rect x="10" y="175" width="6" height="8" fill="#2a2a2a" rx="2"/>
|
|
</g>
|
|
|
|
<!-- Erklärung Rückkopplung -->
|
|
<g transform="translate(50, 310)">
|
|
<rect x="0" y="0" width="800" height="110" rx="8" fill="#fff" stroke="#dae8ec" stroke-width="1"/>
|
|
<text x="20" y="22" font-size="12" font-weight="800" fill="#1f4e5a">⚠ Warum das Klima betrifft: Die Eis-Albedo-Rückkopplung</text>
|
|
|
|
<text x="20" y="46" font-size="10" fill="#4a4a4a">1.</text>
|
|
<text x="38" y="46" font-size="10" fill="#4a4a4a">Das Klima wird wärmer → Meereis und Gletscher schmelzen.</text>
|
|
|
|
<text x="20" y="64" font-size="10" fill="#4a4a4a">2.</text>
|
|
<text x="38" y="64" font-size="10" fill="#4a4a4a">Statt weißem Eis (A=0,85) liegt nun dunkler Ozean (A=0,06) oder dunkler Boden unter der Sonne.</text>
|
|
|
|
<text x="20" y="82" font-size="10" fill="#4a4a4a">3.</text>
|
|
<text x="38" y="82" font-size="10" fill="#4a4a4a">Die Oberfläche absorbiert viel mehr Wärme → das Klima wird noch wärmer → mehr Eis schmilzt.</text>
|
|
|
|
<text x="20" y="100" font-size="10" fill="#c85c4a" font-weight="700">→ Eine sich selbst verstärkende Rückkopplung — einer der Gründe für den beschleunigten Klimawandel in der Arktis.</text>
|
|
</g>
|
|
</svg>
|