/* Produkte API - Hudault, 29.11.2024 16:15 Uhr */

.aba-image-responsive{
	max-width:100%;
	height:auto;
	}

/* Listing ROW */

.productlist-viewmode-grid{
	padding-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
	opacity: 1;
	transition: 300ms ease opacity;
	}

/* Product Card */

.productlist-viewmode-grid .product-container {
	box-sizing: border-box;
	z-index: 1;
	position: relative;
	width: 25%;
	
	display: flex;
	flex-direction: column;
	float: none;
	text-align: center;
	
	min-height: 1px;
	height: auto !important;
	max-height: none !important;
	
	padding: 10px;
	/* padding-bottom: 15px; */
	border-color: #eee;
	border-width: 1px;
	border-style: solid;
	margin-bottom: 30px;

	background-color: #fffeff;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: auto;
	background-attachment: scroll;

	font-family: 'Lato';
	font-weight: 400;
	color: #777A7F;
	overflow:hidden;
	}





/* 2 in einer Reihe */

/* Im Post (schmaler) ein bisschen früher auf 2 */


@media only screen and (max-width: 1140px) {

	/* Post */
	
	.single-post .productlist-viewmode-grid .product-container {
		float: left;
		width: 50%;
		}

	}

@media only screen and (max-width: 920px) {

	/* Seite */
	
	.productlist-viewmode-grid .product-container {
		float: left;
		width: 50%;
		}

	}

/* Stacked (mobile) */
@media only screen and (max-width: 399px) {

	/* Seite */
	
	.productlist-viewmode-grid .product-container {
		float: none;
		width: 100%;
		max-width:100%;
		}

	/* Post auch */
	
	.single-post .productlist-viewmode-grid .product-container {
		float: none;
		width: 100%;
		max-width:100%;
		}
		
	/* Mobile mit Schatten für bessere optische Abgrenzung */
	
	.productlist-viewmode-grid .product-container{
		box-shadow:rgba(0,0,0,0.35) 0px 0px 5px 0px;
		/* cursor:pointer; */
		z-Index:2;
		}
	
	}


/* Produkt-Container generelles Styling */

.productlist-viewmode-grid .product-container:hover{
	box-shadow:rgba(0,0,0,0.35) 0px 0px 25px 0px;
	/* cursor:pointer; */
	z-Index:2;
	}

/* Produkt-Container innere Wrapper */

.productlist-viewmode-grid .product-container .product-tile{
    display: flex;
	height: 100%;
	border: 0;
    width: 100%;
	}

.productlist-viewmode-grid .product-container .product-tile .inside {
    display: flex;
    height: 100%;
    margin: 0 auto;
	}


/* Produkt-Container mit Flex impfen für Flexible Höhe der Produkt-Karten */

/* Damit Flex auch für Safari klappt müssen before und after so behandelt werden (Safari betrachte die sonst als Col-Element): */

.productlist-viewmode-grid:before,
.productlist-viewmode-grid:after,
.productlist-viewmode-grid .product-container:before,
.productlist-viewmode-grid .product-container:after {
   content: normal;
   }
   
/* Jetzt Flex anwenden */

.productlist-viewmode-grid{
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	}

.productlist-viewmode-grid .product-container{
	height:auto !important;
	display: flex; 
	flex-direction: column;
	float:none;
	}
	

/* Höhe - Fexible Höhe für alle Elemente */

.productlist-viewmode-grid .product-container{
	height:auto !important;
	max-height:none !important;
	}
	
/* Padding ist von Gambio zu großzügig, es wird viel Platz verschenkt. Das reduzieren */

/* Padding Inside Container */
.productlist-viewmode-grid .product-container .product-tile .inside .content-container{
	height:auto !important;
	max-height:none !important;
	padding:0px;
	}

/* Padding Bild */
.productlist-viewmode-grid .product-container .product-tile figure{
	display: table;
	height: 180px;
	max-height: 100%;
	width: 100%;
	padding: 0;
	margin:0;
	text-align:center;
	box-sizing: border-box;
	}
	
.productlist-viewmode-grid .product-container .product-tile figure .product-image{
	display: table-cell;
	vertical-align: bottom;
	box-sizing: border-box;
	}	
	
	
.productlist-viewmode-grid .product-container .product-tile figure .product-image img{
	text-align:center;
	box-sizing: border-box;
	display: inline-block;
	height: auto;
	max-height: 180px;
	width:auto;
	max-width: 100%;
	padding: 0;
	border: 0;
	}

/*
@media only screen and (max-width: 1239px) {
	.productlist-viewmode-grid .product-container .product-tile figure{
		height:230px !important;
		max-height: 230px;
		}
	}
*/


/* Stacked (mobile) */
@media only screen and (max-width: 399px) {
	.productlist-viewmode-grid .product-container .product-tile figure{
		height:auto !important;
		max-height:none !important;
		}
		
	.productlist-viewmode-grid .product-container .product-tile figure .product-image img{
		height:auto !important;
		max-height:none !important;
		}
	}


	
/* Title */	
		
.productlist-viewmode-grid .product-container .product-tile .title-description{
	height:auto !important;
	max-height:none !important;
	padding:0px;
	}

.productlist-viewmode-grid .product-container .product-tile .title-description .title{
	height:auto !important;
	max-height:none !important;
	padding:0px;
	font-size:16px;
	line-height:20px;
	}

.productlist-viewmode-grid .product-container .product-tile .title-description .title a{
	font-family:'Caudex';
	font-weight:600;
	height:auto !important;
	max-height:none !important;
	padding:0px;
	color:#01398D;
	font-size:16px;
	}

.productlist-viewmode-grid .product-container .product-tile .title-description .title a:hover{
	text-decoration:none;
	color:#0062ff;
	}
	
.productlist-viewmode-grid .product-container .inside .content-container .content-container-inner .title{
	height:auto !important;
	max-height:none !important;
	padding-top:16px;
    overflow-wrap: break-word; 
    word-wrap: anywhere;
	}
	
/* -------------------

Info-Icons Listing

---------------------- */

/* 

Responsiveness Switch Mobile / Desktop Anzeige

*/	


/* Genereller Icon-Marker für die Styles eben im Listing */

.aba-infoicons-listing{
	}
	
/* Infoicons Container Mobile */

.aba-infoicons-listing.aba-infoicons-listing-mobile{
	position:absolute;
	display:none;
	bottom:0px;
	width:100%;
	max-width:100%;
	margin-bottom:3px;
	}

/* Infoicons Container Desktop */

.aba-infoicons-listing.aba-infoicons-listing-desktop{
	display:block;
	margin-top:3px;
	margin-bottom:3px;
	}

/* Mobile Infoicons Responsive - Desktop weg, Mobile an */

@media only screen and (max-width: 399px) {
	
	.aba-infoicons-listing.aba-infoicons-listing-desktop{
		display:none;
		}

	.aba-infoicons-listing.aba-infoicons-listing-mobile{
		display:block;
		}
	}		

/* 
-----------------------------------------------

Icon-Tabelle

-------------------------------------------------- 
*/	
	
.aba-infoicons-listing .aba-infoicons-table{
	max-width:320px;
	height:70px;
	
	border-spacing: 3px;
    border-collapse: separate;
    
    padding:0px;
	margin:0px;
	margin:0 auto;
	}
	
.aba-infoicons-listing .aba-infoicons-table picture,
.aba-infoicons-listing .aba-infoicons-table img,
.aba-infoicons-listing .aba-infoicons-table div{
	border-radius:5px;
	height:70px;
	margin:0px;
	padding:0px;
	max-width:100%;
	}
	
.aba-infoicons-listing .aba-infoicons-table .aba-ton-td,
.aba-infoicons-listing .aba-infoicons-table .aba-wirkunsgrafik-td,
.aba-infoicons-listing .aba-infoicons-table .aba-groesse-td{
	margin:0px;
	padding:0px;
	
	border-width:1px;
    border-style:solid;
    border-color:#ddd; 
    
    background:#fff;
    border-radius:5px;
	}
	
/* Ton */

.aba-infoicons-listing .aba-infoicons-table .aba-ton-td{
	}
	
/* Wenn 2 Toene: Die Tabelle dafür  */

.aba-infoicons-listing .aba-infoicons-table .aba-ton-td .aba-2ton-table{
	margin:0px;
	padding:0px;
	margin:0 auto;
	height:100%;
    max-height:100%;
	}

/* Ton 1 */	
.aba-infoicons-listing .aba-infoicons-table .aba-ton-td .aba-2ton-table .aba-ton1-td{
	}
	
/* Ton 2 */	
.aba-infoicons-listing .aba-infoicons-table .aba-ton-td .aba-2ton-table .aba-ton2-td{
	}
	
/* Wirkungsgrafik */

.aba-infoicons-listing .aba-infoicons-table .aba-wirkunsgrafik-td{
	width:34px;
	}

.aba-infoicons-listing .aba-infoicons-table .aba-wirkunsgrafik-td .aba-wirkunsgrafik-div{
	position:relative;
	width:34px;
	margin:0 auto;
	}
	
.aba-infoicons-listing .aba-infoicons-table .aba-wirkunsgrafik-td .aba-wirkunsgrafik-div img{
	width:34px;
	margin:0 auto;
	}


/* Größe */
	
.aba-infoicons-listing .aba-infoicons-table .aba-groesse-td{
	}
	

/* --------------------------------------------------

Sound Player

-------------------------------------------------- */

/* Platzhalter beim Listing */

.aba-sound-player-placeholder:hover{
	cursor:pointer;
	}

/* Der Sound-Link, der im Content ist, weg */

.product-info .tab-body .links{
	display:none;
	}

audio{
	margin:0px;
	}

/* Plyr - Sound Player (befindet sich in /plyr - Base-Styling */

.plyr {
	min-width: 120px;
	width:100%;
	max-width:100%;
	}

.plyr--audio .plyr__controls {
	padding:0px;
	border-style:solid;
	border-width:1px;
	border-color: #F3EEE8;
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
	border-top-left-radius:30px;
	border-bottom-left-radius:30px;
	}
	
.plyr__control.plyr__tab-focus {
    box-shadow: none;
    }

.plyr__control {
	background: transparent;
	color:#F3EEE8;
	}
	
.plyr__controls__item.plyr__progress__container {
	padding-right:15px;
	}

.plyr__tooltip {
	display:none;
	}
	
.plyr__controls .plyr__controls__item:first-child {
	border-radius:50%;
	padding:12px;
	}
	
.plyr--audio .plyr__control,
.plyr--audio .plyr__control.plyr__tab,
.plyr--audio .plyr__control.plyr__tab-focus, 
.plyr--audio .plyr__control:hover, 
.plyr--audio .plyr__control[aria-expanded="true"] {
    background: #F3EEE8;
	color:#777A7F;
	border:0px;
	}
	

.plyr--full-ui input[type="range"] {
    color: #F3EEE8;
	}


/* Sound-Player für Produkt-Listing Seiten */

.aba-sound-wrapper-listing *{
	box-sizing:border-box;
	}

.aba-sound-wrapper-listing{
	float:none;
	/* display:none; */
	position:relative;
	overflow:hidden;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	width:100%;
	max-width:100%;
	}

.aba-sound-wrapper .aba-sound-jetzt-anhoeren,
.aba-sound-wrapper-listing .aba-sound-jetzt-anhoeren{
	position:relative;
	display:inline-block;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	max-width:100%;
	height:auto;
	text-align:left;
	padding-left:18px;
	/* margin-bottom:3px; */
	}
	
.aba-sound-wrapper-listing .aba-sound-jetzt-anhoeren img{
	width:170px;
	max-width:100%;
	height:27px;
	max-height:100%;
	}
	
@media only screen and (max-width: 767px) {
	.aba-sound-wrapper-listing .aba-sound-jetzt-anhoeren img{
		max-width:100%;
		padding-top:5px;
		}
	}
	
.aba-sound-wrapper-listing .aba-sound1-player{
	position:relative;
	display:block;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	max-width:100%;
	}

.aba-sound-wrapper-listing .aba-sound1-player table{
	border-spacing: 0;
	width:100%;
	max-width:100%;
	}

.aba-sound-wrapper-listing .aba-sound1-player table img{
	border: 0;
	}

.aba-sound-wrapper-listing .plyr__controls {
	display:flex;
	justify-content:center;
	margin-left:auto;
	margin-right:auto;
	}

.aba-sound-wrapper-listing .plyr__control {
	border-radius:3px;
	}


/* Alter Preis */

.productlist-viewmode-grid .product-container .product-tile .price-tax .price .current-price-container .productOldPrice{
	text-decoration: line-through;
	color:#f00 !important;
	font-size:14px;
	padding-top:16px;
	overflow-wrap: break-word; 
    word-wrap: anywhere;
	}

/* Aktuelle Preis */

.promotion-box-price .current-price-container,
.productlist-viewmode-grid .product-container .product-tile .price-tax .price .current-price-container{
	/* font-size:14px; */
	color:#000;
	}
	

/* Das hier fügt per height einen komischen Abstand rein. Weg damit */

.productlist-viewmode-grid .product-container .product-tile .price-tax .price .current-price-container::before{
    height:auto;
	}

/* Mwst-Anzeige und Versandkosten-Link */

/* Für das bisschen mehr Platz oben müssen dann die ribbons wieder ein bisschen hochrücken (der ribbons-container ist absolute) */

.productlist-viewmode-grid .product-container .ribbons{
	box-sizing: border-box;
	position: absolute;
	top:0px;
	right:0px !important;
	/* border-radius:0px; */
	}
	
.productlist-viewmode-grid .product-container .ribbons div{
	border-radius:0px;
	font-weight: 400;
	height: 20px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	font-size: 11px;
	background-color: #f1544d;
	color: #fff;
	text-transform: uppercase;
	border-right: 1px solid #fff;
	padding: 8px;
	padding-top:0px;
	padding-bottom:0px;
	}


/* Versand und Steuer */

.productlist-viewmode-grid .tax-shipping-hint.hidden-grid{
	display:block;
	}

.productlist-viewmode-grid .product-container .product-tile .price-tax .shipping,
.productlist-viewmode-grid .product-container .inside .content-container .content-container-inner .tax-shipping-hint{
	line-height:14px;
	font-size: 10px;
    color: #000;
	}

.productlist-viewmode-grid .product-container .product-tile .price-tax .shipping a:hover,
.productlist-viewmode-grid .product-container .inside .content-container .content-container-inner .tax-shipping-hint a:hover{
	text-decoration:none;
	}


.productlist-viewmode-grid .product-container .price-tax {
	border-bottom-width: 0px;
	padding-bottom:0px;
	}


/* Zusätzliche Infos wie z.B. Wirkung, Körperbereich, Durchmesser */

/* Wrapper */
.productlist-viewmode-grid .aba-product-more-info{
	box-sizing: border-box;
	margin-top: 15px;
	/* margin-bottom: 15px; */
	text-align: left;
	overflow:hidden;
	max-width:100%;
	color:#000;
	}
	
.productlist-viewmode-grid .aba-product-more-info-list{
	box-sizing: border-box;
	list-style-type: none;
	margin-top: 0;
	margin-bottom: 9px;
	max-width:100%;
	color:#000;
	}
	
.productlist-viewmode-grid .aba-product-more-info-list li{
	box-sizing: border-box;
	font-size:12px; 
	line-height:15px;
	list-style-image: url(https://img.sound-spirit.de/shop/abaton/img/vorteil.gif);
	max-width:100%;
	padding-bottom:5px;
	margin-bottom:0px;
    color:#000;
	}
	
@media only screen and (max-width: 767px) {
	.productlist-viewmode-grid .aba-product-more-info-list li{
		font-size:14px; 
		}
	}

/* Shop Button */

.productlist-viewmode-grid .aba-shop-button-wrapper{
	padding-top:1em;
	}

.productlist-viewmode-grid .aba-shop-button{
	border: 2px solid rgba(2, 56, 142, 1);
	color: rgba(2, 56, 142, 1);
	border-radius: 8px;
	background-color: #F6F8FC;
	background-image: none;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	position: relative;
	line-height: 130%;
	transition: color .3s linear,background-color .3s linear,padding .3s linear,border .3s linear,box-shadow .3s linear;
	padding: .325em 1.25em;
	box-shadow: none;
	}

.productlist-viewmode-grid .aba-shop-button:hover{
	background-color: #fff;
	}

.productlist-viewmode-grid .aba-shop-button-wrapper .aba-shop-button span{
	font-size: .8em;
	margin-left: .2em;
	margin-right: .2em;
	vertical-align: middle;
	display: inline-block;
	}

/* Wishlist */


/* Merkzettel Listing */

.aba-api-herzchen-listing{
	margin-top:10px;
	padding:9px;
	display:inline-block;
	max-width:100%;
	
	/*
	border-radius:50%;
	border-width:1px;
	border-style:solid;
	border-color:#C8CED5;
	*/
	}
	
.aba-api-herzchen-listing-highlight,
.aba-api-herzchen-listing:hover{
	/*
	background:#FDE550;
	*/
	}
	
.aba-api-herzchen-listing:hover{
	cursor:pointer;
	}


/* --------------------------------------------------------------------------- */
/* API 2 ...seit 15.7.2022 */

/* API-Grid is WS-Grid wie im Shop auch ...hier eine abgespeckte Variante */

/* UFilter Row */

.aba-api-row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -1.2em; 
    box-sizing: border-box;
	}

/* Col */
.aba-api-row > .aba-api-col{
    flex: 1;
    margin-left: 1.2em;
	margin-bottom: 1.2em;
    box-sizing: border-box;
	}

.aba-api-row > .aba-api-col-luf{
	margin-bottom: 0.2em;
	}


/* Row */

.aba-api-row-row{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    box-sizing: border-box;
	}

.aba-api-row-row > .aba-api-col,
.aba-api-row > .aba-api-col{
    flex: 1;
    margin-left: 1.2em;
    box-sizing: border-box;
	}


/* remove margin of row col divs */

.aba-api-row > .aba-api-col.no-margin{
  margin:0;
  } 

.aba-api-row > .aba-api-col.no-bottom-margin{
  margin-bottom:0;
  }  

/* for normal divs inside a row */

.aba-api-col-margin{
  margin-left:1.2em;
  } 


.aba-api-row > .aba-api-col.d50{
	min-width: calc(50% - 1.2em); 
	max-width: calc(50% - 1.2em); 
	}

.aba-api-row > .aba-api-col.d33{
	min-width: calc(33% - 1.2em); 
	max-width: calc(33% - 1.2em); 
	}

.aba-api-row > .aba-api-col.d25{
	min-width: calc(25% - 1.2em); 
	max-width: calc(25% - 1.2em); 
	}


/* Tablet 640 -> 1024 */

@media (max-width: 1023.98px) {

	.aba-api-row > .aba-api-col.t50{
		min-width: calc(50% - 1.2em); 
		max-width: calc(50% - 1.2em); 
		}

	}

/* Mobile 0 -> 640 */

@media (max-width: 639.98px) {

	.aba-api-row > .aba-api-col.m100{
		min-width: calc(100% - 1.2em); 
		max-width: calc(100% - 1.2em);  
		}
	}

/* UFilter Card */

.aba-api-filter-grid .aba-api-card {
	  background: #F2F6FB;
	  color: #01398D;
	  border: 0;
	  padding: 7px;
	  border-radius: 2px;
	  text-align: left;
	  margin-bottom: 5px;
	  border-radius: 8px;
	  box-sizing: border-box; 
	}

.aba-api-filter-grid .option-heading {
	  font-weight: 400;
	  box-sizing: border-box;
	}

.aba-api-filter-grid label {
	  font-size: 12px;
	  line-height: 12px;
	  text-transform: none;
	  box-sizing: border-box; 
	  display:block;
	  margin-bottom:7px;
	}

	
	
/* ----------------------- Selectbox --------------------------- */

	
	select.aba-api-selectbox{
		box-sizing: border-box; 

		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;

		cursor: pointer;
		
		width:100%;
		max-width: 100%;

		font-size: 100%;
		font-family: sans-serif;
		
		display: inline-block;
				
		padding: 9px 12px;
		font-size: 16px;
		line-height: 1.42857;
		color: #000;
		  
		border-radius: 4px;
		border: 1px solid #ccc;

		background-color: #fff;
		
		background-position: right 50%;
		background-repeat: no-repeat;
		
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
		
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		}




/* ----------------------- Sortierung --------------------------- */

.aba-api-selectbox.api-sort-selectbox{
	width:auto;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right:20px;
	}

/* ----------------------- Pagination --------------------------- */

.api-pagination-row{
	display:inline-block;
	width:100%;
	max-width:100%;
	float:none;
	}

.api-pagination-col-sort{
	width:20%;
	min-width:220px;
	float:left;
	padding-top:9px;
	}

.api-pagination-col-pagination{
	display:inline-block;
	width:80%;
	float:right;
	text-align:right;
	}

.api-pagination{
  margin-top:15px;
  }

.api-pagination > ul {
  margin:0px;
  padding: 0px;
  list-style-type:none;
 }

.api-pagination > ul > li {
  box-sizing: border-box;	
  display: inline-block;
  }

.api-pagination > ul > li > span {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 16px;
  padding: 9px 12px;
  margin-left: -1px;
  color: #01398d;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
  color:#000;
  }


.api-pagination > ul > li > span.u_p_active {
	background:#eee;
	}


.api-pagination > ul > li > span:hover{
	cursor:pointer;
	background:#eee;
	}


.api-treffer-foot{
	text-align:center;
	font-size:14px;
	color:#000;
	}


.api-pagination-foot{
	text-align:center;
	}


@media screen and (max-width: 1180px) {
  
	  .api-pagination-col-sort,
	  .api-pagination-col-pagination{
		float:none;
		width:100%;
		max-width:100%;
		}

	.api-pagination-col-pagination{
		text-align:left;
		}

	}


/* ----------------------- Subkategorien in Selectbox --------------------------- */

	
	.api-cat-image-container {
		  border: 1px solid #01398D;
		  display: inline-block;
		  margin-right:15px;
		  border-radius:8px;
		  cursor:pointer;
		  background:none;
		  overflow:hidden;
		  }

	.aba-api-subcat-selectboxes-wrapper{
		text-align:left;
		display: inline-block;
		overflow:hidden;
		}

	.api-cat-image-container:hover {
	background:#fef8e9;
	border-color:#FAB12C;
	color:#f5a205;
			}

	.api-cat-image-container.api-cat-image{
		max-width:100%;
		}

	.api-cat-image-container .api-cat-name {
		 max-width:100%;
		 text-align:center;
		 padding: 11px 8px;
		 font-size: 16px;
		 line-height: 1.42857;
		 
		color: #01398D;
		transition: all 500ms ease;
		 }

	.aba-api-selectbox.api-cat-selectbox{
		display:inline-block;
		width:auto;
		margin-top:5px;
		margin-bottom:5px;
		margin-right:7px;
		}

	@media screen and (max-width: 767px) {
		
		.aba-api-subcat-selectboxes-wrapper{
			width:100%;
			max-width:100%;
			}

		.aba-api-selectbox.api-cat-selectbox{
			display:block;
			width:100%;
			max-width:100%;
			}
		
		}

	
	.subcat-parent-button{
		border-radius: 8px;
		max-width: 100%;

		font-size: 100%;
		font-family: inherit;
		
		padding: .6em;
		background-color:#eee;
		}

	
/* ----------------------- API Guide Page --------------------------- */

.api-guide-page-wrapper{
	margin-top:15px;
	margin-bottom:10px;
	box-sizing: border-box;
	padding:15px;
	background:#F2F6FB;
	border-radius:8px;
	border-style:solid;
	border-color:#ccc;
	border-width:1px;
	}

/* Titel und Shorttext */

.api-guide-spotlight{

	}

.api-guide-shortback{

	}

/* Fragen */

.api-guide-fragen-wrapper{
	padding-top:10px;
	}

.api-guide-frage-wrapper{

	}

.api-guide-frage-button{
	padding:12px;
	padding-top:5px;
	padding-bottom:5px;
	display:inline-block;
	cursor:pointer;
	border-radius:4px;
	border-color:#01398d;
	border-width:0px;
	border-style:solid;
	margin-bottom:10px;
	background:#fff;
	color:#01398d;
	box-shadow: 0px 0px 2px 1px rgba(2, 56, 142, 1);
	}

.api-guide-frage-button:hover{
	background:#fef8e9;
	border-color:#FAB12C;
	}

/* Back Buttonn */

.api-guide-back-wrapper{
	margin-top:15px;
	}



.api-guide-back-button{
	padding:15px;
	padding-top:7px;
	padding-bottom:7px;
	display:inline-block;
	cursor:pointer;
	border-radius:4px;
	border-color:#ccc;
	border-width:1px;
	border-style:solid;
	background:#f9fbfc;
	}

.api-guide-back-button:hover{
	background:#fff;
	}

/* ----------------------- User-filter --------------------------- */

.api-ufilter-section-wrapper{
	margin-top:15px;
	margin-bottom:10px;
	box-sizing: border-box;
	}

/* ----------------------- Luxus User-filter --------------------------- */


.api-this-luffilter{
	box-sizing: border-box;
	display:inline-block;
	}
	
.api-this-luffilter-selected{
	display:block !important;
	}

.api-lufilter-section-wrapper{
	box-sizing: border-box;
	}

.aba-api-subcat-wrapper,
.api-lufilter-wrapper{
	padding: 10px;
	box-sizing: border-box;
	background: #F2F6FB;
	color: #01398D;
	border: 0;
	
	border-radius: 8px;
	text-align: left;
	margin-bottom: 1px;
	box-sizing: border-box;
	}


/* API Filter Headline */


h5.api-filter-info-headline{
	color:#01398D;
	padding:0px;
	margin:0px;
    padding-bottom:7px;
	font-size: 1.1em;
	line-height: 1.2em;
	font-weight:normal;
	}

.api-filter-info-headline-clickable{
	cursor:pointer;
	}

.api-filter-info-headline-clickable:hover{
	color:#0161ef;
	}

/* API Filter ausgewählte LUF Filter Container */

.api-show-selected-luf-filter-wrapper{
	/* margin-bottom:15px; */
	font-size:15px;
	line-height:18px;
	margin-bottom:7px;
	}

/* API Filter Stage */

.api-filter-stage-preview{
	margin-top:8px;
	}

/* Mobile: API Filter Stage Scrollable */

/*
@media (max-width: 1023.98px) {

	.api-filter-stage{
		margin-top:10px;
		max-height:400px;
		overflow-y:scroll;
		}

	}
*/

/* LUF Select-Button */


.aba-luf-select-toggle-button-arrow {
  border: solid;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 4px;
  }

.aba-luf-select-toggle-button-arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.aba-luf-select-toggle-button-arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.aba-luf-select-toggle-button-arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.aba-luf-select-toggle-button-wrapper{
	margin-top:0px;
	margin-bottom:0px;
	display:inline-block;
	}

.aba-luf-select-toggle-button{
		box-sizing: border-box; 

		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;

		cursor: pointer;
		
		min-width:160px;
		max-width: 100%;

		font-size: 16px;
		font-family: inherit;
		
		display: inline-block;
				
		padding: 9px 12px;
		padding-top:0px;
		padding-bottom:0px;
		padding-right:10px;
		padding-left:1px;
		
		font-size: 16px;
		line-height: 1.42857;
		color: #01398D;
		font-weight:bold;
		  
		border-radius: 8px;
		border: 1px solid #01398D;

		background-color: #fff;
		
		/*
		background-position: right 50%;
		background-repeat: no-repeat;
		
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
		
		background-size: 20px 20px;
		*/
		
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
		}

.aba-luf-select-toggle-button img{
	border-radius:9px;
	}

/* Stacked (mobile) */
@media only screen and (max-width: 585px) {

	.aba-luf-select-toggle-button{
		width:100%;
		}

	}


/*
.aba-luf-select-toggle-button{
	display:inline-block;
	min-width:200px;
	
	// background-color: #F2F6FB;
	
	color: #01398D;
	
	padding:8px;
	padding-right:10px;
	padding-left:10px;
	
	text-align:left;
	border-radius:8px;
	border-width:2px;
	border-style:solid;
	box-sizing: border-box;
	border-color:#b8c9dD;
	cursor:pointer;
	text-decoration:none;
	}
*/


.aba-luf-select-toggle-button:hover{
	background:#fef8e9;
	border-color:#FAB12C;
	color:#f5a205;
	}

/* Mehr ...Weniger Info Buttons */

.aba-api-more-info-button-wrapper{
	margin-top:10px;
	margin-bottom:15px;
	}

.aba-api-filter-info{
	cursor:pointer;
	padding:15px;
	margin-top:10px;
	border-radius:8px;
	border-width:1px;
	border-style:solid;
	border-color:#ddd;
	}

.aba-api-more-info-button,
.aba-api-less-info-button{
	display:inline-block;
	padding:14px;
	padding-top:2px;
	padding-bottom:2px;
	border-radius:8px;
	border-width:1px;
	border-style:solid;
	border-color:#ddd;
	text-decoration:none;
	cursor:pointer;
	color:#01398D;
	background:none;
	}

.aba-api-more-info-button:hover,
.aba-api-less-info-button:hover{
	background:#fef8e9;
	border-color:#FAB12C;
	color:#f5a205;
	}


/* Card normal */

.api-lufilter-card{
	display:inline-block;
	margin-right:10px;
	width:76px;
	height:116px;
	max-width:100%;
	margin-bottom:15px;
	text-align:center;
	border-radius:8px;
	border-width:2px;
	border-style:solid;
	box-sizing: border-box;
	border-color:#b8c9dD;
	cursor:pointer;
	overflow:hidden;
	}


/* Card Lufilter */

.api-lufilter-card-horizontal{

	}





/* Card Lufilter Table */

.api-lufilter-card-horizontal-table{
	border-radius:8px;
	border-width:2px;
	border-style:solid;
	box-sizing: border-box;
	border-color:#b8c9dD;
	cursor:pointer;
	background:#fff;
	padding:5px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:14px;
	background:#fff;
	overflow:hidden;
	height:100%;
	max-height:100%;
	}

/* Card Lufilter Table TD */

.api-lufilter-card-info-td-horizontal-img{
	width:80px;
	vertical-align:top;
	}

.api-lufilter-card-info-td-horizontal-info{
	vertical-align:top;
	padding:4px;
	font-size:15px;
	padding-left:0px;
	padding-top:4px;
	border-radius:8px;
	line-height: 1.3em;
	}

.api-lufilter-card-schalengroesse-horizontal  .api-lufilter-card-info-td-horizontal-info{
	vertical-align:middle;
	}

.api-lufilter-img-horizontal,
.module img.api-lufilter-img-horizontal,
.module img.api-lufilter-img-horizontal-deselect{
	padding:7px;
	padding-left:5px;
	padding-right:5px;
	border-color:#dde7f4;
	border-style:solid;
	border-width:1px;
	background:#fff;
	border-radius:8px;
	box-sizing: border-box;
	}

.api-lufilter-img-horizontal-deselect{
	width:50px;
	max-width:50px;
	height:auto;
	}




.api-lufilter-card-schalengroesse{
	height:106px;
	}

.api-lufilter-card-info-div-wrapper{
	
	}

.api-lufilter-card-info-table{
	width:100%;
	max-width:100%;
	height:40px;
	background:#F2F6FB;
	border-radius:8px;
	border-collapse:separate;
	}

.api-lufilter-card-info-table-schalengroesse{
	height:30px;
	}

.api-lufilter-card-info-td{
	font-size:12px;
	padding-left:3px;
	padding-right:3px;
	color:#33497B;
	line-height:12px;
	width:100%;
	max-width:100%;
	overflow-wrap: break-word; 
    word-wrap: anywhere;
	border-radius:8px;
	}



.api-lufilter-card-info-td-horizontal{
	font-size:14px;
	border-radius:8px;
	}



.api-lufilter-card-info-td-schalengroesse{
	font-size:16px;
	border-radius:8px;
	}

.api-lufilter-card:hover{
	border-color:#FAB12C
	}

.api-lufilter-card:hover .api-lufilter-card-info-table{
	background:#fef8e9;
	}

.api-lufilter-card-horizontal-table:hover{
	background:#fef8e9;
	border-color:#FAB12C;
	}

.api-lufilter-card-selected{
	background:#fef8e9;
	border-color:#FAB12C;
	border-radius:8px;
	}

.api-selected-luf-filter-table{
	border-radius:8px;
	border-width:1px;
	border-style:solid;
	background:#fef8e9;
	border-color:#FAB12C;
	padding:3px;
	padding-left:3px;
	padding-right:8px;
	cursor:pointer;
	}

.api-selected-luf-filter-table:hover{
	border-color:#ffcccc;
	background:#ffe6e6;
	}

.api-lufilter-card.api-lufilter-card-selected .api-lufilter-card-info-table,
.api-lufilter-card-horizontal.api-lufilter-card-selected  .api-lufilter-card-horizontal-table{
	background:#fef8e9;
	border-color:#FAB12C;
	border-radius:8px;
	}



.api-lufilter-card-selected:hover,
.api-lufilter-card-horizontal.api-lufilter-card-selected  .api-lufilter-card-horizontal-table:hover{
	border-color:#ffcccc;
	background:#ffe6e6;
	}

.api-lufilter-img{
	width:70px;
	max-width:70px;
	height:auto;
	}


.api-filter-deselect-sign-td{
	padding-right:10px;
	}

.api-filter-deselect-sign{
	cursor:pointer;
	padding:1px;
	padding-left:5px;
	padding-right:5px;
	border-radius:100%;
	background:#fbb;
	color:#fff;
	text-align:center;
	}

.api-filter-deselect-sign:hover{
	background:#d20000;
	}

.api-selected-luf-filter-table:hover .api-filter-deselect-sign{
	background:#f00;
	}

.api-filter-selected-value-name{
	color:#01398D;
	font-weight:bold;
	}
 


/* ----------------------- Backgrounds --------------------------- */

.api-cat-image-container{
	background:none;
	background-color:none;
	}

.api-guide-page-wrapper,
.aba-api-subcat-wrapper,
.api-lufilter-wrapper,
.aba-api-filter-grid .aba-api-card{
	background:rgba(240,240,240,0.6);
	}


/* Little bit stronger */

.api-cat-image-container .api-cat-name,
.aba-luf-select-toggle-button,
.aba-api-more-info-button,
.aba-api-less-info-button,
.api-lufilter-card-horizontal-table,
.aba-api-filter-info{
	background:rgba(255,255,255,0.7);
	}



/* ----------------------- Product-Stage --------------------------- */

.aba-api-product-stage{

	}

/* ----------------------- Leider keine Treffer --------------------------- */

.api-leider-keine-treffer-info{
	text-align:center;
	width:100%;
	max-width:100%;
	padding:15px;
	border-color:#ffcccc;
	background:#ffe6e6;
	color:#01398D;
	}