:root {
    --cb-badge-width: 200px;
    --cb-badge-width-mobile: 140px;
    --cb-badge-height: 200px;
    --cb-badge-height-mobile: 140px;

    --cb-badge-imagesize-mobile: calc(var(--cb-badge-width-mobile) * 0.4);

    --cb-badge-bg-color: var(--hf-color-prim, #fff);
    --cb-badge-bg-hover-color: var(--hf-color-prim-variant, #fff);
    --cb-badge-content-color: lch(from #000 calc((59.44 - l) * infinity) 0 0);
    --cb-badge-font-size: clamp(15px, -1.75rem + 5.4688vw, 22px);
    --cb-badge-font-size-banner-mobile: 20px;
    --cb-badge-font-size-small: clamp(14px, -0.375rem + 2.3438vw, 16px);
    --cb-badge-title-subtitle-width-calc-mod: 30px;
    --cb-badge-line-height: 1.35em;
    --cb-badge-line-height-small: 1.2em;
    --cb-badge-title-font-weight: 700;
    --cb-badge-subtitle-font-weight: 700;
    --cb-badge-imagesize: 100px;
    /* position */
    --cb-badge-position-left: unset;
    --cb-badge-position-right: clamp(30px, -40px + 10.6vw, 100px);
    --cb-badge-position-top: unset;
    --cb-badge-position-bottom: -35px;
}

/* flash element (div with class="highlight") for diagonale movement */
@keyframes shine {
    0% {
        top: 100%;
        left: -100%;
    }
    100% {
        top: -200%;
        left: 200%;
    }
}

/* zoom animation */
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* vanish animation */
@keyframes vanishInOutRight {
    0%, 90% {
        opacity: 1;
        transform: translateX(0);
    }
    92% {
        opacity: 0;
        transform: translateX(100px);
    }
    93% {
        opacity: 0;
        transform: translateX(0px) scale(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes vanishInOutLeft {
    0%, 90% {
        opacity: 1;
        transform: translateX(0);
    }
    92% {
        opacity: 0;
        transform: translateX(-100px);
    }
    93% {
        opacity: 0;
        transform: translateX(0px) scale(0);
    }
    95% {
        opacity: 1;
        transform: translateX(0) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* global badge container */
.badgecontainer {
    position: relative;
}

.badge {
    position: absolute;
    left: var(--cb-badge-position-left);
    right: var(--cb-badge-position-right);
    top: var(--cb-badge-position-top);
    bottom: var(--cb-badge-position-bottom);
    z-index: 1;

    @media (max-width: 768px) {

        position: relative;
        right: unset;
        top: unset;
        bottom: unset;
        left: unset;
        > .cb-badge {
            margin: 0 auto;
            margin-top: var(--cb-badge-margin-top-mobile,30px);
        }

        &:has(.mobile_banner) {
            position: relative;
            right: auto;
            bottom: auto;
        }
    }
}

.cb-badge {
    position: relative;
    width: var(--cb-badge-width);
    height: var(--cb-badge-height);
    border-radius: 50%;
    z-index: 1;
    text-align: center;

    color: var(--cb-badge-content-color);
    background-color: var(--cb-badge-bg-color);

    display: block;
    overflow: hidden;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

    /* Layout 2 */
    &.cb-badge-layout-2 {
        height: auto;
        border-radius: unset;
        background-color: unset;
    }

    &.outline {
        outline: 5px solid white;
    }

    &.dropshadow {
        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
    }

    .highlight {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 100%;
        height: 250%;
        background-image: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.7) 50%,
                rgba(255, 255, 255, 0) 100%
        );
        pointer-events: none;
        z-index: 1;
        transform: rotate(-45deg);
    }

    /* hover-animation over cb-badge */
    &:hover .highlight {
        animation: shine 3s ease-in-out forwards;
    }

    &.rotate {
        -webkit-transform: rotate(-15deg);
        -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        -o-transform: rotate(-15deg);
        transform: rotate(-15deg);
        transition: transform 0.5s ease 0.2s;

        &:hover {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

    &.zoom {
        &:hover {
            transform: scale(1.1);
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }
    }

    &.switchcolor {
        &:hover {
            background-color: var(--cb-badge-bg-hover-color);
        }
    }

    &.shadow {
        &:hover {
            box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
        }
    }
    /* hover effects - end */

    /* animations - start */
    &.zoom_animation {
        animation: zoomInOut 2s infinite ease-in-out;
    }

    .content {
        .vanish_animation {
            &.right {
                animation: vanishInOutRight 10s infinite ease-in-out;
            }
            &.left {
                animation: vanishInOutLeft 10s infinite ease-in-out;
            }
        }

        position: relative;
        width: 100%;
        height: 100%;
        color: var(--cb-badge-content-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        text-align: center;
        line-height: var(--cb-badge-line-height);

        img, svg {
            max-width: var(--cb-badge-imagesize);
        }

        &.title-pos-reverse {
            flex-direction: column-reverse;
        }

        .content_text {
            width: -moz-calc(100% - var(--cb-badge-title-subtitle-width-calc-mod));
            width: -webkit-calc(100% - var(--cb-badge-title-subtitle-width-calc-mod));
            width: calc(100% - var(--cb-badge-title-subtitle-width-calc-mod));
        }

        .title {
            color: var(--cb-badge-content-color);
            font-weight: normal;
            font-size: var(--cb-badge-font-size);
            display: inline-block;
        }

        .subtitle {
            color: var(--cb-badge-content-color);
            font-weight: var(--cb-badge-subtitle-font-weight);
            font-size: var(--cb-badge-font-size-small);
            margin-top: clamp(14px, -0.375rem + 2.3438vw, 20px);
            display: inline-block;
        }

        [class^="icon-"], [class*=" icon-"] {
            display: none;
            &::before {
                color: var(--cb-badge-content-color);
            }
        }

        /* Layout 0 */
        .cb-badge-layout-0 & {
            .subtitle,
            .title {
                line-height: var(--cb-badge-line-height-small);
            }
        }

        /* Layout 1 */
        .cb-badge-layout-1 & {
            .content_text {
                width: -moz-calc(100% - var(--cb-badge-title-subtitle-width-calc-mod));
                width: -webkit-calc(100% - var(--cb-badge-title-subtitle-width-calc-mod));
                width: calc(100% - var(--cb-badge-title-subtitle-width-calc-mod));
            }
            .title {
                font-size: var(--cb-badge-font-size-small);
                line-height: var(--cb-badge-line-height);
                font-weight: var(--cb-badge-title-font-weight);
            }
        }

        /* Layout 2 */
        .cb-badge-layout-2 & {
            .content_text {
                position: absolute;
                inset: 5%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                .title-pos-reverse & {
                    justify-content: flex-end;
                }
            }
            .title {
                font-size: var(--cb-badge-font-size-small);
                line-height: var(--cb-badge-line-height);
            }
        }

    }

    /* mobile_variant: banner */
    @media (max-width: 768px) {
        width: var(--cb-badge-width-mobile);
        height: var(--cb-badge-height-mobile);

        & .content {
            img, svg {
                max-width: var(--cb-badge-imagesize-mobile);
            }
        }

        &.mobile_banner {
            border-radius: unset;
            width: 100% !important;
            height: auto !important;
            animation: unset !important;

            .content {
                justify-content: space-between;
                text-align: left;
                flex-direction: row !important;
                padding: var(--outer-gutter, 15px);

                .content_text {
                    position: relative !important;
                    inset: unset !important;

                    .title {
                        font-size: var(--cb-badge-font-size-banner-mobile) !important;
                        line-height: var(--cb-badge-line-height-small) !important;
                        width: 100% !important;
                    }

                    .subtitle {
                        font-size: var(--cb-badge-font-size) !important;
                    }
                }

                [class^="icon-"], [class*=" icon-"] {
                    display: block;
                }

                svg,
                img {
                    display: none;
                }
            }

            &.rotate {
                -webkit-transform: rotate(0);
                -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0);
                transition: unset;
            }

            &.zoom {
                &:hover {
                    transform: unset;
                }
            }

            &.shadow {
                &:hover {
                    box-shadow: unset;
                }
            }

            &.outline {
                outline: unset;
            }

            &.dropshadow {
                box-shadow: unset;
            }

            &.cb-badge-layout-2 {
                .content {
                    background-color: var(--cb-badge-bg-color);

                    .title {
                        position: unset;
                    }
                }
            }

        }

        &.mobile_disabled {
            display: none;
        }
    }
}

/* Position innserhalb hero_media */
.cb-hero-media {
    /* position */
    --cb-badge-position-left-hero-media: unset;
    --cb-badge-position-right-hero-media: calc((var(--cb-badge-width) / 2) * -1);
    --cb-badge-position-top-hero-media: unset;
    --cb-badge-position-bottom-hero-media: -35px;

    @media screen and (max-width: 1500px) {
        --cb-badge-position-right-hero-media: -50px;
    }

    @media screen and (max-width: 1400px) {
        --cb-badge-position-right-hero-media: 0;
    }

    @media screen and (min-width: 769px) {
        .badge {
            left: var(--cb-badge-position-left-hero-media);
            right: var(--cb-badge-position-right-hero-media);
            top: var(--cb-badge-position-top-hero-media);
            bottom: var(--cb-badge-position-bottom-hero-media);
        }

        &:has(.badgecontainer) {
            overflow: visible;
        }
    }

    @media screen and (max-width: 768px) {

        .badgecontainer:not(:has(.badge .mobile_banner)) {
            position: absolute;
            top: 0;
            right: 0;
        }

        .badge:not(:has(.mobile_banner)) {
            position: absolute;
            left: unset;
            right: 20px;
            top: 20px;
            bottom: unset;
            z-index: 1;
            margin-top: 0;
        }

        .badgecontainer.hf-fixed-grid {
            border: none;
        }

        .cb-badge {
            margin-top: 0;
            &.mobile_banner {
                margin-top: 0;
            }
        }
    }
}