/* ============================================================
   anim-fgf.css - Umschalter Roboteranlage / Portalanlage mit zwei
   Erklaer-Animationen FGF (Granulatdirektdruck) in je 4 Schritten.
   Sektion #fgf-animation auf /leistungen/grossformat.
   Nur die Komponente: .anim-fgf (Umschalter), .anim-rob (Teil
   Roboteranlage), .anim-fgp (Teil Portalanlage); alle Klassen mit
   diesen Praefixen, IDs mit anim-fgf-, anim-rob-, anim-fgp-.
   Nutzt die Variablen aus style.css (Farben, Radius, Schatten,
   Schrift, --ease) und muss NACH style.css geladen werden.
   Dunkelmodus ueber html[data-theme] und prefers-color-scheme,
   reduced motion ueber prefers-reduced-motion und .is-rm.
   Quelle: Animationen-Prototypen/fgf-umschalter.html (drei
   style-Bloecke, woertlich). Stand 2026-09-30.
   ============================================================ */

/* ---------- Umschalter (.anim-fgf) ---------- */
.anim-fgf{--anim-fgf-on:var(--brand-blue);--anim-fgf-on-txt:#fff;--anim-fgf-on-ico:var(--brand-orange);--anim-fgf-line:var(--brand-blue);--anim-fgf-hot:var(--brand-orange);container:anim-fgf/inline-size;width:100%;max-width:680px;margin:0 auto;color:var(--text);font-family:var(--font-sans)}
html[data-theme='dark'] .anim-fgf{--anim-fgf-on:var(--brand-blue-light);--anim-fgf-on-txt:var(--brand-blue);--anim-fgf-on-ico:var(--brand-blue);--anim-fgf-line:var(--brand-blue-light)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .anim-fgf{--anim-fgf-on:var(--brand-blue-light);--anim-fgf-on-txt:var(--brand-blue);--anim-fgf-on-ico:var(--brand-blue);--anim-fgf-line:var(--brand-blue-light)}}
.anim-fgf__bar{display:none}
.anim-fgf.is-js .anim-fgf__bar{display:block;margin:0 0 14px}
.anim-fgf__hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 8px;color:var(--text-muted);font-size:13px;font-weight:600;line-height:1.3}
.anim-fgf__hint svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--anim-fgf-hot);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anim-fgf__switch{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border:1.5px solid var(--border-strong);border-radius:20px;background:var(--bg-elev);box-shadow:var(--shadow-sm)}
.anim-fgf__switch::before{content:'';position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:16px;background:var(--anim-fgf-on);box-shadow:0 6px 16px color-mix(in srgb,var(--anim-fgf-on) 30%,transparent);transition:transform .4s var(--ease)}
.anim-fgf[data-anlage='portal'] .anim-fgf__switch::before{transform:translateX(calc(100% + 4px))}
.anim-fgf__tab{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:64px;padding:8px 14px;border:1.5px solid transparent;border-radius:16px;color:var(--text);text-align:left;transition:color .3s,border-color .2s,background-color .2s}
.anim-fgf__tab[aria-selected='true']{color:var(--anim-fgf-on-txt);cursor:default}
.anim-fgf__ico{flex:none;width:34px;height:34px;fill:none;stroke:var(--anim-fgf-line);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.anim-fgf__tab[aria-selected='true'] .anim-fgf__ico{stroke:var(--anim-fgf-on-ico)}
.anim-fgf__txt{display:flex;flex-direction:column;min-width:0}
.anim-fgf__ttl{font-size:16.5px;font-weight:600;line-height:1.25}
.anim-fgf__sub{margin-top:2px;color:var(--text-muted);font-size:12.5px;font-weight:500;line-height:1.3;transition:color .3s}
.anim-fgf__tab[aria-selected='true'] .anim-fgf__sub{color:inherit;opacity:.88}
.anim-fgf__s{display:none}
.anim-fgf__tab:focus-visible,.anim-fgf__next:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media (hover:hover){.anim-fgf__tab[aria-selected='false']:hover{border-color:var(--anim-fgf-hot);background:color-mix(in srgb,var(--anim-fgf-hot) 7%,transparent)}.anim-fgf__next:hover svg{transform:translateX(3px)}}
@keyframes anim-fgf-nudge{0%,100%{border-color:transparent;box-shadow:0 0 0 0 transparent}45%{border-color:var(--anim-fgf-hot);box-shadow:0 0 0 5px color-mix(in srgb,var(--anim-fgf-hot) 25%,transparent)}}
.anim-fgf__tab.is-nudge{animation:anim-fgf-nudge 1.2s var(--ease) .9s 2}
.anim-fgf.is-js .anim-fgf__panels{display:grid}
.anim-fgf.is-js .anim-fgf__panel{grid-area:1/1;min-width:0}
/* ausgeblendete Karte bleibt im Layout (gleiche Hoehe), !important auch fuer Kinder, die selbst visibility:visible setzen */
.anim-fgf.is-js .anim-fgf__panel[hidden]{display:block}
.anim-fgf.is-js .anim-fgf__panel[hidden],.anim-fgf.is-js .anim-fgf__panel[hidden] *{visibility:hidden!important}
.anim-fgf.is-js .anim-fgf__panel>figure{height:100%}
@keyframes anim-fgf-in{from{opacity:0}to{opacity:1}}
.anim-fgf__panel.is-in :is(.anim-rob__stage,.anim-fgp__stage){animation:anim-fgf-in .35s ease-out}
.anim-fgf__next{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0 4px;color:var(--text);font-size:14.5px;font-weight:600;line-height:1.3;text-align:left;visibility:hidden;opacity:0;transition:opacity .4s}
.anim-fgf__next.is-on{visibility:visible;opacity:1}
.anim-fgf__next span{text-decoration:underline;text-decoration-color:var(--anim-fgf-hot);text-decoration-thickness:2px;text-underline-offset:4px}
.anim-fgf__next svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--anim-fgf-hot);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
@container anim-fgf (max-width:460px){.anim-fgf__tab{flex-direction:column;gap:4px;min-height:48px;padding:8px 6px;text-align:center}.anim-fgf__ico{width:28px;height:28px}.anim-fgf__txt{align-items:center}.anim-fgf__ttl{font-size:15px}.anim-fgf__sub{font-size:12px}.anim-fgf__l{display:none}.anim-fgf__s{display:inline}}
@media (orientation:landscape) and (max-height:500px) and (max-width:1024px){.anim-fgf{max-width:none}.anim-fgf__hint{display:none}.anim-fgf.is-js .anim-fgf__bar{margin-bottom:8px}.anim-fgf__tab{min-height:48px;padding:4px 12px;gap:10px}.anim-fgf__ico{width:26px;height:26px}.anim-fgf__txt{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}}
.anim-fgf:is(.is-init,.is-rm) :is(.anim-fgf__tab,.anim-fgf__ico,.anim-fgf__sub,.anim-fgf__next,.anim-fgf__next svg),.anim-fgf:is(.is-init,.is-rm) .anim-fgf__switch::before{transition:none}
.anim-fgf.is-rm :is(.anim-fgf__tab.is-nudge,.anim-fgf__panel.is-in .anim-rob__stage,.anim-fgf__panel.is-in .anim-fgp__stage){animation:none}
@media (prefers-reduced-motion:reduce){.anim-fgf :is(.anim-fgf__tab,.anim-fgf__ico,.anim-fgf__sub,.anim-fgf__next,.anim-fgf__next svg),.anim-fgf__switch::before{transition:none}.anim-fgf :is(.anim-fgf__tab.is-nudge,.anim-fgf__panel.is-in .anim-rob__stage,.anim-fgf__panel.is-in .anim-fgp__stage){animation:none}}
@media (forced-colors:active){.anim-fgf__tab[aria-selected='true']{border:3px solid Highlight}}

/* ---------- Teil 1: Roboteranlage (.anim-rob) ---------- */
.anim-rob{--anim-rob-line:var(--brand-blue);--anim-rob-part:var(--brand-orange);--anim-rob-hot:var(--brand-orange);--anim-rob-powder:var(--brand-gray-light);--anim-rob-grain:var(--brand-gray-mid);--anim-rob-mech:var(--brand-gray-mid);--anim-rob-card:var(--bg-alt);--anim-rob-tile:var(--bg-elev);--anim-rob-on-hot:var(--brand-blue);--anim-rob-dp:color-mix(in srgb,var(--brand-gray-mid) 26%,var(--bg-alt));--anim-rob-dm:color-mix(in srgb,var(--brand-gray-light) 55%,var(--bg-alt));container-type:inline-size;width:100%;max-width:680px;margin:0 auto;padding:clamp(12px,2.2vw,20px);border-radius:var(--radius-lg);background:var(--anim-rob-card);box-shadow:var(--shadow-md);color:var(--text);font-family:var(--font-sans)}
html[data-theme='dark'] .anim-rob{--anim-rob-line:var(--brand-blue-light);--anim-rob-powder:var(--anim-rob-dp);--anim-rob-mech:var(--anim-rob-dm)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .anim-rob{--anim-rob-line:var(--brand-blue-light);--anim-rob-powder:var(--anim-rob-dp);--anim-rob-mech:var(--anim-rob-dm)}}
.anim-rob__stage{position:relative;aspect-ratio:3/2;container:anim-rob-st/inline-size}
.anim-rob__svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.anim-rob__ln,.anim-rob__dash,.anim-rob__cut,.anim-rob__lm,.anim-rob__po{fill:none;stroke:var(--anim-rob-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anim-rob__ln{stroke-width:3}
.anim-rob__dash{stroke-width:1.5;stroke-dasharray:5 4;stroke-linecap:butt}
.anim-rob__cut{stroke-dasharray:14 4 3 4;stroke-linecap:butt}
.anim-rob__mech{fill:var(--anim-rob-mech)}
.anim-rob__arm{stroke:var(--anim-rob-mech);stroke-linecap:round}
.anim-rob__jt{fill:var(--anim-rob-mech);stroke:var(--anim-rob-card);stroke-width:3}
.anim-rob__ax{fill:var(--anim-rob-card)}
.anim-rob__pw{fill:var(--anim-rob-powder)}
.anim-rob__gr{fill:var(--anim-rob-grain)}
.anim-rob__pel{fill:url(#anim-rob-pel)}
.anim-rob__in{fill:var(--anim-rob-tile)}
.anim-rob__part{fill:var(--anim-rob-part)}
.anim-rob__lay{fill:url(#anim-rob-lay)}
.anim-rob__lm{stroke-width:1.2}
.anim-rob__hot,.anim-rob__in.is-on{fill:url(#anim-rob-hatch)}
.anim-rob__dot{fill:var(--anim-rob-hot)}
.anim-rob__hl{fill:none;stroke:var(--anim-rob-card);stroke-width:1.4}
.anim-rob__strand{fill:none;stroke:url(#anim-rob-hatch);stroke-linecap:round}
.anim-rob__screw{fill:var(--anim-rob-line)}
.anim-rob__flight{stroke:var(--anim-rob-line);stroke-width:3}
.anim-rob__band{fill:var(--anim-rob-powder);stroke:var(--anim-rob-line);stroke-width:1.5}
.anim-rob__band.is-on{fill:url(#anim-rob-hatch)}
.anim-rob__hose,.anim-rob__hose-in,.anim-rob__dots{fill:none;stroke:var(--anim-rob-mech);stroke-width:13;stroke-linecap:round}
.anim-rob__hose-in{stroke:var(--anim-rob-powder);stroke-width:8}
.anim-rob__dots{stroke:var(--anim-rob-grain);stroke-width:4.5;stroke-dasharray:0 10}
.anim-rob__win{fill:var(--anim-rob-tile);stroke:var(--anim-rob-line);stroke-width:1.5}
.anim-rob__kv{fill:none;stroke-linecap:round;stroke-width:15.5}
.anim-rob__kvo{stroke:var(--anim-rob-line);stroke-width:21.5}
.anim-rob__kvi{stroke:var(--anim-rob-tile)}
.anim-rob__kvf{stroke:var(--anim-rob-part)}
.anim-rob__lbls{position:absolute;inset:0;pointer-events:none}
.anim-rob__lbl{position:absolute;left:0;top:0;padding:2px 7px;border-radius:6px;background:var(--anim-rob-card);color:var(--text);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;text-align:center;opacity:0;transition:opacity .25s}
.anim-rob__lbl.is-on{opacity:1}
.anim-rob__lbl--plain{background:none;padding:0}
.anim-rob__lbl--mute{color:var(--text-muted);font-weight:500}
.anim-rob__lbl--badge{border:1.5px solid var(--anim-rob-hot);font-weight:500}
.anim-rob__s{display:none}
.anim-rob__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}
.anim-rob__play{display:none;align-items:center;gap:8px;min-width:8.6em;min-height:44px;padding:6px 16px 6px 12px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--anim-rob-tile);color:var(--text);font-size:14px;font-weight:600}
.anim-rob.is-js .anim-rob__play{display:inline-flex}
.anim-rob__play svg{width:14px;height:14px;fill:currentColor}
.anim-rob .anim-rob__i-play,.anim-rob.is-playing .anim-rob__i-pause{display:block}
.anim-rob .anim-rob__i-pause,.anim-rob.is-playing .anim-rob__i-play{display:none}
.anim-rob__legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none;color:var(--text-muted);font-size:12px;line-height:1.3}
.anim-rob__legend li{display:flex;align-items:center;gap:6px}
.anim-rob__legend svg{width:16px;height:16px;flex:none;border:1px solid var(--border-strong);border-radius:3px}
.anim-rob__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.anim-rob__steps li{display:flex}
.anim-rob__step{position:relative;display:flex;gap:10px;align-items:flex-start;width:100%;min-height:44px;padding:10px 12px 12px;border:1px solid var(--border-strong);border-radius:14px;background:transparent;color:var(--text);text-align:left;overflow:hidden;transition:background-color .2s,border-color .2s}
.anim-rob__step:focus-visible,.anim-rob__play:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.anim-rob__step.is-active{background:var(--anim-rob-tile);border-color:var(--anim-rob-hot)}
.anim-rob__num{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--text-muted);border-radius:50%;color:var(--text-muted);font-size:13px;font-weight:600;line-height:1}
.anim-rob__step.is-active .anim-rob__num{background:var(--anim-rob-hot);border-color:var(--anim-rob-hot);color:var(--anim-rob-on-hot)}
.anim-rob__ttl{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.anim-rob__dsc{display:block;margin-top:2px;color:var(--text-muted);font-size:13px;line-height:1.45}
.anim-rob__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--anim-rob-hot);transform:scaleX(0);transform-origin:0 50%;visibility:hidden}
.anim-rob.is-playing .anim-rob__step.is-active .anim-rob__prog{visibility:visible}
@container (min-width:520px){.anim-rob__lbl{font-size:13px}}
@container (max-width:430px){.anim-rob__steps{grid-template-columns:1fr}}
@container anim-rob-st (max-width:430px){.anim-rob__l,.anim-rob__lbl--dsk{display:none}.anim-rob__s{display:inline}}
.anim-rob__now{display:none}
.anim-rob.is-cmp .anim-rob__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.anim-rob.is-cmp .anim-rob__step{justify-content:center;align-items:center;padding:8px 4px}
.anim-rob.is-cmp .anim-rob__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.anim-rob.is-cmp .anim-rob__now{display:block;margin-top:6px;padding:8px 12px 10px;border-left:3px solid var(--anim-rob-hot);background:var(--anim-rob-tile);border-radius:0 10px 10px 0}
@media (orientation:landscape) and (max-height:500px) and (max-width:1024px){.anim-rob{max-width:none;display:grid;grid-template-columns:minmax(0,calc((100vh - 130px)*1.5)) minmax(0,1fr);grid-template-columns:minmax(0,calc((100svh - 130px)*1.5)) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;align-items:start}.anim-rob__stage{grid-row:1/span 4}.anim-rob__tools{margin-top:0}.anim-rob__steps{grid-template-columns:1fr}}
@media (orientation:landscape) and (max-height:500px) and (max-width:720px){.anim-rob{grid-template-columns:minmax(0,calc((100vh - 200px)*1.5)) minmax(0,1fr);grid-template-columns:minmax(0,calc((100svh - 200px)*1.5)) minmax(0,1fr)}.anim-rob__legend{display:none}.anim-rob.is-cmp .anim-rob__steps{margin-top:6px}.anim-rob.is-cmp .anim-rob__now{margin-top:4px;padding:6px 10px}}
@media (min-height:501px){.anim-rob.is-cmp .anim-rob__stage{max-width:calc((100vh - 330px)*1.5);max-width:calc((100svh - 330px)*1.5);margin-inline:auto}}
.anim-rob:is(.is-rm,.is-init) :is(.anim-rob__lbl,.anim-rob__step){transition:none}
@media (hover:hover){.anim-rob__play:hover,.anim-rob__step:hover{border-color:var(--anim-rob-hot)}}
@media (prefers-reduced-motion:reduce){.anim-rob__lbl,.anim-rob__step{transition:none}}

/* ---------- Teil 2: Portalanlage (.anim-fgp) ---------- */
.anim-fgp{--anim-fgp-line:var(--brand-blue);--anim-fgp-part:var(--brand-orange);--anim-fgp-hot:var(--brand-orange);--anim-fgp-powder:var(--brand-gray-light);--anim-fgp-grain:var(--brand-gray-mid);--anim-fgp-mech:var(--brand-gray-mid);--anim-fgp-plate:color-mix(in srgb,var(--brand-gray-light) 55%,var(--bg-elev));--anim-fgp-card:var(--bg-alt);--anim-fgp-tile:var(--bg-elev);--anim-fgp-on-hot:var(--brand-blue);--anim-fgp-dp:color-mix(in srgb,var(--brand-gray-mid) 26%,var(--bg-alt));--anim-fgp-dm:color-mix(in srgb,var(--brand-gray-mid) 45%,var(--bg-alt));container-type:inline-size;width:100%;max-width:680px;margin:0 auto;padding:clamp(12px,2.2vw,20px);border-radius:var(--radius-lg);background:var(--anim-fgp-card);box-shadow:var(--shadow-md);color:var(--text);font-family:var(--font-sans)}
html[data-theme='dark'] .anim-fgp{--anim-fgp-line:var(--brand-blue-light);--anim-fgp-powder:var(--anim-fgp-dp);--anim-fgp-mech:var(--anim-fgp-dm);--anim-fgp-plate:var(--anim-fgp-dp)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .anim-fgp{--anim-fgp-line:var(--brand-blue-light);--anim-fgp-powder:var(--anim-fgp-dp);--anim-fgp-mech:var(--anim-fgp-dm);--anim-fgp-plate:var(--anim-fgp-dp)}}
.anim-fgp__stage{position:relative;aspect-ratio:3/2;container:anim-fgp-st/inline-size}
.anim-fgp__svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.anim-fgp__ln{fill:none;stroke:var(--anim-fgp-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.anim-fgp__win,.anim-fgp__tcar{fill:var(--anim-fgp-tile);stroke:var(--anim-fgp-line);stroke-width:1.5}
.anim-fgp__rail{fill:none;stroke:var(--anim-fgp-mech);stroke-width:1.5}
.anim-fgp__mech{fill:var(--anim-fgp-mech)}
.anim-fgp__car{fill:var(--anim-fgp-mech);stroke:var(--anim-fgp-card);stroke-width:2.5}
.anim-fgp__ram{stroke:var(--anim-fgp-mech);stroke-width:12}
.anim-fgp__pw{fill:var(--anim-fgp-powder)}
.anim-fgp__plate{fill:var(--anim-fgp-plate);stroke:var(--anim-fgp-mech);stroke-width:1.5}
.anim-fgp__gr{fill:var(--anim-fgp-grain)}
.anim-fgp__pel{fill:url(#anim-fgp-pel)}
.anim-fgp__in{fill:var(--anim-fgp-tile)}
.anim-fgp__part{fill:var(--anim-fgp-part)}
.anim-fgp__kv{stroke:var(--anim-fgp-part)}
.anim-fgp__hot{fill:url(#anim-fgp-hatch)}
.anim-fgp__hk{fill:none;stroke:url(#anim-fgp-hk);stroke-width:7.75;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:6}
.anim-fgp__dot{fill:var(--anim-fgp-hot)}
.anim-fgp__noff{fill:var(--anim-fgp-tile);stroke:var(--anim-fgp-hot);stroke-width:1.5}
.anim-fgp__hl{fill:none;stroke:var(--anim-fgp-card);stroke-width:1.4}
.anim-fgp__bead{stroke:var(--anim-fgp-card);stroke-width:1.5}
.anim-fgp__screw{fill:var(--anim-fgp-line)}
.anim-fgp__flight{stroke:var(--anim-fgp-line);stroke-width:3}
.anim-fgp__band{fill:var(--anim-fgp-powder);stroke:var(--anim-fgp-line);stroke-width:1.5}
.anim-fgp__band.is-on{fill:url(#anim-fgp-hatch)}
.anim-fgp__hose{fill:none;stroke:var(--anim-fgp-mech);stroke-width:13;stroke-linecap:round}
.anim-fgp__hose-in{fill:none;stroke:var(--anim-fgp-powder);stroke-width:8;stroke-linecap:round}
.anim-fgp__dots{fill:none;stroke:var(--anim-fgp-grain);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:0 10}
.anim-fgp__arrow{fill:none;stroke:var(--anim-fgp-hot);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.anim-fgp__lbls{position:absolute;inset:0;pointer-events:none}
.anim-fgp__lbl{position:absolute;left:0;top:0;padding:2px 7px;text-align:center;border-radius:6px;background:var(--anim-fgp-card);color:var(--text);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;transition:opacity .25s}
.anim-fgp__lbl.is-on{opacity:1}
.anim-fgp__lbl--plain{background:none;padding:0}
.anim-fgp__lbl--mute{color:var(--text-muted);font-weight:500}
.anim-fgp__lbl--badge{border:1.5px solid var(--anim-fgp-hot);font-weight:500}
.anim-fgp__s{display:none}
.anim-fgp__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}
.anim-fgp__play{display:none;align-items:center;gap:8px;min-width:8.6em;min-height:44px;padding:6px 16px 6px 12px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--anim-fgp-tile);color:var(--text);font-size:14px;font-weight:600}
.anim-fgp.is-js .anim-fgp__play{display:inline-flex}
.anim-fgp__play svg{width:14px;height:14px;fill:currentColor}
.anim-fgp .anim-fgp__i-play,.anim-fgp.is-playing .anim-fgp__i-pause{display:block}
.anim-fgp .anim-fgp__i-pause,.anim-fgp.is-playing .anim-fgp__i-play{display:none}
.anim-fgp__legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none;color:var(--text-muted);font-size:12px;line-height:1.3}
.anim-fgp__legend li{display:flex;align-items:center;gap:6px}
.anim-fgp__legend svg{width:16px;height:16px;flex:none;border:1px solid var(--border-strong);border-radius:3px}
.anim-fgp__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.anim-fgp__steps li{display:flex}
.anim-fgp__step{position:relative;display:flex;gap:10px;align-items:flex-start;width:100%;min-height:44px;padding:10px 12px 12px;border:1px solid var(--border-strong);border-radius:14px;background:transparent;color:var(--text);text-align:left;overflow:hidden;transition:background-color .2s,border-color .2s}
.anim-fgp__step:focus-visible,.anim-fgp__play:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.anim-fgp__step.is-active{background:var(--anim-fgp-tile);border-color:var(--anim-fgp-hot)}
.anim-fgp__num{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--text-muted);border-radius:50%;color:var(--text-muted);font-size:13px;font-weight:600;line-height:1}
.anim-fgp__step.is-active .anim-fgp__num{background:var(--anim-fgp-hot);border-color:var(--anim-fgp-hot);color:var(--anim-fgp-on-hot)}
.anim-fgp__ttl{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.anim-fgp__dsc{display:block;margin-top:2px;color:var(--text-muted);font-size:13px;line-height:1.45}
.anim-fgp__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--anim-fgp-hot);transform:scaleX(0);transform-origin:0 50%;visibility:hidden}
.anim-fgp.is-playing .anim-fgp__step.is-active .anim-fgp__prog{visibility:visible}
.anim-fgp__now{display:none}
.anim-fgp.is-cmp .anim-fgp__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.anim-fgp.is-cmp .anim-fgp__step{justify-content:center;align-items:center;padding:8px 4px}
.anim-fgp.is-cmp .anim-fgp__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.anim-fgp.is-cmp .anim-fgp__now{display:block;margin-top:6px;padding:8px 12px 10px;border-left:3px solid var(--anim-fgp-hot);background:var(--anim-fgp-tile);border-radius:0 10px 10px 0}
@container (min-width:520px){.anim-fgp__lbl{font-size:13px}}
@container (max-width:430px){.anim-fgp__steps{grid-template-columns:1fr}}
@container anim-fgp-st (max-width:430px){.anim-fgp__l,.anim-fgp__lbl--dsk{display:none}.anim-fgp__s{display:inline}}
@media (orientation:landscape) and (max-height:500px) and (max-width:1024px){.anim-fgp{max-width:none;display:grid;grid-template-columns:minmax(0,calc((100vh - 130px)*1.5)) minmax(0,1fr);grid-template-columns:minmax(0,calc((100svh - 130px)*1.5)) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;align-items:start}.anim-fgp__stage{grid-row:1/span 4}.anim-fgp__tools{margin-top:0}.anim-fgp__steps{grid-template-columns:1fr}}
/* anim-fgf: wie Roboteranlage */
@media (orientation:landscape) and (max-height:500px) and (max-width:720px){.anim-fgp{grid-template-columns:minmax(0,calc((100vh - 200px)*1.5)) minmax(0,1fr);grid-template-columns:minmax(0,calc((100svh - 200px)*1.5)) minmax(0,1fr)}.anim-fgp__legend{display:none}.anim-fgp.is-cmp .anim-fgp__steps{margin-top:6px}.anim-fgp.is-cmp .anim-fgp__now{margin-top:4px;padding:6px 10px}}
@media (min-height:501px){.anim-fgp.is-cmp .anim-fgp__stage{max-width:calc((100vh - 330px)*1.5);max-width:calc((100svh - 330px)*1.5);margin-inline:auto}}
.anim-fgp.is-rm .anim-fgp__lbl,.anim-fgp.is-rm .anim-fgp__step,.anim-fgp.is-init .anim-fgp__lbl,.anim-fgp.is-init .anim-fgp__step{transition:none}
@media (hover:hover){.anim-fgp__play:hover,.anim-fgp__step:hover{border-color:var(--anim-fgp-hot)}}
@media (prefers-reduced-motion:reduce){.anim-fgp__lbl,.anim-fgp__step{transition:none}}