@charset "UTF-8";

/* "take-sides.org" layout.css Vers. 1.0.*/

html {
    box-sizing: border-box;
}

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

body {
    color: #1d2731;
    background-color: #efefef;
    font-family: Georgia, arial;
    margin: 0;
}
	.logo-brand-c	{ font-style: arial; font-size: 12pt; color: #000000; font-weight: normal; text-align: center; margin: 0; }

   .txbrand		{ color:#d3d3d3; font-family: Georgia; font-size: 18pt; font-weight: bold; }
   .txclaim		{ color:#d3d3d3; font-family: Georgia; font-size: 12pt; font-weight: bold; }

	.h3-center		{ text-align: center; }

	.main-tec-s-c	{ font-style: Georgia; font-size: 12pt; color: #000000; font-weight: normal; text-align: center; margin: 0; }

	.main-tec-s 	{ font-style: Georgia; font-size: 11pt; color: #000000; font-weight: normal; margin: 0; }
	.main-tec-b 	{ font-style: Georgia; font-size: 11pt; color: #000080; font-weight: bold; margin: 0; }
	.main-tec-g 	{ font-style: Georgia; font-size: 11pt; color: #008000; font-weight: bold; margin: 0; }
	.main-tec-r 	{ font-style: Georgia; font-size: 10pt; color: #FF0000; font-weight: normal; margin: 0; }
	
	.aside-tec-s 	{ font-style: arial; font-size: 11pt; color: #000000; font-weight: normal; margin: 0; }
	.aside-tec-b 	{ font-style: arial; font-size: 11pt; color: #000080; font-weight: normal; margin: 0; }
	.aside-tec-g 	{ font-style: arial; font-size: 11pt; color: #008000; font-weight: bold; margin: 0; }
	

ul {
    padding: 0;
}

.grid {
    display: grid;
    grid-template-rows: 130px auto auto auto 100px;
    grid-template-columns: repeat(10, 10%);
}


/*  Geräte kleiner als 640px/40em  */

.header {
    grid-column: 1 / 11;
    grid-row: 1 / 2;
    text-align: center;
    background-color: #000080;
    color: #d3d3d3;
    border-bottom: 1px solid #efefef;
}

.head-txt {
    grid-column: 1 / 11;
    grid-row: 1 / 2;
    text-align: center;
    background-color: #000080;
    color: #d3d3d3;
}


.nav {
    grid-column: 1 / 11;
    grid-row: 2 / 3;
}

.nav-ul {
    background-color: #000080;
    margin: 0;
}

.nav-li {
    list-style: none;
    margin-left: 0;
    border-bottom: 1px solid #efefef;
}

.nav-li-a {
    padding: 0.6em 2rem;
    display: block;
}

.nav-ul a:link {
    text-decoration: none;
}

.nav-ul a:link,
.nav-ul a:visited {
    color: #fff;
    /* white*/
}

.nav-ul a:hover,
.nav-ul a:focus,
.nav-ul a:active {
    background-color: #000;
    /* Black */
    color: #efefef;
    /* Neutral */
}

.nav-active {
    color: #000;
    /* Black */
    background-color: #fff;
    /* White */
}


.nav-li {
    list-style: none;
    margin-left: 0;
    border-bottom: 1px solid #efefef;
}

.content {
    grid-column: 1 / 11;
    grid-row: 3 / 4;
    padding: 0 1rem 0 2rem;
}

.aside {
    grid-column: 1 / 11;
    grid-row: 4 / 5;
    border-top: 1px solid #a9a9a9;
    padding: 0 1rem 0 2rem;
}

.footer {
    grid-column: 1 / 11;
    grid-row: 5 / 6;
    background-color: #a9a9a9;
    color: #efefef;
    padding: 1em;
    text-align: center;
    border-top: 1px solid #efefef;
}

.logo-pic {
    float: left;
    margin: 0 1em 0.2em 0;
    max-width: 35%;
    height: auto;
}

.img-logo {
    max-width: 100%;
    height: auto;
}


/* ab 640px / 16px/em = 40em, 2 spaltig */

@media screen and (min-width: 40em) {
    .header {
        text-align: right;
    }
    .content {
        grid-column: 1 / 8;
        grid-row: 3 / 4;
        padding: 0 1rem 0 2rem;
    }
    .aside {
        grid-column: 8 / 11;
        grid-row: 3 / 4;
        padding: 0 2rem 0 2rem;
        border-top: none;
    }
    .nav-ul {
        padding: 0 2rem;
        overflow: hidden;
    }
    .nav-li {
        float: left;
        display: inline-block;
        border: none;
        width: auto;
    }
    .nav-li-a {
        padding: 0.7em 1.2rem;
        display: inline-block;
    }
}

/* 1024px / 16px/em = 64em, 3 spaltig */

@media screen and (min-width: 64em) {
    .content {
        grid-column: 3 / 8;
        grid-row: 2 / 4;
        padding: 1em 1.5em;
    }
    .aside {
        grid-column: 8 / 11;
        grid-row: 2 / 4;
        padding: 1em 1.5em;
    }
    .nav {
        grid-column: 1 / 3;
        grid-row: 2 / 4;
        background-color: #000080;
    }
    .nav-ul {
        box-shadow: none;
        margin: 1em 0;
        padding: 0;
    }
    .nav-li {
        width: 100%;
        float: none;
        text-align: center;
    }
    .nav-li-a {
        padding: 0.5em 3rem;
        display: block;
    }
}


/* 1280px / 16px/em = 80em, 3 spaltig */

@media screen and (min-width: 80em) {
    .grid {
        margin: 0 auto;
        max-width: 80em;
    }
    .clear {
        clear: both;
    }
}