/*
 * Pro Care 2027 landing page (messe-procare-2027.php), Figma "Messen und Events 2026" 5098:3074.
 * The page body is a uui-scope region under the .uui-legacy theme; colours are the nearest
 * --uui-* variables to the Figma values. Overrides of uui-button / uui-avatar need more
 * specificity than the generated rules because uui.min.css loads after this file.
 */

.rd-messe-procare-2027 {
	--rd-messe-procare-2027-radius: 20px;
	--rd-messe-procare-2027-accent: var(--uui-color-brand-400);
	color: var(--uui-text-primary);
	font-family: var(--uui-font-family), sans-serif;
	background: var(--uui-bg-primary);
}

/* The ticket form styles itself (PcuFreeTicketForm.css). */
.rd-messe-procare-2027 :is(h1, h2, h3, p, ul):not(pcu-free-ticket-form *) {
	margin: 0;
	padding: 0;
	color: inherit;
}

.rd-messe-procare-2027 ul:not(pcu-free-ticket-form *) {
	list-style: none;
}

/* Hero — Figma Hero-desktop-1440 / -1920 (5330:2033, 5344:2652) and Hero-mobil (5308:2588); the video stays as background */

.rd-messe-procare-2027__hero {
	--rd-messe-procare-2027-hero-shade: var(--uui-color-gray-700);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 600px;
	box-sizing: border-box;
	padding: var(--uui-spacing-20) var(--uui-spacing-16) var(--uui-spacing-10);
	overflow: hidden;
	color: var(--uui-text-white);
}

/* Figma: the shade is solid up to the middle and fades out towards the right edge. */
.rd-messe-procare-2027__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--rd-messe-procare-2027-hero-shade) 50%, transparent 100%);
}

.rd-messe-procare-2027__hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rd-messe-procare-2027__hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--uui-spacing-10);
	width: 100%;
	max-width: 1140px;
	text-align: left;
}

.rd-messe-procare-2027__hero-text {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-10);
}

.rd-messe-procare-2027__hero-heading {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-2);
}

.rd-messe-procare-2027 .rd-messe-procare-2027__hero-kicker {
	font-family: Caveat, cursive;
	font-size: 42px;
	font-weight: var(--uui-font-weight-bold);
	line-height: 55px;
	letter-spacing: 0.42px;
	color: var(--uui-color-brand-400);
}

.rd-messe-procare-2027 .rd-messe-procare-2027__hero-title {
	font-size: 45px;
	font-weight: var(--uui-font-weight-bold);
	line-height: 59px;
	letter-spacing: 0.45px;
	text-align: left;
	color: var(--uui-text-white);
}

.rd-messe-procare-2027 .rd-messe-procare-2027__hero-facts {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-4);
}

.rd-messe-procare-2027__hero-facts li {
	display: flex;
	align-items: center;
	gap: var(--uui-spacing-2);
	font-size: 18px;
	font-weight: var(--uui-font-weight-semibold);
	line-height: 24px;
	letter-spacing: 0.18px;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__icon--hero {
	--uui-icon-size: 24px;
	color: var(--uui-fg-white);
}

.rd-messe-procare-2027__hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uui-spacing-6);
}

/* Figma's pill buttons (height 40, padding 0 24, 16/21 semibold) */

.rd-messe-procare-2027 uui-button.rd-messe-procare-2027__cta[size][hierarchy][state][icon-only][interaction-mode] > .uui-button__control {
	min-height: 40px;
	padding: 0 var(--uui-spacing-6);
	border-radius: var(--uui-radius-full);
	--uui-stroke-radius: var(--uui-radius-full);
}

.rd-messe-procare-2027 uui-button.rd-messe-procare-2027__cta[size][hierarchy][state][icon-only][interaction-mode] .uui-button__label {
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.16px;
}

/* UUI has no outline button for dark surfaces; Figma's white outline pill is drawn on hierarchy="secondary". */
.rd-messe-procare-2027 uui-button.rd-messe-procare-2027__cta--outline[size][hierarchy][state][icon-only][interaction-mode] > .uui-button__control {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--uui-fg-white);
	--uui-stroke-width: 0px;
}

.rd-messe-procare-2027 uui-button.rd-messe-procare-2027__cta--outline[size][hierarchy][state][icon-only][interaction-mode][data-uui-interaction-state="hover"] > .uui-button__control {
	background: color-mix(in srgb, var(--uui-fg-white) 12%, transparent);
}

.rd-messe-procare-2027 uui-button.rd-messe-procare-2027__cta--outline[size][hierarchy][state][icon-only][interaction-mode] .uui-button__label {
	color: var(--uui-text-white);
}

/* Main column */

.rd-messe-procare-2027__main {
	display: flex;
	flex-direction: column;
	gap: calc(var(--uui-spacing-20) + var(--uui-spacing-10));
	max-width: 1312px;
	margin: 0 auto;
	padding: var(--uui-spacing-20) var(--uui-spacing-16) calc(var(--uui-spacing-20) + var(--uui-spacing-10));
	box-sizing: content-box;
}

.rd-messe-procare-2027__intro,
.rd-messe-procare-2027__section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--uui-spacing-6);
	text-align: center;
}

.rd-messe-procare-2027__intro {
	gap: var(--uui-spacing-10);
}

.rd-messe-procare-2027 .rd-messe-procare-2027__headline {
	font-size: 45px;
	font-weight: var(--uui-font-weight-bold);
	line-height: 59px;
	letter-spacing: 0.45px;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__headline--ticket {
	font-size: 28px;
	line-height: 37px;
	letter-spacing: 0;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__headline--visit {
	font-size: 40px;
	line-height: 53px;
	letter-spacing: 0.4px;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__lead {
	max-width: 816px;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.18px;
}

/* Cards: Figma's grey tab panels (radius 20, padding 40) */

.rd-messe-procare-2027 .rd-messe-procare-2027__card {
	--uui-surface-padding: var(--uui-spacing-10);
	border-radius: var(--rd-messe-procare-2027-radius);
	text-align: left;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__card-title {
	font-size: 24px;
	font-weight: var(--uui-font-weight-bold);
	line-height: 38px;
	text-align: left;
}

.rd-messe-procare-2027__icon {
	color: var(--uui-fg-primary);
}

/* Event card */

.rd-messe-procare-2027__event {
	display: flex;
	align-items: center;
	gap: var(--uui-spacing-10);
	align-self: stretch;
}

.rd-messe-procare-2027__event-logo {
	flex: none;
	width: 140px;
	height: 82px;
	object-fit: contain;
}

.rd-messe-procare-2027__event-body {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-6);
	min-width: 0;
}

.rd-messe-procare-2027__event-facts {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--uui-spacing-10);
	row-gap: var(--uui-spacing-3);
}

.rd-messe-procare-2027__event-facts li {
	display: flex;
	align-items: center;
	gap: var(--uui-spacing-2);
	font-size: 16px;
	font-weight: var(--uui-font-weight-semibold);
	line-height: 19px;
}

/* Ticket section (Figma 5244:2524): centred heading and text, the form's own 600px box below. */

.rd-messe-procare-2027__ticket {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-6);
}

/* Keeps #TicketSichern deep links working; legacy Messe.css styles that id, so it sits on an out-of-flow anchor. */
.rd-messe-procare-2027__anchor {
	position: absolute;
	top: 0;
	left: 0;
	scroll-margin-top: 110px;
}

.rd-messe-procare-2027__ticket-text {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-6);
	text-align: center;
}

.rd-messe-procare-2027__ticket-text p {
	font-size: 16px;
	line-height: 19px;
}

/* Highlights carousel (slick) */

.rd-messe-procare-2027__highlights {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-20);
}

.rd-messe-procare-2027__highlights .slick-list {
	margin: calc(-1 * var(--uui-spacing-4)) calc(-1 * var(--uui-spacing-5)) calc(-1 * var(--uui-spacing-8));
	padding: var(--uui-spacing-4) 0 var(--uui-spacing-8);
}

.rd-messe-procare-2027__highlights .slick-track {
	display: flex;
}

.rd-messe-procare-2027__highlights .slick-slide {
	height: auto;
	padding: 0 var(--uui-spacing-5);
	box-sizing: border-box;
}

.rd-messe-procare-2027__highlights .slick-slide > div,
.rd-messe-procare-2027__slide {
	height: 100%;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__highlight {
	display: flex;
	flex-direction: column;
	gap: var(--uui-spacing-4);
	height: 100%;
	box-sizing: border-box;
	box-shadow: var(--uui-shadow-lg);
}

.rd-messe-procare-2027 .rd-messe-procare-2027__highlight p {
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 0.16px;
}

.rd-messe-procare-2027 .rd-messe-procare-2027__highlight .rd-messe-procare-2027__card-title {
	margin-bottom: var(--uui-spacing-2);
}

.rd-messe-procare-2027__highlight-icon,
.rd-messe-procare-2027__icon--highlight {
	flex: none;
	width: 48px;
	height: 48px;
	--uui-icon-size: 48px;
}

.rd-messe-procare-2027__icon--highlight,
.rd-messe-procare-2027__highlight-icon--accent {
	color: var(--rd-messe-procare-2027-accent);
}

.rd-messe-procare-2027__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--uui-spacing-6);
}

.rd-messe-procare-2027 .rd-messe-procare-2027__dots {
	display: flex;
	gap: var(--uui-spacing-2);
}

.rd-messe-procare-2027__dots li {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
}

.rd-messe-procare-2027__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--uui-color-gray-300);
	border-radius: var(--uui-radius-full);
	background: transparent;
	font-size: 0;
	cursor: pointer;
}

.rd-messe-procare-2027__dots .slick-active button {
	border-color: var(--uui-bg-success-solid);
	background: var(--uui-bg-success-solid);
}

.rd-messe-procare-2027__arrows {
	display: flex;
	gap: var(--uui-spacing-10);
	margin-left: auto;
}

.rd-messe-procare-2027__arrow {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--uui-text-primary);
	cursor: pointer;
}

.rd-messe-procare-2027__arrow .rd-messe-procare-2027__icon {
	--uui-icon-size: 30px;
	color: inherit;
}

/* Visit section: gradient panel, team avatars, benefits */

.rd-messe-procare-2027 .rd-messe-procare-2027__visit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--uui-spacing-12);
	padding: var(--uui-spacing-16);
	border-radius: var(--rd-messe-procare-2027-radius);
	background: linear-gradient(90deg, var(--uui-color-lime-50) 0%, var(--uui-color-pink-50) 48%, var(--uui-bg-secondary) 100%);
	text-align: center;
}

.rd-messe-procare-2027__team {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 0;
}

.rd-messe-procare-2027 uui-avatar.rd-messe-procare-2027__avatar[size][border][placeholder-icon][placeholder-text] .uui-avatar__root,
.rd-messe-procare-2027 uui-avatar.rd-messe-procare-2027__avatar[size][border][placeholder-icon][placeholder-text] .uui-avatar__wrapper,
.rd-messe-procare-2027 uui-avatar.rd-messe-procare-2027__avatar[size][border][placeholder-icon][placeholder-text] .uui-avatar__surface {
	inline-size: 112px;
	block-size: 112px;
	flex: none;
}

.rd-messe-procare-2027__visit .rd-messe-procare-2027__section-head {
	margin-bottom: calc(-1 * var(--uui-spacing-2));
}

.rd-messe-procare-2027__benefits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--uui-spacing-6) 60px;
}

.rd-messe-procare-2027__benefits li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--uui-spacing-2);
	width: 176px;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.14px;
}

.rd-messe-procare-2027__icon--benefit {
	--uui-icon-size: 48px;
}

.rd-messe-procare-2027__icon--benefit-sm {
	--uui-icon-size: 40px;
	margin: var(--uui-spacing-1) 0;
}

@media (max-width: 800px) {
	/* Hero-mobil: content at the bottom, the shade rises from the bottom edge. */
	.rd-messe-procare-2027__hero {
		align-items: flex-end;
		padding: var(--uui-spacing-20) var(--uui-spacing-6) var(--uui-spacing-10);
	}

	.rd-messe-procare-2027__hero::after {
		background: linear-gradient(0deg, var(--rd-messe-procare-2027-hero-shade) 51%, transparent 100%);
	}

	.rd-messe-procare-2027__hero-text {
		gap: var(--uui-spacing-4);
	}

	.rd-messe-procare-2027 .rd-messe-procare-2027__hero-kicker,
	.rd-messe-procare-2027 .rd-messe-procare-2027__hero-title {
		font-size: 28px;
		line-height: 37px;
		letter-spacing: 0;
	}

	/* The site's mobile stylesheet sets `h1 { font-size: 36px !important; line-height: 48px !important }`. */
	.rd-messe-procare-2027 .rd-messe-procare-2027__hero-title {
		font-size: 28px !important;
		line-height: 37px !important;
	}

	.rd-messe-procare-2027 .rd-messe-procare-2027__hero-facts {
		gap: var(--uui-spacing-2);
	}

	.rd-messe-procare-2027__hero-facts li {
		font-size: 16px;
		line-height: 19px;
		letter-spacing: 0;
	}

	.rd-messe-procare-2027 .rd-messe-procare-2027__icon--hero {
		--uui-icon-size: 20px;
	}

	/* Mobile stacks full width, ticket first. */
	.rd-messe-procare-2027__hero-buttons {
		flex-direction: column;
		align-self: stretch;
	}

	.rd-messe-procare-2027__hero-buttons .rd-messe-procare-2027__cta--ticket {
		order: -1;
	}

	.rd-messe-procare-2027__hero-buttons uui-button,
	.rd-messe-procare-2027 .rd-messe-procare-2027__hero-buttons uui-button[size][hierarchy][state][icon-only][interaction-mode] > .uui-button__control {
		width: 100%;
	}

	.rd-messe-procare-2027 .rd-messe-procare-2027__headline,
	.rd-messe-procare-2027 .rd-messe-procare-2027__headline--ticket,
	.rd-messe-procare-2027 .rd-messe-procare-2027__headline--visit {
		font-size: 30px;
		line-height: 40px;
		letter-spacing: 0.3px;
	}

	.rd-messe-procare-2027__main {
		gap: var(--uui-spacing-20);
		padding: var(--uui-spacing-12) var(--uui-spacing-4) var(--uui-spacing-20);
	}

	.rd-messe-procare-2027__event {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--uui-spacing-6);
	}

	.rd-messe-procare-2027 .rd-messe-procare-2027__card,
	.rd-messe-procare-2027 .rd-messe-procare-2027__visit {
		--uui-surface-padding: var(--uui-spacing-6);
		padding: var(--uui-spacing-6);
	}

	.rd-messe-procare-2027 uui-avatar.rd-messe-procare-2027__avatar[size][border][placeholder-icon][placeholder-text] .uui-avatar__root,
	.rd-messe-procare-2027 uui-avatar.rd-messe-procare-2027__avatar[size][border][placeholder-icon][placeholder-text] .uui-avatar__wrapper,
	.rd-messe-procare-2027 uui-avatar.rd-messe-procare-2027__avatar[size][border][placeholder-icon][placeholder-text] .uui-avatar__surface {
		inline-size: 72px;
		block-size: 72px;
	}
}