:root{
  --blau:#1e4a8a; --blau-d:#16395f; --hell:#5cb0e8; --rot:#c41e3a;
  --gruen:#1f9d55; --gelb:#e6a700; --orange:#e67e22; --lila:#9b59b6;
  --bg:#0f1b2e; --bg2:#13233b; --card:#18293f;
  --card2:#1f3350; --line:rgba(255,255,255,.08); --text:#eef3f9; --muted:#9fb3cc;
  --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
button{font-family:inherit;}
a{color:var(--hell);}

/* ---------- Kopf ---------- */
.app-header{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  background:var(--blau); padding:10px 14px; box-shadow:0 2px 10px rgba(0,0,0,.4); z-index:5;
}
.app-header .brand{display:flex; flex-direction:column; line-height:1.05;}
.app-header .brand b{font-size:17px; letter-spacing:.3px;}
.app-header .brand span{font-size:11px; color:var(--hell); letter-spacing:1.5px; text-transform:uppercase;}
.app-header .crest{
  width:42px;height:42px;border-radius:0;background:transparent;
  object-fit:contain;display:block;
}
.app-header .spacer{flex:1;}
.app-header .hbtn{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:9px;
  padding:8px 12px;font-size:14px;cursor:pointer;}
.app-header .hbtn:active{background:rgba(255,255,255,.28);}
.app-header select.hbtn{font-weight:600;max-width:150px;}
.app-header select.hbtn option{color:#0c1729;background:#fff;}
.app-header select.hbtn:disabled{opacity:.7;cursor:default;}

/* ---------- Layout ---------- */
.app-body{flex:1 1 auto; display:flex; min-height:0;}
.nav{
  flex:0 0 auto; width:210px; background:var(--bg2); border-right:1px solid var(--line);
  overflow-y:auto; padding:8px;
}
.nav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px;
  color:var(--text); text-decoration:none; font-size:15px; margin-bottom:2px;
}
.nav a .ico{width:22px;text-align:center;}
.nav a:hover{background:rgba(255,255,255,.06);}
.nav a.active{background:var(--blau); color:#fff; font-weight:600;}
.view{flex:1 1 auto; overflow-y:auto; padding:18px 20px 60px;}

/* mobile Bottom-Nav */
.tabbar{display:none;}

@media (max-width:820px){
  .nav{display:none;}
  .view{padding:14px 12px 80px;}
  .tabbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--bg2);
    border-top:1px solid var(--line); z-index:20; padding:4px 2px env(safe-area-inset-bottom);
  }
  .tabbar a{flex:1; text-align:center; color:var(--muted); text-decoration:none;
    font-size:10px; padding:6px 2px; display:flex; flex-direction:column; gap:2px;}
  .tabbar a .ico{font-size:19px;}
  .tabbar a.active{color:var(--hell);}
}

/* ---------- Typo & Bausteine ---------- */
h1{font-size:23px;margin:0 0 4px;}
h2{font-size:18px;margin:22px 0 10px;}
.sub{color:var(--muted);font-size:13px;margin:0 0 16px;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.spacer{flex:1;}
.grid{display:grid;gap:12px;}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;}
.card.click{cursor:pointer;transition:transform .06s, border-color .15s;}
.card.click:hover{border-color:var(--hell);}
.card.click:active{transform:scale(.99);}

.stat-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.tile .big{font-size:30px;font-weight:800;line-height:1;}
.tile .lbl{color:var(--muted);font-size:13px;margin-top:6px;}

.btn{background:var(--blau);color:#fff;border:0;border-radius:10px;padding:10px 16px;
  font-size:15px;font-weight:600;cursor:pointer;}
.btn:active{transform:scale(.98);}
.btn.sec{background:rgba(255,255,255,.10);}
.btn.danger{background:var(--rot);}
.btn.ok{background:var(--gruen);}
.btn.sm{padding:6px 10px;font-size:13px;}
.btn:disabled{opacity:.5;cursor:default;}

.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;}
.pill.gray{background:rgba(255,255,255,.12);color:var(--text);}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.1);color:var(--muted);}

label.field{display:block;margin-bottom:12px;}
label.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;}
input,select,textarea{
  width:100%;background:#0c1729;border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:9px 11px;font-size:15px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hell);}
textarea{min-height:70px;resize:vertical;}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
@media(max-width:560px){.form-2{grid-template-columns:1fr;}}

table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;}
tr.click{cursor:pointer;}
tr.click:hover{background:rgba(255,255,255,.04);}

.avatar{width:40px;height:40px;border-radius:50%;background:var(--blau);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto;}
.avatar.lg{width:64px;height:64px;font-size:22px;}

.empty{color:var(--muted);text-align:center;padding:40px 10px;}
.empty .big{font-size:40px;opacity:.5;margin-bottom:8px;}

.list-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);margin-bottom:8px;}
.list-item .meta{flex:1;min-width:0;}
.list-item .meta .nm{font-weight:600;}
.list-item .meta .sm{color:var(--muted);font-size:12px;}

/* Filterzeile / Chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--text);
  border:1px solid transparent;cursor:pointer;font-size:14px;}
.chip.active{background:var(--blau);border-color:var(--hell);font-weight:600;}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:16px;}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:16px;max-width:540px;
  width:100%;max-height:90vh;overflow-y:auto;padding:20px;}
.modal h3{margin:0 0 14px;font-size:19px;}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}

/* Toast */
#toastHost{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{background:#0c1729;border:1px solid var(--hell);color:#fff;padding:11px 18px;border-radius:10px;
  font-size:14px;opacity:0;transform:translateY(10px);transition:.25s;box-shadow:0 6px 20px rgba(0,0,0,.5);}
.toast.show{opacity:1;transform:none;}
.toast.ok{border-color:var(--gruen);}
.toast.err{border-color:var(--rot);}

/* ---------- Live-Spiel ---------- */
.score{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px;}
.score .num{font-size:46px;font-weight:900;font-variant-numeric:tabular-nums;}
.score .vs{color:var(--muted);font-size:20px;}
.score .lbl{font-size:12px;color:var(--muted);text-align:center;}
.score button{font-size:22px;width:44px;height:44px;border-radius:10px;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;}

.gp-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
.gp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;cursor:pointer;}
.gp.sel{border-color:var(--hell);background:var(--blau-d);}
.gp .nr{font-size:24px;font-weight:800;line-height:1;}
.gp .nm{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gp .cnt{font-size:11px;color:var(--hell);margin-top:4px;}

.act-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
.act{padding:14px 8px;border-radius:10px;border:0;font-size:14px;font-weight:700;cursor:pointer;color:#fff;}
.act.pos{background:var(--gruen);}
.act.neg{background:var(--rot);}
.act.neu{background:var(--blau);}
.act:active{transform:scale(.96);}
.act:disabled{opacity:.4;}

/* Mini-Timer-Leiste im Spiel */
.timerbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.tcard{background:var(--rot);border-radius:10px;padding:8px 12px;font-weight:800;display:flex;
  gap:8px;align-items:center;}
.tcard.done{animation:flash .6s steps(1) infinite;}
@keyframes flash{50%{opacity:.4;}}

/* Kalender */
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-grid .dow{text-align:center;color:var(--muted);font-size:12px;padding:4px 0;}
.cal-cell{min-height:78px;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:4px;font-size:12px;overflow:hidden;}
.cal-cell.other{opacity:.4;}
.cal-cell.today{border-color:var(--hell);}
.cal-cell .dnum{font-weight:700;color:var(--muted);font-size:12px;}
.cal-ev{border-radius:5px;padding:2px 5px;margin-top:3px;color:#fff;font-size:11px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:820px){.cal-cell{min-height:58px;}.cal-ev{font-size:10px;}}

/* ---------- In-App-Webfenster (iframe-Overlay) ---------- */
.webview-overlay{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;}
.webview-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;background:var(--blau);
  padding:8px 10px;box-shadow:0 2px 10px rgba(0,0,0,.4);}
.webview-bar .spacer{flex:1;}
.wvbtn{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;padding:8px 12px;
  font-size:15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap;}
.wvbtn:active{background:rgba(255,255,255,.3);}
.webview-title{font-weight:700;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:50vw;}
.webview-hint{flex:0 0 auto;background:var(--card2);color:var(--muted);font-size:12px;padding:7px 12px;}
.webview-frame{flex:1 1 auto;width:100%;height:100%;border:0;background:#fff;}
.webview-status{flex:1 1 auto;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;gap:8px;color:var(--muted);background:var(--bg);}
.webview-status .big{font-size:52px;opacity:.85;}
.webview-status .wv-off-title{font-size:19px;font-weight:800;color:var(--text);}
.webview-status .wv-off-sub{font-size:14px;max-width:340px;line-height:1.4;}

/* ---------- Lagerbestand-Visualisierung ---------- */
.tile.click{cursor:pointer;transition:transform .06s,border-color .15s;}
.tile.click:hover{border-color:var(--hell);}
.tile.click:active{transform:scale(.99);}
.lager-unit{color:var(--muted);font-size:13px;}
.lager-count{font-size:54px;font-weight:900;line-height:1;color:var(--hell);font-variant-numeric:tabular-nums;}
.lager-crates{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0;}
/* Geometrie (Größe/Spalten) wird inline im JS gesetzt — hier nur Optik */
.crate{background:linear-gradient(#7a5a1e,#5e4416);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.4);}
.crate .cap{background:radial-gradient(circle at 40% 35%,#ffe79a,#e0a92a);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.35);animation:capPop .35s ease both;}
.crate .cap.empty{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);animation:none;}
@keyframes capPop{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}
.lager-bar{height:14px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden;margin:16px 0 0;}
.lager-bar-fill{height:100%;width:0;border-radius:8px;
  background:linear-gradient(90deg,var(--blau),var(--hell));transition:width 1s cubic-bezier(.2,.7,.2,1);}

/* Getränke-Strichliste: Spalten & Bierkönig */
.drink-col{text-align:center;min-width:52px;flex:0 0 auto;}
.drink-col .dc-val{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;}
.drink-col .dc-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.list-item.king{border-color:var(--gelb);box-shadow:inset 0 0 0 1px var(--gelb);}

/* Mehrfach-Auswahl-Liste (z. B. Spieler einteilen) */
.pick-list{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:#0c1729;}
.pick-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;margin:0;}
.pick-row:last-child{border-bottom:0;}
.pick-row input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;padding:0;margin:0;}
.pick-row span{font-size:15px;}

/* Verkauf: ausgerichtete Spielerzeilen (Name · Aufgabe · Status · Aktionen) */
.sale-staff-row{display:grid;grid-template-columns:minmax(90px,1fr) 140px auto auto;align-items:center;
  gap:8px;border-top:1px solid var(--line);padding-top:8px;}
.sale-staff-row .ssr-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
@media(max-width:620px){
  .sale-staff-row{grid-template-columns:1fr auto;}
  .sale-staff-row .ssr-name{grid-column:1 / -1;}
}

/* Ausgerichtete Anwesenheits-Zeile (Name · Status · Aktion) */
.att-row{display:grid;grid-template-columns:minmax(90px,1fr) auto auto;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:8px;padding:9px 12px;}
.att-row .att-name{display:flex;align-items:center;gap:10px;min-width:0;font-weight:600;}
.att-row .att-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:620px){
  .att-row{grid-template-columns:1fr auto;}
  .att-row .att-name{grid-column:1 / -1;}
}

/* ---------- Anmeldung / Rollen ---------- */
.login-overlay{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:20px;overflow:auto;}
.login-box{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px;
  max-width:480px;width:100%;text-align:center;}
.login-box h2{margin:10px 0 2px;}
.login-crest{width:60px;height:60px;border-radius:14px;background:var(--hell);color:var(--blau);
  font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;}
.login-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:18px;}
.login-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 10px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:4px;}
.login-card:hover{border-color:var(--hell);}
.login-card .lc-ico{font-size:32px;line-height:1;}
.login-card .lc-name{font-weight:700;}
.login-card .lc-role{font-size:11px;color:var(--muted);}
.login-card .lc-lock{position:absolute;top:8px;right:10px;font-size:12px;}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:18px 0;}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);}
.pin-dot.on{background:var(--hell);border-color:var(--hell);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:240px;margin:0 auto;}
.pin-key{padding:16px;font-size:20px;font-weight:700;border:0;border-radius:12px;background:var(--card2);
  color:#fff;cursor:pointer;}
.pin-key:active{background:var(--blau);}
.shake{animation:shake .42s;}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-8px);}40%,80%{transform:translateX(8px);}}