/*
 * Kuchenfee recipe section shortcodes — mobile-first styles.
 *
 * Every block starts with classes scoped under `.kr-*` to avoid leaking into
 * the host theme. Designed to be used as standalone building blocks in page
 * builders (Block editor, Etch, Bricks, ...) or as part of the default
 * single-recipe layout. All sections share design tokens with the full-page
 * [recipe] layout (recipe-page.css) so mixing both is visually cohesive.
 */

.kr-block {
	/* Shared palette — matches recipe-page.css. */
	--kr-surface: #FFFFFF;
	--kr-surface-2: #F6EEE0;
	--kr-border: #E7D9C1;
	--kr-border-strong: #D6BF9C;
	--kr-text: #2B1D16;
	--kr-text-muted: #7A6657;
	--kr-text-subtle: #A0907F;
	--kr-primary: #C77A3E;
	--kr-primary-hover: #B46B33;
	--kr-butter: #F0D8A8;
	--kr-radius: 12px;
	--kr-radius-lg: 18px;
	--kr-shadow-sm: 0 1px 2px rgba(43, 29, 22, 0.06);
	--kr-font-serif: "Uchen";
	--kr-icon-ext: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");

	color: var(--kr-text);
	font-size: var(--text-m, 16px);
	line-height: 1.55;
	max-width: 100%;
}

.kr-block *,
.kr-block *::before,
.kr-block *::after {
	box-sizing: border-box;
}

.kr-block img {
	max-width: 100%;
	height: auto;
	display: block;
}

.kr-block + .kr-block {
	margin-top: 24px;
}

/* ---------- Title ---------- */
.kr-title {
	font-family: var(--kr-font-serif);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.1;
	font-size: clamp(28px, 7vw, 44px);
	margin: 0;
	color: var(--kr-text);
}

/* ---------- Featured image ---------- */
.kr-image {
	margin: 0;
	border-radius: var(--kr-radius-lg);
	overflow: hidden;
	background: var(--kr-surface-2);
	box-shadow: var(--kr-shadow-sm);
}

.kr-image__img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.kr-image__caption {
	font-size: var(--text-m, 13px);
	color: var(--kr-text-muted);
	margin-top: 8px;
	padding: 0 4px;
}

/* ---------- Intro ---------- */
.kr-intro {
	font-family: var(--kr-font-serif);
	font-size: var(--text-m, clamp(16px, 4.2vw, 19px));
	line-height: 1.6;
}

.kr-intro p {
	margin: 0 0 12px;
}

.kr-intro p:last-child {
	margin-bottom: 0;
}

/* ---------- Times ---------- */
/* Layout strategy:
 *   • narrow  (< 480px): 2 columns → 2×2 grid, all four cells equal
 *   • medium  (480–719): 3 columns → Vorbereitung / Backzeit / Ruhezeit on
 *     the top row, Gesamt spans the full width underneath
 *   • wide    (≥ 720px): 4 equal columns in a single row */
.kr-times {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	background: var(--kr-surface);
	border: 1px solid var(--kr-border);
	border-radius: var(--kr-radius-lg);
	padding: 8px;
}

.kr-times__item {
	padding: 12px 14px;
	border-radius: 10px;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 64px;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.kr-times__item--total {
	background: color-mix(in oklab, var(--kr-butter) 35%, var(--kr-surface));
}

.kr-times__label {
	font-size: var(--text-m, 11px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kr-text-subtle);
	font-weight: 700;
}

.kr-times__value {
	font-family: var(--kr-font-serif);
	font-size: var(--text-m, 18px);
	font-weight: 500;
	color: var(--kr-text);
	font-variant-numeric: tabular-nums;
}

/* 3+1: top row gets the three active durations, Gesamt takes the full row. */
@media (min-width: 480px) {
	.kr-times {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.kr-times__item--total {
		grid-column: 1 / -1;
	}
}

/* 4 in a row, all equal. */
@media (min-width: 720px) {
	.kr-times {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.kr-times__item--total {
		grid-column: auto;
	}
}

/* ---------- Ingredients ---------- */
.kr-ingredients {
	background: var(--kr-surface);
	border: 1px solid var(--kr-border);
	border-radius: var(--kr-radius-lg);
	padding: 16px;
	box-shadow: var(--kr-shadow-sm);
}

.kr-ingredients__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: color-mix(in oklab, var(--kr-butter) 40%, var(--kr-surface));
	border-radius: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.kr-ingredients__head-label {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kr-ingredients__head-l {
	font-size: var(--text-m, 11px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--kr-text-muted);
}

.kr-ingredients__head-v {
	font-family: var(--kr-font-serif);
	font-size: var(--text-m, 20px);
	line-height: 1;
	color: var(--kr-text);
}

.kr-ingredients__head-unit {
	font-family: "Uchen";
	font-size: var(--text-m, 13px);
	color: var(--kr-text-muted);
	margin-left: 4px;
}

.kr-ingredients__stepper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kr-ingredients__stepper-btn {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	border: 1px solid var(--kr-border);
	background: var(--kr-surface);
	color: var(--kr-text);
	font: inherit;
	font-size: var(--text-m, 18px);
	font-weight: 700;
	cursor: pointer;
	display: grid;
	place-items: center;
	line-height: 1;
	touch-action: manipulation;
}

.kr-ingredients__stepper-btn:hover {
	background: var(--kr-surface-2);
}

.kr-ingredients__stepper-input {
	width: 56px;
	height: 36px;
	padding: 4px 2px;
	text-align: center;
	border: 1px solid var(--kr-border);
	border-radius: 9px;
	background: var(--kr-surface);
	font: inherit;
	font-size: var(--text-m, 15px);
	font-weight: 700;
	color: var(--kr-text);
	outline: 0;
	-moz-appearance: textfield;
}

.kr-ingredients__stepper-input::-webkit-outer-spin-button,
.kr-ingredients__stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.kr-ingredients__stepper-input:focus {
	border-color: var(--kr-primary);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--kr-primary) 20%, transparent);
}

.kr-ingredients__section {
	font-family: "Uchen";
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kr-primary);
	margin: 18px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--kr-border-strong);
}

.kr-ingredients__section:first-child {
	margin-top: 0;
}

.kr-ingredients__section-note {
	font-size: var(--text-m, 13px);
	color: inherit;
	margin: 6px 0 18px;
	padding: var(--space-xs, 8px);
	background: #eee;
	border-radius: var(--radius-xl, 16px);
	line-height: 1.45;
	font-style: italic;
}
.kr-ingredients__section-note strong {
	font-style: normal;
	color: var(--kr-primary);
	margin-right: 4px;
}

.kr-ingredients__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kr-ingredients__item {
	border-bottom: 1px dashed var(--kr-border);
}

.kr-ingredients__item:last-child {
	border-bottom: 0;
}

.kr-ingredients__row {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	column-gap: 10px;
	row-gap: 2px;
	align-items: baseline;
	padding: 10px 0;
	font-size: var(--text-m, 15px);
}

.kr-ingredients__qty {
	font-family: var(--kr-font-serif);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--kr-text);
}

.kr-ingredients__name {
	color: var(--kr-text);
}

.kr-ingredients__name a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in oklab, var(--kr-primary) 40%, transparent);
	text-underline-offset: 3px;
}

.kr-ingredients__name a::after {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-left: 0.3em;
	vertical-align: -0.08em;
	background-color: currentColor;
	mask: var(--kr-icon-ext) no-repeat center / contain;
	-webkit-mask: var(--kr-icon-ext) no-repeat center / contain;
	opacity: 0.7;
}

.kr-ingredients__name a:hover {
	color: var(--kr-primary);
	text-decoration-color: var(--kr-primary);
}

.kr-ingredients__name a:hover::after {
	opacity: 1;
}

.kr-ingredients__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 14px;
	row-gap: 2px;
	min-width: 0;
}

.kr-ingredients__note {
	font-size: var(--text-m, 13px);
	color: var(--kr-text-muted);
	font-style: italic;
}

.kr-ingredients__note::before {
	content: "(";
}

.kr-ingredients__note::after {
	content: ")";
}

.kr-ingredients__optional {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 9px;
	font-size: var(--text-m, 11px);
	font-weight: 600;
	color: var(--kr-text);
	background: color-mix(in oklab, var(--kr-text-muted) 14%, transparent);
	border-radius: 999px;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: 1px;
}

/* Top-Überschrift fürs Bricks-Element (optional, vom Element gestylt). */
.kr-ingredients__heading {
	font-size: var(--text-l, 1.25rem);
	font-weight: 600;
	margin: 0 0 var(--space-m, 1rem);
	color: inherit;
	line-height: 1.3;
}

@media (min-width: 420px) {
	.kr-ingredients__row {
		grid-template-columns: 96px minmax(0, 1fr);
		column-gap: 14px;
	}
}

@media (min-width: 640px) {
	.kr-ingredients {
		padding: 20px;
	}
}

/* ---------- Tools ---------- */
.kr-tools__list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px dashed var(--kr-border);
}

.kr-tools__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 4px;
	border-bottom: 1px dashed var(--kr-border);
	font-size: var(--text-m, 15px);
}

/* Non-link tool names sit inert; only anchors get link affordances. */
.kr-tools__name {
	color: var(--kr-text);
	font-weight: 500;
	text-decoration: none;
}

a.kr-tools__name {
	color: var(--kr-primary);
	font-weight: 600;
}

a.kr-tools__name:hover {
	color: var(--kr-primary-hover);
}

a.kr-tools__name::after {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-left: 0.32em;
	vertical-align: -0.08em;
	background-color: currentColor;
	mask: var(--kr-icon-ext) no-repeat center / contain;
	-webkit-mask: var(--kr-icon-ext) no-repeat center / contain;
	opacity: 0.8;
}

a.kr-tools__name:hover::after {
	opacity: 1;
}

/* Amazon variant: replace external-link glyph with Amazon smile in brand color. */
a.kr-tools__name--amazon::after {
	width: 1em;
	height: 1em;
	margin-left: 0.35em;
	vertical-align: -0.15em;
	background-color: transparent;
	mask: none;
	-webkit-mask: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23FF9900' d='M257.2 162.7c-48.7 1.8-169.5 15.5-169.5 117.5 0 109.5 138.3 114 183.5 43.2 6.5 10.2 35.4 37.5 45.3 46.8l56.8-56S341 288.9 341 261.4V114.3C341 89 316.5 32 228.7 32 140.7 32 96 87 96 136.3l73.5 6.8c16.3-49.5 54.2-49.5 54.2-49.5 40.7-.1 33.5 40 33.5 69.1zm0 86.8c0 80-84.2 68-84.2 17.2 0-47.2 50.5-56.7 84.2-57.8v40.6zm136 163.5c-7.7 10-70 67-174.5 67S34.2 408.5 9.7 379c-6.8-7.7 1-11.3 5.5-8.3C88.5 415.2 203 488.5 387.7 401c7.5-3.7 13.3 2 5.5 12zm39.8 2.2c-6.5 15.8-16 26.8-21.2 31-5.5 4.5-9.5 2.7-6.5-3.8s19.3-46.5 12.7-55c-6.5-8.3-37-4.3-48-3.2-10.8 1-13 2-14-.3-2.3-5.7 21.7-15.5 37.5-17.5 15.7-1.8 41-.8 46 5.7 3.7 5.1-.1 27.1-6.5 43.1z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 1;
}

.kr-tools__note {
	font-size: var(--text-m, 12px);
	color: var(--kr-text-muted);
}

/* ---------- Steps ---------- */
.kr-steps__list,
.kr-steps__section-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kr-steps__section-wrap {
	list-style: none;
	margin: 0 0 24px;
}

.kr-steps__section-wrap:last-child {
	margin-bottom: 0;
}

.kr-steps__section {
	font-family: var(--kr-font-serif);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--kr-primary);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--kr-border-strong);
}

.kr-steps__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 6px;
	margin-bottom: 24px;
}

.kr-steps__item:last-child {
	margin-bottom: 0;
}

.kr-steps__number {
	font-family: var(--kr-font-serif);
	font-size: 28px;
	line-height: 1;
	font-weight: 500;
	color: var(--kr-primary);
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
	text-align: center;
	padding-top: 2px;
	letter-spacing: -0.01em;
}

.kr-steps__body {
	min-width: 0;
}

.kr-steps__title {
	display: block;
	font-family: var(--kr-font-serif);
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--kr-text);
	letter-spacing: -0.01em;
}

.kr-steps__content {
	font-size: var(--text-m, 16px);
	line-height: 1.65;
	color: var(--kr-text);
}

.kr-steps__content p {
	margin: 0 0 10px;
}

.kr-steps__content p:last-child {
	margin-bottom: 0;
}

.kr-steps__figure {
	margin: 12px 0 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--kr-radius);
	overflow: hidden;
	box-shadow: var(--kr-shadow-sm);
}

.kr-steps__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 520px) {
	.kr-steps__item {
		grid-template-columns: 60px minmax(0, 1fr);
		column-gap: 20px;
	}
	.kr-steps__number {
		font-size: 40px;
	}
	.kr-steps__title {
		font-size: 20px;
	}
}

@media (min-width: 720px) {
	.kr-steps__item {
		grid-template-columns: 80px minmax(0, 1fr);
		column-gap: 28px;
	}
	.kr-steps__number {
		font-size: 52px;
	}
}

/* ---------- Video ---------- */
.kr-video {
	border-radius: var(--kr-radius-lg);
	overflow: hidden;
	box-shadow: var(--kr-shadow-sm);
	background: var(--kr-surface-2);
}

.kr-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
}

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

/* ---------- Share / actions ---------- */
.kr-share {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 8px;
}

.kr-share__btn {
	min-height: 48px;
	padding: 10px 8px;
	border: 1px solid var(--kr-border);
	background: var(--kr-surface);
	color: var(--kr-text-muted);
	border-radius: 10px;
	font: inherit;
	font-size: var(--text-m, 12px);
	font-weight: 600;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	text-align: center;
	touch-action: manipulation;
}

.kr-share__btn:hover {
	background: var(--kr-surface-2);
	color: var(--kr-text);
}

.kr-share__btn.is-on {
	background: color-mix(in oklab, var(--kr-primary) 12%, transparent);
	color: var(--kr-primary);
	border-color: var(--kr-primary);
}

.kr-share__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.kr-share__ic svg {
	width: 22px;
	height: 22px;
	display: block;
}

.kr-share__label {
	display: block;
	font-size: var(--text-m, 11px);
	letter-spacing: 0.04em;
}

/* PDF-download button while the request is in flight. */
[data-kr-pdf].is-loading {
	opacity: 0.65;
	cursor: wait;
	pointer-events: none;
}

/* ---------- Legacy [recipe_header] wrapper ---------- */
.kr-header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.kr-header__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kr-header__title {
	margin: 0;
}

.kr-header__rating {
	font-weight: 600;
	color: var(--kr-text);
	font-size: var(--text-m, 14px);
}

.kr-header__rating-count {
	color: var(--kr-text-muted);
	font-weight: 400;
	margin-left: 2px;
}

.kr-header__author {
	color: var(--kr-text-muted);
	font-size: var(--text-m, 14px);
}

@media (min-width: 720px) {
	.kr-header {
		grid-template-columns: 1fr 1.5fr;
		gap: 24px;
		align-items: center;
	}
}

/* ---------- Favorite (heart) button ---------- */
/* Three states: default = white outline, hover = muted warm red, active
 * (favorited) = solid warm red. No background, no border — the heart is
 * the whole affordance. A subtle drop-shadow keeps the white outline legible
 * over light backgrounds and photos. */
.kfl-favorite-btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: #FFFFFF;
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .15s, transform .12s;
	touch-action: manipulation;
	font: inherit;
	line-height: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.kfl-favorite-btn:hover {
	color: #E59A93; /* muted warm red */
}

.kfl-favorite-btn:active {
	transform: scale(0.92);
}

.kfl-favorite-btn.is-active {
	color: #C94D3F; /* warm red */
}

.kfl-favorite-btn.is-active .kfl-favorite-btn__icon {
	fill: currentColor;
}

.kfl-favorite-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 999px;
}

.kfl-favorite-btn[disabled] {
	opacity: 0.55;
	cursor: wait;
}

.kfl-favorite-btn__icon {
	width: 22px;
	height: 22px;
	display: block;
	pointer-events: none;
}

/* Print: hide share / video / stepper controls. */
@media print {
	.kr-share,
	.kr-video,
	.kr-ingredients__stepper,
	.kfl-favorite-btn {
		display: none !important;
	}
	.kr-ingredients,
	.kr-times,
	.kr-image {
		box-shadow: none;
		break-inside: avoid;
	}
}

/* Reduced motion: no transitions. */
@media (prefers-reduced-motion: reduce) {
	.kr-block *,
	.kr-block *::before,
	.kr-block *::after {
		transition: none !important;
	}
}

/* ---- [recipe_author] ---- */
.kr-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.kr-author .kr-author__avatar {
	flex: 0 0 auto;
	width: 70px;
	height: 70px;
	border-radius: 50vh;
	object-fit: cover;
	object-position: center center;
}

.kr-author__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.kr-author__label {
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
}

.kr-author__name {
	font-size: var(--text-m);
	font-weight: 600;
}

.kr-author__title {
	font-size: var(--text-xs);
	opacity: 0.75;
}

/* ==== [recipe_review_stars] + Modal — ACSS-tokenized ==== */

/* Stars row: outline color from kf-border, fill from kf-butter (warm brand yellow) */
.kr-stars {
    display: inline-flex;
    align-items: center;
    /* Kein gap: würde beim Hover-Move zwischen Stern N und N+1 eine Lücke
       erzeugen → kein Stern wäre :hover → Hover-Preview-Flicker. Stattdessen
       padding-inline auf dem Stern selbst (ist Teil der Hover-Hit-Area). */
}
.kr-stars--sm { font-size: var(--text-s); }
.kr-stars--md { font-size: var(--text-l); }
.kr-stars--lg { font-size: var(--text-xxl); }

.kr-stars__star {
    /* Grid-Stack: beide SVGs liegen in derselben Grid-Zelle, also
       deckungsgleich. Vermeidet Drop-Shadow-Effekt der durch absolute
       positioning gegenüber padding-Box entstand. */
    display: inline-grid;
    grid-template-columns: 1fr;
    line-height: 0;
    background: transparent;
    border: 0;
    padding-block: 0;
    /* Inline padding ersetzt den ehemaligen .kr-stars{gap}: hält den
       sichtbaren Abstand zwischen den Sternen, vermeidet aber Hover-Lücken. */
    padding-inline: var(--space-xxs, 4px);
    color: var(--kf-text-muted, rgba(0, 0, 0, 0.18));
}
.kr-stars__star svg {
    /* Beide SVGs (bg + fg) ins gleiche Grid-Cell stapeln. */
    grid-area: 1 / 1;
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: block;
}
.kr-stars__star-fg {
    color: var(--kf-butter, #f5a623);
    clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
    transition: clip-path 0.15s ease;
}
.kr-stars--interactive .kr-stars__star {
    cursor: pointer;
}
.kr-stars--display .kr-stars__star,
.kr-stars--locked .kr-stars__star { cursor: default; }
.kr-stars--lg .kr-stars__star { min-width: 44px; min-height: 44px; }
.kr-stars--interactive .kr-stars__star:hover:not(:disabled) { transform: scale(1.08); }

.kr-review-stars {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 8px);
}
.kr-review-stars:hover {
    background: none;
}
.kr-review-stars--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: pointer;
}
.kr-review-stars--stacked .kr-review-widget__line {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 8px);
}
.kr-review-stars--inline {
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1;
}
.kr-review-stars--inline .kr-review-stars__count-text {
    text-align: center;
}
.kr-review-stars--compact,
.kr-review-stars--bar,
.kr-review-stars--inline {
    cursor: pointer;
}

/* Server-rendered stars in display layouts are spans; CSS doesn't auto-inherit
   cursor onto them, so make the affordance explicit. */
.kr-review-stars[data-kr-rating-widget] .kr-stars__star {
    cursor: pointer;
}

/* Per-star hover preview (only on clickable display layouts).
   Hovering star N fills stars 1..N gold and dims N+1..5.
   Uses :has() — supported Chrome 105+, Safari 15.4+, Firefox 121+.

   Spezifitäts-Trick: beide Regeln teilen sich denselben Prefix
   `.kr-stars:has(.kr-stars__star:hover)`, damit die Fill-Regel mit dem
   zusätzlichen `:hover`/`:has(~)` Suffix die Dim-Regel überstimmt. */
.kr-review-stars--inline .kr-stars:has(.kr-stars__star:hover) .kr-stars__star,
.kr-review-stars--bar .kr-stars:has(.kr-stars__star:hover) .kr-stars__star {
    --fill: 0% !important;
}
.kr-review-stars--inline .kr-stars:has(.kr-stars__star:hover) .kr-stars__star:hover,
.kr-review-stars--inline .kr-stars:has(.kr-stars__star:hover) .kr-stars__star:has(~ .kr-stars__star:hover),
.kr-review-stars--bar .kr-stars:has(.kr-stars__star:hover) .kr-stars__star:hover,
.kr-review-stars--bar .kr-stars:has(.kr-stars__star:hover) .kr-stars__star:has(~ .kr-stars__star:hover) {
    --fill: 100% !important;
}

/* Compact hat einen einzelnen Unicode-★ — slight scale für Hover-Affordance. */
.kr-uni-star {
    transition: transform 0.15s ease;
}
.kr-review-stars--compact:hover .kr-uni-star {
    transform: scale(1.1);
}
.kr-review-stars__avg {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: -4px;
}
.kr-review-stars__count {
    color: var(--kf-text-muted, rgba(0, 0, 0, 0.55));
    font-size: var(--text-s);
}
.kr-review-stars__count-text {
    color: var(--kf-text-muted, rgba(0, 0, 0, 0.55));
    font-size: var(--text-xs, 0.8125rem);
    font-family: inherit;
    line-height: 1.4;
    margin-top: 4px;
}
.kr-uni-star {
    color: var(--kf-butter, #f5a623);
    font-size: 1.1em;
    line-height: 1;
}

/* Trigger row: stars exactly 25px regardless of root font-size */
.kr-stars--md .kr-stars__star svg { width: 25px; height: 25px; }

/* Modal: big touch-friendly stars, mobile-aware via clamp */
.kr-stars--lg {
    gap: var(--space-xs, 8px);
    justify-content: center;
}
.kr-stars--lg .kr-stars__star svg {
    /* Min 44px = Touch-Target-Minimum, max 72px für Tablet/Desktop.
       Bei 375px-Viewport landen wir bei ~45px (12vw) → komfortabel
       bedienbar ohne den Modal zu sprengen. */
    width: clamp(44px, 12vw, 72px);
    height: clamp(44px, 12vw, 72px);
}
.kr-stars--lg .kr-stars__star {
    padding: var(--space-xxs, 4px);
    min-width: 56px;
    min-height: 56px;
}

/* === Modal shell === */
.kr-rating-modal__overlay {
    position: fixed; inset: 0;
    background: rgba(20, 20, 20, 0.55);
    z-index: 999;
    animation: kr-fade-in 200ms ease-out;
}
.kr-rating-modal__content {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: var(--kf-surface, #fff);
    color: var(--kf-text, inherit);
    font-family: var(--kf-font-sans, inherit);
    border-radius: var(--kf-radius-lg, 1rem);
    padding: var(--space-xl, 2.5rem);
    width: min(94vw, 540px);
    box-shadow: var(--kf-shadow-md, 0 10px 40px rgba(0, 0, 0, 0.2));
    animation: kr-modal-pop-in 200ms ease-out;
}
.kr-rating-modal__success {
    text-align: center;
    padding: var(--space-xl, 2.5rem) 0;
}
.kr-rating-modal__check {
    display: inline-block;
    font-size: var(--text-xxl);
    color: var(--success, #2e7d32);
    animation: kr-check-pop 200ms ease-out;
}

@keyframes kr-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes kr-modal-pop-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes kr-check-pop {
    0%   { transform: scale(0); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* === Stage 1: pick stars === */
.kr-rating-stage1 {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-l, 2rem);
    align-items: center;
}
.kr-rating-stage1__title {
    font-family: var(--kf-font-serif, inherit);
    font-size: var(--text-l);
    margin: 0;
    color: var(--kf-text);
    font-weight: 600;
    line-height: 1.3;
}
.kr-rating-stage1__separator {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--kf-border, rgba(0, 0, 0, 0.08));
    margin: 0;
}
.kr-rating-stage1__submit {
    margin-top: var(--space-xs, 8px);
    align-self: center;
    min-width: 220px;
}

/* === Stage 2: comment input === */
.kr-rating-stage2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 1.25rem);
    align-items: stretch;
    animation: kr-slide-up 250ms ease-out;
}
.kr-rating-stage2 .kr-stars { align-self: center; }
.kr-rating-stage2__caption {
    margin: 0;
    text-align: center;
    font-family: var(--kf-font-serif, inherit);
    font-size: var(--text-m);
    color: var(--kf-text);
    line-height: 1.4;
}
.kr-rating-stage2__textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: var(--space-s, 0.875rem) var(--space-m, 1rem);
    border: 1px solid var(--kf-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--kf-radius, 0.5rem);
    font: inherit;
    font-size: var(--text-s);
    color: var(--kf-text);
    background: var(--kf-surface, #fff);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.kr-rating-stage2__textarea:focus {
    outline: none;
    border-color: var(--primary, var(--kf-primary, #f5a623));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, var(--kf-primary, #f5a623)) 20%, transparent);
}
.kr-rating-stage2__counter {
    font-size: var(--text-xs);
    color: var(--kf-text-subtle, rgba(0, 0, 0, 0.5));
    text-align: right;
}
.kr-rating-stage2__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 0.75rem);
    align-items: stretch;
    margin-top: var(--space-xs, 8px);
}
.kr-rating-stage2__actions .btn--primary {
    align-self: stretch;
    min-width: 100%;
}
.kr-rating-stage2__skip {
    background: none;
    border: 0;
    padding: var(--space-xs, 8px);
    font: inherit;
    font-size: var(--text-s);
    color: var(--kf-text-subtle, rgba(0, 0, 0, 0.5));
    cursor: pointer;
    text-decoration: underline;
    align-self: center;
    transition: color 150ms ease-out;
}
.kr-rating-stage2__skip:hover:not(:disabled) {
    color: var(--kf-text, rgba(0, 0, 0, 0.8));
}
.kr-rating-stage2__skip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@keyframes kr-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Buttons ===
 * `.kr-btn` is a minimal base reset. Primary visual styling comes from the
 * site-wide `.btn--primary` class (defined globally by the brand stylesheet),
 * so the markup pattern is `class="kr-btn btn--primary"`. We deliberately do
 * NOT define `.btn--primary` here — let the global brand class win.
 */
.kr-btn {
    background: none;
    border: 0;
    padding: var(--space-s, 0.625rem) var(--space-m, 1.125rem);
    cursor: pointer;
    border-radius: 999px;
    font: inherit;
}

/* === Inline widget === */
.kr-review-widget { padding: var(--space-m, 1.25rem) 0; }
.kr-review-widget__success {
    text-align: center;
    padding: var(--space-m, 1.25rem) 0;
    color: var(--kf-text);
    font-family: var(--kf-font-serif, inherit);
    font-size: var(--text-m);
}

/* === Spinner === */
.kr-spinner {
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kr-spin 600ms linear infinite;
    margin-right: var(--space-xxs, 4px);
    vertical-align: -0.15em;
}
@keyframes kr-spin { to { transform: rotate(360deg); } }

/* Success-flash on Stage 1 (between submit and Stage 2) */
.kr-rating-stage1.is-flash .kr-stars__star-fg {
    animation: kr-star-pulse 500ms ease-out;
}
@keyframes kr-star-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Error banner */
.kr-rating-modal__error {
    margin-top: var(--space-m, 1rem);
    padding: var(--space-s, 0.75rem) var(--space-m, 1rem);
    background: color-mix(in oklab, var(--danger, #c62828) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--danger, #c62828) 30%, transparent);
    color: var(--danger, #c62828);
    border-radius: var(--kf-radius, 0.5rem);
    font-size: var(--text-s);
    text-align: center;
}

/* Mascot SVG above Stage 1 title */
.kr-rating-stage1__mascot {
    width: clamp(96px, 24vw, 140px);
    height: auto;
    margin: 0 auto calc(var(--space-s, 0.5rem) * -1);
    display: block;
    animation: kr-mascot-float 3s ease-in-out infinite;
}
@keyframes kr-mascot-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* sr-only for accessibility */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   Inline Rating Widget — [recipe_review_widget]
   ============================================ */
.kr-rating-widget-inline {
    background: var(--kf-surface, #fff);
    color: var(--kf-text, inherit);
    border-radius: var(--kf-radius-lg, 1rem);
    padding: var(--space-xl, 2.5rem);
    max-width: 540px;
    margin: 0 auto;
    box-shadow: var(--kf-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    text-align: center;
}
.kr-rating-widget-inline__success {
    text-align: center;
    padding: var(--space-l, 1.5rem) 0;
}
.kr-rating-widget-inline__check {
    display: inline-block;
    font-size: var(--text-xxl);
    color: var(--success, #2e7d32);
    animation: kr-check-pop 200ms ease-out;
}
.kr-rating-widget-inline__error {
    margin-top: var(--space-s, 1rem);
    color: var(--danger, #c62828);
    font-size: var(--text-s);
}

/* ── FAQ section (output of [recipe_faq]) ──────────────────────────────── */
.kr-faq { margin: 32px 0; }
.kr-faq__title {
    font-size: var(--text-l, 1.25rem);
    font-weight: 600;
    margin: 0 0 16px;
}
.kr-faq__item {
    border-top: 1px solid #e7e5dd;
    padding: 12px 0;
}
.kr-faq__item:last-child { border-bottom: 1px solid #e7e5dd; }
.kr-faq__q {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: var(--text-m, 1rem);
    padding: 8px 32px 8px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    position: relative;
}
.kr-faq__q::-webkit-details-marker { display: none; }
.kr-faq__q::after {
    content: '+';
    position: absolute;
    right: 4px;
    font-size: 1.4em;
    font-weight: 400;
    transition: transform 0.2s ease;
}
.kr-faq__item[open] .kr-faq__q::after { content: '−'; }
.kr-faq__a {
    padding: 4px 32px 12px 0;
    color: #555;
    line-height: 1.6;
}
.kr-faq__a p:last-child { margin-bottom: 0; }