/*
 * Section-Basis-Styles — Layouts, Eyebrows, Lead-Paragraphs,
 * Section-Heads, gemeinsame Padding-Werte.
 * Spezifische Section-Varianten (Pillars, Topics, Compare, …)
 * liegen in eigenen Files.
 */

/* --------- Globaler Section-Rhythm --------- */
.bf-section,
section.bf-section,
.wp-block-group.bf-section,
.wp-block-group.is-style-bf-section-alt,
.wp-block-group.is-style-bf-section-dark {
  /* Wir überschreiben WPs Layout-Variablen lokal für die Section,
   * damit `is-layout-constrained > *` auf 1240 px statt der globalen
   * 760 px (theme.json contentSize) geht. */
  --wp--style--global--content-size: 1240px;
  --wp--style--global--wide-size: 1240px;
  padding-block: 100px;
  padding-inline: 32px;
}
@media (max-width: 768px) {
  .bf-section,
  section.bf-section,
  .wp-block-group.bf-section,
  .wp-block-group.is-style-bf-section-alt,
  .wp-block-group.is-style-bf-section-dark {
    padding-block: 64px;
    padding-inline: 24px;
  }
}

.wp-block-group.is-style-bf-section-alt {
  background: var(--bf-beige-light);
}
.wp-block-group.is-style-bf-section-dark {
  background: var(--bf-gray-dark);
  color: var(--bf-white);
}
.wp-block-group.is-style-bf-section-dark :is(h1,h2,h3,h4,h5,h6) {
  color: var(--bf-white);
}
.wp-block-group.is-style-bf-section-dark a:not(.wp-block-button__link) {
  color: var(--bf-turquoise-40);
}

/* --------- Section-Head Helper (Eyebrow + Heading + Lead) --------- */
/* In der Vorlage ist .section__head zentriert, max-width 760, mb 56. */
.bf-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto 56px;
  max-width: 760px;
  text-align: center;
  align-items: center;
}
.bf-section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* Eyebrow als Heading-Style-Variante — PINK, wie in der Vorlage. */
.wp-block-heading.is-style-bf-eyebrow,
.bf-eyebrow {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-pink);
  margin: 0 0 4px;
  line-height: 1.4;
  display: inline-block;
}
.wp-block-group.is-style-bf-section-dark .wp-block-heading.is-style-bf-eyebrow,
.is-style-bf-section-dark .bf-eyebrow {
  color: var(--bf-turquoise-40);
}

/* Headlines in der Vorlage: <em> ist italic + turquoise-dark. */
.bf-section h2,
.wp-block-group .wp-block-heading,
.bf-section .wp-block-heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.bf-section h2 em,
.bf-section .wp-block-heading em,
.bf-final__title em,
.bf-hero__title em {
  font-style: italic;
  color: var(--bf-turquoise-dark);
  font-weight: 400;
}
.is-style-bf-section-dark h2 em,
.is-style-bf-section-dark .wp-block-heading em,
.bf-final__title em {
  color: var(--bf-turquoise);
}

/* Section-Title-Größe wie in der Vorlage: clamp(34, 3.6vw, 50). */
.bf-section > .wp-block-heading,
.bf-section h2,
.bf-section-head .wp-block-heading,
.bf-section-head h2 {
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.08;
  margin: 0;
  color: var(--bf-gray-dark);
}
.is-style-bf-section-dark .bf-section-head .wp-block-heading,
.is-style-bf-section-dark .bf-section-head h2 {
  color: var(--bf-white);
}

/* Legal-/Prosa-Seiten (Impressum, AGB, Datenschutz): H1–H3 Staffelung.
 * Überschreibt die globale .bf-section h2-Regel (clamp 34–50 px), die für
 * Marketing-Sections gedacht ist und in Prosa-Listen viel zu wuchtig wirkt.
 *
 * Top-Margin pro Element generös (statt nur via Sibling-Regel), damit der
 * Lese-Rhythmus klar ist — H2 öffnet ein neues Kapitel, H3 einen Unterpunkt.
 * H1 startet die Seite, deshalb dort margin-top:0. */
.bf-legal h1.wp-block-heading {
  font-size: clamp(32px, 3.4vw, 42px);
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1.75rem;
  color: var(--bf-gray-dark);
}
.bf-legal h2.wp-block-heading {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  margin-top: 3.5rem;
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
  color: var(--bf-gray-dark);
}
.bf-legal h3.wp-block-heading {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--bf-gray-dark);
}
/* Erste Überschrift in einer Section soll nicht doppelt Abstand bekommen
 * (margin-top wird oft mit Section-Padding kombiniert). */
.bf-legal > h1.wp-block-heading:first-child,
.bf-legal > h2.wp-block-heading:first-child,
.bf-legal > h3.wp-block-heading:first-child { margin-top: 0; }
/* H3 direkt nach H2 (kein Text dazwischen): engerer Anschluss. */
.bf-legal h2.wp-block-heading + h3.wp-block-heading { margin-top: 1rem; }

/* Lead-Paragraph */
.wp-block-paragraph.is-style-bf-lead,
.bf-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--bf-gray-80);
  max-width: 680px;
}
.is-style-bf-section-dark .wp-block-paragraph.is-style-bf-lead,
.is-style-bf-section-dark .bf-lead {
  color: rgba(255,255,255,0.82);
}

/* --------- Team-Avatar: Beitragsbild im Kreis/Portrait statt Initialen --------- */
.bf-person-c__avatar,
.bf-founder__avatar { overflow: hidden; }
.bf-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* --------- Block-Button-Varianten (Turquoise & Ghost) --------- */
.wp-block-button.is-style-bf-turquoise .wp-block-button__link {
  background: var(--bf-turquoise);
  color: var(--bf-white);
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 14px 28px;
  transition: all 0.22s var(--ease);
}
.wp-block-button.is-style-bf-turquoise .wp-block-button__link:hover {
  background: var(--bf-turquoise-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 195, 214, 0.35);
}
.wp-block-button.is-style-bf-ghost .wp-block-button__link {
  background: transparent;
  color: var(--bf-gray-dark);
  border: 1.5px solid var(--bf-gray-20);
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 14px 28px;
}
.is-style-bf-section-dark .wp-block-button.is-style-bf-ghost .wp-block-button__link {
  color: var(--bf-white);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
}
.is-style-bf-section-dark .wp-block-button.is-style-bf-ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}

/* --------- bf-container für Patterns, falls Layout-Constrained nicht greift --------- */
.bf-pattern-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (max-width: 768px) {
  .bf-pattern-container { padding-inline: var(--container-pad-mobile); }
}