body {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 1.54rem;
}

#wrapper {
    max-width: auto;
    margin: 0 auto;
    border-left: 1px solid #c4c4c4;
    border-right: 1px solid #c4c4c4;
}

#haupt {
    max-width: 1500px;
    margin: 0 auto;
    border: 1px solid #acacac;
    -webkit-box-shadow: 2px 2px 25px 5px #acacac;
    box-shadow: 2px 2px 25px 5px #acacac;
}

#impress,
#haftung {
    padding: 15rem 0 5rem;
    background-color: #EDEAEF;
}

#impress > p {
    font-size: 1.5rem;
}

#haftung,
#policy > p {
    font-size: 1.1rem;
}

#haftung,
#policy > p.big {
    font-size: 1.3rem;
}

#haftung,
#policy > h6 {
    font-size: 1.8rem !important;
}

h1,
.h1 {
    font-size: 8rem;
}

h2,
.h2 {
    font-size: 6rem;
}

h3,
.h3 {
    font-size: 5rem;
}

h4,
.h4 {
    font-size: 4rem;
}

h5,
.h5 {
    font-size: 3rem;
}

h6,
.h6 {
    font-size: 2rem;
    margin-bottom: 20px;
}


/* ---------- ANKER ------------ */

#firma,
#team,
#help,
#leistungen,
#kontakt {
    margin-top: -100px;
    padding-top: 100px;
}


/* ---------- KLASSEN ---------- */

.container {
    width: auto;
}


/* --- Cookie Container ---*/

.cc-color-override--1621652530.cc-window {
    color: #890000 !important;
    background-color: #bfbfbf !important;
    border-radius: 10px !important;
    border: solid 1px gray !important;
    -webkit-box-shadow: 2px 2px 25px 5px #5d5d5d;
    box-shadow: 2px 2px 25px 5px #5d5d5d;
}

.cc-window.cc-floating {
    padding: 2em;
    max-width: 25em;
    -ms-flex-direction: column;
    flex-direction: column;
}

.cc-link {
    text-decoration: none !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 1.4rem !important;
    color: #990000 !important;
}

.cc-bottom {
    bottom: 4em !important;
}

.cc-right {
    right: 3em !important;
}

.cc-revoke,
.cc-window {
    position: fixed;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Roboto, Helvetica, Calibri, Arial, sans-serif;
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    z-index: 9999;
}

.col {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 5rem;
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    width: 100%;
    line-height: 2.8ex;
    text-align: justify;
    hyphens: auto;
    orphans: 3;
    widows: 3;
}

.anchor {
    display: block;
    content: ” “;
    height: 90px;
    /* Give height of your fixed element */
    margin-top: -100px;
    /* Give negative margin of your fixed element */
    visibility: hidden;
}

.font_b {
    font-family: 'Bulmer MT Std', serif !important;
}

.font_o {
    font-family: 'Open Sans', sans-serif !important;
}

.small {
    font-size: 1.3rem;
}

.bold {
    font-weight: bold;
}

.itallic {
    font-style: italic;
}

.light {
    color: #FFEEEE;
}

.light2 {
    color: #ffbbbb;
}

.dark {
    color: #aa0000;
}

.dark2 {
    color: #990000;
}

.black {
    color: #262626;
}

.white {
    color: #fff;
}

.small_1_1 {
    font-size: 1.1rem !important;
}

.small_1_2 {
    font-size: 1.2rem !important;
}

.small_1_4 {
    font-size: 1.4rem !important;
}

.small_1_5 {
    font-size: 1.47rem !important;
}

.konsult {
    font-size: 0.7em !important;
    margin-top: 20px;
}

.lg75 {
    width: 75%;
    margin: 10px auto;
}

.lg90 {
    width: 90%;
    margin: 10px auto;
}

.lg50-s75 {
    width: 50%;
    margin: 10px auto;
}

.padding0 {
    padding: 0px !important;
}

.paddingT2 {
    padding: 2rem !important;
}

.paddingT3 {
    padding: 3rem !important;
}

.paddingT4 {
    padding: 4rem !important;
}

.paddingT10 {
    padding: 10px !important;
}

.paddingBottom {
    padding-bottom: 40px;
}

.paddingB10 {
    padding-bottom: 10px;
}


.paddingBottom80 {
    padding-bottom: 80px;
}

.marginTB {
    margin: 4rem auto;
}

.marginTop {
    margin-top: 20px;
}


.marginTop80 {
    margin-top: 80px;
}

.marginTop120 {
    margin-top: 120px;
}

.marginTopMinus20 {
    margin-top: -20px;
}

.marginTopMinus10 {
    margin-top: -10px;
}

.marginB40 {
    margin-bottom: 40px;
}

.marginB80 {
    margin-bottom: 80px;
}

.marginB120 {
    margin-bottom: 120px;
}

.mittig {
    margin: auto;
}

.minHeight {
    min-height: 250px;
}

.logotop {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
}

img.img-responsive.logotop {
    opacity: 1;
}

.infoText {
    display: flex;
    margin-bottom: 10px;
}

a:focus {
    text-decoration: none !important;
}

a.logoslide {
    width: 350px;
    height: 350px;
}

a.logoslide:hover {
    opacity: 0;
    text-decoration: none;
}

a.logoslide:link,
a.logoslide:visited {
    text-decoration: none;
}

a:hover {
    color: gray;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.dropdown-menu > li > a:hover {
    color: rgba(255, 255, 255, 0.75);
    background-color: transparent;
}


a.site:link,
a.site:visited {
    text-decoration: none;
    color: black;
    font-size: 1.54rem !important;
    line-height: 22px;
    padding: 0px;
}

a.site:hover {
    color: gray;
}

a.site_small:link,
a.site_small:visited {
    text-decoration: none;
    color: black;
    font-size: 1.1rem !important;
    line-height: 22px;
    padding: 0px;
}

a.site_small:hover {
    color: gray;
}

a.invert:link,
a.invert:focus,
a.invert:visited {
    display: inline-block;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #333333 !important;
    font-size: 1.8rem !important;
    line-height: 30px;
    padding: 0px 30px;
    margin: 10px 20px;
}

button.invert,
button.invert:visited {
    border-width: 0px;
    text-decoration: none;
    background-color: #990000 !important;
    color: #FFEEEE !important;
    font-size: 1.6rem !important;
    line-height: 30px;
    padding: 0px 15px;
    margin: 10px 10px 0 0;
}

a.invert:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
    color: #990000;
}

a.invert2:link,
a.invert2:visited {
    text-decoration: none;
    background-color: rgba(137, 0, 0, 0.25);
    color: #990000 !important;
    font-size: 1.6rem !important;
    line-height: 30px;
    padding: 0px 15px;
}

a.invert2:hover {
    background-color: #990000 !important;
    color: #fff !important;
}

a.aktiveseite {
    color: rgba(255, 255, 255, 0.5);
}

a {
    text-decoration: none;
    color: gray;
    font-size: 1.8rem;
}

a:hover {
    text-decoration: none;
}

a.white {
    text-decoration: none;
    color: #fff;
}

a.impress {
    font-size: 1.5rem !important;
}

a.impress:hover {
    color: #aa0000;
    font-size: 1.5rem !important;
}

a.haftung {
    font-size: 1.1rem !important;
}

a.haftung:hover {
    color: #aa0000;
    font-size: 1.1rem !important;
}

:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

.navbar-header {
    float: right;
    margin-right: 10px !important;
}

a.navbar-brand,
a.navbar-brand2 {
    display: block;
    float: left;
    width: 50%;
}


/* ---------- ELEMENTE ----------*/

.overlay {
    height: 40em;
    background-color: rgba(55, 81, 103, 0.2);
    overflow: hidden;
}

hr.solid {
    width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0.5px solid rgba(137, 0, 0, 0.5);
}

hr.solid-white {
    width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 0.5px solid #fff;
}

hr.dotted {
    width: 98%;
    border-radius: 0px;
    margin-top: 10px;
    margin-bottom: 15px;
    background-color: #fff;
    border-top: 3px dotted #890000;
}

section {
    padding: 20px 20px;
}

#top {
    position: relative;
}

#top-overlay {
    position: relative;
}

#heroe_bg {
    width: 100%;
    height: 40em;
    background: url(../images/allgemein/ziegel.jpg)no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
}

#logo {
    width: 25em;
    height: 25em;
    position: fixed;
    top: 0;
    left: 0;
    background: url(../images/allgemein/Banner3.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    transition-timing-function: ease;
    transition: 1s;
    z-index: 1200;
}

#logo:hover {
    background: url(../images/allgemein/Banner3a.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    transition-timing-function: ease;
    transition: 1s;
}

#language {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background-color: #555555;
}

#language > a {
    position: fixed;
    top: 0px;
    right: 6%;
    height: 30px;
    font-size: 1.65rem;
    float: right;
    margin: 20px 0.4% 0px 0px;
    border: 1px solid #890000;
}

.navbar-fixed-top {
    background-color: #890000;
    border-bottom: 4px solid #fff;
    -webkit-box-shadow: 1px 7px 30px 2px #363636;
    box-shadow: 1px 5px 30px 1px rgba(54, 54, 54, 0.71);
}

div#brand {
    width: 33%;
    height: 100px;
    background-color: blue;
}

div#navbar {
    margin: 25px 6.3% 0 0;
    float: right;
}

.navbar-right {
    /* width: 50%; */
    /* min-height: 220px; */
    position: fixed;
    right: 75px;
    top: 50px;
    background-color: #890000;
    border-radius: 4px;
    /* padding: 25px 5%; */
    z-index: 1102;
}

.sign {
    width: 25px;
    margin: 9px 15px 0px;
}

.picto {
    width: 50px;
    height: 50px;
    margin: -2px 20px;
}

.picto2 {
    width: 50px;
    height: 50px;
    margin: 0px 0px;
}

.picto3 {
    width: 20px;
    height: 20px;
    margin: -6px 10px 0;
}

.img-top1 {
    width: 100%;
    height: 800px;
    overflow: hidden;
    margin: 100px 0 0 0;
}

.img-top {
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 40px 0 0 0;
}

.inlay1 {
    width: 100%;
    height: 100%;
    background: url(../images/1-2000x1333.jpg) no-repeat center;
    background-size: cover;
}

.img-text1 {
    width: 47%;
    margin: 5px 25px 5px 0;
}

.img-text2 {
    width: 26%;
    margin: 5px 20px 5px 0;
}

.img-text3 {
    width: 140px;
    margin: 5px 25px 0 0;
}

#carousel-heroe {
    margin-top: 0%;
}

.ws_images {
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    max-height: 500px;
    max-width: 100% !important;
    vertical-align: top;
    border: none;
    overflow: hidden;
}

.sectiontitel {
    width: 100%;
    height: 23rem;
    background: url(../images/allgemein/ziegel.jpg)no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: black;
    vertical-align: middle;
    overflow: hidden;
    -webkit-box-shadow: inset 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 33px 10px rgba(0, 0, 0, 0.5);
    margin: 0 0 0 0;

}

.title {
    text-shadow: 0px 0px 20px #000;
}

#c1 {
    padding: 40px 10% 80px !important;
}

.panel-default > .panel-heading {
    color: rgba(53, 106, 53, 0.9);
    background-color: rgba(54, 1, 1, 0.54);
    border-color: #ddd;
    width: 23%;
    float: left;
    margin: 1%;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: rgba(221, 221, 221, 0);
    border: 1px solid rgba(53, 106, 53, 0.2);
    padding: 0px 0px 0px 0px;
}

.btnT {
    min-width: 160px;
    background: #fff;
    color: #890000;
    font-size: 1.8rem;
    /* font-weight: bold; */
    margin: 0 10px 20px 10px !important;
    box-shadow: #000;
    -webkit-box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.3);
}

.btnT:hover {
    background: #ffeeee;
    color: #890000;
    font-size: 1.8rem;
    /* font-weight: bold; */
    margin: 0 10px 20px 10px !important;
    box-shadow: #000;
    -webkit-box-shadow: 6px 6px 10px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 6px 6px 10px 5px rgba(0, 0, 0, 0.2);
}

#c2 {
    background-color: #cccccc;
    padding: 0 0 80px 0 !important;
}

#teamininhalt {
    padding: 60px 3% 15px !important;
}

#teamninhalt2 {
    padding: 15px 3% 60px !important;
}

.btn-site,
.btn-site:focus {
    background-color: #890000;
    color: #ddd;
    margin: 1rem 0rem;
}

.btn-site:hover {
    background-color: rgba(137, 0, 0, 0.4);
    border: 1px solid #890000;
    color: #890000;
    margin: 1rem 0rem;
}

.btn-gal,
.btn-gal:focus {
    width: 33%;
    background-color: #890000;
    color: #ddd;
    margin: 0 5% 20px;
}

.btn-gal:hover {
    width: 33%;
    background-color: rgba(137, 0, 0, 0.4);
    border: 1px solid #890000;
    color: #890000;
    margin: 0 5% 20px;
}

/* ------------- FORMULAR ------------*/

form.clearfix {
    background: #cccccc;
}

.input-group {
    width: 95.5%;
    margin: 5px 20px 10px;
    float: left;
}

input.form-control,
textarea.form-control {
    width: 95.5%;
    margin: 5px auto 0px;
    color: #000000;
    border: 1px solid #999;
    border-radius: 5px !important;
}


#formular-ticket {
    padding: 0px 10% 0px !important;
}

#formularseite {
    min-height: 60rem;
    background-color: rgba(137, 0, 0, 0.25);
    padding: 160px 10% 0px !important;
}

.alert-success {
    margin: 8% 10% 15% !important;
}

.btn-send {
    background-color: #890000;
    color: #ddd;
    margin: 1rem 0rem;
}

.btn-send:hover {
    background-color: hsla(0, 100%, 27%, 0.4);
    border: 1px solid #890000;
    color: #890000;
    margin: 1rem 0rem;
}

.well {
    min-height: 20px;
    padding: 0px !important;
    margin-bottom: 40px;
    background-color: #bcbcbc;
    border: 0px;
    border-radius: 5px;
}



/* ------------- MODALE ------------- */

.modal {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.close {
    float: right;
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
    color: #999999;
    text-shadow: 0 0 1px #ffffff;
    opacity: 0.66;
}

.modal-header {
    background: #cccccc;
    border-bottom: none;
}

.modal-title {
    color: #FFFFFF;
    margin-bottom: 25px;
}

.modal-body {
    position: relative;
    padding: 0% 0%;
}

.modal-content {
    min-height: 225px;

}



.modal-contentImg {
    width: 90%;
    margin: 10px auto;
    padding: 10px 0px 30px;
    background: #fff;
}

.modal-bodyImg {
    width: 95%;
    height: 95%;
    margin: 0 auto;
}

.modal-img {
    max-height: 400px;
    padding: 2.5% 5% !important;
    background-image: url(../images/allgemein/ziegel.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.modal-inhalt {
    min-height: 600px;
    padding: 2%;
    background-color: #fff;
    box-shadow: 0px 5px 20px 1px #000;
}

.modal-footer {
    padding: 0px 20px 20px 20px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}



/* -------------------------------- */

#c3 {
    background-color: #fff;
    padding: 0 0 0 0 !important;
}

#c3a {
    padding: 100px 10% 100px !important;
}

#c4 {
    background-color: #fff;
    padding: 40px 10% 80px !important;
}

#LeistL {
    width: 40%;
    background: rgba(0, 0, 0, 0.03);
    float: left;
    margin: 0 1% 50px 5%;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
}

#LeistR {
    width: 40%;
    background: rgba(0, 0, 0, 0.03);
    float: right;
    margin: 0 5% 50px 1%;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
}

.leistPic {
    width: 50%;
    margin: 10px auto 40px
}

#c5 {
    background-color: rgba(73, 41, 93, 0.1);
    padding: 0 0 0 0 !important;
}

#c5a {
    background-color: #cccccc;
    padding: 80px 10% 80px !important;
}

#c6 {
    background-color: #890000;
    padding: 40px 5% 50px !important;
    -webkit-box-shadow: inset 0px 0px 30px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 33px 10px rgba(0, 0, 0, 0.5);
}

.kontakt {
    width: 55%;
    margin-top: -30px;
}

#vcontainer {
    width: 100%;
    border-radius: 4px;
    -moz-box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 9px 2px rgba(0, 0, 0, 0.2);
}

#map {
    width: 95%;
}


/*----------  FOOTER  ----------*/

.padding-foot {
    padding: 18px 30px 5px;
}

.padding-foot2 {
    padding: 0px 20px 0px;
}

#foot {
    margin-top: 0;
    border-top: 3px solid #990000;
}

.footer {
    background: #555555;
    font-size: 1.4rem;
}

p.foot {
    color: #ffeeee;
    font-size: 1.4rem;
}

.footLink {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 1.4rem !important;
}

.footLink:hover {
    color: rgba(255, 255, 255, 0.38) !important;
    font-size: 1.4rem !important;
}

.footLink2 {
    color: #aa0000 !important;
    font-size: 1.4rem !important;
}

a.footLink3 {
    font-size: 1rem !important;
    color: gray;
    text-decoration: none;
}

a#cu {
    font-size: 1.3rem !important;
    color: gray;
    text-decoration: none;
    float: left;
    margin: 5px 10px;
}

a#kg {
    font-size: 1.3rem !important;
    color: gray;
    text-decoration: none;
    float: right !important;
    margin: 5px 10px;
}

a#cu:hover,
a#kg:hover {
    color: #890000;
    text-decoration: none;
}




/* ----------- MEDIA QUERY ----------*/

/* KLEINE Geräte (Smart, 320px und breiter) */

@media (min-width:320px) AND (max-width:991px) {
    .cc-bottom {
        bottom: 0em !important;
    }
    .cc-right {
        right: 0em !important;
    }
    .lg50-s75 {
        width: 75%;
        margin: 10px auto;
    }
    .lg75 {
        width: 90%;
        margin: 10px auto;
    }
    .paddingT4 {
        padding: 3rem !important;
    }
    h1,
    .h1 {
        font-size: 6rem;
    }
    h2,
    .h2 {
        font-size: 5rem;
    }
    h3,
    .h3 {
        font-size: 4rem;
    }
    h4,
    .h4 {
        font-size: 3rem;
    }
    h5,
    .h5 {
        font-size: 3rem;
    }
    h6,
    .h6 {
        font-size: 2.2rem;
    }
    .col {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 5rem;
        -moz-column-gap: 5rem;
        column-gap: 5rem;
        width: 90%;
        line-height: 2.8ex;
        text-align: justify;
        hyphens: auto;
        orphans: 3;
        widows: 3;
    }
    .offerimage.col-xs-12.col-sm-12.col-md-5.col-lg-5 {
        margin-top: 25px;
    }
    /* ---------- ELEMENTE ----------*/
    .navbar-default .navbar-toggle {
        margin: 10px 7% !important;
        border-color: #fff;
        background-color: rgba(255, 255, 255, 0.25);
    }
    .navbar-nav {
        width: 80%;
        min-height: 250px;
        position: fixed;
        right: 0px;
        top: 110px;
        background-color: #890000;
        border-radius: 4px;
        z-index: 1101;
        padding: 0 0 20px 0;
    }

    #logo {
        width: 190px;
        height: 190px;
        position: fixed;
        z-index: 1102;
    }
    .logotop {
        width: 150px;
        height: 184px;
    }
    .sign {
        display: none;
    }
    .img-text1 {
        width: 50%;
        margin: 5px 20px 0 0;
    }
    #carousel-heroe {
        display: none;
        margin-top: 0%;
    }
    .sectiontitel {
        width: 100%;
        height: 18rem;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        color: black;
        vertical-align: middle;
        overflow: hidden;
        margin: 0 0 0 0;
    }
    #c2 {
        padding: 40px 20px;
    }
    #c2a {
        background-color: #ebe2ec;
        background-image: url(../images/muster1.png);
        background-blend-mode: multiply;
        background-size: 300%;
        background-position: center;
        padding: 40px 20px !important;
    }
    #c4b {
        background-color: #49295d;
        background-image: url(../images/muster1.png);
        background-blend-mode: screen;
        background-size: 300%;
        background-position: center;
        padding: 0 5% !important;
    }
    #map {
        display: none;
    }

    .btnT {
        min-width: 130px;
    }
    .kontakt {
        width: 100%;
        margin-top: 0px;
    }
    .modal-lg {
        width: 99.9%;
    }
    .overlay {
        height: 20em;
        background-color: rgba(55, 81, 103, 0.2);
        overflow: hidden;
    }
    #heroe_bg {
        width: 100%;
        height: 20em;
        background: url(../images/allgemein/ziegel.jpg)no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        vertical-align: middle;
    }
}


/* MITTLERE Geräte (Tablet, 769px und breiter) */

@media (min-width:769px) AND (max-width:1023px) {
    h1,
    .h1 {
        font-size: 8rem;
    }
    h2,
    .h2 {
        font-size: 6rem;
    }
    h3,
    .h3 {
        font-size: 5rem;
    }
    h4,
    .h4 {
        font-size: 4rem;
    }
    h5,
    .h5 {
        font-size: 3rem;
    }
    h6,
    .h6 {
        font-size: 2.2rem;
    }
    /* ---------- KLASSEN ---------- */
    .paddingT4 {
        padding: 2rem !important;
    }
    /* ---------- ELEMENTE ----------*/
    .logotop {
        width: 250px;
        height: 308px;
    }
    .sign {
        display: none;
    }
    #language {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 31px;
        background-color: #890000;
        z-index: 1101;
    }
    #carousel-heroe {
        margin-top: 11%;
    }
    .navbar-right {
        width: 30% !important;
        min-height: 220px;
        position: fixed;
        right: 15px;
        top: 110px;
        border-radius: 4px;
        padding: 25px 2%;
        z-index: 1102;
    }
    .section {
        padding: 20px 5%;
    }
    #c2 {
        padding: 50px 60px;
    }
    #c5 {
        padding: 40px 75px 20px;
    }
    .btnT {
        min-width: 180px;
    }
    #map {
        width: 95%;
    }
}


@media (min-width:1024px) AND (max-width:1024px) {
    /* ---------- KLASSEN ---------- */
    .logotop {
        width: 250px;
        height: 308px;
    }
    .kontakt {
        width: 100% !important;
        margin-top: -40px;
    }
    /* ---------- ELEMENTE ----------*/
    section {
        padding: 40px 10%;
    }
    #logo {
        width: 17em;
        height: 17em;
        position: fixed;
        top: 0;
        left: 0;
        background: url(../images/allgemein/Banner3.png);
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        vertical-align: middle;
        transition-timing-function: ease;
        transition: 1s;
        z-index: 1200;
    }
    .navbar-right {
        width: 30% !important;
        min-height: 220px;
        position: fixed;
        right: 15px;
        top: 110px;
        border-radius: 4px;
        padding: 25px 2%;
        z-index: 1102;
    }
    #c2 {
        padding: 70px 10%;
    }
    #c5 {
        padding: 40px 160px 20px;
    }
    .btnT {
        min-width: 130px;
    }
    .sign {
        display: none !important;
    }
}


form div,
form span {
    position: relative;
}

.error {
    color: red;
    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
    background: #fff;
    border-radius: 1rem;
    padding: 0.5rem;
    font-size: 1.2rem;
    position: absolute;
    top: -4.5rem;
    left: 0;
    z-index: 1000;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
    -webkit-box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem rgba(200, 200, 200, 0.5);
    box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem rgba(200, 200, 200, 0.8);
}

.error:before {
    content: "!";
    background: #fce304;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    border: 2px solid #888;
    border-radius: 50%;
    padding: 0 0.6rem;
    margin-right: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    text-align: center;
    display: inline-block;
}

.error:after {
    content: " ";
    display: inline-block;
    width: 5px;
    background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 50%, transparent 50%, transparent);
    height: 5px;

    -webkit-transform: rotate(-45deg);
    transform: rotate(315deg) scale(2, 2);
    position: absolute;
    bottom: -7px;
    left: 10%;
    -webkit-animation: leftArrow 2s ease-in-out 2 alternate;
    animation: leftArrow 2s ease-in-out 2 alternate;
}

@-webkit-keyframes leftArrow {
    0% {
        left: 10%;
    }
    100% {
        left: 90%;
    }
}

@keyframes leftArrow {
    0% {
        left: 10%;

    }
    100% {
        left: 90%;

    }
}

#contact h2.message {
    font-size: 2.5rem;
}

#contact h2.message p {
    font-size: 0.5em;
}

#contact fieldset div {
    position: relative;
}

#contact label span {
    color: #dc3545;
}

#contact p span {
    color: #dc3545;
}

#contact input[type="submit"] {
    color: #fff;
    background-image: linear-gradient(45deg, #004d74, #003d5f);
}

#contact input[type="submit"]:focus,
#contact input[type="submit"]:hover {
    color: #fff !important;
}

button#sent {
    overflow: visible;
    position: relative;
    cursor: pointer;
    padding-right: 3rem;
}

button#sent:hover {
    background-color: rgba(137, 0, 0, 0.4);
    border: 1px solid #890000;
}

button#sent:hover svg {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transition: -webkit-transform 0.15s;
    transition: -webkit-transform 0.15s;
    transition: transform 0.15s;
    transition: transform 0.15s, -webkit-transform 0.15s;
}

button#sent svg {
    position: absolute;
    top: 5px;
    right: 10px;
    height: 30px;
    width: auto;
    -webkit-transition: -webkit-transform 0.15s;
    transition: -webkit-transform 0.15s;
    transition: transform 0.15s;
    transition: transform 0.15s, -webkit-transform 0.15s;
}

button#sent svg path {
    fill: #fff;
}

button#sent span:first-of-type {
    margin-right: 10px;
}

button#sent.clicked {
    background-color: #acacac;
    border: 2px solid #acacac;
    color: #fff;
    padding-right: 6px;
    animation: bounce-in .3s;
    cursor: default;
}

button#sent.clicked svg {
    animation: flyaway 1.3s linear;
    top: -80px;
    right: -5000px;
}

button#sent.clicked svg path {
    fill: #8CAFC0;
}


@-webkit-keyframes flyaway {
    0% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 25px;
        height: 30px;
    }
    5% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 0;
        height: 30px;
    }
    20% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        top: 13px;
        right: -130px;
        height: 45px;
    }
    40% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: -40px;
        right: -280px;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        top: -200px;
        right: -1000px;
        height: 0;
        opacity: 0;
    }
}

@keyframes flyaway {
    0% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 25px;
        height: 30px;
    }
    5% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: 13px;
        right: 0;
        height: 30px;
    }
    20% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        top: 13px;
        right: -130px;
        height: 45px;
    }
    40% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        top: -40px;
        right: -280px;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        top: -200px;
        right: -1000px;
        height: 0;
        opacity: 0;
    }
}

@-webkit-keyframes bounce-in {
    0% {
        padding-right: 30px;
    }
    40% {
        padding-right: 6px;
    }
    50% {
        padding-left: 30px;
    }
    100% {
        padding-left: 6px;
    }
}

@keyframes bounce-in {
    0% {
        padding-right: 30px;
    }
    40% {
        padding-right: 6px;
    }
    50% {
        padding-left: 30px;
    }
    100% {
        padding-left: 6px;
    }
}