/* =screen booking 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1198px){

.bs1 { display:inline-block; width: 410px; height: 20px;vertical-align:top;}
.bs2 { display:inline-block; width: 240px; text-align: left;}

}

/* =ipad =1024 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px){

:root {
    --font-h1: 36px;
    --font-h2: 28px;
    --font-h3: 24px;
    --font-h4: 17px;
    --font-normal: 14px;
}    
    
.column, .columns{padding: 0 15px;}
.grid {margin: 0 10px;}

#navigation ul li a {margin: 0px 0px; font-size: 16px;}    
    
.booking_support {font-size: 11px; float: right;color: black;}

.bs1 { display:inline-block; width: 400px; height: 20px;vertical-align:top;}
.bs2 { display:inline-block; width: 240px; text-align: left;}
    
.table_container {width: 100%; margin: 20px 0 50px 0;    }
table {width: 100%; margin: 20px 0;}
div.pagination div.centered {width: 320px;}

/* home */
#features .feature h4 {font-size: var(--h4);} 
#features .feature p {font-size: var(--normal); line-height: 1;} 
#features .fa-2x {font-size: var(--h3);}    


/* location */
.location_services{padding: 50px 20px 20px 20px;    }

/* hotel / rooms */
.image-grid {--num-cols: 2; --row-height: 200px; padding: 0 10px;}
.image-grid div:nth-child(1) img {border-radius: 10px 10px 0 0;}
.image-grid div:nth-child(3) img {border-radius: 0;}
.image-grid div:nth-child(4) img {border-radius: 0 0 0 10px;}
.image-grid div:nth-child(5) img {border-radius: 0 0 10px 0;}

}


/* =ipad =768 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px){

.wis2-el.wis2-title.wis2-title--icon {}

.column, .columns{padding: 0 15px;}

/* navigation */    
.sidenav {display:block; height: 100%; padding: 0px; color: var(--color-text-main); width: 0; position: fixed; z-index: 100; top: 0; right: 0; background: var(--offwhite); overflow-x: hidden; transition: 0.5s;}   
.sidenav .closebtn { position: absolute; top: -10px; right: 10px; font-size: 56px; margin-left: 50px;}
.sidenav a.button {font-size: 1.5rem; ; text-align: center; }
    
ul#mobile-menu {margin: 50px 0;}
ul#mobile-menu li {display: block !important; width: 100%;}
ul#mobile-menu li a {display: block !important; width: 100%; font-weight: bold; padding: 10px; font-size: 2rem; text-align: center; color: var(--dark); text-transform: uppercase;}
    ul#mobile-menu li a:hover {color: var(--color-green-main); }
ul#mobile-menu li.menu-item-has-children ul {display: none;}
#header {display: none;}
#header-mobile {display: block;}
#header-mobile {position: absolute; top: 0; z-index: 2; left: 0; width: 100%; color: white;
background: linear-gradient(rgba(0,0,0,.5) 40%, rgba(0,0,0,0))}
#header-mobile #header-widget {display: block;}
    
#header-mobile .icon.left, #header-mobile .icon.right {text-align: center; margin: 10px; z-index: 2; }
#header-mobile .icon.right i, #header-mobile .head-small {color: white !important;}
#header-mobile .icon.left {float: left;}
#header-mobile .icon.right {float: right; right: 0; cursor: pointer;}
#header-mobile .icon.hamburger {float: right; right: 0; cursor: pointer; background: rgba(255,255,255,0.3); border-radius: 100%; height: 60px; width: 60px; text-align: center; box-shadow: 2px 2px 8px rgba(0,0,0,.3); backdrop-filter: blur(4px); color: white !important; transition: all 0.2s ease-in-out}
#header-mobile .icon.hamburger:hover {background: rgba(255,255,255,0.8); color: var(--color-green-light) !important;}
#header-mobile .icon.hamburger i {font-size: var(--font-h1); }
#header-mobile .logo {margin: 0px auto !important; top: 0px; position: relative; max-width: 200px; z-index: 3;}
    
    
    
.metaicon_room i {font-size: 16px;}
.metaicon_room {text-align: center; background: none !important; width: auto; float: none;
    display:inline-block; padding: 2px 10px !important; font-size: 11px;}
.metaicon_room_single { padding: 0 10px !important; font-size: 13px;}


#arrangements_home {display: none;}

/* maps */
iframe{max-width: 768px;}

/* home */
.welcome{padding: 0 15px 10px 0;}

.amenities{padding: 30px 15px 0 0;}

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

.amenities ul li{
    width: 135px;
    height: 50px;
    margin: 0 10px 10px 0;}


/* book */
.booking{
    height: auto;
    background: none;
    background-color: #f5f5f5;}

/* rooms intro */
.four.columns.vertical{margin: 50px auto 0 auto; text-align: center;}

.four.columns.vertical .room_intro, .room_intro{ float: none;
    width: 100%;
    margin: 0 0 20px 0;   
    padding: 0px }


/* location */
.location_services{margin: 0 auto 50px auto; padding: 50px 20px 20px 20px;    }


table{
    width: 100%;
    margin: 20px 0;
}

table a.button{
    float: none;
    width: 50px;
    font-size: 11px;
    margin: 10px auto;
    padding: 3px 0;
}

/* blog */


.entry ul li,
.entry ol li{
    width: auto;
    height: auto;
    margin: 0 0 5px 0;
} 


}

/* =ipad =768 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px){
.flex-direction-nav {display: none;}
/* home */

.header_text {
  	position: fixed;
  	top: 0px;
  	left: 0px;
  	z-index:99;
    float: left;
    }
.logo {
    height: 80px !important;
    z-index:100 !important
    }
#navigation {
    position:fixed !important;
}
#header_distance {height: 140px;}


.nomobile {display:none!important;}
.onlymobile {display:block!important;}

.nav_select{
    display: relative  !important;
    width: 100%;
    margin: 0px 0 20px 0  !important;
    top: -20px  !important;
}

#footer-line-widgets-right, #footer-line-widgets-left {display: block;}
#footer-line-widgets-right h3 {
	display: block;
	text-align: center;
}
#footer-line-widgets-right .textwidget, #footer-line-widgets-left .textwidget{display: block;}
.wysija-submit {
	display: block !important;
	float: right;
	position: relative;
	top: -20px;
	}
.wysija-submit-field, .widget_wysija_cont, .wysija-msg .ajax, #msg-form-wysija-2, #form-wysija-2 {display: block !important;text-align: center;}
.wysija-input {display: block !important; width: 100% !important;}

.logo{
    margin: 20px auto -30px auto !important;top: -22px; position: relative;}

.review {display:none;}

.feature-title {text-transform: none; font-size: 15px; padding-bottom: 15px; }
 
    

.footer {padding: 10px !important;}

    
    .room-entry {column-count: 1 !important;}

}
/* =iphone =580
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 580px){
    
b, strong {letter-spacing: 0 !important;}
    
:root {
    --font-h1: 26px;
    --font-h2: 22px;
    --font-h3: 18px;
    --font-h4: 15px;
    --font-normal: 15px;
    --font-medium: 12px;
    --font-small: 9px;
}

/* general */
.grid {margin: 0 0px; grid-gap: 10px;}
.grid > div, .grid > h1, .grid > h2, .grid > h3 {padding: 0 10px;}
.grid-5-1, .grid-4-1, .grid-3-1, .grid-2-1, .grid-1-1 {grid-template-columns: repeat(1, 1fr);}
.grid-5-2, .grid-4-2, .grid-3-2,.grid-2-2 {grid-template-columns: repeat(2, 1fr);}
.grid-6-3, .grid-5-3, .grid-4-3, .grid-3-3 {grid-template-columns: repeat(3, 1fr);}
.grid-5-4, .grid-4-4 {grid-template-columns: repeat(4, 1fr);}
.grid-5-5 {grid-template-columns: repeat(5, 1fr);}   
.wrap-120 {padding: 0 30px} 
    
.grid-padding {padding: 0 10px;}
    
#white {padding: 20px 0;}
    
.flex-direction-nav {display: none;}
.headerphoto {height: 400px; display:inline-block;overflow:hidden;}

b, strong {letter-spacing: normal !important;}
    
a.button, a.button2, a.buttongreen {padding: 5px 10px;}
    
    .swiper-button-next, .swiper-button-prev {display: none;}
    
#header-full, #header-full img {height: 400px;}
#header-half, #header-half img {height: 250px;}
#header-full.modern h1 {text-shadow: 1px 1px 15px rgba(0,0,0,.3); font-size: 3rem; margin-bottom: 10px;}
#header-full.modern .centered-bottom {width: 95%;}

span.button {width: auto; display: inline; font-size: 0.6rem; padding: 3px 6px;}

    #blog-posts h3 {margin-bottom: 5px;}
    
    .flex a.button {white-space: nowrap;}


    
    ul li {font-size: var(--normal);}
    
    

    
    #mySidenav {
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out; }

/* home */
    
/* hotel */
#hotel #text-image {grid-template-columns: repeat(1, 1fr);grid-gap: 20px;margin: 0px 0;}
.text-col {padding: 10px;}
#hotel #text-image:nth-of-type(even) > .text-col {order: 0;}
    
/* frühstück */ 
#breakfast #text-image {grid-template-columns: repeat(1, 1fr); grid-gap: 30px;}
#breakfast .text-col {padding: 0 10px;}
#breakfast #text-image .text-col {order: 1 !important;}
#breakfast #text-image .image-col {order: 0;}
#breakfast .sub-heading {font-size: var(--h1); position: relative; left: 0px; top: 0px; text-align: center;}
    
#breakfast-choice {margin: 10px 0;}
#breakfast-choice div {display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 0;}

#breakfast-choice img.icon {width: 40px; float: none; margin-right: 10px;}
#breakfast-choice .main {line-height: 1.2; font-size: var(--font-medium);}
#breakfast-choice .add {display: none;}
    

/* bildergalerie */  
#image-hover {padding: 0px; max-width: 100%;}
#image-hover > #block {border-radius: 0px; height: 100vh; width: 100vw;}
#image-hover > #block .header {padding: 0px 10px; height: 60px; border-bottom: 1px solid #efefef; display: flex; align-items: center; justify-content: space-between; font-size: var(--medium);}
#image-hover > #block .caption {font-size: var(--medium); margin: 5px 0 0px 0;}
#image-hover > #block ul li {margin-bottom: 15px;}

    #block {
        width: 100%;
        height: 100%; /* Full screen on mobile */
        border-radius: 0;
    }

#image-hover .images-grid {column-count: 1; column-gap: var(--radius-std);  padding: var(--radius-std);}


.grid-two-thirds {
    grid-column: 1 / span 2;max-width: 100vw; /* Set the maximum width to the viewport width */
  overflow: hidden;
    }    
    
.grid-one-two-thirds {grid-column-start: 2; grid-column-end: 3;}
    
/* --- HOME --- */
.booking-hint {margin: 15px 40px; font-size: var(--medium);}

#home-slideshow, #home-slideshow img {height: 450px; }
#home-slideshow #overlay {
    padding-bottom: 80px !important;
    transform: translate(-50%, 0);
    width: 100%;
    text-shadow: 0px 0px 7px rgba(0,0,0,.9);
    }
    #overlay h1 {letter-spacing: -1px;}

#booking-overlay   {padding: 10px; top: 0px;}
#booking-overlay .booking {padding: 10px;}
.wis2-el.wis2-input-group {padding: 5px!important;}
.wis2-panel.wis2-panel--horizontal {padding: 20px 0 !important;}
.wis2-el.wis2-button-hld {padding: 5px !important;}
    
#welcome #message {padding: 20px; }    
img.direktion {height: 60px; width: 60px;}    

#features .feature h4 {font-size: 12px;} 
#features .feature p {font-size: 10px; line-height: 1;} 
#features .fa-2x {font-size: 24px;}
    
#infobox-corona {margin: 10px; border-radius: 5px; font-size: 12px;}
#dreig {width: 70px; height: 70px; border-radius: 10px;}
#dreig img {width: 60px; height: 60px;}
#corona-band {font-size: 13px; padding: 10px}

/* homepage widget */
.widget_ci_page_widget, .widget_ci_posttype_widget {padding:0 !important;}
.ci_widget_room .text-overlay {bottom: 10px;left: 10px;}

    
/* --- HOTEL --- */
#intro-text {
    padding-left: 50px; margin-left: 10px;
  background-size: 40px auto; /* Scale the image to fit within the div */
  background-position: left 60px; /* Position the image on the right side and center vertically */
  background-repeat: no-repeat; /* Prevent the image from repeating */}

/* --- ROOMS TEMPLATE --- */
.room_vertical {max-height: auto !important; margin: 0 10px 10px 10px; border-radius: 0px; overflow: visible; height: inherit;}
.room_vertical .content {padding: 0px 25px 25px 25px;}
.room_vertical .image  {width: 100% !important; padding: 0;}
.room_vertical .image img {width: 100% !important; object-fit: cover;}
    
#sidebar > div {
    padding-top: 0px;
}
    
/* attraction */  
.attraction_single .content {padding: 10px; gap: 5px; font-size: 0.8rem;}
.attraction_single h3 {margin-bottom: 5px; font-size: 1.2rem;}

.attraction_single .category {top: 10px; left: 10px; padding: 3px 6px;font-size: 0.6rem;}

    
/* others */
#booking-wide {padding: 10px 20px; margin: 10px; width: auto; position: relative; top: -20px;}
#booking-room {margin: 20px 0;}

details {margin: 10px 0;}
details summary {padding: 10px 40px 10px 20px;} 
details summary:after {right: 20px;}
details p {margin: 0px 20px;}
    
ul.circle {font-size: var(--normal);}
    
.excerpt {display:none;}

#header-image {height: 300px;}
    
#reviews-grid {width: 100%; overflow: scroll; grid-template-columns: repeat(4, 1fr) !important; margin: 20px 0;scroll-snap-type: x mandatory; scrollbar-width: none;}
#reviews-grid #testimonial {width: 250px; padding: 5px 15px; box-shadow: none; border: 1px solid #efefef; scroll-snap-align: start; scroll-snap-stop: always;}
#reviews-grid #testimonial .testimonial-content {font-size: var(--small);}

.welcome img {
		display: block;
		width: 100%;
		margin-bottom: 20px;}
    


/* ROOM */
#testimonials {height: 260px;}
.testimonial-title {font-size: 16px;}
.testimonial-rating {font-size: 18px; margin-top:15px; }

#room-rating-preview {font-size: 10px;}
    
#room-rating-preview .avg {background: var(--color-green-main); color: white; padding: 3px; border-radius: 3px 3px 3px 0;}
    
.image-grid {
	--row-height: 100px;
	--gap: 5px;
}

.slides img {object-fit: cover;}
#slider .slides li {padding: 0 !important;}


#slider {
	margin: 0px !important;
	color: #FFF;
	position: relative;
	top: 0px;}

ul#menu-footer-menu li, ul#menu-fussmenue li{
    margin: 0 0px 0px 10px;
    line-height: 1.0;
	display: inline !important;
	transition: all ease 0.18s;
	font-size: 11px !important;
}

.contact li {
    list-style: outside none none;
    padding:0px 10px 10px 0px; 
    display: table-cell;
    vertical-align: middle;}
    
ul#contact-line {padding: 20px;}
ul#contact-line li {display: block; margin: 10px;}
ul#contact-line a {font-size: var(--normal);}


#footer-line-widgets-right {text-align: left;}

#meta_roominfo {height: auto;}

#prefooter, #prefooter h3, #prefooter h2 {text-align:center !important;}
#prefooter .contact {text-align: left !important;}

/* room */

#mainwrapper .grid.grid-4-4{overflow: scroll;}
#mainwrapper .grid.grid-4-4 #offer_single {min-width: 300px;}
    
.seven.columns.room-slider {padding: 0 !important;}
.carousel_container > #slider ul.slides img {height: 300px; object-fit: cover; overflow: hidden;}

    
iframe{max-width: 480px;}

.top p, 
ul#misc,
.nav ul{
    display: none;}

.top p.slide{
    display: block;}

#header-widget { font-size: 16px;}

.logo{
    margin: 20px auto -30px auto !important;
    top: -22px; position: relative;
    z-index:1;}

.amenities{
    padding: 10px 0 0 0;
    border-right: none;
}

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

.amenities ul li{
    width: 125px;
    height: 15px;
    margin: 0 10px 10px 0;
}

/* room intro */
.room_intro{
    float: none;
    width: 100%;
    margin: 0px;   
    padding: 0px;}
    
.room_intro h3 {margin-bottom:10px;}
.room_intro .image {margin-bottom:10px}
.room_intro p {margin-bottom:10px}    
    
.metaicon_room i {font-size: 16px; color: #7cb518}
.metaicon_room {text-align: center; background: none !important; width: auto; float: none;
    display:inline-block; padding: 2px 10px !important; font-size: 11px !important;}
#meta_room {margin-bottom: 10px;}
.metaicon_room_single { padding: 0 10px !important; font-size: 12px;}

/* room */

ul#featured_list{
    overflow: none;
    max-width: 100%;
    column-count: 1;
    margin: 10px 20px;
}

ul#featured_list li{
    padding-left: 10px;
    text-indent: -27px;
    margin: 0 0px 10px;
}

#image-hover ul {display: grid; grid-template-columns: repeat(1, 1fr);grid-gap: 10px;}
#image-hover img {max-width: 100%;}

div.pagination div.centered{
    width: 380px;}

/* location */
.location_services{
    padding: 50px 20px 20px 20px;    }

dl dd{
    width: 250px;}

/* contact */
.contact_form input{
    width: 80%;
    clear: both;}

.contact_form textarea{
    clear: both;}

/* footer */
.footer h4{
    margin: 20px 0 10px 0;}

.slide_description{top: 50%; }
.slide_description h2{font-size: 28px; line-height: 0.8;}
.slide_description p{font-size: 12px; line-height: 1.1;}

#footer_mobile {
	display: block !important;
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    z-index:999;
    border-top: 1px solid rgba(100,100,100,0.5);}
#footer_mobile a.footer_phone {
	width: 100%;
    background: #fab700;
    display:block;
    padding: 10px 30px;
    font-size: 20px;
    text-align: center;}
#footer_mobile a.footer_phone:hover{
	color: #000;
	background: #fac700;}
	
.booking_support {font-size: 11px; float: right;color: black;background: #f3ce56; width: 100%; padding: 0px 10px;}

.bs1 { display:block; width: auto;text-align: right;}
.bs2 { display:block; width: auto; text-align: right;} 
 
.features .feature h3 {font-size: 14px !important; }
.features .icon-preview {margin: 0 auto; width: 126px;display: inline-block;padding: 5px 0px;}
.feature {padding-top: 0px;}
.features h1 { text-transform: uppercase; font-size: 22px; font-weight: bold;}
.features .feature { width: 130px;display:inline-block}
.features {text-align: center; width: 100%;}
.feature.last {margin-right: 6px !important;}
.features .feature-content { font-size: 11px; display: none !important;}

.slide_description{top: 50%; }
.slide_description h2{font-size: 24px; line-height: 0.9;}
.slide_description p{font-size: 14px !important; line-height: 1.0;}

.widget_ci-hero.widget-padded .widget-wrap {padding: 30px 0;}

/* maps */
iframe{max-width: 320px;}

.top p,  ul#misc, .nav ul{ display: none;}
.top p.slide{display: block;}

/* home */
.amenities ul li{
    width: 110px;
    height: 50px;
    margin: 0 5px 50px 0;}


.box {padding: 0; margin: 0;}
#abstand {height: 0px;}
.logo{
    margin: 20px auto -30px auto !important;
    top: -22px; position: relative;
    z-index:1;}

/*pagination links */
div.pagination a{
    width: 16px;
    margin: 0px 5px 0 0;
    padding: 4px 0;
}

div.pagination span{
    width: 16px;
    height: 16px;
}

/* location */
.service{width: 100%;}

dl dd{width: 100%;}
dl dt{display: none;}

/* contact */
.contact_form input{
    clear: both;
    width: 220px;
}

.contact_form textarea{clear: both;width: 260px}

}