* {
                margin: 0;
                padding: 0;
                font-size: 20px;
                font-family: boldMontserra;
            }
            
             :root {
                --background-color: #f6cfff6e;
                --hover-color: black;
                --font-color: #553F59;
                --box-color: #CD9AD9;
                --nav-color: #73605A;
                /* komplementär zu font: #85D713 */
            }
            
            @font-face {
                font-family: boldMontserra;
                src: url(MontserratAlternates-Bold.ttf);
            }
            
            @font-face {
                font-family: regMontserra;
                src: url(MontserratAlternates-Regular.tff);
            }
            
            html {
                height: 100%;
            }
            
            body {
                height: 100%;
                color: var(--font-color);
                background-color: var(--background-color);
            }
            
            body h1 {
                font-family: boldMontserra;
            }
            
            body p {
                font-family: regMontserra;
            }
            
            nav {
                height: 80px;
                background-color: var(--background-color);
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }
            
            nav img {
                height: 65px;
                padding-left: 10px;
            }
            
            nav ul {
                height: 100%;
                display: flex;
                flex-direction: row;
                /* in welcher Richtung die Listenelemente angeordet werden*/
                justify-content: flex-end;
                /* die Elemente in der Liste werden nacheinander rechtsbündig angeordnet*/
                align-items: center;
                list-style: none;
                /*entfernt Aufzählungsstriche*/
                
            }
            
            nav li {
                height: 0%;
                width: 200px;
                text-align: center;
                color: var(--nav-color);
            }
            
            a {
                text-decoration: none;
                color:#553F59
            }
            
            a:hover {
                text-decoration: underline;
                /* wenn man mit der Maus über die Menülinks geht wird der Text unterstrichen */
                color: var(--hover-color);
            }
            
            .toggle_button {
                width: 30px;
                height: 23px;
                position: absolute;
                top: 25px;
                right: 25px;
                display: none;
                flex-direction: column;
                justify-content: space-between;
            }
            
            .bar {
                height: 4px;
                width: 100%;
                background: black;
                border-radius: 100px;
            }
            
            nav input[type="checkbox"] {
                display: none;
                /*die Checkbox wird nicht angezeigt (Kästchen mit Häckchen)*/
            }
            
            @media(max-width: 850px) {
                .toggle_button {
                    display: flex;
                }
                nav ul {
                    background-color: var(--box-color);
                    height: min-content;
                    width: 100%;
                    display: none;
                    position: absolute;
                    top: 80px;
                }
                nav li {
                    height: min-content;
                    width: 100%;
                    padding: 15px;
                }
                nav ul a {
                    padding: 30px 0;
                }
                #toggle_button:checked~ul {
                    /*wenn toogle_button "checked" ist, also die (nicht sichtbare) Checkbox angeglickt wird, dann erscheint das Nav Menü*/
                    display: block;
                }
            }
            /* Ende navbar*/
            /* Start Footer*/ 
                .footer {
                    margin: 3vw;
                    text-align:justify;
                    padding-bottom: 3vw;
                }
                footer {

                    height: 40px;
                    background-color: var(--background-color);
                    align-items: left;
                    padding-top: 20px;
                  
                }
                footer a {
                    margin-left: 4vw;
                }
              
             



            /* Start Geschäft*/
            
            .G h1 {
                /* Überschrift*/
                font-size: 8vw;
                text-shadow: 3px 3px 2px #87878741;
                padding-top: 40px;
                padding-left: 40PX;
                text-align: left;
            }
            
            .G h3 {
                color: #816985;
                font-size: 4vw;
                padding-right: 50px;
                text-align: right;
            }
            
            .geschaeft-box1 {
                /* Hauptcontainer Desktop*/
                display: flex;
                justify-content: space-around;
                align-items: center;
                gap: 2vw;
                /* Lücke zwischen den Elementen im Container soll 100px sein*/
                padding-top: 50px;
                flex-wrap: wrap-reverse;
                /*linkes Element wird jetzt UNTER rechten Element angezeigt*/
            }
            
            .geschaeft-box1 img {
                width: 40vw;
                border: 1vw solid var(--box-color);
                /* macht einen Rahmen um das Bild*/
                max-width: 90%;
                margin-left: 20px;
            }
            
            .textA {
                width: 50vw;
                max-width: 85%;
            }
            
            .textA p {
                text-align: left;
                /* Text wird in Blocksatz angezeigt*/
                line-height: 140%;
                /* vergrößert Zeilenabstand*/
                font-size: 2vw;
            }
            
            .geschaeft-box2 {
                /* Hauptcontainer Desktop 2. Zeile*/
                display: flex;
                justify-content: space-around;
                align-items: center;
                gap: 30px;
                /* Lücke zwischen den Elementen im Container soll 100px sein*/
                padding: 60px 50px 0px 50px;
                flex-wrap: wrap;
                padding-bottom: 10vw;
            }
            
            .geschaeft-box2 img {
                width: 400px;
                border: 1vw solid var(--box-color);
                /* macht einen Rahmen um das Bild*/
                max-width: 90%;
            }
            
            .map-frame {
                width: 40vw;
                height: 400px;
                border: 1vw solid var(--box-color);
                /* macht einen Rahmen um das Bild*/
                max-width: 95%;
            }
            
            .textO {
                height: min-content;
                display: flex;
                flex-direction: column;
                gap: 40px;
                justify-content: space-between;
            }
            .box3 {
                height: min-content;
                display: flex;
                flex-direction: column;
                gap: 40px;
                justify-content: space-between;
            }
            
            .textO h3 {
                font-size: 4vw;
                text-shadow: 3px 3px 2px #87878741;
                margin-left: 15px;
            }
            .box3 h3 {
                font-size: 4vw;
                text-shadow: 3px 3px 2px #87878741;
                margin-left: 15px;
            }
            
            .textO p {
                font-family: boldMontserra;
            }
            .box3 p {
                font-family: boldMontserra;
            }
            
            .tableO {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;
                padding-top: 15px;
                height: 80%;
                width: 45vw;
            }
            .table4 {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;
                padding-top: 15px;
                height: 80%;
                width: 45vw;
            }
            
            .tableO ul {
                list-style: none;
                align-items: center;
            }
            .table4 ul {
                list-style: none;
                align-items: center;
            }
            
            .tableO li {
                padding: 5px;
                white-space: nowrap;
                font-size: 2vw;
            }
            .table4 li {
                padding: 5px;
                white-space: nowrap;
                font-size: 2vw;
            }
            
            .textO p {
                padding-left: 20px;
                font-size: 2vw;
            }
            .box3 p {
                padding-left: 20px;
                font-size: 2vw;
            }
            /* Start Naeh*/
            
            .text1 {
                padding-top: 60px;
                display: flex;
                justify-content: space-around;
                align-items: flex-start;
                gap: 10vw;
            }
            
            .text1 h3 {
                text-align: center;
                width: 40vw;
                
                font-size: 3vw;
                padding-left: 4vw;
                padding-top: 3vh;
                text-shadow: 3px 3px 2px #87878741;
            }
            
            .text1 ul {
                list-style: circle;
                align-items: left;
                width: 50vw;
               
            }
            
            .text1 li {
                padding: 5px;
                white-space: wrap;
                font-size: 2vw;
            }
            
            .table {
                padding: 2vw;
            }
            .table li {
                font-size: 2vw;
                text-align: left;
                font-family: regMontserra;
            }
            .tableend {
                list-style: none;
            }
            



            /* Start Über mich*/

            .uebermichcont1 {
                padding: 8vh 3vw 8vh 1vw;
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: min-content;
                gap: 2vw;
            }
            .uebermichcont1 p {
                font-family: regMontserra;
                font-size: 2vw;
                line-height: 140%;
            }
            .uebermichcont1 img {
                
                width: 400px;
                max-width: 95%;
                height: min-content;
                border: none; 
            
               
            }
            .uebermichconttext {
                width: 60vw;
                height: min-content;
            }
            
/* Start Index*/
            .index {
                font-size: 4vw;
                font-family: boldMontserra;
                text-align: center;
                padding: 2vw;
                text-shadow: 3px 3px 2px #87878741;
                background-color: var(--box-color);
            }
            .index2 {
                font-size: 55px;
                font-family: boldMontserra;
                
                text-align: center;
                text-shadow: 3px 3px 2px #87878741;
            }
            .adresse h3 {
                font-size: 4vw;
                text-shadow: 3px 3px 2px #87878741;
                margin-left: 15px;
            }
            .index-box2 {
                display: flex;
                padding-top: 70px;
                gap: 3vw;
            }
            .index-box2 h3 {
                font-size: 4vw;
            }
            .adresse {
                width: 50vw;
            }
            .adresse p {
                font-size: 2vw;
                font-family: boldMontserra;
                margin: 40px 0px 0px 30px;
                line-height: 140%;
            }
            .img1 img {
                padding-top: 2vw;
                width: 100%;
                height: 400px;
                object-fit: cover;
                object-position: center;
            }

            @media only screen and (max-device-width: 1130px) {
                .geschaeft-box1 {
                    gap: 30px;
                    padding-top: 15px;
                    padding-bottom: 10px;
                }
                .textA {
                    padding-top: 10px;
                    width: 90vw;
                }
                .textA p {
                    text-align: left;
                    /* Text wird in Blocksatz angezeigt*/
                    line-height: 140%;
                    /* vergrößert Zeilenabstand*/
                    font-size: 3vw;
                }
                .G h1 {
                    font-size: 9vw;
                    /* vw = viewport-width in %Breite des Browserfensters - in dem Fall 10%*/
                    padding-top: 15px;
                }
                .G h3 {
                    font-size: 5vw;
                }
                .geschaeft-box1 img {
                    width: 90vw;
                    border: 1vw solid var(--box-color);
                    /* macht einen Rahmen um das Bild*/
                    max-width: 85%;
                }
                .geschaeft-box2 {
                    gap: 70px;
                    padding-top: 90px;
                    flex-direction: column;
                    padding-bottom: 3vw;
                }
                .geschaeft-box2 img {
                    width: 400px;
                    border: 1vw solid var(--box-color);
                    /* macht einen Rahmen um das Bild*/
                    max-width: 85%;
                }
                .map-frame {
                    width: 90vw;
                    height: 500px;
                   
                }
                .textO {
                    width: 90%;
                    padding-bottom: 30px;
                    gap: 20px;
                    justify-content: center;
                }
                .box3 {
                    width: 90vw;
                    padding-bottom: 30px;
                    gap: 20px;
                    justify-content: center;
                   
                }
                .textO h3 {
                    font-size: 6vw;
                    margin-left: 5px;
                }
                .box3 h3 {
                    font-size: 5vw;
                    margin: 1vw 0vw 0vw 2vw ;
                    
                }
                .tableO {
                    justify-content: space-between;
                    width: 84vw;
                    height: 100%;
                }
                .table4 {
                    justify-content: space-between;
                    width: 80vw;
                    height: 100%;
                    margin: 1vw 0vw 0vw 2vw ;
                }
                .table4 li {
                    font-size: 3vw;
                }
                .box3 p {
                    font-size: 3vw;
                }

                /* Start Naeh*/
                .text1 {
                    padding-top: 3vw;
                    gap: 20px;
                    flex-direction: column;
                    align-items: center;
                }
                .text1 h3 {
                    font-size: 5vw;
                    text-align: center;
                    padding-top: 2vh;
                    margin-left: 0px;
                    width: 95%;
                }
                .text1 ul {
                    width: 90vw;
                }
        

           
            /* Start Über mich*/

            .uebermichcont1 {
                padding: 3vh 0vw 4vh 0vw;
                display: flex;
                flex-direction: column;
                gap: 3vw;
                justify-content: space-around;
                align-items: center;
                height: min-content;
                
             
            }
            .uebermichcont1 p {
                font-size: 3vw;
            }
            
            .uebermichconttext {
                padding-top: 3vw;
                width: 90vw;
                
            }
            .table li {
                font-size: 3vw;
            }
            .index {
                font-size: 6vw;
            }
            .index2 {
                font-size: 4vw;
            }
            .index-box2 {
                flex-direction: column;
            }
            .index-box2 h3 {
    font-size: 5vw;
            }
            .adresse {
                width: 90vw;
            }
            .adresse p {
                font-size: 3vw;
            }
        }
            
            @media only screen and (max-device-width: 830px) {
                .textO {
                    padding-bottom: 0px;
                }
                .box3 {
                    padding-bottom: 0px;
                }
                .textO p {
                    font-size: 4vw;
                    padding-bottom: 20px;
                }
                .box3 p {
                    font-size: 4vw;
                    padding-bottom: 20px;
                }
                .tableO li {
                    font-size: 4vw;
                }
                .tableO {
                    padding-left: -20px;
                }
                .table4 li {
                    font-size: 4vw;
                }
                .table4 {
                    padding-left: -20px;
                }
                .geschaeft-box2 {
                    padding: 60px 70px 0px 14px;
                    gap: 35px;
                }
            }
            
            @media only screen and (max-device-width: 560px) {
                .G h1 {
                    padding-top: 10px;
                }
                .G h3 {
                    padding-right: 30px;
                    padding-bottom: 5px;
                }
                .textO h3 {
                    font-size: 8vw;
                }
                .box3 h3 {
                    font-size: 8vw;
                }
                .textO {
                    height: min-content;
                    min-height: 90%;
                    gap: 0px;
                }
                .box3 {
                    height: min-content;
                    min-height: 90%;
                    gap: 0px;
                }
                .textO p {
                    padding-left: 12px;
                    font-size: 4vw;
                    padding-bottom: 2vw;
                }
                .box3 p {
                    padding-left: 12px;
                    font-size: 4vw;
                    padding-bottom: 2vw;
                }
                .tableO li {
                    margin: 7px;
                    font-size: 4vw;
                }
                .tableO {
                    padding-bottom: 7px;
                }
                .table4 {
                    padding-bottom: 7px;
                }
                .geschaeft-box2 {
                    padding: 25px 10px 0px 10px;
                    gap: 10px;
                }
                .map-frame {
                    height: 350px;
                }
                /* Start Naeh*/
                .text1 h3 {
                    font-size: 7vw;
                }
                .text1 {
                    gap: 15px;
                    padding-bottom: 30px;
                    padding-top: 20px;
                }
                .text1 p {
                    padding-left: 12px;
                }
                .table1 li {
                    margin: 7px;
                    font-size: 4vw;
                }
                .table1 {
                    padding-bottom: 7px;
                }
            }
            /* Ende Geschäft*/
            @media only screen and (max-device-width: 560px) {
            .index {
                font-size: 30px;
                background-color: var(--box-color)
            }
            .index2 {
                font-size: 20px;
                padding-top: 10px;
                padding-bottom: 1vw;

            }
        .index-box2 h3 {
            font-size: 8vw;
        }
        }