/* launcher.css – MD CloudSys Start-/Login-App (App-Übersicht) */
:root{
  --bg:#000;               /* schwarzer Hintergrund */
  --panel:#0c0f1a;
  --text:#f7f9ff;
  --muted:#c4cdf0;
  --navy:#272a74;          /* CloudSys-Dunkelblau (Schrift) */
  --navy-2:#2b2f83;
  --neon:#2f6bff;          /* Neon-Dunkelblau (Rand) */
  --neon-soft:rgba(47,107,255,.75);
  --line:#1b2036;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;color-scheme:dark}
body{background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));}
#app{max-width:600px;margin:0 auto}
.boot{display:grid;place-items:center;min-height:60dvh}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid #222;border-top-color:var(--neon);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.l-wrap{display:flex;flex-direction:column;gap:18px}

/* Logo */
.l-brand{display:flex;justify-content:center;margin-top:4vh}
/* quadratisch fixieren: nie verzerren, egal welcher Container */
.l-brand img{display:block;width:200px;max-width:62%;height:auto;aspect-ratio:1/1;object-fit:contain;flex:none;
  filter:drop-shadow(0 8px 26px rgba(47,107,255,.28))}
.l-brand.small img{width:120px;max-width:34%}

.l-head{text-align:center}
.l-title{margin:6px 0 0;font-size:1.4rem;font-weight:800;letter-spacing:.2px}
.l-sub{margin:6px 0 0;color:var(--muted);font-size:.92rem}

/* Login-Karte */
.l-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 10px 34px rgba(0,0,0,.5)}
.l-lab{font-size:.8rem;color:var(--muted);margin-top:6px}
.l-inp{background:#070a12;border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--text);font-size:1rem;outline:none}
.l-inp::placeholder{color:#aeb8dc;opacity:1}
.l-inp option{background:#070a12;color:var(--text)}
input,select,textarea,button{color:inherit}
input[type="date"]::-webkit-datetime-edit,input[type="time"]::-webkit-datetime-edit{color:var(--text)}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.9}
input:-webkit-autofill{-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px #070a12 inset;caret-color:var(--text)}
.l-inp:focus{border-color:var(--neon);box-shadow:0 0 0 3px rgba(47,107,255,.22)}
.l-btn{margin-top:14px;background:var(--neon);color:#fff;border:0;border-radius:12px;padding:14px;font-weight:800;font-size:1rem;cursor:pointer;
  box-shadow:0 6px 20px rgba(47,107,255,.4)}
.l-btn:active{transform:translateY(1px)}
.l-err{background:rgba(255,60,60,.12);border:1px solid rgba(255,80,80,.4);color:#ffb4b4;border-radius:10px;padding:10px 12px;font-size:.88rem}
.l-foot{text-align:center;color:var(--muted);font-size:.8rem;margin:2px 0 0}

/* Kopf nach Login */
.l-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.l-hello{font-weight:800;font-size:1.12rem}
.l-role{color:var(--muted);font-size:.82rem;margin-top:2px}
.l-logout{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 14px;font-size:.85rem;cursor:pointer}
.l-impbar{width:100%;border:1px solid var(--neon);border-radius:13px;background:rgba(47,107,255,.16);color:var(--text);min-height:42px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font-weight:800;cursor:pointer}
.l-impbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-impbar small{color:#bfe6ff;font-weight:900}
.l-apps-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:4px 2px 0;font-weight:700}

/* Kacheln: weiß, Navy-Schrift, Neon-Dunkelblau-Rand */
.l-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.l-tile{position:relative;text-align:left;background:#fff;color:var(--navy);
  border:2.5px solid var(--neon);border-radius:18px;padding:16px 14px;min-height:140px;cursor:pointer;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 0 0 1px rgba(47,107,255,.35), 0 0 18px var(--neon-soft), 0 8px 22px rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .12s ease}
.l-tile:active{transform:scale(.98)}
.l-tile:hover{box-shadow:0 0 0 1px var(--neon), 0 0 26px var(--neon), 0 8px 24px rgba(0,0,0,.5)}
.l-tile-badge{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:1rem;letter-spacing:.5px}
.l-tile-name{font-weight:900;font-size:1.05rem;line-height:1.15;color:var(--navy)}
.l-tile-desc{color:#3a3f6b;font-size:.8rem;line-height:1.3}
.l-tile-tag{position:absolute;top:12px;right:12px;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--neon);border-radius:999px;padding:3px 9px;font-weight:800}
.l-msg{grid-column:1/-1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;color:var(--muted);text-align:center}

/* Admin: Rechte-Übersicht */
.l-admin-btn{margin-top:12px;width:100%;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px;font-size:.92rem;cursor:pointer}
.l-admin-btn:hover{border-color:var(--neon)}
.l-admin-wrap{max-width:100%}
.l-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.l-tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
.l-tbl th,.l-tbl td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:9px 10px;text-align:center;white-space:nowrap}
.l-tbl thead th{background:#0e1220;color:var(--muted);position:sticky;top:0}
.l-tbl td:first-child,.l-tbl th:first-child{text-align:left}
.l-tbl td.ok{color:#57e39a;font-weight:800}
.l-tbl td.no{color:#6b7280}
.l-uid{display:inline-block;margin-left:8px;font-size:.72rem;color:var(--neon);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.l-mail{font-size:.75rem;color:var(--muted)}
.l-badge{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted)}
.l-badge.admin{color:#bfe6ff;border-color:var(--neon)}

/* PC: Launcher nutzt mehr Breite */
@media (min-width:1024px){
  #app{max-width:1100px}
  .l-grid{grid-template-columns:repeat(3,1fr)}
  .l-admin-wrap{max-width:1100px}
}

/* iPhone 13 mini Hochformat: Kacheln bleiben 2-spaltig, aber kompakter */
@media (max-width:390px){
  .l-brand img{width:170px}
  .l-tile{min-height:126px;padding:14px 12px}
  .l-tile-name{font-size:1rem}
}
/* Querformat: mehr Kacheln pro Reihe, Logo kleiner */
@media (orientation:landscape) and (max-height:500px){
  #app{max-width:760px}
  .l-brand{margin-top:1vh}
  .l-brand img{width:120px}
  .l-grid{grid-template-columns:1fr 1fr 1fr}
  .l-tile{min-height:112px}
}

/* ---------------- Admin: Nutzerverwaltung ---------------- */
.l-ok{background:rgba(47,107,255,.14);border:1px solid var(--neon);color:#cfe0ff;border-radius:10px;padding:10px 12px;font-size:.9rem;font-weight:700}
.l-badge.ok2{color:#57e39a;border-color:#1f6b45}
.l-badge.danger{color:#ff9a9a;border-color:rgba(255,90,90,.5)}
.l-ulist{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.l-ucard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.l-urow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.l-uinfo{min-width:0}
.l-uacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.l-mini{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 13px;font-size:.85rem;font-weight:700;cursor:pointer}
.l-mini:hover{border-color:var(--neon)}
.l-mini.ghost{color:var(--muted)}
.l-mini.danger{color:#ff9a9a;border-color:rgba(255,90,90,.4)}
.l-mini.block{width:100%;margin-top:8px;padding:12px}
.l-checks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.l-check{display:flex;align-items:center;gap:9px;background:#070a12;border:1px solid var(--line);border-radius:11px;padding:11px 12px;font-size:.95rem;cursor:pointer}
.l-check.sm{padding:7px 10px;font-size:.82rem;background:transparent}
.l-check input{width:20px;height:20px;accent-color:var(--neon);flex:none}
.l-pwlist{display:flex;flex-direction:column;gap:10px}
.l-pwrow{display:flex;flex-direction:column;gap:6px;background:#070a12;border:1px solid var(--line);border-radius:11px;padding:10px}
.l-pwh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.9rem}