body{
	margin-bottom: 50px;
}
.hidden{
	display: none!important;
}

.login button{
	background-color: #8E9B4A!important;
	border: none!important;
}

.login{
	max-width: 650px;
  width: 90vw;
	margin: 0 auto;
	margin-top: 5vh;
	text-align: left;
}

.login span{
  font-size: 12px;
  color: gray;
}

table{
	margin-top: 15px;
}

td.available, .btn-available{
	background-color: lightgreen!important;
	cursor: pointer;
}
td.available:hover{
	background-color: #8E9B4A!important;
}
td.booked, .btn-booked{
	background-color: #F44336!important; /*red*/
}
td.abgeholt, .btn-abgeholt{
	background-color: #2196F3!important;
	color: white;
	font-weight: bold;
}
td.zurueckgebracht, .btn-zurueckgebracht{
	background-color: #FF9800!important;
	color: white;
	font-weight: bold;
}
td.barzahlung-ausstehend{
	border: 3px dotted black;	
}
td.booked{
	padding: 0;
  font-size: 10px;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
table .block{
	border-right: 1px solid gray;
}
p.success{
	text-align: center;
}


.legende{
	text-align: center;
}
.legende span{
	padding: 5px;
	color: white;
	font-weight: bold;
}
.legende .barzahlung-ausstehend{
	border: 3px dotted black;
	color: black;
}


header {
  position: sticky;
  top: 0;
  z-index: 999;
  height: 25px;
  padding: 0 10px 0 10px;
  
}
header button:hover{
	background-color: #8E9B4A!important;
}


p.error{
	color: red;
}
#reservieren small{
	font-size: 10px;
}


@media only screen and (max-width: 800px) {
	td:first-child, tr:first-child{
		font-size: 10px;
	}
}



















body {
  background: #f5f5f7;
}

.calendar-wrapper {
  max-width: 950px;
  margin: auto;
  background: white;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}

.calendar-header {
  padding: 20px 30px;
  border-bottom: 1px solid #e5e5ea;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* === GRID === */
.calendar-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  position: relative;
  height: 900px;
}

.time-column {
  border-right: 1px solid #e5e5ea;
}

.time-slot {
  height: 64px;
  font-size: 13px;
  color: #6c757d;
  padding-top: 4px;
  text-align: right;
  padding-right: 10px;
}

.day-column {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    #f2f2f7,
    #f2f2f7 1px,
    transparent 1px,
    transparent 64px
  );
}

/* === EVENTS === */
.event {
  position: absolute;
  left: 20px;
  right: 20px;
  border-radius: 12px;
  padding: 10px 14px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  cursor: pointer;
}

.free    { background: linear-gradient(135deg, #34c759, #30d158); }
.medium  { background: linear-gradient(135deg, #ffd60a, #ff9f0a); }
.high    { background: linear-gradient(135deg, #ff453a, #ff3b30); }
.full    { background: linear-gradient(135deg, #1c1c1e, #000); }

.event small {
  display: block;
  font-weight: 400;
  opacity: 0.9;
}

/* Positionen */
.e-9  { top: 0px; }
.e-10 { top: 64px; }
.e-11 { top: 128px; }
.e-12 { top: 192px; }
.e-13 { top: 256px; }
.e-14 { top: 320px; }
.e-15 { top: 384px; }
.e-16 { top: 448px; }
.e-17 { top: 512px; }
.e-18 { top: 576px; }
.e-19 { top: 640px; }
.e-20 { top: 704px; }
.e-21 { top: 768px; }
.e-22 { top: 832px; }

.h-1 { height: 64px; }
.h-2 { height: 128px; }
.h-3 { height: 192px; }
.h-4 { height: 256px; }
.h-5 { height: 320px; }
.h-6 { height: 384px; }
.h-7 { height: 448px; }
.h-8 { height: 512px; }
.h-9 { height: 576px; }
.h-10 { height: 640px; }
.h-11 { height: 704px; }
.h-12 { height: 768px; }
.h-13 { height: 832px; }
.h-14 { height: 896px; }







.login-wrapper {
  max-width: 400px;
  margin: 120px auto;
  background: white;
  border-radius: 18px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.login-wrapper h4 {
  margin-bottom: 30px;
  text-align: center;
}

.btn-login {
  width: 100%;
}