.site-boxes{
    --box-columns:3;
    --box-visible:3;
    --box-gap:24px;
    color:#171717;
    font-family:inherit
}
.site-boxes,.site-boxes *{
    box-sizing:border-box
}
.site-boxes--columns-1{
    --box-columns:1
}
.site-boxes--columns-2{
    --box-columns:2
}
.site-boxes--columns-4{
    --box-columns:4
}
.site-boxes--columns-5{
    --box-columns:5
}
.site-boxes--columns-6{
    --box-columns:6
}
.site-boxes--visible-1{
    --box-visible:1
}
.site-boxes--visible-2{
    --box-visible:2
}
.site-boxes--visible-4{
    --box-visible:4
}
.site-boxes--visible-5{
    --box-visible:5
}
.site-boxes--visible-6{
    --box-visible:6
}
 .site-boxes__track{
    display:grid;
    grid-template-columns:repeat(var(--box-columns),minmax(0,1fr));
    gap:var(--box-gap);
    margin:0;
    padding:4px;
    list-style:none
}
.site-boxes__item{
    min-width:0;
    display:flex
}
.site-box{
    --card-background:#fff;
    --card-text:#171717;
    --card-muted:#555;
    --card-accent:#88211f;
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    height:100%;
    overflow:hidden;
    border:1px solid #dedede;
    border-radius:30px;
    background:var(--card-background);
    color:var(--card-text);
    text-decoration:none;
    font-family:inherit
}
.site-box--cream{
    --card-background:#f8eee3;
    border-color:transparent
}
.site-box--red{
    --card-background:#88211f;
    --card-text:#fff;
    --card-muted:#fff;
    --card-accent:#fff;
    border-color:transparent
}
.site-box__body{
    display:flex;
    flex-direction:column;
    flex:1;
    align-items:flex-start;
    gap:20px;
    padding:30px;
    min-width:0
}
.site-box__number{
    font-size:.875rem;
    color:var(--card-accent);
    line-height:1.4
}
.site-box__eyebrow{
    margin:0;
    padding:5px 12px;
    border:1px solid currentColor;
    border-radius:24px;
    font-size:.6875rem;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:.04em;
    overflow-wrap:anywhere
}
.site-box__headline{
    margin:0;
    font-size:1.625rem;
    font-weight:500;
    line-height:1.2;
    white-space:pre-line;
    overflow-wrap:anywhere
}
.site-box__headline strong{
    font-weight:700
}
.site-box__text,.site-box__quote{
    margin:0;


    white-space:pre-line;
    overflow-wrap:anywhere
}
.site-box__text{
    color:var(--card-muted)
}
.site-box__quote p{
    margin:0
}
.site-box__attribution{
    margin-top:auto;
    padding-top:10px;
    display:grid;
    gap:4px;
    overflow-wrap:anywhere
}
.site-box__author{
    font-size:.875rem;
    line-height:1.5
}
.site-box__meta{
    font-size:.75rem;
    line-height:1.5;
    color:var(--card-muted)
}
.site-box__image-wrap{
    width:100%;
    flex-shrink:0
}
.site-box__image{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover
}
.site-box--image-bottom .site-box__image-wrap{
    margin-top:auto;
    overflow:hidden;
    border-radius:20px
}
.site-box__icon{
    display:block;
    flex-shrink:0;
    width:40px;
    height:40px;
    object-fit:contain
}
.site-box--red .site-box__icon{
    filter:brightness(0) invert(1)
}
.site-box__stars{
    display:flex;
    gap:5px;
    color:var(--card-accent);
    font-size:1.125rem;
    line-height:1.4
}
.site-box__stars>span:not(.is-filled){
    opacity:.25
}

.site-box--linked:focus-visible{
    outline:3px solid var(--card-accent);
    outline-offset:1px
}
.site-boxes__sr{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0
}
 .site-boxes--carousel .site-boxes__track{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - (var(--box-visible) - 1) * var(--box-gap)) / var(--box-visible));
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:4px;
    overscroll-behavior-x:contain
}
.site-boxes--carousel .site-boxes__item{
    scroll-snap-align:start
}
.site-boxes__track:focus-visible{
    outline:2px solid #88211f;
    outline-offset:2px
}
.site-boxes__controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    margin-bottom:16px
}
.site-boxes__controls[hidden]{
    display:none
}
.site-boxes__controls button{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid #dedede;
    border-radius:50%;
    background:#fff;
    color:#88211f;
    font:inherit;
    font-size:1.25rem;
    cursor:pointer
}
.site-boxes__controls button[aria-disabled=true]{
    opacity:.4;
    cursor:default
}
.site-boxes__controls button:focus-visible{
    outline:3px solid #88211f;
    outline-offset:3px
}
.site-boxes__status{
    font-size:.875rem;
    line-height:1.4
}
 @media(max-width:1200px){
    .site-boxes{
        --box-columns:3;
        --box-visible:3
    }
    .site-boxes--columns-1{
        --box-columns:1
    }
    .site-boxes--columns-2{
        --box-columns:2
    }
    .site-boxes--visible-1{
        --box-visible:1
    }
    .site-boxes--visible-2{
        --box-visible:2
    }
}
 @media(max-width:900px){
    .site-boxes{
        --box-columns:2;
        --box-visible:2
    }
    .site-boxes--columns-1{
        --box-columns:1
    }
    .site-boxes--visible-1{
        --box-visible:1
    }
    .site-box__body{
        padding:24px
    }
    .site-box__headline{
        font-size:1.375rem
    }
}
 @media(max-width:600px){
    .site-boxes{
        --box-columns:1;
        --box-visible:1;
        --box-gap:16px
    }
    .site-box__body{
        padding:24px
    }
    .site-box__headline{
        font-size:1.5rem
    }
}
 .site-box--testimonial .site-box__quote{
    font-size:1.125rem;
    line-height:1.55
}
/* Bildgestaltung pro Box. Automatisch erhält das vorherige Layout. */
 .site-box{
    --box-padding:30px;
    --image-radius:0px
}
 .site-box__body{
    padding:var(--box-padding)
}
 .site-box__image-wrap{
    overflow:hidden;
    border-radius:var(--image-radius)
}
 .site-box--image-bottom{
    --image-radius:20px
}
 .site-box--image-bottom .site-box__image-wrap{
    width:calc(100% - 2 * var(--box-padding));
    margin:0 var(--box-padding) var(--box-padding);
    border-radius:var(--image-radius)
}
 .site-box--image-style-inset{
    --image-radius:20px
}
 .site-box--image-style-inset .site-box__image-wrap{
    width:calc(100% - 2 * var(--box-padding));
    margin:var(--box-padding) var(--box-padding) 0
}
 .site-box--image-bottom.site-box--image-style-inset .site-box__image-wrap{
    margin:0 var(--box-padding) var(--box-padding)
}
 .site-box--image-style-edge{
    --image-radius:0px
}
 .site-box--image-style-edge .site-box__image-wrap{
    width:100%;
    margin:0
}
 .site-box--image-radius-0{
    --image-radius:0px
}
 .site-box--image-radius-20{
    --image-radius:20px
}
 .site-box--image-radius-30{
    --image-radius:30px
}
 .site-box__bottom-icon{
    padding:0 var(--box-padding) var(--box-padding)
}
 @media(max-width:900px){
    .site-box{
        --box-padding:24px
    }
}