/* =========================================================================
   HayHo Landingpage — „Neu" (Stand nach 3. Feedback Kraft / Marcy)
   Lädt NACH styles.css.
   - Logo-Farben aus V1: Grün #9CAF53 / Dunkelgrün #5A6B33, Amber.
   - „HayHo" immer im hellen Logo-Grün.
   - Durchgängig helles Beige (wie V2), KEINE weißen Wechsel-Sektionen.
   - Eckige Ecken (wie V2). Bänder milder (~80 %).
   - Foto-Hero, gruppierte Vorteile, Funktions-Bilder mit Scroll-Überblendung.
   ========================================================================= */

:root {
  --bg:            #FCF8EA;   /* helles, warmes Creme-Beige – heller & weniger grau */
  --surface:       #FFFFFF;
  --surface-2:     #F7F2E8;

  --primary:       #9CAF53;   /* Logo-Grün (V1) */
  --primary-dark:  #5A6B33;   /* Dunkelgrün (V1) */
  --accent:        #FF9C00;
  --accent-ink:    #2C2206;

  --text:          #221F18;
  --muted:         #4E4940;
  --line:          rgba(33, 30, 22, .14);

  --band:          #5A6B33;   /* einheitliches Dunkelgrün (= primary-dark) */
  --band-bg:       #5A6B33;   /* Bänder + Footer im selben Dunkelgrün wie die Akzente */
  --band-text:     #F4F6EC;
  --band-muted:    #E6EAD7;   /* kräftiger als zuvor (#D7DCC5), bleibt unter dem Weiß der Überschriften */

  --radius:    0;             /* eckig wie V2 */
  --radius-lg: 0;
  --shadow-sm: 0 2px 10px rgba(40, 55, 20, .07);
  --shadow:    0 14px 34px rgba(40, 55, 20, .12);
  --shadow-lg: 0 28px 60px rgba(40, 55, 20, .18);

  --section-y: clamp(50px, 7vw, 104px);   /* ~20 % kompakter */
}

/* „HayHo" immer im hellen Logo-Grün */
.hl, .hero h1 .hl { color: var(--primary); }   /* „HayHo" durchgängig im hellen Logo-Grün */
#produkte .product .hl { color: var(--text); }  /* in den Produkt-Karten (kleine Unterschrift) schwarz */
.band h2 { color: #fff; }                       /* Band-Überschriften rein weiß */

.eyebrow { color: var(--primary-dark); }
/* Produktname HayHo behält in Großbuchstaben-Zeilen die Logo-Schreibweise */
.nocaps { text-transform: none; letter-spacing: normal; }
/* Eyebrow-Strich überall entfernen (war mal da, mal weg – jetzt einheitlich ohne) */
.eyebrow::before { display: none; }
.floating-cta { color: var(--accent-ink); }

/* Karten heben beim Hover */
.card { transition: transform .16s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pain.card:hover { transform: translateY(-2px); }

/* Problem-Icons: ohne Box, kräftig dunkelgrün */
.pain .ic { background: none; width: auto; height: auto; margin-bottom: .5rem; }
.pain .ic img { display: block; width: 46px; height: 46px; }
.pain .ic svg { width: 42px; height: 42px; color: #33421A; }

/* Pferd/Betrieb-Sublabels: schwarzfett und auf gleiche Breite (Text bündig) */
.pain .angles b { color: var(--text); flex: none; width: 62px; }

/* Varianten-Icons: ebenfalls ohne Box, größer & dunkler */
.variant .v-ic { background: none; width: auto; height: auto; margin: 0 auto .4rem; }
.variant .v-ic img { display: block; width: 42px; height: 42px; }
.variant .v-ic svg { width: 40px; height: 40px; color: #33421A; }

/* Durchgehend Beige – die weißen Elemente (Karten) sorgen für den Kontrast. */
.problem { background: var(--bg); }

/* Footer in der gleichen milderen Grünfläche wie das Proof-Band (nicht so dunkel) */
.site-footer { background: var(--band-bg); }

/* =========================================================================
   FOTO-HERO mit großem Hintergrundbild (+ optionalem Video)
   ========================================================================= */
.hero--photo { position: relative; color: #fff; overflow: hidden;
  padding-block: clamp(96px, 17vh, 200px); }
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: url("img/hayho_fressen.webp") center / cover no-repeat;
}
.hero--photo .hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(18,28,8,.86), rgba(18,28,8,.5) 55%, rgba(18,28,8,.18)); }
.hero--photo .hero-inner { max-width: 700px; }
.hero--photo h1 { color: #fff; }
.hero--photo .lead { color: rgba(255,255,255,.92); }
.hero--photo .eyebrow { color: #CFE08A; }
.hero--photo .eyebrow::before { background: #CFE08A; }
.hero--photo .hl { color: #CFE08A; }
.hero--photo .trust-row { border-top-color: rgba(255,255,255,.28); }
.hero--photo .trust-row span { color: rgba(255,255,255,.92); }
.hero--photo .trust-row svg { color: #CFE08A; }
.hero--photo .hero-cta { max-width: 420px; }
.hero--photo .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }
.hero--photo .btn--ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* =========================================================================
   EINSATZBEREICHE — eine groß, drei klein, nicht klickbar, kein Hover-Zoom
   ========================================================================= */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.uc-card { position: relative; overflow: hidden; box-shadow: var(--shadow-sm); aspect-ratio: 4 / 3; }
@media (max-width: 620px) { .uc-grid { grid-template-columns: 1fr; } }
.uc-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uc-card figcaption img { width: 22px; height: 22px; flex: none; }
.uc-card figcaption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(28, 38, 12, .82));
  color: #fff; padding: 1.6rem .95rem .85rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; gap: .5rem;
}
.uc-card figcaption svg { width: 19px; height: 19px; color: var(--accent); flex: none; }

/* =========================================================================
   FUNKTION — zwei Bilder neben dem Text, beim Scrollen überblendend (sticky)
   ========================================================================= */
.how-grid { align-items: start; }
.how-stack { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.how-shot { margin: 0; background: #fff; border: 1px solid var(--line); padding: clamp(12px, 1.8vw, 22px); box-shadow: var(--shadow-sm); }
.how-shot img { width: 100%; height: auto; display: block; }

/* =========================================================================
   VORTEILE — gruppiert (V2-Struktur), grüne Linien-Icons
   ========================================================================= */
.vorteile-group { margin-bottom: clamp(56px, 8vw, 110px);
  display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.vorteile-group:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .vorteile-group { grid-template-columns: 1fr; gap: 1.2rem; } }
@media (min-width: 861px) { .vg-left { position: sticky; top: 96px; } }
.vorteile-group-title {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--text);
  margin: 0 0 1.1rem;
}
.vorteile-group-title .vg-ico { width: 38px; height: 38px; flex: none; display: block; }
.vg-photo { width: 100%; height: auto; display: block; box-shadow: var(--shadow); }
.vg-right { display: grid; gap: clamp(14px, 2vw, 22px); }
.vg-right .card h3 { margin-top: 0; }

/* =========================================================================
   VERGLEICHSTABELLE — ruhiger V2-Stil
   ========================================================================= */
.compare td, .compare th { color: var(--text); }
.compare thead th { background: var(--primary-dark); color: #fff; border-bottom: 0; }
.compare thead th.hayho { color: #fff; }
.compare .col-hayho { background: color-mix(in srgb, var(--primary) 15%, var(--surface)); }
.compare td.col-hayho { color: var(--primary-dark); font-weight: 700; }

/* =========================================================================
   ZITAT-BAND (grün, weißer Text — Bugfix: .band p hat überschrieben)
   ========================================================================= */
.pullquote { background: linear-gradient(rgba(58, 72, 28, .85), rgba(58, 72, 28, .85)), url("img/hayho_heu.webp") center / cover; color: #fff; text-align: center; }
/* CTA-Band „Artgerecht füttern" mit Stallgassen-Bild + gleichem grünem Overlay wie das Heu-Band */
.cta-band { background: linear-gradient(100deg, rgba(18, 28, 8, .86), rgba(18, 28, 8, .5) 55%, rgba(18, 28, 8, .18)), url("img/hayho_stallgasse.webp") center / cover; }
.pullquote p { color: #fff; font-family: var(--font-display); font-weight: 800; line-height: 1.18;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); max-width: 24ch; margin: 0 auto; }
.pullquote .src { color: rgba(255, 255, 255, .9); font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-top: 1rem; }

/* =========================================================================
   BÄNDER: alles weiß (wie V2)
   ========================================================================= */
.band .eyebrow { color: #fff; }
.band .eyebrow::before { background: #fff; }
.stat .num { color: #fff; }
.cta-band .cta-phone svg { color: #fff; }

/* =========================================================================
   PRODUKTE: kein Grün, kein Orange
   ========================================================================= */
#produkte .product .price { color: var(--text); }
#produkte .product .price small { color: var(--muted); }
.product .soon { background: color-mix(in srgb, var(--text) 8%, var(--surface)); color: var(--muted); }

/* =========================================================================
   TECHNIK + DOWNLOADS
   ========================================================================= */
.tech-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .tech-grid { grid-template-columns: 1fr; } }
.spec-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .1rem; }
.spec-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.spec-list li b { color: var(--text); font-weight: 700; }
.spec-list li span { color: var(--muted); text-align: right; }
.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 680px) { .downloads { grid-template-columns: 1fr; } }
.dl-card { display: flex; gap: 1rem; align-items: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); color: var(--text);
  transition: transform .15s ease, box-shadow .2s ease; }
.dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dl-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.dl-ic svg { width: 24px; height: 24px; color: var(--primary-dark); }
.dl-card b { display: block; font-family: var(--font-display); }
.dl-card small { color: var(--muted); }
.section-photo { width: 100%; height: clamp(220px, 30vw, 380px); object-fit: cover; box-shadow: var(--shadow); }

/* =========================================================================
   FORMULAR: weiße Felder (nur umrandete Kästen, kein beiger Hintergrund)
   ========================================================================= */
.field input, .field select, .field textarea { background: #fff; border-color: rgba(33, 30, 22, .22); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); }

/* =========================================================================
   Gestaffeltes Einblenden (Stagger) für Karten-Gruppen
   ========================================================================= */
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.stagger.in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .stagger > * { opacity: 1; transform: none; transition: none; } }

/* =========================================================================
   NEU: Varianten-/Material-Streifen
   ========================================================================= */
.variants { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 700px) { .variants { grid-template-columns: 1fr 1fr; } }
.variant { background: var(--surface); border: 1px solid var(--line); padding: 1.3rem 1.2rem; text-align: center; box-shadow: var(--shadow-sm); }
.variant .v-ic { width: 40px; height: 40px; margin: 0 auto .7rem; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.variant .v-ic svg { width: 22px; height: 22px; color: var(--primary-dark); }
.variant b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.variant small { color: var(--muted); font-size: .88rem; }

/* =========================================================================
   NEU: Ablauf (4 Schritte)
   ========================================================================= */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 30px); counter-reset: ab; }
@media (max-width: 760px) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .ablauf { grid-template-columns: 1fr; } }
.ablauf-step { position: relative; }
.ablauf-step::before { counter-increment: ab; content: counter(ab);
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .9rem;
  background: var(--primary-dark); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.ablauf-step h3 { margin: .1em 0 .25em; }
.ablauf-step p { color: var(--muted); font-size: .96rem; margin: 0; }
/* mehr Luft nach der Ablauf-Sektion zum nächsten grünen Band */
#ablauf { padding-bottom: clamp(74px, 10vw, 150px); }

/* ===== Fotos: dezent abgeschrägte untere Ecken (Anlehnung Fressgitter) ===== */
.uc-card,
.vg-photo,
.section-photo {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px),
                     calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px));
}
@media (max-width: 620px) {
  .uc-card, .vg-photo, .section-photo {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px),
                       calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
  }
}

/* ===== Vergleichstabelle: auf dem Smartphone als gestapelte Karten ===== */
@media (max-width: 620px) {
  .compare { border: 0; box-shadow: none; background: transparent; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare td { display: block; }
  .compare tr {
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); margin-bottom: 14px; padding: 6px 0 8px;
    overflow: hidden;
  }
  .compare td {
    display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
    border-bottom: 1px solid var(--line); padding: 11px 16px; text-align: right;
  }
  .compare tr td:last-child { border-bottom: 0; }
  .compare td.feature {
    display: block; text-align: left; font-size: 1.02rem; font-weight: 700;
    color: var(--text); padding: 6px 16px 10px; border-bottom: 2px solid var(--primary);
    margin-bottom: 2px;
  }
  .compare td::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
    text-align: left; letter-spacing: .02em;
  }
  .compare td.feature::before { content: none; }
  .compare td.col-hayho {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary-dark); font-weight: 700;
  }
  .compare td.col-hayho::before { color: var(--primary-dark); }
}

/* ===== Mobil: Band-Überschriften zentrieren (wie die übrigen Sektionen) ===== */
@media (max-width: 620px) {
  .band .section-head { text-align: center; margin-inline: auto; }
  .band .section-head .eyebrow { margin-inline: auto; }
}

/* ===== Partner-Bereich (Groundmaster) ===== */
.partner-card {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  grid-template-areas: "photo video" "text video";
  gap: clamp(18px, 2.5vw, 30px) clamp(24px, 4vw, 48px);
  align-items: start;
}
.partner-media { grid-area: photo; margin: 0; }
.partner-media .section-photo { width: 100%; height: auto; display: block; }
.partner-text { grid-area: text; display: flex; flex-direction: column; }
.partner-text p {
  font-size: 1.05rem; color: var(--muted); line-height: 1.6; margin: 0 0 1.4rem;
}
.partner-text .btn { align-self: flex-start; }
.partner-video-wrap { grid-area: video; align-self: stretch; min-height: 0; }
.partner-video {
  width: 100%; height: 100%; min-height: 340px; object-fit: cover;
  display: block; background: #10120c;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px),
                     calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px));
}
@media (max-width: 760px) {
  .partner-card { grid-template-columns: 1fr; grid-template-areas: "photo" "video" "text"; gap: 1.4rem; }
  .partner-video-wrap { align-self: stretch; }
  .partner-video {
    height: auto; width: 100%; max-width: 100%; max-height: none; min-height: 0;
    margin-inline: 0; object-fit: contain;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px),
                       calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
  }
}