:root{
  --bg:#0f1420; --panel:#1a2130; --panel2:#232c3d; --line:#313d54;
  --text:#e6ebf2; --muted:#93a1b5; --accent:#4a9eff; --accent2:#1DB954;
  --danger:#e5534b; --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:.3em 0 .4em}
h2{font-size:1.2rem;margin:1.2em 0 .5em;color:#cdd8e6}
h3{margin:.2em 0}
.muted{color:var(--muted)}
.wrap{max-width:1000px;margin:0 auto;padding:20px}

/* Navigation */
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--line);padding:10px 20px}
.nav .brand{font-weight:700;font-size:1.15rem;color:var(--text)}
.nav nav{display:flex;gap:14px;flex-wrap:wrap}
.nav nav a{color:var(--muted)}
.nav nav a:hover{color:var(--text);text-decoration:none}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* Buttons */
button,.btn{font:inherit;cursor:pointer}
.btn{display:inline-block;background:var(--panel2);color:var(--text);border:1px solid var(--line);
  padding:7px 12px;border-radius:8px}
.btn:hover{border-color:var(--accent);text-decoration:none}
.primary{background:var(--accent);color:#04101f;border:none;padding:9px 16px;border-radius:8px;font-weight:600}
.primary:hover{filter:brightness(1.08)}
.link-btn{background:none;border:none;color:var(--accent);padding:2px 4px}
.link-btn:hover{text-decoration:underline}
.link-btn.danger,.danger{color:var(--danger)}

/* Flash */
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;border:1px solid}
.flash.ok{background:rgba(29,185,84,.12);border-color:var(--accent2);color:#8ff0b6}
.flash.error{background:rgba(229,83,75,.12);border-color:var(--danger);color:#ffb3ae}

/* Login */
.login-box{max-width:360px;margin:8vh auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.login-box h1{text-align:center}
form label{display:block;margin:12px 0}
form input,form select{width:100%;padding:9px 10px;margin-top:4px;background:var(--panel2);
  color:var(--text);border:1px solid var(--line);border-radius:8px;font:inherit}
form input[type=checkbox]{width:auto;margin:0 6px 0 0}

/* Kalender */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal-head h1{margin:0;text-align:center}
table.calendar{width:100%;border-collapse:collapse;margin-top:12px;table-layout:fixed}
table.calendar th{color:var(--muted);font-weight:600;padding:6px;text-align:left;font-size:.85rem}
table.calendar td{border:1px solid var(--line);vertical-align:top;height:92px;padding:0;background:var(--panel)}
table.calendar td.empty{background:transparent;border:none}
table.calendar td.today{outline:2px solid var(--accent);outline-offset:-2px}
.day-cell{display:block;height:100%;padding:6px;color:var(--text)}
.day-cell:hover{background:var(--panel2);text-decoration:none}
.daynum{font-weight:600;color:var(--muted)}
.chip{display:inline-block;background:rgba(74,158,255,.18);color:#bcd9ff;border:1px solid #34527a;
  border-radius:6px;padding:1px 6px;margin:3px 3px 0 0;font-size:.78rem;white-space:nowrap}
.chip.big{font-size:.95rem;padding:4px 10px;background:rgba(29,185,84,.15);border-color:#2f7a4d;color:#a5f0c4}

/* Planen in der Monatsansicht */
.cal-presets{margin-top:14px}
.preset-btn.active{background:var(--accent);color:#04101f;border-color:var(--accent);font-weight:600}
.preset-btn.active .muted{color:#04101f}
table.calendar.planning td[data-iso]{cursor:crosshair;touch-action:none;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none}
table.calendar.planning .day-cell{-webkit-user-drag:none}
table.calendar.planning .day-cell:hover{background:rgba(74,158,255,.12)}
table.calendar td.range{background:rgba(74,158,255,.28)}
table.calendar td.range .day-cell:hover{background:transparent}

/* Mehrfachauswahl-Kalender (Bulk) */
.bulk-cal td{height:auto;padding:3px;border:none;background:transparent}
.bulk-cal td.empty{background:transparent}
.bulk-day{width:100%;min-height:46px;background:var(--panel);border:1px solid var(--line);
  color:var(--text);border-radius:7px;cursor:pointer;font:inherit;font-size:1rem;
  font-variant-numeric:tabular-nums}
.bulk-day:hover{border-color:var(--accent);background:var(--panel2)}
.bulk-day.sel{background:var(--accent);color:#04101f;border-color:var(--accent);font-weight:700}
.bulk-day.is-today{outline:2px solid var(--accent2);outline-offset:-2px}
.bulk-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}
.multi-line{margin:12px 0 0}

/* Wochenleiste (Tag-Ansicht) */
.week-bar{display:flex;align-items:stretch;gap:8px;margin:12px 0 18px}
.week-bar .wk-nav{display:flex;align-items:center;font-size:1.3rem;padding:0 14px}
.week-days{display:flex;gap:6px;flex:1;min-width:0}
.week-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--text)}
.week-day:hover{background:var(--panel2);border-color:var(--accent);text-decoration:none}
.week-day.current{outline:2px solid var(--accent);outline-offset:-2px;background:var(--panel2)}
.week-day.is-today .wd-num{color:var(--accent);font-weight:700}
.wd-name{font-size:.75rem;color:var(--muted)}
.wd-num{font-size:.9rem;font-variant-numeric:tabular-nums}
.wd-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);margin-top:1px}

.kbd-hint{margin:-10px 0 14px;font-size:.85rem}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:.85em;color:#cdd8e6}

/* Tag-Ansicht */
.slot-list{list-style:none;padding:0}
.slot-list li{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:6px 0}
.slot-time{font-weight:600;font-variant-numeric:tabular-nums}
.slot-note{color:var(--muted)}
.slot-list form{margin-left:auto}
.presets{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.presets .btn{padding:5px 12px}
.preset-item{display:inline-flex;align-items:center;gap:2px}
.preset-btn .muted{font-size:.82em}
.preset-del-form{display:inline;margin:0}
.preset-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.15rem;padding:0 4px;line-height:1}
.preset-del:hover{color:var(--danger)}
.preset-add-btn{font-weight:700;font-size:1.05rem;padding:4px 12px}
.preset-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:8px 0}
.preset-form label{margin:0}
.add-slot{display:flex;gap:14px;align-items:end;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.add-slot label{margin:0}

/* Karten / Formulare */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:14px 0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.members{border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:10px 0}
.members legend{color:var(--muted);padding:0 6px}
.chk{display:inline-flex;align-items:center;margin:4px 14px 4px 0;white-space:nowrap}
.filter-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin:8px 0}
.filter-row label{margin:0}

/* Ergebnisliste */
.result-head{margin-top:18px}
.result-list{list-style:none;padding:0}
.result-list li{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:6px 0}
.result-day{font-weight:600;min-width:200px;padding-top:4px}
.result-opts{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.slot-opt{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.slot-opt.full .chip.big{background:rgba(29,185,84,.25);border-color:var(--accent2)}
.who{font-size:.92rem}
.who b{color:var(--accent)}
.miss{color:var(--muted)}

/* Tabellen */
table.users{width:100%;border-collapse:collapse;margin-top:10px}
table.users th,table.users td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.users th{color:var(--muted);font-size:.85rem}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row-actions form{display:flex;gap:4px;align-items:center;margin:0}
.row-actions input{margin:0}

/* Planungsstand */
.plan-dot,.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:8px;background:var(--muted);vertical-align:middle}
.legend-dot{width:10px;height:10px;margin:0 4px 0 10px}
.plan-ok .plan-dot,.legend-dot.ok{background:var(--accent2)}
.plan-past .plan-dot,.legend-dot.past{background:var(--accent-orange,#e67e22)}
.plan-none .plan-dot,.legend-dot.none{background:#6b7688}
.planning td{font-variant-numeric:tabular-nums}

/* Passwort-Feld mit Generator-Button */
.pw-wrap{display:flex;gap:6px;align-items:stretch;margin-top:4px}
.pw-wrap input{margin-top:0;font-family:ui-monospace,monospace}
.pw-wrap .btn{padding:6px 10px}

/* Zugangsdaten-Box nach Nutzeranlage */
.cred-box{margin-top:16px;background:rgba(29,185,84,.08);border:1px solid var(--accent2);
  border-radius:var(--radius);padding:16px}
.cred-box h3{margin:0 0 10px;color:#a5f0c4}
.cred-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;margin-bottom:14px}
.cred-grid code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:4px 8px;font-size:.95rem;word-break:break-all}
.cred-actions{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:640px){
  table.calendar td{height:auto;min-height:56px}
  .chip{font-size:.7rem}
  .result-day{min-width:0}
}