/*
 * Leopold: animierte SVG-Szenen
 * Regeln: nur transform und opacity, Schleifen 6 bis 14 s, Farben aus Tokens.
 * Standbild bei prefers-reduced-motion: die Grundwerte unten SIND das Standbild.
 * Pause ausserhalb des Viewports: ds.js setzt .is-paused am [data-ds-szene].
 */

.ds-szene {
  --sz-l: var(--ds-navy);
  --sz-ll: #9AAEC6;
  --sz-f: var(--ds-weiss);
  --sz-f2: var(--ds-navy-100);
  --sz-a: var(--ds-rot);
  --sz-h: var(--ds-weiss);
  --sz-wasser: #BCD3EA;
  --sz-strasse: #D9E3EE;
  display: block;
  margin: 0;
}

.ds-dunkel .ds-szene {
  --sz-l: #E3EBF4;
  --sz-ll: #6F8EB4;
  --sz-f: #0E4A86;
  --sz-f2: #0A3E74;
  --sz-h: #FFFFFF;
}

.ds-szene svg { width: 100%; height: auto; overflow: hidden; }

.ds-szene .l { fill: none; stroke: var(--sz-l); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-szene .ll { fill: none; stroke: var(--sz-ll); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ds-szene .as { fill: none; stroke: var(--sz-a); stroke-linecap: round; stroke-linejoin: round; }
.ds-szene .hs { fill: none; stroke: var(--sz-h); stroke-linecap: round; stroke-linejoin: round; }
.ds-szene .f { fill: var(--sz-f); }
.ds-szene .f2 { fill: var(--sz-f2); }
.ds-szene .h { fill: var(--sz-h); }
.ds-szene .a { fill: var(--sz-a); }
.ds-szene .t { fill: var(--sz-l); font-family: var(--ds-font); font-weight: 600; font-size: 19px; }
.ds-szene .w { fill: none; stroke: var(--sz-wasser); }
.ds-szene .s { stroke: var(--sz-strasse); }
.ds-szene .tl { fill: var(--ds-schiefer); font-family: var(--ds-font); font-weight: 500; font-size: 17px; }

/* Pause und Standbild */
.ds-szene.is-paused *,
.ds-verborgen .ds-szene * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .ds-szene * { animation: none !important; }
}

/* Szene 1: Gebaeude (Hero Startseite), 12 s                               */

.sz-geb .welle {
  animation: sz-geb-welle 6s var(--ds-ease-ruhig) infinite both;
}
.sz-geb .welle--2 { animation-delay: 0.45s; }
.sz-geb .welle--3 { animation-delay: 0.9s; }

@keyframes sz-geb-welle {
  0%, 100% { opacity: 0.18; }
  12%, 58% { opacity: 1; }
  78% { opacity: 0.18; }
}

.sz-geb .led { animation: sz-geb-led 6s linear infinite both; }
.sz-geb .led:nth-of-type(2) { animation-delay: 1s; }
.sz-geb .led:nth-of-type(3) { animation-delay: 2s; }
.sz-geb .led:nth-of-type(4) { animation-delay: 3s; }
.sz-geb .led:nth-of-type(5) { animation-delay: 4s; }
.sz-geb .led:nth-of-type(6) { animation-delay: 5s; }

@keyframes sz-geb-led {
  0%, 14%, 100% { opacity: 0.3; }
  3%, 8% { opacity: 1; }
}

.sz-geb .haken-maske {
  transform-box: view-box;
  transform-origin: 527px 66px;
  animation: sz-geb-maske 12s var(--ds-ease) infinite both;
}
.sz-geb .haken { animation: sz-geb-haken 12s linear infinite both; }

@keyframes sz-geb-maske {
  0%, 12% { transform: scaleX(0); }
  26%, 100% { transform: scaleX(1); }
}
@keyframes sz-geb-haken {
  0%, 88% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.sz-geb .schild {
  transform-box: view-box;
  transform-origin: 548px 66px;
  animation: sz-geb-schild 12s var(--ds-ease-ruhig) infinite both;
}
@keyframes sz-geb-schild {
  0%, 10%, 100% { transform: scale(1); }
  20% { transform: scale(1.06); }
  30% { transform: scale(1); }
}

/* Szene 2: Brandschutz, Rauchmelder an der Decke, 10 s                    */

.sz-brand .rauch { opacity: 0.55; }
.sz-brand .rauch path { transform-box: view-box; }
.sz-brand .rauch--1 { animation: sz-brand-rauch 10s var(--ds-ease-ruhig) infinite both; }
.sz-brand .rauch--2 { animation: sz-brand-rauch 10s var(--ds-ease-ruhig) 1.2s infinite both; }
.sz-brand .rauch--3 { animation: sz-brand-rauch 10s var(--ds-ease-ruhig) 2.4s infinite both; }

@keyframes sz-brand-rauch {
  0% { opacity: 0; transform: translate(0, 40px); }
  15% { opacity: 0.6; }
  48% { opacity: 0.45; }
  62%, 100% { opacity: 0; transform: translate(34px, -120px); }
}

.sz-brand .led { animation: sz-brand-led 10s linear infinite both; }
@keyframes sz-brand-led {
  0%, 52%, 100% { opacity: 0.3; }
  55%, 58%, 61%, 64% { opacity: 1; }
  56.5%, 59.5%, 62.5% { opacity: 0.3; }
}

.sz-brand .ring {
  transform-box: view-box;
  transform-origin: 240px 78px;
  opacity: 0.55;
  animation: sz-brand-ring 10s var(--ds-ease) infinite both;
}
.sz-brand .ring--2 { animation-delay: 0.35s; }
.sz-brand .ring--3 { animation-delay: 0.7s; }

@keyframes sz-brand-ring {
  0%, 54% { opacity: 0; transform: scale(0.75); }
  62% { opacity: 0.9; }
  84%, 100% { opacity: 0; transform: scale(1.18); }
}

/* Szene 3: Einbruchschutz, Kamera, Bewegungsmelder, Tuerkontakt, 12 s     */

.sz-ein .kamera {
  transform-box: view-box;
  transform-origin: 96px 92px;
  transform: rotate(-4deg);
  animation: sz-ein-schwenk 12s var(--ds-ease-ruhig) infinite both;
}
@keyframes sz-ein-schwenk {
  0%, 100% { transform: rotate(4deg); }
  45%, 55% { transform: rotate(-12deg); }
}

.sz-ein .kegel { fill: var(--sz-l); opacity: 0.1; animation: sz-ein-kegel 6s var(--ds-ease-ruhig) infinite both; }
@keyframes sz-ein-kegel {
  0%, 100% { opacity: 0.07; }
  50% { opacity: 0.15; }
}

.sz-ein .strahl { opacity: 0.7; animation: sz-ein-strahl 6s linear infinite both; }
.sz-ein .strahl--2 { animation-delay: 0.5s; }
.sz-ein .strahl--3 { animation-delay: 1s; }
@keyframes sz-ein-strahl {
  0%, 30%, 100% { opacity: 0.15; }
  10%, 18% { opacity: 0.85; }
}

.sz-ein .led { animation: sz-ein-led 6s linear infinite both; }
@keyframes sz-ein-led {
  0%, 46%, 54%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* Szene 4: Einsatzgebiet, Servicewagen auf der A66, 14 s                  */

.sz-karte .wagen {
  transform-box: view-box;
  animation: sz-karte-fahrt 14s var(--ds-ease-ruhig) infinite both;
  /* Standbild: auf der A66 zwischen Wächtersbach und Gelnhausen, Richtung Hanau, frei von den Ortsnamen (QA UX AN1) */
  transform: translate(331px, 236px) scaleX(-1);
}
@keyframes sz-karte-fahrt {
  0% { opacity: 0; transform: translate(362px, 142px) scaleX(-1); }
  4% { opacity: 1; }
  14% { transform: translate(368px, 205px) scaleX(-1); }
  27% { transform: translate(294px, 267px) scaleX(-1); }
  37% { transform: translate(182px, 289px) scaleX(-1); }
  47%, 52% { transform: translate(92px, 346px) scaleX(-1); }
  56% { transform: translate(92px, 346px) scaleX(1); }
  66% { transform: translate(182px, 289px) scaleX(1); }
  76% { transform: translate(294px, 267px) scaleX(1); }
  88% { transform: translate(368px, 205px) scaleX(1); }
  96% { opacity: 1; }
  100% { opacity: 0; transform: translate(362px, 142px) scaleX(1); }
}

.sz-karte .puls {
  transform-box: view-box;
  transform-origin: 362px 142px;
  opacity: 0.5;
  animation: sz-karte-puls 7s var(--ds-ease) infinite both;
}
.sz-karte .puls--2 { animation-delay: 1.2s; }
@keyframes sz-karte-puls {
  0% { opacity: 0.7; transform: scale(0.6); }
  60%, 100% { opacity: 0; transform: scale(2.4); }
}

/* Kleine Ortsnamen auf schmalen Bildschirmen ausblenden */
@media (max-width: 29.99em) {
  .sz-karte .klein { display: none; }
}

/* Szene 5: Wartung, Pruefgeraet an der Teleskopstange, 12 s              */

.sz-wart .stange {
  transform-box: view-box;
  animation: sz-wart-stange 12s var(--ds-ease-ruhig) infinite both;
}
@keyframes sz-wart-stange {
  0%, 8%, 70%, 100% { transform: translateY(96px); }
  24%, 52% { transform: translateY(0); }
}

.sz-wart .led { animation: sz-wart-led 12s linear infinite both; }
@keyframes sz-wart-led {
  0%, 30%, 46%, 100% { opacity: 0.3; }
  32%, 35%, 38%, 41%, 44% { opacity: 1; }
  33.5%, 36.5%, 39.5%, 42.5% { opacity: 0.3; }
}

.sz-wart .haken-neu {
  transform-box: view-box;
  transform-origin: 315px 266px;
  animation: sz-wart-haken 12s var(--ds-ease) infinite both;
}
@keyframes sz-wart-haken {
  0%, 44% { opacity: 0; transform: scale(0.4); }
  50%, 90% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(1); }
}