/* Mobile Polish — winkelenergie.winkelapp.de
 * Override für Webflow-Mobile-Defaults. MUSS nach Webflow-CSS geladen werden. */

/* CRITICAL: Webflow-Grid-Columns stacken auf Mobile (Webflow-Default greift hier nicht zuverlässig) */
@media (max-width: 991px) {
  [class*="w-col-"],
  .w-col,
  .column {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
  .w-row,
  .columns.w-row,
  .columns {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .w-container,
  .container,
  .w-layout-blockcontainer {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Form + Inputs füllen Container */
  .w-form,
  form,
  form[id^="wf-form-"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  input.w-input,
  textarea.w-input,
  select.w-select,
  .w-input,
  .w-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block;
  }

  /* Labels nicht abschneiden */
  .w-form label,
  form label {
    display: block;
    width: 100%;
    max-width: 100%;
    word-break: normal;
  }

  /* Section-Padding reduzieren auf Mobile */
  section[class*="section"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 991px) {
  /* CTA-Buttons */
  .button-primary.w-button,
  a.button-primary,
  .w-button.button-primary {
    min-height: 48px !important;
    padding: 14px 22px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
  }

  /* Form-Inputs (Beratung + Service-Anfrage) */
  .form-input,
  input.w-input,
  textarea.w-input,
  select.w-select,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
  }

  textarea,
  textarea.w-input {
    min-height: 120px !important;
    line-height: 1.45;
  }

  /* Datenschutz-Checkbox + Labels */
  .w-checkbox-label,
  span.text-span-18,
  .w-form .w-checkbox-label,
  label.w-form-label {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .w-checkbox {
    padding: 4px 0 4px 28px;
  }

  .w-checkbox-input,
  input.w-checkbox-input {
    min-width: 22px !important;
    min-height: 22px !important;
    margin-top: 2px !important;
  }

  /* Custom-styled checkboxes (Webflow swaps native with div) */
  .w-checkbox-input--inputType-custom {
    width: 22px !important;
    height: 22px !important;
    border-width: 2px !important;
  }

  /* Footer-Links */
  .footer-link {
    display: inline-block !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding: 0 6px !important;
    font-size: 15px !important;
    margin: 2px 0;
  }

  .footer-brand {
    display: inline-block !important;
    min-height: 44px !important;
    padding: 4px 0;
  }

  /* Nav-Brand / Logo */
  .navbar-brand,
  .nav-brand,
  a.w-nav-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 6px 0 !important;
  }

  /* Nav-Links im Hamburger-Menu */
  .nav-link,
  a.nav-link {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Tel- + Mail-Links bequemer */
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 6px 0 !important;
  }

  /* Webflow-Badge weg auf Mobile (self-hosted, kein Webflow-Free-Plan mehr) */
  .w-webflow-badge,
  a.w-webflow-badge {
    display: none !important;
  }

  /* Submit-Button Form prominenter — Text darf umbrechen, nicht abschneiden */
  input[type="submit"],
  .w-button[type="submit"],
  button[type="submit"] {
    min-height: 52px !important;
    height: auto !important;
    font-size: 15px !important;
    padding: 14px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    white-space: normal !important;
    word-break: keep-all;
    line-height: 1.25 !important;
    box-sizing: border-box;
  }

  /* Radio-Buttons groß genug für Daumen */
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin-right: 10px !important;
    vertical-align: middle;
  }

  /* Radio-Labels mit Atem */
  label.w-radio,
  .w-radio {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 6px 4px;
  }

  /* Checkbox-Container in der Multi-Select besser */
  .w-checkbox {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  /* Body kein horizontaler Scroll */
  html, body {
    overflow-x: hidden;
  }

  /* Form-Section etwas mehr Atem */
  .w-form {
    padding-bottom: 16px;
  }
}

/* iPhone SE & co — extra eng */
@media (max-width: 400px) {
  .button-primary.w-button,
  a.button-primary {
    padding: 14px 16px !important;
  }
  .footer-link {
    font-size: 14px !important;
  }
}