/* Gateway-Animationen M-Bus → Modbus TCP / MQTT (Fragmente gw-*, Skript assets/js/gwanim.js) */
.gwa{--gwa-ink:var(--ink,#1b2733);--gwa-blue:var(--brand,#0a69b4);--gwa-ok:#1f9d55;--gwa-bus1:#2b2f36;--gwa-bus2:#8a929c;--gwa-eth:#5b8fc7;margin:2rem 0 2.5rem;container-type:inline-size;font-family:var(--font-body)}
.gwa__frame{position:relative;background:var(--bg-alt,#f2f5f8);border:1px solid var(--line,#dde3ea);border-radius:var(--r,18px);overflow:hidden}
.gwa__stage{position:relative}
.gwa__crop{position:relative;width:100%;aspect-ratio:1600/900;overflow:hidden}
.gwa__canvas{position:absolute;inset:0;width:100%;height:100%;container-type:inline-size}
.gwa__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gwa__wire{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gwa__wire--b1{stroke:var(--gwa-bus1);stroke-width:3.2}
.gwa__wire--b2{stroke:var(--gwa-bus2);stroke-width:3.2}
.gwa__wire--eth{stroke:var(--gwa-eth);stroke-width:9;opacity:.85}
.gwa__wire--eth2{stroke:#fff;stroke-width:2;opacity:.5;stroke-dasharray:2 10}
.gwa__pkt{transition:opacity .2s}
.gwa__pkt--q{fill:var(--gwa-blue)}
.gwa__pkt--a{fill:var(--gwa-ok)}
.gwa__pkt-lbl{font:600 15px/1 var(--font-mono,monospace);fill:var(--gwa-ink)}
.gwa__pkt-bg{fill:#fff;stroke:var(--line,#dde3ea)}
.gwa__abs{position:absolute}
.gwa__abs img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.gwa__meter{filter:drop-shadow(0 6px 10px rgba(20,30,45,.18));transition:transform .3s}
.gwa__meter.is-hot{transform:translateY(-4px)}
.gwa__meter.is-hot img{outline:3px solid var(--gwa-blue);outline-offset:3px;border-radius:4px}
.gwa__lcd{position:absolute;left:27.6%;top:49.6%;width:20.4%;height:7.9%;background:rgb(117,136,221);color:rgb(23,28,124);font:700 1.18cqw/1 "Courier New",var(--font-mono,monospace);display:flex;align-items:center;justify-content:flex-end;letter-spacing:-.04em;padding-right:.2em;box-sizing:border-box}
.gwa__led{position:absolute;width:3.2%;aspect-ratio:1;border-radius:50%;left:75.1%;top:38%;background:transparent;transition:background .05s,box-shadow .05s}
.gwa__led.is-on{background:#ff3b2f;box-shadow:0 0 .9em .25em rgba(255,60,40,.75)}
.gwa__tag{position:absolute;left:2%;right:0;top:101%;text-align:left;font:600 clamp(9px,1.05cqw,14px)/1.25 var(--font-body);color:var(--gwa-ink);white-space:nowrap}
.gwa__tag small{display:block;font-weight:400;color:var(--fg-muted,#5c6773)}
.gwa__mc{filter:drop-shadow(0 10px 16px rgba(20,30,45,.22))}
.gwa__mc-lbl{position:absolute;left:0;right:0;top:102%;text-align:center;font:600 clamp(9px,1.1cqw,15px)/1.3 var(--font-body);color:var(--gwa-ink)}
.gwa__mc-lbl small{display:block;font:400 clamp(8px,.95cqw,13px)/1.3 var(--font-mono,monospace);color:var(--fg-muted,#5c6773)}
.gwa__hl{position:absolute;border:3px solid var(--gwa-blue);border-radius:6px;opacity:0;transition:opacity .25s;pointer-events:none}
.gwa__hl.is-on{opacity:1;animation:gwa-ring 1s ease-in-out infinite}
@keyframes gwa-ring{50%{box-shadow:0 0 0 6px rgba(10,105,180,.18)}}
.gwa__panel{background:#fff;border:1px solid var(--line,#dde3ea);border-radius:12px;box-shadow:0 8px 22px rgba(20,30,45,.08);padding:1.1cqw 1.2cqw;box-sizing:border-box;font-size:clamp(10px,1.08cqw,15px);line-height:1.35;color:var(--gwa-ink);display:flex;flex-direction:column;gap:.6em;overflow:hidden}
.gwa__ph{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:1.08em}
.gwa__ph small{display:block;font-weight:400;font-size:.82em;color:var(--fg-muted,#5c6773)}
.gwa__ph i{width:.7em;height:.7em;border-radius:50%;background:var(--gwa-ok);box-shadow:0 0 0 .25em rgba(31,157,85,.18);flex:none}
.gwa__rows{display:grid;gap:.35em}
.gwa__row{display:grid;grid-template-columns:auto 1fr auto;gap:.2em .7em;align-items:baseline;padding:.45em .6em;border-radius:8px;background:var(--bg-alt,#f2f5f8);transition:background .3s}
.gwa__row b{font-weight:700}
.gwa__row code,.gwa__mono{font-family:var(--font-mono,monospace);font-size:.92em}
.gwa__row .gwa__val{font:700 1em/1 var(--font-mono,monospace);text-align:right;min-width:6.5ch}
.gwa__row.is-new{background:#e3f4ea}
.gwa__log{flex:1;min-height:0;background:#101820;color:#cfe3f3;border-radius:8px;padding:.7em .8em;font:400 .9em/1.45 var(--font-mono,monospace);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.gwa__log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:gwa-in .3s ease-out}
.gwa__log .q{color:#8cc8ff}.gwa__log .a{color:#8ff0b1}.gwa__log .c{color:#7d8b97}
@keyframes gwa-in{from{opacity:0;transform:translateY(.4em)}}
.gwa__tree{font:400 .9em/1.5 var(--font-mono,monospace);background:var(--bg-alt,#f2f5f8);border-radius:8px;padding:.6em .7em;word-break:break-all}
.gwa__tree .base{color:var(--fg-muted,#5c6773)}
.gwa__tree .t{display:block;padding-left:1em;transition:background .3s;border-radius:4px}
.gwa__tree .t.is-new{background:#e3f4ea}
.gwa__subs{display:flex;flex-wrap:wrap;gap:.45em}
.gwa__sub{padding:.35em .7em;border-radius:999px;border:1px solid var(--line,#dde3ea);background:#fff;font-weight:600;font-size:.92em;transition:background .25s,border-color .25s,color .25s}
.gwa__sub.is-on{background:var(--gwa-ok);border-color:var(--gwa-ok);color:#fff}
.gwa__lbl{font-size:.82em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted,#5c6773)}
.gwa__foot{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.2rem;border-top:1px solid var(--line,#dde3ea);background:#fff}
.gwa__btn{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:var(--gwa-blue);color:#fff;cursor:pointer;display:grid;place-items:center}
.gwa__btn svg{width:1rem;height:1rem;fill:currentColor}
.gwa__btn .i-play{display:none}.gwa.is-paused .gwa__btn .i-play{display:block}.gwa.is-paused .gwa__btn .i-pause{display:none}
.gwa__cap{flex:1;min-height:3.6em}
.gwa__cap b{display:block;font-size:1.02rem;margin-bottom:.15rem}
.gwa__cap p{margin:0;color:var(--fg-muted,#5c6773);font-size:.95rem;line-height:1.5}
.gwa__dots{display:flex;gap:.35rem;margin-top:.55rem}
.gwa__dots span{width:1.6rem;height:.3rem;border-radius:2px;background:var(--line,#dde3ea);transition:background .3s}
.gwa__dots span.is-on{background:var(--gwa-blue)}
.gwa__note{font-size:.85rem;color:var(--fg-muted,#5c6773);margin:.6rem .2rem 0}
/* Schmal: Zielsystem und Registerliste unter die Bühne, Bühne rechts beschneiden */
@container (max-width:760px){
 .gwa__crop{aspect-ratio:1110/900}
 .gwa__canvas{width:144.15%}
 .gwa__side{position:static!important;width:auto!important;height:auto!important;margin:0 .8rem .8rem;font-size:13px;padding:12px 14px}
 .gwa__side .gwa__log{min-height:10.5em;max-height:10.5em}
 .gwa__wire--eth,.gwa__wire--eth2,.gwa__pkt--eth,.gwa__ethlbl{display:none}
 .gwa__tag{font-size:clamp(8px,1.5cqw,13px)}
 .gwa__mc-lbl{font-size:clamp(9px,1.6cqw,14px)}
 .gwa__mc-lbl small{display:none}
}
@media (prefers-reduced-motion:reduce){.gwa__hl.is-on{animation:none}.gwa__log div{animation:none}}

/* gwa-wide: auf grossen Bildschirmen breiter als die Textspalte */
@media (min-width:1100px){.gwa{width:min(1240px,calc(100vw - 64px));margin-left:calc(50% - min(620px,calc(50vw - 32px)))}}