/* ============================================================
   Olio FamigliAlagna — Hauptstylesheet
   Palette: Dunkelgrün, Goldgelb, Creme, Schwarz
   ============================================================ */

:root {
  --green:      #2d5a27;
  --green-mid:  #4a7c3f;
  --green-light:#6fa362;
  --gold:       #c9a84c;
  --gold-light: #e8c96e;
  --cream:      #f5f0e8;
  --cream-dark: #ede5d4;
  --dark:       #1a1a18;
  --text:       #2c2c28;
  --text-muted: #6b6b60;
  --white:      #ffffff;
  --radius:     8px;
  --shadow:     0 4px 24px rgba(0,0,0,0.10);
  --transition: 0.25s ease;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── Container ── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-primary:hover { background: var(--green-mid); border-color: var(--green-mid); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45,90,39,0.3); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); border-color: var(--white); }
.btn-outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn-outline:hover { background: var(--green); color: var(--white); }
.btn-sm { padding: 10px 20px; font-size: 0.875rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }

/* ── Section headers ── */
.section-header { text-align: center; margin-bottom: 60px; }
.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin-bottom: 12px;
}
.section-eyebrow.light { color: var(--gold-light); }
.section-header h2, h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 16px;
}
.section-sub {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
}

/* ============================================================
   NAV
   ============================================================ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0;
  transition: background var(--transition), box-shadow var(--transition);
}
#nav.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  backdrop-filter: blur(12px);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--white);
  transition: color var(--transition);
}
#nav.scrolled .nav-logo { color: var(--dark); }
.nav-logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.footer-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(1.2);
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--gold-light); }
/* scrolled Nav-Links Farbe nur auf Desktop */
@media (min-width: 681px) {
  #nav.scrolled .nav-links a { color: var(--text); }
  #nav.scrolled .nav-links a:hover { color: var(--green); }
}

.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: 9px 20px;
  border-radius: var(--radius);
  font-weight: 600 !important;
  transition: background var(--transition) !important;
}
.nav-cta:hover { background: var(--green-mid) !important; }
#nav.scrolled .nav-cta { background: var(--green) !important; color: var(--white) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: background var(--transition);
}
#nav.scrolled .nav-toggle span { background: var(--dark); }
/* Wenn Menu offen: Hamburger immer weiss (sichtbar auf dunklem Overlay) */
#nav.menu-open .nav-toggle span { background: var(--white) !important; }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /* Dunkler, cinematischer Overlay: oben + Mitte tiefdunkel, unten Goldhauch */
  background:
    linear-gradient(180deg,
      rgba(10,22,9,0.65) 0%,
      rgba(10,22,9,0.30) 40%,
      rgba(10,22,9,0.55) 75%,
      rgba(10,22,9,0.80) 100%),
    linear-gradient(90deg,
      rgba(10,22,9,0.45) 0%,
      transparent        40%,
      rgba(10,22,9,0.45) 100%);
}
/* Cinematischer Vignetten-Rahmen — gibt dem Bild einen "Film"-Look */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px 40px rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 24px;
  max-width: 700px;
}
.hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: 20px;
}
.hero-content h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 20px;
}
.hero-content h1 em {
  font-style: italic;
  color: var(--gold-light);
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.88);
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.scroll-down {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.6);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   USPs
   ============================================================ */
#usps {
  background: var(--cream);
  padding: 80px 0;
}
.usps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.usp {
  text-align: center;
}
.usp-icon {
  width: 64px;
  height: 64px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.usp h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}
.usp p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================================
   PRODUKTE
   ============================================================ */
#produkte {
  padding: 100px 0 80px;
  background: var(--white);
}
.produkte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 32px;
}
.produkt-card {
  border: 1px solid #e8e4d8;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  transition: transform var(--transition), box-shadow var(--transition);
}
.produkt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.produkt-card.featured {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 2px var(--green-mid);
}
.produkt-img-wrap {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #ffffff;
}
.produkt-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transition: transform 0.4s ease;
}
.produkt-card:hover .produkt-img-wrap img { transform: scale(1.04); }
.produkt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--dark);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}
.produkt-badge.bestseller {
  background: var(--gold);
  color: var(--dark);
}
.produkt-body {
  padding: 24px;
}
.produkt-body h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}
.produkt-body p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.6;
}
.produkt-preis {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.preis {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
}
.preis-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}
/* Gast-Preis (durchgestrichen, nur für nicht eingeloggte Besucher) */
.preis-guest {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
  display: none; /* standardmässig versteckt, JS zeigt es für Gäste an */
}
.preis-guest.visible {
  display: inline;
}
.produkte-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 16px;
  line-height: 1.8;
}

/* ============================================================
   STORY
   ============================================================ */
#story {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
}
.story-bg {
  position: absolute;
  inset: 0;
}
.story-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15,30,13,0.88) 0%, rgba(15,30,13,0.70) 50%, rgba(15,30,13,0.3) 100%);
}
.story-content {
  position: relative;
  z-index: 2;
}
.story-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: start;
}
.story-text {
  max-width: 560px;
}
.story-map {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.story-map img {
  width: 220px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  opacity: 0.95;
}
.story-map iframe {
  width: 260px;
  height: 300px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.story-map-caption {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.8rem !important;
  text-align: center;
  line-height: 1.5;
  margin: 0 !important;
}
.story-text h2 {
  color: var(--white);
  margin-bottom: 24px;
}
.story-text p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 18px;
  font-size: 1.05rem;
  line-height: 1.75;
}
.story-strasatti {
  border-left: 3px solid var(--gold);
  padding-left: 16px;
  font-style: italic;
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.95rem !important;
}
.story-facts {
  display: flex;
  gap: 40px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.fact {
  display: flex;
  flex-direction: column;
}
.fact-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.2;
}
.fact-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   REZEPTE
   ============================================================ */
#rezepte {
  padding: 100px 0;
  background: var(--cream);
}
.rezepte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rezept-card {
  background: var(--white);
  border-radius: 12px;
  padding: 28px;
  border: 1px solid #e8e4d8;
  transition: transform var(--transition), box-shadow var(--transition);
}
.rezept-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rezept-card.highlight {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.rezept-card.highlight .rezept-desc { color: rgba(255,255,255,0.85); }
.rezept-card.highlight .rezept-tags span { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
.rezept-nr {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--cream-dark);
  margin-bottom: 12px;
  line-height: 1;
}
.rezept-card.highlight .rezept-nr { color: var(--gold-light); }
.rezept-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 10px;
}
.rezept-card.highlight h3 { color: var(--white); }
.rezept-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}
.rezept-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rezept-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--cream);
  color: var(--green-mid);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ============================================================
   LAGERUNG
   ============================================================ */
#lagerung {
  padding: 100px 0;
  background: var(--white);
}
.lagerung-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lagerung-text h2 { margin-bottom: 16px; }
.lagerung-intro {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}
/* Nährwerte */
.naehrwerte {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--cream-dark);
}
.naehrwerte h4 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 8px;
}
.naehrwerte-zutaten {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.naehr-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.naehr-tabelle thead th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 2px solid var(--cream-dark);
  font-family: 'Inter', sans-serif;
}
.naehr-tabelle tbody tr {
  border-bottom: 1px solid var(--cream-dark);
}
.naehr-tabelle td {
  padding: 6px 0;
  color: var(--text);
}
.naehr-tabelle td:last-child {
  text-align: right;
  font-weight: 500;
}
.naehr-tabelle td.sub {
  padding-left: 16px;
  color: var(--text-muted);
  font-size: 0.84rem;
}
.lager-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lager-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
}
.lager-liste svg { flex-shrink: 0; margin-top: 3px; }
.lagerung-img {
  border-radius: 16px;
  overflow: hidden;
  height: 400px;
}
.lagerung-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   BESTELLEN
   ============================================================ */
#bestellen {
  padding: 100px 0;
  background: var(--cream);
}
.bestell-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}
.bestell-form {
  background: var(--white);
  padding: 40px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 12px 16px;
  border: 1.5px solid #ddd8c8;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  transition: border-color var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--green-mid); }
.form-group textarea { resize: vertical; min-height: 120px; }

.produkt-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.6;
}
.form-msg {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.form-msg.success {
  background: #e8f5e1;
  color: var(--green);
  padding: 14px 18px;
}
.form-msg.error {
  background: #fde8e8;
  color: #c0392b;
  padding: 14px 18px;
}

.bestell-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-card {
  background: var(--white);
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid #e8e4d8;
}
.info-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 8px;
}
.info-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.info-card a { color: var(--green-mid); text-decoration: underline; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background: var(--dark);
  padding: 48px 0;
  position: relative;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.footer-brand strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--white);
}
.footer-brand span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-links-legal a {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.4) !important;
}
.footer-links-legal a:hover { color: rgba(255,255,255,0.7) !important; }
.footer-links a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--gold-light); }
.footer-legal p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.8;
}
.footer-legal a { color: rgba(255,255,255,0.5); text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .usps-grid { grid-template-columns: repeat(2, 1fr); }
  .produkte-grid { grid-template-columns: repeat(2, 1fr); }
  .rezepte-grid { grid-template-columns: repeat(2, 1fr); }
  .lagerung-wrap { grid-template-columns: 1fr; gap: 40px; }
  .lagerung-img { height: 280px; order: -1; }
  .bestell-wrap { grid-template-columns: 1fr; }
  .story-facts { gap: 28px; }
  .story-inner { grid-template-columns: 1fr; gap: 36px; }
  .story-map img { width: 180px; }
}

@media (max-width: 680px) {
  /* Nav-links verstecken — #mobileMenu Overlay übernimmt */
  .nav-links { display: none !important; }
  .nav-toggle { display: flex; z-index: 200; }
  #nav.scrolled .nav-logo { color: var(--dark); }

  .produkte-grid { grid-template-columns: 1fr; }
  .rezepte-grid { grid-template-columns: 1fr; }
  .usps-grid { grid-template-columns: 1fr; gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .story-facts { flex-direction: column; gap: 20px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .bestell-form { padding: 28px 20px; }
}
/* Landscape auf Smartphones: Hamburger behalten, ganz rechts */
@media (max-width: 900px) and (orientation: landscape) {
  .nav-links { display: none !important; }
  .nav-toggle { display: flex !important; margin-left: auto; }
  .nav-inner { justify-content: space-between; padding: 0 20px; }
}


/* ===========================
   VOM BAUM INS GLAS — GALERIE
   =========================== */

#bauminsGlas {
  padding: 80px 0;
  background: #faf8f4;
}

.galerie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
  margin-top: 48px;
}

.galerie-wide {
  grid-column: 1 / -1;
}

.galerie-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4/3;
  background: #e8e4dc;
}

.galerie-wide {
  aspect-ratio: 16/7;
}

.galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.galerie-item:hover img {
  transform: scale(1.04);
}

.galerie-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.galerie-item:hover .galerie-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile gallery */
@media (max-width: 640px) {
  .galerie-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .galerie-wide {
    grid-column: 1;
    aspect-ratio: 4/3;
  }

  .galerie-item {
    aspect-ratio: 4/3;
  }

  .galerie-caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   HAARPFLEGE
   ============================================================ */
#haarpflege {
  padding: 100px 0;
  background: var(--cream);
}
.haar-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}
.haar-block {
  margin-bottom: 40px;
}
.haar-block h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: var(--green);
  margin-bottom: 16px;
}
.haar-block p {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.7;
}
.haar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.haar-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.haar-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.haar-item strong {
  display: block;
  font-size: 0.9rem;
  color: var(--green);
  margin-bottom: 4px;
}
.haar-item p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.haar-anwendung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.anwendung-card {
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  border-left: 3px solid var(--gold);
}
.anwendung-nr {
  display: block;
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 6px;
}
.anwendung-card strong {
  display: block;
  font-size: 0.95rem;
  color: var(--green);
  margin-bottom: 8px;
}
.anwendung-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.haar-freq {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 8px;
}
.haar-tipp {
  background: var(--green);
  color: white;
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.haar-tipp span {
  font-family: 'DM Serif Display', serif;
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.haar-tipp p {
  color: rgba(255,255,255,0.9);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.haar-img {
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 80px;
  height: 480px;
}
.haar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 900px) {
  .haar-wrap { grid-template-columns: 1fr; }
  .haar-img { height: 300px; position: static; order: -1; }
  .haar-grid { grid-template-columns: 1fr; }
  .haar-anwendung { grid-template-columns: 1fr; }
}

/* ============================================================
   SUPERFOOD
   ============================================================ */
#superfood {
  padding: 100px 0;
  background: var(--dark);
}
#superfood .section-eyebrow { color: var(--gold); }
#superfood h2 { color: var(--white); }
#superfood h2 em { color: var(--gold); }
#superfood .section-sub { color: rgba(255,255,255,0.7); }

.superfood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.superfood-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px 24px;
  transition: background var(--transition);
}
.superfood-card:hover {
  background: rgba(255,255,255,0.09);
}
.superfood-icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
}
.superfood-card h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  color: var(--gold);
  margin-bottom: 10px;
}
.superfood-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0;
}
.superfood-hinweis {
  background: var(--green);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  gap: 16px;
}
.superfood-hinweis strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  color: var(--gold);
  margin-bottom: 8px;
}
.superfood-hinweis p {
  color: rgba(255,255,255,0.8);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0;
}
.superfood-hinweis em { color: var(--gold-light); font-style: normal; font-weight: 600; }

/* ============================================================
   WISSEN
   ============================================================ */
#wissen {
  padding: 100px 0;
  background: var(--cream);
}
.wissen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.wissen-block {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border-top: 3px solid var(--cream-dark);
}
.wissen-block.highlight-block {
  border-top-color: var(--gold);
}
.wissen-block h4 {
  font-family: 'DM Serif Display', serif;
  font-size: 1rem;
  color: var(--green);
  margin-bottom: 10px;
}
.wissen-block p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
.wissen-zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: var(--green);
  border-radius: 12px;
  padding: 36px;
  text-align: center;
}
.wissen-zahl { display: flex; flex-direction: column; gap: 6px; }
.zahl {
  font-family: 'DM Serif Display', serif;
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 700;
}
.zahl-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .superfood-grid { grid-template-columns: repeat(2, 1fr); }
  .wissen-grid { grid-template-columns: repeat(2, 1fr); }
  .wissen-zahlen { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .superfood-grid { grid-template-columns: 1fr; }
  .wissen-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WARENKORB
   ============================================================ */

/* ── Cart-Button in Nav ─────────────────────────────────────── */
.cart-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  color: var(--green);
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background var(--transition), color var(--transition);
  margin-left: 8px;
  flex-shrink: 0;
}
.cart-btn:hover { background: var(--cream); }
.nav.scrolled .cart-btn { color: var(--green); }

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #c9a84c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.cart-badge.visible { opacity: 1; transform: scale(1); }

/* ── Overlay ────────────────────────────────────────────────── */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}
.cart-overlay.visible { opacity: 1; pointer-events: all; }

/* ── Sidebar ────────────────────────────────────────────────── */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(440px, 100vw);
  background: #fff;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.cart-sidebar.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}
.cart-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  color: #2d5a27;
  margin: 0;
}
.cart-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  display: flex;
}
.cart-close:hover { background: #f3f3f3; color: #222; }

/* ── User-Info im Warenkorb ──────────────────────────────────────────── */
.cart-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px 10px;
  border-bottom: 1px solid #f0ede8;
  background: #faf8f5;
}
.cart-user-name {
  font-size: 0.85rem;
  color: #5a4a3a;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.cart-logout-btn {
  font-size: 0.78rem;
  color: #8b5e3c;
  background: none;
  border: 1px solid #c9a97a;
  border-radius: 20px;
  padding: 3px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.cart-logout-btn:hover {
  background: #8b5e3c;
  color: #fff;
}

/* ── Produktzeilen ───────────────────────────────────────────── */
.cart-products {
  padding: 20px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-product {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid #eee;
  background: #faf9f6;
  transition: border-color 0.2s, background 0.2s;
}
.cart-product.in-cart {
  border-color: #2d5a27;
  background: #f0f7ee;
}
.cp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: #2d2d2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-price {
  font-size: 0.82rem;
  color: #888;
}
.cp-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qty-btn {
  background: #fff;
  border: 1.5px solid #ddd;
  color: #333;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.qty-btn:hover { border-color: #2d5a27; background: #f0f7ee; }
.qty-val {
  font-size: 1rem;
  font-weight: 600;
  color: #2d5a27;
  min-width: 22px;
  text-align: center;
}
.cp-subtotal {
  font-size: 0.88rem;
  font-weight: 600;
  color: #c9a84c;
  min-width: 64px;
  text-align: right;
}

/* ── Gesamt ─────────────────────────────────────────────────── */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 2px solid #eee;
  border-bottom: 1px solid #eee;
  background: #faf9f6;
  font-weight: 600;
  font-size: 1rem;
  color: #2d2d2d;
}
.cart-total-val {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  color: #2d5a27;
}

/* ── Checkout-Form ───────────────────────────────────────────── */
.cart-form-wrap { padding: 0 24px 32px; }
.cart-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #ddd, transparent);
  margin: 20px 0 20px;
}
.cf-group {
  margin-bottom: 14px;
}
.cf-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: #444;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cf-optional { font-weight: 400; color: #999; text-transform: none; letter-spacing: 0; }
.cf-group input,
.cf-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.94rem;
  font-family: 'Inter', sans-serif;
  color: #222;
  background: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.cf-group input:focus,
.cf-group select:focus {
  outline: none;
  border-color: #2d5a27;
  box-shadow: 0 0 0 3px rgba(45,90,39,0.12);
}
.cf-msg {
  font-size: 0.88rem;
  min-height: 20px;
  margin-bottom: 12px;
  padding: 0;
}
.cf-msg.error { color: #c0392b; }
.cf-msg.success { color: #2d5a27; }

.btn-checkout {
  width: 100%;
  padding: 14px 20px;
  background: #2d5a27;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, transform 0.1s;
  font-family: 'Inter', sans-serif;
}
.btn-checkout:hover { background: #1e3d1a; }
.btn-checkout:active { transform: scale(0.98); }
.btn-checkout:disabled { opacity: 0.65; cursor: not-allowed; }
.cf-note {
  font-size: 0.8rem;
  color: #999;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.5;
}

/* ── Leerer Warenkorb ────────────────────────────────────────── */
.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 32px;
  color: #aaa;
  text-align: center;
}
.cart-empty p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #aaa;
}
.cart-empty strong { color: #c9a84c; }

/* ── Bestellt-Banner ────────────────────────────────────────── */
.bestellt-banner {
  position: fixed;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: min(560px, calc(100vw - 32px));
}
.bestellt-banner.visible { bottom: 24px; }
.bestellt-inner {
  background: #fff;
  border: 2px solid #2d5a27;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.bestellt-inner strong {
  display: block;
  color: #2d5a27;
  font-size: 0.98rem;
  margin-bottom: 3px;
}
.bestellt-inner p {
  font-size: 0.86rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}
.bestellt-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Bestell-Section CTA ────────────────────────────────────── */
.bestell-cta-wrap {
  text-align: center;
  padding: 32px 0 40px;
}
.bestell-cta-wrap .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  padding: 16px 32px;
}

/* ── Bestell-Info-Cards ──────────────────────────────────────── */
.bestell-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.info-card {
  background: var(--cream);
  border-radius: 12px;
  padding: 20px;
  border-top: 3px solid var(--gold);
}
.info-card h4 {
  font-family: 'DM Serif Display', serif;
  font-size: 0.95rem;
  color: var(--green);
  margin-bottom: 8px;
}
.info-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.info-card a { color: var(--green); text-decoration: none; }
.info-card a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .bestell-info { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .bestell-info { grid-template-columns: 1fr; }
  .cart-sidebar { width: 100vw; }
  .cart-product { grid-template-columns: 1fr; gap: 8px; }
  .cp-subtotal { text-align: left; }
}

/* Admin-Link — versteckt im Footer */
.admin-secret-link {
  position: absolute;
  bottom: 10px;
  right: 14px;
  color: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  transition: color 0.3s ease;
  text-decoration: none;
  z-index: 1;
}
.admin-secret-link:hover {
  color: rgba(255,255,255,0.35);
}

/* ── Mobile Menu Overlay (separates Element im body) ─────────────────────── */
#mobileMenu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(26,26,24,0.97);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  overflow-y: auto;
  padding: 80px 24px 40px;
}
#mobileMenu.open { display: flex; }
#mobileMenu a {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--white) !important;
  font-family: var(--font-serif);
  text-decoration: none;
  transition: color var(--transition);
}
#mobileMenu a:hover { color: var(--gold-light) !important; }
#mobileMenuClose {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Ausverkauft (Stock=0) ─────────────────────────────────────────────────── */
/* La Mano Personalisierung */
.cp-personalization {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.cp-pers-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.cp-pers-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.cp-pers-input:focus {
  border-color: var(--primary);
}
.cp-pers-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.75;
}

.cart-product.out-of-stock {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
.cart-product.out-of-stock::after {
  content: 'Ausverkauft';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sold-out-badge {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
}
.produkt-card .btn-outline.btn-sm:disabled,
.produkt-card .btn-primary.btn-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── AGB Checkbox ─────────────────────────────────────────────────────────── */
.cf-agb { margin-top: 4px; }
.cf-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.5;
}
.cf-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--dark-green, #2d5a27);
  cursor: pointer;
}
.cf-checkbox-label a {
  color: #2d5a27;
  text-decoration: underline;
}


/* ============================================================
   PISTOR EXKLUSIV
   ============================================================ */
#pistor-exklusiv {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(135deg, #0d1f0b 0%, #1a3316 45%, #0f1a0d 100%);
  overflow: hidden;
}
.pistor-bg {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 C30 5 18 20 18 30 C18 36.6 23.4 42 30 42 C36.6 42 42 36.6 42 30 C42 20 30 5 30 5Z' fill='%23c9a84c' fill-opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.7;
}
.pistor-top-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.pistor-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 60px;
  align-items: center;
}
.pistor-left {
  display: flex; flex-direction: column; gap: 20px;
}
.pistor-seal {
  width: 110px; height: 110px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; position: relative;
}
.pistor-seal::before {
  content: '';
  position: absolute; inset: 7px;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 50%;
}
.pistor-seal-text {
  font-family: var(--font-serif);
  font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); text-align: center; line-height: 1.4;
}
.pistor-eyebrow {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.pistor-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700; line-height: 1.15;
  color: var(--white);
}
.pistor-title em { color: var(--gold); font-style: italic; }
.pistor-text {
  color: rgba(255,255,255,0.72);
  font-size: 0.975rem; line-height: 1.8;
}
.pistor-text strong { color: var(--white); }
.pistor-divider {
  width: 1px; align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.pistor-tags {
  display: flex; flex-direction: column; gap: 14px;
}
.pistor-tag {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px;
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 8px;
}
.pistor-tag-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  background: rgba(201,168,76,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.pistor-tag-content strong {
  color: var(--white); font-size: 0.875rem;
  display: block; margin-bottom: 3px;
}
.pistor-tag-content span {
  color: rgba(255,255,255,0.5); font-size: 0.78rem;
}

@media (max-width: 768px) {
  #pistor-exklusiv { padding: 64px 0; }
  .pistor-inner { grid-template-columns: 1fr; gap: 40px; }
  .pistor-divider { display: none; }
}


/* ============================================================
   LA STORIA (Storytelling C)
   ============================================================ */
#la-storia {
  position: relative;
  padding: 120px 0;
  background: var(--dark);
  overflow: hidden;
}
.storia-bg-img {
  position: absolute; inset: 0;
  background: url('img/baum-reihe.jpg') center/cover no-repeat;
  opacity: 0.08;
  filter: grayscale(40%);
}
.storia-inner {
  position: relative; z-index: 1;
  max-width: 820px; margin: 0 auto;
  text-align: center;
}
.storia-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 52px;
}
.storia-line {
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--gold); opacity: 0.45;
}
.storia-zitat-wrap { margin-bottom: 56px; }
.storia-virgolette {
  display: block;
  font-family: var(--font-serif);
  font-size: 5rem; line-height: 0.6;
  color: var(--gold); opacity: 0.35;
  margin-bottom: 10px;
}
.storia-zitat-it {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-style: italic; font-weight: 400;
  color: rgba(255,255,255,0.42);
  margin-bottom: 10px; letter-spacing: 0.01em;
}
.storia-zitat-de {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 600; line-height: 1.35;
  color: var(--white); margin-bottom: 20px;
}
.storia-zitat-de em { color: var(--gold); font-style: italic; }
.storia-attrib {
  font-size: 0.78rem; color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.storia-text-block {
  max-width: 640px; margin: 0 auto 72px;
  text-align: left;
}
.storia-text-block p {
  font-size: 1rem; line-height: 1.9;
  color: rgba(255,255,255,0.62);
  margin-bottom: 16px;
}
.storia-text-block p:last-child { margin-bottom: 0; }
.storia-text-block strong { color: rgba(255,255,255,0.9); }
.storia-fakten {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(201,168,76,0.15);
}
.storia-fakt {
  padding: 36px 20px; text-align: center;
}
.storia-fakt-mid {
  border-left: 1px solid rgba(201,168,76,0.15);
  border-right: 1px solid rgba(201,168,76,0.15);
}
.storia-fakt-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem; font-weight: 700;
  color: var(--gold); margin-bottom: 10px;
}
.storia-fakt-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em; line-height: 1.6;
}

@media (max-width: 600px) {
  #la-storia { padding: 80px 0; }
  .storia-fakten { grid-template-columns: 1fr; }
  .storia-fakt-mid { border-left: none; border-right: none; border-top: 1px solid rgba(201,168,76,0.15); border-bottom: 1px solid rgba(201,168,76,0.15); }
}


/* ============================================================
   HERO ANIMATIONEN
   ============================================================ */

/* Ken Burns im Video eingebacken; Fallback-Bild bekommt CSS-Animation */
.hero-img-fallback {
  animation: kenBurnsFallback 16s ease-in-out infinite !important;
  transform-origin: center 40%;
}
@keyframes kenBurnsFallback {
  0%   { transform: scale(1.0)  translateY(0px);   }
  50%  { transform: scale(1.08) translateY(-10px); }
  100% { transform: scale(1.0)  translateY(0px);   }
}

/* Parallax-Overlay: wird per JS gesteuert */
.hero-overlay {
  transition: background 0.1s linear;
}

/* Entrance Animationen für Hero-Elemente */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-anim {
  opacity: 0;
  animation: fadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d, 0ms) + 200ms);
}

/* Scroll-Down Pfeil: erscheint verzögert */
.scroll-down {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: 900ms;
}

/* USP-Karten: beim Scrollen ins Bild reinkommen */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.usp.is-visible {
  animation: fadeInScale 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.usp {
  opacity: 0;
}
/* Produkt-Karten: beim Scrollen reinkommen */
.produkt-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.produkt-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none; transform: none; }
  video.hero-img { animation: none; }
  .hero-anim { animation: none; opacity: 1; }
  .scroll-down { animation: none; opacity: 1; }
  .usp { opacity: 1; }
  .usp.is-visible { animation: none; }
  .produkt-card { opacity: 1; transform: none; transition: none; }
}

/* ── Warum-wir Sektion ──────────────────────────────────────────────── */
.warum-section {
  background: #f5f1ea;
  padding: 80px 0;
}
.warum-section h2 {
  text-align: center;
  margin-bottom: 12px;
}
.warum-section .section-sub {
  text-align: center;
  margin-bottom: 48px;
}
.warum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px) {
  .warum-grid { grid-template-columns: 1fr; }
}
.warum-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid #e8e0d4;
}
.warum-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.warum-card h3 {
  font-size: 1.1rem;
  color: #2d2d2d;
  margin-bottom: 8px;
}
.warum-card p {
  font-size: 0.92rem;
  color: #5a4a3a;
  line-height: 1.7;
}

/* ── Nachhaltigkeit ─────────────────────────────────────────────── */
.nachhaltigkeit-section {
  background: #eef3ec;
  padding: 80px 0;
}
.nachhaltigkeit-section h2 {
  text-align: center;
  margin-bottom: 12px;
}
.nachhaltigkeit-section .section-sub {
  text-align: center;
  margin-bottom: 48px;
  color: #4a5c48;
}
.nach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 640px) {
  .nach-grid { grid-template-columns: 1fr; }
}
.nach-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid #c8d8c4;
}
.nach-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.nach-card h3 {
  font-size: 1.1rem;
  color: #2d2d2d;
  margin-bottom: 8px;
}
.nach-card p {
  font-size: 0.92rem;
  color: #4a5c48;
  line-height: 1.7;
}

/* ── Gast-Banner ──────────────────────────────────────────────────────── */
#gast-banner {
  background: #2d4a2d;
  color: #f0ead8;
  padding: 12px 24px;
  text-align: center;
}
.gast-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto;
}
.gast-banner-icon { font-size: 1.1rem; }
.gast-banner-text {
  font-size: 0.88rem;
  line-height: 1.5;
}
.gast-banner-text a {
  color: #c9a84c;
  text-decoration: underline;
  font-weight: 600;
}
.gast-banner-text a:hover { color: #e0c070; }

/* ── Famiglia-Exklusiv Sektion ──────────────────────────────────────── */
.famiglia-section {
  position: relative;
  background: #1a2e1a;
  color: #f0ead8;
  overflow: hidden;
}
.famiglia-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a2e1a 0%, #2d4a2d 60%, #1f3b1f 100%);
  z-index: 0;
}
.famiglia-section .container { position: relative; z-index: 1; }
.famiglia-section .pistor-inner { color: #f0ead8; }
.famiglia-section .pistor-eyebrow { color: #c9a84c; }
.famiglia-section .pistor-title { color: #f0ead8; }
.famiglia-section .pistor-title em { color: #c9a84c; font-style: italic; }
.famiglia-section .pistor-text { color: #d4c9b0; }
.famiglia-section .pistor-seal { border-color: #c9a84c55; }
.famiglia-section .pistor-seal-text { color: #c9a84c; }
.famiglia-section .pistor-divider { background: #3a5a3a; }
.famiglia-section .pistor-tag { background: #22382200; border-color: #3a5a3a; }
.famiglia-section .pistor-tag strong { color: #f0ead8; }
.famiglia-section .pistor-tag span { color: #a0b89a; }
.famiglia-section .pistor-top-line { background: #c9a84c; }

/* ══════════════════════════════════════════════════════════
   LA MANO SEKTION
══════════════════════════════════════════════════════════ */
.la-mano-section {
  padding: 80px 0;
  background: var(--bg-alt);
}
.la-mano-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.la-mano-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.la-mano-text h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  font-family: var(--font-serif, Georgia, serif);
}
.la-mano-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}
.la-mano-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.la-mano-features li {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-left: 20px;
  position: relative;
}
.la-mano-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.la-mano-varianten {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.la-mano-variant {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.la-mano-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.la-mano-variant-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.la-mano-preis {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Visual */
.la-mano-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.la-mano-video-wrap {
  width: 280px;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  background: #111;
}
.la-mano-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.la-mano-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.lm-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}
.lm-thumb.active, .lm-thumb:hover {
  opacity: 1;
  border-color: var(--primary);
}
@media (max-width: 768px) {
  .la-mano-video-wrap { width: 240px; }
}
.la-mano-caption {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.7;
  text-align: center;
  font-style: italic;
}

/* Mobile */
@media (max-width: 768px) {
  .la-mano-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .la-mano-visual {
    order: -1;
  }
  .la-mano-icon-wrap {
    width: 140px;
    height: 180px;
  }
}

/* ═══ NEU-BANNER ════════════════════════════════════════════════ */
.neu-banner {
  position: relative;
  background: #1a1a18;
  border-bottom: 1px solid rgba(196,164,100,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 48px 10px 16px;
  z-index: 200;
}
.neu-banner-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-wrap: wrap;
  justify-content: center;
}
.neu-badge {
  background: var(--primary, #c4a464);
  color: #1a1a18;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.neu-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.01em;
}
.neu-arrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--primary, #c4a464);
  font-weight: 500;
  white-space: nowrap;
}
.neu-close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  transition: color 0.2s;
}
.neu-close:hover { color: #fff; }
.neu-banner.hidden { display: none; }

@media (max-width: 600px) {
  .neu-banner { padding: 8px 40px 8px 12px; }
  .neu-text { font-size: 0.72rem; }
  .neu-arrow { font-size: 0.72rem; }
  .neu-badge { font-size: 0.6rem; padding: 2px 6px; }
}

/* ── SPRACHUMSCHALTER ─────────────────────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}
.lang-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted, #888);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.lang-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.lang-btn.active {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 45,90,39), 0.07);
}

/* ── KUNDENBEWERTUNGEN ────────────────────────────────────────────────────── */
.reviews-section {
  background: var(--cream, #f7f3ed);
  padding: 80px 0;
}
.reviews-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.reviews-header {
  text-align: center;
  margin-bottom: 48px;
}
.reviews-sub {
  color: var(--text-muted, #888);
  font-size: 1rem;
  margin-top: 8px;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.review-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.review-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}
.review-stars {
  color: var(--gold, #c4a464);
  font-size: 1rem;
  letter-spacing: 2px;
}
/* Collapsed: Text-Wrapper fixe Höhe + Fade */
.review-text-wrap {
  position: relative;
  overflow: hidden;
  max-height: 72px;   /* ca. 3 Zeilen */
  transition: max-height 0.35s ease;
}
.review-text-wrap.expanded {
  max-height: 600px;  /* gross genug für jeden Text */
}
/* Fade-Overlay unten */
.review-text-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(transparent, #fff);
  transition: opacity 0.25s;
  pointer-events: none;
}
.review-text-wrap.expanded::after {
  opacity: 0;
}
.review-text-wrap.no-fade::after {
  display: none;
}
.review-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text, #222);
  font-style: italic;
  margin: 0;
}
.review-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green, #3a5c2e);
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.02em;
  margin-top: 2px;
  align-self: flex-start;
}
.review-toggle-btn:hover { text-decoration: underline; }
.review-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border, #eee);
  padding-top: 10px;
  margin-top: 4px;
}
.review-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text, #222);
}
.review-location {
  font-size: 0.77rem;
  color: var(--text-muted, #888);
}
@media (max-width: 600px) {
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .review-card {
    padding: 16px 16px 12px;
  }
  .lang-switcher { display: none; } /* Mobile: Sprache im Burger-Menu */
}

/* ── BEWERTUNGSFORMULAR ───────────────────────────────────────────────────── */
.review-form-wrap {
  margin-top: 48px;
  text-align: center;
}
.review-form-toggle {
  font-size: 0.95rem;
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  padding: 12px 32px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.review-form-toggle:hover {
  background: var(--green);
  color: #fff;
}
.review-form {
  max-width: 560px;
  margin: 24px auto 0;
  text-align: left;
  background: #fff;
  border-radius: 12px;
  padding: 28px 28px 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rf-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.rf-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.rf-group input,
.rf-group textarea {
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: #fafafa;
  resize: vertical;
  transition: border-color 0.2s;
}
.rf-group input:focus,
.rf-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}
.rf-counter {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  text-align: right;
  margin-top: -12px;
}
.star-picker {
  display: flex;
  gap: 4px;
  font-size: 1.8rem;
  cursor: pointer;
}
.star-picker .star {
  color: var(--border, #ddd);
  transition: color 0.15s;
  user-select: none;
}
.star-picker .star.active,
.star-picker .star:hover {
  color: var(--gold, #c4a464);
}
.rf-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.rf-msg.success { background: #f0faf0; color: #2d7a2d; border: 1px solid #b2dfb2; }
.rf-msg.error   { background: #fff0f0; color: #c0392b; border: 1px solid #f5c6c6; }
.rf-hint {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  margin-top: 8px;
  text-align: center;
}
@media (max-width: 500px) {
  .review-form-grid { grid-template-columns: 1fr; }
  .review-form { padding: 20px 16px; }
}