@charset "UTF-8";
/* ==========================================================================
   Mobile-Optimierungen (Claude, 2026-07-16)

   Audit-Ergebnis: Die Elementor-Seiten sind mobil bereits responsiv (kein
   horizontales Scrollen auf Start-/Produkt-/Kategorie-/Kontakt-/Blog-/
   Rechner-/Bestellseiten). Diese Datei behebt gezielt die gefundenen echten
   Schwaechen — ausschliesslich <=768px, Desktop bleibt unberuehrt.

   Laedt NACH killi-calc-redesign.css und (per !important) auch ueber die von
   killi-direct-order.js zur Laufzeit injizierten Inline-Styles.
   Rollback: <link>-Zeile aus header.php entfernen.
   Bei Aenderungen ?ver=N hochzaehlen (1-Jahres-Browser-Cache!) UND den
   W3TC-Seitencache ALLER Rechner-Seiten inkl. /preisrechner-start/ leeren.
   ========================================================================== */

@media (max-width: 768px) {

  /* ----------------------------------------------------------------------
     1) iOS-Zoom-on-focus verhindern. Safari/iOS zoomt automatisch in die
        Seite, sobald ein fokussiertes Formularfeld eine Schrift < 16px hat.
        Betroffen waren alle Rechner-Formularfelder + Selects (15px). 16px
        auf Mobil = kein Zoom mehr; Checkbox/Radio/Range ausgenommen.
     ---------------------------------------------------------------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ----------------------------------------------------------------------
     2) Rechner (Bestellseite): Zahlungsart-Kacheln volle Breite statt
        schmal-linksbuendig -> saubere, gut tippbare Stapelung.
     ---------------------------------------------------------------------- */
  #pricecalculator .down-custom .radios {
    flex-direction: column;
    align-items: stretch;
  }
  #pricecalculator .down-custom .radios label.custom-radio {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100%;
  }

  /* ----------------------------------------------------------------------
     3) Rechner-Panel: Produkt-Pills koennen bei 4 Produkten breiter als der
        Schirm sein -> horizontales Wischen mit Schwung, ohne dass sie
        gequetscht werden.
     ---------------------------------------------------------------------- */
  #productpanel .tabs .tabs-tabs ul {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  #productpanel .tabs .tabs-tabs ul li {
    scroll-snap-align: start;
  }

  /* ----------------------------------------------------------------------
     4) Statistik-Counter (Startseite): gestapelt auf dem Handy wirkte die
        Zahl mittig, der Titel aber linksbuendig -> unruhig/gedrueckt. Auf
        Mobil alles zentrieren und etwas Luft zwischen die Counter geben.
     ---------------------------------------------------------------------- */
  .elementor-widget-counter .elementor-counter-title {
    text-align: center !important;
  }
  .elementor-widget-counter .elementor-counter-number-wrapper {
    justify-content: center !important;
  }
  .elementor-widget-counter {
    padding-top: 8px;
    padding-bottom: 8px;
  }

}