/* ============================================================
   GEPRO V3 - Startseite (Premium-Stil)
   Links-buendig, viel Whitespace, Hero-Text in linker Spalte.
   ============================================================ */

/* ---------- Hero (dunkel, Produkt rechts, Text in linker Spalte) ---------- */
.hero-v3 { position: relative; min-height: 100svh; display: flex; align-items: center; background: #06070A; overflow: clip; padding: calc(var(--nav-h) + 4vh) 0 6vh; }
.hero-v3__bg { position: absolute; inset: 0; z-index: 0; }
.hero-v3__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero-v3__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,7,10,.94) 0%, rgba(6,7,10,.7) 30%, rgba(6,7,10,.15) 56%, transparent 72%); }
.hero-v3__inner { position: relative; z-index: 2; width: 100%; }
.hero-v3__col { max-width: 40rem; }
.hero-v3 .eyebrow { color: var(--on-dark-2); }
.hero-v3 h1 { color: #fff; margin-top: 1.1rem; }
.hero-v3 .lead { color: var(--on-dark-2); margin-top: 1.6rem; max-width: 34ch; }
.hero-v3 .cta { display: flex; gap: .9rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-v3 .hero-meta { margin-top: clamp(3rem,2rem + 4vw,5rem); display: flex; flex-wrap: wrap; gap: 2.4rem 3.4rem; }
.hero-meta__item b { display: block; font-size: clamp(1.5rem,1.2rem + 1vw,2rem); font-weight: 700; color: #fff; letter-spacing: var(--tr-tight); }
.hero-meta__item span { font-size: .9rem; color: var(--on-dark-3); margin-top: .15rem; display: block; }

/* ---------- Statement (links, gross) ---------- */
.statement-sec h2 { font-size: var(--fs-h2); max-width: 22ch; letter-spacing: var(--tr-tighter); line-height: 1.08; }
.statement-sec .lead { margin-top: 1.6rem; max-width: 56ch; }

/* ---------- Sektions-Hintergruende ---------- */
.bg-soft { background: var(--bg-soft); }
.bg-grad { background: var(--grad-page); }
.bg-dark { background: var(--ink-900); color: var(--on-dark); background-image: var(--grad-tile-dark); }
.bg-dark .eyebrow { color: var(--on-dark-2); }
.bg-dark h2 { color: #fff; }

/* CTA-Band ist in components-v3.css definiert (geteilt). */

@media (max-width: 800px) {
  .hero-v3 { align-items: flex-end; min-height: 92svh; }
  .hero-v3__col { max-width: none; }
  .hero-v3__bg img { object-position: 70% 28%; }
  .hero-v3__scrim { background: linear-gradient(180deg, rgba(6,7,10,.5) 0%, rgba(6,7,10,.15) 26%, rgba(6,7,10,.6) 62%, rgba(6,7,10,.95) 100%); }
  .hero-v3 .lead { max-width: none; }
}