@media (max-width: 768px){
    body {
        background: #ffffff !important;
    }

    #designTypeForm {
        display: none !important;
    }

    .vertical-switch {
        display: none !important;
    }

    .infoMessage {
        display: none;
        visibility: hidden;
        opacity: 0;
    }

    #previewComplete {
        display: none;
    }

    #productDetailsDesktop {
        display: none;
    }

    #footerBtn {
        display: none;
    }

    #start {
        padding: 0;
    }

    #sidebar {
        position: fixed;
        width: 0;
        height: 0;
        display: block;
        z-index: 1;
        left: -1px;
        top: -1px;
    }

    #middlebar {
        position: relative;
        width: 74%;
        float: none;
        background: transparent;
        min-height: auto;
        display: block;
    }

    #canvasDivBackgroundImg {
        width: 100%;
        height: auto;
    }

    #clipartsPopup .popup-content .container {
        padding: 10px 10px;
    }

    .clipart-item {
        border-bottom: solid 1px #dadada;
    }

    #svgColorBtn {
        float: left;
        width: 38px;
        height: 38px;
        margin-bottom: 6px;
    }

    .clipartItem {
        float: left;
        width: calc((100% / 2) - 10px);
        height: 160px;
        display: flex;
        padding: 12px;
        justify-content: center;
        margin: 5px;
    }

    .colorpicker, .colorpicker input {
        border-radius: 0;
        margin: 5px 10px 0 0;
        width: 60px;
    }
    .user-color-popup {
        display: none;
        background: #fff;
        border-top: 1px solid #dadada;
        height: auto;
        padding: 15px 15px 15px 15px;
        position: fixed;
        width: 100%;
        z-index: 10000000;
        bottom: 0px;
    }

    #productsPopup.popup-overlay, #clipartsPopup.popup-overlay {
        background: transparent;
    }

    #productsPopup .close-btn, #clipartsPopup .close-btn {
        top: -40px;
        right: 10px;
        background: #000000;
        color: #ffffff;
    }

    #productsPopup .popup-content, #clipartsPopup .popup-content {
        position: relative;
        width: 100vw;
        height: calc(100vh - 60px);
        background: #ffffff;
        border-radius: 0;
        top: 60px;
        left: 0;
        max-width: 100vw;
        max-height: 100vh;
        padding: 20px 15px 40px 15px !important;
        border-top: solid 1px #dadada;
    }

    #productInfo .accordion-body {
        padding: 0 20px;
    }

    #cartContainer {
        display: none;
        flex-flow: column;
        justify-content: center;
        position: fixed;
        width: 100vw;
        height: auto;
        top: 60px;
        left: 0;
        z-index: 10000;
        background: #ffffff;
        border-radius: 0;
    }

    #productInfo h2 {
        font-size: 20px;
    }

    .accordion-body {
        padding-left: 0;
        padding-right: 0;
    }

    #colorsDiv {
        display: none;
        background: #fff;
        border-radius: 6px;
        height: 60vh;
        padding: 0;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        z-index: 114;
        top: auto;
    }

    #toggleColorsDivBtn {
        width: 60px;
        height: 60px;
        margin-bottom: 6px;
        background: #ffffff;
        border-radius: 50%;
        text-align: center;
        padding: 0;
    }

    #toggleProductsDivBtn {
        width: 60px;
        height: 60px;
        margin-bottom: 6px;
        background: #ffffff;
        border-radius: 50%;
        text-align: center;
        padding: 0;
    }

    #textileColorSwitchMobile {
        bottom: 20px !important;
        display: block;
        font-size: 13px;
        height: auto !important;
        right: 10px !important;
        position: absolute !important;
        width: 60px !important;
        z-index: 110;
        text-align: center;
    }

    #textileSwitchMobile {
        bottom: 20px !important;
        display: block;
        font-size: 13px;
        height: auto !important;
        left: 10px !important;
        position: absolute !important;
        width: 60px !important;
        z-index: 110;
        text-align: center;
    }

    #desktopCanvasSaveBtn {
        display: none !important;
    }

    #desktopCanvasControls {
        display: none !important;
    }

    #createCanvasBtn {
        display: none !important;
    }

    .btn.sideswitch {
        width: auto;
        padding: 6px 8px;
        font-size: 12px;
    }

    #textMenu {
        padding: 8px 10px 2px 10px;
        width: 96%;
        position: fixed;
        left: 2%;
        top: 70px;
        z-index: 2;
        border-radius: 10px;
        height: auto;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: solid 1px #dadada !important;
        background: #ffffff !important;
    }

    #textMenu .btn, #textMenu input {
        float: left;
        width: auto;
        height: 40px;
        margin-bottom: 6px;
    }

    #textMenu input {
        margin-bottom: 9px;
    }

    #textMenu #textColorBtn, #textMenu #textColorBtn {
        width: 48px;
    }

    #textColorBtn {
        height: 30px !important;
        width: 30px !important;
        margin: 4px 6px 0 6px;
    }

    .spacerWithLine {
        background: #dadada;
        display: flex;
        height: 1px;
        margin: 20px 0 20px 5%;
        width: 90%;
    }

    #mobileCanvasControls {
        position: fixed;
        height: auto;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 100;
        background: #ffffff;
    }

    .mainDivSection {
        margin-top: 60px;
        width: 100%;
    }

    #canvasDivMain {
        width: 100vw;
        height: 100vw;
        position: relative;
        background-size: cover;
        margin: 0 auto;
    }
    #desktopCanvasEditBtn, #canvasControls {
        display: none !important;
    }

    #sideSwitchControls {
        width: 100%;
        height: auto;
        text-align: center;
        padding: 10px 20px 0 20px;
        position: relative;
        top: auto;
        right: auto;
        left: 0;
        background: transparent;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    #addPrint {
        border-radius: 3px;
        color: #fff;
        height: 54px;
        left: 28vw;
        position: absolute;
        top: -4px;
        width: 40%;
        z-index: 1;
    }
    #buildMobileDiv {
        background: #f9f9f9;
        border: 1px solid #dadada;
        border-radius: 6px;
        bottom: auto;
        height: 46px;
        left: 3vw;
        padding: 0;
        position: relative;
        width: 94vw;
    }

    #cartMobileDiv {
        height: 66px;
        left: 3vw;
        padding: 0;
        position: relative;
        width: 94vw;
    }

    #variantInputFieldsDiv {
        border-radius: 6px 6px 0 0;
        height: 100vh;
        min-height: 200px;
        margin-top: 0;
        padding: 0;
        width: 100vw;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1000;
    }

    #motiv-edit-btn-div-mobile {
        background: #fff;
        border-radius: 0;
        border-top: 1px solid #dadada;
        top: 30vh;
        height: 70vh;
        padding: 10px;
        position: fixed;
        left: 0;
        width: 100vw;
        z-index: 112;
    }

    #motiv-edit-btn-div-mobile .btn:first-child {
        background: #fff;
        border: 1px solid #dadada;
        border-radius: 3px 0 0 0;
        height: 60px;
        margin: 0;
        position: absolute;
        right: 0;
        top: -60px;
        width: 60px;
        padding: 0;
    }

    #motiv-edit-btn-div-mobile .btn {
        width: 50%;
        margin: 0;
        float: left;
    }

    .btnSvgIconDiv {
        background: #f0f0f0;
        border-radius: 50%;
        height: 80px;
        line-height: 80px;
        margin: 0 auto 6px;
        padding: 0;
        width: 80px;
    }

    #svgEditMenu {
        /*padding: 6px 6px 0px 6px;*/
        /*width: auto;*/
        /*position: absolute;*/
        /*right: 10px;*/
        /*top: 70px;*/
        /*z-index: 2;*/
        padding: 6px 6px 0px 6px;
        width: 50px;
        position: absolute;
        right: 0;
        top: 70px;
        z-index: 2;
        border-radius: 10px 0 0 10px !important;
    }

    #svgFillColor {
        border-radius: 50%;
        height: 38px;
        width: 38px;
        border: 0;
        padding: 0;
    }

    #textEditMenu {
        padding: 10px;
        width: 100vw;
        position: absolute;
        right: 0;
        z-index: 100;
        top: 40vh;
        height: 60vh;
        border-radius: 0 !important;
    }

    #addTextPopup {
        border-radius: 10px;
        left: 5vw;
        padding: 20px;
        position: fixed;
        top: 40vw;
        width: 90vw;
        z-index: 10000;
    }

    #addFontPopup {
        /*border-radius: 0;*/
        /*left: 0;*/
        /*padding: 20px;*/
        /*position: fixed;*/
        /*top: 122px;*/
        /*width: 100vw;*/
        /*z-index: 10000;*/
        /*height: 400px;*/

        border-radius: 10px;
        left: 2%;
        padding: 20px;
        position: fixed;
        bottom: 20px;
        width: 96vw;
        z-index: 10000;
        height: 400px;
        top: auto;
        background: #ffffff;
    }

    .fontBtnDivBtn {
        padding: 10px 10px !important;
    }

    #fontBtnDiv {
        width: 100%;
        height: 300px;
        overflow-x: auto;
    }

    #fontBtnDivCloseBtn {
        right: 10px !important;
        top: -20px !important;
    }

    #changeDiameter {
        border-radius: 10px;
        left: 2vw;
        padding: 20px;
        position: fixed;
        bottom: 60px;
        width: 96vw;
        z-index: 10000;
    }

    .striped-border::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px; /* Border-Breite */
        background: repeating-linear-gradient(
                45deg,     /* oder 90deg, falls horizontal/vertikal gewünscht */
                black 0 6px,
                white 6px 12px
        );

        /* "Loch" in der Mitte erzeugen */
        mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
        -webkit-mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);

        mask-composite: exclude;
        -webkit-mask-composite: xor;
        border-radius: 6px;
    }
}