/* Globale Einstellung "body" */
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    background-color: lightyellow;
}

/* Standardeinstellung für Bilder (Anpassung an die geräteabhängige Größe */
img {
    max-width: 100%;
    display: block;
}

/* Globale Einstellung für Listen */
ul {
    margin: 0;
    padding: 0;
}

/* Globale Einstellung "header" */
header {
    background: olivedrab;
    color: lightyellow;
    padding-top: 1.5em;
    min-height: 70px;
    border-bottom: silver 0.1em solid;
}

/* Globale Einstellung für die Links in "header" */

header a {
    color: lightgoldenrodyellow;
    text-decoration: none;
    font-size: 1rem;
}

header li {
    float: left;
    display: inline;
    padding: 0 1em 0 1em;
}

/* Branding in der Menüelemente in "header" links ausrichten*/
header #branding {
    float: left;
}

/* Titel in Branding in der Menüelemente in "header" ausrichten*/
header #branding h1 {
    margin: 0;
}

/* Menüelemente in "header" rechts ausrichten*/
header nav {
    float: right;
    margin-top: 1em;
}

header .highlight,
header .current a {
    color: #e8f80ee7;
    font-weight: bold;
}

header a:hover {
    color: #cccccc;
    font-weight: bold;
}
/* Globale Einstellung für die Klasse "container" */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

/* Sidebar */
aside#sidebar {
    float: right;
    width: 30%;
    margin-top: 1em;
}

aside#sidebar ul {
    margin-left: 1em;
}

aside#sidebar .quote input,
aside#sidebar .quote textarea {
    width: 90%;
    padding: 1em;
}

aside#sidebar a {
    text-decoration: none;
    color: white;
}
aside#sidebar a:focus,
aside#sidebar a:hover {
    font-weight: bold;
    color: yellow;
}

/* Main-col */
article#main-col {
    margin-top: 1em;
    float: left;
    width: 65%;
}
article#main-col ul {
    margin-left: 1em;
}

/* Formatierung Footer */
footer {
    padding: 1em;
    margin-top: 1em;
    color: white;
    background-color: seagreen;
    text-align: center;
}

/* Globale Einstellung für Schaltflächen */
.button_1 {
    height: 100%;
    background: green;
    /*  border: 0;  */
    padding: 0.5em;
    color: white;
    font-size: large;
    font-weight: bold;
}

/* Globale Einstellung für dunklen Hintergrund */
.dark {
    padding: 1em;
    background: #35424a;
    color: #ffffff;
    margin-top: 1em;
    margin-bottom: 1em;
}

.grey {
    padding: 1em;
    background: lightgrey;
    color: black;
    margin-top: 1em;
    margin-bottom: 1em;
    border: silver 0.1em solid;
}
.grey a {
    display: block;
    min-height: 38px;
    padding: 1em;
    margin: 1em;
    justify-content: center;
}

.grey img {
    float: left;
    padding-left: 0.1em;
    padding-right: 1em;
}

/* Showcase */
#showcase {
    min-height: 400px;
    background: url("../Images/Showcase_003.JPG") no-repeat 0 -800px;
    text-align: center;
    color: yellow;
}

#showcase h1 {
    margin-top: 5em;
    font-size: 4rem;
    margin-bottom: 1em;
}

#showcase p {
    font-size: 2rem;
}

/* Formatierung "Newsletter" */
#kontakt {
    padding: 1em;
    color: #ffffff;
    background: olivedrab;
}

#kontakt h1 {
    font-size: 1.25rem;
}

#kontakt p {
    font-size: 1rem;
}

#kontakt a {
    font-size: 1rem;
    color: black;
    font-weight: bold;
}

#kontakt form {
    margin-top: 0.1em;
}

#kontakt input[type="email"] {
    padding: 1em;
    height: 25px;
    width: 100%;
}

/* Formatierung "Boxes" */
#boxes {
    margin-top: 1.5em;
}

#boxes .box {
    float: left;
    text-align: Left;
    width: 30%;
    padding: 1em;
}

#boxes .box img {
    max-width: 100%;
}

/* Formatierung für Tabellen neue Definitionen */

.tab_responsive {
    display: block;
    overflow-x: auto;
}

table.browserref {
    border-collapse: collapse;
    width: 100%;
    font-size: 1em;
}

table.browserref tr:nth-child(even) {
    background-color: #dddddd;
}
table.browserref tr:nth-child(odd) {
    background-color: #f0f0ef;
}
table.browserref tr.fixzebra {
    background-color: #f1f1f1;
}

table.browserref th {
    height: 44px;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #d4d4d4;
    background-color: #c0c0c0;
    font-weight: bold;
    color: #555555;
    padding: 0.2em 0.1em 0.2em 0.1em;
    vertical-align: middle;
}

table.browserref td {
    border: 1px solid #d4d4d4;
    text-align: center;
    padding: 8px;
    vertical-align: top;
}

table.browserref th:first-child,
table.browserref td:first-child {
    padding-left: 16px;
}
/* Formatierung für 2-spaltige Tabellen */
/* alte Definitionen Tabelle */
.tabelle {
    display: block;
    overflow-x: auto;
    float: left;
    width: 60%;
    padding-top: 1em;
    border: 0.1em solid black;
    background-color: white;
}
.tab_spalte {
    text-overflow: clip;
    background-color: white;
    border-style: solid;
    border-width: 0.1em 0.1em 0.1em 0.1em;
    border: 0.1em solid black;
    visibility: visible;
}

.tab_titel {
    text-overflow: clip;
    font-weight: bold;
    color: white;
    height: 23px;
    border: 0.1em solid black;
    background-color: grey;
    vertical-align: top;
}

.tab_zeile_text {
    text-overflow: clip;
    font-weight: normal;
    color: black;
    height: 23px;
    border: 0.1em solid black;
    background-color: #ebeadf;
    white-space: wrap;
    vertical-align: top;
}

.tab_zeile_numerisch {
    text-overflow: clip;
    font-weight: normal;
    color: black;
    height: 23px;
    border: 0.1em solid black;
    background-color: #ebeadf;
    white-space: wrap;
    vertical-align: top;
    text-align: right;
}

/* Media Queries */
@media (max-width: 768px) {
    header #branding,
    header nav,
    header nav li,
    #newsletter h1,
    #newsletter form,
    #boxes .box,
    aside#sidebar {
        float: none;
        text-align: center;
        width: 100%;
    }

    article#main-col {
        float: none;
        text-align: center;
        width: 100%;
    }

    header {
        padding-bottom: 0.1em;
    }

    #showcase h1 {
        margin-top: 2em;
    }
    #newsletter button,
    .quote button {
        display: block;
        padding: 1em;
        width: 80%;
    }

    .grey a {
        display: block;
        justify-content: center;
    }
    #newsletter form input[type="email"],
    .quote input,
    .quote textarea {
        width: 100%;
        margin-bottom: 1em;
    }
}