/* About-us page: additive rules on top of homepage/components.css + homepage.css
   (hero card, split layout, buttons, eyebrow header are already shared from there). */

/* This page has a single hero used at every breakpoint (no separate mobile
   variant), so it must NOT use homepage's ".elion-hero--desktop" class -
   homepage.css hides that class entirely below 767px in favor of its own
   ".elion-hero--mobile" section. */
@media (max-width: 767px) {
	.elion-hero--single .elion-hero__card {
		padding: 60px 24px;
	}

	.elion-hero--single .elion-hero__content {
		max-width: 100%;
	}
}

/* Breakdance's original columns on this page stack to 1-col already at
   <=1023px (not the 767px breakpoint components.css uses for the shared
   ".elion-grid-2" primitive), so tablet needs a page-scoped override. */
@media (max-width: 1023px) {
	.elion-about-us .elion-grid-2 {
		grid-template-columns: 1fr;
	}
}

.elion-media-plain {
	border-radius: var(--elion-radius-md);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.elion-media-plain img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elion-media-fluid img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--elion-radius-md);
}

/* Video block below the FOX ESS intro text/image split. */
.elion-video {
	position: relative;
	margin-top: var(--elion-gap);
	aspect-ratio: 1360 / 692;
	border-radius: var(--elion-radius-lg);
	background-color: var(--elion-green-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	cursor: pointer;
}

.elion-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.elion-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	border: none;
	border-radius: var(--elion-radius-sm);
	background: #f00;
	color: var(--elion-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform var(--elion-transition);
}

.elion-video__play:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.elion-video__play svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.elion-video.is-playing .elion-video__play {
	display: none;
}

/* Customer photo row (was a Breakdance/swiper carousel; rebuilt as a simple
   horizontally scrollable row so all images stay reachable on every breakpoint). */
.elion-photo-row {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--elion-radius-md);
	scrollbar-width: none;
}

.elion-photo-row::-webkit-scrollbar {
	display: none;
}

.elion-photo-row__item {
	flex: 0 0 calc(50% - 10px);
	aspect-ratio: 1 / 1;
	border-radius: var(--elion-radius-md);
	overflow: hidden;
	scroll-snap-align: start;
}

.elion-photo-row__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Checkmark badge list ("Projektentwickler", ...). */
.elion-checklist {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.elion-checklist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	background: var(--elion-gray-100);
	border-radius: var(--elion-radius-sm);
}

.elion-checklist__icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: var(--elion-yellow);
}

.elion-checklist__item span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--elion-black);
}

/* Plain underlined text link (e.g. "Bereits Kunde? Anmelden"). */
.elion-text-link {
	color: var(--elion-white) !important;
	text-decoration: underline !important;
	font-size: 14px;
}

/* Closing CTA card: green rounded panel, content left / photo right. */
.elion-cta-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--elion-gap);
	padding: 29px;
	background: var(--elion-green);
	border: none;
}

.elion-cta-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--elion-gap);
	max-width: 55%;
}

.elion-cta-card__title {
	font-style: italic;
}

.elion-cta-card__media {
	flex: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	max-width: 300px;
}

.elion-cta-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.elion-cta-card {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
	}

	.elion-cta-card__content {
		max-width: 100%;
	}

	.elion-cta-card__media {
		max-width: 200px;
		align-self: center;
	}

	/* Customer section: checklist/text first, photo row below (matches source). */
	.elion-section[aria-label="Unsere Kunden"] .elion-split__content {
		order: 1;
	}

	.elion-section[aria-label="Unsere Kunden"] .elion-photo-row {
		order: 2;
	}

	.elion-photo-row__item {
		flex-basis: 100%;
	}
}