@charset "UTF-8";

/* Grid */

/* 
- die grids sind jetzt alle immer horizontal. kann das auch angepasst werden? 
== Der Grid Aufbau ist immer zeilenweise.
- wie wird nach umflossenen (float) und nicht umflossenen Elementen unterschieden? 
== s. Beispiele
- kann .grid_wrapper auch umbenannt / bzw. auf <main> geaendert werden?
== 1 div.grid_wrapper pro Zeile
- die klassen aus TYPO3 arbeiten mit display: table!
== in diesem Zusammenhang nicht Problematisch 
*/

/* siehe Mail "Grid-Layouts" von Sven
Grid-Container (50/50)
Grid-Container (75/25)
Grid-Container (33/33/33)
Grid-Container (25/25/25/25)
*/

.grid-wrapper {
clear: both;
overflow: hidden;
margin: 0 auto 30px auto;
max-width: 128em;
}

.grid-wrapper > div {
float: left;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0 15px;
}

.grid-wrapper .grid-container-25 {
width: 25%;
}

.grid-wrapper .grid-container-33 {
width: 33.33333333333333%;
}

.grid-wrapper .grid-container-50 {
width: 50%;
}

.grid-wrapper .grid-container-75 {
width: 75%;
}

.grid-wrapper .grid-container-100 {
width: 100%;
}

.grid-wrapper .first,
.grid-wrapper .last {}


/* Stile fuer Tablets */
@media (max-width: 1024px) {
    .grid-wrapper > div {
    margin: 0 0 30px 0;
    }

    .grid-wrapper .grid-container-25 {
    width: 100%;
    }

    .grid-wrapper .grid-container-75 {
    width: 100%;
    }

    /* Sonderfall Contentseite 75% - 25% bleibt (s. Mobilversion Tablet / iPad Hochformat - Detailseite) */
    .grid-wrapper .grid-container-75 + .grid-container-25 {
    width: 25%;
    }
}

/* Stile fuer Mobile */
@media (max-width: 800px) {

	.grid-wrapper {
	margin: 0 auto;
	max-width: 100%;
	}

    .grid-wrapper > div,
    .grid-wrapper .grid-container-25,
    .grid-wrapper .grid-container-33,
    .grid-wrapper .grid-container-50,
    .grid-wrapper .grid-container-75,
    .grid-wrapper .grid-container-75 + .grid-container-25 {
    float: none;
    width: auto;
    margin: 0 0 15px 0;
    padding: 0 10px;
    }
}