body {
    font-family: Arial, sans-serif;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    max-width: 600px;
    margin: 20px auto;
}
.day {
    padding: 10px;
    border: 1px solid #ccc;
	border-radius: 10%;
    text-align: center;
    position: relative;
	background-color: #228B22;
    color: black;
}
.occupied {
    background-color: #f44336;
    color: white;
}
.half-left {
    background: linear-gradient(to top right, #f44336 50%, #228B22 50%);
}
.half-right {
    background: linear-gradient(to bottom left, #f44336 50%, #228B22 50%);
}
.day.past {
    background-color: #e0e0e0;
    color: #888;
    pointer-events: none; /* Keine Interaktion möglich */
}

.navigation {
    text-align: center;
    margin-bottom: 20px;
}
.navigation a {
    margin: 0 10px;
    text-decoration: none;
    color: #007BFF;
}
.navigation a:hover {
    text-decoration: underline;
}
.navigation .disabled {
    pointer-events: none;
    color: grey;
    text-decoration: none;
}

.month {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 10px;
}
.dev-mode {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    font-family: monospace;
    white-space: pre-wrap;
}