/* dm-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('lib/dm-mono-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('lib/dm-mono-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('lib/dm-mono-v14-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('lib/dm-mono-v14-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('lib/dm-mono-v14-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('lib/dm-mono-v14-latin-regular.svg#DMMono') format('svg'); /* Legacy iOS */
}

html, body {
margin:0; padding:0;
width:100%; height:100%;
}

body {
font-family:'DM Mono',Arial,Helvetica,sans-serif;
background:#fff;
color:#000;
font-size:14px;
line-height:1.3;
font-weight:300;
text-decoration:none;
-webkit-text-size-adjust:none;
}

* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-text-size-adjust:none;
}

a, b, span, div, ul, li, td, th, form, fieldset, aside, p, h1, h2, h3, h4, input, textarea {
font-family:inherit;
color:inherit;
font-size:inherit;
line-height:inherit;
font-weight:inherit;
text-decoration:inherit;
outline:0;
}

aside h1, 
section h2 {
font-size:3.286rem;
line-height:1.2;
}

aside h1 {
margin:1em 0 3em 0;
}

aside h2,
section h3 {
font-size:1.25rem;
}

aside h2 {
margin-bottom:1em;
}

aside h2 span {
font-size:3.286rem;
line-height:1.3rem;
}

aside .foerdern,
aside .foerdern:hover,
aside .foerdern:focus {
display:inline-block;
font-size:1.25rem;
color:#fff;
margin-top:3em;
padding:5px 20px 5px 50px;
background:#000 url('img/herz_white.png') 15px center no-repeat;
background-size:auto 16px;
}

a, b, span, div, ul, li, td, th, form, fieldset, p, h1, h2, h3, h4 {
margin:0; padding:0;
list-style-type:none;
outline:none;
border:0;
}

b, strong {
font-weight:700;
}

a:hover, a:focus {
color:inherit;
}

img {
display:block;
}

.dn {
display:none;
}

nav li a {
font-size:1.1rem;
line-height:2.5;
}

nav li:nth-child(5) {
margin-top:5rem;
}

nav li:nth-child(1n+5) a {
font-size:.7rem;
}

nav li.aktiv a {
font-weight:600;
text-decoration:underline;
}


@media screen and (min-width:1024px) {

body {
display:flex;
flex-direction:row;
}

header {
padding:50px 4%;
}

header h1 {
font-size:2.5rem;
margin:1em 0 1.5em 0;
}

#menu {
display:none;
}

nav {
display:block !important;
}

}

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

body {
display:flex;
flex-direction:column;
}

header {
position:fixed; left:0px; top:0px;
width:100%; height:72px;
z-index:1000;
}

header>div {
position:relative;
z-index:1000;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.25);
padding:10px 4%;
}

header.noshadow>div {
box-shadow:none;
}

header h1 {
font-size:2.5rem;
margin:0;
}

#menu {
position:absolute; right:4%; top:32px;
width:27px; height:20px;
border-style:solid;
border-color:transparent;
border-width:3px 0;
transition:all .5s ease-in-out;
}

#menu span {
display:block;
width:27px; height:3px;
text-indent:-1000px;
overflow:hidden;
background:#000;
border-radius:1.5px;
}

#menu:before,
#menu:after {
content:'';
position:absolute; left:0px;
width:27px; height:3px;
background:#000;
border-radius:1.5px;
}

#menu:before {
top:-8px;
}

#menu:after {
top:8px;
}

#menu:hover span,
#menu:focus span,
#menu:hover:before,
#menu:focus:before,
#menu:hover:after,
#menu:focus:after {
background:#000;
border-radius:1.5px;
}

nav {
display:none;
position:absolute; left:0px; top:65px;
z-index:999;
width:100%;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.25);
}

nav ul {
width:100%;
padding:3em 4%;
}

main {
padding-top:70px;
}

}

@media screen and (min-width:1366px) {

aside {
max-width:calc(100% - 670px);
}

.flex {
display:flex;
flex-direction:row;
gap:100px;
margin:50px;
}

}

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

.flex > * {
padding:30px 4%;
}


}

.flex > * {
position:relative;
}

.map div {
float:left;
width:48px; height:48px;
border:1px solid #000;
margin:-1px 0 0 -1px;
overflow:hidden;
text-indent:-10000px;
cursor:pointer;
position:relative;
background-position:center center;
background-repeat:no-repeat;
background-size:50% auto;
}

.map div.gebucht:hover,
.map div.gebucht:focus {
background-image:url('img/herz_black.png');
}

.map div.reserviert:hover,
.map div.reserviert:focus {
background-image:url('img/herz_white.png');
}

.map div.aktiv {
background:#000;
}

.map span {
display:none;
}

.map div + span {
display:block;
float:left;
width:96px; height:48px;
margin:-1px 0 0 -2px;
}

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

.map div {
width:9vw; height:9vw;
}

.map div + span {
width:18vw; height:9vw;
}

}


.text {
width:390px;
max-width:100%;
}

@media screen and (min-width:1024px) {

.text {
position:absolute; left:300px; top:180px;
}

}

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

.text {
margin-top:3em;
}

}

.text.aktiv {
z-index:1000;
background:#fff;
}

.farben input {
position:absolute; left:-10000px; top:-100000px;
opacity:0;
}

.farben label {
display:inline-block;
width:24px; height:24px;
border:2px solid #000;
cursor:pointer;
}

.farben input:checked + label {
border-color:#fff;
}

.farben label ~ label {
margin-left:6px;
}

.text p {
margin:1em 0;
}

input[type=email] {
margin:10px 0;
padding:5px 10px;
color:#000;
}

input[type=submit] {
background:none;
border:0;
color:#000;
text-decoration:underline;
cursor:pointer;
}