/*CSS fuer HTML-Style*/

/*<---------- Schriften ---------->*/
@font-face { font-family: 'Goudy Sans Bold Italic BT';
             src: url('../Schriften/goudsabi.ttf') format('truetype');
             font-weight: bold;
             font-style: italic; }
@font-face { font-family: 'Goudy Sans Light Italic BT';
             src: url('../Schriften/goudsali.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'Goudy Sans Medium Italic BT';
             src: url('../Schriften/goudsami.ttf') format('truetype');
             font-style: italic; }
@font-face { font-family: 'Goudy Sans Bold BT';
             src: url('../Schriften/goudsanb.ttf') format('truetype');
             font-weight: bold;}
@font-face { font-family: 'Goudy Sans Light BT';
             src: url('../Schriften/goudsanl.ttf') format('truetype');
             }
@font-face { font-family: 'Goudy Sans Medium BT';
             src: url('../Schriften/goudsanm.ttf') format('truetype');
             }
@font-face { font-family: 'Kartika';
             src: url('../Schriften/kartika.ttf') format('truetype');
             }
@font-face { font-family: 'Kartika Bold';
             src: url('../Schriften/kartikab.ttf') format('truetype');
             font-weight: bold;}
             
/*<---------- HTML ---------->*/           
html, button{
    height: 101%;
    color: #1a171b;
    font-family: "Goudy Sans Medium BT";
    line-height: 1.5;   /*Zeilenabstand*/
    overflow-x: none;
}

/*<---------- Header ---------->*/
.head {
    width:100%;
    padding-bottom: 20px;
    border-bottom:  2px #d93e6f solid;
}
.back_image img{
    height: 125px;
    width: 100%;
    height: auto;
}
.title {
    text-align: center;
    font-family: "Kartika Bold";
    font-weight: bold;
    font-size: 3.5em;
    margin-top: -50px;
    color: #1e4e8a	;
    letter-spacing: 8px;   /*Abstand zwischen Buchstaben*/
}
.subtitle {
    text-align: center;
    font-family: "Kartika";
    font-size: 1.2em;
    margin-top: -50px;
    color: #1e4e8a	;
}

/*<---------- Navigation ---------->*/
.navi {
    width: 100%;
}
.navi ul {
    margin-top: 0px;
    list-style: none;
    height: 100%;
    padding-left: 15px;
    text-align: left;
    width: 100%;
    font-size: 1.7em;
}
.navi p {
    padding-left: 15px;
    padding-right: 15px; 
}
.navi a {
    color: #1a171b;; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 15px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}
.navi a:hover {
    color: #1e4e8a;
}
.naviAktuell {
    background-color: #f1f4fd;
    width: 90%;
}
.naviAktuell li p{
    font-size: 0.8em;
}
.naviAktuell li a{
    font-size: 0.8em;
}

/*<---------- Beschreibung ---------->*/
.textPosition {
    text-align: left;
}
.Portrait img{
    width: 80% !important;
    margin-left: 1em;
}

/*<---------- Positionierung ---------->*/
.naviPosition {
    padding-top: 20px;
    width: 21%;
    float: left;
    margin-top: -50px;
}
.sliderPosition {
    padding-top: 20px;
    margin-top: -50px;
    width: 53%;
    float: left;
    padding-bottom: 20px;
    padding-left: 1.25em;
    padding-right: 1.25em;
}
.textPosition {
    margin-top: -50px;
    width: 21%;
    float: left;
    padding-bottom: 20px;
    font-size: 1.7em;
    padding-left: 10px;
}

.textPosition img {
    width: 75%;
}

.textPosition a {
    color: #d93e6f; 
    text-decoration: none; 
    cursor: pointer;
}

.textPosition a:hover {
    color: #1e4e8a;
}


.dropDownPosition {
    visibility: hidden;
}

/*<---------- Bildergalerie ---------->*/
.galerie {
    margin: -20px 10px 10px;
    font-size: 1.5em;
}
.galerie p {
    padding: 15px 15px 15px 0;
}
.galerie img {
    padding-right: 40px;
    padding-bottom: 20px;
}
.galerie:first-child {
    padding-left: 0 !important; 
}

/*<---------- Kontakt-Fenster ---------->*/
.kontakt {
    margin-top: -40px;
    font-size: 1.7em;
    width: 50%;
    text-align: left;
    float: left;
    padding-top: 0px !important;
    padding-left: 1.25em;
}
.kontakt a {
    list-style:none;
    color: #1a171b;
}
.kontakt a:hover{
    color:#1e4e8a;
}
.kontakt_image img{
    float: left;
    width: 18%;
    margin-top: 60px;
    padding-right: 50px;
}


/*<---------- Impressum-Fenster ---------->*/
.impressum {
    margin-top: -40px;
    font-size: 1.7em;
    width: 53%;
    text-align: left;
    float: left;
    padding-left: 1.25em;
}
.impressum p a {
    list-style:none;
    color: #1a171b;
}
.impressum p a:hover{
    color:#1e4e8a;
}
.impressum_image img{
    float: left;
    width: 10%;
    opacity: 0.25;
    margin-left: -300px;
    margin-top: 60px;
    padding-left: 100px;
}

/*<---------- Link zu aura-grafikdesign ---------->*/
.link a {
    color: #d93e6f; 
    text-decoration: none; 
    cursor: pointer;
    font-size: 1.7em;
}
.link a:hover {
    color: #1e4e8a;
}
.link {
    clear: both;
    padding-left: 27px;
    padding-bottom: 15px;
}

/*<---------- Footer ---------->*/
footer {
    float: left;
    border-top: 2px #d93e6f solid;
    /*width: 98%;
    padding: 27px;*/
    bottom: 0;
    text-align: center;
    font-size: 1.2em;
}

#footerContent{
    width: 98vw;
}

footer p:first-child{
    padding-top: 27px; 
}

footer p:nth-child(2){
    padding-left: 27px;
    padding-bottom: 27px;
}

footer a{
    text-decoration: none;
    color: #1a171b;
}
footer a:hover{
    text-decoration: none;
    color:#1e4e8a;
}

/*<---------- Verhalten bei Bildschirmbreite = 1660px ---------->*/
@media screen and (max-width: 1660px) {
    .navi ul {
    font-size: 1.5em;
    }   
    .textPosition {
        font-size: 1.5em;
    }
    .kontakt {
        font-size: 1.5em;
    }
    .impressum {
        font-size: 1.5em;
    }
    .link a{
        font-size: 1.5em;
    }
}

/*<---------- Verhalten bei Bildschirmbreite = 1234px ---------->*/
@media screen and (max-width: 1234px) { 
    .navi ul {
        font-size: 1.2em;
    }
    .textPosition {
        font-size: 1.2em;
        width: 75%;
        text-align: center;
        float:right;
    }
    .sliderPosition {
        width: 75%;
        float: right;
        padding-left: 0px;
        padding-bottom: 3em;
        padding-right: 0px;
    }
    .naviPosition {
        padding-top: 20px;
        width: 21%;
        float: left;
        margin-top: -50px;
    }
    .kontakt {
        font-size: 1.2em;
        width: 75%;
        float: right;
    }
    .kontakt_image img{
        float: right;
        width: 18%;
        margin-top: -350px;
        padding-left: 50px;
    }
    .impressum {
        font-size: 1.2em;
        width: 75%;
        float: right;
    }
    .impressum_image img{
        float: right;
        width: 10%;
        opacity: 0.25;
        margin-right: -500px;
        margin-top: 40px;
        padding-left: 400px;
    }
    .link a{
        font-size: 1.2em;
    }
    .Portrait {
        width: 100%;
        display: block;
        text-align: center;
    }
    .Portrait img{
        width: 40% !important;
    }
    
}

/*<---------- Verhalten bei Bildschirmbreite = 940px ---------->*//*
@media screen and (max-width: 940px) { 
    .navi ul {
        font-size: 1.1em;
    }
    .textPosition {
        font-size: 1.1em;
    }
    .kontakt {
        font-size: 1.1em;
    }
    .link a{
        font-size: 1.1em;
    }
    .impressum {
        font-size: 1.1em;
    }
    
    .impressum_image img{
        float: right;
        width: 10%;
        opacity: 0.25;
        margin-right: -450px;
        margin-top: 40px;
        padding-left: 400px;
}
*/


/*<---------- Verhalten bei Bildschirmbreite = 870px ---------->*/
@media screen and (max-width: 1024px) { /* ab jetzt DropDownMenue*/
    .naviPosition{
        visibility: hidden;
        width: 0%; 
    }
    .dropDownPosition {
        visibility: visible;
        margin-top: 20px;
        width: 100%;
    }
    .sliderPosition {
        width: 100%;
        margin-top: 10px;
        float: left;
        padding-left: 0px;
        padding-bottom: 3em;
    }
    .textPosition {
        font-size: 1.0em;
        width: 100%;
        text-align: center;
    }
    .title {
        font-size: 2.5em;
        margin-top: -25px;
        padding-bottom: 20px;
    }
    .subtitle {
        font-size: 1.0em;
    }
    .Portrait {
        width: 100%;
        display: block;
        text-align: center;
    }
    .Portrait img{
        width: 40% !important;
    }
    .impressum {
        padding-left: 0px;
        width: 100%;
        float: left;
        margin-top: 10px;
    }
    .impressum_image img {
        visibility: hidden;
        margin-top: -200px;
    }
    .kontakt {
        padding-left: 0px;
        width: 100%;
        float: left;
        margin-top: 210px;
    }
    .kontakt_image img{
        float: left; 
        margin-top: -600px;
        width: 200px;
        padding-left: 0px;
    }
    .link {
        padding-left: 0;
    }
    footer {
        padding-left: 0px !important;
    }
}

/*<---------- Verhalten bei Bildschirmbreite = 450px ---------->*/
@media screen and (max-width: 450px) { 
    footer {
        font-size: 1em;
    }
    .imp {
        margin-top: 0px !important;
        float: none !important;
    }
    .imp a {
        text-align: center !important;
    }
    .cop {
        margin-left: 0px !important;
    }
}

/*<---------- Verhalten bei Bildschirmbreite = 425px ---------->*/
@media screen and (max-width: 300px) { 
    /*.kontakt {
        margin-top: 120px;
    }*/
    .kontakt_image img{
        margin-top: -740px;
    }
}