/* ============================================================
   CSS für telesip-Shop
============================================================ */

/* ----------------------------
   Font
---------------------------- */

body {
	font-family: 'Lato-Regular', sans-serif;
	font-weight: normal;
    color: #000000;
}

h1, h2, h3 {
	font-family: 'Lato-Regular', sans-serif;
	font-weight: normal;
    color: #000000;
}

.telesip-shop h2:first-of-type {
	margin-bottom: 1rem;
}

.explanation {
	color: #000000;
	font-size: 0.9375em;
}

.ce_form span {
	font-family: 'Lato-Regular', sans-serif;
}

.main-content label {
	color: #000000;
	font-size: 0.9375em;
}

.telesip fieldset > legend {
	font-family: 'Lato-Light', sans-serif;
}

.submit_container {
	font-weight: 400;
}

/* ----------------------------
   Seiten-Layout und Abstände Header und Content
---------------------------- */

.telesip .header-bar-inner {
	padding-right: 3.7037%;
	padding-left: 3.7037%;
}

.telesip .main-navigation {
	margin-left: 3.7037%;
	padding-left: 0;
}

.telesip .centered-wrapper-inner {
	max-width: 1600px;
}

/* Ausnahme für den Telesip-Shop */
.telesip .centered-wrapper + .centered-wrapper.telesip-shop {
  margin-top: 0;
}
/* Ende Ausnahme für den Telesip-Shop */

.telesip .main-navigation-mobile-open {
	left: 3.7037%;
}

/* max-width: 599px */

@media (max-width: 599px) {
	.telesip .logo {
		margin-left: auto;
		margin-right: auto;
	}
}

/* max-width: 900px */
	
@media (max-width: 900px) {
.telesip .logo, .telesip .main-navigation {
	margin-left: 3.7037%;
}
.telesip .centered-wrapper-inner {
	margin-right: 5.55556%;
	margin-left: 5.55556%;
}
.telesip .header-links {
	margin-left: 0;
}
.telesip .main-navigation,
.telesip .main-navigation > ul > li > a.first {
	padding-left: 0;
}
}

/* min-width: 901px */

@media (min-width: 901px) {
.telesip .main-navigation > ul > li > a.first {
	padding-left: 3.7037%;
}

.telesip .header-links {
	margin-left: 0;
}
}

/* max-width: 1188px */

@media (max-width: 1188px) {
.telesip .centered-wrapper-inner {
	margin-right: 3.7037%;
	margin-left: 3.7037%;
}
}

/* min-width: 1189px */

@media (min-width: 1189px) {
.telesip .centered-wrapper-inner {
	margin-right: 3.7037%;
	margin-left: 3.7037%;
}

.telesip .header-navigation-inner,
.telesip .header-bar-inner {
	max-width: none;
}

.telesip .logo {
	margin-left: 3.7037%;
}
}

.main-navigation > ul > li.last > ul {
	left: 0;
}

/* ----------------------------
   Produktliste und Side Panel (Warenkorb)
---------------------------- */

.telesip-shop .grid-two-columns {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 1rem;
}

@media (max-width: 1150px) {
.telesip-shop .grid-two-columns {
	grid-template-columns: 4fr 3fr;
}}

@media (max-width: 1065px) {
.telesip-shop .grid-two-columns {
	grid-template-columns: 1fr 1fr;
}}

.telesip-shop .product-container {
	order: 1;
}

.telesip-shop .side-panel-container {
	order: 2;
}

@media (max-width: 930px) {
	.telesip-shop .grid-two-columns {
		grid-template-columns: 1fr;
}
	.telesip-shop .product-container {
		order: 2;
	}
	
	.telesip-shop .side-panel-container {
		order: 1;
	}
}

/* Produkt-Listing mit zwei Spalten für Grafik und Text */
.telesip .product-row {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: 1rem;
	align-items: start;
}

@media (max-width: 400px) {
.telesip .product-row {
	display: grid;
	grid-template-columns: 1fr;
}

.telesip .product-image {
	text-align: center;
}

.telesip .product-image img {
	max-width: 150px;
}

.telesip .poi-produkt .product_list .image_container, .telesip .product_list .image_container {
  max-height: 150px;
}
}
/* /Produkt-Listing mit zwei Spalten für Grafik und Text */


.telesip-shop .product {
    border: 1px solid #cad0d8;
    border-radius: 3px;
    margin-right: 0;
    padding: 0;
    width: 100%;
}

.telesip-shop .product form {
    margin-top: 0;
    max-width: none;
}

.telesip-shop .product .formbody > div { 
    padding: 0.5rem; 
}

.telesip .main-content .product form .form-row {
	margin: 0;
}

.telesip .main-content .product form .form-row:not(:first-child) {
	margin-top: 1rem;
}

.telesip .product fieldset {
	padding: 0;
}

.telesip .product .radio_container legend {
	margin-bottom: 0;
	padding-left: 0;
}

.telesip .product .radio_container legend span {
	display: inline-block;
}

.telesip-shop .product h3 {
    background-color: #009be1;
    border-radius: 3px 3px 0 0;
    margin-top: 0;
    padding: 0.5rem 1rem;
    text-align: left;
}

.telesip-shop .product h3 a { 
    color: #ffffff; 
}

.telesip .product .submit_container {
	margin-top: 0;
	margin-right: 0;
}

.telesip-shop .product .quantity_container { 
    padding-top: 0 !important; 
}

.telesip-shop .formbody {
    padding: 0;
    max-width: 1200px;
}

/* ----------------------------
   SidePanel Warenkorb
---------------------------- */

.telesip-shop #sidePanel {
    max-height: 70%;
    overflow-y: auto;
}

@media (max-width: 930px) {
	.telesip-shop #sidePanel {
		max-height: none;
}}

.telesip-shop #sidePanel {
	border: 1px solid #cad0d8;
	border-radius: 3px;
	margin-right: 0;
	padding: 0.5rem;
	position:sticky;
	top:250px;
}

.telesip-shop .sidePanel-inner h2:first-of-type {
	margin-top: 0;
}

.telesip-shop #sidePanel .mod_iso_cart table td { 
    vertical-align: top; 
}

.telesip-shop #sidePanel .mod_iso_cart table,
.telesip-shop #sidePanel .mod_iso_cart table td,
.telesip-shop #sidePanel .mod_iso_cart .product { 
    border: #ffffff;
}

.telesip-shop #sidePanel td.image { 
    display: none !important; 
}

.telesip-shop #sidePanel table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
}

.telesip-shop #sidePanel td.name { 
    padding-left: 0;
    width: 350px;
}

.telesip-shop #sidePanel td.name,
.telesip-shop #sidePanel td.quantity,
.telesip-shop #sidePanel td.price,
.telesip-shop #sidePanel td.price-total,
.telesip-shop #sidePanel td.actions,
.telesip-shop #sidePanel td.name ul,
.telesip-shop #sidePanel tfoot td.col_first,
.telesip-shop #sidePanel tfoot td.col_last { 
    padding-left: 0;
}

.telesip-shop #sidePanel td.actions,
.telesip-shop #sidePanel tfoot td.col_last { 
    padding-right: 0;
}

#sidePanel .widget-explanation p + ul { 
    margin-top: 0.1rem; 
}

#sidePanel .mod_iso_cart ul {
	margin-bottom: 0;
}

#sidePanel tr.subtotal td {
	position: relative;
}

#sidePanel tr.subtotal td::before {
	position: absolute;
	content: "";
	top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: #0074bd;
}

.telesip-shop #sidePanel tr.foot_1 td.col_1,
.telesip-shop #sidePanel tr.foot_1 td.col_3,
.telesip-shop #sidePanel tr.foot_1 td.col_4 {
    border-bottom: 2px solid #0074bd;
}

.telesip-shop #sidePanel .button_update {
	display: none;
}

@media (max-width: 920px) {

    .telesip-shop #sidePanel table { 
        max-width: none; 
    }

    .telesip-shop #sidePanel td.name { 
        width: auto; 
    }
}

.telesip-shop #sidePanel .quantity input { 
    min-width: 1rem !important; 
}

.telesip-shop .mod_iso_cart a.remove {
	display: block;
}

.telesip-shop .mod_iso_cart a.remove::after {
	float: right;
	height: 24px;
	width: 24px;
	margin: 0;
}

/* ----------------------------
   Sidepanel (Warenkorb) öffnen
---------------------------- */

#menuToggle, label.open-box {
	display: none;
}

@media (max-width: 930px) {

label.open-box {
	display: block;
}

label.open-box {
    background-color: #ffffff;
    border: 1px solid #0053a1;
    border-radius: 3px;
    color: #0053a1;
    cursor: pointer;
    font-family: 'Lato-Bold', sans-serif;
    margin: 0;
    max-width: max-content;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
}

label.open-box:hover {
    border: 1px solid #00a1e5;
    color: #00a1e5;
}

.open-box .text-hide { 
    display: none; 
}

#menuToggle:checked + #sidePanel ~ label .text-show { 
    display: none; 
}

#menuToggle:checked + #sidePanel ~ label .text-hide { 
    display: inline; 
}

#menuToggle:checked + #sidePanel { 
    transform: translateX(0%); 
}

#sidePanel {
    position: fixed;
    top: 417px;
    right: 3.7037%;
    left: 3.7037%;
    background-color: #ffffff;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    z-index: 100;
    box-sizing: border-box;
    width: 92.59%;
    max-height: 50vh !important;
    overflow-y: auto;
}}

@media (max-width: 900px) { 
    #sidePanel { top: 395px; } 
}

@media (max-width: 775px) { 
    #sidePanel { top: 337px; } 
}

@media (max-width: 599px) { 
    #sidePanel { top: 300px; } 
}
