/* ==================================================================== */
/* Startseite – Designiteration 2                                       */
/* Eigenstaendiges Stylesheet nur fuer index.php, damit die bereits     */
/* bestehenden Unterseiten (noch im alten Look) unangetastet bleiben.   */
/* ==================================================================== */

/* ---- Hero ---------------------------------------------------------- */
.home-hero {
  padding-block: clamp(40px, 6vw, 72px) var(--section-gap);
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 960px) {
  .home-hero__grid {
    /* Gruppenfoto bewusst groesser als die Textspalte (auf Wunsch,
       2026-11-04 - vorher 0.92fr, also etwas kleiner als der Text). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--space-7);
  }
}

.home-hero__eyebrow {
  margin-bottom: var(--space-2);
}

.home-hero h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);
  letter-spacing: -0.01em;
}

.home-hero__sub {
  margin-top: var(--space-3);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 540px;
}

.home-hero__area {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
}

.home-hero__area svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: var(--color-primary);
}

.home-hero__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-hero__trust {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 540px;
}

@media (min-width: 560px) {
  .home-hero__trust {
    /* auto-fit statt starrer 3 Spalten: seit die Bildspalte breiter ist
       (2026-11-04), ist die Textspalte schmaler - bei starren 3 Spalten
       haette "Meisterfachbetrieb" sonst nicht mehr in sein Drittel
       gepasst und waere mitten im Wort umgebrochen (overflow-wrap:
       break-word als Notfall-Netz, siehe global.css). So rutscht das
       dritte Element bei Bedarf einfach in die naechste Zeile. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

.home-hero__trust-item {
  border-top: 2px solid var(--color-primary);
  padding-top: 10px;
}

.home-hero__trust-item strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: 0.95rem;
  line-height: 1.3;
}

.home-hero__media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Muss zum tatsaechlichen Seitenverhaeltnis von images/home/gruppenbild.jpeg
     passen (aktuell 1565x1061) - sonst schneidet object-fit:cover oben/unten
     etwas vom Bild ab (z.B. das Firmenschild am unteren Rand). */
  aspect-ratio: 1565 / 1061;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(16, 45, 81, 0) 55%, rgba(16, 45, 81, 0.35) 100%);
  pointer-events: none;
}

/* ---- Leistungen: asymmetrisches Bento-Raster ----------------------- */
.home-services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.home-services__head .section-heading {
  margin-bottom: 0;
}

.bento-services {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .bento-services {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(220px, 1fr));
  }
  .bento-services > .bento-tile:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

.bento-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 220px;
  color: #fff;
}

.bento-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.bento-tile:hover img,
.bento-tile:focus-visible img {
  transform: scale(1.04);
}

.bento-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 45, 81, 0.82) 0%, rgba(16, 45, 81, 0.25) 55%, rgba(16, 45, 81, 0) 75%);
  z-index: 1;
}

.bento-tile__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
}

.bento-tile:nth-child(1) .bento-tile__content {
  padding: var(--space-4);
}

.bento-tile__content h3 {
  color: #fff;
  font-size: 1.1875rem;
}

.bento-tile:nth-child(1) .bento-tile__content h3 {
  font-size: 1.5rem;
}

.bento-tile__content p {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 420px;
  display: none;
}

.bento-tile:nth-child(1) .bento-tile__content p {
  display: block;
}

.bento-tile__arrow {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
}

.bento-tile__arrow::after {
  content: "\2192";
  transition: transform var(--transition-base);
}

.bento-tile:hover .bento-tile__arrow::after {
  transform: translateX(3px);
}

/* ---- Unternehmensabschnitt / Team ----------------------------------- */
.founder-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

@media (min-width: 960px) {
  .founder-section__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-7);
  }
  .founder-section__grid--media-right {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
  .founder-section__grid--media-right .founder-section__media {
    order: 2;
  }
}

.founder-section__media {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.founder-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.founder-section__quote {
  margin-top: var(--space-4);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-navy);
}

/* ---- Kundenstimmen: rotierendes Karussell, eine Bewertung sichtbar -- */
.review-carousel {
  margin-top: var(--space-5);
  max-width: 760px;
  margin-inline: auto;
}

/* Alle Folien liegen uebereinander gestapelt und sind vertikal zentriert.
   Die Hoehe des Viewports wird per JS auf die hoechste Folie gesetzt
   (main.js, syncHeight()), damit die Karte beim Durchrotieren nie die
   Groesse wechselt - egal wie kurz oder lang der Bewertungstext ist. */
.review-carousel__viewport {
  position: relative;
}

.review-carousel__slide {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.review-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.review-carousel__controls {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.review-carousel__arrow {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.review-carousel__arrow:hover {
  background: var(--color-soft-blue);
  border-color: var(--color-primary);
}

.review-carousel__dots {
  display: flex;
  gap: 8px;
}

.review-carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
}

.review-carousel__dot.is-active {
  background: var(--color-primary);
}

/* ---- Starker Kontaktabschluss ---------------------------------------- */
.home-contact {
  background: var(--color-navy);
  color: #fff;
}

.home-contact__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 860px) {
  .home-contact__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-6);
    align-items: center;
  }
}

.home-contact h2 {
  color: #fff;
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
}

.home-contact p {
  margin-top: var(--space-2);
  color: var(--color-on-navy-muted);
  max-width: 480px;
}

.home-contact__actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-contact__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.home-contact__card dt {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-navy-muted);
  font-weight: 600;
}

.home-contact__card dd {
  margin: 4px 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: #fff;
}

.home-contact__card dd:last-child {
  margin-bottom: 0;
}

.home-contact__card a {
  color: #fff;
}