/*
 * demo.css — nur für das statische HTML-Abbild (lilith-beispiel).
 * Kleine Anpassungen, weil die Produktfotos freigestellte PNGs sind und ein
 * paar Demo-Sektionen (Löwenzahn-Band, Timeline) hinzukommen. Das echte Theme
 * braucht diese Datei nicht.
 * ==========================================================================*/

/* — Logo im Header/Footer — */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: clamp(42px, 5vw, 58px); width: auto; }
.footer-brand .site-logo img { height: 64px; }

/* — Freigestellte Produkt-PNGs: einpassen statt beschneiden — */
.media-contain { background: radial-gradient(120% 120% at 50% 30%, var(--c-gold-soft) 0%, var(--c-cream-2) 70%); }
.media-contain img { object-fit: contain !important; padding: 10% 14%; mix-blend-mode: multiply; }

/* Hero-Produkt als freigestelltes Glas (kein Foto-Crop) */
.hero__product.media-contain { box-shadow: var(--shadow-lg); }
.hero__product.media-contain img { padding: 8% 10%; mix-blend-mode: normal; }

/* Einzelprodukt-Galerie */
.demo-gallery {
  background: radial-gradient(120% 120% at 50% 30%, var(--c-gold-soft), var(--c-cream-2) 72%);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.demo-gallery img { width: 78%; height: auto; mix-blend-mode: multiply; }

/* — Löwenzahn-Markenband (Vollbreite) — */
.brand-band {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--c-forest);
  background-image:
    linear-gradient(180deg, rgba(35,47,27,0.55), rgba(35,47,27,0.70)),
    url("../img/hintergrund-loewenzahn.jpg");
  background-size: cover;
  background-position: center 60%;
  text-align: center;
  color: var(--c-cream);
}
.brand-band__inner { max-width: 720px; margin-inline: auto; position: relative; z-index: 1; }
.brand-band h2 {
  color: var(--c-cream);
  font-size: var(--fs-2xl);
  font-style: italic;
}
.brand-band p { color: var(--c-footer-ink); margin-inline: auto; font-size: var(--fs-md); }

/* — Vertikale Timeline (Über uns) — */
.timeline { position: relative; max-width: 760px; margin: var(--space-lg) auto 0; padding-left: 2rem; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--c-gold), var(--c-line));
}
.timeline__item { position: relative; padding: 0 0 var(--space-lg) 1.4rem; }
.timeline__item::before {
  content: ""; position: absolute; left: -1.45rem; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-gold); border: 3px solid var(--c-cream); box-shadow: 0 0 0 1px var(--c-line);
}
.timeline__year { font-family: var(--font-display); font-weight: 600; color: var(--c-forest); font-size: var(--fs-md); }
.timeline__item p { color: var(--muted); font-size: var(--fs-sm); margin-top: 0.2em; }

/* — Nummerierte Herstellungsschritte (Ghee) — */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: step; }
.steps li {
  position: relative; padding: var(--space-sm) var(--space-sm) var(--space-sm) 3.6rem;
  background: var(--c-paper); border: 1px solid var(--c-line-soft); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); color: var(--muted); font-size: var(--fs-sm);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-gold); color: var(--c-espresso); font-family: var(--font-display); font-weight: 600;
}

/* — Zutaten/Schritte im Rezept — */
.recipe-cols { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
@media (max-width: 720px){ .recipe-cols { grid-template-columns: 1fr; } }
.ingredients { background: var(--c-paper); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); padding: var(--space-md); box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + 1rem); }
.ingredients h3 { margin-bottom: var(--space-sm); }
.ingredients ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.ingredients li { display: flex; gap: 0.6em; align-items: baseline; font-size: var(--fs-sm); border-bottom: 1px dashed var(--c-line-soft); padding-bottom: 0.5em; }
.ingredients li .amt { color: var(--c-forest); font-weight: 700; min-width: 5.5em; }

/* — Mini-Cart Demo-Inhalt — */
.mini-cart-panel .demo-line { display:flex; gap:.7em; padding:.6em 0; border-bottom:1px solid var(--c-line-soft); align-items:center; }
.mini-cart-panel .demo-line img { width:46px; height:46px; object-fit:contain; border-radius:var(--r-sm); background:var(--c-cream-2); }
.mini-cart-panel .demo-total { display:flex; justify-content:space-between; padding:.7em 0; font-weight:700; }

/* — kleine Demo-Notiz-Fahne unten rechts — */
.demo-flag {
  position: fixed; right: 14px; bottom: 14px; z-index: 200;
  background: var(--c-espresso); color: var(--c-cream);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em;
  padding: .5em .9em; border-radius: var(--r-pill); box-shadow: var(--shadow-md);
  opacity: .85;
}
.demo-flag a { color: var(--c-gold-soft); text-decoration: underline; }

/* Karten-Bild für freigestellte Produkte in Teaser/Shop */
.card__media.media-contain { aspect-ratio: 1 / 1; }