/*
  kompressor-wartung.de – Mobile-Fix
  Ziel: Kein „Abschneiden“ im Kopfbereich/Hero (Header + 1. Abschnitt bis „Warum Merz Drucklufttechnik“)
  Anwendung:
  1) Datei hochladen und NACH der bestehenden styles.css einbinden:
     <link rel="stylesheet" href="mobile-fix.css">
  ODER
  2) Inhalt unten ans Ende Ihrer bestehenden CSS-Datei kopieren.
*/

/* Flex/Grid-Kinder dürfen auf Mobile nicht über den Viewport hinausdrücken */
.header__inner > *,
.hero__grid > *,
.grid-2 > * { min-width: 0; }

/* Medien nie breiter als ihr Container */
img, svg { max-width: 100%; height: auto; }

@media (max-width: 920px){
  /* Header darf umbrechen */
  .header__inner{ flex-wrap: wrap; }
  .header__actions{ width: 100%; justify-content: flex-start; }
}

@media (max-width: 560px){
  /* Container: zuverlässig ohne vw-Überraschungen */
  .container{
    width: 100%;
    max-width: 1120px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Header: Elemente stapeln statt abschneiden */
  .brand__tag{ display: none; }
  .badge{ width: 100%; justify-content: center; }
  .header__actions{ flex-direction: column; align-items: stretch; }
  .header__actions .btn{ width: 100%; }

  /* Fallback: falls Buttons nicht die .btn Klasse tragen */
  header a, header button { max-width: 100%; }

  /* Lange CTA-Texte dürfen umbrechen */
  .btn,
  header .btn,
  header a.btn{
    white-space: normal;
    line-height: 1.25;
    max-width: 100%;
  }

  /* Hero/Card-Paddings reduzieren, damit mehr Platz bleibt */
  .hero{ padding: 34px 0 18px; }
  .hero__main, .hero__side{ padding: 18px; }

  /* CTAs im Hero untereinander (kein Überlauf) */
  .hero__cta{ flex-direction: column; align-items: stretch; }
  .hero__cta .btn{ width: 100%; }

  /* Kicker/Badges dürfen umbrechen */
  .hero__kicker{ flex-wrap: wrap; }

  /* Stat-Zeilen: Text darf sauber umbrechen */
  .stat{ flex-wrap: wrap; }
  .stat__num{ min-width: 0; }
}