/*
 * File: /screen.css
 * Created Date: Friday, 05.04.19, 18:07:47
 * Author: Stephan Romhart
 * -----
 * Last Modified: Monday, 07.02.2022 17:05:51
 * Modified By: Stephan Romhart
 * -----
 * Copyright (c) 2022 kreisform GmbH
 */


@charset "utf-8";


/*** Reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:300;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:300;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
} 
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
table{
	border-collapse: collapse;
}
*,*::before,*::after{
	box-sizing:border-box;
}


/*** Fonts */

@font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 300;
	src:url('../fonts/catamaran-v8-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 400;
	src:url('../fonts/catamaran-v8-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 700;
	src:url('../fonts/catamaran-v8-latin-700.woff2') format('woff2');
}


/*** Variablen */

:root{
	font-size:10px;
	
	--weiss:#ffffff;
	--weiss-50:rgba(255,255,255,0.5);
	--weiss-20:rgba(255,255,255,0.2);
	--weiss-10:rgba(255,255,255,0.1);
	--weiss-t0:rgba(255,255,255,0);
	--hellgrau:#eeeeee;
	--mittelgrau:#dddddd;
	--grau:#888888;
	--dunkelgrau:#999999;
	--grau-placeholder:#aaaaaa;
	
	--cyan:#54cbe9;
	--hellcyan:#def6fa;
	
	--hellgruen:#b8ecfa;
	--dunkelgruen:#20839f;
	--hellrot:#f0cdd2;
	--dunkelrot:#ac360d;
	
	--orange:#3f5fd8;
	
	--header-height:17rem;
	--main-width:110rem;
	--content-padding:2rem;
	--slider-height:60rem;
}


/*** Global */

::-moz-selection{
	color:var(--weiss);
	background-color:var(--grau);
}
::selection{
	color:var(--weiss);
	background-color:var(--grau);
}
.video-container{
	position:relative;
	padding-bottom:56.25%;
	padding-top:3rem;
	height:0;
	overflow:hidden;
}
.video-container iframe,
.video-container object,
.video-container embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
section{
	padding:8rem calc((100% - var(--main-width))/2);
	text-align:center;
	border-top:0.1rem solid var(--mittelgrau);
}
section > *:last-child{
	margin-bottom:0 !important;
}
section figure img{
	width:100%;
	height:auto;
	display:block;
}
body{
	font-size:2rem;
	font-family:'Catamaran',sans-serif;
	font-weight:300;
	line-height:1.4;
	color:var(--grau);
	background-color:var(--hellgrau);
}
.link{
	display:flex;
	justify-content:center;
	padding-top:5rem;
}
.link a{
	position:relative;
	background-color:var(--dunkelgrau);
	background-repeat:no-repeat;
	background-size:1.2rem 1.2rem;
	background-position:center right 1.5rem;
	border-radius:1rem;
	border-radius:500px;
	color:var(--weiss);
	padding:0.75rem 4rem 0.75rem 2rem;
	transition:all 0.3s ease-in-out;
}
.link a::after{
	content:'';
	position:absolute;
	right:2rem;
	top:50%;
	width:1rem;
	height:1rem;
	border-right:2px solid var(--weiss);
	border-bottom:2px solid var(--weiss);
	transform:translateY(-50%) rotate(-45deg);
}
h1{
	font-size:4rem;
	line-height:1.1;
	margin-bottom:5rem;
	color:var(--grau);
	color:var(--cyan);
	position:relative;
}
h2{
	display:inline-block;
	position:relative;
	font-size:3rem;
	line-height:1.1;
	margin-bottom:4rem;
	color:var(--grau);
}
h3{
	font-size:2.5rem;
	line-height:1.1;
	margin-bottom:1rem;
}
p{
	margin-bottom:3rem;
}
p.teaser{
}
p a{
	color:var(--cyan);
}

table{
	width:100%;
	margin-bottom:3rem;
}
table tr th,
table tr td{
	padding:1rem 0;
	border-top:1px solid var(--weiss);
	text-align:left;
}
table{
	border-top:0.2rem solid var(--cyan);
	border-bottom:0.2rem solid var(--cyan);
}
table tr{
	background-color:var(--weiss-50);
}
table tr:nth-child(even){
	background-color:var(--weiss-20);
}
table tr th{
	background-color:var(--weiss);
}
table tr th,
table tr td{
	text-align:right;
	padding:1rem;
}
table tr th:first-child,
table tr td:first-child{
	text-align:left;
	font-weight:400;
	color:var(--cyan);
}
form input,
form textarea{
	width:100%;
	padding:1rem 2rem;
	border:1px solid var(--weiss);
	background-color:var(--weiss);
	border-radius:0.5rem;
	font-family:'Catamaran',sans-serif;
	font-size:2rem;
	color:var(--grau);
	outline:none;
}
form textarea{
	min-height:20rem;
}
form input:focus,
form textarea:focus{
	border-color:var(--cyan);
}
form div{
	margin-bottom:2rem;
}
form div.inline input{
	width:auto;
}
form div.submit{
	border-top:1px solid var(--weiss);
	padding-top:3rem;
	margin-top: 3rem;
}
.button{
	background-color:var(--cyan);
	color:var(--weiss);
	width:auto;
	border-radius: 500px;
	padding:1rem 5rem 1rem 3rem;
	cursor: pointer;
	border:0;
	position: relative;
	font-size:2rem;
	font-family:'Catamaran',sans-serif;
	transition:all 0.2s ease-in-out;
}
.button::after{
	content:'';
	position: absolute;
	right:2rem;
	top:50%;
	width:1rem;
	height:1rem;
	border-right:1px solid var(--weiss);
	border-bottom:1px solid var(--weiss);
	transform: translateY(-50%) rotate(-45deg);
}


/*** Header */

header{
	width:100%;
	height:var(--header-height);
	background-color:var(--weiss);
	position:fixed;
	left:0;
	top:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	border-bottom:0.75rem solid var(--mittelgrau);
	z-index:200;
	box-shadow:0 0 1rem rgba(0,0,0,0.1);
}
header h3{
	margin:0;
}
header h3 a{
	display:block;
	width:15rem;
	height:11rem;
	background-image:url('../images/logo-3.png');
	background-repeat:no-repeat;
	background-size:80%;
	background-position:center 2.5rem;
}
header h3 a span{
	display:none;
}
header nav ul{
	display:flex;
	justify-content:center;
}
header nav ul li{
	position:relative;
	padding:0 1rem;
}
header nav ul li::after{
	content:'';
	position:absolute;
	top:50%;
	right:0rem;
	width:0.3rem;
	height:0.3rem;
	background-color:var(--grau);
	border-radius:50%;
	transform:translate(0,-50%);
}
header nav ul li:last-child::after{
	content:none;
}
header nav ul li a{
	display:block;
	color:var(--grau);
	line-height:5rem;
	padding:0 1rem;
	transition:all 0.3s ease-in-out;
}
header nav ul li a.active{
	color:var(--cyan);
}



/*** - Galerie */

section .galerie{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-gap:1rem;
	padding:0;
	margin-bottom:3rem;
	border:0;
}


/*** - Keyvisual */

section.keyvisual{
	padding:0 !important;
	display:flex;
	overflow:hidden;
	position:relative;
	border:0;
	background-color:var(--hellcyan);
}
section.keyvisual .scroll-down{
	z-index:55;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:5rem;
	width:5rem;
	height:5rem;
	border-radius:50%;
	cursor:pointer;
	background-size:1.5rem 1.5rem;
	background-repeat:no-repeat;
	background-position:center center;
	background-color:rgba(255,255,255,0.8);
	box-shadow:0 0 1rem rgba(0,0,0,0.1);
	transition:all 0.4s ease-in-out;
}
section.keyvisual .scroll-down::before{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	width:1rem;
	height:1rem;
	border-bottom:2px solid var(--grau);
	border-right:2px solid var(--grau);
	transform:translate(-50%,-65%) rotate(45deg);
}
body#impressum section.keyvisual,
body#datenschutz section.keyvisual,
body#buchungs-und-stornobedingungen section.keyvisual{
	display:none;
}


.notransition{
	transition:none !important;
}

.kfImageFader{
	--arrowWidth:4rem;
	width:100%;
	position:relative;
	height:var(--slider-height);
	padding:0;
	margin:0;
}
.kfImageFader .arrow{
	position:absolute;
	width:var(--arrowWidth);
	height:var(--arrowWidth);
	top:50%;
	z-index:20;
	background-color:rgba(200,200,200,0.5);
	border-radius:50%;
	transform:translateY(-50%);
	cursor:pointer;
}
.kfImageFader .arrow::after{
	content:'';
	width:1rem;
	height:1rem;
	border-left:0.2rem solid black;
	border-bottom:0.2rem solid black;
	position:absolute;
	left:50%;
	top:50%;
}
.kfImageFader .arrow.arrow-left{
	left:calc(var(--arrowWidth) / 2 * -1);
}
.kfImageFader .arrow.arrow-left::after{
	transform:translate(-40%,-50%) rotate(45deg);
}
.kfImageFader .arrow.arrow-right{
	right:calc(var(--arrowWidth) / 2 * -1);
}
.kfImageFader .arrow.arrow-right::after{
	transform:translate(-60%,-50%) rotate(225deg);
}
.kfImageFader .overflow{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:var(--slider-height);
}
.kfImageFader ul{
	display:flex;
	width:100%;
	height:var(--slider-height);
	position:absolute;
	left:0;
	top:0;
}
.kfImageFader ul li{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:var(--slider-height);
	z-index:1;
	transition:opacity 0.5s ease-in-out;
}
.kfImageFader ul li a{
	display:block;
}
.kfImageFader ul li img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.kfImageFader ul li .container{
	position:absolute;
	right:2rem;
	bottom:2rem;
	width:50%;
	background-color:rgba(255,255,255,0.5);
	padding:1rem;
	border-radius:0.5rem;
}
.kfImageFader ul li .container h3{
	font-weight:700;
	font-size:3rem;
}
.kfImageFader ol.pager{
	position:absolute;
	left:50%;
	bottom:2rem;
	display:flex;
	transform:translateX(-50%);
	z-index:30;
}
.kfImageFader ol.pager li{
	padding:0 1rem;
	cursor:pointer;
}
.kfImageFader ol.pager li span{
	display:block;
	width:1rem;
	height:1rem;
	background-color:var(--weiss);
	border-radius:50%;
}
.kfImageFader ol.pager li.active span{
	background-color:var(--cyan);
}


/*** Content */

main{
	width:100%;
	margin-top:var(--header-height);
}


/*** Intro */

section.intro{
	background-color:var(--weiss);
}
section.intro p.block-5{
	margin-left:10%;
	margin-right:10%;
}
section.intro p.link a{
	background-color:var(--cyan);
	background-image:url('../images/kalender.svg');
	background-position:center 5rem;
	background-size:3.5rem 3.5rem;
	border-radius:50%;
	padding:3rem 0 0 0;
	color:var(--weiss);
	width:20rem;
	height:20rem;
	display:flex;
	align-items:center;
	justify-content:center;
	border:0.5rem solid rgba(255,255,255,0.5);
}
section.intro p.link a::after{
	content:none;
}


/*** Infos */

section.infos{
	display:grid;
	grid-gap:2rem;
	grid-template-columns:1fr 1fr;
	background-color:var(--hellgrau);
	background-image:url('../images/AdobeStock_82584132.jpg');
	background-size:cover;
}
section.infos .spalte{
	background-color:var(--weiss);
	border-top:0.3rem solid var(--mittelgrau);
	padding:4rem;
	border-radius:0.5rem;
	position:relative;
}

section.infos .spalte figure{
	margin-bottom:2rem;
}
section.infos h2::after{
	content:none;
}
section.infos ul li{
	border-bottom:0.1rem solid rgba(255,255,255,0.5);
	padding:1rem;
	position:relative;
}
section.infos ul li::after{
	content:'';
	width:0.4rem;
	height:0.4rem;
	position:absolute;
	left:50%;
	bottom:-0.2rem;
	border-radius:50%;
	background-color:var(--cyan);
	transform:translate(-50%,0);
}
section.infos ul li:last-child{
	border-bottom:0;
}
section.infos ul li:last-child::after{
	content:none;
}


/*** Preise */

section.preise p.notice{
	font-size:1.4rem;
}


/*** Highlights */

section.highlights{
	background-color:var(--weiss-20);
	background-color:var(--weiss);
}
section.highlights ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:Center;
}
section.highlights ul li{
	padding:1rem 2rem;
	background-color:var(--cyan);
	color:var(--weiss);
	border-radius:500px;
	margin:0 0.5rem 1rem 0.5rem;
	line-height:1.2;
}


/** - Startseite Belegung */

section.belegung{
	background-color:var(--weiss);
}
/*
section.belegung div{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:3rem;
}
*/
section.belegung div.table-scrollable-fade > a{
	display:inline-block;
	background-color:var(--mittelgrau);
	color:var(--grau);
	font-family:'Catamaran';
	cursor:pointer;
	padding:1rem 2rem;
}
section.belegung div.table-scrollable-fade > a.aktiv{
	background-color:var(--hellgruen);
	font-weight:700;
}

.table-scrollable {
	width:100%;
	overflow-y:auto;
}

section.belegung table.month{
	border-top:0.3rem solid var(--hellgruen);
	border-bottom:0.3rem solid var(--mittelgrau);
	width:100%;
	border-spacing:0.2rem;
	border-collapse:separate;
}
section.belegung table.month caption{
	text-align:center;
	color:var(--grau);
}
section.belegung table.month th,
section.belegung table.month td{
	background-color:var(--hellgruen);
	padding:0.3rem;
	width:3rem;
	text-align:center;
	color:var(--dunkelgruen);
	font-size:1.4rem;
}
section.belegung table.month th{
	color:var(--grau);
	background-color:rgba(255,255,255,0.4);
}
section.belegung table tr td.gebucht{
	background-color:var(--hellrot);
	background-size:cover;
	color:var(--dunkelrot);
}
section.belegung table tr td.start{
	background:linear-gradient(135deg,var(--hellgruen) 0%,var(--hellgruen) 50%,var(--hellrot) 51%,var(--hellrot) 100%);
}
section.belegung table tr td.ende{
	background:linear-gradient(135deg,var(--hellrot) 0%,var(--hellrot) 50%,var(--hellgruen) 51%,var(--hellgruen) 100%);
}
section.belegung table tr td.start.ende{
	background:linear-gradient(135deg,var(--hellrot) 0%,var(--hellrot) 45%,var(--hellgruen) 45%, var(--hellgruen) 55%,var(--hellrot) 55%,var(--hellrot) 100%);
}
section.belegung p.link{
	padding-top:3rem;
}
.icon-table-scrollable{
	margin:1rem auto;
	padding:0 !important;
	width:15rem;
	display:none;
}


/*** Video */

section.video{
	/*
	background-image:url('../images/AdobeStock_82584132.jpg');
	background-size:cover;
	*/
}
section.video .video-container{
	border:1rem solid rgba(255,255,255,0.4);
}
section.video h2{
	/*
	color:var(--weiss);
	*/
}


/*** Ausstattung-Listen */

section.ausstattung-listen{
	display:grid;
	grid-gap:2rem;
	grid-template-columns:1fr 1fr;
}
section.ausstattung-listen.einspaltig{
	grid-template-columns:1fr;
}
section.ausstattung-listen > h2{
	/* grid-column: 1 / span 3; */
	grid-column: 1 / span 2;
	color:var(--cyan);
}
section.ausstattung-listen.einspaltig > h2{
	grid-column: 1;
}
section.ausstattung-listen > h2 {
	/*border-bottom:4px solid var(--weiss);*/
	text-decoration:underline;
	text-decoration-color:var(--weiss);
	text-decoration-thickness:4px;
	text-underline-offset:5px;
}
section.ausstattung-listen .col{
	border:0;
	padding:0;
	margin-bottom:4rem;
}
section.ausstattung-listen .raum{
	border:0;
	border-top:2px solid var(--cyan);
	padding:0 0 2rem 0;
	background-color:var(--weiss);
}
section.ausstattung-listen .raum figure{
	margin-bottom:2rem;
}
section.ausstattung-listen .raum figure + figure{
	margin-top:-1.5rem;
}
section.ausstattung-listen .raum h2{
	color:var(--cyan);
	margin-bottom:2rem;
	font-size:2.3rem;
}
section.ausstattung-listen .raum ul li{
	position:relative;
	margin-bottom:2rem;
	font-size:1.8rem;
}
section.ausstattung-listen .raum ul li::after{
	content:'';
	position:absolute;
	left:50%;
	bottom:-1rem;
	width:2rem;
	height:1px;
	background-color:var(--cyan);
	transform:translateX(-50%);
}

section.ausstattung-listen .extras{
	grid-column:1 / span 2;
	border:0;
	padding:0;
}
section.ausstattung-listen .extras ul li{
	position:relative;
	margin-bottom:2rem;
	font-size:1.8rem;
}
section.ausstattung-listen .extras ul li::after{
	content:'';
	position:absolute;
	left:50%;
	bottom:-1rem;
	width:2rem;
	height:1px;
	background-color:var(--cyan);
	transform:translateX(-50%);
}

section.lage-bereiche{
	background-color:var(--weiss-50);
}
section.lage-bereiche h2{
	color:var(--cyan);
	border-bottom:4px solid var(--weiss);
}
section.lage-bereiche ul{
	display:flex;
	justify-content:center;
	margin-bottom:3rem;
}
section.lage-bereiche ul li{
	padding:1rem 1.5rem;
	background-color:var(--weiss);
	color:var(--cyan);
	border-radius:500px;
	margin:0 0.5rem 0 0.5rem;
}




section.prosa{
	background-color:var(--weiss-50);
}



/** - Buchungsanfrage */

section.buchungsanfrage div.website{
	display:none;
}
section.buchungsanfrage div.von-bis label{
	margin-right:1rem;
}
section.buchungsanfrage div.von-bis label:nth-of-type(2){
	margin-left:2rem;
}
section.buchungsanfrage input::placeholder,
section.buchungsanfrage textarea::placeholder{
	color:var(--grau-placeholder);
}
section.buchungsanfrage p.bedingungen{
	padding-top:4rem;
}
section.buchungsanfrage p.fehler{
	background-color:var(--hellrot);
	padding:2rem;
	border-radius:1rem;
	color:var(--dunkelrot);
	font-weight:700;
}
section.buchungsanfrage figure.erfolg{
	width:7rem;
	display:inline-block;
	margin-bottom:3rem;
}





/** - Rechtliches */

section.rechtliches h2{
	margin-bottom:1rem;
}
section.rechtliches h3{
	text-decoration:underline;
	text-decoration-color:var(--cyan);
	text-decoration-thickness:2px;
	text-underline-offset:3px;
}
section.rechtliches h4{
	font-weight:700;
}


/** - Buchungsbedingungen */

section.buchungsbedingungen{
	margin-left:5%;
	margin-right:5%;
}
section.buchungsbedingungen ol{
	list-style:lower-latin;
	list-style-position:inside;
}
section.buchungsbedingungen ol li{
	margin-bottom:1rem;
	background-color:var(--weiss);
	padding:1rem;
	border-radius:1rem;
}



/*** Footer */

footer{
	width:100%;
	background-color:var(--weiss);
}
footer section{
	border:0;
	padding:0;
}
footer div.karte{
	height:60rem;
	background-color:var(--cyan);
}
footer div.karte a{
	display:flex;
	height:100%;
	width:100%;
}
footer div.karte a img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:flex;
}
footer nav ul{
	display:flex;
	justify-content:center;
}
footer nav ul li{
	padding:0 1rem;
	font-size:1.6rem;
}
footer section.contact{
	padding:6rem 0 4rem 0;
	border-top:0.5rem solid var(--mittelgrau);
}
footer section.contact nav ul li a{
	color:var(--grau);
	font-size:1.6rem;
	padding:0.5rem 2rem 0.5rem 4.5rem;
	border:0.1rem solid var(--grau);
	border-radius:500px;
	background-repeat:no-repeat;
	background-position:2rem center;
	background-size:1.7rem;
	transition:all 0.3s ease-in-out;
	width:25rem;
	display:inline-block;
}
footer section.contact nav ul li a.mail{
	background-image:url('../images/mail.svg');
}
footer section.contact nav ul li a.phone{
	background-image:url('../images/phone.svg');
}
footer section.legal{
	border-bottom:0.1rem solid var(--mittelgrau);
	padding:3rem 0;
}
footer section.legal nav ul li a{
	color:var(--grau);
	font-size:1.6rem;
}
footer section.social-media{
	border-bottom:0.1rem solid var(--mittelgrau);
	padding-bottom:5rem;
}
footer section.social-media ul li a{
	display:block;
	width:5rem;
	height:5rem;
	background-image:url('../images/facebook.svg');
	background-size:cover;
}
footer section.social-media ul li a.facebook{
	background-image:url('../images/facebook.svg');
}
footer section.social-media ul li a.twitter{
	background-image:url('../images/twitter.svg');
}
footer section.social-media ul li a.instagram{
	background-image:url('../images/instagram.svg');
}
footer section.social-media ul li a.youtube{
	background-image:url('../images/youtube.svg');
}
footer section.social-media ul li a span{
	display:none;
}
footer section.kf{
	background-color:#e3d8c9;
	background-color:var(--weiss);
}
footer section.kf a{
	font-size:1.4rem;
	color:var(--grau);
	line-height:4rem;
}


/*** Mobile Menu */

#mobile-menu{
	position:absolute;
	left:var(--content-padding);
	top:50%;
	transition:all 0.4s ease-in;
	transform:translateY(-50%);
	z-index:1000;
}
#mobile-menu a{
	display:block;
	width:3rem;
	height:3rem;
	position:relative;
	border:0;
}
#mobile-menu a span{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	transform-origin:0 0;
	background-color:var(--grau);
	width:calc(4rem * 0.8);
	height:calc(4rem * 0.06);
	height:0;
	border-bottom:2px solid var(--grau);
	transition:all 0.5s ease-in-out;
}
#mobile-menu a span:nth-of-type(1){
	top:20%;
}
#mobile-menu a span:nth-of-type(2){
	top:50%;
}
#mobile-menu a span:nth-of-type(3){
	top:80%;
}
#mobile-menu.open a span:nth-of-type(1){
	top:50%;
	transform:rotate(45deg) translate(-50%,-50%);
}
#mobile-menu.open a span:nth-of-type(2){
	opacity:0;
	transition:all 0.1s ease-in-out;
}
#mobile-menu.open a span:nth-of-type(3){
	top:50%;
	transform:rotate(-45deg) translate(-50%,-50%);
}
#mobile-menu-plain{
	width:100%;
	height:11rem;
	background-color:var(--weiss);
	position:fixed;
	top:0;
	left:-100%;
	z-index:100;
	display:flex;
	align-items:center;
	transition:left 0.7s ease-in-out;
}
#mobile-menu-content{
	width:100%;
	height:100vh;
	background-color:var(--weiss);
	position:fixed;
	top:0;
	left:-100%;
	z-index:150;
	display:flex;
	align-items:center;
	transition:left 0.7s ease-in-out;
}
#mobile-menu-content.open,
#mobile-menu-plain.open{
	left:0;
}
#mobile-menu-content ul{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	margin-top:5rem;
}
#mobile-menu-content ul li{
	flex:0 0 100%;
	transition:all 0.5s ease-in-out;
}
#mobile-menu-content ul li.page-2,
#mobile-menu-content ul li.page-3{
	display:none;
}
#mobile-menu-content ul li a{
	display:block;
	padding:0;
	font-size:4rem;
	padding:0.5rem 0;
	text-align:center;
	position:relative;
	color:var(--cyan);
}
#mobile-menu-content ul li ul{
	margin:0;
}


/*** Media Queries */


/** - Hovers */

@media screen and (hover:hover)
{
	p a:hover{
		text-decoration:underline;
	}
	.link a:hover{
		background-color:var(--cyan);
	}
	p.link a.button:hover{
		text-decoration:none;
	}
	section.intro .link a:hover{
		background-color:var(--grau);
	}
	section.keyvisual .scroll-down:hover{
		background-color:rgba(255,255,255,0.8);
	}
	header nav ul li a:hover{
		color:var(--cyan);
	}
	footer section.contact nav ul li a:hover{
		border-color:var(--cyan);
	}
	.button:hover{
		background-color:var(--grau);
	}
}


/** - Alte Desktop und Skalierte UI */

@media screen and (max-width:1400px){
	:root{
		--main-width:100rem;
		--slider-height:50rem;
	}
}

/** - Tablet Start Hamburger Menu */

@media screen and (max-width:1024px){
	:root{
		--header-height:12rem;
		--content-padding:4rem;
	}
	header{
		border-bottom-width:0.5rem;
	}
	header nav{
		display:none;
	}
	header h3,
	header h3 a{
		height:100%;
		background-position:center center;
	}
	section.keyvisual .scroll-down{
		display:none;
	}
	main section{
		padding:var(--content-padding);
	}
	section.infos div{
		padding:2rem;
	}
	main section.galerie{
		padding:0;
	}
	main section.ausstattung-listen .col {
		border: 0;
		padding: 0;
	}
	main section.ausstattung-listen .raum {
		padding: 0 0 2rem 0;
	}
}


/** - Tablets */

@media screen and (max-width:950px){
	section.lage-bereiche .galerie {
		grid-template-columns:1fr;
		padding-left:0;
		padding-right:0;
	}
	section.lage-bereiche .galerie figure{
		margin-bottom:0.5rem;
	}
	.table-scrollable-fade{
		position:relative;
	}
	.table-scrollable-fade::before{
		content:'';
		width:3rem;
		height:95%;
		position:absolute;
		right:0;
		top:0;
		background:linear-gradient(90deg,var(--weiss-t0) 0%, var(--weiss) 100%);
		z-index:5;
	}
	.icon-table-scrollable{
		display:block;
	}
}

@media screen and (max-width:900px){
	p.teaser{
		margin-left:0;
		margin-right:0;
	}
	section.intro p.block-5{
		margin-left:0;
		margin-right:0;
	}
	section.infos{
		grid-template-columns:1fr;
	}
	footer div.karte{
		height:50rem;
	}
}

@media screen and (max-device-width:767px) and (orientation:landscape){
	#turn-your-phone{
		display:grid;
	}
}

@media screen and (max-width:650px){
	section.ausstattung-listen{
		grid-gap:1rem;
		grid-template-columns:1fr;
	}
	section.ausstattung-listen > h2 ,
	section.ausstattung-listen .extras{
		grid-column: 1;
	}
}


/** - Smartphones */

@media screen and (max-width:550px){
	:root{
		font-size:9px;
		--header-height:12rem;
		--content-padding:2rem;
		--slider-height:30rem;
	}
	h1{
		margin-bottom:3rem;
	}
	table tr th,
	table tr td{
		padding:1rem 0.5rem;
		font-size:1.7rem;
	}
	section{
		padding-top:5rem;
		padding-bottom:5rem;
	}
	section.intro p{
		padding:0;
	}
	section.belegung > div{
		padding-top:3rem;
	}
	#mobile-menu-content ul li a{
		font-size:3rem;
	}
	footer section.contact nav ul,
	footer section.contact nav ul li{
		display:block;
	}
	footer section.contact nav ul li{
		padding:0 0 2rem 0;
	}
	footer div.karte{
		height:30rem;
	}
	footer section.legal nav ul,
	footer section.legal nav ul li,
	footer section.legal nav ul li a{
		display:block;
		line-height:3rem;
	}
}

@media screen and (max-width:380px){
	:root{
		--header-height:10rem;
	}
}