/* VERANSTALTUNGSKALENDER — .db-calendar   (kontakt = 1)
   The Kontakt frame's right-hand panel (368:3235) is a Google Calendar month
   view, 545 tall on desktop, sitting on white with a hairline. The embed itself
   brings its own chrome, so this file only sizes and frames it — and styles the
   placeholder that stands in until the visitor loads it (inc/calendar.php). */
.db-calendar {
	position: relative;
	/* border-box: the frame's 545 is the outside of the panel, hairline included.
	   Sizing the child instead made the panel 547 and pushed the page 2px. */
	box-sizing: border-box;
	width: 100%;
	min-height: 240px;
	background: var(--white);
	border: 1px solid var(--line);
}

.db-calendar__frame { display: block; width: 100%; height: 100%; min-height: 240px; border: 0; }

/* The stand-in. Deliberately quiet: it explains what the panel is and what
   loading it costs, rather than looking like a failed embed. */
.db-calendar__placeholder {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	height: 100%;
	min-height: 240px;
	padding: 32px;
}
.db-calendar__title { font-family: var(--font-display); text-transform: uppercase; font-size: 18px; line-height: 28px; color: var(--ink); }
.db-calendar__note  { font-weight: 300; font-size: 14px; line-height: 22px; color: var(--muted); max-width: 42ch; }

/* Hidden until calendar-embed.js runs, so it is never a control that does
   nothing — the same contract as .db-rail-nav and .db-gallery__more. */
.db-calendar__load { display: none; }
.db-calendar.is-ready .db-calendar__load { display: inline-flex; }

.db-calendar--unset { display: flex; align-items: center; padding: 32px; }

@media (min-width: 861px) {
	.db-calendar { height: 545px; min-height: 0; }
	.db-calendar__frame,
	.db-calendar__placeholder { height: 100%; min-height: 0; }
}