/* ============================================================
   mantik-mobile.css - Mobile-Layout-Basis fuer alle Mantik-Apps.
   ============================================================
   Pattern (eingefuehrt 2026-05-28, Pilot Mantik Studio):

   1. Diese Datei NACH der app-eigenen CSS einbinden:
      <link rel="stylesheet" href="/static/<app>.css">
      <link rel="stylesheet" href="/shared/mantik-mobile.css">

   2. App-spezifische Mobile-Regeln (Drawer, Header, Layout)
      bleiben in der app-eigenen CSS in einem @media-Block. Diese
      Datei deckt nur die universellen Patterns ab.

   3. Pflicht-Punkte fuer mobile-faehige Mantik-Apps:
      - Inputs/Textareas/Selects font-size: 16px+ (kein iOS-Auto-Zoom)
      - Buttons min-height: 44px (Apple HIG / WCAG)
      - touch-action: manipulation auf allen Klick-Zielen
      - Modals 100% Breite unter 768px

   Plan: ~/Projekte/Vault/plaene/2026-05-28-mantik-mobile-layout.html
   ============================================================ */

/* Universell: keine 300ms-Klick-Verzoegerung auf Tap-Targets */
button, a.badge, .badge, .nav-tab, .kopf-knopf, .job-cancel, .job-delete,
.modal-abbrechen, .modal-bestaetigen, [role="button"] {
  touch-action: manipulation;
}

@media (max-width: 768px) {
  /* Tap-Target-Mindestgroessen (Apple HIG / WCAG 2.5.5 AA) */
  button,
  input[type="submit"],
  input[type="button"],
  [role="button"] {
    min-height: 44px;
  }

  /* Form-Inputs: 16px verhindert iOS-Auto-Zoom beim Fokus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }

  textarea {
    min-height: 96px;
  }

  /* Modals/Overlays sollten den ganzen Screen nutzen */
  .modal-overlay,
  .modal {
    padding: 0;
  }

  /* Karten-Raster (haeufiges Mantik-Pattern) auf eine Spalte */
  .karten-raster,
  .werke-raster,
  .galerie-liste-mobile {
    grid-template-columns: 1fr !important;
  }
}