@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('/assets/fonts/OpenSans-Variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  color-scheme:light;
  --bg:#f3f4f7; --panel:#fff; --panel-2:#f7f8fb; --border:#e7e9ee; --border-2:#eef0f4;
  --text:#12141c; --muted:#666c7c; --faint:#9a9fac;
  --navy:#172039; --navy-2:#212c4d; --rust:#a83019; --rust-2:#c23c22;
  --accent:#172039; --accent-strong:#212c4d; --accent-weak:#eef0f6; --accent-ink:#fff;
  --green:#158a4d; --red:#d0342c; --amber:#b45309;
  --shadow:0 1px 2px rgba(15,20,35,.04),0 1px 3px rgba(15,20,35,.05);
  --shadow-md:0 10px 24px -8px rgba(23,32,57,.16),0 2px 6px rgba(23,32,57,.06);
  --shadow-lg:0 24px 48px -16px rgba(23,32,57,.28);
  --radius:20px; --radius-sm:10px;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* Seitenleiste: immer dunkles Marken-Blau, unabhaengig vom Hell/Dunkel-Modus */
  --side-bg:#172039; --side-text:rgba(255,255,255,.62); --side-text-dim:rgba(255,255,255,.4); --side-active-bg:rgba(255,255,255,.09); --side-active-text:#fff; --side-border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
.dlogo{width:150px;height:auto;display:block;filter:brightness(0) invert(1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);padding:11px 18px;border-radius:14px;font-weight:600;font-size:14px;
  cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.btn:hover{background:var(--panel-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);box-shadow:var(--shadow-md)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Auth-Karten */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:30px;
  background:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--navy) 16%,transparent),transparent),
             radial-gradient(900px 400px at 100% 110%,color-mix(in srgb,var(--rust) 10%,transparent),transparent),var(--bg)}
.authcard{width:100%;max-width:410px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px 32px;text-align:center}
.authcard .dlogo{width:210px;margin:0 auto 26px;filter:none}
.authcard h1{font-size:26px;margin:0 0 8px;letter-spacing:-.005em;font-weight:400}
.authcard .lead{color:var(--muted);margin:0 0 24px;font-size:13.5px}
.authcard .btn{width:100%}
.foot-note{color:var(--faint);font-size:12px;margin:18px 0 0}
.msg{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;text-align:left}
.msg.err{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.msg.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}

/* App-Layout */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh;background:var(--bg)}
.side{background:linear-gradient(180deg,var(--side-bg) 0%,#0f1526 100%);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 26px;text-decoration:none}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:10px;color:var(--side-text);text-decoration:none;font-weight:500;font-size:13.5px;transition:background .15s var(--ease),color .15s var(--ease)}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.nav a.active svg{opacity:1}
.nav a.active::before{content:'';position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--rust-2)}
.nav-parent{padding:9px 10px 4px;color:var(--side-text-dim);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
.nav-sub{display:block;padding:8px 10px 8px 22px;border-radius:9px;color:var(--side-text);text-decoration:none;font-weight:500}
.nav-sub:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sub.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.side-foot{margin-top:auto;border-top:1px solid var(--side-border);padding-top:14px;display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.who{font-size:12.5px;font-weight:600;line-height:1.25;color:#fff;min-width:0}.who small{display:block;color:#4ade80;font-size:10.5px;font-weight:500;margin-top:3px}
.logout{margin-left:auto;color:var(--side-text-dim);font-size:12px;text-decoration:none;font-weight:600}
.logout:hover{color:#fff}
.main{padding:28px 32px 48px;min-width:0}
.top{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.top-accent{width:4px;height:32px;border-radius:3px;background:linear-gradient(180deg,var(--navy),var(--rust));flex:none}
.top-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top h1{font-size:38px;margin:0;font-weight:400;letter-spacing:-.005em}
.top .sub{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--navy) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--navy) 24%,var(--border));
  border-radius:999px;color:var(--navy);font-size:13.5px;font-weight:700;padding:7px 16px 7px 12px}
.top .sub::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rust);flex:none}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.empty{max-width:520px;margin:8vh auto 0;text-align:center;color:var(--muted)}
.empty-ico{font-size:40px;color:var(--navy);margin-bottom:8px}
.empty h2{color:var(--text);font-size:18px;margin:0 0 8px}
/* Karten, Tabelle, Formular (Nutzer-Seite) */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:720px}
.card-h{padding:14px 18px;font-weight:400;font-size:18px;color:#fff;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,var(--rust) 100%)}
.tbl{width:100%;border-collapse:collapse}
.tbl thead{background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,var(--rust) 100%)}
.tbl thead th{text-align:left;font-size:18px;text-transform:none;letter-spacing:normal;color:#fff;font-weight:400;padding:14px 18px}
.tbl thead th.sortcol{cursor:pointer;user-select:none;position:relative;padding-right:24px}
.tbl thead th.sortcol:hover{opacity:.85}
.tbl thead th.sortcol::after{content:'';position:absolute;right:8px;top:50%;margin-top:-3px;border:4px solid transparent;opacity:.45}
.tbl thead th.sortcol.sort-asc::after{border-bottom-color:#fff;border-top-width:0;opacity:1}
.tbl thead th.sortcol.sort-desc::after{border-top-color:#fff;border-bottom-width:0;opacity:1}
/* th als Zeilen-Beschriftung innerhalb einer Tabelle (z. B. Systemdetails), kein Spalten-Kopf */
.tbl tbody th{text-align:left;font-weight:600;color:var(--muted);font-size:14px;padding:12px 16px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--border-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s ease}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tr.grouprow td{background:var(--panel-2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);padding:11px 18px}
.tbl tr.grouprow:hover{background:var(--panel-2)}
.tbl tr.grouprow .cnt{color:var(--faint);font-weight:600;margin-left:6px;text-transform:none;letter-spacing:normal}
.ugrp-heading{background:var(--panel-2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);padding:11px 18px;border-bottom:1px solid var(--border-2)}
.ugrp-heading .cnt{color:var(--faint);font-weight:600;margin-left:6px;text-transform:none;letter-spacing:normal}
.muted{color:var(--muted)}
.form{padding:16px}
.frow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.frow label{width:80px;color:var(--muted);font-weight:600;font-size:13px}
.form input,.form select,.linkbox input{flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px;font-family:inherit;transition:border-color .15s var(--ease)}
.form input:focus,.form select:focus,.linkbox input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.linkbox{display:flex;gap:10px}
.linkbox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
#enroll-code,#enroll-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11.5px;padding:5px 12px;border-radius:999px;color:#fff}
.st .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.st.on{background:var(--green)}
.st.off{background:var(--red)}
.st.pending{background:var(--faint)}
.ubadge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff}
.ubadge.ok{background:var(--green)}
.ubadge.n{background:var(--amber)}

/* Updates-Ansicht */
.hidden{display:none}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .hint{color:var(--faint);font-size:12px}
.filtersel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:var(--shadow)}
.filtersel:focus{outline:none;border-color:var(--navy)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;box-shadow:var(--shadow)}
.seg button,.seg a{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:13px;padding:8px 15px;border-radius:8px;cursor:pointer;text-decoration:none}
.seg button.active,.seg a.active{background:var(--navy);color:#fff}
.ugrp{border-bottom:1px solid var(--border-2)}
.ugrp:last-child{border-bottom:none}
.ugrp summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer}
.ugrp summary::-webkit-details-marker{display:none}
.ugrp summary:hover{background:var(--panel-2)}
#view-byupdate .ugrp summary{display:grid;grid-template-columns:108px 1fr 68px 130px auto auto;align-items:center}
.tbl-updhead{display:grid;grid-template-columns:108px 1fr 68px 130px auto auto;align-items:center;gap:12px;padding:14px 18px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,var(--rust) 100%);color:#fff;font-size:18px;font-weight:400}
.tbl-updhead .sortcol{cursor:pointer;user-select:none;position:relative;padding-right:18px}
.tbl-updhead .sortcol:hover{opacity:.85}
.tbl-updhead .sortcol::after{content:'';position:absolute;right:0;top:50%;margin-top:-3px;border:4px solid transparent;opacity:.45}
.tbl-updhead .sortcol.sort-asc::after{border-bottom-color:#fff;border-top-width:0;opacity:1}
.tbl-updhead .sortcol.sort-desc::after{border-top-color:#fff;border-bottom-width:0;opacity:1}
#view-bysite .usub .urow{display:grid;grid-template-columns:108px 1fr 68px 140px auto;align-items:center;padding-left:18px}
.urow-upd{display:grid;grid-template-columns:100px 1fr 68px 130px auto;gap:10px;padding:9px 16px}
.uicon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.uicon.core,.uicon.site{background:var(--accent-weak);color:var(--navy)}
.uicon.plugin{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.uicon.theme{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.uname{font-weight:600;font-size:14px;min-width:0}
.uname small{display:block;color:var(--faint);font-size:11.5px;font-weight:500}
.uflag{display:flex;align-items:center}
.uver{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.uver .to{color:var(--green);font-weight:700}
.ubadge2{font-size:11.5px;font-weight:700;background:var(--accent-weak);color:var(--navy);padding:4px 10px;border-radius:999px;white-space:nowrap}
.usub{background:var(--panel-2);border-top:1px solid var(--border-2)}
.urow{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 46px;border-bottom:1px solid var(--border-2);font-size:13px}
.urow:last-child{border-bottom:none}
.urow .cur{margin-left:auto;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
#view-bysite .usub .urow .cur{margin-left:0;white-space:nowrap}
.uacts{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.xbtn{width:34px;height:34px;border:1px solid var(--border);background:var(--panel);border-radius:10px;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;display:inline-grid;place-items:center;transition:all .15s var(--ease)}
.xbtn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.xbtn svg{width:16px;height:16px}
.xbtn.run:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.xbtn.failed{background:var(--red);color:#fff;border-color:var(--red);cursor:default}
.xbtn.run.spin svg{animation:sh-spin 1s linear infinite}
.xbtn:disabled{opacity:.5;cursor:default}
/* Fleet-Kill-Switch: durchgehend gefuellt (nicht nur beim Hover), Rot/Gruen aus der gleichen Palette
   wie der Rest der Seite. Michael: bei duenn umrandeten Buttons war der Unterschied zwischen aktiven
   und inaktiven Plugins in einer langen Liste kaum zu erkennen, volle Flaeche ist eindeutiger. */
.xbtn.toggle-on{background:var(--green);color:#fff;border-color:var(--green)}
.xbtn.toggle-on:hover{background:color-mix(in srgb,var(--green) 80%,black)}
.xbtn.toggle-off{background:var(--red);color:#fff;border-color:var(--red)}
.xbtn.toggle-off:hover{background:color-mix(in srgb,var(--red) 80%,black)}
.xbtn.toggle-on.spin svg,.xbtn.toggle-off.spin svg{animation:sh-spin 1s linear infinite}
.mini{display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--panel);padding:7px 13px;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;color:var(--muted);text-decoration:none;transition:all .15s var(--ease)}
.mini svg{width:14px;height:14px;flex:none}
.mini:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.mini:disabled{opacity:.6;cursor:default}
.mini.danger{background:var(--red);color:#fff;border-color:var(--red)}
.mini.danger:hover{background:color-mix(in srgb,var(--red) 80%,black);border-color:color-mix(in srgb,var(--red) 80%,black)}
.mini.success{background:var(--green);color:#fff;border-color:var(--green)}
.mini.success:hover{background:color-mix(in srgb,var(--green) 80%,black);border-color:color-mix(in srgb,var(--green) 80%,black)}
.banner-info{background:var(--accent-weak);color:var(--text);border:1px solid color-mix(in srgb,var(--navy) 20%,transparent);border-radius:12px;padding:11px 15px;margin-bottom:16px;font-size:12.5px}
.siterow{display:flex;align-items:center;gap:11px}
.sitelink{color:inherit;text-decoration:none}
.sitelink:hover b{color:var(--navy)}
.favsm{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;overflow:hidden}
.favsm img{width:100%;height:100%;object-fit:cover;display:block}
/* Seiten-Detail */
.crumb{color:var(--faint);font-size:12.5px;margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--navy)}
.hero{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border)}
.hero h1{font-size:28px;margin:0;font-weight:400;letter-spacing:-.005em}
.hero .u{color:var(--muted);font-size:13.5px}
.hero .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.settings-menu{position:relative}
.settings-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:14px;min-width:220px;z-index:30;text-align:left}
.spanel-label{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.settings-panel select{width:100%;font:inherit;font-size:14px;font-weight:600;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text)}
.settings-panel select:focus{outline:none;border-color:var(--navy)}
.fav-lg{width:50px;height:50px;border-radius:14px;background:var(--accent-weak);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:21px;flex:none;overflow:hidden}
.fav-lg img{width:100%;height:100%;object-fit:cover;display:block}
.info{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.ic{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);transition:box-shadow .18s var(--ease),transform .18s var(--ease);display:flex;align-items:center}
.info .ic:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.ic-top{display:flex;align-items:center;gap:14px;margin-bottom:0}
.ic .ico{width:38px;height:38px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;flex:none;color:var(--navy)}
.ic .ico svg{width:18px;height:18px}
.ic .k{font-size:12.5px;color:var(--muted);font-weight:600;display:block;margin-bottom:1px}
.ic .v{font-size:16px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
.ic .v small{font-weight:500;color:var(--faint);font-size:12px}
.stat4 .v{font-size:22px;letter-spacing:-.02em;margin-top:1px}
.ic.tile-hero{background:linear-gradient(135deg,var(--navy) 0%,#232f56 60%,var(--rust) 160%);border-color:transparent}
.ic.tile-hero .k{color:rgba(255,255,255,.72)}
.ic.tile-hero .v{color:#fff}
.ic.tile-hero .ico{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Dashboard-Kopf: 4 Kacheln (Haelfte) + Update-Verlauf (Haelfte), fester 50/50-Split.
   Bewusst NICHT aspect-ratio (Wechselwirkung mit Grid-fr-Spalten war browserabhaengig unzuverlaessig,
   Chromium zeigte korrekte 50/50, live kam ca. 72/26 raus, vermutlich Safari-Grid-Eigenheit).
   Stattdessen der alte, browserunabhaengig zuverlaessige padding-Prozent-Trick: Hoehe wird strikt aus
   der eigenen Breite berechnet (padding-top:100% = Quadrat, 25% fuer die 4x so breite Verlauf-Karte),
   keine Rueckkopplung mit der Zeilenhoehe moeglich. ---------- */
.dash-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,4fr);gap:14px;margin-bottom:22px;align-items:start}
.dash-top .sq-wrap{position:relative;width:100%;padding-top:100%}
.dash-top .sq-wrap.chart-wrap{padding-top:25%}
.dash-top .sq-wrap > .ic,.dash-top .sq-wrap > .trend-card{position:absolute;inset:0;width:100%;height:100%;margin:0}
.dash-top .ic{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:16px;overflow:hidden}
.dash-top .ic-top{flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.dash-top .ic .ico{width:32px;height:32px;flex:none}
.dash-top .ic .ico svg{width:16px;height:16px}
.dash-top .ic .k{font-size:12px}
.dash-top .ic .v{font-size:19px}
.trend-card{max-width:none;display:flex;flex-direction:column}
.trend-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:14px 18px 0;font-size:13.5px;font-weight:700;color:var(--text)}
.trend-title .trend-sub{font-size:11.5px;font-weight:500;color:var(--muted)}
.trend-legend{display:inline-flex;gap:12px;margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.trend-legend span{display:inline-flex;align-items:center;gap:5px}
.trend-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.trend-chart-wrap{flex:1;padding:6px 18px 14px;min-height:0;min-width:0}
.trend-chart-wrap svg{width:100%;height:100%;display:block;min-height:0}
@media(max-width:960px){
  .dash-top{grid-template-columns:repeat(2,1fr)}
  .dash-top .sq-wrap.chart-wrap{grid-column:1 / -1;padding-top:35%}
}

.cols2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.cols2 > div{display:flex}
.cols2 > div .card{flex:1;display:flex;flex-direction:column}
.tl{padding:6px 16px 12px}
.ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-2);font-size:12.5px}
.ev:last-child{border-bottom:none}
.ev .when{margin-left:auto;color:var(--faint);font-size:11.5px;white-space:nowrap}
@media(max-width:960px){.info{grid-template-columns:repeat(2,1fr)}.cols2{grid-template-columns:1fr}}
.dotk{width:8px;height:8px;border-radius:2px;flex:none}
.dotk.core{background:var(--navy)}.dotk.plugin{background:var(--amber)}.dotk.theme{background:var(--green)}
.tbadge{display:inline-block;width:fit-content;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;flex:none;color:#fff;text-align:center}
.tbadge.plugin{background:var(--amber)}
.tbadge.theme{background:var(--green)}
.tbadge.core{background:var(--navy);color:#fff}
.tbadge.lang{background:#7c4fd6}
.majtag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;background:color-mix(in srgb,var(--rust) 14%,transparent);color:var(--rust);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.ibtn{width:36px;height:36px;border:1px solid var(--border);background:var(--panel);border-radius:10px;display:inline-grid;place-items:center;cursor:pointer;color:var(--muted);transition:all .15s var(--ease)}
.ibtn:hover{background:var(--panel-2);color:var(--navy);border-color:var(--navy);transform:translateY(-1px);box-shadow:var(--shadow)}
.ibtn svg{width:18px;height:18px}
.ibtn:disabled{opacity:.5;cursor:default;transform:none}
.ibtn.accent{background:var(--navy);border-color:var(--navy);color:#fff}
.ibtn.accent:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.ibtn.spin svg{animation:sh-spin 1s linear infinite}
.ibtn.vulnbad{background:var(--red);border-color:var(--red);color:#fff}
.ibtn.vulnbad:hover{background:color-mix(in srgb,var(--red) 80%,black);border-color:color-mix(in srgb,var(--red) 80%,black)}
.ibtn.vulnok{background:var(--green);border-color:var(--green);color:#fff}
.ibtn.vulnok:hover{background:color-mix(in srgb,var(--green) 80%,black);border-color:color-mix(in srgb,var(--green) 80%,black)}
.ibtn.vulnunknown{background:var(--muted);border-color:var(--muted);color:#fff}
.ibtn.vulnunknown:hover{background:var(--faint);border-color:var(--faint)}
@keyframes sh-spin{to{transform:rotate(360deg)}}

/* ---------- Status-Maskottchen (globaler Auftrags-Anzeiger, freigestellt ohne Kachel) ---------- */
.statusind{height:84px;width:auto;flex:none;border:none;background:none;padding:0;margin:0;
  display:block;cursor:default}
.statusind:not(:first-child){margin-left:8px}
.statusind .si-mascot{height:100%;width:auto;display:block}
.statusind.running{animation:si-bob 1.1s var(--ease) infinite}
@keyframes si-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:820px){.statusind{height:70px}}

/* ---------- Eigenes Tooltip (data-tip statt Browser-Titel, erscheint sofort) ---------- */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);background:var(--navy);color:#fff;font-size:12px;font-weight:600;
  padding:7px 11px;border-radius:8px;white-space:nowrap;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease,transform .1s ease;z-index:60;
}
[data-tip]::before{
  content:'';position:absolute;bottom:calc(100% + 6px);left:50%;width:8px;height:8px;background:var(--navy);
  border-radius:2px;transform:translate(-50%,4px) rotate(45deg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease,transform .1s ease;z-index:59;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(45deg)}
/* Letztes Icon in einer Karte: Tooltip rechtsbündig, sonst wird er vom abgerundeten Kartenrand abgeschnitten */
.card [data-tip]:last-child::after{left:auto;right:-8px;transform:translateY(4px)}
.card [data-tip]:last-child::before{left:auto;right:10px;transform:translateY(4px) rotate(45deg)}
.card [data-tip]:last-child:hover::after,.card [data-tip]:last-child:focus-visible::after{transform:translateY(0)}
.card [data-tip]:last-child:hover::before,.card [data-tip]:last-child:focus-visible::before{transform:translateY(0) rotate(45deg)}

/* ---------- Mobile Hauptmenü: Hamburger-Icon + Slide-in-Drawer statt fester/horizontaler Sidebar ---------- */
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}
.mobile-site-list{display:none}
.mobile-list-head{display:none}
@media (max-width:820px){
  html,body{overflow-x:hidden;max-width:100vw}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;top:0;left:0;right:0;height:56px;
    padding:0 16px;background:var(--side-bg);z-index:70;box-shadow:var(--shadow-md)}
  .mobile-menu-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:none;border-radius:9px;
    background:rgba(255,255,255,.09);color:#fff;cursor:pointer}
  .mobile-menu-btn svg{width:21px;height:21px}
  .dlogo-sm{height:36px;width:auto;filter:brightness(0) invert(1)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(10,12,20,.5);z-index:65;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .app{grid-template-columns:1fr;padding-top:56px;max-width:100vw;overflow-x:hidden}
  .side{position:fixed;top:0;left:0;height:100vh;width:264px;z-index:68;
    transform:translateX(-100%);transition:transform .22s var(--ease);
    flex-direction:column;align-items:stretch;overflow-x:visible;overflow-y:auto;padding:72px 16px 22px}
  .side.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  /* Eigenes Logo im Drawer weg: die fixe Topbar zeigt es schon dauerhaft, ein zweites Mal direkt
     darunter sah nicht nur doppelt aus, es lag durch die hoehere Topbar (z-index 70 vs. 68) auch noch
     halb dahinter versteckt, wirkte dadurch abgeschnitten. Der Drawer beginnt jetzt direkt mit der
     Navigation, mit Abstand von oben (72px Padding), der Platz fuer die Topbar freihaelt. */
  .side .brand{display:none}
  .nav{flex-direction:column}
  .side-foot{display:flex}
  /* Kopfzeile jeder Seite (Farbbalken, Ueberschrift, Info-Pille, Kopf-Knoepfe): ohne Zeilenumbruch
     lief das bei schmalen Bildschirmen aus dem sichtbaren Bereich heraus und erzwang horizontales
     Scrollen auf jeder Seite, nicht nur in Tabellen. Reines flex-wrap reicht aber nicht: dann brach
     die Zeile teils schon zwischen dem duennen Farbbalken (.top-accent) und der Ueberschrift um, der
     Balken landete allein in einer eigenen Zeile ueber dem Titel statt daneben. .top-actions bekommt
     deshalb eine erzwungene eigene Zeile (flex-basis:100%), Farbbalken und Ueberschrift bleiben so
     immer zusammen auf der ersten Zeile. */
  .top{flex-wrap:wrap;row-gap:10px}
  .top h1{font-size:26px}
  .top-actions{margin-left:0;flex-basis:100%;justify-content:flex-end}
}

@media (max-width:820px){
  #view-byupdate .ugrp summary,#view-bysite .usub .urow,.tbl-updhead,.urow-upd{grid-template-columns:84px 1fr auto}
  #view-byupdate .ugrp summary .uflag,#view-byupdate .ugrp summary .uver,#view-bysite .usub .urow .uflag,#view-bysite .usub .urow .uver,
  #view-byupdate .ugrp summary .ubadge2,.tbl-updhead .col-version,.tbl-updhead .col-sites,.urow-upd .uflag,.urow-upd .cur{display:none}
  /* Echte HTML-Tabelle (table-layout:fixed) auf der Uebersicht verhielt sich auf echtem Mobile
     Safari nachweislich anders als in jedem Test (mehrere Anlaeufe: display:none auf den versteckten
     Spalten, dann zusaetzlich width:0, dann eine <colgroup> mit expliziten <col>-Breiten, immer
     blieb der Seitenname unsichtbar). Statt weiter an table-layout:fixed zu reparieren, wird die
     Tabelle auf Mobile komplett durch eine zweite, parallele Liste ersetzt (.mobile-site-list in
     dashboard.php), die dasselbe Flexzeilen-Muster nutzt wie Backups/Updates/Kill-Switch, wo es
     nachweislich funktioniert. */
  .tbl-sites{display:none}
  .mobile-site-list{display:block}
  .mobile-list-head{display:block}
  .card{overflow-x:auto}
  .authwrap{padding:16px}
  .authcard{padding:28px 22px}
  .msrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:11px 16px;border-bottom:1px solid var(--border-2)}
  .msrow:last-child{border-bottom:none}
  .msrow .siterow{flex:1 1 160px;min-width:0}
  .msrow .siterow > span:last-child{min-width:0;overflow:hidden}
  .msrow .siterow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* URL unter dem Namen mobil weg, Michael: der Name allein reicht, spart Platz in der Zeile. */
  .msrow .siterow .muted{display:none}
  .msrow-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
  /* Auf der Uebersicht bleibt neben Login zusaetzlich das Sicherheits-Icon sichtbar (Michael: eine der
     wichtigsten Warnungen unterwegs), nur der DB+Dateien-Sammel-Knopf gibt es in der Mobile-Liste
     erst gar nicht (siehe dashboard.php). */

  /* Gemeinsames Zeilen-Muster (Backups pro Seite, Updates "Nach Seite" pro Seite, Kill-Switch pro Plugin):
     Icon + Name + Zaehl-Pille + ein oder zwei Aktions-Knoepfe passen bei langen Namen nicht mehr in eine
     Zeile. Statt horizontal zu ueberlaufen, darf die Zeile umbrechen, Name bekommt Ellipsis statt Umbruch
     mitten im Wort. */
  .ugrp summary{flex-wrap:wrap;row-gap:8px}
  .ugrp summary .uname{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ugrp summary .uname small{white-space:normal;overflow:visible;text-overflow:clip}
  .urow{padding-left:18px;flex-wrap:wrap;row-gap:6px}

  /* Backups: auf dem Handy zaehlt vor allem der schnelle Sammel-Knopf, die zwei Einzel-Knoepfe (nur DB,
     nur Dateien) verschwinden aus der Kopfzeile, damit dort Platz fuer Name und Sammel-Knopf bleibt. */
  #backups-page .ugrp summary .js-backup,#backups-page .ugrp summary .js-backup-files{display:none}
}