/* ============================================================
   foodmarketing.de · site-v8 · "Der Feed als Bühne"
   Liegt ueber site.css und v6.css. Alle Ausgangszustaende fuer Bewegung
   haengen an html.mo (motion.js aktiv, keine reduzierte Bewegung).
   Ohne .mo gilt die ruhige Endfassung. html.qa schaltet Zeit-Uebergaenge
   ab, damit QA-Frames reproduzierbar sind.
   ============================================================ */

/* ---------- Grundtoene: nur Creme und Forest ---------- */
.logos { background: var(--cream); }

/* ---------- Messmodus: Sticky aus, damit offsetTop den Fluss liefert ---------- */
.measuring .kap .chapter, .measuring .kap__aside, .measuring .reels__stage, .measuring .hookband__stage { position: static !important; }

/* ---------- QA: keine Zeit-Uebergaenge ---------- */
.qa *, .qa *::before, .qa *::after { transition: none !important; animation: none !important; }

/* ---------- Story-Leiste unter dem Header ---------- */
.story {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  display: flex; gap: 3px; pointer-events: none;
  max-width: var(--maxw); margin-inline: auto; padding-inline: min(var(--pad), 8vw);
}
.story i { flex: 1; height: 100%; border-radius: 2px; background: rgba(26,36,25,.12); overflow: hidden; }
.story b { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(0); }
.story:empty { display: none; }

/* ---------- Kinetische Typo: Wortmaske, Buchstaben ---------- */
.kin { display: inline; }
.kw { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding: .1em .08em .16em; margin: -.1em -.08em -.16em; }
.kl { display: inline-block; }
/* Vom Scroll gezogen: --p 0..1 auf der Ueberschrift, Welle ueber 10 Buchstaben */
.mo [data-kin-scrub] .kl {
  --l: clamp(0, calc((var(--p, 1) * (var(--n, 20) + 10) - var(--i, 0)) / 10), 1);
  transform: translate3d(0, calc((1 - var(--l)) * (1 - var(--l)) * 112%), 0);
}
/* Hero: einmalig beim Laden, Buchstabe fuer Buchstabe */
.mo .hero .kl { transform: translate3d(0, 112%, 0); transition: transform 1.05s var(--ease-out); transition-delay: calc(120ms + var(--i, 0) * 16ms); }
.mo .hero .is-in .kl { transform: none; }
.mo .hero .accent .kw { padding-right: .18em; margin-right: -.18em; }

/* Zeit-Fades aus site.js ersetzt der Scroll-Takt */
.mo .reveal { transition: none; }
.mo .roll__s, .mo .rung::after, .mo .fan > img, .mo .scrub-w { transition: none; }

/* ---------- Feed-Wechsel ---------- */
.mo main > section, .mo .site-footer { position: relative; }
.mo .hero.swipe-under { overflow: hidden; }
.veil { position: absolute; inset: 0; z-index: 60; background: var(--deep); opacity: 0; pointer-events: none; border-radius: inherit; }
.mo .swipe-over { border-radius: 1.75rem 1.75rem 0 0; }
.mo .swipe-over::before {   /* weicher Schatten nach oben, nur waehrend des Wechsels */
  content: ''; position: absolute; left: 0; right: 0; top: -3rem; height: 3rem; pointer-events: none;
  background: linear-gradient(to top, rgba(17,26,16,.38), rgba(17,26,16,0));
  opacity: var(--sw, 0); border-radius: 1.75rem 1.75rem 0 0;
}
.mo .logos.swipe-over { border-top: 0; }

/* ---------- Kapitel: gespeichert, Zaehler wird schwerer ---------- */
.kap .chapter { grid-template-areas: "n meta" "body body" "save save"; filter: none; }
.mo .kap .chapter { filter: none; will-change: transform; }
.chapter__dim { position: absolute; inset: 0; border-radius: inherit; background: var(--forest); opacity: 0; pointer-events: none; }
.chapter__save {
  grid-area: save; position: relative; display: inline-flex; align-items: center; gap: .5rem; margin: .25rem 0 0;
  font-family: var(--sans); font-weight: 650; font-size: var(--fs-small); color: var(--green-h);
}
.chapter__save svg { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; transition: fill .35s var(--ease-out); }
.save__a, .save__b { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.save__a { position: absolute; left: 1.75rem; opacity: 0; }
.mo .chapter:not(.is-saved) .chapter__save { color: var(--muted); }
.mo .chapter:not(.is-saved) .chapter__save svg { fill: transparent; }
.mo .chapter:not(.is-saved) .save__a { opacity: 1; }
.mo .chapter:not(.is-saved) .save__b { opacity: 0; transform: translateY(.4em); }
.tally.bump { animation: none; }
.mo .tally { transition: font-weight .6s var(--ease-out); contain: layout; }

/* ---------- Hook-Band ---------- */
.hookband { position: relative; background: var(--deep); color: var(--on-d-1); }
.hookband__stage { padding-block: clamp(4rem, 9vw, 7rem); display: flex; flex-direction: column; justify-content: center; gap: 0; }
.mo .hookband__pin { height: 250vh; }
.mo .hookband__stage { position: sticky; top: var(--hdr); height: calc(100vh - var(--hdr)); padding-block: 2rem; }
.hookband__ui { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); max-width: 34rem; }
.hookband__bars { flex: 1; display: flex; gap: .375rem; }
.hookband__bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(234,230,220,.2); overflow: hidden; }
.hookband__bars b { display: block; height: 100%; background: var(--mint); transform-origin: 0 50%; }
.mo .hookband__bars b { transform: scaleX(0); }
.hookband__time { font-family: var(--sans); font-weight: 650; font-size: 1rem; letter-spacing: .14em; color: var(--mint); font-variant-numeric: tabular-nums; }
.hookband .eyebrow { margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.hookband__h {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; line-height: .98;
  font-size: min(6.3vw, 7rem); hyphens: none; margin: 0;
}
.hb-l { display: block; position: relative; white-space: nowrap; transition: opacity .4s; }
.hb-l--key { color: var(--mint); }
/* Gewichtswechsel ohne Relayout: helle Buchstaben und eine schwere Kopie blenden ineinander */
.mo .hb-l { font-weight: 300; }
.mo .hb-l--key { color: var(--on-d-1); }
.mo .hb-l > .kw { transition: opacity .55s var(--ease-out); }
.mo .hb-l.is-set > .kw { opacity: 0; }
.hb-h { position: absolute; left: 0; top: 0; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .55s var(--ease-out); }
.hb-l--key > .hb-h { color: var(--mint); }
.hb-l.is-set > .hb-h { opacity: 1; }
.hookband__note { margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; max-width: 36rem; font-family: var(--sans); font-weight: 550; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.45; color: var(--on-d); }
@media (max-width: 37.5rem) {
  .hookband__h { font-size: min(15vw, 5rem); line-height: .98; }
  /* Ein Wort pro Zeile: feste Zeilen, der Gewichtswechsel bricht nie um (CLS) */
  .hb-l { white-space: normal; }   /* ohne JS: normal umbrechen */
  .hb-l .kw { display: block; width: max-content; padding-block: .04em; margin-block: 0; }
}

/* ---------- Kostprobe ---------- */
[data-stamp] { transform-origin: 30% 50%; }

/* ---------- Kunden: Insights-Karten ---------- */
.cases { border-top: 0; gap: clamp(1rem, 2vw, 1.5rem); }
.case {
  padding: 1.5rem 1.375rem 1.375rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-l);
  box-shadow: 0 1.5rem 2.5rem -2.25rem rgba(26,36,25,.45);
}
.spark { display: block; width: 100%; height: 4.25rem; margin-top: auto; padding-top: 1.25rem; overflow: visible; box-sizing: content-box; }
.spark__line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.spark__area { fill: rgba(46,125,74,.13); }
.case__kpi { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--rule); }

/* ---------- Guide: Seiten durch eine Bildmaske ---------- */
.fan__page {
  position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 900 / 738; display: block; background: none;
  transform: translate(-50%, -50%) translate3d(calc(var(--f, 1) * var(--dx)), calc(var(--f, 1) * var(--dy)), 0) rotate(calc(var(--f, 1) * var(--r)));
}
.fan__mask { position: absolute; inset: 0; overflow: hidden; border-radius: .375rem; background: #fff; }
.fan__mask img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; }
.fan__cover { transform: translate(-50%, -50%) translateY(calc(8% + (1 - var(--cv, 1)) * 14%)) rotateY(calc(var(--tx, 0) * 1deg)) rotateX(calc(var(--ty, 0) * 1deg)); }
.mo .fan__cover { opacity: var(--cv, 1); }

/* ---------- Abschluss ---------- */
.mo .sec--closing { overflow: clip; }
[data-stamp] { transform-origin: 0 50%; }

/* ---------- Reduzierte Bewegung und Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  .hb-l { font-weight: 800 !important; }
}
@media print { .story, .veil { display: none !important; } }