/* =========================
   Hero
========================= */
.hero{ position:relative; margin-top:0 }
.hook-Image{
  width:100%; height:auto; display:block; object-fit:cover;
}
.hero::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.45);
}
.hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:0 0px; z-index:1;
  gap: clamp(32px, 8vw, 100px);   /* dynamischer Abstand */
  margin-top: 100px;
}
.hero-hooktext{ transform:translateY(100px); margin-bottom:100px }

a{ color:inherit; text-decoration:none }
.btn{
  display:inline-block; padding:1rem 5rem; border-radius:999px;
  background:#d5f3e2; color:#1a1a1a; font-size:clamp(.9rem,1.6vw,1.1rem); font-weight:600;
}
.hero-buttons{ display:flex; gap:150px; text-align: center;}

/* =========================
   Speed Galerie
========================= */
.speed-gallery{
  background:#f3f3f3;
  padding:40px 0;
}
.speed-gallery .section-title{ margin-bottom:40px }

/* Jede Reihe */
.speed-grid{
  display:flex;
  /* gleichmäßige Abstände links/rechts und zwischen den Items */
  justify-content: center;
  /* Abstand zwischen Items und zum Rand identisch: */
  margin-bottom: 40px;    /* Abstand zwischen Reihen */
  gap: 20px;
}

/* Standardhöhe für Bilder-Reihen */
:root{
  --rowH: 330px;          /* Reihenhöhe Bild */
}

/* Kachel */
.speed-item{
  height: var(--rowH);    /* EINHEITLICHE HÖHE */
  flex: 0 0 auto;         /* Breite ergibt sich aus Inhalt (AR) */
  overflow: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
}

/* Medien behalten ihr Seitenverhältnis */
.speed-item img,
.speed-item video{
  height: 100%;           /* Höhe füllen */
  width: auto;            /* Breite folgt AR */
  object-fit: cover;      /* sauberer Beschnitt, keine Verzerrung */
  display: block;
  border-radius: var(--radius);
}
/* Video-Hover: sanfter Zoom + leicht abdunkeln */
.speed-item video{
  transition: transform .25s ease, filter .25s ease;
  transform-origin: center;
  cursor: pointer;            /* zeigt an: klickbar (optional) */
}

.speed-item:hover video{
  transform: scale(1.5);
  filter: brightness(0.6);
}
.speed-grid--4--video { gap: 30px;} /* Reels/Vertikal 426 378 */
.speed-grid--height-1 { gap: 22px;} /* Reels/Vertikal 337 299*/
.speed-grid--height-2 { gap: 23px;} /* Reels/Vertikal 321 286*/
.speed-grid--height-3 { gap: 28px;} /* Reels/Vertikal 301 267*/
.speed-grid--4--video .speed-item{ aspect-ratio: 9 / 16; height: 473px;} /* Reels/Vertikal 426 378 */
.speed-grid--height-1 .speed-item{ height: 374px;} /* Reels/Vertikal 337 299*/
.speed-grid--height-2 .speed-item{ height: 357px;} /* Reels/Vertikal 321 286*/
.speed-grid--height-3 .speed-item{ height: 334px;} /* Reels/Vertikal 301 267*/

/* =========================
   Vision
========================= */
.vision{ background:#fff; padding:100px 0; display: flex;justify-content: center; align-items: center;gap: 100px; flex-wrap: wrap-reverse;}
.vision .container{ width: 600px; max-width: 90%; }
.vision-text h3{ text-align:left; }
.vision-text p{ text-align:justify;}
.vision img{
  width:400px; height:400px; object-fit:cover; border-radius:50%;
  box-shadow:0 6px 24px rgba(0,0,0,.12); object-position:0 -3px;
}

/* =========================
   Services
========================= */
/* ======= Services (feste Karten, Wrap, Randabstand) ======= */
.services { padding: 48px 0; background:#f5f7f5; }
.services .section-title { margin-bottom: 28px; }

.services .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;               /* Abstand zur Wand */
}

/* Statt Grid jetzt Flex-Wrap mit festen Kachelgrößen */
.services-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;       /* mittig ausrichten */
  gap: 28px;                     /* Abstand zwischen Karten */
}

.service-item{
  flex: 0 0 360px;               /* feste Breite (wrapt automatisch) */
  height: 200px;                 /* feste Höhe */
  background:#DBF2DF;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.06);
  padding: 16px 18px;            /* kleinerer Innenabstand */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* engere Typo in der Karte */
.service-item h4{
  margin: 4px 0 8px;
  font-size: 1.1rem;
  text-align: center;
}
.service-item p{
  margin: 0;                     /* Abstand Text → Box verkleinert */
  line-height: 1.5;
  font-size: .95rem;
  color:#2c2c2c;
}

@media (max-width: 1200px){
  .speed-grid--4--video .speed-item{ aspect-ratio: 9 / 16; height: 378px;} /* Reels/Vertikal */
  .speed-grid--height-1 .speed-item{ height: 299px;} /* Reels/Vertikal */
  .speed-grid--height-2 .speed-item{ height: 286px;} /* Reels/Vertikal */
  .speed-grid--height-3 .speed-item{ height: 267px;} /* Reels/Vertikal */
  .speed-item{
    height: 264px;    /* EINHEITLICHE HÖHE */
    }
  .service-item{ flex-basis: 320px; height: 220px; padding: 14px 16px; }
}

@media (max-width: 1000px){
  .speed-grid--4--video .speed-item{ aspect-ratio: 9 / 16; height: 315px;} /* Reels/Vertikal */
  .speed-grid--height-1 .speed-item{ height: 249px;} /* Reels/Vertikal */
  .speed-grid--height-2 .speed-item{ height: 238px;} /* Reels/Vertikal */
  .speed-grid--height-3 .speed-item{ height: 222px;} /* Reels/Vertikal */
  .speed-item{
    height: 212px;    /* EINHEITLICHE HÖHE */
    }

}
@media (max-width: 800px){
  .speed-grid--4--video .speed-item{ aspect-ratio: 9 / 16; height: 236px;} /* Reels/Vertikal */
  .speed-grid--height-1 .speed-item{ height: 187px;} /* Reels/Vertikal */
  .speed-grid--height-2 .speed-item{ height: 178px;} /* Reels/Vertikal */
  .speed-grid--height-3 .speed-item{ height: 167px;} /* Reels/Vertikal */
  .speed-item{
    height: 165px;    /* EINHEITLICHE HÖHE */
    }
  
    .hero {
    height: 800px; /* feste Höhe einstellen */
    overflow: hidden; /* alles Überstehende abschneiden */
  }

  .hero .hook-Image {
    width: 100%;
    height: 800px;
    object-fit: cover; /* Bild wird beschnitten, behält AR */
    object-position: center; /* zentriert den Bildausschnitt */
  }

  .hero-overlay {
    padding: 0 20px; /* etwas schmalere Abstände für Text */
  }
    /* Buttons untereinander */
  .hero-buttons{
    flex-direction: column;   /* statt nebeneinander */
    gap: 14px;                /* Abstand zwischen den Buttons */
    align-items: center;      /* mittig ausrichten */
  }
  .vision .container{
    padding: 0 70px;
  }
  /* Optional: Buttons etwas breiter machen */
  .hero-buttons .btn{
    width: min(420px, 90%);   /* schöne, mobile Breite */
  }

  /* (Optional) Headline/Abstand etwas kompakter */
  .hero-hooktext{
    transform: translateY(60px);
    margin-bottom: 24px;
  }
  .services .container{ padding: 0 24px; }
  .service-item{ flex-basis: calc(50% - 12px); height: 220px; }
}

@media (max-width: 650px){
  /* 1 Spalte unter 800px */
  .speed-grid{
    display: grid;
    grid-template-columns: 1fr; /* eine Spalte */
    gap: 20px; /* Abstand zwischen den Bildern */
    padding: 0 70px;
  }

  /* Einheitliche Höhe (kannst du anpassen) */
  .speed-item{
    height: auto;         /* Höhe automatisch durch Bild */
  }

  .speed-item img,
  .speed-item video{
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .speed-grid--4--video .speed-item{ height: auto;} /* Reels/Vertikal */
  .speed-grid--height-1 .speed-item{ height: auto;} /* Reels/Vertikal */
  .speed-grid--height-2 .speed-item{ height: auto;} /* Reels/Vertikal */
  .speed-grid--height-3 .speed-item{ height: auto;} /* Reels/Vertikal */
  .services .container{ padding: 0 88px; }
  .service-item{ flex-basis: 100%; height: auto; } /* auf sehr klein: Höhe freigeben */
}