/* Ketovavaria Rezepte 0.6.0 – Kochhilfen: Sterne, Kochmodus, Abhaken. Brand: Forest Green #2E7D32, Ink #1A2E1F. */

/* ---------- Kopfzeile: Ø-Sterne + Kochmodus ---------- */
/* 0.11.5 (doppelte Klasse: schlägt die Layout-Regel `:root :where(.is-layout-flow) > *` des Block-Themes, die margin auf 0 setzt): Bewertung | Knopfgruppe (Kochmodus + Merken) | Keto-Score. 8-px-Raster (BRAND §Spacing): 16 px oben, 24 px zum Keto-Score. */
.kv-werkzeuge.kv-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 8px) var(--space-3, 24px); margin: var(--space-2, 16px) 0 var(--space-3, 24px); }
.kv-werkzeuge__knoepfe { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--space-1, 8px); }
.kv-werkzeuge__knoepfe:not(:has(> :not([hidden]))) { display: none; }
.kv-werkzeuge__knoepfe .btn { min-height: 48px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-body, 1rem); font-weight: var(--fw-semibold, 600); line-height: 1.3; white-space: nowrap; }
@media (max-width: 520px) {
	.kv-werkzeuge__knoepfe { flex: 1 1 100%; }
	.kv-werkzeuge__knoepfe .btn { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
}
.kv-bew-kurz { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-text, #1A2E1F); text-decoration: none; font-size: var(--fs-small, .875rem); }
.kv-bew-kurz:hover .kv-bew-kurz__text { text-decoration: underline; }
.kv-kochmodus-btn[hidden] { display: none; }

.kv-sterne { position: relative; display: inline-block; font-size: 1.25rem; line-height: 1; letter-spacing: 2px; color: #C9D6CB; white-space: nowrap; }
.kv-sterne__voll { position: absolute; inset: 0 auto 0 0; width: var(--kv-sterne, 0%); overflow: hidden; color: #2E7D32; }

/* ---------- Bewertungs-Abschnitt ---------- */
.kv-bewertung { margin-top: var(--space-4, 32px); padding: var(--space-3, 24px); border: 1px solid var(--color-border, #E1EAE2); border-radius: var(--radius-md, 16px); background: #F6FAF6; }
.kv-bewertung .kv-section-title { margin-top: 0; }
.kv-bew__stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-2, 16px); }
.kv-bew__form[hidden] { display: none; }
.kv-bew__form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-2, 16px); }
.kv-bew__form legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.kv-bew__sterne { display: inline-flex; gap: 2px; }
.kv-bew__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kv-bew__stern { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border-radius: 8px; font-size: 2rem; line-height: 1; color: #66756A; }
/* Leer = Umriss-Stern (Ink-Grau, 4,9:1), gewählt = gefüllter Stern Forest Green – Form + Farbe unterscheiden.
   0.10.0: SVG-Maske statt Schriftzeichen ★/☆ (gleiche Außenkontur, unabhängig von der Systemschrift) und Hover hat
   Vorrang vor der Auswahl – vorher blieben bei gewähltem Stern 3 und Hover auf 5 die Sterne 4/5 als dünner Umriss
   stehen und wirkten kleiner (Tester-Screenshot). */
.kv-bew__stern span[aria-hidden] { font-size: 0; display: block; width: 32px; height: 32px; }
.kv-bew__stern span[aria-hidden]::before { content: ""; display: block; width: 32px; height: 32px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") center / 100% no-repeat; }
.kv-bew__sterne:has(.kv-bew__radio:checked) .kv-bew__stern,
.kv-bew__sterne:hover .kv-bew__stern { color: #2E7D32; }
.kv-bew__sterne:has(.kv-bew__radio:checked) .kv-bew__stern span[aria-hidden]::before,
.kv-bew__sterne:hover .kv-bew__stern span[aria-hidden]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E"); }
.kv-bew__sterne:not(:hover) .kv-bew__radio:checked + .kv-bew__stern ~ .kv-bew__stern,
.kv-bew__sterne:hover .kv-bew__stern:hover ~ .kv-bew__stern { color: #66756A; }
.kv-bew__sterne:not(:hover) .kv-bew__radio:checked + .kv-bew__stern ~ .kv-bew__stern span[aria-hidden]::before,
.kv-bew__sterne:hover .kv-bew__stern:hover ~ .kv-bew__stern span[aria-hidden]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E"); }
.kv-bew__radio:focus-visible + .kv-bew__stern { outline: 3px solid #2E7D32; outline-offset: 2px; }
.kv-bew__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kv-bew__status { margin: var(--space-1, 8px) 0 0; font-weight: 600; }
.kv-bew__status:empty { display: none; }
.kv-bew__hinweis { margin: var(--space-1, 8px) 0 0; font-size: var(--fs-small, .875rem); color: var(--color-text-muted, #66756A); }
.kv-bewertung [data-kv-bewertung-senden]:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Abhaken ---------- */
.kv-abhaken .kv-check { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: #2E7D32; cursor: pointer; transform: translateY(4px); }
/* Ei-Bullet weicht der Checkbox (eine Markierung je Zeile). */
.recipe-ingredients.kv-abhaken li::before { display: none; }
.recipe-ingredients.kv-abhaken li { align-items: flex-start; }
.recipe-ingredients.kv-abhaken li.kv-zutat-gruppe { padding-top: 16px; }
.recipe-steps.kv-abhaken li { padding-left: 84px; }
.recipe-steps.kv-abhaken li::before { left: 36px; }
.recipe-steps.kv-abhaken .kv-check { position: absolute; left: 0; top: 0; transform: translateY(5px); }
/* Tap-Ziel 44 px um die 22-px-Box (unsichtbarer Rand). */
.kv-abhaken .kv-check { box-shadow: 0 0 0 11px transparent; }
.kv-abhaken li.is-done > :not(.kv-check):not(.kv-shop) { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--color-text-muted, #66756A); }
.recipe-steps.kv-abhaken li.is-done { color: var(--color-text-muted, #66756A); text-decoration: line-through; text-decoration-thickness: 1px; }
.kv-abhaken-reset { margin: 0 0 var(--space-2, 16px); }
.kv-abhaken-reset[hidden] { display: none; }
.kv-linkbtn { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: var(--fs-small, .875rem); color: #2E7D32; text-decoration: underline; cursor: pointer; }
.kv-linkbtn:hover { color: var(--color-text, #1A2E1F); }

/* ---------- Kochmodus (Vollbild-Dialog) ---------- */
.kv-km { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; overflow: hidden; padding: var(--space-3, 24px); border: 0; background: #FFFFFF; color: var(--color-text, #1A2E1F); box-sizing: border-box; }
.kv-km[open] { display: flex; flex-direction: column; gap: var(--space-2, 16px); }
.kv-km::backdrop { background: rgba(26, 46, 31, .6); }
html.kv-km-offen { overflow: hidden; }
.kv-km__kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 3px solid #2E7D32; padding-bottom: var(--space-2, 16px); }
.kv-km__titel { margin: 0; font-size: 1.5rem; color: #2E7D32; }
.kv-km__wach { margin: 0; font-size: var(--fs-small, .875rem); color: var(--color-text-muted, #66756A); }
.kv-km__zutaten summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: #2E7D32; }
.kv-km__zutaten ul { margin: 0; padding-left: 1.2em; font-size: 1.125rem; line-height: 1.6; }
.kv-km__zutaten li.is-done { text-decoration: line-through; color: var(--color-text-muted, #66756A); }
.kv-km__pos { margin: 0; font-weight: 700; color: #2E7D32; font-size: 1.125rem; }
.kv-km > * { min-width: 0; }
.kv-km__schritt { flex: 1 1 auto; overflow-wrap: anywhere; min-height: 0; overflow: auto; font-size: clamp(1.375rem, 2.2vw + 1rem, 2rem); line-height: 1.55; max-width: 40em; }
.kv-km__schritt:focus { outline: none; }
.kv-km__schritt:focus-visible { outline: 3px solid #2E7D32; outline-offset: 4px; }
.kv-km__nav { display: flex; gap: var(--space-2, 16px); justify-content: space-between; }
.kv-km__nav .btn { flex: 1 1 0; min-height: 56px; font-size: 1.125rem; }
.kv-km__nav .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (min-width: 768px) { .kv-km__nav .btn { flex: 0 0 220px; } }

/* ---------- 0.6.2: Kasten „Nachgekocht? Zeig's uns!“ (unter dem Beitragsbild) ---------- */
/* Platz: direkt unter dem Beitragsbild. Desktop: rechte Spalte unter dem Bild; < 1024 px: Bild (order -1), dann Kasten. */
.recipe__head > .kv-nk { margin: 0; }
@media (min-width: 1024px) {
	.recipe__head:has(> .kv-nk) > .recipe__head-text { grid-column: 1; grid-row: 1 / span 2; }
	.recipe__head:has(> .kv-nk) > .recipe__hero { grid-column: 2; grid-row: 1; align-self: end; }
	.recipe__head > .kv-nk { grid-column: 2; grid-row: 2; align-self: start; margin-top: -16px; }
}
@media (max-width: 1023px) { .recipe__head > .kv-nk { order: -1; margin-top: -12px; } }
.kv-nk { display: flex; gap: var(--space-2, 16px); align-items: center; margin: var(--space-2, 16px) 0 0; padding: 12px var(--space-2, 16px); border: 1px solid var(--color-border, #E1EAE2); border-radius: var(--radius-md, 16px); background: #F6FAF6; color: var(--color-text, #1A2E1F); }
.kv-nk__bild { flex: 0 0 auto; }
.kv-nk__beispiel { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.kv-nk__thumbs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 176px; margin: 0; padding: 0; list-style: none; }
.kv-nk__thumbs li:only-child img { width: 96px; height: 96px; border-radius: 12px; }
.kv-nk__thumbs img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.kv-nk__text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kv-nk__titel { flex: 1 0 100%; margin: 0; font-size: 1.125rem; line-height: 1.3; color: var(--color-text, #1A2E1F); }
.kv-nk__zahl { flex: 1 0 100%; margin: 0; font-size: var(--fs-small, .875rem); font-weight: 700; }
.kv-nk__zahl a { color: #2E7D32; }
.kv-nk__satz { flex: 1 0 100%; margin: 0; font-size: var(--fs-small, .875rem); line-height: 1.45; }
.kv-nk__btn { min-height: 44px; display: inline-flex; align-items: center; margin-top: 4px; }
.kv-nk__mini { margin: 4px 0 0; font-size: .8125rem; color: var(--color-text-muted, #66756A); }
.kv-nk__mini a { color: #2E7D32; display: inline-block; padding: 6px 0; }
.kv-nk a:focus-visible { outline: 3px solid #2E7D32; outline-offset: 2px; }
/* Mobil kompakt (Konzept: max. 120 px): Bild 64 px, Satz + Mini-Zeile ab 600 px. */
@media (max-width: 599px) {
	.kv-nk { padding: 8px 12px; gap: 12px; }
	.kv-nk__beispiel { width: 64px; height: 64px; }
	.kv-nk__thumbs { max-width: 68px; }
	.kv-nk__thumbs img { width: 32px; height: 32px; }
	.kv-nk__thumbs li:only-child img { width: 64px; height: 64px; }
	.kv-nk__satz, .kv-nk__mini { display: none; }
	.kv-nk__titel { font-size: 1rem; line-height: 1.25; }
	.kv-nk__text { gap: 2px 12px; }
	.kv-nk__btn { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; }
	.kv-nk__zahl a { display: inline-block; }
}

/* ---------- 0.6.2: Kochmodus-Ende (Vollbild-Karte) ---------- */
.kv-ende[open] { justify-content: center; align-items: center; text-align: center; }
.kv-ende__inhalt { display: flex; flex-direction: column; align-items: center; gap: var(--space-2, 16px); max-width: 40rem; width: 100%; }
.kv-ende__haken { margin: 0; width: 72px; height: 72px; border-radius: 50%; background: #2E7D32; color: #FFFFFF; font-size: 2.5rem; line-height: 72px; font-weight: 700; }
.kv-ende__titel { margin: 0; font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem); color: #2E7D32; }
.kv-ende__titel:focus { outline: none; }
.kv-ende__frage { margin: 0; font-size: 1.25rem; }
.kv-ende__knoepfe { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kv-ende .kv-ende__btn { min-height: 64px; font-size: 1.25rem; min-width: 0; width: 100%; justify-content: center; }
.kv-ende__sterne { display: flex; justify-content: center; gap: 4px; }
.kv-ende__sterne[hidden] { display: none; }
.kv-ende__stern { width: 60px; height: 60px; border: 0; border-radius: 12px; background: #F6FAF6; color: #2E7D32; font-size: 2.25rem; line-height: 1; cursor: pointer; }
.kv-ende__stern:focus-visible, .kv-ende__btn:focus-visible, .kv-ende__spaeter:focus-visible { outline: 3px solid #2E7D32; outline-offset: 2px; }
.kv-ende__status { margin: 0; font-weight: 600; }
.kv-ende__status:empty { display: none; }
.kv-ende__spaeter { font-size: 1rem; }
@media (min-width: 768px) { .kv-ende__knoepfe { flex-direction: row; } .kv-ende .kv-ende__btn { flex: 1 1 0; } }

/* ---------- Druck: interaktive Teile aus, Liste wie bisher ---------- */
@media print {
	.kv-werkzeuge, .kv-bewertung, .kv-nk, .kv-abhaken-reset, .kv-km, .kv-abhaken .kv-check { display: none !important; }
	.recipe-ingredients.kv-abhaken li::before { display: block; }
	.recipe-steps.kv-abhaken li { padding-left: 9mm; }
	.recipe-steps.kv-abhaken li::before { left: 0; }
	.kv-abhaken li.is-done, .kv-abhaken li.is-done > * { text-decoration: none !important; color: inherit !important; }
}