body{font-family:system-ui,Arial,sans-serif;max-width:1100px;margin:28px auto;padding:0 14px;}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
nav a{margin-left:10px}
h1{margin:0}
a{text-decoration:none}
.card{border:1px solid #ddd;border-radius:14px;padding:16px;margin:14px 0;box-shadow:0 1px 0 rgba(0,0,0,.03);}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > div{flex:1 1 240px}
label{display:block;font-size:.92rem;margin:10px 0 4px}
input,select,textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:12px;box-sizing:border-box}
button{padding:10px 14px;border-radius:12px;border:1px solid #111;background:#111;color:#fff;cursor:pointer;width:auto}
button.secondary{background:#fff;color:#111}
small{color:#666}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.85rem;border:1px solid #ddd}
.badge.pending{background:#fff7e6}
.badge.approved{background:#e9ffe9}
.badge.rejected{background:#ffe9e9}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #eee;vertical-align:top}

/* Kalender */
.kal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.kal .d{border:1px solid #eee;border-radius:12px;padding:8px;min-height:74px;cursor:pointer}
.kal .d.muted{opacity:.4}
.kal .d .n{font-weight:600}
.kal .d .hint{margin-top:6px;font-size:.8rem;color:#555}
.kal .d.busy{border-color:#d97706}
.kal .d.blackout{background:#ffe9e9;border-color:#e3a0a0}

.notice{padding:10px 12px;border-radius:12px;border:1px solid #eee;background:#fafafa}
.pill{display:inline-flex;gap:8px;align-items:center;border:1px solid #ddd;border-radius:999px;padding:6px 10px}

/* ✅ Mobile */
@media (max-width: 640px){
  body{margin:14px auto;padding:0 10px;}
  .card{padding:12px;border-radius:12px}
  nav a{margin-left:0;margin-right:10px}
  .row{gap:10px}
  .row > div{flex:1 1 100%}          /* Formular stapelt sauber */
  button{width:100%}                 /* Button wird thumb-friendly */
  input,select,textarea{padding:12px} /* etwas größer fürs Tippen */
  .kal .d{min-height:56px;padding:6px} /* Kalenderzellen kompakter */
}

/* Auffällige Raumauswahl im Formular */
.room-choice-box{
  border:2px solid #c62828;
  background:#fff5f5;
  border-radius:14px;
  padding:12px;
}
.room-choice-alert{
  display:inline-block;
  margin-bottom:8px;
  padding:7px 12px;
  border-radius:999px;
  background:#c62828;
  color:#fff;
  font-weight:800;
}
.room-select-required{
  border:2px solid #c62828 !important;
}