/* ------------------------------------------------------------------
   Icons & Illustrationen für die Materialien-Seiten (Glücksrezepte)
   Ergänzt site.css – keine bestehenden Regeln werden überschrieben.
   ------------------------------------------------------------------ */

/* Basis-Icon */
.pi {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 auto;
}

/* Icon-Medaillon: heller Kreis mit Icon darin */
.pi-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F6E9CF;                 /* Gold-Tint */
  color: var(--primary, #C0552E);
  margin-bottom: 1rem;
}
.pi-badge .pi { width: 30px; height: 30px; }

.pi-badge--forest { background: #EDF2EE; color: var(--forest, #3A5A4E); }
.pi-badge--sky    { background: #F8EAE2; color: var(--primary-d, #A2431F); }

/* Kleines Icon inline vor einer Überschrift oder in den „stufen"-Kacheln */
.stufe .pi,
.pi-inline {
  width: 26px;
  height: 26px;
  color: var(--primary, #C0552E);
  margin-bottom: .5rem;
}

/* Produktkarte: Icon oben, Kopfzeile mit Icon + Tag nebeneinander */
.produkt__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}
.produkt__head .pi-badge {
  width: 46px;
  height: 46px;
  margin-bottom: 0;
}
.produkt__head .pi-badge .pi { width: 25px; height: 25px; }
.produkt__head .produkt__tag { margin: 0; }

/* Dekorativer Zweig als Abschnittstrenner */
.pi-divider {
  display: block;
  margin: 2.5rem auto;
  width: 230px;
  height: 38px;
  color: var(--accent, #E0A43B);
  opacity: .9;
}
.pi-divider--tight { margin: 1.4rem auto 2rem; }

/* Hero-Illustration neben der Überschrift */
.hero-illu {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-illu__text { flex: 1 1 380px; min-width: 0; }
.hero-illu__art {
  flex: 0 0 190px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FBF1DE 0%, #F4E4C8 70%, #EFDBB6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #C0552E);
  box-shadow: 0 10px 34px rgba(42, 38, 34, .10);
}
.hero-illu__art .pi { width: 92px; height: 92px; }
.hero-illu__art--forest {
  background: radial-gradient(circle at 35% 30%, #F0F5F1 0%, #E1EBE4 70%, #D3E1D7 100%);
  color: var(--forest, #3A5A4E);
}

@media (max-width: 640px) {
  .hero-illu__art { flex-basis: 140px; width: 140px; height: 140px; }
  .hero-illu__art .pi { width: 68px; height: 68px; }
}

/* Merkmal-Kachel mit Icon (ersetzt die reinen Text-„stufen" auf den Shop-Seiten) */
.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.merkmal {
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(42,38,34,.12));
  border-radius: var(--radius, 16px);
  padding: 1.4rem 1.3rem;
}
.merkmal b { display: block; margin-bottom: .3rem; color: var(--ink, #2A2622); }
.merkmal span { color: var(--muted, #71665C); font-size: .95rem; line-height: 1.5; }
.merkmal .pi { width: 30px; height: 30px; color: var(--primary, #C0552E); margin-bottom: .7rem; }
.merkmal--forest .pi { color: var(--forest, #3A5A4E); }