body {
	margin: 0 auto;
	max-width: 60em;
	color: #333333;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto 40px 1fr auto;
	gap: 0.5em;
	min-height: 100vh;
	background: #ddd;
	font-family: sans-serif;
	line-height: 1.4em;
	font-size: 1.0em;
}

input { outline: none; }
img { border: 0; }
:focus { outline: none; }

header {
	grid-column: 1 / span 5;
	grid-row: 1;
	grid-template-columns: min-content 1fr;
	border-width: 0px;
	padding: 0px;
}

nav {
	/* background: #CC9900; */
	background: linear-gradient(top, #C90 0%, #B70 50%, #A60 100%);
	background: -moz-linear-gradient(top, #C90 0%, #B70 50%, #A60 100%);
	background: -webkit-linear-gradient(top, #C90 0%, #B70 50%, #A60 100%);
	background: -ms-linear-gradient(top, #C90 0%, #B70 50%, #A60 100%);
	background: -o-linear-gradient(top, #C90 0%, #B70 50%, #A60 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#C90, endColorstr=#A60,GradientType=1);
	grid-column: 1 / span 5;
	grid-row: 2;
	display: block;
	grid-template-columns: min-content 1fr;
	border-width: 0;
	padding: 0;
}

section {
	background: #fff;
	grid-column: 1 / span 5;
	grid-row: 3;
	padding: 10px;
}

footer {
	background: linear-gradient(top, #fff 0%, #eee 70%, #ccc 100%);
	background: -moz-linear-gradient(top, #fff 0%, #eee 70%, #ccc 100%);
	background: -webkit-linear-gradient(top, #fff 0%, #eee 70%, #ccc 100%);
	background: -ms-linear-gradient(top, #fff 0%, #eee 70%, #ccc 100%);
	background: -o-linear-gradient(top, #fff 0%, #eee 70%, #ccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#ccc,GradientType=1);
	grid-column: 1 / span 5;
	grid-row: 4;
	padding: 0 10px 10px 10px;
	margin-bottom: 20px;
}
.footernavi {
  display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.0em, 1fr));
  grid-template-rows: 1fr;
  grid-auto-flow: dense;
}	

.footerbox {
	font-size: 0.9em;
	line-height: 1.0em;
	border: 0;
	padding: 5px 10px;
	margin: 10px;
}	

.footerlink0, .footerlink1, .footerlink2 {
	font-weight: normal;
	text-decoration: none;
	padding: 10px 0;
	border-style: solid;
	border-color: #999;
	display: block;
}	
.footerlink0 { 	border-width: 1px 0 0 0; }
.footerlink1 { 	border-width: 1px 0 0 0; margin-top: 20px; }
.footerlink2 { 	border-width: 1px 0 1px 0; }

.footerlink0:hover, .footerlink1:hover, .footerlink2:hover {
	background: #FFF;
}	

.innav {
	font-size: 1.1em;
	display: block;
	padding: 6px 50px;
}	

.header_foto, .slider_foto {
	display: block;
  max-width: 100%;
  height: auto;
}

p {
	padding: 0 20px 9px 20px;
	margin: 0;
}

h1 { font-size: 1.8em; margin: 20px; line-height: 1.2em; }
h2 { font-size: 1.5em; margin: 40px 20px 15px 20px; line-height: 1.2em; }
h3 { font-size: 1.3em; margin: 10px 20px; line-height: 1.2em; }
h4 { margin: 0 10px 10px 0; line-height: 1.2em; }

.marginlow { margin-top: -20px; }
.linespacer {	border: #DDD solid;	border-width: 0 0 1px 0; padding: 0 20px; margin: 10px 20px; }
.center { text-align: center; align: center; margin: auto; }
.right { text-align: right; align: right; font-size: 1.5em; }
.smallfont { font-size: 0.8em; line-height: 1.2em; }
.ovthumb { margin: 0 0 20px 0; padding: 2px; border: 1px solid #C90; width: 100%; }
.ovhl { font-weight: bold; font-size: 1.3em; }
.shadow { box-shadow: 3px 3px 3px 0px #666666; -moz-box-shadow: 3px 3px 3px 0px #666666; -webkit-box-shadow: 3px 3px 3px 0px #666666; }
.clear { border: 0; clear: both; display: block; float: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; font-size: 0em; line-height: 0em; }

div.table {
	display: table;
	width: calc(100% - 40px);
	border: 1px solid #AAA;
	padding: 0;
	margin: 20px;
	font-size: 0.8em;
	text-align: center;
}
div.row01 { display: table-row; }

div.colhl { 
	display: table-cell;
	border: thin solid #DDD;
	width: 10px;
	padding: 0;
	font-weight: bold;
	background: #eee;
}
div.col01 { 
	display: table-cell;
	border: thin solid #DDD;
	width: 10px;
	padding: 0;
}
.navanker {
	border: thin solid #740;
	border-radius: 0.5em;
	color: #FFF;
	background: #C90;
	padding: 15px;
	margin: 10px;
	float: left;
}
.navanker:link, .navanker:visited  {
	color : #FFF;
	text-decoration : none;
	font-weight : normal;
}
.navanker:hover, .navanker:active {
	color: #FFF;
	background: #960;
	text-decoration: none;
	font-weight: normal;
}
.anker:link, .anker:visited, .anker:hover, .anker:active { color : #333; text-decoration : none; font-weight : bold; }

.embed-iframe1, .embed-iframe2, .embed-map {
  position: relative; 
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}

.embed-iframe1 iframe, .embed-iframe2 iframe, .embed-map iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
	padding: 20px;
	border: 0;
}

.embed-iframe1 { padding-bottom: 51.50%; }
.embed-iframe2 { padding-bottom: 58.10%; }
.embed-map { padding-bottom: 100.0%; }
.only_pics { display: grid; gap: 4rem; grid-template-columns: repeat(auto-fill, minmax(16.5em, 1fr)); margin: 1.3rem; }
.only_1pic { padding: 25px 20px; width: 100%; height: auto; }
.only_2pic { width: 100%; height: auto; }
.picintext, .goback { position: relative; float: right; width: auto; top: 0px; left: 0px; padding: 0 0 20px 20px; }
.goback { font-size: 1.5em; }

dl { display: grid; grid-template-columns: auto 1fr; max-width: 60em; margin: 20px; line-height: 1.4em; }
dt { grid-column: 1; font-weight: bold; }
dd { grid-column: 2; }

a:link, a:visited  { color : #900; text-decoration : none; font-weight : normal; }
a:hover, a:active { color: #F00; text-decoration: none; font-weight: normal; }

/* Style Formulare */

	-moz-placeholder { color: #EEE; opacity: 0.5;}
	-webkit-input-placeholder { color: #EEE; opacity: 0.5;}

form {
	max-width: 95%;
	display: grid;
	grid-template-columns: [labels] 28% [controls] 70%;
	grid-auto-flow: row dense;
	grid-gap: 10px;
	background: #EFEFEF;
	margin-left: 20px;
	padding: 20px;
}

label {
	display: inline-block;
	line-height: 1.5em;
	border: 1px solid #CCC;
	padding: 0.4em 0.5em;
	border-radius: 0.5em;
}

input, textarea, select {
	font-family: sans-serif;
	line-height: 1.5em;
	font-size: 1em;
	background-color: #FFF;
	border: 1px solid #CCC;
	padding: 0 0.4em;
	border-radius: 0.5em;
}

textarea { font-size: 0.9em; }
input:invalid { border: 1px solid red; }

::-webkit-input-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }
::placeholder { color: #999; }

.labelx {
	display: inline-block;
	line-height: 1.5em;
	padding: 0.4em 0.5em;
}
.dshx {
	display: inline-block;
	line-height: 1.5em;
	padding: 0.4em 0;
	border: 0;
}

input[type="checkbox"] { display:none; }
input[type="checkbox"] + label::before {
  width: 18px;
  height: 18px;
  border: 1px solid #900;
  background-color: #F00;
  display: block;
  content: "";
  float: left;
  margin: 0 10px 0 2px;
}

input[type="checkbox"]:checked + label::before {
  box-shadow: inset 0px 0px 0px 2px #fff;
  background-color: #090;
  border: 1px solid #060;
}

.button0, .button1 {
	border-style: solid;
	border-width: 1px;
	font-size: 1em;
	line-height: 1.4em;
	cursor: pointer;
	padding: 5px 20px 10px 20px;
	border-radius: 0.5em;
}

.button0 {
	color: #333;
	border-color: #DDD;
	background-image: linear-gradient(#DDD, #AAA);
	background-image: -webkit-linear-gradient(#DDD, #AAA);
	background-image: -moz-linear-gradient(#DDD, #AAA);
	background-image: -o-linear-gradient(#DDD, #AAA);
}

.button1 {
	color: #DDD;
	border-top-color: #FCBA63;
	border-left-color: #FCBA63;
	border-bottom-color: #492A01;
	border-right-color: #492A01;
	background-image: linear-gradient(#D80, #410);
	background-image: -webkit-linear-gradient(#D80, #410);
	background-image: -moz-linear-gradient(#D80, #410);
	background-image: -o-linear-gradient(#D80, #410);
}

/* Style für Slider */

.slider {
	margin: 0 20px;
	padding: 20px 0 20px 0;
}

.slider_box {
	position: relative;
	float: right;
	display: block;
	margin-right: 30px;
	margin-top: -90px;
	background-color: #333;
	width: 200px;
	height: 110px;
	padding: 10px;	
	opacity: 0.8;
	text-align: left;
	font-family: Arial, Verdana, sans-serif;
	font-size: 0.9em;
	line-height: 1.3em;
}

.hl_box {	font-weight: bold; color: #FC0; }
.tx_box { font-weight: normal; color: #EEE; }

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
/* Style für Slider Ende*/

/* Responsive Navigation */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.menu {
    display: block;
		margin: 0 0 0 -10px;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li a {
		font-size: 1.07em;
    font-weight: normal;
    text-decoration: none;
    padding: 10px 15px 25px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #960;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 200px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 0.9em;
    font-weight: normal;
    display: block;
    color: #FFF;
    background: #960;
    padding: 10px;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #C90;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 10px 30px;
    background: #960;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
}

.responsive-menu:link, .responsive-menu:visited {
    color: #fff;
}

.responsive-menu:hover {
    background: #960;
    color: #fff;
    text-decoration: none;
}

a.homer { background: #960; }

/* Styles fuer Feedback Freezone */

.rev_back {
	background-color: #EEE;
	margin: 0 20px;
	padding: 0 20px 10px 0;
}

.rev_linespacer {	border: #DDD solid;	border-width: 0 0 1px 0; padding: 10px; margin: 20px; }

.rev_data {
	margin: 0 20px;
  color: #333333;
  font-size: 0.9em;
  line-height: 1.4em;
  font-weight: normal;
	text-align: left;
}

.rev_vote {
	position: relative;
	float: right;
	width: 60px;
	top: -15px;
	padding: 15px;
	margin: 0 50px 0 0; 
	border-color: #AAA;
	border-width: 1px;
	border-style: solid;
	background-color: #DDD;
	text-align: center;
  color: #009;
  font-size: 1.2em;
  font-weight: bold;
	box-shadow: 3px 3px 3px 0px #999999;
	-moz-box-shadow: 3px 3px 3px 0px #999999;
	-webkit-box-shadow: 3px 3px 3px 0px #999999;
}

.rev_hl {
	margin: 20px 0 15px 20px;
  color: #996600;
  font-size: 1.0em;
  line-height: 1.3em;
  font-weight: bold;
	text-align: left;
}

.review {
	margin: 20px;
  color: #333;
  font-size: 0.9em;
  line-height: 1.3em;
  font-weight: normal;
	text-align: left;
}

/* Ende Styles fuer Feedback Freezone */

/* Gallerie Styles */

.galov {
	display: grid;
	grid-template-columns: 35% 65%;
  grid-auto-flow: dense;
}	

.galbox1 {
	grid-column: 1 / span 1;
	margin: 10px 0 0 20px;
}	

.galbox2 {
	grid-column: 2 / span 1;
	border: 0;
	padding: 5px 10px;
	margin: 10px;
}	

.gallerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
	gap: 4px;
	grid-auto-flow: dense;
	margin: 0 20px;
}

.gallerie figure {
	border: 1px solid #C90;
	position: relative;
	margin: 0;
	padding: 1px;
	counter-increment: posMarkup;
}

.gallerie figure.normal { grid-column-end: span 1; }
.gallerie figure.landscape { grid-column-end: span 2; }
.gallerie figure.panorama { grid-column-end: span 3; }

.gallerie figure img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/*  Cookie Styles */

#page-wrapper {
	max-width: 800px;
	margin: 100px auto 0;
	display: block;
}

#cookie-popup {
	font-size: 0.8em;
	background-color: rgba(0,0,0,0.6);
	text-align: center;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8000;
	line-height: 1.2em;
}

.cookie-popup-inner {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.5);
	box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.5);
	padding: 20px;
	position: absolute;
	z-index: 9000;
	width: 70%;
	left: 50%;
	top: 70px;
	transform: translate(-50%,-50%);
	background-color: rgba(0,0,0,1);
}

.popcook:link, .popcook:visited  {
	color : #FFC;
	text-decoration : none;
	font-weight : normal;
}

.popcook:hover, .popcook:active {
	color: #F00;
	text-decoration: none;
	font-weight: normal;
}

.butcook:link, .butcook:visited  {
	background-color: #CCC;
	border: 1px solid #fff;
	color: #333;
	text-decoration : none;
	padding: 3px 5px;
}

.butcook:hover, .butcook:active {
	background-color: #A00;
	border: 1px solid #C00;
	color: #FFF;
	text-decoration: none;
	margin-top: 10px;
}

.cookie-popup-inner button {
	background-color: #CCC;
	border: 1px solid #fff;
	color: #333;
	line-height: 21px;
	margin-top: 10px;
}

.cookie-popup-inner button:hover {
	background-color: #0A0;
	border: 1px solid #0C0;
	color: #000;
	line-height: 21px;
	margin-top: 10px;
}

#cookie-popup.hidden {
display: none;
}

}
.hidden {
	display: none;
}

@media (min-width: 700px) and (max-width: 840px) {
	.mainWrap { width: 700px; }
	.menu ul { top: 37px; }
	.menu li a { font-size: 0.8em; }
	a.homer { background: #960; }
}

@media (max-width: 699px) {
	.mainWrap { width: auto; padding: 50px 20px; }
	.menu { display: none; }
	.responsive-menu { display: block; }
	.menu li:first-child { margin-left: 0; }
	.menu li { display: block; margin-left: 0;  width: 90%; }
	.menu li li { display: block; margin-left: 0;  width: 100%; }
	.menu li a { background: #A70; color: #fff; margin: 0; }
	.menu li a:hover,.menu li:hover>a { background: #B80; color: #fff; }
	.menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; }
	.menu li:hover>ul { background: #B80; visibility: visible; opacity: 1; position: relative; transform: initial; }
	.menu ul ul { left: 0; width: 100%; background: #A70; transform: initial; }
	.menu li>ul ul:hover { background: #A70; transform: initial; }
}

@media (max-width: 480px) {
	h1 { font-size: 1.4em; margin: 20px; line-height: 1.2em; }
	h2 { font-size: 1.2em; margin: 40px 20px 15px 20px; line-height: 1.2em; }
	h3 { font-size: 1.1em; margin: 10px 20px; line-height: 1.2em; }
	body { font-size: 0.9em; }
	.galov { display: grid; grid-template-columns: 20% 80%; grid-auto-flow: dense; }	
	.ovthumb { margin: 0 0 20px 0; padding: 2px; border: 1px solid #C90; width: 100%; height: 30%; }
	.slider_box {	padding: 5px; margin-right: 10px;	margin-top: -30px; 	width: 160px;	height: 80px; font-size: 0.8em; }
	.picintext { float: none; width: 100%; padding: 0 0 10px 0;	}
	.cookie-popup-inner {	width: 95%; }
}
