/************************************************/
/*    © 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 var(--farbe-weiss) 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: var(--farbe-gruen); color: var(--farbe-weiss); padding: 20px; margin-top: 15px; display: none;}
.no-diversion {float: right; margin: 3% 10px 0 0}

/************************************************/
/*                 Blütenmischer                */
/************************************************/
#basis_bg {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color:var(--farbe-schwarz);
    -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;
}

#basis_outer {
	display:none;
}

#basis_layer{
	width:400px;
	height:180px;
	border:5px var(--farbe-rahmen) solid;
	background-color:var(--farbe-weiss);
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-200px;
	margin-top:-90px;
   	z-index:103;
}
.basis_ueber	{height:30px; line-height:30px; background-color:var(--farbe-rot); color:var(--farbe-weiss); font-weight:bold; font-size:120%; padding-left:10px;}

.basis_buttons {height:30px; float:right; width:400px}
.basis_buttons a {display:block; width:195px; height:30px; line-height:30px; background-color: var(--farbe-hell); text-align:center; font-weight:bold; color:var(--farbe-text);}
.basis_buttons a:hover {background-color:var(--farbe-rot); text-decoration:none; color:var(--farbe-weiss);}
.basis_buttons a.left {float:left; margin-right:10px;}
.basis_buttons a.right {float:right;}

.basis {text-align:center; margin:20px 0 0 0; cursor:pointer;}
.basis_size {color:var(--farbe-violett); font-style:italic;}
.basis_size.aktiv {color: var(--farbe-gruen);}
.basis_name {font-size:125%; color:var(--farbe-schwarz); background-color:var(--farbe-rahmen); margin:5px 0px 0px 0px;padding: 10px; border-radius: var(--border-radius-mini);}
.basis_name:hover {color:var(--farbe-weiss); background-color:var(--farbe-violett);}
.basis_name.aktiv {color:var(--farbe-weiss); background-color:var(--farbe-gruen);}
.basis_pflicht {float:left; margin:25px 0px 0px 20px; display:none;}

.essenz_abs {display: flex;align-items: center; gap: 8px;width: 100%; margin: 0 0 5px 0;}
.essenz_name {flex: 0 0 auto;}
.essenz_feld {flex: 1 1 auto;  min-width: 0;}
.essenz_feld input[type="text"] {width: 100%; box-sizing: border-box; border: 1px solid var(--farbe-rahmen); padding: 5px; border-radius: 5px;}
.essenz_del {flex: 0 0 auto; font-size: 90%;}
.essenz_abs .clear_left {display: none;}
.essenz_info {float:left; width:19px; margin:3px 10px 2px 0px;}

.essenz_add {margin:10px auto 0px auto;}
.essenz_add_icon {float:left; width:25px;}
.essenz_add_text {float:left; margin:0px 0px 0px 5px; height:25px; line-height:25px;}
.essenz_add_text a{text-decoration:none; font-size:110%; font-weight:normal;}
.essenz_pflicht {float:left; margin:5px 0px 0px 20px; display:none;}

#layer_frame	{padding:0.4rem;}
#layer_frame i {color: var(--farbe-gruen);}
#layer_oben		{width:100%;margin: 0 0 10px 0;}
#layer_scroll {width:100%; height:220px; overflow:auto; box-shadow:inset 0 20px 10px -20px color-mix(in srgb, var(--farbe-schwarz) 35%, transparent), inset 0 -20px 10px -20px color-mix(in srgb, var(--farbe-schwarz) 35%, transparent);}
#layer_footer	{width:100%;}

.layer_ueber	{font-size:110%; font-weight:bold; float:left;}
.layer_suche	{margin-left:40px; float:left;}
.layer_legende	{float:right; height:14px; line-height:14px; margin:4px 10px 0px 0px;}
.layer_legende img{float:left; margin:0px 5px 0px 0px;}
.layer_abs {margin:10px 10px 5px 5px; line-height:14px;}
.layer_abs img {float:right; margin:0px 0px 0px 5px; cursor:pointer;}
.layer_abs .left{float:left;}
.layer_abs .right{float:right; color:var(--farbe-dezent);}

.bm-preis-menge-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin: 10px 0;
	padding: 12px 15px;

	background-color: var(--farbe-hell);
	border-radius: var(--border-radius-mini);
}

/* Menge */
.bm-cell_menge {
	display: flex;
	align-items: center;
	gap: 10px;

	min-width: 0;
}

.bm-cell_menge .text {
	color: var(--farbe-violett);
	font-size: 100%;
	white-space: nowrap;
}

.bm-cell_menge .feld {
	width: 100px;
	height: 38px;

	background-color: var(--farbe-weiss);
	border-radius: var(--border-radius-mini);

	overflow: hidden;
}

.bm-cell_menge .feld input {
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0 8px;

	box-sizing: border-box;

	border: 0;
	outline: 0;

	background: transparent;

	color: var(--farbe-text);
	text-align: center;
}

/* Preis */
.bm-preis {
	margin-left: auto;

	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.bm-preis span {
	margin-right: 5px;

	font-size: 80%;
	font-weight: 400;
}

/* Responsive */

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

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

.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 var(--farbe-rahmen) dotted;}

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

.achtung_form_eye {
    position: absolute;
    font-size: 130%;
    z-index: 5;
    top: 50%;
    right: 14px;
    transform: translate(0, -50%);
    color: var(--farbe-dezent);
    cursor: pointer;
}

.achtung_form_date {
    position: absolute;
    font-size: 130%;
    z-index: 5;
    top: 50%;
    right: 14px;
    transform: translate(0, -50%);
    cursor: pointer;
    color: var(--farbe-gelb);
}

.achtung_form {
    position: absolute;
    font-size: 130%;
    z-index: 5;
    top: 50%;
    right: 14px;
    transform: translate(0, -50%);
    color: var(--farbe-gelb);
}

.achtung_form_agb {
    position: absolute;
    font-size: 160%;
    z-index: 5;
    top: 49%;
    left: 41px;
    transform: translate(0, -50%);
    color: var(--farbe-gelb);
}

.achtung_form_passwort {
    position: absolute;
    font-size: 130%;
    z-index: 5;
    top: 50%;
    right: 50px;
    transform: translate(0, -50%);
    color: var(--farbe-gelb);
}

.achtung_form_select {
    position: absolute;
    font-size: 130%;
    z-index: 5;
    top: 50%;
    right: 40px;
    transform: translate(0, -50%);
    color: var(--farbe-gelb);
}

.achtung_gross {
    font-size: 230%;
    z-index: 5;
    color: var(--farbe-gelb);
    float: left;
    margin: 0px 20px 0 10px;
}

.achtung_rel {
    font-size: 150%;
    transform: translate(0, -50%);
    color: var(--farbe-gelb);
}

.member-box-1 {background-color: var(--farbe-blau); padding: 2%; border: 5px solid var(--farbe-hell);  border-radius: 10px}
.member-box-2 {background-color: var(--farbe-grau); padding: 2%; border: 5px solid var(--farbe-hell);  border-radius: 10px}
.member-box-3 {background-color: var(--farbe-grau); padding: 2%; border: 5px solid var(--farbe-hell);  border-radius: 10px}

.member_feld_neu {
    border: 1px var(--farbe-rahmen) solid;
    border-radius: 0;
    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 var(--farbe-rahmen) solid;
    border-radius: 0;
    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: var(--farbe-schwarz);
    text-align: center;
    border-top: 1px var(--farbe-weiss) solid;
}

.member_feld_neu_m .btn_x:hover {
    color: var(--farbe-gruen);
}

.text {
    padding: 10px 0;
}

.text-proz {
    padding: 10px;
}

.member_feld_neu2 {
    border: 1px var(--farbe-rahmen) solid;
    border-radius: 0;
    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 .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: var(--farbe-weiss);
    background-color: var(--farbe-gruen);
    font-size: 120%;
}

.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: var(--farbe-weiss);
    background-color: var(--farbe-gruen);
    font-size: 120%;
}

.kunde-auswahl {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.option-card {
  cursor: pointer;
  flex: 1;
}

.option-card input {
  display: none; /* Radio unsichtbar */
}

.card-content {
  border: 2px solid var(--farbe-rahmen);
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  transition: 0.3s;
  font-size: 100%;
  background: var(--farbe-hell);
}

.card-content i {
  font-size: 200%;
  margin-bottom: 8px;
  display: block;
  color: var(--farbe-schwarz);
}

.option-card input:hover + .card-content {
  border-color: var(--farbe-gruen);
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);

}.option-card input:checked + .card-content {
  border-color: var(--farbe-gruen);
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);
}

.option-card input:checked + .card-content i {
  color: var(--farbe-gruen);
}

.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 var(--farbe-hell) 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:var(--farbe-gruen); background-color:var(--farbe-weiss); border:0px; font-size:100%; text-align: center; border-radius: var(--border-radius-mini);}
a.btnEdit:link,a.btnEdit:visited,a.btnEdit:active {padding:5px 10px; text-decoration:none; color:var(--farbe-gruen); background-color:var(--farbe-weiss); font-size:100%; text-align: center; border-radius: var(--border-radius-mini);}
a.btnEdit:hover,input.btnEdit:hover {color:var(--farbe-weiss); background-color:var(--farbe-gruen); background-image:none;}

.shopschritte {margin:20px 0px 40px 0px; padding:5px 0px 5px 0px; font-size:120%; border-top:1px var(--farbe-rahmen) dashed; border-bottom:1px var(--farbe-rahmen) 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:var(--farbe-rahmen);font-size:90%; }
.shopschritte ul li.aktiv {color:var(--farbe-gruen);}
.shopschritte ul li span {font-size:160%; line-height:normal;}
.shopschritte ul a {color:var(--farbe-dezent); text-decoration:none;}
.shopschritte ul a:hover {color:var(--farbe-schwarz); 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 var(--farbe-rahmen) dashed; border-bottom:1px var(--farbe-rahmen) 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%, var(--color-gruen) 50%, #c25726 63%, #bc4c24 75%, var(--color-gruen)  100%);*/
        width:auto;
        padding: 10px 20px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color:var(--farbe-weiss);
        float:left;
        margin-right:10px;
        display: block;
        cursor: pointer;
        background-color: var(--farbe-gruen);
        border-radius: var(--border-radius-mini);
        }
.datenblatt_block:hover {
    background-color: var(--farbe-schwarz);
    }

a.datenblatt_block:link,a.datenblatt_block:visited,a.datenblatt_block:active {color:var(--farbe-weiss);}
a.datenblatt_block:hover {
    background-position: right center; /* change the direction of the change here */
    color: var(--farbe-weiss);
    text-decoration: none;}

.lieferadressen {margin:20px 0px 50px 0; padding: 0px}
.lieferadressen div {cursor:pointer; margin-bottom:5px; padding:15px;}
.lieferadressen .aktuell {color:var(--farbe-gruen); 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:var(--farbe-weiss); padding:20px 20px 20px 20px; margin:0px 0px 15px 0px; display:block;border-radius: var(--border-radius-mini);}

.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;}
.leitsatz-box {
    padding: 6rem 3rem ;
  }
.leitsatz {
    color: var(--farbe-gruen);
    background: var(--farbe-hellgruen);
    border: 1px solid var(--farbe-mittelgruen);
    border-radius: var(--border-radius);
    padding: 2rem;
    font-style: italic;
    text-align: left;
    font-size: 110%;
  }

#warenkorb_bg {position:fixed; top:0; left:0; bottom:0; right:0; background-color:var(--farbe-schwarz); -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:50%; margin-left:-325px; margin-top:-325px; z-index:1001;}
.coupon {width:80px; margin:auto 15px 5px 0; text-align: center; font-size: 300%; color: var(--farbe-gruen); padding: 5px 0 0 0 }

.wk_rahmen	{z-index:1000;position:absolute;border:0px var(--farbe-gruen) solid;width:100%;padding:25px;background-color:var(--farbe-weiss);-webkit-box-shadow:0px 0px 20px 8px color-mix(in srgb, var(--farbe-schwarz) 45%, transparent);box-shadow:0px 0px 20px 8px color-mix(in srgb, var(--farbe-schwarz) 45%, transparent);border-radius: var(--border-radius-mini);}
.wk_rahmen_empf	{z-index:104; width:100%; margin:0px; padding:0px; background-color:var(--farbe-weiss); }
.wk_bild	{width:30%;float: left}
.wk_ani	{width:100%; text-align: center; padding:20px 0; background-color:var(--farbe-hell); border-radius: var(--border-radius-mini) var(--border-radius-mini) 0 0 ;}
.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:var(--farbe-gruen); color:var(--farbe-weiss); font-size:110%; padding:10px; text-align: center; border-radius:  0 0 var(--border-radius-mini) var(--border-radius-mini);}
.wk_titel	{padding:20px 0px 20px 0px; text-align:center; font-size: 130%;}
.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:var(--farbe-gruen); background-color:var(--farbe-rahmen); border-left:1px var(--farbe-rahmen) solid; border-right:1px var(--farbe-rahmen) solid; border-radius: var(--border-radius-mini);}
.wk_buttons a:hover {background-color:var(--farbe-schwarz); background-image:none; text-decoration:none; color:var(--farbe-weiss);}
.wk_buttons a.left {float:left;}
.wk_buttons a.left:hover {background-color:var(--farbe-schwarz); border-left:1px var(--farbe-schwarz) solid; border-right:1px var(--farbe-schwarz) solid; background-image:none; text-decoration:none; color:var(--farbe-weiss);}
.wk_buttons a.right {float:right;}
.wk_buttons a.right:hover {background-color:var(--farbe-schwarz); border-left:1px var(--farbe-schwarz) solid; border-right:1px var(--farbe-schwarz) solid; background-image:none; text-decoration:none; color:var(--farbe-weiss);}

.wk-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.wk-zeile .cell_menge {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    float: none;
}

.wk-zeile .cell_menge .text {
    padding: 0;
    margin: 0;
}

.wk-zeile .cell_menge .feld {
    margin: 0;
}

.wk-zeile .cell_menge .feld input.button{
    text-align: center;
}

.wk-zeile .cell_wk {
    width: auto;
    margin-left: auto;
    float: none;
}

.wk-zeile .cell_wk .btn {
    margin: 0;
}

/* Container-Setup */
.cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}

/* Desktop-Einteilung (Standard) */
.action-pay { order: 3; margin-left: auto; } /* Ganz rechts */
.action-back { order: 1; }                    /* Ganz links */
.action-delete { order: 2; }                  /* Daneben */

.cart-actions a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.cart-actions a i {margin-right: 10px}
.art-det-images-box {position:relative; background-color: var(--farbe-weiss); border-radius: var(--border-radius); margin: 0 3rem 0 0;text-align: center; padding: 0 2rem;}

/* Listenansicht #ececec */
.artikel_trenn {clear:both; height:59px; background-image:url('../img/artikel_trenn_hor.jpg'); background-repeat:no-repeat;}
.artikel {float:left; width:24%; margin:1% 0 0 1%; border: 1px var(--farbe-weiss) solid; position:relative; cursor:pointer; padding: 15px;border-radius: var(--border-radius); background-color: var(--farbe-weiss);}
.mp {min-height:270px;}

.gruppe {float:left; width:15.66%; margin:1% 0 0 1%; border: 1px var(--farbe-rahmen) 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:5px; font-family: var(--font-ue); font-weight: 600; min-height: 50px;}

.artikel:hover {border: 1px var(--farbe-gruen) 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;
    width: 50%;
    aspect-ratio: 5 / 10;
    object-fit: cover;
    border-radius: var(--border-radius-mini)
  }
.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:var(--farbe-gruen); font-family:TradeGothic; font-weight:bold; line-height:normal;}
.artikel div.abs div.detail div.titel.aktion {color:var(--farbe-gruen);}
.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.gs-flex-content > p.titel {
    flex: 0 0 auto;
}


.artikel.gs-flex-content > div.detail {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.artikel.gs-flex-content > div.detail > div.text {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: flex-start;
    bottom: auto;
}

.artikel.gs-flex-content > div.detail > div.text > div.kb-info {
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
    margin: 10px 0;
    padding: 0;
    line-height: 16px;
    font-size: 80%!important;
    font-style: italic;
}

.artikel-info-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 15px;
    margin-bottom: 5px;
}

.artikel-info-zeile .lagerstand {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    float: none;
    min-width: 0;
}

.artikel-info-zeile .lagerort {
    float: none;
}

.artikel-info-zeile .artikel-menge {
    margin-left: auto;
    text-align: right;
    position: static;
    float: none;
    font-size: 90%;
}



.artikel-info-zeile .lagerstand {line-height:20px;}
.artikel-info-zeile .lagerstand div.icon {float:left; width:18px; text-align:center; font-size:100%; visibility:hidden; font-weight:bold; margin: 0 3px 0 0;}
.artikel-info-zeile .lagerstand span.icon.gruen {color:var(--farbe-gruen);}
.artikel-info-zeile .lagerstand span.icon.gelb {color:var(--farbe-gelb);}
.artikel-info-zeile .lagerstand span.icon.rot {color:var(--farbe-rot);}
.artikel-info-zeile .lagerstand span.icon.aktiv {visibility:visible;}

.artikel-info-zeile .lagerstand div.lagerort {float:none; width:auto; font-size: 90%; }
.artikel-info-zeile .lagerstand div.text.aktiv {color:var(--farbe-text);}
.artikel-info-zeile .lagerstand div.text a{color:inherit; text-decoration:none;}
.artikel-info-zeile .lagerstand div.detail {line-height:normal; margin:0px 0px 20px 18px;}

.widerruf {}
.widerruf .gs-input {border-radius: var(--border-radius-mini);}
.widerruf label {display: inline-block; margin: 15px 0 5px 0;}
.widerruf-block {background-color: var(--farbe-weiss); padding: 15px 25px; border-radius: var(--border-radius-mini);}
.widerruf-block label {display: inline-block; margin: 0;}

.gp-info {text-align:center; font-size:70%; color: var(--farbe-dezent);}
.gp-info-det {text-align:right; font-size:80%; color: var(--farbe-dezent);}
.preis-info-mwst {margin:5px 0 0 0; font-size:90%; font-style:italic; text-align: right}
.artikel.gs-flex-content > div.detail > div.text > div.kb-info > i {color:var(--farbe-gruen); margin-right:0px; font-size: 120%; margin:10px 0 0 0}
.artikel.gs-flex-content > div.detail > div.text > div.kb-info > p {margin: 0; padding: 0;flex: 0 0 auto;}

.artikel div.detail div.art_nr {font-size:90%; padding-bottom:5px; text-align: left;}
.artikel div.detail div.preis {color:var(--farbe-gruen); text-align:center; font-size:150%; padding: 5px 0px 0px 0; font-family: var(--font-ue); font-weight: 600}
.art_detail div.bm-preis {font-size:200%; color:var(--farbe-gruen); line-height:normal; font-family: var(--font-ue); font-weight: 600}

.artikel div.abs div.detail div.preis.aktion {color:var(--farbe-gruen);}
.artikel div.abs div.detail div.preis span{font-size:75%; font-weight:normal; padding-left:5px;}
.bm-preis span{font-size:65%; font-weight:normal; padding-right:5px;}
.stattpreis {text-align: left; font-size: 90%; font-style: italic}
.stattpreis span{text-decoration:line-through;}
.preisbox {padding: 0.5rem 0 1.1rem 0; border-top: 1px var(--farbe-rahmen) dashed;}
.start-preisbox {padding: 0.5rem 0 1.1rem 0; border-top: 1px var(--farbe-rahmen) dashed;}
.startpreis {color:var(--farbe-gruen); 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:4px; margin-right:5px;}
.shop_filter div.dps select {float:left; padding:5px 20px 5px 15px; color:var(--farbe-schwarz); border:1px var(--farbe-rahmen) solid; margin-top:3px;}
.shop_filter div.so {float:right; white-space:nowrap;}
.shop_filter div.so div {float:left; padding-top:4px; margin-right:5px;}
.shop_filter div.so select {float:left; padding:5px 30px 5px 15px; color:var(--farbe-schwarz); border:1px var(--farbe-rahmen) solid; margin-top:3px;}

.shop_aktionen{width:1000px; height:46px; margin:auto; border:1px var(--farbe-rahmen) 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:100%; visibility:hidden; font-weight:bold; margin: 0 3px 0 0;}
.lagerstand div.icon.gruen {color:var(--farbe-gruen);}
.lagerstand div.icon.gelb {color:var(--farbe-gelb);}
.lagerstand div.icon.rot {color:var(--farbe-rot);}
.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:var(--farbe-text);}
.lagerstand div.text a{color:inherit; text-decoration:none;}
.lagerstand div.detail {line-height:normal; margin:0px 0px 20px 18px;}

.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:var(--farbe-weiss); background-color:var(--farbe-gruen); font-size:120%;}
.cell_wk a.btnWk:hover span	{color:var(--farbe-weiss); background-color:var(--farbe-schwarz);}

a.btnMerker:link span,.cell_wk a.btnWk:visited span,.cell_wk a.btnWk:active span {display:block; padding:12px; text-decoration:none; color:var(--farbe-weiss); background-color:var(--farbe-gruen); font-size:120%;}
a.btnMerker:hover span	{color:var(--farbe-weiss); background-color:var(--farbe-schwarz);}
.btnMerker{border: 1px var(--farbe-rahmen) solid; padding:5px; margin:0px; height:28px; line-height:28px; color:var(--farbe-text);}

/* Gruppen */
.stg-box{background-color: var(--farbe-gruen); padding: 50px 25px; text-align: center; color: var(--farbe-weiss); border: 5px var(--farbe-weiss) solid}
.stg-box:hover{background-color: var(--farbe-hell); color: var(--farbe-gruen);}

.stg-box-small{background-color: var(--farbe-gruen); padding: 30px 10px 10px 10px; text-align: center; color: var(--farbe-weiss); border: 5px var(--farbe-weiss) solid; font-size: 90%;line-height: 20px}
.stg-box-small:hover{background-color: var(--farbe-hell); color: var(--farbe-gruen);}

.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:240%; color:var(--farbe-gruen); line-height:normal; font-family: var(--font-ue); font-weight: 600}
.art_detail div.preiskupfer {font-size:180%; color:var(--farbe-schwarz); line-height:normal;}
.art_detail div.preiskupfer  span{font-size:75%; font-weight:normal; padding-left:5px;}

.art_detail div.preis.aktion {color:var(--farbe-gruen);}
.art_detail div.preis span{font-size:55%; font-weight:normal; padding-right:5px;}
.art_detail div.stattpreis {font-size:130%; color:var(--farbe-gruen); 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 var(--farbe-rahmen) solid; border-bottom:0px var(--farbe-rahmen) solid;}
.trennlinie2 {height:1px; border-top:1px var(--farbe-rahmen) 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; max-width:80%; height:auto; border-radius: var(--border-radius);}*/
.artikel_detail_pix {display:inline-block; padding:0; height:auto; max-width:400px; width:100%;}
.artikel_detail_pix_kl {display:block; padding:0; object-fit: cover;}
.bildhinweis {font-size: 70%; color: var(--farbe-dezent); font-style: italic; margin: -25px 0 5px 8px; text-align: left;}
.artikel_neu {position:absolute; top:-6px; left:-6px; z-index:1}
.artikel_neu img {width: 50px; height: 50px; aspect-ratio: 5 / 5!important;}

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

.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:var(--farbe-schwarz); line-height:normal;}
.warenkorb_tbl td div.lager a{color:var(--farbe-dezent); text-decoration:none;}
.warenkorb_tbl td div.lager span{padding-right:5px; font-size:140%;}
.warenkorb_tbl td div.lager span.gruen {color:var(--farbe-gruen);}
.warenkorb_tbl td div.lager span.gelb {color:var(--farbe-gelb);}
.warenkorb_tbl td div.lager span.rot {color:var(--farbe-rot);}

.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 var(--farbe-rahmen) dotted;}

.login_abs {margin-bottom:5px;}
.login_text	{height:22px; line-height:22px;}
.login_input {border:1px var(--farbe-hell) solid; height:20px; line-height:20px; padding:0px 2px 0px 2px;}
.login_vergessen {margin-top:8px;}
.login_vergessen a{color:var(--farbe-dezent);}
.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 var(--farbe-rahmen) 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:var(--farbe-schwarz); -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:var(--farbe-weiss); -webkit-box-shadow:0px 0px 20px 8px color-mix(in srgb, var(--farbe-schwarz) 80%, transparent); box-shadow:0px 0px 20px 8px color-mix(in srgb, var(--farbe-schwarz) 80%, transparent); top: 10%; left:25%; right: 25%; padding: 25px; margin: auto; max-width: 500px}
#warnmeldung div.titel {color:var(--farbe-schwarz); 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)  ;
  }
}

.no-member-info {width: auto; padding: 5%; background-color: var(--farbe-hell); margin-top: 20px; text-align: center; border-radius: var(--border-radius);}
.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:0px;}
.form_abs div.feld {float:left; width:100%; margin: 5px 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; 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;}

progress {
    width: 100%;
    margin: 8px 0 5px 0;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 5px;
    background-color: var(--farbe-gruen);
}

progress::-webkit-progress-bar {
    background-color: var(--farbe-weiss);
    border-radius: 5px;
}

progress::-webkit-progress-value {
    background-color: var(--farbe-gruen);
    border-radius: 5px;
}

progress::-moz-progress-bar {
    background-color: var(--farbe-gruen);
    border-radius: 5px;
}

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

.loginfo_nav {
    float: right;
    background-color: var(--farbe-gruen);
    color: var(--farbe-weiss)!important;
    text-align: center;
    font-size: 140%;
    padding: 23px 28px 20px 28px;
    margin-top: 48px
}

.loginfo_nav:hover{
    background-color: var(--farbe-schwarz)!important;
}

#kundenlogin{margin-top:-84px; display: none}
#kundenlogin{margin-bottom:0px;padding:15px 10px 40px 10px;color:var(--farbe-weiss);background-color:var(--farbe-rahmen);width:100%; position:relative;}
#kundenlogin a{color:var(--farbe-weiss);}
#kundenlogin .logintitel{float:left;font-size:210%; line-height:38px;}
.trennlinie_v {width:1px; height:38px; float:left; border-left:1px var(--farbe-weiss) 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:var(--farbe-schwarz);padding-left:10px;}
#kundenlogin input[type=password] {width:30%;height:35px; font-size:110%;margin-right:3%;border:0px;color:var(--farbe-schwarz);padding-left:10px;}

#kundenlogin input[type=button] {height:37px; font-size:120%;border:0px;background-color:var(--farbe-gruen);color:var(--farbe-weiss);cursor:pointer;padding:0px 10px;}
#kundenlogin input[type=button]:hover {background-color:var(--farbe-schwarz);}

#kundenlogin input[type=submit] {width:30%;height:37px; font-size:120%;border:0px;background-color:var(--farbe-gruen);color:var(--farbe-weiss);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: var(--farbe-gruen); font-size:90%;}

#login_start{float: right; z-index: 14; position: absolute; width: 272px; top:-50px; right:7px; background-color: var(--farbe-gruen); box-shadow: 0 4px 8px 0 color-mix(in srgb, var(--farbe-schwarz) 50%, transparent), 0 6px 20px 0 color-mix(in srgb, var(--farbe-schwarz) 19%, transparent);font-family:'Inter', sans-serif;}

#login_start #login_error{padding:0px 10px 10px 10px;display:none; border-bottom:1px var(--farbe-weiss) solid; margin-bottom:15px;}

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

.begruessung {padding: 0 15px 0 0 }

.merkerliste-head {float:right; margin-right:30px;}
.merkbox {margin:30px 0px 0px 0px; position:relative; padding: 15px; background-color: var(--farbe-grau); border-radius: var(--border-radius-mini);}
.member_feld_neu {border:1px var(--farbe-weiss) solid; border-radius:0px; margin:0 0 25px 0; cursor:pointer; float:left; position:relative;height: 100%;background-color: var(--farbe-weiss); border-radius: var(--border-radius-mini)}
.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 var(--farbe-rahmen) solid; border-radius:0px; margin:0 0 25px 0; cursor:pointer; float:left; position:relative;}
.member_feld_neu_m .text {padding:4%;}

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

.member_feld_neu2 {border:1px var(--farbe-rahmen) 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:var(--farbe-weiss); background-color:var(--farbe-gruen); 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:var(--farbe-weiss); background-color:var(--farbe-gruen); font-size:120%;}
.member_feld_neu2 .btn .btnSave_member2:hover {}

/************************************************/
/*        Warenkorb Check Animation             */
/************************************************/
.circle{fill:none;stroke:var(--farbe-schwarz);stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.circle-dash{fill:none;stroke:var(--farbe-schwarz);stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.check{fill:none;stroke:var(--farbe-gruen);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.check-dash{fill:none;stroke:var(--farbe-gruen);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:var(--farbe-schwarz); 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: var(--farbe-weiss);
    border-radius: var(--border-radius);
    text-align: center;
    padding: 25px;
    -webkit-box-shadow: 0px 0px 45px 7px color-mix(in srgb, var(--farbe-schwarz) 50%, transparent);
    -moz-box-shadow: 0px 0px 45px 7px color-mix(in srgb, var(--farbe-schwarz) 50%, transparent);
    box-shadow: 0px 0px 45px 7px color-mix(in srgb, var(--farbe-schwarz) 50%, transparent);
    }

.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: var(--farbe-gruen);
  }
  25% {
    stroke: var(--farbe-gruen);
  }
  50% {
    stroke: var(--farbe-gruen);
  }
  75% {
    stroke: var(--farbe-gruen);
  }
  100% {
    stroke: var(--farbe-gruen);
  }
}

@keyframes colors {
  0% {
    stroke: var(--farbe-gruen);
  }
  25% {
    stroke: var(--farbe-gruen);
  }
  50% {
    stroke: var(--farbe-gruen);
  }
  75% {
    stroke: var(--farbe-gruen);
  }
  100% {
    stroke: var(--farbe-gruen);
  }
}
@-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);
  }
}

/* 1. TABLET & SMARTPHONE: bis einschließlich 992px */
@media only screen and (max-width: 992px) {
    .cart-actions {flex-direction: column;}
    .cart-actions div {width: 100%; margin-left: 0;}
    .cart-actions a {display: block; width: 100%; box-sizing: border-box; margin-bottom: 5px;}
    .art-det-images-box {margin: 0 0 2rem 0;text-align: center; padding: 0;}

    .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:var(--farbe-schwarz); 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;}
    .shopschritte {font-size: 100%!important;}
    .cell_wk {width: 100%; text-align: center; margin: 15px 0;}
    #warenkorb {    width: 95%;
        height: 250px;
        position: fixed;
        left: 50%;
        top: calc(50% - 130px);
        transform: translate(-50%, -50%);
        margin: 0;
        z-index: 1003;}
    .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}
        
    .artikel {width:49%;}
    .artikel_detail_pix {padding:1rem; width:100%;}
}

/* 2. SMARTPHONE: bis einschließlich 600 px */
@media only screen and (max-width: 600px) {
    .artikel {width:99%;}
    .shop_filter div.dps {float: right;}
    .bm-preis-menge-box {
    		flex-direction: column;
    		align-items: stretch;
    		gap: 12px;
    	}

    	.bm-cell_menge {
    		justify-content: space-between;
    	}

    	.bm-cell_menge .feld {
    		width: 100px;
    	}

    	.bm-preis {
    		width: 100%;
    		margin: 0;

    		text-align: right;
    	}
}