/* ============================================================================
   DATEI: css/responsive.css  –  Anpassungen für Tablet und Handy
   ============================================================================
   "Responsive" = die Seite passt sich der Bildschirmbreite an.

   @media (max-width: 1000px) { … }
     Die Regeln in den Klammern gelten NUR, wenn das Fenster 1000px breit
     oder schmaler ist. Darüber gelten die normalen Regeln.

   DIE DREI STUFEN IN DIESER DATEI:
     bis 1000px  Tablet:       2 Karten pro Reihe
     bis  680px  Handy:        Menü wird zum Klapp-Menü
     bis  430px  kleines Handy: 1 Karte pro Reihe

   WENN DU eine Zahl änderst (z. B. 680 auf 800), schaltet das Handy-Layout
   schon bei breiteren Fenstern um.
   TESTEN: Im Browser F12 (bzw. Cmd+Option+I am Mac) -> Handy-Symbol klicken.
   ============================================================================ */

@media (max-width: 1000px) {
  /* Statt 4 nur 2 Karten nebeneinander -> mehr Platz für Text. */
  .produkt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vorteile { grid-template-columns: repeat(2, 1fr); }
  .header-inhalt { gap: 15px; }
  .hauptnavigation { gap: 16px; }
}

@media (max-width: 680px) {
  .header-inhalt { min-height: 72px; }

  /* Menü-Knopf ("☰ Menü") wird sichtbar. */
  .menuknopf { display: inline-flex; }

  /* Das Menü ist zuerst versteckt und klappt UNTER der Kopfzeile auf.
     position: absolute + top: 100% = direkt unterhalb der Kopfzeile.
     flex-direction: column = Links untereinander statt nebeneinander. */
  .hauptnavigation {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 18px var(--abstand-seite);
    background: #111; border-bottom: 1px solid var(--farbe-linie);
    flex-direction: column; align-items: stretch;
  }
  /* js/navigation.js setzt die Klasse "offen" -> Menü wird angezeigt. */
  .hauptnavigation.offen { display: flex; }
  .hauptnavigation a { padding: 12px; }

  /* Der "Standort"-Knopf oben rechts wird ausgeblendet (Platzmangel). */
  .standort-header { display: none; }

  .hero { min-height: 295px; }
  .hero-startseite { min-height: 430px; }
  .hero-inhalt { padding-block: 42px; }
  /* Auf dem Handy gleichmäßig dunkler, weil der Text über dem ganzen Bild liegt. */
  .hero::after { background: linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.67)); }
  .hero h1 { font-size: clamp(36px, 10vw, 52px); }

  .produkt-raster { gap: 12px; }
  .kategorie-tab { min-height: 62px; }
}

@media (max-width: 430px) {
  /* Kleines Handy: eine Karte pro Reihe. */
  .produkt-raster { grid-template-columns: 1fr; }
  .vorteile { grid-template-columns: 1fr; }
  /* Knöpfe im Titelbild nehmen die volle Breite ein. */
  .hero-aktionen .button { width: 100%; }
}