/**
 * @file
 * Mobile-Overrides – alle Responsive-Fixes an einem Ort.
 */

/* === MOBILE bis 767px === */
@media (max-width: 767px) {
  .hero {
    aspect-ratio: auto !important;
    min-height: auto !important;
    padding: var(--space-xl) 0 var(--space-lg) !important;
  }
  .hero__inner {
    margin: 0 !important;
    padding: 0 1rem !important;
    max-width: 100% !important;
  }
  .hero__headline { font-size: 1.5rem !important; }
  .hero__buttons { flex-wrap: wrap !important; }
  .hero__btn { width: auto !important; font-size: 0.8125rem !important; padding: 0.5rem 0.875rem !important; }

  .tile-grid { padding: var(--space-lg) 0 !important; }
  .tile-grid__items { padding: 0 1rem !important; }
  .tile-grid__items .field__items { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
  .tile { padding: 0.5rem !important; }
  .tile__icon { width: 24px !important; height: 24px !important; font-size: 14px !important; }

  .image-text__grid { grid-template-columns: 1fr !important; min-height: auto !important; }
  .image-text__image { min-height: 200px !important; clip-path: none !important; margin: 0 !important; }
  .image-text__text { padding: 1rem !important; }

  .airtime-options__grid { grid-template-columns: 1fr !important; }
  .airtime-options__image { min-height: 200px !important; clip-path: none !important; margin: 0 !important; }
  .airtime-options__intro { padding: 1rem !important; }
  .airtime-options__details { padding: 1rem !important; }
  .airtime-options__cards .field__items { grid-template-columns: 1fr !important; }
  .airtime-options__comparison { grid-template-columns: 1fr !important; }
}

/* === TABLET 768-1199px === */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-body: 0.9375rem;
    --font-size-caption: 0.8125rem;
  }
}

/* === DESKTOP ab 1200px === */
@media (min-width: 1200px) {
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 1.75rem;
    --font-size-body: 1rem;
    --font-size-caption: 0.875rem;
  }
}

/* Header auf Mobile IMMER fixiert – höchste Priorität */
@media (max-width: 767px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10000 !important;
    background: var(--color-bg-secondary) !important;
  }

  body {
    padding-top: 52px !important;
  }


    height: calc(100vh - 50px) !important;
    max-height: calc(100vh - 50px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.75rem !important;
    background: #fff !important;
  }


}

  /* === MOBILE DIALOG === */
  @media (max-width: 767px) {
    .ui-dialog {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      margin: 0 !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .ui-dialog .ui-dialog-titlebar {
      flex-shrink: 0 !important;
      border-radius: 0 !important;
    }

    .ui-dialog .ui-dialog-content {
      flex: 1 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 0.75rem !important;
      background: #fff !important;
      height: auto !important;
      max-height: none !important;
    }

    .ui-dialog .webform-flexbox {
      flex-direction: column !important;
    }

    .ui-dialog .webform-flex {
      flex: 1 1 100% !important;
      max-width: 100% !important;
    }

    .ui-dialog input,
    .ui-dialog select,
    .ui-dialog textarea {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      font-size: 16px !important;
    }

    .ui-dialog input[type="date"] {
      -webkit-appearance: none !important;
      min-height: 44px !important;
    }


  }

  /* Mobile: ALLE Form-Items als Block (Label über dem Feld) */
  @media (max-width: 767px) {
    .ui-dialog .form-item,
    .ui-dialog .js-form-item,
    .ui-dialog fieldset .form-item,
    .ui-dialog fieldset .js-form-item {
      display: block !important;
    }

    .ui-dialog label {
      display: block !important;
      text-align: left !important;
      min-width: 0 !important;
      margin-bottom: 0.25rem !important;
    }

    .ui-dialog input,
    .ui-dialog select,
    .ui-dialog textarea {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      display: block !important;
    }

    .ui-dialog fieldset label {
      min-width: 0 !important;
      text-align: left !important;
    }

    .ui-dialog fieldset input[type="number"] {
      width: 100% !important;
    }
  }

  /* Date-Felder: gleiche Breite wie andere Felder */
  @media (max-width: 767px) {
    .ui-dialog input[type="date"] {
      width: calc(100% - 1rem) !important;
      max-width: calc(100% - 1rem) !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 0.375rem 0.5rem !important;
    }

    /* Doppelter Submit-Button weg: nur den letzten zeigen */
  }

  /* Date-Felder: gleiche Breite wie andere Felder */
  @media (max-width: 767px) {
    .ui-dialog input[type="date"] {
      width: calc(100% - 1rem) !important;
      max-width: calc(100% - 1rem) !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 0.375rem 0.5rem !important;
    }

    /* Doppelter Submit-Button weg: nur den letzten zeigen */
  }

  /* jQuery UI Dialog-Buttonpane verstecken (erzeugt doppelte Buttons) */
  @media (max-width: 767px) {
    .ui-dialog .ui-dialog-buttonpane {
      display: none !important;
    }
  }