/* === Hero (außerhalb von <main>) === */
.home section.hero{
  max-width: 1400px; margin: 10px auto 12px;
}
.home section.hero img{
  display: block; margin: 0 auto; width: 100%; height: auto;
}

/* === Feature-Kacheln (Startseite) === */
.home main > section:first-child{
  display: flex; flex-wrap: wrap; gap: 16px;
}
.home main > section:first-child > section{
  flex: 1 1 20%; min-width: 100px;
}
.home main > section:first-child > section h2{
  text-align: center; min-width: 150px; width: 100%;
  font-size: clamp(14px, 2vw, 24px);
}
.home main > section:first-child > section img{
  display: block; margin-inline: auto; width: 60%;
  max-width: 160px; min-width: 100px; height: auto;
}

/* === Mobile <700px: Kacheln als Zeilen === */
@media (max-width:700px){
  .home main > section:first-child{
    display:flex; flex-direction:column; gap:0;
  }
  .home main > section:first-child > section{
    display:flex; align-items:center; gap:12px;
    min-height: clamp(56px, 12vw, 80px); padding: 6px 0;
  }
  .home main > section:first-child > section img{
    flex:0 0 25%; max-width:25%; height:auto; margin:0 auto; object-fit:contain;
  }
  .home main > section:first-child > section h2{
    flex:0 0 75%; margin:0; padding-left:8px; text-align:left;
    font-size: clamp(1rem, 4.2vw, 1.25rem); line-height:1.2;
  }
}

/* Hero-Bild: volle Breite, begrenzte Höhe wie zuvor */
.hero img {
  width: 100%;
  height: auto;
  max-height: 520px;     /* ggf. auf 400–600px anpassen */
  object-fit: cover;
  display: block;
}

/* Services-Icons: feste, sinnvolle Icon-Größe wie vorher */
.services section img {
  width: 150px;          /* ggf. 140–180px feinjustieren */
  height: auto;
  display: block;
  margin: 0 auto 8px;    /* zentrieren + kleiner Abstand zur Überschrift */
}

/* Fallback: falls .services im HTML noch nicht gesetzt ist */
main > section:first-of-type > section img {
  width: 150px;
  height: auto;
}
/* Services-Grid & Ausrichtung (wie zuvor) */
.services { 
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.services section { text-align: center; }
.services h2 { margin: 8px 0 0; }

/* Responsiv */
@media (max-width: 900px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .services { grid-template-columns: 1fr; } }

/* Falls .services im HTML noch nicht gesetzt ist – Fallback auf die erste Section-Gruppe */
main > section:first-of-type {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
main > section:first-of-type > section { text-align: center; }