/* =============================================================================================== */
/* 
	Buttons
*/
/* =============================================================================================== */

.button {
	display: inline-block;
	padding: 0 5px;
	min-width: 180px;
	
	text-align: center;
	text-decoration: none;
	border: 1px solid #FDD432;
	background-color: #FDD432;
}

.button-transparent {background-color: transparent;}
.button-weisserrahmen {border-color: #FFFFFF;}

.hover .button, .button:hover, .button:focus, .button:active {border-color: #FDD432; background-color: #FFFFFF;} 

a.docReader {
	background-image: url('images/icon_docreader.gif');
	background-repeat: no-repeat;
	background-position: 5px center;
	padding-left: 25px;
}


/* =============================================================================================== */
/* 
	Boxen
*/
/* =============================================================================================== */

.box-content {padding: 20px; overflow: hidden;}

/* Abstände erstes und letztes Element in Box-Content */
.box-content > *:first-child {margin-top: 0px;}
.box-content > *:last-child  {margin-bottom: 0px;}


/* einfacher 2-Spalter */
.sbb2spalt .ym-g50.ym-gl {width: calc(50% - 10px); margin-right: 10px;}
.sbb2spalt .ym-g50.ym-gr {width: calc(50% - 10px); margin-left: 10px;}


/* Bild-Box*/
.box-bildbox, .box-aktuelles {padding-top: 0;}
.bildbox-bild {margin-bottom: 28px;}
.box-aktuelles h3.ueberbreit {padding-left: 20px; padding-right: 20px;}
.box-aktuelles .subheader {margin-bottom: 14px; font-weight: 700;}


/* Icon Box wie sie im 4-Spalter auf der Startseite genutzt werden */
.box-4icon-container {margin-bottom: 56px;}
.box-4icon {text-align: center;}
.box-4icon img {max-width: 100%; height: auto; display: block; margin: 0 auto;}
.box-4icon a {text-decoration: none;}


/* Toggle Box */
.toggle-box {background-color: #FFFFFF; padding: 0 20px; border-top: 1px solid #FDD432; margin-bottom: 20px;}
.toggle-box-header {padding: 5px 0; margin-bottom: 14px;}
.toggle-box-header > *:first-child {margin-top: 0px;}
.toggle-box-header > *:last-child  {margin-bottom: 0px;}

/* Box(en) für 3. Spalte*/
@media screen and (max-width: 1030px ) and ( min-width: 481px ) {
	.box-spalte3.box-mitbild .text-container {
		width: calc(50% - 10px);
		float: left;
	}
	
	.box-spalte3.box-mitbild .bild-container {
		width: calc(50% - 70px);
		float: right;
		margin-right: 20px;
	}
	.box-spalte3.box-mitbild[class*="bg-icon-"] .bild-container {margin-top: 50px;}
	
	.box-spalte3.box-mitbild .button-container {clear: both;}
}



/* =============================================================================================== */
/* 
	Hintergrund-Icons
*/
/* =============================================================================================== */

/* allgemeine Definition für alle .bg-icon-xyz */

*[class*="bg-icon-"] {
	background-image: url('./icons_klein/mitgliedschaft_kl.png');
	background-repeat: no-repeat;
	background-position: right 10px top -5px;
}

/* Definition Hintergrundbild der einzelnen .bg-icon-xyz */

.bg-icon-beratungsstelle {background-image: url('./icons_klein/beratungsstelle_kl.png');}
.bg-icon-einkaufskorb    {background-image: url('./icons_klein/einkaufskorb_kl.png');}
.bg-icon-kurse           {background-image: url('./icons_klein/kurse_kl.png');}
.bg-icon-mitgliedschaft  {background-image: url('./icons_klein/mitgliedschaft_kl.png');}
.bg-icon-spende          {background-image: url('./icons_klein/spende_kl.png');}




/* =============================================================================================== */
/* 
	Bildwechlser (slick)
*/
/* =============================================================================================== */

.slick-class .slick-dots {margin: 0; bottom: auto; top: -28px;}
.slick-class .slick-dots button::before {font-size: 16px;}

.slick-class .slick-prev, .slick-slider .slick-next {height: 100%; top: 0; width: 6%; text-align: center;}
.slick-class .slick-prev:before, .slick-slider .slick-next:before {font-family: Font Awesome\ 5 Free; font-size: 60px; content: "\f053"; text-shadow: 0 0 5px #5b5a57;}
.slick-class .slick-next:before {content: "\f054";}
.slick-class .slick-prev:hover:before, .slick-slider .slick-next:hover:before {color: #FDD432;}

.slick-class .slide-container {height: auto;}
.slick-prev, .slick-next {z-index: 1;}


.slick-class .image-container {order: 1;}
.slick-class .slide-container img {width: 100%; height: auto;}

@media screen and ( min-width: 761px ) {
	.slick-class .image-container, .slick-class .text-container {width: 50%;}
	.slick-class .text-container {padding-left: 50px;}
	.slick-class .slide-container, .slick-class .slide-container.slick-slide {display: flex; flex-direction: row; align-items: center;}
}
@media screen and ( max-width: 760px ) {
	.slick-class {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px);}
	.slick-class .slick-prev:before, .slick-class .slick-next:before {font-size: 36px;}
	.slick-class .box-content {width: 100%;}
}


/* =============================================================================================== */
/* 
	SMS Spenden Formular
*/
/* =============================================================================================== */

li.dds-amountListElement {
	height: auto !important;
	padding-top: 0.5EM !important;
	padding-bottom: 0.5EM !important;
}

input.dds-widget-phone-field {
	padding: 1EM !important;
}

a.dds-widget-button {
	height: auto !important;
}

/* FIX Readspeaker */

.rsbtn_exp {
    min-width: 400px;    
}