@media (max-width: 1200px) {
    body {
        position: absolute;
    }

    .sectionMulti {
        flex-direction: column;
        overflow-y: auto;
    }

    .sectionSearch{
        flex-direction: column;
    }

    .navigation {
        margin-left: var(--size-M150px);
    }

    .rightBottom {
        position: relative;
    }

    .pSearch {
        width: var(--size-640px);
    }

    .helalIMG2 {
        display: none;
    }

    .rightIMG2{
        display: none;
    }

    .doenerSVG2 {
        display: none;
    }
}

@media (max-width: 720px) {
    /*
    ******* GENERALLY
    */
    body {
        position: absolute;
    }

    .sectionMulti {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: none;
    }

    .leftSVG {
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        width: var(--size-600px);
    }

    /*
    ******* NAVIGATION
    */

    .navigation {
        margin-left: var(--size-M150px);
    }

    /*
    ******* ABOUT ME
    */

    .doenerSVG{
        display: none;
    }

    .doenerSVG2 {
        display: flex;
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        width: var(--size-650px);
        height: var(--size-750px);
        background-image: url(img/doenerKebab680.svg);
    }

    .tiH3 {
        width: var(--size-400px);
    }

    .rightIMG{
        width: var(--size-230px);
    }

    .rightSide {
        width: var(--size-650px);
    }

    .helalIMG2 {
        display: none;
    }

    .rightIMG2{
        display: none;
    }

    /*
    ******* IMPRESSUM / DATENSCHUTZ
    */

    .rightSideOverflowY {
        width: var(--size-600px);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rightSideOverflowY::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 680px) {
    /*
    ******* GENERALLY
    */

    .sectionMulti {
        flex-direction: column;
        overflow-y: auto;
    }

    .rightBottom {
        position: relative;
    }

    /*
    ******* SEARCH
    */

    .sectionSearch{
        flex-direction: column;
    }

    .navigation {
        margin-left: var(--size-M150px);
    }

    .searchLinks{
        width: var(--size-440px);
    }

    .pSearch {
        width: var(--size-440px);
    }

    /*
    ******* MAIN PAGE
    */

    .mainRightBlock{
        width: var(--size-330px);
    }

    .aIMG{
        width: var(--size-570px);
    }

    .rightSide {
        width: var(--size-600px);
    }

    .mainH3 {
        margin-left: var(--size-580px);
    }

    .pMenu {
        width: var(--size-600px);
    }

    /*
    ******* ABOUT ME
    */

    .leftSide {
        padding: var(--size-10px);
        width: var(--size-580px);
        height: var(--size-700px);
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        background-image: url(img/doenerSpieß700.svg);
    }

    .doenerSVG {
        display: none;
    }

    .doenerSVG2 {
        display: none;
    }

    .tiH3 {
        width: var(--size-360px);
    }

    .rightIMG{
        width: var(--size-230px);
    }

    .rightSide {
        width: var(--size-600px);
    }
}

@media (max-width: 620px) {
    /*
    ******* GENERALLY
    */

    body {
        position: absolute;
    }

    .sectionMulti {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: none;
    }

    .leftSVG {
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        width: var(--size-450px);
    }

    /*
    ******* NAVIGATION
    */

    .navigation {
        margin-left: var(--size-M150px);
    }

    /*
    ******* IMPRESSUM / DATENSCHUTZ
    */

    .rightSideOverflowY {
        width: var(--size-450px);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rightSideOverflowY::-webkit-scrollbar {
        display: none;
    }

    /*
    ******* MAIN PAGE
    */

    .mainRightBlock{
        width: var(--size-330px);
    }

    .aIMG{
        width: var(--size-400px);
    }

    .rightSide {
        width: var(--size-450px);
    }

    .mainH3 {
        margin-left: var(--size-410px);
    }

    .pMenu {
        width: var(--size-450px);
    }

    /*
    ******* ABOUT ME
    */

    .doenerSVG {
        width: var(--size-450px);
    }

    .tiH3 {
        width: var(--size-200px);
    }

    .rightIMG{
        width: var(--size-230px);
    }

    .rightSide {
        width: var(--size-450px);
    }

    .leftSide {
        width: var(--size-435px);
        background-image: url(img/doenerSpieß680.svg);
    } 
}

@media (max-width: 480px) {
    /*
    ******* GENERALLY
    */
    body {
        position: absolute;
    }
    
    .sectionMulti {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: none;
    }

    .leftSVG {
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        width: var(--size-350px);
    }

    /*
    ******* SEARCH
    */

    .sectionSearch{
        flex-direction: column;
    }

    .rightBottom {
        position: relative;
    }

    .searchLinks{
        width: var(--size-300px);
    }

    .pSearch {
        width: var(--size-300px);
    }

    /*
    ******* NAVIGATION
    */

    .navigation {
        display: none;
    }

    .navigationSmall {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid;
        background-color: var(--navigation-color);
        border-color: var(--secondary-color);
        border-radius: var(--size-10px);
        border-width: var(--size-1px);
        width: var(--size-100px);
        height: var(--size-52px);
        top: var(--size-100px);
        z-index: var(--size-100);
        backdrop-filter: blur(var(--size-8px));
        margin-left: var(--size-M150px);
    }

    .navigationSmall ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--size-5px);
        margin: var(--size-0);
        padding: var(--size-0);
    }

    .navigationSmall li {
        list-style-type: none;
    }

    .navigationSmall .btn {
        background-color: var(--navigation-color);
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        border-width: var(--size-1px);
    }

    .navigationSmall img {
        width: var(--size-32px);
        height: var(--size-32px);
    }

    /*
    ******* MAIN PAGE
    */

    .mainRightBlock{
        width: var(--size-330px);
    }

    .aIMG{
        width: var(--size-300px);
    }

    .rightSide {
        width: var(--size-330px);
    }

    .mainH3 {
        margin-left: var(--size-310px);
    }

    .pMenu {
        width: var(--size-350px);
    }

    /*
    ******* IMPRESSUM / DATENSCHUTZ
    */

    .rightSideOverflowY {
        width: var(--size-350px);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rightSideOverflowY::-webkit-scrollbar {
        display: none;
    }

    /*
    ******* MENÜ
    */

    .kategorieBoard {
        margin: var(--size-20px) var(--size-20px);
    }

    .kategorie {
        width: var(--size-300px);
        gap: var(--size-2px);
    }

    .kategorieValue a {
        font-size: var(--size-8px);
    }

    .menuH4{
        font-size: var(--size-20px);
    }

    .groceries h4{
        font-size: var(--size-20px);
    }

    /*
    ******* ABOUT ME
    */

    .leftSide {
        padding: var(--size-10px);
        width: var(--size-380px);
        height: var(--size-700px);
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        background-image: url(img/doenerSpieß680.svg);
    }

    .doenerSVG {
        display: none;
    }

    .tiH3 {
        width: var(--size-400px);
        flex-direction: row;
    }

    .value {
        width: var(--size-400px);
    }

    .rightIMG{
        display: none;
    }

    .rightIMG2{
        display: flex;
        border: solid;
        border-radius: var(--size-10px);
        border-width: var(--size-1px);
        border-color: var(--secondary-color);
        width: var(--size-400px);
        background-image: url(img/aboutUs.svg/2.svg);
    }

    .helalIMG {
        display: none;
    }

    .helalIMG2 {
        display: flex;
        width: var(--size-400px);
        border-radius: var(--size-10px);
    }

    .rightSide {
        width: var(--size-300px);
    }

    .rightTop {
        flex-direction: column;
    }

    .rightMiddle {
        flex-direction: column;
    }

    .court {
        width: var(--size-400px);
    }

    .rightBottom {
        flex-direction: column;
    }

    .p {
        width: var(--size-400px);
    }
}

@media (max-width: 420px) {
    .leftSide {
        padding: var(--size-10px);
        width: var(--size-280px);
        height: var(--size-700px);
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        background-image: url(img/doenerSpieß300.svg);
    }

    .doenerSVG {
        display: none;
    }

    .tiH3 {
        width: var(--size-300px);
        flex-direction: row;
    }

    .value {
        width: var(--size-300px);
    }

    .rightIMG{
        display: none;
    }

    .rightIMG2{
        border: solid;
        border-radius: var(--size-10px);
        border-width: var(--size-1px);
        border-color: var(--secondary-color);
        width: var(--size-300px);
        background-image: url(img/aboutUs.svg/2.svg);
    }

    .helalIMG {
        display: none;
    }

    .helalIMG2 {
        width: var(--size-300px);
        border-radius: var(--size-10px);
    }

    .rightSide {
        width: var(--size-300px);
    }

    .rightTop {
        flex-direction: column;
    }

    .rightMiddle {
        flex-direction: column;
    }

    .court {
        width: var(--size-300px);
    }

    .rightBottom {
        flex-direction: column;
    }

    .p {
        width: var(--size-300px);
    }
}

@media (max-width: 380px) {
    /*
    ******* GENERALLY
    */
    body {
        position: absolute;
    }

    .sectionMulti {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: none;
    }

    .leftSVG {
        border-style: solid;
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        width: var(--size-300px);
    }

    /*
    ******* NAVIGATION
    */

    .navigation {
        display: none;
    }

    .navigationSmall {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid;
        background-color: var(--navigation-color);
        border-color: var(--secondary-color);
        border-radius: var(--size-10px);
        border-width: var(--size-1px);
        width: var(--size-100px);
        height: var(--size-52px);
        top: var(--size-75px);
        z-index: var(--size-100);
        backdrop-filter: blur(var(--size-8px));
        margin-left: var(--size-M50px);
    }

    .navigationSmall ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--size-5px);
        margin: var(--size-0);
        padding: var(--size-0);
    }

    .navigationSmall li {
        list-style-type: none;
    }

    .navigationSmall .btn {
        background-color: var(--navigation-color);
        border-radius: var(--size-10px);
        border-color: var(--secondary-color);
        border-width: var(--size-1px);
    }

    .navigationSmall img {
        width: var(--size-32px);
        height: var(--size-32px);
    }

    /*
    ******* DATENSCHUTZ / IMPRESSUM
    */

    .impressumText h2 {
        font-size: var(--size-18px);
    }

    .rightSideOverflowY {
        width: var(--size-300px);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .rightSideOverflowY::-webkit-scrollbar {
        display: none;
    }

    /*
    ******* MAIN PAGE
    */

    .mainRightBlock{
        width: var(--size-300px);
    }

    .aIMG{
        width: var(--size-250px);
    }

    .rightSide {
        width: var(--size-300px);
    }

    .mainH3 {
        margin-left: var(--size-260px);
    }

    .pMenu {
        width: var(--size-300px);
    }

    /*
    ******* MENÜ
    */

    .kategorieBoard {
        margin: var(--size-10px) var(--size-10px);
    }

    .kategorie {
        width: var(--size-280px);
        gap: var(--size-2px);
    }

    .kategorieValue a {
        font-size: var(--size-8px);
    }

    .menuH4{
        text-align: center;
    }

    .groceries h4{
        font-size: var(--size-20px);
    }
}