/**
 * Widget „Empfehlung des Hauses" (kwat_recommend, Phase 27).
 *
 * Ein hervorgehobener Posten, darunter die Nebenzeilen. Alle Farben und Maße kommen
 * aus den Marken-Tokens; die drei Stil-Regler schreiben in `--kwat-rc-accent`,
 * `--kwat-rc-surface` und `--kwat-rc-max`, die hier als Rückfall ihren Token tragen.
 *
 * Vokabular: `--kwat-rc-*` (nicht `--kwat-r-*` und nicht `--kwat-menu-*` – Letzteres
 * gehört dem geteilten `menu-shared.css`, an dem dieses Stylesheet hängt).
 */

.kwat-rc {
	--kwat-rc-accent: var( --kwat-color-accent );
	--kwat-rc-accent-hi: var( --kwat-color-accent-hi );
	--kwat-rc-surface: var( --kwat-color-surface );
	--kwat-rc-max: none;
	--kwat-rc-gap: clamp( 1.25rem, 0.9rem + 1.4vw, 2rem );

	max-inline-size: var( --kwat-rc-max );
	background: var( --kwat-color-bg );
	border: 1px solid var( --kwat-color-border );
	border-radius: var( --kwat-radius-lg, 16px );
	padding: clamp( 1.5rem, 1.1rem + 1.6vw, 2.75rem );
}

/* Ohne Rahmen steht das Widget direkt auf der Seite – für Container, die schon
   eine eigene Fläche mitbringen. */
.kwat-rc--bare {
	background: none;
	border: 0;
	padding: 0;
}

/* ⚠ Container Query auf dem INNEREN Blatt, nie auf der Widget-Wurzel: Ein
   `container-type` an einem Elementor-Flex-Item mit unbestimmter Breite treibt in
   Chromium die Blockhöhe der Hülle auf etwa das Doppelte – die bekannte große
   Leerfläche unter dem Widget im schmalen Fenster. */
.kwat-rc__sheet {
	container-type: inline-size;
	container-name: kwatrc;
}

/* ── Kopf ────────────────────────────────────────────────────────────────────── */

.kwat-rc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-block-end: var( --kwat-rc-gap );
}

.kwat-rc__headmain {
	min-inline-size: min( 100%, 18rem );
}

.kwat-rc__eyebrow {
	display: block;
	font-size: var( --kwat-text-xs );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --kwat-rc-accent );
	margin-block-end: 0.4rem;
}

.kwat-rc__title {
	font-family: var( --kwat-font-heading );
	font-weight: 400;
	font-size: var( --kwat-text-xl );
	line-height: 1.15;
	margin: 0;
	color: var( --kwat-color-text );
}

.kwat-rc__title-accent {
	font-style: italic;
	color: var( --kwat-rc-accent-hi );
}

.kwat-rc__date {
	font-size: var( --kwat-text-sm );
	color: var( --kwat-color-text-muted );
	margin: 0;
	padding-block-end: 0.25rem;
}

/* ── Der hervorgehobene Posten ───────────────────────────────────────────────── */

/* Vier Auszeichnungen statt einer: Größe, eigene Fläche, Gold-Haarlinie und das
   Schildchen. Nähme man die Farbe weg, bliebe er trotzdem als Empfehlung erkennbar
   (WCAG 1.4.1 – Information nie allein über Farbe).
   ⛔ KEIN dicker Farbbalken an einer Seite: Das ist das Allerweltsmuster generischer
   Oberflächen und trüge hier nichts, was die anderen drei nicht schon leisten. */
.kwat-rc__lead {
	background: var( --kwat-rc-surface );
	border: 1px solid color-mix( in srgb, var( --kwat-rc-accent ) 34%, transparent );
	border-radius: var( --kwat-radius-md, 10px );
	padding: clamp( 1.1rem, 0.9rem + 0.9vw, 1.6rem );
	display: grid;
	gap: clamp( 1rem, 0.8rem + 0.8vw, 1.5rem );
}

@container kwatrc ( min-width: 44rem ) {
	.kwat-rc__lead--photo {
		grid-template-columns: minmax( 12rem, 18rem ) 1fr;
		align-items: start;
	}
}

.kwat-rc__leadfig {
	margin: 0;
}

/* ⚠ Doppelklasse ist Pflicht: Elementors globales `.elementor img { height: auto }`
   misst (0,1,1) und schlüge eine einfache Widget-Klasse (0,1,0). Das Bild stünde
   dann in seiner natürlichen Höhe da, und Seitenverhältnis wie Zuschnitt wären
   wirkungslos. */
.kwat-rc .kwat-rc__leadimg {
	inline-size: 100%;
	/* Zwei Deckel, der kleinere gewinnt: die Spaltenbreite und die eigene
	   Dateibreite. Ein `aspect-ratio` allein begrenzt nichts – es rechnet die Höhe
	   aus einer unbegrenzten Breite. */
	block-size: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var( --kwat-radius-sm, 6px );
	border: 1px solid color-mix( in srgb, var( --kwat-rc-accent ) 28%, transparent );
}

.kwat-rc__leadbody {
	min-inline-size: 0;
}

.kwat-rc__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var( --kwat-text-xs );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	/* Dunkle Schrift auf Gold – der Wert ist bewusst fest und nicht aus dem Token
	   gemischt: Er muss auch dann tragen, wenn der Betrieb die Akzentfarbe ändert. */
	color: #241c07;
	background: var( --kwat-rc-accent );
	margin-block-end: 0.6rem;
}

.kwat-rc__flag-ico {
	flex: none;
}

.kwat-rc__leadrubrik {
	display: block;
	font-size: var( --kwat-text-xs );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --kwat-rc-accent );
	margin-block-end: 0.2rem;
}

.kwat-rc__leadname {
	font-family: var( --kwat-font-heading );
	font-weight: 700;
	font-size: var( --kwat-text-xl );
	line-height: 1.15;
	margin: 0 0 0.4rem;
	color: var( --kwat-color-text );
}

.kwat-rc__leaddesc {
	/* Fließtext bleibt auf der Basisgröße – hier wird gelesen, nicht überflogen. */
	font-size: var( --kwat-text-base );
	line-height: 1.55;
	color: var( --kwat-color-text-muted );
	margin: 0;
	max-inline-size: 60ch;
	text-wrap: pretty;
}

.kwat-rc__leadprice {
	font-family: var( --kwat-font-heading );
	font-weight: 700;
	font-size: var( --kwat-text-lg );
	color: var( --kwat-rc-accent-hi );
	margin: 0.85rem 0 0;
}

/* ── Zicklindes Tipp ─────────────────────────────────────────────────────────── */

.kwat-rc__tip {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-block-start: 1rem;
	padding-block-start: 0.9rem;
	border-block-start: 1px dashed color-mix( in srgb, var( --kwat-rc-accent ) 40%, transparent );
}

.kwat-rc .kwat-rc__tipimg {
	inline-size: 52px;
	block-size: auto;
	flex: none;
}

.kwat-rc__tiptext {
	margin: 0;
	font-size: var( --kwat-text-sm );
	line-height: 1.55;
	color: var( --kwat-color-text-muted );
}

.kwat-rc__tiplabel {
	color: var( --kwat-rc-accent );
	font-weight: 600;
}

/* ── Die Nebenzeilen ─────────────────────────────────────────────────────────── */

.kwat-rc__rest {
	list-style: none;
	margin: var( --kwat-rc-gap ) 0 0;
	padding: 0;
	display: grid;
}

@container kwatrc ( min-width: 46rem ) {
	.kwat-rc__rest {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: clamp( 1.75rem, 1.2rem + 2vw, 3rem );
	}
}

.kwat-rc__row {
	display: grid;
	gap: 0.15rem;
	/* ⚠ align-content ist hier Pflicht, nicht Kosmetik: Nebeneinander stehende
	   Rasterzellen sind gleich hoch, und ohne diese Zeile verteilt Grid die
	   Überschusshöhe auf die Zeilen des kürzeren Postens. Gemessen wurde eine
	   Namenszeile von 34px statt 28px – die beiden Spalten lagen sichtbar nicht mehr
	   auf einer Höhe, und der Abstand Rubrik→Name war je Posten ein anderer. */
	align-content: start;
	padding-block: clamp( 0.85rem, 0.7rem + 0.5vw, 1.1rem );
	border-block-start: 1px solid var( --kwat-color-border );
}

.kwat-rc__rowrubrik {
	font-size: var( --kwat-text-xs );
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --kwat-rc-accent );
}

.kwat-rc__rowhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.kwat-rc__rowname {
	font-family: var( --kwat-font-heading );
	font-weight: 700;
	font-size: var( --kwat-text-lg );
	line-height: 1.25;
	margin: 0;
	color: var( --kwat-color-text );
	min-inline-size: 0;
}

.kwat-rc__rowprice {
	font-weight: 700;
	font-size: var( --kwat-text-base );
	color: var( --kwat-rc-accent-hi );
	white-space: nowrap;
}

.kwat-rc__rowdesc {
	font-size: var( --kwat-text-base );
	line-height: 1.5;
	color: var( --kwat-color-text-muted );
	margin: 0.15rem 0 0;
	text-wrap: pretty;
}

/* ── Fuß ─────────────────────────────────────────────────────────────────────── */

.kwat-rc__foot {
	margin-block-start: var( --kwat-rc-gap );
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var( --kwat-color-border );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.kwat-rc__note {
	font-size: var( --kwat-text-sm );
	color: var( --kwat-color-text-muted );
	margin: 0;
	font-style: italic;
	/* ⚠ Die Notiz nimmt den Platz bis zum Knopf – sie darf ihn nicht ungenutzt
	   lassen. Mit einem festen `max-inline-size: 46ch` brach der Satz bei 412px um,
	   während im Fuß 1050px frei waren: ein Umbruch mitten im Satz und daneben eine
	   697px-Lücke (live gemessen, vom Auftraggeber gesehen). `ch` misst die Ziffer
	   „0" – deutscher Fließtext ist schmaler, real passen etwa 1,2 Zeichen in 1ch,
	   also trug die Zeile nur ~55 Zeichen. */
	flex: 1 1 auto;
	/* Notbremse für sehr breite Container: Ein Hinweissatz über die volle Breite
	   eines 1600px-Widgets wäre wieder unlesbar. 78ch entspricht rund 90 Zeichen –
	   genug für diesen einzeiligen Satz, aber kein Fließtext-Korridor. */
	max-inline-size: 78ch;
}

.kwat-rc__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var( --kwat-text-sm );
	font-weight: 600;
	/* 44px Touch-Ziel über das Polster, nicht über eine feste Höhe – so wächst der
	   Knopf mit, wenn die Beschriftung umbricht. */
	padding: 0.7rem 1.4rem;
	min-block-size: 44px;
	border-radius: 999px;
	text-decoration: none;
	/* ⚠ Grundfarbe UND Verlauf getrennt: Elementors Container-Lazy-Load setzt ab dem
	   dritten Container `background-image: none` auf jedes Element. Ein Knopf, der
	   seine Fläche nur aus einem Verlauf bezieht, ist dort unsichtbar – dunkle
	   Schrift auf dunklem Grund, live gemessen mit 1,00:1. */
	background-color: var( --kwat-rc-accent );
	background-image: linear-gradient( 180deg, var( --kwat-rc-accent-hi ), var( --kwat-rc-accent ) );
	color: #241c07;
	border: 1px solid color-mix( in srgb, var( --kwat-rc-accent ) 70%, #000 );
	transition: transform 240ms var( --kwat-ease-emphasis, cubic-bezier( 0.22, 1, 0.36, 1 ) ),
		box-shadow 240ms var( --kwat-ease-emphasis, cubic-bezier( 0.22, 1, 0.36, 1 ) );
}

.kwat-rc__cta-ico {
	flex: none;
}

@media ( hover: hover ) {
	.kwat-rc__cta:hover {
		transform: translateY( -1px );
		box-shadow: 0 6px 18px color-mix( in srgb, #000 45%, transparent );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.kwat-rc__cta {
		transition: none;
	}

	.kwat-rc__cta:hover {
		transform: none;
	}
}

.kwat-rc__cta:focus-visible {
	outline: 3px solid var( --kwat-rc-accent-hi );
	outline-offset: 2px;
}

/* ── Schmal ──────────────────────────────────────────────────────────────────── */

@container kwatrc ( max-width: 30rem ) {
	.kwat-rc__head,
	.kwat-rc__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.kwat-rc__cta {
		justify-content: center;
		inline-size: 100%;
	}

	.kwat-rc .kwat-rc__tipimg {
		inline-size: 44px;
	}
}

@container kwatrc ( max-width: 26rem ) {
	/* Ganz schmal fällt NUR die Beschreibung der Nebenzeilen weg. Name, Preis und
	   Kennzeichnung bleiben – Allergene sind Rechtspflicht, kein Komfortmerkmal. */
	.kwat-rc__rowdesc {
		display: none;
	}
}

/* ── Windows-Kontrastmodus ───────────────────────────────────────────────────── */

@media ( forced-colors: active ) {
	.kwat-rc,
	.kwat-rc__lead {
		border: 1px solid CanvasText;
	}

	.kwat-rc__row,
	.kwat-rc__foot {
		border-block-start-color: CanvasText;
	}

	.kwat-rc__tip {
		border-block-start-color: CanvasText;
	}

	.kwat-rc__flag,
	.kwat-rc__cta {
		border: 1px solid CanvasText;
	}

	.kwat-rc__cta {
		forced-color-adjust: none;
		background: ButtonFace;
		color: ButtonText;
	}
}

/* ── Elementor-V4-Reset ──────────────────────────────────────────────────────────
   V4 setzt eigene <a>-Farben (unter anderem ein kräftiges Pink) auf Widget-Links.
   `:focus` gehört PFLICHT dazu, nicht nur `:focus-visible` – sonst wechselt der
   Knopf beim Antippen die Schriftfarbe. Steht am Dateiende, damit die Regel in der
   Kaskade hinter allem anderen liegt. */
.elementor-widget .kwat-rc__cta:is( :link, :visited, :hover, :active, :focus, :focus-visible ) {
	color: #241c07;
	text-decoration: none;
}