/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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 */

#reservieren .wpbs-form-field-input textarea {
	min-height: 160px!important;
}

body.admin-bar #mein-elementor-header {
    /*top: 132px; /* Oder der Wert, um den er nach unten soll */
}

.exampp-hints {font-size: 1rem;}


.logout-map .exggmap-wrapper {
	aspect-ratio:12/10!important;
}

@media screen and (max-width: 767px){
	.wpbs-form-confirmation-message {
		width: 100%!important;
  
}
}

@media screen and (max-width: 880px){
	
}

@media screen and (max-width: 1024px){
	
}

@media screen and (max-width: 1200px){
	
}


/* Anpassung für das Dropdown-Menü (Monatsauswahl) */
#reservieren .wpbs-calendar-header-navigation .wpbs-select-container select {
    width: 100%;
    padding: 8px 10px;  /* Ausreichend vertikales und horizontales Padding */
    box-sizing: border-box;
    font-size: 1em;     /* Standard-Schriftgröße für gute Lesbarkeit */
    height: auto;       /* Höhe automatisch an den Inhalt anpassen lassen */
    line-height: normal;/* Standard-Zeilenhöhe verwenden */
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff; /* Sicherstellen, dass der Hintergrund nicht durchscheint */
    /* appearance: none; /* Optional, falls du eigene Pfeile stylen willst */
    /* -webkit-appearance: none; */
    /* -moz-appearance: none; */
}

/* --- Start: Responsive CSS für WP Buchungssystem innerhalb von #reservieren --- */

/* Allgemeiner Wrapper */
#reservieren .wpbs-main-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Spezifischer Wrapper: Kalender UND Formular nebeneinander */
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: stretch; /* Für gleiche Höhe der Boxen */
}

/* Kalender-Block als Flex-Item (50% Breite) */
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > .wpbs-container.wpbs-calendar-1 {
    flex: 1 1 50%;
    min-width: 280px;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Formular-Block als Flex-Item (50% Breite) */
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > form#wpbs-form-1.wpbs-form-container {
    flex: 1 1 50%;
    max-width: 100%;
    margin-top: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Stile für den Inhalt (damit er die Höhe füllt, falls die Box durch stretch höher wird) */
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > .wpbs-container.wpbs-calendar-1 > .wpbs-calendars-wrapper,
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > .wpbs-container.wpbs-calendar-1 .wpbs-calendars,
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 .wpbs-calendar,
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 .wpbs-calendar-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > form#wpbs-form-1.wpbs-form-container > .wpbs-form-fields {
    flex-grow: 1;
}


/* --- Interne Kalenderstruktur (Legende & Kalender-Grid) --- */

/* Standard für den Wrapper von Legende und Kalender-Grid mit 'wpbs-legend-position-side'
   Dies ist die Grundlage für Kalender, die NICHT der "erste Kalender" sind.
   Der "erste Kalender" überschreibt dies weiter unten. */
#reservieren .wpbs-calendars-wrapper.wpbs-legend-position-side {
    display: flex;
    flex-direction: row; /* Standard: Legende LINKS/RECHTS vom Kalender-Grid */
    flex-wrap: wrap;     /* Erlaubt Umbruch, falls nicht genug Platz für beide nebeneinander */
    gap: 15px;
    width: 100%;
}

/* ALLE Legenden-Einträge ("Verfügbar", "Gebucht") sollen horizontal angeordnet sein */
#reservieren .wpbs-legend {
    display: flex;
    flex-direction: row; /* Items nebeneinander */
    flex-wrap: wrap;     /* Items umbrechen lassen, wenn die Legende schmal ist */
    align-items: center;
    gap: 6px 12px;       /* Abstand zwischen den Legendeneinträgen */
}

/* Verhalten der Legende-Box, wenn sie NEBEN dem Kalender-Grid ist (für andere Kalender als den ersten) */
#reservieren .wpbs-calendars-wrapper.wpbs-legend-position-side > .wpbs-legend {
    flex-grow: 0; /* Legende soll nicht wachsen */
    flex-shrink: 1; /* Legende kann schrumpfen */
    /* max-width: 180px; /* Optional: Maximale Breite für seitliche Legende, falls gewünscht */
}

/* Verhalten des Kalender-Grid-Blocks, wenn er NEBEN der Legende ist */
#reservieren .wpbs-calendars-wrapper.wpbs-legend-position-side > .wpbs-calendars {
    flex-grow: 1; /* Kalender-Grid nimmt den restlichen Platz ein */
    min-width: 260px;
    max-width: 100% !important;
}


/*
   SPEZIFISCH FÜR DEN ERSTEN KALENDER (der neben dem Formular):
   Legende IMMER OBEN, Einträge horizontal und zentriert.
*/
#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 .wpbs-calendars-wrapper.wpbs-legend-position-side {
    flex-direction: column; /* Überschreibt Standard: Legende OBEN */
    align-items: stretch;   /* Legende und Kalender-Grid volle Breite */
    gap: 10px;              /* Abstand zwischen Legende und Kalender-Grid */
}

#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 .wpbs-calendars-wrapper.wpbs-legend-position-side > .wpbs-legend {
    justify-content: center; /* Zentriert die horizontalen Legendeneinträge */
    width: 100%;
    margin-bottom: 5px;
    order: -1; /* Stellt sicher, dass die Legende visuell zuerst kommt */
    /* flex-grow, flex-shrink sind hier weniger relevant, da es volle Breite einnimmt */
}

#reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 .wpbs-calendars-wrapper.wpbs-legend-position-side > .wpbs-calendars {
    width: 100%; /* Kalender-Grid nimmt volle Breite unter der Legende ein */
}


/* Kalender-Container (wo data-max_width gesetzt ist) - gilt für alle Kalender */
#reservieren .wpbs-container.wpbs-calendar-1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Kalender-Kopfzeile: Navigation - gilt für alle Kalender */
#reservieren .wpbs-calendar-header-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
/* Dropdown bereits oben spezifisch gestyled */

/* Kalendertabelle und Zellen - gilt für alle Kalender */
#reservieren .wpbs-calendar table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#reservieren .wpbs-calendar th,
#reservieren .wpbs-calendar td {
    text-align: center;
    padding: 0;
}
#reservieren .wpbs-date-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 36px;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}
#reservieren .wpbs-date-number {
    font-size: 0.95em;
}

/* --- Kompaktere Formular-Stile (wie vorher) --- */
#reservieren .wpbs-form-container { width: 100%; box-sizing: border-box; }
#reservieren .wpbs-form-fields { display: flex; flex-direction: column; gap: 10px; }
#reservieren .wpbs-form-field { width: 100%; }
#reservieren .wpbs-form-field-label label { display: block; margin-bottom: 3px; font-weight: bold; font-size: 0.88em; }
#reservieren .wpbs-form-field-input input[type="text"],
#reservieren .wpbs-form-field-input input[type="email"],
#reservieren .wpbs-form-field-input input[type="tel"],
#reservieren .wpbs-form-field-input input[type="number"],
#reservieren .wpbs-form-field-input textarea { width: 100%; padding: 7px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; font-size: 15px; }
#reservieren .wpbs-form-field-input textarea { min-height: 60px; resize: vertical; }
#reservieren .wpbs-form-field-checkbox .wpbs-form-field-input label { display: flex; align-items: center; font-weight: normal; font-size: 0.88em; }
#reservieren .wpbs-form-field-checkbox .wpbs-form-field-input input[type="checkbox"] { width: auto; margin-right: 5px; transform: scale(1); }
#reservieren .wpbs-form-submit-button button { padding: 9px 14px; background-color: #0073aa; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.9em; width: 100%; box-sizing: border-box; margin-top: 8px; }
#reservieren .wpbs-form-submit-button button:hover { background-color: #005a87; }


/* --- Media Queries --- */

/* Tablet-Ansicht: Stapeln der Legende für ANDERE Kalender (NICHT der erste) */
@media (max-width: 767px) {
    /* Diese Regel wirkt auf alle .wpbs-calendars-wrapper, außer dem im "ersten Kalender",
       da dieser bereits permanent auf flex-direction: column gesetzt ist.
       Alternativ: Die spezifischere Regel für den ersten Kalender überschreibt dies einfach. */
    #reservieren .wpbs-calendars-wrapper.wpbs-legend-position-side {
        flex-direction: column; /* Legende ÜBER das Kalender-Grid stapeln */
        align-items: stretch;
        gap: 10px;
    }

    #reservieren .wpbs-calendars-wrapper.wpbs-legend-position-side > .wpbs-legend {
        justify-content: center; /* Zentriert die horizontalen Legendeneinträge */
        width: 100%;
        margin-bottom: 10px;
        /* max-width: none; /* Hebt ggf. eine max-width für seitliche Legende auf */
    }

    #reservieren .wpbs-date-inner {
        min-height: 34px;
        font-size: 0.9em;
    }
}

/* Mobiltelefon-Ansicht: Kalender-Block und Formular-Block untereinander */
@media (max-width: 600px) {
    #reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    #reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > .wpbs-container.wpbs-calendar-1,
    #reservieren .wpbs-main-wrapper.wpbs-main-wrapper-calendar-1.wpbs-main-wrapper-form-1 > form#wpbs-form-1.wpbs-form-container {
        width: 100%;
        flex-basis: auto;
        height: auto;
    }

    /* Formular und Kalender Details für mobile Ansicht anpassen */
    #reservieren .wpbs-form-field-input input[type="text"],
    #reservieren .wpbs-form-field-input input[type="email"],
    #reservieren .wpbs-form-field-input input[type="tel"],
    #reservieren .wpbs-form-field-input input[type="number"],
    #reservieren .wpbs-form-field-input textarea { font-size: 16px; padding: 10px; }
    #reservieren .wpbs-form-field-label label { font-size: 0.95em; }
    #reservieren .wpbs-form-submit-button button { padding: 12px 18px; font-size: 1em; }
    #reservieren .wpbs-calendar-header-navigation .wpbs-select-container select { font-size: 0.95em; padding: 8px; }
    #reservieren .wpbs-date-number { font-size: 0.9em; }
}

/* --- Ende: Responsive CSS für WP Buchungssystem --- */

/* Für mobile Ansichten */
@media screen and (max-width: 767px) {
  body.logged-in .monem-menu{
    padding-top: 36px;
  } 
}

@media screen and (min-width: 880px) {
.wpbs-legend {
    width: 50%!important;
}
}

body.logged-in > .off-canvas-wrapper {
	  padding-top: 36px;
  }

/* Verhindert, dass zu breite Slider-Inhalte einen horizontalen Scrollbalken erzeugen */
#slider-unterkunft,
#slider-oekologie,
#slider-monemvasia,
#slider-anreise {
    overflow-x: hidden !important;
}