dialog.bubbleMenu {
    --outline-color: rgba(var(--color-darksky-rgb),0.5);
    --divider-height: 0.25rem;
    --outline-width: 0.15rem;
    --tail-length: 2rem;
    --tail-width: 1.2rem;
    --tail-pos: 80%;
    --radius: 1rem;
    isolation: isolate;
    position: relative;
    border: 0;
    background-color: transparent;
    box-shadow: 0 0 0 var(--outline-width) var(--outline-color);
    padding: 0;
    border-radius: var(--radius);
    overflow: unset;
    margin: calc(-1 * var(--tail-length) - 2 * var(--outline-width)) 0 0 var(--outline-width);
    min-width: 25ch;
    width: fit-content;
    max-width: 60vw; 
    top: var(--tail-length);
    left: var(--tail-width);
    opacity: 0;
    transition: opacity linear 200ms;
}

    dialog.bubbleMenu > div {
        display: flex;
        flex-direction: column;
        min-width: inherit;
        max-width: inherit;

    }

    dialog.bubbleMenu button {
        box-sizing: border-box;
        --bgcolor: var(--color-forest);
        background-color: var(--bgcolor);
        color: var(--color-snow);
        font-size: 1.1rem;
        font-weight: 400;
        border: 0px;
        user-select: none;
        outline: none;
        min-height: 5rem;
        text-align: left;
        padding: var(--radius) calc(0.5 * var(--radius)) var(--radius) calc(0.5 * var(--radius));
        background-repeat: no-repeat;
        background-position: calc(0.5 * var(--radius)) center;
        background-size: 3.25rem auto;
        cursor: pointer;
    }

        dialog.bubbleMenu button:hover {
            --bgcolor: #00cbb0;
        }

        dialog.bubbleMenu button:first-child {
            border-top-left-radius: var(--radius);
            border-top-right-radius: var(--radius);
        }

        dialog.bubbleMenu button:last-child {
            border-bottom-left-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
        }

        dialog.bubbleMenu button + button {
            margin-top: var(--divider-height);
            box-shadow: 0 calc(-1 * var(--divider-height)) 0 0 var(--outline-color);
        }

    dialog.bubbleMenu.bottomanchored {
        animation: appear 200ms forwards;
        opacity: 1;
        margin-top: calc(-1 * var(--tail-length) - 2 * var(--outline-width));
    }

    dialog.bubbleMenu.topanchored {
        animation: appearTA 200ms forwards;
        margin-top: calc(var(--tail-length) - 2 * var(--outline-width));
        opacity: 1;
    }

@keyframes appear {
    from {
        clip-path: inset(
            100%
            calc( 100% - var(--tail-pos) )
            calc( -1 * var(--tail-length) )
            var(--tail-pos)
            round 50%
        );
    }
    to {
        clip-path: inset(
            calc( -1 * var(--outline-width) )
            calc( -1 * var(--outline-width) )
            calc( -1 * var(--tail-length) - 2 * var(--outline-width) )
            calc( -1 * var(--outline-width) )
        );
    }
}
@keyframes appearTA {
    from {
        clip-path: inset(
            calc( -1 * var(--tail-length) )
            calc( 100% - var(--tail-pos) )
            100%
            var(--tail-pos)
            round 50%
        );
    }
    to {
        clip-path: inset(
            calc( -1 * var(--tail-length) - 2 * var(--outline-width) )
            calc( -1 * var(--outline-width) )
            calc( -1 * var(--outline-width) )
            calc( -1 * var(--outline-width) )
        );
    }
}



dialog.bubbleMenu.topanchored button:first-of-type::before,
dialog.bubbleMenu.topanchored button:first-of-type::after,
dialog.bubbleMenu.bottomanchored button:last-of-type::before,
dialog.bubbleMenu.bottomanchored button:last-of-type::after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    z-index: 5;
    transform: none;
}

dialog.bubbleMenu.bottomanchored button:last-of-type::after {
    top: 100%;
    left: var(--tail-pos);
    border-top-width:var(--tail-length);
    border-left-width:var(--tail-width);
    border-right-width:var(--tail-width);
    border-bottom-width:0;
  /*  border-width: var(--tail-length) var(--tail-width) 0; */
    border-style: solid;
    border-color: var(--bgcolor) transparent;
}

dialog.bubbleMenu.bottomanchored button:last-of-type::before {
    top: 100%;
    left: calc(var(--tail-pos) - var(--outline-width));
    border-width: calc(var(--tail-length) + var(--outline-width)) calc(var(--tail-width) + var(--outline-width)) 0;
    border-style: solid;
    border-color: var(--outline-color) transparent;
}

dialog.bubbleMenu.topanchored button:first-of-type::after {
    top: calc( -1 * var(--tail-length));
    left: var(--tail-pos);
    border-width: 0 var(--tail-width) var(--tail-length);
    border-style: solid;
    border-color: var(--bgcolor) transparent;
}

dialog.bubbleMenu.topanchored button:first-of-type::before {
    top: calc(-1 * (var(--tail-length) + var(--outline-width)));
    left: calc(var(--tail-pos) - var(--outline-width));
    border-width: 0 calc(var(--tail-width) + var(--outline-width)) calc(var(--tail-length) + var(--outline-width));
    border-style: solid;
    border-color: var(--outline-color) transparent;
}

/* spezielle Buttons */
dialog.bubbleMenu button.icon {
    padding-left: 5rem;
}

dialog.bubbleMenu button.icon-warning {
    background-image: url(/img/profile/icn_alert.svg);
}

dialog.bubbleMenu button.icon-block {
    background-image: url(/img/profile/icn_block.svg);
}

dialog.bubbleMenu button.icon-pin {
    background-image: url(/img/icon/pin_white.svg);
    background-size: 1.85rem;
    background-position: 10% center;
}

dialog.bubbleMenu button.icon-pintilted {
    background-image: url(/img/icon/pin_white_45deg.svg);
    background-size: 2.1rem;
    background-position: 10% center;
}