/* Levelcontroller TF-LC01 – auf .lc-anim begrenzt */

.lc-anim{
  --bg:#f4f7fa; --card:#ffffff; --text:#1d2a36; --muted:#5b6b7a; --line:#d5dee6;
  --earth:#dccaa8; --ground:#9c7f58; --air:#f8fbfd; --pond:#2f86c4; --pipe:#a3afba; --wall:#7d8c9b;
  --accent:#e5533d; --ok:#2e9d5b; --blue:#2f86c4; --hl:#eaf4fc;
}
@media (prefers-color-scheme:dark){
  .lc-anim{ --bg:#0f161d; --card:#17212b; --text:#e3eaf0; --muted:#93a4b3; --line:#2b3a48;
    --earth:#3b3226; --ground:#7a6447; --air:#1b2631; --pipe:#5c6a78; --wall:#6c7c8b; --hl:#1d3346; }
}
.lc-anim h1{color:var(--text);font-size:1.65rem;margin:0 0 6px} .lc-anim h2{color:var(--text);font-size:1.2rem;margin:0 0 10px}
.lc-anim .lead{color:var(--muted);max-width:800px;margin:0 0 20px}
.lc-anim .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:20px}
.lc-anim .intro{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:800px){.lc-anim .intro{grid-template-columns:260px 1fr}}
.lc-anim .intro img{width:100%;max-width:260px;border-radius:10px;display:block;margin:0 auto}
.lc-anim .intro figcaption{color:var(--muted);font-size:.85rem;text-align:center;margin-top:6px}
.lc-anim ul.clean{padding-left:18px;margin:6px 0}
.lc-anim .sim{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){.lc-anim .sim{grid-template-columns:1fr 230px}}
.lc-anim svg{width:100%;height:auto;display:block;border-radius:10px;background:var(--air)}
.lc-anim .controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.lc-anim button{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--text);padding:6px 14px;border-radius:8px;cursor:pointer}
.lc-anim button:hover{border-color:var(--blue)} .lc-anim button.on{border-color:var(--accent);color:var(--accent)}
.lc-anim .status{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:.92rem}
.lc-anim .badge{padding:2px 12px;border-radius:99px;font-weight:600;font-size:.85rem;color:#fff;background:var(--ok)}
.lc-anim .badge.fill{background:var(--blue)} .lc-anim .badge.err{background:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
.lc-anim .muted{color:var(--muted);font-size:.85rem}

/* Gerät mit LEDs */
.lc-anim .device{background:#151515;border-radius:14px;padding:18px 16px;color:#ddd;box-shadow:inset 0 0 0 1px #333}
.lc-anim .device h3{margin:0 0 12px;font-size:.95rem;color:#fff}
.lc-anim .ledrow{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:.88rem}
.lc-anim .led{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid #000;transition:.2s}
.lc-anim .led.y{background:#5a5320} .lc-anim .led.y.on{background:#ffd83a;box-shadow:0 0 10px 3px #ffd83a99}
.lc-anim .led.r{background:#4a1a1a} .lc-anim .led.r.on{background:#ff3b30;box-shadow:0 0 10px 3px #ff3b3099}
.lc-anim .led.g{background:#173d22} .lc-anim .led.g.on{background:#35d062;box-shadow:0 0 10px 3px #35d06299}

.lc-anim table{width:100%;border-collapse:collapse;font-size:.9rem}
.lc-anim th,.lc-anim td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.lc-anim th{color:var(--muted);font-weight:600;font-size:.82rem}
.lc-anim tr.act td{background:var(--hl)}
.lc-anim .tw{overflow-x:auto}
.lc-anim .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.lc-anim .d-y{background:#e6c21f}.lc-anim .d-r{background:#e5332a}.lc-anim .d-g{background:#2eb653}.lc-anim .d-o{background:var(--line)}
.lc-anim .w{color:var(--blue);font-weight:600} .lc-anim .t{color:var(--muted)}

/* SVG */
.lc-anim .earth{fill:var(--earth)} .lc-anim .gl{stroke:var(--ground);stroke-width:3}
.lc-anim .basin{fill:var(--air);stroke:var(--wall);stroke-width:3}
.lc-anim .water{fill:var(--pond);opacity:.8}
.lc-anim .pipe{fill:none;stroke:var(--pipe);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.lc-anim .pcore{fill:none;stroke:#3d9be0;stroke-width:6;stroke-linejoin:round;opacity:.25;transition:opacity .3s}
.lc-anim .pcore.on{opacity:1}
.lc-anim .valve{fill:#4a5868;stroke:#fff;stroke-width:2;transition:fill .3s} .lc-anim .valve.on{fill:#2eb653}
.lc-anim .box{fill:#1a1a1a}
.lc-anim .sleeve{fill:#2a2a2a}
.lc-anim .metal{stroke:#b9c2c9;stroke-width:3;stroke-linecap:round;transition:stroke .2s}
.lc-anim .metal.wet{stroke:#f0b429}
.lc-anim .bracket{stroke:var(--wall);stroke-width:5;stroke-linecap:round}
.lc-anim .lbl{font:12px system-ui,sans-serif;fill:var(--text)}
.lc-anim .lbl.s{font-size:10.5px;fill:var(--muted)} .lc-anim .lbl.w{fill:#fff;font-weight:600}
.lc-anim .mark{stroke-width:1.5;stroke-dasharray:4 3}
.lc-anim .mk-full{stroke:#2e9d5b} .lc-anim .mk-low{stroke:#e0802c}
.lc-anim .drop{fill:#3d9be0}
.lc-anim .evap{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:.6}
.lc-anim .svled{transition:fill .2s}

.lc-anim{background:var(--bg);color:var(--text);border-radius:14px;padding:22px 20px 26px;font-size:15px;line-height:1.55}