/*
Theme Name: Calidaro
Theme URI: https://www.calidaro.com
Description: Theme für Calidaro
Author: Philip Rottschäfer
Author URI: https://philro-web.de
Text Domain: calidaro
Domain Path: /languages
Version: 1.0.0
*/


/* Google-Fontz
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* Browser Reset
--------------------------------------------------------------- */

body {color:#1C2541;
	font-family: 'Lato', sans-serif;
}
.cursor-pointer{cursor: pointer;}
@media (max-width: 991.98px) { 
	/* Falls Admin-Leiste aktiv ist, Header nach unten verschieben */
	body.admin-bar header {
		margin-top: 46px; /* Platz für die Admin-Leiste */
	}

	/* Falls Menü fixiert ist, ebenfalls nach unten schieben */
	body.admin-bar #header-nav {
		top: 46px;
	}
	html #wpadminbar{position: fixed;width: 100%;}
}
img{max-width: 100%; height: auto;}
.back-to-top {
	background:var(--accent-color);
	position: fixed;
	bottom:75px;
	right:20px;
	padding:1em;
	color: #1C2541!important;
	font-size: 20px;
	z-index: 999;
}
.back-to-top svg{
	transform: rotate(180deg);
}
select:disabled {
	background: green;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
/**
 * Inhaltsangabe
 *
 **/


/*--------------------------------------------------------------
| Headings														|
--------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	color: #1C2541;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none;
}

.unterkunft_header {
    text-align: center;
    font-weight: 600;
    font-size: 40px;
    color: var(--main-color);
    margin: 0;
}

.related-post h4 {
	margin: 0;
}

.desc-header h3 a {
	color: var(--main-color);
}
.title-underline{text-align: center;color: var(--main-color);margin: 0; }
/* selected link */

/*--------------------------------------------------------------
| Links														|
--------------------------------------------------------------- */
/* a {
	color: #000;
	text-decoration: none;
}
a:link {color: var(--main-color);}      /* unvisited link */
a:not(.btn) {color: var(--main-color);}  /* visited link */
a:hover {color: var(--main-color);}  /* mouse over link */
a:active {color: var(--main-color);}  /* selected link */ */

body.custom-background {
	background-size: 100%;
	background-position: 0 14em!important;
}
.wrapper {
	min-height:850px;
}
a.favoritebutton {
	display: inline-block;
	vertical-align: bottom;
	border: 1px solid transparent;
	border-radius: 3px;
	padding: .2em 0em .2em 0em;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	background: orange;
	width: 60%;
	color: white;
	margin: 1em;
	position: relative;
	left: 15%;
}
#objectheader{
	margin-top: 0;
	margin-bottom: 0;
}

/*--------------------------------------------------------------
| Header														|
--------------------------------------------------------------- */
header {
	background-color: var(--main-color);
}
.head {
	margin: 0 auto;
	position: relative;
	background: url(images/header.png)no-repeat;
	background-position: 20% 10%; 
}
.logo {
	margin-bottom: 1.3rem;
}
.site-branding img {
	width: 120px;
}
.dot{color: var(--accent-color);}


/* 🔹 Menü-Button */
.menu-icon {
    display: block;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
}
.menu-icon span {
	display: block;
	position: absolute;
	top: 15px;
	left:0;
	right: 0;
	height: 3px;
	background: #1C2541;
}
.menu-icon span:before,
.menu-icon span:after {
	position: absolute;
	display: block;
	left: 0;
	width: 60%;
	height: 3px;
	background-color: #fff;
	content: "";
}
.menu-icon span:before {
	top: -14px;
}
.menu-icon span:after {
	bottom: -14px;
}

.menu-icon-X span {
	transition: background 0s 0.3s;
}
.menu-icon-X span:before,
.menu-icon-X span:after {
	transition-duration: 0.3s, 0.3s;
	transition-delay: 0.3s, 0s;
}
.menu-icon-X span:before {
	transition-property: top, transform;
}
.menu-icon-X span:after {
	transition-property: bottom, transform;
}
.menu-icon-X.is-active span {
	background: none;
}
.menu-icon-X.is-active span:before {
	top: 0;
	transform: rotate(45deg);
}
.menu-icon-X.is-active span:after {
	bottom: 0;
	transform: rotate(-45deg);
}
.menu-icon-X.is-active span:before,
.menu-icon-X.is-active span:after {
	transition-delay: 0s, 0.3s;
}
/*--------------------------------------------------------------
| Navigation													|
--------------------------------------------------------------- */
/*--------------------------------------------------------------
| 📌 Mobile-First Navigation (Akkordeon für Submenüs)
--------------------------------------------------------------- */
/* 🔹 Menü-Overlay */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Dunkler Hintergrund */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
   
}

/* 🔹 Wenn das Menü geöffnet ist, wird das Overlay sichtbar */
body.menu-open #menu-overlay {
    opacity: 1;
    visibility: visible;
}


nav#header-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 60%;
    background: var(--main-color);
    z-index: 9999;
    overflow-y: auto;
    left: 0;

    /* Standardwerte für Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-200px);

    /* Sanfte Animation */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* 🔹 Wenn das Menü geöffnet ist */
nav#header-nav.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* 🔹 Hauptmenü */
nav#header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#header-nav ul li {
    position: relative;
}

/* 🔹 Hauptmenü-Links */
nav#header-nav ul a {
    display: block;
    padding: 10px 15px;
    color: #1C2541;
    text-decoration: none;
}

/* 🔹 Aktive Menüelemente */
li.current-menu-item {
    background: var(--accent-color);
    border-radius: .3rem !important;
}

li.current-menu-item a {
    color: #fff;
}

/*--------------------------------------------------------------
| 📌 Submenü (Mobile-First: Standardmäßig Akkordeon)
--------------------------------------------------------------- */

/* Submenü ausblenden */
nav#header-nav ul .sub-menu {
    display: none;
    padding-left: 15px;
	background: var(--main-color);
}

/* 🔹 `+` Icon anzeigen */
nav#header-nav ul .menu-item-has-children > a {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 🔹 Mobile-First: `+`-Button bleibt oben rechts */
nav#header-nav ul .menu-item-has-children {
    position: relative; /* Referenz für `absolute` */
}

/* 🔹 `+` bleibt oben rechts */
nav#header-nav ul .submenu-toggle {
    position: absolute;
    top: 10px; /* Statt `50%`, damit es oben bleibt */
    right: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #1C2541;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
	width: 30px;
	height: 30px;
	text-align: center;
}

/* 🔹 `+` wird zu `-` mit Dreh-Effekt */
nav#header-nav ul .submenu-toggle.open {
    transform: rotate(180deg);
}
/* Wenn aktiv, Submenü anzeigen */
nav#header-nav ul .sub-menu.open {
    display: block;
}

/*--------------------------------------------------------------
| 📌 Desktop-Optimierung (Hover statt Akkordeon)
--------------------------------------------------------------- */
@media (min-width: 992px) {
    nav#header-nav {
        position: relative;
        width: auto;
        transform: none;
        opacity: 1;
        visibility: visible;
        overflow: visible;
    }

    nav#header-nav ul {
        display: flex;
        gap: 10px;
    }

 

    /* Submenü richtig positionieren */
    nav#header-nav ul .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        min-width: 200px;
        border-radius: 0.3rem;
        z-index: 9999;

        /* Standardmäßig versteckt */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    /* Submenü bei Hover einblenden */
    nav#header-nav ul li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
		display: block;
    }

    /* Submenü-Links */
    nav#header-nav ul .sub-menu li a {
        padding: 8px 15px;
        color: white;
        display: block;
    }

    nav#header-nav ul .sub-menu li a:hover {
        background: var(--accent-color);
    }
}


/*--------------------------------------------------------------
| Hauptbereich													|
--------------------------------------------------------------- */


.wrapper {
	background: #F7F9FC;
	
}

.responsiveContainer {
	position: relative;
	padding-bottom: 56%;
	height: 0;
	overflow: hidden;
}
.responsiveContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.breadcrumbs {
	margin-top: 2em;
	margin-bottom: .5em;
	padding: 0;
	font-size: smaller;
}
.hero-section {
	height: 350px;
	background: 
		 linear-gradient(to bottom, rgba(28, 37, 65, 0.5), rgba(28, 37, 65, 0)), /* Schwarzer Farbverlauf */
		 url("https://brigitte-in-spanien.de/wp-content/uploads/2025/02/Calidaro_hero-scaled.jpg") no-repeat center;
	background-size: cover;
}
.objektdetail dl {
	border-top: 1px solid #e0e0e0;
	width:100%;
}

.objektdetail dl:first-child{
	border-top:0;
}
.objektdetail dt {
	float:left;
}
.meta_single {
	margin-bottom: 1em;
}
.meta_single small{ font-weight: 600; }
.meta_single a {
	color: #000;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.icon {
	background: url('images/icons/iconsprite.png') ;
	text-indent: -9999em;
	width: 25px;
	height: 25px;
	position: absolute;
	overflow: hidden;
	background-repeat: no-repeat;
	top: 5px;
	left: 30px;  
} 

.icon-kinderbett { background-position: 0 0; } 
.icon-kitchen { background-position: 0 -25px; } 
.icon.icon-klimaanlage { background-position: 0 -50px; } 
.icon-lift { background-position: 0 -75px; } 
.icon-parkplatz { background-position: 0 -100px; } 
.icon-pool { background-position: 0 -125px; } 
.icon-satellitenschuessel { background-position: 0 -150px; } 
.icon-sauna { background-position: 0 -175px; } 
.icon-spulmaschine { background-position: 0 -200px; } 
.icon-fernseher { background-position: 0 -225px; } 
.icon-waschmaschine { background-position: 0 -250px; } 
.icon-wifi { background-position: 0 -275px; } 
.icon-balkon { background-position: 0 -300px; } 
.icon-heizung { background-position: 0 -325px; } 
.icon-kamin { background-position: 0 -350px; } 
.icon-kids { background-position: 0 -375px; } 
.icon-haustiere {background-position: 0px -396px;}


#objektinfo table {
	margin-bottom: 0;
}


.description h3 {
	margin: 0;
}
#section-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

#section-nav .nav-link {
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
}

#section-nav .nav-link.active {
    color: var(--main-color);
    font-weight: bold;
    border-bottom: 2px solid var(--main-color);
}


.ausstattungs-item  {
	vertical-align: top;
	/*padding: 0 0 0 60px;*/
	line-height: 2.3rem;
	position: relative;
	box-sizing: border-box;
	display: inline-block;
}
.ausstattungs-item i {color:#66cc66;margin-right: .2em;}
.archive-ausstattung  {
	width: 5%;
}
.booking-info {
    padding: 1em;
    margin-top: 1em;
    background: #f2faff;
    text-align: center;
    font-weight: bold;
}
.form-signin {
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
}
.form-box {
	margin-top: 70px;
}

.form-top {	overflow: hidden;
	padding: 0 25px 15px 25px;
	background: #fff;
	-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 { margin-top: 0; }

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;
	font-size: 66px;
	color: #ddd;
	line-height: 100px;
	text-align: right;
}

.form-bottom {
	padding: 25px 25px 30px 25px;
	background: #eee;
	-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
	text-align: left;
}

.form-bottom form textarea {
	height: 100px;
}

.form-bottom form button.btn {
	width: 100%;
}

.form-bottom form .input-error {
	border-color: #19b9e7;
}



/*--------------------------------------------------------------
| Sidebar														|
--------------------------------------------------------------- */

/* Sidebar */
.sidebar {
	margin-top:1em;
}
aside {
	list-style-type: none;

}


.termine {
	padding: 1em!important;
}
.termine li {
	margin-bottom: 1em;
	border-bottom: 1px solid #eceae8;
}
.date {
	background: var(--main-color);
	color: #fff;
	width: 15%;
	text-align: center;
	float: left;
	padding: 2px;
}

.day {
	font-size: 20px;
}
.mth {
	font-size: 10px;
}
.termin-text {
	width: 80%;
	float: left;
	padding-left: 2px; 
}
.termin-text p {
	font-size: 20px;
	margin: 0;
}

.widget-container ul {
	list-style: none;
	padding: 0;
	margin-top: 0;
}
.widget a {
	text-decoration: none;
}
.widget-title {
	background: var(--accent-color);
	text-transform: uppercase;
	color: #fff;
	padding: 0.3em;
	margin: 0;
	font-size: 20px;
    text-align: center;
}
.awesome-weather-header {
	background: transparent!important;
}
#sidebar label {
	list-style-type: none;
}

.like a {
	color:white;
	margin: 0 auto;
	text-align: center;
	font-size: 1.5em;
	padding: 1em;
}
.like a:hover {
	color:white;
}

.fb,.tweet,.gplus,.whatsapp { 	
	text-align: center;
}
.fb {
	background-color: #47639E;
}
.tweet{
	background-color: #32CCFE;
}
.gplus {
	background-color: #C13222;
}
.whatsapp {
	background-color: #009933;
}

/* #anreise, #abreise {
	width: 48%;
	float: left;
	margin-left: 1%;
	margin-right: 1%;   
}
#person  {
	
	width:100%;
	border: 1px solid #bbb;
	margin: 0 auto;
	border-radius: 0;



}  */
#person option {
	font-size: 16px;
	border-top:1px solid #444;
	padding:.3em 1em .3em 1em;
}

 #booknow {background: var(--accent-color); padding: 1em; top: 1em;min-height: 180px; border-bottom: 5px solid var(--main-color);}
 #booknow h2 {color: #fff; text-align: center;background: var(--main-color);}
 #booknow label {font-weight: bold;}
 #booknow ul li {display: inline-block;}
 #booknow ul li:first-child {padding-left: 0; padding-right: 5px}
 #booknow ul li:last-child {padding-left: 5px;padding-right: 0;}
 #booknow ul li span {color:red;}
 
 input.bookfield:hover{cursor: pointer;}
ul#bookingrange {
    padding: 0;
}
 #bookingprice{text-align: right;}
 #bookingprice p {
    padding: .5em;
    border-bottom: 1px solid;
    font-weight: 600;
}
 #bookingprice #calced-price{
	font-size: 250%;
    color: #fff;
    background: var(--main-color);
    border-bottom: 3px solid #fff;
 }
 #endpreis{text-decoration: underline;font-weight: bold;}
 #calc {margin-top: 10px;}
.dropdown-toggle{background: none;border:none;}
.dropdown{padding: .8em}
#booknow .priceOverview{margin: 1em 0 1em 0}
#booknow .priceOverview table tr td {padding-right: 1.5em;}
.priceOverview {
	padding-top: 1em;
	padding-bottom:1em;
	font-size: 1.5rem;
}

/* Kalender*/
/*Kalender Tabelle */
#cal{min-height: 400px;}
#cal table.full{font-size: 10px;font-weight: bold; width: 100%;height: 400px;}
#cal table td, #cal table th{text-align: center;vertical-align: middle;}
.tab_container {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

#cal input, #cal section {
  clear: both;
  padding-top: 10px;
  display: none;
}

#cal label {
  font-weight: 700;
  font-size: 18px;
  display: block;
  float: left;
  padding: .5em 1.5em 0 1.5em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2
 {
  display: block;
}

.tab_container .tab-content p,
.tab_container .tab-content h3 {
  -webkit-animation: fadeInScale 0.7s ease-in-out;
  -moz-animation: fadeInScale 0.7s ease-in-out;
  animation: fadeInScale 0.7s ease-in-out;
}
.tab_container .tab-content h3  {
  text-align: center;
}

.tab_container [id^="tab"]:checked + label {
	color:var(--main-color);
	box-shadow: inset 0 3px var(--main-color);
}

.tab_container [id^="tab"]:checked + label .fa {
  color: #0CE;
}

#cal label .fa {
  font-size: 1.3em;
  margin: 0 0.4em 0 0;
}

  .cal-desc{margin-top: 1em;}
  @media only screen and (max-width: 800px) {
  	.cal-desc,#booknow{margin-bottom: 1em;}
  }
/* Kalender*/
 .cal-desc span{padding: .5em;}
.belegt {
	background:#f12b24!important;
	color:white;
    border: 2px solid #fff;
     cursor: not-allowed;
}
.free{background: #66cc66!important;color:#fff;border: 2px solid #fff;cursor: pointer;}
.select{background: var(--main-color)!important;}
.anreise,.abreise{color: #fff;background: var(--accent-color);border:2px solid; cursor: not-allowed;}
.cal-navigation{display: table;width: 100%; table-layout: fixed;}
.cal-navigation a {font-size: 25px;}

.kal_standard_tag {background: #66cc66!important;color:#fff;}
.kal_vormonat_tag {
    color: grey;
    background: #eee;
    font-size: 1rem;
}

.month td {
    height: 40px;
    width: 40px;
}
.calendarError p{
	color:#000;
	margin-top: 1em;
	padding: 1em;
	text-align: center;
}
.datepicker{
	border-radius: 0;

}
.datepicker[readonly] {
	background-color: #f2faff;
	cursor: pointer;
}
.btn-request {
	border-radius:0;
	background: var(--main-color); 
	color:#fff;
}
.btn-show {
	float: right;
	color: #fff;
}
.btn-show a {
	color: #fff;
}
.btn-request:hover {
	background: #117BBB;
	color: #fff;
	text-decoration: underline;
}
.related-post {
	margin-bottom: 1em;
}
.btn-outline{
	background: none;
	color: var(--main-color); 
	border:1px solid var(--main-color)!important; 
}
.btn-outline:hover{color: var(--main-color)}
/*--------------------------------------------------------------
| Footer														|
--------------------------------------------------------------- */
footer {
	bottom: 0;
	background: var(--main-color);
}
footer nav ul {
	margin: 0;
}
#footer nav {
	background: transparent;
}
.social-foot {
	width: 100%;
	background: var(--accent-color);
	font-size: 3.5em;
	color: #fff;
	text-align: center;

}
.social-foot a {
	color: #1C2541!important;
	text-decoration: none;
}

.social-foot a:hover {
	text-decoration: none;
	color: var(--main-color);
}
.social {
	width: 30%;
	margin: 0 auto;
	text-align: center;
}
.logo-foot img {
	width: 25%;
}
/* 🔹 Footer Menü */
.nav-footer {
	font-size: 14px;
	padding: 0;
	list-style: none;
}

/* 🔹 Hauptpunkte */
.nav-footer > li {
	margin-bottom: 8px;
}

/* 🔹 Links */
.nav-footer a {
	color: white;
	text-decoration: none;
}

.nav-footer a:hover {
	text-decoration: underline;
}

/* 🔹 Untermenü */
.nav-footer .sub-menu {
	padding-left: 1rem; /* Einrücken für Unterpunkte */
	list-style: none;
}

/* 🔹 Untermenü-Punkte */
.nav-footer .sub-menu li {
	margin-bottom: 5px;
}
.nav-footer a {
	color: white;
	text-decoration: none;
}

.nav-footer a:hover {
	text-decoration: underline;
}

/* 🔹 Trust-Elemente & Copyright in Dunkelblau */
.trust-elements,
.footer-bottom {
	color: #0A2A43; /* Dunkelblau */
	font-weight: bold;
}

/* 🔹 Links speziell hervorheben */
footer a {
	color: white;
	text-decoration: none;
}

footer a:hover {
	color: #F79256; /* Orange als CI-Akzent */
	text-decoration: underline;
}

/*--------------------------------------------------------------
| Tabellen								     					|
--------------------------------------------------------------- */
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
	background-color: #f5f5f5;
}


/*--------------------------------------------------------------
| Unterkunft													|
--------------------------------------------------------------- */

p#breadcrumbs {
	font-size: smaller;
	margin-bottom: 1em;
}

.archive-immo {
	border: thin solid #ECECEC;
	/*background-color: #ECECEC;*/
	display: block;
	padding: 1em;
	margin-bottom: 1em;
}
.listimage, .test {
	float:left;
}
output { 
	position: absolute;
	background-image: linear-gradient(top, #444444, #999999);
	width: 40px; 
	height: 30px; 
	text-align: center; 
	color: white; 
	border-radius: 10px; 
	display: inline-block; 
	font: bold 15px/30px Georgia;
	bottom: 175%;
	left: 0;
	margin-left: -1%;
}
output:after { 
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 10px solid #999999;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	margin-top: -1px;
}

.post {
	    padding: 1em;
    border-bottom: 1px solid #cecece;
}
.bis-Ad{max-width: 100%;}
.list-group{padding: 0;}
/*--------------------------------------------------------------
| Kleiner Bildschirm													|
--------------------------------------------------------------- */
@media all and (max-width:480px) {
   .btn-xs-block { width: 100%; display:block; }
   aside {margin-top: 1em;}
   .post {padding: 0; margin-bottom: 1em;}
}
@media screen and (max-width:800px){
	.description{
	text-align: center;
}
#aktWetter {visibility: none;display: none;}
	
	 	
	body {
		background: none;
	}
	body.custom-background{
		background:none;
	}

	header {position: fixed;width: 100%;z-index: 999;top: 0;border-bottom: 2px solid var(--main-color)}
	
	.head {
		background: none;
	}
	 nav#header-nav ul li {
		border-bottom: 1px solid  var(--main-color)
	}
	nav#Navsecondary ul {text-align: center;}
	nav#Navsecondary ul li {
		text-transform: uppercase;
		display: inline-table;
		font-size: 10px;
	}
	nav #menu ul a {
		font-size: 18px;


	}
	
	.social-foot .social {width: 100%;}
	nav ul li ul li {
		border:none;
		font-size: 10px;
	}
	nav ul li ul li a {
		font-size: 15px;
	}
	.wrapper {margin-top: 115px;}
	.kontaktemail, .kontakttele, .kontaktpersonen, .kontaktname, .kontaktnachricht {
		width: 100%;
	}
	.kontaktsenden {
		width: 90%;
		margin-left: 5%;
		background: #F88800;
		border: none;
		color: #fff;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		cursor: pointer;
		transition-property: background-color;
		transition-duration: 1s;
		font-weight: bold;
		font-size: 18px;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
	}
	.kontaktsenden:hover {
		background: #E57413;
	}
	#menu {
		overflow: hidden;
		
	}

	.logo {
		margin-bottom: 0;
		text-align: center;
	}
	.logo img {
		width: 65px;
	}
	.close-menu {
		font-size:40px;
		color:white;
		float: right;
	}
}
.bis-werbung {
	width: 468px; height: 60px;
}
.wp-post-image{
	width: 100%;
}

.list-group{padding: 0;}

.sub-menu li a {font-size: 15px;}
.visible{display: block!important; position: absolute;background:#fff; width: 300px; border:2px solid var(--main-color);left: 0;top: 35%;z-index: 999;}
/*--------------------------------------------------------------
| Großer Bildschirm														|
--------------------------------------------------------------- */
@media screen and (min-width:801px) {
	/**Header**/
	.head {
		max-width: 1024px;
		padding: 1em;
	}
	#pull{display: none;}
	/**Navigation**/
	 nav#header-nav ul {
		padding: 0px;
		padding-left: 2em;
		max-width: 1024px;
		margin: 0 auto;
	}
	

	 
	nav a#pull {
		display: none;
	}
	.sub-menu li {
		padding-right: 2em;
		padding-left: 0;
		text-align: left;
	}

	/**Hauptbereich**/
	.wrapper {
		margin-top: -2.2em;
		border-width: 1px;
	    	border-style: solid;
	    -webkit-border-image: 
	      -webkit-linear-gradient(bottom, #e2e2e2, rgba(0, 0, 0, 0)) 1 100%;
	    -webkit-border-image: 
	      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
	    -webkit-border-image: 
	      linear-gradient(to top, rgba(0, 0, 0, 0)) 1 100%;
	    -moz-border-image:
	      -moz-linear-gradient(bottom, #e2e2e2, rgba(0, 0, 0, 0)) 1 100%;  
	    -o-border-image:
	      -o-linear-gradient(bottom, #e2e2e2, rgba(0, 0, 0, 0)) 1 100%;
	    border-image:
	      linear-gradient(to top, #e2e2e2, rgba(0, 0, 0, 0)) 3 100%;
	}
	aside.col-md-3 {
		margin-top: 1em;
	}

	.search-form {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	.search-form input[type="text"]{
		width: 100%;
	}
	.alignright {
    float: right;
    margin-left: 1em;
}
.margin-left-0{
	margin-left:0;
}
.padding-left-0{
	padding-left: 0;
}

.visible{display: block!important; position: absolute;background:#fff; width: 300px; border:2px solid var(--main-color);left: 25%;top: 35%;z-index: 999;}
	/*--------Slider-----------*/
	.carousel-caption {
		background: rgba(255, 152, 0, 0.35);
		width: 100%;
		left: 0;
		right: 0;
		bottom: 5px;
		padding: 0;
	}
	.carousel-caption h1, .carousel-caption h2,.carousel-caption h3,.carousel-caption h4,.carousel-caption h5,.carousel-caption h6 {
		color: #fff;
	}
	.karte {
		margin-right: 5em;
	}

	
	.post small {
		font-weight: bold;
	}
	.image {
		padding: 0;
	}

	.margin-bottom-05 { margin-bottom: 0.5em; }
	.margin-bottom-10 { margin-bottom: 1.0em; }
	.margin-bottom-15 { margin-bottom: 1.5em; }
	.margin-bottom-20 { margin-bottom: 2.0em; }
	.margin-bottom-25 { margin-bottom: 2.5em; }
	.margin-bottom-30 { margin-bottom: 3.0em; }
	.auss-left {
		min-height: 100px;
	}
	/*Footer*/

}
.post-thumb {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.comment {
	position: relative;
	overflow: auto;
	padding: 1.2rem;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background: #FFFEFE;
	
	border: 1px solid var(--main-color);
	margin-bottom: 1em;
}

.placeholder {
	margin: 0 auto;
}

.menu-item a img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: all .5s ease; 
	-moz-transition: all .5s ease; 
	-o-transition: all .5s ease; 
	transition: all .5s ease; 
}
.menu-item a img:hover {
	-webkit-filter: grayscale(0%);
}

 /* 
    This controls the appearance of the days of the week header at the top of the calendar.
    It's recommended that you only add styles that effect the visual presentation of the 
    text here, (color, font-size, etc), rather than it's layout.
    */
    #day_runner{
    	font-weight: bold;
    }

  /*
  This controls the appearance of the month name at the top of the calendar
  */
  #month_name{
  	color: green;
  	font-size: 24px;
  	font-weight: bold;
  }
  
  /*
    This controls the appearance of the individual days of the month. Bear in mind
    that the width of these boxes can be programatically controlled when you first
    create the calendar, removing the need to figure out appropriate widths here.
    */
    .date_box{
    	height: 90px;
    	border: 1px solid black;
    }

  /*
    This controls the visual appearance of the date box that represents the current 
    date.  It's recommended that you only change basic visual styles for this class,
    (such as background color or text color, etc.)
    */
    .current_day{
    	background-color: #e8d2b0;
    }
    
  /*
    This controls the style of any boxes that are 'fill in', that is, not representing
    a date, but used to fill out the calendar square.
    */
    .empty_date{
    	background-color: gray;
    }
    #map-canvas{height: 400px; width:100%;}
    #map-canvas img {
    	max-width: inherit !important;
    }

    body::-webkit-scrollbar {
    	width: 1em;
    	scrollbar-arrow-color:#0000ff;
    	border-left: 1px solid #fefefe;
    }
    
    body::-webkit-scrollbar-track {
    	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    }
    
    body::-webkit-scrollbar-thumb {
    	background-color: var(--accent-color);
    	outline: 1px solid slategrey;
    	border-left: 1px solid #FF6A00;
    }
    .wpp-list li {
    	padding-top: .5em;
    	padding-bottom:.5em; 
    }
    textarea#comment {
    	width: 100%;
    }
    .details {
    	background: orange;
    	color: #fff;
    	border-radius: 0;
    }
    .details:hover{
    	color:#fff;
    }
    .objekt {
    	background-color: transparent;
    	padding: 1em;
    	border-bottom: 1px solid #cecece;
    }
    .objekt:hover {
    	background-color: #f2faff;
    }

    .flexslider{
    	background: transparent!important;
    	margin: 0 0 15px;
    	border: 0;
    }
    .flex-direction-nav a {
    	height: 45px;
    }

.pagination { text-align: center; }
.pagination ul {padding: 0; margin:30px auto; min-width: 25%;}
.pagination li a,
.pagination li a:hover,
.pagination li.active a,
.pagination li.disabled {
	color: #fff;
	text-decoration:none;
}

.pagination li {
	display: inline;
}

.pagination li a,
.pagination li a:hover,
.pagination li.active a,
.pagination li.disabled {
	background-color: var(--accent-color);
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.pagination li a:hover,
.pagination li.active a {
	background-color: var(--main-color);
}
#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}


.bodyads{width: 10%;position: fixed;right: 25px;top: 300px;}
.loading {background: green; min-height: 350px; background: url('images/ajax-loader.gif')no-repeat; background-position: center; }

/*Formular
----------------------------------------------------------*/
label {
	display: flex;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    cursor: pointer;
}
fieldset {
    border: 0;
    padding: 0;
}
.form-control {
        display: block;
}
.formcol{
float: left;
padding: 2px;
} 
.formcol label {
font-weight: bold;
display:block;} 
#searchplace .text-input,#filters .text-input{width: 100%;}
#filters .text-input:disabled{background: #f2faff;}
#filters{margin-top: 1em;}

#filters .form-group label {color:var(--main-color);}
.input-15 {width: 15%;}
.input-20 {width: 20%;}
.input-25{width: 25%;}
.input-75{width: calc(75% - 25px);}
.input-100{width: 100%;}
.text-input {
	box-sizing: border-box;
	background: #F7F9FC;
	outline: none;
	border: 1px solid #5BC0EB;
	font-weight: bold;
	color: #1C2541;
	transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
	border-bottom: 2px solid #5BC0EB;
	font-size: 15px;
	border-radius: 6px;
	padding: 10px;
	height: 44px; /* Einheitliche Höhe für alle Inputs */
	display: flex;
	align-items: center;
}

/* Für Fokus */
.text-input:focus {
	border-color: #F79256;
	box-shadow: 0 0 5px rgba(247, 146, 86, 0.5);
	background: white;
}

/* Select-Elemente ebenfalls gleich hoch machen */
.text-input.select {
	appearance: none; /* Standard-Styles des Browsers entfernen */
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 30px; /* Platz für Dropdown-Pfeil */
}
/* Anpassung für Textarea */
.text-input.textarea {
	height: auto; /* Automatische Höhe */
	min-height: 120px; /* Mindestens 120px Höhe */
	resize: vertical; /* Benutzer kann die Höhe anpassen */
	line-height: 1.5; /* Lesbarkeit verbessern */
}
/* Fix für Safari */
input.text-input, select.text-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Button in Formularen auf gleiche Höhe setzen */
button.text-input {
	height: 44px;
	padding: 10px 20px;
}

/* Falls Bootstrap oder andere Frameworks das Feld beeinflussen */
.input-group .text-input {
	height: 100%; /* Falls es von der Bootstrap .input-group überschrieben wird */
}
.select-input {
    box-sizing: border-box;
    background: #F7F9FC; /* Heller Hintergrund für modernes Design */
    outline: none;
    border: 1px solid #5BC0EB; /* Hellblauer Rand */
    font-weight: bold;
    color: #1C2541; /* Dunkelblau für bessere Lesbarkeit */
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    border-bottom: 2px solid #5BC0EB; /* Unterstrich als Akzent */
    line-height: 20px;
    font-size: 15px;
    border-radius: 6px; /* Dezente Abrundung */
    padding: 10px;
    width: 100%;
    appearance: none; /* Entfernt das Standard-Design des Browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10" fill="%231C2541"><polygon points="0,0 20,0 10,10"/></svg>'); 
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

/* Fokus-Stil */
.select-input:focus {
    border-color: #F79256; /* Orange als Highlight */
    box-shadow: 0 0 5px rgba(247, 146, 86, 0.5);
    background: white;
}

/* Fehler-Stil */
.select-input.error {
    border-color: #E74C3C; /* Roter Rand für Fehler */
    background: #FFECEC;
}

/* Erfolgs-Stil (z.B. für validierte Eingaben) */
.select-input.success {
    border-color: #28A745; /* Grün für Bestätigung */
    background: #E9F7EF;
}

.no-padding-right{padding-right: 0;}
.no-padding{padding:0!important}
.form-group label i {margin: 0 1em; font-size: 2rem;}
.more{display: none;}
.close-filters{text-align: right;margin-right: 0; color: var(--main-color); font-size: 1em; cursor: pointer;}
.filter-amm{margin-bottom: .2em}
#kontaktform .text-input{padding: 1em;}

.filter-amm input[type="checkbox"] {
	display: none;
}
 .label-text:before + input[type="checkbox"]  {
	content: "hallo"
}
textarea#nachricht {
    max-width: 100%;
}

.text-input::placeholder{color: var(--main-color);}
#kontaktform input,#kontaktform select ,#kontaktform textarea {
    width: 100%;
}
.input-centered{text-align: center;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--main-color);
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--main-color);
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--main-color);
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--main-color);
}
.input-container{
    border: 1px solid;
    font-family: 'lato',sans-serif;
    color: var(--main-color);
    transition: all .3s;
    border-color: var(--main-color);
    border-bottom: 2px solid;
    background: #fff;
    padding: .2em;
    cursor: pointer;
}



.btn:active,.btn:focus {
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    box-shadow:0px 1px 2px rgba(0,0,0,0.3);
    outline: 0;
}
.btn:disabled{cursor: not-allowed;}

.btn-blue{background:var(--main-color);color:#fff; }
.btn-blue:visited,.btn-blue:link {color:#fff;}
.btn-blue:hover{text-decoration: underline;}
.btn-login {border: 2px solid #01629c;font-weight: bold;box-sizing: border-box;margin: 1em 1em 0 0}
.btn-login:hover,.btn-register,.btn-register:hover{background: var(--accent-color); color: #fff}
.btn-register {border: 2px solid #01629c;font-weight: bold;margin: 1em 0 0 0}
.btn-search {background:var(--main-color);color: #fff; font-weight: 700; padding: 10px 15px; border-radius: 21px; }
.btn-details {background:var(--accent-color);color: #fff; font-weight: 700; padding: 10px 15px; border-radius: 21px; }
.btn-success{background: green;border-radius: 21px;}
.btn-full{width: 100%;}
#btn-prev,#btn-next{margin-right: .5em; font-size: 12px;}
.instagram-pics img { max-width:100%;}
.tagcloud a {
    background: #f2faff;
    padding: 5px 10px;
    display: inline-block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 4px;
    font-weight: 500;
    color:var(--main-color);
    }
 .startslide {}
.desc {
	background: var(--accent-color);
	height: 80px;
    border-bottom: 4px solid var(--main-color);
    text-align: center;
}
.desc h3 {margin:0;}
.desc p, .desc h3 {color:#fff;}

#aktWetter  {
    color: #fff;
}



.gallery-overlay{
	position: fixed;width: 100%;height: 100vh;background: rgba(0,119,191,.9);z-index: 9699;left: 0; top:0; padding-top: 2em;display: flex;flex-direction: column;flex-wrap: nowrap;
}
.gallery-overlay::-webkit-scrollbar { 
    display: none; 
}

.pop-navi{order: -1;}
.pop-ad{order: 2}

.text-right {
    text-align: right;
}
.custom-navigation i {
	font-size: 2em;
}
.hidden{display: none}

#akt-image img {margin: 0 auto; border:5px solid rgb(0,119,191);}
.gallery-overlay i {font-size: 3em;color: #fff;cursor: pointer;}
.gallery-overlay i:hover {color:var(--accent-color);}

.sl-img {cursor: pointer;}

#social a {font-size: 3rem;}
#social .fb{background: #4267b2}

 .start-picker .ui-datepicker-calendar .ui-state-default {color:var(--main-color);font-weight: bold;}

 .archive-header{height: 100px;margin-bottom: 1em;}
 .umh{background:url(images/umh.png)no-repeat;background-position: top right;background-size: contain;}
 .uoh{background:url(images/uoh.png)no-repeat;background-position: top right;background-size: contain;}

/*  .calcPrice span{font-size: 1.3em;color: green;} */

.wpp-list li a {font-size:smaller;color:var(--main-color);font-weight:bold;}

.card-img-top {
	width: 100%;
	height: 200px; /* Einheitliche Höhe */
	object-fit: cover; /* Bild wird zugeschnitten, um es gleichmäßig zu füllen */
}


/* 🔹 Topbar Styling */
.topbar {
	background-color: #F79256; /* Orange */
	color: white;
	font-size: 14px;
	padding: 5px 0;
}

/* 🔹 Trust-Elemente: Mehr Kontrast & Abstände */
.trust-elements {
	display: flex;
	align-items: center;
	gap: 12px; /* Mehr Abstand zwischen den Elementen */
}

/* 🔹 Icons größer & deutlicher */
.trust-elements span {
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* 🔹 Optional: Icons mit Hintergrund, falls Kontrast nicht reicht */
.trust-elements span i {
	background: white; /* Weißer Kreis für besseren Kontrast */
	color: #F79256; /* Orange für Icons */
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
/* 🔹 Logo + Schriftzug nebeneinander */
.site-logo {
    display: flex;
    align-items: center;
}

.site-logo img {
    max-width: 75px; /* Größer für bessere Sichtbarkeit */
    margin-right: 10px; /* Abstand zwischen Logo & Schrift */
	z-index: 2;
}

/* 🔹 Schriftzug neben dem Logo */
.site-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
	letter-spacing: -.2rem;
    font-weight: 700;
    color: #1C2541; /* Dunkelblau */
    text-transform: uppercase;
}
.subtitle-image img {
	max-width: 145px;
 }
@media screen and (min-width:801px) {
	.site-logo img {
		max-width: 150px; /* Größer für bessere Sichtbarkeit */
		margin-right: 10px; /* Abstand zwischen Logo & Schrift */
  }
  .site-title{font-size: 2.5rem;}
}

@media (min-width: 768px) { /* Ab md (Tablets und größer) */
	.hero-heading {
		 font-size: 3rem;
	}
}

@media (min-width: 1200px) { /* Ab xl (große Bildschirme) */
	.hero-heading {
		 font-size: 5rem;
	}
}

/* Standardmäßig ist der Datepicker Fullscreen */
.datepicker-dropdown {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: white;
	z-index: 9999;
	display: none; /* Standardmäßig versteckt */
	padding: 20px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	overflow-y: auto;
	transition: transform 0.3s ease-in-out;
	border-radius: 8px;
	border: 1px solid #ddd;
	transform: translateY(100%); /* Animiert von unten rein */
}

/* Wenn aktiv, wird er eingeblendet */
.datepicker-dropdown.active {
	display: block;
	transform: translateY(0);
}

/* Schließen-Button für mobiles Popup */
.datepicker-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 24px;
	color: black;
	cursor: pointer;
}

/* Flexibler Tab wird standardmäßig versteckt */
.tab-container button[data-target="flexible"] {
	display: none;
}

/* Anpassung für große Bildschirme */
@media (min-width: 769px) {
	.datepicker-dropdown {
		 position: absolute;
		 width: auto;
		 max-width: 600px;
		 height: auto;
		 transform: translateY(0);
		 top: auto;
		 left: auto;
	}

	.datepicker-close {
		 display: none; /* Kein Close-Button auf Desktop */
	}

	.tab-container button[data-target="flexible"] {
		 display: inline-block;
	}
}


/* Flexibles Layout für zwei Monatsansichten */
.datepicker-body {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 10px;
}

/* Jeder Monat bekommt eine eigene Box */
.month-container {
    flex: 1;
    min-width: 250px; /* Verhindert, dass sich die Monate überlappen */
}

/* Styling für die Monatsüberschrift */
.month-header {
    text-align: center;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

/* Die Tage in einem Grid anzeigen */
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    padding: 5px;
}

/* Styling für einzelne Tage */
.day {
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s;
    background: #fff;
    border: 1px solid transparent;
    width: 30px; /* Einheitliche Breite */
    height: 30px; /* Einheitliche Höhe */
    display: flex;
    align-items: center;
    justify-content: center;
}
.day.frei:not(.range,.hover-range) {
    background-color: rgba(46, 204, 113, 0.3); /* Sanftes Grün für verfügbare Tage */
    border: 1px solid rgba(46, 204, 113, 0.6); /* Etwas dunklerer Rand */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.day.frei:not(.range,.hover-range):hover {
    background-color: rgba(46, 204, 113, 0.6); /* Beim Hover kräftigeres Grün */
}

/* Falls ein freier Tag Teil der Range ist, dezenter hervorheben */
.day.frei.range {
    background-color:  var(--main-color);
    border-color: rgba(46, 204, 113, 0.4);
}

.hover-range,.range {
    background: var(--main-color);
}

/* Hover-Effekt */
.day:hover {
    background: var(--main-color);
    color: white;
}

/* Markierte Tage */
.day.selected {
    background: var(--accent-color)!important;
    color: white;
}


/* Deaktivierte Tage */
.day.disabled {
    background: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

/* Schnellauswahl Buttons */
.quick-selection {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.quick-selection button {
    flex-grow: 1;
    margin: 0 5px;
    white-space: nowrap;
}
/* Weekdays-Header (Mo, Di, Mi, ...) */
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

/* Einzelne Wochentage */
.weekday {
    padding: 5px;
    font-size: 14px;
    color: #333;
}
.booked {
	background:#f12b24!important;
	color:white;
     cursor: not-allowed;
	 text-decoration: line-through;
}
.calendar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.datepicker-body {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 10px;
}

.btn-nav {
    position: absolute;
    top: 10px;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 10px;
}

.btn-prev {
    left: 0;
}

.btn-next {
    right: 0;
}

.tab-container {
    display: flex;
    justify-content: space-around;
    background: #f8f9fa;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.tab-btn {
    border: none;
    background: transparent;
    font-size: 16px;
    padding: 5px 10px;
    cursor: pointer;
}

.tab-btn.active {
    font-weight: bold;
    border-bottom: 2px solid #007bff;
}

.tab-content {
    display: none;
    padding: 15px;
}

.tab-content.active {
    display: block;
}

.calendar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.datepicker-body {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 10px;
}
/* Container für das Skeleton Loading */
.skeleton-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Skeleton Card - simuliert das Layout einer echten Unterkunft */
.skeleton-card {
	width: calc(25% - 20px); /* 4 Spalten */
	min-width: 250px;
	height: 350px;
	background: #f2f2f2;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	animation: fadeIn 0.3s ease-in-out;
}

/* Animation für Lade-Effekt */
@keyframes loadingAnimation {
	0% { background-position: -200px 0; }
	100% { background-position: 200px 0; }
}

/* Skeleton Teile */
.skeleton-card .skeleton-img {
	height: 150px;
	width: 100%;
	background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: loadingAnimation 1.5s infinite linear;
}

.skeleton-card .skeleton-title {
	height: 20px;
	width: 70%;
	margin: 15px auto;
	background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: loadingAnimation 1.5s infinite linear;
}

.skeleton-card .skeleton-text {
	height: 15px;
	width: 90%;
	margin: 8px auto;
	background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: loadingAnimation 1.5s infinite linear;
}

.skeleton-card .skeleton-button {
	height: 40px;
	width: 80%;
	margin: 20px auto;
	border-radius: 5px;
	background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: loadingAnimation 1.5s infinite linear;
}
.min-rent-info {
    font-size: 0.9em;
    color: var(--accent-color);
    text-align: center;
    margin-top: 5px;
    padding: 4px;
    background: rgba(255, 165, 0, 0.1); /* Dezentes Orange */
    border-radius: 4px;
    display: none; /* Standardmäßig versteckt */
}

/* --- Hauptbild (50%) --- */
.prv-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	aspect-ratio: 16/9;
}

/* --- Thumbnails (maximal 4 Stück, 2x2 Grid) --- */
.prv-thumbnail-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
	aspect-ratio: 16/9;
}

/* --- Button Styling --- */
.prv-show-gallery {
    bottom: 15px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease-in-out;
}

.prv-show-gallery:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}

/* --- Fullscreen-Popup --- */
.prv-gallery-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(247, 249, 252, .9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999999;
    overflow-y: auto; /* Scrollbar für lange Listen */
}

/* Popup sichtbar machen */
.prv-gallery-popup.visible {
    opacity: 1;
    visibility: visible;
}

/* --- Masonry Grid für das Popup --- */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px; /* Automatische Reihenhöhe */
    gap: 10px;
    max-width: 90vw;
    padding: 20px;
}

.masonry-item {
    overflow: hidden;
    border-radius: 8px;
}

.prv-popup-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
@media (min-width: 992px) {
	.prv-popup-img{ height: 500px;}
}

/* --- Schließen-Button --- */
.prv-close-popup {
    font-size: 18px;
    border-radius: 5px;
    padding: 10px;
}

/* --- No Scroll auf Body, wenn Popup offen ist --- */
.no-scroll {
    overflow: hidden;
}