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

---
von: zentrale
an: klima
datum: 2026-04-17 13:20
status: gelesen
betrifft: 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):

```html
<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):**

```css
.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:**

```html
<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:
```javascript
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.