/* ============================================================
   Mobile-Anpassungen — greifen NUR auf kleinen Bildschirmen.
   Desktop-Layout bleibt unverändert (alle Regeln in @media,
   außer dem unsichtbaren Ausblenden des Hamburger-Buttons).
   ============================================================ */

/* Hamburger-Button existiert immer (wenn eingeloggt), ist aber am Desktop unsichtbar */
.nav-toggle { display: none; background: transparent; border: none; font-size: 1.6rem; line-height: 1; color: var(--text); cursor: pointer; padding: 4px 8px; }

@media (max-width: 820px) {
  /* ---------- Kopfzeile: Hamburger + ausklappbares Menü ---------- */
  .header-inner { min-height: 56px; height: auto; padding: 6px 14px; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .header-app .brand,
  .brand { position: static; transform: none; margin: 0 auto; }
  .brand-logo { height: 34px; }

  /* Geöffnetes Menü: deckender Hintergrund (sonst scheint der Inhalt durch) */
  .site-header.open { background: #ffffff; box-shadow: 0 12px 28px rgba(0,0,0,.16); }

  /* Navigationen standardmäßig eingeklappt … */
  .site-header .nav-tools,
  .site-header .nav { display: none; }
  /* … und als volle Spalte ausklappen, wenn .open gesetzt ist */
  .site-header.open .nav-tools,
  .site-header.open .nav {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; width: 100%; gap: 4px; padding: 6px 0 10px;
  }
  .site-header.open .nav-tools { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
  .site-header.open .nav-tools a,
  .site-header.open .nav a {
    padding: 12px 12px; border-radius: 9px; font-size: 1rem; width: 100%;
  }
  .site-header.open .nav a.btn { text-align: center; }

  /* ---------- Allgemeines ---------- */
  .container { padding: 0 14px; }
  .dashboard { padding: 24px 0; }
  .dashboard h1 { font-size: 1.7rem; }
  .dash-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .features, .mb-steps { grid-template-columns: 1fr; }
  .mb-hero { padding: 36px 0 16px; }
  .mb-hero h1 { font-size: 1.9rem; }
  .mb-logo-big { height: 72px; }

  /* ---------- Werkzeug-Toolbars ---------- */
  .ed-toolbar, .mmix-toolbar, .gen-filters, .ad-controls, .ad-inline {
    gap: 6px; padding: 8px; flex-wrap: wrap;
  }
  .ed-spacer, .mmix-toolbar .ed-spacer { display: none; }       /* kein Auseinanderschieben auf Mobil */
  .ed-main, .mmix-main { grid-template-columns: 1fr; }

  /* ---------- Bild-Picker / Modals ---------- */
  .ed-picker { padding: 8px; align-items: flex-start; }
  .ed-picker-card { width: 96vw; max-height: 94vh; padding: 12px; border-radius: 12px; }
  #edFilters, #mmFilters { flex-wrap: wrap; }
  #edFilters .gen-search, #mmFilters .gen-search { flex: 1 1 100%; max-width: none; }
  .gen-source-tabs { flex-wrap: wrap; }

  /* ---------- Galerie / Raster ---------- */
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .mmix-lib { grid-template-columns: 1fr 1fr; }

  /* ---------- Admin-Tabelle horizontal scrollbar ---------- */
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
  .row-actions { flex-wrap: wrap; }

  /* ---------- Auth-Karten ---------- */
  .auth-card { margin: 28px auto; padding: 24px; }
}

@media (max-width: 560px) {
  .dashboard h1 { font-size: 1.5rem; }
  .mb-hero h1 { font-size: 1.6rem; }
  .help-grid { grid-template-columns: 1fr; }
  .gal-grid { grid-template-columns: 1fr 1fr; }
  .btn-lg { padding: 12px 18px; font-size: 1rem; }
}