/************************************************/
/*    © by Werbeagentur Gössler & Sailer OG     */
/*             www.goesslersailer.at            */
/************************************************/
/*                    Shop                      */
/************************************************/


.clear_left {clear:left; height:1px; margin-bottom:-1px;}
.clear_right {clear:right; height:1px; margin-bottom:-1px;}
.clear_both {clear:both; height:1px; margin-top:-1px;}
.titel {font-size: 105%; margin-top: 10px}
.titel-start {font-size: 120%;}
.txt {font-size: 90%}
p i {margin-right: 10px}
.text-right {text-align: right;}
.text-left {text-align: left}
.padding_block_o {padding:15px 0 0 0}
.padding_block_r {padding:0 15px 0 0}
.padding_block_u {padding:0 0 15px 0}
.padding_block_l {padding:0 0 0 15px}
.padding_border {border: 5px transparent solid}
.padding_block_wk {padding:0 0 15px 0}
.padding_block_wk_o {padding:10px 0 0 0}
.btnpay-right {float: right;}  
.bez_info {width: 100%; background-color: #e2001a; color: #ffffff; padding: 20px; margin-top: 15px; display: none;}
.no-diversion {float: right; margin: 3% 10px 0 0}
.serv-info-box {border-right:1px #d5d2d0 solid}

progress {
  width: 90%;
  margin: 8px 0 5px 0;
  height: 5px;
}

.agb-checkbox {width:100%; padding: 30px!important; color: #000; position: relative;}
.oeko-info {width: 100%; padding: 30px; background-color: #3CAA4F; color: #ffffff; text-align: center; border-radius: 3px}
.energy {display: flex; color: #000; text-decoration: underline; font-size: 100%; padding: 5px 0 0 0}
.energy img {width: 45px; height: auto; margin-right: 10px}

/************************************************/
/*                    Pflichtfelder             */
/************************************************/

#pflicht_layer	{width:auto; color:#7F7F7F; font-size:100%; border:2px #7F7F7F solid; display:none; padding:16px 0px 16px 0px; margin:20px 0px 20px 0px;}
#pflicht_icon	{float:left; width:34px; margin:0px 16px 0px 16px;}
#pflichtfelder	{float:left; width:auto; margin:0px 16px 0px 0px; color:#7F7F7F; font-size:100%;}
#pflichtfelder	a{color:#7F7F7F; text-decoration:underline;}
.pflicht_info	{}
.pflicht_abs	{padding-top:3px; line-height:normal;}
.pflicht		{color:#7F7F7F}



.bestell_tbl	{width:100%; margin-top:40px;}
.bestell_tbl th {text-align:left; padding:0px 2px 5px 2px; font-weight:bold;}
.bestell_tbl td {padding:15px 2px 10px 2px; vertical-align:middle; cursor:pointer; border-bottom: 1px #ccc dotted;}

.merkerliste-head {float:right; margin-right:30px;}
.aus {}
.ein {display:none;}
.clearmob {clear:none}

.btnEdit {padding:5px 10px; text-decoration:none; color:#FFFFFF; background-color:#e2001a; font-size:100%; text-align: center; border-radius: 3px; max-width: 110px; margin: 10px 0; display: block}
.btnEdit:hover {background-color:#000; color:#FFFFFF;}

/*input.btnEdit{padding:5px; text-decoration:none; color:#FFFFFF; background-color:#e2001a; border:0px; font-size:100%; text-align: center; border-radius: 3px}
a.btnEdit:link,a.btnEdit:visited,a.btnEdit:active {padding:5px 10px!important; text-decoration:none; color:#FFFFFF; background-color:#e2001a; font-size:100%; text-align: center; border-radius: 3px; max-width: 110px; margin: 10px 0}
a.btnEdit:hover,input.btnEdit:hover {color:#FFFFFF; background-color:#000; background-image:none;}*/

.shopschritte {margin:20px 0px 40px 0px; padding:5px 0px 5px 0px; font-size:120%; border-top:1px #d5d2d0 dashed; border-bottom:1px #d5d2d0 dashed;}
.shopschritte ul {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
.shopschritte ul li {display:block; list-style:none; float:left; text-align:center; padding:5px 0px 5px 0px; line-height:20px; margin:0px 0px 0px 0px; width:25%; color:#d5d2d0;font-size:90%; }
.shopschritte ul li.aktiv {color:#e2001a;}
.shopschritte ul li span {font-size:160%; line-height:normal;}
.shopschritte ul a {color:#737373; text-decoration:none;}
.shopschritte ul a:hover {color:#000; text-decoration:none;}
.shopschritte ul::after {content:""; clear:left;display: block}
.shopschritte_kontrolle {font-size:150%; text-align: center; margin:20px 0px 40px 0px; padding:15px; border-top:1px #d5d2d0 dashed; border-bottom:1px #d5d2d0 dashed; line-height: 130% }
.shopschritte_kontrolle::after {content:""; clear:left;display: block;}

.datenblatt_block{
        width:auto; 
        padding: 10px 20px; 
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color:#FFFFFF; 
        float:left; 
        margin:5px 10px 5px 0px;
        display: block;
        cursor: pointer;
        background-color: #e2001a;
        border-radius: 3px;
        }
        
.datenblatt_block:hover {
    background-color: #000;
    }

a.datenblatt_block:link,a.datenblatt_block:visited,a.datenblatt_block:active {color:#FFFFFF;}
a.datenblatt_block:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;}

.lieferadressen {margin:20px 0px 50px 0; padding: 0px}
.lieferadressen div {cursor:pointer; margin-bottom:5px; padding:15px;}
.lieferadressen .aktuell {color:#e2001a; font-weight:bold;}


.zahlungsart {margin:0px 0px 20px 0px; display:block; }
.zbox {float:left; width:33%;}
.zahlungsart input[type=radio] {float:left; margin:5px 10px 0px 0px;}
.zahlungsart .abs {margin:5px 0px 5px 0px;}

.gutschein_box {background-color:#EDEDED; padding:20px 20px 20px 20px; margin:0px 0px 15px 0px; display:block;}
.gutschein_box a{}

.kontrolle_tbl {margin-top:10px; font-size:100%;}
.kontrolle_tbl th {padding:2px 0px 2px 0px; text-align:left; font-weight:bold; font-size:110%;}
.kontrolle_tbl td {padding:4px 4px 4px 4px;}

.shop_block_kontrolle {float:left; width:50%; margin-top:20px;}


#warenkorb_bg {position:fixed; top:0; left:0; bottom:0; right:0; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3; z-index:102;}
#warenkorb_outer {display:none;}
#warenkorb {width:650px; position:fixed; left:50%; top:45%; margin-left:-325px; margin-top:-325px; z-index:103;}

.wk_rahmen	{z-index:105;position:absolute;border:0px #e2001a solid;width:100%;padding:25px;background-color:#FFFFFF;-webkit-box-shadow:0px 0px 20px 8px rgba(0, 0, 0, 0.45);box-shadow:0px 0px 20px 8px rgba(0, 0, 0, 0.45);}
.wk_rahmen_empf	{z-index:104; width:100%; margin:0px; padding:0px; background-color:#FFFFFF; }
.wk_bild	{width:30%;float: left}
.wk_ani	{width:100%; text-align: center;}
.wk_bild div{margin:auto;}
.wk_content	{float:right; width:100%; margin:0px 0px 0px 20px; position:relative;}
.wk_close	{position:absolute; top:0px; right:0px; width:18px; height:20px;}
.wk_ueber	{background-color:#e2001a; color:#FFFFFF; font-size:120%; padding:10px; text-align: center}
.wk_titel	{padding:20px 0px 20px 0px; text-align:center; font-size:150%;}
.wk_text	{width:70%; padding:0 0 0 20px; text-align:left; float: left}
.wk_texttitel{width:130px; display: inline-block; line-height: 24px}

.wk_buttons {height:34px;}
.wk_buttons a {display:block; width:45%; height:45px; line-height:45px; text-align:center; font-size:100%; color:#e2001a; background-color:#dcdcdc; border-left:1px #DCDCDC solid; border-right:1px #DCDCDC solid; text-transform: uppercase;}
.wk_buttons a:hover {background-color:#000; background-image:none; text-decoration:none; color:#FFFFFF;}
.wk_buttons a.left {float:left;}
.wk_buttons a.left:hover {background-color:#000; border-left:1px #000 solid; border-right:1px #000 solid; background-image:none; text-decoration:none; color:#FFFFFF;}
.wk_buttons a.right {float:right;}
.wk_buttons a.right:hover {background-color:#000; border-left:1px #000 solid; border-right:1px #000 solid; background-image:none; text-decoration:none; color:#FFFFFF;}

.coupon {width:80px; margin:auto 15px 5px 0; text-align: center; font-size: 300%; color: #e2001a; padding: 5px 0 0 0 }

.start-art-box {
    width: 100%;
    border: 1px #DDDDDD solid;
    padding: 20px;
    text-align: center;
    margin: 8px;
    border-radius: 5px;
}

.gruppe {float:left; width:calc(20% - 12px); margin:5px; border: 0px solid #fff; border-radius: 5px; position:relative; cursor:pointer; padding: 10px; background-color: #fff; -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}
.gruppe:hover {border: 0px solid #fff; -webkit-box-shadow: 0px 0px 2px 0px rgba(226,0,26,0.9); box-shadow: 0px 0px 5px 0px rgba(226,0,26,0.9);}
.gruppe div.pic {text-align:center;}
.gruppe div.pic img{max-width:100%;margin: auto}
.gruppe .titel{text-align:center; font-size: 100%;}

.detail-grundbox {width: calc(100% - 250px); float: left}
.katnav-grundbox {width:calc(100% - 30px); margin:10px 30px 0 0; border:1px #efefef solid; padding: 5px;}

/* Listenansicht #ececec */
.artikel_trenn {clear:both; height:59px; background-image:url('../img/artikel_trenn_hor.jpg'); background-repeat:no-repeat;}
.artikel {float:left; width:19%; margin:1% 0 0 1%; border: 0px #fff solid; position:relative; cursor:pointer; padding: 8px; border-radius: 5px; 
            -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);}
.artikel:hover {border: 0px #fff solid; background-color: #fff; -webkit-box-shadow: 0px 0px 2px 0px rgba(226,0,26,0.9); box-shadow: 0px 0px 5px 0px rgba(226,0,26,0.9);}
.mp {min-height:270px;}
.artlist-tree-box {width: 250px}
.artlist-box1 {float: left; width: calc(100% - 250px)}
.artlist-box2 {float: left; width: 100%}
.artikel p.titel {margin: 0; font-size: 100%; padding:5px 0 0 0; line-height: normal;hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; word-break: normal; overflow-wrap: break-word;}
.artikel div.abs {width:100%; height:auto; cursor:pointer;}
.artikel div.abs.left{float:left; margin-right:40px;}
.artikel div.abs.right{float:right; margin-left:41px;}
.artikel div.pic {position:relative; text-align: center; width: 100%}
.artikel div.pic .img-art-thumb{ padding:0px; aspect-ratio: 7/7; object-fit: cover; width: 100%}
.artikel div.pic-start img{ padding:0px; max-width:100%; max-height:300px;}
.artikel div.abs div.pic div.neu{position:absolute; left:0px; top:-10px;}
.artikel div.abs div.pic div.ansicht{position:absolute; left:9px; top:15px; height:93px; width:92px; background-image:url('../img/shop/detailansicht.png'); background-repeat:no-repeat; display:none;}
.artikel div.abs div.pic div.ansicht.aktion{background-image:url('../img/shop/detailansicht_aktion.png');}
.artikel div.detail {padding:0px 10px 0px 10px; width: 100%}

.artikel div.abs div.detail div.titel {margin:0px 0px 0px 0px; font-size:130%; color:#e2001a; font-family:TradeGothic; font-weight:bold; line-height:normal;}
.artikel div.abs div.detail div.titel.aktion {color:#e2001a;}
.artikel div.abs div.detail div.titel a {color:inherit; font-weight:bold; text-decoration:none;}
.artikel div.abs div.detail div.titel a:hover {text-decoration:underline;}

.artikel div.detail div.text {bottom:5px; width:100%; line-height: 30px; margin-bottom: 15px}

.art_nr {font-size:85%; padding:0; text-align: left;}
.preis {color: #e2001a; text-align: right; font-size: 120%; padding: 0; font-weight: 500;}
.artikel div.abs div.detail div.preis.aktion {color:#e2001a;}
.artikel div.abs div.detail div.preis span{font-size:75%; font-weight:normal; padding-left:5px;}
.artikel_bilder_thumb {margin:5px 0 20px 0; float: left; width:100%}
.stattpreis {text-align: left; font-size: 90%; font-style: italic}
.stattpreis span{text-decoration:line-through;}
.preisbox {padding: 9px 0px 0px 0px; border-top: 1px #d4d4d4 dashed;}
.start-preisbox {padding: 9px 0px 0px 0px; border-top: 1px #d4d4d4 dashed;margin: 20px 0}
.startpreis {color:#e2001a; text-align:left; font-size:130%; padding: 5px 0px 0px 0;}
.Aktionsartikel {}


.shop_filter {margin:15px 0px 5px 0px;}
.shop_filter div.dps {float:left; white-space:nowrap;}
.shop_filter div.dps div {float:left; padding-top:3px; margin-right:5px;}
.shop_filter div.dps select {float:left; padding:5px 20px 5px 5px; color:#000; border:1px #DDDDDD solid; margin-top:3px;}
.shop_filter div.so {float:right; white-space:nowrap;}
.shop_filter div.so div {float:left; padding-top:3px; margin-right:5px;}
.shop_filter div.so select {float:left; padding:5px 30px 5px 5px; color:#000; border:1px #DDDDDD solid; margin-top:3px;}

.shop_aktionen{width:1000px; height:46px; margin:auto; border:1px #d5d2d0 solid; border-top:0px; background-image:url('../img/finder_hg.png'); background-position:top;}

.lagerstand {
  font-size: 90%;
}

.lagerzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  line-height: 10px;
}

.lagerort {
  display: inline-flex;
  align-items: center;
  color: #232323;
  text-decoration: none;
  min-width: 220px;
  margin-right: 12px;
}

.lagerinfo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 235px;
}

.icon2 {
  color: #747474;
  margin-right: 4px;
}

.icon.gruen { color: #087000; }
.icon.gelb  { color: #FFCC00; }
.icon.rot   { color: #D30000; }

.text {
  padding: 0;
  color: #232323;
}

.text a {
  color: inherit;
  text-decoration: none;
}



.lager_rot {color:#D30000;}
.lager_rot a{color:#D30000; text-decoration:none;}
.lager_gelb {color:#BE9A00;}
.lager_gelb a{color:#BE9A00; text-decoration:none;}


.cell_menge {float:left; border-left:0px #DDDDDD solid; margin: 10px 0 0 0}
.cell_menge div.text {float:left; height:37px; line-height:37px; color:#e2001a; font-size:125%; padding:0px 5px 0px 5px;}
.cell_menge div.feld {float:left; border:1px #DDDDDD solid; text-align:center;margin:0px!important;}
.cell_menge div.feld input{border:0px; padding:0px; margin:0px!important; text-align:center; height:35px; line-height:35px; color:#404040;}

.cell_wk {float:right;}
.cell_wk a.btnWk:link,.cell_wk a.btnWk:visited,.cell_wk a.btnWk:active {}
.cell_wk a.btnWk:hover	{}
.cell_wk a.btnWk:link span,.cell_wk a.btnWk:visited span,.cell_wk a.btnWk:active span {display:block; padding:12px; text-decoration:none; color:#FFFFFF; background-color:#e2001a; font-size:120%;}
.cell_wk a.btnWk:hover span	{color:#FFFFFF; background-color:#000;}


a.btnMerker:link span,.cell_wk a.btnWk:visited span,.cell_wk a.btnWk:active span {display:block; padding:12px; text-decoration:none; color:#FFFFFF; background-color:#e2001a; font-size:120%;}
a.btnMerker:hover span	{color:#FFFFFF; background-color:#000;}
.btnMerker{border: 1px #DDDDDD solid; padding:5px; margin:0px; height:28px; line-height:28px; color:#404040;}
.merk-box {margin:30px 0px 0px 0px; position:relative; padding: 15px; background-color: #f2f2f2; border-radius: 3px}
.frag-box {margin:30px 0px 0px 0px; padding: 15px; background-color: #f2f2f2; border-radius: 6px; text-align: center}
/* Gruppen */
.stg-box{background-color: #e2001a; padding: 50px 25px; text-align: center; color: #FFFFFF; border: 5px #fff solid}
.stg-box:hover{background-color: #EFEFEF; color: #e2001a;}

.stg-box-small{background-color: #e2001a; padding: 30px 10px 10px 10px; text-align: center; color: #FFFFFF; border: 5px #fff solid; font-size: 90%;line-height: 20px; border-radius: 10px;}
.stg-box-small:hover{background-color: #000; color: #fff;}

.stg-boxicon {font-size: 300%}

/* Detailansicht */
.art_detail {padding: 10px 20px; background-color: #fbfbfb; border-radius: 3px}
.art_detail div.abs {margin:2px 0px 2px 0px;}
.art_detail div.abs div.ueber {font-weight:bold; margin-bottom:3px;}
.art_detail div.preis {font-size:180%; color:#e2001a; line-height:normal;}
.art_detail div.preiskupfer {font-size:140%;line-height:normal;}
.art_detail div.preiskupfer  span{font-size:75%; font-weight:normal; padding-left:5px;}

.art_detail div.preis.aktion {color:#e2001a;}
.art_detail div.preis span{font-size:75%; font-weight:normal; padding-right:5px;}
.art_detail div.stattpreis {font-size:130%; color:#e2001a; line-height:normal;}
.art_detail div.stattpreis span{text-decoration:line-through;}

.row_wk {margin:5px 0px 5px 0px; padding:10px 0px 30px 0px; border-top:1px #d5d2d0 solid; border-bottom:1px #d5d2d0 solid;}
.trennlinie2 {height:1px; border-top:1px #dddddd dashed; margin:20px 0px 20px 0px;}

.gutscheincode-feld {width:100%;}

.detail_tel {margin:15px 0px 0px 0px; text-align: center}
.shop_seiten {margin:15px 0px 3px 0px;}
.artikel_detail_pix {display:inline-block; padding:0 20px 0 0; height:auto; max-width:553px; width:100%;}
.artikel_neu {position:absolute; top:-5px; left:-10px; z-index:1}
.artikel_neu img {width: 70px; height: auto}

.artikel_neudetail {position:absolute; top:0px; left:0px; z-index:1}
.artikel_neudetail img {width: 60px; height: 60px}

.warenkorb_tbl {width:100%;}
.warenkorb_tbl th {padding:3px; font-weight:bold; text-align:left;}
.warenkorb_tbl th.right	{text-align:right; padding-right:10px;}
.warenkorb_tbl th.center{text-align:center;}
.warenkorb_tbl td {padding:10px 3px 0px 3px;}
.warenkorb_tbl td.right {text-align:right; padding-right:10px; /*vertical-align: top;*/}
.warenkorb_tbl td.center{text-align:center;}
.warenkorb_tbl span.ges_preis {font-size:140%; color:#000; line-height:normal;}
.warenkorb_tbl td div.lager a{color:#747474; text-decoration:none;}
.warenkorb_tbl td div.lager span{padding-right:5px; font-size:140%;}
.warenkorb_tbl td div.lager span.gruen {color:#087000;}
.warenkorb_tbl td div.lager span.gelb {color:#FFCC00;}
.warenkorb_tbl td div.lager span.rot {color:#D30000;}

.wk-preis-ges-info {width: 80%; text-align: right; float: left; font-size: 110%; margin-top: 10px}
.wk-preis-ges {width: 20%; text-align: right; float: left; font-size: 110%; margin-top: 10px; }

.rech_adress {float:left; width:45%; margin:0 5% 50px 0;}

.trenn_detail {border-bottom:1px #DDDDDD dotted;} 

.login_abs {margin-bottom:5px;}
.login_text	{height:22px; line-height:22px;}
.login_input {border:1px #E5E5E5 solid; height:20px; line-height:20px; padding:0px 2px 0px 2px;}
.login_vergessen {margin-top:8px;}
.login_vergessen a{color:#6E6F71;}
.login_eingeloggt {padding-top:3px; margin-top:8px;}
.ausloggen {float:right}

.abst-gut-zahl {padding: 0 20px 0 0}
.abst-info-zahl {padding: 0 0 0 20px}

.shop_aktionen{width:1000px; height:46px; margin:auto; border:1px #d5d2d0 solid; border-top:0px; background-image:url('../img/finder_hg.png'); background-position:top;}
.shop_seiten {margin:15px 0px 3px 0px;}

.lz_cbl img{
  animation: animationFrames linear 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  ;
  }
  3% {
    transform:  translate(0px,-10px)  ;
  }
  6% {
    transform:  translate(0px,0px)  ;
  }
  9% {
    transform:  translate(0px,-7px)  ;
  }
  12% {
    transform:  translate(0px,0px)  ;
  }
  15% {
    transform:  translate(0px,-5px)  ;
  }
  18% {
    transform:  translate(0px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  3% {
    -moz-transform:  translate(0px,-10px)  ;
  }
  6% {
    -moz-transform:  translate(0px,0px)  ;
  }
  9% {
    -moz-transform:  translate(0px,-7px)  ;
  }
  12% {
    -moz-transform:  translate(0px,0px)  ;
  }
  15% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  18% {
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  3% {
    -webkit-transform:  translate(0px,-10px)  ;
  }
  6% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  9% {
    -webkit-transform:  translate(0px,-7px)  ;
  }
  12% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  15% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  18% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  3% {
    -o-transform:  translate(0px,-10px)  ;
  }
  6% {
    -o-transform:  translate(0px,0px)  ;
  }
  9% {
    -o-transform:  translate(0px,-7px)  ;
  }
  12% {
    -o-transform:  translate(0px,0px)  ;
  }
  15% {
    -o-transform:  translate(0px,-5px)  ;
  }
  18% {
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  3% {
    -ms-transform:  translate(0px,-10px)  ;
  }
  6% {
    -ms-transform:  translate(0px,0px)  ;
  }
  9% {
    -ms-transform:  translate(0px,-7px)  ;
  }
  12% {
    -ms-transform:  translate(0px,0px)  ;
  }
  15% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  18% {
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.row {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-right:-15px;
  margin-left:-15px
}

.express-bg {
  background: url("../img/muster/express.svg") no-repeat top center/cover;
    width: 365px; border-radius: 5px; height: auto; padding: 15px}

/*=================================
  Produktbilder Slider
 =================================*/
.image-slider {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    
}

.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin: 0 0 15px 0
}

.slider-container a {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 100%; 
}

.slider-container img {
    width: 100%; 
    object-fit: cover; 
    object-position: center center;
    height: 100%; 
    max-width: 300px;

}

.image-slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 1;

}

.image-slider button:hover {
    background-color: rgba(226, 0, 26, 0.9);
    color: #ffffff;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.dots-container {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 5px;
}

.dots-container span {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color:#b9b9b9;
    cursor: pointer;
}

.dots-container .active {
    background-color: #e2001a;
}



/*=================================
  start  service section
 =================================*/
.service-sec {
  padding: 25px 0; margin: -75px 0 35px 0; background: url(../img/muster/service-bg.jpg) no-repeat center center/cover;}
  .service-sec .single-service {
    text-align: center;
    margin-bottom: 30px; }
    
    .service-sec .single-service:hover .service-img i {
      background: #ffffff;
      /*-webkit-transform: rotate(360deg);
              transform: rotate(360deg);*/
      color: #e2001a; 
      border: 3px solid #e2001a;}

    .service-sec .single-service .service-img {
      position: relative;}
      
    .service-sec .single-service .service-img img {
    width: 100%; 
    height: auto; 
    border-radius: 5px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    }
    
    .service-sec .single-service .service-img img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    }

    .service-sec .single-service .service-img i {
        margin: -35px auto auto;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: block;
        background: #e2001a;
        text-align: center;
        font-size: 130%;
        padding: 16px 0;
        color: #ffffff;
        position: relative;
        transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        border: 3px solid #ffffff;
        }

    .service-sec .single-service p {
      margin-bottom: 15px; font-size: 90%;}





.art-rechts {float: right}
.form_abs {padding:0px 0px 0px 0px; margin-top:20px;}
.form_abs.left {float:left; width:45%}
.form_abs.right {float:right; width:45%;}

.form_abs div.loader {float: left; margin: 0px 0px 0px 12px; width: 18px; display: none;}

.form_abs div.text-reg {font-weight:600; margin:0px;}
.form_abs div.feld {float:left; width:100%; margin: 10px 0}
.form_abs div.feld input[type=text],.form_abs div.feld input[type=password] {width:100%;box-sizing:border-box;}
.form_abs div.feld select {margin:0px;width:100%;box-sizing: border-box;-webkit-appearance: none;}
.form_abs div.feld textarea {width:100%; max-width:100%; height:80px; max-height:320px;box-sizing:border-box;}
.form_abs.left div.feld {width:100%;}
.form_abs.left div.feld input[type=text] {width:100%}
.form_abs.right div.feld {width:100%}
.form_abs.right div.feld input[type=text] {width:100%;}

.form_abs.right.small div.feld {width:100%;}
.form_abs.right.small {float:left; width:5%; margin-left:40px;}
.form_abs.right.large {float:right; width:42%; margin-left:0px;}

.form_abs div.icon {float:left;margin: 0px 0px 2px -27px; width:18px; display:none;}
.form_abs div.icon img{height:18px; width:18px;}

.form_abs.left.preis {margin-left:10%;width:20%;}
.passwort_icon{width:30px;height:30px;margin:14px 0 0 0;}

.bestellnummer {width:50%; float:left;}
.bestelldetail-list {margin-top:15px;width: 150px}



/************************************************/
/*                    Login                     */
/************************************************/

.loginfo_nav {
    float: right;
    background-color: #e2001a;
    color: #fff!important;
    text-align: center;
    font-size: 140%;
    padding: 23px 28px 20px 28px;
    margin-top: 48px
}

.loginfo_nav:hover{
    background-color: #000!important;
}

#kundenlogin{margin-top:-84px; display: none}
#kundenlogin{margin-bottom:0px;padding:15px 10px 40px 10px;color:#FFFFFF;background-color:#b0b7b6;width:100%; position:relative;}
#kundenlogin a{color:#FFFFFF;}
#kundenlogin .logintitel{float:left;font-size:210%; line-height:38px;}
.trennlinie_v {width:1px; height:38px; float:left; border-left:1px white solid; margin:0px 20px 0px 20px;}
#kundenlogin .angemeldet, .vergessen {font-size:100%; padding:1px 0px;}
#kundenlogin input[type=checkbox]{margin-right:8px;}

#kundenlogin input[type=text] {width:30%;height:35px; font-size:110%;margin-right:3%;border:0px;color:#000;padding-left:10px;}
#kundenlogin input[type=password] {width:30%;height:35px; font-size:110%;margin-right:3%;border:0px;color:#000;padding-left:10px;}

#kundenlogin input[type=button] {height:37px; font-size:120%;border:0px;background-color:#e2001a;color:white;cursor:pointer;padding:0px 10px;}
#kundenlogin input[type=button]:hover {background-color:#000;}

#kundenlogin input[type=submit] {width:30%;height:37px; font-size:120%;border:0px;background-color:#e2001a;color:white;cursor:pointer;padding-left:10px;}
#kundenlogin #kdlogin_error{padding:15px; display:none; text-align: center}
.kundenbereich_kl {float:left; margin-right:30px;}
.kundenbereich_kl_info {float:right; margin-right:30px;}

.login_form {float:left; width:60%;}

::placeholder {color: #e2001a; font-size:90%;}

#login_start{float: right; z-index: 14; position: absolute; width: 272px; top:-50px; right:7px; background-color: #e2001a; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);font-family:'Inter', sans-serif;}

#login_start #login_error{padding:0px 10px 10px 10px;display:none; border-bottom:1px white solid; margin-bottom:15px;}


/************************************************/
/*                  Member neu                  */
/************************************************/

.begruessung {padding: 0 15px 0 0 }
.pass-ver-box {}
.mob-only {display: none}
.merkerliste-head {float:right; margin-right:30px;}

.member-box-1 {background-color: aliceblue; padding: 2%; border: 5px solid #fff;  border-radius: 10px}
.member-box-2 {background-color: #f5f5f5; padding: 2%; border: 5px solid #fff;  border-radius: 10px}
.member-box-3 {background-color: #f8f8f8; padding: 2%; border: 5px solid #fff;  border-radius: 10px}

.member_feld_neu {border:1px #e3e3e3 solid; margin:0 0 25px 0; cursor:pointer; float:left; position:relative; height: 100%; border-radius: 15px}
.member_feld_neu .text {padding:4%;}
.member_feld_neu h4 {margin:10px 0px 0px 0px!important;}
.member_feld_neu .btn {width: 100%; font-size: 120%; display: block!important; padding:15px 5px!important}

.member_feld_neu_m {border:1px #e3e3e3 solid; border-radius:15px; margin:0 0 25px 0; cursor:pointer; float:left; position:relative;}
.member_feld_neu_m .text {padding:4%;}


/*.member_feld_neu .btn .btnSave_member {display:block;position:absolute; left:4%; bottom:10px; width:92%;text-align:center;padding:0px 25px 0px 25px; height:34px; line-height:34px; text-decoration:none;color:#FFFFFF; background-color:#e2001a; font-size:120%;}
.member_feld_neu .btn .btnSave_member:hover {background-color: #000}*/
.text {padding:10px 0;}
.text-proz {padding:20px;}

.member_feld_neu2 {border:1px #e3e3e3 solid; border-radius:0px; width:22%; min-width:250px; height:140px;  margin:0 0 25px 0; cursor:pointer; float:left; margin-right:3%; position:relative;}
.member_feld_neu2 .icon {float:left; margin:0 50px 0 0;}
.member_feld_neu2 .icon img {width:50px; height:50px;}
.member_feld_neu2 .ueberschrift{}
.member_feld_neu2 .text {padding:4%;}
.member_feld_neu2 .btn {width:auto; margin:auto;}
.member_feld_neu2 .btn .btnSave_member {display:block;position:absolute; left:4%; bottom:10px; width:80%;text-align:center;padding:0px 25px 0px 25px; height:34px; line-height:34px; text-decoration:none;color:#FFFFFF; background-color:#e2001a; font-size:120%;}
.member_feld_neu2 .btn .btnSave_member:hover {}
.member_feld_neu2 .btn .btnSave_member2 {display:block;position:absolute; left:84%; bottom:10px; width:12%;text-align:center;padding:0px 0px 0px 0px; height:34px; line-height:34px; text-decoration:none;color:#FFFFFF; background-color:#e2001a; font-size:120%;}
.member_feld_neu2 .btn .btnSave_member2:hover {}

.sbd-block-1 {width: 10%; padding: 5px; margin:5px 0}
.sbd-block-2 {width: 20%; padding: 5px; margin:5px 0}
.sbd-block-3 {width: 30%; padding: 5px; margin:5px 0}
.sbd-block-4 {width: 40%; padding: 5px; margin:5px 0}
.sbd-block-5 {width: 50%; padding: 5px 15px 5px 5px; margin:5px 0}

.sum-box {max-width: 200px; margin: 0 0 0 45px; min-width: 100px}
.sum-box-2 {max-width: 200px; min-width: 100px; float: right;}
.orderbox {
  display: grid;
  gap: 0px;
  grid-template-columns: 50% 50%; /* links | rechts */
  grid-template-areas:
    "one  three"
    "two  three";
}

.box-order-1 { grid-area: one; }   /* links oben  */
.box-order-2 { grid-area: two; }   /* links unten */
.box-order-3 { grid-area: three; } /* rechts über beide Reihen */

.video-container {
  position: relative;
  width: 50%;
  padding-bottom: 28.10%; /* Für 16:9-Videos (9 / 16 * 100) */
  height: 0;
  margin: 50px 0 0 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media (max-width: 1023px) {
  .orderbox {
    grid-template-columns: 100%;
    grid-template-areas:
      "one"
      "three"
      "two";
  }
}



/************************************************/
/*        Warenkorb Check Animation             */
/************************************************/
.circle{fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.circle-dash{fill:none;stroke:#000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.check{fill:none;stroke:#e2001a;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.check-dash{fill:none;stroke:#e2001a;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

.check {
stroke-dasharray: 60 100;
animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
-webkit-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
-moz-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
-o-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s; 
opacity: 0;
}

@-webkit-keyframes check {
from {stroke-dashoffset: 60;
opacity: 1;}

to {stroke-dashoffset: 00;
opacity: 1;}
}

@-moz-keyframes check {
from {stroke-dashoffset: 60;
opacity: 1;}

to {stroke-dashoffset: 00;
opacity: 1;}
}

@keyframes check {
from {stroke-dashoffset: 60;
opacity: 1;}

to {stroke-dashoffset: 00;
opacity: 1;}
}

.check-dash {
stroke-dasharray: 10 100;
animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
-webkit-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
-moz-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
-o-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards; 
}

@-webkit-keyframes check-dash {
from {stroke-dashoffset: 120;}
to {stroke-dashoffset: 45;}
}

@-moz-keyframes check-dash {
from {stroke-dashoffset: 120;}
to {stroke-dashoffset: 45;}
}

@keyframes check-dash {
from {stroke-dashoffset: 120;}
to {stroke-dashoffset: 45;}
}

.circle {
stroke-dasharray: 300 300;
animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
-webkit-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
-moz-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
-o-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s; 
opacity: 0;
}

@-webkit-keyframes circle {
from {stroke-dashoffset:300;
opacity: 1;}
to {stroke-dashoffset:0;
opacity: 1;}
}

@-moz-keyframes circle {
from {stroke-dashoffset:300;
opacity: 1;}
to {stroke-dashoffset:0;
opacity: 1;}
}

@keyframes circle {
from {stroke-dashoffset:300;
opacity: 1;}
to {stroke-dashoffset:0;
opacity: 1;}
}

.circle-dash {
stroke-dasharray: 10 300;
animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
-webkit-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
-moz-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
-o-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;
opacity: 0;
}

@-webkit-keyframes circledash {
from {stroke-dashoffset:320;
opacity: 1;}
to {stroke-dashoffset: 20;
opacity: 1;}
}

@-moz-keyframes circledash {
from {stroke-dashoffset:320;
opacity: 1;}
to {stroke-dashoffset: 20;
opacity: 1;}
}

@keyframes circledash {
from {stroke-dashoffset:320;
opacity: 1;}
to {stroke-dashoffset: 20;
opacity: 1;}
}


/*Prozess Layer */
#prozess{display:none;}
.prozess-layer {position:fixed; top:0; left:0; bottom:0; right:0; background-color:#000; opacity:0.3; z-index:102;}
.prozess-layer-inhalt {    
    position: fixed;
    width: 400px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -200px;
    z-index: 103;
    background-color: #fff;
    border-radius: 25px;
    text-align: center;
    padding: 25px;
    -webkit-box-shadow: 0px 0px 45px 7px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 45px 7px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 45px 7px rgba(0,0,0,0.5);
    }
    
.prozess-layer-inhalt p {margin: 20px 0 0 0; text-align: center}

.spinner {
  -webkit-animation: rotator 1.4s linear infinite;
          animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
          animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
  0% {
    stroke: #e2001a;
  }
  25% {
    stroke: #e2001a;
  }
  50% {
    stroke: #e2001a;
  }
  75% {
    stroke: #e2001a;
  }
  100% {
    stroke: #e2001a;
  }
}

@keyframes colors {
  0% {
    stroke: #e2001a;
  }
  25% {
    stroke: #e2001a;
  }
  50% {
    stroke: #e2001a;
  }
  75% {
    stroke: #e2001a;
  }
  100% {
    stroke: #e2001a;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}
@media only screen and (max-width:1200px){
.artikel {width:24%;}
}

@media only screen and (max-width:994px){
.video-container {
  width: 100%;
padding-bottom: 56.25%;
}
.row_wk {
    padding: 10px 0px 10px 0px;
    border-bottom: 0px #d5d2d0 solid;
}
.orderbox {flex-direction: column;}
.box-order-1{order:1}
.box-order-2{order:2}
.box-order-3{order:3}
.box-order-4{order:4}
.box-order-5{order:5}
.pb-button {font-size: 18px; padding: 8px;}
.artikel_neu {left:-11px;}
.shop_filter div.dps {float:right;}
.artikel_neudetail {top:0px; left:-3px; z-index:1}
.artlist-box1 {width: 100%;}
.artikel {width: 49%;}
.padding_border {border: 15px #fff solid;border-radius: 15px}
.detail-grundbox {width: calc(100% - 0px);}
.katnav-grundbox {display: none}
.hundert-width-mobile {width: 100%!important}
.pass-ver-box {margin:0 0 20px 0; text-align: center}
.mob-only {display: block}
.wk-preis-ges-info {width: 70%; text-align: right; float: left; font-size: 110%; margin: 10px 10px 10px 0} 

.member-box-1 {padding: 5%;}
.member-box-2 {padding: 5%!important;}
.member-box-3 {padding: 5%;}

.sbd-block-1 {width: 30%;}
.sbd-block-2 {width: 20%;}
.sbd-block-3 {width: 30%;}
.sbd-block-4 {width: 40%;}
.sbd-block-5 {width: 70%;}

.prozess-layer-inhalt {
    width: 300px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -150px;
    }

.art_detail {margin-top: 25px;}
.art_detail div.preis {font-size:220%;}

.nav-header-container {
        display: flex;
        justify-content: center;
        gap: 3px;
        margin: -2px 3px 50px 3px;
        flex-wrap: wrap;
        padding: 0 5px;
    }

.nav-header-box {
    flex: 1 1 30%!important;
    max-width: 200px;
    background-color: #000000!important;
    border: 0px solid #fff;
    border-radius: 0 0 15px 15px;
    padding: 20px 15px;
    text-align: center;
    color: #ffffff!important;
    font-size: 75%!important;
    line-height: 1.4;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-header-box i {
    font-size: 180%;
    display: block;
    margin: 8px 0;
}

.nav-header-box:hover {
    background-color: #e2001a!important;
    color: #fff;
    transform: translateY(-3px);
}
        
.serv-info-box {border-right:0px #d5d2d0 solid; border-bottom:1px #d5d2d0 dotted}
.stg-box{background-color: #e2001a!important; padding: 20px 10px!important; text-align: center!important; color: #FFFFFF!important; border: 5px #fff solid!important;display: block!important}
.stg-box:hover{background-color: #EFEFEF; color: #e2001a;}

.artikel p.titel {padding:10px 0;}
.artikel div.detail {padding:0px;}
.artikel div.pic .img-art-thumb {max-width: 200px; margin: auto; text-align: center;}
.abst-gut-zahl {padding: 0px}
.abst-info-zahl {padding: 0px}

#pflichtfelder	{float:left; width:auto; margin:0px; padding: 15px; color:#26313e; font-size:100%;}

.aus-wkinfo {display:none;}  
.btnpay-right {width: 100%;}  
.btnpay {
    padding: 20px;
}   
.form_abs {margin-top:0px;}
.form_abs.left {float:left; width:100%}
.form_abs.right {float:right; width:100%;}
.text-right {text-align: left; line-height: 15px}
.ein {display:inline-block;}
.aus {display: none}
.shopschritte {font-size: 100%!important;}
.cell_wk {width: 100%; text-align: center; margin: 15px 0;}

    .aus {display: none}
#kundenlogin {margin-top:0px; display: none}
}
@media only screen and (max-width:576px){
     #warenkorb {width:95%; height:250px; position:fixed; left:0; top:0; margin:10px; z-index:103;}
    .wk_buttons a.left {float:left; width: 100%; margin-bottom: 10px}
    .wk_buttons a.right {float:right;width: 100%;}
.artikel {width:100%; padding: 15px;
        margin-bottom: 15px;} 
.artikel_detail_pix {padding:20px; width:100%;}
}