/*UNIVERSAL STYLES*/


/*SLIDER*/

.slider_window {
margin-top: 1em;
background-color: lightgrey; 
width: 100%;
height: 35vw;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}

.slider_window ul li {
display: inline;
}

.slider_window ul li img {
height: 35vw;
}

.slider_headline {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 2.5em;
color: white;
background: black;
opacity: 0.65;
text-align: left;
padding-top: .5em;
padding-left: 1em;
padding-bottom: .5em;
}



* {
padding: 0px;
margin: 0px;
list-style-type: none;
text-decoration: none;
}

html, body {
width: 100%;
height: 100%;
/*	
background: #102538; */
background: #002f53; 

line-height: 1.4em;
}

h4.courgette {
font-family: Courgette;	
font-weight: normal;
font-size: 2em;
margin-bottom: 1em;
opacity: .4;
}

.footer h4 {
font-family: Courgette;	
font-weight: normal;
font-size: 1.3em;	
opacity: .6;
}

body {
font-size: 19px;
font-family: 'Open Sans', sans-serif;
text-align: center;
}

nav a:link {color: #22537c}
nav a:visited  {color: #22537c}	
nav a:hover {color: lightgrey}
nav a:active {color: #22537c}

.cb_ankommen a:link {color: grey}
.cb_ankommen a:visited {color: grey}
.cb_ankommen a:hover {color:whitesmoke}
.cb_ankommen a:active {color:grey}

.footer a:link {color: grey}
.footer a:visited {color: grey}
.footer a:hover {color:whitesmoke}
.footer a:active {color:grey}

@media screen and (max-width: 849px){

.desktop-only {
display: none;	
height: 0px;
}

h5 {
font-size: 1em; 
color: #d1d8de;
margin-bottom: 4vh;
}

.logo {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
max-height: 3em;
background: white;
text-align: left;
padding-top: 5px;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
z-index: 10000;
}


.logo a img {
height: 2.5em;
margin-left: .5em;
z-index: 10000;
display: block;
}

nav {
display: none	
}

input {
display: none;	
}

.nav-trigger:checked + label {
display: none;
}

label[for="nav-trigger"] {
	position: fixed;
	top:  -70px;
	right: -150px;
	width: 7em;
	height: 1em;
	color: white;
	z-index: 5;
	margin: 4em;
  cursor: pointer;
	border-left: 3em 
}


.nav-trigger:checked ~ nav {
display: block;
position: absolute;
top: 2.7em;
left: 0;
width: 100%;
display: block;
z-index: 9000;
color: black;
background: white;
text-transform: uppercase;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
text-align: right;
}

nav ul {
margin-right: 1em;	
margin-bottom: 1em;
}


	
.slide_image  {
background: url('header_img.jpg');
background-color: #a8caeb;
background-position: left bottom;
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 0;
}	


.slide_image + div {
margin-top: 101vh;	
}   
 
#top_spacer {
height: 3em;	
}

.stichpunkte {
position: absolute;
top: 15%;
left: 50%;
width: 86%;
margin-left: -43%;
text-align: center;
color: #22537c;
border-radius: .5em;
margin-bottom: 2%;
margin-top: 1%;
padding-bottom: 1em;
padding-top: 1em;
z-index: 5000;
}

.stichpunkte h4 {
text-transform: uppercase;
margin-left: 1em;
margin-right: 1em;
}

img.navi_next_arrow_ref {
width: 2em;	
opacity: .3;
}	

.cb_stichpunkte {
width: 100%;
color: #d3d3d3;
text-align: left;
margin-top: 2%;
overflow: hidden; 
/*background: #102538;*/
background: #002f53;
padding-top: 1em;
padding-bottom: 2em;
}

.cb_stichpunkte h4 {
margin-left: 1em;	
margin-right: 1em;
}

.cb_stichpunkte p {
margin-left: 1em;	
margin-right: 1em;
}
	
	
.cb_preise {
width: 100%;
color: #d3d3d3;
text-align: left;
margin-top: 2%;
overflow: hidden; 
/*background: #102538;*/
background: #002f53;
padding-top: 1em;
padding-bottom: 2em;
}

.cb_preise h4 {
margin-left: .5em;
}

.cb_preise p {
margin-left: 1em;	
margin-right: 1em;
}

.content_box {
width: 100%;
background: #d3d3d3;
color: black;
text-align: left;
margin-top: 0px;
overflow: hidden;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
}	

.content_box h4 {
color:#22537c;
margin-left: 1em;
margin-top: 1em;
}

.content_box p {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}

.cb_image {
width: 100%;
height: 66vw;
background-size: 100%;
background-repeat: no-repeat;
margin-top: -1em;
}

.cb_image h4 {
width: 100%;
padding-left: 1em;
padding-top: .5em;
padding-bottom: .5em;
background: url('tile_darker2.png');
color: lightgrey;
position: relative;
left: -1em;
}

.cb_description {
margin-top: 1em;
}

.cb_verfuegbarkeit {
margin-top: 20%;
display:inline-block; 
width: 100%;
overflow: scroll;
margin-top: 5%;
background-color: #a8caeb; 
padding-top: 4em;
}
	

	
	
.cb_ankommen {
width: 100%;
background: #d3d3d3;
color: black;
text-align: left;
margin-top: 1em;
overflow: hidden;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
}	
	
.cb_ankommen h4 {
color:#22537c;
margin-left: 1em;
margin-top: 1em;
}

.cb_ankommen p {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
}
	


.cb_buchen {
width: 100%;
background: #d3d3d3;
color: black;
text-align: left;
margin-top: 0px;
overflow: hidden;
text-align: center; 
background-color: #a8caeb; 
margin-top:-.5em; padding-top: 2em; 
padding-bottom: 2em;		
}

/* SLIDER */

.slider_window {
height: 86vw;
width: 100%;
margin-top: 0px;
}

.slider_window ul li img {
height: 86vw;	
}
	
.slider_headline h4 {
position: relative;
left: -1em;
}

.sm {
position: relative;
top: -5em;
}

.footer {
background:#102538;
color: white;
text-align: left;
padding-top: 3em;
font-size: smaller;
}

.footer p, h4 {
margin-left: 1em;
}
	
.footer img {
width: 100%;
margin-top: -3em;
}
	
.footer_links {
margin-top: .5em;
}

.footer_links ul li {
margin-left: 1em;		
}	
	
.saalepixel {
margin-top: 2em;
text-align: left;
font-size: .7em;
color: white;
padding-left: 1.5em;
opacity: .4;
}
	
	
}

@media screen and (max-width: 50em) and (orientation: landscape)  {
	.logo a img {
	height: 2em;
	}

	.stichpunkte p {
	display: none;
	}
	
	.stichpunkte h4 {
	display: none;
	}	
	
	.nav-trigger:checked ~ nav {
	position: absolute;
	top: 2.2em;
	}
}
	
@media screen and (min-width:850px) {

.mobile-only {
display: none;
}

html, body {
background: url('tile_background2.jpg');
}	
	
.logo {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
max-height: 3em;
background: white;
text-align: left;
padding-top: 5px;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
z-index: 10000;
}	
	
.logo img {
margin-top: 5px;
margin-left: 1em;
height: 2.5em;	
}
	
.logo input {
display:none;
}	

.logo label {
display: none;		
}	
	
nav {
display:block;
text-transform: uppercase;
position: fixed;
top: 2em;
right: .5em;
font-size: .8em;
}

nav ul li {
display: inline;	
margin-left: 1em;
}
	
.stichpunkte span {
display:none;		
}

.stichpunkte {
position: relative;
top: 4.6em;
left: 66%;
padding: 1em;
text-align: right;
z-index: 1000;
width: 30%;
}
	
.stichpunkte h4 {
display: none;		
}
	
.stichpunkte p {
text-shadow: 0px 0px 15px white;		
opacity: .5;
}
	
.slide_image  {
background: url('header_img.jpg');
background-color: #a8caeb;
background-position: left bottom;
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
left: 0px;
bottom: 0em;
width: 100%;
height: 100%;
z-index: 0;
}	

.spacer_startseite {
margin-bottom: 90vh;		
}
	
.slide_image_desktop {
background: url('header_img.jpg');
background-color: #a8caeb;
background-position: left bottom;
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 21em;
z-index: 0;
}		

#top_spacer{
margin-top: 24em;	
}
	
.first {
font-size: .75em;
line-height: 1.2em;	
background: url('tile_background2.jpg');
border-radius: 1em;
padding: 1.6em;
text-align: left;
position: absolute;
color: white;
width: 20%;
top: 6em;
left:.5em;
z-index:1000; 
opacity: .95;
}
	
.first h4 {
margin-bottom: .5em;		
}
	
.desktop-only {
display: block;		
}
	
.content_box {	
width: 100%;
display: flex;
/*background: url('tile_background2.jpg');*/
background: lightgrey;
color: black;
text-align: left;
margin-top: 0px;
margin-bottom: 1em;
overflow: hidden;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);

}
	

	
.cb_image {
flex: 1;
width: 50%;
min-height:35vw;
background-size: 100%;
background-repeat: no-repeat;
}

		
.cb_description {
flex: 1;
padding: 1em;
color: #102538;
height: 32vw;
overflow-y: auto;
}
	

.cb_image h4 {
width: 100%;
padding-left: 1em;
margin-right: -1em;
padding-top: .5em;
padding-bottom: .5em;
background: url('tile_darker2.png');
color: lightgrey;
box-sizing: border-box;
}
	
.cb_preise {
position: relative;
text-align:center;
width: 100%;
color: white;
overflow: hidden; 
padding-bottom: 1em;
padding-left: 1em;
padding-top: 1em;
box-sizing: border-box;
flex: .93;
}

.pr_verf_bu_wrapper div {	
}
	
.cb_verfuegbarkeit {
margin-top: 5em;
display: block;
width: 100%;
text-align: center;
}
		
	
.cb_buchen {
text-align: center; 
margin-top:-.5em; padding-top: 2em; 
padding-bottom: 1em;	
margin-top: 6em;
}
	
.cb_preise {
margin-top: 2em;		
}
	
.cb_ankommen {	
width: 100%;
display: flex;
background: lightgrey;
color: black;
text-align: left;
margin-top: 0px;
margin-bottom: 1em;
padding: 1em;
overflow: hidden;
-webkit-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.24);
box-sizing: border-box;
}
	
.cb_ankommen h4 {
color: grey;
font-size: 1.3em;
flex: 1;
}
	
.cb_ankommen p {
margin-bottom: 1em;		
}
	
.cb_ankommen_textfeld {
flex: 3;		
}
	
.footer img {
display: none;		
}

.sm {
position: relative;
top: -7em;
}
	
.celtic_knot {
height: 3em;
width: 100%;
background-color: black;
background-image:url('celticknot.jpg');	
background-repeat: repeat-x;
opacity: .8;
filter: brightness(.3);
}
	
.footer {
margin-top: 5em;		
}
	
.footer_wrapper{
width: 95%;
margin-left: 1%;
text-align: left;
padding:1em;
color: white;		
background: black;
opacity: .5;
border-radius: .5em;
}
	
/*FOOTER DESKTOP*/

.footer_wrapper {
display: flex;	
}

.footer_contact {
flex: 1;	
}

.footer_links {
text-align: right;
flex: 1;
}
	
.saalepixel {
text-align: left;
font-size: .7em;
color: white;
padding-left: 1.5em;
opacity: .4;
}
	
}