/* focal – Bewegung (Vorlage Design CI §12). Rückmeldung, nicht Schmuck.
   Neu auslösen: Klasse entfernen, einmal Layout lesen (el.offsetWidth), Klasse wieder setzen – oder das Element neu einsetzen. */
:root {
  --dauer-kurz: 200ms;   /* Rückmeldung: Knopf, Rein, Rutschen */
  --dauer-ring: 700ms;   /* Stufenwechsel, Punkt gespeichert */
  --dauer-blitz: 1000ms; /* neuer Wert leuchtet auf */
  --kurve-raus: cubic-bezier(.2, .8, .3, 1); /* schnell rein, weich aus */
}

/* Neuer Wert: Grund leuchtet kurz in Messblau-hell und blasst aus */
.fz-blitz { animation: fz-blitz var(--dauer-blitz) ease-out; border-radius: 4px; }
@keyframes fz-blitz { from { background-color: #dce8f5; } to { background-color: transparent; } }

/* Stufenwechsel: ein Ring um die Pille, einmal */
.fz-ring-alarm   { animation: fz-ring-alarm var(--dauer-ring) ease-out; }
.fz-ring-warnung { animation: fz-ring-warnung var(--dauer-ring) ease-out; }
.fz-ring-ok      { animation: fz-ring-ok var(--dauer-ring) ease-out; }
@keyframes fz-ring-alarm   { from { box-shadow: 0 0 0 0 rgba(180,35,24,.55); } to { box-shadow: 0 0 0 12px rgba(180,35,24,0); } }
@keyframes fz-ring-warnung { from { box-shadow: 0 0 0 0 rgba(180,83,9,.5); }   to { box-shadow: 0 0 0 12px rgba(180,83,9,0); } }
@keyframes fz-ring-ok      { from { box-shadow: 0 0 0 0 rgba(46,125,50,.5); }  to { box-shadow: 0 0 0 10px rgba(46,125,50,0); } }

/* Dauerbewegung – nur mit Bedeutung */
.fz-puls  { display: inline-block; animation: fz-puls 1.6s ease-in-out infinite; }   /* ■ unquittierter Alarm, bis quittiert */
.fz-atmen { animation: fz-atmen 2.4s ease-in-out infinite; }                          /* Live: Daten kommen */
.fz-sucht { animation: fz-atmen 1s ease-in-out infinite; }                            /* Instrument / Verbindung wird gesucht */
@keyframes fz-puls  { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes fz-atmen { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .45; } }

/* Listen: Neues gleitet oben hinein, der Rest rutscht nach */
.fz-rein   { animation: fz-rein var(--dauer-kurz) var(--kurve-raus); }
.fz-rutsch { animation: fz-rutsch var(--dauer-kurz) var(--kurve-raus); }
@keyframes fz-rein   { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fz-rutsch { from { transform: translateY(-40px); } to { transform: none; } }

/* Bestätigung (Quittiert, Gebucht): gibt nach und federt */
.fz-pop { animation: fz-pop 240ms ease-out; }
@keyframes fz-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }

/* Gespeicherter Messpunkt (SVG): Ring wächst und verschwindet */
.fz-pkt { transform-box: fill-box; transform-origin: center; animation: fz-pkt var(--dauer-ring) ease-out forwards; }
@keyframes fz-pkt { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* Hinweis erscheint (Ohne Netz / Übertragen) – Platz ist reserviert, nichts springt */
.fz-ein { animation: fz-ein var(--dauer-kurz) ease-out; }
@keyframes fz-ein { from { opacity: 0; } to { opacity: 1; } }

/* Laden: Platzhalter in der Form des Inhalts, solange geladen wird */
.fz-skel { background: linear-gradient(90deg, #eceae5 0%, #f6f5f2 50%, #eceae5 100%); background-size: 200% 100%; animation: fz-skel 1.2s linear infinite; border-radius: 8px; }
@keyframes fz-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Diagramm: Linie zeichnet sich nur beim ersten Öffnen (pathLength="100" am Pfad) */
.fz-linie { stroke-dasharray: 100; animation: fz-linie 400ms ease-out; }
@keyframes fz-linie { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}