/* Public page /events: tab bar, the list of events and webinars grouped by month, webinar card extras.
   The card itself (.event-card, .event-badge, …) still lives in Messe.css. */

/* The tabs hide what they do not show with the hidden attribute; the card classes set their own
   display and would override it. */
.rd-messe-content [hidden] {
	display: none;
}

.rd-events-tabs {
	display: flex;
	justify-content: center;
	gap: var(--rd-spacing-xx-sm);
	width: fit-content;
	margin: var(--rd-spacing-x-lg) auto;
	padding: var(--rd-spacing-xx-sm);
	border: 1px solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-pill);
	background: var(--rd-font-light);
	box-shadow: var(--rd-shadow-level-2);
	/* Links to a tab jump here (#termine); keep the fixed header from covering it. */
	scroll-margin-top: 120px;
	/* Every <section> is white and position: relative (style20200508.css), so the one below would
	   paint over the bottom of the shadow. */
	position: relative;
	z-index: 1;
}

.rd-events-tab {
	padding: 10px var(--rd-spacing-x-big);
	border-radius: var(--rd-borderradius-pill);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-5);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Bootstrap underlines a:hover and a:focus, and a clicked tab keeps the focus (no reload). */
.rd-events-tab:hover,
.rd-events-tab:focus {
	text-decoration: none;
}

.rd-events-tab:hover {
	background: var(--rd-red-100);
	color: var(--rd-red-900);
}

.rd-events-tab.rd-selected {
	background: var(--rd-primary-active);
	color: var(--rd-font-light);
}

.rd-events-month-group {
	display: flex;
	flex-direction: column;
	gap: var(--rd-spacing-big);
}

/* A gap, not a margin on the month, so a hidden first month leaves no space above the next. */
.rd-events-list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--rd-spacing-big) + var(--rd-spacing-md));
}

/* "November 2026", "Dezember 2026" … above the entries of each month; left-aligned,
   the page around it centres its text. The group gap separates it from the card below. */
.rd-events-month {
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-4);
	font-weight: 600;
	text-align: left;
}

.rd-events-empty {
	text-align: center;
}

/* Every card uses the layout of the former first ("active") card: content left, button right. */
.rd-events-card .event-card-content-active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-spacing-x-big);
	width: 100%;
}

.rd-events-card .event-card-content-btn {
	flex-shrink: 0;
}

/* The image never makes a card taller than one with a one-line title (160px: 2 × 24px padding,
   2 × 1px border, 110px content, minus the 8px padding of the image box). object-fit: contain
   (Messe.css) scales a tall image down instead of cropping or stretching it. */
.rd-events-card .event-card-image img {
	max-height: 94px;
	border-radius: var(--rd-borderradius-border-big);
}

.rd-events-online {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
}

.rd-events-online::before {
	width: 16px;
	height: 16px;
	background-color: var(--rd-gray-500);
}

@media (max-width: 768px) {
	.rd-events-tabs {
		width: auto;
		margin-left: var(--rd-spacing-md);
		margin-right: var(--rd-spacing-md);
	}

	.rd-events-tab {
		flex: 1;
		padding: 10px var(--rd-spacing-x-sm);
		font-size: var(--rd-fontsize-4);
		text-align: center;
		white-space: normal;
	}

	.rd-events-card .event-card-content-active {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* The section centres the block in a flex row, so without a width it shrinks to its text: a short
   text narrowed the 30% button column (Messe.css) until "Newsletter abonnieren" wrapped. */
.rd-messe-seite .rd-newsletter-area {
	width: 100%;
	max-width: 750px;
}

/* Contact, then newsletter: the shared rules space them for other pages (kontakt.css 120px below
   the contact box, Messe.css 128px !important above the newsletter); here the sections' own
   padding is enough. */
.rd-messe-seite .kontakt-down-box {
	margin-bottom: 0;
}

.rd-messe-seite .rd-messe-referenten {
	margin-top: 0 !important;
}

/* Handwritten line above the contact heading, like "Pflegecampus live" above the hero title. */
.rd-events-contact-eyebrow {
	margin-bottom: var(--rd-spacing-x-sm);
	color: var(--rd-primary-active);
	font-family: Caveat;
	font-size: var(--rd-fontsize-11);
}

/* No starfish under the contact section on /events (danke.css adds it to every .kontakt-down-box;
   the thank-you page keeps it). */
.rd-messe-seite .kontakt-down-box::after {
	content: none;
}