/* ==========================================================================
   semco CARE · App-UI-Nachbauten
   Die fünf Slider-Grafiken waren Screenshots — 155 KB Bilddaten, unscharf beim
   Skalieren, nicht durchsuchbar, nicht animierbar. Hier sind dieselben fünf
   Screens als Markup nachgebaut: gleiche Struktur, gleiche Feldnamen, gleiche
   Status-Logik, nur in einer aufgeräumteren Oberfläche.

   ZWEI CONTAINER-REGELN, die hier hängen:
   1  cqw AN einem Container-Element löst gegen den ÜBERGEORDNETEN Container
      auf. Deshalb trägt .ui-dev nur Größe/Seitenverhältnis, und die Blende
      sitzt eine Ebene tiefer in .ui-frame.
   2  Container bekommen Namen (uidev), sonst greifen @container-Regeln je
      Element auf den nächstgelegenen Container – auch auf den falschen.

   Alle Innenmaße in cqw relativ zum Gerät: die Screens bleiben proportional
   lesbar, egal wie breit die Slider-Karte gerade ist.
   ========================================================================== */

.ui-dev{
  container-type:inline-size;container-name:uidev;
  width:100%;aspect-ratio:3/4;position:relative;
}
.ui-frame{
  width:100%;height:100%;background:#1C2118;border-radius:4.4cqw;padding:2.4cqw;
  box-shadow:0 3cqw 7cqw -3cqw rgba(18,21,45,.45);
}
.ui-screen{
  width:100%;height:100%;background:#F2F4EF;border-radius:2.6cqw;overflow:hidden;
  display:flex;flex-direction:column;font-size:3cqw;line-height:1.35;color:#12152D;
}

/* ---- Kopfleiste ---------------------------------------------------------- */
.ui-bar{
  flex:none;min-height:8.4cqw;padding:0 3cqw;background:linear-gradient(180deg,#8FCA14,#76AF00);
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  font-weight:700;font-size:3.3cqw;
}
.ui-bar__side{display:flex;align-items:center;gap:1.2cqw;font-size:2.9cqw;font-weight:600;opacity:.95;min-width:12cqw}
.ui-bar__side_r{justify-content:flex-end}
.ui-bar__side svg{width:3.6cqw;height:3.6cqw;flex:none}
.ui-chev{width:2cqw;height:2cqw;border-left:.55cqw solid currentColor;border-bottom:.55cqw solid currentColor;transform:rotate(45deg)}

/* ---- Inhaltsfläche ------------------------------------------------------- */
.ui-body{flex:1;min-height:0;padding:3cqw;display:flex;flex-direction:column;gap:2.2cqw;overflow:hidden}
.ui-h{font-size:3.9cqw;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:1.6cqw}
.ui-h svg{width:4cqw;height:4cqw;flex:none;color:#12152D}
.ui-sub{font-size:2.5cqw;color:#6B7464}

/* ---- Kacheln (Dashboard) ------------------------------------------------- */
.ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw}
.ui-tile{background:#fff;border-radius:2.4cqw;padding:2.8cqw;display:flex;flex-direction:column;gap:.7cqw;
  box-shadow:0 .4cqw 1.4cqw -.6cqw rgba(18,21,45,.16)}
.ui-tile_wide{grid-column:span 2;align-items:center;text-align:center;gap:1cqw;padding:3.4cqw}
.ui-brand{display:flex;align-items:center;gap:1.8cqw;font-weight:800;font-size:4.4cqw;letter-spacing:-.02em}
.ui-brand span{color:#76AF00}
.ui-brand img{width:6.6cqw;height:auto}
.ui-ico{width:5.2cqw;height:5.2cqw;border-radius:1.5cqw;background:linear-gradient(180deg,#8FCA14,#76AF00);
  display:flex;align-items:center;justify-content:center;flex:none}
.ui-ico svg{width:3cqw;height:3cqw;color:#fff}
.ui-n{font-size:5.4cqw;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ui-lbl{font-size:2.5cqw;color:#6B7464;line-height:1.3}

/* ---- Formularfelder ------------------------------------------------------ */
.ui-field{background:#fff;border-radius:2cqw;padding:2cqw 2.6cqw;display:flex;align-items:center;
  justify-content:space-between;gap:1.6cqw;font-size:2.8cqw;color:#76AF00;min-height:7cqw}
.ui-field_tall{align-items:flex-start;min-height:11cqw;padding-top:2.4cqw}
.ui-field b{color:#12152D;font-weight:600}
.ui-field .ui-caret{width:2cqw;height:2cqw;border-right:.5cqw solid #9AA391;border-bottom:.5cqw solid #9AA391;
  transform:rotate(45deg);flex:none;margin-top:-.6cqw}
.ui-req::after{content:" *";color:#76AF00}
.ui-prio{display:flex;align-items:center;gap:1.2cqw;color:#12152D;font-weight:600;font-size:2.6cqw}
.ui-prio i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#F5C400;flex:none;display:block}

/* ---- Upload-Zeilen ------------------------------------------------------- */
.ui-up{background:#fff;border-radius:2cqw;padding:2.2cqw 2.6cqw;display:flex;flex-direction:column;gap:1.6cqw}
.ui-up__l{font-size:2.7cqw;color:#76AF00}
.ui-btns{display:flex;gap:1.4cqw}
.ui-pill{background:linear-gradient(180deg,#8FCA14,#76AF00);color:#0E2600;font-weight:700;font-size:2.4cqw;
  padding:1cqw 2.2cqw;border-radius:1.4cqw}

/* ---- Aufgabenliste ------------------------------------------------------- */
.ui-tabs2{display:flex;gap:1.4cqw;font-size:2.5cqw;font-weight:600}
.ui-tab2{padding:.9cqw 2.2cqw;border-radius:99px;background:#E5EADD;color:#4C5545}
.ui-tab2_on{background:linear-gradient(180deg,#8FCA14,#76AF00);color:#0E2600}
.ui-task{background:#fff;border-radius:2.4cqw;padding:2.4cqw 2.6cqw;display:flex;flex-direction:column;gap:1.4cqw;
  box-shadow:0 .4cqw 1.4cqw -.6cqw rgba(18,21,45,.16)}
.ui-task__t{display:flex;align-items:center;gap:1.6cqw;font-weight:700;font-size:3cqw}
.ui-task__t svg{width:3.4cqw;height:3.4cqw;color:#76AF00;flex:none}
.ui-task__m{font-size:2.4cqw;color:#8A9280;margin-top:-.8cqw}
.ui-rooms{display:flex;flex-direction:column;gap:1.2cqw;border-top:1px solid #EDF0E8;padding-top:1.4cqw}
.ui-room{display:flex;align-items:center;justify-content:space-between;font-size:2.6cqw;color:#4C5545}
.ui-room .ui-caret{width:1.7cqw;height:1.7cqw;border-right:.45cqw solid #B6BDAD;border-bottom:.45cqw solid #B6BDAD;transform:rotate(-45deg)}
.ui-cancel{align-self:flex-start;font-size:2.3cqw;font-weight:700;color:#8A9280;border:1px solid #DCE2D4;
  border-radius:99px;padding:.8cqw 2cqw}
.ui-fab{position:absolute;right:6cqw;bottom:14cqw;display:flex;flex-direction:column;gap:1.6cqw;z-index:2}
.ui-fab span{width:7cqw;height:7cqw;border-radius:50%;background:linear-gradient(180deg,#8FCA14,#76AF00);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1cqw 2.4cqw -1cqw rgba(14,38,0,.6)}
.ui-fab svg{width:3.4cqw;height:3.4cqw;color:#0E2600}

/* ---- Service-Auftrag (Dokument) ----------------------------------------- */
.ui-doc{background:#fff;border-radius:2.4cqw;overflow:hidden;flex:1;display:flex;flex-direction:column;
  box-shadow:0 .4cqw 1.4cqw -.6cqw rgba(18,21,45,.16)}
.ui-doc__head{position:relative;padding:3cqw 3cqw 3.6cqw;color:#fff;
  background:linear-gradient(105deg,#76AF00 0%,#8FCA14 58%,#fff 58.2%)}
.ui-doc__t{font-size:3.4cqw;font-weight:700;line-height:1.15}
.ui-doc__n{font-size:4cqw;font-weight:800;letter-spacing:-.02em}
.ui-doc__brand{position:absolute;right:3cqw;top:3cqw;display:flex;align-items:center;gap:1.2cqw;
  font-weight:800;font-size:3cqw;color:#12152D;letter-spacing:-.02em}
.ui-doc__brand span{color:#76AF00}
.ui-doc__brand img{width:5cqw;height:auto}
.ui-doc__body{padding:2.6cqw 3cqw 3cqw;display:flex;flex-direction:column;gap:2cqw;font-size:2.5cqw}
.ui-kv{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw 2.4cqw}
.ui-kv h4{margin:0 0 .6cqw;font-size:2.6cqw;font-weight:700}
.ui-kv p{margin:0;color:#6B7464;line-height:1.4}
.ui-rows{display:flex;flex-direction:column;gap:.9cqw}
.ui-rows div{display:flex;justify-content:space-between;gap:2cqw;border-bottom:1px solid #EFF2EB;padding-bottom:.9cqw}
.ui-rows span:first-child{color:#6B7464}
.ui-rows span:last-child{font-weight:600;text-align:right}
.ui-note{background:#F6F8F3;border-left:.7cqw solid #8FCA14;border-radius:0 1.4cqw 1.4cqw 0;
  padding:1.8cqw 2.2cqw;font-size:2.3cqw;color:#4C5545;line-height:1.45}
.ui-page{align-self:center;margin-top:auto;background:#12152D;color:#fff;font-size:2.3cqw;font-weight:600;
  padding:.9cqw 2.6cqw;border-radius:99px}

/* ---- Wissen / eLearning -------------------------------------------------- */
.ui-lesson{display:flex;flex-direction:column;gap:2cqw;flex:1;min-height:0}
.ui-prog{display:flex;gap:1cqw}
.ui-prog i{height:.9cqw;border-radius:99px;background:#DCE2D4;flex:1;display:block}
.ui-prog i.on{background:linear-gradient(90deg,#8FCA14,#76AF00)}
.ui-photo{border-radius:2cqw;overflow:hidden;aspect-ratio:21/13;position:relative;flex:none;background:#2A3326}
.ui-photo img{width:100%;height:100%;object-fit:cover}
.ui-ol{display:flex;flex-direction:column;gap:1.4cqw;counter-reset:s}
.ui-ol li{display:grid;grid-template-columns:4.4cqw 1fr;gap:1.6cqw;font-size:2.5cqw;color:#4C5545;line-height:1.4}
.ui-ol li::before{counter-increment:s;content:counter(s) ".";font-weight:800;color:#76AF00;text-align:right}
.ui-attach{background:#fff;border-radius:2cqw;padding:2cqw 2.4cqw;display:flex;align-items:center;
  justify-content:space-between;font-size:2.6cqw;box-shadow:0 .4cqw 1.4cqw -.6cqw rgba(18,21,45,.16)}
.ui-attach b{font-weight:600}

/* ---- Tab-Leiste unten ---------------------------------------------------- */
.ui-tabs{
  flex:none;height:9cqw;background:#fff;border-top:1px solid #E4E8DE;
  display:flex;align-items:center;justify-content:space-around;padding:0 1.4cqw;
}
.ui-tab{display:flex;flex-direction:column;align-items:center;gap:.5cqw;color:#6B7363;font-size:1.8cqw;
  font-weight:600;position:relative;white-space:nowrap;min-width:0}
.ui-tab svg{width:3.4cqw;height:3.4cqw}
.ui-tab_on{color:#3D6B00}  /* #76AF00 kam auf 2,66:1 über Weiß */
.ui-dot{position:absolute;top:-.4cqw;right:-1cqw;min-width:2.2cqw;height:2.2cqw;border-radius:99px;
  background:#F4280E;color:#fff;font-size:1.5cqw;font-weight:800;display:flex;align-items:center;
  justify-content:center;padding:0 .5cqw}

/* Kein eigener Eintritt im Screen: die Slider-Karte zieht als Ganzes ein
   (data-rv). motion.js spielt ausschließlich Elemente innerhalb eines
   .wmb-card[data-wmb] ab – hier wäre alles auf opacity:0 stehengeblieben. */

/* ==========================================================================
   Hochkant-Gerät · Einsatz-Verlauf
   Ersetzt img/info-2 (24 KB + Mobilvariante). Anders als die Slider-Screens
   läuft dieser hier von selbst: der Einsatz wandert Erstellt → Beauftragt →
   Erledigt. Reine CSS-Keyframes, eine Schleife, kein Skript.
   ========================================================================== */
.ui-phone{container-type:inline-size;container-name:uiphone;
  width:min(100%,300px);aspect-ratio:1/2.02;position:relative;margin-inline:auto}
.ui-pframe{width:100%;height:100%;background:#1C2118;border-radius:13cqw;padding:3.6cqw;
  box-shadow:0 9cqw 18cqw -9cqw rgba(18,21,45,.5)}
.ui-pscreen{width:100%;height:100%;background:#F2F4EF;border-radius:10cqw;overflow:hidden;
  display:flex;flex-direction:column;color:#12152D;font-size:4.4cqw;line-height:1.35}
.ui-pbar{flex:none;min-height:13cqw;background:linear-gradient(180deg,#8FCA14,#76AF00);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:5cqw}
.ui-pbody{flex:1;padding:4.4cqw;display:flex;flex-direction:column;gap:3.4cqw;overflow:hidden}
.ui-card2{background:#fff;border-radius:4cqw;padding:4cqw;display:flex;flex-direction:column;gap:2.4cqw;
  box-shadow:0 .8cqw 2.6cqw -1cqw rgba(18,21,45,.16)}
.ui-card2 h4{margin:0;font-size:4.8cqw;font-weight:800;letter-spacing:-.01em}
.ui-meta{font-size:3.6cqw;color:#8A9280}
.ui-kv2{display:flex;flex-direction:column;gap:1.8cqw;font-size:3.8cqw}
.ui-kv2 div{display:flex;justify-content:space-between;gap:3cqw}
.ui-kv2 span:first-child{color:#8A9280}
.ui-kv2 span:last-child{font-weight:600;text-align:right}

/* Statuskette --------------------------------------------------------------
   .ui-steps braucht flex:1, sonst schrumpft die Leiste auf Textbreite und die
   drei Beschriftungen kleben aneinander. Die Linie liegt im Wrapper, damit sie
   hinter den Punkten durchläuft. */
.ui-stepwrap{position:relative;width:100%;padding-top:1cqw}
.ui-stepwrap::before,.ui-fill{
  content:"";position:absolute;top:4.2cqw;left:16%;height:1cqw;border-radius:99px;
}
.ui-stepwrap::before{right:16%;background:#E1E6DA}
.ui-fill{background:linear-gradient(90deg,#8FCA14,#76AF00);width:0;z-index:1}
.ui-steps{display:flex;width:100%;position:relative;z-index:2}
.ui-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.6cqw;
  font-size:2.9cqw;font-weight:700;color:#6B7363;text-align:center}  /* war #B6BDAD = 1,93:1 */
.ui-step i{width:5cqw;height:5cqw;border-radius:50%;background:#E1E6DA;display:block;
  box-shadow:0 0 0 1.6cqw #fff}

/* Statusschild – drei gestapelte Schilder, die sich ablösen. Ein einzelnes
   Schild ginge nicht: CSS kann Farben animieren, keinen Text. */
.ui-badges{position:relative;height:7.6cqw;align-self:flex-start;min-width:26cqw}
.ui-badge2{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;
  font-size:3.4cqw;font-weight:800;padding:0 3.4cqw;border-radius:99px;opacity:0;white-space:nowrap}
.ui-badge2_1{background:#E8EFDC;color:#3D6B00;opacity:1}
.ui-badge2_2{background:#FDF0D8;color:#7A5000}
.ui-badge2_3{background:#D8F0C4;color:#2F6400}

.ui-toast{background:#fff;border-radius:4cqw;padding:3.4cqw 4cqw;display:flex;align-items:center;gap:3cqw;
  box-shadow:0 .8cqw 2.6cqw -1cqw rgba(18,21,45,.18);opacity:0}
.ui-toast i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#76AF00;flex:none;display:block}
.ui-toast b{font-size:3.6cqw;font-weight:700}

/* --- die Schleife: 12 s, drei Zustände ---------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .ui-fill{animation:ui-fill 12s var(--wmb-ease,ease) infinite}
  .ui-step:nth-child(1){animation:ui-on1 12s step-end infinite}
  .ui-step:nth-child(2){animation:ui-on2 12s step-end infinite}
  .ui-step:nth-child(3){animation:ui-on3 12s step-end infinite}
  .ui-step:nth-child(1) i{animation:ui-dot1 12s step-end infinite}
  .ui-step:nth-child(2) i{animation:ui-dot2 12s step-end infinite}
  .ui-step:nth-child(3) i{animation:ui-dot3 12s step-end infinite}
  .ui-badge2_1{animation:ui-b1 12s step-end infinite}
  .ui-badge2_2{animation:ui-b2 12s step-end infinite}
  .ui-badge2_3{animation:ui-b3 12s step-end infinite}
  .ui-toast{animation:ui-toast 12s var(--wmb-ease,ease) infinite}
}
@keyframes ui-fill{0%,8%{width:0}26%,34%{width:34%}56%,64%{width:68%}86%,100%{width:68%}}
@keyframes ui-on1{0%,100%{color:#3D6B00}}
@keyframes ui-on2{0%{color:#6B7363}30%,100%{color:#3D6B00}}
@keyframes ui-on3{0%{color:#6B7363}60%,100%{color:#3D6B00}}
@keyframes ui-dot1{0%,100%{background:#76AF00}}
@keyframes ui-dot2{0%{background:#E1E6DA}30%,100%{background:#76AF00}}
@keyframes ui-dot3{0%{background:#E1E6DA}60%,100%{background:#76AF00}}
@keyframes ui-b1{0%{opacity:1}30%,100%{opacity:0}}
@keyframes ui-b2{0%{opacity:0}30%{opacity:1}60%,100%{opacity:0}}
@keyframes ui-b3{0%{opacity:0}60%{opacity:1}100%{opacity:1}}
@keyframes ui-toast{0%,62%{opacity:0;transform:translateY(2.4cqw)}70%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Verlauf – füllt den unteren Teil und macht den Fortschritt nachlesbar */
.ui-log{display:flex;flex-direction:column;gap:2.6cqw}
.ui-log__r{display:grid;grid-template-columns:3.4cqw 1fr;gap:3cqw;align-items:start;font-size:3.5cqw}
.ui-log__r i{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#76AF00;margin-top:1.4cqw;display:block}
.ui-log__r b{font-weight:700;display:block}
.ui-log__r span{color:#8A9280;font-size:3.1cqw}
.ui-log__r_2,.ui-log__r_3{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ui-log__r_2{animation:ui-b2b 12s var(--wmb-ease,ease) infinite}
  .ui-log__r_3{animation:ui-b3b 12s var(--wmb-ease,ease) infinite}
}
@keyframes ui-b2b{0%,26%{opacity:0;transform:translateY(1.6cqw)}34%,100%{opacity:1;transform:none}}
@keyframes ui-b3b{0%,56%{opacity:0;transform:translateY(1.6cqw)}64%,100%{opacity:1;transform:none}}

/* ==========================================================================
   Leben in den Screens
   Die Animationen laufen NUR im gerade sichtbaren Panel (.is-on). Damit
   arbeitet immer genau ein Screen — kein Flimmern über fünf Geräte, keine
   Rechenlast für unsichtbare Elemente. Jede Schleife zeigt eine echte
   Interaktion der App, keine Dekoration.
   ========================================================================== */

/* --- Gemeinsam: der Screen wacht auf, wenn sein Tab aktiv wird ----------- */
@media (prefers-reduced-motion:no-preference){
  .switch__panel.is-on .ui-tile,
  .switch__panel.is-on .ui-field,
  .switch__panel.is-on .ui-up,
  .switch__panel.is-on .ui-task,
  .switch__panel.is-on .ui-attach{animation:ui-in .5s var(--wmb-ease,ease) both}
  .switch__panel.is-on .ui-tile:nth-child(2),.switch__panel.is-on .ui-field:nth-of-type(2),
  .switch__panel.is-on .ui-task:nth-child(2){animation-delay:.07s}
  .switch__panel.is-on .ui-tile:nth-child(3),.switch__panel.is-on .ui-field:nth-of-type(3),
  .switch__panel.is-on .ui-task:nth-child(3){animation-delay:.14s}
  .switch__panel.is-on .ui-tile:nth-child(4){animation-delay:.21s}
  .switch__panel.is-on .ui-tile:nth-child(5){animation-delay:.28s}
  .switch__panel.is-on .ui-tile:nth-child(6){animation-delay:.35s}
}
@keyframes ui-in{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}

/* --- 1 Dashboard: der Chat-Zähler meldet sich ---------------------------- */
.ui-dot{position:relative}
@media (prefers-reduced-motion:no-preference){
  .switch__panel.is-on .ui-tab .ui-dot{animation:ui-ping 3.4s var(--wmb-ease,ease) 1.2s infinite}
}
@keyframes ui-ping{0%,72%{transform:none}78%{transform:scale(1.45)}84%{transform:scale(.94)}90%,100%{transform:none}}

/* --- 2 Störmeldung: das Formular füllt sich ------------------------------ */
.ui-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  color:#12152D;font-weight:600;max-width:0}
.ui-caret2{display:inline-block;width:.16em;height:1.05em;background:#76AF00;vertical-align:-.18em;opacity:0}
.ui-thumb{width:9cqw;height:6.4cqw;border-radius:1.2cqw;flex:none;opacity:0;transform:scale(.6);
  background:linear-gradient(140deg,#7C8B6E,#4A5540)}
.ui-up__row{display:flex;align-items:center;gap:1.6cqw}
@media (prefers-reduced-motion:no-preference){
  .switch__panel.is-on .ui-type{animation:ui-type 9s steps(28,end) .9s infinite}
  .switch__panel.is-on .ui-caret2{animation:ui-caret 9s linear .9s infinite}
  .switch__panel.is-on .ui-prio i{animation:ui-prio 9s var(--wmb-ease,ease) infinite}
  .switch__panel.is-on .ui-thumb{animation:ui-thumb 9s var(--wmb-ease,ease) infinite}
}
@keyframes ui-type{0%{max-width:0}22%,88%{max-width:24.5ch}92%,100%{max-width:0}}
@keyframes ui-caret{0%,26%{opacity:1}27%,100%{opacity:0}}
@keyframes ui-prio{0%,30%{opacity:0;transform:scale(.4)}38%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes ui-thumb{0%,44%{opacity:0;transform:scale(.6)}52%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.6)}}

/* --- 3 Aufgaben: eine Aufgabe wird abgehakt ------------------------------ */
.ui-check{width:4.4cqw;height:4.4cqw;border-radius:50%;border:.5cqw solid #C6CDBC;flex:none;
  display:flex;align-items:center;justify-content:center;position:relative}
.ui-check::after{content:"";width:2.2cqw;height:1.2cqw;border-left:.6cqw solid #fff;border-bottom:.6cqw solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;margin-top:-.4cqw}
@media (prefers-reduced-motion:no-preference){
  .switch__panel.is-on .ui-task_do .ui-check{animation:ui-box 8s var(--wmb-ease,ease) 1.4s infinite}
  .switch__panel.is-on .ui-task_do .ui-check::after{animation:ui-tick 8s var(--wmb-ease,ease) 1.4s infinite}
  .switch__panel.is-on .ui-task_do{animation:ui-done 8s var(--wmb-ease,ease) 1.4s infinite}
}
@keyframes ui-box{0%,18%{background:transparent;border-color:#C6CDBC}26%,88%{background:#76AF00;border-color:#76AF00}96%,100%{background:transparent;border-color:#C6CDBC}}
@keyframes ui-tick{0%,20%{opacity:0;transform:rotate(-45deg) scale(.4)}28%,88%{opacity:1;transform:rotate(-45deg) scale(1)}96%,100%{opacity:0}}
@keyframes ui-done{0%,24%{opacity:1}34%,88%{opacity:.5}96%,100%{opacity:1}}

/* --- 4 Service-Auftrag: das Dokument läuft durch ------------------------- */
.ui-doc{position:relative}
.ui-doc::after{content:"";position:absolute;inset:0 0 auto;height:26%;pointer-events:none;
  background:linear-gradient(180deg,rgba(143,202,20,.24),transparent);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .switch__panel.is-on .ui-doc::after{animation:ui-scan 7s var(--wmb-ease,ease) .6s infinite}
  .switch__panel.is-on .ui-page{animation:ui-pagepulse 7s var(--wmb-ease,ease) .6s infinite}
}
@keyframes ui-scan{0%{opacity:0;transform:translateY(0)}8%{opacity:1}52%{opacity:1;transform:translateY(290%)}60%,100%{opacity:0;transform:translateY(290%)}}
@keyframes ui-pagepulse{0%,58%{transform:none}66%{transform:scale(1.09)}74%,100%{transform:none}}

/* --- 5 Wissen: der Fortschritt rückt vor -------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .switch__panel.is-on .ui-prog i:nth-child(4){animation:ui-seg 8s var(--wmb-ease,ease) 1.8s infinite}
  .switch__panel.is-on .ui-ol li{animation:ui-hl 8s var(--wmb-ease,ease) infinite}
  .switch__panel.is-on .ui-ol li:nth-child(2){animation-delay:1.1s}
  .switch__panel.is-on .ui-ol li:nth-child(3){animation-delay:2.2s}
}
@keyframes ui-seg{0%,22%{background:#DCE2D4}32%,90%{background:linear-gradient(90deg,#8FCA14,#76AF00)}98%,100%{background:#DCE2D4}}
@keyframes ui-hl{0%,4%{color:#4C5545}10%,20%{color:#12152D}26%,100%{color:#4C5545}}