@charset "utf-8";
/* CSS Document */

/* Angaben für ganze Seite */
html {
	min-height: 100%;
	}
body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	color: #000;
	font-family: 'Roboto_Slab', serif;
	font-size: 1.0em;
	font-variation-settings: 'wght' 300;
	line-height: 1.4;
	hyphens: auto;
	word-wrap: break-word;
	}
@font-face {
	 font-family: 'Roboto_Slab';
	 src: url('fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf') format('truetype');
	 font-weight: 100 1000;
	 font-stretch: 25% 150%;
	 font-style: normal;
	}
@font-face {
	 font-family: 'Overlock_SC';
	 src: url('fonts/Overlock_SC/OverlockSC-Regular.ttf') format('truetype');
	 font-weight: normal;
	 font-style: cursive;
	}	
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	}
a {
	color: #4600D4;
	text-decoration: none;
	transition: 0.5s;
	}
a:hover {
	color: #96F;
	}
a.active {
	color: #96F;
	}
.wiea {
	color: #4600D4;
	cursor: pointer;
	}
.wiea:hover {
	color: #96F;
	}
h1 {
	font-family: 'Overlock_SC', cursive;
	font-weight: normal;
	font-size: 1.6em;
	max-width: 100%;
	margin: 0.4em 0 0.8em 0;
	}
h2 {
	font-family: 'Overlock_SC', cursive;
	font-weight: normal;
	font-size: 1.3em;
	margin: 0.4em 0 0.8em 0;
	}	
.wieh2 {
	font-family: 'Overlock_SC', cursive;
	font-weight: normal;
	font-size: 1.3em;
	}	
h3 {
	font-family: 'Overlock_SC', cursive;
	font-weight: normal;
	font-size: 1.0em;
	margin: 1em 0;
}
.aufz li {
	list-style: none;
	margin: 1em 0 1em 12px;
	text-indent: -12px
	}
.aufz li:before {
  	content: "•";
 	padding-right: 7px;
	}	
img {
	border: none;
	margin: 0;
	padding: 0;
	}

/* Wrapper und Header */
#wrapper {
	width: 90%;
	max-width: 1400px;
	min-width: 330px;
	margin: auto;
	}
header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	}
header a {
	width: 15%;
	}
header img {
	display: block;
	width: 100%;
	height: auto;
	}

/* Kopfmenü */
nav {
	width: 98%;
	margin-top: 1%;
	padding: 1%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background-color: rgba(0, 0, 0, 0.3);
	}
nav ul {
	display: flex;
    justify-content: space-between;
	align-items: center;
	}
nav li {
	display: flex;
	align-items: center;
	}	
nav a {
	font-family: 'Overlock_SC', cursive;
	font-weight: normal;
	font-size: 1.6em;
	color: #FFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1.0);
	}
nav a:hover {
	color: #FEB901;
	}
nav a.active {
	color: #FEB901;
	}
		
/* Inhaltsbereich */
article {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	}
.content {
	width: 41%;
	margin-top: 2%;
	}
.content_breit {
	width: 92%;
	margin-top: 2%;
	}
.vollflaechig {
	padding: 0 !important;
	width: 49%;
	display: flex;
	}
.vollflaechig a {
	display: flex;
	}	
.vollflaechig img {
	object-fit: contain;
	object-position: 50% 50%;
	}
.vollflaechig iframe {
	object-fit: cover;
	object-position: 50% 50%;
	}
.content, .content_breit {
	padding: 2% 4%;
	background-color: rgba(255,255,255, 0.9);
	box-shadow: 0 0 0 1px #000;
	}	
.spalten {
	column-count: 2;
	column-gap: 4%;
	column-rule: 1px #000 dotted;
	margin: 1em 0;
	}	
.span1, .span2, .span3, .stueck1, .stueck2, .mitw1, .mitw2, .kontakt1, .kontakt2 {
	display: inline-block;
	vertical-align: top;
	}
.span1 {
	width: 14%;
	}
.span2 {
	 width: 41%;
	 padding-right: 4%;
	}
.span3 {
	 width: 41%;
	}
.stueck1 {
	width: 10%;
	}
.stueck2 {
	width: 90%;
	}
.mitw1 {
	width: 48%;
	padding-right: 4%;
	}
.mitw2 {
	width: 48%;
	}
.kontakt1 {
	width: 19%; 
	padding-right: 4%
	}
.kontakt2 {
	width: 77%; 
	}
.content img {
	max-width: 100%;
	}
.bild_breit {
	width: 100%;
	height: 30%;
	object-fit: cover;
	box-shadow: 0 0 0 1px #000;
	}
#reservierung {
	width: 50%;
	min-width: 280px; 
	margin: auto;
	margin-top: 24px;
	}
#reservierung a {
	display: block; 
	padding: 10px; 
	border-radius: 10px;
	background-color: #E85364; 
	color: #FFF;
	transition: 2.0s;
	}
#reservierung a:hover {
	background-color: #E83399;
	}
#reservierung h1 {
	margin-top: 0.6em;
	}
#mehrinfos a {
	color: #E85364;
	transition: 2.0s;
	}
#mehrinfos a:hover {
	color: #E83399;
	}

/* Fußmenü */
footer {
	width: 98%;
	margin: 2% 0;
	padding: 1%;
	display: flex;
    justify-content: space-between;
	align-items: center;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background-color: rgba(0, 0, 0, 0.3);
	}	
footer a {
	font-family: 'Overlock_SC', cursive;
	font-weight: normal;
	font-size: 1.6em;
	color: #FFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1.0);
	}
footer a:hover {
	color: #FEB901;
	}
footer a.active {
	color: #FEB901;
	}	
	
@media screen and (max-width: 1100px) {	
header a {
	width: 22%;
	}
}
@media screen and (min-width: 881px) {		
.header_klein {
	display: none;
	}	
#nav_icon {
	display: none;
	}
}		
@media screen and (max-width: 880px) {	
#nav_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4%;
	}
#nav_icon img {
	display: block; 
	height: 1.4em;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1.0));
	}
nav {
	width: 96%;
	padding: 1% 2%;
	}
nav ul {
	flex-direction: column;
	}
nav ul li {
	width: 100%;
	}
nav a {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1% 2%;
	text-align: center;
	}
article {
	flex-direction: column;
	}
.content, .content_breit {
	width: 92%;
	margin-top: 4%;
	}
.vollflaechig {
	width: 100%;
	}	
.spalten {
	column-count: 1;
	}	
}
@media screen and (max-width: 700px) {	
header a {
	width: 30%;
	}
.stueck h2 {
	font-size: 1.0em;
	margin: 1em 0;
	}	
footer {
	margin: 4% 0;
	padding: 0 1%;
	}
footer a {
	font-size: 1.0em;
	}
}