/* Farbfestlegung für Kalender - Variablen können leicht angepasst werden */
:root {
	--ipc-plot: #B4D5F9;
	--ipc-event: #B7E5D5;
	--ipc-geburtstag: #E0E7B5;
	--ipc-szene: #CFC5F6;
	--ipc-allgemein: #EDC4BC;
}

/* GRID für Ansicht des Kalenders */
.months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 70px;
	margin: 0 200px;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.header,
.day {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.header {
    font-weight: bold;
    background: #eee;
}

.empty {
    background: #f9f9f9;
}

/* Klassen für Einfärbung  */
/* einzelnes Event */
.plots {
	background: var(--ipc-plot);
}

.events {
	background: var(--ipc-event);
}

.birthday {
	background: var(--ipc-geburtstag);
}

.scene {
	background: var(--ipc-szene);
}

.allgemein {
	background: var(--ipc-allgemein);
}

/* Alle Plot-Varianten */
.plotsevents {
	background: linear-gradient(to left top, var(--ipc-event) 50%, var(--ipc-plot) 50%);
}

.plotsbirthday {
	background: linear-gradient(to left top, var(--ipc-geburtstag) 50%, var(--ipc-plot) 50%);
}

.plotsscene {
	background: linear-gradient(to left top, var(--ipc-szene) 50%, var(--ipc-plot) 50%);
}

.plotsallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 50%, var(--ipc-plot) 50%);
}

.plotseventsbirthday {
	background: linear-gradient(to left top, var(--ipc-geburtstag) 33%, var(--ipc-event) 33%, var(--ipc-event) 66%, var(--ipc-plot) 66%);
}

.plotseventsscene {
	background: linear-gradient(to left top, var(--ipc-szene) 33%, var(--ipc-event) 33%, var(--ipc-event) 66%, var(--ipc-plot) 66%);
}

.plotseventsallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 33%, var(--ipc-event) 33%, var(--ipc-event) 66%, var(--ipc-plot) 66%);
}

.plotsbirthdayscene {
	background: linear-gradient(to left top, var(--ipc-szene) 33%, var(--ipc-geburtstag) 33%, var(--ipc-geburtstag) 66%, var(--ipc-plot) 66%);
}

.plotsbirthdayallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 33%, var(--ipc-geburtstag) 33%, var(--ipc-geburtstag) 66%, var(--ipc-plot) 66%);
}

.plotssceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 33%, var(--ipc-szene) 33%, var(--ipc-szene) 66%, var(--ipc-plot) 66%);
}

.plotseventsbirthdayscene {
	background: linear-gradient(to left top, var(--ipc-szene) 25%, var(--ipc-geburtstag) 25%, var(--ipc-geburtstag) 50%, var(--ipc-event) 50%, var(--ipc-event) 75%, var(--ipc-plot) 75%);
}

.plotseventsbirthdayallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 25%, var(--ipc-geburtstag) 25%, var(--ipc-geburtstag) 50%, var(--ipc-event) 50%, var(--ipc-event) 75%, var(--ipc-plot) 75%);
}

.plotsbirthdaysceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 25%, var(--ipc-szene) 25%, var(--ipc-szene) 50%, var(--ipc-geburtstag) 50%, var(--ipc-geburtstag) 75%, var(--ipc-plot) 75%);
}

.plotseventsbirthdaysceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 20%, var(--ipc-szene) 20%, var(--ipc-szene) 40%, var(--ipc-geburtstag) 40%, var(--ipc-geburtstag) 60%, var(--ipc-event) 60%, var(--ipc-event) 80%, var(--ipc-plot) 80%);
}

/* Alle Event-Varianten */
.eventsbirthday {
	background: linear-gradient(to left top, var(--ipc-geburtstag) 50%, var(--ipc-event) 50%);
}

.eventsscene {
	background: linear-gradient(to left top, var(--ipc-szene) 50%, var(--ipc-event) 50%);
}

.eventsallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 50%, var(--ipc-event) 50%);
}

.eventsbirthdayscene {
	background: linear-gradient(to left top, var(--ipc-szene) 33%, var(--ipc-geburtstag) 33%, var(--ipc-geburtstag) 66%, var(--ipc-event) 66%);
}

.eventsbirthdayallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 33%, var(--ipc-geburtstag) 33%, var(--ipc-geburtstag) 66%, var(--ipc-event) 66%);
}

.eventssceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 33%, var(--ipc-szene) 33%, var(--ipc-szene) 66%, var(--ipc-event) 66%);
}

.eventsbirthdaysceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 25%, var(--ipc-szene) 25%, var(--ipc-szene) 50%, var(--ipc-geburtstag) 50%, var(--ipc-geburtstag) 75%, var(--ipc-event) 75%);
}

/* Alle Birthday-Varianten */
.birthdayscene {
	background: linear-gradient(to left top, var(--ipc-szene) 50%, var(--ipc-geburtstag) 50%);
}

.birthdayallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 50%, var(--ipc-geburtstag) 50%);
}

.birthdaysceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 33%, var(--ipc-szene) 33%, var(--ipc-szene) 66%, var(--ipc-geburtstag) 66%);
}

/* Alle Scene-Varianten */
.sceneallgemein {
	background: linear-gradient(to left top, var(--ipc-allgemein) 50%, var(--ipc-szene) 50%);
}