@charset "UTF-8";

/* ============================================================
   responsive.css - Media-Queries (Tablet/Smartphone)
   MUSS ALS LETZTES CSS geladen werden (nach app.css)!
   Begruendung: @media-Regeln hier haben dieselbe Selektor-
   Spezifitaet wie die Basis-Regeln in app.css (z.B. .recipe-grid).
   Bei gleicher Spezifitaet gewinnt im Kaskaden-Tiebreak die Regel,
   die als letztes im DOM steht - nicht automatisch die Media-
   Query. Laedt diese Datei vor app.css, werden responsive
   Overrides auf Mobile/Tablet von app.css ueberschrieben
   (genau dieser Bug ist am 29.06. live aufgetreten: Rezept-
   Grid kollabierte auf dem Smartphone nicht auf 1 Spalte).
   ============================================================ */

/* -- Responsive: Tablet -------------------------------------- */
@media (max-width: 1024px) {
  .nav-links  { display: none; }
  .nav-actions { display: none; }
  .hamburger  { display: flex; }

  .hero { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.75rem 2.5rem; }
  .hero-text h1 { font-size: 2.75rem; }

  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .recipe-card:first-child { grid-column: span 2; }

  .category-grid { grid-template-columns: repeat(3, 1fr); }

  .stats-inner { gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
  .action-bar-inner { flex-direction: column; }
}

/* -- Responsive: Smartphone ---------------------------------- */
@media (max-width: 640px) {
  nav { padding: 0 1.25rem; }

  .hero { grid-template-columns: 1fr; padding: 2rem 1.25rem; gap: 1.75rem; }
  .hero-text h1 { font-size: 2rem; }
  .hero-text p  { font-size: 0.95rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a, .hero-actions button { text-align: center; }

  .stats-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0; }
  .stat-divider { display: none; }

  .section { padding: 2rem 1.25rem; }

  .recipe-grid { grid-template-columns: 1fr; }
  .recipe-card:first-child { grid-column: span 1; }

  .category-grid { grid-template-columns: repeat(2, 1fr); }

  .action-bar { padding: 1.75rem 1.25rem; }
  .action-bar-inner { flex-direction: column; }
  .action-card { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .action-btn { width: 100%; text-align: center; }

  .flash-wrap { padding: 1rem 1.25rem 0; }

  .section { padding: 2rem 1.75rem; }

  /* Seiten-Titel + Aktions-Button (z.B. "Alle Rezepte" + "+ Rezept
     hinzufuegen") auf Mobile gestapelt statt nebeneinander, da sie sich
     bei langen Texten/Ueberschriften sonst gegenseitig zu eng draengen. */
  .section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
  }

  /* Filter-Bar: alles gestapelt */
  .filter-bar { flex-direction: column; align-items: stretch; gap: .6rem; padding: .85rem; }
  .filter-search { width: 100%; }
  .filter-select { width: 100%; min-width: 0; }
  .filter-divider { display: none; }
}