/*
Theme Name: Persiluhr v4.4 (2026)
Theme URI: http://www.cssigniter.com/ignite/themes/sixtyone
Author: Sebastian Auferoth
Author URI: http://www.cssigniter.com/
Description: Persiluhr Theme — Verbesserungen: bessere User Experience
Version: 4.4
License: GNU General Public License
*/

@import url("https://use.typekit.net/crx8dfh.css");

:root {
    --color-orange-main: #FAB700;
    --color-orange-side: #F09F19;
    --color-orange-light: #eece6a;
    --color-accent-light: #FFEDCB;
    --color-green-side: #95B329;
    --color-green-main: #6EA901;
    --color-green-light: #d9de49;
    --color-grey-main: #4C5958;
    --color-grey-light: #d3d0cd;
    --color-grey-lightest: #f4f4f5;
    --green-dark: #4D7501;
    --color-text-main: #212121;
    --color-text-grey: #4C5958;
    --color-text-light: #DFE0DF;
    --offwhite: #faf9f6;
    --dark: #13250e;
    --green-dark: #55652b;
    
    --font-h1: 48px;
    --font-h2: 42px;
    --font-h3: 26px;
    --font-h4: 20px;
    --font-h5: 17px;
    --font-large: 30px;
    --font-normal: 17px;
    --font-medium: 15px;
    --font-small: 12px;
    
    --radius-std: 20px;
    
    
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    
}


*{
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none; 
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img {
    display: block;
}

html {font-size: var(--font-normal);}

body{
    background: white;
    color: var(--color-text-main);
    font-family: ff-meta-correspondence-web-p, Arial, sans-serif;
    line-height: 1.4;
}

/* test: mobile-bottom-menu */
#test_mobile-bottom-menu {
    display: none; z-index: 10000000; position: fixed; bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: rgba(0,0,0,.3) 2px 2px 10px;
    background: rgba(0,0,0,0.95);
    border-radius: 100px;
    color: white;
    padding: 13px 26px;
}
    


/* =start
------------------------------------------------------------------------------------------*/


ol, ul { list-style: none;}

ul.circle {
    list-style-position: inside;
    list-style: disc;
    margin-bottom: 20px;
    font-size: var(--font-normal);
}

::selection { background: var(--color-orange-main); color: #fff; }
::-moz-selection { background: var(--color-orange-main); color: #fff; }
table {border-collapse: collapse; border-spacing: 0;}

article #entry {max-width: 940px; text-align: left; margin: 0 auto;}

.entry {margin-top: 30px; display: block;}

.entry ul, p ul {
    list-style-type: square;
    float: none;
    margin: 0 0 15px 20px;
}

.entry ol, p ol{
    list-style-type: decimal;
    float: none;
    margin: 0 0 15px 20px;
}

.entry ul li, p ul li, .entry ol li, p ol li{
    float: none;
    background: none;
    width: auto;
    margin: 0 0 5px 0;
    padding: 0 0 0 0;
}

/* = TYPOGRAPHY & HEADINGS
------------------------------------------------------------------------------------------*/

p {
    font-size: var(--font-normal);
	color: var(--color-text-main);
	line-height: 1.5;
	margin: 0 0 20px 0;
    padding: 0; 
}

p.is-small, .small {font-size: var(--font-small);}
p.is-medium, .medium {font-size: var(--font-medium);}
p.is-grey {color: var(--color-text-grey);}

.uppercase {text-transform: uppercase;}

strong, b, .bold {font-weight: 700; letter-spacing: normal !important;}

h1, h2, h3, h4, h5, h6 {margin: 10px 0; color: var(--color-text-main); line-height: 1.2; font-weight: 700;}

h1.center, h2.center, h3.center, h4.center, h5.center, p.center {text-align: center !important;}

.font-green, h1.green, h2.green, h3.green, h4.green, h5.green, h6.green, b.green, strong.green {color: var(--color-green-side);}
.font-white, h1.white, h2.white, h3.white, h4.white, h5.white, h6.white, p.white, b.white, strong.white {color: white;}

h1 {font-size: var(--font-h1); line-height: 1.2; font-weight: 700;}

h2 {font-size: var(--font-h2);}

h3 {font-size: var(--font-h3); margin: 0 0 15px 0; line-height: 1;}

h4 {font-size: var(--font-h4);}

h5 {font-size: var(--font-h5); font-weight: normal; text-transform: uppercase;}

h6 {font-family: handsome-pro, sans-serif; font-size: var(--font-h3); line-height: 1;}

article h1 {text-align: center; text-transform: uppercase; }
article h5.preline {text-align: center; text-transform: uppercase; color: var(--color-green-side); font-weight: bold; margin: 0;}

.sub-heading {font-size: var(--font-large); position: relative; top: 10px; line-height: 1; color: var(--color-grey-main);}


/* = GRID
------------------------------------------------------------------------------------------*/

.grid {display: grid; grid-gap: 20px; margin: 0px 0;}

.grid-padding {padding: 0 20px;}
.grid-gap-40 {grid-gap: 40px !important;}

.grid-full {display: grid; grid-gap: 60px; margin: 60px 0;}
.grid-6-1, .grid-6-2, .grid-6-3, .grid-6-4, .grid-6-5, .grid-6-6 {grid-template-columns: repeat(6, 1fr);}
.grid-5-1, .grid-5-2, .grid-5-3,.grid-5-4, .grid-5-5 {grid-template-columns: repeat(5, 1fr);}
.grid-4-1, .grid-4-2, .grid-4-3,.grid-4-4 {grid-template-columns: repeat(4, 1fr);}
.grid-3-1, .grid-3-2, .grid-3-3 {grid-template-columns: repeat(3, 1fr);}
.grid-2-1, .grid-2-2 {grid-template-columns: repeat(2, 1fr);}
.grid-1-1 {grid-template-columns: repeat(1, 1fr);}

.merge_2-3 {grid-column: 2 / 4;}
.merge_1-2 {grid-column: 1 / 3;}
.merge_1-3 {grid-column: 1 / 4;}
.wrap-120 {padding: 0 120px}

.grid-two-thirds {grid-column: 1 / span 2;}
.grid-one-two-thirds {grid-column-start: 2; grid-column-end: 4;}

.container {position: relative;}

.flex {display: flex; align-items: center; justify-content: space-between; column-gap: 0px; }
.items-start {align-items: flex-start; justify-content: flex-start;}
.items-center, .align-center {align-items: center;}
.justify-center, .align-center {justify-content: center !important;}
.gap {gap: var(--radius-std);}
.gap-20 {gap: 20px;}
.margin-top {margin-top: var(--radius-std);}
.border-b {border-bottom: 1px solid rgba(255,255,255,.5);}
.padding-20 {padding: 20px 0;} 
.padding-std {padding: var(--radius-std);} 

.distance-50 {height: 50px; display: block;}
.distance-30 {height: 30px; display: block;}


.row .row {margin: 0;}

.four.columns + .eight.columns, .eight.columns + .four.columns {padding: 0 0 0 30px}

#white {background: white; padding: 40px 0;}
#light {background: var(--offwhite); padding: 40px 0;}

#lightbg {
	background: rgba(20,20,20,.03);
	margin: 0px 0 20px 0;
	padding: 20px 0;}

#greenbg {
	background: var(--color-green-light);
	padding: 30px 0;
}

#greybg {
	background: var(--color-grey-light);
	margin: 0px 0 20px 0;
	padding: 20px 0;}


.logo {height: 110px !important;color: white; font-size:24px;text-align:center;text-transform:uppercase;
  position: absolute;
  top: 0;
  left: 0;
    z-index:100 !important;}

#footer_mobile, .footer_phone {display:none;}

#unterbooking {
	background: #ace0ac !important; 
	margin: 10px 0px !important;
	border: 1px solid green !Important;
	border-radius: 5px;
	width:100%;
    clear: none;
    float: left;"
}


/* = HOME
------------------------------------------------------------------------------------------*/
.booking-hint {text-align: center; margin-top: -30px; font-size: var(--font-medium); margin-bottom: 20px;}

#welcome{
    padding: 50px 20px;
    margin: 50px 0;
    background-color: var(--color-green-side);
    background-image: url("img/global/bg-pattern.svg");
    background-size: 600px 600px;
    text-align: center;display: flex;
justify-content: center;
}
#welcome #message {
    background: white;
    padding: 50px;
    max-width: 850px;
}
#welcome #message p {text-align: left;}
#welcome img.direktion, img.direktion {height: 150px; width: 150px; border-radius: 120px; border: 4px solid white; box-shadow: 5px 5px 15px rgba(0,0,0,.2); }

#home-slideshow {width: 100%; height: 650px; display: block; position: relative; overflow: hidden;}
.swiper, .hero-slider {position: relative;}
#home-slideshow img {object-fit: cover; width: 100%; height: 650px; filter: brightness(0.8); transition: all .2s ease-in-out; filter: brightness(0.5);}
#home-slideshow img.center {object-position: center;}
#home-slideshow img.left {object-position: left;}
#home-slideshow img.right {object-position: right;}
#home-slideshow ul li.clone::after {position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* W3C */}

#home-slideshow #overlay {
    color: white;
    text-shadow: 0px 0px 15px rgba(0,0,0,.5);
    text-align: center;
    position: absolute;
    bottom: 0px;
    padding: 100px 20px 200px 20px;
    width: 80%;
  left: 50%;
  transform: translate(-50%, 0);
z-index: 2;}

#home-slideshow h1, #home-slideshow h3 {color: white !important; font-weight: 700;}

#booking-overlay {padding: 0px 0; position: relative; top: -50px; background: white; box-shadow: 10px 10px 20px rgba(0,0,0,.1); display: block; color:var(--color-green-side); max-width: 850px; margin: 0 auto; z-index: 2;}

#booking-overlay .booking {padding: 20px; background: #f3ce56;}
#wis2-panel .wis2-panel {background: var(--color-orange-light) !important;}

#wis2-panel .wis2-panel{background: #f3ce56 !important;font-size: 14px !important;color: #000 !important}
#wis2-panel .wis2-button--primary {padding: 5px 20px 5px 20px !important;font-weight: 700; border-radius: 3px; background: var(--color-green-side) !important; border: 1px solid var(--color-green-main) !important; }
#wis2-panel .wis2-button--primary:hover {
    background: var(--color-green-main) !important;box-shadow: 1px 1px 10px rgba(0,0,0,.1) inset;}
#wis2-panel #wis2-checkin:hover, #wis2-panel #wis2-checkout:hover {border: 1px solid rgba(0,0,0,.4); }
#wis2-panel #wis2-checkin, #wis2-panel #wis2-checkout {}

#wis2-panel .wis2-input{background: white !important;}

#infobox-corona {padding: 20px !important; background: #eeeeee; color: #333; border-radius: 20px; box-shadow: 5px 5px 30px rgba(0,0,0,0.1);}
#dreig {
        width: 100px;
        height: 100px;
        border: 5px solid white;
        box-shadow: 5px 5px 15px rgba(0,0,0,.1);
        border-radius: 15px;
        display: block;
        animation: dreig 10s;
        animation-iteration-count: infinite;
        position: relative;
        float: left;
        background: white; margin-right: 25px;
    }
    #dreig img {
        width: 90px;
        height: 90px;
        position: absolute;
        margin: 0 !important; padding: 0 !important;}

#features {padding: 20px 0; display: block; overflow-x: scroll;}

.feature {text-align: center;}
.fa-2x {color:var(--color-green-side); }


/* =MODERN - Volle Breite
------------------------------------------------------------------------------------------*/


/* POPUP */

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none; /* Allows clicking through when hidden */
}

.popup-overlay.is-visible {opacity: 1;pointer-events: auto;}

.popup-container {
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    transition: transform 0.2s ease;
}

.popup-overlay.is-visible .popup-container {transform: translateY(0);}

#popup-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: white;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    border-radius: 100px;
    border: none;
    width: 40px; height: 40px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

#popup-close-btn:hover {color: white; background: var(--color-green-light);}

/* hotel */
#hotel #text-image:nth-of-type(1) {background: var(--color-green-light);}
#hotel #text-image {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr);grid-gap: 0px;margin: 70px 0;}
.image-col img {object-fit: cover; width: 100%; height: 100%;}
.text-col {padding: 40px; }
#hotel #text-image > .text-col > div {max-width: 525px; }
#hotel #text-image:nth-of-type(odd) > .text-col > div {margin-right: auto; margin-left: 0;}
#hotel #text-image:nth-of-type(odd) > .text-col {float: left; }  
#hotel #text-image:nth-of-type(even) > .text-col {order: -1; float: right;}
#hotel #text-image:nth-of-type(even) > .text-col > div {margin-left: auto; margin-right: 0;}
    
/* frühstück */
#breakfast #text-image {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0px;margin: 0px 0;}
#breakfast #text-image:nth-of-type(odd) {grid-template-columnse: 45% 55%; }
#breakfast #text-image:nth-of-type(even) {grid-template-columnse: 55% 45%; }
#breakfast .image-col img {object-fit: cover; width: 100%; max-height: 100%;}

#breakfast .text-col {padding: 40px;}
#breakfast #text-image > .text-col > div {max-width: 525px;}
#breakfast #text-image:nth-of-type(odd) > .text-col > div {margin-right: auto; margin-left: 0;}
#breakfast #text-image:nth-of-type(odd) > .text-col {float: left;}  
#breakfast #text-image:nth-of-type(even) > .text-col {order: -1; float: right;}
#breakfast #text-image:nth-of-type(even) > .text-col > div {margin-left: auto; margin-right: 0;}
#breakfast #text-image.green {background: var(--color-green-light);}
    
#breakfast-choice img.icon {width: 60px; float: left; margin-right: 30px;}
#breakfast-choice div {justify-content: center; align-content: center;}

#breakfast-choice .main {font-weight: bold; color: var(--color-green-main);font-size: var(--font-normal);}
#breakfast-choice .add {font-size: var(--font-medium);}

/* bildergalerie */
#image-hover {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* Modern frosted glass effect */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
}

#image-hover.is-visible {opacity: 1; visibility: visible;}
#image-hover.is-visible #block {transform: translateY(0);}

#image-hover > #block {width: calc(100% - 40px); max-width: 1200px; height: 90vh; background: white; border-radius: calc( var(--radius-std) / 2); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);}

#image-hover > #block .header {flex-shrink: 0; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0;}
#image-hover > #block .images {height: calc(100vh - 120px);  overflow-y: scroll;}

#image-hover .close-btn {border: none; cursor: pointer; padding: 10px; margin-right: 10px; transition: color 0.2s;}
#image-hover .close-btn:hover { color: var(--color-green-main); }

#image-hover .images-grid {flex: 1; overflow-y: auto; column-count: 2; column-gap: 30px;  padding: 30px;}

#image-hover .grid-item {break-inside: avoid-column; display: flex; flex-direction: column; padding-bottom: var(--radius-std); width: 100%;}
#image-hover .grid-item:last-child {padding-bottom: 0;}
#image-hover .image-wrapper {position: relative; overflow: hidden; border-radius: 4px;}
#image-hover .image-wrapper img {width: 100%; height: auto; object-fit: cover; display: block;}
p.image-description {font-size: var(--font-small); margin: 10px 0 0 0; line-height: 1.5; padding: 0;}


/* text popup */
#popup-text {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); /* Modern frosted glass effect */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    justify-content: center;
}

#popup-text.is-visible {opacity: 1; visibility: visible;}
#popup-text.is-visible #block {transform: translateY(0);}

#popup-text > #block {width: calc(100% - 300px); min-width: 300px; height: 90vh; background: white; border-radius: calc( var(--radius-std) / 2); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);}

#popup-text > #block .header {flex-shrink: 0; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f0f0f0;}
#popup-text > #block .images {height: calc(100vh - 120px);  overflow-y: scroll; padding: 0 24px;}

#popup-text .close-btn {border: none; cursor: pointer; padding: 10px; margin-right: 10px; transition: color 0.2s;}
#popup-text .close-btn:hover { color: var(--color-green-main); }



/* -----------------------------------------
	Own Style
----------------------------------------- */

.booking-bar {float:clear !important; margin: 20px 0 0px 0; text-align: center; position: relative; top: -50px;}

#rating-overview {box-shadow: 5px 5px 20px rgba(0,0,0,.1); padding: 25px;}
#rating-overview h3 {font-weight: normal;}
#rating-overview img {height: 20px; display: block;}
#rating-overview .avg {font-weight: 700; font-size: 48px; line-height: 1;}
#rating-overview .outof {font-size: 12px;}
#rating-overview .total {font-size: 12px; margin-bottom: 15px;}



.testimonial-line {
    width: 180px;
    background: #efefef;
    height: 8px;
    display:inline-block;
    border-radius: 10px;
    margin-bottom: 2px;
}
.avg-rating {font-size: 12px; font-weight: 700; width: 20px !important; margin: 0px 10px; display: inline-block;}
.provider {font-size: 13px;}
.testimonial-line-filled {
    background: var(--color-orange-main);
    height: 8px;
    display:block;
    border-radius: 10px;
    z-index: 2;
}

picture {font-size: var(--font-medium);}

#single-review {padding:25px; border: 1px solid var(--color-grey-lighter); margin: 0 0 var(--radius-std) 0; border-radius: 3px;}

#single-review img {height: 20px; display: inline-block;}
#single-review .rating {color: var(--color-green-light); font-size: 24px; }
#single-review p {font-size: var(--font-medium);}

.testimonial-link {
    text-transform: uppercase;
    color: var(--color-grey-main);
    font-size: 13px;}
.testimonials{
    margin: -20px auto 50px auto;
}

.review-platform {box-shadow: 5px 5px 20px rgba(0,0,0,.1); border-radius: 5px; padding: 30px; border: 1px solid white;}
.review-platform:hover {border: 1px solid var(--color-green-light);}
.review-platform img {
    display: block;
    height: 50px;           /* Set a consistent height for all logos */
    width: auto;            /* Keeps the logo proportions correct */

}


#persiluhr-popup .container {
    background: url("img/global/persilur-white.png"), url("img/global/popup-full.jpg");
    
    background-position: right center, left center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll;
    -webkit-background-size: contain, cover;
    -moz-background-size: contain, cover;
    -o-background-size: contain, cover;
    background-size: contain, cover;
}

.welcomeback {
    background: url("img/global/persilur-white.png"), url("img/global/popup-full.jpg");
    background-position: right center, left center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll;
    background-size: contain, cover;
}

#header-image {
    background-size: cover;
	height: 450px;
	position: relative;
    text-align:center;}
h1.header-image {
    font-size: var(--font-h1);
    color: #fff;
    text-align:center;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
text-transform: uppercase;
text-shadow: 0px 0px 15px rgba(0,0,0,0.5);}

#header-half {max-height: 60vh; width: 100%; position: relative;}
#header-half img {max-height: 60vh; object-fit: cover; filter: brightness(0.6);width: 100%;}

#header-cropped {max-height: 50vh; width: 100%; position: relative;}
#header-cropped img {max-height: 50vh; object-fit: cover; filter: brightness(0.6);width: 100%;}

/* Post Type: ERLEBEN */
#header-full {max-height: 600px; width: 100%; position: relative;}
#header-full img {max-height: 600px; object-fit: cover; filter: brightness(75%);width: 100%;}
#header-full h1, #header-full h3, #header-half h1, #header-half h3, #header-half h2, #header-half p {color: white; text-shadow: 0px 0px 10px rgba(0,0,0,0.5);}
#header-half p {line-height: 1.2;}

/* Post Type: ERLEBEN */
#header-full.modern img {filter: brightness(0.5);}
#header-full.modern .centered-bottom {position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);}
#header-full.modern h1 {color: white; text-shadow: 1px 1px 15px rgba(0,0,0,.3); text-transform: uppercase; letter-spacing: -1px; transform: scale(1,1); font-size: 6rem; line-height: 0.9; margin-bottom: 30px;}
#header-full.modern h3 {color: white; text-shadow: 1px 1px 15px rgba(0,0,0,0.5); letter-spacing: 2px; text-transform: uppercase;}

hr.line {
    margin: 1.5em auto;
    display: block;
    height: 3px;
    width: 250px;
    border: transparent;
    overflow: visible;
    background-image: url(img/global/line.svg);
    background-size: cover ;
    
    
}

hr.persiluhr {
  margin: 1.5em auto;
  position: relative;
  height: 45px;
  width: 10px;
  border: transparent;
  overflow: visible;
  background-image: url(img/global/uhr-grau.png);
    background-size: cover ;
}
hr.persiluhr:before {
    position: absolute;
    height: 10px;
    width: 90px;
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg width="90" height="10" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="80" y2="0" style="stroke:rgb(200,200,200);stroke-width:1"/></svg>');
    left: -110px;
    top: 20px;
  }
  
hr.persiluhr:after {
    position: absolute;
    height: 10px;
    width: 90px;
    content: '';
    background-image: url('data:image/svg+xml;utf8,<svg width="90" height="10" viewBox="0 0 9 9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="80" y2="0" style="stroke:rgb(200,200,200);stroke-width:1"/></svg>');
    right: -70px;
    top: 20px;
  }

#erleben-single {
    box-shadow: 5px 5px 15px rgba(0,0,0,.1);
    display: block;
    position: relative;
}

#erleben-single .content { padding: 20px; display: block; width: 100%;}
#erleben-single h3 {margin-bottom: 0 !important; display: block; width: 100%;}
#erleben-single:hover {background: var(--color-green-light); color: white;}
#erleben-single:hover h3 {color: white;}
#erleben-single h3::after {
    content:'\f105'; 
    font-family: "FontAwesome";
    position: relative;
    right: 0px;
    float: right;
}

details {
    max-width: 800px;
    margin: 30px auto;}

details summary::-webkit-details-marker {display: none;}

details summary {
    box-shadow: 5px 5px 20px rgba(0,0,0,.1);
    padding: 20px 40px;
    position: relative;
    cursor: pointer;
    list-style: none;
}
details summary:hover {
    background: var(--color-green-light);
    color: white;
}
details summary:hover p, details summary:hover h3 {color: white;}

details summary:after {
  content: "\f107";
    font-family: "FontAwesome";
  color: black;
  position: absolute;
  font-size: 1.75rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 40px;
    bottom: 50%;
  font-weight: 200;
  transform-origin: center;
}
details[open] summary:after {
  transform: rotate(180deg);
  font-size: 2rem;
}
details summary {
  outline: 0;
}
details summary h3 {margin:0; padding: 5px 0; color: var(--color-text-main);}
details summary p {margin:0; padding: 5px 0; font-style: italic; color: var(--color-green-main);}
details p {
  margin: 0 40px;
  padding-top: 20px;
}

.attraction_single {margin-top: 10px; position: relative; border-radius: 10px; overflow: hidden; transition: all .2s ease-in-out;}
.attraction_single h3 {margin-bottom: 10px; font-weight: bold; font-size: 1.5rem; color: white;}
.attraction_single:hover {transform: translateY(-5px);}
.attraction_single:hover img.thumbnail {filter: brightness(0.75); }
.attraction_single img.thumbnail {filter: brightness(0.9); transition: all .2s ease-in-out;}
.gradient-overlay {position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 20%, rgba(0, 0, 0, 0.5));
}
.attraction_single .content {position: absolute; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between !important; color: white !important; padding: 20px; gap: 10px;}
img.arrow-circle {height: 30px;}
.attraction_single .category {position: absolute; top: 20px; left: 20px; border-radius: 100px; background: var(--color-green-light); padding: 5px 10px; color: var(--color-text-main); font-size: 0.7rem;}
img.arrow-circle {height: 30px;}

.attraction_single img.arrow-circle {transition: all .2s ease-in-out;}
.attraction_single:hover img.arrow-circle {transform: rotate(-45deg); transition: all .2s ease-in-out;}


#booking-wide {width: 100%; clear: both; background: #f3ce56; padding: 0px 80px; margin-bottom: 30px;}
#booking-room {float:clear !important; margin: 20px 0; text-align: center;}
.onlymobile {display:none!important;}
.home-booking-content {
	text-align: center;
	position: absolute;
  vertical-align: middle;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);}
.home-booking-bar {
    margin-top: 100px; 
    width: 700px !important;
    vertical-align: middle;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);}
.home-booking-head {
	color: white;
	font-size:36px;
	text-shadow: 0px 0px 20px black;
	font-weight: 700;
	margin-bottom: 20px;
	}
.home-booking-support {
    font-size: 18px;
}

#slider{ max-width: 100% !important; overflow: hidden;}
#slider, .flexslider, .slides {-webkit-box-sizing:border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.description {color: var(--color-text-main); position: absolute; bottom: 10px; left:10px; font-size: 14px; background: rgba(255,255,255,0.9); color: var(--color-text-main); padding: 5px 10px; box-shadow: 2px 2px 10px rgba(0,0,0,.1); border-radius: 3px;}

img .headerimg, .headerimg img, .headerimg {width:100%; height:360px !important; object-fit: cover;}

#room_gallery img {margin-right: 5px;}
#room_gallery img:hover {opacity:0.9;}



#beliebt {padding: 10px 0; font-size: 12px; }
img.beliebt {width: 15px; margin-right: 5px; float: left;}

.contact li {
    list-style: outside none none;
    padding:0px 10px 10px 10px; 
    display: table-cell;
    vertical-align: middle;    }
.contact li:first-child {text-align:center; width:50px !important;}
.contact > ul {float: none; display: table;}
.contact ul{margin-left:50px;}
.contact a {font-weight:normal; color: var(--color-text-main);}

.homepage_widget {text-align: justify !important; font-size: 15px; font-weight: normal;}
.homepage_widget_h3 {text-align: center !important; 
  color: white !important;
  font-size: 22px; 
  font-weight: 700 !important;
  text-shadow: 0px 0px 20px black;
  text-transform: uppercase !important;
  }
span.overimage {
  cursor: pointer;
  position: absolute;
    bottom: 0px;
    left: 50%;
	transform: translate(-50%, -50%);
  opacity:1;
  font-size: 16px !important;
width: 100%;text-align:center;}

.excerpt {font-size: 16px; color: white;text-transform:uppercase; font-weight: normal;
  text-shadow: 0px 0px 20px black;width: 100%;text-align:center; display:block;padding: 0px 10px;}

span.overimage span {
  display: table-cell;
  text-align: center;
  text-transform:uppercase;
  font-size: 16px;
  font-weight: normal;
}

.bottom-left {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 0px;
  left: 0px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 0px;
  right: 0px;
}

.copyright {color: var(--color-text-main); position: absolute; font-size: 6px; color:white; padding: 1px 3px; text-shadow: 0px 0px 2px rgba(0,0,0,.5);background: rgba(0,0,0,0.2); opacity: 0.7;}


/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
    max-width: 100%;
  transform: translate(-50%, -50%);
    text-align: center;
}

/* homepage widget */
#homepage-widgets.grid {grid-gap: 10px !important;}
.ci_widget_room {position: relative;text-align: center; transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
.ci_widget_room .image-container {position: relative;display: inline-block;overflow: hidden; border-radius: 1px; vertical-align: middle;}
.ci_widget_room .image-container img {max-width: 100%;height: auto;margin-bottom: 0 !important; padding-bottom: 0 !important; vertical-align: middle; transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
.ci_widget_room .image-container:hover img {filter: brightness(0.8);object-fit: cover;transform: scale(1.05); transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
.ci_widget_room a {color: white;}
.ci_widget_room .gradient-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, 0.65) 100%); }
.ci_widget_room .text-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
}
.ci_widget_room .text-overlay h3 {margin-bottom: 0; color: white;}

/* --- HOTEL --- */

#intro-text {
    margin-top: 50px; padding-left: 10vw; margin-left: 10vw;
    background-image: url(img/global/uhr-grau-large.png); /* Specify the URL of the background image */
  background-size: auto 80%; /* Scale the image to fit within the div */
  background-position: left center; /* Position the image on the right side and center vertically */
  background-repeat: no-repeat; /* Prevent the image from repeating */}

/* homepage widget */

#testimonials {background: #fab700; padding: 20px; margin: 20px 0 20px 0; height: 200px; vertical-align: middle;}
#testimonials_in {width:60%;margin: auto;}
#room_single {padding: 0px 0 20px 0; box-shadow: 0px 0px 20px rgba(0,0,0,.1); border-radius: 1px; background: white;overflow: hidden;transition: all .2s ease-in-out;}
#room_single h3 {font-weight: 700;font-size: 20px; text-align: left; text-transform: none;transition: all .2s ease-in-out;}
#room_single .content {padding: 15px 25px 5px 25px; transition: all .2s ease-in-out;}
#room_single .image {height: 220px; overflow: hidden; position: relative; transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
#room_single .image img {transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}

#room_single:hover {box-shadow: 0px 0px 30px rgba(0,0,0,.2);transition: all .2s ease-in-out;}
#room_single:hover .image img {filter: brightness(0.8); transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
#room_single:hover h3 {color: var(--color-green-main);transition: all .2s ease-in-out;}

.room_single {margin-bottom:5px;}
.room_single a {display: block; text-decoration: none; color: inherit; transition: all 0.3s ease-in-out;}
.room_single img {display: block; width: 100%; height: auto; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;}
.room_single a:hover img {filter: brightness(0.8);}
.room_single .button.is-sublime {transition: background 0.3s ease-in-out, color 0.3s ease-in-out;}
.room_single a:hover .button.is-sublime {background: var(--color-green-light); color: var(--color-text-main);}
.room_single h4 {transition: color 0.3s ease-in-out;}
.room_single a:hover h4 {color: var(--color-green-main);}

#offers {margin: 0px;}
#offers ul {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 20px 0;
  overflow-x: scroll;
  padding: 0 0 0 20px;
  scroll-padding-left: 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#offers ul::-webkit-scrollbar {
  display: none;
}
#offers ul li {
  padding: 0 1rem 0 0;
  scroll-snap-align: center; /* or: center */
  scroll-snap-stop: always;
}
#offers ul li div.offer_single {
  width: 320px;
}

#offers #prev, #offers #next {
position: absolute;
top: 50%;
transform: translateY(-50%);
    width: 35px; height: 35px;
z-index: 10;
background-color: white;
border-radius: 20px;
border: none;
font-size: 0.8rem;
padding: 0.8rem;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
color: var(--color-green-main);
cursor: pointer;
    display:flex;justify-content: center;
  align-items: center;
}

#offers #prev {left: 4px;}
#offers #next {right: 4px;}
#offers #prev:hover, #offers #next:hover {background: var(--color-green-light); color: white; transition: all .2s ease-in-out;}


#offer_single {padding: 0px 0 20px 0; border-radius: 3px; background: white;overflow: hidden;}
#offer_single h3 {font-weight: 700;font-size: 18px; text-align: left; text-transform: none;}
#offer_single .content {padding: 15px 20px 5px 20px;}
#offer_single p {font-size: 13px;}
#offer_single .image {height: 220px; overflow: hidden;background: black;}
#offer_single:hover .image img {opacity: 0.8;}
#offer_single:hover h3 {color: var(--color-green-main);}


#attractions {margin: 0px;}
#attractions ul {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 1rem 0;
  overflow-x: scroll;
  padding: 0 0 0 1rem;
  scroll-padding-left: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#attractions ul::-webkit-scrollbar {
  display: none;
}
#attractions ul li {
  padding: 0 1rem 0 0;
  scroll-snap-align: center; /* or: center */
  scroll-snap-stop: always;
}
#attractions ul li div.attraction_single {
  width: 200px;
}

#attractions #prev, #attractions #next {
position: absolute;
top: 50%;
transform: translateY(-50%);
    width: 35px; height: 35px;
z-index: 10;
background-color: white;
border-radius: 20px;
border: none;
font-size: 0.8rem;
padding: 0.8rem;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
color: var(--color-green-main);
cursor: pointer;
    display:flex;justify-content: center;
  align-items: center;
}

#attractions #prev {left: 4px;}
#attractions #next {right: 4px;}
#attractions #prev:hover, #offers #next:hover {background: var(--color-green-light); color: white; transition: all 200ms ease-in;}
#attraction_single {padding: 0px 0 20px 0; border-radius: 3px; background: white;overflow: hidden;}
#attraction_single h5 {font-weight: 600;font-size: var(--font-medium); text-align: left; text-transform: none; margin: 5px 0;}
#attraction_single .content {padding: 15px 20px 5px 20px;}
#attraction_single p {font-size: 13px;}
#attraction_single img {height: 150px; overflow: hidden;border-radius: 10px; margin-bottom: 0px; object-fit: cover; object-position: 50% 50%;}
#attraction_single:hover img {filter:brightness(0.85);  transform: none;}
#attraction_single a:hover {color: var(--color-text-main);}
#attraction_single .category, #infos .category {background: var(--color-green-light); border-radius: 3px; padding: 3px 6px; font-size: var(--font-small);}
#attraction_single .distance, #infos .distance {font-size: var(--font-small);}

.room-entry {column-count: 2; column-gap: 60px; margin-top: 30px;}



.headerphoto {height: 600px; position: relative;top: 0px; }
.headerphoto imga {width:100%; position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%); overflow: hidden;}
.centered-and-cropped { object-fit: cover }
#room p {font-size:15px;}

.date {font-size: 12px; background: var(--color-green-side); padding: 4px 10px; display: inline-block; color: white; border-radius: 5px;}

#meta_room { 
	padding-bottom: 20px;
	text-align: center; 
  display: table;
  margin: 0 auto;
  width: 100%;}
#meta_roominfo {background: none; height: auto; width: 100% !important; display: block; }
.metaicon {text-align: center; background: none !important; width: 80px; float: left;}
.metaicon_room:hover, .metaicon_room_single:hover {color: #fab700;}
.metaicon_room {text-align: center; background: none !important; width: auto; float: left;
    display:inline-block; padding: 0 20px !important; font-size: 14px;}
.metaicon_room_single {text-align: center; background: none !important; width: auto; float: left;
    display:inline-block; padding: 0 20px !important; font-size: 15px;}

/* = ROOM
------------------------------------------------------------------------------------------*/
#room-ratings {padding: 20px; border: 1px solid #efefef; border-radius: 10px;}
#room-rating-preview {cursor: pointer; margin: 5px 0 20px 0; font-size: var(--font-small);}
#room-rating-preview .avg {background: var(--color-green-main); color: white; padding: 5px; border-radius: 5px 5px 5px 0;}
#room-rating-preview .total {text-decoration: underline;}

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

#header-mobile {display: none;}

#header {position: absolute; top: 0; z-index: 10000; left: 0; width: 100%; color: white;
background: linear-gradient(rgba(0,0,0,.5) 50%, rgba(0,0,0,0))}

#header .logo {
    width: 140px;
    position: relative;
    left: 0;
    z-index:100 !important;
    float: left;}

#line-one {display: block; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 0px 0px 3px 15px;}
#line-one ul li {margin-right: 20px;}

#navigation ul {float: left; margin: 5px 0 0 0;}
#navigation ul li {display: inline-block; text-transform: uppercase;}

#navigation ul li a {
    position: relative; /* CRITICAL: This anchors the underline */
    padding: 5px 5px;
    margin: 0px 10px;
    color: white;
    font-weight: 600;
    font-size: 18px;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, .5);
    text-decoration: none; /* Ensures no default underlines interfere */
}

/* The "Hidden" Underline */
#navigation ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -1px;
    left: 0;
    background-color: var(--color-green-light);
    transform: scaleX(0); /* Starts at 0 width */
    transform-origin: bottom right;
    transition: transform 0.3s ease-in-out;
}

#navigation ul li a:hover {color: var(--color-green-light);}

#navigation ul li a:hover::after {transform: scaleX(1); transform-origin: bottom left;}


a.header-booking{
	font-size:14px;
	color: black !important;
	text-align:center;
	text-transform:uppercase;
	background: var(--color-green-light) !important;
  	position: fixed;
  	top: 0;
  	right: 0;
  	z-index: 10030;
  	padding: 25px 20px!important;
	}
a.header-booking:hover {
	background: var(--color-orange-main) !important;
	color: white !important;
	}

.header-booking-direct{
	font-size:11px;
	color: white !important;
	text-align:center;
    text-decoration: underline;
    padding: 1px 3px;
  	position: fixed;
  	top: 71px;
  	right: 0;
  	z-index: 10030;
  	margin: 8px 12px!important;
    text-shadow: 0px 0px 5px rgba(0,0,0,.8);
	}
.header-booking-direct:hover {
    cursor: help;
	}

.header-booking-reasons {display:none;}
.header-booking-direct:hover ~ .header-booking-reasons {
    display: block;
    position: fixed;
    background: white;
    text-align: left;
    text-shadow: none;
    color: var(--color-text-main);
  	top: 90px;
  	right: 0;
  	z-index: 10030;
    margin: 12px;
    padding: 5px;
	font-size:11px;
    border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,0,0,.2);
}
ul#check {
     list-style: none;
}
ul#check li:before {
  content: '\f00c';
    font-family: 'FontAwesome';
    color: var(--color-green-main);
    margin-right: 5px;
}
ul#square {
     list-style: square;
    list-style-position: outside;
    margin-left: 15px;
    margin-bottom: 25px;
}
ul#square li {font-size: var(--font-medium); padding: 5px 0;}



#header-widget a {color: white !important;}


#header.sticky {background: rgba(255,255,255,0.95); box-shadow: 0px 0px 20px rgba(0,0,0,.2);}
#header.sticky .logo{ width: 90px;}


#menu-main-menu-right {float: right;}


/* =linkage
------------------------------------------------------------------------------------------*/
a {color: var(--color-grey-main); transition: all .3s ease-in-out; }
a:hover {color: var(--color-green-main); transition: all .3s ease-in-out;}

p a {color: var(--color-grey-main); text-decoration: underline; text-decoration-color:  var(--color-orange-main);}

p a:hover, li.selected a{
    color: white;
	background: var(--color-orange-main);
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover{
    border-bottom: none;
	text-decoration: none;
}



.sidenav {display: none;}

.container {position: relative;}
#blog-posts h3 {color: white !important;}
#blog-posts img {filter: brightness(0.7); border-radius: 10px; transition: 200ms all ease-in-out;}
span.button {background: black; color: white; border-radius: 100px; padding: 5px 10px; font-size: 0.7rem; width: auto; margin: 0;}
#blog-posts a:hover img {filter: brightness(0.6); }

/* Base button */
a.button, .button {
    --bg-color: var(--color-orange-main);
    --text-color: #fff;
    --border-color: transparent;
    --hover-bg-color: var(--color-orange-side);
    --hover-text-color: #fff;
    --hover-border-color: transparent;
    font-size: var(--font-normal);
    margin-top: 5px;
    padding: 6px 20px;
    display: inline-block;
    border-radius: 1px;
    position: relative;
    box-shadow: 1px 1px 2px rgba(0,0,0,.1);
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

a.button:hover {
    background: var(--hover-bg-color);
    color: var(--hover-text-color);
    border-color: var(--hover-border-color);
}

/* Modifiers */
a.button.is-green {
    --bg-color: var(--color-green-main);
    --text-color: #fff;
    --border-color: var(--color-green-main);
    --hover-bg-color: var(--color-green-light);
    --hover-text-color: black;
    --hover-border-color: var(--color-green-light);
}

a.button.is-white {
    --bg-color: white;
    --text-color: var(--color-green-main);
    --border-color: transparent;
    --hover-bg-color: var(--color-green-main);
    --hover-text-color: white;
    --hover-border-color: var(--color-green-main);
}

a.button.is-secondary {
    --bg-color: white;
    --text-color: var(--color-green-main);
    --border-color: var(--color-green-main);
    --hover-bg-color: var(--color-green-light);
    --hover-text-color: black;
    --hover-border-color: var(--color-green-light);
}

a.button.is-grey {
    --bg-color: white;
    --text-color: var(--color-grey-light);
    --border-color: var(--color-grey-light);
    --hover-bg-color: var(--color-orange-light);
    --hover-text-color: white;
    --hover-border-color: var(--color-orange-light);
}

a.button.is-lightgreen {
    --bg-color: var(--color-green-light);
    --text-color: var(--color-text-main);
    --border-color: var(--color-green-light);
    --hover-bg-color: var(--color-green-main);
    --hover-text-color: white;
    --hover-border-color: var(--color-green-main);
}

a.button.is-sublime, .button.is-sublime {
    --bg-color: white;
    --text-color: var(--color-text-main);
    --border-color: var(--color-green-light);
    --hover-bg-color: var(--color-green-light);
    --hover-text-color: var(--color-text-main);
}

a.button.is-uppercase {text-transform: uppercase !important;}


/* =slider
------------------------------------------------------------------------------------------*/

#slider {
	margin: 0 0 0px 0;
	color: #FFF;
}

/* =booking
------------------------------------------------------------------------------------------*/
.booking-small {float: right; z-index:11; top:-290px; margin-bottom: -300px;}
.header_text {padding-top: 15px;}
#yellowbg{
    width: 100%;
    clear: both;
    background: #f3ce56; border-radius: 2px;
    padding: 0px 80px;
    min-height: 120px;
}

.booking_support {font-size: 11px; float: right;color: black;}

.bs1 { display:inline-block; width: 410px; height: 20px;vertical-align:top;}
.bs2 { display:inline-block; width: 165px; text-align: left;}
.booking_support a {font-weight: normal; color: black; text-decoration: underline;}
.booking_support a:hover {font-weight: normal; color: black; text-decoration: none;}

.full-booking {
	float: none;
	background: none;
	heihgt: auto;
}
ul#roomdetails {display: flex; align-items: center;}
ul#roomdetails li {font-size: 12px; display: flex; margin-right: 15px; align-items: center;}
ul#roomdetails li img {height: 20px; margin-right: 5px;}

.special_offer {padding: 0 0 10px 30px;}

.row.full{
    width: 100%;
    background-color: #f9f9f9;
    margin: 0 0 10px 0;
}

.prisoned{
    max-width: 1140px;
    margin: 40px auto 0 auto;
    overflow: hidden;
}

div.line{
	margin: 15px auto 25px auto;
	width: 100%;
    background: url(img/global/line.png) left center repeat-x;
    text-align: center;
    overflow: hidden;
}

.four.columns.vertical .room_intro{
    margin: 0 0 10px 0;
}
#abstand, .abstand {height: 20px; display: block;}
.distance {margin: 40px 0;}
.distance-60 {margin: 60px 0;}

.room_vertical {padding: 0; border-radius: 1px; background: white;overflow: hidden; margin-bottom: 30px; height: auto;align-items: center;}
.room_vertical h3 {text-align: left; text-transform: none; transition: all .2s ease-in-out; e}
.room_vertical .content {padding: 15px 25px}
.room_vertical .image, .room_intro .image { overflow: hidden; position: relative; transition: all .2s ease-in-out;}
div.beliebt {position: absolute; font-size: var(--font-small); padding: 4px 12px !important; background: var(--color-green-light) !important; border-radius: 20px; color: black; top: 10px; left: 10px;}
.room_vertical a:hover h3 {color: var(--color-green-main);}
.room_intro, .ci_widget_room {transition: all .2s ease-in-out;}
.room_intro h3 {text-align: left; text-transform: uppercase;}
.room_intro p {font-size: 15px;}
.room_intro img {transition: all .2s ease-in-out; }
.room_intro:hover img {
	transform: scale(1.05); transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
.room_intro div{
    background-color: #fff;
    padding: 0 0 0 0;
}
.room_intro .icon {font-size: var(--font-small); margin-right: 15px; padding-bottom: 10px; display: inline-block;}
.room_intro .icon i {margin-right: 5px;}

.room_intro .offer {
    position: absolute;
    background: #fab700;
    text-align: center;
    top: 0px;
    color: #FFF;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 4px 7px;
    line-height: normal;
    left: 50%;
    margin-left: -65px; }
    
.room_intro .item-thumb {
    position: relative; }
    
.room_intro .item-thumb > a {
      position: relative;
      display: block; }
.room_intro .item-thumb > a:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0);}

#recent-posts-2 ul li {display: block; border-bottom: 1px dotted rgba(0,0,0,.1); padding: 5px;}

/* =testimonials
------------------------------------------------------------------------------------------*/

a.arrow_up,
a.arrow_down{
    display: block;
    width: 24px;
    height: 12px
}

a.arrow_up{
    margin: 0 auto 25px auto;
}

a.arrow_down{
    margin: 15px auto 0 auto;
}

/* =location
------------------------------------------------------------------------------------------*/
.location{
    margin: 0 auto 50px auto;
}

.location_services_container{
    float: left;
    margin: 20px 0 20px 0    
}

.location_services{
    float: left;
    width: 100%;
    background-color: #fff;
    padding: 25px 50px 20px 0px;    
}

.service{
    float: left;
    width: 100%;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #efefef;    
}

.service:last-child{
    border-bottom: none;
}

dl dt{
    display: block;
    float: left;
    width: 10%;   
    padding: 30px 10px 0 0;
}

dl dd{
    display: block;
    float: right;    
    width: 90%;
}

/* =contact / form
------------------------------------------------------------------------------------------*/

.contact-item {background: white; padding: 30px 20px; border-radius: var(--radius-std); text-align: center; transition: all 0.3s ease-in-out; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.02); flex-direction: column;}
.contact-item:hover {transform: translateY(-10px); box-shadow: 0 15px 35px rgba(255, 132, 0, 0.1); background: var(--color-green-light); color: black !important;}
.icon-wrapper { width: 60px; height: 60px; background: var(--color-green-main); border-radius: 50%; margin-bottom: 20px; transition: all 0.3s ease; color: white; font-size: 20px;}
.hinweis {border: 1px solid var(--color-orange-main); padding: var(--radius-std); border-radius: var(--radius-std);}


label {font-size: var(--font-medium); color: var(--color-text-main); font-weight: bold;}
input[type=text], input[type=email], textarea {
    background-color: white;
    color: var(--color-text-main);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    padding: 20px 10px;
    box-shadow: none;
}

input[type=button], input[type=submit] {
    background-color: var(--color-green-main);
    font-family: ff-meta-correspondence-web-p, Arial, sans-serif;
    font-weight: 700;
    border-radius: 3px;
    border: none;
    color: white;
    font-size: 16px;
    padding: 15px 30px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    transition: 0.2s all ease-in-out;
}
input[type=button]:hover, input[type=submit]:hover {background-color: var(--color-green-light); color: black;}

::-webkit-input-placeholder, :-moz-placeholder, input[placeholder], [placeholder], *[placeholder] {color:#686868!important}


/* =blog
------------------------------------------------------------------------------------------*/

#blog {padding: 50px 10px;}
#blog #entry {max-width: 940px; text-align: left;}
#blog p {max-width: 740px; text-align: left;}
#blog #infos {text-align: center; padding: 25px 0;}
#blog #infos a.button {border: 1px solid var(--color-text-main); color: var(--color-text-main); background: none; text-transform: none; border-radius: 50px;}
#blog #infos a.button:hover {border: 1px solid var(--color-orange-main); background: var(--color-orange-main); color: white;}
#blog h1, #blog h2, #blog h3, #blog h4, #blog h5 {padding: 25px 0 15px 0;}
#blog h3 {font-weight: bold;}
#blog img {max-width: 100% !important;}
#blog .wp-caption-text {font-size: var(--font-medium); text-align: left;padding: 0 0 15px 0;}

#blog .wp-caption p {max-width: 940px;}


#header-widget, #header-widget .widget {display: inline-block !important; font-size: 12px; }
#header-widget {text-align: right; bottom: 0;position:relative;}
#header-widget .widget {position:absolute; bottom:0px; right: 0px;}

.divider{
    clear: both;
    display: block;
    width: 100%;
    height: 50px;  
}

div.pagination{
    clear: both;
    float: left;
    width: 100%;   
    padding: 10px 0 0 0;
}

div.pagination div.centered{
    width: 340px
}

div.pagination span {
    float: left;
    width: 24px;
    height: 24px;
    margin: 0px 5px 0 0;
    text-align: center;
}

#paging, .pagination { margin-bottom: 50px; font-size: 12px; }

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {margin: 5px 20px 20px 0;}
.aligncenter, div.aligncenter {display: block;margin: 5px auto 5px auto;}
.alignright {float:right;margin: 5px 0 20px 20px;}
.alignleft {float: left;margin: 5px 20px 20px 0;}
.aligncenter {display: block;margin: 5px auto 5px auto;}
a img.alignright {float: right;margin: 5px 0 20px 20px;}
a img.alignnone {margin: 5px 20px 20px 0;}
a img.alignleft {float: left;margin: 5px 20px 20px 0;}
a img.aligncenter {display: block;margin-left: auto;margin-right: auto}


/* = IMAGE GRID
------------------------------------------------------------------------------------------*/

.image-grid {--gap: 10px; --num-cols: 4; --row-height: 220px; box-sizing: border-box; padding: var(--gap); display: grid; grid-template-columns: repeat(var(--num-cols), 1fr); grid-auto-rows: var(--row-height); gap: var(--gap); padding: 0;}

.image-grid img {width: 100%; height: 100%; object-fit: cover; transition: 200ms all ease-in-out;}
.image-grid div:nth-child(1) img {border-radius: 10px 0 0 10px;}
.image-grid div:nth-child(3) img {border-radius: 0 10px 0 0;}
.image-grid div:nth-child(5) img {border-radius: 0 0 10px 0;}

.image-grid div:nth-child(1) {grid-column: span 2; grid-row: span 2;}
.image-grid img:nth-child(1) {grid-column: span 2; grid-row: span 2;}
.image-grid-col-2 {grid-column: span 2;}
.image-grid-row-2 {grid-row: span 2;}
.image-grid div .more {display: none; white-space: nowrap;}
.image-grid div:nth-child(5) .more {display: block; border: 1px solid white; padding: 5px 10px; text-align: center; font-size: calc(var(--font-normal) - 4px);background: rgba(255,255,255,0.95); border-radius: 3px; transition: 200ms all ease-in-out;}
.image-grid div .more:hover, .image-grid div:nth-child(5):hover .centered {background: var(--color-orange-main); border: 1px solid var(--color-orange-main); cursor: pointer;}
.image-grid div:hover img {cursor: pointer; filter: brightness(0.7) ;}




/* =sidebar
------------------------------------------------------------------------------------------*/
aside{
    float: left;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 1px;
}

#sidebar > div {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-top: 20px;
}

.aside_container{
    float: left;
    width: 100%;
    padding: 20px 20px 20px 20px;
border-radius: 0px;
}

.aside_container h3{
    font-size: 16px;
    text-transform: uppercase;
    color: #fab700;
    font-weight: normal;
    text-align: center;
}

.aside_container  {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    margin: 0 0 0px 0;
}

.aside_container p+p{
    margin: 0;
}




aside .textwidget, aside .widget_about {
	font-style: normal;
}

aside .textwidget p {
	line-height: 1.5;
}

.widget_ci_book_room_widget .book-now-price {
	text-align: center;
	font-size: 14px;
}

.widget_ci_book_room_widget .book-now-price strong {
	font-weight: 700;
	font-size: 16px;
}


.tul{
    font-size: 13px;
    color: var(--color-text-main);
}

.tul li{
    clear: both;
    float: left;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #d2d2d2;
}

.tul li:last-child{
    border-bottom: none;
}

.tul span{
    float: left;
    width: 100%;
	color: #686868;
}



li.cat-item{
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #d2d2d2;
}

li.cat-item:last-child{
    border-bottom: none;
}

.widget ul li {
	font-size: 12px; display: inline;
}




/* =footer
------------------------------------------------------------------------------------------*/

#footer{
    display: block;
    padding: 20px 20px 60px 20px;
    color: white;
    margin-top: 0;
    background-color: var(--color-green-side);
    background-image: url("img/global/bg-pattern.svg");
    background-size: 600px 600px;
    text-align: center;
}

#footer .twelve.columns {margin: 10px 0;}

ul#menu-footer-menu{
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 15px 0;
    padding: 0;
}
ul#menu-footer-menu li {display: inline !important;}
ul#menu-footer-menu li a {padding: 5px 10px; margin: 5px; color: white !important; border-radius: 3px; border: 1px solid rgba(255,255,255,0); text-transform: uppercase; font-size: 13px;}
ul#menu-footer-menu li a:hover {border: 1px solid rgba(255,255,255,1);}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Stacked on mobile */
    gap: 10px;
    justify-content: center;
}
.footer-contact-list li {display: block;}
.footer-contact-list li a {font-size: 14px; color: white; padding: 5px 10px;}
.footer-contact-list li a:hover {color: white; text-decoration:none; background: var(--color-green-main);}
            
/* Desktop Styles */
@media (min-width: 768px) {
    .footer-contact-list {flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0;}
    .footer-contact-list li {display: flex;align-items: center;}
    .footer-contact-list li:not(:last-child)::after {content: "|";margin: 0 15px; color: rgba(255,255,255,0.5);}
}

#footer .footer-logo {display:block; }
#footer h3 {font-size: 18px; font-weight: normal; color: white; text-transform: uppercase;}

.goUp {padding: 10px 15px; margin: 0 auto; display: inline; position: relative; background: white; top: -40px; color: var(--color-text-main); box-shadow: 5px 5px 15px rgba(0,0,0,.1); border-radius: 3px;}
.goUp:hover {margin: 0 auto; position: relative; background: var(--color-green-light); top: -40px; color: white; box-shadow: 5px 5px 15px rgba(0,0,0,.1); cursor: pointer;}



/* =typo
------------------------------------------------------------------------------------------*/


ul#featured_list{
    display: block;
    float: left;
    margin: 10px 0 25px 15px;
    padding: 0;
    column-count: 2;
    width: 100%;
}

ul#featured_list li{
    font-size: var(--font-normal);
    margin: 0 0px 20px;
	display: block;
    padding-left: 10px;
    text-indent: -28px;
}
ul#featured_list li:before {
  content: "\f00c";
    font-family: 'FontAwesome'; 
    color: var(--color-green-side);
    margin-right: 10px;
}

ul#featured_list span{
    font-size: 16px;
    margin: 0 15px 10px 0;
	display: block;
}

blockquote p{
    font-size: 18px;
    text-align: center;
    margin: 0 0 10px 0;
    color: var(--color-text-main);
}

#amenities {display: grid;grid-template-columns: repeat(1, 1fr);grid-gap: 0px;margin: 10px 0;}
    @media (min-width: 560px) {#amenities { display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 20px; margin: 10px 10px;}}
    @media (min-width: 960px) {#amenities { display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;margin: 20px 0;}}

#amenities .item {
    border-left: 1px solid #efefef;
    padding: 0 20px;
}
#amenities .item:first-child {border-left: none;}
#amenities h3 {font-size: 18px; font-weight: 700; color: var(--color-text-main);}
#amenities p {font-size: 13px; color: var(--color-text-main); padding-bottom: 0px;}
#amenities img {width: 36px; float: left; margin: 0 20px 50px 0;}

@media (max-width: 560px) {
    #amenities .item {
    border-left: 0px;
    padding: 0 10px;}
    #amenities .item:first-child {border-left: none;}
    #amenities h3 {font-size: 16px; font-weight: 700; text-align: left; margin-bottom: 5px;}
    #amenities p {font-size: 13px; padding-bottom: 0px;}
    #amenities img {width: 36px; float: left; margin: 0 20px 50px 0;}
}


/* =table
------------------------------------------------------------------------------------------*/


table{
    float: left;
    width: 94%;
    font-size: 13px;
    margin: 20px 3%;
}

th{
    border-bottom: 1px solid #686868;
    border-right: 1px solid #DEDCD3;
    color: var(--color-text-main);
    font-weight: normal;
    padding: 2%;
}

td{
    border-bottom: 1px solid #d7d7d7;
    border-right: 1px solid #DEDCD3;
    text-align: center;
		padding: 5px;
}

th:last-child,
td:last-child{
    border-right: none;
}

tr:last-child td{
    border-bottom: none;
}

/* =img
------------------------------------------------------------------------------------------*/
.img_left{float: left;margin: 0 30px 30px 0;}

.img_center{float: none;display: block;margin: 0 auto;}

/*pagination links */
div.pagination a, .wp-pagenavi a, .wp-pagenavi a:visited, .wp-pagenavi span {
    float: left;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    color: var(--color-text-main);
    font-size: 12px;
    margin: 0 5px 0 0 !important;
    padding: 7px 9px !important;
    line-height: 1;
		border: none !important;
}

div.pagination a:hover, .wp-pagenavi a:hover{
    background-color: #EFEFEF;
		border-bottom: none;
		text-decoration: none;
}

div.pagination a.selected, .wp-pagenavi span.current{
    background-color: var(--color-text-main);
    color: #fff;
}


.twelve.columns.flexslider{
	padding: 0 0px !important; /*ovverriding the default flexslider values and getting it back to our grid */
}


.carousel_container{
	position: relative;
	margin: 0px  !important;
	background: white;
	border-radius: 2px;
	padding: 10px !important; /*ovverriding the default flexslider values and getting it back to our grid */
}

#carousel{
	width: 100%;
	position: relative;
	top: 0;
	background-color: white;
	padding: 0px 0px;
	overflow: hidden;
}

.flexslider .slides li.carousel_item{
	margin: 10px 5px 0px 5px !important;
	cursor: pointer;}
	
.flexslider .slides li.carousel_item:first-child{
	margin-left: 0px !important;}
.flexslider .slides li.carousel_item:hover {
	opacity:0.75;}
}