/* =========================================================================
   Energy for People — LWF002 „Online-Praxis" (Live-Webinar-Funnel)
   Seiten-Layout auf dem EfP-CI-Kit. Farben/Fonts/Maße kommen AUSSCHLIESSLICH aus
   assets/kit/tokens.css + components.css (generierte Kopie aus efp-router/assets,
   NIE von Hand editieren — nur den Router-Master ändern, dann re-syncen).
   Hier stehen nur Layout-Regeln, die das Kit nicht kennt.
   ========================================================================= */

/* ---------- Grund ---------- */
.lp-topbar{ background:var(--c-bg-surface); border-bottom:1px solid var(--c-border); text-align:center;
  font-size:var(--fs-small); color:var(--c-text); padding:8px var(--gutter); }
.text-center{ text-align:center; }
.section__title.text-center{ text-align:center; }
.lead--center{ margin-inline:auto; text-align:center; }
main{ flex:1 0 auto; }

/* ---------- Hero: 2 Spalten (Text links, die drei rechts), mobil gestapelt ---------- */
.lp-hero{ padding-block:clamp(1.75rem,4vw,3rem) clamp(1.75rem,4vw,2.75rem); }
.lp-hero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.lp-hero .display{ font-size:clamp(2rem,4.6vw,3rem); margin-bottom:var(--sp-3); }
.lp-hero .lead{ max-width:none; }
.lp-hero__facts{ display:flex; flex-wrap:nowrap; gap:var(--sp-3) var(--sp-5); margin:var(--sp-4) 0 var(--sp-5);
  padding:0; list-style:none; font-size:var(--fs-small); color:var(--c-text-muted); font-weight:var(--fw-medium); }
.lp-hero__facts li{ white-space:nowrap; display:flex; align-items:center; gap:8px; }
.lp-hero__facts li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c-accent); flex:0 0 auto; }
.lp-hero__cta .subtle{ margin-top:var(--sp-2); }
.lp-hero__media img{ width:100%; height:auto; display:block; }

/* ---------- Trustbar (direkt unter dem Hero, above the fold) ---------- */
.lp-trustbar{ background:var(--c-bg-surface); border-block:1px solid var(--c-border); padding-block:var(--sp-4); }
.lp-trustbar__row{ display:flex; align-items:center; justify-content:center; gap:var(--sp-3) var(--sp-7); flex-wrap:wrap; }
.lp-trustbar__item{ display:flex; align-items:center; gap:12px; font-size:var(--fs-small); color:var(--c-text); font-weight:var(--fw-medium); }
.lp-trustbar__item img{ width:132px; height:auto; }
.lp-trustbar__item .stars{ display:block; font-size:.95rem; line-height:1; }
.lp-trustbar__cert{ width:40px; height:40px; border-radius:50%; background:var(--c-primary-soft); display:grid; place-items:center; color:var(--c-primary-dark); flex:0 0 auto; }
.lp-trustbar__cert svg{ width:22px; height:22px; }

/* ---------- Kacheln (Benefits, Für wen) — immer nebeneinander, mobil untereinander ---------- */
.lp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-6); }
.lp-card .h3{ margin-bottom:var(--sp-2); }
.lp-card p{ margin:0; color:var(--c-text-muted); }
.lp-card__num{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--c-accent-soft); color:var(--c-accent-hover); font-weight:var(--fw-bold); margin-bottom:var(--sp-3); }

/* ---------- Inhalt (Agenda) ---------- */
.lp-agenda{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-6); margin:var(--sp-6) 0 0; padding:0; list-style:none; }
.lp-agenda li{ position:relative; padding:12px 0 12px 36px; border-bottom:1px solid var(--c-border); color:var(--c-text); }
.lp-agenda li::before{ content:""; position:absolute; left:0; top:14px; width:22px; height:22px; border-radius:50%;
  background:var(--c-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23456965' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/13px no-repeat; }
.lp-cta-mitte{ text-align:center; margin-top:var(--sp-6); }

/* ---------- Über uns (die drei) ---------- */
.lp-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-6); }
.lp-team__photo{ width:100%; aspect-ratio:560/728; object-fit:cover; border-radius:var(--r-card); box-shadow:var(--sh-card); margin-bottom:var(--sp-4); }
.lp-team .h3{ margin-bottom:var(--sp-1); }
.lp-team__role{ font-size:var(--fs-small); color:var(--c-text-subtle); margin:0 0 var(--sp-3); }
.lp-team p{ color:var(--c-text); }
.lp-team__partner{ margin-top:var(--sp-6); text-align:center; }

/* ---------- Trustelemente (Stimmen) ---------- */
.lp-testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-6); }
.lp-testimonials .testimonial{ margin:0; display:flex; flex-direction:column; }
.lp-testimonials .testimonial__quote{ flex:1; margin:0; }
.lp-testimonials .testimonial__quote::before{ content:"„"; } .lp-testimonials .testimonial__quote::after{ content:"“"; }

/* ---------- Infos ---------- */
.lp-infos{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-top:var(--sp-6); }
.lp-info{ background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-card); padding:var(--sp-5); text-align:center; }
.lp-info__label{ display:block; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.08em; color:var(--c-text-subtle); margin-bottom:6px; }
.lp-info__value{ display:block; font-weight:var(--fw-bold); color:var(--c-heading); }

/* ---------- Abschluss-CTA ---------- */
.lp-ende .section__title{ color:#fff; }
.lp-hinweis{ margin-top:var(--sp-6); padding:14px 18px; border-radius:var(--r-input); border:1px solid var(--c-on-dark-border);
  background:rgba(255,255,255,.08); color:var(--c-on-dark-text); font-size:var(--fs-small); text-align:center; }

/* ---------- Sticky-Mobile-CTA (nur Scroll-Backup, s. Rückgrat) ---------- */
.sticky-cta .btn{ width:100%; }

/* ---------- Scroll-Fade (Agentur-Standard, Rückgrat; letzte Sektion = cta-ende ausgenommen) ---------- */
@keyframes scroll-fade { from { opacity:.10; } to { opacity:1; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    main > section:not(:last-of-type) > * {
      animation:scroll-fade linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 40vh;
    }
  }
}

/* =========================================================================
   Quiz (Familie A: .quiz__options/.quiz__opt/.tick — so rendert der Generator
   mog-router/tools/quiz-gen; Vorbild energy-for-people-tf002/vorfuehrung/assets/tf002.css,
   Werte auf Kit-Tokens gezogen). Layout/Fortschritt: Baustein /mog-quiz.js.
   ========================================================================= */
.page-quiz{ background:var(--c-bg-surface); }
.quiz-wrap{ max-width:720px; width:100%; margin-inline:auto; padding:clamp(1rem,3vw,2rem) var(--gutter) var(--sp-8); }
.quiz-shell{ width:100%; background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-card);
  box-shadow:var(--sh-lift); padding:clamp(1.25rem,3vw,2.5rem); }
.quiz-step[hidden]{ display:none; }
.quiz-lead{ font-size:var(--fs-small); line-height:1.4; font-weight:var(--fw-bold); color:var(--c-primary); margin:0 0 var(--sp-4); text-align:left; }
.quiz__question{ font:var(--fw-medium) var(--fs-h3)/var(--lh-head) var(--font-head); color:var(--c-primary-dark); margin:0 0 var(--sp-4); text-align:left; }
.quiz-step-description{ margin:-8px 0 var(--sp-4); }
.quiz__options{ display:grid; gap:var(--sp-3); }
.quiz__opt{ display:block; width:100%; text-align:left; border-radius:var(--r-btn); border:2px solid var(--c-border);
  background:var(--c-white); color:var(--c-primary-dark); padding:14px 18px; font:var(--fw-medium) var(--fs-body)/1.4 var(--font-body);
  cursor:pointer; transition:border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.quiz__opt:hover{ border-color:var(--c-primary-light); background:var(--c-bg-tint); }
.quiz__opt[aria-checked=true]{ border-color:var(--c-accent); background:var(--c-accent-soft); box-shadow:var(--sh-card); }
.quiz__opt .tick{ display:none; }
.quiz-step .field{ margin:0; }
.quiz-step .field textarea{ min-height:6.5rem; }
.quiz-step .field textarea.is-error{ border-color:var(--c-error); }
.quiz-freitext-error{ margin-top:6px; font-size:var(--fs-caption); color:var(--c-error); }
.cta-row{ margin-top:var(--sp-5); display:flex; justify-content:flex-end; }
.quiz-step .btn.btn--primary{ background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--sh-cta); }
.quiz-step .btn.btn--primary:hover{ background:var(--c-accent-hover); }
/* Kontakt-Schritt: kompakt, Absenden above the fold (Rückgrat „Quiz-Layout" Punkt 4) */
.quiz-step[data-step=kontakt] .quiz__question{ margin-bottom:var(--sp-2); }
.quiz-step[data-step=kontakt] .quiz-lead{ font-weight:var(--fw-normal); color:var(--c-text-muted); font-size:var(--fs-body); margin-bottom:var(--sp-4); }
.quiz-step[data-step=kontakt] .field{ margin-bottom:var(--sp-3); }
.quiz-step[data-step=kontakt] .check{ margin:var(--sp-3) 0 var(--sp-4); }
.quiz-step[data-step=kontakt] .btn{ width:100%; }
.quiz-step[data-step=kontakt] .field__error:empty{ display:none; }
#submit-error[hidden]{ display:none; }

/* =========================================================================
   Step-Seiten (danke, webinar, termin, danke-termin)
   ========================================================================= */
.step{ flex:1 0 auto; display:flex; align-items:flex-start; padding:clamp(1.5rem,4vw,3.5rem) 0 var(--sp-8); }
.step__card{ max-width:720px; margin:0 auto; width:100%; }
.step__card--wide{ max-width:1024px; }   /* Booking-Embed-Breite = MOG-Standard 1024px (Routen-Standard §5.6) */
.step .section__title{ text-align:center; }
.step__sub{ text-align:center; color:var(--c-text-muted); font-size:var(--fs-lead); margin:0 auto var(--sp-6); max-width:56ch; }
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-5); text-align:center; }
.steps3 .ico{ font-size:2rem; margin-bottom:var(--sp-2); }
.steps3 .h3{ font-size:var(--fs-lead); }
.steps3 p{ font-size:var(--fs-small); color:var(--c-text-muted); margin:0; }
.step__hinweis{ margin-top:var(--sp-6); font-size:var(--fs-small); color:var(--c-text-subtle); text-align:center; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1024px){
  .lp-hero__grid{ grid-template-columns:1fr; }
  .lp-hero__media{ max-width:520px; margin-inline:auto; }
  .lp-infos{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  /* Above the fold mobil (Rueckgrat: Hero UND Trustbar bis 700 px, gemessen 2026-10-06 bei 375x812):
     Topbar weg (Termin steht in den Fakten), Foto der drei unter dem Fold ausgeblendet, Trustbar auf
     das Community-Element reduziert — "Trust-Bar kompakter", nicht die Regel aufweichen. */
  .lp-topbar{ display:none; }
  .lp-hero{ padding-block:var(--sp-4) var(--sp-4); }
  .lp-hero .eyebrow{ font-size:.7rem; letter-spacing:.1em; }
  .lp-hero .display{ font-size:clamp(1.75rem,8vw,2.25rem); margin-top:var(--sp-2); }
  .lp-hero .lead{ font-size:1rem; }
  .lp-hero__facts{ flex-direction:column; align-items:center; gap:4px; margin:var(--sp-3) 0 var(--sp-4); }
  /* Foto der drei wird per JS (index.html) unter die Trustbar verschoben — nie ausgeblendet */
  .lp-hero__media--mobil{ margin:var(--sp-4) var(--gutter) 0; }
  .lp-trustbar{ padding-block:var(--sp-3); }
  .lp-trustbar__row{ flex-direction:column; gap:var(--sp-3); }
  .lp-trustbar__item--cert{ display:none; }
  .lp-trustbar__item img{ width:100px; }
  .lp-cards, .lp-team, .lp-testimonials, .lp-agenda, .steps3{ grid-template-columns:1fr; }
  .lp-agenda{ gap:0; }
  .lp-team{ max-width:420px; margin-inline:auto; }
  .lp-infos{ grid-template-columns:1fr 1fr; gap:var(--sp-3); }
  .lp-info{ padding:var(--sp-4); }
}