/* =========================================================================
   motoin exit layer
   ========================================================================= */

.motoin-el {
	--el-orange: var(--mtn-orange, #ff7300);
	--el-orange-dunkel: var(--mtn-orange-dark, #000);
	--el-text: var(--mtn-text, #000);
	--el-leise: var(--mtn-text-muted, #666);
	--el-flaeche: var(--mtn-surface, #fff);
	--el-schrift-display: var(--mtn-font-display, "CoolveticaRg-Regular", "Arial Black", Arial, sans-serif);
	--el-schrift: var(--mtn-font-body, Arial, Helvetica, sans-serif);
	--el-radius: var(--mtn-radius-lg, 8px);

	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	font-family: var(--el-schrift);
	opacity: 0;
	transition: opacity 200ms ease;
}

.motoin-el.is-offen {
	opacity: 1;
}

.motoin-el[hidden] {
	display: none;
}

.motoin-el__hintergrund {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, .72);
	/* The backdrop is the closing surface itself – a click beside the box
	   ends the overlay. */
	cursor: pointer;
}

.motoin-el__kasten {
	position: relative;
	/*
	 * A column, not one long scrolling area.
	 *
	 * With everything in a single `overflow-y: auto` box, the close button -
	 * absolutely positioned inside it - scrolled away with the content, and so
	 * did the footer holding the call to action and "Nein danke, weiterlesen".
	 * Measured on a 375x640 phone: 1947 px of content in a 576 px box, the
	 * cross gone after 300 px of scrolling. Both ways out were unreachable.
	 *
	 * Head and footer are now fixed and only the product list scrolls, so the
	 * exits stay on screen at every scroll position.
	 */
	display: flex;
	flex-direction: column;
	width: min(920px, 100%);
	max-height: min(88vh, 900px);
	padding: clamp(1.25rem, 3vw, 2.25rem);
	overflow: hidden;
	background: var(--el-flaeche);
	border-radius: var(--el-radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
	transform: translateY(12px) scale(.985);
	transition: transform 220ms cubic-bezier(.2, 0, .2, 1);
}

.motoin-el.is-offen .motoin-el__kasten {
	transform: translateY(0) scale(1);
}

/* --- Closing ------------------------------------------------------------ */

.motoin-el__schliessen {
	position: absolute;
	top: .6rem;
	right: .6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/* A generous tap target – the way out has to be easy to hit. */
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--el-leise);
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
}

.motoin-el__schliessen:hover,
.motoin-el__schliessen:focus-visible {
	background: rgba(0, 0, 0, .07);
	color: var(--el-text);
}

/* --- Header area -------------------------------------------------------- */

.motoin-el__kopf {
	max-width: 44rem;
	margin-bottom: 1.25rem;
	padding-right: 2.5rem;
}

.motoin-el__kicker {
	margin: 0 0 .3rem;
	color: var(--el-leise);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.motoin-el__titel {
	margin: 0 0 .5rem;
	font-family: var(--el-schrift);
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--el-text);
	text-transform: uppercase;
}

.motoin-el__text {
	margin: 0;
	color: var(--el-leise);
	font-size: 1rem;
	line-height: 1.55;
}

/* --- Products ----------------------------------------------------------- */

/* The three parts of the column: only the middle one scrolls. `min-height: 0`
   is what allows it to shrink at all - without it a flex item refuses to go
   below its content height and the box grows past the window again. */
.motoin-el__kopf,
.motoin-el__fuss {
	flex: 0 0 auto;
}

.motoin-el__produkte {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* Keep the scroll inside the layer instead of handing it to the article
	   underneath once the list reaches its end. */
	overscroll-behavior: contain;
}

.motoin-el__produkte .motoin-produkte {
	margin: 0;
}

/* Inside an article product images may be square and generous. Not here: the
   box has to fit into the window at a glance, including headline and button –
   otherwise the visitor has to scroll to find the way out. */
.motoin-el__produkte .motoin-produkt__bild {
	aspect-ratio: 4 / 3;
}

.motoin-el__produkte .motoin-produkt__text {
	display: none;
}

/* On flat windows (laptops, tablets held sideways) a little tighter still. */
@media (max-height: 760px) {
	.motoin-el__produkte .motoin-produkt__bild {
		aspect-ratio: 16 / 10;
	}

	.motoin-el__kopf {
		margin-bottom: .75rem;
	}
}

/* --- Footer area -------------------------------------------------------- */

.motoin-el__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mtn-border, #e6e6e6);
}

.motoin-el__cta {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 48px;
	padding: .75rem 1.6rem;
	background: var(--el-orange-aktion, #ff7300);
	border-radius: var(--mtn-radius, 4px);
	color: #fff;
	font-family: var(--el-schrift);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: background-color 150ms;
}

.motoin-el__cta:hover,
.motoin-el__cta:focus {
	background: var(--el-orange-aktion-hover, #000);
	color: #fff;
	text-decoration: none;
}

/* The way back into the article stays equally visible – whoever wants to keep
   reading should be able to without searching. */
.motoin-el__weiterlesen {
	min-height: 44px;
	padding: 0 .25rem;
	background: none;
	border: 0;
	color: var(--el-leise);
	font-family: inherit;
	font-size: .95rem;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.motoin-el__weiterlesen:hover,
.motoin-el__weiterlesen:focus-visible {
	color: var(--el-text);
}

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 575.98px) {
	.motoin-el {
		padding: 0;
		align-items: flex-end;
	}

	.motoin-el__kasten {
		width: 100%;
		max-height: 90vh;
		/*
		 * `dvh` is the viewport actually on screen. `vh` on a phone means the
		 * viewport with the address bar hidden, so 90vh can reach past the
		 * visible area while the bar is showing - and the top of the box, where
		 * the cross sits, ends up behind the browser chrome. The `vh` line above
		 * stays as the fallback for browsers without `dvh`.
		 */
		max-height: 90dvh;
		border-radius: var(--el-radius) var(--el-radius) 0 0;
		transform: translateY(100%);
	}

	/* The safe distance to the home bar belongs to the footer now - the box no
	   longer scrolls, so padding on it would just shrink the list. */
	.motoin-el__fuss {
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* Two per row instead of one. Stacked, four cards measured 1631 px - more
	   than the whole box can show. Side by side the list stays skimmable and
	   the footer is reachable with a short scroll. */
	.motoin-el__produkte .motoin-produkte__raster {
		grid-template-columns: repeat(2, 1fr);
	}

	.motoin-el.is-offen .motoin-el__kasten {
		transform: translateY(0);
	}

	.motoin-el__fuss {
		flex-direction: column;
		align-items: stretch;
	}

	.motoin-el__cta {
		justify-content: center;
	}
}

/* --- Colour scheme: light only -------------------------------------------
   The `prefers-color-scheme: dark` block was removed on 26.08.2026 together
   with the theme's dark palette; see theme.css section 16. The rules are kept
   in _backup/2026-08-26-darkmode/. */

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.motoin-el,
	.motoin-el__kasten {
		transition: none;
	}
}

/* --- Print ---------------------------------------------------------------- */

@media print {
	.motoin-el {
		display: none !important;
	}
}