@charset "utf-8";

/* XL-Ansicht ist Standard */

/* L-Ansicht */
@media screen and (max-width: 1200px) {
    .inhalt {
        width: 960px;
    }
}

/* M-Ansicht */
@media screen and (max-width: 980px)/*, screen and (max-device-width: 980px)*/ {
    body {
        font-size: 100%; /* 16px */
		line-height: 1.5; /* 24px */
    }
    
    /* *** Grid *** */
    .inhalt { max-width: 740px; }
    
    .slidertext_titel { font-size: 200%;}

    /* *** Formular *** */
    .formzeile label { width: 20%;}
	.formfeld { width: 73%; }
	.formfeld_kurz_links { width: 35%; }
	.formfeld_kurz_rechts { width: 35%; }
	.textarea { width: 73%; height: 150px; }
    .selectfeld { width: 75%;}
    
    /* *** Team *** */
    .team .col_3_sm-left { width: 49%; margin-left: 0%;	}
	.team .col_3_sm-right { width: 49%; margin-left: 2%; }
    .team .clearing_sm { clear: both; overflow: hidden; height: 0px; }
	.team .colbild {
		float: left;
		width: 40%;
		height: auto;
	}
	.team .coltext {
		float: left;
		width: 60%;
	}
    
}


/* S-Ansicht */
@media screen and (max-width: 768px)/*, screen and (max-device-width: 768px) */{
	
    /* *** Grid *** */
    .inhalt {  width: auto; }

    .col { margin-left: 0%;	}
	.col_12,	
	.col_9,
    .col_8,	
	.col_4,
	.col_3 { width: 100%; }
	
    .col_6,
	.col_2 {margin-left: 2%;}	
	.col_3_sm-left { width: 49%; }
	.col_3_sm-right { width: 49%; margin-left: 2%; }
    .col_3_xs-left { width: 49%; }
	.col_3_xs-right { width: 49%; margin-left: 2%; }
    .clearing_sm { clear: both; overflow: hidden; height: 0px; }
    
    /* Option "Kasten" */
    .bg_fff_box .inhalt {
        margin: 0 20px;
    }
    .bg_fff_box .marginal_s,
    .bg_fff .marginal_s {
        border-top: 1px solid #ccc;
        font-size: 81.25%; /* 13px */
    }
	.bg_transp .marginal_s {
		font-size: 81.25%; /* 13px */
	}

	/* *** Header / Mobilenavigation*** */
    #header { margin-bottom: 80px; } 
	#header ul.hauptnavigation { display: none; }
	a.mobilenavlink { display: block; }
    /* Logo */
    #header #logo img { height: 30px; margin: 15px 20px 15px 0; }
	
    /* Footer */
    #footer .inhalt {
        padding: 0px;
    }
    #footer .col {
        border-top: 1px solid #999;
        padding: 40px 20px 35px 20px;
    }
    #footer .col:first-child { border-top: none; }
    
    /* *** Slider *** */
	#slider ul li img { padding-bottom: 36px; }
    .slidertext { bottom: 0; }
    .slidercopyright {bottom: 36px; font-size: 11px; }
	.bx-wrapper .bx-controls-direction a,
	.bx-wrapper .bx-controls-direction a:hover,
    .bx-wrapper .bx-controls-direction a:focus { width: 40px; height: 40px; }
   .start_vvk-col, .news_col {min-height: 20px;}
    
	/* *** Programm *** */
    .vvk_col { margin-top: 0; }
    
    /* *** Förderer *** */
    .foerderer-label {
        float: none;
        width: 100%;
        margin-bottom: 1em;
        text-align: left;
    }
    .foerderer-label em:after {
        border-width: 11px 11px 0 0;
        top: auto;
        right: auto;
        left: 5px;
        bottom: -10px;
    }
    .foerderer a:first-child {  margin-left: 0; }
    .foerderer-haupt a { width: 32%; }
    .foerderer-projekt a { width: 20.75%; }
    .foerderer-weitere a { width: 15%; }

}

@media screen and (max-width: 580px) /*, screen and (max-device-width: 580px)*/ {
	/* *** Grid *** */
	.col_6,
    .col_3_sm-left,
    .team .col_3_sm-left,
	.team .col_3_sm-right,
	.col_3_sm-right { width: 100%; margin-left: 0; }
	
    .clearing_xs { clear: both; overflow: hidden; height: 0px; }   
	
	.col_2 { width: 32% }	
	.col_2:nth-child(4) {margin-left: 0; }	
    
    /*  Header  */
	#header { margin-bottom: 60px; }
    
    /* *** Slider *** */
	.bx-wrapper .bx-controls-direction a,
	.bx-wrapper .bx-controls-direction a:hover,
    .bx-wrapper .bx-controls-direction a:focus { width: 30px; height: 30px;	}
	#slider ul li img { padding-bottom: 65px; }
    .slidertext { bottom: 0; }
    .slidertext_titel { font-size: 150%;}
    .slidercopyright {top: 0;}
        
	/* *** Formular *** */
    .formzeile {margin-bottom: .25em;}
	.formzeile label {
		clear: both;
		width: 97%;
		text-align: left;
        padding-top: 5px;
	}
	.formfeld { width: 97%; }
    .selectfeld { width: 99%;}
	.formfeld_kurz_links,
	.formfeld_kurz_rechts { width: 47%; }
	.textarea { width: 97%; height: 110px; }

	/* *** Programm *** */
    #kalenderheader { height: 55px; }
	.kalendermonat { font-size: 225%; }
    ul#kalendernavigation li {
        height: 36px;
        width: 36px;
        margin-left: 10px;
	}
	ul#kalendernavigation li.kalearrow_left a,
	ul#kalendernavigation li.kalearrow_right a {
        padding: 0px;
	}
	.datum { float: left; width: 25%; }
	.datum_tag { font-size: 300%; }
	.veranstaltung {
		overflow: hidden;
		float: left;
		width: 75%;
		padding: 0 0 10px 0;
	}
	.zusatz { display: none; }
	.text { clear: both; width: 97%; }
	
	.text_zwei_spalten {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
		-moz-column-gap: 0;
		-webkit-column-gap: 0;
		column-gap: 0;
	}
    
    /* *** Förderer *** */
    .foerderer-projekt a:nth-child(4) { margin-left: 0; margin-top: 2%; }
    .foerderer-haupt a { width: 49%; }
    .foerderer-projekt a { width: 32%; }
    .foerderer-weitere a { width: 23.5%; }
	
	/* Jubiläum Timeline */
	div.timeline_25jahr:before { position: absolute; left: 25px; }
	.timeline_25jahr h6 { text-align: left; }
	.timeline_25jahr h6 > span {
		line-height: 50px;
		height: 50px;
		width: 50px;
	}
	.timeline_25jahr ul li:nth-child(odd),
	.timeline_25jahr ul li:nth-child(even) {
		width: auto;
		float: none;
		margin-left: 27px;
		padding-left: 10%;
		background-position: 2% 7px;
		margin-top: .75em;
		text-align: left;
		padding-right: 0;
	}

	
	
}    


/* XS-Ansicht */
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
    body { line-height: 1.5; }

    /* *** Grid *** */
	#header { margin-bottom: 40px; }
    .bg_fff_box .inhalt { margin: 0;}

    /* *** Slider *** */
    .slidertext_titel { font-size: 125%; }
	.bx-wrapper .bx-pager { display: none; }

    /* *** Team *** */
	.team .colbild { display: none; }
	.team .coltext {
		display: block;
		clear: both;
		width: 100%;
	}
    /* Typo */
    h1.big,
    h2.big {
        font-size: 2.35em;
    }
    /* Button */
    a.button,
    .col_inner p a.button { display: block; }


}
/* XS-Ansicht */
@media screen and (max-width: 320px) {
    .col_3_xs-left,
	.col_3_xs-right { width: 100%; margin-left: 0; }
    h1,
    h2 { font-size: 200%; }

    
}