/* =====================================================================
   Startseite – originalgetreue Sektionen & Effekte
   (Parallax-Hero, Parallax-Headlines, Logowand, Parallax-Hintergrund)
   ===================================================================== */

/* ---------- Hero: Vollbild-Slideshow mit Ken-Burns-Effekt ---------- */
.hero-slider {
  position: relative; min-height: 92vh; display: flex; align-items: flex-end;
  overflow: hidden; color: #fff; background: #262626;
}
.hero-slider__slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; will-change: opacity, transform; animation: heroCycle 24s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 8s; }
.hero-slide:nth-child(3) { animation-delay: 16s; }
@keyframes heroCycle {
  0%   { opacity: 0; transform: scale(1.05); }
  4%   { opacity: 1; }
  29%  { opacity: 1; transform: scale(1.13); }
  34%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.13); }
}
.hero-slider::after {            /* Abdunklung für Lesbarkeit */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(38,38,38,.35) 0%, rgba(38,38,38,.15) 40%, rgba(38,38,38,.8) 100%);
}
.hero-slider__inner { position: relative; z-index: 2; padding: 0 24px 88px; max-width: 820px; }
.hero-slider .eyebrow { color: #b6e36a; }
.hero-slider h1 { color: #fff; }
.hero-slider p { color: #e9e9dd; font-size: 1.25rem; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .hero-slide { animation: none; opacity: 1; } .hero-slide:nth-child(n+2){ display:none; } }

/* ---------- Parallax-Watermark-Headlines (animation:parallax) ---------- */
.split-claim { position: relative; }
.claim-bg {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--green); line-height: 1.12; margin-bottom: .15rem; will-change: transform, opacity;
}
.claim-bg--ink { color: var(--ink); }
.claim-cat {
  display: block; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800;
  letter-spacing: .12em; color: var(--ink); margin-bottom: .5rem;
}

/* ---------- Kunden & Partner: Logowand (SW -> Farbe bei Hover) ---------- */
.logo-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; margin-top: 36px;
}
.logo-wall a { display: block; }
.logo-wall img {
  width: 100%; height: 140px; object-fit: contain; padding: 16px 24px;
  filter: grayscale(1); opacity: .55; transition: .25s ease;
}
.logo-wall img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* ---------- Performance: Kennzahl-Grafiken ---------- */
.stats-graphics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 30px; }
.stats-graphics img { width: 100%; height: auto; }

/* ---------- CO2-Sektion: Parallax-Hintergrundbild ---------- */
.parallax-band {
  position: relative; color: #fff; text-align: center;
  background-size: cover; background-position: center;
  background-attachment: fixed;          /* << klassischer Parallax-Effekt */
  padding: 130px 0;
}
.parallax-band::before { content: ""; position: absolute; inset: 0; background: rgba(20,26,12,.55); }
.parallax-band .container { position: relative; z-index: 1; }
.parallax-band h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); }
.parallax-band h2 small { display: inline; font-weight: 400; opacity: .8; font-size: .6em; }
@media (max-width: 900px) {        /* fixed-attachment ruckelt auf Mobil -> normal */
  .parallax-band { background-attachment: scroll; padding: 90px 0; }
}

/* ---------- Vorteile: 3 Icon-Punkte ---------- */
.vorteile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 36px; text-align: center; }
.vorteile__item img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto 18px; }
.vorteile__item h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.4; }

@media (max-width: 900px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .stats-graphics { grid-template-columns: repeat(2, 1fr); }
  .vorteile { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .hero-slider { min-height: 78vh; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}