/* ============================================================
 * landfair/ab-marken — Frontend- und Editor-Styles
 * Präfix: am-
 *
 * Farben: Jede Farbe ist eine CSS-Variable, die nur gesetzt wird,
 * wenn im Block eine Farbe gewählt wurde. Sonst greifen Theme bzw.
 * die Entwurfsfarben (Gold #c9973f, Navy #14284b).
 *
 * Alle Selektoren beginnen mit .am-marken (gegen Theme-Regeln).
 * ============================================================ */

.am-marken {
	--am-hoehe:          3.4em;
	--am-gap:            32px;
	--am-n:              7;
	--am-n-tablet:       4;
	--am-n-mobil:        2;
	--am-n-aktiv:        var( --am-n );
	--am-pfeil-groesse:  2.2em;
	--am-pfeil-abstand:  16px;
	--am-pad-v:          40px;
	--am-pad-h:          24px;
	--am-dachabstand:    8px;
	--am-titelabstand:   16px;
	--am-titel:          2.2em;
	--am-dauer:          30s;
	--am-gold:           var( --wp--preset--color--primary, #c9973f );
	--am-navy:           #14284b;

	width: 100%;
	max-width: var( --am-max, none );
	margin-left: auto;
	margin-right: auto;
	padding: var( --am-pad-v ) var( --am-pad-h );
	box-sizing: border-box;
	background-color: var( --am-bg, transparent );
	color: var( --wp--preset--color--contrast, #14284b );
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}

.am-marken *,
.am-marken *::before,
.am-marken *::after {
	box-sizing: border-box;
}

/* ---------- Dachzeile ---------- */
.am-marken .am-marken__dachzeile {
	margin: 0 0 var( --am-dachabstand );
	padding: 0;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --am-dachzeile, var( --am-gold ) );
}

/* ---------- Überschrift ---------- */
.am-marken .am-marken__titel {
	margin: 0;
	padding: 0;
	font-size: var( --am-titel );
	line-height: 1.15;
}

.am-marken.am-marken--headline-farbe .am-marken__titel {
	color: var( --am-headline );
}

.am-marken[class*="-font-family"] .am-marken__titel {
	font-family: inherit;
}

.am-marken .am-marken__akzent {
	font-style: italic;
	color: var( --am-akzent-text, var( --am-gold ) );
}

/* ---------- Reihe: Pfeil | Logos | Pfeil ---------- */
.am-marken .am-marken__reihe {
	display: flex;
	align-items: center;
	gap: var( --am-pfeil-abstand );
	margin-top: var( --am-titelabstand );
}

.am-marken .am-marken__band {
	flex: 1 1 0;
	min-width: 0;
}

.am-marken .am-marken__spur {
	width: 100%;
}

.am-marken .am-marken__liste {
	width: 100%;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0.4em 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var( --am-gap );
}

/* Slider: horizontales Scrollen mit Einrasten, Scrollbalken verborgen */
.am-marken.am-marken--slider .am-marken__liste {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.am-marken.am-marken--slider .am-marken__liste::-webkit-scrollbar {
	display: none;
}

.am-marken .am-marken__marke {
	flex: 0 0 calc( ( 100% - ( var( --am-n-aktiv ) - 1 ) * var( --am-gap ) ) / var( --am-n-aktiv ) );
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	scroll-snap-align: start;
}

.am-marken .am-marken__marke::before,
.am-marken .am-marken__marke::marker {
	content: none;
}

/* Link: Farben in allen Zuständen festsetzen */
.am-marken .am-marken__link,
.am-marken .am-marken__link:hover,
.am-marken .am-marken__link:focus,
.am-marken .am-marken__link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	background: none;
	transition: transform 0.25s ease;
}

.am-marken a.am-marken__link:focus-visible {
	outline: 2px solid var( --am-gold );
	outline-offset: 4px;
	border-radius: 2px;
}

.am-marken .am-marken__logo {
	display: block;
	width: auto;
	height: calc( var( --am-hoehe ) * var( --am-skala, 1 ) );
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	transition: filter 0.25s ease;
}

.am-marken.am-marken--multiply .am-marken__logo {
	mix-blend-mode: multiply;
}

.am-marken.am-marken--graustufen .am-marken__logo {
	filter: grayscale( 1 ) contrast( 1.08 );
}

.am-marken.am-marken--hover-farbe .am-marken__marke:hover .am-marken__logo,
.am-marken.am-marken--hover-farbe .am-marken__marke:focus-within .am-marken__logo {
	filter: none;
}

.am-marken.am-marken--hover-anheben .am-marken__marke:hover .am-marken__link,
.am-marken.am-marken--hover-anheben .am-marken__marke:focus-within .am-marken__link {
	transform: translateY( -0.2em );
}

.am-marken.am-marken--hover-zoom .am-marken__marke:hover .am-marken__link,
.am-marken.am-marken--hover-zoom .am-marken__marke:focus-within .am-marken__link {
	transform: scale( 1.06 );
}

/* Ohne Logo-Bild: Markenname als Text-Logo */
.am-marken .am-marken__platzhalter {
	display: block;
	font-size: calc( var( --am-hoehe ) * var( --am-skala, 1 ) * 0.3 );
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: var( --am-platzhalter, var( --wp--preset--color--contrast, #14284b ) );
}

.am-marken .am-marken__leer {
	flex: 1 1 0;
	margin: 0;
	padding: 16px;
	text-align: center;
	font-size: 0.875em;
	color: inherit;
	background: rgba( 0, 0, 0, 0.06 );
}

/* ---------- Pfeile ‹ › ---------- */
.am-marken .am-marken__pfeil,
.am-marken .am-marken__pfeil:hover,
.am-marken .am-marken__pfeil:focus {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --am-pfeil-groesse );
	height: var( --am-pfeil-groesse );
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --am-pfeil, var( --wp--preset--color--contrast, #14284b ) );
	font: inherit;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.am-marken button.am-marken__pfeil:hover:not( :disabled ) {
	color: var( --am-pfeil-hover, var( --am-gold ) );
	background: color-mix( in srgb, var( --am-pfeil-hover, var( --am-gold ) ) 12%, transparent );
}

.am-marken .am-marken__pfeil--zurueck:hover:not( :disabled ) .am-marken__icon {
	transform: translateX( -0.1em );
}

.am-marken .am-marken__pfeil--weiter:hover:not( :disabled ) .am-marken__icon {
	transform: translateX( 0.1em );
}

.am-marken .am-marken__pfeil:focus-visible {
	outline: 2px solid var( --am-gold );
	outline-offset: 2px;
}

.am-marken .am-marken__pfeil:disabled {
	cursor: default;
	color: color-mix( in srgb, var( --am-pfeil, var( --wp--preset--color--contrast, #14284b ) ) 50%, transparent );
	background: transparent;
}

.am-marken .am-marken__icon {
	display: block;
	width: 60%;
	height: 60%;
	fill: none;
	stroke: currentColor;
	transition: transform 0.2s ease;
}

/* ---------- Laufband ---------- */
.am-marken.am-marken--laufband .am-marken__band {
	overflow: hidden;
	-webkit-mask-image: linear-gradient( to right, transparent, #000 6%, #000 94%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 6%, #000 94%, transparent );
}

.am-marken.am-marken--laufband .am-marken__spur {
	display: flex;
	background-color: var( --am-bg, transparent );
	width: max-content;
	animation: am-laufband var( --am-dauer ) linear infinite;
}

.am-marken.am-marken--laufband .am-marken__band:hover .am-marken__spur,
.am-marken.am-marken--laufband .am-marken__band:focus-within .am-marken__spur {
	animation-play-state: paused;
}

.am-marken.am-marken--laufband .am-marken__liste {
	flex: none;
	width: auto;
	padding-right: var( --am-gap );
}

/* Laufband: Logos in natürlicher Breite, nicht nach Anzahl */
.am-marken.am-marken--laufband .am-marken__marke {
	flex: none;
}

@keyframes am-laufband {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.am-marken {
		--am-n-aktiv: var( --am-n-tablet );
	}

	.am-marken .am-marken__titel {
		font-size: calc( var( --am-titel ) * 0.9 );
	}
}

@media ( max-width: 900px ) {
	.am-marken .am-marken__titel {
		font-size: calc( var( --am-titel ) * 0.8 );
	}
}

@media ( max-width: 600px ) {
	.am-marken {
		--am-n-aktiv: var( --am-n-mobil );
		padding-left: min( var( --am-pad-h ), 16px );
		padding-right: min( var( --am-pad-h ), 16px );
	}

	.am-marken .am-marken__reihe {
		gap: min( var( --am-pfeil-abstand ), 8px );
	}

	.am-marken .am-marken__liste {
		gap: min( var( --am-gap ), 20px );
	}

	.am-marken .am-marken__marke {
		flex-basis: calc( ( 100% - ( var( --am-n-aktiv ) - 1 ) * min( var( --am-gap ), 20px ) ) / var( --am-n-aktiv ) );
	}

	.am-marken .am-marken__titel {
		font-size: min( calc( var( --am-titel ) * 0.75 ), 1.9em );
	}
}

/* ---------- Bewegung reduzieren ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.am-marken.am-marken--slider .am-marken__liste {
		scroll-behavior: auto;
	}

	.am-marken .am-marken__link,
	.am-marken .am-marken__logo,
	.am-marken .am-marken__pfeil,
	.am-marken .am-marken__icon {
		transition: none;
	}

	.am-marken .am-marken__marke:hover .am-marken__link,
	.am-marken .am-marken__marke:focus-within .am-marken__link,
	.am-marken .am-marken__pfeil:hover .am-marken__icon {
		transform: none;
	}

	/* Laufband: stillstehende, umbrechende Reihe ohne Kopie */
	.am-marken.am-marken--laufband .am-marken__band {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.am-marken.am-marken--laufband .am-marken__spur {
		display: block;
		width: 100%;
		animation: none;
	}

	.am-marken.am-marken--laufband .am-marken__liste {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
	}

	.am-marken.am-marken--laufband .am-marken__liste[aria-hidden="true"] {
		display: none;
	}
}