/* =============================================================
   04 – VIER ZUTATEN (Qualitätsversprechen)
   Freigestellte Zutaten-Bilder – ohne Rahmen/Kachel, frei auf dem
   Sektions-Hintergrund. Titel groß in dunklem Beige, Text darunter.
   Vertikaler Zickzack-Versatz + gestaffelte Entrance-Animation.
   Hover: Bild dreht sich leicht + wird etwas größer.
   ============================================================= */

.zutaten__grid { margin-top: clamp(3.4rem, 6.75vw, 5.2rem); }

.zutat {
  text-align: center;
  --zt-offset: 0rem;   /* vertikaler Versatz, pro Spalte gesetzt (s. u.) */
}

/* Reiner Platzhalter für gleiche Bildhöhe – keine Fläche/Kontur */
.zutat__img {
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
  display: grid;
  place-items: center;
}

/* Senkrechte Verbindungslinie Bild → Titel, zu beiden Enden ausblassend */
.zutat__line {
  display: block;
  width: 2px;
  height: clamp(2.2rem, 4vw, 3.6rem);
  margin: clamp(0.4rem, 1.1vw, 0.8rem) auto clamp(0.5rem, 1.3vw, 0.9rem);
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(140, 115, 85, 0.7) 24%,
      rgba(140, 115, 85, 0.7) 76%,
      transparent 100%);
}
.zutat__img img {
  width: 100%; height: 100%; object-fit: contain;
  /* dezenter Schatten erdet das freigestellte Motiv auf der Fläche */
  filter: drop-shadow(0 14px 24px rgba(0, 20, 45, 0.18));
  -webkit-user-drag: none;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

/* Bildgrößen je Zutat: Hopfen & Gerste −25 %, Wasser & Zeit −30 % */
.zutat:nth-child(1) .zutat__img img,
.zutat:nth-child(2) .zutat__img img { width: 75%; height: 75%; }
.zutat:nth-child(3) .zutat__img img,
.zutat:nth-child(4) .zutat__img img { width: 70%; height: 70%; }

/* Hover: Bild leicht drehen + vergrößern */
.zutat:hover .zutat__img img { transform: rotate(-4deg) scale(1.09); }

/* Titel als Kästchen mit invertierten (konkaven) Ecken – Beige-Fläche, weiße Schrift */
.zutat h3 {
  --box-r: 12px;                        /* Radius der konkaven Ecken */
  display: inline-block;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  background: #8C7355;                  /* dunkler Beige-/Malz-Ton */
  padding: 0.5em 0.9em 0.55em;
  margin-bottom: 0.55rem;
  -webkit-mask:
    radial-gradient(circle var(--box-r) at top left,     #0000 98%, #000) top left,
    radial-gradient(circle var(--box-r) at top right,    #0000 98%, #000) top right,
    radial-gradient(circle var(--box-r) at bottom left,  #0000 98%, #000) bottom left,
    radial-gradient(circle var(--box-r) at bottom right, #0000 98%, #000) bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  mask:
    radial-gradient(circle var(--box-r) at top left,     #0000 98%, #000) top left,
    radial-gradient(circle var(--box-r) at top right,    #0000 98%, #000) top right,
    radial-gradient(circle var(--box-r) at bottom left,  #0000 98%, #000) bottom left,
    radial-gradient(circle var(--box-r) at bottom right, #0000 98%, #000) bottom right;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}
.zutat p { color: var(--c-ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }

/* ---- Vertikaler Versatz (Zickzack) – nur wenn alle vier in einer Reihe ---- */
@media (min-width: 901px) {
  .zutat:nth-child(odd)  { --zt-offset: calc(-1 * clamp(1.2rem, 2.6vw, 2.3rem)); } /* etwas höher */
  .zutat:nth-child(even) { --zt-offset: clamp(1.2rem, 2.6vw, 2.3rem); }            /* etwas tiefer */
  /* Die tiefer gesetzten (geraden) Spalten ragen unter das Raster hinaus und
     würden sonst den unteren Sektions-Abstand verkleinern → ausgleichen. */
  .zutaten__grid { margin-bottom: clamp(1.2rem, 2.6vw, 2.3rem); }
}

/* ---- Entrance-Animation: einfaden + aufsteigen + leichter Pop ----
   Landet auf dem jeweiligen Versatz. Staffelung der Startzeit via
   IntersectionObserver in js/main.js (transition-delay je Element). */
.zutat.reveal {
  opacity: 0;
  transform: translateY(calc(var(--zt-offset) + 40px)) scale(0.92);
}
.zutat.reveal.is-visible {
  opacity: 1;
  transform: translateY(var(--zt-offset)) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .zutat:hover .zutat__img img { transform: none; }
  /* keine Bewegung: direkt am Versatz zeigen */
  .zutat.reveal,
  .zutat.reveal.is-visible { opacity: 1; transform: translateY(var(--zt-offset)); }
}