div.imageboxgalery{
    margin-top: 2rem;
    background-color: var(--farbe-hintergrund);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap:.7rem 1rem;
    --width-imageboxgalery-item:8rem;
}
div.imageboxgalery>:is(a, a:focus, a:hover){
    all: unset;
    background-color: var(--col-bg-s1);
    border: 1px solid var(--col-bg-s2);
    border-radius: 10px;
    cursor: pointer;
    display:block;
    flex-grow: 1;
    height:2rem;
    max-width: 13rem;
    margin: 0;
    overflow: hidden;
    padding: 0.5rem;
    position: relative;
    transition: var(--zeit-transition);
    width: var(--width-imageboxgalery-item);
}
div.imageboxgalery>a>legend {
    display: block;
    position: absolute;
    color: var(--farbe-text);
    text-align: left;
    font-size: 0.7rem;
    hyphens: manual;
    left: 3.5rem;
    right:.5rem;
    top:1.5rem;
    transform: translateY(-50%);
}
div.imageboxgalery>a>div{
    background: var(--col-pri-l1);
    border-radius: var(--border-radius);
    height: 2rem;
    overflow: hidden;
    width: min-content;
}
div.imageboxgalery>a>div>img{
    height: 1.5rem;
    width: 1.5rem;
    margin: .25rem;
    filter:brightness(0);
    border:none;
}
div.imageboxgalery>:is(a:focus, a:hover)>div{
    transform: scale(1.1);
}
div.imageboxgalery>:is(a:focus, a:hover){
    background: var(--col-pri-l1);
    border-color: var(--col-pri-l1);
}
div.imageboxgalery>:is(a:focus, a:hover)>legend{
    color: var(--col-on-pri-l1);
}
div.imageboxgalery>a:active{
    border-radius: var(--border-radius-active-s);
}
div.imageboxgalery[data-design="small"]>a{
    width: 2rem;
    max-width: 2rem;
}
@keyframes imagebox-intro {
    0%{
        opacity: .5;
        transform: translateY(2rem);

    }
}