.tkc-bs{
    --tkc-bs-height:130px;
    --tkc-bs-speed:30s;
    --tkc-bs-gap:12px;
    width:100%;
    max-width:100%;
    overflow:hidden;
    box-sizing:border-box;
}
.tkc-bs__viewport{
    width:100%;
    overflow:hidden;
    position:relative;
}
.tkc-bs__track{
    display:flex;
    width:max-content;
    gap:var(--tkc-bs-gap);
    will-change:transform;
    animation:tkc-bs-scroll var(--tkc-bs-speed) linear infinite;
}
.tkc-bs__group{
    display:flex;
    flex:none;
    gap:var(--tkc-bs-gap);
    align-items:center;
}
.tkc-bs__item{
    flex:none;
    height:min(var(--tkc-bs-height), 28vw);
    min-height:70px;
    overflow:hidden;
    border-radius:7px;
    background:#f2f2f2;
}
.tkc-bs__image{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    height:100%!important;
    object-fit:cover;
}
.tkc-bs--pause:hover .tkc-bs__track{
    animation-play-state:paused;
}
@keyframes tkc-bs-scroll{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - (var(--tkc-bs-gap) / 2)),0,0)}
}
@media (prefers-reduced-motion: reduce){
    .tkc-bs__viewport{overflow-x:auto}
    .tkc-bs__track{animation:none}
    .tkc-bs__group[aria-hidden="true"]{display:none}
}

/* Optionale Bildvergrößerung / Lightbox */
.tkc-bs__open{
    display:block;
    height:100%;
    width:auto;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    cursor:zoom-in;
    appearance:none;
}
.tkc-bs__open:focus-visible{
    outline:3px solid currentColor;
    outline-offset:-3px;
}
html.tkc-bs-lightbox-open,
html.tkc-bs-lightbox-open body{
    overflow:hidden!important;
}
.tkc-bs-lightbox{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
    background:rgba(0,0,0,.88);
    backdrop-filter:blur(3px);
}
.tkc-bs-lightbox.is-open{display:flex}
.tkc-bs-lightbox__dialog{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(96vw, 1500px);
    height:min(92vh, 1000px);
}
.tkc-bs-lightbox__media{
    max-width:calc(100% - 110px);
    max-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.tkc-bs-lightbox__image{
    display:block;
    max-width:100%;
    max-height:calc(92vh - 50px);
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 12px 45px rgba(0,0,0,.45);
}
.tkc-bs-lightbox__caption{
    margin-top:10px;
    color:#fff;
    font-size:14px;
    line-height:1.35;
    text-align:center;
}
.tkc-bs-lightbox__close,
.tkc-bs-lightbox__prev,
.tkc-bs-lightbox__next{
    position:absolute;
    z-index:2;
    border:0;
    background:rgba(255,255,255,.14);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, transform .15s ease;
}
.tkc-bs-lightbox__close:hover,
.tkc-bs-lightbox__prev:hover,
.tkc-bs-lightbox__next:hover{
    background:rgba(255,255,255,.28);
}
.tkc-bs-lightbox__close{
    top:0;
    right:0;
    width:46px;
    height:46px;
    border-radius:50%;
    font-size:34px;
    line-height:1;
}
.tkc-bs-lightbox__prev,
.tkc-bs-lightbox__next{
    top:50%;
    width:48px;
    height:64px;
    margin-top:-32px;
    border-radius:8px;
    font-size:52px;
    line-height:1;
}
.tkc-bs-lightbox__prev{left:0}
.tkc-bs-lightbox__next{right:0}
@media (max-width: 700px){
    .tkc-bs-lightbox{padding:12px}
    .tkc-bs-lightbox__dialog{width:100%;height:94vh}
    .tkc-bs-lightbox__media{max-width:100%;max-height:100%}
    .tkc-bs-lightbox__image{max-height:82vh}
    .tkc-bs-lightbox__close{top:0;right:0;width:42px;height:42px;font-size:30px}
    .tkc-bs-lightbox__prev,
    .tkc-bs-lightbox__next{
        top:auto;
        bottom:0;
        width:52px;
        height:48px;
        margin:0;
        font-size:42px;
    }
    .tkc-bs-lightbox__prev{left:calc(50% - 60px)}
    .tkc-bs-lightbox__next{right:calc(50% - 60px)}
}


/* 0.1.2: robuste Lightbox-Steuerung auf Mobilgeräten */
.tkc-bs-lightbox [hidden]{display:none!important}
.tkc-bs-lightbox__close,
.tkc-bs-lightbox__prev,
.tkc-bs-lightbox__next{
    -webkit-appearance:none!important;
    appearance:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    font-family:Arial,Helvetica,sans-serif!important;
    text-indent:0!important;
}
@media (max-width:700px){
    .tkc-bs-lightbox{
        padding:0!important;
        width:100vw!important;
        height:100vh!important;
        height:100dvh!important;
        min-height:100vh!important;
        min-height:100dvh!important;
        overflow:hidden!important;
        touch-action:pan-y!important;
    }
    .tkc-bs-lightbox__dialog{
        position:static!important;
        width:100vw!important;
        height:100vh!important;
        height:100dvh!important;
        max-width:none!important;
        max-height:none!important;
        padding:calc(58px + env(safe-area-inset-top)) 54px calc(28px + env(safe-area-inset-bottom))!important;
        box-sizing:border-box!important;
    }
    .tkc-bs-lightbox__media{
        width:100%!important;
        height:100%!important;
        max-width:100%!important;
        max-height:100%!important;
    }
    .tkc-bs-lightbox__image{
        max-width:100%!important;
        max-height:100%!important;
        width:auto!important;
        height:auto!important;
    }
    .tkc-bs-lightbox__close{
        position:fixed!important;
        top:calc(10px + env(safe-area-inset-top))!important;
        right:calc(10px + env(safe-area-inset-right))!important;
        left:auto!important;
        bottom:auto!important;
        width:48px!important;
        height:48px!important;
        border-radius:50%!important;
        background:rgba(0,0,0,.58)!important;
        border:1px solid rgba(255,255,255,.55)!important;
        color:#fff!important;
        font-size:36px!important;
        font-weight:400!important;
        line-height:46px!important;
        z-index:1000002!important;
        box-shadow:0 2px 14px rgba(0,0,0,.35)!important;
    }
    .tkc-bs-lightbox__prev,
    .tkc-bs-lightbox__next{
        position:fixed!important;
        top:50%!important;
        bottom:auto!important;
        transform:translateY(-50%)!important;
        width:46px!important;
        height:64px!important;
        border-radius:8px!important;
        background:rgba(0,0,0,.58)!important;
        border:1px solid rgba(255,255,255,.45)!important;
        color:#fff!important;
        font-size:46px!important;
        line-height:60px!important;
        z-index:1000002!important;
        box-shadow:0 2px 14px rgba(0,0,0,.35)!important;
    }
    .tkc-bs-lightbox__prev{
        left:calc(6px + env(safe-area-inset-left))!important;
        right:auto!important;
    }
    .tkc-bs-lightbox__next{
        right:calc(6px + env(safe-area-inset-right))!important;
        left:auto!important;
    }
    .tkc-bs-lightbox__caption{
        font-size:13px!important;
        margin-top:7px!important;
    }
}


/* 0.1.3: Mobil-Querformat + Schließen über schwarzen Hintergrund */
@media (max-width:700px), (max-height:560px) and (pointer:coarse){
    .tkc-bs-lightbox{
        padding:0!important;
        width:100vw!important;
        height:100vh!important;
        height:100dvh!important;
        overflow:hidden!important;
    }
    .tkc-bs-lightbox__dialog{
        position:static!important;
        width:100vw!important;
        height:100vh!important;
        height:100dvh!important;
        max-width:none!important;
        max-height:none!important;
        padding:calc(8px + env(safe-area-inset-top)) calc(58px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(58px + env(safe-area-inset-left))!important;
        box-sizing:border-box!important;
    }
    .tkc-bs-lightbox__media{
        width:100%!important;
        height:100%!important;
        max-width:100%!important;
        max-height:100%!important;
    }
    .tkc-bs-lightbox__image{
        max-width:100%!important;
        max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
        width:auto!important;
        height:auto!important;
    }
    .tkc-bs-lightbox__close{
        position:fixed!important;
        top:calc(6px + env(safe-area-inset-top))!important;
        right:calc(6px + env(safe-area-inset-right))!important;
        left:auto!important;
        bottom:auto!important;
        width:44px!important;
        height:44px!important;
        border-radius:50%!important;
        background:rgba(0,0,0,.65)!important;
        border:1px solid rgba(255,255,255,.6)!important;
        color:#fff!important;
        font-size:34px!important;
        line-height:42px!important;
        z-index:1000003!important;
    }
    .tkc-bs-lightbox__prev,
    .tkc-bs-lightbox__next{
        position:fixed!important;
        top:50%!important;
        bottom:auto!important;
        transform:translateY(-50%)!important;
        width:44px!important;
        height:58px!important;
        border-radius:8px!important;
        background:rgba(0,0,0,.65)!important;
        border:1px solid rgba(255,255,255,.5)!important;
        color:#fff!important;
        font-size:43px!important;
        line-height:54px!important;
        z-index:1000003!important;
    }
    .tkc-bs-lightbox__prev{
        left:calc(6px + env(safe-area-inset-left))!important;
        right:auto!important;
    }
    .tkc-bs-lightbox__next{
        right:calc(6px + env(safe-area-inset-right))!important;
        left:auto!important;
    }
    .tkc-bs-lightbox__caption{
        position:absolute!important;
        left:64px!important;
        right:64px!important;
        bottom:calc(5px + env(safe-area-inset-bottom))!important;
        margin:0!important;
        font-size:12px!important;
        line-height:1.2!important;
        text-shadow:0 1px 3px #000!important;
        pointer-events:auto!important;
    }
}