/* =========================================================================
   HayHo Landingpage — Variante 3 „Petrol"  (Thomas' KI-Konzept, sauber sortiert)
   Lädt NACH styles.css und überschreibt nur gezielt.

   Konzept (mit Marcy abgestimmt):
   - Heller Creme-Hintergrund wie im schlichten Modell (aus der Basis geerbt).
   - Petrol = „Stallbetrieb/Wirtschaft", Terracotta = „Tierwohl/Pferd"  —
     exakt die Hex-Werte aus Thomas' KI-Mail.
   - Petrol prägt zusätzlich die dunklen Bänder → die Version hat eine klare
     Petrol-Identität (kein Braun).
   - Goldbraun NUR als CTA. Überschriften komplett EINFARBIG (schwarz).
   - Vorteile in drei Gruppen (wie V2): Stallbetrieb · Pferd · Pferd und Stall.
   - Dunkles Band alles weiß, Preise schwarz → ruhig, nicht „crazy".
   ========================================================================= */

:root {
  /* Hintergrund NICHT überschreiben → erbt die helle Creme-Basis (#F5F0E6). */

  /* strukturelle Neutralen (ersetzen das frühere Grün) */
  --primary:       #9B8A66;     /* warmes Taupe — Linien, Icon-Tönung */
  --primary-dark:  #5C4F36;     /* warmes Braun — Eyebrow-Text, Links */

  /* Marke / Aktion (exakt KI-Goldbraun) */
  --accent:        #B8792B;
  --accent-ink:    #FFFFFF;

  /* dunkle Bänder: PETROL — milder (~80 %, nicht zu kräftig) */
  --band:          #244F4D;     /* Footer */
  --band-bg:       #2D6360;     /* Proof-/CTA-Band, weicher */
  --band-text:     #F3EFE3;
  --band-muted:    #CBDEDC;

  /* die zwei Kategorie-Kennfarben — EXAKT aus Thomas' KI-Mail */
  --persona-pferd:      #9A5A3A;   /* Terracotta — Tierwohl */
  --persona-pferd-bg:   #F5E5DA;
  --persona-betrieb:    #2F6F6D;   /* Petrol — Wirtschaft */
  --persona-betrieb-bg: #E4F1EF;
}

/* ---- Überschriften EINFARBIG (Highlight = Textfarbe, kein Grün/Gold) ---- */
.hl,
.hero h1 .hl { color: var(--text); }

/* =========================================================================
   Vorteile-Sektion — drei Sub-Gruppen (Struktur wie V2)
   ========================================================================= */
.vorteile-group { margin-bottom: clamp(40px, 5vw, 72px); }
.vorteile-group:last-child { margin-bottom: 0; }

.vorteile-group-title {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -.01em;
  color: var(--text);                 /* Gruppen-Überschrift schwarz */
  margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  width: 100%;
}
/* Gruppen-Icons (echte Linien-Icons als Maske, per CSS einfärbbar). */
.vorteile-group-title .vg-ico {
  width: 34px; height: 34px; flex: none; display: block;
}

/* =========================================================================
   Persona-Marker an den übrigen Stellen
   ========================================================================= */
.tag--pferd   { background: var(--persona-pferd-bg);   color: var(--persona-pferd);   filter: none; }
.tag--betrieb { background: var(--persona-betrieb-bg); color: var(--persona-betrieb); filter: none; }

.persona .card:has(.tag--pferd)   li svg { color: var(--persona-pferd); }
.persona .card:has(.tag--betrieb) li svg { color: var(--persona-betrieb); }

/* Problem-Sublabels (Pferd/Betrieb) neutral schwarz — nicht farbig */
.pain .angles b { color: var(--text); }

/* Vergleichstabelle: HayHo-Spalte sehr dezent neutral */
.compare .col-hayho { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.compare thead th.hayho { color: var(--primary-dark); }

/* =========================================================================
   Aufräumen, damit es nicht „crazy" wirkt
   ========================================================================= */

/* Dunkles Band: alles weiß (kein Gold, kein Terracotta) */
.band .eyebrow            { color: #fff; }
.band .eyebrow::before    { background: #fff; }
.stat .num                { color: #fff; }
.cta-band .cta-phone svg  { color: #fff; }

/* Preise schwarz (nur „In Entwicklung"-Badge + CTA bleiben farbig) */
.product .price           { color: var(--text); }
.product .price small     { color: var(--muted); }