/*
		13. 07. 2016 11:33 - Tim - .column_details um 2% schmaler gemacht und .column_info um 2% breiter gemacht, so dass Mengeneinheit noch hinpasst
		26. 07. 2017 12:02 - Tim - Anpassung fuer das breite Layout in der Bestellbestaetigung
*/

/* Alle Seiten: Warenkorb, Adresseingabe (normal und nur Musterversand) */
input[type="text"], select, textarea {
		border: 1px solid #cecece;
}

button {
		cursor: pointer;
}

.link {
		text-decoration: underline;
		cursor: pointer;
		/* color: blue; */
}

.icon {
		vertical-align: middle;
		margin: 2px;
}
.fragezeichen {
		float: right;
		margin: 6px 13px 6px 13px;
}

/* Warenkorb */
.warenkorbEmpty h1 {
		color: #222222;
		text-align: center;
		margin-top: 3em;
		margin-bottom: 1em;
		font-size: 13px;
}
		.hinweisLeer {
				margin-top: 70px;
				margin-bottom: 30px;
				margin-left: 30px;
				margin-right: 30px;
				padding: 20px;
				text-align: center;
				border-top: 1px solid #999999;
				border-bottom: 1px solid #999999;
				font-weight: bold;
		}

.warenkorbNoCookie {
		padding: 1em;
}

.warenkorb {
		margin: 2%;
}
		.warenkorb_head {
				position: relative;
		}

				.warenkorb_head h1 {
						color: #222222;
						text-align: center;
						margin-top: 2em;
						margin-bottom: 1em;
						font-size: 22px;
				}

		.listing {
				border-left: 1px solid #cecece;
				border-right: 1px solid #cecece;
		}

		.listing .column {
				display: inline-block;
				vertical-align: top;
				box-sizing: border-box;
		}
				.listing .row_head .column {
						vertical-align: top;
						padding-top: 0.8em;
						padding-bottom: 0.8em;
				}
				.listing .row .column {
						vertical-align: top;
						padding-top: 16px;
						padding-bottom: 16px;
				}

				.listing .column_picture {
						width: 20%;
				}
				.listing .column_details {
						width: 48%;
				}
				.listing .column_info {
						width: 32%;
				}

		.listing .row_head {
				border-top: 1px solid #cecece;
				font-weight: bold;
				background-color: #f5f5f5;
		}
		.listing .row_head > .column_details {
				text-align: left;
				padding-left: 2%;
		}
		.listing .row_head > .column_info {
				text-align: right;
				padding-right: 1em;
		}

		.listing .row > .column_picture {
				border-top: 1px solid #cecece;
				border-right: 0;
				text-align: center;
				padding-bottom: 16px;
				padding-left: 1.5%;
				padding-right: 1.5%;
		}
				.artikelbild {
						max-width: 100%;
						border: 1px solid #cecece;
						max-height: 400px;
				}

		.listing .row > .column_details {
				border-top: 1px solid #cecece;
				padding-right: 1%;
		}

		.listing .row > .column_info {
				border-top: 1px solid #cecece;
				text-align: right;
				padding-right: 1em;
		}
				.fieldFloatable {
						display: inline-block;
				}
				.listing .row .fieldFloatable {
						margin-top: 1em;
						margin-bottom: 1em;
				}

				.listing .table_body_amount {
						white-space: nowrap;
						min-width: 100px;
						text-align: center;
				}
						  .listing .table_body_amount .up
						, .listing .table_body_amount .down
						{
								cursor: pointer;
						}
						.listing .table_body_amount input {
								text-align: center;
								width: 30px;
								margin-left: 4px;
								margin-right: 4px;
						}

				.listing .table_body_price {
						white-space: nowrap;
						min-width: 14ex;
						text-align: right;
				}

				.listing .table_body_total {
						white-space: nowrap;
						min-width: 14ex;		/* eigentlich nur "width", aber bei Preisen ueber 1000 EUR passt das nicht mehr rein und sieht so besser aus, deshalb hier "min-width" */
						text-align: right;
				}

		.listing .table_body_additional {
				vertical-align: bottom;
				padding-top: 16px;
		}

		.buttonWarenkorbPos{
			display:flex;
			flex-direction:column;
		}

		.buttonWarenkorbPos button{
			flex-grow:1;
			max-width:450px;
		}


		@media (max-width: 500px) {
				.row_head {
						display: none;
				}
				.listing .column_picture {
						width: 30%;
				}
				.listing .column_details {
						width: 70%;
				}
				.listing .column_info {
						width: 100%;
				}
				.listing .row > .column_info {
						border-top: 0;
				}
				.warenkorb {
						margin: 0;
				}
		}
		@media (max-width: 350px) {
				.row_head {
						display: none;
				}
				.listing .column_picture {
						width: 100%;
				}
				.listing .column_details {
						width: 100%;
						padding-left: 1%;
				}
				.listing .column_info {
						width: 100%;
				}
				.listing .row > .column_info {
						border-top: 0;
				}
				.warenkorb {
						margin: 0;
				}
		}

		.btn_light {
				margin-top: 12px;
				margin-right: 12px;
		}
		.btn_light.outer {
				color: #464646;
		}

				.warenkorb_head .button_einkauffortsetzen {
						position: absolute;
						left: 0;
						bottom: 0;
						margin: 0;
				}
						@media (max-width: 450px) {
								.warenkorb_head .button_einkauffortsetzen {
										position: static;
										left: auto;
										bottom: auto;
								}
						}

		.wk_footer {
				background-color: #f5f5f5;
				border: 1px solid #cdcdcd;
		}
				.wk_footer .left {
						float: left;
						padding: 1em;
						padding-left: 5%;
				}
						.wk_footer .left ul {
								list-style-type: none;
								margin-left: 0;
								padding-left: 0;
						}
								.wk_footer .left li {
										line-height: 1.6em;
								}
				.wk_footer .right {
						float: right;
						text-align: right;
						padding: 1em;
				}

		.table_bottom_zahlbetrag {
				font-size: 17px;
				font-weight: bold;
				color: #000000;
				margin-top: 0.5em;
		}

		.table_bottom_details {
				font-size: 8pt;
				color: #000000;
		}

		.warenkorb_end_hinweis {
				color: #990000;
				font-size: 10pt;
				padding-top: 1em;
				padding-bottom: 1em;
				text-align: center;
				border-left: 1px solid #cecece;
				border-right: 1px solid #cecece;
				border-top: 1px solid #cecece;
		}

		.bez {
				font-weight: bold;
				font-size: 10pt;
				color: black;
				font-family: verdana;
		}

		.wk_bestellen {
				margin-top: 1em;
				margin-bottom: 0em;
				padding: 1em;
		}


/* Adresseingabe: normal und nur Musterversand */

		.adresseingabe {
				padding-left: 2.6%;
				padding-right: 2.6%;
				padding-top: 3em;
				padding-bottom: 2em;
				color: #444444;
				max-width: 1000px;
				margin: auto;
		}
				.ueberschrift {
						margin-top: 0;
						margin-bottom: 0;
				}
						.ueberschrift h1 {
								display: inline;
								font-size: 1.0em;
						}
						.ueberschrift .ueberschrift_zusatz {
								display: inline;
								font-size: 0.85em;
						}

				.adresseingabe input[type="text"], select, textarea {
						padding: 0.3em;
						margin: 0;		/* Safari haette hier einen margin */
						font-family: Verdana,Helvetica,Swiss;		/* Die Browser machen hier eine eigen Schriftart rein. Dass das mit den Fragezeichen klappt, setzte ich heir die gleiche Schriftart wie im Body */
						font-size: 13px;
				}
				.adresseingabe input[type="text"]::placeholder {
						font-size: 11px;
						color: #999999;
				}

				.adresseingabe h2 {
						font-size: 1em;
						padding-top: 0.7em;
						padding-bottom: 0.7em;
						padding-left: 1em;
						padding-right: 1em;
						background-color: #f1f1f1;
						margin-top: 2em;
						margin-bottom: 1em;
						font-weight: normal;
				}


		#bereitsKunde {
				text-align: right;
				text-decoration: underline;
				cursor: pointer;
				font-size: 80%;
		}

		#leisteLogin {
				display: none;
				margin-bottom: 3em;
				margin-top: 2em;
		}
				.login_box {
						display: inline-block;
						vertical-align: top;
						margin-right: 1em !important;
						margin-bottom: 1em !important;
				}
				#leisteLogin form {
						display: inline-block;
				}
				.login_oder {
						margin-left: 2em;
						margin-right: 2em;
				}
				
		.labelRechnungsGleichLieferadresse {
				margin-left: 3em;
				cursor: pointer;
				font-weight: normal;
		}
				.labelRechnungsGleichLieferadresse input {
						width: auto !important;		/* ueberschriebenes wieder ueckgaengig machen */
				}

		.grp_box {
				margin-left: 4%;
		}
		@media (max-width: 500px) {
				.grp_box {
						margin-left: 0;
				}
		}

		.label {
				padding-right: 1em;
				color: #888888;
				font-size: 80%;
		}

		.input_error {
				background-color: #ff7777 !important;
		}

		.input_default {
				color: #aaaaaa;
				font-style: italic;
		}

		.input_custom {
				color: #000000;
				font-style: normal;
		}

		.grp_box_enduebersicht {
				border: 1px solid #cecece;
				margin-top: 28px;
				margin-bottom: 18px;
				background-image: none;
				background-color: #ffffff;
				font-size: 0.85em;
		}

			.grp_box_enduebersicht h3 {
					margin: 0;
					padding-left: 2%;
					padding-right: 2%;
					padding-top: 1%;
					padding-bottom: 1%;
					background-color: #f5f5f5;
					font-size: 1em;
			}

			#enduebersicht {
					margin: 8px;
			}
			.enduebersicht {
					width: 100%;
					border-collapse: collapse;
					border-bottom: 0;
			}

				.enduebersicht td {
						/* border-bottom: 1px solid #000000; */
						padding-top: 3px;
						padding-bottom: 3px;
						padding-left: 4px;
						padding-right: 4px;
				}

				.enduebersicht_bez {
						text-align: left;
				}
				.enduebersicht_preis {
						text-align: right;
				}
				.enduebersicht_row_menge {
						text-align: right;
						min-width: 22px;
				}
				.enduebersicht_row_einzelpreis {
						text-align: right;
						min-width: 15ex;
				}
				.enduebersicht_row_gesamtpreis {
						text-align: right;
						min-width: 15ex;
				}

				.rabatt {
						color: #007700;
				}

				.enduebersicht_zsf_bez {
						text-align: left;
				}
				.enduebersicht_zsf_preis {
						text-align: right;
				}

				.enduebersicht_zwischenpreis {
						border-top: 1px solid #000000;
						border-bottom: 0 !important;
						font-weight: bold;
				}

				.enduebersicht_gesamt {
						border-top: 1px solid #000000;
						border-bottom: 3px double #000000 !important;
						font-weight: bold;
				}

		#box_zahlart_grp_box {
				max-width: 600px;
		}
		.zahlarten {
					padding-left: 2em;
					padding-right: 2em;
					margin-top: 1em;
		}

				.zahlart {
						border-top: 1px solid #cecece;
						padding-top: 20px;
						padding-bottom: 20px;
						padding-left: 16px;
						padding-right: 16px;
						display: flex;
						align-items: flex-start;
						cursor: pointer;
						background-color: #ffffff;		/* um mit den Zahlarten von PaypalPlus gleich auszusehen */
						font-size: 12px;
						color: #3f3f3f;
						font-weight: normal;
						line-height: 1.5;
				}
				.zahlart:hover, .zahlart.selected {
						background-color: #f9f9f9;
				}
				.zahlart.selected {
						background-image: url(/rts/img/warenkorb_bestellvorgang/checkmark.png);
						background-repeat: no-repeat;
						background-position: 99% center;
				}
				/*
				.zahlart:last-child {
						padding-bottom: 0;
				}
				*/
						.zahlartImg {
								flex: 0 1 125px;
						}
						.zahlart img {
								/* width: 100%;  fuer diese Angabe muss in den SVG-Bilder das richtige preserveAspectRatio-Attribut gesetzt werden. Diese Angabe hier brauchen wir auch nur, wenn die Bilder kleiner als die hier gemachten Angaben rendern */
								max-width: 100px;
								max-height: 30px;
						}
						.zahlartInput {
								display: none;
						}
						.zahlartLabel {
								flex: 1 1 auto;
								color: #3f3f3f;
						}
								.zahlartUeberschrift {
										display: block;
										font-size: 12px;
								}
								.zahlartText {
										display: none;
										font-size: 11px;
										margin-top: 2em;
										font-family: arial;
								}
										.zahlart.selected .zahlartUeberschrift {
												font-weight: bold;
										}
										.zahlart.selected .zahlartText {
												display: block;
										}

						#box_zahlart .a {
								color: #444444;
								text-decoration: none;
								border-bottom: 1px dotted #444444;
						}

		/* Paypal Payment Wall */
				#ppplus_wrap {
						/*		wird benoetigt, wenn PaypalPlus einen Aufpreis kosten soll
						border: 2px solid #cdd6e5;
						margin-top: 1em;
						*/
				}
						#ppplus_head {
								background-color: #f4f7fd;
								padding-top: 1em;
								padding-bottom: 1em;
								padding-left: 2em;
								padding-right: 2em;
								font-size: 11px;
						}
						#pppplus_body {
								padding-left: 2em;
								padding-right: 2em;

								/* wenn die PPP Aufpreis kosten soll, muss das hier wohl wieder raus: */
								margin-top: -2em;

						}
								#ppplus {
								}
		/* Ende Paypal Payment Wall */

				.zahlart_creditcard {

				}
						input[name="wieZahlen"] {
								display: none;
						}
						.zahlart_creditcard table th {
								font-weight: normal;
								text-align: left;
						}

		.haekchen {
				border-spacing: 0;
				margin-top: 0.5em;
				margin-bottom: 1em;
		}
				.haekchen td {
						padding: 4px;
						vertical-align: top;
				}

		.link_emailAnfordern {
				font-size: 60%;
				margin-top: 0.5em;
		}

		.adresse {
				display: inline-block;
				vertical-align: top;
				margin-top: 1em;		/* das ist wichtig, wenn die Adressfelder untereinander stehen */
		}
				.adresse table {
						max-width: 390px;
						width: 100%;
				}
				.adresse .ueberschrift {
						font-weight: bold;
						border-bottom: 2px solid #cecece;
						margin-bottom: 0.8em;
						padding-bottom: 0.2em;
				}

				.adresse input, .adresse select {
						box-sizing: border-box;
				}
				.adresse .input_fragezeichen {
						position: absolute;
						left: 101%;
						top: 0;
						background-color: #cecece;
						color: #444444;
						padding-top: 0.3em;
						padding-bottom: 0.3em;
						padding-left: 0.6em;
						padding-right: 0.6em;
						border: 1px solid transparent;
						cursor: default;
						font-size: 13px;
				}
				.pflichtangaben {
						font-size: 80%;
						margin-top: 1em;
						color: #888888;
						margin-left: 2px;		/* wie Tabelle drueber mit border-spacing und padding in den Tabellenzellen */
				}
				.erklaerung {
						font-size: 9px;
						color: #888888;
				}


		.adresse input, .adresse select {
				width: 200px;
		}


		#adresse2_box {
				margin-left: 8%;
		}
		@media (max-width: 1000px) {
				#adresse2_box {
						margin-left: 6%;
				}
		}
		@media (max-width: 950px) {
				#adresse2_box {
						margin-left: 3%;
				}
		}
		@media (max-width: 920px) {
				#adresse2_box {
						margin-left: 0;
				}
		}

		.boxWunsch {
				margin-top: 2em;
				padding-top: 1em;
				border-top: 1px solid #cecece;
		}
				.sonderwuensche {
						width: 100%;
						box-sizing: border-box;
				}

		.frameBestellungAbschicken {
				text-align: right;
				margin-top: 2em;
		}
				#button_bestellung_abschicken {
						margin-bottom: 3em;
						padding: 1em;
				}

		#overdiv {
				display: none;
				position: fixed;
				top: 4em;
				left: 0;
				background-color: #ffffff;
				border: 1px solid #444444;
				padding: 1em;
				font-size: 10px;
				box-sizing: border-box;
				cursor: pointer;
		}
		
		.btnAction {
				background-color: #dddddd;
				border-radius: 5px;
				border: 1px solid #8f8f8f;
		}

/* Fuer den leeren Warenkorb (Zugehoeriges HTML liegt im Template-Ordner) */

		#link_ueber {
				font-size: 1.8em;
				text-align: center;
				margin: 0px auto;
				margin-bottom: 30px;
		}
		#link_content {
				margin: 0px auto;




		}

		.link_box {
				box-sizing: border-box;
				display: inline-block;
				vertical-align: top;
				padding: 0px 8px 5px 8px;

				margin-bottom: 10px;
				width: 100%;
				border-style: solid;
				border-width: 0px 0px 0px 1px;
				border-color: #E1E1E1;
				color: #444444;
		}
		.link_bild > img {
				width: 100%;
		}
		.link_links {
				margin-top: 5px;
				width: 100%;
		}

		.link_links > h2 {
				margin-top: 5px;
				margin-bottom: 5px;

		}
		.link_links > h2 > a {
				font-size: 80%;
				color: #444444;
				text-decoration: none;
		}
		.link_links > a {
				text-decoration: none;
				color: #444444;
				font-size: 95%;
		}
		.link_links > a:first-child {
				font-size: 1.3em;
		}

		@media (min-width: 400px) {
				.link_box {
						width: 30%;
				}
				.link_links > a {
						font-size: 90%;
				}

		}
		@media (min-width: 600px) {
				.link_box {
						width: 25%;
				}
				.link_links > a {
						font-size: 90%;
				}

		}
		@media (min-width: 800px) {
				.link_box {
						width: 19%;
				}
				.link_links > a {
						font-size: 87%;
				}

		}
		@media (min-width: 1280px) {
				.link_box {
						width: 19.4%;
				}
				.link_links > a {
						font-size: 85%;
				}
		}

/* Ende Fuer den leeren Warenkorb */


/* Bestellbestaetigungsseite */
		.bestellbestaetigung {
				margin-left: 10%;
				margin-right: 10%;
				margin-top: 2em;
				margin-bottom: 3em;
		}
		@media (max-width: 1500px) {
				.bestellbestaetigung {
						margin-left: 5%;
						margin-right: 5%;
				}
		}
		@media (max-width: 1300px) {
				.bestellbestaetigung {
						margin-left: 3%;
						margin-right: 3%;
				}
		}
		@media (max-width: 1000px) {
				.bestellbestaetigung {
						margin-left: 1.5%;
						margin-right: 1.5%;
				}
		}
		@media (max-width: 600px) {
				.bestellbestaetigung {
						margin-left: 1%;
						margin-right: 1%;
				}
		}
		@media print {
				.bestellbestaetigung {
						margin-left: 0;		/* Die Seiten bringen selber Ihren eigenen Druckrand mit */
						margin-right: 0;
						font-size: 3.5mm;
				}
		}
		.artikel_tabelle {
				border-collapse: collapse;
				width: 100%;
		}
				.artikel_tabelle tr td, .artikel_tabelle tr th {
						border: 1px solid #555555;
				}
				@media print {
						.artikel_tabelle tr td, .artikel_tabelle tr th {
								page-break-inside: avoid;
						}
				}