/* =========================================================================
   HayHo Landingpage — Variante 2 „Schlicht" (der ruhige Gegenvorschlag)
   Lädt nach styles.css.

   Konzept (mit Marcy abgestimmt): SUPER schlicht, nur die Marken-DNA.
   – NUR zwei Farben: Salbei-Grün (aus dem Logo) + Gelb-Orange (Amber).
     Kein Petrol, kein Terracotta, kein drittes Braun.
   – Überschriften sind NEUTRAL (dunkler Text). Einzige Ausnahme: das Wort
     „HayHo" / der Marken-Highlight `.hl` darf im hellen Logo-Grün bleiben.
   – Persona-Trennung läuft über STRUKTUR (drei Vorteile-Blöcke) + ganz
     dezente grüne Icon-Akzente: Betrieb = Dunkelgrün, Pferd = Logo-Grün.
   – Amber = AUSSCHLIESSLICH Aktion (CTA-Buttons).
   – Dunkles Band: alles weiß. Preise schwarz. → ruhig, nicht „crazy".
   ========================================================================= */

/* Überschriften komplett EINFARBIG (schwarz) — auch das Wort „HayHo".
   Keine zweifarbigen Headlines mehr; Farbe bleibt nur Amber für die CTA. */
.hl,
.hero h1 .hl { color: var(--text); }

/* Persona-Tags in „Für wen?" zu ruhigen Outline-Pills (keine Farbe). */
.tag--pferd,
.tag--betrieb {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  filter: none;
}

/* ----------------------------------------------------------------------
   Vorteile-Sektion: drei Sub-Gruppen mit Icon + Überschrift
   ---------------------------------------------------------------------- */
.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);                 /* Überschrift neutral, nicht grün */
  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).
   In V2 alle im Logo-Grün — ruhiger Marken-Akzent, keine Farbwechsel. */
.vorteile-group-title .vg-ico {
  width: 34px; height: 34px; flex: none; display: block;
}

/* In der V2-Vorteile-Sektion fallen die Tag-Pills weg. */
#vorteile .card > .tag,
#vorteile .card > .tags-row { display: none; }

/* ----------------------------------------------------------------------
   Aufräumen, damit es nicht „crazy" wirkt (wie in V3)
   ---------------------------------------------------------------------- */

/* Dunkles Band: alles weiß statt Gelb. */
.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 orange). */
.product .price           { color: var(--text); }
.product .price small     { color: var(--muted); }

/* Problem-Sublabels (Pferd/Betrieb) neutral schwarz statt grün. */
.pain .angles b { color: var(--text); }

/* „In Entwicklung"-Badge NICHT orange (Amber gehört allein dem CTA).
   Stattdessen dezenter grüner Badge. */
.product .soon {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  color: var(--primary-dark);
}

/* ----------------------------------------------------------------------
   Dunkle Bänder: milder & näher am Logo-Grün
   (Thomas wollte ~80 % Deckkraft — nicht so kräftig wie im Original).
   ---------------------------------------------------------------------- */
:root {
  --band:       #4E5C2C;   /* Footer — weicheres Oliv-Grün */
  --band-bg:    #66783B;   /* Proof-/CTA-Band — milder, sage-grün */
  --band-muted: #D2D8BE;
}