@font-face {
    font-family: 'montserrat';
    src: url('/webfont/montserrat-regular.woff') format('woff'),
         url('/webfont/montserrat-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}
:root {
 --rot: #e20016;
 --red: #e20016;
 --grey: #e5e5e5
}
html, body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;    /* macOS: glatter/leichter */
  -moz-osx-font-smoothing: grayscale;     /* macOS Firefox */
}
html, body, div {
padding:0;
margin:0;
scroll-behavior: smooth;
box-sizing: border-box;
}
/* background: white url(../img/bg-body.gif) 0 0 repeat-y ; */
body{
background-color: white;
border-left: 20px solid var(--red);
padding: 0;
font-family: montserrat,Arial, sans-serif;
font-size: 13px;
letter-spacing: .05em;
color: #101010;
overflow-y: scroll;
min-height: 100vh;
}
div {
 display: block;
 box-sizing: border-box;
}
label {
 display: inline-block;
}
h1,h2,h3,td,a,li,input {
font-size: 13px;
letter-spacing: .05em;
font-family: montserrat,Arial, sans-serif;
}
a {
color: #101010;
text-decoration: none;
border:none;
outline: none;
}
a:hover {
color: #e20016
}
img {
 height: auto;
}
table {
border-collapse:collapse
}
td,th {
vertical-align:top;
text-align: left;
padding: 2px 8px 2px 0
}
th {
padding-left: 4px
}

div {
position: relative
}
.clear {
clear: both;
}
.abstand {
margin-bottom: 4em
}
.cent {
text-align: center
}
.mid {
vertical-align: middle
}
.ri {
text-align: right
}
.big {
 font-size: 20px
}

/* Header */
a:hover,
#chlang a:hover,
#nav a:hover,
#nav a.ac,
.adrmail a:hover {
color: #e20016;
}
#head {
background-color: #e5e5e5;
min-height: 130px;
margin-bottom: 20px;
}
#headopen,
#leftopen {
 display: none;
 position: absolute; 
 width: 40px;
 height: 40px;
 top: 20px;
 right: -40px;
 padding: 5px;
 border-radius: 0 5px 5px 0;
outline: 2px solid var(--red);
 background: white url('/img/hamburger.png') center center no-repeat;
 z-index: 11;
}
#headopen a,
#leftopen a {
 display: block;
 width: 30px;
 height: 30px;
 cursor: pointer;
}
#leftopen{
 left: -40px;
 right: auto; 
 border-radius: 5px 0 0 5px;
}
.logo {
 display: inline-block;
 margin: 10px 20px;
 width: 110px;
}
#left {
width: 220px;
max-height: calc(100vh - 140px);
overflow: auto;
float:left; 
margin: 0 0 20px 10px; 
min-width: 150px;
background-color: white;
z-index: +10
}
#headright  {
 position: absolute;
 right: 20px;
 top: 30px;
 width:230px
}
.adrmail, 
.adrtel,
#searchform{
position: relative;
display: block;
width: auto;
background-color: white;
padding: 0 4px;
margin:0;
white-space: nowrap;
margin-right: 0;
}
.adrtel,
.adrmail  {
text-transform: uppercase;
white-space: nowrap;
text-align: right
}
.adrtel  {

}
.adrmail{
margin-top: 5px
}
#searchform {
 text-align: left;
 height: 25px;
 margin-top: 5px;
 padding: 0
}
#words {
 margin: 0;
}


#searchtext {
    position: absolute;
    background-color: white;
    padding:0;
    max-height: 0;
    overflow: hidden; 
    right: 30px;
    margin-top: 0px;
    width: 500px;
    font-size: 12px;
    transition: .4s;
    z-index: 12;
}
#searchtext.ac {
display: block;
max-height: unset;
padding: 10px;
border: 1px solid #6A6863;
box-shadow: 8px 12px 16px rgba(0,0,0,.4);
}


#chlang {
position: absolute;
right: 28px;
top: 5px
}
#chlang a {
color: #101010;
padding: 2px 4px;
}
#nav {
position: absolute;
bottom: 15px;
width: calc(100% - 510px);
margin: 0 0 14px 250px;
padding-bottom: 5px;
}
#nav a {
 display: inline-block;
padding: 3px 5px 2px;
margin: 0 0;
letter-spacing: .04em;
border:none;
outline: none;
font-size: 15px;

}

#nav a:hover,
#nav a.ac,
#snav a:hover,
#snav a.ac,
.cata a.ac,
.list a.ac  {
border:none;
outline: none;
color: white;
background-color: #e20016;
}
.list {
 margin-top: 0;
 min-width: 150px;
 width: 100%
}
.list td {
 vertical-align: top
}
.list td:nth-of-type(2){
 padding-top: 4px
}
.list td.inputnum {
 width: 60px;
}
.list tr:last-of-type {
 border: 0 none;
}
#catlist td {
margin: 0;
padding: 0;
}
#catlist a {
 padding: 3px 10px
}
.cata a,
.list a {
display: block;
padding: 3px 4px 2px 10px;
}
.list td span {
 display: none
}
.list a {
 
}
.list a.ac {
border-right: 0 solid white;
}

.cont {
 display: flow-root; 
min-height: calc(100vh - 60px); 
padding-bottom: 20px;
}
#centdiv {
width: 52.0%;
float:left;
margin: 0 0 0px 20px;
max-height: calc(100vh - 240px);
overflow: auto;
}
#scrolldiv {
display: block;
min-height: 160px;
overflow: auto;
padding: 0;
}
.parken {
 max-height: calc(100vh - 480px);
}
#empftab {
margin: 0;
width:100%
}
#empfehlungen{
clear: both; 
padding: 0;
text-align: left;
height: auto;
width: calc(100% - 10px)
}
#empfehlungen .toprand {
margin: 0 0 5px 0;

}
div.empf {
display: block;
float:left; 
width: 25%;
height: auto;
text-align: center;
color: #8d8d8d;
font-size: 11px;
}
.empf a {
outline: 1px solid #8d8d8d;
display: block;
width: auto;
height: auto;
margin: 0 3px 5px 3px;
padding:0;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;

}
.empf a:hover{
color: #101010
}
.empf a img {
width: 95%;
max-width: 150px;
height: auto;
position: relative; 
display: block;
margin: 0 auto 5px auto;

}
.empfehlungen0 a:hover img {
width: 105%;
margin: -5%;
z-index: 3;
position: relative
}

#chlang a.ac,
#chlang a:hover{
color: #e20016
}
#searchform {
background-color: transparent;
padding-top: 4px
}
#searchform input {
border: 0;
padding: 1px 2px;
width: 190px;
margin-top: -9px;
}
#searchform input[type=submit] {
width: 30px;
height: 26px;
cursor: pointer;
background: transparent url(../img/lupe.gif) 4px 8px no-repeat;

}
.list input {
width: 60px;
text-align: center
}

#af {
    display: block;
    padding: 4px 8px;
    text-align: center;
    background-color: #F6F6F6;
    width: 100%;
   
}
#af:hover,
#af:focus {
    background-color: #E20016;
    color: white;
}

#footer {
height: auto;
width: 100%;
clear: both;
color: #8d8d8d;
background-color: white;
padding: 5px 10px 15px 20px;
min-height: 60px;

}
#footer span {
white-space: nowrap;
}
#footer a{
color: #8d8d8d

}

#snav {
padding-right: 20px;
text-align: center
}

#snav a {
padding: 1px 3px;
margin: 0 2px;
color: #8d8d8d;
}
.fbbutton {
position: relative;
top: 2px;
width: 15px
}
#snav .fb:hover {
background-color: transparent;
}

/* Content */

.show,
#cart {
background-color: #f6f6f6;
}

.show{
margin: 0 0 1.5% 20px;
padding: 5px;
width: 50%;
min-height: 400px;
max-width: 780px;
float:left;
}
#right {
margin: 0 20px 20px 0;
width: calc(48vw - 310px);
float:right;
clear: right;
}
#prodimg {
display: block;
float: right; 
width: calc(48vw - 310px);
max-width: 700px;
margin: 0 20px 10px 0;
}

img.prod {
display: block;
margin-top: 10px;
outline: 1px solid #8d8d8d;
width: 100%
 
}

#prodlist {
position: sticky;
top: 0; 
width: 100%;
z-index: 10;
}
/* Warenkorb */

#warenkorb {
 display: flow-root;
 background-color: var(--grey);
 
}
#warenkorb .toprand {
 margin:  0 0 10px
}
#sendcart{
display: inline-block;
width: auto;
margin-top: -20px;
margin-bottom: 10px;
margin-left: 10px;
padding-left: 0;
padding-bottom:0;
}

#addarticles {
 display: block; 
 width: 100%; 
 background-color:var(--grey);
 text-align:right; 
 margin:2px 0 10px 0; 
 padding: 3px 30px 3px 0 
}

#addarticles0:hover {
  background-color: #e20016;
  color: white;
}
#cart {
  background-color: var(--grey);
 width: calc(100% - 10px);
margin-left: 10px
}

#cart td {
font-size: 11px;
padding: 4px;
vertical-align: middle;
}
#cart tr.bgw {
 background-color: #f6f6f6;
}
#cart td a {
font-size: 11px
}
#cart tr.zweifelder td:last-child {
 padding-right: 20px
}
.toprand,
#toprand {
margin: -5px -5px 10px -5px;
padding: 2px 10px
}
.toprand ,
.toprand h1,
.toprand h1 a,
.toprand th,
#cart th,
#toprand th{
background-color: #6a6863;
color: white;
font-weight: normal;
font-size: 13px
}
#right .toprand {
margin-top:0; 
}
.button {
display: block;
background-color: transparent;
border: none;
cursor: pointer;
}
#searchform input.button {
 display: inline-block;
}
#addarticles {
display: block;
 width: 100%;
 padding: 5px 8px;
 margin: 8px 0 10px 0;
 text-align:center;
 float: right;
 font-weight: bold;
 background-color: var(--red);
 color: white;
 transition: .2s
}
#addarticles:hover {

}

#af {
 background-color: var(--red);
 color: white; 
 max-width: 150px;
 font-weight: bold;
 margin: 5px
}
.button:hover {
color: #e20016
}


form#best_anfr input[type=date]{
font-size: 12px;
width: 120px;
}

#scrolldiv a {
    scroll-margin-top: 65px;
}

form#best_anfr{
display: flow-root; 
background-color: white;
position: absolute;
top: -100px;
right: 20px;
border: 1px solid #bfbeba;
padding: 10px;
z-index: 20;
box-shadow: 4px 5px 5px #4c4c47;
}
#best_anfr input,
#best_anfr textarea {
text-align:left;
width: 250px
}
label[for=von],
label[for=bis]{
 width: 120px;
}

#best_anfr input.button{
 width: 50%;
 text-align: center;
 max-width: 100px
}
#cancelbutton {
 display: flow-root;
 border: 1px solid black;
 float: right;
 color: black;
}
#cartcontact {
}
#cartcontact thead th{
 vertical-align: middle
}
#cartcontact .delbutton {
background-color: var(--red);
color: white; 
margin: 0;
position: absolute; 
overflow: hidden; 
opacity: 0;
box-shadow: 0px 5px 10px rgba(0,0,0,.5);
transition: .2s
}
.meldung,
.meldungok {
position: absolute;
margin: -50px 0 0 -40px;
color: white; 
background-color: #e20016;
font-weight: bold;
padding: 8px 12px;
border: 1px solid black;
border-radius: 3px;
box-shadow: 5px 3px 10px rgba(0,0,0,.3);
z-index: 101
}
form .meldung {
border: none;
box-shadow: none;
}
.meldungok {
 background-color: green;
 color: white; 
 padding: 5px; 
}
#totop {
 display: block;
 position: fixed;
 bottom: 10px;
 right: 20px;
 width: 40px;
 height: 40px;
 background: transparent url('/img/top.svg') center center no-repeat; 
 background-size: contain; 
 opacity: 0;
 transition: 1s
}



@media screen and (max-width: 1410px) {
#right {
 clear: both; 
 float: none;
 padding: 30px 20px;
 width: 100%; 
 max-width: 500px;
 
}
#warenkorb {
 max-width: 450px
}
}

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

.cont {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
/* flex-end center space-between space-around space-evenly */
align-items: stretch; 
/* flex-start flex-end center baseline */
align-content: stretch; 
/* flex-start flex-end center space-between space-around */

}
#head {
 order:1;
 width: 100%;
}
#left,
.show{
 order:2;
}
.show {

}

#prodimg {
order:3;
position: absolute; 
right: 10px;
top: 130px;
width: 250px
}
#centdiv {
 order: 4;
 margin: 0 10px;
}
#right {
 order: 5;
 
}
#footer {
 order: 10
}
#nav {
 margin-top: -100px
}

.cont {
}
#scrolldiv {
 max-height: unset;
}


#centdiv {
 margin-bottom: 20px;
 width: calc(100% - 300px);
 
}
form#best_anfr{
background-color: white;
position: relative;
top: auto;
right: auto;
}
#footer {
 position: relative;
}
#right{
 float: none; 
 clear: both; 
 margin: 20px
}
.show{
margin-left: 20px;
}

#nav {
 margin-left: 150px;
 margin-top:18px;
 top: 10px;
 bottom: auto;
 width: calc(100% - 410px);
}
}

@media screen and (max-height: 900px) {
#centdiv {
 max-height: unset
 
}
}
@media screen and (max-width: 750px) {
body, h1,h2,h3,td,a,li,input,.toprand ,.toprand h1,.toprand h1 a,.toprand th,#cart th,#toprand th {
font-size: 15px;
}
#head,
#left {
position: fixed;
height: 100vh;
width: 250px;
top: 0;
left: -250px;
margin: 0;
transition: .4s;
z-index: +12;
}
#head.down {
 left: 0;
box-shadow: 5px 8px 10px rgba(0,0,0,.3);
}
#left {
right: -250px;
left: auto;
max-height: 100vh;
overflow: visible;
z-index: 11;
}
#left > div {
 overflow: auto;
 max-height: 100vh;
}
#left.down {
 right: 0;
 box-shadow: -5px 8px 10px rgba(0,0,0,.3);
}
.list {
 margin-top: 0;
}
#headopen,
#leftopen {
 display: block;
}
#nav {
width: 100%;
position: relative;
margin: 0;
padding: 10px;
float: none;
left: 0;
bottom: auto;
}
#nav a,
.list a {
 display: block;
 padding: 4px 
}
#snav {
float: none;
text-align: left;
margin-left: 20px
}
.logo {
position: relative;
}
#headright {
position: relative; 
top: auto;
right: auto;
max-width: 250px;
margin: 0;
text-align: left;
background-color: white;
 padding: 10px;
}
#searchform {
}
#searchform input[type=text] {
 border: 1px solid #999
}
#headright #searchtext {
white-space: normal;
 width: calc(100% - 20px);
 margin: 0;
 right: auto;
 text-align: left;
}
.show,
#centdiv {
width: auto;
float: none;
clear: both
}

#centdiv{
height: auto;
max-height: unset;
min-height: 30px;
overflow: auto;
}
#empfehlungen {
 margin: 0 0px 20px;
 width: 100%
}
#right {
 margin: 0 10px 20px;
 width: calc(100% - 20px);
}
#right .toprand {
}
#prodimg {
position: relative; 
top: auto;
right: auto;
display: block;
width: calc(100% - 20px);
margin-left: 10px
}
#warenkorb {
 width: 100%;
 margin: 0
}

#footer {
position: relative;
border-left: none
}
}


@media screen and (max-width: 550px) {
#centdiv {
 margin: 0;
}
#right {
 margin: 10px;
}
#toprand {
 display: none
}
#scrolldiv {
 margin-bottom: 20px
}
.list,
.list tbody,
.list tr,
.list td {
 display: block; 
 width: 100%;
 text-align: right; 
}
.list {
 width: calc(100% - 10px);
}
.list tr {
  border-bottom: 2px solid var(--red);
}
.list td,
.list td.inputnum {
 padding: 2px 10px;
 width: calc(100% - 20px);
}
.list td:first-of-type {
 font-weight: bold;
 text-align: left; 
}
.list td span {
 display: inline-block
}
#best_anfr tr {
 border: 0 none;
}
#best_anfr input,
#best_anfr textarea {
width: 100%;
clear: both; 
}
label[for=von],
label[for=bis]{
 width: 40px;
}

button,
input.button,
#best_anfr input.button,
#best_anfr button,
#cartcontact input.button,
#af{
 display: block;
 width: calc(100% - 40px);
 margin: 10px 20px ;
 padding: 10px;
 max-width: unset
}
}

@media screen and (max-width: 460px) {
 #cart tr {
  display: block;
  width: calc(100% - 10px)
 }
#cart td {
 display: block;
}
#cart td:not(:first-child) {
 display: inline-block; 
  width: calc(50% - 36px);
  
}
#cart td:last-child {
 width: 30px
}

#cart td:first-child {
 width: auto
}
#cart tr.zweifelder td:last-child {
 width: 80px
}
}

@media print {
#left,
#right,
#chlang,
#nav ,
#headright {
  display: none;
}
.show,
#centdiv{
margin: 0;
width: 100%;
max-height: unset
}
.cont {
 min-height: unset
}
}