.elementor-429 .elementor-element.elementor-element-0a8a9f5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-429 .elementor-element.elementor-element-afedaa2{width:100%;max-width:100%;}.elementor-429 .elementor-element.elementor-element-716d0a6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-429 .elementor-element.elementor-element-48c963f{width:100%;max-width:100%;}.elementor-429 .elementor-element.elementor-element-e05b96f{width:100%;max-width:100%;}.elementor-429 .elementor-element.elementor-element-20c4c2a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-429 .elementor-element.elementor-element-658f62b.elementor-element{--flex-grow:1;--flex-shrink:0;}.elementor-429 .elementor-element.elementor-element-079648a{--display:flex;}/* Start custom CSS *//* ============================================================
   BYTE Konfigurator – Alle Fixes
   1. Leerraum-Bug auf ~960px (sticky ghost space)
   2. Custom Select Styling (kein native appearance)
   3. Range Slider Mobile Touch-Fix
   4. Focus-Styles einheitlich
   ============================================================ */

/* ── FIX 1: Sticky Ghost Space ───────────────────────────────
   position:sticky + min-height:620px hinterlässt leeren Block
   wenn grid auf single-column wechselt unter 1080px          */
@media (max-width: 1080px) {
  .byte-apple__visual {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .byte-apple__image {
    max-height: 520px;
    object-fit: contain;
  }
}

/* ── FIX 2: Custom Selects ───────────────────────────────────
   Entfernt native appearance, eigenes Chevron via inline SVG  */
.byte-apple__field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d2f73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 42px !important;
  cursor: pointer !important;
}

.byte-apple__field select:focus {
  border-color: #0b1ff3 !important;
  box-shadow: 0 0 0 3px rgba(11,31,243,0.08) !important;
  outline: none !important;
}

/* ── FIX 3: Date + Text Input Focus ─────────────────────────*/
.byte-apple__field input[type="date"],
.byte-apple__field input[type="text"] {
  caret-color: #0b1ff3;
}

.byte-apple__field input[type="date"]:focus,
.byte-apple__field input[type="text"]:focus {
  border-color: #0b1ff3 !important;
  box-shadow: 0 0 0 3px rgba(11,31,243,0.08) !important;
  outline: none !important;
}

/* ── FIX 4: Range Slider Mobile Touch ───────────────────────
   Problem: Thumb zu klein für Touch, touch-action fehlt →
   Slider lässt sich auf Mobile nicht schieben.
   Fix: touch-action:none auf Track, Thumb auf 44px (Apple HIG
   Mindestgröße für Touch-Targets), pointer-events explizit   */

#bytePersons {
  touch-action: none;        /* verhindert dass Scroll den Slider übernimmt */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Webkit (Chrome, Safari, iOS) */
#bytePersons::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 28px !important;    /* war 24px – zu klein für Touch */
  height: 28px !important;
  border-radius: 50% !important;
  background: #1d2f73 !important;
  border: 4px solid #fff !important;
  box-shadow: 0 2px 8px rgba(11,31,243,0.22) !important;
  cursor: pointer !important;
  touch-action: none !important;
  /* Größerer unsichtbarer Hit-Bereich via pseudo-Element-Trick
     funktioniert nicht auf input – daher padding auf Track     */
}

/* Track selbst etwas dicker damit Finger ihn leichter trifft */
#bytePersons::-webkit-slider-runnable-track {
  height: 8px !important;   /* war 6px */
  border-radius: 999px !important;
  cursor: pointer !important;
}

/* Firefox */
#bytePersons::-moz-range-thumb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1d2f73 !important;
  border: 4px solid #fff !important;
  box-shadow: 0 2px 8px rgba(11,31,243,0.22) !important;
  cursor: pointer !important;
}

#bytePersons::-moz-range-track {
  height: 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

/* Wrap bekommt mehr vertikales Padding damit der Thumb-Hit-
   Bereich nicht am oberen/unteren Rand abgeschnitten wird    */
.byte-apple__range-wrap {
  padding-top: 8px !important;
  padding-bottom: 12px !important;
  touch-action: none !important;
}

/* ── FIX 5: 24h Vorlauf – visueller Hinweis ─────────────────
   Datum-Hinweis unterhalb des Feldes (Text via CSS content)  */
#byteDate {
  position: relative;
}

/* Hinweistext unter dem Datum-Feld */
.byte-apple__field--date::after {
  content: "Frühester Termin: morgen";
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #7a7268;
  line-height: 1.3;
}/* End custom CSS */