/* Trommelfilter-Animation – auf .tf-anim begrenzt, damit das Seitendesign unberührt bleibt */

.tf-anim{
  --bg:#f4f7fa; --card:#ffffff; --text:#1d2a36; --muted:#5b6b7a; --line:#d5dee6;
  --earth:#dccaa8; --ground:#9c7f58; --wall:#7d8c9b; --air:#f8fbfd;
  --clean:#3d9be0; --pond:#2f86c4; --dirty:#7f8f4e; --dirtc:#6b4c25;
  --pipe:#a3afba; --mesh:#4f5d6b; --spray:#9fd8ff; --accent:#e5533d; --ok:#2e9d5b; --uvc:#7b4fd6;
}
@media (prefers-color-scheme:dark){
  .tf-anim{
    --bg:#0f161d; --card:#17212b; --text:#e3eaf0; --muted:#93a4b3; --line:#2b3a48;
    --earth:#3b3226; --ground:#7a6447; --wall:#6c7c8b; --air:#1b2631; --pipe:#5c6a78; --mesh:#b7c4d0;
  }
}
.tf-anim h1{color:var(--text);font-size:1.6rem;margin:0 0 4px}
.tf-anim .intro{color:var(--muted);margin:0 0 16px;max-width:780px}
.tf-anim .controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tf-anim button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--text);padding:6px 14px;border-radius:8px;cursor:pointer}
.tf-anim button:hover{border-color:var(--clean)}
.tf-anim .grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:1000px){.tf-anim .grid{grid-template-columns:1fr 1fr}}
.tf-anim .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.tf-anim .card h2{color:var(--text);margin:0 0 8px;font-size:1.15rem}
.tf-anim svg{width:100%;height:auto;display:block;border-radius:10px;background:var(--air)}
.tf-anim .status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 6px;font-size:.92rem}
.tf-anim .badge{padding:2px 10px;border-radius:99px;font-weight:600;font-size:.85rem;color:#fff;background:var(--ok)}
.tf-anim .badge.clean{background:#2f86c4}
.tf-anim .badge.fault{background:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
.tf-anim button.on{border-color:var(--accent);color:var(--accent)}
.tf-anim .tfbar{flex:1;min-width:120px;height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.tf-anim .tfbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),#e0b034,var(--accent))}
.tf-anim .desc{color:var(--muted);font-size:.92rem;margin:6px 0 0}
.tf-anim .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;color:var(--muted);font-size:.88rem}
.tf-anim .legend span{display:inline-flex;align-items:center;gap:6px}
.tf-anim .legend b{width:12px;height:12px;border-radius:50%;display:inline-block}

/* SVG */
.tf-anim .earth{fill:var(--earth)} .tf-anim .groundline{stroke:var(--ground);stroke-width:3}
.tf-anim .pit{fill:var(--air);stroke:var(--wall);stroke-width:3}
.tf-anim .pondwater{fill:var(--pond);opacity:.8}
.tf-anim .chamberbg{fill:var(--air)} .tf-anim .chamberline{fill:none;stroke:var(--wall);stroke-width:4}
.tf-anim .cleanwater{fill:var(--clean);opacity:.45}
.tf-anim .dirtywater{fill:var(--dirty);opacity:.7}
.tf-anim .drumair{fill:var(--air)}
.tf-anim .mesh{fill:none;stroke:var(--mesh);stroke-width:3;stroke-dasharray:2 3}
.tf-anim .rib{stroke:var(--mesh);stroke-width:2}
.tf-anim .axle{fill:var(--wall);stroke:var(--air);stroke-width:2}
.tf-anim .trough{fill:none;stroke:var(--wall);stroke-width:3}
.tf-anim .pipe{fill:none;stroke:var(--pipe);stroke-width:12;stroke-linejoin:round;stroke-linecap:round}
.tf-anim .core{fill:none;stroke-width:7;stroke-linejoin:round}
.tf-anim .core.in{stroke:var(--dirty)} .tf-anim .core.out{stroke:var(--clean)} .tf-anim .core.dp{stroke:#8a6a3c}
.tf-anim .pump{fill:#4a5868;stroke:#fff;stroke-width:2;transition:fill .3s} .tf-anim .pump.off{fill:var(--accent)}
.tf-anim .inbox{fill:var(--air)} .tf-anim .inboxl{fill:none;stroke:var(--wall);stroke-width:3}
.tf-anim .pumpt{fill:#fff;font:bold 11px system-ui;text-anchor:middle;dominant-baseline:central}
.tf-anim .uvc{fill:var(--uvc);stroke:#fff;stroke-width:1.5}
.tf-anim .uvct{fill:#fff;font:bold 10px system-ui;text-anchor:middle;dominant-baseline:central}
.tf-anim .sprayb{fill:var(--wall);transition:fill .2s} .tf-anim .sprayb.on{fill:var(--accent)}
.tf-anim .shead{fill:#4a5868;stroke:#fff;stroke-width:1.5}
.tf-anim .estab{stroke:#9aa7b4;stroke-width:2.5;stroke-linecap:round;transition:stroke .2s}
.tf-anim .estab.wet{stroke:#e0a62c}
.tf-anim .led{fill:#6c7782;transition:fill .2s} .tf-anim .led.wet{fill:#3ddc6a}
.tf-anim .thr{stroke:#2f86c4;stroke-width:2;stroke-dasharray:4 3} .tf-anim .thr.dry{stroke:var(--accent)}
.tf-anim .lbl.b{fill:#2f86c4;font-size:10px}
.tf-anim .grate{fill:var(--wall)}
.tf-anim .lbl{font:12px system-ui,sans-serif;fill:var(--text)}
.tf-anim .lbl.s{font-size:10.5px;fill:var(--muted)}
.tf-anim .lbl.w{fill:#fff;font-weight:600}
.tf-anim .lbl.r{fill:var(--accent);font-size:10px}
.tf-anim .pt.pd{fill:#c9d48f} .tf-anim .pt.pc{fill:#e8f6ff} .tf-anim .pt.sp{fill:var(--spray)} .tf-anim .pt.px{fill:#5a3d17}
.tf-anim .dot{fill:var(--dirtc)}

.tf-anim{background:var(--bg);color:var(--text);border-radius:var(--radius,14px);padding:22px 20px 26px;font-size:15px;line-height:1.5}
.tf-anim svg{max-width:100%}
.tf-anim .controls button{font-weight:600}