/* Zentrierte und skalierte Darstellung */
[class^="svg_overlay_"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.svg-overlay-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.svg-option {
    cursor: pointer;
    border: 2px solid transparent;
    padding: 5px;
    transition: border-color 0.3s;
}

.svg-option.selected {
    border-color: #007cba;
}

.svg-option img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.cutout_svg_overlay {
    position: relative;
    height: 70vh;
    display: flex;
    align-items: center;
    perspective: 1000px;
}
.cutout_svg_overlay div {
	mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    display: flex;
    align-content: center;
    align-items: center;
	max-height: 100%;
}
/*.cutout_svg_overlay::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 0%;
    width: 70%;
    height: 90%;
    background-color: var(--hh-blue);
    z-index: -1;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
	transform: translateY(var(--scroll-depth, 0px)) rotateX(var(--mouse-rotate-x, 0deg)) rotateY(var(--mouse-rotate-y, 0deg)) scale(1.1);
    transition: transform 0.1s ease-out;
	transform-style: preserve-3d;
}*/

div.thumbnail-mask {
	aspect-ratio: 1/1;
}

.cutout_svg_overlay_1::before, .cutout_svg_overlay_1 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout1.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout1.svg);
}

.cutout_svg_overlay_2::before, .cutout_svg_overlay_2 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout2.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout2.svg);
}

.cutout_svg_overlay_3::before, .cutout_svg_overlay_3 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout3.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout3.svg);
}

.cutout_svg_overlay_4::before, .cutout_svg_overlay_4 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout4.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout4.svg);
}

.cutout_svg_overlay_5::before, .cutout_svg_overlay_5 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout5.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout5.svg);
}

.cutout_svg_overlay_6::before, .cutout_svg_overlay_6 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout6.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout6.svg);
}

.cutout_svg_overlay_7::before, .cutout_svg_overlay_7 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout7.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout7.svg);
}

.cutout_svg_overlay_8::before, .cutout_svg_overlay_8 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout8.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout8.svg);
}

.cutout_svg_overlay_9::before, .cutout_svg_overlay_9 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout9.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout9.svg);
}

.cutout_svg_overlay_10::before, .cutout_svg_overlay_10 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout10.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout10.svg);
}

.cutout_svg_overlay_11::before, .cutout_svg_overlay_11 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout11.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout11.svg);
}

.cutout_svg_overlay_12::before, .cutout_svg_overlay_12 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout12.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout12.svg);
}

.cutout_svg_overlay_13::before, .cutout_svg_overlay_13 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout13.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout13.svg);
}

.cutout_svg_overlay_14::before, .cutout_svg_overlay_14 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout14.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout14.svg);
}

.cutout_svg_overlay_15::before, .cutout_svg_overlay_15 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout15.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout15.svg);
}

.cutout_svg_overlay_16::before, .cutout_svg_overlay_16 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout16.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout16.svg);
}

.cutout_svg_overlay_17::before, .cutout_svg_overlay_17 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout17.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout17.svg);
}

.cutout_svg_overlay_18::before, .cutout_svg_overlay_18 div.thumbnail-mask {
    mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout18.svg);
    -webkit-mask-image: url(/wp-content/themes/hushhush2025/assets/svg/cutout18.svg);
}