/***********************************************************************************/
/* CSS-Anweisungen zur Realisierung des dreispaltigen Seitenlayout mit Flex-Boxen. */
/* Die Breite der seitlichen Spalten (asideLeft und asideRight) ist in             */
/* sechs verschiedenen Stufen abhängig von der Gesamtbreite des Bildschirms.       */
/* Diese Grundstruktur ist bereits im default-template des Archetypes realisiert.  */
/***********************************************************************************/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*:before, *:after {
    box-sizing: inherit;
}

.w100 {
    max-width: 100%;
    width: 100%;
}

/* Media-Queries: */
#asideLeft {
  flex: 1 1 auto;
  min-width: 1%;
  width: 1%;
  max-width: 1%;
}
#asideRight {
    flex: 1 1 auto;
    min-width: 1%;
    width: 1%;
    max-width: 1%;
}
#middle {
    flex: 98 1 auto;
    min-width: 98%;
    max-width: 98%;
    width: 98%;
}
@media screen and (min-width: 600px) {
    #asideLeft {
        flex: 8 1 auto;
        min-width: 8%;
        max-width: 8%;
        width: 8%;
    }
    #asideRight {
        flex: 8 1 auto;
        min-width: 8%;
        max-width: 8%;
        width: 8%;
    }
    #middle {
        flex: 84 1 auto;
        min-width: 84%;
        max-width: 84%;
        width: 84%;
    }
}
@media screen and (min-width: 768px) {
    #asideLeft {
        flex: 12 1 auto;
        min-width: 12%;
        max-width: 12%;
        width: 12%;
    }
    #asideRight {
        flex: 12 1 auto;
        min-width: 12%;
        max-width: 12%;
        width: 12%;
    }
    #middle {
        flex: 76 1 auto;
        min-width: 76%;
        max-width: 76%;
        width: 76%;
    }
}
@media screen and (min-width: 960px) {
    #asideLeft {
        flex: 16 1 auto;
        min-width: 16%;
        max-width: 16%;
        width: 16%;
    }
    #asideRight {
        flex: 16 1 auto;
        min-width: 16%;
        max-width: 16%;
        width: 16%;
    }
    #middle {
        flex: 68 1 auto;
        min-width: 68%;
        max-width: 68%;
        width: 68%;
    }
}
@media screen and (min-width: 1280px) {
    #asideLeft {
        flex: 20 1 auto;
        min-width: 20%;
        max-width: 20%;
        width: 20%;
    }
    #asideRight {
        flex: 20 1 auto;
        min-width: 20%;
        max-width: 20%;
        width: 20%;
    }
    #middle {
        flex: 60 1 auto;
        min-width: 60%;
        max-width: 60%;
        width: 60%;
    }
}
@media screen and (min-width: 1900px) {
    #asideLeft {
        flex: 25 1 auto;
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    #asideRight {
        flex: 25 1 auto;
        min-width: 25%;
        max-width: 25%;
        width: 25%;
    }
    #middle {
        flex: 50 1 auto;
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
}

/* Flex-Layout */
.flexContainer {
    display: flex;
}

.flexColumn {flex-direction: column; }
.flexRow {flex-direction: row; }
.wrap {flex-wrap: wrap; }
.nowrap {flex-wrap: nowrap; }

.flexContainer.columnContainer {flex-direction: column;}
.flexContainer.centeredContainer {justify-content: center;}
.flexContainer.justify_spread {justify-content: space-between;}

.flexItem {
    flex: 1 1 auto;
}
.flexItemNoGrowth {
    flex: 0 1 auto;
}
.flexItemNoShrink {
    flex: 1 0 auto;
}