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
parent 003eeeb9f7
commit a425ce31e6
32 changed files with 6785 additions and 0 deletions
@@ -0,0 +1,139 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 500" font-family="Inter, system-ui, sans-serif" width="900" height="500">
+  <defs>
+    <marker id="th-arrow-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="th-arrow-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="#c85c4a"/>
+    </marker>
+    <marker id="th-arrow-esc" 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="#8a8a8a"/>
+    </marker>
+    <linearGradient id="th-space" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#0f2230"/>
+      <stop offset="1" stop-color="#1f4e5a"/>
+    </linearGradient>
+    <linearGradient id="th-atm" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#4a7c8a" stop-opacity=".18"/>
+      <stop offset="1" stop-color="#4a7c8a" stop-opacity=".45"/>
+    </linearGradient>
+    <linearGradient id="th-earth" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#5a8a5e"/>
+      <stop offset="1" stop-color="#3a6b3e"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Titel -->
+  <text x="450" y="30" font-size="16" font-weight="800" fill="#1f4e5a" text-anchor="middle">
+    Treibhauseffekt — Wie die Erde warm bleibt
+  </text>
+
+  <!-- Weltraum (schwarzer Hintergrund oben) -->
+  <rect x="0" y="55" width="900" height="90" fill="url(#th-space)"/>
+  <!-- Sterne -->
+  <g fill="#fff" opacity=".7">
+    <circle cx="80" cy="80" r="1"/><circle cx="220" cy="70" r=".8"/>
+    <circle cx="420" cy="95" r="1.2"/><circle cx="640" cy="75" r="1"/>
+    <circle cx="780" cy="90" r=".8"/><circle cx="160" cy="110" r=".7"/>
+    <circle cx="540" cy="115" r="1"/><circle cx="720" cy="120" r=".9"/>
+  </g>
+  <text x="880" y="75" font-size="10" fill="#dae8ec" text-anchor="end" opacity=".8">Weltraum</text>
+
+  <!-- Sonne oben links -->
+  <circle cx="110" cy="100" r="32" fill="#f4c94e"/>
+  <circle cx="110" cy="100" r="38" fill="none" stroke="#f4c94e" stroke-width="1.5" opacity=".5"/>
+  <circle cx="110" cy="100" r="46" fill="none" stroke="#f4c94e" stroke-width="1" opacity=".3"/>
+  <text x="110" y="104" font-size="13" font-weight="800" fill="#1f4e5a" text-anchor="middle">☀</text>
+  <text x="110" y="160" font-size="11" fill="#dae8ec" text-anchor="middle" font-weight="600">Sonne</text>
+
+  <!-- Atmosphäre -->
+  <rect x="0" y="145" width="900" height="100" fill="url(#th-atm)"/>
+  <line x1="0" y1="145" x2="900" y2="145" stroke="#4a7c8a" stroke-width="1" stroke-dasharray="4 3" opacity=".7"/>
+  <line x1="0" y1="245" x2="900" y2="245" stroke="#4a7c8a" stroke-width="1" stroke-dasharray="4 3" opacity=".5"/>
+  <text x="20" y="200" font-size="11" fill="#1f4e5a" font-weight="700">Atmosphäre</text>
+  <text x="20" y="215" font-size="9" fill="#4a7c8a">CO₂ · CH₄ · H₂O · N₂O</text>
+
+  <!-- Treibhausgas-Moleküle in der Atmosphäre -->
+  <g>
+    <circle cx="280" cy="180" r="8" fill="#c85c4a" opacity=".75"/>
+    <text x="280" y="184" font-size="8" font-weight="700" fill="#fff" text-anchor="middle">CO₂</text>
+    <circle cx="380" cy="210" r="8" fill="#c85c4a" opacity=".75"/>
+    <text x="380" y="214" font-size="8" font-weight="700" fill="#fff" text-anchor="middle">CO₂</text>
+    <circle cx="500" cy="175" r="8" fill="#e8833a" opacity=".75"/>
+    <text x="500" y="179" font-size="8" font-weight="700" fill="#fff" text-anchor="middle">CH₄</text>
+    <circle cx="620" cy="205" r="8" fill="#c85c4a" opacity=".75"/>
+    <text x="620" y="209" font-size="8" font-weight="700" fill="#fff" text-anchor="middle">CO₂</text>
+    <circle cx="740" cy="180" r="8" fill="#4a7c8a" opacity=".65"/>
+    <text x="740" y="184" font-size="7" font-weight="700" fill="#fff" text-anchor="middle">H₂O</text>
+  </g>
+
+  <!-- Erde/Boden -->
+  <rect x="0" y="385" width="900" height="115" fill="url(#th-earth)"/>
+  <!-- Bäume & Häuser -->
+  <g>
+    <polygon points="140,385 150,360 160,385" fill="#3a6b3e"/>
+    <rect x="148" y="385" width="4" height="10" fill="#6b4a2e"/>
+    <polygon points="220,385 233,358 246,385" fill="#3a6b3e"/>
+    <rect x="230" y="385" width="6" height="12" fill="#6b4a2e"/>
+    <rect x="400" y="360" width="28" height="25" fill="#e8d5b5" stroke="#4a7c8a" stroke-width="1"/>
+    <polygon points="398,361 414,348 430,361" fill="#c85c4a"/>
+    <rect x="410" y="370" width="6" height="15" fill="#4a7c8a"/>
+    <rect x="580" y="350" width="36" height="35" fill="#e8d5b5" stroke="#4a7c8a" stroke-width="1"/>
+    <polygon points="578,351 598,334 618,351" fill="#c85c4a"/>
+    <rect x="590" y="365" width="7" height="20" fill="#4a7c8a"/>
+    <polygon points="720,385 735,356 750,385" fill="#3a6b3e"/>
+    <rect x="731" y="385" width="6" height="10" fill="#6b4a2e"/>
+  </g>
+  <text x="20" y="425" font-size="11" fill="#fff" font-weight="700">Erdoberfläche</text>
+  <text x="20" y="441" font-size="9" fill="#dceadd">absorbiert Licht · strahlt Wärme ab</text>
+
+  <!-- ========= STRAHLENGANG ========= -->
+  <!-- Einkommende Sonnenstrahlung (gelb/orange) -->
+  <g stroke="#e8833a" stroke-width="2" fill="none" marker-end="url(#th-arrow-in)" opacity=".9">
+    <line x1="145" y1="125" x2="270" y2="370"/>
+    <line x1="170" y1="130" x2="345" y2="370"/>
+    <line x1="195" y1="135" x2="425" y2="370"/>
+  </g>
+  <text x="210" y="280" font-size="10" fill="#e8833a" font-weight="700" transform="rotate(58 210 280)">Sonnenlicht (kurzwellig)</text>
+
+  <!-- Abgestrahlte Wärme, die teilweise zurückgeworfen wird (rot) -->
+  <g stroke="#c85c4a" stroke-width="2" fill="none" marker-end="url(#th-arrow-out)" opacity=".85">
+    <!-- Nach oben vom Boden -->
+    <line x1="470" y1="370" x2="500" y2="175"/>
+    <line x1="610" y1="370" x2="620" y2="205"/>
+    <line x1="350" y1="370" x2="380" y2="210"/>
+  </g>
+
+  <!-- Rückreflexion von Treibhausgasen wieder zurück zur Erde -->
+  <g stroke="#c85c4a" stroke-width="2" fill="none" marker-end="url(#th-arrow-out)" opacity=".8" stroke-dasharray="3 2">
+    <path d="M 500 175 Q 540 270 550 370" />
+    <path d="M 380 210 Q 360 290 410 370"/>
+    <path d="M 620 205 Q 680 285 700 370"/>
+  </g>
+  <text x="550" y="330" font-size="10" fill="#c85c4a" font-weight="700">Wärmestrahlung zurück zur Erde</text>
+
+  <!-- Etwas Wärme entweicht ins All (grau) -->
+  <g stroke="#8a8a8a" stroke-width="1.5" fill="none" marker-end="url(#th-arrow-esc)" opacity=".8" stroke-dasharray="2 2">
+    <line x1="800" y1="370" x2="840" y2="80"/>
+  </g>
+  <text x="840" y="220" font-size="9" fill="#8a8a8a" text-anchor="end">Rest entweicht</text>
+
+  <!-- ========= VERGLEICHSBOX ========= -->
+  <g transform="translate(0, 460)">
+    <rect x="0" y="0" width="900" height="40" fill="#fff" stroke="#dae8ec" stroke-width="1"/>
+    <text x="20" y="16" font-size="10" fill="#1f4e5a" font-weight="800">Ohne Atmosphäre:</text>
+    <text x="165" y="16" font-size="10" fill="#c85c4a" font-weight="700">−18 °C</text>
+    <text x="220" y="16" font-size="10" fill="#8a8a8a">(lebensfeindlich kalt)</text>
+
+    <text x="400" y="16" font-size="10" fill="#1f4e5a" font-weight="800">Mit natürlichem Treibhauseffekt:</text>
+    <text x="615" y="16" font-size="10" fill="#5a8a5e" font-weight="700">+15 °C</text>
+    <text x="660" y="16" font-size="10" fill="#8a8a8a">(Lebensraum Erde)</text>
+
+    <text x="20" y="32" font-size="10" fill="#1f4e5a" font-weight="800">Venus (extremer THE):</text>
+    <text x="165" y="32" font-size="10" fill="#c85c4a" font-weight="700">+465 °C</text>
+
+    <text x="400" y="32" font-size="10" fill="#1f4e5a" font-weight="800">Erde seit 1850 (zusätzlich):</text>
+    <text x="615" y="32" font-size="10" fill="#e8833a" font-weight="700">+1,2 °C</text>
+    <text x="660" y="32" font-size="10" fill="#8a8a8a">(vom Menschen verursacht)</text>
+  </g>
+</svg>