/* 
Theme Name: Ferienhaus Magdalena

Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* add this to your custom CSS in the site settings */


/*=================== ALLGEMEIN ===================*/
html {
  scroll-behavior: auto !important;
}
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}


html{
	 scroll-padding-top: 150px;
}


body:not(.elementor-editor-active) .elementor.elementor-location-header {
    position: absolute;
    z-index: 9999;
    width: 100%;
}

/*=================== HEADER ===================*/

.sticky-header .magdalena-logo img {
    transition: .5s all ease-in-out;
}

.sticky-header.elementor-sticky--active {
    background-color: white !important;
}

.sticky-header.elementor-sticky--active .magdalena-logo img {
    width: 110px;
}

@media (max-width: 767px) {
    .sticky-header.elementor-sticky--active .magdalena-logo img {
        width: 80px;
    }

}


/*================ VERTICAL DESIGN SECTION ==================*/

.magdalena-headline { 
	writing-mode: vertical-rl; 
	transform: rotateZ(-180deg); 
}

.magdalena-headline-line { 
	width: 2px; 
	height: 100%; 
}



/* =========================================================
   Media Carousel – Punkte links / Pfeile rechts
   Vertikal mittig ausgerichtet (saubere Linie)
========================================================= */

.bilder-karussell .elementor-main-swiper{
  position: relative;
  padding-bottom: 44px !important;
}

/* ===============================
   Pagination (Punkte) – links
================================ */
.bilder-karussell .swiper-pagination{
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;

  height: 44px;
  width: auto !important;
  max-width: calc(100% - 110px);

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  transform: none !important;
  text-align: left !important;

  z-index: 5;
}

/* ===============================
   Pfeile – rechts
================================ */
.bilder-karussell .elementor-swiper-button-prev,
.bilder-karussell .elementor-swiper-button-next{
  top: auto !important;
  bottom: 0 !important;

  height: 44px;

  display: flex;
  align-items: center;
  transform: none !important;
  margin: 0 !important;

  z-index: 6;
}

/* rechter Pfeil */
.bilder-karussell .elementor-swiper-button-next{
  right: 5px !important;
  left: auto !important;
}

/* linker Pfeil */
.bilder-karussell .elementor-swiper-button-prev{
  right: 35px !important;
  left: auto !important;
}


/* ================== MAP: SCROLL-ZOOM DEAKTIVIERT, DRAG AKTIV NACH KLICK ================== */

.map-wrapper{
  position: relative;
}

/* Standard: Karte nicht anklickbar */
.map-wrapper iframe{
  pointer-events: none;
}

/* Aktiv: Karte bedienbar */
.map-wrapper.active iframe{
  pointer-events: auto;
}

/*kleiner Hinweis wenn nicht aktiv */
.map-wrapper::after{
  content: "Tippen zum Aktivieren";
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

@media (hover: none) and (pointer: coarse){
  .map-wrapper:not(.active)::after{ opacity: 1; }
}


/* ================== PREISTABELLE SCROLL BALKEN ================== */
@media (max-width: 767px){

/* sicherstellen, dass horizontal gescrollt werden kann */
.price-table .uael-table-wrapper,
.price-table .uael-table-container{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar sichtbar + größer (Chrome/Android/Windows, teils Safari Mac) */
.price-table .uael-table-wrapper::-webkit-scrollbar,
.price-table .uael-table-container::-webkit-scrollbar{
  height: 12px;
}

.price-table .uael-table-wrapper::-webkit-scrollbar-track,
.price-table .uael-table-container::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

.price-table .uael-table-wrapper::-webkit-scrollbar-thumb,
.price-table .uael-table-container::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.85); /* weiß */
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.25); /* macht ihn "griffig" */
}

}


@media (max-width: 767px){

.price-table .uael-table-wrapper{
  position: relative;
  padding-top: 22px; /* Platz für Hinweis */
}

.price-table .uael-table-wrapper:before{
  content: "↔ Nach links/rechts wischen";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
}


/*=================== EASY BOOKING ===================*/


/*=================== VERFÜGBARKEITSKALENDER - ALLGEMEIN ===================*/

span.eb-date-day {
    color: #323031;
}

.eb-availability h2,
.eb-availability h3,
.eb-availability h4 {
    font-size: 18px !important;
}

.eb-availability h2 {
    color: #323031 !important;
}

.eb-availability .eb-oneday .eb-date-day {
    font-size: 10px !important;
    font-weight: 600 !important;
}


/*=================== VERFÜGBARKEITSKALENDER - ZELLEN ===================*/

.eb-availability .eb-oneday {
    border-bottom: 0 !important;
}


/*=================== VERFÜGBARKEITSKALENDER - FARBEN ===================*/

.eb-availability .eb-oneday.arrival-free.departure-free {
    background: #8dc200 !important;
}

.eb-availability .eb-oneday.arrival-blocked.departure-blocked {
    background: #d56c6d !important;
}

.eb-availability .eb-oneday.departure-free.arrival-blocked {
    background: #d56c6d !important;
}

.eb-availability .eb-oneday.departure-blocked.arrival-free {
    background: #8dc200 !important;
}


/*=================== VERFÜGBARKEITSKALENDER - KATEGORIEN ===================*/

.eb-availability-onecat-name {
    background: #323031 !important;
    border: solid #ccc;
    border-width: 1px;
    padding: 2px 2px 2px 10px;
}

.eb-availability-categories {
    margin-bottom: 10px !important;
    border: solid #ccc;
    border-width: 1px 1px 0 1px;
}


/*=================== VERFÜGBARKEITSKALENDER - LEGENDE ===================*/

.eb-availability-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    min-height: unset;
    padding: 20px 0 0;
}

.eb-availability-legend > div {
    display: flex;
    align-items: center;
    margin: 0;
    float: none !important;
}

.eb-availability-legend span,
.eb-availability-legend p {
    margin: 0;
}

.eb-availability-legend-box {
    flex: 0 0 auto;
    margin-right: 12px;
}


/*=================== VERFÜGBARKEITSKALENDER - NAVIGATION ===================*/

a.eb-availability-prev.eb-availability-month-nav-button,
a.eb-availability-next.eb-availability-month-nav-button,
a.eb-availability-prev.eb-availability-month-nav-button.eb-cicolors,
a.eb-availability-next.eb-availability-month-nav-button.eb-cicolors,
a.eb-availability-prev.eb-availability-month-nav-button:hover,
a.eb-availability-next.eb-availability-month-nav-button:hover,
a.eb-availability-prev.eb-availability-month-nav-button:focus,
a.eb-availability-next.eb-availability-month-nav-button:focus,
a.eb-availability-prev.eb-availability-month-nav-button:active,
a.eb-availability-next.eb-availability-month-nav-button:active,
a.eb-availability-prev.eb-availability-month-nav-button:visited,
a.eb-availability-next.eb-availability-month-nav-button:visited {
    background: #707070 !important;
    background-color: #707070 !important;
    border-color: #707070 !important;
    color: #ffffff !important;
}

a.eb-availability-prev.eb-availability-month-nav-button i,
a.eb-availability-next.eb-availability-month-nav-button i,
a.eb-availability-prev.eb-availability-month-nav-button i::before,
a.eb-availability-next.eb-availability-month-nav-button i::before {
    color: #ffffff !important;
}


/*=================== BUCHUNGSMASKE - LAYOUT ===================*/

#ebFrontEndFrame,
#ebbeContainer,
#ebbeContainer #ebbeAppWrapper,
#ebbeContainer #ebbeAppWrapper #ebbeContent {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#ebFrontEndFrame {
    background: transparent !important;
}

#ebFrontEndFrame,
#ebFrontEndFrame * {
    color: #b2b2b2;
}


/*=================== BUCHUNGSMASKE - TEXTE ===================*/

#ebFrontEndFrame label,
#ebFrontEndFrame .control-label,
#ebFrontEndFrame .form-label,
#ebFrontEndFrame .help-block,
#ebFrontEndFrame .description,
#ebFrontEndFrame .text-muted,
#ebFrontEndFrame .small,
#ebFrontEndFrame .hint,
#ebFrontEndFrame .subtitle {
    color: #aaaaaa !important;
}

#ebFrontEndFrame h1,
#ebFrontEndFrame h2,
#ebFrontEndFrame h3,
#ebFrontEndFrame h4,
#ebFrontEndFrame h5,
#ebFrontEndFrame h6,
#ebFrontEndFrame .headline,
#ebFrontEndFrame .title {
    color: #ffffff !important;
}


/*=================== BUCHUNGSMASKE - FORMULARFELDER ===================*/

#ebFrontEndFrame input,
#ebFrontEndFrame select,
#ebFrontEndFrame textarea {
    background: #3a3839 !important;
    color: #e7e7e7 !important;
    border: 1px solid #707070 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#ebFrontEndFrame input::placeholder,
#ebFrontEndFrame textarea::placeholder {
    color: #aaaaaa !important;
    opacity: 1;
}

#ebFrontEndFrame input:focus,
#ebFrontEndFrame select:focus,
#ebFrontEndFrame textarea:focus {
    border-color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}


/*=================== BUCHUNGSMASKE - BOXEN ===================*/

#ebFrontEndFrame .panel,
#ebFrontEndFrame .panel-body,
#ebFrontEndFrame .card,
#ebFrontEndFrame .well,
#ebFrontEndFrame .box,
#ebFrontEndFrame .booking-item,
#ebFrontEndFrame .room,
#ebFrontEndFrame .apartment,
#ebFrontEndFrame .appartement,
#ebFrontEndFrame .section,
#ebFrontEndFrame .step-content {
    background: #323031 !important;
    border: 1px solid #707070 !important;
    box-shadow: none !important;
    color: #e7e7e7 !important;
}


/*=================== BUCHUNGSMASKE - BUTTONS ===================*/

#ebFrontEndFrame button,
#ebFrontEndFrame .btn,
#ebFrontEndFrame input[type="button"],
#ebFrontEndFrame input[type="submit"],
#ebFrontEndFrame .button {
    background: #707070 !important;
    color: #ffffff !important;
    border: 1px solid #707070 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#ebFrontEndFrame button:hover,
#ebFrontEndFrame .btn:hover,
#ebFrontEndFrame input[type="button"]:hover,
#ebFrontEndFrame input[type="submit"]:hover,
#ebFrontEndFrame .button:hover {
    background: #ffffff !important;
    color: #323031 !important;
    border-color: #ffffff !important;
}


/*=================== BUCHUNGSMASKE - SCHRITT-NAVIGATION ===================*/

#ebFrontEndFrame .step,
#ebFrontEndFrame .steps,
#ebFrontEndFrame .wizard-step,
#ebFrontEndFrame .nav-step,
#ebFrontEndFrame .step-title {
    color: #aaaaaa !important;
}

#ebFrontEndFrame .active,
#ebFrontEndFrame .current,
#ebFrontEndFrame .is-active,
#ebFrontEndFrame .step.active,
#ebFrontEndFrame .wizard-step.active {
    color: #ffffff !important;
}


/*=================== BUCHUNGSMASKE - LINIEN ===================*/

#ebFrontEndFrame hr,
#ebFrontEndFrame .divider,
#ebFrontEndFrame .border,
#ebFrontEndFrame .line {
    border-color: #707070 !important;
}


/*=================== BUCHUNGSMASKE - STEP 1 ===================*/

#ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneRooms .oneRoom {
    margin-top: 1rem;
    margin-right: 1rem;
    margin-left: 1rem;
    box-shadow: none !important;
}

#ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneDates {
    clear: both;
    background: #3a3839 !important;
    padding: 25px;
    box-sizing: border-box;
}

#ebbeContainer #ebbeAppWrapper #ebbeContent #ebbeStepOne .stepOneRooms.childView {
    background: #3a3839 !important;
}


/*=================== BUCHUNGSMASKE - PREIS ===================*/

#ebbeContainer #ebbeAppWrapper #ebbeContent .nights,
#ebbeContainer #ebbeAppWrapper #ebbeContent .currentPrice {
    color: #ffffff !important;
}

#ebbeContainer #ebbeAppWrapper #ebbeContent .showPriceDetailsInPopover {
    color: #e7e7e7 !important;
}




/*=================== WP SIMPLE BOOKING CALENDAR ===================*/

.wpsbc-container .wpsbc-calendars .wpsbc-calendar {
    border: none;
    background: #323031;
}

.wpsbc-legend {

    border: none;
    background:  #323031;
}