html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    background: transparent;
    color: rgb(255, 247, 199);
    font-family: "Raleway", sans-serif;
    max-width: 100vw;
}

body, .nav-container {
    background: rgb(41, 41, 41);
    z-index: 1;
}

/* ---------------------- NAVBAR -------------------------- */
.logo-item {
    width: 7.8vw;
    height: 5.2vw;
    margin-right: 20vw;
    margin-left: 15vw;

}

.nav-container {
    position: fixed;
    width: 100%;
    height: auto;
    width: auto;
    display: flex;
    justify-content:flex-end;
    flex-direction:row;
    top: -0.781vw;
}

.nav-elementen-gruppe {

    width: 100vw;
    height: auto;
    display: flex;
    justify-content:start;
    align-items: center;
}

.item, .itemnr {
    list-style: none;
    font-size: 0.938vw;
    margin: 0 2vw;
    transition: all 200ms ease-in-out;
}

.item, .item-deko:hover {
    color: aquamarine;
    transition: 500ms;
}

.bxl-facebook:hover, .bxl-instagram:hover, .bxl-tiktok:hover {
    color: aquamarine;
    transition: 500ms;
}

.linie {
    border: 1px solid rgb(255, 247, 199);
    width: 1.042vw;
    margin: 0;
}

.handy-nr {
    font-size: 1.042vw;
    color: rgb(245, 233, 129);
    margin-left: 0.521vw;
}

.tel-logo {
    font-size: 2.083vw;
    margin-right: 0.313vw;
}

.strich {
    border: 1px solid rgba(255, 247, 199, 0.5);
    height: 2.083vw;
    margin: 0 1.563vw;
}

.face {
    font-size: 1.563vw;
    margin:0 0.781vw;
}

.insta {
    font-size: 1.563vw;
    margin:0 0.781vw;
}

.tiktok {
    font-size: 1.563vw;
    margin:0 0.781vw;
}

.item-deko {
    text-decoration: none;
}

/*----------------------- MAIN / SECTION 1 -------------------------------*/

.foto-container {
    margin-top: 2.6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-foto-container {
    width: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-foto {
    width: 23.4vw;
    height: 23.4vw;
}

.massage-foto {
    width: 52vw;
    height: 33.8vw;
    border-radius: 100% 50% 77% 33%;
}

/* -------------------------- MAIN / SECTION 2 -------------------------------- */


.statement-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 10.4vw;
    width: 99vw;
    border-bottom: 1px solid rgba(170, 153, 0, 30%);
    padding-bottom: 4.68vw;
}

.profilbild-container {
    width: auto;
    display: flex;
    justify-content: center;
}

.text-container {
    margin-left: 2.6vw;         /*section 2 bild und text vertical bewegen*/
    margin-right: 7.8vw;        /*section 2 bild und text vertical bewegen*/
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.profilbild {
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    margin-left: 10.4vw;
}

.wer-ist-text {
    color: rgb(250, 249, 244);
    font-size: 3.64vw;
}

.damir-text {
    color: rgb(170, 153, 0);
    font-size: 3.64vw;
    font-weight: bolder;
    margin-bottom: 0.78vw;
}

.ueber-mich {
    font-size: 1.25vw;
    line-height: 1.82vw;
    letter-spacing: 0.15vw;
}
/* -------------------------- MAIN / SECTION 3 -------------------------------- */
.massage-praxis-garbsen-container {
    width: 99vw;
    margin-top: 90px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

}

.bild-text {
    margin-right: 9.9vw;
    width: 30vw;
    height: 30vw;
}

.massage-garbsen-text {
    margin-top: 1.3vw;
    margin-left: 10.4vw;
    margin-right: 4.16vw;
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-right: 5px dotted rgba(170, 153, 0, 30%);
    padding-right: 2.6vw;
}

.schmerzen-loswerden {
    font-size: 16px;
    margin-bottom: 15px;
    color:rgb(250, 249, 244);
    letter-spacing: 2px;
    border-radius: 10px;
    text-align: center;
}

.schmerzen-loswerden, .willkommen, .angebot-umfassung {
    padding: 5px;
    border: 2px dotted rgba(170, 153, 0, 30%);
    border-radius: 10px;
    text-align: center;
}

.willkommen {
    font-size: 16px;
    margin-bottom: 15px;
    color:rgb(250, 249, 244);
    letter-spacing: 2px;
}

.damir-cagla {
    color: rgb(170, 153, 0);
    letter-spacing: 2px;
}

.angebot-umfassung {
    font-size: 16px;
    margin-bottom: 15px;
    letter-spacing: 2px;
    color: white;
}

.umfassung {
    text-align: center;
    color:  rgb(255, 247, 199);
}

.umfassung-2 {
    text-align: center;
    letter-spacing: 2px;
    line-height: 22px;
    border-bottom: 1px solid rgba(170, 153, 0, 0.2);
    margin-top: 10px;
    font-size: 14px;
}

.raumtrennung {

    margin-bottom: 15px;
    color:rgb(255, 255, 255);
    letter-spacing: 1.5px;

}

.gruppe {
    font-size: 16px;
    margin-bottom: 15px;
    color:rgb(255, 255, 255);
    letter-spacing: 1.5px;
    font-weight: bold;

}

.kontainer {
    padding: 5px;
    border-left: 2px dotted rgba(170, 153, 0, 30%);
    border-right: 2px dotted rgba(170, 153, 0, 30%);
    border-top: 2px dotted rgba(170, 153, 0, 30%);
    border-radius: 10px;
    text-align:left;

}

.leerer-container {
    padding-bottom: 100px;
    border-bottom: 1px solid rgba(170, 153, 0, 30%);
}


/* ----------------- MAIN / SECTION 4 - Trigger Punkte ------------------- */

.trigger-punkt-container, .entspannungs-massage-container {
    margin: 5.2vw 5.2vw 2.6vw 5.2vw;
    width: auto;
    height: auto;
    box-shadow: -2px 0px 15px rgb(34, 34, 34);
    display: flex;
    border-radius: 100px 0 0 100px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.5vw;
}

.trigger-bild, .entspannung-bild {
    margin-left: 5vw;
    margin-right: 2.6vw;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
}

.trigger-punkt-text, .entspannung-massage-text {
    border-right: 0.3vw dotted rgba(255, 196, 0, 0.1);
    padding-right: 1.6vw;
}

.trigger-überschrift-1, .schröpf-überschrift-1, .entspannung-überschrift-1, .gutschein-überschrift-1 {
    font-size: 3vw;
    color: aliceblue;
    margin-bottom: 0.8vw;
}

.trigger-überschrift-2, .schröpf-überschrift-2, .entspannung-überschrift-2, .gutschein-überschrift-2 {
    margin-bottom: 1vw;
    font-size: 3vw;
    font-weight: bold;
    color: rgb(170, 153, 0);
}

.trigger-erklärung, .schröpf-erklärung, .entspannung-erklärung, .gutschein-erklärung {
    line-height: 1.5vw;
    letter-spacing: 0.12vw;
    font-size: 1vw;
    text-align: center;
}

.flex-container {
    display: flex;
    align-items:center;
    flex-direction: column;
}

.preis-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 2vw;
    margin-right: 1vw;
    width: 20vw;
    border: 0.3vw dotted rgba(170, 153, 0, 0.3);
    border-radius: 20px;
    margin-top: 2.6vw;
    margin-bottom: 2.6vw;
}

.preis-überschrift {
    margin-top: 0.26vw;
    margin-bottom: 0.26vw;
    font-size: 2.6vw;
    color: aliceblue;
    font-weight: bold;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

.preis-dauer {
    margin-bottom: 0.26vw;
    font-size: 1.56vw;
    color: rgb(184, 165, 0);
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

.preis-überschrift-2 {
    margin-top: 0.26vw;
    margin-bottom: 0.26vw;
    font-size: 2.6vw;
    color: aliceblue;
    font-weight: bold;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

/* ---------- MAIN / SECTION 5 - SchröpfMassage ----------- */

.schröpf-trocken-container, .gutschein-container {
    margin: 5.2vw 5.2vw 2.6vw 5.2vw;
    width: auto;
    height: auto;
    box-shadow: -2px 0px 15px rgb(34, 34, 34);
    display: flex;
    border-radius: 0 100px 100px 0;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.5vw;
}

.schröpf-bild, .gutschein-bild {
    margin-right: 5vw;
    margin-left: 2.6vw;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
    margin-top: 1vw;
}

.schröpf-trocken-text, .gutschein-text {
    border-left: 0.3vw dotted rgba(255, 196, 0, 0.1);
    padding-left: 1.6vw;
}

.preis-container-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 2vw;
    margin-left: 1vw;
    width: 20vw;
    border: 0.3vw dotted rgba(170, 153, 0, 0.3);
    border-radius: 20px;
    margin-top: 2.6vw;
    margin-bottom: 2.6vw;
}

/* ----------------      Footer     ------------------- */
footer {
    background: black;
}

.container {
    display: grid;
    grid-template-columns:12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw;
    grid-template-rows: 2.5vw 2.5vw 2.5vw 2.5vw 2.5vw 2.5vw 2.5vw 2.5vw  ;
    margin-bottom: 10px;
    padding-top: 20px;
}

.item-1 {

    /* border: 1px solid white; */
    grid-area: 1 / 1 / 8 / 3;
}

.item-2 {
    /* border: 1px solid white; */
    grid-area: 1 / 3 / 8 / 5;
}


.item-4 {
    /* border: 1px solid white; */
    grid-area: 1 / 6 / 9 / 9;
}

.item-5 {
    /* border: 1px solid white; */
    grid-area: 8 / 3 / 9 / 7;
}

.footer-text {
    color: white;
    font-size: 0.9vw;
    text-align:start;
    line-height: 2vw;
    letter-spacing: 0.1vw;
}

.mysign {
    font-size: 10px;
    text-align: start;
}

.google {
    width: 26.042vw;
    height: 18.229vw;
}

/*-------------------- MAIN / SECTION 7 - Galerie Fotos ------------------------*/

.galerie-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px;
    padding: 0px 150px;
    box-shadow: 1px 1px 15px rgb(0, 0, 0);
    

}

#galerie-stuhl {
    transition: 0.7s;
    filter: brightness(30%);
    width: 15vw;
    height: 25vw;
    margin: 50px 0;
   border-radius: 20px;
}

#galerie-stuhl:hover {
    transition: 0.3s;
    filter: brightness(100%);
    width: 20vw;
    height: 35vw;
    border-radius: 100px;
}

#galerie-praxis {
    transition: 0.7s;
    filter: brightness(30%);
    width: 15vw;
    height: 25vw;
    margin: 50px 0;
    border-radius: 20px;

}

#galerie-praxis:hover {
    transition: 0.3s;
    filter: brightness(100%);
    width: 20vw;
    height: 35vw;
    border-radius: 100px;
}

/*-------------------- MEDIA SCREEN ------------------------*/
@media screen and (max-width: 1015px) {
    .logo-item {
        width: 60px;
        height: 50px;
        margin-right: 5px;
        margin-left: 5px;
    }

    .nav-container {
        position: fixed;
        width: 100%;
        height: auto;
        width: auto;
        display: flex;
        justify-content:flex-end;
        flex-direction:row;
        top: -0.781vw;
    }

    .nav-elementen-gruppe {

        width: 100vw;
        height: auto;
        display: flex;
        justify-content:start;
        align-items: center;
    }

    .item, .itemnr {
        list-style: none;
        font-size: 18px;
        margin: 0 2vw;
        transition: all 200ms ease-in-out;
    }

    .item, .item-deko:hover {
        color: aquamarine;
        transition: 500ms;
    }

    .bxl-facebook:hover, .bxl-instagram:hover, .bxl-tiktok:hover {
        color: aquamarine;
        transition: 500ms;
    }

    .linie {
        border: 1px solid rgb(255, 247, 199);
        width: 1.042vw;
        margin: 0;
        display: none;
    }

    .handy-nr {
        font-size: 1.042vw;
        color: rgb(245, 233, 129);
        margin-left: 0.521vw;
        display: none;
    }

    .tel-logo {
        font-size: 2.083vw;
        margin-right: 0.313vw;
        display: none;
    }

    .strich {
        border: 1px solid rgba(255, 247, 199, 0.5);
        height: 20px;
        margin: 0 10px;
    }

    .face {
        font-size: 18px;
        margin:0 10px;
    }

    .insta {
        font-size: 18px;
        margin:0 10px;
    }

    .tiktok {
        font-size: 18px;
        margin:0 10px;
    }

    .item-deko {
        text-decoration: none;
    }

    /* --------------   MAIN / SECTION 1   -------------- */

    .foto-container {
        margin-top: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .text-foto-container {
        width: 70vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .text-foto {

        width: 200px;
        height: 200px;
    }

    .massage-foto {
        width: 52vw;
        height: 33.8vw;
        border-radius: 100% 50% 77% 33%;
        display: none;
    }

    /* --------------   MAIN / SECTION 2   -------------- */

    .statement-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10.4vw;
        width: 100vw;
        border-bottom: 1px solid rgba(170, 153, 0, 10%);
        padding-bottom: 60px;

    }

    .text-container {
        margin-left: 2.6vw;         /*section 2 bild und text vertical bewegen*/
        margin-right: 7.8vw;        /*section 2 bild und text vertical bewegen*/
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .profilbild {
        width: 45vw;
        height: 45vw;
        border-radius: 50%;
        margin-right: 40px;
    }

    .wer-ist-text {
        margin-top: 20px;
        color: rgb(250, 249, 244);
        font-size: 28px;
        text-align: center;
    }

    .damir-text {
        color: rgb(170, 153, 0);
        font-size: 28px;
        font-weight: bolder;
        margin-bottom: 0.78vw;
        text-align: center;
    }

    .ueber-mich {
        margin-left: 10px;
        margin-top: 15px;
        font-size: 14px;
        line-height: 15px;
        text-align: center;
        border: 2px dotted rgba(170, 153, 0, 0.3);
        border-radius: 20px;
        padding: 10px;
    }

/* -------------------------- MAIN / SECTION 3 -------------------------------- */
.massage-praxis-garbsen-container {
    width: 99vw;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.bild-text {
    margin-right: 0;
    width: 250px;
    height: 250px;
}

.massage-garbsen-text {
    margin-top: 60px;
    margin-left: 10.4vw;
    margin-right: 4.16vw;
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border-right: 5px dotted rgba(170, 153, 0, 0%);
    padding-right: 2.6vw;
}

.schmerzen-loswerden {
    font-size: 16px;
    margin-bottom: 15px;
    color:rgb(250, 249, 244);
    letter-spacing: 2px;
    border-radius: 10px;
    text-align: center;
}

.schmerzen-loswerden, .willkommen, .angebot-umfassung {
    padding: 5px;
    border: 2px dotted rgba(170, 153, 0, 30%);
    border-radius: 10px;
    text-align: center;
}

.willkommen {
    font-size: 16px;
    margin-bottom: 15px;
    color:rgb(250, 249, 244);
    letter-spacing: 2px;
}

.damir-cagla {
    color: rgb(170, 153, 0);
    letter-spacing: 2px;
}

.angebot-umfassung {
    font-size: 16px;
    margin-bottom: 15px;
    letter-spacing: 2px;
    color: white;
}

.umfassung {
    text-align: center;
    color:  rgb(255, 247, 199);
}

.umfassung-2 {
    text-align: center;
    letter-spacing: 2px;
    line-height: 22px;
    border-bottom: 1px solid rgba(170, 153, 0, 0.2);
    margin-top: 10px;
    font-size: 14px;
}

.raumtrennung {

    margin-bottom: 15px;
    color:rgb(255, 255, 255);
    letter-spacing: 1.5px;

}

.gruppe {
    font-size: 16px;
    margin-bottom: 15px;
    color:rgb(255, 255, 255);
    letter-spacing: 1.5px;
    font-weight: bold;

}

.kontainer {
    padding: 5px;
    border-left: 2px dotted rgba(170, 153, 0, 30%);
    border-right: 2px dotted rgba(170, 153, 0, 30%);
    border-top: 2px dotted rgba(170, 153, 0, 30%);
    border-radius: 10px;
    text-align:left;

}

.leerer-container {
    padding-bottom: 100px;
    border-bottom: 1px solid rgba(170, 153, 0, 30%);
}

/* ----------------- MAIN / SECTION 4 - Trigger Punkte ------------------- */

.trigger-punkt-container, .entspannungs-massage-container {
    margin: 20px 20px 20px 20px;
    width: auto;
    height: auto;
    box-shadow: -2px 0px 15px rgba(34, 34, 34,);
    display: flex;
    border-radius: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.5vw;
}

.trigger-bild, .entspannung-bild {
    margin-top: 15px;
    margin-left: 0;
    margin-right: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.trigger-punkt-text, .entspannung-massage-text {
    border-right: 0.3vw dotted rgba(255, 196, 0, 0.0);
    padding: 0px 20px;
    text-align: center;
}

.trigger-überschrift-1, .schröpf-überschrift-1, .entspannung-überschrift-1, .gutschein-überschrift-1 {
    font-size: 28px;
    color: aliceblue;
    margin-bottom: 0.8vw;
}

.trigger-überschrift-2, .schröpf-überschrift-2, .entspannung-überschrift-2, .gutschein-überschrift-2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: bold;
    color: rgb(170, 153, 0);
}

.trigger-erklärung, .schröpf-erklärung, .entspannung-erklärung, .gutschein-erklärung {
    line-height: 14px;
    letter-spacing: 1px;
    font-size: 13px;
    text-align: center;
}

.flex-container {
    display: flex;
    align-items:center;
    flex-direction: column;
    margin-top: 20px;
}

.preis-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: 2vw;
    margin-right: 1vw;
    width: 250px;
    border: 3px dotted rgba(170, 153, 0, 0.3);
    border-radius: 20px;
    margin-top: 2.6vw;
    margin-bottom: 2.6vw;
}

.preis-überschrift {
    margin-top: 0.26vw;
    margin-bottom: 0.26vw;
    font-size: 25px;
    color: aliceblue;
    font-weight: bold;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

.preis-dauer {
    margin-bottom: 0.26vw;
    font-size: 18px;
    color: rgb(184, 165, 0);
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

.preis-überschrift-2 {
    margin-top: 0.26vw;
    margin-bottom: 0.26vw;
    font-size: 25px;
    color: aliceblue;
    font-weight: bold;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

/* ---------- MAIN / SECTION 5 - SchröpfMassage ----------- */

.schröpf-trocken-container, .gutschein-container {
    margin: 20px 20px 20px 20px;
    width: auto;
    height: auto;
    box-shadow: -2px 0px 15px rgb(34, 34, 34);
    display: flex;
    border-radius: 50px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.5vw;
}

.schröpf-bild, .gutschein-bild {
    margin-top: 15px;
    margin-right: 0;
    margin-left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.schröpf-trocken-text, .gutschein-text {
    border-left: 0.3vw dotted rgba(255, 196, 0, 0);
    padding: 0 20px;
    text-align: center;
}

.preis-container-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-right: 2vw;
    margin-left: 1vw;
    width: 250px;
    border: 3px dotted rgba(170, 153, 0, 0.3);
    border-radius: 20px;
    margin-top: 2.6vw;
    margin-bottom: 2.6vw;
}

/*-------------------- MAIN / SECTION 7 - Galerie Fotos ------------------------*/

.galerie-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-bottom: 100px;
    padding: 0px 150px;
    box-shadow: 1px 1px 15px rgb(0, 0, 0);
    

}

#galerie-stuhl {
    transition: 0.7s;
    filter: brightness(30%);
    width: 40vw;
    height: 50vw;
    margin: 50px 0;
   border-radius: 20px;
}

#galerie-stuhl:hover {
    transition: 0.3s;
    filter: brightness(100%);
    width: 70vw;
    height: 90vw;
    border-radius: 100px;
}

#galerie-praxis {
    transition: 0.7s;
    filter: brightness(30%);
    width: 40vw;
    height: 50vw;
    margin: 50px 0;
    border-radius: 20px;

}

#galerie-praxis:hover {
    transition: 0.3s;
    filter: brightness(100%);
    width: 70vw;
    height: 90vw;
    border-radius: 100px;
}

/*----------------------------- FOOTER ------------------------------------ */

footer {
    background: black;
    padding: 5px 0px;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    margin-bottom: 10px;
    padding-top: 20px;
}

.footer-text {
    color: white;
    font-size: 12px;
    text-align:center;
    line-height: 16px;
    letter-spacing: 0.1vw;
    margin: 5px 0;
}

.item-2 {
    margin-top: 5vw;
}

.google {
    margin: 30px 0;
    width: 300px;
    height: 200px;

}

}