:root { color-scheme: light;
  --bg:#f4f6f8; --card:#fff; --line:#e2e6eb; --txt:#1b2330; --mut:#6a7482;
  --blue:#1f6feb; --blue-d:#1257c9; --green:#178a4c; --red:#c4432b; --amber:#b57d0e;
  --green-bg:#e7f5ec; --red-bg:#fbeae5; --amber-bg:#fdf3dd; --blue-bg:#e8f0fe;
  --side:#101826; --side-txt:#c6cfdd; --side-on:#fff;
}
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--txt);
  font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif; }

/* ---------- Anmeldeseiten ---------- */
.tor { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.torkarte { width:100%; max-width:410px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:30px 28px; box-shadow:0 1px 3px rgba(16,24,38,.06); }
.marke { font-weight:700; font-size:16px; color:var(--side); margin-bottom:4px; }
.marke .sm { display:block; font-weight:400; font-size:12px; color:var(--mut); }
.torkarte h1 { font-size:20px; margin:20px 0 6px; }
.torkarte .unter { color:var(--mut); font-size:13.5px; margin-bottom:20px; }

label.f { display:block; font-size:11.5px; color:var(--mut); font-weight:600;
  margin:14px 0 4px; text-transform:uppercase; letter-spacing:.3px; }
input, select, textarea { width:100%; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; font:inherit; background:#fff; color:var(--txt); }
input:focus, select:focus { outline:2px solid var(--blue); border-color:var(--blue); }
input[type=checkbox] { width:auto; }

.btn { border:1px solid var(--line); background:#fff; color:var(--txt); padding:9px 16px;
  border-radius:8px; cursor:pointer; font:inherit; font-size:13.5px; }
.btn:hover { background:#f7f9fb; }
.btn.prim { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
.btn.prim:hover { background:var(--blue-d); }
.btn.gefahr { color:var(--red); border-color:#f0c6bb; }
.btn.gefahr:hover { background:var(--red-bg); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.voll { width:100%; margin-top:20px; padding:11px; font-size:14.5px; }
.btn.klein { padding:5px 10px; font-size:12.5px; }

.hinweis { padding:10px 13px; border-radius:8px; font-size:13.5px; margin-top:16px; line-height:1.5; }
.hinweis.fehler { background:var(--red-bg); color:var(--red); }
.hinweis.gut { background:var(--green-bg); color:var(--green); }
.hinweis.info { background:var(--blue-bg); color:var(--blue-d); }
.hinweis.warn { background:var(--amber-bg); color:var(--amber); }

.zeile { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.zeile.spread { justify-content:space-between; }
.nebenan { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; }
a.link { color:var(--blue); cursor:pointer; text-decoration:none; }
a.link:hover { text-decoration:underline; }
.mut { color:var(--mut); } .sm { font-size:12.5px; }

/* Passwortstärke */
.staerke { height:5px; background:#eef1f5; border-radius:3px; margin-top:7px; overflow:hidden; }
.staerke i { display:block; height:100%; width:0; transition:width .2s, background .2s; }

/* ---------- Anwendung ---------- */
#huelle { display:flex; min-height:100vh; }
#seite { width:212px; flex:0 0 212px; background:var(--side); color:var(--side-txt);
  padding:14px 0 20px; display:flex; flex-direction:column; }
#seite .marke { color:#fff; padding:4px 16px 14px; }
#seite .marke .sm { color:#7f8ca0; }
#seite nav { flex:1; }
#seite button { display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--side-txt); padding:8px 16px; font:inherit; font-size:13px; cursor:pointer;
  border-left:3px solid transparent; }
#seite button:hover { color:#fff; background:#182234; }
#seite button.an { color:var(--side-on); background:#1d2a40; border-left-color:var(--blue);
  font-weight:600; }
#seite .trenner { border-top:1px solid #223046; margin:8px 16px; }
#konto { padding:12px 16px 0; border-top:1px solid #223046; margin-top:8px; }
#konto .name { color:#fff; font-size:13px; font-weight:600; }
#konto .rolle { font-size:11.5px; color:#7f8ca0; }

#inhalt { flex:1; padding:20px 24px 50px; max-width:1400px; }
.karte { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px; margin-bottom:14px; }
.karte h2 { font-size:15.5px; margin-bottom:12px; }
h3 { font-size:13.5px; margin:16px 0 8px; }

table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; font-size:11.5px; color:var(--mut); text-transform:uppercase;
  letter-spacing:.3px; padding:7px 9px; border-bottom:1px solid var(--line); }
td { padding:9px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
td.r, th.r { text-align:right; }

.punkt { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px;
  background:#c3cad3; vertical-align:middle; }
.punkt.an { background:var(--green); box-shadow:0 0 0 3px var(--green-bg); }
.marke2 { display:inline-block; padding:2px 9px; border-radius:12px; font-size:11.5px; font-weight:600; }
.m-inhaber { background:var(--blue-bg); color:var(--blue-d); }
.m-mitarbeiter { background:var(--green-bg); color:var(--green); }
.m-leser { background:#eef1f5; color:#5b6573; }
.m-aus { background:var(--red-bg); color:var(--red); }
.m-wartet { background:var(--amber-bg); color:var(--amber); }

.gitter { display:grid; gap:12px; }
.g2 { grid-template-columns:1fr 1fr; }
.g3 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
@media (max-width:820px){ .g2 { grid-template-columns:1fr; } }

.kachel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.kachel .l { color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
.kachel .v { font-size:20px; font-weight:650; margin-top:2px; }

/* Warnband, wenn der Betreiber in einem fremden Betrieb arbeitet */
.fremdband { background:var(--amber-bg); color:var(--amber); border:1px solid #eddba6;
  border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13.5px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.fremdband .btn { margin-left:auto; }

dialog { border:none; border-radius:14px; padding:0; max-width:460px; width:94%;
  box-shadow:0 12px 40px rgba(16,24,38,.22); }
dialog::backdrop { background:rgba(16,24,38,.45); }
dialog .inhalt { padding:24px; }
dialog h2 { font-size:17px; margin-bottom:6px; }

#toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  background:var(--side); color:#fff; padding:11px 20px; border-radius:9px; font-size:13.5px;
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:99; max-width:90vw; }
#toast.zeig { opacity:1; }

@media (max-width:820px){
  #huelle { flex-direction:column; }
  #seite { width:100%; flex:none; }
  #seite nav { display:flex; flex-wrap:wrap; gap:4px; padding:0 8px; }
  #seite button { width:auto; border-left:none; border-radius:6px; padding:6px 11px; }
  #seite .trenner { display:none; }
  #inhalt { padding:16px 14px 40px; }
}