/* =====================================================================
   Ketovavaria – Bildschirm-Styles
   Grundlage: designer/wordpress-theme-spec.md v1.0 (§-Verweise im Code)
   Abweichungen von der Spec sind mit „ABW:“ markiert und in DEV.md gelistet.
   ===================================================================== */

/* ---------- §1–3 Tokens ---------- */
:root {
	--color-primary: #43A047;
	--color-primary-dark: #2E7D32;
	--color-primary-light: #A5D6A7;
	--color-accent: #0063B6;
	--color-accent-light: #D6E9F8;
	--color-bg: #FFFFFF;
	--color-text: #1A2E1F;
	--color-text-muted: #66756A; /* 0.1.56: vorher #7C8A7E (3,62:1) → 4,86:1 auf Weiß (Lighthouse-Kontrast) */
	--color-ok: #388E3C;
	--color-warn: #F59E0B;
	--color-error: #D32F2F;
	/* Spec §1.1: abgeleitet, noch nicht in BRAND.md verankert (offene Frage an Designer) */
	--color-border: #E1EAE2;

	--btn-secondary-hover-bg: var(--color-text); /* 0.1.26: Ink statt #004E8F (designer/specs/button-link-farben-2026-10-19.md) */
	--color-link: var(--color-primary-dark);        /* #2E7D32, 5,13:1 auf Weiß */
	--color-link-hover: var(--color-text);          /* Ink */

	--fs-display: 3rem;
	--fs-h1: 2.75rem;
	--fs-h2: 2rem;
	--fs-h3: 1.375rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-xs: 0.75rem;
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;

	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-6: 48px;
	--space-8: 64px;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
}

/* ---------- Basis ---------- */
body {
	margin: 0;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
:where(a, button, input, select, summary):focus-visible {
	outline: 3px solid var(--color-primary-dark);
	outline-offset: 2px;
}
.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link.screen-reader-text:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	padding: var(--space-1) var(--space-2);
	background: var(--color-bg); color: var(--color-link);
	z-index: 100000; top: var(--space-1); left: var(--space-1);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* §4 Container */
.container,
.site-header__inner,
.site-footer__inner,
.site-footer__disclaimer,
.site-footer__bottom,
.hero__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto !important;
	padding-inline: var(--space-3);
}
@media (min-width: 768px) {
	.container, .site-header__inner, .site-footer__inner, .site-footer__disclaimer, .site-footer__bottom, .hero__inner { padding-inline: var(--space-4); }
}
@media (min-width: 1024px) {
	.container, .site-header__inner, .site-footer__inner, .site-footer__disclaimer, .site-footer__bottom, .hero__inner { padding-inline: var(--space-6); }
}
@media (min-width: 1440px) {
	/* §4 Large: 1200px Inhalt + großzügige Ränder */
	.container, .site-header__inner, .site-footer__inner, .site-footer__disclaimer, .site-footer__bottom, .hero__inner { max-width: calc(1200px + 2 * var(--space-8)); padding-inline: var(--space-8); }
}
.section { padding-block: var(--space-6); }
@media (min-width: 1024px) { .section { padding-block: var(--space-8); } }
.site-main { margin-top: 0 !important; }

/* §2.3 Eyebrow */
.eyebrow {
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--color-primary-dark);
	margin: 0 0 var(--space-1);
}

/* ---------- §5.3 Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	box-sizing: border-box;
	padding: 12px 24px;
	font-family: inherit;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	line-height: 1.3;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
/* ABW: Spec §5.3 will 18px/600 Weiß auf #43A047 als „Large Text“. 18px/600 ist kein Large Text
   (WCAG: ≥18.66px bold), Kontrast 3,3:1 < 4,5:1. Daher die in Spec §14 Nr. 3 genannte Alternative:
   Grundfarbe #2E7D32 (5,1:1). Hover = Ink (Brand-Farbe), da hellere Grüntöne mit Weiß durchfallen. */
.btn--primary {
	background-color: var(--color-primary-dark);
	color: #FFFFFF;
	font-size: 18px;
	min-width: 180px;
}
.btn--primary:hover { background-color: var(--color-text); color: #FFFFFF; }
.btn--secondary {
	background-color: var(--color-primary-dark);
	color: #FFFFFF;
	min-width: 160px;
}
.btn--secondary:hover, .btn--secondary:active { background-color: var(--btn-secondary-hover-bg); color: #FFFFFF; }
.btn--tertiary {
	background-color: transparent;
	color: var(--color-primary-dark);
	border-color: var(--color-primary);
	min-width: 140px;
}
.btn--tertiary:hover { background-color: var(--color-primary-light); color: var(--color-text); }
.btn--sm { padding: 8px 16px; font-size: var(--fs-small); min-width: 0; }

/* ---------- §5.1 Header ---------- */
.site-header-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .site-header-part { top: 32px; }
.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner { min-height: 64px; }
@media (min-width: 1024px) { .site-header__inner { min-height: 72px; } }
.site-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-text);
	margin-right: var(--space-3);
}
.site-header__logo { width: 40px; height: 40px; display: block; }
.site-header__wordmark { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-text); }
.site-header__nav .wp-block-navigation__container { gap: var(--space-4); }
.site-header__nav .wp-block-navigation-item__content {
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 2px solid transparent;
}
.site-header__nav .wp-block-navigation-item__content:hover { color: var(--color-primary-dark); }
.site-header__nav .current-menu-item > .wp-block-navigation-item__content,
.site-header__nav [aria-current="page"] {
	color: var(--color-primary-dark);
	border-bottom-color: var(--color-primary);
}
.site-header__nav .wp-block-navigation__responsive-container-open svg,
.site-header__nav .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--space-3);
}
/* nur das Mobil-Overlay – nicht ein geöffnetes Desktop-Dropdown (sonst „Ernährung“ größer, 18.10.) */
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: var(--space-2) 0; font-size: var(--fs-h3); }

/* 0.1.25 Kochbuch-CTA + Rezepte-Pille (designer/specs/header-kochbuch-button.md §2/§4).
   Markup ergänzt functions.php beim Rendern der Navigation. Burger-Grenze = WP-Kern 600 px. */
.site-header .kv-nav-cta > a,
.site-header a.kv-nav-cta-bar {
	display: inline-flex; align-items: center; gap: var(--space-1);
	box-sizing: border-box;
	background: var(--color-primary-dark);      /* #2E7D32, Weiß 5,13:1 */
	color: #FFFFFF;
	font-weight: var(--fw-semibold); line-height: 1.3;
	border: 0; border-bottom: 0;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color 120ms ease, box-shadow 120ms ease;
}
.site-header .kv-nav-cta > a { min-height: 44px; padding: 10px 20px; margin-left: var(--space-1); font-size: var(--fs-body); }
/* Kern setzt .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit} – Weiß hier festnageln */
.site-header .kv-nav-cta, .site-header .kv-nav-cta > a.wp-block-navigation-item__content.wp-block-navigation-item__content { color: #FFFFFF; }
.site-header .kv-nav-cta__icon { width: 18px; height: 18px; flex: none; }
.site-header .kv-nav-cta__lang { display: none; }
.site-header .kv-nav-cta > a:hover, .site-header a.kv-nav-cta-bar:hover,
.site-header .kv-nav-cta > a:active, .site-header a.kv-nav-cta-bar:active { background: var(--color-text); color: #FFFFFF; }
.site-header .kv-nav-cta > a:active, .site-header a.kv-nav-cta-bar:active { transform: translateY(1px); }
.site-header .kv-nav-cta > a[aria-current="page"], .site-header a.kv-nav-cta-bar[aria-current="page"] {
	background: var(--color-text); color: #FFFFFF; border-bottom: 0;
	box-shadow: inset 0 -3px 0 var(--color-primary);
}
/* Leisten-Button: nur solange der Burger sichtbar ist, nicht unter 360 px */
.site-header a.kv-nav-cta-bar { display: none; min-height: 40px; padding: 6px 14px; font-size: var(--fs-small); margin-right: var(--space-1); }
@media (max-width: 599px) {
	.site-header a.kv-nav-cta-bar { display: inline-flex; white-space: nowrap; }
	.site-header__nav.wp-block-navigation { flex-wrap: nowrap; align-items: center; }
}
@media (max-width: 359px) { .site-header a.kv-nav-cta-bar { display: none; } }
/* 0.1.66: Leistenknopf hat Icon; unter 400 px nur Icon (40×40), damit Schriftzug und Knopf sich bei 360–399 px nicht überlappen */
.site-header a.kv-nav-cta-bar { flex: none; }
.site-header a.kv-nav-cta-bar .kv-nav-cta__icon { display: none; }
.site-header__brand { flex: none; }
@media (max-width: 399px) {
	.site-header a.kv-nav-cta-bar { width: 40px; padding: 0; justify-content: center; }
	.site-header a.kv-nav-cta-bar .kv-nav-cta__icon { display: block; width: 20px; height: 20px; }
	.site-header .kv-nav-cta-bar__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
/* Burger-Panel: „Kochbuch ansehen“ als letzter Eintrag, volle Breite, ohne Icon */
.site-header__nav .is-menu-open .kv-nav-cta { width: 100%; align-self: stretch; margin-top: var(--space-2); }
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .kv-nav-cta > a {
	width: 100%; justify-content: center; min-height: 52px; margin-left: 0;
	padding: 12px 20px; font-size: 1.125rem;
}
.site-header__nav .is-menu-open .kv-nav-cta__icon { display: none; }
.site-header__nav .is-menu-open .kv-nav-cta__lang { display: inline; }

/* Rezepte als getönte Pille (Zucchini Mist, ohne Rand – Kontur bleibt „Mehr laden“) */
.site-header__nav .kv-nav-rezepte > .wp-block-navigation-item__content {
	padding: 8px 16px; margin-inline: -16px;
	background: #EDF7EE; color: var(--color-primary-dark);
	border-bottom: 0; border-radius: var(--radius-pill);
	transition: background-color 120ms ease, color 120ms ease;
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .kv-nav-rezepte > .wp-block-navigation-item__content { padding: 8px 16px; margin-inline: 0; }
.site-header__nav .kv-nav-rezepte > .wp-block-navigation-item__content:hover { background: #DBEFDC; color: var(--color-text); }
.site-header__nav .kv-nav-rezepte > .wp-block-navigation-item__content:active { background: var(--color-primary-light); }
.site-header__nav .kv-nav-rezepte.current-menu-item > .wp-block-navigation-item__content,
.site-header__nav .kv-nav-rezepte > [aria-current="page"],
body.is-rezepte .site-header__nav .kv-nav-rezepte > .wp-block-navigation-item__content {
	background: var(--color-primary-light); color: var(--color-text); border-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
	.site-header .kv-nav-cta > a, .site-header a.kv-nav-cta-bar, .site-header__nav .kv-nav-rezepte > * { transition: none; }
	.site-header .kv-nav-cta > a:active, .site-header a.kv-nav-cta-bar:active { transform: none; }
}

/* ---------- §5.2 Hero ---------- */
.hero { padding-block: var(--space-6); }
.hero__inner { display: grid; gap: var(--space-4); align-items: center; }
.hero__title { font-size: 2.25rem; line-height: 1.1; margin: 0 0 var(--space-2); }
/* 0.1.56: Keyword-H1 klein über dem Claim; Claim (p.hero__title) bleibt optisch die große Zeile. */
.hero__kicker { font-size: 1rem; line-height: 1.35; font-weight: var(--fw-semibold, 600); color: var(--color-primary-dark, #2E7D32); margin: 0 0 var(--space-1, .5rem); }
p.hero__title { font-weight: var(--fw-bold, 700); color: var(--color-text); letter-spacing: -0.01em; }
/* ABW: Subline in Ink statt Sage Grey – Sage auf Weiß = 3,6:1 (Spec §1.3 nennt 4,5:1). */
.hero__subtitle { max-width: 560px; color: var(--color-text); margin: 0 0 var(--space-3); }
.hero__cta-group { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* 0.1.20: Hero-Grafik ist jetzt die Clay-Motion-Box (§5.2b) – ihre Ebenen-Einblendungen
   steuern Größe/Position selbst; keine generelle .hero__media img-Regel mehr (würde
   die Ebenen überschreiben). Feste Box + Radius stehen in §5.2b. */
@media (min-width: 768px) {
	.hero { padding-block: var(--space-8); }
	.hero__inner { grid-template-columns: 1fr 1fr; }
	.hero__title { font-size: var(--fs-h1); }
	.hero__cta-group { flex-direction: row; gap: var(--space-2); }
}
@media (min-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr 1.1fr; } /* Grafik-Konzept S1: Illustration ≈ 600 px */
	.hero__title { font-size: var(--fs-display); }
}

/* ---------- §5.2b Hero-Clay-Motion v3 „Clay-Ruhe“ (0.1.20, designer/web/motion-hero-clay/hero-clay.css) ----------
   Ersetzt die Vektor-Hero-Motion (0.1.19). 3D-Clay-Ebenen (Basis/Wolken/Figuren/Zutaten/Schimmer);
   Bewegung nur transform/opacity (Compositor), Master-Loop 8 s nahtlos; Zutaten stehen fest
   (Inhaber-Feedback 17.10.). Feste Aspect-Ratio-Box → CLS 0; prefers-reduced-motion → Standbild. */

/* Feste Box: mobil 780/585, ab 641 px 1344/768 — exakt den Bildmaßen entsprechend
   (das Hero-Asset ist 7:4, nicht 16:9!), damit object-fit nichts cropt und die Ebenen
   pixelgenau liegen. Höhe immer reserviert (CLS 0). */
.hero__media--clay {
	position: relative;
	width: 100%;
	aspect-ratio: 780 / 585;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #D6E9F8; /* Himmelton gegen Ladeflackern */
}
@media (min-width: 641px) {
	.hero__media--clay { aspect-ratio: 1344 / 768; border-radius: var(--radius-lg); }
}

/* Szenen-Ebene (Basis + Figuren) — extrem dezenter Parallax-Atemzug.
   Alle Skalen >= 1, dadurch bleibt die Basis immer verdeckt (kein Ghosting). */
.hc-scene { position: absolute; inset: 0; animation: hc-breathe 8s ease-in-out infinite; transform-origin: 50% 60%; will-change: transform; }
.hc-scene .hc-base { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-scene .hc-fg { display: block !important; position: absolute; top: 0; left: 0; width: 100%; height: auto; }

/* Maskottchen atmet leicht: 1,000 -> 1,005, Ursprung unten Mitte (kein Tanzen). */
.hc-fg { animation: hc-breathe-fig 8s ease-in-out infinite; transform-origin: 50% 100%; will-change: transform; }

/* Wolken ziehen langsam: Himmel-Streifen mit gespiegeltem Rand-Auslauf, unten 3 % weich;
   Drift ±1,1 % in 8 s, nahtlos. */
.hc-clouds {
	display: block !important;
	position: absolute; top: 0; left: -2.98%; width: 105.95%; height: auto;
	-webkit-mask-image: linear-gradient(#000 0 97%, transparent 100%);
	        mask-image: linear-gradient(#000 0 97%, transparent 100%);
	animation: hc-clouds 8s ease-in-out infinite; will-change: transform;
}
@media (max-width: 640px) {
	.hc-clouds { left: -3.08%; width: 106.15%; }
}

/* Zutaten + Ei: FEST im Bild (Inhaber 17.10.). Keine Animation, nur der weiche Abrollschatten;
   display-activation weiter per CSS (!important), damit ohne CSS nur das Standbild bleibt. */
.hc-float { display: block !important; position: absolute; width: auto; height: auto; border: 0; filter: drop-shadow(0 6px 10px rgba(26,46,31,.18)); }
.hc-ei      { left: 11%;  top: 12%;   width: 7.2%; }
.hc-lachs   { left: 3.5%; top: 43%;   width: 9%; }
.hc-avocado { right: 8%;  top: 19%;   width: 8.2%; }
.hc-rucola  { right: 2.5%; top: 4%;   width: 6.6%; }
/* Mobil: nur 2 Zutaten, kleiner (gleicher Break wie der <picture>-Wechsel) */
@media (max-width: 640px) {
	.hc-lachs, .hc-rucola { display: none !important; }
	.hc-ei      { left: 4%;  top: 9%;  width: 9.5%; }
	.hc-avocado { right: 3%; top: 17%; width: 11%; }
}

/* Lichtschimmer: weißer Streifen, einmal pro Loop, leiser als v2 (Peak 0,30). */
.hc-shine {
	display: block !important;
	position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%;
	background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 60%);
	opacity: 0; transform: translateX(-140%);
	animation: hc-shine 8s linear infinite;
	pointer-events: none;
}

@keyframes hc-breathe     { 0%,100% { transform: scale(1); }   50% { transform: scale(1.003); } }
@keyframes hc-breathe-fig { 0%,100% { transform: scale(1); }   50% { transform: scale(1.005); } }
@keyframes hc-clouds      { 0%,100% { transform: translateX(-1.1%); } 50% { transform: translateX(1.1%); } }
@keyframes hc-shine  { 0%,22% { transform: translateX(-140%); opacity: 0; } 40%,58% { opacity: 1; } 76%,100% { transform: translateX(160%); opacity: 0; } }

/* Hero-Film (Karte f0cf58ab, 21.10.): Film liegt über dem Basis-Standbild; nach „ended“ 1 s Fade
   auf das Standbild. Im Film-Modus keine Zutaten-/Schimmer-Ebenen und keine Bewegung im Bild. */
.hero__media--film { background: #1A2E1F; }
.hero__media--film .hc-scene { animation: none; transform: none; }
.hero-film {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; background: #1A2E1F;
	opacity: 1; transition: opacity 1s ease;
}
@media (max-width: 640px) {
	.hero-film { object-fit: contain; } /* 16:9-Film in 4:3-Box: nichts abschneiden */
}
.hero-film[hidden], .hero-film__ton[hidden] { display: none; }
.hero-film__ton {
	position: absolute; top: .75rem; right: .75rem; z-index: 2;
	padding: .4rem .8rem; border: 0; border-radius: 999px;
	background: rgba(26,46,31,.78); color: #fff; font: inherit; font-size: .875rem; cursor: pointer;
	transition: opacity 1s ease;
}
.hero-film__ton:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero__media--film.is-ended .hero-film { opacity: 0; pointer-events: none; }
/* Ton-Knopf bleibt nach Filmende sichtbar: „Ton an“ startet den Film von vorn (0.1.29, 17:30) */
/* Play-Button nach Filmende (0.1.33, Inhaber 22.10.: noch durchsichtiger): 72 px, fast transparenter Ink-Hintergrund
   (Deckkraft .22, vorher .55) mit leichtem Backdrop-Blur; Icon mit Schlagschatten, damit es auf jedem Bildgrund lesbar bleibt, feiner weißer Umriss; Hover/Fokus deutlich (Deckkraft .45 + weißer Rand/Doppel-Ring).
   Icon bleibt voll weiß (Kontrast ≥ 3:1 nach WCAG 1.4.11 auf dem dunklen Grund). Klick auf Button/Bild → von vorn. */
.hero__media--film.is-ended { cursor: pointer; }
.hero-film__play {
	position: absolute; top: 50%; left: 50%; z-index: 3;
	width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 0 0 0 4px;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid rgba(255,255,255,.85); border-radius: 50%;
	background: rgba(26,46,31,.22); color: #FFFFFF; cursor: pointer;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	box-shadow: 0 2px 10px rgba(26,46,31,.18);
	opacity: 0; transition: opacity 1s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero-film__play[hidden] { display: none; }
.hero-film__play svg { filter: drop-shadow(0 1px 3px rgba(26,46,31,.75)); }
.hero__media--film.is-ended .hero-film__play { opacity: 1; }
.hero-film__play:hover, .hero-film__play:active {
	background: rgba(26,46,31,.45); border-color: #FFFFFF;
	box-shadow: 0 4px 18px rgba(26,46,31,.45); transform: scale(1.06);
}
.hero-film__play:focus-visible {
	outline: 3px solid #FFFFFF; outline-offset: 3px;
	background: rgba(26,46,31,.45); box-shadow: 0 0 0 6px rgba(46,125,50,.9);
}
@media (prefers-reduced-motion: reduce) { .hero-film__play { transition: none; } .hero-film__play:hover { transform: none; } }

/* Barrierefrei: Reduzierte Bewegung => exakt das heutige Standbild
   (Basisbild + fest platzierte Zutaten, keine Wolken, kein Schimmer). */
@media (prefers-reduced-motion: reduce) {
	.hc-scene, .hc-fg, .hc-clouds, .hc-shine { animation: none !important; transform: none !important; }
	.hc-clouds { display: none !important; }
	.hc-shine { opacity: 0 !important; }
}

/* ---------- §5.4 Rezept-Grid + Card ---------- */
.recipe-grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 768px) { .recipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .recipe-grid { grid-template-columns: repeat(3, 1fr); } }
.recipe-grid > li { margin: 0; display: flex; }
/* 0.1.43: Per JS (Filter/Mehr laden) eingefügte Karten kommen als <article> direkt im <ul> (ohne <li>). Die Core-Regel
   `:root :where(.is-layout-flow) > * { margin-block-start }` gab allen außer dem ersten Kind 24px Abstand nach oben →
   versetzte Oberkanten, Badges/Button nicht bündig (iPad/Tablet nach Filtern/Nachladen). Für alle direkten Grid-Kinder neutralisieren. */
.recipe-grid.recipe-grid > * { margin: 0; min-width: 0; }
.recipe-grid > .recipe-card { height: auto; align-self: stretch; }
.recipe-card {
	display: flex; flex-direction: column;
	width: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 150ms ease;
}
.recipe-card:hover { box-shadow: 0 4px 16px rgba(26, 46, 31, 0.08); }
.recipe-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.recipe-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-2) var(--space-3) var(--space-3); }
.recipe-card__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.3; margin: 0; }
.recipe-card__title a { color: var(--color-text); text-decoration: none; }
.recipe-card__title a:hover { color: var(--color-primary-dark); text-decoration: underline; }
/* ABW: Subline in Ink (Sage Grey 3,6:1 ist für 14px zu schwach). */
.recipe-card__sub { font-size: var(--fs-small); color: var(--color-text); margin: 4px 0 0; }
.recipe-card__macros { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
/* ABW: Chip-Text Ink statt Forest Green – Forest auf Zucchini Pale = 3,1:1, Ink = 8,8:1. */
.chip {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-light);
	color: var(--color-text);
}
.chip--time { background: transparent; padding-inline: 0; font-weight: var(--fw-regular); }
.chip .kv-ico, .kv-chip .kv-ico { width: 16px; height: 16px; }
.recipe-card__cta { width: 100%; margin-top: auto; }
.recipe-card__macros + .recipe-card__cta { margin-top: var(--space-2); }
.recipe-card__body > .recipe-card__cta { margin-top: max(var(--space-2), auto); }
.section__more { margin-top: var(--space-4); text-align: center; }

/* ---------- Brotkrumen + Filter ---------- */
.kv-breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-small); }
.kv-breadcrumbs li + li::before { content: "›"; margin-right: 4px; color: var(--color-text); }
.kv-breadcrumbs a { color: var(--color-link); }
.kv-breadcrumbs [aria-current] { color: var(--color-text); }

.kv-filter {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2);
	margin-block: var(--space-3) var(--space-4);
}
.kv-filter__field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.kv-filter select {
	font: inherit; font-weight: var(--fw-regular); font-size: var(--fs-body);
	min-height: 44px; padding: 8px 16px;
	border: 1px solid var(--color-primary-dark); /* §9.1 1.4.11: Rand interaktiver Elemente ≥3:1 */
	border-radius: var(--radius-sm);
	background: var(--color-bg); color: var(--color-text);
}
.kv-filter .btn { min-height: 44px; }
.wp-block-query-pagination { margin-top: var(--space-4); }

/* ---------- §6 Rezept-Detail ---------- */
.recipe__hero { max-width: 900px; margin: 0 0 var(--space-4) !important; }
.recipe__hero img { border-radius: var(--radius-lg); }
/* KI-Bildnachweis (Karte cfeb6ef3, 22.10.): dezent wie heise – kleine Credit-Zeile unter dem Bild.
   Farbe #5f6e61 statt --color-text-muted: 5,4:1 auf Weiß (WCAG AA für Fließtext), da die
   Kennzeichnung rechtlich sichtbar bleiben muss. */
.kv-bildcredit { font-size: var(--fs-small); color: #5f6e61; margin-top: .4rem; }
.recipe__head { max-width: 760px; }
.kv-eyebrow { display: flex; align-items: center; gap: var(--space-1); }
.kv-eyebrow__motif { width: 32px; height: 32px; }
.recipe__title { font-size: 2.25rem; line-height: 1.1; margin-block: 0 var(--space-2) !important; }
@media (min-width: 768px) { .recipe__title { font-size: var(--fs-h1); } }
.kv-meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-3) !important; }
/* Chips wie im Buch (Zeit/Schwierigkeit) */
.kv-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--fs-small);
	padding: 4px 12px 4px 8px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-light);
	color: var(--color-text);
}
.kv-chip__k { font-weight: var(--fw-semibold); }
.kv-beschreibung p { margin: 0; line-height: 1.6; }

.recipe__layout { display: grid; gap: var(--space-6); margin-top: var(--space-6) !important; }
@media (min-width: 1024px) {
	.recipe__layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-6); align-items: start; }
	.recipe__aside { position: sticky; top: 96px; }
}
.recipe__main > * + *, .recipe__aside > * + * { margin-top: var(--space-6) !important; }
.recipe__aside > * + * { margin-top: var(--space-3) !important; }
.recipe__content:empty { display: none; }

.kv-section-title {
	display: flex; align-items: center; gap: var(--space-1);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--color-primary-dark);
	margin: 0 0 var(--space-2);
}
.kv-section-title .kv-ico { width: 24px; height: 24px; }

/* §6.1 Zutaten mit Ei-Bullet (BRAND.md §5) */
.recipe-ingredients { list-style: none; padding: 0; margin: 0; }
.recipe-ingredients li {
	display: flex; align-items: baseline; gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
	line-height: 1.6;
}
.recipe-ingredients li:last-child { border-bottom: none; }
.recipe-ingredients .kv-zutat { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.recipe-ingredients li::before {
	content: "";
	flex-shrink: 0;
	width: 16px; height: 16px;
	transform: translateY(2px);
	background: url("../svg/icon_bullet_egg_24.svg") center / contain no-repeat;
}
.kv-q { font-weight: var(--fw-semibold); }

/* Portionsrechner */
.kv-portionen {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
	margin-bottom: var(--space-2);
	font-size: var(--fs-small);
}
.kv-portionen[hidden] { display: none; }
.kv-portionen__label { font-weight: var(--fw-semibold); }
.kv-portionen__btn {
	width: 44px; height: 44px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--color-primary);
	background: var(--color-bg);
	color: var(--color-primary-dark);
	font: inherit; font-size: 1.25rem; font-weight: var(--fw-bold);
	cursor: pointer;
}
.kv-portionen__btn:hover { background: var(--color-primary-light); color: var(--color-text); }
.kv-portionen__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.kv-portionen__out { min-width: 2ch; text-align: center; font-size: var(--fs-body); font-weight: var(--fw-bold); }
.kv-portionen__hint { flex-basis: 100%; margin: 0; }

/* §6.2 Zubereitung */
.recipe-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.recipe-steps li {
	counter-increment: step;
	position: relative;
	padding-left: 48px;
	margin-bottom: var(--space-3);
	line-height: 1.7;
	min-height: 32px;
}
/* ABW: Ziffer in Ink statt Forest Green (Forest auf Zucchini Pale = 3,1:1). */
.recipe-steps li::before {
	content: counter(step);
	position: absolute; left: 0; top: 0;
	width: 32px; height: 32px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-light);
	color: var(--color-text);
	font-weight: var(--fw-bold);
	font-size: var(--fs-small);
	display: flex; align-items: center; justify-content: center;
}

/* §6.3 Nährwert-Tabelle (in der Sidebar) */
.recipe-nutrition { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.recipe-nutrition th, .recipe-nutrition td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); }
/* ABW: Kopfzeile Ink statt Forest Green (3,1:1 auf Zucchini Pale). */
.recipe-nutrition thead th { background: var(--color-primary-light); color: var(--color-text); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.recipe-nutrition thead th:first-child { border-top-left-radius: var(--radius-sm); }
.recipe-nutrition thead th:last-child { border-top-right-radius: var(--radius-sm); }
.recipe-nutrition tbody th { font-weight: var(--fw-regular); }
.recipe-nutrition td, .recipe-nutrition th:last-child { text-align: right; font-weight: var(--fw-semibold); white-space: nowrap; }
.recipe-nutrition .kv-nw--kcal th, .recipe-nutrition .kv-nw--kcal td { font-weight: var(--fw-bold); }

/* §6.4 Nieren-Hinweis + Ampel (Fläche Bavarian Ice wie im Buch) */
.kv-nieren {
	background: var(--color-accent-light);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}
.kv-nieren .kv-section-title { color: var(--color-accent); }
.kv-ampel { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }
.kv-ampel__item {
	/* 0.1.35: Block statt Flex – sonst wird jeder Textknoten/<strong>/<a> im Punkt eine eigene Spalte (Rezept 117). Icon absolut links. */
	--kv-ampel-pad: 0px;
	position: relative; display: block;
	padding-left: calc(var(--kv-ampel-pad) + 20px + var(--space-1));
	font-size: var(--fs-body); font-weight: var(--fw-semibold);
	line-height: 1.5;
}
.kv-ampel__item .kv-ico { position: absolute; left: var(--kv-ampel-pad); top: calc(var(--kv-ampel-top, 0px) + 0.15em); width: 20px; height: 20px; }
/* ABW (Spec §6.4 Fallback): Amber nur als Rand, Fläche Weiß statt #FFF3CD (nicht in BRAND.md). */
.nutrition-warning {
	background: var(--color-bg);
	border-left: 4px solid var(--color-warn);
	border-radius: var(--radius-sm);
	padding: var(--space-1) var(--space-2);
	font-weight: var(--fw-regular);
}
.kv-ampel__item.nutrition-warning { --kv-ampel-pad: var(--space-2); --kv-ampel-top: var(--space-1); padding-left: calc(var(--space-2) + 20px + var(--space-1)); }
.kv-nieren__rest { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
/* 0.1.49/0.1.50: Nieren-Grafik A – breite Box 96 px oben rechts (float), schmale Box (Mobil und Desktop-Seitenspalte) 52 px in der Titelzeile, damit die Ampel-Liste volle Breite behält. Maßgeblich ist die Boxbreite (Container Query), nicht der Viewport. */
.kv-nieren { display: flow-root; position: relative; container-type: inline-size; container-name: kv-nieren; }
.kv-nieren__motif { float: right; width: 96px; height: 96px; margin: 0 0 var(--space-1) var(--space-2); }
@container kv-nieren (max-width: 559px) {
	.kv-nieren__motif { float: none; position: absolute; top: 10px; right: 14px; width: 52px; height: 52px; margin: 0; }
	.kv-nieren .kv-section-title { padding-right: 60px; min-height: 40px; }
}
.kv-drucken .btn { width: 100%; }

.kv-aehnliche { margin-top: var(--space-8); }
.kv-aehnliche h2 { margin: 0 0 var(--space-3); }

/* Inline-Icons in Fließtext */
.kv-ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* ---------- §5.5 Footer ---------- */
.site-footer-part { margin-top: 0 !important; }
.site-footer { background: var(--color-primary-light); color: var(--color-text); }
.site-footer a { color: var(--color-text); }
.site-footer a:hover { color: var(--color-primary-dark); }
.site-footer__inner {
	display: grid; gap: var(--space-4);
	padding-block: var(--space-6);
}
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); } } /* 0.1.23: 4 Spalten (Marke, Rezepte, Ratgeber, Rechtliches) */
.site-footer__logo-line { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.site-footer__logo { width: 48px; height: 48px; }
.site-footer__wordmark { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.site-footer__tagline { margin: var(--space-2) 0; }
.site-footer__social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.site-footer__social-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; font-weight: var(--fw-semibold); text-decoration: none; }
.site-footer__social-link:hover .site-footer__social-label { text-decoration: underline; }
.site-footer__social-link:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; border-radius: 4px; }
.site-footer__social-icon { width: 40px; height: 40px; border-radius: 50%; background: #2E7D32; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.site-footer__social-link:hover .site-footer__social-icon { background: #1A2E1F; }
.site-footer__heading { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.newsletter-form { display: flex; flex-direction: column; gap: var(--space-1); }
.newsletter-form label { font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.newsletter-form__input {
	font: inherit; min-height: 44px; padding: 8px 16px;
	border: 1px solid var(--color-primary-dark); border-radius: var(--radius-sm);
	background: var(--color-bg); color: var(--color-text);
}
/* ABW: Spec zeigt Primary-Button; Tertiary laut Nutzungstabelle §5.3 („Footer Newsletter“). */
.newsletter-form .btn { align-self: flex-start; background: var(--color-bg); border-color: var(--color-primary-dark); }
/* ABW: Disclaimer in Ink statt Sage Grey – Sage auf Zucchini Pale = 2,2:1. */
.site-footer__disclaimer p { max-width: 720px; font-size: var(--fs-small); line-height: 1.6; margin: 0 0 var(--space-3); }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
	padding-block: var(--space-2);
	border-top: 1px solid var(--color-primary-dark);
	font-size: var(--fs-small);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom nav { display: flex; gap: var(--space-3); }

/* ---------- Seiten / Beiträge ---------- */
.post-meta { font-size: var(--fs-small); color: var(--color-text); }
.post-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }

/* ---------- 0.1.2: Keto-Score (Text-Badge bis zur SVG-Übernahme), Startseite, Platzhalter ---------- */
.kv-score {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1;
	white-space: nowrap;
}
.kv-score__l {
	display: inline-grid; place-items: center;
	min-width: 1.75em; height: 1.75em; padding: 0 4px;
	border-radius: var(--radius-sm);
	background: #2E7D32; color: #FFFFFF; /* A–C: Forest Green / Weiß (Designer-SVG) */
	font-weight: 700;
}
.kv-score--d .kv-score__l, .kv-score--e .kv-score__l { background: #F59E0B; color: #1A2E1F; } /* D–E: Amber / Ink */
.kv-score--gross { font-size: var(--fs-body); }
.kv-score--gross .kv-score__l { font-size: 1.25rem; }
.chip--score { background: transparent; padding-inline: 0; }
.kv-score-wrap { margin: 0 0 var(--space-3) !important; }
.kv-score-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.kv-score-tipp { margin: var(--space-1) 0 0; font-size: var(--fs-small); max-width: 760px; }
.kv-score-wrap__more { font-size: var(--fs-small); }
.kv-skala { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-1); }
.kv-skala__item { display: flex; align-items: center; gap: var(--space-2); }
/* 0.1.47: Keto-Score-Abschnitt bündig mit der Inhaltsbreite wie #nieren-ampel (Inhaber 27.10.) */
.home-score__note { font-size: var(--fs-small); }
.home-hinweis .notice { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-primary-light); }
.home-hinweis h2 { margin-top: 0; }
/* 0.1.56: Kontrast auf Hellgrün #A5D6A7 – Primär-Dunkel hat dort nur 3,1:1, Ink 8,8:1 */
.home-hinweis .notice a { color: var(--color-text); text-decoration: underline; }
.home-hinweis .notice .kv-bildcredit { color: var(--color-text); }
.kv-auswahl--leer { padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
/* Platzhalter für Writer-Texte – sichtbar markiert, bis die Endtexte eingesetzt sind. */
.kv-placeholder { outline: 2px dashed #F59E0B; outline-offset: 4px; }

/* ---------- 0.1.4: Keto-Score-SVGs, Tabellen Startseite/Rezeptübersicht, Filterhilfe ---------- */
.kv-score-img { display: block; height: auto; max-width: 100%; }
.kv-score-img--gross { width: 180px; }
.kv-score-img--klein { width: 96px; }
.kv-score-icon { width: 32px; height: 32px; vertical-align: middle; flex: none; }
.kv-score-table table, .kv-ampel-table table { border-collapse: collapse; width: 100%; max-width: 760px; font-size: var(--fs-small); }
.kv-score-table th, .kv-score-table td, .kv-ampel-table th, .kv-ampel-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--color-border); }
.kv-score-table td:first-child { white-space: nowrap; }
.kv-score-table, .kv-ampel-table { margin: var(--space-3) 0; overflow-x: auto; }
.kv-archiv-intro { max-width: 760px; }
.kv-filterhilfe { margin-top: var(--space-6); max-width: 860px; }
.kv-filterhilfe .notice { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-primary-light); }
.kv-naehrwerte__zusatz { font-size: var(--fs-small); margin-top: var(--space-2); }
.kv-naehrwerte__zusatz p { margin: 0 0 var(--space-1); }
.home-intro ul { max-width: 760px; }
.home-intro ul.kv-vorteile { max-width: none; }

/* ---------- 0.1.8: Grafiken Startseite + Rezeptübersicht (designer/web/grafik-konzept-start-rezepte.md) ---------- */
/* S2 Vorteil-Karten */
.kv-vorteile { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.kv-vorteil { margin: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-2); align-items: start; }
.kv-vorteil__icon { width: 56px; height: 56px; grid-row: span 2; display: block; }
.kv-vorteil__titel { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 4px; }
.kv-vorteil__text { font-size: 0.9375rem; line-height: 1.5; margin: 0; }
@media (min-width: 768px) { .kv-vorteile { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
@media (min-width: 1024px) {
	.kv-vorteile { grid-template-columns: repeat(4, 1fr); }
	.kv-vorteil { display: block; padding: var(--space-3); }
	.kv-vorteil__icon { width: 64px; height: 64px; margin-bottom: var(--space-2); }
}
.kv-zielgruppe { background: #EDF7EE; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: 0.9375rem; max-width: none; }

/* S3/R3/R4 Infografiken: Inline-SVG Desktop/Mobil + Tabelle in <details> */
.kv-grafik { margin: var(--space-3) 0; max-width: 1080px; }
.home-score .kv-grafik, .home-ampel .kv-grafik { max-width: none; } /* Startseite: Grafiken auf volle Inhaltsbreite */
.kv-grafik svg { display: block; width: 100%; height: auto; }
.kv-grafik__mobil { display: none; max-width: 358px; }
@media (max-width: 640px) {
	.kv-grafik__desktop { display: none; }
	.kv-grafik__mobil { display: block; }
}
.kv-grafik__tabelle { margin-top: var(--space-1); font-size: var(--fs-small); }
.kv-grafik__tabelle summary { color: var(--color-link); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.kv-grafik__tabelle summary:hover { text-decoration: underline; }
.kv-grafik__tabelle .kv-score-table, .kv-grafik__tabelle .kv-ampel-table { margin-top: var(--space-1); }
.home-score .kv-grafik + p { margin-top: var(--space-2); }
.home-score__note { background: #FEF3E2; border-left: 6px solid var(--color-warn); border-radius: 12px; padding: var(--space-2) var(--space-3); }

/* S4/R2 Kategorie-Kacheln */
.kv-kacheln__liste { list-style: none; margin: 0; padding: 0; }
.kv-kacheln__liste > li { margin: 0; }
.kv-kachel { display: block; text-decoration: none; color: var(--color-text); }
.kv-kachel__bild { display: block; width: 100%; height: auto; }
.kv-kachel__label { font-weight: var(--fw-bold); }
.kv-kachel__anzahl { font-weight: var(--fw-semibold); color: var(--color-primary-dark); }
.kv-kacheln--start { margin: var(--space-3) 0 var(--space-6); }
.kv-kacheln--start .kv-kacheln__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kv-kacheln--start .kv-kachel { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); height: 100%; transition: box-shadow .15s; }
.kv-kacheln--start .kv-kachel:hover { box-shadow: 0 4px 16px rgba(26, 46, 31, .12); }
.kv-kacheln--start .kv-kachel__bild { aspect-ratio: 1; object-fit: cover; }
.kv-kacheln--start .kv-kachel__text { display: flex; flex-direction: column; padding: 10px 12px; font-size: 0.9375rem; line-height: 1.3; }
.kv-kacheln--start .kv-kachel__anzahl { font-size: var(--fs-small); }
@media (min-width: 641px) {
	.kv-kacheln--start .kv-kacheln__liste { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
	.kv-kacheln--start .kv-kachel { border-radius: var(--radius-lg); }
	.kv-kacheln--start .kv-kachel__bild { aspect-ratio: 16 / 10; }
	.kv-kacheln--start .kv-kachel__text { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-1); padding: 14px 20px; font-size: 1.125rem; }
}
.kv-kacheln--filter { margin: var(--space-1) 0 var(--space-2); }
.kv-kacheln--filter .kv-kacheln__liste { display: flex; gap: 12px; overflow-x: auto; margin-inline: calc(-1 * var(--space-3)); padding: 4px var(--space-3) var(--space-1); scroll-snap-type: x proximity; }
.kv-kacheln--filter .kv-kacheln__liste > li { flex: 0 0 104px; scroll-snap-align: start; }
.kv-kacheln--filter .kv-kachel { text-align: center; font-size: var(--fs-small); line-height: 1.3; }
.kv-kacheln--filter .kv-kachel__bild { aspect-ratio: 1; border-radius: var(--radius-md); border: 3px solid transparent; margin-bottom: var(--space-1); }
.kv-kacheln--filter .kv-kachel:hover .kv-kachel__bild { border-color: var(--color-primary-light); }
.kv-kacheln--filter .kv-kachel.is-active .kv-kachel__bild { border-color: var(--color-primary-dark); }
.kv-kacheln--filter .kv-kachel.is-active .kv-kachel__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kv-kacheln--filter .kv-kachel__text { display: block; }
.kv-kacheln--filter .kv-kachel__label, .kv-kacheln--filter .kv-kachel__anzahl { display: block; }
.kv-kacheln--filter .kv-kachel:focus-visible { outline-offset: 2px; border-radius: var(--radius-md); }
.kv-kacheln__alle { margin: var(--space-1) 0 0; font-size: var(--fs-small); }
.kv-kacheln__alle a { color: var(--color-link); }
@media (min-width: 768px) { .kv-kacheln--filter .kv-kacheln__liste { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); } }
@media (min-width: 1024px) {
	.kv-kacheln--filter .kv-kacheln__liste { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); overflow: visible; margin-inline: 0; padding-inline: 0; }
	.kv-kacheln--filter .kv-kachel { font-size: 0.9375rem; }
}

/* R1 Header-Band + Kopf-Karte der Rezeptübersicht */
.kv-archiv { padding-bottom: var(--space-6); }
.kv-band img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@media (min-width: 641px) { .kv-band img { height: 340px; aspect-ratio: auto; object-position: 50% 60%; } }
.kv-archiv .kv-archiv__inhalt > .kv-archiv__kopf { position: relative; background: var(--color-bg); border-radius: var(--radius-md) var(--radius-md) 0 0; margin: -24px calc(-1 * var(--space-2)) 0; padding: 20px var(--space-2) 0; }
.kv-archiv__kopf h1 { margin-top: 0; }
@media (min-width: 641px) { .kv-archiv .kv-archiv__inhalt > .kv-archiv__kopf { margin-top: -88px; padding: var(--space-4) var(--space-2) var(--space-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }
@media (min-width: 1024px) { .kv-archiv .kv-archiv__inhalt > .kv-archiv__kopf { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); } } /* Container-Padding ≥ 48 px */
.kv-filterhilfe { max-width: 1080px; }
.kv-filterhilfe > p, .kv-filterhilfe > ul, .kv-filterhilfe > .notice, .kv-filterhilfe > h2 { max-width: 860px; }
.kv-archiv > .kv-archiv__inhalt { margin-block-start: 0; }
.kv-archiv > .kv-band { margin-block-start: 0; }
/* Mobil: lange Optionstexte (Keto-Score) dürfen das Select nicht über den Viewport hinaus verbreitern */
.kv-filter__field { max-width: 100%; min-width: 0; }
.kv-filter select { max-width: 100%; }
/* Containing Block für .screen-reader-text (absolut) innerhalb der scrollbaren Kachelleiste – sonst verbreitern sie mobil die Seite */
.kv-kacheln--filter .kv-kacheln__liste { position: relative; }

/* ---------- 0.1.9: Blog – Einzelbeitrag (single.html) + Übersicht /blog/ (archive-post.html) ---------- */
.kv-beitrag__kopf { max-width: 70ch; }
.kv-beitrag__titel { font-size: 2.25rem; line-height: 1.1; margin-block: 0 var(--space-2) !important; }
@media (min-width: 768px) { .kv-beitrag__titel { font-size: var(--fs-h1); } }
.kv-beitrag-meta { font-size: var(--fs-small); color: var(--color-text); margin: 0 0 var(--space-4); }
.kv-beitrag-header { margin: 0 0 var(--space-6) !important; }
.kv-beitrag-header img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* Lesespalte max. 70ch; ab 1024 px Inhaltsverzeichnis rechts (sticky), DOM-Reihenfolge bleibt Kurzantwort → Inhalt → … */
.kv-beitrag__body { font-size: 1.0625rem; line-height: 1.7; max-width: 70ch; }
.kv-beitrag__body > * { margin-block: 0 var(--space-6) !important; }
@media (min-width: 1024px) {
	.kv-beitrag__body { display: grid; grid-template-columns: minmax(0, 70ch) minmax(220px, 280px); column-gap: var(--space-8); justify-content: start; max-width: none; }
	.kv-beitrag__body > * { grid-column: 1; }
	.kv-beitrag__body > .kv-toc { grid-column: 2; grid-row: 1 / span 12; align-self: start; position: sticky; top: 96px; }
}
.kv-beitrag__inhalt > * { margin-block: 0 var(--space-3); }
.kv-beitrag__inhalt h2, .kv-faq h2, .kv-quellen h2 { font-size: 1.75rem; line-height: 1.25; margin: var(--space-6) 0 var(--space-2); scroll-margin-top: 96px; }
.kv-beitrag__inhalt h2:first-child { margin-top: 0; }
.kv-beitrag__inhalt h3 { font-size: var(--fs-h3); line-height: 1.3; margin: var(--space-4) 0 var(--space-1); }
.kv-beitrag__inhalt ul, .kv-beitrag__inhalt ol { padding-left: 1.4em; }
.kv-beitrag__inhalt li + li { margin-top: var(--space-1); }
.kv-beitrag__inhalt a:not(.btn), .kv-faq a, .kv-quellen a, .kv-hinweis a, .kv-kurzantwort a { color: var(--color-link); }
/* 0.1.26 Links grün + unterstrichen, Hover Ink (designer/specs/button-link-farben-2026-10-19.md §5.2) */
.kv-breadcrumbs a, .kv-kacheln__alle a, .kv-grafik__tabelle summary,
.kv-beitrag__inhalt a:not(.btn), .kv-faq a, .kv-quellen a, .kv-hinweis a, .kv-kurzantwort a,
.kv-kommentare .comment-notes a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.kv-breadcrumbs a:hover, .kv-kacheln__alle a:hover,
.kv-beitrag__inhalt a:not(.btn):hover, .kv-faq a:hover, .kv-quellen a:hover, .kv-hinweis a:hover, .kv-kurzantwort a:hover,
.kv-kommentare .comment-notes a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
/* Links auf Bavarian Ice / Mist strong: Ink statt Grün (Grün < 4,5:1) */
.kv-quellen li:target a, .kv-nieren a { color: var(--color-text); }
.kv-ref { font-size: 0.75em; line-height: 0; }
.kv-ref a { text-decoration: none; }
.kv-ref a:hover { text-decoration: underline; }
/* Evidenz-Zeilen (*Gesichert:* / *Hinweise:* / *Unklar:*) aus dem Writer-Format */
.kv-evidenz { background: #F4F8F4; border-left: 4px solid var(--color-primary-light); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: 0.9375rem; }
.kv-beitrag__inhalt .wp-block-button__link.btn { text-decoration: none; }
:target { scroll-margin-top: 96px; }

/* Kurzantwort */
.kv-kurzantwort { background: #EDF7EE; border-left: 6px solid var(--color-primary-dark); border-radius: var(--radius-md); padding: var(--space-3); }
.kv-kurzantwort__label { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--fs-small); color: var(--color-primary-dark); margin: 0 0 var(--space-1); }
.kv-kurzantwort p:not(.kv-kurzantwort__label) { margin: 0; font-size: 1.125rem; line-height: 1.6; }
.kv-kurzantwort p + p:not(.kv-kurzantwort__label) { margin-top: var(--space-1); }

/* Inhaltsverzeichnis */
.kv-toc { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--fs-small); line-height: 1.5; }
.kv-toc__titel { font-weight: var(--fw-bold); margin: 0 0 var(--space-1); }
.kv-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
/* 0.1.10: block statt inline-block – bei inline-block sitzt die Listennummer an der Grundlinie der letzten Zeile; so steht sie an Zeile 1, Folgezeilen hängend eingerückt */
.kv-toc a { color: var(--color-text); display: block; padding-block: 4px; }
.kv-toc a:hover { color: var(--color-primary-dark); }

/* FAQ */
.kv-faq h2 { margin-top: 0; }
.kv-faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin: 0 0 var(--space-1); background: var(--color-bg); }
.kv-faq__item summary { cursor: pointer; font-weight: var(--fw-semibold); padding: 12px var(--space-2); min-height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.kv-faq__item summary::-webkit-details-marker { display: none; }
.kv-faq__item summary::before { content: "+"; flex: none; width: 1.25em; font-weight: var(--fw-bold); color: var(--color-primary-dark); }
.kv-faq__item[open] summary::before { content: "–"; }
.kv-faq__antwort { padding: 0 var(--space-2) var(--space-2) calc(var(--space-2) + 1.25em + var(--space-1)); }
.kv-faq__antwort p { margin: 0 0 var(--space-1); }

/* Medizinischer Hinweis (wie Hinweis-Box Startseite) */
.kv-hinweis { display: flex; gap: var(--space-2); align-items: flex-start; background: #FEF3E2; border-left: 6px solid var(--color-warn); border-radius: 12px; padding: var(--space-2) var(--space-3); font-size: 0.9375rem; line-height: 1.6; }
.kv-hinweis__icon { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.kv-hinweis__titel { font-weight: var(--fw-bold); margin: 0 0 4px; }
.kv-hinweis p { margin: 0; }
.kv-hinweis p + p { margin-top: var(--space-1); }

/* Quellen */
.kv-quellen ol { padding-left: 2em; margin: 0; font-size: var(--fs-small); line-height: 1.55; }
.kv-quellen li { margin-bottom: var(--space-1); overflow-wrap: anywhere; scroll-margin-top: 96px; }
/* 0.1.74: lange Klartext-URLs (z. B. DSE §13) brechen um, kein Querscroll bei 390 px */
.entry-content a { overflow-wrap: anywhere; }
.kv-quellen li:target { background: var(--color-accent-light); border-radius: 4px; }

/* CTA Rezepte */
.kv-cta { background: var(--color-accent-light); border-radius: var(--radius-md); padding: var(--space-3); }
.kv-cta__titel { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.3; margin: 0 0 var(--space-1); }
.kv-cta p { margin: 0 0 var(--space-2); }
.kv-cta p:last-child { margin: 0; }

/* Übersicht /blog/ */
.kv-blog__titel { font-size: 2.25rem; line-height: 1.1; margin: 0 0 var(--space-4) !important; }
@media (min-width: 768px) { .kv-blog__titel { font-size: var(--fs-h1); } }
.kv-inline-cta .btn { text-decoration: none; }
.kv-post-card__teaser { font-size: 0.9375rem; line-height: 1.55; margin: var(--space-1) 0 var(--space-2); }

/* ---------- 0.1.11: Leitfaden-Seiten (page-leitfaden.html: /ernaehrung/, /intervallfasten/) + Footer-Links ---------- */
/* Tabelle im Fließtext (gleiche Optik wie die Ampel-Tabelle der Rezeptübersicht), mobil waagerecht scrollbar */
.kv-beitrag__inhalt .kv-tabelle { margin: var(--space-3) 0; overflow-x: auto; }
.kv-beitrag__inhalt .kv-tabelle table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); line-height: 1.45; }
.kv-beitrag__inhalt .kv-tabelle th, .kv-beitrag__inhalt .kv-tabelle td { padding: 8px 12px; text-align: left; border: 0; border-bottom: 1px solid var(--color-border); }
.kv-beitrag__inhalt .kv-tabelle thead th { border-bottom: 2px solid var(--color-primary-dark); white-space: nowrap; }
/* Merkkasten („> …“ im Writer-Text): Warnfarbe wie der Medizinische Hinweis, ohne Icon */
.kv-merkbox { background: #FEF3E2; border-left: 6px solid var(--color-warn); border-radius: 12px; padding: var(--space-2) var(--space-3); font-size: 0.9375rem; line-height: 1.6; margin: var(--space-3) 0 !important; }
.kv-merkbox p { margin: 0; }
.kv-merkbox p + p { margin-top: var(--space-1); }
/* verschachtelte Liste (Unterpunkte) */
.kv-beitrag__inhalt li > ul { margin-top: var(--space-1); }
/* Footer, Spalte Ketovavaria: Über uns, Kontakt */
.site-footer__links { margin-top: var(--space-2) !important; }
.site-footer__links a { display: inline-block; padding-block: 4px; }

/* ---------- 0.1.12: Seiten-Header für normale Seiten mit Beitragsbild (page.html: Über uns, Kontakt, Rechtsseiten) ---------- */
/* Titel + Bild wie beim Leitfaden-Kopf, in der Inhaltsspalte (760 px); ohne Kurzantwort/Inhaltsverzeichnis */
/* mobil kleiner + Silbentrennung: lange Einzelwörter („Datenschutzerklärung“) brachen bei 2.25rem mitten im Wort um */
.kv-seite-mit-header .site-main > .wp-block-post-title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); line-height: 1.1; margin-block: 0 var(--space-4) !important; hyphens: auto; overflow-wrap: normal; }
@media (min-width: 768px) { .kv-seite-mit-header .site-main > .wp-block-post-title { font-size: var(--fs-h1); } }
.kv-seite-header { margin-block: 0 var(--space-6) !important; }
.kv-seite-header img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* ---------- 0.1.13 Nieren-Ampel konsequent (Kochbuch-Grenzen, Plugin 0.3.7) ----------
   Karten-Chips K⁺/P: Farbe nach Stufe statt immer Zucchini Pale; Stufe zusätzlich als Icon + Screenreader-Text.
   Wie .nutrition-warning: Fläche Weiß + farbiger Rand (kein #FFF3CD, nicht in BRAND.md). */
.chip--ampel .kv-ico { width: 16px; height: 16px; }
.chip--ampel.is-ok { background: var(--color-primary-light); }
.chip--ampel.is-achtung { background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-warn); }
.chip--ampel.is-stop { background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-error); }
/* Rezeptseite: „hoch“ mit rotem Rand (bisher wie „mittel“ Amber). */
.kv-ampel__item.is-stop { border-left-color: var(--color-error); }

/* ---------- 0.1.15 Affiliate: Werbehinweis-Kasten (Plugin 0.3.9) + Footer-Hinweis ----------
   Kasten unter Zutaten, wenn das Rezept Affiliate-Links enthält; Fläche Weiß + Rand wie .nutrition-warning (BRAND.md). */
.kv-affiliate {
	margin-block: var(--space-4) 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}
.kv-affiliate p { margin-block: 0; }
.kv-affiliate p + p { margin-block: var(--space-1) 0; }
.kv-affiliate strong { color: var(--color-text); }
.site-footer__affiliate { font-size: 0.8125rem; color: var(--color-text-secondary); max-width: 60ch; } /* 0.1.18: text-muted (#7C8A7E) auf Weiß = 2.2:1 → Lighthouse-Fehler; secondary (#55635A) = ~7:1 */

/* ---------- 0.1.16 Startseite: Trennband Kacheln → Rezept-Grid (designer/web/startseite-trennband.md §3.2) ----------
   Rauten-SVG (dekorativ, aria-hidden) + Eyebrow „Frisch aus der Keto-Küche“ zwischen
   ketovaria/kategorie-kacheln (variante start) und ketovaria/rezepte-auswahl. */
.kv-kacheln--start { margin-bottom: 0; }
.kv-trennband {
	display: flex; flex-direction: column; align-items: center;
	gap: .75rem;
	margin: 3rem 0 2.5rem;
}
.kv-trennband__rauten { width: min(480px, 80%); height: auto; display: block; }
.kv-trennband__text {
	margin: 0;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-weight: 600; font-size: .875rem; line-height: 1.4;
	letter-spacing: .02em; text-transform: uppercase;
	color: #2E7D32;
}
@media (max-width: 640px) {
	.kv-trennband { margin: 2rem 0 1.75rem; gap: .625rem; }
	.kv-trennband__rauten { width: min(320px, 86%); }
}

/* ══════════════════════════════════════════════════════════════════════
   0.1.17 · Rezeptfilter-Redesign (Chip-UI im Plugin ketovaria-rezepte 0.4.0)
   Referenz: designer/web/mockup/rezeptfilter_nachher.html + web/rezeptfilter-redesign.md
   Farben/Maße 1:1 aus dem Mockup; Mobil-Breakpoint 782px (Spez). */
.kv-archiv__inhalt {
	--kvf-green:#43A047; --kvf-forest:#2E7D32; --kvf-pale:#A5D6A7; --kvf-mist:#EDF7EE; --kvf-mist2:#DBEFDC;
	--kvf-blue:#0063B6; --kvf-ice:#D6E9F8; --kvf-ink:#1A2E1F; --kvf-sage:#7C8A7E; --kvf-hair:#D4D9D4;
	--kvf-ok:#388E3C; --kvf-amber:#F59E0B; --kvf-red:#D32F2F; --kvf-off:#55635A;
}
.kvf { border:1px solid var(--kvf-hair); border-radius:16px; background:#fff; padding:16px; display:grid; gap:16px; margin:var(--space-2) 0 var(--space-4); }
.kvf__row { display:grid; grid-template-columns:8.5rem 1fr; gap:8px 16px; align-items:start; }
.kvf__row > :last-child { min-width:0; }
.kvf__label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--kvf-forest); padding-top:9px; }
.kvf__chips { display:flex; flex-wrap:wrap; gap:8px; }
.kvf .chip { appearance:none; border:1.5px solid var(--kvf-hair); background:#fff; color:var(--kvf-ink); border-radius:999px;
	padding:8px 14px; font:600 14px/1.2 Inter,inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.kvf .chip small { font-weight:400; color:var(--kvf-ink); opacity:.75; }
.kvf .chip:hover { background:var(--kvf-mist); border-color:var(--kvf-forest); }
.kvf .chip[aria-pressed="true"] { background:var(--kvf-forest); border-color:var(--kvf-forest); color:#fff; }
.kvf .chip[aria-pressed="true"] small { color:#fff; opacity:.9; }
.kvf .chip:focus-visible, .kvf .badge:focus-visible, .kvf__reset:focus-visible, .kvf__x:focus-visible, .kvf__more:focus-visible, .kvf__retry:focus-visible {
	outline:3px solid var(--kvf-blue); outline-offset:2px; }
.kvf__x { border:none; background:none; padding:0 0 0 2px; display:inline-flex; color:inherit; cursor:pointer; }
/* Keto-Score-Badges */
.kvf .badge { appearance:none; display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--kvf-hair); background:#fff;
	border-radius:8px; padding:5px 12px 5px 6px; cursor:pointer; font:700 15px/1 Inter,inherit; color:var(--kvf-forest); }
.kvf .badge svg { display:block; border-radius:4px; }
.kvf .badge small { font:400 12px/1.2 Inter,inherit; color:var(--kvf-ink); opacity:.8; max-width:9.5ch; }
.kvf .badge[aria-pressed="true"] { border-color:var(--kvf-forest); border-width:2px; background:var(--kvf-mist); }
.kvf .badge.d-e { color:var(--kvf-ink); }
/* Nieren-Ampel */
.kvf .ampel { display:flex; flex-wrap:wrap; gap:8px 24px; }
.kvf .ampel__group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kvf .ampel__name { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--kvf-ink); }
.kvf .ampel__name svg { color:var(--kvf-forest); }
.kvf .dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.kvf .dot.ok { background:var(--kvf-ok); } .kvf .dot.amber { background:var(--kvf-amber); } .kvf .dot.red { background:var(--kvf-red); }
.kvf .chip.on-ok { border-color:var(--kvf-ok); background:#EAF4EA; color:var(--kvf-ink); }
.kvf .chip.on-amber { border-color:#B45309; background:#FEF3E2; color:var(--kvf-ink); }
.kvf .chip.on-red { border-color:var(--kvf-red); background:#FAE6E6; color:var(--kvf-ink); }
.kvf .chip.on-ok[aria-pressed="true"], .kvf .chip.on-amber[aria-pressed="true"], .kvf .chip.on-red[aria-pressed="true"] { color:#fff; }
/* Meta-Zeile: Aktiv-Chips + Reset + Ergebniszähler */
.kvf__meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; border-top:1px solid var(--kvf-hair); padding-top:12px; }
.kvf__active { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:var(--kvf-ink); }
.kvf__tag { display:inline-flex; align-items:center; gap:6px; background:var(--kvf-mist2); border:1px solid var(--kvf-pale); border-radius:999px; padding:4px 8px 4px 12px; font-size:13px; font-weight:600; }
.kvf__reset { display:inline-flex; align-items:center; gap:6px; border:none; background:none; color:var(--kvf-blue); font:600 14px Inter,inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.kvf__count { margin:0; font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.kvf__count.is-loading { opacity:.55; }
.kvf .spinner { width:14px; height:14px; border:2px solid var(--kvf-pale); border-top-color:var(--kvf-forest); border-radius:50%; display:inline-block; animation:kvf-sp 1s linear infinite; }
@keyframes kvf-sp { to { transform:rotate(360deg); } }
.kvf__err { margin:0; font-size:14px; color:var(--kvf-red); }
.kvf__retry { border:1.5px solid currentColor; background:none; color:inherit; border-radius:999px; font:600 13px Inter,inherit; padding:4px 12px; cursor:pointer; }
/* Skeleton-Ladezustand + „Mehr laden“ in der Ergebnisliste */
.kvf-skel { display:contents; }
.recipe-card.skel .recipe-card__media { aspect-ratio:16/10; }
.recipe-card.skel .recipe-card__body > * { visibility:hidden; }
.recipe-card.skel .recipe-card__body { position:relative; }
.kvf-skel__t, .kvf-skel__s { position:absolute; left:16px; height:14px; border-radius:4px; background:linear-gradient(90deg,#EEF2EE 25%,#E2EAE2 50%,#EEF2EE 75%); background-size:200% 100%; animation:kvf-sk 1.2s infinite; }
.kvf-skel__t { top:20px; width:70%; }
.kvf-skel__s { top:44px; width:50%; height:10px; }
.recipe-card.skel .recipe-card__media { background:linear-gradient(90deg,#EEF2EE 25%,#E2EAE2 50%,#EEF2EE 75%); background-size:200% 100%; animation:kvf-sk 1.2s infinite; }
@keyframes kvf-sk { to { background-position:-200% 0; } }
.kvf__more-wrap { text-align:center; margin:var(--space-4) 0 0; grid-column:1/-1; }
/* „Mehr laden“ wie „Rezept lesen“ (btn--tertiary): grüne Kontur, weißer Grund (Inhaber 18.10.) */
.btn.kvf__more { background-color:#FFFFFF; color:var(--color-primary-dark); border-color:var(--color-primary); min-width:140px; }
.btn.kvf__more:hover { background-color:var(--color-primary-light); border-color:var(--color-primary-dark); color:var(--color-text); }
.btn.kvf__more:focus { background-color:#FFFFFF; color:var(--color-primary-dark); }
.btn.kvf__more:focus-visible { outline:3px solid var(--color-primary-dark); outline-offset:2px; }
.btn.kvf__more:focus-visible:hover { background-color:var(--color-primary-light); color:var(--color-text); }
.kvf-leer { grid-column:1/-1; }
/* Panel „Feiner filtern“: Desktop immer offen, Mobil Details (782px, Spez) */
.kvf__panel { display:contents; }
.kvf__panel > summary { display:none; }
.kvf__panel > summary svg:last-of-type { transition:transform .15s; }
.kvf__panel[open] > summary svg:last-of-type { transform:rotate(180deg); }
@media (max-width:781px) {
	.kvf { padding:12px; gap:12px; }
	.kvf__row { grid-template-columns:1fr; gap:6px; }
	.kvf__label { padding-top:0; }
	.kvf__scroll { overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
	.kvf__scroll .kvf__chips { flex-wrap:nowrap; }
	.kvf__scroll .chip { scroll-snap-align:start; flex:none; }
	.kvf__panel { display:block; border:1px solid var(--kvf-hair); border-radius:12px; background:var(--kvf-mist); }
	.kvf__panel > summary { display:flex; align-items:center; gap:8px; list-style:none; cursor:pointer; padding:12px 14px; font:700 15px Inter,inherit; color:var(--kvf-forest); }
	.kvf__panel > summary::-webkit-details-marker { display:none; }
	.kvf__panel > summary .cnt { background:var(--kvf-forest); color:#fff; border-radius:999px; font-size:12px; padding:2px 8px; }
	.kvf__panel[open] > summary { border-bottom:1px solid var(--kvf-pale); }
	.kvf__panel .kvf__inner { display:grid; gap:16px; padding:14px; }
	.kvf .ampel { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
	.kvf .spinner, .kvf-skel__t, .kvf-skel__s, .recipe-card.skel .recipe-card__media { animation:none; }
}

/* SEC-1 (18.10.2026): Kommentare – sichtbar, barrierearm, ohne Avatare */
.kv-kommentare { max-width: 720px; margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.kv-kommentare .wp-block-comments-title { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.kv-kommentar { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.kv-kommentar .wp-block-comment-author-name { font-weight: var(--fw-semibold); }
.kv-kommentar .wp-block-comment-date { font-size: var(--fs-small); color: var(--color-text); }
.kv-kommentare .comment-reply-title { font-size: var(--fs-h3); margin: var(--space-4) 0 var(--space-2); }
.kv-kommentare .comment-notes, .kv-kommentare .logged-in-as { font-size: var(--fs-small); color: var(--color-text); }
.kv-kommentare .comment-notes a { color: var(--color-link); text-decoration: underline; }
.kv-kommentare .comment-form label { display: block; font-weight: var(--fw-semibold); margin-bottom: 4px; }
.kv-kommentare .comment-form input[type="text"], .kv-kommentare .comment-form input[type="email"], .kv-kommentare .comment-form input[type="url"], .kv-kommentare .comment-form textarea {
	width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: var(--color-text); background: var(--color-bg);
	border: 1px solid #8A968C; border-radius: var(--radius-sm);
}
.kv-kommentare .comment-form .comment-form-cookies-consent label { display: inline; font-weight: var(--fw-regular); }
.kv-kommentare .comment-form .form-submit .submit {
	padding: 12px 24px; font: inherit; font-weight: var(--fw-semibold); color: #fff; background: var(--color-primary-dark);
	border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.kv-kommentare .comment-form .form-submit .submit:hover { background: var(--color-text); }
.kv-kommentare .comment-form :focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; }

/* Footer "Made with love in Munich" — 2026-10-24 (Inhaber-Auftrag) */
.site-footer__made { width: 100%; text-align: center; }
.site-footer__heart { color: #2E7D32; vertical-align: -2px; }

/* 0.1.53/0.1.55: „Neu auf Social Media“ (Block ketovaria/social-neu, Rezepte 0.5.21/0.5.23) – nutzt recipe-grid/recipe-card */
h2.kv-trennband__text { margin: 0; }
.kv-social__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kv-social__text { margin: 0 0 var(--space-2); font-weight: var(--fw-semibold); line-height: 1.4; color: var(--color-text); }
.kv-social__fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .875rem; color: var(--color-text-muted, #5f6b63); }
.kv-social__kanaele { list-style: none; margin: 0; padding: 0; display: flex; gap: .375rem; }
.kv-social__kanal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-primary-dark, #2E7D32); border: 1px solid var(--color-border, #dfe7e0); }
.kv-social__kanal:hover, .kv-social__kanal:focus-visible { background: #EAF5EB; }
.kv-social__text a { color: inherit; text-decoration: none; }
.kv-social__text a:hover, .kv-social__text a:focus-visible { text-decoration: underline; }
.recipe-card__media a { display: block; }

/* 0.1.56: Social-Karten – Rezept-/Beitragsname als sichtbarer Linktext (SEO-Audit 29.10.) */
.kv-social__text { font-weight: var(--fw-regular, 400); }
.kv-social__ziel { margin: 0 0 var(--space-2); font-weight: var(--fw-semibold, 600); line-height: 1.35; }
.kv-social__ziel a { color: var(--color-primary-dark, #2E7D32); }
/* 0.1.56: Einstieg & Ratgeber */
.kv-ratgeber-links { list-style: none; margin: var(--space-3, 1.5rem) 0 0; padding: 0; display: grid; gap: var(--space-2, 1rem); }
.kv-ratgeber-links li { display: flex; flex-direction: column; gap: .25rem; padding: var(--space-2, 1rem); border: 1px solid var(--color-border, #dfe7e0); border-radius: 12px; }
.kv-ratgeber-links a { font-weight: var(--fw-semibold, 600); color: var(--color-primary-dark, #2E7D32); }
.kv-ratgeber-links span { color: var(--color-text-muted); font-size: .9375rem; }
@media (min-width: 768px) { .kv-ratgeber-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kv-ratgeber-links { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================================
   0.1.59 Startseite Variante A (designer/startseite-redesign-2026-10-30/spec.md)
   Alles unter .kv-start (Startseite) – außer Footer (global, Spec §6 „Footer: Mist, 4 Spalten → mobil 2“).
   ===================================================================== */
.kv-start { --ink: #1A2E1F; --mist: #EDF7EE; --meta: #4A5A4E; --hair: #D4D9D4; }
@media (min-width: 1024px) {
	.kv-start .container { max-width: calc(1120px + 2 * var(--space-4)); padding-inline: var(--space-4); }
}
.kv-start .section { padding-block: var(--space-8); }
.kv-start .section--tight { padding-block: var(--space-6); }
@media (max-width: 700px) { .kv-start .section, .kv-start .section--tight { padding-block: var(--space-6); } }
.kv-start h2 { font-size: 1.75rem; line-height: 1.2; font-weight: var(--fw-bold); margin: 0; }
@media (max-width: 700px) { .kv-start h2 { font-size: 1.5rem; } }
.kv-start .eyebrow { font-size: 0.8125rem; margin: 0 0 4px; }
.kv-sh { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-3); }
.kv-sh__meta { margin: 0; font-size: 0.9375rem; color: var(--meta); }
.kv-sh__meta a { color: var(--color-link); text-decoration: underline; }
@media (max-width: 700px) { .kv-sh { flex-direction: column; align-items: flex-start; } }
.kv-start .section__more { margin: var(--space-3) 0 0; }

/* --- Hero A: Bild vollflächig, Claim auf Ink-Verlauf. Verlauf liegt über Himmel/Bergen (oben bzw. unten),
       damit die Familie frei bleibt; weißer Text immer auf ≥ 78 % Ink (≥ 7:1 auch über hellem Himmel). --- */
.kv-hero--full { position: relative; margin: 0 !important; background: var(--ink); color: #FFFFFF; overflow: hidden; }
.kv-hero__media { position: relative; }
.kv-hero__bild img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 686; object-fit: cover; object-position: 50% 35%; }
.kv-hero__verlauf { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(26, 46, 31, 1) 0, rgba(26, 46, 31, 0.6) 14%, rgba(26, 46, 31, 0) 32%); }
.kv-hero__credit { position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 2px 8px; border-radius: var(--radius-sm); background: rgba(26, 46, 31, 0.85); color: #FFFFFF; font-size: 0.75rem; line-height: 1.4; }
.kv-hero__inhalt { position: relative; padding-block: var(--space-1) var(--space-4); }
.kv-hero--full .kv-hero__kicker { font-size: 0.8125rem; line-height: 1.4; font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 var(--space-1); }
.kv-hero__claim { font-size: 2.25rem; line-height: 1.1; font-weight: var(--fw-bold); margin: 0 0 var(--space-2); color: #FFFFFF; }
.kv-hero__zeile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.kv-hero__lead { margin: 0; font-size: 1rem; line-height: 1.5; max-width: 600px; color: #FFFFFF; }
.kv-hero__btn { background: #FFFFFF; color: var(--color-primary-dark); font-size: 1.0625rem; min-height: 48px; }
.kv-hero__btn:hover { background: var(--mist); color: var(--ink); }
.kv-hero__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 1023px) {
	.kv-hero__bild img { max-height: 460px; }
	.kv-hero__credit { bottom: auto; top: 8px; }
}
@media (min-width: 1024px) {
	.kv-hero--full { min-height: 640px; }
	.kv-hero__media { position: absolute; inset: 112px 0 0 0; }
	.kv-hero__bild, .kv-hero__bild img { width: 100%; height: 100%; }
	.kv-hero__bild img { aspect-ratio: auto; object-position: 50% 30%; }
	.kv-hero__verlauf { top: -112px; background: linear-gradient(180deg, rgba(26, 46, 31, 1) 0, rgba(26, 46, 31, 1) 112px, rgba(26, 46, 31, 0.8) 200px, rgba(26, 46, 31, 0.78) 240px, rgba(26, 46, 31, 0) 320px); }
	.kv-hero__inhalt { padding-block: var(--space-6) 0; }
	.kv-hero__claim { font-size: clamp(2.5rem, 4.4vw, 3rem); margin-bottom: var(--space-3); }
	.kv-hero__zeile { flex-direction: row; align-items: center; gap: var(--space-4); }
	.kv-hero__lead { font-size: 1.125rem; }
	.kv-hero__btn { flex: none; }
}

/* --- Was brauchst du heute? (Bedarf, Saison-Kachel per Template-Bedingung) --- */
.kv-bedarf__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 701px) { .kv-bedarf__liste { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
@media (min-width: 1024px) {
	.kv-bedarf__liste { grid-template-columns: repeat(3, 1fr); }
	.kv-bedarf--saison .kv-bedarf__liste { grid-template-columns: repeat(4, 1fr); }
}
.kv-bedarf__item { margin: 0; display: flex; }
.kv-bedarf__link { display: block; width: 100%; box-sizing: border-box; padding: var(--space-3); border-radius: var(--radius-md); border-left: 6px solid var(--color-primary); background: var(--mist); color: var(--ink); text-decoration: none; }
.kv-bedarf__item--niere .kv-bedarf__link { background: var(--color-accent-light); border-left-color: var(--color-accent); }
.kv-bedarf__item--saison .kv-bedarf__link { background: #FEF3E2; border-left-color: var(--color-warn); }
.kv-bedarf__icon { display: block; font-size: 1.75rem; line-height: 1; }
.kv-bedarf__bild { display: block; width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; }
.kv-bedarf__titel { font-size: 1.25rem; line-height: 1.3; font-weight: var(--fw-semibold); margin: var(--space-1) 0 4px; }
.kv-bedarf__text { margin: 0; font-size: 0.9375rem; }
.kv-bedarf__mehr { display: inline-block; margin-top: var(--space-1); font-weight: var(--fw-semibold); text-decoration: underline; color: var(--color-primary-dark); }
.kv-bedarf__item--niere .kv-bedarf__mehr, .kv-bedarf__item--saison .kv-bedarf__mehr { color: var(--ink); }
.kv-bedarf__link:hover .kv-bedarf__titel { text-decoration: underline; }
.kv-bedarf__link:focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; }
@media (max-width: 700px) {
	.kv-bedarf__link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); min-height: 56px; }
	.kv-bedarf__titel { margin: 0; font-size: 1.125rem; }
	.kv-bedarf__bild { width: 28px; height: 28px; }
	.kv-bedarf__text, .kv-bedarf__mehr { display: none; }
}

/* --- Intro (SEO-Paket 29.10., Text unverändert) --- */
.kv-intro { max-width: calc(760px + 2 * var(--space-4)) !important; }
.kv-intro h2 { margin-bottom: var(--space-2); }
.kv-intro .kv-kurzantwort { padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); }
.kv-intro .kv-kurzantwort p:not(.kv-kurzantwort__label) { font-size: 1rem; }
.kv-intro > p { margin: 0; line-height: 1.6; }
.kv-intro a { color: var(--color-link); text-decoration: underline; }

/* --- Neu & beliebt: Reiter; Karten gleich hoch (recipe-card ist flex-column) --- */
.kv-tabs__liste { display: flex; gap: var(--space-1); }
.kv-js .kv-tabs__liste[hidden] { display: flex; }
.kv-tabs__tab { font: inherit; font-size: 0.875rem; font-weight: var(--fw-semibold); min-height: 40px; padding: 6px 16px; border-radius: var(--radius-pill); border: 2px solid var(--color-primary-dark); background: #FFFFFF; color: var(--color-primary-dark); cursor: pointer; }
.kv-tabs__tab[aria-selected="true"] { background: var(--color-primary-dark); color: #FFFFFF; }
.kv-tabs__tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.kv-tabs__ph { font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.kv-tabs__panel + .kv-tabs__panel { margin-top: var(--space-4); }
.kv-js [data-kv-tabs] .kv-tabs__ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kv-js [data-kv-tabs]:not(.is-tabs) .kv-tabs__panel ~ .kv-tabs__panel { display: none; }
.kv-js [data-kv-tabs] .kv-tabs__panel + .kv-tabs__panel { margin-top: 0; }
@media (max-width: 700px) {
	/* Mobil: Karten als horizontale Scroll-Reihe (78 % Breite) */
	.kv-start .kv-reihe, .kv-start .kv-social { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-1); }
	.kv-start .kv-reihe > li, .kv-start .kv-social > li { scroll-snap-align: start; }
}

/* --- Am meisten nachgekocht (Daten: kv-nachgekocht) --- */
.kv-start-band { background: var(--mist); }
.kv-rank { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 701px) { .kv-rank { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: var(--space-2) var(--space-6); } }
.kv-rank__item { display: flex; align-items: center; gap: var(--space-2); background: #FFFFFF; border-radius: var(--radius-md); padding: var(--space-2); margin: 0; }
.kv-rank__nr { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 2px; border-radius: 4px; transform: rotate(45deg); background: var(--color-primary-dark); color: #FFFFFF; font-weight: var(--fw-bold); }
.kv-rank__nr b { transform: rotate(-45deg); }
.kv-rank__item:nth-child(n+4) .kv-rank__nr { background: #FFFFFF; border: 2px solid var(--color-primary-light); color: var(--color-primary-dark); }
.kv-rank__titel { flex: 1; font-weight: var(--fw-semibold); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kv-rank__titel:hover { color: var(--color-primary-dark); }
.kv-rank__zahl { font-size: 0.875rem; white-space: nowrap; }
.kv-rank__leer { margin: 0; padding: var(--space-3); background: #FFFFFF; border-radius: var(--radius-md); max-width: 760px; }
.kv-rank__mehr { margin: var(--space-3) 0 0; }
.kv-rank__mehr a { color: var(--color-link); font-weight: var(--fw-semibold); text-decoration: underline; }
@media (max-width: 700px) { .kv-rank__item:nth-child(n+6) { display: none; } }

/* --- Zuletzt auf Social (Plugin-Block social-neu, Sync unverändert): Kopf wie übrige Abschnitte, Bild 1:1 --- */
.kv-start .home-social { padding-block: var(--space-8); }
@media (max-width: 700px) { .kv-start .home-social { padding-block: var(--space-6); } }
.kv-start .home-social .kv-trennband { flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.kv-start .home-social .kv-trennband__rauten { display: none; }
.kv-start .home-social .kv-trennband__text { font-size: 1.75rem; line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; color: var(--ink); }
@media (max-width: 700px) { .kv-start .home-social .kv-trennband__text { font-size: 1.5rem; } }
.kv-start .kv-social .recipe-card__media, .kv-start .kv-social__img { aspect-ratio: 1 / 1; }
.kv-start .kv-social__img { height: 100%; }
.kv-start .kv-social__kanaele { display: none; }

/* --- Einstieg & Ratgeber --- */
.kv-artikel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 701px) { .kv-artikel { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
.kv-artikel__item { margin: 0; display: flex; }
.kv-artikel__item a { display: block; width: 100%; padding: var(--space-3); border: 1px solid var(--hair); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
.kv-artikel__item h3 { font-size: 1.125rem; line-height: 1.3; font-weight: var(--fw-semibold); margin: 0; color: var(--color-primary-dark); text-decoration: underline; }
.kv-artikel__item p { margin: 4px 0 0; font-size: 0.9375rem; }
.kv-artikel__item--niere a { background: var(--color-accent-light); border-color: transparent; }
.kv-artikel__item--niere h3 { color: var(--ink); }
.kv-artikel__item a:hover h3 { color: var(--ink); }
.kv-ratgeber-links--kompakt { margin-top: var(--space-2); }
@media (min-width: 701px) { .kv-ratgeber-links--kompakt { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }
.kv-ratgeber-links--kompakt li { border-style: dashed; }
.kv-ratgeber-links--kompakt a { text-decoration: underline; }
.kv-ratgeber-links--kompakt span { font-size: 0.9375rem; }

/* --- Erklärblöcke Keto-Score / Nieren-Ampel (SEO-Paket, Anker #keto-score / #nieren-ampel bleiben) --- */
.kv-erklaer { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding-bottom: var(--space-6); }
@media (min-width: 1024px) { .kv-erklaer { grid-template-columns: 1fr 1fr; align-items: start; } }
.kv-erklaer__karte { border: 1px solid var(--hair); border-radius: var(--radius-md); padding: var(--space-3); scroll-margin-top: 96px; }
.kv-erklaer__karte--niere { background: var(--color-accent-light); border-color: transparent; }
.kv-start .kv-erklaer__karte h2 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 var(--space-1); }
.kv-erklaer__karte p { margin: 0 0 var(--space-2); font-size: 0.9375rem; }
.kv-erklaer__karte p:last-child { margin-bottom: 0; }
.kv-erklaer__karte a { color: var(--color-link); text-decoration: underline; }
.kv-erklaer__karte--niere a { color: var(--ink); }
.kv-erklaer__grafik { margin: 0 0 var(--space-2); }
.kv-erklaer__grafik > summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--color-primary-dark); text-decoration: underline; min-height: 32px; }
.kv-erklaer__karte--niere .kv-erklaer__grafik > summary { color: var(--ink); }
.kv-erklaer__grafik .kv-grafik { margin: var(--space-2) 0 0; }
.kv-erklaer__grafik svg { width: 100%; height: auto; }

/* --- Newsletter (Platzhalter, kein Formular) --- */
.kv-newsletter { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--color-primary-dark); color: #FFFFFF; }
@media (min-width: 701px) { .kv-newsletter { grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-6); } }
.kv-newsletter h2, .kv-newsletter .eyebrow { color: #FFFFFF; }
.kv-newsletter__feld { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-1); border-radius: var(--radius-pill); background: #FFFFFF; opacity: 0.85; }
.kv-newsletter__feld span { flex: 1; padding: 8px 16px; color: #55635A; }
.kv-newsletter__feld b { padding: 8px 24px; border-radius: var(--radius-pill); background: var(--ink); color: #FFFFFF; }
.kv-newsletter__info { margin: var(--space-1) 0 0; font-size: 0.8125rem; color: #FFFFFF; }

/* --- Medizinischer Hinweis: Amber-Kasten, kompakt, ohne Bild --- */
.kv-hinweis-sec { padding-bottom: var(--space-8); }
.kv-hinweis.kv-hinweis--warn { display: block; border-left-width: 6px; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
.kv-start .kv-hinweis--warn .kv-hinweis__titel { font-size: 1rem; line-height: 1.4; margin: 0 0 4px; }
.kv-hinweis--warn a { color: var(--ink) !important; text-decoration: underline; }

/* --- Footer (global): Zucchini Mist, 4 Spalten → mobil 2 (Marke volle Breite) --- */
.site-footer { background: #EDF7EE; }
.site-footer__inner { grid-template-columns: 1fr 1fr; }
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 1024px) {
	.site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.site-footer__brand { grid-column: auto; }
}
.site-footer__col ul a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__bottom { border-top-color: #D4D9D4; }