/* ============================================================
   Marketing Sections — shared base
   Geteilte Optik fuer alle Section-Typen (FAQ/Team/About/…).
   Laedt vor den einzelnen Section-Dateien (00- Prefix).
   Uebernommen aus der gemeinsamen Komponenten-Bibliothek.
   ============================================================ */

:root {
  /* Breite der linken Icon-/Nummer-Spalte bei Zwei-Spalten-Sections
     (benefits, services). */
  --section-icon-col: 3rem;
}

/* --- Shared section base --- */

/* Default: Sections sitzen im content-Track des main-Grids (zentriert auf
   content-width, mit Seiten-Padding aus den Grid-Gutters) — daher hier nur
   width:100% (= content-Track-Breite) + vertikales Spacing. Full-Bleed-Typen
   brechen weiter unten via grid-column:full aus. */
.services,
.stats,
.testimonials,
.partners,
.contact-cta,
.callback,
.local-area,
.team,
.process,
.faq,
.video,
.timeline,
.image-gallery,
.about,
.benefits {
  width: 100%;
  padding-block: var(--gap-section);
}

/* Full-Bleed-Section-Typen: ueber die volle Breite (grid-column:full im
   main-Grid), getoenter Hintergrund randlos bis zum Viewport-Rand. Der
   INHALT wird per Inner-Wrapper auf content-width zentriert (Regel darunter).
   Loest den 100vw/margin-Breakout dauerhaft ab. */
.about,
.testimonials,
.callback,
.local-area,
.faq {
  grid-column: full;
  background: var(--color-bg-alt);
}

/* Direkte Kinder der Full-Bleed-Sections auf content-width zentrieren. */
.about > *,
.testimonials > *,
.callback > *,
.local-area > *,
.faq > * {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}


/* --- Section headers (label + title) --- */

.services > header,
.testimonials > header,
.local-area > header,
.team > header,
.process > header,
.faq > header,
.video > header,
.timeline > header,
.benefits > header,
.stats > header,
.partners > header,
.contact-cta > header,
.image-gallery > header {
  text-align: center;
  margin-block-end: var(--gap-section);
}

/* Section-Header <span> (Eyebrow/Label) — Pattern:
   <header><span>…</span><h2>…</h2></header>. Wenn keine Ueberzeile
   gepflegt ist, rendert der View den <span> gar nicht erst. */
.services > header span,
.testimonials > header span,
.local-area > header span,
.team > header span,
.process > header span,
.faq > header span,
.video > header span,
.timeline > header span,
.benefits > header span,
.stats > header span,
.partners > header span,
.contact-cta > header span,
.callback > header span,
.image-gallery > header span {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  margin-block-end: var(--space-3);
}