/* ============================================================
   foodmarketing.de · site-v10 · Leadmagnet-Fassung (A/B-Test)
   Liegt ueber v9.css. Der Guide ist das zentrale Bild: groesseres
   Cover im Hero, keine Ideen-Karten mehr, Benefits, kompakter
   Einblick (sechs Themenfelder + eine echte Seite), Trust-Leiste.
   ============================================================ */

/* ---------- Hero: Eyebrow, laengere Headline, groesseres Cover ---------- */
.hero .eyebrow { margin-bottom: 1.125rem; }
.hero .display { font-size: clamp(2rem, 4.6vw, 3.5rem); hyphens: manual; }
/* Kurze Ueberschriften nicht mitten im Wort trennen ("Aware-ness", "Themen-felder") */
.benefit__h, .einblick h2, #guide h2, .closing--short h2 { hyphens: manual; }
.hero .lede { max-width: 50ch; }
@media (min-width: 53.8125rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero .display { font-size: clamp(2.125rem, 3.5vw, 3.375rem); }
  .hero .cover-stage { justify-items: center; padding-right: 0; }
  .hero .cover-frame { width: min(100%, 28rem); }
  .hero .cover-stage::before { width: 95%; }
}
@media (min-width: 53.8125rem) and (max-width: 75rem) {
  .hero .cover-frame { width: min(100%, 22rem); }
}
@media (max-width: 53.75rem) {
  /* Cover bleibt groesser als in v9, der CTA muss trotzdem auf 390x844 ganz sichtbar sein */
  .hero .cover-stage { height: clamp(16rem, 40svh, 27rem); }
  .hero .cover-frame img { max-height: clamp(13.5rem, 36svh, 23rem); }
  .hero__grid { gap: 1rem; }
  .hero .eyebrow { margin-bottom: .625rem; }
  .hero .lede { margin-top: .875rem; }
  .hero .btn-row { margin-top: 1.125rem; }
  /* Eyebrow: Strich weg, sonst steht "Für" allein in der ersten Zeile */
  .hero .eyebrow::before { display: none; }
  .hero .eyebrow { letter-spacing: .08em; }
  .hero .cover-badge { right: -14%; }
}

/* ---------- Benefits ---------- */
.benefits__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem);
}
.benefit {
  padding: 1.5rem 1.375rem 1.625rem; background: var(--paper);
  border: 1px solid var(--rule); border-top: 4px solid var(--green); border-radius: .75rem;
}
.benefit__h { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.benefit p { margin: .75rem 0 0; color: var(--muted); font-size: var(--fs-body-s); line-height: 1.55; }
@media (max-width: 62rem) { .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .benefits__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Einblick: sechs Themenfelder + eine echte Seite ---------- */
.einblick { border-top: 1px solid var(--rule); }
.einblick__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 4vw, 4rem); align-items: start; margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.topic {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.topic__n { font-family: var(--sans); font-weight: 750; font-size: var(--fs-small); color: var(--green-h); letter-spacing: .04em; }
.topic h3 { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); margin: 0; }
.topic__c { font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.page-sample { margin: 0; }
.page-sample img {
  display: block; width: 100%; height: auto; border-radius: .5rem; background: #fff;
  border: 1px solid var(--rule); box-shadow: 0 1.5rem 3rem -1.75rem rgba(26,36,25,.45);
}
.page-sample__link { display: block; border-radius: .5rem; cursor: zoom-in; }
.page-sample__link:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.page-sample figcaption { margin-top: .75rem; font-size: var(--fs-small); color: var(--muted); }
.page-sample figcaption a { color: var(--green-h); font-weight: 600; white-space: nowrap; }
@media (max-width: 56.25rem) { .einblick__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Trust: kompakte Logo-Leiste mit einem Satz ---------- */
/* Ziel: ganze Sektion niedriger als in v9 (v9: 311 px bei 390, 186 px bei 1440) */
.logos { padding-block: 1.25rem 1.375rem; }
.logos__label { margin-bottom: .75rem; }
.logos__row img { width: min(7.25rem, 30vw); }
.logos__note {
  margin: 1rem auto 0; max-width: 78ch; text-align: center;
  color: var(--muted); font-size: var(--fs-small); line-height: 1.5;
}
@media (max-width: 30rem) {
  .logos { padding-block: 1.25rem 1.375rem; }
  .logos__label { margin-bottom: .625rem; }
  .logos__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
  .logos__row img { max-width: 5.75rem; }
  .logos__row .wordmark { font-size: .8125rem; }
  .logos__note { margin-top: .75rem; font-size: .9375rem; line-height: 1.45; }
}

/* ---------- Formular: Headline links, kleines Cover statt Faecher ---------- */
.guide-split { align-items: center; }
.guide-copy .lede { margin-top: 1.125rem; }
.guide-copy__cover {
  display: block; width: min(13rem, 46%); height: auto; margin-top: 2rem;
  filter: drop-shadow(0 1.5rem 2.5rem rgba(0,0,0,.45));
}
@media (max-width: 56.25rem) { .guide-copy__cover { display: none; } }
/* In A folgt der Footer (gleiche Farbe) direkt aufs Formular: 108 + 80 px leerer Wald.
   Nur CSS, damit A und B im HTML gleich bleiben. */
html[data-variant="a"] #guide { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
html[data-variant="a"] .site-footer { padding-top: clamp(2rem, 3vw, 2.75rem); border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Abschluss Variante A: hell, kurz ---------- */
.closing--short { border-top: 1px solid var(--rule); }
.closing--short h2 { max-width: 22ch; }
.closing--short .closing__note { color: var(--muted); }

/* Keine Linie mehr ueber der Logo-Leiste (Andrew 03.11.) */
.logos { border-top: 0; }