/* einfachair — responsive / mobile & tablet (<= 980px) */

/* default desktop visibility helpers */
.is-mobile { display: none; }

@media (max-width: 980px) {
  body { font-size: 14.5px; }
  .wrap { padding: 0 16px; }
  .is-desktop { display: none !important; }
  .is-mobile { display: initial; }

  /* hide desktop top nav, use mobile appbar + bottom tabbar */
  .nav { display: none; }
  .mobile-appbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 60;
    padding: calc(env(safe-area-inset-top, 0px) + 58px) 16px 12px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-600) 100%);
    color: #fff;
  }
  .mobile-appbar.plain {
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
    color: var(--ink-900); border-bottom: 1px solid var(--line);
  }
  .mobile-appbar .logo { color: #fff; }
  .mobile-appbar .logo .ein, .mobile-appbar .logo .air { color: #fff; }
  .mobile-appbar.plain .logo .ein { color: var(--ink-900); }
  .mobile-appbar.plain .logo .air { color: var(--primary); }
  .mobile-appbar .ma-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
  .mobile-appbar .ma-spacer { flex: 1; }
  .mobile-appbar .ma-ico { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.18); color: #fff; }
  .mobile-appbar.plain .ma-ico { background: var(--bg-2); color: var(--ink-700); }

  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
    background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 20px);
    justify-content: space-around;
  }
  .tab-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 10px; border-radius: var(--r-sm); color: var(--ink-400); font-weight: 700; font-size: 10.5px; flex: 1; max-width: 90px; }
  .tab-item.on { color: var(--primary); }
  .tab-item .ti-ico { position: relative; }
  .tab-item .ti-badge { position: absolute; top: -4px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--coral-500); color: #fff; font-size: 10px; display: grid; place-items: center; font-weight: 800; }
  .app-root { padding-bottom: 24px; }
  .tabbar { display: none !important; }

  /* Dark Mode: helle Mobile-Appbar (plain) darf nicht weiß sein (sonst weiß-auf-weiß).
     Textfarben nutzen bereits Tokens und passen sich an. */
  [data-theme="dark"] .mobile-appbar.plain { background: rgba(16,24,21,.95); border-bottom-color: var(--line); }

  /* ---------- Hamburger-Drawer (mobile Navigation) ---------- */
  .ma-burger { background: var(--bg-2); color: var(--ink-800); }
  .mobile-appbar:not(.plain) .ma-burger { background: rgba(255,255,255,.18); color: #fff; }
  .drawer-wrap { display: block; position: fixed; inset: 0; z-index: 200; }
  .drawer-backdrop { position: absolute; inset: 0; background: rgba(8,12,14,.55); backdrop-filter: blur(2px); animation: dwfade .2s ease; }
  .drawer {
    position: absolute; top: 0; bottom: 0; left: 0; width: 82%; max-width: 330px;
    background: var(--card); box-shadow: var(--sh-lg); display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
    animation: dwslide .24s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes dwfade { from { opacity: 0; } }
  @keyframes dwslide { from { transform: translateX(-100%); } }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .drawer-user { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 14px; background: var(--bg-2); margin-bottom: 12px; }
  .drawer-av { width: 42px; height: 42px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); color: #fff; background: linear-gradient(135deg,var(--coral-400),var(--coral-600)); }
  .drawer-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
  .drawer-item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 12px; border-radius: 12px; font-weight: 700; font-size: 15.5px; color: var(--ink-800); }
  .drawer-item:hover, .drawer-item:active { background: var(--bg-2); }
  .drawer-item.on { background: var(--primary-50); color: var(--primary-700); }
  .drawer-item.on svg { color: var(--primary); }
  .drawer-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--coral-500); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
  .drawer-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }

  /* hero */
  .hero { padding: 18px 0 16px; }
  .hero-head { margin-bottom: 18px; }
  .trust { gap: 14px; }

  /* search widget → stacked */
  .search-card { padding: 12px; border-radius: var(--r-xl); }
  .search-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sfield.f-from, .sfield.f-to { grid-column: span 1; }
  .sfield.f-when { grid-column: span 1; }
  .sfield.f-ret { grid-column: span 1; }
  .sfield.f-pax { grid-column: span 2; }
  .search-submit { grid-column: span 2; }
  .swap-btn { display: none; }
  .ac { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; min-width: 0; max-height: 50vh; }
  /* Flughafen-Suche: oben verankern, damit das Tippfeld über der eingeblendeten Tastatur sichtbar bleibt. */
  .ac.ac-air { top: 12px; bottom: auto; max-height: 64vh; }

  /* destination + deals grids */
  .dest-strip { grid-template-columns: 1fr 1fr; gap: 12px; }
  .deals-grid { grid-template-columns: 1fr; gap: 16px; }
  .feed-grid { grid-template-columns: 1fr; gap: 16px; }
  .why-grid { grid-template-columns: 1fr; }
  .top-deal { grid-template-columns: 1fr; }
  .td-photo { min-height: 220px; }
  .td-body { padding: 22px; }
  .td-price { font-size: 42px; }
  .deals-hero { padding: 24px 22px; border-radius: var(--r-lg); }

  /* results → single column, filters in sheet */
  .results-layout { grid-template-columns: 1fr; gap: 16px; }
  .filters.is-desktop { display: none; }
  .flight-card { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .fc-right { border-left: none; border-top: 1px solid var(--line-2); padding-left: 0; padding-top: 14px; flex-direction: row; align-items: center; justify-content: space-between; }
  .results-head { gap: 10px; }
  .sort-tabs { width: 100%; overflow-x: auto; }

  /* detail → single column */
  .detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .booking-box { position: static; }
  .detail-hero { min-height: 220px; }

  /* auth → single column, hide aside */
  .auth-wrap { grid-template-columns: 1fr; min-height: auto; }
  .auth-aside { display: none; }
  .auth-form-col { padding: 24px 16px 40px; }

  /* dashboard */
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .saved-grid { grid-template-columns: 1fr; }
  .dash-hero { padding: 22px; border-radius: var(--r-lg); }

  /* checkout */
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { order: -1; }
  .steps { overflow-x: auto; }
  .step .nm { display: none; }
  .step.active .nm { display: block; }

  /* footer simplify */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer { padding: 32px 0 90px; }

  /* new sections */
  .reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  .faq-layout { grid-template-columns: 1fr; gap: 22px; }
  .alerts-grid { grid-template-columns: 1fr !important; }
  .alert-band { padding: 22px; }
  .alert-band .btn { width: 100%; }

  .section { margin-top: 32px; margin-bottom: 32px; }
  .sec-title { font-size: 24px; }
}

/* tablet tweak: roomigere 2-spaltige Raster (Nav + komplexe Layouts bleiben gestapelt) */
@media (min-width: 721px) and (max-width: 980px) {
  .deals-grid, .dest-strip, .feed-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .top-deal { grid-template-columns: 1fr; }
  .saved-grid { grid-template-columns: 1fr 1fr; }
}