:root {
    --kiqu-cream: #F6E8DB;
    --kiqu-cream-light: #F8EEE2;
}

    body {
    }

    .touch {
        /* hervorheben on mobile devices, da es kein hover gibt */
    }


.gmbh {
    margin: 0;
    padding: 0;
    /* background: linear-gradient(135deg, #DC0028, #50AA28, #0A46Aa, #E10073) no-repeat center center fixed;*/

    background: red;
    /*   background: linear-gradient(135deg, #DC0028, #50AA28, #0A46Aa, #E10073) no-repeat center center fixed;*/
    /* background-size: cover;*/
    background: #F5F0EB;
    background: linear-gradient( 180deg, var(--kiqu-cream) 0%, var(--kiqu-cream-light) 10%, #ffffff 34%, #ffffff 78%, rgba(0, 166, 166, 0.08) 100% ) no-repeat center center fixed;
    height: 100vh;
    padding-top: 0px;
    /* padding-top: calc(35vh + 100px);*/
    /*transition: padding-top 0.18s;*/
    background: #F5F0EB;
    /*  background: linear-gradient(135deg, #DC0028, #50AA28, #0A46Aa, #E10073) no-repeat center center fixed;*/
}

    #snow {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        pointer-events: none;
    }


    .kontaktfomularDiv {
        margin-top: 0;
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 16px;
    }

    .border-solid {
        border-style: solid;
    }


    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }
    }

    @media (max-width: 767.98px) {
        .NavUpper {
            background-color: #fff;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .NavUpper .navbar-collapse {
            background: #fff;
            padding: 0.5rem 0;
        }

        .NavUpper .navbar-nav {
            width: 100%;
        }

        .NavUpper .navbar-nav .nav-item {
            width: 100%;
        }

        .NavUpper .navbar-nav .nav-link,
        .NavUpper ul a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            color: #212529;
            font-size: 14px;
            padding: 12px 14px;
            background-color: #fff;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
        }

        .NavUpper .dropdown-toggle::after {
            margin-left: auto;
        }

        .NavUpper .dropdown-menu {
            position: static;
            float: none;
            width: 100%;
            margin-top: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            background-color: #fff;
        }

        .NavUpper .ueberunsmenue,
        .NavUpper .veranstaltungmenue {
            position: static;
            transform: none;
        }

        .NavUpper .ueberunsLink {
            width: 100%;
            margin: 0;
            padding: 12px 24px;
            text-align: start;
            background-color: #fff;
            color: #212529;
            font-size: 14px;
        }

        .NavUpper .dropdown-menu a:hover,
        .NavUpper .dropdown-menu a:focus {
            padding: 12px 24px;
            box-shadow: none;
            background-color: #f1f3f5;
            color: #212529;
        }

        .NavUpper ul li a:hover,
        .NavUpper ul li a:focus {
            padding: 12px 14px;
            box-shadow: none;
            background-color: #f1f3f5;
            color: #212529;
        }

        .NavUpper .navbar-toggler {
            border-color: #212529;
        }

        .NavUpper .navbar-toggler-icon {
            stroke: #212529;
        }

        .gmbh {
            transition: none;
        }
    }

    @media (min-width: 992px) {
        html {
            font-size: 17px;
        }
    }

    @media (min-width: 1200px) {

        html {
            font-size: 18px;
        }



        .kontaktfomularDiv {
            margin-top: 20px;
            margin: 20px 200px 0 200px;
            padding: 20px 100px 20px 100px;
        }
    }






    .bgFooter {
        background: linear-gradient( to top, rgba(0, 0, 0, 1) 20%, /* Vollständig deckend am unteren Rand */
        rgba(0, 0, 0, 0.001) 100% /* 50% Deckkraft am oberen Rand */
        );
    }

    .ContentheightProdukt {
        margin-top: 190px;
    }

    .Contentheight {
        margin-top: 85px;
    }

    .menueVeranstaltungen {
        background-color: rgba(0, 0, 0,0.7);
    }


    .vh-60 {
        height: 60vh;
    }



    .NavUpper {
        height: 75px;
        z-index: 120;
        /*  background-color: transparent;*/

        position: fixed;
        width: 100vw;
        top: 0;
        font-size: 20px;
        background: rgba(255,255,255,0.2);
        background: rgba(0,0,0,0.2);
        background: transparent;
        backdrop-filter: blur(6px); /* "Glass"-Effekt */
        -webkit-backdrop-filter: blur(6px);
    }



        .NavUpper .navbar-nav .nav-link {
            color: #ffffff;
        }

        .NavUpper .navbar-brand {
            color: #ffffff;
        }

        .NavUpper .navbar-nav .nav-link:hover {
            color: #f8f9fa; /* Linkfarbe bei Hover */
            text-decoration: underline; /* Unterstrich bei Hover */
        }

        .NavUpper .navbar-toggler {
            border-color: white; /* Farbe des Togglers (Hamburger-Menü) */
            padding: 0;
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }

            .NavUpper .navbar-toggler:hover {
                border-color: grey; /* Farbe des Togglers (Hamburger-Menü) */
                padding: 0;
                width: 50px;
                height: 50px;
            }

        .NavUpper .navbar-toggler-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px; /* Stellen Sie sicher, dass das span-Element eine feste Breite hat */
            height: 100%;
            margin: 0;
            padding: 0;
            stroke: white;
        }

            .NavUpper .navbar-toggler-icon:hover {
                stroke: gray;
            }


        .NavUpper ul a {
            text-decoration: none; /* Entfernt die Unterstreichung */
            font-weight: normal; /* Fettgedruckter Text */
            padding: 5px 15px; /* Abstand innerhalb des Links */
            font-weight: lighter;
            border-radius: 5px;
            margin: 0 2px;
            color: black;
            background-color: white;
            transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out, padding 0.5s ease-in-out;
        }

        .NavUpper ul li a.active {
            background-color: gray;
            color: white;
        }

        .NavUpper ul li a.intern.active {
            background-color: #004a99;
            color: white;
        }

        .NavUpper ul li a.extern.active {
            background-color: #e00070;
            color: white;
        }

        .NavUpper ul li a.montessori.active {
            background: linear-gradient( 45deg, hsl(204, 79%, 42%), hsl(175, 100%, 27%), hsl(84, 79%, 42%) );
            color: white;
        }

        .NavUpper ul li a:hover {
            box-shadow: 10px 0 0px rgba(0, 0, 0, 0);
            padding: 15px;
            background-color: gray;
            color: white;
        }



        .NavUpper ul.dropdown-menu a {
            color: #000000; /* Setzt die Textfarbe in der Dropdown-Liste auf schwarz */
            text-align: center; /* Zentriert den Text in der Dropdown-Liste */
        }




        .NavUpper .ueberunsLink {
            width: 50vw;
            color: red;
            background-color: whitesmoke;
            margin: 0px 0px 5px 0px;
            padding: 5px;
            width: auto;
            text-align: start;
            font-size: 16px;
        }

        .NavUpper ul.dropdown-menu a:hover {
            color: white;
            /* Farbe beim Hover in der Dropdown-Liste */
            background-color: gray; /* Farbe beim Hover in der Dropdown-Liste */
        }

        .NavUpper .navbar-collapse {
            background: rgba(0,0,0,0.9);
        }

        .NavUpper .dropdown-menu {
            background-color: #fff;
        }

        .NavUpper .dropdown-menu a {
            display: block;
            width: 100%;
        }



    .navitemUpper .ueberunstoggle {
        position: relative;
    }

    .ueberunsmenue {
        position: absolute;
    }

    .dropdown {
        position: relative; /* Das Dropdown-Element wird relativ positioniert */
    }

    @media (min-width: 1200px) {
        .NavUpper .navbar-collapse {
            background-color: transparent;
        }

        .NavUpper {
            font-size: 18px;
        }

            .NavUpper ul a {
                padding: 10px 15px; /* Abstand innerhalb des Links */
            }



        .ueberunsmenue {
            position: absolute;
            top: 100%; /* Positioniert das Menü direkt unter dem Button */
            left: 0; /* Richtet das Menü an der linken Seite des Buttons aus */
            transform: translateX(-50%);
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            /* Eine feste Breite für das Menü (optional) */
        }

        .ueberunsLink {
            margin: 0;
            text-align: center;
            font-size: 18px;
            display: block;
            width: 100%; /* Stellt sicher, dass die Links die volle Breite einnehmen */
            padding: 10px 00px; /* Padding für besseren Abstand */
        }
    }



    .NavLower {
        top: 85px;
        border-radius: 0 0 5px 5px;
    }

    .NavProdukteItem {
        width: auto;
    }

    .NavProduktLogo {
        max-height: 50px;
    }


    .modal-backdrop {
        z-index: -1;
    }

    hr {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    strong {
        font-weight: bolder;
    }


    .kontaktformular h1,
    .kontaktformular h2,
    .kontaktformular h3,
    .kontaktformular h4,
    .kontaktformular h5,
    .kontaktformular h6,
    .kontaktformular a {
        color: whitesmoke;
    }

        .kontaktformular a:hover {
            color: rgb(13, 110, 253);
        }

    footer a {
        text-decoration: none;
        color: whitesmoke;
    }

        footer a:hover {
            color: rgb(13, 110, 253);
        }
    /* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
    .dl-horizontal dt {
        white-space: normal;
    }




    .infobanner {
        opacity: 0.65;
        color: whitesmoke;
    }

        .infobanner:hover {
            opacity: 1;
        }

    .myDivSub {
        position: relative;
        background-color: white;
        border-width: 10px;
        border: solid;
        padding: 20px;
        padding-bottom: 50px;
        border-color: transparent;
        border-radius: 10px;
    }



    .myDivbottom {
        position: absolute;
        bottom: 5%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }


    .formulare-container {
        display: flex;
        justify-content: center;
        /* background-color: DodgerBlue;*/
    }

        .formulare-container > div {
            background-color: #f1f1f1;
            width: 600px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }





    .nav-link.Event {
        color: #6c757d;
        background-color: white;
        opacity: 0.7;
        border-color: transparent;
    }

        .nav-link.Event:hover {
            border-color: transparent;
            opacity: 1;
        }


        .nav-link.Event.myactive {
            background-color: #6c757d;
            border-color: transparent;
            color: white;
            opacity: 1;
        }



    @media (min-width: 768px) {


        .ContentheightProdukt {
            margin-top: 190px;
        }

        .Contentheight {
            margin-top: 95px;
        }


        .NavProdukteItem {
            width: 100%;
        }

        .NavLower {
            top: 65px;
        }
    }

    @media (min-width: 1200px) {
        .ContentheightProdukt {
            margin-top: 190px;
        }

        .Contentheight {
            margin-top: 80px;
        }

        .NavLower {
            top: 79px;
        }
    }

    @media (min-width: 992px) {



        .VeranstaltungContentheight {
            margin-top: 180px;
        }
    }


    @media (min-width: 992px) {
        .VeranstaltungContentheight {
            margin-top: 185px;
            min-height: calc(80vh - 185px);
        }
    }

    @media (min-width: 1000px) {
        /* .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }*/
    }
    /********************** Veranstaltungen************************/
    .anmelden {
        position: fixed;
        top: 50%;
        right: 5px;
        background-color: gray;
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        width: 50px;
        height: 50px;
        z-index: 20;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-decoration: none;
        cursor: pointer;
        transition: width 1s, box-shadow 1s; /* Breite 1s für Verkleinerung, Box-Shadow  */
    }

    #topScroll {
        opacity: 0;
        border-block-color: transparent;
        background-color: gray;
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
        border-width: 0;
        z-index: 1000;
        bottom: 10px;
        right: 5px;
        border-radius: 50px;
        width: 50px;
        height: 50px;
        opacity: 0; /* Unsichtbar zu Beginn */
        pointer-events: none; /* Klicks deaktivieren, wenn nicht sichtbar */
        transition: opacity 0.3s ease; /* Sanfte Einblendung */
    }

        #topScroll.visible {
            opacity: 0.5; /* Sichtbar */
            pointer-events: auto; /* Klicks wieder aktivieren */
        }

        #topScroll:hover {
            opacity: 1;
        }



    .buttonIE {
        background-color: #004a99;
        border-radius: 1.3rem;
        box-shadow: 0 2px 16px rgba(255,255,255,0.7);
        padding: 2.1rem 1.2rem;
        text-align: center;
        color: white;
        transition: box-shadow 0.18s, transform 0.16s;
    }


    .buttonEE {
        background-color: #e00070;
        border-radius: 1.3rem;
        box-shadow: 0 2px 16px rgba(255,255,255,0.7);
        padding: 2.1rem;
        text-align: center;
        color: white;
        transition: box-shadow 0.18s, transform 0.16s;
    }

    .buttonRegister {
        background-color: gray;
        border-radius: 1.3rem;
        box-shadow: 0 2px 16px rgba(255,255,255,0.7);
        padding: 2.1rem 1.2rem;
        text-align: center;
        color: white;
        transition: box-shadow 0.18s, transform 0.16s;
    }

    .buttonIE:hover {
        box-shadow: 0 0px 0px rgba(255,255,255,0.7);
        color: white;
        transition: box-shadow 0.18s, transform 0.16s;
    }

    .buttonEE:hover {
        box-shadow: 0 0px 0px rgba(255,255,255,0.7);
        color: white;
        transition: box-shadow 0.18s, transform 0.16s;
    }

    .buttonRegister:hover {
        box-shadow: 0 0px 0px rgba(255,255,255,0.7);
        color: white;
        transition: box-shadow 0.18s, transform 0.16s;
    }


    .anmelden.IE {
        background-color: #004a99;
        top: auto !important; /* entfernt top: 50% */
        height: 55px;
        bottom: 180px;
    }

    .anmelden.EE {
        background-color: #e00070;
        top: auto !important; /* entfernt top: 50% */
        height: 55px;
        bottom: 120px;
    }

    .anmelden.Servicebereich {
        top: auto !important; /* entfernt top: 50% */
        bottom: 65px; /* 5px vom unteren Rand */
    }

    .anmelden.Login {
        top: auto !important; /* entfernt top: 50% */
        bottom: 65px; /* 5px vom unteren Rand */
    }

    @media (min-width: 768px) {
        .anmelden.IE {
            background-color: #004a99;
            top: auto !important; /* entfernt top: 50% */
            height: 65px;
            bottom: 205px;
        }

        .anmelden.EE {
            background-color: #e00070;
            top: auto !important; /* entfernt top: 50% */
            height: 65px;
            bottom: 130px;
        }

        .anmelden.Servicebereich {
            top: auto !important; /* entfernt top: 50% */
            bottom: 70px; /* 5px vom unteren Rand */
        }

        .anmelden.Login {
            top: auto !important; /* entfernt top: 50% */
            bottom: 70px; /* 5px vom unteren Rand */
        }
    }




    .anmelden h5, .anmelden h6 {
        display: none;
        color: white;
        margin: 0;
        padding: 0;
        text-align: center;
    }


    .anmelden:hover {
        width: 200px;
        box-shadow: 10px 8px 20px rgba(0, 0, 0, 0.8); /* Blau im Hover-Effekt */
        justify-content: start;
        padding: 0 10px 0 10px;
        transition: width 0.5s, box-shadow 0.5s; /* Breite beim Hover 0.3s */
    }

    .anmelden.Login:hover {
        width: 120px;
        box-shadow: 10px 8px 20px rgba(0, 0, 0, 0.8); /* Blau im Hover-Effekt */
        justify-content: start;
        padding: 0 10px 0 10px;
        transition: width 0.5s, box-shadow 0.5s; /* Breite beim Hover 0.3s */
    }


    .anmelden:hover h5, .anmelden:hover h6 {
        display: block;
        text-decoration: none;
        padding-left: 10px;
    }
    /*****fürs Simulieren mitJS***/
    .anmelden-hover {
        width: 200px;
        box-shadow: 10px 8px 20px rgba(0, 0, 0, 0.8); /* Hover-Effekt */
        justify-content: start;
        padding: 0 10px 0 10px;
        transition: width 1s, box-shadow 1s; /* Breite beim Hover 0.3s */
    }

        .anmelden-hover h5, .anmelden-hover h6 {
            display: block;
            text-decoration: none;
            padding-left: 10px;
            opacity: 1;
            transition: opacity 1s;
        }