/* meintraumflug — responsive.css
   NUR Mobile-Overrides. Greift erst < 768px, Desktop bleibt komplett unangetastet.
   Laedt NACH components.css -> Klassen-Overrides gewinnen per Quellreihenfolge,
   daher KEIN !important noetig (auch nicht mehr fuer die Modals). */

@media (max-width: 768px) {

  /* Schmalerer Seitenrand auf Mobil (Design-Token; Desktop bleibt 1.5rem) */
  :root { --gutter: 0.75rem; }

  /* Sektions-Innenabstand etwas reduzieren (Klassen statt frueherem Inline-Padding) */
  .mtf-rf, .mtf-about, .mtf-gs, .mtf-ablauf, .mtf-kontakt { padding-top: 56px; padding-bottom: 56px; }

  /* Rundfluege: 4 Spalten -> 1 */
  .mtf-rf-grid { grid-template-columns: 1fr; }

  /* Ueber mich: Zwei-Spalter -> gestapelt */
  .mtf-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .mtf-about-stats { grid-template-columns: repeat(2, 1fr); }
  /* Foto-Mosaik: Grid-Bereiche der Kinder neutralisieren und stapeln */
  .mtf-about-media { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .mtf-about-media > * { grid-area: auto; min-height: 220px; }

  /* Gutscheine: Karte einspaltig + kleineres Padding */
  .mtf-gs-panel { grid-template-columns: 1fr; gap: 36px; padding: 32px; }

  /* Ablauf: 3 Schritte -> 1 */
  #ablauf .mtf-steps { grid-template-columns: 1fr; gap: 32px; }

  /* Gut-zu-wissen / FAQ: Zwei-Spalter + Fakten-Grid -> 1 */
  .mtf-kontakt-grid, .mtf-info-grid { grid-template-columns: 1fr; gap: 40px; }

  /* Kontakt-Band: Karte einspaltig, Kanaele untereinander */
  .mtf-cb-card { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .mtf-cb-row2 { grid-template-columns: 1fr; }

  /* Footer: 4 Spalten -> 2 */
  .mtf-ftr-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

@media (max-width: 480px) {
  /* Ganz schmal: Fakten + Footer einspaltig */
  .mtf-kontakt-grid, .mtf-info-grid { grid-template-columns: 1fr; }
  .mtf-ftr-grid { grid-template-columns: 1fr; }
}

/* ── Modals mobil ─────────────────────────────────────────────────────────
   Die mobil relevanten Modal-Props liegen als Basisklassen in components.css;
   diese Media-Query gewinnt per Quellreihenfolge — kein !important noetig. */
@media (max-width: 767px) {
  .mtf-modal-ov { padding: 12px; }
  .mtf-voucher-panel { grid-template-columns: 1fr; max-width: 100%; }
  .mtf-vc-preview { display: none; }
  .mtf-modal-head { padding: 20px; }
  .mtf-modal-body { padding: 20px; }
  .mtf-modal-foot { padding: 16px 20px; }
  .mtf-vc-controls { padding: 20px; }
  .mtf-vc-head { padding: 16px 20px; }
  .mtf-vc-foot { padding: 14px 20px; }
  .mtf-vc-done { padding: 32px 20px; }
}