@font-face {
    font-family: 'Cardo';
    src: local('Cardo Regular'), local('Cardo-Regular'),
        url('Cardo-Regular.woff2') format('woff2'),
        url('Cardo-Regular.woff') format('woff'),
        url('Cardo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
@font-face {
    font-family: 'Cardo';
    src: local('Cardo Bold'), local('Cardo-Bold'),
        url('Cardo-Bold.woff2') format('woff2'),
        url('Cardo-Bold.woff') format('woff'),
        url('Cardo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
@font-face {
    font-family: 'Cardo';
    src: local('Cardo Italic'), local('Cardo-Italic'),
        url('Cardo-Italic.woff2') format('woff2'),
        url('Cardo-Italic.woff') format('woff'),
        url('Cardo-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }
body{margin:0; padding:0; font-family: 'Cardo', Constantia, Book Antiqua; color:#444; font-size:17px; text-align:left; line-height :1.3em; background:#444;}

h1 { font-size:30px; font-variant:small-caps; text-align:left; line-height:33px; font-weight:normal; color:#213c9c; margin-bottom:10px; margin-top:25px; border-bottom: 1px solid #213c9c;}
h2 { font-size:26px; font-variant:small-caps; text-align:left; font-weight:normal; color:#213c9c; padding-bottom:2px; margin-bottom:3px; margin-top:25px; border-bottom: 1px solid #213c9c;}
h3 { font-size:21px; font-variant:small-caps; color:#213c9c; margin:0px; text-align:left; margin-bottom:2px; margin-top:0px;}
h4 {font-size:26px; font-variant:small-caps; text-align:left; font-weight:normal; color:#777; padding-bottom:2px; margin-bottom:6px; margin-top:25px; border-bottom: 1px solid #777; line-height: 26px;}
h5{ font-size:18px; font-variant:small-caps; font-weight:normal; color:#555; margin:0px;}
h6{ font-size:16px; font-variant:small-caps; margin-top:8px; margin-bottom:0px; font-weight:normal;}
a { color:#213c9c; text-decoration:none;}
a:visited { color:#213c9c; text-decoration:none;}
a:hover { color:#213c9c; text-decoration:underline;}
a:active { color:#213c9c; text-decoration:none;}
a.anker {display: block; position: relative; top: -110px; visibility: hidden;}
td {padding:3px;}
hr {color:#127; background-color:#127; margin-top:-2px; margin-bottom:7px; height:1px; border:none;}
.sub-hr{color:#213c9c; background-color:#213c9c;}
p {margin-top:0px; margin-bottom:5px;}
ul li{display: list-item; list-style-image: url('../bilder/liste.gif'); line-height : 1.3em; margin-left:10px; margin-top: 5px; margin-bottom: 1px; text-align:left}
ol{margin-top:0px;}
blockquote {font-style: italic}
label{margin:0px;}
*, ::after, ::before {
box-sizing: border-box;}
img{max-width:100%;}
.hintergrund{background-color:#fceec1; background-image:url('../bilder/hintergrund.jpg'); background-repeat:no-repeat; background-size: 100% auto; background-attachment:fixed;}
.header{
position:relative;
	border: none;
	margin: 0px;
	padding: 0px;
	z-index:2;
	display: flex;
	justify-content: center;}
.kopf{
display:grid;
position:relative; top:0px;
padding: 0px;
background-color:#fffd;
width:1200px;}
.kopf-mobil{display:none;
position:relative; top:0px;
padding: 0px;
background-color:#fffd;
width:100%;}

.menubalken{position:absolute;
	border: none;
	margin: 0px;
	padding: 0px;
	z-index:100;
	width:100%;
	display: flex;
	justify-content: center;}
.menuinhalt{
display:inherit;
position:relative; top:0px;
padding: 0px;
background-color:#127;
width:1200px;
box-shadow: 2px 2px 4px 0px #2225;
justify-content:space-between;}
.home {position:relative; box-sizing:border-box;  bottom: 0; z-index: 110; display:inline-block;}
.home a div{ height: 50px; width: 125px; background: url('../bilder/home.gif') no-repeat 4px 8px; background-size:51px; color: #fff; text-indent: 50px; padding-top: 16px; font-size:21px; font-variant:small-caps;}
.home a:hover div {background-color: #67c}
.suchfeld{height:34px; width:300px; border: none; padding:5px; position:relative;  z-index: 110; margin-top: 8px; font-family: 'Cardo', Constantia, Book Antiqua; font-size:17px;}
.suchergebnis ul{display:block; position: absolute; top: 43px;  padding: 0; background: #eeee; width:auto; height:auto; box-shadow: 2px 2px 4px 0px #2225; z-index:50;}
.suchergebnis ul li {display:block; height:30px; position:relative; width:100%; line-height : 1em; margin-left:0px; margin-top: 0px; margin-bottom: 0px; text-align:left}
.suchergebnis li a{display:block; font-size:15px; height:30px; width:100%; line-height:29px; text-indent:7px; margin-right:7px; color:#000; text-decoration:none;}
.suchergebnis li a:hover{background-color:#fff}
.suche-lupe{padding-left:50px; background:#127 url('../bilder/suche.png') no-repeat; background-size: 42px; background-position: 5px 5px;}
.versandland{margin-left:10px; margin-right:5px; padding-left:50px; color: #fff; font-size:21px; font-variant:small-caps; background: url('../bilder/versandland.png') no-repeat -5px 8px; background-size: 60px;}
.versandland form{display:inline;}
.versandlandauswahl{margin-top:8px; margin-right:20px; width:120px; height:34px; border:none; background:#fff; font-family: 'Cardo', Constantia, Book Antiqua; font-size:17px;}
    .warenkorb-header {
        position: relative;
        z-index: 110;
		display:inline-block;
		box-sizing:border-box;
		float:right;
    }
    .warenkorb-header a div{
        height: 50px; width: 220px;
        color: #fff;
padding-top: 16px;
        text-indent: 50px;
		font-size:21px; font-variant:small-caps;
background: url("../bilder/warenkorb.png") no-repeat -5px 7px;
        background-size: 70px;
    }
.warenkorb-header a:hover div{background-color: #67c; }
.kontakt {position:relative; box-sizing:border-box;  bottom: 0; z-index: 110; display:inline-block;}
.kontakt a div{ height: 50px; width: 157px; background: url('../bilder/kontakt.png') no-repeat 4px 10px; background-size:51px; color: #fff; text-indent: 50px; padding-top: 16px; font-size:21px; font-variant:small-caps;}
.kontakt a:hover div {background-color: #67c}

.mitte{
position: relative; top:0px;
	padding-top: 50px;
	border: none;
	clear: both;
	display: grid;
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
}
.inhalt{
	display:block;
padding-top: 15px; padding-bottom: 15px; padding-left: 0px; padding-right: 0px;
background-color:#fffc;
width:1200px;
position:relative;
box-sizing: border-box;
}

.spalte {display:inline-block; margin-left:100px; width:1000px; }

.bilderbox {box-sizing:border-box; width:40%; display:inline-block; vertical-align:top; padding-top:25px; padding-right:5%;}
.textbox {box-sizing:border-box; width:55%; display:inline-block; }
.textbox p {text-align:justify;}
.artikelauswahl {box-sizing:border-box; width:436px; height:250px; display:inline-table; background:#eee; box-shadow: 2px 2px 4px 0px #2225; margin:7px; padding:15px; font-size:16px; position:relative;}

.start {
width: 100%;
box-sizing: border-box;
padding: 0px;
padding-right:40px;
padding-left:260px;
text-align:left;
position:relative;
display:inline-block;
}



.footer{
	position: relative;
	background: #444;
	color:#fff;
	min-height: 120px;
	height: 15%;
	width: 100%;
	border: none;
	margin: 0px;
	padding: 0px;
	z-index:1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align:left;
}
.footerinhalt{
padding-left: 260px; padding-right: 110px;
text-align:left;
}
.footer a { color:#e3e3e3; text-decoration:none;}
.footer a:visited { color:#e3e3e3; text-decoration:none;}
.footer a:hover { color:#fff; text-decoration:underline;}
.footer a:active { color:#e3e3e3; text-decoration:none;}

.right{float:right; margin-left:-290px; margin-bottom:10px; margin-top:10px; position: relative; left:320px}
.left{float:left; margin-right:20px; margin-bottom:5px;}
.verweis a{background-color:#0002; color:#000; padding: 7px 10px; text-decoration:none; line-height:40px; text-decoration:none; color:#444; text-align:right; max-width:300px; float:right; margin-left:-290px; margin-bottom:10px; margin-top:10px; position: relative; left:320px;}
.verweis a:hover {background-color:#0004;}

[id^=drop] {display:none;}
[id^=drop] +label {display:none;}
.menu-rechts {position:absolute; right:0px; z-index:40;}

ul.seitenmenu{
	position: absolute;
	top:55px;
box-sizing: border-box;
width: 250px; /* width of menu */
float:left;
padding: 0;
padding-right:10px;
padding-top:10px;
margin: 0;
list-style: none;
z-index:40;
max-height: calc(100vh - 55px); overflow-x:hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

ul.seitenmenu li{
margin: 0;
margin-bottom: 5px;
margin-right:10px;
padding:0;
width: 100%;
list-style:none;
}

ul.seitenmenu li a{
display:block;
width: 100%;
box-sizing: border-box;
font-variant:small-caps; 
font-size:19px;
color: #494949;
padding: 5px 15px;
margin: 0 auto;
text-decoration: none;
text-align:left;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
background-color: #eeee;
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
box-shadow: 2px 2px 4px 0px #2225;
}

ul.seitenmenu li a:hover, ul.seitenmenu li a.selected{
color: black;
background-color: #ddde;
}
ul.seitenmenu li label{
display: block;
    width: 30px;
	height: 33px;
    margin-right: 3px;
    background: #aaa url('../bilder/right.gif');
    box-shadow: 2px 2px 4px 0px #2225;
	float: right;
	position:relative;
    top: -33px;
    right: -2px;
}
[id^=seitenmenu]:checked ~ label { background: #999 url('../bilder/down.gif') no-repeat 10px 0px;; }

.seitenmenu ul {box-sizing: border-box; max-height:0vh; width:100%; overflow:hidden; transition: max-height 1s; margin:0; padding:0; padding-right:15px; position:relative; left:15px; top:-30px; margin-bottom: -35px}
[id^=seitenmenu]:checked ~ ul { max-height:100vh; }
[id^=seitenmenu] {display:none;}


/*Pop-up beim in dem Warenkorb legen*/

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 8010;
    background: url("../bilder/fancybox_overlay.png");
}

.pop-up {
    z-index: 8020;
    background-color: #fff;
    position: fixed;
    top: 50%;
	left:50%;
	width:600px;
    height: auto;
    padding: 20px;
    border: 2px solid #213c9c;
	margin-left:-300px;
	margin-top:-150px;
	text-align: left;
    
}


/*Abschnitte einblenden*/

table.accordion {
    background:  url(../images/down.gif) no-repeat right 5px;
	background-color: #0001;
    cursor: pointer;
	display:block;
	box-sizing: border-box;
    padding: 8px 20px;
    width: 100%;
    text-align: left;
    transition: 0.4s;
}

table.accordion.active, table.accordion:hover {
    background-color: #0001;
}
table.panel {
table-layout: fixed;
	display:block;
	box-sizing: border-box;
    padding: 0px 20px;
	background-color: #00000003;
    border-bottom: solid 1px #ccc;
	width: 100%;
    max-height: 0;
	overflow: hidden;
    transition: max-height 0.9s ease-out;
}



.button{border:0px; box-shadow: 2px 2px 4px 0px #2225; background: #67c; padding:5px; font-family: 'Cardo', Constantia, Book Antiqua; font-size:17px; font-variant:small-caps; font-weight: bold; color:#fff; cursor: pointer; position:relative; float:right;}
.button:hover {background: #213c9c;}
.grau{background: #bbb;}
.grau:hover{background: #aaa;}
.buttonloeschen{ border:0px; margin-left:5px; background:url('../bilder/loeschen.png') no-repeat; width:16px; height:16px;}
.buttonloeschen:hover {background:url('../bilder/loeschen-mouseover.png') no-repeat;}
.warenkorb{position:absolute; bottom:10px; right:10px; width:170px;}
.anzahl {position:absolute; bottom:10px; right:180px; box-sizing: border-box; width: 40px; height:32px; border: 1px solid #67c; box-shadow: 2px 2px 4px 0px #2225; text-indent:4px; font-family: 'Cardo', Constantia, Book Antiqua; font-size:16px; float:right;}
.preis{border:0px; box-shadow: 2px 2px 4px 0px #2225; border-radius:50%; background: #eb0; padding:10px 5px; font-family: 'Cardo', Constantia, Book Antiqua; font-size:12px; line-height:1.4em; font-variant:small-caps; font-weight: bold; color:#fff; text-align:center; position:absolute; top:180px; left:140px;min-width:62px; min-height:62px;}
.preis p {font-size:19px;}
.formular { border: 1px solid #aaa; border-radius:3px; padding:4px; margin-top:5px; font-family: 'Cardo', Constantia, Book Antiqua; font-size:15px;}
.textfeld{width:570px;}
.anz{width:50px;}
.absenden{padding:4px; margin-top:5px; font-family: 'Cardo', Constantia, Book Antiqua; font-size:15px;}
.produktinfo {font-size:17px; font-family: Cardo, Book Antiqua, Constantia; text-transform:uppercase; letter-spacing:1px; color:#213c9c;}

.loeschen{display:inline-block; margin-left:5px; background:url('../bilder/loeschen.png') no-repeat; width:16px; height:16px;}
.loeschen:hover{background:url('../bilder/loeschen-mouseover.png') no-repeat;}
.bearbeiten{display:inline-block; margin-left:5px; background:url('../bilder/bearbeiten.png') no-repeat; width:16px; height:16px;}
.bearbeiten:hover{background:url('../bilder/bearbeiten-mouseover.png') no-repeat;}
.calendar{display:inline-block; margin-left:0px; margin-right:-9px; background:url('../bilder/kalender.png') no-repeat; width:16px; height:16px;}
.calendar:hover{background:url('../bilder/kalender-mouseover.png') no-repeat;}

.blaettern{padding:2px; display:inline-block; min-width:30px; background-color:#eee; margin:4px; color:#444; box-shadow: 2px 2px 4px 0px #2225;}
.blaettern:hover{background-color:#ddd; text-decoration:none; color:#444;}
.blaettern:visited{color:#444;}
.blaettern_aktiv{padding:2px; display:inline-block; min-width:30px; background-color:#127; color:#fff; margin:4px; box-shadow: 2px 2px 4px 0px #2225;}
.blaettern_aktiv:hover{text-decoration:none; cursor:default; color:#fff;}
.blaettern_aktiv:visited{color:#fff;}

.fortschritt{width:241px; height:40px; position:relative; display:inline-block; padding:10px; padding-left:30px; background:#eee; font-variant:small-caps; margin-right:5px; z-index:1; }
.komplett{background:#127; color:#fff; z-index:2;}
.zahlungsart{margin-left:5px;}
 #img_01 {width:100% !important; }
/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white; height:100px; width:auto !important;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}


@media only screen and (max-width : 1200px) {
.menuinhalt {width:100%}
[id^=drop] +label {display:inline-block;}
.menu_mobil{width:50px; height:50px; display: block; background: url('../bilder/menu-mobil.png') no-repeat; background-size: 40px; background-position: 6px 12px;  z-index: 100; color:#fff; text-decoration:none; font-variant:small-caps;}
input[type=checkbox]:checked + label  div.menu_mobil{background: url('../bilder/menu-mobil-close.png') no-repeat; background-size: 40px; background-position: 6px 12px;}
.seitenmenu {display:none; position: fixed; top:5px; left:0px; }
[id^=drop]:checked ~ ul { display: inline-block; background:#eeee; z-index: 200; height:auto; overflow: auto;}
[id^=drop] {display:none;}
.home{margin:0;}
.home a div{width: 50px; background-position: 1px 8px;}
.home a div span {display:none;}
.warenkorb-header a div{width: 90px;}
.warenkorb-header a div span {display:none;}
.versandland span {display:none;}
.kontakt{margin:0;}
.kontakt a div{width: 50px; background-position: -1px 10px;}
.kontakt a div span {display:none;}
.mitte {display:block;}
.inhalt{width:100%; box-sizing: border-box; }
.spalte {width:94%; margin-left:3%; margin-right:3%;}
.start {padding-left:1%;
padding-right:1%; }
.start img {filter: none;}
.right{float:right; margin-left:-100px; margin-bottom:10px; margin-top:10px; position: relative; left:120px; max-width:80%; height:auto !important;}
.verweis a{float:right; margin-left:-100px; margin-bottom:10px; margin-top:10px; position: relative; left:120px; max-width:80%;}
.footerinhalt{padding-left: 10px; padding-right: 10px;
width:100%; box-sizing: border-box;}
}
@media only screen and (max-width : 1030px) {
.menu-rechts {position: fixed; top:40px;}
.menu_mobil_seite{position:relative; top:50px; right:0px; width:15px; height:100px; display: block; vertical-align:top; background: #000a url('../bilder/left.gif'); padding-top:30px; padding-left:0px; z-index: 90;}
input[type=checkbox]:checked + label  div.menu_mobil_seite{background:#000a url('../bilder/right.gif');}
}

@media only screen and (max-width : 650px) {
h1 { font-size:26px; line-height:26px; margin-bottom:5px; margin-top:10px;}
h2 { font-size:20px;}
.kopf{display:none;}
.kopf-mobil{display:grid;}
.suche_mobil{width:50px; height:50px; display: block; background:#127 url('../bilder/suche.png') no-repeat; background-size: 42px; background-position: 5px 5px; }
.versandland{width:50px; padding:0; background:none;}
.versandland_mobil{width:50px; height:50px; display: block; background:#127 url('../bilder/versandland.png') no-repeat -5px 8px; background-size: 60px; }
.warenkorb-header a div{width:70px; text-indent:40px; background-position: -10px 7px;}
.suche-lupe{padding:0; background:none; width:50px;}
.suchfeld{ display:none; }

.versandlandauswahl{ display:none; }
[id^=drop]:checked ~ .suchfeld { display: block; position:absolute; left:0px; top:40px; width:100%; border:1px solid #127; z-index: 200;}
[id^=drop]:checked ~ .versandlandauswahl { display: block; position:absolute; top:40px; border:1px solid #127; z-index: 200;}
.suchergebnis ul{top:82px; left:0;}
.inhalt{ padding-right: 10px;
width:100%; box-sizing: border-box;}
.right{ max-width:50%; float:right; margin-left:15px; margin-bottom:10px; margin-top:10px; position: relative; left:10px;}
.textfeld{width:100%;}
.verweis a{max-width:50%; float:right; margin-left:15px; margin-bottom:10px; margin-top:10px; position: relative; left:20px;}
.footerinhalt{padding-left: 5px; padding-right: 5px;
width:100%; box-sizing: border-box;}

/*menu links*/
[id^=drop]:checked ~ ul { display: inline-block; }
[id^=drop] {display:none;}
.pop-up {width:100%; margin-left:-50%;}
.pop-up img {width:30%;}
.pop-up .button{float:left; margin-bottom:10px;}

.kontakt a div{display:block}
}

@media only screen and (max-width : 470px) {
	.artikelauswahl{width:100%}
	.artikelauswahl img {width:35%; margin-right:5%;}
	.preis{left:7px; bottom:9px; top:auto;}
	.bilderbox{display:block; width:100%;}
	.textbox{width:100%;}
}

.fixed{position:fixed; top:0px;}

/*Aufklapp bei Adresse*/
.aufklappen-unten{display:block;}
[id^=aufklapp]:checked ~ div { display: none; }
.zoomContainer { z-index: 99; }

/*(Gruppen-) Auswahl dropdown*/
.auswahl {list-style-type:none; padding:0; margin: 8px 0; z-index:200; position:relative; top:0px; left:0px; width: 157px;}
.auswahl li {position:relative; display:block; line-height : 1.3em; margin-left:0px; margin-top: 0px; margin-bottom: 0px; text-align:left}
.auswahl li a {pointer-events: none; cursor: pointer; background:#f1f1f1; display:block; width:144px; border: 1px solid #aaa; border-radius:3px; margin:0; padding:5px; text-decoration:none; text-align:center; color:#444;}
.auswahl li a:hover{color:#fff; background:#127; border: 1px solid #127;}
.auswahl li:hover > a{color:#fff; background:#127; border: 1px solid #127;}
.auswahl li ul {display:none;  z-index:200; width:154px;  border: 1px solid #aaa; padding:0;}
.auswahl li:hover ul {display:block; list-style-type:none; position:absolute; left:0px; z-index:200; padding:0; background:#f1f1f1;}
.auswahl ul li { position:relative; float:left; margin:0; padding:0; display:block; line-height : 1.3em; text-align:left}
.auswahl ul li a:link,
.auswahl ul li a:visited{pointer-events: auto; display:block; width:140px; height:auto; background:#f1f1f1; border:0; margin-right:0px; padding: 7px; text-decoration:none; text-align:left; color:#444;}
.auswahl ul li a:hover {background:#e3e3e3; color:#127;}

@media (min-width: 992px){
.col-lg-3 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
max-width: 20%;}}
@media (min-width: 768px) and (max-width: 992px){
.col-md-4 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
max-width: 25%;}}
@media (min-width: 576px) and (max-width: 768px) {
	.col-sm-6 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
max-width: 33.333333%;}}
@media (max-width: 576px) {
	.col-12 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
max-width: 50%;}}

.carousel-item a img {max-height:200px; filter: grayscale(60%); transition: filter 0.5s;}
.carousel-item a:hover img {filter: none;}