.printmasonry {
    max-width: 100% !Important;
}

.printgruppe {
    position: relative;
}

.box-item {
    position: relative;
    width: 100%
}

.box-item .printDesc,
.box-item .printImages {
    position: absolute;
    inset: 0px;
    transition: transform ease .3s;
    /*overflow: hidden;*/
    transform-style: preserve-3d;
}

.printImage {
    position: absolute;
    inset: -2px;
    background-size: cover;
    border: 1px solid var(--gridcolor-43)
}

@media (max-width: 567px) {
    .box-item {
        width: 50% !important
    }
}


@media (min-width: 768px) and (max-width: 991px) {
    .box-item {
        width: 50% !important
    }

    .box-item.landscape {
        width: 50% !Important
    }
}

.printgruppe {
    --multiplicator: 1.5;
}

.printgruppe + .printgruppe {
    margin-top: calc(var(--padding) * 2);
}

.scheme {
    position: absolute;
    inset: 0;
    transition: opacity ease .3s;
    overflow: clip;
    background: var(--bgcolor-65);
    border: 1px solid var(--gridcolor-14);
    padding: 5%;
    pointer-events: none !important;
}

.printImages, .printImages * { pointer-events: none}

.scheme h4 {
    hyphens: auto;
    hyphenate-character: '';
}

.printelement {
    perspective: 500px;
    will-change: opacity;
    margin-bottom: 14px !important
}

.printelement { z-index: 1}
.printelement:hover { z-index: 2}

.printDesc {
    opacity: 0;
    /*transform: translateZ(100px);*/
    transition: all ease .3s
}

.printelement:hover .printDesc {
    opacity: 1;
}

.printelement:hover .printImages {
    transform: translateZ(-100px);
}

.printelement:has(.flipPrint:hover) .printImages {
    transform: translateZ(0px);
}
.printelement.hasBack.flipped:has(.flipPrint:hover) .printImages {
    transform: translateZ(0px) rotateY(180deg);
}

.printelement.hasBack.flipped .printImages {
    transform: rotateY(180deg);
}
.printelement.hasBack.flipped:hover .printImages {
    transform: translateZ(-100px) rotateY(180deg);
}

.printelement:has(.flipPrint:hover) .printDesc {
    opacity: 0;
}
.printImage {
    z-index: 0;
}

.printImageBack {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    transform: translateZ(0) rotateY(180deg) !important;
    z-index: -1;
}

.printelement.flipped .printImage {
    z-index: -1;
}

.printelement.flipped .printImageBack {
    z-index: 0;
}

.printImage {
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
.xruler {
    position: absolute;
    left: 0px;
    bottom: 14px;
    right: 0px;
    transition: transform ease .3s;
    transition-delay: .2s;
    transform: translateY(42px) !important;
}

.yruler {
    position: absolute;
    top: 0px;
    right: 14px;
    bottom: 0px;
    transition: transform ease .3s;
    transition-delay: .2s;
    transform: translateX(42px) !important;

}

.ruler > div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    white-space: nowrap;
}

.printelement:hover .xruler {
    transform: translateY(0) !important;
}

.printelement:hover .yruler {
    transform: translateX(0) !important;
}


.yruler.ruler > div {
    transform: translate(-100%, -50%);
}

.xruler > div:before,
.xruler > div:after {
    content: '';
    position: absolute;
    border-top: 1px dashed var(--gridcolor);
    top: 50%;
    width: 1000px
}

.yruler > div:before,
.yruler > div:after {
    content: '';
    position: absolute;
    border-left: 1px dashed var(--gridcolor);
    left: 50%;
    height: 2000px
}

.xruler > div:before {
    right: calc(100% + 14px);
}

.xruler > div:after {
    left: calc(100% + 14px);
}

.yruler > div:before {
    top: calc(100% + 14px);
}

.yruler > div:after {
    bottom: calc(100% + 14px);
}

.flipPrint {
    right: 0;
    bottom: 0;
    position: absolute;
    width: var(--padding);
    aspect-ratio: 1;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bgcolor-86);
    border: 1px solid var(--gridcolor-14)
}

.flipPrint:hover {
    background-color: var(--gridcolor-86)
}

.printelement .flipPrint:hover i {
    transform: translate(4px, 4px);
    color: var(--bgcolor)
}

.printelement.flipped .flipPrint i {
    transform: rotate(180deg)
}

.printelement.flipped .flipPrint:hover i {
    transform: rotate(180deg) translate(4px, 4px)
}

.flipPrint i {
    font-size: 14px;
    color: var(--textcolor);
    transition: all ease .3s;
    transform-origin: center;
}
@media(min-width: 1200px) {
    .flipPrint i {
        font-size: 20px;
}
}

.flipPrint i:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
}