/* Hero: Namensleiste und H1 laufen über die volle Breite (30.10.2026), damit
   die Überschrift auf breiten Bildschirmen zweizeilig bleibt. Darunter
   zweispaltig: Text links, Kurve aus dem Film rechts. */
@media (min-width: 901px) { .hero-c .hero-kopf h1 { margin-bottom: var(--sp-4); } }
.hero-c .hero-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-5); align-items: center; }
.hero-c .lead { max-width: 52ch; }
.kurve { margin: 0; }
.kurve svg { display: block; width: 100%; height: auto; max-width: 480px; margin-left: auto; overflow: visible; }
.kurve .achse { stroke: var(--silber-a); stroke-width: 1; }
.kurve .achse-text { font-family: var(--sans); font-size: 13px; fill: var(--text-mute); }
.kurve .linie { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.kurve .linie--blau { stroke: var(--blau); }
.kurve .linie--gruen { stroke: var(--gruen); }
.kurve .punkt--blau { fill: var(--blau); }
.kurve .punkt--gruen { fill: var(--gruen); }
.kurve .flaeche { fill: url(#schraffur); }
.kurve .flaeche-text { font-family: var(--sans); font-size: 16px; font-weight: 500; fill: var(--text); }
.kurve figcaption { max-width: 480px; margin: var(--sp-2) 0 0 auto; display: grid; gap: 6px; font-size: var(--fs-md); color: var(--text-mute); }
.kurve figcaption span { display: flex; align-items: flex-start; gap: 10px; }
.kurve figcaption span::before { content: ""; flex: 0 0 22px; height: 3px; margin-top: 0.7em; border-radius: 2px; background: currentColor; }
.kurve .legende--blau::before { background: var(--blau); }
.kurve .legende--gruen::before { background: var(--gruen); }
/* Einmaliger Aufbau, rund 3 Sekunden, sobald die Grafik sichtbar ist. Danach Standbild.
   Ohne Ton, keine Schleife. Ohne JavaScript oder bei "Bewegung reduzieren": sofort Standbild. */
.kurve.wartet .linie { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kurve.wartet .punkt, .kurve.wartet .flaeche, .kurve.wartet .flaeche-text { opacity: 0; }
.kurve.laeuft .linie { animation: kurve-zeichnen 1.8s ease-out 0.2s forwards; }
.kurve.laeuft .punkt, .kurve.laeuft .flaeche, .kurve.laeuft .flaeche-text { animation: kurve-einblenden 0.6s ease-out forwards; }
.kurve.laeuft .punkt { animation-delay: 1.9s; }
.kurve.laeuft .flaeche { animation-delay: 2.0s; }
.kurve.laeuft .flaeche-text { animation-delay: 2.4s; }
@keyframes kurve-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes kurve-einblenden { to { opacity: 1; } }
@media (max-width: 900px) {
  .hero-c .hero-raster { grid-template-columns: 1fr; gap: var(--sp-4); }
  .kurve svg, .kurve figcaption { margin-left: 0; }
}