:root { color-scheme: dark; }
  body { font-family: system-ui, sans-serif; background:#11151c; color:#e6e6e6; margin:0; }
  header { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#1b2230; flex-wrap:wrap; }
  header h1 { font-size:18px; margin:0; }
  .dot { width:12px; height:12px; border-radius:50%; background:#888; }
  .dot.on { background:#3ec97e; } .dot.off { background:#c94f4f; }
  .dot.warn { background:#e0b34f; }
  nav { margin-left:auto; display:flex; gap:14px; }
  nav a { color:#7fb4ff; text-decoration:none; }
  main { display:grid; grid-template-columns: minmax(min-content,2fr) minmax(260px,1fr); gap:12px; padding:12px 16px; }
  @media (max-width: 1000px) { main { grid-template-columns: minmax(min-content,1fr); } }
  .card { background:#1b2230; border-radius:8px; padding:12px; }
  .card h2 { font-size:14px; margin:0 0 8px 0; color:#9db4d4; }
  .screen-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px;
                  margin:0 0 8px; font-size:13px; }
  #screenzoom { background:#232c3e; color:#e6e6e6; border:1px solid #33405a;
                border-radius:4px; padding:5px 8px; }
  #screenzoomvalue { font-variant-numeric:tabular-nums; }
  #screenzoomreset { background:#232c3e; color:#e6e6e6; border:1px solid #33405a;
                     border-radius:4px; padding:5px 10px; cursor:pointer; }
  #screenzoomreset:focus-visible, #screenzoom:focus-visible,
  #screen:focus-visible { outline:2px solid #7fb4ff; outline-offset:2px; }
  #screenhelp { font-size:12px; color:#8aa0c0; margin:8px 0 0; }
  .screen-wrap { position:relative; }
  #screen { position:relative; width:800px; height:480px; background:#000;
            border-radius:6px; overflow:visible; cursor:crosshair; user-select:none;
            touch-action:pinch-zoom; }
  #screenstage { position:relative; width:100%; height:100%; }
  #screen img { width:100%; height:100%; object-fit:contain; display:none; }
  .screen-wrap .hint { position:absolute; inset:0; display:flex; align-items:center;
                       justify-content:center; color:#8aa0c0; background:#000;
                       border-radius:6px; text-align:center; pointer-events:none;
                       padding:8px; font-size:13px; }
  #screen .ripple { position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px;
                     border-radius:50%; background:rgba(127,180,255,.8);
                     pointer-events:none; animation:ripple .3s ease-out forwards; }
  @keyframes ripple { from { transform:scale(.4); opacity:1; }
                      to { transform:scale(1.6); opacity:0; } }
  .leck { margin-top:2px; font-size:10px; font-weight:bold; color:#c94f4f; }
  #log { font-family:ui-monospace, monospace; font-size:12px; max-height:38vh;
         overflow-y:auto; white-space:pre-wrap; }
  #log .t { color:#7fb4ff; }
  #lwt { font-size:13px; }
  #lwt b.online { color:#3ec97e; } #lwt b.offline { color:#c94f4f; }
  .statgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr));
              gap:8px; }
  .stat { background:#141a26; border-radius:6px; padding:8px; }
  .stat .k { font-size:11px; color:#8aa0c0; }
  .stat .v { font-size:17px; margin-top:2px; }
  .stat .v.err { color:#c94f4f; }
  .chgrid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
  #tabs { display:flex; gap:4px; padding:0 16px; background:#161c28; }
  .tab { background:none; border:none; color:#9db4d4; font-size:14px;
         padding:8px 16px; cursor:pointer; border-bottom:2px solid transparent; }
  .tab.active { color:#e6e6e6; border-bottom-color:#7fb4ff; }
  #tab-charts { padding:8px 16px; }
  /* --- Diagramme-Tab (uPlot) --- */
  .ct-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
            margin-bottom:8px; }
  .ct-groups { max-height:30vh; overflow-y:auto; }
  .ct-grp { display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px;
            background:#141a26; border-radius:6px; padding:3px 6px; margin:2px; }
  .ct-grplabel { font-size:11px; color:#8aa0c0; margin-right:2px; }
  .chip { background:#232c3e; color:#cdd8ea; border:1px solid #33405a;
          border-radius:10px; font-size:11px; padding:1px 8px; cursor:pointer; }
  .chip:hover { border-color:#7fb4ff; }
  .chip.on { background:#2c4a75; border-color:#7fb4ff; color:#fff; }
  .chip.grp-all, .chip.grp-none { font-size:10px; color:#8aa0c0; }
  .chip .gear { display:none; margin-left:4px; color:#e0b34f; }
  .chip.on .gear { display:inline; }
  .ct-lab { font-size:12px; color:#8aa0c0; }
  .ct-sep { width:12px; }
  .ct-opts input[type=number] { width:70px; background:#141a26; color:#e6e6e6;
    border:1px solid #33405a; border-radius:4px; padding:2px 5px; font-size:12px; }
  .ct-opts label { font-size:12px; }
  .ct-opts select { background:#141a26; color:#e6e6e6; border:1px solid #33405a;
                    border-radius:4px; font-size:12px; padding:2px; }
  #ct-status { font-size:12px; color:#8aa0c0; }
  #ct-warn { font-size:12px; color:#e0b34f; }
  .ct-wraprow { display:flex; gap:10px; margin-top:10px; }
  #chart { flex:1; min-width:0; }
  #chart-legend { width:230px; flex:none; max-height:60vh; overflow-y:auto;
                  font-size:11px; }
  .ct-leg-row { display:flex; align-items:baseline; gap:5px; padding:2px 0;
                border-bottom:1px solid #1d2534; cursor:default; }
  .ct-leg-name { flex:1; } .ct-leg-name i { color:#8aa0c0; font-style:normal; }
  .ct-leg-scale { color:#8aa0c0; font-size:10px; white-space:nowrap; }
  .ct-leg-last { color:#e6e6e6; font-size:11px; min-width:48px; text-align:right; }
  .ct-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
            flex:none; }
  #chart-tip { display:none; position:absolute; z-index:50; pointer-events:none;
               background:#0d1117f2; border:1px solid #33405a; border-radius:6px;
               padding:6px 8px; font-size:11px; max-height:60vh; overflow-y:auto; }
  #chart-tip table { border-collapse:collapse; }
  #chart-tip td { padding:1px 6px 1px 0; }
  #chart-tip td.v { text-align:right; font-weight:bold; }
  #chart-tip td.u { color:#8aa0c0; }
  .ct-tip-time { color:#7fb4ff; margin-bottom:3px; }
  .ct-popup { position:absolute; z-index:60; background:#1b2230;
              border:1px solid #7fb4ff; border-radius:8px; padding:10px;
              font-size:12px; }
  .ct-popup input { width:90px; background:#141a26; color:#e6e6e6;
    border:1px solid #33405a; border-radius:4px; padding:2px 5px; margin:4px 4px 0 0; }
  .ct-popbtns { margin-top:8px; display:flex; gap:6px; }
  .ct-popbtns button { background:#232c3e; color:#cdd8ea; border:1px solid #33405a;
                       border-radius:4px; font-size:11px; padding:2px 8px; cursor:pointer; }
  .ct-empty { color:#557; text-align:center; padding:40px 0; }
  .u-over { border-radius:4px; }
  footer { padding:8px 16px; color:#557; font-size:12px; }

  [hidden] { display:none !important; }
  button, input, select { font:inherit; }
  button { border:1px solid #405574; border-radius:6px; padding:8px 12px;
           background:#243249; color:#e6e6e6; cursor:pointer; }
  button:hover:not(:disabled) { border-color:#7fb4ff; background:#304461; }
  button:disabled { opacity:.55; cursor:default; }
  button:focus-visible, input:focus-visible, select:focus-visible {
    outline:2px solid #7fb4ff; outline-offset:2px; }
  input:not([type=checkbox]):not([type=radio]), select {
    border:1px solid #405574; border-radius:5px; padding:8px;
    background:#141a26; color:#e6e6e6; max-width:100%; }
  .center-panel { max-width:380px; margin:12vh auto 24px; }
  .center-panel h2 { font-size:22px; }
  .center-panel form, .center-panel label { display:flex; flex-direction:column; gap:8px; }
  .center-panel form { gap:16px; }
  .notice { margin:12px 16px; padding:12px; border-radius:6px; background:#263752; }
  .notice.error, .error { color:#ffaaa2; }
  #user-name { margin-left:auto; color:#b9cae1; }
  #company-choice { display:flex; gap:8px; align-items:center; }
  .portal-nav { margin:0; padding:12px 16px; background:#161c28; }
  .portal-nav .active { border-color:#7fb4ff; }
  .portal-panel { padding:16px; }
  .panel-heading, .device-heading, .view-heading { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .panel-heading { justify-content:space-between; margin-bottom:12px; }
  .panel-heading h2, .device-heading h2 { margin:0; }
  .device-heading { padding:16px; }
  #device-serial { color:#9db4d4; font-size:13px; }
  .device-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin:16px 0; }
  .device-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; }
  .device-card h3 { margin:0; }
  .device-card p { margin:0; font-size:13px; color:#b9cae1; }
  .device-card .online { color:#6ee2a5; }
  .device-card .offline { color:#b1b9c7; }
  .compact-form { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:12px 0; }
  .compact-form h3 { width:100%; margin:0; }
  .compact-form > label { display:flex; flex-direction:column; gap:6px; }
  .compact-form fieldset { border:1px solid #405574; border-radius:6px; display:flex; flex-wrap:wrap; gap:12px; }
  .form-result { width:100%; font-size:13px; }
  .table-wrap { overflow:auto; }
  .row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .portal-table { border-collapse:collapse; width:100%; margin:12px 0; }
  .portal-table th, .portal-table td { padding:10px; text-align:left; border-bottom:1px solid #33405a; }
  .portal-table th { color:#9db4d4; font-size:13px; }
  .portal-table td { font-size:14px; }
  .view-heading { justify-content:space-between; margin-bottom:12px; }
  .view-heading h2 { margin:0; }
  .phone { display:inline-flex; align-items:center; gap:8px; border:2px solid currentColor; background:#141a26; min-height:44px; }
  .phone-ready { color:#b1b9c7; }
  .phone-ringing, .phone-connecting { color:#ffd15d; }
  .phone-active { color:#6ee2a5; }
  .phone-error { color:#ff9188; }
  .call-panel { margin:0 16px 12px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid #405574; }
  #call-detail { color:#b9cae1; flex:1; }
  #call-end, #call-reject { border-color:#ce6864; }
  .control-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
  #control-status, .presence-tools { color:#b9cae1; font-size:13px; }
  .presence-tools { display:flex; gap:12px; flex-wrap:wrap; margin:16px; }
  @media (max-width:600px) {
    .center-panel { margin:8vh 16px 24px; }
    header h1 { width:100%; } #user-name { margin-left:0; }
    .phone { width:100%; justify-content:center; }
    .call-panel button { flex:1; }
    .ct-wraprow { flex-direction:column; } #chart-legend { width:auto; }
  }

/* Firmen- und Standortlisten: gleiche Anlage darf in mehreren Firmen stehen,
 * die Gesamtzahl bleibt die Anzahl eindeutiger Anlagen. */
.device-list { display:block; }
.station-group { margin:12px 0; border:1px solid #33405a; border-radius:8px; background:#161c28; }
.station-group > summary { padding:14px 16px; font-weight:600; cursor:pointer; }
.station-location { margin:0 12px 12px; }
.station-location > summary { padding:10px; color:#b9cae1; cursor:pointer; }
.station-rows { padding:0 10px; }
.device-card.station-row { display:grid; grid-template-columns:minmax(230px,1fr) 135px 170px 44px; gap:14px; align-items:center; border-top:1px solid #33405a; padding:12px 0; }
.station-identity, .station-health { display:flex; flex-direction:column; gap:6px; }
.station-open { text-align:left; font-weight:600; width:fit-content; }
.station-number, .last-contact { color:#9db4d4; font-size:12px; overflow-wrap:anywhere; }
.favorite { font-size:22px; padding:4px; color:#ffd15d; }
.favorite[aria-pressed=false] { color:#9db4d4; }
.search-form > label:first-child { flex:1; min-width:250px; }
.search-form input { width:100%; }
.search-form output { color:#9db4d4; padding:8px 0; }
.identity { display:inline-block; margin:8px 12px 4px 0; font-variant-numeric:tabular-nums; color:#b9cae1; }
#device-location { font-size:13px; color:#9db4d4; }
.diagnostics { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; font-size:13px; }
.diagnostics dt { color:#9db4d4; }.diagnostics dd { margin:0; overflow-wrap:anywhere; }
#pair-help { width:100%; color:#9db4d4; font-size:13px; margin:0; }
#st_delivery-note { font-size:13px; color:#ffd15d; }
.ct-provenance { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:#b9cae1; padding-top:8px; }
.telemetry-table { margin-top:14px; }
.telemetry-table summary { cursor:pointer; color:#9db4d4; }
@media(max-width:800px) {
  .device-card.station-row { grid-template-columns:minmax(180px,1fr) 100px 40px; }
  .station-row .last-contact { grid-column:1 / 3; grid-row:2; }
  .station-row .favorite { grid-column:3; grid-row:1; }
}
@media(max-width:440px) {
  .device-card.station-row { grid-template-columns:minmax(0,1fr) 40px; }
  .station-row .station-health { grid-column:1; flex-direction:row; flex-wrap:wrap; }
  .station-row .favorite { grid-column:2; }.station-row .last-contact { grid-column:1 / 3; grid-row:3; }
}