/* =====================================================================
   Weinproben-Kalender
   Farben/Größen/Fonts über CSS-Variablen. In Bricks .wd-calendar überschreiben.
   Hinweis: Die Schriften 'Cormorant Garamond' und 'Montserrat' müssen auf der
   Seite verfügbar sein (z. B. Bricks → Custom Fonts, self-hosted/DSGVO-konform).
   Fehlen sie, greifen die Fallbacks (serif / sans-serif).
   ===================================================================== */
.wd-calendar {
	--wd-cal-bg: #ffffff;
	--wd-cal-text: #1a1a1a;
	--wd-cal-muted: #9a9a9a;
	--wd-cal-border: #e6e6e6;
	--wd-cal-accent: #981114;
	--wd-cal-accent-contrast: #ffffff;
	--wd-cal-hover-bg: #f5f5f5;
	--wd-cal-event-bg: #f7f3f3;
	--wd-cal-radius: 8px;
	--wd-cal-gap: 8px;
	--wd-cal-title-font: 'Cormorant Garamond', Georgia, serif;
	--wd-cal-event-font: 'Montserrat', system-ui, sans-serif;

	color: var(--wd-cal-text);
	font-family: inherit;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Kopf mit Navigation */
.wd-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.wd-calendar__title {
	font-family: var(--wd-cal-title-font);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: -1.2px;
	text-align: center;
	flex: 1;
}

/* Runde Pfeil-Buttons, zentriertes weißes Chevron */
.wd-calendar__nav {
	appearance: none;
	border: 0;
	background: var(--wd-cal-accent);
	color: var(--wd-cal-accent-contrast);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: opacity 0.15s ease, transform 0.12s ease;
}
.wd-calendar__nav svg { width: 18px; height: 18px; display: block; }
.wd-calendar__nav:hover:not(:disabled) { transform: scale(1.08); }
.wd-calendar__nav:disabled { opacity: 0.25; cursor: default; }

/* ---- Monatsraster (Desktop/Tablet) ---- */
.wd-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--wd-cal-gap);
}

.wd-calendar__dayname {
	text-align: center;
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wd-cal-muted);
	padding-bottom: 8px;
}

.wd-calendar__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 112px;
	padding: 10px;
	border: 1px solid var(--wd-cal-border);
	border-radius: var(--wd-cal-radius);
	background: var(--wd-cal-bg);
	overflow: hidden;
}
.wd-calendar__cell--empty { border-color: transparent; background: transparent; }

.wd-calendar__num { font-size: 1.05rem; font-weight: 600; line-height: 1; }

a.wd-calendar__cell--event {
	background: var(--wd-cal-event-bg);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: box-shadow 0.12s ease;
}
a.wd-calendar__cell--event .wd-calendar__num { color: var(--wd-cal-accent); }
a.wd-calendar__cell--event:hover { box-shadow: inset 0 0 0 2px var(--wd-cal-accent); }

.wd-calendar__label {
	margin-top: 8px;
	font-family: var(--wd-cal-event-font);
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--wd-cal-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wd-calendar__time {
	margin-top: 4px;
	font-family: var(--wd-cal-event-font);
	font-size: 0.95rem;
	line-height: 1.2;
	color: var(--wd-cal-muted);
}

/* Aktuelles Event (auf der Event-Einzelseite): Akzent-Box, weiße Schrift */
.wd-calendar .wd-calendar__cell--current {
	background: var(--wd-cal-accent);
}
.wd-calendar .wd-calendar__cell--current .wd-calendar__num,
.wd-calendar .wd-calendar__cell--current .wd-calendar__label,
.wd-calendar .wd-calendar__cell--current .wd-calendar__time {
	color: var(--wd-cal-accent-contrast);
}
.wd-calendar .wd-calendar__cell--current:hover { box-shadow: none; }

.wd-calendar__cell--today { box-shadow: inset 0 0 0 2px var(--wd-cal-accent); }

/* ---- Wochenliste (Mobile) ---- */
.wd-calendar__week { display: flex; flex-direction: column; gap: var(--wd-cal-gap); }

.wd-calendar__wday {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--wd-cal-border);
	border-radius: var(--wd-cal-radius);
	background: var(--wd-cal-bg);
	min-height: 58px;
}
.wd-calendar__wday--empty { color: var(--wd-cal-muted); }

.wd-calendar__wday-date {
	flex: 0 0 auto;
	width: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}
.wd-calendar__wday-dow {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wd-cal-muted);
}
.wd-calendar__wday-day { font-size: 1.5rem; font-weight: 700; }

.wd-calendar__wday-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wd-calendar__wday-title {
	font-family: var(--wd-cal-event-font);
	font-size: 1.2rem;
	line-height: 1.3;
}
.wd-calendar__wday-time {
	font-family: var(--wd-cal-event-font);
	font-size: 0.95rem;
	color: var(--wd-cal-muted);
}

a.wd-calendar__wday--event {
	background: var(--wd-cal-event-bg);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
a.wd-calendar__wday--event .wd-calendar__wday-day { color: var(--wd-cal-accent); }

.wd-calendar__wday--today { box-shadow: inset 0 0 0 2px var(--wd-cal-accent); }
.wd-calendar__wday--past { opacity: 0.55; }

.wd-calendar .wd-calendar__wday--current {
	background: var(--wd-cal-accent);
	box-shadow: none;
}
.wd-calendar .wd-calendar__wday--current .wd-calendar__wday-dow,
.wd-calendar .wd-calendar__wday--current .wd-calendar__wday-day,
.wd-calendar .wd-calendar__wday--current .wd-calendar__wday-title,
.wd-calendar .wd-calendar__wday--current .wd-calendar__wday-time {
	color: var(--wd-cal-accent-contrast);
}

/* No-JS-Fallbackliste */
.wd-calendar__list { list-style: none; margin: 0; padding: 0; }
.wd-calendar__list li { margin: 0 0 10px; font-size: 1.05rem; }
.wd-calendar__list a { color: var(--wd-cal-text); }

.wd-calendar--empty p { color: var(--wd-cal-muted); font-style: italic; }

/* ---- Tablet ---- */
@media (max-width: 900px) {
	.wd-calendar__cell { min-height: 92px; }
	.wd-calendar__title { font-size: 2rem; }
	.wd-calendar__label { font-size: 1.05rem; }
}

/* ---- Mobile: Titel/Pfeile etwas kleiner ---- */
@media (max-width: 600px) {
	.wd-calendar__title { font-size: 1.7rem; }
}