/* =======================================================================================================
	- Mobile First Media-Queries -
	Die Media Queries stammen von Bootstrap 3 und werden durch eigene "Spezial-Querys" ergaenzt.	
======================================================================================================= */


/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
	span.mobile_br {display:inline;}
	span.hide_mobile {display:inline;}
	
	/* --------------------------------------------------------------
		ACF - Formatierungen, insbesondere für Flex-Content
	-------------------------------------------------------------- */
    .bild_text_horizontal_wrapper.verhaeltnis_50_50 div:nth-of-type(1) {                width:50%; padding-right:10px;}
	.bild_text_horizontal_wrapper.verhaeltnis_50_50 div:nth-of-type(2) {margin-top:0px; width:50%; padding-left:10px; }
	
	
	#content a.button {	 padding:10px 50px;}
	.news_wrapper .news_element .abstand_wrapper {  margin:10px; } 
	.kategorie_teaser .inhalt_spalten_wrapper .spalte { padding:10px; } 	
	#kader_outer_wrapper .inhalt_spalten_wrapper .spalte {padding:10px;}
}

/* Spezial-Query */
@media only screen and (min-width : 650px) { 
	h1 {font-size:38px; font-weight:900;}
	
	
	/* --------------------------------------------------------------
		ACF - Formatierungen, insbesondere für Flex-Content
	-------------------------------------------------------------- */
	
	.bild_text_horizontal_wrapper.verhaeltnis_33_66 div:nth-of-type(1) {                width:33.33%; padding-right:10px;}
	.bild_text_horizontal_wrapper.verhaeltnis_33_66 div:nth-of-type(2) {margin-top:0px; width:66.66%; padding-left:10px; }
	
	.bild_text_horizontal_wrapper.verhaeltnis_66_33 div:nth-of-type(1) {                width:66.66%; padding-right:10px;}
	.bild_text_horizontal_wrapper.verhaeltnis_66_33 div:nth-of-type(2) {margin-top:0px; width:33.33%; padding-left:10px; }
	
	.spalte {width: 50%; }
	.news_outer_wrapper .inhalt_spalten_wrapper .spalte { padding:10px;} /* Abstand zwischen den Spalten, sobald die Mehrspaltigkeit startet */
	.archive_wrapper.inhalt_spalten_wrapper .spalte { padding:10px;} /* Abstand zwischen den Spalten, sobald die Mehrspaltigkeit startet */
	
	
	header,
	#header_full_background { height:153px; }  /* #post_header ebenfalls anpassen */
	
	/* Zwischen header und #content */
	#post_header,
	#header_slider { 
		margin-top:153px; /* wegen fixed header: header-hoehe + x px */		
		
	}
	
	#header_wrapper {
		max-width:1030px; 
		margin:0 auto;	
	}
	
	#header_logo {	float:left; height:100px; width:148px; margin-left:0;}	
	#header_title {
		display:block;	
		float:left; 
		border-top:1px solid white;
		border-bottom:1px solid white;
		
		text-transform:uppercase;
		
		width:370px;
		margin:30px 0 0 20px;
		
		padding:20px 0 15px 15px;
		
		font-size:18px;
		font-weight:900;
		text-align:center;
		
		
	}
	#header_social_wrapper {
		display:block;
		margin: 20px 0 0 15px;	
	}
	
	
	.site-footer #footer_copyright {float:left;}
	.site-footer #footer_menue  {float:left; }
	.site-footer ul#footer-menu li:first-child,	.site-footer ul#footer-menu li {margin-left:30px;}
	.site-footer #footer_social_wrapper {float:right;}
	
	
	
	/* height Angabe wichtig für vertikale zentrierung schmaler Logos */
	.site-footer .sponsoren_element.img_g_33 {width:33.33%; height:190px;} 
	.site-footer .sponsoren_element.img_k { width:25%; height:150px; padding:15px; }
	.site-footer .sponsoren_element.img_k img {width:auto; max-height:115px;}
	
	
	
	
	/* Startseite */
	body.page-id-317 #start_junioren_campus .inhalt_spalten_wrapper {clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); }
	body.page-id-317 #start_junioren_campus .inhalt_spalten_wrapper .spalte { margin:0;}
	
	div.abschnitt_schraeg_oben {height:90px;} 
	div.abschnitt_schraeg_unten {height:90px;}
	
	div.outer_element_wrapper.abschnitt_dunkel {background:black; }
	div.outer_element_wrapper.abschnitt_dunkel h1 {color:white;}
	div.outer_element_wrapper.abschnitt_dunkel .inner {background:white; }
	
	
	
	/* Ab hier geschieht der Umbruch auf 2 Spalten automatisch (da genug Platz zur Verfügung steht und float:left gesetzt wurde).
	Erstes Element jeder Zeile umbrechen, damit bei unterschiedlich hohen Elementen in der Zeile zuvor jedes erste Element einer Zeile wieder am Anfang steht */
	.inhalt_spalten_wrapper .spalte:nth-child(2n+3) {clear:left;} /* Jedes 2. Element, starte mit dem 3ten vom Anfang) */
	
	
	
	
	.termine_wrapper th {display:table-cell; text-align:left; border-bottom:1px solid black; margin-bottom:10px; }
	.termine_wrapper table tr td {display:table-cell;} /* wieder wie normale Tabelle darstellen */
	.termine_wrapper td.datum   {display:table-cell;}
	.termine_wrapper td.uhrzeit {display:table-cell; padding-left:0;}
	.termine_wrapper span.mobile_only {display:none;}
	
	.termine_wrapper tr.termin_element {margin:20px; border-bottom:none;}
	
	
	
}



/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	ul,
	ol {
		padding-left:40px;
	}	
	
	#header_title {
		width:485px;
		
	}
	
	
	/* Archiv */
	#archiv_artikel_einleitung {}
	#archiv_artikel_einleitung .bild {max-width:250px; float:left; padding-right:20px;}
	#archiv_artikel_einleitung .kurzbeschreibung {}
	
	/* Artikelseite */
	#artikel_einleitung .bild {max-width:500px; float:left; padding-right:20px;}
	
	
	.site-footer ul#footer-menu li:first-child,	.site-footer ul#footer-menu li {margin-left:60px;}
	
}


/* Spezial-Query */
@media only screen and (min-width : 930px) {
	nav.main-navigation { display: inline-block; padding:15px 0;}   
	nav.main-navigation a {font-size:16px;}
	nav.main-navigation ul li {margin-right:20px;}
	nav.main-navigation ul li:last-child {margin-right:0;}
	
	#header_logo {height:115px; width:171px;}
	#header_title {
		width:600px;
		font-size:24px;
		
	}
	
	
	.spalte   {width: 25%; }   /* Ohne weitere Angabe von 4 Spalten in Desktopansicht ausgehen */
	
	.inhalt_spalten_wrapper.desktop_1_spalten .spalte {width: 100%; }    /* Für 1 Spalte */
	.inhalt_spalten_wrapper.desktop_2_spalten .spalte {width: 50%; }     /* Für 2 Spalten */
	.inhalt_spalten_wrapper.desktop_3_spalten .spalte {width: 33.33%; }  /* Für 3 Spalten */
	.inhalt_spalten_wrapper.desktop_4_spalten .spalte {width: 25%; }     /* Für 4 Spalten (default falls nicht angegeben) */
	.inhalt_spalten_wrapper.desktop_5_spalten .spalte {width: 20%; }     /* Für 5 Spalten */
	
	/* Erstes Element jeder Zeile umbrechen, damit bei unterschiedlich hohen Elementen in der Zeile zuvor jedes erste Element einer Zeile wieder am Anfang steht */
	.inhalt_spalten_wrapper .spalte:nth-child(2n+3) { clear:none;} /* Umbruch wieder aufheben */
	.inhalt_spalten_wrapper.desktop_2_spalten .spalte:nth-child(2n+3) {clear:left;} /* Jedes 2. Element, starte mit dem 3ten vom Anfang) */
	.inhalt_spalten_wrapper.desktop_3_spalten .spalte:nth-child(3n+4) {clear:left; } /* Jedes 3. Element, starte mit dem 4ten vom Anfang) */
	.inhalt_spalten_wrapper.desktop_4_spalten .spalte:nth-child(4n+5) {clear:left;} /* Jedes 4. Element, starte mit dem 5ten vom Anfang) */
	.inhalt_spalten_wrapper.desktop_5_spalten .spalte:nth-child(5n+6) {clear:left;} /* Jedes 5. Element, starte mit dem 6ten vom Anfang) */
	
	
	
	
	.news_wrapper .news_element .bild  {height:200px;}
	.news_wrapper .news_element .kategorie_wrapper { margin-top:-200px; margin-bottom:175px;}



	a.button.drittel_breite {width:calc(33.33% - 20px);} /* Der Button soll so breit wie die mittlere Spalte sein */
	
	/* Menuepunkte, die nur im mobile Menue angezeigt werden sollen */
	/* #menu-item-xxx {display:none;}  */
	
	
	
	/* --------------------------------------------------------------
		ACF - Formatierungen, insbesondere für Flex-Content
	-------------------------------------------------------------- */
	
	
	div.newstrenner {height:80px;}
	
	
	
	
	.site-footer ul#footer-menu li:first-child,	.site-footer ul#footer-menu li {margin-left:80px;}
	
	
}



/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	
	.site-footer {font-size:14px;}
	
	.clearfix.clearfix_desktop_only {display:block;} /* Clearfix nur auf dem Desktop, genutzt für Spaltendarstellung ACF */
	
	
	
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	span.desktop_br {display:block;}
	
	#header_title {
		width:730px;
		
		margin:20px 0 0 40px;		
		padding:20px 0 15px 15px;
		
		font-size:34px;
		
		
	}
	
	
	
	
	.site-footer ul#footer-menu li:first-child,	.site-footer ul#footer-menu li {margin-left:100px;}
	
	
}







/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 479px) {
}

/* Doppelte Aufloesung fuer Retina Displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
}