un-img[data-theme=haerer-geruestbau] {
    border: thin solid var(--primary)
}

un-img[data-theme=haerer-geruestbau] img {
    outline: 1px solid var(--primary);
    outline-offset: var(--borders-offset)
}

un-img[data-theme=haerer-geruestbau][data-shape=polygon] {
    background-color: var(--primary);
    clip-path: polygon(2.06% 5.92%,99.46% 1.75%,101% 100%,9.11% 72.92%)
}

un-img {
    display: block;
    width: var(--width,100%);
    min-width: var(--min-width,175px);
    max-width: min(var(--max-width,100%));
    max-height: 100%
}

un-img img {
    outline: 1px solid black;
    width: 100%;
    height: 100%;
    transition-property: all;
    transition-duration: .2s;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;
    object-fit: cover
}

un-img[data-align~=top] {
    margin-bottom: auto
}

un-img[data-align~=bottom] {
    margin-top: auto
}

un-img[data-align~=left] {
    margin-right: auto
}

un-img[data-align~=right] {
    margin-left: auto
}

un-img[data-align~=center-y] {
    margin-top: auto;
    margin-bottom: auto
}

un-img[data-size=small] img {
    max-height: 120px
}

un-img[data-size=large] img {
    max-height: 480px
}

un-img[data-size=full] img {
    max-height: max-content
}

un-img[data-height="120px"] {
    height: 120px
}

un-img[data-height="240px"] {
    height: 240px
}

un-img[data-height="360px"] {
    height: 360px
}

un-img[data-height="480px"] img {
    height: 480px
}

un-img[data-height=auto] img {
    height: fit-content
}

un-img[data-height=full] img {
    height: max-content
}

un-img[data-shape=rounded] img {
    border-radius: 1%
}

un-img[data-shape=circle] img {
    border-radius: 50%
}

un-img[data-shape=polygon] img {
    display: block;
    border: none
}

un-img[data-filter=sepia] img {
    filter: sepia(50%)
}

un-img[data-filter=grey] img {
    filter: grayscale(70%)
}

un-img[data-filter=shadow] img {
    filter: drop-shadow(5px 5px 5px #4f4f4f)
}

un-img[data-hover*=scale] img:hover {
    transform: scale(1.05)
}

un-img[data-hover*=lighten] img:hover {
    filter: brightness(140%)
}

un-img[data-hover*=outline] img:hover {
    outline: 2px solid black
}

un-img[data-hover*=shadow] img:hover {
    box-shadow: rgba(0,0,0,.2) 0 0 8px 4px
}

un-img[data-hover*=opacity] img:hover {
    opacity: .5
}

un-img[data-magnify="1"] {
    position: relative
}

un-img[data-magnify="1"]:active,un-img[data-magnify="1"]:hover {
    cursor: zoom-in;
    display: block
}

un-img[data-magnify="1"]:active .magnify-1,un-img[data-magnify="1"]:hover .magnify-1 {
    opacity: 1
}

un-img[data-magnify="1"] .magnify-1 {
    width: 120px;
    height: 120px;
    box-shadow: 0 5px 10px -2px rgba(0,0,0,.3);
    pointer-events: none;
    position: absolute;
    opacity: 0;
    border: 4px solid #f5f5f5;
    z-index: 99;
    border-radius: 100%;
    display: block;
    transition: opacity .2s
}

un-img[data-magnify="2"] {
    background-position: 50% 50%;
    position: relative;
    cursor: zoom-in
}

un-img[data-magnify="2"] img:hover {
    opacity: 0
}

un-img[data-magnify="2"] img {
    transition: opacity .5s;
    display: block
}

un-img[data-mask=spotlight] img {
    --circle-size: 30%;
    --anim-delay: 0s;
    clip-path: circle(var(--circle-size) at 30% 40%);
    animation: spotlight 20s infinite;
    position: relative;
    animation-delay: var(----anim-delay)
}

un-img[data-mask=spotlight] img:hover {
    animation-play-state: paused
}

un-img[data-mask=spotlight]::before {
    --circle-size: 30%;
    position: absolute;
    /*! top: -5%; */
    content: '';
    width: 100%;
    height: 100%;
    backdrop-filter: brightness(150%);
    clip-path: circle(var(--circle-size) at 30% 40%);
    animation: spotlight 20s infinite/*! animation-delay: 0.1s; */
}

@keyframes spotlight {
    0% {
        clip-path: circle(var(--circle-size) at 30% 40%)
    }

    25% {
        clip-path: circle(var(--circle-size) at 70% 40%)
    }

    50% {
        clip-path: circle(var(--circle-size) at 30% 60%)
    }

    75% {
        clip-path: circle(var(--circle-size) at 70% 60%)
    }
}

un-img[data-page="653bb41a931572f3c62ede16"] img {
    margin-top: 5%
}