/* =========================================================
   BirdPI – Responsive Styles
   =========================================================
   Breakpoint-Strategie (Desktop-First):
   - Default: Styles für Desktops und größere Bildschirme
   - 1024px: Tablets (Quer- & Hochformat) & 7-Zoll-Displays
   - 600px:  Smartphones
   ========================================================= */

/* =========================================================
   1. Mittlere Bildschirme (Tablets & 7-Zoll-Displays)
   ========================================================= */
@media (max-width: 1024px) {
  /* Zukünftige Tablet-spezifische Regeln hier einfügen */
}

@media (max-width: 760px) {
  .grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   2. Kleine Bildschirme (Smartphones)
   ========================================================= */
@media (max-width: 600px) {
  /* Body darf auf dem Handy wieder normal scrollen */
  .wrap {
    padding: 6px;
    max-width: 100%;
    gap: 6px;
  }

  .nav-tiles {
    grid-template-columns: 1fr;
  }

  /* Zukünftige Smartphone-spezifische Regeln hier einfügen */
}