/* SC Würfelkacheln: der Würfel rollt in die Richtung, aus der die Maus kommt (Richtung setzt wuerfel.js) */
.scwk-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; width: 100%; max-width: 1412px; margin: 0 auto; }
.scwk-row > .scwk { flex: 0 0 calc((100% - 12px) / 5); margin: 0; }
@media (max-width: 799px) { .scwk-row > .scwk { flex-basis: calc((100% - 6px) / 3); } }
@media (max-width: 479px) { .scwk-row > .scwk { flex-basis: calc((100% - 3px) / 2); } }

.scwk { --half: 50cqw; display: block; position: relative; perspective: 650px; aspect-ratio: 280 / 318; width: 100%; max-width: 280px; margin: 0 auto; container-type: inline-size; text-decoration: none !important; color: inherit; outline: none; -webkit-tap-highlight-color: transparent; }
.scwk.d-t, .scwk.d-b { --half: 56.79cqw; }
.scwk .scwk-inner { display: block; position: relative; width: 100%; height: 100%; transition: transform var(--scwk-speed, 1s) cubic-bezier(.45, 0, .55, 1); transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--half))); }
.scwk.flipped .scwk-inner, .scwk:focus-visible .scwk-inner { transform: translateZ(calc(-1 * var(--half))) rotateY(-90deg); }
.scwk.d-l.flipped .scwk-inner, .scwk.d-l:focus-visible .scwk-inner { transform: translateZ(calc(-1 * var(--half))) rotateY(90deg); }
.scwk.d-t.flipped .scwk-inner, .scwk.d-t:focus-visible .scwk-inner { transform: translateZ(calc(-1 * var(--half))) rotateX(-90deg); }
.scwk.d-b.flipped .scwk-inner, .scwk.d-b:focus-visible .scwk-inner { transform: translateZ(calc(-1 * var(--half))) rotateX(90deg); }
.scwk.no-anim .scwk-inner { transition: none; }
.scwk .scwk-front, .scwk .scwk-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: box-shadow .8s; box-sizing: border-box; }
.scwk.flipped .scwk-back, .scwk:focus-visible .scwk-back { box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.scwk .scwk-front { transform: translateZ(var(--half)); background: var(--scwk-front, #e1e1e1); overflow: hidden; }
.scwk .scwk-front img { position: absolute; top: 5%; left: -1.5%; width: 103% !important; max-width: none !important; height: 60% !important; margin: 0 !important; object-fit: cover; object-position: center 15.6%; }
.scwk .scwk-label { position: absolute; top: 66%; bottom: 4%; left: 8px; right: 8px; display: flex; align-items: center; justify-content: center; font: 400 clamp(13px, 7.2cqw, 20px)/1.15 Exo, Arial, sans-serif; text-transform: uppercase; text-align: center; color: #000; }
.scwk .scwk-back { transform: rotateY(90deg) translateZ(var(--half)); background: var(--scwk-back, #42247d); color: #fff; padding: clamp(10px, 7cqw, 20px); justify-content: center; font: 400 clamp(10px, 5.6cqw, 15px)/1.35 Exo, Arial, sans-serif; overflow: hidden; text-align: left; }
.scwk .scwk-back strong { font-family: Exo, Arial, sans-serif; font-weight: 700; font-size: clamp(11px, 6.2cqw, 17px); line-height: 1.25; display: block; margin-bottom: .6em; color: #fff; }
.scwk .scwk-ul { display: block; }
.scwk .scwk-li { display: list-item; list-style: disc; margin: 0 0 .25em 1.1em; }
.scwk.d-l .scwk-back { transform: rotateY(-90deg) translateZ(var(--half)); }
.scwk.d-t .scwk-back { transform: rotateX(90deg) translateZ(var(--half)); }
.scwk.d-b .scwk-back { transform: rotateX(-90deg) translateZ(var(--half)); }
.scwk .scwk-more { margin-top: auto; padding-top: .6em; font-family: Staatliches, Exo, Impact, sans-serif; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { .scwk .scwk-inner { transition: none; } }