/* -  */


/* - Variablen Webite */
:root{
    /* - Variablen: Farben */
    --wulfix_pink: #A61C4A;
    --wulfix_pink_hover: #86183d; 
    --wulfix_pink_dunkel: #78163B;
    --wulfix_weiß: #FFFFFF;
    --wulfix_grau_dropdown: #595959;
    --wulfix_grau_dropdown_hover: #7F7F7F;
    --wulfix_hellgrau_hintergrund: #F2F2F2;
    --wulfix_hellgrau_textfelder: #DEDEDE;
    --wulfix_schrift_grau:#595959;
    --wulfix_abtrennung_tabelle: #AFABAB;

    /* - Variablen: Schriftart */
    --Standart_Schriftart_Website: 'Bahnschrift', Arial, Helvetica, sans-serif;
}

*{  margin: 0px;
    padding: 0px; }
    
/* Inhaltsverzeichnis Styledatei

    - Erstellung der Navigationsleiste
        -- Navigationsleiste: Computer-Version
        -- Navigationsleiste: Handy-Version
    - Erstellung des Footers 
        -- Footer: Computer-Version
        -- Footer: Handy-Version



    - (51) Erstellung Seite Rezeptideen für Cocktails (51-cocktails)
        -- Rezeptideen Cocktails: Computer-Version
        -- Rezeptideen Cocktails: Handy-Version

    - (52) Erstellen Seite Rezeptideen für Longdrink (52-longdinks)
*/















/* - Test ab hier */



/* - Abtrennung unter Navigationsleiste */
.strich_main_home {
    border: none;
    height: 2px;
    background-color: white;
}















/* - Stylen des Titelbilds */

.container_titelbild {
     background-color: #0D0D0D;
}

    .bild_titelbild_startseite {
        width: 100%;
    }
    
        .box_titelbild_button {
            position: absolute;

            display: flex;
            justify-content: center;
            align-items: center;

            background-color: var(--wulfix_pink);
            height: 3.8vw;
            width: 17.1vw;
            border-radius: 9px;

            box-shadow: 0px 0px 2px var(--wulfix_pink);
        }

        .titelbild_button_text {
            text-decoration: none;
            
            font-family: var(--Standart_Schriftart_Website);
            font-size: 1.9vw;
            color: var(--wulfix_weiß);

            font-weight: 500;
        }

        .box_titelbild_button:hover {
            background-color: var(--wulfix_pink_dunkel);
            box-shadow: 0px 0px 5px var(--wulfix_pink_dunkel);
            
        }



        /* - Stylen Abstand Button */

        @media (min-width:1100px){
            
            .box_titelbild_button {
                right: 130px;
                top: 485px;
            }
        }

        @media (min-width:1200px){
            
            .box_titelbild_button {
                right: 140px;
                top: 515px;
            }
        }


        @media (min-width:1300px){
            
            .box_titelbild_button {
                right: 145px;
                top: 550px;
            }
        }

        @media (min-width:1400px){
            
            .box_titelbild_button {
                right: 160px;
                top: 585px;
            }
        }


        @media (min-width:1500px){
            
            .box_titelbild_button {
                right: 170px;
                top: 620px;
            }
        }


        @media (min-width:1600px){
            
            .box_titelbild_button {
                right: 180px;
                top: 650px;
            }
        }


        @media (min-width:1700px){
            
            .box_titelbild_button {
                right: 195px;
                top: 685px;
            }
        }


        @media (min-width:1800px){
            
            .box_titelbild_button {
                right: 195px;
                top: 710px;
            }
        }

        @media (min-width:1900px){
            
            .box_titelbild_button {
                right: 205px;
                top: 750px;
            }
        }

        @media (min-width:2000px){
            
            .box_titelbild_button {
                right: 215px;
                top: 780px;
            }
        }

        @media (min-width:2100px){
            
            .box_titelbild_button {
                right: 220px;
                top: 815px;
            }
        }

        @media (min-width:2200px){
            
            .box_titelbild_button {
                right: 225px;
                top: 845px;
            }
        }

        @media (min-width:2300px){
            
            .box_titelbild_button {
                right: 235px;
                top: 885px;
            }
        }

        @media (min-width:2400px){
            
            .box_titelbild_button {
                right: 245px;
                top: 920px;
            }
        }

        @media (min-width:2500px){
            
            .box_titelbild_button {
                right: 255px;
                top: 955px;
            }
        }

        @media (min-width:2600px){
            
            .box_titelbild_button {
                right: 270px;
                top: 990px;
            }
        }

        @media (min-width:2700px){
            
            .box_titelbild_button {
                right: 280px;
                top: 1020px;
            }
        }















/* - Stylen des Containes Erklärung Mixdream */

.container_erklärung_mixdream {
    background-color: #0D0D0D;
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
}

    .box_em_überschrift {
        height: 70px;
        padding-top: 35px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }


        .box_strich_em {
            height: 100px;
            width: 10%;

            display: flex;
            align-items: center;
        }

        .box_em_überschrift_text {
            margin-left: 25px;
            margin-right: 25px;
            height: 70px;
            
            
            display: flex;
            align-items: center;
        }

        .box_em_überschrift_text p {
            font-family: 'Bahnschrift';
            font-size: 2.2vw;
            color: var(--wulfix_weiß);


        }

        .strich_em {
            width: 100%;

            border: none;
            height: 1.5px;
            background-color: var(--wulfix_weiß);
            border-radius: 0.75px;
        }


    .box_em_bildmittext {
        width: 100%;
        height: 450px;
        
        display: flex;
        align-items: center;
    }

        .box_em_bild { margin-left: 6.5vw; }

            .bild_em { height: 350px; }


        .box_em_erklärung {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

            .bild_em_erklärung { width: 84%; }



















/* - Hauptteil der Home Seite  */

.home_hauptteil {
    background-color: #F0F0F0;
}








    .container_home_produkte_überschrift {
        height: 130px;
        padding-top: 30px;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

        .strich_produkte_überschrift {
           width: 10%; 
           border: none;
           height: 1.5px;
           background-color: #7F7F7F;
           border-radius: 0.75px;
        }

        .produkte_überschrift_text {
            margin-left: 25px;
            margin-right: 25px;

            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_schrift_grau);
            font-size: 2.2vw;
        }










        
    .container_home_produkte {
        margin-left: 6.5%;
        width: 87%;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .box_home_cm4n, .box_home_cm6n {
            display: flex;
            flex-direction: row;
        }

        .box_home_cm6n {
            margin-top: 55px;
        }

        .bild_home_cm4n, .bild_home_cm6n {
            width: 50%;
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;
            box-shadow: 0px 0px 12px silver;
        }

        .box_home_cm4n_text, .box_home_cm6n_text {
            width: 50%;
            background-color: white;
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
            box-shadow: 0px 0px 12px silver;
        }

        .home_cm4n_text1, .home_cm6n_text1 {
            margin-left: 45px;
            margin-top: 45px;
        
            font-family: var(--Standart_Schriftart_Website);
            font-size: 1.4vw;
            color: var(--wulfix_pink);
        }

        .home_cm4n_text2, .home_cm6n_text2 {
            margin-left: 45px;
            margin-top: 15px;
        
            font-family: var(--Standart_Schriftart_Website);
            font-size: 2vw;
            color: var(--wulfix_schrift_grau);
        }

        .home_cm4n_text3, .home_cm6n_text3 {
            margin-left: 45px;
            margin-right: 45px;
            margin-top: 15px;
        
            font-family: var(--Standart_Schriftart_Website);
            font-size: 1.2vw;
            color: var(--wulfix_schrift_grau);

            text-align: justify;
        }

        .home_cm4n_text4, .home_cm6n_text4 {
            background-color: var(--wulfix_pink);
            margin-left: 45px;
            margin-top: 23px;

            padding-top: 8px;
            padding-bottom: 8px ;

            width: 50%;

            border-radius: 5px;

            text-align: center;

            font-family: var(--Standart_Schriftart_Website);
            font-size: 1.3vw;
            color: var(--wulfix_weiß);

            box-shadow: 0px 0px 7px var(--wulfix_grau_dropdown);
        }


        .home_cm4n_href4, .home_cm6n_href4 {
            text-decoration: none;
        }

        .home_cm4n_text4:hover {
            background-color: var(--wulfix_pink_hover);
            box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
        }

        .home_cm6n_text4:hover {
            background-color: var(--wulfix_pink_hover);
            box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
        }



        @media (min-width:1550px) {
            .container_home_produkte {
                margin-left: 12.5%;
                width: 75%;
            }
        }











        .container_home_kaufen_überschrift {
            height: 130px;
            padding-top: 50px;
    
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    
            .strich_kaufen_überschrift {
               width: 10%; 
               border: none;
               height: 1.5px;
               background-color: #7F7F7F;
               border-radius: 0.75px;
            }
    
            .kaufen_überschrift_text {
                margin-left: 25px;
                margin-right: 25px;
    
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 2.2vw;
            }


        


    
        .container_home_kaufen_mieten {
            margin-left: 6.5%;
            width: 87%;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }


            .box_home_kaufen, .box_home_mieten {
                width: 44%;
                height: 24vw;
                background-color: white;

                border-radius: 16px;
                box-shadow: 0px 0px 12px silver;
            }

            .home_kaufen_text1, .home_mieten_text1 {
                margin-left: 40px;
                margin-top: 45px;
            
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.4vw;
                color: var(--wulfix_pink);
            }

            .home_kaufen_text2, .home_mieten_text2 {
                margin-left: 40px;
                margin-right: 30px;
                margin-top: 15px;
            
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.8vw;
                color: var(--wulfix_schrift_grau);
            }

            .home_kaufen_text3, .home_mieten_text3 {
                margin-left: 40px;
                margin-right: 45px;
                margin-top: 15px;
            
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.2vw;
                color: var(--wulfix_schrift_grau);
    
                text-align: justify;
            }

            .home_kaufen_text4, .home_mieten_text4 {
                background-color: var(--wulfix_pink);
                margin-left: 40px;
                margin-top: 23px;
    
                padding-top: 8px;
                padding-bottom: 8px ;
    
                width: 57%;
    
                border-radius: 5px;
    
                text-align: center;
    
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.3vw;
                color: var(--wulfix_weiß);
    
                box-shadow: 0px 0px 7px var(--wulfix_grau_dropdown);
            }
    
    
            .home_kaufen_href4, .home_mieten_href4 {
                text-decoration: none;
            }
    
            .home_kaufen_text4:hover {
                background-color: var(--wulfix_pink_hover);
                box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
            }
    
            .home_mieten_text4:hover {
                background-color: var(--wulfix_pink_hover);
                box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
            }







        .container_home_rezepte_überschrift {
            height: 130px;
            padding-top: 30px;
    
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    
            .strich_rezepte_überschrift {
                width: 8%; 
                border: none;
                height: 1.5px;
                background-color: #7F7F7F;
                border-radius: 0.75px;
            }
    
            .rezepte_überschrift_text {
                margin-left: 25px;
                margin-right: 25px;
    
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 2.2vw;
            }


        
        .container_home_rezepte {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

            .bild_home_rezepte {
                width: 87%;
                border-top-left-radius: 16px;
                border-top-right-radius: 16px ;

                box-shadow: 0px 0px 5px silver;
            }

            .box_home_rezepte {
                width: 87%;
                height: 18.5vw;

                background-color: white;

                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;

                display: flex;
                flex-direction: row;
                justify-content: space-evenly;

                box-shadow: 0px 0px 12px silver;
            }

                .box_home_rezepte1 {
                    width: 31%;
                }


                .home_rezepte_text1 {
                    margin-left: 10px;
                    margin-top: 35px;
                
                    font-family: var(--Standart_Schriftart_Website);
                    font-size: 1.3vw;
                    color: var(--wulfix_pink);
                }

                .home_rezepte_text2 {
                    margin-left: 10px;
                    margin-top: 10px;

                    font-family: var(--Standart_Schriftart_Website);
                    font-size: 1.8vw;
                    color: var(--wulfix_schrift_grau);
                }

                .home_rezepte_text3 {
                    margin-left: 10px;
                    margin-top: 10px;

                    font-family: var(--Standart_Schriftart_Website);
                    font-size: 1.2vw;
                    color: var(--wulfix_schrift_grau);
                }

                .home_rezepte_text4 {
                    background-color: var(--wulfix_pink);
                    margin-left: 10px;
                    margin-top: 23px;
                
                    padding-top: 8px;
                    padding-bottom: 8px ;
                
                    width: 49%;
                
                    border-radius: 5px;
                
                    text-align: center;
                
                    font-family: var(--Standart_Schriftart_Website);
                    font-size: 1.3vw;
                    color: var(--wulfix_weiß);
                
                    box-shadow: 0px 0px 7px var(--wulfix_grau_dropdown);
                }

                .home_rezepte_text4:hover {
                    background-color: var(--wulfix_pink_hover);
                    box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
                }

                .home_rezepte_href4 {
                    text-decoration: none;
                }









        .container_home_downloads_überschrift {
            height: 130px;
            padding-top: 30px;
    
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    
            .strich_downloads_überschrift {
                width: 8%; 
                border: none;
                height: 1.5px;
                background-color: #7F7F7F;
                border-radius: 0.75px;
            }
    
            .downloads_überschrift_text {
                margin-left: 25px;
                margin-right: 25px;
    
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 2.2vw;
            }








        .container_home_downloads_faq {
            margin-left: 6.5%;
            width: 87%;
            padding-bottom: 50px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }


            .box_home_downloads, .box_home_faq {
                width: 44%;
                height: 24vw;
                background-color: white;

                border-radius: 16px;
                box-shadow: 0px 0px 12px silver;
            }

            .home_downloads_text1, .home_faq_text1 {
                margin-left: 40px;
                margin-top: 45px;
            
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.4vw;
                color: var(--wulfix_pink);
            }

            .home_downloads_text2, .home_faq_text2 {
                margin-left: 40px;
                margin-right: 30px;
                margin-top: 15px;
            
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.8vw;
                color: var(--wulfix_schrift_grau);
            }

            .home_downloads_text3, .home_faq_text3 {
                margin-left: 40px;
                margin-right: 45px;
                margin-top: 15px;
            
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.2vw;
                color: var(--wulfix_schrift_grau);
    
                text-align: justify;
            }

            .home_downloads_text4, .home_faq_text4 {
                background-color: var(--wulfix_pink);
                margin-left: 40px;
                margin-top: 23px;
    
                padding-top: 8px;
                padding-bottom: 8px ;
    
                width: 57%;
    
                border-radius: 5px;
    
                text-align: center;
    
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.3vw;
                color: var(--wulfix_weiß);
    
                box-shadow: 0px 0px 7px var(--wulfix_grau_dropdown);
            }
    
    
            .home_downloads_href4, .home_faq_href4 {
                text-decoration: none;
            }
    
            .home_downloads_text4:hover {
                background-color: var(--wulfix_pink_hover);
                box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
            }
    
            .home_faq_text4:hover {
                background-color: var(--wulfix_pink_hover);
                box-shadow: 0px 0px 8px var(--wulfix_pink_hover);
            }
        





























/* - Erstellung der Navigationsleiste */

    @media (min-width:1100px){ /* - Navigationsleiste: Computer-Version */

        /* - Alles aus Handyversion hier nicht anzeigen */
        .navigationsleiste_handy{
            display: none;
        }

        /* - Variablen für die Navigationsleiste */
        :root{
            --höhe_navigationsleiste: 80px;
            --breite_navigationsleiste: 10.9vw;
        }

        .navigationsleiste{
            height: var(--höhe_navigationsleiste);
            background-color: var(--wulfix_pink);
            display: flex;
            justify-content: space-between;
        }

        .logo_navigationsleiste_computer{
            height: 70px;
            margin-left: 10px;
            border-radius: 0px 0px 9px 9px;
        }

            /* - Erstellen der Listenpunkte der Navigationsleiste */

            .ul_navigationsleiste{
                height: var(--höhe_navigationsleiste);
                display: flex;  /* - Kindelemente (Listenelemente) werden zu flex Elementen */
                flex-direction: row; /* - Richtung der Hauptachse festlegen: hier horizontal */
                justify-content: flex-end; /* - Elemente orientieren sich am Ende der Hauptachse */
                align-items: center; /* - Elemente richten sich in der Mitte der Querachse aus */
                list-style: none; /* - Listenpunkte der Liste ausstellen */
            }

            .li_navigationsleiste{
                height: var(--höhe_navigationsleiste);
                width: var(--breite_navigationsleiste);
            }

            .a_navigationsleiste{
                height: var(--höhe_navigationsleiste);
                width: var(--breite_navigationsleiste);

                display: flex; /* - Elemente auf Flex setzten  */
                align-items: center; /* - Schrift richtet sich in der Mitte der Querachse aus */
                justify-content: center; /* - Schrift richtet sich in der Mitte der Hauptachse aus */
                text-decoration: none; /* - Unterstreichen der Listenpunkte ausstellen */

                /* - Schrifteinstellungen für Navigationsleiste */
                font-family: var(--Standart_Schriftart_Website);
                font-size: 1.3vw;
                color: var(--wulfix_weiß);
            }

            .li_navigationsleiste:hover{
                background-color: var(--wulfix_pink_hover); /* - Hover Effekt für Navigationsleiste */
                cursor: pointer;
            } 

            .rezepte_checkbox[type="checkbox"]{
                display: none;  /* - Nicht mehr anzeigen der Checkbox */
            }


                /* - Erstellen des Dropdown Menü für Rezepte */

                :root{
                    --breite_dropdownliste: 13.5vw;
                }

                .ul_dropdown_rezepte{
                    
                    height: min-content; /* - Höhe von der Liste, so hoch wie das Innenleben */
                    width: var(--breite_dropdownliste); /* - Breite der Dropdownliste */
                    display: none;
                    flex-direction: column; /* - Richtung der Hauptachse festlegen, hier vertikal */
                    position: absolute;
                }

                .li_drowpdown_rezepte{
                    height: 55px;
                    width: var(--breite_dropdownliste);
                    display: flex;
                    align-items: center;
                    background-color: var(--wulfix_grau_dropdown);
                }

                .li_drowpdown_rezepte a{
                    padding-left: 15px;  /* - Abstand von der linken Seite */
                    text-decoration: none; /* - Unterstreichen der Listenpunkte ausstellen */

                    /* - Schrifteinstellungen für Navigationsleiste Dropdown */
                    font-family: var(--Standart_Schriftart_Website);
                    font-size: 1.1vw;
                    color: var(--wulfix_weiß);
                }
                    
                .li_navigationsleiste:hover .ul_dropdown_rezepte{
                    display: flex;} /* - Dropdown anzeigen, wenn hover Effekt eintritt */

                .li_drowpdown_rezepte:hover{
                    background-color: var(--wulfix_grau_dropdown_hover);  /* - Hover Effekt für Dropdown Menü */
                    cursor: pointer;
                }
    }

    @media (max-width:1100px){ /* - Navigationsleiste: Handy-Version */

        /* - Alles aus Computerversion hier nicht anzeigen */
        .navigationsleiste { display: none; }


            /* - Stylen der Taskleiste mit Logo */

                /* - Rahmen für Navigationsleiste */
                .rahmen_nav_handy{
                    width: initial; /* - Breite der Seite anpassen */
                    height: 124px; /* - Höhe von der Navigationsleiste */
                    background-color: var(--wulfix_pink); /* - Hintergrundfarbe der Navigationsleiste */
                    justify-content: space-between; /* - Positionieren der Kind Elemente, Icon und Bild nach rechts und links außen */
                    display: flex; /* - Kind Elemente werden zu flex Elementen */
                }

                #navigationsleiste_checkbox{
                    display: none; /* - Checkbox für Navigationsleiste Icon nicht anzeigen */
                }

                /* - Linien für das Icon stylen */
                .linie_nav_handy{
                    width: 85px; /* - Breite der Linien: 85px */
                    height: 8px; /* - Höhe der Linien: 8px */ 
                    background-color: var(--wulfix_weiß); /* - Linienfarbe weiß */
                    border-radius: 4px; /* - Radius am Ende der Lininen */
                    position: absolute;
                }

                .einsham_nav { top: 30px; } /* - Abstand Linie 1 nach oben */

                .zweiham_nav { top: 58px; } /* - Abstand Linie 2 nach oben */

                .dreiham_nav { top: 86px; } /* - Abstand Linie 3 nach oben */

                .rahmen2_nav_handy { padding-left: 20px; } /* - Abstand der Linien nach links zum Rand */

                /* - Stylen des Logos in der Navigationsleiste */
                .logo_navigationsleiste_handy{
                    height: 110px;
                    padding-right: 35px;
                }


                    /* - Erstellen des Kreuzes, wenn Dropbox aufgeklappt wird */

                    #navigationsleiste_checkbox:checked ~ label .zweiham_nav{
                        opacity: 0; /* Mittlere Linie verschwindet, weil für Kreuz nicht gebraucht*/
                    }
                    
                    #navigationsleiste_checkbox:checked ~ label .einsham_nav{
                        transform: rotate(-45deg); /* - Rotieren -45° von Linie 1 */
                        top: 60px; /* - Abstand nach oben nach dem rotieren: 60px */
                        transition: transform 0.3s; /* - Rotieren der Linie dauert 0.3 Sekunden */
                    }

                    #navigationsleiste_checkbox:checked ~ label .dreiham_nav{
                        transform: rotate(45deg); /* - Rotieren 45° von Linie 3 */
                        top: 60px; /* - Abstand nach oben nach dem rotieren: 60px */
                        transition: transform 0.3s; /* - Rotieren der Linie dauert 0.3 Sekunden */
                    }

            
            /* - Erstellen der Dropdown Auswahlliste */

                /* - Stylen der Ebenen */
                .ul_ebeneeins{
                    padding: 0px; /* - Innenabstand auf 0 */
                    margin: 0px; /* - Außenabstand auf 0 */
                    list-style: none; /* - Keinen Listenstyle */
                    display: none; /* - ebeneeins nicht anzeigen */
                    background-color: var(--wulfix_pink); /* - Hintergrundfarbe ebeneeins */

                }

                .ul_ebeneeins_a { 
                    margin-left: 45px; 
                    text-decoration: none;

                    /* - Schrifteinstellungen für ebeneeins */
                    color: var(--wulfix_weiß);
                    font-family: var(--Standart_Schriftart_Website);
                    font-size: 9vw;
                } 

                .ul_ebenezwei{
                    padding: 0px; /* - Innenabstand auf 0 */
                    margin: 0px; /* - Außenabstand auf 0 */
                    list-style: none;
                    display: none; /* - ebenezwei nicht anzeigen */
                    background-color: var(--wulfix_pink_dunkel); /* - Hintergrundfarbe ebenezwei */

                    
                }
                
                .ul_ebenezwei_a { 
                    margin-left: 80px;
                    text-decoration: none;

                    /* - Schrifteinstellungen für ebenezwei */
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_weiß);
                    font-size: 0.7em;
                }

                #openrezepte_checkbox { display: none; }  /* - Checkbox für ausklappen ebenezwei nicht anzeigen */
            
    

                /* - Stylen der Linien der Ebenen */

                .ul_ebeneeins > li{
                    border-bottom: 2px solid white; /* - Li Elemente: Linie unter jedem Element */
                    padding-top: 15px; /* - Innenabstand von Schrift nach oben */
                    padding-bottom: 15px; /* - Innenabstand von Schrift nach unten */
                }

                .ul_ebeneeins > li:first-child {
                    border-top: 2px solid white; /* - Beim ersten Li Element Linie oben */
                }


                .ul_ebenezwei > li {
                    border-bottom: 1.5px solid white; /* - Li Elemente: Linie unter jedem Element */
                    padding-top: 13px; /* - Innenabstand von Schrift nach oben */
                    padding-bottom: 13px; /* - Innenabstand von Schrift nach unten */
                }

                .ul_ebenezwei > li:last-child {
                    border: none; /* - Beim letzten Li Element Linie nicht anzeigen */
                }

                #openrezepte_checkbox:checked + .clickhoverrezepte .ul_ebenezwei > li:first-child {
                    border-top: 2px solid white; /* - Wenn ebenezwei geöffnet wird, bei ersten Li Element Linie oben erstellen */
                }

                #openrezepte_checkbox:checked ~ .clickhoverrezepte {
                    padding-bottom: 0px; /* - Wenn ebenezwei geöffnet wird, kein Abstand nach unten */
                }
            

                /* - Stylen des Pfeiles zum aufklappen */
                #nav_bildpfeil {
                    height: 0.6em;
                    padding-left: 15px;
                }

                /* - Wenn ebenezwei aufgeklappt wird, Pfeil wird gedreht */
                #openrezepte_checkbox:checked + .clickhoverrezepte #nav_bildpfeil {
                    transform: rotate(180deg); /* - Drehen um 180° */
                    padding-right: 15px; /* - Abstand nach rechts */
                    transition: transform 0.5s; /* - Drehung soll 0.5 Sekunden dauern */
                }


            /* - Aufklappen von ebeneeins und ebenezwei, wenn Checkboxen checkt  sind */

            #navigationsleiste_checkbox:checked ~ .ul_ebeneeins {
                display: block; /* - ebeneeins ausfahren, wenn Checkbox navigationsleiste_checkbox checkt ist */
            }

            #openrezepte_checkbox:checked + .clickhoverrezepte .ul_ebenezwei{
                display: block; /* - ebenezwei ausfahren, wenn Checkbox openrezepte checked ist */
            }
    }




/* - Erstellung des Footers */

    @media (min-width:1100px) { /* - Footer: Computer-Version */


        /* - Stylen des Footers */
        
        footer {
            background-color: var(--wulfix_pink);
            width: initial;
            height: 245px;
            display: block;
        }




        /* - Stylen der Infobutton im Footer */
        
        .box_infobutton {
            width: initial;
            height: 100px;
            
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }

        .link_box_infobutton { text-decoration: none; }

        .i_container_1, .i_container_2, .i_container_3 {
            height: 63px;
            width: 12.69vw;
            
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }

        .i_container_1 {width: 8.1vw;}

        #piktogram_fragen, #piktogram_bezahlung, #piktogram_lieferung {
            height: 2.7vw;
        }

        .text_infobutton {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 1.6vw;
        }

        .i_container_1:hover {
            background-color: var(--wulfix_pink_dunkel);
            border-radius: 9px;
            cursor: pointer;
        }

        .i_container_2:hover {
            background-color: var(--wulfix_pink_dunkel);
            border-radius: 9px;
            cursor: pointer;
        }

        .i_container_3:hover {
            background-color: var(--wulfix_pink_dunkel);
            border-radius: 9px;
            cursor: pointer;
        }



        /* - Stylen der Linie */

        .strich_footer {
            margin-left: 2.5%;
            width: 95%;
            height: 3px;
            border: none;
            border-radius: 1.5px;
            background-color: var(--wulfix_weiß)
        }




        /* - Stylen der Kontaktinfos im Footer */

        .box_kontaktinfos {
            width: initial;
            height: 120px;

            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }


        .k_container_1, .k_container_2 {
            height: 100px;
            width: 18.9vw;
            
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }

        #piktogram_ort, #piktogram_zeit {
            height: 2.6vw;
        }


        .text_k_container_1, .text_k_container_2 {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            line-height: 1.1;
            font-size: 1.3vw;
        }


        .k_container_3 {
            height: 75px;
            width: 18.9vw;

            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .k_container_email, .k_container_telefon {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #piktogram_email, #piktogram_telefon {
            height: 1.9vw;
        }

        .k_email_bild, .k_telefon_bild {
            margin-left: 2.4vw;
        }

        .k_email_text, .k_telefon_text {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 1.3vw;

            margin-left: 10px;
        }



        .k_container_4 {
            height: 75px;
            width: 19.5vw;

            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }
        
        #piktogram_instagram {
            height: 2.2vw;
        }

        .text_k_container_4 {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 1.3vw;
            line-height: 1.3;
            margin-left: 15px;
        }




        /* - Stylen Rechtliche Hinweise */

        .box_rechtlichehinweise {
            float: right;
            display: flex;
            margin-right: 15px;

            color: var(--wulfix_weiß);
            font-size: 1vw;
        }

        .r_text1 {
            margin-right: 8px;
            cursor: pointer;
        }

        .r_text2 {
            margin-left: 8px;
            margin-right: 8px;
            cursor: pointer;
        }

        .r_text3 {
            margin-left: 8px;
            cursor: pointer;
        }

        .r_text {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 1vw;
            text-decoration: none;
        }


    }

    @media (max-width:1100px) { /* - Footer: Handy-Version */

        
        /* - Stylen des Footers */

        footer {
            background-color: var(--wulfix_pink);
            width: initial;
            height: 850px;
            display: block;
        }



        /* - Stylen der Infobutton im Footer */

        .box_infobutton {
            width: initial;
            height: 165px;

            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }


        .i_container_1, .i_container_2, .i_container_3 {
            height: 65px;
            width: 33vw;

            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }

        .i_container_1 {
            width: 21vw;
        }

        #piktogram_fragen, #piktogram_bezahlung, #piktogram_lieferung {
            height: 7.5vw;
        }


        .text_infobutton {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 4.5vw;
        }

        .link_box_infobutton {
            text-decoration: none;
        }


        
        /* - Stylen der Linie */

        .strich_footer {
            margin-left: 4%;
            width: 92%;
            height: 3px;
            border: none;
            border-radius: 1.5px;
            background-color: var(--wulfix_weiß);
        }



        /* - Stylen der Kontaktinfos im Footer */

        .box_kontaktinfos {
            width: initial;
            height: 620px;

            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }


        .k_container_1, .k_container_2, .k_container_4 {
            height: 150px;
            width: 52vw;

            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: center;
        }

        #piktogram_ort, #piktogram_zeit {
            height: 8vw;
        }

        #piktogram_instagram {
            height: 6vw;
        }

        .text_k_container_1, .text_k_container_2, .text_k_container_4 {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            line-height: 1.1;
            font-size: 3.4vw;
        }


        .k_container_3 {
            height: 110px;
            width: 52vw;

            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
        }

        .k_container_email, .k_container_telefon {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #piktogram_email, #piktogram_telefon {
            height: 6.5vw;
        }

        .k_email_text, .k_telefon_text {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 3.4vw;

            margin-left: 25px;
        }

        .k_email_bild, .k_telefon_bild {
            margin-left: 4vw;
        }




        /* - Stylen Rechtliche Hinweise */

        .box_rechtlichehinweise {
            display: flex;
            background-color: var(--wulfix_pink);
            flex-direction: row;
            justify-content: center;
            margin-top: 10px;

            color: var(--wulfix_weiß);
            font-size: 2.5vw;
        }

        .r_text1 {
            margin-right: 8px;
        }

        .r_text2 {
            margin-left: 8px;
            margin-right: 8px;
        }

        .r_text3{
            margin-left: 8px;
        }

        .r_text {
            font-family: var(--Standart_Schriftart_Website);
            color: var(--wulfix_weiß);
            font-size: 2.5vw;
            text-decoration: none;
        }

    }




/* - Erstellung Seite Rezeptideen für Cocktails (51-cocktails) */

    @media (min-width:1100px) { /* - Rezeptideen Cocktails: Computer-Version */

        /* - Stylen Mainpart der Seite */
        .main_51-cocktails { background-color: var(--wulfix_hellgrau_hintergrund); }


        /* - Stylen Box Titelbild der Seite */
        .box_bild_cocktails {display: flex;} /* - Elemente auf flex setzten  */
        
            /* - Festlegen der größe der Bilder */
            .bild_cocktails1 {width: 50%;} /* - Größe des Bildes auf die hälfte der Seite setzten */
            .bild_cocktails2 {width: 50%; } /* - Größe des Bildes auf die hälfte der Seite setzten */
            

        /* - Stylen Box Überschrift */
        .rc_box_überschrift {
            display: flex; 
            flex-direction: row; 
            justify-content: center; 
            align-items: center; 
        }
            /* - Stylen der Überschrift */
            .rc_überschrift {
                padding-top: 30px; 
                padding-bottom: 10px; 
            
                /* - Schrifteinstellungen für Überschrift */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_pink);
                font-size: 4em;
                font-weight: 900;
            }


        /* - Stylen vom Unterstrich für Überschrift */
        .rc_strich_überschrift {
            width: 40%; 
            height: 5px; 
            border: none; 
            border-radius: 2.5px; 
            background-color: var(--wulfix_pink); 
            margin:auto; 
        }


        /* - Stylen Box Text Erklärung Rezeptideen Cocktails */
        .rc_box_text {
            display: flex; 
            flex-direction: row;
            justify-content: center; 
            padding-top: 35px; 
        }
            /* - Stylen Inhalt Box Text Erklärung Rezeptideen Cocktails */
            .rc_text {
                background-color: var(--wulfix_hellgrau_textfelder);
                width: 90%;
                border-radius: 3.5px;
                border-left: 5px solid var(--wulfix_pink);
            
                padding: 20px; /* - Abstand von Text zum Boxrand rundherum */
            
                text-align: justify; /* - Text soll in Blocksatz geschrieben werden */
            
                /* - Schrifteinstellungen Box Erklärung Rezeptideen Cocktails */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 1.3em;
                font-weight: 500;
                line-height: 150%;
            }
            
            /* - Stylen den Text für den Link */
            .rc_text_link {
                color: var(--wulfix_pink);
                font-weight: 500;
                text-decoration: none;
                padding: 2px;
            }
            
            .rc_text_link:hover {
                background-color: var(--wulfix_pink);
                border-radius: 2px;
                color: white;
            }
        



        /* - Stylen der Box für die Tabelle */
        .rc_box_tabelle {
            padding-top: 50px;
            padding-bottom: 50px;
        }

            /* - Stylen der Tabelle */
            #rc_tabelle{
                margin: auto;
                border-collapse: collapse;
            }

            /* - Stylen Tabellenkopf */
            .rc_tabelle_kopf {
                background-color: var(--wulfix_pink);
            }

                /* - Stylen Elemente des Tabellenkopfes */
                .rc_tabelle_kopf tr th {
                    font-size: 1.6vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_weiß);

                    padding: 10px 25px;
                }

                /* - Radien an den Tabellenkopf erstellen */
                .rc_tabelle_kopf tr th:first-child{
                    border-radius: 15px 0 0 0;
                }

                .rc_tabelle_kopf tr th:last-child{
                    border-radius: 0 15px 0 0;
                }

            /* - Stylen Tabellenhauptteil */
            #rc_tabelle_body {background-color:  var(--wulfix_hellgrau_hintergrund);}

                /* - Stylen Elemente in Tabellenhauptteil */
                #rc_tabelle_body tr td {
                    font-size: 1.4vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_schrift_grau);

                    padding: 2px;
                }

                /* - Zweite Hintergrundfarbe Tabelle */
                .rc_hintergrund2 {
                    background-color: var(--wulfix_hellgrau_textfelder);
                }

                /* - Strichen zwischen Tabellen */
                .rc_strich_tabelle{
                    border-bottom: 1px solid  var(--wulfix_abtrennung_tabelle);
                }

                /* - Endstrich der Tabelle */
                .rc_ende_tabelle {
                    border-bottom: 5px solid var(--wulfix_pink);
                }

    }


    @media (max-width:1100px) { /* - Rezeptideen Cocktails: Handy-Version */
    
        /* - Stylen Mainpart der Seite */
        .main_51-cocktails { background-color: var(--wulfix_hellgrau_hintergrund);}


        /* - Stylen Box Titelbild der Seite */
        .box_bild_cocktails {display: flex;} /* - Elemente auf flex setzten  */

        /* - Festlegen der größe von Bild */
        .bild_cocktails1 {width: 100%;} /* - Größe des Bildes soll über die ganze Seite gehen */
        .bild_cocktails2 {display: none;}  /* - Zweites Bild soll in Handy-Version ausgeblendet werden */ 
    
    
        /* - Stylen Box Überschrift */
        .rc_box_überschrift {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        
            /* - Stylen der Überschrift */
            .rc_überschrift {
                padding-top: 30px; 
                padding-bottom: 10px; 
            
                /* - Schrifteinstellungen für Überschrift */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_pink);
                font-size: 4.7em;
                font-weight: 900;
            }

        
        /* - Stylen vom Unterstrich für Überschrift */
        .rc_strich_überschrift {
            width: 77%; 
            height: 5px; 
            border: none; 
            border-radius: 2.5px; 
            background-color: var(--wulfix_pink); 
            margin:auto; 
        }


        /* - Stylen Box Text Erklärung Rezeptideen Cocktails */
        .rc_box_text {
            display: flex; 
            flex-direction: row;
            justify-content: center; 
            padding-top: 35px; 
        }
            /* - Stylen Inhalt Box Text Erklärung Rezeptideen Cocktails */
            .rc_text {
                background-color: var(--wulfix_hellgrau_textfelder);
                width: 85%;
                border-radius: 3.5px;
                border-left: 5px solid var(--wulfix_pink);
            
                padding: 20px; /* - Abstand von Text zum Boxrand rundherum */
            
                text-align: justify; /* - Text soll in Blocksatz geschrieben werden */
            
                /* - Schrifteinstellungen Box Erklärung Rezeptideen Cocktails */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 1.3em;
                font-weight: 500;
                line-height: 150%;
            }
            
            /* - Stylen den Text für den Link */
            .rc_text_link {
                color: var(--wulfix_pink);
                font-weight: 500;
                text-decoration: none;
                }
        
        

        /* - Stylen der Box für die Tabelle */
        .rc_box_tabelle {
            padding-top: 50px;
            padding-bottom: 50px;
        }

            /* - Stylen der Tabelle */
            #rc_tabelle{
                margin: auto;
                border-collapse: collapse;
            }

            /* - Stylen Tabellenkopf */
            .rc_tabelle_kopf {
                background-color: var(--wulfix_pink);
            }

                /* - Stylen Elemente des Tabellenkopfes */
                .rc_tabelle_kopf tr th {
                    font-size: 1.8vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_weiß);

                    padding: 10px 25px;
                }

                /* - Radien an den Tabellenkopf erstellen */
                .rc_tabelle_kopf tr th:first-child{
                    border-radius: 15px 0 0 0;
                }

                .rc_tabelle_kopf tr th:last-child{
                    border-radius: 0 15px 0 0;
                }

            /* - Stylen Tabellenhauptteil */
            #rc_tabelle_body {background-color:  var(--wulfix_hellgrau_hintergrund);}

                /* - Stylen Elemente in Tabellenhauptteil */
                #rc_tabelle_body tr td {
                    font-size: 1.55vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color:  var(--wulfix_schrift_grau);

                    padding: 2px;
                }

                /* - Zweite Hintergrundfarbe Tabelle */
                .rc_hintergrund2 {
                    background-color: var(--wulfix_hellgrau_textfelder);
                }

                /* - Strichen zwischen Tabellen */
                .rc_strich_tabelle{
                    border-bottom: 1px solid var(--wulfix_abtrennung_tabelle);
                }

                /* - Endstrich der Tabelle */
                .rc_ende_tabelle {
                    border-bottom: 5px solid var(--wulfix_pink);
                }



    }
    



/* - Erstellen Seite Rezeptideen für Longdrinks (52-longdrinks) */

    @media (min-width:1100px) { /* - Rezeptideen Longdrinks: Computer-Version */
            
        /* - Stylen Mainpart der Seite */
        .main_52-longdrinks { background-color: var(--wulfix_hellgrau_hintergrund); }


        /* - Stylen Box Titelbild der Seite */
        .box_bild_longdrinks {display: flex;} /* - Elemente auf flex setzten  */
        
            /* - Festlegen der größe der Bilder */
            .bild_longdrinks1 {width: 50%;} /* - Größe des Bildes auf die hälfte der Seite setzten */
            .bild_longdrinks2 {width: 50%; } /* - Größe des Bildes auf die hälfte der Seite setzten */

        
        /* - Stylen Box Überschrift */
        .rl_box_überschrift {
            display: flex; 
            flex-direction: row; 
            justify-content: center; 
            align-items: center; 
        }
            /* - Stylen der Überschrift */
            .rl_überschrift {
                padding-top: 30px; 
                padding-bottom: 10px; 
            
                /* - Schrifteinstellungen für Überschrift */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_pink);
                font-size: 4em;
                font-weight: 900;
            }

        
        /* - Stylen vom Unterstrich für Überschrift */
        .rl_strich_überschrift {
            width: 44%; 
            height: 5px; 
            border: none; 
            border-radius: 2.5px; 
            background-color: var(--wulfix_pink); 
            margin:auto; 
        }


        /* - Stylen Box Text Erklärung Rezeptideen Cocktails */
        .rl_box_text {
            display: flex; 
            flex-direction: row;
            justify-content: center; 
            padding-top: 35px; 
        }
            /* - Stylen Inhalt Box Text Erklärung Rezeptideen Cocktails */
            .rl_text {
                background-color: var(--wulfix_hellgrau_textfelder);
                width: 90%;
                border-radius: 3.5px;
                border-left: 5px solid var(--wulfix_pink);
            
                padding: 20px; /* - Abstand von Text zum Boxrand rundherum */
            
                text-align: justify; /* - Text soll in Blocksatz geschrieben werden */
            
                /* - Schrifteinstellungen Box Erklärung Rezeptideen Cocktails */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 1.3em;
                font-weight: 500;
                line-height: 150%;
            }
            
            /* - Stylen den Text für den Link */
            .rl_text_link {
                color: var(--wulfix_pink);
                font-weight: 500;
                text-decoration: none;
        }



        /* - Stylen der Box für die Tabelle */
        .rl_box_tabelle {
            padding-top: 50px;
            padding-bottom: 50px;
        }

            /* - Stylen der Tabelle */
            #rl_tabelle{
                margin: auto;
                border-collapse: collapse;
            }

            /* - Stylen Tabellenkopf */
            .rl_tabelle_kopf {
                background-color: var(--wulfix_pink);
            }

                /* - Stylen Elemente des Tabellenkopfes */
                .rl_tabelle_kopf tr th {
                    font-size: 1.6vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_weiß);

                    padding: 10px 25px;
                }

                /* - Radien an den Tabellenkopf erstellen */
                .rl_tabelle_kopf tr th:first-child{
                    border-radius: 15px 0 0 0;
                }

                .rl_tabelle_kopf tr th:last-child{
                    border-radius: 0 15px 0 0;
                }


            /* - Stylen Tabellenhauptteil */
            #rl_tabelle_body {background-color:  var(--wulfix_hellgrau_hintergrund);}

                /* - Stylen Elemente in Tabellenhauptteil */
                #rl_tabelle_body tr td {
                    font-size: 1.4vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_schrift_grau);

                    padding: 2px;
                }

                /* - Zweite Hintergrundfarbe Tabelle */
                .rl_hintergrund2 {
                    background-color: var(--wulfix_hellgrau_textfelder);
                }

                /* - Strichen zwischen Tabellen */
                .rl_strich_tabelle{
                    border-bottom: 1px solid var(--wulfix_abtrennung_tabelle);
                }

                /* - Endstrich der Tabelle */
                .rl_ende_tabelle {
                    border-bottom: 5px solid var(--wulfix_pink);
                }
    }


    @media (max-width:1100px) { /* - Rezeptideen Longdrinks: Handy-Version */

        /* - Stylen Mainpart der Seite */
        .main_52-longdrinks { background-color: var(--wulfix_hellgrau_hintergrund);}


        /* - Stylen Box Titelbild der Seite */
        .box_bild_longdrinks {display: flex;} /* - Elemente auf flex setzten  */

        /* - Festlegen der größe von Bild */
        .bild_longdrinks1 {width: 100%;} /* - Größe des Bildes soll über die ganze Seite gehen */
        .bild_longdrinks2 {display: none;}  /* - Zweites Bild soll in Handy-Version ausgeblendet werden */ 


        /* - Stylen Box Überschrift */
        .rl_box_überschrift {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        
            /* - Stylen der Überschrift */
            .rl_überschrift {
                padding-top: 30px; 
                padding-bottom: 10px; 
            
                /* - Schrifteinstellungen für Überschrift */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_pink);
                font-size: 4.4em;
                font-weight: 900;
            }

        
        /* - Stylen vom Unterstrich für Überschrift */
        .rl_strich_überschrift {
            width: 75%; 
            height: 5px; 
            border: none; 
            border-radius: 2.5px; 
            background-color: var(--wulfix_pink); 
            margin:auto; 
        }


        /* - Stylen Box Text Erklärung Rezeptideen Cocktails */
        .rl_box_text {
            display: flex; 
            flex-direction: row;
            justify-content: center; 
            padding-top: 35px; 
        }
            /* - Stylen Inhalt Box Text Erklärung Rezeptideen Cocktails */
            .rl_text {
                background-color: var(--wulfix_hellgrau_textfelder);
                width: 85%;
                border-radius: 3.5px;
                border-left: 5px solid var(--wulfix_pink);
            
                padding: 20px; /* - Abstand von Text zum Boxrand rundherum */
            
                text-align: justify; /* - Text soll in Blocksatz geschrieben werden */
            
                /* - Schrifteinstellungen Box Erklärung Rezeptideen Cocktails */
                font-family: var(--Standart_Schriftart_Website);
                color: var(--wulfix_schrift_grau);
                font-size: 1.3em;
                font-weight: 500;
                line-height: 150%;
            }
            
            /* - Stylen den Text für den Link */
            .rl_text_link {
                color: var(--wulfix_pink);
                font-weight: 500;
                text-decoration: none;
                }
        
        

        /* - Stylen der Box für die Tabelle */
        .rl_box_tabelle {
            padding-top: 50px;
            padding-bottom: 50px;
        }

            /* - Stylen der Tabelle */
            #rl_tabelle{
                margin: auto;
                border-collapse: collapse;
            }

            /* - Stylen Tabellenkopf */
            .rl_tabelle_kopf {
                background-color: var(--wulfix_pink);
            }

                /* - Stylen Elemente des Tabellenkopfes */
                .rl_tabelle_kopf tr th {
                    font-size: 2.1vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_weiß);

                    padding: 10px 25px;
                }

                /* - Radien an den Tabellenkopf erstellen */
                .rl_tabelle_kopf tr th:first-child{
                    border-radius: 15px 0 0 0;
                }

                .rl_tabelle_kopf tr th:last-child{
                    border-radius: 0 15px 0 0;
                }

            /* - Stylen Tabellenhauptteil */
            #rl_tabelle_body {background-color:  var(--wulfix_hellgrau_hintergrund);}

                /* - Stylen Elemente in Tabellenhauptteil */
                #rl_tabelle_body tr td {
                    font-size: 1.8vw;
                    font-family: var(--Standart_Schriftart_Website);
                    color: var(--wulfix_schrift_grau);

                    padding: 2px;
                }

                /* - Zweite Hintergrundfarbe Tabelle */
                .rl_hintergrund2 {
                    background-color: var(--wulfix_hellgrau_textfelder);
                }

                /* - Strichen zwischen Tabellen */
                .rl_strich_tabelle{
                    border-bottom: 1px solid var(--wulfix_abtrennung_tabelle);
                }

                /* - Endstrich der Tabelle */
                .rl_ende_tabelle {
                    border-bottom: 5px solid var(--wulfix_pink);
                }

    }