/* ==========================================================================
   Landkräuterei — pages.css
   Seitenspezifische Abschnitte: Hero, Feature, Marken-Splits, Produktdetail,
   Kategorie-/Shop-Seiten, Kontakt, Rechtstexte.
   ========================================================================== */

/* -------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 6rem) 0 0;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 2rem;
}
.hero-copy { max-width: 40ch; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero-art img.hero-plant {
  max-height: 420px;
  filter: drop-shadow(0 14px 18px rgba(58, 44, 29, .18));
}
.hero-bees {
  position: absolute;
  top: 8%; right: 4%;
  width: 90px;
  opacity: .8;
}
.hero-landscape {
  margin-top: clamp(1rem, 3vw, 2.4rem);
  width: 100%;
  opacity: .92;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* --------------------------------------------- Marken-/Inhaltstexte */
.brand-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.brand-split img { margin-inline: auto; max-height: 360px; }
.prose { max-width: 65ch; }
.prose p { color: var(--bark-soft); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; color: var(--bark-soft); }

/* Feature-Abschnitt (Samenbomben / Ökosystem) */
.feature-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.6rem; padding: 0; }
.feature-pills li {
  list-style: none;
  font-size: .9rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(140,154,120,.2);
  border: 1px solid rgba(88,104,63,.3);
  color: var(--moss-deep);
}
.feature-media { position: relative; }
.feature-media .bees {
  position: absolute;
  top: -6%; left: 2%;
  width: 90px;
  opacity: .85;
}

/* Aufruf-Abschnitt (Bestell-/Anfragehinweis) */
.cta-band { text-align: center; }
.cta-band .button { margin: .4rem; }
.cta-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
  font-size: 1.05rem;
}
.cta-contacts a { font-weight: 600; }

/* --------------------------------------------- Shop-/Kategorie-Seiten */
.breadcrumb { font-size: .9rem; color: var(--ink-muted); margin: 1.4rem 0 0; }
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--seal); }

.category-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: center;
  background: var(--paper-card);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.8rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2.4rem;
}
.category-intro .ci-media {
  flex: 0 0 auto;
  width: 120px; height: 120px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(173,138,82,.16), transparent 70%),
    var(--parchment-deep);
  display: grid; place-items: center;
  border: var(--border);
}
.category-intro .ci-media img { max-height: 92px; width: auto; }
.category-intro h1 { margin: 0 0 .3rem; }
.category-intro p { margin: 0; color: var(--bark-soft); }

.empty-note {
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
  padding: 2.5rem 0;
}

/* Zurück-/Weiter-Leiste unter Produktlisten */
.list-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.6rem;
}

/* ------------------------------------------- Produkt-Detailseiten */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-top: 1.4rem;
}
.product-detail-media {
  position: sticky;
  top: 90px;
  background:
    radial-gradient(circle at 50% 45%, rgba(173,138,82,.16), transparent 70%),
    var(--parchment-deep);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-detail-media img { max-height: 380px; filter: drop-shadow(0 12px 16px rgba(58,44,29,.2)); }
.product-detail-info .product-tag { margin-bottom: 1rem; }
.product-detail-info h1 { margin-bottom: .25em; }
.spec-list { list-style: none; padding: 0; margin: 1.4rem 0; }
.spec-list li {
  display: flex;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(122,90,50,.28);
}
.spec-list li strong { min-width: 140px; color: var(--bark); flex: 0 0 auto; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Erweiterte Detail-Abschnitte (Beschreibung, Verwendung ...) */
.detail-sections { margin-top: clamp(2.5rem, 6vw, 4rem); }
.detail-block { max-width: 70ch; margin: 0 auto 2rem; }
.detail-block h2 { font-size: 1.5rem; }
.detail-block p, .detail-block li { color: var(--bark-soft); }
.detail-block ul { padding-left: 1.2rem; }
.detail-block li { margin-bottom: .4rem; }

/* --------------------------------------------------- Kontakt / Formular */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.contact-aside .note-box { margin-bottom: 1.2rem; }
.contact-aside img { max-height: 220px; margin: 1.5rem auto 0; }

/* Anfrage-Layout (Formular + Zusammenfassung) */
.request-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* ----------------------------------------------------- Rechtstext-Seiten */
.legal-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.legal-page .prose { margin-inline: auto; }
.legal-page h2 { margin-top: 2rem; font-size: 1.5rem; }
.legal-page h3 { margin-top: 1.4rem; font-size: 1.2rem; }
.legal-page address { font-style: normal; color: var(--bark-soft); }
.legal-toc {
  background: var(--paper-card);
  border: var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0 2rem;
}
.legal-toc ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.legal-toc li { margin-bottom: .3rem; }