/* General Styles */
body {
    margin: 10;
    padding: 0;
    background-color: #404040;
    font-family: 'Tahoma', sans-serif;
    color: #DDDDDD;
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: center;
    align-items: center;
}

/* Calendar Container */
.calendar {
    display: grid;
    grid-template-columns: 340px repeat(3, 340px);
    gap: 20px;
    padding: 20px;
    width: 100%;
}

/* Month Box */
.month-box {
    width: 326px;
    height: 252px;
    background-color: #222222;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.month-header {
    width: 318px;
    height: 24px;
    background-color: #DDDDDD;
    border-radius: 2px;
    padding: 4px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

/* Week Header */
.week-header {
    display: grid;
    grid-template-columns: 38px repeat(7, 38px);
    text-align: center;
    gap: 2px;
    padding: 4px;
}

.day-header,
.kw-header {
    width: 38px;
    height: 24px;
    background-color: #222222;
    padding: 0px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* Week Row */
.week-header-row,
.week-row {
    width: 38px;
    height: 24px;
    display: grid;
    grid-template-columns: 38px repeat(7, 38px);
    grid-template-rows: 24px repeat(6, 24px);
    gap: 2px;
    padding: 4px;
    background-color: #222222;
    border-radius: 2px;
}

/* KW Cell */
.kw-cell {
    width: 38px;
    height: 24px;
    background-color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Day Box base */
.day-box {
    position: relative;
    overflow: hidden;
}

/* Tageszahl immer sauber darüberlegen */
.day-box .day-number {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 5;
    border-radius: 2px;
    color: #222222;
    font-weight: bold;
    pointer-events: none;
}

/*.day-box {
    width: 38px;
    height: 24px;
    position: relative;
    background-color: #DDDDDD;
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 14px;
    font-weight: bold;
    display: block;
    border-radius: 2px;
    overflow: hidden;
}*/

/* Empty cell */
.day-box.empty {
    background-color: transparent;
    border: none;
}

/* Day number overlay (always visible) */
.day-number {
    position: absolute;
    top: 0px;
    left: 0px;
	color: #222222;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 3;
    pointer-events: none;
}

/* Today marker — farbiger Rahmen */
.day-box.today {
    box-shadow: 0 0 0 2px #ff4d6d inset;
}

/* No events — simple styling */
.day-box.no-events {
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 2px;
	background-color: #DDDDDD;
    color: #222222;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

/* Single event — full background */
.day-box.single-event {
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 2px;
	background-color: #DDDDDD;
    color: #222222;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

/* Multi-event styles */

/* 2 Events: vertical split */
.day-box.multi-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 38px;
    height: 24px;
}
.day-box.multi-2 .seg {
    width: 100%;
    height: 100%;
	border-radius: 2px;
    display: block;
}
.day-box.multi-2 .day-number {
    top: -2px;
	color: #222222;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

/* 3 Events: three vertical columns */
.day-box.multi-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 38px;
    height: 24px;
}
.day-box.multi-3 .seg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 4 Events: 2x2 grid */
.day-box.multi-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 38px;
    height: 24px;
}
.day-box.multi-4 .seg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ensure day number is readable on dark/light backgrounds */
.day-box .day-number {
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* Lists and legend (existing) */
.lists {
    position: relative;
    display: grid;
    grid-template-columns: 340px repeat(3, 340px);
    gap: 20px;
    padding: 0px;
    width: 100%;
}

.list-box-short {
    width: 326px;
    height: 252px;
    background-color: #222222;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.list-box-long {
    width: 326px;
    height: 524px;
    background-color: #222222;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.list-header {
    width: 318px;
    height: 24px;
    background-color: #DDDDDD;
    border-radius: 2px;
    padding: 4px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #222222;
}

/* Calendar Legende */
.legende {
    display: grid;
    grid-template-columns: 38px 122px repeat(1, 38px 122px);
    grid-template-rows: 24px repeat(8, 24px);
    gap: 2px;
    padding: 0px;
    background-color: #222222;
    border-radius: 2px;
}

/* Legende Cell */
.legende-cell {
    background-color: #222222;
    color: #DDDDDD;
    text-align: center;
    padding: 0px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 2px;
}

.legende-color {
    background-color: #222222;
    border-radius: 2px;
}

/* Frisörtermine */
.Frisoertermine {
    display: grid;
    grid-template-columns: 160px repeat(1, 160px);
    grid-template-rows: 24px repeat(7, 24px);
    gap: 2px;
    padding: 2px;
    background-color: #222222;
    border-radius: 2px;
}

.Liste-Frisoer {
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

/* Urlaubsübersicht */
.Urlaubsübersicht {
    display: grid;
    grid-template-columns: 160px repeat(1, 160px);
    grid-template-rows: 24px repeat(16, 24px);
    gap: 2px;
    padding: 2px;
    background-color: #222222;
    border-radius: 2px;
}

.Liste-Urlaub {
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.Liste-Urlaub-Footer {
    position: relative;
    bottom: -20px;
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

/* Gleittageübersicht */
.Gleittageübersicht {
    display: grid;
    grid-template-columns: 106px repeat(2, 106px);
    grid-template-rows: 24px repeat(6, 24px);
    gap: 2px;
    padding: 2px;
    background-color: #222222;
    border-radius: 2px;
}

.Liste-Gleittage {
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

/* Bereitschaftübersicht */
.Bereitschaftübersicht {
    display: grid;
    grid-template-columns: 106px repeat(2, 106px);
    grid-template-rows: 24px repeat(3, 24px);
    gap: 2px;
    padding: 2px;
    background-color: #222222;
    border-radius: 2px;
}

.Liste-Bereitschaft {
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

/* Feiertagsübersicht */
.Feiertagsübersicht {
    display: grid;
    grid-template-columns: 322px;
    gap: 2px;
    padding: 2px;
    background-color: #222222;
    border-radius: 2px;
}

.Liste-Feiertage {
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.cacheControl {
    width: 326px;
    height: 24px;
    background-color: #DDDDDD;
    color: #222222;
    text-align: center;
    padding: 0px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}