/*
 * Copyright (c) 2026 Dave Stänz, axpol GmbH
 * Alle Rechte vorbehalten.
 *
 * Zweck   : Stylesheet der Admin-Oberflaeche (Hagelarm-Look, hell und dunkel).
 * Version : 1.0.0
 */
  /* DaveStore Admin · Design im Hagelarm-Look */
  *{box-sizing:border-box;margin:0;padding:0}
  :root,[data-theme="dark"]{
    --bg-0:#0a0e14;--bg-1:#11161f;--bg-2:#1a212d;--bg-3:#232c3a;
    --line:#2a3445;--text:#e6edf3;--dim:#8b96a8;--mute:#5a6477;
    --accent:#00d9ff;--accent2:#b794f6;--warn:#ff8a3d;--bad:#f87171;--good:#4ade80;
    --shadow:0 4px 16px rgba(0,0,0,.4);--pop:0 8px 24px rgba(0,0,0,.5);
    --bg:var(--bg-0);--ink:var(--text);--mut:var(--dim);--panel:var(--bg-1);--panel2:var(--bg-2);--chip:var(--bg-2);
    --ok:var(--good)
  }
  [data-theme="light"]{
    --bg-0:#f5f7fa;--bg-1:#ffffff;--bg-2:#f0f3f7;--bg-3:#e3e9f0;
    --line:#d6dde6;--text:#1a2332;--dim:#5a6477;--mute:#97a1b3;
    --accent:#0091b8;--accent2:#7c3aed;--warn:#d96720;--bad:#dc2626;--good:#16a34a;
    --shadow:0 2px 10px rgba(20,30,50,.08);--pop:0 8px 24px rgba(20,30,50,.12);
    --bg:var(--bg-0);--ink:var(--text);--mut:var(--dim);--panel:var(--bg-1);--panel2:var(--bg-2);--chip:var(--bg-2);
    --ok:var(--good)
  }
  /* --- Mandate: eine Marke je Welt -------------------------------------------
     Die Oberflaeche zieht ihre Akzentfarbe aus --accent; darum wird nur diese je
     Mandat neu gesetzt und nicht an hundert Stellen nachgefaerbt. Zustandsfarben
     (good/warn/bad) bleiben absichtlich unberuehrt: Gruen/Gelb/Rot heissen weiter
     freigegeben/wartend/Fehler, nie "Mandat". Die hellen Toene stehen NACH den
     dunklen, sonst gewinnt bei gleicher Spezifitaet der dunkle. ------------- */
  :root[data-mandat="slx"]{--accent:#2f81f7;--accent2:#7fb2fb;--auf-akzent:#fff}
  :root[data-mandat="ha"]{--accent:#18bcf2;--accent2:#8bdcf8;--auf-akzent:#04222f}
  :root[data-mandat="all"]{--accent:#a371f7;--accent2:#cdb2fb;--auf-akzent:#fff}
  [data-theme="light"][data-mandat="slx"]{--accent:#1f6feb;--accent2:#4f93f5;--auf-akzent:#fff}
  [data-theme="light"][data-mandat="ha"]{--accent:#0b87b3;--accent2:#33a8cf;--auf-akzent:#fff}
  [data-theme="light"][data-mandat="all"]{--accent:#7c3aed;--accent2:#9b6bf2;--auf-akzent:#fff}
  /* Die Mandatsleiste traegt die Farbe (frueher eine 3-px-Schiene an dieser Stelle). */
  .mfahne{font-size:10.5px;padding:1px 9px;border-radius:999px;white-space:nowrap;align-self:center;
    color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}

  html,body{height:100%}
  body{font:13px/1.55 -apple-system,'SF Pro Text',Inter,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg-0);color:var(--text);-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
  a{color:var(--accent)}.hide{display:none!important}

  /* Login */
  #login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 8%,var(--bg-0)),var(--bg-0))}
  .lcard{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:32px;width:360px;box-shadow:var(--pop)}
  .lcard h1{font-size:20px;font-weight:600;letter-spacing:-.2px;margin:0 0 4px;display:flex;align-items:center;gap:12px}
  .lcard .logo{width:32px;height:32px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 30%,transparent)}
  .lcard p{color:var(--dim);font-size:12px;margin:0 0 20px}
  input,select,textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--text);padding:9px 11px;border-radius:7px;font-size:13px;font-family:inherit;transition:border-color .15s,background .15s}
  input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);background:var(--bg-3)}
  label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);font-weight:600;margin:12px 0 5px}

  /* Buttons */
  .btn{background:var(--accent);color:var(--bg-0);border:1px solid transparent;padding:9px 16px;border-radius:7px;font-size:12.5px;cursor:pointer;font-weight:600;font-family:inherit;letter-spacing:.2px;transition:.15s}
  .btn:hover{filter:brightness(1.1)}
  .btn.ghost{background:var(--bg-2);color:var(--text);border-color:var(--line)}
  .btn.ghost:hover{background:var(--bg-3);filter:none}
  .btn.sm{padding:6px 12px;font-size:11.5px}
  .btn.bad{background:color-mix(in srgb,var(--bad) 20%,var(--bg-2));color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
  .btn[disabled]{opacity:.45;cursor:default;filter:none}
  .err{color:var(--bad);font-size:12px;margin-top:10px;min-height:16px}

  /* App layout */
  /* Die Mandatsleiste liegt ueber allem, darum ist der Rahmen eine Spalte und
     der Rumpf (Seitenleiste + Inhalt) die Zeile darunter. */
  /* Feste Hoehe statt min-height: sonst waechst der Rahmen um die Leiste ueber
     das Fenster hinaus und die ganze Seite scrollt - die Leiste waere dann
     genau so wegrollbar wie vorher die Seitenleiste. */
  #app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
  .rumpf{display:flex;flex:1;min-height:0}
  .side{width:240px;flex:0 0 240px;background:linear-gradient(180deg,var(--bg-1),var(--bg-0));border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 0}
  .brand{display:flex;align-items:center;gap:12px;padding:4px 20px 22px;font-weight:600;font-size:15px;letter-spacing:.2px}
  .brand .logo{width:32px;height:32px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 30%,transparent)}
  .brand small{display:block;color:var(--mute);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;margin-top:1px}
  .nav{display:flex;flex-direction:column;gap:1px;padding:8px}
  .nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:var(--dim);padding:9px 12px;border-radius:7px;cursor:pointer;font-size:12.5px;font-family:inherit;font-weight:500;letter-spacing:.2px;transition:.15s}
  .nav button:hover{background:var(--bg-2);color:var(--text)}
  .nav button.active{background:var(--bg-2);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
  .nav .grp{display:flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--mute);font-weight:600;padding:18px 12px 6px;cursor:pointer;user-select:none;border-radius:7px}
  .nav .grp:hover,.nav .grp:focus-visible{color:var(--dim);outline:none}
  .nav .grp .ch{font-size:9px;width:10px;display:inline-block;color:var(--dim)}
  .nav .grp .grpbadge{margin-left:auto}
  .nav button.navzu{display:none}
  .setpage{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
  .setmenu{position:sticky;top:12px;background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:8px;font-size:12.5px}
  .setmenu .g{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--mute);font-weight:600;padding:10px 10px 4px}
  .setmenu .i{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:7px;color:var(--dim);cursor:pointer;white-space:nowrap}
  .setmenu .i:hover{background:var(--bg-2);color:var(--text)}
  .setmenu .i.on{background:var(--bg-2);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
  .setmenu .i .st{margin-left:auto;font-size:10px;color:var(--mute);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .setmenu .st.warn,.sect .ssum.warn{color:var(--warn)}
  .setpick{display:none;width:100%;margin-bottom:12px}
  .acts{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}.acts .right{margin-left:auto}
  .sect .sb .card+.card{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
  .sub3{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);font-weight:600;margin:16px 0 4px}.sub3:first-child{margin-top:8px}
  .keybox{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;background:var(--bg-0);border:1px solid var(--line);border-radius:8px;padding:8px 10px;white-space:pre;overflow-x:auto;margin:0}
  .kvt{width:100%;border-collapse:collapse;font-size:12.5px}.kvt td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}.kvt td:first-child{color:var(--dim);width:180px;white-space:nowrap}
  .sect{display:none;background:var(--bg-1);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
  .sect.on{display:block}
  .sect .sh{display:flex;align-items:center;gap:8px;padding:10px 14px}
  .sect .sh .secttitle{margin:0;color:var(--text);font-size:13px;text-transform:none;letter-spacing:0}
  .sect .sh .ssum{margin-left:auto;font-size:12px;color:var(--dim);text-align:right}
  .sect .sb{padding:2px 14px 14px;border-top:1px solid var(--line)}
  .sect .sb .tw{overflow-x:auto}
  .sect .sb .card{box-shadow:none;background:transparent;border:0;padding:8px 0 0}
  @media (max-width:820px){.setpage{grid-template-columns:minmax(0,1fr)}.setmenu{display:none}.setpick{display:block}}
  .navbadge{margin-left:auto;background:var(--warn);color:var(--bg-0);font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;letter-spacing:.4px}
  .me{margin-top:auto;padding:14px 20px;border-top:1px solid var(--line);color:var(--dim);font-size:11.5px}
  .copyr{padding:10px 20px 2px;color:var(--mute);font-size:10.5px;letter-spacing:.2px}

  .main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-0)}
  .top{display:flex;align-items:center;gap:14px;padding:14px 26px;background:linear-gradient(180deg,var(--bg-1),var(--bg-0));border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .top h1{font-size:18px;font-weight:600;letter-spacing:-.2px;margin:0}.top .sub{color:var(--dim);font-size:12px;margin-top:2px}
  /* Ab Tablet ist der Knopf der Leistenschalter (voll -> Schiene -> aus),
     am Telefon oeffnet er wie bisher die Schublade. */
  .burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:16px;flex:0 0 auto}
  .drawerdim{display:none}

  /* --- Menueleiste: drei Breiten -------------------------------------------
     width allein genuegt NICHT: ein Flex-Kind faellt ohne max-width/flex-basis
     nicht unter seine Inhaltsbreite und bleibt trotz schmaler Angabe breit. */
  .side{transition:width .18s ease,max-width .18s ease,flex-basis .18s ease}
  body[data-leiste="schiene"] .side{width:62px;flex:0 0 62px;max-width:62px;min-width:0;overflow:hidden}
  body[data-leiste="schiene"] .brand{padding:4px 0 18px;justify-content:center}
  body[data-leiste="schiene"] .brand>div:last-child,
  body[data-leiste="schiene"] .me,
  body[data-leiste="schiene"] .copyr,
  body[data-leiste="schiene"] .menuewerkzeug{display:none}
  body[data-leiste="schiene"] .nav .grp{justify-content:center;padding:14px 0 4px}
  body[data-leiste="schiene"] .nav .grp span:not(.ch){display:none}
  /* Die Beschriftung steht bei vielen Eintraegen DIREKT im Knopf (kein eigener
     Knoten, weil i18n den Text des Knopfes schreibt) - Beschneiden nach Breite
     ergibt darum je nach Sinnbild einen angeschnittenen Buchstaben daneben.
     Stattdessen wird die Schrift auf 0 gesetzt und nur der erste Buchstabe
     zurueckgeholt: das ist genau das Sinnbild, egal wie breit es ist.
     Dafuer muss der Knopf ein Blockkasten sein (::first-letter greift nicht
     in einem Flex-Kasten). */
  body[data-leiste="schiene"] .nav button{display:block;text-align:center;font-size:0;padding:9px 0;width:100%}
  body[data-leiste="schiene"] .nav button::first-letter{font-size:16px}
  body[data-leiste="schiene"] .nav button>span{font-size:0}
  body[data-leiste="schiene"] .nav button>span::first-letter{font-size:16px}
  body[data-leiste="schiene"] .nav button .navbadge{display:none}
  body[data-leiste="aus"] .side{width:0;flex:0 0 0;max-width:0;min-width:0;border-right:0;overflow:hidden}
  /* Mit ausgeblendeter Leiste fehlen Marke und Anker: die Marke wandert in die
     Kopfzeile, der Knopf bekommt ein Wort dazu (ein nacktes Symbol am linken
     Rand sieht aus wie ein Ladefehler), und der Inhalt bekommt eine Obergrenze,
     damit Karten und Tabellen nicht ueber die ganze Breite zerlaufen. */
  .kopfmarke{display:none;align-items:center;gap:8px;font-weight:600;font-size:13.5px;white-space:nowrap}
  .kopfmarke .logo{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:10px;font-weight:700}
  body[data-leiste="aus"] .kopfmarke{display:flex}
  body[data-leiste="aus"] .burger{width:auto;padding:0 10px;gap:6px}
  body[data-leiste="aus"] .burger::after{content:"Men\00FC";font-size:12px}
  body[data-leiste="aus"] .wrap{max-width:1480px;margin-left:auto;margin-right:auto;width:100%}

  /* --- Menue anpassen ------------------------------------------------------ */
  .menuewerkzeug{padding:2px 12px 10px}
  .menuewerkzeug .btn{width:100%;justify-content:center}
  .menuehinweis{margin:0 12px 8px;padding:7px 9px;border-radius:8px;font-size:11px;line-height:1.35;
    color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
  .menuehinweis .reihe{display:flex;gap:6px;margin-top:6px}
  body[data-menue="bearbeiten"] .nav button,
  body[data-menue="bearbeiten"] .nav .grp{cursor:grab}
  body[data-menue="bearbeiten"] .nav button{border:1px dashed var(--line)}
  body[data-menue="bearbeiten"] .nav .grp{border-top:1px dashed var(--line)}
  .menueauge{margin-left:6px;opacity:.5;font-size:11px;flex:0 0 auto}
  .nav button.zieht,.nav .grp.zieht{opacity:.45}
  .nav .abwurf{box-shadow:inset 0 2px 0 var(--accent)}
  /* Zustandsklassen zuletzt: ausgeblendete Eintraege sind weg - ausser beim
     Anpassen, dort stehen sie blass da und lassen sich zurueckholen. */
  .menue-aus{display:none !important}
  body[data-menue="bearbeiten"] .nav .menue-aus{display:flex !important;opacity:.42}
  .tw{overflow-x:auto;max-width:100%}
  .tw td .chip,.tw td.mac,.tw td.actions{white-space:nowrap}.tw td.actions{flex-wrap:nowrap}
  /* Tablet: Schublade, zweizeiliger Kopf, Dialoge bildschirmfuellend */
  @media (max-width:899px){
    .side{position:fixed;top:0;bottom:0;left:0;z-index:40;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--pop)}
    body.drawer .side{transform:none}
    body.drawer .drawerdim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}
    .burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:16px;flex:0 0 auto}
    .top{flex-wrap:wrap;gap:8px 10px;padding:10px 14px}
    .top .ttlbox{flex:1;min-width:0}.top .ttlbox h1{font-size:16px}
    .top .spacer{display:none}
    .top .langsel,.top #themeBtn,.top #refresh,.top #logout,.top #acctSel{order:10}
    .wrap{padding:14px}
    dialog{width:100vw!important;max-width:100vw;height:100vh;max-height:100vh;margin:0;border-radius:0;border:0;padding:16px}
    dialog form{display:flex;flex-direction:column;height:100%}
    dialog #dlgBody{flex:1;overflow:auto}
    #dlgTitle{flex:0 0 auto}
  }
  /* Telefon: einspaltig, Leisten umbrechend */
  @media (max-width:599px){
    .row{flex-direction:column}.row .f{width:100%}
    .acts{flex-wrap:wrap}.acts .right{margin-left:0}
    .cards{grid-template-columns:1fr}
  }
  .spacer{flex:1}
  .wrap{padding:24px 26px;overflow:auto}

  /* Stat-Karten oben (Dashboard) */
  .cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
  .card{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:160px;box-shadow:var(--shadow)}
  .card.clk{cursor:pointer;transition:border-color .15s,transform .08s}
  .card.clk:hover{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),var(--shadow)}
  .card.clk:active{transform:translateY(1px)}
  /* Herzschlag-Zeilen (Geraete und HA-Clients): anklickbar -> Verlauf */
  .hbrow{border-radius:7px}
  .hbrow.clk{cursor:pointer}
  .hbrow.clk:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
  /* App-Detail: Versions-Karten mit editierbarem Changelog */
  .verlist{display:flex;flex-direction:column;gap:10px}
  .vercard{background:var(--panel2,var(--bg-2));border:1px solid var(--line);border-radius:10px;padding:12px 14px}
  .verhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .verhead .spacer{flex:1}
  .verno{font-family:'SF Mono',Monaco,Consolas,monospace;font-weight:700;font-size:15px}
  .verlbl{display:block;margin:10px 0 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut)}
  .vernotes{width:100%;background:var(--panel,var(--bg-1));border:1px solid var(--line);color:var(--ink,var(--text));
    border-radius:8px;padding:9px 11px;font-family:inherit;font-size:13px;line-height:1.5;resize:vertical;box-sizing:border-box}
  .vernotes:focus{outline:none;border-color:var(--accent)}
  .vercard.pending{border-left:3px solid var(--warn,#ff8a3d)}
  .vchip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
  .vchip.warn{color:var(--warn,#ff8a3d);background:color-mix(in srgb,var(--warn,#ff8a3d) 12%,transparent)}
  .vchip.ok{color:var(--good,#4ade80);background:color-mix(in srgb,var(--good,#4ade80) 12%,transparent)}
  .btn.vconf{background:var(--good,#16a34a);color:#fff}
  .btn.vdang{color:var(--bad,#dc2626);border-color:var(--bad,#dc2626)}
  .btn.vdang:hover{background:color-mix(in srgb,var(--bad,#dc2626) 12%,transparent)}
  .vtest{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
  .tchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
  .tchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px 3px 10px;border-radius:999px;
    background:var(--bg-2);border:1px solid var(--line)}
  .tchip a{cursor:pointer;color:var(--bad,#dc2626);font-weight:700;text-decoration:none;padding:0 2px}
  .vtest select{width:100%}
  .card .n{font-size:28px;font-weight:700;letter-spacing:-.5px;font-family:'SF Mono',Monaco,monospace}
  .card .l{color:var(--mute);font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-top:6px}

  /* Tabellen */
  table{width:100%;border-collapse:collapse;background:var(--bg-1);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow)}
  th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
  th{color:var(--mute);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;background:var(--bg-2)}
  tr:last-child td{border-bottom:0}
  tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,var(--bg-1))}
  .mac{font-family:'SF Mono',Monaco,Consolas,monospace;font-size:12px;color:var(--dim)}
  .sub{color:var(--dim);font-size:12px}

  /* Pills */
  .chip{display:inline-flex;align-items:center;gap:8px;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:500;background:var(--bg-2);border:1px solid var(--line);color:var(--dim);letter-spacing:.2px}
  .chip.ok  {color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,var(--line));background:color-mix(in srgb,var(--good) 12%,var(--bg-2))}
  .chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--bg-2))}
  .chip.bad {color:var(--bad); border-color:color-mix(in srgb,var(--bad)  35%,var(--line));background:color-mix(in srgb,var(--bad)  12%,var(--bg-2))}
  .chip.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
  .chip.bad.dot::before{animation:pulse 1.1s infinite}
  @keyframes pulse{50%{opacity:.3}}

  .panel{display:none}.panel.active{display:block}
  .bar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
  .secttitle{font-size:11px;color:var(--mute);margin:0 0 12px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
  .row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
  .row .f{display:flex;flex-direction:column}.row .f label{margin-top:0}
  .filt{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.filt .chip{cursor:pointer}
  label.chk{display:flex;gap:8px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text);margin:8px 0 0}
  .chk input{width:auto;margin-top:3px}.chk .sub{display:block;font-size:12px;font-weight:400}
  .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  .kv{background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px}
  /* Meine Sicherungen: Kontingentbalken, Karte je Geraet, Zeitplan-Raster */
  .qbar{height:6px;background:var(--bg-2);border-radius:4px;overflow:hidden;margin-top:4px}.qbar.big{height:8px;margin:8px 0 10px}
  .qbar i{display:block;height:100%;background:var(--accent)}.qbar i.warn{background:var(--warn)}.qbar i.bad{background:var(--bad)}
  .qrow{display:flex;gap:10px;align-items:center;font-size:12px;margin:4px 0}.qrow .qn{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qrow .qbar{flex:1;margin:0}.qrow .qbar i{background:var(--ok)}.qrow .qv{width:130px;text-align:right}
  .bkcard{padding:0;overflow:hidden;margin:10px 0}.bkhead{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .bkhead{flex-wrap:nowrap}.bkhead .nm{font-weight:600;font-size:14px}.bkchips{display:flex;flex-wrap:wrap;gap:2px;flex:1;min-width:0}.bkhead .btn{flex:none}
  .bkplan{display:grid;grid-template-columns:1.2fr 1fr 1.1fr 1.4fr auto;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:end}
  .bkplan label{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
  .bkplan select,.bkplan input{width:100%}.ring{display:flex;gap:6px;align-items:center}.ring input{width:58px;text-align:center}.ring span{color:var(--dim)}
  table.bktab{table-layout:fixed}table.bktab td.actions{display:table-cell;text-align:right;white-space:normal}table.bktab td.actions .btn{margin:1px 0 1px 4px}
  @media (max-width:900px){.bkplan{grid-template-columns:1fr 1fr}}
  .icgrid{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.icprev{width:40px;height:40px;border-radius:8px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--text)}.icprev svg{width:26px;height:26px}
  /* Geraeteliste kompakt: festes Raster, Menue liegt frei ueber der Seite */
  table.devs{table-layout:fixed}table.devs td{vertical-align:top}table.devs td .nm{font-weight:600}
  table.devs td.actions{display:table-cell;text-align:right;white-space:nowrap}
  .btn.menu{padding:4px 8px;font-size:15px;line-height:1}
  .devmenu{position:fixed;z-index:60;min-width:230px;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);padding:6px}
  .devmenu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text);font:inherit;font-size:13px;padding:7px 10px;border-radius:6px;cursor:pointer}
  .devmenu button:hover{background:var(--bg-2)}.devmenu button:disabled{opacity:.45;cursor:default}.devmenu button.bad{color:var(--bad)}
  .devmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
  /* Handlungsbedarf: Aktionszelle bleibt Tabellenzelle (Flex auf td verschiebt den Zeilenstrich) */
  table.todo{table-layout:fixed}
  table.todo td.actions{display:table-cell;text-align:right;white-space:normal}
  table.todo td.actions .btn,table.todo td.actions .chip{margin:2px 0 2px 6px;vertical-align:middle}
  table.todo th:nth-child(1){width:80px}table.todo th:nth-child(2){width:160px}
  table.todo th:nth-child(4){width:90px}table.todo th:nth-child(6){width:190px}

  /* Dialog */
  dialog{background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:24px;width:420px;box-shadow:var(--pop)}
  dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}

  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--bg-3);color:var(--text);padding:11px 20px;border-radius:8px;font-size:12.5px;font-weight:500;border:1px solid var(--line);box-shadow:var(--pop);opacity:0;transition:.2s;z-index:9}
  .toast.show{opacity:1}
  pre{background:var(--bg-0);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:11.5px;font-family:'SF Mono',Monaco,monospace;overflow:auto;white-space:pre-wrap;color:var(--dim)}
  code{font-family:'SF Mono',Monaco,monospace;color:var(--accent);background:var(--bg-2);padding:1px 6px;border-radius:4px;font-size:12px}
  hr{border:0;border-top:1px solid var(--line)}

  /* Benutzergruppen-View */
  .ggrid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start}
  @media(max-width:1100px){.ggrid{grid-template-columns:1fr}}
  .gcard{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .gcard .gh{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
  .gcard .gh h2{font-size:14px;font-weight:600;letter-spacing:-.1px}
  .gcard .gb{padding:16px 18px}
  .gbanner{margin:0 0 16px;padding:9px 14px;border-radius:9px;font-size:11.5px;background:color-mix(in srgb,var(--accent2) 12%,var(--bg-1));border:1px solid color-mix(in srgb,var(--accent2) 35%,var(--line));color:var(--text)}
  .swatch{width:12px;height:12px;border-radius:4px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  #grows tr{cursor:pointer}#grows tr.sel{background:color-mix(in srgb,var(--accent) 11%,var(--bg-1));box-shadow:inset 2px 0 0 var(--accent)}
  .gperm{display:flex;flex-direction:column;gap:7px}
  .gitem{display:flex;align-items:center;gap:11px;padding:8px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:.12s}
  .gitem:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .gitem .gic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--bg-3);font-size:14px;flex:0 0 auto}
  .gitem .gtx{flex:1;min-width:0}.gitem .gtx b{font-weight:600;font-size:12.5px;display:block}.gitem .gtx span{color:var(--mute);font-size:11px}
  .gsw{position:relative;width:38px;height:21px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);flex:0 0 auto;transition:.15s}
  .gsw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--mute);transition:.15s}
  .gitem.on .gsw{background:color-mix(in srgb,var(--accent) 30%,var(--bg-3));border-color:var(--accent)}
  .gitem.on .gsw::after{left:19px;background:var(--accent)}
  .gitem.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--bg-2))}
  .gmembers{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;padding-right:4px}
  .gmrow{display:flex;align-items:center;gap:11px;padding:7px 11px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;cursor:pointer}
  .gmrow:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .gmrow.in{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 8%,var(--bg-2))}
  .gav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--bg-0);flex:0 0 auto}
  .gmrow .gtx{flex:1;min-width:0}.gmrow .gtx b{font-size:12.5px;font-weight:600;display:block}.gmrow .gtx span{color:var(--mute);font-size:11px}
  .gchk{width:20px;height:20px;border-radius:6px;border:1px solid var(--line);background:var(--bg-3);display:grid;place-items:center;font-size:12px;color:transparent;flex:0 0 auto}
  .gmrow.in .gchk{background:var(--good);border-color:var(--good);color:var(--bg-0)}
  .glabel{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);font-weight:600;margin:16px 0 7px}
  .glabel span{color:var(--dim);text-transform:none;letter-spacing:0;font-weight:500}
  .colorpick{display:flex;gap:8px;margin-top:6px}
  .colorpick .c{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent}
  .colorpick .c.sel{border-color:var(--text)}
  /* Versions-Status / Channel */
  .chsel{width:auto;min-width:96px;padding:4px 8px;font-size:11.5px;font-weight:700;border-radius:999px;cursor:pointer}
  .chsel.ch-final{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 12%,var(--bg-2))}
  .chsel.ch-beta{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--bg-2))}
  .chsel.ch-alpha{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:color-mix(in srgb,var(--bad) 12%,var(--bg-2))}
  .chip.ch-final{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 12%,var(--bg-2))}
  .chip.ch-beta{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 12%,var(--bg-2))}
  .chip.ch-alpha{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:color-mix(in srgb,var(--bad) 12%,var(--bg-2))}
  .relF.active{background:var(--accent);color:var(--bg-0);border-color:transparent}
  .langsel{display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:3px}
  .langsel button{border:0;background:transparent;color:var(--dim);font-weight:700;font-size:11px;padding:4px 8px;border-radius:5px;cursor:pointer;font-family:inherit}
  .langsel button.on{background:var(--accent);color:var(--bg-0)}

/* Mandatsleiste ganz oben: spaceLYnk / Home Assistant / Kunden & Allgemeines.
   Sie sitzt ueber der Kopfzeile und ist damit in JEDEM Zustand der Menueleiste
   sichtbar - auch wenn die ganz ausgeblendet ist. Zustandsklasse .on steht NACH
   der Grundregel, sonst gewinnt die Grundfarbe. */
.mandatwahl{display:flex;align-items:stretch;gap:0;background:var(--bg-1);
  border-bottom:1px solid var(--line);flex:0 0 auto;
  box-shadow:inset 0 -3px 0 -1px color-mix(in srgb,var(--accent) 35%,transparent)}
.mandatwahl .bw{padding:6px 16px;font-size:12px;color:var(--dim);cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;user-select:none;transition:color .15s,background .15s,border-color .15s}
.mandatwahl .bw:hover{color:var(--text);background:var(--bg-2)}
.mandatwahl .bw .kurz{display:none}
.mandatwahl .kennzahl{margin-left:auto;align-self:center;padding:0 16px;font-size:11.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mandatwahl .bw.on{color:var(--text);font-weight:700;border-bottom-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* Am Telefon zaehlt jeder Pixel: Kurzform statt voller Name, keine Kennzahl. */
@media (max-width:599px){
  .mandatwahl .bw{padding:6px 11px;font-size:11.5px}
  .mandatwahl .bw .lang{display:none}
  .mandatwahl .bw .kurz{display:inline}
  .mandatwahl .kennzahl{display:none}
}
/* Ausserhalb des gewaehlten Mandats: ausgeblendet, nicht geloescht. */
.mandat-aus{display:none !important}