/*
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:#073B4C;
	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: #073B4C!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: #073B4C;
	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: #073B4C;
}
.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: #073B4C;
    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: #073B4C;
    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 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    list-style: none;
    padding: .5rem 0;
    margin: 0 0 1.25rem;
    font-size: .78rem;
    color: #7a9aa8;
}
.breadcrumbs span,
.breadcrumbs a {
    color: #7a9aa8;
    text-decoration: none;
    transition: color .2s ease;
}
.breadcrumbs a:hover {
    color: var(--main-color, #5BC0EB);
}
/* Trennzeichen zwischen Breadcrumb-Elementen */
.breadcrumbs span.breadcrumb_last {
    color: #073B4C;
    font-weight: 600;
}
/* Yoast gibt › als Trennzeichen aus – einheitlich stylen */
.breadcrumbs > span:not(:last-child)::after {
    content: '›';
    display: inline-block;
    margin-left: .35rem;
    color: #b0c8d2;
    font-weight: 400;
}
.hero-section {
	height: 620px;
	background:
		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 – Stile stehen weiter unten (single-unterkunft sticky nav) */


.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;
}

/* ── Sidebar Widget Cards ──────────────────────────────────── */
aside .widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(7, 59, 76, .07);
    border: 1px solid rgba(7, 59, 76, .07);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.widget-title {
    font-family: "Montserrat", sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #073B4C;
    margin: 0;
    padding: .9rem 1.1rem .75rem;
    border-bottom: 2px solid var(--main-color, #5BC0EB);
    background: transparent;
    text-align: left;
}

aside .widget .widget-container,
aside .widget > div:not(.widget-title),
aside .widget > ul,
aside .widget > form,
aside .widget > p,
aside .widget > table {
    padding: .9rem 1.1rem;
}

/* Listen in Widgets */
aside .widget-container ul li,
aside .widget ul li {
    padding: .45rem 0;
    border-bottom: 1px solid rgba(7, 59, 76, .06);
    font-size: .875rem;
    color: #4a6b78;
}
aside .widget-container ul li:last-child,
aside .widget ul li:last-child {
    border-bottom: none;
}

/* Links in Widgets – schlägt a:not(.btn) mit (0,2,1) */
aside .widget a {
    text-decoration: none;
    color: #073B4C;
    transition: color .2s ease;
}
aside .widget a:hover,
aside .widget a:focus {
    color: var(--main-color, #5BC0EB);
}
.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;
}
#price-under-calendar {
    margin-top: 1.5rem;
    width: 100%;
}

/* Preisübersicht unter dem Jahreskalender */
#calendar-booking-card {
    margin-top: 2rem;
    width: 100%;
    font-size: 1rem;
}

/* Breakdown-Zeilen (Sidebar + Kalender-Karte) */
.price-breakdown { width: 100%; }
.pb-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e8e8e8;
}
.pb-row:last-of-type { border-bottom: none; }
.pb-total {
    border-top: 2px solid #222;
    border-bottom: none !important;
    padding-top: 0.8rem;
    margin-top: 0.3rem;
    font-size: 1.05rem;
}
.pb-row small { color: #888; font-size: 0.8em; margin-left: 4px; }
 #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;
	color:white;
    border: 2px solid #fff;
     cursor: not-allowed;
}
.free{background: #66cc66;color:#fff;border: 2px solid #fff;cursor: pointer;}
.select{background: var(--main-color)!important;}
.anreise,.abreise,.edge{color: #fff;background: var(--accent-color);border:2px solid; cursor: not-allowed;}
/* ---- YearCalendar: Cap-Range-Style ---- */
.calendar-year td { position: relative; overflow: visible; }

/* Label immer sichtbar über den Caps */
.calendar-year td .dow {
  position: relative;
  z-index: 3;
}



:root { --prv-range: #3aa0e6; }

/* START (Anreise) – linke Hälfte */
.calendar-year td.range-start::before {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px;
  left: 4px; right: 0;
  background: var(--prv-range);
  border-radius: 999px 0 0 999px;
  z-index: 1;                /* unter dem Text */
  pointer-events: none;      /* Klicks nicht blockieren */
}

/* ENDE (Abreise) – rechte Hälfte */
.calendar-year td.range-end::after {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px;
  left: 0; right: 4px;
  background: var(--prv-range);
  border-radius: 0 999px 999px 0;
  z-index: 1;
  pointer-events: none;
}

/* Sonderfall: Start=Ende → voller Kreis */
.calendar-year td.range-start.range-end::before,
.calendar-year td.range-start.range-end::after {
  left: 4px; right: 4px;
  border-radius: 999px;
}

/* Layering für belegte/edge Zellen bleibt sauber */
.calendar-year td.belegt,
.calendar-year td.edge {
  position: relative;
  z-index: 0; /* Hintergrund-Layer */
}


.cal-navigation{display: table;width: 100%; table-layout: fixed;}
.cal-navigation a {font-size: 25px;}

.kal_standard_tag {background: #66cc66;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: #073B4C!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%);
	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;
    }
    #map-single {
        height: 420px;
        width: 100%;
        border-radius: .5rem;
        box-shadow: 0 2px 12px rgba(0,0,0,.12);
    }

    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 {
    display: flex;
    justify-content: center;
    margin: 2.5rem 0 1rem;
}
.pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination li {
    display: flex;
}
/* Zahlen & Ellipsis */
.pagination li a,
.pagination li.active a,
.pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .55rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
    border: 1.5px solid rgba(7, 59, 76, .15);
    color: #073B4C;
    background: #fff;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    cursor: pointer;
}
.pagination li a:hover {
    background: #f2faff;
    border-color: var(--main-color, #5BC0EB);
    color: var(--main-color, #5BC0EB);
}
/* Aktive Seite */
.pagination li.active a {
    background: var(--main-color, #5BC0EB);
    border-color: var(--main-color, #5BC0EB);
    color: #fff;
    cursor: default;
}
/* Ellipsis */
.pagination li span {
    border-color: transparent;
    background: transparent;
    color: #7a9aa8;
    cursor: default;
    min-width: auto;
}
/* Zurück / Weiter – Textlinks von WP */
.pagination li:first-child a,
.pagination li:last-child a {
    font-size: .8rem;
    padding: 0 .85rem;
    letter-spacing: .02em;
}
#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: #fff;
	outline: none;

	font-weight: bold;
	color: #073B4C;
	transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
	border-bottom: 2px solid var(--main-color);
	font-size: 15px;
	border-radius: .3rem;
	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;

    font-weight: bold;
    color: #073B4C; /* Dunkelblau für bessere Lesbarkeit */
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    border-bottom: 2px solid var(--main-color); /* 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: #073B4C;}
#kontaktform input,#kontaktform select ,#kontaktform textarea {
    width: 100%;
}
.input-centered{text-align: center;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #073B4C;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #073B4C;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #073B4C;
}
:-moz-placeholder { /* Firefox 18- */
  color: #073B4C;
}
.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-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);
    }
.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: 260px; /* 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: #073B4C; /* 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;
	}
}

/* ===== DATEPICKER ===== */

/* Mobile: Fullscreen, slide-up Animation */
.datepicker-dropdown {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	background: #fff;
	z-index: 9999;
	padding: 16px;
	overflow-y: auto;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	/* visibility/opacity statt display:none – sonst greift die CSS-Transition nicht */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(100%);
	transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.datepicker-dropdown.active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.3s ease, visibility 0s 0s;
}

/* Desktop: feste Breite 660px – JS setzt position:fixed + Viewport-Koordinaten */
@media (min-width: 769px) {
	.datepicker-dropdown {
		width: 660px;
		height: auto; max-height: 90vh;
		border-radius: 10px;
		border: 1px solid #ddd;
		transform: none;
		padding: 16px;
	}
	.datepicker-dropdown.active {
		transform: none;
	}
	.datepicker-close { display: none; }
	.tab-container button[data-target="flexible"] { display: inline-block; }
}

/* Schließen-Button: 44×44px Touch-Target */
.datepicker-close {
	position: absolute;
	top: 10px; right: 10px;
	background: none; border: none; cursor: pointer;
	font-size: 26px; color: #333;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.datepicker-close:hover { background: #f0f0f0; }

/* Flexibler Tab auf Mobile versteckt */
.tab-container button[data-target="flexible"] { display: none; }

/* Tabs */
.tab-container {
	display: flex;
	gap: 8px;
	background: #f8f9fa;
	padding: 8px 12px;
	border-bottom: 1px solid #ddd;
}
.tab-btn {
	border: none; background: transparent;
	font-size: 15px; padding: 6px 14px;
	cursor: pointer; color: #555;
	border-radius: 6px;
	transition: color 0.15s;
}
.tab-btn.active {
	font-weight: 600;
	color: var(--main-color);
	border-bottom: 2px solid var(--main-color);
}
.tab-content { display: none; padding: 10px 0; }
.tab-content.active { display: block; }

/* Kalender-Wrapper: Nav-Buttons als flex-items (kein absolute) */
.calendar-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

/* Monatsansichten nebeneinander */
.datepicker-body {
	flex: 1;
	display: flex;
	gap: 12px;
}

/* Einzelner Monat */
.month-container { flex: 1; min-width: 0; }

/* Monatsüberschrift */
.month-header {
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 0 8px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 4px;
}

/* Wochentage-Header */
.weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	padding: 4px 0;
	border-bottom: 1px solid #eee;
}
.weekday {
	font-size: 11px;
	font-weight: 600;
	color: #aaa;
	padding: 3px 0;
	text-transform: uppercase;
}

/* Tage-Grid */
.days-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	padding: 4px 0;
}

/* Tag-Button: füllt Grid-Zelle, bleibt quadratisch */
.days-grid .day {
	width: 100%;
	aspect-ratio: 1;
	padding: 0; margin: 0;
	border: none;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.12s, color 0.12s;
	box-sizing: border-box;
}

/* Freie Tage: Standard (Archiv etc.) */
.days-grid .day.frei { background: #fff; color: inherit; }

/* Freie/belegte Tage nur auf der Singleseite farbig */
.single-unterkunft .days-grid .day.frei { background: #66cc66; color: #fff; }

/* Hover */
.days-grid .day:not(.disabled):hover {
	background: var(--main-color);
	color: #fff;
}

/* Range-Bereich zwischen Start und End */
.days-grid .day.range,
.days-grid .day.hover-range {
	background: #c8e8f7; /* Fallback: helles Blau passend zur Default-Hauptfarbe */
	background: color-mix(in srgb, var(--main-color) 35%, white);
	color: #333;
	border-radius: 0;
}

/* Range-Start */
.days-grid .day.range-start,
.days-grid .day.selected.range-start {
	background: var(--main-color) !important;
	color: #fff !important;
	border-radius: 4px 0 0 4px;
}

/* Range-End */
.days-grid .day.range-end,
.days-grid .day.selected.range-end {
	background: var(--main-color) !important;
	color: #fff !important;
	border-radius: 0 4px 4px 0;
}

/* Einzelauswahl */
.days-grid .day.range-start.range-end { border-radius: 4px; }

/* Ausgewählt (Fallback) */
.days-grid .day.selected {
	background: var(--main-color) !important;
	color: #fff !important;
}

/* Heute */
.days-grid .day.today:not(.range-start):not(.range-end):not(.selected) {
	outline: 2px solid var(--main-color);
	outline-offset: -2px;
	font-weight: 700;
}

/* Vergangene Tage */
.days-grid .day.disabled {
	color: #ccc;
	cursor: default;
	background: none !important;
}

/* Gebuchte Tage im Picker: Standard (Archiv etc.) */
.days-grid .day.booked {
	background: #eee !important;
	color: #999 !important;
	cursor: not-allowed;
}

/* Gebuchte Tage nur auf der Singleseite rot */
.single-unterkunft .days-grid .day.booked {
	background: #f12b24 !important;
	color: #fff !important;
	cursor: not-allowed;
}

/* Globales .booked für den Belegungsplan (calendar-year) */
.booked {
	background: #f12b24 !important;
	color: white !important;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Nav-Buttons als flex-items */
.btn-nav {
	flex-shrink: 0;
	width: 32px; height: 32px;
	margin-top: 6px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: none; cursor: pointer;
	font-size: 16px;
	transition: background 0.12s;
	position: static;
}
.btn-nav:hover { background: #f0f0f0; }
.btn-prev { left: auto; }
.btn-next { right: auto; }

/* Schnellauswahl */
.quick-selection { display: flex; justify-content: space-between; padding: 8px 0; }
.quick-selection button { flex-grow: 1; margin: 0 4px; white-space: nowrap; }

/* Mobile: einspaltiger Stack */
@media (max-width: 576px) {
	.datepicker-body { flex-direction: column; gap: 0; }
}
/* 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: 768px) {
	.prv-popup-img{ height: auto;}
}
@media (min-width: 1200px) {
	.prv-popup-img{ height: 650px; object-fit: contain;}
}

/* --- 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;
}
.unterkunft-slider .slider-track {
  display: flex;

  scroll-behavior: smooth;
  transition: transform 0.3s ease-in-out;
}
.slider-wrapper {
  overflow-x: hidden;
  padding-bottom: 1.5rem; /* oder mehr, je nach Shadow */
}


.phlr-slider-btn {
    background: rgba(255, 255, 255, 0.85); /* fast weiß mit leichter Transparenz */
    border: 1px solid rgba(0, 0, 0, 0.05);  /* ganz dezenter Rand */
    color: var(--main-color, #5BC0EB);
    font-size: 1.8rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem; /* leicht abgerundet (6px) */
    z-index: 5;
}

.phlr-slider-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: var(--accent-color, #F79256);
}


.phlr-slider-nav {
    width: 100%;
    top: 40%;
    left: 0;
    padding: 0 1rem;
    pointer-events: none; /* erlaubt, dass nur die Buttons klickbar sind */
}

.phlr-slider-btn {
    pointer-events: all; /* Buttons wieder aktiv */
}


/* Produktbadges */
.product-badges { display: flex; gap: 5px;position: absolute; z-index: 2; bottom:.25rem; left:.25rem }
.product-badges span {
    display: inline-flex;
    align-items: center;
    padding: .3rem;
    font-size:0.68rem;
	text-transform: uppercase;
    
}
.product-badges svg { width: 16px; height: 16px; }

.badge-bestseller { background-color: #ffcc00; color:#000}
.badge-new { background-color:  #4caf50; color: #ffffff; } /* Grün */
.badge-sale { background-color: #c00000; color: #ffffff; } /* Dunkelrot */

.badge-limited-edition { background-color: #8e44ad; color: #ffffff; } /* Gold */
.badge-featured-accomodation{ background-color: #C05BE3; color: #ffffff; } /* Blau */
.badge-outofstock { background-color: #444; color: #ffffff; } /* Grau */
.badge-frequently-sold { background-color: #ff5722; color: #ffffff; } /* Hellrot */
.badge-almost-sold-out { background-color: #e74c3c; color: #ffffff; } /* Rot */
.badge-exclusive { background-color: #8e44ad; color: #ffffff; } /* Violett */
.badge-vegan { background-color: #3e721d; color: #ffffff; } /* Dunkelgrün */
.badge-vegan svg {stroke:#fff;fill:#fff}
.badge-low-stock{background-color: var(--complementary-color); color: #fff;}
.badge-best-rating{background-color: #E3C4A8;}
.phlr-tooltip {
    position: absolute;
    background: var(--accent-color);;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
}

/* ── Section Nav (single-unterkunft) ───────────────────────── */
#section-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                opacity   .3s ease;
}

#section-nav.visibleBar {
    transform: translateY(0);
    opacity: 1;
}

#section-nav .nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: #4b5563;
    padding: .4rem .85rem;
    border-radius: 2rem;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

#section-nav .nav-link:hover {
    background: #f3f4f6;
    color: #111;
}

#section-nav .nav-link.active {
    background: var(--main-color, #5BC0EB);
    color: #fff !important;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    #section-nav { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Room-Popup  (#room-popup)  – alle Regeln streng auf ID gescoped
   ═══════════════════════════════════════════════════════════ */
#room-popup.prv-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slide-in animation */
#room-popup:not(.d-none) .prv-popup-content {
    animation: popupSlideIn .28s cubic-bezier(.22,.68,0,1.15);
}
@keyframes popupSlideIn {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);  }
}

/* ── Panel ──────────────────────────────────────────────── */
#room-popup .prv-popup-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 740px;
    max-height: 88vh;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* ── Header ─────────────────────────────────────────────── */
.prv-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    flex-shrink: 0;
}
.prv-popup-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: #111;
    letter-spacing: -.01em;
}
.prv-popup-close-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}
.prv-popup-close-btn:hover { background: #e5e7eb; color: #111; }

/* ── Scrollable body ─────────────────────────────────────── */
.prv-popup-body-scroll {
    overflow-y: auto;
    padding: 1.5rem 1.4rem;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #fafafa;
}
.prv-popup-body-scroll::-webkit-scrollbar { width: 6px; }
.prv-popup-body-scroll::-webkit-scrollbar-track { background: #fafafa; }
.prv-popup-body-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Kategorie-Sections ──────────────────────────────────── */
#room-popup section {
    margin-bottom: 2rem !important;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}
#room-popup section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
    border-bottom: none;
}
#room-popup section > h2 {
    font-size: .8rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--main-color, #5BC0EB);
    border-left: 3px solid var(--main-color, #5BC0EB);
    padding-left: .6rem;
    margin-bottom: 1rem !important;
}

/* ── Raum-Typ Sub-Heading ────────────────────────────────── */
#room-popup h3 {
    font-size: .8rem !important;
    font-weight: 600 !important;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .6rem !important;
}

/* ── Feature-Pills ───────────────────────────────────────── */
#room-popup .d-flex.align-items-start {
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: .5rem;
    padding: .3rem .6rem;
    font-size: .82rem;
    color: #334155;
    align-items: center !important;
    gap: .35rem;
    transition: background .12s;
}
#room-popup .d-flex.align-items-start:hover { background: #eef4ff; }
#room-popup .d-flex.align-items-start .text-success {
    color: var(--main-color, #5BC0EB) !important;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
#room-popup .d-flex.align-items-start .me-2 { margin-right: 0 !important; }

/* ── Columns in Feature-Grid ─────────────────────────────── */
#room-popup .row.row-cols-lg-4 { --bs-gutter-x: .5rem; --bs-gutter-y: .4rem; }

/* ── Mobile: Sheet von unten ─────────────────────────────── */
@media (max-width: 575.98px) {
    #room-popup.prv-popup-overlay { align-items: flex-end; }
    #room-popup .prv-popup-content {
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: 1.25rem 1.25rem 0 0;
    }
}

body.popup-open { overflow: hidden; }

/* Auswahl im Main-Kalender */
.prv-sel-start,
.prv-sel-end {
  outline: 2px solid var(--accent-color, #F79256);
  position: relative;
}

.prv-sel-range {
  background: var(--main-color);
}

/* Vergangene Tage neutralisieren */
.prv-disabled,
td.prv-disabled {
  pointer-events: none;
  opacity: .45;
}
.range      { background: var(--main-color); }

/* in der Vergangenheit / gesperrt */
.prv-disabled { pointer-events: none; opacity: .45; }

/* Einheitlicher 4:3 Frame */
.prv-blurframe {
  position: relative;
  aspect-ratio: 4 / 3;   /* Standard-Ratio */
  overflow: hidden;
  border-radius: 0.5rem;
  background: #f7f7f7;
}

/* Nur Portraits bekommen einen geblurrten Background */
.prv-blurframe.is-portrait::before {
  content: "";
  position: absolute;
  inset: -8%;                       /* leicht größer, damit keine Blur-Ränder durchscheinen */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(24px) saturate(1.05) brightness(0.98);
  transform: scale(1.08);
  will-change: filter, transform;
  z-index: 0;
}

/* Das sichtbare Bild sitzt vorn */
.prv-blurframe__img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
}

/* Portrait: Bild füllt die Höhe (keine Beschnitte) */
.prv-blurframe.is-portrait .prv-blurframe__img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Landscape: Bild füllt die Breite (keine Beschnitte) */
.prv-blurframe.is-landscape .prv-blurframe__img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Optional: auf schmalen Screens 16:9 statt 4:3 */
@media (max-width: 576px) {
  .prv-blurframe { aspect-ratio: 16 / 9; }
}


/* ============================================================
   PRV UNTERKUNFT ARCHIVE – MODERN REDESIGN
   ============================================================ */

/* ── Unterkunft-Cards ─────────────────────────────────────── */
.prv-unterkunft-card {
    border: none;
    border-radius: 12px;
    transition: transform .22s ease, box-shadow .22s ease;
}
.prv-unterkunft-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0,0,0,.14) !important;
}
.prv-unterkunft-card.prv-card--highlighted {
    outline: 3px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

/* Bild-Wrapper: 16:9 */
.prv-card-img-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ddd;
    border-radius: 12px 12px 0 0;
}
.prv-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .38s ease;
}
.prv-unterkunft-card:hover .prv-card-img {
    transform: scale(1.06);
}

/* Gradient unten */
.prv-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 35% 0 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.5));
    pointer-events: none;
    z-index: 1;
}

/* Objekttyp-Badge oben links */
.prv-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Preis-Pill unten rechts auf dem Bild */
.prv-card-price-pill {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    line-height: 1.3;
}
.prv-card-price-pill .price-box { margin: 0; }
.prv-card-price-pill .fw-bold { font-size: .82rem !important; font-weight: 700 !important; color: #fff !important; }
.prv-card-price-pill .text-muted { font-size: .72rem !important; color: rgba(255,255,255,.8) !important; }

/* "Auf Karte"-Button oben rechts */
.prv-card-map-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
    padding: 0;
}
.prv-card-map-btn:hover {
    background: #fff;
    transform: scale(1.12);
}

/* Card-Body kompakt */
.prv-unterkunft-card .card-body {
    padding: 12px 14px 14px;
}
.prv-unterkunft-card .card-title {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 4px;
}

/* Ausstattungs-Kennzahlen */
.prv-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.prv-card-fact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: #666;
    white-space: nowrap;
}
.prv-card-fact svg { flex-shrink: 0; }

/* Preis im Body */
.prv-card-preis .price-box { margin: 0; }
.prv-card-preis .fw-bold { font-size: .95rem !important; color: var(--bs-primary, #0d6efd); }
.prv-card-preis .text-muted { font-size: .75rem; }

/* Card-Enter-Animation */
.prv-card-col { animation: prvFadeUp .35s ease both; }
@keyframes prvFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ── Filter-Chips ────────────────────────────────────────── */
.prv-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.prv-filter-chip {
    background: #eef2ff;
    color: var(--bs-primary, #0d6efd);
    border: 1px solid #c7d4fc;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: .8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s;
}
.prv-filter-chip:hover { background: #dce5ff; }

/* ── Custom Leaflet Marker ────────────────────────────────── */
.prv-map-marker { background: none !important; border: none !important; }
.prv-marker-inner {
    width: 34px;
    height: 34px;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    transition: background .2s;
}
.prv-marker-inner svg { transform: rotate(45deg); flex-shrink: 0; }
.prv-map-marker--active .prv-marker-inner {
    background: #c0392b;
    transform: rotate(-45deg) scale(1.2);
}
.prv-map-marker--single .prv-marker-inner {
    width: 42px;
    height: 42px;
    background: var(--accent-color, #F79256);
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.prv-map-marker--single .prv-marker-inner svg { transform: rotate(45deg); }

/* ── Leaflet Popup ────────────────────────────────────────── */
.prv-map-popup { font-size: .85rem; min-width: 200px; overflow: hidden; border-radius: 8px; }
.prv-map-popup img { width: 100%; height: 110px; object-fit: cover; display: block; }
.prv-popup-body { padding: 8px 10px 6px; }
.prv-popup-title { color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; display: block; margin-bottom: 3px; }
.prv-popup-title:hover { text-decoration: underline; }
.prv-popup-city { font-size: .78rem; color: #666; margin-bottom: 4px; }
.prv-popup-icons { display: flex; gap: 10px; font-size: .8rem; color: #555; margin-bottom: 4px; }
.prv-popup-price { font-weight: 700; color: var(--bs-primary, #0d6efd); font-size: .88rem; margin-bottom: 6px; }
.prv-popup-btn { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--bs-primary, #0d6efd); text-decoration: none; }
.prv-popup-btn:hover { text-decoration: underline; }
.leaflet-popup-content { margin: 0 !important; padding: 0 !important; }
.leaflet-popup-content-wrapper { padding: 0 !important; overflow: hidden; border-radius: 10px !important; }

/* ── Mobile FAB ───────────────────────────────────────────── */
.prv-map-fab {
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 200;
    border-radius: 50px;
    padding: 12px 20px;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    border: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
    font-weight: 600;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* ── Mobile Map Overlay ───────────────────────────────────── */
.prv-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.prv-map-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

/* ── Mobile: Bild 4:3 ────────────────────────────────────── */
@media (max-width: 575px) {
    .prv-card-img-wrap { aspect-ratio: 4 / 3; }
}

/* ── Filter-Bar (volle Breite) ────────────────────────────── */
#prv-filter-bar {
    background: #fff;
    padding: 2.3em 20px 16px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
}
.prv-filter-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #999;
    margin-bottom: 5px;
}
.prv-filter-field {
    flex: 0 0 auto;
    min-width: 140px;
}

/* Einheitliches Input-Styling für alle Filter-Elemente */
.prv-filter-input {
    height: 40px !important;
    border-radius: 8px !important;
    border: 1.5px solid #d0d5dd !important;
    font-size: .9rem !important;
    background: #fff !important;
    color: #212529 !important;
    padding: 6px 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    transition: border-color .15s, box-shadow .15s !important;
    width: 100%;
}
.prv-filter-input:focus {
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: 0 0 0 3px rgba(13,110,253,.12) !important;
    outline: none !important;
}
/* form-select braucht etwas mehr Platz rechts für den Pfeil */
select.prv-filter-input { padding-right: 2rem !important; }

/* Personen-Widget: Container überschreibt .text-input (border-bottom, altes Theme-Styling) */
#prv-filter-bar #personen-filter-container {
    display: block;
    height: 40px !important;
    border-radius: 8px !important;
    border: 1.5px solid #d0d5dd !important;
    border-bottom: 1.5px solid #d0d5dd !important; /* .text-input setzt border-bottom override */
    background: #fff !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    font-weight: 400 !important;
    overflow: visible !important; /* Dropdown darf über den Container hinausragen */
}
#prv-filter-bar #personen-filter-container:focus-within {
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: 0 0 0 3px rgba(13,110,253,.12) !important;
}
/* Button darin: transparent, kein eigener Rand */
#prv-filter-bar #personen-filter-container .personen-toggle {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 12px !important;
    font-size: .9rem !important;
    font-weight: 400 !important;
    color: #212529 !important;
    border-radius: 8px !important;
    text-align: left !important;
}

/* Suchen-Button */
.prv-suchen-btn {
    height: 40px;
    border-radius: 8px;
    padding: 0 22px;
    font-weight: 600;
    white-space: nowrap;
    font-size: .9rem;
}

/* Mehr-Filter-Button: deutlich sichtbar */
.prv-mehr-btn {
    height: 40px;
    border-radius: 8px;
    font-size: .875rem;
    white-space: nowrap;
    font-weight: 600;
    padding: 0 16px;
}
.prv-mehr-arrow {
    display: inline-block;
    transition: transform .25s ease;
    margin-left: 4px;
    font-size: .75rem;
}
.prv-mehr-filter-panel { padding-top: 0; }

/* ── Karte sticky ─────────────────────────────────────────── */
.prv-map-sticky {
    top: var(--prv-filter-bar-height, 90px);
    border-radius: 0;
    overflow: hidden;
}

/* ── Responsive Filter-Bar ────────────────────────────────── */
@media (max-width: 991px) {
    .prv-filter-main { flex-direction: column; align-items: stretch; }
    .prv-filter-main .ms-auto { margin-left: 0 !important; }
    .prv-filter-field { min-width: 0; width: 100%; }
    .prv-suchen-btn, .prv-mehr-btn { width: 100%; }
}


/* ============================================================
   POST CARDS – index.php Beitragsübersicht
   ============================================================ */

/* ── Kategorien-Navigation ─────────────────────────────────── */
.post-cat-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 1.75rem;
}
.post-cat-nav::-webkit-scrollbar { display: none; }

/* (0,2,1) schlägt globales a:not(.btn) (0,1,1) */
.post-cat-nav a.post-cat-nav__pill,
.post-cat-nav a.post-cat-nav__pill:visited {
    display: inline-block;
    white-space: nowrap;
    padding: .4rem 1rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    border: 1.5px solid var(--main-color, #5BC0EB);
    color: var(--main-color, #5BC0EB);
    background: transparent;
    transition: background .2s ease, color .2s ease;
    flex-shrink: 0;
}
.post-cat-nav a.post-cat-nav__pill:hover,
.post-cat-nav a.post-cat-nav__pill:focus {
    background: var(--main-color, #5BC0EB);
    color: #fff;
}
.post-cat-nav a.post-cat-nav__pill--active,
.post-cat-nav a.post-cat-nav__pill--active:visited {
    background: var(--main-color, #5BC0EB);
    color: #fff;
}

/* ── Kategorie-Beschreibung ────────────────────────────────── */
.cat-description {
    background: #f2faff;
    border-left: 3px solid var(--main-color, #5BC0EB);
    border-radius: 0 8px 8px 0;
    padding: .85rem 1.1rem;
    margin-bottom: 1.75rem;
    font-size: .9rem;
    color: #4a6b78;
    line-height: 1.6;
}
.cat-description p:last-child { margin-bottom: 0; }

/* ── Card-Grid ─────────────────────────────────────────────── */
.post-card-grid {
    margin-bottom: 1.5rem;
}
.post-card-col {
    display: flex;
}

/* ── Post Card ─────────────────────────────────────────────── */
.post-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(7, 59, 76, .08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid rgba(7, 59, 76, .07);
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(7, 59, 76, .14);
}

/* Featured / Sticky */
.post-card--featured {
    border-color: var(--accent-color, #F79256);
    box-shadow: 0 2px 12px rgba(247, 146, 86, .2);
}
.post-card--featured:hover {
    box-shadow: 0 10px 32px rgba(247, 146, 86, .28);
}
.post-card__featured-ribbon {
    position: absolute;
    top: 12px;
    right: -30px;
    background: var(--accent-color, #F79256);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem 2.5rem;
    transform: rotate(45deg);
    z-index: 4;
    pointer-events: none;
}

/* ── Bild-Bereich ──────────────────────────────────────────── */
.post-card__img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #e8f4fb;
}
.post-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.post-card:hover .post-card__img {
    transform: scale(1.04);
}
.post-card__img--placeholder {
    background: linear-gradient(135deg, #e8f4fb 0%, #d0eaf6 100%);
}
/* Gradient am unteren Bildrand */
.post-card__img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(7,59,76,.35) 0%, transparent 100%);
    pointer-events: none;
}

/* Kategorie-Badge (oben links) –
   Höhere Spezifität (0,2,1) schlägt globales a:not(.btn) (0,1,1) */
.post-card__img-wrap a.post-card__badge,
.post-card__img-wrap a.post-card__badge:visited {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: var(--main-color, #5BC0EB);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 20px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.post-card__img-wrap a.post-card__badge:hover,
.post-card__img-wrap a.post-card__badge:focus {
    background: #3da8d6;
    color: #fff;
}

/* Lesedauer-Chip (oben rechts) */
.post-card__reading-time {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(7, 59, 76, .65);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: .3rem;
    backdrop-filter: blur(4px);
}

/* ── Card Body ─────────────────────────────────────────────── */
.post-card__body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.post-card__title {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 .5rem;
    color: #073B4C;
}
.post-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
.post-card__title a:hover {
    color: var(--main-color, #5BC0EB);
}

/* Datum */
.post-card__meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: #7a9aa8;
    margin-bottom: .6rem;
}
.post-card__meta time {
    color: inherit;
}

/* Excerpt */
.post-card__excerpt {
    font-size: .875rem;
    color: #4a6b78;
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA-Link */
.post-card__cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--main-color, #5BC0EB);
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
    margin-top: auto;
}
.post-card__cta:hover {
    color: #3da8d6;
    gap: .55rem;
}

/* ── Werbung-Trenner ───────────────────────────────────────── */
.post-card-ad {
    margin: 1.5rem 0;
    text-align: center;
}

/* ── Leer-Zustand ──────────────────────────────────────────── */
.post-card-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #7a9aa8;
}
.post-card-empty svg {
    display: block;
    margin: 0 auto 1rem;
    opacity: .4;
}
.post-card-empty p {
    font-size: 1.05rem;
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 575px) {
    .post-card__title { font-size: .95rem; }
    .archive-header { padding: 1.4rem 1.2rem 1.1rem; }
}

/* ============================================================
   SINGLE ARTICLE – single.php Einzelbeitrag
   ============================================================ */

.single-article {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(7, 59, 76, .08);
    border: 1px solid rgba(7, 59, 76, .07);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* ── Hero-Bild ─────────────────────────────────────────────── */
.single-article__hero {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: #e8f4fb;
}

.single-article__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient-Overlay am unteren Bildrand */
.single-article__hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(7, 59, 76, .4) 0%, transparent 100%);
    pointer-events: none;
}

/* Kategorie-Badge (oben links) */
.single-article__badge,
.single-article__badge:visited {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: var(--main-color, #5BC0EB);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .35rem .8rem;
    border-radius: 20px;
    text-decoration: none;
    transition: background .2s ease;
}
.single-article__badge:hover,
.single-article__badge:focus {
    background: #3da8d6;
    color: #fff;
}

/* Lesedauer-Chip (oben rechts) */
.single-article__reading-time {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    background: rgba(7, 59, 76, .65);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem .7rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    backdrop-filter: blur(4px);
}

/* Bildunterschrift */
.single-article__img-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    color: rgba(255, 255, 255, .85);
    font-size: .75rem;
    padding: .5rem 1rem;
    margin: 0;
    text-align: right;
    pointer-events: none;
}

/* ── Artikel-Header ────────────────────────────────────────── */
.single-article__header {
    padding: 1.5rem 1.75rem 0;
}

.single-article__title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.3;
    color: #073B4C;
    margin: 0 0 .85rem;
}

.single-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    font-size: .82rem;
    color: #7a9aa8;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(7, 59, 76, .08);
}

.single-article__meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.single-article__meta-item--updated {
    color: #a0b8c2;
    font-style: italic;
}

.single-article__social {
    margin-bottom: 1rem;
}

/* ── Artikel-Inhalt ────────────────────────────────────────── */
.single-article__content {
    padding: 1.25rem 1.75rem 1.75rem;
    font-size: .975rem;
    line-height: 1.75;
    color: #2c4a56;
}

.single-article__content h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #073B4C;
    margin: 1.75rem 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--main-color, #5BC0EB);
    display: inline-block;
}

.single-article__content h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #073B4C;
    margin: 1.5rem 0 .6rem;
}

.single-article__content p {
    margin-bottom: 1.1rem;
}

.single-article__content a {
    color: var(--main-color, #5BC0EB);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.single-article__content a:hover {
    color: #3da8d6;
}

.single-article__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: .5rem 0 1rem;
}

.single-article__content blockquote {
    background: #f2faff;
    border-left: 3px solid var(--main-color, #5BC0EB);
    border-radius: 0 8px 8px 0;
    padding: .85rem 1.1rem;
    margin: 1.25rem 0;
    color: #4a6b78;
    font-style: italic;
}

.single-article__content blockquote p:last-child { margin-bottom: 0; }

.single-article__page-links {
    margin-top: 1.5rem;
    font-size: .875rem;
}

.single-article__edit-link {
    margin-top: .75rem;
    font-size: .8rem;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .single-article__hero {
        aspect-ratio: 16 / 9;
    }
    .single-article__title {
        font-size: 1.3rem;
    }
    .single-article__header,
    .single-article__content {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

@media (max-width: 575px) {
    .single-article__title {
        font-size: 1.15rem;
    }
    .single-article__meta {
        gap: .5rem .9rem;
    }
}
.bis-weather-widget {
    background: linear-gradient(135deg, #0077bf, #00a8e8);
    color: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    font-family: inherit;
}

.bis-weather-header {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bis-weather-current {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bis-weather-temp {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.bis-weather-desc {
    font-size: 0.95rem;
    opacity: 0.9;
    flex-basis: 100%;
    margin-top: -4px;
}

.bis-weather-details {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 12px;
    flex-wrap: wrap;
}

.bis-weather-forecast {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.25);
}

.bis-weather-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.bis-day-name {
    font-size: 0.8rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.bis-day-temps {
    display: flex;
    gap: 4px;
    font-size: 0.9rem;
}

.bis-day-max { font-weight: 600; }
.bis-day-min { opacity: 0.65; }

.bis-popular-posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.bis-popular-card {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.bis-popular-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    color: inherit;
}

.bis-popular-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.bis-popular-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bis-popular-info {
    padding: 8px 10px 8px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bis-popular-category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0077bf;
    font-weight: 600;
}

.bis-popular-info a {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bis-popular-views {
    font-size: 0.75rem;
    color: #999;
}

.bis-widget-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0077bf;
}

/* Tag Cloud Container */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    line-height: 1;
}

/* Alle Tags als Basis */
.tagcloud a {
    display: inline-block;
    padding: 0.3em 0.7em;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    background: transparent;
    border: 2px solid currentColor;
    color: #073B4C;
    line-height: 1.2;
}

/* Gewichtung über font-size – WP setzt 8pt bis 22pt */
.tagcloud a[style*="font-size: 8pt"],
.tagcloud a[style*="font-size: 9pt"],
.tagcloud a[style*="font-size: 10pt"] {
    color: #073B4C;
    opacity: 0.55;
    border-width: 1px;
}

.tagcloud a[style*="font-size: 11pt"],
.tagcloud a[style*="font-size: 12pt"],
.tagcloud a[style*="font-size: 13pt"],
.tagcloud a[style*="font-size: 14pt"] {
    color: #073B4C;
    opacity: 0.8;
    border-width: 1px;
}

.tagcloud a[style*="font-size: 15pt"],
.tagcloud a[style*="font-size: 16pt"],
.tagcloud a[style*="font-size: 17pt"],
.tagcloud a[style*="font-size: 18pt"] {
    color: #5BC0EB;
    border-color: #5BC0EB;
    border-width: 2px;
}

.tagcloud a[style*="font-size: 19pt"],
.tagcloud a[style*="font-size: 20pt"],
.tagcloud a[style*="font-size: 21pt"],
.tagcloud a[style*="font-size: 22pt"] {
    color: #fff;
    background: #5BC0EB;
    border-color: #5BC0EB;
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(91,192,235,0.35);
}

/* Hover – alle */
.tagcloud a:hover {
    color: #fff !important;
    background: #F79256 !important;
    border-color: #F79256 !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(247,146,86,0.35);
    transform: translateY(-1px);
}

/* ===================== startnews Section (Startseite) ===================== */
.startnews-section {
    background: linear-gradient(135deg, #f2faff 0%, #fff9f5 100%);
    padding: 3rem 2rem 3.5rem;
    margin-top: 2.5rem;
    border-top: 4px solid var(--main-color);
    border-radius: 12px;
}

.startnews-label {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .28rem .9rem;
    border-radius: 999px;
}

.startnews-header h2 {
    color: #073B4C;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.startnews-divider {
    width: 56px;
    height: 3px;
    background: var(--main-color);
    margin: .9rem auto 0;
    border-radius: 2px;
}

/* ===== HERO BOOKING FORM ===== */

.hero-subheading {
    color: rgba(255, 255, 255, .92);
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    margin: -.25rem 0 2rem;
    letter-spacing: .01em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}

.hero-heading {
    text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 1px 4px rgba(0, 0, 0, .45);
}

.hero-form {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(7, 59, 76, .22);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-form__fields {
    display: flex;
    align-items: stretch;
}

.hero-form__field {
    flex: 1;
    padding: .85rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    border-radius: 14px;
    transition: background .15s ease;
    min-width: 0;
}

.hero-form__field:hover {
    background: rgba(91, 192, 235, .08);
}

.hero-form__label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #073B4C;
    margin-bottom: .25rem;
}

.hero-form__divider {
    width: 1px;
    background: rgba(7, 59, 76, .12);
    margin: .65rem 0;
    flex-shrink: 0;
    align-self: stretch;
}

/* Input-Overrides innerhalb des Hero-Formulars */
.hero-form .text-input {
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: #073B4C !important;
    width: 100%;
}

.hero-form .text-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Personen-Filter im Hero */
.hero-form #personen-filter-container {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    font-weight: 600 !important;
}

.hero-form #personen-filter-container .personen-toggle {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    color: #073B4C !important;
    text-align: left !important;
    height: auto !important;
    width: 100% !important;
}

.hero-form #personen-filter-container .personen-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1060 !important;
    min-width: 220px;
    border-radius: 12px;
    border: 1px solid rgba(7, 59, 76, .1);
    box-shadow: 0 8px 24px rgba(7, 59, 76, .15) !important;
}

/* Suchbutton */
.hero-form__btn {
    background: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .8rem 1.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    margin: .5rem;
    align-self: center;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 2px 10px rgba(91, 192, 235, .35);
}

.hero-form__btn:hover {
    background: #3da8d6;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(91, 192, 235, .45);
}

/* Trust-Elemente */
.hero-trust {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: .5rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .15);
}

.hero-trust__item {
    color: rgba(255, 255, 255, .92);
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ── Responsive (mobil) ────────────────────────────────────── */
@media (max-width: 767px) {
    .hero-form__fields {
        flex-direction: column;
    }

    .hero-form__field {
        border-radius: 0;
    }

    .hero-form__field:hover {
        background: none;
    }

    .hero-form__divider {
        width: auto;
        height: 1px;
        margin: 0 1.1rem;
        align-self: auto;
    }

    .hero-form__btn {
        width: calc(100% - 1rem);
        justify-content: center;
        margin: .75rem .5rem;
        padding: 1rem;
        border-radius: 12px;
    }

    .hero-trust {
        gap: .6rem 1rem;
    }
}