/* ============================================================
   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;

  /* Max-Breite einer Card im Card-Deck. Cards wachsen bis hierher und füllen so
     die Reihe; eine allein stehende Card in der letzten Reihe wird auf diese
     Breite gedeckelt + zentriert (statt über die volle Breite zu ziehen). */
  --section-card-max: 32rem;
}

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

.services,
.stats,
.testimonials,
.partners,
.contact-cta,
.callback,
.local-area,
.team,
.process,
.faq,
.video,
.timeline,
.image-gallery,
.video-wall,
.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);
}

/* Unterzeile unter dem Section-Titel (<p class="section-subtitle">, siehe Section\Header).
   Einordnung zu einem kurzen Titel — dezenter als der Titel, kräftiger als Fließtext.
   Eine Klasse statt einer Selektorliste über alle Sections: das Element ist neu und kommt
   ausschließlich aus diesem einen Baustein. Ohne gepflegten *_subtitle-Key rendert der View
   nichts, die Regel greift dann gar nicht. */
.section-subtitle {
  max-width: 46rem;
  margin-block: var(--space-3) 0;
  margin-inline: auto;      /* Header sind zentriert; bei linksbündigen Sections wirkungslos */
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* In der About-Zeile steht die Unterzeile unter dem SEGMENT-Titel (Section\About), nicht
   im zentrierten Section-Kopf. Dort ist die Textspalte linksbündig — ohne diese Regel
   zöge `margin-inline: auto` den Absatz mittig, sobald die Spalte breiter als 46rem ist. */
.about-text .section-subtitle {
  margin-inline: 0;
}

/* 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);
}