/* Sensormanager live – Präsentationsbühne auf /software (immer dunkel, wie der Leitstand) */
.sml-section{padding:64px 0 70px!important;background:radial-gradient(120% 90% at 50% 0%,#12304f 0%,#0a1728 46%,#060d18 100%);color:#eef4fb}
.sml-section .sp-kicker{color:#5eead4}
.sml-section .sp-head h2{color:#fff!important}
.sml-section .sp-head p,.sml-section .sp-note{color:#b7c7d8!important}
.sml-section .sp-note a{color:#7dd3fc}
.sml-head{max-width:880px}
.sml-points{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 26px;padding:0;list-style:none}
.sml-points li{font-size:.8rem;font-weight:600;color:#d7e6f5;border:1px solid rgba(140,170,205,.28);border-radius:999px;padding:6px 12px;background:rgba(14,27,44,.6)}
.sml-points button{all:unset;cursor:pointer}
.sml-points button:focus-visible{outline:2px solid #5eead4;outline-offset:4px;border-radius:4px}

.sml-stage{--sml-line:rgba(140,170,205,.16);--sml-text:#eef4fb;--sml-muted:#9fb2c8;--sml-accent:#4aa8ff;position:relative;border:1px solid var(--sml-line);border-radius:18px;background:#060d18;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;color:var(--sml-text);font-feature-settings:"tnum" 1}
.sml-stage button{font:inherit;color:inherit}
.sml-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--sml-line);background:linear-gradient(180deg,#0e1b2c,#0b1726)}
.sml-tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.sml-tabs::-webkit-scrollbar{display:none}
.sml-tab{flex-shrink:0;border:1px solid transparent;background:transparent;border-radius:999px;padding:7px 14px;font-size:.84rem;font-weight:600;color:var(--sml-muted);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.sml-tab:hover{color:#fff;background:rgba(255,255,255,.05)}
.sml-tab[aria-selected=true]{color:#fff;background:rgba(74,168,255,.16);border-color:rgba(74,168,255,.45)}
.sml-tab:focus-visible,.sml-play:focus-visible,.sml-full:focus-visible,.sml-btn:focus-visible,.sml-toggle:focus-visible,.sml-seg button:focus-visible{outline:2px solid #5eead4;outline-offset:2px}
.sml-tab-short{display:none}
.sml-bar-actions{display:flex;gap:6px;flex-shrink:0}
.sml-play,.sml-full{border:1px solid var(--sml-line);background:rgba(255,255,255,.04);border-radius:999px;padding:7px 13px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap}
.sml-play[aria-pressed=true]{border-color:rgba(94,234,212,.5);color:#5eead4}
.sml-full{padding:7px 11px}
.sml-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sml-view{position:relative;aspect-ratio:16/8.4;max-height:78vh;min-height:360px;background:#0a1322;overflow:hidden;touch-action:pan-y}
.sml-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sml-hud{position:absolute;inset:0;pointer-events:none}
.sml-hud>*{pointer-events:auto}
.sml-progress{height:2px;background:rgba(255,255,255,.04)}
.sml-progress i{display:block;height:100%;background:var(--sml-accent);transform-origin:0 50%;transform:scaleX(0)}
.sml-stage:not(.is-presenting) .sml-progress i{transform:scaleX(0)!important}
.sml-stage.is-loading .sml-view::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:#4aa8ff;animation:sml-spin 1s linear infinite}
@keyframes sml-spin{to{transform:rotate(360deg)}}
.sml-controls{padding:14px 16px 6px;background:#0b1726;border-top:1px solid var(--sml-line)}
.sml-caption{margin:0!important;padding:4px 16px 14px;background:#0b1726;font-size:.8rem!important;line-height:1.55!important;color:var(--sml-muted)!important}
.sml-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px}
.sml-field{display:flex;flex-direction:column;gap:6px;min-width:170px;flex:1 1 180px;max-width:280px}
.sml-field-head{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sml-muted)}
.sml-field-head output{font-size:.8rem;letter-spacing:0;text-transform:none;color:#fff;font-weight:600}
.sml-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
.sml-field input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#2fc4b0,#4aa8ff)}
.sml-field input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#2fc4b0,#4aa8ff)}
.sml-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid #4aa8ff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.sml-field input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #4aa8ff}
.sml-field input[type=range]:focus-visible{outline:2px solid #5eead4;outline-offset:3px;border-radius:4px}
.sml-seg{display:flex;border:1px solid var(--sml-line);border-radius:10px;padding:2px;background:rgba(255,255,255,.03)}
.sml-seg button{flex:1;border:0;background:transparent;border-radius:8px;padding:6px 10px;font-size:.8rem;font-weight:600;color:var(--sml-muted);cursor:pointer;white-space:nowrap}
.sml-seg button[aria-checked=true]{background:rgba(74,168,255,.2);color:#fff}
.sml-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sml-line);background:rgba(255,255,255,.03);border-radius:10px;padding:8px 12px;font-size:.8rem;font-weight:600;color:var(--sml-muted);cursor:pointer}
.sml-toggle-dot{width:26px;height:14px;border-radius:999px;background:#2a3a50;position:relative;transition:background .2s}
.sml-toggle-dot::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#9fb2c8;transition:transform .2s,background .2s}
.sml-toggle[aria-pressed=true]{color:#fff}
.sml-toggle[aria-pressed=true] .sml-toggle-dot{background:#0e8a7a}
.sml-toggle[aria-pressed=true] .sml-toggle-dot::after{transform:translateX(12px);background:#fff}
.sml-btn{border:1px solid var(--sml-line);background:rgba(255,255,255,.05);border-radius:10px;padding:9px 14px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.sml-btn:hover{background:rgba(255,255,255,.09)}
.sml-btn--primary{background:#1a6faf;border-color:#2389d7;color:#fff}
.sml-btn--primary:hover{background:#2389d7}
.sml-btn--warn{background:rgba(245,185,63,.14);border-color:rgba(245,185,63,.55);color:#ffd79a}

/* HUD-Karten über dem Canvas */
.sml-card{position:absolute;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--sml-line);border-radius:12px;background:rgba(8,19,33,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.78rem;line-height:1.35;max-width:min(320px,70%)}
.sml-card--tl{left:14px;top:14px}
.sml-card--tr{right:14px;top:14px}
.sml-card--bl{left:14px;bottom:14px}
.sml-card strong{font-size:1.02rem;color:#fff;font-weight:600}
.sml-card-kicker{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#5eead4}
.sml-card-meta{color:var(--sml-muted);font-size:.74rem}
.sml-legend{position:absolute;display:flex;flex-wrap:wrap;gap:4px 14px;padding:7px 12px;border:1px solid var(--sml-line);border-radius:10px;background:rgba(8,19,33,.78);font-size:.72rem;color:#d7e6f5;max-width:calc(100% - 180px)}
.sml-legend span{display:inline-flex;align-items:center;gap:6px}
.sml-legend i{display:inline-block;width:16px;height:3px;border-radius:2px}
.sml-legend i.is-flow{background:linear-gradient(90deg,transparent,rgba(214,242,255,.95))}
.sml-legend i.is-well{width:10px;height:10px;border-radius:50%;border:2px solid #7dd3fc;background:#0b1b2c}
.sml-legend i.is-line{background:#fff;height:2px}
.sml-legend i.is-hatch{width:14px;height:12px;border:1px solid #ffe08a;background:repeating-linear-gradient(135deg,rgba(255,255,255,.8) 0 1px,transparent 1px 4px)}
.sml-colorbar{position:absolute;right:16px;top:56px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.66rem;color:#d7e6f5;text-align:center;pointer-events:none}
.sml-colorbar i{display:block;width:10px;height:120px;border-radius:5px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(to bottom,rgb(150,214,245),rgb(56,150,214) 35%,rgb(21,86,170) 70%,rgb(8,32,96))}
.sml-tip{position:absolute;left:0;top:0;width:230px;padding:10px 10px 6px;border:1px solid rgba(74,168,255,.4);border-radius:12px;background:rgba(8,19,33,.92);box-shadow:0 14px 30px rgba(0,0,0,.5);pointer-events:none}
.sml-tip-head{display:flex;flex-direction:column;font-size:.74rem;color:var(--sml-muted);margin-bottom:4px}
.sml-tip-head strong{color:#fff;font-size:.86rem}
.sml-tip canvas{display:block;width:220px;height:90px;position:static}
.sml-toasts{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;z-index:3;max-width:min(360px,calc(100% - 28px))}
.sml-toast{display:flex;flex-direction:column;gap:2px;padding:10px 14px 10px 16px;border-radius:12px;background:rgba(14,27,44,.96);border:1px solid var(--sml-line);border-left:3px solid #4aa8ff;box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:.78rem;line-height:1.4;color:#d7e6f5;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.sml-toast.is-in{opacity:1;transform:none}
.sml-toast strong{color:#fff;font-size:.76rem;letter-spacing:.02em}
.sml-toast.is-warn{border-left-color:#f5b93f}
.sml-toast.is-crit{border-left-color:#ff5d5d}
.sml-toast.is-ok{border-left-color:#3fcf8e}

/* DOM-Szenen (Leitstand, Klima, Güte) */
.sml-dom{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.sml-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sml-tile{position:relative;padding:12px 14px;border:1px solid var(--sml-line);border-radius:14px;background:linear-gradient(160deg,#13253b,#0e1b2c);min-width:0;overflow:hidden}
.sml-tile-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--sml-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sml-tile-value{font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:600;line-height:1.1;color:#fff;margin:4px 0 2px;letter-spacing:-.02em}
.sml-tile-value small{font-size:.5em;color:var(--sml-muted);font-weight:500;margin-left:3px;letter-spacing:0}
.sml-tile-sub{font-size:.72rem;color:#6f8299;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sml-tile.is-glow{animation:sml-glow 1.6s ease-out}
@keyframes sml-glow{0%{box-shadow:0 0 0 1px rgba(74,168,255,.8),0 0 26px rgba(74,168,255,.45)}100%{box-shadow:0 0 0 1px transparent,0 0 0 transparent}}
.sml-tile.is-warn .sml-tile-value{color:#f5b93f}
.sml-tile.is-crit .sml-tile-value{color:#ff5d5d}
.sml-tile.is-ok .sml-tile-value{color:#3fcf8e}
.sml-tile canvas{position:static;display:block;width:100%;height:28px;margin-top:6px}

@media(max-width:900px){
  .sml-tab-long{display:none}.sml-tab-short{display:inline}
  .sml-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .sml-section{padding:44px 0 50px!important}
  .sml-stage{border-radius:14px;margin-inline:-6px}
  .sml-view{aspect-ratio:4/5;max-height:none;min-height:420px}
  .sml-play{padding:7px 10px}
  .sml-play .sml-play-label{display:none}
  .sml-colorbar{display:none}
  .sml-card{padding:8px 11px;max-width:calc(100% - 70px)}
  .sml-card strong{font-size:.92rem}
  .sml-legend{max-width:calc(100% - 110px);font-size:.66rem;padding:5px 9px}
  .sml-field{max-width:none;flex-basis:100%}
  .sml-toasts{left:14px;right:14px;max-width:none;align-items:stretch;bottom:auto;top:84px}
  .sml-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sml-dom{padding:10px;gap:8px}
}
.sml-stage.is-full{border-radius:0;display:flex;flex-direction:column;height:100vh}
.sml-stage.is-full .sml-view{flex:1;aspect-ratio:auto;max-height:none}
@media(prefers-reduced-motion:reduce){.sml-toast,.sml-tile.is-glow{transition:none;animation:none}}
[data-contrast=high] .sml-section{background:#000}
[data-contrast=high] .sml-stage{border-color:#fff}

/* Talsperre */
.sml-dam{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr) 34%;grid-template-areas:"sec tiles" "chart chart";gap:12px;padding:14px;pointer-events:none}
.sml-dam-sec{grid-area:sec;position:relative}
.sml-dam-chart{grid-area:chart;pointer-events:auto;cursor:ew-resize}
.sml-dam-tiles{grid-area:tiles;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px;pointer-events:auto}
.sml-dam-tiles .sml-tile{padding:9px 11px}
.sml-dam-tiles .sml-tile-value{font-size:1.25rem}
.sml-dam-tiles .sml-tile-sub{white-space:normal;line-height:1.3;font-size:.66rem}
.sml-badge{position:absolute;left:0;top:0;font-size:.68rem;font-weight:600;color:#9fb2c8;border:1px solid rgba(140,170,205,.25);border-radius:999px;padding:4px 10px;background:rgba(8,19,33,.8)}
.sml-tile--fill>*{position:relative}
.sml-tile--fill .sml-fillwave{position:absolute;left:0;right:0;bottom:0;width:100%;height:0;transition:height .6s ease}
.sml-fillwave path{fill:#3b8fd4}
.sml-fillwave .w1{opacity:.2;animation:sml-wave 4.5s linear infinite}
.sml-fillwave .w2{opacity:.12;animation:sml-wave 7s linear infinite}
.sml-tile--fill.is-over .sml-fillwave path{fill:#ff5d5d}
@keyframes sml-wave{to{transform:translateX(-100px)}}
.sml-stage-dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.35em;vertical-align:.12em}
@media(max-width:900px){
  .sml-dam{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto 30%;grid-template-areas:"sec" "tiles" "chart"}
  .sml-dam-tiles{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
}
@media(max-width:560px){.sml-dam{padding:10px;gap:8px}.sml-dam-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sml-dam-tiles .sml-tile-sub{display:none}.sml-dam-tiles .sml-tile-value{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){.sml-fillwave path{animation:none}}
.sml-dam .sml-badge{top:auto;bottom:4px;left:4px}

/* Leitstand */
.sml-kiosk{transition:filter .6s}
.sml-kiosk.is-stale .sml-kpis,.sml-kiosk.is-stale .sml-k-side{filter:saturate(.15) brightness(.8)}
.sml-k-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sml-k-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.sml-k-title strong{font-size:1.05rem;color:#fff}
.sml-k-title span{font-size:.78rem;color:#6f8299;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sml-k-meta{display:flex;align-items:center;gap:14px;font-size:.76rem;color:#9fb2c8;white-space:nowrap}
.sml-k-meta b{font-weight:600}.sml-k-meta .is-ok{color:#3fcf8e}.sml-k-meta .is-warn{color:#f5b93f}.sml-k-meta .is-crit{color:#ff5d5d}
.sml-k-clock{font-size:1.05rem;color:#fff;font-weight:600;letter-spacing:.02em}
.sml-k-conn{display:inline-flex;align-items:center;gap:6px}
.sml-k-conn i{width:8px;height:8px;border-radius:50%;background:#3fcf8e;box-shadow:0 0 0 3px rgba(63,207,142,.18)}
.sml-k-conn.is-bad{color:#ff8a8a}.sml-k-conn.is-bad i{background:#ff5d5d;box-shadow:0 0 0 3px rgba(255,93,93,.2)}
.sml-kiosk .sml-tile-value{font-size:clamp(1.3rem,2.4vw,2.1rem)}
.sml-kiosk .sml-tile canvas{height:22px}
.sml-tile.is-halo{animation:sml-halo 2.4s ease-in-out infinite}
@keyframes sml-halo{0%,100%{box-shadow:0 0 0 1px rgba(255,93,93,.35),0 0 12px rgba(255,93,93,.1)}50%{box-shadow:0 0 0 1px rgba(255,93,93,.8),0 0 28px rgba(255,93,93,.35)}}
.sml-k-band{display:flex;align-items:baseline;gap:12px;padding:9px 14px;border-radius:12px;background:linear-gradient(90deg,rgba(255,93,93,.18),rgba(255,93,93,.05));border:1px solid rgba(255,93,93,.4);font-size:.84rem;color:#ffd0d0}
.sml-k-band strong{color:#fff}
.sml-k-band.is-acked{background:rgba(245,185,63,.1);border-color:rgba(245,185,63,.4);color:#ffe2a8}
.sml-k-band.is-stale{background:#5a1717;border-color:#ff5d5d;color:#ffd0d0}
.sml-k-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:10px}
.sml-k-map{border:1px solid rgba(140,170,205,.16);border-radius:14px;min-height:0}
.sml-k-side{display:flex;flex-direction:column;gap:10px;min-height:0}
.sml-k-card{border:1px solid rgba(140,170,205,.16);border-radius:14px;background:linear-gradient(160deg,#13253b,#0e1b2c);padding:10px 12px;min-height:0}
.sml-k-card--feed{flex:1;overflow:hidden}
.sml-k-card-h{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#9fb2c8;margin-bottom:8px}
.sml-k-empty{margin:0!important;font-size:.82rem!important;color:#3fcf8e!important}
.sml-k-alarm{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:10px;background:rgba(255,93,93,.1);border:1px solid rgba(255,93,93,.35)}
.sml-k-alarm.is-acked{background:rgba(245,185,63,.08);border-color:rgba(245,185,63,.3)}
.sml-k-alarm div{display:flex;flex-direction:column;gap:1px;font-size:.74rem;color:#d7e6f5;min-width:0}
.sml-k-alarm strong{font-size:.84rem;color:#fff}
.sml-k-alarm-state{color:#ff9d9d}.sml-k-alarm.is-acked .sml-k-alarm-state{color:#f5b93f}
.sml-k-alarm .sml-btn{padding:6px 10px;font-size:.74rem}
.sml-k-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.sml-k-feed li{display:grid;grid-template-columns:62px 1fr auto;gap:8px;font-size:.72rem;color:#9fb2c8;padding:3px 0;border-bottom:1px solid rgba(140,170,205,.07);animation:sml-in .5s ease-out}
.sml-k-feed li span{color:#d7e6f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sml-k-feed li b{color:#fff;font-weight:600}
.sml-k-feed li.is-crit b{color:#ff8a8a}
.sml-k-feed time{color:#6f8299}
@keyframes sml-in{from{background:rgba(74,168,255,.18)}to{background:transparent}}
.sml-btn:disabled{opacity:.45;cursor:default}
@media(max-width:900px){.sml-k-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.sml-k-card--feed{display:none}.sml-k-title span,.sml-k-age{display:none}}
@media(max-width:560px){.sml-kiosk .sml-tile-sub,.sml-kiosk .sml-tile canvas{display:none}.sml-kiosk .sml-tile{padding:8px 10px}.sml-kiosk .sml-tile-value{font-size:1.2rem}.sml-kiosk .sml-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
@media(prefers-reduced-motion:reduce){.sml-tile.is-halo,.sml-k-feed li{animation:none}}

/* Klima */
.sml-clim{position:absolute;inset:0;padding:14px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.8fr);grid-template-rows:26% minmax(0,1fr);grid-template-areas:"stripes stripes stripes" "tiles cal rose";gap:12px 14px}
.sml-clim-stripes{grid-area:stripes;position:relative}
.sml-clim-tiles{grid-area:tiles;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px}
.sml-clim-cal{grid-area:cal;border:1px solid rgba(140,170,205,.16);border-radius:14px;padding:8px 10px}
.sml-clim-rose{grid-area:rose;border:1px solid rgba(140,170,205,.16);border-radius:14px;padding:8px 10px}
.sml-clim-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.7rem;color:#9fb2c8;min-height:20px}
.sml-clim-h strong{font-size:.78rem;color:#fff;font-weight:600;margin-right:4px}
.sml-ramp{display:inline-block;width:70px;height:8px;border-radius:4px}
.sml-ramp--temp{background:linear-gradient(90deg,#313695,#74add1,#e0f3f8,#ffffbf,#fdae61,#d73027,#a50026)}
.sml-ramp--rain{background:linear-gradient(90deg,#c6dbef,#6baed6,#3182bd,#08519c,#08306b)}
.sml-dotlab{display:inline-flex;align-items:center;gap:4px}.sml-dotlab i{width:8px;height:8px;border-radius:2px;display:inline-block}
.sml-kt{padding:9px 11px}
.sml-kt .sml-tile-label em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:#6f8299;margin-left:4px}
.sml-kt .sml-tile-value{font-size:clamp(1.2rem,2vw,1.8rem);margin:2px 0 0}
.sml-kt canvas{height:34px;margin-top:4px}
@media(max-width:900px){
  .sml-clim{grid-template-columns:1fr 1fr;grid-template-rows:16% auto minmax(0,1fr);grid-template-areas:"stripes stripes" "tiles tiles" "cal rose"}
  .sml-clim-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sml-kt canvas{display:none}
}
@media(max-width:560px){
  .sml-clim{padding:10px;gap:8px;grid-template-columns:1fr;grid-template-rows:13% auto minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"stripes" "tiles" "cal" "rose"}
  .sml-clim-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sml-clim-stripes .sml-clim-h span{display:none}
  .sml-kt .sml-tile-label em{display:none}
  .sml-kt .sml-tile-sub{font-size:.62rem}
}

/* Gewässergüte */
.sml-wq{position:absolute;inset:0;padding:14px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"tiles chart" "tiles scale";gap:12px}
.sml-wq-tiles{grid-area:tiles;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
.sml-wq-chart{grid-area:chart;border:1px solid rgba(140,170,205,.16);border-radius:14px;padding:8px 10px}
.sml-wq-scale{grid-area:scale;border:1px solid rgba(140,170,205,.16);border-radius:14px;padding:8px 12px 30px;background:linear-gradient(160deg,#13253b,#0e1b2c)}
.sml-wq-tile{padding:9px 11px;display:flex;flex-direction:column}
.sml-wq-tile[data-tier=warn]{border-color:rgba(250,204,21,.45)}
.sml-wq-tile[data-tier=crit]{border-color:rgba(220,38,38,.6);background:linear-gradient(160deg,#2a1a24,#1a1420)}
.sml-wq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.sml-wq-ring{position:relative;width:28px;height:28px;flex-shrink:0}
.sml-wq-ring svg{width:28px;height:28px;display:block}
.sml-wq-ring circle{fill:none;stroke-width:3;stroke:#22c55e;transition:stroke .4s}
.sml-wq-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.72rem;font-weight:700}
.sml-wq-tile .sml-tile-value{font-size:clamp(1.15rem,1.9vw,1.7rem);margin:0}
.sml-wq-tile .sml-tile-sub{white-space:normal;line-height:1.3;font-size:.66rem;min-height:1.7em}
.sml-wq-tier{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.sml-wq-tile canvas{height:26px;margin-top:auto}
.sml-wq-bar{position:relative;height:12px;margin:14px 4px 0;border-radius:6px;display:flex;overflow:visible}
.sml-wq-bar i{display:block;height:100%}
.sml-wq-bar .z1{width:62.5%;background:rgba(34,197,94,.55);border-radius:6px 0 0 6px}
.sml-wq-bar .z2{width:20.8%;background:rgba(250,204,21,.6)}
.sml-wq-bar .z3{flex:1;background:rgba(220,38,38,.65);border-radius:0 6px 6px 0}
.sml-wq-bar b{position:absolute;top:-6px;transform:translateX(-50%);min-width:34px;padding:2px 6px;border-radius:6px;background:#fff;color:#0a1322;font-size:.7rem;text-align:center;transition:left .3s;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.sml-wq-bar b[data-tier=warn]{background:#facc15}.sml-wq-bar b[data-tier=crit]{background:#ff5d5d;color:#fff}
.sml-wq-bar span{position:absolute;top:16px;font-size:.64rem;color:#9fb2c8;transform:translateX(-50%)}
.sml-wq-bar .m1{left:62.5%}.sml-wq-bar .m2{left:83.3%}
@media(max-width:900px){
  .sml-wq{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"tiles" "chart" "scale"}
  .sml-wq-tiles{grid-auto-rows:auto}
  .sml-wq-tile canvas,.sml-wq-tile .sml-tile-sub{display:none}
}
@media(max-width:560px){.sml-wq{padding:10px;gap:8px}.sml-wq-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.sml-wq-tile{padding:7px 9px}.sml-wq-ring,.sml-wq-ring svg{width:22px;height:22px}.sml-wq-scale .sml-clim-h span{display:none}}

.sml-k-band[hidden]{display:none}
.sml-tabs{mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
@media(min-width:901px){.sml-tabs{mask-image:none;-webkit-mask-image:none}}
@media(max-width:760px){
  .sml-stage:not([data-scene=grundwasser]) .sml-view{aspect-ratio:auto;height:min(780px,calc(100svh - 130px));min-height:620px}
  .sml-dam{grid-template-rows:40% auto minmax(0,1fr)}
  .sml-dam-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sml-dam-tiles .sml-tile{padding:7px 8px}
  .sml-dam-tiles .sml-tile-label{font-size:.58rem;letter-spacing:.04em}
  .sml-dam .sml-badge{font-size:.6rem;padding:3px 8px}
  .sml-wq{grid-template-rows:auto minmax(150px,1fr) auto}
  .sml-clim{grid-template-rows:12% auto minmax(0,1.4fr) minmax(0,1fr)}
}
@media(max-width:560px){.sml-dam .sml-badge{top:22px;bottom:auto;left:auto;right:0}}

/* Radarpegel */
.sml-radar{grid-template-rows:minmax(0,1fr) 36%}
.sml-radar-low{grid-area:chart;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px;pointer-events:none}
.sml-radar .sml-badge{top:4px;bottom:auto;left:4px}
@media(max-width:760px){
  .sml-radar{grid-template-rows:42% auto minmax(0,1fr)}
  .sml-radar-low{grid-template-columns:1fr;grid-template-rows:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
}