/* ============================================================
   Kaya Seeds — styles.css
   Order: tokens -> reset -> base -> layout -> components -> utilities
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --c-leaf:    #1f3d2b;
  --c-leaf-2:  #2a5039;
  --c-cream:   #f6f1e7;
  --c-cream-2: #ece4d2;
  --c-saffron: #e2a13a;
  /* Brand-Akzent neu: gedaempfte Terracotta statt knalligem Rot.
     Variablen heissen weiterhin --c-red*, damit alle vorhandenen Komponenten
     (Buttons, Nav, Badges) den neuen Wert ohne Refactor uebernehmen. */
  --c-red:     #8c4a2f;   /* terracotta primary */
  --c-red-2:   #6f3a24;   /* terracotta hover */
  --c-bronze:  #c28766;   /* warme Terrakotta-Bronze fuer Italic-Akzente, Marker, Nav-Active — EIN Wert, anwendungsweit konsistent */
  --c-bronze-2:#a86c4d;
  --c-ink:     #14201a;
  --c-mute:    #6b7268;
  --c-line:    #d9d2bf;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20,32,26,.06), 0 2px 8px rgba(20,32,26,.05);
  --shadow-md: 0 6px 18px rgba(20,32,26,.10), 0 2px 6px rgba(20,32,26,.06);

  --container: 1200px;
  --header-h:  104px;

  --ff-display: "Cooper Black", "Cooper Std Black", "Cooper BT", "Sansita", Georgia, serif;
  --ff-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  color: var(--c-ink);
  background: var(--c-cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Globaler Schutz vor horizontalem Overflow auf Mobile (clip > hidden:
     erzeugt keinen scrollable container, auch wenn position: sticky /
     fixed children existieren). */
  overflow-x: clip;
  /* iOS Safari: weiche, on-brand Tap-Highlight statt Default-Blau. */
  -webkit-tap-highlight-color: rgba(31,61,43,.12);
}

/* Mindestschriftgröße 16px verhindert iOS Auto-Zoom beim Fokus auf Input/Select. */
input, select, textarea { font-size: max(1rem, 16px); }

/* Touch-Geräte: keine Hover-Transforms (verhindert stecken gebliebene Hover-States
   nach Tap und ungewollte Layout-Sprünge). */
@media (hover: none) {
  .product-card:hover,
  .rail-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .product-card.has-hover-img:hover .product-card__img:not(.product-card__img--alt) { opacity: 1; }
  .product-card.has-hover-img:hover .product-card__img--alt { opacity: 0; }
}

/* Entfernt die 300ms-Tap-Verzoegerung auf aelteren Mobile-Browsern und
   verhindert akzidentielles Doppel-Tap-Zoom auf primaeren Interaktionen. */
.btn,
.nav__list a,
.nav__cta,
.nav__toggle,
.filter-chip,
.pdp__size,
.carousel-btn,
.carousel__dot,
.product-card,
.rail-card,
.subpage-hero__chip,
.contact-hero__chip,
.hero-strip__chip { touch-action: manipulation; }

/* iOS/Android: verhindert Auto-Resize bei Rotation (Landscape-Sprung). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Body-Scroll-Lock waehrend das Mobile-Menu offen ist.
   Wird von main.js per .has-menu-open gesetzt. */
body.has-menu-open { overflow: hidden; }

/* Bilder, Videos, iframes brechen niemals aus ihrem Container aus. */
img, video, iframe, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 900; line-height: 1.1; color: var(--c-ink); }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.25rem; font-weight: 800; }
h4 { font-size: 1rem; font-family: var(--ff-body); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--c-ink); }

p { color: var(--c-ink); }
a:hover { color: var(--c-leaf); }

:focus-visible {
  outline: 3px solid var(--c-saffron);
  outline-offset: 2px;
  border-radius: 3px;
}

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-ink); color: var(--c-cream);
  padding: 10px 14px; border-radius: var(--r-sm);
  z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
}

.section { padding: 88px 0; }
.section--leaf {
  background: var(--c-leaf);
  color: var(--c-cream);
}
.section--leaf h1,
.section--leaf h2,
.section--leaf h3,
.section--leaf h4 { color: var(--c-cream); }

.section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head--compact { margin-bottom: 0; }
.section-head .lead { margin-top: 16px; }
.section-head--light .eyebrow { color: var(--c-saffron); }
.section-head--light h1,
.section-head--light h2,
.section-head--light .lead { color: var(--c-cream); }

/* Botanical subpage background: static first frame from the hero video.
   It is an optimized WebP poster, not a running video layer. */
.botanical-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(226,161,58,.18), transparent 42%),
    radial-gradient(ellipse at 100% 78%, rgba(31,61,43,.12), transparent 46%),
    linear-gradient(180deg, var(--c-cream) 0%, #f1e7d2 54%, #f7f0de 100%);
}
.botanical-page::before {
  content: "";
  /* PRD-Vorgabe: kein background-attachment: fixed (auch nicht via position: fixed,
     das identisches Repaint-Verhalten auslösen würde). Daher absolute Position
     relativ zu .botanical-page → scrollt mit dem Inhalt, kein Mobile-Jank. */
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  contain: paint;
  background-image:
    linear-gradient(90deg, rgba(246,241,231,.68) 0%, rgba(246,241,231,.42) 46%, rgba(246,241,231,.72) 100%),
    linear-gradient(180deg, rgba(246,241,231,.54) 0%, rgba(246,241,231,.76) 82%),
    url("../video/female-seeds-background.webp");
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center, 58% center;
}
.botanical-page > main,
.botanical-page > .site-footer {
  position: relative;
  z-index: 1;
}
.botanical-page > .site-header { z-index: 50; }
.section--botanical {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 92% 6%, rgba(226,161,58,.12), transparent 42%),
    radial-gradient(ellipse at 5% 100%, rgba(31,61,43,.08), transparent 48%),
    rgba(246,241,231,.64);
}
.shop-page .section--botanical {
  background: transparent;
}
.section--soft { background: rgba(236,228,210,.58); }

/* ---------- product card CTA + grid skeleton/error states ---------- */
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-leaf);
  letter-spacing: .02em;
}
.product-card:hover .product-card__cta { color: var(--c-bronze); }

.product-card--skeleton { pointer-events: none; }
.product-card--skeleton .product-card__media {
  aspect-ratio: 1 / 1;
  background: var(--c-cream-2);
  border-radius: var(--r-md);
}
.skeleton-line {
  height: 14px;
  margin: 10px 0;
  border-radius: 4px;
  background: var(--c-cream-2);
}
.skeleton-line--sm { width: 40%; height: 10px; }
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--c-cream-2) 0%, #f1ead7 50%, var(--c-cream-2) 100%);
  background-size: 200% 100%;
  animation: kaya-shimmer 1.4s ease-in-out infinite;
}
@keyframes kaya-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer { animation: none; }
}
.grid-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 16px;
}
.grid-error p { margin-bottom: 16px; color: var(--c-mute); }

@media (max-width: 760px) {
  .botanical-page::before {
    background-image:
      linear-gradient(90deg, rgba(246,241,231,.72) 0%, rgba(246,241,231,.54) 46%, rgba(246,241,231,.76) 100%),
      linear-gradient(180deg, rgba(246,241,231,.62) 0%, rgba(246,241,231,.82) 82%),
      url("../video/female-seeds-background-mobile.webp");
    background-position: center top, center top, 56% top;
  }
}

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .container { padding: 0 18px; }
}
@media (max-width: 380px) {
  .container { padding: 0 14px; }
}

/* ---------- mobile-specific tap targets, grids, safe areas ---------- */

/* 2-up product grid auf Phones — moderne E-Commerce-Konvention. */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .product-card { border-radius: var(--r-md); }
  .product-card__body { padding: 14px 12px 16px; }
  .product-card__name { font-size: 1rem; }
  .product-card__tag { font-size: .8rem; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .product-card__cat { font-size: .68rem; }
  .product-card__price { font-size: .95rem; }
  .product-card__cta { font-size: .76rem; }
}

/* Filter-Chips erreichen 44px Tap-Target und scrollen horizontal
   statt umzubrechen (vermeidet zwei Reihen halber Höhe). */
@media (max-width: 600px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px 16px 8px;
    margin: 0 -16px 24px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex: 0 0 auto;
    padding: 11px 18px;
    min-height: 44px;
    scroll-snap-align: start;
  }
}

/* Hero-CTAs auf Phones full-width (einfacher per Daumen). */
@media (max-width: 480px) {
  .hero__cta .btn,
  .pdp__cta .btn { flex: 1 1 100%; }
}

/* iOS Safe-Area für die Sticky-CTA-Leiste auf der PDP. */
.pdp-stickybar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
body.has-stickybar {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* Newsletter Eingabe darf auf engen Phones ohne min-width brechen. */
@media (max-width: 480px) {
  .newsletter { flex-direction: column; align-items: stretch; }
  .newsletter input[type=email] { min-width: 0; width: 100%; }
  .newsletter button { width: 100%; }
}

/* ---------- components ---------- */

/* header / nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 241, 231, .94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 0;
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* Transparent overlay variant: liegt ueber dem Hero,
   wird beim Scrollen via .is-scrolled wieder solid.
   Subtiler Top-Verlauf gibt der Nav etwas Halt, ohne als Band zu wirken. */
.site-header--overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(10,10,8,.32), rgba(10,10,8,0));
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header--overlay .nav__brand,
.site-header--overlay .nav__list a:not(.nav__cta) {
  color: var(--c-cream);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition: color .15s ease;
}
.site-header--overlay .nav__list a:not(.nav__cta):hover { color: var(--c-bronze); }
.site-header--overlay .nav__list a.is-active::after {
  background: var(--c-bronze);
  height: 1px;
  opacity: .9;
}
.site-header--overlay .nav__toggle::before,
.site-header--overlay .nav__toggle span,
.site-header--overlay .nav__toggle::after { background: var(--c-cream); }
.site-header--overlay .nav__cta {
  /* Flacher, transluzenter Header-CTA — weniger „puffy“, mehr Glas. */
  background: rgba(255,255,255,.08);
  color: var(--c-cream) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}
.site-header--overlay .nav__cta:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  color: var(--c-cream) !important;
}

/* Wenn nicht mehr ganz oben — wieder solid */
.site-header--overlay.is-scrolled {
  background: rgba(246, 241, 231, .92);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-sm);
}
.site-header--overlay.is-scrolled .nav__brand,
.site-header--overlay.is-scrolled .nav__list a:not(.nav__cta) {
  color: var(--c-ink);
  text-shadow: none;
}
.site-header--overlay.is-scrolled .nav__toggle::before,
.site-header--overlay.is-scrolled .nav__toggle span,
.site-header--overlay.is-scrolled .nav__toggle::after { background: var(--c-ink); }
.site-header--overlay.is-scrolled .nav__cta {
  background: var(--c-leaf); color: var(--c-cream) !important;
  border-color: var(--c-leaf);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header--overlay.is-scrolled .nav__cta:hover { background: var(--c-red); border-color: var(--c-red); }

/* Subpages (botanical): heller Hintergrund → dunkler Text trotz Overlay,
   damit die Nav lesbar bleibt. Beim Scrollen greift dieselbe Solid-Variante. */
.botanical-page .site-header--overlay .nav__brand,
.botanical-page .site-header--overlay .nav__list a:not(.nav__cta) {
  color: var(--c-ink);
  text-shadow: none;
}
.botanical-page .site-header--overlay .nav__toggle::before,
.botanical-page .site-header--overlay .nav__toggle span,
.botanical-page .site-header--overlay .nav__toggle::after { background: var(--c-ink); }
.botanical-page .site-header--overlay .nav__cta {
  background: var(--c-leaf);
  color: var(--c-cream) !important;
  border-color: var(--c-leaf);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.botanical-page .site-header--overlay .nav__brand img { filter: brightness(0); }

/* Fixed header hat keine Flow-Höhe — Hauptinhalt um Header-Höhe nach unten. */
.botanical-page > main { padding-top: var(--header-h); }

/* Mobile-Menü Panel: bleibt lesbar (immer cream) */
@media (max-width: 900px) {
  .site-header--overlay .nav.is-open .nav__list a { color: var(--c-ink); text-shadow: none; }
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  gap: 32px;
}
.nav__brand {
  display: inline-flex; align-items: center;
  font-family: var(--ff-display); font-weight: 600; font-size: 1.15rem;
  color: var(--c-ink);
  line-height: 0;
}
/* Logo: weisses PNG (logo-white.png).
   - Default (solider Cream-Header): per filter:brightness(0) zu schwarzer
     Silhouette invertiert, damit es auf hellem Grund lesbar bleibt.
   - Overlay (transparent ueber dunklem Hero): bleibt weiss + Drop-Shadow.
   - Scrolled-Overlay: zurueck zu schwarz auf cream. */
.nav__brand img {
  display: block;
  height: 70px; width: auto; max-width: 300px;
  filter: brightness(0);
}
@media (max-width: 900px) {
  :root { --header-h: 84px; }
  .nav { gap: 18px; }
  .nav__brand img { height: 54px; max-width: 220px; }
}
@media (max-width: 600px) {
  :root { --header-h: 76px; }
  .nav__brand img { height: 46px; max-width: 190px; }
}
/* Logo bleibt im transparenten Overlay-Header weiss */
.site-header--overlay .nav__brand img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.site-header--overlay.is-scrolled .nav__brand img {
  filter: brightness(0);
}
.nav__list {
  display: flex; align-items: center; gap: clamp(24px, 2.8vw, 38px);
}
.nav__list a {
  font-size: 1.08rem; font-weight: 500; color: var(--c-ink);
  padding: 10px 0; position: relative;
  transition: color .15s ease;
}
.nav__list a:hover { color: var(--c-bronze-2); }
.nav__list a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--c-bronze); border-radius: 1px;
  opacity: .9;
}
.nav__cta {
  background: var(--c-leaf); color: var(--c-cream) !important;
  padding: 12px 24px !important; border-radius: 999px;
  font-weight: 600; font-size: 1.04rem;
  transition: background .15s ease, border-color .15s ease;
}
.nav__cta:hover { background: var(--c-red); border-color: var(--c-red); }

/* ---------- Header Cart Button ---------- */
.nav__cart {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-right: 6px;
  background: transparent;
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.nav__cart:hover { border-color: var(--c-leaf); background: rgba(31,61,43,.06); }
.nav__cart svg { width: 20px; height: 20px; }
.nav__cart-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-red);
  color: var(--c-cream);
  font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.nav__cart-badge.is-empty { display: none; }

/* Cart button im CTA-Stil (ersetzt 'Sorten ansehen' im Header) */
.nav__cart--cta {
  width: auto;
  height: auto;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--c-leaf);
  background: var(--c-leaf);
  color: var(--c-cream);
  gap: 8px;
  font-weight: 600;
  font-size: 1rem;
}
.nav__cart--cta:hover {
  background: var(--c-red);
  border-color: var(--c-red);
}
.nav__cart--cta svg { width: 18px; height: 18px; }
.nav__cart-label { line-height: 1; }
.nav__cart--cta .nav__cart-badge {
  position: static;
  background: var(--c-cream);
  color: var(--c-leaf);
  margin-left: 2px;
}
.nav__cart--cta:hover .nav__cart-badge { color: var(--c-red); }
.site-header--overlay .nav__cart--cta,
.site-header--overlay.is-scrolled .nav__cart--cta,
.botanical-page .site-header--overlay .nav__cart--cta {
  background: var(--c-leaf);
  border-color: var(--c-leaf);
  color: var(--c-cream);
}
.site-header--overlay .nav__cart--cta:hover,
.site-header--overlay.is-scrolled .nav__cart--cta:hover,
.botanical-page .site-header--overlay .nav__cart--cta:hover {
  background: var(--c-red);
  border-color: var(--c-red);
}
@media (max-width: 480px) {
  .nav__cart-label { display: none; }
  .nav__cart--cta { padding: 10px 12px; }
  .nav__cart--cta .nav__cart-badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--c-red); color: var(--c-cream);
  }
}
.site-header--overlay .nav__cart:not(.nav__cart--cta) {
  border-color: rgba(255,255,255,.4);
  color: var(--c-cream);
}
.site-header--overlay .nav__cart:not(.nav__cart--cta):hover {
  border-color: var(--c-cream);
  background: rgba(255,255,255,.1);
}
.site-header--overlay.is-scrolled .nav__cart:not(.nav__cart--cta) {
  border-color: var(--c-line);
  color: var(--c-ink);
}
.botanical-page .site-header--overlay .nav__cart:not(.nav__cart--cta) {
  border-color: var(--c-line);
  color: var(--c-ink);
}

/* ---------- Cart Drawer ---------- */
.cart-drawer-root {
  position: fixed; inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.cart-drawer-root.is-open { pointer-events: auto; }
.cart-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 28, 22, .55);
  opacity: 0;
  transition: opacity .25s ease;
}
.cart-drawer-root.is-open .cart-drawer-backdrop { opacity: 1; }
.cart-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--c-cream);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,.0,.2,1);
  box-shadow: -10px 0 30px rgba(0,0,0,.18);
  outline: none;
}
.cart-drawer-root.is-open .cart-drawer { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--c-line);
}
.cart-drawer__head h2 {
  margin: 0;
  font-size: 1.4rem;
}
.cart-drawer__close {
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  width: 40px; height: 40px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--c-ink);
}
.cart-drawer__close:hover { background: rgba(0,0,0,.06); }
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px 24px;
}
.cart-drawer__list { list-style: none; padding: 0; margin: 0; }
.cart-drawer__empty {
  text-align: center;
  color: var(--c-mute);
  padding: 40px 0;
  font-size: .95rem;
}
.cart-drawer__empty a { color: var(--c-leaf); font-weight: 600; }
.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}
.cart-line__img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-cream-2);
}
.cart-line__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-line__name {
  color: var(--c-ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  line-height: 1.3;
}
.cart-line__name:hover { color: var(--c-leaf); }
.cart-line__meta { color: var(--c-mute); font-size: .82rem; }
.cart-line__qty {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.cart-line__qty button {
  width: 28px; height: 28px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  font-size: 1rem; font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--c-ink);
}
.cart-line__qty button:hover { border-color: var(--c-leaf); }
.cart-line__qty span {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: .92rem;
}
.cart-line__side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.cart-line__side strong {
  font-family: var(--ff-display);
  font-size: 1rem;
  color: var(--c-ink);
}
.cart-line__remove {
  background: transparent;
  border: 0;
  color: var(--c-mute);
  font-size: .78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.cart-line__remove:hover { color: var(--c-red); }
.cart-drawer__foot {
  border-top: 1px solid var(--c-line);
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}
.cart-drawer__totals {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.cart-drawer__totals strong {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  color: var(--c-ink);
}
.cart-drawer__note {
  color: var(--c-mute);
  font-size: .78rem;
  margin: 0 0 12px;
}
.cart-drawer__checkout {
  width: 100%;
  margin-bottom: 8px;
}
.cart-drawer__checkout:disabled {
  opacity: .5; cursor: not-allowed;
}
.cart-drawer__foot .btn--ghost { width: 100%; }
body.has-cart-open { overflow: hidden; }

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
  .cart-line { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .cart-line__img { width: 56px; height: 56px; }
}

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  position: relative;
  border-radius: var(--r-sm);
}
.nav__toggle span,
.nav__toggle::before,
.nav__toggle::after {
  content: ""; position: absolute; left: 11px; right: 11px;
  height: 2px; background: var(--c-ink); border-radius: 2px;
  transition: transform .2s, opacity .2s, top .2s;
}
.nav__toggle::before { top: 15px; }
.nav__toggle span    { top: 22px; }
.nav__toggle::after  { top: 29px; }
.nav.is-open .nav__toggle::before { top: 22px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span    { opacity: 0; }
.nav.is-open .nav__toggle::after  { top: 22px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-block; }
  .nav__list {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-cream);
    border-bottom: 1px solid var(--c-line);
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .2s, opacity .2s;
    /* Falls das Menue jemals laenger als der Viewport wird (Landscape /
       kuenftige Eintraege), kann es sicher gescrollt werden. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-md);
  }
  .nav__list li { border-bottom: 1px solid var(--c-line); }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__list a { display: block; padding: 16px 12px; min-height: 44px; }
  .nav__cta { display: inline-block; margin-top: 10px; }
  .nav.is-open .nav__list {
    transform: translateY(0); opacity: 1; pointer-events: auto;
  }
  /* Backdrop hinter dem offenen Menue \u2014 gibt visuelle Trennung und
     schliesst per Tap (Click-Handler in main.js). */
  .nav__backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(20, 32, 26, .35);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 49;
  }
  .nav.is-open ~ .nav__backdrop,
  .nav.is-open + .nav__backdrop {
    opacity: 1; pointer-events: auto;
  }
}

/* hero (full-bleed cinematic video)
   Video füllt auf jeder Screensize den kompletten Hero (object-fit: cover). */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* Mobile: ohne URL-Bar gerechnet */
  overflow: hidden;
  isolation: isolate;
  background: var(--c-leaf); /* fallback while video loads */
  color: var(--c-cream);
  /* Hero ist eine eigene Render-Insel: Scroll außerhalb triggert
     keinen Repaint des Videos darunter. */
  contain: layout paint;
}

/* Clean variant: Hero beginnt unter der fixed Overlay-Bar (negativer top).
   Höhe wird um den Header kompensiert, damit kein anderer Bereich durchscheint. */
.hero--clean {
  margin-top: calc(var(--header-h) * -1);
  min-height: calc(100vh + var(--header-h));
  min-height: calc(100svh + var(--header-h));
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Subject sitzt im unteren Bilddrittel; horizontal nach rechts geschoben,
     damit der dunkle Textbereich links freier bleibt. */
  object-position: 75% 10%;
  z-index: 0;
  pointer-events: none;
  /* Kein transform/filter/animation auf dem <video> — sonst muss der
     Compositor jeden Frame die Video-Textur neu verarbeiten und das
     Scrollen ruckelt sichtbar. So bleibt das Video eine billige
     GPU-Texture, die nur durchgereicht wird. */
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    /* 1) Linke Textzone bekommt eine gerichtete dunkle Tiefenstaffelung,
       damit Headline & Copy ueberall klare Autoritaet haben. */
    linear-gradient(90deg,
      rgba(17,18,14,.62) 0%,
      rgba(17,18,14,.42) 28%,
      rgba(17,18,14,.14) 52%,
      rgba(17,18,14,.06) 100%),
    /* 2) Cinematic-Vignette unten fuer den Uebergang zur naechsten Section. */
    linear-gradient(180deg,
      rgba(20,32,26,.28) 0%,
      rgba(20,32,26,0)   25%,
      rgba(20,32,26,0)   55%,
      rgba(20,32,26,.78) 100%);
  pointer-events: none;
}

/* Reduced motion: Video pausieren bzw. unsichtbar lassen — Poster reicht.
   Spart Decode-CPU/GPU komplett und respektiert User-Wünsche. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero {
    background-image: url("../video/female-seeds-poster.jpg");
    background-size: cover;
    background-position: 50% 72%;
  }
}
.hero__inner {
  position: relative; z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  /* safe center: zentriert auf grossen Screens, faellt auf flex-start zurueck
     wenn der Inhalt sonst hinter dem Header verschwinden wuerde. */
  justify-content: safe center;
  /* Symmetrische Vertikalzentrierung: hero hat margin-top:-header-h.
     Gleicher Top-Offset (2*header-h Padding minus header-h Margin = header-h)
     wie Bottom-Offset (header-h) ergibt visuelle Mitte im Viewport.
     Auf kurzen Viewports greift safe center -> flex-start, das 2*header-h Padding
     verhindert dann das Verstecken hinter dem Overlay-Header. */
  padding: calc(var(--header-h) * 2) 0 var(--header-h);
  max-width: 820px;
  text-align: left;
}
.hero__inner h1 {
  color: var(--c-cream);
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.8rem);
  letter-spacing: -.01em;
  text-shadow: 0 2px 28px rgba(0,0,0,.45);
  margin: 0;
}
.hero__caption {
  margin-top: 14px;
  color: var(--c-cream-2);
  font-size: clamp(.95rem, .85rem + .35vw, 1.1rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 32px;
}

/* ---------- editorial hero variant (home) ----------
   Boutique-Editorial statt klassischem Shop-Hero:
   - grosszuegiger Weissraum oben, Inhalt vertikal mittig statt am Boden geklebt
   - Eyebrow → Headline (Display-Serif, italic Akzent) → Subline → CTAs → Proof-Bar
   - keine Produktbilder im Hero; Video bleibt cineastische Buehne. */
.hero--editorial .hero__inner {
  /* Auf grossen Screens visuell zentriert (safe center), auf flachen rutscht
     der Inhalt sicher unter den Header (flex-start Fallback). */
  justify-content: safe center;
  padding: calc(var(--header-h) * 2) 0 var(--header-h);
  /* Breiterer Content-Block laesst die Headline atmen und fuellt das Hero. */
  max-width: 60rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 8px 16px;
  align-self: flex-start;
  border-radius: 999px;
  background: rgba(17,18,14,.42);
  border: 1px solid rgba(246,241,231,.16);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: var(--c-cream);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.hero__eyebrow-dot {
  color: var(--c-bronze);
  opacity: .85;
}

.hero__headline {
  color: var(--c-cream);
  /* Premium-Setting: offenes line-height, neutraler letter-spacing.
     Schriftgrad scaliert MIT der Viewport-Hoehe (vmin), damit auf flachen
     Laptops keine ueberdimensionale Headline den Hero sprengt. */
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.2rem + 4.5vmin + 2vw, 6rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-shadow: 0 2px 32px rgba(0,0,0,.55);
  margin: 0;
  max-width: 18ch;
}
.hero__headline em {
  font-style: italic;
  font-weight: 700;
  letter-spacing: .005em;
  /* Patinierte Bronze — weniger gelb, mehr Materialitaet als der vorherige
     Saffron-Verlauf. Wirkt wie Pigment, nicht wie Highlight-Effekt. */
  color: var(--c-bronze);
  /* Ueberschreibt den warmen, breiten Headline-Shadow. Ein engerer, dunkler
     Schatten haelt die Bronze farbtreu — sonst mischt der weiche Glow mit
     dem rosa-lila Bud-Hintergrund und laesst die Schrift lachsfarben wirken. */
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.55);
}

.hero__sub {
  margin: 36px 0 0;
  /* Etwas mehr Breite (44ch) fuer ruhigere Zeilenfolge. */
  max-width: 44ch;
  color: rgba(246,241,231,.88);
  font-size: clamp(1.05rem, .9rem + .55vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: .005em;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}

.hero--editorial .hero__cta {
  margin-top: 44px;
  gap: 14px;
}

.hero__proof {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  color: rgba(246,241,231,.82);
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.hero__proof li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.hero__proof-mark {
  width: 4px; height: 4px;
  background: var(--c-bronze);
  border-radius: 999px;
  /* Kein Glow mehr — ruhiger, materialhafter. Punkt sitzt auf Baseline. */
  align-self: center;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .hero--editorial .hero__inner {
    /* 2*header-h: kompensiert .hero--clean margin-top: -header-h. */
    padding: calc(var(--header-h) * 2 + clamp(1rem, 3vh, 2rem)) 0 clamp(3rem, 6vh, 5rem);
    text-align: left;
    align-items: stretch;
  }
  .hero__eyebrow {
    font-size: .65rem;
    padding: 7px 14px;
    margin-bottom: 22px;
    gap: 8px;
  }
  .hero__sub { margin-top: 22px; max-width: none; }
  .hero--editorial .hero__cta { margin-top: 30px; }
  .hero__proof {
    margin-top: 32px;
    gap: 10px 22px;
    font-size: .82rem;
  }
}

@media (max-width: 600px) {
  .hero--editorial .hero__inner {
    padding: calc(var(--header-h) * 2 + 18px) 0 4rem;
  }
  .hero__headline { max-width: none; }
  .hero__cta .btn { flex: 1 1 calc(50% - 6px); justify-content: center; text-align: center; }
}

/* hero scroll cue */
.hero__scroll {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  width: 28px; height: 44px;
  border: 1.5px solid rgba(246,241,231,.6);
  border-radius: 999px;
  display: inline-flex; justify-content: center; align-items: flex-start;
  padding-top: 8px;
  transition: border-color .2s, transform .2s;
}
.hero__scroll span {
  width: 3px; height: 8px;
  background: var(--c-cream);
  border-radius: 2px;
  animation: hero-scroll 1.8s ease-in-out infinite;
}
.hero__scroll:hover { border-color: var(--c-cream); transform: translateX(-50%) translateY(2px); }
@keyframes hero-scroll {
  0%   { transform: translateY(0);    opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* hero-strip — schwebende Pill-Reihe (frosted glass) im oberen Hero-Drittel.
   Pure Typografie: Name + Preis. Keine Produktbilder, damit Farben nicht mit
   dem Flower-Video kollidieren. Strip bleibt unsichtbar, wenn die Liste leer ist.
   .hero--clean ist um -header-h verschoben → Strip muss um header-h+x vom Hero-Top
   weg, um in der sichtbaren Viewport unter der Navbar zu landen. */
.hero-strip {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--header-h) + 24px);
  z-index: 3;
  padding: 0;
  color: var(--c-cream);
  pointer-events: none; /* nur die Chips sind klickbar */
  contain: layout paint;
}
.hero-strip:has(.hero-strip__list:empty) { display: none; }

.hero-strip__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  pointer-events: auto;
}
.hero-strip__eyebrow {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-cream);
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  opacity: .85;
}
.hero-strip__all {
  font-size: .82rem;
  color: var(--c-cream);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.hero-strip__all:hover { color: var(--c-saffron); border-bottom-color: var(--c-saffron); }

.hero-strip__list {
  list-style: none; margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  pointer-events: auto;
}
.hero-strip__item { min-width: 0; }

/* Frosted-Glass-Chip: dezent, lesbar, lässt das Video sichtbar.
   backdrop-filter wird auf Safari/iOS perfekt unterstützt; Fallback ist eine
   leicht dunklere Glasfläche, die ohne Blur immer noch lesbar bleibt. */
.hero-strip__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(20, 32, 26, .32);
  border: 1px solid rgba(246, 241, 231, .22);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--c-cream);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: background .2s, border-color .2s, transform .2s;
}
.hero-strip__chip:hover,
.hero-strip__chip:focus-visible {
  background: rgba(20, 32, 26, .5);
  border-color: rgba(246, 241, 231, .42);
  transform: translateY(-1px);
  outline: none;
  color: var(--c-cream);
}
.hero-strip__name {
  font-family: var(--ff-display);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--c-cream);
}
.hero-strip__sep {
  color: rgba(246, 241, 231, .55);
  font-weight: 400;
}
.hero-strip__price {
  font-size: .88rem;
  color: var(--c-saffron);
  font-weight: 600;
  letter-spacing: .01em;
}
.hero-strip__sold {
  margin-left: 6px;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(180, 60, 50, .85);
  color: #fff;
}

/* Tablets: alle 5 Chips bleiben sichtbar, nur Padding kompakter. */
@media (max-width: 900px) {
  .hero-strip { top: calc(var(--header-h) + 16px); }
  .hero-strip__list { gap: 8px; }
  .hero-strip__chip { padding: 8px 13px; }
  .hero-strip__name { font-size: .92rem; }
  .hero-strip__price { font-size: .82rem; }
}

@media (max-width: 760px) {
  .hero-strip__head { margin-bottom: 10px; }
  /* Mobile: horizontal scrollbar mit Snap, falls Chips nicht in eine Zeile passen. */
  .hero-strip__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .hero-strip__list::-webkit-scrollbar { display: none; }
  .hero-strip__item { scroll-snap-align: start; }
  .hero-strip__chip { padding: 8px 12px; }
}

/* Sehr schmale Phones: Strip komplett ausblenden, damit der Hero-Titel
   nie kollidiert. Die Bestseller sind ohnehin direkt unter dem Hero in
   der Produkt-Rail erreichbar. */
@media (max-width: 600px) {
  .hero-strip { display: none; }
}

@media (max-width: 760px) {
  .hero__inner {
    /* 2*header-h kompensiert .hero--clean margin-top: -header-h. */
    padding: calc(var(--header-h) * 2 + clamp(1rem, 3vh, 2rem)) 0 88px;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
  }
  .hero__cta { justify-content: center; }
  .hero__scroll { display: none; }
}

@media (max-width: 600px) {
  .hero__inner {
    padding: calc(var(--header-h) * 2 + 18px) 0 64px;
  }
}

/* Portrait phones / sehr schmal: Subject etwas höher ankern, da der Hero proportional
   schmaler im Verhältnis zum 16:9-Video ist — aber Hero bleibt 100svh, Video füllt komplett. */
@media (max-aspect-ratio: 9/16) {
  .hero__video { object-position: 50% 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__scroll span { animation: none; }
  .hero {
    background-image:
      linear-gradient(rgba(20,32,26,.45), rgba(20,32,26,.75)),
      url("../video/hero-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}

/* hero__art (used by other pages) */
.hero__art {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-cream-2);
  box-shadow: var(--shadow-md);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* shared subpage hero */
.subpage-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 118px) 0 clamp(64px, 8vw, 104px);
}
.subpage-hero__grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(0, .85fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.subpage-hero h1,
.section-head h1 { max-width: 13ch; }
.section-head h1 { margin-inline: auto; }
.subpage-hero .lead { max-width: 58ch; margin-top: 24px; }
.subpage-hero__actions,
.subpage-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.subpage-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(217,210,191,.9);
  color: var(--c-ink);
  font-size: .92rem;
  box-shadow: var(--shadow-sm);
}
.subpage-hero__chip svg { width: 16px; height: 16px; color: var(--c-leaf); }
.subpage-hero__visual { position: relative; }
.subpage-hero__image {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-cream-2);
  box-shadow: 0 28px 64px rgba(20,32,26,.22);
  aspect-ratio: 5 / 4;
}
.subpage-hero__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.subpage-hero__note {
  position: absolute;
  left: -18px;
  bottom: -18px;
  max-width: 260px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(246,241,231,.94);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
}
.subpage-hero__note strong {
  display: block;
  color: var(--c-leaf);
  margin-bottom: 4px;
}
.subpage-hero__note span { color: var(--c-mute); font-size: .92rem; }

@media (max-width: 900px) {
  .subpage-hero__grid { grid-template-columns: 1fr; }
  .subpage-hero h1,
  .section-head h1 { max-width: 16ch; }
  .subpage-hero__image { aspect-ratio: 16 / 10; }
  .subpage-hero__note { position: static; max-width: none; margin-top: 14px; }
}

@media (max-width: 560px) {
  .subpage-hero__actions .btn { width: 100%; }
  .subpage-hero__chip { width: 100%; justify-content: center; }
}

/* Italic accent on page headlines (z. B. "Willkommen", "Wissen"). */
.subpage-hero h1 em,
.section-head h1 em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  color: var(--c-bronze);
}

/* ---------- story row (Bild + Copy, alternierend) ----------
   Wird auf Ueber-uns-Seite genutzt fuer Mission/Werte/Qualitaet/Founder. */
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.story-row--reverse .story-row__media { order: 2; }
.story-row__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-cream-2);
  box-shadow: 0 28px 64px rgba(20,32,26,.22);
  aspect-ratio: 5 / 4;
}
.story-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-row__media--portrait { aspect-ratio: 3 / 4; }
.story-row__media--wide { aspect-ratio: 16 / 9; }
.story-row__copy h2 {
  margin-top: 14px;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  max-width: 18ch;
}
.story-row__copy p {
  margin-top: 18px;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 56ch;
  color: inherit;
}
.story-row__copy p em {
  font-style: italic;
  color: var(--c-bronze);
}
.section--leaf .story-row__copy p { color: rgba(246,241,231,.92); }
.section--leaf .story-row__copy .eyebrow {
  color: var(--c-bronze);
  /* Auf dunklem Leaf-Grund kein Cream-Halo, sondern ein dunkler Schatten,
     damit die Bronze-Lettern sauber von der gruenen Flaeche abheben. */
  text-shadow:
    0 1px 0 rgba(20,32,26,.55),
    0 0 8px rgba(20,32,26,.35);
}

@media (max-width: 900px) {
  .story-row { grid-template-columns: 1fr; gap: 28px; }
  .story-row--reverse .story-row__media { order: 0; }
  .story-row__media { aspect-ratio: 16 / 10; }
  .story-row__media--portrait { aspect-ratio: 4 / 5; max-width: 480px; }
  .story-row__media--wide { aspect-ratio: 16 / 9; }
}

/* eyebrow / lead
   Lesbarkeit auf strukturierten Hintergruenden (Marmor-Poster, Bud-Bilder):
   - Etwas kraeftigere Strichstaerke (700) traegt feinen Mikrokontrast.
   - Cream-Halo via text-shadow ist auf flachem Cream unsichtbar, hebt den
     Text aber sichtbar von Texturen ab.
   - Kleiner Bronze-Akzentstrich als ::before liefert einen visuellen Anker
     und verbessert die Wahrnehmung der bronzefarbenen Eyebrows ohne die
     Markenfarbe selbst zu veraendern. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-leaf);
  text-shadow:
    0 1px 0 rgba(246,241,231,.85),
    0 0 6px rgba(246,241,231,.55);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: currentColor;
  opacity: .75;
  border-radius: 2px;
  flex: 0 0 auto;
}
/* Wenn der Eyebrow zentriert in einem Section-Head sitzt, soll der
   Akzentstrich nicht das Layout verschieben — wir behalten ihn aber
   sichtbar als links anliegende Markierung. */
.section-head .eyebrow { justify-content: center; }
/* Lead-Paragraphen kappen die Zeilenlaenge auf ~70 Zeichen, damit lange
   Intros auf 1440+ Displays nicht ueber die Lesegrenze laufen.
   In zentrierten .section-head Bloecken wird die Box per margin auto mittig gehalten. */
.lead { font-size: 1.15rem; color: var(--c-ink); max-width: 70ch; }
.section-head .lead { margin-left: auto; margin-right: auto; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-weight: 600; font-size: .98rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  /* Vorher inkl. transform .15s — kein Button transformiert tatsaechlich,
     daher entfernt um Repaint-Cost zu sparen. */
  transition: background .15s, border-color .15s, color .15s;
  min-height: 44px;
}
.btn:focus-visible { outline-offset: 3px; }
.btn--primary {
  background: var(--c-red); color: var(--c-cream);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.btn--primary:hover { background: var(--c-red-2); border-color: rgba(255,255,255,.12); color: var(--c-cream); }
.btn--ghost {
  background: rgba(255,255,255,.04);
  color: rgba(246,241,232,.88);
  border-color: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.10);
  color: var(--c-cream);
  border-color: rgba(255,255,255,.28);
}
.section:not(.section--leaf) .btn--ghost {
  color: var(--c-ink); border-color: var(--c-ink);
  /* Auf hellem Cream-Untergrund war der blur(6px) unsichtbar und nur
     unnoetiger GPU-Cost. Backdrop-Filter wird hier explizit aufgehoben. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.section:not(.section--leaf) .btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); }

/* pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.pillar h3 { margin-bottom: 8px; }
.pillar p  { color: var(--c-mute); }
.pillar__icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-cream-2);
  border-radius: 999px;
  font-weight: 600; font-family: var(--ff-display);
  color: var(--c-leaf);
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; }
}

/* product grid + cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.product-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
  color: var(--c-ink);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--c-ink);
}
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-cream-2);
  overflow: hidden;
}
.product-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Schnellere Uebergaenge — 0.5s wirkten auf Mid-Range-Phones traege. */
  transition: opacity .25s ease, transform .3s ease;
}
.product-card__img--alt { opacity: 0; transform: scale(1.02); }
.product-card.has-hover-img:hover .product-card__img:not(.product-card__img--alt) { opacity: 0; }
.product-card.has-hover-img:hover .product-card__img--alt { opacity: 1; transform: scale(1); }
.product-card:not(.has-hover-img):hover .product-card__img { transform: scale(1.04); }

/* Cutout-Variante (transparente Productcards): freigestellte Pflanze
   schwebt auf weichem Verlauf, ohne Container-Look. */
.product-card--cutout .product-card__media {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(31,61,43,.10), transparent 65%),
    linear-gradient(180deg, #f7f0de 0%, #ece4d2 100%);
}
.product-card--cutout .product-card__img {
  object-fit: contain;
  padding: 14px;
  filter: drop-shadow(0 14px 22px rgba(20,32,26,.18));
}
.product-card--cutout:hover .product-card__img:not(.product-card__img--alt) {
  transform: scale(1.03);
}
.product-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--c-ink); color: var(--c-cream);
  font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: .04em; text-transform: uppercase;
  z-index: 1;
}
.product-card__badge--soldout { background: #b04a3a; }
.product-card__body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.product-card__cat {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-saffron);
}
.product-card__name { font-size: 1.2rem; margin-top: 2px; }
.product-card__tag {
  color: var(--c-mute);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 4px;
}
.product-card__foot {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.product-card__price { font-weight: 600; }

/* filter chips */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin: 0 0 40px;
}
.filter-chip {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--c-line);
  background: #fff;
  font-size: .9rem; font-weight: 500;
  color: var(--c-ink);
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { border-color: var(--c-leaf); }
.filter-chip.is-active {
  background: var(--c-leaf); border-color: var(--c-leaf); color: var(--c-cream);
}

/* tighter section directly under hero */
.section--tight { padding: 56px 0 72px; }
@media (max-width: 760px) { .section--tight { padding: 40px 0 56px; } }

/* horizontal product carousel (rail) */
.carousel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.carousel-head h2 { margin-top: 6px; }
.carousel-controls { display: none; } /* legacy: arrows moved into rail */

.carousel-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--c-line);
  background: #fff;
  color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s, opacity .15s, transform .15s, box-shadow .15s;
}
.carousel-btn:hover:not(:disabled) {
  background: var(--c-leaf); border-color: var(--c-leaf); color: var(--c-cream);
}
.carousel-btn:active:not(:disabled) { transform: scale(.94); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn.is-edge { opacity: .5; }
.carousel-btn.is-edge:hover { opacity: 1; }
.carousel-all {
  margin-left: 8px;
  font-weight: 600;
  color: var(--c-leaf);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s;
}
.carousel-all:hover { border-bottom-color: var(--c-leaf); }

.carousel { position: relative; }

/* arrows sitting *in* the rail row, vertically centered on the product image */
.carousel-btn--rail {
  position: absolute;
  /* rail padding-top is 12px; cards are square so media center sits at
     12px + (cardWidth / 2). cardWidth tracks grid-auto-columns: minmax(360px, 30%). */
  top: calc(12px + min(420px, 30vw) / 2);
  transform: translateY(-50%);
  width: 48px; height: 48px;
  z-index: 3;
  background: #fff;
  box-shadow: var(--shadow-md);
  border-color: transparent;
  color: var(--c-ink);
}
.carousel-btn--rail svg { display: block; }
.carousel-btn--rail[data-dir="prev"] { left: clamp(8px, 1.5vw, 28px); }
.carousel-btn--rail[data-dir="next"] { right: clamp(8px, 1.5vw, 28px); }
.carousel-btn--rail:hover {
  background: var(--c-leaf); color: var(--c-cream); border-color: var(--c-leaf);
  transform: translateY(-50%) scale(1.06);
}
.carousel-btn--rail:active { transform: translateY(-50%) scale(.95); }
.carousel-btn--rail:disabled { opacity: .35; cursor: default; box-shadow: var(--shadow-sm); }
.carousel-btn--rail:disabled:hover { transform: translateY(-50%); background: #fff; color: var(--c-ink); }
.carousel__track {
  /* left edge stays flush with .container (matches "Unsere Sorten" headline) */
  --rail-edge: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(360px, 30%);
  gap: 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-edge);
  padding: 12px var(--rail-edge) 28px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 3px solid var(--c-saffron); outline-offset: 2px; border-radius: 8px; }

/* dots */
.carousel__dots {
  display: flex; justify-content: center; gap: 10px;
  margin-top: 18px;
}
.carousel__dot {
  /* Visueller Dot bleibt klein — die Hitbox wird per padding auf 44px+
     vergroessert, ohne die optische Groesse zu veraendern. */
  position: relative;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--c-line);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s, width .2s;
}
.carousel__dot::before {
  content: "";
  position: absolute;
  inset: -17px -7px;
  border-radius: 999px;
}
.carousel__dot:hover { background: var(--c-leaf-2); }
.carousel__dot.is-active {
  background: var(--c-leaf);
  width: 26px;
}
.carousel__dot:focus-visible {
  outline: 3px solid var(--c-saffron);
  outline-offset: 6px;
}
.carousel__dots { padding: 4px 0; }

/* edge fade only on the right — cards must start flush at the container's left edge */
.carousel::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(24px, 6vw, 80px);
  pointer-events: none;
  z-index: 2;
}
.carousel::after  { right: 0; background: linear-gradient(-90deg, var(--c-cream), rgba(246,241,231,0)); }

@media (max-width: 1100px) {
  .carousel__track { grid-auto-columns: minmax(300px, 42%); }
  .carousel-btn--rail { top: calc(12px + min(360px, 42vw) / 2); }
}
@media (max-width: 760px) {
  .carousel__track {
    grid-auto-columns: 82%;
    gap: 16px;
    padding: 8px 18px 20px;
    scroll-padding-left: 18px;
  }
  .carousel-controls .carousel-btn { display: none; }
  .carousel-btn--rail { display: none; }
  .carousel::after { display: none; }
}

/* rail card (cousin of product-card, tuned for the rail) */
.rail-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
  color: var(--c-ink);
  min-width: 0;
}
.rail-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--c-ink);
}
.rail-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-cream-2);
  overflow: hidden;
}
.rail-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .35s ease, transform .5s ease;
}
.rail-card__img--alt {
  opacity: 0;
  transform: scale(1.02);
}
.rail-card.has-hover-img:hover .rail-card__img:not(.rail-card__img--alt) { opacity: 0; }
.rail-card.has-hover-img:hover .rail-card__img--alt { opacity: 1; transform: scale(1); }
/* cards without an alt image still get a subtle zoom on hover */
.rail-card:not(.has-hover-img):hover .rail-card__img { transform: scale(1.04); }
.rail-card__body {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.rail-card__name { font-size: 1.35rem; margin-top: 2px; }
.rail-card__tag {
  color: var(--c-mute);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 4px;
  /* clamp to keep cards even */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-card__foot {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.rail-card__cta {
  font-size: .82rem; font-weight: 600;
  color: var(--c-leaf);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .rail-card { transition: none; }
}

/* faq (details/summary) */
.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 6px 18px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--ff-body);
  font-size: 1.3rem; font-weight: 400;
  color: var(--c-saffron);
  transition: transform .2s;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding: 0 0 16px; color: var(--c-mute); }

/* newsletter */
.newsletter {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 520px; margin: 0 auto;
}
.newsletter input[type=email] {
  flex: 1; min-width: 240px;
  padding: 12px 16px;
  border: 1.5px solid var(--c-line);
  background: #fff;
  border-radius: 999px;
  font-size: 1rem;
}
.newsletter input[type=email]:focus { border-color: var(--c-leaf); outline: 0; }
.newsletter button { min-width: 140px; }
.newsletter__note {
  margin-top: 12px;
  font-size: .85rem;
  color: var(--c-mute);
  text-align: center;
  width: 100%;
}
.section--leaf .newsletter input[type=email] { border-color: transparent; }
.section--leaf .newsletter__note { color: var(--c-cream-2); }

/* ---------- product detail (PDP) ---------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.pdp > div { min-width: 0; }

/* media column */
.pdp__main {
  position: relative;
  background: var(--c-cream-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
}
.pdp__main img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.pdp__thumbs button {
  padding: 0;
  background: var(--c-cream-2);
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  transition: border-color .15s, transform .15s;
}
.pdp__thumbs button:hover { border-color: var(--c-leaf); }
.pdp__thumbs button.is-active {
  border-color: var(--c-leaf);
  box-shadow: 0 0 0 2px rgba(31, 61, 43, .15);
}
.pdp__thumbs img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* text column */
.pdp__col { display: flex; flex-direction: column; gap: 22px; }
.pdp__head { display: block; }
.pdp__cat {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-saffron);
  margin-bottom: 10px;
}
.pdp__name {
  margin: 0 0 6px;
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.pdp__tag {
  color: var(--c-mute);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

/* Buy-Box — Preis, Groesse und CTA als zusammenhaengende Einheit, oberhalb
   der ausfuehrlichen Beschreibung. Damit ist Bestellen ohne Scrollen moeglich. */
.pdp__buybox {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.pdp__price-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pdp__price {
  font-family: var(--ff-display);
  font-size: 2rem;
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1;
}
.pdp__notes {
  color: var(--c-mute);
  font-size: .82rem;
  margin: 0;
}
.pdp__sizes-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 8px;
}
.pdp__desc {
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 4px;
}
.pdp__desc.muted { color: var(--c-mute); }

.pdp__info { display: flex; flex-direction: column; gap: 18px; }

.pdp__sizes {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0;
}
.pdp__size {
  min-width: 56px;
  /* WCAG-konformes Tap-Target: 44px Hoehe garantiert. */
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--c-line);
  background: #fff;
  font-weight: 600;
  color: var(--c-ink);
  transition: background .15s, border-color .15s, color .15s;
}
.pdp__size:hover { border-color: var(--c-leaf); }
.pdp__size.is-active {
  background: var(--c-leaf);
  border-color: var(--c-leaf);
  color: var(--c-cream);
}

.pdp__cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0;
}

.pdp__meta {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: .92rem;
  color: var(--c-mute);
}
.pdp__meta strong { color: var(--c-ink); font-weight: 600; }

/* Sortendetails — gescrapte Shopify-Akkordeon-Inhalte (Wirkung/Aroma/Info).
   Liegt unter der Beschreibung im Info-Block; Container-Look wie pdp__meta,
   damit die PDP konsistent wirkt. */
.pdp__details {
  margin: 32px 0 0;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.pdp__details-title {
  font-size: .78rem;
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin: 0 0 14px;
}
.pdp__details dl { display: grid; gap: 14px; margin: 0; }
.pdp__detail-row { display: grid; gap: 4px; }
.pdp__detail-row dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-leaf);
}
.pdp__detail-row dd {
  margin: 0;
  color: var(--c-ink);
  font-size: .98rem;
  line-height: 1.55;
}
.pdp__detail-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pdp__detail-list li {
  position: relative;
  padding-left: 18px;
  color: var(--c-ink);
  font-size: .96rem;
  line-height: 1.5;
}
.pdp__detail-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .65em;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--c-bronze);
}
@media (max-width: 480px) {
  .pdp__details { padding: 18px 18px; }
  .pdp__detail-row dd { font-size: .95rem; }
}

/* ---------- Sortendetails: Stats, Split, Lineage, Tags, Yield, Badges ---------- */

/* Header der Sortendetails-Karte */
.pdp__details-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pdp__details-head .pdp__details-title { margin: 0; }
.pdp__details-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp__badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.pdp__badge--fem  { background: rgba(31,61,43,.10);  color: var(--c-leaf);    border-color: rgba(31,61,43,.18); }
.pdp__badge--auto { background: rgba(214,162,71,.18); color: var(--c-bronze); border-color: rgba(214,162,71,.32); }
.pdp__badge--reg  { background: rgba(110,110,110,.10); color: var(--c-mute);  border-color: rgba(110,110,110,.22); }

/* Sub-Sektionen unterhalb des Headers bekommen Hairline-Dividers — eine
   konsistente vertikale Rhythmik, statt 5x margin-bottom-Insellösungen. */
.pdp__details > .pdp__stats,
.pdp__details > .pdp__split,
.pdp__details > .pdp__lineage,
.pdp__details > .pdp__tag-sections,
.pdp__details > .pdp__yield,
.pdp__details > .pdp__leftover {
  padding: 14px 0;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.pdp__details > .pdp__stats:first-of-type,
.pdp__details > .pdp__details-head + .pdp__stats,
.pdp__details > .pdp__details-head + .pdp__split,
.pdp__details > .pdp__details-head + .pdp__lineage,
.pdp__details > .pdp__details-head + .pdp__tag-sections,
.pdp__details > .pdp__details-head + .pdp__yield {
  border-top: 0;
  padding-top: 0;
}
.pdp__details > *:last-child { padding-bottom: 0; }

/* Einheitlicher Sub-Section-Header: kleines bronze-Caps-Label links,
   optionale Meta-Info rechts. */
.pdp__row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.pdp__row-label,
.pdp__split-label,
.pdp__lineage-label,
.pdp__tag-label,
.pdp__yield-label,
.pdp__leftover-label,
.pdp__stat-label {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-bronze);
}
.pdp__row-meta {
  font-size: .85rem; color: var(--c-ink);
}
.pdp__row-meta b { font-family: var(--ff-display); font-weight: 700; }

/* Stat-Tiles */
.pdp__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.pdp__stat {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  min-height: 92px;
}
.pdp__stat-label { color: var(--c-mute); }
.pdp__stat-value {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--c-ink);
  margin-top: 4px;
}
.pdp__stat-bar {
  height: 6px; border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
  margin-top: auto;       /* drückt Bar an den Tile-Boden -> einheitliche Linie */
  padding-top: 0;
}
.pdp__stat-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--c-leaf), var(--c-saffron));
  border-radius: 999px;
}
.pdp__stat--cbd .pdp__stat-bar > span { background: linear-gradient(90deg, var(--c-saffron), var(--c-bronze)); }

/* Indica/Sativa-Split mit In-Bar-Prozenten */
.pdp__split-bar {
  display: flex;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-cream);
}
.pdp__split-indica,
.pdp__split-sativa {
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
}
.pdp__split-indica { background: var(--c-leaf); }
.pdp__split-sativa { background: var(--c-saffron); color: #1a1a1a; }
.pdp__split-num { line-height: 1; }

/* Lineage */
.pdp__lineage { display: grid; gap: 8px; }
.pdp__lineage-tree {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
}
.pdp__lineage-pill {
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
}
.pdp__lineage-x {
  color: var(--c-bronze);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 2px;
}

/* Wirkung / Aroma */
.pdp__tag-sections {
  display: grid;
  gap: 14px;
}
.pdp__tag-block { display: grid; gap: 8px; }
.pdp__tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp__tag {
  display: inline-flex; align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid transparent;
  text-transform: none;
  letter-spacing: 0;
}
.pdp__tag--effect { background: rgba(31,61,43,.10);  color: var(--c-leaf);   border-color: rgba(31,61,43,.20); }
.pdp__tag--aroma  { background: rgba(214,162,71,.18); color: var(--c-bronze); border-color: rgba(214,162,71,.32); }
.pdp__tag-prose {
  margin: 0;
  color: var(--c-ink);
  font-size: .95rem;
  line-height: 1.55;
}

/* Ertrag */
.pdp__yield {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.pdp__yield-dots { display: inline-flex; gap: 5px; }
.pdp__yield-dot {
  width: 11px; height: 11px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--c-line);
}
.pdp__yield-dot.is-on { background: var(--c-leaf); border-color: var(--c-leaf); }
.pdp__yield-text { font-weight: 700; color: var(--c-ink); font-size: .92rem; }

/* Restliche, unstrukturierte Info-Zeilen */
.pdp__leftover { display: grid; gap: 6px; }
.pdp__leftover ul { margin: 0; padding-left: 18px; color: var(--c-ink); }
.pdp__leftover li { font-size: .92rem; line-height: 1.5; }

@media (max-width: 480px) {
  .pdp__stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pdp__stat { min-height: 84px; padding: 10px 12px; }
  .pdp__stat-value { font-size: 1.2rem; }
  .pdp__split-bar { height: 20px; }
}

/* sticky mobile CTA */
.pdp-stickybar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 12px 18px;
  background: rgba(246, 241, 231, .96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 14px rgba(20, 32, 26, .08);
  align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: .92rem;
}
.pdp-stickybar > span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-stickybar__cta { padding: 10px 16px; }
body.has-stickybar { padding-bottom: 76px; }

/* PDP — small components moved out of inline styles */
.pdp__crumbs {
  margin-bottom: 24px;
  font-size: .9rem;
  color: var(--c-mute);
}
.pdp__sold-badge {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
}
.pdp__notfound {
  text-align: center;
  padding: 80px 0;
}
.pdp__notfound .lead { margin: 16px auto 28px; }

@media (max-width: 900px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 760px) {
  .pdp__name { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem); }
  .pdp__price { font-size: 1.6rem; }
  .pdp-stickybar { display: flex; }
}

/* footer */
.site-footer {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 64px 0 24px;
  margin-top: 80px;
}
.site-footer h4 { color: var(--c-cream); margin-bottom: 14px; }
.site-footer a { color: var(--c-cream-2); }
.site-footer a:hover { color: var(--c-saffron); }
.site-footer ul li { padding: 4px 0; font-size: .92rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(246,241,231,.12);
  font-size: .85rem; color: var(--c-cream-2);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer ul li { padding: 8px 0; } /* groessere Tap-Targets */
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-legal { gap: 14px 18px; }
}

/* reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- utilities ---------- */
.muted { color: var(--c-mute); }
.mt-8  { margin-top: 8px;  }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.text-center { text-align: center; }

/* responsive overrides for inline ueber-uns 2-col */
@media (max-width: 760px) {
  .container[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ---------- contact page ---------- */
.contact-hero {
  position: relative;
  background: var(--c-leaf);
  color: var(--c-cream);
  padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.contact-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(212, 154, 47, .35), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(20, 32, 26, .35), transparent 55%);
  pointer-events: none;
}
.contact-hero > .container { position: relative; }
.contact-hero h1 { color: var(--c-cream); max-width: 18ch; }
.contact-hero .lead { color: var(--c-cream-2); max-width: 56ch; }
.contact-hero__chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 28px;
}
.contact-hero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(246, 241, 231, .12);
  border: 1px solid rgba(246, 241, 231, .28);
  color: var(--c-cream);
  font-size: .9rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-hero__chip svg { width: 16px; height: 16px; }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.contact-card + .contact-card { margin-top: 20px; }
.contact-card h3 {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.contact-card h3 svg {
  width: 22px; height: 22px;
  color: var(--c-leaf);
  flex: none;
}
.contact-card a { color: var(--c-leaf); }
.contact-card a:hover { color: var(--c-leaf-2); }
.contact-card .muted { font-size: .9rem; }
.contact-meta { color: var(--c-mute); font-size: .92rem; margin-top: 6px; }

/* form */
.contact-form {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 18px;
}
.contact-form__title { margin-top: 8px; }
.contact-form__lead { color: var(--c-mute); }
.contact-form__topics { display: grid; gap: 12px; }
.contact-form__topics .btn { width: 100%; justify-content: space-between; text-align: left; }
.contact-form__note { font-size: .9rem; }
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-cream);
  font-size: 1rem;
  color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--c-leaf);
  background: #fff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(20, 32, 26, .12);
}
.contact-form .form-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.contact-form .form-actions .muted { font-size: .82rem; }
.contact-form .form-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .9rem; color: var(--c-mute);
}
.contact-form .form-check input { width: auto; margin-top: 4px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-card, .contact-form { padding: 24px; }
}

/* ============================================================
   editorial — alternierende Bild/Text-Reihen (Anleitung-Stil)
   ============================================================ */
.editorial { contain: layout paint; }
.editorial__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.editorial__row + .editorial__row { margin-top: 80px; }
.editorial__row--reverse .editorial__media { order: 2; }

.editorial__media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-cream);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.editorial__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.editorial__copy h2 {
  margin: 8px 0 16px;
}
.editorial__copy h3 {
  margin: 28px 0 10px;
  font-family: var(--ff-display);
  font-size: 1.35rem;
  color: var(--c-leaf);
}
.editorial__copy p { margin: 0 0 14px; line-height: 1.65; color: var(--c-ink); max-width: 70ch; }
.editorial__list {
  margin: 8px 0 18px;
  padding-left: 20px;
  line-height: 1.65;
  color: var(--c-ink);
}
.editorial__list li { margin-bottom: 10px; }
.editorial__fazit {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-style: italic;
  color: var(--c-mute);
}

@media (max-width: 900px) {
  .editorial__row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .editorial__row + .editorial__row { margin-top: 56px; }
  .editorial__row--reverse .editorial__media { order: 0; }
  .editorial__media { aspect-ratio: 16 / 10; }
}

/* ============================================================
   video-band — eingerahmtes, performantes Brand-Video
   Gleiche Performance-Disziplin wie der Hero:
   keine Animation, kein filter, kein will-change auf <video>.
   Eigene Render-Insel via contain.
   ============================================================ */
.video-band {
  background: var(--c-leaf);
  contain: layout paint;
}
.video-band__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}
.video-band__head .eyebrow { color: var(--c-saffron); }
.video-band__head h2 { color: var(--c-cream); margin: 8px 0 0; }

.video-band__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0c1611;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  isolation: isolate;
}
.video-band__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  display: block;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .video-band__video { display: none; }
  .video-band__frame {
    background-image: url("../video/hero-poster.jpg");
    background-size: cover;
    background-position: 50% 60%;
  }
}

@media (max-width: 760px) {
  .video-band__frame { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
}

/* ============================================================
   founder-band — full-bleed Andy-Portrait mit 70er Vibe
   ============================================================ */
.founder-band {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 72vh, 720px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0c1611;
  color: var(--c-cream);
  contain: layout paint;
}
.founder-band__media {
  position: absolute; inset: 0;
  margin: 0;
  z-index: 0;
}
.founder-band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  display: block;
  /* leichter, warmer 70er-Tint, ohne Animation */
  filter: saturate(1.05) contrast(1.02) sepia(.08);
}
.founder-band__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,22,17,0) 30%, rgba(12,22,17,.55) 70%, rgba(12,22,17,.92) 100%),
    linear-gradient(90deg, rgba(12,22,17,.55) 0%, rgba(12,22,17,.10) 55%, rgba(12,22,17,0) 100%);
  pointer-events: none;
}
.founder-band__inner {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  max-width: 760px;
}
.founder-band__eyebrow { color: var(--c-saffron); }
.founder-band__title {
  margin: 10px 0 22px;
  color: var(--c-cream);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.founder-band__title em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  color: var(--c-saffron);
}
.founder-band__quote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--c-cream);
  max-width: 640px;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.founder-band__sig {
  margin: 0 0 26px;
  color: var(--c-cream-2);
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.founder-band__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 760px) {
  .founder-band { min-height: 80vh; }
  .founder-band__media img { object-position: 65% 35%; }
}

/* ============================================================
   hero overrides — Glass-CTAs (Italic-Bronze kommt zentral aus --c-bronze)
   ============================================================ */
.hero--editorial .hero__cta .btn {
  background: rgba(255,255,255,.10);
  color: var(--c-cream);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.hero--editorial .hero__cta .btn:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  color: var(--c-cream);
}
.hero--editorial .hero__cta .btn--primary {
  background: rgba(194,135,102,.32);
  border-color: rgba(194,135,102,.55);
}
.hero--editorial .hero__cta .btn--primary:hover {
  background: rgba(194,135,102,.48);
  border-color: rgba(194,135,102,.75);
}

/* founder-band overrides — eyebrow lesbar, beide CTAs glass */
.founder-band__eyebrow {
  color: var(--c-cream);
  opacity: .85;
  letter-spacing: .22em;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.founder-band__title em { color: var(--c-cream); opacity: .92; }
.founder-band__cta .btn,
.founder-band__cta .btn--primary {
  background: rgba(255,255,255,.10);
  color: var(--c-cream);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow:
    0 8px 32px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.founder-band__cta .btn:hover,
.founder-band__cta .btn--primary:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
  color: var(--c-cream);
}

/* hero proof + CTA — am Honig-Vorbild ausgerichtet, Kaya-Farben */
.hero--editorial .hero__proof {
  margin: 28px 0 30px;
  gap: 8px 18px;
  text-transform: none;
  letter-spacing: .02em;
  font-size: .98rem;
  color: rgba(246,241,231,.92);
}
.hero--editorial .hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__proof-icon { color: #C28766; flex: none; }
.hero__proof-sep { color: rgba(246,241,231,.45); padding: 0 4px; }

/* CTAs: primary = solid Terrakotta (Kaya-Rot), secondary = Glass */
.hero--editorial .hero__cta { margin-top: 8px; gap: 16px; }
.hero--editorial .hero__cta .btn {
  padding: 14px 26px;
  font-size: 1rem;
  border-radius: 999px;
}
.hero--editorial .hero__cta .btn--primary {
  background: var(--c-red);
  color: var(--c-cream);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero--editorial .hero__cta .btn--primary:hover {
  background: var(--c-red-2, #a55a3a);
  border-color: rgba(255,255,255,.18);
}
.hero--editorial .hero__cta .btn--ghost {
  background: rgba(255,255,255,.08);
  color: var(--c-cream);
  border: 1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hero--editorial .hero__cta .btn--ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.45);
}

@media (max-width: 600px) {
  .hero--editorial .hero__proof { font-size: .9rem; gap: 6px 12px; }
  .hero__proof-sep { display: none; }
}

/* ============================================================
   Production-ready Mobile — finale Polituren
   ============================================================ */

/* Landscape-Phones (kurze Hoehe): Hero schrumpft, damit Headline + CTAs
   ohne Scroll sichtbar sind. */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .hero,
  .hero--clean { min-height: 100svh; }
  .hero--editorial .hero__inner {
    padding: calc(var(--header-h) + 12px) 0 24px;
    justify-content: center;
  }
  .hero__headline { font-size: clamp(2rem, 4vw, 3rem); }
  .hero__sub { margin-top: 14px; font-size: .95rem; }
  .hero--editorial .hero__cta { margin-top: 18px; }
  .hero__proof { margin-top: 18px; font-size: .8rem; }
  .hero__scroll { display: none; }
  .founder-band { min-height: 100svh; }
}

/* PDP: Thumbs auf engen Phones in 4 gleiche Spalten — vorhersagbares Raster. */
@media (max-width: 480px) {
  .pdp__thumbs {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
}

/* PDP Sticky-Bar auf sehr schmalen Phones: Name darf truncieren,
   CTA bleibt fest in voller Breite sichtbar. */
@media (max-width: 380px) {
  .pdp-stickybar {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: .88rem;
    gap: 8px;
  }
  .pdp-stickybar__cta { padding: 10px 14px; font-size: .9rem; }
}

/* Story-Row: noch kompaktere Bild-Aspect auf Phones,
   damit nicht zu viel vertikaler Raum verbraucht wird. */
@media (max-width: 600px) {
  .story-row { gap: 22px; }
  .story-row__media { aspect-ratio: 4 / 3; }
  .story-row__copy h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
}

/* FAQ Summary auf Phones: kompakter, damit "+" und Text nicht kollidieren. */
@media (max-width: 480px) {
  .faq summary { font-size: 1rem; gap: 12px; }
  .faq details { padding: 4px 14px; }
}

/* Filter-Chips: Kategorie-Bar bleibt links flush und scrollt sauber neben
   dem Container-Padding (14px @ <=380px, siehe .container Override oben). */
@media (max-width: 380px) {
  .filter-bar {
    padding: 4px 14px 8px;
    margin: 0 -14px 24px;
  }
}

/* Newsletter Eingabe: groessere, gut tippbare Buttons auf Phones. */
@media (max-width: 480px) {
  .newsletter input[type=email] { padding: 14px 16px; }
  .newsletter button { min-height: 48px; }
}

/* Subpage-Hero Bild auf Phones: keine ueberdimensionale Box. */
@media (max-width: 600px) {
  .subpage-hero__image { aspect-ratio: 4 / 3; }
}

/* Sticky-Header: Hover-Effekte auf Touch nicht stoeren — die Aktiv-Indikator-
   Linie bleibt aber sichtbar (greift via .is-active, kein Hover noetig). */
@media (hover: none) {
  .nav__list a:hover { color: inherit; }
  .nav__cta:hover { background: var(--c-leaf); border-color: var(--c-leaf); }
}

/* Carousel-Dots: ausreichend Tap-Flaeche auf Touch-Geraeten (Hit-Area > Pixelgroesse).
   Nur auf coarse-pointer aktiv, damit Desktop-Cursor keine ueberlappenden
   Hit-Zonen bekommt. */
@media (pointer: coarse) {
  .carousel__dot {
    position: relative;
  }
  .carousel__dot::before {
    content: "";
    position: absolute;
    inset: -10px;
    /* unsichtbarer Tap-Wrapper, kein Layout-Impact */
  }
}