/* === FARBEN === */


/*
Rot: #c00a1d
Weiß: #ffffff
Grau: #585858
*/


/* === Schriftart === */


/* Raleway */

@font-face {
    font-family: "Raleway";
    src: url(../webfonts/Raleway/Raleway-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Raleway";
    src: url(../webfonts/Raleway/Raleway-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "Raleway";
    src: url(../webfonts/Raleway/Raleway-Italic.ttf) format("truetype");
    font-style: italic;
    font-weight: normal;
}


/* Baloo_2 */

@font-face {
    font-family: "Baloo_2";
    src: url(../webfonts/Baloo_2/Baloo2-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Baloo_2";
    src: url(../webfonts/Baloo_2/Baloo2-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: bold;
}


/* Montserrat */

@font-face {
    font-family: "Montserrat";
    src: url(../webfonts/Montserrat/Montserrat-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url(../webfonts/Montserrat/Montserrat-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "Montserrat";
    src: url(../webfonts/Montserrat/Montserrat-Italic.ttf) format("truetype");
    font-style: italic;
    font-weight: normal;
}


/* Comfortaa */

@font-face {
    font-family: "Comfortaa";
    src: url(../webfonts/Comfortaa/static/Comfortaa-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Comfortaa";
    src: url(../webfonts/Comfortaa/static/Comfortaa-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: bold;
}


/* === GLOBAL === */

body {
    font-family: 'Comfortaa', Arial, sans-serif;
    color: #585858;
}

html {
    scroll-behavior: smooth;
}

:focus {
    outline: none;
    box-shadow: 0 0 2px 2px #848484, 0 0 10px #848484;
}

h2 {
    font-size: 1.3rem;
}


/* === GENERELL === */

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.intro-header {
    text-align: center;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.intro-header>h1 {
    text-transform: uppercase;
}

.btn-typ-0 {
    background-color: #c00a1d;
    color: #ffffff;
    border: none;
    font-size: 1.3rem;
    padding: .4rem;
    border-radius: .5rem;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
}

.link-typ-0 {
    background-color: #848484;
    color: #ffffff;
    border: none;
    font-size: 1.3rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
}

.btn-typ-0:hover {
    border-radius: 0;
}


/* === HEADER === */

#header {
    width: 100%;
    background-color: #c00a1d;
    height: 84px;
    position: fixed;
    top: 0;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    z-index: 1;
}

#header img {
    width: 256px;
    height: auto;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

#header .col-header {
    float: left;
    width: 50%;
    padding: 0;
}

#header .col-header:nth-of-type(2) {
    text-align: right;
}


/* === HEADER-BANNER === */

#header-banner img {
    width: 100%;
    height: auto;
}

#header-banner .container {
    width: 100%;
}

#header-banner .row,
.col-5,
.col-3 {
    padding: 0;
}

#header-banner .row,
.col-8 {
    padding: 0;
}

#header-banner .row {
    margin-top: 84px;
}

#header-banner .col-3 {
    text-align: center;
    padding: 2rem;
}

#header-banner .col-8:nth-of-type(2) {
    text-align: center;
    padding: 2rem;
}

#header-banner .col-8>p {
    padding: 0;
}

@media(max-width: 844px) {
    #header-banner .row,
    .col-5,
    .col-3 {
        width: 100%;
    }
}

@-webkit-keyframes einblenden {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes einblenden {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}


/* === HEADER-NAV === */

#desktop-nav {
    width: 100%;
    height: 84px;
    line-height: 4rem;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

#desktop-nav .col-8 {
    padding: 0;
}

#desktop-nav * {
    height: 100%;
}

#desktop-nav ul {
    padding: 0;
    margin: 0;
}

#desktop-nav ul>li {
    display: inline-block;
    text-transform: uppercase;
    padding-top: .6rem;
    margin-left: 1rem;
    color: #fff;
}

#desktop-nav ul>li:first-of-type {
    margin-left: 0;
}

#desktop-nav ul>li>a {
    -webkit-transition: .5s;
    transition: .5s;
}

#desktop-nav ul>li>a:link {
    color: #fff;
    text-decoration: none;
}

#desktop-nav ul>li>a:visited {
    color: #fff;
    text-decoration: none;
}

#desktop-nav ul>li>a:active {
    color: #fff;
    text-decoration: none;
}

#desktop-nav ul>li>a:hover {
    color: #ffffff;
    text-decoration: none;
}


/* === MOBILE-NAV === */

#mobile-nav {
    display: none;
    width: 60px;
    height: 84px;
    line-height: 5.3rem;
    font-size: 2rem;
    color: #ffffff;
    float: right;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
}

#mobile-nav:hover>#mobile-nav-content {
    display: block;
}

#mobile-nav-content {
    display: none;
    width: 100%;
    position: fixed;
    right: 0;
    -webkit-animation-name: slideInNav00;
    -webkit-animation-duration: 0.4s;
    animation-name: slideInNav00;
    animation-duration: 0.4s;
}

#mobile-nav-content>ul {
    padding: 0;
    margin: 0;
}

#mobile-nav-content>ul>li {
    display: block;
    background-color: #c00a1d;
    font-size: 1.2rem;
    text-align: center;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

#mobile-nav-content>ul>li>a {
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

#mobile-nav-content>ul>li>a:link {
    text-decoration: none;
    color: #ffffff;
}

#mobile-nav-content>ul>li>a:hover {
    text-decoration: none;
    color: #ffffff;
}

#mobile-nav-content>ul>li>a:active {
    text-decoration: none;
    color: #ffffff;
}

#mobile-nav-content>ul>li>a:visited {
    text-decoration: none;
    color: #ffffff;
}

@media (max-width: 1024px) {
    #desktop-nav {
        display: none;
    }
    #mobile-nav {
        display: block;
    }
}

@-webkit-keyframes slideInNav00 {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 84px;
        opacity: 1
    }
}

@keyframes slideInNav00 {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 84px;
        opacity: 1
    }
}

@-webkit-keyframes slideInNav01 {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 42px;
        opacity: 1
    }
}

@keyframes slideInNav01 {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 42px;
        opacity: 1
    }
}


/* === LEISTUNGEN-BEREICH === */

#leistungen-bereich {
    margin-top: 50px;
    padding-bottom: 3rem;
    background-image: url("../images/backgrounds/pattern00.png");
    background-repeat: repeat;
    background-attachment: fixed;
}

#leistungen-bereich .btn-typ-0 {
    margin-top: 5rem;
}

#leistungen-bereich .container {
    width: 100%;
}

#leistungen-bereich .row:nth-of-type(1) {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#leistungen-bereich .row:nth-of-type(4) {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

#leistungen-bereich .col-2>div,
.col-4>div {
    border: 1px solid #585858;
    border-radius: 1rem;
    width: 90%;
    text-align: center;
    font-size: 1.5rem;
    padding: 1rem;
    margin-left: auto;
    margin-right: auto;
    min-height: 9rem;
    max-height: 9rem;
}

#leistungen-bereich .col-2>div {
    line-height: 7rem;
}

#leistungen-bereich .col-4>div {
    padding: 2.5rem;
}

#leistungen-bereich .col-2>div>p,
.col-4>div>p {
    padding: 0;
    margin: 0;
}

@media(max-width: 1024px) {
    #leistungen-bereich .col-4 {
        width: 50%;
    }
}

@media(max-width: 1366px) {
    #leistungen-bereich .col-2:nth-of-type(3)>div {
        margin-top: 1rem;
    }
    #leistungen-bereich .col-2:nth-of-type(4)>div {
        margin-top: 1rem;
    }
    #leistungen-bereich .row:nth-of-type(4) {
        width: 100%;
        margin-top: 1rem;
    }
    #leistungen-bereich .row:nth-of-type(3) {
        margin-top: 1rem;
    }
}

@media(max-width: 768px) {
    #leistungen-bereich .col-4 {
        width: 100%;
    }
    #leistungen-bereich .col-2:nth-of-type(2)>div {
        margin-top: 1rem;
    }
    #leistungen-bereich .col-2>div {
        width: 90%;
    }
    #leistungen-bereich .col-4:nth-of-type(2)>div {
        margin-top: 1rem;
    }
    #leistungen-bereich .col-4>div {
        width: 90%;
    }
}


/* === UEBER-UNS-BEREICH === */

#ueber-uns-bereich {
    padding: 3rem;
}

.ueber-uns-bild {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #848484;
    float: right;
    margin-right: 2rem;
}

#bild-e {
    background-image: url('../images/profil/bild-e-small.png');
    background-repeat: no-repeat;
    background-position: center;
}

#bild-m {
    background-image: url('../images/profil/bild-m-small.png');
    background-repeat: no-repeat;
    background-position: center;
}

#ueber-uns-bereich .row {
    margin-bottom: 100px;
}

#ueber-uns-bereich .col-4:nth-of-type(1),
.col-4:nth-of-type(3) {
    border-right: 3px solid #c00a1d;
}

#ueber-uns-bereich .col-4>h2,
p {
    padding-left: 2rem;
}

#ueber-uns-bereich .col-4>h2 {
    font-size: 1.5rem;
}

@media (max-width: 1024px) {
    .ueber-uns-bild {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    #ueber-uns-bereich .col-4:nth-of-type(1),
    .col-4:nth-of-type(3) {
        border: none;
    }
    #ueber-uns-bereich .col-4>h2,
    p {
        padding: 0;
    }
}


/* === KARRIERE-BEREICH === */

#karriere-bereich {
    padding-top: 4rem;
}

#karriere-bereich .col-8 {
    text-align: center;
}

#karriere-bereich .col-8>p {
    font-size: 1.2rem;
    padding: 0;
}


/* === KONTAKT-BEREICH === */

#kontakt-bereich {
    padding-top: 2rem;
    margin-top: 50px;
    border-top: 1px solid #585858;
}

#kontakt-bereich .container:nth-of-type(1) {
    width: 100%;
}

#kontakt-bereich .col-8>img {
    width: 100%;
    height: auto;
}

#kontakt-bereich .row:nth-of-type(2) {
    margin-top: 50px;
}

#kontakt-bereich a:link {
    color: #585858;
    text-decoration: none;
}

#kontakt-bereich a:hover {
    color: #585858;
    text-decoration: none;
}

#kontakt-bereich a:active {
    color: #585858;
    text-decoration: none;
}

#kontakt-bereich a:visited {
    color: #585858;
    text-decoration: none;
}

#kontakt-bereich .col-2>p:first-of-type {
    font-size: 3rem;
    margin-bottom: 0;
}

#kontakt-bereich .col-2 {
    min-height: 220px;
    opacity: .6;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

#kontakt-bereich .col-2:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    #kontakt-bereich .col-2 {
        text-align: center;
    }
    #kontakt-bereich .col-2 p {
        padding: 0;
    }
    #kontakt-bereich .col-2:not(:nth-of-type(4)):after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 60%;
        border-bottom: 1px solid #585858;
    }
}


/* === MAP-BEREICH === */

#map-bereich {
    padding-bottom: 0;
    margin-top: 2rem;
}


/* === CONTENT-BEREICH === */

#content-bereich {
    margin-top: 100px;
    margin-bottom: 100px;
}

#content-bereich h1>span {
    margin-left: 10px;
}

#content-bereich a:link {
    color: #c00a1d;
}

#content-bereich a:hover {
    color: #c00a1d;
}

#content-bereich a:active {
    color: #c00a1d;
}

#content-bereich a:visited {
    color: #c00a1d;
}


/* === FOOTER === */

footer {
    background-color: #585858;
}

footer a:link {
    text-decoration: none;
    color: #ffffff;
}

footer a:hover {
    text-decoration: none;
    color: #ffffff;
}

footer a:visited {
    text-decoration: none;
    color: #ffffff;
}

footer a:active {
    text-decoration: none;
    color: #ffffff;
}

footer .col-8 {
    border-top: 1px solid #848484;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    color: #848484;
}

footer .col-8 a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}

footer .col-1_3 p {
    padding: 0;
    margin: 0;
}

footer .col-1_3 i {
    margin-top: 2rem;
    font-size: 3rem;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

footer .col-1_3 i:hover {
    font-size: 3.5rem;
}

footer span {
    display: block;
    margin-top: 1rem;
    font-size: 1.5;
}

footer .col-1_3 {
    text-align: center;
}

footer .container {
    width: 100%;
}

footer .row:nth-of-type(1) {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

@media (max-width: 1366px) {
    footer .row:nth-of-type(1) {
        width: 80%;
    }
}

@media (max-width: 1024px) {
    footer .col-1_3:nth-of-type(1) p {
        margin-bottom: 0;
    }
    footer .col-1_3:nth-of-type(2) p {
        margin-top: 0;
        margin-bottom: 0;
    }
    footer .col-1_3:nth-of-type(3) p {
        margin-top: 0;
    }
}


/* === MODAL-BOX ===*/

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}


/* Modal Content */

.modal-content {
    position: fixed;
    top: 10%;
    background-color: #ffffff;
    width: 60%;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    margin-left: 20%;
    margin-right: 20%;
}

.slide-in-right {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

.slide-in-left {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

.close {
    color: #ffffff;
    float: right;
    font-weight: bold;
}

.close01 {
    color: #585858;
    float: right;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #585858;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    background-color: #848484;
    color: #ffffff;
    height: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .4rem;
}

.modal-header h2 {
    margin: 0;
}

.modal-body {
    padding: 1rem;
    width: 100%;
}

.modal-body img {
    width: 40%;
    height: auto;
    margin-left: 30%;
    margin-right: 30%;
}

@keyframes slideInRight {
    from {
        right: -300px;
        opacity: 0
    }
    to {
        right: 0;
        opacity: 1
    }
}

@-webkit-keyframes slideInRight {
    from {
        right: -300px;
        opacity: 0
    }
    to {
        right: 0;
        opacity: 1
    }
}

@keyframes slideInLeft {
    from {
        left: -300px;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

@-webkit-keyframes slideInLeft {
    from {
        left: -300px;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@media(max-width: 1366px) {
    .modal-content {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
}

@media(max-width: 748px) {
    .modal-content {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
}


/*=== SLIDES ===*/

.slides-einblenden {
    -webkit-animation: einblenden 6s infinite;
    animation: einblenden 6s infinite
}

@keyframes einblenden {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}