/* More resetting for better compatibility */
@viewport {
    width: device-width;
    scale: 1;
}

html {
    text-size-ajust: 100%;
}

/* Own styles */

* {
    box-sizing: border-box;
}

html, body {
    font: normal 1rem/1.5 Helvetica, sans-serif;
    background: url('../img/bg.png');
}

h2, h3, h4 {
    font-weight: bold;
}

h2 {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.4rem;
    margin-bottom: .6rem;
}

h4 {
    font-size: 1.2rem;
    margin-bottom: .3rem;
    text-decoration: underline;
}

p {
    margin-bottom: 1.125rem;
}

p:last-child {
    margin-bottom: 0;
}

a {
    text-decoration: none;
}

strong,
th {
    font-weight: bold;
}

.link,
.link:visited {
    color: blue;
}

.link:hover {
    color: #D35400;
    text-decoration: underline;
}

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

.text-align-right {
    text-align: right !important;
}

.text-italic {
    font-style: italic;
}

.text-underline {
    text-decoration: underline;
}

img.padlock {
    width: 14px;
    height: 14px;
    margin: 0 1px;
}

ul.list{
    list-style: inherit;
}

ol.list {
    list-style: decimal;
}

ul.list,
ol.list {
    padding-left: 2rem;
    margin-bottom: 1.125rem;
}

ul.list:last-child,
ol.list:last-child {
    margin-bottom: 0;
}

ul.list.half-left-padding,
ol.list.half-left-padding {
    padding-left: 1rem;
}

.wrapper {
    width: auto;
    max-width: 1200px;
    margin: 0 .3rem;
}

@media only screen and (min-width: 45em) {

    .wrapper {
        margin: 0 .6rem;
    }

}

@media only screen and (min-width: 75em) {

    .wrapper {
        margin: 0 auto;
    }

}

#site-header .logo {
    font-family: Orbitron, Tahoma, sans-serif;
    font-size: 2.3rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    padding: 1rem 0 0;
}

#site-header .logo .logo-blue {
    color: #2980B9;
}

#site-header .logo .logo-orange {
    color: #F39C12;
}

@media only screen and (min-width: 45em) {

    #site-header .logo {
        text-align: left;
    }

}

#site-menu-search-bar {
    display: flex;
    justify-content: space-between;
    background: #34495E;
    padding: 0 1rem;
    border: 1px solid #080808;
    box-shadow: 5px 5px 15px #A0A0A0;
    margin-bottom: .6rem;
}

#site-menu,
#breadcrumbs-menu,
#login-menu {
    display: block;
}

#site-menu {
    width: 100%;
    text-align: center;
}

#site-menu .site-menu-item a {
    display: block;
    padding: .45rem .6rem;
    font-size: 1.125rem;
    color: #ECF0F1;
    text-shadow: 1px 1px 3px #000;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

#site-menu .site-menu-item a:hover {
    background: #2980B9;
    border-left: 1px solid #080808;
    border-right: 1px solid #080808;
}

#site-menu .site-menu-item.active a {
    color: #D35400;
}

@media only screen and (min-width: 45em) {

    #site-menu {
        display: flex;
    }

    #site-menu .site-menu-item a {
        display: inline-block;
    }

}

#site-content-container {
    background: #FFF;
    padding: 1.2rem .7rem;
    border: 1px solid #080808;
    box-shadow: 5px 5px 15px #A0A0A0;
    margin-bottom: 1.125rem;
}

.content-wrapper p {
    text-align: justify;
}

@media only screen and (min-width: 25em) {

    #site-content-container {
        padding: 1.2rem;
    }

}

@media only screen and (min-width: 60em) {

    .content-wrapper {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

}

.notification-area {}

.announcement-box,
.notice-box,
.error-box {
    border: 1px solid #080808;
    box-shadow: 5px 5px 15px #A0A0A0;
    padding: .65rem;
    margin-bottom: 1.125rem;
}

.announcement-box p,
.notice-box p,
.error-box p {}

.announcement-box {
    background: #F1C40F;
}

.notice-box {
    background: #DAEAEF;
}

.error-box {
    background: #C0392B;
    color: #ECF0F1;
}

@media only screen and (min-width: 45em) {

    #site-content-container {
        padding: 1.2rem 2.5rem;
        min-height: 450px;
    }

    .notification-area {
        /*max-width: 75%;*/
        margin: 0 auto;
    }

    .notification-area.form-notifications {
        /*max-width: 60%;*/
        margin: 0 auto;
    }

}




/* ############### *\
|* # FORM STYLES # *|
\* ############### */

.form {
    width: 100%;
}

.form .input-group {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

.form .input-group.inline-elements {
    display: flex;
    flex-wrap: wrap;
}

.form .input-group.inline-elements .form-input {
    margin-bottom: 1rem;
}

.form .input-group.inline-elements .form-input:last-child {
    margin-bottom: 0;
}

@media only screen and (min-width: 45em) {

    .form .input-group.inline-elements {
        display: flex;
        flex-wrap: nowrap;
    }

    .form .input-group.inline-elements .form-input {
        margin-bottom: 0;
    }

}

@media only screen and (min-width: 60em) {}


.form .input-group .label {
    display: inline-block;
}


.form .input-group .checkbox-label,
.form .input-group .radio-label {
    display: inline-block;
}

.form .input-group.full-size .checkbox-label,
.form .input-group.full-size .radio-label {

}


.form .input-group .form-input {
    display: block;
    width: 100%;
    font-size: 1rem;
    padding: .4rem;
    border: 1px solid #D5DCE4;
    box-shadow: 0 0 8px #C3C3C3;
    background: #FFF;
    outline: none;
}

.required-sign,
.form .input-group .required-sign {
    font-weight: bold;
    color: red;
}

.form .input-group .form-input + .required-sign {
    display: none;
}

@media only screen and (min-width: 45em) {

    .form .input-group .required-sign {
        display: none;
    }

    .form .input-group .form-input + .required-sign {
        display: inline-block;
    }

}




.form .input-group .form-input:hover {
    border-color: #C9C9C9;
    box-shadow: 0 0 8px #9B9B9B;
}

.form .form-input select.form-input  option > span {
    word-wrap: break-spaces;
    word-break: break-word;
}

.form .input-group .form-input[type="color"] {
    padding: 1px;
}

.form .input-group .form-input[type="text"],
.form .input-group .form-input[type="email"],
.form .input-group .form-input[type="password"],
.form .input-group select.form-input,
.form .input-group .form-input[type="submit"] {
    padding: .7rem;
}

.form .input-group .form-input[type="submit"] {
    cursor: pointer;
    border: 1px solid #080808;
}

.form .input-group .form-input[type="submit"].button-error {
    /*background: #E74C3C;*/
    background: #C0392B;
}

.form .input-group .form-input[type="submit"].button-danger {
    background: #F1C40F;
}

.form .input-group .form-input[type="submit"].button-success {
    background: #27ae60;
}

.form .input-group .form-input[type="submit"]:hover {
    background-color: #2980B9;
    color: #ECF0F1;
}

.form .input-group .form-input[type="submit"]:active {
    background: #D35400;
}

@media only screen and (min-width: 45em) {

    .form .input-group .form-input[type="text"],
    .form .input-group .form-input[type="email"],
    .form .input-group .form-input[type="password"],
    .form .input-group select.form-input,
    .form .input-group .form-input[type="submit"] {
        padding: .4rem;
    }

}



.form .input-group.two-checkbox-columns {
    display: flex;
    justify-content: center;
}

.form .input-group.two-checkbox-columns ul {
    columns: 2;
    column-gap: 3rem;
}

.form .input-group.flex-align {
    display: flex;
    align-content: center;
}

.form .input-group.flex-align-center {
    display: flex;
    justify-content: space-around;
}

.form .input-group .form-input[type="checkbox"],
.form .input-group .form-input[type="radio"] {
    display: inline-block;
    width: auto;
    margin-right: 0.4rem;
    cursor: pointer;
}

.form .input-group .form-input[type="radio"] {
    box-shadow: none;
}

.form .input-group .form-input:disabled,
.form .input-group .form-input:not(select):read-only {
    cursor: not-allowed;
}

.form .input-group .form-input:disabled:hover,
.form .input-group .form-input:read-only:hover {
    border-color: inherit;
    box-shadow: 0 0 8px #C3C3C3;
}

/* don't specify the complete "path" for the sibling element, otherwise it will not be found! */
.form .input-group .form-input[type="checkbox"]:disabled + .checkbox-label,
.form .input-group .form-input[type="radio"]:disabled + .radio-label {
    cursor: not-allowed;
}




@media only screen and (min-width: 45em) {

    .form .input-group .label {
        display: inline-block;
        width: 25%;
        text-align: right;
    }

    .form .input-group .checkbox-label,
    .form .input-group .radio-label {
        text-align: left;
        cursor: pointer;
    }

    .form .input-group.full-size .checkbox-label,
    .form .input-group.full-size .radio-label {
        width: auto;
        max-width: 90%;
    }


    .form .input-group .form-input {
        display: inline-block;
        width: 50%;
        margin: 0 0 0 .4rem;
        padding: .4rem;
    }

    .form .input-group .form-input:first-child {
        margin-left: 0;
    }

    .form .input-group .form-input[type="checkbox"],
    .form .input-group .form-input[type="radio"] {
        margin-top: .3rem;
    }

}


.table-replacement-on-phone {
    width: 100%;
    box-shadow: 5px 5px 15px #A0A0A0;
    margin: 1.5rem auto 2rem;
}

.table-replacement-on-phone .content-group > .content-group-item {
    display: block;
    padding: .8rem;
    background: #ECF0F1;
    border: 1px solid #080808;
    border-bottom: 0;
}

.table-replacement-on-phone .content-group > .content-group-item:first-child {
    font-weight: bold;
    background: #DAEAEF;
}

.table-replacement-on-phone .content-group:last-child > .content-group-item:last-child {
    border-bottom: 1px solid #080808;
}

.table-replacement-on-phone.dsgvo .content-group > .content-group-item:nth-child(2) {
    font-style: italic;
}

.table.preview,
.table.dsgvo,
.table.kommunikationsregeln {
    display: none;
}

@media only screen and (min-width: 25em) {}

@media only screen and (min-width: 45em) {

    .table-replacement-on-phone.preview,
    .table-replacement-on-phone.dsgvo,
    .table-replacement-on-phone.kommunikationsregeln {
        display: none;
    }

    .table {
        width: 100%;
        background: #ECF0F1;
        border: 1px solid #080808;
        box-shadow: 5px 5px 15px #A0A0A0;
        margin: 1.5rem auto;
    }

    .table th, .table td {
        padding: 1.125rem;
        border: 1px solid #080808;
        border-collapse: collapse;
    }

    table tr:hover {
        background: #DAEAEF;
    }

    .table.preview,
    .table.dsgvo,
    .table.kommunikationsregeln {
        display: table;
    }

    .table.preview th:first-child,
    .table.preview td:first-child {
        width: 30%;
    }

}

@media only screen and (min-width: 60em) {}


/* ############### *\
|* # NEWS STYLES # *|
\* ############### */

.news-box {
    background: #ECF0F1;
    border: 1px solid #080808;
    box-shadow: 5px 5px 15px #A0A0A0;
    margin-bottom: 1.5rem;
}

.news-box-header,
.news-box-footer {
    display: block;
}

.news-box-header > span,
.news-box-footer > span {
    display: block;
    text-align: center;
}

.news-box-header {
    background: #34495E;
    color: #ECF0F1;
    border-bottom: 1px solid #080808;
    padding: .5rem;
}

.news-box-content {
    padding: .8rem;
}

.news-box-content > p {
    margin-bottom: .5rem;
}

.news-box-content > p:last-child {
    margin-bottom: 0;
}

.news-box-footer {
    background: #DAEAEF;
    border-top: 1px solid #080808;
    padding: .25rem .5rem;
}

.news-box-footer p {
    text-align: right;
}

.news-pagination {
    display: flex;
    justify-content: center;
    margin-bottom: .5rem;
}

.news-pagination > .pagination-item {
    display: block;
    background: #ECF0F1;
    color: #080808;
    border: 1px solid #080808;
    box-shadow: 2px 2px 10px #A0A0A0;
    padding: .2rem .5rem;
    margin: 0 .3rem;
}

.news-pagination > .pagination-item.active {
    background: #34495E;
    color: #ECF0F1;
}

.news-pagination > .pagination-item:hover {
    background-color: #2980B9;
    color: #ECF0F1;
}

.news-pagination > .pagination-item:active {
    background: #D35400;
}

@media only screen and (min-width: 25em) {}

@media only screen and (min-width: 45em) {

    .news-box {
        margin-bottom: 2.5rem;
    }

    .news-box-header,
    .news-box-footer {
        display: flex;
        justify-content: space-between;
    }

    .news-box-content {
        padding: 1.5rem 1rem;
        min-height: 6rem;
    }

}

@media only screen and (min-width: 60em) {}


/* ############## *\
|* # FAQ STYLES # *|
\* ############+# */

.faq-box {
    background: #ECF0F1;
    border: 1px solid #080808;
    box-shadow: 5px 5px 15px #A0A0A0;
    margin-bottom: 2rem;
}

.faq-box .question,
.faq-box .answer {
    padding: .8rem;
}

.faq-box .question {
    font-weight: bold;
    margin-bottom: 10px;
    background: #DAEAEF;
    border-bottom: 1px solid #080808;
}

.faq-box .answer {
    font-style: italic;
}



/* #################### *\
|* # CHANGELOG STYLES # *|
\* #################### */

#changelog {}

#changelog .changelog-item {
    padding: .25rem;
    margin-bottom: .6rem;
}

#changelog .changelog-item.upcoming,
#changelog .changelog-item.current {
    margin-bottom: 1.125rem;
}

#changelog .changelog-item.current {
    background: #DAEAEF;
}

#changelog .changelog-item.upcoming {
    background: #FFEE95;
}

@media only screen and (min-width: 25em) {}

@media only screen and (min-width: 45em) {}


/* ################# *\
|* # FOOTER STYLES # *|
\* ################# */

#site-footer {
    line-height: 1.6;
    text-align: center;
}

#site-footer ul {
    margin-bottom: .5rem;
}

#site-footer ul li {
    display: block;
}

#site-footer ul li .footer-item-spacer {
    display: none;
}

#site-footer p {
    margin-bottom: 1.125rem;
}

.heart {
    color: firebrick;
}

@media only screen and (min-width: 30em) {

    #site-footer ul.footer-links {
        display: block;
    }

    #site-footer ul.footer-links li {
        display: inline;
    }

    #site-footer ul.footer-links li .footer-item-spacer {
        display: inline;
    }

}

@media only screen and (min-width: 45em) {

    #site-footer ul.footer-info {
        display: block;
    }

    #site-footer ul.footer-info li {
        display: inline;
    }

    #site-footer ul.footer-info li .footer-item-spacer {
        display: inline;
    }

}