/* Referral / Tippgeber Section — Stufe-2-Refactor.
   Visual Language angeglichen an about/services/timeline:
   text-align:left, plain Label, normales h2.
   Dezentes Marketing-Layout: 2 Spalten Desktop (Header+CTA+Reward links,
   Quote+Trust-Badges rechts), Stack auf Mobile. */

.referral {
  /* Getoenter Section-Trenner in der Komplementaerfarbe (sehr dezent, 12% mix).
     Fallback auf --color-bg-alt, falls kein Complement gesetzt ist. */
  background: var(--color-complement-soft, var(--color-bg-alt));
  max-width: none;
  padding: var(--gap-section) 0;
}

.referral-grid {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--padding-page);
  /* Zentrierter Stack: Inhalte vertikal stapeln, horizontal mittig */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: var(--gap-block);
}

/* --- Header --- */

/* Label: plain uppercase wie about/services — KEIN Pill mehr */
.referral > .referral-grid > header > span {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  margin-block-end: var(--space-3);
}

/* H2: normal weight, normale Größe — kein 4xl/900 mehr */
.referral h2 {
  margin-block-end: var(--gap-inline);
}

.referral > .referral-grid > header {
  max-width: 42rem;
}

.referral > .referral-grid > header > p {
  color: var(--color-text-muted);
  margin: 0;
}

/* --- CTA-Button: bleibt prominenter dank dark-class (FormElements::button) --- */

/* --- Reward: Pill statt Border-Box --- */

.reward {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

/* --- Trust-Badges: horizontale Pills statt bullet-list --- */

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-badges li {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* --- Blockquote: Card mit border-left in primary-color --- */

.referral blockquote {
  max-width: 42rem;
  width: 100%;
  margin: 0;
  padding: var(--gap-inline);
  text-align: left; /* innerhalb der zentrierten Stack — Quote selbst links bündig lesbar */
  background: var(--color-bg);
  border-left: 0.25rem solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.referral blockquote > p {
  margin: 0 0 var(--gap-inline) 0;
  font-style: italic;
  color: var(--color-text);
  line-height: var(--leading);
}

/* Keine großen Quote-Zeichen mehr — passt nicht zur dezenten Card-Optik */

.referral blockquote footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

/* Initials kleiner — Avatar-Größe statt Hero-Avatar */
.referral .initials {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.referral blockquote footer div {
  text-align: left;
  font-size: var(--text-sm);
}

.referral blockquote footer strong {
  display: block;
  font-weight: 600;
}

.referral blockquote footer small {
  color: var(--color-text-muted);
}