@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: 100;src: url('fonts/fira-sans-v18-latin-100.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 100;src: url('fonts/fira-sans-v18-latin-100italic.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 200;src: url('fonts/fira-sans-v18-latin-200.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 200;src: url('fonts/fira-sans-v18-latin-200italic.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 300;src: url('fonts/fira-sans-v18-latin-300.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 300;src: url('fonts/fira-sans-v18-latin-300italic.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');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 700;src: url('fonts/fira-sans-v18-latin-700.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 700;src: url('fonts/fira-sans-v18-latin-700italic.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 800;src: url('fonts/fira-sans-v18-latin-800.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 800;src: url('fonts/fira-sans-v18-latin-800italic.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: normal;font-weight: 900;src: url('fonts/fira-sans-v18-latin-900.woff2') format('woff2');}
@font-face {font-family: 'Fira Sans';font-style: italic;font-weight: 900;src: url('fonts/fira-sans-v18-latin-900italic.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:500;
text-decoration:none;
}
a:hover {
color:#cab384;
}
 {
color:#e6dcc8;
}
#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: 700;
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 {
color: #6d3834;	
padding:5px 15px 0 15px;
margin:0;
text-align:center;	
font-size:1.3em;
line-height: 1.3em;
font-weight: 700;
}
h3 {
color: #57a331;	
padding:10px 10px 0 10px;
margin:0;	
font-size:1.1em;
line-height: 1.3em;
font-weight: 700;
}
strong {font-weight:500;}
p {
margin: 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;
}
.clear, .clear2 {
clear:both;
}
.clear3 {
	display:none;
}
/* Textboxen */
.breit {
width: 100%;
float:left;
}
.halb {
width: 50%;
float:left;
}
.viertel {
width: 25%;
float:left;
}
.box {
padding: 5px 10px 5px 10px;
width:auto;
text-align:center;
margin: 10px;
color:#FFF;
text-shadow:#000 1px 1px 2px;
background-color: #436a96;
background-image: linear-gradient(-45deg, #35669c 0%, #4a86b9 40%, #4a86b9 60%, #35669c 100%);
border-radius: 10px;
box-shadow:#555 2px 2px 5px;
vertical-align:central;
}
.box-breit {
height:auto;
}
.box-halb {
height: 200px;
}
.box-viertel {
height: 170px;
}
.box h2 {
font-size:1.5em;
color:#FFF;
margin:10px 0 10px 0;
padding:0;
}
.box p {
margin:5px 0 5px 0;
padding:0;
}
/* Bild & Text */
.einzelbild {
width:50%;
text-align:center;
}
.einzelbild img{
margin: 10px 0 10px 0;
max-width:100%;
}
.textbox {
width: 50%;
margin: 0 0 10px 0;
}
.pleft, .left {
float: left;
}
.pright, .right {
float: right;
}
/* Speisekarte */
.speisekarte {
display: grid;
grid-template-columns: 120px auto 120px;
margin:0 auto 15px auto;}
.speisekarte p {margin:0 10px 0 10px;}
.nummer {
font-weight:600;
}
.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;
}

.viertel {
width: 50%;
float:left;
}
.einzelbild {
width:auto;
text-align:center;
}
.pleft, .pright, .pnormal {
float: none;
}
.textbox {
width: 100%;
float: none;
}
.left , .right {
float: none;
}
.speisekarte {
grid-template-columns: 45px auto 100px;
}
}
@media only screen and (min-width:581px) and (max-width:780px) {
.halb,.breit {
width: 100%;
float:none;
}
.box-halb {
height: auto;
}
}
@media only screen and (min-width:176px) and (max-width:600px) {
.viertel,.halb,.breit {
width: 100%;
float:none;
}
.box-viertel, .box-halb {
height: auto;
}
.clear2 {
display:none;
}
.clear3 {
display:inherit;
}
}