/* =============================================================================================== */
/* 
	SBB_RESPONSIVE
*/
/* =============================================================================================== */

/* die "rechtesten" Menüpunkte der Hauptnavigation erhalten die SubNav rechtsbündig (damit die nicht rechts aus dem Fenster rutscht) */
@media screen and ( max-width: 1550px ) {
	.flyout li.menu-li-6 ul {left: auto; right: 0px;}
}
@media screen and ( max-width: 1220px ) {
	.flyout li.menu-li-5 ul {left: auto; right: 0px;}
}
@media screen and ( max-width: 900px ) {
	.flyout li.menu-li-4 ul {left: auto; right: 0px;}
}

/* Position des Slogans über Koppfbild Startsite bei großen Bildschrimbreiten fixieren */
/* Position der Social Icons bei großen Bildschrimbreiten fixieren */
@media screen and ( min-width: 1220px ) {
	.slogan {right: calc(50vw - 550px);}
	ul.social-icons {left: calc(50vw - 590px);}
}


@media screen and ( max-width: 1180px ) {
	/* Anpassungen Navigation */
	.flyout a {padding-left: 10px;}
	.flyout > ul > li > a {padding: 10px 10px;}
}


@media screen and ( min-width: 1031px ) {
}

@media screen and ( max-width: 1030px ) {
	/* linearization for grid module */
	.linearize-level-0,
	.linearize-level-0 > [class*="ym-g"] {
		display: block;
		float: none;
		min-width: 100% !important;
	}

	/* reset defined gutter values */
	.linearize-level-0 > [class*="ym-g"] > [class*="ym-gbox"] {
		/* overflow: hidden;  optional for containing floats */
		padding: 0;
	}
	
	/* Anpassungen Navigation */
	.flyout > ul > li > a {font-size: 20px;}
	
	/* 2 Spalten in main linearisieren */
	.ym-column {padding-right: 0;}
	.ym-col1 {float: none; width: 100%;}
	.ym-col3 { float: none; width: 100%;}
	
	
	/* Abstände zwischen 2-spaltigen Boxen entfernen */
	.linearize-level-0.sbb2spalt .ym-g50.ym-gl {margin-right: 0px; margin-bottom: 28px;}
	.linearize-level-0.sbb2spalt .ym-g50.ym-gr {margin-left: 0px;}
	
	/* Boxen dritte Spalte "überbreit" machen */
	.box-spalte3 {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px);}
	
	/* Einige Boxen / Elemente "überbreit" machen */
	h1 {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px);}
	h1 {padding-left: 20px;}
}

@media screen and ( min-width: 901px ) {
	/* spezielle Einstellungen für Menüpunkt "Startseite" */
	#menu_1 {width: 80px;}
}
@media screen and ( max-width: 900px ) {
	/* Anpassungen Navigation  */
	.flyout > ul > li > a {padding: 10px 5px;}
	
}


@media screen and (min-width: 761px) and (min-height: 760px) {
	/* fixierter Kopf */
	body {padding-top: 215px;}
	header {position: fixed; top: 0; left: 0; width: 100%; z-index: 2;}
}
@media screen and ( min-width: 761px ) {
	/* Equalize Elements größer linearize-level-1: */
	.linearize-level-1.ym-equalize {
		overflow: hidden;
		display: table;
		border-collapse: separate;
		border-spacing: 20px;
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	.linearize-level-1.ym-equalize>[class*=ym-g] {
		display: table-cell;
		float: none;
		margin: 0;
		vertical-align: top
	}
	.linearize-level-1.ym-equalize .box-withbutton {position: relative; padding-bottom: 48px;}
	.linearize-level-1.ym-equalize .button-container {position: absolute; bottom: 20px; width: calc(100% - 40px);}
	
	
	/* spezielle Einstellungen für Menüpunkt "Startseite" */
	#menu_1 {width: 50px; height: 50px; overflow: hidden; padding: 0px;}
	#menu_1:before {display: block; font-size: 36px; text-align: center; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f015'; padding: 10px 0;}
	
	/* Hauptmenüpunkte in "Desktopp-Ansicht" mit vertikalem Trennstrich (nur die ersten 4 Stück) */
	.menu-li-2 > a, .menu-li-3 > a, .menu-li-4 > a, .menu-li-5 > a {border-right: 2px solid #FFFFFF;}
	
	/* Unternavigation mit großer Breite darstellen */
	.flyout ul ul {width: 400px;}
}

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

	/* linearization for grid module */
	.linearize-level-1,
	.linearize-level-1 > [class*="ym-g"] {
		display: block;
		float: none;
		min-width: 100% !important;
	}

	/* reset defined gutter values */
	.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
		/* overflow: hidden;  optional for containing floats */
		padding: 0;
	}
	
	/* Kopftext in variabler Größe, damit Eindruck gleich bleibt */
	#mod_kopftext a {font-size: 3vw; padding-right: 20px}
	#mod_kopftext strong {font-size: 4.5vw;}
	#mod_kopftext img {margin-right: -20px;}
	
	
	/* Kopfbild Startseite kleiner und Slogan in eigene Zeile darunter */
	.kopfbild-startseite {height: 200px; background-size: cover; margin-bottom: 30px;}
	.slogan {top: auto; right: 0; bottom: -30px; width: 100%; font-size: 18px; text-align: center; background-color: #FFFFFF;}
	
	/* Sozial-Icons nicht mehr ganz oben, sondern in Navigations-Balken*/
	ul.social-icons {left: auto; top: auto; right: 20px;}
	ul.social-icons a {color: #5b5a57;}
	
	/* Navigation jetzt als Burger-Menü */
	.flyout {text-align: left;}
	.flyout .label, .flyout.toggleMenue:after {display: block;}
	.flyout > ul > li > a {padding: 10px 5px 10px 0px;}
	
	#mod_menue ul {display: none; width: 100%; position: relative;}
	.flyout > ul > li {float: none;}
	#mod_menue.toggleMenue > ul, #mod_menue .hover ul {display: block;}
	
	.flyout  span.show-more, .flyout span.show-more-dummie {display: block;}
	
	.flyout .label, .flyout a {padding-right: 0px; margin-left: -20px; margin-right: -20px; line-height: 2; border-top: 2px solid #FFFFFF;}
	.flyout .untermenu1 > ul {border-bottom: 0px;}
	.flyout > ul > li:last-child  > a{border-bottom: 2px solid #FFFFFF;}
	
	
	/* Abstände zwischen 2-spaltigen Boxen entfernen */
	.linearize-level-1.sbb2spalt .ym-g50.ym-gl {margin-right: 0px; margin-bottom: 28px;}
	.linearize-level-1.sbb2spalt .ym-g50.ym-gr {margin-left: 0px;}
	
	/* Einige Boxen / Elemente "überbreit" machen */
	.box-aktuelles {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px);}
	
	/* Überschriften mittelzentriert
	h1, h2 {text-align: center;}
	 */
	
	/* Footer Linkliste wird 2-reihig und braucht pro Reihe einen Hintergrund-Streifen */
	.linkliste-reihe2 {box-shadow: 0 37px #3a3a38 inset; margin: 28px -20px 0 -20px; width: calc(100% + 40px); padding: 0 20px;}
	
}



@media screen and ( max-width: 640px ) {
	.modul-suchbox {text-align: center;}
	.modul-suchbox input {width: calc(100% - 60px); max-width: none;}
	.modul-suchbox button {margin-top: 5px;}
}



@media screen and ( min-width: 481px ) {
	.scrolled #mod_kopftext {height: 130px;}
	.scrolled #mod_kopftext img {height: 30px;}
}

@media screen and ( max-width: 480px ) {
	/* linearization for grid module */
	.linearize-level-2,
	.linearize-level-2 > [class*="ym-g"] {
		display: block;
		float: none;
		min-width: 100% !important;
	}

	/* reset defined gutter values */
	.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
		/* overflow: hidden;  optional for containing floats */
		padding: 0;
		margin: 0;
	}
	
	#mod_kopftext {height: 100px;}
	#mod_kopftext img {height: 30px;}
	
	/* Einige Boxen / Elemente "überbreit" machen */
	.box-4icon, .toggle-box {margin-left: -20px !important; margin-right: -20px !important; width: calc(100% + 40px) !important;}
	
	/* box-4icon Bild neben Text platzieren */
	.box-4icon {text-align: left;}
	.box-4icon img {width: 80px; display: inline-block; margin: -25px 5% -25px 0;}
	
	/* halb breite bIlder voll breit machen */
	img.bildHalbeBreite {width: 100%; margin-bottom: 14px;}
}