/* Der Kalender von Events Manager nimmt eigene CSS-Variablen entgegen —
   die setzen wir, statt seine Selektoren zu überschreiben. */

.pe-calendar .em.em-calendar {
	--calendar-background:    transparent;
	--header-background:      transparent;
	--header-color:           var(--color-primary);
	--header-border:          var(--border-soft);
	--nav-background:         transparent;
	--nav-color:              var(--color-cream);
	--nav-border:             var(--border-soft);
	--date-background:        transparent;
	--date-color:             var(--color-cream);
	--date-border:            var(--border-soft);
	--date-border-color:      rgba(168, 187, 212, 0.22);
	--date-box-border:        var(--border-soft);
	--date-today-background:  var(--color-blue);
	--date-today-color:       var(--color-white);
	--date-today-border:      1px solid var(--color-primary);
	--date-more-color:        var(--color-primary);
	--event-background-color: var(--color-blue);
	--event-color:            var(--color-white);
	--event-border-color:     var(--color-primary);
	--counter-background:     var(--color-primary);
}

.pe-calendar__months {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xl);
}

.pe-calendar__note,
.pe-calendar__notice {
	margin-top: var(--space-lg);
	font-size: var(--text-small);
	color: var(--color-cream-dim);
}

@media (max-width: 900px) {
	.pe-calendar__months { grid-template-columns: 1fr; }
}

/* Zeitfenster-Übersicht über dem Kalender. */

.pe-slots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin-bottom: var(--space-2xl);
}

.pe-slots__group {
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	box-shadow: var(--border-accent);
	text-align: center;
}

.pe-slots__days {
	display: block;
	font-family: var(--font-headline);
	font-size: var(--text-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.pe-slots__times {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: var(--color-cream-dim);
}

/* Der Monatsname trägt die Klasse „input", ist aber ein div. Ohne diese
   Regel bleibt er in der Standardfarbe des Plugins und steht damit dunkel
   auf dunklem Grund. */

.pe-calendar .em.em-calendar .em-cal-nav .month,
.pe-calendar .em.em-calendar .em-cal-nav .month.input {
	background: transparent;
	color: var(--color-primary);
	font-family: var(--font-headline);
	letter-spacing: 0.04em;
}

.pe-calendar .em.em-calendar .em-cal-nav .em-calnav svg { fill: var(--color-cream); }

/* ── Belegung ─────────────────────────────────────────────
   Ein Punkt je Zeitfenster (calendar_event_style="dots"), eingefärbt vom
   Filter em_calendar_dot_color. Die Zustandsklassen setzt
   inc/kalender-anzeige.php ins fertige Markup. */

/* Die Punkte des Plugins sind 5 px klein und damit im Monatsraster kaum zu
   sehen. --dot-size ist dafür vorgesehen. */
.pe-calendar .em.em-calendar { --dot-size: 8px; }

.pe-calendar .em.em-calendar .em-cal-day-dots { gap: 4px; }

/* Ausgebuchte Zeitfenster als hohler Ring — sie sollen sich nicht nur in
   der Farbe unterscheiden, sonst geht der Unterschied bei Farbenblindheit
   und auf kleinen Bildschirmen verloren. */
.pe-calendar .em.em-calendar .em-cal-dot.pe-dot--voll {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--color-voll);
}

/* Der Kreis um die Tageszahl bekommt nur dann Farbe, wenn es etwas zu
   melden gibt. Freie Tage behalten den neutralen Ring — sonst wäre das
   halbe Raster grün und die knappen Tage gingen darin unter.

   Als outline: Das Plugin setzt auf jedem Link im Kalender
   `box-shadow: none !important` und die Randfarbe über eine Selektorkette
   gleicher Spezifität (.em.pixelbones a, events-manager.css:479-483).
   Beide Wege sind damit dicht — outline nicht. */
.pe-calendar .em.em-calendar .em-cal-day-date.pe-tag--knapp a,
.pe-calendar .em.em-calendar .em-cal-day-date.pe-tag--voll a {
	outline-style: solid;
	outline-width: 2px;
	outline-offset: -2px;
}

.pe-calendar .em.em-calendar .em-cal-day-date.pe-tag--knapp a { outline-color: var(--color-knapp); }
.pe-calendar .em.em-calendar .em-cal-day-date.pe-tag--voll a  { outline-color: var(--color-voll); }

/* Ausgebuchter Tag: Zahl zurückgenommen und durchgestrichen. */
.pe-calendar .em.em-calendar .em-cal-day-date.pe-tag--voll {
	opacity: 0.75;
}

.pe-calendar .em.em-calendar .em-cal-day-date.pe-tag--voll a {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Legende */

.pe-calendar__legende {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md) var(--space-lg);
	margin-top: var(--space-lg);
	font-size: var(--text-small);
	color: var(--color-cream-dim);
}

.pe-calendar__legende li {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.pe-calendar__punkt {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pe-calendar__punkt--frei  { background: var(--color-frei); }
.pe-calendar__punkt--knapp { background: var(--color-knapp); }

.pe-calendar__punkt--voll {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--color-voll);
}

/* ── Tages-Popup ──────────────────────────────────────────
   Ein Eintrag je Zeitfenster mit Bestand, damit sich niemand erst durch
   die Einzeltermine klicken muss. Markup:
   plugins/events-manager/formats/calendar_preview_modal_date_format.php */

.pe-popup-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	border-bottom: var(--border-soft);
}

.pe-popup-item:last-child { border-bottom: 0; }

.pe-popup-item .em-item-name { font-weight: var(--weight-semibold); }

.pe-popup-item .em-item-meta-line {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-small);
}

.pe-popup-item__aktion { flex-shrink: 0; }

.pe-popup-item--voll .em-item-name { opacity: 0.7; }

.pe-popup-item__voll {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	font-family: var(--font-headline);
	font-size: var(--text-small);
	letter-spacing: 0.04em;
	color: var(--color-cream-dim);
	box-shadow: inset 0 0 0 1px var(--color-voll);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.pe-popup-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}
}

/* ── Tage der Nachbarmonate ───────────────────────────────
   Der Kalender füllt die erste und letzte Woche mit Tagen des Vor- und
   Folgemonats auf. Weil beide Saisonmonate nebeneinander stehen, tauchen
   diese Tage doppelt auf — einmal als Füller, einmal im eigenen Monat.
   Mit Terminpunkten wirkt das wie zwei verschiedene Angebote.
   Die Zelle bleibt fürs Raster stehen, ihr Inhalt verschwindet. */

.pe-calendar .em.em-calendar .em-cal-day.eventful-pre > *,
.pe-calendar .em.em-calendar .em-cal-day.eventful-post > *,
.pe-calendar .em.em-calendar .em-cal-day.eventless-pre > *,
.pe-calendar .em.em-calendar .em-cal-day.eventless-post > * {
	visibility: hidden;
}