/*
Theme Name: NATURKOST BY MAIKEN
Theme URI: https://www.digitalminds.ch
Author: Digitalminds Studios
Description: Massgeschneidertes Block Theme für NATURKOST BY MAIKEN – natürliches Hunde- und Katzenfutter aus der Schweiz.
Version: 1.20.15
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naturkost-by-maiken
*/

/* ===== Basis ===== */
/* Versatz = Höhe der klebenden Kopfzeile plus etwas Luft.
   Gemessen: Topbar 38px (min-height 26 + 2×6 Innenabstand, content-box)
   + Kopfzeile 99px (2×14 Innenabstand + 70 Logo + 1px Linie) = 137px. */
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

:root {
	--nk-radius: var(--wp--custom--radius, 18px);
	--nk-line: var(--wp--custom--line, rgba(38, 38, 31, 0.08));
	--nk-green: var(--wp--preset--color--green);
	--nk-green-dark: var(--wp--preset--color--green-dark);
	--nk-green-light: var(--wp--preset--color--green-light);
	/* Leitfarbe als RGB-Tripel für halbtransparente Schleier */
	--nk-green-rgb: 168, 180, 3;
	--nk-ink: var(--wp--preset--color--ink);
	--nk-gray: var(--wp--preset--color--gray);
	/* Creme wird im Frontend nicht mehr verwendet (02.09.2026) – die Farbe bleibt in der
	   theme.json-Palette erhalten und steht im Editor weiter zur Verfügung. */
	--nk-paper: var(--wp--preset--color--paper);
	/* Eine Stufe dunkler als Papier – dritter Ton der hellen Staffelung, für die FAQ.
	   Gegen Papier 1,10:1, gegen Weiss 1,19:1; der Sprung Papier→Weiss liegt bei 1,08:1,
	   der Ton fügt sich also in die vorhandene Abstufung ein. */
	--nk-paper-dark: #ebebeb;
	--nk-white: var(--wp--preset--color--white);
	/* Grafit – der dunkle Grundton der Site. Steht bewusst ausserhalb der Grünfamilie und
	   bleibt bei einem Farbwechsel unberührt. Die drei Flächen darunter zeigen alle auf
	   ihn: eine Änderung hier wirkt überall, und wer nur eine Fläche ändern will,
	   überschreibt deren eigene Variable. Nicht mit --nk-ink verwechseln – das bleibt die
	   Textfarbe des Themes. */
	--nk-graphite: #444444;
	--nk-topbar-bg: var(--nk-graphite);
	--nk-topbar-text: #ffffff;
	--nk-dark-bg: var(--nk-graphite);
	--nk-btn-dark-bg: var(--nk-graphite);
}

/* ===== Buttons ===== */
.wp-block-button__link { transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.wp-block-button__link:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--nk-green-rgb), 0.45); color: var(--nk-ink); }
/* Braun und WhatsApp tragen weisse Schrift. Auf den grünen Buttons stand früher Tinte;
   seit dem 02.09.2026 ist auch dort Weiss gesetzt – siehe .nk-shop-btn und .nk-hero-ctas. */
.nk-btn-brown .wp-block-button__link { background: var(--wp--preset--color--cta-brown); color: #fff; }
.nk-btn-brown .wp-block-button__link:hover { box-shadow: 0 10px 22px rgba(140, 73, 26, 0.4); color: #fff; }
.nk-btn-dark .wp-block-button__link { background: var(--nk-btn-dark-bg); color: var(--nk-white); }
.nk-btn-dark .wp-block-button__link:hover { filter: brightness(1.3); box-shadow: 0 8px 18px rgba(38, 38, 31, 0.35); color: var(--nk-white); }
/* WhatsApp-Buttons tragen seit dem 02.09.2026 Braun statt WhatsApp-Grün. Nebeneffekt:
   die weisse Schrift stand auf #25d366 bei 2,0:1 und liegt auf Braun bei 6,8:1.
   Der Hover-Schatten ist mitgezogen – in WhatsApp-Grün hätte er unter dem braunen
   Button gelegen. Das Icon bleibt, es erbt die Farbe über currentColor. */
.nk-btn-wa .wp-block-button__link { background: var(--wp--preset--color--cta-brown); color: #fff; }
.nk-btn-wa .wp-block-button__link:hover { box-shadow: 0 8px 18px rgba(140, 73, 26, 0.4); color: #fff; }
.nk-btn-mail .wp-block-button__link::before,
.nk-btn-wa .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -3px;
	background: currentColor;
	-webkit-mask: var(--nk-icon) center / contain no-repeat;
	mask: var(--nk-icon) center / contain no-repeat;
}
.nk-btn-mail .wp-block-button__link { --nk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.nk-btn-wa .wp-block-button__link { --nk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.36 5.07L2 22l5.06-1.33A9.94 9.94 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18a7.9 7.9 0 0 1-4.06-1.12l-.29-.17-3 .79.8-2.93-.19-.3A7.93 7.93 0 1 1 12 20zm4.4-5.9c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.02-.38-1.94-1.2-.72-.64-1.2-1.42-1.34-1.66-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.64.58.25 1.03.4 1.38.51.58.18 1.11.16 1.53.1.47-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28z'/%3E%3C/svg%3E"); }

/* ===== Kicker (Badge-Pille) ===== */
.nk-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #414700;
	background: rgba(var(--nk-green-rgb), 0.18);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}
/* Der Grünschleier liegt hier auf einer eigenen dunklen Basis statt auf dem Sektionsgrund.
   Sonst hellt der hellere Grund (#444444) die Pille auf und der grüne Text fällt von
   6,0:1 auf 4,3:1 – unter AA. So bleibt die Fläche bei #474a18 wie zuvor, und die
   Bindung an die Leitfarbe über --nk-green-rgb bleibt erhalten. */
.nk-dark .nk-kicker {
	background: linear-gradient(rgba(var(--nk-green-rgb), 0.25), rgba(var(--nk-green-rgb), 0.25)), var(--nk-ink);
	color: var(--nk-green-light);
}
/* Die FAQ-Sektion hatte hier einen weissen Schleier – der war nur auf der grünen Fläche
   sichtbar. Auf dem grauen Grund greift jetzt der Standard-Kicker mit dem Grünschleier
   (7,4:1), deshalb steht hier keine eigene Regel mehr. */

/* ===== Sektionen ===== */
/* Sektionen stossen nahtlos aneinander – kein Blockabstand zwischen Top-Level-Gruppen */
body .wp-block-post-content > * + * { margin-block-start: 0; }
/* … auf Textseiten aber nicht: dort braucht es den normalen Absatzabstand wieder.
   Zwei Klassen schlagen die Regel darüber (eine Klasse + ein Element). 24px ist der
   Blockabstand, den WordPress ohne die Regel oben ohnehin gesetzt hätte. */
.nk-prose .wp-block-post-content > * + * { margin-block-start: 24px; }
.nk-section { padding-top: 96px; padding-bottom: 96px; }
/* Titelblock: volle Inhaltsbreite (sonst zentriert WP den Block), Textbreite innen begrenzen */
.nk-sec-head { margin-bottom: 52px; }
.nk-sec-head h2,
.nk-sec-head .nk-lead { max-width: 820px; }
.nk-sec-head h2 { margin: 0 0 16px; }
.nk-lead { font-size: 1.05rem; color: var(--nk-gray); line-height: 1.6; margin: 0; }

/* ===== Header ===== */
/* Sticky auf dem Template-Part-Wrapper – .nk-fixed allein klebt nur innerhalb des Wrappers */
header.wp-block-template-part { position: sticky; top: 0; z-index: 1000; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.nk-topbar { background: var(--nk-topbar-bg); }
.nk-topbar-inner {
	max-width: 1180px;
	min-height: 26px;
	margin: 0 auto;
	padding: 6px 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--nk-topbar-text);
	flex-wrap: wrap;
	text-align: center;
}
.nk-topbar-inner svg { width: 18px; height: 18px; }
.nk-header { background: var(--nk-white); border-bottom: 1px solid var(--nk-line); }
.nk-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 28px;
	max-width: 1180px;
	margin: 0 auto;
}
/* display:block – als inline-Bild sässe das Logo auf der Grundlinie und der Link
   wäre 8px höher als das Bild, was die klebende Kopfzeile unnötig aufbläht. */
.nk-logo img { height: 70px; width: auto; display: block; }
/* Im schmalen Handy-Kopf schrumpft die Breite (max-width: 100 %), die Höhe bleibt 70px –
   object-fit hält das Seitenverhältnis, statt das Logo zu stauchen. */
.nk-logo img { object-fit: contain; object-position: left center; }
.nk-nav { display: flex; gap: 34px; font-size: 0.95rem; }
.nk-nav a { color: var(--nk-ink); opacity: 0.75; font-weight: 700; transition: color 0.2s ease, opacity 0.2s ease; }
/* Akzente in der Leitfarbe: bewusst gesetzt (siehe Design-System, Abschnitt Barrierefreiheit) */
.nk-nav a:hover { color: var(--nk-green); opacity: 1; }
.nk-shop-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 0.85rem;
	background: var(--nk-green);
	/* Weisse Schrift auf der Leitfarbe: auf ausdrücklichen Wunsch (02.09.2026).
	   Kontrast 2,3:1 – siehe Hinweis über .nk-hero-ctas. */
	color: var(--nk-white);
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nk-shop-btn:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--nk-green-rgb), 0.45); color: var(--nk-white); }
.nk-back { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.nk-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; padding: 0; color: var(--nk-ink); }
.nk-burger svg { width: 26px; height: 26px; }
.nk-mobile-nav {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 28px 28px;
	background: var(--nk-white);
	border-top: 1px solid var(--nk-line);
}
.nk-mobile-nav.is-open { display: flex; }
.nk-mobile-nav a { color: var(--nk-ink); font-weight: 700; font-size: 1rem; }
.nk-mobile-nav .nk-shop-btn { margin-top: 8px; font-size: 0.95rem; padding: 12px 24px; color: var(--nk-white); }
.nk-mobile-nav .nk-shop-btn:hover { color: var(--nk-white); }

/* ===== Hero ===== */
.nk-hero { padding-top: 32px; padding-bottom: 40px; }
.nk-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.nk-hero h1 { margin: 0 0 22px; letter-spacing: -0.01em; }
.nk-hero h1 em { font-style: italic; color: var(--nk-green); }
.nk-hero-intro { font-size: 1.15rem; line-height: 1.6; opacity: 0.85; margin: 0 0 32px; max-width: 46ch; }
.nk-hero .nk-kicker { margin-bottom: 22px; }
.nk-hero-ctas.wp-block-buttons { gap: 16px; margin-bottom: 14px; }
/* Weisse Schrift auf den Hero-Buttons – auf ausdrücklichen Wunsch (02.09.2026).
   ACHTUNG: Auf der Leitfarbe #a8b403 ergibt Weiss nur 2,3:1, Tinte käme auf 6,7:1.
   Am 28.07.2026 (Theme 1.2.0) war genau deshalb von Weiss auf Tinte umgestellt worden.
   Der :hover ist mitgesetzt, sonst zöge die globale Button-Regel die Schrift auf Tinte
   zurück. Soll Weiss bleiben und der Kontrast stimmen: Buttonfläche auf Grün dunkel
   #6b7300 setzen, das ergibt 5,2:1. */
.nk-hero-ctas .wp-block-button__link,
.nk-hero-ctas .wp-block-button__link:hover { color: var(--nk-white); }
.nk-hero-note { margin: 0 0 32px; font-size: 0.82rem; color: var(--nk-gray); }
.nk-hero-stats { display: flex; gap: 34px; padding-top: 26px; border-top: 1px solid rgba(38, 38, 31, 0.12); }
.nk-hero-stats b { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; font-weight: 700; }
.nk-hero-stats span { font-size: 0.82rem; color: var(--nk-gray); display: block; }
.nk-hero-stats svg { width: 24px; height: 24px; }
/* Icon-Kachel: gleiche Zeilenhöhe und Farbe wie die Zahlen daneben (1.6rem × 1.6 Zeilenhöhe) */
.nk-hero-stats .nk-stat-icon { display: flex; align-items: center; height: 2.56rem; color: var(--nk-ink); }
/* Desktop: Kennzahlen ohne Umbruch in einer Zeile, gleiche Abstände dazwischen (erste bündig
   links, letzte bündig rechts). Die vier Beschriftungen brauchen zusammen ~455px, die
   Textspalte ist ab 1200px mind. ~530px breit. Darunter (1025–1199px) ein ruhiges 2 × 2-Raster
   statt ungleich umbrechender Beschriftungen. Handy/Tablet unverändert (flex, umbrechend). */
@media (min-width: 1025px) {
	.nk-hero-stats { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 24px; }
	.nk-hero-stats span { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.nk-hero-stats { grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: 56px; row-gap: 18px; }
}

/* Hero-Slider */
.nk-hero-visual { position: relative; }
.nk-slider { position: relative; width: 100%; aspect-ratio: 4 / 3.1; border-radius: var(--nk-radius); overflow: hidden; }
.nk-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.nk-slider img.is-active { opacity: 1; }
.nk-slider-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.nk-slider-dots button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; }
.nk-slider-dots button span { width: 8px; height: 8px; border-radius: 999px; background: rgba(38, 38, 31, 0.2); display: block; transition: width 0.2s ease, background 0.2s ease; }
.nk-slider-dots button.is-active span { width: 22px; background: var(--nk-green); }
.nk-hero-badge {
	position: absolute;
	bottom: 44px;
	left: -22px;
	background: #fff;
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 14px 30px -10px rgba(38, 38, 31, 0.25);
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 230px;
}
.nk-hero-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--nk-green); flex-shrink: 0; }
.nk-hero-badge p { margin: 0; font-size: 0.82rem; font-weight: 500; line-height: 1.3; }

/* ===== Bilderbanner =====
   Randlos über die volle Fensterbreite. Die Vorlage ist 21:9 mit dem Motiv im
   mittleren Drittel – bei jeder üblichen Fensterbreite bleibt die Bildbreite
   dadurch vollständig sichtbar und nur oben/unten wird beschnitten. Das Motiv
   liegt damit immer innerhalb der Inhaltsbreite von 1124 px.

   Die Klasse .wp-block-image muss mit im Selektor stehen: WordPress liefert
   `.wp-block-image img { height: auto }` als Inline-Stylesheet NACH dem Theme-CSS aus.
   Bei gleicher Spezifität gewinnt sonst der Core und die Höhe wird ignoriert. */
.nk-banner { margin: 0; overflow: hidden; background: var(--nk-paper); }
/* Höhe: Hund und Katze liegen vertikal zwischen 34% und 76% der Bildhöhe. Je breiter das
   Fenster, desto schmaler der sichtbare Ausschnitt – mit dem früheren Deckel von 440px
   waren ab rund 2200px Fensterbreite die Vorderpfoten abgeschnitten.
   clamp() regelt den normalen Bereich, das max(…, 21.5vw) hält auf sehr breiten
   Bildschirmen (Ultrawide) genug Bildhöhe frei. Geprüft von 390px bis 3840px.
   object-position 55%: der Mittelpunkt des Motivs liegt bei 54% der Höhe, nicht bei 50%. */
.wp-block-image.nk-banner img {
	display: block;
	width: 100%;
	height: max(clamp(220px, 33vw, 600px), 21.5vw);
	object-fit: cover;
	object-position: center 55%;
}

/* ===== Trust-Leiste ===== */
.nk-trust { padding-top: 34px; padding-bottom: 34px; border-top: 1px solid var(--nk-line); border-bottom: 1px solid var(--nk-line); }
.nk-trust-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.nk-trust-item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 600; color: var(--nk-ink); opacity: 0.85; }
.nk-trust-item svg { width: 30px; height: 30px; flex-shrink: 0; }

/* ===== Warum (Diagramm) ===== */
.nk-bg-paper, .nk-warum { background: var(--nk-paper); }
.nk-warum-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.nk-warum-visual { display: flex; flex-direction: column; align-items: center; }
.nk-donut { position: relative; width: 280px; height: 280px; border-radius: 50%; background: conic-gradient(var(--nk-green) 0% 0%, rgba(38, 38, 31, 0.08) 0% 100%); display: flex; align-items: center; justify-content: center; }
.nk-donut::before { content: ""; position: absolute; inset: 24px; background: var(--nk-paper); border-radius: 50%; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.06); }
.nk-donut-label { position: relative; text-align: center; font-family: var(--wp--preset--font-family--display); }
.nk-donut-label b { display: block; font-size: 3rem; font-weight: 700; color: var(--nk-ink); }
.nk-donut-label span { font-size: 0.82rem; font-weight: 500; color: var(--nk-gray); text-transform: uppercase; letter-spacing: 0.08em; }
.nk-bars { width: 100%; max-width: 320px; margin-top: 32px; }
.nk-bars-title { display: block; font-size: 0.78rem; font-weight: 600; color: var(--nk-gray); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.nk-bars-list { display: grid; gap: 12px; }
.nk-bar-head { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; }
.nk-bar-head span:last-child { color: var(--nk-gray); }
.nk-bar-row.is-hero .nk-bar-head { font-weight: 700; }
.nk-bar-row.is-hero .nk-bar-head span:last-child { color: var(--nk-green-dark); }
.nk-bar-track { background: rgba(38, 38, 31, 0.08); border-radius: 999px; height: 8px; overflow: hidden; }
.nk-bar-fill { width: 0; height: 100%; background: var(--nk-gray); border-radius: 999px; transition: width 1.4s cubic-bezier(0.33, 1, 0.68, 1); }
.nk-bar-row.is-hero .nk-bar-fill { background: var(--nk-green); }
.nk-warum-text h2 { margin: 0 0 16px; }
.nk-warum-text .nk-lead { max-width: 52ch; }
.nk-checklist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.nk-checklist li { position: relative; padding-left: 36px; font-size: 0.98rem; line-height: 1.55; }
.nk-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	background: var(--nk-green-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nk-checklist li strong { display: block; font-weight: 600; margin-bottom: 2px; }

/* ===== Karten-Raster ===== */
.nk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.nk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Alle Karten eines Rasters gleich hoch (Zeilen koppeln) */
.nk-grid-3, .nk-grid-4 { grid-auto-rows: 1fr; }
/* WP-Blockabstand innerhalb von Grid-/Flex-Containern entfernen – sonst stehen Karten versetzt */
.wp-block-group.nk-grid-3 > *,
.wp-block-group.nk-grid-4 > *,
.wp-block-group.nk-hero-grid > *,
.wp-block-group.nk-warum-grid > *,
.wp-block-group.nk-cta-grid > *,
.wp-block-group.nk-shopcta-inner > * { margin-block-start: 0; margin-block-end: 0; }

/* Sortiment-Karten */
.nk-card { background: #fff; border-radius: var(--nk-radius); overflow: hidden; border: 1px solid var(--nk-line); display: flex; flex-direction: column; height: 100%; }
/* Quadratisch wie die Quellbilder (700×700). Vorher stand hier 4:3 mit cover,
   was oben und unten je rund 12% abgeschnitten hat. `contain` sorgt dafür, dass
   auch ein später hochgeladenes Bild mit anderem Verhältnis nie beschnitten wird –
   der weisse Kartengrund füllt dann die Ränder. */
.nk-card-img { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
/* Der Link um das Bild muss Block sein und die volle Höhe halten – sonst löst sich
   die Prozenthöhe des Bildes gegen einen inline-Link mit automatischer Höhe auf
   und die 4:3-Fläche bricht zusammen. */
.nk-card-img a { display: block; height: 100%; }
/* .wp-block-image mit im Selektor – siehe Hinweis beim Bilderbanner: sonst gewinnt
   das Inline-Stylesheet des Cores mit `height: auto`. Mit quadratischen Quellbildern
   fiele das nicht auf, bei abweichendem Seitenverhältnis aber sofort. */
.wp-block-image.nk-card-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.nk-card-img a:hover img { transform: scale(1.04); }
.nk-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.nk-card-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; color: var(--nk-green-dark); }
.nk-tag-purple { color: var(--wp--preset--color--purple); }
.nk-tag-gold { color: var(--wp--preset--color--gold); }
.nk-card-body h3 { margin: 0 0 8px; }
.nk-card-desc { margin: 0 0 14px; font-size: 0.92rem; color: var(--nk-gray); line-height: 1.5; }
.nk-card-link { margin-top: auto; font-size: 0.85rem; font-weight: 600; }
.nk-card-link a { color: var(--nk-green); transition: color 0.2s ease; }
.nk-card-link a:hover { color: var(--nk-ink); }

/* ===== Shop-CTA-Banner ===== */
.nk-shopcta { background: var(--nk-paper); padding-top: 56px; padding-bottom: 56px; }
.nk-shopcta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.nk-shopcta h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #1c1c14; }
.nk-shopcta p { margin: 0; color: #1c1c14; opacity: 0.8; max-width: 52ch; }
.nk-shopcta .wp-block-button__link { font-size: 1rem; padding: 14px 30px; }

/* ===== Herstellung (dunkel) ===== */
.nk-dark { background: var(--nk-dark-bg); color: var(--nk-white); }
.nk-dark h2, .nk-dark h3 { color: var(--nk-white); }
.nk-dark .nk-lead { color: rgba(255, 255, 255, 0.7); }
.nk-pcard { padding: 26px 22px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--nk-radius); }
.nk-pcard svg { width: 28px; height: 28px; margin-bottom: 14px; }
.nk-pcard-step { font-family: var(--wp--preset--font-family--display); font-size: 0.85rem; color: var(--nk-green-light); font-weight: 600; margin: 0 0 14px; }
.nk-pcard h3 { font-size: 1.08rem; margin: 0 0 8px; }
.nk-pcard p:last-child { margin: 0; font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); line-height: 1.5; }

/* ===== Referenzen ===== */
.nk-review { background: #fff; border-radius: var(--nk-radius); padding: 26px 22px; border: 1px solid var(--nk-line); display: flex; flex-direction: column; height: 100%; }
.nk-stars { display: flex; gap: 2px; margin-bottom: 14px; }
.nk-stars svg { width: 16px; height: 16px; }
.nk-review-text { margin: 0 0 20px; font-size: 0.92rem; line-height: 1.55; flex: 1; }
.nk-review-person { display: flex; align-items: center; gap: 12px; }
.nk-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--nk-green-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.nk-avatar--purple { background: var(--wp--preset--color--purple); }
.nk-avatar--gold { background: var(--wp--preset--color--gold); }
.nk-avatar--brown { background: var(--wp--preset--color--cta-brown); }
.nk-review-person b { display: block; font-size: 0.9rem; }
.nk-review-person span { font-size: 0.8rem; color: var(--nk-gray); }

/* ===== FAQ ===== */
/* ACHTUNG Klassenname: `nk-on-green` trägt seit dem 02.09.2026 eine graue Fläche, kein
   Grün mehr. Der Name steht im Blockmarkup der Startseite in der Datenbank – ein
   Umbenennen ginge nur über die Gutenberg-Queue und ist bewusst unterblieben. */
.nk-on-green { background: var(--nk-paper-dark); }
.nk-on-green h2, .nk-on-green .nk-lead { color: #1c1c14; }
.nk-on-green .nk-lead { opacity: 0.8; }
.nk-faq-list .wp-block-details { padding: 24px 0; border-bottom: 1px solid rgba(28, 28, 20, 0.18); margin: 0; }
.nk-faq-list summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 600;
	color: #1c1c14;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 40px;
}
.nk-faq-list summary::-webkit-details-marker { display: none; }
.nk-faq-list summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: #1c1c14;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nk-faq-list details[open] summary::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.nk-faq-list details p { margin: 12px 0 0; font-size: 0.98rem; line-height: 1.6; color: #1c1c14; opacity: 0.8; max-width: 70ch; }

/* ===== Beratung ===== */
.nk-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.nk-ctacard { border-radius: var(--nk-radius); padding: 38px 34px; display: flex; flex-direction: column; height: 100%; }
/* Beide Karten sind seit dem 02.09.2026 gleich aufgebaut – die linke trug vorher die
   Leitfarbe. Der Klassenname `nk-ctacard--green` bleibt, weil er im Blockmarkup der
   Startseite in der Datenbank steht; er trägt kein Grün mehr.
   Der Rand ist auf dem weissen Sektionsgrund die einzige Abgrenzung der Karten. */
.nk-ctacard--green,
.nk-ctacard--white { background: var(--nk-white); border: 1.5px solid rgba(38, 38, 31, 0.12); }
.nk-ctacard--green p,
.nk-ctacard--white p { color: var(--nk-gray); }
.nk-ctacard h3 { font-size: 1.45rem; margin: 0 0 12px; font-weight: 700; }
.nk-ctacard p { margin: 0 0 24px; font-size: 0.96rem; line-height: 1.55; }
.nk-ctacard .wp-block-buttons { margin-top: auto; gap: 12px; }

/* ===== Footer ===== */
.nk-footer { background: var(--nk-paper); padding-top: 64px; padding-bottom: 28px; }
.nk-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.nk-footer-logo img { height: 60px; width: auto; display: block; margin-bottom: 16px; }
.nk-footer-about { font-size: 0.9rem; line-height: 1.6; max-width: 38ch; color: var(--nk-gray); margin: 0; }
.nk-footer h3 { font-size: 0.95rem; margin: 0 0 18px; font-weight: 600; }
/* Abstand verkleinert (08.10.2026): vorher 36px Raster (25px Zeile + 11px Lücke), jetzt 28px (gemessen) –
   bleibt über der 24px-Mindestgrösse für Ziele (WCAG 2.5.8). */
.nk-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.nk-footer-links li { line-height: 1.4; }
.nk-footer-links a { font-size: 0.9rem; color: var(--nk-gray); transition: color 0.2s ease; }
.nk-footer-links a:hover { color: var(--nk-green); }
.nk-footer-badges { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.nk-footer-badges img { height: 90px; width: auto; }
.nk-footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 26px;
	border-top: 1px solid rgba(38, 38, 31, 0.12);
	font-size: 0.82rem;
	color: var(--nk-gray);
}
.nk-footer-bottom a { color: var(--nk-gray); }
.nk-footer-bottom a:hover { color: var(--nk-green); }
.nk-footer-bottom .nk-credit a { text-decoration: underline; }

/* ===== Kontakt-FAB & Panel ===== */
.nk-fab {
	position: fixed;
	right: 20px;
	bottom: 56px;
	z-index: 1100;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--cta-brown);
	color: #fff;
	font-weight: 700;
	font-size: 0.92rem;
	border: none;
	cursor: pointer;
	box-shadow: 0 14px 30px -10px rgba(140, 73, 26, 0.5);
	transition: filter 0.2s ease, transform 0.2s ease, bottom 0.2s ease;
}
.nk-fab:hover { filter: brightness(1.1); transform: translateY(-2px); }
.nk-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
/* --nk-cookie-h setzt naturkost.js aus der tatsächlichen Bannerhöhe */
body.nk-cookie-open .nk-fab { bottom: calc(var(--nk-cookie-h, 62px) + 56px); }
.nk-contact-panel {
	position: fixed;
	right: 20px;
	bottom: 128px;
	z-index: 1100;
	width: 260px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 45px -12px rgba(38, 38, 31, 0.35);
	overflow: hidden;
	display: none;
	transition: bottom 0.2s ease;
}
body.nk-cookie-open .nk-contact-panel { bottom: calc(var(--nk-cookie-h, 62px) + 128px); }
.nk-contact-panel.is-open { display: block; }
.nk-contact-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--wp--preset--color--cta-brown); }
.nk-contact-head span { color: #fff; font-weight: 700; font-size: 0.95rem; }
.nk-contact-head button { background: none; border: none; color: #fff; cursor: pointer; padding: 0; display: flex; }
.nk-contact-head svg { width: 18px; height: 18px; }
.nk-contact-panel a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--nk-ink); font-weight: 600; font-size: 0.92rem; transition: background 0.2s ease; }
.nk-contact-panel a:first-of-type { border-bottom: 1px solid rgba(38, 38, 31, 0.1); }
.nk-contact-panel a:hover { background: rgba(var(--nk-green-rgb), 0.12); }
.nk-contact-panel a svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ===== Cookie-Banner ===== */
.nk-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--nk-white);
	border-top: 1px solid rgba(38, 38, 31, 0.15);
	box-shadow: 0 -8px 24px rgba(38, 38, 31, 0.12);
	display: none;
}
body.nk-cookie-open .nk-cookie { display: block; }
/* Ohne gespeicherte Auswahl öffnet schon das Head-Script (functions.php) den Banner –
   nicht erst naturkost.js nach dem Laden. Er ist auf dem Handy das grösste Element (LCP). */
.nk-cookie-pre .nk-cookie { display: block; }
.nk-cookie-inner { max-width: 1180px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nk-cookie { max-height: 85vh; overflow-y: auto; }
/* Text braucht Platz: unter ca. 900px rutschen die Buttons darunter */
.nk-cookie-text { flex: 1 1 480px; min-width: 220px; }
.nk-cookie-inner p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.nk-cookie-inner p a { text-decoration: underline; }
.nk-cookie-options { display: none; margin-top: 14px; gap: 10px; }
.nk-cookie.is-settings .nk-cookie-options { display: grid; }
.nk-cookie-options label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; line-height: 1.45; cursor: pointer; }
.nk-cookie-options input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--nk-green-dark); flex: none; }
.nk-cookie-options b { display: block; }
.nk-cookie:not(.is-settings) .nk-cookie-save { display: none; }
.nk-cookie.is-settings .nk-cookie-save { display: inline-flex; }
.nk-cookie.is-settings .nk-cookie-customize { display: none; }
.nk-cookie-btns { display: flex; gap: 10px; flex-wrap: wrap; }
/* „Nur notwendige“ ist gleich gross und gleich gut sichtbar wie „Alle akzeptieren“ –
   Ablehnen muss so einfach sein wie Zustimmen (DSGVO / TDDDG). */
.nk-cookie-btns button { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.nk-cookie-btns .nk-cookie-customize, .nk-cookie-btns .nk-cookie-save, .nk-cookie-btns .nk-cookie-reject { background: transparent; border: 1.5px solid var(--nk-ink); color: var(--nk-ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
/* Rand beim Hover mitfärben – sonst stünde die dunklere Kontur (Tinte) um die hellere
   Grafit-Füllung und der Button wirkte doppelt umrandet. */
.nk-cookie-btns .nk-cookie-customize:hover, .nk-cookie-btns .nk-cookie-save:hover, .nk-cookie-btns .nk-cookie-reject:hover { background: var(--nk-btn-dark-bg); border-color: var(--nk-btn-dark-bg); color: var(--nk-white); }
.nk-cookie-btns .nk-cookie-accept { background: var(--nk-green); border: 1.5px solid var(--nk-green); color: var(--nk-ink); transition: filter 0.2s ease; }
.nk-cookie-btns .nk-cookie-accept:hover { filter: brightness(1.12); }

/* ===== Unterseiten (Impressum, Blog) ===== */
.nk-page-head { padding-top: 64px; }
/* Textspalte wie auf der Startseite ausrichten:
   1. Container auf Inhaltsbreite begrenzen (1124px Inhalt + 2 × 28px Innenabstand),
      damit seine linke Kante exakt der Kante der Startseiten-Sektionen entspricht.
   2. Text darin linksbündig und auf 820px Zeilenlänge begrenzt.
   !important ist nötig, weil WordPress im constrained-Layout margin:auto !important setzt. */
.nk-page-head,
.nk-prose { max-width: 1180px; margin-inline: auto; }
.nk-page-head > *,
.nk-prose > *,
.nk-prose .entry-content > * {
	max-width: 820px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.nk-page-head h1 { margin: 0 0 32px; font-size: clamp(2rem, 4vw, 2.8rem); }
/* Lange Titel wie «Datenschutzerklärung» passen mobil nicht in eine Zeile und brachen
   ohne Trennstrich mitten im Wort um. Silbentrennung nutzt lang="de-DE" (inc/seo-de.php). */
.nk-page-head h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.nk-prose { padding-bottom: 96px; }
.nk-prose h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.nk-prose p { color: var(--nk-gray); line-height: 1.7; }
/* Listen und Links im Fliesstext (Datenschutz, Impressum). Links unterstrichen: Grün dunkel
   und Grau liegen in der Helligkeit fast gleich auf, die Farbe allein reicht nicht (WCAG 1.4.1). */
.nk-prose ul { padding-left: 1.2em; color: var(--nk-gray); }
.nk-prose li { line-height: 1.7; }
.nk-prose li + li { margin-top: 4px; }
.nk-prose .wp-block-post-content a { text-decoration: underline; text-underline-offset: 2px; }
.nk-prose p.nk-stand { font-size: 0.88rem; }
/* AGB und Datenschutz: Text über die ganze Inhaltsbreite (1124px) statt 820px – auf Wunsch
   (08.10.2026), bewusste Abweichung von der 820px-Regel im Design-System. Impressum bleibt schmal. */
.nk-prose--breit > *,
.nk-prose--breit .entry-content > * { max-width: none; }
/* AGB: zwei Fassungen (DE/AT) als H2, die Paragraphen als H3. Die H2 trennt eine Linie
   ab, damit der Wechsel von Deutschland zu Österreich in der langen Seite auffällt. */
.nk-prose h2.nk-teil { font-size: 1.6rem; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--nk-line); }
.nk-prose h3 { font-size: 1.08rem; margin: 28px 0 6px; }
.nk-post-meta { font-size: 0.82rem; color: var(--nk-gray); margin-bottom: 24px; }
.nk-blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.nk-blog-list .wp-block-post { background: #fff; border-radius: var(--nk-radius); overflow: hidden; border: 1px solid var(--nk-line); }
.nk-blog-list .wp-block-post-featured-image { aspect-ratio: 4 / 3; margin: 0; }
.nk-blog-list .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.nk-blog-list .wp-block-post-title { font-size: 1.18rem; margin: 18px 22px 8px; }
.nk-blog-list .wp-block-post-title a { color: var(--nk-ink); }
.nk-blog-list .wp-block-post-title a:hover { color: var(--nk-green-dark); }
.nk-blog-list .wp-block-post-date { font-size: 0.8rem; color: var(--nk-gray); margin: 0 22px 6px; }
.nk-blog-list .wp-block-post-excerpt { font-size: 0.92rem; color: var(--nk-gray); margin: 0 22px 22px; }

/* ===== Grüntöne in fest eingebetteten SVGs =====
   Die Sektions-Patterns wurden einmal in die Startseite eingefügt und liegen seither als
   statisches Blockmarkup in der Datenbank – mitsamt ihren fill-/stroke-Attributen. Eine
   Änderung an patterns/*.php erreicht diese Icons also nicht mehr. CSS hat gegenüber
   Präsentationsattributen Vorrang, deshalb werden die Farben hier nachgezogen; die
   Patterns selbst tragen dieselben Werte, damit neu eingefügte Sektionen gleich aussehen.
   Auf hellem Grund steht Grün dunkel, nicht die Leitfarbe – die wäre auf Weiss zu blass. */
.nk-stars svg { fill: var(--nk-green-dark); }
/* Herz in der Vertrauensleiste bewusst in der Leitfarbe (siehe Design-System) */
.nk-trust-item:nth-child(2) svg { stroke: var(--nk-green); }
.nk-pcard svg { stroke: var(--nk-green-light); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.nk-nav, .nk-shop-btn--desktop { display: none; }
	.nk-burger { display: flex; }
	.nk-hero-grid { grid-template-columns: 1fr; }
	.nk-hero-grid > .nk-hero-visual { order: -1; }
	.nk-hero-badge { position: static; left: auto; bottom: auto; max-width: none; margin-top: 16px; }
	.nk-warum-grid { grid-template-columns: 1fr; }
	.nk-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.nk-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.nk-cta-grid { grid-template-columns: 1fr; }
	.nk-footer-grid { grid-template-columns: 1fr; gap: 32px; }
	/* Einspaltig gestapelt: Siegel wieder links, sonst stünden sie allein am rechten Rand */
	.nk-footer-badges { justify-content: flex-start; }
	.nk-hero-stats { flex-wrap: wrap; row-gap: 18px; }
	.nk-blog-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	/* Unter 561px bricht die Topbar auf zwei Zeilen (≈55px statt 38px), die Kopfzeile
	   wird damit ≈154px hoch – der Versatz für die Ankersprünge muss mitwachsen. */
	html { scroll-padding-top: 168px; }
	.nk-topbar-inner { font-size: 0.72rem; gap: 6px; padding: 6px 16px; }
	.nk-hero { padding-top: 24px; }
	.nk-grid-3, .nk-grid-4, .nk-blog-list { grid-template-columns: 1fr; }
	.nk-trust-strip { justify-content: flex-start; }
	.nk-hero-ctas .wp-block-button, .nk-hero-ctas .wp-block-button__link { width: 100%; text-align: center; justify-content: center; }
	.nk-section { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 640px) {
	.nk-fab-label { display: none; }
}
@media (min-width: 1025px) {
	.nk-hero-ctas .wp-block-button__link { white-space: nowrap; padding: 12px 18px; font-size: 0.88rem; }
}

/* ===== Einblend-Animation beim Laden (Fade-up, gestaffelt) =====
   Die Klasse .nk-anim setzt ein Inline-Script im <head> (functions.php), nur ohne
   "Bewegung reduzieren". Bis naturkost.js die Elemente markiert hat (.nk-anim-live),
   bleibt der Inhalt verborgen – sonst blitzt er kurz auf. Nach 3 s greift ein Notausgang.
   Animiert wird die Eigenschaft `translate`, nicht `transform`: so bleiben die
   Hover-Effekte der Buttons und Karten unberührt. Die Keyframes haben bewusst kein
   `to`, damit Elemente mit eigener Deckkraft (z. B. .nk-hero-intro 0.85) dort landen. */
.nk-anim:not(.nk-anim-live) main,
.nk-anim:not(.nk-anim-live) footer > :not(.nk-cookie),
.nk-anim:not(.nk-anim-live) .nk-topbar-inner,
.nk-anim:not(.nk-anim-live) .nk-header-inner { opacity: 0; }
.nk-anim .nk-reveal:not(.is-in) { opacity: 0; translate: 0 28px; }
.nk-anim .nk-reveal.is-in { animation: nk-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--nk-delay, 0ms) both; }
@keyframes nk-fade-up {
	from { opacity: 0; translate: 0 28px; }
}
/* Linien von Kopfzeile, Kennzahlen und Vertrauensleiste: unsichtbar, bis das erste Element
   des Bereichs einblendet (naturkost.js setzt .nk-line-in und dessen Verzögerung).
   Ohne JS bzw. bei "Bewegung reduzieren" fehlt .nk-anim – dann stehen die Linien normal da. */
.nk-anim .nk-header,
.nk-anim .nk-hero-stats,
.nk-anim .nk-trust { transition: border-color 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--nk-line-delay, 0ms); }
.nk-anim .nk-header:not(.nk-line-in),
.nk-anim .nk-hero-stats:not(.nk-line-in),
.nk-anim .nk-trust:not(.nk-line-in) { border-color: transparent; }