:root {
  --time-col-w: 50px;
  --header-h: 44px;
  --slot-h: 18px;
  --rows: 48;  
}

/* Legende */
#calendar-legend {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px;}
.legend-item {padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;}

/* Zeitleiste links */
.calendar .timecol{background:var(--smoke-color);border:1px solid #fff; border-top:none;}
.calendar .timecell{height:var(--slot-h);display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:12px;color:#6b7280}

.calendar-wrapper {width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
.calendar { background-color:var(--smoke-color); display: grid; grid-template-columns: var(--time-col-w) repeat(5,1fr); overflow: hidden; min-width:900px;}
.calendar .head {height: var(--header-h); display: grid; place-items: center; font-weight: 600; border: 1px solid #fff; }
.calendar .day {border: 1px solid #fff; border-top: none; position: relative; }
.calendar .day-body {position: relative; height: calc(var(--rows) * var(--slot-h)); margin: 5px 0;}
.calendar .event {background-color:var(--white-color); border: 1px solid #ccc; text-align:center; position: absolute; left: 6px; right: 6px; border-radius: 25px; padding: 4px 8px; font-size: 12px; line-height: 1.25; display: flex; flex-direction: column; gap: 2px;  justify-content: center;}
.calendar .event .time, .calendar .event .course, .calendar .event .trainer { font-size: 11px; }
.calendar .event .cancel-message {position:absolute; right:-3px; top:-3px; color:#fff; background-color:#d9534f; padding:3px 5px; border-radius: 10px; font-size:11px}

.calendar .event.clickable:hover {background-color:#efefef; cursor: pointer;}