





#f-anz { position:relative; float:right; }
.shop_right	{ text-align: right !important; }



@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Light.woff?201605230943') format('woff'),  url('fonts/OpenSans-Light.ttf?201605230943') format('truetype');
    font-weight:  300;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Regular.woff?201605230943') format('woff'),  url('fonts/OpenSans-Regular.ttf?201605230943') format('truetype');
    font-weight:  normal;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Semibold.woff?201605230943') format('woff'),  url('fonts/OpenSans-Semibold.ttf?201605230943') format('truetype');
    font-weight:  600;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-Bold.woff?201605230943') format('woff'),  url('fonts/OpenSans-Bold.ttf?201605230943') format('truetype');
    font-weight:  bold;
    font-style:  normal;
}
@font-face {
    font-family:  'Open Sans';
    src:  url('fonts/OpenSans-ExtraBold.woff?201605230943') format('woff'),  url('fonts/OpenSans-ExtraBold.ttf?201605230943') format('truetype');
    font-weight:  800;
    font-style:  normal;
}


.mydel, .mychg {
	font-family: 		"FontAwesome";
	font-weight: 		bold !important;
}


.shop_button {
    padding:  			2px 10px 2px 10px;
    line-height:  		34px;
    border-radius:  	3px;
    background-clip:  	padding-box;
    font-size:  		14px;

    background-image:  	-ms-linear-gradient(top,  #fff,  #f8f8fa);
    background-image:  	linear-gradient(to bottom,  #fff 0%,  #f8f8fa 100%);

    display:  			inline-block;
    position:  			relative;
    font-weight:  		bold;
    text-align:  		left;
    cursor:  			pointer;
	
    border:  			1px solid #dadae5;
	background-color:  	#fff;
    color:  			#2e434f;
}
a.shop_button  { text-decoration: none; }


.shop_button:hover {
    background:  		#fff;
    color:  			#84b709;
    border-color:  		#84b709;
}
.shop_button:focus {
    outline:  			none;
}

.b-center {
    text-align:  		center;
}
.b-checkout {
	background-image: linear-gradient(to bottom, #b1f806 0%, #84b709 100%);
	color: #fff;
	width:	30%;
}
.b-checkout[disabled] {
	background-image: linear-gradient(to bottom, #bbb 0%, #84b709 100%);
	color: #fff;
	width:	30%;
}
.b-checkout:hover { background-color: #84b709; color:white; }
.b-checkout span.fa {
	position:		relative;
	float:			right;
	font-size:		18px;
	font-weight: 	bold;
	line-height:  	32px;
}
.b-shoppen {
	background-image: linear-gradient(to bottom, #2e434f 0%, #4a6c7f 100%);
	color: 			#fff;
	width:			25%;
}
.b-shoppen:hover { background-color: #2e434f; color:white;}
.b-shoppen span.fa {
	position:		relative;
	float:			left;
	font-size:		18px;
	font-weight: 	bold;
	line-height:  	32px;
}


.b-right 	{ float:right; }
.b-left		{ float:left;  }

@media (max-width: 700px) { 
	.b-checkout, .b-shoppen		{ width: calc( 100% - 20px ); margin-bottom:10px; } 
	.b-right, .b-left {float:none;}
	button.b-right { width:100% !important; }
	button.b-left  { width:100% !important; }
}


textarea, input[type="text"], input[type="email"] {
    border-radius:  	3px;
    background-clip:  	padding-box;
    box-sizing:  		border-box;
    line-height:  		19px;
    font-size:  		16px;
	font-weight:		600;
    width:  			40px;
    padding:  			10px 10px 9px 10px;
    box-shadow:  		inset 0 1px 1px #dadae5;
    background:  		#f8f8fa;
    border:  			1px solid #dadae5;
    border-top-color:  	#cbcbdb;
    color:  			#4a6c7f;
    text-align:  		left;
	position:			relative;
	float:				left;
}
textarea:focus, input[type="text"]:focus, input[type="email"]:focus {
    box-shadow:  		0 0 0 transparent;
    outline:  			none;
    border-color:  		#84b709;
    background:  		#fff;
    color:  			#2e434f;
}

input[type="submit"] {
    cursor: 	pointer;
    position: 	relative;
}

/* zusammenfassung der rechnungsinformation */
.summary-area {
	padding: 		20px;
	border:			1px solid #dadae5;
	margin-top:		20px;
	margin-bottom:	20px;
	border-radius:	3px;
	background-clip:padding-box;
	line-height:	24px;
	display:		block;
	position:		relative;
}
.summary-area .inner-part:after {
	content: 		"";
	display: 		table;
	clear: 			both;
}
.sum-list {
    padding:  		20px 0px 20px 0px;
    border:  		0 none;
    background:  	transparent;
    margin:  		0;
    float:  		right;
    width:  		50%;
}
@media (max-width: 700px) { .sum-list { width:100%; } }


.sum-list li {
	list-style:		none;
} 
.sum-list li:before {
	display: 		table;
	content: 		"";
	line-height: 	0;
}
.sum-list li:after {
	clear: 			both;
}
.li-label { 
	width:			70%;
	float:			left;
}
@media (max-width: 530px) { .li-label.summary { font-size:16px !important;}}
@media (max-width: 360px) { .li-label.summary { font-size:14px !important;}}
@media (max-width: 360px) { .li-label  { font-size:12px !important;}}
.li-value {
	width:			30%;
	float:			left;
	text-align:		right;
}
@media (max-width: 530px) { .li-value.summary { font-size:16px !important;}}
@media (max-width: 360px) { .li-value.summary { font-size:14px !important;}}
@media (max-width: 360px) { .li-value { font-size:12px !important;}}
.summary {
	font-weight: 	bold;
	color: 			#4a6c7f;
	font-size:		18px;
	border-top: 	2px solid #4a6c7f;
}
.tax {
	font-size:		12px;
}

.img-box-inner i {
	width: 			100%;
	line-height: 	66px;
	font-size: 		45px;
	color: 			#ccc;
	text-align: 	center;
}

:root {
	--pad-left: 	20px;
	--pad-right:    20px;
	--outer-pad:	40px;
}


.product-all {
	width:			60%;
	float:			left;
}
.product-all.shipping { width:94%; }
.product-all.shipping, .product-action.shipping {padding-top: 15px;}
.product-all::before { content: " "; display: table; }
.product-all::after   { clear:both; }

.product-image {
	width:			90px;
	float:			left;
	padding: 		10px 0px 10px 0px;
	line-height: 	24px;
}
.img-box {
	border-radius: 	2px;
	background-clip: padding-box;
	max-width: 		70px;
	max-height: 	70px;
	border: 		1px solid #dadae5;
	margin: 		0 auto;
	position:		relative;
	left:			-10px;
}
.img-box-inner {
	width: 			100%;
	position: 		relative;
	padding-bottom: 100%;
	height: 		0;
}
.img-box-inner img {

	position: 		absolute;
	top: 			0;
	bottom: 		0;
	left: 			0;
	right: 			0;
	margin: 		auto;
	display: 		block;
	max-width: 		100%;
	max-height: 	100%;
	height: 		auto;
}

.product-title {
	font-size:		16px;
	font-weight:	bold;
	color:			#2e434f;
	line-height:	24px;
	margin-top:		10px !important;
}

.product-head 		{ float:left; width:60%; padding-top:26px;}
.product-descr 		{   }
.product-add-info 	{	}
@media (max-width: 992px) {
	.thead.product-head 		{width:60%;}
	.thead.product-number		{width:10%;}
	.thead.product-unit-price	{width:15%;} 
	.thead.product-total-price	{width:10%;}
	.thead.product-action		{width: 0;}
}
@media (max-width: 918px) {
	.thead.product-head 		{width:55%;}
	.thead.product-number		{width:15%;}
	.thead.product-unit-price	{width:15%;} 
	.thead.product-total-price	{width:10%;}
	.thead.product-action		{width: 0;}
}
@media (max-width: 790px) {
	.thead.product-head 		{width:45%;}
	.thead.product-number		{width:20%;}
	.thead.product-unit-price	{width:20%;} 
	.thead.product-total-price	{width:15%;}
	.thead.product-action		{width: 0;}
}


.product-info,
.product-number,
.product-unit-price, 
.product-total-price,
.product-action  { 
	position:		relative;
	line-height: 	24px; 
	padding: 		26px 0 10px 0; 
	float:			left; 
	width:			11%;
}
.product-unit-price, .product-total-price 	{ padding-top:	30px; padding-left:5px;}
.product-action, .product-number			{ padding-top:	20px; }
.thead + .product-unit-price, 
.thead + .product-total-price, 
.thead + .product-action, 
.thead + .product-number 					{ padding-top:	26px; }


/* minus 80px padding rechts/links - prod# auf auto, damit nr und upd btn enger zusammenkommen, 24.04.2024 */
/* width calulation:   .product-all (.product-head) + .product-number + .product-unit-price + .product-total-price + .product-action = 100%  */
/*						    60%                     +       auto       +          11%        +           11%        +         6%      = 100%  */
.product-action 	{ float: right; width: calc( 6% - 10px ); text-align: right;}
.product-total-price{ font-weight:bold;	}
.product-number		{ width: auto; min-width:80px;}
.product-info		{ width: calc( 100% - 10px - 90px ); padding:0;padding-left:10px;}  /* 90px von img */
.product-info p 	{ margin:0; }
.pn_rd              { width: 12% !important; } /* product-number während 'readonly' */
@media (max-width: 1030px) {
	.img-box { left:0; }
}
@media (max-width: 932px) { 
	.product-all    { width: 58%; }
	.product-action { width: calc( 8% - 20px ); }
	.product-info   { width: calc( 100% - 30px - 90px );}
}
@media (max-width: 822px) { 
	.product-all    { width: 53%; }
	.product-action { width: calc( 11% - 20px ); }
	.product-info   { width: calc( 100% - 30px - 90px );}
	.product-all.shipping { width:89%; }
}
@media (max-width: 720px) {
	.product-all    { width: 100%; border-bottom: 1px solid #eee;}
	.trow 		    { border-bottom: 2px solid #dadae5 !important;}
	.tabhead 	    { border-bottom: 3px solid #dadae5 !important;}
	.product-number, .product-unit-price, .product-total-price, .product-action { width:22%;}
	.product-action.shipping { width: calc( 11% - 20px ); padding-top: 30px;}
	
	.thead.product-head 		{width:15%;}
	.thead.product-number		{width:15%;}
	.thead.product-unit-price	{width:20%;} 
	.thead.product-total-price	{width:25%;}
	.thead.product-action		{width: 0;}
}
@media (max-width: 580px) {
	.product-descr.shipping > input {width: 30px;height:15px;float:left;height:16px;margin-top:3px;}
	.product-descr.shipping > label {width: calc( 100% - 30px );display:inline-block;}
	.product-all.shipping { padding-bottom:15px;}
	.product-action		  { width:22%;}
	.thead.product-head 		{width:50%;}
	.thead.product-number		{display:none;}
	.thead.product-unit-price	{display:none;} 
}
@media (max-width: 512px) {
	.product-action {width:20%;}
	.product-all.shipping { width:80%; }
	.product-action.shipping { width: calc( 20% - 20px );}
	.img-box-inner i {font-size:35px;line-height:60px;}
	.product-image.shipping { width: 60px; }
	.product-info.shipping  { width: calc( 100% - 10px - 60px ); }
}
@media (max-width: 438px) {
	.product-number, .product-unit-price, .product-total-price, .product-action { width:20%;}
	.img-box-inner i {font-size:25px;line-height:30px;}
	.product-image.shipping { width: 30px; }
	.product-info.shipping  { width: calc( 100% - 10px - 30px ); }
}

@media (max-width: 366px) {
	.product-descr.shipping > label {font-size:12px;}
	.product-title {font-size:14px;}
}

.product-action:after {
    content:  		"";
    display:  		table;
    clear:  		both;
}

.label-unit-price, 	
.label-total-price, 	
.label-number {
	color: 			#4a6c7f;
	font-weight:	bold;
	display:		none;
}

.basket-table {
	margin-top:			10px;
	background-color: 	#fff;
	padding: 			10px;
	border: 			1px solid #dadae5;
	border-radius: 		3px;
	background-clip: 	padding-box;
	line-height:		24px;
	position:			relative;
}
.thead {
	font-weight: 	bold;
	color: 			#4a6c7f;
	line-height: 	24px;
	font-size:		16px;
}
.trow { border-bottom: 1px solid #dadae5;}
.trow::before, .trow::after { 
	display: 		table;
	content: 		"";
	line-height: 	0;
}
.trow::after { clear: both; }

.tabhead { border-bottom: 2px solid #dadae5;}
.tabhead::before, .tabhead::after { 
	display: 		table;
	content: 		"";
	line-height: 	0;
}
.tabhead::after { clear: both; }

.product-number > form > input[readonly] {background-color:transparent !important; border-width:0 !important;}
.product-number > input[readonly] {background-color:transparent !important; border-width:0 !important;text-align:right !important;}

.breadcrumbwrap {width: 100%; display: inline-flex;}
.header {
  width: 25%;
  position: relative;
  text-align: center;
  background-color: #ccc;
  padding: 5px;
  margin-left: 1px;
}
.hactive { background-color:#888;color:white;}
@media (max-width: 585px) { .header { font-size:12px; }}
@media (max-width: 455px) { .header { font-size:10px; } .nr {display:none;}}



