@font-face {font-family: 'Great Vibes';font-style: normal;font-weight: 400;src: url('fonts/great-vibes-v21-latin-regular.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 400;src: url('fonts/fira-sans-v18-latin-regular.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 400;src: url('fonts/fira-sans-v18-latin-italic.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 500;src: url('fonts/fira-sans-v18-latin-500.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 500;src: url('fonts/fira-sans-v18-latin-500italic.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 600;src: url('fonts/fira-sans-v18-latin-600.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 600;src: url('fonts/fira-sans-v18-latin-600italic.woff2') format('woff2');}
html {
overflow-y: scroll;
}
body {
margin:0 0 0 0;
font-family: 'Fira Sans', sans-serif;
background-image: url(../media/bg.jpg);
background-repeat:no-repeat;
background-position: top center;
background-attachment:fixed;
background-size: cover;
font-size:1.2em;
color: #000;
}
#seitenbreite {
margin:0 auto 0 auto;
max-width: 1200px;
position: relative;
}
#kopf {
width:auto;
text-align:center;
margin:0;
background: url(../media/cafemakni-innenraum.jpg) center no-repeat;
background-size: cover;
}
#kopf-logo {
padding:5% 0 5% 0;
}
a {
color:#6d3834;
font-weight:600;
text-decoration:none;
}
a:hover {
color:#cab384;
}
#navigation, #fusszeile {
margin: 0;
padding: 0;
text-align:center;
background: #6d3834;
text-shadow:#000 1px 1px 2px;
}
#navi-mobil a#navbutton{display:none;}
#navigation ul {
margin:0;
padding: 5px 0 5px 0;
}
#navigation ul li {
display: inline;
font-weight: 600;
text-align:center;
text-decoration:none;
}
#navigation ul li a {
font-size: 1.2em;
margin: 0 15px 0 0;
padding: 4px 10px 4px 10px;
color: #fff;
}
#navigation ul li a:hover,
#navigation ul li.active a,
#fusszeile a:hover, #navi-mobil a:hover  {
color: #e6dcc8;
}
#main {
padding: 15px 0 10px 0;
width: auto;
background-color:#FFF;
background: rgba(255,255,255,0.7);
}
#main::after {
content: "";
clear: both;
display: table;
} 
#fusszeile p {
padding:10px;margin:0;
}
#fusszeile a {
color: #fff;
}
#footer {
text-align:center;
}
h1 {
font-family: 'Great Vibes';
color: #6d3834;
padding:0 10px 15px 10px;
margin:0;
text-align:center;	
font-size:2em;
line-height: 1.5em;
}
h2 {
font-family: 'Great Vibes';
color: #6d3834;	
padding:5px 15px 0 15px;
margin:0;
text-align:center;	
font-size:1.4em;
line-height: 1.3em;
}
h3 {
color: #6d3834;	
padding:10px 15px 0 15px;
margin:0;	
font-size:1.2em;
line-height: 1.3em;
font-weight: 600;
}
strong {font-weight:500;}
p {
font-weight:400;
margin: 10px 15px 15px 15px;
}
p.text-center {
text-align:center;
}
p.text-right {
text-align:right;
}
#main ul {
line-height:1.4em;
margin:10px 10px 0px 40px;
padding:0;
list-style-type: disc;	
}
#main li {
margin-bottom:8px;
}
hr {
border: none;
border-top: 3px solid #6d3834;
margin: 15px 15px 10px 15px;
clear:both;	
}
img {
max-width: 100%;
height: auto;
border:0;
}
.textbox {width:50%;}
.left  {float: left;}
.right  {float: right;}
/* Bild */
.einzelbild img{
margin: 10px 0 10px 0;
}
.pnormal {
width:100%;
text-align:center;
}
.pleft {
float: left;
width:50%;
}
.pright {
float: right;
width:50%;
}
/* Speisekarte */
.speisekarte {
display: grid;
grid-template-columns: auto 120px;
margin:0 auto 20px auto;}
.speisekarte p {margin:0 15px 0 15px;}
.preis {
text-align:right;
font-weight:600;
}
#matomo-opt-out {
margin: 15px;
}
@media only screen and (min-width:830px) {
#navi-mobil {display:none;}
}
@media only screen and (min-width:176px) and (max-width:830px) {
html {
background: no-repeat center bottom fixed;
background-size: cover;
height: 115%;
overflow: scroll;
background-attachment:scroll;
}
body {
font-size:1.1em;
}
#kopf-logo img{
width: 50%;
}
#seitenbreite {
width:auto;
padding:0;
}
#navi-mobil {
margin: 0;
padding: 5px;
font-size:1.2em;
background: #6d3834;
text-shadow:#000 1px 1px 2px;
}
#navi-mobil a#navbutton{
display:block;
color:#FFF;
}
#navigation {
display:none;
z-index:100;
background:none;
float:left;
bottom: auto;
top: auto;
position:absolute;
padding: 0px;
}
#navigation ul {
padding:0;}
#navigation ul li {
display: block;
background: #6d3834;
border-top: #fff solid 2px;
padding:8px;
}
.textbox {width:100%;}
.left, .right  {float: none;}
.pleft , .pright {
float: none;width:100%; text-align:center;
}
.speisekarte {
grid-template-columns: auto 100px;
}
}