/* ============================================================
   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; }

/* ---------- Warum GEPRO (Gruende mit Icons + Forschungssiegel) ---------- */
.warum-sec { position: relative; overflow: clip; }
.warum-sec__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.warum-sec__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.warum-sec__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 80% 10%, rgba(8,9,11,.45) 0%, rgba(8,9,11,.82) 70%); }
.warum-sec > .wrap { position: relative; z-index: 1; }
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .6rem + 1vw, 1.5rem); }
.reason { background: rgba(255,255,255,.045); border-radius: var(--r-tile);
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); display: flex; flex-direction: column; gap: .85rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-float);
  min-height: 248px; }
.reason__ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(18,160,220,.15); color: var(--blue); }
.reason__ico svg { width: 25px; height: 25px; }
.reason__num { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.35rem); font-weight: 700;
  letter-spacing: var(--tr-tighter); line-height: 1.02; color: #fff; }
.reason__num .u { font-size: .74em; color: var(--blue); font-weight: 700; margin-left: .04em; vertical-align: baseline; }
.reason__label { font-size: .95rem; color: var(--on-dark-2); line-height: 1.5; margin-top: auto; }
.reason__badge { width: 76px; height: 76px; border-radius: 16px; background: #fff; display: grid;
  place-items: center; padding: .5rem; box-shadow: var(--shadow-pop); }
.reason__badge img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 920px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .reasons { grid-template-columns: 1fr; } .reason { min-height: 0; } }

/* 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; }
}