/* ===================================================
   muveup.music – Gemeinsame Mobile-Styles
   Eingebunden in alle HTML-Seiten via <link>
   =================================================== */

/* === TABLET / MOBILE BREAKPOINT: 900px === */
@media (max-width: 900px) {

  /* --- Body: Orangenen Hintergrund auf Mobil entfernen --- */
  /* --- Body: Inhalt oben statt zentriert --- */
  body {
    background-color: #FFFFFF !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  /* --- Header: Kompakt --- */
  header {
    padding: 10px 15px !important;
  }
  .logo {
    font-size: 24px !important;
  }

  /* --- Burger-Menu: Anzeigen --- */
  .burger-icon {
    display: flex !important;
  }
  .top-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 250px !important;
    background: #FFFFFF !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 20px !important;
    transform: translateX(100%) !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 1000 !important;
    transition: transform 0.3s ease !important;
  }
  .top-nav.active {
    transform: translateX(0) !important;
  }
  .nav-link {
    font-size: 18px !important;
    margin: 10px 0 !important;
  }
  .close-icon {
    display: block !important;
  }
  .menu-overlay.active {
    display: block !important;
  }

  /* --- Container: Edge-to-edge auf Mobil --- */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 60px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* --- Wizard-Card & Wizard-Wrapper: Edge-to-edge auf Mobil --- */
  .wizard-wrapper {
    padding: 56px 0 0 0 !important;
    background-color: #FFFFFF !important;
  }
  .wizard-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* --- Fortschrittsbalken: Direkt unter Header fixieren --- */
  .progress-container {
    position: fixed !important;
    top: 49px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    height: 4px !important;
  }

  /* --- Footer: Nicht fixed, immer am Seitenende --- */
  footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    padding: 16px !important;
    font-size: 11px !important;
    margin-top: auto !important;
  }

  /* --- Einheitliche Buttons --- */
  .btn {
    font-size: 15px !important;
    padding: 12px 28px !important;
  }
  .btn-nav {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
  .action-button,
  .btn-action {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
  .popup-button {
    font-size: 15px !important;
    padding: 12px 24px !important;
  }
}

/* === SMALL MOBILE: 480px === */
@media (max-width: 480px) {

  /* --- Container: Weniger Padding --- */
  .container {
    padding: 20px 16px !important;
  }

  /* --- Header: Noch kompakter --- */
  header {
    padding: 8px 12px !important;
  }
  .logo {
    font-size: 22px !important;
  }

  /* --- Kleinere Ueberschriften (nur in Containern, nicht Hero etc.) --- */
  .container h1,
  .wizard-card h1 {
    font-size: 26px !important;
  }

  /* --- Footer: Noch kompakter --- */
  footer {
    padding: 14px 12px !important;
    font-size: 10px !important;
  }
}