/* ============================================================
   foodmarketing.de · site-v9 · liegt ueber v8.css
   Hero ohne Film: das PDF-Cover steht, drei echte Ideen aus dem
   Guide springen beim Laden seitlich heraus. Ohne JS und mit
   reduzierter Bewegung liegen die Karten gleich an ihrem Platz.
   ============================================================ */

/* ---------- Hero: mehr Luft zwischen Text und Buch ---------- */
@media (min-width: 53.8125rem) {
  .hero__grid { column-gap: clamp(3rem, 6vw, 6rem); }
  /* Buch an den rechten Rand der Spalte, rechts bleibt Platz fuer Karte 2 */
  .hero .cover-stage { justify-items: end; padding-right: clamp(0rem, 2vw, 2rem); }
  .hero .cover-frame { width: min(100%, 21.875rem); }
  .hero .tip--1 { left: -20%; }
  .hero .tip--2 { right: -22%; }
  .hero .tip--3 { left: -14%; }
}
@media (min-width: 53.8125rem) and (max-width: 87.5rem) {
  .hero .tip--2 { right: -8%; }
}
@media (min-width: 53.8125rem) and (max-width: 75rem) {
  .hero .cover-frame { width: min(100%, 16rem); }
  .hero .tip { width: 11.5rem; }
  .hero .tip--1 { width: 12rem; }
  .hero .tip q, .hero .tip--3 { display: none; }
  .hero .tip--2 { top: auto; bottom: 8%; }
}

/* ---------- Hero: Ideen-Karten am Cover ---------- */
.tips { position: absolute; inset: 0; pointer-events: none; }
.tip {
  position: absolute; margin: 0; width: 14rem; padding: .875rem 1rem 1rem;
  background: var(--paper); color: var(--ink); border-radius: .625rem;
  box-shadow: 0 1.25rem 2.5rem -1rem rgba(0,0,0,.55), 0 0 0 1px rgba(33,44,32,.06);
  font-family: var(--sans); line-height: 1.3;
  transform: rotate(var(--r, 0deg));
}
.tip small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-h); }
.tip b { display: block; margin-top: .25rem; font-size: 1rem; font-weight: 700; }
.tip q { display: block; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: .9375rem; color: var(--muted); }
.tip--1 { --r: -4deg; --fx: 55%; --fy: 20%; left: -38%; top: 12%; width: 15rem; }
.tip--2 { --r: 3deg;  --fx: -55%; --fy: 0%;  right: -36%; top: 50%; }
.tip--3 { --r: -2deg; --fx: 50%; --fy: -25%; left: -28%; bottom: 4%; }

/* Versteckt sofort (ohne Transition), sonst bleibt der Ruhezustand ohne JS waehrend der Verzoegerung stehen */
.mo .tip { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.6) rotate(0deg); }
.mo .tips.is-in .tip {
  opacity: 1; transform: rotate(var(--r, 0deg));
  transition: opacity .5s ease, transform 1s var(--ease-out);
  transition-delay: calc(650ms + var(--i, 0) * 180ms);
}

@media (max-width: 53.75rem) {
  .tip { width: 9.75rem; padding: .625rem .75rem .75rem; }
  .tip--1 { width: 10.5rem; left: -48%; top: 8%; }
  .tip--2 { right: -46%; top: auto; bottom: 6%; }
  .tip small { font-size: .6875rem; }
  .tip b { font-size: .875rem; }
  .tip q, .tip--3 { display: none; }
}
/* ---------- Ziffern-Walzen: Zeichen ohne Walze (€, Leerzeichen, %, Punkt)
   bekommen dieselbe 1,12em-Box wie die Ziffern, sonst sitzen sie tiefer ---------- */
.roll__t { display: inline-block; height: 1.12em; line-height: 1.12; white-space: pre; vertical-align: bottom; }

/* ---------- ?pace=quick: Reels-Pin 180vh statt 260vh ---------- */
@media (min-width: 56.3125rem) {
  .pace-quick .reels.is-pinned .reels__pin { height: 180vh; }
}

@media print { .tips { display: none !important; } }