/* ============================================================
   foodmarketing.de · site-v10 · "plus": kleine Zusatz-Animationen
   In A und B (seit 03.11. freigegeben). Alles haengt an
   html.mo (setzt motion.js, nur ohne prefers-reduced-motion) und an
   .is-in (setzt plus.js, sobald ein Element ins Bild kommt).
   Ohne JS oder mit reduzierter Bewegung bleibt die ruhige Fassung.
   ============================================================ */

/* ---------- Hero: Badge springt herein, Akzent wird unterstrichen (Cover steht still, Andrew 03.11.) ---------- */
.mo .hero .cover-badge { animation: plus-pop .7s cubic-bezier(.3,1.6,.5,1) 1.1s both; }
@keyframes plus-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.mo .hero .accent { position: relative; display: inline-block; }
.mo .hero .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .08em; border-radius: 1em;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  animation: plus-draw .9s cubic-bezier(.6,0,.2,1) 1.25s forwards;
}
@keyframes plus-draw { to { transform: scaleX(1); } }

/* ---------- Benefits: nacheinander herein, gruene Kante zieht sich von links auf ---------- */
.mo .benefit { position: relative; border-top-color: transparent; opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .3s; transition-delay: calc(var(--k, 0) * 110ms); }
.mo .benefit::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -4px; height: 4px; border-radius: .75rem .75rem 0 0;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .8s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--k, 0) * 110ms + 250ms);
}
.mo .benefit.is-in { opacity: 1; transform: none; }
.mo .benefit.is-in::before { transform: scaleX(1); }
.mo .benefit.is-in:hover { transform: translateY(-4px); box-shadow: 0 1.25rem 2rem -1.5rem rgba(26,36,25,.35); transition-delay: 0s; }

/* ---------- Themenfelder: Zeilen gleiten herein, Balken zeigt die Ideenzahl ---------- */
.mo .topic { position: relative; opacity: 0; transform: translateX(-18px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), background-color .25s; transition-delay: calc(var(--k, 0) * 80ms); }
.mo .topic.is-in { opacity: 1; transform: none; }
.mo .topic::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--share, 0) * 100%);
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--k, 0) * 80ms + 300ms);
}
.mo .topic.is-in::after { transform: scaleX(1); }
.mo .topic:hover { background-color: rgba(46,125,74,.06); transition-delay: 0s; }
.mo .topic .topic__n { transition: transform .25s; display: inline-block; }
.mo .topic:hover .topic__n { transform: translateX(4px); }

/* ---------- Beispielseite: legt sich gerade, Textmarker ueber den Hook ---------- */
.mo .page-sample__link { position: relative; transform: rotate(-2.5deg) translateY(16px);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.mo .page-sample.is-in .page-sample__link { transform: none; }
.mo .page-sample.is-in .page-sample__link:hover { transform: translateY(-4px) rotate(.4deg); }
/* Hook-Zitat im Bild: y 355..385 von 684, x 196..547 von 900 */
.mo .page-sample__mark {
  position: absolute; left: 21.8%; top: 51.9%; width: 39%; height: 4.4%;
  background: rgba(168, 222, 120, .45); border-radius: .2em; mix-blend-mode: multiply; pointer-events: none;
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.6,0,.2,1) 1s;
}
.mo .page-sample.is-in .page-sample__mark { transform: scaleX(1); }

/* ---------- Logos: nacheinander ---------- */
.mo .logos__row > * { transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--k, 0) * 90ms); }
.mo .logos__row:not(.is-in) > * { opacity: 0; transform: translateY(10px); }

/* ---------- Formular: Felder nacheinander, Button mit einem Lichtstreif ---------- */
.mo #guide-form [data-form-fields] > * { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--k, 0) * 70ms); }
.mo #guide-form.is-in [data-form-fields] > * { opacity: 1; transform: none; }
.mo #guide-form button[type=submit] { position: relative; overflow: hidden; }
.mo #guide-form button[type=submit]::after {
  content: ""; position: absolute; inset: 0 auto 0 -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.mo #guide-form.is-in button[type=submit]::after { animation: plus-shine 1.2s ease 1s; }
.mo #guide-form button[type=submit]:hover::after { animation: plus-shine .9s ease; }
@keyframes plus-shine { 0% { left: -40%; opacity: 1; } 100% { left: 120%; opacity: 1; } }

/* Druck und QA-Modus: alles sichtbar */
@media print { .mo .benefit, .mo .topic, .mo .logos__row > *, .mo #guide-form [data-form-fields] > * { opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   Benefits "Zitate mit Akzent" (Option 9 aus review/mocks/benefits-10-options.png)
   ===================================================================== */
.bx { list-style: none; margin: 0; padding: 0; }
.bx--quote p { margin: .5rem 0 0; color: var(--muted); font-size: var(--fs-body-s); line-height: 1.55; }
/* 9: Zitate mit Akzent, gruene Unterstreichung, keine Kaesten */
.bx--quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4.5rem); }
.bx--quote li { padding: clamp(1.25rem, 2.4vw, 2rem) 0; border-top: 1px solid var(--rule); }
.bx--quote .benefit__h { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; }
.bx--quote u {
  text-decoration: none; background: linear-gradient(var(--green), var(--green)) no-repeat 0 100% / 100% .14em;
  padding-bottom: .06em;
}
.mo .bx--quote u { background-size: 0 .14em; transition: background-size .9s cubic-bezier(.6,0,.2,1) .3s; }
.mo .bx--quote li.is-in u { background-size: 100% .14em; }
@media (max-width: 48rem) { .bx--quote { grid-template-columns: minmax(0, 1fr); } }

/* Auftauchen nacheinander */
.mo .bx li { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--k, 0) * 110ms); }
.mo .bx li.is-in { opacity: 1; transform: none; }

/* =====================================================================
   Einblick Option 6 "Ein Stapel Ideen": zwei echte Guide-Seiten liegen
   versetzt hinter der Beispielseite (aus review/mocks/einblick-8-options.png)
   ===================================================================== */
.page-sample { --gap-stack: clamp(1.25rem, 3vw, 2.25rem); padding: var(--gap-stack) var(--gap-stack) 0 0; }
.page-sample__link { position: relative; z-index: 2; }
.stack__p {
  position: absolute; inset: 0; z-index: -1; border-radius: .5rem; overflow: hidden; background: #fff;
  border: 1px solid var(--rule); box-shadow: 0 1rem 2rem -1.5rem rgba(26,36,25,.4);
}
.stack__p img { width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.stack__p--1 { transform: translate(calc(var(--gap-stack) * .5), calc(var(--gap-stack) * -.5)) rotate(2.2deg); }
.stack__p--2 { transform: translate(var(--gap-stack), calc(var(--gap-stack) * -1)) rotate(4.5deg); }
.stack__p::after { content: ""; position: absolute; inset: 0; background: rgba(244,241,234,.35); }
/* Aufblaettern beim Hereinkommen */
.mo .stack__p { transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .35s; }
.mo .page-sample:not(.is-in) .stack__p { transform: none; }
.mo .page-sample.is-in .page-sample__link:hover .stack__p--1 { transform: translate(calc(var(--gap-stack) * .7), calc(var(--gap-stack) * -.7)) rotate(3deg); }
.mo .page-sample.is-in .page-sample__link:hover .stack__p--2 { transform: translate(calc(var(--gap-stack) * 1.3), calc(var(--gap-stack) * -1.3)) rotate(6deg); }