body { font-family: Arial, sans-serif; margin: 20px; }
main { max-width: 800px; margin: auto; }
label { display:block; margin: 8px 0; }
input[type="text"], input[type="date"], input[type="password"] { padding:6px; width:100%; max-width:320px; }
button { margin-top:8px; padding:8px 12px; }
#bookedList { list-style:none; padding:0; }
table { width:100%; border-collapse: collapse; margin-top:12px; }
th, td { border:1px solid #ddd; padding:8px; text-align:left; }

/* Calendar styles */
.layout { display:flex; gap:20px; align-items:flex-start; }
.calendar-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; max-width:520px; }
.cal-header { display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:8px; }
.cal-cell { background:#f7f7f7; padding:8px; border-radius:6px; text-align:center; }
.cal-weekday { font-weight:700; background:transparent; }
.day { height:72px; display:flex; align-items:flex-start; justify-content:flex-end; padding:6px; border:1px solid transparent; cursor:pointer; }
.day:hover { border-color:#ccc; }
.day .day-num { font-size:14px; font-weight:600; }
.booked { background: linear-gradient(135deg,#ffdede,#ffeedd); border:1px solid #ffbcbc; }
.in-range { background: linear-gradient(135deg,#dfefff,#eef4ff); }
.selected-start { outline:3px solid #2b8cff; }
.selected-end { outline:3px solid #2b8cff; }
.overlap { box-shadow: inset 0 0 0 3px rgba(255,100,100,0.15); }
.empty { background:transparent; border:none; }

aside#book { width:260px; }
.controls { display:flex; gap:8px; margin-top:8px; }
.hint { font-size:12px; color:#666; margin-top:8px; }

@media (max-width:800px){ .layout { flex-direction:column; } .calendar-grid{max-width:100%} aside#book{width:100%} }

/* two-month pair layout */
.calendar-pair{display:flex;gap:12px}
.single-cal.small{flex:1;padding:12px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.legend{display:flex;gap:12px;align-items:center}
.legend-item{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px}
.swatch{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,0.06)}
.swatch.reserved{background:linear-gradient(135deg,#fff7cc,#fff1a8)}
.swatch.booked{background:linear-gradient(135deg,#ffdede,#ffbcbc)}

@media (max-width:900px){ .calendar-pair{flex-direction:column} .single-cal.small{width:100%} }

/* new styles for full two-month calendar like image */
.cal-top{display:flex;align-items:center;justify-content:space-between;padding:10px 6px}
.nav-arrow{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:6px 10px;border-radius:6px}
.legend.center{display:flex;gap:14px;align-items:center}
.single-cal{flex:1}
.cal-orange{background:#f7b733;padding:6px 10px;border-top-left-radius:8px;border-top-right-radius:8px;border:1px solid #d99a18}
.month-title{color:#fff;font-weight:700}
.calendar-grid{padding:10px;background:#fff;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;border-radius:0 0 8px 8px}
.cal-cell{min-height:42px;display:flex;align-items:center;justify-content:center}
.day{height:48px;padding:6px;border-radius:4px;border:1px solid transparent}
.day.muted{color:#9aa4af;background:#fbfbfb}
.day.avail{background:linear-gradient(135deg,#e6ffea,#d6ffd8);border:1px solid #9fe1a3}
.day.booked{background:linear-gradient(135deg,#ffdede,#ffbcbc);border:1px solid #ff9a9a}
.day.in-range{background:linear-gradient(135deg,#fff6d6,#fff1b0);border:1px solid #f0d28d}
.day.selected-start,.day.selected-end{box-shadow:0 0 0 3px rgba(37,99,235,0.15)}
.booking-panel{margin-top:12px;padding:12px}
.row{display:flex;gap:8px}
.center{text-align:center}

/* Global look & feel */
:root{
	--bg:#f4f8fb;
	--card:#ffffff;
	--muted:#6b7280;
	--accent:#2563eb;
	--accent-2:#06b6d4;
	--success:#16a34a;
	--danger:#ef4444;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body{font-family:'Inter',system-ui,Arial,sans-serif;background:var(--bg);color:#0f172a;margin:0;padding:24px}
main{max-width:1100px;margin:24px auto;padding:20px;background:transparent}
.site-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
h1{margin:0;font-size:20px}
.tag{color:var(--muted);font-size:13px}

.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}

/* Buttons and inputs */
button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
button.secondary{background:#eef2ff;color:var(--accent);border:1px solid rgba(37,99,235,0.12)}
button.ghost{background:transparent;color:var(--accent);border:1px solid transparent}
input[type="text"], input[type="date"], input[type="password"]{background:#fff;border:1px solid #e6eef8;border-radius:8px;padding:8px}

/* Message styles */
.msg{padding:8px 10px;border-radius:8px;margin-top:8px;font-size:14px}
.msg.success{background:rgba(16,185,129,0.12);color:var(--success);border:1px solid rgba(16,185,129,0.18)}
.msg.error{background:rgba(239,68,68,0.08);color:var(--danger);border:1px solid rgba(239,68,68,0.12)}

/* Admin table */
table{background:transparent;border-radius:8px;overflow:hidden}
th{background:#f1f5f9;color:#0f172a;text-align:left;padding:10px}
td{background:#fff}
tr td{border-bottom:1px solid #f1f5f9}

footer{margin-top:18px;color:var(--muted);font-size:13px}

/* small screens */
@media (max-width:600px){ .cal-header h2{font-size:16px} .day{height:64px} }

/* Overrides added: better contrast + available legend color + yellow overlap + admin day names */
.legend-item.legend-available{
  color: var(--success);
}
.day.avail .day-num,
.day.booked .day-num{
  color:#000000;
}
.overlap{
  box-shadow: inset 0 0 0 3px rgba(234,179,8,0.6);
}
.day.selected-start .day-num,
.day.selected-end .day-num{
  font-weight:700;
}
.day-names{
  font-size:10px;
  margin-top:2px;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Admin-Kalender kompakter darstellen */
#adminSection .calendar-pair{
  gap:8px;
}
#adminSection .single-cal{
  padding:6px;
}
#adminSection .calendar-grid{
  max-width:420px;
}
#adminSection .day{
  height:40px;
  padding:4px;
}
#adminSection .day .day-num{
  font-size:12px;
}
#adminSection .day-names{
  font-size:9px;
}
.hint-admin{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}