/************************************************/
/*    © 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: 140%; margin-top: 20px}
.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 #fff solid}
.padding_block_wk {padding:0 0 0 0}
.padding_block_wk_o {padding:10px 0 0 0}
.btnpay-right {float: right;}  
.bez_info {width: 100%; background-color: #ea8001; color: #ffffff; padding: 20px; margin-top: 15px; display: none;}
.no-diversion {float: right; margin: 3% 10px 0 0}


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

#pflicht_layer	{width:auto; color:#26313e; font-size:100%; border:2px #26313e 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:#26313e; font-size:100%;}
#pflichtfelder	a{color:#26313e; text-decoration:underline;}
.pflicht_info	{}
.pflicht_abs	{padding-top:3px; line-height:normal;}
.pflicht		{color:#26313e}

.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;}

.member_feld_neu {border:1px #e3e3e3 solid; border-radius:0px; margin:0 0 25px 0; cursor:pointer; float:left; position:relative;height: 100%;}
.member_feld_neu .text {padding:4%;}
.member_feld_neu h4 {margin-bottom:0px;}
.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:0px; margin:0 0 25px 0; cursor:pointer; float:left; position:relative;}
.member_feld_neu_m .text {padding:4%;}
.member_feld_neu_m .btn {width: 100%; font-size: 120%; display: block!important; padding:15px 5px!important; margin: 0px; position: relative}
.member_feld_neu_m .btn_x {width: 100%; font-size: 100%; display: block!important; padding:15px 15px!important; color:#000; text-align: center; border-top: 1px #fff solid}
.member_feld_neu_m .btn_x:hover {color:#ea8001;}

.text {padding:10px 0;}
.text-proz {padding:10px;}

.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:#26313e; 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:#26313e; font-size:120%;}
.member_feld_neu2 .btn .btnSave_member2:hover {}



.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 #fff solid}
.padding_block_wk {padding:0 0 0 0}
.padding_block_wk_o {padding:10px 0 0 0}

.aus {}
.ein {display:none;}
.clearmob {clear:none}

input.btnEdit{padding:5px; text-decoration:none; color:#FFFFFF; background-color:#ea8001; border:0px; font-size:100%; text-align: center; border-radius: 3px}
a.btnEdit:link,a.btnEdit:visited,a.btnEdit:active {padding:5px 10px; text-decoration:none; color:#FFFFFF; background-color:#ea8001; font-size:100%; text-align: center; border-radius: 3px}
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:#ea8001;}
.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{
        /*background-image: linear-gradient(to right, #eab335 0%, #d88b2f 25%, #cf772e 38%, #ea8001 50%, #c25726 63%, #bc4c24 75%, #ea8001  100%);*/
        width:auto; 
        padding: 10px 20px; 
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color:#FFFFFF; 
        float:left; 
        margin-right:10px;
        display: block;
        cursor: pointer;
        background-color: #ea8001;
        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:#ea8001; font-weight:bold;}


.zahlungsart {margin:0px 0px 20px 0px; display:block; }
.zbox {float:left; width:33%;}
.zahlungsart input[type=radio] {float:left; margin:2px 7px 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{color:#ea8001; font-size:120%;}

.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 #ea8001 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:#ea8001; 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:120%; color:#ea8001; background-color:#dcdcdc; border-left:1px #DCDCDC solid; border-right:1px #DCDCDC solid;}
.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;}





/* 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: 1px #ccc solid; position:relative; cursor:pointer; padding: 15px;}
.mp {min-height:270px;}

.gruppe {float:left; width:15.66%; margin:1% 0 0 1%; border: 1px #DDDDDD dotted ; height:160px; position:relative; cursor:pointer;}
.gruppe div.pic {text-align:center;}
.gruppe div.pic img{ padding:10px; max-width:100%;}
.artikel p.titel {text-align:left; margin: 0; font-size: 130%; padding:10px;}

.artikel:hover {border: 1px #ea8001 solid;}
.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{ padding:0px; max-width:100%; max-height:234px;}
.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 10px 10px; width: 100%}

.artikel div.abs div.detail div.titel {margin:0px 0px 0px 0px; font-size:130%; color:#ea8001; font-family:TradeGothic; font-weight:bold; line-height:normal;}
.artikel div.abs div.detail div.titel.aktion {color:#ea8001;}
.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}

.artikel div.detail div.art_nr {font-size:90%; padding-bottom:5px; text-align: left;}
.artikel div.detail div.preis {color:#ea8001; text-align:left; font-size:110%; padding: 5px 0px 0px 0;}
.artikel div.abs div.detail div.preis.aktion {color:#ea8001;}
.artikel div.abs div.detail div.preis span{font-size:75%; font-weight:normal; padding-left:5px;}
.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:#ea8001; text-align:left; font-size:130%; padding: 5px 0px 0px 0;}
.Aktionsartikel {}

.shop_filter {margin:15px 0px 3px 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 {line-height:20px;}
.lagerstand div.icon {float:left; width:18px; text-align:center; font-size:20px; visibility:hidden; font-weight:bold; line-height: 18px; margin: 0 3px 0 0;}
.lagerstand div.icon.gruen {color:#087000;}
.lagerstand div.icon.gelb {color:#FFCC00;}
.lagerstand div.icon.rot {color:#D30000;}
.lagerstand div.icon.aktiv {visibility:visible;}
.lagerstand div.text {float:left;}
.lagerstand div.lagerort {float:left; width:150px; font-size: 90%; }
.lagerstand div.text.aktiv {color:#333333;}
.lagerstand div.text a{color:inherit; text-decoration:none;}
.lagerstand div.detail {line-height:normal; margin:0px 0px 20px 18px;}


.cell_menge {float:left; border-left:0px #DDDDDD solid; height:37px;}
.cell_menge div.text {float:left; height:37px; line-height:37px; color:#ea8001; 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:#ea8001; 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:#ea8001; 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;}

/* Gruppen */
.stg-box{background-color: #ea8001; padding: 50px 25px; text-align: center; color: #FFFFFF; border: 5px #fff solid}
.stg-box:hover{background-color: #EFEFEF; color: #ea8001;}

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

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

/* Detailansicht */
.art_detail {}
.art_detail div.abs {margin:10px 0px 5px 0px;}
.art_detail div.abs div.ueber {font-weight:bold; margin-bottom:3px;}
.art_detail div.preis {font-size:180%; color:#ea8001; line-height:normal;}
.art_detail div.preiskupfer {font-size:180%; color:#000; line-height:normal;}
.art_detail div.preiskupfer  span{font-size:75%; font-weight:normal; padding-left:5px;}

.art_detail div.preis.aktion {color:#ea8001;}
.art_detail div.preis span{font-size:75%; font-weight:normal; padding-right:5px;}
.art_detail div.stattpreis {font-size:130%; color:#ea8001; 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; width:90%; height:auto}
.artikel_neu {position:absolute; top:10px; left:-15px; z-index:1}
.artikel_neu img {width: 50px; height: 50px}

.artikel_neudetail {position:absolute; top:20px; 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;}
.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;}

#warnmeldung_outer {display:none;}
#warnmeldung_bg {position:fixed; top:0; left:0; bottom:0; right:0; background-color:#26313e; -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;}
#warnmeldung {position:fixed; z-index:103; background-color:#FFFFFF; -webkit-box-shadow:0px 0px 20px 8px rgba(0, 0, 0, 0.8); box-shadow:0px 0px 20px 8px rgba(0, 0, 0, 0.8); top: 10%; left:25%; right: 25%; padding: 25px; margin: auto; max-width: 500px}
#warnmeldung div.titel {color:#26313e; font-size:200%;}
#warnmeldung div.text {margin-top:20px;}
#warnmeldung div.buttons {float:right; margin-top:20px; font-size:120%;}

.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)  ;
  }
}


.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.text {font-weight:600; margin-bottom:5px;}
.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: 4px 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:27px;height:27px;margin-right:5px;}

.bestellnummer {width:50%; float:left;}



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

.loginfo_nav {
    float: right;
    background-color: #ea8001;
    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:#ea8001;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:#ea8001;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: #ea8001; font-size:90%;}

#login_start{float: right; z-index: 14; position: absolute; width: 272px; top:-50px; right:7px; background-color: #ea8001; 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 }

.merkerliste-head {float:right; margin-right:30px;}

.member_feld_neu {border:1px #e3e3e3 solid; border-radius:0px; margin:0 0 25px 0; cursor:pointer; float:left; position:relative;height: 100%;}
.member_feld_neu .text {padding:4%;}
.member_feld_neu h4 {margin-bottom:0px;}
.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:0px; 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:#ea8001; font-size:120%;}
.member_feld_neu .btn .btnSave_member:hover {background-color: #000}*/
.text {padding:10px 0;}
.text-proz {padding:10px;}

.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:#ea8001; 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:#ea8001; font-size:120%;}
.member_feld_neu2 .btn .btnSave_member2:hover {}


/************************************************/
/*        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:#ea8001;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.check-dash{fill:none;stroke:#ea8001;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: #ea8001;
  }
  25% {
    stroke: #ea8001;
  }
  50% {
    stroke: #ea8001;
  }
  75% {
    stroke: #ea8001;
  }
  100% {
    stroke: #ea8001;
  }
}

@keyframes colors {
  0% {
    stroke: #ea8001;
  }
  25% {
    stroke: #ea8001;
  }
  50% {
    stroke: #ea8001;
  }
  75% {
    stroke: #ea8001;
  }
  100% {
    stroke: #ea8001;
  }
}
@-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:800px){

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

.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: 25px}
.ein {display:inline-block;}
.aus {display: none}
.shopschritte {font-size: 100%!important;}
.cell_wk {width: 100%; text-align: center; margin: 15px 0;}
     #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%;}
    .aus {display: none}
#kundenlogin {margin-top:0px; display: none}
    .shop_filter div.dps {float: right;}
.artikel {width:99%;}
.artikel_detail_pix {padding:0 0 20px 0; width:100%;}
}