*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Source Sans Pro', sans-serif;
        src: url('Fonts');
        -webkit-tap-highlight-color: transparent;
}
.background{ 
        width: 100dvw;
        height: 100dvh;
        background: url(Bilder/HG.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        overflow-x: hidden;
}
.navbar{
        position: relative;
        width: 95%;
        margin: auto;
        padding: 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
}
.LOGO{
        display: inline-block;
        width: 30vw;
        max-width: 300px;
        min-width: 150px;
        cursor: pointer;
}
.navbar ul li{
        display: inline-block;  
        list-style: none;  
        margin: 0 20px;
        position: relative;
}
.navbar ul li a{
        text-decoration: none;
        color: #19375A;
        font-weight: bold;
        text-transform: uppercase;
}
.navbarweb li::after{
        content:'';
        height: 3px;
        width: 0%;
        background: #19375A;
        position: absolute;
        left: 0;
        bottom: -2px;
        transition: 0.5s;
}
.navbarweb li:hover::after{
        width: 100%;
}
.sidebar{
        position: fixed;
        top: 0;
        right: 0;
        height: 300px;
        width: 250px;
        z-index: 999;
        background-color: white;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
}
.sidebar li{
        padding: 15px;
}
.MobileMenu{
        display: none;
}
.introvideocontainer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100dvh;
        overflow: hidden;
}
.introvideocontainer > video {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
}
.impressum{
        width: 80%;
        font-size: 2vh;
        position: center;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        color:#19375A;
}
.impressum a{
        text-decoration: none;
        color: #19375A;
}
.impressum a:hover{
        cursor: pointer;
        text-decoration:underline;
}
.header{
        width: 80%;
        position: center;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        color:#19375A;
        text-decoration: underline;
        text-underline-offset: 1vh;
        text-decoration-thickness: 1vh;
}
.header h1{
        font-size: 6vh;
        margin-top: 4vh;
}
span{
        background: #19375A;
        height: 100%;
        width: 0%;
        border-radius: 15px;
        position:absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        transition: 0.5s;
}
.impressum button{

        width: 24vh;
        height: 3vh;
        text-align: center;
        border: none;
        border-radius: 15px;
        font-weight: bold;
        color: #fff;
        background-color: #19375A;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 0;
        font-size: 2vh;
        transition: transform 0.2s ease-in-out;
}
.impressum button:hover{
        transform: scale(1.1);
        color:#19375A;
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
}
.popupimpressumcontainer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;
}
.popupimpressum{
        position:absolute;
        top:7vh;
        left:25%;
        text-align: center;
        font-size: 1.5vh;
        color:#19375A;
        width:50%;
        max-height: 80%;
        padding: 20px;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 1000;
}
.Foto img{
        width: 25vh;
        height: 25vh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;        
}
.Karten{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: auto;
        height: fit-content;
        padding-top: 4vh;
}
.imgKarten{
        display: flex; 
        flex-direction: row;       
        gap: 12vh;
        justify-content: center;
        align-items: flex-start;
        height: fit-content;
        margin: 0;
}
.Foto{
        text-align: center;        
        height:38vh;
        border-radius: 15px;
        padding: 2vh;
        transition: transform 0.3s ease-in-out;
}
.Foto p{
        margin-top: 2vh;
        font-size: 4vh;
        font-weight: bold;
        color:#19375A;
}
.UT {
        font-size: 1.5vh;
        font-weight: bold;
        color:#19375A;
        visibility: hidden;
}
.Foto:hover{
        transform: scale(1.1);
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        cursor: pointer;
}
.Foto:hover .UT{
        visibility: visible;
}
.FotoTitel{
        text-decoration: none;
        color: #19375A;
}
.popupEHcontainer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;
}
.popupEH{
        position:absolute;
        top: 7vh;
        left: 10vw;
        text-align: center;
        vertical-align: middle;
        color:#19375A;
        width: 80vw;
        max-height: 80%;
        padding: 2vh;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 1000;
}
.imgEHPopup{
        height:35vh;
        border-radius: 17.5vh;
        padding: 2vh;
        display:  flex;
}
.contentPopupEH{
        display: flex;
        flex-direction: row;
        padding: 2vh;
        font-size: 2vh;
        vertical-align: middle;
        align-items: center;
        gap: 50px;
        justify-content: center;
}
.contentPopupEH h1{
        font-size: 4vh;
}
.popupEBcontainer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;

}
.popupEB{
        position:absolute;
        top: 7vh;
        left: 10vw;
        text-align: center;
        vertical-align: middle;
        color:#19375A;
        width: 80vw;
        max-height: 80%;
        padding: 2vh;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 1000;
}
.imgEBPopup{
        height:35vh;
        border-radius: 17.5vh;
        padding: 2vh;
        display:  flex;
}
.contentPopupEB{
        display: flex;
        flex-direction: row;
        font-size: 2vh;
        padding: 2vh;
        vertical-align: middle;
        align-items: center;
        gap: 50px;
        justify-content: center;
}
.contentPopupEB h1{
        font-size: 4vh;
}
.titeltext{
        width: 60vw;
        max-width: 1200px;
        font-size: 2vh;
        text-align: center;
        margin-top: 2vh;
        margin-left: auto;
        margin-right: auto;
        color:#19375A;
}
.popupfilmcontainer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;
}
.popupfilm{
        position:absolute;
        top:5dvh;
        left:30%;
        text-align: center;
        color:#19375A;
        width:40dvw;

        max-height: 90dvh;
        padding:20px;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1000;
}
.imgLeistungenPopup{
        width: 40vw;
        max-width: 1000px;
        height: auto;
        min-height: 150px;
        padding-bottom: 1vh;
        display:  block;
}
.contentPopupFilm{
        display: flex;
        flex-direction: column;
        padding: 1vh;
        vertical-align: middle;
        align-items: center;
        gap: 2vh;
        justify-content: center;
        font-size: 2vh;
}
.contentPopupFilm h1{
        font-size: 5vh;
}
.popupeventscontainer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;

}
.popupevents{
        position:absolute;
        top:5dvh;
        left:30%;
        text-align: center;
        color:#19375A;
        width:40dvw;

        max-height: 90dvh;
        padding:20px;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1000;
}
.contentPopupEvents{
        display: flex;
        flex-direction: column;
        padding: 1vh;
        vertical-align: middle;
        align-items: center;
        gap: 2vh;
        justify-content: center;
        font-size: 2vh;
}
.contentPopupEvents h1{
        font-size: 5vh;
}
.popupbildungcontainer{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;
}
.popupbildung{
        position:absolute;
        top:5dvh;
        left:30%;
        text-align: center;
        color:#19375A;
        width:40dvw;

        max-height: 90dvh;
        padding:20px;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1000;
}
.contentPopupBildung{
        display: flex;
        flex-direction: column;
        padding: 1vh;
        vertical-align: middle;
        align-items: center;
        gap: 2vh;
        justify-content: center;
        font-size: 2vh;
}
.contentPopupBildung h1{
        font-size: 5vh;
}
.closepopup{
        width: 13vh;
        height: 3vh;
        font-size: 2dvh;
        text-align: center;
        border-radius: 15px;
        font-weight:bolder;
        border: 2px solid #19375A;
        background: transparent;
        color: #19375A;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 0;
}
.closepopup:hover span{
        width: 100%;
}
.closepopup:hover{
        border: none;
        color: #fff;
}
.Kontakt-Container{
        max-height: 50vh;
        display: flex;
        align-items: start;
        justify-content: space-evenly;
}
.Kontaktformular{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5vh;
}
.Kontakt-Inputs{
        width: 40vw;
        min-width: 500px;
        max-width: 600px ;
        height: 4vh;
        min-height: 35px;
        max-height: 60px;
        border: none;
        padding-left: 30px;
        font-weight: 500;
        outline: none;
        color: #19375A;
        border-radius: 15px;
}
.Kontaktformular textarea{
        height: 12vh;
        min-height: 100px;
        max-height: 300px;
        padding-top: 20px;
}
.Kontakt-Inputs:focus{
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
}
.Kontaktformular button{
        height: 4vh;
        width: 15vh;
        font-size: 2vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border: none;
        border-radius: 2vh;
        font-weight: bold;
        color: #fff;
        background-color: #19375A;
        cursor: pointer;
        z-index: 0;
        transition: transform 0.2s ease-in-out;
}
.Kontaktformular button:hover{
        color:#19375A;
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        transform: scale(1.1);
}
.Kontaktbutton button{
        width: 13vh;
        height: 3vh;
        text-align: center;
        border: none;
        border-radius: 15px;
        font-weight: bold;
        color: #fff;
        background-color: #19375A;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 0;
        font-size: 2vh;
        transition: transform 0.2s ease-in-out;
}
.Kontaktbutton button:hover{
        color:#19375A;
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        transform: scale(1.1);
}
.kontakttext{
        width: 60%;
        max-width: 800px;
        font-size: 2vh;
        padding-top: 2vh;
        position: center;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        color:#19375A;
        padding-bottom: 6vh;
}
.sent{
        width: 80%;
        font-size: 2vh;
        position: center;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        color:#19375A;
        padding-bottom: 50px;
}
.sent img{
        height: 14vh;
}
.sent button{

        width: 12vh;
        height: 3vh;
        text-align: center;
        border: none;
        border-radius: 15px;
        font-weight: bold;
        color: #fff;
        background-color: #19375A;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 0;
        font-size: 2vh;
        transition: transform 0.2s ease-in-out;
}
.sent button:hover{
        transform: scale(1.1);
        color:#19375A;
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
}
.linie{
        background-color: #19375A;
        height: 15px;
}
.check{
        width: 250px;

}
.card{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        color:#19375A;
        width: 90%;
        max-width: 750px;
        height: 90dvh;
        margin: 5dvh auto;
        padding: 20px;
        background:#fff;
        border-radius: 15px;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 1000;
}
.card img{
        max-height:30dvh;
        border-radius: 15dvh;
        padding: 10px;
        display:  flex;
}
.card h1{
        width: 95%;
        position: center;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        color:#19375A;
        text-decoration: underline;
        text-underline-offset: 1dvh;
        text-decoration-thickness: 0.75dvh;
        font-size:5dvh;
        padding-bottom: 1dvh;
}
.card h2{
        font-size: 2dvh;
        font-weight: 600;
}
.card p{
        font-size: 2dvh;
        font-weight: 500;
        text-align: center;
}
.socials{
        display: flex;   
        flex-direction: row;
        gap: 30px;
        align-items: center;
        justify-content: center;
}
.socials button{
        padding-top: 2dvh;
        height: 5dvh;
        width: 5dvh;
        border: none;
        background-color: transparent;
}
.icon{
        height: 4dvh;
}
.socials button:hover{
        transform: scale(1.1);
}
.Kontaktspeichern{
        height: 4dvh;
        width: 22dvh;
        font-size: 2dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border: none;
        border-radius: 2dvh;
        font-weight: bold;
        color: #fff;
        background-color: #19375A;
        cursor: pointer;
        z-index: 0;
        transition: transform 0.2s ease-in-out;
}
.Kontaktspeichern:hover{
        color:#19375A;
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
        transform: scale(1.1);
}
.cardKontakt a{
        text-decoration: none;
        color: #19375A;
}
.cardKontakt a:hover{
        cursor: pointer;
        text-decoration:underline;
}
.cookie-popup {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        color: #19375A;
        padding: 15px;
        border-radius: 15px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 30%;
        max-width: 50%;
        height: auto;
        z-index: 999;
        font-weight: bold;
        text-align:center;
    }
.cookie-popup button {
        background: #19375A;
        border: none;
        color: white;
        margin-top: 10px;
        padding: 8px 15px;
        border-radius: 15px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bolder;
    }
.cookie-popup button:hover {
        color:#19375A;
        background:#fff;
        box-shadow:0px 2px 5px 5px rgba(0,0,0,0.1);
    }
@media screen and (max-aspect-ratio: 1920/1080) {
        .introvideocontainer > video {
          height: 100%;
        }
}
@media screen and (min-aspect-ratio: 1920/1080) {
        .introvideocontainer > video {
          width: 100%;
        }
}
@media (max-aspect-ratio: 1.1/1){
        .navbar{
                max-height: 8dvh;
                min-width: 85dvw;
        }
        .imgKarten{
                flex-direction:column;
                height: fit-content;
                align-items: flex-start;
                justify-content: flex-start;
                align-items: center;
                gap: 2dvh;
        }
        .titeltext{
                padding-bottom: 4vh;
        }
        .contentPopupEH{
                flex-direction:column;
                align-items: center;
                gap: 2dvh;
        }
        .contentPopupEB{
                flex-direction:column;
                align-items: center;
                gap: 2dvh;
        }
        .contentPopupFilm{
                flex-direction:column;
                align-items: center;
                gap: 2dvh;
        }
        .Filmtext h1{
                font-size: 4vh;
        }
        .contentPopupEvents{
                flex-direction:column;
                align-items: center;
                gap: 2dvh;
        }
        .Eventstext h1{
                font-size: 4vh;
        }
        .contentPopupBildung{
                flex-direction:column;
                align-items: center;
                gap: 2dvh;
        }
        .Bildungtext h1{
                font-size: 4vh;
        }
        .popupEH{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 90dvw;
                left: 5dvw;
                overflow-x:hidden;
        }
        .popupEB{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 90dvw;
                left: 5dvw;
                overflow-x:hidden;
        }
        .popupfilm{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 90dvw;
                left: 5dvw;
                overflow-x:hidden;
        }
        .popupevents{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 90dvw;
                left: 5dvw;
                overflow-x:hidden;
        }
        .popupbildung{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 90dvw;
                left: 5dvw;
                overflow-x:hidden;
        }
        .imgLeistungenPopup{
                max-width: 90vw;
                min-width: 80vw;
        }
        .Kontakt-Inputs{
                min-width: 80vw;
                max-width: 90vw;
        }
        .popupimpressum{
                left: 5dvw;
                top: 5dvh;
                width: 90dvw;
                max-height: 90dvh;
        }
        .hideOnMobile{
                display: none;
        }
        .MobileMenu{
                display:block;
        }
        .cookie-popup{
                width: 90vw;
                max-width: 90vw;
        }
}

@media (max-width: 1080px){
        .hideOnMobile{
                display: none;
        }
        .MobileMenu{
                display:block;
                align-items: flex-end;
        }
        .cookie-popup{
                width: 90vw;
                max-width: 90vw;
        }
}
@media (min-aspect-ratio: 2.5/1){
        .popupEH{
                max-width: 60vw;
                position: center;
                left: 20%;
        }
        .popupEB{
                max-width: 60vw;
                position: center;
                left: 20%;
        }
        .popupfilm{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 30dvw;
                left: 35dvw;
                overflow-x:hidden;
        }
        .popupevents{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 30dvw;
                left: 35dvw;
                overflow-x:hidden;
        }
        .popupbildung{
                height:90dvh;
                max-height:90dvh;
                top: 5dvh;
                width: 30dvw;
                left: 35dvw;
                overflow-x:hidden;
        }
        .kontakttext{
                max-width: 800px;
        }
        .ueberunstext{
                max-width: 900px;
        }
        .leistungentext{
                max-width: 900px;
        }       
        .imgLeistungenPopup{
                max-width: fit-content;
                max-height: 40dvh;
                min-height: 100px;
        }

}
@font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-BlackIt.woff2') format('woff2'),
            url('Fonts/SourceSansPro-BlackIt.woff') format('woff');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-Bold.woff2') format('woff2'),
            url('Fonts/SourceSansPro-Bold.woff') format('woff');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-Black.woff2') format('woff2'),
            url('Fonts/SourceSansPro-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-It.woff2') format('woff2'),
            url('Fonts/SourceSansPro-It.woff') format('woff');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-SemiboldIt.woff2') format('woff2'),
            url('Fonts/SourceSansPro-SemiboldIt.woff') format('woff');
        font-weight: 600;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-Regular.woff2') format('woff2'),
            url('Fonts/SourceSansPro-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-Light.woff2') format('woff2'),
            url('Fonts/SourceSansPro-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-BoldIt.woff2') format('woff2'),
            url('Fonts/SourceSansPro-BoldIt.woff') format('woff');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-LightIt.woff2') format('woff2'),
            url('Fonts/SourceSansPro-LightIt.woff') format('woff');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-Semibold.woff2') format('woff2'),
            url('Fonts/SourceSansPro-Semibold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-ExtraLightIt.woff2') format('woff2'),
            url('Fonts/SourceSansPro-ExtraLightIt.woff') format('woff');
        font-weight: 200;
        font-style: italic;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Source Sans Pro';
        src: url('Fonts/SourceSansPro-ExtraLight.woff2') format('woff2'),
            url('Fonts/SourceSansPro-ExtraLight.woff') format('woff');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }