/* ============================================================
   Marketing Sections — shared base
   Loaded before individual section files (00- prefix).
   ============================================================ */

/* Geteilte Sections-Variables — sorgen für konsistente Optik über
   Sections mit ähnlichem Aufbau (z.B. Icon/Nummer + Text in zwei Spalten).
   Überschreibbar im Tier-CSS. */
:root {
  /* Breite der linken Icon-/Nummer-Spalte bei zwei-Spalten-Sections
     (benefits, services). Fester Wert statt 'auto' damit alle Sections
     gleiches Spalten-Verhältnis haben. */
  --section-icon-col: 3rem;
}

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

.services,
.stats,
.testimonials,
.partners,
.contact-cta,
.callback,
.local-area,
.team,
.process,
.faq,
.video,
.timeline,
.image-gallery,
.benefits {
  max-width: var(--content-width);
  margin-inline: auto;
  padding: var(--gap-section) var(--padding-page);
}

/* .about: kein eigenes padding-block (Bild soll flush bis Section-Kante).
   max-width + padding-inline werden weiter unten im alternating-bg-Block
   überschrieben (full-bleed). */
.about {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
}

.logo-slider {
  padding-block: var(--gap-section);
  overflow: hidden;
}

.carousel {
  padding-block: var(--gap-section);
}

/* Alternating backgrounds (full-bleed) */
.about,
.testimonials,
.callback,
.local-area,
.faq {
  background: var(--color-bg-alt);
  max-width: none;
  padding-inline: 0;
}

.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,
.carousel > header,
.local-area > header,
.team > header,
.process > header,
.faq > header,
.video > header,
.timeline > header,
.google-reviews > header,
.benefits > header,
.referral .referral-grid > header,
.property-search > header,
.googlemaps > header,
.stats > header,
.partners > header,
.contact-cta > header,
.logo-slider > header,
.image-gallery > header,
.visitor-counter > header {
  text-align: center;
  margin-block-end: var(--gap-section);
}

/* Section-Header <span> (Eyebrow/Label) — Pattern: <header><span>…</span><h2>…</h2></header>.
   Greift für alle Marketing-Sections; wenn keine Translation für *_label
   gepflegt ist, rendert der View den <span> gar nicht erst (siehe Section\Header). */
.services > header span,
.testimonials > header span,
.carousel > header span,
.local-area > header span,
.team > header span,
.process > header span,
.faq > header span,
.video > header span,
.timeline > header span,
.google-reviews > header span,
.benefits > header span,
.referral .referral-grid > header span,
.stats > header span,
.partners > header span,
.contact-cta > header span,
.callback > header span,
.logo-slider > header span,
.property-search > header span,
.googlemaps > header span,
.image-gallery > header span,
.visitor-counter > 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);
}