/* =========================================================
   Der kleine Karpfen – Slider + Bestellformular (FINAL)
   - gleiche Höhe links/rechts (Desktop)
   - Formular kompakt
   - Selects: Sockel weg + korrektes Dropdown (kein Springen)
   ========================================================= */

/* ---------- DESKTOP: 2 Spalten gleich hoch ---------- */
@media (min-width: 992px) {

  .shell-wide .range.range-30.range-xs-center{
    display:flex;
    align-items:stretch;
    flex-wrap:nowrap;
  }

  .shell-wide .range.range-30.range-xs-center > .cell-lg-8,
  .shell-wide .range.range-30.range-xs-center > .cell-lg-4,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-9,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-3{
    display:flex;
    align-items:stretch;
  }

  /* linke Spalte */
  .shell-wide .range.range-30.range-xs-center > .cell-lg-8 > .section,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-9 > .section{
    flex:1;
    display:flex;
    min-height:640px;
  }

  .shell-wide .range.range-30.range-xs-center > .cell-lg-8 .swiper-container.swiper-slider,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-9 .swiper-container.swiper-slider{
    flex:1;
    height:auto;
    min-height:640px;
  }

  .shell-wide .range.range-30.range-xs-center > .cell-lg-8 .swiper-wrapper,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-9 .swiper-wrapper{ height:100%; }

  .shell-wide .range.range-30.range-xs-center > .cell-lg-8 .swiper-slide,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-9 .swiper-slide{
    height:100%;
    background-size:cover;
    background-position:center;
  }

  /* rechte Spalte */
.shell-wide .range.range-30.range-xs-center > .cell-lg-4 .hotel-booking-form,
.shell-wide .range.range-30.range-xs-center > .cell-xl-3 .hotel-booking-form{
  width:100%;
  min-height:640px;
}
}

/* ---------- FORMULAR: kompakt ---------- */
.hotel-booking-form{
  background:#e9e9e9;
  padding:18px 18px;
}

.hotel-booking-form h3{
  font-size:28px;
  line-height:1.1;
  margin:0 0 10px;
  font-weight:800;
}

.hotel-booking-form p.text-uppercase{
  margin:6px 0 4px;
  font-size:11px;
  letter-spacing:.06em;
  line-height:1.1;
}

.hotel-booking-form .range.spacing-20 > [class*="cell-"]{ margin-top:8px; }
.hotel-booking-form .form-wrap{ margin-bottom:4px; }

.hotel-booking-form .form-input,
.hotel-booking-form textarea.form-input{
  padding:8px 10px;
  font-size:14px;
  line-height:1.25;
}

.hotel-booking-form textarea.form-input{
  min-height:52px;
  max-height:52px;
  resize:none;
}

.hotel-booking-form .form-wrap-checkbox{ margin-top:6px; }

.hotel-booking-form .button.button-block{
  padding:12px 14px;
  font-size:15px;
}

.hotel-booking-form .button.button-primary{
  background:#8e879a;
  border-color:#8e879a;
}
.hotel-booking-form .button.button-primary:hover{
  background:#7d768b;
  border-color:#7d768b;
}

/* =========================================================
   SELECTS: Sockel weg + Dropdown korrekt
   WICHTIG: Wir stylen NUR Select2 (das nutzt dein Template sichtbar)
   ========================================================= */

/* 1) Eltern dürfen Dropdown nicht clippen */
.hotel-booking-form,
.hotel-booking-form form,
.hotel-booking-form .range,
.hotel-booking-form .form-wrap,
.hotel-booking-form .form-wrap-validation{
  overflow:visible !important;
}

/* 2) KEIN transform auf Parents (sonst falsche Position) */
.hotel-booking-form{ transform:none !important; }

/* 3) Select2: sichtbares Feld auf 44px + Sockel/Pseudo weg */
.hotel-booking-form .select2-container{ width:100% !important; }

.hotel-booking-form .select2-container .select2-selection--single{
  height:44px !important;
  min-height:44px !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background-image:none !important;
}

.hotel-booking-form .select2-container .select2-selection--single:before,
.hotel-booking-form .select2-container .select2-selection--single:after{
  content:none !important;
  display:none !important;
}

.hotel-booking-form .select2-container .select2-selection--single .select2-selection__rendered{
  line-height:44px !important;
  padding-left:10px !important;
  padding-right:38px !important;
}

.hotel-booking-form .select2-container .select2-selection--single .select2-selection__arrow{
  height:44px !important;
  top:0 !important;
  right:8px !important;
}

/* 4) Dropdown immer über allem */
.hotel-booking-form .select2-container--open{ z-index:99999 !important; }
.select2-dropdown{ z-index:99999 !important; }

/* 5) Liste kompakt */
.hotel-booking-form .select2-results__option{
  padding:8px 10px !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 991px){
  .shell-wide .range.range-30.range-xs-center{ display:block; }

  .shell-wide .range.range-30.range-xs-center > .cell-lg-8 > .section,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-9 > .section,
  .shell-wide .range.range-30.range-xs-center > .cell-lg-4 .hotel-booking-form,
  .shell-wide .range.range-30.range-xs-center > .cell-xl-3 .hotel-booking-form{
    min-height:0;
  }
}


/* Select2 Dropdown immer sauber über allem */
.select2-container--open { z-index: 999999 !important; }
.select2-dropdown { z-index: 999999 !important; }

.select2-results__options{
  max-height: 220px !important;
  overflow-y: auto !important;
}

/* ===== Fix: Select-Inhalt vertikal mittig (RD Mailform / Template) ===== */
.booking-order-panel select.form-input,
.booking-order-panel .form-wrap select.form-input{
  height: 48px !important;
  padding: 0 44px 0 14px !important; /* rechts Platz für Pfeil */
  line-height: 48px !important;
  box-sizing: border-box !important;
}

/* Falls das Template einen Fake-Pfeil per ::after auf dem Wrapper setzt */
.booking-order-panel .form-wrap::after{
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Manche Templates geben dem Select innen noch extra Padding/Height */
.booking-order-panel .select-filter{
  height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================
   RESPONSIVE FIX: Slider + Bestellformular
   ========================================= */

/* Grundsätzlich: Bilder & Container dürfen nicht überlaufen */
img, .swiper-container { max-width: 100%; }
.shell-wide { width: 100%; }
.range { margin-left: 0; margin-right: 0; }

/* Wichtig: Wenn irgendwas overflow hidden hat, killt das Responsive */
html, body { overflow-x: hidden; }

/* --- Tablet & kleiner: untereinander statt nebeneinander --- */
@media (max-width: 991px) {

  /* 1) Beide Spalten 100% Breite */
  .cell-lg-8,
  .cell-xl-9,
  .cell-lg-4,
  .cell-xl-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* 2) Reihenfolge: erst Slider, dann Formular */
  .range.range-30.range-xs-center {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3) Formular schöner: weniger Rand, damit es nicht „zu fett“ wird */
  .booking-order-panel {
    padding: 24px 18px !important;
    margin-top: 18px;
  }

  /* 4) Titel kleiner, damit er nicht bricht */
  .booking-title {
    font-size: 34px !important;
  }
}

/* --- Handy: noch kompakter --- */
@media (max-width: 575px) {

  .booking-title { font-size: 28px !important; }

  /* 3er-Spalten (Buch/Kamishibai/Poster) untereinander, damit nix gequetscht wird */
  .cell-lg-4.cell-md-4.cell-xs-4,
  .cell-lg-6.cell-md-6.cell-xs-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Eingaben voll breit */
  .booking-order-panel .form-wrap,
  .booking-order-panel .form-input,
  .booking-order-panel select.form-input,
  .booking-order-panel textarea.form-input {
    width: 100% !important;
  }
}