/**
 * Pico's Default Theme
 *
 * Pico's default theme is a bit bare - but that's intentional! The default
 * theme isn't meant for production use, it's actually a template for you to
 * design your own theme around.
 *
 * Pico is a stupidly simple, blazing fast, flat file CMS.
 *
 * @author  Gilbert Pellegrom
 * @author  Daniel Rudolf
 * @link    http://picocms.org
 * @license http://opensource.org/licenses/MIT The MIT License
 * @version 2.1

Colors:
    header blau:    #006bb3
    dunkel blau:    #014071
    hell blau:      #00B4C4
    Grün:           #27a22d

Verbesserungen
    styling:


    html:
        hr nach Impressums tabelle
        Name Anschrift seperat dann hr dann Tabelle
        divs mit flexbox statt tabelle
        divs in footer
        svgs in footer

 */


/*** Table of Contents ***/
/* 
 * General Changes
 * Basic Layout
 *      Header
 *      Footer
 *      Extra Small Devices
 * Typography
 * Utilities
 * Impressum
 * Tables
 * Lists
 * Code
 * Blockquote
 * Forms
 */

 /*** GENERAL CHANGES***/

 * {
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
}
.hidden {
    display: none !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0 none;
}
.slide {
    overflow-y: hidden !important;
    -webkit-transition: height .5s ease-in !important;
    transition: height .5s ease-in !important;
}


/*** BASIC LAYOUT ***/

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
#main {
    flex: 1 0 auto;
}
#header, #footer {
    flex: 0 0 auto;
}
#main {
    padding: 3em 0 4em;
}
.container {
    max-width: 48em;
    padding: 0 0.5em;
    margin: 0 auto;
}
.widescreen .container {
    max-width: 72em;
}

/* very ugly overflow fix, avoid this whenever possible! */

#main .container {
    overflow-x: auto;
}


/*** BASIC LAYOUT: HEADER ***/

#header {
    background: #014071;
}
#title, #logo {
    float: left;
    padding: 3em 3em 3em 0;
}
#title * {
    margin: 0;
    color: #fff;
}
#title p {
    font-style: italic;
}
#title a {
    text-decoration: none;
}
#logo {
    height: 10.8em;
}
#logo * {
    display: block;
    height: 100%;
}
#logo img {
    min-width: 4.8em;
}
#logo+#title h1 {
    margin: 0.8rem 0;
}
#logo+#title.tagline h1 {
    margin: 0;
}
#nav {
    padding: 3em 0;
    text-align: right;
}
#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav ul li {
    display: inline-block;
    margin-left: 1em;
    padding: 0;
    font-weight: bold;
}
#nav a, #nav-toggle {
    color: #eaeaea;
    opacity: 0.8;
    text-decoration: none;
    font-weight: 550;
}
#nav .active a, #nav a:hover, #nav-toggle:hover {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}
#nav-toggle {
    display: none;
}

/* IE8 + IE9 clearfix */

#header>.container:after {
    content: '';
    display: block;
    clear: both;
}


/*** BASIC LAYOUT: FOOTER ***/

#footer {
    background: linear-gradient(to bottom, #006bb3, #0260a2, #025591, #024a81, #014071);
}
#footer-top {
    display: flex;
    flex-wrap: wrap;
    padding: 2em 1em 1em 1em;
}
#footer-list, #footer .social {
    height: 4.8em;
    flex: 1 1 50%;
}
#footer .social {
    display: flex;
    padding-right: .5em;
    gap: 1em;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#footer p {
    margin: 0;
    padding: 0.5em 0 0.5em 0;
}
#footer ul a {
    color: #eaeaea;
    opacity: 0.8;
    font-weight: 550;
}
.social-svg {
    fill: #eaeaea;
    opacity: 0.8;
}
#footer ul a:hover {
    color: #fff;
    opacity: 1;
}
.social-svg:hover {
    fill: #fff;
    opacity: 1;
}
#footer ul {
    padding: 0;
}
#footer svg {
    height: 3rem;
}
#footer #copyright {
    text-align: center;
    font-size: 00.85rem;
    padding: 0;
    margin: 0 0 2em 0;
    color: #fafafa;
}


/*** BASIC LAYOUT: EXTRA SMALL DEVICES ***/

@media (max-width: 767px) {
    #main {
        padding: 2em 0 1em;
    }
    #title, #logo {
        padding: 2em 1.5em 2em 0;
    }
    #logo {
        height: 8.8em;
    }
    #nav {
        clear: both;
        padding: 0;
    }
    #nav ul {
        padding-bottom: 1em;
    }
    #nav ul li {
        display: block;
        margin-left: 0;
        text-align: center;
    }
    #nav ul li a {
        display: block;
        padding: 0.5em 0;
    }
    .js #nav-toggle {
        display: block;
        float: right;
        width: 2em;
        margin: 0.6667em 0;
        font-size: 1.5rem;
        line-height: 2em;
        text-align: center;
        cursor: pointer;
    }
    .js #nav-toggle>* {
        vertical-align: middle;
    }
}
@media (max-width: 550px) {
    #footer-list, #footer .social {
        height: 5em;
        flex: 1 1 100%;
        font-size: 1.25rem;
        justify-content: center;
    }
    #footer ul li {
        display: block;
        padding-left: 0;
        text-align: center;
    }
}


/*** TYPOGRAPHY ***/

html {
    font-size: 16px;
}
body {
    font-family: 'Droid Sans', 'Helvetica', 'Arial', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    color: #444;
}
p, td, th, li, dd {
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
p, table, .table-responsive, ol, ul, dl, dd, pre, blockquote, fieldset {
    margin-bottom: 1em;
}
a {
    color: #006bb3;
    font-weight: normal;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
    transition: color .2s ease-in;
}
#main a:hover {
    opacity: 0.7;
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.6em;
    font-weight: bold;
    color: #333;
}
h1 {
    font-size: 2.8rem;
    text-align: center;
    color: #444;
}
h2 {
    font-size: 1.7rem;
    color: #444;
}
h3 {
    color: #006bb3;
    font-size: 1.1rem;
}
h4 {
    color: #006bb3;
    font-size: 1.1rem;
    margin-top: 2em;
}
h5 {
    font-size: 1rem;
}
h6 {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
}
img {
    max-width: 100%;
}
hr {
    border: 0.05em solid #ababab;
    border-radius: 0.3em;
    background: #ababab;
    margin: 1.5em 0;
}
abbr {
    text-decoration: underline dotted;
}


/*** UTILITIES ***/

.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.align-justify {
    text-align: justify;
}
.center {
    margin: auto;
    width: 100%;
}
.image {
    display: block;
    margin: 0 auto;
}
.image.xsmall {
    width: 20%;
}
.image.small {
    width: 40%;
}
.image.large {
    width: 60%;
}
.image.xlarge {
    width: 80%;
}
.image.float-left {
    float: left;
    margin: 1em 2em 1em 0;
}
.image.float-right {
    float: right;
    margin: 1em 0 1em 2em;
}
.image img {
    display: block;
    width: 100%;
}
@media (max-width: 767px) {
    .image.xsmall {
        width: 60%;
    }
    .image.small {
        width: 80%;
    }
    .image.large, .image.xlarge {
        width: 100%;
    }
    .image.float-left, .image.float-right {
        float: none;
        margin: 0 auto;
    }
}


/*** IMPRESSUM ***/

.responsive-flexbox {
    padding: 1em 0 0 1em;
    display: flex;
    flex-wrap: wrap;
}
.responsive-flexbox>* {
    flex: 1 1 40ch;
    height: 10em;
}
#anschrift {
    padding-left: 1em;
}


/*** TABLES ***/

table {
    border-spacing: 0;
    padding-bottom: 1em;
    margin: auto;
}
td, th {
    padding: 0.4em 1em;
    vertical-align: top;
}
td, th {
    border: 1px solid #ccc;
}
tr:not(:last-child) td, tr:not(:last-child) th {
    border-bottom: 0 none;
}
thead tr:last-child th {
    border-bottom: 0 none;
}
td:not(:last-child), th:not(:last-child) {
    border-right: 0 none;
}
tr:first-child td:first-child, tr:first-child th:first-child {
    border-top-left-radius: 0.3em;
}
tr:first-child td:last-child, tr:first-child th:last-child {
    border-top-right-radius: 0.3em;
}
tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.3em;
}
tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.3em;
}
table thead+tbody tr:first-child td {
    border-radius: 0 !important;
}
.table-responsive {
    overflow-x: auto;
}
.table-responsive>table {
    margin-bottom: 0;
}


/*** LISTS ***/

ul {
    list-style-type: none;
    margin: 0;
    padding-left: 1em;
}
ol, ul {
    list-style-position: outside;
    padding-left: 1.5em;
}
ol {
    padding-left: 2.5em;
}
li {
    padding-left: 0.5em;
}
dt {
    font-weight: bold;
}
dd {
    margin-left: 2em;
}


/*** CODE ***/

code {
    margin: 0 0.1em;
    padding: 0.1em 0.2em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
    font-family: 'Droid Sans Mono', 'Courier New', 'Courier', monospace;
    font-size: 0.85rem;
    line-height: 1.9824;
}
pre {
    padding: 0 1em;
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #f5f5f5;
}
pre code {
    display: block;
    margin: 0;
    padding: 1.1111em 0;
    border: 0 none;
    background: transparent;
    overflow-x: auto;
    line-height: 1.4;
}


/*** BLOCKQUOTE ***/

blockquote {
    font-style: italic;
    margin-left: 1em;
    padding-left: 1em;
    border-left: 0.5em solid #f5f5f5;
}


/*** FORMS ***/

label, fieldset legend {
    font-weight: bold;
}
input:not([type="checkbox"]):not([type="radio"]), button, select, textarea, fieldset, fieldset legend {
    border: 1px solid #ccc;
    border-radius: 0.3em;
    background: #fff;
    -webkit-transition: none .2s ease-in;
    transition: none .2s ease-in;
    -webkit-transition-property: border-color, background, box-shadow;
    transition-property: border-color, background, box-shadow;
}
input:not([type="checkbox"]):not([type="radio"]), button, select, textarea {
    padding: 0.5em 1em;
    outline: 0 none;
    font-size: 1rem;
}
input:focus:not([type="checkbox"]):not([type="radio"]), button:focus, select:focus, textarea:focus {
    border-color: #2EAE9B;
    box-shadow: 0 0 8px #2EAE9B;
}
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus, button:focus, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
    background: #f5f5f5;
    cursor: pointer;
}
textarea, select[multiple] {
    vertical-align: bottom;
    overflow: auto;
}
fieldset {
    padding: 1em;
    background: #f5f5f5;
}
fieldset legend {
    padding: 0 0.5em;
}
fieldset label, fieldset input, fieldset button, fieldset select, fieldset textarea {
    margin: 0.2em 0.5em;
}
fieldset label:first-child, fieldset input:first-child, fieldset button:first-child, fieldset select:first-child, fieldset textarea:first-child {
    margin-left: 0;
}
fieldset label:last-child, fieldset input:last-child, fieldset button:last-child, fieldset select:last-child, fieldset textarea:last-child {
    margin-right: 0;
}

/* Firefox input size fix */

input::-moz-focus-inner, button::-moz-focus-inner {
    border: 0;
    padding: 0;
}