/**
 * ALP Nutrition Design-System: Info-/About-Sektionen.
 * 1:1-Port des freigegebenen Ueber-uns-Designs (prototype/comp-final.html,
 * DECISIONS 2026-07-14). Klassen mit .abt-Prefix, als Gutenberg-Patterns nutzbar.
 */

/* Kein Rest-Balken unter vollbreiten Abschluss-Sektionen; Prose-Enden behalten Luft */
.info-page .entry-content { padding-bottom: 0; }
.entry-content > :last-child:not(.alignfull) { margin-bottom: clamp(72px, 8vw, 112px); }

/* Qualitaets-Seite: eigener Hero-Bildausschnitt (Individualitaet) */
.page-slug-alp-qualitaet-neu .info-page__head,
.page-slug-alp-nutrition-qualitaetsversprechen-hochwertige-rohstoffe .info-page__head { background-position: center, center 34%; }

/* Ueber uns: grosser Bodenpuffer, weil die Stats-Karte in den Hero ueberlappt.
   (Alle anderen Info-Heroes laufen mit dem balancierten Standard-Padding.) */
.page-slug-alp-info-demo .info-page__head,
.page-slug-alp-nutrition-hochwertige-fluessige-nahrungsergaenzungsmittel .info-page__head {
  padding-bottom: clamp(170px, 16vw, 220px);
}

/* Sektions-Gruppen laufen vollbreit und nahtlos (kein bg-Seam zwischen Sektionen) */
.entry-content > .abt-stats,
.entry-content > .abt-story,
.entry-content > .abt-phyto,
.entry-content > .abt-process,
.entry-content > .abt-pure,
.entry-content > .abt-closer { margin-top: 0 !important; max-width: none !important; }

/* ============ Stats-Karte (ueberlappt den Seiten-Hero) ============ */
.abt-stats { background: var(--paper); }
/* Ueberlapp in den Hero: position:relative statt negativer Margin
   (WP-Layout-CSS neutralisiert margin-block-start auf Container-Kindern) */
.entry-content .abt-stats .abt-stats__card {
  position: relative;
  z-index: 2;
  top: calc(-1 * clamp(48px, 5.5vw, 78px));
  margin-bottom: calc(-1 * clamp(48px, 5.5vw, 78px) + var(--s6)) !important;
}
.abt-stats__card {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  margin-top: clamp(-120px, -9vw, -84px);
  position: relative;
  z-index: 2;
  background: var(--paper);
  border-radius: 26px;
  box-shadow: 0 30px 60px -30px rgba(22,36,63,.28), 0 2px 6px rgba(22,36,63,.06), inset 0 0 0 1px rgba(255,255,255,.6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: clamp(40px, 4vw, 56px) clamp(12px, 1.5vw, 20px);
  align-items: start;
}
.abt-stat { padding: 0 clamp(20px, 2.6vw, 40px); }
.abt-stat p { margin-top: 0; margin-bottom: 0; }
.entry-content .abt-stat p.abt-stat__label { margin-top: var(--s3); }
.entry-content .abt-stat p.abt-stat__sub { margin-top: 4px; }
.abt-stat + .abt-stat { border-left: 1px solid var(--line); }
.abt-stat__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-band-title);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
  color: var(--ink);
  margin: 0;
}
.abt-stat__num small { font-size: .55em; font-weight: 500; }
.abt-stat__label { margin: var(--s3) 0 0; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); line-height: 1.35; }
.abt-stat__sub { margin: 2px 0 0; font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.45; }

/* ============ Story-Split (Prose + gerahmter Packshot) ============ */
.abt-story { background: var(--paper); padding-block: var(--section-y); }
.abt-story__grid {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;   /* Bild-Karte endet auf gleicher Hoehe wie der Text */
}
.abt-story__copy h2 { max-width: none; margin-bottom: var(--s5); }
.abt-story__copy .prose { max-width: none; color: var(--ink-muted); }
.abt-story__copy .prose p { margin: 0; }
.abt-story__copy .prose p + p { margin-top: var(--s4); }
.abt-story__copy .prose strong { color: var(--ink); font-weight: 600; }
.abt-story__quote {
  margin: var(--s6) 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--ink);
  max-width: none;
}
.abt-story__stage {
  position: relative;
  border-radius: 26px;
  background: #FFFFFF;
  box-shadow: 0 30px 60px -30px rgba(22,36,63,.28), 0 2px 6px rgba(22,36,63,.06), inset 0 0 0 1px var(--line);
  padding: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
  margin: 0;
  display: flex; flex-direction: column;
}
.abt-story__pack {
  position: relative; z-index: 1;
  flex: 1;                 /* fuellt die Texthoehe */
  min-height: 340px;
  overflow: hidden;
  border-radius: 16px;
}
/* Gutenberg wrappt das Bild in figure.wp-block-image: Crop-Kette absolut absichern */
.abt-story__pack figure { position: static; margin: 0; height: 100%; }
.abt-story__pack img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 76%;
}
.abt-story__chip { position: absolute; z-index: 2; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); }
.abt-story__chip--tr { left: auto; right: clamp(16px, 2vw, 28px); bottom: auto; top: clamp(16px, 2vw, 28px); }

/* ============ Navy-PHYTO (dunkler Anker, Bild gerahmt) ============ */
.abt-phyto {
  background: linear-gradient(165deg, var(--ink) 0%, #1C2E51 100%);
  --surface: var(--ink);
  color: rgba(236,241,248,.78);
  padding-block: var(--section-y);
}
.abt-phyto__grid {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: stretch;
}
.abt-phyto__media {
  position: relative;
  border-radius: var(--r-surface);
  overflow: hidden;
  min-height: 460px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14);
  margin: 0;
}
.abt-phyto__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.abt-phyto__badge { position: absolute; top: var(--s4); left: var(--s4); z-index: 2; }
.abt-phyto__copy { display: flex; flex-direction: column; justify-content: center; }
.abt-phyto .eyebrow { color: var(--lime); margin-bottom: var(--s4); }
.abt-phyto h2 { color: #fff; max-width: none; margin-bottom: var(--s5); }
.abt-phyto .lead { color: rgba(236,241,248,.78); margin-bottom: var(--s6); max-width: none; }
.abt-phyto__points { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s3); }
.abt-phyto__points li { position: relative; padding-left: 30px; font-size: var(--fs-meta); color: rgba(236,241,248,.82); }
.abt-phyto__points li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lime); font-weight: 700; }
.abt-phyto__herbs { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: 52ch; }
.abt-herb {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  font-size: var(--fs-micro); font-weight: 600;
  color: #ECF1F8;
  margin: 0;
}

/* ============ Prozess 01-04 (Hairline-Editorial) ============ */
.abt-process { background: var(--paper); padding-block: var(--section-y); }
.abt-process__wrap { width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px)); margin-inline: auto; }
.abt-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  margin-top: clamp(48px, 6vw, 72px) !important;  /* Luft zwischen Kopf und Stationen-Linien */
}
.abt-step { border-top: 1px solid var(--line); padding-top: var(--s5); }
.abt-step__num {
  font-family: var(--cond);
  font-weight: 700;
  font-size: var(--fs-page-title-col);
  line-height: 1;
  color: var(--ink-subtle);
  display: block;
  margin: 0 0 var(--s4);
}
.abt-step h3 { font-size: var(--fs-h4); margin: 0 0 var(--s2); }
.abt-step p { font-size: var(--fs-meta); color: var(--ink-muted); margin: 0; }

/* ============ Reinheit (heller Vertrauens-Block) ============ */
.abt-pure { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.abt-pure__inner {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  padding-block: var(--section-y);
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}
.abt-pure .eyebrow { color: var(--green-ok); }
.abt-pure h2 { font-size: var(--fs-page-title-col); max-width: none; margin: 16px 0 20px; }
.abt-pure .lead { max-width: none; }
.abt-pure__list { list-style: none; margin: 0; padding: 0; counter-reset: abtpure; }
.abt-pure__list li {
  position: relative;
  counter-increment: abtpure;
  padding: 26px 0 26px 66px;
  color: var(--ink-muted);
  font-size: var(--fs-meta);
  line-height: 1.55;
  max-width: none;
}
.abt-pure__list li + li { border-top: 1px solid var(--line); }
.abt-pure__list li::before {
  content: "0" counter(abtpure);
  position: absolute; left: 0; top: 26px;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.14em;
  padding: 0 0.06em;
}
.abt-pure__list li strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-body); margin-bottom: 4px; }

/* ============ Abschluss: filmischer Berg-Moment ============ */
.abt-closer {
  position: relative; overflow: hidden; background: #101B31;
  background-image:
    linear-gradient(180deg, rgba(14,23,42,.50) 0%, rgba(14,23,42,.74) 100%),
    url(../img/hero-bg.jpg);
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat;
}
.abt-closer__inner {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
  padding-block: clamp(96px, 11vw, 152px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s5);
}
.abt-closer .eyebrow { color: var(--lime); margin: 0; }
.abt-closer h2 { color: #fff; font-size: var(--fs-band-title); max-width: 25ch; margin-inline: auto; }
.abt-closer .lead { color: rgba(255,255,255,.80); margin-inline: auto; max-width: 52ch; }
.abt-closer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s2); }
.abt-closer__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); font-size: var(--fs-meta); color: rgba(255,255,255,.72); margin-top: var(--s2); }
.abt-closer__trust span { display: inline-flex; align-items: center; gap: var(--s2); }
.abt-closer__trust svg { width: 17px; height: 17px; color: var(--lime); flex: none; }

/* ============ Spezifitaets-Overrides gegen .entry-content p (Theme-Prose) ============ */
.entry-content p.abt-stat__num { font-family: var(--serif); font-weight: 500; font-size: var(--fs-band-title); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.entry-content p.abt-stat__label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); line-height: 1.35; }
.entry-content p.abt-stat__sub { font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.45; }
.entry-content p.abt-step__num { font-family: var(--cond) !important; font-weight: 700; font-size: var(--fs-page-title-col) !important; line-height: 1; color: var(--ink-subtle); margin-bottom: var(--s4); }
.entry-content .abt-step p { font-size: var(--fs-meta); color: var(--ink-muted); }
.entry-content p.abt-story__quote { font-family: var(--serif); font-weight: 700; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink); }
.entry-content p.abt-herb { font-size: var(--fs-micro); font-weight: 600; color: #ECF1F8; }
.entry-content .abt-phyto p.lead { color: rgba(236,241,248,.78); font-size: var(--fs-lead); line-height: 1.55; }
.entry-content .abt-closer p.lead { color: rgba(255,255,255,.80); font-size: var(--fs-lead); line-height: 1.55; }
.entry-content p.abt-closer__trust { color: rgba(255,255,255,.72); font-size: var(--fs-meta); }
.entry-content p.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.entry-content p.chip { font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }
.entry-content .abt-pure__list li { font-size: var(--fs-meta); color: var(--ink-muted); }
.entry-content .abt-phyto__points li { font-size: var(--fs-meta); color: rgba(236,241,248,.82); }

/* ============ Responsive ============ */
@media (max-width: 959px) {
  .abt-stats__card { grid-template-columns: 1fr 1fr; row-gap: var(--s5); padding-block: var(--s6); }
  .abt-stat:nth-child(3) { border-left: none; }
  .abt-story__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .abt-phyto__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .abt-phyto__media { min-height: 340px; }
  .abt-pure__inner { grid-template-columns: 1fr; gap: var(--s7); }
  .abt-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 559px) {
  .abt-stats__card { grid-template-columns: 1fr; }
  .abt-stat + .abt-stat { border-left: none; border-top: 1px solid var(--line); padding-top: var(--s5); margin-top: var(--s2); }
  .abt-steps { grid-template-columns: 1fr; }
}

/* =========================================================
   Parallax-Info-Hero (Ueber uns / Qualitaet / Kontakt)
   Drei Tiefenebenen: 0 Panorama (zoomt) / 1 weicher Aufheller
   (vorletzte Ebene) / 2 Kopf-Content / 3 rahmende Tannen (fahren
   beim Scrollen aus dem Bild). Bewegung steuert main.js (>=768px,
   reduced-motion-sicher). Struktur/Padding der Info-Heroes bleibt
   unangetastet -> die ueberlappende Stats-Karte auf "Ueber uns"
   funktioniert weiter.
   ========================================================= */
.info-page__head--parallax {
  overflow: hidden;
  isolation: isolate;
  background: none;
}
/* Unterer weisser Ausklang raus (User-Wunsch): Bild laeuft satt bis zur Kante. */
.info-page__head--parallax::after { display: none; }
.info-page__head--parallax .phero__bg {
  position: absolute; inset: -2px; z-index: 0;
  background: url(../img/hero-panorama.jpg) center 36% / cover no-repeat;
  transform: scale(1);
  transform-origin: center 44%;
  will-change: transform;
}
.info-page__head--parallax .phero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(56% 92% at 50% 42%, rgba(246,249,250,.60) 0%, rgba(246,249,250,.26) 42%, rgba(246,249,250,0) 72%);
}
.info-page__head--parallax .wrap { z-index: 2; }
/* Tannen scharf (KEIN Blur), rahmen die Seiten */
.info-page__head--parallax .phero__tree {
  position: absolute; top: 50%; height: 152%; width: auto; z-index: 3;
  pointer-events: none; will-change: transform;
}
.info-page__head--parallax .phero__tree--l { left: 0;  transform: translate(-2%, -50%); transform-origin: left center; }
.info-page__head--parallax .phero__tree--r { right: 0; transform: translate(2%, -50%);  transform-origin: right center; }
/* Kopf zentral halten, damit Titel UND Lead nicht in die Tannen laufen */
.info-page__head--parallax .wrap { max-width: 760px; }
.info-page__head--parallax .info-page__lead { max-width: 34em; margin-inline: auto; }
/* Lesbarkeit via Text-Glow (kein grosses Milchfeld) */
.info-page__head--parallax h1 { text-shadow: 0 0 2px rgba(246,249,250,.92), 0 2px 22px rgba(246,249,250,.85), 0 1px 46px rgba(246,249,250,.6); }
.info-page__head--parallax .eyebrow { text-shadow: 0 1px 10px rgba(246,249,250,.9); }
.info-page__head--parallax .info-page__lead p { text-shadow: 0 0 2px rgba(246,249,250,.95), 0 1px 16px rgba(246,249,250,.9) !important; }

/* Tablet: Tannen weiter aussen, Kopf bekommt Luft */
@media (max-width: 1023px) {
  .info-page__head--parallax .phero__tree--l { transform: translate(-16%, -50%); }
  .info-page__head--parallax .phero__tree--r { transform: translate(16%, -50%); }
}
/* Mobil: Tannen als schmale Seitenakzente weit aussen (kein Text-Overlap),
   kein Effekt (main.js erst ab 768px), Aufheller etwas staerker. */
@media (max-width: 767px) {
  .info-page__head--parallax .phero__tree { height: 108%; opacity: .9; }
  .info-page__head--parallax .phero__tree--l { transform: translate(-58%, -50%); }
  .info-page__head--parallax .phero__tree--r { transform: translate(58%, -50%); }
  .info-page__head--parallax .phero__scrim {
    background: radial-gradient(110% 84% at 50% 44%, rgba(246,249,250,.84) 0%, rgba(246,249,250,.52) 48%, rgba(246,249,250,.16) 80%);
  }
}