/* ============================================================
 * landfair/ab-karten — Frontend- und Editor-Styles
 * Augenblick Optik · Präfix: ak-
 *
 * Creme Fläche über die volle Breite, Inhalt begrenzt.
 * Kopf: Dachzeile + Überschrift mit kursivem Gold-Akzent.
 * Karten: Bild oben, weiße Fläche mit Titel, Text, Link.
 * Tablet: max. 2 Spalten, Smartphone: 1 Spalte.
 * ============================================================ */

.ak-karten {
	--ak-spalten:   4;
	--ak-ratio:     6/5;
	--ak-radius:    8px;
	--ak-gap:       24px;
	--ak-pad-v:     72px;
	--ak-pad-h:     24px;
	--ak-kopf:      32px;
	--ak-karte-pad: 20px;
	--ak-titel:     2.6em;
	--ak-ktitel-gr: 1.05em;

	--ak-gold-eff:  var( --ak-akzent, #c9973f );
	--ak-text-eff:  var( --ak-text, color-mix( in srgb, var( --wp--preset--color--contrast, #1f2937 ) 78%, #ffffff ) );
	--ak-schatten:  0 6px 22px -10px rgba( 20, 40, 75, 0.22 ), 0 1px 3px rgba( 20, 40, 75, 0.06 );

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

.ak-karten *,
.ak-karten *::before,
.ak-karten *::after {
	box-sizing: border-box;
}

.ak-karten .ak-karten__inner {
	width: 100%;
	max-width: var( --ak-max, none );
	margin: 0 auto;
}

/* ---------- Kopf ---------- */
.ak-karten .ak-karten__kopf {
	margin: 0 0 var( --ak-kopf );
	padding: 0;
}

.ak-karten.ak-karten--kopf-zentriert .ak-karten__kopf {
	text-align: center;
}

.ak-karten .ak-karten__dachzeile {
	margin: 0 0 10px;
	padding: 0;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --ak-dachzeile, #c9973f );
}

/* Überschriften: Schrift/Gewicht/Farbe aus dem Theme */
.ak-karten .ak-karten__titel {
	margin: 0;
	padding: 0;
	font-size: var( --ak-titel );
	line-height: 1.12;
	text-transform: none;
	letter-spacing: normal;
}

.ak-karten.ak-karten--headline-farbe .ak-karten__titel {
	color: var( --ak-headline );
}

.ak-karten[class*="-font-family"] .ak-karten__titel,
.ak-karten[class*="-font-family"] .ak-karten__ktitel {
	font-family: inherit;
}

.ak-karten .ak-karten__akzent {
	font-family: inherit;
	font-style: italic;
	font-weight: inherit;
	color: var( --ak-gold-eff );
}

/* ---------- Raster ---------- */
.ak-karten .ak-karten__grid {
	display: grid;
	grid-template-columns: repeat( var( --ak-spalten ), minmax( 0, 1fr ) );
	gap: var( --ak-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-karten .ak-karten__item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ak-karten .ak-karten__item::before,
.ak-karten .ak-karten__item::marker {
	content: none;
}

/* ---------- Karte ---------- */
.ak-karten .ak-karten__karte,
.ak-karten .ak-karten__karte:hover,
.ak-karten .ak-karten__karte:focus,
.ak-karten .ak-karten__karte:visited {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var( --ak-radius );
	background: var( --ak-karte, #ffffff );
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ak-karten.ak-karten--schatten-leicht .ak-karten__karte {
	box-shadow: var( --ak-schatten );
}

.ak-karten.ak-karten--schatten-mittel .ak-karten__karte {
	box-shadow: 0 14px 34px -12px rgba( 20, 40, 75, 0.3 ), 0 2px 6px rgba( 20, 40, 75, 0.08 );
}

.ak-karten.ak-karten--schatten-aus .ak-karten__karte {
	box-shadow: none;
}

.ak-karten .ak-karten__bild {
	position: relative;
	aspect-ratio: var( --ak-ratio );
	margin: 0;
	overflow: hidden;
	background: #efe8dc;
}

.ak-karten .ak-karten__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.ak-karten .ak-karten__bild-platzhalter {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	font-size: 0.8em;
	text-align: center;
	color: #14284b;
}

.ak-karten .ak-karten__inhalt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: var( --ak-karte-pad );
}

.ak-karten .ak-karten__ktitel {
	margin: 0 0 0.45em;
	padding: 0;
	font-size: var( --ak-ktitel-gr );
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}

.ak-karten.ak-karten--titel-fett .ak-karten__ktitel {
	font-weight: 700;
}

.ak-karten.ak-karten--ktitel-farbe .ak-karten__ktitel {
	color: var( --ak-ktitel );
}

.ak-karten .ak-karten__text {
	margin: 0;
	padding: 0;
	font-size: 0.86em;
	line-height: 1.55;
	color: var( --ak-text-eff );
}

/* Link „Mehr erfahren →“ am Kartenende */
.ak-karten .ak-karten__link,
.ak-karten .ak-karten__link:hover,
.ak-karten .ak-karten__link:focus,
.ak-karten .ak-karten__link:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: auto 0 0;
	padding: 1.1em 0 0;
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 0.84em;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	color: var( --ak-link, #c9973f );
}

.ak-karten .ak-karten__pfeil {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	transition: transform 0.2s ease;
}

.ak-karten a.ak-karten__karte:focus-visible,
.ak-karten a.ak-karten__link:focus-visible {
	outline: 2px solid var( --ak-link, #c9973f );
	outline-offset: 3px;
}

/* ---------- Hover ---------- */
.ak-karten.ak-karten--hover a.ak-karten__karte:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 36px -14px rgba( 20, 40, 75, 0.32 );
}

.ak-karten.ak-karten--hover a.ak-karten__karte:hover .ak-karten__bild img {
	transform: scale( 1.04 );
}

.ak-karten a.ak-karten__karte:hover .ak-karten__pfeil,
.ak-karten a.ak-karten__link:hover .ak-karten__pfeil {
	transform: translateX( 3px );
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.ak-karten .ak-karten__grid {
		grid-template-columns: repeat( min( var( --ak-spalten ), 2 ), minmax( 0, 1fr ) );
	}

	.ak-karten .ak-karten__titel {
		font-size: calc( var( --ak-titel ) * 0.88 );
	}
}

@media ( max-width: 900px ) {
	.ak-karten {
		padding-top: min( var( --ak-pad-v ), 56px );
		padding-bottom: min( var( --ak-pad-v ), 56px );
	}
}

@media ( max-width: 600px ) {
	.ak-karten .ak-karten__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ak-karten .ak-karten__titel {
		font-size: calc( var( --ak-titel ) * 0.76 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ak-karten .ak-karten__karte,
	.ak-karten .ak-karten__bild img,
	.ak-karten .ak-karten__pfeil {
		transition: none;
	}

	.ak-karten.ak-karten--hover a.ak-karten__karte:hover,
	.ak-karten.ak-karten--hover a.ak-karten__karte:hover .ak-karten__bild img,
	.ak-karten a:hover .ak-karten__pfeil {
		transform: none;
	}
}