/* ===================================================
   LAYOUT & SCROLL FIXES
   =================================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#apartment-slider {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* Der "Jetzt Buchen"-Button im Kalender-Modal springt per Anker (#buchen)
   zur Buchungsmaske. Ohne scroll-margin-top landet der Abschnitt genau
   unter dem fixierten Header (h-16 / h-20) und die Überschrift ist
   verdeckt. Mit scroll-margin-top bleibt beim Hinspringen genug
   Abstand nach oben frei. */
#buchen,
#unterkuenfte,
#vorteile,
#soelden-guide,
#anreise,
#kontakt {
  scroll-margin-top: 96px;
}

#apartmentIframeAll iframe {
  width: 100% !important;
  min-height: 520px;
  border: 0 !important;
  background: transparent;
}


/* ===================================================
   SMOOBU KALENDER: PFEIL-FIX & ABGERUNDETE BUCHUNGSFELDER
   =================================================== */

/* Container für das Smoobu Widget */
.smoobu-widget-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 4px;
  box-sizing: border-box;
}

/* Äußerer Rahmen/Radius des Widgets (kein Farbfilter mehr - Farben werden
   unten gezielt gesetzt: frei = Grün, belegt = Pastellrot) */
.calendarWidget,
.calendarContent,
.smoobu-widget-wrapper iframe {
  border-radius: 12px !important;
}

/* Hintergrund des Kalendergitters (= freie Tage) wieder dezent grau,
   wie im Smoobu-Original. */
.smoobu-widget-wrapper .multiCalendarWidget {
  background: #f2f2f2 !important;
}

/*
   WICHTIG: Smoobu benennt die Pfeil-Buttons intern ".btn-prev" / ".btn-next"
   (nicht ".prev"/".next") und die Monatsüberschrift ist ein simples "h2"
   (keine ".month-name"-Klasse). Diese Selektoren aus der Vorgängerversion
   griffen daher nie. Der Fix unten trifft die echten Klassennamen und
   räumt dem Titel genug Platz frei, damit die runden Pfeil-Buttons
   (32px breit, 26px vom Rand, siehe Smoobu-CSS) nicht mehr über den Text
   ("SEPTEMBER" etc.) ragen.
*/
.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget h2 {
  margin-left: 64px !important;
  margin-right: 64px !important;
  box-sizing: border-box !important;
}

/*
   Belegte Tage: pastellrot (Smoobu-Standard #ffbfbf), unverändert.
   An-/Abreisetage bleiben - wie bei Smoobu üblich - halb schräg geteilt
   (keine volle Fläche), nur ist die "freie" Hälfte jetzt grün statt grau,
   damit sie zum neuen Grün des Kalenders passt. Zusätzlich runden wir die
   äußere Ecke des Buchungsblocks ab.
*/
.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget table td.normal {
  background-color: #ffbfbf !important;
}

.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget table td.arrival {
  background: linear-gradient(to right bottom, #f2f2f2 50%, #ffbfbf 50%) !important;
  border-radius: 10px 0 0 10px !important;
}

.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget table td.departure {
  background: linear-gradient(to right bottom, #ffbfbf 50%, #f2f2f2 50%) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Ein-Tages-Buchung: An- und Abreise fallen auf dieselbe Zelle */
.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget table td.arrival.departure {
  border-radius: 10px !important;
}

/* Erste/letzte Zelle einer Kalenderwoche zusätzlich abrunden, falls ein
   Buchungsblock genau am Zeilenende/-anfang beginnt bzw. endet */
.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget table td.normal:first-child {
  border-radius: 10px 0 0 10px !important;
}

.smoobu-widget-wrapper .multiCalendarWidget .singleCalendarWidget table td.normal:last-child {
  border-radius: 0 10px 10px 0 !important;
}