PMG2526 9/Jonathan

Wiki-Quelltext dieser Seite.

<!--
KI & Nachhaltigkeit — Interaktive One-Page-Vorlage
Date: 2025
Single-file HTML template. Kopiere den Inhalt in eine Datei "index.html" und öffne sie im Browser.
Features:
- Interaktive Navigation (klick / keyboard)
- Smooth transitions
- Visuelle Karten zu Themen: Energie, Landwirtschaft, Mobilität, Industrie, Abfall, Wasser, Klima
- Responsive & barrierefreundlich
- Keine externen Abhängigkeiten
-->

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>KI & Nachhaltigkeit — Interaktiv</title>
  <meta name="description" content="Interaktive Übersicht: Wie KI zur Nachhaltigkeit beiträgt. Klick durch die Themen." />
  <style>
    :root{
      --bg:#0f1724; --card:#0b1220; --muted:#98a3b3; --accent:#6ee7b7; --glass:rgba(255,255,255,0.03);
      --max-w:1100px; --radius:14px;
      --ease:cubic-bezier(.2,.9,.2,1);
      --shadow: 0 8px 30px rgba(2,6,23,0.6);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,#071023 0%, #071827 40%, #071827 100%); color:#e6eef6; -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale; padding:32px; display:flex; justify-content:center; align-items:flex-start;
    }
    .wrap{width:100%; max-width:var(--max-w)}

    header{
      display:flex; gap:16px; align-items:center; margin-bottom:20px;
    }
    .brand{
      display:flex; gap:12px; align-items:center;
    }
    .logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#60a5fa);display:grid;place-items:center;color:#062024;font-weight:700}
    h1{font-size:20px;margin:0}
    p.lead{margin:0;color:var(--muted);font-size:13px}

    .panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}

    .layout{display:grid; grid-template-columns: 280px 1fr; gap:20px; align-items:start}

    /* NAV */
    nav{position:sticky; top:32px}
    .nav-list{display:flex;flex-direction:column;gap:8px}
    .nav-btn{
      display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; cursor:pointer; border:1px solid transparent; background:var(--glass);
      transition:all 220ms var(--ease); color:var(--muted); font-size:14px; text-align:left
    }
    .nav-btn:hover{transform:translateX(6px); color:#e6f9f0}
    .nav-btn.active{background:linear-gradient(90deg, rgba(110,231,183,0.06), rgba(96,165,250,0.03)); color:var(--accent); border-color:rgba(110,231,183,0.06)}

    .content{padding:18px}
    .hero{display:flex; justify-content:space-between; gap:20px; align-items:center}
    .intro{max-width:640px}
    .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px}

    .card{background:rgba(255,255,255,0.02); padding:14px; border-radius:12px; min-height:120px; transition:transform 300ms var(--ease), box-shadow 300ms var(--ease); border:1px solid rgba(255,255,255,0.02)}
    .card:hover{transform:translateY(-6px); box-shadow: 0 10px 30px rgba(2,6,23,0.7)}
    .card h3{margin:6px 0 8px 0}
    .muted{color:var(--muted); font-size:13px}

    /* Topic view */
    .topic{display:none; opacity:0; transform:translateY(12px); transition:all 340ms var(--ease)}
    .topic.active{display:block; opacity:1; transform:none}
    .topic-grid{display:grid; grid-template-columns: 1fr 320px; gap:18px}
    .topic-visual{background:linear-gradient(135deg, rgba(96,165,250,0.08), rgba(110,231,183,0.04)); border-radius:12px; padding:18px}

    .pill{display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; color:#032; background:rgba(255,255,255,0.9)}

    footer{margin-top:18px; color:var(--muted); font-size:13px}

    /* Responsive */
    @media (max-width:900px){
      .layout{grid-template-columns:1fr;}
      nav{position:relative}
      .topic-grid{grid-template-columns:1fr}
      .hero{flex-direction:column; align-items:flex-start}
    }

    /* small helpers */
    .center{display:grid; place-items:center}
    .kpi{font-size:28px;font-weight:700}
    .small{font-size:13px}
    .icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.03);display:grid;place-items:center}

    /* focus for accessibility */
    .nav-btn:focus{outline:3px solid rgba(96,165,250,0.12); outline-offset:3px}
  </style>
</head>
<body>
  <div class="wrap">
    <header class="panel" role="banner">
      <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
        <div class="brand">
          <div class="logo">KI</div>
          <div>
            <h1>KI & Nachhaltigkeit</h1>
            <p class="lead">Interaktive Übersicht — klicke ein Thema an, um Details zu sehen.</p>
          </div>
        </div>
        <div style="text-align:right">
          <div class="pill">Kurz & Anschaulich</div>
        </div>
      </div>
    </header>

    <main class="layout" role="main">
      <nav class="panel" aria-label="Hauptnavigation">
        <div class="nav-list" id="navList">
          <button class="nav-btn active" data-target="overview">Übersicht</button>
          <button class="nav-btn" data-target="energie">Energie</button>
          <button class="nav-btn" data-target="landwirtschaft">Landwirtschaft</button>
          <button class="nav-btn" data-target="mobilitaet">Mobilität</button>
          <button class="nav-btn" data-target="industrie">Industrie</button>
          <button class="nav-btn" data-target="abfall">Abfall & Kreislauf</button>
          <button class="nav-btn" data-target="wasser">Wasser</button>
          <button class="nav-btn" data-target="klima">Klima & Forschung</button>
        </div>

        <hr style="margin:12px 0;border:none;border-top:1px solid rgba(255,255,255,0.02)">
        <div class="muted small">Tipp: Du kannst auch mit den Pfeiltasten ← → durch die Themen wechseln.</div>
      </nav>

      <section class="panel content" id="contentArea">
        <!-- Overview -->
        <article id="overview" class="topic active" aria-labelledby="overviewTitle">
          <div class="hero">
            <div class="intro">
              <h2 id="overviewTitle">Wie KI Nachhaltigkeit stärkt</h2>
              <p class="muted">KI analysiert Daten, optimiert Systeme und unterstützt Entscheidungen — entlang von Energie, Landwirtschaft, Verkehr, Industrie, Abfall und Wasser. Unten findest du kurze Einstiege pro Bereich; klicke eines an für Details.</p>

              <div class="cards" role="list">
                <div class="card" role="listitem">
                  <div style="display:flex;align-items:center;gap:10px"><div class="icon">⚡</div><h3>Energie</h3></div>
                  <p class="muted small">Integration erneuerbarer Energien, Lastmanagement, Smart Grids.</p>
                </div>
                <div class="card" role="listitem">
                  <div style="display:flex;align-items:center;gap:10px"><div class="icon">🌾</div><h3>Landwirtschaft</h3></div>
                  <p class="muted small">Präzisionslandwirtschaft, Wassersparen, Schädlingsfrüherkennung.</p>
                </div>
                <div class="card" role="listitem">
                  <div style="display:flex;align-items:center;gap:10px"><div class="icon">🚗</div><h3>Mobilität</h3></div>
                  <p class="muted small">Verkehrsoptimierung, Routenplanung, autonome Systeme.</p>
                </div>
                <div class="card" role="listitem">
                  <div style="display:flex;align-items:center;gap:10px"><div class="icon">🏭</div><h3>Industrie</h3></div>
                  <p class="muted small">Predictive Maintenance, Prozessoptimierung, Materialeffizienz.</p>
                </div>
              </div>
            </div>

            <div style="width:320px" class="center">
              <div style="width:280px;text-align:center">
                <div class="kpi">KI + Nachhaltigkeit</div>
                <div class="muted" style="margin-top:6px">Interaktive Kurzübersicht</div>
                <div style="margin-top:14px" class="muted small">Klicke links ein Thema an oder nutze die Pfeiltasten.</div>
              </div>
            </div>
          </div>
        </article>

        <!-- Energie -->
        <article id="energie" class="topic" aria-labelledby="energieTitle">
          <div class="topic-grid">
            <div>
              <h2 id="energieTitle">Energie</h2>
              <p class="muted">KI ermöglicht die Integration volatiler erneuerbarer Energien und reduziert Verluste durch intelligent gesteuerte Netze.</p>

              <ul>
                <li><strong>Smart Grids:</strong> Prognosen von Erzeugung & Nachfrage, automatische Lastverschiebung.</li>
                <li><strong>Optimierung von Speichern:</strong> Steuerung von Batteriespeichern und Flexibilitätsreserven.</li>
                <li><strong>Gebäudeenergie:</strong> KI-basierte Regelung senkt Verbrauch von Heizung/Kühlung (10–30 %).</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">Regionale Netzbetreiber nutzen Vorhersagemodelle, um Solareinspeisungen vorherzusagen und so teure Regelenergien zu vermeiden.</p>
            </div>

            <aside class="topic-visual">
              <div style="display:flex;justify-content:space-between;align-items:center">
                <div>
                  <div class="muted small">Energieeffizienz</div>
                  <div class="kpi">+15%</div>
                  <div class="muted small">durch KI-Optimierung (Beispiel)</div>
                </div>
                <div style="font-size:34px">⚡</div>
              </div>
              <hr style="margin:12px 0;border:none;border-top:1px solid rgba(255,255,255,0.02)">
              <div class="small muted">Techniken: Zeitreihenmodelle, Reinforcement Learning, Edge-ML in Sensoren.</div>
            </aside>
          </div>
        </article>

        <!-- Landwirtschaft -->
        <article id="landwirtschaft" class="topic" aria-labelledby="landwirtschaftTitle">
          <div class="topic-grid">
            <div>
              <h2 id="landwirtschaftTitle">Landwirtschaft</h2>
              <p class="muted">Präzisionslandwirtschaft reduziert Inputs und erhöht Erträge durch datengestützte Entscheidungen.</p>

              <ul>
                <li><strong>Ertragsprognosen:</strong> Optimale Aussaat- und Erntezeitpunkte.</li>
                <li><strong>Targeted Spraying:</strong> Lokaler Einsatz von Pestiziden statt Flächenspritzung.</li>
                <li><strong>Wasseroptimierung:</strong> Sensor-gestützte Bewässerung reduziert Verbrauch stark.</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">Drohnen und Satellitendaten liefern Befalls- und Bodeninformationen, die KI zu Handlungsanweisungen verknüpft.</p>
            </div>

            <aside class="topic-visual">
              <div class="muted small">Wasser & Inputs</div>
              <div class="kpi">-30%</div>
              <div class="muted small">bei Dünger/Pestiziden (potentiell)</div>
            </aside>
          </div>
        </article>

        <!-- Mobilität -->
        <article id="mobilitaet" class="topic" aria-labelledby="mobilitaetTitle">
          <div class="topic-grid">
            <div>
              <h2 id="mobilitaetTitle">Mobilität</h2>
              <p class="muted">KI optimiert Verkehrsflüsse, verbessert Routenplanung und trägt zu effizienterer Mobilität bei.</p>

              <ul>
                <li><strong>Verkehrsmanagement:</strong> Adaptive Ampeln & Stauvorhersage.</li>
                <li><strong>Routenoptimierung:</strong> Reduzierung von Leerfahrten in Logistik.</li>
                <li><strong>Shared Mobility:</strong> Bessere Auslastung durch Nachfrageprognosen.</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">Städte setzen KI ein, um Ampelzyklen dynamisch zu steuern und Busspuren effizienter zu nutzen.</p>
            </div>

            <aside class="topic-visual">
              <div class="muted small">Emissionen</div>
              <div class="kpi">-12%</div>
              <div class="muted small">durch Verkehrsoptimierung (Beispiel)</div>
            </aside>
          </div>
        </article>

        <!-- Industrie -->
        <article id="industrie" class="topic" aria-labelledby="industrieTitle">
          <div class="topic-grid">
            <div>
              <h2 id="industrieTitle">Industrie</h2>
              <p class="muted">In der Produktion reduziert KI Ausschuss, verlängert Maschinenlebensdauer und spart Energie.</p>

              <ul>
                <li><strong>Predictive Maintenance:</strong> Verhindert Ausfälle und spart Ressourcen.</li>
                <li><strong>Prozessoptimierung:</strong> Effizientere Steuerung von Fertigungslinien.</li>
                <li><strong>Materialeffizienz:</strong> Reduktion von Overuse und Abfall.</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">Fabriken nutzen KI, um Wartungsintervalle datenbasiert zu planen und dadurch Stillstandzeiten zu minimieren.</p>
            </div>

            <aside class="topic-visual">
              <div class="muted small">Rohstoffnutzung</div>
              <div class="kpi">-18%</div>
              <div class="muted small">durch Prozessanalyse</div>
            </aside>
          </div>
        </article>

        <!-- Abfall -->
        <article id="abfall" class="topic" aria-labelledby="abfallTitle">
          <div class="topic-grid">
            <div>
              <h2 id="abfallTitle">Abfall & Kreislaufwirtschaft</h2>
              <p class="muted">KI verbessert Sortierung, Vorhersage und Recyclinglogistik — Grundlage für funktionierende Kreisläufe.</p>

              <ul>
                <li><strong>Bildbasierte Sortierung:</strong> Erkennung und Trennung von Materialien.</li>
                <li><strong>Vorhersage:</strong> Prognose von Abfallmengen für effizientere Sammlung.</li>
                <li><strong>Optimierung:</strong> Rückführungslogistik für Recyclables verbessern.</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">Sortieranlagen nutzen Computer Vision, um Kunststoffarten zu unterscheiden und höhere Recyclingquoten zu erzielen.</p>
            </div>

            <aside class="topic-visual">
              <div class="muted small">Recyclingquote</div>
              <div class="kpi">+22%</div>
              <div class="muted small">durch bessere Sortierung (Beispiel)</div>
            </aside>
          </div>
        </article>

        <!-- Wasser -->
        <article id="wasser" class="topic" aria-labelledby="wasserTitle">
          <div class="topic-grid">
            <div>
              <h2 id="wasserTitle">Wasser</h2>
              <p class="muted">KI erkennt Lecks, optimiert Verteilung und spart in Bewässerungssystemen große Mengen an Frischwasser.</p>

              <ul>
                <li><strong>Leckerkennung:</strong> Analyse von Druckdaten und Sensormustern.</li>
                <li><strong>Verbrauchsprognose:</strong> Bessere Planung und Verteilung.</li>
                <li><strong>Smart Irrigation:</strong> Bedarfsorientierte Bewässerung in Landwirtschaft/Städten.</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">Versorger nutzen ML-Modelle, um ungewöhnliche Verbrauchsmuster zu entdecken, oft ein Hinweis auf Leckagen.</p>
            </div>

            <aside class="topic-visual">
              <div class="muted small">Wassereinsparung</div>
              <div class="kpi">-25%</div>
              <div class="muted small">durch smartes Bewässerungsmanagement (Potenzial)</div>
            </aside>
          </div>
        </article>

        <!-- Klima -->
        <article id="klima" class="topic" aria-labelledby="klimaTitle">
          <div class="topic-grid">
            <div>
              <h2 id="klimaTitle">Klima & Forschung</h2>
              <p class="muted">KI beschleunigt Forschung, hilft beim Monitoring von Umweltrisiken und verbessert Klimamodelle.</p>

              <ul>
                <li><strong>Klimamodelle:</strong> Beschleunigung komplexer Simulationen.</li>
                <li><strong>Monitoring:</strong> Satellitendaten für Abholzung, Eisschmelze, etc.</li>
                <li><strong>Frühwarnsysteme:</strong> Besserer Schutz vor Extremereignissen.</li>
              </ul>

              <h3>Praxis-Beispiel</h3>
              <p class="muted">KI-gestützte Analyse von Satellitenbildern liefert schnellere Insights zu Umweltveränderungen.</p>
            </div>

            <aside class="topic-visual">
              <div class="muted small">Reaktionszeit</div>
              <div class="kpi">+40%</div>
              <div class="muted small">schnellere Erkennung kritischer Ereignisse (Beispiel)</div>
            </aside>
          </div>
        </article>

        <footer>
          <div class="muted">Erstellt als Template — passe Texte, Zahlen und Beispiele an deine Zielgruppe an.</div>
        </footer>
      </section>
    </main>
  </div>

  <script>
    // Navigation logic
    const navButtons = Array.from(document.querySelectorAll('.nav-btn'));
    const topics = Array.from(document.querySelectorAll('.topic'));
    let currentIndex = 0;

    function showTopic(id){
      topics.forEach(t=>{
        if(t.id === id){ t.classList.add('active'); } else { t.classList.remove('active'); }
      });
      navButtons.forEach(b=> b.classList.toggle('active', b.dataset.target === id));
      currentIndex = topics.findIndex(t => t.id === id);
      // update URL hash without scrolling
      history.replaceState(null, '', '#'+id);
      // focus heading for accessibility
      const heading = document.querySelector('#'+id+' h2');
      if(heading) heading.setAttribute('tabindex','-1');
      if(heading) heading.focus();
    }

    navButtons.forEach(btn => {
      btn.addEventListener('click', ()=> showTopic(btn.dataset.target));
      btn.addEventListener('keydown', (e)=>{ if(e.key === 'Enter') showTopic(btn.dataset.target); });
    });

    // keyboard left/right
    window.addEventListener('keydown', (e)=>{
      if(e.key === 'ArrowRight') nextTopic();
      if(e.key === 'ArrowLeft') prevTopic();
    });

    function nextTopic(){
      const next = (currentIndex + 1) % topics.length;
      showTopic(topics[next].id);
    }
    function prevTopic(){
      const prev = (currentIndex - 1 + topics.length) % topics.length;
      showTopic(topics[prev].id);
    }

    // on load, check hash
    window.addEventListener('load', ()=>{
      const hash = location.hash.replace('#','');
      if(hash && topics.some(t=>t.id===hash)){
        showTopic(hash);
      } else {
        showTopic('overview');
      }
    });

    // Accessibility: allow nav list to be focusable
    document.getElementById('navList').setAttribute('role','navigation');
  </script>
</body>
</html>