/* 3D Coverflow Produktgruppen-Karussell */
.pgk3d {
    --pgk3d-width: clamp(190px, 27vw, 330px);
    --pgk3d-height: calc(var(--pgk3d-width) * 1.18);
    --pgk3d-accent: #222;
    width: 100%;
    margin: 32px 0;
    color: #222;
}
.pgk3d-heading { margin: 0 0 12px; }
.pgk3d-heading h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.25; }
.pgk3d-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--pgk3d-height) + 35px);
    overflow: hidden;
    perspective: 1200px;
    isolation: isolate;
}
.pgk3d-scene {
    position: relative;
    width: min(100%, 900px);
    height: var(--pgk3d-height);
    transform-style: preserve-3d;
}
.pgk3d-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--pgk3d-width);
    height: 100%;
    margin-left: calc(var(--pgk3d-width) / -2);
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 650ms cubic-bezier(.2,.75,.25,1), opacity 650ms ease, filter 650ms ease;
    will-change: transform, opacity;
}
.pgk3d-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(0,0,0,.16);
    backface-visibility: hidden;
}
.pgk3d-link:focus-visible { outline: 3px solid #4c91ff; outline-offset: 4px; }
.pgk3d-image-wrap {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #f5f5f5;
}
.pgk3d-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.pgk3d-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #aaa;
    font-size: 5rem;
    font-weight: 700;
}
.pgk3d-caption { flex: 0 0 auto; padding: 14px 12px 16px; text-align: center; }
.pgk3d-caption h3 { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; }
.pgk3d-caption span { color: #777; font-size: .82rem; }
.pgk3d-arrow {
    position: absolute;
    top: 50%;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #222;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 3px 14px rgba(0,0,0,.12);
}
.pgk3d-prev { left: 8px; }
.pgk3d-next { right: 8px; }
.pgk3d-arrow:hover { background: var(--pgk3d-accent); color: #fff; }
.pgk3d-arrow:focus-visible { outline: 3px solid #4c91ff; outline-offset: 3px; }
.pgk3d-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.pgk3d-dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: #c9c9c9; cursor: pointer;
}
.pgk3d-dot[aria-current="true"] { background: var(--pgk3d-accent); transform: scale(1.3); }
@media (max-width: 600px) {
    .pgk3d { --pgk3d-width: min(66vw, 270px); }
    .pgk3d-stage { min-height: calc(var(--pgk3d-height) + 22px); }
    .pgk3d-arrow { width: 36px; height: 36px; font-size: 25px; }
    .pgk3d-prev { left: 2px; }
    .pgk3d-next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .pgk3d-card { transition: none; }
}