/** Shopify CDN: Minification failed

Line 6372:14 Unexpected "{"
Line 6372:23 Expected ":"
Line 6373:14 Unexpected "{"
Line 6373:23 Expected ":"
Line 6376:14 Unexpected "{"
Line 6376:23 Expected ":"
Line 6379:14 Unexpected "{"
Line 6379:23 Expected ":"
Line 6382:14 Unexpected "{"
Line 6382:23 Expected ":"
... and 47 more hidden warnings

**/
/* ============================================================
   NSD – CORE WEB VITALS / CLS FIX PACK – v2
   Sense Theme + PageFly – risikoarmer Gesamt-Fix
   ============================================================ */

/* ---------------------------------------
   1) HEADER-HÖHE RESERVIEREN (wichtigster Fix)
---------------------------------------- */
:root {
  --nsd-header-height: 84px; /* ggf. auf 90–96px anpassen, wenn dein Header höher ist */
}

.header-wrapper {
  min-height: var(--nsd-header-height);
}

/* ---------------------------------------
   2) HERO-BILDER (Startseite, Blog, Glossar)
---------------------------------------- */

.nsd-img-wrap {
  position: relative;
  overflow: hidden;
}

.nsd-img-wrap::before {
  content: "";
  display: block;
  padding-top: 66.66%; /* 3:2 Ratio – bei Bedarf anpassen (z.B. 75% für 4:3) */
}

.nsd-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------
   3) STARTSEITEN-KARTEN (z. B. Kategorien, Blogcards)
---------------------------------------- */

.card,
.index-card,
.card-wrapper,
.card-information {
  position: relative;
  min-height: 80px;
}

/* ---------------------------------------
   4) COLLECTION-CARDS (alle Kollektionen /cards)
---------------------------------------- */

.card__media,
.card__inner {
  min-height: 240px; /* Du hast große Bilder – 240px ideal */
}

.card-information {
  min-height: 120px;
}

/* ---------------------------------------
   5) PAGEFLY – PRODUKTSEITEN (Bildbereiche stabilisieren)
---------------------------------------- */

/* Produkt-Hauptbild Wrapper */
.pf-product-main-media,
[data-pf-type="Image"].pf-product-main-image {
  position: relative;
}

.pf-product-main-media::before,
[data-pf-type="Image"].pf-product-main-image::before {
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 Ratio für dein Produkt-Hauptbild */
}

/* Produkt-Hauptbild IMG */
.pf-product-main-media img,
[data-pf-type="Image"].pf-product-main-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Produktbild-Galerie Thumbnails */
.pf-product-media-thumbnail img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------
   6) PAGEFLY – GENERELLE IMAGE-SICHERUNG
---------------------------------------- */

[data-pf-type="Image"] img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------
   7) ACCORDIONS (FAQ springen gerne!)
---------------------------------------- */

details,
.pf-accordion,
.pf-accordion-wrapper {
  min-height: 42px;
}

/* ---------------------------------------
   8) NEWSLETTERBOX & FOOTER JUMP FIXES
---------------------------------------- */

.footer-block,
.footer-wrapper,
#shopify-section-footer {
  min-height: 100px;
}

.nsd-newsletter,
.newsletter__wrapper {
  min-height: 160px;
}

/* ---------------------------------------
   9) ICONS – verhindert "Icon-Jumps" wenn Fonts laden
---------------------------------------- */

.icon,
svg.icon {
  width: 1em;
  height: 1em;
}

/* ---------------------------------------
   10) Collections ALL (deine großen Category-Banner)
---------------------------------------- */

.collection-hero__image-wrapper img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------
   11) BLOG / RATGEBER / FEATURE-KARTEN (Bildbereiche stabilisieren)
---------------------------------------- */

/* NSD Feature Cards – z. B. im Blog / Glossar */
.nsd-feature-card figure {
  position: relative;
  overflow: hidden;
}

.nsd-feature-card figure::before {
  content: "";
  display: block;
  padding-top: 66.66%; /* 3:2 – bei Bedarf auf 75% (4:3) ändern */
}

.nsd-feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------
   12) LOGO & BRAND-IMAGES (kleine Sprünge verhindern)
---------------------------------------- */

.header__heading-logo img,
.site-header__logo img {
  display: block;
  height: 40px;           /* bei Bedarf an dein Logo anpassen */
  width: auto;
}

.footer__logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

/* NSD – Suche: Grid & Reihenfolge */
.nsd-search-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.nsd-search-item {
  flex: 1 1 min(260px, 100%);
}

/* Reihenfolge: Produkte vor Artikeln vor Seiten */
.nsd-search-item--product { order: 1; }
.nsd-search-item--article { order: 2; }
.nsd-search-item--page    { order: 3; }

/* Badge-Styling */
.nsd-search-item__inner {
  position: relative;
}

.nsd-search-item__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #234F28;           /* dein Deep Green */
  color: #FDFCF8;                /* Cream */
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

/* Falls Cards selbst schon Padding haben, Badge nicht abschneiden */
.nsd-search-item .card,
.nsd-search-item .article-card {
  position: relative;
  overflow: hidden;
}






/* === OVERRIDES – FOOTER (komplett) + kleiner Header-Hover === */

/* ────────────────────────────────────────────────────────────
   0) Kleiner Header-Fix (optional – kannst du lassen)
   ──────────────────────────────────────────────────────────── */
.nsd-nav a.active,
.nsd-nav a:hover {
  background-color: var(--nsd-apricot) !important;
  color: var(--nsd-green-dark) !important;
}

/* ────────────────────────────────────────────────────────────
   1) Footer: Grundfarben & Divider
   ──────────────────────────────────────────────────────────── */
.site-footer,
.footer-tools,
.footer-bottom {
  background-color: var(--nsd-green-header);
  color: var(--nsd-green-dark);
}

/* optionale Linien oben/unten */
.footer-columns-wrapper::before,
.footer-divider-top,
.footer-divider.footer-divider-green,
.footer-bottom::after {
  content: "";
  display: block;
  height: 2px;
  background-color: var(--nsd-green-dark);
  max-width: 1200px;
  margin: 2rem auto;
}

/* ────────────────────────────────────────────────────────────
   2) Newsletter
   ──────────────────────────────────────────────────────────── */
.footer-newsletter {
  background-color: var(--nsd-cream);
  padding: 2rem 1rem;
  margin-bottom: 3rem;
}
.footer-newsletter-box {
  background-color: #e6ede3;
  border: 2px solid var(--nsd-green-dark);
  border-radius: 12px;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
  color: var(--nsd-green-dark);
}
.footer-newsletter-title,
.footer-newsletter-text {
  text-align: center;
  color: var(--nsd-green-dark);
}
.footer-newsletter-form {
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.footer-newsletter-form input[type="email"] {
  border: 2px solid var(--nsd-green-dark);
  padding: .6rem 1rem;
  border-radius: 999px;
  width: 100%;
  max-width: 300px;
}
.footer-newsletter-form .btn,
.footer-newsletter-form button.btn {
  background-color: var(--nsd-green-dark);
  color: #fff;
  border: none;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
}
.footer-newsletter .newsletter-consent {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-size: .9rem;
  color: var(--nsd-hover-text);
}
.footer-newsletter-success { color: #2e7d32; text-align: center; margin-top: .6rem; }
.footer-newsletter-error { color: #b71c1c; text-align: center; margin-top: .6rem; }

/* ────────────────────────────────────────────────────────────
   3) 4‑Spalten‑Layout
   ──────────────────────────────────────────────────────────── */
.footer-columns-wrapper {
  background-color: var(--nsd-green-header);
  padding: 0 1rem;
}
.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}
.footer-column {
  flex: 1 1 22%;
  min-width: 220px;
  text-align: left;
}
.footer-title-with-icon {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.footer-title-with-icon h3 {
  margin: 0;
  color: var(--nsd-green-dark);
}
.footer-column .rte p { margin: .35rem 0; }

/* ────────────────────────────────────────────────────────────
   4) Social Icons (Inline‑SVG)
   ──────────────────────────────────────────────────────────── */
.footer-social-text { margin: 0 0 .4rem; color: var(--nsd-hover-text); }
.footer-social-icons {
  display: flex;
  gap: 1rem;
  margin-top: .6rem;
}
.footer-social-icons:empty { display: none; }

.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: #fff;
  border: 2px solid var(--nsd-green-dark);
  border-radius: 50%;
  transition: background-color .25s ease, border-color .25s ease;
}
.footer-social-icons svg {
  width: 20px; height: 20px;
  fill: var(--nsd-green-dark);
  transition: fill .25s ease;
}
.footer-social-icons a:hover {
  background-color: var(--nsd-green-dark);
  border-color: var(--nsd-green-dark);
}
.footer-social-icons a:hover svg { fill: #fff; }

/* ────────────────────────────────────────────────────────────
   5) Tools-Zeile (↑ & 🛒)
   ──────────────────────────────────────────────────────────── */
.footer-tools-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-tools-right { display: flex; gap: .6rem; }

.backtotop-btn,
.footer-cart-btn {
  background: #fff;
  border: 2px solid var(--nsd-green-dark);
  color: var(--nsd-green-dark);
  border-radius: 999px;
  padding: .5rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}
.backtotop-btn:hover,
.footer-cart-btn:hover {
  background: var(--nsd-green-dark);
  color: #fff;
}
.footer-cart-badge {
  display: inline-block;
  margin-left: .35rem;
  min-width: 18px;
  padding: 2px 6px;
  background: var(--nsd-coral);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ────────────────────────────────────────────────────────────
   6) Footer Bottom (Zahlungsarten + Powered)
   ──────────────────────────────────────────────────────────── */
.footer-bottom {
  border-top: 1px solid rgba(0,0,0,.05);
  padding-top: 1.2rem;
  margin-top: 2rem;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-payment-svgs svg {
  height: 22px;
  width: auto;
  margin-right: 6px;
}
.footer-powered {
  color: var(--nsd-hover-text);
  font-size: .95rem;
}

/* ────────────────────────────────────────────────────────────
   7) Responsive
   ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .footer-column { flex: 1 1 calc(50% - 1rem); min-width: 280px; }
}
@media (max-width: 768px) {
  .footer-column { flex: 1 1 100%; text-align: center; }
  .footer-columns { justify-content: center; }
  .footer-title-with-icon { justify-content: center; }
  .footer-tools-inner { justify-content: center; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-bottom-left, .footer-bottom-right { justify-content: center; }
}


/* =========================================================
   HEADER – Buttons & Burger (sauber + konsistent)
   ========================================================= */

/* 1) Allgemeine Button-Basis (falls .btn/.button verwendet) */
.btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .06s ease-in;
}

/* Primär/Grün */
.btn--primary,
.button--primary,
.btn-green {
  background: var(--nsd-green-dark);
  color: #fff !important;
  border-color: var(--nsd-green-dark);
}
.btn--primary:hover,
.button--primary:hover,
.btn-green:hover {
  background: #254035; /* etwas dunkler */
  border-color: #254035;
}

/* Sekundär/Coral (falls gebraucht) */
.btn--secondary,
.button--secondary,
.btn-coral {
  background: var(--nsd-coral);
  color: #fff !important;
  border-color: var(--nsd-coral);
}
.btn--secondary:hover,
.button--secondary:hover,
.btn-coral:hover {
  background: #e57373;
  border-color: #e57373;
}

/* Outline-Variante (passt zum Stil) */
.btn--outline,
.button--tertiary,
.button--outline {
  background: transparent;
  color: var(--nsd-green-dark) !important;
  border-color: var(--nsd-green-dark);
}
.btn--outline:hover,
.button--tertiary:hover,
.button--outline:hover {
  background: var(--nsd-green-dark);
  color: #fff !important;
}

/* Klick-Feedback minimal */
.btn:active,
.button:active { transform: translateY(1px); }

/* 2) „Die zwei Buttons“ in der Saison/Announcement-Bar */
.seasonal-bar a,
.announcement-bar a {
  /* als Pill-Buttons stylen */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .95rem;
  margin-left: .35rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--nsd-green-dark);
  color: var(--nsd-green-dark);
  background: #fff0 /* transparent/weiß je nach Hintergrund */;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.seasonal-bar a:first-child,
.announcement-bar a:first-child { margin-left: 0; }

.seasonal-bar a:hover,
.announcement-bar a:hover {
  background: var(--nsd-green-dark);
  color: #fff;
  border-color: var(--nsd-green-dark);
}

/* 3) Burger-/Menü-Icon in Header einfärben (+ Hover) 
      (deckt gängige Theme-Selektoren ab) */
.nsd-header .header__icon,
.nsd-header .header__icon--menu,
.nsd-header .menu-toggle,
.nsd-header .mobile-nav-toggle,
.nsd-header button[aria-controls="menu-drawer"] {
  color: var(--nsd-green-dark);
}
.nsd-header .header__icon svg,
.nsd-header .header__icon--menu svg,
.nsd-header .menu-toggle svg,
.nsd-header .mobile-nav-toggle svg,
.nsd-header button[aria-controls="menu-drawer"] svg {
  width: 24px; height: 24px;
  fill: currentColor; /* übernimmt die Textfarbe */
}

.nsd-header .header__icon:hover,
.nsd-header .header__icon--menu:hover,
.nsd-header .menu-toggle:hover,
.nsd-header .mobile-nav-toggle:hover,
.nsd-header button[aria-controls="menu-drawer"]:hover {
  background: var(--nsd-cream-dark);
  border-radius: 6px;
}

/* 4) Aktive/Hover Navigation (deins, minimal gestrafft) */
.nsd-nav a.active,
.nsd-nav a:hover {
  background: var(--nsd-apricot) !important;
  color: var(--nsd-green-dark) !important;
  text-decoration: none !important;
}
/* Header-Buttons – NSD Styleguide Tweaks */
.nsd-header-buttons .btn-link {
  font-family: var(--font-base, 'Open Sans', sans-serif);
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-large, 16px);
  box-shadow: var(--shadow-base);
  transition: all .2s ease;
  text-decoration: none;
}

/* Primärer Button (Rezepte entdecken) */
.nsd-header-buttons .btn-link {
  background: var(--color-primary, #234F28);
  color: #fff;
  border: 1px solid var(--color-primary, #234F28);
}
.nsd-header-buttons .btn-link:hover {
  background: var(--coral, #F28B82);
  border-color: var(--coral, #F28B82);
  color: #fff;
}

/* Sekundärer Button (Produkte shoppen) */
.nsd-header-buttons .btn-link--secondary {
  background: var(--color-primary, #234F28);
  color: #fff;
  border: 1px solid var(--color-primary, #234F28);
}
.nsd-header-buttons .btn-link--secondary:hover {
  background: var(--coral, #F28B82);
  border-color: var(--coral, #F28B82);
  color: #fff;
  transform: translateY(-2px);
}
/* Mobile Nav Buttons – NSD Style */
.nsd-mobile-nav .btn-link {
  display: block;
  margin: 0.5rem 0;
  padding: 0.6rem 1.2rem;
  text-align: center;
  font-weight: 600;
  border-radius: var(--radius-large, 16px);
  box-shadow: var(--shadow-base);
  transition: all .2s ease;
}

/* Primär: Rezepte entdecken */
.nsd-mobile-nav .btn-link {
  background: var(--cream, #fdfcf8);
  color: var(--color-primary, #234F28);
  border: 1px solid var(--color-primary, #234F28);
}
.nsd-mobile-nav .btn-link:hover {
  background: var(--color-primary, #234F28);
  color: #fff;
  transform: translateY(-2px);
}

/* Sekundär: Produkte shoppen */
.nsd-mobile-nav .btn-link--secondary {
  background: var(--color-primary, #234F28);
  color: #fff;
  border: 1px solid var(--color-primary, #234F28);
}
.nsd-mobile-nav .btn-link--secondary:hover {
  background: var(--coral, #F28B82);
  border-color: var(--coral, #F28B82);
  color: #fff;
  transform: translateY(-2px);
}

/* =========================================================
   HEADER HOTFIX – Navigation, Logo, Icons, Burger
   (funktioniert mit nsd-Header UND Dawn-Header)
   ========================================================= */

/* Hintergrund + Grundlayout */
.nsd-header,
.header { background: var(--nsd-green-header); }

.nsd-header-inner,
.header__wrapper,
.header__inline-menu { 
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Logo-Größe */
.nsd-logo img,
.header__heading-logo img { 
  max-height: 60px;
  height: auto;
  width: auto;
}

/* NAV: Liste horizontal + Bullets weg */
.nsd-nav ul,
.header .list-menu,
.header__inline-menu .list-menu,
.header__menu .list-menu {
  list-style: none !important;
  display: flex !important;
  gap: 1.2rem;
  margin: 0 !important;
  padding: 0 !important;
}

.nsd-nav li,
.header .list-menu > li { list-style: none !important; }

/* NAV: Links wie vorher (Farbe + Hover passt zu deinem Stil) */
.nsd-nav a,
.header .list-menu a {
  text-decoration: none;
  color: var(--nsd-green-dark);
  font-weight: 400;
  font-size: 1rem;
  padding: .4rem .6rem;
  border-radius: 6px;
  transition: background-color .2s ease, color .2s ease;
}
.nsd-nav a:hover,
.header .list-menu a:hover,
.nsd-nav a.active,
.header .list-menu .is-active > a {
  background: var(--nsd-apricot);
  color: var(--nsd-green-dark);
}

/* Icons rechts (Suche/Account/Cart) */
.nsd-icons,
.header__icons { 
  display: flex !important;
  align-items: center;
  gap: .8rem;
}
.nsd-icons a,
.header__icon {
  color: var(--nsd-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem;
  border-radius: 4px;
  transition: background-color .2s ease;
  text-decoration: none;
}
.nsd-icons a:hover,
.header__icon:hover { background: var(--nsd-cream-dark); }
.header__icon svg { width: 22px; height: 22px; fill: currentColor; }

/* Burger/Menu-Button farblich konsistent */
.nsd-header .header__icon--menu,
.header .header__icon--menu,
.nsd-header .menu-toggle,
.header .mobile-nav-toggle,
button[aria-controls="menu-drawer"] {
  color: var(--nsd-green-dark) !important;
  background: transparent;
  border: 0;
}
.nsd-header .header__icon--menu svg,
.header .header__icon--menu svg,
.nsd-header .menu-toggle svg,
.header .mobile-nav-toggle svg,
button[aria-controls="menu-drawer"] svg {
  width: 24px; height: 24px; fill: currentColor;
}
.nsd-header .header__icon--menu:hover,
.header .header__icon--menu:hover,
.nsd-header .menu-toggle:hover,
.header .mobile-nav-toggle:hover,
button[aria-controls="menu-drawer"]:hover {
  background: var(--nsd-cream-dark);
  border-radius: 6px;
}

/* Announcement-/Season-Bar: Links als Buttons */
.announcement-bar a,
.seasonal-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .95rem;
  margin-left: .35rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--nsd-green-dark);
  color: var(--nsd-green-dark);
  background: #fff0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.announcement-bar a:first-child,
.seasonal-bar a:first-child { margin-left: 0; }
.announcement-bar a:hover,
.seasonal-bar a:hover {
  background: var(--nsd-green-dark);
  color: #fff;
  border-color: var(--nsd-green-dark);
}

/* Kleine Sicherheitsnetze für Themes, die eigene Abstände setzen */
.header .list-menu > li > a { display: inline-flex; align-items: center; }
.header__heading,
.header__heading-link { margin: 0 !important; }

/* ===========================
   1) Burger nur auf Mobile
   =========================== */
.header__icon--menu,
button[aria-controls="menu-drawer"] {
  display: none !important; /* Standard: weg */
}

@media (max-width: 992px) {
  .header__icon--menu,
  button[aria-controls="menu-drawer"] {
    display: inline-flex !important; /* auf Mobile sichtbar */
  }
}

/* ===========================
   2) Mega-Menü Desktop
   =========================== */
.nsd-nav li {
  position: relative;
}

.nsd-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--nsd-cream);
  border: 2px solid var(--nsd-green-dark);
  border-radius: 6px;
  padding: .75rem 1rem;
  min-width: 220px;
  z-index: 50;
}

.nsd-nav li:hover > ul {
  display: block;
}

.nsd-nav li ul li {
  margin: .3rem 0;
}

.nsd-nav li ul a {
  color: var(--nsd-green-dark);
  text-decoration: none;
  padding: .35rem .6rem;
  display: block;
  border-radius: 4px;
  transition: background-color .25s ease, color .25s ease;
}

.nsd-nav li ul a:hover {
  background-color: var(--nsd-apricot);
  color: var(--nsd-green-dark);
}

/* ===========================
   3) Header Buttons (Style)
   =========================== */
.nsd-nav .btn-link {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  background-color: var(--nsd-green-dark);
  color: #fff !important;
  transition: background-color .25s ease, transform .2s ease;
}

.nsd-nav .btn-link:hover {
  background-color: var(--nsd-coral);
  transform: translateY(-2px);
}

/* Extra Farben für verschiedene Buttons */
.nsd-nav .btn-link--secondary {
  background-color: var(--nsd-apricot);
  color: var(--nsd-green-dark) !important;
}
.nsd-nav .btn-link--secondary:hover {
  background-color: var(--nsd-coral);
  color: #fff !important;
}
/* ============ Header: Buttons ============ */
.btn-link{
  display:inline-block;
  padding:.55rem .95rem;
  border-radius:999px;
  background:var(--nsd-green-dark);
  color:#fff !important;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background .2s ease, transform .1s ease;
}
.btn-link:hover{ background:#3e6945; transform:translateY(-1px); }

.btn-link--secondary{
  background:var(--nsd-coral);
}
.btn-link--secondary:hover{
  background:var(--nsd-apricot);
  color:var(--nsd-green-dark) !important;
}

/* ============ Burger sichtbar NUR mobil ============ */
.nsd-burger{
  display:none; /* Desktop aus */
  align-items:center;
  justify-content:center;
  gap:.25rem;
  padding:.45rem .55rem;
  border:2px solid var(--nsd-green-dark);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.nsd-burger svg{ width:22px; height:22px; stroke:var(--nsd-green-dark); }
.nsd-burger:hover{ background:var(--nsd-apricot); border-color:var(--nsd-green-dark); }

/* Desktop: Nav + Buttons sichtbar, Burger weg */
@media (min-width: 992px){
  .nsd-nav{ display:block; }
  .nsd-header-buttons{ display:flex; gap:.6rem; }
  .nsd-burger{ display:none; }
}

/* Mobil/Tablet: Burger sichtbar, Nav/Buttons weg */
@media (max-width: 991px){
  .nsd-nav, .nsd-header-buttons{ display:none !important; }
  .nsd-burger{ display:inline-flex; }
}

/* ============ Mega-/Dropdown-Menü (Desktop) ============ */
.nsd-nav > ul{ display:flex; gap:1.2rem; align-items:center; }
.nsd-nav > ul > li{ position:relative; }
.nsd-nav a{ text-decoration:none; color:var(--nsd-green-dark); padding:.35rem .55rem; border-radius:6px; }
.nsd-nav a.active, .nsd-nav a:hover{
  background:var(--nsd-apricot); color:var(--nsd-green-dark);
}

/* Submenu-Box (Ebene 1) */
.nsd-nav .submenu{
  position:absolute; top:calc(100% + 8px); left:0;
  display:block; visibility:hidden; opacity:0; pointer-events:none;
  min-width:240px; max-width:480px;
  background:#fff;
  border:2px solid var(--nsd-green-dark);
  border-radius:10px;
  padding:.6rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:50;
}

/* Show on hover/focus */
.nsd-nav > ul > li:hover > .submenu,
.nsd-nav > ul > li:focus-within > .submenu{
  visibility:visible; opacity:1; pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s;
}
.nsd-nav .submenu > li{ list-style:none; }
.nsd-nav .submenu > li > a{
  display:block; padding:.4rem .5rem; border-radius:6px; white-space:nowrap;
}
.nsd-nav .submenu > li > a:hover{
  background:var(--nsd-cream-dark); color:var(--nsd-green-dark);
}

/* Submenu Ebene 2 (flyout nach rechts) */
.nsd-nav .submenu .submenu--level2{
  position:absolute; top:-2px; left:calc(100% + 8px);
  min-width:220px;
  visibility:hidden; opacity:0; pointer-events:none;
  background:#fff; border:2px solid var(--nsd-green-dark);
  border-radius:10px; padding:.5rem; box-shadow:0 10px 24px rgba(0,0,0,.08);
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nsd-nav .submenu > li:hover > .submenu--level2{
  visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0);
}

/* Kleinere Finessen */
.nsd-header-inner{ gap:1rem; }
.nsd-header-buttons{ align-items:center; }

/* === Global: Cream & kein horizontales Scrollen === */
:root{
  --nsd-cream: #fdfcf8; /* Stelle sicher, dass dieser Wert überall gleich ist */
}
html, body{
  background: var(--nsd-cream) !important;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;         /* horizontales Scrollen aus */
}

/* Medien immer responsiv */
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Sicherheitsnetz: nichts darf breiter als der Viewport sein */
*, *::before, *::after{ box-sizing: border-box; }
body *{ max-width: 100vw; }

/* Full-Width-Bereiche: Überläufe verstecken (Slider/Banner) */
.slideshow, .banner, .Hero, .image-banner, .nsd-hero-section{
  overflow-x: hidden;
}

/* Testimonials/Abschnitte auf Cream-Hintergrund zwingen */
.shopify-section[id*="testimonial"],
.nsd-testimonials,
.nsd-testimonials-section,
.section--testimonials{
  background: var(--nsd-cream) !important;
}

/* Optional: Haupt-Content leicht begrenzen, ohne Fullwidth-Banner zu killen */
.page-width, .container, .nsd-container, .shopify-section--main > .page-width{
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
/* === Mega-Menü Hintergrund fix === */
.nsd-nav ul li ul,   /* Standard Dropdown */
.nsd-nav .mega-menu, /* Mega Menü falls genutzt */
.nsd-mega-menu, 
.mega-menu__content {
  background: var(--nsd-cream) !important;
  border: 1px solid var(--nsd-green-dark);
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: .8rem 1rem;
  z-index: 9999;
}

/* Links im Mega Menü */
.nsd-nav ul li ul a,
.nsd-nav .mega-menu a,
.nsd-mega-menu a {
  color: var(--nsd-green-dark);
  text-decoration: none;
  padding: .4rem .8rem;
  display: block;
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}

.nsd-nav ul li ul a:hover,
.nsd-nav .mega-menu a:hover,
.nsd-mega-menu a:hover {
  background-color: var(--nsd-apricot);
  color: var(--nsd-green-dark);
}
/* Hover-Buffer Dropdown-Fix */
.nsd-nav .hover-buffer {
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  width: 100%;
  z-index: 10;
  pointer-events: auto;
}

/* === STARTSEITE: Hero Clean (Edge-to-Edge mit Über-uns-Karte) === */

/* 🧱 Wrapper neutralisieren */
body.template-index .shopify-section:has(.nsd-hero-section) {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.template-index .shopify-section:has(.nsd-hero-section) .page-width {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 🌿 Hero-Bereich (Hintergrund + Text) */
body.template-index section.nsd-hero-section {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nsd-cream) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* 📸 Hero-Bild */
.nsd-hero-bg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  object-fit: cover;
}

/* 🧠 Hero-Text-Grid */
.nsd-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: min(4vw, 48px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero-text .nsd-hero-title {
  font-family: var(--font-heading, serif);
  font-weight: 700;
  color: var(--nsd-green-dark);
  line-height: 1.15;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  margin: 0 0 .6rem 0;
  white-space: pre-line;
}
.hero-text .nsd-hero-subtitle {
  color: var(--nsd-hover-text);
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  margin: 0;
}
.nsd-button-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* 🎯 Über-uns-Karte (zentriert + mit Overlap) */
:root {
  --nsd-overlap: -20px; /* ✅ Orange sichtbar */
}
.hero-about {
  margin-top: var(--nsd-overlap);
  background: #fdfcf8;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
  padding: clamp(16px, 2.4vw, 28px);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px; /* ✅ mehr Abstand nach unten */
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
}
.hero-about-image img {
  width: clamp(160px, 26vw, 240px);
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  object-fit: cover;
}
.hero-about-text h2 {
  font-family: var(--font-heading, serif);
  color: var(--nsd-green-dark);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin: 0 0 .4rem 0;
}
.hero-about-text p {
  color: var(--nsd-hover-text);
  line-height: 1.6;
  margin: 0 0 .8rem 0;
}
.hero-about-text a {
  display: inline-block;
  padding: .65rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--nsd-green-dark);
  color: var(--nsd-green-dark);
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hero-about-text a:hover {
  background: var(--nsd-green-dark);
  color: #fff;
}
/*************************************************
 * Blogbeitrag Vorlage
 *************************************************/
.nsd-article-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.nsd-article-image-wrapper {
  max-width: 800px;
  margin: 2rem auto;
}

.affiliate-hinweis {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  margin-top: 2rem;
}
.back-to-section-wrapper {
  text-align: center;
  margin-bottom: 2rem;
}

.button.button--secondary {
  padding: 0.8rem 2rem;
  font-size: 1rem;
}

.nsd-article-image-wrapper {
  max-width: 800px;
  margin: 2rem auto;
}

.nsd-article-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.rezepte-header {
  text-align: center;
  margin-bottom: 2rem;
}

.article-date {
  color: #4a5c4d;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.rte {
  padding: 2rem 1rem;
}

.affiliate-hinweis {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  margin-top: 2rem;
}


/* 📱 Responsive */
@media (max-width: 989px) {
  .nsd-hero-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .hero-about {
    margin-top: 1rem !important;
    flex-direction: column;
    text-align: center;
  }
  .hero-about-image img {
    width: min(100%, 320px);
    height: auto;
  }
}
/*************************************************
 * NSD – Blog CSS (FINAL) – Übersicht + Artikel
 *************************************************/

/* ========== GLOBAL ========== */
:root {
  --nsd-sticky-top: 84px;
}

/* ========== Blog-Übersicht ========== */

/* Grid & Karten */
body.template-blog .blog-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
body.template-blog .article-card-wrapper,
body.template-blog .article-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.template-blog .card__content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1 1 auto;
}
body.template-blog .recipe-card__btn {
  margin-top: auto;
}

/* Bild */
body.template-blog .article-card__image-wrapper {
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 8px;
}
body.template-blog .article-card__image-wrapper img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 6px;
}

/* Tags */
body.template-blog .article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
body.template-blog .article-card__tag,
body.template-blog .article-tag {
  background: var(--nsd-green-light, #e4f3ea);
  color: var(--nsd-green-dark, #1a412d);
  font-size: .75rem;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Buttons */
body.template-blog .recipe-card__btn {
  display: inline-block;
  background: var(--nsd-green-dark, #1a412d);
  color: #fff;
  padding: .45rem 1rem;
  font-size: .9rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background .3s ease;
}
body.template-blog .recipe-card__btn:hover {
  background: var(--nsd-coral, #d86556);
}
body.template-blog .recipe-card__btn:focus,
body.template-blog .pagination__link:focus,
body.template-blog .blog-tag:focus {
  outline: 2px solid var(--nsd-coral);
  outline-offset: 2px;
}

/* Filter-Leiste */
body.template-blog .blog-tags-filter-wrap {
  position: sticky;
  top: var(--nsd-sticky-top);
  z-index: 30;
  background: var(--nsd-cream, #fdfcf8);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  padding: .5rem 0;
}
body.template-blog .blog-tags-filter-wrap.is-stuck {
  box-shadow: 0 6px 12px rgba(0, 0, 0, .06);
}
body.template-blog .blog-tags-filter {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .25rem .5rem;
  scrollbar-width: thin;
}
body.template-blog .blog-tags-filter .blog-tag {
  padding: .4rem .85rem;
  background: var(--nsd-green-light, #f0f6f2);
  color: var(--nsd-green-dark, #1a412d);
  border-radius: 30px;
  font-size: .95rem;
  white-space: nowrap;
  transition: all .25s ease;
  cursor: pointer;
}
body.template-blog .blog-tags-filter .blog-tag:hover {
  background: var(--nsd-green-lighter, #d4ede1);
}
body.template-blog .blog-tags-filter .blog-tag.active {
  background: var(--nsd-green-dark, #1a412d);
  color: #fff;
  font-weight: 700;
}

/* Pagination */
body.template-blog .pagination {
  margin-top: 3rem;
  text-align: center;
}
body.template-blog .pagination__list {
  display: inline-flex;
  gap: .5rem;
  padding: 0;
  list-style: none;
}
body.template-blog .pagination__link {
  padding: .5rem .9rem;
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  font-size: .95rem;
  transition: background .2s;
}
body.template-blog .pagination__link:hover {
  background: var(--nsd-green-light, #d4ede1);
}
body.template-blog .pagination__link--active {
  background: var(--nsd-green-dark, #215c4f);
  color: #fff;
  font-weight: 700;
}

/* Sticky Fix */
.nsd-catbar,
.nsd-blog-filter-wrap {
  position: sticky;
  top: var(--nsd-sticky-top);
  z-index: 20;
  background: var(--nsd-cream, #fdfcf8);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nsd-catbar.is-stuck {
  box-shadow: 0 6px 12px rgba(0,0,0,.06);
}

/* Anti-Reveal */
body.template-blog .scroll-trigger,
body.template-blog [class*="animate--"],
body.template-blog [data-animate],
body.template-blog [data-cascade],
body.template-blog [style*="display:none"],
body.template-blog [style*="display: none"],
body.template-blog [hidden],
body.template-blog [style*="visibility:hidden"],
body.template-blog [style*="visibility: hidden"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ========== Artikel-Detailseite ========== */
/* ========== Artikelbild im Beitrag (zentriert, moderat groß & responsive) ========== */
body.template-article .nsd-article-image {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 2rem auto;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* Kommentarformular */
body.template-article form[action*="/comments"],
form[action*="/comments"] {
  max-width: 640px;
  margin: 3rem auto 2rem;
  padding: 2rem;
  background: #fdfcf8;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  font-family: inherit;
}
form[action*="/comments"] label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  color: var(--nsd-green-dark, #1a412d);
}
form[action*="/comments"] input[type="text"],
form[action*="/comments"] input[type="email"],
form[action*="/comments"] textarea {
  width: 100%;
  padding: .65rem .75rem;
  margin-bottom: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
form[action*="/comments"] textarea {
  min-height: 120px;
  resize: vertical;
}
form[action*="/comments"] .ds-checkbox {
  display: flex;
  align-items: center;
  font-size: .9rem;
  gap: .5rem;
}
form[action*="/comments"] .ds-checkbox input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}

/* Kommentarbutton */
form[action*="/comments"] input[type="submit"],
form[action*="/comments"] button {
  background: var(--nsd-green-dark, #1a412d);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .65rem 1.25rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease;
}
form[action*="/comments"] input[type="submit"]:hover,
form[action*="/comments"] button:hover {
  background: var(--nsd-coral, #d86556);
}

/* Kommentaranzeige */
body.template-article .article-comments {
  background: #fdfcf8;
  padding: 2rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  max-width: 700px;
  margin: 3rem auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.02);
}
body.template-article .article-comments h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--nsd-green-dark, #1a412d);
}
body.template-article .article-comments__list {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 1rem;
}
body.template-article .article-comments__list li {
  margin-bottom: 1.25rem;
  line-height: 1.4;
}
.comment-success {
  background: #e4f3ea;
  border: 1px solid #b6dbc6;
  color: #1a412d;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}


/* Share-Link unter Artikel */
.article-social-text,
form[action*="/comments"] + p {
  max-width: 640px;
  margin: 2rem auto;
  text-align: center;
  font-size: 0.95rem;
  color: #1f3c2f;
}
.article-social-text a,
form[action*="/comments"] + p a {
  color: #1f3c2f;
  text-decoration: underline;
  margin: 0 .25rem;
  transition: color .2s;
}
.article-social-text a:hover,
form[action*="/comments"] + p a:hover {
  color: var(--nsd-coral, #d86556);
}
/*************************************************
 * NSD – Blogvorschau auf Startseite (blog-preview.liquid)
 *************************************************/

.blog-preview {
  background-color: var(--nsd-cream, #fdfcf8);
  padding: 4rem 2rem;
}

.section-heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--nsd-green-dark, #1a412d);
  font-size: 2.2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.blog-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.blog-content {
  padding: 1.5rem;
  font-family: var(--font-base, 'Open Sans', sans-serif);
  color: var(--color-text, #333333);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-content h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--nsd-green-dark, #1a412d);
}

.blog-content p {
  flex-grow: 1;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--color-text, #333333);
}

.blog-content .btn {
  background-color: var(--nsd-green-dark, #1a412d);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
  align-self: start;
}

.blog-content .btn:hover {
  background-color: var(--nsd-coral, #d86556);
  color: white;
}
/*************************************************
 *Instagram Beiträge Startseite
 *************************************************/
.instagram-feed {
  background: var(--nsd-cream, #fdfcf8);
  padding: 4rem 2rem;
  text-align: center;
}

.instagram-feed .section-heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--nsd-green-dark, #1a412d);
  font-size: 2.2rem;
  margin-bottom: 2rem;
}

.instagram-wrapper {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .instagram-feed {
    padding: 3rem 1rem;
  }

  .instagram-feed .section-heading {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }

  .instagram-wrapper iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}
/* SnapWidget Overlay ausblenden */
.snapwidget-widget iframe {
  pointer-events: none; /* verhindert Interaktion, entfernt Hover-Overlay */
}
/* Instagram-Trenner & Button - final */
.instagram-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.instagram-divider {
  height: 1px;
  background: rgba(34, 75, 45, 0.15);
  width: 80%;
  max-width: 700px;
}

.btn-instagram {
  display: inline-block;
  background-color: var(--nsd-green-dark, #1a412d);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-size: 1rem;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.btn-instagram:hover {
  background-color: var(--nsd-coral, #d86556);
  color: #fff;
}
/*************************************************
 * DIY Vorschaukarten Startseite
 *************************************************/
.diy-preview {
  padding: 4rem 2rem;
  background: var(--nsd-cream, #fdfcf8);
  text-align: center;
}

.diy-preview .section-heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--nsd-green-dark, #1a412d);
  font-size: 2.2rem;
  margin-bottom: 2.5rem;
}

.diy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.diy-card {
  background: var(--nsd-cream, #fdfcf8);
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diy-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.diy-card h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
  color: var(--nsd-green-dark, #1a412d);
}

.diy-card p {
  font-size: .95rem;
  margin-bottom: 1rem;
  color: #555;
}

.btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn,
.btn-outline {
  padding: .55rem 1.2rem;
  border-radius: 30px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all .3s ease;
}

.btn {
  background: var(--nsd-green-dark, #1a412d);
  color: #fff;
}

.btn:hover {
  background: var(--nsd-coral, #d86556);
}

.btn-outline {
  background: transparent;
  color: var(--nsd-green-dark, #1a412d);
  border: 2px solid var(--nsd-green-dark, #1a412d);
}

.btn-outline:hover {
  background: var(--nsd-green-light, #e4f3ea);
  color: var(--nsd-green-dark, #1a412d); /* bessere Lesbarkeit */
}
/* === Rezepte Übersicht === */
.rezepte-header {
  background-color: var(--cream);
  padding: 60px 20px;
  text-align: center;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-soft);
  border-bottom: 1px solid var(--green);
  font-family: var(--font-heading);
}
.rezepte-header h1 {
  font-size: 2.5rem;
  color: var(--green);
  margin-bottom: 10px;
}
.rezepte-header p {
  font-size: 1.1rem;
  color: var(--color-text);
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font-base);
}

/* === Rezept-Grid === */
.rezepte-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  background-color: var(--cream);
}

/* === Rezeptkarte === */
.recipe-card {
  background: var(--cream);
  border: 1px solid var(--green);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-base);
  max-width: 300px;
  overflow: hidden;
  text-align: center;
  transition: transform .2s ease;
}
.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.recipe-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--green);
}
.recipe-card h3 {
  color: var(--green);
  margin: 15px 0 6px;
  text-align: center;
  font-size: 1.1rem;
  font-family: var(--font-heading);
}
.recipe-card p {
  color: var(--color-text);
  padding: 0 14px 14px;
  font-size: .95rem;
  text-align: center;
  font-family: var(--font-base);
}
.recipe-card ul {
  text-align: left;
  padding: 0 22px 18px;
  font-size: .9rem;
  color: var(--color-text);
  margin: 0;
  font-family: var(--font-base);
}

/* === Buttons === */
.recipe-card__btn {
  display: inline-block;
  margin: 0 14px 16px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--green);
  border-radius: var(--radius-base);
  background: var(--cream);
  color: var(--green);
  text-decoration: none;
  font-family: var(--font-base);
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-base);
  cursor: pointer;
}
.recipe-card__btn:hover {
  background: var(--apricot);
  color: var(--green);
  box-shadow: var(--shadow-soft);
}
.recipe-card__btn:focus-visible {
  outline: 2px solid var(--apricot);
  outline-offset: 2px;
}
.recipe-card__btn--secondary { background: #fff; }
.recipe-card__btn--ghost {
  background: transparent;
  border-style: dashed;
}
.recipe-card__btn:active {
  transform: translateY(1px);
}

/* === Aktionen unter der Karte === */
.recipe-card__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 14px 16px;
  flex-wrap: wrap;
}

/* === Filterbar === */
.rezepte-filters {
  background: var(--cream);
  border: 1px solid var(--green);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-base);
  padding: 12px 14px;
  margin: 18px auto 0;
  max-width: 1100px;
}
.rezepte-filters__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
}
.rezepte-filters label {
  display: grid;
  gap: 6px;
  color: var(--color-text);
  font-family: var(--font-base);
}
.rezepte-filters select,
.rezepte-filters input {
  border: 1px solid var(--green);
  border-radius: var(--radius-base);
  padding: .45rem .6rem;
  background: #fff;
  color: var(--color-text);
}
.rezepte-filter--reset {
  border: 1px solid var(--green);
  background: var(--cream);
  border-radius: var(--radius-base);
  padding: .45rem .8rem;
  cursor: pointer;
  transition: background .2s ease;
}
.rezepte-filter--reset:hover {
  background: var(--apricot);
}

/* === Responsive Filterbar === */
@media (max-width: 989px) {
  .rezepte-filters__row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 749px) {
  .rezepte-filters__row {
    gap: .75rem;
  }
}

/* === Modal === */
.recipe-modal[hidden] { display: none; }
.recipe-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.recipe-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.recipe-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: min(900px, 92vw);
  max-height: 86vh;
  margin: 6vh auto;
  background: var(--cream);
  border: 1px solid var(--green);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.recipe-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--cream);
  cursor: pointer;
}
.recipe-modal__inner {
  padding: 18px;
  overflow: auto;
  max-height: 86vh;
}
.recipe-modal__img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--green);
}

/* ========================================
   NSD Blog Tagged Layout Styles
   Eingebunden von GPT am 28.08.2025
   ======================================== */

:root {
  --color-primary: #234F28;
  --color-secondary: #A1AF78;
  --color-accent: #8BAA91;
  --color-text: #333333;
  --color-bg: #fdfcf8;
  --green: #2E4A3B;
  --sage: #8BAA91;
  --beige: #D6E1D3;
  --coral: #F28B82;
  --apricot: #F7C59F;
  --cream: #FDFCF8;
  --brown: #4B3B36;
  --font-base: 'Open Sans', sans-serif;
  --font-heading: 'Playfair Display', serif;
  --radius-base: 8px;
  --radius-large: 16px;
  --shadow-base: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* =========================
   Layout: Blog Tagged Page
   ========================= */

.nsd-tagged-header {
  margin-bottom: 2rem;
  text-align: center;
}

.nsd-tagged-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.nsd-tagged-description {
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--color-text);
  max-width: 40rem;
  margin: 0 auto 1.5rem;
}

.nsd-tagged-filter {
  margin-top: 1rem;
}

.nsd-tagged-filter label {
  font-family: var(--font-base);
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

#blog-filter {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-base);
  font-family: var(--font-base);
  background: #fff;
}

/* Artikel-Grid */
.nsd-tagged-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .nsd-tagged-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .nsd-tagged-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nsd-tagged-card {
  background: var(--cream);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out;
}
.nsd-tagged-card:hover,
.nsd-tagged-card:focus-within {
  transform: translateY(-3px);
}

.nsd-tagged-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-base);
}

.nsd-tagged-card a {
  text-decoration: underline; /* WCAG: non-color visual indicator */
  color: inherit;
  display: inline-block;
}
.nsd-tagged-card a:hover,
.nsd-tagged-card a:focus {
  outline: 3px dashed var(--color-primary);
  outline-offset: 2px;
}

.nsd-tagged-card h2 {
  margin: 0.75rem 0 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-primary);
  line-height: 1.3;
}

.nsd-tagged-card p {
  font-family: var(--font-base);
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.nsd-tagged-card time {
  font-size: 0.85rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.article-tags {
  margin: 0 1rem 1rem;
}
.article-tags .tag {
  font-size: 0.75rem;
  background: var(--beige);
  color: var(--color-primary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-base);
}

/* Button in Card */
.nsd-tagged-card .btn {
  display: inline-block;
  margin: 0 1rem 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-base);
  border-radius: var(--radius-base);
  text-decoration: none;
  transition: background 0.3s ease;
}
.nsd-tagged-card .btn:hover {
  background: var(--green);
}

/* SEO-Text Block */
.nsd-seo-text {
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--beige);
  padding: 1.5rem;
  border-radius: var(--radius-large);
  margin-top: 2rem;
  text-align: center;
}

/* Kein Ergebnis */
.nsd-empty {
  font-family: var(--font-base);
  font-size: 1.1rem;
  color: var(--color-secondary);
  text-align: center;
  margin-top: 2rem;
}

/* Debug-Ausgabe */
.debug-output {
  font-family: var(--font-base);
  font-size: 0.9rem;
  background: #f5f5f5;
  padding: 0.75rem;
  border: 1px dashed #ccc;
  margin-top: 2rem;
  color: var(--color-text);
}

/* === Rezepte: Luft, Chips, Bild, Menü === */
.nsd-rezept-hero__inner { padding-top:.25rem; margin-bottom:1rem; }
.nsd-rezept-hero__kicker { margin-bottom:.25rem; opacity:.85; }
.nsd-rezept-hero__title { margin:.15rem 0 .6rem; line-height:1.2; }

.nsd-rezept-hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem .75rem;
  padding:.5rem .75rem; margin-bottom:.85rem;
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  background:var(--nsd-cream,#fdfcf8);
}
.nsd-badge{ display:inline-block; padding:.25rem .6rem; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:#fff; }
.nsd-badge--tone{ background:#eef4e7; border-color:rgba(0,0,0,.06); }

.nsd-rezept-hero__actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem; margin-bottom:1.1rem; }
.btn-pill{ border-radius:999px; padding:.5rem .9rem; }

.nsd-rezept-hero__media{ margin:.25rem auto 1rem; border-radius:16px; overflow:hidden; }
.nsd-rezept-hero__media img{ width:100%; height:auto; max-height:440px; object-fit:cover; }

.nsd-rezept-nav{ margin:.25rem auto 1.1rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.nsd-rezept-nav a{ padding:.45rem .8rem; border:1px solid rgba(0,0,0,.08); border-radius:999px; text-decoration:none; }

.nsd-section{ margin:1.25rem auto 1rem; }
.nsd-ingredients li, .nsd-steps li{ line-height:1.55; margin:.25rem 0 .4rem; }

.nsd-notes__text, .nsd-notes__list{
  background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:1rem 1.1rem; line-height:1.6;
}

#shop .btn-primary, .nsd-buy-btn{
  background:#fff; color:inherit; border:1px solid rgba(0,0,0,.12);
  border-radius:999px; padding:.55rem 1rem;
}
/* === Rezepte: Cream-Hintergrund konsequent === */
.nsd-article--rezepte,
.nsd-rezept-hero,
.nsd-rezept-nav,
.nsd-section { background: var(--color-bg, #fdfcf8); }

/* RTE: keine weiße Box */
.nsd-rezept-content.rte,
.nsd-ingredients.rte,
.nsd-steps.rte { background: transparent; }

/* Hinweise/Nährwerte gleichmäßig & Bullets sauber */
.nsd-notes__text, .nsd-notes__list{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  line-height: 1.6;
}
.nsd-notes__list ul, .nsd-notes__list li { margin-left: 1.1rem; }
.nsd-notes__list li { margin: .25rem 0 .4rem; }

/* Buy-Button Styleguide-grün */
.nsd-buy-btn{
  background: var(--color-primary, #234F28) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary, #234F28) !important;
  border-radius: 999px; padding: .6rem 1.1rem;
}
.nsd-buy-btn:hover{ background: var(--green,#2E4A3B) !important; border-color: var(--green,#2E4A3B) !important; }

/* Preis-Darstellung */
.nsd-price{ margin:.5rem 0 .25rem; }
.nsd-price--compare{ text-decoration:line-through; opacity:.6; margin-right:.4rem; }
.nsd-price--sale{ font-weight:700; }

/* Abstände/Lockerheit (wie besprochen) – falls noch nicht gesetzt */
.nsd-rezept-hero__inner { padding-top:.25rem; margin-bottom:1rem; }
.nsd-rezept-hero__title { margin:.15rem 0 .6rem; line-height:1.2; }
.nsd-rezept-hero__meta{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; padding:.5rem .75rem; margin-bottom:.85rem; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:var(--color-bg,#fdfcf8); }
.nsd-rezept-hero__actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.25rem 0 1.1rem; }
.nsd-rezept-hero__media{ margin:.25rem auto 1rem; border-radius:16px; overflow:hidden; }
.nsd-rezept-hero__media img{ width:100%; height:auto; max-height:440px; object-fit:cover; }
.nsd-rezept-nav{ margin:.25rem auto 1.1rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.nsd-rezept-nav a{ padding:.45rem .8rem; border:1px solid rgba(0,0,0,.08); border-radius:999px; text-decoration:none; }
.nsd-section{ margin:1.25rem auto 1rem; }
.nsd-ingredients li, .nsd-steps li{ line-height:1.55; margin:.25rem 0 .4rem; }

/* Cream-Hintergrund überall im Rezept */
.nsd-article--rezepte,
.nsd-rezept-hero,
.nsd-rezept-nav,
.nsd-section { background: var(--color-bg, #fdfcf8); }

/* Hinweise/Nährwerte – locker & bullets */
.nsd-notes__text, .nsd-notes__list{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  line-height: 1.6;
}
.nsd-notes__list li{ margin:.25rem 0 .4rem; }

/* Affiliate-Button im Styleguide-Grün */
#shop .sr-aff-btn{
  background: var(--color-primary, #234F28);
  color:#fff;
  border:1px solid var(--color-primary, #234F28);
  border-radius:999px;
  padding:.6rem 1.1rem;
}
#shop .sr-aff-btn:hover{ background: var(--green,#2E4A3B); border-color: var(--green,#2E4A3B); }

/* Preis-Typo */
.sr-price--compare{ text-decoration:line-through; opacity:.6; margin-right:.4rem; }
.sr-price--sale{ font-weight:700; }

/* === Rezepte · gleiche Optik & Zeilenabstand wie "Hinweise" === */

/* Box-Optik + Luft */
.nsd-ingredients.rte,
.nsd-steps.rte,
.nsd-callout--tip {
  background: var(--nsd-cream, #fdfcf8);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  line-height: 1.6;
  margin-top: .5rem;   /* etwas Abstand zur Überschrift */
  overflow-wrap: anywhere; /* bricht sehr lange Wörter sauber um */
}

/* Listen schön locker */
.nsd-ingredients ul,
.nsd-steps ol,
.nsd-callout--tip ul {
  margin: 0;
  padding-left: 1.25rem;
}

.nsd-ingredients li,
.nsd-steps li,
.nsd-callout--tip li {
  margin: .25rem 0 .35rem;
}
.nsd-ingredients.rte ul { list-style: disc; padding-left: 1.25rem; }
.nsd-steps.rte ol      { list-style: decimal; padding-left: 1.25rem; }

/* „Pro-Tipp“: Mini-Feinschliff */
.nsd-callout--tip strong {
  display: inline-block;
  margin-bottom: .3rem;
}

/* Überschriften vs. Box: etwas Luft */
#zutaten h2,
#zubereitung h2,
#hinweise h2 {
  margin-bottom: .6rem;
}
/* === Head: Buttons & einheitliche Chips === */

/* Kicker ausblenden (falls im Template noch vorhanden) */
.nsd-rezept-hero__kicker { display: none !important; }

/* Back-Buttons oben */
.nsd-rezepte-back{
  display:flex; gap:.5rem; align-items:center;
  margin:.25rem auto .75rem;
}
.nsd-back-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.48rem .9rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  line-height:1;
}
.nsd-back-btn:hover{ background:#f3f7f1; }

/* Meta-Chips: alle denselben hellen Ton wie „Gesichtspflege“ */
.nsd-rezept-hero__meta .nsd-badge{
  background:#eef4e7;            /* heller, freundlicher Hintergrund */
  border-color:rgba(0,0,0,.06);
}

/* (etwas Luft – falls noch nicht gesetzt) */
.nsd-rezept-hero__meta{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  padding:.5rem .75rem;
  margin-bottom:.9rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:var(--color-bg,#fdfcf8);
}
/* === Back-Buttons wie "Drucken" gestalten === */
.nsd-rezepte-back{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin:.25rem auto .75rem;
}

.nsd-back-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem 1rem;
  border-radius:999px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:background .15s ease, box-shadow .15s ease, transform .06s ease;
}
.nsd-back-btn:hover{
  background:#f5f8f2;              /* zarter Hover wie bei den Pills */
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
/* Erzwinge weiße Pill-Optik trotz Theme-Button */
.nsd-rezepte-back .btn-secondary.nsd-back-btn,
.nsd-rezepte-back .nsd-back-link{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1rem;border-radius:999px;
  background-color:#fff !important;color:inherit !important;text-decoration:none !important;
  border:1px solid rgba(0,0,0,.12) !important;box-shadow:0 1px 2px rgba(0,0,0,.04) !important;
  transition:background .15s ease,box-shadow .15s ease,transform .06s ease;
}
.nsd-rezepte-back .btn-secondary.nsd-back-btn:hover,
.nsd-rezepte-back .nsd-back-link:hover{
  background-color:#f5f8f2 !important;box-shadow:0 2px 6px rgba(0,0,0,.08) !important;transform:translateY(-1px);
}

/* Back-Buttons – exakt wie "Drucken"-Pill */
.nsd-rezepte-back{display:flex;gap:.5rem;align-items:center;margin:.25rem auto .75rem;}
.nsd-rezepte-back .nsd-back-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1rem;border-radius:999px;
  background:#fff;border:1px solid rgba(0,0,0,.12);
  color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04);
  line-height:1; font-weight: 400; /* wie Sense-Buttons */
  transition:background .15s ease,box-shadow .15s ease,transform .06s ease;
}
.nsd-rezepte-back .nsd-back-btn:hover{
  background:#f5f8f2;box-shadow:0 2px 6px rgba(0,0,0,.08);transform:translateY(-1px);
}
.nsd-rezepte-back .nsd-back-btn:focus-visible{
  outline:2px solid var(--color-primary,#234F28);outline-offset:2px;
}
.nsd-rezepte-back .nsd-back-btn:active{transform:translateY(0);}

/* Meta-Chips: alle gleich hell (wie "Gesichtspflege") */
.nsd-rezept-hero__meta .nsd-badge{
  background:#eef4e7;            /* heller, einheitlicher Ton */
  border-color:rgba(0,0,0,.06);
  color:inherit;
}
/* Back-Buttons: Standard hellgrün wie die Meta-Chips */
.nsd-rezepte-back .nsd-back-btn,
.nsd-rezepte-back .btn-secondary.nsd-back-btn{
  background:#eef4e7 !important;
  border:1px solid rgba(0,0,0,.06) !important;
  color:inherit;
}

.nsd-rezepte-back .nsd-back-btn:hover,
.nsd-rezepte-back .btn-secondary.nsd-back-btn:hover{
  background:#e6f0e0 !important; /* zarter Hover */
}
/* ================================
   NSD · Blog/Text · Final Styles
   - Side-by-Side Blöcke (nsd-split)
   - Floats im Fließtext
   - Lesbarkeit im RTE
   ================================ */

/* ——— Side-by-Side: Text + Bild ——— */
.nsd-split{
  display: grid;
  grid-template-columns: 1fr;                /* mobil: untereinander */
  grid-template-areas:
    "text"
    "media";
  gap: 1.25rem 2rem;
  align-items: center;
  padding: 1.25rem 1.1rem;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: var(--color-bg, #fdfcf8);
  margin: 1.25rem 0 1.6rem;
}

.nsd-split__text{ grid-area: text; }
.nsd-split__media{ grid-area: media; margin: 0; }
.nsd-split__media img{
  width: 100%; height: auto; display: block;
  border-radius: 12px; object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.nsd-split__text > *:first-child{ margin-top: 0; }
.nsd-split__text p{ line-height: 1.75; margin: .75rem 0; }

@media (min-width: 760px){
  .nsd-split{
    grid-template-columns: 1.15fr 0.85fr;    /* Text etwas breiter */
    grid-template-areas: "text media";
  }
  /* Bild links Variante */
  .nsd-split--reverse{
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas: "media text";
  }
}

/* ——— Bilder neben Text (ohne Wrapper) ——— */
.nsd-rezept-content.rte img.nsd-float-right{
  float: right;
  width: min(40%, 420px);
  margin: .25rem 0 1rem 1.1rem;
  border-radius: 12px;
}
.nsd-rezept-content.rte img.nsd-float-left{
  float: left;
  width: min(40%, 420px);
  margin: .25rem 1.1rem 1rem 0;
  border-radius: 12px;
}
/* Float-Fallback mobil */
@media (max-width: 900px){
  .nsd-rezept-content.rte img.nsd-float-right,
  .nsd-rezept-content.rte img.nsd-float-left{
    float: none;
    display: block;
    width: 100%;
    margin: .5rem 0 1rem 0;
  }
}
/* Schutz: nichts unter die Floats rutschen lassen */
.nsd-rezept-content.rte::after{ content:""; display:block; clear:both; }

/* ——— Lesbarkeit im Intro/Textbereich ——— */
.nsd-rezept-content.rte{
  --nsd-lh: 1.75;   /* Zeilenhöhe */
  --nsd-p-gap: 1rem;/* Absatzabstand */
  --nsd-li-gap: .45rem; /* Abstand zwischen LI */
}

.nsd-rezept-content.rte p{
  line-height: var(--nsd-lh);
  margin: .2rem 0 var(--nsd-p-gap);
}

.nsd-rezept-content.rte h2{
  line-height: 1.3;
  margin: 1.25rem 0 .6rem;
}

.nsd-rezept-content.rte ul,
.nsd-rezept-content.rte ol{
  padding-left: 1.25rem;
  margin: .25rem 0 1.1rem;
}

.nsd-rezept-content.rte li{
  line-height: calc(var(--nsd-lh) - .05);
  margin: .15rem 0 var(--nsd-li-gap);
}

/* leichte Veredelung für Bilder im Fließtext */
.nsd-rezept-content.rte img{ border-radius: 12px; }

/* ================================
   Shop Produkte Startseite
   ================================ */
.nsd-wrapper {
  background-color: var(--color-bg);
  padding: 60px 20px;
  font-family: var(--font-base);
}

.section-title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.product-card {
  background: white;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-base);
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
}

.product-info {
  padding: 16px;
  text-align: center;
}

.product-info h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 8px;
}

.product-info .price {
  font-size: 1rem;
  color: var(--color-secondary);
}
/* Layout & Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

/* Card */
.product-card {
  background: white;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-base);
}
.product-image img {
  width: 100%;
  height: auto;
  display: block;
}
.product-info {
  padding: 16px;
  text-align: center;
}
.product-info h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 8px;
}
.product-info .price {
  font-size: 1rem;
  color: var(--color-secondary);
}

/* Button */
.load-more-wrapper {
  text-align: center;
}
.load-more-btn {
  background-color: var(--color-primary);
  color: white;
  padding: 12px 24px;
  font-family: var(--font-base);
  font-size: 1rem;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-base);
  text-decoration: none;
  transition: background 0.3s;
}
.load-more-btn:hover {
  background-color: var(--color-secondary);
}
.nsd-filters {
  margin-bottom: 30px;
  text-align: center;
  font-family: var(--font-base);
}
.nsd-filters label {
  margin-right: 10px;
  font-weight: bold;
  color: var(--color-text);
}
.nsd-filters select {
  padding: 8px 12px;
  border-radius: var(--radius-base);
  border: 1px solid #ccc;
}

/* Hovers und Effekte */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-base);
}
.load-more-wrapper {
  text-align: center;
  margin-top: 30px;
}
.load-more-btn {
  background-color: var(--color-primary);
  color: white;
  padding: 12px 24px;
  font-family: var(--font-base);
  font-size: 1rem;
  border-radius: var(--radius-base);
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.load-more-btn:hover {
  background-color: var(--color-secondary);
}
.add-to-cart-btn {
  margin-top: 10px;
  background-color: var(--color-accent);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-base);
  font-family: var(--font-base);
  cursor: pointer;
  transition: background 0.3s ease;
}
.add-to-cart-btn:hover {
  background-color: var(--color-secondary);
}
.add-to-cart-btn.added {
  background-color: var(--color-primary);
}
/* === NSD · Eigener Mini-Cart (Overlay) – Clean === */
.mini-cart-overlay{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 400px; height: 100%;
  background: #fff; box-shadow: -4px 0 16px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .3s ease;
  z-index: 9999; padding: 24px; overflow-y: auto;
}
.mini-cart-overlay.open{ transform: translateX(0) }

.mini-cart{ display:flex; flex-direction:column }
.mini-cart-close{
  position:absolute; top:10px; right:20px;
  background:none; border:0; font-size:2rem; cursor:pointer;
}
.mini-cart h3{ font-family: var(--font-heading); margin-bottom:20px }

.mini-cart-item{
  display:flex; align-items:center;
  gap: 1rem; margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid #eee;
}
.mini-cart-thumb img{ border-radius:4px }
.mini-cart-empty{ text-align:center; padding:2rem; color:#777; font-style:italic }
.mini-cart-empty .empty-icon{ font-size:2.5rem; margin-bottom:.5rem }

.mini-cart-total{ margin-top: 16px; font-weight:700 }

.mini-cart-footer{
  margin-top: 24px; display:flex; flex-direction:column; gap:10px;
}

/* NSD-Button-Look im eigenen Overlay */
.mini-cart-footer .button,
.mini-cart-footer .btn,
.mini-cart .button-primary{
  background: var(--nsd-green, #2e6b32) !important;
  color: #fff !important;
  border: 2px solid var(--nsd-green, #2e6b32) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}
.mini-cart-footer .button:hover,
.mini-cart-footer .btn:hover,
.mini-cart .button-primary:hover{
  background:#fff !important;
  color: var(--nsd-green, #2e6b32) !important;
  border-color: var(--nsd-green, #2e6b32) !important;
}

.sticky-cart-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 1.1rem;
  z-index: 9999;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background 0.2s;
}

.sticky-cart-btn:hover {
  background: #333;
}

#cart-count {
  background: #e63946;
  color: #fff;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
  font-size: 0.9rem;
}
.product-card {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: box-shadow 0.3s ease;
  background: #fff;
  position: relative;
}

.product-card:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.product-card img {
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.product-card:hover img {
  transform: scale(1.02);
}

.product-title {
  font-size: 1rem;
  margin: 0 0 5px;
  color: #333;
}

.product-price {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.price-sale {
  color: #c40000;
  font-weight: bold;
  margin-right: 5px;
}

.price-compare {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9rem;
}

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
  border-radius: 3px;
}

.badge-sale {
  background-color: #d0021b;
}

.badge-new {
  background-color: #007b5e;
}

.add-to-cart-form button {
  background-color: #007b5e;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.25s;
}

.add-to-cart-form button:hover {
  background-color: #005f47;
}
/* Produktgrid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Produktkarte */
.product-card {
  border: 1px solid #e0e0e0;
  padding: 1rem;
  background-color: #fff;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

/* Preisgestaltung */
.product-price {
  margin-top: 0.5rem;
}

.price-sale {
  color: #d32f2f;
  font-weight: bold;
}

.price-compare {
  text-decoration: line-through;
  color: #999;
  margin-left: 0.5rem;
}

/* Badges */
.badge {
  position: absolute;
  background: #222;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  top: 0.5rem;
  left: 0.5rem;
}

.badge-new {
  background: #4caf50;
}

.badge-sale {
  background: #ff5722;
  top: 2rem;
}

/* Button */
.nsd-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: #222;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.nsd-btn:hover {
  background: #444;
}
.collection-list-wrapper {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.collection-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.collection-tile {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s;
  background-color: #fff;
}

.collection-tile:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.collection-image img {
  width: 100%;
  height: auto;
  display: block;
}

.collection-title {
  font-size: 1.3rem;
  margin: 1rem;
}

.collection-description {
  font-size: 0.95rem;
  margin: 0 1rem 1rem;
  color: #666;
}

.no-image {
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-style: italic;
}
/* ================================
   Collection-more Shop Übersicht
   ================================ */
/* Grid für Produktkarten */
.collection-load-more-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem 1rem;
}

@media (max-width: 1024px) {
  .collection-load-more-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .collection-load-more-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Produktkarte */
.product-card {
  background-color: var(--cream);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Produktbild */
.product-image {
  padding: 1rem;
  text-align: center;
}

.product-image img {
  max-height: 160px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: inline-block;
  border-radius: var(--radius-base);
}

/* Info (Titel, Preis, Buttons) */
.product-info {
  padding: 0 1rem 1.2rem;
  font-family: var(--font-base);
  text-align: center;
}

.product-info h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0.3rem 0 0.2rem;
  color: var(--color-primary);
}

.product-info .price {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-secondary);
}

/* Warenkorb + Affiliate Buttons */
.nsd-btn.small {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  background-color: var(--color-primary);
  color: white;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nsd-btn-load {
  background-color: var(--nsd-green-dark);
  color: white;
  padding: 0.6em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-heading);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.nsd-btn-load:hover {
  background-color: var(--nsd-green);
  color: white;
}
/* Affiliate-Hinweis */
.nsd-affiliate-hinweis {
  font-size: 0.75rem;
  color: #555;
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* Filter oben */
.collection-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1rem 0;
  justify-content: center;
}

.tag-filter {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background-color: var(--beige);
  font-size: 0.85rem;
  color: var(--color-primary);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-filter.active,
.tag-filter:hover {
  background-color: var(--color-primary);
  color: white;
}

/* --- NSD Kontaktseite Feinschliff (100% Variablen) --- */

/* Grundlayout */
.nsd-contact {
  background: var(--cream);
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* Typografie */
.nsd-kicker {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  color: var(--color-primary);
  opacity: .8;
}

.nsd-contact__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
  color: var(--color-primary);
}

/* Cards */
.nsd-contact .card {
  background: #fff;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 2.5vw, 24px);
}

.nsd-tiles .tile {
  text-align: center;
  padding: 1.5rem;
}
.tile__icon {
  font-size: 2rem;
  margin-bottom: .5rem;
}
.tile__title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
}

/* Buttons */
.nsd-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border: 0;
  font-weight: 600;
  transition: all .25s ease;
}

.nsd-btn--primary:hover {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Links */
.nsd-link {
  color: var(--coral);
  text-decoration: underline;
}

/* Formularfelder */
.nsd-field label {
  font-weight: 600;
  margin-bottom: .25rem;
  display: block;
  color: var(--color-text);
}

.nsd-field input,
.nsd-field textarea {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius-large);
  padding: .8rem 1rem;
  background: #fff;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}

.nsd-field input:focus,
.nsd-field textarea:focus {
  outline: 2px solid var(--apricot);
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--apricot);
}

/* Checkboxen */
.nsd-consent input[type="checkbox"],
.nsd-optin input[type="checkbox"] {
  accent-color: var(--coral);
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
}

/* FAQ */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  font-weight: 700;
}
.faq-item[open] summary::after { content: "–"; }

/* Responsive */
@media (min-width: 900px) {
  .nsd-contact__grid {
    grid-template-columns: 1fr 0.8fr;
    align-items: flex-start;
  }
}
/* Mehr Abstand nach oben */
.nsd-contact__intro {
  margin-bottom: 2rem;
}

/* Formular visuell absetzen */
.nsd-contact__form {
  border: 1px solid rgba(0,0,0,.05);
}

/* Sidebar immer sichtbar ab 900px */
@media (min-width: 900px) {
  .nsd-contact__grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
/* Sidebar etwas enger, damit das Formular optisch dominiert */
@media (min-width: 900px){
  .nsd-contact__grid{ grid-template-columns: 1.25fr .75fr; }
}
.nsd-tiles .tile .tile__text{ opacity:.9; }

/* --- NSD Policy-Seiten (Datenschutz, AGB, Widerruf etc.) --- */

.shopify-policy__title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
  color: var(--color-primary, #234F28);
  text-align: left;
}

.shopify-policy__body {
  font-family: var(--font-base, 'Open Sans', sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text, #333);
  background: var(--cream, #FDFCF8);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-large, 16px);
  box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,0.05));
  max-width: 900px;
  margin: 2rem auto;
}

/* Unterüberschriften */
.shopify-policy__body h2,
.shopify-policy__body h3 {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-weight: 600;
  color: var(--color-primary, #234F28);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.shopify-policy__body h2 {
  font-size: 1.5rem;
  border-bottom: 2px solid var(--apricot, #F7C59F);
  padding-bottom: .25rem;
}

.shopify-policy__body h3 {
  font-size: 1.2rem;
}

/* Absätze & Listen */
.shopify-policy__body p {
  margin-bottom: 1rem;
}

.shopify-policy__body ul {
  margin: 1rem 0 1.5rem 1.5rem;
  list-style: disc;
}

.shopify-policy__body li {
  margin-bottom: .5rem;
}

/* Links */
.shopify-policy__body a {
  color: var(--coral, #F28B82);
  text-decoration: underline;
  transition: color .2s ease;
}
.shopify-policy__body a:hover {
  color: var(--color-primary, #234F28);
}

/* Responsive */
@media (max-width: 768px) {
  .shopify-policy__body {
    padding: 1.25rem;
    font-size: .95rem;
  }
  .shopify-policy__body h2 { font-size: 1.35rem; }
  .shopify-policy__body h3 { font-size: 1.1rem; }
}
/* --- NSD Policy-Seiten: Einheitlicher Stil für AGB, Datenschutz, Widerruf, Impressum --- */

/* Rahmen/Container */
.shopify-policy__container,
.page-width .shopify-policy__container { max-width: 1000px; margin: 0 auto; }

.shopify-policy__title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--color-primary, #234F28);
  margin: 0 0 .5rem;
}

.shopify-policy__body {
  background: var(--cream, #FDFCF8);
  color: var(--color-text, #333);
  font-family: var(--font-base, 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  line-height: 1.66;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-large, 16px);
  box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,.05));
}

/* Überschriften */
.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body h4 {
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--color-primary, #234F28);
  margin: 2rem 0 .75rem;
}

.shopify-policy__body h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  border-bottom: 2px solid var(--apricot, #F7C59F);
  padding-bottom: .25rem;
}

.shopify-policy__body h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); }
.shopify-policy__body h4 { font-size: 1.05rem; letter-spacing: .01em; }

/* Fließtext & Listen */
.shopify-policy__body p { margin: 0 0 1rem; }
.shopify-policy__body ul,
.shopify-policy__body ol { margin: .75rem 0 1.25rem 1.25rem; }
.shopify-policy__body li { margin: .4rem 0; }

/* Tabellen (falls du welche nutzt, z.B. Lieferländer) */
.shopify-policy__body table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  background: #fff; border-radius: 12px; overflow: hidden;
}
.shopify-policy__body th,
.shopify-policy__body td {
  padding: .75rem .9rem; border-bottom: 1px solid rgba(0,0,0,.06);
}
.shopify-policy__body th { text-align: left; color: var(--color-primary, #234F28); }

/* Links */
.shopify-policy__body a {
  color: var(--coral, #F28B82);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.shopify-policy__body a:hover { color: var(--color-primary, #234F28); }

/* Callouts/Emphasis */
.shopify-policy__body em { color: inherit; }
.shopify-policy__body strong { font-weight: 700; }

/* Spacing rund um den Block (Seitenrand) */
.shopify-policy__container + * { margin-top: 2rem; }

/* Mobile Tweaks */
@media (max-width: 768px) {
  .shopify-policy__body { padding: 1rem; font-size: .97rem; }
  .shopify-policy__title { font-size: 1.8rem; }
}

/* Optional: Druckansicht sauber */
@media print {
  .shopify-policy__body {
    box-shadow: none; background: #fff; color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  a { color: #000; text-decoration: underline; }
}
/* --- NSD Policy ToC --- */
.nsd-policy-toc {
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:1rem 1.25rem;
  margin:0 0 1.25rem;
  box-shadow: var(--shadow-soft,0 4px 16px rgba(0,0,0,.05));
}
.nsd-policy-toc h4 {
  margin:0 0 .5rem;
  font-family: var(--font-heading,'Playfair Display',serif);
  color: var(--color-primary,#234F28);
  font-size:1.05rem;
}
.nsd-policy-toc ol { margin:0; padding-left:1.1rem; }
.nsd-policy-toc li { margin:.25rem 0; }
.nsd-policy-toc a { text-decoration: none; color: var(--color-text,#333); }
.nsd-policy-toc a:hover { text-decoration: underline; color: var(--color-primary,#234F28); }
/* --- NSD Policy-Seiten: einheitlicher Stil --- */
.shopify-policy__container,
.page-width .shopify-policy__container { max-width: 1000px; margin: 0 auto; }

.shopify-policy__title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--color-primary, #234F28);
  margin: 0 0 .5rem;
}

.shopify-policy__body {
  background: var(--cream, #FDFCF8);
  color: var(--color-text, #333);
  font-family: var(--font-base, 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  line-height: 1.66;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-large, 16px);
  box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,.05));
}

/* Überschriften */
.shopify-policy__body h2,
.shopify-policy__body h3,
.shopify-policy__body h4 {
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--color-primary, #234F28);
  margin: 2rem 0 .75rem;
}

.shopify-policy__body h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  border-bottom: 2px solid var(--apricot, #F7C59F);
  padding-bottom: .25rem;
}
.shopify-policy__body h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); }
.shopify-policy__body h4 { font-size: 1.05rem; letter-spacing: .01em; }

/* Fließtext & Listen */
.shopify-policy__body p { margin: 0 0 1rem; }
.shopify-policy__body ul,
.shopify-policy__body ol { margin: .75rem 0 1.25rem 1.25rem; }
.shopify-policy__body li { margin: .4rem 0; }

/* Tabellen (falls genutzt) */
.shopify-policy__body table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  background: #fff; border-radius: 12px; overflow: hidden;
}
.shopify-policy__body th,
.shopify-policy__body td { padding: .75rem .9rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.shopify-policy__body th { text-align: left; color: var(--color-primary, #234F28); }

/* Links */
.shopify-policy__body a {
  color: var(--coral, #F28B82);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.shopify-policy__body a:hover { color: var(--color-primary, #234F28); }

/* Mobile */
@media (max-width: 768px) {
  .shopify-policy__body { padding: 1rem; font-size: .97rem; }
  .shopify-policy__title { font-size: 1.8rem; }
}

/* Print */
@media print {
  .shopify-policy__body { box-shadow: none; background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}
/* Impressum Karten */
.impressum-card {
  background: var(--cream, #FDFCF8); /* statt #fff */
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-large,16px);
  padding:1.25rem 1.5rem;
  margin:0 0 1.25rem;
  box-shadow: var(--shadow-soft,0 4px 16px rgba(0,0,0,.05));
}


.impressum-card h3 {
  font-family: var(--font-heading,'Playfair Display',serif);
  font-size:1.2rem;
  margin:0 0 .5rem;
  color: var(--color-primary,#234F28);
}

.impressum-card p {
  margin:0;
  line-height:1.5;
}

.impressum-card a {
  color: var(--coral,#F28B82);
  text-decoration: underline;
}
.impressum-card a:hover {
  color: var(--color-primary,#234F28);
}
/* --- NSD Widerrufsformular Box --- */
.shopify-policy__body pre {
  white-space: pre-wrap;
  background: var(--cream, #FDFCF8);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-large,16px);
  padding: 1rem 1.25rem;
  margin: 1rem 0 2rem;
  font-family: var(--font-base, 'Open Sans', sans-serif);
  font-size: .95rem;
  line-height: 1.5;
  box-shadow: var(--shadow-soft,0 4px 16px rgba(0,0,0,.05));
}

.shopify-policy__body pre strong {
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--color-primary, #234F28);
}
/* NSD FAQ Accordions */
.faq-item {
  border-top: 1px solid rgba(0,0,0,.08);
  padding: .75rem 0;
}
.faq-item:first-of-type { border-top: 0; }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  font-family: var(--font-base, 'Open Sans', sans-serif);
  color: var(--color-primary, #234F28);
  position: relative;
  padding: .35rem 1.5rem .35rem 0;
  border-radius: 8px;
  transition: background-color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Hover-Effekt */
.faq-item summary:hover {
  background: var(--apricot, #F7C59F);
  color: var(--color-primary, #234F28);
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-weight: 700;
  color: var(--coral, #F28B82);
  transition: transform .2s ease, color .2s ease;
}
.faq-item[open] summary::after {
  content: "–";
  color: var(--color-primary, #234F28);
}

.faq-item p {
  margin: .5rem 0 0;
  line-height: 1.5;
  font-size: .95rem;
  color: var(--color-text, #333);
}
/* FAQ Panels (Animation-Container) */
.faq-panel {
  overflow: hidden;
  /* max-height + transition werden per JS gesetzt */
  will-change: max-height;
  margin-top: .5rem;
}

/* Tastaturfokus sichtbar (gut für A11y) */
.faq-item summary:focus {
  outline: 2px solid var(--apricot, #F7C59F);
  outline-offset: 2px;
}

/* Blog-Hub Grid (falls genutzt) */
.nsd-blog-hub .nsd-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.nsd-blog-hub .tile {
  display: block;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  text-decoration: none;
  color: var(--color-primary, #234F28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nsd-blog-hub .tile:hover { transform: translateY(-2px); }

/* Artikelkarten (Magazin) */
.nsd-article-card {
  display: block;
  background: var(--cream, #FDFCF8);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  text-decoration: none;
  color: var(--color-primary, #234F28);
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border: 1px solid var(--beige, #D6E1D3);
}
.nsd-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: var(--sage, #8BAA91);
}

/* NSD Topics – passt zu deinem HTML: .nsd-grid + .tile */
.nsd-topics { --nsd-cream: #fdfcf8; --nsd-green: var(--nsd-green, #234F28); }
.nsd-topics .nsd-grid {
  display: grid;
  gap: var(--gap, 12px);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.nsd-topics .tile {
  display: flex; align-items: center; gap: .5rem;
  background: var(--nsd-cream);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius, 14px);
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  text-decoration: none;
  color: var(--nsd-green);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nsd-topics .tile:hover,
.nsd-topics .tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}
.nsd-topics .emoji { font-size: 1.2rem; line-height: 1; }
.nsd-topics .label { font-weight: 600; }

/* Intro-Box unter den Kacheln */
.nsd-intro-box {
  margin: 1rem 0 0;
  padding: 14px 16px;
  background: var(--cream, #FDFCF8);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.nsd-intro-title {
  margin: 0 0 .35rem;
  color: var(--color-primary, #234F28);
  font-size: 1.05rem;
  font-weight: 700;
}
.nsd-intro-text { margin: 0 0 .5rem; color: var(--color-text, #333); opacity: .95; }
.nsd-intro-link {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--color-primary, #234F28);
  color: var(--color-primary, #234F28);
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nsd-intro-link:hover {
  background: var(--color-primary, #234F28);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* NSD – Pagination UI */
.nsd-pg{display:flex;gap:10px;justify-content:center;align-items:center;margin:24px 0}
.nsd-pg a,.nsd-pg span{display:inline-block;padding:.6rem .9rem;border-radius:999px;
  background:var(--cream,#FDFCF8);box-shadow:0 4px 16px rgba(0,0,0,.06);
  text-decoration:none;color:var(--color-primary,#234F28);font-weight:600}
.nsd-pg .is-current{background:var(--color-primary,#234F28);color:#fff}
.nsd-pg a:hover{transform:translateY(-1px)}

/* =========================================================
   NSD · REZEPTE – GESAMT-CSS (bereinigt & final)
   ========================================================= */

/* ---------- Header / 3-Spalten-Layout ---------- */
.nsd-header-inner{
  background: var(--nsd-cream,#fdfcf8);
  padding: 1.25rem 0 1.5rem;
}
.nsd-header-grid{
  display:grid !important;
  grid-template-columns:240px minmax(0,1fr) 340px; /* links | mitte | rechts */
  gap:2rem; align-items:start;
}
.col-left .nsd-back-buttons{ display:grid; gap:.35rem; }
.nsd-under-title{ display:grid; gap:.7rem; margin-bottom:.6rem; }
.nsd-share-buttons{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.nsd-share-label{ font-size:.95rem; margin-right:.25rem; }
.nsd-jump-links{ display:flex; flex-wrap:wrap; gap:1rem; }
.nsd-jump-links a{ text-decoration:none; }

.col-right{ display:grid; gap:1rem; }
.nsd-meta-wrap{
  background:#e9f2e5; padding:1rem 1.1rem; border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.nsd-meta-headline{ font-weight:700; font-size:.95rem; color:#2d5a2f; margin-bottom:.5rem; }

.nsd-hero__title{ margin:.2rem 0 .8rem; }
.nsd-hero__img{ width:100%; max-height:360px; object-fit:cover; }

.nsd-header .nsd-action-buttons{ display:flex; gap:.8rem; justify-content:flex-start; margin:.5rem 0 0; }
.nsd-header .nsd-action-buttons button{
  appearance:none; background:#fff; color:#234F28;
  border:2px solid #234F28; border-radius:999px;
  padding:.55rem 1.1rem; font-weight:700; font-size:.95rem; line-height:1;
  cursor:pointer; transition:transform .15s ease, background .2s ease;
}
.nsd-header .nsd-action-buttons button:hover{ background:#234F28; color:#fff; transform:translateY(-1px); }
.nsd-header .nsd-action-buttons button:focus{ outline:2px solid #234F28; outline-offset:2px; }

/* Responsive Header */
@media (max-width:980px){
  .nsd-header-grid{ grid-template-columns:1fr; }
  .col-left{ order:1; } .col-center{ order:2; } .col-right{ order:3; }
  .nsd-header .nsd-action-buttons{ justify-content:flex-start; margin-top:.25rem; }
}

/* ---------- Meta-Pills (Zeit, Yield, Schwierigkeit, Hauttyp) ---------- */
.nsd-meta-bubbles{ display:flex; flex-wrap:wrap; gap:.6rem; line-height:1.5; }
.meta-bubble{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#f4f4f4; color:#234F28;
  padding:.38rem 1rem; min-height:32px; line-height:1;
  border-radius:999px; font-size:.9rem; font-weight:500; white-space:nowrap;
}
/* Hauttyp als Chips – mehrere Werte als einzelne „Pills“ */
.meta-bubble.meta-skin-chip{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
/* Alternative (Mehrzeiler) – falls gewünscht:
.meta-bubble.meta-skin{ white-space:normal; line-height:1.3; padding:.45rem 1rem; } */

/* ---------- Rezeptkarte (Rahmen + Bereiche) ---------- */
.rezept-card{
  background:#fff; border:1px solid #e8e8e8; border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  padding:1.6rem 2rem 2rem; max-width:960px; margin:2rem auto;
}
.rezept-card-title{
  font:700 1.8rem/1.25 var(--nsd-serif,Merriweather,serif);
  color:#234F28; text-align:center; margin:0 0 1.2rem;
  padding-bottom:.6rem; border-bottom:2px dashed #e3e3e3;
}
.rezept-card .rezept-box{
  background:#fdfcf8; border:1px solid #eee; border-radius:12px;
  padding:1.1rem 1.4rem; margin:1.1rem 0;
}
.rezept-card .rezept-box h3{ margin:0 0 .6rem; color:#234F28; font-size:1.2rem; }

/* Boxen Typografie */
.rezept-box h2{ margin:0 0 .75rem; font-size:1.5rem; line-height:1.25; }
.rezept-box p{ margin:.4rem 0 .8rem; line-height:1.7; }
.rezept-box ul, .rezept-box ol{ margin:.2rem 0 0; padding-left:1.25rem; }
.rezept-box li{ margin:.25rem 0 .35rem; line-height:1.65; }
.rezept-box ul li::marker{ color:#234F28; }

/* Zutaten 2-spaltig ab 720px */
#zutaten ul{ column-gap:2rem; }
@media (min-width:720px){ #zutaten ul{ columns:2; } }

/* Hinweise/Pro Tipp Panels */
#hinweise{ background:#f7faf4; border:1px solid #e2e9dd; }
#hinweise h2{ margin-bottom:.6rem; }
#hinweise p + p{ margin-top:.6rem; }

#protip{ background:#fff7f5; border:1px solid #ffe3dd; }
#protip h2{ margin-bottom:.4rem; }
#protip p{ font-weight:500; }

@media (max-width:760px){ .rezept-card{ padding:1.2rem 1rem 1.4rem; } }

/* ---------- Kommentarbereich ---------- */
#kommentare{
  max-width:720px; margin:3rem auto; padding:2rem;
  background:#fdfcf8; border:1px solid #e5e5e5; border-radius:14px;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
}
#kommentare h2{ font-size:1.6rem; margin-bottom:1.2rem; color:#234F28; text-align:center; }
#kommentare label{ display:block; font-weight:600; margin:.8rem 0 .3rem; color:#234F28; }
#kommentare input, #kommentare textarea{
  width:100%; border:1px solid #ccc; border-radius:8px;
  padding:.6rem .8rem; font-size:.95rem; font-family:inherit;
}
#kommentare textarea{ min-height:120px; resize:vertical; }
#kommentare .kommentar-dsgvo-hinweis{ font-size:.8rem; margin:1rem 0; color:#666; display:flex; align-items:center; gap:.5rem; }
#kommentare button[type="submit"]{
  background:#234F28; color:#fff; border:none; padding:.7rem 1.4rem;
  border-radius:999px; font-weight:600; cursor:pointer; transition:background .2s;
}

/* ---------- Feature-Card / Story-Block ---------- */
.nsd-feature-card{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:2rem;
  padding:clamp(1.2rem,2vw + .6rem,2rem);
  background:#fff; border:1px solid #e8eee4; border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.nsd-feature-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:8px; border-radius:18px 0 0 18px;
  background:linear-gradient(180deg,#76b07e,#3e6c46); opacity:.85;
}
/* Akzentfarben */
.nsd-feature-card.is-sun::before{ background:linear-gradient(180deg,#ffd97a,#ffb84a); }
.nsd-feature-card.is-mint::before{ background:linear-gradient(180deg,#b9f3d1,#7ed9ae); } /* FIXED */

.nsd-feature-title{
  font:800 clamp(1.25rem,1.2rem + .8vw,1.7rem)/1.25 var(--nsd-serif,Merriweather,serif);
  color:#234F28; margin:0 0 .6rem; display:inline-block;
  background:linear-gradient(transparent 70%, #e6f2e9 70%); padding-bottom:.15rem;
}
.nsd-feature-body{ color:#2b4030; }
.nsd-feature-body p{ margin:.6rem 0 1rem; line-height:1.75; }
.nsd-feature-body p:first-of-type::first-letter{
  float:left; font:800 2.6rem/1 var(--nsd-serif,Merriweather,serif);
  color:#234F28; margin:.18rem .4rem 0 0;
}
.nsd-feature-media{ align-self:center; border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.08); }
.nsd-feature-media img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

/* Gespiegelte Variante */
.nsd-feature-card.is-reverse{ grid-template-columns:.85fr 1.15fr; }
.nsd-feature-card.is-reverse .nsd-feature-media{ order:-1; }
.nsd-feature-card.is-reverse::before{ left:auto; right:0; border-radius:0 18px 18px 0; }

/* ---------- Listen / Bullets ---------- */
ul.nsd-bullets{ list-style:none; padding-left:0; margin:.4rem 0 1rem; }
ul.nsd-bullets li{ position:relative; padding-left:1.7rem; margin:.35rem 0; line-height:1.7; }

/* 1) grüne Checks (Vorteile/Wirkung) */
ul.nsd-checks li::before{
  content:"✓"; position:absolute; left:0; top:.05rem; color:#2f6b3a; font-weight:800;
}
/* 2) Sonne (Wann passt es?) */
ul.nsd-sun li::before{
  content:"☀"; position:absolute; left:0; top:.05rem; color:#d08a00; font-weight:800;
}
/* 3) Blättchen (Nachhaltigkeit/DIY) */
ul.nsd-leaf li::before{ content:"🌿"; position:absolute; left:0; top:.05rem; }

/* 2-Spalten-Option auf breiten Screens */
@media (min-width:920px){
  .nsd-columns-2{ columns:2; column-gap:2rem; }
  .nsd-columns-2 li{ break-inside:avoid; }
}

/* Pill-Variante (kurze Punkte) – optional */
ul.nsd-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
ul.nsd-pills li{
  padding:.35rem .75rem .35rem 2rem; margin:0;
  background:#f6faf4; border:1px solid #e3eddc; border-radius:999px;
}

/* ---------- Shop: Karten vertikal (Titel → Bild → Preis → Button) ---------- */

/* A) generischer Fallback für .nsd-shop-vertical (Theme-Karten) */
.nsd-shop-vertical .card,
.nsd-shop-vertical .product-card,
.nsd-shop-vertical .sr-card{ display:block !important; }

.nsd-shop-vertical :is(.card,.product-card,.sr-card)
  :is(.card__inner,.card__content,.card__information,.card-information,
      .inner,.row,.rows,.columns,.col,.actions,.card__actions,
      .price__row,.price-wrapper,.price-wrap,.button-wrapper,
      .grid,[class*="grid"],.flex,[class*="flex"],[class*="--row"],[class*="-row"]){
  display:block !important; width:100% !important; float:none !important; clear:none !important; gap:0 !important;
}

.nsd-shop-vertical :is(h3,.card__heading,.title,[class*="card-title"]){ display:block !important; margin:0 0 .35rem; font-weight:700; line-height:1.35; }
.nsd-shop-vertical :is(.card__media,.media,figure){ display:block !important; margin:.2rem 0 .4rem !important; }
.nsd-shop-vertical img{ width:100% !important; height:auto !important; object-fit:cover; border-radius:10px; display:block; }
.nsd-shop-vertical :is(.price,.sr-price,[class*="price"],.price__regular,.price-item){
  display:block !important; margin:.2rem 0 .5rem; font-weight:600;
}
.nsd-shop-vertical :is(a.button,.button,.btn,.cta,button,[class*="buy"]){
  display:block !important; width:100% !important; text-align:center;
  background:#234F28 !important; color:#fff !important;
  border:none !important; border-radius:999px !important; padding:.7rem 1rem !important; font-weight:700; cursor:pointer;
}
.nsd-shop-vertical :is(a.button,.button,.btn,.cta,button,[class*="buy"]):hover{ background:#1c3e20 !important; }

/* B) Section „NSD · Shop the Recipe“ (sr-*) */
#shop .shop-recipe-box--cart .sr-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
}
@media (max-width:700px){ #shop .shop-recipe-box--cart .sr-grid{ grid-template-columns:1fr; } }

#shop .shop-recipe-box--cart .sr-item{
  display:grid !important; grid-template-columns:1fr !important; gap:.7rem;
  background:#fff; border:1px solid #e8e8e8; border-radius:14px;
  padding:1rem; box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:transform .12s ease, box-shadow .12s ease;
}
#shop .shop-recipe-box--cart .sr-item:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); }

#shop .shop-recipe-box--cart .sr-item .sr-title{ order:1; margin:0; font-weight:700; }
#shop .shop-recipe-box--cart .sr-item .sr-thumb{ order:2; width:100% !important; aspect-ratio:4/3; overflow:hidden; border-radius:12px; }
#shop .shop-recipe-box--cart .sr-item .sr-thumb img{ width:100% !important; height:100% !important; object-fit:cover; }
#shop .shop-recipe-box--cart .sr-item .sr-info{ order:3; display:block !important; }
#shop .shop-recipe-box--cart .sr-item .sr-price{ display:block; margin:.35rem 0 .55rem; font-weight:600; opacity:.95; }
#shop .shop-recipe-box--cart .sr-item .sr-controls{ order:4; display:block !important; }
#shop .shop-recipe-box--cart .sr-item .sr-aff-btn,
#shop .shop-recipe-box--cart .sr-item .sr-add{
  display:block !important; width:100% !important; text-align:center;
  background:#234F28 !important; color:#fff !important;
  border:none !important; border-radius:999px !important; padding:.7rem 1rem !important; font-weight:700; cursor:pointer;
}
#shop .shop-recipe-box--cart .sr-item .sr-aff-btn:hover,
#shop .shop-recipe-box--cart .sr-item .sr-add:hover{ background:#1c3e20 !important; }

#shop .shop-recipe-box--cart .sr-item .sr-qty{ display:flex; gap:.35rem; align-items:center; margin:.2rem 0 .35rem; }
#shop .shop-recipe-box--cart .sr-item .sr-qty input{
  width:80px; padding:.45rem .6rem; border:1px solid rgba(0,0,0,.15); border-radius:10px;
}
/* Absicherungen gegen Reihen-Wrapper */
#shop .shop-recipe-box--cart .sr-item :is(.price__row,.price-wrapper,.button-wrapper){
  display:block !important; width:100% !important; gap:0 !important;
}

/* Kleiner Abstand über dem Affiliate-Hinweis */
.affiliate-disclaimer{ margin-top:.75rem; }
/* ===== Pretty lower section: Panels, Do/Don't, FAQ ===== */

/* 2-Panel Sektion (Wann & Nachhaltigkeit) */
.nsd-guide-grid{
  max-width: 960px;
  margin: 2rem auto 1rem;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.5rem;
}
@media (max-width: 900px){
  .nsd-guide-grid{ grid-template-columns: 1fr; }
}
.nsd-panel{
  background:#fff;
  border:1px solid #e8eee4;
  border-radius:14px;
  padding:1rem 1.2rem;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.nsd-panel h2{
  margin:.1rem 0 .6rem;
  color:#234F28;
}

/* Do's & Don'ts als 2 Karten */
.nsd-dosdonts{
  max-width: 960px;
  margin: 1.25rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 900px){
  .nsd-dosdonts{ grid-template-columns: 1fr; }
}
.nsd-dos, .nsd-donts{
  border-radius:12px;
  padding: 1rem 1.2rem;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.nsd-dos{
  border:1px solid #e3eddc;
  background:#f7faf4;
}
.nsd-donts{
  border:1px solid #ffe3dd;
  background:#fff7f5;
}
.nsd-dos h3, .nsd-donts h3{
  margin:0 0 .4rem; color:#234F28;
}
.nsd-list{ list-style:none; margin:.3rem 0 0; padding-left:0; }
.nsd-list li{
  position:relative;
  padding-left:1.6rem;
  margin:.32rem 0;
  line-height:1.65;
}
.nsd-list.nsd-good li::before{
  content:"✓";
  position:absolute; left:0; top:.05rem;
  color:#2f6b3a; font-weight:800;
}
.nsd-list.nsd-bad li::before{
  content:"✗";
  position:absolute; left:0; top:.05rem;
  color:#b23a2b; font-weight:800;
}
/* Do/Don't als Karten */
.nsd-dosdonts-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.nsd-card{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:1rem 1.2rem;
}
.nsd-card h3{
  margin:.1rem 0 .7rem;
  display:flex; align-items:center; gap:.5rem;
  font-weight:800;
}
.nsd-card.is-good h3{ color:#1f6a33; }
.nsd-card.is-warn h3{ color:#a52424; }
.nsd-card ul{ margin:0; padding-left:1.25rem; }
.nsd-card ul li{ margin:.35rem 0; line-height:1.65; }
/* Farbige Hintergründe für die neuen Karten */
.nsd-card.is-good{ background:#f7faf4; border-color:#e3eddc; }
.nsd-card.is-warn{ background:#fff7f5; border-color:#ffe3dd; }

/* (optional) Headline-Farben beibehalten */
.nsd-card.is-good h3{ color:#1f6a33; }
.nsd-card.is-warn h3{ color:#a52424; }
/* Farbakzent für neue Do/Don't-Karten */
.nsd-dosdonts-grid .nsd-card.is-good{
  background:#f7faf4;           /* zartes Grün */
  border-color:#e3eddc;
}
.nsd-dosdonts-grid .nsd-card.is-warn{
  background:#fff7f5;           /* zartes Apricot */
  border-color:#ffe3dd;
}
.nsd-dosdonts-grid .nsd-card.is-good h3{ color:#1f6a33; }
.nsd-dosdonts-grid .nsd-card.is-warn h3{ color:#a52424; }

/* (falls Theme etwas überschreibt) – Icons sicher einfärben */
.nsd-dosdonts-grid .nsd-card.is-good .nsd-list li::before{ content:"✓"; color:#2f6b3a; }
.nsd-dosdonts-grid .nsd-card.is-warn .nsd-list li::before{ content:"✗"; color:#b23a2b; }
/* Lock: Do/Don't Karten farblich fixieren */
.nsd-dosdonts .nsd-dos{ 
  background:#f7faf4 !important; 
  border-color:#e3eddc !important; 
}
.nsd-dosdonts .nsd-donts{ 
  background:#fff7f5 !important; 
  border-color:#ffe3dd !important; 
}
.nsd-dosdonts .nsd-dos h3{ color:#1f6a33 !important; }
.nsd-dosdonts .nsd-donts h3{ color:#a52424 !important; }
.nsd-list.nsd-good li::before{ color:#2f6b3a !important; }
.nsd-list.nsd-bad  li::before{ color:#b23a2b !important; }


/* FAQ: Akkordeon unter Rezeptkarte */
.nsd-faq{
  max-width: 960px;
  margin: 1.6rem auto 0;
}
.nsd-faq h2{
  color:#234F28;
  margin: 0 0 .6rem;
}
.nsd-faq details{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  padding:.85rem 1rem;
  margin:.6rem 0;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.nsd-faq summary{
  cursor:pointer;
  font-weight:700;
  display:flex; align-items:center; gap:.6rem;
  list-style:none;
}
.nsd-faq summary::-webkit-details-marker{ display:none; }
.nsd-faq summary:after{
  content:"▾";
  margin-left:auto;
  transition: transform .2s ease;
  opacity:.85;
}
.nsd-faq details[open] summary:after{ transform: rotate(180deg); }
.nsd-faq p{ margin:.5rem 0 0; line-height:1.65; }
/* Farb-Varianten für Panels (kein Weiß) */
.nsd-panel.is-olive{ background:#f6faf4; border-color:#e3eddc; }
.nsd-panel.is-sun{ background:#fff7f5; border-color:#ffe3dd; }
/* === Coffee Theme Tokens (sanfte Latte-Töne) ======================== */
:root{
  --nsd-bean: #6B4E3D;        /* Kaffeebohne (Schriftakzent) */
  --nsd-latte: #FCF7EF;       /* Band-Hintergrund zwischen Karten */
  --nsd-foam:  #FFF8ED;       /* sehr zarte Panels */
  --nsd-sun:   #FFDFA8;       /* feine Sonnen-Details */
}

/* === Bänder / Section-Hintergründe ================================== */
.nsd-band{ padding: clamp(1.2rem, 1.2rem + 1vw, 2rem) 0; }
.nsd-band--latte{ background: var(--nsd-latte); }
.nsd-band--soft{  background: linear-gradient(180deg,#fff, #fff8f2 60%, #fff); }

/* === Überschriften mit dezentem Coffee-Underline ==================== */
.nsd-deco-heading{
  position: relative; display:inline-block;
  font-weight: 800; color:#234F28;
}
.nsd-deco-heading::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:8px;
  background: linear-gradient(90deg, #e9f2e5 0, #ffe7be 60%, transparent 100%);
  border-radius: 6px;
}

/* === Panels angleichen (du nutzt nsd-panel bereits) ================= */
.nsd-panel{
  background: var(--nsd-foam);
  border: 1px solid #e7e1d7;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.nsd-panel h2{ margin-top:.2rem; color:#234F28; }

/* Listen-Marker „Bohne“ für coffee-spezifische Tipps (optional) */
ul.nsd-beans{ list-style:none; padding-left:0; margin:.4rem 0 1rem; }
ul.nsd-beans li{ position:relative; padding-left:1.6rem; line-height:1.7; }
ul.nsd-beans li::before{
  content:"☕"; position:absolute; left:0; top:.05rem; color: var(--nsd-bean);
}
/* Panels im Zwillingsraster: Inhalt nicht zentrieren/einengen */
.nsd-guide-grid .nsd-panel p,
.nsd-guide-grid .nsd-panel ul,
.nsd-guide-grid .nsd-panel ol {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* =========================================================
   NSD – Beitrags-Header Styling (Nicht-Rezepte)
   ========================================================= */

/* Allgemeines Layout */
.nsd-header-inner {
  background: var(--nsd-cream, #fdfcf8);
  padding: 1.25rem 0 1.5rem;
}

.nsd-header-grid {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr) 340px; /* links | mitte | rechts */
  gap: 2rem;
  align-items: start;
}

/* Zurück-Links */
.nsd-back-buttons {
  display: grid;
  gap: .35rem;
}

.nsd-back-buttons .btn-back {
  font-size: .9rem;
  color: var(--color-primary);
  text-decoration: none;
}
.nsd-back-buttons .btn-back:hover {
  text-decoration: underline;
}

/* Titel & Untertitel */
.nsd-hero__title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 1.8rem;
  margin-bottom: .3rem;
  color: var(--color-primary);
}

.nsd-under-title {
  font-size: 1rem;
  color: var(--color-text, #333);
  margin-bottom: .8rem;
}

/* Share-Buttons */
.nsd-share-buttons {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nsd-share-label {
  font-size: .9rem;
  margin-right: .25rem;
  color: var(--color-text, #333);
}

.nsd-share-buttons a {
  text-decoration: none;
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.nsd-share-buttons a:hover {
  transform: scale(1.2);
}

/* Meta-Bereich rechts */
.nsd-meta-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-soft, 0 4px 16px rgba(0,0,0,.05));
}

.nsd-meta-headline {
  font-weight: bold;
  margin-bottom: .5rem;
  color: var(--color-primary);
}

.nsd-meta-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.meta-bubble {
  display: inline-block;
  background: #f7f7f2;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .85rem;
  color: var(--color-text, #333);
}

/* Druck-Button (falls aktiviert) */
.nsd-action-buttons {
  margin-top: .7rem;
}
.nsd-action-buttons button {
  border: none;
  border-radius: 999px;
  background: var(--color-secondary, #A1AF78);
  color: #fff;
  padding: .4rem .9rem;
  cursor: pointer;
  font-size: .85rem;
}
.nsd-action-buttons button:hover {
  background: var(--color-primary, #234F28);
}

/* =========================================================
   NSD – Newsletter (global, alle Seiten)
   Ziel: leicht dunklerer Innenbereich, roter Rand, pillige Inputs/Buttons,
         konsistente Typo & Farben, keine blauen Standard-Links.
   ========================================================= */

/* 1) Robuste Zielauswahl: greift in Footer + eigenständigen Sektionen */
#shopify-section-newsletter,
section.newsletter,
.section-newsletter,
.footer-block--newsletter {
  --nsd-cream: #fdfcf8;               /* Body laut Styleguide */
  --nsd-cream-darker: #f5f1e8;        /* leicht dunkler für den Innenbereich */
  --nsd-green: var(--nsd-green, #A1AF78);
  --nsd-green-dark: var(--nsd-green-dark, #234F28);
  --nsd-apricot: var(--nsd-apricot, #F7C59F);
  --nsd-coral: var(--nsd-coral, #F28B82);
  --nsd-red: var(--nsd-red, #E25A4E);
}

/* 2) Gesamter Bereich folgt dem Seitenhintergrund (kein Weißbruch) */
#shopify-section-newsletter,
.section-newsletter {
  background: var(--nsd-cream);
  padding: clamp(24px, 4vw, 40px) 0;
  border-top: 0; /* falls Theme hier Linien setzt */
}

/* 3) Die eigentliche Card (innerer, leicht dunkler Bereich mit rotem Rand) */
#shopify-section-newsletter .newsletter__wrapper,
.section-newsletter .newsletter__wrapper,
.footer-block--newsletter .newsletter__wrapper,
#shopify-section-newsletter .newsletter-card,
.section-newsletter .newsletter-card,
.footer-block--newsletter .newsletter-card {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02)) var(--nsd-cream-darker);
  border: 2px solid var(--nsd-red);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* 4) Überschrift & Text */
.section-newsletter h2,
#shopify-section-newsletter h2,
.footer-block--newsletter h2 {
  color: var(--nsd-green-dark);
  font-family: var(--font-heading, "Playfair Display", serif);
  letter-spacing: .2px;
  margin: 0 0 .5rem;
}

.section-newsletter p,
#shopify-section-newsletter p,
.footer-block--newsletter p {
  color: #3f3f3f;
  margin: 0 0 1rem;
}

/* 5) Formular – Inputs & Button als weiße Pillen + Hover (gewünscht) */
.section-newsletter input[type="email"],
#shopify-section-newsletter input[type="email"],
.footer-block--newsletter input[type="email"] {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: .8rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.section-newsletter input[type="email"]:focus,
#shopify-section-newsletter input[type="email"]:focus,
.footer-block--newsletter input[type="email"]:focus {
  border-color: var(--nsd-green);
  box-shadow: 0 0 0 3px rgba(161,175,120,.25);
}

.section-newsletter button[type="submit"],
#shopify-section-newsletter button[type="submit"],
.footer-block--newsletter button[type="submit"] {
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.2rem;
  background: #fff;
  color: var(--nsd-green-dark);
  box-shadow: 0 2px 0 0 rgba(0,0,0,.06) inset, 0 6px 18px rgba(0,0,0,.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.section-newsletter button[type="submit"]:hover,
#shopify-section-newsletter button[type="submit"]:hover,
.footer-block--newsletter button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 0 rgba(0,0,0,.08) inset, 0 10px 24px rgba(0,0,0,.10);
  background: #fff;
}

/* 6) Label/Links – nie „Shopify-Blau“ */
.section-newsletter a,
#shopify-section-newsletter a,
.footer-block--newsletter a {
  color: var(--nsd-green-dark);
  text-decoration-color: var(--nsd-apricot);
}
.section-newsletter a:hover,
#shopify-section-newsletter a:hover,
.footer-block--newsletter a:hover {
  color: var(--nsd-green-dark);
  text-decoration-color: var(--nsd-coral);
}

/* 7) DSGVO/Checkbox (dezente Zeile, gut lesbar) */
.section-newsletter .field__input-wrapper + .newsletter__legal,
#shopify-section-newsletter .field__input-wrapper + .newsletter__legal,
.footer-block--newsletter .field__input-wrapper + .newsletter__legal,
.section-newsletter .rte.small,
#shopify-section-newsletter .rte.small,
.footer-block--newsletter .rte.small {
  font-size: .85rem;
  color: #585858;
  margin-top: .6rem;
}

/* 8) Layout: Input + Button nebeneinander ab ~480px */
@media (min-width: 480px) {
  .section-newsletter form .newsletter-form,
  #shopify-section-newsletter form .newsletter-form,
  .footer-block--newsletter form .newsletter-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: center;
  }
}

/* 9) Optional: kleine „Tag“-Badges im Newsletter (falls genutzt) */
.section-newsletter .nsd-badge,
#shopify-section-newsletter .nsd-badge,
.footer-block--newsletter .nsd-badge {
  display: inline-block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
  color: #444;
  margin-right: .35rem;
}
/* =========================================================
   NSD – Newsletter (global)
   ========================================================= */

/* Äußere Section: kein harter Weißbruch, angenehme Luft */
.newsletter.section,
#shopify-section-newsletter,
.section-newsletter,
.footer-block--newsletter {
  background: var(--nsd-cream, #fdfcf8);
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(24px, 4vw, 40px);
}

/* Card / Wrapper: leicht dunkler als Body + roter Rahmen */
.newsletter__wrapper,
.nsd-newsletter-card {
  background:
    linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02))
    var(--nsd-cream-2, #f5f1e8);
  border: 2px solid var(--nsd-red, #E25A4E);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* Innenabstand (falls Theme-Padding klein ist) */
.newsletter__wrapper.content-container {
  padding: clamp(16px, 3vw, 28px);
}

/* Überschrift & Text */
.newsletter__wrapper h2 {
  font-family: var(--font-heading, "Playfair Display", serif);
  color: var(--nsd-green-dark, #234F28);
  margin: 0 0 .5rem;
  letter-spacing: .2px;
  text-align: center;
}
.newsletter__subheading {
  color: #3f3f3f;
  text-align: center;
  margin-bottom: 1rem;
}

/* Formular-Zeile nebeneinander ab 480px */
@media (min-width: 480px) {
  .newsletter-form__field-wrapper .field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    align-items: center;
  }
}

/* Input als weiße „Pille“ */
.newsletter-form .field__input {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  padding: .85rem 1rem;
  height: auto;
  color: #333;
}
.newsletter-form .field__input:focus {
  border-color: var(--nsd-green, #A1AF78);
  box-shadow: 0 0 0 3px rgba(161,175,120,.25);
}

/* Button als weiße „Pille“ mit grünem Text */
.newsletter-form__button.field__button {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--nsd-green-dark, #234F28);
  padding: .9rem 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 0 rgba(0,0,0,.06) inset, 0 6px 18px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.newsletter-form__button.field__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 0 rgba(0,0,0,.08) inset, 0 10px 24px rgba(0,0,0,.10);
}

/* Pfeil-Icon in der Button-Pille nicht übergroß */
.newsletter-form__button .svg-wrapper svg {
  width: 18px;
  height: 18px;
}

/* Checkbox/DSGVO */
.newsletter .rte.small,
.newsletter__legal,
.newsletter .field__input-wrapper + .newsletter__legal {
  font-size: .9rem;
  color: #585858;
  margin-top: .6rem;
}

/* Links nie „Shopify-Blau“ */
.newsletter a {
  color: var(--nsd-green-dark, #234F28);
  text-decoration-color: var(--nsd-apricot, #F7C59F);
}
.newsletter a:hover {
  color: var(--nsd-green-dark, #234F28);
  text-decoration-color: var(--nsd-coral, #F28B82);
}

/* Sicherheit: Theme-Farbschemata sollen die Card nicht weiß färben */
.newsletter__wrapper[class*="color-"] {
  --color-background: transparent;
  --gradient-background: transparent;
}
/* =========================================================
   NSD – Newsletter im Footer (Custom Footer)
   ========================================================= */

/* Grundfarben (falls noch nicht definiert) */
:root{
  --nsd-cream:#fdfcf8;
  --nsd-cream-2:#f5f1e8;
  --nsd-green:#A1AF78;
  --nsd-green-dark:#234F28;
  --nsd-apricot:#F7C59F;
  --nsd-coral:#F28B82;
  --nsd-red:#E25A4E;
}

/* Section-Hintergrund neutral wie die Seite */
.site-footer{ background:var(--nsd-cream); }

/* --- Newsletter Card ------------------------------------------------------ */
.footer-newsletter{
  padding: clamp(28px,4vw,44px) 0;
}

.footer-newsletter-box{
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(16px,3vw,28px);
  border: 2px solid var(--nsd-red);          /* roter Rand */
  border-radius: 16px;
  background: linear-gradient(0deg,rgba(0,0,0,.02),rgba(0,0,0,.02)) var(--nsd-cream-2);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.footer-newsletter-inner{
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

/* Überschrift & Text */
.footer-newsletter-title{
  font-family: var(--font-heading,"Playfair Display",serif);
  color: var(--nsd-green-dark);
  font-size: clamp(22px,3.2vw,28px);
  margin: 0 0 6px;
}
.footer-newsletter-text{
  color:#3f3f3f;
  margin: 0 0 12px;
}

/* --- Formular ------------------------------------------------------------- */
#footer-newsletter-form .footer-newsletter-form{
  width: min(680px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

#footer-newsletter-form input[type="email"]{
  width: 100%;
  background:#fff;
  border:1px solid #d8d8d8;
  border-radius: 999px;                 /* Pille */
  padding:.9rem 1rem;
  color:#333;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#footer-newsletter-form input[type="email"]::placeholder{ color:#9a9a9a; }
#footer-newsletter-form input[type="email"]:focus{
  border-color: var(--nsd-green);
  box-shadow: 0 0 0 3px rgba(161,175,120,.25);
}

/* Button als weiße Pille */
#footer-newsletter-form .btn{
  border:0;
  border-radius:999px;
  padding:.95rem 1.3rem;
  background:#fff;
  color: var(--nsd-green-dark);
  box-shadow: 0 2px 0 0 rgba(0,0,0,.06) inset, 0 6px 18px rgba(0,0,0,.06);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
#footer-newsletter-form .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 0 0 rgba(0,0,0,.08) inset, 0 10px 24px rgba(0,0,0,.10);
}

/* DSGVO-Zeile */
.newsletter-consent{
  display:block;
  width:min(680px,100%);
  margin: 10px auto 0;
  font-size:.92rem;
  color:#585858;
  text-align:left;
}
.newsletter-consent a{
  color: var(--nsd-green-dark);
  text-decoration-color: var(--nsd-apricot);
}
.newsletter-consent a:hover{
  text-decoration-color: var(--nsd-coral);
}

/* Feedback-Meldungen */
.footer-newsletter-success{
  color: var(--nsd-green-dark);
  background:#e9f5ea;
  border:1px solid #cfe8d1;
  padding:.5rem .8rem;
  border-radius:10px;
  width:min(680px,100%);
  margin:10px auto 0;
}
.footer-newsletter-error{
  color:#8a1f11;
  background:#fdeeee;
  border:1px solid #f8c9c7;
  padding:.5rem .8rem;
  border-radius:10px;
  width:min(680px,100%);
  margin:10px auto 0;
}

/* --- Footer Divider & Bottom harmonisieren ------------------------------- */
.footer-divider-top,
.footer-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, #dfe7d9, transparent);
  margin: clamp(18px,3vw,28px) 0;
  border: 0;
}
.footer-divider-green{ background: linear-gradient(90deg, transparent, #cbdacb, transparent); }

.footer-bottom{
  background: var(--nsd-cream);
  padding: 14px 0 28px;
}
.footer-bottom-inner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.footer-payment-svgs svg{ height: 22px; margin-right: 10px; opacity:.9; }
.footer-powered{ color:#5a5a5a; font-size:.92rem; }
/* === NSD Newsletter Feinschliff === */

/* Softerer Rand (leicht transparent) */
.footer-newsletter-box {
  border: 2px solid rgba(226,90,78,0.65); /* var(--nsd-red) softer */
  background: var(--nsd-cream-2, #f8f5ef); /* hellere Cream statt Grau-Grün */
}

/* Titel etwas lockerer */
.footer-newsletter-title {
  margin-bottom: 0.75rem;
  letter-spacing: .3px;
}

/* Subheading dezenter grau */
.footer-newsletter-text {
  color: #555;
  font-size: 1rem;
  margin-bottom: 1.2rem;
}

/* Abstand nach unten etwas größer, damit Divider nicht klebt */
.footer-newsletter {
  margin-bottom: 1.5rem;
}
/* =========================================================
   NSD – Footer Divider Feinschliff
   ========================================================= */

/* Oberer & unterer Divider weicher, dünner */
.footer-divider-top,
.footer-divider,
.footer-divider-green {
  height: 1px;
  border: none;
  margin: clamp(18px, 3vw, 28px) 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(35, 79, 40, 0.25), /* dunkles Grün, aber soft */
    transparent
  );
}

/* Unterer grüner Divider etwas heller als Standard */
.footer-divider-green {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(161, 175, 120, 0.45), /* helles NSD-Grün */
    transparent
  );
}
/* Mehr Abstand unter der Newsletter-Card */
.footer-newsletter { 
  margin-bottom: 28px;                /* war 1.5rem – gern anpassen */
}

/* Divider noch dezenter und weiter weg vom Newsletter */
.footer-divider,
.footer-divider-green,
.footer-divider-top {
  height: 1px;
  margin: 22px 0 26px;                /* oben | unten */
  background: linear-gradient(90deg, transparent, rgba(35,79,40,.22), transparent);
}
.footer-divider-green {
  background: linear-gradient(90deg, transparent, rgba(161,175,120,.38), transparent);
}

/* Card-Rand & Innen-Glow etwas softer */
.footer-newsletter-box {
  border-color: rgba(226,90,78,.55);  /* weicher Rot-Ton */
  box-shadow: 0 10px 30px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Mobile: mehr Innenabstand und einspaltiges Formular */
@media (max-width: 479px) {
  .footer-newsletter-box { padding: 18px; }
  #footer-newsletter-form .footer-newsletter-form {
    grid-template-columns: 1fr;       /* Input über Button */
    gap: 8px;
  }
  #footer-newsletter-form .btn { width: 100%; }
}

/* Kleinigkeit: Checkbox-Zeile knackiger und bündig */
.newsletter-consent {
  margin-top: 12px;
  line-height: 1.45;
}
/* === Divider noch dezenter & mit Abstand === */

/* alle Divider */
.footer-divider,
.footer-divider-green,
.footer-divider-top {
  height: 1px;
  border: none;
  margin: 32px 0 0; /* mehr Abstand nach oben */
}

/* normaler Divider: sehr softes Grün-Grau */
.footer-divider,
.footer-divider-top {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,.12),   /* neutrales Grau, kaum sichtbar */
    transparent
  );
}

/* grüner Divider unten: heller & transparenter */
.footer-divider-green {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(161,175,120,.25), /* helles NSD-Grün */
    transparent
  );
}
/* Zentrierte, minimalistische Footer-Bottom-Version */
.footer-bottom-inner {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.footer-payment-svgs {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-payment-svgs svg {
  height: 18px;
  opacity: .85;
  transition: opacity .2s ease;
}
.footer-payment-svgs svg:hover { opacity: 1; }

.footer-powered {
  font-size: .8rem;
  color: #666;
}
.footer-bottom-inner {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.footer-payment-svgs {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.footer-payment-svgs svg {
  height: 18px;
  opacity: .8;
  transition: opacity .2s;
}
.footer-payment-svgs svg:hover { opacity: 1; }

.footer-powered {
  font-size: .8rem;
  color: #666;
}
/* ===== NSD Footer Bottom – starke Selektoren ===== */
.site-footer .footer-bottom {
  background: var(--nsd-cream, #fdfcf8) !important;
  padding: 12px 0 18px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}

.site-footer .footer-bottom .footer-bottom-inner {
  max-width: 1160px;
  margin: 0 auto !important;
  padding: 0 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.site-footer .footer-bottom .footer-payment-svgs svg {
  height: 18px !important;
  margin-right: 8px !important;
  opacity: .85 !important;
  transition: opacity .2s ease !important;
}
.site-footer .footer-bottom .footer-payment-svgs svg:hover { opacity: 1 !important; }

.site-footer .footer-bottom .footer-powered {
  font-size: .85rem !important;
  color: #666 !important;
  line-height: 1.4 !important;
  text-align: right !important;
}
/* === Footer Payment Logos === */
.footer-payment-extra {
  display: flex;
  justify-content: center; /* mittig anordnen */
  gap: 1rem;              /* Abstand zwischen den Logos */
  margin-top: 0.5rem;
}

.footer-payment-extra img {
  width: 60px;
  height: auto;
  object-fit: contain;
  display: block;
}
.footer-payment-extra img {
  width: 55px;
  height: 35px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;     /* weißer Hintergrund */
  padding: 4px 6px;
  box-shadow: 0 0 2px rgba(0,0,0,0.15);
}
.footer-payment-extra {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.footer-payment-extra {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.pay-icon svg {
  height: 24px;
  width: auto;
  display: block;
  opacity: .9;
  transition: opacity .2s ease;
}
.pay-icon svg:hover { opacity: 1; }
/* Falls noch alte <img> im Cache auftauchen: hart ausblenden */
.footer-payment-extra img { display: none !important; }

/* Dynamische Shopify-SVGs (Visa/Mastercard/Amex …) */
.footer-payment-svgs {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  color: #234F28; /* viele SVGs nutzen currentColor */
}
.footer-payment-svgs svg { height: 20px; width: auto; display: block; opacity:.9; transition:opacity .2s; }
.footer-payment-svgs svg:hover { opacity:1; }

/* Unsere Inline-SVGs (Apple/Google/Klarna) */
.footer-payment-extra { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:8px; }
.pay-icon svg { width:48px; height:28px; display:block; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .2s; }
.pay-icon svg:hover { transform: translateY(-2px); }

/* Noscript-Badges (Fallback) */
.footer-payment-fallback { display:flex; gap:8px; margin-top:6px; }
.footer-payment-fallback .payment-tag {
  font-size:.78rem; color:#555; background:#fff; border:1px solid #ddd; border-radius:4px; padding:2px 6px;
}
.seasonal-bar { 
  transition: opacity .4s ease;
}
/* === Hero/About – Outline Button =================== */
.hero-about {
  --color-primary: var(--nsd-green, #234F28); /* nur hier gültig */
}

.hero-about :is(.nsd-btn, .nsd-btn--primary, .button, .btn, .link){
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: all .25s ease;
}

.hero-about :is(.nsd-btn, .nsd-btn--primary, .button, .btn, .link):hover{
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
/* NSD · Intros unter den Themen-Kacheln */
.nsd-topics .nsd-intros{
  display:grid;
  gap:16px;
  margin:16px 0 0;
}
@media (min-width: 800px){
  .nsd-topics .nsd-intros{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.nsd-topics .nsd-intro{
  background: var(--cream, #FDFCF8);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.nsd-topics .nsd-intro h3{
  margin: 0 0 .35rem;
  color: var(--color-primary, #234F28);
  font-weight: 700;
  font-size: 1.05rem;
}
.nsd-topics .nsd-intro p{ margin:.1rem 0 .5rem; opacity:.95; }
.nsd-topics .nsd-intro ul{ margin:0; padding-left:1.1rem; }
.nsd-topics .nsd-intro a{ color: var(--color-primary, #234F28); font-weight:600; text-decoration:none; }
.nsd-topics .nsd-intro a:hover{ text-decoration:underline; }
.article-card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0 0}
.article-card__tags .article-tag{
  padding:.25rem .6rem;border:1px solid rgba(0,0,0,.12);
  border-radius:999px;text-decoration:none;color:#234F28;background:#fff;font-weight:600
}
.nsd-catbar__back{
  display:flex; gap:.75rem; align-items:center; justify-content:flex-start;
  margin: .25rem 0 .75rem;
}
.nsd-backlink{
  display:inline-block; text-decoration:none; font-weight:600;
  color: var(--nsd-green-dark, #1a412d);
  border:1px solid rgba(0,0,0,.15); border-radius:999px; padding:.4rem .8rem;
  background:#fff; transition: background .2s ease, transform .2s ease;
}
.nsd-backlink:hover{ background:#f8f8f8; transform: translateY(-1px); }
.nsd-backlink--secondary{
  font-weight:500; opacity:.95;
}
/* Community */
.nsd-legal-note{
  margin: 1.2rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid #eae7df;
  border-radius: 12px;
  background: #fff;
  color:#444;
}
.nsd-events__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.nsd-event a{font-weight:600;text-decoration:none}
.nsd-event__date,.nsd-event__loc{margin-left:.35rem;color:#555;font-size:.95rem}

/* =========================
   NSD – Overrides (clean)
   ========================= */

/* Tokens */
:root{
  --nsd-green:#2E6B3C;
  --nsd-green-dark:#234F28;
  --nsd-cream:#FDFCF8;
  --nsd-border:#E7E1D2;
  --nsd-shadow:0 2px 8px rgba(0,0,0,.03);
  --nsd-coral:#F28B82;
}

/* ---------- Base / Article ---------- */
.nsd-article{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#1e2c1f;line-height:1.6}
.nsd-h1{font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--nsd-green);margin:.2rem 0 .8rem}
.nsd-card{border:1px solid var(--nsd-border);border-radius:14px;background:#fff;padding:1rem;margin:.8rem 0}
.nsd-list{margin:.2rem 0 0 1.1rem}
.nsd-note{font-size:.95rem;color:#445;background:#FAF8F2;border:1px solid var(--nsd-border);border-radius:12px;padding:.8rem 1rem}
.nsd-cta{display:inline-flex;gap:.5rem;background:var(--nsd-green);color:#FFFDF7!important;padding:.7rem 1rem;border-radius:999px;text-decoration:none;font-weight:600}

/* Skip-Link nur bei Tastaturfokus sichtbar */
.skip-to-content-link:not(:focus):not(:focus-visible){position:absolute!important;left:-9999px!important}

/* Bilder */
.nsd-article figure img{max-width:100%;height:auto;display:block}

/* ---------- Legal / Privacy ---------- */
.nsd-privacy-mini{margin:.5rem 0 0;font-size:.9rem;color:#555}
.nsd-legal-note{margin:1.2rem 0 0;padding:.9rem 1rem;border:1px solid #eae7df;border-radius:12px;background:#fff;color:#444}
.nsd-legal-note strong{color:var(--nsd-green-dark)}
.nsd-legal-note--affiliate{background:#fff7f5}

/* Transparenz-Hinweis für Reviews */
.nsd-legal-note--reviews{background:#f7f7f3;border:1px solid #e6e5da;border-radius:.5rem;padding:12px 14px;margin:10px 0 16px;font-size:.95rem;line-height:1.45}

/* ---------- Quicklinks / UGC / Poll / Netiquette ---------- */
.nsd-quicklinks__grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.nsd-quicklink{display:flex;align-items:center;gap:.5rem;padding:.65rem .8rem;border:1px solid #eae7df;border-radius:12px;background:#fff}
.nsd-quicklink__badge{margin-left:auto;font-size:.75rem;padding:.15rem .45rem;border:1px dashed #c9c5b8;border-radius:999px}

.nsd-ugc__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.nsd-ugc-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:.6rem}
.nsd-ugc-card__image img{border-radius:10px}
.nsd-like{margin-top:.4rem;border:1px solid #eae7df;border-radius:999px;padding:.3rem .6rem;background:#fff}

.nsd-poll__barrow{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:center;margin:.35rem 0}
.nsd-poll__barwrap{height:8px;border-radius:999px;background:#eee;overflow:hidden}
.nsd-poll__bar{height:8px;border-radius:999px;background:var(--nsd-green-dark)}

.nsd-netiquette{margin:1rem 0;padding:.9rem 1rem;border:1px solid #eae7df;border-radius:12px;background:#fff;color:#444}
.nsd-netiquette strong{color:var(--nsd-green-dark)}
.nsd-netiquette ul{margin:.4rem 0 0 1.2rem}

/* ---------- Spacing / Compact ---------- */
.nsd-divider{margin:1rem 0 .75rem}
.nsd-grid{gap:1rem}

/* ---------- Theme Product Media Fixes (Sense) ---------- */
.template-product .product__media-list,
.template-product ul.product__media-list{list-style:none!important;margin:0!important;padding:0!important}
.template-product .product__media-wrapper{min-height:0!important}
.template-product .product__media .media{padding-top:0!important;height:auto!important}
.template-product .product__media .media img{position:static!important;height:auto}
.template-product .product__media-toggle .visually-hidden,
.template-product .product-media-modal__toggle .visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap
}

/* ---------- Produktseite (NSD Komponenten) ---------- */
.nsd-title{font-family:var(--font-heading, Playfair Display, serif);font-size:clamp(1.6rem,2.5vw,2rem);color:var(--nsd-green-dark);margin:.2rem 0 .6rem}
.nsd-meta{display:flex;gap:1rem;color:#556}
.nsd-price{font-size:1.3rem;font-weight:700;margin:.6rem 0 1rem;color:var(--nsd-green-dark)}

.nsd-variants{display:grid;gap:.75rem;margin:1rem 0}
.nsd-label{font-weight:600;color:#223}
.nsd-swatch-list{display:flex;flex-wrap:wrap;gap:.5rem}
.nsd-swatch{display:inline-flex}
.nsd-swatch input{position:absolute;opacity:0;pointer-events:none}
.nsd-swatch-ui{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .8rem;border:1.5px solid #d9d4c7;border-radius:999px;background:#fff;min-width:2.5rem}
.nsd-swatch input:checked + .nsd-swatch-ui{border-color:var(--nsd-green);box-shadow:0 0 0 3px rgba(35,79,40,.08)}

.nsd-qty-atc{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1rem;align-items:center;margin:1rem 0 1.25rem}
.nsd-qty{display:inline-flex;align-items:center;border:1px solid var(--nsd-border);border-radius:999px;background:#fff}
.nsd-qty-btn{border:0;background:transparent;padding:.5rem .8rem;cursor:pointer}
.nsd-qty-input{width:3rem;text-align:center;border:0;background:transparent;padding:.5rem .25rem}

.nsd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.9rem 1.3rem;font-weight:700;transition:.2s ease;border:2px solid transparent}
.nsd-btn--primary{background:var(--nsd-green);color:#fff}
.nsd-btn--primary:hover{background:#fff;color:var(--nsd-green);border-color:var(--nsd-green);box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.nsd-btn--ghost{background:#fff;border-color:var(--nsd-border)}
.nsd-btn[disabled]{opacity:.6;cursor:not-allowed}

.nsd-benefits{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 1.2rem;color:#2b3a2d}
.nsd-desc{background:#fff;border:1px solid var(--nsd-border);border-radius:14px;padding:1rem;box-shadow:var(--nsd-shadow)}

.nsd-accordions{display:grid;gap:.6rem;margin:1rem 0}
.nsd-acc{border:1px solid var(--nsd-border);border-radius:12px;background:#fff}
.nsd-acc>summary{cursor:pointer;padding:.8rem 1rem;font-weight:700}
.nsd-acc-body{padding:0 1rem 1rem}

.nsd-delivery{margin:1rem 0;color:#2b3a2d}
.nsd-trust{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0;color:#2b3a2d}
.nsd-anchor{display:inline-block;margin:1rem 0 0}

/* Affiliate: Produktbilder bewusst kleiner */
.nsd-p-media.nsd--affiliate .nsd-media-main{display:flex;align-items:center;justify-content:center;max-height:540px}
.nsd-p-media.nsd--affiliate .nsd-media-img{width:100%;height:auto;max-height:520px;object-fit:contain}
@media (max-width:980px){
  .nsd-p-media.nsd--affiliate .nsd-media-main{max-height:420px}
  .nsd-p-media.nsd--affiliate .nsd-media-img{max-height:400px}
}

/* ---------- Warenkorb ---------- */
.nsd-cart-page{background:var(--nsd-cream);padding:1rem 0 2rem}
.nsd-cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2rem;align-items:start}
.nsd-cart-items{display:grid;gap:1rem}
.nsd-cart-item{display:grid;grid-template-columns:120px 1fr;gap:1rem;background:#fff;border:1px solid var(--nsd-border);border-radius:14px;padding:.8rem}
.nsd-item-img{border-radius:10px}
.nsd-item-title{font-weight:700;color:#223}
.nsd-item-variant{color:#667}
.nsd-item-price{font-weight:700;color:var(--nsd-green-dark);margin:.3rem 0}
.nsd-qty-controls{display:inline-flex;align-items:center;gap:.25rem}
.nsd-remove{background:#fff;border:1px solid var(--nsd-border);border-radius:10px;padding:.2rem .6rem;margin-left:.25rem}

.nsd-cart-actions{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}

.nsd-cart-summary{position:sticky;top:90px;background:#fff;border:1px solid var(--nsd-border);border-radius:14px;padding:1rem;box-shadow:var(--nsd-shadow)}
.nsd-sum-row{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem}
.nsd-sum-note{font-size:.92rem;color:#556;margin:.4rem 0 .8rem}

.nsd-upsell{margin-top:2rem}

/* Discount / Rabattfeld */
.nsd-discount{margin-top:1rem}
.nsd-discount-row{display:flex;gap:.5rem;align-items:center}
#cart-discount{flex:1;padding:.5rem .75rem;border:1px solid #dcdcdc;border-radius:.5rem}
.nsd-discounts-wrap{margin-top:16px}
.nsd-discount-list{list-style:none;padding:0;margin:0 0 6px}
.nsd-discount-list li{display:flex;justify-content:space-between;gap:8px}
.nsd-discount-amt{color:#2e7d32}
.nsd-discount-note{font-size:.9rem;color:#555;margin:6px 0 0}

/* Free-Shipping Bar */
.nsd-free-ship{margin:12px 0 16px}
.nsd-free-ship-bar{height:8px;background:#eee;border-radius:6px;overflow:hidden}
.nsd-free-ship-fill{height:8px;background:#2e7d32}

/* ---------- Reviews (Form + Liste) ---------- */
.nsd-review-form{background:#fff;border:1px solid var(--nsd-border);border-radius:12px;padding:1rem;margin:.8rem 0;box-shadow:var(--nsd-shadow)}
.nsd-review-form .nsd-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.nsd-field{margin:.6rem 0}
.nsd-review-form input[type="text"],
.nsd-review-form input[type="email"],
.nsd-review-form textarea{width:100%;border:1px solid var(--nsd-border);border-radius:10px;padding:.6rem;background:#fff}
.nsd-review-form textarea{min-height:120px;resize:vertical}
.nsd-form-success{background:#f0fff4;border:1px solid #c6f6d5;border-radius:10px;padding:.6rem;margin:.6rem 0}
.nsd-form-errors{background:#fff5f5;border:1px solid #fed7d7;border-radius:10px;padding:.6rem;margin:.6rem 0}

/* Sterne – Eingabe */
.nsd-stars{display:inline-flex;flex-direction:row-reverse;gap:.25rem}
.nsd-stars input{position:absolute;opacity:0}
.nsd-stars label{font-size:1.35rem;cursor:pointer;line-height:1;color:#f5b301;filter:grayscale(1) opacity(.6)}
.nsd-stars input:checked ~ label,
.nsd-stars label:hover,
.nsd-stars label:hover ~ label{filter:none;opacity:1;color:#f5b301}

/* Öffentliche Review-Liste */
.nsd-review-list{list-style:none;padding:0;margin:0 0 1rem 0;display:grid;gap:.8rem}
.nsd-review{background:#fff;border:1px solid var(--nsd-border);border-radius:12px;padding:.9rem 1rem;box-shadow:var(--nsd-shadow)}
.nsd-review-head{display:flex;flex-wrap:wrap;gap:.6rem .8rem;align-items:center;margin-bottom:.25rem}
.nsd-review-name{font-weight:700}
.nsd-review-date{opacity:.7}
.nsd-review-stars{position:relative;display:inline-block;line-height:1}
.nsd-review-stars .bg,.nsd-review-stars .fill{letter-spacing:.15rem}
.nsd-review-stars .bg{color:#ddd}
.nsd-review-stars .fill{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#f5b301}
.nsd-review-body{white-space:pre-line}

/* Honeypot */
.nsd-hp{position:absolute;left:-9999px}

/* ---------- Sticky ATC ---------- */
.nsd-sticky-atc{position:fixed;left:0;right:0;bottom:0;background:rgba(253,252,248,.96);border-top:1px solid #e7e1d2;backdrop-filter:saturate(1.1) blur(6px);padding:.7rem;z-index:50;transform:translateY(0);transition:transform .25s ease}
.nsd-sticky-atc[hidden]{display:block;transform:translateY(100%)}
.nsd-sticky-inner{max-width:var(--page-width,1200px);margin:0 auto;display:flex;align-items:center;gap:.8rem;justify-content:space-between}
.nsd-sticky-title{font-weight:600}
.nsd-sticky-price{font-weight:700;color:var(--nsd-green-dark)}
.nsd-sticky-actions{display:flex;gap:.6rem;align-items:center}
.nsd-sticky-qty{display:inline-flex;align-items:center;border:1px solid var(--nsd-border);border-radius:999px;background:#fff}
.nsd-sticky-qty-input{width:2.6rem;text-align:center;border:0;background:transparent;padding:.4rem .25rem}
body.has-sticky-atc{padding-bottom:72px}
@media (max-width:740px){.nsd-sticky-title{display:none}}
.nsd-sticky-atc .nsd-btn:focus,.nsd-sticky-atc .nsd-qty-btn:focus{outline:2px solid var(--nsd-green);outline-offset:2px}

/* ---------- Focus sichtbar ---------- */
.nsd-product-page a:focus,.nsd-cart-page a:focus,.nsd-btn:focus,.nsd-thumb:focus,.nsd-qty-btn:focus{outline:2px solid var(--nsd-green);outline-offset:2px}

/* ---------- Responsive Tweaks ---------- */
@media (max-width:980px){
  .nsd-product-grid{grid-template-columns:1fr}
  .nsd-p-media{position:relative;top:auto}
  .nsd-cart-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .nsd-article{line-height:1.55}
  .nsd-grid{gap:.75rem}
  .nsd-card{padding:.8rem .85rem}
  .nsd-divider{margin:.6rem 0 .6rem}
  .nsd-h1{font-size:1.35rem}
  .nsd-cta{padding:.6rem .9rem;font-size:.95rem;border-radius:999px}
}
/* ===========================
   Warenkorb: Buttons & Inputs
   =========================== */

/* Grundform für Pillen-Buttons im Cart */
.template-cart .button,
.template-cart button,
.template-cart [type="submit"],
.template-cart .nsd-btn {
  border-radius: 999px;
}

/* Primäre Buttons (Grün mit weißer Schrift):
   - „Zur Kasse“, „Aktualisieren“, „Anwenden & zur Kasse“
   - evtl. andere Cart-Buttons, die vom Theme als .button gerendert werden */
.template-cart .cart__ctas .button,
.template-cart .cart__footer .button,
.template-cart .cart__update,
.template-cart .cart__submit,
.template-cart .nsd-discount button,
.template-cart .nsd-btn--primary {
  background: var(--nsd-green) !important;
  color: #fff !important;
  border: 2px solid var(--nsd-green) !important;
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Hover/Focus: invertieren */
.template-cart .cart__ctas .button:hover,
.template-cart .cart__footer .button:hover,
.template-cart .cart__update:hover,
.template-cart .cart__submit:hover,
.template-cart .nsd-discount button:hover,
.template-cart .nsd-btn--primary:hover,
.template-cart .cart__ctas .button:focus,
.template-cart .cart__footer .button:focus,
.template-cart .cart__update:focus,
.template-cart .cart__submit:focus,
.template-cart .nsd-discount button:focus,
.template-cart .nsd-btn--primary:focus {
  background: #fff !important;
  color: var(--nsd-green) !important;
  border-color: var(--nsd-green) !important;
  outline: 2px solid var(--nsd-green);
  outline-offset: 2px;
  transform: translateY(-1px);
}

/* Sekundäre/Ghost-Buttons (z. B. „Weiter shoppen“) einheitlich halten */
.template-cart a.button--secondary,
.template-cart .button--tertiary,
.template-cart a.button[href*="/collections"],
.template-cart a.button[href*="/products"] {
  background: #fff !important;
  color: var(--nsd-green) !important;
  border: 1px solid var(--nsd-border) !important;
}

.template-cart a.button--secondary:hover,
.template-cart .button--tertiary:hover,
.template-cart a.button[href*="/collections"]:hover,
.template-cart a.button[href*="/products"]:hover {
  border-color: var(--nsd-green) !important;
  box-shadow: var(--nsd-shadow);
}

/* Rabattcode-Eingabe optisch angleichen */
.template-cart .nsd-discount-row,
.template-cart .nsd-cart-discount .nsd-discount-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.template-cart #cart-discount,
.template-cart .nsd-cart-discount input[type="text"],
.template-cart .nsd-discount input[type="text"]{
  flex: 1;
  padding: .55rem .75rem;
  border: 1px solid var(--nsd-border);
  border-radius: 10px;
  background: #fff;
  color: #1e2c1f;
}

.template-cart #cart-discount:focus,
.template-cart .nsd-cart-discount input[type="text"]:focus,
.template-cart .nsd-discount input[type="text"]:focus{
  outline: 2px solid var(--nsd-green);
  outline-offset: 2px;
  border-color: var(--nsd-green);
}

/* Newsletter-Button im Warenkorb (falls vorhanden) angleichen */
.template-cart .shopify-section form[action*="contact"] button,
.template-cart .shopify-section form[action*="contact"] [type="submit"] {
  background: var(--nsd-green);
  color: #fff;
  border: 2px solid var(--nsd-green);
  border-radius: 999px;
  transition: .2s ease;
}
.template-cart .shopify-section form[action*="contact"] button:hover,
.template-cart .shopify-section form[action*="contact"] [type="submit"]:hover {
  background: #fff;
  color: var(--nsd-green);
}

/* Progress-Bar (Gratisversand) – etwas kräftiger */
.nsd-free-ship-fill { background: var(--nsd-green); }

/* Doppelte Definition vermeiden – nur eine behalten */
.nsd-privacy-mini{ margin:.5rem 0 0; font-size:.9rem; color:#555; }
/* === NSD Buttons – Fix Farben & Hover === */
:root {
  --nsd-green: #234F28;
  --nsd-green-dark: #1c3e22;
}

.nsd-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; border-radius:999px; padding:.8rem 1.2rem;
  font-weight:700; border:2px solid transparent; text-decoration:none;
  cursor:pointer; line-height:1; transition:.15s ease-in-out;
}

.nsd-btn--primary { background:var(--nsd-green); color:#fff !important; }
.nsd-btn--primary:hover,
.nsd-btn--primary:focus { background:#fff; color:var(--nsd-green) !important; border-color:var(--nsd-green); }

.nsd-btn--ghost { background:#fff; color:#222; border-color:#E7E1D2; }
.nsd-btn--ghost:hover,
.nsd-btn--ghost:focus { border-color:var(--nsd-green); color:var(--nsd-green); }

/* Falls Theme-Klassen den Text „unsichtbar“ machen, hart überschreiben */
.nsd-btn, .nsd-btn * { color: inherit; }
/* Basis (hast du schon) */
.nsd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;padding:.9rem 1.3rem;font-weight:700;
  transition:.2s ease;border:2px solid transparent;cursor:pointer
}
.nsd-btn--primary{background:var(--nsd-green,#2e6b32);color:#fff;border-color:var(--nsd-green,#2e6b32)}
.nsd-btn--primary:hover{background:#fff;color:var(--nsd-green,#2e6b32);border-color:var(--nsd-green,#2e6b32)}
.nsd-btn--ghost{background:#fff;border-color:#e7e1d2;color:#223}
.nsd-btn--ghost:hover{border-color:var(--nsd-green,#2e6b32);color:var(--nsd-green,#2e6b32)}

/* Sicherheitshalber: falls irgendwo noch Theme-Buttons ohne nsd-Klassen auftauchen */
.nsd-cart-page .cart__update,
.nsd-cart-page [name="apply_discount"],
.nsd-cart-page .cart__ctas .cart__checkout{
  background:var(--nsd-green,#2e6b32)!important;color:#fff!important;border-color:var(--nsd-green,#2e6b32)!important;
  border-radius:999px!important;font-weight:700!important;
}
.nsd-cart-page .cart__update:hover,
.nsd-cart-page [name="apply_discount"]:hover,
.nsd-cart-page .cart__ctas .cart__checkout:hover{
  background:#fff!important;color:var(--nsd-green,#2e6b32)!important
}

/* Disabled-Zustand */
.nsd-btn[disabled],
.nsd-cart-page button[disabled]{opacity:.5;cursor:not-allowed}
/* --- NSD Cart: Layout-Fixes gegen Theme-Overrides --- */
.nsd-cart-item { display:grid; grid-template-columns:120px 1fr; gap:1rem; }
.nsd-cart-item > div:first-child { grid-column:1; }
.nsd-cart-item > div:last-child  { grid-column:2; }
.nsd-item-img, .nsd-item-img img { display:block; width:100%; height:auto; border-radius:10px; }

/* Stelle sicher, dass nichts absolut positioniert wird */
.nsd-cart-item .nsd-item-price,
.nsd-cart-item .nsd-qty-controls,
.nsd-cart-item .nsd-remove { position: static !important; }

/* kleine Abstände, damit nichts ins Bild rutscht */
.nsd-item-title { margin: .1rem 0 .15rem; }
.nsd-item-price { margin: .15rem 0 .35rem; }
.nsd-qty-controls { margin-top: .25rem; flex-wrap: nowrap; }
.nsd-qty-btn { line-height:1; }
.nsd-remove { margin-left: .35rem; }

/* Progressbar minimal hübscher + Abstand nach unten */
.nsd-free-ship { margin: 8px 0 14px; }
.nsd-free-ship-bar { height: 8px; background: #e9e5da; }
.nsd-free-ship-fill { height: 8px; background: var(--nsd-green, #2e6b32); }

.nsd-free-ship-fill::after{
  content: attr(data-pct) "%";
  display:inline-block; padding:0 .4rem; font-weight:700; color:#fff;
}
/* === NSD Cart – Upgrades === */

/* Prozentanzeige in der Gratisversand-Leiste */
.nsd-free-ship-fill::after{
  content: attr(data-pct) "%";
  display: inline-block;
  padding: 0 .4rem;
  font-weight: 700;
  color: #fff;
}

/* Minus-Button im Qty-Control, wenn deaktiviert */
.nsd-qty-controls .nsd-qty-btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}
/* --- NSD Cart: Prozent-Badge gut lesbar --------------------------------- */
.nsd-free-ship { position: relative; }
.nsd-free-ship-bar{
  position: relative;
  height: 10px;                 /* minimal höher */
  background: #e9e5da;
  border-radius: 6px;
  overflow: visible !important; /* Badge darf überstehen */
}
.nsd-free-ship-fill{
  position: relative;
  height: 10px;
  background: var(--nsd-green, #2e6b32);
  border-radius: 6px;
}

/* Badge am Leisten-Ende */
.nsd-free-ship-fill::after{
  content: attr(data-pct) "%";
  position: absolute;
  right: 0;                     /* an das Ende der Füllung */
  top: -22px;                   /* oberhalb der Leiste */
  transform: translateX(50%);   /* etwas nach außen schieben */
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  color: #fff;
  background: var(--nsd-green, #2e6b32);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  pointer-events: none;
  white-space: nowrap;
}

/* Fallback: bei sehr schmalen Displays nicht kleben */
@media (max-width: 420px){
  .nsd-free-ship-fill::after{
    transform: translateX(20%); /* Badge näher an die Leiste */
  }
}
/* ====================== NSD · Variablen ====================== */
:root{
  --nsd-green: #2e6b32;
  --nsd-green-rgb: 46,107,50;
  --nsd-coral: #e26a5e;
}

/* ================= Drawer / Cart-Notification ================= */
#CartDrawer, .drawer, .cart-drawer, #cart-notification, .cart-notification{
  /* Theme-Variablen, die Dawn/Sense lesen */
  --color-button: var(--nsd-green-rgb) !important;
  --color-button-text: 255,255,255 !important;
  --color-button-border: var(--nsd-green-rgb) !important;
  --buttons-primary-background: var(--nsd-green) !important;
  --buttons-primary-text: #fff !important;
  --color-base-button-background: var(--nsd-green) !important;
  --color-base-button-text: #fff !important;
}

#CartDrawer .button,
.drawer .button,
.cart-drawer .button,
.cart-drawer__checkout,
#cart-notification .button,
.cart-notification .button{
  background: var(--nsd-green) !important;
  color:#fff !important;
  border:2px solid var(--nsd-green) !important;
  border-radius:9999px !important;
  font-weight:700 !important;
  box-shadow:none !important;
  filter:none !important;
}
#CartDrawer .button:hover,
.drawer .button:hover,
.cart-drawer .button:hover,
.cart-drawer__checkout:hover,
#cart-notification .button:hover,
.cart-notification .button:hover{
  background:#fff !important;
  color:var(--nsd-green) !important;
  border-color:var(--nsd-green) !important;
}
#CartDrawer .button[disabled],
.mini-cart .button[disabled],
.mini-cart button[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========== Collections / Quick-Add / Pagination etc. =========== */
.template-collection .pagination .button,
.template-collection .pagination button,
.template-collection .collection__view-all .button,
.template-collection .load-more .button,
.template-collection .load-more,
.template-collection .infinite-scroll__btn,
.template-collection button.load-more__button,
.template-search .pagination .button,
.card--product .button,
.product-card .button,
.quick-add__submit,
.product-form__submit{
  background: var(--nsd-green) !important;
  color:#fff !important;
  border:2px solid var(--nsd-green) !important;
  border-radius:9999px !important;
  font-weight:700 !important;
}
.template-collection .pagination .button:hover,
.template-collection .collection__view-all .button:hover,
.template-collection .load-more .button:hover,
.template-collection .load-more:hover,
.template-collection .infinite-scroll__btn:hover,
.template-collection button.load-more__button:hover,
.template-search .pagination .button:hover,
.card--product .button:hover,
.product-card .button:hover,
.quick-add__submit:hover,
.product-form__submit:hover{
  background:#fff !important;
  color:var(--nsd-green) !important;
  border-color:var(--nsd-green) !important;
}

/* =================== Karten-Overlay neutralisieren =================== */
.card-wrapper .full-unstyled-link::after,
.card__content .full-unstyled-link::after,
.product-card .full-unstyled-link::after{
  pointer-events:none !important;
  content:none !important;
}
.card-wrapper :is(.quick-add__submit,.product-form__submit,.nsd-btn,.button),
.product-card :is(.nsd-btn,.button,.btn){
  position:relative !important;
  z-index:5 !important;
  pointer-events:auto !important;
}

/* ===================== Eigene NSD-Buttons ===================== */
.nsd-btn{
  background:var(--nsd-green) !important;
  color:#fff !important;
  border:2px solid var(--nsd-green) !important;
  border-radius:9999px;
  font-weight:700;
}
.nsd-btn:hover{
  background:#fff !important;
  color:var(--nsd-green) !important;
  border-color:var(--nsd-green) !important;
}
.nsd-btn-accent{
  background:var(--nsd-coral) !important;
  border:2px solid var(--nsd-coral) !important;
  color:#fff !important;
}
.nsd-btn-accent:hover{
  background:#fff !important;
  color:var(--nsd-coral) !important;
  border-color:var(--nsd-coral) !important;
}
/* Kinder im Button erben die Farbe (keine „unsichtbare“ Schrift) */
.nsd-btn *, .button * { color: inherit !important; }

/* ====== Payment Button im gleichen Look (falls eingeblendet) ====== */
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded{
  background:var(--nsd-green) !important;
  color:#fff !important;
  border:2px solid var(--nsd-green) !important;
  border-radius:9999px !important;
}
.shopify-payment-button__button:hover,
.shopify-payment-button__button--unbranded:hover{
  background:#fff !important;
  color:var(--nsd-green) !important;
}
/* Produktkarten-Overlay klick-durchlässig (für CTAs) */
.card--product .full-unstyled-link::after { pointer-events: none !important; }

/* Collection-Karten normal lassen (ganze Karte klickbar) */
.card-wrapper .full-unstyled-link::after,
.card__content .full-unstyled-link::after{ pointer-events:none }
.product-card .nsd-btn{ position:relative; z-index:5; }

/* NSD – Collection Card (konfliktfrei) */
.nsd-collection-card{background:#fff;border:1px solid #E7E1D2;border-radius:14px;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.nsd-cc__image{display:block;border-radius:10px;overflow:hidden}
.nsd-cc__image img{display:block;width:100%;height:auto}
.nsd-cc__title{margin:.25rem 0 .2rem;font-weight:700}
.nsd-cc__price{margin:0 0 .5rem}
.nsd-cc__actions{display:flex;gap:.5rem;align-items:center}

/* Buttons sicher über evtl. Theme-Overlays */
.nsd-collection-card .nsd-btn,
.nsd-collection-card a.nsd-btn{position:relative;z-index:5;pointer-events:auto}

/* Für den Fall, dass das Theme Overlay-Links nutzt: in DIESER Karte Klicks durchlassen */
.nsd-collection-card .full-unstyled-link::after{pointer-events:none!important;content:none!important}

/* Lesbarkeit bei Hover sichern (dein NSD-Grün) */
:root{ --nsd-green:#2e6b32; --nsd-coral:#e26a5e; }
.nsd-btn{background:var(--nsd-green)!important;color:#fff!important;border:2px solid var(--nsd-green)!important;border-radius:9999px;font-weight:700}
.nsd-btn:hover{background:#fff!important;color:var(--nsd-green)!important;border-color:var(--nsd-green)!important}
.nsd-btn-accent{background:var(--nsd-coral)!important;color:#fff!important;border:2px solid var(--nsd-coral)!important}
.nsd-btn-accent:hover{background:#fff!important;color:var(--nsd-coral)!important;border-color:var(--nsd-coral)!important}

.rte .nsd-legal-note,
[data-nsd-auto="disc"] { grid-column: 1 / -1; width: 100%; }
/* NSD: Auto-Insert – bricht keine Grids/Layouts */
.nsd-insert { width: 100%; }
.article-template .nsd-insert.nsd-span-full { grid-column: 1 / -1; }

/* freundliche Box-Optik (optional, gern anpassen) */
.nsd-legal-note, .nsd-privacy-mini, .nsd-netiquette, .nsd-legal-note--affiliate, .nsd-legal-note--reviews {
  background: #fff;
  border: 1px solid rgba(46,107,50,.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* === NSD – Shop the Recipe ===================== */
.nsd-shop-recipe{background:var(--nsd-cream,#fdfcf8);border:1px solid #e7e1d2;border-radius:14px;padding:1.5rem;margin:2rem 0}
.nsd-shop-recipe-title{font-size:1.4rem;margin-bottom:1rem;color:var(--nsd-green-dark,#234F28);text-align:center}
.nsd-shop-recipe-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.nsd-shop-recipe-item{text-align:center;background:#fff;border:1px solid #eee;border-radius:12px;padding:1rem}
.nsd-shop-recipe-item img{border-radius:10px;margin-bottom:.6rem;max-width:100%;height:auto}
.nsd-shop-recipe-item-title{font-size:1rem;margin:.25rem 0 .35rem}
.nsd-shop-recipe-price{font-weight:700;margin:.25rem 0;color:var(--nsd-green-dark,#234F28)}
.nsd-shop-recipe-disclaimer{font-size:.85rem;color:#555;margin-top:1rem;text-align:center}
.nsd-atc-form .nsd-btn[disabled]{opacity:.6;cursor:not-allowed}

/* Kleinere Abstände auf Mobile */
@media (max-width: 640px){
  .nsd-shop-recipe{padding:1.1rem}
  .nsd-shop-recipe-grid{gap:1rem}
}
/* Shop the Recipe Box */
.nsd-shop-recipe {
  background: var(--nsd-cream, #fdfcf8);
  border: 1px solid #e7e1d2;
  border-radius: 14px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.nsd-shop-recipe-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--nsd-green-dark, #234F28);
  text-align: center;
}

.nsd-shop-recipe-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.nsd-shop-recipe-item {
  text-align: center;
}

.nsd-shop-recipe-item img {
  border-radius: 12px;
  margin-bottom: .5rem;
}

.nsd-shop-recipe-price {
  font-weight: 600;
  margin: .5rem 0;
  color: var(--nsd-green-dark, #234F28);
}

.nsd-shop-recipe-disclaimer {
  font-size: .85rem;
  color: #555;
  margin-top: 1rem;
  text-align: center;
}
/* === NSD · Kontaktseite – 2-Spalten-Layout reparieren === */
.body.template-page-contact .contact .grid,
.template-page-contact .contact .grid,
.template-page-contact .page-width .grid {
  display: grid !important;
  gap: 1.5rem;
}

/* Desktop: Formular links (flexibel), Infokarten rechts (fixe Breite) */
@media (min-width: 990px){
  .template-page-contact .contact .grid,
  .template-page-contact .page-width .grid {
    grid-template-columns: minmax(0, 1fr) 380px; /* rechts ggf. 420px, wenn du mehr Breite willst */
    align-items: start;
  }
}

/* Rechte Spalte optisch zusammenhalten + (optional) sticky */
.template-page-contact .contact .grid > .grid__item:last-child {
  align-self: start;
  position: sticky; top: 96px; /* Header-Höhe anpassen, falls nötig */
}

/* Karten in rechter Spalte konsistent */
.template-page-contact .contact .grid > .grid__item:last-child > * {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 1.25rem 1rem;
}

/* Abstände der „Karten“ untereinander */
.template-page-contact .contact .grid > .grid__item:last-child > * + * {
  margin-top: 1rem;
}

/* Mobile: sauber einstufig */
@media (max-width: 989px){
  .template-page-contact .contact .grid,
  .template-page-contact .page-width .grid {
    grid-template-columns: 1fr;
  }
}

/* Safety: Falls irgendwo versehentlich ein Auto-Guard Block auftaucht, ausblenden */
.template-page-contact .nsd-insert { display: none !important; }
/* === NSD · Kontaktseite – Brand-Finish (Headlines, Icons, Links, Karten) === */
:root{
  --nsd-green: #234F28;
  --nsd-green-dark: #1b3d20;
  --nsd-sage: #8BAA91;
  --nsd-coral: #F28B82;
  --nsd-cream: #fdfcf8;
}

/* Grundstil der Seite */
.template-page-contact{
  background: var(--nsd-cream);
  color: var(--color-foreground, #1e2c1f);
}

/* Karten rechts (Infos) – optisch konsistent */
.template-page-contact .contact .grid > .grid__item:last-child > *{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:1.25rem 1rem;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}

/* Überschriften in NSD-Grün */
.template-page-contact h2,
.template-page-contact h3{
  color: var(--nsd-green);
}

/* Links & Hovers – grün → koralle */
.template-page-contact a{
  color: var(--nsd-green);
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
.template-page-contact a:hover{
  color: var(--nsd-coral);
  text-decoration-color: var(--nsd-coral);
}

/* Buttons (z. B. Senden) – Pillenstil wie im Styleguide */
.template-page-contact .button,
.template-page-contact button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background: var(--nsd-green);
  color:#fff;
  border:2px solid var(--nsd-green);
  border-radius: 999px;
  padding:.7rem 1.1rem;
  font-weight:600;
  transition: all .22s ease;
}
.template-page-contact .button:hover,
.template-page-contact button[type="submit"]:hover{
  background:#fff;
  color: var(--nsd-green);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* SVG-Icons einfärben (Dawn nutzt meist inline SVGs) */
.template-page-contact .svg-wrapper svg,
.template-page-contact svg.icon,
.template-page-contact .icon{
  color: var(--nsd-green);              /* für Icons, die currentColor nutzen */
  fill: var(--nsd-green);               /* Pfade ohne stroke */
  stroke: var(--nsd-green);             /* Linien */
}
/* Falls die Symbolfläche gefüllt aber Teile transparent bleiben sollen */
.template-page-contact .svg-wrapper svg [fill="none"]{ fill: none; }
.template-page-contact .svg-wrapper svg [stroke="currentColor"]{ stroke: var(--nsd-green); }

/* Dezente Akzentfarbe für kleine Badges/Unterzeilen (optional) */
.template-page-contact .contact .subtitle,
.template-page-contact .contact .caption{
  color: var(--nsd-sage);
}

/* Spalten-Layout (aus dem vorherigen Fix, der Ordnung halber mit enthalten) */
.template-page-contact .contact .grid,
.template-page-contact .page-width .grid{ display:grid !important; gap:1.5rem; }
@media (min-width: 990px){
  .template-page-contact .contact .grid,
  .template-page-contact .page-width .grid{
    grid-template-columns: minmax(0,1fr) 380px;
    align-items:start;
  }
  .template-page-contact .contact .grid > .grid__item:last-child{
    align-self:start; position: sticky; top: 96px; /* ggf. an Headerhöhe anpassen */
  }
}
@media (max-width: 989px){
  .template-page-contact .contact .grid,
  .template-page-contact .page-width .grid{ grid-template-columns:1fr; }
}

/* Safety: Falls jemals ein Auto-Guard Block versehentlich hier landet, ausblenden */
.template-page-contact .nsd-insert{ display:none !important; }
/* Abstand der Privacy-Note direkt unter dem Newsletter-Formular */
.nsd-newsletter-privacy-note{
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.4;
}
/* Footer-Spalten-Grid */
.footer-columns {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;                /* Mobile: 1 */
}

@media (min-width: 700px) {
  .footer-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 960px) {
  .footer-columns { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1200px) {                 /* Desktop groß: 5 in einer Reihe */
  .footer-columns { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* Falls irgendwo fixe Breiten gesetzt sind, neutralisieren */
.footer-column { width: auto; }
/* =========================
   NSD • Artikel-Header (generic)
   ========================= */

.nsd-header { margin: 1.25rem 0 2rem; }
.nsd-hero { max-height: 56vh; overflow: hidden; }
.nsd-hero__img { width: 100%; height: auto; display: block; object-fit: cover; }

.nsd-header-inner { padding: 0 0.5rem; }
.nsd-header-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.col-left, .col-center, .col-right { min-width: 0; }

/* Zurück-Link oben links */
.nsd-back-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-back{
  display:inline-block; padding:.5rem .9rem;
  border:1px solid var(--beige, #D6E1D3);
  border-radius:8px; text-decoration:none;
  color:var(--color-primary,#234F28); background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-back:hover{ background:var(--cream,#FDFCF8); border-color:var(--sage,#8BAA91); transform:translateY(-1px); }

/* Titel + Untertitel */
.nsd-hero__title{
  font-family: var(--font-heading, 'Playfair Display', serif);
  color: var(--color-primary, #234F28);
  line-height:1.15; margin: .25rem 0 .5rem; word-wrap:anywhere;
}
.nsd-under-title{
  color: var(--brown,#4B3B36);
  opacity:.9; margin:.25rem 0 1rem; font-size:1.05rem;
}

/* Share-Leiste */
.nsd-share-buttons { display:flex; align-items:center; gap:.5rem; margin-top:.25rem; }
.nsd-share-label { font-size:.9rem; color:var(--brown,#4B3B36); opacity:.8; }
.nsd-share-buttons a { text-decoration:none; font-size:1.05rem; line-height:1; }
.nsd-share-buttons a:hover { transform: translateY(-1px); }

/* Meta-Karte rechts */
.nsd-meta-wrap{
  background:#fff; border:1px solid var(--beige,#D6E1D3); border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04); padding:1rem;
}
.nsd-meta-headline{ font-weight:600; margin-bottom:.5rem; color:var(--color-primary,#234F28); }
.nsd-meta-bubbles{ display:flex; flex-wrap:wrap; gap:.4rem; }
.meta-bubble{
  display:inline-block; padding:.3rem .6rem; border-radius:999px;
  background:var(--cream,#FDFCF8); border:1px solid var(--beige,#D6E1D3);
  font-size:.9rem; color: var(--brown,#4B3B36);
}

/* Responsive */
@media (max-width: 990px){
  .nsd-header-grid{ grid-template-columns: 1fr; }
  .col-right{ order:3; }
  .col-left{ order:1; }
  .col-center{ order:2; }
  .nsd-hero__title{ font-size: clamp(1.6rem, 2.8vw + 1rem, 2.3rem); }
}

/* ===== Safety-Fallbacks (alte Reste verstecken) ===== */
.nsd-readmore, .nsd-readmore__heading { display: none !important; }          /* "Weiterlesen" alt */
.article-template__back { display: none !important; }                         /* alter Back-Block */

/* doppelte Boxen nie doppeln */
.nsd-disclaimer-box ~ .nsd-disclaimer-box,
.nsd-newsletter-privacy-note ~ .nsd-newsletter-privacy-note,
.nsd-netiquette-box ~ .nsd-netiquette-box { display: none !important; }

/* Header-Abstände (nur falls nsd-article-header noch genutzt wird) */
.nsd-article-header .nsd-hero { margin: 0 0 1rem 0; }
.nsd-article-header .nsd-header-inner { padding-top: .75rem; padding-bottom: .75rem; }
.nsd-header-grid { gap: 1rem; }

/* Fallback: leere RTE-Elemente nicht anzeigen */
.rte > :empty { display: none !important; }

/* ===== Kommentare – FINAL & ROBUST ===== */

/* Alter Anker neutralisieren */
#kommentare {
  display:block;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#kommentare:empty,
#kommentare:has(br:only-child) { display:none !important; }

/* WICHTIG: Den Kommentarbereich nie als Ganzes einklappen,
   nur die LEERE Liste – nicht das Formular – ausblenden */
.article-template__comments,
.comments-wrapper { display:block !important; }

.article-template__comments > .comments:empty,
.comments:empty { display:none !important; }

/* Formular IMMER sichtbar halten */
.article-template__comment-form,
.comment-form {
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  opacity:1 !important;
}

/* Falls das Theme beim Hydraten [hidden] setzt */
.article-template__comments [hidden],
.article-template__comment-form[hidden],
.comment-form[hidden] { display:block !important; }

/* Falls Inline-Styles gesetzt werden */
.article-template__comment-form[style*="display:none"],
.comment-form[style*="display:none"] { display:block !important; }

/* Utility-Klassen im Kommentarbereich neutralisieren,
   ohne global Accessibility-Styles zu brechen */
.article-template__comments .hidden,
.article-template__comments .is-hidden,
.article-template__comments .visually-hidden {
  visibility:visible !important;
  position:static !important;
  clip:auto !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
}
/* === NSD: Kommentarfeld sichtbar erzwingen (Sense/Dawn) === */
#shopify-section-article-template .article-template__comments,
#shopify-section-article-template .comments-wrapper { display:block !important; }

/* Formular selbst */
#shopify-section-article-template .article-template__comment-form,
#shopify-section-article-template .comment-form,
#shopify-section-article-template [id*="comment_form"],
#shopify-section-article-template form[action*="/comments"] {
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  opacity:1 !important;
}

/* Falls das Theme es „unsichtbar“ markiert */
#shopify-section-article-template .article-template__comment-form[hidden],
#shopify-section-article-template .comment-form[hidden] { display:block !important; }

/* Inline-Style-Killer */
#shopify-section-article-template .article-template__comment-form[style*="display:none"],
#shopify-section-article-template .comment-form[style*="display:none"] { display:block !important; }

/* Accordion/Collapsible im Kommentarbereich öffnen */
#shopify-section-article-template .accordion__item.is-open .accordion__content,
#shopify-section-article-template .collapsible-content__inner,
#shopify-section-article-template details[open] > .accordion__content {
  max-height:none !important; height:auto !important; overflow:visible !important;
}

/* Utility-Klassen nur im Kommentarbereich neutralisieren */
#shopify-section-article-template .article-template__comments .hidden,
#shopify-section-article-template .article-template__comments .is-hidden,
#shopify-section-article-template .article-template__comments .visually-hidden {
  position:static !important; clip:auto !important; width:auto !important; height:auto !important;
  overflow:visible !important; visibility:visible !important;
}
/* Sichtbarkeit nur für unsere Comments-Section erzwingen */
#shopify-section-nsd_article_comments .article-template__comments,
#shopify-section-nsd_article_comments .comments-wrapper { display:block !important; }

#shopify-section-nsd_article_comments .article-template__comment-form,
#shopify-section-nsd_article_comments .comment-form,
#shopify-section-nsd_article_comments [id*="comment_form"],
#shopify-section-nsd_article_comments form[action*="/comments"] {
  display:block !important; visibility:visible !important; height:auto !important; opacity:1 !important;
}

#shopify-section-nsd_article_comments .article-template__comment-form[hidden],
#shopify-section-nsd_article_comments .comment-form[hidden],
#shopify-section-nsd_article_comments .article-template__comment-form[style*="display:none"],
#shopify-section-nsd_article_comments .comment-form[style*="display:none"] { display:block !important; }

#shopify-section-nsd_article_comments details[open] > .accordion__content,
#shopify-section-nsd_article_comments .accordion__item.is-open .accordion__content,
#shopify-section-nsd_article_comments .collapsible-content__inner {
  max-height:none !important; height:auto !important; overflow:visible !important;
}
#shopify-section-nsd_article_comments .article-template__comments,
#shopify-section-nsd_article_comments .comments-wrapper { display:block !important; }

#shopify-section-nsd_article_comments .article-template__comment-form,
#shopify-section-nsd_article_comments .comment-form,
#shopify-section-nsd_article_comments form[action*="/comments"] {
  display:block !important; visibility:visible !important; height:auto !important; opacity:1 !important;
}
/* === Fix: Footer darf Kommentarbereich nicht überlappen (Artikel-Seiten) === */

/* 1) Kommentar-Wrapper isolieren & Abstand geben */
.template-article .article-template__comment-wrapper,
.template-article #comments,
.template-article .article-template__comments,
.template-article .comment-form {
  position: relative;
  z-index: 1;
  clear: both;
  margin-bottom: 2rem;
  isolation: isolate; /* eigener Stacking-Context, verhindert Durchschieben */
}

/* 2) Footer darf auf Artikel-Seiten NICHT nach oben gezogen sein */
.template-article .site-footer,
.template-article .footer,
.template-article .footer-top,
.template-article .footer__content {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  transform: none !important;  /* falls irgendwo translateY genutzt wurde */
}

/* 3) Falls irgendwo negative Abstände gesetzt wurden: neutralisieren */
.template-article .site-footer,
.template-article .footer {
  margin-block-start: 0 !important;
}

/* 4) Dawn-Textarea & Fields stabilisieren, damit nichts „ausläuft“ */
.template-article .article-template__comment-wrapper .field,
.template-article .article-template__comment-wrapper .field__input,
.template-article .article-template__comment-wrapper .text-area {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.nsd-article-full #comments form[action*="/comments"],
.nsd-article-full .comment-form {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
}
/* Formular näher an den Hinweis */
#nsd-article-{{ section.id }} .nsd-netiquette-inline { margin-bottom: .75rem; }
#nsd-article-{{ section.id }} .article-template__comment-wrapper { margin-top: .75rem; }

/* DSGVO-Checkbox Styling */
#nsd-article-{{ section.id }} .field--checkbox{
  display:flex; gap:.55rem; align-items:flex-start; margin:.6rem 0 1rem;
}
#nsd-article-{{ section.id }} .field--checkbox input{
  width:1.05rem; height:1.05rem; margin-top:.25rem;
}
#nsd-article-{{ section.id }} .field--checkbox label{
  font-size:.93rem; line-height:1.35; color:#334;
}

/* Success-/Error-Icons klein halten */
#nsd-article-{{ section.id }} .form__message .svg-wrapper svg,
#nsd-article-{{ section.id }} .form-status .svg-wrapper svg{
  width:22px; height:22px;
}
#nsd-article-{{ section.id }} .form__message{
  background:#F6FBF7; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  padding:.75rem 1rem; margin-bottom:.8rem;
}
/* Weniger Luft über dem Formular */
#nsd-article-{{ section.id }} .comments--empty { margin-bottom: .5rem; }
#nsd-article-{{ section.id }} .article-template__comment-wrapper {
  margin-top: .5rem;       /* war größer */
  padding-top: .75rem;     /* Dawn hat hier oft ~2rem */
}
#nsd-article-{{ section.id }} .nsd-netiquette-inline { margin-bottom: .5rem; }

/* DSGVO-Checkbox hübsch */
#nsd-article-{{ section.id }} .field--checkbox{
  display:flex; gap:.55rem; align-items:flex-start; margin:.6rem 0 1rem;
}
#nsd-article-{{ section.id }} .field--checkbox input{
  width:1.05rem; height:1.05rem; margin-top:.25rem;
}
#nsd-article-{{ section.id }} .field--checkbox label{
  font-size:.93rem; line-height:1.35; color:#334;
}
/* Rezepte: Footer/Newsletter nie über Inhalt legen */
.template-suffix--rezepte .shopify-section-group-footer-group,
.template-suffix--rezepte footer.site-footer,
.template-suffix--rezepte .site-footer{
  position: relative !important;
  z-index: 0 !important;
  transform: none !important;
  clear: both !important;
}

/* Unterstützend: Kommentarbereich hat Vorrang */
.template-suffix--rezepte .article-template__comment-wrapper,
.template-suffix--rezepte #comments{
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}
/* Rezepte: Footer/Newsletter dürfen nicht über den Inhalt liegen */
.template-suffix--rezepte .shopify-section-group-footer-group,
.template-suffix--rezepte footer.site-footer,
.template-suffix--rezepte .site-footer,
.template-article       .shopify-section-group-footer-group,
.template-article       footer.site-footer,
.template-article       .site-footer{
  position: relative !important;
  z-index: 0 !important;
  transform: none !important;
  clear: both !important;
}

/* Unterstützend: Kommentarbereich nach vorn */
.template-suffix--rezepte #kommentare,
.template-article       #kommentare{
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}

/* === Ingredients DB – Bilder-Basics === */
.ing__media { margin: 0 0 .5rem 0; }
.ing__img { display: block; max-width: 100%; height: auto; border-radius: 12px; }

/* Karte & Chips sanft */
.nsdg-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:1rem 1.1rem;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.g-meta{color:#3a3a3a;margin-top:.6rem}
.chip{display:inline-block;margin:.15rem .25rem 0 0;padding:.25rem .55rem;border:1px solid #E6E1D6;border-radius:999px;font-size:.9rem;background:#FAF8F2}
/* =========================================================
   NSD – Glossar (final+) – saubere, gescopte Overrides
   Passt zur Section "NSD – Glossar (final+)"
   ========================================================= */

#nsd-glossary{
  --c-bg: var(--nsd-cream, #fdfcf8);
  --c-card:#fff; --c-text:#333; --c-muted:#666; --c-border:#e8e6e0;
  --c-accent: var(--nsd-coral, #F28B82);
  --c-primary: var(--nsd-green-dark, #234F28);
  --c-sage: var(--nsd-sage, #8BAA91);
  --r:14px; --shadow:0 6px 20px rgba(0,0,0,.06);
  padding-block:1.25rem 2rem;
}

/* Titel */
#nsd-glossary .nsdg-title{
  margin:0 0 .75rem;
  font-size:clamp(1.6rem,2.2vw,2rem);
  color:var(--c-primary);
}

/* Steuerleiste */
#nsd-glossary .nsdg-controls{ display:grid; gap:.8rem; margin-bottom:.6rem; }

/* A–Z */
#nsd-glossary .nsdg-az{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
#nsd-glossary .nsdg-az-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; height:2.25rem; border-radius:999px;
  border:1px solid var(--c-border); background:#fff; color:var(--c-primary);
  font-weight:600; font-size:.95rem; line-height:1; padding:0 .6rem; transition:all .15s;
}
#nsd-glossary .nsdg-az-btn:is(:hover,:focus-visible){ border-color:var(--c-accent); outline:none; }
#nsd-glossary .nsdg-az-btn.is-active{ outline:2px solid var(--c-accent); }

/* Suche + Tipp */
#nsd-glossary .nsdg-search input{
  width:100%; padding:.8rem 1rem; border:1px solid var(--c-border);
  border-radius:999px; background:var(--c-bg); font-size:1rem;
}
#nsd-glossary .nsdg-help{ font-size:.9rem; opacity:.8; margin:.35rem 0 0; }

/* Filtergruppen */
#nsd-glossary .nsdg-filters details{ margin:.3rem 0; }
#nsd-glossary .nsdg-filters summary{ cursor:pointer; font-weight:700; color:var(--c-primary); }
#nsd-glossary .nsdg-chiprow{ display:flex; flex-wrap:wrap; gap:.45rem; margin:.4rem 0 .2rem; }

/* Chips (Tag/Syn/Rel) */
#nsd-glossary .nsdg-chip{
  border:1px solid var(--c-border); border-radius:999px;
  padding:.35rem .75rem; background:#fff; font-size:.9rem;
  cursor:pointer; transition:all .15s; line-height:1;
}
#nsd-glossary .nsdg-chip:is(:hover,:focus-visible){ border-color:var(--c-accent); outline:none; transform:translateY(-1px); }
#nsd-glossary .nsdg-chip.is-active{
  background: color-mix(in srgb, var(--c-accent) 12%, #fff);
  outline:2px solid var(--c-accent);
}

/* Active-Bar + Einzel-Reset */
#nsd-glossary .nsdg-activebar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem;
  padding:.6rem .8rem; background:var(--c-bg);
  border:1px dashed var(--c-border); border-radius:var(--r); margin:.4rem 0 1rem;
}
#nsd-glossary .nsdg-activebar[hidden]{ display:none; }
#nsd-glossary .nsdg-active{ display:flex; flex-wrap:wrap; gap:.4rem; }
#nsd-glossary .nsdg-active .badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .6rem; border-radius:999px; background:#fff; border:1px solid var(--c-border);
  font-size:.85rem;
}
#nsd-glossary .nsdg-active .x{ border:none; background:none; cursor:pointer; font-size:1rem; line-height:1; }
#nsd-glossary .nsdg-clears{ display:flex; gap:.35rem; flex-wrap:wrap; }
#nsd-glossary .nsdg-clear{
  border:1px solid var(--c-border); background:#fff; border-radius:999px;
  padding:.35rem .7rem; cursor:pointer;
}
#nsd-glossary .nsdg-clear.is-mini{ padding:.25rem .55rem; font-size:.85rem; }
#nsd-glossary .nsdg-clear:is(:hover,:focus-visible){ border-color:var(--c-accent); outline:none; }
#nsd-glossary .nsdg-status{ color:var(--c-muted); }

/* Grid + Karten */
#nsd-glossary .nsdg-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
#nsd-glossary .nsdg-card{
  border:1px solid var(--c-border); border-radius:var(--r);
  padding:1rem; background:var(--c-card); box-shadow:var(--shadow); transition:transform .15s;
}
#nsd-glossary .nsdg-card:is(:hover,:focus-within){ transform:translateY(-2px); }
#nsd-glossary .nsdg-term{ margin:0 0 .5rem; font-size:1.1rem; color:var(--c-primary); }
#nsd-glossary .nsdg-term .nsdg-open{ font:inherit; background:none; border:none; text-align:left; color:inherit; cursor:pointer; padding:0; }
#nsd-glossary .btn-ghost{ margin-top:.35rem; padding:.38rem .75rem; border:1px dashed var(--c-border); border-radius:999px; background:#fff; cursor:pointer; font-size:.9rem; transition:opacity .15s; }
#nsd-glossary .nsdg-card .btn-ghost{ opacity:0; }
#nsd-glossary .nsdg-card:hover .btn-ghost,
#nsd-glossary .nsdg-card:focus-within .btn-ghost{ opacity:1; }
#nsd-glossary .nsdg-desc{ margin:0 0 .65rem; color:var(--c-muted); }

/* Inline-Details */
#nsd-glossary .nsdg-detail-inline{ margin-top:.8rem; padding:1rem; border-top:1px dashed var(--c-border); background:#fafafa; border-radius:calc(var(--r) - 4px); }
#nsd-glossary .nsdg-detail-title{ margin:0 0 .4rem; font-size:1.05rem; color:var(--c-primary); }
#nsd-glossary .nsdg-label{ font-weight:700; white-space:nowrap; margin-right:.5rem; color:var(--c-primary); }
#nsd-glossary .nsdg-pillwrap{ display:flex; flex-wrap:wrap; gap:.35rem; }
#nsd-glossary .nsdg-pill{
  display:inline-block; border:1px dashed var(--c-border); border-radius:999px;
  padding:.25rem .6rem; font-size:.85rem; background:#fff; cursor:pointer; transition:all .15s;
}
#nsd-glossary .nsdg-pill:is(:hover,:focus-visible){ border-color:var(--c-sage); outline:none; }

/* Optional “sticky” Leisten (bei Bedarf top-Werte an deinen Header anpassen) */
@media (min-width: 768px){
  #nsd-glossary .nsdg-controls{ position:sticky; top: 96px; z-index:3; }
  #nsd-glossary .nsdg-activebar{ position:sticky; top: 156px; z-index:3; }
}

/* Barrierefreiheit: sichtbarer Focus */
#nsd-glossary .nsdg-chip:focus-visible,
#nsd-glossary .nsdg-az-btn:focus-visible,
#nsd-glossary .btn-ghost:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; }

/* Klick-Cursor-Sicherheit */
#nsd-glossary .nsdg-pill,
#nsd-glossary .nsdg-chip,
#nsd-glossary .nsdg-open{ cursor:pointer; }

/* =========================================================
   (Optional) Ingredients DB – Bild-Basics (unabhängig vom Glossar)
   Wenn du sie brauchst, kannst du sie lassen – sie greifen NICHT ins Glossar.
   ========================================================= */
.ing__media{ margin:0 0 .5rem 0; }
.ing__img{ display:block; max-width:100%; height:auto; border-radius:12px; }

/* Blog – Glossar-Pills */
.article-glossary-pills{ margin-top: 12px; font-size:.9rem; }
.article-glossary-pills .pill-label{ font-weight:700; margin-right:6px; color:var(--nsd-green-dark,#234F28); }
.article-glossary-pills .pill-list{ display:inline-flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.article-glossary-pills .pill{
  display:inline-block; text-decoration:none;
  background:var(--nsd-cream,#fdfcf8); border:1px solid #e8e6e0; border-radius:999px;
  padding:.28rem .6rem; line-height:1; color:#234F28;
}
.article-glossary-pills .pill--more{ border-style:dashed; }
.article-glossary-pills .pill:hover{ border-color:var(--nsd-coral,#F28B82); }
/* Article glossary pills – More dropdown */
.article-glossary-pills .pill-more details{position:relative; display:inline-block}
.article-glossary-pills .pill-more summary{list-style:none; cursor:pointer}
.article-glossary-pills .pill-more summary::-webkit-details-marker{display:none}

.article-glossary-pills .pill-list--more{
  display:none;
  position:absolute; z-index:50;
  margin-top:.4rem; padding:.5rem;
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  gap:.4rem; flex-wrap:wrap;
}
.article-glossary-pills .pill-more[open] .pill-list--more{display:flex}
/* Container + Summary klickbar */
.article-glossary-pills .pill-more details { position: relative; display: inline-block; }
.article-glossary-pills .pill-more summary { list-style: none; cursor: pointer; }
.article-glossary-pills .pill-more summary::-webkit-details-marker { display: none; }

/* Popover: standardmäßig versteckt, nur bei geöffnetem <details> zeigen */
.article-glossary-pills .pill-list--more { 
  position: absolute; z-index: 50;
  margin-top: .4rem; padding: .5rem;
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  gap: .4rem; flex-wrap: wrap;
  display: none;             /* <— standardmäßig aus */
}
.article-glossary-pills .pill-more details[open] .pill-list--more {
  display: flex;             /* <— beim Öffnen einblenden */
}
:root {
#nsd-hero .nsd-hero__trust { position:absolute; right:1rem; bottom:1rem; }
.nsd-badge { background:#fff; border:1px solid rgba(0,0,0,.08); padding:.4rem .7rem; border-radius:999px; box-shadow: var(--nsd-shadow); }


/* Buttons */
.nsd-btn { display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:999px; font-weight:600; border:1px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.nsd-btn:hover { transform: translateY(-1px); box-shadow: var(--nsd-shadow); }
.nsd-btn--primary { background: var(--nsd-green); color:#fff; }
.nsd-btn--sage { background: var(--nsd-sage); color:#0b3012; }
.nsd-btn--ghost { background: transparent; color: var(--nsd-green); border-color: color-mix(in oklab, var(--nsd-green), #fff 75%); }


/* USP */
.nsd-usp__grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin: 1.5rem 0 0; }
.nsd-usp__item { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: var(--nsd-radius); padding:1rem; text-align:center; box-shadow: var(--nsd-shadow); }
.nsd-usp__icon { width:48px; height:48px; margin-bottom:.5rem; }


/* Quick Finder */
.nsd-qf__chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.nsd-chip { padding:.5rem .8rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--nsd-green), #fff 82%); background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.nsd-chip:hover { border-color: var(--nsd-green); }


/* Cards */
.nsd-str__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
.nsd-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: var(--nsd-radius); overflow:hidden; box-shadow: var(--nsd-shadow); display:flex; flex-direction:column; }
.nsd-card__media img { width:100%; aspect-ratio: 4/3; object-fit: cover; }
.nsd-card__body { padding:1rem; display:grid; gap:.5rem; }
.nsd-card__title { margin:0; font-size:1.125rem; }
.nsd-card__ctas { display:flex; gap:.5rem; }


/* Blog Cards leichter */
.card-wrapper:hover { transform: translateY(-2px); box-shadow: var(--nsd-shadow); }


/* Instagram Grid */
.nsd-ig { display:grid; grid-template-columns: repeat(6, 1fr); gap:.5rem; }
.nsd-ig img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius: 12px; }


/* Newsletter */
.nsd-newsletter { background: color-mix(in oklab, var(--nsd-cream), #000 4%); border:2px solid var(--nsd-red); border-radius: var(--nsd-radius); padding:1rem; }


/* Footer */
.footer { background: var(--nsd-cream) !important; }
.footer .social-icons a { opacity:.9; filter: saturate(1); }


/* Responsive */
@media (max-width: 1024px){
.nsd-usp__grid, .nsd-str__grid { grid-template-columns: repeat(2,1fr); }
#nsd-hero .nsd-hero__dec--a { width:48vw; }
}
@media (max-width: 640px){
.nsd-usp__grid, .nsd-str__grid { grid-template-columns: 1fr; }
#nsd-hero .nsd-hero__inner { padding: 1.25rem; }
}
/* vorhandene A/B lassen wir; neu: C */
#nsd-hero .nsd-hero__dec--c {
  left: 42%;
  bottom: -6%;
  width: min(32vw, 460px);
  transform: rotate(-2deg);
  opacity: .95;
  pointer-events: none;
}

/* Shop the recipe */
.nsd-str__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.nsd-str__grid > .nsd-card { grid-column: span 3 / span 3; }
@media (max-width: 1200px) { .nsd-str__grid > .nsd-card { grid-column: span 4 / span 4; } }
@media (max-width: 720px)  { .nsd-str__grid > .nsd-card { grid-column: span 6 / span 6; } }

.nsd-str__grid--overview > .nsd-card { grid-column: span 4 / span 4; } /* 3 Kacheln */
@media (max-width: 1200px) { .nsd-str__grid--overview > .nsd-card { grid-column: span 6 / span 6; } }
@media (max-width: 720px)  { .nsd-str__grid--overview > .nsd-card { grid-column: span 12 / span 12; } }

.nsd-card__media--placeholder { aspect-ratio: 4 / 3; background: #f3f3f1; border-radius: 12px; }
.nsd-chip, .nsd-chip--link { display:inline-block; padding:.25rem .5rem; border-radius:9999px; background:var(--color-accent,#8BAA91); color:#fff; font-size:.8rem; }
.nsd-chip--link:hover { text-decoration: underline; }
.product-card .nsd-legal-note--affiliate{
  margin:.5rem 0 0;
  font-size:.9rem;
  opacity:.9;
}
.nsd-affi-badge{display:block;font-size:.75rem;opacity:.7;margin-top:.35rem}

/* =========================================================
   NSD – Header & Mega-Menü (clean, ohne Duplikate)
   ========================================================= */
.nsd-nav > ul { display:flex; gap:1rem; align-items:center; }
.nsd-nav .has-mega { position:relative; }
.nsd-nav .has-mega > a { position:relative; }

/* Panel (Desktop) */
.nsd-header .mega { display:none; }
.nsd-header .mega.is-open { display:block; } /* falls per JS getoggelt */

.mega{
  position:absolute; left:0; top:100%;
  width:min(1080px, 92vw);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
  padding:16px 16px 12px;
  margin-top:12px;
  z-index:50;
}

/* Desktop Hover/Fokus */
.nsd-nav .has-mega:hover .mega,
.nsd-nav .has-mega:focus-within .mega { display:block; }

/* Inhalt */
.mega__inner{ max-width:1200px; margin:0 auto; }
.mega__top{ display:flex; gap:.5rem; margin-bottom:.75rem; }

.mega__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.6rem;
  margin:.25rem 0 1rem;
}
.mega__item{
  display:flex; align-items:center; justify-content:center;
  padding:.85rem;
  border:1px solid #dbe5dc;
  border-radius:12px;
  background:#f7faf8;
  font-weight:600;
  color:var(--nsd-green-dark,#2E4A3B);
  transition:background .2s, border-color .2s;
}
.mega__item:hover{ background:#eef5ef; border-color:#d7e6d7; }

.mega__sub{ border-top:1px solid #eef3ef; padding-top:.6rem; }
.mega__sub-title{ font-weight:700; margin:.25rem 0 .5rem; }
.mega__chips{ display:flex; flex-wrap:wrap; gap:.5rem; }

/* Mobil: Mega nicht als Hoverpanel zeigen */
@media (max-width: 1024px){
  .nsd-nav .mega{ display:none !important; }
}

/* =========================================================
   NSD – Komponenten & Overrides (clean)
   ========================================================= */

/* -----------------------------
   Chips (inkl. Subchips)
------------------------------ */
.chip, .nsd-chip, .subchip {
  --g: var(--nsd-green-dark, #2E4A3B);
  color: var(--g);
  background: #F4F7F5;
  border: 1.5px solid #9DB5A8;
  border-radius: 999px;
  padding: .45rem .8rem;
  font-weight: 600;
  display:inline-flex; align-items:center; gap:.45rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chip:hover, .nsd-chip:hover, .subchip:hover,
.chip:focus-visible, .nsd-chip:focus-visible, .subchip:focus-visible{
  background: var(--g); color:#fff; border-color: var(--g);
  box-shadow: 0 0 0 3px rgba(46,74,59,.18); outline: none;
}
.chip:active, .nsd-chip:active, .subchip:active { transform: translateY(1px); }

/* „Leerer“/Platzhalter-Chip solange Ziel-URL fehlt */
.chip[aria-disabled="true"]{
  color:#98a7a1; background:#F3F5F4; border-color:#E1E7E4;
  pointer-events:none; opacity:.75;
}

/* -----------------------------
   Buttons (Primary & Ghost)
------------------------------ */
.nsd-btn{
  --g: var(--nsd-green-dark, #2E4A3B);
  color: var(--g);
  background: transparent;
  border: 2px solid var(--g);
  border-radius: 999px;
  padding:.6rem 1rem;
  font-weight:700;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.nsd-btn:hover, .nsd-btn:focus-visible{
  background: var(--g); color:#fff; border-color:var(--g);
  box-shadow: 0 0 0 3px rgba(46,74,59,.18); outline:none;
}
/* Ghost */
.nsd-btn.nsd-btn--ghost{
  border-color:#AFC2B9;
  color:var(--nsd-green-dark,#2E4A3B);
}
.nsd-btn.nsd-btn--ghost:hover,
.nsd-btn.nsd-btn--ghost:focus-visible{
  background:#EEF3EF;
  border-color:var(--nsd-green-dark,#2E4A3B);
  color:var(--nsd-green-dark,#2E4A3B);
  box-shadow:0 0 0 3px rgba(46,74,59,.12);
}

/* -----------------------------
   USP-Strip
------------------------------ */
.nsd-usp-strip { margin-block: clamp(12px, 3vw, 24px); }
.nsd-usp-strip ul, .nsd-usp-strip li { list-style:none; margin:0; padding:0; }
.nsd-usp-strip .usp-grid{
  display:grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (min-width:900px){
  .nsd-usp-strip .usp-grid{ grid-template-columns: repeat(4, 1fr); }
}
.nsd-usp-strip .usp-card{
  display:grid; grid-template-columns: 32px 1fr; align-items:start; column-gap:12px;
  border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding: clamp(14px, 2.2vw, 20px);
  background:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nsd-usp-strip .usp-card:hover,
.nsd-usp-strip .usp-card:focus-within{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.08);
}
.nsd-usp-strip .usp-icon,
.nsd-usp-strip .usp-icon-img{ width:28px; height:28px; }

/* -----------------------------
   Hero-Tagline (lesbarer)
------------------------------ */
.nsd-hero-tagline{
  position:relative; max-width:960px; margin:0 auto;
  padding:1rem 1.25rem 1.5rem; border-radius:1rem;
  background: rgba(255,255,255,.88); /* minimal dunkler für Kontrast */
  backdrop-filter: saturate(140%) blur(6px);
}
@media (min-width:768px){
  .nsd-hero-tagline{ position:absolute; left:2rem; bottom:2rem; max-width:640px; }
}
.nsd-hero-tagline__title{
  margin:0 0 .25rem; font-weight:800;
  font-size:clamp(1.4rem,2.4vw,2.2rem); color:#1f3d2b;
}
.nsd-hero-tagline__sub{ margin:0 0 .75rem; color:#2f4736; }
.nsd-hero-tagline__cta{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* -----------------------------
   Karten-Bild-Hover (Bild 1 etc.)
------------------------------ */
.nsd-card__media img{
  display:block; width:100%; height:auto;
  transition: transform .35s ease, filter .35s ease;
  will-change: transform;
}
.nsd-card:hover .nsd-card__media img,
.nsd-card:focus-within .nsd-card__media img{ transform: scale(1.02); }
@media (prefers-reduced-motion: reduce){
  .nsd-card__media img{ transition:none; }
}

/* -----------------------------
   Fokus sichtbar (A11y)
------------------------------ */
:where(.chip,.nsd-chip,.subchip,.nsd-btn){ outline-offset:2px; }
:where(.chip,.nsd-chip,.subchip,.nsd-btn):focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(46,74,59,.25);
}

/* -----------------------------
   Footer-Hintergrund – Styleguide-konform
   (nur falls irgendwo überschrieben wurde)
------------------------------ */
/* .site-footer, .nsd-footer { background: var(--nsd-cream, #fdfcf8); } */
/* Mega: sichere Z-Ordnung */
.nsd-header { position: sticky; top: 0; z-index: 60; }
.mega { z-index: 70; }
.mega[hidden]{ display:none !important; }

/* Hover-Schutzbrücke – unsichtbare Zone unter dem Menüpunkt */
.nsd-nav li.has-mega { position: relative; }
.nsd-nav .hover-buffer{
  position: absolute;
  left: -24px; right: -24px;
  height: 24px;
  bottom: -24px;      /* sitzt direkt über dem Panel */
  pointer-events: auto;
}

/* Optional: Panel an den Header kleben */
.nsd-header + .mega#MegaPanel{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
}

/* Highlights */
.mega__highlights .highlight {
  display: block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: box-shadow .2s;
}
.mega__highlights .highlight:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.highlight__eyebrow {
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--nsd-green-dark, #234f28);
  margin-bottom: .25rem;
}
.highlight__title {
  font-weight: 600;
  margin-bottom: .25rem;
}
.highlight__text {
  font-size: .85rem;
  color: #444;
}

/* === USP: gleiche Höhe für alle Karten ===================== */
.nsd-usp-strip .usp-grid {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: stretch;                 /* Karten in der Zeile auf gleiche Höhe */
}
@media (min-width: 740px){ .nsd-usp-strip .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .nsd-usp-strip .usp-grid { grid-template-columns: repeat(4, 1fr); } }

/* Karte auf volle Zeilenhöhe und sauberer Innenaufbau */
.nsd-usp-strip .usp-card{
  height: 100%;
  display: flex;                        /* Icon + Text nebeneinander/untereinander je nach Markup */
  align-items: flex-start;
  gap: .75rem;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: clamp(14px, 2.2vw, 20px);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  /* Optional: eine sinnvolle Mindesthöhe für optische Gleichheit über Zeilen hinweg */
  min-height: clamp(132px, 18vw, 168px);
}

/* Text-Block füllt die Karte – Titel oben, Copy unten */
.nsd-usp-strip .usp-copy{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 auto;                       /* nimmt restliche Höhe ein */
}

.nsd-usp-strip .usp-copy h3{
  margin: 0;
  font-weight: 700;
}

.nsd-usp-strip .usp-copy p{
  margin: 0;
  margin-top: .15rem;
}

/* Falls dein Icon in .usp-icon / .usp-icon-wrap steckt: nicht schrumpfen */
.nsd-usp-strip .usp-icon,
.nsd-usp-strip .usp-icon-wrap,
.nsd-usp-strip .usp-icon-img{
  flex: 0 0 auto;
}

/* Kleine Politur: Hover ohne Layout-Shift */
.nsd-usp-strip .usp-card:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: rgba(46,74,59,.18);
}
@media (max-width: 740px){
  .nsd-usp-strip .usp-card{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


}
.nsd-blog__hero-media img {
  max-height: 380px;
  object-fit: cover;
  border-radius: 12px;
}
@media(max-width: 749px){
  .nsd-blog__hero-media img {
    max-height: 240px;
  }
}
.nsd-blog__hero-media img {
  max-height: 380px;
  object-fit: cover;
  border-radius: 12px;
}
@media(max-width: 749px){
  .nsd-blog__hero-media img {
    max-height: 240px;
  }
}
/* Hero-Bild schmäler machen */
.nsd-blog__hero-inner {
  grid-template-columns: 1fr 0.8fr; /* Text etwas breiter, Bild schmäler */
}

.nsd-blog__hero-media img {
  max-width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.nsd-viewtoggle{margin-top:8px;margin-bottom:4px}
.nsd-viewtoggle .nsd-chip{font-weight:600}

/* --- Artikel: Mini-Layout + Abstände (Sense) -------------------------------- */

/* harte Bildbremse NUR für Bilder, die explizit in nsd-Row liegen */
.template-article .rte .nsd-row img {
  max-width: 520px;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* kleine Icons/Bilder in Pills (falls vorhanden) */
.template-article .rte .nsd-pills img {
  max-width: 140px;
  width: 100%;
  height: auto;
}

.affiliate-box {
  background: #f4fdf9;
  border-left: 4px solid #99c9b5;
  padding: 2rem;
  margin-top: 3rem;
}

.article-cta {
  margin-top: 4rem;
  text-align: center;
  padding: 2rem;
  background: #fef9f1;
  border: 1px dashed #d9b279;
}

.article-cta .button {
  background-color: #2c5e50;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
  margin-top: 1rem;
}
.form-success {
  background: #dff5e1;
  color: #205c37;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid #88c99c;
  font-weight: bold;
  border-radius: 4px;
}
.cart_dynamic-checkout-buttons {
  display: none !important;
}
.article-affiliate {
  display: none !important;
}
.article-cta {
  margin-top: 4rem;
  text-align: center;
  padding: 2rem;
  background: #fef9f1;
  border: 1px dashed #d9b279;
}
.article-cta {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10;
  position: relative;
}
.nsd-privacy-mini { margin:.75rem 0 0; font-size:.95rem; color:#4b5563; }
.nsd-privacy-mini a { text-decoration: underline; }

.nsd-legal-note { margin: .75rem 0 0; padding:.75rem 1rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff; color:#374151; }
.nsd-legal-note strong { font-weight:700; }
/* Kommentare – Feinschliff */
#nsd-comment-shadow-host .field + .field { margin-top:.75rem; }
#nsd-comment-shadow-host .field--checkbox { margin-top:.75rem; }
#nsd-comment-shadow-host button { margin-top:.5rem; }

/* bessere Focus-Outline (A11y) */
#nsd-comment-shadow-host input:focus,
#nsd-comment-shadow-host textarea:focus,
#nsd-comment-shadow-host button:focus {
  outline: 2px solid var(--nsd-green-dark, #234F28);
  outline-offset: 2px;
}

/* nur im Rezept-Template */
.template-suffix--rezepte #kommentare{
  display:block;
  clear:both;
  margin:24px 0 48px;
}

/* falls Netiquette/Form-Boxen Floats verwenden */
.template-suffix--rezepte #kommentare .nsd-netiquette-box,
.template-suffix--rezepte #kommentare .nsd-comment-form{
  display:flow-root;
}

/* der unsichtbare Trenner aus dem Template, falls du ihn per CSS stylen willst */
.template-suffix--rezepte .nsd-footer-separator{
  display:block;
  height:1px;
  margin-top:32px;
  clear:both;
}
/* Mehr Luft vor dem FAQ-Bereich in Artikeln */
.template-article .nsd-cta + #faq,
.template-article .nsd-cta + section#faq,
.template-article .nsd-cta + .nsd-faq,
.template-suffix--rezepte .nsd-cta + #faq,
.template-suffix--rezepte .nsd-cta + .nsd-faq {
  margin-top: 56px !important;   /* Abstand anpassen */
}

/* Margin-Collapsing verhindern, falls nötig */
#faq, .nsd-faq {
  padding-top: 1px;               /* tiny padding entkoppelt Margins */
  border-top: 1px solid transparent;
}

/* optional: der Button-Block selbst etwas Abstand nach unten */
.nsd-cta { 
  margin-bottom: 24px;
}
.nsdg-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.nsdg-more{ white-space:nowrap; }
.nsdg-card.is-open { /* optional: leichte Hervorhebung bei geöffnet */ }
/* NSD Glossar – Details robust anzeigen */
.nsdg-detail[hidden] { display: none !important; }
.nsdg-card.is-open .nsdg-detail { display: block !important; }
/* ===== NSD Glossar – Layout der Karten ===== */
.nsdg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}

/* Karte: optisch clean, ganze Fläche klickbar */
.nsdg-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  transition:box-shadow .15s ease, transform .05s ease, border-color .15s ease;
  height:100%;
}
.nsdg-card:hover{
  border-color:rgba(0,0,0,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.nsdg-card:active{ transform:translateY(1px); }

/* Link deckt die ganze Karte ab */
.nsdg-cardlink{
  display:block;
  height:100%;
  padding:14px 16px;
  text-decoration:none;
  color:inherit;
  border-radius:14px; /* für sichtbaren Focus */
  outline:none;
}
.nsdg-cardlink:focus-visible{
  box-shadow:0 0 0 3px rgba(20,115,230,.35);
}

/* obere Reihe: Titel + "Mehr lesen" rechtsbündig */
.nsdg-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
}

/* Titel */
.nsdg-term{
  font-size:18px;
  line-height:1.25;
  margin:0;
  font-weight:700;
}

/* "Mehr lesen" als dezenter Call-to-action */
.nsdg-go{
  font-size:14px;
  white-space:nowrap;
  opacity:.75;
}
.nsdg-go::after{
  content:"›";
  margin-left:6px;
  display:inline-block;
  transform:translateY(-1px);
  opacity:.9;
}

/* A–Z Buttons etwas luftig */
.nsdg-az{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.nsdg-az-btn{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:22px;
  padding:6px 10px;
  line-height:1;
  cursor:pointer;
}
.nsdg-az-btn.is-active{
  border-color:rgba(20,115,230,.4);
  box-shadow:0 0 0 2px rgba(20,115,230,.12) inset;
}

/* Chips (Tags/Syn/Rel) – dezentes Toggle-Feedback */
.nsdg-chiprow{ display:flex; flex-wrap:wrap; gap:8px; }
.nsdg-chip{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
}
.nsdg-chip.is-active{
  background:rgba(20,115,230,.08);
  border-color:rgba(20,115,230,.35);
}

/* Statusleiste */
.nsdg-activebar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; margin:10px 0 6px;
  font-size:14px;
  color:#444;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nsdg-clears .nsdg-clear{ margin-left:8px; }

/* === DIY-Science Artikel Layout (scoped) === */
.nsd-article--science{
  --gap: clamp(12px,2.2vw,22px);
  --radius: 16px;
  --shade: 0 12px 28px rgba(0,0,0,.06);
  --cream: var(--nsd-cream, #FDFCF8);
  --green: var(--nsd-green-dark, #234F28);
  --muted: #2a2a2a;
}

.nsd-article--science{ max-width: 840px; margin-inline: auto; text-align: left; }
.nsd-article--science > * + *{ margin-top: .85rem; }

/* Lead */
.nsd-article--science .nsd-lead{
  font-size: clamp(1.02rem, 1rem + .35vw, 1.18rem);
  line-height: 1.6;
  background:#F4F7F5; border:1px solid #AFC2B9; padding:.85rem 1rem;
  border-radius: var(--radius); box-shadow: var(--shade);
}

/* Bilder als Karten */
.nsd-article--science .nsd-img-wrap{
  margin: 1rem 0; background: #fff; border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shade);
}
.nsd-article--science .nsd-img-wrap img{ display:block; width:100%; height:auto; }
.nsd-article--science .nsd-img-wrap figcaption{
  font-size:.92rem; opacity:.85; padding:.55rem .8rem; border-top:1px solid rgba(0,0,0,.06);
}

/* Variante: Bild rechts floaten (wenn du deiner Figur zusätzlich die Klasse nsd-img-wrap--side gibst) */
@media (min-width: 860px){
  .nsd-article--science .nsd-img-wrap--side{ float:right; width:min(44%, 420px); margin:.25rem 0 .75rem var(--gap); }
}

/* Listen */
.nsd-article--science .nsd-list li{ margin:.35rem 0; }

/* Checkliste mit Häkchen (für <ul class="nsd-list nsd-checks"> oder nur .nsd-checks) */
.nsd-article--science .nsd-checks{ list-style:none; padding-left:0; }
.nsd-article--science .nsd-checks li{ position:relative; padding-left:1.55rem; margin:.5rem 0; }
.nsd-article--science .nsd-checks li::before{
  content:"✓"; position:absolute; left:.2rem; top:.05rem; font-weight:700; color:var(--green);
}

/* Nummerierte H2 wie im Screenshot */
.nsd-article--science{ counter-reset: sec; }
.nsd-article--science h2{
  position:relative; padding-left: 2.2rem; margin: 1.1rem 0 .5rem;
}
.nsd-article--science h2::before{
  counter-increment: sec; content: counter(sec) ")";
  position:absolute; left:0; top:0; transform: translateY(2px);
  background: #fff; border:1px solid rgba(0,0,0,.12);
  color: var(--green); font-weight:700; width:1.6rem; height:1.6rem;
  border-radius: 999px; display:inline-flex; align-items:center; justify-content:center;
}

/* Hinweisbox (Fazit) */
.nsd-article--science .nsd-note{
  background:#FFF7F5; border:1px solid #F7C59F; border-left:4px solid #F28B82;
  border-radius: var(--radius); padding:.9rem 1rem;
}

/* Glossar-Pills (falls im Text verwendet) */
.nsd-article--science .nsd-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 1rem; }
.nsd-article--science .nsd-pill{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--green); text-decoration:none; line-height:1;
}
.nsd-article--science .nsd-pill:hover{ background:var(--green); color:#fff; }

/* CTA Button */
.nsd-article--science .nsd-cta-center{ text-align:center; margin-top: 1.2rem; }
.nsd-article--science .nsd-btn{
  display:inline-block; padding:.65rem 1.1rem; border-radius:999px; text-decoration:none; line-height:1;
}
.nsd-article--science .nsd-btn--primary{ background:var(--green); color:#fff; }
.nsd-article--science .nsd-btn--primary:hover{ filter:brightness(.95); }

/* Kleines Aufräumen, wenn ein Bild floated */
@media (min-width:860px){
  .nsd-article--science:after{ content:""; display:block; clear:both; }
}
.nsd-article--science h2{ margin: 1.1rem 0 .6rem }
@media (min-width:860px){
  .nsd-article--science .nsd-img-wrap--side{ margin:.25rem 0 .5rem 16px }
}
.nsd-article--science .nsd-card ul{ margin:.2rem 0 }
.nsd-article--science .nsd-card li{ margin:.25rem 0 }
.nsd-article--science .nsd-pill{ border-color: rgba(35,79,40,.65) }
.nsd-article--science .nsd-pill:hover{ background:#234F28; color:#fff }
/* Glossar-CTAs */
.nsd-ctas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.nsd-cta{display:inline-block;padding:.5rem .9rem;border-radius:999px;border:1px solid #e8d5c2;background:#fff;text-decoration:none}
.nsd-cta:hover{background:#f7f3ed}
.nsd-cta--primary{background:var(--apricot,#F7C59F);border-color:#e8d5c2;color:#2b211a;font-weight:600}
/* --- NSD: Term-CTAs (Glossar-Begriff) --- */
.prose .nsd-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:1rem 0 0.25rem 0;
}

.prose .nsd-cta{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem;
  border-radius:999px;
  border:2px solid var(--nsd-green-dark, #2E4A3B);
  background:#fff;
  color:var(--nsd-green-dark, #2E4A3B);
  font-weight:600; line-height:1; text-decoration:none; white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  transition:background-color .2s, color .2s, border-color .2s, transform .05s;
}

/* Pfeil-Deko (kannst du entfernen, wenn du’s nicht willst) */
.prose .nsd-cta::after{
  content:"→";
  font-weight:700; line-height:1;
  transform:translateX(0);
  transition:transform .15s ease;
}
.prose .nsd-cta:hover::after{ transform:translateX(3px); }

/* Hover/Active/Focus */
.prose .nsd-cta:hover{
  background:rgba(46,74,59,.06);
}
.prose .nsd-cta:active{
  transform:translateY(1px);
}
.prose .nsd-cta:focus-visible{
  outline:3px solid #9BD0AA; outline-offset:2px;
  border-color:#2E4A3B;
}

/* Primärer Button (z. B. „Zum Ratgeber“) */
.prose .nsd-cta--primary{
  background:var(--nsd-green-dark, #2E4A3B);
  color:#fff;
  border-color:var(--nsd-green-dark, #2E4A3B);
  box-shadow:0 6px 14px rgba(35,79,40,.18);
}
.prose .nsd-cta--primary:hover{
  background:#214836; border-color:#214836;
}
.prose .nsd-cta--primary:focus-visible{
  outline:3px solid #bfe3c9; outline-offset:2px;
}

/* „Sekundär“ / neutrale Variante (Weitere Artikel …) */
@media (max-width: 700px){
  .prose .nsd-ctas{ gap:.5rem; }
  .prose .nsd-cta{ padding:.55rem .9rem; font-size:.95rem; }
}

/* Optional: wenn du lieber den Apricot-Ton als Sekundär willst */
.prose .nsd-cta.nsd-cta--apricot{
  border-color:#E8D5C2;
  background:var(--apricot, #F7C59F);
  color:#2b211a;
}
.prose .nsd-cta.nsd-cta--apricot:hover{
  filter:brightness(.97);
}
/* ===== NSD Glossar – kompakte Cards & UI ===== */

/* Headline etwas kompakter */
.nsdg-title{
  margin: .25rem 0 .75rem;
  letter-spacing:.2px;
}

/* A–Z Zeile: enger & klickig */
.nsdg-az{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.35rem 0 .6rem; }
.nsdg-az-btn{
  appearance:none; border:1.5px solid #C9D5CE; background:#F6F9F7; color:#2E4A3B;
  padding:.28rem .55rem; border-radius:999px; font-weight:600; line-height:1;
  transition:background .15s, color .15s, border-color .15s, transform .05s;
}
.nsdg-az-btn:hover{ background:#E9F1EC; border-color:#9DB5A8; }
.nsdg-az-btn.is-active{ background:#2E4A3B; color:#fff; border-color:#2E4A3B; }

/* Suche */
.nsdg-search{ margin:.5rem 0 .75rem; }
.nsdg-search input[type="search"]{
  width:100%; padding:.55rem .75rem; border:1.5px solid #DCE6E1; border-radius:10px;
  background:#fff; outline:none; transition:border-color .15s, box-shadow .15s;
}
.nsdg-search input[type="search"]:focus{
  border-color:#2E4A3B; box-shadow:0 0 0 3px rgba(46,74,59,.15);
}
.nsdg-help{ margin:.35rem 0 0; font-size:.9rem; opacity:.8 }

/* Chip-Filtersektion */
.nsdg-filters details{ margin:.25rem 0 .35rem }
.nsdg-chiprow{ display:flex; flex-wrap:wrap; gap:.35rem; padding:.25rem 0 }
.nsdg-chip{
  border:1.5px solid #C9D5CE; background:#fff; color:#2E4A3B; font-weight:600;
  padding:.28rem .55rem; border-radius:999px; line-height:1; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.nsdg-chip:hover{ background:#F4F7F5; }
.nsdg-chip.is-active{ background:#2E4A3B; color:#fff; border-color:#2E4A3B; }

/* Aktive-Filter-Leiste */
.nsdg-activebar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.5rem .75rem; margin:.25rem 0 .5rem;
  border:1px solid #E6EEE9; border-radius:10px; background:#FAFCFB;
}
.nsdg-active{ font-weight:600 }
.nsdg-clears{ display:flex; gap:.35rem; }
.nsdg-clear{
  appearance:none; border:1.5px solid #C9D5CE; background:#fff; color:#2E4A3B;
  padding:.28rem .55rem; border-radius:999px; font-weight:600; line-height:1;
}
.nsdg-clear.is-mini{ font-size:.9rem; padding:.22rem .5rem }

/* Grid – etwas dichter */
.nsdg-grid{
  display:grid; gap:clamp(10px,2.4vw,16px);
  grid-template-columns:repeat(1,minmax(0,1fr));
}
@media(min-width:680px){ .nsdg-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:990px){ .nsdg-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px){ .nsdg-grid{ grid-template-columns:repeat(4,1fr); } }

/* Card */
.nsdg-card{
  border:1px solid rgba(0,0,0,.06); border-radius:12px; background:#fff;
  transition:box-shadow .2s, transform .05s, border-color .2s;
}
.nsdg-card:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.07);
  border-color:rgba(0,0,0,.10);
}
.nsdg-card:active{ transform:translateY(1px); }

/* Card-Content */
.nsdg-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem .9rem; }
.nsdg-term{
  margin:0; font-weight:800; letter-spacing:.1px;
  color:#143425; font-size:1.02rem;
}
.nsdg-go{
  color:#2E4A3B; opacity:.85; font-weight:700; font-size:.92rem;
  display:inline-flex; align-items:center; gap:.25rem;
}
.nsdg-go::after{ content:"→"; transform:translateX(0); transition:transform .15s ease; }
.nsdg-card:hover .nsdg-go::after{ transform:translateX(3px); }

/* Fokus-Style für Tastaturbedienung */
.nsdg-cardlink:focus-visible{
  outline:3px solid #9BD0AA; outline-offset:3px; border-radius:10px;
}

/* Leerer Zustand */
#nsdg-empty{ padding:.75rem; border:1px dashed #DCE6E1; border-radius:10px; margin-top:.5rem; }
/* --- Fix: CTA-Text im Glossar-Term sichtbar machen --- */

/* Sekundär-CTA (weißer Hintergrund) */
.prose a.nsd-cta,
.prose a.nsd-cta:link,
.prose a.nsd-cta:visited {
  color: var(--nsd-green-dark, #2E4A3B) !important;
  text-decoration: none;
}

/* Hover/Focus dürfen die Farbe nicht „wegziehen“ */
.prose a.nsd-cta:hover,
.prose a.nsd-cta:focus,
.prose a.nsd-cta:active {
  color: var(--nsd-green-dark, #2E4A3B) !important;
}

/* Primär-CTA (grün, weißer Text) */
.prose a.nsd-cta--primary,
.prose a.nsd-cta--primary:link,
.prose a.nsd-cta--primary:visited {
  color: #fff !important;
  background: var(--nsd-green-dark, #2E4A3B); /* falls was überschreibt */
  border-color: var(--nsd-green-dark, #2E4A3B);
}

.prose a.nsd-cta--primary:hover,
.prose a.nsd-cta--primary:focus,
.prose a.nsd-cta--primary:active {
  color: #fff !important;
}
/* Glossar Chips (Synonyme, Tags, Verwandte) */
.prose a,
.nsdg-chip,
.nsdg-detail a {
  color: var(--nsd-green-dark,  #fdfcf8) !important;
  text-decoration: none;
}

.prose a:hover,
.nsdg-chip:hover,
.nsdg-detail a:hover {
  color: var(--nsd-coral, #F28B82);
  text-decoration: underline;
}
/* ==============================
   NSD – Hauttyp-Quiz (reines Layout)
   greift nur innerhalb #hauttyp-quiz-section
   ============================== */

#hauttyp-quiz-section {
  /* die ganze Sektion als elegante Karte */
  background: var(--cream);
  border: 2px solid var(--beige);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: clamp(20px,3vw,40px);
  max-width: 860px;
  margin: 2.25rem auto;
  position: relative;
  isolation: isolate;
}

/* zarte Akzentleiste oben */
#hauttyp-quiz-section::before{
  content:"";
  position:absolute; inset:-2px -2px auto -2px; height:6px;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
  background: linear-gradient(90deg, var(--coral), var(--sage));
}

/* Header (Titel + Logo) */
#hauttyp-quiz-section .hq-head-inner{
  text-align:center;
  margin-bottom: clamp(10px,2.5vw,18px);
}
#hauttyp-quiz-section .hq-head-inner h2{
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: clamp(1.4rem,2.4vw,2rem);
  margin: 0 0 .5rem;
}

/* --- Quiz-Schritt (Frage + Antworten) --- */
#hauttyp-quiz-section #hq-quiz-root .hq-question{
  background:#fff;
  border: 1.5px solid var(--beige);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-base);
  padding: clamp(16px,2.2vw,26px);
}

/* Frage */
#hauttyp-quiz-section #hq-quiz-root .hq-question h3{
  margin: 0 0 .9rem;
  color: var(--color-primary);
  text-align:center;
  font-weight: 700;
  font-size: 1.1rem;
}

/* Antwort-Grid */
#hauttyp-quiz-section #hq-quiz-root .hq-answers{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: .75rem;
  justify-items:center;
}

/* Antwort-Buttons als Pills */
#hauttyp-quiz-section #hq-quiz-root .hq-answer{
  background:#fff;
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
#hauttyp-quiz-section #hq-quiz-root .hq-answer:hover{
  border-color: var(--sage);
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
#hauttyp-quiz-section #hq-quiz-root .hq-answer:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--coral) 55%, transparent);
  outline-offset: 2px;
}

/* Mobile: Buttons 100% Breite */
@media (max-width:520px){
  #hauttyp-quiz-section #hq-quiz-root .hq-answers{ grid-template-columns: 1fr; }
  #hauttyp-quiz-section #hq-quiz-root .hq-answer{ width:100%; }
}

/* --- Ergebnisbereich --- */
#hauttyp-quiz-section #hq-result-root{
  margin-top: 1rem;
}
#hauttyp-quiz-section #hq-result-root .hq-result-inner{
  background:#fff;
  border:1.5px solid var(--beige);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-base);
  padding: clamp(18px,2.4vw,28px);
}
#hauttyp-quiz-section #hq-result-root h2{
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-align:center;
  margin: 0 0 1rem;
}

/* Rezeptkarten im Ergebnis */
#hauttyp-quiz-section #hq-result-root .recipe-group{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: .9rem;
  margin-bottom: .75rem;
}
#hauttyp-quiz-section #hq-result-root .recipe-card{
  background: var(--cream);
  border:1px solid var(--beige);
  border-radius: var(--radius-base);
  padding: .9rem 1rem;
  box-shadow: var(--shadow-soft);
}
#hauttyp-quiz-section #hq-result-root .recipe-card h3{
  margin: 0 0 .4rem;
  color: var(--color-primary);
}

/* Restart-Button */
#hauttyp-quiz-section .hq-restart-btn{
  display:block;
  margin: .75rem auto 0;
  background: var(--green);
  color:#fff;
  border:none;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  font-weight:700;
  cursor:pointer;
  transition: background .2s ease;
}
#hauttyp-quiz-section .hq-restart-btn:hover{
  background: var(--color-primary);
}
#hauttyp-quiz-section::before{
  background: linear-gradient(90deg, var(--sage), var(--green));
}
#hauttyp-quiz-section::before{
  background: var(--sage);
}
#hauttyp-quiz-section #hq-quiz-root .hq-answer {
  min-width: 200px;
  text-align: center;
}
#hauttyp-quiz-section #hq-quiz-root .hq-question {
  border: 1px solid var(--beige);
  background: var(--cream);
}
/* ===========================
   NSD – Footer Newsletter
   (greift NUR im Footer)
   =========================== */

#footer-newsletter.footer-newsletter {
  /* Abstand zu Content darüber */
  margin: 2.5rem 0 1.5rem;
}

#footer-newsletter .footer-newsletter-box{
  background: var(--cream);
  border: 2px solid var(--beige);             /* Akzent: auf Wunsch -> var(--coral) */
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  max-width: 720px;
  margin: 0 auto;                             /* zentrieren */
}

#footer-newsletter .footer-newsletter-inner{
  padding: clamp(20px, 3vw, 36px);
  text-align: center;
  position: relative;
  isolation: isolate;
}

/* zarte obere Akzentleiste */
#footer-newsletter .footer-newsletter-inner::before{
  content:"";
  position:absolute; inset:-2px -2px auto -2px; height:6px;
  background: linear-gradient(90deg, var(--sage), var(--green));
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}

/* Titel & Text */
#footer-newsletter .footer-newsletter-title{
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin: 0 0 .35rem;
}
#footer-newsletter .footer-newsletter-text{
  color: var(--color-text);
  opacity: .95;
  margin: 0 0 1.1rem;
}

/* Formular-Layout */
#footer-newsletter .footer-newsletter-form{
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-bottom: .75rem;
}
#footer-newsletter .footer-newsletter-form input[type="email"]{
  flex: 1 1 260px;
  padding: .65rem .9rem;
  border: 1px solid var(--beige);
  border-radius: var(--radius-base);
  background: #fff;
  font-size: .95rem;
}
#footer-newsletter .footer-newsletter-form .btn,
#footer-newsletter .footer-newsletter-form button{
  background: var(--green); color:#fff;
  border: none; border-radius: 999px;
  font-weight: 700;
  padding: .65rem 1.2rem;
  cursor: pointer; transition: background .2s ease, transform .06s ease;
}
#footer-newsletter .footer-newsletter-form .btn:hover{
  background: var(--color-primary); transform: translateY(-1px);
}

/* DSGVO/Consent dezenter */
#footer-newsletter .newsletter-consent{
  display: block;
  font-size: .9rem;
  color: var(--color-text);
  opacity: .85;
  margin-top: .25rem;
}
#footer-newsletter .newsletter-consent a{ text-decoration: underline; }

/* Success / Error Feedback */
#footer-newsletter .footer-newsletter-success{
  background: #f0f7f2; color: var(--color-primary);
  border: 1px solid var(--beige);
  border-radius: var(--radius-base);
  padding: .75rem 1rem; margin: .25rem 0 0;
  text-align: center;
}
#footer-newsletter .footer-newsletter-error{
  background: #fff5f5; color: #7b2323;
  border: 1px solid #f3c5c5;
  border-radius: var(--radius-base);
  padding: .75rem 1rem; margin: .25rem 0 0;
  text-align: center;
}

/* Datenschutzhinweis (dezent) */
#footer-newsletter .nsd-newsletter-privacy-note{
  margin-top: .75rem; font-size: .9rem; line-height: 1.45;
  opacity: .9;
}

/* dünner Abstand/Trenner über den Spalten, bleibt zart */
.footer-divider-top{
  height: 1px;
  background: color-mix(in srgb, var(--beige) 55%, transparent);
  max-width: 1100px;
  margin: 2rem auto 1.25rem;
  border-radius: 2px;
}

/* responsive Feinschliff */
@media (max-width: 520px){
  #footer-newsletter .footer-newsletter-form input[type="email"]{ width: 100%; }
  #footer-newsletter .footer-newsletter-form .btn{ width: auto; }
}
#footer-newsletter .footer-newsletter-inner::before{
  content:"";
  position:absolute; inset:-2px -2px auto -2px; height:6px;
  background: linear-gradient(90deg, var(--sage), var(--green));
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}
#footer-newsletter .footer-newsletter-form .btn{
  border-radius: 999px;
}
#footer-newsletter.footer-newsletter{
  margin-top: 3rem;
}
/* === Glossar-Chips: nur der Chip unter der Maus ändert sich === */
/* Falls deine Container/Item-Klassen so heißen: */
.nsdg-chips:hover .nsdg-chip { /* Gruppenhover neutralisieren */
  background: initial;
  border-color: var(--beige);
  color: var(--color-primary);
}
.nsdg-chip:hover,
.nsdg-chip:focus-visible {
  background: var(--apricot);
  color: #1b1b1b;
  border-color: color-mix(in srgb, var(--coral) 60%, var(--apricot));
}

/* Varianten (falls deine Klassen anders heißen) – harmless fallback */
.glossary-term .chips:hover .chip { background: initial; border-color: var(--beige); color: var(--color-primary); }
.glossary-term .chip:hover,
.glossary-term .chip:focus-visible { background: var(--apricot); color:#1b1b1b; border-color: color-mix(in srgb, var(--coral) 60%, var(--apricot)); }
/* =========================================
   A) BLOG (DIY-Science): "Zum/Zurück zum Glossar" Button fix
   – robust: greift für Links zur Glossar-Seite UND Glossar-Tagseiten
   – schließt Chips explizit aus
   ========================================= */

.blog, .article-template, .prose {
  /* Basisstil nur für den Glossar-CTA-Link, nicht für Chips */
}
.prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip),
.prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip),
.article-template a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip),
.article-template a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip) {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  border: 1.5px solid var(--beige);
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;               /* neutralisiert .prose a:hover */
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}
.prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip):hover,
.prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip):hover,
.article-template a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip):hover,
.article-template a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip):hover {
  border-color: var(--sage);
  background: var(--cream);
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* dezenter Pfeil davor (ohne extra Icon-Datei) */
.prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip)::before,
.prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip)::before,
.article-template a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip)::before,
.article-template a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip)::before {
  content:"";
  width:12px; height:12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M14.7 5.3a1 1 0 010 1.4L10.4 11l4.3 4.3a1 1 0 11-1.4 1.4l-5-5a1 1 0 010-1.4l5-5a1 1 0 011.4 0z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M14.7 5.3a1 1 0 010 1.4L10.4 11l4.3 4.3a1 1 0 11-1.4 1.4l-5-5a1 1 0 010-1.4l5-5a1 1 0 011.4 0z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* falls das Theme global .prose a:hover unterstreicht: */
.prose a[href*="/glossar"]:hover { text-decoration: none; }

/* =========================================
   B) GLOSSARY TERM: Hover nur auf dem EINZELNEN Chip
   (Synonyme / Tags / Verwandte)
   ========================================= */

/* Gruppen-Hover neutralisieren */
.nsdg-chips:hover .nsdg-chip,
.glossary-term .chips:hover .chip {
  background: initial;
  border-color: var(--beige);
  color: var(--color-primary);
}

/* Nur der direkt gehoverte Chip reagiert */
.nsdg-chip:hover,
.nsdg-chip:focus-visible,
.glossary-term .chip:hover,
.glossary-term .chip:focus-visible {
  background: var(--apricot);
  color: #1b1b1b;
  border-color: color-mix(in srgb, var(--coral) 60%, var(--apricot));
  text-decoration: none;
}

/* Wenn der Parent via :hover alle färbt, entziehe Nicht-Hovered den Effekt */
.nsdg-chips:has(.nsdg-chip:hover) .nsdg-chip:not(:hover),
.glossary-term .chips:has(.chip:hover) .chip:not(:hover) {
  background: initial;
  color: var(--color-primary);
  border-color: var(--beige);
}
/* FORCE: Glossar-CTA als grüner Pill-Button (Blog/Prose) */
.article-template .prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip),
.article-template a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip),
.prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip),
.article-template .prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip),
.prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip) {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
  text-decoration: none !important;
}

/* Hover/Darken */
.article-template .prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip):hover,
.article-template a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip):hover,
.prose a[href*="/pages/glossar"]:not(.nsdg-chip):not(.chip):hover,
.article-template .prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip):hover,
.prose a[href*="/blogs/"][href*="/tagged/glossar"]:not(.nsdg-chip):not(.chip):hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* === NSD – Cremeherstellung Artikel Layout === */
.nsd-cream-howto { max-width: 860px; margin: 0 auto 3rem; }
.nsd-cream-howto .nsd-hero { text-align:center; margin: 0 0 1rem; }
.nsd-cream-howto .nsd-hero h1 { margin: 0 0 .25rem; }
.nsd-cream-howto .nsd-hero-sub { opacity:.9; }

.nsd-cream-howto .nsd-toc{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; justify-content:center;
  padding:.75rem 1rem; margin: 0 auto 1rem; max-width: 900px;
  background: var(--cream); border:1px solid var(--beige); border-radius: var(--radius-large);
}
.nsd-cream-howto .nsd-toc a{
  padding:.35rem .7rem; border:1px solid var(--beige); border-radius:999px; text-decoration:none;
  color: var(--color-primary); font-weight:600;
}
.nsd-cream-howto .nsd-toc a:hover{ border-color: var(--sage); }

.nsd-cream-howto .nsd-card{
  background:#fff; border:1.5px solid var(--beige); border-radius: var(--radius-large);
  padding: clamp(18px,2.4vw,28px); box-shadow: var(--shadow-soft); margin: .9rem 0;
}
.nsd-cream-howto .nsd-callout{ background: var(--cream); border:1px solid var(--beige); border-radius: var(--radius-base); padding: .9rem 1rem; }
.nsd-cream-howto .nsd-callout--soft{ box-shadow: 0 4px 18px rgba(0,0,0,.05); }

.nsd-cream-howto .nsd-figure img{ width:100%; height:auto; border-radius: var(--radius-base); }
.nsd-cream-howto .nsd-figure figcaption{ font-size:.92rem; opacity:.9; margin-top:.35rem; text-align:center; }

.nsd-cream-howto .nsd-table-wrap{ overflow-x:auto; }
.nsd-cream-howto table{ width:100%; border-collapse: collapse; }
.nsd-cream-howto table th, .nsd-cream-howto table td{ border:1px solid var(--beige); padding:.6rem .7rem; text-align:left; }
.nsd-cream-howto table thead th{ background: var(--cream); }

.nsd-cream-howto details{ border:1px solid var(--beige); border-radius: var(--radius-base); padding:.6rem .8rem; margin:.5rem 0; background:#fff; }
.nsd-cream-howto details[open]{ box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.nsd-cream-howto details summary{ cursor:pointer; font-weight:700; color: var(--color-primary); }

@media (max-width: 560px){
  .nsd-cream-howto .nsd-toc{ justify-content:flex-start; }
}
/* Rezeptkarten-Leiste */
.nsd-cream-howto .nsd-recipe-strip{
  display:grid; gap:14px;
  grid-template-columns: 1fr;
  margin-top: .6rem;
}
@media (min-width: 680px){
  .nsd-cream-howto .nsd-recipe-strip{ grid-template-columns: 1fr 1fr; }
}
.nsd-cream-howto .nsd-recipe-card{
  display:flex; flex-direction:column; background:#fff;
  border:1.5px solid var(--beige); border-radius: var(--radius-large);
  overflow:hidden; box-shadow: var(--shadow-soft);
}
.nsd-cream-howto .nsd-recipe-media img{
  width:100%; height:auto; display:block; aspect-ratio: 16/9; object-fit: cover;
}
.nsd-cream-howto .nsd-recipe-body{ padding:16px 16px 18px; }
.nsd-cream-howto .nsd-recipe-title{ margin:0 0 .25rem; font-size:1.05rem; }
.nsd-cream-howto .nsd-recipe-teaser{ margin:.2rem 0 .8rem; opacity:.9; }
.nsd-cream-howto .nsd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem .9rem; border-radius:999px; font-weight:700; text-decoration:none;
  background: var(--green); color:#fff; border:1.5px solid var(--green);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.nsd-cream-howto .nsd-btn:hover{
  background: var(--color-primary); border-color: var(--color-primary);
  transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* === Hybrid-Section – Mapping auf deine Optik === */

/* Grid */
.rezepte-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  padding:40px 20px;
  background:var(--cream);
}

/* Karte */
.recipe-card{
  background:var(--cream);
  border:1px solid var(--green);
  border-radius:var(--radius-base);
  box-shadow:var(--shadow-base);
  max-width:300px;
  overflow:hidden;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.recipe-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }

/* Bild (neue Section nutzt .recipe-card__media img) */
.recipe-card__media img{
  width:100%; height:180px; object-fit:cover; display:block;
  border-bottom:1px solid var(--green);
}

/* Titel + Teaser */
.recipe-card__title{ color:var(--green); margin:15px 0 6px; font-size:1.1rem; font-family:var(--font-heading); }
.recipe-card__body > p.recipe-card__teaser{ color:var(--color-text); padding:0 14px 14px; font-size:.95rem; font-family:var(--font-base); }

/* Meta */
.recipe-card__meta{ text-align:left; padding:0 22px 18px; font-size:.9rem; color:var(--color-text); margin:0; list-style:none; }
.recipe-card__meta li{ margin:0; }
.recipe-card__meta span{ color:var(--green); }

/* Buttons */
.nsd-btn{ display:inline-block; margin:0 14px 16px; padding:.55rem 1rem; border:1px solid var(--green);
  border-radius:var(--radius-base); background:var(--cream); color:var(--green); text-decoration:none;
  font-family:var(--font-base); font-size:.95rem; line-height:1; box-shadow:var(--shadow-base);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.nsd-btn:hover{ background:var(--apricot); color:var(--green); box-shadow:var(--shadow-soft); }
.nsd-btn:focus-visible{ outline:2px solid var(--apricot); outline-offset:2px; }
.nsd-btn:active{ transform:translateY(1px); }
.nsd-btn--primary{ background:var(--green); color:#fff; border-color:var(--green); }
.nsd-btn--shop{ background:#fff; }
.nsd-btn--ghost{ background:transparent; border-style:dashed; }

/* CTA-Container (entspricht früher .recipe-card__actions) */
.recipe-card__cta{ display:flex; gap:8px; justify-content:center; padding:0 14px 16px; flex-wrap:wrap; }

/* Filter (deins ist ok, lässt sich 1:1 verwenden) */
/* Scope nur auf diese Section anwenden (verhindert Konflikte) */
#rezepte-{{ section.id }} .rezepte-breadcrumb{
  max-width:1100px;margin:10px auto 0;color:var(--color-text);font-size:.9rem;
}
#rezepte-{{ section.id }} .rezepte-breadcrumb a{ color:var(--green); text-decoration:none; }
#rezepte-{{ section.id }} .rezepte-breadcrumb span{ margin:0 .35rem; }

/* Chips */
#rezepte-{{ section.id }} .rezepte-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 2px 2px; padding:0; list-style:none;
}
#rezepte-{{ section.id }} .rezepte-chips a{
  display:inline-block; padding:.35rem .6rem; border:1px solid var(--green);
  border-radius:999px; background:#fff; color:var(--green); text-decoration:none;
  font-size:.9rem; line-height:1; box-shadow:var(--shadow-base);
}
#rezepte-{{ section.id }} .rezepte-chips a:hover{ background:var(--apricot); }

/* Badges */
#rezepte-{{ section.id }} .recipe-card__badges{
  display:flex; gap:6px; padding:8px 10px 0; margin:0; list-style:none; justify-content:flex-start;
}
#rezepte-{{ section.id }} .recipe-card__badges li{
  font-size:.78rem; line-height:1; color:var(--green); background:#fff;
  border:1px solid var(--green); border-radius:999px; padding:.25rem .5rem;
}

/* Mini-Links */
#rezepte-{{ section.id }} .recipe-card__links{
  margin:0 0 8px; padding:0 14px; font-size:.9rem;
}
#rezepte-{{ section.id }} .recipe-card__links a{ color:var(--green); text-decoration:none; }
#rezepte-{{ section.id }} .recipe-card__links a:hover{ text-decoration:underline; }

/* Promo-Block */
#rezepte-{{ section.id }} .rezepte-promos{
  max-width:1100px; margin:24px auto 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
#rezepte-{{ section.id }} .rezepte-promo{
  border:1px solid var(--green); border-radius:var(--radius-base); background:var(--cream);
  padding:.6rem .9rem; text-decoration:none; color:var(--green); box-shadow:var(--shadow-base);
}
#rezepte-{{ section.id }} .rezepte-promo:hover{ background:var(--apricot); }

.nsd-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 1.25rem}
.nsd-chip{display:inline-block;padding:.4rem .7rem;border:1px solid var(--green);
  border-radius:999px;background:#fff;color:var(--green);text-decoration:none;
  font-size:.92rem;line-height:1;box-shadow:var(--shadow-base)}
.nsd-chip:hover{background:var(--apricot);color:var(--green)}

/* Sterne-Summary oben (Durchschnitt) */
.nsd-rating-stars{
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 1rem; /* ggf. anpassen */
}
.nsd-rating-stars-bg,
.nsd-rating-stars-fill{
  font-family: inherit;
  letter-spacing: .05em;
}
.nsd-rating-stars-bg{
  color: #C9CFCA;            /* graue Basis */
}
.nsd-rating-stars-fill{
  color: #F5A623;            /* gelb gefüllt */
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  overflow: hidden;          /* schneidet prozentuale Breite ab */
}

/* Sterne in der Liste einzelner Reviews */
.nsd-review-stars{
  position: relative;
  display: inline-block;
  line-height: 1;
}
.nsd-review-stars .bg{ color:#C9CFCA; }
.nsd-review-stars .fill{
  color:#F5A623;
  position:absolute; left:0; top:0;
  white-space:nowrap; overflow:hidden;
}
.nsd-collection-desc{background:var(--nsd-cream,#fdfcf8);border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:clamp(12px,2vw,20px);margin:1rem 0 1.25rem}
.nsd-collection-desc--top{font-weight:500;margin-bottom:12px}
.nsd-collection-desc--bottom{margin-top:24px;clear:both}
#nsd-product-grid{clear:both}
.rte img.align-right,.rte img[style*="float:right"]{float:right;max-width:min(420px,45%);height:auto;margin:0 0 12px 16px}
@media (max-width:749px){.rte img.align-right,.rte img[style*="float:right"]{float:none;max-width:100%;margin:0 0 12px 0}}
/* NSD – Kollektionsbeschreibung (Teaser oben, Volltext unten) */
.nsd-collection-desc{
  background: var(--nsd-cream, #fdfcf8);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: clamp(12px, 2vw, 20px);
  margin: 1rem 0 1.25rem;
}
.nsd-collection-desc--top{ font-weight: 500; margin-bottom: 12px; }
.nsd-collection-desc--bottom{ margin-top: 24px; clear: both; }

/* Falls floatende Bilder in der Beschreibung stehen, unterbricht das Grid sauber */
#nsd-product-grid{ clear: both; }

/* Rechts ausgerichtete Bilder im RTE-HTML bändigen */
.rte img.align-right, .rte img[style*="float:right"]{
  float: right; max-width: min(420px, 45%); height: auto; margin: 0 0 12px 16px;
}
@media (max-width: 749px){
  .rte img.align-right, .rte img[style*="float:right"]{
    float: none; max-width: 100%; margin: 0 0 12px 0;
  }
}
/* Kollektionsbild (eigenes Element, unabhängig von der Beschreibung) */
.nsd-collection-hero{ margin: .5rem 0 1rem; }
.nsd-collection-hero img{ width:100%; height:auto; border-radius:12px; display:block; }
.nsd-collection-hero__cap{ font-size:.85rem; opacity:.75; margin-top:.25rem; }

/* Layout-Varianten ab Desktop */
@media (min-width: 990px){
  .nsd-collection-hero--right img{ float:right; width:min(520px,42%); margin:0 0 12px 16px; }
  .nsd-collection-hero--left  img{ float:left;  width:min(520px,42%); margin:0 16px 12px 0; }
  .nsd-collection-hero--full  img{ float:none; width:100%; margin:0 0 12px 0; }
}

/* Damit nach float das Grid & der Volltext sauber darunter starten */
#nsd-product-grid,
.nsd-collection-desc--top,
.nsd-collection-desc--bottom{ clear: both; }
/* Kollektionsbild */
.nsd-collection-hero{ margin:.5rem 0 1rem; }
.nsd-collection-hero img{ width:100%; height:auto; border-radius:12px; display:block; }
.nsd-collection-hero__cap{ font-size:.85rem; opacity:.75; margin-top:.25rem; }
@media (min-width:990px){
  .nsd-collection-hero--right img{ float:right; width:min(520px,42%); margin:0 0 12px 16px; }
  .nsd-collection-hero--left  img{ float:left;  width:min(520px,42%); margin:0 16px 12px 0; }
  .nsd-collection-hero--full  img{ float:none; width:100%; margin:0 0 12px 0; }
}

/* Beschreibungen */
.nsd-collection-desc{ background:var(--nsd-cream,#fdfcf8); border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:clamp(12px,2vw,20px); margin:1rem 0 1.25rem; }
.nsd-collection-desc--top{ font-weight:500; margin-bottom:12px; }
.nsd-collection-desc--bottom{ margin-top:24px; clear:both; }
#nsd-product-grid{ clear:both; }

/* FAQ Accordion */
.nsd-faq{ margin:2rem 0 1rem; }
.nsd-faq__title{ margin:0 0 .75rem; }
.nsd-faq__item{ border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:.6rem .9rem; margin:.5rem 0; background:#fff; }
.nsd-faq__q{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:600; }
.nsd-faq__chev{ transition:transform .2s ease; opacity:.7; }
.nsd-faq__item[open] .nsd-faq__chev{ transform:rotate(180deg); }
.nsd-faq__a{ margin-top:.5rem; }
/* Zentrierte Variante: mittlere Breite, kein Float */
.nsd-collection-hero--center img{
  float:none;
  display:block;
  width:min(760px, 90%);
  max-width:100%;
  height:auto;
  margin:0 auto 12px; /* zentriert */
  border-radius:12px;
}

/* Sicherheit: nach Floats sauber umbrechen */
#nsd-product-grid,
.nsd-collection-desc--top,
.nsd-collection-desc--bottom{ clear:both; }
/* NSD – Tabelle schöner */
.nsd-table{
  width:100%;
  border-collapse:collapse;
  margin:.75rem 0 1rem;
  font-size:0.95rem;
}
.nsd-table th,.nsd-table td{
  border:1px solid #e8ece8;
  padding:.6rem .75rem;
  vertical-align:top;
}
.nsd-table thead th{
  background:#f6faf7;
  font-weight:600;
}
.nsd-table tbody tr:nth-child(odd){ background:#fafdfb; }

/* mobil horizontal scrollbar */
@media (max-width: 699px){
  .nsd-table{ display:block; overflow-x:auto; white-space:nowrap; }
}
/* ============= Layout-Basis ============= */
.nsd-article.nsd--full{
  --nsd-max: 1000px;            /* etwas breiter als Standard */
  --nsd-pad: 16px;
  --nsd-gap: 28px;
  --nsd-radius: 16px;
  --nsd-shadow: 0 6px 20px rgba(0,0,0,.06);
  --nsd-bd: rgba(0,0,0,.08);
  --nsd-card: #fff;
}

.nsd-article.nsd--full{
  max-width: var(--nsd-max);
  margin: 0 auto;
  padding: 0 var(--nsd-pad);
}

/* Hero-untertitel zentrieren & luftiger */
.nsd-article.nsd--full .nsd-hero-sub{
  max-width: 820px;
  margin: 8px auto 0;
  text-align: center;
  font-size: clamp(18px,2.2vw,20px);
  line-height: 1.5;
  color: #2b2b2b;
}

/* ============= Karten & Abstände ============= */
.nsd-article.nsd--full .nsd-card,
.nsd-article.nsd--full .rezept-box{
  background: var(--nsd-card);
  border: 1px solid var(--nsd-bd);
  border-radius: var(--nsd-radius);
  box-shadow: var(--nsd-shadow);
  padding: 22px;
  margin: var(--nsd-gap) 0;
}

/* Intro weniger „boxy“ wirken lassen */
.nsd-article.nsd--full .nsd-intro.nsd-card{
  background: linear-gradient(0deg,#fff, #fff);
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  margin-top: 18px;
}
.nsd-article.nsd--full .nsd-intro p{
  font-size: clamp(17px,2vw,18px);
  line-height: 1.7;
}

/* ============= Feature-Card (Bild + Text) ============= */
.nsd-article.nsd--full .nsd-feature-card{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* Bild etwas dominanter */
  align-items: center;
  gap: var(--nsd-gap);
  background: var(--nsd-card);
  border: 1px solid var(--nsd-bd);
  border-radius: var(--nsd-radius);
  box-shadow: var(--nsd-shadow);
  padding: 24px;
}

.nsd-article.nsd--full .nsd-feature-card.is-reverse .nsd-feature-media{ order: 1; }
.nsd-article.nsd--full .nsd-feature-card.is-reverse .nsd-feature-body{  order: 2; }

/* Bildformate: ruhig, sauber, beschnittsicher */
.nsd-article.nsd--full .nsd-feature-media img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;         /* einheitlicher Look wie im Beispiel */
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Headline in Feature-Card etwas größer */
.nsd-article.nsd--full .nsd-feature-title{
  font-size: clamp(22px,2.6vw,26px);
  margin: 4px 0 10px;
}

/* Liste mit Häkchen luftiger */
.nsd-article.nsd--full .nsd-bullets.nsd-checks li{
  margin: 6px 0;
  line-height: 1.6;
}

/* ============= Einzelnes Inline-Bild (groß, ruhig) ============= */
.nsd-article.nsd--full .nsd-figure.nsd-card{
  padding: 0;
  border: 0;
  box-shadow: var(--nsd-shadow);
}
.nsd-article.nsd--full .nsd-figure img{
  width: 100%;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--nsd-radius);
}
.nsd-article.nsd--full .nsd-figure figcaption{
  padding: 10px 14px 14px;
  font-size: 14px;
  color: #4b4b4b;
}

/* ============= Do / Don't im 2-Spalten-Look ============= */
.nsd-article.nsd--full .nsd-dosdonts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nsd-gap);
}
.nsd-article.nsd--full .nsd-dos,
.nsd-article.nsd--full .nsd-donts{
  background: var(--nsd-card);
  border: 1px solid var(--nsd-bd);
  border-radius: var(--nsd-radius);
  box-shadow: var(--nsd-shadow);
  padding: 18px 20px;
}
.nsd-article.nsd--full .nsd-list li{ margin: 6px 0; line-height: 1.6; }

/* ============= FAQ-Block angepasst ============= */
.nsd-article.nsd--full #faq .nsd-card{ box-shadow: none; border: 0; padding: 0; }
.nsd-article.nsd--full #faq details{
  border: 1px solid var(--nsd-bd);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  background: #fff;
  box-shadow: var(--nsd-shadow);
}
.nsd-article.nsd--full #faq summary{
  cursor: pointer;
  font-weight: 600;
}

/* ============= Responsive ============= */
@media (max-width: 960px){
  .nsd-article.nsd--full .nsd-feature-card{
    grid-template-columns: 1fr;
  }
  .nsd-article.nsd--full .nsd-feature-card .nsd-feature-media{ order: 1; }
  .nsd-article.nsd--full .nsd-feature-card .nsd-feature-body{  order: 2; }
  .nsd-article.nsd--full .nsd-dosdonts{ grid-template-columns: 1fr; }
}
/* NSD – Blog Tag Listing kompakter machen */
.blog-tag-page .article-card,
.blog-tag-page .nsd-article-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 1.25rem;
  align-items: start;
  min-height: 180px;
}

.blog-tag-page .article-card .article-card__image,
.blog-tag-page .nsd-article-card .article-card__image {
  max-height: 180px;
  overflow: hidden;
  border-radius: 16px;
}

.blog-tag-page .article-card img,
.blog-tag-page .nsd-article-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mobile zurück auf 1 Spalte */
@media (max-width: 749px) {
  .blog-tag-page .article-card,
  .blog-tag-page .nsd-article-card {
    grid-template-columns: 1fr;
  }

  .blog-tag-page .article-card .article-card__image,
  .blog-tag-page .nsd-article-card .article-card__image {
    max-height: 210px;
  }
}
/* NSD – Blog Listing / Tag-Seiten: Featured Image kleiner */
.template-blog .article-card__image,
.template-blog .article-card .media,
.template-blog .article-card img {
  max-height: 200px;
  border-radius: 18px;
  overflow: hidden;
  object-fit: cover;
}

/* Falls Shopify ein Grid nutzt, Höhe erzwingen */
.template-blog .article-card .media {
  height: 200px;
}

/* Nur für Tag-Ansicht (wenn Shopify .tagged setzt) enger machen */
.template-blog.tagged .article-card {
  margin-bottom: 1.5rem;
}
/* NSD – In-Article Hero/Bilder kleiner machen */
.nsd-article .nsd-img-wrap {
  max-width: 780px;           /* oder 720px, wenn du’s noch schlanker willst */
  margin: 1.75rem auto 1.5rem; /* zentriert im Artikel */
  border-radius: 22px;
  overflow: hidden;
}

.nsd-article .nsd-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* wenn das Bild VIEL zu hoch ist (wie beim Tropfen): */
.nsd-article .nsd-img-wrap.nsd-img--tall img,
.nsd-article .nsd-img-wrap img.tall {
  max-height: 420px;
  object-fit: cover;
}
/* NSD – ähnliche Beiträge im Artikel kompakt anzeigen */
.nsd-related,
.nsd-article .nsd-related-posts,
.nsd-article .related-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
}

.nsd-related article,
.nsd-article .nsd-related-posts article,
.nsd-article .related-articles article {
  background: #fff;
  border: 1px solid rgba(35,79,40,.03);
  border-radius: 18px;
  overflow: hidden;
}

/* Bild im Related-Block begrenzen */
.nsd-related img,
.nsd-article .nsd-related-posts img,
.nsd-article .related-articles img {
  width: 100%;
  height: 165px;        /* hier kannst du 150–180px spielen */
  object-fit: cover;
  display: block;
}

/* Title unter dem Bild */
.nsd-related h3,
.nsd-article .nsd-related-posts h3,
.nsd-article .related-articles h3,
.nsd-related a,
.nsd-article .nsd-related-posts a,
.nsd-article .related-articles a {
  display: block;
  padding: .75rem .85rem 1rem;
  font-size: .9rem;
  line-height: 1.25;
  color: #234F28;
}
/* Basis: alle Chips */
.nsd-topics .subchip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .85rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(35,79,40,.15);
  background: #fff;
  color: #234F28;
  font-size: .85rem;
  line-height: 1.1;
  text-decoration: none;
  transition: .12s ease-in-out;
}

/* nur: HOVER für echte LINKS (also NICHT .subchip--soon) */
.nsd-topics .subchip:not(.subchip--soon):hover {
  border-color: rgba(35,79,40,.35);
  background: rgba(253,252,248,.5);
}

/* aktive Chips */
.nsd-topics .subchip.subchip--active {
  background: #234F28;
  color: #fff;
  border-color: #234F28;
}

/* bald / disabled: immer gleich, kein Hover, kein Klick */
.nsd-topics .subchip.subchip--soon,
.nsd-topics .subchip[aria-disabled="true"] {
  background: rgba(35,79,40,.04);
  border: 1px solid rgba(35,79,40,.05);
  color: rgba(35,79,40,.42);
  cursor: default;
  pointer-events: none;
}

/* falls der allgemeine Hover doch noch greift: überschreiben */
.nsd-topics .subchip.subchip--soon:hover,
.nsd-topics .subchip[aria-disabled="true"]:hover {
  background: rgba(35,79,40,.04);
  border-color: rgba(35,79,40,.05);
  color: rgba(35,79,40,.42);
}
.nsd-plant-portraits {
  background: var(--cream);
  font-family: var(--font-base);
  color: var(--color-text);
  padding: 2rem 1rem 4rem;
}
.nsd-hero__title {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-size: 2rem;
}
.nsd-chip-group { margin: 2rem 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.nsd-chip {
  background: var(--beige);
  padding: .5rem 1rem;
  border-radius: var(--radius-large);
  font-weight: 600;
}
.nsd-plant-card {
  display: flex; gap: 2rem; margin: 3rem 0; align-items: center;
}
.nsd-plant-card.reverse { flex-direction: row-reverse; }
.nsd-plant-card__img { border-radius: var(--radius-large); width: 45%; box-shadow: var(--shadow-soft); }
.nsd-list li { margin-bottom: .25rem; }
.nsd-btn { background: var(--color-primary); color: white; padding: .75rem 1.25rem; border-radius: var(--radius-base); text-decoration: none; }
.nsd-btn--secondary { background: var(--coral); }
.nsd-faq h3 { color: var(--color-primary); cursor: pointer; }
.nsd-cta { text-align: center; margin-top: 4rem; }

/* ==========================================================
   NSD – Custom Overrides (safe to drop-in)
   Scope: globale Feinschliffe + Fixes, KEINE harten Resets
   ========================================================== */

/* ---------- 0) CSS-Variablen (nur falls nicht im Styleguide vorhanden) ---------- */
:root{
  --nsd-cream:#fdfcf8;
  --nsd-green:#2f6b3f;
  --nsd-green-dark:#234f28;
  --nsd-sage:#edf0e7;
  --nsd-coral:#f28b82;
  --nsd-apricot:#f4c7a1;
  --nsd-red:#c8473d;
  --nsd-ink:#1f1f1f;
  --nsd-muted:#6b6b6b;
  --nsd-border:rgba(0,0,0,.08);
  --nsd-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* ---------- 1) Grundlayout / Hintergrund ---------- */
html, body{
  background:var(--nsd-cream) !important;
  color:var(--nsd-ink);
}
.page-width{ max-width:1240px; margin-inline:auto; }

/* ---------- 2) Typo-Feinschliff ---------- */
h1,h2,h3,h4{ color:var(--nsd-green-dark); }
p,li{ color:var(--nsd-ink); }
.small, .text-subdued{ color:var(--nsd-muted); }

/* ---------- 3) Links & Fokus ---------- */
a{ color:var(--nsd-green-dark); text-underline-offset:2px; }
a:hover{ color:var(--nsd-green); }
:focus-visible{ outline:2px solid var(--nsd-green); outline-offset:2px; }

/* ---------- 4) Buttons ---------- */
.button, .btn, button[type="button"], input[type="submit"]{
  --_bg:var(--nsd-green-dark);
  --_fg:#fff;
  background:var(--_bg);
  color:var(--_fg);
  border:1px solid var(--nsd-green-dark);
  border-radius:999px;
  padding:.6rem 1rem;
  font-weight:600;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:var(--nsd-shadow);
}
.button:hover, .btn:hover, button[type="button"]:hover, input[type="submit"]:hover{
  background:var(--nsd-green);
  transform:translateY(-1px);
}
.button--secondary, .btn--secondary{
  background:#fff; color:var(--nsd-green-dark);
  border:1px solid var(--nsd-green-dark);
  box-shadow:none;
}
.button--tertiary{ background:#fff; border:1px dashed var(--nsd-border); color:var(--nsd-ink); }

/* Back-to-top + Floating Cart als weiße Pillen */
.nsd-fab, .back-to-top, .floating-cart{
  position:fixed; right:16px; z-index:50;
  background:#fff; color:var(--nsd-green-dark); border:1px solid var(--nsd-border);
  border-radius:999px; padding:.5rem .8rem; box-shadow:var(--nsd-shadow);
}
.back-to-top{ bottom:88px; }
.floating-cart{ bottom:28px; }
.nsd-fab:hover, .back-to-top:hover, .floating-cart:hover{ border-color:var(--nsd-green-dark); }

/* ---------- 5) Header / Icons ---------- */
.header, .site-header{ background:var(--nsd-cream); }
.header a, .site-header a{ color:var(--nsd-green-dark); }
.header svg, .site-header svg{ fill:currentColor; color:var(--nsd-green-dark) }

/* ---------- 6) Footer ---------- */
.footer, .site-footer{ 
  background:var(--nsd-cream) !important; 
  color:var(--nsd-ink);
  border-top:1px solid var(--nsd-border);
}
.footer .footer__content-top, .footer .footer__content-bottom{
  background:transparent !important;
}
.footer .copyright, .footer a{ color:var(--nsd-ink); }
.footer a:hover{ color:var(--nsd-green-dark); }

/* Social Icons kräftiger & einheitlich */
.footer .list-social__link, .footer .social-icons a{
  background:#fff; border:1px solid var(--nsd-border); border-radius:999px;
  width:40px; height:40px; display:grid; place-items:center; color:var(--nsd-green-dark);
  transition:border .2s ease, transform .06s ease;
}
.footer .list-social__link:hover{ border-color:var(--nsd-green-dark); transform:translateY(-1px); }

/* Footer-Bottom kompakter + optional Top-Rand */
.footer .footer__content-bottom{ padding:.75rem 0; border-top:1px solid var(--nsd-border); }

/* ---------- 7) Newsletter (im Footer) ---------- */
.nsd-newsletter{
  background:linear-gradient(0deg, rgba(255,255,255,.9), rgba(255,255,255,.9));
  border:1px solid var(--nsd-border); border-radius:16px; padding:1rem;
}
.nsd-newsletter__inner{
  background:#f3f0ea; /* leicht dunkler als Body */
  border:1px solid var(--nsd-red);
  border-radius:12px; padding:1rem;
}

/* ---------- 8) Chipbar / Filter (Collections & Blogs) ---------- */
.nsd-chipbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.nsd-chip{
  --_bd:var(--nsd-green-dark);
  display:inline-block; padding:.4rem .75rem; border:1px solid var(--_bd);
  border-radius:999px; background:#fff; color:var(--nsd-green-dark); text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .06s ease;
}
.nsd-chip:hover{ background:var(--nsd-green-dark); color:#fff; transform:translateY(-1px); }
.nsd-chip--active{
  background:var(--nsd-green-dark); color:#fff; border-color:var(--nsd-green-dark);
}
.nsd-chip--clear{
  border-style:dashed; color:var(--nsd-ink); border-color:var(--nsd-border);
}
.nsd-chip--clear:hover{ border-color:var(--nsd-green-dark); color:#fff; background:var(--nsd-green-dark); }

/* ---------- 9) Karten (Produkt / Blog / Glossar) ---------- */
.card, .nsd-card{
  background:#fff; border:1px solid var(--nsd-border); border-radius:16px; overflow:hidden;
  box-shadow:var(--nsd-shadow);
}
.card:hover{ transform:translateY(-1px); transition:transform .06s ease; }

/* Produktkarten: Bildgrößen konsistent */
.card__media img, .nsd-card .media img{
  width:100%; height:240px; object-fit:cover; background:#fff;
}
@media (min-width:990px){
  .card__media img, .nsd-card .media img{ height:220px; }
}

/* Preis-/Badge-Reihe */
.nsd-badges{ display:flex; gap:.4rem; flex-wrap:wrap; }
.nsd-badge{
  font-size:.82rem; padding:.18rem .5rem; border-radius:999px; border:1px solid var(--nsd-border);
  background:#fff; color:var(--nsd-ink);
}
.nsd-badge--sale{ background:#fff0f0; border-color:#ffd9d9; color:#b00020; }
.nsd-badge--affiliate{ background:#f0f7ff; border-color:#d6e9ff; color:#0b5cab; }

/* ---------- 10) Collection Grids / Masonry-Sauberkeit ---------- */
.grid, .collection .product-grid{ gap:1rem; }
.collection-hero__content{ color:var(--nsd-ink); }
.collection__description{
  background:#fff; border:1px solid var(--nsd-border); border-radius:12px; padding:1rem;
}

/* ---------- 11) Blog: Bilder & Prosa ---------- */
.prose img{
  display:block; width:100%; height:auto; border-radius:12px; background:#fff;
}
.prose figure{ margin:1rem 0; }
.prose .nsd-back-wrap{ margin:0 0 .75rem 0; }
.prose .nsd-back{
  display:inline-block; padding:.4rem .75rem; border:1px solid var(--nsd-green-dark);
  border-radius:999px; text-decoration:none; font-size:.95rem; color:var(--nsd-green-dark);
}
.prose .nsd-back:hover{ background:var(--nsd-green-dark); color:#fff; }

/* Blog/Artikel Vorschaubilder in Cards nicht zu hoch */
.article-card__image img{ height:220px; object-fit:cover; }

/* ---------- 12) Formulare / Inputs ---------- */
input[type="text"], input[type="email"], input[type="search"], textarea, select{
  background:#fff; border:1px solid var(--nsd-border); border-radius:10px; padding:.55rem .7rem;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--nsd-green-dark); box-shadow:0 0 0 3px rgba(35,79,40,.1); }

/* ---------- 13) Hinweise & Mini-Blocks ---------- */
.nsd-note{
  background:#fffbe6; border:1px solid #ffe8a3; color:#5a4b00;
  border-radius:10px; padding:.7rem .9rem;
}
.nsd-mini-hint{
  background:#f6f9f5; border:1px solid var(--nsd-border);
  border-radius:12px; padding:.9rem; color:var(--nsd-ink);
}

/* ---------- 15) Utilities ---------- */
.hidden{ display:none !important; }
.text-center{ text-align:center; }
.m-0{ margin:0 !important; } .mt-0{ margin-top:0 !important; }
.mt-8{ margin-top:.5rem !important; } .mt-16{ margin-top:1rem !important; }
.p-0{ padding:0 !important; }

/* ---------- 16) Sense Theme Klebefix: Weiß im Body vermeiden ---------- */
.body, .shopify-section, .section{ background:transparent !important; }

/* ---------- 17) Print-Kleinigkeiten ---------- */
@media print{
  a[href]::after{ content:""; } /* keine hässlichen url-Anhänge */
}

/* ---------- 18) “Nicht überschreiben”-Schutz für NSD-spezifische Bereiche ---------- */
/* (nur schwache Selektoren; keine !important-Orgien außer beim Body-Hintergrund) */
/* Instagram-Feed – Button fix */
.instagram-feed .instagram-footer {
  margin-top: 1.5rem;
  text-align: center;
}

.instagram-feed .btn-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  background: #fff; /* Basis wie deine weißen Pills */
  border: 1px solid var(--nsd-green-dark, #234F28);
  color: var(--nsd-green-dark, #234F28);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.instagram-feed .btn-instagram:hover,
.instagram-feed .btn-instagram:focus {
  background: var(--nsd-green-dark, #234F28);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* ==========================================================
   NSD – Rechner-Styles (Mengen & CO₂/Energie)
   Ziel: gleiche Optik wie die anderen NSD-Karten im Artikel
   ========================================================== */

/* Gemeinsame Basis für beide Rechner */
.nsd-calc,
.nsd-mengen-rechner,
.nsd-co2-rechner {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.035);
  margin: 1.1rem 0;
  font-family: inherit;
  color: var(--nsd-ink, #1f1f1f);
}

/* Header / Titel / Badge */
.nsd-calc__head,
.nsd-mengen-rechner .calc-head,
.nsd-co2-rechner .calc-head {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .85rem;
}

.nsd-calc__title,
.nsd-mengen-rechner h3,
.nsd-co2-rechner h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--nsd-green-dark, #234F28);
}

.nsd-calc__badge {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: rgba(35,79,40,.08);
  color: var(--nsd-green-dark, #234F28);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Layout: 2 Spalten auf Desktop, 1 Spalte auf Mobile */
.nsd-calc__grid,
.nsd-mengen-rechner .calc-grid,
.nsd-co2-rechner .calc-grid {
  display: grid;
  gap: .75rem .75rem;
}

@media (min-width: 860px) {
  .nsd-calc__grid,
  .nsd-mengen-rechner .calc-grid,
  .nsd-co2-rechner .calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Einzelne Felder */
.nsd-calc__field,
.nsd-mengen-rechner .calc-field,
.nsd-co2-rechner .calc-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.nsd-calc__label,
.nsd-mengen-rechner label,
.nsd-co2-rechner label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--nsd-ink, #1f1f1f);
}

.nsd-calc__hint {
  font-size: .7rem;
  color: var(--nsd-muted, #6b6b6b);
}

/* Inputs */
.nsd-calc input[type="number"],
.nsd-calc input[type="text"],
.nsd-calc select,
.nsd-mengen-rechner input,
.nsd-mengen-rechner select,
.nsd-co2-rechner input,
.nsd-co2-rechner select {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 11px;
  padding: .5rem .6rem;
  font-size: .82rem;
  line-height: 1.35;
  transition: border .15s ease, box-shadow .15s ease;
}

.nsd-calc input:focus,
.nsd-calc select:focus,
.nsd-mengen-rechner input:focus,
.nsd-mengen-rechner select:focus,
.nsd-co2-rechner input:focus,
.nsd-co2-rechner select:focus {
  outline: none;
  border-color: var(--nsd-green-dark, #234F28);
  box-shadow: 0 0 0 3px rgba(35,79,40,.08);
}

/* Buttons */
.nsd-calc__actions,
.nsd-mengen-rechner .calc-actions,
.nsd-co2-rechner .calc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

.nsd-calc button,
.nsd-mengen-rechner button,
.nsd-co2-rechner button {
  background: var(--nsd-green-dark, #234F28);
  border: 1px solid var(--nsd-green-dark, #234F28);
  color: #fff;
  border-radius: 999px;
  padding: .45rem .95rem;
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
  transition: transform .06s ease, background .16s ease;
}

.nsd-calc button:hover,
.nsd-mengen-rechner button:hover,
.nsd-co2-rechner button:hover {
  background: var(--nsd-green, #2f6b3f);
  transform: translateY(-1px);
}

/* Ergebnis-Box */
.nsd-calc__result,
.nsd-mengen-rechner .calc-result,
.nsd-co2-rechner .calc-result {
  margin-top: .8rem;
  background: #f7faf6;
  border: 1px solid rgba(35,79,40,.08);
  border-radius: 12px;
  padding: .65rem .75rem .55rem;
}

.nsd-calc__result strong,
.nsd-mengen-rechner .calc-result strong,
.nsd-co2-rechner .calc-result strong {
  display: block;
  font-weight: 700;
  margin-bottom: .2rem;
  color: var(--nsd-green-dark, #234F28);
}

.nsd-calc__result small,
.nsd-mengen-rechner .calc-result small,
.nsd-co2-rechner .calc-result small {
  display: block;
  font-size: .7rem;
  color: var(--nsd-muted, #6b6b6b);
}

/* Speziell für den CO₂-/Energie-Mini-Rechner */
.nsd-co2-rechner {
  background: #f9fbf8;
  border: 1px solid rgba(154, 186, 160, .35);
}

.nsd-co2-rechner .calc-result {
  background: #fff;
  border-color: rgba(35,79,40,.05);
}

.nsd-co2-rechner .co2-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(245, 142, 107, .12);
  color: #c8473d;
  border: 1px solid rgba(200, 71, 61, .25);
  border-radius: 999px;
  padding: .05rem .6rem .1rem;
  font-size: .68rem;
  font-weight: 600;
}

/* Im Artikel nicht ganz so breit ziehen */
.article-wissenschaft .nsd-mengen-rechner,
.article-wissenschaft .nsd-co2-rechner {
  max-width: 980px;
}

/* Mobile: alles untereinander */
@media (max-width: 599px){
  .nsd-calc,
  .nsd-mengen-rechner,
  .nsd-co2-rechner {
    padding: .85rem .85rem 1rem;
  }
  .nsd-calc__actions,
  .nsd-mengen-rechner .calc-actions,
  .nsd-co2-rechner .calc-actions {
    flex-direction: row;
  }
}
/* Karten wieder nebeneinander (Standard-NSD-Grid reparieren) */
.nsd-grid,
.nsd-blog__grid .nsd-grid,
.nsd-cards,
.nsd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

/* Karten selbst: sollen die ganze Zelle füllen */
.nsd-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Bild oben immer vollbreit */
.nsd-card__media img,
.nsd-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Textbereich soll nicht kleben */
.nsd-card__copy {
  flex: 1 1 auto;
}

/* mobil wieder 1-spaltig */
@media (max-width: 700px) {
  .nsd-grid,
  .nsd-blog__grid .nsd-grid,
  .nsd-cards,
  .nsd-card-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================
   NSD – Rechner-Styles
   betrifft: snippet nsd-calc + quanty scaler
   ============================ */
:root {
  --nsd-cream: #fdfcf8;
  --nsd-green: #234f28;
  --nsd-green-soft: rgba(35, 79, 40, 0.08);
  --nsd-border: rgba(35, 79, 40, 0.14);
  --nsd-muted: #5c6f60;
  --nsd-radius: 14px;
  --nsd-gap: 1rem;
}

/* ========== 1) allgemeiner Card-Look ========== */
.nsd-calc,
.nsd-qty-scaler {
  background: #fff;
  border: 1px solid var(--nsd-border);
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1.5rem;
  margin: 1.25rem 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.03);
  max-width: 58rem; /* damit es nicht über die ganze Blogbreite läuft */
}

.nsd-calc h3,
.nsd-qty-scaler h3,
.nsd-calc .nsd-calc__title,
.nsd-qty-scaler .nsd-qty-scaler__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--nsd-green);
}

.nsd-calc h3::before,
.nsd-qty-scaler h3::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--nsd-green-soft);
  display: inline-block;
}

/* kleine Meta-Zeile unter der Überschrift */
.nsd-calc .nsd-calc__meta,
.nsd-qty-scaler .nsd-qty-scaler__meta {
  font-size: .8rem;
  color: var(--nsd-muted);
  margin: 0 0 1rem;
}

/* ========== 2) Grid für Felder ========== */
.nsd-calc .nsd-calc__grid,
.nsd-qty-scaler .nsd-qty-scaler__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 820px) {
  .nsd-calc .nsd-calc__grid,
  .nsd-qty-scaler .nsd-qty-scaler__grid {
    grid-template-columns: 1fr;
  }
}

/* ========== 3) Input-Gruppen ========== */
.nsd-calc .nsd-field,
.nsd-qty-scaler .nsd-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.nsd-calc .nsd-field label,
.nsd-qty-scaler .nsd-field label {
  font-size: .8rem;
  font-weight: 600;
  color: #1c4023;
}

.nsd-calc .nsd-field small,
.nsd-qty-scaler .nsd-field small {
  font-size: .7rem;
  color: #7a8b75;
}

/* Inputs & Selects */
.nsd-calc input[type="number"],
.nsd-calc input[type="text"],
.nsd-calc select,
.nsd-qty-scaler input[type="number"],
.nsd-qty-scaler input[type="text"],
.nsd-qty-scaler select {
  appearance: none;
  border: 1px solid rgba(35,79,40,0.13);
  background: #fff;
  border-radius: 12px;
  padding: .5rem .65rem;
  font-size: .85rem;
  color: #2b2b2b;
  outline: none;
}

.nsd-calc input:focus,
.nsd-calc select:focus,
.nsd-qty-scaler input:focus,
.nsd-qty-scaler select:focus {
  border-color: rgba(35,79,40,0.55);
  box-shadow: 0 0 0 3px rgba(35,79,40,0.08);
}

/* ========== 4) Button-Zeilen ========== */
.nsd-calc .nsd-calc__actions,
.nsd-qty-scaler .nsd-qty-scaler__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.nsd-calc .nsd-btn,
.nsd-qty-scaler .nsd-btn {
  border: none;
  background: var(--nsd-green);
  color: #fff;
  border-radius: 999px;
  padding: .4rem 1rem .45rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
  line-height: 1.1;
}

.nsd-calc .nsd-btn--ghost,
.nsd-qty-scaler .nsd-btn--ghost {
  background: rgba(35,79,40,.06);
  color: var(--nsd-green);
}

.nsd-calc .nsd-btn:hover,
.nsd-qty-scaler .nsd-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(35,79,40,0.22);
}

/* ========== 5) Ergebnisbox ========== */
.nsd-calc .nsd-calc__result,
.nsd-qty-scaler .nsd-qty-scaler__result {
  margin-top: 1.25rem;
  background: rgba(35,79,40,0.035);
  border: 1px solid rgba(35,79,40,0.08);
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
}

.nsd-calc .nsd-calc__result-title,
.nsd-qty-scaler .nsd-qty-scaler__result-title {
  font-weight: 700;
  font-size: .85rem;
  color: var(--nsd-green);
  margin-bottom: .6rem;
}

.nsd-calc .nsd-calc__result-list,
.nsd-qty-scaler .nsd-qty-scaler__result-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem;
}

.nsd-calc .nsd-calc__result-item,
.nsd-qty-scaler .nsd-calc__result-item,
.nsd-qty-scaler .nsd-qty-scaler__result-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(35,79,40,0.04);
  padding: .45rem .6rem .5rem;
  min-height: 3.1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.nsd-calc .nsd-calc__result-item span:first-child,
.nsd-qty-scaler .nsd-qty-scaler__result-item span:first-child {
  font-size: .7rem;
  color: #6a7c69;
}

.nsd-calc .nsd-calc__result-item strong,
.nsd-qty-scaler .nsd-qty-scaler__result-item strong {
  font-size: .9rem;
  color: #1b3b23;
}

/* ========== 6) Tabellen-Ansicht beim Quanty-Scaler ========== */
.nsd-qty-scaler table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .75rem;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(35,79,40,0.05);
  font-size: .78rem;
}

.nsd-qty-scaler thead {
  background: rgba(35,79,40,0.03);
}

.nsd-qty-scaler th,
.nsd-qty-scaler td {
  padding: .55rem .65rem;
  text-align: left;
}

.nsd-qty-scaler tbody tr:nth-child(even) {
  background: rgba(35,79,40,0.015);
}

.nsd-qty-scaler td input[type="number"] {
  width: 100%;
  max-width: 6rem;
}

/* ========== 7) schmale Screens ========== */
@media (max-width: 540px) {
  .nsd-calc,
  .nsd-qty-scaler {
    padding: 1.05rem .9rem 1.25rem;
  }

  .nsd-calc .nsd-calc__result-list,
  .nsd-qty-scaler .nsd-calc__result-list,
  .nsd-qty-scaler .nsd-qty-scaler__result-list {
    grid-template-columns: 1fr 1fr;
  }

  .nsd-qty-scaler table,
  .nsd-qty-scaler thead,
  .nsd-qty-scaler tbody,
  .nsd-qty-scaler th,
  .nsd-qty-scaler td,
  .nsd-qty-scaler tr {
    display: block;
  }
  .nsd-qty-scaler thead {
    display: none;
  }
  .nsd-qty-scaler tr {
    border: 1px solid rgba(35,79,40,0.04);
    border-radius: 12px;
    margin-bottom: .45rem;
    background: #fff;
    padding: .4rem .4rem .25rem;
  }
  .nsd-qty-scaler td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .78rem;
  }
  .nsd-qty-scaler td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #244428;
  }
/* 1. Unterkante vom Magazin/Blog-Block größer machen */
.collection .blog-posts,
.collection .featured-blog,
.collection .nsd-magazin {
  margin-bottom: 2.5rem;
}

/* 2. Wenn direkt danach der Footer kommt, auch nochmal Luft */
.collection .blog-posts + footer,
.collection .featured-blog + footer,
.collection .nsd-magazin + footer {
  margin-top: 2.5rem;
}

/* 3. Dein Banner-Snippet im Footer (falls eigene Klasse) */
footer .nsd-footer-banner,
footer .nsd-newsletter-snippet {
  margin-top: 1.5rem;
}

/* NSD – Mobile-Menü: Seiten-Links (pages/…) als Buttons darstellen */
.nsd-mobile-nav a[href*="/pages/"] {
  display: block;
  background: #234F28;      /* dein Grün */
  color: #FDFCF8;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  margin: 0.4rem 0;
  text-decoration: none;
  transition: background .2s ease;
}

/* Hover/Fokus */
.nsd-mobile-nav a[href*="/pages/"]:hover,
.nsd-mobile-nav a[href*="/pages/"]:focus {
  background: #1a3a23;
  color: #FDFCF8;
}

/* aber: explizit sekundäre Buttons NICHT überschreiben */
.nsd-mobile-nav .btn-link--secondary {
  background: #FDFCF8 !important;
  color: #234F28 !important;
  border: 2px solid #234F28;
}

.nsd-mobile-nav .btn-link--secondary:hover {
  background: #234F28 !important;
  color: #FDFCF8 !important;
}
/* NSD – Mobile-Menü: alle Page-Links (inkl. Community-Regeln) grün */
.nsd-mobile-nav a[href*="/pages/"],
.nsd-mobile-nav a[href*="community"],
.nsd-mobile-nav a[href*="regeln"] {
  display: block;
  background: #234F28;
  color: #FDFCF8;
  text-align: center;
  padding: 0.65rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  margin: 0.4rem 0;
  text-decoration: none;
  transition: background .2s ease;
}

/* Hover/Fokus */
.nsd-mobile-nav a[href*="/pages/"]:hover,
.nsd-mobile-nav a[href*="community"]:hover,
.nsd-mobile-nav a[href*="regeln"]:hover {
  background: #1a3a23;
  color: #FDFCF8;
}

/* Sekundäre Buttons (Produkte shoppen) weiterhin weiß */
.nsd-mobile-nav .btn-link--secondary {
  background: #FDFCF8 !important;
  color: #234F28 !important;
  border: 2px solid #234F28;
}

.nsd-mobile-nav .btn-link--secondary:hover {
  background: #234F28 !important;
  color: #FDFCF8 !important;
}
/* NSD – Mobile-Menü: aktive Page-Links sofort grün zeigen */
.nsd-mobile-nav a[href*="/pages/"].active,
.nsd-mobile-nav a[href*="/pages/"][aria-current="page"],
.nsd-mobile-nav a[href*="community"].active,
.nsd-mobile-nav a[href*="community"][aria-current="page"],
.nsd-mobile-nav a[href*="regeln"].active,
.nsd-mobile-nav a[href*="regeln"][aria-current="page"] {
  background: #234F28 !important;
  color: #FDFCF8 !important;

:root {
  --nsd-header-height: 82px; /* Höhe deines Headers */
}

.header-wrapper {
  min-height: var(--nsd-header-height);
}