/* Gefahren-Diagramme im Stil technischer Messzeichnungen: Profilschnitte mit
   Bemaßung, Lastkurven, Schwellenlinien — die Sprache, in der Netzbetreiber
   ihre Unterlagen lesen. Keine figürlichen Illustrationen.
   Animation = der Messwert entwickelt sich und überschreitet die Schwelle. */
.hz-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px }
@media (max-width:900px){ .hz-grid { grid-template-columns:1fr } }

.hz {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .4s, transform .4s cubic-bezier(.16,1,.3,1);
}
.hz:hover { border-color:rgba(192,68,192,.45); transform:translateY(-3px) }
.hz-buehne {
  position:relative; width:100%; aspect-ratio:400/232; max-height:270px; overflow:hidden;
  background:#080D18;
  /* feines technisches Raster (Millimeterpapier-Anmutung) */
  background-image:
    linear-gradient(rgba(143,160,192,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,160,192,.05) 1px, transparent 1px);
  background-size:22px 22px;
}
.hz-buehne svg { width:100%; height:100%; display:block }
.hz-txt { padding:20px 22px 24px; border-top:1px solid var(--line) }
.hz-txt h3 { font-size:17.5px; margin-bottom:7px }
.hz-txt p { font-size:13.6px; color:var(--mut); line-height:1.6 }
.hz-mess {
  display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:11.5px;
  color:var(--accent); background:rgba(192,68,192,.10); border:1px solid rgba(192,68,192,.28);
  border-radius:99px; padding:5px 13px; font-weight:600;
}

/* ---- technische Grundelemente ---- */
.hz .ax     { stroke:#3A4A66; stroke-width:1 }
.hz .grid2  { stroke:#22304A; stroke-width:.7; stroke-dasharray:2 4 }
.hz .struct { stroke:#93A6C4; stroke-width:1.5; fill:none }
.hz .cond   { stroke:#AEEA00; stroke-width:1.7; fill:none }
.hz .obj    { stroke:#4C8F63; stroke-width:1.3; fill:rgba(76,143,99,.15) }
.hz .dim    { stroke:#C044C0; stroke-width:.9 }
.hz .lim    { stroke:#FF5252; stroke-width:1.1; stroke-dasharray:5 3 }
.hz .curve  { stroke:#4FC3F7; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round }
.hz .t-ax   { fill:#5E7093; font-size:8.5px; font-family:'IBM Plex Mono',ui-monospace,monospace }
.hz .t-lab  { fill:#93A6C4; font-size:9.5px }
.hz .t-dim  { fill:#C044C0; font-size:10.5px; font-weight:700; font-family:'IBM Plex Mono',ui-monospace,monospace }
.hz .t-lim  { fill:#FF5252; font-size:9px; font-weight:700; letter-spacing:.03em }
.hz .t-tit  { fill:#8FA0C0; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase }

/* ===== 1 · Vegetation: Profilschnitt, Höhe wächst, Fallradius schneidet die Achse ===== */
.hz-veg .baumkontur { transform-origin:103px 190px }
.laeuft .hz-veg .baumkontur { animation:vegHoehe 9s cubic-bezier(.45,0,.55,1) infinite }
@keyframes vegHoehe { 0%,6% { transform:scaleY(.5) } 46%,100% { transform:scaleY(1) } }
.hz-veg .radius { stroke-dasharray:200; stroke-dashoffset:200 }
.laeuft .hz-veg .radius { animation:radiusZieht 9s ease-in-out infinite }
@keyframes radiusZieht { 0%,50% { stroke-dashoffset:200 } 76%,100% { stroke-dashoffset:0 } }
.hz-veg .treffer { opacity:0 }
.laeuft .hz-veg .treffer { animation:trefferAuf 9s ease-in-out infinite }
@keyframes trefferAuf { 0%,76% { opacity:0 } 82% { opacity:1 } 89% { opacity:.45 } 95%,100% { opacity:1 } }
.hz-veg .mess { opacity:0 }
.laeuft .hz-veg .mess { animation:messAuf 9s ease-in-out infinite }
@keyframes messAuf { 0%,38% { opacity:0 } 50%,100% { opacity:1 } }

/* ===== 2 · Eislast: Seilquerschnitt + Lastkurve gegen Bemessungslast ===== */
.laeuft .hz-eis .mantel { animation:mantelWaechst 9s cubic-bezier(.4,0,.5,1) infinite }
@keyframes mantelWaechst { 0%,5% { r:7 } 64%,100% { r:21 } }
.hz-eis .lastkurve { stroke-dasharray:400; stroke-dashoffset:400 }
.laeuft .hz-eis .lastkurve { animation:kurveZieht 9s cubic-bezier(.4,0,.5,1) infinite }
@keyframes kurveZieht { 0%,5% { stroke-dashoffset:400 } 64%,100% { stroke-dashoffset:0 } }
.hz-eis .ueber { opacity:0 }
.laeuft .hz-eis .ueber { animation:ueberAuf 9s ease-in-out infinite }
@keyframes ueberAuf { 0%,58% { opacity:0 } 70%,100% { opacity:1 } }

/* ===== 3 · Hochwasser: Geländeschnitt, Wasserspiegel steigt bis zur Station ===== */
.hz-flut .wsp { transform:translateY(44px) }
.laeuft .hz-flut .wsp { animation:wspSteigt 9s cubic-bezier(.4,0,.5,1) infinite }
@keyframes wspSteigt { 0%,6% { transform:translateY(44px) } 62%,100% { transform:translateY(0) } }
.hz-flut .tiefe { opacity:0 }
.laeuft .hz-flut .tiefe { animation:tiefeAuf 9s ease-in-out infinite }
@keyframes tiefeAuf { 0%,54% { opacity:0 } 66%,100% { opacity:1 } }
.hz-flut .wlinie { animation:wlinieZieht 5.5s ease-in-out infinite alternate }
@keyframes wlinieZieht { from { transform:translateX(0) } to { transform:translateX(-12px) } }

/* ===== 4 · Sturm: Böen-Zeitreihe gegen Warnschwellen ===== */
.hz-sturm .boekurve { stroke-dasharray:400; stroke-dashoffset:400 }
.laeuft .hz-sturm .boekurve { animation:boeZieht 9s linear infinite }
@keyframes boeZieht { 0% { stroke-dashoffset:400 } 74%,100% { stroke-dashoffset:0 } }
.hz-sturm .spitze { opacity:0 }
.laeuft .hz-sturm .spitze { animation:spitzeAuf 9s ease-in-out infinite }
@keyframes spitzeAuf { 0%,62% { opacity:0 } 72%,100% { opacity:1 } }
.hz-sturm .zone-hoch { opacity:0 }
.laeuft .hz-sturm .zone-hoch { animation:zoneAuf 9s ease-in-out infinite }
@keyframes zoneAuf { 0%,58% { opacity:0 } 70%,100% { opacity:1 } }

@media (prefers-reduced-motion:reduce) {
  .hz * { animation:none !important }
  .hz-veg .baumkontur { transform:scaleY(1) }
  .hz-veg .radius, .hz-eis .lastkurve, .hz-sturm .boekurve { stroke-dashoffset:0 }
  .hz-eis .mantel { r:21 } .hz-flut .wsp { transform:translateY(0) }
  .hz-veg .treffer, .hz-veg .mess, .hz-eis .ueber,
  .hz-flut .tiefe, .hz-sturm .spitze, .hz-sturm .zone-hoch { opacity:1 }
}