/* Mesh-Puls 0.3.0 — konsistentes, wechselbares Farbsystem. Keine externe CSS-Library. */
:root,[data-theme="light"]{
 color-scheme:light;
 --ink:#162437;--ink-2:#2b4057;--muted:#62758b;--jade:#2567c8;--mint:#d9e9ff;
 --canvas:#e8eef5;--surface:#ffffff;--surface-soft:#f3f7fb;--surface-hover:#eaf1fc;
 --field:#f6f9fd;--line:#dbe4ef;--accent:#286bd1;--accent-soft:#e6efff;
 --accent-ink:#ffffff;--success:#108577;--warning:#d19a37;--text-on-brand:#fff;
 --shadow:0 18px 50px rgba(17,38,66,.13),0 2px 8px rgba(17,38,66,.06);
 --header:#14243a;--header-icon:#80baff;--header-sub:#a7bdd8;
 --map-vignette:rgba(235,241,249,.24);--tile-filter:saturate(.85) contrast(.95) brightness(1.03);
 --hint-bg:#fff5df;--hint-border:#f1dfb5;--hint-text:#946a29;
 --badge-bg:#e6f7f2;--badge-fg:#147e68;
}
[data-theme="dark"]{
 color-scheme:dark;
 --ink:#e8f0fb;--ink-2:#c8d7e9;--muted:#9fb1c8;--jade:#80b8ff;--mint:#203955;
 --canvas:#0b1321;--surface:#142237;--surface-soft:#1a2c43;--surface-hover:#223955;
 --field:#192a40;--line:#314660;--accent:#84b7ff;--accent-soft:#203d60;
 --accent-ink:#0b172a;--success:#4bd6ad;--warning:#f1c173;--text-on-brand:#fff;
 --shadow:0 16px 50px rgba(0,4,15,.5),0 2px 10px rgba(0,4,15,.25);
 --header:#0c192b;--header-icon:#89beff;--header-sub:#a6bdd5;
 --map-vignette:rgba(8,17,30,.12);--tile-filter:grayscale(.36) invert(.93) hue-rotate(180deg) brightness(.86) contrast(.9);
 --hint-bg:#392d24;--hint-border:#6c4c2a;--hint-text:#e9c88e;
 --badge-bg:#18483f;--badge-fg:#8ae7c9;
}
html,body{background:var(--canvas);color:var(--ink);transition:background .22s,color .22s}
button,input,select{color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.map{background:var(--canvas)}#offline-map{opacity:.55;filter:saturate(.5)}
[data-theme=dark] #offline-map{opacity:.65;filter:invert(.85) hue-rotate(175deg) saturate(.6) brightness(.65)}
#tile-layer img{filter:var(--tile-filter);opacity:0}
#tile-layer img.loaded{opacity:1}
.map-vignette{background:linear-gradient(90deg,var(--map-vignette),transparent 35%,transparent 66%,var(--map-vignette))}
.marker-ring{background:#1876c0;border-color:#fff;box-shadow:0 3px 12px rgba(20,32,53,.3)}
.marker-ring:before{background:#eaf6ff;box-shadow:0 0 0 3px rgba(255,255,255,.23)}
.map-marker:hover .marker-ring,.map-marker.selected .marker-ring{box-shadow:0 0 0 7px rgba(57,150,237,.2),0 5px 25px rgba(5,28,54,.27)}
.map-marker.warn .marker-ring{background:#d19a37}.map-marker.down .marker-ring{background:#8193a7}
.marker-caption{background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--shadow)}
.map-watermark,.tile-attrib{background:var(--surface);color:var(--muted);border:1px solid var(--line)}.tile-attrib a{color:var(--accent)}
.brand{background:var(--header);border:1px solid var(--line);box-shadow:var(--shadow)}
.brand-icon{background:var(--header-icon);color:#0c203c}.brand-text span{color:var(--header-icon)}
.brand-text span[style]{color:var(--header-sub)!important}.brand-sub{color:var(--header-sub)}
.nav-shell,.live-pill,.map-style-switch,.theme-switch,.layout-reset{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow)}
.nav-item{color:var(--muted)}.nav-item.active{background:var(--accent);color:var(--accent-ink)}.nav-item:not(.active):hover{background:var(--surface-hover);color:var(--ink)}
.login-btn,.primary{background:var(--accent);color:var(--accent-ink)}
.live-dot{background:var(--success);box-shadow:0 0 0 3px var(--badge-bg)}
.left-panel,.drawer,.stat-card,.toolgroup,.dash-kpi,.dash-box,.help-menu,.help-article,.device,.modal{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
.left-panel,.drawer{backdrop-filter:blur(15px)}
.eyebrow,.panel-intro,.panel-bottom,.station-location,.mini-section h3 span,.stat-top,.stat-desc,.drawer p,.rf-box .unit,.rf-box .small,.detail-row span:first-child,.screen .sub,.dash-kpi span,.dash-box p,.chart-legend,.audit-table th,.help-article p,.help-article li,.device p,.modal p,.note,.station-mini,.range-row,.filter-footer,.checkline{color:var(--muted)}
.eyebrow{color:var(--accent)}
.search-box,.select,.seg,.rf-box,.device select,.modal input,.help-article code{background:var(--field);color:var(--ink);border-color:var(--line)}
.search-box input{color:var(--ink)}.search-box input::placeholder{color:var(--muted)}
.seg button{color:var(--muted)}.seg button.active{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.range-row strong,.text-button,.station-snr,.panel-bottom b,.detail-row b{color:var(--accent)}
input[type=range],.checkline input{accent-color:var(--accent)}
.filter-footer,.mini-section,.station-mini,.panel-bottom,.detail-row,.audit-table td,.audit-table th{border-color:var(--line)}
.station-mini:hover{background:var(--surface-hover)}.panel-bottom{background:var(--surface-soft)}
.status-circle{background:var(--success);box-shadow:0 0 0 3px var(--badge-bg)}.status-circle.offline{background:var(--muted);box-shadow:0 0 0 3px var(--surface-hover)}
.stat-icon,.device-logo{color:var(--accent);background:var(--accent-soft)}
.stat-card:nth-child(2) .stat-icon{color:var(--warning);background:var(--hint-bg)}
.toolgroup button{color:var(--ink)}.toolgroup button+button{border-color:var(--line)}.toolgroup button:hover{background:var(--surface-hover)}
.timeline{background:var(--header);color:#e6f0ff;box-shadow:var(--shadow)}
.timeline-label{color:var(--header-sub)}.timeline-bars i{background:#3889c9}.timeline-bars i:nth-child(3n){background:#79cbec}
.timeline-options button{color:var(--header-sub)}.timeline-options button.active{background:#80baff;color:#10203a}
.demo-tag,.pill{background:var(--badge-bg);color:var(--badge-fg)}
.icon-btn{background:var(--surface-soft);color:var(--muted)}.icon-btn:hover{background:var(--surface-hover)}
.rf-box{border-color:var(--line)}.trend{border-color:var(--line);background:var(--surface-soft)}
.hint,.help-article .callout,.feedback{background:var(--hint-bg);border-color:var(--hint-border);color:var(--hint-text)}
.screen{background:var(--canvas);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
.screen h1 span[style]{color:var(--accent)!important}
.button-lite{background:var(--surface);border-color:var(--line);color:var(--accent)}
.button-lite:hover{background:var(--surface-hover)}
.dash-kpi small{color:var(--success)}.chart-legend i{background:var(--success)}.chart-legend i.blue{background:var(--accent)}
.admin-bars{border-color:var(--line)}.admin-bars>div{background:linear-gradient(var(--accent),var(--accent-soft))}.admin-bars span{color:var(--muted)}
.pill.warn{background:var(--hint-bg);color:var(--hint-text)}
.note{background:var(--surface-soft);color:var(--muted);border-color:var(--line)}
.help-menu button{color:var(--muted)}.help-menu button.active{background:var(--accent-soft);color:var(--accent)}
.help-article code{color:var(--accent)}.help-article pre{background:var(--header);color:#dbedff}
.device{border-color:var(--line)}.device select{border-color:var(--line)}
.danger{color:#c96358;background:var(--surface);border-color:var(--line)}
.modal-wrap{background:rgba(6,12,23,.66)}
.feedback{border-width:1px;border-style:solid}
/* Kartenwahl und Designmodus oben rechts */
.head-actions{gap:8px}
.map-style-switch{display:flex;align-items:center;padding:4px;border-radius:12px;gap:2px}
.map-style-switch button{background:transparent;border:0;border-radius:8px;padding:8px 11px;color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap}
.map-style-switch button.active{background:var(--accent);color:var(--accent-ink)}
.map-style-switch button:not(.active):hover{background:var(--surface-hover);color:var(--ink)}
.theme-switch{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;min-height:39px;border-radius:12px;font-size:11px;font-weight:850;white-space:nowrap}
.theme-switch:hover{background:var(--surface-hover)}.theme-icon{font-size:17px;line-height:1}
/* Einheitliche Fenstergriffe / Minimieren */
.widget-header{height:37px;display:flex;align-items:center;gap:8px;padding:0 11px;border-bottom:1px solid var(--line);background:var(--surface-soft);color:var(--muted);touch-action:none;cursor:grab;user-select:none;flex-shrink:0}
.widget-header:active,.timeline-grip:active{cursor:grabbing}
.drag-dots{font-size:18px;letter-spacing:-5px;padding-right:6px;line-height:1;opacity:.8}
.widget-name{font-size:10px;letter-spacing:.45px;text-transform:uppercase;font-weight:850;flex:1}
.widget-minimize{flex-shrink:0;display:grid;place-items:center;width:27px;height:25px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font-size:17px;line-height:1}
.widget-minimize:hover{background:var(--surface-hover)}
.left-panel{max-height:calc(100vh - 120px)}
.left-panel.is-minimized{height:37px!important;min-height:0!important;max-height:37px!important;bottom:auto!important}
.left-panel.is-minimized .panel-scroll,.left-panel.is-minimized .panel-bottom{display:none!important}
.stat-stack{gap:8px}.stat-stack .widget-header{border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);height:37px;background:var(--surface)}
.stat-stack.is-minimized .stat-card{display:none!important}
.stat-stack.is-minimized{min-height:0}
.drawer{padding:0;overflow:auto}.drawer .widget-header{position:sticky;top:0;z-index:1;border-radius:16px 16px 0 0}
.drawer> :not(.widget-header){margin-left:19px;margin-right:19px}
.drawer>.hint{margin-bottom:19px}
.drawer.is-minimized{height:37px!important;max-height:37px!important;overflow:hidden!important}
.drawer.is-minimized> :not(.widget-header){display:none!important}
.drawer .widget-header{margin:0!important}
.timeline{padding:7px 9px 7px 10px;gap:10px;min-height:45px}
.timeline-grip{color:var(--header-sub);font-size:18px;cursor:grab;touch-action:none;user-select:none}
.timeline .widget-minimize{border-color:#45607c;background:#203451;color:#fff;height:26px;width:26px}
.timeline.is-minimized{min-width:0!important;width:144px!important}
.timeline.is-minimized .timeline-bars,.timeline.is-minimized .timeline-options{display:none!important}
/* Informationen und mobile Bedienbarkeit */
.map-watermark{max-width:55vw}.toolgroup button{min-height:41px}
@media(max-width:1250px){.head-actions .live-pill{display:none}.map-style-switch button{padding:8px}.theme-switch{padding:9px}}
@media(max-width:960px){.theme-switch #theme-label{display:none}.map-style-switch button{font-size:10px;padding:7px}.head-actions{gap:5px}}
@media(max-width:820px){
 .header{left:10px;right:10px;top:10px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px}
 .header .nav-shell{grid-column:1 / -1;grid-row:2;order:unset;width:100%;justify-content:space-evenly}
 .header .head-actions{grid-column:2;grid-row:1;justify-self:end}
 .header .brand{grid-column:1;grid-row:1}
 .left-panel{left:10px;top:128px;max-height:calc(100vh - 200px)}
 .stat-stack{top:128px;right:10px}.drawer{top:128px}
 .timeline{bottom:10px}.map-toolbar{bottom:75px}
}
@media(max-width:540px){
 .header .brand-text{font-size:16px}.header .brand-sub{font-size:7px}.header .brand-icon{width:27px;height:27px}
 .header .login-btn{padding:8px 9px;font-size:10px}
 .header .map-style-switch button{padding:7px 6px}.header .theme-switch{padding:7px 8px}
 .nav-item{padding:9px 4px;font-size:10px}
 .left-panel{top:125px;bottom:auto;max-height:min(52vh,470px)}
 .stat-stack{top:auto;bottom:95px;width:160px}
 .stat-stack .stat-card{padding:9px 11px}
 .drawer{top:125px;width:min(340px,calc(100% - 20px));max-height:calc(100% - 205px)}
 .timeline{width:calc(100% - 20px);min-width:0;gap:5px}
 .timeline .timeline-bars{gap:2px}.timeline-options button{padding:6px 3px}
 .map-toolbar{bottom:85px}.map-watermark{display:none}
}
@media(prefers-reduced-motion:reduce){html,body,#tile-layer img,.marker-ring{transition:none!important}}


/* Kleine Viewports: Beschriftung darf Fenster nicht künstlich verbreitern. */
.stat-stack{min-width:0}.stat-stack .widget-header{min-width:0}
.stat-stack .widget-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.stat-stack{grid-template-columns:minmax(0,1fr)}.stat-stack .stat-card{min-width:0;overflow-wrap:anywhere}
@media(max-width:540px){
 .header .brand{padding:6px 8px}
 .header .brand-sub{letter-spacing:.7px}
 .header .map-style-switch button{padding:7px 5px;font-size:9px}
 .header .theme-switch{padding:7px 6px}
 .header .login-btn{padding:7px 8px;font-size:9px}
}