/*=============== MATERIAL-HERO (messingdrehteile, bleifreies-messing, kupferdrehteile + EN) ===============
   Teilebild (16:9) im selben Container wie die Heros der übrigen Unterseiten (.container-image),
   frei stehend ohne Text und Abdunklung. Grundformat 16:9, auf allen drei Materialseiten
   exakt gleich groß; am Desktop zusätzlich in der Höhe begrenzt, mobil quadratisch (s. u.). */

.material-hero__image {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   object-position: center;
}

/* Desktop/Tablet: Bildhöhe begrenzen, damit Label und H1 beim Laden im ersten Bildschirm stehen;
   das Bild wird dabei mittig beschnitten (object-fit: cover). */
@media screen and (min-width: 768px) {
   .material-hero__image {
      max-height: calc(100vh - var(--header-height) - 220px);
   }
}

/* Mobil: quadratischer Ausschnitt (4:5 würde Teile anschneiden – sie nehmen 42–47 % der
   Bildbreite ein, 4:5 zeigt nur 45 %, 1:1 zeigt 56 %). object-position zentriert den
   Ausschnitt je Material auf die Teile. */
@media screen and (max-width: 767px) {
   .material-hero__image {
      aspect-ratio: 1 / 1;
   }

   .material-hero__image--messing  { object-position: 49% 50%; }
   .material-hero__image--bleifrei { object-position: 52% 50%; }
   .material-hero__image--kupfer   { object-position: 58% 50%; }
}

/* H1 unter dem Hero: schmaler Satz, ausgeglichene Zeilen, ohne <br> */
.material-headline {
   max-width: 14ch;
   margin-inline: auto;
   text-wrap: balance;
}