:root {
  --primary: #1b3a5c;
  --primary-light: #2f5a86;
  --bg: #f4f6f8;
  --card: #ffffff;
  --border: #dde3ea;
  --text: #1f2933;
  --muted: #667080;
  --wunsch: #2e7d32;
  --kann: #f9a825;
  --danger: #c62828;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
.topbar { background: var(--primary); color: white; padding: 0.8rem 1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.brand { font-weight:600; font-size:1.1rem; }
nav a { color: #dbe6f2; text-decoration:none; margin-right:1rem; font-size:0.95rem; }
nav a:hover { color:white; text-decoration:underline; }
.user { color:#cfe0f0; font-size:0.9rem; margin-left:1rem; }
.content { max-width:1100px; margin:2rem auto; padding: 0 1rem; }
.footer { text-align:center; color: var(--muted); font-size:0.8rem; padding:2rem 1rem; }
h1 { color: var(--primary); }
.card { background: var(--card); border:1px solid var(--border); border-radius:8px; padding:1.2rem 1.5rem; margin-bottom:1.2rem; }
table { width:100%; border-collapse: collapse; margin-top:0.8rem; }
th, td { text-align:left; padding:0.5rem 0.6rem; border-bottom:1px solid var(--border); font-size:0.92rem; }
th { background:#eef2f6; color:var(--primary); }
input, select, textarea, button { font-family:inherit; font-size:0.95rem; padding:0.45rem 0.6rem; border:1px solid var(--border); border-radius:5px; }
button, .btn { background: var(--primary); color:white; border:none; cursor:pointer; padding:0.5rem 1rem; border-radius:5px; }
button:hover, .btn:hover { background: var(--primary-light); }
.btn-secondary { background:#e5eaf0; color:var(--primary); }
.btn-secondary:hover { background:#d5dde6; }
.badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:10px; font-size:0.78rem; }
.badge-offen { background:#fdecea; color: var(--danger); }
.badge-belegt { background:#e6f4ea; color: var(--wunsch); }
.msg-error { background:#fdecea; color:var(--danger); padding:0.7rem 1rem; border-radius:6px; margin-bottom:1rem; }
.msg-ok { background:#e6f4ea; color:var(--wunsch); padding:0.7rem 1rem; border-radius:6px; margin-bottom:1rem; }
.matrix { border-collapse: collapse; }
.matrix th, .matrix td { text-align:center; padding:0.35rem; }
.matrix td.slot { cursor:pointer; user-select:none; border:1px solid var(--border); min-width:60px; }
.slot.wunsch { background: var(--wunsch); color:white; }
.slot.kann { background: var(--kann); color:white; }
.legend span { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:4px; vertical-align:middle; }
.small { font-size:0.85rem; color: var(--muted); }
form.inline { display:inline; }
@media print {
  .topbar, .footer, nav, .no-print { display:none !important; }
}