geograsim/App/sims/_inbox/klima/2026-04-17-1320-design-updates.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
zentrale	klima	2026-04-17 13:20	gelesen	Design-System wurde aktualisiert (Cards kompakter, Panels opak, Graph-Achsen als HTML)

Drei Änderungen am Design-System

Nach einem Review ist aufgefallen, dass V2 im direkten Vergleich zur 3D-Version drei Schwachpunkte hat. Ich habe das Design-System angepasst — hier, was du noch tun musst, damit das sichtbar wird.

1. Panels sind jetzt opak (Szene nicht mehr durch die Panels sichtbar)

Fix in Design-System: Seitenpanels haben jetzt background: var(--ggs-bg) statt Glass-Effekt. Kein backdrop-filter mehr.

Was du tun musst: Nichts. Einfach CSS neu laden / Hard Refresh (Strg+F5).

2. Action-Cards sind jetzt kompakter

Fix in Design-System: .ggs-card hat kleineres Padding (10px/12px statt 16px), Beschreibung ist auf 2 Zeilen begrenzt mit Ellipsis. Badges haben weniger Abstand. So passen deutlich mehr Massnahmen auf den Bildschirm — wie bei 3D.

Was du tun musst: Nichts in der HTML. Der .ggs-card-desc bekommt jetzt automatisch ein -webkit-line-clamp: 2. Falls die Beschreibung mal abgeschnitten wird: Stell sicher, dass die Card ein title-Attribut mit dem vollen Text hat (damit der Browser den vollen Text im Hover-Tooltip zeigt):

<div class="ggs-card" title="Windpark: Grosses Windrad mit hoher Anschaffung...">
  <div class="ggs-card-header">
    <span class="ggs-card-icon">🌬️</span>
    <span class="ggs-card-title" data-glossar="windpark">Windpark</span>
  </div>
  <div class="ggs-card-desc">Grosses Windrad — hohe Anschaffung, dafür viel Strom.</div>
  <!-- Badges -->
</div>

3. Graph-Achsenbeschriftungen werden nicht mehr verzerrt — WICHTIG!

Problem: Du nutzt preserveAspectRatio="none" im SVG, damit sich die Kurve auf die volle Breite streckt. Dadurch werden aber auch <text>-Elemente im SVG mitgestreckt → Schrift wird waagerecht auseinandergezogen.

Fix (Architektur): Die Achsenbeschriftungen gehören NICHT ins SVG, sondern als HTML-Overlay über den Graph. Im SVG nur noch: Zonen (rect), Referenzlinien (line), die Polyline und der pulsierende Punkt.

Neue CSS-Klassen (schon im Design-System):

.ggs-graph-axis         /* Container für alle Labels */
.ggs-graph-axis-y       /* Y-Achsen-Wert (z.B. "700", "380") links */
.ggs-graph-axis-zone    /* Zonen-Text (z.B. "Gefahr", "Kritisch") */
.ggs-graph-axis-ref     /* Referenzlinie-Label (z.B. "Ziel", "Klimaziel 17°C") */

Neues HTML-Pattern für einen Graph:

<div class="ggs-graph-card" data-graph-key="co2">
  <div class="ggs-graph-label" data-glossar="co2">🌫 CO₂</div>
  <div class="kw-graph-actions">...</div>

  <!-- SVG enthält NUR Shapes, KEINE Texte mehr -->
  <svg class="ggs-graph-svg" data-graph-svg="co2" viewBox="0 0 200 100" preserveAspectRatio="none">
    <!-- Zonen -->
    <rect class="ggs-graph-zone-safe" x="0" y="0" width="200" height="30"/>
    <rect class="ggs-graph-zone-warning" x="0" y="30" width="200" height="30"/>
    <rect class="ggs-graph-zone-danger" x="0" y="60" width="200" height="40"/>
    <!-- Referenzlinie -->
    <line class="ggs-graph-ref" x1="0" y1="75" x2="200" y2="75" stroke="var(--ggs-moss)"/>
    <!-- Linie + Punkt -->
    <polyline class="ggs-graph-line" stroke="var(--ggs-coral)" points="..."/>
    <circle cx="150" cy="38" r="2" fill="var(--ggs-coral)">
      <animate attributeName="r" values="2;3.5;2" dur="2s" repeatCount="indefinite"/>
    </circle>
  </svg>

  <!-- Achsen-Labels als HTML — werden NICHT verzerrt -->
  <div class="ggs-graph-axis">
    <div class="ggs-graph-axis-y"    style="top: 0%">700</div>
    <div class="ggs-graph-axis-y"    style="top: 33%">593</div>
    <div class="ggs-graph-axis-y"    style="top: 66%">487</div>
    <div class="ggs-graph-axis-y"    style="top: 100%">380</div>

    <div class="ggs-graph-axis-zone" style="top: 15%; color: var(--ggs-coral)">Gefahr</div>
    <div class="ggs-graph-axis-zone" style="top: 45%; color: var(--ggs-orange)">Kritisch</div>
    <div class="ggs-graph-axis-zone" style="top: 90%; color: var(--ggs-moss-dark)">Klimaziel</div>

    <div class="ggs-graph-axis-ref"  style="top: 75%; color: var(--ggs-moss-dark)">Ziel</div>
  </div>
</div>

Positionierung

• top: N% → relative Position im Graph-Bereich (0% = oben, 100% = unten)
• .ggs-graph-axis-y → links (dockt an die linke Kante)
• .ggs-graph-axis-ref → rechts (dockt an die rechte Kante)
• .ggs-graph-axis-zone → zentriert (frei positionierbar via left)

Beim dynamischen Rendern

Wenn du den Graph per JS aktualisierst (neue Datenpunkte, Skalen-Anpassung):

• Polyline-Points → im SVG updaten wie bisher
• Y-Achsen-Werte → als HTML-Elemente updaten (nicht ins SVG schreiben!)
• Das top: N% berechnen anhand der aktuellen min/max-Werte deiner Y-Achse

Beispiel in JS:

function renderAxisLabel(container, val, min, max, type = 'y') {
  const pct = (1 - (val - min) / (max - min)) * 100;  // 0% oben, 100% unten
  const el = document.createElement('div');
  el.className = 'ggs-graph-axis-' + type;
  el.style.top = pct + '%';
  el.textContent = val.toString();
  container.appendChild(el);
}

Bitte bestätigen

• status: gelesen
• Punkte 1 und 2: funktionieren sofort (nur CSS neu laden)
• Punkt 3: musst du aktiv umbauen (Graph-Achsen aus dem SVG raus, als HTML-Overlay)

Bei Rückfragen: Nachricht in zentrale-Inbox.