/* Pizza-Effekt · Ristorante Pizzeria Italia
   Eigenständiger Abschnitt: alle Klassen beginnen mit "pzfx", nichts außerhalb wird verändert.
   Farben bei Bedarf hier anpassen. */
.pzfx {
  /* übernimmt die Farben der Website (--bg, --ink …), sonst diese Werte */
  --pzfx-bg: var(--bg, #f7f1e8);
  --pzfx-ink: var(--ink, #2f2922);
  --pzfx-muted: var(--muted, #857c6e);
  --pzfx-accent: var(--accent, #b8542e);
  --pzfx-top: 0px;          /* Höhe eines festen Headers, damit nichts darunter verschwindet */
  --pzfx-word: rgba(187, 86, 49, 0.12);
  --pzfx-card: var(--card, #ffffff);
  position: relative;
  background: var(--pzfx-bg);
  color: var(--pzfx-ink);
  font-family: inherit;
}
.pzfx *, .pzfx *::before, .pzfx *::after { box-sizing: border-box; }

/* Die Scroll-Strecke: je höher, desto langsamer läuft der Effekt */
.pzfx-track { position: relative; height: 420vh; }

/* Die Bühne bleibt stehen, während man durch die Strecke scrollt */
.pzfx-stage {
  position: sticky;
  top: var(--pzfx-top);
  height: calc(100vh - var(--pzfx-top)); height: calc(100svh - var(--pzfx-top));
  overflow: hidden;
  display: grid; place-items: center;
}

/* großes Wort im Hintergrund */
.pzfx-word {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none; user-select: none;
}
.pzfx-word span {
  grid-area: 1 / 1;
  font-size: clamp(4rem, 17vw, 16rem);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic;
  font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--pzfx-word);
  opacity: 0;
}

/* Pizza */
.pzfx-pizza {
  position: absolute; left: 50%; top: 50%;
  width: var(--pzfx-size, 60vmin); height: var(--pzfx-size, 60vmin);
  margin: calc(var(--pzfx-size, 60vmin) / -2) 0 0 calc(var(--pzfx-size, 60vmin) / -2);
  perspective: 1400px;
  will-change: transform;
}
.pzfx-disc { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.pzfx-disc img, .pzfx-plate img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.pzfx-shadow {
  position: absolute; inset: 8%;
  border-radius: 50%; background: rgba(60, 30, 15, 0.3); filter: blur(28px);
  will-change: transform, opacity;
}
.pzfx-plate {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--pzfx-size, 60vmin) * 1.32); height: calc(var(--pzfx-size, 60vmin) * 1.32);
  margin: calc(var(--pzfx-size, 60vmin) * -0.66) 0 0 calc(var(--pzfx-size, 60vmin) * -0.66);
  opacity: 0;
  filter: drop-shadow(0 18px 24px rgba(60, 30, 15, 0.18));
  will-change: transform, opacity;
}

/* fliegende Zutaten */
.pzfx-fly { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.pzfx-fly img { width: 100%; height: auto; display: block; }

/* Text zu jedem Schritt */
.pzfx-steps {
  position: absolute; left: max(16px, 5vw); top: 50%;
  width: min(25rem, 32vw);
  transform: translateY(-50%);
  display: grid;
}
.pzfx-step {
  grid-area: 1 / 1;
  opacity: 0;
  background: var(--pzfx-card);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 20px 44px rgba(42, 33, 27, 0.08);
}
.pzfx-step small {
  display: block; margin-bottom: 8px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pzfx-accent);
}
.pzfx-step h3 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 600; margin: 0 0 8px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--pzfx-ink); }
.pzfx-step p { margin: 0; color: var(--pzfx-muted); line-height: 1.55; }
.pzfx-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pzfx-btn {
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  border: 2px solid var(--pzfx-accent); color: var(--pzfx-accent);
}
.pzfx-btn.is-solid { background: var(--pzfx-accent); color: #fff; }
.pzfx-btn:focus-visible { outline: 3px solid var(--pzfx-ink); outline-offset: 3px; }

/* Fortschritt */
.pzfx-dots { position: absolute; right: max(16px, 4vw); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.pzfx-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--pzfx-ink); opacity: 0.18; }
.pzfx-dots i.is-on { background: var(--pzfx-accent); opacity: 1; }

/* Handy: Pizza oben, Text unten */
@media (max-width: 760px) {
  .pzfx-track { height: 380vh; }
  .pzfx-steps { left: 16px; right: 16px; width: auto; top: auto; bottom: max(16px, 3vh); transform: none; }
  .pzfx-step { padding: 18px 20px; }
  .pzfx-dots { right: 10px; }
}

/* ════════ Start-Effekt im Hero: Pizza fliegt ein und landet auf dem Foto ════════ */
.hfx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hfx-item { position: absolute; transform: translate(calc(var(--hfx-mx, 0) * var(--d, 10px)), calc(var(--hfx-my, 0) * var(--d, 10px))); will-change: transform; }
.hfx-item > * { display: block; width: 100%; height: auto; max-width: none; }
/* Pizza: unten links auf der Fotoecke */
.hfx-pizza { width: 58%; left: -14%; bottom: -12%; --d: 8px; }
.hfx-pizza .hfx-spin { transform: rotate(var(--hfx-rot, 0deg)); }
.hfx-pizza img { filter: drop-shadow(0 22px 26px rgba(60, 30, 15, .35)); }
.hfx-dust { position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 30% 60%, rgba(255,255,255,.95) 0 14%, transparent 34%),
              radial-gradient(circle at 70% 55%, rgba(255,252,245,.9) 0 12%, transparent 30%),
              radial-gradient(circle at 50% 75%, rgba(255,255,255,.9) 0 16%, transparent 36%),
              radial-gradient(circle at 20% 40%, rgba(250,244,232,.8) 0 8%, transparent 22%),
              radial-gradient(circle at 82% 38%, rgba(250,244,232,.8) 0 7%, transparent 20%); filter: blur(6px); }
/* Zutaten rund um die Pizza */
.hfx-basil1 { width: 15%; left: 34%; bottom: 20%; --d: 22px; }
.hfx-basil2 { width: 12%; left: -20%; bottom: 36%; --d: 30px; }
.hfx-basil3 { width: 11%; left: 40%; bottom: -14%; --d: 18px; }
.hfx-tom1   { width: 13%; left: -24%; bottom: -6%; --d: 26px; }
.hfx-tom2   { width: 11%; left: 28%; bottom: 40%; --d: 34px; }
.hfx-float { animation: hfx-bob 4.2s ease-in-out infinite; }
.hfx-basil2 .hfx-float, .hfx-tom2 .hfx-float { animation-duration: 5s; animation-delay: -1.3s; }
.hfx-basil3 .hfx-float, .hfx-tom1 .hfx-float { animation-duration: 3.6s; animation-delay: -2.1s; }

/* Ablauf, sobald <html> die Klasse hfx-go bekommt */
html.hfx-wait .hfx-pizza .hfx-drop, html.hfx-wait .hfx-pop { opacity: 0; }
html.hfx-go .hfx-pizza .hfx-drop { animation: hfx-drop 1.35s cubic-bezier(.2,.75,.25,1) both; }
html.hfx-go .hfx-dust { animation: hfx-dust 1.1s ease-out .95s backwards; }
html.hfx-go .hfx-pop { animation: hfx-pop .7s cubic-bezier(.34,1.7,.64,1) both; }
html.hfx-go .hfx-basil1 .hfx-pop { animation-delay: 1.05s; }
html.hfx-go .hfx-tom2 .hfx-pop   { animation-delay: 1.15s; }
html.hfx-go .hfx-basil2 .hfx-pop { animation-delay: 1.25s; }
html.hfx-go .hfx-tom1 .hfx-pop   { animation-delay: 1.35s; }
html.hfx-go .hfx-basil3 .hfx-pop { animation-delay: 1.45s; }
@keyframes hfx-drop {
  0%   { transform: translate(60%, -150vh) rotate(-620deg) scale(1.35); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: translate(0, 0) rotate(0deg) scale(1); }
  80%  { transform: translate(0, 0) scale(1.07, .93); }
  90%  { transform: translate(0, -3%) scale(.98, 1.02); }
  100% { transform: none; opacity: 1; }
}
@keyframes hfx-dust { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes hfx-pop  { 0% { opacity: 0; transform: translate(var(--fx0, 60%), var(--fy0, -40%)) scale(0) rotate(-120deg); } 100% { opacity: 1; transform: none; } }
@keyframes hfx-bob  { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(6deg); } }
.hfx-basil2 .hfx-pop, .hfx-tom1 .hfx-pop { --fx0: 160%; }
.hfx-basil3 .hfx-pop { --fy0: -120%; }

@media (max-width: 919px) {
  .hfx-pizza { width: 46%; left: auto; right: -2%; bottom: -10%; }
  .hfx-basil1 { left: auto; right: 38%; bottom: 14%; }
  .hfx-basil2 { left: auto; right: 2%; bottom: 34%; }
  .hfx-basil3 { left: auto; right: 22%; bottom: -12%; }
  .hfx-tom1   { left: auto; right: 44%; bottom: -8%; }
  .hfx-tom2   { left: auto; right: 4%; bottom: 24%; }
}
@media (prefers-reduced-motion: reduce) {
  html.hfx-go .hfx-pizza .hfx-drop, html.hfx-go .hfx-dust, html.hfx-go .hfx-pop, .hfx-float { animation: none; }
  html.hfx-wait .hfx-pizza .hfx-drop, html.hfx-wait .hfx-pop { opacity: 1; }
}